@almadar/ui 4.50.20 → 4.50.21

package/dist/avl/index.cjs

@@ -60188,7 +60188,7 @@ function findPatternInTree(root, path) {
 }
 var FIELD_TYPE_OPTIONS = core.FieldTypeSchema.options.map((v) => ({ value: v, label: v }));
 var EFFECT_TYPE_OPTIONS = Object.keys(exports.EFFECT_TYPE_TO_CATEGORY).map((v) => ({ value: v, label: v }));
-function OrbInspector({ node, schema, editable = false, userType = "builder", onSchemaChange, onClose }) {
+function OrbInspector({ node, schema, editable = false, userType = "builder", themeManifest, onSchemaChange, onClose }) {
   const { selected: selectedPattern } = React93.useContext(PatternSelectionContext);
   const [activeTab, setActiveTab] = React93.useState("inspector");
   const eventBus = useEventBus();
@@ -60251,8 +60251,18 @@ function OrbInspector({ node, schema, editable = false, userType = "builder", on
   }, [schema, orbitalName, traitName, transitionEvent, isExpanded]);
   const handlePropChange = React93.useCallback((propName, value) => {
     if (!editable) return;
-    eventBus.emit("UI:PROP_CHANGE", { propName, value });
-  }, [editable, eventBus]);
+    eventBus.emit("UI:PROP_CHANGE", {
+      propName,
+      value,
+      selection: {
+        sourceSchemaName: selectedPattern?.nodeData.sourceSchemaName,
+        patternPath: selectedPattern?.patternId,
+        orbitalName,
+        traitName,
+        transitionEvent
+      }
+    });
+  }, [editable, eventBus, selectedPattern, orbitalName, traitName, transitionEvent]);
   const handleAddField = React93.useCallback(() => {
     eventBus.emit("UI:ADD_FIELD", {});
   }, [eventBus]);
@@ -60324,18 +60334,21 @@ function OrbInspector({ node, schema, editable = false, userType = "builder", on
         }
       ) })
     ) : activeTab === "styles" ? (
-      /* ── Styles Tab (read-only in Phase 2) ──
-         Phase 2 ships a token-only viewer with no editing. The proper
-         tokenContract on PatternDefinition lands in Phase 6; until then
-         we fall back to a static map of well-known atoms keyed by
-         pattern type. Patterns missing from the map render a placeholder
-         so the gap is visible rather than silently empty. */
+      /* ── Styles Tab ──
+         Variant + size pills are clickable when `editable` and emit
+         `UI:PROP_CHANGE` with the selection context. The page-level
+         dispatcher routes those events to the project schemaEditor or
+         to the theme manifest based on `selection.sourceSchemaName`. */
       /* @__PURE__ */ jsxRuntime.jsx(
-        StylesTabReadOnly,
+        StylesTab,
         {
           patternType,
           patternDef,
-          patternConfig
+          patternConfig,
+          editable,
+          onPropChange: handlePropChange,
+          themeManifest,
+          isDesignSystem: selectedPattern?.nodeData.sourceSchemaName === "__design_system__"
         }
       )
     ) : (
@@ -60617,7 +60630,7 @@ var PHASE_2_TOKEN_FALLBACK = {
   modal: ["--color-card", "--shadow-lg", "--radius-lg"],
   toast: ["--color-card", "--shadow-lg", "--radius-md"]
 };
-function StylesTabReadOnly({ patternType, patternDef, patternConfig }) {
+function StylesTab({ patternType, patternDef, patternConfig, editable, onPropChange, themeManifest, isDesignSystem }) {
   const { t } = useTranslate();
   if (!patternType) {
     return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground text-[11px]", children: t("Select a pattern to view its style tokens.") }) });
@@ -60651,7 +60664,9 @@ function StylesTabReadOnly({ patternType, patternDef, patternConfig }) {
         return /* @__PURE__ */ jsxRuntime.jsx(
           Box,
           {
-            className: "rounded px-2 py-0.5 text-[11px] font-mono",
+            as: editable ? "button" : "div",
+            onClick: editable ? () => onPropChange("variant", variant) : void 0,
+            className: `rounded px-2 py-0.5 text-[11px] font-mono ${editable ? "cursor-pointer hover:opacity-80 transition-opacity" : ""}`,
             style: {
               backgroundColor: isActive ? "var(--color-primary)" : "var(--color-muted)",
               color: isActive ? "var(--color-primary-foreground)" : "var(--color-muted-foreground)"
@@ -60669,7 +60684,9 @@ function StylesTabReadOnly({ patternType, patternDef, patternConfig }) {
         return /* @__PURE__ */ jsxRuntime.jsx(
           Box,
           {
-            className: "rounded px-2 py-0.5 text-[11px] font-mono",
+            as: editable ? "button" : "div",
+            onClick: editable ? () => onPropChange("size", size) : void 0,
+            className: `rounded px-2 py-0.5 text-[11px] font-mono ${editable ? "cursor-pointer hover:opacity-80 transition-opacity" : ""}`,
             style: {
               backgroundColor: isActive ? "var(--color-primary)" : "var(--color-muted)",
               color: isActive ? "var(--color-primary-foreground)" : "var(--color-muted-foreground)"
@@ -60679,7 +60696,58 @@ function StylesTabReadOnly({ patternType, patternDef, patternConfig }) {
           size
         );
       }) })
-    ] })
+    ] }),
+    isDesignSystem && themeManifest && editable && /* @__PURE__ */ jsxRuntime.jsx(TokenEditorSection, { themeManifest, onPropChange })
+  ] });
+}
+var TOKEN_GROUPS = [
+  { group: "colors", label: "Colors" },
+  { group: "radii", label: "Radii" },
+  { group: "spacing", label: "Spacing" },
+  { group: "shadows", label: "Shadows" }
+];
+function TokenEditorSection({ themeManifest, onPropChange }) {
+  const tokens = themeManifest.tokens ?? {};
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex flex-col gap-3 pt-2 border-t border-border/40", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-[10px] uppercase tracking-wider text-muted-foreground", children: "Project theme tokens" }),
+    TOKEN_GROUPS.map(({ group, label }) => {
+      const entries = Object.entries(tokens[group] ?? {});
+      if (entries.length === 0) return null;
+      return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-[10px] font-mono text-muted-foreground", children: label }),
+        entries.map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsx(
+          TokenRow,
+          {
+            group,
+            tokenKey: key,
+            value: String(value),
+            isColor: group === "colors",
+            onPropChange
+          },
+          key
+        ))
+      ] }, group);
+    })
+  ] });
+}
+function TokenRow({ group, tokenKey, value, isColor, onPropChange }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center gap-2", children: [
+    isColor && /* @__PURE__ */ jsxRuntime.jsx(
+      Box,
+      {
+        className: "w-4 h-4 rounded border border-border/40 shrink-0",
+        style: { backgroundColor: value }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "font-mono text-[11px] text-muted-foreground w-24 shrink-0 truncate", children: tokenKey }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Input,
+      {
+        value,
+        onChange: (e) => onPropChange(`__token__.${group}.${tokenKey}`, e.target.value),
+        className: "flex-1 text-[11px] font-mono"
+      }
+    )
   ] });
 }
 
@@ -60726,7 +60794,8 @@ function FlowCanvasInner({
   composeLevel,
   behaviorEntries,
   behaviorWires,
-  userType = "builder"
+  userType = "builder",
+  themeManifest
 }) {
   const NODE_TYPES2 = React93.useMemo(() => ({
     preview: OrbPreviewNode,
@@ -61023,6 +61092,7 @@ function FlowCanvasInner({
             schema: parsedSchema,
             editable,
             userType,
+            themeManifest,
             onSchemaChange,
             onClose: handleClosePanel
           }

package/dist/avl/index.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default from 'react';
-import { OrbitalSchema, UISlot, Expression, EntityPersistence, EventPayloadField } from '@almadar/core';
+import { OrbitalSchema, UISlot, Expression, EntityPersistence, EventPayloadField, ThemeDefinition } from '@almadar/core';
 import { Node, Edge, NodeProps, EdgeProps } from '@xyflow/react';
 
 /**
@@ -1204,10 +1204,18 @@ interface OrbInspectorProps {
      * gets.
      */
     userType?: 'builder' | 'designer' | 'architect';
+    /**
+     * Project theme tokens (Design System tab only). When provided AND the
+     * selection originates from the synthesized `__design_system__` schema,
+     * the Styles tab renders an editable token-row list; edits emit
+     * `UI:PROP_CHANGE` with `propName: '__token__.<group>.<key>'` and the
+     * page-level dispatcher routes them to `themeManifest.setToken`.
+     */
+    themeManifest?: ThemeDefinition;
     onSchemaChange?: (schema: OrbitalSchema) => void;
     onClose: () => void;
 }
-declare function OrbInspector({ node, schema, editable, userType, onSchemaChange, onClose }: OrbInspectorProps): React__default.ReactElement;
+declare function OrbInspector({ node, schema, editable, userType, themeManifest, onSchemaChange, onClose }: OrbInspectorProps): React__default.ReactElement;
 declare namespace OrbInspector {
     var displayName: string;
 }
@@ -1335,6 +1343,12 @@ interface FlowCanvasProps {
      * everything. Default `'builder'` preserves pre-Phase-2 behavior.
      */
     userType?: 'builder' | 'designer' | 'architect';
+    /**
+     * Project theme tokens (Design System tab only). Forwarded to `OrbInspector`
+     * so the Styles tab can render an editable token list when the selection
+     * originates from the synthesized `__design_system__` schema.
+     */
+    themeManifest?: ThemeDefinition;
 }
 declare const FlowCanvas: React__default.FC<FlowCanvasProps>;
 

package/dist/avl/index.js

@@ -60142,7 +60142,7 @@ function findPatternInTree(root, path) {
 }
 var FIELD_TYPE_OPTIONS = FieldTypeSchema.options.map((v) => ({ value: v, label: v }));
 var EFFECT_TYPE_OPTIONS = Object.keys(EFFECT_TYPE_TO_CATEGORY).map((v) => ({ value: v, label: v }));
-function OrbInspector({ node, schema, editable = false, userType = "builder", onSchemaChange, onClose }) {
+function OrbInspector({ node, schema, editable = false, userType = "builder", themeManifest, onSchemaChange, onClose }) {
   const { selected: selectedPattern } = useContext(PatternSelectionContext);
   const [activeTab, setActiveTab] = useState("inspector");
   const eventBus = useEventBus();
@@ -60205,8 +60205,18 @@ function OrbInspector({ node, schema, editable = false, userType = "builder", on
   }, [schema, orbitalName, traitName, transitionEvent, isExpanded]);
   const handlePropChange = useCallback((propName, value) => {
     if (!editable) return;
-    eventBus.emit("UI:PROP_CHANGE", { propName, value });
-  }, [editable, eventBus]);
+    eventBus.emit("UI:PROP_CHANGE", {
+      propName,
+      value,
+      selection: {
+        sourceSchemaName: selectedPattern?.nodeData.sourceSchemaName,
+        patternPath: selectedPattern?.patternId,
+        orbitalName,
+        traitName,
+        transitionEvent
+      }
+    });
+  }, [editable, eventBus, selectedPattern, orbitalName, traitName, transitionEvent]);
   const handleAddField = useCallback(() => {
     eventBus.emit("UI:ADD_FIELD", {});
   }, [eventBus]);
@@ -60278,18 +60288,21 @@ function OrbInspector({ node, schema, editable = false, userType = "builder", on
         }
       ) })
     ) : activeTab === "styles" ? (
-      /* ── Styles Tab (read-only in Phase 2) ──
-         Phase 2 ships a token-only viewer with no editing. The proper
-         tokenContract on PatternDefinition lands in Phase 6; until then
-         we fall back to a static map of well-known atoms keyed by
-         pattern type. Patterns missing from the map render a placeholder
-         so the gap is visible rather than silently empty. */
+      /* ── Styles Tab ──
+         Variant + size pills are clickable when `editable` and emit
+         `UI:PROP_CHANGE` with the selection context. The page-level
+         dispatcher routes those events to the project schemaEditor or
+         to the theme manifest based on `selection.sourceSchemaName`. */
       /* @__PURE__ */ jsx(
-        StylesTabReadOnly,
+        StylesTab,
         {
           patternType,
           patternDef,
-          patternConfig
+          patternConfig,
+          editable,
+          onPropChange: handlePropChange,
+          themeManifest,
+          isDesignSystem: selectedPattern?.nodeData.sourceSchemaName === "__design_system__"
         }
       )
     ) : (
@@ -60571,7 +60584,7 @@ var PHASE_2_TOKEN_FALLBACK = {
   modal: ["--color-card", "--shadow-lg", "--radius-lg"],
   toast: ["--color-card", "--shadow-lg", "--radius-md"]
 };
-function StylesTabReadOnly({ patternType, patternDef, patternConfig }) {
+function StylesTab({ patternType, patternDef, patternConfig, editable, onPropChange, themeManifest, isDesignSystem }) {
   const { t } = useTranslate();
   if (!patternType) {
     return /* @__PURE__ */ jsx(Box, { className: "p-4", children: /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[11px]", children: t("Select a pattern to view its style tokens.") }) });
@@ -60605,7 +60618,9 @@ function StylesTabReadOnly({ patternType, patternDef, patternConfig }) {
         return /* @__PURE__ */ jsx(
           Box,
           {
-            className: "rounded px-2 py-0.5 text-[11px] font-mono",
+            as: editable ? "button" : "div",
+            onClick: editable ? () => onPropChange("variant", variant) : void 0,
+            className: `rounded px-2 py-0.5 text-[11px] font-mono ${editable ? "cursor-pointer hover:opacity-80 transition-opacity" : ""}`,
             style: {
               backgroundColor: isActive ? "var(--color-primary)" : "var(--color-muted)",
               color: isActive ? "var(--color-primary-foreground)" : "var(--color-muted-foreground)"
@@ -60623,7 +60638,9 @@ function StylesTabReadOnly({ patternType, patternDef, patternConfig }) {
         return /* @__PURE__ */ jsx(
           Box,
           {
-            className: "rounded px-2 py-0.5 text-[11px] font-mono",
+            as: editable ? "button" : "div",
+            onClick: editable ? () => onPropChange("size", size) : void 0,
+            className: `rounded px-2 py-0.5 text-[11px] font-mono ${editable ? "cursor-pointer hover:opacity-80 transition-opacity" : ""}`,
             style: {
               backgroundColor: isActive ? "var(--color-primary)" : "var(--color-muted)",
               color: isActive ? "var(--color-primary-foreground)" : "var(--color-muted-foreground)"
@@ -60633,7 +60650,58 @@ function StylesTabReadOnly({ patternType, patternDef, patternConfig }) {
           size
         );
       }) })
-    ] })
+    ] }),
+    isDesignSystem && themeManifest && editable && /* @__PURE__ */ jsx(TokenEditorSection, { themeManifest, onPropChange })
+  ] });
+}
+var TOKEN_GROUPS = [
+  { group: "colors", label: "Colors" },
+  { group: "radii", label: "Radii" },
+  { group: "spacing", label: "Spacing" },
+  { group: "shadows", label: "Shadows" }
+];
+function TokenEditorSection({ themeManifest, onPropChange }) {
+  const tokens = themeManifest.tokens ?? {};
+  return /* @__PURE__ */ jsxs(Box, { className: "flex flex-col gap-3 pt-2 border-t border-border/40", children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-[10px] uppercase tracking-wider text-muted-foreground", children: "Project theme tokens" }),
+    TOKEN_GROUPS.map(({ group, label }) => {
+      const entries = Object.entries(tokens[group] ?? {});
+      if (entries.length === 0) return null;
+      return /* @__PURE__ */ jsxs(Box, { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-[10px] font-mono text-muted-foreground", children: label }),
+        entries.map(([key, value]) => /* @__PURE__ */ jsx(
+          TokenRow,
+          {
+            group,
+            tokenKey: key,
+            value: String(value),
+            isColor: group === "colors",
+            onPropChange
+          },
+          key
+        ))
+      ] }, group);
+    })
+  ] });
+}
+function TokenRow({ group, tokenKey, value, isColor, onPropChange }) {
+  return /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
+    isColor && /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: "w-4 h-4 rounded border border-border/40 shrink-0",
+        style: { backgroundColor: value }
+      }
+    ),
+    /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-mono text-[11px] text-muted-foreground w-24 shrink-0 truncate", children: tokenKey }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        value,
+        onChange: (e) => onPropChange(`__token__.${group}.${tokenKey}`, e.target.value),
+        className: "flex-1 text-[11px] font-mono"
+      }
+    )
   ] });
 }
 
@@ -60680,7 +60748,8 @@ function FlowCanvasInner({
   composeLevel,
   behaviorEntries,
   behaviorWires,
-  userType = "builder"
+  userType = "builder",
+  themeManifest
 }) {
   const NODE_TYPES2 = useMemo(() => ({
     preview: OrbPreviewNode,
@@ -60977,6 +61046,7 @@ function FlowCanvasInner({
             schema: parsedSchema,
             editable,
             userType,
+            themeManifest,
             onSchemaChange,
             onClose: handleClosePanel
           }

package/dist/components/organisms/avl/FlowCanvas.d.ts

@@ -12,7 +12,7 @@
  * Escape to go back. AVL overlays on hover (future).
  */
 import React from 'react';
-import type { OrbitalSchema } from '@almadar/core';
+import type { OrbitalSchema, ThemeDefinition } from '@almadar/core';
 import type { ViewLevel, PreviewNodeData } from '../../molecules/avl/avl-preview-types';
 import type { ComposeViewLevel, BehaviorCanvasEntry, BehaviorWireEdgeData } from '../../molecules/avl/avl-behavior-compose-types';
 export interface FlowCanvasProps {
@@ -124,5 +124,11 @@ export interface FlowCanvasProps {
      * everything. Default `'builder'` preserves pre-Phase-2 behavior.
      */
     userType?: 'builder' | 'designer' | 'architect';
+    /**
+     * Project theme tokens (Design System tab only). Forwarded to `OrbInspector`
+     * so the Styles tab can render an editable token list when the selection
+     * originates from the synthesized `__design_system__` schema.
+     */
+    themeManifest?: ThemeDefinition;
 }
 export declare const FlowCanvas: React.FC<FlowCanvasProps>;

package/dist/components/organisms/avl/OrbInspector.d.ts

@@ -14,7 +14,7 @@
  * When `editable` is true, inspector fields become inputs.
  */
 import React from 'react';
-import type { OrbitalSchema } from '@almadar/core';
+import type { OrbitalSchema, ThemeDefinition } from '@almadar/core';
 import type { PreviewNodeData } from '../../molecules/avl/avl-preview-types';
 export interface OrbInspectorProps {
     node: PreviewNodeData;
@@ -28,10 +28,18 @@ export interface OrbInspectorProps {
      * gets.
      */
     userType?: 'builder' | 'designer' | 'architect';
+    /**
+     * Project theme tokens (Design System tab only). When provided AND the
+     * selection originates from the synthesized `__design_system__` schema,
+     * the Styles tab renders an editable token-row list; edits emit
+     * `UI:PROP_CHANGE` with `propName: '__token__.<group>.<key>'` and the
+     * page-level dispatcher routes them to `themeManifest.setToken`.
+     */
+    themeManifest?: ThemeDefinition;
     onSchemaChange?: (schema: OrbitalSchema) => void;
     onClose: () => void;
 }
-export declare function OrbInspector({ node, schema, editable, userType, onSchemaChange, onClose }: OrbInspectorProps): React.ReactElement;
+export declare function OrbInspector({ node, schema, editable, userType, themeManifest, onSchemaChange, onClose }: OrbInspectorProps): React.ReactElement;
 export declare namespace OrbInspector {
     var displayName: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "4.50.20",
+  "version": "4.50.21",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [