@almadar/ui 4.50.16 → 4.50.18

package/dist/context/index.cjs

@@ -622,6 +622,71 @@ function useTheme() {
 }
 var ThemeContext_default = ThemeContext;
 
+// context/themeTokens.ts
+function themeTokensToCssVars(tokens, mode = "light", darkVariant) {
+  const vars = {};
+  const isDark = mode === "dark";
+  const pickColors = isDark && darkVariant?.colors ? darkVariant.colors : tokens.colors;
+  if (pickColors) {
+    for (const [key, value] of Object.entries(pickColors)) {
+      vars[`--color-${key}`] = value;
+    }
+    if (isDark && darkVariant?.colors && tokens.colors) {
+      for (const [key, value] of Object.entries(tokens.colors)) {
+        const varName = `--color-${key}`;
+        if (!(varName in vars)) vars[varName] = value;
+      }
+    }
+  }
+  const pickRadii = isDark && darkVariant?.radii ? darkVariant.radii : tokens.radii;
+  if (pickRadii) {
+    for (const [key, value] of Object.entries(pickRadii)) {
+      vars[`--radius-${key}`] = value;
+    }
+  }
+  const pickSpacing = isDark && darkVariant?.spacing ? darkVariant.spacing : tokens.spacing;
+  if (pickSpacing) {
+    for (const [key, value] of Object.entries(pickSpacing)) {
+      vars[`--space-${key}`] = value;
+    }
+  }
+  const pickTypography = isDark && darkVariant?.typography ? darkVariant.typography : tokens.typography;
+  if (pickTypography) {
+    for (const [key, value] of Object.entries(pickTypography)) {
+      vars[`--${key}`] = value;
+    }
+  }
+  const pickShadows = isDark && darkVariant?.shadows ? darkVariant.shadows : tokens.shadows;
+  if (pickShadows) {
+    for (const [key, value] of Object.entries(pickShadows)) {
+      vars[`--shadow-${key}`] = value;
+    }
+  }
+  return vars;
+}
+function resolveThemeForRuntime(theme) {
+  if (theme === void 0) return void 0;
+  if (typeof theme === "string") return void 0;
+  return theme;
+}
+function OrbitalThemeProvider({ theme, children }) {
+  const resolved = resolveThemeForRuntime(theme);
+  const { resolvedMode } = useTheme();
+  if (!resolved) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  const vars = themeTokensToCssVars(resolved.tokens, resolvedMode, resolved.variants?.dark);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-orbital-theme": resolved.name,
+      style: { display: "contents", ...vars },
+      children
+    }
+  );
+}
+OrbitalThemeProvider.displayName = "OrbitalThemeProvider";
+
 // context/DesignThemeContext.tsx
 var DesignThemeProvider = ThemeProvider;
 function useDesignTheme() {
@@ -743,12 +808,15 @@ exports.BUILT_IN_THEMES = BUILT_IN_THEMES;
 exports.CurrentPagePathContext = CurrentPagePathContext;
 exports.CurrentPagePathProvider = CurrentPagePathProvider;
 exports.DesignThemeProvider = DesignThemeProvider;
+exports.OrbitalThemeProvider = OrbitalThemeProvider;
 exports.ThemeContext = ThemeContext_default;
 exports.ThemeProvider = ThemeProvider;
 exports.UISlotContext = UISlotContext;
 exports.UISlotProvider = UISlotProvider;
 exports.UserContext = UserContext;
 exports.UserProvider = UserProvider;
+exports.resolveThemeForRuntime = resolveThemeForRuntime;
+exports.themeTokensToCssVars = themeTokensToCssVars;
 exports.useCurrentPagePath = useCurrentPagePath;
 exports.useDesignTheme = useDesignTheme;
 exports.useHasPermission = useHasPermission;

package/dist/context/index.d.ts

@@ -4,6 +4,8 @@
 export { UISlotProvider, useUISlots, useSlotContent, useSlotHasContent, UISlotContext, type UISlotManager, type UISlot, type SlotContent, type RenderUIConfig, type SlotAnimation, type SlotChangeCallback, } from "./UISlotContext";
 export { ThemeProvider, useTheme, BUILT_IN_THEMES, type ThemeDefinition, type ThemeProviderProps, type ColorMode, type ResolvedMode, type DesignTheme, } from "./ThemeContext";
 export { default as ThemeContext } from "./ThemeContext";
+export { themeTokensToCssVars, resolveThemeForRuntime, type ThemeMode, } from "./themeTokens";
+export { OrbitalThemeProvider, type OrbitalThemeProviderProps, } from "./OrbitalThemeProvider";
 export { DesignThemeProvider, useDesignTheme } from "./DesignThemeContext";
 export { CurrentPagePathProvider, CurrentPagePathContext, useCurrentPagePath, type CurrentPagePathProviderProps, } from "./CurrentPagePathContext";
 export { UserProvider, UserContext, useUser, useHasRole, useHasPermission, useUserForEvaluation, ANONYMOUS_USER, type UserData, type UserContextValue, type UserProviderProps, } from "./UserContext";

package/dist/context/index.js

@@ -1,6 +1,6 @@
 import { createContext, useMemo, useContext, useState, useEffect, useCallback, useRef } from 'react';
 import { createLogger } from '@almadar/logger';
-import { jsx } from 'react/jsx-runtime';
+import { jsx, Fragment } from 'react/jsx-runtime';
 
 var log = createLogger("almadar:ui:ui-slots");
 var DEFAULT_SOURCE_KEY = "__default__";
@@ -620,6 +620,71 @@ function useTheme() {
 }
 var ThemeContext_default = ThemeContext;
 
+// context/themeTokens.ts
+function themeTokensToCssVars(tokens, mode = "light", darkVariant) {
+  const vars = {};
+  const isDark = mode === "dark";
+  const pickColors = isDark && darkVariant?.colors ? darkVariant.colors : tokens.colors;
+  if (pickColors) {
+    for (const [key, value] of Object.entries(pickColors)) {
+      vars[`--color-${key}`] = value;
+    }
+    if (isDark && darkVariant?.colors && tokens.colors) {
+      for (const [key, value] of Object.entries(tokens.colors)) {
+        const varName = `--color-${key}`;
+        if (!(varName in vars)) vars[varName] = value;
+      }
+    }
+  }
+  const pickRadii = isDark && darkVariant?.radii ? darkVariant.radii : tokens.radii;
+  if (pickRadii) {
+    for (const [key, value] of Object.entries(pickRadii)) {
+      vars[`--radius-${key}`] = value;
+    }
+  }
+  const pickSpacing = isDark && darkVariant?.spacing ? darkVariant.spacing : tokens.spacing;
+  if (pickSpacing) {
+    for (const [key, value] of Object.entries(pickSpacing)) {
+      vars[`--space-${key}`] = value;
+    }
+  }
+  const pickTypography = isDark && darkVariant?.typography ? darkVariant.typography : tokens.typography;
+  if (pickTypography) {
+    for (const [key, value] of Object.entries(pickTypography)) {
+      vars[`--${key}`] = value;
+    }
+  }
+  const pickShadows = isDark && darkVariant?.shadows ? darkVariant.shadows : tokens.shadows;
+  if (pickShadows) {
+    for (const [key, value] of Object.entries(pickShadows)) {
+      vars[`--shadow-${key}`] = value;
+    }
+  }
+  return vars;
+}
+function resolveThemeForRuntime(theme) {
+  if (theme === void 0) return void 0;
+  if (typeof theme === "string") return void 0;
+  return theme;
+}
+function OrbitalThemeProvider({ theme, children }) {
+  const resolved = resolveThemeForRuntime(theme);
+  const { resolvedMode } = useTheme();
+  if (!resolved) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  const vars = themeTokensToCssVars(resolved.tokens, resolvedMode, resolved.variants?.dark);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-orbital-theme": resolved.name,
+      style: { display: "contents", ...vars },
+      children
+    }
+  );
+}
+OrbitalThemeProvider.displayName = "OrbitalThemeProvider";
+
 // context/DesignThemeContext.tsx
 var DesignThemeProvider = ThemeProvider;
 function useDesignTheme() {
@@ -736,4 +801,4 @@ function useUserForEvaluation() {
   return isLoggedIn && user ? user : void 0;
 }
 
-export { ANONYMOUS_USER, BUILT_IN_THEMES, CurrentPagePathContext, CurrentPagePathProvider, DesignThemeProvider, ThemeContext_default as ThemeContext, ThemeProvider, UISlotContext, UISlotProvider, UserContext, UserProvider, useCurrentPagePath, useDesignTheme, useHasPermission, useHasRole, useSlotContent, useSlotHasContent, useTheme, useUISlots, useUser, useUserForEvaluation };
+export { ANONYMOUS_USER, BUILT_IN_THEMES, CurrentPagePathContext, CurrentPagePathProvider, DesignThemeProvider, OrbitalThemeProvider, ThemeContext_default as ThemeContext, ThemeProvider, UISlotContext, UISlotProvider, UserContext, UserProvider, resolveThemeForRuntime, themeTokensToCssVars, useCurrentPagePath, useDesignTheme, useHasPermission, useHasRole, useSlotContent, useSlotHasContent, useTheme, useUISlots, useUser, useUserForEvaluation };

package/dist/context/themeTokens.d.ts

@@ -0,0 +1,55 @@
+/**
+ * themeTokens — runtime mirror of the orbital compiler's theme codegen.
+ *
+ * The compile path (orbital-rust/crates/orbital-shell-typescript/src/codegen/theme.rs)
+ * reads `OrbitalDefinition.theme.tokens` and emits CSS custom-property
+ * declarations into a `[data-theme="<name>-<mode>"]` block. The runtime
+ * does not parse compiled CSS — it reads the same `tokens` object directly
+ * and produces the same `{ '--color-primary': '…', '--radius-md': '…' }` map
+ * that the compiler emits.
+ *
+ * Keeping the two paths byte-identical at the variable level is the contract:
+ * editing tokens via the Studio Design System tab must produce the exact
+ * same rendered result as editing them in source and running `orbital
+ * compile`. The mapping rules here mirror `generate_tokens_css` /
+ * `generate_tokens_css_dark` (theme.rs:122–351).
+ *
+ * Compile vs runtime difference (intentional):
+ * - Compile emits the FULL set: schema overrides on top of defaults. This is
+ *   needed because the compiled CSS replaces the theme entirely.
+ * - Runtime emits ONLY the keys present in `tokens` (and `variants.dark`).
+ *   Missing keys cascade from the parent `[data-theme]` rule on the document
+ *   element. The provider scopes overrides to an orbital subtree without
+ *   shadowing inherited defaults.
+ *
+ * @packageDocumentation
+ */
+import type { ThemeDefinition, ThemeTokens, ThemeVariant, ThemeRef } from '@almadar/core';
+/** Resolved color mode. Mirrors `ThemeContext.resolvedMode`. */
+export type ThemeMode = 'light' | 'dark';
+/**
+ * Convert `ThemeTokens` (+ optional dark variant) into a CSS custom-property
+ * map keyed by variable name (e.g. `--color-primary`).
+ *
+ * Mapping rules (mirror theme.rs):
+ * - `tokens.colors.<k>`     → `--color-<k>`
+ * - `tokens.radii.<k>`      → `--radius-<k>`
+ * - `tokens.spacing.<k>`    → `--space-<k>`
+ * - `tokens.typography.<k>` → `--<k>` (keys already include their `font-`/
+ *                                       `letter-`/`line-` prefix)
+ * - `tokens.shadows.<k>`    → `--shadow-<k>` (schema key has no prefix)
+ *
+ * In `'dark'` mode, the `darkVariant` overrides are merged on top of the
+ * base tokens per category — same precedence the Rust compiler uses
+ * (`generate_tokens_css_dark`). Categories not present in `darkVariant` fall
+ * back to the base tokens.
+ */
+export declare function themeTokensToCssVars(tokens: ThemeTokens, mode?: ThemeMode, darkVariant?: ThemeVariant): Record<string, string>;
+/**
+ * `ThemeRef` is `ThemeDefinition | string`. When it's a string, it's an
+ * unresolved import reference (e.g. `"Ocean.theme"`) that should have been
+ * inlined by the compiler's import phase before runtime. If we still see a
+ * string here, the upstream resolution path didn't run — return `undefined`
+ * rather than guess. `OrbitalThemeProvider` falls through to passthrough.
+ */
+export declare function resolveThemeForRuntime(theme: ThemeRef | undefined): ThemeDefinition | undefined;

package/dist/providers/index.cjs

@@ -21325,6 +21325,7 @@ function useDataDnd(args) {
     sortable: sortable$1,
     dropEvent,
     reorderEvent,
+    positionEvent,
     dndItemIdField = "id",
     dndRoot,
     items,
@@ -21392,8 +21393,8 @@ function useDataDnd(args) {
   const [activeDrag, setActiveDrag] = React81__namespace.default.useState(null);
   const [overZoneGroup, setOverZoneGroup] = React81__namespace.default.useState(null);
   const meta = React81__namespace.default.useMemo(
-    () => ({ group: ownGroup, dropEvent, reorderEvent, itemIds, rawItems: items, idField: dndItemIdField }),
-    [ownGroup, dropEvent, reorderEvent, itemIds, items, dndItemIdField]
+    () => ({ group: ownGroup, dropEvent, reorderEvent, positionEvent, itemIds, rawItems: items, idField: dndItemIdField }),
+    [ownGroup, dropEvent, reorderEvent, positionEvent, itemIds, items, dndItemIdField]
   );
   React81__namespace.default.useEffect(() => {
     const target = isRoot ? null : parentRoot;
@@ -21479,6 +21480,20 @@ function useDataDnd(args) {
         dndLog.warn("dragEnd:abort:no-zone-resolved", { activeId: active.id, hasSource: !!sourceMeta, hasTarget: !!targetMeta });
         return;
       }
+      const emitPositions = (zoneMeta) => {
+        if (!zoneMeta.positionEvent) {
+          dndLog.debug("dragEnd:positions:no-event", { group: zoneMeta.group });
+          return;
+        }
+        const evt = `UI:${zoneMeta.positionEvent}`;
+        const order = optimisticOrdersRef.current.get(zoneMeta.group) ?? zoneMeta.rawItems;
+        order.forEach((it, idx) => {
+          const id = String(it[zoneMeta.idField]);
+          const position = idx * 1e3;
+          eventBus.emit(evt, { id, position });
+        });
+        dndLog.info("dragEnd:positions:emitted", { event: evt, group: zoneMeta.group, count: order.length });
+      };
       if (sourceMeta.group !== targetMeta.group) {
         if (targetMeta.dropEvent) {
           const evt = `UI:${targetMeta.dropEvent}`;
@@ -21498,6 +21513,8 @@ function useDataDnd(args) {
         } else {
           dndLog.warn("dragEnd:cross-container:no-dropEvent-on-target", { targetGroup: targetMeta.group });
         }
+        emitPositions(sourceMeta);
+        emitPositions(targetMeta);
         return;
       }
       if (oldIndex === newIndex) {
@@ -21520,6 +21537,7 @@ function useDataDnd(args) {
       } else {
         dndLog.debug("dragEnd:reorder:no-reorderEvent", { sourceGroup: sourceMeta.group });
       }
+      emitPositions(sourceMeta);
     },
     [eventBus]
   );
@@ -21824,6 +21842,7 @@ function DataGrid({
   sortable,
   dropEvent,
   reorderEvent,
+  positionEvent,
   dndItemIdField,
   dndRoot
 }) {
@@ -21841,6 +21860,7 @@ function DataGrid({
     sortable,
     dropEvent,
     reorderEvent,
+    positionEvent,
     dndItemIdField,
     dndRoot
   });
@@ -22233,6 +22253,7 @@ function DataList({
   sortable: sortableProp,
   dropEvent,
   reorderEvent: dndReorderEvent,
+  positionEvent,
   dndItemIdField,
   dndRoot
 }) {
@@ -22249,6 +22270,7 @@ function DataList({
     sortable: sortableProp,
     dropEvent,
     reorderEvent: dndReorderEvent,
+    positionEvent,
     dndItemIdField,
     dndRoot
   });

package/dist/providers/index.js

@@ -21279,6 +21279,7 @@ function useDataDnd(args) {
     sortable,
     dropEvent,
     reorderEvent,
+    positionEvent,
     dndItemIdField = "id",
     dndRoot,
     items,
@@ -21346,8 +21347,8 @@ function useDataDnd(args) {
   const [activeDrag, setActiveDrag] = React81__default.useState(null);
   const [overZoneGroup, setOverZoneGroup] = React81__default.useState(null);
   const meta = React81__default.useMemo(
-    () => ({ group: ownGroup, dropEvent, reorderEvent, itemIds, rawItems: items, idField: dndItemIdField }),
-    [ownGroup, dropEvent, reorderEvent, itemIds, items, dndItemIdField]
+    () => ({ group: ownGroup, dropEvent, reorderEvent, positionEvent, itemIds, rawItems: items, idField: dndItemIdField }),
+    [ownGroup, dropEvent, reorderEvent, positionEvent, itemIds, items, dndItemIdField]
   );
   React81__default.useEffect(() => {
     const target = isRoot ? null : parentRoot;
@@ -21433,6 +21434,20 @@ function useDataDnd(args) {
         dndLog.warn("dragEnd:abort:no-zone-resolved", { activeId: active.id, hasSource: !!sourceMeta, hasTarget: !!targetMeta });
         return;
       }
+      const emitPositions = (zoneMeta) => {
+        if (!zoneMeta.positionEvent) {
+          dndLog.debug("dragEnd:positions:no-event", { group: zoneMeta.group });
+          return;
+        }
+        const evt = `UI:${zoneMeta.positionEvent}`;
+        const order = optimisticOrdersRef.current.get(zoneMeta.group) ?? zoneMeta.rawItems;
+        order.forEach((it, idx) => {
+          const id = String(it[zoneMeta.idField]);
+          const position = idx * 1e3;
+          eventBus.emit(evt, { id, position });
+        });
+        dndLog.info("dragEnd:positions:emitted", { event: evt, group: zoneMeta.group, count: order.length });
+      };
       if (sourceMeta.group !== targetMeta.group) {
         if (targetMeta.dropEvent) {
           const evt = `UI:${targetMeta.dropEvent}`;
@@ -21452,6 +21467,8 @@ function useDataDnd(args) {
         } else {
           dndLog.warn("dragEnd:cross-container:no-dropEvent-on-target", { targetGroup: targetMeta.group });
         }
+        emitPositions(sourceMeta);
+        emitPositions(targetMeta);
         return;
       }
       if (oldIndex === newIndex) {
@@ -21474,6 +21491,7 @@ function useDataDnd(args) {
       } else {
         dndLog.debug("dragEnd:reorder:no-reorderEvent", { sourceGroup: sourceMeta.group });
       }
+      emitPositions(sourceMeta);
     },
     [eventBus]
   );
@@ -21778,6 +21796,7 @@ function DataGrid({
   sortable,
   dropEvent,
   reorderEvent,
+  positionEvent,
   dndItemIdField,
   dndRoot
 }) {
@@ -21795,6 +21814,7 @@ function DataGrid({
     sortable,
     dropEvent,
     reorderEvent,
+    positionEvent,
     dndItemIdField,
     dndRoot
   });
@@ -22187,6 +22207,7 @@ function DataList({
   sortable: sortableProp,
   dropEvent,
   reorderEvent: dndReorderEvent,
+  positionEvent,
   dndItemIdField,
   dndRoot
 }) {
@@ -22203,6 +22224,7 @@ function DataList({
     sortable: sortableProp,
     dropEvent,
     reorderEvent: dndReorderEvent,
+    positionEvent,
     dndItemIdField,
     dndRoot
   });

package/dist/runtime/index.cjs

@@ -21094,6 +21094,7 @@ function useDataDnd(args) {
     sortable: sortable$1,
     dropEvent,
     reorderEvent,
+    positionEvent,
     dndItemIdField = "id",
     dndRoot,
     items,
@@ -21161,8 +21162,8 @@ function useDataDnd(args) {
   const [activeDrag, setActiveDrag] = React80__namespace.default.useState(null);
   const [overZoneGroup, setOverZoneGroup] = React80__namespace.default.useState(null);
   const meta = React80__namespace.default.useMemo(
-    () => ({ group: ownGroup, dropEvent, reorderEvent, itemIds, rawItems: items, idField: dndItemIdField }),
-    [ownGroup, dropEvent, reorderEvent, itemIds, items, dndItemIdField]
+    () => ({ group: ownGroup, dropEvent, reorderEvent, positionEvent, itemIds, rawItems: items, idField: dndItemIdField }),
+    [ownGroup, dropEvent, reorderEvent, positionEvent, itemIds, items, dndItemIdField]
   );
   React80__namespace.default.useEffect(() => {
     const target = isRoot ? null : parentRoot;
@@ -21248,6 +21249,20 @@ function useDataDnd(args) {
         dndLog.warn("dragEnd:abort:no-zone-resolved", { activeId: active.id, hasSource: !!sourceMeta, hasTarget: !!targetMeta });
         return;
       }
+      const emitPositions = (zoneMeta) => {
+        if (!zoneMeta.positionEvent) {
+          dndLog.debug("dragEnd:positions:no-event", { group: zoneMeta.group });
+          return;
+        }
+        const evt = `UI:${zoneMeta.positionEvent}`;
+        const order = optimisticOrdersRef.current.get(zoneMeta.group) ?? zoneMeta.rawItems;
+        order.forEach((it, idx) => {
+          const id = String(it[zoneMeta.idField]);
+          const position = idx * 1e3;
+          eventBus.emit(evt, { id, position });
+        });
+        dndLog.info("dragEnd:positions:emitted", { event: evt, group: zoneMeta.group, count: order.length });
+      };
       if (sourceMeta.group !== targetMeta.group) {
         if (targetMeta.dropEvent) {
           const evt = `UI:${targetMeta.dropEvent}`;
@@ -21267,6 +21282,8 @@ function useDataDnd(args) {
         } else {
           dndLog.warn("dragEnd:cross-container:no-dropEvent-on-target", { targetGroup: targetMeta.group });
         }
+        emitPositions(sourceMeta);
+        emitPositions(targetMeta);
         return;
       }
       if (oldIndex === newIndex) {
@@ -21289,6 +21306,7 @@ function useDataDnd(args) {
       } else {
         dndLog.debug("dragEnd:reorder:no-reorderEvent", { sourceGroup: sourceMeta.group });
       }
+      emitPositions(sourceMeta);
     },
     [eventBus]
   );
@@ -21593,6 +21611,7 @@ function DataGrid({
   sortable,
   dropEvent,
   reorderEvent,
+  positionEvent,
   dndItemIdField,
   dndRoot
 }) {
@@ -21610,6 +21629,7 @@ function DataGrid({
     sortable,
     dropEvent,
     reorderEvent,
+    positionEvent,
     dndItemIdField,
     dndRoot
   });
@@ -22002,6 +22022,7 @@ function DataList({
   sortable: sortableProp,
   dropEvent,
   reorderEvent: dndReorderEvent,
+  positionEvent,
   dndItemIdField,
   dndRoot
 }) {
@@ -22018,6 +22039,7 @@ function DataList({
     sortable: sortableProp,
     dropEvent,
     reorderEvent: dndReorderEvent,
+    positionEvent,
     dndItemIdField,
     dndRoot
   });
@@ -46198,6 +46220,74 @@ function ServerBridgeProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(ServerBridgeContext.Provider, { value: { connected, sendEvent }, children });
 }
 
+// context/OrbitalThemeProvider.tsx
+init_ThemeContext();
+
+// context/themeTokens.ts
+function themeTokensToCssVars(tokens, mode = "light", darkVariant) {
+  const vars = {};
+  const isDark = mode === "dark";
+  const pickColors = isDark && darkVariant?.colors ? darkVariant.colors : tokens.colors;
+  if (pickColors) {
+    for (const [key, value] of Object.entries(pickColors)) {
+      vars[`--color-${key}`] = value;
+    }
+    if (isDark && darkVariant?.colors && tokens.colors) {
+      for (const [key, value] of Object.entries(tokens.colors)) {
+        const varName = `--color-${key}`;
+        if (!(varName in vars)) vars[varName] = value;
+      }
+    }
+  }
+  const pickRadii = isDark && darkVariant?.radii ? darkVariant.radii : tokens.radii;
+  if (pickRadii) {
+    for (const [key, value] of Object.entries(pickRadii)) {
+      vars[`--radius-${key}`] = value;
+    }
+  }
+  const pickSpacing = isDark && darkVariant?.spacing ? darkVariant.spacing : tokens.spacing;
+  if (pickSpacing) {
+    for (const [key, value] of Object.entries(pickSpacing)) {
+      vars[`--space-${key}`] = value;
+    }
+  }
+  const pickTypography = isDark && darkVariant?.typography ? darkVariant.typography : tokens.typography;
+  if (pickTypography) {
+    for (const [key, value] of Object.entries(pickTypography)) {
+      vars[`--${key}`] = value;
+    }
+  }
+  const pickShadows = isDark && darkVariant?.shadows ? darkVariant.shadows : tokens.shadows;
+  if (pickShadows) {
+    for (const [key, value] of Object.entries(pickShadows)) {
+      vars[`--shadow-${key}`] = value;
+    }
+  }
+  return vars;
+}
+function resolveThemeForRuntime(theme) {
+  if (theme === void 0) return void 0;
+  if (typeof theme === "string") return void 0;
+  return theme;
+}
+function OrbitalThemeProvider({ theme, children }) {
+  const resolved = resolveThemeForRuntime(theme);
+  const { resolvedMode } = useTheme();
+  if (!resolved) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  const vars = themeTokensToCssVars(resolved.tokens, resolvedMode, resolved.variants?.dark);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-orbital-theme": resolved.name,
+      style: { display: "contents", ...vars },
+      children
+    }
+  );
+}
+OrbitalThemeProvider.displayName = "OrbitalThemeProvider";
+
 // runtime/OrbPreview.tsx
 init_navigation();
 init_verificationRegistry();
@@ -46646,6 +46736,19 @@ function SchemaRunner({ schema, serverUrl, transport, mockData, pageName, onNavi
     });
     return set;
   }, [schema, pageName]);
+  const activeOrbitalTheme = React80.useMemo(() => {
+    const parsed = schema;
+    if (!parsed?.orbitals?.length) return void 0;
+    if (pageName) {
+      for (const orb of parsed.orbitals) {
+        for (const pageRef of orb.pages ?? []) {
+          const name = typeof pageRef === "object" && pageRef !== null ? pageRef.name : void 0;
+          if (name === pageName) return orb.theme;
+        }
+      }
+    }
+    return parsed.orbitals[0]?.theme;
+  }, [schema, pageName]);
   const inner = /* @__PURE__ */ jsxRuntime.jsx(providers.VerificationProvider, { enabled: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
     EntitySchemaProvider,
     {
@@ -46666,7 +46769,7 @@ function SchemaRunner({ schema, serverUrl, transport, mockData, pageName, onNavi
             persistence
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "h-full p-4", children: /* @__PURE__ */ jsxRuntime.jsx(UISlotRenderer, { includeHud: true, hudMode: "inline", includeFloating: true }) })
+        /* @__PURE__ */ jsxRuntime.jsx(OrbitalThemeProvider, { theme: activeOrbitalTheme, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "h-full p-4", children: /* @__PURE__ */ jsxRuntime.jsx(UISlotRenderer, { includeHud: true, hudMode: "inline", includeFloating: true }) }) })
       ]
     }
   ) });