react-native-webrtc-kaleidoscope 2.0.0 → 2.1.0

package/src/components/theme/slots.ts

@@ -0,0 +1,37 @@
+// 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.
+
+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;
+};

package/src/components/ui/button.tsx

@@ -0,0 +1,54 @@
+// Button: a themed Pressable + label, used for the copy button and any control
+// action. Themes via the `button` slot, with the `disabled` state slot overlaid
+// at the container when disabled.
+
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { Pressable, StyleSheet, Text } from 'react-native';
+import { useThemeSlot } from '../theme/provider';
+
+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 function Button({ children, onPress, disabled = false, style, testID }: ButtonProps) {
+  const { style: themeStyle } = useThemeSlot('button');
+  const { style: disabledStyle } = useThemeSlot('disabled');
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ disabled }}
+      testID={testID}
+      onPress={onPress}
+      disabled={disabled}
+      style={[
+        styles.button,
+        themeStyle as StyleProp<ViewStyle>,
+        disabled && styles.disabled,
+        disabled && (disabledStyle as StyleProp<ViewStyle>),
+        style,
+      ]}
+    >
+      <Text style={styles.text}>{children}</Text>
+    </Pressable>
+  );
+}
+
+const styles = 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' },
+});

package/src/components/ui/color-picker.tsx

@@ -0,0 +1,74 @@
+// 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`.
+
+import RNSlider from '@react-native-community/slider';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { useField } from '../form/use-field';
+import { useThemeSlot } from '../theme/provider';
+import { Label } from './label';
+import { Readout } from './readout';
+import { SLIDER_TINTS, safeSliderValue } from './slider-value';
+
+const CH = ['R', 'G', 'B'] as const;
+const CH_KEY = ['r', 'g', 'b'] as const;
+
+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 function ColorPicker({ uniform, label, style }: ColorPickerProps) {
+  const field = useField(uniform);
+  const { style: themeStyle } = 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: number, v: number) => {
+    const next = [r, g, b];
+    next[i] = v;
+    field.onChange(next);
+  };
+  return (
+    <View testID={field.testID} style={[styles.row, themeStyle as StyleProp<ViewStyle>, style]}>
+      <View style={styles.labelWrap}>
+        <View style={[styles.swatch, { backgroundColor: swatch }]} />
+        <Label>{name}</Label>
+      </View>
+      {[r, g, b].map((v, i) => (
+        <View key={CH[i]} style={styles.chanLine}>
+          <Readout>{CH[i]}</Readout>
+          <RNSlider
+            style={styles.chanSlider}
+            testID={`${field.testID}.${CH_KEY[i]}`}
+            accessibilityLabel={`${name} ${CH[i]}`}
+            minimumValue={0}
+            maximumValue={1}
+            step={0.01}
+            value={safeSliderValue(v)}
+            disabled={field.disabled}
+            onValueChange={(nv) => setChannel(i, nv)}
+            {...SLIDER_TINTS}
+          />
+        </View>
+      ))}
+    </View>
+  );
+}
+
+const styles = 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 },
+});

package/src/components/ui/index.ts

@@ -0,0 +1,10 @@
+// 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`).
+
+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';

package/src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+// Label: a themed Text for a control's name. Reads the `label` theme slot's
+// style and merges it after the default; `className` is consumed by the
+// `./nativewind` cssInterop at the boundary and arrives folded into `style`.
+
+import type { ReactNode } from 'react';
+import type { StyleProp, TextStyle } from 'react-native';
+import { StyleSheet, Text } from 'react-native';
+import { useThemeSlot } from '../theme/provider';
+
+export type LabelProps = {
+  readonly children: ReactNode;
+  /** NativeWind class; resolved via the `./nativewind` interop. */
+  readonly className?: string;
+  readonly style?: StyleProp<TextStyle>;
+};
+
+export function Label({ children, style }: LabelProps) {
+  const { style: themeStyle } = useThemeSlot('label');
+  return <Text style={[styles.label, themeStyle as StyleProp<TextStyle>, style]}>{children}</Text>;
+}
+
+const styles = StyleSheet.create({
+  label: { color: '#ccc', fontSize: 12 },
+});

package/src/components/ui/point.tsx

@@ -0,0 +1,116 @@
+// 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).
+
+import RNSlider from '@react-native-community/slider';
+import { StyleSheet, View } from 'react-native';
+import { Readout } from './readout';
+import { SLIDER_TINTS, safeSliderValue } from './slider-value';
+
+const BOX = 56;
+
+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 function Point({
+  x,
+  y,
+  min,
+  max,
+  step = 0.01,
+  onChange,
+  label,
+  disabled,
+  testID,
+}: PointProps) {
+  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 (
+    <View style={styles.wrap}>
+      {label ? <Readout>{label}</Readout> : null}
+      <View style={styles.box}>
+        <View
+          style={[styles.dot, { left: `${xFrac * 100}%`, top: `${(1 - yFrac) * 100}%` }]}
+          pointerEvents="none"
+        />
+      </View>
+      <View style={styles.axis}>
+        <Readout>X</Readout>
+        <RNSlider
+          style={styles.slider}
+          testID={testID ? `${testID}.x` : undefined}
+          accessibilityLabel={label ? `${label} x` : 'x'}
+          minimumValue={min}
+          maximumValue={max}
+          step={step}
+          value={safeSliderValue(x)}
+          disabled={disabled}
+          onValueChange={(v) => onChange(v, y)}
+          {...SLIDER_TINTS}
+        />
+      </View>
+      <View style={styles.axis}>
+        <Readout>Y</Readout>
+        <RNSlider
+          style={styles.slider}
+          testID={testID ? `${testID}.y` : undefined}
+          accessibilityLabel={label ? `${label} y` : 'y'}
+          minimumValue={min}
+          maximumValue={max}
+          step={step}
+          value={safeSliderValue(y)}
+          disabled={disabled}
+          onValueChange={(v) => onChange(x, v)}
+          {...SLIDER_TINTS}
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: { alignItems: 'center', gap: 3, width: BOX + 44 },
+  box: {
+    width: BOX,
+    height: BOX,
+    borderWidth: 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 },
+});

package/src/components/ui/polygon-field.tsx

@@ -0,0 +1,84 @@
+// PolygonField: editor for a `kind: 'polygon'` uniform (a vec2 array, stored flat
+// as [x0,y0, x1,y1, ...]). It is COMPOSED OF POINTS: one <Point> editor per vertex,
+// laid out in a SPATIAL GRID rather than a flat row, so the editors sit where their
+// corners are. With the row-major corner convention (p0=TL, p1=TR, p2=BL, p3=BR), a
+// 2-column grid puts each editor in its quad position: top-left edits the top-left
+// corner. The grid is √-shaped (cols = ceil(√points)), so a 4-point polygon is 2x2.
+// Self-wires the flat array via `useField`; each Point writes back its (x, y) slice.
+
+import { StyleSheet, View } from 'react-native';
+import { useField } from '../form/use-field';
+import { Label } from './label';
+import { Point } from './point';
+
+/** Editing range for both axes; shaft anchors sit slightly off-screen (-0.2..1.2). */
+const RANGE_MIN = -0.2;
+const RANGE_MAX = 1.2;
+
+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 function PolygonField({ uniform, points, label }: PolygonFieldProps) {
+  const field = useField(uniform);
+  const flat = Array.isArray(field.value) ? field.value : [];
+  const name = label ?? uniform;
+
+  const setPoint = (p: number, x: number, y: number) => {
+    const next = flat.slice();
+    while (next.length < points * 2) next.push(0);
+    next[p * 2] = x;
+    next[p * 2 + 1] = y;
+    field.onChange(next);
+  };
+
+  // Spatial grid: cols = ceil(√points) (2 for a quad), filled row-major so vertex
+  // order maps to grid position. Array.from callbacks (not mutated for-counters)
+  // keep the per-Point onChange closures off the React Compiler's bail list.
+  const cols = Math.max(1, Math.ceil(Math.sqrt(points)));
+  const rowCount = Math.ceil(points / cols);
+
+  return (
+    <View style={styles.wrap}>
+      <Label>{name}</Label>
+      <View style={styles.grid}>
+        {Array.from({ length: rowCount }, (_, r) => (
+          <View
+            // biome-ignore lint/suspicious/noArrayIndexKey: grid rows are positional and fixed in count.
+            key={r}
+            style={styles.gridRow}
+          >
+            {Array.from({ length: cols }, (_, ci) => {
+              const p = r * cols + ci;
+              if (p >= points) return null;
+              return (
+                <Point
+                  key={p}
+                  x={flat[p * 2] ?? 0}
+                  y={flat[p * 2 + 1] ?? 0}
+                  min={RANGE_MIN}
+                  max={RANGE_MAX}
+                  label={`p${p}`}
+                  disabled={field.disabled}
+                  testID={`${field.testID}.${p}`}
+                  onChange={(x, y) => setPoint(p, x, y)}
+                />
+              );
+            })}
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: { gap: 4 },
+  grid: { gap: 8, alignSelf: 'flex-start' },
+  gridRow: { flexDirection: 'row', gap: 8 },
+});

package/src/components/ui/readout.tsx

@@ -0,0 +1,25 @@
+// Readout: a themed Text for a control's current value (distinct slot from the
+// label, and named `readout` to avoid colliding with a control's mutating value).
+
+import type { ReactNode } from 'react';
+import type { StyleProp, TextStyle } from 'react-native';
+import { StyleSheet, Text } from 'react-native';
+import { useThemeSlot } from '../theme/provider';
+
+export type ReadoutProps = {
+  readonly children: ReactNode;
+  /** NativeWind class; resolved via the `./nativewind` interop. */
+  readonly className?: string;
+  readonly style?: StyleProp<TextStyle>;
+};
+
+export function Readout({ children, style }: ReadoutProps) {
+  const { style: themeStyle } = useThemeSlot('readout');
+  return (
+    <Text style={[styles.readout, themeStyle as StyleProp<TextStyle>, style]}>{children}</Text>
+  );
+}
+
+const styles = StyleSheet.create({
+  readout: { color: '#8888ff', fontSize: 12, fontVariant: ['tabular-nums'] },
+});

package/src/components/ui/slider-value.ts

@@ -0,0 +1,15 @@
+// The web slider wrapper maps an exact 0 (and NaN/undefined) to `undefined`,
+// then crashes calling `.toFixed()` on it. A hair above zero is visually
+// identical and keeps the control alive; the real (possibly 0) value still
+// flows through onChange and the readout, so this is presentation-only.
+const SLIDER_EPSILON = 1e-4;
+
+export const safeSliderValue = (v: number): number =>
+  Number.isFinite(v) && v !== 0 ? v : SLIDER_EPSILON;
+
+/** Shared track/thumb tints so every slider in the kit reads the same. */
+export const SLIDER_TINTS = {
+  minimumTrackTintColor: '#8888ff',
+  maximumTrackTintColor: '#444',
+  thumbTintColor: '#eeeeff',
+} as const;

package/src/components/ui/slider.tsx

@@ -0,0 +1,98 @@
+// Slider: a self-wiring scalar field. Reads/writes its uniform via `useField`
+// (so the thumb tracks the drag synchronously; only the ControlForm's emit
+// debounces), and pairs the slider with a typed number input so you can drag OR
+// type/paste an exact value. Renders its own label, themes via the `slider` slot.
+
+import RNSlider from '@react-native-community/slider';
+import { useState } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, TextInput, View } from 'react-native';
+import { useField } from '../form/use-field';
+import { useThemeSlot } from '../theme/provider';
+import { Label } from './label';
+import { SLIDER_TINTS, safeSliderValue } from './slider-value';
+
+const fmt = (v: number) => (Number.isFinite(v) ? String(Math.round(v * 1000) / 1000) : '0');
+
+export type SliderProps = {
+  /** The uniform key this slider drives (a scalar). */
+  readonly uniform: string;
+  readonly min: number;
+  readonly max: number;
+  readonly step?: number;
+  /** 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 function Slider({ uniform, min, max, step = 0.01, label, style }: SliderProps) {
+  const field = useField(uniform);
+  const { style: themeStyle } = useThemeSlot('slider');
+  const value = typeof field.value === 'number' ? field.value : 0;
+  const name = label ?? uniform;
+
+  // The number input holds its own draft text so partial entries ("0.", "-") and
+  // pastes survive; the slider writes the draft too, so dragging keeps it in sync.
+  // A preset switch remounts the form, so the draft re-seeds from the new value.
+  const [draft, setDraft] = useState(() => fmt(value));
+
+  const fromSlider = (v: number) => {
+    setDraft(fmt(v));
+    field.onChange(v);
+  };
+  const fromText = (t: string) => {
+    setDraft(t);
+    const v = Number.parseFloat(t);
+    if (Number.isFinite(v)) field.onChange(Math.min(max, Math.max(min, v)));
+  };
+
+  return (
+    <View style={[styles.row, themeStyle as StyleProp<ViewStyle>, style]}>
+      <View style={styles.line}>
+        <Label>{name}</Label>
+        <TextInput
+          style={styles.num}
+          testID={field.testID ? `${field.testID}.num` : undefined}
+          accessibilityLabel={`${name} value`}
+          value={draft}
+          keyboardType="numeric"
+          editable={!field.disabled}
+          selectTextOnFocus
+          onChangeText={fromText}
+        />
+      </View>
+      <RNSlider
+        style={styles.slider}
+        testID={field.testID}
+        accessibilityLabel={name}
+        minimumValue={min}
+        maximumValue={max}
+        step={step}
+        value={safeSliderValue(value)}
+        disabled={field.disabled}
+        onValueChange={fromSlider}
+        {...SLIDER_TINTS}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { gap: 2 },
+  line: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
+  num: {
+    minWidth: 56,
+    color: '#8888ff',
+    fontSize: 12,
+    fontVariant: ['tabular-nums'],
+    textAlign: 'right',
+    paddingVertical: 0,
+    paddingHorizontal: 4,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: 'rgba(136,136,255,0.4)',
+    borderRadius: 3,
+  },
+  slider: { width: '100%', height: 32 },
+});

package/src/components/ui/switch.tsx

@@ -0,0 +1,40 @@
+// Switch: a self-wiring boolean field for `kind: 'switch'` uniforms (0/1). Reads
+// and writes its uniform via `useField`, the same contract as Slider/ColorPicker.
+
+import { Switch as RNSwitch, StyleSheet, View } from 'react-native';
+import { useField } from '../form/use-field';
+import { Label } from './label';
+
+export type SwitchProps = {
+  /** The uniform key this switch drives (0 = off, 1 = on). */
+  readonly uniform: string;
+  /** Display name; defaults to the uniform key. */
+  readonly label?: string;
+};
+
+export function Switch({ uniform, label }: SwitchProps) {
+  const field = useField(uniform);
+  const on = (typeof field.value === 'number' ? field.value : 0) > 0.5;
+  const name = label ?? uniform;
+  return (
+    <View style={styles.row}>
+      <Label>{name}</Label>
+      <RNSwitch
+        testID={field.testID}
+        accessibilityLabel={name}
+        value={on}
+        disabled={field.disabled}
+        onValueChange={(v) => field.onChange(v ? 1 : 0)}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 2,
+  },
+});