@almadar/ui 4.50.9 → 4.50.10

package/dist/avl/index.cjs

@@ -59826,7 +59826,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, onSchemaChange, onClose }) {
+function OrbInspector({ node, schema, editable = false, userType = "builder", onSchemaChange, onClose }) {
   const { selected: selectedPattern } = React93.useContext(PatternSelectionContext);
   const [activeTab, setActiveTab] = React93.useState("inspector");
   const eventBus = useEventBus();
@@ -59932,27 +59932,18 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex px-4 gap-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: () => setActiveTab("inspector"),
-            className: `pb-2 text-[12px] font-medium border-b-2 cursor-pointer bg-transparent border-x-0 border-t-0 px-0 ${activeTab === "inspector" ? "border-[var(--color-primary)] text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"}`,
-            children: "Inspector"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: () => setActiveTab("code"),
-            className: `pb-2 text-[12px] font-medium border-b-2 cursor-pointer bg-transparent border-x-0 border-t-0 px-0 ${activeTab === "code" ? "border-[var(--color-primary)] text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"}`,
-            children: "Code"
-          }
-        )
-      ] })
+      /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex px-4 gap-4", children: ["inspector", "styles", "code"].filter((tab) => tab !== "code" || userType === "architect").map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => setActiveTab(tab),
+          className: `pb-2 text-[12px] font-medium border-b-2 cursor-pointer bg-transparent border-x-0 border-t-0 px-0 capitalize ${activeTab === tab ? "border-[var(--color-primary)] text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"}`,
+          children: tab
+        },
+        tab
+      )) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 overflow-y-auto", children: activeTab === "code" ? (
-      /* ── Code Tab ── */
+    /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 overflow-y-auto", children: activeTab === "code" && userType === "architect" ? (
+      /* ── Code Tab (architect only) ── */
       /* GAP-51: when editable, the CodeBlock molecule renders the existing
          Textarea atom internally and forwards keystrokes via UI:CODE_CHANGE
          on the EventBus. The consumer (builder workspace) listens, debounces,
@@ -59970,6 +59961,21 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
           onChange: editable ? (code) => eventBus.emit("UI:CODE_CHANGE", { code }) : void 0
         }
       ) })
+    ) : 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. */
+      /* @__PURE__ */ jsxRuntime.jsx(
+        StylesTabReadOnly,
+        {
+          patternType,
+          patternDef,
+          patternConfig
+        }
+      )
     ) : (
       /* ── Inspector Tab ── */
       /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -59996,7 +60002,7 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
             ] }, propName);
           }) })
         ] }),
-        (selectedPattern && isEntityPattern || !selectedPattern && !isExpanded) && entity && /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "px-4 py-3 border-b border-border/40", children: [
+        userType === "architect" && (selectedPattern && isEntityPattern || !selectedPattern && !isExpanded) && entity && /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "px-4 py-3 border-b border-border/40", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: t("Entity") }),
           /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center gap-2 mb-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 14, height: 14, children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 7, cy: 7, r: 5, fill: "var(--color-primary)" }) }),
@@ -60120,7 +60126,7 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
           /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 16, height: 16, children: /* @__PURE__ */ jsxRuntime.jsx(AvlEvent, { x: 8, y: 8, size: 12 }) }),
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "font-semibold text-[12px]", children: transitionEvent })
         ] }) }),
-        (transition?.guard ?? guard ?? editable) && isExpanded && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "px-4 py-2 border-b border-border/40", children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "items-center", children: [
+        userType === "architect" && (transition?.guard ?? guard ?? editable) && isExpanded && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "px-4 py-2 border-b border-border/40", children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "items-center", children: [
           /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 16, height: 16, children: /* @__PURE__ */ jsxRuntime.jsx(AvlGuard, { x: 8, y: 8, size: 12 }) }),
           editable ? /* @__PURE__ */ jsxRuntime.jsx(
             Input,
@@ -60132,7 +60138,7 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "font-mono text-[11px] text-muted-foreground", children: formatExpression(transition?.guard ?? guard) })
         ] }) }),
-        (effectTypes.length > 0 || editable) && isExpanded && /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "px-4 py-3 border-b border-border/40", children: [
+        userType === "architect" && (effectTypes.length > 0 || editable) && isExpanded && /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "px-4 py-3 border-b border-border/40", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: [
             t("Effects"),
             " (",
@@ -60164,7 +60170,7 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
           }) }),
           editable && /* @__PURE__ */ jsxRuntime.jsx(AddEffectButton, { onAdd: handleAddEffect })
         ] }),
-        patterns$1.length > 0 && !selectedPattern && /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "px-4 py-3", children: [
+        userType === "architect" && patterns$1.length > 0 && !selectedPattern && /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "px-4 py-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: "render-ui" }),
           /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "bg-muted/20 rounded-md p-3 font-mono text-[11px] leading-relaxed overflow-x-auto", children: patterns$1.map((entry, i) => /* @__PURE__ */ jsxRuntime.jsxs(Box, { children: [
             /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "text-muted-foreground text-[10px]", children: [
@@ -60237,6 +60243,83 @@ function OrbPatternTree({ config, depth }) {
   ] });
 }
 OrbInspector.displayName = "OrbInspector";
+var PHASE_2_TOKEN_FALLBACK = {
+  button: ["--color-primary", "--color-primary-foreground", "--radius-md", "--shadow-sm"],
+  badge: ["--color-primary", "--radius-full"],
+  card: ["--color-card", "--color-border", "--radius-lg", "--shadow-main"],
+  input: ["--color-input", "--color-border", "--radius-md"],
+  typography: ["--color-foreground", "--color-muted-foreground"],
+  divider: ["--color-border"],
+  avatar: ["--radius-full", "--color-muted"],
+  alert: ["--color-warning", "--color-success", "--color-danger", "--radius-md"],
+  modal: ["--color-card", "--shadow-lg", "--radius-lg"],
+  toast: ["--color-card", "--shadow-lg", "--radius-md"]
+};
+function StylesTabReadOnly({ patternType, patternDef, patternConfig }) {
+  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.") }) });
+  }
+  const tier = patternDef?.category ?? "Pattern";
+  const tokens = PHASE_2_TOKEN_FALLBACK[patternType] ?? [];
+  const variantEnum = patternDef?.propsSchema?.variant?.enumValues;
+  const sizeEnum = patternDef?.propsSchema?.size?.enumValues;
+  const currentVariant = patternConfig && typeof patternConfig.variant === "string" ? patternConfig.variant : void 0;
+  const currentSize = patternConfig && typeof patternConfig.size === "string" ? patternConfig.size : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "px-4 py-3 flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "font-semibold text-[12px]", children: patternType }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Box,
+        {
+          className: "rounded px-1.5 py-0.5 text-[9px] font-mono uppercase tracking-wider",
+          style: { backgroundColor: "var(--color-muted)", color: "var(--color-muted-foreground)" },
+          children: tier
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Box, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: t("Tokens") }),
+      tokens.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground text-[11px] italic", children: t("No token contract declared for this pattern.") }) : /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex flex-col gap-1", children: tokens.map((token) => /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "font-mono text-[11px]", children: token }) }, token)) })
+    ] }),
+    variantEnum && variantEnum.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Box, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: t("Variant") }),
+      /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex flex-wrap gap-1", children: variantEnum.map((variant) => {
+        const isActive = variant === currentVariant || !currentVariant && variant === "default";
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Box,
+          {
+            className: "rounded px-2 py-0.5 text-[11px] font-mono",
+            style: {
+              backgroundColor: isActive ? "var(--color-primary)" : "var(--color-muted)",
+              color: isActive ? "var(--color-primary-foreground)" : "var(--color-muted-foreground)"
+            },
+            children: variant
+          },
+          variant
+        );
+      }) })
+    ] }),
+    sizeEnum && sizeEnum.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Box, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: t("Size") }),
+      /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex flex-wrap gap-1", children: sizeEnum.map((size) => {
+        const isActive = size === currentSize || !currentSize && size === "md";
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Box,
+          {
+            className: "rounded px-2 py-0.5 text-[11px] font-mono",
+            style: {
+              backgroundColor: isActive ? "var(--color-primary)" : "var(--color-muted)",
+              color: isActive ? "var(--color-primary-foreground)" : "var(--color-muted-foreground)"
+            },
+            children: size
+          },
+          size
+        );
+      }) })
+    ] })
+  ] });
+}
 
 // components/organisms/avl/FlowCanvas.tsx
 init_Box();
@@ -60280,7 +60363,8 @@ function FlowCanvasInner({
   onNodeSelect,
   composeLevel,
   behaviorEntries,
-  behaviorWires
+  behaviorWires,
+  userType = "builder"
 }) {
   const NODE_TYPES2 = React93.useMemo(() => ({
     preview: OrbPreviewNode,
@@ -60575,6 +60659,7 @@ function FlowCanvasInner({
             node: selectedNode,
             schema: parsedSchema,
             editable,
+            userType,
             onSchemaChange,
             onClose: handleClosePanel
           }

package/dist/avl/index.d.cts

@@ -1196,10 +1196,18 @@ interface OrbInspectorProps {
     node: PreviewNodeData;
     schema: OrbitalSchema;
     editable?: boolean;
+    /**
+     * Studio persona viewing the inspector. Controls tab visibility (Code is
+     * architect-only, Styles is universal) and section visibility (Entity,
+     * raw guard, raw effects are architect-only). Default `'builder'` matches
+     * pre-Phase-2 behavior except for the new Styles tab, which every persona
+     * gets.
+     */
+    userType?: 'builder' | 'designer' | 'architect';
     onSchemaChange?: (schema: OrbitalSchema) => void;
     onClose: () => void;
 }
-declare function OrbInspector({ node, schema, editable, onSchemaChange, onClose }: OrbInspectorProps): React__default.ReactElement;
+declare function OrbInspector({ node, schema, editable, userType, onSchemaChange, onClose }: OrbInspectorProps): React__default.ReactElement;
 declare namespace OrbInspector {
     var displayName: string;
 }
@@ -1320,6 +1328,13 @@ interface FlowCanvasProps {
     initialTrait?: string;
     /** @deprecated Not used in V3. */
     stateCoverage?: Record<string, string>;
+    /**
+     * Studio persona viewing the canvas. Drives `OrbInspector` tab/section
+     * visibility — designers and builders hide the raw `code` tab and the
+     * architect-only Entity / raw-guard / raw-effects sections; architects see
+     * everything. Default `'builder'` preserves pre-Phase-2 behavior.
+     */
+    userType?: 'builder' | 'designer' | 'architect';
 }
 declare const FlowCanvas: React__default.FC<FlowCanvasProps>;
 

package/dist/avl/index.js

@@ -59780,7 +59780,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, onSchemaChange, onClose }) {
+function OrbInspector({ node, schema, editable = false, userType = "builder", onSchemaChange, onClose }) {
   const { selected: selectedPattern } = useContext(PatternSelectionContext);
   const [activeTab, setActiveTab] = useState("inspector");
   const eventBus = useEventBus();
@@ -59886,27 +59886,18 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs(Box, { className: "flex px-4 gap-4", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => setActiveTab("inspector"),
-            className: `pb-2 text-[12px] font-medium border-b-2 cursor-pointer bg-transparent border-x-0 border-t-0 px-0 ${activeTab === "inspector" ? "border-[var(--color-primary)] text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"}`,
-            children: "Inspector"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => setActiveTab("code"),
-            className: `pb-2 text-[12px] font-medium border-b-2 cursor-pointer bg-transparent border-x-0 border-t-0 px-0 ${activeTab === "code" ? "border-[var(--color-primary)] text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"}`,
-            children: "Code"
-          }
-        )
-      ] })
+      /* @__PURE__ */ jsx(Box, { className: "flex px-4 gap-4", children: ["inspector", "styles", "code"].filter((tab) => tab !== "code" || userType === "architect").map((tab) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setActiveTab(tab),
+          className: `pb-2 text-[12px] font-medium border-b-2 cursor-pointer bg-transparent border-x-0 border-t-0 px-0 capitalize ${activeTab === tab ? "border-[var(--color-primary)] text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"}`,
+          children: tab
+        },
+        tab
+      )) })
     ] }),
-    /* @__PURE__ */ jsx(Box, { className: "flex-1 overflow-y-auto", children: activeTab === "code" ? (
-      /* ── Code Tab ── */
+    /* @__PURE__ */ jsx(Box, { className: "flex-1 overflow-y-auto", children: activeTab === "code" && userType === "architect" ? (
+      /* ── Code Tab (architect only) ── */
       /* GAP-51: when editable, the CodeBlock molecule renders the existing
          Textarea atom internally and forwards keystrokes via UI:CODE_CHANGE
          on the EventBus. The consumer (builder workspace) listens, debounces,
@@ -59924,6 +59915,21 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
           onChange: editable ? (code) => eventBus.emit("UI:CODE_CHANGE", { code }) : void 0
         }
       ) })
+    ) : 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. */
+      /* @__PURE__ */ jsx(
+        StylesTabReadOnly,
+        {
+          patternType,
+          patternDef,
+          patternConfig
+        }
+      )
     ) : (
       /* ── Inspector Tab ── */
       /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -59950,7 +59956,7 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
             ] }, propName);
           }) })
         ] }),
-        (selectedPattern && isEntityPattern || !selectedPattern && !isExpanded) && entity && /* @__PURE__ */ jsxs(Box, { className: "px-4 py-3 border-b border-border/40", children: [
+        userType === "architect" && (selectedPattern && isEntityPattern || !selectedPattern && !isExpanded) && entity && /* @__PURE__ */ jsxs(Box, { className: "px-4 py-3 border-b border-border/40", children: [
           /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: t("Entity") }),
           /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2 mb-2", children: [
             /* @__PURE__ */ jsx("svg", { width: 14, height: 14, children: /* @__PURE__ */ jsx("circle", { cx: 7, cy: 7, r: 5, fill: "var(--color-primary)" }) }),
@@ -60074,7 +60080,7 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
           /* @__PURE__ */ jsx("svg", { width: 16, height: 16, children: /* @__PURE__ */ jsx(AvlEvent, { x: 8, y: 8, size: 12 }) }),
           /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-semibold text-[12px]", children: transitionEvent })
         ] }) }),
-        (transition?.guard ?? guard ?? editable) && isExpanded && /* @__PURE__ */ jsx(Box, { className: "px-4 py-2 border-b border-border/40", children: /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "items-center", children: [
+        userType === "architect" && (transition?.guard ?? guard ?? editable) && isExpanded && /* @__PURE__ */ jsx(Box, { className: "px-4 py-2 border-b border-border/40", children: /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "items-center", children: [
           /* @__PURE__ */ jsx("svg", { width: 16, height: 16, children: /* @__PURE__ */ jsx(AvlGuard, { x: 8, y: 8, size: 12 }) }),
           editable ? /* @__PURE__ */ jsx(
             Input,
@@ -60086,7 +60092,7 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
             }
           ) : /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-mono text-[11px] text-muted-foreground", children: formatExpression(transition?.guard ?? guard) })
         ] }) }),
-        (effectTypes.length > 0 || editable) && isExpanded && /* @__PURE__ */ jsxs(Box, { className: "px-4 py-3 border-b border-border/40", children: [
+        userType === "architect" && (effectTypes.length > 0 || editable) && isExpanded && /* @__PURE__ */ jsxs(Box, { className: "px-4 py-3 border-b border-border/40", children: [
           /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: [
             t("Effects"),
             " (",
@@ -60118,7 +60124,7 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
           }) }),
           editable && /* @__PURE__ */ jsx(AddEffectButton, { onAdd: handleAddEffect })
         ] }),
-        patterns.length > 0 && !selectedPattern && /* @__PURE__ */ jsxs(Box, { className: "px-4 py-3", children: [
+        userType === "architect" && patterns.length > 0 && !selectedPattern && /* @__PURE__ */ jsxs(Box, { className: "px-4 py-3", children: [
           /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: "render-ui" }),
           /* @__PURE__ */ jsx(Box, { className: "bg-muted/20 rounded-md p-3 font-mono text-[11px] leading-relaxed overflow-x-auto", children: patterns.map((entry, i) => /* @__PURE__ */ jsxs(Box, { children: [
             /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground text-[10px]", children: [
@@ -60191,6 +60197,83 @@ function OrbPatternTree({ config, depth }) {
   ] });
 }
 OrbInspector.displayName = "OrbInspector";
+var PHASE_2_TOKEN_FALLBACK = {
+  button: ["--color-primary", "--color-primary-foreground", "--radius-md", "--shadow-sm"],
+  badge: ["--color-primary", "--radius-full"],
+  card: ["--color-card", "--color-border", "--radius-lg", "--shadow-main"],
+  input: ["--color-input", "--color-border", "--radius-md"],
+  typography: ["--color-foreground", "--color-muted-foreground"],
+  divider: ["--color-border"],
+  avatar: ["--radius-full", "--color-muted"],
+  alert: ["--color-warning", "--color-success", "--color-danger", "--radius-md"],
+  modal: ["--color-card", "--shadow-lg", "--radius-lg"],
+  toast: ["--color-card", "--shadow-lg", "--radius-md"]
+};
+function StylesTabReadOnly({ patternType, patternDef, patternConfig }) {
+  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.") }) });
+  }
+  const tier = patternDef?.category ?? "Pattern";
+  const tokens = PHASE_2_TOKEN_FALLBACK[patternType] ?? [];
+  const variantEnum = patternDef?.propsSchema?.variant?.enumValues;
+  const sizeEnum = patternDef?.propsSchema?.size?.enumValues;
+  const currentVariant = patternConfig && typeof patternConfig.variant === "string" ? patternConfig.variant : void 0;
+  const currentSize = patternConfig && typeof patternConfig.size === "string" ? patternConfig.size : void 0;
+  return /* @__PURE__ */ jsxs(Box, { className: "px-4 py-3 flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-semibold text-[12px]", children: patternType }),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          className: "rounded px-1.5 py-0.5 text-[9px] font-mono uppercase tracking-wider",
+          style: { backgroundColor: "var(--color-muted)", color: "var(--color-muted-foreground)" },
+          children: tier
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: t("Tokens") }),
+      tokens.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[11px] italic", children: t("No token contract declared for this pattern.") }) : /* @__PURE__ */ jsx(Box, { className: "flex flex-col gap-1", children: tokens.map((token) => /* @__PURE__ */ jsx(Box, { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-mono text-[11px]", children: token }) }, token)) })
+    ] }),
+    variantEnum && variantEnum.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: t("Variant") }),
+      /* @__PURE__ */ jsx(Box, { className: "flex flex-wrap gap-1", children: variantEnum.map((variant) => {
+        const isActive = variant === currentVariant || !currentVariant && variant === "default";
+        return /* @__PURE__ */ jsx(
+          Box,
+          {
+            className: "rounded px-2 py-0.5 text-[11px] font-mono",
+            style: {
+              backgroundColor: isActive ? "var(--color-primary)" : "var(--color-muted)",
+              color: isActive ? "var(--color-primary-foreground)" : "var(--color-muted-foreground)"
+            },
+            children: variant
+          },
+          variant
+        );
+      }) })
+    ] }),
+    sizeEnum && sizeEnum.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: t("Size") }),
+      /* @__PURE__ */ jsx(Box, { className: "flex flex-wrap gap-1", children: sizeEnum.map((size) => {
+        const isActive = size === currentSize || !currentSize && size === "md";
+        return /* @__PURE__ */ jsx(
+          Box,
+          {
+            className: "rounded px-2 py-0.5 text-[11px] font-mono",
+            style: {
+              backgroundColor: isActive ? "var(--color-primary)" : "var(--color-muted)",
+              color: isActive ? "var(--color-primary-foreground)" : "var(--color-muted-foreground)"
+            },
+            children: size
+          },
+          size
+        );
+      }) })
+    ] })
+  ] });
+}
 
 // components/organisms/avl/FlowCanvas.tsx
 init_Box();
@@ -60234,7 +60317,8 @@ function FlowCanvasInner({
   onNodeSelect,
   composeLevel,
   behaviorEntries,
-  behaviorWires
+  behaviorWires,
+  userType = "builder"
 }) {
   const NODE_TYPES2 = useMemo(() => ({
     preview: OrbPreviewNode,
@@ -60529,6 +60613,7 @@ function FlowCanvasInner({
             node: selectedNode,
             schema: parsedSchema,
             editable,
+            userType,
             onSchemaChange,
             onClose: handleClosePanel
           }

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

@@ -117,5 +117,12 @@ export interface FlowCanvasProps {
     initialTrait?: string;
     /** @deprecated Not used in V3. */
     stateCoverage?: Record<string, string>;
+    /**
+     * Studio persona viewing the canvas. Drives `OrbInspector` tab/section
+     * visibility — designers and builders hide the raw `code` tab and the
+     * architect-only Entity / raw-guard / raw-effects sections; architects see
+     * everything. Default `'builder'` preserves pre-Phase-2 behavior.
+     */
+    userType?: 'builder' | 'designer' | 'architect';
 }
 export declare const FlowCanvas: React.FC<FlowCanvasProps>;

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

@@ -20,10 +20,18 @@ export interface OrbInspectorProps {
     node: PreviewNodeData;
     schema: OrbitalSchema;
     editable?: boolean;
+    /**
+     * Studio persona viewing the inspector. Controls tab visibility (Code is
+     * architect-only, Styles is universal) and section visibility (Entity,
+     * raw guard, raw effects are architect-only). Default `'builder'` matches
+     * pre-Phase-2 behavior except for the new Styles tab, which every persona
+     * gets.
+     */
+    userType?: 'builder' | 'designer' | 'architect';
     onSchemaChange?: (schema: OrbitalSchema) => void;
     onClose: () => void;
 }
-export declare function OrbInspector({ node, schema, editable, onSchemaChange, onClose }: OrbInspectorProps): React.ReactElement;
+export declare function OrbInspector({ node, schema, editable, userType, 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.9",
+  "version": "4.50.10",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [