@almadar/ui 2.36.0 → 2.38.0

package/dist/avl/index.js

@@ -16,7 +16,7 @@ import { createPortal } from 'react-dom';
 import * as LucideIcons from 'lucide-react';
 import { Loader2, ChevronDown, X, ArrowRight, TrendingDown, TrendingUp, Check, Copy, AlertCircle, AlertTriangle, Info, CheckCircle, ChevronLeft, ChevronRight, FileWarning, Upload, Circle, Clock, CheckCircle2, Sun, Moon, ArrowUp, ArrowDown, MoreVertical, Minus, Star, XCircle, Play, RotateCcw, Pause, SkipForward, Eraser, Search, HelpCircle, ChevronUp, ArrowLeft, Plus, Image as Image$1, ZoomIn, Package, Menu as Menu$1, ZoomOut, Filter, FileQuestion, Inbox, FileText, Download, Printer, Bug, Send, MoreHorizontal, Settings, Bell, LogOut, Trash2, Zap, Sword, Move, Heart, Shield, Code, WrapText, Wrench, List, Calendar, Pencil, Eye, User, Tag, DollarSign } from 'lucide-react';
 import { evaluate, createMinimalContext } from '@almadar/evaluator';
-import { getComponentForPattern as getComponentForPattern$1 } from '@almadar/patterns';
+import { getComponentForPattern as getComponentForPattern$1, getPatternDefinition, isEntityAwarePattern } from '@almadar/patterns';
 import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
@@ -25,8 +25,25 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
-import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism';
+import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
 import dark from 'react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus';
+import { orbLanguage, ORB_COLORS } from '@almadar/syntax';
+import langJson from 'react-syntax-highlighter/dist/esm/languages/prism/json';
+import langJavascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
+import langTypescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';
+import langJsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
+import langTsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
+import langCss from 'react-syntax-highlighter/dist/esm/languages/prism/css';
+import langMarkdown from 'react-syntax-highlighter/dist/esm/languages/prism/markdown';
+import langBash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
+import langYaml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml';
+import langRust from 'react-syntax-highlighter/dist/esm/languages/prism/rust';
+import langPython from 'react-syntax-highlighter/dist/esm/languages/prism/python';
+import langSql from 'react-syntax-highlighter/dist/esm/languages/prism/sql';
+import langDiff from 'react-syntax-highlighter/dist/esm/languages/prism/diff';
+import langToml from 'react-syntax-highlighter/dist/esm/languages/prism/toml';
+import langGo from 'react-syntax-highlighter/dist/esm/languages/prism/go';
+import langGraphql from 'react-syntax-highlighter/dist/esm/languages/prism/graphql';
 import { schemaToIR, getPage, isCircuitEvent } from '@almadar/core';
 import '@tanstack/react-query';
 import { StateMachineManager, createContextFromBindings, interpolateValue, EffectExecutor } from '@almadar/runtime';
@@ -21697,6 +21714,51 @@ MarkdownContent.displayName = "MarkdownContent";
 init_Box();
 init_Stack();
 init_useEventBus();
+SyntaxHighlighter.registerLanguage("json", langJson);
+SyntaxHighlighter.registerLanguage("javascript", langJavascript);
+SyntaxHighlighter.registerLanguage("js", langJavascript);
+SyntaxHighlighter.registerLanguage("typescript", langTypescript);
+SyntaxHighlighter.registerLanguage("ts", langTypescript);
+SyntaxHighlighter.registerLanguage("jsx", langJsx);
+SyntaxHighlighter.registerLanguage("tsx", langTsx);
+SyntaxHighlighter.registerLanguage("css", langCss);
+SyntaxHighlighter.registerLanguage("markdown", langMarkdown);
+SyntaxHighlighter.registerLanguage("md", langMarkdown);
+SyntaxHighlighter.registerLanguage("bash", langBash);
+SyntaxHighlighter.registerLanguage("shell", langBash);
+SyntaxHighlighter.registerLanguage("sh", langBash);
+SyntaxHighlighter.registerLanguage("yaml", langYaml);
+SyntaxHighlighter.registerLanguage("yml", langYaml);
+SyntaxHighlighter.registerLanguage("rust", langRust);
+SyntaxHighlighter.registerLanguage("python", langPython);
+SyntaxHighlighter.registerLanguage("py", langPython);
+SyntaxHighlighter.registerLanguage("sql", langSql);
+SyntaxHighlighter.registerLanguage("diff", langDiff);
+SyntaxHighlighter.registerLanguage("toml", langToml);
+SyntaxHighlighter.registerLanguage("go", langGo);
+SyntaxHighlighter.registerLanguage("graphql", langGraphql);
+SyntaxHighlighter.registerLanguage("orb", orbLanguage);
+var orbStyleOverrides = {
+  "orb-binding": { color: ORB_COLORS.dark.binding, fontWeight: "bold" },
+  "orb-effect": { color: ORB_COLORS.dark.effect, fontWeight: "bold" },
+  "orb-event": { color: ORB_COLORS.dark.event },
+  "orb-slot": { color: ORB_COLORS.dark.uiSlot },
+  "orb-structural": { color: ORB_COLORS.dark.structural },
+  "orb-field-type": { color: ORB_COLORS.dark.fieldType },
+  "orb-persistence": { color: ORB_COLORS.dark.persistence },
+  "orb-pattern": { color: ORB_COLORS.dark.pattern },
+  "orb-behavior": { color: ORB_COLORS.dark.behavior },
+  "orb-unknown-op": { color: ORB_COLORS.dark.error, textDecoration: "wavy underline" },
+  "orb-op-arithmetic": { color: ORB_COLORS.dark.arithmetic, fontWeight: "bold" },
+  "orb-op-comparison": { color: ORB_COLORS.dark.comparison },
+  "orb-op-logic": { color: ORB_COLORS.dark.logic },
+  "orb-op-string": { color: ORB_COLORS.dark.string },
+  "orb-op-collection": { color: ORB_COLORS.dark.collection },
+  "orb-op-time": { color: ORB_COLORS.dark.time },
+  "orb-op-control": { color: ORB_COLORS.dark.control },
+  "orb-op-async": { color: ORB_COLORS.dark.async }
+};
+var orbStyle = { ...dark, ...orbStyleOverrides };
 var CodeBlock = React124__default.memo(
   ({
     code: rawCode,
@@ -21707,6 +21769,8 @@ var CodeBlock = React124__default.memo(
     className
   }) => {
     const code = typeof rawCode === "string" ? rawCode : String(rawCode ?? "");
+    const isOrb = language === "orb";
+    const activeStyle = isOrb ? orbStyle : dark;
     const eventBus = useEventBus();
     const { t: _t } = useTranslate();
     const scrollRef = useRef(null);
@@ -21786,7 +21850,7 @@ var CodeBlock = React124__default.memo(
             {
               PreTag: "div",
               language,
-              style: dark,
+              style: activeStyle,
               customStyle: {
                 backgroundColor: "transparent",
                 borderRadius: 0,
@@ -40973,22 +41037,33 @@ function VerifyModePanel({
 }) {
   const scrollRef = React124.useRef(null);
   const prevCountRef = React124.useRef(0);
+  const [walkStep, setWalkStep] = React124.useState(null);
+  React124.useEffect(() => {
+    const interval = setInterval(() => {
+      const w = window;
+      const step = w.__orbitalWalkStep;
+      if (step) setWalkStep(step);
+    }, 300);
+    return () => clearInterval(interval);
+  }, []);
   React124.useEffect(() => {
     if (transitions.length > prevCountRef.current && scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
     prevCountRef.current = transitions.length;
   }, [transitions.length]);
-  return /* @__PURE__ */ jsxs(
+  const hudBottom = typeof document !== "undefined" ? document.getElementById("slot-hud-bottom") : null;
+  const panel = /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
         "runtime-debugger runtime-debugger--verify",
-        "fixed bottom-0 left-0 right-0 flex flex-col bg-gray-900 text-white border-t-2 border-cyan-500",
+        "flex flex-col bg-gray-900 text-white border-t-2 border-cyan-500",
+        hudBottom ? "" : "fixed bottom-0 left-0 right-0",
         className
       ),
       "data-testid": "debugger-verify",
-      style: { zIndex: 99999, height: "25vh" },
+      style: { height: "25vh", zIndex: hudBottom ? void 0 : 40 },
       children: [
         /* @__PURE__ */ jsxs("div", { className: "px-3 py-1.5 flex items-center gap-3 text-xs font-mono border-b border-gray-700 flex-shrink-0", children: [
           /* @__PURE__ */ jsx(Badge, { variant: failedChecks > 0 ? "danger" : "success", size: "sm", children: failedChecks > 0 ? `${failedChecks} fail` : "OK" }),
@@ -41002,10 +41077,35 @@ function VerifyModePanel({
           ] }),
           traitStates && /* @__PURE__ */ jsx("span", { className: "text-cyan-400 truncate max-w-[400px]", children: traitStates })
         ] }),
-        /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "px-2 py-1", children: transitions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-gray-500 text-xs font-mono py-2 text-center", children: "Waiting for transitions..." }) : /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: transitions.map((trace) => /* @__PURE__ */ jsx(TransitionRow, { trace }, trace.id)) }) }) })
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 flex overflow-hidden", children: [
+          /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "px-2 py-1", children: transitions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-gray-500 text-xs font-mono py-2 text-center", children: "Waiting for transitions..." }) : /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: transitions.map((trace) => /* @__PURE__ */ jsx(TransitionRow, { trace }, trace.id)) }) }) }),
+          walkStep && /* @__PURE__ */ jsxs("div", { className: "w-56 flex-shrink-0 border-l border-gray-700 px-2 py-1 text-xs font-mono overflow-y-auto", children: [
+            /* @__PURE__ */ jsxs("div", { className: "text-cyan-400 font-bold mb-1", children: [
+              "Walk Step ",
+              walkStep.stepIndex,
+              "/",
+              walkStep.stepTotal
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "text-gray-300 mb-1", children: walkStep.traitName }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 mb-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-yellow-300", children: walkStep.from }),
+              /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: "--" }),
+              /* @__PURE__ */ jsx("span", { className: "text-green-300", children: walkStep.event }),
+              /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: "-->" }),
+              /* @__PURE__ */ jsx("span", { className: "text-yellow-300", children: walkStep.to })
+            ] }),
+            walkStep.guardCase && /* @__PURE__ */ jsxs("div", { className: walkStep.guardCase === "pass" ? "text-green-400" : "text-red-400", children: [
+              "guard: ",
+              walkStep.guardCase
+            ] }),
+            walkStep.isRepositioning && /* @__PURE__ */ jsx("div", { className: "text-gray-500 italic", children: "repositioning" }),
+            /* @__PURE__ */ jsx("div", { className: walkStep.accepted ? "text-green-400 mt-1" : "text-red-400 mt-1", children: walkStep.accepted ? "\u2713 accepted" : "\u2717 rejected" })
+          ] })
+        ] })
       ]
     }
   );
+  return hudBottom ? createPortal(panel, hudBottom) : panel;
 }
 function RuntimeDebugger({
   position = "bottom-right",
@@ -46840,20 +46940,14 @@ init_Avl3DStateNode();
 init_Avl3DTransitionArc();
 init_Avl3DExprTree();
 
-// components/organisms/avl/FlowCanvas.tsx
-init_Box();
-init_Typography();
-
-// components/organisms/avl/TransitionPanel.tsx
+// components/organisms/avl/OrbInspector.tsx
 init_Box();
 init_Typography();
 init_types();
 function formatExpression(expr) {
   if (!expr) return "";
   if (typeof expr === "string") return expr;
-  if (Array.isArray(expr)) {
-    return `(${expr.map(formatExpression).join(" ")})`;
-  }
+  if (Array.isArray(expr)) return `(${expr.map(formatExpression).join(" ")})`;
   return String(expr);
 }
 var KNOWN_EFFECTS = /* @__PURE__ */ new Set([
@@ -46871,153 +46965,255 @@ var KNOWN_EFFECTS = /* @__PURE__ */ new Set([
   "if",
   "log"
 ]);
-function effectSummary(eff) {
-  switch (eff.type) {
-    case "render-ui":
-      return `render-ui ${eff.args[0] ?? "main"}`;
-    case "set":
-      return `set ${eff.args[0] ?? ""}`;
-    case "fetch":
-      return `fetch ${eff.args[0] ?? ""}`;
-    case "emit":
-      return `emit ${eff.args[0] ?? ""}`;
-    case "persist":
-      return `persist ${eff.args[0] ?? ""} ${eff.args[1] ?? ""}`;
-    case "navigate":
-      return `navigate ${eff.args[0] ?? ""}`;
-    case "call-service":
-      return `call-service ${eff.args[0] ?? ""}`;
-    case "notify":
-      return `notify ${eff.args[0] ?? ""}`;
-    default:
-      return eff.type;
-  }
+function effectSummary(type) {
+  return type;
+}
+var FIELD_TYPE_MAP = {
+  string: "string",
+  number: "number",
+  boolean: "boolean",
+  date: "date",
+  enum: "enum",
+  object: "object",
+  array: "array"
+};
+function findEntity(schema, orbitalName) {
+  const orbital = schema.orbitals?.find((o) => o.name === orbitalName);
+  if (!orbital || typeof orbital.entity === "string") return null;
+  const e = orbital.entity;
+  const fields = (e.fields ?? []).map((f3) => ({
+    name: f3.name ?? "",
+    type: f3.type ?? "string",
+    required: f3.required
+  }));
+  return { name: e.name ?? orbitalName, persistence: e.persistence ?? "runtime", fields };
 }
-function TransitionPanel({ node, onClose }) {
-  const fromState = node.fromState ?? "unknown";
-  const toState = node.toState ?? "unknown";
-  const event = node.transitionEvent ?? "INIT";
-  const guard = node.guard;
-  const effects = node.effectTypes ?? [];
-  const entityName = node.entityName ?? "";
+function findTransition(schema, orbitalName, traitName, event) {
+  const orbital = schema.orbitals?.find((o) => o.name === orbitalName);
+  if (!orbital) return null;
+  const traits2 = orbital.traits ?? [];
+  const trait = traits2.find((t) => typeof t !== "string" && t.name === traitName);
+  if (!trait || typeof trait === "string") return null;
+  const sm = trait.stateMachine;
+  if (!sm) return null;
+  return sm.transitions?.find((t) => t.event === event) ?? null;
+}
+function findTraits(schema, orbitalName) {
+  const orbital = schema.orbitals?.find((o) => o.name === orbitalName);
+  if (!orbital) return [];
+  return (orbital.traits ?? []).filter((t) => typeof t !== "string").map((t) => ({
+    name: t.name,
+    stateCount: t.stateMachine?.states?.length ?? 0
+  }));
+}
+function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose }) {
+  const { selected: selectedPattern } = useContext(PatternSelectionContext);
+  const [activeTab, setActiveTab] = useState("inspector");
+  const orbitalName = node.orbitalName ?? "";
   const traitName = node.traitName ?? "";
+  const transitionEvent = node.transitionEvent ?? "";
+  const fromState = node.fromState ?? "";
+  const toState = node.toState ?? "";
+  const entityName = node.entityName ?? "";
   const patterns = node.patterns ?? [];
-  const effectEntries = effects.map((type) => ({ type, args: [] }));
-  const fromRole = getStateRole(fromState);
-  const toRole = getStateRole(toState);
-  const { selected: selectedPattern } = useContext(PatternSelectionContext);
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      className: "flex flex-col bg-card border-l border-border overflow-y-auto",
-      style: { width: 340 },
-      children: [
-        /* @__PURE__ */ jsxs(Box, { className: "flex items-center justify-between px-4 py-3 border-b border-border", children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-semibold", children: selectedPattern ? "Element Inspector" : "Transition Detail" }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: onClose,
-              className: "text-muted-foreground hover:text-foreground text-sm cursor-pointer bg-transparent border-none p-1",
-              "aria-label": "Close panel",
-              children: "\xD7"
-            }
-          )
+  const effectTypes = node.effectTypes ?? [];
+  const guard = node.guard;
+  const isExpanded = Boolean(traitName);
+  const patternType = selectedPattern?.patternType;
+  const patternDef = useMemo(() => patternType ? getPatternDefinition(patternType) : null, [patternType]);
+  const isEntityPattern = patternType ? isEntityAwarePattern(patternType) : false;
+  const entity = useMemo(() => findEntity(schema, orbitalName), [schema, orbitalName]);
+  const transition = useMemo(() => {
+    if (!traitName || !transitionEvent) return null;
+    return findTransition(schema, orbitalName, traitName, transitionEvent);
+  }, [schema, orbitalName, traitName, transitionEvent]);
+  const traits2 = useMemo(() => findTraits(schema, orbitalName), [schema, orbitalName]);
+  const orbCode = useMemo(() => {
+    const orbital = schema.orbitals?.find((o) => o.name === orbitalName);
+    if (!orbital) return "{}";
+    if (isExpanded && traitName) {
+      const traits3 = orbital.traits ?? [];
+      const trait = traits3.find((t) => typeof t !== "string" && t.name === traitName);
+      if (trait && typeof trait !== "string" && trait.stateMachine) {
+        if (transitionEvent) {
+          const t = trait.stateMachine.transitions?.find((tx) => tx.event === transitionEvent);
+          if (t) return JSON.stringify(t, null, 2);
+        }
+        return JSON.stringify({ name: trait.name, stateMachine: trait.stateMachine }, null, 2);
+      }
+    }
+    return JSON.stringify(orbital, null, 2);
+  }, [schema, orbitalName, traitName, transitionEvent, isExpanded]);
+  const handlePropChange = useCallback((prop, value) => {
+    if (!editable || !onSchemaChange) return;
+  }, [editable, onSchemaChange]);
+  const headerTitle = selectedPattern ? selectedPattern.patternType : isExpanded ? transitionEvent || "Transition" : orbitalName;
+  return /* @__PURE__ */ jsxs(Box, { className: "flex flex-col bg-card border-l border-border h-full", style: { width: 340 }, children: [
+    /* @__PURE__ */ jsxs(Box, { className: "shrink-0 border-b border-border", children: [
+      /* @__PURE__ */ jsxs(Box, { className: "flex items-center justify-between px-4 py-2", children: [
+        /* @__PURE__ */ jsx(Box, { className: "flex items-center gap-2", children: selectedPattern ? /* @__PURE__ */ jsx(
+          Box,
+          {
+            className: "rounded px-2 py-0.5 text-[11px] font-mono font-semibold",
+            style: { backgroundColor: "var(--color-primary)", color: "var(--color-primary-foreground)" },
+            children: headerTitle
+          }
+        ) : /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-semibold", children: headerTitle }) }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onClose,
+            className: "text-muted-foreground hover:text-foreground text-sm cursor-pointer bg-transparent border-none p-1",
+            "aria-label": "Close",
+            children: "\xD7"
+          }
+        )
+      ] }),
+      /* @__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-1 overflow-y-auto", children: activeTab === "code" ? (
+      /* ── Code Tab ── */
+      /* @__PURE__ */ jsx(Box, { className: "p-2", children: /* @__PURE__ */ jsx(
+        CodeBlock,
+        {
+          code: orbCode,
+          language: "orb",
+          showCopyButton: true,
+          showLanguageBadge: true,
+          maxHeight: "100%"
+        }
+      ) })
+    ) : (
+      /* ── Inspector Tab ── */
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        selectedPattern && patternDef?.propsSchema && /* @__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: "Props" }),
+          /* @__PURE__ */ jsx(Box, { className: "flex flex-col gap-1.5", children: Object.entries(patternDef.propsSchema).slice(0, 8).map(([propName, propSchema]) => {
+            const ps = propSchema;
+            return /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[11px] w-20 shrink-0 font-mono", children: propName }),
+              editable ? /* @__PURE__ */ jsx(
+                Input,
+                {
+                  placeholder: ps.types?.join(" | ") ?? "string",
+                  className: "flex-1 text-[11px] h-6",
+                  onChange: (e) => handlePropChange(propName, e.target.value)
+                }
+              ) : /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-[11px] text-muted-foreground", children: [
+                ps.types?.join(" | ") ?? "string",
+                ps.required ? " *" : ""
+              ] })
+            ] }, propName);
+          }) })
         ] }),
-        selectedPattern && /* @__PURE__ */ jsxs(Box, { className: "px-4 py-3 border-b border-border bg-primary/5", children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: "Selected Element" }),
+        (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: "Entity" }),
           /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2 mb-2", children: [
-            /* @__PURE__ */ jsx(
-              Box,
-              {
-                className: "rounded px-2 py-0.5 text-[11px] font-mono font-semibold",
-                style: {
-                  backgroundColor: "var(--color-primary)",
-                  color: "var(--color-primary-foreground)"
-                },
-                children: selectedPattern.patternType
-              }
-            ),
-            selectedPattern.patternId && /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground text-[10px] font-mono", children: [
-              "#",
-              selectedPattern.patternId
-            ] })
+            /* @__PURE__ */ jsx("svg", { width: 14, height: 14, children: /* @__PURE__ */ jsx("circle", { cx: 7, cy: 7, r: 5, fill: "var(--color-primary)" }) }),
+            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-semibold text-[12px]", children: entity.name }),
+            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px]", children: entity.persistence })
           ] }),
-          selectedPattern.sourceTrait && /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground text-[10px]", children: [
-            "from trait: ",
-            selectedPattern.sourceTrait
-          ] })
+          /* @__PURE__ */ jsx(Box, { className: "flex flex-col gap-1", children: entity.fields.map((f3) => /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("svg", { width: 12, height: 12, children: /* @__PURE__ */ jsx(AvlFieldType, { x: 6, y: 6, kind: FIELD_TYPE_MAP[f3.type] ?? "string", size: 4 }) }),
+            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-[11px] font-mono flex-1", children: f3.name }),
+            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px]", children: f3.type }),
+            f3.required && /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-primary text-[9px]", children: "req" })
+          ] }, f3.name)) })
+        ] }),
+        !selectedPattern && !isExpanded && traits2.length > 0 && /* @__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: "Traits" }),
+          /* @__PURE__ */ jsx(Box, { className: "flex flex-col gap-1", children: traits2.map((t) => /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-[11px] font-semibold", children: t.name }),
+            /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground text-[10px]", children: [
+              t.stateCount,
+              " states"
+            ] })
+          ] }, t.name)) })
         ] }),
-        /* @__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: "State Transition" }),
-          /* @__PURE__ */ jsxs("svg", { width: "100%", height: 50, viewBox: "0 0 300 50", children: [
-            /* @__PURE__ */ jsx(AvlState, { x: 10, y: 10, name: fromState, role: fromRole, width: 100, height: 28 }),
-            /* @__PURE__ */ jsx("line", { x1: 118, y1: 24, x2: 170, y2: 24, stroke: "#1E293B", strokeWidth: 2, markerEnd: "url(#arrow-head)" }),
-            /* @__PURE__ */ jsx(AvlState, { x: 178, y: 10, name: toState, role: toRole, width: 100, height: 28 }),
-            /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", { id: "arrow-head", markerWidth: 8, markerHeight: 6, refX: 8, refY: 3, orient: "auto", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L8,3 L0,6 Z", fill: "#1E293B" }) }) })
+        isExpanded && fromState && toState && /* @__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: "Transition" }),
+          /* @__PURE__ */ jsxs("svg", { width: "100%", height: 44, viewBox: "0 0 280 44", children: [
+            /* @__PURE__ */ jsx(AvlState, { x: 8, y: 8, name: fromState, role: getStateRole(fromState), width: 90, height: 26 }),
+            /* @__PURE__ */ jsx("line", { x1: 104, y1: 21, x2: 158, y2: 21, stroke: "#1E293B", strokeWidth: 2, markerEnd: "url(#orb-arrow)" }),
+            /* @__PURE__ */ jsx(AvlState, { x: 164, y: 8, name: toState, role: getStateRole(toState), width: 90, height: 26 }),
+            /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", { id: "orb-arrow", markerWidth: 8, markerHeight: 6, refX: 8, refY: 3, orient: "auto", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L8,3 L0,6 Z", fill: "#1E293B" }) }) })
           ] }),
-          traitName && /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground text-[11px] mt-1", children: [
-            "Trait: ",
+          traitName && /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground text-[11px]", children: [
             traitName,
-            " ",
-            entityName ? `on ${entityName}` : ""
+            entityName ? ` on ${entityName}` : ""
           ] })
         ] }),
-        /* @__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: "Trigger" }),
-          /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("svg", { width: 20, height: 20, children: /* @__PURE__ */ jsx(AvlEvent, { x: 10, y: 10, size: 16 }) }),
-            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-semibold", children: event })
-          ] })
-        ] }),
-        guard && /* @__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: "Guard" }),
-          /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("svg", { width: 20, height: 20, children: /* @__PURE__ */ jsx(AvlGuard, { x: 10, y: 10, size: 16 }) }),
-            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-mono text-[11px]", children: formatExpression(guard) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs(Box, { className: "px-4 py-3 border-b border-border/40", children: [
+        isExpanded && transitionEvent && /* @__PURE__ */ jsx(Box, { className: "px-4 py-2 border-b border-border/40", children: /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
+          /* @__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) && /* @__PURE__ */ jsx(Box, { className: "px-4 py-2 border-b border-border/40", children: /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("svg", { width: 16, height: 16, children: /* @__PURE__ */ jsx(AvlGuard, { x: 8, y: 8, size: 12 }) }),
+          editable ? /* @__PURE__ */ jsx(
+            Input,
+            {
+              defaultValue: formatExpression(transition?.guard ?? guard),
+              className: "flex-1 text-[11px] font-mono h-6"
+            }
+          ) : /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-mono text-[11px] text-muted-foreground", children: formatExpression(transition?.guard ?? guard) })
+        ] }) }),
+        effectTypes.length > 0 && /* @__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: [
             "Effects (",
-            effectEntries.length,
+            effectTypes.length,
             ")"
           ] }),
-          /* @__PURE__ */ jsx(Box, { className: "flex flex-col gap-2", children: effectEntries.map((eff, i) => {
-            const isKnown = KNOWN_EFFECTS.has(eff.type);
-            const category = EFFECT_TYPE_TO_CATEGORY[eff.type];
+          /* @__PURE__ */ jsx(Box, { className: "flex flex-col gap-1.5", children: effectTypes.map((type, i) => {
+            const isKnown = KNOWN_EFFECTS.has(type);
+            const category = EFFECT_TYPE_TO_CATEGORY[type];
             const catColor = category ? EFFECT_CATEGORY_COLORS[category] : void 0;
             return /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground text-[11px] w-4 text-right shrink-0", children: [
                 i + 1,
                 "."
               ] }),
-              isKnown ? /* @__PURE__ */ jsx("svg", { width: 18, height: 18, children: /* @__PURE__ */ jsx(AvlEffect, { x: 9, y: 9, effectType: eff.type, size: 7, showBackground: true }) }) : /* @__PURE__ */ jsx(Box, { className: "w-[18px] h-[18px] rounded-full bg-muted/30" }),
-              /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-[12px]", style: { color: catColor?.color }, children: effectSummary(eff) })
+              isKnown && /* @__PURE__ */ jsx("svg", { width: 16, height: 16, children: /* @__PURE__ */ jsx(AvlEffect, { x: 8, y: 8, effectType: type, size: 6, showBackground: true }) }),
+              /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-[11px]", style: { color: catColor?.color }, children: effectSummary(type) })
             ] }, i);
           }) })
         ] }),
-        patterns.length > 0 && /* @__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 source" }),
+        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: [
               "slot: ",
               entry.slot
             ] }),
-            /* @__PURE__ */ jsx(PatternTree, { config: entry.pattern, depth: 0 })
+            /* @__PURE__ */ jsx(OrbPatternTree, { config: entry.pattern, depth: 0 })
           ] }, i)) })
         ] })
-      ]
-    }
-  );
+      ] })
+    ) })
+  ] });
 }
-function PatternTree({ config, depth }) {
+function OrbPatternTree({ config, depth }) {
   if (!config || typeof config !== "object") return null;
   const { type, children, ...props } = config;
   if (typeof type !== "string") return null;
-  const indent = depth * 12;
   const propEntries = Object.entries(props).filter(([k]) => k !== "type");
-  return /* @__PURE__ */ jsxs(Box, { style: { paddingLeft: indent }, children: [
+  return /* @__PURE__ */ jsxs(Box, { style: { paddingLeft: depth * 12 }, children: [
     /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-primary font-semibold text-[11px]", children: type }),
     propEntries.slice(0, 5).map(([key, val]) => {
       const display = typeof val === "string" ? val.startsWith("@") ? /* @__PURE__ */ jsx("span", { className: "text-purple-500", children: val }) : `"${val}"` : Array.isArray(val) && typeof val[0] === "string" && val[0].includes("/") ? /* @__PURE__ */ jsxs("span", { className: "text-amber-600", children: [
@@ -47033,10 +47229,14 @@ function PatternTree({ config, depth }) {
         /* @__PURE__ */ jsx("span", { children: display })
       ] }, key);
     }),
-    Array.isArray(children) && children.map((child, i) => /* @__PURE__ */ jsx(PatternTree, { config: child, depth: depth + 1 }, i))
+    Array.isArray(children) && children.map((child, i) => /* @__PURE__ */ jsx(OrbPatternTree, { config: child, depth: depth + 1 }, i))
   ] });
 }
-TransitionPanel.displayName = "TransitionPanel";
+OrbInspector.displayName = "OrbInspector";
+
+// components/organisms/avl/FlowCanvas.tsx
+init_Box();
+init_Typography();
 var NODE_TYPES = {
   preview: OrbPreviewNode
 };
@@ -47054,7 +47254,9 @@ function FlowCanvasInner({
   height = 500,
   onNodeClick,
   onLevelChange,
-  initialOrbital
+  initialOrbital,
+  editable,
+  onSchemaChange
 }) {
   const parsedSchema = useMemo(() => {
     if (typeof schemaProp === "string") return JSON.parse(schemaProp);
@@ -47251,7 +47453,16 @@ function FlowCanvasInner({
             }
           )
         ] }),
-        selectedNode && /* @__PURE__ */ jsx(TransitionPanel, { node: selectedNode, onClose: handleClosePanel })
+        selectedNode && /* @__PURE__ */ jsx(
+          OrbInspector,
+          {
+            node: selectedNode,
+            schema: parsedSchema,
+            editable,
+            onSchemaChange,
+            onClose: handleClosePanel
+          }
+        )
       ]
     }
   ) }) });
@@ -47788,4 +47999,4 @@ AvlClickTarget.displayName = "AvlClickTarget";
 init_avl_schema_parser();
 init_avl_zoom_state();
 
-export { AVL_FIELD_TYPE_SHAPES, AVL_OPERATOR_COLORS, AvlApplication, AvlBackwardEdge, AvlBehaviorGlyph, AvlBinding, AvlBindingEdge, AvlBindingRef, AvlClickTarget, AvlClosedCircuit, AvlCosmicZoom, AvlEffect, AvlEmitListen, AvlEntity, AvlEvent, AvlEventWireEdge, AvlExprTree, AvlField, AvlFieldType, AvlGuard, AvlLiteral, AvlOperator, AvlOrbital, AvlOrbitalNode, AvlOrbitalUnit, AvlPage, AvlPageEdge, AvlPersistence, AvlSExpr, AvlSlotMap, AvlState, AvlStateMachine, AvlSwimLane, AvlTrait, AvlTraitScene, AvlTransition, AvlTransitionEdge, AvlTransitionLane, AvlTransitionScene, BehaviorView, CONNECTION_COLORS, DOMAIN_COLORS, DetailView, EFFECT_CATEGORY_COLORS, EFFECT_TYPE_TO_CATEGORY, EventFlowEdge, FlowCanvas, MiniStateMachine, ModuleCard, OrbPreviewNode, STATE_COLORS, SystemNode, ZOOM_BAND_THRESHOLDS, ZoomBandContext, ZoomBreadcrumb, ZoomLegend, arcPath, computeTraitLayout, computeZoomBand, curveControlPoint, edgePath, getStateRole, gridPositions, orbitalToExpandedGraph, parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, radialPositions, ringPositions, schemaToFlowGraph, schemaToOverviewGraph, useZoomBand, zoomProgress };
+export { AVL_FIELD_TYPE_SHAPES, AVL_OPERATOR_COLORS, AvlApplication, AvlBackwardEdge, AvlBehaviorGlyph, AvlBinding, AvlBindingEdge, AvlBindingRef, AvlClickTarget, AvlClosedCircuit, AvlCosmicZoom, AvlEffect, AvlEmitListen, AvlEntity, AvlEvent, AvlEventWireEdge, AvlExprTree, AvlField, AvlFieldType, AvlGuard, AvlLiteral, AvlOperator, AvlOrbital, AvlOrbitalNode, AvlOrbitalUnit, AvlPage, AvlPageEdge, AvlPersistence, AvlSExpr, AvlSlotMap, AvlState, AvlStateMachine, AvlSwimLane, AvlTrait, AvlTraitScene, AvlTransition, AvlTransitionEdge, AvlTransitionLane, AvlTransitionScene, BehaviorView, CONNECTION_COLORS, DOMAIN_COLORS, DetailView, EFFECT_CATEGORY_COLORS, EFFECT_TYPE_TO_CATEGORY, EventFlowEdge, FlowCanvas, MiniStateMachine, ModuleCard, OrbInspector, OrbPreviewNode, STATE_COLORS, SystemNode, ZOOM_BAND_THRESHOLDS, ZoomBandContext, ZoomBreadcrumb, ZoomLegend, arcPath, computeTraitLayout, computeZoomBand, curveControlPoint, edgePath, getStateRole, gridPositions, orbitalToExpandedGraph, parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, radialPositions, ringPositions, schemaToFlowGraph, schemaToOverviewGraph, useZoomBand, zoomProgress };