@proulr/sdui-components 0.1.87 → 0.1.88

package/README.md

@@ -2,6 +2,8 @@
 
 Lib de UI completa do Proulr: identidade Night Stalker OLED + componentes BDC + renderer RN.
 
+Design system consolidado (tokens, movimento, estados, checklist): [`docs/DESIGN.md`](docs/DESIGN.md).
+
 ## Exports
 
 | Export | Consumidor | Uso |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.87",
+  "version": "0.1.88",
   "type": "module",
   "main": "./src/renderer/index.ts",
   "types": "./src/renderer/index.ts",
@@ -39,7 +39,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@proulr/sdui-contract": "^0.1.16",
+    "@proulr/sdui-contract": "^0.1.17",
     "react-native-qrcode-svg": "^6.3.21"
   },
   "peerDependencies": {

package/src/renderer/ui/Skeleton.tsx

@@ -9,19 +9,28 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
+import { useReduceMotion } from './use-reduce-motion';
 
 const PULSE_DURATION_MS = 900;
 const PULSE_MIN_OPACITY = 0.45;
+const PULSE_STATIC_OPACITY = 0.7;
 
 /**
  * Pulso de opacidade compartilhado por cada bloco de skeleton. Respeita o
- * "reduzir movimento" do sistema (fica estatico). Como `react-native-reanimated`
- * ja e usado nos primitivos do pacote (ex.: RangeSlider), importamos direto.
+ * "reduzir movimento" do sistema: o loop infinito é desligado por completo
+ * (com `ReduceMotion.System` puro, o `withRepeat` alternaria 0↠1 a cada
+ * frame, virando strobe). Como `react-native-reanimated` ja e usado nos
+ * primitivos do pacote (ex.: RangeSlider), importamos direto.
  */
 function usePulseStyle() {
-  const progress = useSharedValue(PULSE_MIN_OPACITY);
+  const reducedMotion = useReduceMotion();
+  const progress = useSharedValue(reducedMotion ? PULSE_STATIC_OPACITY : PULSE_MIN_OPACITY);
 
   useEffect(() => {
+    if (reducedMotion) {
+      progress.value = PULSE_STATIC_OPACITY;
+      return;
+    }
     progress.value = withRepeat(
       withTiming(1, {
         duration: PULSE_DURATION_MS,
@@ -31,7 +40,7 @@ function usePulseStyle() {
       -1,
       true,
     );
-  }, [progress]);
+  }, [progress, reducedMotion]);
 
   return useAnimatedStyle(() => ({ opacity: progress.value }));
 }

package/src/renderer/ui/index.ts

@@ -89,3 +89,4 @@ export { StoryComposeHeader } from './story-compose-header';
 export { StoryCreateShortcutRow, type StoryCreateShortcutItem } from './story-create-shortcut-row';
 export { StoryEditorChrome, type StoryEditorTool } from './story-editor-chrome';
 export { StorySurfacePicker, type StorySurfaceOption } from './story-surface-picker';
+export { useReduceMotion } from './use-reduce-motion';

package/src/renderer/ui/use-reduce-motion.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+import { AccessibilityInfo, Platform } from 'react-native';
+
+/** Fonte única do "Reduzir movimento" — web lê `prefers-reduced-motion` via matchMedia, nativo via AccessibilityInfo. */
+export function useReduceMotion(): boolean {
+  const [reduced, setReduced] = useState(false);
+
+  useEffect(() => {
+    if (Platform.OS === 'web') {
+      if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return;
+      const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+      setReduced(query.matches);
+      const onChange = (event: MediaQueryListEvent) => setReduced(event.matches);
+      query.addEventListener('change', onChange);
+      return () => query.removeEventListener('change', onChange);
+    }
+    let active = true;
+    AccessibilityInfo.isReduceMotionEnabled().then((value) => {
+      if (active) setReduced(value);
+    });
+    const subscription = AccessibilityInfo.addEventListener('reduceMotionChanged', (value) => {
+      if (active) setReduced(value);
+    });
+    return () => {
+      active = false;
+      subscription?.remove?.();
+    };
+  }, []);
+
+  return reduced;
+}