@ankhorage/zora 1.0.0 → 1.0.2

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,5 +1,6 @@
 import { COLOR_HARMONIES, parseHexColorOrThrow } from '@ankhorage/color-theory';
-import { Box, Stack } from '@ankhorage/surface';
+import type { AppCategory } from '@ankhorage/contracts';
+import { APP_CATEGORIES } from '@ankhorage/contracts';
 import React from 'react';
 
 import { Badge } from '../../components/badge';
@@ -10,11 +11,16 @@ import { Input } from '../../components/input';
 import { Select } from '../../components/select';
 import { Tabs } from '../../components/tabs';
 import { Text } from '../../components/text';
+import { Box, Stack } from '../../foundation';
 import type { ZoraThemeMode } from '../../theme/types';
 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.';
+const HEX_INPUT_PLACEHOLDER = 'Enter hex color';
+const NAME_ERROR_MESSAGE = 'Theme name cannot be empty.';
+
 function isValidHex(value: string): boolean {
   try {
     parseHexColorOrThrow(value);
@@ -24,6 +30,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 +51,7 @@ function ThemeComposerInner({
   mode,
   onModeChange,
   onSubmit,
+  appCategories,
   testID,
 }: ThemeComposerProps) {
   const { theme } = useZoraTheme();
@@ -45,12 +59,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 +92,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">
@@ -76,7 +180,7 @@ function ThemeComposerInner({
               <Input
                 value={hexInput}
                 onChangeText={handleHexChange}
-                placeholder="#0f766e"
+                placeholder={HEX_INPUT_PLACEHOLDER}
                 autoCapitalize="none"
                 autoCorrect={false}
                 maxLength={7}
@@ -131,6 +235,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 +297,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[];
 }

package/src/patterns/tile-grid/PaletteItem.tsx

@@ -1,9 +1,9 @@
-import { Box } from '@ankhorage/surface';
 import React from 'react';
 
 import { Card } from '../../components/card';
 import { Heading } from '../../components/heading';
 import { Text } from '../../components/text';
+import { Box } from '../../foundation';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { PaletteItemProps } from './types';

package/src/patterns/tile-grid/TileGrid.tsx

@@ -1,6 +1,6 @@
-import { Box } from '@ankhorage/surface';
 import React from 'react';
 
+import { Box } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { TileGridProps } from './types';
 

package/src/patterns/tree-view/TreeItem.tsx

@@ -1,7 +1,7 @@
-import { Box, Stack } from '@ankhorage/surface';
 import React from 'react';
 
 import { IconButton } from '../../components/icon-button';
+import { Box, Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 import { SettingsRow } from '../settings-row';

package/src/patterns/tree-view/TreeView.tsx

@@ -1,6 +1,6 @@
-import { Stack } from '@ankhorage/surface';
 import React from 'react';
 
+import { Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { TreeItem } from './TreeItem';
 import type { TreeViewProps } from './types';