@limrun/ui 0.16.0 → 0.17.0-rc.1

package/dist/components/duo-button-hinge.d.ts

@@ -0,0 +1,16 @@
+type Fold = {
+    from: number;
+    target: number;
+    startedAt: number;
+};
+/** Drive button folds through the slider's native angle queue. */
+export declare function useDuoButtonHinge(nativeAngle: number, send: (angle: number) => Promise<void>, failed: (error: string | undefined) => void): {
+    motion: import('react').RefObject<Fold | undefined>;
+    target: number | undefined;
+    fold: () => void;
+    cancelFold: () => void;
+    changeAngle: (value: number) => void;
+    angle: number;
+    interacting: import('react').RefObject<boolean>;
+};
+export {};

package/dist/components/duo-controls.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { DuoButton } from '../core/duo';
+export declare function useDuoHinge(nativeAngle: number, send: (angle: number) => Promise<void>, failed: (error: string | undefined) => void): {
+    angle: number;
+    changeAngle: (value: number) => void;
+    interacting: React.RefObject<boolean>;
+};
+/** Both renderers use the same native fold and rotation controls. */
+export declare function DuoControls({ angle, changeAngle, interacting, rotate, onFold, foldTarget, onHingeDrag, children, }: {
+    angle: number;
+    changeAngle: (value: number) => void;
+    interacting: React.MutableRefObject<boolean>;
+    rotate: () => void;
+    onFold?: () => void;
+    foldTarget?: number;
+    onHingeDrag?: () => void;
+    children?: React.ReactNode;
+}): React.JSX.Element;
+export declare function DuoHardwareIcon({ button }: {
+    button: DuoButton;
+}): React.JSX.Element;

package/dist/components/duo-flat-frame.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+/** Static silver rails and glass seals follow the same front silhouette as the 3D frame. */
+export declare function DuoFlatFrame({ inner, width, height }: {
+    inner: boolean;
+    width: number;
+    height: number;
+}): React.JSX.Element;

package/dist/components/duo-flat-geometry.d.ts

@@ -0,0 +1,52 @@
+import { DuoButton } from '../core/duo';
+type Edge = 'top' | 'right' | 'bottom' | 'left';
+/** A front projection of the 3D body's dimensions, with room for its edge controls. */
+export declare function flatFrameGeometry(inner: boolean, displayTurns: number, width: number, height: number): {
+    bodyWidth: number;
+    bodyHeight: 117.8;
+    screenWidth: number;
+    screenHeight: number;
+    scale: number;
+    turns: number;
+    buttons: {
+        button: DuoButton;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        edge: Edge;
+    }[];
+    guides: {
+        targetX: number;
+        targetY: number;
+        x: number;
+        y: number;
+        button: DuoButton;
+        edge: Edge;
+    }[];
+    rect: {
+        min: {
+            x: number;
+            y: number;
+        };
+        max: {
+            x: number;
+            y: number;
+        };
+    };
+    iconSize: number;
+};
+/** Scale the glyph with the device while its surrounding click target stays 44 pixels. */
+export declare function hardwareIconSize(rect: {
+    min: {
+        x: number;
+        y: number;
+    };
+    max: {
+        x: number;
+        y: number;
+    };
+}): number;
+/** The hover band joins the metal edge to its icons without covering the display. */
+export declare function flatHoverEdge(x: number, y: number, rect: ReturnType<typeof flatFrameGeometry>['rect']): Edge | undefined;
+export {};

package/dist/components/duo-fold-motion.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+import { flatFrameGeometry } from './duo-flat-geometry';
+import { DuoOrientation } from '../core/duo';
+type Frame = ReturnType<typeof flatFrameGeometry>;
+type Pose = {
+    inner: boolean;
+    frame: Frame;
+};
+export type FoldMotion = {
+    from: Pose;
+    to: Pose;
+    before: HTMLCanvasElement;
+    after?: HTMLCanvasElement;
+    ready: boolean;
+};
+/** Animate confirmed display changes; resizing, rotation and reduced motion cancel the transition. */
+export declare function useDuoFoldMotion(video: React.RefObject<HTMLVideoElement | null>, inner: boolean, frame: Frame, orientation?: DuoOrientation): {
+    motion: FoldMotion | undefined;
+    finish: () => void;
+    prepare: (targetInner: boolean) => void;
+};
+/** Load the tiny folding renderer only for a confirmed display change. */
+export declare function DuoFoldMotion({ motion, onFinish }: {
+    motion: FoldMotion;
+    onFinish: () => void;
+}): React.JSX.Element;
+export {};

package/dist/components/duo-fold-renderer.d.ts

@@ -0,0 +1,19 @@
+import { FoldMotion } from './duo-fold-motion';
+export declare const FOLD_DURATION = 1200;
+type Kind = 'metal' | 'seal' | 'inner' | 'outer' | 'back';
+export type FoldMesh = {
+    side: -1 | 0 | 1;
+    kind: Kind;
+    vertices: Float32Array;
+};
+/** Low-segment beveled rails, three caps, glass seals and three screen polygons. */
+export declare function foldMeshes(): FoldMesh[];
+/** Both leaves turn toward the viewer before settling flat, following the reference's shallow V. */
+export declare function foldPose(progress: number): {
+    left: number;
+    right: number;
+    shift: number;
+};
+/** The renderer owns its context, buffers and textures, and releases all of them after one fold. */
+export declare function renderFold(canvas: HTMLCanvasElement, motion: FoldMotion, finished: () => void): () => void;
+export {};

package/dist/components/duo-fold-timing.d.ts

@@ -0,0 +1 @@
+export declare function duoFoldAngle(from: number, target: number, seconds: number): number;

package/dist/components/duo-frame.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { DuoButton, DuoState, DuoOrientation } from '../core/duo';
+export interface DuoFrameProps {
+    modelUrl?: string;
+    outer: HTMLVideoElement | null;
+    inner: HTMLVideoElement | null;
+    state: DuoState;
+    setAngle: (degrees: number) => Promise<void>;
+    setOrientation: (orientation: DuoOrientation) => Promise<void>;
+    button: (button: DuoButton, down: boolean) => Promise<void>;
+    touch: (action: number, screenId: number, x: number, y: number) => void;
+    onKeyDown: React.KeyboardEventHandler<HTMLDivElement>;
+    onKeyUp: React.KeyboardEventHandler<HTMLDivElement>;
+}
+/** A procedural titanium frame. Each glass panel carries its own native video texture. */
+export default function DuoFrame(props: DuoFrameProps): React.JSX.Element;

package/dist/components/duo-hardware.d.ts

@@ -0,0 +1,20 @@
+import { DuoButton } from '../core/duo';
+import * as THREE from 'three';
+type Edge = 'top' | 'bottom' | 'left' | 'right';
+export type HardwareGuide = {
+    button: DuoButton;
+    edge: Edge;
+    x: number;
+    y: number;
+};
+/** Keep button hints outside the silhouette as the device folds, rotates and changes size. */
+export declare function hardwareLayout(anchors: {
+    button: DuoButton;
+    point: THREE.Vector3;
+    outward: THREE.Vector3;
+}[], bounds: THREE.Box3, camera: THREE.Camera, width: number, height: number): {
+    guides: HardwareGuide[];
+    rect: THREE.Box2;
+    iconSize: number;
+};
+export { flatHoverEdge as hardwareHoverEdge } from './duo-flat-geometry';

package/dist/components/duo-model.d.ts

@@ -0,0 +1,19 @@
+import { DuoButton } from '../core/duo';
+import * as THREE from 'three';
+/** Independent of WebGL so fold geometry and touch occlusion can be tested directly. */
+export declare function createDuoModel(outerTexture: THREE.Texture, innerTexture: THREE.Texture, environment?: THREE.Texture): {
+    device: THREE.Group<THREE.Object3DEventMap>;
+    hitObjects: THREE.Object3D<THREE.Object3DEventMap>[];
+    setAngle: (degrees: number) => void;
+    buttonAnchors: () => {
+        button: DuoButton;
+        point: THREE.Vector3;
+        outward: THREE.Vector3;
+    }[];
+    getBounds: (bounds: THREE.Box3) => THREE.Box3;
+    pick: (ray: THREE.Raycaster) => THREE.Intersection<THREE.Object3D<THREE.Object3DEventMap>>;
+    loadAppearance: (url: string) => Promise<void>;
+    highlightButton: (name?: DuoButton, pressed?: boolean) => void;
+    animateButtons: (dt: number) => boolean;
+    dispose: () => void;
+};

package/dist/components/duo-screen-handoff.d.ts

@@ -0,0 +1,4 @@
+/** Capture two bounded stills per fold, without retaining a canvas or rendering loop. */
+export declare function captureDuoFrame(video: HTMLVideoElement | null): HTMLCanvasElement | undefined;
+/** Capture the first incoming frame without delaying for native fades or brightness changes. */
+export declare function waitForDuoFrame(video: HTMLVideoElement | null, ready: (image: HTMLCanvasElement | undefined) => void): () => void;

package/dist/components/duo-view.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { DuoFrameProps } from './duo-frame';
+/** Native video is the default; only an explicit 3D selection loads the renderer and body asset. */
+export default function DuoView(props: DuoFrameProps): React.JSX.Element;

package/dist/components/remote-control.d.ts

@@ -15,6 +15,10 @@ export interface RemoteControlProps {
     sessionId?: string;
     openUrl?: string;
     showFrame?: boolean;
+    /** Enables the official iPhone Duo's native displays and interactive folding frame. */
+    deviceModel?: 'iphone-duo';
+    /** Optional prepared Duo GLB, supplied and licensed by the host application. */
+    duoModelUrl?: string;
     autoReconnect?: boolean;
     /**
      * Fires once when the component concludes the instance is permanently
@@ -247,7 +251,7 @@ export interface ImperativeKeyboardEvent {
 export interface RemoteControlHandle {
     openUrl: (url: string) => void;
     sendKeyEvent: (event: ImperativeKeyboardEvent) => void;
-    screenshot: () => Promise<ScreenshotData>;
+    screenshot: (display?: 'outer' | 'inner') => Promise<ScreenshotData>;
     terminateApp: (bundleId: string) => Promise<void>;
     reconnect: () => void;
     refreshAxTree: () => Promise<AxSnapshot>;

package/dist/core/duo.d.ts

@@ -0,0 +1,63 @@
+/** Native iPhone Duo display metadata. Pixel geometry comes from CoreSimulator. */
+export interface DuoDisplay {
+    id: 'outer' | 'inner';
+    screenId: number;
+    trackId: string;
+    width: number;
+    height: number;
+    scale: number;
+    orientation: number;
+}
+export type DuoOrientation = 'portrait' | 'pud' | 'landscape-left' | 'landscape-right';
+export interface DuoState {
+    orientation: DuoOrientation;
+    angleDegrees: number;
+    minAngleDegrees: number;
+    maxAngleDegrees: number;
+    displays: DuoDisplay[];
+}
+export declare const DUO_DIMENSIONS: {
+    readonly width: 164.6;
+    readonly height: 117.8;
+    readonly depth: 5.2;
+};
+/** Invert the CSS display rotation before sending native panel coordinates. */
+export declare function flatDisplayTouch(x: number, y: number, turns: number): {
+    x: number;
+    y: number;
+};
+export declare function validHingeAngle(angle: number): boolean;
+/** Mesh UVs use the native portrait panel; HID has a top-left origin. */
+export declare function panelTouch(u: number, v: number): {
+    x: number;
+    y: number;
+};
+/** Locking the view never suppresses screen input, including accidental Alt presses. */
+export declare function duoPointerMode(locked: boolean, screenHit: boolean, altKey: boolean): 'touch' | 'orbit' | 'ignore';
+export declare function createDisplayTouchMessage(action: number, screenId: number, x: number, y: number): ArrayBuffer;
+/** One request in flight; intermediate slider positions are replaced by the newest position. */
+export declare class HingeSender {
+    private send;
+    private failed;
+    private latest;
+    private running;
+    private stopped;
+    constructor(send: (angle: number) => Promise<void>, failed: (error: unknown) => void);
+    set(angle: number): void;
+    stop(): void;
+    private flush;
+}
+export type DuoButton = 'side' | 'volumeUp' | 'volumeDown';
+export declare const DUO_BUTTONS: Record<DuoButton, string>;
+/** Keeps button edges ordered, including releases after cancellation or a failed press. */
+export declare class DuoButtonSender {
+    private send;
+    private failed;
+    private held?;
+    private tail;
+    private timeout?;
+    constructor(send: (button: DuoButton, down: boolean) => Promise<void>, failed: (error: unknown) => void);
+    press(button: DuoButton): void;
+    release(): void;
+    private enqueue;
+}

package/dist/duo-fold-renderer-BXejNHcY.mjs

@@ -0,0 +1,257 @@
+const C = 1200;
+function U(p, l, T, e, t = 0) {
+  const o = [];
+  for (const [u, r, c, h] of [
+    [p / 2 - e, l / 2 - e, e, 0],
+    [-p / 2 + T, l / 2 - T, T, Math.PI / 2],
+    [-p / 2 + T, -l / 2 + T, T, Math.PI],
+    [p / 2 - e, -l / 2 + e, e, Math.PI * 1.5]
+  ])
+    for (let n = 0; n <= 8; n++) {
+      const i = h + n * Math.PI / 16, a = Math.cos(i), s = Math.sin(i);
+      o.push({ x: u + (c - t) * a, y: r + (c - t) * s, nx: a, ny: s });
+    }
+  return o;
+}
+function B() {
+  const p = [], l = (t, o, u) => p.push({ side: t, kind: o, vertices: new Float32Array(u) }), T = (t, o, u, r, c, h, n, i, a, s) => {
+    const x = [], d = (m, g, v, _) => x.push(m.x + u, m.y + r, g, m.nx * _, m.ny * _, v, 0, 0), E = Math.min(0.32, i / 3, a / 2, s / 2), I = [
+      [E, n, 0.707, 0.707],
+      [0, n - E, 0, 1],
+      [0, n - i + E, 0, 1],
+      [E, n - i, -0.707, 0.707]
+    ];
+    for (let m = 0; m < I.length - 1; m++) {
+      const g = I[m], v = I[m + 1], _ = U(c, h, a, s, g[0]), H = U(c, h, a, s, v[0]);
+      for (let F = 0; F < _.length; F++) {
+        const L = (F + 1) % _.length;
+        for (const [D, M] of [
+          [_[F], g],
+          [H[F], v],
+          [_[L], g],
+          [_[L], g],
+          [H[F], v],
+          [H[L], v]
+        ])
+          d(D, M[1], M[2], M[3]);
+      }
+    }
+    const A = U(c, h, a, s, E);
+    for (const [m, g] of [
+      [n, 1],
+      [n - i, -1]
+    ])
+      for (let v = 0; v < A.length; v++)
+        x.push(u, r, m, 0, 0, g, 0, 0), d(A[v], m, g, 0), d(A[(v + 1) % A.length], m, g, 0);
+    l(t, o, x);
+  }, e = (t, o, u, r, c, h, n, i) => {
+    const a = [], s = U(r, c, n, i), x = (d, E) => {
+      const I = d + u;
+      let A = 0, m = 0;
+      o === "inner" && (A = 0.5 - E / 110.8, m = 0.5 + I / 157.5), o === "outer" && (A = 0.5 - d / r, m = 0.5 + E / c), a.push(I, E, h, 0, 0, o === "outer" || o === "back" ? -1 : 1, A, m);
+    };
+    for (let d = 0; d < s.length; d++)
+      x(0, 0), x(s[d].x, s[d].y), x(s[(d + 1) % s.length].x, s[(d + 1) % s.length].y);
+    l(t, o, a);
+  };
+  for (const t of [-1, 1]) {
+    const o = t === -1 ? 8.4 : 1.25, u = t === 1 ? 8.4 : 1.25;
+    T(t, "metal", t * 82.3 / 2, 0, 82.3, 117.8, 0, 5.2, o, u), e(
+      t,
+      "seal",
+      t * 82.3 / 2,
+      82.3 - 2.24,
+      117.8 - 2.24,
+      0.12,
+      t === -1 ? 7.15 : 0.2,
+      t === 1 ? 7.15 : 0.2
+    ), e(
+      t,
+      "inner",
+      t * (157.5 / 4 + 0.55),
+      157.5 / 2 - 1.1,
+      110.8,
+      0.24,
+      t === -1 ? 5.3 : 0,
+      t === 1 ? 5.3 : 0
+    );
+  }
+  for (const [t, o, u] of [
+    ["metal", 117.8, -0.12],
+    ["seal", 117.8 - 2.24, 0.12],
+    ["inner", 110.8, 0.24]
+  ]) {
+    const r = [], c = (h, n) => r.push(h, n, u, 0, 0, 1, 0.5 - n / 110.8, 0.5 + h / 157.5);
+    for (let h = 0; h < 6; h++) {
+      const n = -1.1 + h * 2.2 / 6, i = n + 2.2 / 6;
+      for (const [a, s] of [
+        [n, -o / 2],
+        [i, -o / 2],
+        [n, o / 2],
+        [n, o / 2],
+        [i, -o / 2],
+        [i, o / 2]
+      ])
+        c(a, s);
+    }
+    l(0, t, r);
+  }
+  e(-1, "seal", -82.3 / 2, 82.3 - 2.24, 117.8 - 2.24, -5.2 - 0.12, 7.15, 0.65), e(-1, "outer", -82.3 / 2, 77.1, 112.2, -5.2 - 0.24, 6.6, 0.8), e(1, "back", 82.3 / 2, 82.3 - 1, 117.8 - 1, -5.2 - 0.12, 0.8, 8);
+  for (const t of [82.3 - 37, 82.3 - 25])
+    T(1, "metal", t, 117.8 / 2 + 0.4, 9.5, 0.8, -1.4, 2, 0.35, 0.35);
+  return T(1, "metal", 82.3 + 0.4, 21, 0.8, 13, -1.4, 2, 0.35, 0.35), p;
+}
+function N(p) {
+  const l = [
+    [0, 180, 0, -0.5],
+    [0.12, 176, -4, -0.46],
+    [0.24, 150, -8, -0.4],
+    [0.35, 90, -12, -0.32],
+    [0.48, 48, -22, -0.14],
+    [0.62, 30, -20, -0.04],
+    [0.8, 14, -10, 0],
+    [1, 0, 0, 0]
+  ], T = Math.max(0, Math.min(1, p)), e = Math.max(0, l.findIndex((c) => c[0] >= T) - 1), t = l[e], o = l[e + 1], u = Math.max(0, Math.min(1, (T - t[0]) / (o[0] - t[0]))), r = (c) => t[c] + (o[c] - t[c]) * u;
+  return { left: r(1) * Math.PI / 180, right: r(2) * Math.PI / 180, shift: r(3) * 82.3 };
+}
+const k = `
+attribute vec3 position;
+attribute vec3 normal;
+attribute vec2 uv;
+uniform vec2 viewport;
+uniform float scale;
+uniform vec2 leaf;
+uniform vec2 roll;
+uniform vec4 hinge;
+uniform int bend;
+uniform float shift;
+uniform float level;
+varying vec3 worldPosition;
+varying vec3 worldNormal;
+varying vec2 texcoord;
+void main() {
+  vec3 p = position - vec3(0.,0.,${0.6});
+  p = vec3(leaf.x*p.x + leaf.y*p.z, p.y, -leaf.y*p.x + leaf.x*p.z);
+  if (bend==1) {
+    vec2 a=vec2(-1.1*hinge.x+(position.z-${0.6})*hinge.y,1.1*hinge.y+(position.z-${0.6})*hinge.x);
+    vec2 b=vec2(1.1*hinge.z+(position.z-${0.6})*hinge.w,-1.1*hinge.w+(position.z-${0.6})*hinge.z);
+    p.xz=mix(a,b,(position.x+1.1)/2.2);
+  }
+  p += vec3(shift,0.,${0.6});
+  vec3 n = vec3(leaf.x*normal.x + leaf.y*normal.z, normal.y, -leaf.y*normal.x + leaf.x*normal.z);
+  p.xy = vec2(roll.x*p.x-roll.y*p.y, roll.y*p.x+roll.x*p.y);
+  n.xy = vec2(roll.x*n.x-roll.y*n.y, roll.y*n.x+roll.x*n.y);
+  p.z -= level;
+  worldPosition=p; worldNormal=n; texcoord=uv;
+  float w = 1. - p.z/600.;
+  gl_Position=vec4(p.xy*scale*2./viewport, -p.z/180., w);
+}`, X = `
+precision highp float;
+uniform int kind;
+uniform sampler2D screen;
+varying vec3 worldPosition;
+varying vec3 worldNormal;
+varying vec2 texcoord;
+void main() {
+  if (kind==2) { gl_FragColor=texture2D(screen,texcoord); return; }
+  vec3 n=normalize(worldNormal);
+  vec3 eye=normalize(vec3(0.,0.,600.)-worldPosition);
+  vec3 r=normalize(reflect(-eye,n)+worldPosition/190.);
+  float longitude=atan(r.z,r.x);
+  float latitude=asin(clamp(r.y,-1.,1.));
+  float strip=pow(.5+.5*sin(4.*longitude+1.8*sin(latitude)),12.);
+  float fill=pow(.5+.5*cos(2.*longitude-3.*latitude),5.);
+  float highlight=pow(max(0.,dot(n,normalize(vec3(-.4,.65,1.)))),90.);
+  vec3 silver=vec3(.30,.32,.34)+vec3(.85,.86,.87)*strip+vec3(.48)*fill+vec3(.7)*highlight;
+  if(kind==1) silver=vec3(.022,.026,.030)+silver*.035;
+  if(kind==3) silver=vec3(.93,.93,.91)*(0.88+.12*max(n.z,0.));
+  gl_FragColor=vec4(clamp(silver,0.,1.),1.);
+}`;
+function V(p, l, T) {
+  const e = p.getContext("webgl", { alpha: !0, antialias: !0, powerPreference: "low-power" });
+  if (!e) throw new Error("Fold animation WebGL unavailable");
+  const t = [], o = [], u = [];
+  let r = null, c = 0, h = !1;
+  const n = () => {
+    if (!h) {
+      h = !0, cancelAnimationFrame(c);
+      for (const i of o) e.deleteBuffer(i);
+      for (const i of u) e.deleteTexture(i);
+      for (const i of t) e.deleteShader(i);
+      r && e.deleteProgram(r), e.getExtension("WEBGL_lose_context")?.loseContext();
+    }
+  };
+  try {
+    for (const [f, P] of [
+      [e.VERTEX_SHADER, k],
+      [e.FRAGMENT_SHADER, X]
+    ]) {
+      const R = e.createShader(f);
+      if (t.push(R), e.shaderSource(R, P), e.compileShader(R), !e.getShaderParameter(R, e.COMPILE_STATUS))
+        throw new Error("Fold shader compilation failed");
+    }
+    r = e.createProgram();
+    for (const f of t) e.attachShader(r, f);
+    if (e.linkProgram(r), !e.getProgramParameter(r, e.LINK_STATUS)) throw new Error("Fold shader link failed");
+    e.useProgram(r);
+    const i = (f) => e.getUniformLocation(r, f), a = Object.fromEntries(
+      ["viewport", "scale", "leaf", "roll", "shift", "level", "kind", "screen", "hinge", "bend"].map((f) => [
+        f,
+        i(f)
+      ])
+    ), s = l.to.inner, x = s ? l.to : l.from, d = s ? l.from : l.to, E = x.frame.rect.min.x + x.frame.rect.max.x, I = x.frame.rect.min.y + x.frame.rect.max.y, A = Math.min(window.devicePixelRatio || 1, 1.5, 1280 / Math.max(E, I));
+    p.width = Math.round(E * A), p.height = Math.round(I * A), e.viewport(0, 0, p.width, p.height), e.uniform2f(a.viewport, E, I), e.uniform1i(a.screen, 0), e.enable(e.DEPTH_TEST), e.clearColor(0, 0, 0, 0);
+    const m = {
+      inner: s ? l.after : l.before,
+      outer: s ? l.before : l.after
+    }, g = {};
+    for (const f of ["inner", "outer"]) {
+      const P = e.createTexture();
+      u.push(P), g[f] = P, e.bindTexture(e.TEXTURE_2D, P), e.pixelStorei(e.UNPACK_FLIP_Y_WEBGL, 1), e.texImage2D(e.TEXTURE_2D, 0, e.RGBA, e.RGBA, e.UNSIGNED_BYTE, m[f]), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.LINEAR), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.LINEAR), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, e.CLAMP_TO_EDGE);
+    }
+    const v = ["position", "normal", "uv"].map((f) => e.getAttribLocation(r, f)), _ = B().map((f) => {
+      const P = e.createBuffer();
+      return o.push(P), e.bindBuffer(e.ARRAY_BUFFER, P), e.bufferData(e.ARRAY_BUFFER, f.vertices, e.STATIC_DRAW), { ...f, buffer: P };
+    }), H = performance.now(), F = d.frame.turns * -Math.PI / 2, L = (x.frame.turns * -Math.PI / 2 - F + Math.PI * 3) % (Math.PI * 2) - Math.PI;
+    let D = -1 / 0;
+    const M = (f) => {
+      if (h) return;
+      if (f - D < 1e3 / 60 - 0.5 && f - H < 1200) {
+        c = requestAnimationFrame(M);
+        return;
+      }
+      D = f;
+      const P = Math.min(1, (f - H) / 1200), R = s ? P : 1 - P, b = N(R), z = R * R * (3 - 2 * R), O = F + L * z;
+      e.clear(e.COLOR_BUFFER_BIT | e.DEPTH_BUFFER_BIT), e.uniform1f(a.scale, d.frame.scale + (x.frame.scale - d.frame.scale) * z), e.uniform2f(a.roll, Math.cos(O), Math.sin(O)), e.uniform1f(a.shift, b.shift), e.uniform1f(a.level, (5.2 + 0.6 * 2 + 0.24) * (1 - z)), e.uniform4f(
+        a.hinge,
+        Math.cos(b.left),
+        Math.sin(b.left),
+        Math.cos(b.right),
+        Math.sin(b.right)
+      );
+      for (const y of _) {
+        e.uniform1i(a.bend, y.side === 0 ? 1 : 0);
+        const S = y.side === -1 ? b.left : b.right;
+        e.uniform2f(a.leaf, Math.cos(S), Math.sin(S));
+        const G = y.kind === "inner" || y.kind === "outer";
+        e.uniform1i(
+          a.kind,
+          G ? 2 : y.kind === "metal" ? 0 : y.kind === "seal" ? 1 : 3
+        ), G && e.bindTexture(e.TEXTURE_2D, g[y.kind]), e.bindBuffer(e.ARRAY_BUFFER, y.buffer);
+        for (let w = 0; w < v.length; w++)
+          e.enableVertexAttribArray(v[w]), e.vertexAttribPointer(v[w], w === 2 ? 2 : 3, e.FLOAT, !1, 32, w === 2 ? 24 : w * 12);
+        e.drawArrays(e.TRIANGLES, 0, y.vertices.length / 8);
+      }
+      P < 1 ? c = requestAnimationFrame(M) : (n(), T());
+    };
+    return M(H), n;
+  } catch (i) {
+    throw n(), i;
+  }
+}
+export {
+  C as FOLD_DURATION,
+  B as foldMeshes,
+  N as foldPose,
+  V as renderFold
+};

package/dist/duo-fold-renderer-DdltAnF7.js

@@ -0,0 +1,53 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=1200,y=82.3,U=117.8,B=5.2,S=.6;function N(p,l,v,e,t=0){const o=[];for(const[u,r,c,h]of[[p/2-e,l/2-e,e,0],[-p/2+v,l/2-v,v,Math.PI/2],[-p/2+v,-l/2+v,v,Math.PI],[p/2-e,-l/2+e,e,Math.PI*1.5]])for(let n=0;n<=8;n++){const i=h+n*Math.PI/16,a=Math.cos(i),s=Math.sin(i);o.push({x:u+(c-t)*a,y:r+(c-t)*s,nx:a,ny:s})}return o}function W(){const p=[],l=(t,o,u)=>p.push({side:t,kind:o,vertices:new Float32Array(u)}),v=(t,o,u,r,c,h,n,i,a,s)=>{const g=[],d=(m,T,x,R)=>g.push(m.x+u,m.y+r,T,m.nx*R,m.ny*R,x,0,0),E=Math.min(.32,i/3,a/2,s/2),M=[[E,n,.707,.707],[0,n-E,0,1],[0,n-i+E,0,1],[E,n-i,-.707,.707]];for(let m=0;m<M.length-1;m++){const T=M[m],x=M[m+1],R=N(c,h,a,s,T[0]),I=N(c,h,a,s,x[0]);for(let b=0;b<R.length;b++){const L=(b+1)%R.length;for(const[k,F]of[[R[b],T],[I[b],x],[R[L],T],[R[L],T],[I[b],x],[I[L],x]])d(k,F[1],F[2],F[3])}}const _=N(c,h,a,s,E);for(const[m,T]of[[n,1],[n-i,-1]])for(let x=0;x<_.length;x++)g.push(u,r,m,0,0,T,0,0),d(_[x],m,T,0),d(_[(x+1)%_.length],m,T,0);l(t,o,g)},e=(t,o,u,r,c,h,n,i)=>{const a=[],s=N(r,c,n,i),g=(d,E)=>{const M=d+u;let _=0,m=0;o==="inner"&&(_=.5-E/110.8,m=.5+M/157.5),o==="outer"&&(_=.5-d/r,m=.5+E/c),a.push(M,E,h,0,0,o==="outer"||o==="back"?-1:1,_,m)};for(let d=0;d<s.length;d++)g(0,0),g(s[d].x,s[d].y),g(s[(d+1)%s.length].x,s[(d+1)%s.length].y);l(t,o,a)};for(const t of[-1,1]){const o=t===-1?8.4:1.25,u=t===1?8.4:1.25;v(t,"metal",t*y/2,0,y,U,0,B,o,u),e(t,"seal",t*y/2,y-2.24,U-2.24,.12,t===-1?7.15:.2,t===1?7.15:.2),e(t,"inner",t*(157.5/4+.55),157.5/2-1.1,110.8,.24,t===-1?5.3:0,t===1?5.3:0)}for(const[t,o,u]of[["metal",U,-.12],["seal",U-2.24,.12],["inner",110.8,.24]]){const r=[],c=(h,n)=>r.push(h,n,u,0,0,1,.5-n/110.8,.5+h/157.5);for(let h=0;h<6;h++){const n=-1.1+h*2.2/6,i=n+2.2/6;for(const[a,s]of[[n,-o/2],[i,-o/2],[n,o/2],[n,o/2],[i,-o/2],[i,o/2]])c(a,s)}l(0,t,r)}e(-1,"seal",-y/2,y-2.24,U-2.24,-B-.12,7.15,.65),e(-1,"outer",-y/2,77.1,112.2,-B-.24,6.6,.8),e(1,"back",y/2,y-1,U-1,-B-.12,.8,8);for(const t of[y-37,y-25])v(1,"metal",t,U/2+.4,9.5,.8,-1.4,2,.35,.35);return v(1,"metal",y+.4,21,.8,13,-1.4,2,.35,.35),p}function $(p){const l=[[0,180,0,-.5],[.12,176,-4,-.46],[.24,150,-8,-.4],[.35,90,-12,-.32],[.48,48,-22,-.14],[.62,30,-20,-.04],[.8,14,-10,0],[1,0,0,0]],v=Math.max(0,Math.min(1,p)),e=Math.max(0,l.findIndex(c=>c[0]>=v)-1),t=l[e],o=l[e+1],u=Math.max(0,Math.min(1,(v-t[0])/(o[0]-t[0]))),r=c=>t[c]+(o[c]-t[c])*u;return{left:r(1)*Math.PI/180,right:r(2)*Math.PI/180,shift:r(3)*y}}const Y=`
+attribute vec3 position;
+attribute vec3 normal;
+attribute vec2 uv;
+uniform vec2 viewport;
+uniform float scale;
+uniform vec2 leaf;
+uniform vec2 roll;
+uniform vec4 hinge;
+uniform int bend;
+uniform float shift;
+uniform float level;
+varying vec3 worldPosition;
+varying vec3 worldNormal;
+varying vec2 texcoord;
+void main() {
+  vec3 p = position - vec3(0.,0.,${S});
+  p = vec3(leaf.x*p.x + leaf.y*p.z, p.y, -leaf.y*p.x + leaf.x*p.z);
+  if (bend==1) {
+    vec2 a=vec2(-1.1*hinge.x+(position.z-${S})*hinge.y,1.1*hinge.y+(position.z-${S})*hinge.x);
+    vec2 b=vec2(1.1*hinge.z+(position.z-${S})*hinge.w,-1.1*hinge.w+(position.z-${S})*hinge.z);
+    p.xz=mix(a,b,(position.x+1.1)/2.2);
+  }
+  p += vec3(shift,0.,${S});
+  vec3 n = vec3(leaf.x*normal.x + leaf.y*normal.z, normal.y, -leaf.y*normal.x + leaf.x*normal.z);
+  p.xy = vec2(roll.x*p.x-roll.y*p.y, roll.y*p.x+roll.x*p.y);
+  n.xy = vec2(roll.x*n.x-roll.y*n.y, roll.y*n.x+roll.x*n.y);
+  p.z -= level;
+  worldPosition=p; worldNormal=n; texcoord=uv;
+  float w = 1. - p.z/600.;
+  gl_Position=vec4(p.xy*scale*2./viewport, -p.z/180., w);
+}`,j=`
+precision highp float;
+uniform int kind;
+uniform sampler2D screen;
+varying vec3 worldPosition;
+varying vec3 worldNormal;
+varying vec2 texcoord;
+void main() {
+  if (kind==2) { gl_FragColor=texture2D(screen,texcoord); return; }
+  vec3 n=normalize(worldNormal);
+  vec3 eye=normalize(vec3(0.,0.,600.)-worldPosition);
+  vec3 r=normalize(reflect(-eye,n)+worldPosition/190.);
+  float longitude=atan(r.z,r.x);
+  float latitude=asin(clamp(r.y,-1.,1.));
+  float strip=pow(.5+.5*sin(4.*longitude+1.8*sin(latitude)),12.);
+  float fill=pow(.5+.5*cos(2.*longitude-3.*latitude),5.);
+  float highlight=pow(max(0.,dot(n,normalize(vec3(-.4,.65,1.)))),90.);
+  vec3 silver=vec3(.30,.32,.34)+vec3(.85,.86,.87)*strip+vec3(.48)*fill+vec3(.7)*highlight;
+  if(kind==1) silver=vec3(.022,.026,.030)+silver*.035;
+  if(kind==3) silver=vec3(.93,.93,.91)*(0.88+.12*max(n.z,0.));
+  gl_FragColor=vec4(clamp(silver,0.,1.),1.);
+}`;function V(p,l,v){const e=p.getContext("webgl",{alpha:!0,antialias:!0,powerPreference:"low-power"});if(!e)throw new Error("Fold animation WebGL unavailable");const t=[],o=[],u=[];let r=null,c=0,h=!1;const n=()=>{if(!h){h=!0,cancelAnimationFrame(c);for(const i of o)e.deleteBuffer(i);for(const i of u)e.deleteTexture(i);for(const i of t)e.deleteShader(i);r&&e.deleteProgram(r),e.getExtension("WEBGL_lose_context")?.loseContext()}};try{for(const[f,P]of[[e.VERTEX_SHADER,Y],[e.FRAGMENT_SHADER,j]]){const A=e.createShader(f);if(t.push(A),e.shaderSource(A,P),e.compileShader(A),!e.getShaderParameter(A,e.COMPILE_STATUS))throw new Error("Fold shader compilation failed")}r=e.createProgram();for(const f of t)e.attachShader(r,f);if(e.linkProgram(r),!e.getProgramParameter(r,e.LINK_STATUS))throw new Error("Fold shader link failed");e.useProgram(r);const i=f=>e.getUniformLocation(r,f),a=Object.fromEntries(["viewport","scale","leaf","roll","shift","level","kind","screen","hinge","bend"].map(f=>[f,i(f)])),s=l.to.inner,g=s?l.to:l.from,d=s?l.from:l.to,E=g.frame.rect.min.x+g.frame.rect.max.x,M=g.frame.rect.min.y+g.frame.rect.max.y,_=Math.min(window.devicePixelRatio||1,1.5,1280/Math.max(E,M));p.width=Math.round(E*_),p.height=Math.round(M*_),e.viewport(0,0,p.width,p.height),e.uniform2f(a.viewport,E,M),e.uniform1i(a.screen,0),e.enable(e.DEPTH_TEST),e.clearColor(0,0,0,0);const m={inner:s?l.after:l.before,outer:s?l.before:l.after},T={};for(const f of["inner","outer"]){const P=e.createTexture();u.push(P),T[f]=P,e.bindTexture(e.TEXTURE_2D,P),e.pixelStorei(e.UNPACK_FLIP_Y_WEBGL,1),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,m[f]),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE)}const x=["position","normal","uv"].map(f=>e.getAttribLocation(r,f)),R=W().map(f=>{const P=e.createBuffer();return o.push(P),e.bindBuffer(e.ARRAY_BUFFER,P),e.bufferData(e.ARRAY_BUFFER,f.vertices,e.STATIC_DRAW),{...f,buffer:P}}),I=performance.now(),b=d.frame.turns*-Math.PI/2,L=(g.frame.turns*-Math.PI/2-b+Math.PI*3)%(Math.PI*2)-Math.PI;let k=-1/0;const F=f=>{if(h)return;if(f-k<1e3/60-.5&&f-I<G){c=requestAnimationFrame(F);return}k=f;const P=Math.min(1,(f-I)/G),A=s?P:1-P,D=$(A),O=A*A*(3-2*A),X=b+L*O;e.clear(e.COLOR_BUFFER_BIT|e.DEPTH_BUFFER_BIT),e.uniform1f(a.scale,d.frame.scale+(g.frame.scale-d.frame.scale)*O),e.uniform2f(a.roll,Math.cos(X),Math.sin(X)),e.uniform1f(a.shift,D.shift),e.uniform1f(a.level,(B+S*2+.24)*(1-O)),e.uniform4f(a.hinge,Math.cos(D.left),Math.sin(D.left),Math.cos(D.right),Math.sin(D.right));for(const w of R){e.uniform1i(a.bend,w.side===0?1:0);const C=w.side===-1?D.left:D.right;e.uniform2f(a.leaf,Math.cos(C),Math.sin(C));const H=w.kind==="inner"||w.kind==="outer";e.uniform1i(a.kind,H?2:w.kind==="metal"?0:w.kind==="seal"?1:3),H&&e.bindTexture(e.TEXTURE_2D,T[w.kind]),e.bindBuffer(e.ARRAY_BUFFER,w.buffer);for(let z=0;z<x.length;z++)e.enableVertexAttribArray(x[z]),e.vertexAttribPointer(x[z],z===2?2:3,e.FLOAT,!1,32,z===2?24:z*12);e.drawArrays(e.TRIANGLES,0,w.vertices.length/8)}P<1?c=requestAnimationFrame(F):(n(),v())};return F(I),n}catch(i){throw n(),i}}exports.FOLD_DURATION=G;exports.foldMeshes=W;exports.foldPose=$;exports.renderFold=V;