@mapples/render 1.6.0-beta.20260929074057 → 1.6.0-beta.20260929132300

package/CHANGELOG.md

@@ -1,9 +1,10 @@
 # @mapples/render
 
-## 1.6.0-beta.20260929074057
+## 1.6.0-beta.20260929132300
 
 ### Minor Changes
 
+- 7339399: Designed navigator chrome. A tabs navigator's `TabBarOptions.componentUuid` and a drawer's `DrawerOptions.componentUuid` name a saved component that renders the bar or the drawer content, and `TabBarOptions.native` asks the exported app for expo-router's `NativeTabs`. `@mapples/render` carries the contract (`NavigatorChromeContext`, `useNavigatorChrome`): the navigator's routes as items with a label, an active flag and an icon renderer, plus `select`, `close` and the safe-area insets. Two new `@mapples/components` elements read it — `TabBarItems` (one tab per route, pill, labels, badges' tones) and `DrawerItems` (one row per route) — and show a notice when the component is not a navigator's design yet; `@mapples/components` now peers on `@mapples/render`. `@mapples/navigation` mounts a design through `TabBarHost` / `DrawerContentHost` (React Navigation's `tabBar` / `drawerContent`, reading only their props so an exported app uses them as-is) when `MapplesNavigation` is given the `chrome` map, and keeps `visible: false` working for a custom bar. The Creator canvas draws a designed tab bar on every screen frame with its measured height as the bottom inset, a platform-styled placeholder for a native bar, frames a chrome master on the components surface at the chrome's shape with the navigator's routes flowing in, and labels storyboard sections with their design. `create_navigator_chrome` creates and assigns a starter design; `set_navigator_options` accepts the new fields.
 - a6c5872: All `@mapples/*` runtime packages now share one version and are versioned and published together from `mapplesorg/mapples-kit`; `mapples-open-kit` is a read-only mirror of the source.
 
 ## 1.3.0

package/dist/context/NavigatorChromeContext.d.ts

@@ -0,0 +1,67 @@
+import { ReactNode } from 'react';
+/** What a chrome item's icon renderer receives — the same shape React Navigation hands `tabBarIcon`. */
+export interface NavigatorChromeIconProps {
+    color?: string;
+    size?: number;
+}
+/**
+ * One route of the navigator a chrome component draws: a tab of a tabs
+ * navigator, or a row of a drawer.
+ *
+ * @interface NavigatorChromeItem
+ */
+export interface NavigatorChromeItem {
+    /**
+     * Host-opaque identity of the route — React Navigation's `route.key` in a
+     * running app, the navigation document's route id on the Creator canvas.
+     * Passed back to {@link NavigatorChrome.select}.
+     */
+    routeId: string;
+    /** The label the route shows (tab label, drawer label or route name). */
+    label: string;
+    /** Whether this route is the focused one. */
+    active: boolean;
+    /**
+     * Renders the route's icon in the colour and size the chrome asks for.
+     * Absent when the route has no icon. A renderer rather than an asset
+     * reference, because the canvas mounts no render provider and an exported
+     * app never sees `ref(icon:…)` values.
+     */
+    renderIcon?: (props: NavigatorChromeIconProps) => ReactNode;
+}
+/**
+ * The contract between a navigator and the saved component that renders its
+ * chrome (a custom tab bar or drawer content). The host — React Navigation's
+ * `tabBar` / `drawerContent` at runtime, the frame or the components surface
+ * in the Creator — provides it; `TabBarItems` and `DrawerItems` from
+ * `@mapples/components` read it.
+ *
+ * @interface NavigatorChrome
+ */
+export interface NavigatorChrome {
+    /** Which chrome this is: a tabs navigator's bar or a drawer's content. */
+    kind: 'tabs' | 'drawer';
+    /** The navigator's routes in display order. */
+    items: NavigatorChromeItem[];
+    /** `routeId` of the focused route, when one is. */
+    activeRouteId?: string;
+    /** Focus a route — switch the tab, or navigate and close the drawer. */
+    select: (routeId: string) => void;
+    /** Close the drawer. Only a drawer host provides it. */
+    close?: () => void;
+    /** Safe-area room the chrome sits against (a tab bar pads its bottom by it). */
+    insets: {
+        top: number;
+        bottom: number;
+    };
+}
+/**
+ * Carries the {@link NavigatorChrome} a host provides down to the chrome
+ * elements. `undefined` outside a host — a chrome element then knows it is
+ * not attached to any navigator.
+ */
+declare const NavigatorChromeContext: import("react").Context<NavigatorChrome | undefined>;
+/** Provider a chrome host wraps the saved component with. */
+export declare const NavigatorChromeProvider: import("react").Provider<NavigatorChrome | undefined>;
+export default NavigatorChromeContext;
+//# sourceMappingURL=NavigatorChromeContext.d.ts.map

package/dist/context/NavigatorChromeContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigatorChromeContext.d.ts","sourceRoot":"","sources":["../../src/context/NavigatorChromeContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjD,wGAAwG;AACxG,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;GAKG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,MAAM,EAAE,OAAO,CAAC;IAChB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,SAAS,CAAC;CAC7D;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,eAAe;IAC9B,0EAA0E;IAC1E,IAAI,EAAE,MAAM,GAAG,QAAQ,CAAC;IACxB,+CAA+C;IAC/C,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,wEAAwE;IACxE,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,gFAAgF;IAChF,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CACzC;AAED;;;;GAIG;AACH,QAAA,MAAM,sBAAsB,sDAE3B,CAAC;AAEF,6DAA6D;AAC7D,eAAO,MAAM,uBAAuB,uDAAkC,CAAC;AAEvE,eAAe,sBAAsB,CAAC"}

package/dist/context/NavigatorChromeContext.js

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+/**
+ * Carries the {@link NavigatorChrome} a host provides down to the chrome
+ * elements. `undefined` outside a host — a chrome element then knows it is
+ * not attached to any navigator.
+ */
+const NavigatorChromeContext = createContext(undefined);
+/** Provider a chrome host wraps the saved component with. */
+export const NavigatorChromeProvider = NavigatorChromeContext.Provider;
+export default NavigatorChromeContext;
+//# sourceMappingURL=NavigatorChromeContext.js.map

package/dist/context/NavigatorChromeContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigatorChromeContext.js","sourceRoot":"","sources":["../../src/context/NavigatorChromeContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAa,MAAM,OAAO,CAAC;AA0DjD;;;;GAIG;AACH,MAAM,sBAAsB,GAAG,aAAa,CAC1C,SAAS,CACV,CAAC;AAEF,6DAA6D;AAC7D,MAAM,CAAC,MAAM,uBAAuB,GAAG,sBAAsB,CAAC,QAAQ,CAAC;AAEvE,eAAe,sBAAsB,CAAC"}

package/dist/context/index.d.ts

@@ -1,3 +1,5 @@
 export { default as RenderContext } from './RenderContext';
 export * from './RenderContext';
+export { default as NavigatorChromeContext } from './NavigatorChromeContext';
+export * from './NavigatorChromeContext';
 //# sourceMappingURL=index.d.ts.map

package/dist/context/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/context/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/context/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,cAAc,0BAA0B,CAAC"}

package/dist/context/index.js

@@ -1,3 +1,5 @@
 export { default as RenderContext } from './RenderContext';
 export * from './RenderContext';
+export { default as NavigatorChromeContext } from './NavigatorChromeContext';
+export * from './NavigatorChromeContext';
 //# sourceMappingURL=index.js.map

package/dist/context/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/context/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/context/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,cAAc,0BAA0B,CAAC"}

package/dist/hooks/index.d.ts

@@ -1,3 +1,5 @@
 export { default as useRender } from './useRender';
 export { default as useConditionalStyled } from './useConditionalStyled';
+export { default as useNavigatorChrome } from './useNavigatorChrome';
+export * from './useNavigatorChrome';
 //# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,cAAc,sBAAsB,CAAC"}

package/dist/hooks/index.js

@@ -1,3 +1,5 @@
 export { default as useRender } from './useRender';
 export { default as useConditionalStyled } from './useConditionalStyled';
+export { default as useNavigatorChrome } from './useNavigatorChrome';
+export * from './useNavigatorChrome';
 //# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,cAAc,sBAAsB,CAAC"}

package/dist/hooks/useNavigatorChrome.d.ts

@@ -0,0 +1,16 @@
+import { NavigatorChrome } from '../context/NavigatorChromeContext';
+/**
+ * The navigator chrome a host provides, or `undefined` when the component is
+ * not mounted as a navigator's chrome. The library's chrome elements use this
+ * to tell the designer they are not attached yet instead of failing.
+ */
+export declare const useOptionalNavigatorChrome: () => NavigatorChrome | undefined;
+/**
+ * The navigator chrome a host provides.
+ *
+ * @throws When no `NavigatorChromeProvider` is above — the component is not
+ * mounted as a navigator's tab bar or drawer content.
+ */
+declare const useNavigatorChrome: () => NavigatorChrome;
+export default useNavigatorChrome;
+//# sourceMappingURL=useNavigatorChrome.d.ts.map

package/dist/hooks/useNavigatorChrome.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNavigatorChrome.d.ts","sourceRoot":"","sources":["../../src/hooks/useNavigatorChrome.ts"],"names":[],"mappings":"AAEA,OAA+B,EAC7B,eAAe,EAChB,MAAM,mCAAmC,CAAC;AAE3C;;;;GAIG;AACH,eAAO,MAAM,0BAA0B,QAAO,eAAe,GAAG,SAC5B,CAAC;AAErC;;;;;GAKG;AACH,QAAA,MAAM,kBAAkB,QAAO,eAQ9B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/hooks/useNavigatorChrome.js

@@ -0,0 +1,23 @@
+import { useContext } from 'react';
+import NavigatorChromeContext from '../context/NavigatorChromeContext';
+/**
+ * The navigator chrome a host provides, or `undefined` when the component is
+ * not mounted as a navigator's chrome. The library's chrome elements use this
+ * to tell the designer they are not attached yet instead of failing.
+ */
+export const useOptionalNavigatorChrome = () => useContext(NavigatorChromeContext);
+/**
+ * The navigator chrome a host provides.
+ *
+ * @throws When no `NavigatorChromeProvider` is above — the component is not
+ * mounted as a navigator's tab bar or drawer content.
+ */
+const useNavigatorChrome = () => {
+    const chrome = useContext(NavigatorChromeContext);
+    if (!chrome) {
+        throw new Error('useNavigatorChrome: no navigator chrome — the component is not mounted as a tab bar or drawer content');
+    }
+    return chrome;
+};
+export default useNavigatorChrome;
+//# sourceMappingURL=useNavigatorChrome.js.map

package/dist/hooks/useNavigatorChrome.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNavigatorChrome.js","sourceRoot":"","sources":["../../src/hooks/useNavigatorChrome.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,sBAEN,MAAM,mCAAmC,CAAC;AAE3C;;;;GAIG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAgC,EAAE,CAC1E,UAAU,CAAC,sBAAsB,CAAC,CAAC;AAErC;;;;;GAKG;AACH,MAAM,kBAAkB,GAAG,GAAoB,EAAE;IAC/C,MAAM,MAAM,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAC;IAClD,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,MAAM,IAAI,KAAK,CACb,uGAAuG,CACxG,CAAC;IACJ,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapples/render",
-  "version": "1.6.0-beta.20260929074057",
+  "version": "1.6.0-beta.20260929132300",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {