@ankhorage/zora 18.0.0 → 19.0.0

package/src/{patterns/selection → features/selection/adapters/inbound}/SelectableItem.tsx

@@ -1,9 +1,13 @@
-import { ButtonBase } from '@ankhorage/surface';
+import { Pressable } from '@ankhorage/surface';
 import React from 'react';
 import type { GestureResponderEvent } from 'react-native';
 
+import type {
+  SelectableItemProps,
+  SelectableItemState,
+  SelectionTrigger,
+} from '../../../../types/selection';
 import { useSelection } from './SelectionProvider';
-import type { SelectableItemProps, SelectableItemState, SelectionTrigger } from './types';
 
 function resolveTrigger(trigger: SelectionTrigger | undefined): SelectionTrigger {
   return trigger ?? 'manual';
@@ -63,7 +67,7 @@ export function SelectableItem({
   }, [clear, id, resolvedDisabled, select, selected, selection.mode, toggle]);
 
   // IMPORTANT:
-  // Do not pass `children` directly into ButtonBase. ButtonBase also supports function children,
+  // Do not pass `children` directly into Pressable. Pressable also supports function children,
   // but its function signature receives interaction state, not SelectableItemState.
   const content = isRenderProp(children) ? children(itemState) : children;
 
@@ -96,7 +100,7 @@ export function SelectableItem({
   };
 
   return (
-    <ButtonBase
+    <Pressable
       interactionPolicy={interactionPolicy}
       accessibilityRole="button"
       accessibilityState={{ disabled: resolvedDisabled, selected }}
@@ -105,6 +109,6 @@ export function SelectableItem({
       onPress={resolvedTrigger === 'press' ? handlePress : undefined}
     >
       {content}
-    </ButtonBase>
+    </Pressable>
   );
 }

package/src/{patterns/selection → features/selection/adapters/inbound}/SelectionProvider.tsx

@@ -1,7 +1,17 @@
 import React from 'react';
 
-import { areIdsEqual, clearIds, normalizeIds, selectId, toggleId } from './resolveSelectionNextIds';
-import type { SelectionMode, SelectionProviderProps, UseSelectionResult } from './types';
+import type {
+  SelectionMode,
+  SelectionProviderProps,
+  UseSelectionResult,
+} from '../../../../types/selection';
+import {
+  areIdsEqual,
+  clearIds,
+  normalizeIds,
+  selectId,
+  toggleId,
+} from '../../utils/resolveSelectionNextIds';
 
 const MISSING_CONTEXT_MESSAGE =
   'ZORA selection context is missing. Wrap this tree in <SelectionProvider>.';

package/src/features/selection/public.ts

@@ -0,0 +1,10 @@
+export type {
+  SelectableItemProps,
+  SelectableItemState,
+  SelectionMode,
+  SelectionProviderProps,
+  SelectionTrigger,
+  UseSelectionResult,
+} from '../../types/selection';
+export { SelectableItem } from './adapters/inbound/SelectableItem';
+export { SelectionProvider, useSelection } from './adapters/inbound/SelectionProvider';

package/src/{patterns/selection → features/selection/utils}/resolveSelectionNextIds.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, test } from 'bun:test';
 
+import type { SelectionMode } from '../../../types/selection';
 import { areIdsEqual, clearIds, normalizeIds, selectId, toggleId } from './resolveSelectionNextIds';
-import type { SelectionMode } from './types';
 
 describe('resolveSelectionNextIds', () => {
   test('normalizeIds removes duplicates, preserves order', () => {

package/src/{patterns/selection → features/selection/utils}/resolveSelectionNextIds.ts

@@ -1,4 +1,4 @@
-import type { SelectionMode } from './types';
+import type { SelectionMode } from '../../../types/selection';
 
 export function normalizeIds(
   ids: readonly string[] | undefined,

package/src/{patterns/timeline → features/timeline/adapters/inbound}/Timeline.tsx

@@ -1,15 +1,15 @@
 import type { RoleSemantics, SurfaceTheme } from '@ankhorage/surface';
 import React from 'react';
 
-import { Icon } from '../../features/icon/public';
-import { View } from '../../features/layout/public';
-import { Heading } from '../../features/typography/public';
-import { Text } from '../../features/typography/public';
-import type { ZoraColor } from '../../internal/recipes';
-import { resolveIconSize } from '../../internal/recipes';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { TimelineItem, TimelineProps } from './types';
+import type { ZoraColor } from '../../../../internal/recipes';
+import { resolveIconSize } from '../../../../internal/recipes';
+import { useZoraTheme } from '../../../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { TimelineItem, TimelineProps } from '../../../../types/timeline';
+import { Icon } from '../../../icon/public';
+import { View } from '../../../layout/public';
+import { Heading } from '../../../typography/public';
+import { Text } from '../../../typography/public';
 
 function resolveRoleSemantics(theme: SurfaceTheme, color: ZoraColor): RoleSemantics {
   switch (color) {

package/src/features/timeline/public.ts

@@ -0,0 +1,2 @@
+export type { TimelineItem, TimelineProps } from '../../types/timeline';
+export { Timeline } from './adapters/inbound/Timeline';

package/src/{patterns/tree-view → features/tree-view/adapters/inbound}/TreeItem.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
-import { IconButton } from '../../features/button/public';
-import { View } from '../../features/layout/public';
-import { ListItem } from '../../features/list/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-import type { TreeItemNode, TreeItemRenderProps } from './types';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { ZoraBaseProps } from '../../../../theme/ZoraBaseProps';
+import type { TreeItemNode, TreeItemRenderProps } from '../../../../types/tree-view';
+import { IconButton } from '../../../button/public';
+import { View } from '../../../layout/public';
+import { ListItem } from '../../../list/public';
 
 interface TreeItemProps<TId extends string = string> extends ZoraBaseProps {
   node: TreeItemNode<TId>;

package/src/{patterns/tree-view → features/tree-view/adapters/inbound}/TreeView.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { View } from '../../features/layout/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { TreeViewProps } from '../../../../types/tree-view';
+import { View } from '../../../layout/public';
 import { TreeItem } from './TreeItem';
-import type { TreeViewProps } from './types';
 
 function TreeViewInner<TId extends string = string>({
   themeId: _themeId,

package/src/features/tree-view/public.ts

@@ -0,0 +1,3 @@
+export type { TreeItemNode, TreeItemRenderProps, TreeViewProps } from '../../types/tree-view';
+export { TreeItem } from './adapters/inbound/TreeItem';
+export { TreeView } from './adapters/inbound/TreeView';

package/src/index.ts

@@ -84,10 +84,25 @@ export { MediaCard } from './features/card/public';
 export { MetricCard } from './features/card/public';
 export { PostCard } from './features/card/public';
 export { ProductCard } from './features/card/public';
+export type {
+  ChatListAvatar,
+  ChatListItemProps,
+  MessageBubbleAuthor,
+  MessageBubbleAvatar,
+  MessageBubbleDirection,
+  MessageBubbleProps,
+  MessageBubbleStatus,
+} from './features/chat/public';
+export { ChatListItem, MessageBubble } from './features/chat/public';
 export type { ChipProps } from './features/chip/public';
 export type { ChipGroupItem, ChipGroupProps } from './features/chip/public';
 export { Chip } from './features/chip/public';
 export { ChipGroup } from './features/chip/public';
+export type {
+  CollectionEditorProps,
+  CollectionEditorRenderItemProps,
+} from './features/collection-editor/public';
+export { CollectionEditor } from './features/collection-editor/public';
 export type {
   ContentRailControlPressEvent,
   ContentRailDirection,
@@ -162,6 +177,7 @@ export {
 } from './features/form/radio/public';
 export { SearchInput, type SearchInputProps } from './features/form/search-input/public';
 export { Select, type SelectOption, type SelectProps } from './features/form/select/public';
+export { Switch, type SwitchProps } from './features/form/switch/public';
 export {
   TextInput,
   type TextInputProps,
@@ -200,19 +216,10 @@ export type {
   DividerProps,
   GridProps,
   ScreenProps,
-  ScreenSectionProps,
   ScrollViewProps,
   ViewProps,
 } from './features/layout/public';
-export {
-  AppShell,
-  Divider,
-  Grid,
-  Screen,
-  ScreenSection,
-  ScrollView,
-  View,
-} from './features/layout/public';
+export { AppShell, Divider, Grid, Screen, ScrollView, View } from './features/layout/public';
 export type {
   ManifestListProps,
   ManifestListSection,
@@ -245,6 +252,43 @@ export {
   type ProgressRingProps,
 } from './features/progress/public';
 export { Rating, type RatingProps } from './features/rating/public';
+export type {
+  ReaderColorScheme,
+  ReaderDocumentFormat,
+  ReaderErrorCode,
+  ReaderErrorEvent,
+  ReaderExternalLinkEvent,
+  ReaderLineHeight,
+  ReaderLocationChangeEvent,
+  ReaderNavigationTrigger,
+  ReaderResolvedSource,
+  ReaderStatus,
+  ReaderSurfaceProps,
+} from './features/reader/public';
+export { ReaderSurface, resolveReaderProgress } from './features/reader/public';
+export type {
+  BarcodeScannerViewProps,
+  BarcodeScanResult,
+  CameraPermissionStatus,
+  CameraPermissionViewProps,
+  ScanOverlayProps,
+} from './features/scanner/public';
+export { BarcodeScannerView, CameraPermissionView, ScanOverlay } from './features/scanner/public';
+export {
+  ScreenSection,
+  type ScreenSectionProps,
+  SectionHeader,
+  type SectionHeaderProps,
+} from './features/section/public';
+export type {
+  SelectableItemProps,
+  SelectableItemState,
+  SelectionMode,
+  SelectionProviderProps,
+  SelectionTrigger,
+  UseSelectionResult,
+} from './features/selection/public';
+export { SelectableItem, SelectionProvider, useSelection } from './features/selection/public';
 export {
   Skeleton,
   SkeletonCard,
@@ -275,6 +319,8 @@ export {
   type TimePickerProps,
   type TimePickerValue,
 } from './features/time-picker/public';
+export type { TimelineItem, TimelineProps } from './features/timeline/public';
+export { Timeline } from './features/timeline/public';
 export type {
   ToastController,
   ToastOptions,
@@ -284,6 +330,8 @@ export type {
 } from './features/toast/public';
 export { Toast, ToastProvider, useToast } from './features/toast/public';
 export { Toolbar, type ToolbarProps } from './features/toolbar/public';
+export type { TreeItemNode, TreeItemRenderProps, TreeViewProps } from './features/tree-view/public';
+export { TreeItem, TreeView } from './features/tree-view/public';
 export type {
   HeadingAlign,
   HeadingColor,
@@ -357,72 +405,6 @@ export {
   ZORA_THEME_RECIPE_META,
   ZORA_THEME_TOKEN_FAMILIES,
 } from './metadata';
-export type { ChatListAvatar, ChatListItemProps } from './patterns/chat-list-item';
-export { ChatListItem } from './patterns/chat-list-item';
-export type {
-  CollectionEditorProps,
-  CollectionEditorRenderItemProps,
-} from './patterns/collection-editor';
-export { CollectionEditor } from './patterns/collection-editor';
-export type { ConfirmDialogProps } from './patterns/confirm-dialog';
-export { ConfirmDialog } from './patterns/confirm-dialog';
-export type { FilterBarProps } from './patterns/filter-bar';
-export { FilterBar } from './patterns/filter-bar';
-export type { InspectorFieldProps } from './patterns/inspector-field';
-export { InspectorField } from './patterns/inspector-field';
-export type {
-  MessageBubbleAuthor,
-  MessageBubbleAvatar,
-  MessageBubbleDirection,
-  MessageBubbleProps,
-  MessageBubbleStatus,
-} from './patterns/message-bubble';
-export { MessageBubble } from './patterns/message-bubble';
-export type { NoticeProps } from './patterns/notice';
-export { Notice } from './patterns/notice';
-export type { PanelProps } from './patterns/panel';
-export { Panel } from './patterns/panel';
-export type {
-  ReaderColorScheme,
-  ReaderDocumentFormat,
-  ReaderErrorCode,
-  ReaderErrorEvent,
-  ReaderExternalLinkEvent,
-  ReaderLineHeight,
-  ReaderLocationChangeEvent,
-  ReaderNavigationTrigger,
-  ReaderResolvedSource,
-  ReaderStatus,
-  ReaderSurfaceProps,
-} from './patterns/reader';
-export { ReaderSurface, resolveReaderProgress } from './patterns/reader';
-export type {
-  BarcodeScannerViewProps,
-  BarcodeScanResult,
-  CameraPermissionStatus,
-  CameraPermissionViewProps,
-  ScanOverlayProps,
-} from './patterns/scanner';
-export { BarcodeScannerView, CameraPermissionView, ScanOverlay } from './patterns/scanner';
-export type { SectionHeaderProps } from './patterns/section-header';
-export { SectionHeader } from './patterns/section-header';
-export type {
-  SelectableItemProps,
-  SelectableItemState,
-  SelectionMode,
-  SelectionProviderProps,
-  SelectionTrigger,
-  UseSelectionResult,
-} from './patterns/selection';
-export { SelectableItem, SelectionProvider, useSelection } from './patterns/selection';
-export type { SwitchFieldProps } from './patterns/switch-field';
-export { SwitchField } from './patterns/switch-field';
-export type { ThemeComposerProps } from './patterns/theme-composer';
-export { ThemeComposer } from './patterns/theme-composer';
-export type { TimelineItem, TimelineProps } from './patterns/timeline';
-export { Timeline } from './patterns/timeline';
-export type { TreeItemNode, TreeItemRenderProps, TreeViewProps } from './patterns/tree-view';
-export { TreeItem, TreeView } from './patterns/tree-view';
 export type {
   ComposedZoraPluginCatalog,
   ComposedZoraPluginMetadataCatalog,

package/src/interactionPolicy.test.ts

@@ -22,10 +22,6 @@ function readFeature(...segments: string[]): string {
   return readSource(join('features', ...segments));
 }
 
-function readPattern(...segments: string[]): string {
-  return readSource(join('patterns', ...segments));
-}
-
 describe('InteractionPolicy declaration', () => {
   test('ZoraBaseProps uses the canonical Surface type', () => {
     const source = readSource('theme/ZoraBaseProps.ts');
@@ -42,10 +38,10 @@ describe('InteractionPolicy declaration', () => {
       readSource('types/empty-state.ts'),
       readSource('types/hero.ts'),
       readSource('types/product-card.ts'),
-      readPattern('reader', 'types.ts'),
-      readPattern('scanner', 'types.ts'),
+      readSource('types/reader.ts'),
+      readSource('types/scanner.ts'),
       readSource('types/select.ts'),
-      readPattern('tree-view', 'types.ts'),
+      readSource('types/tree-view.ts'),
     ];
 
     for (const source of files) {
@@ -159,7 +155,7 @@ describe('ProductCard', () => {
 
 describe('ReaderSurface', () => {
   test('types extend ZoraBaseProps instead of duplicating InteractionPolicy', () => {
-    const source = readPattern('reader', 'types.ts');
+    const source = readSource('types/reader.ts');
 
     expect(source).not.toMatch(
       /import type \{\s*InteractionPolicy\s*\} from '@ankhorage\/surface';/,
@@ -169,7 +165,7 @@ describe('ReaderSurface', () => {
   });
 
   test('forwards interactionPolicy to its owned interactive controls', () => {
-    const source = readPattern('reader', 'ReaderSurface.tsx');
+    const source = readFeature('reader', 'adapters', 'inbound', 'ReaderSurface.tsx');
 
     expect(source).not.toMatch(/interactionPolicy:\s*_interactionPolicy/);
     expect(source).toMatch(
@@ -210,7 +206,7 @@ describe('ContentRail', () => {
 
 describe('CameraPermissionView', () => {
   test('forwards interactionPolicy to internal Buttons after prop spreads', () => {
-    const source = readPattern('scanner', 'CameraPermissionView.tsx');
+    const source = readFeature('scanner', 'adapters', 'inbound', 'CameraPermissionView.tsx');
 
     expect(source).toMatch(
       /<Button[\s\S]*?\{\s*\.\.\.requestButtonProps\s*\}[\s\S]*?interactionPolicy=\{interactionPolicy\}/,
@@ -223,7 +219,7 @@ describe('CameraPermissionView', () => {
 
 describe('BarcodeScannerView', () => {
   test('passes interactionPolicy to CameraPermissionView in non-granted states', () => {
-    const source = readPattern('scanner', 'BarcodeScannerView.tsx');
+    const source = readFeature('scanner', 'adapters', 'inbound', 'BarcodeScannerView.tsx');
 
     expect(source).toMatch(/<CameraPermissionView[\s\S]*?interactionPolicy=\{interactionPolicy\}/);
   });
@@ -249,7 +245,7 @@ describe('Select', () => {
 
 describe('TreeItem', () => {
   test('accepts and forwards interactionPolicy to owned and recursive controls', () => {
-    const source = readPattern('tree-view', 'TreeItem.tsx');
+    const source = readFeature('tree-view', 'adapters', 'inbound', 'TreeItem.tsx');
 
     expect(source).toMatch(/interface TreeItemProps[\s\S]*?extends ZoraBaseProps/);
     expect(source).toMatch(/function TreeItemInner[\s\S]*?interactionPolicy,/);

package/src/metadata/allowedChildren.ts

@@ -52,8 +52,6 @@ export const CONTAINER_ALLOWED_CHILDREN = [
   'TimePicker',
   'Form',
   'Card',
-  'Panel',
-  'Notice',
   'EmptyState',
   'SectionHeader',
   'PostCard',
@@ -78,7 +76,6 @@ export const CONTENT_RAIL_ALLOWED_CHILDREN = [
   'View',
   'ScrollView',
   'Card',
-  'Panel',
   'Image',
   'ProductCard',
   'PostCard',

package/src/metadata/authoringMeta.test.ts

@@ -23,7 +23,7 @@ describe('ZORA component prop authoring authority', () => {
   });
 
   test('marks recipe props theme-owned while allowing explicit instance overrides', () => {
-    for (const name of ['Button', 'Card', 'Heading', 'Text', 'Panel']) {
+    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 ?? {})) {

package/src/metadata/bindableComponentMeta.ts

@@ -1,7 +1,7 @@
 import type { UiComponentMetaRegistry } from '@ankhorage/contracts';
 
 import { imageMeta } from '../features/image/imageMeta';
-import { readerSurfaceMeta } from '../patterns/reader/meta';
+import { readerSurfaceMeta } from '../features/reader/meta';
 
 export const ZORA_BINDABLE_COMPONENT_META = {
   Text: {
@@ -296,17 +296,17 @@ export const ZORA_BINDABLE_COMPONENT_META = {
       },
     },
   },
-  SwitchField: {
-    name: 'SwitchField',
-    category: 'pattern',
-    description: 'Captures a boolean switch value with a label.',
+  Switch: {
+    name: 'Switch',
+    category: 'component',
+    description: 'Captures a boolean checked state.',
     directManifestNode: true,
     allowedChildren: [],
     bindings: {
       props: {
-        value: {
-          label: 'Value',
-          description: 'Current switch value.',
+        checked: {
+          label: 'Checked',
+          description: 'Current checked state.',
           value: { type: 'boolean' },
           acceptsFallback: true,
           acceptsTransforms: true,
@@ -320,35 +320,27 @@ export const ZORA_BINDABLE_COMPONENT_META = {
         },
       },
       events: {
-        valueChange: {
-          label: 'Value change',
-          description: 'Runs when the switch value changes.',
+        checkedChange: {
+          label: 'Checked change',
+          description: 'Runs when checked state changes.',
           payload: {
-            eventType: 'switchField.valueChange',
-            fields: [{ path: 'value', type: 'boolean', label: 'Value' }],
+            eventType: 'switch.checkedChange',
+            fields: [{ path: 'checked', type: 'boolean', label: 'Checked' }],
           },
         },
       },
     },
     events: {
-      valueChange: {
-        label: 'Value change',
-        eventType: 'switchField.valueChange',
-        description: 'Emitted when the switch value changes.',
-        payloadFields: [{ path: 'value', type: 'boolean', label: 'Value' }],
+      checkedChange: {
+        label: 'Checked change',
+        eventType: 'switch.checkedChange',
+        description: 'Emitted when the checked state changes.',
+        payloadFields: [{ path: 'checked', type: 'boolean', label: 'Checked' }],
       },
     },
     props: {
-      value: {
-        type: 'boolean',
-        category: 'State',
-        label: 'Value',
-      },
-      disabled: {
-        type: 'boolean',
-        category: 'State',
-        label: 'Disabled',
-      },
+      checked: { type: 'boolean', category: 'State', label: 'Checked' },
+      disabled: { type: 'boolean', category: 'State', label: 'Disabled' },
     },
   },
   List: {

package/src/metadata/componentMeta.test.ts

@@ -108,6 +108,7 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'RadioGroup',
       'SearchInput',
       'Select',
+      'Switch',
       'TextInput',
     ]);
     for (const [name, meta] of Object.entries(ZORA_COMPONENT_META)) {
@@ -175,6 +176,7 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'RadioGroup',
       'Select',
       'ThemeModeToggle',
+      'Switch',
       'TextInput',
       'Text',
       'Heading',
@@ -209,8 +211,6 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'Screen',
       'ScreenSection',
       'Card',
-      'Panel',
-      'Notice',
       'PostCard',
       'MessageBubble',
       'View',
@@ -387,7 +387,6 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'View',
       'ScrollView',
       'Card',
-      'Panel',
       'Image',
       'ProductCard',
       'PostCard',