@almadar/ui 6.53.0 → 6.54.0

package/dist/avl/index.cjs

@@ -17,6 +17,7 @@ var ui = require('@almadar/runtime/ui');
 var SyntaxHighlighter = require('react-syntax-highlighter/dist/esm/prism-light.js');
 var createHighlightElement = require('react-syntax-highlighter/dist/esm/create-element.js');
 var dark = require('react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus.js');
+var light = require('react-syntax-highlighter/dist/esm/styles/prism/vs.js');
 var syntax = require('@almadar/syntax');
 var i18n = require('@almadar/core/i18n');
 var langJson = require('react-syntax-highlighter/dist/esm/languages/prism/json.js');
@@ -103,6 +104,7 @@ var LucideIcons2__namespace = /*#__PURE__*/_interopNamespace(LucideIcons2);
 var SyntaxHighlighter__default = /*#__PURE__*/_interopDefault(SyntaxHighlighter);
 var createHighlightElement__default = /*#__PURE__*/_interopDefault(createHighlightElement);
 var dark__default = /*#__PURE__*/_interopDefault(dark);
+var light__default = /*#__PURE__*/_interopDefault(light);
 var langJson__default = /*#__PURE__*/_interopDefault(langJson);
 var langJavascript__default = /*#__PURE__*/_interopDefault(langJavascript);
 var langTypescript__default = /*#__PURE__*/_interopDefault(langTypescript);
@@ -480,6 +482,7 @@ var init_avl_theme = __esm({
       "std-json": avlBlend("var(--color-success)", 60, "var(--color-foreground)"),
       "std-time": avlBlend("var(--color-info)", 50, "var(--color-success)"),
       "std-format": avlBlend("var(--color-success)", 60, "var(--color-background)"),
+      "std-i18n": avlBlend("var(--color-info)", 60, "var(--color-background)"),
       "std-async": avlBlend("var(--color-accent)", 50, "var(--color-error)"),
       "std-nn": avlBlend("var(--color-primary)", 60, "var(--color-accent)"),
       "std-tensor": avlBlend("var(--color-primary)", 60, "var(--color-info)"),
@@ -3632,6 +3635,7 @@ var init_en = __esm({
       "status.draft": "Draft",
       "status.archived": "Archived",
       "error.generic": "Something went wrong",
+      "error.traitMountFailed": "{{trait}} failed to start",
       "error.retry": "Try again",
       "error.notFound": "Not found",
       "error.loadFailed": "Failed to load: {{message}}",
@@ -4800,7 +4804,9 @@ var init_en = __esm({
       "agentActivity.llmToolCalls": "Tool calls",
       "agentActivity.showRawLlm": "Raw LLM",
       "agentActivity.earlierConversations": "Earlier conversations ({{count}})",
-      "agentActivity.earlierActivity": "Earlier activity"
+      "agentActivity.earlierActivity": "Earlier activity",
+      "tabs.scrollStart": "Scroll tabs back",
+      "tabs.scrollEnd": "Scroll tabs forward"
     };
   }
 });
@@ -7344,7 +7350,7 @@ var init_Button = __esm({
         const testId = dataTestId ?? (action ? `action-${action}` : void 0);
         const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           busy && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "almadar-busy-indicator absolute inset-0 flex items-center justify-center", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.Loader2, { className: "h-icon-default w-icon-default animate-spin" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("inline-flex items-center justify-center gap-2", busy && "almadar-busy-content"), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("inline-flex flex-1 min-w-0 items-center [justify-content:inherit] gap-2", busy && "almadar-busy-content"), children: [
             resolvedLeftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: resolvedLeftIcon }),
             (Array.isArray(children) ? children.length > 0 : Boolean(children)) ? children : label ? /* @__PURE__ */ jsxRuntime.jsx("span", { ...{ [INLINE_TEXT_ATTR]: "label" }, children: label }) : label,
             resolvedRightIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: resolvedRightIcon })
@@ -13356,12 +13362,13 @@ var init_Skeleton = __esm({
     Skeleton.displayName = "Skeleton";
   }
 });
-function resolveMarkerExpression(expression, entity, config, state) {
+function resolveMarkerExpression(expression, entity, config, state, i18n) {
   const ctx = runtime.createContextFromBindings({
     entity,
     payload: {},
     state,
-    ...config !== void 0 ? { config } : {}
+    ...config !== void 0 ? { config } : {},
+    ...i18n !== void 0 ? { locale: i18n.locale, messages: i18n.messages } : {}
   });
   return runtime.interpolateValue(expression, ctx);
 }
@@ -13373,9 +13380,9 @@ function isPlainObject(value) {
   if (typeof value === "function") return false;
   return true;
 }
-function cachedContainer(value, scopeTrait, entity, config, state) {
+function cachedContainer(value, scopeTrait, entity, config, state, i18n) {
   const hit = containerResolutionCache.get(value);
-  return hit !== void 0 && hit.entity === entity && hit.config === config && hit.state === state && hit.scopeTrait === scopeTrait ? hit.resolved : void 0;
+  return hit !== void 0 && hit.entity === entity && hit.config === config && hit.state === state && hit.i18n === i18n && hit.scopeTrait === scopeTrait ? hit.resolved : void 0;
 }
 function isEvaluatorResolvedData(value) {
   return evaluatorResolvedData.has(value);
@@ -13406,14 +13413,14 @@ function subtreeHasMarker(value) {
   markerPresenceCache.set(value, found);
   return found;
 }
-function walkValue(value, scopeTrait, entity, config, state) {
+function walkValue(value, scopeTrait, entity, config, state, i18n) {
   if (core.isRenderBindingMarker(value)) {
     const cached = markerResolutionCache.get(value);
-    if (cached !== void 0 && cached.entity === entity && cached.config === config && cached.state === state) {
+    if (cached !== void 0 && cached.entity === entity && cached.config === config && cached.state === state && cached.i18n === i18n) {
       return { resolved: cached.resolved, changed: true };
     }
-    const resolved = resolveMarkerExpression(value.expression, entity, config, state);
-    markerResolutionCache.set(value, { entity, config, state, resolved });
+    const resolved = resolveMarkerExpression(value.expression, entity, config, state, i18n);
+    markerResolutionCache.set(value, { entity, config, state, i18n, resolved });
     if (resolved !== null && typeof resolved === "object" && !React93__namespace.default.isValidElement(resolved) && !(resolved instanceof Date)) {
       resolvedMarkerFree.add(resolved);
       evaluatorResolvedData.add(resolved);
@@ -13425,14 +13432,14 @@ function walkValue(value, scopeTrait, entity, config, state) {
       brandResolved(value);
       return { resolved: value, changed: false };
     }
-    const cachedArray = cachedContainer(value, scopeTrait, entity, config, state);
+    const cachedArray = cachedContainer(value, scopeTrait, entity, config, state, i18n);
     if (cachedArray !== void 0) return { resolved: cachedArray, changed: true };
     const out = [];
     let changed = false;
     for (const item of value) {
       const element = item;
       const wasMarker = core.isRenderBindingMarker(element);
-      const { resolved, changed: itemChanged } = walkValue(element, scopeTrait, entity, config, state);
+      const { resolved, changed: itemChanged } = walkValue(element, scopeTrait, entity, config, state, i18n);
       if (wasMarker && Array.isArray(resolved)) {
         out.push(...resolved);
         changed = true;
@@ -13443,7 +13450,7 @@ function walkValue(value, scopeTrait, entity, config, state) {
     }
     brandResolved(out);
     if (!changed) return { resolved: value, changed: false };
-    containerResolutionCache.set(value, { entity, config, state, scopeTrait, resolved: out });
+    containerResolutionCache.set(value, { entity, config, state, i18n, scopeTrait, resolved: out });
     return { resolved: out, changed: true };
   }
   if (isPlainObject(value)) {
@@ -13455,37 +13462,37 @@ function walkValue(value, scopeTrait, entity, config, state) {
     if (typeof sourceTrait === "string" && sourceTrait !== scopeTrait) {
       return { resolved: value, changed: false };
     }
-    const cachedObject = cachedContainer(value, scopeTrait, entity, config, state);
+    const cachedObject = cachedContainer(value, scopeTrait, entity, config, state, i18n);
     if (cachedObject !== void 0) return { resolved: cachedObject, changed: true };
     const out = {};
     let changed = false;
     for (const [key, item] of Object.entries(value)) {
-      const { resolved, changed: itemChanged } = walkValue(item, scopeTrait, entity, config, state);
+      const { resolved, changed: itemChanged } = walkValue(item, scopeTrait, entity, config, state, i18n);
       out[key] = resolved;
       if (itemChanged) changed = true;
     }
     brandResolved(out);
     if (!changed) return { resolved: value, changed: false };
-    containerResolutionCache.set(value, { entity, config, state, scopeTrait, resolved: out });
+    containerResolutionCache.set(value, { entity, config, state, i18n, scopeTrait, resolved: out });
     return { resolved: out, changed: true };
   }
   return { resolved: value, changed: false };
 }
-function resolveRenderBindingMarkers(props, scopeTrait, entity, config, state) {
+function resolveRenderBindingMarkers(props, scopeTrait, entity, config, state, i18n) {
   if (props === null || typeof props !== "object") return props;
   if (resolvedMarkerFree.has(props)) return props;
-  const cached = cachedContainer(props, scopeTrait, entity, config, state);
+  const cached = cachedContainer(props, scopeTrait, entity, config, state, i18n);
   if (cached !== void 0) return cached;
   const out = {};
   let changed = false;
   for (const [key, value] of Object.entries(props)) {
-    const { resolved, changed: propChanged } = walkValue(value, scopeTrait, entity, config, state);
+    const { resolved, changed: propChanged } = walkValue(value, scopeTrait, entity, config, state, i18n);
     out[key] = resolved;
     if (propChanged) changed = true;
   }
   brandResolved(out);
   if (!changed) return props;
-  containerResolutionCache.set(props, { entity, config, state, scopeTrait, resolved: out });
+  containerResolutionCache.set(props, { entity, config, state, i18n, scopeTrait, resolved: out });
   return out;
 }
 var markerPresenceCache, markerResolutionCache, containerResolutionCache, resolvedMarkerFree, evaluatorResolvedData;
@@ -15282,6 +15289,7 @@ var init_Tabs = __esm({
     init_Badge();
     init_Typography();
     init_Box();
+    init_Button();
     init_cn();
     init_useEventBus();
     init_domPassthrough();
@@ -15313,6 +15321,28 @@ var init_Tabs = __esm({
       const uid = React93.useId();
       const tabId = (id) => `${uid}-tab-${id}`;
       const panelId = (id) => `${uid}-panel-${id}`;
+      const laneRef = React93.useRef(null);
+      const [hidden, setHidden] = React93.useState({ start: false, end: false });
+      const measure = React93.useCallback(() => {
+        const lane = laneRef.current;
+        if (!lane || orientation !== "horizontal") return;
+        const max = lane.scrollWidth - lane.clientWidth;
+        const start = max > 1 && lane.scrollLeft > 1;
+        const end = max > 1 && lane.scrollLeft < max - 1;
+        setHidden((prev) => prev.start === start && prev.end === end ? prev : { start, end });
+      }, [orientation]);
+      React93.useLayoutEffect(() => {
+        measure();
+        const lane = laneRef.current;
+        if (!lane || typeof ResizeObserver === "undefined") return void 0;
+        const observer2 = new ResizeObserver(measure);
+        observer2.observe(lane);
+        return () => observer2.disconnect();
+      }, [measure, rawItems.length]);
+      const scrollLane = (direction) => {
+        const lane = laneRef.current;
+        if (lane) lane.scrollBy({ left: direction * lane.clientWidth * 0.8, behavior: "smooth" });
+      };
       const handleTabChange = (tabId2, tabEvent) => {
         if (controlledActiveTab === void 0) {
           setInternalActiveTab(tabId2);
@@ -15369,62 +15399,97 @@ var init_Tabs = __esm({
           "data-[active=true]:border-primary"
         ].join(" ")
       };
-      return /* @__PURE__ */ jsxRuntime.jsxs(Box, { ...domPassthrough(rest), className: cn("w-full", orientation === "vertical" && "flex flex-row", className), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Box,
-          {
-            role: "tablist",
-            "aria-orientation": orientation,
-            className: cn(
-              "flex",
-              // Horizontal tab strip becomes a horizontally-scrollable lane
-              // below its container width — phones with many tabs scroll
-              // instead of clipping. `snap-x` snaps to each tab; the
-              // scrollbar is hidden for a cleaner affordance (the swipe
-              // gesture is the discoverability cue).
-              orientation === "horizontal" ? "flex-row border-b-[length:var(--border-width)] border-border overflow-x-auto snap-x snap-mandatory [&::-webkit-scrollbar]:hidden" : "flex-col border-r-[length:var(--border-width)] border-border",
-              variant === "pills" && "gap-1 p-1 bg-muted border-0 rounded-interactive",
-              variant === "underline" && orientation === "vertical" && "border-b-0"
-            ),
-            children: safeItems.map((item, index) => {
-              const isActive = item.id === activeTab;
-              const isDisabled = item.disabled;
-              return /* @__PURE__ */ jsxRuntime.jsxs(
-                Box,
-                {
-                  as: "button",
-                  ref: (el) => {
-                    tabRefs.current[item.id] = el;
-                  },
-                  id: tabId(item.id),
-                  role: "tab",
-                  "aria-selected": isActive,
-                  "aria-controls": isActive ? panelId(item.id) : void 0,
-                  "aria-disabled": isDisabled,
-                  tabIndex: isActive ? 0 : -1,
-                  onClick: () => !isDisabled && handleTabChange(item.id, item.event),
-                  onKeyDown: (e) => handleKeyDown(e, index),
-                  "data-active": isActive,
-                  "data-testid": `tab-${item.id}`,
-                  className: cn(
-                    "flex items-center gap-2 px-4 py-2 text-sm font-medium transition-colors whitespace-nowrap",
-                    orientation === "horizontal" && "snap-start shrink-0",
-                    "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-                    isDisabled && "opacity-50 cursor-not-allowed",
-                    variantClasses2[variant],
-                    isActive ? variant === "pills" ? "text-primary-foreground" : "text-foreground" : "text-muted-foreground hover:text-foreground"
-                  ),
-                  children: [
-                    item.iconAsset?.url ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: item.iconAsset.url, alt: item.iconAsset.name ?? item.iconAsset.category ?? "", width: 16, height: 16, style: { imageRendering: "pixelated", objectFit: "contain", width: 16, height: 16 }, className: "flex-shrink-0" }) : item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: item.icon, size: "sm" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: item.icon, size: "sm" })),
-                    /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "!text-inherit", children: item.label }),
-                    item.badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "default", size: "sm", children: item.badge })
-                  ]
+      const tablist = /* @__PURE__ */ jsxRuntime.jsx(
+        Box,
+        {
+          ref: laneRef,
+          role: "tablist",
+          "aria-orientation": orientation,
+          onScroll: measure,
+          "data-scroll-affordance": hidden.start || hidden.end ? "true" : void 0,
+          className: cn(
+            "flex",
+            // Horizontal tab strip becomes a horizontally-scrollable lane
+            // below its container width — phones with many tabs scroll
+            // instead of clipping. `snap-x` snaps to each tab; the
+            // scrollbar is hidden — the edge chevrons are the affordance.
+            orientation === "horizontal" ? "flex-row border-b-[length:var(--border-width)] border-border overflow-x-auto snap-x snap-mandatory [&::-webkit-scrollbar]:hidden" : "flex-col border-r-[length:var(--border-width)] border-border",
+            variant === "pills" && "gap-1 p-1 bg-muted border-0 rounded-interactive",
+            variant === "underline" && orientation === "vertical" && "border-b-0"
+          ),
+          children: safeItems.map((item, index) => {
+            const isActive = item.id === activeTab;
+            const isDisabled = item.disabled;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              Box,
+              {
+                as: "button",
+                ref: (el) => {
+                  tabRefs.current[item.id] = el;
                 },
-                item.id
-              );
-            })
-          }
-        ),
+                id: tabId(item.id),
+                role: "tab",
+                "aria-selected": isActive,
+                "aria-controls": isActive ? panelId(item.id) : void 0,
+                "aria-disabled": isDisabled,
+                tabIndex: isActive ? 0 : -1,
+                onClick: () => !isDisabled && handleTabChange(item.id, item.event),
+                onKeyDown: (e) => handleKeyDown(e, index),
+                "data-active": isActive,
+                "data-testid": `tab-${item.id}`,
+                className: cn(
+                  "flex items-center gap-2 px-4 py-2 text-sm font-medium transition-colors whitespace-nowrap",
+                  orientation === "horizontal" && "snap-start shrink-0",
+                  "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                  isDisabled && "opacity-50 cursor-not-allowed",
+                  variantClasses2[variant],
+                  isActive ? variant === "pills" ? "text-primary-foreground" : "text-foreground" : "text-muted-foreground hover:text-foreground"
+                ),
+                children: [
+                  item.iconAsset?.url ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: item.iconAsset.url, alt: item.iconAsset.name ?? item.iconAsset.category ?? "", width: 16, height: 16, style: { imageRendering: "pixelated", objectFit: "contain", width: 16, height: 16 }, className: "flex-shrink-0" }) : item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: item.icon, size: "sm" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: item.icon, size: "sm" })),
+                  /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "!text-inherit", children: item.label }),
+                  item.badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "default", size: "sm", children: item.badge })
+                ]
+              },
+              item.id
+            );
+          })
+        }
+      );
+      return /* @__PURE__ */ jsxRuntime.jsxs(Box, { ...domPassthrough(rest), className: cn("w-full", orientation === "vertical" && "flex flex-row", className), children: [
+        orientation === "horizontal" ? /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "relative", children: [
+          tablist,
+          hidden.start && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "pointer-events-none absolute inset-y-0 start-0 w-10 bg-gradient-to-r from-[var(--color-background)] to-transparent rtl:bg-gradient-to-l" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                leftIcon: "chevron-left",
+                "aria-label": t("tabs.scrollStart"),
+                "data-testid": "tabs-scroll-start",
+                className: "absolute start-0 top-1/2 -translate-y-1/2 px-1 rtl:rotate-180",
+                onClick: () => scrollLane(-1)
+              }
+            )
+          ] }),
+          hidden.end && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "pointer-events-none absolute inset-y-0 end-0 w-10 bg-gradient-to-l from-[var(--color-background)] to-transparent rtl:bg-gradient-to-r" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                leftIcon: "chevron-right",
+                "aria-label": t("tabs.scrollEnd"),
+                "data-testid": "tabs-scroll-end",
+                className: "absolute end-0 top-1/2 -translate-y-1/2 px-1 rtl:rotate-180",
+                onClick: () => scrollLane(1)
+              }
+            )
+          ] })
+        ] }) : tablist,
         activeTabContent !== void 0 && activeTabContent !== null && /* @__PURE__ */ jsxRuntime.jsx(
           Box,
           {
@@ -16635,6 +16700,35 @@ function withTokenTypes(node) {
 function renderWithTokenTypes({ rows, stylesheet, useInlineStyles }) {
   return rows.map((node, i) => createHighlightElement__default.default({ node: withTokenTypes(node), stylesheet, useInlineStyles, key: `code-segment-${i}` }));
 }
+function island(value, style) {
+  return { type: "element", tagName: "span", properties: { className: [], "data-bidi-island": "", style }, children: [{ type: "text", value }] };
+}
+function splitLtrWords(value) {
+  const out = [];
+  let last = 0;
+  for (const match of value.matchAll(LTR_WORD)) {
+    const start = match.index ?? 0;
+    if (start > last) out.push({ type: "text", value: value.slice(last, start) });
+    out.push(island(match[0], LTR_ISLAND_STYLE));
+    last = start + match[0].length;
+  }
+  if (last < value.length) out.push({ type: "text", value: value.slice(last) });
+  return out;
+}
+function withBidiIslands(node) {
+  if (node.type === "text") return splitLtrWords(String(node.value ?? ""));
+  if (node.type !== "element") return [node];
+  const classes = node.properties?.className;
+  if (Array.isArray(classes) && classes.includes("string")) {
+    return [{ ...node, properties: { ...node.properties, className: classes, "data-bidi-island": "", style: STRING_ISLAND_STYLE } }];
+  }
+  return [{ ...node, ...node.children ? { children: node.children.flatMap(withBidiIslands) } : {} }];
+}
+function renderRtlCode({ rows, stylesheet, useInlineStyles }) {
+  return rows.map(
+    (node, i) => withBidiIslands(node).map((n, j) => createHighlightElement__default.default({ node: n, stylesheet, useInlineStyles, key: `code-rtl-${i}-${j}` }))
+  );
+}
 function tokenClassAt(layer, offset) {
   const walker = document.createTreeWalker(layer, NodeFilter.SHOW_TEXT);
   let pos = 0;
@@ -16691,10 +16785,9 @@ function useLanguageReady(language) {
   }, [language]);
   return ready;
 }
-function resolveHighlightStyle(lang) {
-  if (lang === "orb") return orbStyle;
-  if (lang === "lolo") return loloStyle;
-  return dark__default.default;
+function resolveHighlightStyle(lang, scheme) {
+  if (lang === "orb" || lang === "lolo") return HIGHLIGHT_STYLES[scheme][lang];
+  return SCHEME_BASE[scheme];
 }
 function plainCodeColorOf(style) {
   return style['code[class*="language-"]']?.color ?? "#d4d4d4";
@@ -16729,7 +16822,7 @@ function translateProgram(source, language, lang) {
   }
   return source;
 }
-var dynamicallyLoaded, codeLanguageLoader, orbStyleOverrides, orbStyle, loloStyleOverrides, loloStyle, MONO_EDITOR_FONT, GHOST_COLOR, GUTTER_COLOR, caretOf, DIAGNOSTIC_ERROR_COLOR, DIAGNOSTIC_WARNING_COLOR, EDITOR_LINE_PX, log5, CODE_LANGUAGES, CODE_LANGUAGE_SET, DIFF_STYLES, DIFF_STYLE_FALLBACK, LINE_PROPS_FN, HIDDEN_LINE_NUMBERS, HIGHLIGHT_CAPACITY_BYTES, MONO_FONT_FAMILY, VIEWER_LINE_NUMBER_STYLE, CodeBlock;
+var dynamicallyLoaded, codeLanguageLoader, orbStyleOverrides, loloStyleOverrides, SCHEME_BASE, HIGHLIGHT_STYLES, MONO_EDITOR_FONT, GHOST_COLOR, GUTTER_COLOR, caretOf, LTR_WORD, LTR_ISLAND_STYLE, STRING_ISLAND_STYLE, DIAGNOSTIC_ERROR_COLOR, DIAGNOSTIC_WARNING_COLOR, EDITOR_LINE_PX, log5, CODE_LANGUAGES, CODE_LANGUAGE_SET, DIFF_STYLES, DIFF_STYLE_FALLBACK, LINE_PROPS_FN, HIDDEN_LINE_NUMBERS, HIGHLIGHT_CAPACITY_BYTES, MONO_FONT_FAMILY, VIEWER_LINE_NUMBER_STYLE, VIEWER_LINE_NUMBER_STYLE_RTL, CodeBlock;
 var init_CodeBlock = __esm({
   "components/core/molecules/markdown/CodeBlock.tsx"() {
     init_cn();
@@ -16832,52 +16925,64 @@ var init_CodeBlock = __esm({
     SyntaxHighlighter__default.default.registerLanguage("lolo", syntax.loloLanguage);
     dynamicallyLoaded = /* @__PURE__ */ new Set();
     codeLanguageLoader = null;
-    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 }
-    };
-    orbStyle = { ...dark__default.default, ...orbStyleOverrides };
-    loloStyleOverrides = {
-      "lolo-binding": { color: syntax.ORB_COLORS.dark.binding, fontWeight: "bold" },
-      "lolo-event": { color: syntax.ORB_COLORS.dark.event },
-      "lolo-effect": { color: syntax.ORB_COLORS.dark.effect, fontWeight: "bold" },
-      "keyword": { color: syntax.ORB_COLORS.dark.loloKeyword },
-      "lolo-constructor": { color: syntax.ORB_COLORS.dark.loloConstructor },
-      "lolo-arrow": { color: syntax.ORB_COLORS.dark.loloArrow },
-      "lolo-reference": { color: syntax.ORB_COLORS.dark.loloReference },
-      "lolo-type": { color: syntax.ORB_COLORS.dark.fieldType },
-      "lolo-persistence": { color: syntax.ORB_COLORS.dark.persistence },
-      "lolo-unknown-op": { color: syntax.ORB_COLORS.dark.error },
-      "lolo-op-arithmetic": { color: syntax.ORB_COLORS.dark.arithmetic, fontWeight: "bold" },
-      "lolo-op-comparison": { color: syntax.ORB_COLORS.dark.comparison },
-      "lolo-op-logic": { color: syntax.ORB_COLORS.dark.logic },
-      "lolo-op-string": { color: syntax.ORB_COLORS.dark.string },
-      "lolo-op-collection": { color: syntax.ORB_COLORS.dark.collection },
-      "lolo-op-time": { color: syntax.ORB_COLORS.dark.time },
-      "lolo-op-control": { color: syntax.ORB_COLORS.dark.control },
-      "lolo-op-async": { color: syntax.ORB_COLORS.dark.async }
-    };
-    loloStyle = { ...dark__default.default, ...loloStyleOverrides };
+    orbStyleOverrides = (c) => ({
+      "orb-binding": { color: c.binding, fontWeight: "bold" },
+      "orb-effect": { color: c.effect, fontWeight: "bold" },
+      "orb-event": { color: c.event },
+      "orb-slot": { color: c.uiSlot },
+      "orb-structural": { color: c.structural },
+      "orb-field-type": { color: c.fieldType },
+      "orb-persistence": { color: c.persistence },
+      "orb-pattern": { color: c.pattern },
+      "orb-behavior": { color: c.behavior },
+      "orb-unknown-op": { color: c.error, textDecoration: "wavy underline" },
+      "orb-op-arithmetic": { color: c.arithmetic, fontWeight: "bold" },
+      "orb-op-comparison": { color: c.comparison },
+      "orb-op-logic": { color: c.logic },
+      "orb-op-string": { color: c.string },
+      "orb-op-collection": { color: c.collection },
+      "orb-op-time": { color: c.time },
+      "orb-op-control": { color: c.control },
+      "orb-op-async": { color: c.async }
+    });
+    loloStyleOverrides = (c) => ({
+      "lolo-binding": { color: c.binding, fontWeight: "bold" },
+      "lolo-event": { color: c.event },
+      "lolo-effect": { color: c.effect, fontWeight: "bold" },
+      "keyword": { color: c.loloKeyword },
+      "lolo-constructor": { color: c.loloConstructor },
+      "lolo-arrow": { color: c.loloArrow },
+      "lolo-reference": { color: c.loloReference },
+      "lolo-type": { color: c.fieldType },
+      "lolo-persistence": { color: c.persistence },
+      "lolo-unknown-op": { color: c.error },
+      "lolo-op-arithmetic": { color: c.arithmetic, fontWeight: "bold" },
+      "lolo-op-comparison": { color: c.comparison },
+      "lolo-op-logic": { color: c.logic },
+      "lolo-op-string": { color: c.string },
+      "lolo-op-collection": { color: c.collection },
+      "lolo-op-time": { color: c.time },
+      "lolo-op-control": { color: c.control },
+      "lolo-op-async": { color: c.async }
+    });
+    SCHEME_BASE = { dark: dark__default.default, light: light__default.default };
+    HIGHLIGHT_STYLES = {
+      dark: {
+        orb: { ...dark__default.default, ...orbStyleOverrides(syntax.ORB_COLORS.dark) },
+        lolo: { ...dark__default.default, ...loloStyleOverrides(syntax.ORB_COLORS.dark) }
+      },
+      light: {
+        orb: { ...light__default.default, ...orbStyleOverrides(syntax.ORB_COLORS.light) },
+        lolo: { ...light__default.default, ...loloStyleOverrides(syntax.ORB_COLORS.light) }
+      }
+    };
     MONO_EDITOR_FONT = 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Courier New", monospace';
     GHOST_COLOR = "#7f848e";
     GUTTER_COLOR = "#858585";
     caretOf = (ta) => ta.selectionDirection === "backward" ? ta.selectionStart : ta.selectionEnd;
+    LTR_WORD = /[A-Za-z0-9_$@?][A-Za-z0-9_$@?.!-]*/g;
+    LTR_ISLAND_STYLE = { unicodeBidi: "isolate", direction: "ltr" };
+    STRING_ISLAND_STYLE = { unicodeBidi: "plaintext" };
     DIAGNOSTIC_ERROR_COLOR = "#f14c4c";
     DIAGNOSTIC_WARNING_COLOR = "#cca700";
     EDITOR_LINE_PX = 19.5;
@@ -16977,7 +17082,7 @@ var init_CodeBlock = __esm({
     LINE_PROPS_FN = (n) => ({ "data-line": String(n - 1) });
     HIDDEN_LINE_NUMBERS = { display: "none" };
     HIGHLIGHT_CAPACITY_BYTES = 512 * 1024;
-    MONO_FONT_FAMILY = 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Courier New", monospace';
+    MONO_FONT_FAMILY = 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Courier New", "IBM Plex Sans Arabic", "Noto Sans Arabic", monospace';
     VIEWER_LINE_NUMBER_STYLE = {
       minWidth: "2.5em",
       paddingRight: "1rem",
@@ -16986,6 +17091,15 @@ var init_CodeBlock = __esm({
       opacity: 0.5,
       fontVariantNumeric: "tabular-nums"
     };
+    VIEWER_LINE_NUMBER_STYLE_RTL = {
+      minWidth: "2.5em",
+      paddingRight: 0,
+      paddingLeft: "1rem",
+      textAlign: "left",
+      userSelect: "none",
+      opacity: 0.5,
+      fontVariantNumeric: "tabular-nums"
+    };
     CodeBlock = React93__namespace.default.memo(
       ({
         code: rawCode,
@@ -17065,8 +17179,12 @@ var init_CodeBlock = __esm({
       }) => {
         const englishCode = typeof rawCode === "string" ? rawCode : String(rawCode ?? "");
         const naturalTabs = !editable && naturalLanguages && naturalLanguages.length > 1 ? naturalLanguages : void 0;
-        const [naturalLanguage, setNaturalLanguage] = React93.useState(() => naturalTabs?.[0] ?? "en");
+        const { locale: pageLocale } = hooks.useTranslate();
+        const [naturalLanguage, setNaturalLanguage] = React93.useState(
+          () => naturalTabs?.find((lang) => lang === pageLocale) ?? naturalTabs?.[0] ?? "en"
+        );
         const activeNaturalLanguage = naturalTabs?.includes(naturalLanguage) === true ? naturalLanguage : naturalTabs?.[0] ?? "en";
+        const codeDir = naturalTabs && i18n.coreTables[activeNaturalLanguage].meta.rtl ? "rtl" : "ltr";
         const translationCache = React93.useMemo(() => /* @__PURE__ */ new Map(), [englishCode, files]);
         const translateFor = React93.useCallback(
           (source, sourceLanguage, cacheKey) => {
@@ -17105,11 +17223,12 @@ var init_CodeBlock = __esm({
             )
           }
         ) : null;
-        const activeStyle = resolveHighlightStyle(language);
+        const activeStyle = resolveHighlightStyle(language, "dark");
         const overCapacity = code.length > HIGHLIGHT_CAPACITY_BYTES;
         const plainCodeColor = plainCodeColorOf(activeStyle);
         const eventBus = useEventBus();
         const { t } = hooks.useTranslate();
+        const { resolvedMode } = context.useTheme();
         const scrollRef = React93.useRef(null);
         const codeRef = React93.useRef(null);
         const savedScrollLeftRef = React93.useRef(0);
@@ -17120,7 +17239,7 @@ var init_CodeBlock = __esm({
         const activeLanguage = activeFile?.language ?? language;
         const activeCode = activeFile ? translateFor(activeFile.code, activeLanguage, `file-${activeFileIndex}`) : code;
         const languageReady = useLanguageReady(activeLanguage);
-        const viewerStyle = resolveHighlightStyle(activeLanguage);
+        const viewerStyle = resolveHighlightStyle(activeLanguage, resolvedMode);
         const viewerPlainCodeColor = plainCodeColorOf(viewerStyle);
         const diffLines = React93.useMemo(() => {
           if (propDiff && propDiff.length > 0) return propDiff;
@@ -17458,8 +17577,9 @@ var init_CodeBlock = __esm({
               wrapLines: true,
               wrapLongLines: wrap,
               showLineNumbers,
-              lineNumberStyle: VIEWER_LINE_NUMBER_STYLE,
+              lineNumberStyle: codeDir === "rtl" ? VIEWER_LINE_NUMBER_STYLE_RTL : VIEWER_LINE_NUMBER_STYLE,
               lineProps: viewerLineProps,
+              renderer: codeDir === "rtl" ? renderRtlCode : void 0,
               customStyle: {
                 backgroundColor: "transparent",
                 borderRadius: 0,
@@ -17469,13 +17589,15 @@ var init_CodeBlock = __esm({
                 wordBreak: wrap ? "break-all" : "normal",
                 fontFamily: MONO_FONT_FAMILY,
                 fontSize: "12px",
-                lineHeight: "1.6"
+                lineHeight: "1.6",
+                direction: codeDir,
+                textAlign: "start"
               },
-              codeTagProps: { style: { fontFamily: MONO_FONT_FAMILY, fontSize: "12px", lineHeight: "1.6" } },
+              codeTagProps: { style: { fontFamily: MONO_FONT_FAMILY, fontSize: "12px", lineHeight: "1.6", direction: codeDir, textAlign: "start" } },
               children: activeCode
             }
           ),
-          [activeCode, viewerOverCapacity, viewerPlainCodeColor, activeLanguage, viewerStyle, wrap, showLineNumbers, viewerLineProps, languageReady]
+          [activeCode, viewerOverCapacity, viewerPlainCodeColor, activeLanguage, viewerStyle, wrap, showLineNumbers, viewerLineProps, languageReady, codeDir]
         );
         const diffOverCapacity = React93.useMemo(
           () => !!diffLines && diffLines.reduce((n, l) => n + l.content.length + 1, 0) > HIGHLIGHT_CAPACITY_BYTES,
@@ -17745,33 +17867,35 @@ var init_CodeBlock = __esm({
                 ]
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "overflow-auto bg-muted/20", style: { maxHeight }, dir: "ltr", children: diffLines ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column" }, className: "font-mono text-xs", children: diffRowElements }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-mono text-xs", children: viewerHighlightedElement }) })
+            /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "overflow-auto bg-muted/20", style: { maxHeight }, dir: codeDir, children: diffLines ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column" }, className: "font-mono text-xs", children: diffRowElements }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-mono text-xs", children: viewerHighlightedElement }) })
           ] }) });
         }
-        const hasHeader = showLanguageBadge || effectiveCopy;
+        const hasHeader = showLanguageBadge;
+        const copyButton = effectiveCopy ? /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: handleCopy,
+            className: `opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity text-muted-foreground hover:text-foreground${hasHeader ? "" : " absolute top-2 end-2 z-10"}`,
+            "aria-label": t("common.copy"),
+            children: copied ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "check", className: "w-4 h-4 text-success" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "copy", className: "w-4 h-4" })
+          }
+        ) : null;
         return /* @__PURE__ */ jsxRuntime.jsxs(Box, { ...domPassthrough(a11yRest), className: `relative group not-prose ${className || ""}`, style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-          hasHeader && /* @__PURE__ */ jsxRuntime.jsxs(
+          hasHeader ? /* @__PURE__ */ jsxRuntime.jsxs(
             HStack,
             {
               justify: "between",
               align: "center",
               className: "px-3 py-2 bg-[var(--color-card)] rounded-t-container border-b border-border",
+              "data-testid": "code-block-header",
               children: [
-                showLanguageBadge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "default", size: "sm", children: language }),
-                effectiveCopy && /* @__PURE__ */ jsxRuntime.jsx(
-                  Button,
-                  {
-                    variant: "ghost",
-                    size: "sm",
-                    onClick: handleCopy,
-                    className: "opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity text-muted-foreground hover:text-foreground",
-                    "aria-label": t("common.copy"),
-                    children: copied ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "check", className: "w-4 h-4 text-success" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "copy", className: "w-4 h-4" })
-                  }
-                )
+                /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "default", size: "sm", children: language }),
+                copyButton
               ]
             }
-          ),
+          ) : copyButton,
           naturalTabStrip,
           editable ? (
             /* GAP-77 / GAP-82 / GAP-83: editable mode = transparent textarea on
@@ -32428,7 +32552,7 @@ function DataList({
                       return f3.variant === "badge" ? (
                         // `format` applies here too — a boolean field badged
                         // without it renders the raw "false" instead of "No".
-                        /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: badgeVariantFor(String(v), f3.colorMap), children: formatValue2(v, f3.format, fmt2, relationsData?.[f3.name]) }, f3.name)
+                        /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: badgeVariantFor(String(v), f3.colorMap), children: valueLabelFor(formatValue2(v, f3.format, fmt2, relationsData?.[f3.name]), f3.labels) }, f3.name)
                       ) : /* @__PURE__ */ jsxRuntime.jsx(
                         Typography,
                         {
@@ -32591,7 +32715,7 @@ function DataList({
                         if (val === void 0 || val === null || val === "") return null;
                         return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "items-center flex-shrink-0", children: [
                           field.icon && renderIconInput2(field.icon, { size: "xs" }),
-                          /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: badgeVariantFor(String(val), field.colorMap), children: formatValue2(val, field.format, fmt2, relationsData?.[field.name]) })
+                          /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: badgeVariantFor(String(val), field.colorMap), children: valueLabelFor(formatValue2(val, field.format, fmt2, relationsData?.[field.name]), field.labels) })
                         ] }, field.name);
                       })
                     ] }),
@@ -33140,13 +33264,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect81, useRef: useRef85, useCallback: useCallback106, useState: useState117 } = React93__namespace.default;
+      const { useEffect: useEffect82, useRef: useRef85, useCallback: useCallback107, useState: useState118 } = React93__namespace.default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
         const prevRef = useRef85({ centerLat, centerLng, zoom });
-        useEffect81(() => {
+        useEffect82(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -33157,7 +33281,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect81(() => {
+        useEffect82(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -33188,8 +33312,8 @@ var init_MapView = __esm({
       }) {
         const contentSurface = providers.useContentSurface(surface);
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState117(null);
-        const handleMapClick = useCallback106((lat, lng) => {
+        const [clickedPosition, setClickedPosition] = useState118(null);
+        const handleMapClick = useCallback107((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -33198,7 +33322,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback106((marker) => {
+        const handleMarkerClick = useCallback107((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -35830,7 +35954,7 @@ var init_DocSidebar = __esm({
           className: cn(
             "h-auto w-full justify-start rounded-interactive px-3 py-1.5 text-sm font-normal",
             depth > 0 && "ml-2",
-            item.active ? "bg-primary/8 text-foreground font-semibold" : "text-muted-foreground"
+            item.active ? "bg-primary/[0.08] text-foreground font-semibold" : "text-muted-foreground"
           ),
           children: label
         }
@@ -44198,11 +44322,23 @@ var init_Header = __esm({
       variant = "mobile",
       look = "compact-bar",
       onLogoClick,
+      brandHref,
       className,
       ...rest
     }) => {
       const { t } = hooks.useTranslate();
       const resolvedSearchPlaceholder = searchPlaceholder ?? t("common.search");
+      const brandContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        logo ? typeof logo === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: logo, alt: brandName, size: "sm" }) : logo : logoSrc ? /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: logoSrc, alt: brandName, size: "sm" }) : null,
+        brandName && /* @__PURE__ */ jsxRuntime.jsx(
+          Typography,
+          {
+            variant: "h5",
+            className: "text-lg text-foreground",
+            children: brandName
+          }
+        )
+      ] });
       const userInitials = userAvatar?.initials || userName?.[0]?.toUpperCase() || "U";
       return /* @__PURE__ */ jsxRuntime.jsxs(
         Box,
@@ -44229,7 +44365,16 @@ var init_Header = __esm({
                   children: isMenuOpen ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.X, { size: 24 }) : /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.Menu, { size: 24 })
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs(
+              brandHref ? /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  href: brandHref,
+                  "aria-label": brandName,
+                  className: "gap-2 px-0 hover:bg-transparent",
+                  children: brandContent
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
                 HStack,
                 {
                   gap: "none",
@@ -44240,17 +44385,7 @@ var init_Header = __esm({
                   ),
                   ...pressableProps(onLogoClick),
                   "aria-label": onLogoClick ? brandName : void 0,
-                  children: [
-                    logo ? typeof logo === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: logo, alt: brandName, size: "sm" }) : logo : logoSrc ? /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: logoSrc, alt: brandName, size: "sm" }) : null,
-                    brandName && /* @__PURE__ */ jsxRuntime.jsx(
-                      Typography,
-                      {
-                        variant: "h5",
-                        className: "text-lg text-foreground",
-                        children: brandName
-                      }
-                    )
-                  ]
+                  children: brandContent
                 }
               )
             ] }),
@@ -54243,8 +54378,8 @@ var init_VersionDiff = __esm({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "overflow-auto bg-muted/20", style: { maxHeight: 600 }, children: isEmpty ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "py-8", "data-testid": "version-diff-empty", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", color: "muted", align: "center", children: t("versionDiff.noChanges") }) }) : activeView === "side-by-side" ? /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "grid grid-cols-1 md:grid-cols-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "border-b md:border-b-0 md:border-r border-border", "data-testid": "version-diff-before", children: renderColumn("before") }),
-          /* @__PURE__ */ jsxRuntime.jsx(Box, { "data-testid": "version-diff-after", children: renderColumn("after") })
+          /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "min-w-0 overflow-x-auto border-b md:border-b-0 md:border-r border-border", "data-testid": "version-diff-before", children: renderColumn("before") }),
+          /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "min-w-0 overflow-x-auto", "data-testid": "version-diff-after", children: renderColumn("after") })
         ] }) : /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "none", className: "font-mono text-xs", children: shown.map((row, idx) => {
           if (row.kind === "header") return renderHeader(row.header, `i-h-${idx}`);
           if (row.kind === "gap") return renderGap(row, `i-g-${row.id}`);
@@ -55395,6 +55530,7 @@ function UISlotComponentInner({
   const awaiting = isPortalSlot(slot) ? void 0 : awaitingSkeleton ?? runtimeAwaiting;
   const regionClassName = fallback !== void 0 ? cn("contents", className) : className;
   const binding = providers.useEntityBindingSnapshot(rawContent?.sourceTrait);
+  const i18n = hooks.useRenderI18n();
   const content = React93.useMemo(() => {
     if (!rawContent) return rawContent;
     const resolvedProps = resolveRenderBindingMarkers(
@@ -55402,10 +55538,11 @@ function UISlotComponentInner({
       rawContent.sourceTrait,
       binding.entity,
       binding.config,
-      binding.state
+      binding.state,
+      i18n
     );
     return resolvedProps === rawContent.props ? rawContent : { ...rawContent, props: resolvedProps };
-  }, [rawContent, binding.entity, binding.config, binding.state]);
+  }, [rawContent, binding.entity, binding.config, binding.state, i18n]);
   const animatedPortal = isAnimatedPortalSlot(slot);
   const holdForPending = useScopeHasPending(React93.useContext(PendingScopeContext));
   const runtimePresence = useSlotPresence(portal && animatedPortal ? content ?? null : null, holdForPending);
@@ -56043,9 +56180,10 @@ function SlotContentRenderer({
   const ambientScope = providers.useTraitScope();
   const bindingTrait = content.sourceTrait ?? ambientScope?.trait;
   const binding = providers.useEntityBindingSnapshot(bindingTrait);
+  const i18n = hooks.useRenderI18n();
   const liveProps = React93.useMemo(
-    () => resolveRenderBindingMarkers(content.props, bindingTrait, binding.entity, binding.config, binding.state),
-    [content.props, bindingTrait, binding.entity, binding.config, binding.state]
+    () => resolveRenderBindingMarkers(content.props, bindingTrait, binding.entity, binding.config, binding.state, i18n),
+    [content.props, bindingTrait, binding.entity, binding.config, binding.state, i18n]
   );
   const propsObj = typeof liveProps === "string" ? {} : liveProps;
   const entityProp = propsObj.entity;
@@ -60174,13 +60312,18 @@ function stateOptionsFor(schema, orbitalName, entityName, transitions, view, moc
     const key = `${s.entry.traitName}|${s.entry.transition.to}`;
     stateUses.set(key, (stateUses.get(key) ?? 0) + 1);
   }
+  const armsSeen = /* @__PURE__ */ new Map();
   return screens.map(({ entry, enteredBy }) => {
     const t = entry.transition;
     const from = String(t.from);
     const state = view === "screens" ? (stateUses.get(`${entry.traitName}|${t.to}`) ?? 0) > 1 ? `${t.to} \xB7 ${t.event}` : t.to : `${t.event}: ${from} \u2192 ${t.to}`;
-    const label = manyTraits ? `${entry.traitName} \xB7 ${state}` : state;
+    const baseId = `${entry.traitName}:${t.event}:${from}:${t.to}`;
+    const arm = (armsSeen.get(baseId) ?? 0) + 1;
+    armsSeen.set(baseId, arm);
+    const named = manyTraits ? `${entry.traitName} \xB7 ${state}` : state;
+    const label = arm > 1 ? `${named} (guard ${arm})` : named;
     return {
-      id: `${entry.traitName}:${t.event}:${from}:${t.to}`,
+      id: arm > 1 ? `${baseId}#${arm}` : baseId,
       label,
       hint: view === "screens" ? enteredBy.join(" \xB7 ") : entry.traitName,
       data: {
@@ -60587,6 +60730,10 @@ I18nContext.displayName = "I18nContext";
 function useTranslate157() {
   return React93.useContext(I18nContext);
 }
+function useRenderI18n2() {
+  const { locale, messages } = React93.useContext(I18nContext);
+  return React93.useMemo(() => messages !== void 0 ? { locale, messages } : void 0, [locale, messages]);
+}
 
 // hooks/useInlineTextEdit.ts
 init_inlineText();
@@ -61154,11 +61301,11 @@ function marqueeHits(marquee, boxes) {
   );
 }
 function axisPositionFrom(axis, constraint, offset) {
-  const start = offset ? axis === "x" ? offset.left : offset.top : 0;
-  const end = offset ? axis === "x" ? offset.right : offset.bottom : 0;
+  const start = axis === "x" ? offset.left : offset.top;
+  const end = axis === "x" ? offset.right : offset.bottom;
   if (constraint === "center") return { constraint, start: (start - end) / 2, end: 0 };
   if (constraint !== "scale") return { constraint, start, end };
-  const size2 = offset ? axis === "x" ? offset.parentWidth : offset.parentHeight : 0;
+  const size2 = axis === "x" ? offset.parentWidth : offset.parentHeight;
   return size2 > 0 ? { constraint, start: start / size2 * 100, end: end / size2 * 100 } : { constraint, start: 0, end: 0 };
 }
 var edgesX = (r2) => [r2.left, r2.left + r2.width / 2, r2.left + r2.width];
@@ -61739,9 +61886,9 @@ function getTabClientId() {
   return tabClientId;
 }
 var log11 = logger.createLogger("almadar:ui:circuit-kernel");
-function postUnmounts(transport, traits2) {
+function postUnmounts(transport, traits2, locale) {
   for (const [traitName, orbitalName] of traits2) {
-    transport.send(orbitalName, { event: runtime.UNMOUNT_EVENT, targetTrait: traitName, clientId: getTabClientId() }).catch((err) => log11.warn("unmount-post-failed", { trait: traitName, orbital: orbitalName, error: String(err) }));
+    transport.send(orbitalName, { event: runtime.UNMOUNT_EVENT, targetTrait: traitName, clientId: getTabClientId(), locale }).catch((err) => log11.warn("unmount-post-failed", { trait: traitName, orbital: orbitalName, error: String(err) }));
   }
 }
 function restrictTraitIndex(full, activeNames) {
@@ -61762,6 +61909,10 @@ function useCircuitKernel(traitBindings, options) {
     [activeTraitKey, fullTraitIndex]
   );
   const mountedRef = React93.useRef(/* @__PURE__ */ new Map());
+  const { locale } = useTranslate157();
+  const i18n = useRenderI18n2();
+  const localeRef = React93.useRef(locale);
+  localeRef.current = locale;
   const transport = options.transport;
   const topologyPending = options.awaitTopology === true;
   React93.useEffect(() => {
@@ -61770,12 +61921,12 @@ function useCircuitKernel(traitBindings, options) {
     const dropped = [...mounted].filter(([name]) => !traitIndex.byName.has(name));
     mounted.clear();
     for (const [name, entry] of traitIndex.byName) mounted.set(name, entry.orbitalName);
-    postUnmounts(transport, dropped);
+    postUnmounts(transport, dropped, localeRef.current);
   }, [traitIndex, transport, topologyPending]);
   React93.useEffect(() => {
     if (transport === void 0) return;
     const mounted = mountedRef.current;
-    return () => postUnmounts(transport, [...mounted]);
+    return () => postUnmounts(transport, [...mounted], localeRef.current);
   }, [transport]);
   const store = React93.useMemo(() => {
     const traitDefs = Array.from(traitIndex.byName.values(), (entry) => entry.traitDef);
@@ -61786,42 +61937,43 @@ function useCircuitKernel(traitBindings, options) {
     };
     return runtime.createMemoryCircuitStore(traitDefs, config, options.observer);
   }, [traitIndex, options.guardMode, options.strictBindings, options.contextExtensions, options.observer]);
-  const offlineTransport = React93.useMemo(() => {
-    if (options.transport !== void 0 || options.persistence === void 0) return void 0;
-    const persistence = options.persistence;
-    return runtime.createInProcessTransport(
-      async (_orbitalName, request) => {
-        const runEffects = runtime.createIndexStageRunner({
-          traitIndex,
-          persistence,
-          frames: store.frames,
-          manager: store.manager,
-          ...options.callService !== void 0 ? { extraEffectHandlers: { callService: options.callService } } : {},
-          ...options.debug !== void 0 ? { debug: options.debug } : {}
-        });
-        return runtime.evaluateOrbitalEvent(
-          {
-            traitIndex,
-            manager: store.manager,
-            persistence,
-            frames: store.frames,
-            runEffects,
-            ...options.user !== void 0 ? { user: options.user } : {},
-            ...options.guardMode !== void 0 ? { guardMode: options.guardMode } : {},
-            ...options.strictBindings !== void 0 ? { strictBindings: options.strictBindings } : {},
-            ...options.contextExtensions !== void 0 ? { contextExtensions: options.contextExtensions } : {},
-            ...options.debug !== void 0 ? { debug: options.debug } : {},
-            ...options.logContext !== void 0 ? { logContext: options.logContext } : {}
-          },
-          request
-        );
-      },
-      { carriesCircuitState: false }
-    );
+  const localTransportOptions = {
+    traitIndex,
+    store,
+    ...options.callService !== void 0 ? { callService: options.callService } : {},
+    ...options.user !== void 0 ? { user: options.user } : {},
+    ...options.guardMode !== void 0 ? { guardMode: options.guardMode } : {},
+    ...options.strictBindings !== void 0 ? { strictBindings: options.strictBindings } : {},
+    ...options.contextExtensions !== void 0 ? { contextExtensions: options.contextExtensions } : {},
+    ...options.debug !== void 0 ? { debug: options.debug } : {},
+    ...options.logContext !== void 0 ? { logContext: options.logContext } : {}
+  };
+  const offlineTransport = React93.useMemo(
+    () => options.transport !== void 0 || options.persistence === void 0 ? void 0 : runtime.createLocalStoreTransport({ ...localTransportOptions, persistence: options.persistence }),
+    [
+      options.transport,
+      options.persistence,
+      traitIndex,
+      store,
+      options.callService,
+      options.user,
+      options.guardMode,
+      options.strictBindings,
+      options.contextExtensions,
+      options.debug,
+      options.logContext
+    ]
+  );
+  const routedTransport = React93.useMemo(() => {
+    if (options.browserStore === void 0) return void 0;
+    const local = runtime.createLocalStoreTransport({ ...localTransportOptions, traitIndex: fullTraitIndex, persistence: options.browserStore, clientRelays: true });
+    const remote = options.transport ?? offlineTransport;
+    return runtime.createResidenceTransport({ local, ...remote !== void 0 ? { remote } : {}, traitIndex: fullTraitIndex });
   }, [
+    options.browserStore,
     options.transport,
-    options.persistence,
-    traitIndex,
+    offlineTransport,
+    fullTraitIndex,
     store,
     options.callService,
     options.user,
@@ -61831,7 +61983,7 @@ function useCircuitKernel(traitBindings, options) {
     options.debug,
     options.logContext
   ]);
-  const baseTransport = options.transport ?? offlineTransport;
+  const baseTransport = routedTransport ?? options.transport ?? offlineTransport;
   const effectiveTransport = React93.useMemo(
     () => baseTransport === void 0 ? void 0 : recordingTransport(baseTransport),
     [baseTransport]
@@ -61856,6 +62008,8 @@ function useCircuitKernel(traitBindings, options) {
     store,
     ...options.persistence !== void 0 ? { persistence: options.persistence } : {},
     ...options.user !== void 0 ? { user: options.user } : {},
+    locale,
+    ...i18n !== void 0 ? { messages: { [i18n.locale]: i18n.messages } } : {},
     ...options.guardMode !== void 0 ? { guardMode: options.guardMode } : {},
     ...options.strictBindings !== void 0 ? { strictBindings: options.strictBindings } : {},
     ...options.contextExtensions !== void 0 ? { contextExtensions: options.contextExtensions } : {},
@@ -61871,6 +62025,8 @@ function useCircuitKernel(traitBindings, options) {
     store,
     options.persistence,
     options.user,
+    locale,
+    i18n,
     options.guardMode,
     options.strictBindings,
     options.contextExtensions,
@@ -61879,12 +62035,19 @@ function useCircuitKernel(traitBindings, options) {
     topology,
     effectiveTransport
   ]);
-  const kernel = React93.useMemo(() => ({
-    store: rawKernel.store,
-    dispatch: (request, hooks) => rawKernel.dispatch(request.clientId !== void 0 ? request : { ...request, clientId: getTabClientId() }, hooks),
-    dispatchMount: (seeds, hooks, base = {}) => rawKernel.dispatchMount(seeds, hooks, base.clientId !== void 0 ? base : { ...base, clientId: getTabClientId() }),
-    dispatchProgress: (request) => rawKernel.dispatchProgress(request.clientId !== void 0 ? request : { ...request, clientId: getTabClientId() })
-  }), [rawKernel]);
+  const kernel = React93.useMemo(() => {
+    const stamp = (request) => ({
+      ...request,
+      clientId: request.clientId ?? getTabClientId(),
+      locale: request.locale ?? locale
+    });
+    return {
+      store: rawKernel.store,
+      dispatch: (request, hooks) => rawKernel.dispatch(stamp(request), hooks),
+      dispatchMount: (seeds, hooks, base = {}) => rawKernel.dispatchMount(seeds, hooks, stamp(base)),
+      dispatchProgress: (request) => rawKernel.dispatchProgress(stamp(request))
+    };
+  }, [rawKernel, locale]);
   return { kernel, store, traitIndex, transport: effectiveTransport };
 }
 
@@ -62368,11 +62531,12 @@ async function runCircuitEffects(params) {
 // hooks/circuit/useCallsiteCapture.ts
 var log14 = logger.createLogger("almadar:ui:circuit:callsite-capture");
 function useCallsiteCapture(traitBindings, store, traitIndex, slotFlush, options) {
-  return React93.useCallback(async function reRender(traitName, callsitePayload, entityByTrait, visited = /* @__PURE__ */ new Set(), serverComposed = /* @__PURE__ */ new Set(), keepComposed = false) {
+  return React93.useCallback(async function reRender(traitName, callsitePayload, entityByTrait, visited = /* @__PURE__ */ new Set(), serverComposed = /* @__PURE__ */ new Set(), keepComposed = false, composedBy) {
     const children = options.callsiteCaptureChildrenByTrait?.get(traitName);
     if (!children || children.size === 0) return;
     const bindingMap = new Map(traitBindings.map((b) => [b.trait.name, b]));
     for (const childName of children) {
+      if (composedBy !== void 0 && !composedBy.has(childName)) continue;
       if (visited.has(childName)) continue;
       visited.add(childName);
       const childBinding = bindingMap.get(childName);
@@ -62426,7 +62590,7 @@ function useCallsiteCapture(traitBindings, store, traitIndex, slotFlush, options
           { event: lifecycleEvent, state: entry.result.previousState, entity: childBinding.linkedEntity }
         );
       }
-      await reRender(childName, composedWith, entityByTrait, visited, serverComposed, keepComposed);
+      await reRender(childName, composedWith, entityByTrait, visited, serverComposed, keepComposed, core.traitsEmbeddedByEffects(indexed.irTrait, entry.result.effects));
     }
   }, [traitBindings, store, traitIndex, slotFlush, options.callsiteCaptureChildrenByTrait, options.eventBus, options.navigate, options.navigateBack, options.user]);
 }
@@ -62720,6 +62884,7 @@ function useAwaitingSkeletonSource(store, traitIndex, embeddedTraits) {
 }
 
 // hooks/useTraitStateMachine.ts
+var MOUNT_ERROR_SOURCE = "$mount";
 var stateLog = logger.createLogger("almadar:ui:state-transitions");
 function diffDroppedTraitNames(prev, next) {
   const dropped = [];
@@ -62734,6 +62899,7 @@ function normalizeEventKey(eventKey) {
 function useTraitStateMachine(traitBindings, uiSlots, options) {
   const eventBus = useEventBus();
   const { user: contextViewer } = providers.useUser();
+  const { t } = useTranslate157();
   const userContext = options.user ?? contextViewer ?? void 0;
   const observer2 = React93.useMemo(() => createCircuitVerificationObserver(), []);
   const { kernel, store, traitIndex, transport } = useCircuitKernel(traitBindings, {
@@ -62743,6 +62909,7 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
     ...options.carriesCircuitState !== void 0 ? { carriesCircuitState: options.carriesCircuitState } : {},
     ...options.awaitTopology !== void 0 ? { awaitTopology: options.awaitTopology } : {},
     ...options.persistence !== void 0 ? { persistence: options.persistence } : {},
+    ...options.browserStore !== void 0 ? { browserStore: options.browserStore } : {},
     ...options.callService !== void 0 ? { callService: options.callService } : {},
     ...userContext !== void 0 ? { user: userContext } : {},
     ...options.debug !== void 0 ? { debug: options.debug } : {},
@@ -62781,11 +62948,11 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
         name: trait.name,
         currentState: state?.currentState ?? trait.states[0]?.name ?? "unknown",
         states: trait.states.map((s) => s.name),
-        transitions: trait.transitions.flatMap((t) => {
-          const froms = Array.isArray(t.from) ? t.from : [t.from];
-          return froms.map((f3) => ({ from: f3, to: t.to, event: t.event, guard: t.guard ? String(t.guard) : void 0 }));
+        transitions: trait.transitions.flatMap((t2) => {
+          const froms = Array.isArray(t2.from) ? t2.from : [t2.from];
+          return froms.map((f3) => ({ from: f3, to: t2.to, event: t2.event, guard: t2.guard ? String(t2.guard) : void 0 }));
         }),
-        guards: trait.transitions.filter((t) => t.guard).map((t) => ({ name: String(t.guard) })),
+        guards: trait.transitions.filter((t2) => t2.guard).map((t2) => ({ name: String(t2.guard) })),
         transitionCount: 0
       };
       registerTrait(info);
@@ -62823,7 +62990,9 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
       }
       const repainted = new Set(repaints.map((e) => e.traitName));
       const serverComposed = new Set([...store.callsitePayloads].filter(([child, composed]) => composedBefore.get(child) !== composed).map(([child]) => child));
-      await reRenderCallsiteCaptureChildren(traitName, payload ?? {}, entityByTrait, repainted, serverComposed);
+      const irTrait = traitIndex.byName.get(traitName)?.irTrait;
+      const composedBy = irTrait !== void 0 ? core.traitsEmbeddedByEvent(irTrait, eventKey) : void 0;
+      await reRenderCallsiteCaptureChildren(traitName, payload ?? {}, entityByTrait, repainted, serverComposed, false, composedBy);
     }
     options.onEventProcessed?.(eventKey, payload);
   }, [traitIndex, store, reRenderCallsiteCaptureChildren, options.onEventProcessed]);
@@ -62892,8 +63061,8 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
   React93.useEffect(() => {
     if (!transport?.subscribe) return;
     return transport.subscribe((emitted, target) => {
-      for (const t of runtime.collectListenerTargets(traitIndex, emitted.source, emitted.event, emitted.payload)) {
-        void (target === "origin" ? progressAndSettle(t.listenerTrait, t.triggers, t.payload) : dispatchAndSettle(t.listenerTrait, t.triggers, t.payload));
+      for (const t2 of runtime.collectListenerTargets(traitIndex, emitted.source, emitted.event, emitted.payload)) {
+        void (target === "origin" ? progressAndSettle(t2.listenerTrait, t2.triggers, t2.payload) : dispatchAndSettle(t2.listenerTrait, t2.triggers, t2.payload));
       }
     }, { clientId: getTabClientId() });
   }, [transport, traitIndex, progressAndSettle, dispatchAndSettle]);
@@ -62965,26 +63134,75 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
     for (const traitName of left) mount.initialized.delete(traitName);
     store.mount.unmounted(left);
     const entering = [];
+    const embeddedChildren = new Set([...options.callsiteCaptureChildrenByTrait?.values() ?? []].flatMap((c) => [...c]));
     for (const binding of traitBindings) {
       const traitName = binding.trait.name;
       if (mount.initialized.has(traitName)) continue;
       mount.initialized.add(traitName);
+      const indexed = traitIndex.byName.get(traitName);
+      if (embeddedChildren.has(traitName) && indexed !== void 0 && (core.traitReferencesCallsitePayload(indexed.irTrait) || core.configReferencesCallsitePayload(indexed.config)) && store.manager.repaintLifecycleEvent(traitName) !== void 0 && !store.callsitePayloads.has(traitName)) {
+        continue;
+      }
       const lifecycleEvent = runtime.LIFECYCLE_EVENTS.find((evt) => store.manager.canHandleEvent(traitName, evt));
       if (lifecycleEvent !== void 0) entering.push({ trait: traitName, event: lifecycleEvent });
     }
     store.mount.mounting(entering.map((e) => e.trait));
     if (entering.length > 0) {
+      uiSlots.clearBySource("main", MOUNT_ERROR_SOURCE);
       void mountAndSettle(entering, { ...options.initPayload ?? {} }).catch((err) => {
-        stateLog.warn("mount:failed", { traits: entering.map((e) => e.trait), error: String(err) });
+        const traits2 = entering.map((e) => e.trait);
+        const message = err instanceof Error ? err.message : String(err);
+        const failed = err instanceof runtime.TraitMountError ? err.trait : traits2.join(", ");
+        const cause = err instanceof runtime.TraitMountError ? err.original : err;
+        stateLog.warn("mount:failed", { traits: traits2, failed, error: message, stack: cause instanceof Error ? cause.stack : void 0 });
+        uiSlots.render({
+          target: "main",
+          pattern: "error-state",
+          props: { title: t("error.traitMountFailed", { trait: failed }), message, "data-testid": core.TRAIT_MOUNT_ERROR_TESTID },
+          sourceTrait: MOUNT_ERROR_SOURCE
+        });
       });
     }
     mountedRef.current = mount;
-  }, [traitBindings, store, mountAndSettle, mountKey]);
+  }, [traitBindings, store, mountAndSettle, mountKey, uiSlots, traitIndex, options.callsiteCaptureChildrenByTrait, t]);
   React93.useSyncExternalStore(store.subscribe, store.getVersion, store.getVersion);
   const traitStates = React93.useMemo(() => store.manager.getAllStates(), [store, store.getVersion()]);
   return { traitStates, sendEvent, getTraitState, canHandleEvent, entityBindingSource, awaitingSkeletonSource };
 }
 
+// runtime/OrbPreview.tsx
+init_LoadingState();
+init_ErrorState();
+function useBrowserStore(appName, orbitals, locale) {
+  const entities = React93.useMemo(() => orbitals.flatMap(core.orbitalInlineEntities).filter(core.storesRowsInBrowser), [orbitals]);
+  const [state, setState] = React93.useState(() => entities.length === 0 ? { status: "none" } : { status: "opening" });
+  React93.useEffect(() => {
+    if (entities.length === 0) {
+      setState({ status: "none" });
+      return;
+    }
+    let cancelled = false;
+    let opened;
+    setState({ status: "opening" });
+    const open = async () => {
+      try {
+        const store = await runtime.openBrowserStore(runtime.browserStoreName(appName, locale), orbitals, void 0, locale);
+        if (store === null) return;
+        opened = store;
+        if (!cancelled) setState({ status: "ready", store });
+      } catch (err) {
+        if (!cancelled) setState({ status: "failed", error: err instanceof Error ? err : new Error(String(err)) });
+      }
+    };
+    void open();
+    return () => {
+      cancelled = true;
+      opened?.close();
+    };
+  }, [appName, locale, entities, orbitals]);
+  return state;
+}
+
 // runtime/fitContent.ts
 var IDENTITY2 = { scale: 1, x: 0, y: 0 };
 function fitContentTransform(box, content) {
@@ -63043,7 +63261,7 @@ function appPathFromHref(href, hostHrefBase) {
   if (!href.startsWith(`${root}/`)) return null;
   return href.slice(root.length);
 }
-function TraitInitializer({ traits: traits2, routeParams, mountKey, orbitals, onNavigate, onNavigateBack, onLocalFallback, localFallbackTimeoutMs, persistence, traitConfigsByName, embeddedTraits, callsiteCaptureChildrenByTrait, hasBridge, children }) {
+function TraitInitializer({ traits: traits2, routeParams, mountKey, orbitals, onNavigate, onNavigateBack, onLocalFallback, localFallbackTimeoutMs, persistence, browserStore, traitConfigsByName, embeddedTraits, callsiteCaptureChildrenByTrait, hasBridge, children }) {
   const bridge = providers.useServerBridge();
   const uiSlots = context.useUISlots();
   React93.useEffect(() => {
@@ -63062,7 +63280,8 @@ function TraitInitializer({ traits: traits2, routeParams, mountKey, orbitals, on
     ...callsiteCaptureChildrenByTrait !== void 0 ? { callsiteCaptureChildrenByTrait } : {},
     initPayload: routeParams,
     ...mountKey !== void 0 ? { mountKey } : {},
-    ...hasBridge ? { transport: bridge.transport, carriesCircuitState: bridge.carriesCircuitState, awaitTopology: !bridge.topologyKnown } : { persistence }
+    ...hasBridge ? { transport: bridge.transport, carriesCircuitState: bridge.carriesCircuitState, awaitTopology: !bridge.topologyKnown } : { persistence },
+    ...browserStore !== void 0 ? { browserStore } : {}
   });
   return /* @__PURE__ */ jsxRuntime.jsx(providers.EntityBindingContext.Provider, { value: entityBindingSource, children: /* @__PURE__ */ jsxRuntime.jsx(providers.AwaitingSkeletonContext.Provider, { value: awaitingSkeletonSource, children }) });
 }
@@ -63248,6 +63467,8 @@ function SchemaRunner({ schema, serverUrl, transport, getAccessToken, mockData,
     return set;
   }, [schema, pageName]);
   const activeOrbitalTheme = React93.useMemo(() => resolvePreviewTheme(schema, pageName), [schema, pageName]);
+  const { locale } = hooks.useTranslate();
+  const browserStore = useBrowserStore(schema.name ?? "app", schema.orbitals, locale);
   const inner = /* @__PURE__ */ jsxRuntime.jsx(providers.VerificationProvider, { enabled: true, children: /* @__PURE__ */ jsxRuntime.jsx(
     providers.EntitySchemaProvider,
     {
@@ -63270,11 +63491,16 @@ function SchemaRunner({ schema, serverUrl, transport, getAccessToken, mockData,
           onLocalFallback,
           localFallbackTimeoutMs,
           persistence,
+          ...browserStore.status === "ready" ? { browserStore: browserStore.store } : {},
           children: /* @__PURE__ */ jsxRuntime.jsx(providers.OrbitalThemeProvider, { theme: activeOrbitalTheme, override: themeOverride, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "h-full min-h-full overflow-auto p-4", children: /* @__PURE__ */ jsxRuntime.jsx(UISlotRenderer, { includeHud: true, hudMode: "inline", includeFloating: true, pageKey: pageName }) }) })
         }
       )
     }
   ) });
+  if (browserStore.status === "opening") return /* @__PURE__ */ jsxRuntime.jsx(LoadingState, {});
+  if (browserStore.status === "failed") {
+    return /* @__PURE__ */ jsxRuntime.jsx(ErrorState, { "data-testid": "browser-store-error", message: browserStore.error.message });
+  }
   if (serverUrl || transport) {
     return /* @__PURE__ */ jsxRuntime.jsx(providers.ServerBridgeProvider, { schema, serverUrl, transport, getAccessToken, children: inner });
   }
@@ -63307,7 +63533,10 @@ function OrbPreview({
   onPageChange,
   user = null,
   localFallbackTimeoutMs,
-  themeOverride
+  themeOverride,
+  lazyLoader,
+  schemaPath,
+  onUnmatchedNavigate
 }) {
   if (serverUrl && transport) {
     throw new Error("OrbPreview accepts serverUrl OR transport, not both");
@@ -63356,12 +63585,44 @@ function OrbPreview({
       return [];
     }
   }, [parsedSchema]);
+  const lazyPages = React93.useMemo(() => parsedSchema?.lazyPages ?? [], [parsedSchema]);
+  const matchRoute = React93.useCallback((path) => {
+    const candidates = [
+      ...pages.map((entry) => ({ kind: "page", entry, path: entry.page.path })),
+      ...lazyPages.map((page) => ({ kind: "lazy", page, path: page.path }))
+    ];
+    const hit = providers.matchPathAmong(candidates, path, (c) => c.path);
+    if (!hit) return null;
+    return hit.candidate.kind === "page" ? { kind: "page", entry: hit.candidate.entry, params: hit.params } : { kind: "lazy", page: hit.candidate.page, params: hit.params };
+  }, [pages, lazyPages]);
+  const initialRoute = React93.useMemo(
+    () => initialPagePath ? matchRoute(initialPagePath) : null,
+    [matchRoute, initialPagePath]
+  );
   const initialPageMatch = React93.useMemo(() => {
-    if (!initialPagePath) return void 0;
-    const hit = providers.matchPathAmong(pages, initialPagePath, (entry) => entry.page.path);
-    if (!hit) return void 0;
-    return { name: hit.candidate.page.name, params: hit.params };
-  }, [pages, initialPagePath]);
+    if (initialRoute?.kind !== "page" || !initialRoute.entry.page.name) return void 0;
+    return { name: initialRoute.entry.page.name, params: initialRoute.params };
+  }, [initialRoute]);
+  const [lazyRoute, setLazyRoute] = React93.useState(
+    initialRoute?.kind === "lazy" && initialPagePath ? { page: initialRoute.page, path: initialPagePath } : null
+  );
+  const [lazyLoad, setLazyLoad] = React93.useState({ status: "loading" });
+  React93.useEffect(() => {
+    if (!lazyRoute) return;
+    if (!lazyLoader) {
+      setLazyLoad({ status: "error", error: `No loader for lazy page ${lazyRoute.page.path} (${lazyRoute.page.orbRef})` });
+      return;
+    }
+    let cancelled = false;
+    setLazyLoad({ status: "loading" });
+    void runtime.loadLazyPage(lazyLoader, lazyRoute.page, schemaPath).then((result) => {
+      if (cancelled) return;
+      setLazyLoad(result.success ? { status: "ready", schema: result.data } : { status: "error", error: result.error });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [lazyRoute?.page, lazyLoader, schemaPath]);
   const initialPageName = initialPageMatch?.name;
   const [currentPage, setCurrentPage] = React93.useState(initialPageName);
   const [routeParams, setRouteParams] = React93.useState(initialPageMatch?.params ?? {});
@@ -63371,8 +63632,9 @@ function OrbPreview({
       prevInitialPagePathRef.current = initialPagePath;
       setCurrentPage(initialPageName);
       setRouteParams(initialPageMatch?.params ?? {});
+      setLazyRoute(initialRoute?.kind === "lazy" && initialPagePath ? { page: initialRoute.page, path: initialPagePath } : null);
     }
-  }, [initialPagePath, initialPageName, initialPageMatch]);
+  }, [initialPagePath, initialPageName, initialPageMatch, initialRoute]);
   const currentPagePath = React93.useMemo(() => {
     const activePageName = currentPage ?? pages[0]?.page.name;
     const resolved = pages.find((p) => p.page.name === activePageName)?.page.path;
@@ -63387,10 +63649,30 @@ function OrbPreview({
     return pattern.replace(/:([A-Za-z0-9_]+)/g, (whole, key) => routeParams[key] ?? whole);
   }, [currentPagePath, routeParams]);
   const navStackRef = React93.useRef(null);
+  const announcePage = React93.useCallback((path) => {
+    if (onPageChange) {
+      onPageChange(path);
+    } else if (!isolated && typeof window !== "undefined") {
+      const url = new URL(window.location.href);
+      url.searchParams.set("page", path);
+      window.history.pushState({}, "", url.toString());
+      window.dispatchEvent(new PopStateEvent("popstate"));
+    }
+  }, [isolated, onPageChange]);
   const handleNavigate = React93.useCallback((path, navState) => {
-    const hit = providers.matchPathAmong(pages, path, (entry) => entry.page.path);
-    const match = hit?.candidate;
-    const params = { ...hit?.params ?? {}, ...navState ?? {} };
+    const route = matchRoute(path);
+    if (!route) {
+      onUnmatchedNavigate?.(path);
+      return;
+    }
+    if (route.kind === "lazy") {
+      setLazyRoute({ page: route.page, path });
+      announcePage(path);
+      return;
+    }
+    setLazyRoute(null);
+    const match = route.entry;
+    const params = { ...route.params, ...navState ?? {} };
     navLog.debug("handleNavigate", () => ({
       path,
       matched: match?.page.name ?? null,
@@ -63398,19 +63680,12 @@ function OrbPreview({
       navState: navState ? JSON.stringify(navState) : void 0,
       availablePaths: pages.map((p) => p.page.path)
     }));
-    if (match?.page.name) {
+    if (match.page.name) {
       setRouteParams(params);
       setCurrentPage(match.page.name);
-      if (onPageChange) {
-        onPageChange(path);
-      } else if (!isolated && typeof window !== "undefined") {
-        const url = new URL(window.location.href);
-        url.searchParams.set("page", path);
-        window.history.pushState({}, "", url.toString());
-        window.dispatchEvent(new PopStateEvent("popstate"));
-      }
+      announcePage(path);
     }
-  }, [pages, isolated, onPageChange]);
+  }, [pages, matchRoute, announcePage, onUnmatchedNavigate]);
   const handleNavigateEffect = React93.useCallback(
     (path, params, crumb) => {
       navStackRef.current?.beginNavigate(path, crumb);
@@ -63475,6 +63750,33 @@ function OrbPreview({
     navLog.info("interceptor:installed", { pageCount: pages.length, paths: pages.map((p) => p.page.path) });
     return () => el.removeEventListener("click", handler, true);
   }, [pages, handleNavigate, isolated, hostHrefBase]);
+  if (lazyRoute) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Box, { ref: containerRef, className: `overflow-auto ${className ?? ""}`, style: { height }, children: [
+      lazyLoad.status === "loading" && /* @__PURE__ */ jsxRuntime.jsx(LoadingState, {}),
+      lazyLoad.status === "error" && /* @__PURE__ */ jsxRuntime.jsx(ErrorState, { "data-testid": "lazy-page-error", message: lazyLoad.error }),
+      lazyLoad.status === "ready" && /* @__PURE__ */ jsxRuntime.jsx(
+        OrbPreview,
+        {
+          schema: lazyLoad.schema,
+          autoMock,
+          height: "100%",
+          className: "border-0",
+          serverUrl,
+          transport,
+          getAccessToken,
+          initialPagePath: lazyRoute.path,
+          user,
+          isolated,
+          fit,
+          onPageChange: announcePage,
+          themeOverride,
+          lazyLoader,
+          onUnmatchedNavigate: handleNavigate
+        },
+        lazyRoute.page.orbRef
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Box,
     {
@@ -63546,7 +63848,9 @@ function BrowserPlayground({
   paused,
   fit,
   onPageChange,
-  viewer
+  viewer,
+  messages,
+  locale
 }) {
   const [runtime$1] = React93.useState(
     () => new OrbitalServerRuntime.OrbitalServerRuntime({ mode, debug: false, ...viewer !== void 0 ? { defaultUser: viewer } : {} })
@@ -63562,10 +63866,10 @@ function BrowserPlayground({
   const registrationReady = React93.useMemo(() => {
     const orbitalNames = schema.orbitals.map((o) => o.name);
     playgroundLog.debug("register:start", { schema: schema.name, orbitalNames });
-    return runtime$1.register(schema).then(() => {
+    return runtime$1.register(schema, messages !== void 0 ? { messages } : {}).then(() => {
       playgroundLog.debug("register:done", { schema: schema.name, orbitalNames });
     });
-  }, [runtime$1, schema]);
+  }, [runtime$1, schema, messages]);
   const teardownTimerRef = React93.useRef(null);
   React93.useEffect(() => {
     if (teardownTimerRef.current !== null) {
@@ -63595,7 +63899,13 @@ function BrowserPlayground({
     ),
     [runtime$1, registrationReady]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const viewerLocale = locale ?? schema.locales?.[0];
+  const i18n$1 = React93.useMemo(() => {
+    if (viewerLocale === void 0 || messages === void 0) return void 0;
+    const catalog = messages[viewerLocale] ?? {};
+    return { locale: viewerLocale, direction: i18n.localeDirection(viewerLocale), t: hooks.createTranslate(catalog), messages: catalog };
+  }, [viewerLocale, messages]);
+  const preview = /* @__PURE__ */ jsxRuntime.jsx(
     OrbPreview,
     {
       schema,
@@ -63609,6 +63919,7 @@ function BrowserPlayground({
       isolated: true
     }
   );
+  return i18n$1 !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(hooks.I18nProvider, { value: i18n$1, children: preview }) : preview;
 }
 
 // components/avl/molecules/OrbPreviewNode.tsx
@@ -66883,7 +67194,11 @@ function AppearanceSection({ patternConfig, themeManifest, onPropChange, onToken
           {
             checked: position.absolute,
             label: t("orbInspector.absolute"),
-            onChange: (on) => write(on ? { absolute: true, x: axisPositionFrom("x", "start", offsetInParent), y: axisPositionFrom("y", "start", offsetInParent) } : { ...position, absolute: false })
+            disabled: !offsetInParent && !position.absolute,
+            onChange: (on) => {
+              if (!on) write({ ...position, absolute: false });
+              else if (offsetInParent) write({ absolute: true, x: axisPositionFrom("x", "start", offsetInParent), y: axisPositionFrom("y", "start", offsetInParent) });
+            }
           }
         ),
         position.absolute && ["x", "y"].map((axis) => /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center gap-2", "data-testid": `inspector-constraint-${axis}`, children: [
@@ -66894,9 +67209,10 @@ function AppearanceSection({ patternConfig, themeManifest, onPropChange, onToken
               value: position[axis].constraint,
               "aria-label": t(axis === "x" ? "orbInspector.constraintHorizontal" : "orbInspector.constraintVertical"),
               options: CONSTRAINTS.map((c) => ({ value: c, label: t(CONSTRAINT_LABELS[axis][c]) })),
+              disabled: !offsetInParent,
               onValueChange: (v) => {
                 const constraint = CONSTRAINTS.find((c) => c === v);
-                if (constraint) write({ ...position, [axis]: axisPositionFrom(axis, constraint, offsetInParent) });
+                if (constraint && offsetInParent) write({ ...position, [axis]: axisPositionFrom(axis, constraint, offsetInParent) });
               },
               className: "flex-1 text-xs h-6"
             }