eha-design-system-ai 0.1.0

package/.mcp.json

@@ -0,0 +1,10 @@
+{
+  "mcpServers": {
+    "eha-design-system": {
+      "command": "npx",
+      "args": [
+        "eha-design-system-ai"
+      ]
+    }
+  }
+}

package/EHA_RULES.md

@@ -0,0 +1,34 @@
+# EHA Design System — AI Rules
+
+These rules apply to any AI agent using the `eha-ai` MCP server.
+
+## Non-Negotiable
+
+1. All component imports from `eha-design-system` — never from `rsuite` directly
+2. Button always uses `variant` prop — `'primary' | 'secondary' | 'tertiary' | 'ghost'`
+3. `ThemeProvider` with correct `brand` prop always wraps the app root
+4. Missing components → output comment, never build custom: `// MISSING: [Name] — not in EHA DS`
+5. Never hardcode brand colours — resolve via `brands[brandId].colorPrimitives.*`
+6. Logo assets must be static files at `/public/brands/[brand]/logo.svg` — never remote URLs
+
+## Brand Token Access
+
+```ts
+import { brands } from 'eha-design-system';
+const brand = brands['eha']; // or 'reach', 'lomis', 'etrac'
+```
+
+## Token Access
+
+```ts
+import { designTokens } from 'eha-design-system';
+// designTokens.spacing.lg, designTokens.fontSize.sm, designTokens.colors.neutral20 etc.
+```
+
+`getColor`, `getSpacing`, `getSemanticColor` are NOT exported — do not use them.
+
+## Figma Workflow
+
+1. Map every Figma element to a component using `get_component` tool
+2. Report MISSING items before generating code
+3. Generate code using only resolved components

package/README.md

@@ -0,0 +1,42 @@
+# eha-ai
+
+MCP server for the EHA Design System. Exposes components, design tokens, and code recipes to AI agents via the Model Context Protocol.
+
+## Tools
+
+| Tool | Description |
+|------|-------------|
+| `get_component` | Get full component spec by name or Figma node name |
+| `list_components` | List all available components |
+| `get_token` | Look up a design token by name |
+| `get_recipe` | Get a code recipe for a common UI pattern |
+| `get_brand_tokens` | Get all token values for a specific brand |
+| `resolve_figma` | Map a Figma node name to a DS component |
+
+## Setup
+
+```bash
+npm install
+npm run build
+```
+
+Add to your Claude Code config:
+
+```json
+{
+  "mcpServers": {
+    "eha-ai": {
+      "command": "node",
+      "args": ["/path/to/eha-ai/dist/index.js"]
+    }
+  }
+}
+```
+
+## Sync manifest from DS
+
+```bash
+npm run sync
+```
+
+This pulls the latest component and token definitions from `eha-design-system`.

package/dist/chunk-43DPD5CQ.js

@@ -0,0 +1,173 @@
+// src/recipes/index.ts
+var recipes = [
+  {
+    name: "app-shell",
+    description: "Full app shell with ThemeProvider, Sidenav, and PageHeader",
+    tags: ["layout", "sidenav", "header", "brand"],
+    code: `import { ThemeProvider, Sidenav, PageHeader, brands } from 'eha-design-system';
+import { useState } from 'react';
+
+const brand = brands['reach'];
+
+export function AppShell({ children }: { children: React.ReactNode }) {
+  const [expanded, setExpanded] = useState(true);
+
+  return (
+    <ThemeProvider brand="reach">
+      <div style={{ display: 'flex', height: '100vh' }}>
+        <Sidenav
+          expanded={expanded}
+          onToggle={setExpanded}
+          logo="/brands/reach/logo.svg"
+          collapsedLogo="/brands/reach/icon.svg"
+          style={{ backgroundColor: brand.colorPrimitives.primary50 }}
+          items={[]}
+        />
+        <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
+          <PageHeader title="Dashboard" />
+          <main style={{ flex: 1, padding: 24, overflow: 'auto' }}>
+            {children}
+          </main>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}`
+  },
+  {
+    name: "metric-grid",
+    description: "Responsive grid of MetricCard components",
+    tags: ["dashboard", "metrics", "grid"],
+    code: `import { MetricCard } from 'eha-design-system';
+import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';
+import TrendingUpOutlinedIcon from '@mui/icons-material/TrendingUpOutlined';
+
+export function MetricGrid() {
+  return (
+    <div style={{
+      display: 'grid',
+      gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
+      gap: 20,
+    }}>
+      <MetricCard value="2,420" label="Total Users" icon={<AccountCircleOutlinedIcon />} />
+      <MetricCard value="12.5%" label="Growth Rate" icon={<TrendingUpOutlinedIcon />} />
+      <MetricCard value="98.2%" label="Uptime" />
+    </div>
+  );
+}`
+  },
+  {
+    name: "data-table-with-pagination",
+    description: "Table with sorting and pagination",
+    tags: ["table", "data", "pagination"],
+    code: `import { Table, Button } from 'eha-design-system';
+import { useState } from 'react';
+
+export function DataTable({ data }: { data: Record<string, unknown>[] }) {
+  const [sortColumn, setSortColumn] = useState('');
+  const [sortType, setSortType] = useState<'asc' | 'desc'>('asc');
+
+  return (
+    <Table
+      autoHeight
+      data={data}
+      sortColumn={sortColumn}
+      sortType={sortType}
+      onSortColumn={(col, type) => { setSortColumn(col); setSortType(type); }}
+    >
+      <Table.Column flexGrow={1} sortable>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.Cell dataKey="name" />
+      </Table.Column>
+      <Table.Column width={120} align="center">
+        <Table.HeaderCell>Actions</Table.HeaderCell>
+        <Table.Cell>
+          {(rowData) => (
+            <Button variant="ghost" size="sm">Edit</Button>
+          )}
+        </Table.Cell>
+      </Table.Column>
+    </Table>
+  );
+}`
+  },
+  {
+    name: "confirm-modal",
+    description: "Confirmation modal with primary and ghost actions",
+    tags: ["modal", "dialog", "confirm"],
+    code: `import { Modal, Button } from 'eha-design-system';
+import { useState } from 'react';
+
+export function ConfirmModal({
+  open,
+  onClose,
+  onConfirm,
+  title,
+  message,
+}: {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  message: string;
+}) {
+  return (
+    <Modal open={open} onClose={onClose} size="xs" backdrop="static">
+      <Modal.Header>
+        <Modal.Title>{title}</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>{message}</Modal.Body>
+      <Modal.Footer>
+        <Button variant="primary" onClick={onConfirm}>Confirm</Button>
+        <Button variant="ghost" onClick={onClose}>Cancel</Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}`
+  },
+  {
+    name: "filter-drawer",
+    description: "Filter drawer with clear and apply actions",
+    tags: ["drawer", "filter", "form"],
+    code: `import { Drawer, Button, SelectPicker } from 'eha-design-system';
+
+export function FilterDrawer({
+  open,
+  onClose,
+  onApply,
+}: {
+  open: boolean;
+  onClose: () => void;
+  onApply: () => void;
+}) {
+  return (
+    <Drawer open={open} onClose={onClose} size="sm">
+      <Drawer.Header>
+        <Drawer.Title>Filter</Drawer.Title>
+        <Drawer.Actions>
+          <Button variant="ghost" onClick={onClose}>Clear</Button>
+          <Button variant="primary" onClick={onApply}>Apply</Button>
+        </Drawer.Actions>
+      </Drawer.Header>
+      <Drawer.Body>
+        <SelectPicker
+          data={[{ label: 'Active', value: 'active' }, { label: 'Inactive', value: 'inactive' }]}
+          label="Status"
+          placeholder="Select status"
+          block
+        />
+      </Drawer.Body>
+    </Drawer>
+  );
+}`
+  }
+];
+function getRecipe(name) {
+  return recipes.find((r) => r.name === name || r.tags.includes(name));
+}
+
+export {
+  recipes,
+  getRecipe
+};
+//# sourceMappingURL=chunk-43DPD5CQ.js.map

package/dist/chunk-43DPD5CQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/recipes/index.ts"],"sourcesContent":["/**\n * Code recipes for common EHA Design System UI patterns.\n */\n\nexport interface Recipe {\n  name: string;\n  description: string;\n  tags: string[];\n  code: string;\n}\n\nexport const recipes: Recipe[] = [\n  {\n    name: 'app-shell',\n    description: 'Full app shell with ThemeProvider, Sidenav, and PageHeader',\n    tags: ['layout', 'sidenav', 'header', 'brand'],\n    code: `import { ThemeProvider, Sidenav, PageHeader, brands } from 'eha-design-system';\nimport { useState } from 'react';\n\nconst brand = brands['reach'];\n\nexport function AppShell({ children }: { children: React.ReactNode }) {\n  const [expanded, setExpanded] = useState(true);\n\n  return (\n    <ThemeProvider brand=\"reach\">\n      <div style={{ display: 'flex', height: '100vh' }}>\n        <Sidenav\n          expanded={expanded}\n          onToggle={setExpanded}\n          logo=\"/brands/reach/logo.svg\"\n          collapsedLogo=\"/brands/reach/icon.svg\"\n          style={{ backgroundColor: brand.colorPrimitives.primary50 }}\n          items={[]}\n        />\n        <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>\n          <PageHeader title=\"Dashboard\" />\n          <main style={{ flex: 1, padding: 24, overflow: 'auto' }}>\n            {children}\n          </main>\n        </div>\n      </div>\n    </ThemeProvider>\n  );\n}`,\n  },\n  {\n    name: 'metric-grid',\n    description: 'Responsive grid of MetricCard components',\n    tags: ['dashboard', 'metrics', 'grid'],\n    code: `import { MetricCard } from 'eha-design-system';\nimport AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';\nimport TrendingUpOutlinedIcon from '@mui/icons-material/TrendingUpOutlined';\n\nexport function MetricGrid() {\n  return (\n    <div style={{\n      display: 'grid',\n      gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',\n      gap: 20,\n    }}>\n      <MetricCard value=\"2,420\" label=\"Total Users\" icon={<AccountCircleOutlinedIcon />} />\n      <MetricCard value=\"12.5%\" label=\"Growth Rate\" icon={<TrendingUpOutlinedIcon />} />\n      <MetricCard value=\"98.2%\" label=\"Uptime\" />\n    </div>\n  );\n}`,\n  },\n  {\n    name: 'data-table-with-pagination',\n    description: 'Table with sorting and pagination',\n    tags: ['table', 'data', 'pagination'],\n    code: `import { Table, Button } from 'eha-design-system';\nimport { useState } from 'react';\n\nexport function DataTable({ data }: { data: Record<string, unknown>[] }) {\n  const [sortColumn, setSortColumn] = useState('');\n  const [sortType, setSortType] = useState<'asc' | 'desc'>('asc');\n\n  return (\n    <Table\n      autoHeight\n      data={data}\n      sortColumn={sortColumn}\n      sortType={sortType}\n      onSortColumn={(col, type) => { setSortColumn(col); setSortType(type); }}\n    >\n      <Table.Column flexGrow={1} sortable>\n        <Table.HeaderCell>Name</Table.HeaderCell>\n        <Table.Cell dataKey=\"name\" />\n      </Table.Column>\n      <Table.Column width={120} align=\"center\">\n        <Table.HeaderCell>Actions</Table.HeaderCell>\n        <Table.Cell>\n          {(rowData) => (\n            <Button variant=\"ghost\" size=\"sm\">Edit</Button>\n          )}\n        </Table.Cell>\n      </Table.Column>\n    </Table>\n  );\n}`,\n  },\n  {\n    name: 'confirm-modal',\n    description: 'Confirmation modal with primary and ghost actions',\n    tags: ['modal', 'dialog', 'confirm'],\n    code: `import { Modal, Button } from 'eha-design-system';\nimport { useState } from 'react';\n\nexport function ConfirmModal({\n  open,\n  onClose,\n  onConfirm,\n  title,\n  message,\n}: {\n  open: boolean;\n  onClose: () => void;\n  onConfirm: () => void;\n  title: string;\n  message: string;\n}) {\n  return (\n    <Modal open={open} onClose={onClose} size=\"xs\" backdrop=\"static\">\n      <Modal.Header>\n        <Modal.Title>{title}</Modal.Title>\n      </Modal.Header>\n      <Modal.Body>{message}</Modal.Body>\n      <Modal.Footer>\n        <Button variant=\"primary\" onClick={onConfirm}>Confirm</Button>\n        <Button variant=\"ghost\" onClick={onClose}>Cancel</Button>\n      </Modal.Footer>\n    </Modal>\n  );\n}`,\n  },\n  {\n    name: 'filter-drawer',\n    description: 'Filter drawer with clear and apply actions',\n    tags: ['drawer', 'filter', 'form'],\n    code: `import { Drawer, Button, SelectPicker } from 'eha-design-system';\n\nexport function FilterDrawer({\n  open,\n  onClose,\n  onApply,\n}: {\n  open: boolean;\n  onClose: () => void;\n  onApply: () => void;\n}) {\n  return (\n    <Drawer open={open} onClose={onClose} size=\"sm\">\n      <Drawer.Header>\n        <Drawer.Title>Filter</Drawer.Title>\n        <Drawer.Actions>\n          <Button variant=\"ghost\" onClick={onClose}>Clear</Button>\n          <Button variant=\"primary\" onClick={onApply}>Apply</Button>\n        </Drawer.Actions>\n      </Drawer.Header>\n      <Drawer.Body>\n        <SelectPicker\n          data={[{ label: 'Active', value: 'active' }, { label: 'Inactive', value: 'inactive' }]}\n          label=\"Status\"\n          placeholder=\"Select status\"\n          block\n        />\n      </Drawer.Body>\n    </Drawer>\n  );\n}`,\n  },\n];\n\nexport function getRecipe(name: string): Recipe | undefined {\n  return recipes.find((r) => r.name === name || r.tags.includes(name));\n}\n"],"mappings":";AAWO,IAAM,UAAoB;AAAA,EAC/B;AAAA,IACE,MAAM;AAAA,IACN,aAAa;AAAA,IACb,MAAM,CAAC,UAAU,WAAW,UAAU,OAAO;AAAA,IAC7C,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA6BR;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,aAAa;AAAA,IACb,MAAM,CAAC,aAAa,WAAW,MAAM;AAAA,IACrC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBR;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,aAAa;AAAA,IACb,MAAM,CAAC,SAAS,QAAQ,YAAY;AAAA,IACpC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA8BR;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,aAAa;AAAA,IACb,MAAM,CAAC,SAAS,UAAU,SAAS;AAAA,IACnC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA6BR;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,aAAa;AAAA,IACb,MAAM,CAAC,UAAU,UAAU,MAAM;AAAA,IACjC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA+BR;AACF;AAEO,SAAS,UAAU,MAAkC;AAC1D,SAAO,QAAQ,KAAK,CAAC,MAAM,EAAE,SAAS,QAAQ,EAAE,KAAK,SAAS,IAAI,CAAC;AACrE;","names":[]}

package/dist/chunk-BENZVDE6.js

@@ -0,0 +1,176 @@
+import {
+  components,
+  resolveComponent
+} from "./chunk-TOWRWUJK.js";
+import {
+  brandUiRoles,
+  cssVariables,
+  fontSize,
+  lookupToken,
+  spacing
+} from "./chunk-TGIKADVU.js";
+import {
+  getRecipe,
+  recipes
+} from "./chunk-43DPD5CQ.js";
+
+// src/mcp/server.ts
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { z } from "zod";
+function createServer() {
+  const server = new McpServer({
+    name: "eha-ai",
+    version: "0.1.0"
+  });
+  server.tool(
+    "get_component",
+    "Get full spec for a DS component by name or Figma node name",
+    { query: z.string().describe("Component name or Figma node name") },
+    async ({ query }) => {
+      const component = resolveComponent(query);
+      if (!component) {
+        return {
+          content: [{
+            type: "text",
+            text: `No component found for "${query}". Use list_components to see all available components.`
+          }]
+        };
+      }
+      return {
+        content: [{ type: "text", text: JSON.stringify(component, null, 2) }]
+      };
+    }
+  );
+  server.tool(
+    "list_components",
+    "List all available EHA Design System components",
+    {},
+    async () => {
+      const list = components.map((c) => ({
+        name: c.name,
+        figmaNodeNames: c.figmaNodeNames,
+        cssClass: c.cssClass
+      }));
+      return {
+        content: [{ type: "text", text: JSON.stringify(list, null, 2) }]
+      };
+    }
+  );
+  server.tool(
+    "resolve_figma",
+    "Map a Figma node name to an EHA DS component",
+    { nodeName: z.string().describe("Figma node name from the design") },
+    async ({ nodeName }) => {
+      const component = resolveComponent(nodeName);
+      if (!component) {
+        return {
+          content: [{
+            type: "text",
+            text: `MISSING: "${nodeName}" \u2014 no match in EHA Design System. Do not build a custom implementation without user direction.`
+          }]
+        };
+      }
+      return {
+        content: [{
+          type: "text",
+          text: `"${nodeName}" \u2192 ${component.name}
+Import: ${component.import}`
+        }]
+      };
+    }
+  );
+  server.tool(
+    "get_token",
+    "Look up a design token value by name (spacing, fontSize, borderRadius, shadows)",
+    { name: z.string().describe('Token name e.g. "lg", "sm", "md"') },
+    async ({ name }) => {
+      const value = lookupToken(name);
+      if (!value) {
+        return {
+          content: [{
+            type: "text",
+            text: `Token "${name}" not found. Available spacing: ${Object.keys(spacing).join(", ")}. Available fontSizes: ${Object.keys(fontSize).join(", ")}.`
+          }]
+        };
+      }
+      return {
+        content: [{ type: "text", text: `${name}: ${value}` }]
+      };
+    }
+  );
+  server.tool(
+    "get_brand_tokens",
+    "Get brand token access pattern and UI role mappings for a specific brand",
+    { brand: z.enum(["eha", "reach", "lomis", "etrac"]).describe("Brand identifier") },
+    async ({ brand }) => {
+      const result = {
+        brand,
+        access: `import { brands } from 'eha-design-system';
+const brand = brands['${brand}'];`,
+        uiRoleMapping: brandUiRoles,
+        note: "Resolve brand once at app entry and re-export. Never hardcode hex values.",
+        logoAssets: {
+          logo: `/brands/${brand}/logo.svg`,
+          icon: `/brands/${brand}/icon.svg`
+        }
+      };
+      return {
+        content: [{ type: "text", text: JSON.stringify(result, null, 2) }]
+      };
+    }
+  );
+  server.tool(
+    "get_recipe",
+    "Get a ready-to-use code recipe for a common UI pattern",
+    { name: z.string().describe('Recipe name or tag e.g. "app-shell", "dashboard", "filter"') },
+    async ({ name }) => {
+      const recipe = getRecipe(name);
+      if (!recipe) {
+        const available = recipes.map((r) => `${r.name} (${r.tags.join(", ")})`).join("\n");
+        return {
+          content: [{
+            type: "text",
+            text: `Recipe "${name}" not found.
+
+Available recipes:
+${available}`
+          }]
+        };
+      }
+      return {
+        content: [{
+          type: "text",
+          text: `# ${recipe.name}
+${recipe.description}
+
+\`\`\`tsx
+${recipe.code}
+\`\`\``
+        }]
+      };
+    }
+  );
+  server.tool(
+    "list_css_variables",
+    "List all --ds-* CSS custom properties exposed by ThemeProvider",
+    {},
+    async () => {
+      return {
+        content: [{ type: "text", text: JSON.stringify(cssVariables, null, 2) }]
+      };
+    }
+  );
+  return server;
+}
+async function startServer() {
+  const server = createServer();
+  const transport = new StdioServerTransport();
+  await server.connect(transport);
+}
+
+export {
+  createServer,
+  startServer
+};
+//# sourceMappingURL=chunk-BENZVDE6.js.map

package/dist/chunk-BENZVDE6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/mcp/server.ts"],"sourcesContent":["import {McpServer} from '@modelcontextprotocol/sdk/server/mcp.js';\nimport {StdioServerTransport} from '@modelcontextprotocol/sdk/server/stdio.js';\nimport {z} from 'zod';\nimport {components, resolveComponent} from '../manifests/components.js';\nimport {getRecipe, recipes} from '../recipes/index.js';\nimport {availableBrands, brandUiRoles, cssVariables, lookupToken, spacing, fontSize} from '../tokens/index.js';\n\nexport function createServer() {\n  const server = new McpServer({\n    name: 'eha-ai',\n    version: '0.1.0',\n  });\n\n  // ── get_component ──────────────────────────────────────────────────────────\n  server.tool(\n    'get_component',\n    'Get full spec for a DS component by name or Figma node name',\n    {query: z.string().describe('Component name or Figma node name')},\n    async ({query}) => {\n      const component = resolveComponent(query);\n      if (!component) {\n        return {\n          content: [{\n            type: 'text',\n            text: `No component found for \"${query}\". Use list_components to see all available components.`,\n          }],\n        };\n      }\n      return {\n        content: [{type: 'text', text: JSON.stringify(component, null, 2)}],\n      };\n    },\n  );\n\n  // ── list_components ────────────────────────────────────────────────────────\n  server.tool(\n    'list_components',\n    'List all available EHA Design System components',\n    {},\n    async () => {\n      const list = components.map((c) => ({\n        name: c.name,\n        figmaNodeNames: c.figmaNodeNames,\n        cssClass: c.cssClass,\n      }));\n      return {\n        content: [{type: 'text', text: JSON.stringify(list, null, 2)}],\n      };\n    },\n  );\n\n  // ── resolve_figma ──────────────────────────────────────────────────────────\n  server.tool(\n    'resolve_figma',\n    'Map a Figma node name to an EHA DS component',\n    {nodeName: z.string().describe('Figma node name from the design')},\n    async ({nodeName}) => {\n      const component = resolveComponent(nodeName);\n      if (!component) {\n        return {\n          content: [{\n            type: 'text',\n            text: `MISSING: \"${nodeName}\" — no match in EHA Design System. Do not build a custom implementation without user direction.`,\n          }],\n        };\n      }\n      return {\n        content: [{\n          type: 'text',\n          text: `\"${nodeName}\" → ${component.name}\\nImport: ${component.import}`,\n        }],\n      };\n    },\n  );\n\n  // ── get_token ──────────────────────────────────────────────────────────────\n  server.tool(\n    'get_token',\n    'Look up a design token value by name (spacing, fontSize, borderRadius, shadows)',\n    {name: z.string().describe('Token name e.g. \"lg\", \"sm\", \"md\"')},\n    async ({name}) => {\n      const value = lookupToken(name);\n      if (!value) {\n        return {\n          content: [{\n            type: 'text',\n            text: `Token \"${name}\" not found. Available spacing: ${Object.keys(spacing).join(', ')}. Available fontSizes: ${Object.keys(fontSize).join(', ')}.`,\n          }],\n        };\n      }\n      return {\n        content: [{type: 'text', text: `${name}: ${value}`}],\n      };\n    },\n  );\n\n  // ── get_brand_tokens ───────────────────────────────────────────────────────\n  server.tool(\n    'get_brand_tokens',\n    'Get brand token access pattern and UI role mappings for a specific brand',\n    {brand: z.enum(['eha', 'reach', 'lomis', 'etrac']).describe('Brand identifier')},\n    async ({brand}) => {\n      const result = {\n        brand,\n        access: `import { brands } from 'eha-design-system';\\nconst brand = brands['${brand}'];`,\n        uiRoleMapping: brandUiRoles,\n        note: 'Resolve brand once at app entry and re-export. Never hardcode hex values.',\n        logoAssets: {\n          logo: `/brands/${brand}/logo.svg`,\n          icon: `/brands/${brand}/icon.svg`,\n        },\n      };\n      return {\n        content: [{type: 'text', text: JSON.stringify(result, null, 2)}],\n      };\n    },\n  );\n\n  // ── get_recipe ─────────────────────────────────────────────────────────────\n  server.tool(\n    'get_recipe',\n    'Get a ready-to-use code recipe for a common UI pattern',\n    {name: z.string().describe('Recipe name or tag e.g. \"app-shell\", \"dashboard\", \"filter\"')},\n    async ({name}) => {\n      const recipe = getRecipe(name);\n      if (!recipe) {\n        const available = recipes.map((r) => `${r.name} (${r.tags.join(', ')})`).join('\\n');\n        return {\n          content: [{\n            type: 'text',\n            text: `Recipe \"${name}\" not found.\\n\\nAvailable recipes:\\n${available}`,\n          }],\n        };\n      }\n      return {\n        content: [{\n          type: 'text',\n          text: `# ${recipe.name}\\n${recipe.description}\\n\\n\\`\\`\\`tsx\\n${recipe.code}\\n\\`\\`\\``,\n        }],\n      };\n    },\n  );\n\n  // ── list_css_variables ─────────────────────────────────────────────────────\n  server.tool(\n    'list_css_variables',\n    'List all --ds-* CSS custom properties exposed by ThemeProvider',\n    {},\n    async () => {\n      return {\n        content: [{type: 'text', text: JSON.stringify(cssVariables, null, 2)}],\n      };\n    },\n  );\n\n  return server;\n}\n\nexport async function startServer() {\n  const server = createServer();\n  const transport = new StdioServerTransport();\n  await server.connect(transport);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,SAAQ,iBAAgB;AACxB,SAAQ,4BAA2B;AACnC,SAAQ,SAAQ;AAKT,SAAS,eAAe;AAC7B,QAAM,SAAS,IAAI,UAAU;AAAA,IAC3B,MAAM;AAAA,IACN,SAAS;AAAA,EACX,CAAC;AAGD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,EAAC,OAAO,EAAE,OAAO,EAAE,SAAS,mCAAmC,EAAC;AAAA,IAChE,OAAO,EAAC,MAAK,MAAM;AACjB,YAAM,YAAY,iBAAiB,KAAK;AACxC,UAAI,CAAC,WAAW;AACd,eAAO;AAAA,UACL,SAAS,CAAC;AAAA,YACR,MAAM;AAAA,YACN,MAAM,2BAA2B,KAAK;AAAA,UACxC,CAAC;AAAA,QACH;AAAA,MACF;AACA,aAAO;AAAA,QACL,SAAS,CAAC,EAAC,MAAM,QAAQ,MAAM,KAAK,UAAU,WAAW,MAAM,CAAC,EAAC,CAAC;AAAA,MACpE;AAAA,IACF;AAAA,EACF;AAGA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,CAAC;AAAA,IACD,YAAY;AACV,YAAM,OAAO,WAAW,IAAI,CAAC,OAAO;AAAA,QAClC,MAAM,EAAE;AAAA,QACR,gBAAgB,EAAE;AAAA,QAClB,UAAU,EAAE;AAAA,MACd,EAAE;AACF,aAAO;AAAA,QACL,SAAS,CAAC,EAAC,MAAM,QAAQ,MAAM,KAAK,UAAU,MAAM,MAAM,CAAC,EAAC,CAAC;AAAA,MAC/D;AAAA,IACF;AAAA,EACF;AAGA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,EAAC,UAAU,EAAE,OAAO,EAAE,SAAS,iCAAiC,EAAC;AAAA,IACjE,OAAO,EAAC,SAAQ,MAAM;AACpB,YAAM,YAAY,iBAAiB,QAAQ;AAC3C,UAAI,CAAC,WAAW;AACd,eAAO;AAAA,UACL,SAAS,CAAC;AAAA,YACR,MAAM;AAAA,YACN,MAAM,aAAa,QAAQ;AAAA,UAC7B,CAAC;AAAA,QACH;AAAA,MACF;AACA,aAAO;AAAA,QACL,SAAS,CAAC;AAAA,UACR,MAAM;AAAA,UACN,MAAM,IAAI,QAAQ,YAAO,UAAU,IAAI;AAAA,UAAa,UAAU,MAAM;AAAA,QACtE,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAGA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,EAAC,MAAM,EAAE,OAAO,EAAE,SAAS,kCAAkC,EAAC;AAAA,IAC9D,OAAO,EAAC,KAAI,MAAM;AAChB,YAAM,QAAQ,YAAY,IAAI;AAC9B,UAAI,CAAC,OAAO;AACV,eAAO;AAAA,UACL,SAAS,CAAC;AAAA,YACR,MAAM;AAAA,YACN,MAAM,UAAU,IAAI,mCAAmC,OAAO,KAAK,OAAO,EAAE,KAAK,IAAI,CAAC,0BAA0B,OAAO,KAAK,QAAQ,EAAE,KAAK,IAAI,CAAC;AAAA,UAClJ,CAAC;AAAA,QACH;AAAA,MACF;AACA,aAAO;AAAA,QACL,SAAS,CAAC,EAAC,MAAM,QAAQ,MAAM,GAAG,IAAI,KAAK,KAAK,GAAE,CAAC;AAAA,MACrD;AAAA,IACF;AAAA,EACF;AAGA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,SAAS,SAAS,OAAO,CAAC,EAAE,SAAS,kBAAkB,EAAC;AAAA,IAC/E,OAAO,EAAC,MAAK,MAAM;AACjB,YAAM,SAAS;AAAA,QACb;AAAA,QACA,QAAQ;AAAA,wBAAsE,KAAK;AAAA,QACnF,eAAe;AAAA,QACf,MAAM;AAAA,QACN,YAAY;AAAA,UACV,MAAM,WAAW,KAAK;AAAA,UACtB,MAAM,WAAW,KAAK;AAAA,QACxB;AAAA,MACF;AACA,aAAO;AAAA,QACL,SAAS,CAAC,EAAC,MAAM,QAAQ,MAAM,KAAK,UAAU,QAAQ,MAAM,CAAC,EAAC,CAAC;AAAA,MACjE;AAAA,IACF;AAAA,EACF;AAGA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,EAAC,MAAM,EAAE,OAAO,EAAE,SAAS,4DAA4D,EAAC;AAAA,IACxF,OAAO,EAAC,KAAI,MAAM;AAChB,YAAM,SAAS,UAAU,IAAI;AAC7B,UAAI,CAAC,QAAQ;AACX,cAAM,YAAY,QAAQ,IAAI,CAAC,MAAM,GAAG,EAAE,IAAI,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC,GAAG,EAAE,KAAK,IAAI;AAClF,eAAO;AAAA,UACL,SAAS,CAAC;AAAA,YACR,MAAM;AAAA,YACN,MAAM,WAAW,IAAI;AAAA;AAAA;AAAA,EAAuC,SAAS;AAAA,UACvE,CAAC;AAAA,QACH;AAAA,MACF;AACA,aAAO;AAAA,QACL,SAAS,CAAC;AAAA,UACR,MAAM;AAAA,UACN,MAAM,KAAK,OAAO,IAAI;AAAA,EAAK,OAAO,WAAW;AAAA;AAAA;AAAA,EAAkB,OAAO,IAAI;AAAA;AAAA,QAC5E,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAGA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,CAAC;AAAA,IACD,YAAY;AACV,aAAO;AAAA,QACL,SAAS,CAAC,EAAC,MAAM,QAAQ,MAAM,KAAK,UAAU,cAAc,MAAM,CAAC,EAAC,CAAC;AAAA,MACvE;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;AAEA,eAAsB,cAAc;AAClC,QAAM,SAAS,aAAa;AAC5B,QAAM,YAAY,IAAI,qBAAqB;AAC3C,QAAM,OAAO,QAAQ,SAAS;AAChC;","names":[]}

package/dist/chunk-TGIKADVU.js

@@ -0,0 +1,97 @@
+// src/tokens/index.ts
+var spacing = {
+  xs: "4px",
+  sm: "8px",
+  md: "12px",
+  lg: "16px",
+  xl: "20px",
+  "2xl": "24px",
+  "3xl": "32px",
+  "4xl": "40px",
+  "5xl": "48px",
+  "6xl": "64px"
+};
+var fontSize = {
+  xxs: "10px",
+  xs: "12px",
+  sm: "14px",
+  md: "16px",
+  lg: "18px",
+  xl: "20px",
+  "2xl": "24px",
+  "3xl": "32px",
+  "4xl": "36px",
+  "5xl": "48px"
+};
+var fontWeight = {
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700
+};
+var borderRadius = {
+  none: "0",
+  xs: "2px",
+  sm: "4px",
+  md: "6px",
+  lg: "8px",
+  xl: "12px",
+  "2xl": "16px",
+  full: "9999px"
+};
+var shadows = {
+  none: "none",
+  sm: "0 1px 2px 0 rgba(0,0,0,0.05)",
+  md: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)",
+  lg: "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)"
+};
+var cssVariables = {
+  "color-primary-10": "--ds-color-primary-10",
+  "color-primary-20": "--ds-color-primary-20",
+  "color-primary-30": "--ds-color-primary-30",
+  "color-primary-40": "--ds-color-primary-40",
+  "color-primary-50": "--ds-color-primary-50",
+  "color-primary-60": "--ds-color-primary-60",
+  "text-primary": "--ds-text-primary",
+  "text-secondary": "--ds-text-secondary",
+  "bg-primary": "--ds-bg-primary",
+  "bg-secondary": "--ds-bg-secondary",
+  "border-default": "--ds-border-default",
+  "interactive-primary": "--ds-interactive-primary",
+  "feedback-error": "--ds-feedback-error",
+  "feedback-success": "--ds-feedback-success",
+  "feedback-warning": "--ds-feedback-warning"
+};
+var brandUiRoles = {
+  sidenavBackground: "colorPrimitives.primary50",
+  sidenavActiveAndHover: "colorPrimitives.primary60",
+  sidenavSubMenuBackground: "colorPrimitives.primary60",
+  metricCardIconCircleBackground: "colorPrimitives.primary10",
+  metricCardIconColor: "colorPrimitives.primary50",
+  loginTemplatePanelBackground: "colorPrimitives.primary50",
+  buttonPrimary: "semanticColors.interactive.primary",
+  buttonPrimaryHover: "semanticColors.interactive.primaryHover"
+};
+var availableBrands = ["eha", "reach", "lomis", "etrac"];
+function lookupToken(name) {
+  const all = {
+    ...spacing,
+    ...fontSize,
+    ...borderRadius,
+    ...shadows
+  };
+  return all[name];
+}
+
+export {
+  spacing,
+  fontSize,
+  fontWeight,
+  borderRadius,
+  shadows,
+  cssVariables,
+  brandUiRoles,
+  availableBrands,
+  lookupToken
+};
+//# sourceMappingURL=chunk-TGIKADVU.js.map

package/dist/chunk-TGIKADVU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/index.ts"],"sourcesContent":["/**\n * Design token definitions for the EHA Design System.\n * Sourced from eha-design-system@0.2.2.\n */\n\nexport const spacing = {\n  xs: '4px', sm: '8px', md: '12px', lg: '16px',\n  xl: '20px', '2xl': '24px', '3xl': '32px', '4xl': '40px',\n  '5xl': '48px', '6xl': '64px',\n} as const;\n\nexport const fontSize = {\n  xxs: '10px', xs: '12px', sm: '14px', md: '16px',\n  lg: '18px', xl: '20px', '2xl': '24px', '3xl': '32px',\n  '4xl': '36px', '5xl': '48px',\n} as const;\n\nexport const fontWeight = {\n  regular: 400, medium: 500, semibold: 600, bold: 700,\n} as const;\n\nexport const borderRadius = {\n  none: '0', xs: '2px', sm: '4px', md: '6px',\n  lg: '8px', xl: '12px', '2xl': '16px', full: '9999px',\n} as const;\n\nexport const shadows = {\n  none: 'none',\n  sm: '0 1px 2px 0 rgba(0,0,0,0.05)',\n  md: '0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)',\n  lg: '0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)',\n} as const;\n\nexport const cssVariables = {\n  'color-primary-10': '--ds-color-primary-10',\n  'color-primary-20': '--ds-color-primary-20',\n  'color-primary-30': '--ds-color-primary-30',\n  'color-primary-40': '--ds-color-primary-40',\n  'color-primary-50': '--ds-color-primary-50',\n  'color-primary-60': '--ds-color-primary-60',\n  'text-primary': '--ds-text-primary',\n  'text-secondary': '--ds-text-secondary',\n  'bg-primary': '--ds-bg-primary',\n  'bg-secondary': '--ds-bg-secondary',\n  'border-default': '--ds-border-default',\n  'interactive-primary': '--ds-interactive-primary',\n  'feedback-error': '--ds-feedback-error',\n  'feedback-success': '--ds-feedback-success',\n  'feedback-warning': '--ds-feedback-warning',\n} as const;\n\nexport const brandUiRoles = {\n  sidenavBackground: 'colorPrimitives.primary50',\n  sidenavActiveAndHover: 'colorPrimitives.primary60',\n  sidenavSubMenuBackground: 'colorPrimitives.primary60',\n  metricCardIconCircleBackground: 'colorPrimitives.primary10',\n  metricCardIconColor: 'colorPrimitives.primary50',\n  loginTemplatePanelBackground: 'colorPrimitives.primary50',\n  buttonPrimary: 'semanticColors.interactive.primary',\n  buttonPrimaryHover: 'semanticColors.interactive.primaryHover',\n} as const;\n\nexport type BrandId = 'eha' | 'reach' | 'lomis' | 'etrac';\n\nexport const availableBrands: BrandId[] = ['eha', 'reach', 'lomis', 'etrac'];\n\nexport function lookupToken(name: string): string | undefined {\n  const all: Record<string, string> = {\n    ...spacing,\n    ...fontSize,\n    ...(borderRadius as Record<string, string>),\n    ...(shadows as Record<string, string>),\n  };\n  return all[name];\n}\n"],"mappings":";AAKO,IAAM,UAAU;AAAA,EACrB,IAAI;AAAA,EAAO,IAAI;AAAA,EAAO,IAAI;AAAA,EAAQ,IAAI;AAAA,EACtC,IAAI;AAAA,EAAQ,OAAO;AAAA,EAAQ,OAAO;AAAA,EAAQ,OAAO;AAAA,EACjD,OAAO;AAAA,EAAQ,OAAO;AACxB;AAEO,IAAM,WAAW;AAAA,EACtB,KAAK;AAAA,EAAQ,IAAI;AAAA,EAAQ,IAAI;AAAA,EAAQ,IAAI;AAAA,EACzC,IAAI;AAAA,EAAQ,IAAI;AAAA,EAAQ,OAAO;AAAA,EAAQ,OAAO;AAAA,EAC9C,OAAO;AAAA,EAAQ,OAAO;AACxB;AAEO,IAAM,aAAa;AAAA,EACxB,SAAS;AAAA,EAAK,QAAQ;AAAA,EAAK,UAAU;AAAA,EAAK,MAAM;AAClD;AAEO,IAAM,eAAe;AAAA,EAC1B,MAAM;AAAA,EAAK,IAAI;AAAA,EAAO,IAAI;AAAA,EAAO,IAAI;AAAA,EACrC,IAAI;AAAA,EAAO,IAAI;AAAA,EAAQ,OAAO;AAAA,EAAQ,MAAM;AAC9C;AAEO,IAAM,UAAU;AAAA,EACrB,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,eAAe;AAAA,EAC1B,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,uBAAuB;AAAA,EACvB,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,oBAAoB;AACtB;AAEO,IAAM,eAAe;AAAA,EAC1B,mBAAmB;AAAA,EACnB,uBAAuB;AAAA,EACvB,0BAA0B;AAAA,EAC1B,gCAAgC;AAAA,EAChC,qBAAqB;AAAA,EACrB,8BAA8B;AAAA,EAC9B,eAAe;AAAA,EACf,oBAAoB;AACtB;AAIO,IAAM,kBAA6B,CAAC,OAAO,SAAS,SAAS,OAAO;AAEpE,SAAS,YAAY,MAAkC;AAC5D,QAAM,MAA8B;AAAA,IAClC,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAI;AAAA,IACJ,GAAI;AAAA,EACN;AACA,SAAO,IAAI,IAAI;AACjB;","names":[]}