@almadar/ui 4.45.0 → 4.47.0

package/dist/avl/index.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { OrbitControls as OrbitControls$1, Grid as Grid$1, Stars, Sparkles, Html, RoundedBox } from '@react-three/drei';
 import * as React147 from 'react';
-import React147__default, { createContext, useState, useEffect, useMemo, useContext, useRef, useCallback, Suspense, useLayoutEffect, useReducer, lazy, useId, forwardRef, useImperativeHandle, Component } from 'react';
+import React147__default, { createContext, useState, useEffect, useMemo, useContext, useRef, useCallback, Suspense, useLayoutEffect, Profiler, useReducer, lazy, useId, forwardRef, useImperativeHandle, Component } from 'react';
 import { createLogger, isLogLevelEnabled } from '@almadar/logger';
 import ELK from 'elkjs/lib/elk.bundled.js';
 import { MarkerType, Handle, Position, getBezierPath, EdgeLabelRenderer, BaseEdge, ReactFlowProvider, useNodesState, useEdgesState, useReactFlow, ReactFlow, Controls, Background, BackgroundVariant } from '@xyflow/react';
@@ -9935,8 +9935,8 @@ function Seigaiha({ size, color, strokeWidth }) {
     [s, s * 0.1]
   ];
   for (const [cx, cy] of centers) {
-    for (let ring = 1; ring <= 3; ring++) {
-      const cr = r2 * (ring / 3);
+    for (let ring2 = 1; ring2 <= 3; ring2++) {
+      const cr = r2 * (ring2 / 3);
       paths.push(
         `M ${f(cx - cr)},${f(cy)} A ${f(cr)} ${f(cr)} 0 0 1 ${f(cx + cr)},${f(cy)}`
       );
@@ -10033,8 +10033,8 @@ function Arch({ size, color, strokeWidth }) {
   const h = size * 1.5;
   const cx = w / 2;
   const paths = [];
-  for (let ring = 0; ring < 4; ring++) {
-    const scale = 1 - ring * 0.2;
+  for (let ring2 = 0; ring2 < 4; ring2++) {
+    const scale = 1 - ring2 * 0.2;
     const archW = w * 0.48 * scale;
     const archH = h * 0.7 * scale;
     const baseY = h * 0.85;
@@ -10049,7 +10049,7 @@ function Arch({ size, color, strokeWidth }) {
     paths.push(
       `M ${f(lx)},${f(baseY)} A ${f(radius)} ${f(radius)} 0 0 1 ${f(cx)},${f(tipY)} A ${f(radius)} ${f(radius)} 0 0 1 ${f(rx)},${f(baseY)}`
     );
-    if (ring === 0) {
+    if (ring2 === 0) {
       paths.push(`M ${f(lx)},${f(baseY)} L ${f(rx)},${f(baseY)}`);
     }
   }
@@ -10739,12 +10739,15 @@ function ControlButton({
         sizeMap3[size] ?? sizeMap3.md,
         shapeMap[shape] ?? shapeMap.circle,
         variantMap[variant] ?? variantMap.secondary,
-        actualPressed && "scale-95 brightness-110 border-white",
+        actualPressed && "scale-95 brightness-110 border-foreground",
         disabled && "opacity-50 cursor-not-allowed",
         className
       ),
       children: [
-        icon && /* @__PURE__ */ jsx("span", { className: "text-2xl", children: icon }),
+        icon && /* @__PURE__ */ jsx("span", { className: "text-2xl", children: typeof icon === "string" ? (() => {
+          const I = resolveIcon(icon);
+          return I ? /* @__PURE__ */ jsx(I, { className: "w-6 h-6" }) : null;
+        })() : icon }),
         label && !icon && /* @__PURE__ */ jsx("span", { children: label })
       ]
     }
@@ -10756,6 +10759,7 @@ var init_ControlButton = __esm({
     "use client";
     init_cn();
     init_useEventBus();
+    init_Icon();
     sizeMap3 = {
       sm: "w-10 h-10 text-sm",
       md: "w-14 h-14 text-base",
@@ -10768,9 +10772,9 @@ var init_ControlButton = __esm({
       square: "rounded-md"
     };
     variantMap = {
-      primary: "bg-blue-600 text-[var(--color-foreground)] border-blue-400 hover:bg-blue-500",
-      secondary: "bg-[var(--color-surface,#374151)] text-[var(--color-foreground)] border-gray-500 hover:bg-gray-600",
-      ghost: "bg-transparent text-[var(--color-foreground)] border-white/30 hover:bg-white/10"
+      primary: "bg-primary text-primary-foreground border-primary hover:bg-primary-hover",
+      secondary: "bg-secondary text-secondary-foreground border-border hover:bg-secondary-hover",
+      ghost: "bg-transparent text-foreground border-border hover:bg-muted"
     };
     ControlButton.displayName = "ControlButton";
   }
@@ -11498,8 +11502,8 @@ function ChoiceButton({
       className: cn(
         "w-full text-left px-4 py-2.5 rounded-md border transition-all duration-150",
         "flex items-center gap-2",
-        selected ? "bg-yellow-500/20 border-yellow-400 text-yellow-300" : "bg-white/5 border-white/10 text-[var(--color-foreground)] hover:bg-white/10 hover:border-white/30",
-        disabled && "opacity-40 cursor-not-allowed hover:bg-white/5 hover:border-white/10",
+        selected ? "bg-accent/15 border-accent text-foreground" : "bg-muted/40 border-border text-foreground hover:bg-muted hover:border-border",
+        disabled && "opacity-40 cursor-not-allowed hover:bg-muted/40 hover:border-border",
         className
       ),
       children: [
@@ -11508,7 +11512,7 @@ function ChoiceButton({
           {
             className: cn(
               "flex-shrink-0 font-mono font-bold text-sm",
-              selected ? "text-yellow-400" : "text-gray-500"
+              selected ? "text-accent" : "text-muted-foreground"
             ),
             children: [
               index,
@@ -11549,7 +11553,7 @@ function ActionButton({
       disabled: isDisabled,
       onClick,
       className: cn(
-        "relative inline-flex items-center gap-1.5 rounded-md border font-medium text-[var(--color-foreground)] overflow-hidden transition-colors duration-150",
+        "relative inline-flex items-center gap-1.5 rounded-md border font-medium overflow-hidden transition-colors duration-150",
         sizes.button,
         variantStyles8[variant],
         isDisabled && "opacity-60 cursor-not-allowed",
@@ -11559,7 +11563,7 @@ function ActionButton({
         onCooldown && /* @__PURE__ */ jsx(
           "div",
           {
-            className: "absolute inset-0 bg-black/60 pointer-events-none",
+            className: "absolute inset-0 bg-foreground/40 pointer-events-none",
             style: {
               clipPath: `conic-gradient(from 0deg, transparent ${360 - cooldownDeg}deg, black ${360 - cooldownDeg}deg)`,
               WebkitClipPath: `conic-gradient(from 0deg, transparent ${360 - cooldownDeg}deg, black ${360 - cooldownDeg}deg)`,
@@ -11567,13 +11571,16 @@ function ActionButton({
             }
           }
         ),
-        icon && /* @__PURE__ */ jsx("span", { className: cn("flex-shrink-0", sizes.icon), children: icon }),
+        icon && /* @__PURE__ */ jsx("span", { className: cn("flex-shrink-0", sizes.icon), children: typeof icon === "string" ? (() => {
+          const I = resolveIcon(icon);
+          return I ? /* @__PURE__ */ jsx(I, { className: "w-4 h-4" }) : null;
+        })() : icon }),
         /* @__PURE__ */ jsx("span", { className: "relative z-10", children: label }),
         hotkey && /* @__PURE__ */ jsx(
           "span",
           {
             className: cn(
-              "absolute top-0.5 right-0.5 bg-black/50 text-gray-300 rounded font-mono leading-tight",
+              "absolute top-0.5 right-0.5 bg-foreground/30 text-primary-foreground rounded font-mono leading-tight",
               sizes.hotkey
             ),
             children: hotkey
@@ -11587,15 +11594,16 @@ var sizeMap13, variantStyles8;
 var init_ActionButton = __esm({
   "components/atoms/game/ActionButton.tsx"() {
     init_cn();
+    init_Icon();
     sizeMap13 = {
       sm: { button: "px-3 py-1.5 text-xs", hotkey: "text-[9px] px-1", icon: "text-xs" },
       md: { button: "px-4 py-2 text-sm", hotkey: "text-[10px] px-1.5", icon: "text-sm" },
       lg: { button: "px-5 py-2.5 text-base", hotkey: "text-xs px-2", icon: "text-base" }
     };
     variantStyles8 = {
-      primary: "bg-blue-600 hover:bg-blue-500 border-blue-400/40",
-      secondary: "bg-gray-700 hover:bg-gray-600 border-gray-500/40",
-      danger: "bg-red-700 hover:bg-red-600 border-red-400/40"
+      primary: "bg-primary text-primary-foreground hover:bg-primary-hover border-primary",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-hover border-border",
+      danger: "bg-error text-error-foreground hover:bg-error/90 border-error"
     };
     ActionButton.displayName = "ActionButton";
   }
@@ -21695,20 +21703,20 @@ function CanvasEffectEngine({
     return img?.complete ? img : void 0;
   }, []);
   useEffect(() => {
-    const now = performance.now();
+    const now2 = performance.now();
     const effectX = x || width / 2;
     const effectY = y || height / 2;
     const preset = presets[actionType](effectX, effectY);
     const state = stateRef.current;
     for (const emitter of preset.particles) {
       const scaledEmitter = { ...emitter, count: Math.round(emitter.count * intensity) };
-      state.particles.push(...spawnParticles(scaledEmitter, now));
+      state.particles.push(...spawnParticles(scaledEmitter, now2));
     }
     for (const seqConfig of preset.sequences) {
-      state.sequences.push(spawnSequence(seqConfig, now));
+      state.sequences.push(spawnSequence(seqConfig, now2));
     }
     for (const ovConfig of preset.overlays) {
-      state.overlays.push(spawnOverlay(ovConfig, now));
+      state.overlays.push(spawnOverlay(ovConfig, now2));
     }
     if (preset.screenShake > 0) {
       shakeRef.current.intensity = preset.screenShake * intensity;
@@ -25104,7 +25112,7 @@ function DataGrid({
                       onClick: handleActionClick(action, itemData),
                       "data-testid": `action-${action.event}`,
                       "data-row-id": String(itemData.id),
-                      className: "text-error hover:bg-error/10 px-2",
+                      className: "text-error hover:text-error hover:bg-error/10 px-2",
                       children: [
                         action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon, size: "xs" }),
                         action.label
@@ -27697,7 +27705,7 @@ function StatBadge({
           const I = resolveIcon(icon);
           return I ? /* @__PURE__ */ jsx(I, { className: "w-4 h-4" }) : icon;
         })() : icon }),
-        /* @__PURE__ */ jsx("span", { className: "text-gray-400 font-medium", children: label }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-medium", children: label }),
         format === "hearts" && max && /* @__PURE__ */ jsx(
           HealthBar,
           {
@@ -27724,7 +27732,7 @@ function StatBadge({
             animated: true
           }
         ),
-        format === "text" && /* @__PURE__ */ jsx("span", { className: "font-bold text-[var(--color-foreground)]", children: value })
+        format === "text" && /* @__PURE__ */ jsx("span", { className: "font-bold text-foreground", children: value })
       ]
     }
   );
@@ -27742,11 +27750,11 @@ var init_StatBadge = __esm({
       lg: "text-base px-4 py-2"
     };
     variantMap2 = {
-      default: "bg-[var(--color-card)]/80 border-gray-700",
-      primary: "bg-blue-900/80 border-blue-700",
-      success: "bg-green-900/80 border-green-700",
-      warning: "bg-yellow-900/80 border-yellow-700",
-      danger: "bg-red-900/80 border-red-700"
+      default: "bg-card/80 border-border text-foreground",
+      primary: "bg-primary/15 border-primary/40 text-foreground",
+      success: "bg-success/15 border-success/40 text-foreground",
+      warning: "bg-warning/15 border-warning/40 text-foreground",
+      danger: "bg-error/15 border-error/40 text-foreground"
     };
     StatBadge.displayName = "StatBadge";
   }
@@ -39916,9 +39924,45 @@ var init_List = __esm({
     List3.displayName = "List";
   }
 });
-var DefaultEmptyDetail, MasterDetail;
+function MasterDetail({
+  entity,
+  masterFields,
+  detailFields: _detailFields,
+  // Captured but not used here - detail handled separately
+  loading: externalLoading,
+  isLoading: externalIsLoading,
+  error: externalError,
+  className,
+  ...rest
+}) {
+  const loading = externalLoading ?? false;
+  const isLoading = externalIsLoading ?? false;
+  const error = externalError ?? null;
+  return /* @__PURE__ */ jsx(
+    DataTable,
+    {
+      fields: masterFields,
+      columns: masterFields,
+      entity,
+      isLoading: loading || isLoading,
+      error,
+      className,
+      emptyTitle: "No items found",
+      emptyDescription: "Create your first item to get started.",
+      ...rest
+    }
+  );
+}
 var init_MasterDetail = __esm({
-  "components/organisms/layout/MasterDetail.tsx"() {
+  "components/organisms/MasterDetail.tsx"() {
+    "use client";
+    init_DataTable();
+    MasterDetail.displayName = "MasterDetail";
+  }
+});
+var DefaultEmptyDetail, MasterDetailLayout;
+var init_MasterDetailLayout = __esm({
+  "components/organisms/layout/MasterDetailLayout.tsx"() {
     init_cn();
     init_Typography();
     DefaultEmptyDetail = () => /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full border-2 border-dashed border-border", children: /* @__PURE__ */ jsx(
@@ -39929,7 +39973,7 @@ var init_MasterDetail = __esm({
         children: "Select an item to view details"
       }
     ) });
-    MasterDetail = ({
+    MasterDetailLayout = ({
       master,
       detail,
       emptyDetail,
@@ -39964,7 +40008,7 @@ var init_MasterDetail = __esm({
         }
       );
     };
-    MasterDetail.displayName = "MasterDetail";
+    MasterDetailLayout.displayName = "MasterDetailLayout";
   }
 });
 var COLUMN_CLASSES, ASPECT_CLASSES, MediaGallery;
@@ -42382,7 +42426,7 @@ function getAllEvents(traits2) {
 }
 function EventDispatcherTab({ traits: traits2, schema }) {
   const eventBus = useEventBus();
-  const [log18, setLog] = React147.useState([]);
+  const [log19, setLog] = React147.useState([]);
   const prevStatesRef = React147.useRef(/* @__PURE__ */ new Map());
   React147.useEffect(() => {
     for (const trait of traits2) {
@@ -42446,9 +42490,9 @@ function EventDispatcherTab({ traits: traits2, schema }) {
       /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-1", children: "Other Events (not available from current state)" }),
       /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: unavailableEvents.map((event) => /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", className: "opacity-50", children: event }, event)) })
     ] }),
-    log18.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+    log19.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-1", children: "Recent Transitions" }),
-      /* @__PURE__ */ jsx(Stack, { gap: "xs", children: log18.map((entry, i) => /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "font-mono text-xs", children: [
+      /* @__PURE__ */ jsx(Stack, { gap: "xs", children: log19.map((entry, i) => /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "font-mono text-xs", children: [
         /* @__PURE__ */ jsx("span", { className: "text-purple-400", children: entry.traitName }),
         " ",
         /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: entry.from }),
@@ -52191,6 +52235,7 @@ var init_component_registry_generated = __esm({
     init_LoadingState();
     init_MarkdownContent();
     init_MasterDetail();
+    init_MasterDetailLayout();
     init_MatrixQuestion();
     init_MediaGallery();
     init_Meter();
@@ -52485,6 +52530,7 @@ var init_component_registry_generated = __esm({
       "MapViewPattern": MapViewPattern,
       "MarkdownContent": MarkdownContent,
       "MasterDetail": MasterDetail,
+      "MasterDetailLayout": MasterDetailLayout,
       "MatrixQuestion": MatrixQuestion,
       "MediaGallery": MediaGallery,
       "Menu": MenuPattern,
@@ -56415,11 +56461,11 @@ function VerificationProvider({
   runtimeManager,
   traitStateGetter
 }) {
-  const isEnabled = enabled ?? (typeof process !== "undefined" && process.env?.NODE_ENV !== "production");
+  const isEnabled2 = enabled ?? (typeof process !== "undefined" && process.env?.NODE_ENV !== "production");
   const eventBus = useEventBus();
   const pendingRef = useRef(/* @__PURE__ */ new Map());
   useEffect(() => {
-    if (!isEnabled) return;
+    if (!isEnabled2) return;
     if (!eventBus.onAny) return;
     const verificationProviderLifecycleListener = (evt) => {
       const parsed = parseLifecycleEvent(evt.type);
@@ -56522,9 +56568,9 @@ function VerificationProvider({
       "pass"
     );
     return unsub;
-  }, [isEnabled, eventBus]);
+  }, [isEnabled2, eventBus]);
   useEffect(() => {
-    if (!isEnabled) return;
+    if (!isEnabled2) return;
     if (!runtimeManager) return;
     runtimeManager.setObserver({
       onTransition(trace) {
@@ -56544,20 +56590,20 @@ function VerificationProvider({
       "VerificationProvider active (runtime path)",
       "pass"
     );
-  }, [isEnabled, runtimeManager]);
+  }, [isEnabled2, runtimeManager]);
   useEffect(() => {
-    if (!isEnabled) return;
+    if (!isEnabled2) return;
     bindEventBus(eventBus);
-  }, [isEnabled, eventBus]);
+  }, [isEnabled2, eventBus]);
   useEffect(() => {
-    if (!isEnabled) return;
+    if (!isEnabled2) return;
     if (traitStateGetter) {
       bindTraitStateGetter(traitStateGetter);
     } else if (runtimeManager?.getState) {
       const mgr = runtimeManager;
       bindTraitStateGetter((traitName) => mgr.getState(traitName));
     }
-  }, [isEnabled, traitStateGetter, runtimeManager]);
+  }, [isEnabled2, traitStateGetter, runtimeManager]);
   return /* @__PURE__ */ jsx(Fragment, { children });
 }
 VerificationProvider.displayName = "VerificationProvider";
@@ -57771,6 +57817,66 @@ function ServerBridgeProvider({
 // runtime/OrbPreview.tsx
 init_navigation();
 init_verificationRegistry();
+var PERF_NAMESPACE = "almadar:perf:canvas";
+var log17 = createLogger(PERF_NAMESPACE);
+var RING_SIZE = 50;
+var ring = [];
+var writeIdx = 0;
+var subscribers = /* @__PURE__ */ new Set();
+function push(entry) {
+  if (ring.length < RING_SIZE) {
+    ring.push(entry);
+  } else {
+    ring[writeIdx] = entry;
+  }
+  writeIdx = (writeIdx + 1) % RING_SIZE;
+  for (const fn of subscribers) fn();
+}
+function isEnabled() {
+  return isLogLevelEnabled("DEBUG", PERF_NAMESPACE);
+}
+function now() {
+  return typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
+}
+function perfStart(name) {
+  if (!isEnabled()) return -1;
+  if (typeof performance !== "undefined" && typeof performance.mark === "function") {
+    try {
+      performance.mark(`${name}-start`);
+    } catch {
+    }
+  }
+  return now();
+}
+function perfEnd(name, startToken, detail) {
+  if (startToken < 0 || !isEnabled()) return;
+  const endTs = now();
+  const durationMs = endTs - startToken;
+  if (typeof performance !== "undefined" && typeof performance.measure === "function") {
+    try {
+      performance.mark(`${name}-end`);
+      performance.measure(name, `${name}-start`, `${name}-end`);
+    } catch {
+    }
+  }
+  push({ name, durationMs, ts: endTs, detail });
+  log17.debug(name, () => ({ durationMs, ...detail ?? {} }));
+}
+var profilerOnRender = (id, phase, actualDuration, baseDuration, _startTime, commitTime) => {
+  if (!isEnabled()) return;
+  push({
+    name: `profiler:${id}:${phase}`,
+    durationMs: actualDuration,
+    ts: commitTime,
+    detail: { baseDuration }
+  });
+  log17.debug(`profiler:${id}:${phase}`, () => ({ actualDuration, baseDuration }));
+};
+function bumpRevision() {
+}
+subscribers.add(bumpRevision);
+
+// runtime/prepareSchemaForPreview.ts
 function generateEntityRow(entity, idx) {
   const row = { id: String(idx) };
   for (const f3 of entity.fields) {
@@ -57796,6 +57902,7 @@ function generateFieldValue(entityName, field, idx) {
   }
 }
 function buildMockData(schema) {
+  const t = perfStart("build-mock-data");
   const result = {};
   for (const orbital of schema.orbitals) {
     const entity = orbital.entity;
@@ -57813,6 +57920,7 @@ function buildMockData(schema) {
     );
     result[entityName] = rows;
   }
+  perfEnd("build-mock-data", t, { orbitalCount: schema.orbitals.length, entityCount: Object.keys(result).length });
   return result;
 }
 function isInlineTrait2(traitRef) {
@@ -58375,7 +58483,7 @@ function entityNameOf(ref) {
 }
 var eventHandleLog = createLogger("almadar:ui:nan-coord");
 var orbPreviewLog = createLogger("almadar:ui:orb-preview-node");
-orbPreviewLog.info("module-init", { browserPlayground: typeof BrowserPlayground });
+orbPreviewLog.debug("module-init", () => ({ browserPlayground: typeof BrowserPlayground }));
 var ScreenSizeContext = createContext("tablet");
 var PatternSelectionContext = createContext({ selected: null, select: () => {
 } });
@@ -58832,11 +58940,11 @@ var OrbPreviewNodeInner = (props) => {
 };
 var OrbPreviewNode = React147__default.memo(OrbPreviewNodeInner);
 OrbPreviewNode.displayName = "OrbPreviewNode";
-orbPreviewLog.info("export-resolved", {
+orbPreviewLog.debug("export-resolved", () => ({
   type: typeof OrbPreviewNode,
-  displayName: OrbPreviewNode.displayName,
+  displayName: OrbPreviewNode.displayName ?? null,
   innerDefined: typeof OrbPreviewNodeInner === "function"
-});
+}));
 var edgeLog = createLogger("almadar:ui:nan-coord");
 var EventFlowEdgeInner = (props) => {
   const {
@@ -59668,12 +59776,12 @@ var NODE_TYPES = {
   preview: OrbPreviewNode,
   behaviorCompose: BehaviorComposeNode
 };
-flowCanvasLog.info("node-type-registry", {
+flowCanvasLog.debug("node-type-registry", () => ({
   registered: Object.keys(NODE_TYPES),
   preview: typeof OrbPreviewNode,
   previewIsValid: typeof OrbPreviewNode === "function" || typeof OrbPreviewNode === "object" && OrbPreviewNode !== null,
   behaviorCompose: typeof BehaviorComposeNode
-});
+}));
 var DEFAULT_EDGE_OPTIONS = {
   markerEnd: { type: MarkerType.ArrowClosed, width: 12, height: 12 }
 };
@@ -59735,9 +59843,16 @@ function FlowCanvasInner({
   }), [selectedPattern]);
   const [atBehaviorLevel, setAtBehaviorLevel] = useState(composeLevel === "behavior");
   const { composeNodes, composeEdges, overviewNodes, overviewEdges, expandedNodes, expandedEdges } = useMemo(() => {
+    const t = perfStart("compose-graph");
     const compose = composeLevel === "behavior" && behaviorEntries?.length ? behaviorsToComposeGraph(behaviorEntries, behaviorWires ?? [], layoutHint) : { nodes: [], edges: [] };
     const overview = schemaToOverviewGraph(parsedSchema, mockData, behaviorMeta, layoutHint);
     const expanded = expandedOrbital ? orbitalToExpandedGraph(parsedSchema, expandedOrbital, mockData) : { nodes: [], edges: [] };
+    perfEnd("compose-graph", t, {
+      composeNodes: compose.nodes.length,
+      overviewNodes: overview.nodes.length,
+      expandedNodes: expanded.nodes.length,
+      orbitalCount: parsedSchema.orbitals?.length ?? 0
+    });
     return {
       composeNodes: compose.nodes,
       composeEdges: compose.edges,
@@ -59746,7 +59861,7 @@ function FlowCanvasInner({
       expandedNodes: expanded.nodes,
       expandedEdges: expanded.edges
     };
-  }, [parsedSchema, expandedOrbital, behaviorMeta, layoutHint, composeLevel, behaviorEntries, behaviorWires]);
+  }, [parsedSchema, expandedOrbital, behaviorMeta, layoutHint, composeLevel, behaviorEntries, behaviorWires, mockData]);
   const activeNodes = atBehaviorLevel && composeNodes.length > 0 ? composeNodes : level === "overview" ? overviewNodes : expandedNodes;
   const activeEdges = atBehaviorLevel && composeEdges.length > 0 ? composeEdges : level === "overview" ? overviewEdges : expandedEdges;
   const [nodes, setNodes, onNodesChange] = useNodesState(activeNodes);
@@ -60004,7 +60119,7 @@ function FlowCanvasInner({
   ) }) });
 }
 var FlowCanvas = (props) => {
-  return /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(FlowCanvasInner, { ...props }) });
+  return /* @__PURE__ */ jsx(Profiler, { id: "flow-canvas", onRender: profilerOnRender, children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(FlowCanvasInner, { ...props }) }) });
 };
 FlowCanvas.displayName = "FlowCanvas";
 var BAND_LABELS = {
@@ -60131,7 +60246,7 @@ init_AvlTransitionLane();
 init_AvlSwimLane();
 init_types();
 init_avl_elk_layout();
-var log17 = createLogger("almadar:ui:avl:trait-scene");
+var log18 = createLogger("almadar:ui:avl:trait-scene");
 var SWIM_GUTTER2 = 120;
 var CENTER_W2 = 360;
 var AvlTraitScene = ({
@@ -60143,7 +60258,7 @@ var AvlTraitScene = ({
   const dataKey = useMemo(() => JSON.stringify(data), [data]);
   useEffect(() => {
     computeTraitLayout(data).then(setLayout).catch((error) => {
-      log17.error("computeTraitLayout failed", { error: error instanceof Error ? error : String(error) });
+      log18.error("computeTraitLayout failed", { error: error instanceof Error ? error : String(error) });
     });
   }, [dataKey]);
   if (!layout) {

package/dist/components/atoms/index.d.ts

@@ -37,7 +37,7 @@ export { InfiniteScrollSentinel, type InfiniteScrollSentinelProps } from "./Infi
 export { ConfettiEffect, type ConfettiEffectProps } from "./ConfettiEffect";
 export { TypewriterText, type TypewriterTextProps } from "./TypewriterText";
 export { SectionHeader, type SectionHeaderProps } from "./SectionHeader";
-export { MarketingStatCard, type StatCardProps as MarketingStatCardProps, type StatCardSize } from "./StatCard";
+export { MarketingStatCard, type StatCardProps as MarketingStatCardProps, type StatCardSize } from "./MarketingStatCard";
 export { ContentSection, type ContentSectionProps, type ContentSectionBackground, type ContentSectionPadding, } from "./ContentSection";
 export { PatternTile, getTileDimensions, type PatternTileProps, type PatternVariant } from "./PatternTile";
 export { AnimatedReveal, type AnimatedRevealProps, type RevealTrigger, type RevealAnimation } from "./AnimatedReveal";