@ankhorage/zora 0.16.2 → 1.0.1

package/CHANGELOG.md

@@ -1,5 +1,79 @@
 # Changelog
 
+## 1.0.1
+
+### Patch Changes
+
+- 938bcfe: ThemeComposer now edits the full ZoraTheme source model.
+  - ThemeComposer adds name editing with empty-name validation.
+  - ThemeComposer adds app category editing via a Select using APP_CATEGORIES from @ankhorage/contracts.
+  - ThemeComposer supports optional `appCategories` prop for narrowing the category options list.
+  - ThemeComposer validates primary color input with parseHexColorOrThrow from @ankhorage/color-theory while keeping public `primaryColor` as `string`.
+  - ThemeComposer preview shows name, appCategory, primaryColor, and harmony metadata.
+  - README and examples app updated to reflect the new API.
+
+## 1.0.0
+
+### Major Changes
+
+- 4d50ada: **Breaking: ZORA core theme model and color stack cleanup**
+
+  ## Removed APIs
+  - `ZoraTheme.colorTone` — removed; `colorTone` is no longer part of the theme seed
+  - `ZoraColorTone` type — removed
+  - `ZORA_COLOR_TONES` constant — removed
+  - `ZoraHexColor` type — removed; ZORA themes now accept normal string hex values
+  - `ZoraComputedTheme.mode` — replaced by `light` and `dark` mode objects
+  - `ThemeComposerRecommendation` — removed
+  - `ThemeComposerAppMood` — removed
+  - `ThemeComposerAppCategory` — removed (was an opaque `string` alias)
+  - `ThemeComposerProps.appMood` — removed
+  - `ThemeComposerProps.recommendations` — removed
+  - Internal color stack (`src/internal/color/`) — removed; ZORA no longer owns color math
+
+  ## Added / Changed APIs
+  - `ZoraTheme.name` — now **required** (was optional); ZORA themes must provide a real display name
+  - `ZoraTheme.appCategory` — new required field; use `AppCategory` from `@ankhorage/contracts`
+  - `ZoraTheme.primaryColor` — remains a public `string`; ZORA validates it internally with `@ankhorage/color-theory`
+  - `ZoraComputedTheme` — now has `light: ZoraComputedThemeMode` and `dark: ZoraComputedThemeMode` instead of a single `mode`
+  - `ZoraComputedThemeMode` — new type: `{ mode, surfaceTheme, generated, swatches, semanticColors? }`
+  - Primary color is now preserved identically for both light and dark `ThemeConfig` modes (no dark-mode mutation)
+  - `SurfaceTheme` (from `@ankhorage/surface`) replaces `AnkhTheme` as the resolved runtime theme type
+
+  ## New dependencies
+  - `@ankhorage/color-theory@^0.0.2` — canonical color types and generation utilities
+  - `@ankhorage/contracts@^1.1.0` — theme config and app category types
+
+  ## Removed dependencies
+  - `culori` — no longer a direct ZORA dependency; color math is delegated to `@ankhorage/color-theory`
+  - `@types/culori` — removed
+
+  ## Migration
+
+  ```ts
+  // Before
+  const theme: ZoraTheme = {
+    id: 'my-theme',
+    name: 'My Theme',
+    primaryColor: '#0f766e',
+    harmony: 'analogous',
+    colorTone: 'jewel',
+  };
+
+  // After
+  const theme: ZoraTheme = {
+    id: 'my-theme',
+    name: 'My Theme',
+    appCategory: 'developer_tools',
+    primaryColor: '#0f766e',
+    harmony: 'analogous',
+  };
+  ```
+
+  The `name` field is now required. `primaryColor` stays app-facing and ergonomic as
+  a string, while ZORA validates it when converting the source theme to a runtime
+  `ThemeConfig`.
+
 ## 0.16.2
 
 ### Patch Changes

package/README.md

@@ -90,28 +90,24 @@ export function App({ appTheme }: { appTheme: ZoraTheme }) {
 }
 ```
 
-ZORA themes use a single seed `primaryColor`. ZORA derives mode-specific primary
-colors for light and dark mode internally.
+ZORA themes use a single seed `primaryColor`. The selected primary color is preserved
+identically for both light and dark mode. Color generation is handled by
+`@ankhorage/color-theory` via Surface.
 
 ```tsx
 <ZoraProvider
   theme={{
     id: 'studio',
+    name: 'Studio',
+    appCategory: 'developer_tools',
     primaryColor: '#0f766e',
     harmony: 'analogous',
-    colorTone: 'jewel',
   }}
 >
   <App />
 </ZoraProvider>
 ```
 
-> **`colorTone` vs component `tone`** — `colorTone` is a theme-seed field that
-> selects the color-world / palette tone for the whole theme (e.g. `'jewel'`,
-> `'pastel'`). Component `tone` props (e.g. `<Text tone="muted" />`,
-> `<Button tone="primary" />`) express semantic color intent inside that theme
-> and are independent of `colorTone`.
-
 `mode` and `themeId` are available on public ZORA components through `ZoraBaseProps`.
 Use component props for local component/subtree overrides.
 
@@ -1372,7 +1368,13 @@ Pass your current theme as `value` and handle updates through `onChange`. Wrap b
 in a `ZoraProvider` so the preview area reflects every change immediately.
 
 ```tsx
-const [theme, setTheme] = React.useState<ZoraTheme>(zoraDefaultTheme);
+const [theme, setTheme] = React.useState<ZoraTheme>({
+  id: 'my-app',
+  name: 'My App',
+  appCategory: 'developer_tools',
+  primaryColor: '#0f766e',
+  harmony: 'analogous',
+});
 const [mode, setMode] = React.useState<ZoraThemeMode>('light');
 
 return (
@@ -1393,14 +1395,15 @@ return (
 
 ZORA props:
 
-| Prop           | Type                            | Default | Notes                                                |
-| -------------- | ------------------------------- | ------- | ---------------------------------------------------- |
-| `value`        | `ZoraTheme`                     | -       | Required controlled theme seed.                      |
-| `onChange`     | `(theme: ZoraTheme) => void`    | -       | Required. Fires on every valid change.               |
-| `mode`         | `ZoraThemeMode`                 | -       | Current light/dark mode shown in the mode toggle.    |
-| `onModeChange` | `(mode: ZoraThemeMode) => void` | -       | Called when the user switches the mode toggle.       |
-| `onSubmit`     | `(theme: ZoraTheme) => void`    | -       | Optional. Renders an "Apply theme" button if set.    |
-| `testID`       | `string`                        | -       | Forwarded to the root element and child test points. |
+| Prop            | Type                            | Default          | Notes                                                |
+| --------------- | ------------------------------- | ---------------- | ---------------------------------------------------- |
+| `value`         | `ZoraTheme`                     | -                | Required controlled theme seed.                      |
+| `onChange`      | `(theme: ZoraTheme) => void`    | -                | Required. Fires on every valid change.               |
+| `mode`          | `ZoraThemeMode`                 | -                | Current light/dark mode shown in the mode toggle.    |
+| `onModeChange`  | `(mode: ZoraThemeMode) => void` | -                | Called when the user switches the mode toggle.       |
+| `onSubmit`      | `(theme: ZoraTheme) => void`    | -                | Optional. Renders an "Apply theme" button if set.    |
+| `appCategories` | `readonly AppCategory[]`        | `APP_CATEGORIES` | Optional override for the app category options list. |
+| `testID`        | `string`                        | -                | Forwarded to the root element and child test points. |
 
 </details>
 
@@ -1425,9 +1428,9 @@ Pass a theme seed to define your app theme:
   theme={{
     id: 'studio',
     name: 'Studio',
+    appCategory: 'developer_tools',
     primaryColor: '#0f766e',
     harmony: 'analogous',
-    colorTone: 'jewel',
   }}
 >
   <App />
@@ -1453,15 +1456,17 @@ No inherited props. `ZoraProviderProps` is declared directly by ZORA.
 
 ### `createZoraThemeConfig`
 
-Creates a Surface-compatible `ThemeConfig` from a ZORA theme seed.
+Creates a `ThemeConfig` (from `@ankhorage/contracts`) from a ZORA theme seed.
+The primary color is preserved identically for both light and dark mode configs.
+Color generation is handled downstream by `@ankhorage/color-theory` via Surface.
 
 ```tsx
 const themeConfig = createZoraThemeConfig({
   id: 'studio',
   name: 'Studio',
+  appCategory: 'developer_tools',
   primaryColor: '#0f766e',
   harmony: 'analogous',
-  colorTone: 'jewel',
 });
 ```
 
@@ -1485,9 +1490,9 @@ Default ZORA theme seed.
 const zoraDefaultTheme: ZoraTheme = {
   id: 'zora',
   name: 'ZORA',
+  appCategory: 'developer_tools',
   primaryColor: '#0f766e',
   harmony: 'analogous',
-  colorTone: 'jewel',
 };
 ```
 

package/dist/components/heading/resolveHeadingRecipe.d.ts

@@ -1,4 +1,4 @@
-import type { AnkhTheme } from '@ankhorage/surface';
+import type { SurfaceTheme } from '@ankhorage/surface';
 import type { TextStyle } from 'react-native';
 import type { HeadingAlign, HeadingLevel, HeadingSize, HeadingTone, HeadingWeight } from './types';
 interface ResolveHeadingRecipeOptions {
@@ -10,6 +10,6 @@ interface ResolveHeadingRecipeOptions {
     italic?: boolean;
 }
 export declare function resolveHeadingSizeFromLevel(level: HeadingLevel): HeadingSize;
-export declare function resolveHeadingRecipe(theme: AnkhTheme, { align, italic, level, size, tone, weight }: ResolveHeadingRecipeOptions): TextStyle;
+export declare function resolveHeadingRecipe(theme: SurfaceTheme, { align, italic, level, size, tone, weight }: ResolveHeadingRecipeOptions): TextStyle;
 export {};
 //# sourceMappingURL=resolveHeadingRecipe.d.ts.map

package/dist/components/heading/resolveHeadingRecipe.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resolveHeadingRecipe.d.ts","sourceRoot":"","sources":["../../../src/components/heading/resolveHeadingRecipe.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAc,MAAM,oBAAoB,CAAC;AAChE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAEnG,UAAU,2BAA2B;IACnC,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAQD,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,YAAY,GAAG,WAAW,CAe5E;AA6ED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,SAAS,EAChB,EAAE,KAAK,EAAE,MAAc,EAAE,KAAK,EAAE,IAAI,EAAE,IAAgB,EAAE,MAAM,EAAE,EAAE,2BAA2B,GAC5F,SAAS,CAcX"}
+{"version":3,"file":"resolveHeadingRecipe.d.ts","sourceRoot":"","sources":["../../../src/components/heading/resolveHeadingRecipe.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAEnG,UAAU,2BAA2B;IACnC,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAQD,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,YAAY,GAAG,WAAW,CAe5E;AA6ED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,YAAY,EACnB,EAAE,KAAK,EAAE,MAAc,EAAE,KAAK,EAAE,IAAI,EAAE,IAAgB,EAAE,MAAM,EAAE,EAAE,2BAA2B,GAC5F,SAAS,CAcX"}

package/dist/components/heading/resolveHeadingRecipe.js.map

@@ -1 +1 @@
-{"version":3,"file":"resolveHeadingRecipe.js","sourceRoot":"","sources":["../../../src/components/heading/resolveHeadingRecipe.ts"],"names":[],"mappings":"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","sourcesContent":["import type { AnkhTheme, FontWeight } from '@ankhorage/surface';\nimport type { TextStyle } from 'react-native';\n\nimport type { HeadingAlign, HeadingLevel, HeadingSize, HeadingTone, HeadingWeight } from './types';\n\ninterface ResolveHeadingRecipeOptions {\n  level: HeadingLevel;\n  size?: HeadingSize;\n  tone?: HeadingTone;\n  align?: HeadingAlign;\n  weight?: HeadingWeight;\n  italic?: boolean;\n}\n\ninterface HeadingRecipe {\n  fontSize: number;\n  lineHeight: number;\n  weight: HeadingWeight;\n}\n\nexport function resolveHeadingSizeFromLevel(level: HeadingLevel): HeadingSize {\n  switch (level) {\n    case 1:\n      return 'h1';\n    case 2:\n      return 'h2';\n    case 3:\n      return 'h3';\n    case 4:\n      return 'h4';\n    case 5:\n      return 'h5';\n    case 6:\n      return 'h6';\n  }\n}\n\nfunction resolveHeadingLevelFromSize(size: Exclude<HeadingSize, 'display'>): HeadingLevel {\n  switch (size) {\n    case 'h1':\n      return 1;\n    case 'h2':\n      return 2;\n    case 'h3':\n      return 3;\n    case 'h4':\n      return 4;\n    case 'h5':\n      return 5;\n    case 'h6':\n      return 6;\n  }\n}\n\nfunction resolveSizeRecipe(theme: AnkhTheme, size: HeadingSize): HeadingRecipe {\n  if (size === 'display') {\n    const fontSize = theme.typography.sizes['3xl'];\n\n    return {\n      fontSize,\n      lineHeight: fontSize + 8,\n      weight: 'bold',\n    };\n  }\n\n  const heading = theme.typography.headings[resolveHeadingLevelFromSize(size)];\n\n  return {\n    fontSize: heading.size,\n    lineHeight: heading.lineHeight,\n    weight: heading.weight,\n  };\n}\n\nfunction resolveToneColor(theme: AnkhTheme, tone: HeadingTone): string {\n  switch (tone) {\n    case 'muted':\n      return theme.semantics.content.muted;\n    case 'subtle':\n      return theme.semantics.content.subtle;\n    case 'inverse':\n      return theme.semantics.content.inverse;\n    case 'primary':\n      return theme.semantics.brand.base;\n    case 'danger':\n      return theme.semantics.danger.base;\n    case 'success':\n      return theme.semantics.success.base;\n    case 'warning':\n      return theme.semantics.warning.base;\n    case 'default':\n    default:\n      return theme.semantics.content.default;\n  }\n}\n\nfunction resolveWeight(theme: AnkhTheme, weight: HeadingWeight): FontWeight {\n  return theme.typography.weights[weight];\n}\n\nfunction resolveFontFamily({\n  theme,\n  weight,\n  italic,\n}: {\n  theme: AnkhTheme;\n  weight: FontWeight;\n  italic: boolean;\n}): string | undefined {\n  return theme.typography.fonts[italic ? 'italic' : 'normal'][weight];\n}\n\nexport function resolveHeadingRecipe(\n  theme: AnkhTheme,\n  { align, italic = false, level, size, tone = 'default', weight }: ResolveHeadingRecipeOptions,\n): TextStyle {\n  const recipe = resolveSizeRecipe(theme, size ?? resolveHeadingSizeFromLevel(level));\n  const resolvedWeight = resolveWeight(theme, weight ?? recipe.weight);\n\n  return {\n    color: resolveToneColor(theme, tone),\n    elevation: 0,\n    fontFamily: resolveFontFamily({ theme, weight: resolvedWeight, italic }),\n    fontSize: recipe.fontSize,\n    fontStyle: italic ? 'italic' : 'normal',\n    fontWeight: resolvedWeight,\n    lineHeight: recipe.lineHeight,\n    textAlign: align,\n  };\n}\n"]}
+{"version":3,"file":"resolveHeadingRecipe.js","sourceRoot":"","sources":["../../../src/components/heading/resolveHeadingRecipe.ts"],"names":[],"mappings":"AAoBA,MAAM,UAAU,2BAA2B,CAAC,KAAmB;IAC7D,QAAQ,KAAK,EAAE,CAAC;QACd,KAAK,CAAC;YACJ,OAAO,IAAI,CAAC;QACd,KAAK,CAAC;YACJ,OAAO,IAAI,CAAC;QACd,KAAK,CAAC;YACJ,OAAO,IAAI,CAAC;QACd,KAAK,CAAC;YACJ,OAAO,IAAI,CAAC;QACd,KAAK,CAAC;YACJ,OAAO,IAAI,CAAC;QACd,KAAK,CAAC;YACJ,OAAO,IAAI,CAAC;IAChB,CAAC;AACH,CAAC;AAED,SAAS,2BAA2B,CAAC,IAAqC;IACxE,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,IAAI;YACP,OAAO,CAAC,CAAC;QACX,KAAK,IAAI;YACP,OAAO,CAAC,CAAC;QACX,KAAK,IAAI;YACP,OAAO,CAAC,CAAC;QACX,KAAK,IAAI;YACP,OAAO,CAAC,CAAC;QACX,KAAK,IAAI;YACP,OAAO,CAAC,CAAC;QACX,KAAK,IAAI;YACP,OAAO,CAAC,CAAC;IACb,CAAC;AACH,CAAC;AAED,SAAS,iBAAiB,CAAC,KAAmB,EAAE,IAAiB;IAC/D,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QACvB,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAE/C,OAAO;YACL,QAAQ;YACR,UAAU,EAAE,QAAQ,GAAG,CAAC;YACxB,MAAM,EAAE,MAAM;SACf,CAAC;IACJ,CAAC;IAED,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,2BAA2B,CAAC,IAAI,CAAC,CAAC,CAAC;IAE7E,OAAO;QACL,QAAQ,EAAE,OAAO,CAAC,IAAI;QACtB,UAAU,EAAE,OAAO,CAAC,UAAU;QAC9B,MAAM,EAAE,OAAO,CAAC,MAAM;KACvB,CAAC;AACJ,CAAC;AAED,SAAS,gBAAgB,CAAC,KAAmB,EAAE,IAAiB;IAC9D,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,OAAO;YACV,OAAO,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;QACvC,KAAK,QAAQ;YACX,OAAO,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC;QACxC,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC;QACzC,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC;QACpC,KAAK,QAAQ;YACX,OAAO,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC;QACrC,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;QACtC,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;QACtC,KAAK,SAAS,CAAC;QACf;YACE,OAAO,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC;IAC3C,CAAC;AACH,CAAC;AAED,SAAS,aAAa,CAAC,KAAmB,EAAE,MAAqB;IAC/D,OAAO,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;AAC1C,CAAC;AAED,SAAS,iBAAiB,CAAC,EACzB,KAAK,EACL,MAAM,EACN,MAAM,GAKP;IACC,OAAO,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;AACtE,CAAC;AAED,MAAM,UAAU,oBAAoB,CAClC,KAAmB,EACnB,EAAE,KAAK,EAAE,MAAM,GAAG,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,GAAG,SAAS,EAAE,MAAM,EAA+B;IAE7F,MAAM,MAAM,GAAG,iBAAiB,CAAC,KAAK,EAAE,IAAI,IAAI,2BAA2B,CAAC,KAAK,CAAC,CAAC,CAAC;IACpF,MAAM,cAAc,GAAG,aAAa,CAAC,KAAK,EAAE,MAAM,IAAI,MAAM,CAAC,MAAM,CAAC,CAAC;IAErE,OAAO;QACL,KAAK,EAAE,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC;QACpC,SAAS,EAAE,CAAC;QACZ,UAAU,EAAE,iBAAiB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,CAAC;QACxE,QAAQ,EAAE,MAAM,CAAC,QAAQ;QACzB,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ;QACvC,UAAU,EAAE,cAAc;QAC1B,UAAU,EAAE,MAAM,CAAC,UAAU;QAC7B,SAAS,EAAE,KAAK;KACjB,CAAC;AACJ,CAAC","sourcesContent":["import type { FontWeight, SurfaceTheme } from '@ankhorage/surface';\nimport type { TextStyle } from 'react-native';\n\nimport type { HeadingAlign, HeadingLevel, HeadingSize, HeadingTone, HeadingWeight } from './types';\n\ninterface ResolveHeadingRecipeOptions {\n  level: HeadingLevel;\n  size?: HeadingSize;\n  tone?: HeadingTone;\n  align?: HeadingAlign;\n  weight?: HeadingWeight;\n  italic?: boolean;\n}\n\ninterface HeadingRecipe {\n  fontSize: number;\n  lineHeight: number;\n  weight: HeadingWeight;\n}\n\nexport function resolveHeadingSizeFromLevel(level: HeadingLevel): HeadingSize {\n  switch (level) {\n    case 1:\n      return 'h1';\n    case 2:\n      return 'h2';\n    case 3:\n      return 'h3';\n    case 4:\n      return 'h4';\n    case 5:\n      return 'h5';\n    case 6:\n      return 'h6';\n  }\n}\n\nfunction resolveHeadingLevelFromSize(size: Exclude<HeadingSize, 'display'>): HeadingLevel {\n  switch (size) {\n    case 'h1':\n      return 1;\n    case 'h2':\n      return 2;\n    case 'h3':\n      return 3;\n    case 'h4':\n      return 4;\n    case 'h5':\n      return 5;\n    case 'h6':\n      return 6;\n  }\n}\n\nfunction resolveSizeRecipe(theme: SurfaceTheme, size: HeadingSize): HeadingRecipe {\n  if (size === 'display') {\n    const fontSize = theme.typography.sizes['3xl'];\n\n    return {\n      fontSize,\n      lineHeight: fontSize + 8,\n      weight: 'bold',\n    };\n  }\n\n  const heading = theme.typography.headings[resolveHeadingLevelFromSize(size)];\n\n  return {\n    fontSize: heading.size,\n    lineHeight: heading.lineHeight,\n    weight: heading.weight,\n  };\n}\n\nfunction resolveToneColor(theme: SurfaceTheme, tone: HeadingTone): string {\n  switch (tone) {\n    case 'muted':\n      return theme.semantics.content.muted;\n    case 'subtle':\n      return theme.semantics.content.subtle;\n    case 'inverse':\n      return theme.semantics.content.inverse;\n    case 'primary':\n      return theme.semantics.brand.base;\n    case 'danger':\n      return theme.semantics.danger.base;\n    case 'success':\n      return theme.semantics.success.base;\n    case 'warning':\n      return theme.semantics.warning.base;\n    case 'default':\n    default:\n      return theme.semantics.content.default;\n  }\n}\n\nfunction resolveWeight(theme: SurfaceTheme, weight: HeadingWeight): FontWeight {\n  return theme.typography.weights[weight];\n}\n\nfunction resolveFontFamily({\n  theme,\n  weight,\n  italic,\n}: {\n  theme: SurfaceTheme;\n  weight: FontWeight;\n  italic: boolean;\n}): string | undefined {\n  return theme.typography.fonts[italic ? 'italic' : 'normal'][weight];\n}\n\nexport function resolveHeadingRecipe(\n  theme: SurfaceTheme,\n  { align, italic = false, level, size, tone = 'default', weight }: ResolveHeadingRecipeOptions,\n): TextStyle {\n  const recipe = resolveSizeRecipe(theme, size ?? resolveHeadingSizeFromLevel(level));\n  const resolvedWeight = resolveWeight(theme, weight ?? recipe.weight);\n\n  return {\n    color: resolveToneColor(theme, tone),\n    elevation: 0,\n    fontFamily: resolveFontFamily({ theme, weight: resolvedWeight, italic }),\n    fontSize: recipe.fontSize,\n    fontStyle: italic ? 'italic' : 'normal',\n    fontWeight: resolvedWeight,\n    lineHeight: recipe.lineHeight,\n    textAlign: align,\n  };\n}\n"]}

package/dist/components/text/resolveTextRecipe.d.ts

@@ -1,8 +1,8 @@
-import { type AnkhTheme, type Breakpoint, type Responsive } from '@ankhorage/surface';
+import { type Breakpoint, type Responsive, type SurfaceTheme } from '@ankhorage/surface';
 import type { TextStyle } from 'react-native';
 import type { TextAlign, TextTone, TextVariant, TextWeight } from './types';
 interface ResolveTextStyleOptions {
-    theme: AnkhTheme;
+    theme: SurfaceTheme;
     breakpoint: Breakpoint;
     variant?: Responsive<TextVariant>;
     tone?: Responsive<TextTone>;

package/dist/components/text/resolveTextRecipe.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resolveTextRecipe.d.ts","sourceRoot":"","sources":["../../../src/components/text/resolveTextRecipe.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,UAAU,EAGf,KAAK,UAAU,EAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAU5E,UAAU,uBAAuB;IAC/B,KAAK,EAAE,SAAS,CAAC;IACjB,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC5B,MAAM,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA0GD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,UAAU,EACV,OAAO,EACP,IAAI,EACJ,MAAM,EACN,KAAK,EACL,MAAc,GACf,EAAE,uBAAuB,GAAG,SAAS,CA2BrC"}
+{"version":3,"file":"resolveTextRecipe.d.ts","sourceRoot":"","sources":["../../../src/components/text/resolveTextRecipe.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,UAAU,EAGf,KAAK,UAAU,EACf,KAAK,YAAY,EAClB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAU5E,UAAU,uBAAuB;IAC/B,KAAK,EAAE,YAAY,CAAC;IACpB,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC5B,MAAM,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA0GD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,UAAU,EACV,OAAO,EACP,IAAI,EACJ,MAAM,EACN,KAAK,EACL,MAAc,GACf,EAAE,uBAAuB,GAAG,SAAS,CA2BrC"}

package/dist/components/text/resolveTextRecipe.js.map

@@ -1 +1 @@
-{"version":3,"file":"resolveTextRecipe.js","sourceRoot":"","sources":["../../../src/components/text/resolveTextRecipe.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  type AnkhTheme,\n  type Breakpoint,\n  type FontWeight,\n  resolveResponsive,\n  type Responsive,\n} from '@ankhorage/surface';\nimport type { TextStyle } from 'react-native';\n\nimport type { TextAlign, TextTone, TextVariant, TextWeight } from './types';\n\ninterface VariantRecipe {\n  fontSize: number;\n  lineHeight: number;\n  weight: TextWeight;\n  textTransform?: TextStyle['textTransform'];\n  letterSpacing?: number;\n}\n\ninterface ResolveTextStyleOptions {\n  theme: AnkhTheme;\n  breakpoint: Breakpoint;\n  variant?: Responsive<TextVariant>;\n  tone?: Responsive<TextTone>;\n  weight?: Responsive<TextWeight>;\n  align?: Responsive<TextAlign>;\n  italic?: boolean;\n}\n\nfunction isMediumBreakpointOrLarger(breakpoint: Breakpoint): boolean {\n  return breakpoint === 'md' || breakpoint === 'lg' || breakpoint === 'xl';\n}\n\nfunction resolveWeight(theme: AnkhTheme, weight: TextWeight): FontWeight {\n  return theme.typography.weights[weight];\n}\n\nfunction resolveFontFamily({\n  theme,\n  variant,\n  weight,\n  italic,\n}: {\n  theme: AnkhTheme;\n  variant: TextVariant;\n  weight: FontWeight;\n  italic: boolean;\n}): string | undefined {\n  if (variant === 'code') {\n    return 'monospace';\n  }\n\n  return theme.typography.fonts[italic ? 'italic' : 'normal'][weight];\n}\n\nfunction resolveVariantRecipe(\n  theme: AnkhTheme,\n  variant: TextVariant,\n  breakpoint: Breakpoint,\n): VariantRecipe {\n  switch (variant) {\n    case 'lead':\n      return {\n        fontSize: isMediumBreakpointOrLarger(breakpoint)\n          ? theme.typography.sizes.l\n          : theme.typography.sizes.m,\n        lineHeight: isMediumBreakpointOrLarger(breakpoint) ? 28 : 24,\n        weight: 'regular',\n      };\n    case 'bodySmall':\n      return {\n        fontSize: theme.typography.sizes.s,\n        lineHeight: 20,\n        weight: 'regular',\n      };\n    case 'caption':\n      return {\n        fontSize: theme.typography.sizes.xs,\n        lineHeight: 16,\n        weight: 'regular',\n      };\n    case 'label':\n      return {\n        fontSize: theme.typography.sizes.s,\n        lineHeight: 18,\n        weight: 'medium',\n      };\n    case 'eyebrow':\n      return {\n        fontSize: theme.typography.sizes.xs,\n        lineHeight: 16,\n        weight: 'semiBold',\n        textTransform: 'uppercase',\n        letterSpacing: 0.8,\n      };\n    case 'code':\n      return {\n        fontSize: theme.typography.sizes.s,\n        lineHeight: 20,\n        weight: 'regular',\n      };\n    case 'body':\n    default:\n      return {\n        fontSize: theme.typography.sizes.m,\n        lineHeight: 24,\n        weight: 'regular',\n      };\n  }\n}\n\nfunction resolveToneColor(theme: AnkhTheme, tone: TextTone): string {\n  switch (tone) {\n    case 'muted':\n      return theme.semantics.content.muted;\n    case 'subtle':\n      return theme.semantics.content.subtle;\n    case 'inverse':\n      return theme.semantics.content.inverse;\n    case 'primary':\n      return theme.semantics.brand.base;\n    case 'danger':\n      return theme.semantics.danger.base;\n    case 'success':\n      return theme.semantics.success.base;\n    case 'warning':\n      return theme.semantics.warning.base;\n    case 'default':\n    default:\n      return theme.semantics.content.default;\n  }\n}\n\nexport function resolveTextStyle({\n  theme,\n  breakpoint,\n  variant,\n  tone,\n  weight,\n  align,\n  italic = false,\n}: ResolveTextStyleOptions): TextStyle {\n  const resolvedVariant = resolveResponsive(variant, breakpoint) ?? 'body';\n  const resolvedTone = resolveResponsive(tone, breakpoint) ?? 'default';\n  const resolvedAlign = resolveResponsive(align, breakpoint);\n  const recipe = resolveVariantRecipe(theme, resolvedVariant, breakpoint);\n  const resolvedWeight = resolveWeight(\n    theme,\n    resolveResponsive(weight, breakpoint) ?? recipe.weight,\n  );\n\n  return {\n    color: resolveToneColor(theme, resolvedTone),\n    elevation: 0,\n    fontFamily: resolveFontFamily({\n      theme,\n      variant: resolvedVariant,\n      weight: resolvedWeight,\n      italic,\n    }),\n    fontSize: recipe.fontSize,\n    fontStyle: italic ? 'italic' : 'normal',\n    fontWeight: resolvedWeight,\n    letterSpacing: recipe.letterSpacing,\n    lineHeight: recipe.lineHeight,\n    textAlign: resolvedAlign,\n    textTransform: recipe.textTransform,\n  };\n}\n"]}
+{"version":3,"file":"resolveTextRecipe.js","sourceRoot":"","sources":["../../../src/components/text/resolveTextRecipe.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  type Breakpoint,\n  type FontWeight,\n  resolveResponsive,\n  type Responsive,\n  type SurfaceTheme,\n} from '@ankhorage/surface';\nimport type { TextStyle } from 'react-native';\n\nimport type { TextAlign, TextTone, TextVariant, TextWeight } from './types';\n\ninterface VariantRecipe {\n  fontSize: number;\n  lineHeight: number;\n  weight: TextWeight;\n  textTransform?: TextStyle['textTransform'];\n  letterSpacing?: number;\n}\n\ninterface ResolveTextStyleOptions {\n  theme: SurfaceTheme;\n  breakpoint: Breakpoint;\n  variant?: Responsive<TextVariant>;\n  tone?: Responsive<TextTone>;\n  weight?: Responsive<TextWeight>;\n  align?: Responsive<TextAlign>;\n  italic?: boolean;\n}\n\nfunction isMediumBreakpointOrLarger(breakpoint: Breakpoint): boolean {\n  return breakpoint === 'md' || breakpoint === 'lg' || breakpoint === 'xl';\n}\n\nfunction resolveWeight(theme: SurfaceTheme, weight: TextWeight): FontWeight {\n  return theme.typography.weights[weight];\n}\n\nfunction resolveFontFamily({\n  theme,\n  variant,\n  weight,\n  italic,\n}: {\n  theme: SurfaceTheme;\n  variant: TextVariant;\n  weight: FontWeight;\n  italic: boolean;\n}): string | undefined {\n  if (variant === 'code') {\n    return 'monospace';\n  }\n\n  return theme.typography.fonts[italic ? 'italic' : 'normal'][weight];\n}\n\nfunction resolveVariantRecipe(\n  theme: SurfaceTheme,\n  variant: TextVariant,\n  breakpoint: Breakpoint,\n): VariantRecipe {\n  switch (variant) {\n    case 'lead':\n      return {\n        fontSize: isMediumBreakpointOrLarger(breakpoint)\n          ? theme.typography.sizes.l\n          : theme.typography.sizes.m,\n        lineHeight: isMediumBreakpointOrLarger(breakpoint) ? 28 : 24,\n        weight: 'regular',\n      };\n    case 'bodySmall':\n      return {\n        fontSize: theme.typography.sizes.s,\n        lineHeight: 20,\n        weight: 'regular',\n      };\n    case 'caption':\n      return {\n        fontSize: theme.typography.sizes.xs,\n        lineHeight: 16,\n        weight: 'regular',\n      };\n    case 'label':\n      return {\n        fontSize: theme.typography.sizes.s,\n        lineHeight: 18,\n        weight: 'medium',\n      };\n    case 'eyebrow':\n      return {\n        fontSize: theme.typography.sizes.xs,\n        lineHeight: 16,\n        weight: 'semiBold',\n        textTransform: 'uppercase',\n        letterSpacing: 0.8,\n      };\n    case 'code':\n      return {\n        fontSize: theme.typography.sizes.s,\n        lineHeight: 20,\n        weight: 'regular',\n      };\n    case 'body':\n    default:\n      return {\n        fontSize: theme.typography.sizes.m,\n        lineHeight: 24,\n        weight: 'regular',\n      };\n  }\n}\n\nfunction resolveToneColor(theme: SurfaceTheme, tone: TextTone): string {\n  switch (tone) {\n    case 'muted':\n      return theme.semantics.content.muted;\n    case 'subtle':\n      return theme.semantics.content.subtle;\n    case 'inverse':\n      return theme.semantics.content.inverse;\n    case 'primary':\n      return theme.semantics.brand.base;\n    case 'danger':\n      return theme.semantics.danger.base;\n    case 'success':\n      return theme.semantics.success.base;\n    case 'warning':\n      return theme.semantics.warning.base;\n    case 'default':\n    default:\n      return theme.semantics.content.default;\n  }\n}\n\nexport function resolveTextStyle({\n  theme,\n  breakpoint,\n  variant,\n  tone,\n  weight,\n  align,\n  italic = false,\n}: ResolveTextStyleOptions): TextStyle {\n  const resolvedVariant = resolveResponsive(variant, breakpoint) ?? 'body';\n  const resolvedTone = resolveResponsive(tone, breakpoint) ?? 'default';\n  const resolvedAlign = resolveResponsive(align, breakpoint);\n  const recipe = resolveVariantRecipe(theme, resolvedVariant, breakpoint);\n  const resolvedWeight = resolveWeight(\n    theme,\n    resolveResponsive(weight, breakpoint) ?? recipe.weight,\n  );\n\n  return {\n    color: resolveToneColor(theme, resolvedTone),\n    elevation: 0,\n    fontFamily: resolveFontFamily({\n      theme,\n      variant: resolvedVariant,\n      weight: resolvedWeight,\n      italic,\n    }),\n    fontSize: recipe.fontSize,\n    fontStyle: italic ? 'italic' : 'normal',\n    fontWeight: resolvedWeight,\n    letterSpacing: recipe.letterSpacing,\n    lineHeight: recipe.lineHeight,\n    textAlign: resolvedAlign,\n    textTransform: recipe.textTransform,\n  };\n}\n"]}

package/dist/patterns/theme-composer/ThemeComposer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeComposer.d.ts","sourceRoot":"","sources":["../../../src/patterns/theme-composer/ThemeComposer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAwB1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAyRlD,eAAO,MAAM,aAAa,0DAAyC,CAAC"}
+{"version":3,"file":"ThemeComposer.d.ts","sourceRoot":"","sources":["../../../src/patterns/theme-composer/ThemeComposer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAmSlD,eAAO,MAAM,aAAa,0DAAyC,CAAC"}

package/dist/patterns/theme-composer/ThemeComposer.js

@@ -1,3 +1,5 @@
+import { COLOR_HARMONIES, parseHexColorOrThrow } from '@ankhorage/color-theory';
+import { APP_CATEGORIES } from '@ankhorage/contracts';
 import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 import { Badge } from '../../components/badge';
@@ -8,53 +10,55 @@ import { Input } from '../../components/input';
 import { Select } from '../../components/select';
 import { Tabs } from '../../components/tabs';
 import { Text } from '../../components/text';
-import { ZORA_COLOR_HARMONIES, ZORA_COLOR_TONES, } from '../../theme/types';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { createThemeFromThemeComposerRecommendation, findThemeComposerRecommendation, formatThemeComposerLabel, } from './recommendations';
-const HEX_RE = /^#[0-9A-Fa-f]{6}$/;
+const HEX_ERROR_MESSAGE = 'Enter a valid 6-digit hex color (e.g. #0f766e).';
+const NAME_ERROR_MESSAGE = 'Theme name cannot be empty.';
 function isValidHex(value) {
-    return HEX_RE.test(value);
+    try {
+        parseHexColorOrThrow(value);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+function formatAppCategoryLabel(category) {
+    return category
+        .split('_')
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+        .join(' ');
 }
-const HARMONY_OPTIONS = ZORA_COLOR_HARMONIES.map((h) => ({ value: h, label: h }));
-const TONE_OPTIONS = ZORA_COLOR_TONES.map((t) => ({ value: t, label: t }));
+const HARMONY_OPTIONS = COLOR_HARMONIES.map((h) => ({ value: h, label: h }));
 const MODE_TABS = [
     { value: 'light', label: 'Light' },
     { value: 'dark', label: 'Dark' },
 ];
-const COLOR_TONE_BACKGROUND_TONE = {
-    neutral: 'Neutral',
-    pastel: 'Pastel',
-    earth: 'Earth',
-    mineral: 'Mineral',
-    muted: 'Muted',
-    jewel: 'Neutral',
-    fluorescent: 'Obsidian',
-    obsidian: 'Obsidian',
-    vaporwave: 'Pastel',
-    monochromeAccent: 'Neutral',
-};
-const COLOR_TONE_FOREGROUND_TONE = {
-    neutral: 'Jewel',
-    pastel: 'Jewel',
-    earth: 'Mineral',
-    mineral: 'Jewel',
-    muted: 'Jewel',
-    jewel: 'Jewel',
-    fluorescent: 'Fluorescent',
-    obsidian: 'Fluorescent',
-    vaporwave: 'Fluorescent',
-    monochromeAccent: 'Jewel',
-};
-function ThemeComposerInner({ themeId: _themeId, value, onChange, mode, onModeChange, onSubmit, appCategory, appMood, recommendations, testID, }) {
+function ThemeComposerInner({ themeId: _themeId, value, onChange, mode, onModeChange, onSubmit, appCategories, testID, }) {
     const { theme } = useZoraTheme();
     const [hexInput, setHexInput] = React.useState(value.primaryColor);
     const [hexError, setHexError] = React.useState(undefined);
-    // Keep local hex input in sync when value.primaryColor changes externally
+    const [nameInput, setNameInput] = React.useState(value.name);
+    const [nameError, setNameError] = React.useState(undefined);
+    // Keep local inputs in sync when value changes externally
     React.useEffect(() => {
         setHexInput(value.primaryColor);
         setHexError(undefined);
     }, [value.primaryColor]);
+    React.useEffect(() => {
+        setNameInput(value.name);
+        setNameError(undefined);
+    }, [value.name]);
+    function handleNameChange(text) {
+        setNameInput(text);
+        if (text.trim().length === 0) {
+            setNameError(NAME_ERROR_MESSAGE);
+        }
+        else {
+            setNameError(undefined);
+            onChange({ ...value, name: text });
+        }
+    }
     function handleHexChange(text) {
         // Ensure leading hash
         const normalized = text.startsWith('#') ? text : `#${text}`;
@@ -64,44 +68,56 @@ function ThemeComposerInner({ themeId: _themeId, value, onChange, mode, onModeCh
             onChange({ ...value, primaryColor: normalized });
         }
         else {
-            setHexError('Enter a valid 6-digit hex color (e.g. #0f766e).');
+            setHexError(HEX_ERROR_MESSAGE);
+        }
+    }
+    function handleSubmit() {
+        const hasValidName = nameInput.trim().length > 0;
+        const hasValidHex = isValidHex(hexInput);
+        if (!hasValidName) {
+            setNameError(NAME_ERROR_MESSAGE);
+        }
+        if (!hasValidHex) {
+            setHexError(HEX_ERROR_MESSAGE);
+        }
+        if (!hasValidName || !hasValidHex) {
+            return;
         }
+        onSubmit?.({
+            ...value,
+            name: nameInput,
+            primaryColor: hexInput,
+        });
     }
     const activeMode = mode ?? 'light';
-    const recommendation = findThemeComposerRecommendation({
-        appCategory,
-        appMood,
-        recommendations,
-    });
+    const categoryOptions = (appCategories ?? APP_CATEGORIES).map((c) => ({
+        value: c,
+        label: formatAppCategoryLabel(c),
+    }));
     return (<Stack gap="l" testID={testID}>
-      {recommendation ? (<Card title="Recommended starting point" description="Use this as an optional starting point. It is only applied when you choose it." actions={<Button size="s" emphasis="soft" tone="primary" onPress={() => onChange(createThemeFromThemeComposerRecommendation({
-                    value,
-                    recommendation,
-                }))} testID={testID ? `${testID}-apply-recommendation` : undefined}>
-              Apply recommendation
-            </Button>}>
-          <Stack gap="s">
-            <Stack direction="row" gap="s" wrap="wrap">
-              <Badge tone="primary" emphasis="soft">
-                {formatThemeComposerLabel(recommendation.appMood)} mood
-              </Badge>
-              <Badge tone="neutral" emphasis="soft">
-                {formatThemeComposerLabel(recommendation.suggestedColorTone)} color tone
-              </Badge>
-              <Badge tone="neutral" emphasis="soft">
-                {formatThemeComposerLabel(recommendation.suggestedHarmony)} harmony
-              </Badge>
-              {recommendation.suggestedPrimaryHueDegrees === undefined ? null : (<Badge tone="neutral" emphasis="soft">
-                  {recommendation.suggestedPrimaryHueDegrees}° hue
-                </Badge>)}
-            </Stack>
-            <Text tone="muted" variant="bodySmall">
-              Suggested for {formatThemeComposerLabel(recommendation.appCategory)}. The color tone
-              controls palette character, harmony controls accent relationships, and hue sets the
-              starting primary color when available.
+      {/* Section: Theme identity */}
+      <Card title="Theme identity" description="Name your theme. The ID is assigned automatically and shown for reference.">
+        <Stack gap="m">
+          <Stack gap="xs">
+            <Text variant="label">Name</Text>
+            <Input value={nameInput} onChangeText={handleNameChange} placeholder="My theme" autoCorrect={false} invalid={nameError !== undefined} testID={testID ? `${testID}-name-input` : undefined}/>
+            {nameError ? (<Text tone="danger" variant="bodySmall">
+                {nameError}
+              </Text>) : null}
+          </Stack>
+          <Stack gap="xs">
+            <Text variant="label">ID</Text>
+            <Text tone="muted" variant="bodySmall" testID={testID ? `${testID}-id-display` : undefined}>
+              {value.id}
             </Text>
           </Stack>
-        </Card>) : null}
+        </Stack>
+      </Card>
+
+      {/* Section: App category */}
+      <Card title="App category" description="Choose the category that best describes this app.">
+        <Select value={value.appCategory} options={categoryOptions} onValueChange={(c) => onChange({ ...value, appCategory: c })} testID={testID ? `${testID}-category-select` : undefined}/>
+      </Card>
 
       {/* Section: Primary Color */}
       <Card title="Primary color" description="Set the seed color for your theme palette.">
@@ -128,27 +144,6 @@ function ThemeComposerInner({ themeId: _themeId, value, onChange, mode, onModeCh
         <Select value={value.harmony} options={HARMONY_OPTIONS} onValueChange={(h) => onChange({ ...value, harmony: h })} testID={testID ? `${testID}-harmony-select` : undefined}/>
       </Card>
 
-      {/* Section: Color tone */}
-      <Card title="Color tone" description="Controls the vibrancy and saturation style of the palette.">
-        <Stack gap="s">
-          <Select value={value.colorTone} options={TONE_OPTIONS} onValueChange={(t) => onChange({ ...value, colorTone: t })} testID={testID ? `${testID}-tone-select` : undefined}/>
-          <Stack direction="row" gap="s" align="center">
-            <Text tone="muted" variant="caption">
-              Background:
-            </Text>
-            <Badge tone="neutral" emphasis="soft">
-              {COLOR_TONE_BACKGROUND_TONE[value.colorTone]}
-            </Badge>
-            <Text tone="muted" variant="caption">
-              Foreground:
-            </Text>
-            <Badge tone="neutral" emphasis="soft">
-              {COLOR_TONE_FOREGROUND_TONE[value.colorTone]}
-            </Badge>
-          </Stack>
-        </Stack>
-      </Card>
-
       {/* Section: Mode */}
       <Card title="Mode" description="Switch between light and dark presentation.">
         <Tabs value={activeMode} items={MODE_TABS} onValueChange={(m) => onModeChange?.(m)} variant="segmented" testID={testID ? `${testID}-mode-tabs` : undefined}/>
@@ -157,6 +152,26 @@ function ThemeComposerInner({ themeId: _themeId, value, onChange, mode, onModeCh
       {/* Section: Preview */}
       <Card title="Preview" description="A quick look at how your theme renders common controls.">
         <Stack gap="m">
+          <Stack gap="xs">
+            <Text variant="label">Name</Text>
+            <Text>{value.name}</Text>
+          </Stack>
+          <Stack gap="xs">
+            <Text variant="label">Category</Text>
+            <Text>{formatAppCategoryLabel(value.appCategory)}</Text>
+          </Stack>
+          <Stack gap="xs">
+            <Text variant="label">Primary color</Text>
+            <Text tone="muted" variant="bodySmall">
+              {value.primaryColor}
+            </Text>
+          </Stack>
+          <Stack gap="xs">
+            <Text variant="label">Harmony</Text>
+            <Text tone="muted" variant="bodySmall">
+              {value.harmony}
+            </Text>
+          </Stack>
           <Heading level={4}>Heading</Heading>
           <Text>Body text — this shows default text color and weight.</Text>
           <Text tone="muted" variant="bodySmall">
@@ -190,7 +205,7 @@ function ThemeComposerInner({ themeId: _themeId, value, onChange, mode, onModeCh
       </Card>
 
       {/* Submit */}
-      {onSubmit ? (<Button tone="primary" emphasis="solid" onPress={() => onSubmit(value)} testID={testID ? `${testID}-submit` : undefined}>
+      {onSubmit ? (<Button tone="primary" emphasis="solid" onPress={handleSubmit} testID={testID ? `${testID}-submit` : undefined}>
           Apply theme
         </Button>) : null}
     </Stack>);