@almadar/ui 4.50.9 → 4.50.11

package/dist/avl/index.cjs

@@ -24947,6 +24947,7 @@ function useDataDnd(args) {
   const unregisterZone = React93__namespace.default.useCallback((zoneId2) => {
     zonesRef.current.delete(zoneId2);
   }, []);
+  const [activeDrag, setActiveDrag] = React93__namespace.default.useState(null);
   const zoneId = React93__namespace.default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
   const meta = React93__namespace.default.useMemo(
@@ -25127,30 +25128,49 @@ function useDataDnd(args) {
       id: droppableId,
       data: sortableData
     });
+    const ctx = React93__namespace.default.useContext(RootCtx);
+    const activeDrag2 = ctx?.activeDrag ?? null;
+    const showForeignPlaceholder = isOver && activeDrag2 != null && activeDrag2.sourceGroup !== ownGroup;
     React93__namespace.default.useEffect(() => {
-      dndLog.debug("dropzone:isOver:change", { droppableId, group: ownGroup, isOver });
-    }, [droppableId, isOver]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
+      dndLog.debug("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, showForeignPlaceholder });
+    }, [droppableId, isOver, showForeignPlaceholder]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       Box,
       {
         ref: setNodeRef,
         "data-dnd-zone": ownGroup,
         "data-dnd-is-over": isOver ? "true" : "false",
         className: isOver ? "ring-2 ring-primary ring-offset-2 rounded-lg transition-all min-h-[3rem]" : "min-h-[3rem] rounded-lg transition-all",
-        children
+        children: [
+          children,
+          showForeignPlaceholder ? /* @__PURE__ */ jsxRuntime.jsx(
+            Box,
+            {
+              "data-dnd-placeholder": true,
+              style: { height: activeDrag2.height },
+              className: "border-2 border-dashed border-primary/60 bg-primary/5 rounded-md my-1 transition-all"
+            }
+          ) : null
+        ]
       }
     );
   };
   const rootContextValue = React93__namespace.default.useMemo(
-    () => ({ registerZone, unregisterZone }),
-    [registerZone, unregisterZone]
+    () => ({ registerZone, unregisterZone, activeDrag }),
+    [registerZone, unregisterZone, activeDrag]
   );
   const handleDragStart = React93__namespace.default.useCallback((event) => {
     const sourceZone = findZoneByItem(event.active.id);
+    const rect = event.active.rect.current.initial;
+    const height = rect?.height && rect.height > 0 ? rect.height : 64;
+    if (sourceZone) {
+      setActiveDrag({ sourceGroup: sourceZone.group, height });
+    }
     dndLog.info("dragStart", {
       activeId: event.active.id,
       activeData: event.active.data?.current,
       sourceGroup: sourceZone?.group,
+      height,
       zoneCount: zonesRef.current.size
     });
   }, [findZoneByItem]);
@@ -25162,11 +25182,16 @@ function useDataDnd(args) {
     });
   }, []);
   const handleDragCancel = React93__namespace.default.useCallback((event) => {
+    setActiveDrag(null);
     dndLog.warn("dragCancel", {
       activeId: event.active.id,
       reason: "dnd-kit cancelled the drag (escape key, pointer interrupted, or external)"
     });
   }, []);
+  const handleDragEndWithCleanup = React93__namespace.default.useCallback((event) => {
+    handleDragEnd(event);
+    setActiveDrag(null);
+  }, [handleDragEnd]);
   const wrapContainer = React93__namespace.default.useCallback(
     (children) => {
       if (!enabled) return children;
@@ -25180,7 +25205,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children
           }
@@ -25195,7 +25220,7 @@ function useDataDnd(args) {
             collisionDetection,
             onDragStart: handleDragStart,
             onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
+            onDragEnd: handleDragEndWithCleanup,
             onDragCancel: handleDragCancel,
             children: inner
           }
@@ -25203,7 +25228,7 @@ function useDataDnd(args) {
       }
       return inner;
     },
-    [enabled, isZone, layout, sensors, collisionDetection, handleDragStart, handleDragOver, handleDragEnd, handleDragCancel, itemIds, isRoot, rootContextValue]
+    [enabled, isZone, layout, sensors, collisionDetection, handleDragStart, handleDragOver, handleDragEndWithCleanup, handleDragCancel, itemIds, isRoot, rootContextValue]
   );
   return {
     enabled,
@@ -59826,7 +59851,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 +59957,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 +59986,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 +60027,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 +60151,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 +60163,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 +60195,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 +60268,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 +60388,8 @@ function FlowCanvasInner({
   onNodeSelect,
   composeLevel,
   behaviorEntries,
-  behaviorWires
+  behaviorWires,
+  userType = "builder"
 }) {
   const NODE_TYPES2 = React93.useMemo(() => ({
     preview: OrbPreviewNode,
@@ -60575,6 +60684,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>;