@ankhorage/zora 18.0.1 → 19.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "18.0.1",
+  "version": "19.0.1",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {
@@ -41,8 +41,8 @@
   "dependencies": {
     "@ankhorage/color-theory": "^0.3.0",
     "@ankhorage/contracts": "^12.0.1",
-    "@ankhorage/surface": "^8.0.0",
-    "@ankhorage/utility": "^0.8.0",
+    "@ankhorage/surface": "^9.0.1",
+    "@ankhorage/utility": "^1.2.0",
     "expo-document-picker": "~57.0.1",
     "expo-image-picker": "~57.0.16"
   },
@@ -77,19 +77,19 @@
       "default": "./dist/features/uploader/public.js"
     },
     "./metadata": {
-      "react-native": "./src/metadata/index.ts",
-      "browser": "./src/metadata/index.ts",
-      "types": "./dist/metadata/index.d.ts",
-      "import": "./dist/metadata/index.js",
-      "default": "./dist/metadata/index.js"
+      "react-native": "./src/features/authoring/index.ts",
+      "browser": "./src/features/authoring/index.ts",
+      "types": "./dist/features/authoring/index.d.ts",
+      "import": "./dist/features/authoring/index.js",
+      "default": "./dist/features/authoring/index.js"
     },
     "./theme": {
-      "bun": "./src/theme/public.ts",
-      "react-native": "./src/theme/public.ts",
-      "browser": "./src/theme/public.ts",
-      "types": "./dist/theme/public.d.ts",
-      "import": "./dist/theme/public.js",
-      "default": "./dist/theme/public.js"
+      "bun": "./src/features/theme/public.ts",
+      "react-native": "./src/features/theme/public.ts",
+      "browser": "./src/features/theme/public.ts",
+      "types": "./dist/features/theme/public.d.ts",
+      "import": "./dist/features/theme/public.js",
+      "default": "./dist/features/theme/public.js"
     },
     "./package.json": "./package.json"
   },

package/src/audit.test.ts

@@ -120,16 +120,16 @@ describe('Plan 5 audit — no showcase bridge or direct Surface imports in examp
 
 describe('Plan 5 audit — product-facing src imports ZORA layout primitives, not Surface directly', () => {
   /**
-   * Features and patterns that compose ZORA layout primitives should import them from ZORA,
+   * Product-facing features that compose ZORA layout primitives should import them from ZORA,
    * not directly from @ankhorage/surface. The feature-owned layout adapters are the deliberate
    * Surface foundation boundary.
    */
   const SURFACE_FOUNDATION_BOUNDARY = join(SRC_ROOT, 'features', 'layout');
-  const PRODUCT_FACING_DIRS = [join(SRC_ROOT, 'features'), join(SRC_ROOT, 'patterns')];
+  const PRODUCT_FACING_DIRS = [join(SRC_ROOT, 'features')];
   const FOUNDATION_PRIMITIVES_PATTERN =
     /import \{[^}]*\b(View|ScrollView|Grid|Divider)\b[^}]*\} from '@ankhorage\/surface'/;
 
-  test('feature, layout, and pattern files do not import foundation primitives directly from @ankhorage/surface', () => {
+  test('product-facing feature files do not import foundation primitives directly from @ankhorage/surface', () => {
     for (const dir of PRODUCT_FACING_DIRS) {
       for (const filePath of listFiles(dir)) {
         if (isPathWithin(filePath, SURFACE_FOUNDATION_BOUNDARY)) continue;
@@ -151,7 +151,7 @@ describe('Plan 5 audit — no hard-coded runtime colors', () => {
   const RUNTIME_COLOR_LITERAL_PATTERN = /#[0-9A-Fa-f]{3,8}|rgba?\(|hsla?\(/;
   const EXEMPT_COLOR_LITERAL_FILES = new Set([
     // This is source-theme data, not component chrome. Plan 5 explicitly allows theme seed literals.
-    join(SRC_ROOT, 'theme', 'zoraDefaultTheme.ts'),
+    join(SRC_ROOT, 'features', 'theme', 'zoraDefaultTheme.ts'),
   ]);
 
   test('non-test src files do not contain raw runtime color literals', () => {

package/src/features/accordion/accordionItemMeta.ts

@@ -1,5 +1,5 @@
-import type { ZoraComponentMeta } from '../../metadata';
-import { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
+import type { ZoraComponentMeta } from '../authoring';
+import { CONTAINER_ALLOWED_CHILDREN } from '../authoring/allowedChildren';
 
 export const accordionItemMeta = {
   name: 'AccordionItem',

package/src/features/accordion/accordionMeta.ts

@@ -1,4 +1,4 @@
-import type { ZoraComponentMeta } from '../../metadata';
+import type { ZoraComponentMeta } from '../authoring';
 
 export const accordionMeta = {
   name: 'Accordion',

package/src/features/accordion/adapters/inbound/Accordion.tsx

@@ -1,12 +1,12 @@
 import { Accordion as SurfaceAccordion } from '@ankhorage/surface';
 import React from 'react';
 
-import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type {
   AccordionMultipleProps,
   AccordionProps,
   AccordionSingleProps,
 } from '../../../../types/accordion';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
 import { AccordionPresentationContext } from '../../composition/AccordionPresentationContext';
 
 /*** Renders a ZORA accordion backed by Surface expansion and accessibility mechanics. */

package/src/features/accordion/adapters/inbound/AccordionItem.tsx

@@ -6,10 +6,10 @@ import {
 import React from 'react';
 import type { ViewStyle } from 'react-native';
 
-import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { AccordionItemProps } from '../../../../types/accordion';
 import { Icon } from '../../../icon/public';
 import { Divider, View } from '../../../layout/public';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
 import { Heading, Text } from '../../../typography/public';
 import { AccordionPresentationContext } from '../../composition/AccordionPresentationContext';
 

package/src/features/activity-indicator/activityIndicatorMeta.ts

@@ -1,4 +1,4 @@
-import type { ZoraComponentMeta } from '../../metadata';
+import type { ZoraComponentMeta } from '../authoring';
 
 export const activityIndicatorMeta = {
   name: 'ActivityIndicator',

package/src/features/activity-indicator/adapters/inbound/ActivityIndicator.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { ActivityIndicator as ReactNativeActivityIndicator } from 'react-native';
 
-import { useZoraTheme } from '../../../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { ActivityIndicatorProps } from '../../../../types/activity-indicator';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
+import { useZoraTheme } from '../../../theme/composition/useZoraTheme';
 
 /*** Render native loading feedback with a semantic ZORA fallback color. */
 function ActivityIndicatorInner({

package/src/features/app-bar/adapters/inbound/AppBar.tsx

@@ -1,12 +1,12 @@
 import { AppBar as SurfaceAppBar, type ButtonIconSpec } from '@ankhorage/surface';
 import React from 'react';
 
-import { useZoraTheme } from '../../../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { AppBarMode, AppBarOverflowMenu, AppBarProps } from '../../../../types/app-bar';
 import { IconButton } from '../../../button/public';
 import { View } from '../../../layout/public';
 import { PopoverMenu } from '../../../popover-menu/public';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
+import { useZoraTheme } from '../../../theme/composition/useZoraTheme';
 import { Heading, Text } from '../../../typography/public';
 
 const DEFAULT_CANCEL_ICON = { name: 'close-outline' } satisfies ButtonIconSpec;

package/src/features/app-bar/appBarMeta.ts

@@ -1,4 +1,4 @@
-import type { ZoraComponentMeta } from '../../metadata';
+import type { ZoraComponentMeta } from '../authoring';
 
 export const appBarMeta = {
   name: 'AppBar',

package/src/features/auth/adapters/inbound/AuthForm.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { ZoraBaseProps } from '../../../../theme/ZoraBaseProps';
+import type { ZoraBaseProps } from '../../../../types/base';
 import type { FormErrors, FormFieldConfig, FormValues } from '../../../../types/form';
 import { FormActions, FormError, useFormController } from '../../../form/public';
 import { View } from '../../../layout/public';

package/src/features/auth/adapters/inbound/AuthFormField.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { ZoraBaseProps } from '../../../../theme/ZoraBaseProps';
+import type { ZoraBaseProps } from '../../../../types/base';
 import type { FormFieldConfig, FormFieldValue } from '../../../../types/form';
 import { Field, hasRequiredRule } from '../../../form/public';
 import { TextInput } from '../../../form/text-input/public';

package/src/features/auth/adapters/inbound/ForgotPasswordForm.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { ForgotPasswordFormProps } from '../../../../types/auth';
 import type { FormFieldConfig, FormValues } from '../../../../types/form';
 import { Button } from '../../../button/public';
 import { View } from '../../../layout/public';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
 import {
   defaultIdentifiers,
   normalizeIdentifierKind,

package/src/features/auth/adapters/inbound/OAuthProviderButton.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { OAuthProviderButtonProps } from '../../../../types/auth';
 import { Button } from '../../../button/public';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
 import { resolveOAuthProviderIcon, resolveOAuthProviderLabel } from '../../utils/oauthProviders';
 
 function OAuthProviderButtonInner({

package/src/features/auth/adapters/inbound/OAuthProviderList.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { OAuthProviderListProps } from '../../../../types/auth';
 import { View } from '../../../layout/public';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
 import { OAuthProviderButton } from './OAuthProviderButton';
 
 function OAuthProviderListInner({

package/src/features/auth/adapters/inbound/OtpForm.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { OtpFormProps } from '../../../../types/auth';
 import type { FormFieldConfig, FormValues } from '../../../../types/form';
 import { Button } from '../../../button/public';
 import { View } from '../../../layout/public';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
 import { AuthForm } from './AuthForm';
 
 type OtpFieldName = 'otp';

package/src/features/auth/adapters/inbound/SignInForm.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { SignInFormProps } from '../../../../types/auth';
 import type { FormFieldConfig, FormValues } from '../../../../types/form';
 import { Button } from '../../../button/public';
 import { View } from '../../../layout/public';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
 import {
   defaultIdentifiers,
   normalizeIdentifierKind,

package/src/features/auth/adapters/inbound/SignUpForm.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { SignUpFormProps } from '../../../../types/auth';
 import type { FormFieldConfig, FormValues } from '../../../../types/form';
 import { Button } from '../../../button/public';
 import { View } from '../../../layout/public';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
 import { AuthForm } from './AuthForm';
 
 const defaultSignUpFields = [

package/src/features/auth/forgotPasswordFormMeta.ts

@@ -1,4 +1,4 @@
-import type { ZoraComponentMeta } from '../../metadata';
+import type { ZoraComponentMeta } from '../authoring';
 
 export const forgotPasswordFormMeta = {
   name: 'ForgotPasswordForm',

package/src/features/auth/oauthProviderButtonMeta.ts

@@ -1,5 +1,5 @@
-import { ZORA_COLORS } from '../../internal/colorModel';
-import type { ZoraComponentMeta } from '../../metadata';
+import type { ZoraComponentMeta } from '../authoring';
+import { ZORA_COLORS } from '../theme/colorModel';
 
 export const oauthProviderButtonMeta = {
   name: 'OAuthProviderButton',

package/src/features/auth/oauthProviderListMeta.ts

@@ -1,5 +1,5 @@
-import { ZORA_COLORS } from '../../internal/colorModel';
-import type { ZoraComponentMeta } from '../../metadata';
+import type { ZoraComponentMeta } from '../authoring';
+import { ZORA_COLORS } from '../theme/colorModel';
 
 export const oauthProviderListMeta = {
   name: 'OAuthProviderList',

package/src/features/auth/otpFormMeta.ts

@@ -1,4 +1,4 @@
-import type { ZoraComponentMeta } from '../../metadata';
+import type { ZoraComponentMeta } from '../authoring';
 
 export const otpFormMeta = {
   name: 'OtpForm',

package/src/features/auth/public.test.ts

@@ -1,6 +1,6 @@
 import { expect, test } from 'bun:test';
 
-import { ZORA_COMPONENT_META } from '../../metadata/componentMeta';
+import { ZORA_COMPONENT_META } from '../authoring/componentMeta';
 
 const AUTH_MANIFEST_ELEMENTS = [
   'ForgotPasswordForm',

package/src/features/auth/signInFormMeta.ts

@@ -1,4 +1,4 @@
-import type { ZoraComponentMeta } from '../../metadata';
+import type { ZoraComponentMeta } from '../authoring';
 
 export const signInFormMeta = {
   name: 'SignInForm',

package/src/features/auth/signUpFormMeta.ts

@@ -1,4 +1,4 @@
-import type { ZoraComponentMeta } from '../../metadata';
+import type { ZoraComponentMeta } from '../authoring';
 
 export const signUpFormMeta = {
   name: 'SignUpForm',

package/src/features/authoring/allowedChildren.ts

@@ -0,0 +1,89 @@
+export const CONTAINER_ALLOWED_CHILDREN = [
+  'ActivityIndicator',
+  'ForgotPasswordForm',
+  'OAuthProviderButton',
+  'OAuthProviderList',
+  'OtpForm',
+  'SignInForm',
+  'SignUpForm',
+  'Accordion',
+  'Surface',
+  'Avatar',
+  'AvatarGroup',
+  'Badge',
+  'MediaCard',
+  'MetricCard',
+  'Chip',
+  'ChipGroup',
+  'DataTable',
+  'DatePicker',
+  'Dialog',
+  'Pagination',
+  'Rating',
+  'SearchInput',
+  'Tabs',
+  'Toolbar',
+  'Skeleton',
+  'SkeletonCard',
+  'SkeletonList',
+  'SkeletonText',
+  'IconButton',
+  'Uploader',
+  'FlatList',
+  'SectionList',
+  'BottomSheet',
+  'ProductCard',
+  'View',
+  'ScrollView',
+  'Grid',
+  'Gradient',
+  'Divider',
+  'Text',
+  'Heading',
+  'Icon',
+  'Image',
+  'Hero',
+  'KeyboardAvoidingView',
+  'Button',
+  'ButtonGroup',
+  'RadioGroup',
+  'ThemeModeToggle',
+  'TextInput',
+  'TimePicker',
+  'Form',
+  'Card',
+  'EmptyState',
+  'SectionHeader',
+  'PostCard',
+  'ChatListItem',
+  'MessageBubble',
+  'ProgressRing',
+  'ReaderSurface',
+  'ContentRail',
+  'MissingElement',
+] as const;
+
+export const CONTENT_RAIL_ALLOWED_CHILDREN = [
+  'Chip',
+  'ChipGroup',
+  'MediaCard',
+  'MetricCard',
+  'Avatar',
+  'AvatarGroup',
+  'Badge',
+  'Button',
+  'IconButton',
+  'View',
+  'ScrollView',
+  'Card',
+  'Image',
+  'ProductCard',
+  'PostCard',
+  'ChatListItem',
+  'MessageBubble',
+  'MissingElement',
+] as const;
+
+export const SCREEN_SECTION_ALLOWED_CHILDREN = [...CONTAINER_ALLOWED_CHILDREN] as const;
+
+export const SCREEN_ALLOWED_CHILDREN = ['ScreenSection', ...CONTAINER_ALLOWED_CHILDREN] as const;

package/src/features/authoring/authoringMeta.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, test } from 'bun:test';
+
+import { ZORA_COMPONENT_META, type ZoraComponentPropAuthoring } from '.';
+
+const componentMetaByName = new Map(Object.entries(ZORA_COMPONENT_META));
+
+describe('ZORA component prop authoring authority', () => {
+  test('supports instance and theme authority with explicit instance override capability', () => {
+    const values: readonly ZoraComponentPropAuthoring[] = [
+      { authority: 'instance' },
+      { authority: 'theme', scope: 'global' },
+      { authority: 'theme', scope: 'component', allowInstanceOverride: true },
+      { authority: 'theme', scope: 'pattern', allowInstanceOverride: true },
+    ];
+    expect(values).toHaveLength(4);
+  });
+
+  test('keeps representative content and semantics instance-owned', () => {
+    expect(ZORA_COMPONENT_META.Button.props.children?.authoring).toEqual({ authority: 'instance' });
+    expect(ZORA_COMPONENT_META.Card.props.title?.authoring).toEqual({ authority: 'instance' });
+    expect(ZORA_COMPONENT_META.Heading.props.level?.authoring).toEqual({ authority: 'instance' });
+    expect(ZORA_COMPONENT_META.Text.props.text?.authoring).toEqual({ authority: 'instance' });
+  });
+
+  test('marks recipe props theme-owned while allowing explicit instance overrides', () => {
+    for (const name of ['Button', 'Card', 'Heading', 'Text']) {
+      const meta = componentMetaByName.get(name);
+      expect(meta, name).toBeDefined();
+      for (const prop of Object.values(meta?.props ?? {})) {
+        if (prop.authoring?.authority !== 'theme') continue;
+        expect(prop.authoring.allowInstanceOverride, name).toBe(true);
+      }
+    }
+  });
+
+  test('keeps Heading blueprint semantic content useful', () => {
+    expect(ZORA_COMPONENT_META.Heading.blueprint?.defaultProps).toEqual({
+      text: 'Heading',
+      level: 2,
+    });
+  });
+
+  test('does not introduce a system authority', () => {
+    expect(JSON.stringify(ZORA_COMPONENT_META)).not.toContain('"authority":"system"');
+  });
+});