@ankhorage/zora 2.13.0 → 2.13.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 2.13.1
+
+### Patch Changes
+
+- 400863f: Define Screen scroll ownership explicitly: normal screens own scrolling, while `scroll={false}` preserves a bounded viewport for child-owned scroll and gesture surfaces. Require `@ankhorage/surface` 2.2.1 or newer so Stack preserves direct-child flex and min-size semantics throughout that viewport chain.
+
 ## 2.13.0
 
 ### Minor Changes

package/README.md

@@ -3,7 +3,7 @@
 
 # ZORA
 
-![license: MIT](././paradox/badges/license.svg) ![npm: v2.12.0](././paradox/badges/npm.svg) ![runtime: bun](././paradox/badges/runtime.svg) ![typescript: strict](././paradox/badges/typescript.svg) ![eslint: checked](././paradox/badges/eslint.svg) ![prettier: checked](././paradox/badges/prettier.svg) ![build: checked](././paradox/badges/build.svg) ![tests: checked](././paradox/badges/tests.svg) ![docs: paradox](././paradox/badges/docs.svg)
+![license: MIT](././paradox/badges/license.svg) ![npm: v2.13.0](././paradox/badges/npm.svg) ![runtime: bun](././paradox/badges/runtime.svg) ![typescript: strict](././paradox/badges/typescript.svg) ![eslint: checked](././paradox/badges/eslint.svg) ![prettier: checked](././paradox/badges/prettier.svg) ![build: checked](././paradox/badges/build.svg) ![tests: checked](././paradox/badges/tests.svg) ![docs: paradox](././paradox/badges/docs.svg)
 
 Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.
 

package/dist/layout/screen/Screen.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 import type { ScreenProps } from './types';
-/***
- * Page-level container with standard background and optional scroll behavior.
+/**
+ * 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 declare const Screen: (props: ScreenProps) => React.ReactElement | null;
 //# sourceMappingURL=Screen.d.ts.map

package/dist/layout/screen/Screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Screen.d.ts","sourceRoot":"","sources":["../../../src/layout/screen/Screen.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAoC3C;;;;GAIG;AACH,eAAO,MAAM,MAAM,mDAAkC,CAAC"}
+{"version":3,"file":"Screen.d.ts","sourceRoot":"","sources":["../../../src/layout/screen/Screen.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAiC3C;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,mDAAkC,CAAC"}

package/dist/layout/screen/Screen.js

@@ -4,25 +4,27 @@ import { Box, Container, Stack } from '../../foundation';
 import { resolvePageMaxWidth } from '../../internal/recipes';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 function ScreenInner({ themeId: _themeId, mode: _mode, interactionPolicy: _interactionPolicy, children, footer, scroll = true, width = 'default', testID, }) {
-    const content = (<Container maxWidth={resolvePageMaxWidth(width)} py="xl" testID={testID}>
-      <Stack gap="l">
+    if (!scroll) {
+        return (<Box bg="background" flex={1} minHeight={0} minWidth={0} testID={testID}>
         {children}
         {footer}
-      </Stack>
-    </Container>);
-    if (!scroll) {
-        return (<Box bg="background" flex={1}>
-        {content}
       </Box>);
     }
-    return (<ScrollArea bg="background" style={{ flex: 1 }}>
-      {content}
+    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>);
 }
-/***
- * Page-level container with standard background and optional scroll behavior.
+/**
+ * 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);
 //# sourceMappingURL=Screen.js.map

package/dist/layout/screen/Screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"Screen.js","sourceRoot":"","sources":["../../../src/layout/screen/Screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,WAAW,CAAC,EACnB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,iBAAiB,EAAE,kBAAkB,EACrC,QAAQ,EACR,MAAM,EACN,MAAM,GAAG,IAAI,EACb,KAAK,GAAG,SAAS,EACjB,MAAM,GACM;IACZ,MAAM,OAAO,GAAG,CACd,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CACtE;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CACZ;QAAA,CAAC,QAAQ,CACT;QAAA,CAAC,MAAM,CACT;MAAA,EAAE,KAAK,CACT;IAAA,EAAE,SAAS,CAAC,CACb,CAAC;IAEF,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,OAAO,CACL,CAAC,GAAG,CAAC,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAC3B;QAAA,CAAC,OAAO,CACV;MAAA,EAAE,GAAG,CAAC,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,CAAC,UAAU,CAAC,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAC7C;MAAA,CAAC,OAAO,CACV;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,kBAAkB,CAAC,WAAW,CAAC,CAAC","sourcesContent":["import { ScrollArea } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { Box, Container, Stack } from '../../foundation';\nimport { resolvePageMaxWidth } from '../../internal/recipes';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ScreenProps } from './types';\n\nfunction ScreenInner({\n  themeId: _themeId,\n  mode: _mode,\n  interactionPolicy: _interactionPolicy,\n  children,\n  footer,\n  scroll = true,\n  width = 'default',\n  testID,\n}: ScreenProps) {\n  const content = (\n    <Container maxWidth={resolvePageMaxWidth(width)} py=\"xl\" testID={testID}>\n      <Stack gap=\"l\">\n        {children}\n        {footer}\n      </Stack>\n    </Container>\n  );\n\n  if (!scroll) {\n    return (\n      <Box bg=\"background\" flex={1}>\n        {content}\n      </Box>\n    );\n  }\n\n  return (\n    <ScrollArea bg=\"background\" style={{ flex: 1 }}>\n      {content}\n    </ScrollArea>\n  );\n}\n\n/***\n * Page-level container with standard background and optional scroll behavior.\n *\n \n */\nexport const Screen = withZoraThemeScope(ScreenInner);\n"]}
+{"version":3,"file":"Screen.js","sourceRoot":"","sources":["../../../src/layout/screen/Screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,WAAW,CAAC,EACnB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,iBAAiB,EAAE,kBAAkB,EACrC,QAAQ,EACR,MAAM,EACN,MAAM,GAAG,IAAI,EACb,KAAK,GAAG,SAAS,EACjB,MAAM,GACM;IACZ,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,OAAO,CACL,CAAC,GAAG,CAAC,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CACtE;QAAA,CAAC,QAAQ,CACT;QAAA,CAAC,MAAM,CACT;MAAA,EAAE,GAAG,CAAC,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,CAAC,UAAU,CAAC,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CACxE;MAAA,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CACtE;QAAA,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CACZ;UAAA,CAAC,QAAQ,CACT;UAAA,CAAC,MAAM,CACT;QAAA,EAAE,KAAK,CACT;MAAA,EAAE,SAAS,CACb;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,kBAAkB,CAAC,WAAW,CAAC,CAAC","sourcesContent":["import { ScrollArea } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { Box, Container, Stack } from '../../foundation';\nimport { resolvePageMaxWidth } from '../../internal/recipes';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ScreenProps } from './types';\n\nfunction ScreenInner({\n  themeId: _themeId,\n  mode: _mode,\n  interactionPolicy: _interactionPolicy,\n  children,\n  footer,\n  scroll = true,\n  width = 'default',\n  testID,\n}: ScreenProps) {\n  if (!scroll) {\n    return (\n      <Box bg=\"background\" flex={1} minHeight={0} minWidth={0} testID={testID}>\n        {children}\n        {footer}\n      </Box>\n    );\n  }\n\n  return (\n    <ScrollArea bg=\"background\" style={{ flex: 1, minHeight: 0, minWidth: 0 }}>\n      <Container maxWidth={resolvePageMaxWidth(width)} py=\"xl\" testID={testID}>\n        <Stack gap=\"l\">\n          {children}\n          {footer}\n        </Stack>\n      </Container>\n    </ScrollArea>\n  );\n}\n\n/**\n * Outer content boundary for one app screen.\n *\n * By default Screen owns normal vertical scrolling. Set `scroll={false}` to preserve a bounded\n * viewport and delegate scroll or gesture ownership to specialized children such as lists, maps,\n * chats, canvases, or editors.\n */\nexport const Screen = withZoraThemeScope(ScreenInner);\n"]}

package/dist/theme/useZoraTheme.d.ts

@@ -1,7 +1,7 @@
 export declare function useZoraTheme(): {
     theme: import("@ankhorage/surface").SurfaceTheme;
     mode: "light" | "dark";
-    setThemeConfig: (config: Partial<import("@ankhorage/surface").ThemeConfig>) => void;
+    setThemeConfig: (config: Partial<import("@ankhorage/contracts").ThemeConfig>) => void;
     setMode: (mode: "light" | "dark") => void;
     _hasProvider?: boolean;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "2.13.0",
+  "version": "2.13.1",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {
@@ -43,7 +43,7 @@
   "dependencies": {
     "@ankhorage/color-theory": "^0.0.8",
     "@ankhorage/contracts": "^7.6.0",
-    "@ankhorage/surface": "^2.2.0"
+    "@ankhorage/surface": "^2.2.1"
   },
   "files": [
     "dist",

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

@@ -0,0 +1,22 @@
+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

@@ -16,33 +16,32 @@ function ScreenInner({
   width = 'default',
   testID,
 }: ScreenProps) {
-  const content = (
-    <Container maxWidth={resolvePageMaxWidth(width)} py="xl" testID={testID}>
-      <Stack gap="l">
-        {children}
-        {footer}
-      </Stack>
-    </Container>
-  );
-
   if (!scroll) {
     return (
-      <Box bg="background" flex={1}>
-        {content}
+      <Box bg="background" flex={1} minHeight={0} minWidth={0} testID={testID}>
+        {children}
+        {footer}
       </Box>
     );
   }
 
   return (
-    <ScrollArea bg="background" style={{ flex: 1 }}>
-      {content}
+    <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>
   );
 }
 
-/***
- * Page-level container with standard background and optional scroll behavior.
+/**
+ * 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);