@almadar/ui 4.50.15 → 4.50.17

package/dist/avl/index.cjs

@@ -24937,7 +24937,18 @@ function useDataDnd(args) {
     });
   }, []);
   const sharedOptimistic = isRoot ? optimisticOrders : parentRoot?.optimisticOrders ?? /* @__PURE__ */ new Map();
-  const orderedItems = sharedOptimistic.get(ownGroup) ?? items;
+  const optimisticEntry = sharedOptimistic.get(ownGroup);
+  const orderedItems = optimisticEntry ?? items;
+  if (isZone && enabled) {
+    dndLog.debug("hook:render", {
+      group: ownGroup,
+      isRoot,
+      itemsLen: items.length,
+      optimisticEntryLen: optimisticEntry ? optimisticEntry.length : null,
+      orderedLen: orderedItems.length,
+      sharedKeys: Array.from(sharedOptimistic.keys())
+    });
+  }
   const itemIdsSignature = orderedItems.map((it, idx) => {
     const raw = it[dndItemIdField];
     return String(raw ?? `__idx_${idx}`);
@@ -58394,6 +58405,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();
@@ -58805,6 +58884,19 @@ function SchemaRunner({ schema, serverUrl, transport, mockData, pageName, onNavi
     });
     return set;
   }, [schema, pageName]);
+  const activeOrbitalTheme = React93.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(VerificationProvider, { enabled: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
     EntitySchemaProvider,
     {
@@ -58825,7 +58917,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 }) }) })
       ]
     }
   ) });

package/dist/avl/index.js

@@ -24891,7 +24891,18 @@ function useDataDnd(args) {
     });
   }, []);
   const sharedOptimistic = isRoot ? optimisticOrders : parentRoot?.optimisticOrders ?? /* @__PURE__ */ new Map();
-  const orderedItems = sharedOptimistic.get(ownGroup) ?? items;
+  const optimisticEntry = sharedOptimistic.get(ownGroup);
+  const orderedItems = optimisticEntry ?? items;
+  if (isZone && enabled) {
+    dndLog.debug("hook:render", {
+      group: ownGroup,
+      isRoot,
+      itemsLen: items.length,
+      optimisticEntryLen: optimisticEntry ? optimisticEntry.length : null,
+      orderedLen: orderedItems.length,
+      sharedKeys: Array.from(sharedOptimistic.keys())
+    });
+  }
   const itemIdsSignature = orderedItems.map((it, idx) => {
     const raw = it[dndItemIdField];
     return String(raw ?? `__idx_${idx}`);
@@ -58348,6 +58359,74 @@ function ServerBridgeProvider({
   return /* @__PURE__ */ 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__ */ 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";
+
 // runtime/OrbPreview.tsx
 init_navigation();
 init_verificationRegistry();
@@ -58759,6 +58838,19 @@ function SchemaRunner({ schema, serverUrl, transport, mockData, pageName, onNavi
     });
     return set;
   }, [schema, pageName]);
+  const activeOrbitalTheme = 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__ */ jsx(VerificationProvider, { enabled: true, children: /* @__PURE__ */ jsxs(
     EntitySchemaProvider,
     {
@@ -58779,7 +58871,7 @@ function SchemaRunner({ schema, serverUrl, transport, mockData, pageName, onNavi
             persistence
           }
         ),
-        /* @__PURE__ */ jsx(Box, { className: "h-full p-4", children: /* @__PURE__ */ jsx(UISlotRenderer, { includeHud: true, hudMode: "inline", includeFloating: true }) })
+        /* @__PURE__ */ jsx(OrbitalThemeProvider, { theme: activeOrbitalTheme, children: /* @__PURE__ */ jsx(Box, { className: "h-full p-4", children: /* @__PURE__ */ jsx(UISlotRenderer, { includeHud: true, hudMode: "inline", includeFloating: true }) }) })
       ]
     }
   ) });

package/dist/components/index.cjs

@@ -20104,7 +20104,18 @@ function useDataDnd(args) {
     });
   }, []);
   const sharedOptimistic = isRoot ? optimisticOrders : parentRoot?.optimisticOrders ?? /* @__PURE__ */ new Map();
-  const orderedItems = sharedOptimistic.get(ownGroup) ?? items;
+  const optimisticEntry = sharedOptimistic.get(ownGroup);
+  const orderedItems = optimisticEntry ?? items;
+  if (isZone && enabled) {
+    dndLog.debug("hook:render", {
+      group: ownGroup,
+      isRoot,
+      itemsLen: items.length,
+      optimisticEntryLen: optimisticEntry ? optimisticEntry.length : null,
+      orderedLen: orderedItems.length,
+      sharedKeys: Array.from(sharedOptimistic.keys())
+    });
+  }
   const itemIdsSignature = orderedItems.map((it, idx) => {
     const raw = it[dndItemIdField];
     return String(raw ?? `__idx_${idx}`);

package/dist/components/index.js

@@ -20058,7 +20058,18 @@ function useDataDnd(args) {
     });
   }, []);
   const sharedOptimistic = isRoot ? optimisticOrders : parentRoot?.optimisticOrders ?? /* @__PURE__ */ new Map();
-  const orderedItems = sharedOptimistic.get(ownGroup) ?? items;
+  const optimisticEntry = sharedOptimistic.get(ownGroup);
+  const orderedItems = optimisticEntry ?? items;
+  if (isZone && enabled) {
+    dndLog.debug("hook:render", {
+      group: ownGroup,
+      isRoot,
+      itemsLen: items.length,
+      optimisticEntryLen: optimisticEntry ? optimisticEntry.length : null,
+      orderedLen: orderedItems.length,
+      sharedKeys: Array.from(sharedOptimistic.keys())
+    });
+  }
   const itemIdsSignature = orderedItems.map((it, idx) => {
     const raw = it[dndItemIdField];
     return String(raw ?? `__idx_${idx}`);

package/dist/context/OrbitalThemeProvider.d.ts

@@ -0,0 +1,37 @@
+/**
+ * OrbitalThemeProvider — runtime application of `OrbitalDefinition.theme`.
+ *
+ * Wraps an orbital's rendered subtree in a wrapping `<div>` that sets the
+ * CSS variables derived from `theme.tokens` (and `variants.dark` when the
+ * resolved color mode is dark). Inline custom-property declarations on the
+ * wrapper override any `[data-theme]` selector rule for the same variable
+ * within the subtree, while letting unset variables cascade from the parent.
+ *
+ * Mapping is delegated to `themeTokensToCssVars`, which mirrors the Rust
+ * compiler's `generate_tokens_css`. Compile-time and runtime produce the
+ * same CSS variable map for the same `ThemeDefinition` input, so a Studio
+ * Design System edit and an `orbital compile` of the same schema render
+ * identically.
+ *
+ * No-op when:
+ * - `theme` is `undefined` (orbital declares no theme — parent cascades)
+ * - `theme` is a string ref that didn't get inlined upstream
+ *
+ * @example
+ * ```tsx
+ * <OrbitalThemeProvider theme={orbital.theme}>
+ *   <UISlotRenderer />
+ * </OrbitalThemeProvider>
+ * ```
+ */
+import { type ReactElement, type ReactNode } from 'react';
+import type { ThemeRef } from '@almadar/core';
+export interface OrbitalThemeProviderProps {
+    /** The `OrbitalDefinition.theme` value (inline definition or string ref). */
+    theme?: ThemeRef;
+    children: ReactNode;
+}
+export declare function OrbitalThemeProvider({ theme, children }: OrbitalThemeProviderProps): ReactElement;
+export declare namespace OrbitalThemeProvider {
+    var displayName: string;
+}

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

@@ -21349,7 +21349,18 @@ function useDataDnd(args) {
     });
   }, []);
   const sharedOptimistic = isRoot ? optimisticOrders : parentRoot?.optimisticOrders ?? /* @__PURE__ */ new Map();
-  const orderedItems = sharedOptimistic.get(ownGroup) ?? items;
+  const optimisticEntry = sharedOptimistic.get(ownGroup);
+  const orderedItems = optimisticEntry ?? items;
+  if (isZone && enabled) {
+    dndLog.debug("hook:render", {
+      group: ownGroup,
+      isRoot,
+      itemsLen: items.length,
+      optimisticEntryLen: optimisticEntry ? optimisticEntry.length : null,
+      orderedLen: orderedItems.length,
+      sharedKeys: Array.from(sharedOptimistic.keys())
+    });
+  }
   const itemIdsSignature = orderedItems.map((it, idx) => {
     const raw = it[dndItemIdField];
     return String(raw ?? `__idx_${idx}`);

package/dist/providers/index.js

@@ -21303,7 +21303,18 @@ function useDataDnd(args) {
     });
   }, []);
   const sharedOptimistic = isRoot ? optimisticOrders : parentRoot?.optimisticOrders ?? /* @__PURE__ */ new Map();
-  const orderedItems = sharedOptimistic.get(ownGroup) ?? items;
+  const optimisticEntry = sharedOptimistic.get(ownGroup);
+  const orderedItems = optimisticEntry ?? items;
+  if (isZone && enabled) {
+    dndLog.debug("hook:render", {
+      group: ownGroup,
+      isRoot,
+      itemsLen: items.length,
+      optimisticEntryLen: optimisticEntry ? optimisticEntry.length : null,
+      orderedLen: orderedItems.length,
+      sharedKeys: Array.from(sharedOptimistic.keys())
+    });
+  }
   const itemIdsSignature = orderedItems.map((it, idx) => {
     const raw = it[dndItemIdField];
     return String(raw ?? `__idx_${idx}`);

package/dist/runtime/index.cjs

@@ -21118,7 +21118,18 @@ function useDataDnd(args) {
     });
   }, []);
   const sharedOptimistic = isRoot ? optimisticOrders : parentRoot?.optimisticOrders ?? /* @__PURE__ */ new Map();
-  const orderedItems = sharedOptimistic.get(ownGroup) ?? items;
+  const optimisticEntry = sharedOptimistic.get(ownGroup);
+  const orderedItems = optimisticEntry ?? items;
+  if (isZone && enabled) {
+    dndLog.debug("hook:render", {
+      group: ownGroup,
+      isRoot,
+      itemsLen: items.length,
+      optimisticEntryLen: optimisticEntry ? optimisticEntry.length : null,
+      orderedLen: orderedItems.length,
+      sharedKeys: Array.from(sharedOptimistic.keys())
+    });
+  }
   const itemIdsSignature = orderedItems.map((it, idx) => {
     const raw = it[dndItemIdField];
     return String(raw ?? `__idx_${idx}`);
@@ -46187,6 +46198,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();
@@ -46635,6 +46714,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,
     {
@@ -46655,7 +46747,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 }) }) })
       ]
     }
   ) });

package/dist/runtime/index.js

@@ -21072,7 +21072,18 @@ function useDataDnd(args) {
     });
   }, []);
   const sharedOptimistic = isRoot ? optimisticOrders : parentRoot?.optimisticOrders ?? /* @__PURE__ */ new Map();
-  const orderedItems = sharedOptimistic.get(ownGroup) ?? items;
+  const optimisticEntry = sharedOptimistic.get(ownGroup);
+  const orderedItems = optimisticEntry ?? items;
+  if (isZone && enabled) {
+    dndLog.debug("hook:render", {
+      group: ownGroup,
+      isRoot,
+      itemsLen: items.length,
+      optimisticEntryLen: optimisticEntry ? optimisticEntry.length : null,
+      orderedLen: orderedItems.length,
+      sharedKeys: Array.from(sharedOptimistic.keys())
+    });
+  }
   const itemIdsSignature = orderedItems.map((it, idx) => {
     const raw = it[dndItemIdField];
     return String(raw ?? `__idx_${idx}`);
@@ -46141,6 +46152,74 @@ function ServerBridgeProvider({
   return /* @__PURE__ */ 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__ */ 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";
+
 // runtime/OrbPreview.tsx
 init_navigation();
 init_verificationRegistry();
@@ -46589,6 +46668,19 @@ function SchemaRunner({ schema, serverUrl, transport, mockData, pageName, onNavi
     });
     return set;
   }, [schema, pageName]);
+  const activeOrbitalTheme = 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__ */ jsx(VerificationProvider, { enabled: true, children: /* @__PURE__ */ jsxs(
     EntitySchemaProvider,
     {
@@ -46609,7 +46701,7 @@ function SchemaRunner({ schema, serverUrl, transport, mockData, pageName, onNavi
             persistence
           }
         ),
-        /* @__PURE__ */ jsx(Box, { className: "h-full p-4", children: /* @__PURE__ */ jsx(UISlotRenderer, { includeHud: true, hudMode: "inline", includeFloating: true }) })
+        /* @__PURE__ */ jsx(OrbitalThemeProvider, { theme: activeOrbitalTheme, children: /* @__PURE__ */ jsx(Box, { className: "h-full p-4", children: /* @__PURE__ */ jsx(UISlotRenderer, { includeHud: true, hudMode: "inline", includeFloating: true }) }) })
       ]
     }
   ) });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "4.50.15",
+  "version": "4.50.17",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [