@ankhorage/zora 10.0.0 → 12.0.0

package/src/{components/date-picker → features/date-picker/adapters/inbound}/DatePicker.tsx

@@ -1,12 +1,13 @@
 import { Field } from '@ankhorage/surface';
 import React from 'react';
 
-import { useBottomSheet } from '../../features/bottom-sheet/public';
-import { Button } from '../../features/button/public';
-import { Box, Stack } from '../../features/layout/public';
-import { Text } from '../../features/typography/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { DatePickerProps } from './types';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { DatePickerProps } from '../../../../types/date-picker';
+import { useBottomSheet } from '../../../bottom-sheet/public';
+import { Button } from '../../../button/public';
+import { Box, Stack } from '../../../layout/public';
+import { Text } from '../../../typography/public';
+import { formatLocalDate, parseLocalDate } from '../../utils/localDate';
 
 const WEEKDAY_LABELS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] as const;
 const DAY_CELL_WIDTH = 42;
@@ -27,15 +28,14 @@ function renderLabel(label: React.ReactNode, description: React.ReactNode | unde
   );
 }
 
-/*** Normalize a date to the start of its local calendar day. */
-function startOfLocalDay(value: Date): Date {
-  return new Date(value.getFullYear(), value.getMonth(), value.getDate());
+/*** Compare two values by local calendar day. */
+function isSameLocalDay(left: string | null, right: Date): boolean {
+  return left === formatLocalDate(right);
 }
 
-/*** Compare two values by local calendar day. */
-function isSameLocalDay(left: Date | null, right: Date): boolean {
-  if (!left) return false;
-  return startOfLocalDay(left).getTime() === startOfLocalDay(right).getTime();
+/*** Normalize a Date to the start of its local calendar day for range comparisons. */
+function startOfLocalDay(value: Date): Date {
+  return new Date(value.getFullYear(), value.getMonth(), value.getDate());
 }
 
 /*** Report whether one local calendar day precedes another. */
@@ -65,28 +65,27 @@ function formatMonthLabel(value: Date): string {
 }
 
 /*** Format a selected date with the platform locale defaults. */
-function formatDefaultDate(value: Date): string {
-  return value.toLocaleDateString();
+function formatDefaultDate(value: string): string {
+  return parseLocalDate(value)?.toLocaleDateString() ?? value;
 }
 
 /*** Build the padded calendar grid for one month. */
 function createMonthDays(month: Date): (Date | null)[] {
   const firstDay = new Date(month.getFullYear(), month.getMonth(), 1);
   const dayCount = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate();
-  const days: (Date | null)[] = [];
+  const populatedLength = firstDay.getDay() + dayCount;
+  const paddedLength = Math.ceil(populatedLength / 7) * 7;
 
-  for (let offset = 0; offset < firstDay.getDay(); offset += 1) days.push(null);
-  for (let day = 1; day <= dayCount; day += 1) {
-    days.push(new Date(month.getFullYear(), month.getMonth(), day));
-  }
-  while (days.length % 7 !== 0) days.push(null);
-
-  return days;
+  return Array.from({ length: paddedLength }, (_, index) =>
+    index < firstDay.getDay()
+      ? null
+      : new Date(month.getFullYear(), month.getMonth(), index - firstDay.getDay() + 1),
+  );
 }
 
 /*** Resolve the month initially shown by the calendar sheet. */
-function resolveInitialMonth(value: Date | null, minDate: Date | undefined): Date {
-  const base = value ?? minDate ?? new Date();
+function resolveInitialMonth(value: string | null, minDate: string | undefined): Date {
+  const base = parseLocalDate(value) ?? parseLocalDate(minDate) ?? new Date();
   return new Date(base.getFullYear(), base.getMonth(), 1);
 }
 
@@ -142,7 +141,7 @@ function DatePickerInner({
           minDate={minDate}
           onDismiss={dismiss}
           onSelect={(date) => {
-            onValueChange?.(startOfLocalDay(date));
+            onValueChange?.(formatLocalDate(date));
             dismiss();
           }}
           testID={testID}
@@ -197,6 +196,8 @@ function DatePickerSheet({
 }: DatePickerSheetProps) {
   const [displayMonth, setDisplayMonth] = React.useState(() => resolveInitialMonth(value, minDate));
   const monthDays = React.useMemo(() => createMonthDays(displayMonth), [displayMonth]);
+  const resolvedMaxDate = React.useMemo(() => parseLocalDate(maxDate), [maxDate]);
+  const resolvedMinDate = React.useMemo(() => parseLocalDate(minDate), [minDate]);
 
   return (
     <Stack gap="m" p="m" testID={testID ? `${testID}-sheet` : undefined}>
@@ -204,15 +205,15 @@ function DatePickerSheet({
       <DatePickerMonthNavigation
         displayMonth={displayMonth}
         interactionPolicy={interactionPolicy}
-        maxDate={maxDate}
-        minDate={minDate}
+        maxDate={resolvedMaxDate}
+        minDate={resolvedMinDate}
         onMonthChange={setDisplayMonth}
       />
       <DatePickerWeekdays />
       <DatePickerCalendar
         interactionPolicy={interactionPolicy}
-        maxDate={maxDate}
-        minDate={minDate}
+        maxDate={resolvedMaxDate}
+        minDate={resolvedMinDate}
         monthDays={monthDays}
         onSelect={onSelect}
         testID={testID}
@@ -254,8 +255,11 @@ function DatePickerMonthNavigation({
   maxDate,
   minDate,
   onMonthChange,
-}: Pick<DatePickerSheetProps, 'interactionPolicy' | 'maxDate' | 'minDate'> & {
+}: {
   displayMonth: Date;
+  interactionPolicy: DatePickerProps['interactionPolicy'];
+  maxDate: Date | undefined;
+  minDate: Date | undefined;
   onMonthChange: (month: Date) => void;
 }) {
   const previousMonth = new Date(displayMonth.getFullYear(), displayMonth.getMonth() - 1, 1);
@@ -312,9 +316,14 @@ function DatePickerCalendar({
   onSelect,
   testID,
   value,
-}: Pick<DatePickerSheetProps, 'interactionPolicy' | 'maxDate' | 'minDate' | 'testID' | 'value'> & {
+}: {
+  interactionPolicy: DatePickerProps['interactionPolicy'];
+  maxDate: Date | undefined;
+  minDate: Date | undefined;
   monthDays: readonly (Date | null)[];
   onSelect: (value: Date) => void;
+  testID: string | undefined;
+  value: DatePickerProps['value'];
 }) {
   return (
     <Stack direction="row" gap="xs" wrap="wrap">

package/src/features/date-picker/datePickerMeta.ts

@@ -0,0 +1,58 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const datePickerMeta = {
+  name: 'DatePicker',
+  category: 'component',
+  description: 'Captures a local calendar date through the shared BottomSheet picker host.',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'Date picker',
+    defaultProps: {
+      value: null,
+      placeholder: 'Choose date',
+      disabled: false,
+      required: false,
+    },
+  },
+  events: {
+    valueChange: {
+      label: 'Value change',
+      eventType: 'datePicker.valueChange',
+      description: 'Emitted when a local calendar date is selected.',
+      payloadFields: [{ path: 'value', type: 'string', label: 'Value' }],
+    },
+  },
+  props: {
+    value: {
+      type: 'string',
+      category: 'State',
+      label: 'Value',
+      default: null,
+      authoring: { authority: 'instance' },
+    },
+    label: { type: 'string', category: 'Content', label: 'Label' },
+    description: { type: 'string', category: 'Content', label: 'Description' },
+    error: { type: 'string', category: 'Validation', label: 'Error' },
+    placeholder: {
+      type: 'string',
+      category: 'Content',
+      label: 'Placeholder',
+      default: 'Choose date',
+    },
+    minDate: { type: 'string', category: 'Validation', label: 'Minimum date' },
+    maxDate: { type: 'string', category: 'Validation', label: 'Maximum date' },
+    disabled: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Disabled',
+      default: false,
+    },
+    required: {
+      type: 'boolean',
+      category: 'Validation',
+      label: 'Required',
+      default: false,
+    },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/date-picker/public.test.ts

@@ -0,0 +1,15 @@
+import { expect, test } from 'bun:test';
+
+import { ZORA_COMPONENT_META } from '../../metadata/componentMeta';
+
+test('DatePicker exposes a serializable manifest contract through the shared BottomSheet', async () => {
+  const source = await Bun.file('src/features/date-picker/adapters/inbound/DatePicker.tsx').text();
+  const meta = ZORA_COMPONENT_META.DatePicker;
+
+  expect(meta.directManifestNode).toBe(true);
+  expect(meta.props.value?.type).toBe('string');
+  expect(meta.events?.valueChange?.eventType).toBe('datePicker.valueChange');
+  expect(meta.bindings?.props?.value?.value.type).toBe('string');
+  expect(source).toContain('useBottomSheet()');
+  expect(source).toContain('formatLocalDate(date)');
+});

package/src/features/date-picker/public.ts

@@ -0,0 +1,2 @@
+export type { DatePickerProps, DatePickerValue } from '../../types/date-picker';
+export { DatePicker } from './adapters/inbound/DatePicker';

package/src/features/date-picker/utils/localDate.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, test } from 'bun:test';
+
+import { formatLocalDate, parseLocalDate } from './localDate';
+
+describe('local date serialization', () => {
+  test('round-trips a valid YYYY-MM-DD value without a UTC conversion', () => {
+    const parsed = parseLocalDate('2026-09-13');
+
+    expect(parsed).toBeDefined();
+    expect(parsed ? formatLocalDate(parsed) : undefined).toBe('2026-09-13');
+  });
+
+  test('rejects malformed and impossible calendar dates', () => {
+    expect(parseLocalDate('2026-2-03')).toBeUndefined();
+    expect(parseLocalDate('2026-02-30')).toBeUndefined();
+    expect(parseLocalDate(null)).toBeUndefined();
+  });
+});

package/src/features/date-picker/utils/localDate.ts

@@ -0,0 +1,29 @@
+const LOCAL_DATE_PATTERN = /^(\d{4})-(\d{2})-(\d{2})$/u;
+
+/*** Parse a calendar date without applying a UTC offset. */
+export function parseLocalDate(value: string | null | undefined): Date | undefined {
+  if (!value) return undefined;
+
+  const match = LOCAL_DATE_PATTERN.exec(value);
+  if (!match) return undefined;
+
+  const year = Number(match[1]);
+  const month = Number(match[2]);
+  const day = Number(match[3]);
+  const parsed = new Date(year, month - 1, day);
+  parsed.setFullYear(year);
+
+  return parsed.getFullYear() === year &&
+    parsed.getMonth() === month - 1 &&
+    parsed.getDate() === day
+    ? parsed
+    : undefined;
+}
+
+/*** Serialize a Date as a local calendar date suitable for manifest state. */
+export function formatLocalDate(value: Date): string {
+  const year = String(value.getFullYear()).padStart(4, '0');
+  const month = String(value.getMonth() + 1).padStart(2, '0');
+  const day = String(value.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}

package/src/features/form/adapters/inbound/Form.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { FormProps } from '../../../../types/form';
+import { Stack } from '../../../layout/public';
+import { FormActions } from './FormActions';
+
+function FormInner({
+  themeId: _themeId,
+  mode: _mode,
+  children,
+  onSubmit,
+  loading = false,
+  disabled = false,
+  submitLabel = 'Submit',
+  actions,
+  testID,
+  interactionPolicy,
+}: FormProps) {
+  return (
+    <Stack gap="m" testID={testID}>
+      {children}
+      <FormActions
+        disabled={disabled}
+        interactionPolicy={interactionPolicy}
+        loading={loading}
+        onSubmit={() => {
+          if (interactionPolicy !== 'passive') void onSubmit?.();
+        }}
+        submitLabel={submitLabel}
+      >
+        {actions}
+      </FormActions>
+    </Stack>
+  );
+}
+
+/*** Composes explicit form fields, form errors, and submit actions. */
+export const Form = withZoraThemeScope(FormInner);

package/src/{components/form → features/form/adapters/inbound}/FormActions.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { Button } from '../../features/button/public';
-import { Box, Stack } from '../../features/layout/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { FormActionsProps } from './types';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { FormActionsProps } from '../../../../types/form';
+import { Button } from '../../../button/public';
+import { Box, Stack } from '../../../layout/public';
 
 function FormActionsInner({
   themeId: _themeId,

package/src/features/form/adapters/inbound/FormError.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { useZoraTheme } from '../../../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { FormErrorProps } from '../../../../types/form';
+import { Box } from '../../../layout/public';
+import { Text } from '../../../typography/public';
+
+function FormErrorInner({ themeId: _themeId, mode: _mode, error, testID }: FormErrorProps) {
+  const { theme } = useZoraTheme();
+  if (!error) return null;
+  return (
+    <Box borderColor={theme.colors.error} borderWidth={1} p="s" radius="m" testID={testID}>
+      <Text color="error" variant="bodySmall">
+        {error}
+      </Text>
+    </Box>
+  );
+}
+
+/*** Displays a form-level validation or submission error. */
+export const FormError = withZoraThemeScope(FormErrorInner);

package/src/{patterns/form-field → features/form/adapters/inbound}/FormField.tsx

@@ -1,10 +1,10 @@
 import { Field } from '@ankhorage/surface';
 import React from 'react';
 
-import { Stack } from '../../features/layout/public';
-import { Text } from '../../features/typography/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { FormFieldProps } from './types';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { FormFieldProps } from '../../../../types/form';
+import { Stack } from '../../../layout/public';
+import { Text } from '../../../typography/public';
 
 function FormFieldInner({
   themeId: _themeId,
@@ -13,6 +13,7 @@ function FormFieldInner({
   description,
   helperText,
   children,
+  interactionPolicy: _interactionPolicy,
   ...props
 }: FormFieldProps) {
   return (
@@ -37,4 +38,5 @@ function FormFieldInner({
   );
 }
 
+/*** Groups one form control with its label, description, helper text, and field error. */
 export const FormField = withZoraThemeScope(FormFieldInner);

package/src/{components/date-picker/meta.ts → features/form/formActionsMeta.ts}

@@ -1,10 +1,9 @@
 import type { ZoraComponentMeta } from '../../metadata';
-
-export const datePickerMeta = {
-  name: 'DatePicker',
+export const formActionsMeta = {
+  name: 'FormActions',
   category: 'component',
   directManifestNode: false,
   allowedChildren: [],
-  note: 'Code-facing BottomSheet-backed date picker; not represented as a manifest node in v1.',
+  note: 'Internal form action helper.',
   props: {},
 } as const satisfies ZoraComponentMeta;

package/src/features/form/formErrorMeta.ts

@@ -0,0 +1,19 @@
+import type { ZoraComponentMeta } from '../../metadata';
+export const formErrorMeta = {
+  name: 'FormError',
+  category: 'component',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: { label: 'Form error', defaultProps: { error: 'Unable to submit the form.' } },
+  bindings: {
+    props: {
+      error: {
+        label: 'Error',
+        description: 'Global form or submission error.',
+        value: { type: 'unknown' },
+        acceptsFallback: true,
+      },
+    },
+  },
+  props: { error: { type: 'string', category: 'Content', label: 'Error' } },
+} as const satisfies ZoraComponentMeta;

package/src/features/form/formFieldMeta.ts

@@ -0,0 +1,35 @@
+import type { ZoraComponentMeta } from '../../metadata';
+export const formFieldMeta = {
+  name: 'FormField',
+  category: 'component',
+  directManifestNode: true,
+  allowedChildren: ['Checkbox', 'CheckboxGroup', 'RadioGroup', 'TextInput'],
+  blueprint: { label: 'Form field', defaultProps: { label: 'Label' } },
+  bindings: {
+    props: {
+      errorText: {
+        label: 'Error text',
+        description: 'Field-level validation error.',
+        value: { type: 'unknown' },
+        acceptsFallback: true,
+      },
+      disabled: {
+        label: 'Disabled',
+        description: 'Whether the field is disabled.',
+        value: { type: 'boolean' },
+        acceptsFallback: true,
+        acceptsTransforms: true,
+      },
+    },
+  },
+  props: {
+    label: { type: 'string', category: 'Content', label: 'Label', default: 'Label' },
+    description: { type: 'string', category: 'Content', label: 'Description' },
+    helperText: { type: 'string', category: 'Content', label: 'Helper text' },
+    errorText: { type: 'string', category: 'Validation', label: 'Error text' },
+    required: { type: 'boolean', category: 'Validation', label: 'Required', default: false },
+    invalid: { type: 'boolean', category: 'Validation', label: 'Invalid', default: false },
+    disabled: { type: 'boolean', category: 'State', label: 'Disabled', default: false },
+    readOnly: { type: 'boolean', category: 'State', label: 'Read-only', default: false },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/form/formMeta.ts

@@ -0,0 +1,34 @@
+import type { ZoraComponentMeta } from '../../metadata';
+export const formMeta = {
+  name: 'Form',
+  category: 'component',
+  directManifestNode: true,
+  allowedChildren: ['FormError', 'FormField'],
+  blueprint: {
+    label: 'Form',
+    defaultProps: { submitLabel: 'Submit', loading: false, disabled: false },
+  },
+  bindings: {
+    events: {
+      submit: {
+        label: 'Submit',
+        description: 'Runs when the form is submitted.',
+        payload: { eventType: 'form.submit', fields: [] },
+      },
+    },
+  },
+  events: {
+    submit: {
+      label: 'Submit',
+      eventType: 'form.submit',
+      description: 'Emitted when the form is submitted.',
+      payloadFields: [],
+    },
+  },
+  slots: { actions: { label: 'Actions', allowedChildren: ['Button', 'ButtonGroup'] } },
+  props: {
+    submitLabel: { type: 'string', category: 'Content', label: 'Submit label', default: 'Submit' },
+    loading: { type: 'boolean', category: 'State', label: 'Loading', default: false },
+    disabled: { type: 'boolean', category: 'State', label: 'Disabled', default: false },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/{components/form/index.ts → features/form/public.ts}

@@ -1,13 +1,8 @@
-export { Form } from './Form';
-export { FormActions } from './FormActions';
-export { FormError } from './FormError';
-export { FormField } from './FormField';
 export type {
   FormActionsProps,
   FormErrorProps,
   FormErrors,
   FormFieldConfig,
-  FormFieldControlProps,
   FormFieldInputType,
   FormFieldProps,
   FormProps,
@@ -17,6 +12,10 @@ export type {
   UseFormControllerOptions,
   UseFormControllerResult,
   ValidationRule,
-} from './types';
+} from '../../types/form';
+export { Form } from './adapters/inbound/Form';
+export { FormActions } from './adapters/inbound/FormActions';
+export { FormError } from './adapters/inbound/FormError';
+export { FormField } from './adapters/inbound/FormField';
 export { useFormController } from './useFormController';
-export { hasRequiredRule, validateField, validateFields, validateValue } from './validation';
+export { hasRequiredRule, validateField, validateFields, validateValue } from './utils/validation';

package/src/{components → features}/form/useFormController.ts

@@ -6,8 +6,8 @@ import type {
   FormValues,
   UseFormControllerOptions,
   UseFormControllerResult,
-} from './types';
-import { validateFields } from './validation';
+} from '../../types/form';
+import { validateFields } from './utils/validation';
 
 function createInitialValues<TName extends string>(
   fields: readonly { name: TName }[],

package/src/{components/form → features/form/utils}/validation.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test } from 'bun:test';
 
-import type { FormFieldConfig, FormValues } from './types';
+import type { FormFieldConfig, FormValues } from '../../../types/form';
 import { validateFields, validateValue } from './validation';
 
 describe('form validation', () => {
@@ -12,6 +12,9 @@ describe('form validation', () => {
 
   test('validates email fields', () => {
     expect(validateValue('not-email', [{ kind: 'email' }])).toBe('Enter a valid email address.');
+    expect(validateValue('person@exam_ple.com', [{ kind: 'email' }])).toBe(
+      'Enter a valid email address.',
+    );
     expect(validateValue('person@example.com', [{ kind: 'email' }])).toBeUndefined();
   });
 

package/src/{components/form → features/form/utils}/validation.ts

@@ -1,12 +1,12 @@
+import { isEmail } from '@ankhorage/utility/regex';
+
 import type {
   FormFieldConfig,
   FormValidationErrors,
   FormValidationResult,
   FormValues,
   ValidationRule,
-} from './types';
-
-const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+} from '../../../types/form';
 
 export function hasRequiredRule(rules: readonly ValidationRule[] | undefined): boolean {
   return rules?.some((rule) => rule.kind === 'required') ?? false;
@@ -27,11 +27,7 @@ export function validateValue(
       return rule.message ?? 'This field is required.';
     }
 
-    if (
-      rule.kind === 'email' &&
-      normalizedValue.length > 0 &&
-      !emailPattern.test(normalizedValue)
-    ) {
+    if (rule.kind === 'email' && normalizedValue.length > 0 && !isEmail(normalizedValue)) {
       return rule.message ?? 'Enter a valid email address.';
     }
 

package/src/{patterns/hero → features/hero/adapters/inbound}/Hero.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 
-import { Button } from '../../features/button/public';
-import { Card } from '../../features/card/public';
-import { Box, Grid, Stack } from '../../features/layout/public';
-import { Heading } from '../../features/typography/public';
-import { Text } from '../../features/typography/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { HeroAction, HeroAlign, HeroProps } from './types';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { HeroAction, HeroAlign, HeroProps } from '../../../../types/hero';
+import { Button } from '../../../button/public';
+import { Card } from '../../../card/public';
+import { Box, Grid, Stack } from '../../../layout/public';
+import { Heading, Text } from '../../../typography/public';
 
 function HeroInner({
   themeId: _themeId,

package/src/features/hero/public.ts

@@ -0,0 +1,2 @@
+export type { HeroAction, HeroAlign, HeroLayout, HeroProps, HeroTone } from '../../types/hero';
+export { Hero } from './adapters/inbound/Hero';

package/src/{patterns → features}/missing-element/MissingElement.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, test } from 'bun:test';
 
 import { ZORA_BINDABLE_COMPONENT_META, ZORA_COMPONENT_META } from '../../metadata';
-import { missingElementMeta } from './meta';
+import { missingElementMeta } from './missingElementMeta';
 
 describe('MissingElement draft contract', () => {
   test('is a release-blocking manifest leaf distinct from completed states', () => {
@@ -41,7 +41,9 @@ describe('MissingElement draft contract', () => {
   });
 
   test('visibly and accessibly identifies the gap while preserving its minimum dimensions', async () => {
-    const source = await Bun.file('src/patterns/missing-element/MissingElement.tsx').text();
+    const source = await Bun.file(
+      'src/features/missing-element/adapters/inbound/MissingElement.tsx',
+    ).text();
 
     expect(source).toContain('accessibilityLabel={accessibilityLabel}');
     expect(source).toContain('accessibilityRole="text"');
@@ -54,8 +56,8 @@ describe('MissingElement draft contract', () => {
 
   test('accepts the canonical interaction policy without owning interactive behavior', async () => {
     const [source, types] = await Promise.all([
-      Bun.file('src/patterns/missing-element/MissingElement.tsx').text(),
-      Bun.file('src/patterns/missing-element/types.ts').text(),
+      Bun.file('src/features/missing-element/adapters/inbound/MissingElement.tsx').text(),
+      Bun.file('src/types/missing-element.ts').text(),
     ]);
 
     expect(types).toContain('MissingElementProps extends ZoraBaseProps');