@kanso-protocol/mcp 0.1.0

package/README.md

@@ -0,0 +1,129 @@
+# @kanso-protocol/mcp
+
+[Model Context Protocol](https://modelcontextprotocol.io) server for [Kanso Protocol](https://gregnblack.github.io/kanso-protocol/) — exposes the catalog of components, patterns, and design tokens to AI assistants so they can author Kanso UI without leaving the editor.
+
+## What you get
+
+Eleven tools, all running locally over stdio.
+
+**Catalog** — typed metadata extracted from the source code at build time:
+
+| Tool | What it returns |
+| --- | --- |
+| `catalog_overview` | Version, totals, links — call once per session. |
+| `list_components` | Compact list of every `@kanso-protocol/*` component with selector, package, ARIA role. |
+| `get_component` | Full record — inputs (name/type/default), outputs, ARIA role, keyboard patterns, Storybook URL, **plus the Figma node ref**. |
+| `list_patterns` | Same shape, for higher-level pattern packages. |
+| `get_pattern` | Full record for one pattern. |
+| `list_tokens` | Every CSS variable from `tokens.css`, optionally filtered by category or substring. |
+| `get_token` | One token by name (with or without the `--kp-` prefix). |
+
+**Figma bridge** — points at the canonical public Kanso Design System file, so any Figma-MCP-aware client (Claude Code with the Figma MCP installed, Cursor, etc.) can pull the visual reference for the same component the assistant is writing code for:
+
+| Tool | What it returns |
+| --- | --- |
+| `figma_context` | File key + URL of the Kanso Figma library, IDs of the Components / Patterns / Foundations / Examples pages, and the linked Tabler Icon Pack file. |
+| `figma_for_component` | `{ fileKey, nodeId, url }` for the component's master frame — feed straight into Figma MCP's `get_design_context` or `get_screenshot`. |
+| `figma_for_pattern` | Same shape for higher-level patterns. |
+| `figma_for_icon` | Tabler icon library context + a search hint the assistant uses with Figma MCP's `search_design_system`. |
+
+The data comes from a manifest baked at build time — no network calls, deterministic, fast.
+
+### Customizing the Figma bridge
+
+By default the bridge points at the **public canonical Kanso Design System file**. That's the right target for most users — even if you fork the system, the canonical Figma file is still your visual source of truth.
+
+Override when you need to:
+
+```bash
+# point at a forked / private Figma file
+KANSO_FIGMA_FILE_KEY=<your-file-key> npx @kanso-protocol/mcp
+
+# (optional) override the URL too
+KANSO_FIGMA_FILE_URL=https://figma.com/design/<key>/<name> npx @kanso-protocol/mcp
+```
+
+The component/pattern/foundation node IDs in the shipped mapping point at the canonical file's nodes; they will not match arbitrary forked layouts. If you've heavily restructured your Figma file, set `KANSO_FIGMA_FILE_KEY` to it and the bridge will return your file key with the original node IDs (use them as a hint, not a guarantee), or stop using `figma_for_component` entirely and fall back to Figma MCP's `search_design_system` with the right file key.
+
+## Install
+
+The server runs via `npx`, so there's nothing to install globally. Pick the snippet for your editor:
+
+### Claude Code
+
+One command from the project root:
+
+```bash
+claude mcp add kanso -- npx @kanso-protocol/mcp
+```
+
+…or drop this into your project's `.mcp.json` (create the file if missing):
+
+```jsonc
+{
+  "mcpServers": {
+    "kanso": { "command": "npx", "args": ["@kanso-protocol/mcp"] }
+  }
+}
+```
+
+Restart Claude Code, then run `/mcp` to confirm `kanso` appears as ✔ connected with 7 tools.
+
+### Cursor
+
+Open *Settings → Features → MCP* → **Add new MCP server**:
+
+- Name: `kanso`
+- Type: `command`
+- Command: `npx @kanso-protocol/mcp`
+
+…or edit `~/.cursor/mcp.json` (project-scoped: `.cursor/mcp.json` in repo root):
+
+```jsonc
+{
+  "mcpServers": {
+    "kanso": { "command": "npx", "args": ["@kanso-protocol/mcp"] }
+  }
+}
+```
+
+### VS Code (Continue, Cline, GitHub Copilot agent mode)
+
+Add to the extension's MCP config — for Continue this is `~/.continue/config.json`, for Cline it's the *Cline MCP Servers* settings panel. Same shape:
+
+```jsonc
+{
+  "mcpServers": {
+    "kanso": { "command": "npx", "args": ["@kanso-protocol/mcp"] }
+  }
+}
+```
+
+### Any other MCP-aware client (Zed, Windsurf, Goose, custom)
+
+Any client that speaks the [MCP stdio transport](https://modelcontextprotocol.io/docs/concepts/transports) works:
+
+```
+command: npx
+args:    ["@kanso-protocol/mcp"]
+```
+
+## Usage
+
+Once connected, ask the assistant things like:
+
+- *"What size ramp does `kp-input` support, and which validators does form-field translate by default?"*
+- *"Show me every danger-color token."*
+- *"Which Kanso component should I use for a settings sidebar with collapsible sections?"*
+- *"Generate an inline edit form using kp-form-field, kp-input, and kp-button."*
+
+The assistant calls `list_components` / `get_component` / `list_tokens` under the hood and answers from the live catalog instead of guessing.
+
+## What's not in 0.1.x
+
+- **No Figma bridge yet.** The next minor will add `figma_component_for(name)` and `figma_token_for(name)` so an agent can hop straight from a Kanso component to its Figma master node and pull a screenshot via the Figma MCP.
+- **No example-generation tool.** Pure metadata for now — let the agent compose snippets from the inputs/outputs it learns. We'll revisit if it turns out hand-crafting matters.
+
+## License
+
+MIT — © GregNBlack. Part of the [Kanso Protocol](https://github.com/GregNBlack/kanso-protocol) monorepo.

package/dist/index.js

@@ -0,0 +1,343 @@
+#!/usr/bin/env node
+/**
+ * Kanso Protocol — Model Context Protocol server.
+ *
+ * Exposes the component / pattern / token catalog so an AI agent in Claude
+ * Code / Cursor / VS Code can author Kanso UI without the developer having
+ * to paste docs or sift through package READMEs.
+ *
+ * Transport: stdio. Launch via `npx @kanso-protocol/mcp`.
+ * Manifest: ships next to the compiled JS (packages/mcp/manifest.json),
+ * regenerated by `scripts/generate-mcp-manifest.js` on every build.
+ *
+ * Implementation note — uses the low-level `Server` API rather than the
+ * high-level `McpServer`. The latter infers tool input shapes through
+ * deeply generic Zod plumbing, which trips TS's "Type instantiation is
+ * excessively deep" check in CI. Hand-rolled JSON Schema avoids the
+ * inference cost entirely and keeps the build deterministic.
+ */
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, resolve } from 'node:path';
+import { Server } from '@modelcontextprotocol/sdk/server/index.js';
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import { CallToolRequestSchema, ListToolsRequestSchema, } from '@modelcontextprotocol/sdk/types.js';
+function loadManifest() {
+    const here = dirname(fileURLToPath(import.meta.url));
+    // When installed via npm, the manifest lives one level up (next to package.json).
+    const candidates = [
+        resolve(here, '..', 'manifest.json'),
+        resolve(here, 'manifest.json'),
+    ];
+    for (const p of candidates) {
+        try {
+            return JSON.parse(readFileSync(p, 'utf8'));
+        }
+        catch {
+            /* try next */
+        }
+    }
+    throw new Error('manifest.json not found — run `node scripts/generate-mcp-manifest.js` first.');
+}
+/**
+ * Resolve the Figma file context with environment-variable overrides:
+ *   KANSO_FIGMA_FILE_KEY  — point at a forked / private Kanso file instead of
+ *                           the canonical public one. Useful when a team
+ *                           branches the system internally.
+ *   KANSO_FIGMA_FILE_URL  — full URL override; rarely needed (auto-derived
+ *                           from fileKey if missing).
+ * If the manifest has no figma block (e.g., the mapping JSON wasn't shipped),
+ * we return null and the bridge tools downgrade to a "not configured" error.
+ */
+function resolveFigma(fig) {
+    if (!fig)
+        return null;
+    const overrideKey = process.env.KANSO_FIGMA_FILE_KEY;
+    const overrideUrl = process.env.KANSO_FIGMA_FILE_URL;
+    if (!overrideKey && !overrideUrl)
+        return fig;
+    const fileKey = overrideKey ?? fig.fileKey;
+    const url = overrideUrl ?? `https://www.figma.com/design/${fileKey}/Design-System`;
+    return { ...fig, fileKey, url };
+}
+function nodeUrl(fileKey, nodeId) {
+    return `https://www.figma.com/design/${fileKey}/Design-System?node-id=${nodeId.replace(':', '-')}`;
+}
+function summarize(c) {
+    return {
+        name: c.name,
+        selector: c.selector,
+        package: c.package,
+        summary: c.description.split('\n')[0] || '',
+        ariaRole: c.ariaRole,
+    };
+}
+const manifest = loadManifest();
+const figma = resolveFigma(manifest.figma);
+const tools = [
+    {
+        name: 'catalog_overview',
+        title: 'Catalog overview',
+        description: 'One-shot summary: version, totals, and generation timestamp. Call once at session start to get a feel for what the MCP knows.',
+        inputSchema: { type: 'object', properties: {} },
+        handler: () => JSON.stringify({
+            version: manifest.version,
+            generatedAt: manifest.generatedAt,
+            totals: manifest.totals,
+            docs: 'https://gregnblack.github.io/kanso-protocol/',
+            repo: 'https://github.com/GregNBlack/kanso-protocol',
+        }, null, 2),
+    },
+    {
+        name: 'list_components',
+        title: 'List Kanso components',
+        description: 'Return a compact list of every component in @kanso-protocol/* — one line per item with selector, package, ARIA role, and a one-line summary. Use this first to discover what exists before calling get_component for details.',
+        inputSchema: { type: 'object', properties: {} },
+        handler: () => JSON.stringify(manifest.components.map(summarize), null, 2),
+    },
+    {
+        name: 'get_component',
+        title: 'Get one Kanso component',
+        description: 'Full metadata for a single component: description, usage example, every @Input (name/type/default/description), every @Output with its payload type, ARIA role, detected keyboard patterns, and the Storybook docs URL. Accepts either the short name ("button") or the selector ("kp-button").',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                name: { type: 'string', description: 'Component short name (e.g. "button") or selector (e.g. "kp-button")' },
+            },
+            required: ['name'],
+        },
+        handler: (args) => {
+            const raw = String(args.name ?? '');
+            const key = raw.replace(/^kp-/, '').toLowerCase();
+            const hit = manifest.components.find((c) => c.name === key || c.selector === `kp-${key}` || c.className.toLowerCase() === `kp${key.replace(/-/g, '')}component`);
+            if (!hit)
+                return { error: `No component named "${raw}". Call list_components to see available names.` };
+            return JSON.stringify(hit, null, 2);
+        },
+    },
+    {
+        name: 'list_patterns',
+        title: 'List Kanso patterns',
+        description: 'Patterns are larger compositions (page shells, layouts, bars) built from components — e.g. app-shell, page-header, filter-bar. Same shape as components in the manifest.',
+        inputSchema: { type: 'object', properties: {} },
+        handler: () => JSON.stringify(manifest.patterns.map(summarize), null, 2),
+    },
+    {
+        name: 'get_pattern',
+        title: 'Get one Kanso pattern',
+        description: 'Full metadata for a single pattern — inputs, outputs, description, docs URL.',
+        inputSchema: {
+            type: 'object',
+            properties: { name: { type: 'string', description: 'Pattern short name (e.g. "page-header")' } },
+            required: ['name'],
+        },
+        handler: (args) => {
+            const raw = String(args.name ?? '');
+            const key = raw.replace(/^kp-/, '').toLowerCase();
+            const hit = manifest.patterns.find((p) => p.name === key || p.selector === `kp-${key}`);
+            if (!hit)
+                return { error: `No pattern named "${raw}". Call list_patterns to see available names.` };
+            return JSON.stringify(hit, null, 2);
+        },
+    },
+    {
+        name: 'list_tokens',
+        title: 'List Kanso design tokens',
+        description: 'Return every CSS custom property from the built tokens.css. Optionally filter by category ("color" | "spacing" | "radius" | "motion" | "font" | …) or by a substring of the name.',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                category: { type: 'string', description: 'Top-level category (e.g. "color"). Omit to return all.' },
+                contains: { type: 'string', description: 'Case-insensitive substring to match anywhere in the token name.' },
+            },
+        },
+        handler: (args) => {
+            const category = args.category ? String(args.category) : undefined;
+            const needle = args.contains ? String(args.contains).toLowerCase() : undefined;
+            const rows = manifest.tokens.filter((t) => {
+                if (category && t.category !== category)
+                    return false;
+                if (needle && !t.name.toLowerCase().includes(needle))
+                    return false;
+                return true;
+            });
+            return JSON.stringify(rows, null, 2);
+        },
+    },
+    {
+        name: 'get_token',
+        title: 'Get one Kanso token',
+        description: 'Look up a single CSS variable. Accepts with or without the "--kp-" prefix.',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                name: { type: 'string', description: 'Token name, with or without "--kp-" prefix (e.g. "color-blue-600" or "--kp-color-blue-600")' },
+            },
+            required: ['name'],
+        },
+        handler: (args) => {
+            const raw = String(args.name ?? '');
+            const normalized = raw.startsWith('--kp-') ? raw : `--kp-${raw.replace(/^kp-/, '')}`;
+            const hit = manifest.tokens.find((t) => t.name === normalized);
+            if (!hit)
+                return { error: `No token named "${normalized}". Call list_tokens to discover.` };
+            return JSON.stringify(hit, null, 2);
+        },
+    },
+    // ─── Figma bridge ─────────────────────────────────────────────────────
+    // These tools return the Figma context the assistant needs to immediately
+    // call the official Figma MCP (https://help.figma.com/hc/articles/32132100833559)
+    // — `get_design_context`, `get_screenshot`, `get_variable_defs`, etc. —
+    // without an extra discovery step. Each response includes:
+    //   - fileKey + nodeId          (feed straight into the Figma MCP)
+    //   - url                       (clickable link for the human in the loop)
+    //   - relatedFigmaTools         (which Figma MCP tools to chain next)
+    // The default file key points at the canonical public Kanso Design System
+    // file. Override with KANSO_FIGMA_FILE_KEY env var when working off a fork.
+    {
+        name: 'figma_context',
+        title: 'Figma library context',
+        description: 'Top-level Figma metadata: canonical Design System file key + URL, page IDs (Components / Patterns / Foundations / Examples), and the linked Tabler icon library file. Call once when starting Figma-aware work so subsequent tools have the right fileKey to target.',
+        inputSchema: { type: 'object', properties: {} },
+        handler: () => {
+            if (!figma) {
+                return { error: 'Figma bridge is not configured. The manifest was generated without a figma-mapping.json — re-run `npm run generate:mcp-manifest` after copying the mapping into the package.' };
+            }
+            return JSON.stringify({
+                fileKey: figma.fileKey,
+                fileName: figma.fileName,
+                url: figma.url,
+                pages: figma.pages,
+                iconLibrary: figma.iconLibrary,
+                foundationsPages: Object.entries(figma.foundations).map(([key, nodeId]) => ({
+                    name: key,
+                    nodeId,
+                    url: nodeUrl(figma.fileKey, nodeId),
+                })),
+                notes: [
+                    'Pass fileKey to Figma MCP tools (get_design_context, get_screenshot, get_variable_defs).',
+                    'KANSO_FIGMA_FILE_KEY env var overrides the canonical key when working from a fork.',
+                ],
+            }, null, 2);
+        },
+    },
+    {
+        name: 'figma_for_component',
+        title: 'Figma node for a Kanso component',
+        description: 'Resolve a Kanso component name to its master frame in the Figma library. Returns fileKey + nodeId you feed into the Figma MCP\'s get_design_context (for code-and-screenshot) or get_screenshot (for a flat preview).',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                name: { type: 'string', description: 'Component short name (e.g. "button") or selector (e.g. "kp-button")' },
+            },
+            required: ['name'],
+        },
+        handler: (args) => {
+            if (!figma)
+                return { error: 'Figma bridge is not configured.' };
+            const raw = String(args.name ?? '');
+            const key = raw.replace(/^kp-/, '').toLowerCase();
+            const hit = manifest.components.find((c) => c.name === key || c.selector === `kp-${key}` || c.className.toLowerCase() === `kp${key.replace(/-/g, '')}component`);
+            if (!hit)
+                return { error: `No component named "${raw}". Call list_components to see available names.` };
+            if (!hit.figma) {
+                return { error: `Component "${hit.name}" exists but has no Figma node mapping. Add it to packages/mcp/figma-mapping.json and regenerate the manifest.` };
+            }
+            return JSON.stringify({
+                component: hit.name,
+                package: hit.package,
+                fileKey: figma.fileKey,
+                nodeId: hit.figma.nodeId,
+                url: nodeUrl(figma.fileKey, hit.figma.nodeId),
+                relatedFigmaTools: [
+                    { tool: 'get_design_context', purpose: 'Pull the master frame as code + screenshot.' },
+                    { tool: 'get_screenshot', purpose: 'Plain PNG of the master frame (no code).' },
+                    { tool: 'get_variable_defs', purpose: 'List the CSS variables this frame consumes.' },
+                ],
+            }, null, 2);
+        },
+    },
+    {
+        name: 'figma_for_pattern',
+        title: 'Figma node for a Kanso pattern',
+        description: 'Same shape as figma_for_component but resolves higher-level patterns (app-shell, page-header, sidebar, …).',
+        inputSchema: {
+            type: 'object',
+            properties: { name: { type: 'string', description: 'Pattern short name (e.g. "page-header")' } },
+            required: ['name'],
+        },
+        handler: (args) => {
+            if (!figma)
+                return { error: 'Figma bridge is not configured.' };
+            const raw = String(args.name ?? '');
+            const key = raw.replace(/^kp-/, '').toLowerCase();
+            const hit = manifest.patterns.find((p) => p.name === key || p.selector === `kp-${key}`);
+            if (!hit)
+                return { error: `No pattern named "${raw}". Call list_patterns to see available names.` };
+            if (!hit.figma) {
+                return { error: `Pattern "${hit.name}" exists but has no Figma node mapping.` };
+            }
+            return JSON.stringify({
+                pattern: hit.name,
+                package: hit.package,
+                fileKey: figma.fileKey,
+                nodeId: hit.figma.nodeId,
+                url: nodeUrl(figma.fileKey, hit.figma.nodeId),
+            }, null, 2);
+        },
+    },
+    {
+        name: 'figma_for_icon',
+        title: 'Figma context for the icon library',
+        description: 'Returns the Tabler Icon Pack file context — separate from the main Design System file. The Kanso Icon component wraps an instance from this library, so any glyph the assistant might want to insert lives there. Pass `query` to receive a search hint the assistant feeds into Figma MCP\'s search_design_system tool.',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                query: { type: 'string', description: 'Optional icon name or concept (e.g. "search", "trash"). The response includes a searchQuery + library key the agent can use with Figma MCP\'s search_design_system.' },
+            },
+        },
+        handler: (args) => {
+            if (!figma?.iconLibrary)
+                return { error: 'Icon library mapping is not configured.' };
+            const query = args.query ? String(args.query).trim() : null;
+            return JSON.stringify({
+                fileKey: figma.iconLibrary.fileKey,
+                libraryName: figma.iconLibrary.name,
+                url: `https://www.figma.com/design/${figma.iconLibrary.fileKey}/${encodeURIComponent(figma.iconLibrary.name)}`,
+                suggestedSearchQuery: query,
+                relatedFigmaTools: [
+                    { tool: 'search_design_system', purpose: 'Find the icon by name across the Tabler Icon Pack.' },
+                    { tool: 'get_libraries', purpose: 'Confirm the library is subscribed in the target file.' },
+                ],
+                usageNote: 'In Kanso, every icon slot expects an instance of an Icon-component wrapper, not a raw Tabler glyph. Find the Tabler glyph here, then wrap it via the Kanso `kp-icon` component (see get_component name="icon" if it exists, otherwise the icon slot in the parent component\'s docs).',
+            }, null, 2);
+        },
+    },
+];
+// ─── Wire up the server ─────────────────────────────────────────────────
+const server = new Server({ name: 'kanso-protocol', version: manifest.version }, { capabilities: { tools: {} } });
+server.setRequestHandler(ListToolsRequestSchema, async () => ({
+    tools: tools.map(({ name, title, description, inputSchema }) => ({
+        name,
+        title,
+        description,
+        inputSchema,
+    })),
+}));
+server.setRequestHandler(CallToolRequestSchema, async (req) => {
+    const tool = tools.find((t) => t.name === req.params.name);
+    if (!tool) {
+        return {
+            content: [{ type: 'text', text: `Unknown tool: ${req.params.name}` }],
+            isError: true,
+        };
+    }
+    const args = (req.params.arguments ?? {});
+    const result = tool.handler(args);
+    if (typeof result === 'object' && result && 'error' in result) {
+        return { content: [{ type: 'text', text: result.error }], isError: true };
+    }
+    return { content: [{ type: 'text', text: result }] };
+});
+const transport = new StdioServerTransport();
+await server.connect(transport);

package/figma-mapping.json

@@ -0,0 +1,91 @@
+{
+  "$comment": "Bridge from Kanso component / pattern / token names to Figma node IDs in the Design System library. Generated initially via the Figma MCP — keep in sync when components are added or renamed in Figma. Each `nodeId` can be passed to Figma MCP tools (get_design_context, get_screenshot) along with the fileKey.",
+  "fileKey": "ahRfe4BdMAyoK0I3lnicp6",
+  "fileName": "Design-System",
+  "url": "https://www.figma.com/design/ahRfe4BdMAyoK0I3lnicp6/Design-System",
+  "pages": {
+    "components":  { "id": "0:1",     "name": "🧩 Components" },
+    "patterns":    { "id": "3612:2",  "name": "📐 Patterns" },
+    "foundations": { "id": "6:4",     "name": "🎨 Foundations" },
+    "examples":    { "id": "3753:2",  "name": "🖼️ Example Pages" },
+    "assets":      { "id": "17:2",    "name": "⚙️ Assets" },
+    "manifest":    { "id": "6:3",     "name": "📋 Manifest" },
+    "cover":       { "id": "6:2",     "name": "📖 Cover" }
+  },
+  "iconLibrary": {
+    "fileKey": "0bgkes9nJYbk0vonduKaVZ",
+    "name": "Tabler Icon Pack",
+    "$comment": "Single source of icon glyphs for Kanso. The Icon component wraps an instance from this library."
+  },
+  "components": {
+    "button":            "3805:10993",
+    "input":             "3805:10997",
+    "checkbox":          "3805:11001",
+    "radio":             "3805:11005",
+    "toggle":            "3805:11009",
+    "form-field":        "3805:11016",
+    "menu":              "3805:11020",
+    "textarea":          "3805:11024",
+    "select":            "3805:11028",
+    "number-stepper":    "3805:11032",
+    "segmented-control": "3805:11036",
+    "badge":             "3805:11040",
+    "alert":             "3805:11044",
+    "tooltip":           "3805:11048",
+    "popover":           "3805:11052",
+    "progress":          "3805:11056",
+    "tabs":              "3805:11068",
+    "breadcrumbs":       "3805:11072",
+    "pagination":        "3805:11076",
+    "dialog":            "3805:11083",
+    "divider":           "3805:11087",
+    "card":              "3805:11091",
+    "empty-state":       "3805:11095",
+    "drawer":            "3805:11099",
+    "accordion":         "3805:11103",
+    "skeleton":          "3805:11107",
+    "slider":            "3805:11111",
+    "combobox":          "3805:11115",
+    "datepicker":        "3805:11119",
+    "timepicker":        "3805:11123",
+    "toast":             "3805:11127",
+    "table":             "3805:11131",
+    "tree":              "3805:11135",
+    "avatar":            "3805:11139",
+    "avatar-group":      "3805:11139",
+    "rich-text-editor":  "3849:11648"
+  },
+  "patterns": {
+    "app-shell":           "3822:7265",
+    "banner":              "3822:7272",
+    "container":           "3822:7280",
+    "filter-bar":          "3822:7288",
+    "form-section":        "3822:7296",
+    "grid":                "3822:7304",
+    "header":              "3822:7312",
+    "nav-item":            "3822:7320",
+    "notification-center": "3822:7327",
+    "page-error":          "3822:7334",
+    "page-header":         "3822:7341",
+    "search-bar":          "3822:7356",
+    "settings-panel":      "3822:7364",
+    "sidebar":             "3822:7372",
+    "stat-card":           "3822:7387",
+    "table-toolbar":       "3822:7395",
+    "theme-toggle":        "3822:7403",
+    "user-menu":           "3822:7411",
+    "stack":               "3825:7265",
+    "row":                 "3825:7273"
+  },
+  "foundations": {
+    "typography":         "3043:2",
+    "colors":             "3051:2",
+    "spacing":            "3055:2",
+    "sizing":             "3056:2",
+    "radius":             "3057:2",
+    "elevation":          "3881:2",
+    "overlays":           "3881:30",
+    "foreground-on-dark": "3881:73",
+    "motion":             "3881:93"
+  }
+}