@ankhorage/zora 1.0.0 → 1.0.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # 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

package/README.md

@@ -1368,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 (
@@ -1389,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>
 

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":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA0KlD,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,4 +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';
@@ -11,6 +12,8 @@ import { Tabs } from '../../components/tabs';
 import { Text } from '../../components/text';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+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) {
     try {
         parseHexColorOrThrow(value);
@@ -20,20 +23,42 @@ function isValidHex(value) {
         return false;
     }
 }
+function formatAppCategoryLabel(category) {
+    return category
+        .split('_')
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+        .join(' ');
+}
 const HARMONY_OPTIONS = COLOR_HARMONIES.map((h) => ({ value: h, label: h }));
 const MODE_TABS = [
     { value: 'light', label: 'Light' },
     { value: 'dark', label: 'Dark' },
 ];
-function ThemeComposerInner({ themeId: _themeId, value, onChange, mode, onModeChange, onSubmit, 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}`;
@@ -43,11 +68,57 @@ 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 categoryOptions = (appCategories ?? APP_CATEGORIES).map((c) => ({
+        value: c,
+        label: formatAppCategoryLabel(c),
+    }));
     return (<Stack gap="l" testID={testID}>
+      {/* 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>
+        </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.">
         <Stack gap="m">
@@ -81,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">
@@ -114,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>);

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeComposer.js","sourceRoot":"","sources":["../../../src/patterns/theme-composer/ThemeComposer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { COLOR_HARMONIES, parseHexColorOrThrow } from '@ankhorage/color-theory';\nimport { Box, Stack } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { Badge } from '../../components/badge';\nimport { Button } from '../../components/button';\nimport { Card } from '../../components/card';\nimport { Heading } from '../../components/heading';\nimport { Input } from '../../components/input';\nimport { Select } from '../../components/select';\nimport { Tabs } from '../../components/tabs';\nimport { Text } from '../../components/text';\nimport type { ZoraThemeMode } from '../../theme/types';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ThemeComposerProps } from './types';\n\nfunction isValidHex(value: string): boolean {\n  try {\n    parseHexColorOrThrow(value);\n    return true;\n  } catch {\n    return false;\n  }\n}\n\nconst HARMONY_OPTIONS = COLOR_HARMONIES.map((h) => ({ value: h, label: h }));\n\nconst MODE_TABS = [\n  { value: 'light' as ZoraThemeMode, label: 'Light' },\n  { value: 'dark' as ZoraThemeMode, label: 'Dark' },\n];\n\nfunction ThemeComposerInner({\n  themeId: _themeId,\n  value,\n  onChange,\n  mode,\n  onModeChange,\n  onSubmit,\n  testID,\n}: ThemeComposerProps) {\n  const { theme } = useZoraTheme();\n\n  const [hexInput, setHexInput] = React.useState<string>(value.primaryColor);\n  const [hexError, setHexError] = React.useState<string | undefined>(undefined);\n\n  // Keep local hex input in sync when value.primaryColor changes externally\n  React.useEffect(() => {\n    setHexInput(value.primaryColor);\n    setHexError(undefined);\n  }, [value.primaryColor]);\n\n  function handleHexChange(text: string) {\n    // Ensure leading hash\n    const normalized = text.startsWith('#') ? text : `#${text}`;\n    setHexInput(normalized);\n\n    if (isValidHex(normalized)) {\n      setHexError(undefined);\n      onChange({ ...value, primaryColor: normalized });\n    } else {\n      setHexError('Enter a valid 6-digit hex color (e.g. #0f766e).');\n    }\n  }\n\n  const activeMode = mode ?? 'light';\n\n  return (\n    <Stack gap=\"l\" testID={testID}>\n      {/* Section: Primary Color */}\n      <Card title=\"Primary color\" description=\"Set the seed color for your theme palette.\">\n        <Stack gap=\"m\">\n          <Stack direction=\"row\" gap=\"m\" align=\"center\">\n            <Box flex={1}>\n              <Input\n                value={hexInput}\n                onChangeText={handleHexChange}\n                placeholder=\"#0f766e\"\n                autoCapitalize=\"none\"\n                autoCorrect={false}\n                maxLength={7}\n                invalid={hexError !== undefined}\n                testID={testID ? `${testID}-hex-input` : undefined}\n              />\n            </Box>\n            {/* Color preview chip */}\n            <Box\n              width={36}\n              height={36}\n              radius=\"m\"\n              style={{\n                backgroundColor: isValidHex(hexInput) ? hexInput : theme.colors.border,\n                borderWidth: 1,\n                borderColor: theme.colors.border,\n              }}\n            />\n          </Stack>\n          {hexError ? (\n            <Text tone=\"danger\" variant=\"bodySmall\">\n              {hexError}\n            </Text>\n          ) : null}\n        </Stack>\n      </Card>\n\n      {/* Section: Harmony */}\n      <Card\n        title=\"Harmony\"\n        description=\"Choose how accent hues are generated from your primary color.\"\n      >\n        <Select\n          value={value.harmony}\n          options={HARMONY_OPTIONS}\n          onValueChange={(h) => onChange({ ...value, harmony: h })}\n          testID={testID ? `${testID}-harmony-select` : undefined}\n        />\n      </Card>\n\n      {/* Section: Mode */}\n      <Card title=\"Mode\" description=\"Switch between light and dark presentation.\">\n        <Tabs\n          value={activeMode}\n          items={MODE_TABS}\n          onValueChange={(m) => onModeChange?.(m)}\n          variant=\"segmented\"\n          testID={testID ? `${testID}-mode-tabs` : undefined}\n        />\n      </Card>\n\n      {/* Section: Preview */}\n      <Card title=\"Preview\" description=\"A quick look at how your theme renders common controls.\">\n        <Stack gap=\"m\">\n          <Heading level={4}>Heading</Heading>\n          <Text>Body text — this shows default text color and weight.</Text>\n          <Text tone=\"muted\" variant=\"bodySmall\">\n            Muted caption text.\n          </Text>\n          <Stack direction=\"row\" gap=\"s\" align=\"center\">\n            <Button tone=\"primary\" emphasis=\"solid\" size=\"m\">\n              Primary\n            </Button>\n            <Button tone=\"neutral\" emphasis=\"soft\" size=\"m\">\n              Neutral\n            </Button>\n            <Button tone=\"danger\" emphasis=\"ghost\" size=\"m\">\n              Danger\n            </Button>\n          </Stack>\n          <Stack direction=\"row\" gap=\"s\" align=\"center\">\n            <Badge tone=\"primary\">Primary</Badge>\n            <Badge tone=\"success\" emphasis=\"soft\">\n              Success\n            </Badge>\n            <Badge tone=\"warning\" emphasis=\"soft\">\n              Warning\n            </Badge>\n            <Badge tone=\"danger\" emphasis=\"soft\">\n              Danger\n            </Badge>\n          </Stack>\n          <Card\n            tone=\"subtle\"\n            title=\"Nested card\"\n            description=\"Subtle tone inside the preview.\"\n            compact\n          />\n        </Stack>\n      </Card>\n\n      {/* Submit */}\n      {onSubmit ? (\n        <Button\n          tone=\"primary\"\n          emphasis=\"solid\"\n          onPress={() => onSubmit(value)}\n          testID={testID ? `${testID}-submit` : undefined}\n        >\n          Apply theme\n        </Button>\n      ) : null}\n    </Stack>\n  );\n}\n\nexport const ThemeComposer = withZoraThemeScope(ThemeComposerInner);\n"]}
+{"version":3,"file":"ThemeComposer.js","sourceRoot":"","sources":["../../../src/patterns/theme-composer/ThemeComposer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { COLOR_HARMONIES, parseHexColorOrThrow } from '@ankhorage/color-theory';\nimport type { AppCategory } from '@ankhorage/contracts';\nimport { APP_CATEGORIES } from '@ankhorage/contracts';\nimport { Box, Stack } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { Badge } from '../../components/badge';\nimport { Button } from '../../components/button';\nimport { Card } from '../../components/card';\nimport { Heading } from '../../components/heading';\nimport { Input } from '../../components/input';\nimport { Select } from '../../components/select';\nimport { Tabs } from '../../components/tabs';\nimport { Text } from '../../components/text';\nimport type { ZoraThemeMode } from '../../theme/types';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ThemeComposerProps } from './types';\n\nconst HEX_ERROR_MESSAGE = 'Enter a valid 6-digit hex color (e.g. #0f766e).';\nconst NAME_ERROR_MESSAGE = 'Theme name cannot be empty.';\n\nfunction isValidHex(value: string): boolean {\n  try {\n    parseHexColorOrThrow(value);\n    return true;\n  } catch {\n    return false;\n  }\n}\n\nfunction formatAppCategoryLabel(category: AppCategory): string {\n  return category\n    .split('_')\n    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n    .join(' ');\n}\n\nconst HARMONY_OPTIONS = COLOR_HARMONIES.map((h) => ({ value: h, label: h }));\n\nconst MODE_TABS = [\n  { value: 'light' as ZoraThemeMode, label: 'Light' },\n  { value: 'dark' as ZoraThemeMode, label: 'Dark' },\n];\n\nfunction ThemeComposerInner({\n  themeId: _themeId,\n  value,\n  onChange,\n  mode,\n  onModeChange,\n  onSubmit,\n  appCategories,\n  testID,\n}: ThemeComposerProps) {\n  const { theme } = useZoraTheme();\n\n  const [hexInput, setHexInput] = React.useState<string>(value.primaryColor);\n  const [hexError, setHexError] = React.useState<string | undefined>(undefined);\n\n  const [nameInput, setNameInput] = React.useState<string>(value.name);\n  const [nameError, setNameError] = React.useState<string | undefined>(undefined);\n\n  // Keep local inputs in sync when value changes externally\n  React.useEffect(() => {\n    setHexInput(value.primaryColor);\n    setHexError(undefined);\n  }, [value.primaryColor]);\n\n  React.useEffect(() => {\n    setNameInput(value.name);\n    setNameError(undefined);\n  }, [value.name]);\n\n  function handleNameChange(text: string) {\n    setNameInput(text);\n    if (text.trim().length === 0) {\n      setNameError(NAME_ERROR_MESSAGE);\n    } else {\n      setNameError(undefined);\n      onChange({ ...value, name: text });\n    }\n  }\n\n  function handleHexChange(text: string) {\n    // Ensure leading hash\n    const normalized = text.startsWith('#') ? text : `#${text}`;\n    setHexInput(normalized);\n\n    if (isValidHex(normalized)) {\n      setHexError(undefined);\n      onChange({ ...value, primaryColor: normalized });\n    } else {\n      setHexError(HEX_ERROR_MESSAGE);\n    }\n  }\n\n  function handleSubmit() {\n    const hasValidName = nameInput.trim().length > 0;\n    const hasValidHex = isValidHex(hexInput);\n\n    if (!hasValidName) {\n      setNameError(NAME_ERROR_MESSAGE);\n    }\n\n    if (!hasValidHex) {\n      setHexError(HEX_ERROR_MESSAGE);\n    }\n\n    if (!hasValidName || !hasValidHex) {\n      return;\n    }\n\n    onSubmit?.({\n      ...value,\n      name: nameInput,\n      primaryColor: hexInput,\n    });\n  }\n\n  const activeMode = mode ?? 'light';\n  const categoryOptions = (appCategories ?? APP_CATEGORIES).map((c) => ({\n    value: c,\n    label: formatAppCategoryLabel(c),\n  }));\n\n  return (\n    <Stack gap=\"l\" testID={testID}>\n      {/* Section: Theme identity */}\n      <Card\n        title=\"Theme identity\"\n        description=\"Name your theme. The ID is assigned automatically and shown for reference.\"\n      >\n        <Stack gap=\"m\">\n          <Stack gap=\"xs\">\n            <Text variant=\"label\">Name</Text>\n            <Input\n              value={nameInput}\n              onChangeText={handleNameChange}\n              placeholder=\"My theme\"\n              autoCorrect={false}\n              invalid={nameError !== undefined}\n              testID={testID ? `${testID}-name-input` : undefined}\n            />\n            {nameError ? (\n              <Text tone=\"danger\" variant=\"bodySmall\">\n                {nameError}\n              </Text>\n            ) : null}\n          </Stack>\n          <Stack gap=\"xs\">\n            <Text variant=\"label\">ID</Text>\n            <Text\n              tone=\"muted\"\n              variant=\"bodySmall\"\n              testID={testID ? `${testID}-id-display` : undefined}\n            >\n              {value.id}\n            </Text>\n          </Stack>\n        </Stack>\n      </Card>\n\n      {/* Section: App category */}\n      <Card title=\"App category\" description=\"Choose the category that best describes this app.\">\n        <Select\n          value={value.appCategory}\n          options={categoryOptions}\n          onValueChange={(c) => onChange({ ...value, appCategory: c })}\n          testID={testID ? `${testID}-category-select` : undefined}\n        />\n      </Card>\n\n      {/* Section: Primary Color */}\n      <Card title=\"Primary color\" description=\"Set the seed color for your theme palette.\">\n        <Stack gap=\"m\">\n          <Stack direction=\"row\" gap=\"m\" align=\"center\">\n            <Box flex={1}>\n              <Input\n                value={hexInput}\n                onChangeText={handleHexChange}\n                placeholder=\"#0f766e\"\n                autoCapitalize=\"none\"\n                autoCorrect={false}\n                maxLength={7}\n                invalid={hexError !== undefined}\n                testID={testID ? `${testID}-hex-input` : undefined}\n              />\n            </Box>\n            {/* Color preview chip */}\n            <Box\n              width={36}\n              height={36}\n              radius=\"m\"\n              style={{\n                backgroundColor: isValidHex(hexInput) ? hexInput : theme.colors.border,\n                borderWidth: 1,\n                borderColor: theme.colors.border,\n              }}\n            />\n          </Stack>\n          {hexError ? (\n            <Text tone=\"danger\" variant=\"bodySmall\">\n              {hexError}\n            </Text>\n          ) : null}\n        </Stack>\n      </Card>\n\n      {/* Section: Harmony */}\n      <Card\n        title=\"Harmony\"\n        description=\"Choose how accent hues are generated from your primary color.\"\n      >\n        <Select\n          value={value.harmony}\n          options={HARMONY_OPTIONS}\n          onValueChange={(h) => onChange({ ...value, harmony: h })}\n          testID={testID ? `${testID}-harmony-select` : undefined}\n        />\n      </Card>\n\n      {/* Section: Mode */}\n      <Card title=\"Mode\" description=\"Switch between light and dark presentation.\">\n        <Tabs\n          value={activeMode}\n          items={MODE_TABS}\n          onValueChange={(m) => onModeChange?.(m)}\n          variant=\"segmented\"\n          testID={testID ? `${testID}-mode-tabs` : undefined}\n        />\n      </Card>\n\n      {/* Section: Preview */}\n      <Card title=\"Preview\" description=\"A quick look at how your theme renders common controls.\">\n        <Stack gap=\"m\">\n          <Stack gap=\"xs\">\n            <Text variant=\"label\">Name</Text>\n            <Text>{value.name}</Text>\n          </Stack>\n          <Stack gap=\"xs\">\n            <Text variant=\"label\">Category</Text>\n            <Text>{formatAppCategoryLabel(value.appCategory)}</Text>\n          </Stack>\n          <Stack gap=\"xs\">\n            <Text variant=\"label\">Primary color</Text>\n            <Text tone=\"muted\" variant=\"bodySmall\">\n              {value.primaryColor}\n            </Text>\n          </Stack>\n          <Stack gap=\"xs\">\n            <Text variant=\"label\">Harmony</Text>\n            <Text tone=\"muted\" variant=\"bodySmall\">\n              {value.harmony}\n            </Text>\n          </Stack>\n          <Heading level={4}>Heading</Heading>\n          <Text>Body text — this shows default text color and weight.</Text>\n          <Text tone=\"muted\" variant=\"bodySmall\">\n            Muted caption text.\n          </Text>\n          <Stack direction=\"row\" gap=\"s\" align=\"center\">\n            <Button tone=\"primary\" emphasis=\"solid\" size=\"m\">\n              Primary\n            </Button>\n            <Button tone=\"neutral\" emphasis=\"soft\" size=\"m\">\n              Neutral\n            </Button>\n            <Button tone=\"danger\" emphasis=\"ghost\" size=\"m\">\n              Danger\n            </Button>\n          </Stack>\n          <Stack direction=\"row\" gap=\"s\" align=\"center\">\n            <Badge tone=\"primary\">Primary</Badge>\n            <Badge tone=\"success\" emphasis=\"soft\">\n              Success\n            </Badge>\n            <Badge tone=\"warning\" emphasis=\"soft\">\n              Warning\n            </Badge>\n            <Badge tone=\"danger\" emphasis=\"soft\">\n              Danger\n            </Badge>\n          </Stack>\n          <Card\n            tone=\"subtle\"\n            title=\"Nested card\"\n            description=\"Subtle tone inside the preview.\"\n            compact\n          />\n        </Stack>\n      </Card>\n\n      {/* Submit */}\n      {onSubmit ? (\n        <Button\n          tone=\"primary\"\n          emphasis=\"solid\"\n          onPress={handleSubmit}\n          testID={testID ? `${testID}-submit` : undefined}\n        >\n          Apply theme\n        </Button>\n      ) : null}\n    </Stack>\n  );\n}\n\nexport const ThemeComposer = withZoraThemeScope(ThemeComposerInner);\n"]}

package/dist/patterns/theme-composer/types.d.ts

@@ -1,3 +1,4 @@
+import type { AppCategory } from '@ankhorage/contracts';
 import type { ZoraTheme, ZoraThemeMode } from '../../theme/types';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 export interface ThemeComposerProps extends ZoraBaseProps {
@@ -6,5 +7,6 @@ export interface ThemeComposerProps extends ZoraBaseProps {
     mode?: ZoraThemeMode;
     onModeChange?: (mode: ZoraThemeMode) => void;
     onSubmit?: (theme: ZoraTheme) => void;
+    appCategories?: readonly AppCategory[];
 }
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/theme-composer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,kBAAmB,SAAQ,aAAa;IACvD,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/theme-composer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,kBAAmB,SAAQ,aAAa;IACvD,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACtC,aAAa,CAAC,EAAE,SAAS,WAAW,EAAE,CAAC;CACxC"}

package/dist/patterns/theme-composer/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/theme-composer/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ZoraTheme, ZoraThemeMode } from '../../theme/types';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface ThemeComposerProps extends ZoraBaseProps {\n  value: ZoraTheme;\n  onChange: (theme: ZoraTheme) => void;\n  mode?: ZoraThemeMode;\n  onModeChange?: (mode: ZoraThemeMode) => void;\n  onSubmit?: (theme: ZoraTheme) => void;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/theme-composer/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AppCategory } from '@ankhorage/contracts';\n\nimport type { ZoraTheme, ZoraThemeMode } from '../../theme/types';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface ThemeComposerProps extends ZoraBaseProps {\n  value: ZoraTheme;\n  onChange: (theme: ZoraTheme) => void;\n  mode?: ZoraThemeMode;\n  onModeChange?: (mode: ZoraThemeMode) => void;\n  onSubmit?: (theme: ZoraTheme) => void;\n  appCategories?: readonly AppCategory[];\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {

package/src/patterns/theme-composer/ThemeComposer.test.ts

@@ -1,10 +1,14 @@
-import { COLOR_HARMONIES } from '@ankhorage/color-theory';
+import { COLOR_HARMONIES, parseHexColorOrThrow } from '@ankhorage/color-theory';
+import { APP_CATEGORIES } from '@ankhorage/contracts';
 import { describe, expect, test } from 'bun:test';
 
 import { zoraDefaultTheme } from '../../theme/zoraDefaultTheme';
 import type { ThemeComposerProps } from './types';
 
-// Validate the exported types compile correctly by asserting shape
+// ---------------------------------------------------------------------------
+// ThemeComposerProps shape tests
+// ---------------------------------------------------------------------------
+
 describe('ThemeComposerProps', () => {
   test('accepts a valid ZoraTheme as value', () => {
     const props: ThemeComposerProps = {
@@ -39,8 +43,22 @@ describe('ThemeComposerProps', () => {
     props.onSubmit?.(zoraDefaultTheme);
     expect(submitted).toBe(true);
   });
+
+  test('accepts optional appCategories as option list override', () => {
+    const narrow = ['developer_tools', 'utilities_tools'] as const;
+    const props: ThemeComposerProps = {
+      value: zoraDefaultTheme,
+      onChange: () => undefined,
+      appCategories: narrow,
+    };
+    expect(props.appCategories).toEqual(narrow);
+  });
 });
 
+// ---------------------------------------------------------------------------
+// COLOR_HARMONIES coverage
+// ---------------------------------------------------------------------------
+
 describe('COLOR_HARMONIES coverage for ThemeComposer', () => {
   test('all canonical harmony values are present for the Select options', () => {
     const expected = [
@@ -55,6 +73,42 @@ describe('COLOR_HARMONIES coverage for ThemeComposer', () => {
   });
 });
 
+// ---------------------------------------------------------------------------
+// APP_CATEGORIES default behavior
+// ---------------------------------------------------------------------------
+
+describe('APP_CATEGORIES defaults', () => {
+  test('APP_CATEGORIES from contracts contains expected entries', () => {
+    expect(APP_CATEGORIES).toContain('developer_tools');
+    expect(APP_CATEGORIES).toContain('utilities_tools');
+    expect(APP_CATEGORIES).toContain('lifestyle');
+  });
+
+  test('ThemeComposer appCategories prop is optional — falls back to APP_CATEGORIES', () => {
+    const props: ThemeComposerProps = {
+      value: zoraDefaultTheme,
+      onChange: () => undefined,
+    };
+    // No appCategories provided — component uses APP_CATEGORIES internally.
+    expect(props.appCategories).toBeUndefined();
+  });
+
+  test('ThemeComposer appCategories narrows the available options when provided', () => {
+    const narrow = ['developer_tools', 'utilities_tools'] as const;
+    const props: ThemeComposerProps = {
+      value: zoraDefaultTheme,
+      onChange: () => undefined,
+      appCategories: narrow,
+    };
+    expect(props.appCategories).toHaveLength(2);
+    expect(props.appCategories).toContain('developer_tools');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// onChange propagation contracts
+// ---------------------------------------------------------------------------
+
 describe('onChange propagation contract', () => {
   test('onChange receives updated theme with new harmony', () => {
     const received: (typeof zoraDefaultTheme)[] = [];
@@ -67,4 +121,96 @@ describe('onChange propagation contract', () => {
     expect(received).toHaveLength(1);
     expect(received[0]?.harmony).toBe('triadic');
   });
+
+  test('onChange receives updated theme with new appCategory', () => {
+    const received: (typeof zoraDefaultTheme)[] = [];
+    const props: ThemeComposerProps = {
+      value: zoraDefaultTheme,
+      onChange: (t) => received.push(t),
+    };
+    props.onChange({ ...zoraDefaultTheme, appCategory: 'lifestyle' });
+    expect(received).toHaveLength(1);
+    expect(received[0]?.appCategory).toBe('lifestyle');
+  });
+
+  test('onChange receives updated theme with new valid name', () => {
+    const received: (typeof zoraDefaultTheme)[] = [];
+    const props: ThemeComposerProps = {
+      value: zoraDefaultTheme,
+      onChange: (t) => received.push(t),
+    };
+    props.onChange({ ...zoraDefaultTheme, name: 'My Custom Theme' });
+    expect(received).toHaveLength(1);
+    expect(received[0]?.name).toBe('My Custom Theme');
+  });
+
+  test('onChange is not called with an empty name', () => {
+    // Simulate the component's name validation logic
+    const received: (typeof zoraDefaultTheme)[] = [];
+    const onChange = (t: typeof zoraDefaultTheme) => received.push(t);
+
+    const newName = '';
+    if (newName.trim().length > 0) {
+      onChange({ ...zoraDefaultTheme, name: newName });
+    }
+    // Empty name should not propagate
+    expect(received).toHaveLength(0);
+  });
+
+  test('onChange is not called with invalid primary color', () => {
+    // Simulate the component's hex validation logic
+    const received: (typeof zoraDefaultTheme)[] = [];
+    const onChange = (t: typeof zoraDefaultTheme) => received.push(t);
+
+    const badColor = '#xyz';
+    try {
+      parseHexColorOrThrow(badColor);
+      // Should not reach here for an invalid color
+      onChange({ ...zoraDefaultTheme, primaryColor: badColor });
+    } catch {
+      // Expected: invalid color — do not call onChange
+    }
+    expect(received).toHaveLength(0);
+  });
+
+  test('onChange is called with a valid primary color', () => {
+    const received: (typeof zoraDefaultTheme)[] = [];
+    const onChange = (t: typeof zoraDefaultTheme) => received.push(t);
+
+    const goodColor = '#c084fc';
+    try {
+      parseHexColorOrThrow(goodColor);
+      onChange({ ...zoraDefaultTheme, primaryColor: goodColor });
+    } catch {
+      // Should not reach here for a valid color
+    }
+    expect(received).toHaveLength(1);
+    expect(received[0]?.primaryColor).toBe(goodColor);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Legacy API absence checks
+// ---------------------------------------------------------------------------
+
+describe('No legacy APIs', () => {
+  test('ThemeComposerProps value carries no colorTone field', () => {
+    const theme = zoraDefaultTheme;
+    expect('colorTone' in theme).toBe(false);
+  });
+
+  test('ThemeComposerProps value carries no appMood field', () => {
+    const theme = zoraDefaultTheme;
+    expect('appMood' in theme).toBe(false);
+  });
+
+  test('value.name is required — zoraDefaultTheme.name is a non-empty string', () => {
+    expect(typeof zoraDefaultTheme.name).toBe('string');
+    expect(zoraDefaultTheme.name.length).toBeGreaterThan(0);
+  });
+
+  test('value.appCategory is required — zoraDefaultTheme.appCategory is set', () => {
+    expect(typeof zoraDefaultTheme.appCategory).toBe('string');
+    expect(zoraDefaultTheme.appCategory.length).toBeGreaterThan(0);
+  });
 });

package/src/patterns/theme-composer/ThemeComposer.tsx

@@ -1,4 +1,6 @@
 import { COLOR_HARMONIES, parseHexColorOrThrow } from '@ankhorage/color-theory';
+import type { AppCategory } from '@ankhorage/contracts';
+import { APP_CATEGORIES } from '@ankhorage/contracts';
 import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 
@@ -15,6 +17,9 @@ import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { ThemeComposerProps } from './types';
 
+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: string): boolean {
   try {
     parseHexColorOrThrow(value);
@@ -24,6 +29,13 @@ function isValidHex(value: string): boolean {
   }
 }
 
+function formatAppCategoryLabel(category: AppCategory): string {
+  return category
+    .split('_')
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ');
+}
+
 const HARMONY_OPTIONS = COLOR_HARMONIES.map((h) => ({ value: h, label: h }));
 
 const MODE_TABS = [
@@ -38,6 +50,7 @@ function ThemeComposerInner({
   mode,
   onModeChange,
   onSubmit,
+  appCategories,
   testID,
 }: ThemeComposerProps) {
   const { theme } = useZoraTheme();
@@ -45,12 +58,30 @@ function ThemeComposerInner({
   const [hexInput, setHexInput] = React.useState<string>(value.primaryColor);
   const [hexError, setHexError] = React.useState<string | undefined>(undefined);
 
-  // Keep local hex input in sync when value.primaryColor changes externally
+  const [nameInput, setNameInput] = React.useState<string>(value.name);
+  const [nameError, setNameError] = React.useState<string | undefined>(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: string) {
+    setNameInput(text);
+    if (text.trim().length === 0) {
+      setNameError(NAME_ERROR_MESSAGE);
+    } else {
+      setNameError(undefined);
+      onChange({ ...value, name: text });
+    }
+  }
+
   function handleHexChange(text: string) {
     // Ensure leading hash
     const normalized = text.startsWith('#') ? text : `#${text}`;
@@ -60,14 +91,86 @@ function ThemeComposerInner({
       setHexError(undefined);
       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 categoryOptions = (appCategories ?? APP_CATEGORIES).map((c) => ({
+    value: c,
+    label: formatAppCategoryLabel(c),
+  }));
 
   return (
     <Stack gap="l" testID={testID}>
+      {/* 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>
+        </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.">
         <Stack gap="m">
@@ -131,6 +234,26 @@ function ThemeComposerInner({
       {/* 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">
@@ -173,7 +296,7 @@ function ThemeComposerInner({
         <Button
           tone="primary"
           emphasis="solid"
-          onPress={() => onSubmit(value)}
+          onPress={handleSubmit}
           testID={testID ? `${testID}-submit` : undefined}
         >
           Apply theme

package/src/patterns/theme-composer/types.ts

@@ -1,3 +1,5 @@
+import type { AppCategory } from '@ankhorage/contracts';
+
 import type { ZoraTheme, ZoraThemeMode } from '../../theme/types';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
@@ -7,4 +9,5 @@ export interface ThemeComposerProps extends ZoraBaseProps {
   mode?: ZoraThemeMode;
   onModeChange?: (mode: ZoraThemeMode) => void;
   onSubmit?: (theme: ZoraTheme) => void;
+  appCategories?: readonly AppCategory[];
 }