@buoy-gg/shared-ui 7.0.41 → 7.0.43

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

@@ -1,510 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Otto = Otto;
-exports.OttoMotionView = void 0;
-exports.OttoPixels = OttoPixels;
-exports.OttoStill = OttoStill;
-Object.defineProperty(exports, "WATER_FRAMES", {
-  enumerable: true,
-  get: function () {
-    return _ottoSheet.WATER_FRAMES;
-  }
-});
-exports.motionUnits = motionUnits;
-exports.useOttoAnchorMotion = useOttoAnchorMotion;
-exports.useOttoReel = useOttoReel;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _ottoEngine = require("./ottoEngine.js");
-var _ottoSheet = require("./ottoSheet.js");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * 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.
- */
-
-const IS_WEB = _reactNative.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.
- */
-function motionUnits(state, keyline = true) {
-  return lcm((0, _ottoSheet.ottoSheets)(state, keyline).period, ANCHOR_PERIOD);
-}
-
-// ---------------------------------------------------------------- pixels --
-
-/** Pure renderer: a frame → coloured run Views. Fine for stills; costly per tick. */
-function OttoPixels({
-  grid,
-  pixelSize,
-  style
-}) {
-  const side = _ottoEngine.OTTO_GRID * pixelSize;
-  const runs = (0, _ottoEngine.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__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.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. */
-function OttoStill({
-  state = "static",
-  pixelSize = 1,
-  water,
-  keyline,
-  style
-}) {
-  const grid = (0, _ottoEngine.renderOttoFrame)(state, 0, {
-    water,
-    keyline
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.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.
- */
-function useOttoReel(enabled, tickMs = 140, active = true) {
-  const [idx, setIdx] = (0, _react.useState)(0);
-  (0, _react.useEffect)(() => {
-    if (!enabled || !active) return;
-    const len = _ottoEngine.OTTO_REEL[idx % _ottoEngine.OTTO_REEL.length][1];
-    const id = setTimeout(() => setIdx(i => (i + 1) % _ottoEngine.OTTO_REEL.length), len * tickMs);
-    return () => clearTimeout(id);
-  }, [enabled, active, idx, tickMs]);
-  return _ottoEngine.OTTO_REEL[idx % _ottoEngine.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 = exports.OttoMotionView = IS_WEB ? _reactNative.View : _reactNative.Animated.View;
-/**
- * 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 = _reactNative.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 = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  (0, _react.useEffect)(() => {
-    if (IS_WEB) return;
-    value.setValue(0);
-    if (!active) return;
-    const loop = _reactNative.Animated.loop(_reactNative.Animated.timing(value, {
-      toValue: units,
-      duration: units * tickMs,
-      easing: _reactNative.Easing.linear,
-      useNativeDriver: _reactNative.Platform.OS !== "web",
-      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.
- */
-function useOttoAnchorMotion(state, pixelSize, tickMs = 140, active = true, keyline = true) {
-  const anchorFn = _ottoEngine.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).
- */
-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 = _ottoEngine.OTTO_GRID * pixelSize;
-  const [mounted, setMounted] = (0, _react.useState)(eager);
-  (0, _react.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    pointerEvents: "none",
-    style: [{
-      width: side,
-      height: side
-    }, style],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(OttoStillLayer, {
-      show: !mounted,
-      state: resolved,
-      pixelSize: pixelSize,
-      water: water,
-      keyline: keyline
-    }), /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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 = (0, _ottoSheet.ottoSheets)(state, keyline);
-  const side = _ottoEngine.OTTO_GRID * pixelSize;
-  const waterH = _ottoSheet.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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StripWindow, {
-      top: _ottoSheet.WATER_ROW0 * pixelSize,
-      width: side,
-      height: waterH,
-      strip: sheets.water,
-      px: pixelSize,
-      frameW: side,
-      motion: waterStyle,
-      visible: water
-    }), /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: {
-      position: "absolute",
-      left: 0,
-      top,
-      width,
-      height,
-      overflow: "hidden"
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(OttoMotionView, {
-      style: [{
-        width: stripW,
-        height
-      }, motion],
-      children: visible ? strip.frames.map((rects, i) => /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: rects.map((r, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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))
-  });
-}
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.Otto=Otto;exports.OttoMotionView=void 0;exports.OttoPixels=OttoPixels;exports.OttoStill=OttoStill;Object.defineProperty(exports,"WATER_FRAMES",{enumerable:true,get:function(){return _ottoSheet.WATER_FRAMES}});exports.motionUnits=motionUnits;exports.useOttoAnchorMotion=useOttoAnchorMotion;exports.useOttoReel=useOttoReel;var _react=require("react");var _reactNative=require("react-native");var _ottoEngine=require("./ottoEngine.js");var _ottoSheet=require("./ottoSheet.js");var _jsxRuntime=require("react/jsx-runtime");const IS_WEB=_reactNative.Platform.OS==="web";const ANCHOR_PERIOD=16;const WATER_UNITS_PER_STEP=2;function gcd(e,t){return t===0?e:gcd(t,e%t)}function lcm(e,t){return e*t/gcd(e,t)}function motionUnits(e,t=true){return lcm((0,_ottoSheet.ottoSheets)(e,t).period,ANCHOR_PERIOD)}function OttoPixels({grid:e,pixelSize:t,style:n}){const o=_ottoEngine.OTTO_GRID*t;const u=(0,_ottoEngine.ottoRuns)(e);const i=[];let a=-1;let l=0;for(const r of u){if(r.y!==a){a=r.y;l=0}i.push((0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:"absolute",left:r.x*t,top:r.y*t,width:r.w*t,height:t,backgroundColor:r.color}},`${r.y}:${l++}`))}return(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:[{width:o,height:o},n],children:i})}function OttoStill({state:e="static",pixelSize:t=1,water:n,keyline:o,style:u}){const i=(0,_ottoEngine.renderOttoFrame)(e,0,{water:n,keyline:o});return(0,_jsxRuntime.jsx)(OttoPixels,{grid:i,pixelSize:t,style:u})}function useOttoReel(e,t=140,n=true){const[o,u]=(0,_react.useState)(0);(0,_react.useEffect)(()=>{if(!e||!n)return;const i=_ottoEngine.OTTO_REEL[o%_ottoEngine.OTTO_REEL.length][1];const a=setTimeout(()=>u(l=>(l+1)%_ottoEngine.OTTO_REEL.length),i*t);return()=>clearTimeout(a)},[e,n,o,t]);return _ottoEngine.OTTO_REEL[o%_ottoEngine.OTTO_REEL.length][0]}const EPS=1e-4;const OttoMotionView=exports.OttoMotionView=IS_WEB?_reactNative.View:_reactNative.Animated.View;const webStyleCache=new Map;function webStepStyle(e,t,n,o,u,i){const a=`${n}/${t}/${o}/${e.map(s=>`${s.x},${s.y}`).join("|")}`;const l=webStyleCache.get(a);if(l)return l;const r=s=>`translateX(${s.x}px) translateY(${s.y}px)`;const f={};for(let s=0;s<u;s++){const d=s*t/n*100;f[`${d.toFixed(4)}%`]={transform:r(i(s))}}f["100%"]={transform:r(i(u-1))};const c=_reactNative.StyleSheet.create({motion:{animationKeyframes:[f],animationDuration:`${n*o}ms`,animationTimingFunction:"step-end",animationIterationCount:"infinite",animationFillMode:"both"}}).motion;webStyleCache.set(a,c);return c}function useOttoMotionClock(e,t,n,o){const u=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;(0,_react.useEffect)(()=>{if(IS_WEB)return;u.setValue(0);if(!n)return;const i=_reactNative.Animated.loop(_reactNative.Animated.timing(u,{toValue:e,duration:e*t,easing:_reactNative.Easing.linear,useNativeDriver:_reactNative.Platform.OS!=="web",isInteraction:false}),{resetBeforeIteration:true});i.start();return()=>i.stop()},[u,e,t,n,o]);return u}function stepStyle(e,t,n,o,u,i){const a=Math.max(1,Math.round(o/n));const l=s=>t[s%t.length]??{x:0,y:0};if(!i||t.length<=1){const s=l(0);return{transform:[{translateX:s.x},{translateY:s.y}]}}if(IS_WEB)return webStepStyle(t,n,o,u,a,l);const r=[];const f=[];const c=[];for(let s=0;s<a;s++){const d=l(s);r.push(s*n,(s+1)*n-EPS);f.push(d.x,d.x);c.push(d.y,d.y)}return{transform:[{translateX:e.interpolate({inputRange:r,outputRange:f,extrapolate:"clamp"})},{translateY:e.interpolate({inputRange:r,outputRange:c,extrapolate:"clamp"})}]}}function useOttoAnchorMotion(e,t,n=140,o=true,u=true){const i=_ottoEngine.OTTO_ANCHORS[e];const a=motionUnits(e,u);const l=useOttoMotionClock(a,n,o&&!!i,e);if(!i)return null;const r=i(0);const f=[];for(let c=0;c<ANCHOR_PERIOD;c++){const s=i(c);f.push({x:(s.x-r.x)*t,y:(s.y-r.y)*t})}return{style:stepStyle(l,f,1,a,n,o),over:r.over,origin:{x:r.x,y:r.y}}}function Otto({state:e,pixelSize:t=8,water:n=true,keyline:o=true,tickMs:u=140,active:i=true,eager:a=false,style:l}){const r=useOttoReel(e==="reel",u,i);const f=e==="reel"?r:e;const c=_ottoEngine.OTTO_GRID*t;const[s,d]=(0,_react.useState)(a);(0,_react.useEffect)(()=>{if(a||s)return;const h=globalThis.requestIdleCallback;const m=globalThis.cancelIdleCallback;if(h){const x=h(()=>d(true));return()=>m?.(x)}const p=setTimeout(()=>d(true),0);return()=>clearTimeout(p)},[a,s]);return(0,_jsxRuntime.jsxs)(_reactNative.View,{pointerEvents:"none",style:[{width:c,height:c},l],children:[(0,_jsxRuntime.jsx)(OttoStillLayer,{show:!s,state:f,pixelSize:t,water:n,keyline:o}),(0,_jsxRuntime.jsx)(OttoStrips,{show:s,state:f,pixelSize:t,water:n,keyline:o,tickMs:u,active:i})]})}function OttoStillLayer({show:e,state:t,pixelSize:n,water:o,keyline:u}){if(!e)return null;return(0,_jsxRuntime.jsx)(OttoStill,{state:t,pixelSize:n,water:o,keyline:u})}function OttoStrips({show:e,state:t,pixelSize:n,water:o,keyline:u,tickMs:i,active:a}){const l=(0,_ottoSheet.ottoSheets)(t,u);const r=_ottoEngine.OTTO_GRID*n;const f=_ottoSheet.WATER_ROWS*n;const c=lcm(l.period,ANCHOR_PERIOD);const s=useOttoMotionClock(c,i,a&&e,t);const d=stepStyle(s,stripOffsets(l.body,r),1,c,i,a);const h=stepStyle(s,stripOffsets(l.water,r),WATER_UNITS_PER_STEP,c,i,a);if(!e)return null;return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(StripWindow,{top:_ottoSheet.WATER_ROW0*n,width:r,height:f,strip:l.water,px:n,frameW:r,motion:h,visible:o}),(0,_jsxRuntime.jsx)(StripWindow,{top:0,width:r,height:r,strip:l.body,px:n,frameW:r,motion:d,visible:true})]})}function stripOffsets(e,t){return e.colOf.map(n=>({x:-n*t,y:0}))}function StripWindow({top:e,width:t,height:n,strip:o,px:u,frameW:i,motion:a,visible:l}){const r=o.frames.length*i;return(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:"absolute",left:0,top:e,width:t,height:n,overflow:"hidden"},children:(0,_jsxRuntime.jsx)(OttoMotionView,{style:[{width:r,height:n},a],children:l?o.frames.map((f,c)=>(0,_jsxRuntime.jsx)(FrameViews,{rects:f,px:u,offsetX:c*i},c)):null})})}function FrameViews({rects:e,px:t,offsetX:n}){return(0,_jsxRuntime.jsx)(_jsxRuntime.Fragment,{children:e.map((o,u)=>(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:"absolute",left:n+o.x*t,top:o.y*t,width:o.w*t,height:o.h*t,backgroundColor:o.color}},u))})}

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

@@ -1,60 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _ottoEngine = require("./ottoEngine.js");
-Object.keys(_ottoEngine).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ottoEngine[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ottoEngine[key];
-    }
-  });
-});
-var _ottoSheet = require("./ottoSheet.js");
-Object.keys(_ottoSheet).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ottoSheet[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ottoSheet[key];
-    }
-  });
-});
-var _OttoSprite = require("./OttoSprite.js");
-Object.keys(_OttoSprite).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _OttoSprite[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _OttoSprite[key];
-    }
-  });
-});
-var _ottoScenes = require("./ottoScenes.js");
-Object.keys(_ottoScenes).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ottoScenes[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ottoScenes[key];
-    }
-  });
-});
-var _OttoSceneView = require("./OttoSceneView.js");
-Object.keys(_OttoSceneView).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _OttoSceneView[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _OttoSceneView[key];
-    }
-  });
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});var _ottoEngine=require("./ottoEngine.js");Object.keys(_ottoEngine).forEach(function(e){if(e==="default"||e==="__esModule")return;if(e in exports&&exports[e]===_ottoEngine[e])return;Object.defineProperty(exports,e,{enumerable:true,get:function(){return _ottoEngine[e]}})});var _ottoSheet=require("./ottoSheet.js");Object.keys(_ottoSheet).forEach(function(e){if(e==="default"||e==="__esModule")return;if(e in exports&&exports[e]===_ottoSheet[e])return;Object.defineProperty(exports,e,{enumerable:true,get:function(){return _ottoSheet[e]}})});var _OttoSprite=require("./OttoSprite.js");Object.keys(_OttoSprite).forEach(function(e){if(e==="default"||e==="__esModule")return;if(e in exports&&exports[e]===_OttoSprite[e])return;Object.defineProperty(exports,e,{enumerable:true,get:function(){return _OttoSprite[e]}})});var _ottoScenes=require("./ottoScenes.js");Object.keys(_ottoScenes).forEach(function(e){if(e==="default"||e==="__esModule")return;if(e in exports&&exports[e]===_ottoScenes[e])return;Object.defineProperty(exports,e,{enumerable:true,get:function(){return _ottoScenes[e]}})});var _OttoSceneView=require("./OttoSceneView.js");Object.keys(_OttoSceneView).forEach(function(e){if(e==="default"||e==="__esModule")return;if(e in exports&&exports[e]===_OttoSceneView[e])return;Object.defineProperty(exports,e,{enumerable:true,get:function(){return _OttoSceneView[e]}})});