@forgeax/interface 0.4.1

package/dist/package/packages/design/styles/fx-bridge.css

@@ -0,0 +1,25 @@
+/* =============================================================================
+   FX BRIDGE LAYER — short `--fx-*` namespace consumed by the Tailwind preset
+   (see preset.ts). Maps the ForgeaX semantic tokens onto the handful of names
+   shadcn/Tailwind needs (background / foreground / border / accent / ...).
+
+   This is the ONLY layer the framework migration adds. Components reference
+   semantic Tailwind classes (bg-background, text-muted-foreground, ...) which
+   resolve here → semantic tokens → primitives. Swapping skins = redefining
+   these (and the semantic layer) under a `[data-theme]` selector; no `.tsx`
+   touched.
+
+   ForgeaX is dark-only today, so the values live on `:root`.
+   ============================================================================= */
+:root {
+  --fx-bg:       var(--color-background-canvas);     /* page background  #0D0D0D */
+  --fx-bg-elev1: var(--color-background-elevated);   /* card / popover   #242424 */
+  --fx-bg-elev2: var(--color-background-base);       /* muted / secondary #191919 */
+  --fx-fg:       var(--color-text-primary);          /* #FFFFFF */
+  --fx-fg-muted: var(--color-text-secondary);        /* rgba(255,255,255,.6) */
+  --fx-border:   var(--color-border-default);        /* #404040 */
+  --fx-accent:   var(--color-brand-primary);         /* lime #D4FF48 */
+  --fx-danger:   var(--color-status-error);          /* #BE3636 */
+  --fx-success:  var(--color-status-success);        /* #1B9D4B */
+  --fx-info:     var(--color-accent-blue-default);   /* #639CF8 */
+}

package/dist/package/packages/design/styles/primitive.css

@@ -0,0 +1,199 @@
+/* =============================================================================
+   PRIMITIVE LAYER — 来自 foundation.tokens.json (Figma Primitive 集合)
+   不直接在组件中使用，仅供 semantic 层引用。
+   命名规则：--prim-{category}-{subcategory}-{step}
+
+   SSOT: this file is the single source of truth shared by the host and plugins.
+   ============================================================================= */
+:root {
+
+  /* ── z-axis ─────────────────────────────────────────────────────────────── */
+  --prim-z-level-0: 0;
+  --prim-z-level-1: 100;
+  --prim-z-level-2: 200;
+  --prim-z-level-3: 300;
+  --prim-z-level-4: 9999;
+
+  /* ── radius (unitless int → used as `Xpx` in semantic layer) ────────────── */
+  --prim-radius-0:    0px;
+  --prim-radius-2:    2px;
+  --prim-radius-4:    4px;
+  --prim-radius-6:    6px;
+  --prim-radius-8:    8px;
+  --prim-radius-12:  12px;
+  --prim-radius-16:  16px;
+  --prim-radius-20:  20px;
+  --prim-radius-24:  24px;
+  --prim-radius-full: 9999px;
+
+  /* ── opacity ────────────────────────────────────────────────────────────── */
+  --prim-opacity-5:   0.05;
+  --prim-opacity-10:  0.10;
+  --prim-opacity-20:  0.20;
+  --prim-opacity-30:  0.30;
+  --prim-opacity-40:  0.40;
+  --prim-opacity-50:  0.50;
+  --prim-opacity-60:  0.60;
+  --prim-opacity-70:  0.70;
+  --prim-opacity-80:  0.80;
+  --prim-opacity-90:  0.90;
+  --prim-opacity-100: 1;
+
+  /* ── space ──────────────────────────────────────────────────────────────── */
+  --prim-space-2:   2px;
+  --prim-space-4:   4px;
+  --prim-space-6:   6px;
+  --prim-space-8:   8px;
+  --prim-space-10: 10px;
+  --prim-space-12: 12px;
+  --prim-space-16: 16px;
+  --prim-space-20: 20px;
+
+  /* ── typography ─────────────────────────────────────────────────────────── */
+  --prim-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", system-ui, sans-serif;
+  --prim-font-mono: "Fira Mono", "JetBrains Mono", "SF Mono", "Menlo", ui-monospace, monospace;
+
+  /* ── color / neutral ────────────────────────────────────────────────────── */
+  --prim-color-neutral-0:    #FFFFFF;
+  --prim-color-neutral-50:   #F2F2F2;
+  --prim-color-neutral-100:  #E6E6E6;
+  --prim-color-neutral-150:  #D9D9D9;
+  --prim-color-neutral-200:  #CCCCCC;
+  --prim-color-neutral-250:  #BFBFBF;
+  --prim-color-neutral-300:  #B3B3B3;
+  --prim-color-neutral-350:  #A6A6A6;
+  --prim-color-neutral-400:  #999999;
+  --prim-color-neutral-450:  #8C8C8C;
+  --prim-color-neutral-500:  #808080;
+  --prim-color-neutral-550:  #737373;
+  --prim-color-neutral-600:  #666666;
+  --prim-color-neutral-650:  #595959;
+  --prim-color-neutral-700:  #4D4D4D;
+  --prim-color-neutral-750:  #404040;
+  --prim-color-neutral-800:  #333333;
+  --prim-color-neutral-850:  #242424;
+  --prim-color-neutral-900:  #191919;
+  --prim-color-neutral-950:  #0D0D0D;
+  --prim-color-neutral-1000: #000000;
+
+  /* ── color / lime ───────────────────────────────────────────────────────── */
+  --prim-color-lime-50:  #FCFFF0;
+  --prim-color-lime-100: #F6FFD8;
+  --prim-color-lime-200: #EBFFA8;
+  --prim-color-lime-300: #DFFF78;
+  --prim-color-lime-400: #D4FF48; /* brand ForgeaX primary */
+  --prim-color-lime-500: #B1D43C;
+  --prim-color-lime-600: #8DAA30;
+  --prim-color-lime-700: #6A7F24;
+  --prim-color-lime-800: #465418;
+  --prim-color-lime-900: #232A0C;
+  --prim-color-lime-950: #111406;
+
+  /* ── color / orange ─────────────────────────────────────────────────────── */
+  --prim-color-orange-50:  #FFF7EE;
+  --prim-color-orange-100: #FFEDD8;
+  --prim-color-orange-200: #FFD9AD;
+  --prim-color-orange-300: #FFC481;
+  --prim-color-orange-400: #FFB056;
+  --prim-color-orange-500: #FF9C2A; /* brand zaohua */
+  --prim-color-orange-600: #CB7C21;
+  --prim-color-orange-700: #975C19;
+  --prim-color-orange-800: #633C10;
+  --prim-color-orange-900: #2E1C08;
+  --prim-color-orange-950: #140C03;
+
+  /* ── color / blue ───────────────────────────────────────────────────────── */
+  --prim-color-blue-50:  #EFF5FE;
+  --prim-color-blue-100: #DBE8FD;
+  --prim-color-blue-200: #B3CFFC;
+  --prim-color-blue-300: #8BB5FA;
+  --prim-color-blue-400: #639CF8;
+  --prim-color-blue-500: #3B82F6;
+  --prim-color-blue-600: #2F67C4;
+  --prim-color-blue-700: #234D91;
+  --prim-color-blue-800: #17325F;
+  --prim-color-blue-900: #0B182D;
+  --prim-color-blue-950: #050A14;
+
+  /* ── color / green ──────────────────────────────────────────────────────── */
+  --prim-color-green-50:  #EDFAF2;
+  --prim-color-green-100: #D7F4E2;
+  --prim-color-green-200: #AAE9C1;
+  --prim-color-green-300: #7CDDA0;
+  --prim-color-green-400: #4FD17F;
+  --prim-color-green-500: #22C55E;
+  --prim-color-green-600: #1B9D4B;
+  --prim-color-green-700: #147438;
+  --prim-color-green-800: #0D4C24;
+  --prim-color-green-900: #062411;
+  --prim-color-green-950: #031008;
+
+  /* ── color / red ────────────────────────────────────────────────────────── */
+  --prim-color-red-50:  #FEF0F0;
+  --prim-color-red-100: #FCDDDD;
+  --prim-color-red-200: #F9B7B7;
+  --prim-color-red-300: #F69090;
+  --prim-color-red-400: #F26A6A;
+  --prim-color-red-500: #EF4444;
+  --prim-color-red-600: #BE3636;
+  --prim-color-red-700: #8D2828;
+  --prim-color-red-800: #5C1A1A;
+  --prim-color-red-900: #2C0C0C;
+  --prim-color-red-950: #130505;
+
+  /* ── color / yellow ─────────────────────────────────────────────────────── */
+  --prim-color-yellow-50:  #FDF9EB;
+  --prim-color-yellow-100: #FBF1D2;
+  --prim-color-yellow-200: #F7E29F;
+  --prim-color-yellow-300: #F3D26D;
+  --prim-color-yellow-400: #EEC33A;
+  --prim-color-yellow-500: #EAB308;
+  --prim-color-yellow-600: #BA8E06;
+  --prim-color-yellow-700: #8A6A05;
+  --prim-color-yellow-800: #5A4503;
+  --prim-color-yellow-900: #2B2101;
+  --prim-color-yellow-950: #130E01;
+
+  /* ── color / purple ─────────────────────────────────────────────────────── */
+  --prim-color-purple-50:  #F8F1FE;
+  --prim-color-purple-100: #EFE0FE;
+  --prim-color-purple-200: #DDBDFC;
+  --prim-color-purple-300: #CC9BFA;
+  --prim-color-purple-400: #BA78F9;
+  --prim-color-purple-500: #A855F7;
+  --prim-color-purple-600: #8644C5;
+  --prim-color-purple-700: #633292;
+  --prim-color-purple-800: #412160;
+  --prim-color-purple-900: #1F0F2D;
+  --prim-color-purple-950: #0D0714;
+
+  /* ── color / teal ───────────────────────────────────────────────────────── */
+  --prim-color-teal-50:  #EDFDF8;
+  --prim-color-teal-100: #C9F9ED;
+  --prim-color-teal-200: #96F3DE;
+  --prim-color-teal-300: #63EACF;
+  --prim-color-teal-400: #48FFCF; /* brand ForgeaX secondary */
+  --prim-color-teal-500: #2ACDA8;
+  --prim-color-teal-600: #20A086;
+  --prim-color-teal-700: #1D6655;
+  --prim-color-teal-800: #134840;
+  --prim-color-teal-900: #0A2A24;
+  --prim-color-teal-950: #051510;
+
+  /* ── color / pink ───────────────────────────────────────────────────────── */
+  --prim-color-pink-50:  #FFF0F7;
+  --prim-color-pink-100: #FFD4EE;
+  --prim-color-pink-200: #FFA8DA;
+  --prim-color-pink-300: #FF6DB8;
+  --prim-color-pink-400: #FF0080; /* accent-pink */
+  --prim-color-pink-500: #CC0067;
+  --prim-color-pink-600: #99004D;
+  --prim-color-pink-700: #700038;
+  --prim-color-pink-800: #4D0026;
+  --prim-color-pink-900: #2A0015;
+  --prim-color-pink-950: #150009;
+
+  /* ── color / sky ────────────────────────────────────────────────────── */
+  --prim-color-sky-300: #7dd3fc;  /* art role */
+  --prim-color-sky-400: #6cc4ff;  /* cli-provider / bus-link */
+}

package/dist/package/packages/design/styles/semantic.css

@@ -0,0 +1,262 @@
+/* =============================================================================
+   SEMANTIC LAYER — 来自 semantic.tokens.json (Figma Semantic 集合)
+   命名规则：--color-{category}-{role}
+
+   SSOT shared by host + plugins. Depends on primitive.css (import it first).
+   ============================================================================= */
+:root {
+
+  /* ── text ───────────────────────────────────────────────────────────────── */
+  --color-text-primary:             var(--prim-color-neutral-0);       /* #FFFFFF */
+  --color-text-secondary:           rgba(255, 255, 255, 0.60);
+  --color-text-tertiary:            rgba(255, 255, 255, 0.30);
+  --color-text-disabled:            rgba(255, 255, 255, 0.20);
+  --color-text-on-bright-primary:   var(--prim-color-neutral-1000);    /* #000000 */
+  --color-text-on-bright-secondary: rgba(0, 0, 0, 0.60);
+  --color-text-on-bright-tertiary:  rgba(0, 0, 0, 0.30);
+  --color-text-on-bright-disabled:  rgba(0, 0, 0, 0.10);
+
+  /* ── icon (aliases of text) ─────────────────────────────────────────────── */
+  --color-icon-primary:            var(--color-text-primary);
+  --color-icon-secondary:          var(--color-text-secondary);
+  --color-icon-tertiary:           var(--color-text-tertiary);
+  --color-icon-disabled:           var(--color-text-disabled);
+  --color-icon-on-bright-primary:  var(--color-text-on-bright-primary);
+  --color-icon-on-bright-secondary:var(--color-text-on-bright-secondary);
+  --color-icon-on-bright-tertiary: var(--color-text-on-bright-tertiary);
+  --color-icon-on-dark-disabled:   var(--color-text-on-bright-disabled);
+
+  /* ── background ─────────────────────────────────────────────────────────── */
+  --color-background-canvas:   var(--prim-color-neutral-950);  /* #0D0D0D — deepest */
+  --color-background-base:     var(--prim-color-neutral-900);  /* #191919 — topbar/panel */
+  --color-background-elevated: var(--prim-color-neutral-850);  /* #242424 — card/component */
+  --color-background-floating: var(--prim-color-neutral-800);  /* #333333 — hover/tooltip */
+
+  /* ── border ─────────────────────────────────────────────────────────────── */
+  --color-border-subtle:  var(--prim-color-neutral-800);  /* #333333 */
+  --color-border-default: var(--prim-color-neutral-750);  /* #404040 */
+  --color-border-strong:  var(--prim-color-neutral-550);  /* #737373 */
+
+  /* ── brand ──────────────────────────────────────────────────────────────── */
+  --color-brand-primary:       var(--prim-color-lime-400);  /* #D4FF48 */
+  --color-brand-primary-light: var(--prim-color-lime-300);  /* #DFFF78 */
+  --color-brand-primary-soft:  var(--prim-color-lime-700);  /* #6A7F24 */
+
+  /* ── accent ─────────────────────────────────────────────────────────────── */
+  --color-accent-blue-default:   var(--prim-color-blue-400);    /* #639CF8 */
+  --color-accent-blue-soft:      var(--prim-color-blue-900);    /* #0B182D */
+  --color-accent-green-default:  var(--prim-color-green-400);   /* #4FD17F */
+  --color-accent-green-soft:     var(--prim-color-green-800);   /* #0D4C24 */
+  --color-accent-orange-default: var(--prim-color-orange-400);  /* #FFB056 */
+  --color-accent-orange-soft:    var(--prim-color-orange-800);  /* #633C10 */
+  --color-accent-purple-default: var(--prim-color-purple-500);  /* #A855F7 */
+  --color-accent-purple-soft:    var(--prim-color-purple-800);  /* #412160 */
+  --color-accent-error-default:  var(--prim-color-red-400);     /* #F26A6A */
+  --color-accent-error-soft:     var(--prim-color-red-800);     /* #5C1A1A */
+
+  /* ── status ─────────────────────────────────────────────────────────────── */
+  --color-status-success: var(--prim-color-green-600);   /* #1B9D4B */
+  --color-status-warning: var(--prim-color-yellow-600);  /* #BA8E06 */
+  --color-status-error:   var(--prim-color-red-600);     /* #BE3636 */
+
+  /* ── overlay ────────────────────────────────────────────────────────────── */
+  --color-overlay-modal: rgba(0, 0, 0, 0.50);
+  --color-overlay-focus: rgba(212, 255, 72, 0.30);
+
+  /* ── divider ────────────────────────────────────────────────────────────── */
+  --color-divider-strong:  rgba(255, 255, 255, 0.15);
+  --color-divider-default: rgba(255, 255, 255, 0.10);
+  --color-divider-subtle:  rgba(255, 255, 255, 0.05);
+
+  /* ── skeleton ───────────────────────────────────────────────────────────── */
+  --color-skeleton-default: rgba(255, 255, 255, 0.10);
+
+  /* ── interaction ────────────────────────────────────────────────────────── */
+  --color-interaction-hover:            rgba(255, 255, 255, 0.05);
+  --color-interaction-selected-brand:   rgba(212, 255, 72, 0.10);
+  --color-interaction-selected-neutral: rgba(255, 255, 255, 0.10);
+  --color-interaction-disabled:         rgba(0, 0, 0, 0.50);
+  --color-interaction-error:            rgba(255, 107, 107, 0.08);
+  --color-interaction-error-strong:     rgba(255, 107, 107, 0.14);
+
+  /* ── rgb channels (for alpha composition: rgba(var(--rgb-*), α)) ──────── */
+  --rgb-accent-green:  75, 222, 128;   /* tb-providers is-ok  */
+  --rgb-accent-warn:   245, 178, 67;   /* tb-providers is-warn */
+  --rgb-accent-error:  255, 107, 107;  /* *.is-down           */
+  --rgb-accent-teal:   126, 231, 196;  /* tb-model            */
+  --rgb-accent-gold:   255, 200, 120;  /* tb-skill            */
+  --rgb-accent-orange: 255, 140, 66;   /* tb-tool             */
+  --rgb-accent-violet: 196, 163, 255;  /* tb-agent            */
+}
+
+/* =============================================================================
+   BACKWARD-COMPAT ALIASES — 旧 token 名 → semantic 层
+   ============================================================================= */
+:root {
+
+  /* background ── 迁移目标：--color-background-* */
+  --bg-0: var(--color-background-canvas);    /* → --color-background-canvas   */
+  --bg-1: var(--color-background-base);      /* → --color-background-base     */
+  --bg-2: var(--color-background-elevated);  /* → --color-background-elevated */
+  --bg-3: var(--color-background-floating);  /* → --color-background-floating */
+
+  /* text ── 迁移目标：--color-text-* */
+  --text:           var(--color-text-primary);    /* → --color-text-primary   */
+  --text-primary:   var(--color-text-primary);    /* → --color-text-primary   */
+  --text-secondary: var(--color-text-secondary);  /* → --color-text-secondary */
+  --text-muted:     var(--color-text-tertiary);   /* → --color-text-tertiary  */
+  --text-mute:      var(--color-text-tertiary);   /* → --color-text-tertiary  */
+  --text-dim:       var(--color-text-disabled);   /* → --color-text-disabled  */
+  --text-default:   var(--color-text-primary);    /* → --color-text-primary   */
+
+  /* fg ── 迁移目标：--color-text-* */
+  --fg-1: var(--color-text-primary);    /* → --color-text-primary   */
+  --fg-2: var(--color-text-secondary);  /* → --color-text-secondary */
+  --fg-3: var(--color-text-tertiary);   /* → --color-text-tertiary  */
+
+  /* border / divider ── 迁移目标：--color-border-* / --color-divider-* */
+  --border:      var(--color-border-default); /* → --color-border-default */
+  --border-soft: var(--color-divider-subtle); /* → --color-divider-subtle */
+
+  /* brand / primary ── 迁移目标：--color-brand-* / --color-interaction-* */
+  --primary:       var(--color-brand-primary);              /* → --color-brand-primary              */
+  --primary-light: var(--color-brand-primary-light);        /* → --color-brand-primary-light        */
+  --primary-soft:  var(--color-brand-primary-soft);         /* → --color-brand-primary-soft         */
+  --primary-bg:    var(--color-interaction-selected-brand); /* → --color-interaction-selected-brand */
+
+  /* secondary (teal) ── 无对应 semantic token，暂保留 primitive 引用 */
+  --secondary:      var(--prim-color-teal-400);  /* → (待补) --color-accent-teal-default  */
+  --secondary-soft: var(--prim-color-teal-700);  /* → (待补) --color-accent-teal-soft     */
+
+  /* accent ── 迁移目标：--color-accent-*-default / --color-accent-*-soft */
+  --accent-blue:        var(--color-accent-blue-default);    /* → --color-accent-blue-default   */
+  --accent-blue-soft:   var(--color-accent-blue-soft);       /* → --color-accent-blue-soft      */
+  --accent-mint:        var(--prim-color-teal-300);          /* → (待补) --color-accent-teal-light */
+  --accent-green:       var(--color-accent-green-default);   /* → --color-accent-green-default  */
+  --accent-green-soft:  var(--color-accent-green-soft);      /* → --color-accent-green-soft     */
+  --accent-cyan:        var(--prim-color-teal-400);          /* → (待补) --color-accent-teal-default */
+  --accent-cyan-soft:   var(--prim-color-teal-700);          /* → (待补) --color-accent-teal-soft    */
+  --accent-orange:      var(--color-accent-orange-default);  /* → --color-accent-orange-default */
+  --accent-orange-soft: var(--color-accent-orange-soft);     /* → --color-accent-orange-soft    */
+  --accent-purple:      var(--color-accent-purple-default);  /* → --color-accent-purple-default */
+  --accent-purple-soft: var(--color-accent-purple-soft);     /* → --color-accent-purple-soft    */
+  --accent-pink:        var(--prim-color-pink-400);          /* → (待补) --color-accent-pink-default */
+  --accent-error:       var(--color-accent-error-default);   /* → --color-accent-error-default  */
+  --accent-error-soft:  var(--color-accent-error-soft);      /* → --color-accent-error-soft     */
+
+  /* misc ── 迁移目标：--color-interaction-* */
+  --hover:        var(--color-interaction-hover);            /* → --color-interaction-hover */
+  --sel-neutral:  var(--color-interaction-selected-neutral); /* → --color-interaction-selected-neutral */
+  --hover-active: var(--prim-color-green-400);               /* → (待补) --color-interaction-selected-success */
+
+  /* typography ── 迁移目标：--prim-font-* */
+  --font-sans: var(--prim-font-sans);  /* → --prim-font-sans */
+  --font-mono: var(--prim-font-mono);  /* → --prim-font-mono */
+  --font-base: var(--prim-font-sans);  /* → --prim-font-sans */
+  --mono:      var(--prim-font-mono);  /* → --prim-font-mono */
+
+  /* radius ── 迁移目标：--prim-radius-* */
+  --radius-sm:   var(--prim-radius-4);     /* → --prim-radius-4    */
+  --radius-md:   var(--prim-radius-8);     /* → --prim-radius-8    */
+  --radius-lg:   var(--prim-radius-12);    /* → --prim-radius-12   */
+  --radius-xl:   var(--prim-radius-16);    /* → --prim-radius-16   */
+  --radius-2xl:  var(--prim-radius-24);    /* → --prim-radius-24   */
+  --radius-pill: var(--prim-radius-full);  /* → --prim-radius-full */
+
+  /* z-index ── primitive 已是最终值 */
+  --z-base:    var(--prim-z-level-1);  /* → --prim-z-level-1 */
+  --z-overlay: var(--prim-z-level-2);  /* → --prim-z-level-2 */
+  --z-modal:   var(--prim-z-level-3);  /* → --prim-z-level-3 */
+  --z-top:     var(--prim-z-level-4);  /* → --prim-z-level-4 */
+
+  /* ── motion (Linear-style) ──────────────────────────────────────────────── */
+  --motion-duration-instant: 80ms;
+  --motion-duration-fast:    110ms;
+  --motion-duration-base:    150ms;
+  --motion-duration-smooth:  190ms;
+  --motion-duration-panel:   220ms;
+  --motion-duration-switch:  240ms;
+  --motion-duration-switch-item: 200ms;
+  --motion-duration-flash:   600ms;
+  --motion-duration-pulse:   1400ms;
+  --motion-duration-ambient: 18s;
+  --motion-stagger-step:     24ms;
+  --motion-stagger-cap:      240ms;
+
+  --motion-ease-linear:   linear;
+  --motion-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --motion-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
+  --motion-ease-in:       cubic-bezier(0.32, 0, 0.67, 0);
+  --motion-ease-spring:   var(--motion-ease-standard);
+  --motion-ease-flow:     cubic-bezier(0.45, 0, 0.55, 1);
+
+  --motion-press-scale: 0.996;
+  --motion-hover-y: -1px;
+  --motion-hover-scale: 1;
+  --motion-hover-icon-scale: 1.02;
+  --motion-hover-icon-rotate: 0deg;
+  --motion-row-x: 1.5px;
+  --motion-panel-y: 4px;
+  --motion-panel-scale: 1;
+  --motion-list-y: 4px;
+  --motion-list-scale: 1;
+  --motion-page-enter-opacity: 1;
+  --motion-list-enter-opacity: 0.92;
+  --motion-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.14);
+  --motion-shadow-active: 0 1px 6px rgba(0, 0, 0, 0.12);
+
+  /* ── agent role colors ───────────────────────────────────────────── */
+  --color-role-orchestrator: var(--prim-color-purple-300);  /* #CC9BFA */
+  --color-role-pillar:       var(--color-brand-primary);
+  --color-role-design:       var(--prim-color-pink-300);    /* #FF6DB8 */
+  --color-role-narrative:    var(--prim-color-orange-300);  /* #FFC481 */
+  --color-role-art:          var(--prim-color-sky-300);     /* #7dd3fc */
+  --color-role-coding:       var(--accent-orange);          /* #FFB056 */
+
+  /* ── bus kind colors ─────────────────────────────────────────────── */
+  --color-kind-extension:     var(--color-brand-primary);
+  --color-kind-agent:         var(--color-role-orchestrator);
+  --color-kind-cli-provider:  var(--prim-color-sky-400);    /* #6cc4ff */
+  --color-kind-model-binding: var(--accent-mint);           /* #63EACF */
+  --color-kind-skill:         var(--color-role-narrative);
+  --color-kind-tool:          var(--color-role-coding);
+
+  /* ── file family colors ──────────────────────────────────────────────
+     Shared by the interface file tree and chat asset references.  Consumers
+     use `color-mix()` with these opaque family colors for hover/flash states. */
+  --fx-family-code:   var(--prim-color-lime-400);
+  --fx-family-config: var(--prim-color-sky-400);
+  --fx-family-doc:    var(--prim-color-yellow-300);
+  --fx-family-scene:  var(--prim-color-pink-300);
+  --fx-family-pack:   var(--prim-color-purple-300);
+  --fx-family-meta:   var(--prim-color-neutral-350);
+  --fx-family-image:  var(--prim-color-pink-400);
+  --fx-family-audio:  var(--prim-color-purple-400);
+  --fx-family-model:  var(--prim-color-teal-300);
+  --fx-family-data:   var(--prim-color-orange-300);
+
+  /* ── additional status ───────────────────────────────────────────── */
+  --color-status-amber:        #f5b243;
+  --color-status-warning-text: #ffc966;
+
+  /* ── brand hover ─────────────────────────────────────────────────── */
+  --color-brand-primary-hover: #c5f038;
+
+  /* ── accent violet ───────────────────────────────────────────────── */
+  --accent-violet:       #7c5cff;
+  --accent-violet-light: #c084fc;
+
+  /* ── syntax highlighting ─────────────────────────────────────────── */
+  --color-syntax-key:     #79c0ff;
+  --color-syntax-string:  #f0c674;
+  --color-syntax-number:  #b5cea8;
+  --color-syntax-boolean: #d2a8ff;
+
+  /* ── motion (overrides) ──────────────────────────────────────────── */
+  --motion-ease-spring:   cubic-bezier(0.22, 1, 0.36, 1);
+  --motion-ease-out:      cubic-bezier(0.0, 0, 0.2, 1);
+  --motion-ease-standard: ease;
+  --motion-duration-instant: 120ms;
+  --motion-duration-fast:    200ms;
+  --motion-duration-medium:  300ms;
+}

package/dist/package/packages/design/theme.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Theme helpers shared by the host (interface) and every plugin.
+ *
+ * Dual marking: we set BOTH `data-theme="<name>"` (what `tokens.css` selectors
+ * key off) and toggle the `.dark` class (what Tailwind's `dark:` variant reads
+ * via the preset's `darkMode: ['selector', '[data-theme="dark"]']`). Keeping the
+ * two in lockstep means CSS variables and Tailwind variants never disagree.
+ *
+ * ForgeaX is dark-only today, so `readTheme` defaults to `'dark'`. A future
+ * light skin only needs to add `[data-theme="light"]` overrides in token CSS;
+ * no `.tsx` changes required.
+ */
+export type ThemeName = 'dark' | 'light';
+export declare function applyTheme(theme: ThemeName, root?: HTMLElement): void;
+export declare function readTheme(root?: HTMLElement): ThemeName;

package/dist/package/packages/design/theme.js

@@ -0,0 +1,31 @@
+/**
+ * Theme helpers shared by the host (interface) and every plugin.
+ *
+ * Dual marking: we set BOTH `data-theme="<name>"` (what `tokens.css` selectors
+ * key off) and toggle the `.dark` class (what Tailwind's `dark:` variant reads
+ * via the preset's `darkMode: ['selector', '[data-theme="dark"]']`). Keeping the
+ * two in lockstep means CSS variables and Tailwind variants never disagree.
+ *
+ * ForgeaX is dark-only today, so `readTheme` defaults to `'dark'`. A future
+ * light skin only needs to add `[data-theme="light"]` overrides in token CSS;
+ * no `.tsx` changes required.
+ */
+function resolveRoot(root) {
+    if (root)
+        return root;
+    if (typeof document === 'undefined')
+        return null;
+    return document.documentElement;
+}
+export function applyTheme(theme, root) {
+    const el = resolveRoot(root);
+    if (!el)
+        return;
+    el.dataset.theme = theme;
+    el.classList.toggle('dark', theme === 'dark');
+}
+export function readTheme(root) {
+    const el = resolveRoot(root);
+    const value = el?.dataset.theme;
+    return value === 'light' ? 'light' : 'dark';
+}

package/dist/package/packages/design/tokens.css

@@ -0,0 +1,14 @@
+/* =============================================================================
+   @forgeax/design · tokens.css — the single design-token entrypoint.
+
+   Import this once per app/plugin bundle:
+       import '@forgeax/design/tokens.css'
+
+   Order matters: primitives → semantic → fx-bridge.
+   It carries the FULL ForgeaX token system, so a plugin in its own iframe
+   bundle gets every `--prim-* / --color-* / --fx-*` value without depending on
+   the host injecting CSS at runtime (host only broadcasts the theme name).
+   ============================================================================= */
+@import './styles/primitive.css';
+@import './styles/semantic.css';
+@import './styles/fx-bridge.css';