@almadar/ui 2.35.0 → 2.37.0

package/dist/avl/index.cjs

@@ -24,8 +24,25 @@ var ReactMarkdown = require('react-markdown');
 var remarkGfm = require('remark-gfm');
 var remarkMath = require('remark-math');
 var rehypeKatex = require('rehype-katex');
-var SyntaxHighlighter = require('react-syntax-highlighter/dist/esm/prism');
+var SyntaxHighlighter = require('react-syntax-highlighter/dist/esm/prism-light');
 var dark = require('react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus');
+var syntax = require('@almadar/syntax');
+var langJson = require('react-syntax-highlighter/dist/esm/languages/prism/json');
+var langJavascript = require('react-syntax-highlighter/dist/esm/languages/prism/javascript');
+var langTypescript = require('react-syntax-highlighter/dist/esm/languages/prism/typescript');
+var langJsx = require('react-syntax-highlighter/dist/esm/languages/prism/jsx');
+var langTsx = require('react-syntax-highlighter/dist/esm/languages/prism/tsx');
+var langCss = require('react-syntax-highlighter/dist/esm/languages/prism/css');
+var langMarkdown = require('react-syntax-highlighter/dist/esm/languages/prism/markdown');
+var langBash = require('react-syntax-highlighter/dist/esm/languages/prism/bash');
+var langYaml = require('react-syntax-highlighter/dist/esm/languages/prism/yaml');
+var langRust = require('react-syntax-highlighter/dist/esm/languages/prism/rust');
+var langPython = require('react-syntax-highlighter/dist/esm/languages/prism/python');
+var langSql = require('react-syntax-highlighter/dist/esm/languages/prism/sql');
+var langDiff = require('react-syntax-highlighter/dist/esm/languages/prism/diff');
+var langToml = require('react-syntax-highlighter/dist/esm/languages/prism/toml');
+var langGo = require('react-syntax-highlighter/dist/esm/languages/prism/go');
+var langGraphql = require('react-syntax-highlighter/dist/esm/languages/prism/graphql');
 var core = require('@almadar/core');
 require('@tanstack/react-query');
 var runtime = require('@almadar/runtime');
@@ -61,6 +78,22 @@ var remarkMath__default = /*#__PURE__*/_interopDefault(remarkMath);
 var rehypeKatex__default = /*#__PURE__*/_interopDefault(rehypeKatex);
 var SyntaxHighlighter__default = /*#__PURE__*/_interopDefault(SyntaxHighlighter);
 var dark__default = /*#__PURE__*/_interopDefault(dark);
+var langJson__default = /*#__PURE__*/_interopDefault(langJson);
+var langJavascript__default = /*#__PURE__*/_interopDefault(langJavascript);
+var langTypescript__default = /*#__PURE__*/_interopDefault(langTypescript);
+var langJsx__default = /*#__PURE__*/_interopDefault(langJsx);
+var langTsx__default = /*#__PURE__*/_interopDefault(langTsx);
+var langCss__default = /*#__PURE__*/_interopDefault(langCss);
+var langMarkdown__default = /*#__PURE__*/_interopDefault(langMarkdown);
+var langBash__default = /*#__PURE__*/_interopDefault(langBash);
+var langYaml__default = /*#__PURE__*/_interopDefault(langYaml);
+var langRust__default = /*#__PURE__*/_interopDefault(langRust);
+var langPython__default = /*#__PURE__*/_interopDefault(langPython);
+var langSql__default = /*#__PURE__*/_interopDefault(langSql);
+var langDiff__default = /*#__PURE__*/_interopDefault(langDiff);
+var langToml__default = /*#__PURE__*/_interopDefault(langToml);
+var langGo__default = /*#__PURE__*/_interopDefault(langGo);
+var langGraphql__default = /*#__PURE__*/_interopDefault(langGraphql);
 
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -21728,6 +21761,51 @@ MarkdownContent.displayName = "MarkdownContent";
 init_Box();
 init_Stack();
 init_useEventBus();
+SyntaxHighlighter__default.default.registerLanguage("json", langJson__default.default);
+SyntaxHighlighter__default.default.registerLanguage("javascript", langJavascript__default.default);
+SyntaxHighlighter__default.default.registerLanguage("js", langJavascript__default.default);
+SyntaxHighlighter__default.default.registerLanguage("typescript", langTypescript__default.default);
+SyntaxHighlighter__default.default.registerLanguage("ts", langTypescript__default.default);
+SyntaxHighlighter__default.default.registerLanguage("jsx", langJsx__default.default);
+SyntaxHighlighter__default.default.registerLanguage("tsx", langTsx__default.default);
+SyntaxHighlighter__default.default.registerLanguage("css", langCss__default.default);
+SyntaxHighlighter__default.default.registerLanguage("markdown", langMarkdown__default.default);
+SyntaxHighlighter__default.default.registerLanguage("md", langMarkdown__default.default);
+SyntaxHighlighter__default.default.registerLanguage("bash", langBash__default.default);
+SyntaxHighlighter__default.default.registerLanguage("shell", langBash__default.default);
+SyntaxHighlighter__default.default.registerLanguage("sh", langBash__default.default);
+SyntaxHighlighter__default.default.registerLanguage("yaml", langYaml__default.default);
+SyntaxHighlighter__default.default.registerLanguage("yml", langYaml__default.default);
+SyntaxHighlighter__default.default.registerLanguage("rust", langRust__default.default);
+SyntaxHighlighter__default.default.registerLanguage("python", langPython__default.default);
+SyntaxHighlighter__default.default.registerLanguage("py", langPython__default.default);
+SyntaxHighlighter__default.default.registerLanguage("sql", langSql__default.default);
+SyntaxHighlighter__default.default.registerLanguage("diff", langDiff__default.default);
+SyntaxHighlighter__default.default.registerLanguage("toml", langToml__default.default);
+SyntaxHighlighter__default.default.registerLanguage("go", langGo__default.default);
+SyntaxHighlighter__default.default.registerLanguage("graphql", langGraphql__default.default);
+SyntaxHighlighter__default.default.registerLanguage("orb", syntax.orbLanguage);
+var orbStyleOverrides = {
+  "orb-binding": { color: syntax.ORB_COLORS.dark.binding, fontWeight: "bold" },
+  "orb-effect": { color: syntax.ORB_COLORS.dark.effect, fontWeight: "bold" },
+  "orb-event": { color: syntax.ORB_COLORS.dark.event },
+  "orb-slot": { color: syntax.ORB_COLORS.dark.uiSlot },
+  "orb-structural": { color: syntax.ORB_COLORS.dark.structural },
+  "orb-field-type": { color: syntax.ORB_COLORS.dark.fieldType },
+  "orb-persistence": { color: syntax.ORB_COLORS.dark.persistence },
+  "orb-pattern": { color: syntax.ORB_COLORS.dark.pattern },
+  "orb-behavior": { color: syntax.ORB_COLORS.dark.behavior },
+  "orb-unknown-op": { color: syntax.ORB_COLORS.dark.error, textDecoration: "wavy underline" },
+  "orb-op-arithmetic": { color: syntax.ORB_COLORS.dark.arithmetic, fontWeight: "bold" },
+  "orb-op-comparison": { color: syntax.ORB_COLORS.dark.comparison },
+  "orb-op-logic": { color: syntax.ORB_COLORS.dark.logic },
+  "orb-op-string": { color: syntax.ORB_COLORS.dark.string },
+  "orb-op-collection": { color: syntax.ORB_COLORS.dark.collection },
+  "orb-op-time": { color: syntax.ORB_COLORS.dark.time },
+  "orb-op-control": { color: syntax.ORB_COLORS.dark.control },
+  "orb-op-async": { color: syntax.ORB_COLORS.dark.async }
+};
+var orbStyle = { ...dark__default.default, ...orbStyleOverrides };
 var CodeBlock = React124__namespace.default.memo(
   ({
     code: rawCode,
@@ -21738,6 +21816,8 @@ var CodeBlock = React124__namespace.default.memo(
     className
   }) => {
     const code = typeof rawCode === "string" ? rawCode : String(rawCode ?? "");
+    const isOrb = language === "orb";
+    const activeStyle = isOrb ? orbStyle : dark__default.default;
     const eventBus = useEventBus();
     const { t: _t } = useTranslate();
     const scrollRef = React124.useRef(null);
@@ -21817,7 +21897,7 @@ var CodeBlock = React124__namespace.default.memo(
             {
               PreTag: "div",
               language,
-              style: dark__default.default,
+              style: activeStyle,
               customStyle: {
                 backgroundColor: "transparent",
                 borderRadius: 0,
@@ -41004,22 +41084,33 @@ function VerifyModePanel({
 }) {
   const scrollRef = React124__namespace.useRef(null);
   const prevCountRef = React124__namespace.useRef(0);
+  const [walkStep, setWalkStep] = React124__namespace.useState(null);
+  React124__namespace.useEffect(() => {
+    const interval = setInterval(() => {
+      const w = window;
+      const step = w.__orbitalWalkStep;
+      if (step) setWalkStep(step);
+    }, 300);
+    return () => clearInterval(interval);
+  }, []);
   React124__namespace.useEffect(() => {
     if (transitions.length > prevCountRef.current && scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
     prevCountRef.current = transitions.length;
   }, [transitions.length]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const hudBottom = typeof document !== "undefined" ? document.getElementById("slot-hud-bottom") : null;
+  const panel = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Badge, { variant: failedChecks > 0 ? "danger" : "success", size: "sm", children: failedChecks > 0 ? `${failedChecks} fail` : "OK" }),
@@ -41033,10 +41124,35 @@ function VerifyModePanel({
           ] }),
           traitStates && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-cyan-400 truncate max-w-[400px]", children: traitStates })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1", children: transitions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-500 text-xs font-mono py-2 text-center", children: "Waiting for transitions..." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-0.5", children: transitions.map((trace) => /* @__PURE__ */ jsxRuntime.jsx(TransitionRow, { trace }, trace.id)) }) }) })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex overflow-hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1", children: transitions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-500 text-xs font-mono py-2 text-center", children: "Waiting for transitions..." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-0.5", children: transitions.map((trace) => /* @__PURE__ */ jsxRuntime.jsx(TransitionRow, { trace }, trace.id)) }) }) }),
+          walkStep && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "text-cyan-400 font-bold mb-1", children: [
+              "Walk Step ",
+              walkStep.stepIndex,
+              "/",
+              walkStep.stepTotal
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-300 mb-1", children: walkStep.traitName }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 mb-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-yellow-300", children: walkStep.from }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: "--" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-green-300", children: walkStep.event }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: "-->" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-yellow-300", children: walkStep.to })
+            ] }),
+            walkStep.guardCase && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: walkStep.guardCase === "pass" ? "text-green-400" : "text-red-400", children: [
+              "guard: ",
+              walkStep.guardCase
+            ] }),
+            walkStep.isRepositioning && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-500 italic", children: "repositioning" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: walkStep.accepted ? "text-green-400 mt-1" : "text-red-400 mt-1", children: walkStep.accepted ? "\u2713 accepted" : "\u2717 rejected" })
+          ] })
+        ] })
       ]
     }
   );
+  return hudBottom ? reactDom.createPortal(panel, hudBottom) : panel;
 }
 function RuntimeDebugger({
   position = "bottom-right",
@@ -46871,20 +46987,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([
@@ -46902,153 +47012,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 ?? "";
-  const traitName = node.traitName ?? "";
-  const patterns = node.patterns ?? [];
-  const effectEntries = effects.map((type) => ({ type, args: [] }));
-  const fromRole = getStateRole(fromState);
-  const toRole = getStateRole(toState);
+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 } = React124.useContext(PatternSelectionContext);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Box,
-    {
-      className: "flex flex-col bg-card border-l border-border overflow-y-auto",
-      style: { width: 340 },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center justify-between px-4 py-3 border-b border-border", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "font-semibold", children: selectedPattern ? "Element Inspector" : "Transition Detail" }),
-          /* @__PURE__ */ jsxRuntime.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 [activeTab, setActiveTab] = React124.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$1 = node.patterns ?? [];
+  const effectTypes = node.effectTypes ?? [];
+  const guard = node.guard;
+  const isExpanded = Boolean(traitName);
+  const patternType = selectedPattern?.patternType;
+  const patternDef = React124.useMemo(() => patternType ? patterns.getPatternDefinition(patternType) : null, [patternType]);
+  const isEntityPattern = patternType ? patterns.isEntityAwarePattern(patternType) : false;
+  const entity = React124.useMemo(() => findEntity(schema, orbitalName), [schema, orbitalName]);
+  const transition = React124.useMemo(() => {
+    if (!traitName || !transitionEvent) return null;
+    return findTransition(schema, orbitalName, traitName, transitionEvent);
+  }, [schema, orbitalName, traitName, transitionEvent]);
+  const traits2 = React124.useMemo(() => findTraits(schema, orbitalName), [schema, orbitalName]);
+  const orbCode = React124.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 = React124.useCallback((prop, value) => {
+    if (!editable || !onSchemaChange) return;
+  }, [editable, onSchemaChange]);
+  const headerTitle = selectedPattern ? selectedPattern.patternType : isExpanded ? transitionEvent || "Transition" : orbitalName;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex flex-col bg-card border-l border-border h-full", style: { width: 340 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "shrink-0 border-b border-border", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center justify-between px-4 py-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex items-center gap-2", children: selectedPattern ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "font-semibold", children: headerTitle }) }),
+        /* @__PURE__ */ jsxRuntime.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__ */ 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-1 overflow-y-auto", children: activeTab === "code" ? (
+      /* ── Code Tab ── */
+      /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+        CodeBlock,
+        {
+          code: orbCode,
+          language: "orb",
+          showCopyButton: true,
+          showLanguageBadge: true,
+          maxHeight: "100%"
+        }
+      ) })
+    ) : (
+      /* ── Inspector Tab ── */
+      /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        selectedPattern && patternDef?.propsSchema && /* @__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: "Props" }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Box, { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground text-[11px] w-20 shrink-0 font-mono", children: propName }),
+              editable ? /* @__PURE__ */ jsxRuntime.jsx(
+                Input,
+                {
+                  placeholder: ps.types?.join(" | ") ?? "string",
+                  className: "flex-1 text-[11px] h-6",
+                  onChange: (e) => handlePropChange(propName, e.target.value)
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "text-[11px] text-muted-foreground", children: [
+                ps.types?.join(" | ") ?? "string",
+                ps.required ? " *" : ""
+              ] })
+            ] }, propName);
+          }) })
         ] }),
-        selectedPattern && /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "px-4 py-3 border-b border-border bg-primary/5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: "Selected Element" }),
+        (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: "Entity" }),
           /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center gap-2 mb-2", children: [
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "text-muted-foreground text-[10px] font-mono", children: [
-              "#",
-              selectedPattern.patternId
-            ] })
+            /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 14, height: 14, children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 7, cy: 7, r: 5, fill: "var(--color-primary)" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "font-semibold text-[12px]", children: entity.name }),
+            /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px]", children: entity.persistence })
           ] }),
-          selectedPattern.sourceTrait && /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "text-muted-foreground text-[10px]", children: [
-            "from trait: ",
-            selectedPattern.sourceTrait
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex flex-col gap-1", children: entity.fields.map((f3) => /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 12, height: 12, children: /* @__PURE__ */ jsxRuntime.jsx(AvlFieldType, { x: 6, y: 6, kind: FIELD_TYPE_MAP[f3.type] ?? "string", size: 4 }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-[11px] font-mono flex-1", children: f3.name }),
+            /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px]", children: f3.type }),
+            f3.required && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-primary text-[9px]", children: "req" })
+          ] }, f3.name)) })
+        ] }),
+        !selectedPattern && !isExpanded && traits2.length > 0 && /* @__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: "Traits" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex flex-col gap-1", children: traits2.map((t) => /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-[11px] font-semibold", children: t.name }),
+            /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "text-muted-foreground text-[10px]", children: [
+              t.stateCount,
+              " states"
+            ] })
+          ] }, t.name)) })
         ] }),
-        /* @__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: "State Transition" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "100%", height: 50, viewBox: "0 0 300 50", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(AvlState, { x: 10, y: 10, name: fromState, role: fromRole, width: 100, height: 28 }),
-            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: 118, y1: 24, x2: 170, y2: 24, stroke: "#1E293B", strokeWidth: 2, markerEnd: "url(#arrow-head)" }),
-            /* @__PURE__ */ jsxRuntime.jsx(AvlState, { x: 178, y: 10, name: toState, role: toRole, width: 100, height: 28 }),
-            /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("marker", { id: "arrow-head", markerWidth: 8, markerHeight: 6, refX: 8, refY: 3, orient: "auto", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0,0 L8,3 L0,6 Z", fill: "#1E293B" }) }) })
+        isExpanded && fromState && toState && /* @__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: "Transition" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "100%", height: 44, viewBox: "0 0 280 44", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(AvlState, { x: 8, y: 8, name: fromState, role: getStateRole(fromState), width: 90, height: 26 }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: 104, y1: 21, x2: 158, y2: 21, stroke: "#1E293B", strokeWidth: 2, markerEnd: "url(#orb-arrow)" }),
+            /* @__PURE__ */ jsxRuntime.jsx(AvlState, { x: 164, y: 8, name: toState, role: getStateRole(toState), width: 90, height: 26 }),
+            /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("marker", { id: "orb-arrow", markerWidth: 8, markerHeight: 6, refX: 8, refY: 3, orient: "auto", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0,0 L8,3 L0,6 Z", fill: "#1E293B" }) }) })
           ] }),
-          traitName && /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "text-muted-foreground text-[11px] mt-1", children: [
-            "Trait: ",
+          traitName && /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "text-muted-foreground text-[11px]", children: [
             traitName,
-            " ",
-            entityName ? `on ${entityName}` : ""
+            entityName ? ` on ${entityName}` : ""
           ] })
         ] }),
-        /* @__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: "Trigger" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 20, height: 20, children: /* @__PURE__ */ jsxRuntime.jsx(AvlEvent, { x: 10, y: 10, size: 16 }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "font-semibold", children: event })
-          ] })
-        ] }),
-        guard && /* @__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: "Guard" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 20, height: 20, children: /* @__PURE__ */ jsxRuntime.jsx(AvlGuard, { x: 10, y: 10, size: 16 }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "font-mono text-[11px]", children: formatExpression(guard) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "px-4 py-3 border-b border-border/40", children: [
+        isExpanded && transitionEvent && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "px-4 py-2 border-b border-border/40", children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center gap-2", children: [
+          /* @__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) && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "px-4 py-2 border-b border-border/40", children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center gap-2", 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,
+            {
+              defaultValue: formatExpression(transition?.guard ?? guard),
+              className: "flex-1 text-[11px] font-mono h-6"
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "font-mono text-[11px] text-muted-foreground", children: formatExpression(transition?.guard ?? guard) })
+        ] }) }),
+        effectTypes.length > 0 && /* @__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: [
             "Effects (",
-            effectEntries.length,
+            effectTypes.length,
             ")"
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex flex-col gap-2", children: effectEntries.map((eff, i) => {
-            const isKnown = KNOWN_EFFECTS.has(eff.type);
-            const category = exports.EFFECT_TYPE_TO_CATEGORY[eff.type];
+          /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex flex-col gap-1.5", children: effectTypes.map((type, i) => {
+            const isKnown = KNOWN_EFFECTS.has(type);
+            const category = exports.EFFECT_TYPE_TO_CATEGORY[type];
             const catColor = category ? exports.EFFECT_CATEGORY_COLORS[category] : void 0;
             return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "text-muted-foreground text-[11px] w-4 text-right shrink-0", children: [
                 i + 1,
                 "."
               ] }),
-              isKnown ? /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 18, height: 18, children: /* @__PURE__ */ jsxRuntime.jsx(AvlEffect, { x: 9, y: 9, effectType: eff.type, size: 7, showBackground: true }) }) : /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-[18px] h-[18px] rounded-full bg-muted/30" }),
-              /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-[12px]", style: { color: catColor?.color }, children: effectSummary(eff) })
+              isKnown && /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 16, height: 16, children: /* @__PURE__ */ jsxRuntime.jsx(AvlEffect, { x: 8, y: 8, effectType: type, size: 6, showBackground: true }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-[11px]", style: { color: catColor?.color }, children: effectSummary(type) })
             ] }, i);
           }) })
         ] }),
-        patterns.length > 0 && /* @__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 source" }),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Box, { children: [
+        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: [
               "slot: ",
               entry.slot
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(PatternTree, { config: entry.pattern, depth: 0 })
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Box, { style: { paddingLeft: indent }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box, { style: { paddingLeft: depth * 12 }, children: [
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-purple-500", children: val }) : `"${val}"` : Array.isArray(val) && typeof val[0] === "string" && val[0].includes("/") ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-amber-600", children: [
@@ -47064,10 +47276,14 @@ function PatternTree({ config, depth }) {
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: display })
       ] }, key);
     }),
-    Array.isArray(children) && children.map((child, i) => /* @__PURE__ */ jsxRuntime.jsx(PatternTree, { config: child, depth: depth + 1 }, i))
+    Array.isArray(children) && children.map((child, i) => /* @__PURE__ */ jsxRuntime.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
 };
@@ -47085,7 +47301,9 @@ function FlowCanvasInner({
   height = 500,
   onNodeClick,
   onLevelChange,
-  initialOrbital
+  initialOrbital,
+  editable,
+  onSchemaChange
 }) {
   const parsedSchema = React124.useMemo(() => {
     if (typeof schemaProp === "string") return JSON.parse(schemaProp);
@@ -47282,7 +47500,16 @@ function FlowCanvasInner({
             }
           )
         ] }),
-        selectedNode && /* @__PURE__ */ jsxRuntime.jsx(TransitionPanel, { node: selectedNode, onClose: handleClosePanel })
+        selectedNode && /* @__PURE__ */ jsxRuntime.jsx(
+          OrbInspector,
+          {
+            node: selectedNode,
+            schema: parsedSchema,
+            editable,
+            onSchemaChange,
+            onClose: handleClosePanel
+          }
+        )
       ]
     }
   ) }) });
@@ -47863,6 +48090,7 @@ exports.EventFlowEdge = EventFlowEdge;
 exports.FlowCanvas = FlowCanvas;
 exports.MiniStateMachine = MiniStateMachine;
 exports.ModuleCard = ModuleCard;
+exports.OrbInspector = OrbInspector;
 exports.OrbPreviewNode = OrbPreviewNode;
 exports.SystemNode = SystemNode;
 exports.ZOOM_BAND_THRESHOLDS = ZOOM_BAND_THRESHOLDS;