react-native-webrtc-kaleidoscope 2.0.0 → 2.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-image-uri.web.js","sourceRoot":"","sources":["../../../../src/components/preset-book-menu/resolve-image-uri.web.ts"],"names":[],"mappings":";AAAA,wEAAwE;AACxE,sCAAsC;AACtC,EAAE;AACF,6EAA6E;AAC7E,0EAA0E;AAC1E,iFAAiF;AACjF,wEAAwE;AACxE,yEAAyE;AACzE,iFAAiF;AACjF,iFAAiF;AACjF,iFAAiF;;;AAI1E,MAAM,eAAe,GAAoB,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC;AAA3D,QAAA,eAAe,GAAf,eAAe,CAA4C","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-control-panel/composite-layer-control-panel.d.ts

@@ -0,0 +1,14 @@
+import type { UniformControl } from '../../../catalog/shaders';
+/** Per-uniform range/label override, keyed by uniform name. */
+export type ControlOverride = {
+    readonly min?: number;
+    readonly max?: number;
+    readonly step?: number;
+    readonly label?: string;
+};
+export type CompositeLayerControlPanelProps = {
+    readonly controls: readonly UniformControl[];
+    readonly overrides?: Readonly<Record<string, ControlOverride>>;
+};
+export declare function CompositeLayerControlPanel({ controls, overrides, }: CompositeLayerControlPanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=composite-layer-control-panel.d.ts.map

package/dist/src/components/preset-control-panel/composite-layer-control-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composite-layer-control-panel.d.ts","sourceRoot":"","sources":["../../../../src/components/preset-control-panel/composite-layer-control-panel.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAG/D,+DAA+D;AAC/D,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG;IAC5C,QAAQ,CAAC,QAAQ,EAAE,SAAS,cAAc,EAAE,CAAC;IAC7C,QAAQ,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC;CAChE,CAAC;AAkBF,wBAAgB,0BAA0B,CAAC,EACzC,QAAQ,EACR,SAAS,GACV,EAAE,+BAA+B,2CAQjC","sourcesContent":["// CompositeLayerControlPanel: render a shader's `*_CONTROLS` descriptor list as\n// fields, in order, data-driven. This is the AUTO-FORM (the default when a shader\n// ships no custom layout form): `<CompositeLayerControlPanel controls={CLOUDS_CONTROLS} />`.\n// It maps every descriptor through the shared `dispatchControl`, so it handles\n// every kind (color, float, switch, polygon) the same way `<Control>` does.\n//\n// KaleidoscopePreset-level customization is props: pass a filtered `controls`\n// array to hide knobs, or `overrides` to narrow a control's range/label for this\n// composite. For real layout (grouping, split, per-beam lists), a shader exports\n// a custom form of `<Control uniform>`s instead of using this panel.\n\nimport { Fragment } from 'react';\nimport type { UniformControl } from '../../../catalog/shaders';\nimport { dispatchControl } from './control';\n\n/** Per-uniform range/label override, keyed by uniform name. */\nexport type ControlOverride = {\n  readonly min?: number;\n  readonly max?: number;\n  readonly step?: number;\n  readonly label?: string;\n};\n\nexport type CompositeLayerControlPanelProps = {\n  readonly controls: readonly UniformControl[];\n  readonly overrides?: Readonly<Record<string, ControlOverride>>;\n};\n\n// Merge a preset override onto a descriptor. min/max/step only apply to float;\n// label applies to any kind.\nfunction withOverride(c: UniformControl, o?: ControlOverride): UniformControl {\n  if (!o) return c;\n  if (c.kind === 'float') {\n    return {\n      ...c,\n      min: o.min ?? c.min,\n      max: o.max ?? c.max,\n      step: o.step ?? c.step,\n      label: o.label ?? c.label,\n    };\n  }\n  return o.label ? { ...c, label: o.label } : c;\n}\n\nexport function CompositeLayerControlPanel({\n  controls,\n  overrides,\n}: CompositeLayerControlPanelProps) {\n  return (\n    <>\n      {controls.map((c) => (\n        <Fragment key={c.name}>{dispatchControl(withOverride(c, overrides?.[c.name]))}</Fragment>\n      ))}\n    </>\n  );\n}\n"]}

package/dist/src/components/preset-control-panel/composite-layer-control-panel.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompositeLayerControlPanel = CompositeLayerControlPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// CompositeLayerControlPanel: render a shader's `*_CONTROLS` descriptor list as
+// fields, in order, data-driven. This is the AUTO-FORM (the default when a shader
+// ships no custom layout form): `<CompositeLayerControlPanel controls={CLOUDS_CONTROLS} />`.
+// It maps every descriptor through the shared `dispatchControl`, so it handles
+// every kind (color, float, switch, polygon) the same way `<Control>` does.
+//
+// KaleidoscopePreset-level customization is props: pass a filtered `controls`
+// array to hide knobs, or `overrides` to narrow a control's range/label for this
+// composite. For real layout (grouping, split, per-beam lists), a shader exports
+// a custom form of `<Control uniform>`s instead of using this panel.
+const react_1 = require("react");
+const control_1 = require("./control");
+// Merge a preset override onto a descriptor. min/max/step only apply to float;
+// label applies to any kind.
+function withOverride(c, o) {
+    if (!o)
+        return c;
+    if (c.kind === 'float') {
+        return {
+            ...c,
+            min: o.min ?? c.min,
+            max: o.max ?? c.max,
+            step: o.step ?? c.step,
+            label: o.label ?? c.label,
+        };
+    }
+    return o.label ? { ...c, label: o.label } : c;
+}
+function CompositeLayerControlPanel({ controls, overrides, }) {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: controls.map((c) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, control_1.dispatchControl)(withOverride(c, overrides?.[c.name])) }, c.name))) }));
+}
+//# sourceMappingURL=composite-layer-control-panel.js.map

package/dist/src/components/preset-control-panel/composite-layer-control-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composite-layer-control-panel.js","sourceRoot":"","sources":["../../../../src/components/preset-control-panel/composite-layer-control-panel.tsx"],"names":[],"mappings":";;;;AAAA,gFAAgF;AAChF,kFAAkF;AAClF,6FAA6F;AAC7F,+EAA+E;AAC/E,4EAA4E;AAC5E,EAAE;AACF,8EAA8E;AAC9E,iFAAiF;AACjF,iFAAiF;AACjF,qEAAqE;AAErE,iCAAiC;AAEjC,uCAA4C;AAe5C,+EAA+E;AAC/E,6BAA6B;AAC7B,SAAS,YAAY,CAAC,CAAiB,EAAE,CAAmB;IAC1D,IAAI,CAAC,CAAC;QAAE,OAAO,CAAC,CAAC;IACjB,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;QACvB,OAAO;YACL,GAAG,CAAC;YACJ,GAAG,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG;YACnB,GAAG,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG;YACnB,IAAI,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI;YACtB,KAAK,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK;SAC1B,CAAC;IACJ,CAAC;IACD,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AAChD,CAAC;AAED,oCAA2C,EACzC,QAAQ,EACR,SAAS,GACuB;IAChC,OAAO,CACL,2DACG,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACnB,uBAAC,gBAAQ,cAAe,IAAA,yBAAe,EAAC,YAAY,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAA9D,CAAC,CAAC,IAAI,CAAoE,CAC1F,CAAC,GACD,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// CompositeLayerControlPanel: render a shader's `*_CONTROLS` descriptor list as\n// fields, in order, data-driven. This is the AUTO-FORM (the default when a shader\n// ships no custom layout form): `<CompositeLayerControlPanel controls={CLOUDS_CONTROLS} />`.\n// It maps every descriptor through the shared `dispatchControl`, so it handles\n// every kind (color, float, switch, polygon) the same way `<Control>` does.\n//\n// KaleidoscopePreset-level customization is props: pass a filtered `controls`\n// array to hide knobs, or `overrides` to narrow a control's range/label for this\n// composite. For real layout (grouping, split, per-beam lists), a shader exports\n// a custom form of `<Control uniform>`s instead of using this panel.\n\nimport { Fragment } from 'react';\nimport type { UniformControl } from '../../../catalog/shaders';\nimport { dispatchControl } from './control';\n\n/** Per-uniform range/label override, keyed by uniform name. */\nexport type ControlOverride = {\n  readonly min?: number;\n  readonly max?: number;\n  readonly step?: number;\n  readonly label?: string;\n};\n\nexport type CompositeLayerControlPanelProps = {\n  readonly controls: readonly UniformControl[];\n  readonly overrides?: Readonly<Record<string, ControlOverride>>;\n};\n\n// Merge a preset override onto a descriptor. min/max/step only apply to float;\n// label applies to any kind.\nfunction withOverride(c: UniformControl, o?: ControlOverride): UniformControl {\n  if (!o) return c;\n  if (c.kind === 'float') {\n    return {\n      ...c,\n      min: o.min ?? c.min,\n      max: o.max ?? c.max,\n      step: o.step ?? c.step,\n      label: o.label ?? c.label,\n    };\n  }\n  return o.label ? { ...c, label: o.label } : c;\n}\n\nexport function CompositeLayerControlPanel({\n  controls,\n  overrides,\n}: CompositeLayerControlPanelProps) {\n  return (\n    <>\n      {controls.map((c) => (\n        <Fragment key={c.name}>{dispatchControl(withOverride(c, overrides?.[c.name]))}</Fragment>\n      ))}\n    </>\n  );\n}\n"]}

package/dist/src/components/preset-control-panel/control-section.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export type ControlSectionProps = {
+    readonly title: string;
+    readonly children: ReactNode;
+    readonly style?: StyleProp<ViewStyle>;
+};
+export declare function ControlSection({ title, children, style }: ControlSectionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=control-section.d.ts.map

package/dist/src/components/preset-control-panel/control-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-section.d.ts","sourceRoot":"","sources":["../../../../src/components/preset-control-panel/control-section.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AA+BzD,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACvC,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,mBAAmB,2CAwB7E","sourcesContent":["// ControlSection: the shared chrome every control group wears (a title + a\n// controls slot + a web-only copy button). Rendered INSIDE a ControlForm so the\n// copy button can read that form's live view model and serialize it.\n//\n// Copy is a desktop tweak-then-paste-into-a-preset workflow: the button renders\n// only on web (Platform.OS), writes via navigator.clipboard, and depends on no\n// clipboard module. Native intentionally has no copy button.\n\nimport type { ReactNode } from 'react';\nimport { useContext } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { Platform, StyleSheet, Text, View } from 'react-native';\nimport { ControlFormContext, type FieldValue } from '../form/control-form';\nimport { useThemeSlot } from '../theme/provider';\nimport { Button } from '../ui/button';\n\ntype Values = Readonly<Record<string, FieldValue>>;\n\n// Round off float noise (drag jitter, the slider epsilon) and snap near-zero to\n// a true 0 so the pasted JSON reads as intended.\nconst round = (n: number): number => {\n  const r = Math.round(n * 1e4) / 1e4;\n  return Math.abs(r) < 1e-4 ? 0 : r;\n};\n\nconst roundForCopy = (values: Values): Record<string, FieldValue> => {\n  const out: Record<string, FieldValue> = {};\n  for (const [k, v] of Object.entries(values)) {\n    out[k] = Array.isArray(v) ? v.map(round) : round(v as number);\n  }\n  return out;\n};\n\n// Web-only clipboard write, typed off globalThis so it needs no DOM lib and is a\n// no-op anywhere `navigator.clipboard` is absent.\nconst writeClipboard = (text: string): void => {\n  const nav = (globalThis as { navigator?: { clipboard?: { writeText?: (t: string) => unknown } } })\n    .navigator;\n  nav?.clipboard?.writeText?.(text);\n};\n\nexport type ControlSectionProps = {\n  readonly title: string;\n  readonly children: ReactNode;\n  readonly style?: StyleProp<ViewStyle>;\n};\n\nexport function ControlSection({ title, children, style }: ControlSectionProps) {\n  const form = useContext(ControlFormContext);\n  const { style: themeStyle } = useThemeSlot('section');\n  const canCopy = Platform.OS === 'web' && form !== null;\n  return (\n    <View style={[styles.section, themeStyle as StyleProp<ViewStyle>, style]}>\n      <View style={styles.header}>\n        <Text accessibilityRole=\"header\" style={styles.title}>\n          {title}\n        </Text>\n        {canCopy && form ? (\n          <Button\n            testID={`${form.path}.copy`}\n            onPress={() =>\n              writeClipboard(`${title}: ${JSON.stringify(roundForCopy(form.values), null, 2)}`)\n            }\n          >\n            copy\n          </Button>\n        ) : null}\n      </View>\n      <View>{children}</View>\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  section: { gap: 6 },\n  header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },\n  title: {\n    color: '#aaa',\n    fontSize: 12,\n    fontWeight: '600',\n    textTransform: 'uppercase',\n    letterSpacing: 1,\n  },\n});\n"]}

package/dist/src/components/preset-control-panel/control-section.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ControlSection = ControlSection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const control_form_1 = require("../form/control-form");
+const provider_1 = require("../theme/provider");
+const button_1 = require("../ui/button");
+// Round off float noise (drag jitter, the slider epsilon) and snap near-zero to
+// a true 0 so the pasted JSON reads as intended.
+const round = (n) => {
+    const r = Math.round(n * 1e4) / 1e4;
+    return Math.abs(r) < 1e-4 ? 0 : r;
+};
+const roundForCopy = (values) => {
+    const out = {};
+    for (const [k, v] of Object.entries(values)) {
+        out[k] = Array.isArray(v) ? v.map(round) : round(v);
+    }
+    return out;
+};
+// Web-only clipboard write, typed off globalThis so it needs no DOM lib and is a
+// no-op anywhere `navigator.clipboard` is absent.
+const writeClipboard = (text) => {
+    const nav = globalThis
+        .navigator;
+    nav?.clipboard?.writeText?.(text);
+};
+function ControlSection({ title, children, style }) {
+    const form = (0, react_1.useContext)(control_form_1.ControlFormContext);
+    const { style: themeStyle } = (0, provider_1.useThemeSlot)('section');
+    const canCopy = react_native_1.Platform.OS === 'web' && form !== null;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.section, themeStyle, style], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.header, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { accessibilityRole: "header", style: styles.title, children: title }), canCopy && form ? ((0, jsx_runtime_1.jsx)(button_1.Button, { testID: `${form.path}.copy`, onPress: () => writeClipboard(`${title}: ${JSON.stringify(roundForCopy(form.values), null, 2)}`), children: "copy" })) : null] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { children: children })] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    section: { gap: 6 },
+    header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
+    title: {
+        color: '#aaa',
+        fontSize: 12,
+        fontWeight: '600',
+        textTransform: 'uppercase',
+        letterSpacing: 1,
+    },
+});
+//# sourceMappingURL=control-section.js.map

package/dist/src/components/preset-control-panel/control-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-section.js","sourceRoot":"","sources":["../../../../src/components/preset-control-panel/control-section.tsx"],"names":[],"mappings":";;;;AASA,iCAAmC;AAEnC,+CAAgE;AAChE,uDAA2E;AAC3E,gDAAiD;AACjD,yCAAsC;AAItC,gFAAgF;AAChF,iDAAiD;AACjD,MAAM,KAAK,GAAG,CAAC,CAAS,EAAU,EAAE;IAClC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;IACpC,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACpC,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,MAAc,EAA8B,EAAE;IAClE,MAAM,GAAG,GAA+B,EAAE,CAAC;IAC3C,KAAK,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;QAC5C,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAW,CAAC,CAAC;IAChE,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC,CAAC;AAEF,iFAAiF;AACjF,kDAAkD;AAClD,MAAM,cAAc,GAAG,CAAC,IAAY,EAAQ,EAAE;IAC5C,MAAM,GAAG,GAAI,UAAqF;SAC/F,SAAS,CAAC;IACb,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,IAAI,CAAC,CAAC;AACpC,CAAC,CAAC;AAQF,wBAA+B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAuB;IAC5E,MAAM,IAAI,GAAG,IAAA,kBAAU,EAAC,iCAAkB,CAAC,CAAC;IAC5C,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,IAAA,uBAAY,EAAC,SAAS,CAAC,CAAC;IACtD,MAAM,OAAO,GAAG,uBAAQ,CAAC,EAAE,KAAK,KAAK,IAAI,IAAI,KAAK,IAAI,CAAC;IACvD,OAAO,CACL,wBAAC,mBAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,UAAkC,EAAE,KAAK,CAAC,aACtE,wBAAC,mBAAI,IAAC,KAAK,EAAE,MAAM,CAAC,MAAM,aACxB,uBAAC,mBAAI,IAAC,iBAAiB,EAAC,QAAQ,EAAC,KAAK,EAAE,MAAM,CAAC,KAAK,YACjD,KAAK,GACD,EACN,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,CACjB,uBAAC,eAAM,IACL,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,OAAO,EAC3B,OAAO,EAAE,GAAG,EAAE,CACZ,cAAc,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,qBAI5E,CACV,CAAC,CAAC,CAAC,IAAI,IACH,EACP,uBAAC,mBAAI,cAAE,QAAQ,GAAQ,IAClB,CACR,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,OAAO,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE;IACnB,MAAM,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,UAAU,EAAE,QAAQ,EAAE;IACvF,KAAK,EAAE;QACL,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,KAAK;QACjB,aAAa,EAAE,WAAW;QAC1B,aAAa,EAAE,CAAC;KACjB;CACF,CAAC,CAAC","sourcesContent":["// ControlSection: the shared chrome every control group wears (a title + a\n// controls slot + a web-only copy button). Rendered INSIDE a ControlForm so the\n// copy button can read that form's live view model and serialize it.\n//\n// Copy is a desktop tweak-then-paste-into-a-preset workflow: the button renders\n// only on web (Platform.OS), writes via navigator.clipboard, and depends on no\n// clipboard module. Native intentionally has no copy button.\n\nimport type { ReactNode } from 'react';\nimport { useContext } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { Platform, StyleSheet, Text, View } from 'react-native';\nimport { ControlFormContext, type FieldValue } from '../form/control-form';\nimport { useThemeSlot } from '../theme/provider';\nimport { Button } from '../ui/button';\n\ntype Values = Readonly<Record<string, FieldValue>>;\n\n// Round off float noise (drag jitter, the slider epsilon) and snap near-zero to\n// a true 0 so the pasted JSON reads as intended.\nconst round = (n: number): number => {\n  const r = Math.round(n * 1e4) / 1e4;\n  return Math.abs(r) < 1e-4 ? 0 : r;\n};\n\nconst roundForCopy = (values: Values): Record<string, FieldValue> => {\n  const out: Record<string, FieldValue> = {};\n  for (const [k, v] of Object.entries(values)) {\n    out[k] = Array.isArray(v) ? v.map(round) : round(v as number);\n  }\n  return out;\n};\n\n// Web-only clipboard write, typed off globalThis so it needs no DOM lib and is a\n// no-op anywhere `navigator.clipboard` is absent.\nconst writeClipboard = (text: string): void => {\n  const nav = (globalThis as { navigator?: { clipboard?: { writeText?: (t: string) => unknown } } })\n    .navigator;\n  nav?.clipboard?.writeText?.(text);\n};\n\nexport type ControlSectionProps = {\n  readonly title: string;\n  readonly children: ReactNode;\n  readonly style?: StyleProp<ViewStyle>;\n};\n\nexport function ControlSection({ title, children, style }: ControlSectionProps) {\n  const form = useContext(ControlFormContext);\n  const { style: themeStyle } = useThemeSlot('section');\n  const canCopy = Platform.OS === 'web' && form !== null;\n  return (\n    <View style={[styles.section, themeStyle as StyleProp<ViewStyle>, style]}>\n      <View style={styles.header}>\n        <Text accessibilityRole=\"header\" style={styles.title}>\n          {title}\n        </Text>\n        {canCopy && form ? (\n          <Button\n            testID={`${form.path}.copy`}\n            onPress={() =>\n              writeClipboard(`${title}: ${JSON.stringify(roundForCopy(form.values), null, 2)}`)\n            }\n          >\n            copy\n          </Button>\n        ) : null}\n      </View>\n      <View>{children}</View>\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  section: { gap: 6 },\n  header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },\n  title: {\n    color: '#aaa',\n    fontSize: 12,\n    fontWeight: '600',\n    textTransform: 'uppercase',\n    letterSpacing: 1,\n  },\n});\n"]}

package/dist/src/components/preset-control-panel/control.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { UniformControl } from '../../../catalog/shaders';
+/** Render one control descriptor as its kind's self-wiring primitive. */
+export declare function dispatchControl(c: UniformControl): ReactNode;
+export type ControlProps = {
+    /** The uniform id to place; its descriptor is resolved from the ControlForm. */
+    readonly uniform: string;
+};
+export declare function Control({ uniform }: ControlProps): ReactNode;
+//# sourceMappingURL=control.d.ts.map

package/dist/src/components/preset-control-panel/control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"control.d.ts","sourceRoot":"","sources":["../../../../src/components/preset-control-panel/control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAO/D,yEAAyE;AACzE,wBAAgB,eAAe,CAAC,CAAC,EAAE,cAAc,GAAG,SAAS,CAY5D;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,gFAAgF;IAChF,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,wBAAgB,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,YAAY,aAUhD","sourcesContent":["// Control: place one control by uniform id inside a per-shader form. It takes\n// ONLY the uniform name, resolves that uniform's descriptor from the enclosing\n// ControlForm, and renders the kind's self-wiring primitive with the descriptor's\n// props. Taking only the name is the invariant: a layout form can ARRANGE controls\n// (wrap them in Views, group them) but cannot redefine a control's behavior.\n//\n// `dispatchControl` is the shared kind -> primitive map, reused by the auto-form\n// (CompositeLayerControlPanel renders every descriptor) and by <Control> (renders\n// one looked-up descriptor).\n\nimport type { ReactNode } from 'react';\nimport { useContext } from 'react';\nimport type { UniformControl } from '../../../catalog/shaders';\nimport { ControlFormContext } from '../form/control-form';\nimport { ColorPicker } from '../ui/color-picker';\nimport { PolygonField } from '../ui/polygon-field';\nimport { Slider } from '../ui/slider';\nimport { Switch } from '../ui/switch';\n\n/** Render one control descriptor as its kind's self-wiring primitive. */\nexport function dispatchControl(c: UniformControl): ReactNode {\n  const label = c.label ?? c.name;\n  switch (c.kind) {\n    case 'color':\n      return <ColorPicker uniform={c.name} label={label} />;\n    case 'float':\n      return <Slider uniform={c.name} min={c.min} max={c.max} step={c.step} label={label} />;\n    case 'switch':\n      return <Switch uniform={c.name} label={label} />;\n    case 'polygon':\n      return <PolygonField uniform={c.name} points={c.points} label={label} />;\n  }\n}\n\nexport type ControlProps = {\n  /** The uniform id to place; its descriptor is resolved from the ControlForm. */\n  readonly uniform: string;\n};\n\nexport function Control({ uniform }: ControlProps) {\n  const ctx = useContext(ControlFormContext);\n  const descriptor = ctx?.controls?.find((c) => c.name === uniform);\n  if (!descriptor) {\n    throw new Error(\n      `<Control uniform=\"${uniform}\"/>: no descriptor found. Pass controls={X_CONTROLS} ` +\n        'to the enclosing <ControlForm>.',\n    );\n  }\n  return dispatchControl(descriptor);\n}\n"]}

package/dist/src/components/preset-control-panel/control.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dispatchControl = dispatchControl;
+exports.Control = Control;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const control_form_1 = require("../form/control-form");
+const color_picker_1 = require("../ui/color-picker");
+const polygon_field_1 = require("../ui/polygon-field");
+const slider_1 = require("../ui/slider");
+const switch_1 = require("../ui/switch");
+/** Render one control descriptor as its kind's self-wiring primitive. */
+function dispatchControl(c) {
+    const label = c.label ?? c.name;
+    switch (c.kind) {
+        case 'color':
+            return (0, jsx_runtime_1.jsx)(color_picker_1.ColorPicker, { uniform: c.name, label: label });
+        case 'float':
+            return (0, jsx_runtime_1.jsx)(slider_1.Slider, { uniform: c.name, min: c.min, max: c.max, step: c.step, label: label });
+        case 'switch':
+            return (0, jsx_runtime_1.jsx)(switch_1.Switch, { uniform: c.name, label: label });
+        case 'polygon':
+            return (0, jsx_runtime_1.jsx)(polygon_field_1.PolygonField, { uniform: c.name, points: c.points, label: label });
+    }
+}
+function Control({ uniform }) {
+    const ctx = (0, react_1.useContext)(control_form_1.ControlFormContext);
+    const descriptor = ctx?.controls?.find((c) => c.name === uniform);
+    if (!descriptor) {
+        throw new Error(`<Control uniform="${uniform}"/>: no descriptor found. Pass controls={X_CONTROLS} ` +
+            'to the enclosing <ControlForm>.');
+    }
+    return dispatchControl(descriptor);
+}
+//# sourceMappingURL=control.js.map

package/dist/src/components/preset-control-panel/control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control.js","sourceRoot":"","sources":["../../../../src/components/preset-control-panel/control.tsx"],"names":[],"mappings":";;;;;AAWA,iCAAmC;AAEnC,uDAA0D;AAC1D,qDAAiD;AACjD,uDAAmD;AACnD,yCAAsC;AACtC,yCAAsC;AAEtC,yEAAyE;AACzE,yBAAgC,CAAiB;IAC/C,MAAM,KAAK,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,IAAI,CAAC;IAChC,QAAQ,CAAC,CAAC,IAAI,EAAE,CAAC;QACf,KAAK,OAAO;YACV,OAAO,uBAAC,0BAAW,IAAC,OAAO,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QACxD,KAAK,OAAO;YACV,OAAO,uBAAC,eAAM,IAAC,OAAO,EAAE,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QACzF,KAAK,QAAQ;YACX,OAAO,uBAAC,eAAM,IAAC,OAAO,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QACnD,KAAK,SAAS;YACZ,OAAO,uBAAC,4BAAY,IAAC,OAAO,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;IAC7E,CAAC;AACH,CAAC;AAOD,iBAAwB,EAAE,OAAO,EAAgB;IAC/C,MAAM,GAAG,GAAG,IAAA,kBAAU,EAAC,iCAAkB,CAAC,CAAC;IAC3C,MAAM,UAAU,GAAG,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC;IAClE,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,MAAM,IAAI,KAAK,CACb,qBAAqB,OAAO,uDAAuD;YACjF,iCAAiC,CACpC,CAAC;IACJ,CAAC;IACD,OAAO,eAAe,CAAC,UAAU,CAAC,CAAC;AACrC,CAAC","sourcesContent":["// Control: place one control by uniform id inside a per-shader form. It takes\n// ONLY the uniform name, resolves that uniform's descriptor from the enclosing\n// ControlForm, and renders the kind's self-wiring primitive with the descriptor's\n// props. Taking only the name is the invariant: a layout form can ARRANGE controls\n// (wrap them in Views, group them) but cannot redefine a control's behavior.\n//\n// `dispatchControl` is the shared kind -> primitive map, reused by the auto-form\n// (CompositeLayerControlPanel renders every descriptor) and by <Control> (renders\n// one looked-up descriptor).\n\nimport type { ReactNode } from 'react';\nimport { useContext } from 'react';\nimport type { UniformControl } from '../../../catalog/shaders';\nimport { ControlFormContext } from '../form/control-form';\nimport { ColorPicker } from '../ui/color-picker';\nimport { PolygonField } from '../ui/polygon-field';\nimport { Slider } from '../ui/slider';\nimport { Switch } from '../ui/switch';\n\n/** Render one control descriptor as its kind's self-wiring primitive. */\nexport function dispatchControl(c: UniformControl): ReactNode {\n  const label = c.label ?? c.name;\n  switch (c.kind) {\n    case 'color':\n      return <ColorPicker uniform={c.name} label={label} />;\n    case 'float':\n      return <Slider uniform={c.name} min={c.min} max={c.max} step={c.step} label={label} />;\n    case 'switch':\n      return <Switch uniform={c.name} label={label} />;\n    case 'polygon':\n      return <PolygonField uniform={c.name} points={c.points} label={label} />;\n  }\n}\n\nexport type ControlProps = {\n  /** The uniform id to place; its descriptor is resolved from the ControlForm. */\n  readonly uniform: string;\n};\n\nexport function Control({ uniform }: ControlProps) {\n  const ctx = useContext(ControlFormContext);\n  const descriptor = ctx?.controls?.find((c) => c.name === uniform);\n  if (!descriptor) {\n    throw new Error(\n      `<Control uniform=\"${uniform}\"/>: no descriptor found. Pass controls={X_CONTROLS} ` +\n        'to the enclosing <ControlForm>.',\n    );\n  }\n  return dispatchControl(descriptor);\n}\n"]}

package/dist/src/components/preset-control-panel/index.d.ts

@@ -0,0 +1,14 @@
+export type { KaleidoscopeControls } from '../../kaleidoscope.preset-book.types';
+export { ControlForm, type ControlFormProps, type FieldValue } from '../form/control-form';
+export { makeControls } from '../form/make-controls';
+export { type Field, useField } from '../form/use-field';
+export { KaleidoscopeThemeProvider, useKaleidoscopeTheme, useThemeSlot } from '../theme/provider';
+export type { KaleidoscopeThemeSlots, SlotStyle, ThemeSlot } from '../theme/slots';
+export * from '../ui';
+export { CompositeLayerControlPanel, type CompositeLayerControlPanelProps, type ControlOverride, } from './composite-layer-control-panel';
+export { Control, type ControlProps, dispatchControl } from './control';
+export { ControlSection, type ControlSectionProps } from './control-section';
+export { MaskControlPanel, type MaskControlPanelProps, } from './mask-control-panel';
+export { PresetControlPanel, type PresetControlPanelProps } from './preset-control-panel';
+export { TransformControlPanel, type TransformControlPanelProps, } from './transform-control-panel';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/preset-control-panel/index.ts"],"names":[],"mappings":"AAQA,YAAY,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AACjF,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC3F,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,KAAK,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,yBAAyB,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAClG,YAAY,EAAE,sBAAsB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACnF,cAAc,OAAO,CAAC;AACtB,OAAO,EACL,0BAA0B,EAC1B,KAAK,+BAA+B,EACpC,KAAK,eAAe,GACrB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7E,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,GAC3B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAC1F,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,GAChC,MAAM,2BAA2B,CAAC","sourcesContent":["// Public entry for the opt-in controls composition kit (subpath `./controls`).\n//\n// A per-form `ControlForm` micro-provider with `useField`/`makeControls`, the\n// self-theming field primitives, the `ControlSection` chrome, and the\n// `PresetControlPanel`, all themed via `KaleidoscopeThemeProvider`. This barrel\n// grows commit by commit; the theme surface lands first so later primitives can\n// register against a real exported entry.\n\nexport type { KaleidoscopeControls } from '../../kaleidoscope.preset-book.types';\nexport { ControlForm, type ControlFormProps, type FieldValue } from '../form/control-form';\nexport { makeControls } from '../form/make-controls';\nexport { type Field, useField } from '../form/use-field';\nexport { KaleidoscopeThemeProvider, useKaleidoscopeTheme, useThemeSlot } from '../theme/provider';\nexport type { KaleidoscopeThemeSlots, SlotStyle, ThemeSlot } from '../theme/slots';\nexport * from '../ui';\nexport {\n  CompositeLayerControlPanel,\n  type CompositeLayerControlPanelProps,\n  type ControlOverride,\n} from './composite-layer-control-panel';\nexport { Control, type ControlProps, dispatchControl } from './control';\nexport { ControlSection, type ControlSectionProps } from './control-section';\nexport {\n  MaskControlPanel,\n  type MaskControlPanelProps,\n} from './mask-control-panel';\nexport { PresetControlPanel, type PresetControlPanelProps } from './preset-control-panel';\nexport {\n  TransformControlPanel,\n  type TransformControlPanelProps,\n} from './transform-control-panel';\n"]}

package/dist/src/components/preset-control-panel/index.js

@@ -0,0 +1,49 @@
+"use strict";
+// Public entry for the opt-in controls composition kit (subpath `./controls`).
+//
+// A per-form `ControlForm` micro-provider with `useField`/`makeControls`, the
+// self-theming field primitives, the `ControlSection` chrome, and the
+// `PresetControlPanel`, all themed via `KaleidoscopeThemeProvider`. This barrel
+// grows commit by commit; the theme surface lands first so later primitives can
+// register against a real exported entry.
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TransformControlPanel = exports.PresetControlPanel = exports.MaskControlPanel = exports.ControlSection = exports.dispatchControl = exports.Control = exports.CompositeLayerControlPanel = exports.useThemeSlot = exports.useKaleidoscopeTheme = exports.KaleidoscopeThemeProvider = exports.useField = exports.makeControls = exports.ControlForm = void 0;
+var control_form_1 = require("../form/control-form");
+Object.defineProperty(exports, "ControlForm", { enumerable: true, get: function () { return control_form_1.ControlForm; } });
+var make_controls_1 = require("../form/make-controls");
+Object.defineProperty(exports, "makeControls", { enumerable: true, get: function () { return make_controls_1.makeControls; } });
+var use_field_1 = require("../form/use-field");
+Object.defineProperty(exports, "useField", { enumerable: true, get: function () { return use_field_1.useField; } });
+var provider_1 = require("../theme/provider");
+Object.defineProperty(exports, "KaleidoscopeThemeProvider", { enumerable: true, get: function () { return provider_1.KaleidoscopeThemeProvider; } });
+Object.defineProperty(exports, "useKaleidoscopeTheme", { enumerable: true, get: function () { return provider_1.useKaleidoscopeTheme; } });
+Object.defineProperty(exports, "useThemeSlot", { enumerable: true, get: function () { return provider_1.useThemeSlot; } });
+__exportStar(require("../ui"), exports);
+var composite_layer_control_panel_1 = require("./composite-layer-control-panel");
+Object.defineProperty(exports, "CompositeLayerControlPanel", { enumerable: true, get: function () { return composite_layer_control_panel_1.CompositeLayerControlPanel; } });
+var control_1 = require("./control");
+Object.defineProperty(exports, "Control", { enumerable: true, get: function () { return control_1.Control; } });
+Object.defineProperty(exports, "dispatchControl", { enumerable: true, get: function () { return control_1.dispatchControl; } });
+var control_section_1 = require("./control-section");
+Object.defineProperty(exports, "ControlSection", { enumerable: true, get: function () { return control_section_1.ControlSection; } });
+var mask_control_panel_1 = require("./mask-control-panel");
+Object.defineProperty(exports, "MaskControlPanel", { enumerable: true, get: function () { return mask_control_panel_1.MaskControlPanel; } });
+var preset_control_panel_1 = require("./preset-control-panel");
+Object.defineProperty(exports, "PresetControlPanel", { enumerable: true, get: function () { return preset_control_panel_1.PresetControlPanel; } });
+var transform_control_panel_1 = require("./transform-control-panel");
+Object.defineProperty(exports, "TransformControlPanel", { enumerable: true, get: function () { return transform_control_panel_1.TransformControlPanel; } });
+//# sourceMappingURL=index.js.map

package/dist/src/components/preset-control-panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/preset-control-panel/index.ts"],"names":[],"mappings":";AAAA,+EAA+E;AAC/E,EAAE;AACF,8EAA8E;AAC9E,sEAAsE;AACtE,gFAAgF;AAChF,gFAAgF;AAChF,0CAA0C;;;;;;;;;;;;;;;;;AAG1C,qDAA2F;AAAlF,2GAAA,WAAW,OAAA;AACpB,uDAAqD;AAA5C,6GAAA,YAAY,OAAA;AACrB,+CAAyD;AAApC,qGAAA,QAAQ,OAAA;AAC7B,8CAAkG;AAAzF,qHAAA,yBAAyB,OAAA;AAAE,gHAAA,oBAAoB,OAAA;AAAE,wGAAA,YAAY,OAAA;AAEtE,wCAAsB;AACtB,iFAIyC;AAHvC,2IAAA,0BAA0B,OAAA;AAI5B,qCAAwE;AAA/D,kGAAA,OAAO,OAAA;AAAqB,0GAAA,eAAe,OAAA;AACpD,qDAA6E;AAApE,iHAAA,cAAc,OAAA;AACvB,2DAG8B;AAF5B,sHAAA,gBAAgB,OAAA;AAGlB,+DAA0F;AAAjF,0HAAA,kBAAkB,OAAA;AAC3B,qEAGmC;AAFjC,gIAAA,qBAAqB,OAAA","sourcesContent":["// Public entry for the opt-in controls composition kit (subpath `./controls`).\n//\n// A per-form `ControlForm` micro-provider with `useField`/`makeControls`, the\n// self-theming field primitives, the `ControlSection` chrome, and the\n// `PresetControlPanel`, all themed via `KaleidoscopeThemeProvider`. This barrel\n// grows commit by commit; the theme surface lands first so later primitives can\n// register against a real exported entry.\n\nexport type { KaleidoscopeControls } from '../../kaleidoscope.preset-book.types';\nexport { ControlForm, type ControlFormProps, type FieldValue } from '../form/control-form';\nexport { makeControls } from '../form/make-controls';\nexport { type Field, useField } from '../form/use-field';\nexport { KaleidoscopeThemeProvider, useKaleidoscopeTheme, useThemeSlot } from '../theme/provider';\nexport type { KaleidoscopeThemeSlots, SlotStyle, ThemeSlot } from '../theme/slots';\nexport * from '../ui';\nexport {\n  CompositeLayerControlPanel,\n  type CompositeLayerControlPanelProps,\n  type ControlOverride,\n} from './composite-layer-control-panel';\nexport { Control, type ControlProps, dispatchControl } from './control';\nexport { ControlSection, type ControlSectionProps } from './control-section';\nexport {\n  MaskControlPanel,\n  type MaskControlPanelProps,\n} from './mask-control-panel';\nexport { PresetControlPanel, type PresetControlPanelProps } from './preset-control-panel';\nexport {\n  TransformControlPanel,\n  type TransformControlPanelProps,\n} from './transform-control-panel';\n"]}

package/dist/src/components/preset-control-panel/mask-control-panel.d.ts

@@ -0,0 +1,11 @@
+import type { MaskInput } from '../../kaleidoscope/types';
+export type MaskControlPanelProps = {
+    readonly hardness: number;
+    readonly threshold: number;
+    readonly onChange: (mask: MaskInput) => void;
+    readonly disabled?: boolean;
+    /** Root for this instance's test ids; override when a screen mounts two. */
+    readonly testIDPrefix?: string;
+};
+export declare function MaskControlPanel({ hardness, threshold, onChange, disabled, testIDPrefix, }: MaskControlPanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=mask-control-panel.d.ts.map

package/dist/src/components/preset-control-panel/mask-control-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mask-control-panel.d.ts","sourceRoot":"","sources":["../../../../src/components/preset-control-panel/mask-control-panel.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAO1D,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,4EAA4E;IAC5E,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;CAChC,CAAC;AAwCF,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAgB,EAChB,YAAiC,GAClC,EAAE,qBAAqB,2CAmBvB","sourcesContent":["// MaskControlPanel: the segmentation-edge panel, themed and controlled.\n// Either slider emits the full MaskInput (the mask verb is absolute). Not a\n// layer form, so it has no ControlForm (and thus no copy button) and uses the\n// raw slider directly with the themed Label/Readout primitives.\n\nimport RNSlider from '@react-native-community/slider';\nimport { StyleSheet, View } from 'react-native';\nimport type { MaskInput } from '../../kaleidoscope/types';\nimport { MASK_TESTID_PREFIX } from '../../lib/test-id';\nimport { Label } from '../ui/label';\nimport { Readout } from '../ui/readout';\nimport { SLIDER_TINTS } from '../ui/slider-value';\nimport { ControlSection } from './control-section';\n\nexport type MaskControlPanelProps = {\n  readonly hardness: number;\n  readonly threshold: number;\n  readonly onChange: (mask: MaskInput) => void;\n  readonly disabled?: boolean;\n  /** Root for this instance's test ids; override when a screen mounts two. */\n  readonly testIDPrefix?: string;\n};\n\nfunction MaskRow({\n  label,\n  value,\n  disabled,\n  onChange,\n  testID,\n}: {\n  readonly label: string;\n  readonly value: number;\n  readonly disabled: boolean;\n  readonly onChange: (v: number) => void;\n  readonly testID: string;\n}) {\n  return (\n    <View style={styles.row}>\n      <View style={styles.line}>\n        <Label>{label}</Label>\n        <Readout>{value.toFixed(2)}</Readout>\n      </View>\n      <RNSlider\n        style={styles.slider}\n        testID={testID}\n        accessibilityLabel={label}\n        // Floor at 0.01: at exactly 0 the mask smoothstep range collapses\n        // (lo === hi) and the edge breaks. 0.01 keeps it well-defined. This is a\n        // shader-math floor, distinct from the field slider's web-crash epsilon.\n        minimumValue={0.01}\n        maximumValue={1}\n        step={0.01}\n        value={value}\n        disabled={disabled}\n        onValueChange={onChange}\n        {...SLIDER_TINTS}\n      />\n    </View>\n  );\n}\n\nexport function MaskControlPanel({\n  hardness,\n  threshold,\n  onChange,\n  disabled = false,\n  testIDPrefix = MASK_TESTID_PREFIX,\n}: MaskControlPanelProps) {\n  return (\n    <ControlSection title=\"mask\">\n      <MaskRow\n        label=\"hardness\"\n        value={hardness}\n        disabled={disabled}\n        onChange={(v) => onChange({ hardness: v, threshold })}\n        testID={`${testIDPrefix}.hardness`}\n      />\n      <MaskRow\n        label=\"threshold\"\n        value={threshold}\n        disabled={disabled}\n        onChange={(v) => onChange({ hardness, threshold: v })}\n        testID={`${testIDPrefix}.threshold`}\n      />\n    </ControlSection>\n  );\n}\n\nconst styles = StyleSheet.create({\n  row: { gap: 2 },\n  line: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },\n  slider: { width: '100%', height: 32 },\n});\n"]}

package/dist/src/components/preset-control-panel/mask-control-panel.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MaskControlPanel = MaskControlPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// MaskControlPanel: the segmentation-edge panel, themed and controlled.
+// Either slider emits the full MaskInput (the mask verb is absolute). Not a
+// layer form, so it has no ControlForm (and thus no copy button) and uses the
+// raw slider directly with the themed Label/Readout primitives.
+const slider_1 = __importDefault(require("@react-native-community/slider"));
+const react_native_1 = require("react-native");
+const test_id_1 = require("../../lib/test-id");
+const label_1 = require("../ui/label");
+const readout_1 = require("../ui/readout");
+const slider_value_1 = require("../ui/slider-value");
+const control_section_1 = require("./control-section");
+function MaskRow({ label, value, disabled, onChange, testID, }) {
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.row, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.line, children: [(0, jsx_runtime_1.jsx)(label_1.Label, { children: label }), (0, jsx_runtime_1.jsx)(readout_1.Readout, { children: value.toFixed(2) })] }), (0, jsx_runtime_1.jsx)(slider_1.default, { style: styles.slider, testID: testID, accessibilityLabel: label, 
+                // Floor at 0.01: at exactly 0 the mask smoothstep range collapses
+                // (lo === hi) and the edge breaks. 0.01 keeps it well-defined. This is a
+                // shader-math floor, distinct from the field slider's web-crash epsilon.
+                minimumValue: 0.01, maximumValue: 1, step: 0.01, value: value, disabled: disabled, onValueChange: onChange, ...slider_value_1.SLIDER_TINTS })] }));
+}
+function MaskControlPanel({ hardness, threshold, onChange, disabled = false, testIDPrefix = test_id_1.MASK_TESTID_PREFIX, }) {
+    return ((0, jsx_runtime_1.jsxs)(control_section_1.ControlSection, { title: "mask", children: [(0, jsx_runtime_1.jsx)(MaskRow, { label: "hardness", value: hardness, disabled: disabled, onChange: (v) => onChange({ hardness: v, threshold }), testID: `${testIDPrefix}.hardness` }), (0, jsx_runtime_1.jsx)(MaskRow, { label: "threshold", value: threshold, disabled: disabled, onChange: (v) => onChange({ hardness, threshold: v }), testID: `${testIDPrefix}.threshold` })] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    row: { gap: 2 },
+    line: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
+    slider: { width: '100%', height: 32 },
+});
+//# sourceMappingURL=mask-control-panel.js.map

package/dist/src/components/preset-control-panel/mask-control-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mask-control-panel.js","sourceRoot":"","sources":["../../../../src/components/preset-control-panel/mask-control-panel.tsx"],"names":[],"mappings":";;;;;;;AAAA,wEAAwE;AACxE,4EAA4E;AAC5E,8EAA8E;AAC9E,gEAAgE;AAEhE,4EAAsD;AACtD,+CAAgD;AAEhD,+CAAuD;AACvD,uCAAoC;AACpC,2CAAwC;AACxC,qDAAkD;AAClD,uDAAmD;AAWnD,SAAS,OAAO,CAAC,EACf,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,GAOP;IACC,OAAO,CACL,wBAAC,mBAAI,IAAC,KAAK,EAAE,MAAM,CAAC,GAAG,aACrB,wBAAC,mBAAI,IAAC,KAAK,EAAE,MAAM,CAAC,IAAI,aACtB,uBAAC,aAAK,cAAE,KAAK,GAAS,EACtB,uBAAC,iBAAO,cAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAW,IAChC,EACP,uBAAC,gBAAQ,IACP,KAAK,EAAE,MAAM,CAAC,MAAM,EACpB,MAAM,EAAE,MAAM,EACd,kBAAkB,EAAE,KAAK;gBACzB,kEAAkE;gBAClE,yEAAyE;gBACzE,yEAAyE;gBACzE,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,CAAC,EACf,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,QAAQ,KACnB,2BAAY,GAChB,IACG,CACR,CAAC;AACJ,CAAC;AAED,0BAAiC,EAC/B,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,YAAY,GAAG,4BAAkB,GACX;IACtB,OAAO,CACL,wBAAC,gCAAc,IAAC,KAAK,EAAC,MAAM,aAC1B,uBAAC,OAAO,IACN,KAAK,EAAC,UAAU,EAChB,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EACrD,MAAM,EAAE,GAAG,YAAY,WAAW,GAClC,EACF,uBAAC,OAAO,IACN,KAAK,EAAC,WAAW,EACjB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,EACrD,MAAM,EAAE,GAAG,YAAY,YAAY,GACnC,IACa,CAClB,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,GAAG,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE;IACf,IAAI,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,UAAU,EAAE,QAAQ,EAAE;IACrF,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE;CACtC,CAAC,CAAC","sourcesContent":["// MaskControlPanel: the segmentation-edge panel, themed and controlled.\n// Either slider emits the full MaskInput (the mask verb is absolute). Not a\n// layer form, so it has no ControlForm (and thus no copy button) and uses the\n// raw slider directly with the themed Label/Readout primitives.\n\nimport RNSlider from '@react-native-community/slider';\nimport { StyleSheet, View } from 'react-native';\nimport type { MaskInput } from '../../kaleidoscope/types';\nimport { MASK_TESTID_PREFIX } from '../../lib/test-id';\nimport { Label } from '../ui/label';\nimport { Readout } from '../ui/readout';\nimport { SLIDER_TINTS } from '../ui/slider-value';\nimport { ControlSection } from './control-section';\n\nexport type MaskControlPanelProps = {\n  readonly hardness: number;\n  readonly threshold: number;\n  readonly onChange: (mask: MaskInput) => void;\n  readonly disabled?: boolean;\n  /** Root for this instance's test ids; override when a screen mounts two. */\n  readonly testIDPrefix?: string;\n};\n\nfunction MaskRow({\n  label,\n  value,\n  disabled,\n  onChange,\n  testID,\n}: {\n  readonly label: string;\n  readonly value: number;\n  readonly disabled: boolean;\n  readonly onChange: (v: number) => void;\n  readonly testID: string;\n}) {\n  return (\n    <View style={styles.row}>\n      <View style={styles.line}>\n        <Label>{label}</Label>\n        <Readout>{value.toFixed(2)}</Readout>\n      </View>\n      <RNSlider\n        style={styles.slider}\n        testID={testID}\n        accessibilityLabel={label}\n        // Floor at 0.01: at exactly 0 the mask smoothstep range collapses\n        // (lo === hi) and the edge breaks. 0.01 keeps it well-defined. This is a\n        // shader-math floor, distinct from the field slider's web-crash epsilon.\n        minimumValue={0.01}\n        maximumValue={1}\n        step={0.01}\n        value={value}\n        disabled={disabled}\n        onValueChange={onChange}\n        {...SLIDER_TINTS}\n      />\n    </View>\n  );\n}\n\nexport function MaskControlPanel({\n  hardness,\n  threshold,\n  onChange,\n  disabled = false,\n  testIDPrefix = MASK_TESTID_PREFIX,\n}: MaskControlPanelProps) {\n  return (\n    <ControlSection title=\"mask\">\n      <MaskRow\n        label=\"hardness\"\n        value={hardness}\n        disabled={disabled}\n        onChange={(v) => onChange({ hardness: v, threshold })}\n        testID={`${testIDPrefix}.hardness`}\n      />\n      <MaskRow\n        label=\"threshold\"\n        value={threshold}\n        disabled={disabled}\n        onChange={(v) => onChange({ hardness, threshold: v })}\n        testID={`${testIDPrefix}.threshold`}\n      />\n    </ControlSection>\n  );\n}\n\nconst styles = StyleSheet.create({\n  row: { gap: 2 },\n  line: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },\n  slider: { width: '100%', height: 32 },\n});\n"]}

package/dist/src/components/preset-control-panel/preset-control-panel.d.ts

@@ -0,0 +1,12 @@
+import type { ReactElement } from 'react';
+import type { KaleidoscopeControls, KaleidoscopePresetBook } from '../../kaleidoscope.preset-book.types';
+export type PresetControlPanelProps<P extends KaleidoscopePresetBook> = {
+    readonly presets: P;
+    /** The active preset id, or null when nothing is selected. */
+    readonly value: (keyof P & string) | null;
+    /** Routed to the host, which applies it via `kaleidoscope(value, [patch])`. */
+    readonly onPatch: KaleidoscopeControls['onPatch'];
+    readonly disabled?: boolean;
+};
+export declare function PresetControlPanel<P extends KaleidoscopePresetBook>({ presets, value, onPatch, disabled, }: PresetControlPanelProps<P>): ReactElement | null;
+//# sourceMappingURL=preset-control-panel.d.ts.map

package/dist/src/components/preset-control-panel/preset-control-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset-control-panel.d.ts","sourceRoot":"","sources":["../../../../src/components/preset-control-panel/preset-control-panel.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EACV,oBAAoB,EACpB,sBAAsB,EACvB,MAAM,sCAAsC,CAAC;AAG9C,MAAM,MAAM,uBAAuB,CAAC,CAAC,SAAS,sBAAsB,IAAI;IACtE,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;IACpB,8DAA8D;IAC9D,QAAQ,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,IAAI,CAAC;IAC1C,+EAA+E;IAC/E,QAAQ,CAAC,OAAO,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;IAClD,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,sBAAsB,EAAE,EACnE,OAAO,EACP,KAAK,EACL,OAAO,EACP,QAAgB,GACjB,EAAE,uBAAuB,CAAC,CAAC,CAAC,GAAG,YAAY,GAAG,IAAI,CAoBlD","sourcesContent":["// PresetControlPanel: the thin, controlled editor. For the active preset it\n// renders that preset's `controls` component (keyed by preset id, so a switch\n// remounts and the ControlForms re-seed), handing it the per-layer baked\n// uniforms and a single shared onPatch. It never calls `kaleidoscope` itself;\n// the host routes onPatch into `kaleidoscope(activeId, [patch])`.\n\nimport type { ReactElement } from 'react';\nimport type {\n  KaleidoscopeControls,\n  KaleidoscopePresetBook,\n} from '../../kaleidoscope.preset-book.types';\nimport { ControlScopeContext } from '../form/scope';\n\nexport type PresetControlPanelProps<P extends KaleidoscopePresetBook> = {\n  readonly presets: P;\n  /** The active preset id, or null when nothing is selected. */\n  readonly value: (keyof P & string) | null;\n  /** Routed to the host, which applies it via `kaleidoscope(value, [patch])`. */\n  readonly onPatch: KaleidoscopeControls['onPatch'];\n  readonly disabled?: boolean;\n};\n\nexport function PresetControlPanel<P extends KaleidoscopePresetBook>({\n  presets,\n  value,\n  onPatch,\n  disabled = false,\n}: PresetControlPanelProps<P>): ReactElement | null {\n  if (value === null) return null;\n  const preset = presets[value];\n  const Controls = preset?.controls;\n  if (!Controls) return null;\n\n  // Per-layer baked uniforms keyed by id, for the controls component to seed each\n  // layer's ControlForm. Only tunable layers carry uniforms.\n  const uniforms: Record<string, Record<string, number | readonly number[]>> = {};\n  for (const layer of preset.layers) {\n    if ('uniforms' in layer) {\n      uniforms[layer.id] = { ...layer.uniforms } as Record<string, number | readonly number[]>;\n    }\n  }\n\n  return (\n    <ControlScopeContext.Provider value={value}>\n      <Controls key={value} uniforms={uniforms} onPatch={onPatch} disabled={disabled} />\n    </ControlScopeContext.Provider>\n  );\n}\n"]}

package/dist/src/components/preset-control-panel/preset-control-panel.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PresetControlPanel = PresetControlPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const scope_1 = require("../form/scope");
+function PresetControlPanel({ presets, value, onPatch, disabled = false, }) {
+    if (value === null)
+        return null;
+    const preset = presets[value];
+    const Controls = preset?.controls;
+    if (!Controls)
+        return null;
+    // Per-layer baked uniforms keyed by id, for the controls component to seed each
+    // layer's ControlForm. Only tunable layers carry uniforms.
+    const uniforms = {};
+    for (const layer of preset.layers) {
+        if ('uniforms' in layer) {
+            uniforms[layer.id] = { ...layer.uniforms };
+        }
+    }
+    return ((0, jsx_runtime_1.jsx)(scope_1.ControlScopeContext.Provider, { value: value, children: (0, jsx_runtime_1.jsx)(Controls, { uniforms: uniforms, onPatch: onPatch, disabled: disabled }, value) }));
+}
+//# sourceMappingURL=preset-control-panel.js.map

package/dist/src/components/preset-control-panel/preset-control-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset-control-panel.js","sourceRoot":"","sources":["../../../../src/components/preset-control-panel/preset-control-panel.tsx"],"names":[],"mappings":";;;;AAWA,yCAAoD;AAWpD,4BAAqE,EACnE,OAAO,EACP,KAAK,EACL,OAAO,EACP,QAAQ,GAAG,KAAK,GACW;IAC3B,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IAChC,MAAM,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IAC9B,MAAM,QAAQ,GAAG,MAAM,EAAE,QAAQ,CAAC;IAClC,IAAI,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE3B,gFAAgF;IAChF,2DAA2D;IAC3D,MAAM,QAAQ,GAA+D,EAAE,CAAC;IAChF,KAAK,MAAM,KAAK,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC;QAClC,IAAI,UAAU,IAAI,KAAK,EAAE,CAAC;YACxB,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,CAAC,QAAQ,EAAgD,CAAC;QAC3F,CAAC;IACH,CAAC;IAED,OAAO,CACL,uBAAC,2BAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACxC,uBAAC,QAAQ,IAAa,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,IAA/D,KAAK,CAA8D,GACrD,CAChC,CAAC;AACJ,CAAC","sourcesContent":["// PresetControlPanel: the thin, controlled editor. For the active preset it\n// renders that preset's `controls` component (keyed by preset id, so a switch\n// remounts and the ControlForms re-seed), handing it the per-layer baked\n// uniforms and a single shared onPatch. It never calls `kaleidoscope` itself;\n// the host routes onPatch into `kaleidoscope(activeId, [patch])`.\n\nimport type { ReactElement } from 'react';\nimport type {\n  KaleidoscopeControls,\n  KaleidoscopePresetBook,\n} from '../../kaleidoscope.preset-book.types';\nimport { ControlScopeContext } from '../form/scope';\n\nexport type PresetControlPanelProps<P extends KaleidoscopePresetBook> = {\n  readonly presets: P;\n  /** The active preset id, or null when nothing is selected. */\n  readonly value: (keyof P & string) | null;\n  /** Routed to the host, which applies it via `kaleidoscope(value, [patch])`. */\n  readonly onPatch: KaleidoscopeControls['onPatch'];\n  readonly disabled?: boolean;\n};\n\nexport function PresetControlPanel<P extends KaleidoscopePresetBook>({\n  presets,\n  value,\n  onPatch,\n  disabled = false,\n}: PresetControlPanelProps<P>): ReactElement | null {\n  if (value === null) return null;\n  const preset = presets[value];\n  const Controls = preset?.controls;\n  if (!Controls) return null;\n\n  // Per-layer baked uniforms keyed by id, for the controls component to seed each\n  // layer's ControlForm. Only tunable layers carry uniforms.\n  const uniforms: Record<string, Record<string, number | readonly number[]>> = {};\n  for (const layer of preset.layers) {\n    if ('uniforms' in layer) {\n      uniforms[layer.id] = { ...layer.uniforms } as Record<string, number | readonly number[]>;\n    }\n  }\n\n  return (\n    <ControlScopeContext.Provider value={value}>\n      <Controls key={value} uniforms={uniforms} onPatch={onPatch} disabled={disabled} />\n    </ControlScopeContext.Provider>\n  );\n}\n"]}

package/dist/src/components/preset-control-panel/transform-control-panel.d.ts

@@ -0,0 +1,14 @@
+import type { TransformInput } from '../../kaleidoscope/types';
+export type TransformControlPanelProps = {
+    readonly flip?: {
+        readonly x?: boolean;
+        readonly y?: boolean;
+    };
+    readonly rotate?: number;
+    readonly onChange: (transform: TransformInput) => void;
+    readonly disabled?: boolean;
+    /** Root for this instance's test ids; override when a screen mounts two. */
+    readonly testIDPrefix?: string;
+};
+export declare function TransformControlPanel({ flip, rotate, onChange, disabled, testIDPrefix, }: TransformControlPanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=transform-control-panel.d.ts.map

package/dist/src/components/preset-control-panel/transform-control-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transform-control-panel.d.ts","sourceRoot":"","sources":["../../../../src/components/preset-control-panel/transform-control-panel.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAO/D,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,CAAC,IAAI,CAAC,EAAE;QAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IAC/D,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;IACvD,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,4EAA4E;IAC5E,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;CAChC,CAAC;AAyCF,wBAAgB,qBAAqB,CAAC,EACpC,IAAI,EACJ,MAAU,EACV,QAAQ,EACR,QAAgB,EAChB,YAAsC,GACvC,EAAE,0BAA0B,2CAoD5B","sourcesContent":["// TransformControlPanel: absolute flip + 90-degree rotation, themed and\n// controlled. Every change emits the full TransformInput (the transform verb is\n// absolute). Toggles read the `active` theme slot for their on state.\n\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport type { TransformInput } from '../../kaleidoscope/types';\nimport { flipTestId, rotateTestId, TRANSFORM_TESTID_PREFIX } from '../../lib/test-id';\nimport { useThemeSlot } from '../theme/provider';\nimport { ControlSection } from './control-section';\n\nconst ROTATIONS = [0, 90, 180, 270] as const;\n\nexport type TransformControlPanelProps = {\n  readonly flip?: { readonly x?: boolean; readonly y?: boolean };\n  readonly rotate?: number;\n  readonly onChange: (transform: TransformInput) => void;\n  readonly disabled?: boolean;\n  /** Root for this instance's test ids; override when a screen mounts two. */\n  readonly testIDPrefix?: string;\n};\n\nfunction FlipToggle({\n  label,\n  icon,\n  on,\n  disabled,\n  onPress,\n  testID,\n  accessibilityLabel,\n}: {\n  readonly label: string;\n  readonly icon: string;\n  readonly on: boolean;\n  readonly disabled: boolean;\n  readonly onPress: () => void;\n  readonly testID: string;\n  readonly accessibilityLabel: string;\n}) {\n  const { style: activeStyle } = useThemeSlot('active');\n  return (\n    <Pressable\n      accessibilityRole=\"switch\"\n      accessibilityLabel={accessibilityLabel}\n      accessibilityState={{ checked: on, disabled }}\n      testID={testID}\n      disabled={disabled}\n      onPress={onPress}\n      style={[\n        styles.flip,\n        on && styles.on,\n        on && (activeStyle as StyleProp<ViewStyle>),\n        disabled && styles.disabled,\n      ]}\n    >\n      <Text style={styles.flipIcon}>{icon}</Text>\n      <Text style={styles.flipLabel}>{label}</Text>\n    </Pressable>\n  );\n}\n\nexport function TransformControlPanel({\n  flip,\n  rotate = 0,\n  onChange,\n  disabled = false,\n  testIDPrefix = TRANSFORM_TESTID_PREFIX,\n}: TransformControlPanelProps) {\n  const x = flip?.x ?? false;\n  const y = flip?.y ?? false;\n  const { style: activeStyle } = useThemeSlot('active');\n  return (\n    <ControlSection title=\"transform\">\n      <View style={styles.flipRow}>\n        <FlipToggle\n          label=\"X\"\n          icon=\"↔\"\n          on={x}\n          disabled={disabled}\n          onPress={() => onChange({ flip: { x: !x, y }, rotate })}\n          testID={flipTestId(testIDPrefix, 'x')}\n          accessibilityLabel=\"Flip horizontal\"\n        />\n        <FlipToggle\n          label=\"Y\"\n          icon=\"↕\"\n          on={y}\n          disabled={disabled}\n          onPress={() => onChange({ flip: { x, y: !y }, rotate })}\n          testID={flipTestId(testIDPrefix, 'y')}\n          accessibilityLabel=\"Flip vertical\"\n        />\n      </View>\n      <View style={styles.rotRow}>\n        {ROTATIONS.map((deg) => {\n          const on = rotate === deg;\n          return (\n            <Pressable\n              key={deg}\n              accessibilityRole=\"radio\"\n              accessibilityLabel={deg === 0 ? 'No rotation' : `Rotate ${deg} degrees`}\n              accessibilityState={{ selected: on, disabled }}\n              testID={rotateTestId(testIDPrefix, deg)}\n              disabled={disabled}\n              onPress={() => onChange({ flip: { x, y }, rotate: deg })}\n              style={[\n                styles.rot,\n                on && styles.on,\n                on && (activeStyle as StyleProp<ViewStyle>),\n                disabled && styles.disabled,\n              ]}\n            >\n              <Text style={styles.rotText}>{deg}°</Text>\n            </Pressable>\n          );\n        })}\n      </View>\n    </ControlSection>\n  );\n}\n\nconst styles = StyleSheet.create({\n  flipRow: { flexDirection: 'row', gap: 8 },\n  rotRow: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },\n  flip: {\n    flex: 1,\n    paddingVertical: 12,\n    backgroundColor: '#2a2a2a',\n    borderRadius: 6,\n    alignItems: 'center',\n    gap: 2,\n  },\n  rot: {\n    flexGrow: 1,\n    minWidth: 56,\n    paddingVertical: 10,\n    backgroundColor: '#2a2a2a',\n    borderRadius: 6,\n    alignItems: 'center',\n  },\n  on: { backgroundColor: '#4a8f3f' },\n  disabled: { opacity: 0.5 },\n  flipIcon: { color: '#fff', fontSize: 22, lineHeight: 26 },\n  flipLabel: { color: '#fff', fontWeight: '500', fontSize: 13 },\n  rotText: { color: '#fff', fontWeight: '600', fontSize: 13 },\n});\n"]}

package/dist/src/components/preset-control-panel/transform-control-panel.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TransformControlPanel = TransformControlPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const test_id_1 = require("../../lib/test-id");
+const provider_1 = require("../theme/provider");
+const control_section_1 = require("./control-section");
+const ROTATIONS = [0, 90, 180, 270];
+function FlipToggle({ label, icon, on, disabled, onPress, testID, accessibilityLabel, }) {
+    const { style: activeStyle } = (0, provider_1.useThemeSlot)('active');
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { accessibilityRole: "switch", accessibilityLabel: accessibilityLabel, accessibilityState: { checked: on, disabled }, testID: testID, disabled: disabled, onPress: onPress, style: [
+            styles.flip,
+            on && styles.on,
+            on && activeStyle,
+            disabled && styles.disabled,
+        ], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.flipIcon, children: icon }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.flipLabel, children: label })] }));
+}
+function TransformControlPanel({ flip, rotate = 0, onChange, disabled = false, testIDPrefix = test_id_1.TRANSFORM_TESTID_PREFIX, }) {
+    const x = flip?.x ?? false;
+    const y = flip?.y ?? false;
+    const { style: activeStyle } = (0, provider_1.useThemeSlot)('active');
+    return ((0, jsx_runtime_1.jsxs)(control_section_1.ControlSection, { title: "transform", children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.flipRow, children: [(0, jsx_runtime_1.jsx)(FlipToggle, { label: "X", icon: "\u2194", on: x, disabled: disabled, onPress: () => onChange({ flip: { x: !x, y }, rotate }), testID: (0, test_id_1.flipTestId)(testIDPrefix, 'x'), accessibilityLabel: "Flip horizontal" }), (0, jsx_runtime_1.jsx)(FlipToggle, { label: "Y", icon: "\u2195", on: y, disabled: disabled, onPress: () => onChange({ flip: { x, y: !y }, rotate }), testID: (0, test_id_1.flipTestId)(testIDPrefix, 'y'), accessibilityLabel: "Flip vertical" })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.rotRow, children: ROTATIONS.map((deg) => {
+                    const on = rotate === deg;
+                    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "radio", accessibilityLabel: deg === 0 ? 'No rotation' : `Rotate ${deg} degrees`, accessibilityState: { selected: on, disabled }, testID: (0, test_id_1.rotateTestId)(testIDPrefix, deg), disabled: disabled, onPress: () => onChange({ flip: { x, y }, rotate: deg }), style: [
+                            styles.rot,
+                            on && styles.on,
+                            on && activeStyle,
+                            disabled && styles.disabled,
+                        ], children: (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.rotText, children: [deg, "\u00B0"] }) }, deg));
+                }) })] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    flipRow: { flexDirection: 'row', gap: 8 },
+    rotRow: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
+    flip: {
+        flex: 1,
+        paddingVertical: 12,
+        backgroundColor: '#2a2a2a',
+        borderRadius: 6,
+        alignItems: 'center',
+        gap: 2,
+    },
+    rot: {
+        flexGrow: 1,
+        minWidth: 56,
+        paddingVertical: 10,
+        backgroundColor: '#2a2a2a',
+        borderRadius: 6,
+        alignItems: 'center',
+    },
+    on: { backgroundColor: '#4a8f3f' },
+    disabled: { opacity: 0.5 },
+    flipIcon: { color: '#fff', fontSize: 22, lineHeight: 26 },
+    flipLabel: { color: '#fff', fontWeight: '500', fontSize: 13 },
+    rotText: { color: '#fff', fontWeight: '600', fontSize: 13 },
+});
+//# sourceMappingURL=transform-control-panel.js.map

package/dist/src/components/preset-control-panel/transform-control-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transform-control-panel.js","sourceRoot":"","sources":["../../../../src/components/preset-control-panel/transform-control-panel.tsx"],"names":[],"mappings":"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","sourcesContent":["// TransformControlPanel: absolute flip + 90-degree rotation, themed and\n// controlled. Every change emits the full TransformInput (the transform verb is\n// absolute). Toggles read the `active` theme slot for their on state.\n\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport type { TransformInput } from '../../kaleidoscope/types';\nimport { flipTestId, rotateTestId, TRANSFORM_TESTID_PREFIX } from '../../lib/test-id';\nimport { useThemeSlot } from '../theme/provider';\nimport { ControlSection } from './control-section';\n\nconst ROTATIONS = [0, 90, 180, 270] as const;\n\nexport type TransformControlPanelProps = {\n  readonly flip?: { readonly x?: boolean; readonly y?: boolean };\n  readonly rotate?: number;\n  readonly onChange: (transform: TransformInput) => void;\n  readonly disabled?: boolean;\n  /** Root for this instance's test ids; override when a screen mounts two. */\n  readonly testIDPrefix?: string;\n};\n\nfunction FlipToggle({\n  label,\n  icon,\n  on,\n  disabled,\n  onPress,\n  testID,\n  accessibilityLabel,\n}: {\n  readonly label: string;\n  readonly icon: string;\n  readonly on: boolean;\n  readonly disabled: boolean;\n  readonly onPress: () => void;\n  readonly testID: string;\n  readonly accessibilityLabel: string;\n}) {\n  const { style: activeStyle } = useThemeSlot('active');\n  return (\n    <Pressable\n      accessibilityRole=\"switch\"\n      accessibilityLabel={accessibilityLabel}\n      accessibilityState={{ checked: on, disabled }}\n      testID={testID}\n      disabled={disabled}\n      onPress={onPress}\n      style={[\n        styles.flip,\n        on && styles.on,\n        on && (activeStyle as StyleProp<ViewStyle>),\n        disabled && styles.disabled,\n      ]}\n    >\n      <Text style={styles.flipIcon}>{icon}</Text>\n      <Text style={styles.flipLabel}>{label}</Text>\n    </Pressable>\n  );\n}\n\nexport function TransformControlPanel({\n  flip,\n  rotate = 0,\n  onChange,\n  disabled = false,\n  testIDPrefix = TRANSFORM_TESTID_PREFIX,\n}: TransformControlPanelProps) {\n  const x = flip?.x ?? false;\n  const y = flip?.y ?? false;\n  const { style: activeStyle } = useThemeSlot('active');\n  return (\n    <ControlSection title=\"transform\">\n      <View style={styles.flipRow}>\n        <FlipToggle\n          label=\"X\"\n          icon=\"↔\"\n          on={x}\n          disabled={disabled}\n          onPress={() => onChange({ flip: { x: !x, y }, rotate })}\n          testID={flipTestId(testIDPrefix, 'x')}\n          accessibilityLabel=\"Flip horizontal\"\n        />\n        <FlipToggle\n          label=\"Y\"\n          icon=\"↕\"\n          on={y}\n          disabled={disabled}\n          onPress={() => onChange({ flip: { x, y: !y }, rotate })}\n          testID={flipTestId(testIDPrefix, 'y')}\n          accessibilityLabel=\"Flip vertical\"\n        />\n      </View>\n      <View style={styles.rotRow}>\n        {ROTATIONS.map((deg) => {\n          const on = rotate === deg;\n          return (\n            <Pressable\n              key={deg}\n              accessibilityRole=\"radio\"\n              accessibilityLabel={deg === 0 ? 'No rotation' : `Rotate ${deg} degrees`}\n              accessibilityState={{ selected: on, disabled }}\n              testID={rotateTestId(testIDPrefix, deg)}\n              disabled={disabled}\n              onPress={() => onChange({ flip: { x, y }, rotate: deg })}\n              style={[\n                styles.rot,\n                on && styles.on,\n                on && (activeStyle as StyleProp<ViewStyle>),\n                disabled && styles.disabled,\n              ]}\n            >\n              <Text style={styles.rotText}>{deg}°</Text>\n            </Pressable>\n          );\n        })}\n      </View>\n    </ControlSection>\n  );\n}\n\nconst styles = StyleSheet.create({\n  flipRow: { flexDirection: 'row', gap: 8 },\n  rotRow: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },\n  flip: {\n    flex: 1,\n    paddingVertical: 12,\n    backgroundColor: '#2a2a2a',\n    borderRadius: 6,\n    alignItems: 'center',\n    gap: 2,\n  },\n  rot: {\n    flexGrow: 1,\n    minWidth: 56,\n    paddingVertical: 10,\n    backgroundColor: '#2a2a2a',\n    borderRadius: 6,\n    alignItems: 'center',\n  },\n  on: { backgroundColor: '#4a8f3f' },\n  disabled: { opacity: 0.5 },\n  flipIcon: { color: '#fff', fontSize: 22, lineHeight: 26 },\n  flipLabel: { color: '#fff', fontWeight: '500', fontSize: 13 },\n  rotText: { color: '#fff', fontWeight: '600', fontSize: 13 },\n});\n"]}

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

@@ -0,0 +1,24 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+interface PresetTileProps {
+    readonly label: string;
+    /**
+     * Resolved thumbnail source. A `string` is a URL (web) or file:// URI (native
+     * preset-name lookup); a `number` is a Metro asset module id consumed directly
+     * by `<Image source={number}>`. Undefined renders the recessed button.
+     */
+    readonly uri: string | number | undefined;
+    readonly selected: boolean;
+    readonly disabled?: boolean | undefined;
+    readonly onPress: () => void;
+    /** Optional corner badge, e.g. "demo-owned". */
+    readonly badge?: string | undefined;
+    /** NativeWind class; resolved via the `./nativewind` interop registration. */
+    readonly className?: string | undefined;
+    /** RN style override; applied after the defaults. */
+    readonly style?: StyleProp<ViewStyle> | undefined;
+    /** Deterministic `accessibilityIdentifier` (`kld.preset.<id>`). */
+    readonly testID?: string | undefined;
+}
+export declare function PresetTile(props: PresetTileProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map