@almadar/ui 2.36.0 → 2.38.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/avl/index.cjs +359 -131
  2. package/dist/avl/index.d.cts +33 -1
  3. package/dist/avl/index.d.ts +1 -0
  4. package/dist/avl/index.js +342 -131
  5. package/dist/components/atoms/Input.d.ts +1 -1
  6. package/dist/components/index.cjs +122 -6
  7. package/dist/components/index.js +106 -6
  8. package/dist/components/organisms/avl/FlowCanvas.d.ts +4 -0
  9. package/dist/components/organisms/avl/OrbInspector.d.ts +29 -0
  10. package/dist/components/organisms/avl/index.d.ts +1 -0
  11. package/dist/providers/index.cjs +82 -2
  12. package/dist/providers/index.js +66 -2
  13. package/dist/runtime/index.cjs +122 -6
  14. package/dist/runtime/index.js +106 -6
  15. package/package.json +4 -4
  16. package/dist/components/organisms/avl/TransitionPanel.d.ts +0 -20
package/dist/providers/index.js CHANGED
@@ -18,8 +18,25 @@ import ReactMarkdown from 'react-markdown';
18
18
  import remarkGfm from 'remark-gfm';
19
19
  import remarkMath from 'remark-math';
20
20
  import rehypeKatex from 'rehype-katex';
21
- import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism';
21
+ import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
22
22
  import dark from 'react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus';
23
+ import { orbLanguage, ORB_COLORS } from '@almadar/syntax';
24
+ import langJson from 'react-syntax-highlighter/dist/esm/languages/prism/json';
25
+ import langJavascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
26
+ import langTypescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';
27
+ import langJsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
28
+ import langTsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
29
+ import langCss from 'react-syntax-highlighter/dist/esm/languages/prism/css';
30
+ import langMarkdown from 'react-syntax-highlighter/dist/esm/languages/prism/markdown';
31
+ import langBash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
32
+ import langYaml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml';
33
+ import langRust from 'react-syntax-highlighter/dist/esm/languages/prism/rust';
34
+ import langPython from 'react-syntax-highlighter/dist/esm/languages/prism/python';
35
+ import langSql from 'react-syntax-highlighter/dist/esm/languages/prism/sql';
36
+ import langDiff from 'react-syntax-highlighter/dist/esm/languages/prism/diff';
37
+ import langToml from 'react-syntax-highlighter/dist/esm/languages/prism/toml';
38
+ import langGo from 'react-syntax-highlighter/dist/esm/languages/prism/go';
39
+ import langGraphql from 'react-syntax-highlighter/dist/esm/languages/prism/graphql';
23
40
 
24
41
  var __defProp = Object.defineProperty;
25
42
  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -3240,6 +3257,51 @@ var MarkdownContent = React113__default.memo(
3240
3257
  (prev, next) => prev.content === next.content && prev.className === next.className && prev.direction === next.direction
3241
3258
  );
3242
3259
  MarkdownContent.displayName = "MarkdownContent";
3260
+ SyntaxHighlighter.registerLanguage("json", langJson);
3261
+ SyntaxHighlighter.registerLanguage("javascript", langJavascript);
3262
+ SyntaxHighlighter.registerLanguage("js", langJavascript);
3263
+ SyntaxHighlighter.registerLanguage("typescript", langTypescript);
3264
+ SyntaxHighlighter.registerLanguage("ts", langTypescript);
3265
+ SyntaxHighlighter.registerLanguage("jsx", langJsx);
3266
+ SyntaxHighlighter.registerLanguage("tsx", langTsx);
3267
+ SyntaxHighlighter.registerLanguage("css", langCss);
3268
+ SyntaxHighlighter.registerLanguage("markdown", langMarkdown);
3269
+ SyntaxHighlighter.registerLanguage("md", langMarkdown);
3270
+ SyntaxHighlighter.registerLanguage("bash", langBash);
3271
+ SyntaxHighlighter.registerLanguage("shell", langBash);
3272
+ SyntaxHighlighter.registerLanguage("sh", langBash);
3273
+ SyntaxHighlighter.registerLanguage("yaml", langYaml);
3274
+ SyntaxHighlighter.registerLanguage("yml", langYaml);
3275
+ SyntaxHighlighter.registerLanguage("rust", langRust);
3276
+ SyntaxHighlighter.registerLanguage("python", langPython);
3277
+ SyntaxHighlighter.registerLanguage("py", langPython);
3278
+ SyntaxHighlighter.registerLanguage("sql", langSql);
3279
+ SyntaxHighlighter.registerLanguage("diff", langDiff);
3280
+ SyntaxHighlighter.registerLanguage("toml", langToml);
3281
+ SyntaxHighlighter.registerLanguage("go", langGo);
3282
+ SyntaxHighlighter.registerLanguage("graphql", langGraphql);
3283
+ SyntaxHighlighter.registerLanguage("orb", orbLanguage);
3284
+ var orbStyleOverrides = {
3285
+ "orb-binding": { color: ORB_COLORS.dark.binding, fontWeight: "bold" },
3286
+ "orb-effect": { color: ORB_COLORS.dark.effect, fontWeight: "bold" },
3287
+ "orb-event": { color: ORB_COLORS.dark.event },
3288
+ "orb-slot": { color: ORB_COLORS.dark.uiSlot },
3289
+ "orb-structural": { color: ORB_COLORS.dark.structural },
3290
+ "orb-field-type": { color: ORB_COLORS.dark.fieldType },
3291
+ "orb-persistence": { color: ORB_COLORS.dark.persistence },
3292
+ "orb-pattern": { color: ORB_COLORS.dark.pattern },
3293
+ "orb-behavior": { color: ORB_COLORS.dark.behavior },
3294
+ "orb-unknown-op": { color: ORB_COLORS.dark.error, textDecoration: "wavy underline" },
3295
+ "orb-op-arithmetic": { color: ORB_COLORS.dark.arithmetic, fontWeight: "bold" },
3296
+ "orb-op-comparison": { color: ORB_COLORS.dark.comparison },
3297
+ "orb-op-logic": { color: ORB_COLORS.dark.logic },
3298
+ "orb-op-string": { color: ORB_COLORS.dark.string },
3299
+ "orb-op-collection": { color: ORB_COLORS.dark.collection },
3300
+ "orb-op-time": { color: ORB_COLORS.dark.time },
3301
+ "orb-op-control": { color: ORB_COLORS.dark.control },
3302
+ "orb-op-async": { color: ORB_COLORS.dark.async }
3303
+ };
3304
+ var orbStyle = { ...dark, ...orbStyleOverrides };
3243
3305
  var CodeBlock = React113__default.memo(
3244
3306
  ({
3245
3307
  code: rawCode,
@@ -3250,6 +3312,8 @@ var CodeBlock = React113__default.memo(
3250
3312
  className
3251
3313
  }) => {
3252
3314
  const code = typeof rawCode === "string" ? rawCode : String(rawCode ?? "");
3315
+ const isOrb = language === "orb";
3316
+ const activeStyle = isOrb ? orbStyle : dark;
3253
3317
  const eventBus = useEventBus();
3254
3318
  const { t: _t } = useTranslate();
3255
3319
  const scrollRef = useRef(null);
@@ -3329,7 +3393,7 @@ var CodeBlock = React113__default.memo(
3329
3393
  {
3330
3394
  PreTag: "div",
3331
3395
  language,
3332
- style: dark,
3396
+ style: activeStyle,
3333
3397
  customStyle: {
3334
3398
  backgroundColor: "transparent",
3335
3399
  borderRadius: 0,
package/dist/runtime/index.cjs CHANGED
@@ -21,8 +21,25 @@ var ReactMarkdown = require('react-markdown');
21
21
  var remarkGfm = require('remark-gfm');
22
22
  var remarkMath = require('remark-math');
23
23
  var rehypeKatex = require('rehype-katex');
24
- var SyntaxHighlighter = require('react-syntax-highlighter/dist/esm/prism');
24
+ var SyntaxHighlighter = require('react-syntax-highlighter/dist/esm/prism-light');
25
25
  var dark = require('react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus');
26
+ var syntax = require('@almadar/syntax');
27
+ var langJson = require('react-syntax-highlighter/dist/esm/languages/prism/json');
28
+ var langJavascript = require('react-syntax-highlighter/dist/esm/languages/prism/javascript');
29
+ var langTypescript = require('react-syntax-highlighter/dist/esm/languages/prism/typescript');
30
+ var langJsx = require('react-syntax-highlighter/dist/esm/languages/prism/jsx');
31
+ var langTsx = require('react-syntax-highlighter/dist/esm/languages/prism/tsx');
32
+ var langCss = require('react-syntax-highlighter/dist/esm/languages/prism/css');
33
+ var langMarkdown = require('react-syntax-highlighter/dist/esm/languages/prism/markdown');
34
+ var langBash = require('react-syntax-highlighter/dist/esm/languages/prism/bash');
35
+ var langYaml = require('react-syntax-highlighter/dist/esm/languages/prism/yaml');
36
+ var langRust = require('react-syntax-highlighter/dist/esm/languages/prism/rust');
37
+ var langPython = require('react-syntax-highlighter/dist/esm/languages/prism/python');
38
+ var langSql = require('react-syntax-highlighter/dist/esm/languages/prism/sql');
39
+ var langDiff = require('react-syntax-highlighter/dist/esm/languages/prism/diff');
40
+ var langToml = require('react-syntax-highlighter/dist/esm/languages/prism/toml');
41
+ var langGo = require('react-syntax-highlighter/dist/esm/languages/prism/go');
42
+ var langGraphql = require('react-syntax-highlighter/dist/esm/languages/prism/graphql');
26
43
 
27
44
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
28
45
 
@@ -53,6 +70,22 @@ var remarkMath__default = /*#__PURE__*/_interopDefault(remarkMath);
53
70
  var rehypeKatex__default = /*#__PURE__*/_interopDefault(rehypeKatex);
54
71
  var SyntaxHighlighter__default = /*#__PURE__*/_interopDefault(SyntaxHighlighter);
55
72
  var dark__default = /*#__PURE__*/_interopDefault(dark);
73
+ var langJson__default = /*#__PURE__*/_interopDefault(langJson);
74
+ var langJavascript__default = /*#__PURE__*/_interopDefault(langJavascript);
75
+ var langTypescript__default = /*#__PURE__*/_interopDefault(langTypescript);
76
+ var langJsx__default = /*#__PURE__*/_interopDefault(langJsx);
77
+ var langTsx__default = /*#__PURE__*/_interopDefault(langTsx);
78
+ var langCss__default = /*#__PURE__*/_interopDefault(langCss);
79
+ var langMarkdown__default = /*#__PURE__*/_interopDefault(langMarkdown);
80
+ var langBash__default = /*#__PURE__*/_interopDefault(langBash);
81
+ var langYaml__default = /*#__PURE__*/_interopDefault(langYaml);
82
+ var langRust__default = /*#__PURE__*/_interopDefault(langRust);
83
+ var langPython__default = /*#__PURE__*/_interopDefault(langPython);
84
+ var langSql__default = /*#__PURE__*/_interopDefault(langSql);
85
+ var langDiff__default = /*#__PURE__*/_interopDefault(langDiff);
86
+ var langToml__default = /*#__PURE__*/_interopDefault(langToml);
87
+ var langGo__default = /*#__PURE__*/_interopDefault(langGo);
88
+ var langGraphql__default = /*#__PURE__*/_interopDefault(langGraphql);
56
89
 
57
90
  var __defProp = Object.defineProperty;
58
91
  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -9792,6 +9825,51 @@ var MarkdownContent = React117__namespace.default.memo(
9792
9825
  (prev, next) => prev.content === next.content && prev.className === next.className && prev.direction === next.direction
9793
9826
  );
9794
9827
  MarkdownContent.displayName = "MarkdownContent";
9828
+ SyntaxHighlighter__default.default.registerLanguage("json", langJson__default.default);
9829
+ SyntaxHighlighter__default.default.registerLanguage("javascript", langJavascript__default.default);
9830
+ SyntaxHighlighter__default.default.registerLanguage("js", langJavascript__default.default);
9831
+ SyntaxHighlighter__default.default.registerLanguage("typescript", langTypescript__default.default);
9832
+ SyntaxHighlighter__default.default.registerLanguage("ts", langTypescript__default.default);
9833
+ SyntaxHighlighter__default.default.registerLanguage("jsx", langJsx__default.default);
9834
+ SyntaxHighlighter__default.default.registerLanguage("tsx", langTsx__default.default);
9835
+ SyntaxHighlighter__default.default.registerLanguage("css", langCss__default.default);
9836
+ SyntaxHighlighter__default.default.registerLanguage("markdown", langMarkdown__default.default);
9837
+ SyntaxHighlighter__default.default.registerLanguage("md", langMarkdown__default.default);
9838
+ SyntaxHighlighter__default.default.registerLanguage("bash", langBash__default.default);
9839
+ SyntaxHighlighter__default.default.registerLanguage("shell", langBash__default.default);
9840
+ SyntaxHighlighter__default.default.registerLanguage("sh", langBash__default.default);
9841
+ SyntaxHighlighter__default.default.registerLanguage("yaml", langYaml__default.default);
9842
+ SyntaxHighlighter__default.default.registerLanguage("yml", langYaml__default.default);
9843
+ SyntaxHighlighter__default.default.registerLanguage("rust", langRust__default.default);
9844
+ SyntaxHighlighter__default.default.registerLanguage("python", langPython__default.default);
9845
+ SyntaxHighlighter__default.default.registerLanguage("py", langPython__default.default);
9846
+ SyntaxHighlighter__default.default.registerLanguage("sql", langSql__default.default);
9847
+ SyntaxHighlighter__default.default.registerLanguage("diff", langDiff__default.default);
9848
+ SyntaxHighlighter__default.default.registerLanguage("toml", langToml__default.default);
9849
+ SyntaxHighlighter__default.default.registerLanguage("go", langGo__default.default);
9850
+ SyntaxHighlighter__default.default.registerLanguage("graphql", langGraphql__default.default);
9851
+ SyntaxHighlighter__default.default.registerLanguage("orb", syntax.orbLanguage);
9852
+ var orbStyleOverrides = {
9853
+ "orb-binding": { color: syntax.ORB_COLORS.dark.binding, fontWeight: "bold" },
9854
+ "orb-effect": { color: syntax.ORB_COLORS.dark.effect, fontWeight: "bold" },
9855
+ "orb-event": { color: syntax.ORB_COLORS.dark.event },
9856
+ "orb-slot": { color: syntax.ORB_COLORS.dark.uiSlot },
9857
+ "orb-structural": { color: syntax.ORB_COLORS.dark.structural },
9858
+ "orb-field-type": { color: syntax.ORB_COLORS.dark.fieldType },
9859
+ "orb-persistence": { color: syntax.ORB_COLORS.dark.persistence },
9860
+ "orb-pattern": { color: syntax.ORB_COLORS.dark.pattern },
9861
+ "orb-behavior": { color: syntax.ORB_COLORS.dark.behavior },
9862
+ "orb-unknown-op": { color: syntax.ORB_COLORS.dark.error, textDecoration: "wavy underline" },
9863
+ "orb-op-arithmetic": { color: syntax.ORB_COLORS.dark.arithmetic, fontWeight: "bold" },
9864
+ "orb-op-comparison": { color: syntax.ORB_COLORS.dark.comparison },
9865
+ "orb-op-logic": { color: syntax.ORB_COLORS.dark.logic },
9866
+ "orb-op-string": { color: syntax.ORB_COLORS.dark.string },
9867
+ "orb-op-collection": { color: syntax.ORB_COLORS.dark.collection },
9868
+ "orb-op-time": { color: syntax.ORB_COLORS.dark.time },
9869
+ "orb-op-control": { color: syntax.ORB_COLORS.dark.control },
9870
+ "orb-op-async": { color: syntax.ORB_COLORS.dark.async }
9871
+ };
9872
+ var orbStyle = { ...dark__default.default, ...orbStyleOverrides };
9795
9873
  var CodeBlock = React117__namespace.default.memo(
9796
9874
  ({
9797
9875
  code: rawCode,
@@ -9802,6 +9880,8 @@ var CodeBlock = React117__namespace.default.memo(
9802
9880
  className
9803
9881
  }) => {
9804
9882
  const code = typeof rawCode === "string" ? rawCode : String(rawCode ?? "");
9883
+ const isOrb = language === "orb";
9884
+ const activeStyle = isOrb ? orbStyle : dark__default.default;
9805
9885
  const eventBus = useEventBus();
9806
9886
  const { t: _t } = useTranslate();
9807
9887
  const scrollRef = React117.useRef(null);
@@ -9881,7 +9961,7 @@ var CodeBlock = React117__namespace.default.memo(
9881
9961
  {
9882
9962
  PreTag: "div",
9883
9963
  language,
9884
- style: dark__default.default,
9964
+ style: activeStyle,
9885
9965
  customStyle: {
9886
9966
  backgroundColor: "transparent",
9887
9967
  borderRadius: 0,
@@ -28116,22 +28196,33 @@ function VerifyModePanel({
28116
28196
  }) {
28117
28197
  const scrollRef = React117__namespace.useRef(null);
28118
28198
  const prevCountRef = React117__namespace.useRef(0);
28199
+ const [walkStep, setWalkStep] = React117__namespace.useState(null);
28200
+ React117__namespace.useEffect(() => {
28201
+ const interval = setInterval(() => {
28202
+ const w = window;
28203
+ const step = w.__orbitalWalkStep;
28204
+ if (step) setWalkStep(step);
28205
+ }, 300);
28206
+ return () => clearInterval(interval);
28207
+ }, []);
28119
28208
  React117__namespace.useEffect(() => {
28120
28209
  if (transitions.length > prevCountRef.current && scrollRef.current) {
28121
28210
  scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
28122
28211
  }
28123
28212
  prevCountRef.current = transitions.length;
28124
28213
  }, [transitions.length]);
28125
- return /* @__PURE__ */ jsxRuntime.jsxs(
28214
+ const hudBottom = typeof document !== "undefined" ? document.getElementById("slot-hud-bottom") : null;
28215
+ const panel = /* @__PURE__ */ jsxRuntime.jsxs(
28126
28216
  "div",
28127
28217
  {
28128
28218
  className: cn(
28129
28219
  "runtime-debugger runtime-debugger--verify",
28130
- "fixed bottom-0 left-0 right-0 flex flex-col bg-gray-900 text-white border-t-2 border-cyan-500",
28220
+ "flex flex-col bg-gray-900 text-white border-t-2 border-cyan-500",
28221
+ hudBottom ? "" : "fixed bottom-0 left-0 right-0",
28131
28222
  className
28132
28223
  ),
28133
28224
  "data-testid": "debugger-verify",
28134
- style: { zIndex: 99999, height: "25vh" },
28225
+ style: { height: "25vh", zIndex: hudBottom ? void 0 : 40 },
28135
28226
  children: [
28136
28227
  /* @__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: [
28137
28228
  /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: failedChecks > 0 ? "danger" : "success", size: "sm", children: failedChecks > 0 ? `${failedChecks} fail` : "OK" }),
@@ -28145,10 +28236,35 @@ function VerifyModePanel({
28145
28236
  ] }),
28146
28237
  traitStates && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-cyan-400 truncate max-w-[400px]", children: traitStates })
28147
28238
  ] }),
28148
- /* @__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)) }) }) })
28239
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex overflow-hidden", children: [
28240
+ /* @__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)) }) }) }),
28241
+ 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: [
28242
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-cyan-400 font-bold mb-1", children: [
28243
+ "Walk Step ",
28244
+ walkStep.stepIndex,
28245
+ "/",
28246
+ walkStep.stepTotal
28247
+ ] }),
28248
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-300 mb-1", children: walkStep.traitName }),
28249
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 mb-1", children: [
28250
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-yellow-300", children: walkStep.from }),
28251
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: "--" }),
28252
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-green-300", children: walkStep.event }),
28253
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: "-->" }),
28254
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-yellow-300", children: walkStep.to })
28255
+ ] }),
28256
+ walkStep.guardCase && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: walkStep.guardCase === "pass" ? "text-green-400" : "text-red-400", children: [
28257
+ "guard: ",
28258
+ walkStep.guardCase
28259
+ ] }),
28260
+ walkStep.isRepositioning && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-500 italic", children: "repositioning" }),
28261
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: walkStep.accepted ? "text-green-400 mt-1" : "text-red-400 mt-1", children: walkStep.accepted ? "\u2713 accepted" : "\u2717 rejected" })
28262
+ ] })
28263
+ ] })
28149
28264
  ]
28150
28265
  }
28151
28266
  );
28267
+ return hudBottom ? reactDom.createPortal(panel, hudBottom) : panel;
28152
28268
  }
28153
28269
  function RuntimeDebugger({
28154
28270
  position = "bottom-right",
package/dist/runtime/index.js CHANGED
@@ -21,8 +21,25 @@ import ReactMarkdown from 'react-markdown';
21
21
  import remarkGfm from 'remark-gfm';
22
22
  import remarkMath from 'remark-math';
23
23
  import rehypeKatex from 'rehype-katex';
24
- import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism';
24
+ import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
25
25
  import dark from 'react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus';
26
+ import { orbLanguage, ORB_COLORS } from '@almadar/syntax';
27
+ import langJson from 'react-syntax-highlighter/dist/esm/languages/prism/json';
28
+ import langJavascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
29
+ import langTypescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';
30
+ import langJsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
31
+ import langTsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
32
+ import langCss from 'react-syntax-highlighter/dist/esm/languages/prism/css';
33
+ import langMarkdown from 'react-syntax-highlighter/dist/esm/languages/prism/markdown';
34
+ import langBash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
35
+ import langYaml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml';
36
+ import langRust from 'react-syntax-highlighter/dist/esm/languages/prism/rust';
37
+ import langPython from 'react-syntax-highlighter/dist/esm/languages/prism/python';
38
+ import langSql from 'react-syntax-highlighter/dist/esm/languages/prism/sql';
39
+ import langDiff from 'react-syntax-highlighter/dist/esm/languages/prism/diff';
40
+ import langToml from 'react-syntax-highlighter/dist/esm/languages/prism/toml';
41
+ import langGo from 'react-syntax-highlighter/dist/esm/languages/prism/go';
42
+ import langGraphql from 'react-syntax-highlighter/dist/esm/languages/prism/graphql';
26
43
 
27
44
  var __defProp = Object.defineProperty;
28
45
  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -9762,6 +9779,51 @@ var MarkdownContent = React117__default.memo(
9762
9779
  (prev, next) => prev.content === next.content && prev.className === next.className && prev.direction === next.direction
9763
9780
  );
9764
9781
  MarkdownContent.displayName = "MarkdownContent";
9782
+ SyntaxHighlighter.registerLanguage("json", langJson);
9783
+ SyntaxHighlighter.registerLanguage("javascript", langJavascript);
9784
+ SyntaxHighlighter.registerLanguage("js", langJavascript);
9785
+ SyntaxHighlighter.registerLanguage("typescript", langTypescript);
9786
+ SyntaxHighlighter.registerLanguage("ts", langTypescript);
9787
+ SyntaxHighlighter.registerLanguage("jsx", langJsx);
9788
+ SyntaxHighlighter.registerLanguage("tsx", langTsx);
9789
+ SyntaxHighlighter.registerLanguage("css", langCss);
9790
+ SyntaxHighlighter.registerLanguage("markdown", langMarkdown);
9791
+ SyntaxHighlighter.registerLanguage("md", langMarkdown);
9792
+ SyntaxHighlighter.registerLanguage("bash", langBash);
9793
+ SyntaxHighlighter.registerLanguage("shell", langBash);
9794
+ SyntaxHighlighter.registerLanguage("sh", langBash);
9795
+ SyntaxHighlighter.registerLanguage("yaml", langYaml);
9796
+ SyntaxHighlighter.registerLanguage("yml", langYaml);
9797
+ SyntaxHighlighter.registerLanguage("rust", langRust);
9798
+ SyntaxHighlighter.registerLanguage("python", langPython);
9799
+ SyntaxHighlighter.registerLanguage("py", langPython);
9800
+ SyntaxHighlighter.registerLanguage("sql", langSql);
9801
+ SyntaxHighlighter.registerLanguage("diff", langDiff);
9802
+ SyntaxHighlighter.registerLanguage("toml", langToml);
9803
+ SyntaxHighlighter.registerLanguage("go", langGo);
9804
+ SyntaxHighlighter.registerLanguage("graphql", langGraphql);
9805
+ SyntaxHighlighter.registerLanguage("orb", orbLanguage);
9806
+ var orbStyleOverrides = {
9807
+ "orb-binding": { color: ORB_COLORS.dark.binding, fontWeight: "bold" },
9808
+ "orb-effect": { color: ORB_COLORS.dark.effect, fontWeight: "bold" },
9809
+ "orb-event": { color: ORB_COLORS.dark.event },
9810
+ "orb-slot": { color: ORB_COLORS.dark.uiSlot },
9811
+ "orb-structural": { color: ORB_COLORS.dark.structural },
9812
+ "orb-field-type": { color: ORB_COLORS.dark.fieldType },
9813
+ "orb-persistence": { color: ORB_COLORS.dark.persistence },
9814
+ "orb-pattern": { color: ORB_COLORS.dark.pattern },
9815
+ "orb-behavior": { color: ORB_COLORS.dark.behavior },
9816
+ "orb-unknown-op": { color: ORB_COLORS.dark.error, textDecoration: "wavy underline" },
9817
+ "orb-op-arithmetic": { color: ORB_COLORS.dark.arithmetic, fontWeight: "bold" },
9818
+ "orb-op-comparison": { color: ORB_COLORS.dark.comparison },
9819
+ "orb-op-logic": { color: ORB_COLORS.dark.logic },
9820
+ "orb-op-string": { color: ORB_COLORS.dark.string },
9821
+ "orb-op-collection": { color: ORB_COLORS.dark.collection },
9822
+ "orb-op-time": { color: ORB_COLORS.dark.time },
9823
+ "orb-op-control": { color: ORB_COLORS.dark.control },
9824
+ "orb-op-async": { color: ORB_COLORS.dark.async }
9825
+ };
9826
+ var orbStyle = { ...dark, ...orbStyleOverrides };
9765
9827
  var CodeBlock = React117__default.memo(
9766
9828
  ({
9767
9829
  code: rawCode,
@@ -9772,6 +9834,8 @@ var CodeBlock = React117__default.memo(
9772
9834
  className
9773
9835
  }) => {
9774
9836
  const code = typeof rawCode === "string" ? rawCode : String(rawCode ?? "");
9837
+ const isOrb = language === "orb";
9838
+ const activeStyle = isOrb ? orbStyle : dark;
9775
9839
  const eventBus = useEventBus();
9776
9840
  const { t: _t } = useTranslate();
9777
9841
  const scrollRef = useRef(null);
@@ -9851,7 +9915,7 @@ var CodeBlock = React117__default.memo(
9851
9915
  {
9852
9916
  PreTag: "div",
9853
9917
  language,
9854
- style: dark,
9918
+ style: activeStyle,
9855
9919
  customStyle: {
9856
9920
  backgroundColor: "transparent",
9857
9921
  borderRadius: 0,
@@ -28086,22 +28150,33 @@ function VerifyModePanel({
28086
28150
  }) {
28087
28151
  const scrollRef = React117.useRef(null);
28088
28152
  const prevCountRef = React117.useRef(0);
28153
+ const [walkStep, setWalkStep] = React117.useState(null);
28154
+ React117.useEffect(() => {
28155
+ const interval = setInterval(() => {
28156
+ const w = window;
28157
+ const step = w.__orbitalWalkStep;
28158
+ if (step) setWalkStep(step);
28159
+ }, 300);
28160
+ return () => clearInterval(interval);
28161
+ }, []);
28089
28162
  React117.useEffect(() => {
28090
28163
  if (transitions.length > prevCountRef.current && scrollRef.current) {
28091
28164
  scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
28092
28165
  }
28093
28166
  prevCountRef.current = transitions.length;
28094
28167
  }, [transitions.length]);
28095
- return /* @__PURE__ */ jsxs(
28168
+ const hudBottom = typeof document !== "undefined" ? document.getElementById("slot-hud-bottom") : null;
28169
+ const panel = /* @__PURE__ */ jsxs(
28096
28170
  "div",
28097
28171
  {
28098
28172
  className: cn(
28099
28173
  "runtime-debugger runtime-debugger--verify",
28100
- "fixed bottom-0 left-0 right-0 flex flex-col bg-gray-900 text-white border-t-2 border-cyan-500",
28174
+ "flex flex-col bg-gray-900 text-white border-t-2 border-cyan-500",
28175
+ hudBottom ? "" : "fixed bottom-0 left-0 right-0",
28101
28176
  className
28102
28177
  ),
28103
28178
  "data-testid": "debugger-verify",
28104
- style: { zIndex: 99999, height: "25vh" },
28179
+ style: { height: "25vh", zIndex: hudBottom ? void 0 : 40 },
28105
28180
  children: [
28106
28181
  /* @__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: [
28107
28182
  /* @__PURE__ */ jsx(Badge, { variant: failedChecks > 0 ? "danger" : "success", size: "sm", children: failedChecks > 0 ? `${failedChecks} fail` : "OK" }),
@@ -28115,10 +28190,35 @@ function VerifyModePanel({
28115
28190
  ] }),
28116
28191
  traitStates && /* @__PURE__ */ jsx("span", { className: "text-cyan-400 truncate max-w-[400px]", children: traitStates })
28117
28192
  ] }),
28118
- /* @__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)) }) }) })
28193
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 flex overflow-hidden", children: [
28194
+ /* @__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)) }) }) }),
28195
+ 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: [
28196
+ /* @__PURE__ */ jsxs("div", { className: "text-cyan-400 font-bold mb-1", children: [
28197
+ "Walk Step ",
28198
+ walkStep.stepIndex,
28199
+ "/",
28200
+ walkStep.stepTotal
28201
+ ] }),
28202
+ /* @__PURE__ */ jsx("div", { className: "text-gray-300 mb-1", children: walkStep.traitName }),
28203
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 mb-1", children: [
28204
+ /* @__PURE__ */ jsx("span", { className: "text-yellow-300", children: walkStep.from }),
28205
+ /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: "--" }),
28206
+ /* @__PURE__ */ jsx("span", { className: "text-green-300", children: walkStep.event }),
28207
+ /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: "-->" }),
28208
+ /* @__PURE__ */ jsx("span", { className: "text-yellow-300", children: walkStep.to })
28209
+ ] }),
28210
+ walkStep.guardCase && /* @__PURE__ */ jsxs("div", { className: walkStep.guardCase === "pass" ? "text-green-400" : "text-red-400", children: [
28211
+ "guard: ",
28212
+ walkStep.guardCase
28213
+ ] }),
28214
+ walkStep.isRepositioning && /* @__PURE__ */ jsx("div", { className: "text-gray-500 italic", children: "repositioning" }),
28215
+ /* @__PURE__ */ jsx("div", { className: walkStep.accepted ? "text-green-400 mt-1" : "text-red-400 mt-1", children: walkStep.accepted ? "\u2713 accepted" : "\u2717 rejected" })
28216
+ ] })
28217
+ ] })
28119
28218
  ]
28120
28219
  }
28121
28220
  );
28221
+ return hudBottom ? createPortal(panel, hudBottom) : panel;
28122
28222
  }
28123
28223
  function RuntimeDebugger({
28124
28224
  position = "bottom-right",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@almadar/ui",
3
- "version": "2.36.0",
3
+ "version": "2.38.0",
4
4
  "description": "React UI components, hooks, and providers for Almadar",
5
5
  "type": "module",
6
6
  "main": "./dist/components/index.js",
@@ -120,9 +120,9 @@
120
120
  "dependencies": {
121
121
  "@almadar/core": ">=2.6.3",
122
122
  "@almadar/evaluator": ">=2.5.4",
123
- "@almadar/patterns": ">=2.8.7",
124
- "@almadar/std": ">=3.6.0",
125
- "@almadar/syntax": ">=1.0.0",
123
+ "@almadar/patterns": ">=2.10.0",
124
+ "@almadar/std": ">=3.7.0",
125
+ "@almadar/syntax": ">=1.1.0",
126
126
  "@almadar/runtime": ">=2.0.0",
127
127
  "@xyflow/react": "12.10.1",
128
128
  "clsx": "^2.1.0",
package/dist/components/organisms/avl/TransitionPanel.d.ts DELETED
@@ -1,20 +0,0 @@
1
- /**
2
- * TransitionPanel
3
- *
4
- * Shows the .orb transition details for a selected node in FlowCanvas.
5
- * Built entirely with AVL primitives (AvlState, AvlEvent, AvlGuard,
6
- * AvlEffect, AvlFieldType) so the developer learns the visual language
7
- * while reading the code behind a screen.
8
- *
9
- * Renders in a side panel that appears when a node is clicked at Level 2.
10
- */
11
- import React from 'react';
12
- import type { PreviewNodeData } from '../../molecules/avl/avl-preview-types';
13
- export interface TransitionPanelProps {
14
- node: PreviewNodeData;
15
- onClose: () => void;
16
- }
17
- export declare function TransitionPanel({ node, onClose }: TransitionPanelProps): React.ReactElement;
18
- export declare namespace TransitionPanel {
19
- var displayName: string;
20
- }