react-native-webrtc-kaleidoscope 2.0.0 → 2.1.0

package/dist/src/components/preset-tile/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/preset-tile/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAGL,KAAK,SAAS,EAId,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,UAAU,eAAe;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B,gDAAgD;IAChD,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,8EAA8E;IAC9E,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,qDAAqD;IACrD,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;IAClD,mEAAmE;IACnE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACtC;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CA6ChD","sourcesContent":["// Leaf: one preset tile. The single item shape for every family; it prints the\n// label and, if the preset has a resolved thumbnail, paints it as a wallpaper\n// behind the label; with no thumbnail it is a recessed pressable button of the\n// SAME footprint, so a thumbnail-less preset never breaks the grid's flow. The\n// variant is chosen per preset by `uri` presence, not by family. Hover/press\n// \"light up\" via an overlay sheet (web hover is inert on native, where\n// `hovered` is simply undefined).\n//\n// The tile is a fixed 16:9 box (`aspectRatio`), matching the 1280x720 images and\n// 320x180 thumbnails, so cover-fit shows the whole image and every tile is the\n// same shape regardless of how wide a column resolves to. Width comes from the\n// flex row (`flexBasis`/`maxWidth`); `aspectRatio` derives the height from it.\n// (Historical note: an earlier attempt rendered thin strips when Yoga failed to\n// derive height from a percentage `flexBasis` + `aspectRatio`; if that recurs on\n// a target, restore an explicit `height` floor here.)\n//\n// Styling is headless: defaults + `style` (wins) + `className` (consumed by the\n// `./nativewind` interop, inert without it).\n\nimport {\n  Image,\n  Pressable,\n  type StyleProp,\n  StyleSheet,\n  Text,\n  View,\n  type ViewStyle,\n} from 'react-native';\n\ninterface PresetTileProps {\n  readonly label: string;\n  /**\n   * Resolved thumbnail source. A `string` is a URL (web) or file:// URI (native\n   * preset-name lookup); a `number` is a Metro asset module id consumed directly\n   * by `<Image source={number}>`. Undefined renders the recessed button.\n   */\n  readonly uri: string | number | undefined;\n  readonly selected: boolean;\n  readonly disabled?: boolean | undefined;\n  readonly onPress: () => void;\n  /** Optional corner badge, e.g. \"demo-owned\". */\n  readonly badge?: string | undefined;\n  /** NativeWind class; resolved via the `./nativewind` interop registration. */\n  readonly className?: string | undefined;\n  /** RN style override; applied after the defaults. */\n  readonly style?: StyleProp<ViewStyle> | undefined;\n  /** Deterministic `accessibilityIdentifier` (`kld.preset.<id>`). */\n  readonly testID?: string | undefined;\n}\n\nexport function PresetTile(props: PresetTileProps) {\n  const { label, uri, selected, disabled = false, onPress, badge, style, testID } = props;\n  const hasWallpaper = !!uri;\n  return (\n    <Pressable\n      accessibilityRole=\"radio\"\n      accessibilityState={{ checked: selected, disabled }}\n      testID={testID}\n      disabled={disabled}\n      onPress={onPress}\n      style={[\n        styles.tile,\n        hasWallpaper ? styles.wallpaper : styles.recessed,\n        selected && styles.selected,\n        disabled && styles.disabled,\n        style,\n      ]}\n    >\n      {({ pressed, hovered = false }: { pressed: boolean; hovered?: boolean }) => (\n        <>\n          {hasWallpaper ? (\n            <Image\n              source={typeof uri === 'number' ? uri : { uri }}\n              style={styles.thumb}\n              resizeMode=\"cover\"\n            />\n          ) : null}\n          {hasWallpaper ? <View style={styles.scrim} /> : null}\n          {badge ? (\n            <View style={styles.badge}>\n              <Text style={styles.badgeText}>{badge}</Text>\n            </View>\n          ) : null}\n          <View style={styles.labelWrap}>\n            <Text numberOfLines={2} style={styles.label}>\n              {label}\n            </Text>\n          </View>\n          {hovered || pressed ? (\n            <View pointerEvents=\"none\" style={[styles.glow, pressed && styles.glowPressed]} />\n          ) : null}\n        </>\n      )}\n    </Pressable>\n  );\n}\n\nconst styles = StyleSheet.create({\n  tile: {\n    aspectRatio: 16 / 9,\n    minWidth: 96,\n    // GENERAL React Native gotcha worth naming, because it bites LLM-generated\n    // layouts in particular: Yoga (RN's flex engine) will silently collapse a\n    // view to zero height when the layout describes height purely by derivation\n    // (a percentage `flexBasis` plus an `aspectRatio`, or content that has not\n    // measured yet) without an explicit floor. It smashes shut like an\n    // unbroken IE6 `<div>`. If a row of tiles ever renders as thin strips, the\n    // first thing to check is whether each tile has a `height` or `minHeight`\n    // anywhere in its chain.\n    //\n    // THIS SITE: declared `flexBasis: '30%'` + `aspectRatio: 16/9` and no\n    // height floor; each tile resolved to 118 x 4 px on iOS (Maestro hierarchy\n    // bounds), turning every wallpaper tile into a thin gray strip. The\n    // recessed variant survived only because its visible 2px border made the\n    // 4px collapse read as a deliberate divider. 54 = 96 * 9 / 16 (the\n    // minWidth's aspect-derived height), so a tile whose width grows past the\n    // floor still tracks the 16:9 ratio via `aspectRatio`.\n    minHeight: 54,\n    flexGrow: 1,\n    flexBasis: '30%',\n    maxWidth: '32%',\n    borderRadius: 6,\n    overflow: 'hidden',\n    borderWidth: 2,\n    borderColor: 'transparent',\n  },\n  // Wallpaper variant: the thumbnail fills the tile, label over a legibility scrim.\n  wallpaper: { backgroundColor: '#1a1a1a' },\n  // Recessed variant (no thumbnail): a pressable inset area, same footprint.\n  recessed: { backgroundColor: '#242424', borderColor: '#333' },\n  selected: { borderColor: '#4a8f3f' },\n  disabled: { opacity: 0.5 },\n  thumb: { ...StyleSheet.absoluteFillObject },\n  scrim: { ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(0, 0, 0, 0.35)' },\n  badge: {\n    position: 'absolute',\n    top: 4,\n    left: 4,\n    backgroundColor: 'rgba(217, 119, 6, 0.92)',\n    borderRadius: 4,\n    paddingHorizontal: 5,\n    paddingVertical: 2,\n  },\n  badgeText: { color: '#fff', fontSize: 9, fontWeight: '700' },\n  labelWrap: {\n    ...StyleSheet.absoluteFillObject,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  label: {\n    color: '#fff',\n    fontSize: 12,\n    fontWeight: '700',\n    textAlign: 'center',\n    paddingHorizontal: 6,\n  },\n  // Hover/press \"lights up\": a translucent sheet over the whole tile.\n  glow: { ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(255, 255, 255, 0.12)' },\n  glowPressed: { backgroundColor: 'rgba(255, 255, 255, 0.04)' },\n});\n"]}

package/dist/src/components/preset-tile/index.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PresetTile = PresetTile;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Leaf: one preset tile. The single item shape for every family; it prints the
+// label and, if the preset has a resolved thumbnail, paints it as a wallpaper
+// behind the label; with no thumbnail it is a recessed pressable button of the
+// SAME footprint, so a thumbnail-less preset never breaks the grid's flow. The
+// variant is chosen per preset by `uri` presence, not by family. Hover/press
+// "light up" via an overlay sheet (web hover is inert on native, where
+// `hovered` is simply undefined).
+//
+// The tile is a fixed 16:9 box (`aspectRatio`), matching the 1280x720 images and
+// 320x180 thumbnails, so cover-fit shows the whole image and every tile is the
+// same shape regardless of how wide a column resolves to. Width comes from the
+// flex row (`flexBasis`/`maxWidth`); `aspectRatio` derives the height from it.
+// (Historical note: an earlier attempt rendered thin strips when Yoga failed to
+// derive height from a percentage `flexBasis` + `aspectRatio`; if that recurs on
+// a target, restore an explicit `height` floor here.)
+//
+// Styling is headless: defaults + `style` (wins) + `className` (consumed by the
+// `./nativewind` interop, inert without it).
+const react_native_1 = require("react-native");
+function PresetTile(props) {
+    const { label, uri, selected, disabled = false, onPress, badge, style, testID } = props;
+    const hasWallpaper = !!uri;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "radio", accessibilityState: { checked: selected, disabled }, testID: testID, disabled: disabled, onPress: onPress, style: [
+            styles.tile,
+            hasWallpaper ? styles.wallpaper : styles.recessed,
+            selected && styles.selected,
+            disabled && styles.disabled,
+            style,
+        ], children: ({ pressed, hovered = false }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasWallpaper ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: typeof uri === 'number' ? uri : { uri }, style: styles.thumb, resizeMode: "cover" })) : null, hasWallpaper ? (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.scrim }) : null, badge ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.badge, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.badgeText, children: badge }) })) : null, (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.labelWrap, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: 2, style: styles.label, children: label }) }), hovered || pressed ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "none", style: [styles.glow, pressed && styles.glowPressed] })) : null] })) }));
+}
+const styles = react_native_1.StyleSheet.create({
+    tile: {
+        aspectRatio: 16 / 9,
+        minWidth: 96,
+        // GENERAL React Native gotcha worth naming, because it bites LLM-generated
+        // layouts in particular: Yoga (RN's flex engine) will silently collapse a
+        // view to zero height when the layout describes height purely by derivation
+        // (a percentage `flexBasis` plus an `aspectRatio`, or content that has not
+        // measured yet) without an explicit floor. It smashes shut like an
+        // unbroken IE6 `<div>`. If a row of tiles ever renders as thin strips, the
+        // first thing to check is whether each tile has a `height` or `minHeight`
+        // anywhere in its chain.
+        //
+        // THIS SITE: declared `flexBasis: '30%'` + `aspectRatio: 16/9` and no
+        // height floor; each tile resolved to 118 x 4 px on iOS (Maestro hierarchy
+        // bounds), turning every wallpaper tile into a thin gray strip. The
+        // recessed variant survived only because its visible 2px border made the
+        // 4px collapse read as a deliberate divider. 54 = 96 * 9 / 16 (the
+        // minWidth's aspect-derived height), so a tile whose width grows past the
+        // floor still tracks the 16:9 ratio via `aspectRatio`.
+        minHeight: 54,
+        flexGrow: 1,
+        flexBasis: '30%',
+        maxWidth: '32%',
+        borderRadius: 6,
+        overflow: 'hidden',
+        borderWidth: 2,
+        borderColor: 'transparent',
+    },
+    // Wallpaper variant: the thumbnail fills the tile, label over a legibility scrim.
+    wallpaper: { backgroundColor: '#1a1a1a' },
+    // Recessed variant (no thumbnail): a pressable inset area, same footprint.
+    recessed: { backgroundColor: '#242424', borderColor: '#333' },
+    selected: { borderColor: '#4a8f3f' },
+    disabled: { opacity: 0.5 },
+    thumb: { ...react_native_1.StyleSheet.absoluteFillObject },
+    scrim: { ...react_native_1.StyleSheet.absoluteFillObject, backgroundColor: 'rgba(0, 0, 0, 0.35)' },
+    badge: {
+        position: 'absolute',
+        top: 4,
+        left: 4,
+        backgroundColor: 'rgba(217, 119, 6, 0.92)',
+        borderRadius: 4,
+        paddingHorizontal: 5,
+        paddingVertical: 2,
+    },
+    badgeText: { color: '#fff', fontSize: 9, fontWeight: '700' },
+    labelWrap: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    label: {
+        color: '#fff',
+        fontSize: 12,
+        fontWeight: '700',
+        textAlign: 'center',
+        paddingHorizontal: 6,
+    },
+    // Hover/press "lights up": a translucent sheet over the whole tile.
+    glow: { ...react_native_1.StyleSheet.absoluteFillObject, backgroundColor: 'rgba(255, 255, 255, 0.12)' },
+    glowPressed: { backgroundColor: 'rgba(255, 255, 255, 0.04)' },
+});
+//# sourceMappingURL=index.js.map

package/dist/src/components/preset-tile/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/preset-tile/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Leaf: one preset tile. The single item shape for every family; it prints the\n// label and, if the preset has a resolved thumbnail, paints it as a wallpaper\n// behind the label; with no thumbnail it is a recessed pressable button of the\n// SAME footprint, so a thumbnail-less preset never breaks the grid's flow. The\n// variant is chosen per preset by `uri` presence, not by family. Hover/press\n// \"light up\" via an overlay sheet (web hover is inert on native, where\n// `hovered` is simply undefined).\n//\n// The tile is a fixed 16:9 box (`aspectRatio`), matching the 1280x720 images and\n// 320x180 thumbnails, so cover-fit shows the whole image and every tile is the\n// same shape regardless of how wide a column resolves to. Width comes from the\n// flex row (`flexBasis`/`maxWidth`); `aspectRatio` derives the height from it.\n// (Historical note: an earlier attempt rendered thin strips when Yoga failed to\n// derive height from a percentage `flexBasis` + `aspectRatio`; if that recurs on\n// a target, restore an explicit `height` floor here.)\n//\n// Styling is headless: defaults + `style` (wins) + `className` (consumed by the\n// `./nativewind` interop, inert without it).\n\nimport {\n  Image,\n  Pressable,\n  type StyleProp,\n  StyleSheet,\n  Text,\n  View,\n  type ViewStyle,\n} from 'react-native';\n\ninterface PresetTileProps {\n  readonly label: string;\n  /**\n   * Resolved thumbnail source. A `string` is a URL (web) or file:// URI (native\n   * preset-name lookup); a `number` is a Metro asset module id consumed directly\n   * by `<Image source={number}>`. Undefined renders the recessed button.\n   */\n  readonly uri: string | number | undefined;\n  readonly selected: boolean;\n  readonly disabled?: boolean | undefined;\n  readonly onPress: () => void;\n  /** Optional corner badge, e.g. \"demo-owned\". */\n  readonly badge?: string | undefined;\n  /** NativeWind class; resolved via the `./nativewind` interop registration. */\n  readonly className?: string | undefined;\n  /** RN style override; applied after the defaults. */\n  readonly style?: StyleProp<ViewStyle> | undefined;\n  /** Deterministic `accessibilityIdentifier` (`kld.preset.<id>`). */\n  readonly testID?: string | undefined;\n}\n\nexport function PresetTile(props: PresetTileProps) {\n  const { label, uri, selected, disabled = false, onPress, badge, style, testID } = props;\n  const hasWallpaper = !!uri;\n  return (\n    <Pressable\n      accessibilityRole=\"radio\"\n      accessibilityState={{ checked: selected, disabled }}\n      testID={testID}\n      disabled={disabled}\n      onPress={onPress}\n      style={[\n        styles.tile,\n        hasWallpaper ? styles.wallpaper : styles.recessed,\n        selected && styles.selected,\n        disabled && styles.disabled,\n        style,\n      ]}\n    >\n      {({ pressed, hovered = false }: { pressed: boolean; hovered?: boolean }) => (\n        <>\n          {hasWallpaper ? (\n            <Image\n              source={typeof uri === 'number' ? uri : { uri }}\n              style={styles.thumb}\n              resizeMode=\"cover\"\n            />\n          ) : null}\n          {hasWallpaper ? <View style={styles.scrim} /> : null}\n          {badge ? (\n            <View style={styles.badge}>\n              <Text style={styles.badgeText}>{badge}</Text>\n            </View>\n          ) : null}\n          <View style={styles.labelWrap}>\n            <Text numberOfLines={2} style={styles.label}>\n              {label}\n            </Text>\n          </View>\n          {hovered || pressed ? (\n            <View pointerEvents=\"none\" style={[styles.glow, pressed && styles.glowPressed]} />\n          ) : null}\n        </>\n      )}\n    </Pressable>\n  );\n}\n\nconst styles = StyleSheet.create({\n  tile: {\n    aspectRatio: 16 / 9,\n    minWidth: 96,\n    // GENERAL React Native gotcha worth naming, because it bites LLM-generated\n    // layouts in particular: Yoga (RN's flex engine) will silently collapse a\n    // view to zero height when the layout describes height purely by derivation\n    // (a percentage `flexBasis` plus an `aspectRatio`, or content that has not\n    // measured yet) without an explicit floor. It smashes shut like an\n    // unbroken IE6 `<div>`. If a row of tiles ever renders as thin strips, the\n    // first thing to check is whether each tile has a `height` or `minHeight`\n    // anywhere in its chain.\n    //\n    // THIS SITE: declared `flexBasis: '30%'` + `aspectRatio: 16/9` and no\n    // height floor; each tile resolved to 118 x 4 px on iOS (Maestro hierarchy\n    // bounds), turning every wallpaper tile into a thin gray strip. The\n    // recessed variant survived only because its visible 2px border made the\n    // 4px collapse read as a deliberate divider. 54 = 96 * 9 / 16 (the\n    // minWidth's aspect-derived height), so a tile whose width grows past the\n    // floor still tracks the 16:9 ratio via `aspectRatio`.\n    minHeight: 54,\n    flexGrow: 1,\n    flexBasis: '30%',\n    maxWidth: '32%',\n    borderRadius: 6,\n    overflow: 'hidden',\n    borderWidth: 2,\n    borderColor: 'transparent',\n  },\n  // Wallpaper variant: the thumbnail fills the tile, label over a legibility scrim.\n  wallpaper: { backgroundColor: '#1a1a1a' },\n  // Recessed variant (no thumbnail): a pressable inset area, same footprint.\n  recessed: { backgroundColor: '#242424', borderColor: '#333' },\n  selected: { borderColor: '#4a8f3f' },\n  disabled: { opacity: 0.5 },\n  thumb: { ...StyleSheet.absoluteFillObject },\n  scrim: { ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(0, 0, 0, 0.35)' },\n  badge: {\n    position: 'absolute',\n    top: 4,\n    left: 4,\n    backgroundColor: 'rgba(217, 119, 6, 0.92)',\n    borderRadius: 4,\n    paddingHorizontal: 5,\n    paddingVertical: 2,\n  },\n  badgeText: { color: '#fff', fontSize: 9, fontWeight: '700' },\n  labelWrap: {\n    ...StyleSheet.absoluteFillObject,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  label: {\n    color: '#fff',\n    fontSize: 12,\n    fontWeight: '700',\n    textAlign: 'center',\n    paddingHorizontal: 6,\n  },\n  // Hover/press \"lights up\": a translucent sheet over the whole tile.\n  glow: { ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(255, 255, 255, 0.12)' },\n  glowPressed: { backgroundColor: 'rgba(255, 255, 255, 0.04)' },\n});\n"]}

package/dist/src/components/theme/provider.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import type { KaleidoscopeThemeSlots, SlotStyle, ThemeSlot } from './slots';
+/**
+ * Wrap the controls UI to theme every primitive at once. `value` is the slot
+ * bank (`labelClassName`, `sliderStyle`, ...); memoize it at the call site.
+ */
+export declare function KaleidoscopeThemeProvider({ value, children, }: {
+    readonly value?: KaleidoscopeThemeSlots;
+    readonly children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/** The full slot bank from context (empty when no provider is mounted). */
+export declare function useKaleidoscopeTheme(): KaleidoscopeThemeSlots;
+/** The `{ className, style }` pair for one slot, for a primitive to merge last. */
+export declare function useThemeSlot(slot: ThemeSlot): {
+    readonly className?: string;
+    readonly style?: SlotStyle;
+};
+//# sourceMappingURL=provider.d.ts.map

package/dist/src/components/theme/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../../src/components/theme/provider.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,sBAAsB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAM5E;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,KAAK,EACL,QAAQ,GACT,EAAE;IACD,QAAQ,CAAC,KAAK,CAAC,EAAE,sBAAsB,CAAC;IACxC,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAC9B,2CAEA;AAED,2EAA2E;AAC3E,wBAAgB,oBAAoB,IAAI,sBAAsB,CAE7D;AAED,mFAAmF;AACnF,wBAAgB,YAAY,CAAC,IAAI,EAAE,SAAS,GAAG;IAC7C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;CAC5B,CAMA","sourcesContent":["// The theme provider: one context holding the flat slot bank that every control\n// primitive reads to self-decorate. Mirrors the React Native Reusables\n// `TextClassContext` idea, generalized to a slot map.\n//\n// Pass a STABLE `value` (React Compiler memoizes it on the consumer side;\n// otherwise memoize it by hand): a fresh object each render re-renders every\n// themed primitive.\n//\n// Leaf module: imports only `react` and the slot types. It must never import from\n// sibling component modules or from `ui/`, so `ui/` can depend on it (the one\n// allowed `ui/` -> `theme/` edge) without a cycle.\n\nimport type { ReactNode } from 'react';\nimport { createContext, useContext } from 'react';\nimport type { KaleidoscopeThemeSlots, SlotStyle, ThemeSlot } from './slots';\n\nconst EMPTY: KaleidoscopeThemeSlots = {};\n\nconst ThemeContext = createContext<KaleidoscopeThemeSlots>(EMPTY);\n\n/**\n * Wrap the controls UI to theme every primitive at once. `value` is the slot\n * bank (`labelClassName`, `sliderStyle`, ...); memoize it at the call site.\n */\nexport function KaleidoscopeThemeProvider({\n  value,\n  children,\n}: {\n  readonly value?: KaleidoscopeThemeSlots;\n  readonly children: ReactNode;\n}) {\n  return <ThemeContext.Provider value={value ?? EMPTY}>{children}</ThemeContext.Provider>;\n}\n\n/** The full slot bank from context (empty when no provider is mounted). */\nexport function useKaleidoscopeTheme(): KaleidoscopeThemeSlots {\n  return useContext(ThemeContext);\n}\n\n/** The `{ className, style }` pair for one slot, for a primitive to merge last. */\nexport function useThemeSlot(slot: ThemeSlot): {\n  readonly className?: string;\n  readonly style?: SlotStyle;\n} {\n  const slots = useContext(ThemeContext);\n  return {\n    className: slots[`${slot}ClassName`],\n    style: slots[`${slot}Style`],\n  };\n}\n"]}

package/dist/src/components/theme/provider.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KaleidoscopeThemeProvider = KaleidoscopeThemeProvider;
+exports.useKaleidoscopeTheme = useKaleidoscopeTheme;
+exports.useThemeSlot = useThemeSlot;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const EMPTY = {};
+const ThemeContext = (0, react_1.createContext)(EMPTY);
+/**
+ * Wrap the controls UI to theme every primitive at once. `value` is the slot
+ * bank (`labelClassName`, `sliderStyle`, ...); memoize it at the call site.
+ */
+function KaleidoscopeThemeProvider({ value, children, }) {
+    return (0, jsx_runtime_1.jsx)(ThemeContext.Provider, { value: value ?? EMPTY, children: children });
+}
+/** The full slot bank from context (empty when no provider is mounted). */
+function useKaleidoscopeTheme() {
+    return (0, react_1.useContext)(ThemeContext);
+}
+/** The `{ className, style }` pair for one slot, for a primitive to merge last. */
+function useThemeSlot(slot) {
+    const slots = (0, react_1.useContext)(ThemeContext);
+    return {
+        className: slots[`${slot}ClassName`],
+        style: slots[`${slot}Style`],
+    };
+}
+//# sourceMappingURL=provider.js.map

package/dist/src/components/theme/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.js","sourceRoot":"","sources":["../../../../src/components/theme/provider.tsx"],"names":[],"mappings":";;;;;;AAaA,iCAAkD;AAGlD,MAAM,KAAK,GAA2B,EAAE,CAAC;AAEzC,MAAM,YAAY,GAAG,IAAA,qBAAa,EAAyB,KAAK,CAAC,CAAC;AAElE;;;GAGG;AACH,mCAA0C,EACxC,KAAK,EACL,QAAQ,GAIT;IACC,OAAO,uBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAAI,KAAK,YAAG,QAAQ,GAAyB,CAAC;AAC1F,CAAC;AAED,2EAA2E;AAC3E;IACE,OAAO,IAAA,kBAAU,EAAC,YAAY,CAAC,CAAC;AAClC,CAAC;AAED,mFAAmF;AACnF,sBAA6B,IAAe;IAI1C,MAAM,KAAK,GAAG,IAAA,kBAAU,EAAC,YAAY,CAAC,CAAC;IACvC,OAAO;QACL,SAAS,EAAE,KAAK,CAAC,GAAG,IAAI,WAAW,CAAC;QACpC,KAAK,EAAE,KAAK,CAAC,GAAG,IAAI,OAAO,CAAC;KAC7B,CAAC;AACJ,CAAC","sourcesContent":["// The theme provider: one context holding the flat slot bank that every control\n// primitive reads to self-decorate. Mirrors the React Native Reusables\n// `TextClassContext` idea, generalized to a slot map.\n//\n// Pass a STABLE `value` (React Compiler memoizes it on the consumer side;\n// otherwise memoize it by hand): a fresh object each render re-renders every\n// themed primitive.\n//\n// Leaf module: imports only `react` and the slot types. It must never import from\n// sibling component modules or from `ui/`, so `ui/` can depend on it (the one\n// allowed `ui/` -> `theme/` edge) without a cycle.\n\nimport type { ReactNode } from 'react';\nimport { createContext, useContext } from 'react';\nimport type { KaleidoscopeThemeSlots, SlotStyle, ThemeSlot } from './slots';\n\nconst EMPTY: KaleidoscopeThemeSlots = {};\n\nconst ThemeContext = createContext<KaleidoscopeThemeSlots>(EMPTY);\n\n/**\n * Wrap the controls UI to theme every primitive at once. `value` is the slot\n * bank (`labelClassName`, `sliderStyle`, ...); memoize it at the call site.\n */\nexport function KaleidoscopeThemeProvider({\n  value,\n  children,\n}: {\n  readonly value?: KaleidoscopeThemeSlots;\n  readonly children: ReactNode;\n}) {\n  return <ThemeContext.Provider value={value ?? EMPTY}>{children}</ThemeContext.Provider>;\n}\n\n/** The full slot bank from context (empty when no provider is mounted). */\nexport function useKaleidoscopeTheme(): KaleidoscopeThemeSlots {\n  return useContext(ThemeContext);\n}\n\n/** The `{ className, style }` pair for one slot, for a primitive to merge last. */\nexport function useThemeSlot(slot: ThemeSlot): {\n  readonly className?: string;\n  readonly style?: SlotStyle;\n} {\n  const slots = useContext(ThemeContext);\n  return {\n    className: slots[`${slot}ClassName`],\n    style: slots[`${slot}Style`],\n  };\n}\n"]}

package/dist/src/components/theme/slots.d.ts

@@ -0,0 +1,17 @@
+import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native';
+/** A style value for any slot (container, text, or image targets). */
+export type SlotStyle = StyleProp<ViewStyle | TextStyle | ImageStyle>;
+/** Semantic slot names: one per primitive component, one per interaction state. */
+export type ThemeSlot = 'label' | 'readout' | 'slider' | 'colorPicker' | 'button' | 'tabs' | 'tile' | 'section' | 'active' | 'inactive' | 'disabled';
+/**
+ * The theme bank: a `<slot>ClassName` (resolved by the `./nativewind` interop)
+ * and a `<slot>Style` (the always-works RN fallback) per slot. All optional; an
+ * unset slot falls back to the primitive's built-in default. `readout` is the
+ * value display (named distinctly from a control's mutating `value`).
+ */
+export type KaleidoscopeThemeSlots = {
+    readonly [S in ThemeSlot as `${S}ClassName`]?: string;
+} & {
+    readonly [S in ThemeSlot as `${S}Style`]?: SlotStyle;
+};
+//# sourceMappingURL=slots.d.ts.map

package/dist/src/components/theme/slots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slots.d.ts","sourceRoot":"","sources":["../../../../src/components/theme/slots.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEhF,sEAAsE;AACtE,MAAM,MAAM,SAAS,GAAG,SAAS,CAAC,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;AAEtE,mFAAmF;AACnF,MAAM,MAAM,SAAS,GACjB,OAAO,GACP,SAAS,GACT,QAAQ,GACR,aAAa,GACb,QAAQ,GACR,MAAM,GACN,MAAM,GACN,SAAS,GACT,QAAQ,GACR,UAAU,GACV,UAAU,CAAC;AAEf;;;;;GAKG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,CAAC,IAAI,SAAS,IAAI,GAAG,CAAC,WAAW,CAAC,CAAC,EAAE,MAAM;CACtD,GAAG;IACF,QAAQ,EAAE,CAAC,IAAI,SAAS,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,SAAS;CACrD,CAAC","sourcesContent":["// The controls theme slot bank: one className + style pair per primitive\n// component and per interaction state. A primitive reads its slot via\n// `useThemeSlot` and merges it AFTER its built-in defaults (local props win).\n//\n// Leaf module: imports only react-native types, nothing from sibling `controls/`\n// modules or from `ui/`, so `ui/` can read the theme without an import cycle.\n\nimport type { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native';\n\n/** A style value for any slot (container, text, or image targets). */\nexport type SlotStyle = StyleProp<ViewStyle | TextStyle | ImageStyle>;\n\n/** Semantic slot names: one per primitive component, one per interaction state. */\nexport type ThemeSlot =\n  | 'label'\n  | 'readout'\n  | 'slider'\n  | 'colorPicker'\n  | 'button'\n  | 'tabs'\n  | 'tile'\n  | 'section'\n  | 'active'\n  | 'inactive'\n  | 'disabled';\n\n/**\n * The theme bank: a `<slot>ClassName` (resolved by the `./nativewind` interop)\n * and a `<slot>Style` (the always-works RN fallback) per slot. All optional; an\n * unset slot falls back to the primitive's built-in default. `readout` is the\n * value display (named distinctly from a control's mutating `value`).\n */\nexport type KaleidoscopeThemeSlots = {\n  readonly [S in ThemeSlot as `${S}ClassName`]?: string;\n} & {\n  readonly [S in ThemeSlot as `${S}Style`]?: SlotStyle;\n};\n"]}

package/dist/src/components/theme/slots.js

@@ -0,0 +1,9 @@
+"use strict";
+// The controls theme slot bank: one className + style pair per primitive
+// component and per interaction state. A primitive reads its slot via
+// `useThemeSlot` and merges it AFTER its built-in defaults (local props win).
+//
+// Leaf module: imports only react-native types, nothing from sibling `controls/`
+// modules or from `ui/`, so `ui/` can read the theme without an import cycle.
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=slots.js.map

package/dist/src/components/theme/slots.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slots.js","sourceRoot":"","sources":["../../../../src/components/theme/slots.ts"],"names":[],"mappings":";AAAA,yEAAyE;AACzE,sEAAsE;AACtE,8EAA8E;AAC9E,EAAE;AACF,iFAAiF;AACjF,8EAA8E","sourcesContent":["// The controls theme slot bank: one className + style pair per primitive\n// component and per interaction state. A primitive reads its slot via\n// `useThemeSlot` and merges it AFTER its built-in defaults (local props win).\n//\n// Leaf module: imports only react-native types, nothing from sibling `controls/`\n// modules or from `ui/`, so `ui/` can read the theme without an import cycle.\n\nimport type { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native';\n\n/** A style value for any slot (container, text, or image targets). */\nexport type SlotStyle = StyleProp<ViewStyle | TextStyle | ImageStyle>;\n\n/** Semantic slot names: one per primitive component, one per interaction state. */\nexport type ThemeSlot =\n  | 'label'\n  | 'readout'\n  | 'slider'\n  | 'colorPicker'\n  | 'button'\n  | 'tabs'\n  | 'tile'\n  | 'section'\n  | 'active'\n  | 'inactive'\n  | 'disabled';\n\n/**\n * The theme bank: a `<slot>ClassName` (resolved by the `./nativewind` interop)\n * and a `<slot>Style` (the always-works RN fallback) per slot. All optional; an\n * unset slot falls back to the primitive's built-in default. `readout` is the\n * value display (named distinctly from a control's mutating `value`).\n */\nexport type KaleidoscopeThemeSlots = {\n  readonly [S in ThemeSlot as `${S}ClassName`]?: string;\n} & {\n  readonly [S in ThemeSlot as `${S}Style`]?: SlotStyle;\n};\n"]}

package/dist/src/components/ui/button.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export type ButtonProps = {
+    readonly children: ReactNode;
+    readonly onPress: () => void;
+    readonly disabled?: boolean;
+    /** NativeWind class; resolved via the `./nativewind` interop. */
+    readonly className?: string;
+    readonly style?: StyleProp<ViewStyle>;
+    /** Deterministic `accessibilityIdentifier` for the pressable. */
+    readonly testID?: string;
+};
+export declare function Button({ children, onPress, disabled, style, testID }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=button.d.ts.map

package/dist/src/components/ui/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzD,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,iEAAiE;IACjE,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,iEAAiE;IACjE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAgB,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,WAAW,2CAqBzF","sourcesContent":["// Button: a themed Pressable + label, used for the copy button and any control\n// action. Themes via the `button` slot, with the `disabled` state slot overlaid\n// at the container when disabled.\n\nimport type { ReactNode } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { Pressable, StyleSheet, Text } from 'react-native';\nimport { useThemeSlot } from '../theme/provider';\n\nexport type ButtonProps = {\n  readonly children: ReactNode;\n  readonly onPress: () => void;\n  readonly disabled?: boolean;\n  /** NativeWind class; resolved via the `./nativewind` interop. */\n  readonly className?: string;\n  readonly style?: StyleProp<ViewStyle>;\n  /** Deterministic `accessibilityIdentifier` for the pressable. */\n  readonly testID?: string;\n};\n\nexport function Button({ children, onPress, disabled = false, style, testID }: ButtonProps) {\n  const { style: themeStyle } = useThemeSlot('button');\n  const { style: disabledStyle } = useThemeSlot('disabled');\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      accessibilityState={{ disabled }}\n      testID={testID}\n      onPress={onPress}\n      disabled={disabled}\n      style={[\n        styles.button,\n        themeStyle as StyleProp<ViewStyle>,\n        disabled && styles.disabled,\n        disabled && (disabledStyle as StyleProp<ViewStyle>),\n        style,\n      ]}\n    >\n      <Text style={styles.text}>{children}</Text>\n    </Pressable>\n  );\n}\n\nconst styles = StyleSheet.create({\n  button: {\n    paddingHorizontal: 8,\n    paddingVertical: 3,\n    backgroundColor: '#2a2a2a',\n    borderRadius: 4,\n    alignSelf: 'flex-start',\n  },\n  disabled: { opacity: 0.5 },\n  text: { color: '#8888ff', fontSize: 11, fontWeight: '600' },\n});\n"]}

package/dist/src/components/ui/button.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = Button;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const provider_1 = require("../theme/provider");
+function Button({ children, onPress, disabled = false, style, testID }) {
+    const { style: themeStyle } = (0, provider_1.useThemeSlot)('button');
+    const { style: disabledStyle } = (0, provider_1.useThemeSlot)('disabled');
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityState: { disabled }, testID: testID, onPress: onPress, disabled: disabled, style: [
+            styles.button,
+            themeStyle,
+            disabled && styles.disabled,
+            disabled && disabledStyle,
+            style,
+        ], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.text, children: children }) }));
+}
+const styles = react_native_1.StyleSheet.create({
+    button: {
+        paddingHorizontal: 8,
+        paddingVertical: 3,
+        backgroundColor: '#2a2a2a',
+        borderRadius: 4,
+        alignSelf: 'flex-start',
+    },
+    disabled: { opacity: 0.5 },
+    text: { color: '#8888ff', fontSize: 11, fontWeight: '600' },
+});
+//# sourceMappingURL=button.js.map

package/dist/src/components/ui/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../src/components/ui/button.tsx"],"names":[],"mappings":";;;;AAMA,+CAA2D;AAC3D,gDAAiD;AAajD,gBAAuB,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,GAAG,KAAK,EAAE,KAAK,EAAE,MAAM,EAAe;IACxF,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,IAAA,uBAAY,EAAC,QAAQ,CAAC,CAAC;IACrD,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,GAAG,IAAA,uBAAY,EAAC,UAAU,CAAC,CAAC;IAC1D,OAAO,CACL,uBAAC,wBAAS,IACR,iBAAiB,EAAC,QAAQ,EAC1B,kBAAkB,EAAE,EAAE,QAAQ,EAAE,EAChC,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE;YACL,MAAM,CAAC,MAAM;YACb,UAAkC;YAClC,QAAQ,IAAI,MAAM,CAAC,QAAQ;YAC3B,QAAQ,IAAK,aAAsC;YACnD,KAAK;SACN,YAED,uBAAC,mBAAI,IAAC,KAAK,EAAE,MAAM,CAAC,IAAI,YAAG,QAAQ,GAAQ,GACjC,CACb,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,MAAM,EAAE;QACN,iBAAiB,EAAE,CAAC;QACpB,eAAe,EAAE,CAAC;QAClB,eAAe,EAAE,SAAS;QAC1B,YAAY,EAAE,CAAC;QACf,SAAS,EAAE,YAAY;KACxB;IACD,QAAQ,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE;CAC5D,CAAC,CAAC","sourcesContent":["// Button: a themed Pressable + label, used for the copy button and any control\n// action. Themes via the `button` slot, with the `disabled` state slot overlaid\n// at the container when disabled.\n\nimport type { ReactNode } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { Pressable, StyleSheet, Text } from 'react-native';\nimport { useThemeSlot } from '../theme/provider';\n\nexport type ButtonProps = {\n  readonly children: ReactNode;\n  readonly onPress: () => void;\n  readonly disabled?: boolean;\n  /** NativeWind class; resolved via the `./nativewind` interop. */\n  readonly className?: string;\n  readonly style?: StyleProp<ViewStyle>;\n  /** Deterministic `accessibilityIdentifier` for the pressable. */\n  readonly testID?: string;\n};\n\nexport function Button({ children, onPress, disabled = false, style, testID }: ButtonProps) {\n  const { style: themeStyle } = useThemeSlot('button');\n  const { style: disabledStyle } = useThemeSlot('disabled');\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      accessibilityState={{ disabled }}\n      testID={testID}\n      onPress={onPress}\n      disabled={disabled}\n      style={[\n        styles.button,\n        themeStyle as StyleProp<ViewStyle>,\n        disabled && styles.disabled,\n        disabled && (disabledStyle as StyleProp<ViewStyle>),\n        style,\n      ]}\n    >\n      <Text style={styles.text}>{children}</Text>\n    </Pressable>\n  );\n}\n\nconst styles = StyleSheet.create({\n  button: {\n    paddingHorizontal: 8,\n    paddingVertical: 3,\n    backgroundColor: '#2a2a2a',\n    borderRadius: 4,\n    alignSelf: 'flex-start',\n  },\n  disabled: { opacity: 0.5 },\n  text: { color: '#8888ff', fontSize: 11, fontWeight: '600' },\n});\n"]}

package/dist/src/components/ui/color-picker.d.ts

@@ -0,0 +1,12 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+export type ColorPickerProps = {
+    /** The uniform key this picker drives (an RGB triple). */
+    readonly uniform: string;
+    /** Display name; defaults to the uniform key. */
+    readonly label?: string;
+    /** NativeWind class for the container; resolved via the `./nativewind` interop. */
+    readonly className?: string;
+    readonly style?: StyleProp<ViewStyle>;
+};
+export declare function ColorPicker({ uniform, label, style }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=color-picker.d.ts.map

package/dist/src/components/ui/color-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/color-picker.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAWzD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,0DAA0D;IAC1D,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,iDAAiD;IACjD,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,mFAAmF;IACnF,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACvC,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,gBAAgB,2CAuCtE","sourcesContent":["// ColorPicker: a self-wiring vec3 field. v1 is the swatch + three channel\n// sliders the demo shipped; it reads/writes a single RGB uniform via `useField`\n// and emits the whole triple on any channel change. Themes via `colorPicker`.\n\nimport RNSlider from '@react-native-community/slider';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { StyleSheet, View } from 'react-native';\nimport { useField } from '../form/use-field';\nimport { useThemeSlot } from '../theme/provider';\nimport { Label } from './label';\nimport { Readout } from './readout';\nimport { SLIDER_TINTS, safeSliderValue } from './slider-value';\n\nconst CH = ['R', 'G', 'B'] as const;\nconst CH_KEY = ['r', 'g', 'b'] as const;\n\nexport type ColorPickerProps = {\n  /** The uniform key this picker drives (an RGB triple). */\n  readonly uniform: string;\n  /** Display name; defaults to the uniform key. */\n  readonly label?: string;\n  /** NativeWind class for the container; resolved via the `./nativewind` interop. */\n  readonly className?: string;\n  readonly style?: StyleProp<ViewStyle>;\n};\n\nexport function ColorPicker({ uniform, label, style }: ColorPickerProps) {\n  const field = useField(uniform);\n  const { style: themeStyle } = useThemeSlot('colorPicker');\n  const rgb = Array.isArray(field.value) ? field.value : [0, 0, 0];\n  const r = rgb[0] ?? 0;\n  const g = rgb[1] ?? 0;\n  const b = rgb[2] ?? 0;\n  const swatch = `rgb(${Math.round(r * 255)},${Math.round(g * 255)},${Math.round(b * 255)})`;\n  const name = label ?? uniform;\n  const setChannel = (i: number, v: number) => {\n    const next = [r, g, b];\n    next[i] = v;\n    field.onChange(next);\n  };\n  return (\n    <View testID={field.testID} style={[styles.row, themeStyle as StyleProp<ViewStyle>, style]}>\n      <View style={styles.labelWrap}>\n        <View style={[styles.swatch, { backgroundColor: swatch }]} />\n        <Label>{name}</Label>\n      </View>\n      {[r, g, b].map((v, i) => (\n        <View key={CH[i]} style={styles.chanLine}>\n          <Readout>{CH[i]}</Readout>\n          <RNSlider\n            style={styles.chanSlider}\n            testID={`${field.testID}.${CH_KEY[i]}`}\n            accessibilityLabel={`${name} ${CH[i]}`}\n            minimumValue={0}\n            maximumValue={1}\n            step={0.01}\n            value={safeSliderValue(v)}\n            disabled={field.disabled}\n            onValueChange={(nv) => setChannel(i, nv)}\n            {...SLIDER_TINTS}\n          />\n        </View>\n      ))}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  row: { gap: 2 },\n  labelWrap: { flexDirection: 'row', alignItems: 'center', gap: 6 },\n  swatch: { width: 12, height: 12, borderRadius: 2, borderWidth: 1, borderColor: '#555' },\n  chanLine: { flexDirection: 'row', alignItems: 'center', gap: 6 },\n  chanSlider: { flex: 1, height: 28 },\n});\n"]}

package/dist/src/components/ui/color-picker.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorPicker = ColorPicker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// ColorPicker: a self-wiring vec3 field. v1 is the swatch + three channel
+// sliders the demo shipped; it reads/writes a single RGB uniform via `useField`
+// and emits the whole triple on any channel change. Themes via `colorPicker`.
+const slider_1 = __importDefault(require("@react-native-community/slider"));
+const react_native_1 = require("react-native");
+const use_field_1 = require("../form/use-field");
+const provider_1 = require("../theme/provider");
+const label_1 = require("./label");
+const readout_1 = require("./readout");
+const slider_value_1 = require("./slider-value");
+const CH = ['R', 'G', 'B'];
+const CH_KEY = ['r', 'g', 'b'];
+function ColorPicker({ uniform, label, style }) {
+    const field = (0, use_field_1.useField)(uniform);
+    const { style: themeStyle } = (0, provider_1.useThemeSlot)('colorPicker');
+    const rgb = Array.isArray(field.value) ? field.value : [0, 0, 0];
+    const r = rgb[0] ?? 0;
+    const g = rgb[1] ?? 0;
+    const b = rgb[2] ?? 0;
+    const swatch = `rgb(${Math.round(r * 255)},${Math.round(g * 255)},${Math.round(b * 255)})`;
+    const name = label ?? uniform;
+    const setChannel = (i, v) => {
+        const next = [r, g, b];
+        next[i] = v;
+        field.onChange(next);
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { testID: field.testID, style: [styles.row, themeStyle, style], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.labelWrap, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.swatch, { backgroundColor: swatch }] }), (0, jsx_runtime_1.jsx)(label_1.Label, { children: name })] }), [r, g, b].map((v, i) => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.chanLine, children: [(0, jsx_runtime_1.jsx)(readout_1.Readout, { children: CH[i] }), (0, jsx_runtime_1.jsx)(slider_1.default, { style: styles.chanSlider, testID: `${field.testID}.${CH_KEY[i]}`, accessibilityLabel: `${name} ${CH[i]}`, minimumValue: 0, maximumValue: 1, step: 0.01, value: (0, slider_value_1.safeSliderValue)(v), disabled: field.disabled, onValueChange: (nv) => setChannel(i, nv), ...slider_value_1.SLIDER_TINTS })] }, CH[i])))] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    row: { gap: 2 },
+    labelWrap: { flexDirection: 'row', alignItems: 'center', gap: 6 },
+    swatch: { width: 12, height: 12, borderRadius: 2, borderWidth: 1, borderColor: '#555' },
+    chanLine: { flexDirection: 'row', alignItems: 'center', gap: 6 },
+    chanSlider: { flex: 1, height: 28 },
+});
+//# sourceMappingURL=color-picker.js.map

package/dist/src/components/ui/color-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.js","sourceRoot":"","sources":["../../../../src/components/ui/color-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["// ColorPicker: a self-wiring vec3 field. v1 is the swatch + three channel\n// sliders the demo shipped; it reads/writes a single RGB uniform via `useField`\n// and emits the whole triple on any channel change. Themes via `colorPicker`.\n\nimport RNSlider from '@react-native-community/slider';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { StyleSheet, View } from 'react-native';\nimport { useField } from '../form/use-field';\nimport { useThemeSlot } from '../theme/provider';\nimport { Label } from './label';\nimport { Readout } from './readout';\nimport { SLIDER_TINTS, safeSliderValue } from './slider-value';\n\nconst CH = ['R', 'G', 'B'] as const;\nconst CH_KEY = ['r', 'g', 'b'] as const;\n\nexport type ColorPickerProps = {\n  /** The uniform key this picker drives (an RGB triple). */\n  readonly uniform: string;\n  /** Display name; defaults to the uniform key. */\n  readonly label?: string;\n  /** NativeWind class for the container; resolved via the `./nativewind` interop. */\n  readonly className?: string;\n  readonly style?: StyleProp<ViewStyle>;\n};\n\nexport function ColorPicker({ uniform, label, style }: ColorPickerProps) {\n  const field = useField(uniform);\n  const { style: themeStyle } = useThemeSlot('colorPicker');\n  const rgb = Array.isArray(field.value) ? field.value : [0, 0, 0];\n  const r = rgb[0] ?? 0;\n  const g = rgb[1] ?? 0;\n  const b = rgb[2] ?? 0;\n  const swatch = `rgb(${Math.round(r * 255)},${Math.round(g * 255)},${Math.round(b * 255)})`;\n  const name = label ?? uniform;\n  const setChannel = (i: number, v: number) => {\n    const next = [r, g, b];\n    next[i] = v;\n    field.onChange(next);\n  };\n  return (\n    <View testID={field.testID} style={[styles.row, themeStyle as StyleProp<ViewStyle>, style]}>\n      <View style={styles.labelWrap}>\n        <View style={[styles.swatch, { backgroundColor: swatch }]} />\n        <Label>{name}</Label>\n      </View>\n      {[r, g, b].map((v, i) => (\n        <View key={CH[i]} style={styles.chanLine}>\n          <Readout>{CH[i]}</Readout>\n          <RNSlider\n            style={styles.chanSlider}\n            testID={`${field.testID}.${CH_KEY[i]}`}\n            accessibilityLabel={`${name} ${CH[i]}`}\n            minimumValue={0}\n            maximumValue={1}\n            step={0.01}\n            value={safeSliderValue(v)}\n            disabled={field.disabled}\n            onValueChange={(nv) => setChannel(i, nv)}\n            {...SLIDER_TINTS}\n          />\n        </View>\n      ))}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  row: { gap: 2 },\n  labelWrap: { flexDirection: 'row', alignItems: 'center', gap: 6 },\n  swatch: { width: 12, height: 12, borderRadius: 2, borderWidth: 1, borderColor: '#555' },\n  chanLine: { flexDirection: 'row', alignItems: 'center', gap: 6 },\n  chanSlider: { flex: 1, height: 28 },\n});\n"]}

package/dist/src/components/ui/index.d.ts

@@ -0,0 +1,6 @@
+export { Button, type ButtonProps } from './button';
+export { ColorPicker, type ColorPickerProps } from './color-picker';
+export { Label, type LabelProps } from './label';
+export { Readout, type ReadoutProps } from './readout';
+export { Slider, type SliderProps } from './slider';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACpE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC","sourcesContent":["// The field primitives barrel. These are the styleable leaves the parity test\n// pairs against the `./nativewind` cssInterop registrations (providers and\n// shells are NOT here, so the test's bidirectional check stays scoped to\n// components that actually take a `className`).\n\nexport { Button, type ButtonProps } from './button';\nexport { ColorPicker, type ColorPickerProps } from './color-picker';\nexport { Label, type LabelProps } from './label';\nexport { Readout, type ReadoutProps } from './readout';\nexport { Slider, type SliderProps } from './slider';\n"]}

package/dist/src/components/ui/index.js

@@ -0,0 +1,18 @@
+"use strict";
+// The field primitives barrel. These are the styleable leaves the parity test
+// pairs against the `./nativewind` cssInterop registrations (providers and
+// shells are NOT here, so the test's bidirectional check stays scoped to
+// components that actually take a `className`).
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slider = exports.Readout = exports.Label = exports.ColorPicker = exports.Button = void 0;
+var button_1 = require("./button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return button_1.Button; } });
+var color_picker_1 = require("./color-picker");
+Object.defineProperty(exports, "ColorPicker", { enumerable: true, get: function () { return color_picker_1.ColorPicker; } });
+var label_1 = require("./label");
+Object.defineProperty(exports, "Label", { enumerable: true, get: function () { return label_1.Label; } });
+var readout_1 = require("./readout");
+Object.defineProperty(exports, "Readout", { enumerable: true, get: function () { return readout_1.Readout; } });
+var slider_1 = require("./slider");
+Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return slider_1.Slider; } });
+//# sourceMappingURL=index.js.map

package/dist/src/components/ui/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/index.ts"],"names":[],"mappings":";AAAA,8EAA8E;AAC9E,2EAA2E;AAC3E,yEAAyE;AACzE,gDAAgD;;;AAEhD,mCAAoD;AAA3C,gGAAA,MAAM,OAAA;AACf,+CAAoE;AAA3D,2GAAA,WAAW,OAAA;AACpB,iCAAiD;AAAxC,8FAAA,KAAK,OAAA;AACd,qCAAuD;AAA9C,kGAAA,OAAO,OAAA;AAChB,mCAAoD;AAA3C,gGAAA,MAAM,OAAA","sourcesContent":["// The field primitives barrel. These are the styleable leaves the parity test\n// pairs against the `./nativewind` cssInterop registrations (providers and\n// shells are NOT here, so the test's bidirectional check stays scoped to\n// components that actually take a `className`).\n\nexport { Button, type ButtonProps } from './button';\nexport { ColorPicker, type ColorPickerProps } from './color-picker';\nexport { Label, type LabelProps } from './label';\nexport { Readout, type ReadoutProps } from './readout';\nexport { Slider, type SliderProps } from './slider';\n"]}

package/dist/src/components/ui/label.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, TextStyle } from 'react-native';
+export type LabelProps = {
+    readonly children: ReactNode;
+    /** NativeWind class; resolved via the `./nativewind` interop. */
+    readonly className?: string;
+    readonly style?: StyleProp<TextStyle>;
+};
+export declare function Label({ children, style }: LabelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=label.d.ts.map

package/dist/src/components/ui/label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/label.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzD,MAAM,MAAM,UAAU,GAAG;IACvB,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B,iEAAiE;IACjE,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACvC,CAAC;AAEF,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,UAAU,2CAGpD","sourcesContent":["// Label: a themed Text for a control's name. Reads the `label` theme slot's\n// style and merges it after the default; `className` is consumed by the\n// `./nativewind` cssInterop at the boundary and arrives folded into `style`.\n\nimport type { ReactNode } from 'react';\nimport type { StyleProp, TextStyle } from 'react-native';\nimport { StyleSheet, Text } from 'react-native';\nimport { useThemeSlot } from '../theme/provider';\n\nexport type LabelProps = {\n  readonly children: ReactNode;\n  /** NativeWind class; resolved via the `./nativewind` interop. */\n  readonly className?: string;\n  readonly style?: StyleProp<TextStyle>;\n};\n\nexport function Label({ children, style }: LabelProps) {\n  const { style: themeStyle } = useThemeSlot('label');\n  return <Text style={[styles.label, themeStyle as StyleProp<TextStyle>, style]}>{children}</Text>;\n}\n\nconst styles = StyleSheet.create({\n  label: { color: '#ccc', fontSize: 12 },\n});\n"]}

package/dist/src/components/ui/label.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = Label;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const provider_1 = require("../theme/provider");
+function Label({ children, style }) {
+    const { style: themeStyle } = (0, provider_1.useThemeSlot)('label');
+    return (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.label, themeStyle, style], children: children });
+}
+const styles = react_native_1.StyleSheet.create({
+    label: { color: '#ccc', fontSize: 12 },
+});
+//# sourceMappingURL=label.js.map

package/dist/src/components/ui/label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","sourceRoot":"","sources":["../../../../src/components/ui/label.tsx"],"names":[],"mappings":";;;;AAMA,+CAAgD;AAChD,gDAAiD;AASjD,eAAsB,EAAE,QAAQ,EAAE,KAAK,EAAc;IACnD,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,IAAA,uBAAY,EAAC,OAAO,CAAC,CAAC;IACpD,OAAO,uBAAC,mBAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,UAAkC,EAAE,KAAK,CAAC,YAAG,QAAQ,GAAQ,CAAC;AACnG,CAAC;AAED,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE;CACvC,CAAC,CAAC","sourcesContent":["// Label: a themed Text for a control's name. Reads the `label` theme slot's\n// style and merges it after the default; `className` is consumed by the\n// `./nativewind` cssInterop at the boundary and arrives folded into `style`.\n\nimport type { ReactNode } from 'react';\nimport type { StyleProp, TextStyle } from 'react-native';\nimport { StyleSheet, Text } from 'react-native';\nimport { useThemeSlot } from '../theme/provider';\n\nexport type LabelProps = {\n  readonly children: ReactNode;\n  /** NativeWind class; resolved via the `./nativewind` interop. */\n  readonly className?: string;\n  readonly style?: StyleProp<TextStyle>;\n};\n\nexport function Label({ children, style }: LabelProps) {\n  const { style: themeStyle } = useThemeSlot('label');\n  return <Text style={[styles.label, themeStyle as StyleProp<TextStyle>, style]}>{children}</Text>;\n}\n\nconst styles = StyleSheet.create({\n  label: { color: '#ccc', fontSize: 12 },\n});\n"]}

package/dist/src/components/ui/point.d.ts

@@ -0,0 +1,19 @@
+export type PointProps = {
+    /** Current x, in [min, max]. */
+    readonly x: number;
+    /** Current y, in [min, max]; drawn bottom-to-top (y-up). */
+    readonly y: number;
+    /** Slider range for both axes. */
+    readonly min: number;
+    readonly max: number;
+    readonly step?: number;
+    /** Emitted on either axis change with the full (x, y). */
+    readonly onChange: (x: number, y: number) => void;
+    /** Short caption above the box (e.g. the vertex index). */
+    readonly label?: string;
+    readonly disabled?: boolean;
+    /** Base test id; the x slider appends `.x`, the y slider `.y`. */
+    readonly testID?: string;
+};
+export declare function Point({ x, y, min, max, step, onChange, label, disabled, testID, }: PointProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=point.d.ts.map

package/dist/src/components/ui/point.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"point.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/point.tsx"],"names":[],"mappings":"AAmBA,MAAM,MAAM,UAAU,GAAG;IACvB,gCAAgC;IAChC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,0DAA0D;IAC1D,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,2DAA2D;IAC3D,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,kEAAkE;IAClE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,wBAAgB,KAAK,CAAC,EACpB,CAAC,EACD,CAAC,EACD,GAAG,EACH,GAAG,EACH,IAAW,EACX,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,MAAM,GACP,EAAE,UAAU,2CA6CZ","sourcesContent":["// Point: a presentational (x, y) coordinate editor. A square box with a dot drawn\n// at the point's position, plus two HORIZONTAL sliders labeled X and Y. (A rotated\n// \"vertical\" slider renders upright but still drags side-to-side on RN-web, which\n// reads as broken; two plain horizontal sliders are honest.) The box gives the\n// spatial feedback the vertical axis would have: the dot tracks (x, y) live, x\n// left-to-right and y bottom-to-top (y-up, matching the shaders).\n//\n// Presentational on purpose: it owns no field, just `{ x, y, onChange }`. The\n// self-wiring lives in the container that drives it (PolygonField slices a vec2\n// array into one Point per vertex). Reusable for anything that is an xy coordinate\n// (a point light, a focal point).\n\nimport RNSlider from '@react-native-community/slider';\nimport { StyleSheet, View } from 'react-native';\nimport { Readout } from './readout';\nimport { SLIDER_TINTS, safeSliderValue } from './slider-value';\n\nconst BOX = 56;\n\nexport type PointProps = {\n  /** Current x, in [min, max]. */\n  readonly x: number;\n  /** Current y, in [min, max]; drawn bottom-to-top (y-up). */\n  readonly y: number;\n  /** Slider range for both axes. */\n  readonly min: number;\n  readonly max: number;\n  readonly step?: number;\n  /** Emitted on either axis change with the full (x, y). */\n  readonly onChange: (x: number, y: number) => void;\n  /** Short caption above the box (e.g. the vertex index). */\n  readonly label?: string;\n  readonly disabled?: boolean;\n  /** Base test id; the x slider appends `.x`, the y slider `.y`. */\n  readonly testID?: string;\n};\n\nexport function Point({\n  x,\n  y,\n  min,\n  max,\n  step = 0.01,\n  onChange,\n  label,\n  disabled,\n  testID,\n}: PointProps) {\n  const span = max - min || 1;\n  const xFrac = Math.min(1, Math.max(0, (x - min) / span));\n  const yFrac = Math.min(1, Math.max(0, (y - min) / span));\n  return (\n    <View style={styles.wrap}>\n      {label ? <Readout>{label}</Readout> : null}\n      <View style={styles.box}>\n        <View\n          style={[styles.dot, { left: `${xFrac * 100}%`, top: `${(1 - yFrac) * 100}%` }]}\n          pointerEvents=\"none\"\n        />\n      </View>\n      <View style={styles.axis}>\n        <Readout>X</Readout>\n        <RNSlider\n          style={styles.slider}\n          testID={testID ? `${testID}.x` : undefined}\n          accessibilityLabel={label ? `${label} x` : 'x'}\n          minimumValue={min}\n          maximumValue={max}\n          step={step}\n          value={safeSliderValue(x)}\n          disabled={disabled}\n          onValueChange={(v) => onChange(v, y)}\n          {...SLIDER_TINTS}\n        />\n      </View>\n      <View style={styles.axis}>\n        <Readout>Y</Readout>\n        <RNSlider\n          style={styles.slider}\n          testID={testID ? `${testID}.y` : undefined}\n          accessibilityLabel={label ? `${label} y` : 'y'}\n          minimumValue={min}\n          maximumValue={max}\n          step={step}\n          value={safeSliderValue(y)}\n          disabled={disabled}\n          onValueChange={(v) => onChange(x, v)}\n          {...SLIDER_TINTS}\n        />\n      </View>\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  wrap: { alignItems: 'center', gap: 3, width: BOX + 44 },\n  box: {\n    width: BOX,\n    height: BOX,\n    borderWidth: StyleSheet.hairlineWidth,\n    borderColor: 'rgba(255,255,255,0.35)',\n    backgroundColor: 'rgba(255,255,255,0.05)',\n    position: 'relative',\n  },\n  dot: {\n    position: 'absolute',\n    width: 7,\n    height: 7,\n    borderRadius: 4,\n    marginLeft: -3.5,\n    marginTop: -3.5,\n    backgroundColor: '#fff',\n  },\n  axis: { flexDirection: 'row', alignItems: 'center', gap: 4, alignSelf: 'stretch' },\n  slider: { flex: 1, height: 28 },\n});\n"]}

package/dist/src/components/ui/point.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Point = Point;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Point: a presentational (x, y) coordinate editor. A square box with a dot drawn
+// at the point's position, plus two HORIZONTAL sliders labeled X and Y. (A rotated
+// "vertical" slider renders upright but still drags side-to-side on RN-web, which
+// reads as broken; two plain horizontal sliders are honest.) The box gives the
+// spatial feedback the vertical axis would have: the dot tracks (x, y) live, x
+// left-to-right and y bottom-to-top (y-up, matching the shaders).
+//
+// Presentational on purpose: it owns no field, just `{ x, y, onChange }`. The
+// self-wiring lives in the container that drives it (PolygonField slices a vec2
+// array into one Point per vertex). Reusable for anything that is an xy coordinate
+// (a point light, a focal point).
+const slider_1 = __importDefault(require("@react-native-community/slider"));
+const react_native_1 = require("react-native");
+const readout_1 = require("./readout");
+const slider_value_1 = require("./slider-value");
+const BOX = 56;
+function Point({ x, y, min, max, step = 0.01, onChange, label, disabled, testID, }) {
+    const span = max - min || 1;
+    const xFrac = Math.min(1, Math.max(0, (x - min) / span));
+    const yFrac = Math.min(1, Math.max(0, (y - min) / span));
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.wrap, children: [label ? (0, jsx_runtime_1.jsx)(readout_1.Readout, { children: label }) : null, (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.box, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.dot, { left: `${xFrac * 100}%`, top: `${(1 - yFrac) * 100}%` }], pointerEvents: "none" }) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.axis, children: [(0, jsx_runtime_1.jsx)(readout_1.Readout, { children: "X" }), (0, jsx_runtime_1.jsx)(slider_1.default, { style: styles.slider, testID: testID ? `${testID}.x` : undefined, accessibilityLabel: label ? `${label} x` : 'x', minimumValue: min, maximumValue: max, step: step, value: (0, slider_value_1.safeSliderValue)(x), disabled: disabled, onValueChange: (v) => onChange(v, y), ...slider_value_1.SLIDER_TINTS })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.axis, children: [(0, jsx_runtime_1.jsx)(readout_1.Readout, { children: "Y" }), (0, jsx_runtime_1.jsx)(slider_1.default, { style: styles.slider, testID: testID ? `${testID}.y` : undefined, accessibilityLabel: label ? `${label} y` : 'y', minimumValue: min, maximumValue: max, step: step, value: (0, slider_value_1.safeSliderValue)(y), disabled: disabled, onValueChange: (v) => onChange(x, v), ...slider_value_1.SLIDER_TINTS })] })] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    wrap: { alignItems: 'center', gap: 3, width: BOX + 44 },
+    box: {
+        width: BOX,
+        height: BOX,
+        borderWidth: react_native_1.StyleSheet.hairlineWidth,
+        borderColor: 'rgba(255,255,255,0.35)',
+        backgroundColor: 'rgba(255,255,255,0.05)',
+        position: 'relative',
+    },
+    dot: {
+        position: 'absolute',
+        width: 7,
+        height: 7,
+        borderRadius: 4,
+        marginLeft: -3.5,
+        marginTop: -3.5,
+        backgroundColor: '#fff',
+    },
+    axis: { flexDirection: 'row', alignItems: 'center', gap: 4, alignSelf: 'stretch' },
+    slider: { flex: 1, height: 28 },
+});
+//# sourceMappingURL=point.js.map

package/dist/src/components/ui/point.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"point.js","sourceRoot":"","sources":["../../../../src/components/ui/point.tsx"],"names":[],"mappings":"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","sourcesContent":["// Point: a presentational (x, y) coordinate editor. A square box with a dot drawn\n// at the point's position, plus two HORIZONTAL sliders labeled X and Y. (A rotated\n// \"vertical\" slider renders upright but still drags side-to-side on RN-web, which\n// reads as broken; two plain horizontal sliders are honest.) The box gives the\n// spatial feedback the vertical axis would have: the dot tracks (x, y) live, x\n// left-to-right and y bottom-to-top (y-up, matching the shaders).\n//\n// Presentational on purpose: it owns no field, just `{ x, y, onChange }`. The\n// self-wiring lives in the container that drives it (PolygonField slices a vec2\n// array into one Point per vertex). Reusable for anything that is an xy coordinate\n// (a point light, a focal point).\n\nimport RNSlider from '@react-native-community/slider';\nimport { StyleSheet, View } from 'react-native';\nimport { Readout } from './readout';\nimport { SLIDER_TINTS, safeSliderValue } from './slider-value';\n\nconst BOX = 56;\n\nexport type PointProps = {\n  /** Current x, in [min, max]. */\n  readonly x: number;\n  /** Current y, in [min, max]; drawn bottom-to-top (y-up). */\n  readonly y: number;\n  /** Slider range for both axes. */\n  readonly min: number;\n  readonly max: number;\n  readonly step?: number;\n  /** Emitted on either axis change with the full (x, y). */\n  readonly onChange: (x: number, y: number) => void;\n  /** Short caption above the box (e.g. the vertex index). */\n  readonly label?: string;\n  readonly disabled?: boolean;\n  /** Base test id; the x slider appends `.x`, the y slider `.y`. */\n  readonly testID?: string;\n};\n\nexport function Point({\n  x,\n  y,\n  min,\n  max,\n  step = 0.01,\n  onChange,\n  label,\n  disabled,\n  testID,\n}: PointProps) {\n  const span = max - min || 1;\n  const xFrac = Math.min(1, Math.max(0, (x - min) / span));\n  const yFrac = Math.min(1, Math.max(0, (y - min) / span));\n  return (\n    <View style={styles.wrap}>\n      {label ? <Readout>{label}</Readout> : null}\n      <View style={styles.box}>\n        <View\n          style={[styles.dot, { left: `${xFrac * 100}%`, top: `${(1 - yFrac) * 100}%` }]}\n          pointerEvents=\"none\"\n        />\n      </View>\n      <View style={styles.axis}>\n        <Readout>X</Readout>\n        <RNSlider\n          style={styles.slider}\n          testID={testID ? `${testID}.x` : undefined}\n          accessibilityLabel={label ? `${label} x` : 'x'}\n          minimumValue={min}\n          maximumValue={max}\n          step={step}\n          value={safeSliderValue(x)}\n          disabled={disabled}\n          onValueChange={(v) => onChange(v, y)}\n          {...SLIDER_TINTS}\n        />\n      </View>\n      <View style={styles.axis}>\n        <Readout>Y</Readout>\n        <RNSlider\n          style={styles.slider}\n          testID={testID ? `${testID}.y` : undefined}\n          accessibilityLabel={label ? `${label} y` : 'y'}\n          minimumValue={min}\n          maximumValue={max}\n          step={step}\n          value={safeSliderValue(y)}\n          disabled={disabled}\n          onValueChange={(v) => onChange(x, v)}\n          {...SLIDER_TINTS}\n        />\n      </View>\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  wrap: { alignItems: 'center', gap: 3, width: BOX + 44 },\n  box: {\n    width: BOX,\n    height: BOX,\n    borderWidth: StyleSheet.hairlineWidth,\n    borderColor: 'rgba(255,255,255,0.35)',\n    backgroundColor: 'rgba(255,255,255,0.05)',\n    position: 'relative',\n  },\n  dot: {\n    position: 'absolute',\n    width: 7,\n    height: 7,\n    borderRadius: 4,\n    marginLeft: -3.5,\n    marginTop: -3.5,\n    backgroundColor: '#fff',\n  },\n  axis: { flexDirection: 'row', alignItems: 'center', gap: 4, alignSelf: 'stretch' },\n  slider: { flex: 1, height: 28 },\n});\n"]}

package/dist/src/components/ui/polygon-field.d.ts

@@ -0,0 +1,10 @@
+export type PolygonFieldProps = {
+    /** The uniform key this field drives: a vec2 array, flat [x0,y0, x1,y1, ...]. */
+    readonly uniform: string;
+    /** Number of polygon vertices; laid out in a ceil(√points)-column grid. */
+    readonly points: number;
+    /** Display name; defaults to the uniform key. */
+    readonly label?: string;
+};
+export declare function PolygonField({ uniform, points, label }: PolygonFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=polygon-field.d.ts.map