1681-engine 0.0.0-stage → 0.5.8

package/dist/react/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../src/react/Select.tsx"],"sourcesContent":["import { type KeyboardEvent, type ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { listWidth } from '../ui/layout/listWidth';\nimport { scrollIntoView } from '../ui/layout/scroll';\nimport { Glyph } from './Glyph';\nimport { listPlacement, type ListPlacement } from './placement';\nimport { useUi, useCx } from './UiProvider';\n\nexport interface SelectOption<T extends string | number> {\n  value: T;\n  label: ReactNode;\n}\n\nexport interface SelectProps<T extends string | number> {\n  value: T;\n  options: readonly SelectOption<T>[];\n  onChange: (value: T) => void;\n  /** What it chooses, for a screen reader. */\n  label?: string;\n  /** Fills its row, cutting the label with an ellipsis instead of growing. */\n  grow?: boolean;\n  className?: string;\n  disabled?: boolean;\n}\n\n/** The next option along the list, wrapping round. */\nexport function stepOption(index: number, step: number, count: number): number {\n  return count > 0 ? (((Math.max(0, index) + step) % count) + count) % count : 0;\n}\n\n/**\n * A drop-down drawn by the theme instead of the browser's `<select>`, whose list is the OS's own widget and whose box\n * clips its text at a fixed width. The button is as wide as its longest label (every label stacked in one cell, the\n * picked one shown). The list opens in a portal, so no window's `overflow` cuts it: as wide as its longest label\n * (`listWidth`), under the button or over it when the screen ends below (`listPlacement`). A press never takes the\n * focus, so a text field beside it keeps its keyboard.\n */\nexport function Select<T extends string | number>({ value, options, onChange, label, grow, className, disabled }: SelectProps<T>) {\n  const cx = useCx();\n  const ui = useUi();\n  const [open, setOpen] = useState(false);\n  const [place, setPlace] = useState<(ListPlacement & { width: number }) | null>(null);\n  const [hot, setHot] = useState(0);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const picked = options.findIndex((o) => o.value === value);\n\n  // first rendered hidden at its natural size, then measured and placed\n  useLayoutEffect(() => {\n    const list = listRef.current;\n    const button = buttonRef.current;\n    if (!open || !list || !button || place) return;\n    const rows = Array.from(list.children) as HTMLElement[];\n    const widest = rows.reduce((w, r) => Math.max(w, r.offsetWidth), 0);\n    const view = ui.viewport();\n    const width = listWidth(\n      rows.map((_, i) => String(i)),\n      (i) => rows[Number(i)]?.offsetWidth ?? 0,\n      { padding: list.offsetWidth - widest, min: Math.round(button.offsetWidth), max: view.width - 2 * ui.margin },\n    );\n    const r = button.getBoundingClientRect();\n    const at = listPlacement({ x: r.left, y: r.top, width: r.width, height: r.height }, { width, height: list.offsetHeight }, view, 2, ui.margin);\n    setPlace({ ...at, width });\n  }, [open, place, ui]);\n\n  // the option moved to by the keyboard is scrolled into view, no further\n  useEffect(() => {\n    const list = listRef.current;\n    const row = list?.children[hot] as HTMLElement | undefined;\n    if (list && row) list.scrollTop = scrollIntoView(list.scrollTop, row.offsetTop, row.offsetHeight, list.clientHeight, list.scrollHeight);\n  }, [hot, place]);\n\n  useEffect(() => {\n    if (!open) return;\n    const away = (e: PointerEvent) => {\n      const t = e.target as Node;\n      if (!buttonRef.current?.contains(t) && !listRef.current?.contains(t)) setOpen(false);\n    };\n    const shut = () => setOpen(false);\n    document.addEventListener('pointerdown', away, true);\n    window.addEventListener('resize', shut);\n    return () => {\n      document.removeEventListener('pointerdown', away, true);\n      window.removeEventListener('resize', shut);\n    };\n  }, [open]);\n\n  const show = (on: boolean) => {\n    setPlace(null);\n    setOpen(on);\n  };\n  const choose = (i: number) => {\n    const o = options[i];\n    show(false);\n    if (o && o.value !== value) onChange(o.value);\n  };\n  const toggle = () => {\n    if (disabled) return;\n    setHot(Math.max(0, picked));\n    show(!open);\n  };\n  const onKey = (e: KeyboardEvent) => {\n    // the game's own keys never see what is pressed here\n    e.stopPropagation();\n    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n      e.preventDefault();\n      const step = e.key === 'ArrowDown' ? 1 : -1;\n      if (open) setHot((h) => stepOption(h, step, options.length));\n      else choose(stepOption(picked, step, options.length));\n    } else if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      if (open) choose(hot);\n      else toggle();\n    } else if (e.key === 'Escape' && open) {\n      e.preventDefault();\n      show(false);\n    }\n  };\n\n  const target = ui.portal();\n  const list = (\n    <div\n      ref={listRef}\n      className={cx(`e1681-select-list e1681-tip-frame${place ? '' : ' measuring'}`)}\n      role=\"listbox\"\n      aria-label={label}\n      style={place ? { left: place.x, top: place.y, width: place.width, maxHeight: place.height } : { left: 0, top: 0, visibility: 'hidden' }}\n      onPointerDown={(e) => e.preventDefault()}\n    >\n      {options.map((o, i) => (\n        <div\n          key={String(o.value)}\n          role=\"option\"\n          aria-selected={i === picked}\n          className={cx(`e1681-select-option${i === picked ? ' picked' : ''}${i === hot ? ' hot' : ''}`)}\n          onPointerEnter={() => setHot(i)}\n          onClick={() => choose(i)}\n        >\n          {o.label}\n        </div>\n      ))}\n    </div>\n  );\n  return (\n    <>\n      <button\n        ref={buttonRef}\n        type=\"button\"\n        className={cx(`e1681-select${open ? ' open' : ''}${grow ? ' grow' : ''}${className ? ` ${className}` : ''}`)}\n        aria-label={label}\n        aria-haspopup=\"listbox\"\n        aria-expanded={open}\n        disabled={disabled}\n        onPointerDown={(e) => e.preventDefault()}\n        onClick={toggle}\n        onKeyDown={onKey}\n      >\n        <span className={cx('e1681-select-labels')}>\n          {options.map((o, i) => (\n            <span key={String(o.value)} className={cx(i === picked ? 'shown' : undefined)} aria-hidden={i !== picked}>\n              {o.label}\n            </span>\n          ))}\n        </span>\n        <Glyph id={open ? 'up' : 'down'} />\n      </button>\n      {open && (target ? createPortal(list, target) : list)}\n    </>\n  );\n}\n"],"names":["stepOption","index","step","count","Select","value","options","onChange","label","grow","className","disabled","cx","useCx","ui","useUi","open","setOpen","useState","place","setPlace","hot","setHot","buttonRef","useRef","listRef","picked","o","useLayoutEffect","list","button","rows","widest","r","view","width","listWidth","_","i","at","listPlacement","useEffect","row","scrollIntoView","away","e","t","shut","show","on","choose","toggle","onKey","h","target","jsx","jsxs","Fragment","Glyph","createPortal"],"mappings":";;;;;;;;AA0BO,SAASA,EAAWC,GAAeC,GAAcC,GAAuB;AAC7E,SAAOA,IAAQ,MAAO,KAAK,IAAI,GAAGF,CAAK,IAAIC,KAAQC,IAASA,KAASA,IAAQ;AAC/E;AASO,SAASC,GAAkC,EAAE,OAAAC,GAAO,SAAAC,GAAS,UAAAC,GAAU,OAAAC,GAAO,MAAAC,GAAM,WAAAC,GAAW,UAAAC,KAA4B;AAChI,QAAMC,IAAKC,EAAA,GACLC,IAAKC,EAAA,GACL,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAChC,CAACC,GAAOC,CAAQ,IAAIF,EAAqD,IAAI,GAC7E,CAACG,GAAKC,CAAM,IAAIJ,EAAS,CAAC,GAC1BK,IAAYC,EAA0B,IAAI,GAC1CC,IAAUD,EAAuB,IAAI,GACrCE,IAASpB,EAAQ,UAAU,CAACqB,MAAMA,EAAE,UAAUtB,CAAK;AAGzD,EAAAuB,EAAgB,MAAM;AACpB,UAAMC,IAAOJ,EAAQ,SACfK,IAASP,EAAU;AACzB,QAAI,CAACP,KAAQ,CAACa,KAAQ,CAACC,KAAUX,EAAO;AACxC,UAAMY,IAAO,MAAM,KAAKF,EAAK,QAAQ,GAC/BG,IAASD,EAAK,OAAO,CAAC,GAAGE,MAAM,KAAK,IAAI,GAAGA,EAAE,WAAW,GAAG,CAAC,GAC5DC,IAAOpB,EAAG,SAAA,GACVqB,IAAQC;AAAA,MACZL,EAAK,IAAI,CAACM,GAAGC,MAAM,OAAOA,CAAC,CAAC;AAAA,MAC5B,CAACA,MAAMP,EAAK,OAAOO,CAAC,CAAC,GAAG,eAAe;AAAA,MACvC,EAAE,SAAST,EAAK,cAAcG,GAAQ,KAAK,KAAK,MAAMF,EAAO,WAAW,GAAG,KAAKI,EAAK,QAAQ,IAAIpB,EAAG,OAAA;AAAA,IAAO,GAEvGmB,IAAIH,EAAO,sBAAA,GACXS,IAAKC,EAAc,EAAE,GAAGP,EAAE,MAAM,GAAGA,EAAE,KAAK,OAAOA,EAAE,OAAO,QAAQA,EAAE,OAAA,GAAU,EAAE,OAAAE,GAAO,QAAQN,EAAK,aAAA,GAAgBK,GAAM,GAAGpB,EAAG,MAAM;AAC5I,IAAAM,EAAS,EAAE,GAAGmB,GAAI,OAAAJ,GAAO;AAAA,EAC3B,GAAG,CAACnB,GAAMG,GAAOL,CAAE,CAAC,GAGpB2B,EAAU,MAAM;AACd,UAAMZ,IAAOJ,EAAQ,SACfiB,IAAMb,GAAM,SAASR,CAAG;AAC9B,IAAIQ,KAAQa,MAAKb,EAAK,YAAYc,EAAed,EAAK,WAAWa,EAAI,WAAWA,EAAI,cAAcb,EAAK,cAAcA,EAAK,YAAY;AAAA,EACxI,GAAG,CAACR,GAAKF,CAAK,CAAC,GAEfsB,EAAU,MAAM;AACd,QAAI,CAACzB,EAAM;AACX,UAAM4B,IAAO,CAACC,MAAoB;AAChC,YAAMC,IAAID,EAAE;AACZ,MAAI,CAACtB,EAAU,SAAS,SAASuB,CAAC,KAAK,CAACrB,EAAQ,SAAS,SAASqB,CAAC,OAAW,EAAK;AAAA,IACrF,GACMC,IAAO,MAAM9B,EAAQ,EAAK;AAChC,oBAAS,iBAAiB,eAAe2B,GAAM,EAAI,GACnD,OAAO,iBAAiB,UAAUG,CAAI,GAC/B,MAAM;AACX,eAAS,oBAAoB,eAAeH,GAAM,EAAI,GACtD,OAAO,oBAAoB,UAAUG,CAAI;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC/B,CAAI,CAAC;AAET,QAAMgC,IAAO,CAACC,MAAgB;AAC5B,IAAA7B,EAAS,IAAI,GACbH,EAAQgC,CAAE;AAAA,EACZ,GACMC,IAAS,CAACZ,MAAc;AAC5B,UAAMX,IAAIrB,EAAQgC,CAAC;AACnB,IAAAU,EAAK,EAAK,GACNrB,KAAKA,EAAE,UAAUtB,KAAOE,EAASoB,EAAE,KAAK;AAAA,EAC9C,GACMwB,IAAS,MAAM;AACnB,IAAIxC,MACJW,EAAO,KAAK,IAAI,GAAGI,CAAM,CAAC,GAC1BsB,EAAK,CAAChC,CAAI;AAAA,EACZ,GACMoC,IAAQ,CAAC,MAAqB;AAGlC,QADA,EAAE,gBAAA,GACE,EAAE,QAAQ,eAAe,EAAE,QAAQ,WAAW;AAChD,QAAE,eAAA;AACF,YAAMlD,IAAO,EAAE,QAAQ,cAAc,IAAI;AACzC,MAAIc,MAAa,CAACqC,MAAMrD,EAAWqD,GAAGnD,GAAMI,EAAQ,MAAM,CAAC,MAC/CN,EAAW0B,GAAQxB,GAAMI,EAAQ,MAAM,CAAC;AAAA,IACtD,OAAW,EAAE,QAAQ,WAAW,EAAE,QAAQ,OACxC,EAAE,eAAA,GACEU,MAAaK,CAAG,IACf8B,EAAA,KACI,EAAE,QAAQ,YAAYnC,MAC/B,EAAE,eAAA,GACFgC,EAAK,EAAK;AAAA,EAEd,GAEMM,IAASxC,EAAG,OAAA,GACZe,IACJ,gBAAA0B;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK9B;AAAA,MACL,WAAWb,EAAG,oCAAoCO,IAAQ,KAAK,YAAY,EAAE;AAAA,MAC7E,MAAK;AAAA,MACL,cAAYX;AAAA,MACZ,OAAOW,IAAQ,EAAE,MAAMA,EAAM,GAAG,KAAKA,EAAM,GAAG,OAAOA,EAAM,OAAO,WAAWA,EAAM,WAAW,EAAE,MAAM,GAAG,KAAK,GAAG,YAAY,SAAA;AAAA,MAC7H,eAAe,CAAC,MAAM,EAAE,eAAA;AAAA,MAEvB,UAAAb,EAAQ,IAAI,CAACqB,GAAGW,MACf,gBAAAiB;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,MAAK;AAAA,UACL,iBAAejB,MAAMZ;AAAA,UACrB,WAAWd,EAAG,sBAAsB0B,MAAMZ,IAAS,YAAY,EAAE,GAAGY,MAAMjB,IAAM,SAAS,EAAE,EAAE;AAAA,UAC7F,gBAAgB,MAAMC,EAAOgB,CAAC;AAAA,UAC9B,SAAS,MAAMY,EAAOZ,CAAC;AAAA,UAEtB,UAAAX,EAAE;AAAA,QAAA;AAAA,QAPE,OAAOA,EAAE,KAAK;AAAA,MAAA,CAStB;AAAA,IAAA;AAAA,EAAA;AAGL,SACE,gBAAA6B,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKjC;AAAA,QACL,MAAK;AAAA,QACL,WAAWX,EAAG,eAAeI,IAAO,UAAU,EAAE,GAAGP,IAAO,UAAU,EAAE,GAAGC,IAAY,IAAIA,CAAS,KAAK,EAAE,EAAE;AAAA,QAC3G,cAAYF;AAAA,QACZ,iBAAc;AAAA,QACd,iBAAeQ;AAAA,QACf,UAAAL;AAAA,QACA,eAAe,CAAC,MAAM,EAAE,eAAA;AAAA,QACxB,SAASwC;AAAA,QACT,WAAWC;AAAA,QAEX,UAAA;AAAA,UAAA,gBAAAG,EAAC,QAAA,EAAK,WAAW3C,EAAG,qBAAqB,GACtC,UAAAN,EAAQ,IAAI,CAACqB,GAAGW,MACf,gBAAAiB,EAAC,QAAA,EAA2B,WAAW3C,EAAG0B,MAAMZ,IAAS,UAAU,MAAS,GAAG,eAAaY,MAAMZ,GAC/F,UAAAC,EAAE,MAAA,GADM,OAAOA,EAAE,KAAK,CAEzB,CACD,GACH;AAAA,UACA,gBAAA4B,EAACG,GAAA,EAAM,IAAI1C,IAAO,OAAO,OAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAElCA,MAASsC,IAASK,EAAa9B,GAAMyB,CAAM,IAAIzB;AAAA,EAAA,GAClD;AAEJ;"}

package/dist/react/Slider.js

@@ -0,0 +1,62 @@
+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
+};
+//# sourceMappingURL=Slider.js.map

package/dist/react/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sources":["../../src/react/Slider.tsx"],"sourcesContent":["import { type KeyboardEvent, type PointerEvent, useRef } from 'react';\nimport { quantize, sliderFraction, sliderValueAt } from '../ui/layout/slider';\nimport { useCx } from './UiProvider';\n\nexport interface SliderProps {\n  value: number;\n  onChange: (value: number) => void;\n  /** Spoken name (`aria-label`). */\n  label: string;\n  min?: number;\n  max?: number;\n  step?: number;\n  /** What the value reads as, for the screen reader and the number beside the track (default: a percentage). */\n  format?: (value: number) => string;\n  /** Hides the number beside the track. */\n  hideValue?: boolean;\n  disabled?: boolean;\n  className?: string;\n}\n\nconst percent = (v: number) => `${Math.round(v * 100)}%`;\n\n/** The value an arrow, Page or Home/End key moves a slider to; `undefined` for any other key. */\nexport function sliderKeyValue(key: string, value: number, min: number, max: number, step: number): number | undefined {\n  const moves: Record<string, number> = {\n    ArrowLeft: value - step,\n    ArrowDown: value - step,\n    ArrowRight: value + step,\n    ArrowUp: value + step,\n    PageDown: value - step * 4,\n    PageUp: value + step * 4,\n    Home: min,\n    End: max,\n  };\n  const to = moves[key];\n  return to === undefined ? undefined : quantize(to, min, max, step);\n}\n\n/**\n * A slider drawn by the theme instead of the browser's range: a sunk track, a fill and a square knob. Dragging,\n * pressing anywhere on the track and the arrow / Page / Home / End keys move it; it is a `role=\"slider\"` with its aria\n * values, so it reads like the native range it replaces. Focused, it keeps the arrow keys from the game.\n */\nexport function Slider({ value, onChange, label, min = 0, max = 1, step = 0.05, format = percent, hideValue, disabled, className }: SliderProps) {\n  const cx = useCx();\n  const track = useRef<HTMLDivElement>(null);\n  const set = (v: number) => {\n    if (v !== value) onChange(v);\n  };\n  const fromPointer = (clientX: number) => {\n    const r = track.current?.getBoundingClientRect();\n    if (r && r.width > 0) set(sliderValueAt(clientX, r.left, r.width, min, max, step));\n  };\n  const onPointerDown = (e: PointerEvent<HTMLDivElement>) => {\n    if (disabled || e.button !== 0) return;\n    e.currentTarget.setPointerCapture(e.pointerId);\n    e.currentTarget.focus();\n    fromPointer(e.clientX);\n    e.preventDefault();\n  };\n  const onPointerMove = (e: PointerEvent<HTMLDivElement>) => {\n    if (!disabled && e.currentTarget.hasPointerCapture(e.pointerId)) fromPointer(e.clientX);\n  };\n  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    const to = disabled ? undefined : sliderKeyValue(e.key, value, min, max, step);\n    if (to === undefined) return;\n    e.preventDefault();\n    e.stopPropagation();\n    set(to);\n  };\n  const pct = sliderFraction(value, min, max) * 100;\n  return (\n    <div className={cx(`e1681-slider-row${className ? ` ${className}` : ''}`)}>\n      <div\n        className={cx('e1681-slider')}\n        role=\"slider\"\n        tabIndex={disabled ? -1 : 0}\n        aria-label={label}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        aria-valuetext={format(value)}\n        aria-disabled={disabled || undefined}\n        onPointerDown={onPointerDown}\n        onPointerMove={onPointerMove}\n        onKeyDown={onKeyDown}\n      >\n        <div className={cx('e1681-slider-track')} ref={track}>\n          <div className={cx('e1681-slider-fill')} style={{ width: `${pct}%` }} />\n          <div className={cx('e1681-slider-knob')} style={{ left: `${pct}%` }} />\n        </div>\n      </div>\n      {!hideValue && <span className={cx('e1681-slider-value')}>{format(value)}</span>}\n    </div>\n  );\n}\n"],"names":["percent","v","sliderKeyValue","key","value","min","max","step","to","quantize","Slider","onChange","label","format","hideValue","disabled","className","cx","useCx","track","useRef","set","fromPointer","clientX","r","sliderValueAt","onPointerDown","e","onPointerMove","onKeyDown","pct","sliderFraction","jsxs","jsx"],"mappings":"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"}

package/dist/react/SplitPane.js

@@ -0,0 +1,24 @@
+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
+};
+//# sourceMappingURL=SplitPane.js.map

package/dist/react/SplitPane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitPane.js","sources":["../../src/react/SplitPane.tsx"],"sourcesContent":["import { type CSSProperties, type MouseEvent, type ReactNode, useRef, useState } from 'react';\nimport { splitModeFor, SPLIT_STACK_BELOW } from './placement';\nimport { useFillSheet } from './useFillSheet';\nimport { useUi, useCx } from './UiProvider';\nimport { useViewport } from './useViewport';\n\nexport interface SplitPaneProps {\n  list: ReactNode;\n  /** The right pane; `null`/`undefined`/`false` shows `empty` instead. */\n  detail?: ReactNode;\n  empty?: ReactNode;\n  /** The list column's width (any CSS grid track); by default the two share the width evenly. */\n  listWidth?: string;\n  /** Height follows the content (capped) instead of the fixed window height: for panes with little in them. */\n  fit?: boolean;\n  /** Below this width a touch screen shows one pane at a time (default `SPLIT_STACK_BELOW`, 600). */\n  stackBelow?: number;\n  /** A click on an element matching this opens the detail when stacked (default `.e1681-pickable`). */\n  pickSelector?: string;\n  /** The back button's word (default: the provider's `backToList`). */\n  backLabel?: ReactNode;\n  className?: string;\n}\n\n/**\n * Two panes side by side: a list that scrolls on its own and the detail of what is picked, which stays in view\n * however long the list grows, so a window is as tall as `.e1681-split` says and never taller. On a touch screen\n * narrower than `stackBelow` only one pane shows at a time: tapping a pickable row (`.e1681-pickable`) opens its\n * detail, and the back button returns. In a touch sheet it fills the height left below what sits above it.\n */\nexport function SplitPane({ list, detail, empty, listWidth, fit, stackBelow = SPLIT_STACK_BELOW, pickSelector = '.e1681-pickable', backLabel, className }: SplitPaneProps) {\n  const cx = useCx();\n  const ui = useUi();\n  const width = useViewport(ui.touch).width;\n  const stack = splitModeFor(width, ui.touch, stackBelow) === 'stack';\n  const [showDetail, setShowDetail] = useState(false);\n  const box = useRef<HTMLDivElement>(null);\n  useFillSheet(box, ui.touch, !!fit);\n  const style = listWidth && !stack ? ({ '--e1681-split-list': listWidth } as CSSProperties) : undefined;\n  const picked = (e: MouseEvent) => {\n    if (stack && (e.target as HTMLElement).closest(pickSelector)) setShowDetail(true);\n  };\n  const mode = stack ? (showDetail ? ' stack show-detail' : ' stack show-list') : '';\n  return (\n    <div ref={box} className={cx(`e1681-split${fit ? ' fit' : ''}${mode}${className ? ` ${className}` : ''}`)} style={style}>\n      <div className={cx('e1681-split-list')} onClickCapture={picked}>\n        {list}\n      </div>\n      <div className={cx('e1681-split-detail')}>\n        {stack && (\n          <button type=\"button\" className={cx('e1681-button small e1681-split-back')} onClick={() => setShowDetail(false)}>\n            {backLabel ?? ui.labels.backToList}\n          </button>\n        )}\n        {detail || <div className={cx('e1681-split-empty')}>{empty ?? ui.labels.pickHint}</div>}\n      </div>\n    </div>\n  );\n}\n"],"names":["SplitPane","list","detail","empty","listWidth","fit","stackBelow","SPLIT_STACK_BELOW","pickSelector","backLabel","className","cx","useCx","ui","useUi","width","useViewport","stack","splitModeFor","showDetail","setShowDetail","useState","box","useRef","useFillSheet","style","picked","e","jsxs","jsx"],"mappings":";;;;;;AA8BO,SAASA,EAAU,EAAE,MAAAC,GAAM,QAAAC,GAAQ,OAAAC,GAAO,WAAAC,GAAW,KAAAC,GAAK,YAAAC,IAAaC,GAAmB,cAAAC,IAAe,mBAAmB,WAAAC,GAAW,WAAAC,KAA6B;AACzK,QAAMC,IAAKC,EAAA,GACLC,IAAKC,EAAA,GACLC,IAAQC,EAAYH,EAAG,KAAK,EAAE,OAC9BI,IAAQC,EAAaH,GAAOF,EAAG,OAAOP,CAAU,MAAM,SACtD,CAACa,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5CC,IAAMC,EAAuB,IAAI;AACvC,EAAAC,EAAaF,GAAKT,EAAG,OAAO,CAAC,CAACR,CAAG;AACjC,QAAMoB,IAAQrB,KAAa,CAACa,IAAS,EAAE,sBAAsBb,MAAgC,QACvFsB,IAAS,CAACC,MAAkB;AAChC,IAAIV,KAAUU,EAAE,OAAuB,QAAQnB,CAAY,OAAiB,EAAI;AAAA,EAClF;AAEA,SACE,gBAAAoB,EAAC,SAAI,KAAKN,GAAK,WAAWX,EAAG,cAAcN,IAAM,SAAS,EAAE,GAFjDY,IAASE,IAAa,uBAAuB,qBAAsB,EAEX,GAAGT,IAAY,IAAIA,CAAS,KAAK,EAAE,EAAE,GAAG,OAAAe,GACzG,UAAA;AAAA,IAAA,gBAAAI,EAAC,SAAI,WAAWlB,EAAG,kBAAkB,GAAG,gBAAgBe,GACrD,UAAAzB,GACH;AAAA,IACA,gBAAA2B,EAAC,OAAA,EAAI,WAAWjB,EAAG,oBAAoB,GACpC,UAAA;AAAA,MAAAM,uBACE,UAAA,EAAO,MAAK,UAAS,WAAWN,EAAG,qCAAqC,GAAG,SAAS,MAAMS,EAAc,EAAK,GAC3G,UAAAX,KAAaI,EAAG,OAAO,YAC1B;AAAA,MAEDX,KAAU,gBAAA2B,EAAC,OAAA,EAAI,WAAWlB,EAAG,mBAAmB,GAAI,UAAAR,KAASU,EAAG,OAAO,SAAA,CAAS;AAAA,IAAA,EAAA,CACnF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/react/TabStrip.js

@@ -0,0 +1,32 @@
+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
+};
+//# sourceMappingURL=TabStrip.js.map

package/dist/react/TabStrip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabStrip.js","sources":["../../src/react/TabStrip.tsx"],"sourcesContent":["import type { CSSProperties, PointerEvent, ReactNode } from 'react';\nimport { useCx } from './UiProvider';\n\nexport interface Tab<T extends string> {\n  id: T;\n  label: ReactNode;\n  /** Why a disabled tab cannot be taken. */\n  title?: string;\n  disabled?: boolean;\n  /** The tab's own colour for its label, kept on both states. */\n  color?: string;\n}\n\nexport interface TabStripProps<T extends string> {\n  tabs: readonly Tab<T>[];\n  value: T;\n  onChange: (id: T) => void;\n  /** The short strip that sits over a field or in a row of controls. */\n  small?: boolean;\n  /** Breaks onto more rows instead of scrolling sideways (same as `className={cx('wrap')}`). */\n  wrap?: boolean;\n  className?: string;\n  /** What the strip chooses, for a screen reader. */\n  label?: string;\n  /** Lets a strip beside a text field keep the keyboard open (`e.preventDefault()`). */\n  onPointerDown?: (e: PointerEvent) => void;\n}\n\n/**\n * One strip of tabs: the chosen one lifted and open into the pane below, the rest a step lower. Every row of tabs —\n * a window's sections, a filter, a difficulty — goes through here so they all read the same; never a row of buttons\n * or a `<select>`. A strip too long for one row takes `wrap` (or `className={cx('wrap')}`).\n */\nexport function TabStrip<T extends string>({ tabs, value, onChange, small, wrap, className, label, onPointerDown }: TabStripProps<T>) {\n  const cx = useCx();\n  const classes = ['e1681-tabs', small ? 'small' : '', wrap ? 'wrap' : '', className ?? ''].filter(Boolean).join(' ');\n  return (\n    <div className={cx(classes)} role=\"tablist\" aria-label={label}>\n      {tabs.map((t) => {\n        const style: CSSProperties | undefined = t.color ? { color: t.color } : undefined;\n        return (\n          <button\n            key={t.id}\n            type=\"button\"\n            role=\"tab\"\n            aria-selected={t.id === value}\n            className={cx(t.id === value ? 'e1681-tab active' : 'e1681-tab')}\n            style={style}\n            disabled={t.disabled}\n            title={t.title}\n            // a mouse takes a tab the moment it is pressed, or it lags a beat behind the hand; a finger only on a tap\n            // (the click, which the browser never sends after a scroll), since a finger also presses to scroll the strip\n            onPointerDown={(e) => {\n              onPointerDown?.(e);\n              if (e.pointerType === 'mouse' && e.button === 0 && !t.disabled && t.id !== value) onChange(t.id);\n            }}\n            onClick={() => {\n              if (t.id !== value) onChange(t.id);\n            }}\n          >\n            {t.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["TabStrip","tabs","value","onChange","small","wrap","className","label","onPointerDown","cx","useCx","classes","jsx","t","style"],"mappings":";;AAiCO,SAASA,EAA2B,EAAE,MAAAC,GAAM,OAAAC,GAAO,UAAAC,GAAU,OAAAC,GAAO,MAAAC,GAAM,WAAAC,GAAW,OAAAC,GAAO,eAAAC,KAAmC;AACpI,QAAMC,IAAKC,EAAA,GACLC,IAAU,CAAC,cAAcP,IAAQ,UAAU,IAAIC,IAAO,SAAS,IAAIC,KAAa,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAClH,SACE,gBAAAM,EAAC,OAAA,EAAI,WAAWH,EAAGE,CAAO,GAAG,MAAK,WAAU,cAAYJ,GACrD,UAAAN,EAAK,IAAI,CAACY,MAAM;AACf,UAAMC,IAAmCD,EAAE,QAAQ,EAAE,OAAOA,EAAE,UAAU;AACxE,WACE,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,iBAAeC,EAAE,OAAOX;AAAA,QACxB,WAAWO,EAAGI,EAAE,OAAOX,IAAQ,qBAAqB,WAAW;AAAA,QAC/D,OAAAY;AAAA,QACA,UAAUD,EAAE;AAAA,QACZ,OAAOA,EAAE;AAAA,QAGT,eAAe,CAAC,MAAM;AACpB,UAAAL,IAAgB,CAAC,GACb,EAAE,gBAAgB,WAAW,EAAE,WAAW,KAAK,CAACK,EAAE,YAAYA,EAAE,OAAOX,KAAOC,EAASU,EAAE,EAAE;AAAA,QACjG;AAAA,QACA,SAAS,MAAM;AACb,UAAIA,EAAE,OAAOX,KAAOC,EAASU,EAAE,EAAE;AAAA,QACnC;AAAA,QAEC,UAAAA,EAAE;AAAA,MAAA;AAAA,MAlBEA,EAAE;AAAA,IAAA;AAAA,EAqBb,CAAC,EAAA,CACH;AAEJ;"}

package/dist/react/TitleTips.js

@@ -0,0 +1,42 @@
+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
+};
+//# sourceMappingURL=TitleTips.js.map

package/dist/react/TitleTips.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TitleTips.js","sources":["../../src/react/TitleTips.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { Tooltip } from './Tooltip';\nimport { useUi, useCx } from './UiProvider';\n\nexport interface TitleTipsProps {\n  /** How long the pointer rests on an element before its tip shows (default 350 ms). */\n  delayMs?: number;\n  /** Only elements inside this one (default: the whole document). */\n  root?: () => HTMLElement | null;\n  className?: string;\n}\n\ntype Tip = { text: string; x: number; y: number };\n\n/**\n * Every `title=` drawn as the kit's `Tooltip` instead of the browser's. Mounted once: the element under the pointer\n * has its `title` taken off while the pointer stays on it (so the browser shows nothing) and put back when it leaves,\n * so components keep writing plain `title=` and React's diffing never sees a change. Pointer events, not mouse\n * events, because a disabled button fires only those. Desktop only: a touch screen never showed a title.\n */\nexport function TitleTips({ delayMs = 350, root, className }: TitleTipsProps) {\n  const cx = useCx();\n  const ui = useUi();\n  const [tip, setTip] = useState<Tip | null>(null);\n\n  useEffect(() => {\n    if (ui.touch || typeof document === 'undefined') return;\n    let el: HTMLElement | null = null;\n    let text = '';\n    let timer = 0;\n    let shown = false;\n    let at = { x: 0, y: 0 };\n    const scope = () => root?.() ?? document.documentElement;\n\n    // takes the title off `el` (again, if React wrote a new one meanwhile) and keeps its text\n    const take = () => {\n      if (!el) return;\n      const t = el.getAttribute('title');\n      if (t !== null) {\n        el.removeAttribute('title');\n        text = t;\n        if (shown) setTip(text ? { text, ...at } : null);\n      }\n    };\n    const release = () => {\n      window.clearTimeout(timer);\n      if (el && el.isConnected && !el.hasAttribute('title') && text) el.setAttribute('title', text);\n      el = null;\n      text = '';\n      shown = false;\n      setTip(null);\n    };\n    const over = (e: PointerEvent) => {\n      if (e.pointerType === 'touch') return;\n      const next = (e.target as Element | null)?.closest?.('[title]') as HTMLElement | null;\n      if (!next || next === el || !scope().contains(next)) return;\n      release();\n      el = next;\n      at = { x: e.clientX, y: e.clientY };\n      take();\n      if (!text) return;\n      timer = window.setTimeout(() => {\n        shown = true;\n        setTip({ text, ...at });\n      }, delayMs);\n    };\n    const move = (e: PointerEvent) => {\n      if (!el) return;\n      if (!el.isConnected) return release();\n      at = { x: e.clientX, y: e.clientY };\n      take();\n      if (shown) setTip(text ? { text, ...at } : null);\n    };\n    const out = (e: PointerEvent) => {\n      if (!el) return;\n      const to = e.relatedTarget as Node | null;\n      if (to && el.contains(to)) return;\n      release();\n    };\n    // a press hides it, as the browser's own did, until the pointer leaves and comes back\n    const press = () => {\n      window.clearTimeout(timer);\n      shown = false;\n      setTip(null);\n    };\n\n    document.addEventListener('pointerover', over, true);\n    document.addEventListener('pointermove', move, true);\n    document.addEventListener('pointerout', out, true);\n    document.addEventListener('pointerdown', press, true);\n    window.addEventListener('blur', release);\n    return () => {\n      document.removeEventListener('pointerover', over, true);\n      document.removeEventListener('pointermove', move, true);\n      document.removeEventListener('pointerout', out, true);\n      document.removeEventListener('pointerdown', press, true);\n      window.removeEventListener('blur', release);\n      release();\n    };\n  }, [ui.touch, delayMs, root]);\n\n  if (!tip) return null;\n  return (\n    <Tooltip x={tip.x} y={tip.y} {...(className ? { className } : {})}>\n      <div className={cx('e1681-title-tip')}>{tip.text}</div>\n    </Tooltip>\n  );\n}\n"],"names":["TitleTips","delayMs","root","className","cx","useCx","ui","useUi","tip","setTip","useState","useEffect","el","text","timer","shown","at","scope","take","t","release","over","next","move","out","to","press","jsx","Tooltip"],"mappings":"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"}

package/dist/react/Tooltip.js

@@ -0,0 +1,28 @@
+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
+};
+//# sourceMappingURL=Tooltip.js.map

package/dist/react/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../../src/react/Tooltip.tsx"],"sourcesContent":["import { type ReactNode, useLayoutEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport type { Rect, Size } from '../ui/layout/geometry';\nimport { placeTooltip, type TipSide } from '../ui/layout/placeTooltip';\nimport { cursorTip } from './placement';\nimport { useUi, useCx } from './UiProvider';\n\nexport interface TooltipProps {\n  /** By the cursor: its screen position. */\n  x?: number;\n  y?: number;\n  /** Or beside an element: its screen rect (`getBoundingClientRect()`). Wins over `x`/`y`. */\n  anchor?: Rect;\n  /** Open over the cursor (or on this side of the anchor) first; it flips when there is no room. */\n  above?: boolean;\n  side?: TipSide;\n  className?: string;\n  children: ReactNode;\n}\n\n/**\n * A tooltip frame kept on screen by its own measured size (`placeTooltip`): under the cursor while it fits, over it\n * when it does not, slid along the edge, never taller than the viewport. Portalled to the `UiProvider`'s `portal`, so\n * a window's `overflow` or transform never clips or shifts it.\n */\nexport function Tooltip({ x = 0, y = 0, anchor, above, side, className, children }: TooltipProps) {\n  const cx = useCx();\n  const ui = useUi();\n  const ref = useRef<HTMLDivElement>(null);\n  const [size, setSize] = useState<Size>({ width: 0, height: 0 });\n  useLayoutEffect(() => {\n    const el = ref.current;\n    if (el && (el.offsetWidth !== size.width || el.offsetHeight !== size.height)) setSize({ width: el.offsetWidth, height: el.offsetHeight });\n  });\n  const view = ui.viewport();\n  const at = anchor\n    ? placeTooltip(anchor, size, view, { side: side ?? (above ? 'above' : 'below'), margin: ui.margin, snap: ui.snap })\n    : cursorTip(x, y, size, view, { above: above ?? side === 'above', margin: ui.margin, snap: ui.snap });\n  const target = ui.portal();\n  const measured = size.width > 0;\n  const tip = (\n    <div\n      ref={ref}\n      className={cx(`e1681-tooltip e1681-tip-frame${className ? ` ${className}` : ''}`)}\n      role=\"tooltip\"\n      style={{ left: at.x, top: at.y, maxHeight: Math.max(0, view.height - 2 * ui.margin), visibility: measured ? undefined : 'hidden' }}\n    >\n      {children}\n    </div>\n  );\n  return target ? createPortal(tip, target) : tip;\n}\n"],"names":["Tooltip","x","y","anchor","above","side","className","children","cx","useCx","ui","useUi","ref","useRef","size","setSize","useState","useLayoutEffect","el","view","at","placeTooltip","cursorTip","target","measured","tip","jsx","createPortal"],"mappings":";;;;;;AAyBO,SAASA,EAAQ,EAAE,GAAAC,IAAI,GAAG,GAAAC,IAAI,GAAG,QAAAC,GAAQ,OAAAC,GAAO,MAAAC,GAAM,WAAAC,GAAW,UAAAC,EAAA,GAA0B;AAChG,QAAMC,IAAKC,EAAA,GACLC,IAAKC,EAAA,GACLC,IAAMC,EAAuB,IAAI,GACjC,CAACC,GAAMC,CAAO,IAAIC,EAAe,EAAE,OAAO,GAAG,QAAQ,GAAG;AAC9D,EAAAC,EAAgB,MAAM;AACpB,UAAMC,IAAKN,EAAI;AACf,IAAIM,MAAOA,EAAG,gBAAgBJ,EAAK,SAASI,EAAG,iBAAiBJ,EAAK,WAASC,EAAQ,EAAE,OAAOG,EAAG,aAAa,QAAQA,EAAG,cAAc;AAAA,EAC1I,CAAC;AACD,QAAMC,IAAOT,EAAG,SAAA,GACVU,IAAKjB,IACPkB,EAAalB,GAAQW,GAAMK,GAAM,EAAE,MAAMd,MAASD,IAAQ,UAAU,UAAU,QAAQM,EAAG,QAAQ,MAAMA,EAAG,KAAA,CAAM,IAChHY,EAAUrB,GAAGC,GAAGY,GAAMK,GAAM,EAAE,OAAOf,KAASC,MAAS,SAAS,QAAQK,EAAG,QAAQ,MAAMA,EAAG,MAAM,GAChGa,IAASb,EAAG,OAAA,GACZc,IAAWV,EAAK,QAAQ,GACxBW,IACJ,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAd;AAAA,MACA,WAAWJ,EAAG,gCAAgCF,IAAY,IAAIA,CAAS,KAAK,EAAE,EAAE;AAAA,MAChF,MAAK;AAAA,MACL,OAAO,EAAE,MAAMc,EAAG,GAAG,KAAKA,EAAG,GAAG,WAAW,KAAK,IAAI,GAAGD,EAAK,SAAS,IAAIT,EAAG,MAAM,GAAG,YAAYc,IAAW,SAAY,SAAA;AAAA,MAEvH,UAAAjB;AAAA,IAAA;AAAA,EAAA;AAGL,SAAOgB,IAASI,EAAaF,GAAKF,CAAM,IAAIE;AAC9C;"}

package/dist/react/UiProvider.js

@@ -0,0 +1,50 @@
+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
+};
+//# sourceMappingURL=UiProvider.js.map

package/dist/react/UiProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiProvider.js","sources":["../../src/react/UiProvider.tsx"],"sourcesContent":["import { createContext, useContext, useMemo, type ReactNode } from 'react';\nimport { isTouchUi } from '../platform/touch';\nimport type { Size } from '../ui/layout/geometry';\nimport { classJoiner, type ClassJoiner } from './classNames';\nimport { DEFAULT_LABELS, type UiLabels } from './labels';\n\n/** What every component of the kit reads: where it is, how big the screen is and the words it prints. */\nexport interface UiSettings {\n  /** Fingers, not a mouse: windows become full-screen sheets, tooltips are not shown. Default: `isTouchUi()`. */\n  touch: boolean;\n  /**\n   * The scale windows and dialogs are meant to be drawn at (`fitToViewport`'s `scale`): a whole multiple for a\n   * pixel-art UI laid out on small units. Default 1.\n   */\n  scale: number;\n  /** The smallest scale a window may shrink to before its body scrolls instead (default: `scale`, never shrinks). */\n  minScale: number;\n  /** A player's \"window size\" for touch sheets: laid out on a box `1 / sheetScale` the screen and drawn back down. */\n  sheetScale: number;\n  /** Kept clear between a window and the screen's edges (default 8). */\n  margin: number;\n  /** Positions and sizes land on whole pixels (default true): pixel art at x.5 reads blurred. */\n  snap: boolean;\n  labels: UiLabels;\n  /** The box windows, tooltips and lists are placed in. Default: the browser window. */\n  viewport: () => Size;\n  /** Where tooltips, the select's list and dialogs are portalled. Default: `document.body`. */\n  portal: () => HTMLElement | null;\n  /**\n   * A game's own class names hung beside the kit's, keyed by the kit's name without its prefix (`tabs`, `tab`,\n   * `button`, `select-list`…) or by a state (`picked`, `open`): a game whose stylesheet already styles its own names\n   * takes the kit without rewriting it. Default none.\n   */\n  classNames: Readonly<Record<string, string>>;\n  /** Joins class names, adding the game's beside each of the kit's (`classNames`); what every component calls. */\n  cx: ClassJoiner;\n}\n\nexport interface UiProviderProps extends Partial<Omit<UiSettings, 'labels' | 'cx'>> {\n  labels?: Partial<UiLabels>;\n  children?: ReactNode;\n}\n\nconst NO_CLASSES: Readonly<Record<string, string>> = {};\n\nfunction windowSize(): Size {\n  return typeof window === 'undefined' ? { width: 0, height: 0 } : { width: window.innerWidth, height: window.innerHeight };\n}\n\nfunction body(): HTMLElement | null {\n  return typeof document === 'undefined' ? null : document.body;\n}\n\n/** The settings a component sees with no `UiProvider` above it. */\nexport function defaultUiSettings(): UiSettings {\n  return { touch: isTouchUi(), scale: 1, minScale: 1, sheetScale: 1, margin: 8, snap: true, labels: DEFAULT_LABELS, viewport: windowSize, portal: body, classNames: NO_CLASSES, cx: classJoiner(NO_CLASSES) };\n}\n\nconst UiContext = createContext<UiSettings | null>(null);\n\n/**\n * Optional: sets the touch mode, the window scale, the words and the box to place things in for every component\n * below it. A UI mounted in a `DomOverlay` passes the overlay's content size as `viewport` and the overlay's\n * content as `portal`, so tooltips and lists land inside its scaled box.\n */\nexport function UiProvider({ children, labels, touch, scale, minScale, sheetScale, margin, snap, viewport, portal, classNames }: UiProviderProps) {\n  const outer = useContext(UiContext);\n  const value = useMemo<UiSettings>(() => {\n    const base = outer ?? defaultUiSettings();\n    const s = scale ?? base.scale;\n    const classes = classNames ? { ...base.classNames, ...classNames } : base.classNames;\n    return {\n      touch: touch ?? base.touch,\n      scale: s,\n      minScale: minScale ?? Math.min(base.minScale, s),\n      sheetScale: sheetScale ?? base.sheetScale,\n      margin: margin ?? base.margin,\n      snap: snap ?? base.snap,\n      labels: labels ? { ...base.labels, ...labels } : base.labels,\n      viewport: viewport ?? base.viewport,\n      portal: portal ?? base.portal,\n      classNames: classes,\n      cx: classes === base.classNames ? base.cx : classJoiner(classes),\n    };\n  }, [outer, labels, touch, scale, minScale, sheetScale, margin, snap, viewport, portal, classNames]);\n  return <UiContext.Provider value={value}>{children}</UiContext.Provider>;\n}\n\nlet fallback: UiSettings | null = null;\n\n/** The kit's settings: the nearest `UiProvider`'s, or the defaults. */\nexport function useUi(): UiSettings {\n  const ui = useContext(UiContext);\n  if (ui) return ui;\n  fallback ??= defaultUiSettings();\n  return fallback;\n}\n\n/** The class joiner of the nearest `UiProvider` (`UiSettings.cx`). */\nexport function useCx(): ClassJoiner {\n  return useUi().cx;\n}\n"],"names":["NO_CLASSES","windowSize","body","defaultUiSettings","isTouchUi","DEFAULT_LABELS","classJoiner","UiContext","createContext","UiProvider","children","labels","touch","scale","minScale","sheetScale","margin","snap","viewport","portal","classNames","outer","useContext","value","useMemo","base","s","classes","jsx","fallback","useUi","ui","useCx"],"mappings":";;;;;AA2CA,MAAMA,IAA+C,CAAA;AAErD,SAASC,IAAmB;AAC1B,SAAO,OAAO,SAAW,MAAc,EAAE,OAAO,GAAG,QAAQ,EAAA,IAAM,EAAE,OAAO,OAAO,YAAY,QAAQ,OAAO,YAAA;AAC9G;AAEA,SAASC,IAA2B;AAClC,SAAO,OAAO,WAAa,MAAc,OAAO,SAAS;AAC3D;AAGO,SAASC,IAAgC;AAC9C,SAAO,EAAE,OAAOC,EAAA,GAAa,OAAO,GAAG,UAAU,GAAG,YAAY,GAAG,QAAQ,GAAG,MAAM,IAAM,QAAQC,GAAgB,UAAUJ,GAAY,QAAQC,GAAM,YAAYF,GAAY,IAAIM,EAAYN,CAAU,EAAA;AAC1M;AAEA,MAAMO,IAAYC,EAAiC,IAAI;AAOhD,SAASC,EAAW,EAAE,UAAAC,GAAU,QAAAC,GAAQ,OAAAC,GAAO,OAAAC,GAAO,UAAAC,GAAU,YAAAC,GAAY,QAAAC,GAAQ,MAAAC,GAAM,UAAAC,GAAU,QAAAC,GAAQ,YAAAC,KAA+B;AAChJ,QAAMC,IAAQC,EAAWf,CAAS,GAC5BgB,IAAQC,EAAoB,MAAM;AACtC,UAAMC,IAAOJ,KAASlB,EAAA,GAChBuB,IAAIb,KAASY,EAAK,OAClBE,IAAUP,IAAa,EAAE,GAAGK,EAAK,YAAY,GAAGL,MAAeK,EAAK;AAC1E,WAAO;AAAA,MACL,OAAOb,KAASa,EAAK;AAAA,MACrB,OAAOC;AAAA,MACP,UAAUZ,KAAY,KAAK,IAAIW,EAAK,UAAUC,CAAC;AAAA,MAC/C,YAAYX,KAAcU,EAAK;AAAA,MAC/B,QAAQT,KAAUS,EAAK;AAAA,MACvB,MAAMR,KAAQQ,EAAK;AAAA,MACnB,QAAQd,IAAS,EAAE,GAAGc,EAAK,QAAQ,GAAGd,EAAA,IAAWc,EAAK;AAAA,MACtD,UAAUP,KAAYO,EAAK;AAAA,MAC3B,QAAQN,KAAUM,EAAK;AAAA,MACvB,YAAYE;AAAA,MACZ,IAAIA,MAAYF,EAAK,aAAaA,EAAK,KAAKnB,EAAYqB,CAAO;AAAA,IAAA;AAAA,EAEnE,GAAG,CAACN,GAAOV,GAAQC,GAAOC,GAAOC,GAAUC,GAAYC,GAAQC,GAAMC,GAAUC,GAAQC,CAAU,CAAC;AAClG,SAAO,gBAAAQ,EAACrB,EAAU,UAAV,EAAmB,OAAAgB,GAAe,UAAAb,EAAA,CAAS;AACrD;AAEA,IAAImB,IAA8B;AAG3B,SAASC,IAAoB;AAClC,QAAMC,IAAKT,EAAWf,CAAS;AAC/B,SAAIwB,MACJF,MAAa1B,EAAA,GACN0B;AACT;AAGO,SAASG,IAAqB;AACnC,SAAOF,IAAQ;AACjB;"}

package/dist/react/baseCss.js

@@ -0,0 +1,222 @@
+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
+};
+//# sourceMappingURL=baseCss.js.map

package/dist/react/baseCss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"baseCss.js","sources":["../../src/react/baseCss.ts"],"sourcesContent":["/**\n * The kit's base stylesheet, as a string: `injectBaseCss()` puts it in the page once, or a game copies it into its\n * own CSS. Everything is themed by custom properties a game sets on `:root` (or any ancestor):\n *\n * | Property | What |\n * |---|---|\n * | `--e1681-font`, `--e1681-font-size` | the UI's font |\n * | `--e1681-text`, `--e1681-muted`, `--e1681-accent` | text, quiet text, the picked / lit colour |\n * | `--e1681-bg`, `--e1681-well`, `--e1681-control-bg` | a window's fill, a sunk pane's, a button's or field's |\n * | `--e1681-border`, `--e1681-border-width` | the plain border used while no frame image is given |\n * | `--e1681-frame`, `--e1681-frame-slice`, `--e1681-frame-width` | windows and dialogs: a 9-slice `border-image` (`url(…)`, `16 20 20 16 fill`, `16px 20px 20px 16px`) |\n * | `--e1681-tip-frame`, `-slice`, `-width` | tooltips and the select's list |\n * | `--e1681-control-frame`, `-slice`, `-width` | buttons, the select, text fields |\n * | `--e1681-tab-frame`, `--e1681-tab-active-frame`, `-slice`, `-width` | tabs |\n * | `--e1681-well-frame`, `-slice`, `-width` | the split pane's detail, the slider's track |\n * | `--e1681-backdrop` | behind a dialog |\n *\n * A `-width` may have one to four lengths, like `border-width`. The pixel rules hold here: no `translate(-50%)` centring and no `zoom` (the components place in whole pixels), no\n * blurred shadow, no gradient. A frame's middle shows through only when its slice says `fill`.\n */\nexport const baseCss = `\n:root {\n  --e1681-font: inherit;\n  --e1681-font-size: 16px;\n  --e1681-text: #ece6d6;\n  --e1681-muted: #9c968a;\n  --e1681-accent: #e8c060;\n  --e1681-bg: #1d242e;\n  --e1681-well: #131a24;\n  --e1681-control-bg: #2a323e;\n  --e1681-border: #6a5634;\n  --e1681-border-width: 2px;\n  --e1681-backdrop: rgba(0, 0, 0, 0.5);\n  --e1681-frame: none;\n  --e1681-frame-slice: 0;\n  --e1681-frame-width: var(--e1681-border-width);\n  --e1681-tip-frame: var(--e1681-frame);\n  --e1681-tip-frame-slice: var(--e1681-frame-slice);\n  --e1681-tip-frame-width: var(--e1681-frame-width);\n  --e1681-control-frame: none;\n  --e1681-control-frame-slice: 0;\n  --e1681-control-frame-width: var(--e1681-border-width);\n  --e1681-tab-frame: var(--e1681-control-frame);\n  --e1681-tab-active-frame: var(--e1681-tab-frame);\n  --e1681-tab-frame-slice: var(--e1681-control-frame-slice);\n  --e1681-tab-frame-width: var(--e1681-control-frame-width);\n  --e1681-well-frame: none;\n  --e1681-well-frame-slice: 0;\n  --e1681-well-frame-width: var(--e1681-border-width);\n}\n\n.e1681-frame {\n  color: var(--e1681-text);\n  font-family: var(--e1681-font);\n  font-size: var(--e1681-font-size);\n  background: var(--e1681-bg) padding-box;\n  border-style: solid; border-color: var(--e1681-border); border-width: var(--e1681-frame-width);\n  border-image: var(--e1681-frame) var(--e1681-frame-slice) / var(--e1681-frame-width) stretch;\n  box-sizing: border-box;\n}\n.e1681-tip-frame {\n  color: var(--e1681-text);\n  font-family: var(--e1681-font);\n  font-size: var(--e1681-font-size);\n  background: var(--e1681-bg) padding-box;\n  border-style: solid; border-color: var(--e1681-border); border-width: var(--e1681-tip-frame-width);\n  border-image: var(--e1681-tip-frame) var(--e1681-tip-frame-slice) / var(--e1681-tip-frame-width) stretch;\n  box-sizing: border-box;\n}\n\n/* windows: placed by useFitToViewport in whole pixels; header kept, body scrolls */\n.e1681-panel {\n  position: fixed;\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  overflow: hidden;\n  pointer-events: auto;\n}\n.e1681-panel-header { display: flex; align-items: center; gap: 8px; flex: none; padding: 2px 4px 6px; }\n.e1681-panel-title { flex: 1; min-width: 0; margin: 0; font-size: 1.25em; font-weight: normal; color: var(--e1681-accent); }\n.e1681-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 4px 4px; }\n.e1681-panel-footer { flex: none; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; padding: 6px 4px 0; }\n.e1681-close {\n  flex: none; padding: 2px; border: 0; background: none; color: var(--e1681-text); cursor: pointer; line-height: 0;\n}\n.e1681-close:hover { color: var(--e1681-accent); }\n/* a touch screen's sheet: the whole screen inside the safe area */\n.e1681-panel.e1681-sheet {\n  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);\n  width: auto;\n  height: auto;\n}\n.e1681-panel.e1681-sheet .e1681-panel-body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }\n\n/* controls */\n.e1681-button, .e1681-input, .e1681-select {\n  color: var(--e1681-text);\n  font: inherit;\n  background: var(--e1681-control-bg) padding-box;\n  border-style: solid; border-color: var(--e1681-border); border-width: var(--e1681-control-frame-width);\n  border-image: var(--e1681-control-frame) var(--e1681-control-frame-slice) / var(--e1681-control-frame-width) stretch;\n  box-shadow: none;\n}\n.e1681-button { padding: 2px 10px; cursor: pointer; min-height: 28px; }\n.e1681-button.small { padding: 0 6px; min-height: 22px; }\n.e1681-button.ghost { background-color: transparent; }\n.e1681-button:hover:not(:disabled) { color: var(--e1681-accent); }\n/* pressed: the same face a pixel lower, never a transform */\n.e1681-button:active:not(:disabled) { padding-top: 3px; padding-bottom: 1px; }\n.e1681-button:disabled { opacity: 0.55; cursor: default; }\n.e1681-input { padding: 2px 6px; min-width: 0; }\n.e1681-glyph { display: inline-block; flex: none; vertical-align: -1px; }\n\n/* tabs: a row that scrolls sideways, or wraps with .wrap */\n.e1681-tabs { display: flex; gap: 2px; align-items: flex-end; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin-bottom: 8px; }\n.e1681-tabs::-webkit-scrollbar { display: none; }\n.e1681-tabs.wrap { flex-wrap: wrap; overflow-x: visible; row-gap: 4px; }\n.e1681-tab {\n  flex: 0 0 auto;\n  padding: 2px 10px;\n  color: var(--e1681-muted);\n  font: inherit;\n  cursor: pointer;\n  white-space: nowrap;\n  background: var(--e1681-control-bg) padding-box;\n  border-style: solid; border-color: var(--e1681-border); border-width: var(--e1681-tab-frame-width);\n  border-image: var(--e1681-tab-frame) var(--e1681-tab-frame-slice) / var(--e1681-tab-frame-width) stretch;\n}\n.e1681-tab:hover:not(.active):not(:disabled) { color: var(--e1681-text); }\n.e1681-tab.active { color: var(--e1681-accent); padding-bottom: 6px; border-image-source: var(--e1681-tab-active-frame); }\n.e1681-tab:disabled { opacity: 0.55; cursor: default; }\n.e1681-tab:focus-visible { outline: 2px solid var(--e1681-accent); outline-offset: -4px; }\n.e1681-tabs.small { margin-bottom: 4px; }\n.e1681-tabs.small .e1681-tab { padding: 0 6px; }\n.e1681-tabs.small .e1681-tab.active { padding-bottom: 4px; }\n\n/* list beside detail */\n.e1681-split {\n  display: grid;\n  grid-template-columns: var(--e1681-split-list, minmax(0, 1fr)) minmax(0, 1fr);\n  gap: 12px;\n  height: min(58vh, 620px);\n}\n.e1681-split.fit { height: auto; max-height: min(58vh, 620px); }\n.e1681-split-list, .e1681-split-detail { min-height: 0; overflow-y: auto; overflow-x: hidden; }\n.e1681-split-list { padding-right: 4px; }\n.e1681-split-detail {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding: 8px 10px;\n  background: var(--e1681-well) padding-box;\n  border-style: solid; border-color: var(--e1681-border); border-width: var(--e1681-well-frame-width);\n  border-image: var(--e1681-well-frame) var(--e1681-well-frame-slice) / var(--e1681-well-frame-width) stretch;\n}\n.e1681-split-empty { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--e1681-muted); }\n.e1681-split.stack { grid-template-columns: minmax(0, 1fr); }\n.e1681-split.stack.show-list .e1681-split-detail, .e1681-split.stack.show-detail .e1681-split-list { display: none; }\n.e1681-split-back { align-self: flex-start; }\n.e1681-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; margin-bottom: 4px; border: var(--e1681-border-width) solid transparent; }\n.e1681-pickable { cursor: pointer; }\n.e1681-pickable:hover:not(.picked):not(.disabled) { border-color: var(--e1681-border); }\n.e1681-row.picked { border-color: var(--e1681-accent); color: var(--e1681-accent); }\n.e1681-row.disabled { opacity: 0.55; cursor: default; }\n\n/* the select: as wide as its longest label */\n.e1681-select { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 1px 4px; text-align: left; cursor: pointer; }\n.e1681-select:hover:not(:disabled), .e1681-select.open { color: var(--e1681-accent); }\n.e1681-select:disabled { opacity: 0.6; cursor: default; }\n.e1681-select.grow { flex: 1 1 auto; min-width: 0; }\n.e1681-select.grow .e1681-select-labels { flex: 1 1 auto; min-width: 0; overflow: hidden; }\n.e1681-select.grow .e1681-select-labels > span { overflow: hidden; text-overflow: ellipsis; }\n.e1681-select-labels { display: grid; white-space: nowrap; }\n.e1681-select-labels > span { grid-area: 1 / 1; visibility: hidden; }\n.e1681-select-labels > span.shown { visibility: visible; }\n.e1681-select-list {\n  position: fixed;\n  z-index: 10000;\n  box-sizing: border-box;\n  width: max-content;\n  padding: 2px;\n  overflow-y: auto;\n  pointer-events: auto;\n}\n.e1681-select-option { padding: 2px 6px; white-space: nowrap; cursor: pointer; }\n.e1681-select-list.measuring .e1681-select-option { width: max-content; }\n.e1681-select-option.hot { background: var(--e1681-control-bg); }\n.e1681-select-option.picked { color: var(--e1681-accent); }\n\n/* tooltips */\n.e1681-tooltip { position: fixed; z-index: 10001; max-width: 360px; padding: 4px 8px; overflow: hidden; pointer-events: none; }\n.e1681-title-tip { white-space: pre-line; }\n\n/* slider: a square knob, flat fills */\n.e1681-slider-row { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }\n.e1681-slider { flex: 1; min-width: 0; padding: 6px 7px; cursor: pointer; touch-action: none; user-select: none; pointer-events: auto; }\n.e1681-slider:focus { outline: none; }\n.e1681-slider:focus-visible { outline: 2px solid var(--e1681-accent); outline-offset: 2px; }\n.e1681-slider[aria-disabled='true'] { opacity: 0.55; cursor: default; }\n.e1681-slider-track {\n  position: relative;\n  height: 6px;\n  background: var(--e1681-well) padding-box;\n  border-style: solid; border-color: var(--e1681-border); border-width: var(--e1681-well-frame-width);\n  border-image: var(--e1681-well-frame) var(--e1681-well-frame-slice) / var(--e1681-well-frame-width) stretch;\n}\n.e1681-slider-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--e1681-accent); }\n/* the knob is offset by half its own whole-pixel width with a margin, so it stays on the pixel grid */\n.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; }\n.e1681-slider-value { min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }\n\n/* dialogs */\n.e1681-backdrop { position: fixed; inset: 0; z-index: 9000; background: var(--e1681-backdrop); pointer-events: auto; }\n.e1681-dialog { position: fixed; display: flex; flex-direction: column; overflow: hidden; padding: 8px 10px; }\n.e1681-dialog-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }\n.e1681-dialog-actions { flex: none; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding-top: 10px; }\n.e1681-confirm-text { white-space: pre-line; }\n.e1681-confirm-qty { display: flex; align-items: center; gap: 6px; margin-top: 10px; }\n.e1681-confirm-qty-input { width: 56px; text-align: right; }\n.e1681-choice-list { margin-top: 8px; }\n.e1681-choice-icon { flex: none; line-height: 0; }\n.e1681-choice-label { flex: 1; min-width: 0; }\n.e1681-choice-note { flex: none; margin-left: auto; color: var(--e1681-muted); }\n\n/* sprites at whole multiples */\n.e1681-pixel-image { display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }\n.e1681-pixel-image > img { image-rendering: pixelated; flex: none; }\n`;\n\nconst STYLE_ID = 'e1681-react-base';\n\n/**\n * Puts `baseCss` into the page once, first in `<head>` so the game's own rules (and its custom properties) win\n * without needing more specific selectors. Returns the `<style>` element; nothing on a server.\n */\nexport function injectBaseCss(doc: Document | undefined = typeof document === 'undefined' ? undefined : document): HTMLStyleElement | null {\n  if (!doc) return null;\n  const found = doc.getElementById(STYLE_ID);\n  if (found) return found as HTMLStyleElement;\n  const style = doc.createElement('style');\n  style.id = STYLE_ID;\n  style.textContent = baseCss;\n  doc.head.insertBefore(style, doc.head.firstChild);\n  return style;\n}\n"],"names":["baseCss","STYLE_ID","injectBaseCss","doc","found","style"],"mappings":"AAoBO,MAAMA,IAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAmNjBC,IAAW;AAMV,SAASC,EAAcC,IAA4B,OAAO,WAAa,MAAc,SAAY,UAAmC;AACzI,MAAI,CAACA,EAAK,QAAO;AACjB,QAAMC,IAAQD,EAAI,eAAeF,CAAQ;AACzC,MAAIG,EAAO,QAAOA;AAClB,QAAMC,IAAQF,EAAI,cAAc,OAAO;AACvC,SAAAE,EAAM,KAAKJ,GACXI,EAAM,cAAcL,GACpBG,EAAI,KAAK,aAAaE,GAAOF,EAAI,KAAK,UAAU,GACzCE;AACT;"}