feat: token name builder prototype and component-anatomy registry

docs/site/scripts/generate-tools-page.js

@@ -35,6 +35,11 @@ const WEB_TOOLS_CONFIG = [
     path: "/release-timeline/",
     label: "Release Timeline",
   },
+  {
+    dir: "token-name-builder",
+    path: "/token-name-builder/",
+    label: "Token Name Builder",
+  },
 ];
 
 const WEB_TOOLS_FALLBACK_DESCRIPTIONS = {
@@ -44,6 +49,8 @@ const WEB_TOOLS_FALLBACK_DESCRIPTIONS = {
   visualizer: "Interactive dependency graph for Spectrum 1 (legacy) tokens",
   "release-timeline":
     "Interactive visualization of Spectrum Tokens release history across legacy, stable, beta, and snapshot formats",
+  "token-name-builder":
+    "Interactive tool for building Spectrum design token names using the design data spec taxonomy",
 };
 
 function readJson(path) {

docs/site/src/tools.md

@@ -16,6 +16,7 @@ Interactive tools deployed with this site:
 * **[S2 Visualizer](/s2-visualizer/)** — Interactive dependency graph for Spectrum 2 tokens showing ancestor/descendant relationships, value filters, and search
 * **[S1 Visualizer](/visualizer/)** — Interactive dependency graph for Spectrum 1 (legacy) tokens
 * **[Release Timeline](/release-timeline/)** — Interactive timeline visualization of Spectrum Tokens release history
+* **[Token Name Builder](/token-name-builder/)** — Interactive tool for building Spectrum design token names using the design data spec taxonomy
 
 ## Developer Tools
 
@@ -28,6 +29,7 @@ Packages under `tools/` in the repo:
 * **[@adobe/spectrum-design-data-mcp](https://www.npmjs.com/package/%40adobe%2Fspectrum-design-data-mcp)** — Model Context Protocol server for Spectrum design data including tokens, schemas, and component anatomy
 * **[@adobe/spectrum-diff-core](https://www.npmjs.com/package/%40adobe%2Fspectrum-diff-core)** — Shared core library for Spectrum diff generation tools (tokens, component schemas, etc.)
 * **[@adobe/token-diff-generator](https://www.npmjs.com/package/%40adobe%2Ftoken-diff-generator)** — Generate comprehensive diffs between design token sets with support for multiple output formats including CLI, JSON, and Markdown. Detects added, deleted, renamed, deprecated, and updated tokens across different schema versions.
+* **[@adobe/token-name-builder](https://github.com/adobe/spectrum-design-data/tree/main/tools/token-name-builder)** — Interactive web tool for building Spectrum design token names
 * **[component-options-editor](https://github.com/adobe/spectrum-design-data/tree/main/tools/component-options-editor)** — Figma plugin for authoring Spectrum component option schemas
 * **[markdown-generator](https://github.com/adobe/spectrum-design-data/tree/main/tools/markdown-generator)** — Generate markdown files from tokens, component-schemas, and design-system-registry for docs and chatbot indexing
 * **[release-analyzer](https://github.com/adobe/spectrum-design-data/tree/main/tools/release-analyzer)** — Analyzes Spectrum Tokens release history and generates data for change frequency visualization

packages/design-system-registry/index.js

@@ -90,6 +90,10 @@ export const shapes = JSON.parse(
   readFileSync(join(__dirname, "registry", "shapes.json"), "utf-8"),
 );
 
+export const componentAnatomy = JSON.parse(
+  readFileSync(join(__dirname, "registry", "component-anatomy.json"), "utf-8"),
+);
+
 /**
  * Get all values from a registry by ID
  * @param {object} registry - The registry object

packages/design-system-registry/registry/component-anatomy-curation.json

@@ -0,0 +1,105 @@
+{
+  "$comment": "Curation rules applied after extracting raw anatomy data from S2 docs. Documents why the registry diverges from the source markdown. Re-run the extraction script to apply.",
+
+  "removals": {
+    "background": "This is a token object / styling surface (belongs in the 'object' field of the name object, not 'anatomy'). See token-objects.json."
+  },
+
+  "renames": {
+    "action-button-1": {
+      "to": "action-button",
+      "reason": "Numbering artifact from action-group diagram; normalize to the component name."
+    },
+    "action-button-2": {
+      "to": "action-button",
+      "reason": "Numbering artifact from action-group diagram; normalize to the component name."
+    },
+    "body-area": {
+      "to": "body",
+      "reason": "Redundant '-area' suffix; aligns with existing anatomy-terms registry term 'body'."
+    },
+    "header-area": {
+      "to": "header",
+      "reason": "Redundant '-area' suffix; aligns with existing anatomy-terms registry term 'header'."
+    },
+    "footer-area": {
+      "to": "footer",
+      "reason": "Redundant '-area' suffix; aligns with existing anatomy-terms registry term 'footer'."
+    },
+    "small-divider": {
+      "to": "divider",
+      "reason": "Size qualifier is not an anatomy distinction; aligns with existing anatomy-terms registry term 'divider'."
+    }
+  },
+
+  "tags": {
+    "accordion": {
+      "tier": "composite",
+      "note": "Component used as a named part in standard-panel (spec anatomy tier 2)."
+    },
+    "action-button": {
+      "tier": "composite",
+      "note": "Component used as a named part in action-group and contextual-help."
+    },
+    "button": {
+      "tier": "composite",
+      "note": "Component used as a named part in alert-banner, coach-mark, drop-zone, illustrated-message."
+    },
+    "button-group": {
+      "tier": "composite",
+      "note": "Component used as a named part in alert-dialog, coach-mark, standard-dialog, takeover-dialog."
+    },
+    "calendar": {
+      "tier": "composite",
+      "note": "Component used as a named part in date-picker."
+    },
+    "checkbox": {
+      "tier": "composite",
+      "note": "Component used as a named part in cards, list-view, menu, select-box, table, tree-view."
+    },
+    "close-button": {
+      "tier": "composite",
+      "note": "Component used as a named part in alert-banner, coach-mark, standard-dialog, takeover-dialog, toast, in-line-alert."
+    },
+    "field-label": {
+      "tier": "composite",
+      "note": "Component used as a named part in combo-box, date-picker, radio-group, slider."
+    },
+    "help-text": {
+      "tier": "composite",
+      "note": "Component used as a named part in combo-box, number-field, picker, search-field, text-area, text-field, checkbox-group, radio-group."
+    },
+    "link": {
+      "tier": "composite",
+      "note": "Component used as a named part in contextual-help."
+    },
+    "popover": {
+      "tier": "composite",
+      "note": "Component used as a named part in contextual-help, menu."
+    },
+    "swatch": {
+      "tier": "composite",
+      "note": "Component used as a named part in swatch-group."
+    },
+    "switch": {
+      "tier": "composite",
+      "note": "Component used as a named part in menu."
+    },
+    "tag": {
+      "tier": "composite",
+      "note": "Component used as a named part in tag-field, tag-group."
+    },
+    "text-area": {
+      "tier": "composite",
+      "note": "Component used as a named part in tag-field."
+    },
+    "avatar": {
+      "tier": "composite",
+      "note": "Component used as a named part in avatar-group, list-view, tag."
+    },
+    "thumbnail": {
+      "tier": "composite",
+      "note": "Component used as a named part in list-view, menu."
+    }
+  }
+}