{
  "$schema": "./schemas/axis-implementation-map.schema.json",
  "version": 1,
  "instances": [
    {
      "id": "button-color-palette",
      "figmaComponent": "Button",
      "figmaComponentSetIds": [
        "1545:51854",
        "1545:51964",
        "1545:57246",
        "1545:57247",
        "1545:47446",
        "1545:47447",
        "1545:51851",
        "1545:51852"
      ],
      "figmaAxis": "color",
      "figmaValue": "*",
      "codeImplementationLayer": "vue-computed-palette",
      "codeFile": "src/components/Button/Button.vue",
      "codeAnchor": "palette computed: 262 / buttonVars computed: 365 / indirect vars used in CSS: --btn-bg (line 458) / --btn-color (line 459) / --btn-border (line 457)",
      "verifyHint": "grep -n \"const palette\\|const buttonVars\" src/components/Button/Button.vue",
      "notes": "palette 按 props `(color, status, theme, style)` 输入算出 `--brand` / `--brand-hover` / `--red` / `--red-hover` 等真实 token；audit 验证时需解析 Vue AST 找 palette ObjectExpression，按当前 variant 的 axis tuple 在 palette 分支里查最终 cssVar，再跟 figma cssVar 比对"
    },
    {
      "id": "selectboxline-feature-date",
      "figmaComponent": "Select",
      "figmaComponentSetIds": [
        "1436:32816",
        "1804:26921"
      ],
      "figmaAxis": "feature",
      "figmaValue": "date",
      "codeImplementationLayer": "vue-prop",
      "codeFile": [
        "src/canonical/SelectBoxLine.vue",
        "src/canonical/SelectBoxFilled.vue"
      ],
      "codeAnchor": "defineProps#feature: 9 (type Feature = 'default' \\| 'time' \\| 'date'), prop default: 30, transmit to child via :feature=\"feature\": 47",
      "verifyHint": "grep -nE \"type Feature\\s*=\" src/canonical/SelectBoxLine.vue src/canonical/SelectBoxFilled.vue",
      "notes": "feature axis 通过 prop 透传给子组件 SelectBoxBase 处理——不在 .vue CSS 层。**同 figmaValue=date 还有 cross-component-topology 关系**：`playground/docs/pages/DateTimePage.vue` 用 SelectBoxLine + SelectBoxFilled 组合演示 DateTime 行为，executor 补登记 N:1 拓扑时需另起一条 `cross-component-topology` 实例引用本条"
    },
    {
      "id": "promptmessage-status-palette",
      "figmaComponent": "PromptMessage",
      "figmaComponentSetIds": [
        "1408:17153"
      ],
      "figmaAxis": "status",
      "figmaValue": "*",
      "codeImplementationLayer": "vue-computed-palette",
      "codeFile": "src/components/PromptMessage/PromptMessage.vue",
      "codeAnchor": "paletteMap: 29 / palette computed: 67 / inline style vars: --prompt-bg and --prompt-text at 75-78 / CSS consumption: --prompt-bg line 101, --prompt-text lines 126 and 141",
      "verifyHint": "grep -n \"paletteMap\\\\|const palette\\\\|'--prompt-bg'\\\\|'--prompt-text'\" src/components/PromptMessage/PromptMessage.vue",
      "notes": "`status` drives `paletteMap[props.status]`, then inline style injects semantic custom properties. audit must resolve `--prompt-bg` / `--prompt-text` before deciding token fidelity."
    },
    {
      "id": "badge-color-palette",
      "figmaComponent": "Badge",
      "figmaComponentSetIds": [
        "4821:1665"
      ],
      "figmaAxis": "Color",
      "figmaValue": "*",
      "codeImplementationLayer": "vue-computed-palette",
      "codeFile": "src/canonical/Badge.vue",
      "codeAnchor": "palette computed: 18 / badgeVars computed: 38 / indirect vars --badge-accent, --badge-bg, --badge-border at 40-42 / CSS consumption lines 71 and 74",
      "verifyHint": "grep -n \"const palette\\\\|const badgeVars\\\\|--badge-bg\\\\|--badge-border\" src/canonical/Badge.vue",
      "notes": "`Color` chooses the token via `palette.value[props.color]`; `Tag` decides whether the token is assigned to fill or stroke. audit must resolve both axes together."
    },
    {
      "id": "progress-status-palette",
      "figmaComponent": "Progress",
      "figmaComponentSetIds": [
        "4915:7287"
      ],
      "figmaAxis": "status",
      "figmaValue": "*",
      "codeImplementationLayer": "vue-computed-palette",
      "codeFile": "src/components/Progress/Progress.vue",
      "codeAnchor": "fillColor computed: 25 / progressVars computed: 36 / --progress-fill-color at 37 / CSS consumption line 88",
      "verifyHint": "grep -n \"const fillColor\\\\|const progressVars\\\\|--progress-fill-color\" src/components/Progress/Progress.vue",
      "notes": "`status` maps to `--brand`, `--red`, or `--orange` through computed `fillColor`; `theme` track behavior is separately represented by css custom property chain / css-class findings."
    },
    {
      "id": "formitem-labelwidth-palette",
      "figmaComponent": "FormItem",
      "figmaComponentSetIds": [
        "1923:50705"
      ],
      "figmaAxis": "Label Width",
      "figmaValue": "*",
      "codeImplementationLayer": "vue-computed-palette",
      "codeFile": "src/components/FormItem/FormItem.vue",
      "codeAnchor": "rootStyle computed: 42 / --form-item-label-width-current at 46-50 / template :style rootStyle at 97",
      "verifyHint": "grep -n \"const rootStyle\\\\|--form-item-label-width-current\\\\|:style=\\\\\\\"rootStyle\\\\\\\"\" src/components/FormItem/FormItem.vue",
      "notes": "This is geometry rather than color, but it is the same computed-to-custom-property topology. audit should classify it as heuristic dimension evidence unless future tokenized dimension support exists."
    },
    {
      "id": "selectboxline-feature-time",
      "figmaComponent": "Select",
      "figmaComponentSetIds": [
        "1804:26921"
      ],
      "figmaAxis": "feature",
      "figmaValue": "time",
      "codeImplementationLayer": "vue-prop",
      "codeFile": [
        "src/canonical/SelectBoxLine.vue",
        "src/canonical/SelectBoxBase.vue"
      ],
      "codeAnchor": "SelectBoxLine type Feature: 9 / feature prop: 20 / transmit :feature line 47; SelectBoxBase type Feature: 11 / feature prop: 29 / feature-driven icon computed lines 54-60",
      "verifyHint": "grep -nE \"type Feature\\\\s*=|:feature=\\\\\\\"feature\\\\\\\"|props.feature === 'time'\" src/canonical/SelectBoxLine.vue src/canonical/SelectBoxBase.vue",
      "notes": "line variant passes the `feature=time` axis as a prop; no CSS modifier should be required for the audit to consider the axis implemented."
    },
    {
      "id": "selectboxfilled-feature-date",
      "figmaComponent": "Select",
      "figmaComponentSetIds": [
        "1436:32816"
      ],
      "figmaAxis": "feature",
      "figmaValue": "date",
      "codeImplementationLayer": "vue-prop",
      "codeFile": [
        "src/canonical/SelectBoxFilled.vue",
        "src/canonical/SelectBoxBase.vue"
      ],
      "codeAnchor": "SelectBoxFilled type Feature: 9 / feature prop: 20 / transmit :feature line 47; SelectBoxBase feature prop: 29 / leadingFeatureIcon computed line 55",
      "verifyHint": "grep -nE \"type Feature\\\\s*=|:feature=\\\\\\\"feature\\\\\\\"|props.feature === 'time' \\\\? 'clock' : 'calendar'\" src/canonical/SelectBoxFilled.vue src/canonical/SelectBoxBase.vue",
      "notes": "filled variant passes `feature=date` through to shared base behavior."
    },
    {
      "id": "selectboxfilled-feature-time",
      "figmaComponent": "Select",
      "figmaComponentSetIds": [
        "1436:32816"
      ],
      "figmaAxis": "feature",
      "figmaValue": "time",
      "codeImplementationLayer": "vue-prop",
      "codeFile": [
        "src/canonical/SelectBoxFilled.vue",
        "src/canonical/SelectBoxBase.vue"
      ],
      "codeAnchor": "SelectBoxFilled type Feature: 9 / feature prop: 20 / transmit :feature line 47; SelectBoxBase feature-driven icon/clear computed lines 54-60",
      "verifyHint": "grep -nE \"type Feature\\\\s*=|:feature=\\\\\\\"feature\\\\\\\"|props.feature === 'time'\" src/canonical/SelectBoxFilled.vue src/canonical/SelectBoxBase.vue",
      "notes": "same prop-axis implementation as `date`, with `time` resolving to the clock feature path."
    },
    {
      "id": "formitem-status-prop",
      "figmaComponent": "FormItem",
      "figmaComponentSetIds": [
        "1923:50705"
      ],
      "figmaAxis": "Status",
      "figmaValue": "*",
      "codeImplementationLayer": "vue-prop",
      "codeFile": "src/components/FormItem/FormItem.vue",
      "codeAnchor": "type Status: 6 / status prop: 17 / hasError computed: 34 / template form-item--error class line 94",
      "verifyHint": "grep -nE \"type Status\\\\s*=|status\\\\?: Status|hasError|form-item--error\" src/components/FormItem/FormItem.vue",
      "notes": "Figma Status axis is represented as a Vue prop plus computed class, not solely by a direct `status` CSS custom property."
    },
    {
      "id": "tooltip-theme-custom-property-chain",
      "figmaComponent": "Tooltips",
      "figmaComponentSetIds": [
        "1408:17152"
      ],
      "figmaAxis": "dark theme",
      "figmaValue": "*",
      "codeImplementationLayer": "css-custom-property-chain",
      "codeFile": "src/components/Tooltip/Tooltip.vue",
      "codeAnchor": ".tooltip-box consumes --tooltip-bg/--tooltip-text/--tooltip-border at 76-78; .tooltip-box--light defines them at 93-96; .tooltip-box--dark defines them at 99-102",
      "verifyHint": "grep -nE \"tooltip-box--light|tooltip-box--dark|--tooltip-bg|--tooltip-text|--tooltip-border\" src/components/Tooltip/Tooltip.vue",
      "notes": "audit should resolve selector-specific custom property assignments before classifying token mismatch."
    },
    {
      "id": "input-darktheme-custom-property-chain",
      "figmaComponent": "Input",
      "figmaComponentSetIds": [
        "1436:32815",
        "1818:8063"
      ],
      "figmaAxis": "dark theme",
      "figmaValue": "*",
      "codeImplementationLayer": "css-custom-property-chain",
      "codeFile": "src/components/Input/Input.vue",
      "codeAnchor": ".tvu-input--filled consumes --input-filled-bg at 68-70",
      "verifyHint": "grep -nE \"input-filled-bg|tvu-input--filled\" src/components/Input/Input.vue",
      "notes": "Current file consumes `--input-filled-bg`; verify may reveal the actual theme provider defines it outside this component. If no definition is found, audit should return implementation-mismatch or unmapped custom-property source rather than treating `var(--input-filled-bg)` as a direct token mismatch."
    },
    {
      "id": "datetime-select-topology",
      "figmaComponent": "Select",
      "figmaComponentSetIds": [
        "1436:32816",
        "1804:26921"
      ],
      "figmaAxis": "feature",
      "figmaValue": "date",
      "codeImplementationLayer": "cross-component-topology",
      "codeFile": [
        "src/canonical/SelectBoxLine.vue",
        "src/canonical/SelectBoxFilled.vue",
        "playground/docs/pages/DateTimePage.vue"
      ],
      "codeAnchor": "SelectBoxLine/SelectBoxFilled feature prop lines 9 and 47; DateTimePage imports/uses these canonical select components as DateTime source",
      "verifyHint": "grep -nE \"SelectBoxLine|SelectBoxFilled|feature=\\\\\\\"date\\\\\\\"|DateTime\" playground/docs/pages/DateTimePage.vue src/canonical/SelectBoxLine.vue src/canonical/SelectBoxFilled.vue",
      "notes": "DateTime is not an independent Figma set; it is a docs/code topology over Select feature=date/time variants."
    },
    {
      "id": "steps-state-topology",
      "figmaComponent": "Step/Item",
      "figmaComponentSetIds": [
        "4943:7310"
      ],
      "figmaAxis": "state",
      "figmaValue": "*",
      "codeImplementationLayer": "cross-component-topology",
      "codeFile": [
        "src/components/Steps/Steps.vue",
        "src/components/Steps/StepItem.vue",
        "src/canonical/StepItem.vue"
      ],
      "codeAnchor": "Steps provides step state/context; StepItem renders the Figma item implementation; canonical StepItem maps Figma props to runtime item",
      "verifyHint": "grep -nE \"provide\\\\('step|inject\\\\('step|defineProps\" src/components/Steps/Steps.vue src/components/Steps/StepItem.vue src/canonical/StepItem.vue",
      "notes": "Figma publishes item-level set; code has container + item topology."
    },
    {
      "id": "tabs-type-topology",
      "figmaComponent": "Tab/Item",
      "figmaComponentSetIds": [
        "4265:16082",
        "4452:7148"
      ],
      "figmaAxis": "Type",
      "figmaValue": "*",
      "codeImplementationLayer": "cross-component-topology",
      "codeFile": [
        "src/components/Tab/Tab.vue",
        "src/components/Tab/TabList.vue",
        "src/components/Tab/TabItem.vue",
        "src/canonical/Tab.vue",
        "src/canonical/TabList.vue",
        "src/canonical/TabItem.vue"
      ],
      "codeAnchor": "Tab provides active/type context; TabList arranges items; TabItem maps Figma item states",
      "verifyHint": "grep -nE \"provide\\\\('tab|inject\\\\('tab|defineProps\" src/components/Tab/Tab.vue src/components/Tab/TabList.vue src/components/Tab/TabItem.vue src/canonical/Tab.vue src/canonical/TabList.vue src/canonical/TabItem.vue",
      "notes": "Figma has separate Tab List and Tab Item sets; code exposes a multi-file topology."
    },
    {
      "id": "breadcrumb-state-topology",
      "figmaComponent": "Breadcrumb/Item",
      "figmaComponentSetIds": [
        "5003:7495"
      ],
      "figmaAxis": "state",
      "figmaValue": "*",
      "codeImplementationLayer": "cross-component-topology",
      "codeFile": [
        "src/components/Breadcrumb/Breadcrumb.vue",
        "src/components/Breadcrumb/BreadcrumbItem.vue",
        "src/canonical/BreadcrumbItem.vue"
      ],
      "codeAnchor": "Breadcrumb wrapper renders nav/ol; BreadcrumbItem maps Figma state variants; canonical BreadcrumbItem exposes item-level props",
      "verifyHint": "grep -nE \"Breadcrumb wrapper|defineProps|state\" src/components/Breadcrumb/Breadcrumb.vue src/components/Breadcrumb/BreadcrumbItem.vue src/canonical/BreadcrumbItem.vue",
      "notes": "Figma publishes item-level set; code adds a container wrapper, so audit must not treat Breadcrumb container as missing Figma source."
    }
  ]
}