@ankhorage/zora 14.0.0 → 15.0.0

package/dist/types/popover-menu.d.ts

@@ -0,0 +1,24 @@
+import type { ButtonIconSpec, PopoverAnchorRenderProps, PopoverMenuActionIntent as SurfacePopoverMenuActionIntent } from '@ankhorage/surface';
+import type React from 'react';
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+export type PopoverMenuActionIntent = SurfacePopoverMenuActionIntent;
+export interface PopoverMenuAction {
+    id: string;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: ButtonIconSpec;
+    leading?: React.ReactNode;
+    trailing?: React.ReactNode;
+    intent?: PopoverMenuActionIntent;
+    disabled?: boolean;
+    selected?: boolean;
+    onPress?: () => void;
+}
+export interface PopoverMenuProps extends ZoraBaseProps {
+    trigger: (controls: PopoverAnchorRenderProps) => React.ReactNode;
+    actions: readonly PopoverMenuAction[];
+    onDismiss?: () => void;
+    closeOnSelect?: boolean;
+    testID?: string;
+}
+//# sourceMappingURL=popover-menu.d.ts.map

package/dist/types/popover-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-menu.d.ts","sourceRoot":"","sources":["../../src/types/popover-menu.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,wBAAwB,EACxB,uBAAuB,IAAI,8BAA8B,EAC1D,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAE5D,MAAM,MAAM,uBAAuB,GAAG,8BAA8B,CAAC;AAErE,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,OAAO,EAAE,CAAC,QAAQ,EAAE,wBAAwB,KAAK,KAAK,CAAC,SAAS,CAAC;IACjE,OAAO,EAAE,SAAS,iBAAiB,EAAE,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/types/popover-menu.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=popover-menu.js.map

package/dist/types/popover-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-menu.js","sourceRoot":"","sources":["../../src/types/popover-menu.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  ButtonIconSpec,\n  PopoverAnchorRenderProps,\n  PopoverMenuActionIntent as SurfacePopoverMenuActionIntent,\n} from '@ankhorage/surface';\nimport type React from 'react';\n\nimport type { ZoraBaseProps } from '../theme/ZoraBaseProps';\n\nexport type PopoverMenuActionIntent = SurfacePopoverMenuActionIntent;\n\nexport interface PopoverMenuAction {\n  id: string;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: ButtonIconSpec;\n  leading?: React.ReactNode;\n  trailing?: React.ReactNode;\n  intent?: PopoverMenuActionIntent;\n  disabled?: boolean;\n  selected?: boolean;\n  onPress?: () => void;\n}\n\nexport interface PopoverMenuProps extends ZoraBaseProps {\n  trigger: (controls: PopoverAnchorRenderProps) => React.ReactNode;\n  actions: readonly PopoverMenuAction[];\n  onDismiss?: () => void;\n  closeOnSelect?: boolean;\n  testID?: string;\n}\n"]}

package/dist/types/select.d.ts

@@ -0,0 +1,22 @@
+import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
+export interface SelectOption<TValue extends string = string> {
+    value: TValue;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectProps<TValue extends string = string> extends ZoraBaseProps {
+    value?: TValue;
+    defaultValue?: TValue;
+    options: readonly SelectOption<TValue>[];
+    onValueChange?: (value: TValue) => void;
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    invalid?: boolean;
+    testID?: string;
+}
+//# sourceMappingURL=select.d.ts.map

package/dist/types/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/types/select.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAE5D,MAAM,WAAW,YAAY,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WAAW,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,aAAa;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,SAAS,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/types/select.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=select.js.map

package/dist/types/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/types/select.ts"],"names":[],"mappings":"","sourcesContent":["import type { ZoraBaseProps } from '../theme/ZoraBaseProps';\n\nexport interface SelectOption<TValue extends string = string> {\n  value: TValue;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface SelectProps<TValue extends string = string> extends ZoraBaseProps {\n  value?: TValue;\n  defaultValue?: TValue;\n  options: readonly SelectOption<TValue>[];\n  onValueChange?: (value: TValue) => void;\n  label?: string;\n  helperText?: string;\n  errorText?: string;\n  placeholder?: string;\n  required?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  invalid?: boolean;\n  testID?: string;\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "14.0.0",
+  "version": "15.0.0",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {
@@ -25,7 +25,6 @@
     "components"
   ],
   "peerDependencies": {
-    "@react-native-picker/picker": "2.11.4",
     "@react-native-vector-icons/fontawesome": "^13.1.3",
     "@react-native-vector-icons/fontawesome5": "^13.1.3",
     "@react-native-vector-icons/fontawesome6": "^13.1.3",
@@ -42,7 +41,7 @@
   "dependencies": {
     "@ankhorage/color-theory": "^0.3.0",
     "@ankhorage/contracts": "^12.0.1",
-    "@ankhorage/surface": "^4.4.0",
+    "@ankhorage/surface": "^5.0.0",
     "@ankhorage/utility": "^0.8.0",
     "expo-document-picker": "~57.0.1",
     "expo-image-picker": "~57.0.16"
@@ -117,7 +116,6 @@
   "devDependencies": {
     "@ankhorage/devtools": "^1.13.0",
     "@ankhorage/paradox": "^0.1.24",
-    "@react-native-picker/picker": "2.11.4",
     "@react-native-vector-icons/fontawesome": "^13.1.3",
     "@react-native-vector-icons/fontawesome5": "^13.1.3",
     "@react-native-vector-icons/fontawesome6": "^13.1.3",

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

@@ -0,0 +1,184 @@
+import { AppBar as SurfaceAppBar, type ButtonIconSpec } from '@ankhorage/surface';
+import React from 'react';
+
+import { Inline } from '../../../../foundation';
+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 { Box, Stack } from '../../../layout/public';
+import { PopoverMenu } from '../../../popover-menu/public';
+import { Heading, Text } from '../../../typography/public';
+
+const DEFAULT_CANCEL_ICON = { name: 'close-outline' } satisfies ButtonIconSpec;
+const DEFAULT_OVERFLOW_ICON = { name: 'ellipsis-vertical' } satisfies ButtonIconSpec;
+
+/*** Renders a top app bar with title/subtitle and optional leading/trailing actions. */
+export const AppBar = withZoraThemeScope(AppBarInner);
+
+/*** Composes the opinionated ZORA AppBar over the Surface layout primitive. */
+function AppBarInner({
+  themeId: _themeId,
+  mode: _mode,
+  title,
+  subtitle,
+  leading,
+  actions,
+  overflow,
+  appMode,
+  children,
+  safeAreaTop = true,
+  divider = true,
+  testID,
+  interactionPolicy,
+}: AppBarProps) {
+  const { theme } = useZoraTheme();
+  const resolvedMode = resolveMode(appMode);
+  const isSelectionMode = resolvedMode.type === 'selection';
+  const resolvedLeading = leading ?? resolveSelectionLeading(resolvedMode, interactionPolicy);
+  const overflowMenu = resolveOverflowMenu(overflow, interactionPolicy, testID);
+  const resolvedTrailing = resolveTrailing(actions, overflowMenu);
+  const resolvedCenter = resolveCenter({
+    children,
+    isSelectionMode,
+    resolvedMode,
+    subtitle,
+    title,
+  });
+
+  return (
+    <SurfaceAppBar
+      bg={isSelectionMode ? theme.semantics.action.primary.softBg : undefined}
+      divider={divider}
+      leading={resolvedLeading}
+      safeAreaTop={safeAreaTop}
+      testID={testID}
+      trailing={resolvedTrailing}
+    >
+      {resolvedCenter ? <Box style={{ minWidth: 0 }}>{resolvedCenter}</Box> : null}
+    </SurfaceAppBar>
+  );
+}
+
+/*** Resolves the effective AppBar mode. */
+function resolveMode(mode: AppBarMode | undefined): AppBarMode {
+  return mode ?? { type: 'default' };
+}
+
+/*** Formats the active selection label with its optional count. */
+function resolveSelectionLabel({ count, label }: { count?: number; label: string }): string {
+  if (count === undefined) return label;
+  return `${label} (${count})`;
+}
+
+/*** Resolves the accessible label for the overflow menu trigger. */
+function resolveOverflowLabel(overflow: AppBarOverflowMenu): string {
+  return overflow.label ?? 'More options';
+}
+
+/*** Resolves the accessible label for leaving selection mode. */
+function resolveCancelLabel(mode: Extract<AppBarMode, { type: 'selection' }>): string {
+  return mode.cancelLabel ?? 'Cancel selection';
+}
+
+/*** Resolves the selection action shown at the leading edge. */
+function resolveSelectionLeading(
+  mode: AppBarMode,
+  interactionPolicy: AppBarProps['interactionPolicy'],
+): React.ReactNode | undefined {
+  if (mode.type !== 'selection') return undefined;
+
+  return (
+    <IconButton
+      color="neutral"
+      icon={mode.cancelIcon ?? DEFAULT_CANCEL_ICON}
+      interactionPolicy={interactionPolicy}
+      label={resolveCancelLabel(mode)}
+      onPress={mode.onCancel}
+      size="m"
+      variant="ghost"
+    />
+  );
+}
+
+/*** Resolves the optional AppBar overflow action menu. */
+function resolveOverflowMenu(
+  overflow: AppBarOverflowMenu | undefined,
+  interactionPolicy: AppBarProps['interactionPolicy'],
+  testID: string | undefined,
+): React.ReactNode {
+  if (overflow === undefined || overflow.actions.length === 0) return null;
+
+  return (
+    <PopoverMenu
+      actions={overflow.actions}
+      closeOnSelect={overflow.closeOnSelect}
+      interactionPolicy={interactionPolicy}
+      onDismiss={overflow.onDismiss}
+      testID={testID ? `${testID}-overflow` : undefined}
+      trigger={({ toggle }) => (
+        <IconButton
+          color="neutral"
+          disabled={overflow.disabled}
+          icon={overflow.icon ?? DEFAULT_OVERFLOW_ICON}
+          interactionPolicy={interactionPolicy}
+          label={resolveOverflowLabel(overflow)}
+          onPress={toggle}
+          size="m"
+          variant="ghost"
+        />
+      )}
+    />
+  );
+}
+
+/*** Composes trailing actions and overflow controls. */
+function resolveTrailing(actions: React.ReactNode, overflowMenu: React.ReactNode): React.ReactNode {
+  if (!actions && !overflowMenu) return undefined;
+  return (
+    <Inline align="center" gap="s" wrap="nowrap">
+      {actions}
+      {overflowMenu}
+    </Inline>
+  );
+}
+
+/*** Resolves the center content for default and selection modes. */
+function resolveCenter({
+  children,
+  isSelectionMode,
+  resolvedMode,
+  subtitle,
+  title,
+}: {
+  children: React.ReactNode;
+  isSelectionMode: boolean;
+  resolvedMode: AppBarMode;
+  subtitle: React.ReactNode;
+  title: React.ReactNode;
+}): React.ReactNode {
+  if (children !== undefined) return children;
+  if (isSelectionMode && resolvedMode.type === 'selection') {
+    return (
+      <Text emphasis="default" numberOfLines={1} variant="label" weight="semiBold">
+        {resolveSelectionLabel(resolvedMode)}
+      </Text>
+    );
+  }
+  if (title == null && subtitle == null) return null;
+
+  return (
+    <Stack gap="xs">
+      {title != null ? (
+        <Heading ellipsizeMode="tail" level={3} numberOfLines={1} size="h5">
+          {title}
+        </Heading>
+      ) : null}
+      {subtitle != null ? (
+        <Text ellipsizeMode="tail" emphasis="muted" numberOfLines={1} variant="bodySmall">
+          {subtitle}
+        </Text>
+      ) : null}
+    </Stack>
+  );
+}

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

@@ -0,0 +1,2 @@
+export type { AppBarMode, AppBarOverflowMenu, AppBarProps } from '../../types/app-bar';
+export { AppBar } from './adapters/inbound/AppBar';

package/src/features/bottom-sheet/public.test.ts

@@ -10,8 +10,17 @@ describe('ZORA BottomSheet public contract', () => {
     const source = await Bun.file('src/features/bottom-sheet/public.ts').text();
 
     expect(packageJson.exports['./bottom-sheet']).toBeDefined();
-    expect(packageJson.dependencies['@ankhorage/surface']).toMatch(/^\^4\./u);
+    expect(packageJson.dependencies['@ankhorage/surface']).toMatch(/^\^5\./u);
     expect(source).toContain("from '@ankhorage/surface/bottom-sheet'");
+    for (const name of [
+      'BottomSheetFlatList',
+      'BottomSheetScrollView',
+      'BottomSheetSectionList',
+      'BottomSheetView',
+      'BottomSheetVirtualizedList',
+    ]) {
+      expect(source).toContain(name);
+    }
     const {
       'react-native-gesture-handler': gestureHandlerPeer,
       'react-native-reanimated': reanimatedPeer,

package/src/features/bottom-sheet/public.ts

@@ -1,7 +1,15 @@
 export type { BottomSheetProps } from '../../types/manifest-bottom-sheet';
 export { BottomSheet } from './adapters/inbound/BottomSheet';
 export type {
+  BottomSheetContentMode,
   BottomSheetController,
   BottomSheetPresentOptions,
 } from '@ankhorage/surface/bottom-sheet';
-export { useBottomSheet } from '@ankhorage/surface/bottom-sheet';
+export {
+  BottomSheetFlatList,
+  BottomSheetScrollView,
+  BottomSheetSectionList,
+  BottomSheetView,
+  BottomSheetVirtualizedList,
+  useBottomSheet,
+} from '@ankhorage/surface/bottom-sheet';

package/src/features/breadcrumbs/adapters/inbound/Breadcrumbs.tsx

@@ -0,0 +1,179 @@
+import React from 'react';
+
+import { Inline } from '../../../../foundation';
+import { resolveIconSize } from '../../../../internal/recipes';
+import { useZoraTheme } from '../../../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type {
+  BreadcrumbItem,
+  BreadcrumbPressEvent,
+  BreadcrumbsProps,
+} from '../../../../types/breadcrumbs';
+import { Button } from '../../../button/public';
+import { Icon } from '../../../icon/public';
+import { Text } from '../../../typography/public';
+
+/*** Renders a breadcrumb trail whose final item represents the current location. */
+export const Breadcrumbs = withZoraThemeScope(BreadcrumbsInner);
+
+type BreadcrumbRenderItem =
+  | {
+      item: BreadcrumbItem;
+      type: 'item';
+    }
+  | {
+      type: 'ellipsis';
+    };
+
+/*** Connects serializable breadcrumb items to the component-level item press event. */
+function BreadcrumbsInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy,
+  items,
+  separator = '/',
+  maxItems,
+  compact = false,
+  disabled = false,
+  onItemPress,
+  testID,
+}: BreadcrumbsProps) {
+  const normalizedMaxItems = normalizeMaxItems(maxItems);
+  const renderItems = createRenderItems(items, normalizedMaxItems);
+  const currentItemId = items.at(-1)?.id;
+
+  if (items.length === 0) return null;
+
+  return (
+    <Inline align="center" gap={compact ? 'xs' : 's'} testID={testID} wrap="wrap">
+      {renderItems.map((renderItem, index) => {
+        const showSeparator = index !== renderItems.length - 1;
+
+        if (renderItem.type === 'ellipsis') {
+          return (
+            <React.Fragment key="ellipsis">
+              <Text emphasis="muted" variant={compact ? 'caption' : 'bodySmall'}>
+                …
+              </Text>
+              {showSeparator ? renderSeparator(separator) : null}
+            </React.Fragment>
+          );
+        }
+
+        return (
+          <BreadcrumbItemView
+            compact={compact}
+            current={renderItem.item.id === currentItemId}
+            disabled={disabled}
+            interactionPolicy={interactionPolicy}
+            item={renderItem.item}
+            key={renderItem.item.id}
+            onItemPress={onItemPress}
+            separator={showSeparator ? separator : undefined}
+            testID={testID}
+          />
+        );
+      })}
+    </Inline>
+  );
+}
+
+/*** Renders one breadcrumb item and its optional following separator. */
+function BreadcrumbItemView({
+  compact,
+  current,
+  disabled,
+  interactionPolicy,
+  item,
+  onItemPress,
+  separator,
+  testID,
+}: {
+  compact: boolean;
+  current: boolean;
+  disabled: boolean;
+  interactionPolicy: BreadcrumbsProps['interactionPolicy'];
+  item: BreadcrumbItem;
+  onItemPress: ((event: BreadcrumbPressEvent) => void) | undefined;
+  separator: string | undefined;
+  testID: string | undefined;
+}) {
+  const interactive = !current && !disabled && !item.disabled && onItemPress !== undefined;
+
+  return (
+    <>
+      {interactive ? (
+        <Button
+          color="neutral"
+          interactionPolicy={interactionPolicy}
+          leadingIcon={item.icon}
+          onPress={() => onItemPress({ id: item.id })}
+          size={compact ? 's' : 'm'}
+          testID={testID ? `${testID}-item-${item.id}` : undefined}
+          variant="ghost"
+        >
+          {item.label}
+        </Button>
+      ) : (
+        <BreadcrumbLabel compact={compact} item={item} />
+      )}
+      {separator === undefined ? null : renderSeparator(separator)}
+    </>
+  );
+}
+
+/*** Renders one non-interactive breadcrumb label. */
+function BreadcrumbLabel({ item, compact }: { item: BreadcrumbItem; compact: boolean }) {
+  const { theme } = useZoraTheme();
+
+  return (
+    <Inline align="center" gap="xs" wrap="nowrap">
+      {item.icon ? (
+        <Icon
+          {...item.icon}
+          color={theme.semantics.content.muted}
+          size={resolveIconSize(compact ? 's' : 'm')}
+        />
+      ) : null}
+      <Text emphasis="muted" variant={compact ? 'caption' : 'bodySmall'}>
+        {item.label}
+      </Text>
+    </Inline>
+  );
+}
+
+/*** Renders the configured separator with muted breadcrumb styling. */
+function renderSeparator(separator: string): React.ReactNode {
+  return (
+    <Text emphasis="muted" variant="bodySmall">
+      {separator}
+    </Text>
+  );
+}
+
+/*** Normalizes an optional maximum breadcrumb item count. */
+function normalizeMaxItems(value: number | undefined): number | undefined {
+  if (value === undefined || !Number.isFinite(value)) return undefined;
+  return Math.max(0, Math.trunc(value));
+}
+
+/*** Collapses middle breadcrumb items into one ellipsis when required. */
+function createRenderItems(
+  items: readonly BreadcrumbItem[],
+  maxItems: number | undefined,
+): readonly BreadcrumbRenderItem[] {
+  if (maxItems === undefined || maxItems === 0 || items.length <= maxItems || maxItems < 3) {
+    return items.map((item) => ({ item, type: 'item' }));
+  }
+
+  const firstItem = items.at(0);
+  if (firstItem === undefined) return [];
+
+  const trailingCount = maxItems - 2;
+  const trailingItems = items.slice(items.length - trailingCount);
+  return [
+    { item: firstItem, type: 'item' },
+    { type: 'ellipsis' },
+    ...trailingItems.map((item) => ({ item, type: 'item' }) satisfies BreadcrumbRenderItem),
+  ];
+}

package/src/features/breadcrumbs/breadcrumbsMeta.ts

@@ -0,0 +1,95 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const breadcrumbsMeta = {
+  name: 'Breadcrumbs',
+  category: 'component',
+  description: 'Hierarchical route context where the final item represents the current location.',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'Breadcrumbs',
+    defaultProps: {
+      items: [
+        { id: 'settings', label: 'Settings' },
+        { id: 'general', label: 'General' },
+      ],
+      separator: '/',
+      compact: false,
+      disabled: false,
+    },
+  },
+  bindings: {
+    events: {
+      itemPress: {
+        label: 'Item press',
+        description: 'Runs when a non-current breadcrumb item is pressed.',
+        payload: {
+          eventType: 'breadcrumbs.itemPress',
+          fields: [{ path: 'id', type: 'string', label: 'Item id' }],
+        },
+      },
+    },
+  },
+  events: {
+    itemPress: {
+      label: 'Item press',
+      eventType: 'breadcrumbs.itemPress',
+      description: 'Emitted when a non-current breadcrumb item is pressed.',
+      payloadFields: [{ path: 'id', type: 'string', label: 'Item id' }],
+    },
+  },
+  props: {
+    items: {
+      type: 'array',
+      category: 'Content',
+      label: 'Items',
+      itemSchema: [
+        {
+          key: 'id',
+          schema: { type: 'string', category: 'Content', label: 'Id' },
+        },
+        {
+          key: 'label',
+          schema: { type: 'string', category: 'Content', label: 'Label' },
+        },
+        {
+          key: 'disabled',
+          schema: {
+            type: 'boolean',
+            category: 'State',
+            label: 'Disabled',
+            default: false,
+          },
+        },
+      ],
+      authoring: { authority: 'instance' },
+    },
+    separator: {
+      type: 'string',
+      category: 'Content',
+      label: 'Separator',
+      default: '/',
+      authoring: { authority: 'instance' },
+    },
+    maxItems: {
+      type: 'number',
+      category: 'Layout',
+      label: 'Maximum items',
+      authoring: { authority: 'instance' },
+    },
+    compact: {
+      type: 'boolean',
+      category: 'Layout',
+      label: 'Compact',
+      default: false,
+      authoring: { authority: 'instance' },
+    },
+    disabled: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Disabled',
+      default: false,
+      authoring: { authority: 'instance' },
+    },
+  },
+} as const satisfies ZoraComponentMeta;

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

@@ -0,0 +1,22 @@
+import { expect, test } from 'bun:test';
+
+import { breadcrumbsMeta } from './breadcrumbsMeta';
+
+test('Breadcrumbs is a direct manifest node with serializable item press payload', () => {
+  expect(breadcrumbsMeta.directManifestNode).toBe(true);
+  expect(breadcrumbsMeta.events.itemPress.eventType).toBe('breadcrumbs.itemPress');
+  expect(breadcrumbsMeta.events.itemPress.payloadFields).toEqual([
+    { path: 'id', type: 'string', label: 'Item id' },
+  ]);
+});
+
+test('Breadcrumbs keeps current-location derivation and callbacks outside item data', async () => {
+  const [source, types] = await Promise.all([
+    Bun.file('src/features/breadcrumbs/adapters/inbound/Breadcrumbs.tsx').text(),
+    Bun.file('src/types/breadcrumbs.ts').text(),
+  ]);
+
+  expect(source).toContain('const currentItemId = items.at(-1)?.id;');
+  expect(source).toContain('onItemPress({ id: item.id })');
+  expect(types).not.toContain('onPress?:');
+});

package/src/features/breadcrumbs/public.ts

@@ -0,0 +1,6 @@
+export type {
+  BreadcrumbItem,
+  BreadcrumbPressEvent,
+  BreadcrumbsProps,
+} from '../../types/breadcrumbs';
+export { Breadcrumbs } from './adapters/inbound/Breadcrumbs';