1681-engine 0.0.0-stage → 0.5.9

package/dist/react/TitleTips.js

@@ -0,0 +1,41 @@
+import { jsx as L } from "react/jsx-runtime";
+import { useState as b, useEffect as y } from "react";
+import { Tooltip as A } from "./Tooltip.js";
+import { useCx as g, useUi as C } from "./UiProvider.js";
+function S({ delayMs: d = 350, root: m, className: f }) {
+  const T = g(), p = C(), [s, i] = b(null);
+  return y(() => {
+    if (p.touch || typeof document > "u") return;
+    let t = null, n = "", c = 0, u = !1, l = { x: 0, y: 0 };
+    const h = () => m?.() ?? document.documentElement, v = () => {
+      if (!t) return;
+      const e = t.getAttribute("title");
+      e !== null && (t.removeAttribute("title"), n = e, u && i(n ? { text: n, ...l } : null));
+    }, o = () => {
+      window.clearTimeout(c), t && t.isConnected && !t.hasAttribute("title") && n && t.setAttribute("title", n), t = null, n = "", u = !1, i(null);
+    }, a = (e) => {
+      if (e.pointerType === "touch") return;
+      const r = e.target?.closest?.("[title]");
+      !r || r === t || !h().contains(r) || (o(), t = r, l = { x: e.clientX, y: e.clientY }, v(), n && (c = window.setTimeout(() => {
+        u = !0, i({ text: n, ...l });
+      }, d)));
+    }, w = (e) => {
+      if (t) {
+        if (!t.isConnected) return o();
+        l = { x: e.clientX, y: e.clientY }, v(), u && i(n ? { text: n, ...l } : null);
+      }
+    }, x = (e) => {
+      if (!t) return;
+      const r = e.relatedTarget;
+      r && t.contains(r) || o();
+    }, E = () => {
+      window.clearTimeout(c), u = !1, i(null);
+    };
+    return document.addEventListener("pointerover", a, !0), document.addEventListener("pointermove", w, !0), document.addEventListener("pointerout", x, !0), document.addEventListener("pointerdown", E, !0), window.addEventListener("blur", o), () => {
+      document.removeEventListener("pointerover", a, !0), document.removeEventListener("pointermove", w, !0), document.removeEventListener("pointerout", x, !0), document.removeEventListener("pointerdown", E, !0), window.removeEventListener("blur", o), o();
+    };
+  }, [p.touch, d, m]), s ? /* @__PURE__ */ L(A, { x: s.x, y: s.y, ...f ? { className: f } : {}, children: /* @__PURE__ */ L("div", { className: T("e1681-title-tip"), children: s.text }) }) : null;
+}
+export {
+  S as TitleTips
+};

package/dist/react/Tooltip.js

@@ -0,0 +1,27 @@
+import { jsx as w } from "react/jsx-runtime";
+import { useRef as x, useState as b, useLayoutEffect as y } from "react";
+import { createPortal as H } from "react-dom";
+import { placeTooltip as T } from "../ui/layout/placeTooltip.js";
+import { cursorTip as z } from "./placement.js";
+import { useCx as S, useUi as W } from "./UiProvider.js";
+function P({ x: c = 0, y: l = 0, anchor: r, above: s, side: n, className: a, children: g }) {
+  const u = S(), t = W(), f = x(null), [i, d] = b({ width: 0, height: 0 });
+  y(() => {
+    const o = f.current;
+    o && (o.offsetWidth !== i.width || o.offsetHeight !== i.height) && d({ width: o.offsetWidth, height: o.offsetHeight });
+  });
+  const e = t.viewport(), p = r ? T(r, i, e, { side: n ?? (s ? "above" : "below"), margin: t.margin, snap: t.snap }) : z(c, l, i, e, { above: s ?? n === "above", margin: t.margin, snap: t.snap }), m = t.portal(), v = i.width > 0, h = /* @__PURE__ */ w(
+    "div",
+    {
+      ref: f,
+      className: u(`e1681-tooltip e1681-tip-frame${a ? ` ${a}` : ""}`),
+      role: "tooltip",
+      style: { left: p.x, top: p.y, maxHeight: Math.max(0, e.height - 2 * t.margin), visibility: v ? void 0 : "hidden" },
+      children: g
+    }
+  );
+  return m ? H(h, m) : h;
+}
+export {
+  P as Tooltip
+};

package/dist/react/UiProvider.js

@@ -0,0 +1,49 @@
+import { jsx as v } from "react/jsx-runtime";
+import { useContext as S, useMemo as C, createContext as y } from "react";
+import { isTouchUi as L } from "../platform/touch.js";
+import { classJoiner as b } from "./classNames.js";
+import { DEFAULT_LABELS as N } from "./labels.js";
+const w = {};
+function A() {
+  return typeof window > "u" ? { width: 0, height: 0 } : { width: window.innerWidth, height: window.innerHeight };
+}
+function E() {
+  return typeof document > "u" ? null : document.body;
+}
+function g() {
+  return { touch: L(), scale: 1, minScale: 1, sheetScale: 1, margin: 8, snap: !0, labels: N, viewport: A, portal: E, classNames: w, cx: b(w) };
+}
+const r = y(null);
+function z({ children: t, labels: n, touch: s, scale: c, minScale: u, sheetScale: a, margin: l, snap: m, viewport: d, portal: f, classNames: o }) {
+  const h = S(r), U = C(() => {
+    const e = h ?? g(), p = c ?? e.scale, i = o ? { ...e.classNames, ...o } : e.classNames;
+    return {
+      touch: s ?? e.touch,
+      scale: p,
+      minScale: u ?? Math.min(e.minScale, p),
+      sheetScale: a ?? e.sheetScale,
+      margin: l ?? e.margin,
+      snap: m ?? e.snap,
+      labels: n ? { ...e.labels, ...n } : e.labels,
+      viewport: d ?? e.viewport,
+      portal: f ?? e.portal,
+      classNames: i,
+      cx: i === e.classNames ? e.cx : b(i)
+    };
+  }, [h, n, s, c, u, a, l, m, d, f, o]);
+  return /* @__PURE__ */ v(r.Provider, { value: U, children: t });
+}
+let x = null;
+function M() {
+  const t = S(r);
+  return t || (x ??= g(), x);
+}
+function B() {
+  return M().cx;
+}
+export {
+  z as UiProvider,
+  g as defaultUiSettings,
+  B as useCx,
+  M as useUi
+};

package/dist/react/baseCss.js

@@ -0,0 +1,221 @@
+const o = `
+:root {
+  --e1681-font: inherit;
+  --e1681-font-size: 16px;
+  --e1681-text: #ece6d6;
+  --e1681-muted: #9c968a;
+  --e1681-accent: #e8c060;
+  --e1681-bg: #1d242e;
+  --e1681-well: #131a24;
+  --e1681-control-bg: #2a323e;
+  --e1681-border: #6a5634;
+  --e1681-border-width: 2px;
+  --e1681-backdrop: rgba(0, 0, 0, 0.5);
+  --e1681-frame: none;
+  --e1681-frame-slice: 0;
+  --e1681-frame-width: var(--e1681-border-width);
+  --e1681-tip-frame: var(--e1681-frame);
+  --e1681-tip-frame-slice: var(--e1681-frame-slice);
+  --e1681-tip-frame-width: var(--e1681-frame-width);
+  --e1681-control-frame: none;
+  --e1681-control-frame-slice: 0;
+  --e1681-control-frame-width: var(--e1681-border-width);
+  --e1681-tab-frame: var(--e1681-control-frame);
+  --e1681-tab-active-frame: var(--e1681-tab-frame);
+  --e1681-tab-frame-slice: var(--e1681-control-frame-slice);
+  --e1681-tab-frame-width: var(--e1681-control-frame-width);
+  --e1681-well-frame: none;
+  --e1681-well-frame-slice: 0;
+  --e1681-well-frame-width: var(--e1681-border-width);
+}
+
+.e1681-frame {
+  color: var(--e1681-text);
+  font-family: var(--e1681-font);
+  font-size: var(--e1681-font-size);
+  background: var(--e1681-bg) padding-box;
+  border-style: solid; border-color: var(--e1681-border); border-width: var(--e1681-frame-width);
+  border-image: var(--e1681-frame) var(--e1681-frame-slice) / var(--e1681-frame-width) stretch;
+  box-sizing: border-box;
+}
+.e1681-tip-frame {
+  color: var(--e1681-text);
+  font-family: var(--e1681-font);
+  font-size: var(--e1681-font-size);
+  background: var(--e1681-bg) padding-box;
+  border-style: solid; border-color: var(--e1681-border); border-width: var(--e1681-tip-frame-width);
+  border-image: var(--e1681-tip-frame) var(--e1681-tip-frame-slice) / var(--e1681-tip-frame-width) stretch;
+  box-sizing: border-box;
+}
+
+/* windows: placed by useFitToViewport in whole pixels; header kept, body scrolls */
+.e1681-panel {
+  position: fixed;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+  pointer-events: auto;
+}
+.e1681-panel-header { display: flex; align-items: center; gap: 8px; flex: none; padding: 2px 4px 6px; }
+.e1681-panel-title { flex: 1; min-width: 0; margin: 0; font-size: 1.25em; font-weight: normal; color: var(--e1681-accent); }
+.e1681-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 4px 4px; }
+.e1681-panel-footer { flex: none; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; padding: 6px 4px 0; }
+.e1681-close {
+  flex: none; padding: 2px; border: 0; background: none; color: var(--e1681-text); cursor: pointer; line-height: 0;
+}
+.e1681-close:hover { color: var(--e1681-accent); }
+/* a touch screen's sheet: the whole screen inside the safe area */
+.e1681-panel.e1681-sheet {
+  inset: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
+  width: auto;
+  height: auto;
+}
+.e1681-panel.e1681-sheet .e1681-panel-body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
+
+/* controls */
+.e1681-button, .e1681-input, .e1681-select {
+  color: var(--e1681-text);
+  font: inherit;
+  background: var(--e1681-control-bg) padding-box;
+  border-style: solid; border-color: var(--e1681-border); border-width: var(--e1681-control-frame-width);
+  border-image: var(--e1681-control-frame) var(--e1681-control-frame-slice) / var(--e1681-control-frame-width) stretch;
+  box-shadow: none;
+}
+.e1681-button { padding: 2px 10px; cursor: pointer; min-height: 28px; }
+.e1681-button.small { padding: 0 6px; min-height: 22px; }
+.e1681-button.ghost { background-color: transparent; }
+.e1681-button:hover:not(:disabled) { color: var(--e1681-accent); }
+/* pressed: the same face a pixel lower, never a transform */
+.e1681-button:active:not(:disabled) { padding-top: 3px; padding-bottom: 1px; }
+.e1681-button:disabled { opacity: 0.55; cursor: default; }
+.e1681-input { padding: 2px 6px; min-width: 0; }
+.e1681-glyph { display: inline-block; flex: none; vertical-align: -1px; }
+
+/* tabs: a row that scrolls sideways, or wraps with .wrap */
+.e1681-tabs { display: flex; gap: 2px; align-items: flex-end; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin-bottom: 8px; }
+.e1681-tabs::-webkit-scrollbar { display: none; }
+.e1681-tabs.wrap { flex-wrap: wrap; overflow-x: visible; row-gap: 4px; }
+.e1681-tab {
+  flex: 0 0 auto;
+  padding: 2px 10px;
+  color: var(--e1681-muted);
+  font: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+  background: var(--e1681-control-bg) padding-box;
+  border-style: solid; border-color: var(--e1681-border); border-width: var(--e1681-tab-frame-width);
+  border-image: var(--e1681-tab-frame) var(--e1681-tab-frame-slice) / var(--e1681-tab-frame-width) stretch;
+}
+.e1681-tab:hover:not(.active):not(:disabled) { color: var(--e1681-text); }
+.e1681-tab.active { color: var(--e1681-accent); padding-bottom: 6px; border-image-source: var(--e1681-tab-active-frame); }
+.e1681-tab:disabled { opacity: 0.55; cursor: default; }
+.e1681-tab:focus-visible { outline: 2px solid var(--e1681-accent); outline-offset: -4px; }
+.e1681-tabs.small { margin-bottom: 4px; }
+.e1681-tabs.small .e1681-tab { padding: 0 6px; }
+.e1681-tabs.small .e1681-tab.active { padding-bottom: 4px; }
+
+/* list beside detail */
+.e1681-split {
+  display: grid;
+  grid-template-columns: var(--e1681-split-list, minmax(0, 1fr)) minmax(0, 1fr);
+  gap: 12px;
+  height: min(58vh, 620px);
+}
+.e1681-split.fit { height: auto; max-height: min(58vh, 620px); }
+.e1681-split-list, .e1681-split-detail { min-height: 0; overflow-y: auto; overflow-x: hidden; }
+.e1681-split-list { padding-right: 4px; }
+.e1681-split-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px 10px;
+  background: var(--e1681-well) padding-box;
+  border-style: solid; border-color: var(--e1681-border); border-width: var(--e1681-well-frame-width);
+  border-image: var(--e1681-well-frame) var(--e1681-well-frame-slice) / var(--e1681-well-frame-width) stretch;
+}
+.e1681-split-empty { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--e1681-muted); }
+.e1681-split.stack { grid-template-columns: minmax(0, 1fr); }
+.e1681-split.stack.show-list .e1681-split-detail, .e1681-split.stack.show-detail .e1681-split-list { display: none; }
+.e1681-split-back { align-self: flex-start; }
+.e1681-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; margin-bottom: 4px; border: var(--e1681-border-width) solid transparent; }
+.e1681-pickable { cursor: pointer; }
+.e1681-pickable:hover:not(.picked):not(.disabled) { border-color: var(--e1681-border); }
+.e1681-row.picked { border-color: var(--e1681-accent); color: var(--e1681-accent); }
+.e1681-row.disabled { opacity: 0.55; cursor: default; }
+
+/* the select: as wide as its longest label */
+.e1681-select { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 1px 4px; text-align: left; cursor: pointer; }
+.e1681-select:hover:not(:disabled), .e1681-select.open { color: var(--e1681-accent); }
+.e1681-select:disabled { opacity: 0.6; cursor: default; }
+.e1681-select.grow { flex: 1 1 auto; min-width: 0; }
+.e1681-select.grow .e1681-select-labels { flex: 1 1 auto; min-width: 0; overflow: hidden; }
+.e1681-select.grow .e1681-select-labels > span { overflow: hidden; text-overflow: ellipsis; }
+.e1681-select-labels { display: grid; white-space: nowrap; }
+.e1681-select-labels > span { grid-area: 1 / 1; visibility: hidden; }
+.e1681-select-labels > span.shown { visibility: visible; }
+.e1681-select-list {
+  position: fixed;
+  z-index: 10000;
+  box-sizing: border-box;
+  width: max-content;
+  padding: 2px;
+  overflow-y: auto;
+  pointer-events: auto;
+}
+.e1681-select-option { padding: 2px 6px; white-space: nowrap; cursor: pointer; }
+.e1681-select-list.measuring .e1681-select-option { width: max-content; }
+.e1681-select-option.hot { background: var(--e1681-control-bg); }
+.e1681-select-option.picked { color: var(--e1681-accent); }
+
+/* tooltips */
+.e1681-tooltip { position: fixed; z-index: 10001; max-width: 360px; padding: 4px 8px; overflow: hidden; pointer-events: none; }
+.e1681-title-tip { white-space: pre-line; }
+
+/* slider: a square knob, flat fills */
+.e1681-slider-row { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
+.e1681-slider { flex: 1; min-width: 0; padding: 6px 7px; cursor: pointer; touch-action: none; user-select: none; pointer-events: auto; }
+.e1681-slider:focus { outline: none; }
+.e1681-slider:focus-visible { outline: 2px solid var(--e1681-accent); outline-offset: 2px; }
+.e1681-slider[aria-disabled='true'] { opacity: 0.55; cursor: default; }
+.e1681-slider-track {
+  position: relative;
+  height: 6px;
+  background: var(--e1681-well) padding-box;
+  border-style: solid; border-color: var(--e1681-border); border-width: var(--e1681-well-frame-width);
+  border-image: var(--e1681-well-frame) var(--e1681-well-frame-slice) / var(--e1681-well-frame-width) stretch;
+}
+.e1681-slider-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--e1681-accent); }
+/* the knob is offset by half its own whole-pixel width with a margin, so it stays on the pixel grid */
+.e1681-slider-knob { position: absolute; top: -6px; width: 10px; height: 14px; margin-left: -5px; background: var(--e1681-text); border: 2px solid var(--e1681-well); box-sizing: border-box; }
+.e1681-slider-value { min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
+
+/* dialogs */
+.e1681-backdrop { position: fixed; inset: 0; z-index: 9000; background: var(--e1681-backdrop); pointer-events: auto; }
+.e1681-dialog { position: fixed; display: flex; flex-direction: column; overflow: hidden; padding: 8px 10px; }
+.e1681-dialog-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
+.e1681-dialog-actions { flex: none; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding-top: 10px; }
+.e1681-confirm-text { white-space: pre-line; }
+.e1681-confirm-qty { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
+.e1681-confirm-qty-input { width: 56px; text-align: right; }
+.e1681-choice-list { margin-top: 8px; }
+.e1681-choice-icon { flex: none; line-height: 0; }
+.e1681-choice-label { flex: 1; min-width: 0; }
+.e1681-choice-note { flex: none; margin-left: auto; color: var(--e1681-muted); }
+
+/* sprites at whole multiples */
+.e1681-pixel-image { display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
+.e1681-pixel-image > img { image-rendering: pixelated; flex: none; }
+`, i = "e1681-react-base";
+function a(e = typeof document > "u" ? void 0 : document) {
+  if (!e) return null;
+  const r = e.getElementById(i);
+  if (r) return r;
+  const t = e.createElement("style");
+  return t.id = i, t.textContent = o, e.head.insertBefore(t, e.head.firstChild), t;
+}
+export {
+  o as baseCss,
+  a as injectBaseCss
+};

package/dist/react/choiceStore.js

@@ -0,0 +1,22 @@
+import { createStore as o } from "../ui/dom/createStore.js";
+const t = o({ pending: null });
+function u(e, n, i = {}) {
+  return t.getState().pending?.resolve(null), new Promise((r) => t.setState({ pending: { text: e, options: n, resolve: r, ...i } }));
+}
+function c(e) {
+  const n = t.getState().pending;
+  t.setState({ pending: null }), n?.resolve(e);
+}
+function s() {
+  return t.getState().pending ? (c(null), !0) : !1;
+}
+function a(e) {
+  return e.find((n) => !n.disabled)?.id ?? null;
+}
+export {
+  c as answerChoice,
+  u as askChoice,
+  s as cancelChoice,
+  t as choiceStore,
+  a as firstChoice
+};

package/dist/react/classNames.js

@@ -0,0 +1,18 @@
+const c = "e1681-";
+function f(o) {
+  const s = Object.keys(o).length > 0;
+  return (...r) => {
+    const n = [];
+    for (const e of r)
+      if (e)
+        for (const t of e.split(" ")) {
+          if (!t || (n.push(t), !s)) continue;
+          const i = o[t.startsWith(c) ? t.slice(c.length) : t];
+          i && n.push(i);
+        }
+    return n.join(" ");
+  };
+}
+export {
+  f as classJoiner
+};

package/dist/react/confirmStore.js

@@ -0,0 +1,29 @@
+import { createStore as i } from "../ui/dom/createStore.js";
+const r = i({ pending: null });
+function o(n, t, e) {
+  return r.getState().pending?.resolve(0), new Promise((a) => r.setState({ pending: { text: n, max: t, resolve: a, ...e } }));
+}
+function c(n, t = {}) {
+  return o(n, 0, t).then((e) => e > 0);
+}
+function s(n, t, e = {}) {
+  return o(n, Math.max(1, Math.floor(t)), e);
+}
+function u(n) {
+  const t = r.getState().pending;
+  r.setState({ pending: null }), t?.resolve(n);
+}
+function g() {
+  return r.getState().pending ? (u(0), !0) : !1;
+}
+function l(n, t) {
+  return Math.max(1, Math.min(t, Math.floor(Number(n.replace(/[^0-9]/g, "")) || 1)));
+}
+export {
+  u as answerConfirm,
+  c as askConfirm,
+  s as askQuantity,
+  g as cancelConfirm,
+  r as confirmStore,
+  l as parseQuantity
+};

package/dist/react/labels.js

@@ -0,0 +1,17 @@
+const n = {
+  close: "Close {0}",
+  closeHint: "Close (Esc)",
+  backToList: "‹ List",
+  pickHint: "Pick an entry on the left.",
+  cancel: "Cancel",
+  ok: "OK",
+  quantity: "Quantity",
+  choose: "Choose"
+};
+function l(e, ...t) {
+  return e.replace(/\{(\d+)\}/g, (o, c) => t[Number(c)] ?? o);
+}
+export {
+  n as DEFAULT_LABELS,
+  l as fillLabel
+};

package/dist/react/placement.js

@@ -0,0 +1,48 @@
+import { fitToViewport as f } from "../ui/layout/fitToViewport.js";
+import { placeTooltip as c } from "../ui/layout/placeTooltip.js";
+function m(t, n, r = {}) {
+  const e = f(t, n, { snap: !0, ...r, centre: r.centre ?? !("x" in t) }), i = {
+    left: e.x,
+    top: e.y,
+    maxWidth: e.width,
+    maxHeight: e.height,
+    transform: e.scale === 1 ? void 0 : `scale(${e.scale})`,
+    transformOrigin: e.scale === 1 ? void 0 : "0 0"
+  };
+  return { fit: e, style: i };
+}
+function g(t) {
+  if (!(t === 1 || !(t > 0)))
+    return { width: `${100 / t}%`, height: `${100 / t}%`, transform: `scale(${t})`, transformOrigin: "0 0" };
+}
+function x(t, n, r, e, i = {}) {
+  const o = { x: t + (i.offsetX ?? 18), y: n, width: 0, height: 0 };
+  return c(o, r, e, {
+    side: i.above ? "above" : "below",
+    gap: i.gap ?? 12,
+    margin: i.margin ?? 8,
+    snap: i.snap ?? !0
+  });
+}
+function w(t, n, r, e = 2, i = 4) {
+  const o = r.height - i - (t.y + t.height + e), h = t.y - e - i, s = Math.max(0, Math.min(n.height, Math.max(o, h))), a = c(t, { width: n.width, height: s }, r, { side: "below", gap: e, margin: i, snap: !0 });
+  return { x: a.x, y: a.y, height: Math.floor(s), side: a.side === "above" ? "above" : "below" };
+}
+function M(t, n, r, e, i = 1 / 0) {
+  if (!(t > 0) || !(n > 0)) return { width: 0, height: 0, scale: 1 };
+  const o = Math.min(r / t, e / n, i), h = o >= 1 ? Math.floor(o) : 1 / Math.ceil(1 / o);
+  return { width: Math.round(t * h), height: Math.round(n * h), scale: h };
+}
+const l = 600;
+function b(t, n, r = l) {
+  return n && t < r ? "stack" : "side";
+}
+export {
+  l as SPLIT_STACK_BELOW,
+  x as cursorTip,
+  w as listPlacement,
+  M as pixelFit,
+  g as sheetScaleStyle,
+  b as splitModeFor,
+  m as windowStyle
+};

package/dist/react/useFillSheet.js

@@ -0,0 +1,22 @@
+import { useLayoutEffect as d, useEffect as u } from "react";
+const f = 180;
+function a(s, n, r) {
+  const o = () => {
+    const e = s.current, t = e?.closest(".e1681-panel-body");
+    if (!e || !t) return;
+    const c = e.getBoundingClientRect().top - t.getBoundingClientRect().top + t.scrollTop, l = Number.parseFloat(getComputedStyle(t).paddingBottom) || 0, i = `${Math.max(f, Math.floor(t.clientHeight - c - l))}px`;
+    r ? e.style.maxHeight = i : e.style.height = i;
+  };
+  d(() => {
+    n && o();
+  }), u(() => {
+    if (!n) return;
+    const e = s.current?.closest(".e1681-panel-body"), t = typeof ResizeObserver > "u" || !e ? null : new ResizeObserver(() => o());
+    return e && t?.observe(e), window.addEventListener("resize", o), () => {
+      t?.disconnect(), window.removeEventListener("resize", o);
+    };
+  }, [n, r]);
+}
+export {
+  a as useFillSheet
+};

package/dist/react/useFitToViewport.js

@@ -0,0 +1,28 @@
+import { useLayoutEffect as u, useEffect as x } from "react";
+import { windowStyle as w } from "./placement.js";
+import { useUi as y } from "./UiProvider.js";
+const p = "e1681-scroll";
+function b(m, c) {
+  const t = y(), { enabled: a, width: h } = c, l = c.at?.x, d = c.at?.y, i = () => {
+    const e = m.current;
+    if (!e || !a) return;
+    const r = e.querySelector(`.${p}`), s = r ? r.scrollHeight - r.clientHeight : 0, f = {
+      width: h ?? Math.max(e.offsetWidth, e.scrollWidth),
+      height: e.offsetHeight + Math.max(0, s),
+      ...l !== void 0 && d !== void 0 ? { x: l, y: d } : {}
+    }, { style: o } = w(f, t.viewport(), { scale: t.scale, minScale: t.minScale, margin: t.margin, snap: t.snap }), n = e.style;
+    n.left = `${o.left}px`, n.top = `${o.top}px`, n.maxWidth = `${o.maxWidth}px`, n.maxHeight = `${o.maxHeight}px`, n.transform = o.transform ?? "", n.transformOrigin = o.transformOrigin ?? "";
+  };
+  u(i), x(() => {
+    if (!a) return;
+    const r = m.current?.querySelector(`.${p}`), s = typeof ResizeObserver > "u" ? null : new ResizeObserver(() => i());
+    for (const f of Array.from(r?.children ?? [])) s?.observe(f);
+    return window.addEventListener("resize", i), () => {
+      s?.disconnect(), window.removeEventListener("resize", i);
+    };
+  }, [a, h, l, d, t]);
+}
+export {
+  p as SCROLL_CLASS,
+  b as useFitToViewport
+};

package/dist/react/usePicked.js

@@ -0,0 +1,12 @@
+import { useState as l } from "react";
+function i(n, t, u = !0) {
+  const [e, o] = l(null);
+  return [c(n, t, e, u), o];
+}
+function c(n, t, u, e = !0) {
+  return (u === null ? void 0 : n.find((r) => t(r) === u)) ?? (e ? n[0] ?? null : null);
+}
+export {
+  c as pickedEntry,
+  i as usePicked
+};

package/dist/react/useStore.js

@@ -0,0 +1,8 @@
+import { useCallback as r, useSyncExternalStore as u } from "react";
+function S(t, e) {
+  const n = r(() => e ? e(t.getState()) : t.getState(), [t, e]);
+  return u(t.subscribe, n, n);
+}
+export {
+  S as useStore
+};

package/dist/react/useViewport.js

@@ -0,0 +1,16 @@
+import { useState as u, useEffect as w } from "react";
+import { useUi as d } from "./UiProvider.js";
+function p(n = !0) {
+  const e = d(), [o, s] = u(() => e.viewport());
+  return w(() => {
+    if (!n) return;
+    const t = () => {
+      const i = e.viewport();
+      s((r) => r.width === i.width && r.height === i.height ? r : i);
+    };
+    return t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
+  }, [n, e]), o;
+}
+export {
+  p as useViewport
+};

package/dist/react.js

@@ -0,0 +1,77 @@
+import { UiProvider as r, defaultUiSettings as t, useCx as i, useUi as p } from "./react/UiProvider.js";
+import { classJoiner as l } from "./react/classNames.js";
+import { DEFAULT_LABELS as m, fillLabel as a } from "./react/labels.js";
+import { baseCss as c, injectBaseCss as n } from "./react/baseCss.js";
+import { useStore as C } from "./react/useStore.js";
+import { useViewport as u } from "./react/useViewport.js";
+import { SCROLL_CLASS as d, useFitToViewport as L } from "./react/useFitToViewport.js";
+import { useFillSheet as P } from "./react/useFillSheet.js";
+import { SPLIT_STACK_BELOW as w, cursorTip as k, listPlacement as F, pixelFit as A, sheetScaleStyle as E, splitModeFor as U, windowStyle as _ } from "./react/placement.js";
+import { Panel as B } from "./react/Panel.js";
+import { TabStrip as G } from "./react/TabStrip.js";
+import { SplitPane as V } from "./react/SplitPane.js";
+import { pickedEntry as K, usePicked as M } from "./react/usePicked.js";
+import { Select as j, stepOption as v } from "./react/Select.js";
+import { Tooltip as R } from "./react/Tooltip.js";
+import { TitleTips as q } from "./react/TitleTips.js";
+import { Modal as H } from "./react/Modal.js";
+import { ConfirmDialog as X } from "./react/ConfirmDialog.js";
+import { answerConfirm as Z, askConfirm as $, askQuantity as ee, cancelConfirm as oe, confirmStore as re, parseQuantity as te } from "./react/confirmStore.js";
+import { ChoiceDialog as pe } from "./react/ChoiceDialog.js";
+import { answerChoice as le, askChoice as se, cancelChoice as me, choiceStore as ae, firstChoice as xe } from "./react/choiceStore.js";
+import { Slider as ne, sliderKeyValue as Se } from "./react/Slider.js";
+import { PixelImage as he } from "./react/PixelImage.js";
+import { Glyph as ye, glyphPath as de, hasGlyph as Le, registerGlyph as Te } from "./react/Glyph.js";
+export {
+  pe as ChoiceDialog,
+  X as ConfirmDialog,
+  m as DEFAULT_LABELS,
+  ye as Glyph,
+  H as Modal,
+  B as Panel,
+  he as PixelImage,
+  d as SCROLL_CLASS,
+  w as SPLIT_STACK_BELOW,
+  j as Select,
+  ne as Slider,
+  V as SplitPane,
+  G as TabStrip,
+  q as TitleTips,
+  R as Tooltip,
+  r as UiProvider,
+  le as answerChoice,
+  Z as answerConfirm,
+  se as askChoice,
+  $ as askConfirm,
+  ee as askQuantity,
+  c as baseCss,
+  me as cancelChoice,
+  oe as cancelConfirm,
+  ae as choiceStore,
+  l as classJoiner,
+  re as confirmStore,
+  k as cursorTip,
+  t as defaultUiSettings,
+  a as fillLabel,
+  xe as firstChoice,
+  de as glyphPath,
+  Le as hasGlyph,
+  n as injectBaseCss,
+  F as listPlacement,
+  te as parseQuantity,
+  K as pickedEntry,
+  A as pixelFit,
+  Te as registerGlyph,
+  E as sheetScaleStyle,
+  Se as sliderKeyValue,
+  U as splitModeFor,
+  v as stepOption,
+  i as useCx,
+  P as useFillSheet,
+  L as useFitToViewport,
+  M as usePicked,
+  C as useStore,
+  p as useUi,
+  u as useViewport,
+  _ as windowStyle
+};