1681-engine 0.0.0-stage → 0.5.9

package/dist/postfx/fxShader.js

@@ -0,0 +1,127 @@
+import { Filter as p, UniformGroup as a, Texture as f, GpuProgram as m, GlProgram as c } from "pixi.js";
+const l = { f32: "float", "vec2<f32>": "vec2", "vec3<f32>": "vec3", "vec4<f32>": "vec4" }, s = `in vec2 aPosition;
+out vec2 vTextureCoord;
+uniform vec4 uInputSize;
+uniform vec4 uOutputFrame;
+uniform vec4 uOutputTexture;
+void main(void) {
+  vec2 position = aPosition * uOutputFrame.zw + uOutputFrame.xy;
+  position.x = position.x * (2.0 / uOutputTexture.x) - 1.0;
+  position.y = position.y * (2.0 * uOutputTexture.z / uOutputTexture.y) - uOutputTexture.z;
+  gl_Position = vec4(position, 0.0, 1.0);
+  vTextureCoord = aPosition * (uOutputFrame.zw * uInputSize.zw);
+}
+`;
+function v(e) {
+  const u = Object.entries(e.uniforms).map(([t, r]) => `uniform ${l[r.type]} ${t};`).join(`
+`);
+  return `in vec2 vTextureCoord;
+out vec4 finalColor;
+uniform sampler2D uTexture;
+${e.map ? "uniform sampler2D uMap;" : ""}
+uniform vec4 uInputSize;
+uniform vec4 uInputClamp;
+uniform vec4 uOutputFrame;
+${u}
+vec4 sampleAt(vec2 c) { return texture(uTexture, clamp(c, uInputClamp.xy, uInputClamp.zw)); }
+${e.map ? "vec4 sampleMap(vec2 c) { return texture(uMap, clamp(c, uInputClamp.xy, uInputClamp.zw)); }" : ""}
+vec2 toCoord(vec2 uv) { return uv * uOutputFrame.zw * uInputSize.zw; }
+void main(void) {
+  vec2 coord = vTextureCoord;
+  vec2 framePx = uOutputFrame.zw;
+  vec2 frameUv = coord * uInputSize.xy / framePx;
+  vec2 texel = uInputSize.zw;
+  vec4 src = texture(uTexture, coord);
+  vec4 result = src;
+${e.glsl}
+  finalColor = result;
+}
+`;
+}
+function x(e) {
+  return `struct GlobalFilterUniforms {
+  uInputSize: vec4<f32>,
+  uInputPixel: vec4<f32>,
+  uInputClamp: vec4<f32>,
+  uOutputFrame: vec4<f32>,
+  uGlobalFrame: vec4<f32>,
+  uOutputTexture: vec4<f32>,
+};
+struct FxUniforms {
+${Object.entries(e.uniforms).map(([t, r]) => `  ${t}: ${r.type},`).join(`
+`)}
+};
+@group(0) @binding(0) var<uniform> gfu: GlobalFilterUniforms;
+@group(0) @binding(1) var uTexture: texture_2d<f32>;
+@group(0) @binding(2) var uSampler: sampler;
+@group(1) @binding(0) var<uniform> fx: FxUniforms;
+${e.map ? "@group(1) @binding(1) var uMap: texture_2d<f32>;" : ""}
+struct VSOutput {
+  @builtin(position) position: vec4<f32>,
+  @location(0) uv: vec2<f32>,
+};
+@vertex
+fn mainVertex(@location(0) aPosition: vec2<f32>) -> VSOutput {
+  var position = aPosition * gfu.uOutputFrame.zw + gfu.uOutputFrame.xy;
+  position.x = position.x * (2.0 / gfu.uOutputTexture.x) - 1.0;
+  position.y = position.y * (2.0 * gfu.uOutputTexture.z / gfu.uOutputTexture.y) - gfu.uOutputTexture.z;
+  return VSOutput(vec4<f32>(position, 0.0, 1.0), aPosition * (gfu.uOutputFrame.zw * gfu.uInputSize.zw));
+}
+fn sampleAt(c: vec2<f32>) -> vec4<f32> { return textureSampleLevel(uTexture, uSampler, clamp(c, gfu.uInputClamp.xy, gfu.uInputClamp.zw), 0.0); }
+${e.map ? "fn sampleMap(c: vec2<f32>) -> vec4<f32> { return textureSampleLevel(uMap, uSampler, clamp(c, gfu.uInputClamp.xy, gfu.uInputClamp.zw), 0.0); }" : ""}
+fn toCoord(uv: vec2<f32>) -> vec2<f32> { return uv * gfu.uOutputFrame.zw * gfu.uInputSize.zw; }
+@fragment
+fn mainFragment(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
+  let coord = uv;
+  let framePx = gfu.uOutputFrame.zw;
+  let frameUv = coord * gfu.uInputSize.xy / framePx;
+  let texel = gfu.uInputSize.zw;
+  let src = textureSampleLevel(uTexture, uSampler, coord, 0.0);
+  var result = src;
+${e.wgsl}
+  return result;
+}
+`;
+}
+class z extends p {
+  fxName;
+  group;
+  constructor(u) {
+    const t = {};
+    for (const [n, i] of Object.entries(u.uniforms)) t[n] = { value: typeof i.value == "number" ? i.value : new Float32Array(i.value), type: i.type };
+    const r = new a(t), o = x(u);
+    super({
+      // highp: the uniforms the vertex shader shares with it must match its precision, or the program will not link
+      glProgram: c.from({ vertex: s, fragment: v(u), name: `fx-${u.name}`, preferredFragmentPrecision: "highp" }),
+      gpuProgram: m.from({ vertex: { source: o, entryPoint: "mainVertex" }, fragment: { source: o, entryPoint: "mainFragment" } }),
+      resources: u.map ? { fxUniforms: r, uMap: f.WHITE.source } : { fxUniforms: r },
+      // as sharp as the canvas: a pixel game's effects land on its own pixels
+      resolution: "inherit"
+    }), this.fxName = u.name, this.group = r;
+  }
+  /** A uniform's value (a number, or the live array of a vector). */
+  get(u) {
+    return this.group.uniforms[u];
+  }
+  /** Sets a number uniform, or the components of a vector one. */
+  set(u, ...t) {
+    const r = this.group.uniforms, o = r[u];
+    if (o === void 0) throw new Error(`${this.fxName}: no uniform '${u}'`);
+    if (typeof o == "number") r[u] = t[0] ?? 0;
+    else for (let n = 0; n < o.length && n < t.length; n++) o[n] = t[n];
+    return this.group.update(), this;
+  }
+  /** A number uniform, for the subclasses' getters. */
+  num(u) {
+    return this.group.uniforms[u];
+  }
+}
+function d(e) {
+  return [(e >> 16 & 255) / 255, (e >> 8 & 255) / 255, (e & 255) / 255];
+}
+export {
+  z as FxFilter,
+  v as glslSource,
+  d as rgb,
+  x as wgslSource
+};

package/dist/postfx.js

@@ -0,0 +1,25 @@
+import { PostFx as t } from "./postfx/PostFx.js";
+import { FxFilter as l, glslSource as x, rgb as i, wgslSource as m } from "./postfx/fxShader.js";
+import { FxAnimator as f } from "./postfx/fxAnimator.js";
+import { VignetteFilter as a } from "./postfx/VignetteFilter.js";
+import { ChromaticAberrationFilter as g } from "./postfx/ChromaticAberrationFilter.js";
+import { PixelateFilter as n } from "./postfx/PixelateFilter.js";
+import { CrtFilter as A } from "./postfx/CrtFilter.js";
+import { ColorAdjustFilter as S } from "./postfx/ColorAdjustFilter.js";
+import { ShockwaveFilter as h } from "./postfx/ShockwaveFilter.js";
+import { BloomFilter as P } from "./postfx/BloomFilter.js";
+export {
+  P as BloomFilter,
+  g as ChromaticAberrationFilter,
+  S as ColorAdjustFilter,
+  A as CrtFilter,
+  f as FxAnimator,
+  l as FxFilter,
+  n as PixelateFilter,
+  t as PostFx,
+  h as ShockwaveFilter,
+  a as VignetteFilter,
+  x as glslSource,
+  i as rgb,
+  m as wgslSource
+};

package/dist/react/ChoiceDialog.js

@@ -0,0 +1,50 @@
+import { jsxs as s, jsx as c, Fragment as C } from "react/jsx-runtime";
+import { useState as k, useEffect as N, useCallback as f } from "react";
+import { firstChoice as x, answerChoice as a, choiceStore as g } from "./choiceStore.js";
+import { Modal as v } from "./Modal.js";
+import { useStore as S } from "./useStore.js";
+import { useCx as j, useUi as w } from "./UiProvider.js";
+const y = (t) => t.pending;
+function U({ width: t = 400 }) {
+  const e = j(), r = w(), o = S(g, y), [n, m] = k(null);
+  N(() => m(o ? x(o.options) : null), [o]);
+  const h = f(() => a(null), []), p = f(() => {
+    n && a(n);
+  }, [n]);
+  return o ? /* @__PURE__ */ s(
+    v,
+    {
+      width: t,
+      onCancel: h,
+      onConfirm: p,
+      className: e("e1681-choice"),
+      actions: /* @__PURE__ */ s(C, { children: [
+        /* @__PURE__ */ c("button", { type: "button", className: e("e1681-button ghost"), onClick: h, children: o.cancel ?? r.labels.cancel }),
+        /* @__PURE__ */ c("button", { type: "button", className: e("e1681-button"), disabled: !n, onClick: p, children: o.confirm ?? r.labels.choose })
+      ] }),
+      children: [
+        /* @__PURE__ */ c("div", { className: e("e1681-confirm-text"), children: o.text }),
+        /* @__PURE__ */ c("div", { className: e("e1681-choice-list"), role: "listbox", children: o.options.map(({ id: i, label: b, icon: u, note: d, disabled: l }) => /* @__PURE__ */ s(
+          "div",
+          {
+            role: "option",
+            "aria-selected": n === i,
+            "aria-disabled": l || void 0,
+            className: e(`e1681-row e1681-pickable${n === i ? " picked" : ""}${l ? " disabled" : ""}`),
+            onClick: () => !l && m(i),
+            onDoubleClick: () => !l && a(i),
+            children: [
+              u !== void 0 && /* @__PURE__ */ c("span", { className: e("e1681-choice-icon"), children: u }),
+              /* @__PURE__ */ c("span", { className: e("e1681-choice-label"), children: b }),
+              d !== void 0 && /* @__PURE__ */ c("span", { className: e("e1681-choice-note"), children: d })
+            ]
+          },
+          i
+        )) })
+      ]
+    }
+  ) : null;
+}
+export {
+  U as ChoiceDialog
+};

package/dist/react/ConfirmDialog.js

@@ -0,0 +1,52 @@
+import { jsxs as m, jsx as t, Fragment as h } from "react/jsx-runtime";
+import { useState as x, useEffect as g, useCallback as f } from "react";
+import { answerConfirm as b, parseQuantity as y, confirmStore as C } from "./confirmStore.js";
+import { Glyph as d } from "./Glyph.js";
+import { Modal as N } from "./Modal.js";
+import { Slider as k } from "./Slider.js";
+import { useStore as q } from "./useStore.js";
+import { useCx as v, useUi as M } from "./UiProvider.js";
+const S = (s) => s.pending;
+function U({ width: s = 360 }) {
+  const e = v(), a = M(), n = q(C, S), [o, l] = x(1);
+  g(() => l(Math.max(1, n?.max ?? 1)), [n]);
+  const c = (n?.max ?? 0) > 1, u = f(() => b(0), []), p = f(() => b(c ? o : 1), [c, o]);
+  if (!n) return null;
+  const r = n.max;
+  return /* @__PURE__ */ m(
+    N,
+    {
+      role: "alertdialog",
+      width: s,
+      onCancel: u,
+      onConfirm: p,
+      className: e("e1681-confirm"),
+      actions: /* @__PURE__ */ m(h, { children: [
+        /* @__PURE__ */ t("button", { type: "button", className: e("e1681-button ghost"), onClick: u, children: n.cancel ?? a.labels.cancel }),
+        /* @__PURE__ */ t("button", { type: "button", className: e("e1681-button"), autoFocus: !a.touch, onClick: p, children: n.ok ?? a.labels.ok })
+      ] }),
+      children: [
+        /* @__PURE__ */ t("div", { className: e("e1681-confirm-text"), children: n.text }),
+        c && /* @__PURE__ */ m("div", { className: e("e1681-confirm-qty"), children: [
+          /* @__PURE__ */ t("button", { type: "button", className: e("e1681-button ghost small"), "aria-label": "-1", onClick: () => l(Math.max(1, o - 1)), children: /* @__PURE__ */ t(d, { id: "minus" }) }),
+          /* @__PURE__ */ t(k, { value: o, min: 1, max: r, step: 1, format: (i) => `x${i}`, label: a.labels.quantity, onChange: l }),
+          /* @__PURE__ */ t("button", { type: "button", className: e("e1681-button ghost small"), "aria-label": "+1", onClick: () => l(Math.min(r, o + 1)), children: /* @__PURE__ */ t(d, { id: "plus" }) }),
+          /* @__PURE__ */ t(
+            "input",
+            {
+              className: e("e1681-input e1681-confirm-qty-input"),
+              inputMode: "numeric",
+              "aria-label": a.labels.quantity,
+              value: o,
+              onChange: (i) => l(y(i.target.value, r)),
+              onFocus: (i) => i.target.select()
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  U as ConfirmDialog
+};

package/dist/react/Glyph.js

@@ -0,0 +1,62 @@
+import { jsx as c } from "react/jsx-runtime";
+import { memo as u } from "react";
+import { useCx as m } from "./UiProvider.js";
+const d = {
+  close: ["X.....X", ".X...X.", "..X.X..", "...X...", "..X.X..", ".X...X.", "X.....X"],
+  check: [".......", "......X", ".....XX", "X...XX.", "XX.XX..", ".XXX...", "..X...."],
+  down: [".......", ".......", "XXXXXXX", ".XXXXX.", "..XXX..", "...X...", "......."],
+  up: [".......", "...X...", "..XXX..", ".XXXXX.", "XXXXXXX", ".......", "......."],
+  right: ["..X....", "..XX...", "..XXX..", "..XXXX.", "..XXX..", "..XX...", "..X...."],
+  left: ["....X..", "...XX..", "..XXX..", ".XXXX..", "..XXX..", "...XX..", "....X.."],
+  arrow: [".......", "....X..", ".....X.", "XXXXXXX", ".....X.", "....X..", "......."],
+  back: ["..X....", ".XX....", "XXXXXX.", ".XX...X", "..X...X", "......X", "..XXXX."],
+  star: ["...X...", "...X...", "XXXXXXX", ".XXXXX.", "..XXX..", ".XX.XX.", "X.....X"],
+  diamond: ["...X...", "..XXX..", ".XXXXX.", "XXXXXXX", ".XXXXX.", "..XXX..", "...X..."],
+  diamondOpen: ["...X...", "..X.X..", ".X...X.", "X.....X", ".X...X.", "..X.X..", "...X..."],
+  menu: [".......", "XXXXXXX", ".......", "XXXXXXX", ".......", "XXXXXXX", "......."],
+  plus: [".......", "...X...", "...X...", ".XXXXX.", "...X...", "...X...", "......."],
+  minus: [".......", ".......", ".......", ".XXXXX.", ".......", ".......", "......."],
+  warn: ["...X...", "..XXX..", "..X.X..", ".XX.XX.", ".X...X.", "XX.X.XX", "XXXXXXX"],
+  spark: ["...X...", "...X...", "..XXX..", "XXXXXXX", "..XXX..", "...X...", "...X..."],
+  lock: ["..XXX..", ".X...X.", ".X...X.", "XXXXXXX", "XXX.XXX", "XXX.XXX", "XXXXXXX"],
+  pin: [".XXXXX.", "..XXX..", "..XXX..", ".XXXXX.", "XXXXXXX", "...X...", "...X..."],
+  mail: [".......", "XXXXXXX", "XX...XX", "X.X.X.X", "X..X..X", "X.....X", "XXXXXXX"]
+}, a = /* @__PURE__ */ new Map();
+function p(o, e) {
+  return o.flatMap((t, s) => [...t].flatMap((n, r) => n === e ? [`M${r} ${s}h1v1h-1z`] : [])).join("");
+}
+function f(o, e) {
+  const { rows: t, tones: s } = Array.isArray(e) ? { rows: e, tones: void 0 } : e, n = Math.max(t.length, ...t.map((X) => X.length)), r = [];
+  t.some((X) => X.includes("X")) && r.push(["currentColor", p(t, "X")]);
+  for (const [X, i] of Object.entries(s ?? {})) r.push([i, p(t, X)]);
+  a.set(o, { size: n, layers: r });
+}
+for (const [o, e] of Object.entries(d)) f(o, e);
+function x(o) {
+  return a.has(o);
+}
+const M = u(function({ id: e, scale: t = 2, className: s, label: n }) {
+  const r = m(), X = a.get(e);
+  if (!X) return null;
+  const i = X.size * Math.max(1, Math.round(t));
+  return /* @__PURE__ */ c(
+    "svg",
+    {
+      className: r(s ? `e1681-glyph ${s}` : "e1681-glyph"),
+      width: i,
+      height: i,
+      viewBox: `0 0 ${X.size} ${X.size}`,
+      shapeRendering: "crispEdges",
+      role: n ? "img" : void 0,
+      "aria-label": n,
+      "aria-hidden": n ? void 0 : !0,
+      children: X.layers.map(([h, l]) => /* @__PURE__ */ c("path", { d: l, fill: h }, h))
+    }
+  );
+});
+export {
+  M as Glyph,
+  p as glyphPath,
+  x as hasGlyph,
+  f as registerGlyph
+};

package/dist/react/Modal.js

@@ -0,0 +1,37 @@
+import { jsx as s, jsxs as g } from "react/jsx-runtime";
+import { useRef as k, useEffect as y } from "react";
+import { createPortal as w } from "react-dom";
+import { useFitToViewport as x, SCROLL_CLASS as b } from "./useFitToViewport.js";
+import { useCx as E, useUi as L } from "./UiProvider.js";
+function D({ onCancel: r, onConfirm: i, width: a, role: m = "dialog", label: u, className: n, children: f, actions: d }) {
+  const o = E(), v = L(), l = k(null);
+  x(l, { enabled: !0, ...a !== void 0 ? { width: a } : {} }), y(() => {
+    const e = (t) => {
+      if (t.key === "Escape") r();
+      else if (t.key === "Enter" && i) i();
+      else return;
+      t.preventDefault(), t.stopImmediatePropagation();
+    };
+    return window.addEventListener("keydown", e, !0), () => window.removeEventListener("keydown", e, !0);
+  }, [r, i]);
+  const c = v.portal(), p = /* @__PURE__ */ s("div", { className: o("e1681-backdrop"), onPointerDown: (e) => e.stopPropagation(), onClick: r, children: /* @__PURE__ */ g(
+    "div",
+    {
+      ref: l,
+      className: o(`e1681-dialog e1681-frame${n ? ` ${n}` : ""}`),
+      role: m,
+      "aria-modal": "true",
+      "aria-label": u,
+      style: { width: a },
+      onClick: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ s("div", { className: o(`e1681-dialog-body ${b}`), children: f }),
+        d !== void 0 && /* @__PURE__ */ s("div", { className: o("e1681-dialog-actions"), children: d })
+      ]
+    }
+  ) });
+  return c ? w(p, c) : p;
+}
+export {
+  D as Modal
+};

package/dist/react/Panel.js

@@ -0,0 +1,23 @@
+import { jsxs as m, jsx as l } from "react/jsx-runtime";
+import { useRef as N } from "react";
+import { Glyph as S } from "./Glyph.js";
+import { fillLabel as x } from "./labels.js";
+import { sheetScaleStyle as L } from "./placement.js";
+import { useFitToViewport as g, SCROLL_CLASS as j } from "./useFitToViewport.js";
+import { useCx as C, useUi as P } from "./UiProvider.js";
+function G({ title: s, onClose: t, children: p, width: a, at: i, footer: n, className: d, style: f, titleText: h }) {
+  const e = C(), o = P(), r = N(null);
+  g(r, { enabled: !o.touch, ...a !== void 0 ? { width: a } : {}, ...i ? { at: i } : {} });
+  const c = h ?? (typeof s == "string" ? s : ""), u = /* @__PURE__ */ m("div", { className: e("e1681-panel-header"), children: [
+    /* @__PURE__ */ l("h3", { className: e("e1681-panel-title"), children: s }),
+    t && /* @__PURE__ */ l("button", { type: "button", className: e("e1681-close"), onClick: t, title: o.labels.closeHint, "aria-label": x(o.labels.close, c).trim(), children: /* @__PURE__ */ l(S, { id: "close" }) })
+  ] }), b = ["e1681-panel", "e1681-frame", o.touch ? "e1681-sheet" : "", d ?? ""].filter(Boolean).join(" "), v = o.touch ? { ...L(o.sheetScale) } : { width: a };
+  return /* @__PURE__ */ m("div", { ref: r, className: e(b), style: { ...v, ...f }, role: "dialog", "aria-label": c || void 0, onPointerDown: (y) => y.stopPropagation(), children: [
+    u,
+    /* @__PURE__ */ l("div", { className: e(`e1681-panel-body ${j}`), children: p }),
+    n !== void 0 && /* @__PURE__ */ l("div", { className: e("e1681-panel-footer"), children: n })
+  ] });
+}
+export {
+  G as Panel
+};

package/dist/react/PixelImage.js

@@ -0,0 +1,23 @@
+import { jsx as m } from "react/jsx-runtime";
+import { useState as x } from "react";
+import { pixelFit as c } from "./placement.js";
+import { useCx as d } from "./UiProvider.js";
+function j({ src: t, width: r, height: n, upscaled: o = 1, maxScale: s, alt: g = "", className: l }) {
+  const h = d(), [e, p] = x(null), i = e?.src === t ? c(e.w, e.h, r, n, s) : null;
+  return /* @__PURE__ */ m("span", { className: h(l ? `e1681-pixel-image ${l}` : "e1681-pixel-image"), style: { width: r, height: n }, children: /* @__PURE__ */ m(
+    "img",
+    {
+      src: t,
+      alt: g,
+      draggable: !1,
+      style: i ? { width: i.width, height: i.height } : { visibility: "hidden" },
+      onLoad: (u) => {
+        const a = u.currentTarget;
+        p({ src: t, w: a.naturalWidth / o, h: a.naturalHeight / o });
+      }
+    }
+  ) });
+}
+export {
+  j as PixelImage
+};

package/dist/react/Select.js

@@ -0,0 +1,98 @@
+import { jsx as f, jsxs as C, Fragment as K } from "react/jsx-runtime";
+import { useState as D, useRef as M, useLayoutEffect as O, useEffect as R } from "react";
+import { createPortal as U } from "react-dom";
+import { listWidth as B } from "../ui/layout/listWidth.js";
+import { scrollIntoView as F } from "../ui/layout/scroll.js";
+import { Glyph as G } from "./Glyph.js";
+import { listPlacement as V } from "./placement.js";
+import { useCx as _, useUi as q } from "./UiProvider.js";
+function T(d, r, s) {
+  return s > 0 ? ((Math.max(0, d) + r) % s + s) % s : 0;
+}
+function oe({ value: d, options: r, onChange: s, label: E, grow: j, className: P, disabled: $ }) {
+  const a = _(), c = q(), [n, g] = D(!1), [o, H] = D(null), [h, v] = D(0), y = M(null), p = M(null), l = r.findIndex((e) => e.value === d);
+  O(() => {
+    const e = p.current, t = y.current;
+    if (!n || !e || !t || o) return;
+    const i = Array.from(e.children), u = i.reduce((w, k) => Math.max(w, k.offsetWidth), 0), W = c.viewport(), A = B(
+      i.map((w, k) => String(k)),
+      (w) => i[Number(w)]?.offsetWidth ?? 0,
+      { padding: e.offsetWidth - u, min: Math.round(t.offsetWidth), max: W.width - 2 * c.margin }
+    ), m = t.getBoundingClientRect(), I = V({ x: m.left, y: m.top, width: m.width, height: m.height }, { width: A, height: e.offsetHeight }, W, 2, c.margin);
+    H({ ...I, width: A });
+  }, [n, o, c]), R(() => {
+    const e = p.current, t = e?.children[h];
+    e && t && (e.scrollTop = F(e.scrollTop, t.offsetTop, t.offsetHeight, e.clientHeight, e.scrollHeight));
+  }, [h, o]), R(() => {
+    if (!n) return;
+    const e = (i) => {
+      const u = i.target;
+      !y.current?.contains(u) && !p.current?.contains(u) && g(!1);
+    }, t = () => g(!1);
+    return document.addEventListener("pointerdown", e, !0), window.addEventListener("resize", t), () => {
+      document.removeEventListener("pointerdown", e, !0), window.removeEventListener("resize", t);
+    };
+  }, [n]);
+  const x = (e) => {
+    H(null), g(e);
+  }, b = (e) => {
+    const t = r[e];
+    x(!1), t && t.value !== d && s(t.value);
+  }, L = () => {
+    $ || (v(Math.max(0, l)), x(!n));
+  }, z = (e) => {
+    if (e.stopPropagation(), e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const t = e.key === "ArrowDown" ? 1 : -1;
+      n ? v((i) => T(i, t, r.length)) : b(T(l, t, r.length));
+    } else e.key === "Enter" || e.key === " " ? (e.preventDefault(), n ? b(h) : L()) : e.key === "Escape" && n && (e.preventDefault(), x(!1));
+  }, N = c.portal(), S = /* @__PURE__ */ f(
+    "div",
+    {
+      ref: p,
+      className: a(`e1681-select-list e1681-tip-frame${o ? "" : " measuring"}`),
+      role: "listbox",
+      "aria-label": E,
+      style: o ? { left: o.x, top: o.y, width: o.width, maxHeight: o.height } : { left: 0, top: 0, visibility: "hidden" },
+      onPointerDown: (e) => e.preventDefault(),
+      children: r.map((e, t) => /* @__PURE__ */ f(
+        "div",
+        {
+          role: "option",
+          "aria-selected": t === l,
+          className: a(`e1681-select-option${t === l ? " picked" : ""}${t === h ? " hot" : ""}`),
+          onPointerEnter: () => v(t),
+          onClick: () => b(t),
+          children: e.label
+        },
+        String(e.value)
+      ))
+    }
+  );
+  return /* @__PURE__ */ C(K, { children: [
+    /* @__PURE__ */ C(
+      "button",
+      {
+        ref: y,
+        type: "button",
+        className: a(`e1681-select${n ? " open" : ""}${j ? " grow" : ""}${P ? ` ${P}` : ""}`),
+        "aria-label": E,
+        "aria-haspopup": "listbox",
+        "aria-expanded": n,
+        disabled: $,
+        onPointerDown: (e) => e.preventDefault(),
+        onClick: L,
+        onKeyDown: z,
+        children: [
+          /* @__PURE__ */ f("span", { className: a("e1681-select-labels"), children: r.map((e, t) => /* @__PURE__ */ f("span", { className: a(t === l ? "shown" : void 0), "aria-hidden": t !== l, children: e.label }, String(e.value))) }),
+          /* @__PURE__ */ f(G, { id: n ? "up" : "down" })
+        ]
+      }
+    ),
+    n && (N ? U(S, N) : S)
+  ] });
+}
+export {
+  oe as Select,
+  T as stepOption
+};

package/dist/react/Slider.js

@@ -0,0 +1,61 @@
+import { jsxs as g, jsx as d } from "react/jsx-runtime";
+import { useRef as A } from "react";
+import { quantize as N, sliderFraction as $, sliderValueAt as k } from "../ui/layout/slider.js";
+import { useCx as x } from "./UiProvider.js";
+const C = (o) => `${Math.round(o * 100)}%`;
+function I(o, e, l, n, t) {
+  const s = {
+    ArrowLeft: e - t,
+    ArrowDown: e - t,
+    ArrowRight: e + t,
+    ArrowUp: e + t,
+    PageDown: e - t * 4,
+    PageUp: e + t * 4,
+    Home: l,
+    End: n
+  }[o];
+  return s === void 0 ? void 0 : N(s, l, n, t);
+}
+function M({ value: o, onChange: e, label: l, min: n = 0, max: t = 1, step: f = 0.05, format: s = C, hideValue: v, disabled: a, className: u }) {
+  const c = x(), w = A(null), p = (r) => {
+    r !== o && e(r);
+  }, h = (r) => {
+    const i = w.current?.getBoundingClientRect();
+    i && i.width > 0 && p(k(r, i.left, i.width, n, t, f));
+  }, P = (r) => {
+    a || r.button !== 0 || (r.currentTarget.setPointerCapture(r.pointerId), r.currentTarget.focus(), h(r.clientX), r.preventDefault());
+  }, D = (r) => {
+    !a && r.currentTarget.hasPointerCapture(r.pointerId) && h(r.clientX);
+  }, y = (r) => {
+    const i = a ? void 0 : I(r.key, o, n, t, f);
+    i !== void 0 && (r.preventDefault(), r.stopPropagation(), p(i));
+  }, m = $(o, n, t) * 100;
+  return /* @__PURE__ */ g("div", { className: c(`e1681-slider-row${u ? ` ${u}` : ""}`), children: [
+    /* @__PURE__ */ d(
+      "div",
+      {
+        className: c("e1681-slider"),
+        role: "slider",
+        tabIndex: a ? -1 : 0,
+        "aria-label": l,
+        "aria-valuemin": n,
+        "aria-valuemax": t,
+        "aria-valuenow": o,
+        "aria-valuetext": s(o),
+        "aria-disabled": a || void 0,
+        onPointerDown: P,
+        onPointerMove: D,
+        onKeyDown: y,
+        children: /* @__PURE__ */ g("div", { className: c("e1681-slider-track"), ref: w, children: [
+          /* @__PURE__ */ d("div", { className: c("e1681-slider-fill"), style: { width: `${m}%` } }),
+          /* @__PURE__ */ d("div", { className: c("e1681-slider-knob"), style: { left: `${m}%` } })
+        ] })
+      }
+    ),
+    !v && /* @__PURE__ */ d("span", { className: c("e1681-slider-value"), children: s(o) })
+  ] });
+}
+export {
+  M as Slider,
+  I as sliderKeyValue
+};

package/dist/react/SplitPane.js

@@ -0,0 +1,23 @@
+import { jsxs as n, jsx as i } from "react/jsx-runtime";
+import { useState as v, useRef as C } from "react";
+import { splitModeFor as N, SPLIT_STACK_BELOW as $ } from "./placement.js";
+import { useFillSheet as y } from "./useFillSheet.js";
+import { useCx as L, useUi as T } from "./UiProvider.js";
+import { useViewport as j } from "./useViewport.js";
+function E({ list: p, detail: m, empty: u, listWidth: o, fit: l, stackBelow: d = $, pickSelector: h = ".e1681-pickable", backLabel: f, className: c }) {
+  const t = L(), e = T(), k = j(e.touch).width, s = N(k, e.touch, d) === "stack", [b, a] = v(!1), r = C(null);
+  y(r, e.touch, !!l);
+  const w = o && !s ? { "--e1681-split-list": o } : void 0, x = (S) => {
+    s && S.target.closest(h) && a(!0);
+  };
+  return /* @__PURE__ */ n("div", { ref: r, className: t(`e1681-split${l ? " fit" : ""}${s ? b ? " stack show-detail" : " stack show-list" : ""}${c ? ` ${c}` : ""}`), style: w, children: [
+    /* @__PURE__ */ i("div", { className: t("e1681-split-list"), onClickCapture: x, children: p }),
+    /* @__PURE__ */ n("div", { className: t("e1681-split-detail"), children: [
+      s && /* @__PURE__ */ i("button", { type: "button", className: t("e1681-button small e1681-split-back"), onClick: () => a(!1), children: f ?? e.labels.backToList }),
+      m || /* @__PURE__ */ i("div", { className: t("e1681-split-empty"), children: u ?? e.labels.pickHint })
+    ] })
+  ] });
+}
+export {
+  E as SplitPane
+};

package/dist/react/TabStrip.js

@@ -0,0 +1,31 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useCx as f } from "./UiProvider.js";
+function y({ tabs: s, value: o, onChange: l, small: t, wrap: d, className: n, label: c, onPointerDown: b }) {
+  const r = f(), m = ["e1681-tabs", t ? "small" : "", d ? "wrap" : "", n ?? ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ a("div", { className: r(m), role: "tablist", "aria-label": c, children: s.map((i) => {
+    const p = i.color ? { color: i.color } : void 0;
+    return /* @__PURE__ */ a(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": i.id === o,
+        className: r(i.id === o ? "e1681-tab active" : "e1681-tab"),
+        style: p,
+        disabled: i.disabled,
+        title: i.title,
+        onPointerDown: (e) => {
+          b?.(e), e.pointerType === "mouse" && e.button === 0 && !i.disabled && i.id !== o && l(i.id);
+        },
+        onClick: () => {
+          i.id !== o && l(i.id);
+        },
+        children: i.label
+      },
+      i.id
+    );
+  }) });
+}
+export {
+  y as TabStrip
+};