@almadar/ui 6.16.0 → 6.17.0

package/dist/avl/index.cjs

@@ -60617,6 +60617,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 +60826,7 @@ function OrbPreview({
   getAccessToken,
   initialPagePath,
   isolated = false,
+  fit = false,
   user = null
 }) {
   if (serverUrl && transport) {
@@ -60958,7 +60983,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 +60996,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 +61042,8 @@ function BrowserPlayground({
   initialPagePath,
   height,
   className,
-  paused
+  paused,
+  fit
 }) {
   const [runtime] = React96.useState(
     () => new OrbitalServerRuntime.OrbitalServerRuntime({ mode, debug: false })
@@ -61064,6 +61105,7 @@ function BrowserPlayground({
       initialPagePath,
       height,
       className,
+      fit,
       isolated: true
     }
   );

package/dist/avl/index.js

@@ -60541,6 +60541,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 +60750,7 @@ function OrbPreview({
   getAccessToken,
   initialPagePath,
   isolated = false,
+  fit = false,
   user = null
 }) {
   if (serverUrl && transport) {
@@ -60882,7 +60907,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 +60920,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 +60966,8 @@ function BrowserPlayground({
   initialPagePath,
   height,
   className,
-  paused
+  paused,
+  fit
 }) {
   const [runtime] = useState(
     () => new OrbitalServerRuntime({ mode, debug: false })
@@ -60988,6 +61029,7 @@ function BrowserPlayground({
       initialPagePath,
       height,
       className,
+      fit,
       isolated: true
     }
   );

package/dist/components/index.d.cts

@@ -7942,7 +7942,7 @@ interface DataGridProps extends DataDndProps {
      *  field whose type is relation. Same contract DetailPanel takes. */
     relationsData?: Record<string, readonly RelationOption[]>;
 }
-declare function DataGrid({ entity, fields, columns, itemActions, maxInlineActions, scrollX, cols, gap, minCardWidth, className, isLoading, error, imageField, selectable, selectionEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable, dropEvent, reorderEvent, positionEvent, dndItemIdField, dndRoot, look, relationsData, }: DataGridProps): string | number | bigint | boolean | React__default.JSX.Element | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | null | undefined;
+declare function DataGrid({ entity, fields, columns, itemActions, maxInlineActions, scrollX, cols, gap, minCardWidth, className, isLoading, error, imageField, selectable, selectionEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable, dropEvent, reorderEvent, positionEvent, dndItemIdField, dndRoot, look, relationsData, }: DataGridProps): string | number | bigint | boolean | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | React__default.JSX.Element | null | undefined;
 declare namespace DataGrid {
     var displayName: string;
 }
@@ -8104,7 +8104,7 @@ interface DataListProps extends DataDndProps {
      *  field whose type is relation. Same contract DetailPanel takes. */
     relationsData?: Record<string, readonly RelationOption[]>;
 }
-declare function DataList({ entity, fields, columns, itemActions, maxInlineActions, itemClickEvent, gap, variant, groupBy, senderField, senderLabelField, currentUser, emptyMessage, className, isLoading, error, reorderable: _reorderable, reorderEvent: _reorderEvent, swipeLeftEvent: _swipeLeftEvent, swipeLeftActions: _swipeLeftActions, swipeRightEvent: _swipeRightEvent, swipeRightActions: _swipeRightActions, longPressEvent: _longPressEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, sortBy, sortDirection, renderItem: schemaRenderItem, dragGroup, accepts, sortable: sortableProp, dropEvent, reorderEvent: dndReorderEvent, positionEvent, dndItemIdField, dndRoot, look, relationsData, }: DataListProps): string | number | bigint | boolean | React__default.JSX.Element | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | null | undefined;
+declare function DataList({ entity, fields, columns, itemActions, maxInlineActions, itemClickEvent, gap, variant, groupBy, senderField, senderLabelField, currentUser, emptyMessage, className, isLoading, error, reorderable: _reorderable, reorderEvent: _reorderEvent, swipeLeftEvent: _swipeLeftEvent, swipeLeftActions: _swipeLeftActions, swipeRightEvent: _swipeRightEvent, swipeRightActions: _swipeRightActions, longPressEvent: _longPressEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, sortBy, sortDirection, renderItem: schemaRenderItem, dragGroup, accepts, sortable: sortableProp, dropEvent, reorderEvent: dndReorderEvent, positionEvent, dndItemIdField, dndRoot, look, relationsData, }: DataListProps): string | number | bigint | boolean | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | React__default.JSX.Element | null | undefined;
 declare namespace DataList {
     var displayName: string;
 }

package/dist/components/index.d.ts

@@ -7942,7 +7942,7 @@ interface DataGridProps extends DataDndProps {
      *  field whose type is relation. Same contract DetailPanel takes. */
     relationsData?: Record<string, readonly RelationOption[]>;
 }
-declare function DataGrid({ entity, fields, columns, itemActions, maxInlineActions, scrollX, cols, gap, minCardWidth, className, isLoading, error, imageField, selectable, selectionEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable, dropEvent, reorderEvent, positionEvent, dndItemIdField, dndRoot, look, relationsData, }: DataGridProps): string | number | bigint | boolean | React__default.JSX.Element | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | null | undefined;
+declare function DataGrid({ entity, fields, columns, itemActions, maxInlineActions, scrollX, cols, gap, minCardWidth, className, isLoading, error, imageField, selectable, selectionEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable, dropEvent, reorderEvent, positionEvent, dndItemIdField, dndRoot, look, relationsData, }: DataGridProps): string | number | bigint | boolean | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | React__default.JSX.Element | null | undefined;
 declare namespace DataGrid {
     var displayName: string;
 }
@@ -8104,7 +8104,7 @@ interface DataListProps extends DataDndProps {
      *  field whose type is relation. Same contract DetailPanel takes. */
     relationsData?: Record<string, readonly RelationOption[]>;
 }
-declare function DataList({ entity, fields, columns, itemActions, maxInlineActions, itemClickEvent, gap, variant, groupBy, senderField, senderLabelField, currentUser, emptyMessage, className, isLoading, error, reorderable: _reorderable, reorderEvent: _reorderEvent, swipeLeftEvent: _swipeLeftEvent, swipeLeftActions: _swipeLeftActions, swipeRightEvent: _swipeRightEvent, swipeRightActions: _swipeRightActions, longPressEvent: _longPressEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, sortBy, sortDirection, renderItem: schemaRenderItem, dragGroup, accepts, sortable: sortableProp, dropEvent, reorderEvent: dndReorderEvent, positionEvent, dndItemIdField, dndRoot, look, relationsData, }: DataListProps): string | number | bigint | boolean | React__default.JSX.Element | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | null | undefined;
+declare function DataList({ entity, fields, columns, itemActions, maxInlineActions, itemClickEvent, gap, variant, groupBy, senderField, senderLabelField, currentUser, emptyMessage, className, isLoading, error, reorderable: _reorderable, reorderEvent: _reorderEvent, swipeLeftEvent: _swipeLeftEvent, swipeLeftActions: _swipeLeftActions, swipeRightEvent: _swipeRightEvent, swipeRightActions: _swipeRightActions, longPressEvent: _longPressEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, sortBy, sortDirection, renderItem: schemaRenderItem, dragGroup, accepts, sortable: sortableProp, dropEvent, reorderEvent: dndReorderEvent, positionEvent, dndItemIdField, dndRoot, look, relationsData, }: DataListProps): string | number | bigint | boolean | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | React__default.JSX.Element | null | undefined;
 declare namespace DataList {
     var displayName: string;
 }

package/dist/runtime/index.cjs

@@ -54844,6 +54844,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 +55053,7 @@ function OrbPreview({
   getAccessToken,
   initialPagePath,
   isolated = false,
+  fit = false,
   user = null
 }) {
   if (serverUrl && transport) {
@@ -55185,7 +55210,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 +55223,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 +55269,8 @@ function BrowserPlayground({
   initialPagePath,
   height,
   className,
-  paused
+  paused,
+  fit
 }) {
   const [runtime] = React87.useState(
     () => new OrbitalServerRuntime.OrbitalServerRuntime({ mode, debug: false })
@@ -55291,6 +55332,7 @@ function BrowserPlayground({
       initialPagePath,
       height,
       className,
+      fit,
       isolated: true
     }
   );

package/dist/runtime/index.d.cts

@@ -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

@@ -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

@@ -54770,6 +54770,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 +54979,7 @@ function OrbPreview({
   getAccessToken,
   initialPagePath,
   isolated = false,
+  fit = false,
   user = null
 }) {
   if (serverUrl && transport) {
@@ -55111,7 +55136,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 +55149,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 +55195,8 @@ function BrowserPlayground({
   initialPagePath,
   height,
   className,
-  paused
+  paused,
+  fit
 }) {
   const [runtime] = useState(
     () => new OrbitalServerRuntime({ mode, debug: false })
@@ -55217,6 +55258,7 @@ function BrowserPlayground({
       initialPagePath,
       height,
       className,
+      fit,
       isolated: true
     }
   );

package/package.json

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