@ankhorage/zora 16.0.0 → 18.0.0

package/src/features/form/radio/adapters/inbound/RadioGroup.tsx

@@ -1,11 +1,11 @@
 import { Radio } from '@ankhorage/surface';
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 import { useZoraThemeRecipe } from '../../../../../theme/useZoraThemeRecipe';
 import { withZoraThemeScope } from '../../../../../theme/withZoraThemeScope';
 import type { RadioGroupProps } from '../../../../../types/radio';
-import { Stack } from '../../../../layout/public';
+import { View } from '../../../../layout/public';
 import { Text } from '../../../../typography/public';
 import { resolveRadioGroupThemeRecipe } from '../../utils/resolveRadioGroupThemeRecipe';
 import { RadioOptionControl } from './RadioOptionControl';
@@ -35,9 +35,9 @@ function RadioGroupInner<TValue extends string>({
   );
   return (
     <View testID={props.testID} accessibilityRole="radiogroup">
-      <Stack gap={recipe.gap}>
+      <View gap={recipe.gap}>
         {rows.map((options, index) => (
-          <Stack key={index} direction="row" gap={recipe.gap}>
+          <View key={index} direction="row" gap={recipe.gap}>
             {options.map((option) => (
               <View key={option.value} style={styles.option}>
                 <RadioGroupItem {...selectedProps} {...recipe} option={option} />
@@ -46,9 +46,9 @@ function RadioGroupInner<TValue extends string>({
             {Array.from({ length: columns - options.length }, (_, slot) => (
               <View key={`empty-${slot}`} style={styles.option} />
             ))}
-          </Stack>
+          </View>
         ))}
-      </Stack>
+      </View>
     </View>
   );
 }
@@ -57,7 +57,7 @@ function RadioGroupInner<TValue extends string>({
 function RadioGroupInline<TValue extends string>(props: RadioGroupProps<TValue>) {
   return (
     <View testID={props.testID} accessibilityRole="radiogroup">
-      <Stack
+      <View
         direction={props.orientation === 'horizontal' ? 'row' : 'column'}
         gap={props.gap}
         wrap="wrap"
@@ -65,7 +65,7 @@ function RadioGroupInline<TValue extends string>(props: RadioGroupProps<TValue>)
         {props.options.map((option) => (
           <RadioGroupItem key={option.value} {...props} option={option} />
         ))}
-      </Stack>
+      </View>
     </View>
   );
 }
@@ -110,14 +110,14 @@ function RadioGroupItem<TValue extends string>(
       testID={option.testID}
       onCheckedChange={onSelect}
     >
-      <Stack gap="xs">
+      <View gap="xs">
         <Text>{option.label}</Text>
         {option.description ? (
           <Text emphasis="muted" variant="caption">
             {option.description}
           </Text>
         ) : null}
-      </Stack>
+      </View>
     </Radio>
   );
 }

package/src/features/form/select/adapters/inbound/Select.web.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { withZoraThemeScope } from '../../../../../theme/withZoraThemeScope';
 import type { SelectProps } from '../../../../../types/select';
-import { Stack } from '../../../../layout/public';
+import { View } from '../../../../layout/public';
 import { Surface } from '../../../../surface/public';
 import { SelectField } from '../../composition/SelectField';
 import { SelectOptionRow } from '../../composition/SelectOptionRow';
@@ -44,7 +44,7 @@ function SelectInner<TValue extends string = string>({
         testID={testID ? `${testID}-popover` : undefined}
       >
         <Surface variant="raised">
-          <Stack gap="xs" p="xs">
+          <View gap="xs" p="xs">
             {options.map((option) => (
               <SelectOptionRow
                 interactionPolicy={interactionPolicy}
@@ -55,7 +55,7 @@ function SelectInner<TValue extends string = string>({
                 testID={testID}
               />
             ))}
-          </Stack>
+          </View>
         </Surface>
       </Popover>
     </SelectField>

package/src/features/gradient/adapters/inbound/Gradient.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { GradientProps } from '../../../../types/gradient';
-import { Box } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { useGradientRenderer } from './GradientRendererContext';
 
 function GradientInner({
@@ -24,7 +24,7 @@ function GradientInner({
   const gradientRenderer = useGradientRenderer();
 
   return (
-    <Box
+    <View
       height={height}
       minHeight={minHeight}
       radius={radius}
@@ -41,11 +41,11 @@ function GradientInner({
           start,
           style: { flex: 1 },
         },
-        <Box p={p} style={{ flex: 1 }}>
+        <View p={p} style={{ flex: 1 }}>
           {children}
-        </Box>,
+        </View>,
       )}
-    </Box>
+    </View>
   );
 }
 

package/src/features/hero/adapters/inbound/Hero.tsx

@@ -4,7 +4,7 @@ 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 { Grid, View } from '../../../layout/public';
 import { Heading, Text } from '../../../typography/public';
 
 function HeroInner({
@@ -31,9 +31,9 @@ function HeroInner({
   const mediaFirst = layout === 'mediaFirst';
 
   const content = (
-    <Box width="100%">
-      <Stack align={contentAlign} gap={compact ? 's' : 'm'}>
-        <Stack align={contentAlign} gap="xs">
+    <View width="100%">
+      <View align={contentAlign} gap={compact ? 's' : 'm'}>
+        <View align={contentAlign} gap="xs">
           {eyebrow !== undefined ? (
             <Text align={textAlign} color="primary" variant="eyebrow">
               {eyebrow}
@@ -55,10 +55,10 @@ function HeroInner({
               {description}
             </Text>
           ) : null}
-        </Stack>
+        </View>
 
         {hasActions ? (
-          <Stack
+          <View
             align={contentAlign}
             direction={{ base: 'column', md: 'row' }}
             gap="s"
@@ -70,15 +70,15 @@ function HeroInner({
             {secondaryAction !== undefined
               ? renderAction(secondaryAction, 'secondary', interactionPolicy)
               : null}
-          </Stack>
+          </View>
         ) : null}
 
         {footer}
-      </Stack>
-    </Box>
+      </View>
+    </View>
   );
 
-  const mediaSlot = hasMedia ? <Box width="100%">{media}</Box> : null;
+  const mediaSlot = hasMedia ? <View width="100%">{media}</View> : null;
 
   const body =
     hasMedia && layout !== 'stack' ? (
@@ -87,10 +87,10 @@ function HeroInner({
         {mediaFirst ? content : mediaSlot}
       </Grid>
     ) : (
-      <Stack align="center" direction="column" gap={compact ? 'm' : 'l'}>
+      <View align="center" direction="column" gap={compact ? 'm' : 'l'}>
         {mediaFirst ? mediaSlot : content}
         {mediaFirst ? content : mediaSlot}
-      </Stack>
+      </View>
     );
 
   return (

package/src/features/icon/utils/meta.test.ts

@@ -8,10 +8,9 @@ test('permits media-backed Icon and Image content in ordinary screen containers'
   expect(icon.allowedChildren).toEqual([]);
   expect(icon.props.source).toMatchObject({ type: 'media', mediaKinds: ['image'] });
   for (const container of [
-    ZORA_COMPONENT_META.Box,
-    ZORA_COMPONENT_META.Stack,
+    ZORA_COMPONENT_META.View,
+    ZORA_COMPONENT_META.ScrollView,
     ZORA_COMPONENT_META.Grid,
-    ZORA_COMPONENT_META.Container,
     ZORA_COMPONENT_META.Card,
     ZORA_COMPONENT_META.Screen,
     ZORA_COMPONENT_META.ScreenSection,

package/src/features/image/adapters/inbound/Image.tsx

@@ -6,7 +6,7 @@ import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { ImageProps } from '../../../../types/image';
 import type { UploadAsset } from '../../../../types/upload';
 import { Icon } from '../../../icon/public';
-import { Box } from '../../../layout/public';
+import { View } from '../../../layout/public';
 
 /*** Displays an image asset and owns its missing, unrenderable, and failed presentation states. */
 export const Image = withZoraThemeScope(ImageInner);
@@ -40,7 +40,7 @@ function ImageInner({
 
   if (showPlaceholder) {
     return (
-      <Box
+      <View
         accessibilityLabel={placeholderLabel}
         accessibilityRole={placeholderLabel ? 'image' : undefined}
         accessible={Boolean(placeholderLabel)}
@@ -62,7 +62,7 @@ function ImageInner({
         ]}
       >
         <Icon color={theme.semantics.content.muted} name="image-outline" size={24} />
-      </Box>
+      </View>
     );
   }
 

package/src/features/layout/adapters/inbound/AppShell.test.ts

@@ -0,0 +1,24 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { describe, expect, test } from 'bun:test';
+
+const implementationSource = readFileSync(join(import.meta.dir, 'AppShell.tsx'), 'utf8');
+const layoutTypesSource = readFileSync(
+  join(import.meta.dir, '../../../../types/layout.ts'),
+  'utf8',
+);
+
+describe('AppShell public API', () => {
+  test('does not expose raw style escape hatches', () => {
+    const appShellType = layoutTypesSource.slice(
+      layoutTypesSource.indexOf('export interface AppShellProps'),
+      layoutTypesSource.indexOf('export interface ScreenProps'),
+    );
+    expect(appShellType).not.toContain('StyleProp');
+    expect(appShellType).not.toContain('ViewStyle');
+    expect(appShellType).not.toMatch(/\bstyle\??:/);
+    expect(appShellType).not.toMatch(/\bbodyStyle\??:/);
+    expect(implementationSource).not.toMatch(/\bbodyStyle\b/);
+  });
+});

package/src/features/layout/adapters/inbound/AppShell.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { AppShellProps } from '../../../../types/layout';
+import { View } from './View';
+
+function AppShellInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  children,
+  header,
+  footer,
+  overlay,
+  testID,
+}: AppShellProps) {
+  return (
+    <View bg="background" flex={1} testID={testID}>
+      <View flex={1} minHeight={0} position="relative">
+        {header ? <View flexShrink={0}>{header}</View> : null}
+        <View flex={1} minHeight={0} minWidth={0}>
+          {children}
+        </View>
+        {footer ? <View flexShrink={0}>{footer}</View> : null}
+        {overlay ? (
+          <View
+            bottom={0}
+            left={0}
+            pointerEvents="box-none"
+            position="absolute"
+            right={0}
+            top={0}
+            zIndex={10}
+          >
+            {overlay}
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+/*** Root application frame with explicit header, content, footer, and overlay slots. */
+export const AppShell = withZoraThemeScope(AppShellInner);

package/src/features/layout/adapters/inbound/Screen.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { resolvePageMaxWidth } from '../../../../internal/recipes';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { ScreenProps } from '../../../../types/layout';
+import { ScrollView } from './ScrollView';
+import { View } from './View';
+
+function ScreenInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  children,
+  footer,
+  scroll = true,
+  width = 'default',
+  testID,
+}: ScreenProps) {
+  const content = (
+    <View
+      alignSelf="center"
+      gap="l"
+      maxWidth={resolvePageMaxWidth(width)}
+      px={{ base: 16, md: 24, lg: 32 }}
+      py="xl"
+      testID={testID}
+      width="100%"
+    >
+      {children}
+      {footer}
+    </View>
+  );
+
+  if (!scroll) {
+    return (
+      <View bg="background" flex={1} minHeight={0} minWidth={0}>
+        {content}
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView bg="background" flex={1} minHeight={0} minWidth={0}>
+      {content}
+    </ScrollView>
+  );
+}
+
+/*** Screen content boundary with independent width policy and scroll ownership. */
+export const Screen = withZoraThemeScope(ScreenInner);

package/src/{layout/screen-section → features/layout/adapters/inbound}/ScreenSection.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { Stack } from '../../features/layout/public';
-import { SectionHeader } from '../../patterns/section-header';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { ScreenSectionProps } from './types';
+import { SectionHeader } from '../../../../patterns/section-header';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { ScreenSectionProps } from '../../../../types/layout';
+import { View } from './View';
 
 function ScreenSectionInner({
   themeId: _themeId,
@@ -16,16 +16,12 @@ function ScreenSectionInner({
   testID,
 }: ScreenSectionProps) {
   return (
-    <Stack gap="m" testID={testID}>
+    <View gap="m" testID={testID}>
       {title ? <SectionHeader actions={actions} description={description} title={title} /> : null}
       {children}
-    </Stack>
+    </View>
   );
 }
 
-/***
- * Screen section layout with optional title, description, and actions.
- *
- 
- */
+/*** Screen section with optional heading, description, actions, and content. */
 export const ScreenSection = withZoraThemeScope(ScreenSectionInner);

package/src/features/layout/adapters/inbound/ScrollView.tsx

@@ -0,0 +1,18 @@
+import { ScrollView as SurfaceScrollView } from '@ankhorage/surface';
+import React from 'react';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { ScrollViewProps } from '../../../../types/layout';
+
+/*** Adapts the token-aware Surface ScrollView primitive to ZORA theme scope. */
+export const ScrollView = withZoraThemeScope(ScrollViewInner);
+
+/*** Forwards ZORA scrolling props to the published Surface ScrollView boundary. */
+function ScrollViewInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  ...props
+}: ScrollViewProps) {
+  return <SurfaceScrollView {...props} />;
+}

package/src/features/layout/adapters/inbound/View.tsx

@@ -0,0 +1,18 @@
+import { View as SurfaceView } from '@ankhorage/surface';
+import React from 'react';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { ViewProps } from '../../../../types/layout';
+
+/*** Adapts the token-aware Surface View primitive to ZORA theme scope. */
+export const View = withZoraThemeScope(ViewInner);
+
+/*** Forwards ZORA layout props to the published Surface View boundary. */
+function ViewInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  ...props
+}: ViewProps) {
+  return <SurfaceView {...props} />;
+}

package/src/features/layout/constants.ts

@@ -1,7 +1,5 @@
 import type { ZoraComponentMeta } from '../../metadata/types';
 
-export const CONTENT_RAIL_SPACING_VALUES = ['none', 'xs', 's', 'm', 'l', 'xl'] as const;
-
 export const LAYOUT_PROPS = {
   p: { type: 'spacing', category: 'Spacing' },
   px: { type: 'spacing', category: 'Spacing' },

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

@@ -0,0 +1,55 @@
+import { existsSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { describe, expect, test } from 'bun:test';
+
+const srcDir = join(import.meta.dir, '../..');
+const publicSource = readFileSync(join(import.meta.dir, 'public.ts'), 'utf8');
+const rootSource = readFileSync(join(srcDir, 'index.ts'), 'utf8');
+
+const removedPublicNames = [
+  'Box',
+  'Center',
+  'Container',
+  'Inline',
+  'SettingsLayout',
+  'SettingsRow',
+  'SidebarLayout',
+  'Spacer',
+  'Stack',
+  'TileGrid',
+  'TopbarLayout',
+] as const;
+
+describe('canonical layout boundary', () => {
+  test('exports only the current layout primitives and semantic screen composition', () => {
+    for (const name of [
+      'AppShell',
+      'Divider',
+      'Grid',
+      'Screen',
+      'ScreenSection',
+      'ScrollView',
+      'View',
+    ]) {
+      expect(publicSource).toMatch(new RegExp(`\\b${name}\\b`, 'u'));
+    }
+
+    for (const name of removedPublicNames) {
+      expect(publicSource).not.toMatch(new RegExp(`\\b${name}\\b`, 'u'));
+      expect(rootSource).not.toMatch(new RegExp(`export[^\\n]*\\b${name}\\b`, 'u'));
+    }
+  });
+
+  test('does not retain the legacy layout or foundation ownership roots', () => {
+    expect(existsSync(join(srcDir, 'layout'))).toBe(false);
+    expect(existsSync(join(srcDir, 'foundation'))).toBe(false);
+    expect(existsSync(join(srcDir, 'patterns', 'settings-row'))).toBe(false);
+    expect(existsSync(join(srcDir, 'patterns', 'tile-grid'))).toBe(false);
+  });
+
+  test('keeps moved capabilities with their singular feature owners', () => {
+    expect(existsSync(join(srcDir, 'features', 'content-rail', 'public.ts'))).toBe(true);
+    expect(existsSync(join(srcDir, 'features', 'palette-item', 'public.ts'))).toBe(true);
+  });
+});

package/src/features/layout/public.ts

@@ -1,22 +1,16 @@
 export type {
-  ContentRailControlPressEvent,
-  ContentRailDirection,
-  ContentRailItemSize,
-  ContentRailMotion,
-  ContentRailProps,
-  ContentRailSpacing,
-  ContentRailVisibleRangeChangeEvent,
-} from '../../types/content-rail';
-export type {
-  BoxProps,
-  ContainerProps,
+  AppShellProps,
   DividerProps,
   GridProps,
-  StackProps,
+  ScreenProps,
+  ScreenSectionProps,
+  ScrollViewProps,
+  ViewProps,
 } from '../../types/layout';
-export { Box } from './adapters/inbound/Box';
-export { Container } from './adapters/inbound/Container';
-export { ContentRail } from './adapters/inbound/ContentRail';
+export { AppShell } from './adapters/inbound/AppShell';
 export { Divider } from './adapters/inbound/Divider';
 export { Grid } from './adapters/inbound/Grid';
-export { Stack } from './adapters/inbound/Stack';
+export { Screen } from './adapters/inbound/Screen';
+export { ScreenSection } from './adapters/inbound/ScreenSection';
+export { ScrollView } from './adapters/inbound/ScrollView';
+export { View } from './adapters/inbound/View';

package/src/features/layout/{containerMeta.ts → scrollViewMeta.ts}

@@ -2,10 +2,13 @@ import { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
 import type { ZoraComponentMeta } from '../../metadata/types';
 import { LAYOUT_PROPS } from './constants';
 
-export const containerMeta = {
-  name: 'Container',
+export const scrollViewMeta = {
+  name: 'ScrollView',
   category: 'foundation',
   directManifestNode: true,
   allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
-  props: Object.fromEntries(Object.entries(LAYOUT_PROPS).filter(([key]) => key !== 'width')),
+  props: {
+    ...LAYOUT_PROPS,
+    horizontal: { type: 'boolean', category: 'Layout', default: false },
+  },
 } as const satisfies ZoraComponentMeta;

package/src/features/layout/{stackMeta.ts → viewMeta.ts}

@@ -2,8 +2,8 @@ import { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
 import type { ZoraComponentMeta } from '../../metadata/types';
 import { LAYOUT_PROPS } from './constants';
 
-export const stackMeta = {
-  name: 'Stack',
+export const viewMeta = {
+  name: 'View',
   category: 'foundation',
   directManifestNode: true,
   allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
@@ -11,6 +11,8 @@ export const stackMeta = {
     ...LAYOUT_PROPS,
     direction: { type: 'enum', category: 'Layout', enum: ['row', 'column'] },
     gap: { type: 'spacing', category: 'Spacing' },
+    rowGap: { type: 'spacing', category: 'Spacing' },
+    columnGap: { type: 'spacing', category: 'Spacing' },
     align: {
       type: 'enum',
       category: 'Layout',
@@ -22,5 +24,8 @@ export const stackMeta = {
       enum: ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'],
     },
     wrap: { type: 'enum', category: 'Layout', enum: ['nowrap', 'wrap'] },
+    bg: { type: 'color', category: 'Style' },
+    borderColor: { type: 'color', category: 'Style' },
+    borderWidth: { type: 'number', category: 'Style' },
   },
 } as const satisfies ZoraComponentMeta;

package/src/features/list/adapters/inbound/List.tsx

@@ -0,0 +1,77 @@
+import { List as SurfaceList } from '@ankhorage/surface';
+import React from 'react';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type {
+  ListItemProps,
+  ListItemsProps,
+  ListItemVariant,
+  ListProps,
+} from '../../../../types/list';
+import { Divider, View } from '../../../layout/public';
+import { resolveListSeparator } from '../../utils/resolveListSeparator';
+import { ListItem } from './ListItem';
+
+function resolveItemVariant({
+  item,
+  defaultVariant,
+}: {
+  item: ListItemProps;
+  defaultVariant: ListItemVariant;
+}): ListItemVariant {
+  return item.variant ?? defaultVariant;
+}
+
+function resolveItemCompact({
+  item,
+  compact,
+}: {
+  item: ListItemProps;
+  compact: boolean | undefined;
+}): boolean {
+  return item.compact ?? compact ?? false;
+}
+
+function ListItemsInner({
+  themeId: _themeId,
+  mode: _mode,
+  testID,
+  items,
+  itemVariant = 'divider',
+  compact,
+}: ListItemsProps) {
+  return (
+    <SurfaceList testID={testID}>
+      {items.map((item, index) => {
+        const effectiveVariant = resolveItemVariant({ item, defaultVariant: itemVariant });
+        const separator = resolveListSeparator(effectiveVariant, index);
+        return (
+          <React.Fragment key={String(index)}>
+            {separator === 'divider' ? <Divider /> : null}
+            {separator === 'spacer' ? <View height="s" /> : null}
+            <ListItem
+              {...item}
+              compact={resolveItemCompact({ item, compact })}
+              variant={effectiveVariant}
+            />
+          </React.Fragment>
+        );
+      })}
+    </SurfaceList>
+  );
+}
+
+function ListInner(props: ListProps) {
+  if ('items' in props) return <ListItemsInner {...props} />;
+  const {
+    themeId: _themeId,
+    mode: _mode,
+    interactionPolicy: _interactionPolicy,
+    children,
+    testID,
+  } = props;
+  return <SurfaceList testID={testID}>{children}</SurfaceList>;
+}
+
+/*** List composition built on the Surface list boundary with ZORA item/separator policy. */
+export const List = withZoraThemeScope(ListInner);