@ankhorage/zora 15.0.0 → 17.0.0

package/src/layout/screen/Screen.test.ts

@@ -1,22 +0,0 @@
-import { readFile } from 'node:fs/promises';
-
-import { describe, expect, it } from 'bun:test';
-
-describe('Screen scroll ownership contract', () => {
-  it('keeps scroll=false as a bounded delegated viewport', async () => {
-    const source = await readFile(new URL('./Screen.tsx', import.meta.url), 'utf8');
-
-    expect(source).toContain('if (!scroll)');
-    expect(source).toContain('flex={1} minHeight={0} minWidth={0}');
-    expect(source).toContain('{children}');
-    expect(source).not.toContain('{content}');
-  });
-
-  it('keeps normal scrolling owned by Screen', async () => {
-    const source = await readFile(new URL('./Screen.tsx', import.meta.url), 'utf8');
-
-    expect(source).toContain('<ScrollArea');
-    expect(source).toContain('style={{ flex: 1, minHeight: 0, minWidth: 0 }}');
-    expect(source).toContain('<Container maxWidth={resolvePageMaxWidth(width)}');
-  });
-});

package/src/layout/screen/Screen.tsx

@@ -1,47 +0,0 @@
-import { ScrollArea } from '@ankhorage/surface';
-import React from 'react';
-
-import { Box, Container, Stack } from '../../features/layout/public';
-import { resolvePageMaxWidth } from '../../internal/recipes';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { ScreenProps } from './types';
-
-function ScreenInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  children,
-  footer,
-  scroll = true,
-  width = 'default',
-  testID,
-}: ScreenProps) {
-  if (!scroll) {
-    return (
-      <Box bg="background" flex={1} minHeight={0} minWidth={0} testID={testID}>
-        {children}
-        {footer}
-      </Box>
-    );
-  }
-
-  return (
-    <ScrollArea bg="background" style={{ flex: 1, minHeight: 0, minWidth: 0 }}>
-      <Container maxWidth={resolvePageMaxWidth(width)} py="xl" testID={testID}>
-        <Stack gap="l">
-          {children}
-          {footer}
-        </Stack>
-      </Container>
-    </ScrollArea>
-  );
-}
-
-/**
- * Outer content boundary for one app screen.
- *
- * By default Screen owns normal vertical scrolling. Set `scroll={false}` to preserve a bounded
- * viewport and delegate scroll or gesture ownership to specialized children such as lists, maps,
- * chats, canvases, or editors.
- */
-export const Screen = withZoraThemeScope(ScreenInner);

package/src/layout/screen/index.ts

@@ -1,2 +0,0 @@
-export { Screen } from './Screen';
-export type { ScreenProps } from './types';

package/src/layout/screen/types.ts

@@ -1,11 +0,0 @@
-import type React from 'react';
-
-import type { ZoraContentWidth } from '../../internal/recipes';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface ScreenProps extends ZoraBaseProps {
-  children?: React.ReactNode;
-  footer?: React.ReactNode;
-  scroll?: boolean;
-  width?: ZoraContentWidth;
-}

package/src/layout/screen-section/index.ts

@@ -1,2 +0,0 @@
-export { ScreenSection } from './ScreenSection';
-export type { ScreenSectionProps } from './types';

package/src/layout/screen-section/types.ts

@@ -1,10 +0,0 @@
-import type React from 'react';
-
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface ScreenSectionProps extends ZoraBaseProps {
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  actions?: React.ReactNode;
-  children?: React.ReactNode;
-}

package/src/layout/settings-layout/SettingsLayout.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-
-import { AppBar } from '../../features/app-bar/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { Screen } from '../screen';
-import { SidebarLayout } from '../sidebar-layout';
-import type { SettingsLayoutProps } from './types';
-
-function SettingsLayoutInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  title,
-  description,
-  sidebar,
-  children,
-  actions,
-  testID,
-}: SettingsLayoutProps) {
-  return (
-    <>
-      {title ? <AppBar actions={actions} subtitle={description} title={title} /> : null}
-      <Screen testID={testID}>
-        <SidebarLayout sidebar={sidebar}>{children}</SidebarLayout>
-      </Screen>
-    </>
-  );
-}
-
-/***
- * Settings page layout with app bar, sidebar, and scrollable content area.
- */
-export const SettingsLayout = withZoraThemeScope(SettingsLayoutInner);

package/src/layout/settings-layout/index.ts

@@ -1,2 +0,0 @@
-export { SettingsLayout } from './SettingsLayout';
-export type { SettingsLayoutProps } from './types';

package/src/layout/settings-layout/meta.ts

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

package/src/layout/settings-layout/types.ts

@@ -1,11 +0,0 @@
-import type React from 'react';
-
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface SettingsLayoutProps extends ZoraBaseProps {
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  sidebar: React.ReactNode;
-  children?: React.ReactNode;
-  actions?: React.ReactNode;
-}

package/src/layout/sidebar-layout/SidebarLayout.test.ts

@@ -1,35 +0,0 @@
-import { describe, expect, it } from 'bun:test';
-
-import { resolveSidebarLayoutSizing } from './resolveSidebarLayoutSizing';
-
-describe('SidebarLayout sizing contract', () => {
-  it('keeps content-flow sizing as the default', () => {
-    expect(resolveSidebarLayoutSizing()).toEqual({
-      root: {
-        align: 'flex-start',
-        flex: undefined,
-        minHeight: undefined,
-        minWidth: undefined,
-      },
-      child: {
-        minHeight: undefined,
-        minWidth: undefined,
-      },
-    });
-  });
-
-  it('fills a bounded parent for child-owned scroll areas', () => {
-    expect(resolveSidebarLayoutSizing('fill')).toEqual({
-      root: {
-        align: 'stretch',
-        flex: 1,
-        minHeight: 0,
-        minWidth: 0,
-      },
-      child: {
-        minHeight: 0,
-        minWidth: 0,
-      },
-    });
-  });
-});

package/src/layout/sidebar-layout/SidebarLayout.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-
-import { Box, Stack } from '../../features/layout/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { resolveSidebarLayoutSizing } from './resolveSidebarLayoutSizing';
-import type { SidebarLayoutProps } from './types';
-
-function SidebarLayoutInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  sidebar,
-  children,
-  aside,
-  sidebarWidth = 280,
-  asideWidth = 280,
-  sizing,
-  testID,
-}: SidebarLayoutProps) {
-  const layoutSizing = resolveSidebarLayoutSizing(sizing);
-
-  return (
-    <Stack {...layoutSizing.root} direction={{ base: 'column', lg: 'row' }} gap="l" testID={testID}>
-      <Box {...layoutSizing.child} width={{ base: '100%', lg: sidebarWidth }}>
-        {sidebar}
-      </Box>
-      <Box {...layoutSizing.child} flex={1} width="100%">
-        {children}
-      </Box>
-      {aside ? (
-        <Box {...layoutSizing.child} width={{ base: '100%', lg: asideWidth }}>
-          {aside}
-        </Box>
-      ) : null}
-    </Stack>
-  );
-}
-
-/***
- * Responsive layout with a sidebar and main content area (and optional aside).
- *
- * `sizing="content"` keeps normal content-flow behavior. Use `sizing="fill"` when the layout
- * should fill an already bounded parent so sidebar/content children receive the available space
- * for their own scrolling or gesture ownership.
- */
-export const SidebarLayout = withZoraThemeScope(SidebarLayoutInner);

package/src/layout/sidebar-layout/index.ts

@@ -1,2 +0,0 @@
-export { SidebarLayout } from './SidebarLayout';
-export type { SidebarLayoutProps } from './types';

package/src/layout/sidebar-layout/meta.ts

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

package/src/layout/sidebar-layout/resolveSidebarLayoutSizing.ts

@@ -1,18 +0,0 @@
-import type { SidebarLayoutSizing } from './types';
-
-export function resolveSidebarLayoutSizing(sizing: SidebarLayoutSizing = 'content') {
-  const fillsAvailableSpace = sizing === 'fill';
-
-  return {
-    root: {
-      align: fillsAvailableSpace ? 'stretch' : 'flex-start',
-      flex: fillsAvailableSpace ? 1 : undefined,
-      minHeight: fillsAvailableSpace ? 0 : undefined,
-      minWidth: fillsAvailableSpace ? 0 : undefined,
-    },
-    child: {
-      minHeight: fillsAvailableSpace ? 0 : undefined,
-      minWidth: fillsAvailableSpace ? 0 : undefined,
-    },
-  } as const;
-}

package/src/layout/sidebar-layout/types.ts

@@ -1,14 +0,0 @@
-import type React from 'react';
-
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export type SidebarLayoutSizing = 'content' | 'fill';
-
-export interface SidebarLayoutProps extends ZoraBaseProps {
-  sidebar: React.ReactNode;
-  children?: React.ReactNode;
-  aside?: React.ReactNode;
-  sidebarWidth?: number;
-  asideWidth?: number;
-  sizing?: SidebarLayoutSizing;
-}

package/src/layout/topbar-layout/TopbarLayout.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-
-import { Box, Stack } from '../../features/layout/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { SidebarLayout } from '../sidebar-layout';
-import type { TopbarLayoutProps } from './types';
-
-function TopbarLayoutInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  topbar,
-  children,
-  sidebar,
-  testID,
-}: TopbarLayoutProps) {
-  return (
-    <Stack gap="l" testID={testID}>
-      <Box>{topbar}</Box>
-      {sidebar ? <SidebarLayout sidebar={sidebar}>{children}</SidebarLayout> : children}
-    </Stack>
-  );
-}
-
-/***
- * Layout that composes a top bar with optional sidebar and content.
- *
- 
- */
-export const TopbarLayout = withZoraThemeScope(TopbarLayoutInner);

package/src/layout/topbar-layout/index.ts

@@ -1,2 +0,0 @@
-export { TopbarLayout } from './TopbarLayout';
-export type { TopbarLayoutProps } from './types';

package/src/layout/topbar-layout/meta.ts

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

package/src/layout/topbar-layout/types.ts

@@ -1,9 +0,0 @@
-import type React from 'react';
-
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface TopbarLayoutProps extends ZoraBaseProps {
-  topbar: React.ReactNode;
-  children?: React.ReactNode;
-  sidebar?: React.ReactNode;
-}

package/src/patterns/settings-row/SettingsRow.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-
-import { Card } from '../../features/card/public';
-import { Box } from '../../features/layout/public';
-import { Text } from '../../features/typography/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { SettingsRowProps } from './types';
-
-function SettingsRowInner({
-  themeId: _themeId,
-  mode: _mode,
-  title,
-  description,
-  meta,
-  control,
-  onPress,
-  disabled = false,
-  testID,
-  interactionPolicy,
-}: SettingsRowProps) {
-  const isInteractive = Boolean(onPress) && !control;
-
-  // Prevent nested interactive elements:
-  // If a control is present (likely contains buttons), the row itself must not be clickable
-  return (
-    <Card
-      compact
-      actions={control}
-      description={description}
-      disabled={disabled}
-      interactionPolicy={interactionPolicy}
-      onPress={isInteractive ? onPress : undefined}
-      testID={testID}
-      title={title}
-      tone="subtle"
-    >
-      {meta ? (
-        <Box pt="xs">
-          <Text emphasis="muted" variant="caption">
-            {meta}
-          </Text>
-        </Box>
-      ) : null}
-    </Card>
-  );
-}
-
-/***
- * Settings row pattern with title, description/meta, and optional trailing content.
- *
- 
- */
-export const SettingsRow = withZoraThemeScope(SettingsRowInner);

package/src/patterns/settings-row/index.ts

@@ -1,2 +0,0 @@
-export { SettingsRow } from './SettingsRow';
-export type { SettingsRowProps } from './types';

package/src/patterns/settings-row/meta.ts

@@ -1,40 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-
-export const settingsRowMeta = {
-  name: 'SettingsRow',
-  category: 'pattern',
-  directManifestNode: true,
-  allowedChildren: [],
-  blueprint: {
-    label: 'Settings row',
-    defaultProps: {
-      title: 'Setting',
-      description: 'Setting description.',
-    },
-  },
-  props: {
-    title: {
-      type: 'string',
-      category: 'Content',
-      label: 'Title',
-      default: 'Setting',
-    },
-    description: {
-      type: 'string',
-      category: 'Content',
-      label: 'Description',
-      default: 'Setting description.',
-    },
-    meta: {
-      type: 'string',
-      category: 'Content',
-      label: 'Meta',
-    },
-    disabled: {
-      type: 'boolean',
-      category: 'State',
-      label: 'Disabled',
-      default: false,
-    },
-  },
-} as const satisfies ZoraComponentMeta;

package/src/patterns/settings-row/types.ts

@@ -1,28 +0,0 @@
-import type React from 'react';
-
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-interface SettingsRowBaseProps extends ZoraBaseProps {
-  title: React.ReactNode;
-  description?: React.ReactNode;
-  meta?: React.ReactNode;
-  disabled?: boolean;
-}
-
-interface SettingsRowPressableProps {
-  onPress: () => void;
-  control?: never;
-}
-
-interface SettingsRowControlledProps {
-  control: React.ReactNode;
-  onPress?: never;
-}
-
-interface SettingsRowStaticProps {
-  control?: never;
-  onPress?: never;
-}
-
-export type SettingsRowProps = SettingsRowBaseProps &
-  (SettingsRowPressableProps | SettingsRowControlledProps | SettingsRowStaticProps);

package/src/patterns/tile-grid/TileGrid.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-
-import { Box } from '../../features/layout/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { TileGridProps } from './types';
-
-function TileGridInner({
-  themeId: _themeId,
-  mode: _mode,
-  interactionPolicy: _interactionPolicy,
-  children,
-  columns = 'responsive',
-  compact = false,
-  testID,
-}: TileGridProps) {
-  return (
-    <Box
-      testID={testID}
-      style={{
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        gap: compact ? 8 : 16,
-      }}
-    >
-      {React.Children.map(children, (child) => {
-        if (!child) return null;
-
-        return (
-          <Box
-            style={
-              columns === 'responsive'
-                ? {
-                    flexBasis: '30%',
-                    flexGrow: 1,
-                    minWidth: 120,
-                  }
-                : {
-                    width: `${100 / columns}%`,
-                  }
-            }
-          >
-            {child}
-          </Box>
-        );
-      })}
-    </Box>
-  );
-}
-
-/***
- * Responsive grid layout for arranging tile content.
- *
- 
- */
-export const TileGrid = withZoraThemeScope(TileGridInner);

package/src/patterns/tile-grid/index.ts

@@ -1,3 +0,0 @@
-export * from './PaletteItem';
-export * from './TileGrid';
-export * from './types';

package/src/patterns/tile-grid/meta.ts

@@ -1,21 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-
-const TILE_GRID_NOTE = 'Tile grid pattern component; not represented as a manifest node in v1.';
-
-export const paletteItemMeta = {
-  name: 'PaletteItem',
-  category: 'pattern',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: TILE_GRID_NOTE,
-  props: {},
-} as const satisfies ZoraComponentMeta;
-
-export const tileGridMeta = {
-  name: 'TileGrid',
-  category: 'pattern',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: TILE_GRID_NOTE,
-  props: {},
-} as const satisfies ZoraComponentMeta;

package/src/patterns/tile-grid/types.ts

@@ -1,20 +0,0 @@
-import type { ButtonIconSpec } from '@ankhorage/surface';
-import type { ReactNode } from 'react';
-
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface TileGridProps extends ZoraBaseProps {
-  children?: ReactNode;
-  columns?: number | 'responsive';
-  compact?: boolean;
-}
-
-export interface PaletteItemProps extends ZoraBaseProps {
-  title: ReactNode;
-  description?: ReactNode;
-  icon?: ButtonIconSpec;
-  badge?: ReactNode;
-  selected?: boolean;
-  disabled?: boolean;
-  onPress?: () => void;
-}