@ankhorage/zora 2.13.0 → 2.13.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 2.13.2
+
+### Patch Changes
+
+- 954029e: Add an explicit fill sizing mode to SidebarLayout so bounded shells can preserve child-owned
+  scrolling while existing content-flow layouts keep their current behavior.
+
+## 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/layout/sidebar-layout/SidebarLayout.d.ts

@@ -3,7 +3,9 @@ import type { SidebarLayoutProps } from './types';
 /***
  * 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 declare const SidebarLayout: (props: SidebarLayoutProps) => React.ReactElement | null;
 //# sourceMappingURL=SidebarLayout.d.ts.map

package/dist/layout/sidebar-layout/SidebarLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarLayout.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar-layout/SidebarLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAwBlD;;;;GAIG;AACH,eAAO,MAAM,aAAa,0DAAyC,CAAC"}
+{"version":3,"file":"SidebarLayout.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar-layout/SidebarLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAiClD;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,0DAAyC,CAAC"}

package/dist/layout/sidebar-layout/SidebarLayout.js

@@ -1,19 +1,27 @@
 import React from 'react';
 import { Box, Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-function SidebarLayoutInner({ themeId: _themeId, mode: _mode, interactionPolicy: _interactionPolicy, sidebar, children, aside, sidebarWidth = 280, asideWidth = 280, testID, }) {
-    return (<Stack direction={{ base: 'column', lg: 'row' }} gap="l" testID={testID} align="flex-start">
-      <Box width={{ base: '100%', lg: sidebarWidth }}>{sidebar}</Box>
-      <Box flex={1} width="100%">
+import { resolveSidebarLayoutSizing } from './resolveSidebarLayoutSizing';
+function SidebarLayoutInner({ themeId: _themeId, mode: _mode, interactionPolicy: _interactionPolicy, sidebar, children, aside, sidebarWidth = 280, asideWidth = 280, sizing, testID, }) {
+    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 width={{ base: '100%', lg: asideWidth }}>{aside}</Box> : null}
+      {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);
 //# sourceMappingURL=SidebarLayout.js.map

package/dist/layout/sidebar-layout/SidebarLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarLayout.js","sourceRoot":"","sources":["../../../src/layout/sidebar-layout/SidebarLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,kBAAkB,CAAC,EAC1B,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,iBAAiB,EAAE,kBAAkB,EACrC,OAAO,EACP,QAAQ,EACR,KAAK,EACL,YAAY,GAAG,GAAG,EAClB,UAAU,GAAG,GAAG,EAChB,MAAM,GACa;IACnB,OAAO,CACL,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,YAAY,CACzF;MAAA,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,CAC9D;MAAA,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CACxB;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAC7E;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,kBAAkB,CAAC,kBAAkB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Box, Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { SidebarLayoutProps } from './types';\n\nfunction SidebarLayoutInner({\n  themeId: _themeId,\n  mode: _mode,\n  interactionPolicy: _interactionPolicy,\n  sidebar,\n  children,\n  aside,\n  sidebarWidth = 280,\n  asideWidth = 280,\n  testID,\n}: SidebarLayoutProps) {\n  return (\n    <Stack direction={{ base: 'column', lg: 'row' }} gap=\"l\" testID={testID} align=\"flex-start\">\n      <Box width={{ base: '100%', lg: sidebarWidth }}>{sidebar}</Box>\n      <Box flex={1} width=\"100%\">\n        {children}\n      </Box>\n      {aside ? <Box width={{ base: '100%', lg: asideWidth }}>{aside}</Box> : null}\n    </Stack>\n  );\n}\n\n/***\n * Responsive layout with a sidebar and main content area (and optional aside).\n *\n \n */\nexport const SidebarLayout = withZoraThemeScope(SidebarLayoutInner);\n"]}
+{"version":3,"file":"SidebarLayout.js","sourceRoot":"","sources":["../../../src/layout/sidebar-layout/SidebarLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAG1E,SAAS,kBAAkB,CAAC,EAC1B,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,iBAAiB,EAAE,kBAAkB,EACrC,OAAO,EACP,QAAQ,EACR,KAAK,EACL,YAAY,GAAG,GAAG,EAClB,UAAU,GAAG,GAAG,EAChB,MAAM,EACN,MAAM,GACa;IACnB,MAAM,YAAY,GAAG,0BAA0B,CAAC,MAAM,CAAC,CAAC;IAExD,OAAO,CACL,CAAC,KAAK,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAC7F;MAAA,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,YAAY,EAAE,CAAC,CACrE;QAAA,CAAC,OAAO,CACV;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAChD;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,UAAU,EAAE,CAAC,CACnE;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,GAAG,CAAC,CACP,CAAC,CAAC,CAAC,IAAI,CACV;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,kBAAkB,CAAC,kBAAkB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Box, Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { resolveSidebarLayoutSizing } from './resolveSidebarLayoutSizing';\nimport type { SidebarLayoutProps } from './types';\n\nfunction SidebarLayoutInner({\n  themeId: _themeId,\n  mode: _mode,\n  interactionPolicy: _interactionPolicy,\n  sidebar,\n  children,\n  aside,\n  sidebarWidth = 280,\n  asideWidth = 280,\n  sizing,\n  testID,\n}: SidebarLayoutProps) {\n  const layoutSizing = resolveSidebarLayoutSizing(sizing);\n\n  return (\n    <Stack {...layoutSizing.root} direction={{ base: 'column', lg: 'row' }} gap=\"l\" testID={testID}>\n      <Box {...layoutSizing.child} width={{ base: '100%', lg: sidebarWidth }}>\n        {sidebar}\n      </Box>\n      <Box {...layoutSizing.child} flex={1} width=\"100%\">\n        {children}\n      </Box>\n      {aside ? (\n        <Box {...layoutSizing.child} width={{ base: '100%', lg: asideWidth }}>\n          {aside}\n        </Box>\n      ) : null}\n    </Stack>\n  );\n}\n\n/***\n * Responsive layout with a sidebar and main content area (and optional aside).\n *\n * `sizing=\"content\"` keeps normal content-flow behavior. Use `sizing=\"fill\"` when the layout\n * should fill an already bounded parent so sidebar/content children receive the available space\n * for their own scrolling or gesture ownership.\n */\nexport const SidebarLayout = withZoraThemeScope(SidebarLayoutInner);\n"]}

package/dist/layout/sidebar-layout/resolveSidebarLayoutSizing.d.ts

@@ -0,0 +1,14 @@
+import type { SidebarLayoutSizing } from './types';
+export declare function resolveSidebarLayoutSizing(sizing?: SidebarLayoutSizing): {
+    readonly root: {
+        readonly align: "flex-start" | "stretch";
+        readonly flex: 1 | undefined;
+        readonly minHeight: 0 | undefined;
+        readonly minWidth: 0 | undefined;
+    };
+    readonly child: {
+        readonly minHeight: 0 | undefined;
+        readonly minWidth: 0 | undefined;
+    };
+};
+//# sourceMappingURL=resolveSidebarLayoutSizing.d.ts.map

package/dist/layout/sidebar-layout/resolveSidebarLayoutSizing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveSidebarLayoutSizing.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar-layout/resolveSidebarLayoutSizing.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD,wBAAgB,0BAA0B,CAAC,MAAM,GAAE,mBAA+B;;;;;;;;;;;EAejF"}

package/dist/layout/sidebar-layout/resolveSidebarLayoutSizing.js

@@ -0,0 +1,16 @@
+export function resolveSidebarLayoutSizing(sizing = '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,
+        },
+    };
+}
+//# sourceMappingURL=resolveSidebarLayoutSizing.js.map

package/dist/layout/sidebar-layout/resolveSidebarLayoutSizing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveSidebarLayoutSizing.js","sourceRoot":"","sources":["../../../src/layout/sidebar-layout/resolveSidebarLayoutSizing.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,0BAA0B,CAAC,SAA8B,SAAS;IAChF,MAAM,mBAAmB,GAAG,MAAM,KAAK,MAAM,CAAC;IAE9C,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY;YACrD,IAAI,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;YACzC,SAAS,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;YAC9C,QAAQ,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;SAC9C;QACD,KAAK,EAAE;YACL,SAAS,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;YAC9C,QAAQ,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;SAC9C;KACO,CAAC;AACb,CAAC","sourcesContent":["import type { SidebarLayoutSizing } from './types';\n\nexport function resolveSidebarLayoutSizing(sizing: SidebarLayoutSizing = 'content') {\n  const fillsAvailableSpace = sizing === 'fill';\n\n  return {\n    root: {\n      align: fillsAvailableSpace ? 'stretch' : 'flex-start',\n      flex: fillsAvailableSpace ? 1 : undefined,\n      minHeight: fillsAvailableSpace ? 0 : undefined,\n      minWidth: fillsAvailableSpace ? 0 : undefined,\n    },\n    child: {\n      minHeight: fillsAvailableSpace ? 0 : undefined,\n      minWidth: fillsAvailableSpace ? 0 : undefined,\n    },\n  } as const;\n}\n"]}

package/dist/layout/sidebar-layout/types.d.ts

@@ -1,10 +1,12 @@
 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;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/layout/sidebar-layout/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar-layout/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,kBAAmB,SAAQ,aAAa;IACvD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/layout/sidebar-layout/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAC;AAErD,MAAM,WAAW,kBAAmB,SAAQ,aAAa;IACvD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,mBAAmB,CAAC;CAC9B"}

package/dist/layout/sidebar-layout/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/layout/sidebar-layout/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface SidebarLayoutProps extends ZoraBaseProps {\n  sidebar: React.ReactNode;\n  children?: React.ReactNode;\n  aside?: React.ReactNode;\n  sidebarWidth?: number;\n  asideWidth?: number;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/layout/sidebar-layout/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport type SidebarLayoutSizing = 'content' | 'fill';\n\nexport interface SidebarLayoutProps extends ZoraBaseProps {\n  sidebar: React.ReactNode;\n  children?: React.ReactNode;\n  aside?: React.ReactNode;\n  sidebarWidth?: number;\n  asideWidth?: number;\n  sizing?: SidebarLayoutSizing;\n}\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.2",
   "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);

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

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

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { Box, Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { resolveSidebarLayoutSizing } from './resolveSidebarLayoutSizing';
 import type { SidebarLayoutProps } from './types';
 
 function SidebarLayoutInner({
@@ -13,15 +14,24 @@ function SidebarLayoutInner({
   aside,
   sidebarWidth = 280,
   asideWidth = 280,
+  sizing,
   testID,
 }: SidebarLayoutProps) {
+  const layoutSizing = resolveSidebarLayoutSizing(sizing);
+
   return (
-    <Stack direction={{ base: 'column', lg: 'row' }} gap="l" testID={testID} align="flex-start">
-      <Box width={{ base: '100%', lg: sidebarWidth }}>{sidebar}</Box>
-      <Box flex={1} width="100%">
+    <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 width={{ base: '100%', lg: asideWidth }}>{aside}</Box> : null}
+      {aside ? (
+        <Box {...layoutSizing.child} width={{ base: '100%', lg: asideWidth }}>
+          {aside}
+        </Box>
+      ) : null}
     </Stack>
   );
 }
@@ -29,6 +39,8 @@ function SidebarLayoutInner({
 /***
  * 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/resolveSidebarLayoutSizing.ts

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

@@ -2,10 +2,13 @@ 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;
 }