@proulr/sdui-components 0.1.69 → 0.1.71

package/assets/icons/chevron-up.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  Chevron up  weighty open angle with soft echo.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-width="1.6" d="M6.4 14.2L12 8.8l5.6 5.4" opacity="0.32" />
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-width="2.2" d="M5.4 14.8L12 8.2l6.6 6.6" />
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.69",
+  "version": "0.1.71",
   "type": "module",
   "main": "./src/renderer/index.ts",
   "types": "./src/renderer/index.ts",
@@ -47,7 +47,9 @@
     "expo-linear-gradient": ">=56",
     "react": ">=19",
     "react-native": ">=0.85",
+    "react-native-gesture-handler": ">=2.31",
     "react-native-google-mobile-ads": ">=16",
+    "react-native-reanimated": ">=4",
     "react-native-safe-area-context": ">=5",
     "react-native-svg": ">=15"
   },
@@ -64,9 +66,15 @@
     "expo-blur": {
       "optional": true
     },
+    "react-native-gesture-handler": {
+      "optional": true
+    },
     "react-native-google-mobile-ads": {
       "optional": true
     },
+    "react-native-reanimated": {
+      "optional": true
+    },
     "react-native-safe-area-context": {
       "optional": true
     },
@@ -87,7 +95,9 @@
     "lint-staged": "^16.4.0",
     "react": "19.2.3",
     "react-native": "0.85.3",
+    "react-native-gesture-handler": "~2.31.1",
     "react-native-google-mobile-ads": "^16.3.4",
+    "react-native-reanimated": "4.3.1",
     "react-native-safe-area-context": "~5.7.0",
     "react-native-svg": "^15.15.5",
     "typescript": "~6.0.3",

package/src/catalog/app-icon-names.ts

@@ -10,6 +10,7 @@ export const APP_ICON_NAMES = [
   'chat',
   'close',
   'chevron-down',
+  'chevron-up',
   'chevron-right',
   'flip-camera',
   'flash',

package/src/catalog/catalog.test.ts

@@ -41,7 +41,7 @@ describe('block-types', () => {
 
 describe('app-icon-names', () => {
   it('validates icon tokens', () => {
-    expect(APP_ICON_NAMES).toHaveLength(79);
+    expect(APP_ICON_NAMES).toHaveLength(80);
     expect(isAppIconName('search')).toBe(true);
     expect(isAppIconName('heart-filled')).toBe(true);
     expect(isAppIconName('tab-discover')).toBe(true);

package/src/renderer/blocks/SduiDiscoverBlocks.tsx

@@ -282,11 +282,11 @@ export function SduiChipBlock({ block, onAction }: SduiBlockRenderProps) {
   const active = readBooleanProp(block, 'active');
   const variant = readStringProp(block, 'variant') ?? 'default';
   const isHeader = variant === 'on_header';
-  const displayLabel = glyph ? `${glyph} ${label}` : label;
 
   return (
     <Chip
-      label={displayLabel}
+      label={label}
+      icon={glyph}
       active={active}
       disabled={!actionId}
       variant={isHeader ? 'onHeader' : 'default'}

package/src/renderer/ui/Chip.tsx

@@ -1,5 +1,6 @@
 import { Pressable, StyleSheet, Text } from 'react-native';
 import { colors, fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
+import { AppIcon, isAppIconName } from './app-icon';
 
 export function Chip({
   label,
@@ -7,12 +8,14 @@ export function Chip({
   onPress,
   variant = 'default',
   disabled,
+  icon,
 }: {
   label: string;
   active?: boolean;
   onPress?: () => void;
   variant?: 'default' | 'onHeader';
   disabled?: boolean;
+  icon?: string;
 }) {
   const isHeader = variant === 'onHeader';
 
@@ -32,12 +35,15 @@ export function Chip({
       ? colors.textOnAccent
       : m3Colors.onSurfaceVariant;
 
+  const iconName = icon && isAppIconName(icon) ? icon : null;
+
   return (
     <Pressable
       onPress={onPress}
       disabled={disabled}
       style={[styles.chip, isHeader && styles.chipOnHeader, containerStyle]}
     >
+      {iconName ? <AppIcon name={iconName} size={isHeader ? 14 : 15} color={textColor} /> : null}
       <Text
         style={{
           color: textColor,
@@ -53,6 +59,9 @@ export function Chip({
 
 const styles = StyleSheet.create({
   chip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
     paddingHorizontal: spacing.sm,
     paddingVertical: spacing.sm,
     borderRadius: m3Shape.cornerSmall,

package/src/renderer/ui/RangeSlider.tsx

@@ -0,0 +1,200 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { LayoutChangeEvent, StyleSheet, Text, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated';
+import { m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
+
+export type RangeSliderProps = {
+  min: number;
+  max: number;
+  step?: number;
+  value: [number, number];
+  onChange: (value: [number, number]) => void;
+  formatLabel?: (n: number) => string;
+};
+
+const THUMB_SIZE = 28;
+const TRACK_HEIGHT = 4;
+
+function clamp(value: number, lo: number, hi: number): number {
+  'worklet';
+  return Math.min(hi, Math.max(lo, value));
+}
+
+/**
+ * Generic double-thumb range slider (reanimated + gesture-handler).
+ * Fully theme-driven — no product logic. Emits stepped `[low, high]` values.
+ */
+export function RangeSlider({
+  min,
+  max,
+  step = 1,
+  value,
+  onChange,
+  formatLabel,
+}: RangeSliderProps) {
+  const [trackWidth, setTrackWidth] = useState(0);
+  const [labels, setLabels] = useState<[number, number]>(value);
+
+  const usable = Math.max(0, trackWidth - THUMB_SIZE);
+  const span = max - min || 1;
+
+  const lowX = useSharedValue(0);
+  const highX = useSharedValue(0);
+  const lowStart = useSharedValue(0);
+  const highStart = useSharedValue(0);
+
+  const valueToX = useCallback(
+    (v: number) => ((clampJs(v, min, max) - min) / span) * usable,
+    [min, max, span, usable],
+  );
+
+  // Sync thumbs when external value or track width changes.
+  useEffect(() => {
+    lowX.value = valueToX(value[0]);
+    highX.value = valueToX(value[1]);
+    setLabels(value);
+  }, [value, valueToX, lowX, highX]);
+
+  const emit = useCallback(
+    (low: number, high: number) => {
+      setLabels([low, high]);
+      onChange([low, high]);
+    },
+    [onChange],
+  );
+
+  const updateLabels = useCallback((low: number, high: number) => {
+    setLabels([low, high]);
+  }, []);
+
+  const lowGesture = Gesture.Pan()
+    .onBegin(() => {
+      lowStart.value = lowX.value;
+    })
+    .onUpdate((event) => {
+      const next = clamp(lowStart.value + event.translationX, 0, highX.value);
+      lowX.value = next;
+      runOnJS(updateLabels)(jsXToValue(next, min, max, span, step, usable), jsXToValue(highX.value, min, max, span, step, usable));
+    })
+    .onEnd(() => {
+      runOnJS(emit)(
+        jsXToValue(lowX.value, min, max, span, step, usable),
+        jsXToValue(highX.value, min, max, span, step, usable),
+      );
+    });
+
+  const highGesture = Gesture.Pan()
+    .onBegin(() => {
+      highStart.value = highX.value;
+    })
+    .onUpdate((event) => {
+      const next = clamp(highStart.value + event.translationX, lowX.value, usable);
+      highX.value = next;
+      runOnJS(updateLabels)(jsXToValue(lowX.value, min, max, span, step, usable), jsXToValue(next, min, max, span, step, usable));
+    })
+    .onEnd(() => {
+      runOnJS(emit)(
+        jsXToValue(lowX.value, min, max, span, step, usable),
+        jsXToValue(highX.value, min, max, span, step, usable),
+      );
+    });
+
+  const lowThumbStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: lowX.value }],
+  }));
+  const highThumbStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: highX.value }],
+  }));
+  const activeTrackStyle = useAnimatedStyle(() => ({
+    left: lowX.value + THUMB_SIZE / 2,
+    width: Math.max(0, highX.value - lowX.value),
+  }));
+
+  const onTrackLayout = useCallback((event: LayoutChangeEvent) => {
+    setTrackWidth(event.nativeEvent.layout.width);
+  }, []);
+
+  const format = formatLabel ?? ((n: number) => String(n));
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.labelsRow}>
+        <Text style={styles.label}>{format(labels[0])}</Text>
+        <Text style={styles.label}>{format(labels[1])}</Text>
+      </View>
+      <View style={styles.trackArea} onLayout={onTrackLayout}>
+        <View style={styles.trackBase} />
+        <Animated.View style={[styles.trackActive, activeTrackStyle]} />
+        <GestureDetector gesture={lowGesture}>
+          <Animated.View style={[styles.thumb, lowThumbStyle]} hitSlop={12} />
+        </GestureDetector>
+        <GestureDetector gesture={highGesture}>
+          <Animated.View style={[styles.thumb, highThumbStyle]} hitSlop={12} />
+        </GestureDetector>
+      </View>
+    </View>
+  );
+}
+
+function clampJs(value: number, lo: number, hi: number): number {
+  return Math.min(hi, Math.max(lo, value));
+}
+
+function jsXToValue(
+  x: number,
+  min: number,
+  max: number,
+  span: number,
+  step: number,
+  usable: number,
+): number {
+  const raw = min + (x / (usable || 1)) * span;
+  const stepped = Math.round(raw / step) * step;
+  return clampJs(stepped, min, max);
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: spacing.sm,
+    paddingVertical: spacing.xs,
+  },
+  labelsRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  label: {
+    color: m3Colors.onSurface,
+    fontFamily: m3Type.label.fontFamily,
+    fontSize: m3Type.label.fontSize,
+  },
+  trackArea: {
+    height: THUMB_SIZE,
+    justifyContent: 'center',
+  },
+  trackBase: {
+    height: TRACK_HEIGHT,
+    borderRadius: m3Shape.cornerFull,
+    backgroundColor: m3Colors.surfaceContainerHighest,
+  },
+  trackActive: {
+    position: 'absolute',
+    height: TRACK_HEIGHT,
+    borderRadius: m3Shape.cornerFull,
+    backgroundColor: m3Colors.primary,
+  },
+  thumb: {
+    position: 'absolute',
+    left: 0,
+    width: THUMB_SIZE,
+    height: THUMB_SIZE,
+    borderRadius: m3Shape.cornerFull,
+    backgroundColor: m3Colors.primary,
+    borderWidth: 3,
+    borderColor: m3Colors.onPrimary,
+  },
+});

package/src/renderer/ui/app-icon.test.ts

@@ -9,8 +9,8 @@ const ICONS_DIR = path.join(ROOT, 'assets', 'icons');
 const GENERATED_DIR = path.join(ROOT, 'src', 'renderer', 'ui', 'generated');
 
 describe('AppIcon SVG ↔ catalog 1:1', () => {
-  it('has exactly 79 AppIconName tokens', () => {
-    expect(APP_ICON_NAMES).toHaveLength(79);
+  it('has exactly 80 AppIconName tokens', () => {
+    expect(APP_ICON_NAMES).toHaveLength(80);
   });
 
   it('has one SVG file per AppIconName and no orphan SVGs', () => {

package/src/renderer/ui/generated/chevron-up.tsx

@@ -0,0 +1,16 @@
+/* Generated by scripts/generate-app-icons.mjs — do not edit. */
+import Svg, { Path } from 'react-native-svg';
+import { m3Colors } from '../../theme/proulr-theme';
+import type { AppIconGlyphProps } from '../app-icon-glyph-props';
+
+export function ChevronUpIcon({
+  color = m3Colors.primary,
+  size = 24,
+}: AppIconGlyphProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path stroke={color} strokeLinecap="round" strokeLinejoin="round" fill="none" strokeWidth={1.6} d="M6.4 14.2L12 8.8l5.6 5.4" opacity={0.32} />
+      <Path stroke={color} strokeLinecap="round" strokeLinejoin="round" fill="none" strokeWidth={2.2} d="M5.4 14.8L12 8.2l6.6 6.6" />
+    </Svg>
+  );
+}

package/src/renderer/ui/generated/index.ts

@@ -12,6 +12,7 @@ import { SendIcon } from './send';
 import { ChatIcon } from './chat';
 import { CloseIcon } from './close';
 import { ChevronDownIcon } from './chevron-down';
+import { ChevronUpIcon } from './chevron-up';
 import { ChevronRightIcon } from './chevron-right';
 import { FlipCameraIcon } from './flip-camera';
 import { FlashIcon } from './flash';
@@ -96,6 +97,7 @@ export const GENERATED_ICON_REGISTRY: Record<
   'chat': ChatIcon,
   'close': CloseIcon,
   'chevron-down': ChevronDownIcon,
+  'chevron-up': ChevronUpIcon,
   'chevron-right': ChevronRightIcon,
   'flip-camera': FlipCameraIcon,
   'flash': FlashIcon,
@@ -177,6 +179,7 @@ export { SendIcon } from './send';
 export { ChatIcon } from './chat';
 export { CloseIcon } from './close';
 export { ChevronDownIcon } from './chevron-down';
+export { ChevronUpIcon } from './chevron-up';
 export { ChevronRightIcon } from './chevron-right';
 export { FlipCameraIcon } from './flip-camera';
 export { FlashIcon } from './flash';

package/src/renderer/ui/index.ts

@@ -56,6 +56,7 @@ export { InfoBanner } from './InfoBanner';
 export { Label } from './Label';
 export { ListItem } from './ListItem';
 export { ProgressBar } from './ProgressBar';
+export { RangeSlider, type RangeSliderProps } from './RangeSlider';
 export { SectionHeader } from './SectionHeader';
 export { SelectRow, MultiSelectRow } from './SelectRow';
 export { StatRow } from './StatRow';

package/src/renderer/ui/primitives.ts

@@ -10,6 +10,7 @@ export { InfoBanner } from './InfoBanner';
 export { Label } from './Label';
 export { ListItem } from './ListItem';
 export { ProgressBar } from './ProgressBar';
+export { RangeSlider, type RangeSliderProps } from './RangeSlider';
 export { SectionHeader } from './SectionHeader';
 export { SelectRow, MultiSelectRow } from './SelectRow';
 export { StatRow } from './StatRow';