@almadar/ui 2.36.0 → 2.37.0

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

@@ -31,4 +31,4 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     /** onChange handler - accepts events from input, select, or textarea */
     onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>;
 }
-export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>>;
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>>;

package/dist/components/index.cjs

@@ -12,8 +12,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 reactLeaflet = require('react-leaflet');
 var L = require('leaflet');
 require('leaflet/dist/leaflet.css');
@@ -50,6 +67,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 L__default = /*#__PURE__*/_interopDefault(L);
 
 var __defProp = Object.defineProperty;
@@ -8661,6 +8694,51 @@ var MarkdownContent = React90__namespace.default.memo(
   (prev, next) => prev.content === next.content && prev.className === next.className && prev.direction === next.direction
 );
 MarkdownContent.displayName = "MarkdownContent";
+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 = React90__namespace.default.memo(
   ({
     code: rawCode,
@@ -8671,6 +8749,8 @@ var CodeBlock = React90__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 = React90.useRef(null);
@@ -8750,7 +8830,7 @@ var CodeBlock = React90__namespace.default.memo(
             {
               PreTag: "div",
               language,
-              style: dark__default.default,
+              style: activeStyle,
               customStyle: {
                 backgroundColor: "transparent",
                 borderRadius: 0,
@@ -33009,22 +33089,33 @@ function VerifyModePanel({
 }) {
   const scrollRef = React90__namespace.useRef(null);
   const prevCountRef = React90__namespace.useRef(0);
+  const [walkStep, setWalkStep] = React90__namespace.useState(null);
+  React90__namespace.useEffect(() => {
+    const interval = setInterval(() => {
+      const w = window;
+      const step = w.__orbitalWalkStep;
+      if (step) setWalkStep(step);
+    }, 300);
+    return () => clearInterval(interval);
+  }, []);
   React90__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" }),
@@ -33038,10 +33129,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",

package/dist/components/index.js

@@ -12,8 +12,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 { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
@@ -8631,6 +8648,51 @@ var MarkdownContent = React90__default.memo(
   (prev, next) => prev.content === next.content && prev.className === next.className && prev.direction === next.direction
 );
 MarkdownContent.displayName = "MarkdownContent";
+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 = React90__default.memo(
   ({
     code: rawCode,
@@ -8641,6 +8703,8 @@ var CodeBlock = React90__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);
@@ -8720,7 +8784,7 @@ var CodeBlock = React90__default.memo(
             {
               PreTag: "div",
               language,
-              style: dark,
+              style: activeStyle,
               customStyle: {
                 backgroundColor: "transparent",
                 borderRadius: 0,
@@ -32979,22 +33043,33 @@ function VerifyModePanel({
 }) {
   const scrollRef = React90.useRef(null);
   const prevCountRef = React90.useRef(0);
+  const [walkStep, setWalkStep] = React90.useState(null);
+  React90.useEffect(() => {
+    const interval = setInterval(() => {
+      const w = window;
+      const step = w.__orbitalWalkStep;
+      if (step) setWalkStep(step);
+    }, 300);
+    return () => clearInterval(interval);
+  }, []);
   React90.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" }),
@@ -33008,10 +33083,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",

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

@@ -28,6 +28,10 @@ export interface FlowCanvasProps {
     }) => void;
     onLevelChange?: (level: ViewLevel, orbital?: string) => void;
     initialOrbital?: string;
+    /** Enable editing in the inspector. When true, fields become inputs. */
+    editable?: boolean;
+    /** Called when the user edits the schema via the inspector. */
+    onSchemaChange?: (schema: OrbitalSchema) => void;
     /** @deprecated Use onNodeClick instead. Kept for AvlCosmicZoom compat. */
     onZoomChange?: (level: string, context: Record<string, string | undefined>) => void;
     /** @deprecated Not used in V3. */

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

@@ -0,0 +1,29 @@
+/**
+ * OrbInspector
+ *
+ * Universal contextual inspector for .orb programs. Built into FlowCanvas.
+ * Two tabs: Inspector (contextual sections) and Code (.orb syntax view).
+ *
+ * Inspector shows different sections based on what was clicked:
+ *   - Orbital header → entity fields, traits, pages
+ *   - Pattern element → pattern props, entity (if entity-aware), transition (if fires event)
+ *   - Transition node → state diagram, guard, effects, render-ui source
+ *
+ * Code tab shows the .orb representation of the selected context.
+ *
+ * When `editable` is true, inspector fields become inputs.
+ */
+import React from 'react';
+import type { OrbitalSchema } from '@almadar/core';
+import type { PreviewNodeData } from '../../molecules/avl/avl-preview-types';
+export interface OrbInspectorProps {
+    node: PreviewNodeData;
+    schema: OrbitalSchema;
+    editable?: boolean;
+    onSchemaChange?: (schema: OrbitalSchema) => void;
+    onClose: () => void;
+}
+export declare function OrbInspector({ node, schema, editable, onSchemaChange, onClose }: OrbInspectorProps): React.ReactElement;
+export declare namespace OrbInspector {
+    var displayName: string;
+}

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

@@ -6,6 +6,7 @@
  * @packageDocumentation
  */
 export { FlowCanvas, type FlowCanvasProps } from './FlowCanvas';
+export { OrbInspector, type OrbInspectorProps } from './OrbInspector';
 export { ZoomBreadcrumb, type ZoomBreadcrumbProps } from './ZoomBreadcrumb';
 export { ZoomLegend, type ZoomLegendProps } from './ZoomLegend';
 export { AvlCosmicZoom, type AvlCosmicZoomProps } from './AvlCosmicZoom';

package/dist/providers/index.cjs

@@ -18,8 +18,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');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -50,6 +67,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 __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -3270,6 +3303,51 @@ var MarkdownContent = React113__namespace.default.memo(
   (prev, next) => prev.content === next.content && prev.className === next.className && prev.direction === next.direction
 );
 MarkdownContent.displayName = "MarkdownContent";
+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 = React113__namespace.default.memo(
   ({
     code: rawCode,
@@ -3280,6 +3358,8 @@ var CodeBlock = React113__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 = React113.useRef(null);
@@ -3359,7 +3439,7 @@ var CodeBlock = React113__namespace.default.memo(
             {
               PreTag: "div",
               language,
-              style: dark__default.default,
+              style: activeStyle,
               customStyle: {
                 backgroundColor: "transparent",
                 borderRadius: 0,