npm - @almadar/ui - Versions diffs - 6.16.0 → 6.18.0 - Mend

@almadar/ui 6.16.0 → 6.18.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 (11) hide show

package/dist/avl/index.cjs +57 -4
package/dist/avl/index.js +57 -4
package/dist/components/index.cjs +12 -1
package/dist/components/index.js +12 -1
package/dist/providers/index.cjs +12 -1
package/dist/providers/index.js +12 -1
package/dist/runtime/index.cjs +57 -4
package/dist/runtime/index.d.cts +10 -2
package/dist/runtime/index.d.ts +10 -2
package/dist/runtime/index.js +57 -4
package/package.json +3 -3

package/dist/avl/index.cjs CHANGED Viewed

@@ -22251,6 +22251,7 @@ var init_CodeBlock = __esm({
               ref: scrollRef,
               onCopy: handleSelectionCopy,
               dir: "ltr",
+              className: "[&_code]:!bg-transparent [&_code]:!p-0 [&_code]:!border-0 [&_code]:!shadow-none [&_span]:!bg-transparent",
               style: {
                 flex: 1,
                 minHeight: 0,
@@ -22408,7 +22409,12 @@ var init_MermaidDiagram = __esm({
             mermaid.initialize({
               startOnLoad: false,
               securityLevel: "strict",
-              theme: resolvedMode === "dark" ? "dark" : "default"
+              theme: resolvedMode === "dark" ? "dark" : "default",
+              // Mermaid's default is to append its "Syntax error in text" bomb
+              // graphic to <body> on a failed parse, outside any error boundary —
+              // the catch below owns failure presentation (source + log), so the
+              // library must not paint its own.
+              suppressErrorRendering: true
             });
             const domId = `mermaid-${reactId.replace(/[^a-zA-Z0-9]/g, "")}`;
             let firstError = null;
@@ -54999,6 +55005,11 @@ function renderPatternChildren(children, onDismiss, parentId = "root", parentPat
     if (_childChildren !== void 0 && nestedProps === void 0) {
       resolvedProps.children = _childChildren;
     }
+    const childKids = resolvedProps.children;
+    const childlessStack = (_childType === "stack" || _childType === "vstack" || _childType === "hstack") && resolvedProps.className === void 0 && resolvedProps.style === void 0 && (childKids === void 0 || childKids === null || Array.isArray(childKids) && !childKids.length);
+    if (childlessStack) {
+      return null;
+    }
     const childContent = {
       id: childId,
       pattern: child.type,
@@ -60617,6 +60628,30 @@ function TraitInitializer({ traits: traits2, routeParams, orbitalNames, onNaviga
   }, [bridge.connected, orbitalNames, bridge.sendEvent, uiSlots, onNavigate, onNavigateBack, embeddedTraits, activeTraitNames, withActiveTraits, routeParams]);
   return /* @__PURE__ */ jsxRuntime.jsx(providers.EntityBindingContext.Provider, { value: entityBindingSource, children });
 }
+function FitToBox({ children }) {
+  const outerRef = React96.useRef(null);
+  const innerRef = React96.useRef(null);
+  const [scale, setScale] = React96.useState(1);
+  React96.useEffect(() => {
+    const outer = outerRef.current;
+    const inner = innerRef.current;
+    if (!outer || !inner) return;
+    const update = () => {
+      const sw = inner.scrollWidth;
+      const sh = inner.scrollHeight;
+      const cw = outer.clientWidth;
+      const ch = outer.clientHeight;
+      if (!sw || !sh || !cw || !ch) return;
+      setScale(Math.min(1, cw / sw, ch / sh));
+    };
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(outer);
+    ro.observe(inner);
+    return () => ro.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: outerRef, className: "relative h-full w-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: innerRef, style: { transform: `scale(${scale})`, transformOrigin: "top left", width: "fit-content" }, children }) });
+}
 function SchemaRunner({ schema, serverUrl, transport, getAccessToken, mockData, pageName, routeParams, onNavigate, onNavigateBack, onLocalFallback, persistence }) {
   const { traits: traits2, allEntities, allTraits, ir } = useResolvedSchema(schema, pageName);
   const allPageTraits = React96.useMemo(() => {
@@ -60802,6 +60837,7 @@ function OrbPreview({
   getAccessToken,
   initialPagePath,
   isolated = false,
+  fit = false,
   user = null
 }) {
   if (serverUrl && transport) {
@@ -60958,7 +60994,7 @@ function OrbPreview({
     Box,
     {
       ref: containerRef,
-      className: `overflow-auto border border-[var(--color-border)] rounded-[var(--radius-md)] ${className ?? ""}`,
+      className: `${fit ? "overflow-hidden" : "overflow-auto"} border border-[var(--color-border)] rounded-[var(--radius-md)] ${className ?? ""}`,
       style: { height },
       children: [
         localFallback && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "px-3 py-2 bg-[var(--color-warning)] bg-opacity-10 border-b border-[var(--color-warning)] flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-[var(--color-warning-foreground)] flex-1", children: "Preview server unreachable \u2014 running locally. Server-side state and persistence are disabled." }) }),
@@ -60971,7 +61007,22 @@ function OrbPreview({
             storageKey: `almadar:navstack:${parseResult.schema.name ?? "preview"}`,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(NavStackRefBridge, { apiRef: navStackRef }),
-              /* @__PURE__ */ jsxRuntime.jsx(providers.OrbitalProvider, { initialData: effectiveMockData, skipTheme: true, verification: true, isolated, user, children: /* @__PURE__ */ jsxRuntime.jsx(context.UISlotProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsxRuntime.jsx(providers.OrbitalProvider, { initialData: effectiveMockData, skipTheme: true, verification: true, isolated, user, children: /* @__PURE__ */ jsxRuntime.jsx(context.UISlotProvider, { children: fit ? /* @__PURE__ */ jsxRuntime.jsx(FitToBox, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                SchemaRunner,
+                {
+                  schema: parseResult.schema,
+                  serverUrl,
+                  transport,
+                  getAccessToken,
+                  mockData: effectiveMockData,
+                  pageName: currentPage,
+                  routeParams,
+                  onNavigate: handleNavigateEffect,
+                  onNavigateBack: handleNavigateBack,
+                  onLocalFallback: handleLocalFallback,
+                  persistence
+                }
+              ) }) : /* @__PURE__ */ jsxRuntime.jsx(
                 SchemaRunner,
                 {
                   schema: parseResult.schema,
@@ -61002,7 +61053,8 @@ function BrowserPlayground({
   initialPagePath,
   height,
   className,
-  paused
+  paused,
+  fit
 }) {
   const [runtime] = React96.useState(
     () => new OrbitalServerRuntime.OrbitalServerRuntime({ mode, debug: false })
@@ -61064,6 +61116,7 @@ function BrowserPlayground({
       initialPagePath,
       height,
       className,
+      fit,
       isolated: true
     }
   );

package/dist/avl/index.js CHANGED Viewed

@@ -22175,6 +22175,7 @@ var init_CodeBlock = __esm({
               ref: scrollRef,
               onCopy: handleSelectionCopy,
               dir: "ltr",
+              className: "[&_code]:!bg-transparent [&_code]:!p-0 [&_code]:!border-0 [&_code]:!shadow-none [&_span]:!bg-transparent",
               style: {
                 flex: 1,
                 minHeight: 0,
@@ -22332,7 +22333,12 @@ var init_MermaidDiagram = __esm({
             mermaid.initialize({
               startOnLoad: false,
               securityLevel: "strict",
-              theme: resolvedMode === "dark" ? "dark" : "default"
+              theme: resolvedMode === "dark" ? "dark" : "default",
+              // Mermaid's default is to append its "Syntax error in text" bomb
+              // graphic to <body> on a failed parse, outside any error boundary —
+              // the catch below owns failure presentation (source + log), so the
+              // library must not paint its own.
+              suppressErrorRendering: true
             });
             const domId = `mermaid-${reactId.replace(/[^a-zA-Z0-9]/g, "")}`;
             let firstError = null;
@@ -54923,6 +54929,11 @@ function renderPatternChildren(children, onDismiss, parentId = "root", parentPat
     if (_childChildren !== void 0 && nestedProps === void 0) {
       resolvedProps.children = _childChildren;
     }
+    const childKids = resolvedProps.children;
+    const childlessStack = (_childType === "stack" || _childType === "vstack" || _childType === "hstack") && resolvedProps.className === void 0 && resolvedProps.style === void 0 && (childKids === void 0 || childKids === null || Array.isArray(childKids) && !childKids.length);
+    if (childlessStack) {
+      return null;
+    }
     const childContent = {
       id: childId,
       pattern: child.type,
@@ -60541,6 +60552,30 @@ function TraitInitializer({ traits: traits2, routeParams, orbitalNames, onNaviga
   }, [bridge.connected, orbitalNames, bridge.sendEvent, uiSlots, onNavigate, onNavigateBack, embeddedTraits, activeTraitNames, withActiveTraits, routeParams]);
   return /* @__PURE__ */ jsx(EntityBindingContext.Provider, { value: entityBindingSource, children });
 }
+function FitToBox({ children }) {
+  const outerRef = useRef(null);
+  const innerRef = useRef(null);
+  const [scale, setScale] = useState(1);
+  useEffect(() => {
+    const outer = outerRef.current;
+    const inner = innerRef.current;
+    if (!outer || !inner) return;
+    const update = () => {
+      const sw = inner.scrollWidth;
+      const sh = inner.scrollHeight;
+      const cw = outer.clientWidth;
+      const ch = outer.clientHeight;
+      if (!sw || !sh || !cw || !ch) return;
+      setScale(Math.min(1, cw / sw, ch / sh));
+    };
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(outer);
+    ro.observe(inner);
+    return () => ro.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsx("div", { ref: outerRef, className: "relative h-full w-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { ref: innerRef, style: { transform: `scale(${scale})`, transformOrigin: "top left", width: "fit-content" }, children }) });
+}
 function SchemaRunner({ schema, serverUrl, transport, getAccessToken, mockData, pageName, routeParams, onNavigate, onNavigateBack, onLocalFallback, persistence }) {
   const { traits: traits2, allEntities, allTraits, ir } = useResolvedSchema(schema, pageName);
   const allPageTraits = useMemo(() => {
@@ -60726,6 +60761,7 @@ function OrbPreview({
   getAccessToken,
   initialPagePath,
   isolated = false,
+  fit = false,
   user = null
 }) {
   if (serverUrl && transport) {
@@ -60882,7 +60918,7 @@ function OrbPreview({
     Box,
     {
       ref: containerRef,
-      className: `overflow-auto border border-[var(--color-border)] rounded-[var(--radius-md)] ${className ?? ""}`,
+      className: `${fit ? "overflow-hidden" : "overflow-auto"} border border-[var(--color-border)] rounded-[var(--radius-md)] ${className ?? ""}`,
       style: { height },
       children: [
         localFallback && /* @__PURE__ */ jsx(Box, { className: "px-3 py-2 bg-[var(--color-warning)] bg-opacity-10 border-b border-[var(--color-warning)] flex items-center gap-2", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-[var(--color-warning-foreground)] flex-1", children: "Preview server unreachable \u2014 running locally. Server-side state and persistence are disabled." }) }),
@@ -60895,7 +60931,22 @@ function OrbPreview({
             storageKey: `almadar:navstack:${parseResult.schema.name ?? "preview"}`,
             children: [
               /* @__PURE__ */ jsx(NavStackRefBridge, { apiRef: navStackRef }),
-              /* @__PURE__ */ jsx(OrbitalProvider, { initialData: effectiveMockData, skipTheme: true, verification: true, isolated, user, children: /* @__PURE__ */ jsx(UISlotProvider, { children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(OrbitalProvider, { initialData: effectiveMockData, skipTheme: true, verification: true, isolated, user, children: /* @__PURE__ */ jsx(UISlotProvider, { children: fit ? /* @__PURE__ */ jsx(FitToBox, { children: /* @__PURE__ */ jsx(
+                SchemaRunner,
+                {
+                  schema: parseResult.schema,
+                  serverUrl,
+                  transport,
+                  getAccessToken,
+                  mockData: effectiveMockData,
+                  pageName: currentPage,
+                  routeParams,
+                  onNavigate: handleNavigateEffect,
+                  onNavigateBack: handleNavigateBack,
+                  onLocalFallback: handleLocalFallback,
+                  persistence
+                }
+              ) }) : /* @__PURE__ */ jsx(
                 SchemaRunner,
                 {
                   schema: parseResult.schema,
@@ -60926,7 +60977,8 @@ function BrowserPlayground({
   initialPagePath,
   height,
   className,
-  paused
+  paused,
+  fit
 }) {
   const [runtime] = useState(
     () => new OrbitalServerRuntime({ mode, debug: false })
@@ -60988,6 +61040,7 @@ function BrowserPlayground({
       initialPagePath,
       height,
       className,
+      fit,
       isolated: true
     }
   );

package/dist/components/index.cjs CHANGED Viewed

@@ -15495,6 +15495,7 @@ var init_CodeBlock = __esm({
               ref: scrollRef,
               onCopy: handleSelectionCopy,
               dir: "ltr",
+              className: "[&_code]:!bg-transparent [&_code]:!p-0 [&_code]:!border-0 [&_code]:!shadow-none [&_span]:!bg-transparent",
               style: {
                 flex: 1,
                 minHeight: 0,
@@ -15652,7 +15653,12 @@ var init_MermaidDiagram = __esm({
             mermaid.initialize({
               startOnLoad: false,
               securityLevel: "strict",
-              theme: resolvedMode === "dark" ? "dark" : "default"
+              theme: resolvedMode === "dark" ? "dark" : "default",
+              // Mermaid's default is to append its "Syntax error in text" bomb
+              // graphic to <body> on a failed parse, outside any error boundary —
+              // the catch below owns failure presentation (source + log), so the
+              // library must not paint its own.
+              suppressErrorRendering: true
             });
             const domId = `mermaid-${reactId.replace(/[^a-zA-Z0-9]/g, "")}`;
             let firstError = null;
@@ -54118,6 +54124,11 @@ function renderPatternChildren(children, onDismiss, parentId = "root", parentPat
     if (_childChildren !== void 0 && nestedProps === void 0) {
       resolvedProps.children = _childChildren;
     }
+    const childKids = resolvedProps.children;
+    const childlessStack = (_childType === "stack" || _childType === "vstack" || _childType === "hstack") && resolvedProps.className === void 0 && resolvedProps.style === void 0 && (childKids === void 0 || childKids === null || Array.isArray(childKids) && !childKids.length);
+    if (childlessStack) {
+      return null;
+    }
     const childContent = {
       id: childId,
       pattern: child.type,

package/dist/components/index.js CHANGED Viewed

@@ -15420,6 +15420,7 @@ var init_CodeBlock = __esm({
               ref: scrollRef,
               onCopy: handleSelectionCopy,
               dir: "ltr",
+              className: "[&_code]:!bg-transparent [&_code]:!p-0 [&_code]:!border-0 [&_code]:!shadow-none [&_span]:!bg-transparent",
               style: {
                 flex: 1,
                 minHeight: 0,
@@ -15577,7 +15578,12 @@ var init_MermaidDiagram = __esm({
             mermaid.initialize({
               startOnLoad: false,
               securityLevel: "strict",
-              theme: resolvedMode === "dark" ? "dark" : "default"
+              theme: resolvedMode === "dark" ? "dark" : "default",
+              // Mermaid's default is to append its "Syntax error in text" bomb
+              // graphic to <body> on a failed parse, outside any error boundary —
+              // the catch below owns failure presentation (source + log), so the
+              // library must not paint its own.
+              suppressErrorRendering: true
             });
             const domId = `mermaid-${reactId.replace(/[^a-zA-Z0-9]/g, "")}`;
             let firstError = null;
@@ -54043,6 +54049,11 @@ function renderPatternChildren(children, onDismiss, parentId = "root", parentPat
     if (_childChildren !== void 0 && nestedProps === void 0) {
       resolvedProps.children = _childChildren;
     }
+    const childKids = resolvedProps.children;
+    const childlessStack = (_childType === "stack" || _childType === "vstack" || _childType === "hstack") && resolvedProps.className === void 0 && resolvedProps.style === void 0 && (childKids === void 0 || childKids === null || Array.isArray(childKids) && !childKids.length);
+    if (childlessStack) {
+      return null;
+    }
     const childContent = {
       id: childId,
       pattern: child.type,

package/dist/providers/index.cjs CHANGED Viewed

@@ -19700,6 +19700,7 @@ var init_CodeBlock = __esm({
               ref: scrollRef,
               onCopy: handleSelectionCopy,
               dir: "ltr",
+              className: "[&_code]:!bg-transparent [&_code]:!p-0 [&_code]:!border-0 [&_code]:!shadow-none [&_span]:!bg-transparent",
               style: {
                 flex: 1,
                 minHeight: 0,
@@ -19857,7 +19858,12 @@ var init_MermaidDiagram = __esm({
             mermaid.initialize({
               startOnLoad: false,
               securityLevel: "strict",
-              theme: resolvedMode === "dark" ? "dark" : "default"
+              theme: resolvedMode === "dark" ? "dark" : "default",
+              // Mermaid's default is to append its "Syntax error in text" bomb
+              // graphic to <body> on a failed parse, outside any error boundary —
+              // the catch below owns failure presentation (source + log), so the
+              // library must not paint its own.
+              suppressErrorRendering: true
             });
             const domId = `mermaid-${reactId.replace(/[^a-zA-Z0-9]/g, "")}`;
             let firstError = null;
@@ -52838,6 +52844,11 @@ function renderPatternChildren(children, onDismiss, parentId = "root", parentPat
     if (_childChildren !== void 0 && nestedProps === void 0) {
       resolvedProps.children = _childChildren;
     }
+    const childKids = resolvedProps.children;
+    const childlessStack = (_childType === "stack" || _childType === "vstack" || _childType === "hstack") && resolvedProps.className === void 0 && resolvedProps.style === void 0 && (childKids === void 0 || childKids === null || Array.isArray(childKids) && !childKids.length);
+    if (childlessStack) {
+      return null;
+    }
     const childContent = {
       id: childId,
       pattern: child.type,

package/dist/providers/index.js CHANGED Viewed

@@ -19626,6 +19626,7 @@ var init_CodeBlock = __esm({
               ref: scrollRef,
               onCopy: handleSelectionCopy,
               dir: "ltr",
+              className: "[&_code]:!bg-transparent [&_code]:!p-0 [&_code]:!border-0 [&_code]:!shadow-none [&_span]:!bg-transparent",
               style: {
                 flex: 1,
                 minHeight: 0,
@@ -19783,7 +19784,12 @@ var init_MermaidDiagram = __esm({
             mermaid.initialize({
               startOnLoad: false,
               securityLevel: "strict",
-              theme: resolvedMode === "dark" ? "dark" : "default"
+              theme: resolvedMode === "dark" ? "dark" : "default",
+              // Mermaid's default is to append its "Syntax error in text" bomb
+              // graphic to <body> on a failed parse, outside any error boundary —
+              // the catch below owns failure presentation (source + log), so the
+              // library must not paint its own.
+              suppressErrorRendering: true
             });
             const domId = `mermaid-${reactId.replace(/[^a-zA-Z0-9]/g, "")}`;
             let firstError = null;
@@ -52764,6 +52770,11 @@ function renderPatternChildren(children, onDismiss, parentId = "root", parentPat
     if (_childChildren !== void 0 && nestedProps === void 0) {
       resolvedProps.children = _childChildren;
     }
+    const childKids = resolvedProps.children;
+    const childlessStack = (_childType === "stack" || _childType === "vstack" || _childType === "hstack") && resolvedProps.className === void 0 && resolvedProps.style === void 0 && (childKids === void 0 || childKids === null || Array.isArray(childKids) && !childKids.length);
+    if (childlessStack) {
+      return null;
+    }
     const childContent = {
       id: childId,
       pattern: child.type,

package/dist/runtime/index.cjs CHANGED Viewed

@@ -19779,6 +19779,7 @@ var init_CodeBlock = __esm({
               ref: scrollRef,
               onCopy: handleSelectionCopy,
               dir: "ltr",
+              className: "[&_code]:!bg-transparent [&_code]:!p-0 [&_code]:!border-0 [&_code]:!shadow-none [&_span]:!bg-transparent",
               style: {
                 flex: 1,
                 minHeight: 0,
@@ -19936,7 +19937,12 @@ var init_MermaidDiagram = __esm({
             mermaid.initialize({
               startOnLoad: false,
               securityLevel: "strict",
-              theme: resolvedMode === "dark" ? "dark" : "default"
+              theme: resolvedMode === "dark" ? "dark" : "default",
+              // Mermaid's default is to append its "Syntax error in text" bomb
+              // graphic to <body> on a failed parse, outside any error boundary —
+              // the catch below owns failure presentation (source + log), so the
+              // library must not paint its own.
+              suppressErrorRendering: true
             });
             const domId = `mermaid-${reactId.replace(/[^a-zA-Z0-9]/g, "")}`;
             let firstError = null;
@@ -52497,6 +52503,11 @@ function renderPatternChildren(children, onDismiss, parentId = "root", parentPat
     if (_childChildren !== void 0 && nestedProps === void 0) {
       resolvedProps.children = _childChildren;
     }
+    const childKids = resolvedProps.children;
+    const childlessStack = (_childType === "stack" || _childType === "vstack" || _childType === "hstack") && resolvedProps.className === void 0 && resolvedProps.style === void 0 && (childKids === void 0 || childKids === null || Array.isArray(childKids) && !childKids.length);
+    if (childlessStack) {
+      return null;
+    }
     const childContent = {
       id: childId,
       pattern: child.type,
@@ -54844,6 +54855,30 @@ function TraitInitializer({ traits: traits2, routeParams, orbitalNames, onNaviga
   }, [bridge.connected, orbitalNames, bridge.sendEvent, uiSlots, onNavigate, onNavigateBack, embeddedTraits, activeTraitNames, withActiveTraits, routeParams]);
   return /* @__PURE__ */ jsxRuntime.jsx(providers.EntityBindingContext.Provider, { value: entityBindingSource, children });
 }
+function FitToBox({ children }) {
+  const outerRef = React87.useRef(null);
+  const innerRef = React87.useRef(null);
+  const [scale, setScale] = React87.useState(1);
+  React87.useEffect(() => {
+    const outer = outerRef.current;
+    const inner = innerRef.current;
+    if (!outer || !inner) return;
+    const update = () => {
+      const sw = inner.scrollWidth;
+      const sh = inner.scrollHeight;
+      const cw = outer.clientWidth;
+      const ch = outer.clientHeight;
+      if (!sw || !sh || !cw || !ch) return;
+      setScale(Math.min(1, cw / sw, ch / sh));
+    };
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(outer);
+    ro.observe(inner);
+    return () => ro.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: outerRef, className: "relative h-full w-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: innerRef, style: { transform: `scale(${scale})`, transformOrigin: "top left", width: "fit-content" }, children }) });
+}
 function SchemaRunner({ schema, serverUrl, transport, getAccessToken, mockData, pageName, routeParams, onNavigate, onNavigateBack, onLocalFallback, persistence }) {
   const { traits: traits2, allEntities, allTraits, ir } = useResolvedSchema(schema, pageName);
   const allPageTraits = React87.useMemo(() => {
@@ -55029,6 +55064,7 @@ function OrbPreview({
   getAccessToken,
   initialPagePath,
   isolated = false,
+  fit = false,
   user = null
 }) {
   if (serverUrl && transport) {
@@ -55185,7 +55221,7 @@ function OrbPreview({
     Box,
     {
       ref: containerRef,
-      className: `overflow-auto border border-[var(--color-border)] rounded-[var(--radius-md)] ${className ?? ""}`,
+      className: `${fit ? "overflow-hidden" : "overflow-auto"} border border-[var(--color-border)] rounded-[var(--radius-md)] ${className ?? ""}`,
       style: { height },
       children: [
         localFallback && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "px-3 py-2 bg-[var(--color-warning)] bg-opacity-10 border-b border-[var(--color-warning)] flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-[var(--color-warning-foreground)] flex-1", children: "Preview server unreachable \u2014 running locally. Server-side state and persistence are disabled." }) }),
@@ -55198,7 +55234,22 @@ function OrbPreview({
             storageKey: `almadar:navstack:${parseResult.schema.name ?? "preview"}`,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(NavStackRefBridge, { apiRef: navStackRef }),
-              /* @__PURE__ */ jsxRuntime.jsx(providers.OrbitalProvider, { initialData: effectiveMockData, skipTheme: true, verification: true, isolated, user, children: /* @__PURE__ */ jsxRuntime.jsx(context.UISlotProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsxRuntime.jsx(providers.OrbitalProvider, { initialData: effectiveMockData, skipTheme: true, verification: true, isolated, user, children: /* @__PURE__ */ jsxRuntime.jsx(context.UISlotProvider, { children: fit ? /* @__PURE__ */ jsxRuntime.jsx(FitToBox, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                SchemaRunner,
+                {
+                  schema: parseResult.schema,
+                  serverUrl,
+                  transport,
+                  getAccessToken,
+                  mockData: effectiveMockData,
+                  pageName: currentPage,
+                  routeParams,
+                  onNavigate: handleNavigateEffect,
+                  onNavigateBack: handleNavigateBack,
+                  onLocalFallback: handleLocalFallback,
+                  persistence
+                }
+              ) }) : /* @__PURE__ */ jsxRuntime.jsx(
                 SchemaRunner,
                 {
                   schema: parseResult.schema,
@@ -55229,7 +55280,8 @@ function BrowserPlayground({
   initialPagePath,
   height,
   className,
-  paused
+  paused,
+  fit
 }) {
   const [runtime] = React87.useState(
     () => new OrbitalServerRuntime.OrbitalServerRuntime({ mode, debug: false })
@@ -55291,6 +55343,7 @@ function BrowserPlayground({
       initialPagePath,
       height,
       className,
+      fit,
       isolated: true
     }
   );

package/dist/runtime/index.d.cts CHANGED Viewed

@@ -293,6 +293,12 @@ interface OrbPreviewProps {
      * Default false (standalone previews own the global bridge).
      */
     isolated?: boolean;
+    /**
+     * Scale the rendered content down (never up) so it fits the container
+     * without scrollbars. For fixed-intrinsic-size content (game canvases);
+     * leave off for flow layouts, which should keep their internal scroll.
+     */
+    fit?: boolean;
 }
 /**
  * Renders a live preview of an Orbital schema.
@@ -307,7 +313,7 @@ interface OrbPreviewProps {
  * <OrbPreview schema={schema} serverUrl="/api/orbitals" />
  * ```
  */
-declare function OrbPreview({ schema, mockData, autoMock, height, className, serverUrl, transport, getAccessToken, initialPagePath, isolated, user, }: OrbPreviewProps): React__default.ReactElement;
+declare function OrbPreview({ schema, mockData, autoMock, height, className, serverUrl, transport, getAccessToken, initialPagePath, isolated, fit, user, }: OrbPreviewProps): React__default.ReactElement;
 declare namespace OrbPreview {
     var displayName: string;
 }
@@ -344,8 +350,10 @@ interface BrowserPlaygroundProps {
     className?: string;
     /** Pause the in-process runtime's tick scheduler. Default: undefined (running, same as today). */
     paused?: boolean;
+    /** Scale content down (never up) to fit the container without scrollbars — for fixed-size content like game canvases. Forwarded to OrbPreview. */
+    fit?: boolean;
 }
-declare function BrowserPlayground({ schema, mode, initialPagePath, height, className, paused, }: BrowserPlaygroundProps): React__default.ReactElement;
+declare function BrowserPlayground({ schema, mode, initialPagePath, height, className, paused, fit, }: BrowserPlaygroundProps): React__default.ReactElement;
 /**
  * OrbitalPluginHost — runs an ordinary behavior headless against the

package/dist/runtime/index.d.ts CHANGED Viewed

@@ -293,6 +293,12 @@ interface OrbPreviewProps {
      * Default false (standalone previews own the global bridge).
      */
     isolated?: boolean;
+    /**
+     * Scale the rendered content down (never up) so it fits the container
+     * without scrollbars. For fixed-intrinsic-size content (game canvases);
+     * leave off for flow layouts, which should keep their internal scroll.
+     */
+    fit?: boolean;
 }
 /**
  * Renders a live preview of an Orbital schema.
@@ -307,7 +313,7 @@ interface OrbPreviewProps {
  * <OrbPreview schema={schema} serverUrl="/api/orbitals" />
  * ```
  */
-declare function OrbPreview({ schema, mockData, autoMock, height, className, serverUrl, transport, getAccessToken, initialPagePath, isolated, user, }: OrbPreviewProps): React__default.ReactElement;
+declare function OrbPreview({ schema, mockData, autoMock, height, className, serverUrl, transport, getAccessToken, initialPagePath, isolated, fit, user, }: OrbPreviewProps): React__default.ReactElement;
 declare namespace OrbPreview {
     var displayName: string;
 }
@@ -344,8 +350,10 @@ interface BrowserPlaygroundProps {
     className?: string;
     /** Pause the in-process runtime's tick scheduler. Default: undefined (running, same as today). */
     paused?: boolean;
+    /** Scale content down (never up) to fit the container without scrollbars — for fixed-size content like game canvases. Forwarded to OrbPreview. */
+    fit?: boolean;
 }
-declare function BrowserPlayground({ schema, mode, initialPagePath, height, className, paused, }: BrowserPlaygroundProps): React__default.ReactElement;
+declare function BrowserPlayground({ schema, mode, initialPagePath, height, className, paused, fit, }: BrowserPlaygroundProps): React__default.ReactElement;
 /**
  * OrbitalPluginHost — runs an ordinary behavior headless against the

package/dist/runtime/index.js CHANGED Viewed

@@ -19705,6 +19705,7 @@ var init_CodeBlock = __esm({
               ref: scrollRef,
               onCopy: handleSelectionCopy,
               dir: "ltr",
+              className: "[&_code]:!bg-transparent [&_code]:!p-0 [&_code]:!border-0 [&_code]:!shadow-none [&_span]:!bg-transparent",
               style: {
                 flex: 1,
                 minHeight: 0,
@@ -19862,7 +19863,12 @@ var init_MermaidDiagram = __esm({
             mermaid.initialize({
               startOnLoad: false,
               securityLevel: "strict",
-              theme: resolvedMode === "dark" ? "dark" : "default"
+              theme: resolvedMode === "dark" ? "dark" : "default",
+              // Mermaid's default is to append its "Syntax error in text" bomb
+              // graphic to <body> on a failed parse, outside any error boundary —
+              // the catch below owns failure presentation (source + log), so the
+              // library must not paint its own.
+              suppressErrorRendering: true
             });
             const domId = `mermaid-${reactId.replace(/[^a-zA-Z0-9]/g, "")}`;
             let firstError = null;
@@ -52423,6 +52429,11 @@ function renderPatternChildren(children, onDismiss, parentId = "root", parentPat
     if (_childChildren !== void 0 && nestedProps === void 0) {
       resolvedProps.children = _childChildren;
     }
+    const childKids = resolvedProps.children;
+    const childlessStack = (_childType === "stack" || _childType === "vstack" || _childType === "hstack") && resolvedProps.className === void 0 && resolvedProps.style === void 0 && (childKids === void 0 || childKids === null || Array.isArray(childKids) && !childKids.length);
+    if (childlessStack) {
+      return null;
+    }
     const childContent = {
       id: childId,
       pattern: child.type,
@@ -54770,6 +54781,30 @@ function TraitInitializer({ traits: traits2, routeParams, orbitalNames, onNaviga
   }, [bridge.connected, orbitalNames, bridge.sendEvent, uiSlots, onNavigate, onNavigateBack, embeddedTraits, activeTraitNames, withActiveTraits, routeParams]);
   return /* @__PURE__ */ jsx(EntityBindingContext.Provider, { value: entityBindingSource, children });
 }
+function FitToBox({ children }) {
+  const outerRef = useRef(null);
+  const innerRef = useRef(null);
+  const [scale, setScale] = useState(1);
+  useEffect(() => {
+    const outer = outerRef.current;
+    const inner = innerRef.current;
+    if (!outer || !inner) return;
+    const update = () => {
+      const sw = inner.scrollWidth;
+      const sh = inner.scrollHeight;
+      const cw = outer.clientWidth;
+      const ch = outer.clientHeight;
+      if (!sw || !sh || !cw || !ch) return;
+      setScale(Math.min(1, cw / sw, ch / sh));
+    };
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(outer);
+    ro.observe(inner);
+    return () => ro.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsx("div", { ref: outerRef, className: "relative h-full w-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { ref: innerRef, style: { transform: `scale(${scale})`, transformOrigin: "top left", width: "fit-content" }, children }) });
+}
 function SchemaRunner({ schema, serverUrl, transport, getAccessToken, mockData, pageName, routeParams, onNavigate, onNavigateBack, onLocalFallback, persistence }) {
   const { traits: traits2, allEntities, allTraits, ir } = useResolvedSchema(schema, pageName);
   const allPageTraits = useMemo(() => {
@@ -54955,6 +54990,7 @@ function OrbPreview({
   getAccessToken,
   initialPagePath,
   isolated = false,
+  fit = false,
   user = null
 }) {
   if (serverUrl && transport) {
@@ -55111,7 +55147,7 @@ function OrbPreview({
     Box,
     {
       ref: containerRef,
-      className: `overflow-auto border border-[var(--color-border)] rounded-[var(--radius-md)] ${className ?? ""}`,
+      className: `${fit ? "overflow-hidden" : "overflow-auto"} border border-[var(--color-border)] rounded-[var(--radius-md)] ${className ?? ""}`,
       style: { height },
       children: [
         localFallback && /* @__PURE__ */ jsx(Box, { className: "px-3 py-2 bg-[var(--color-warning)] bg-opacity-10 border-b border-[var(--color-warning)] flex items-center gap-2", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-[var(--color-warning-foreground)] flex-1", children: "Preview server unreachable \u2014 running locally. Server-side state and persistence are disabled." }) }),
@@ -55124,7 +55160,22 @@ function OrbPreview({
             storageKey: `almadar:navstack:${parseResult.schema.name ?? "preview"}`,
             children: [
               /* @__PURE__ */ jsx(NavStackRefBridge, { apiRef: navStackRef }),
-              /* @__PURE__ */ jsx(OrbitalProvider, { initialData: effectiveMockData, skipTheme: true, verification: true, isolated, user, children: /* @__PURE__ */ jsx(UISlotProvider, { children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(OrbitalProvider, { initialData: effectiveMockData, skipTheme: true, verification: true, isolated, user, children: /* @__PURE__ */ jsx(UISlotProvider, { children: fit ? /* @__PURE__ */ jsx(FitToBox, { children: /* @__PURE__ */ jsx(
+                SchemaRunner,
+                {
+                  schema: parseResult.schema,
+                  serverUrl,
+                  transport,
+                  getAccessToken,
+                  mockData: effectiveMockData,
+                  pageName: currentPage,
+                  routeParams,
+                  onNavigate: handleNavigateEffect,
+                  onNavigateBack: handleNavigateBack,
+                  onLocalFallback: handleLocalFallback,
+                  persistence
+                }
+              ) }) : /* @__PURE__ */ jsx(
                 SchemaRunner,
                 {
                   schema: parseResult.schema,
@@ -55155,7 +55206,8 @@ function BrowserPlayground({
   initialPagePath,
   height,
   className,
-  paused
+  paused,
+  fit
 }) {
   const [runtime] = useState(
     () => new OrbitalServerRuntime({ mode, debug: false })
@@ -55217,6 +55269,7 @@ function BrowserPlayground({
       initialPagePath,
       height,
       className,
+      fit,
       isolated: true
     }
   );

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "6.16.0",
+  "version": "6.18.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [
@@ -121,8 +121,8 @@
     "@almadar/core": "^10.92.0",
     "@almadar/evaluator": "^2.45.0",
     "@almadar/logger": "^1.12.0",
-    "@almadar/runtime": "^6.77.0",
-    "@almadar/std": "^16.213.0",
+    "@almadar/runtime": "^6.78.0",
+    "@almadar/std": "^16.214.0",
     "@almadar/syntax": "^1.17.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",