react-native-webrtc-kaleidoscope 2.0.0 → 2.1.1

package/dist/src/components/preset-book-menu/index.js

@@ -0,0 +1,152 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PresetGrid = exports.PresetBookMenuLayout = exports.PresetTile = void 0;
+exports.PresetBookMenu = PresetBookMenu;
+exports.usePresetBookMenu = usePresetBookMenu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// The drop-in composite picker (#28): tabs over the consumer's preset families,
+// a left-hand category menu under the tabs, and a uniform tile grid filtered by
+// the active family and category. Controlled selection; emit the chosen id, the
+// host applies it. `usePresetBookMenu` is the orchestration (group the book by
+// family/category, own the active tab and category) and is exported for BYO
+// layouts.
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const test_id_1 = require("../../lib/test-id");
+const layout_1 = require("./layout");
+const preset_grid_1 = require("./preset-grid");
+/**
+ * Tabbed, preset-book-driven picker. Controlled selection; emits the chosen id
+ * and the host applies it.
+ *
+ * @example
+ * <PresetBookMenu
+ *   presets={presets}
+ *   value={art}
+ *   onSelect={setArt}
+ * />
+ */
+function PresetBookMenu(props) {
+    // `className` (declared on PresetBookMenuProps) is intentionally not destructured: the
+    // ./nativewind cssInterop registration consumes it at the JSX boundary and
+    // merges the resolved classes into `style` before this body runs.
+    const { presets, value, onSelect, disabled = false, renderTile, labelFor, tabLabelFor, categoryLabelFor, style, } = props;
+    const { families, activeTab, setActiveTab, categories, activeCategory, setActiveCategory, views, } = usePresetBookMenu(presets, labelFor);
+    if (!activeTab)
+        return null;
+    // The renderers speak string ids (PresetView.id); the public onSelect is
+    // narrowed to keyof P. Adapt once here so consumers need no cast (every id
+    // came from Object.keys(presets), so it is a real key).
+    const handleSelect = (id) => onSelect(id);
+    return ((0, jsx_runtime_1.jsx)(layout_1.PresetBookMenuLayout, { style: style, tabsZone: families.map((family) => ((0, jsx_runtime_1.jsx)(Tab, { label: tabLabelFor?.(family) ?? titleCase(family), active: family === activeTab, disabled: disabled, onPress: () => setActiveTab(family), testID: (0, test_id_1.familyTestId)(family) }, family))), sidebarZone: categories.length > 0
+            ? categories.map((category) => ((0, jsx_runtime_1.jsx)(CategoryItem, { label: categoryLabelFor?.(category) ?? category, active: category === activeCategory, disabled: disabled, onPress: () => setActiveCategory(category), testID: (0, test_id_1.categoryTestId)(activeTab, category) }, category)))
+            : undefined, bodyZone: (0, jsx_runtime_1.jsx)(preset_grid_1.PresetGrid, { presets: views, value: value, onSelect: handleSelect, disabled: disabled, renderTile: renderTile }) }));
+}
+/**
+ * Group a preset book by family and category, and own the active tab and
+ * category. The grouping is plain; no hand-rolled memo: React Compiler memoizes
+ * it when the library is compiled, and it is cheap to recompute otherwise. The
+ * active tab and category are reconciled every render: each survives as long as
+ * it is still in the book, else it falls back to the first; so swapping
+ * `presets`, or switching to a family that lacks the prior category, can't strand
+ * a dead selection.
+ */
+function usePresetBookMenu(presets, labelFor) {
+    const families = [];
+    const viewsByFamily = new Map();
+    const categoriesByFamily = new Map();
+    const viewsByFamilyCategory = new Map();
+    for (const id of Object.keys(presets)) {
+        const preset = presets[id];
+        if (!preset)
+            continue;
+        // taxonomy[0] is the family (tab); taxonomy[1], when present, is the
+        // category (left-hand menu). A depth-1 preset has no category.
+        const family = preset.taxonomy[0];
+        const category = preset.taxonomy[1];
+        const view = {
+            id,
+            label: labelFor?.(id) ?? preset.name,
+            family,
+            category,
+            source: typeof preset.thumbnail === 'string' || typeof preset.thumbnail === 'number'
+                ? preset.thumbnail
+                : undefined,
+        };
+        if (!viewsByFamily.has(family)) {
+            families.push(family);
+            viewsByFamily.set(family, []);
+            categoriesByFamily.set(family, []);
+            viewsByFamilyCategory.set(family, new Map());
+        }
+        viewsByFamily.get(family)?.push(view);
+        if (category !== undefined) {
+            const cats = categoriesByFamily.get(family);
+            const catViews = viewsByFamilyCategory.get(family);
+            if (cats && catViews && !catViews.has(category)) {
+                cats.push(category);
+                catViews.set(category, []);
+            }
+            catViews?.get(category)?.push(view);
+        }
+    }
+    const [activeTab, setActiveTab] = (0, react_1.useState)(undefined);
+    const family = activeTab && families.includes(activeTab) ? activeTab : families[0];
+    const categories = (family && categoriesByFamily.get(family)) || [];
+    const [activeCategory, setActiveCategory] = (0, react_1.useState)(undefined);
+    const category = activeCategory && categories.includes(activeCategory) ? activeCategory : categories[0];
+    const views = category
+        ? (family && viewsByFamilyCategory.get(family)?.get(category)) || []
+        : (family && viewsByFamily.get(family)) || [];
+    return {
+        families,
+        activeTab: family,
+        setActiveTab,
+        categories,
+        activeCategory: category,
+        setActiveCategory,
+        views,
+    };
+}
+function Tab({ label, active, disabled, onPress, testID }) {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "tab", accessibilityState: { selected: active, disabled }, testID: testID, disabled: disabled, onPress: onPress, style: [styles.tab, active && styles.tabActive, disabled && styles.tabDisabled], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.tabLabel, active && styles.tabLabelActive], children: label }) }));
+}
+function CategoryItem({ label, active, disabled, onPress, testID }) {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "menuitem", accessibilityState: { selected: active, disabled }, testID: testID, disabled: disabled, onPress: onPress, style: [
+            styles.category,
+            active && styles.categoryActive,
+            disabled && styles.categoryDisabled,
+        ], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.categoryLabel, active && styles.categoryLabelActive], children: label }) }));
+}
+function titleCase(s) {
+    return s
+        .split('-')
+        .map((w) => (w ? w.charAt(0).toUpperCase() + w.slice(1) : w))
+        .join(' ');
+}
+const styles = react_native_1.StyleSheet.create({
+    tab: { paddingVertical: 6, paddingHorizontal: 12, borderRadius: 999, backgroundColor: '#1f1f1f' },
+    tabActive: { backgroundColor: '#333' },
+    tabDisabled: { opacity: 0.5 },
+    tabLabel: { color: '#999', fontSize: 12, fontWeight: '600' },
+    tabLabelActive: { color: '#fff' },
+    category: {
+        paddingVertical: 6,
+        paddingHorizontal: 10,
+        borderRadius: 8,
+        backgroundColor: '#1a1a1a',
+    },
+    categoryActive: { backgroundColor: '#2c2c2c' },
+    categoryDisabled: { opacity: 0.5 },
+    categoryLabel: { color: '#9a9a9a', fontSize: 12, fontWeight: '500' },
+    categoryLabelActive: { color: '#fff' },
+});
+var preset_tile_1 = require("../preset-tile");
+Object.defineProperty(exports, "PresetTile", { enumerable: true, get: function () { return preset_tile_1.PresetTile; } });
+// The `./picker` subpath barrel: the chassis above plus the composable parts and
+// types a consumer can use to build a BYO layout.
+var layout_2 = require("./layout");
+Object.defineProperty(exports, "PresetBookMenuLayout", { enumerable: true, get: function () { return layout_2.PresetBookMenuLayout; } });
+var preset_grid_2 = require("./preset-grid");
+Object.defineProperty(exports, "PresetGrid", { enumerable: true, get: function () { return preset_grid_2.PresetGrid; } });
+//# sourceMappingURL=index.js.map

package/dist/src/components/preset-book-menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/preset-book-menu/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// The drop-in composite picker (#28): tabs over the consumer's preset families,\n// a left-hand category menu under the tabs, and a uniform tile grid filtered by\n// the active family and category. Controlled selection; emit the chosen id, the\n// host applies it. `usePresetBookMenu` is the orchestration (group the book by\n// family/category, own the active tab and category) and is exported for BYO\n// layouts.\n\nimport { useState } from 'react';\nimport { Pressable, StyleSheet, Text } from 'react-native';\nimport type { KaleidoscopePresetBook } from '../../kaleidoscope.preset-book.types';\nimport { categoryTestId, familyTestId } from '../../lib/test-id';\nimport { PresetBookMenuLayout } from './layout';\nimport type { Category, Family, PresetBookMenuProps, PresetView } from './preset-book-menu.types';\nimport { PresetGrid } from './preset-grid';\n\n/** The grouping usePresetBookMenu returns; named so BYO-layout consumers can type it. */\nexport interface PresetBookMenuModel {\n  /** Distinct families present in the book, in first-appearance order. */\n  readonly families: ReadonlyArray<Family>;\n  /** The reconciled active family (survives a changed book; falls back to the first). */\n  readonly activeTab: Family | undefined;\n  /** Set the active family tab. */\n  readonly setActiveTab: (family: Family) => void;\n  /**\n   * Categories (taxonomy[1]) within the active family, first-appearance order.\n   * Empty when the family is flat (every preset is depth-1).\n   */\n  readonly categories: ReadonlyArray<Category>;\n  /** The reconciled active category, or undefined when the family is flat. */\n  readonly activeCategory: Category | undefined;\n  /** Set the active category. */\n  readonly setActiveCategory: (category: Category) => void;\n  /**\n   * Presets to display: the active family narrowed to the active category, or\n   * every preset in the family when it is flat.\n   */\n  readonly views: ReadonlyArray<PresetView>;\n}\n\n/**\n * Tabbed, preset-book-driven picker. Controlled selection; emits the chosen id\n * and the host applies it.\n *\n * @example\n * <PresetBookMenu\n *   presets={presets}\n *   value={art}\n *   onSelect={setArt}\n * />\n */\nexport function PresetBookMenu<P extends KaleidoscopePresetBook>(props: PresetBookMenuProps<P>) {\n  // `className` (declared on PresetBookMenuProps) is intentionally not destructured: the\n  // ./nativewind cssInterop registration consumes it at the JSX boundary and\n  // merges the resolved classes into `style` before this body runs.\n  const {\n    presets,\n    value,\n    onSelect,\n    disabled = false,\n    renderTile,\n    labelFor,\n    tabLabelFor,\n    categoryLabelFor,\n    style,\n  } = props;\n  const {\n    families,\n    activeTab,\n    setActiveTab,\n    categories,\n    activeCategory,\n    setActiveCategory,\n    views,\n  } = usePresetBookMenu(presets, labelFor);\n\n  if (!activeTab) return null;\n  // The renderers speak string ids (PresetView.id); the public onSelect is\n  // narrowed to keyof P. Adapt once here so consumers need no cast (every id\n  // came from Object.keys(presets), so it is a real key).\n  const handleSelect = (id: string | null) => onSelect(id as (keyof P & string) | null);\n\n  return (\n    <PresetBookMenuLayout\n      style={style}\n      tabsZone={families.map((family) => (\n        <Tab\n          key={family}\n          label={tabLabelFor?.(family) ?? titleCase(family)}\n          active={family === activeTab}\n          disabled={disabled}\n          onPress={() => setActiveTab(family)}\n          testID={familyTestId(family)}\n        />\n      ))}\n      sidebarZone={\n        categories.length > 0\n          ? categories.map((category) => (\n              <CategoryItem\n                key={category}\n                label={categoryLabelFor?.(category) ?? category}\n                active={category === activeCategory}\n                disabled={disabled}\n                onPress={() => setActiveCategory(category)}\n                testID={categoryTestId(activeTab, category)}\n              />\n            ))\n          : undefined\n      }\n      bodyZone={\n        <PresetGrid\n          presets={views}\n          value={value}\n          onSelect={handleSelect}\n          disabled={disabled}\n          renderTile={renderTile}\n        />\n      }\n    />\n  );\n}\n\n/**\n * Group a preset book by family and category, and own the active tab and\n * category. The grouping is plain; no hand-rolled memo: React Compiler memoizes\n * it when the library is compiled, and it is cheap to recompute otherwise. The\n * active tab and category are reconciled every render: each survives as long as\n * it is still in the book, else it falls back to the first; so swapping\n * `presets`, or switching to a family that lacks the prior category, can't strand\n * a dead selection.\n */\nexport function usePresetBookMenu<P extends KaleidoscopePresetBook>(\n  presets: P,\n  labelFor?: (id: keyof P & string) => string,\n): PresetBookMenuModel {\n  const families: Family[] = [];\n  const viewsByFamily = new Map<Family, PresetView[]>();\n  const categoriesByFamily = new Map<Family, Category[]>();\n  const viewsByFamilyCategory = new Map<Family, Map<Category, PresetView[]>>();\n  for (const id of Object.keys(presets)) {\n    const preset = presets[id];\n    if (!preset) continue;\n    // taxonomy[0] is the family (tab); taxonomy[1], when present, is the\n    // category (left-hand menu). A depth-1 preset has no category.\n    const family = preset.taxonomy[0];\n    const category = preset.taxonomy[1];\n    const view: PresetView = {\n      id,\n      label: labelFor?.(id as keyof P & string) ?? preset.name,\n      family,\n      category,\n      source:\n        typeof preset.thumbnail === 'string' || typeof preset.thumbnail === 'number'\n          ? preset.thumbnail\n          : undefined,\n    };\n    if (!viewsByFamily.has(family)) {\n      families.push(family);\n      viewsByFamily.set(family, []);\n      categoriesByFamily.set(family, []);\n      viewsByFamilyCategory.set(family, new Map());\n    }\n    viewsByFamily.get(family)?.push(view);\n    if (category !== undefined) {\n      const cats = categoriesByFamily.get(family);\n      const catViews = viewsByFamilyCategory.get(family);\n      if (cats && catViews && !catViews.has(category)) {\n        cats.push(category);\n        catViews.set(category, []);\n      }\n      catViews?.get(category)?.push(view);\n    }\n  }\n\n  const [activeTab, setActiveTab] = useState<Family | undefined>(undefined);\n  const family = activeTab && families.includes(activeTab) ? activeTab : families[0];\n  const categories = (family && categoriesByFamily.get(family)) || [];\n\n  const [activeCategory, setActiveCategory] = useState<Category | undefined>(undefined);\n  const category =\n    activeCategory && categories.includes(activeCategory) ? activeCategory : categories[0];\n\n  const views = category\n    ? (family && viewsByFamilyCategory.get(family)?.get(category)) || []\n    : (family && viewsByFamily.get(family)) || [];\n\n  return {\n    families,\n    activeTab: family,\n    setActiveTab,\n    categories,\n    activeCategory: category,\n    setActiveCategory,\n    views,\n  };\n}\n\ninterface TabProps {\n  readonly label: string;\n  readonly active: boolean;\n  readonly disabled: boolean;\n  readonly onPress: () => void;\n  readonly testID: string;\n}\n\nfunction Tab({ label, active, disabled, onPress, testID }: TabProps) {\n  return (\n    <Pressable\n      accessibilityRole=\"tab\"\n      accessibilityState={{ selected: active, disabled }}\n      testID={testID}\n      disabled={disabled}\n      onPress={onPress}\n      style={[styles.tab, active && styles.tabActive, disabled && styles.tabDisabled]}\n    >\n      <Text style={[styles.tabLabel, active && styles.tabLabelActive]}>{label}</Text>\n    </Pressable>\n  );\n}\n\ninterface CategoryItemProps {\n  readonly label: string;\n  readonly active: boolean;\n  readonly disabled: boolean;\n  readonly onPress: () => void;\n  readonly testID: string;\n}\n\nfunction CategoryItem({ label, active, disabled, onPress, testID }: CategoryItemProps) {\n  return (\n    <Pressable\n      accessibilityRole=\"menuitem\"\n      accessibilityState={{ selected: active, disabled }}\n      testID={testID}\n      disabled={disabled}\n      onPress={onPress}\n      style={[\n        styles.category,\n        active && styles.categoryActive,\n        disabled && styles.categoryDisabled,\n      ]}\n    >\n      <Text style={[styles.categoryLabel, active && styles.categoryLabelActive]}>{label}</Text>\n    </Pressable>\n  );\n}\n\nfunction titleCase(s: string): string {\n  return s\n    .split('-')\n    .map((w) => (w ? w.charAt(0).toUpperCase() + w.slice(1) : w))\n    .join(' ');\n}\n\nconst styles = StyleSheet.create({\n  tab: { paddingVertical: 6, paddingHorizontal: 12, borderRadius: 999, backgroundColor: '#1f1f1f' },\n  tabActive: { backgroundColor: '#333' },\n  tabDisabled: { opacity: 0.5 },\n  tabLabel: { color: '#999', fontSize: 12, fontWeight: '600' },\n  tabLabelActive: { color: '#fff' },\n  category: {\n    paddingVertical: 6,\n    paddingHorizontal: 10,\n    borderRadius: 8,\n    backgroundColor: '#1a1a1a',\n  },\n  categoryActive: { backgroundColor: '#2c2c2c' },\n  categoryDisabled: { opacity: 0.5 },\n  categoryLabel: { color: '#9a9a9a', fontSize: 12, fontWeight: '500' },\n  categoryLabelActive: { color: '#fff' },\n});\n\nexport { PresetTile } from '../preset-tile';\n// The `./picker` subpath barrel: the chassis above plus the composable parts and\n// types a consumer can use to build a BYO layout.\nexport { PresetBookMenuLayout } from './layout';\nexport type {\n  Category,\n  Family,\n  PresetBookMenuProps,\n  PresetBookMenuSelection,\n  PresetBookMenuStyleProps,\n  PresetItemState,\n  PresetView,\n  RenderTile,\n} from './preset-book-menu.types';\nexport { PresetGrid } from './preset-grid';\n"]}

package/dist/src/components/preset-book-menu/layout.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+interface PresetBookMenuLayoutProps {
+    /**
+     * The family tab bar; conventionally a row of tab buttons, one per family.
+     * The layout already wraps this in a `tablist`-role row with flex/gap, so the
+     * filler should be the bare tab elements (don't add another row wrapper).
+     */
+    readonly tabsZone: ReactNode;
+    /**
+     * The category menu for the active family (a column of buttons, one per
+     * category). Omit (or pass nothing) for a flat family: the body then spans
+     * full width with no left column. The layout wraps this in the left column;
+     * the filler should be the bare item elements.
+     */
+    readonly sidebarZone?: ReactNode;
+    /** The active family's renderer (a PresetGrid); fills the body column. */
+    readonly bodyZone: ReactNode;
+    /** NativeWind class for the container; resolved via the `./nativewind` interop. */
+    readonly className?: string | undefined;
+    readonly style?: StyleProp<ViewStyle> | undefined;
+}
+export declare function PresetBookMenuLayout({ tabsZone, sidebarZone, bodyZone, style, }: PresetBookMenuLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=layout.d.ts.map

package/dist/src/components/preset-book-menu/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../src/components/preset-book-menu/layout.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,KAAK,SAAS,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEhF,UAAU,yBAAyB;IACjC;;;;OAIG;IACH,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B;;;;;OAKG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,0EAA0E;IAC1E,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B,mFAAmF;IACnF,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;CACnD;AAID,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,KAAK,GACN,EAAE,yBAAyB,2CAkB3B","sourcesContent":["// Zone container for the composite picker: a tab bar above, then (when the\n// active family has categories) a left-hand category menu beside the body.\n// Presentational only; the composite fills the zones.\n\nimport type { ReactNode } from 'react';\nimport { type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native';\n\ninterface PresetBookMenuLayoutProps {\n  /**\n   * The family tab bar; conventionally a row of tab buttons, one per family.\n   * The layout already wraps this in a `tablist`-role row with flex/gap, so the\n   * filler should be the bare tab elements (don't add another row wrapper).\n   */\n  readonly tabsZone: ReactNode;\n  /**\n   * The category menu for the active family (a column of buttons, one per\n   * category). Omit (or pass nothing) for a flat family: the body then spans\n   * full width with no left column. The layout wraps this in the left column;\n   * the filler should be the bare item elements.\n   */\n  readonly sidebarZone?: ReactNode;\n  /** The active family's renderer (a PresetGrid); fills the body column. */\n  readonly bodyZone: ReactNode;\n  /** NativeWind class for the container; resolved via the `./nativewind` interop. */\n  readonly className?: string | undefined;\n  readonly style?: StyleProp<ViewStyle> | undefined;\n}\n\n// `className` is consumed by the ./nativewind cssInterop at the boundary and\n// arrives merged into `style`, so it is not destructured/read here.\nexport function PresetBookMenuLayout({\n  tabsZone,\n  sidebarZone,\n  bodyZone,\n  style,\n}: PresetBookMenuLayoutProps) {\n  return (\n    <View style={[styles.container, style]}>\n      <View accessibilityRole=\"tablist\" accessibilityLabel=\"Effect families\" style={styles.tabs}>\n        {tabsZone}\n      </View>\n      {sidebarZone ? (\n        <View style={styles.split}>\n          <View accessibilityRole=\"menu\" accessibilityLabel=\"Categories\" style={styles.sidebar}>\n            {sidebarZone}\n          </View>\n          <View style={styles.bodyFlex}>{bodyZone}</View>\n        </View>\n      ) : (\n        <View style={styles.body}>{bodyZone}</View>\n      )}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: { gap: 8, width: '100%' },\n  tabs: { flexDirection: 'row', flexWrap: 'wrap', gap: 6 },\n  split: { flexDirection: 'row', gap: 12, width: '100%', alignItems: 'flex-start' },\n  sidebar: { flexShrink: 0, gap: 4, minWidth: 96 },\n  bodyFlex: { flex: 1 },\n  body: { width: '100%' },\n});\n"]}

package/dist/src/components/preset-book-menu/layout.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PresetBookMenuLayout = PresetBookMenuLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+// `className` is consumed by the ./nativewind cssInterop at the boundary and
+// arrives merged into `style`, so it is not destructured/read here.
+function PresetBookMenuLayout({ tabsZone, sidebarZone, bodyZone, style, }) {
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, style], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityRole: "tablist", accessibilityLabel: "Effect families", style: styles.tabs, children: tabsZone }), sidebarZone ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.split, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityRole: "menu", accessibilityLabel: "Categories", style: styles.sidebar, children: sidebarZone }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.bodyFlex, children: bodyZone })] })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.body, children: bodyZone }))] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    container: { gap: 8, width: '100%' },
+    tabs: { flexDirection: 'row', flexWrap: 'wrap', gap: 6 },
+    split: { flexDirection: 'row', gap: 12, width: '100%', alignItems: 'flex-start' },
+    sidebar: { flexShrink: 0, gap: 4, minWidth: 96 },
+    bodyFlex: { flex: 1 },
+    body: { width: '100%' },
+});
+//# sourceMappingURL=layout.js.map

package/dist/src/components/preset-book-menu/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../../src/components/preset-book-menu/layout.tsx"],"names":[],"mappings":";;;;AAKA,+CAAgF;AAuBhF,6EAA6E;AAC7E,oEAAoE;AACpE,8BAAqC,EACnC,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,KAAK,GACqB;IAC1B,OAAO,CACL,wBAAC,mBAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,aACpC,uBAAC,mBAAI,IAAC,iBAAiB,EAAC,SAAS,EAAC,kBAAkB,EAAC,iBAAiB,EAAC,KAAK,EAAE,MAAM,CAAC,IAAI,YACtF,QAAQ,GACJ,EACN,WAAW,CAAC,CAAC,CAAC,CACb,wBAAC,mBAAI,IAAC,KAAK,EAAE,MAAM,CAAC,KAAK,aACvB,uBAAC,mBAAI,IAAC,iBAAiB,EAAC,MAAM,EAAC,kBAAkB,EAAC,YAAY,EAAC,KAAK,EAAE,MAAM,CAAC,OAAO,YACjF,WAAW,GACP,EACP,uBAAC,mBAAI,IAAC,KAAK,EAAE,MAAM,CAAC,QAAQ,YAAG,QAAQ,GAAQ,IAC1C,CACR,CAAC,CAAC,CAAC,CACF,uBAAC,mBAAI,IAAC,KAAK,EAAE,MAAM,CAAC,IAAI,YAAG,QAAQ,GAAQ,CAC5C,IACI,CACR,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE;IACpC,IAAI,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE;IACxD,KAAK,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE;IACjF,OAAO,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAChD,QAAQ,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE;IACrB,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;CACxB,CAAC,CAAC","sourcesContent":["// Zone container for the composite picker: a tab bar above, then (when the\n// active family has categories) a left-hand category menu beside the body.\n// Presentational only; the composite fills the zones.\n\nimport type { ReactNode } from 'react';\nimport { type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native';\n\ninterface PresetBookMenuLayoutProps {\n  /**\n   * The family tab bar; conventionally a row of tab buttons, one per family.\n   * The layout already wraps this in a `tablist`-role row with flex/gap, so the\n   * filler should be the bare tab elements (don't add another row wrapper).\n   */\n  readonly tabsZone: ReactNode;\n  /**\n   * The category menu for the active family (a column of buttons, one per\n   * category). Omit (or pass nothing) for a flat family: the body then spans\n   * full width with no left column. The layout wraps this in the left column;\n   * the filler should be the bare item elements.\n   */\n  readonly sidebarZone?: ReactNode;\n  /** The active family's renderer (a PresetGrid); fills the body column. */\n  readonly bodyZone: ReactNode;\n  /** NativeWind class for the container; resolved via the `./nativewind` interop. */\n  readonly className?: string | undefined;\n  readonly style?: StyleProp<ViewStyle> | undefined;\n}\n\n// `className` is consumed by the ./nativewind cssInterop at the boundary and\n// arrives merged into `style`, so it is not destructured/read here.\nexport function PresetBookMenuLayout({\n  tabsZone,\n  sidebarZone,\n  bodyZone,\n  style,\n}: PresetBookMenuLayoutProps) {\n  return (\n    <View style={[styles.container, style]}>\n      <View accessibilityRole=\"tablist\" accessibilityLabel=\"Effect families\" style={styles.tabs}>\n        {tabsZone}\n      </View>\n      {sidebarZone ? (\n        <View style={styles.split}>\n          <View accessibilityRole=\"menu\" accessibilityLabel=\"Categories\" style={styles.sidebar}>\n            {sidebarZone}\n          </View>\n          <View style={styles.bodyFlex}>{bodyZone}</View>\n        </View>\n      ) : (\n        <View style={styles.body}>{bodyZone}</View>\n      )}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: { gap: 8, width: '100%' },\n  tabs: { flexDirection: 'row', flexWrap: 'wrap', gap: 6 },\n  split: { flexDirection: 'row', gap: 12, width: '100%', alignItems: 'flex-start' },\n  sidebar: { flexShrink: 0, gap: 4, minWidth: 96 },\n  bodyFlex: { flex: 1 },\n  body: { width: '100%' },\n});\n"]}

package/dist/src/components/preset-book-menu/preset-book-menu.types.d.ts

@@ -0,0 +1,88 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { KaleidoscopePresetBook } from '../../kaleidoscope.preset-book.types';
+/**
+ * A composite's family; the grouping (tab) axis. This is the book entry's
+ * taxonomy root (`taxonomy[0]`, e.g. 'Worlds', 'Backgrounds').
+ */
+export type Family = string;
+/**
+ * A composite's category; the second grouping axis under a family (the
+ * left-hand menu). This is the book entry's `taxonomy[1]` (e.g. 'Wizard Tower'
+ * under 'Worlds', 'Office' under 'Backgrounds'). Absent for a depth-1 preset.
+ */
+export type Category = string;
+/**
+ * A preset flattened for display. `id` is the book key the picker emits and the
+ * effect dispatches by; `source` is a thumbnail source (the composite's
+ * `thumbnail`) when present, feeding the thumbnail tile/resolver.
+ */
+export interface PresetView {
+    readonly id: string;
+    readonly label: string;
+    readonly family: Family;
+    /** The preset's category (`taxonomy[1]`); undefined for a depth-1 preset. */
+    readonly category?: Category | undefined;
+    /**
+     * Thumbnail source (web URL or native preset name as `string`, or a Metro
+     * asset module id as `number`); present when the book entry has one.
+     */
+    readonly source?: string | number | undefined;
+}
+/**
+ * The item's own interaction state, passed to a render-prop so a BYO tile/button
+ * can reflect it. This is the leaf's interaction surface (its own selected/press
+ * lifecycle), not a relayed parent-state flag.
+ */
+export interface PresetItemState {
+    readonly selected: boolean;
+    readonly disabled: boolean;
+    readonly onPress: () => void;
+}
+/**
+ * Render-prop for one preset tile. `uri` is the resolved thumbnail source
+ * (undefined renders the recessed variant); `testID` is the tile's deterministic
+ * `accessibilityIdentifier` (`kld.preset.<id>`), which a BYO tile should apply to
+ * its pressable root so Maestro can address it.
+ */
+export type RenderTile = (preset: PresetView, state: PresetItemState & {
+    readonly uri: string | number | undefined;
+    readonly testID: string;
+}) => ReactNode;
+/**
+ * Controlled single-selection contract shared by every picker surface. `K` is
+ * the id type: the composite narrows it to `keyof P` so `value`/`onSelect` speak
+ * the book's keys (no cast at the call site), matching how `kaleidoscope(cmd)`
+ * narrows. Standalone primitives default `K` to `string`.
+ */
+export interface PresetBookMenuSelection<K extends string = string> {
+    /** The selected preset id, or null when nothing is selected. */
+    readonly value: K | null;
+    /**
+     * Emitted with the chosen id, or null when the selection is toggled off
+     * (clicking the selected item clears it, mapping to `kaleidoscope(null)`).
+     */
+    readonly onSelect: (id: K | null) => void;
+}
+/** Props common to the picker surfaces; styling and templating hooks. */
+export interface PresetBookMenuStyleProps {
+    readonly disabled?: boolean | undefined;
+    /** Container class; resolved by NativeWind via the `./nativewind` interop. */
+    readonly className?: string | undefined;
+    /** Override the per-preset tile rendering (BYO tile). */
+    readonly renderTile?: RenderTile | undefined;
+}
+/** Props for the drop-in composite picker (the tabbed kitchen sink). */
+export interface PresetBookMenuProps<P extends KaleidoscopePresetBook = KaleidoscopePresetBook> extends PresetBookMenuSelection<keyof P & string>, PresetBookMenuStyleProps {
+    /** The consumer's preset book. */
+    readonly presets: P;
+    /** RN style override for the container; applied after the defaults. */
+    readonly style?: StyleProp<ViewStyle> | undefined;
+    /** Map a preset id to a display label; defaults to a title-cased id. */
+    readonly labelFor?: ((id: keyof P & string) => string) | undefined;
+    /** Label a family tab; defaults to a title-cased family name. */
+    readonly tabLabelFor?: ((family: Family) => string) | undefined;
+    /** Label a category menu item; defaults to the raw category string. */
+    readonly categoryLabelFor?: ((category: Category) => string) | undefined;
+}
+//# sourceMappingURL=preset-book-menu.types.d.ts.map

package/dist/src/components/preset-book-menu/preset-book-menu.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset-book-menu.types.d.ts","sourceRoot":"","sources":["../../../../src/components/preset-book-menu/preset-book-menu.types.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAEnF;;;GAGG;AACH,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC;AAE5B;;;;GAIG;AACH,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC;AAE9B;;;;GAIG;AACH,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,6EAA6E;IAC7E,QAAQ,CAAC,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACzC;;;OAGG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CAC/C;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,CACvB,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE,eAAe,GAAG;IACvB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB,KACE,SAAS,CAAC;AAEf;;;;;GAKG;AACH,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAChE,gEAAgE;IAChE,QAAQ,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AAED,yEAAyE;AACzE,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACxC,8EAA8E;IAC9E,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,yDAAyD;IACzD,QAAQ,CAAC,UAAU,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;CAC9C;AAED,wEAAwE;AACxE,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,sBAAsB,GAAG,sBAAsB,CAC5F,SAAQ,uBAAuB,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,EAC/C,wBAAwB;IAC1B,kCAAkC;IAClC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;IACpB,uEAAuE;IACvE,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;IAClD,wEAAwE;IACxE,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,CAAC,GAAG,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;IACnE,iEAAiE;IACjE,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;IAChE,uEAAuE;IACvE,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,QAAQ,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;CAC1E","sourcesContent":["// Shared contract for the drop-in picker components (#28).\n//\n// These types are the seam between the composite picker, its family renderers,\n// and the per-item leaves. The composite reads the consumer's preset book,\n// flattens each preset to a `PresetView`, groups by `family` (the book entry's\n// taxonomy root), and dispatches to a family-appropriate control. Selection is\n// controlled: the\n// component emits the chosen preset id; the host applies it via `kaleidoscope`.\n//\n// No runtime imports from platform-specific packages live here (it is the\n// shared `.types.ts` for the platform-split resolver too); only `react` types.\n\nimport type { ReactNode } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport type { KaleidoscopePresetBook } from '../../kaleidoscope.preset-book.types';\n\n/**\n * A composite's family; the grouping (tab) axis. This is the book entry's\n * taxonomy root (`taxonomy[0]`, e.g. 'Worlds', 'Backgrounds').\n */\nexport type Family = string;\n\n/**\n * A composite's category; the second grouping axis under a family (the\n * left-hand menu). This is the book entry's `taxonomy[1]` (e.g. 'Wizard Tower'\n * under 'Worlds', 'Office' under 'Backgrounds'). Absent for a depth-1 preset.\n */\nexport type Category = string;\n\n/**\n * A preset flattened for display. `id` is the book key the picker emits and the\n * effect dispatches by; `source` is a thumbnail source (the composite's\n * `thumbnail`) when present, feeding the thumbnail tile/resolver.\n */\nexport interface PresetView {\n  readonly id: string;\n  readonly label: string;\n  readonly family: Family;\n  /** The preset's category (`taxonomy[1]`); undefined for a depth-1 preset. */\n  readonly category?: Category | undefined;\n  /**\n   * Thumbnail source (web URL or native preset name as `string`, or a Metro\n   * asset module id as `number`); present when the book entry has one.\n   */\n  readonly source?: string | number | undefined;\n}\n\n/**\n * The item's own interaction state, passed to a render-prop so a BYO tile/button\n * can reflect it. This is the leaf's interaction surface (its own selected/press\n * lifecycle), not a relayed parent-state flag.\n */\nexport interface PresetItemState {\n  readonly selected: boolean;\n  readonly disabled: boolean;\n  readonly onPress: () => void;\n}\n\n/**\n * Render-prop for one preset tile. `uri` is the resolved thumbnail source\n * (undefined renders the recessed variant); `testID` is the tile's deterministic\n * `accessibilityIdentifier` (`kld.preset.<id>`), which a BYO tile should apply to\n * its pressable root so Maestro can address it.\n */\nexport type RenderTile = (\n  preset: PresetView,\n  state: PresetItemState & {\n    readonly uri: string | number | undefined;\n    readonly testID: string;\n  },\n) => ReactNode;\n\n/**\n * Controlled single-selection contract shared by every picker surface. `K` is\n * the id type: the composite narrows it to `keyof P` so `value`/`onSelect` speak\n * the book's keys (no cast at the call site), matching how `kaleidoscope(cmd)`\n * narrows. Standalone primitives default `K` to `string`.\n */\nexport interface PresetBookMenuSelection<K extends string = string> {\n  /** The selected preset id, or null when nothing is selected. */\n  readonly value: K | null;\n  /**\n   * Emitted with the chosen id, or null when the selection is toggled off\n   * (clicking the selected item clears it, mapping to `kaleidoscope(null)`).\n   */\n  readonly onSelect: (id: K | null) => void;\n}\n\n/** Props common to the picker surfaces; styling and templating hooks. */\nexport interface PresetBookMenuStyleProps {\n  readonly disabled?: boolean | undefined;\n  /** Container class; resolved by NativeWind via the `./nativewind` interop. */\n  readonly className?: string | undefined;\n  /** Override the per-preset tile rendering (BYO tile). */\n  readonly renderTile?: RenderTile | undefined;\n}\n\n/** Props for the drop-in composite picker (the tabbed kitchen sink). */\nexport interface PresetBookMenuProps<P extends KaleidoscopePresetBook = KaleidoscopePresetBook>\n  extends PresetBookMenuSelection<keyof P & string>,\n    PresetBookMenuStyleProps {\n  /** The consumer's preset book. */\n  readonly presets: P;\n  /** RN style override for the container; applied after the defaults. */\n  readonly style?: StyleProp<ViewStyle> | undefined;\n  /** Map a preset id to a display label; defaults to a title-cased id. */\n  readonly labelFor?: ((id: keyof P & string) => string) | undefined;\n  /** Label a family tab; defaults to a title-cased family name. */\n  readonly tabLabelFor?: ((family: Family) => string) | undefined;\n  /** Label a category menu item; defaults to the raw category string. */\n  readonly categoryLabelFor?: ((category: Category) => string) | undefined;\n}\n"]}

package/dist/src/components/preset-book-menu/preset-book-menu.types.js

@@ -0,0 +1,14 @@
+"use strict";
+// Shared contract for the drop-in picker components (#28).
+//
+// These types are the seam between the composite picker, its family renderers,
+// and the per-item leaves. The composite reads the consumer's preset book,
+// flattens each preset to a `PresetView`, groups by `family` (the book entry's
+// taxonomy root), and dispatches to a family-appropriate control. Selection is
+// controlled: the
+// component emits the chosen preset id; the host applies it via `kaleidoscope`.
+//
+// No runtime imports from platform-specific packages live here (it is the
+// shared `.types.ts` for the platform-split resolver too); only `react` types.
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=preset-book-menu.types.js.map

package/dist/src/components/preset-book-menu/preset-book-menu.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset-book-menu.types.js","sourceRoot":"","sources":["../../../../src/components/preset-book-menu/preset-book-menu.types.ts"],"names":[],"mappings":";AAAA,2DAA2D;AAC3D,EAAE;AACF,+EAA+E;AAC/E,2EAA2E;AAC3E,+EAA+E;AAC/E,+EAA+E;AAC/E,kBAAkB;AAClB,gFAAgF;AAChF,EAAE;AACF,0EAA0E;AAC1E,+EAA+E","sourcesContent":["// Shared contract for the drop-in picker components (#28).\n//\n// These types are the seam between the composite picker, its family renderers,\n// and the per-item leaves. The composite reads the consumer's preset book,\n// flattens each preset to a `PresetView`, groups by `family` (the book entry's\n// taxonomy root), and dispatches to a family-appropriate control. Selection is\n// controlled: the\n// component emits the chosen preset id; the host applies it via `kaleidoscope`.\n//\n// No runtime imports from platform-specific packages live here (it is the\n// shared `.types.ts` for the platform-split resolver too); only `react` types.\n\nimport type { ReactNode } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport type { KaleidoscopePresetBook } from '../../kaleidoscope.preset-book.types';\n\n/**\n * A composite's family; the grouping (tab) axis. This is the book entry's\n * taxonomy root (`taxonomy[0]`, e.g. 'Worlds', 'Backgrounds').\n */\nexport type Family = string;\n\n/**\n * A composite's category; the second grouping axis under a family (the\n * left-hand menu). This is the book entry's `taxonomy[1]` (e.g. 'Wizard Tower'\n * under 'Worlds', 'Office' under 'Backgrounds'). Absent for a depth-1 preset.\n */\nexport type Category = string;\n\n/**\n * A preset flattened for display. `id` is the book key the picker emits and the\n * effect dispatches by; `source` is a thumbnail source (the composite's\n * `thumbnail`) when present, feeding the thumbnail tile/resolver.\n */\nexport interface PresetView {\n  readonly id: string;\n  readonly label: string;\n  readonly family: Family;\n  /** The preset's category (`taxonomy[1]`); undefined for a depth-1 preset. */\n  readonly category?: Category | undefined;\n  /**\n   * Thumbnail source (web URL or native preset name as `string`, or a Metro\n   * asset module id as `number`); present when the book entry has one.\n   */\n  readonly source?: string | number | undefined;\n}\n\n/**\n * The item's own interaction state, passed to a render-prop so a BYO tile/button\n * can reflect it. This is the leaf's interaction surface (its own selected/press\n * lifecycle), not a relayed parent-state flag.\n */\nexport interface PresetItemState {\n  readonly selected: boolean;\n  readonly disabled: boolean;\n  readonly onPress: () => void;\n}\n\n/**\n * Render-prop for one preset tile. `uri` is the resolved thumbnail source\n * (undefined renders the recessed variant); `testID` is the tile's deterministic\n * `accessibilityIdentifier` (`kld.preset.<id>`), which a BYO tile should apply to\n * its pressable root so Maestro can address it.\n */\nexport type RenderTile = (\n  preset: PresetView,\n  state: PresetItemState & {\n    readonly uri: string | number | undefined;\n    readonly testID: string;\n  },\n) => ReactNode;\n\n/**\n * Controlled single-selection contract shared by every picker surface. `K` is\n * the id type: the composite narrows it to `keyof P` so `value`/`onSelect` speak\n * the book's keys (no cast at the call site), matching how `kaleidoscope(cmd)`\n * narrows. Standalone primitives default `K` to `string`.\n */\nexport interface PresetBookMenuSelection<K extends string = string> {\n  /** The selected preset id, or null when nothing is selected. */\n  readonly value: K | null;\n  /**\n   * Emitted with the chosen id, or null when the selection is toggled off\n   * (clicking the selected item clears it, mapping to `kaleidoscope(null)`).\n   */\n  readonly onSelect: (id: K | null) => void;\n}\n\n/** Props common to the picker surfaces; styling and templating hooks. */\nexport interface PresetBookMenuStyleProps {\n  readonly disabled?: boolean | undefined;\n  /** Container class; resolved by NativeWind via the `./nativewind` interop. */\n  readonly className?: string | undefined;\n  /** Override the per-preset tile rendering (BYO tile). */\n  readonly renderTile?: RenderTile | undefined;\n}\n\n/** Props for the drop-in composite picker (the tabbed kitchen sink). */\nexport interface PresetBookMenuProps<P extends KaleidoscopePresetBook = KaleidoscopePresetBook>\n  extends PresetBookMenuSelection<keyof P & string>,\n    PresetBookMenuStyleProps {\n  /** The consumer's preset book. */\n  readonly presets: P;\n  /** RN style override for the container; applied after the defaults. */\n  readonly style?: StyleProp<ViewStyle> | undefined;\n  /** Map a preset id to a display label; defaults to a title-cased id. */\n  readonly labelFor?: ((id: keyof P & string) => string) | undefined;\n  /** Label a family tab; defaults to a title-cased family name. */\n  readonly tabLabelFor?: ((family: Family) => string) | undefined;\n  /** Label a category menu item; defaults to the raw category string. */\n  readonly categoryLabelFor?: ((category: Category) => string) | undefined;\n}\n"]}

package/dist/src/components/preset-book-menu/preset-grid.d.ts

@@ -0,0 +1,16 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { PresetView, RenderTile } from './preset-book-menu.types';
+interface PresetGridProps {
+    readonly presets: ReadonlyArray<PresetView>;
+    readonly value: string | null;
+    readonly onSelect: (id: string | null) => void;
+    readonly disabled?: boolean | undefined;
+    /** Override the tile rendering (BYO tile, e.g. to add a badge). */
+    readonly renderTile?: RenderTile | undefined;
+    /** NativeWind class for the grid container; resolved via the `./nativewind` interop. */
+    readonly className?: string | undefined;
+    readonly style?: StyleProp<ViewStyle> | undefined;
+}
+export declare function PresetGrid(props: PresetGridProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=preset-grid.d.ts.map

package/dist/src/components/preset-book-menu/preset-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset-grid.d.ts","sourceRoot":"","sources":["../../../../src/components/preset-book-menu/preset-grid.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,KAAK,SAAS,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGhF,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAGvE,UAAU,eAAe;IACvB,QAAQ,CAAC,OAAO,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IAC5C,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,QAAQ,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/C,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACxC,mEAAmE;IACnE,QAAQ,CAAC,UAAU,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC7C,wFAAwF;IACxF,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;CACnD;AAaD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAmChD","sourcesContent":["// Family renderer: one family's presets as a uniform tile grid. Every family\n// renders through this; the per-preset tile decides wallpaper-vs-recessed by\n// whether it has a resolved thumbnail, so a family with no thumbnails just\n// renders recessed buttons of the same footprint. The tile renderer is the\n// `renderTile` slot or the default.\n//\n// The thumbnail URI comes from the platform-split `resolveImageUri`: the\n// source URL on web, the in-bundle file:// URI on native; undefined for a preset\n// with no thumbnail (the tile then renders its recessed variant).\n\nimport { Fragment } from 'react';\nimport { type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native';\nimport { presetTileTestId } from '../../lib/test-id';\nimport { PresetTile } from '../preset-tile';\nimport type { PresetView, RenderTile } from './preset-book-menu.types';\nimport { resolveImageUri } from './resolve-image-uri';\n\ninterface PresetGridProps {\n  readonly presets: ReadonlyArray<PresetView>;\n  readonly value: string | null;\n  readonly onSelect: (id: string | null) => void;\n  readonly disabled?: boolean | undefined;\n  /** Override the tile rendering (BYO tile, e.g. to add a badge). */\n  readonly renderTile?: RenderTile | undefined;\n  /** NativeWind class for the grid container; resolved via the `./nativewind` interop. */\n  readonly className?: string | undefined;\n  readonly style?: StyleProp<ViewStyle> | undefined;\n}\n\nconst defaultRenderTile: RenderTile = (preset, state) => (\n  <PresetTile\n    label={preset.label}\n    uri={state.uri}\n    selected={state.selected}\n    disabled={state.disabled}\n    onPress={state.onPress}\n    testID={state.testID}\n  />\n);\n\nexport function PresetGrid(props: PresetGridProps) {\n  const { presets, value, onSelect, disabled = false, renderTile, style } = props;\n  const renderItem = renderTile ?? defaultRenderTile;\n  // Resolve each preset's thumbnail URI; pure in (id, source), so React Compiler\n  // memoizes the map by `presets` when the library is compiled.\n  // The native resolver looks the thumbnail up by id in Bundle.main. For image\n  // presets the preset id and the thumbnail's bundle filename coincide (a\n  // background's image id IS its preset id); for composites they differ (the\n  // composite's thumb is bundled as `<composite-id>-thumb.webp`), so pass the\n  // source as the lookup key when it is a string and falls back to the preset\n  // id otherwise.\n  const uriById = new Map(\n    presets.map((p) => {\n      const lookupId = typeof p.source === 'string' ? p.source : p.id;\n      return [p.id, resolveImageUri(lookupId, p.source)] as const;\n    }),\n  );\n  return (\n    <View accessibilityRole=\"radiogroup\" accessibilityLabel=\"Presets\" style={[styles.grid, style]}>\n      {presets.map((preset) => {\n        const selected = value === preset.id;\n        return (\n          <Fragment key={preset.id}>\n            {renderItem(preset, {\n              selected,\n              disabled,\n              uri: uriById.get(preset.id),\n              onPress: () => onSelect(selected ? null : preset.id),\n              testID: presetTileTestId(preset.id),\n            })}\n          </Fragment>\n        );\n      })}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  grid: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, width: '100%' },\n});\n"]}

package/dist/src/components/preset-book-menu/preset-grid.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PresetGrid = PresetGrid;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Family renderer: one family's presets as a uniform tile grid. Every family
+// renders through this; the per-preset tile decides wallpaper-vs-recessed by
+// whether it has a resolved thumbnail, so a family with no thumbnails just
+// renders recessed buttons of the same footprint. The tile renderer is the
+// `renderTile` slot or the default.
+//
+// The thumbnail URI comes from the platform-split `resolveImageUri`: the
+// source URL on web, the in-bundle file:// URI on native; undefined for a preset
+// with no thumbnail (the tile then renders its recessed variant).
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const test_id_1 = require("../../lib/test-id");
+const preset_tile_1 = require("../preset-tile");
+const resolve_image_uri_1 = require("./resolve-image-uri");
+const defaultRenderTile = (preset, state) => ((0, jsx_runtime_1.jsx)(preset_tile_1.PresetTile, { label: preset.label, uri: state.uri, selected: state.selected, disabled: state.disabled, onPress: state.onPress, testID: state.testID }));
+function PresetGrid(props) {
+    const { presets, value, onSelect, disabled = false, renderTile, style } = props;
+    const renderItem = renderTile ?? defaultRenderTile;
+    // Resolve each preset's thumbnail URI; pure in (id, source), so React Compiler
+    // memoizes the map by `presets` when the library is compiled.
+    // The native resolver looks the thumbnail up by id in Bundle.main. For image
+    // presets the preset id and the thumbnail's bundle filename coincide (a
+    // background's image id IS its preset id); for composites they differ (the
+    // composite's thumb is bundled as `<composite-id>-thumb.webp`), so pass the
+    // source as the lookup key when it is a string and falls back to the preset
+    // id otherwise.
+    const uriById = new Map(presets.map((p) => {
+        const lookupId = typeof p.source === 'string' ? p.source : p.id;
+        return [p.id, (0, resolve_image_uri_1.resolveImageUri)(lookupId, p.source)];
+    }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityRole: "radiogroup", accessibilityLabel: "Presets", style: [styles.grid, style], children: presets.map((preset) => {
+            const selected = value === preset.id;
+            return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderItem(preset, {
+                    selected,
+                    disabled,
+                    uri: uriById.get(preset.id),
+                    onPress: () => onSelect(selected ? null : preset.id),
+                    testID: (0, test_id_1.presetTileTestId)(preset.id),
+                }) }, preset.id));
+        }) }));
+}
+const styles = react_native_1.StyleSheet.create({
+    grid: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, width: '100%' },
+});
+//# sourceMappingURL=preset-grid.js.map

package/dist/src/components/preset-book-menu/preset-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset-grid.js","sourceRoot":"","sources":["../../../../src/components/preset-book-menu/preset-grid.tsx"],"names":[],"mappings":";;;;AAAA,6EAA6E;AAC7E,6EAA6E;AAC7E,2EAA2E;AAC3E,2EAA2E;AAC3E,oCAAoC;AACpC,EAAE;AACF,yEAAyE;AACzE,iFAAiF;AACjF,kEAAkE;AAElE,iCAAiC;AACjC,+CAAgF;AAChF,+CAAqD;AACrD,gDAA4C;AAE5C,2DAAsD;AActD,MAAM,iBAAiB,GAAe,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CACvD,uBAAC,wBAAU,IACT,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,MAAM,EAAE,KAAK,CAAC,MAAM,GACpB,CACH,CAAC;AAEF,oBAA2B,KAAsB;IAC/C,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAChF,MAAM,UAAU,GAAG,UAAU,IAAI,iBAAiB,CAAC;IACnD,+EAA+E;IAC/E,8DAA8D;IAC9D,6EAA6E;IAC7E,wEAAwE;IACxE,2EAA2E;IAC3E,4EAA4E;IAC5E,4EAA4E;IAC5E,gBAAgB;IAChB,MAAM,OAAO,GAAG,IAAI,GAAG,CACrB,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;QAChB,MAAM,QAAQ,GAAG,OAAO,CAAC,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAChE,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,IAAA,mCAAe,EAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,CAAU,CAAC;IAC9D,CAAC,CAAC,CACH,CAAC;IACF,OAAO,CACL,uBAAC,mBAAI,IAAC,iBAAiB,EAAC,YAAY,EAAC,kBAAkB,EAAC,SAAS,EAAC,KAAK,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,YAC1F,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;YACtB,MAAM,QAAQ,GAAG,KAAK,KAAK,MAAM,CAAC,EAAE,CAAC;YACrC,OAAO,CACL,uBAAC,gBAAQ,cACN,UAAU,CAAC,MAAM,EAAE;oBAClB,QAAQ;oBACR,QAAQ;oBACR,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;oBAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC;oBACpD,MAAM,EAAE,IAAA,0BAAgB,EAAC,MAAM,CAAC,EAAE,CAAC;iBACpC,CAAC,IAPW,MAAM,CAAC,EAAE,CAQb,CACZ,CAAC;QACJ,CAAC,CAAC,GACG,CACR,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,IAAI,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE;CACxE,CAAC,CAAC","sourcesContent":["// Family renderer: one family's presets as a uniform tile grid. Every family\n// renders through this; the per-preset tile decides wallpaper-vs-recessed by\n// whether it has a resolved thumbnail, so a family with no thumbnails just\n// renders recessed buttons of the same footprint. The tile renderer is the\n// `renderTile` slot or the default.\n//\n// The thumbnail URI comes from the platform-split `resolveImageUri`: the\n// source URL on web, the in-bundle file:// URI on native; undefined for a preset\n// with no thumbnail (the tile then renders its recessed variant).\n\nimport { Fragment } from 'react';\nimport { type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native';\nimport { presetTileTestId } from '../../lib/test-id';\nimport { PresetTile } from '../preset-tile';\nimport type { PresetView, RenderTile } from './preset-book-menu.types';\nimport { resolveImageUri } from './resolve-image-uri';\n\ninterface PresetGridProps {\n  readonly presets: ReadonlyArray<PresetView>;\n  readonly value: string | null;\n  readonly onSelect: (id: string | null) => void;\n  readonly disabled?: boolean | undefined;\n  /** Override the tile rendering (BYO tile, e.g. to add a badge). */\n  readonly renderTile?: RenderTile | undefined;\n  /** NativeWind class for the grid container; resolved via the `./nativewind` interop. */\n  readonly className?: string | undefined;\n  readonly style?: StyleProp<ViewStyle> | undefined;\n}\n\nconst defaultRenderTile: RenderTile = (preset, state) => (\n  <PresetTile\n    label={preset.label}\n    uri={state.uri}\n    selected={state.selected}\n    disabled={state.disabled}\n    onPress={state.onPress}\n    testID={state.testID}\n  />\n);\n\nexport function PresetGrid(props: PresetGridProps) {\n  const { presets, value, onSelect, disabled = false, renderTile, style } = props;\n  const renderItem = renderTile ?? defaultRenderTile;\n  // Resolve each preset's thumbnail URI; pure in (id, source), so React Compiler\n  // memoizes the map by `presets` when the library is compiled.\n  // The native resolver looks the thumbnail up by id in Bundle.main. For image\n  // presets the preset id and the thumbnail's bundle filename coincide (a\n  // background's image id IS its preset id); for composites they differ (the\n  // composite's thumb is bundled as `<composite-id>-thumb.webp`), so pass the\n  // source as the lookup key when it is a string and falls back to the preset\n  // id otherwise.\n  const uriById = new Map(\n    presets.map((p) => {\n      const lookupId = typeof p.source === 'string' ? p.source : p.id;\n      return [p.id, resolveImageUri(lookupId, p.source)] as const;\n    }),\n  );\n  return (\n    <View accessibilityRole=\"radiogroup\" accessibilityLabel=\"Presets\" style={[styles.grid, style]}>\n      {presets.map((preset) => {\n        const selected = value === preset.id;\n        return (\n          <Fragment key={preset.id}>\n            {renderItem(preset, {\n              selected,\n              disabled,\n              uri: uriById.get(preset.id),\n              onPress: () => onSelect(selected ? null : preset.id),\n              testID: presetTileTestId(preset.id),\n            })}\n          </Fragment>\n        );\n      })}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  grid: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, width: '100%' },\n});\n"]}

package/dist/src/components/preset-book-menu/resolve-image-uri.d.ts

@@ -0,0 +1,3 @@
+import type { ResolveImageUri } from './resolve-image-uri.types';
+export declare const resolveImageUri: ResolveImageUri;
+//# sourceMappingURL=resolve-image-uri.d.ts.map

package/dist/src/components/preset-book-menu/resolve-image-uri.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-image-uri.d.ts","sourceRoot":"","sources":["../../../../src/components/preset-book-menu/resolve-image-uri.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAajE,eAAO,MAAM,eAAe,EAAE,eAM7B,CAAC","sourcesContent":["// Native variant: the prebuild copied the curated WebP to a conventional\n// in-bundle location; the native module returns a displayable URI for it\n// (Android `asset:///...` so Fresco's asset fetcher loads it, iOS the\n// `Bundle.main` file URL). No second copy of the image.\n//\n// The `resolveImageUri` Expo function is optional here: a native build\n// predating it (or a non-background effect build) simply lacks it, so guard with\n// `?.` and fall back to the source (the preset name), which renders no thumbnail\n// rather than crashing.\n\nimport { requireNativeModule } from 'expo-modules-core';\nimport type { ResolveImageUri } from './resolve-image-uri.types';\n\ninterface ImageUriModule {\n  readonly resolveImageUri?: (id: string) => string | null;\n}\n\n// Resolve the module once, lazily; it is registered at the Expo module's\n// OnCreate, before any picker renders. Hoisted out of the per-call path so a\n// grid of N tiles does not perform N module lookups per render.\nlet cachedModule: ImageUriModule | undefined;\nconst nativeModule = (): ImageUriModule =>\n  (cachedModule ??= requireNativeModule<ImageUriModule>('RnWebrtcKaleidoscope'));\n\nexport const resolveImageUri: ResolveImageUri = (id, source) => {\n  // A numeric source is a Metro asset module id (from `require('./foo.webp')`)\n  // and is consumable directly by `<Image source={number}>`; the native module\n  // resolves only string preset names, so pass numbers straight through.\n  if (typeof source === 'number') return source;\n  return nativeModule().resolveImageUri?.(id) ?? source;\n};\n"]}

package/dist/src/components/preset-book-menu/resolve-image-uri.js

@@ -0,0 +1,28 @@
+"use strict";
+// Native variant: the prebuild copied the curated WebP to a conventional
+// in-bundle location; the native module returns a displayable URI for it
+// (Android `asset:///...` so Fresco's asset fetcher loads it, iOS the
+// `Bundle.main` file URL). No second copy of the image.
+//
+// The `resolveImageUri` Expo function is optional here: a native build
+// predating it (or a non-background effect build) simply lacks it, so guard with
+// `?.` and fall back to the source (the preset name), which renders no thumbnail
+// rather than crashing.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveImageUri = void 0;
+const expo_modules_core_1 = require("expo-modules-core");
+// Resolve the module once, lazily; it is registered at the Expo module's
+// OnCreate, before any picker renders. Hoisted out of the per-call path so a
+// grid of N tiles does not perform N module lookups per render.
+let cachedModule;
+const nativeModule = () => (cachedModule ??= (0, expo_modules_core_1.requireNativeModule)('RnWebrtcKaleidoscope'));
+const resolveImageUri = (id, source) => {
+    // A numeric source is a Metro asset module id (from `require('./foo.webp')`)
+    // and is consumable directly by `<Image source={number}>`; the native module
+    // resolves only string preset names, so pass numbers straight through.
+    if (typeof source === 'number')
+        return source;
+    return nativeModule().resolveImageUri?.(id) ?? source;
+};
+exports.resolveImageUri = resolveImageUri;
+//# sourceMappingURL=resolve-image-uri.js.map

package/dist/src/components/preset-book-menu/resolve-image-uri.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-image-uri.js","sourceRoot":"","sources":["../../../../src/components/preset-book-menu/resolve-image-uri.ts"],"names":[],"mappings":";AAAA,yEAAyE;AACzE,yEAAyE;AACzE,sEAAsE;AACtE,wDAAwD;AACxD,EAAE;AACF,uEAAuE;AACvE,iFAAiF;AACjF,iFAAiF;AACjF,wBAAwB;;;AAExB,yDAAwD;AAOxD,yEAAyE;AACzE,6EAA6E;AAC7E,gEAAgE;AAChE,IAAI,YAAwC,CAAC;AAC7C,MAAM,YAAY,GAAG,GAAmB,EAAE,CACxC,CAAC,YAAY,KAAK,IAAA,uCAAmB,EAAiB,sBAAsB,CAAC,CAAC,CAAC;AAE1E,MAAM,eAAe,GAAoB,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE;IAC7D,6EAA6E;IAC7E,6EAA6E;IAC7E,uEAAuE;IACvE,IAAI,OAAO,MAAM,KAAK,QAAQ;QAAE,OAAO,MAAM,CAAC;IAC9C,OAAO,YAAY,EAAE,CAAC,eAAe,EAAE,CAAC,EAAE,CAAC,IAAI,MAAM,CAAC;AACxD,CAAC,CAAC;AANW,QAAA,eAAe,GAAf,eAAe,CAM1B","sourcesContent":["// Native variant: the prebuild copied the curated WebP to a conventional\n// in-bundle location; the native module returns a displayable URI for it\n// (Android `asset:///...` so Fresco's asset fetcher loads it, iOS the\n// `Bundle.main` file URL). No second copy of the image.\n//\n// The `resolveImageUri` Expo function is optional here: a native build\n// predating it (or a non-background effect build) simply lacks it, so guard with\n// `?.` and fall back to the source (the preset name), which renders no thumbnail\n// rather than crashing.\n\nimport { requireNativeModule } from 'expo-modules-core';\nimport type { ResolveImageUri } from './resolve-image-uri.types';\n\ninterface ImageUriModule {\n  readonly resolveImageUri?: (id: string) => string | null;\n}\n\n// Resolve the module once, lazily; it is registered at the Expo module's\n// OnCreate, before any picker renders. Hoisted out of the per-call path so a\n// grid of N tiles does not perform N module lookups per render.\nlet cachedModule: ImageUriModule | undefined;\nconst nativeModule = (): ImageUriModule =>\n  (cachedModule ??= requireNativeModule<ImageUriModule>('RnWebrtcKaleidoscope'));\n\nexport const resolveImageUri: ResolveImageUri = (id, source) => {\n  // A numeric source is a Metro asset module id (from `require('./foo.webp')`)\n  // and is consumable directly by `<Image source={number}>`; the native module\n  // resolves only string preset names, so pass numbers straight through.\n  if (typeof source === 'number') return source;\n  return nativeModule().resolveImageUri?.(id) ?? source;\n};\n"]}

package/dist/src/components/preset-book-menu/resolve-image-uri.types.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Resolve a displayable thumbnail source for a preset.
+ * - Web: the preset `source` is already a usable image URL; returned as-is.
+ * - Native: the bundled WebP lives at a conventional in-bundle location; the
+ *   native module returns a `file://` URI for it (no second copy of the image).
+ *   When `source` is a `number` (a Metro asset module id), it bypasses the
+ *   native module and is returned as-is so `<Image source={number}>` can load
+ *   it directly through Metro's asset pipeline.
+ * Returns `undefined` when no thumbnail can be resolved (the tile shows just its
+ * label).
+ */
+export type ResolveImageUri = (id: string, source: string | number | undefined) => string | number | undefined;
+//# sourceMappingURL=resolve-image-uri.types.d.ts.map

package/dist/src/components/preset-book-menu/resolve-image-uri.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-image-uri.types.d.ts","sourceRoot":"","sources":["../../../../src/components/preset-book-menu/resolve-image-uri.types.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AACH,MAAM,MAAM,eAAe,GAAG,CAC5B,EAAE,EAAE,MAAM,EACV,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,KAChC,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC","sourcesContent":["// Shared contract for the platform-split thumbnail resolver. No runtime imports\n// from platform-specific packages (web and native variants both import this).\n\n/**\n * Resolve a displayable thumbnail source for a preset.\n * - Web: the preset `source` is already a usable image URL; returned as-is.\n * - Native: the bundled WebP lives at a conventional in-bundle location; the\n *   native module returns a `file://` URI for it (no second copy of the image).\n *   When `source` is a `number` (a Metro asset module id), it bypasses the\n *   native module and is returned as-is so `<Image source={number}>` can load\n *   it directly through Metro's asset pipeline.\n * Returns `undefined` when no thumbnail can be resolved (the tile shows just its\n * label).\n */\nexport type ResolveImageUri = (\n  id: string,\n  source: string | number | undefined,\n) => string | number | undefined;\n"]}

package/dist/src/components/preset-book-menu/resolve-image-uri.types.js

@@ -0,0 +1,5 @@
+"use strict";
+// Shared contract for the platform-split thumbnail resolver. No runtime imports
+// from platform-specific packages (web and native variants both import this).
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=resolve-image-uri.types.js.map

package/dist/src/components/preset-book-menu/resolve-image-uri.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-image-uri.types.js","sourceRoot":"","sources":["../../../../src/components/preset-book-menu/resolve-image-uri.types.ts"],"names":[],"mappings":";AAAA,gFAAgF;AAChF,8EAA8E","sourcesContent":["// Shared contract for the platform-split thumbnail resolver. No runtime imports\n// from platform-specific packages (web and native variants both import this).\n\n/**\n * Resolve a displayable thumbnail source for a preset.\n * - Web: the preset `source` is already a usable image URL; returned as-is.\n * - Native: the bundled WebP lives at a conventional in-bundle location; the\n *   native module returns a `file://` URI for it (no second copy of the image).\n *   When `source` is a `number` (a Metro asset module id), it bypasses the\n *   native module and is returned as-is so `<Image source={number}>` can load\n *   it directly through Metro's asset pipeline.\n * Returns `undefined` when no thumbnail can be resolved (the tile shows just its\n * label).\n */\nexport type ResolveImageUri = (\n  id: string,\n  source: string | number | undefined,\n) => string | number | undefined;\n"]}

package/dist/src/components/preset-book-menu/resolve-image-uri.web.d.ts

@@ -0,0 +1,3 @@
+import type { ResolveImageUri } from './resolve-image-uri.types';
+export declare const resolveImageUri: ResolveImageUri;
+//# sourceMappingURL=resolve-image-uri.web.d.ts.map

package/dist/src/components/preset-book-menu/resolve-image-uri.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-image-uri.web.d.ts","sourceRoot":"","sources":["../../../../src/components/preset-book-menu/resolve-image-uri.web.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEjE,eAAO,MAAM,eAAe,EAAE,eAAyC,CAAC","sourcesContent":["// Web variant: the preset source is already a bundled image URL, so the\n// thumbnail URI is the source itself.\n//\n// How this file gets picked over the native sibling: Metro resolves the bare\n// `../resolve-image-uri` import to `.web.ts` via platform extensions; for\n// non-Metro dist consumers it is selected by the top-level `browser` FIELD remap\n// in package.json (dist/.../resolve-image-uri.js -> .web.js). That is a\n// different mechanism than the `backgrounds/*` subpath `exports` browser\n// CONDITIONS, because this file is reached by an internal relative import, not a\n// subpath export. Adding another platform-split file under src/ui consumed via a\n// bare import means extending that `browser` field, not adding an exports entry.\n\nimport type { ResolveImageUri } from './resolve-image-uri.types';\n\nexport const resolveImageUri: ResolveImageUri = (_id, source) => source;\n"]}

package/dist/src/components/preset-book-menu/resolve-image-uri.web.js

@@ -0,0 +1,17 @@
+"use strict";
+// Web variant: the preset source is already a bundled image URL, so the
+// thumbnail URI is the source itself.
+//
+// How this file gets picked over the native sibling: Metro resolves the bare
+// `../resolve-image-uri` import to `.web.ts` via platform extensions; for
+// non-Metro dist consumers it is selected by the top-level `browser` FIELD remap
+// in package.json (dist/.../resolve-image-uri.js -> .web.js). That is a
+// different mechanism than the `backgrounds/*` subpath `exports` browser
+// CONDITIONS, because this file is reached by an internal relative import, not a
+// subpath export. Adding another platform-split file under src/ui consumed via a
+// bare import means extending that `browser` field, not adding an exports entry.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveImageUri = void 0;
+const resolveImageUri = (_id, source) => source;
+exports.resolveImageUri = resolveImageUri;
+//# sourceMappingURL=resolve-image-uri.web.js.map