@ankhorage/zora 16.0.0 → 17.0.0

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/missing-element/adapters/inbound/MissingElement.tsx

@@ -5,7 +5,7 @@ import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { MissingElementProps } from '../../../../types/missing-element';
 import { Badge } from '../../../badge/public';
-import { Box, Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Text } from '../../../typography/public';
 
 /***
@@ -26,7 +26,7 @@ function MissingElementInner({
   const accessibilityLabel = `Missing element: ${requestedCapability}. ${reason}`;
 
   return (
-    <Box
+    <View
       accessibilityLabel={accessibilityLabel}
       accessibilityRole="text"
       accessible
@@ -40,7 +40,7 @@ function MissingElementInner({
       style={styles.root}
       testID={testID}
     >
-      <Stack gap="xs">
+      <View gap="xs">
         <Badge color="warning">Missing element</Badge>
         <Text variant="label" weight="semiBold">
           {requestedCapability}
@@ -53,8 +53,8 @@ function MissingElementInner({
             Evidence: {evidenceId}
           </Text>
         ) : null}
-      </Stack>
-    </Box>
+      </View>
+    </View>
   );
 }
 

package/src/features/pagination/adapters/inbound/Pagination.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { PaginationProps } from '../../../../types/pagination';
 import { Button } from '../../../button/public';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Text } from '../../../typography/public';
 import { resolvePaginationPage } from '../../utils/resolvePaginationPage';
 import { resolvePaginationState } from '../../utils/resolvePaginationState';
@@ -46,7 +46,7 @@ function PaginationInner({
   );
 
   return (
-    <Stack align="center" direction="row" gap="xs" testID={testID}>
+    <View align="center" direction="row" gap="xs" testID={testID}>
       {showFirstLast ? (
         <Button
           disabled={navigationDisabled || state.currentPage === 1}
@@ -111,6 +111,6 @@ function PaginationInner({
           {lastLabel}
         </Button>
       ) : null}
-    </Stack>
+    </View>
   );
 }

package/src/{patterns/tile-grid → features/palette-item/adapters/inbound}/PaletteItem.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import { Card } from '../../features/card/public';
-import { Box } from '../../features/layout/public';
-import { Heading } from '../../features/typography/public';
-import { Text } from '../../features/typography/public';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { PaletteItemProps } from './types';
+import { useZoraTheme } from '../../../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { PaletteItemProps } from '../../../../types/palette-item';
+import { Card } from '../../../card/public';
+import { View } from '../../../layout/public';
+import { Heading } from '../../../typography/public';
+import { Text } from '../../../typography/public';
 
 function PaletteItemInner({
   themeId: _themeId,
@@ -38,8 +38,8 @@ function PaletteItemInner({
           : undefined
       }
     >
-      <Box p="xs" style={{ alignItems: 'center' }}>
-        {icon ? <Box pb="s">{/* Icon spec here */}</Box> : null}
+      <View p="xs" style={{ alignItems: 'center' }}>
+        {icon ? <View pb="s">{/* Icon spec here */}</View> : null}
         <Heading level={5} align="center">
           {title}
         </Heading>
@@ -48,8 +48,8 @@ function PaletteItemInner({
             {description}
           </Text>
         ) : null}
-        {badge ? <Box pt="xs">{badge}</Box> : null}
-      </Box>
+        {badge ? <View pt="xs">{badge}</View> : null}
+      </View>
     </Card>
   );
 }

package/src/{layout/sidebar-layout/meta.ts → features/palette-item/paletteItemMeta.ts}

@@ -1,10 +1,10 @@
 import type { ZoraComponentMeta } from '../../metadata';
 
-export const sidebarLayoutMeta = {
-  name: 'SidebarLayout',
-  category: 'layout',
+export const paletteItemMeta = {
+  name: 'PaletteItem',
+  category: 'pattern',
   directManifestNode: false,
   allowedChildren: [],
-  note: 'Application layout; not represented as a manifest node in v1.',
+  note: 'Palette option pattern; not represented as a manifest node in v1.',
   props: {},
 } as const satisfies ZoraComponentMeta;

package/src/features/palette-item/public.ts

@@ -0,0 +1,2 @@
+export type { PaletteItemProps } from '../../types/palette-item';
+export { PaletteItem } from './adapters/inbound/PaletteItem';

package/src/features/popover-menu/adapters/inbound/PopoverMenu.tsx

@@ -9,7 +9,7 @@ import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { PopoverMenuAction, PopoverMenuProps } from '../../../../types/popover-menu';
 import { Icon } from '../../../icon/public';
-import { Box } from '../../../layout/public';
+import { View } from '../../../layout/public';
 
 /*** Presents a ZORA-styled action list through the Surface PopoverMenu capability. */
 export const PopoverMenu = withZoraThemeScope(PopoverMenuInner);
@@ -56,5 +56,5 @@ function renderActionLeading(action: PopoverMenuAction, iconColor: string): Reac
 
 /*** Wraps optional trailing action content in the ZORA layout boundary. */
 function renderActionTrailing(action: PopoverMenuAction): React.ReactNode {
-  return action.trailing === undefined ? undefined : <Box>{action.trailing}</Box>;
+  return action.trailing === undefined ? undefined : <View>{action.trailing}</View>;
 }

package/src/features/progress/adapters/inbound/Progress.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import { type ProgressProps, resolveProgressRole } from '../../../../types/progress';
-import { Box } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { resolveProgressFraction } from '../../utils/resolveProgressFraction';
 
 function resolveProgressHeight(size: NonNullable<ProgressProps['size']>): number {
@@ -34,7 +34,7 @@ function ProgressInner({
   const role = resolveProgressRole(theme, color);
 
   return (
-    <Box
+    <View
       accessibilityRole="progressbar"
       bg={theme.semantics.neutral.surface}
       borderColor={theme.semantics.neutral.divider}
@@ -43,8 +43,8 @@ function ProgressInner({
       testID={testID}
       style={{ height, overflow: 'hidden' }}
     >
-      <Box bg={role.base} style={{ height: '100%', width: `${fraction * 100}%` }} />
-    </Box>
+      <View bg={role.base} style={{ height: '100%', width: `${fraction * 100}%` }} />
+    </View>
   );
 }
 

package/src/features/progress/adapters/inbound/ProgressRing.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View as ReactNativeView } from 'react-native';
 
 import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import { type ProgressRingProps, resolveProgressRole } from '../../../../types/progress';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Text } from '../../../typography/public';
 import { resolveProgressFraction } from '../../utils/resolveProgressFraction';
 import { resolveProgressRingGeometry } from '../../utils/resolveProgressRingGeometry';
@@ -36,7 +36,7 @@ function ProgressRingInner({
   const segments = Array.from({ length: geometry.filledSegmentCount });
 
   return (
-    <View
+    <ReactNativeView
       accessibilityLabel={accessibilityLabel}
       accessibilityRole="progressbar"
       accessibilityValue={{
@@ -49,7 +49,7 @@ function ProgressRingInner({
       style={{ height: geometry.diameter, width: geometry.diameter }}
       testID={testID}
     >
-      <View
+      <ReactNativeView
         importantForAccessibility="no-hide-descendants"
         pointerEvents="none"
         style={styles.visual}
@@ -86,15 +86,15 @@ function ProgressRingInner({
             />
           </View>
         ))}
-      </View>
+      </ReactNativeView>
 
       {centerValue !== undefined || centerLabel !== undefined ? (
-        <View
+        <ReactNativeView
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
           style={styles.center}
         >
-          <Stack align="center" gap="xxs" px="s">
+          <View align="center" gap="xxs" px="s">
             {centerValue !== undefined ? (
               <Text align="center" variant="lead" weight="bold">
                 {centerValue}
@@ -105,10 +105,10 @@ function ProgressRingInner({
                 {centerLabel}
               </Text>
             ) : null}
-          </Stack>
-        </View>
+          </View>
+        </ReactNativeView>
       ) : null}
-    </View>
+    </ReactNativeView>
   );
 }
 

package/src/features/rating/adapters/inbound/Rating.tsx

@@ -1,12 +1,12 @@
 import type { RoleSemantics, SurfaceTheme } from '@ankhorage/surface';
 
-import { Inline } from '../../../../foundation';
 import type { ZoraColor } from '../../../../internal/recipes';
 import { resolveIconSize } from '../../../../internal/recipes';
 import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { RatingProps } from '../../../../types/rating';
 import { Icon } from '../../../icon/public';
+import { View } from '../../../layout/public';
 import { resolveRatingSegments } from '../../utils/resolveRatingSegments';
 
 /*** Displays a read-only star rating with optional half steps. */
@@ -29,7 +29,7 @@ function RatingInner({
   const iconSize = resolveIconSize(size);
 
   return (
-    <Inline align="center" gap="xxs" testID={testID} wrap="nowrap">
+    <View direction="row" align="center" gap="xxs" testID={testID} wrap="nowrap">
       {segments.map((segment, index) => {
         const name =
           segment === 'full' ? 'star' : segment === 'half' ? 'star-half' : 'star-outline';
@@ -38,7 +38,7 @@ function RatingInner({
           <Icon key={`${index}-${segment}`} color={segmentColor} name={name} size={iconSize} />
         );
       })}
-    </Inline>
+    </View>
   );
 }
 

package/src/features/skeleton/adapters/inbound/Skeleton.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { useZoraTheme } from '../../../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { SkeletonProps } from '../../../../types/skeleton';
-import { Box } from '../../../layout/public';
+import { View } from '../../../layout/public';
 
 function SkeletonInner({
   themeId: _themeId,
@@ -16,7 +16,7 @@ function SkeletonInner({
   const { theme } = useZoraTheme();
 
   return (
-    <Box
+    <View
       accessibilityLabel="Loading"
       accessibilityRole="text"
       bg={theme.semantics.neutral.surfaceHover}

package/src/features/skeleton/adapters/inbound/SkeletonCard.tsx

@@ -4,7 +4,7 @@ import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type { SkeletonCardProps } from '../../../../types/skeleton';
 import { ButtonGroup } from '../../../button/public';
 import { Card } from '../../../card/public';
-import { Stack } from '../../../layout/public';
+import { View } from '../../../layout/public';
 import { Skeleton } from './Skeleton';
 import { SkeletonText } from './SkeletonText';
 
@@ -19,19 +19,19 @@ function SkeletonCardInner({
 }: SkeletonCardProps) {
   return (
     <Card compact={compact} testID={testID} tone="default">
-      <Stack gap={compact ? 's' : 'm'}>
+      <View gap={compact ? 's' : 'm'}>
         {media ? <Skeleton height={compact ? 120 : 180} radius="m" /> : null}
-        <Stack gap="s">
+        <View gap="s">
           <Skeleton height={18} radius="full" width="54%" />
           <SkeletonText lines={lines} />
-        </Stack>
+        </View>
         {actions ? (
           <ButtonGroup align="end">
             <Skeleton height={36} radius="m" width={88} />
             <Skeleton height={36} radius="m" width={120} />
           </ButtonGroup>
         ) : null}
-      </Stack>
+      </View>
     </Card>
   );
 }