@ankhorage/zora 2.10.0 → 2.12.0

package/src/metadata/authoringMeta.test.ts

@@ -2,70 +2,44 @@ import { describe, expect, test } from 'bun:test';
 
 import { ZORA_COMPONENT_META, type ZoraComponentPropAuthoring } from './index';
 
+const componentMetaByName = new Map(Object.entries(ZORA_COMPONENT_META));
+
 describe('ZORA component prop authoring authority', () => {
-  test('supports the canonical instance and theme scope combinations', () => {
+  test('supports instance and theme authority with explicit instance override capability', () => {
     const values: readonly ZoraComponentPropAuthoring[] = [
       { authority: 'instance' },
       { authority: 'theme', scope: 'global' },
-      { authority: 'theme', scope: 'component' },
-      { authority: 'theme', scope: 'pattern' },
+      { authority: 'theme', scope: 'component', allowInstanceOverride: true },
+      { authority: 'theme', scope: 'pattern', allowInstanceOverride: true },
     ];
-
-    expect(values).toEqual([
-      { authority: 'instance' },
-      { authority: 'theme', scope: 'global' },
-      { authority: 'theme', scope: 'component' },
-      { authority: 'theme', scope: 'pattern' },
-    ]);
+    expect(values).toHaveLength(4);
   });
 
-  test('classifies representative instance content without exposing arbitrary styling', () => {
-    expect(ZORA_COMPONENT_META.Button.props.children?.authoring).toEqual({
-      authority: 'instance',
-    });
+  test('keeps representative content and semantics instance-owned', () => {
+    expect(ZORA_COMPONENT_META.Button.props.children?.authoring).toEqual({ authority: 'instance' });
     expect(ZORA_COMPONENT_META.Card.props.title?.authoring).toEqual({ authority: 'instance' });
-    expect(ZORA_COMPONENT_META.Heading.props.text?.authoring).toEqual({ authority: 'instance' });
     expect(ZORA_COMPONENT_META.Heading.props.level?.authoring).toEqual({ authority: 'instance' });
     expect(ZORA_COMPONENT_META.Text.props.text?.authoring).toEqual({ authority: 'instance' });
-    expect(ZORA_COMPONENT_META.Panel.props.description?.authoring).toEqual({
-      authority: 'instance',
-    });
   });
 
-  test('classifies component and pattern styling as theme authority', () => {
-    expect(ZORA_COMPONENT_META.Button.props.size?.authoring).toEqual({
-      authority: 'theme',
-      scope: 'component',
-    });
-    expect(ZORA_COMPONENT_META.Card.props.tone?.authoring).toEqual({
-      authority: 'theme',
-      scope: 'component',
-    });
-    expect(ZORA_COMPONENT_META.Heading.props.size?.authoring).toEqual({
-      authority: 'theme',
-      scope: 'component',
-    });
-    expect(ZORA_COMPONENT_META.Text.props.variant?.authoring).toEqual({
-      authority: 'theme',
-      scope: 'component',
-    });
-    expect(ZORA_COMPONENT_META.Panel.props.compact?.authoring).toEqual({
-      authority: 'theme',
-      scope: 'pattern',
-    });
+  test('marks recipe props theme-owned while allowing explicit instance overrides', () => {
+    for (const name of ['Button', 'Card', 'Heading', 'Text', 'Panel']) {
+      const meta = componentMetaByName.get(name);
+      expect(meta, name).toBeDefined();
+      for (const prop of Object.values(meta?.props ?? {})) {
+        if (prop.authoring?.authority !== 'theme') continue;
+        expect(prop.authoring.allowInstanceOverride, name).toBe(true);
+      }
+    }
   });
 
-  test('keeps Heading blueprint content useful before instance editing', () => {
+  test('keeps Heading blueprint semantic content useful', () => {
     expect(ZORA_COMPONENT_META.Heading.blueprint?.defaultProps).toEqual({
       text: 'Heading',
       level: 2,
     });
   });
 
-  test('treats absent authoring metadata as not authorable', () => {
-    expect(ZORA_COMPONENT_META.Progress.props.value?.authoring).toBeUndefined();
-  });
-
   test('does not introduce a system authority', () => {
     expect(JSON.stringify(ZORA_COMPONENT_META)).not.toContain('"authority":"system"');
   });

package/src/metadata/componentMeta.test.ts

@@ -28,6 +28,7 @@ describe('ZORA_COMPONENT_META registry coverage', () => {
       .map((item) => item.split(' as ')[0].trim())
       .filter((name) => /^[A-Z][A-Za-z0-9]+$/.test(name))
       .filter((name) => !['ToastProvider'].includes(name));
+    componentExports.push('ThemeModeToggle');
 
     for (const name of componentExports) {
       expect(
@@ -118,6 +119,7 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'EmptyState',
       'Hero',
       'Button',
+      'ThemeModeToggle',
       'Input',
       'Textarea',
       'Text',
@@ -170,6 +172,12 @@ describe('ZORA_COMPONENT_META invariants', () => {
     }
   });
 
+  test('ThemeModeToggle is a direct manifest leaf with serializable defaults', () => {
+    expect(ZORA_COMPONENT_META.ThemeModeToggle.directManifestNode).toBe(true);
+    expect(ZORA_COMPONENT_META.ThemeModeToggle.allowedChildren).toEqual([]);
+    expect(ZORA_COMPONENT_META.ThemeModeToggle.blueprint?.defaultProps).toEqual({ size: 'm' });
+  });
+
   test('Progress is a direct manifest leaf with serializable defaults', () => {
     expect(ZORA_COMPONENT_META.Progress.directManifestNode).toBe(true);
     expect(ZORA_COMPONENT_META.Progress.allowedChildren).toEqual([]);

package/src/metadata/componentMeta.ts

@@ -92,6 +92,7 @@ import { timelineMeta } from '../patterns/timeline/meta';
 import { treeItemMeta, treeViewMeta } from '../patterns/tree-view/meta';
 import { zoraDrawerContentMeta } from '../patterns/zora-drawer-content/meta';
 import { zoraTabBarMeta } from '../patterns/zora-tab-bar/meta';
+import { themeModeToggleMeta } from '../theme/ThemeModeToggle.meta';
 import type { ZoraComponentMetaRegistry } from './types';
 
 export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = {
@@ -150,6 +151,7 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = {
   ToastProvider: toastProviderMeta,
   Toolbar: toolbarMeta,
   ToolbarAction: toolbarActionMeta,
+  ThemeModeToggle: themeModeToggleMeta,
   AppShell: appShellMeta,
   Screen: screenMeta,
   ScreenSection: screenSectionMeta,

package/src/metadata/themeRecipeMeta.test.ts

@@ -3,65 +3,67 @@ import { describe, expect, test } from 'bun:test';
 import { ZORA_COMPONENT_META, ZORA_THEME_RECIPE_META, ZORA_THEME_TOKEN_FAMILIES } from './index';
 
 const tokenFamilies = new Set<string>(ZORA_THEME_TOKEN_FAMILIES);
-const expectedKinds = new Map<string, 'component' | 'pattern'>([
-  ['Button', 'component'],
-  ['Card', 'component'],
-  ['Text', 'component'],
-  ['Panel', 'pattern'],
-]);
+const recipeMetaByName = new Map(Object.entries(ZORA_THEME_RECIPE_META));
 
 describe('ZORA_THEME_RECIPE_META', () => {
-  test('exports representative component and pattern recipes', () => {
-    expect(Object.keys(ZORA_THEME_RECIPE_META)).toEqual(['Button', 'Card', 'Text', 'Panel']);
-    expect(ZORA_THEME_RECIPE_META.Button?.kind).toBe('component');
-    expect(ZORA_THEME_RECIPE_META.Panel?.kind).toBe('pattern');
-  });
+  test('exports every current component/pattern theme-authority recipe', () => {
+    expect(Object.keys(ZORA_THEME_RECIPE_META)).toEqual([
+      'Button',
+      'Card',
+      'Heading',
+      'Text',
+      'Panel',
+    ]);
 
-  test('keeps registry names unique and aligned with component metadata', () => {
-    const names = Object.values(ZORA_THEME_RECIPE_META).map((meta) => meta.name);
-    expect(new Set(names).size).toBe(names.length);
+    for (const [name, componentMeta] of Object.entries(ZORA_COMPONENT_META)) {
+      const themeProps = Object.entries(componentMeta.props).filter(
+        ([, prop]) => prop.authoring?.authority === 'theme' && prop.authoring.scope !== 'global',
+      );
+      if (themeProps.length === 0) continue;
 
-    for (const [key, meta] of Object.entries(ZORA_THEME_RECIPE_META)) {
-      expect(meta.name).toBe(key);
-      expect(meta.kind).toBe(expectedKinds.get(key));
+      const recipe = recipeMetaByName.get(name);
+      expect(recipe, `${name} has theme props but no theme recipe`).toBeDefined();
+      expect(recipe?.kind).toBe(componentMeta.category === 'pattern' ? 'pattern' : 'component');
+      const fields = new Map(Object.entries(recipe?.fields ?? {}));
+      for (const [propName] of themeProps) {
+        expect(
+          fields.get(propName),
+          `${name}.${propName} is missing from its recipe`,
+        ).toBeDefined();
+      }
     }
-
-    expect(ZORA_COMPONENT_META.Button.category).toBe('component');
-    expect(ZORA_COMPONENT_META.Card.category).toBe('component');
-    expect(ZORA_COMPONENT_META.Text.category).toBe('component');
-    expect(ZORA_COMPONENT_META.Panel.category).toBe('pattern');
   });
 
-  test('references only canonical token families and valid choice defaults', () => {
+  test('references only canonical token families and valid declared defaults', () => {
     for (const meta of Object.values(ZORA_THEME_RECIPE_META)) {
       for (const field of Object.values(meta.fields)) {
         if (field.type === 'token') {
           expect(tokenFamilies.has(field.tokenFamily), `${meta.name}.${field.label}`).toBe(true);
         }
-        if (field.type === 'choice') {
+        if (field.type === 'choice' && field.default !== undefined) {
           expect(field.options).toContain(field.default);
         }
       }
     }
   });
 
-  test('describes component-specific semantic scales instead of universal geometry', () => {
-    expect(ZORA_THEME_RECIPE_META.Button?.fields.size).toMatchObject({
-      type: 'choice',
-      options: ['s', 'm', 'l'],
-      default: 'm',
-    });
-    expect(ZORA_THEME_RECIPE_META.Card?.fields.padding).toMatchObject({
-      type: 'token',
-      tokenFamily: 'spacing',
-      default: 'l',
-    });
+  test('keeps recipe defaults aligned with existing runtime behavior', () => {
+    expect(ZORA_THEME_RECIPE_META.Button?.fields.size?.default).toBe('l');
+    expect(ZORA_THEME_RECIPE_META.Card?.fields.padding?.default).toBeUndefined();
+    expect(ZORA_THEME_RECIPE_META.Text?.fields.weight?.default).toBeUndefined();
+    expect(ZORA_THEME_RECIPE_META.Heading?.fields.size?.default).toBeUndefined();
   });
 
-  test('stays distinct from component metadata', () => {
-    expect(ZORA_THEME_RECIPE_META).not.toBe(ZORA_COMPONENT_META);
-    expect(ZORA_COMPONENT_META.Button.props.size?.type).toBe('enum');
-    expect(ZORA_THEME_RECIPE_META.Button?.fields.size?.type).toBe('choice');
+  test('does not persist theme-owned defaults into new instance blueprints', () => {
+    for (const [name, meta] of Object.entries(ZORA_COMPONENT_META)) {
+      const props = new Map(Object.entries(meta.props));
+      for (const propName of Object.keys(meta.blueprint?.defaultProps ?? {})) {
+        expect(
+          props.get(propName)?.authoring?.authority,
+          `${name}.${propName} blueprint must not pin a theme-owned value`,
+        ).not.toBe('theme');
+      }
+    }
   });
 
   test('is serializable for downstream authoring consumers', () => {

package/src/metadata/themeRecipeMeta.ts

@@ -1,5 +1,6 @@
 import { buttonThemeRecipeMeta } from '../components/button/themeRecipeMeta';
 import { cardThemeRecipeMeta } from '../components/card/themeRecipeMeta';
+import { headingThemeRecipeMeta } from '../components/heading/themeRecipeMeta';
 import { textThemeRecipeMeta } from '../components/text/themeRecipeMeta';
 import { panelThemeRecipeMeta } from '../patterns/panel/themeRecipeMeta';
 import type { ZoraThemeRecipeMetaRegistry } from './themeRecipeTypes';
@@ -7,6 +8,7 @@ import type { ZoraThemeRecipeMetaRegistry } from './themeRecipeTypes';
 export const ZORA_THEME_RECIPE_META: ZoraThemeRecipeMetaRegistry = {
   Button: buttonThemeRecipeMeta,
   Card: cardThemeRecipeMeta,
+  Heading: headingThemeRecipeMeta,
   Text: textThemeRecipeMeta,
   Panel: panelThemeRecipeMeta,
 };

package/src/metadata/themeRecipeTypes.ts

@@ -18,18 +18,18 @@ interface ZoraThemeRecipeFieldBase {
 export interface ZoraThemeRecipeTokenFieldMeta extends ZoraThemeRecipeFieldBase {
   readonly type: 'token';
   readonly tokenFamily: ZoraThemeTokenFamily;
-  readonly default: string;
+  readonly default?: string;
 }
 
 export interface ZoraThemeRecipeChoiceFieldMeta extends ZoraThemeRecipeFieldBase {
   readonly type: 'choice';
   readonly options: readonly string[];
-  readonly default: string;
+  readonly default?: string;
 }
 
 export interface ZoraThemeRecipeBooleanFieldMeta extends ZoraThemeRecipeFieldBase {
   readonly type: 'boolean';
-  readonly default: boolean;
+  readonly default?: boolean;
 }
 
 export type ZoraThemeRecipeFieldMeta =

package/src/metadata/types.ts

@@ -30,6 +30,7 @@ export type ZoraComponentPropAuthoring =
   | {
       readonly authority: 'theme';
       readonly scope: 'global' | 'component' | 'pattern';
+      readonly allowInstanceOverride?: boolean;
     };
 
 export interface ZoraComponentPropArrayItemSchema {
@@ -49,22 +50,15 @@ export interface ZoraComponentPropSchema {
 
 export interface ZoraComponentBlueprint {
   label: string;
-  icon?: {
-    name: string;
-    provider?: string;
-  };
+  icon?: { name: string; provider?: string };
   defaultProps?: Readonly<Record<string, ZoraComponentPropValue>>;
 }
 
 export interface ZoraComponentI18nMeta {
-  fields: readonly {
-    keyProp: string;
-    defaultTextProp: string;
-  }[];
+  fields: readonly { keyProp: string; defaultTextProp: string }[];
 }
 
 export type ZoraComponentEventPayloadKind = ComponentEventDtoKind | (string & {});
-
 export type ZoraComponentEventPayloadFieldType =
   | 'boolean'
   | 'number'

package/src/patterns/panel/Panel.tsx

@@ -1,16 +1,26 @@
 import React from 'react';
 
 import { Card } from '../../components/card';
+import { resolveCardThemeRecipe } from '../../components/card/resolveCardThemeRecipe';
+import { useZoraThemeRecipe } from '../../theme/useZoraThemeRecipe';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { PanelProps } from './types';
 
-function PanelInner({ themeId: _themeId, mode: _mode, ...props }: PanelProps) {
-  return <Card {...props} />;
+function PanelInner({
+  themeId: _themeId,
+  mode: _mode,
+  tone,
+  compact,
+  padding,
+  radius,
+  ...props
+}: PanelProps) {
+  const themeFields = useZoraThemeRecipe('Panel');
+  const recipe = resolveCardThemeRecipe({ tone, compact, padding, radius, themeFields });
+  return <Card {...props} {...recipe} />;
 }
 
 /***
  * Semantic wrapper around `Card` for panel-style page sections.
- *
- 
  */
 export const Panel = withZoraThemeScope(PanelInner);

package/src/patterns/panel/meta.ts

@@ -1,18 +1,18 @@
 import type { ZoraComponentMeta } from '../../metadata';
 import { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
 
+const themeAuthoring = {
+  authority: 'theme',
+  scope: 'pattern',
+  allowInstanceOverride: true,
+} as const;
+
 export const panelMeta = {
   name: 'Panel',
   category: 'pattern',
   directManifestNode: true,
   allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
-  blueprint: {
-    label: 'Panel',
-    defaultProps: {
-      title: 'Panel',
-      tone: 'default',
-    },
-  },
+  blueprint: { label: 'Panel', defaultProps: { title: 'Panel' } },
   props: {
     title: {
       type: 'string',
@@ -37,15 +37,15 @@ export const panelMeta = {
       category: 'Style',
       label: 'Tone',
       enum: ['default', 'subtle', 'outline'],
-      default: 'default',
-      authoring: { authority: 'theme', scope: 'pattern' },
+      authoring: themeAuthoring,
     },
-    compact: {
-      type: 'boolean',
-      category: 'Layout',
-      label: 'Compact',
-      default: false,
-      authoring: { authority: 'theme', scope: 'pattern' },
+    compact: { type: 'boolean', category: 'Layout', label: 'Compact', authoring: themeAuthoring },
+    padding: { type: 'spacing', category: 'Layout', label: 'Padding', authoring: themeAuthoring },
+    radius: {
+      type: 'radius',
+      category: 'Style',
+      label: 'Corner radius',
+      authoring: themeAuthoring,
     },
   },
 } as const satisfies ZoraComponentMeta;

package/src/patterns/panel/themeRecipeMeta.ts

@@ -15,7 +15,7 @@ export const panelThemeRecipeMeta = {
       type: 'token',
       tokenFamily: 'spacing',
       label: 'Padding',
-      default: 'l',
+      description: 'When unset, Panel keeps Card compact-aware spacing.',
     },
     radius: {
       type: 'token',

package/src/patterns/panel/types.ts

@@ -12,4 +12,6 @@ export interface PanelProps extends ZoraBaseProps {
   children?: React.ReactNode;
   tone?: ZoraCardTone;
   compact?: boolean;
+  padding?: string;
+  radius?: string;
 }

package/src/registry.test.ts

@@ -3,6 +3,7 @@ import { describe, expect, test } from 'bun:test';
 import type { ZoraComponentRegistry } from './index';
 
 const NON_RUNTIME_COMPONENT_EXPORTS = new Set(['SelectionProvider', 'ToastProvider']);
+const RUNTIME_THEME_COMPONENT_EXPORTS = ['ThemeModeToggle'] as const;
 const REGISTRY_SNAPSHOT_PREFIX = 'ZORA_REGISTRY_SNAPSHOT:';
 
 let registryEntriesPromise: Promise<readonly string[]> | undefined;
@@ -48,7 +49,7 @@ async function listRuntimeRegistryEntries(): Promise<readonly string[]> {
 
 async function listPublicConcreteComponentExports(): Promise<readonly string[]> {
   const source = await Bun.file('src/index.ts').text();
-  return Array.from(
+  const componentExports = Array.from(
     source.matchAll(
       /export\s+\{([^}]+)\}\s+from '\.\/(components\/[^']+|foundation|layout\/[^']+|patterns\/[^']+)';/g,
     ),
@@ -56,8 +57,9 @@ async function listPublicConcreteComponentExports(): Promise<readonly string[]>
     .flatMap((match) => match[1].split(',').map((item) => item.trim()))
     .map((item) => item.split(' as ')[0].trim())
     .filter((name) => /^[A-Z][A-Za-z0-9]+$/.test(name))
-    .filter((name) => !NON_RUNTIME_COMPONENT_EXPORTS.has(name))
-    .sort();
+    .filter((name) => !NON_RUNTIME_COMPONENT_EXPORTS.has(name));
+
+  return [...componentExports, ...RUNTIME_THEME_COMPONENT_EXPORTS].sort();
 }
 
 describe('ZORA_COMPONENT_REGISTRY', () => {

package/src/registry.ts

@@ -97,6 +97,7 @@ import { Timeline } from './patterns/timeline';
 import { TreeItem, TreeView } from './patterns/tree-view';
 import { ZoraDrawerContent } from './patterns/zora-drawer-content';
 import { ZoraTabBar } from './patterns/zora-tab-bar';
+import { ThemeModeToggle } from './theme/ThemeModeToggle';
 
 export type ZoraComponentRegistry = Readonly<Record<string, React.ElementType>>;
 
@@ -177,6 +178,7 @@ const _ZORA_COMPONENT_REGISTRY = {
   Toast,
   Toolbar,
   ToolbarAction,
+  ThemeModeToggle,
   Box,
   Center,
   Container,

package/src/theme/ThemeModeToggle.meta.ts

@@ -0,0 +1,29 @@
+import type { ZoraComponentMeta } from '../metadata';
+
+export const themeModeToggleMeta = {
+  name: 'ThemeModeToggle',
+  category: 'component',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'Theme mode toggle',
+    defaultProps: {
+      size: 'm',
+    },
+  },
+  props: {
+    disabled: {
+      type: 'boolean',
+      category: 'Behavior',
+      label: 'Disabled',
+      default: false,
+    },
+    size: {
+      type: 'enum',
+      category: 'Style',
+      label: 'Size',
+      enum: ['s', 'm', 'l'],
+      default: 'm',
+    },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/theme/ThemeModeToggle.tsx

@@ -3,7 +3,12 @@ import { resolveThemeModeToggleState } from './resolveThemeModeToggleState';
 import type { ThemeModeToggleProps } from './ThemeModeToggleProps';
 import { useZoraTheme } from './useZoraTheme';
 
-export function ThemeModeToggle({ disabled, size = 'm', testID }: ThemeModeToggleProps) {
+export function ThemeModeToggle({
+  disabled,
+  interactionPolicy,
+  size = 'm',
+  testID,
+}: ThemeModeToggleProps) {
   const { mode, setMode } = useZoraTheme();
   const state = resolveThemeModeToggleState(mode);
 
@@ -12,6 +17,7 @@ export function ThemeModeToggle({ disabled, size = 'm', testID }: ThemeModeToggl
       color="neutral"
       disabled={disabled}
       icon={{ name: state.iconName }}
+      interactionPolicy={interactionPolicy}
       label={state.label}
       onPress={() => setMode(state.nextMode)}
       size={size}

package/src/theme/ThemeModeToggleProps.ts

@@ -1,3 +1,6 @@
 import type { IconButtonProps } from '../components/icon-button';
 
-export type ThemeModeToggleProps = Pick<IconButtonProps, 'disabled' | 'size' | 'testID'>;
+export type ThemeModeToggleProps = Pick<
+  IconButtonProps,
+  'disabled' | 'interactionPolicy' | 'size' | 'testID'
+>;

package/src/theme/ZoraProvider.tsx

@@ -1,3 +1,4 @@
+import type { ThemeConfig } from '@ankhorage/contracts';
 import { ThemeProvider } from '@ankhorage/surface';
 import React from 'react';
 
@@ -9,30 +10,26 @@ import { ZoraThemeRuntimeContext } from './ZoraThemeRuntimeContext';
 export interface ZoraProviderProps {
   children: React.ReactNode;
   theme?: ZoraTheme;
+  themeConfig?: ThemeConfig;
   initialMode?: ZoraThemeMode;
 }
 
-/***
- * Installs the ZORA theme runtime and underlying Surface theme provider.
- *
- * Wrap an app with `ZoraProvider` once near the root so components, patterns,
- * layouts, and theme hooks resolve the same design tokens and color mode.
- *
- * @example App provider
- * ```tsx
- * <ZoraProvider initialMode="light"><App /></ZoraProvider>
- * ```
- */
+/** Installs the ZORA theme runtime and underlying Surface theme provider. */
 export function ZoraProvider({
   children,
   theme = zoraDefaultTheme,
+  themeConfig,
   initialMode = 'light',
 }: ZoraProviderProps) {
-  const runtimeValue = React.useMemo(() => ({ sourceTheme: theme, themeId: theme.id }), [theme]);
+  const resolvedConfig = React.useMemo(
+    () => themeConfig ?? createZoraThemeConfig(theme),
+    [theme, themeConfig],
+  );
+  const runtimeValue = React.useMemo(() => ({ themeId: resolvedConfig.id }), [resolvedConfig.id]);
 
   return (
     <ZoraThemeRuntimeContext.Provider value={runtimeValue}>
-      <ThemeProvider initialConfig={createZoraThemeConfig(theme)} initialMode={initialMode}>
+      <ThemeProvider initialConfig={resolvedConfig} initialMode={initialMode}>
         {children}
       </ThemeProvider>
     </ZoraThemeRuntimeContext.Provider>

package/src/theme/ZoraThemeRuntimeContext.tsx

@@ -1,15 +1,13 @@
 import { createContext, useContext } from 'react';
 
-import type { ZoraTheme, ZoraThemeId } from './types';
+import type { ZoraThemeId } from './types';
 import { zoraDefaultTheme } from './zoraDefaultTheme';
 
 interface ZoraThemeRuntime {
-  sourceTheme: ZoraTheme;
   themeId: ZoraThemeId;
 }
 
 export const ZoraThemeRuntimeContext = createContext<ZoraThemeRuntime>({
-  sourceTheme: zoraDefaultTheme,
   themeId: zoraDefaultTheme.id,
 });
 

package/src/theme/ZoraThemeScope.tsx

@@ -1,7 +1,6 @@
 import { createTheme, ThemeContext, useFontContext, useTheme } from '@ankhorage/surface';
 import React, { useMemo } from 'react';
 
-import { createZoraThemeConfig } from './createZoraThemeConfig';
 import { resolveZoraScopedThemeId } from './resolveZoraScopedThemeId';
 import type { ZoraThemeId, ZoraThemeMode } from './types';
 import { useZoraThemeRuntime, ZoraThemeRuntimeContext } from './ZoraThemeRuntimeContext';
@@ -16,25 +15,16 @@ function ZoraThemeScopeInner({ children, themeId, mode }: ZoraThemeScopeProps) {
   const parentSurface = useTheme();
   const parentRuntime = useZoraThemeRuntime();
   const { activeFontId } = useFontContext();
-
   const scopedThemeId = resolveZoraScopedThemeId({
     desiredThemeId: themeId,
     inheritedThemeId: parentRuntime.themeId,
   });
-
   const scopedMode = mode ?? parentSurface.mode;
-
-  // Plan 2: there is no multi-theme registry yet. Keep the active theme seed inherited.
-  const surfaceConfig = useMemo(
-    () => createZoraThemeConfig(parentRuntime.sourceTheme),
-    [parentRuntime.sourceTheme],
-  );
-
+  const sourceConfig = parentSurface.theme.config;
   const scopedTheme = useMemo(
-    () => createTheme(surfaceConfig, scopedMode, activeFontId),
-    [surfaceConfig, scopedMode, activeFontId],
+    () => createTheme(sourceConfig, scopedMode, activeFontId),
+    [sourceConfig, scopedMode, activeFontId],
   );
-
   const scopedSurfaceValue = useMemo(
     () => ({
       theme: scopedTheme,
@@ -45,14 +35,7 @@ function ZoraThemeScopeInner({ children, themeId, mode }: ZoraThemeScopeProps) {
     }),
     [parentSurface.setMode, parentSurface.setThemeConfig, scopedMode, scopedTheme],
   );
-
-  const scopedRuntimeValue = useMemo(
-    () => ({
-      sourceTheme: parentRuntime.sourceTheme,
-      themeId: scopedThemeId,
-    }),
-    [parentRuntime.sourceTheme, scopedThemeId],
-  );
+  const scopedRuntimeValue = useMemo(() => ({ themeId: scopedThemeId }), [scopedThemeId]);
 
   return (
     <ZoraThemeRuntimeContext.Provider value={scopedRuntimeValue}>
@@ -62,10 +45,7 @@ function ZoraThemeScopeInner({ children, themeId, mode }: ZoraThemeScopeProps) {
 }
 
 export function ZoraThemeScope({ children, themeId, mode }: ZoraThemeScopeProps) {
-  if (mode === undefined && themeId === undefined) {
-    return children;
-  }
-
+  if (mode === undefined && themeId === undefined) return children;
   return (
     <ZoraThemeScopeInner mode={mode} themeId={themeId}>
       {children}