@ankhorage/zora 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.5.0
+
+### Minor Changes
+
+- e33b114: feat(zora): redesign AppShell as structural root layout with header/footer/overlay slots
+
+## 0.4.1
+
+### Patch Changes
+
+- 37681ac: Update README.md with CheckboxGroup & RadioGroup
+
 ## 0.4.0
 
 ### Minor Changes

package/README.md

@@ -525,25 +525,47 @@ Picks these Surface `DrawerProps`: `closeOnBackdrop`, `onDismiss`, `position`,
 
 ### `AppShell`
 
-Theme-aware application root shell with optional topbar and full-height content
-area. Use it as the outer app chrome inside `ZoraProvider`.
+Theme-aware application root shell providing the structural frame for an app.
+It defines the top-level layout slots (`header`, `body`, `footer`, `overlay`)
+and ensures a full-height, flexible container.
+
+Use it as the outer layout inside `ZoraProvider`. Combine it with layout
+primitives like `SidebarLayout` or `Page` to structure inner content.
 
 ```tsx
-<AppShell topbar={<Toolbar position="inline">{actions}</Toolbar>}>
+<AppShell
+  header={<Toolbar position="inline">{actions}</Toolbar>}
+  footer={<BottomBar />}
+>
   <Page header={<PageHeader title="Dashboard" />}>{content}</Page>
 </AppShell>
 ```
 
+Example with overlay (e.g. mobile panel or drawer):
+
+```tsx
+<AppShell
+  footer={<BottomBar />}
+  overlay={isOpen ? <MyDrawer onClose={close} /> : null}
+>
+  {content}
+</AppShell>
+```
+
 <details>
 <summary>Props</summary>
 
 ZORA props:
 
-| Prop | Type | Default | Notes |
-| --- | --- | --- | --- |
-| `children` | `React.ReactNode` | - | Main app content. |
-| `topbar` | `React.ReactNode` | - | Optional top app bar rendered above content. |
-| `testID` | `string` | - | Forwarded to the root Surface background container. |
+| Prop        | Type                   | Default | Notes                                                                                |
+| ----------- | ---------------------- | ------- | ------------------------------------------------------------------------------------ |
+| `children`  | `React.ReactNode`      | -       | Main application content.                                                            |
+| `header`    | `React.ReactNode`      | -       | Optional top section (e.g. toolbar or navigation).                                   |
+| `footer`    | `React.ReactNode`      | -       | Optional bottom section (e.g. tab bar or actions).                                   |
+| `overlay`   | `React.ReactNode`      | -       | Optional overlay layer rendered above content (e.g. drawer, modal, floating panels). |
+| `style`     | `StyleProp<ViewStyle>` | -       | Style applied to the root container.                                                 |
+| `bodyStyle` | `StyleProp<ViewStyle>` | -       | Style applied to the main content container.                                         |
+| `testID`    | `string`               | -       | Forwarded to the root Surface container.                                             |
 
 Inherited props:
 
@@ -551,6 +573,21 @@ No inherited props. `AppShellProps` is declared directly by ZORA.
 
 </details>
 
+---
+
+### Design notes
+
+- `AppShell` is a **structural primitive**, not a page layout.
+
+- It does **not manage sidebars or content splits** — use `SidebarLayout` for that.
+
+- It does **not provide theming** — wrap with `ZoraProvider`.
+
+- `overlay` is rendered using absolute positioning and should be used for
+  drawers, mobile panels, or floating UI.
+
+- All inner content must support flexible layouts (`flex: 1`, `minHeight: 0`)
+  to behave correctly inside the shell.
 
 ### `Page`
 

package/dist/layout/app-shell/AppShell.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { AppShellProps } from './types';
-export declare function AppShell({ children, topbar, testID }: AppShellProps): React.JSX.Element;
+export declare function AppShell({ children, header, footer, overlay, style, bodyStyle, testID, }: AppShellProps): React.JSX.Element;
 //# sourceMappingURL=AppShell.d.ts.map

package/dist/layout/app-shell/AppShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/layout/app-shell/AppShell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,aAAa,qBASnE"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/layout/app-shell/AppShell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,MAAM,EACN,MAAM,EACN,OAAO,EACP,KAAK,EACL,SAAS,EACT,MAAM,GACP,EAAE,aAAa,qBAkBf"}

package/dist/layout/app-shell/AppShell.js

@@ -1,11 +1,38 @@
-import { Box, Stack } from '@ankhorage/surface';
+import { Box } from '@ankhorage/surface';
 import React from 'react';
-export function AppShell({ children, topbar, testID }) {
-    return (<Box bg="background" flex={1} testID={testID}>
-      <Stack gap="none">
-        {topbar ? <Box>{topbar}</Box> : null}
-        <Box flex={1}>{children}</Box>
-      </Stack>
+import { StyleSheet, View } from 'react-native';
+export function AppShell({ children, header, footer, overlay, style, bodyStyle, testID, }) {
+    return (<Box bg="background" flex={1} style={style} testID={testID}>
+      <View style={styles.root}>
+        {header ? <View style={styles.slot}>{header}</View> : null}
+
+        <View style={[styles.body, bodyStyle]}>{children}</View>
+
+        {footer ? <View style={styles.slot}>{footer}</View> : null}
+
+        {overlay ? (<View pointerEvents="box-none" style={styles.overlay}>
+            {overlay}
+          </View>) : null}
+      </View>
     </Box>);
 }
+const styles = StyleSheet.create({
+    root: {
+        flex: 1,
+        minHeight: 0,
+        position: 'relative',
+    },
+    body: {
+        flex: 1,
+        minHeight: 0,
+        minWidth: 0,
+    },
+    slot: {
+        flexShrink: 0,
+    },
+    overlay: {
+        ...StyleSheet.absoluteFillObject,
+        zIndex: 10,
+    },
+});
 //# sourceMappingURL=AppShell.js.map

package/dist/layout/app-shell/AppShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../src/layout/app-shell/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,UAAU,QAAQ,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAiB;IAClE,OAAO,CACL,CAAC,GAAG,CAAC,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAC3C;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CACf;QAAA,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CACpC;QAAA,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,GAAG,CAC/B;MAAA,EAAE,KAAK,CACT;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { Box, Stack } from '@ankhorage/surface';\nimport React from 'react';\n\nimport type { AppShellProps } from './types';\n\nexport function AppShell({ children, topbar, testID }: AppShellProps) {\n  return (\n    <Box bg=\"background\" flex={1} testID={testID}>\n      <Stack gap=\"none\">\n        {topbar ? <Box>{topbar}</Box> : null}\n        <Box flex={1}>{children}</Box>\n      </Stack>\n    </Box>\n  );\n}\n"]}
+{"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../src/layout/app-shell/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIhD,MAAM,UAAU,QAAQ,CAAC,EACvB,QAAQ,EACR,MAAM,EACN,MAAM,EACN,OAAO,EACP,KAAK,EACL,SAAS,EACT,MAAM,GACQ;IACd,OAAO,CACL,CAAC,GAAG,CAAC,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CACzD;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CACvB;QAAA,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAE1D;;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CAEvD;;QAAA,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAE1D;;QAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CACT,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CACnD;YAAA,CAAC,OAAO,CACV;UAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACV;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,IAAI,EAAE;QACJ,IAAI,EAAE,CAAC;QACP,SAAS,EAAE,CAAC;QACZ,QAAQ,EAAE,UAAU;KACrB;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,CAAC;QACP,SAAS,EAAE,CAAC;QACZ,QAAQ,EAAE,CAAC;KACZ;IACD,IAAI,EAAE;QACJ,UAAU,EAAE,CAAC;KACd;IACD,OAAO,EAAE;QACP,GAAG,UAAU,CAAC,kBAAkB;QAChC,MAAM,EAAE,EAAE;KACX;CACF,CAAC,CAAC","sourcesContent":["import { Box } from '@ankhorage/surface';\nimport React from 'react';\nimport { StyleSheet, View } from 'react-native';\n\nimport type { AppShellProps } from './types';\n\nexport function AppShell({\n  children,\n  header,\n  footer,\n  overlay,\n  style,\n  bodyStyle,\n  testID,\n}: AppShellProps) {\n  return (\n    <Box bg=\"background\" flex={1} style={style} testID={testID}>\n      <View style={styles.root}>\n        {header ? <View style={styles.slot}>{header}</View> : null}\n\n        <View style={[styles.body, bodyStyle]}>{children}</View>\n\n        {footer ? <View style={styles.slot}>{footer}</View> : null}\n\n        {overlay ? (\n          <View pointerEvents=\"box-none\" style={styles.overlay}>\n            {overlay}\n          </View>\n        ) : null}\n      </View>\n    </Box>\n  );\n}\n\nconst styles = StyleSheet.create({\n  root: {\n    flex: 1,\n    minHeight: 0,\n    position: 'relative',\n  },\n  body: {\n    flex: 1,\n    minHeight: 0,\n    minWidth: 0,\n  },\n  slot: {\n    flexShrink: 0,\n  },\n  overlay: {\n    ...StyleSheet.absoluteFillObject,\n    zIndex: 10,\n  },\n});\n"]}

package/dist/layout/app-shell/types.d.ts

@@ -1,7 +1,12 @@
 import type React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 export interface AppShellProps {
     children?: React.ReactNode;
-    topbar?: React.ReactNode;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    overlay?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    bodyStyle?: StyleProp<ViewStyle>;
     testID?: string;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/layout/app-shell/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/layout/app-shell/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/layout/app-shell/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/layout/app-shell/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/layout/app-shell/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nexport interface AppShellProps {\n  children?: React.ReactNode;\n  topbar?: React.ReactNode;\n  testID?: string;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/layout/app-shell/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nexport interface AppShellProps {\n  children?: React.ReactNode;\n  header?: React.ReactNode;\n  footer?: React.ReactNode;\n  overlay?: React.ReactNode;\n  style?: StyleProp<ViewStyle>;\n  bodyStyle?: StyleProp<ViewStyle>;\n  testID?: string;\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {

package/src/layout/app-shell/AppShell.tsx

@@ -1,15 +1,53 @@
-import { Box, Stack } from '@ankhorage/surface';
+import { Box } from '@ankhorage/surface';
 import React from 'react';
+import { StyleSheet, View } from 'react-native';
 
 import type { AppShellProps } from './types';
 
-export function AppShell({ children, topbar, testID }: AppShellProps) {
+export function AppShell({
+  children,
+  header,
+  footer,
+  overlay,
+  style,
+  bodyStyle,
+  testID,
+}: AppShellProps) {
   return (
-    <Box bg="background" flex={1} testID={testID}>
-      <Stack gap="none">
-        {topbar ? <Box>{topbar}</Box> : null}
-        <Box flex={1}>{children}</Box>
-      </Stack>
+    <Box bg="background" flex={1} style={style} testID={testID}>
+      <View style={styles.root}>
+        {header ? <View style={styles.slot}>{header}</View> : null}
+
+        <View style={[styles.body, bodyStyle]}>{children}</View>
+
+        {footer ? <View style={styles.slot}>{footer}</View> : null}
+
+        {overlay ? (
+          <View pointerEvents="box-none" style={styles.overlay}>
+            {overlay}
+          </View>
+        ) : null}
+      </View>
     </Box>
   );
 }
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    minHeight: 0,
+    position: 'relative',
+  },
+  body: {
+    flex: 1,
+    minHeight: 0,
+    minWidth: 0,
+  },
+  slot: {
+    flexShrink: 0,
+  },
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 10,
+  },
+});

package/src/layout/app-shell/types.ts

@@ -1,7 +1,12 @@
 import type React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 
 export interface AppShellProps {
   children?: React.ReactNode;
-  topbar?: React.ReactNode;
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+  overlay?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  bodyStyle?: StyleProp<ViewStyle>;
   testID?: string;
 }