@newtonedev/components 0.1.21 → 0.1.22

package/dist/layout/Page/Page.d.ts

@@ -1,30 +1,20 @@
 import React from 'react';
 import type { PageProps } from './Page.types';
 /**
- * Page — Full-viewport layout root with optional navbar and sidebar slots.
+ * Page — Full-viewport layout root with optional layout slots.
  *
  * Page fills the full screen height and arranges layout regions:
- * - Navbar at the top (outside scroll)
- * - Sidebar to the left of the main content
+ * - NavHeader pinned at the top of the navigation column (brand/logo)
+ * - NavContent to the left of the main content (scrollable nav)
+ * - NavFooter pinned at the bottom of the navigation column (user menu, sign out)
+ * - Header sticky at the top of the content area
  * - Children fill the remaining space (typically a Viewport)
+ * - Footer pinned at the bottom of the content area
  *
- * When a `scheme` prop is provided, Page activates that scheme from the
- * parent NewtoneProvider so all descendants receive the scheme's config.
- *
- * Page is invisible — no background, border, or shadow.
- *
- * @example
- * ```tsx
- * <Page navbar={<Nav />}>
- *   <Viewport>
- *     <Section size="sm" fill>
- *       <Frame elevation={1} padding={32}>
- *         <Text>Centered content</Text>
- *       </Frame>
- *     </Section>
- *   </Viewport>
- * </Page>
- * ```
+ * Panels are separated by 1px gaps that reveal the root background
+ * (divider color), rather than borders. The navigation column uses a
+ * sunken (elevation -1) background; the content area uses grounded
+ * (elevation 0).
  */
-export declare function Page({ children, scheme, navbar, sidebar, testID, nativeID, ref, style, }: PageProps): React.JSX.Element;
+export declare function Page({ children, scheme, header, navHeader, navFooter, footer, navContent, testID, nativeID, ref, style, }: PageProps): React.JSX.Element;
 //# sourceMappingURL=Page.d.ts.map

package/dist/layout/Page/Page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../../src/layout/Page/Page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAkB9C;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,MAAM,EACN,MAAM,EACN,OAAO,EACP,MAAM,EACN,QAAQ,EACR,GAAG,EACH,KAAK,GACN,EAAE,SAAS,qBA+CX"}
+{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../../src/layout/Page/Page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAyC9C;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,MAAM,EACN,MAAM,EACN,SAAS,EACT,SAAS,EACT,MAAM,EACN,UAAU,EACV,MAAM,EACN,QAAQ,EACR,GAAG,EACH,KAAK,GACN,EAAE,SAAS,qBAyGX"}

package/dist/layout/Page/Page.types.d.ts

@@ -3,14 +3,13 @@ import type { View, ViewStyle } from 'react-native';
  * Props for Page — the outermost layout container for a screen.
  *
  * Page fills the full viewport height and arranges optional layout slots:
- * navbar (top), sidebar (left), and children (main content area).
- * It can also activate a scheme from the parent NewtoneProvider.
- *
- * Page is invisible — no background, border, or shadow.
+ * header (top), navigation column (left with navHeader + navContent),
+ * and children (main content area). It can also activate a scheme from
+ * the parent NewtoneProvider.
  *
  * @example
  * ```tsx
- * <Page navbar={<Nav />}>
+ * <Page header={<Nav />}>
  *   <Viewport>
  *     <Section size="md">
  *       <Text>Page content</Text>
@@ -21,7 +20,7 @@ import type { View, ViewStyle } from 'react-native';
  *
  * @example
  * ```tsx
- * <Page scheme="vibrant" sidebar={<Sidebar />}>
+ * <Page scheme="vibrant" navContent={<Sidebar />}>
  *   <Viewport>
  *     <Section size="lg">
  *       <Text>Dashboard content</Text>
@@ -39,15 +38,30 @@ export interface PageProps {
      */
     readonly scheme?: string;
     /**
-     * Navbar element rendered at the top, outside the scrollable area.
-     * The navbar's height is determined by its own content.
+     * Header element rendered at the top of the content area (sticky).
+     * The header's height is determined by its own content.
+     */
+    readonly header?: React.ReactNode;
+    /**
+     * Nav header element pinned at the top of the navigation column.
+     * Sits above the navContent and does not scroll. Use for brand/logo.
+     */
+    readonly navHeader?: React.ReactNode;
+    /**
+     * Footer element rendered at the bottom of the content area.
+     * Pinned below the Viewport — does not scroll with content.
+     */
+    readonly footer?: React.ReactNode;
+    /**
+     * Navigation content element rendered in the navigation column.
+     * Typically a Sidebar component with scrollable nav items.
      */
-    readonly navbar?: React.ReactNode;
+    readonly navContent?: React.ReactNode;
     /**
-     * Sidebar element rendered to the left of the main content area.
-     * The sidebar manages its own width and scroll behavior.
+     * Nav footer element pinned at the bottom of the navigation column.
+     * Does not scroll. Use for user menu, settings, sign out, etc.
      */
-    readonly sidebar?: React.ReactNode;
+    readonly navFooter?: React.ReactNode;
     /** Test identifier — maps to `data-testid` on web. */
     readonly testID?: string;
     /** DOM id — maps to `id` attribute on web. */

package/dist/layout/Page/Page.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Page.types.d.ts","sourceRoot":"","sources":["../../../src/layout/Page/Page.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,WAAW,SAAS;IACxB,gDAAgD;IAChD,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEpC;;;OAGG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAElC;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAInC,sDAAsD;IACtD,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEzB,8CAA8C;IAC9C,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE3B,0CAA0C;IAC1C,QAAQ,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAE/B,8DAA8D;IAC9D,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAC1C"}
+{"version":3,"file":"Page.types.d.ts","sourceRoot":"","sources":["../../../src/layout/Page/Page.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,WAAW,SAAS;IACxB,gDAAgD;IAChD,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEpC;;;OAGG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAElC;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAErC;;;OAGG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAElC;;;OAGG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEtC;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAIrC,sDAAsD;IACtD,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEzB,8CAA8C;IAC9C,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE3B,0CAA0C;IAC1C,QAAQ,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAE/B,8DAA8D;IAC9D,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAC1C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newtonedev/components",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "description": "React + React Native Web component library for Newtone",
   "license": "MIT",
   "repository": {

package/src/composites/layout/ContentCard/ContentCard.tsx

@@ -55,9 +55,6 @@ export function ContentCard({
     <Frame
       elevation={variant === 'elevated' ? 2 : undefined}
       appearance={variant === 'elevated' ? 'tinted' : undefined}
-      href={href}
-      onPress={onPress}
-      disabled={disabled}
       padding={padding}
       gap={gap}
       style={[

package/src/composites/layout/Sidebar/Sidebar.styles.ts

@@ -1,39 +1,21 @@
 import { StyleSheet } from 'react-native';
-import type { ResolvedTokens, AppearanceTokens, ThemeName, AppearanceName } from 'newtone-api';
 
 interface SidebarStyleInput {
-  readonly tokens: ResolvedTokens;
   readonly width: number;
-  readonly bordered: boolean;
-  readonly theme?: ThemeName;
-  readonly appearance?: AppearanceName;
 }
 
-export function getSidebarStyles({ tokens, width, bordered, theme = 'primary', appearance = 'main' }: SidebarStyleInput) {
-  const at: AppearanceTokens = tokens.colors[theme][appearance];
-  const borderColor = at.fontSecondary;
-
+export function getSidebarStyles({ width }: SidebarStyleInput) {
   return StyleSheet.create({
     container: {
       width,
       flexShrink: 0,
       flexDirection: 'column',
-      backgroundColor: at.background,
-      borderRightWidth: bordered ? 1 : 0,
-      borderRightColor: borderColor,
-    },
-    header: {
-      flexShrink: 0,
-      borderBottomWidth: 1,
-      borderBottomColor: borderColor,
     },
     body: {
       flex: 1,
     },
     footer: {
       flexShrink: 0,
-      borderTopWidth: 1,
-      borderTopColor: borderColor,
     },
   });
 }

package/src/composites/layout/Sidebar/Sidebar.tsx

@@ -1,27 +1,31 @@
 import React from 'react';
-import { View, ScrollView } from 'react-native';
+import { View, ScrollView, StyleSheet } from 'react-native';
 import type { SidebarProps } from './Sidebar.types';
-import { useTokens, useFrameContext } from 'newtone-api';
-import { getSidebarStyles } from './Sidebar.styles';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+  },
+  body: {
+    flex: 1,
+    padding: 8,
+  },
+  bodyContent: {
+    gap: 8,
+  },
+  footer: {
+    flexShrink: 0,
+  },
+});
 
 export function Sidebar({
   children,
-  header,
   footer,
-  width = 260,
-  bordered = true,
 }: SidebarProps) {
-  const tokens = useTokens();
-  const frameCtx = useFrameContext();
-  const styles = React.useMemo(
-    () => getSidebarStyles({ tokens, width, bordered, theme: frameCtx?.theme, appearance: frameCtx?.appearance }),
-    [tokens, width, bordered, frameCtx?.theme, frameCtx?.appearance]
-  );
-
   return (
     <View style={styles.container}>
-      {header && <View style={styles.header}>{header}</View>}
-      <ScrollView style={styles.body}>{children}</ScrollView>
+      <ScrollView style={styles.body} contentContainerStyle={styles.bodyContent}>{children}</ScrollView>
       {footer && <View style={styles.footer}>{footer}</View>}
     </View>
   );

package/src/composites/layout/Sidebar/Sidebar.types.ts

@@ -3,12 +3,6 @@ import type { ReactNode } from 'react';
 export interface SidebarProps {
   /** Scrollable body content (navigation items, etc.) */
   readonly children?: ReactNode;
-  /** Sticky header slot (logo, brand) */
-  readonly header?: ReactNode;
   /** Sticky footer slot (user menu, settings) */
   readonly footer?: ReactNode;
-  /** Fixed width in pixels. @default 260 */
-  readonly width?: number;
-  /** Show right border. @default true */
-  readonly bordered?: boolean;
 }

package/src/layout/Page/Page.tsx

@@ -1,54 +1,70 @@
 import React, { useMemo } from 'react';
 import { Platform, View, StyleSheet } from 'react-native';
 import type { PageProps } from './Page.types';
-import { useNewtoneTheme, _ThemeContext } from 'newtone-api';
+import { useNewtoneTheme, _ThemeContext, computeTokens } from 'newtone-api';
 
-const styles = StyleSheet.create({
+const baseStyles = StyleSheet.create({
   root: {
     flex: 1,
+    flexDirection: 'row',
+    ...(Platform.OS === 'web'
+      ? { height: '100vh' as unknown as number, overflow: 'hidden' as any }
+      : {}),
+  },
+  navigation: {
+    width: 256,
+    flexShrink: 0,
     flexDirection: 'column',
-    ...(Platform.OS === 'web' ? { minHeight: '100vh' as unknown as number } : {}),
+    overflow: 'hidden' as any,
   },
-  body: {
-    flex: 1,
-    flexDirection: 'row',
+  navHeader: {
+    flexShrink: 0,
+    height: 64,
   },
   content: {
     flex: 1,
+    flexDirection: 'column',
+    overflow: 'hidden' as any,
+  },
+  header: {
+    flexShrink: 0,
+    height: 64,
+    ...(Platform.OS === 'web'
+      ? { position: 'sticky' as any, top: 0, zIndex: 10 }
+      : {}),
+  },
+  navFooter: {
+    flexShrink: 0,
+  },
+  footer: {
+    flexShrink: 0,
   },
 });
 
 /**
- * Page — Full-viewport layout root with optional navbar and sidebar slots.
+ * Page — Full-viewport layout root with optional layout slots.
  *
  * Page fills the full screen height and arranges layout regions:
- * - Navbar at the top (outside scroll)
- * - Sidebar to the left of the main content
+ * - NavHeader pinned at the top of the navigation column (brand/logo)
+ * - NavContent to the left of the main content (scrollable nav)
+ * - NavFooter pinned at the bottom of the navigation column (user menu, sign out)
+ * - Header sticky at the top of the content area
  * - Children fill the remaining space (typically a Viewport)
+ * - Footer pinned at the bottom of the content area
  *
- * When a `scheme` prop is provided, Page activates that scheme from the
- * parent NewtoneProvider so all descendants receive the scheme's config.
- *
- * Page is invisible — no background, border, or shadow.
- *
- * @example
- * ```tsx
- * <Page navbar={<Nav />}>
- *   <Viewport>
- *     <Section size="sm" fill>
- *       <Frame elevation={1} padding={32}>
- *         <Text>Centered content</Text>
- *       </Frame>
- *     </Section>
- *   </Viewport>
- * </Page>
- * ```
+ * Panels are separated by 1px gaps that reveal the root background
+ * (divider color), rather than borders. The navigation column uses a
+ * sunken (elevation -1) background; the content area uses grounded
+ * (elevation 0).
  */
 export function Page({
   children,
   scheme,
-  navbar,
-  sidebar,
+  header,
+  navHeader,
+  navFooter,
+  footer,
+  navContent,
   testID,
   nativeID,
   ref,
@@ -69,6 +85,41 @@ export function Page({
     };
   }, [scheme, themeCtx]);
 
+  const resolvedConfig = schemeThemeCtx?.config ?? themeCtx.config;
+  const { mode, gamut } = themeCtx;
+
+  // Compute tokens at sunken (elevation -1) and grounded (elevation 0)
+  // to derive panel backgrounds and the divider gap color.
+  const { dividerBg, sunkenBg, groundedBg } = useMemo(() => {
+    const groundedTokens = computeTokens(
+      resolvedConfig.colorSystem,
+      mode,
+      gamut,
+      'grounded',
+      resolvedConfig.spacing,
+      resolvedConfig.radius,
+      resolvedConfig.typography,
+      resolvedConfig.icons,
+      resolvedConfig.themeMappings,
+    );
+    const sunkenTokens = computeTokens(
+      resolvedConfig.colorSystem,
+      mode,
+      gamut,
+      'sunken',
+      resolvedConfig.spacing,
+      resolvedConfig.radius,
+      resolvedConfig.typography,
+      resolvedConfig.icons,
+      resolvedConfig.themeMappings,
+    );
+    return {
+      dividerBg: groundedTokens.colors.primary.main.divider,
+      sunkenBg: sunkenTokens.colors.primary.main.background,
+      groundedBg: groundedTokens.colors.primary.main.background,
+    };
+  }, [resolvedConfig, mode, gamut]);
+
   const userStyles = Array.isArray(style) ? style : style ? [style] : [];
 
   const content = (
@@ -77,17 +128,40 @@ export function Page({
       testID={testID}
       nativeID={nativeID}
       accessibilityRole="none"
-      style={[styles.root, ...userStyles]}
+      style={[baseStyles.root, { backgroundColor: dividerBg, gap: 1 } as any, ...userStyles]}
     >
-      {navbar}
-      {sidebar ? (
-        <View style={styles.body}>
-          {sidebar}
-          <View style={styles.content}>{children}</View>
+      {(navHeader || navContent || navFooter) ? (
+        <View style={[baseStyles.navigation, { backgroundColor: dividerBg, gap: 1 } as any]}>
+          {navHeader ? (
+            <View style={[baseStyles.navHeader, { backgroundColor: sunkenBg }]}>
+              {navHeader}
+            </View>
+          ) : null}
+          <View style={{ flex: 1, backgroundColor: sunkenBg, overflow: 'hidden' as any }}>
+            {navContent}
+          </View>
+          {navFooter ? (
+            <View style={[baseStyles.navFooter, { backgroundColor: sunkenBg }]}>
+              {navFooter}
+            </View>
+          ) : null}
+        </View>
+      ) : null}
+      <View style={[baseStyles.content, { backgroundColor: dividerBg, gap: 1 } as any]}>
+        {header ? (
+          <View style={[baseStyles.header, { backgroundColor: groundedBg }]}>
+            {header}
+          </View>
+        ) : null}
+        <View style={{ flex: 1, backgroundColor: groundedBg, overflow: 'hidden' as any }}>
+          {children}
         </View>
-      ) : (
-        children
-      )}
+        {footer ? (
+          <View style={[baseStyles.footer, { backgroundColor: groundedBg }]}>
+            {footer}
+          </View>
+        ) : null}
+      </View>
     </View>
   );
 

package/src/layout/Page/Page.types.ts

@@ -4,14 +4,13 @@ import type { View, ViewStyle } from 'react-native';
  * Props for Page — the outermost layout container for a screen.
  *
  * Page fills the full viewport height and arranges optional layout slots:
- * navbar (top), sidebar (left), and children (main content area).
- * It can also activate a scheme from the parent NewtoneProvider.
- *
- * Page is invisible — no background, border, or shadow.
+ * header (top), navigation column (left with navHeader + navContent),
+ * and children (main content area). It can also activate a scheme from
+ * the parent NewtoneProvider.
  *
  * @example
  * ```tsx
- * <Page navbar={<Nav />}>
+ * <Page header={<Nav />}>
  *   <Viewport>
  *     <Section size="md">
  *       <Text>Page content</Text>
@@ -22,7 +21,7 @@ import type { View, ViewStyle } from 'react-native';
  *
  * @example
  * ```tsx
- * <Page scheme="vibrant" sidebar={<Sidebar />}>
+ * <Page scheme="vibrant" navContent={<Sidebar />}>
  *   <Viewport>
  *     <Section size="lg">
  *       <Text>Dashboard content</Text>
@@ -42,16 +41,34 @@ export interface PageProps {
   readonly scheme?: string;
 
   /**
-   * Navbar element rendered at the top, outside the scrollable area.
-   * The navbar's height is determined by its own content.
+   * Header element rendered at the top of the content area (sticky).
+   * The header's height is determined by its own content.
+   */
+  readonly header?: React.ReactNode;
+
+  /**
+   * Nav header element pinned at the top of the navigation column.
+   * Sits above the navContent and does not scroll. Use for brand/logo.
+   */
+  readonly navHeader?: React.ReactNode;
+
+  /**
+   * Footer element rendered at the bottom of the content area.
+   * Pinned below the Viewport — does not scroll with content.
+   */
+  readonly footer?: React.ReactNode;
+
+  /**
+   * Navigation content element rendered in the navigation column.
+   * Typically a Sidebar component with scrollable nav items.
    */
-  readonly navbar?: React.ReactNode;
+  readonly navContent?: React.ReactNode;
 
   /**
-   * Sidebar element rendered to the left of the main content area.
-   * The sidebar manages its own width and scroll behavior.
+   * Nav footer element pinned at the bottom of the navigation column.
+   * Does not scroll. Use for user menu, settings, sign out, etc.
    */
-  readonly sidebar?: React.ReactNode;
+  readonly navFooter?: React.ReactNode;
 
   // ── Testing & Platform ──