@buoy-gg/shared-ui 7.0.40 → 7.0.42

package/lib/module/ui/otto/OttoSprite.js

@@ -1,496 +1 @@
-"use strict";
-
-/**
- * Otto in React Native — core APIs only, so the same file runs in Expo, in a
- * bare RN CLI app, and on the web through react-native-web.
- *
- *   <Otto state="thinking" pixelSize={4} />   the shipping sprite
- *   <Otto state="reel" />                     plays the demo schedule
- *   <OttoStill pixelSize={1} />               frame 0, no clock (icons, stills)
- *   <OttoPixels grid={…} pixelSize={…} />     paint any frame as Views
- *   useOttoAnchorMotion(state, …)             move a prop in lock-step with
- *                                             Otto's hands (the tool scenes)
- *
- * How the shipping sprite works (winner of the buoy-optimize rounds, see
- * OTTO_PERF_PLAN.md): each layer of a state's animation is a STRIP of its
- * distinct frames, mounted once as static Views (merged rectangles), inside
- * an overflow-hidden window one frame wide. A clock slides the strip:
- *
- *   native  core `Animated` on the native driver — one looping linear timing
- *           mapped to strip offsets by a step interpolation
- *   web     CSS keyframes with `step-end` timing (react-native-web's
- *           `animationKeyframes` style), the zero-JS path in a browser
- *
- * Zero JS per tick on both, no React commits, and it keeps moving while the
- * JS thread is blocked — exactly when a "working" Otto is on screen. On the
- * iOS sim: 60 UI / 59 JS FPS at one sprite (the page's own floor) where the
- * old per-tick renderer dropped UI frames.
- *
- * ONE TIMEBASE. Body, water and any anchored prop derive from the same
- * `units` span (see `motionUnits`) at the same duration and start in the same
- * commit, so they can never drift out of phase with each other.
- */
-import { useEffect, useRef, useState } from "react";
-import { Animated, Easing, Platform, StyleSheet, View } from "react-native";
-import { OTTO_ANCHORS, OTTO_GRID, OTTO_REEL, ottoRuns, renderOttoFrame } from "./ottoEngine.js";
-import { WATER_FRAMES, WATER_ROW0, WATER_ROWS, ottoSheets } from "./ottoSheet.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const IS_WEB = Platform.OS === "web";
-
-/** Every anchor in the engine repeats within 16 ticks. */
-const ANCHOR_PERIOD = 16;
-/** The water wave holds each frame for 2 ticks. */
-const WATER_UNITS_PER_STEP = 2;
-function gcd(a, b) {
-  return b === 0 ? a : gcd(b, a % b);
-}
-function lcm(a, b) {
-  return a * b / gcd(a, b);
-}
-
-/**
- * The tick span every layer of a state loops over. It is a common multiple of
- * the body cycle and the anchor cycle, so a prop held in Otto's hand and the
- * hand itself repeat together.
- */
-export function motionUnits(state, keyline = true) {
-  return lcm(ottoSheets(state, keyline).period, ANCHOR_PERIOD);
-}
-
-// ---------------------------------------------------------------- pixels --
-
-/** Pure renderer: a frame → coloured run Views. Fine for stills; costly per tick. */
-export function OttoPixels({
-  grid,
-  pixelSize,
-  style
-}) {
-  const side = OTTO_GRID * pixelSize;
-  const runs = ottoRuns(grid);
-  const spans = [];
-  let rowY = -1;
-  let rowIndex = 0;
-  for (const r of runs) {
-    if (r.y !== rowY) {
-      rowY = r.y;
-      rowIndex = 0;
-    }
-    spans.push(/*#__PURE__*/_jsx(View, {
-      style: {
-        position: "absolute",
-        left: r.x * pixelSize,
-        top: r.y * pixelSize,
-        width: r.w * pixelSize,
-        height: pixelSize,
-        backgroundColor: r.color
-      }
-    }, `${r.y}:${rowIndex++}`));
-  }
-  return /*#__PURE__*/_jsx(View, {
-    pointerEvents: "none",
-    style: [{
-      width: side,
-      height: side
-    }, style],
-    children: spans
-  });
-}
-
-// ---------------------------------------------------------------- still ---
-
-/** Frame 0 of a state, no clock — safe on screens that must not re-render. */
-export function OttoStill({
-  state = "static",
-  pixelSize = 1,
-  water,
-  keyline,
-  style
-}) {
-  const grid = renderOttoFrame(state, 0, {
-    water,
-    keyline
-  });
-  return /*#__PURE__*/_jsx(OttoPixels, {
-    grid: grid,
-    pixelSize: pixelSize,
-    style: style
-  });
-}
-
-// ---------------------------------------------------------------- reel ----
-
-/**
- * Walks the demo reel: which state plays now. One React state change per
- * schedule entry (every few seconds), nothing per tick.
- */
-export function useOttoReel(enabled, tickMs = 140, active = true) {
-  const [idx, setIdx] = useState(0);
-  useEffect(() => {
-    if (!enabled || !active) return;
-    const len = OTTO_REEL[idx % OTTO_REEL.length][1];
-    const id = setTimeout(() => setIdx(i => (i + 1) % OTTO_REEL.length), len * tickMs);
-    return () => clearTimeout(id);
-  }, [enabled, active, idx, tickMs]);
-  return OTTO_REEL[idx % OTTO_REEL.length][0];
-}
-
-// ---------------------------------------------------------------- clock ---
-
-/** A style that moves a view through offsets in lock-step with Otto's clock. */
-
-const EPS = 0.0001;
-
-/**
- * The layer the clock moves.
- *
- * On native this has to be an `Animated.View` — it carries interpolated
- * values. On web the motion is a COMPILED CSS class (see `webStepStyle`), and
- * `Animated.View` flattens its style prop into a fresh object, which loses the
- * identity react-native-web looks the compiled rules up by; the keyframes are
- * then silently dropped and the sprite sits on frame 0. So the web path takes
- * a plain View, which passes the class straight through.
- */
-const OttoMotionView = IS_WEB ? View : Animated.View;
-export { OttoMotionView };
-
-/**
- * Web keyframes, compiled once per motion pattern.
- *
- * react-native-web only turns `animationKeyframes` into real `@keyframes`
- * rules through `StyleSheet.create` — its inline-style path drops the prop
- * without a warning. Patterns repeat heavily across a page of sprites (every
- * Otto shares one water wave, every state of a group shares body cycles), so
- * the cache keeps the sheet small and the render cheap.
- */
-const webStyleCache = new Map();
-function webStepStyle(offsets, unitsPerStep, units, tickMs, steps, at) {
-  const key = `${units}/${unitsPerStep}/${tickMs}/${offsets.map(o => `${o.x},${o.y}`).join("|")}`;
-  const cached = webStyleCache.get(key);
-  if (cached) return cached;
-
-  // Keyframe blocks skip react-native-web's style preprocessor, so the value
-  // has to be CSS already — an RN transform ARRAY compiles to an empty block.
-  const css = o => `translateX(${o.x}px) translateY(${o.y}px)`;
-  const keyframes = {};
-  for (let k = 0; k < steps; k++) {
-    const pct = k * unitsPerStep / units * 100;
-    keyframes[`${pct.toFixed(4)}%`] = {
-      transform: css(at(k))
-    };
-  }
-  keyframes["100%"] = {
-    transform: css(at(steps - 1))
-  };
-
-  // react-native-web's CSS-animation style props (not part of RN's ViewStyle).
-  const style = StyleSheet.create({
-    motion: {
-      animationKeyframes: [keyframes],
-      animationDuration: `${units * tickMs}ms`,
-      animationTimingFunction: "step-end",
-      animationIterationCount: "infinite",
-      animationFillMode: "both"
-    }
-  }).motion;
-  webStyleCache.set(key, style);
-  return style;
-}
-
-/**
- * Otto's timebase: a clock that runs `units` ticks and loops.
- *
- *   native → one `Animated.Value` on the native driver (zero JS per tick)
- *   web    → nothing to drive; CSS keyframes carry the motion (zero JS at all)
- *
- * Every consumer of the SAME state builds the same `units` and duration and
- * starts in the same commit, which is what keeps layers in phase.
- */
-function useOttoMotionClock(units, tickMs, active, restartKey) {
-  const value = useRef(new Animated.Value(0)).current;
-  useEffect(() => {
-    if (IS_WEB) return;
-    value.setValue(0);
-    if (!active) return;
-    const loop = Animated.loop(Animated.timing(value, {
-      toValue: units,
-      duration: units * tickMs,
-      easing: Easing.linear,
-      useNativeDriver: true,
-      isInteraction: false
-    }), {
-      resetBeforeIteration: true
-    });
-    loop.start();
-    return () => loop.stop();
-  }, [value, units, tickMs, active, restartKey]);
-  return value;
-}
-
-/**
- * Turn a repeating offset pattern into a style on that clock. `offsets[k]` is
- * where the view sits during tick `k·unitsPerStep`; the pattern repeats until
- * `units` is filled, so patterns of different lengths share one timebase.
- */
-function stepStyle(value, offsets, unitsPerStep, units, tickMs, active) {
-  const steps = Math.max(1, Math.round(units / unitsPerStep));
-  const at = k => offsets[k % offsets.length] ?? {
-    x: 0,
-    y: 0
-  };
-  if (!active || offsets.length <= 1) {
-    const o = at(0);
-    return {
-      transform: [{
-        translateX: o.x
-      }, {
-        translateY: o.y
-      }]
-    };
-  }
-  if (IS_WEB) return webStepStyle(offsets, unitsPerStep, units, tickMs, steps, at);
-  const inputRange = [];
-  const xs = [];
-  const ys = [];
-  for (let k = 0; k < steps; k++) {
-    const o = at(k);
-    inputRange.push(k * unitsPerStep, (k + 1) * unitsPerStep - EPS);
-    xs.push(o.x, o.x);
-    ys.push(o.y, o.y);
-  }
-  return {
-    transform: [{
-      translateX: value.interpolate({
-        inputRange,
-        outputRange: xs,
-        extrapolate: "clamp"
-      })
-    }, {
-      translateY: value.interpolate({
-        inputRange,
-        outputRange: ys,
-        extrapolate: "clamp"
-      })
-    }]
-  };
-}
-/**
- * Move a prop in lock-step with Otto's hands. `OTTO_ANCHORS[state]` publishes
- * where the hand is each tick; this turns that into the same kind of clocked
- * style the sprite itself uses, on the same timebase, so the two can't drift.
- *
- * Returns `null` for a state that has no anchor.
- */
-export function useOttoAnchorMotion(state, pixelSize, tickMs = 140, active = true, keyline = true) {
-  const anchorFn = OTTO_ANCHORS[state];
-  const units = motionUnits(state, keyline);
-  const value = useOttoMotionClock(units, tickMs, active && !!anchorFn, state);
-  if (!anchorFn) return null;
-  const first = anchorFn(0);
-  const offsets = [];
-  for (let t = 0; t < ANCHOR_PERIOD; t++) {
-    const a = anchorFn(t);
-    offsets.push({
-      x: (a.x - first.x) * pixelSize,
-      y: (a.y - first.y) * pixelSize
-    });
-  }
-  return {
-    style: stepStyle(value, offsets, 1, units, tickMs, active),
-    over: first.over,
-    origin: {
-      x: first.x,
-      y: first.y
-    }
-  };
-}
-
-// ---------------------------------------------------------------- otto ----
-
-/**
- * The shipping sprite.
- *
- * Mounting is deferred on purpose. The strips are ~500 static Views for a
- * typical state, and creating those is native COMMIT cost: measured at 128 ms
- * for one sprite, against 28 ms for a still. A mascot almost always appears
- * while something else is animating (a panel opening, a list settling), and
- * 128 ms of commit dropped into that is a visible hitch.
- *
- * So the first commit paints `OttoStill` — frame 0, ~36 Views, the exact
- * pixels the animation starts on — and the strips mount once the interaction
- * has settled (an idle callback). Nothing pops, because the still IS frame 0.
- * Pass `eager` when the sprite is the thing the user is waiting for.
- *
- * The two layers are siblings that each gate themselves with `return null`
- * rather than a ternary swap, so this component's child slots never change
- * shape (Fabric view-index safety).
- */
-export function Otto({
-  state,
-  pixelSize = 8,
-  water = true,
-  keyline = true,
-  tickMs = 140,
-  active = true,
-  eager = false,
-  style
-}) {
-  const reelState = useOttoReel(state === "reel", tickMs, active);
-  const resolved = state === "reel" ? reelState : state;
-  const side = OTTO_GRID * pixelSize;
-  const [mounted, setMounted] = useState(eager);
-  useEffect(() => {
-    if (eager || mounted) return;
-    // requestIdleCallback, not InteractionManager: RN 0.85 deprecates the
-    // latter and warns on every use, and this runs in every host we support.
-    // The setTimeout fallback covers runtimes without the idle callback.
-    const idle = globalThis.requestIdleCallback;
-    const cancelIdle = globalThis.cancelIdleCallback;
-    if (idle) {
-      const handle = idle(() => setMounted(true));
-      return () => cancelIdle?.(handle);
-    }
-    const timer = setTimeout(() => setMounted(true), 0);
-    return () => clearTimeout(timer);
-  }, [eager, mounted]);
-  return /*#__PURE__*/_jsxs(View, {
-    pointerEvents: "none",
-    style: [{
-      width: side,
-      height: side
-    }, style],
-    children: [/*#__PURE__*/_jsx(OttoStillLayer, {
-      show: !mounted,
-      state: resolved,
-      pixelSize: pixelSize,
-      water: water,
-      keyline: keyline
-    }), /*#__PURE__*/_jsx(OttoStrips, {
-      show: mounted,
-      state: resolved,
-      pixelSize: pixelSize,
-      water: water,
-      keyline: keyline,
-      tickMs: tickMs,
-      active: active
-    })]
-  });
-}
-
-/** Frame 0 while the strips are still coming. */
-function OttoStillLayer({
-  show,
-  state,
-  pixelSize,
-  water,
-  keyline
-}) {
-  if (!show) return null;
-  return /*#__PURE__*/_jsx(OttoStill, {
-    state: state,
-    pixelSize: pixelSize,
-    water: water,
-    keyline: keyline
-  });
-}
-
-/** The animated strips and their clock. */
-function OttoStrips({
-  show,
-  state,
-  pixelSize,
-  water,
-  keyline,
-  tickMs,
-  active
-}) {
-  const sheets = ottoSheets(state, keyline);
-  const side = OTTO_GRID * pixelSize;
-  const waterH = WATER_ROWS * pixelSize;
-  const units = lcm(sheets.period, ANCHOR_PERIOD);
-  const value = useOttoMotionClock(units, tickMs, active && show, state);
-  const bodyStyle = stepStyle(value, stripOffsets(sheets.body, side), 1, units, tickMs, active);
-  const waterStyle = stepStyle(value, stripOffsets(sheets.water, side), WATER_UNITS_PER_STEP, units, tickMs, active);
-  if (!show) return null;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(StripWindow, {
-      top: WATER_ROW0 * pixelSize,
-      width: side,
-      height: waterH,
-      strip: sheets.water,
-      px: pixelSize,
-      frameW: side,
-      motion: waterStyle,
-      visible: water
-    }), /*#__PURE__*/_jsx(StripWindow, {
-      top: 0,
-      width: side,
-      height: side,
-      strip: sheets.body,
-      px: pixelSize,
-      frameW: side,
-      motion: bodyStyle,
-      visible: true
-    })]
-  });
-}
-function stripOffsets(strip, frameW) {
-  return strip.colOf.map(c => ({
-    x: -c * frameW,
-    y: 0
-  }));
-}
-/** Pure UI: an overflow-hidden window over a strip of frames. */
-function StripWindow({
-  top,
-  width,
-  height,
-  strip,
-  px,
-  frameW,
-  motion,
-  visible
-}) {
-  const stripW = strip.frames.length * frameW;
-  return /*#__PURE__*/_jsx(View, {
-    style: {
-      position: "absolute",
-      left: 0,
-      top,
-      width,
-      height,
-      overflow: "hidden"
-    },
-    children: /*#__PURE__*/_jsx(OttoMotionView, {
-      style: [{
-        width: stripW,
-        height
-      }, motion],
-      children: visible ? strip.frames.map((rects, i) => /*#__PURE__*/_jsx(FrameViews, {
-        rects: rects,
-        px: px,
-        offsetX: i * frameW
-      }, i)) : null
-    })
-  });
-}
-
-/** One frame as absolutely positioned rectangle Views. Static after mount. */
-function FrameViews({
-  rects,
-  px,
-  offsetX
-}) {
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: rects.map((r, i) => /*#__PURE__*/_jsx(View, {
-      style: {
-        position: "absolute",
-        left: offsetX + r.x * px,
-        top: r.y * px,
-        width: r.w * px,
-        height: r.h * px,
-        backgroundColor: r.color
-      }
-    }, i))
-  });
-}
-export { WATER_FRAMES };
+"use strict";import{useEffect as x,useRef as N,useState as E}from"react";import{Animated as w,Easing as X,Platform as b,StyleSheet as Y,View as d}from"react-native";import{OTTO_ANCHORS as H,OTTO_GRID as g,OTTO_REEL as p,ottoRuns as M,renderOttoFrame as B}from"./ottoEngine.js";import{WATER_FRAMES as L,WATER_ROW0 as P,WATER_ROWS as U,ottoSheets as _}from"./ottoSheet.js";import{jsx as m,jsxs as S,Fragment as I}from"react/jsx-runtime";const O=b.OS==="web";const R=16;const q=2;function $(e,t){return t===0?e:$(t,e%t)}function W(e,t){return e*t/$(e,t)}export function motionUnits(e,t=true){return W(_(e,t).period,R)}export function OttoPixels({grid:e,pixelSize:t,style:n}){const o=g*t;const l=M(e);const i=[];let u=-1;let a=0;for(const r of l){if(r.y!==u){u=r.y;a=0}i.push(m(d,{style:{position:"absolute",left:r.x*t,top:r.y*t,width:r.w*t,height:t,backgroundColor:r.color}},`${r.y}:${a++}`))}return m(d,{pointerEvents:"none",style:[{width:o,height:o},n],children:i})}export function OttoStill({state:e="static",pixelSize:t=1,water:n,keyline:o,style:l}){const i=B(e,0,{water:n,keyline:o});return m(OttoPixels,{grid:i,pixelSize:t,style:l})}export function useOttoReel(e,t=140,n=true){const[o,l]=E(0);x(()=>{if(!e||!n)return;const i=p[o%p.length][1];const u=setTimeout(()=>l(a=>(a+1)%p.length),i*t);return()=>clearTimeout(u)},[e,n,o,t]);return p[o%p.length][0]}const G=1e-4;const A=O?d:w.View;export{A as OttoMotionView};const C=new Map;function K(e,t,n,o,l,i){const u=`${n}/${t}/${o}/${e.map(s=>`${s.x},${s.y}`).join("|")}`;const a=C.get(u);if(a)return a;const r=s=>`translateX(${s.x}px) translateY(${s.y}px)`;const f={};for(let s=0;s<l;s++){const h=s*t/n*100;f[`${h.toFixed(4)}%`]={transform:r(i(s))}}f["100%"]={transform:r(i(l-1))};const c=Y.create({motion:{animationKeyframes:[f],animationDuration:`${n*o}ms`,animationTimingFunction:"step-end",animationIterationCount:"infinite",animationFillMode:"both"}}).motion;C.set(u,c);return c}function F(e,t,n,o){const l=N(new w.Value(0)).current;x(()=>{if(O)return;l.setValue(0);if(!n)return;const i=w.loop(w.timing(l,{toValue:e,duration:e*t,easing:X.linear,useNativeDriver:b.OS!=="web",isInteraction:false}),{resetBeforeIteration:true});i.start();return()=>i.stop()},[l,e,t,n,o]);return l}function T(e,t,n,o,l,i){const u=Math.max(1,Math.round(o/n));const a=s=>t[s%t.length]??{x:0,y:0};if(!i||t.length<=1){const s=a(0);return{transform:[{translateX:s.x},{translateY:s.y}]}}if(O)return K(t,n,o,l,u,a);const r=[];const f=[];const c=[];for(let s=0;s<u;s++){const h=a(s);r.push(s*n,(s+1)*n-G);f.push(h.x,h.x);c.push(h.y,h.y)}return{transform:[{translateX:e.interpolate({inputRange:r,outputRange:f,extrapolate:"clamp"})},{translateY:e.interpolate({inputRange:r,outputRange:c,extrapolate:"clamp"})}]}}export function useOttoAnchorMotion(e,t,n=140,o=true,l=true){const i=H[e];const u=motionUnits(e,l);const a=F(u,n,o&&!!i,e);if(!i)return null;const r=i(0);const f=[];for(let c=0;c<R;c++){const s=i(c);f.push({x:(s.x-r.x)*t,y:(s.y-r.y)*t})}return{style:T(a,f,1,u,n,o),over:r.over,origin:{x:r.x,y:r.y}}}export function Otto({state:e,pixelSize:t=8,water:n=true,keyline:o=true,tickMs:l=140,active:i=true,eager:u=false,style:a}){const r=useOttoReel(e==="reel",l,i);const f=e==="reel"?r:e;const c=g*t;const[s,h]=E(u);x(()=>{if(u||s)return;const y=globalThis.requestIdleCallback;const j=globalThis.cancelIdleCallback;if(y){const D=y(()=>h(true));return()=>j?.(D)}const k=setTimeout(()=>h(true),0);return()=>clearTimeout(k)},[u,s]);return S(d,{pointerEvents:"none",style:[{width:c,height:c},a],children:[m(J,{show:!s,state:f,pixelSize:t,water:n,keyline:o}),m(Q,{show:s,state:f,pixelSize:t,water:n,keyline:o,tickMs:l,active:i})]})}function J({show:e,state:t,pixelSize:n,water:o,keyline:l}){if(!e)return null;return m(OttoStill,{state:t,pixelSize:n,water:o,keyline:l})}function Q({show:e,state:t,pixelSize:n,water:o,keyline:l,tickMs:i,active:u}){const a=_(t,l);const r=g*n;const f=U*n;const c=W(a.period,R);const s=F(c,i,u&&e,t);const h=T(s,v(a.body,r),1,c,i,u);const y=T(s,v(a.water,r),q,c,i,u);if(!e)return null;return S(I,{children:[m(V,{top:P*n,width:r,height:f,strip:a.water,px:n,frameW:r,motion:y,visible:o}),m(V,{top:0,width:r,height:r,strip:a.body,px:n,frameW:r,motion:h,visible:true})]})}function v(e,t){return e.colOf.map(n=>({x:-n*t,y:0}))}function V({top:e,width:t,height:n,strip:o,px:l,frameW:i,motion:u,visible:a}){const r=o.frames.length*i;return m(d,{style:{position:"absolute",left:0,top:e,width:t,height:n,overflow:"hidden"},children:m(A,{style:[{width:r,height:n},u],children:a?o.frames.map((f,c)=>m(Z,{rects:f,px:l,offsetX:c*i},c)):null})})}function Z({rects:e,px:t,offsetX:n}){return m(I,{children:e.map((o,l)=>m(d,{style:{position:"absolute",left:n+o.x*t,top:o.y*t,width:o.w*t,height:o.h*t,backgroundColor:o.color}},l))})}export{L as WATER_FRAMES};

package/lib/module/ui/otto/index.js

@@ -1,22 +1 @@
-"use strict";
-
-/**
- * Otto — the Buoy mascot, as a shared UI primitive.
- *
- * One 16×16 pixel character with a state per product moment. `OTTO_USES` says
- * what each state is for; place him only where the alternative is nothing
- * (empty bodies, waiting states) and only in states that are actually true.
- * See OTTO_PLACEMENT_PLAN.md.
- *
- * The renderer is core-RN only (no Reanimated, no expo-image), so it runs in
- * Expo, in a bare RN CLI host, and on react-native-web. See OTTO_PERF_PLAN.md
- * for the measurements behind that.
- *
- * This is the ONE copy. The example app's review page and the website's lab
- * re-export from here rather than keeping forks.
- */
-export * from "./ottoEngine.js";
-export * from "./ottoSheet.js";
-export * from "./OttoSprite.js";
-export * from "./ottoScenes.js";
-export * from "./OttoSceneView.js";
+"use strict";export*from"./ottoEngine.js";export*from"./ottoSheet.js";export*from"./OttoSprite.js";export*from"./ottoScenes.js";export*from"./OttoSceneView.js";