feat(element-mcp-server): add MCP server package and Kiro config

.kiro/agents/code-planner.json

@@ -0,0 +1,18 @@
+{
+  "name": "code-planner",
+  "description": "Helps plan, commit, and ship code changes. Creates branches, writes conventional commit messages, opens pull requests, and manages releases.",
+  "welcomeMessage": "👋 I'm the code planner agent. I can help you create branches, write conventional commits, open PRs, and manage releases. What do you need to ship?",
+  "prompt": "You help plan, commit, and ship code changes. You create branches, write conventional commit messages, open pull requests, and manage releases.\n\n## Scope\n- Git operations: branching, staging, committing, pushing\n- GitHub: pull requests, reviews, issues\n- Release workflow: `yarn nx affected --target version --parallel=1`\n\n## Key conventions\n- Default branch: `main`\n- Commit format: Conventional Commits (`@commitlint/config-conventional` + `@commitlint/config-nx-scopes`)\n  - Types: `feat`, `fix`, `docs`, `chore`, `refactor`, `test`, `ci`, `perf`, `build`\n  - Scope should be the Nx project name (e.g. `feat(mui-button): ...`)\n- Branch naming: `feat/`, `fix/`, `chore/`, `docs/` prefixes\n- PRs target `main`\n- Husky hooks:\n  - `pre-commit`: `yarn lint:affected`\n  - `commit-msg`: `npx --no -- commitlint --edit`\n  - `pre-push`: `yarn lint:affected` + `yarn test:affected`\n- Versioning is independent per package via `@jscutlery/semver`\n- Version commit format: `chore({projectName}): release version ${version} [skip ci]`\n- Tag format: `@availity/{projectName}@{version}`\n- Publishing: `yarn npm publish --tolerate-republish --access public`",
+  "tools": ["fs_read", "fs_write", "execute_bash", "grep", "glob", "code"],
+  "allowedTools": ["fs_read", "grep", "glob", "code"],
+  "resources": ["file://.kiro/experts/git.md"],
+  "mcpServers": {
+    "github": {
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-github"],
+      "env": {
+        "GITHUB_PERSONAL_ACCESS_TOKEN": "${GITHUB_PERSONAL_TOKEN}"
+      }
+    }
+  }
+}

.kiro/agents/dev.json

@@ -0,0 +1,15 @@
+{
+  "name": "element-dev",
+  "description": "Development assistant for the element Nx monorepo — Availity's MUI-based React component library.",
+  "welcomeMessage": "👋 I'm the Element dev agent. I can help you build, test, and lint packages, scaffold new components, write stories, and debug issues across the monorepo. What are you working on?",
+  "prompt": "You are a development assistant for the `element` Nx monorepo — Availity's design system built on MUI 7 and React 19.\n\n## Scope\n- All component packages under `packages/` (published as `@availity/mui-*`)\n- The umbrella package `@availity/element`\n- Design tokens (`@availity/design-tokens`), theme (`@availity/theme`), theme-provider (`@availity/theme-provider`)\n- Storybook app in `apps/element-storybook/`\n- Nx generator plugin in `packages/nx-generator/`\n\n## Key conventions\n- Yarn 4.12.0 with `nodeLinker: node-modules` — always use `yarn` commands, never `npm`\n- Nx 22.5.3 — use `yarn nx <target> <project>` or `yarn nx affected --target=<target>`\n- Default branch is `main`\n- TypeScript 5.9.3 (strict, JSX react-jsx, ESNext modules)\n- Packages build with `tsup` (ESM + CJS + DTS)\n- Tests use Jest 30 + Testing Library + jest-environment-jsdom-global\n- Test files are co-located as `*.test.ts(x)` or `*.spec.ts(x)` in `src/lib/`\n- ESLint 8 with `@nx/eslint` plugin + `plugin:storybook/recommended`\n- Prettier: 120 cols, single quotes, trailing commas es5\n- Commits follow Conventional Commits (`@commitlint/config-conventional` + `@commitlint/config-nx-scopes`)\n- Packages use `@availity/mui-*` naming; Nx project names drop the `@availity/` prefix\n- New packages are scaffolded via `yarn create:package <name>`\n- Storybook 10 with `@storybook/react-vite`, a11y addon, and themes addon",
+  "tools": ["fs_read", "fs_write", "execute_bash", "grep", "glob", "code"],
+  "allowedTools": ["fs_read", "grep", "glob", "code"],
+  "resources": ["file://.kiro/experts/build.md", "file://.kiro/experts/testing.md", "file://.kiro/experts/git.md"],
+  "mcpServers": {
+    "nx": {
+      "command": "npx",
+      "args": ["-y", "nx-mcp@latest"]
+    }
+  }
+}

.kiro/agents/product.json

@@ -0,0 +1,8 @@
+{
+  "name": "product",
+  "description": "Product-level knowledge base for the element Nx monorepo — packages, stack, CI pipeline, and conventions.",
+  "welcomeMessage": "👋 I'm the product agent. I can answer questions about Element's packages, architecture, CI pipeline, and conventions. What would you like to know?",
+  "prompt": "Nx monorepo providing the Availity Element design system — a React component library built on MUI 7.\n\n## Packages\n- `@availity/element` — umbrella package re-exporting all components\n- `@availity/mui-*` — individual component packages (button, dialog, table, datepicker, etc.)\n- `@availity/design-tokens` — design token definitions\n- `@availity/theme` / `@availity/theme-provider` — MUI theme configuration\n- `@availity/mui-utils` / `@availity/mui-form-utils` — shared utilities\n- `@availity/nx-generator` — Nx plugin for scaffolding new packages\n- `@availity/mock` — mock data for Storybook stories\n\n## Stack\n- Node ≥20 / Yarn 4.12.0 (`nodeLinker: node-modules`)\n- Nx 22.5.3 (`@nx/js`, `@nx/jest`, `@nx/eslint`, `@nx/react`, `@nx/storybook`, `@nx/vite`)\n- TypeScript 5.9.3 (strict, JSX react-jsx)\n- React 19 + MUI 7 (`@mui/material`, `@mui/lab`, `@mui/x-data-grid`)\n- Packages build with `tsup` (ESM + CJS + DTS)\n- Jest 30 + Testing Library for unit tests\n- Storybook 10 (`@storybook/react-vite`) with a11y and themes addons\n- ESLint 8 with `@nx/eslint` + storybook plugin\n- Prettier (120 cols, single quotes, trailing commas es5)\n- Commitlint (`@commitlint/config-conventional` + `@commitlint/config-nx-scopes`)\n- `@jscutlery/semver` for independent versioning\n\n## Workspaces\n`packages/*`\n\n## CI\n- PR: build → lint → test → version dry-run (matrix: ubuntu+macos, node 20/22/24)\n- Deploy (main): lint → test → build → version → publish → release PR → deploy Storybook to GitHub Pages\n\n## Default branch\n`main`",
+  "tools": ["fs_read", "grep", "glob", "code"],
+  "allowedTools": ["fs_read", "grep", "glob", "code"]
+}

.kiro/experts/build.md

@@ -0,0 +1,15 @@
+# Build & Monorepo Conventions
+
+- Nx 22.5.3 with `@nx/js`, `@nx/jest`, `@nx/eslint`, `@nx/react`, `@nx/storybook`, `@nx/vite`
+- Yarn 4.12.0 workspaces: `packages/*`
+- `nodeLinker: node-modules` (no PnP)
+- Nx targets with caching: `build`, `test`, `lint`, `build-storybook`
+- `build` depends on `^build` (dependency ordering)
+- Run affected: `yarn nx affected --target=<target>` (base: `main`)
+- Packages build with `tsup` — `tsup src/index.ts --format esm,cjs --dts`
+- Storybook 10 in `apps/element-storybook/` — start with `yarn start:storybook`
+- New packages: `yarn create:package <name>` (uses `@availity/nx-generator`)
+- Versioning: `@jscutlery/semver` — independent per package, conventional changelog
+- Tag format: `@availity/{projectName}@{version}`
+- Publishing: `yarn npm publish --tolerate-republish --access public`
+- `@nx/enforce-module-boundaries` enforced at root ESLint config

.kiro/experts/git.md

@@ -0,0 +1,14 @@
+# Git Conventions
+
+- Default branch: `main`
+- Commit format: Conventional Commits (`@commitlint/config-conventional` + `@commitlint/config-nx-scopes`)
+- Scope = Nx project name (e.g. `fix(mui-button): ...`)
+- Husky hooks:
+  - `pre-commit`: `yarn lint:affected`
+  - `commit-msg`: `npx --no -- commitlint --edit`
+  - `pre-push`: `yarn lint:affected` + `yarn test:affected`
+- lint-staged: `*.{js,ts,tsx}` → lint + prettier, `*.json` → prettier
+- Branch prefixes: `feat/`, `fix/`, `chore/`, `docs/`, `release/`
+- PRs target `main`
+- CI skips on commit messages containing `skip ci` or `Release: Version Updates`
+- Release flow: `nx affected --target version --parallel=1` → publish → auto-PR (`release/version-updates`) to `main`

.kiro/experts/testing.md

@@ -0,0 +1,13 @@
+# Testing Conventions
+
+- Framework: Jest 30 with `@nx/jest:jest` executor
+- Preset: `@nx/jest/preset` extended via `jest.preset.js`
+- Global config: `jest.config.global.js` — ts-jest transform, jsdom-global env, Testing Library setup
+- Test files: `*.test.ts(x)` or `*.spec.ts(x)` co-located in `src/lib/`
+- Setup: `@testing-library/jest-dom` (auto-imported via `setupFilesAfterEnv`)
+- Polyfills: `jest.polyfills.global.js` (undici mocks for fetch/Request/Response/etc.)
+- Module mapping: tsconfig paths mapped via `pathsToModuleNameMapper`, CSS → `identity-obj-proxy`
+- Coverage: `json-summary` reporter, merged via `scripts/merge-coverage.js`
+- Run all: `yarn test`
+- Run affected: `yarn test:affected`
+- CI matrix: Node 20, 22, 24 on ubuntu-latest + macos-latest

.kiro/mcp.json

@@ -0,0 +1,9 @@
+{
+  "mcpServers": {
+    "nx": {
+      "command": "yarn",
+      "args": ["nx", "mcp"],
+      "cwd": "/Users/jordan.young/Workspaces/element"
+    }
+  }
+}

.mise.toml

@@ -0,0 +1,55 @@
+[tasks.install]
+run = "yarn install"
+description = "Install dependencies"
+
+[tasks.build]
+run = "yarn build"
+description = "Build all packages"
+
+[tasks.test]
+run = "yarn test"
+description = "Run all unit tests"
+
+[tasks."test:affected"]
+run = "yarn test:affected"
+description = "Run tests for affected packages"
+
+[tasks.lint]
+run = "yarn lint"
+description = "Lint all packages"
+
+[tasks."lint:affected"]
+run = "yarn lint:affected"
+description = "Lint affected packages"
+
+[tasks.start]
+run = "yarn start:storybook"
+description = "Start Storybook dev server"
+
+[tasks."build:storybook"]
+run = "yarn build:storybook"
+description = "Build Storybook"
+
+[tasks.clean]
+run = "yarn clean"
+description = "Clean build artifacts"
+
+[tasks."create:package"]
+run = "yarn create:package {{arg(name='package')}}"
+description = "Scaffold a new component package"
+
+[tasks."version:dry-run"]
+run = "yarn version:dry-run"
+description = "Dry-run version bump for affected packages"
+
+[tasks.ai]
+run = "kiro-cli chat --agent element-dev"
+description = "Start dev agent"
+
+[tasks."ai:planner"]
+run = "kiro-cli chat --agent code-planner"
+description = "Start code-planner agent"
+
+[tasks."ai:product"]
+run = "kiro-cli chat --agent product"
+description = "Start product knowledge agent"

.npmrc

@@ -0,0 +1,2 @@
+package-lock=false
+registry="https://registry.npmjs.org/"

packages/theme/src/lib/legacy-theme.ts

@@ -2438,6 +2438,11 @@ export const legacyTheme = {
           '&.MuiInputBase-root': {
             width: 'auto',
           },
+          '&.Mui-focused': {
+            outline: `2px solid ${tokens.borderInputFocus}`,
+            outlineOffset: '-2px',
+            borderRadius: '3px',
+          },
         },
         select: {
           '&.MuiTablePagination-select.MuiSelect-select': {

packages/theme/src/lib/light-theme.ts

@@ -2402,6 +2402,11 @@ export const lightTheme = {
           '&.MuiInputBase-root': {
             width: 'auto',
           },
+          '&.Mui-focused': {
+            outline: `2px solid ${tokens.borderInputFocus}`,
+            outlineOffset: '-2px',
+            borderRadius: '.25rem',
+          },
         },
         select: {
           '&.MuiTablePagination-select.MuiSelect-select': {