1681-engine 0.0.0-stage → 0.5.8

package/dist/postfx/fxShader.js

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

package/dist/postfx/fxShader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fxShader.js","sources":["../../src/postfx/fxShader.ts"],"sourcesContent":["import { Filter, GlProgram, GpuProgram, Texture, UniformGroup } from 'pixi.js';\n\n/** The uniform types an effect may declare. */\nexport type FxUniformType = 'f32' | 'vec2<f32>' | 'vec3<f32>' | 'vec4<f32>';\n\nexport interface FxUniform {\n  type: FxUniformType;\n  value: number | Float32Array;\n}\n\nexport type FxUniforms = Record<string, FxUniform>;\n\n/**\n * One effect's shader: its uniforms, and the body of its fragment function in GLSL (WebGL 2) and WGSL (WebGPU).\n *\n * Both bodies are given the same helpers, so they read alike:\n * - `frameUv` (vec2): 0–1 across the filtered area, whatever the size of the texture Pixi hands over;\n * - `framePx` (vec2): the filtered area's size in pixels; `texel` (vec2): one input pixel in texture coordinates;\n * - `sampleAt(coord)`: the input at a texture coordinate, clamped inside the area; `toCoord(uv)`: frame uv back to one;\n * - `coord`: this fragment's texture coordinate; `src`: the input there (premultiplied alpha);\n * - `uMap` / `sampleMap(coord)` when the effect has a second texture (`map: true`).\n * GLSL reads its uniforms by name; WGSL through `fx.<name>`. Each body ends by writing `result`.\n */\nexport interface FxShaderSpec {\n  name: string;\n  uniforms: FxUniforms;\n  glsl: string;\n  wgsl: string;\n  /** A second texture the effect samples (bloom's blurred light). */\n  map?: boolean;\n}\n\nconst GLSL_TYPE: Record<FxUniformType, string> = { f32: 'float', 'vec2<f32>': 'vec2', 'vec3<f32>': 'vec3', 'vec4<f32>': 'vec4' };\n\nconst VERTEX_GLSL = `in vec2 aPosition;\nout vec2 vTextureCoord;\nuniform vec4 uInputSize;\nuniform vec4 uOutputFrame;\nuniform vec4 uOutputTexture;\nvoid main(void) {\n  vec2 position = aPosition * uOutputFrame.zw + uOutputFrame.xy;\n  position.x = position.x * (2.0 / uOutputTexture.x) - 1.0;\n  position.y = position.y * (2.0 * uOutputTexture.z / uOutputTexture.y) - uOutputTexture.z;\n  gl_Position = vec4(position, 0.0, 1.0);\n  vTextureCoord = aPosition * (uOutputFrame.zw * uInputSize.zw);\n}\n`;\n\n/** The GLSL fragment shader of an effect. */\nexport function glslSource(spec: FxShaderSpec): string {\n  const decl = Object.entries(spec.uniforms)\n    .map(([n, u]) => `uniform ${GLSL_TYPE[u.type]} ${n};`)\n    .join('\\n');\n  return `in vec2 vTextureCoord;\nout vec4 finalColor;\nuniform sampler2D uTexture;\n${spec.map ? 'uniform sampler2D uMap;' : ''}\nuniform vec4 uInputSize;\nuniform vec4 uInputClamp;\nuniform vec4 uOutputFrame;\n${decl}\nvec4 sampleAt(vec2 c) { return texture(uTexture, clamp(c, uInputClamp.xy, uInputClamp.zw)); }\n${spec.map ? 'vec4 sampleMap(vec2 c) { return texture(uMap, clamp(c, uInputClamp.xy, uInputClamp.zw)); }' : ''}\nvec2 toCoord(vec2 uv) { return uv * uOutputFrame.zw * uInputSize.zw; }\nvoid main(void) {\n  vec2 coord = vTextureCoord;\n  vec2 framePx = uOutputFrame.zw;\n  vec2 frameUv = coord * uInputSize.xy / framePx;\n  vec2 texel = uInputSize.zw;\n  vec4 src = texture(uTexture, coord);\n  vec4 result = src;\n${spec.glsl}\n  finalColor = result;\n}\n`;\n}\n\n/** The WGSL module of an effect (vertex and fragment). */\nexport function wgslSource(spec: FxShaderSpec): string {\n  const fields = Object.entries(spec.uniforms)\n    .map(([n, u]) => `  ${n}: ${u.type},`)\n    .join('\\n');\n  return `struct GlobalFilterUniforms {\n  uInputSize: vec4<f32>,\n  uInputPixel: vec4<f32>,\n  uInputClamp: vec4<f32>,\n  uOutputFrame: vec4<f32>,\n  uGlobalFrame: vec4<f32>,\n  uOutputTexture: vec4<f32>,\n};\nstruct FxUniforms {\n${fields}\n};\n@group(0) @binding(0) var<uniform> gfu: GlobalFilterUniforms;\n@group(0) @binding(1) var uTexture: texture_2d<f32>;\n@group(0) @binding(2) var uSampler: sampler;\n@group(1) @binding(0) var<uniform> fx: FxUniforms;\n${spec.map ? '@group(1) @binding(1) var uMap: texture_2d<f32>;' : ''}\nstruct VSOutput {\n  @builtin(position) position: vec4<f32>,\n  @location(0) uv: vec2<f32>,\n};\n@vertex\nfn mainVertex(@location(0) aPosition: vec2<f32>) -> VSOutput {\n  var position = aPosition * gfu.uOutputFrame.zw + gfu.uOutputFrame.xy;\n  position.x = position.x * (2.0 / gfu.uOutputTexture.x) - 1.0;\n  position.y = position.y * (2.0 * gfu.uOutputTexture.z / gfu.uOutputTexture.y) - gfu.uOutputTexture.z;\n  return VSOutput(vec4<f32>(position, 0.0, 1.0), aPosition * (gfu.uOutputFrame.zw * gfu.uInputSize.zw));\n}\nfn sampleAt(c: vec2<f32>) -> vec4<f32> { return textureSampleLevel(uTexture, uSampler, clamp(c, gfu.uInputClamp.xy, gfu.uInputClamp.zw), 0.0); }\n${spec.map ? 'fn sampleMap(c: vec2<f32>) -> vec4<f32> { return textureSampleLevel(uMap, uSampler, clamp(c, gfu.uInputClamp.xy, gfu.uInputClamp.zw), 0.0); }' : ''}\nfn toCoord(uv: vec2<f32>) -> vec2<f32> { return uv * gfu.uOutputFrame.zw * gfu.uInputSize.zw; }\n@fragment\nfn mainFragment(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {\n  let coord = uv;\n  let framePx = gfu.uOutputFrame.zw;\n  let frameUv = coord * gfu.uInputSize.xy / framePx;\n  let texel = gfu.uInputSize.zw;\n  let src = textureSampleLevel(uTexture, uSampler, coord, 0.0);\n  var result = src;\n${spec.wgsl}\n  return result;\n}\n`;\n}\n\n/**\n * A full-screen effect built from an `FxShaderSpec`: a Pixi `Filter` whose uniforms are read and written by name\n * (`fx.set('strength', 0.5)`, or the subclasses' own properties). Works on both renderers.\n */\nexport class FxFilter extends Filter {\n  readonly fxName: string;\n  private readonly group: UniformGroup;\n\n  constructor(spec: FxShaderSpec) {\n    const uniforms: Record<string, { value: number | Float32Array; type: FxUniformType }> = {};\n    for (const [n, u] of Object.entries(spec.uniforms)) uniforms[n] = { value: typeof u.value === 'number' ? u.value : new Float32Array(u.value), type: u.type };\n    const group = new UniformGroup(uniforms);\n    const wgsl = wgslSource(spec);\n    super({\n      // highp: the uniforms the vertex shader shares with it must match its precision, or the program will not link\n      glProgram: GlProgram.from({ vertex: VERTEX_GLSL, fragment: glslSource(spec), name: `fx-${spec.name}`, preferredFragmentPrecision: 'highp' }),\n      gpuProgram: GpuProgram.from({ vertex: { source: wgsl, entryPoint: 'mainVertex' }, fragment: { source: wgsl, entryPoint: 'mainFragment' } }),\n      resources: spec.map ? { fxUniforms: group, uMap: Texture.WHITE.source } : { fxUniforms: group },\n      // as sharp as the canvas: a pixel game's effects land on its own pixels\n      resolution: 'inherit',\n    });\n    this.fxName = spec.name;\n    this.group = group;\n  }\n\n  /** A uniform's value (a number, or the live array of a vector). */\n  get(name: string): number | Float32Array {\n    return this.group.uniforms[name] as number | Float32Array;\n  }\n\n  /** Sets a number uniform, or the components of a vector one. */\n  set(name: string, ...values: number[]): this {\n    const u = this.group.uniforms as Record<string, number | Float32Array>;\n    const cur = u[name];\n    if (cur === undefined) throw new Error(`${this.fxName}: no uniform '${name}'`);\n    if (typeof cur === 'number') u[name] = values[0] ?? 0;\n    else for (let i = 0; i < cur.length && i < values.length; i++) cur[i] = values[i]!;\n    this.group.update();\n    return this;\n  }\n\n  /** A number uniform, for the subclasses' getters. */\n  protected num(name: string): number {\n    return this.group.uniforms[name] as number;\n  }\n}\n\n/** A 0xRRGGBB colour as three 0–1 channels. */\nexport function rgb(color: number): [number, number, number] {\n  return [((color >> 16) & 0xff) / 255, ((color >> 8) & 0xff) / 255, (color & 0xff) / 255];\n}\n"],"names":["GLSL_TYPE","VERTEX_GLSL","glslSource","spec","decl","n","u","wgslSource","FxFilter","Filter","uniforms","group","UniformGroup","wgsl","GlProgram","GpuProgram","Texture","name","values","cur","i","rgb","color"],"mappings":"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"}

package/dist/postfx.js

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

package/dist/postfx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"postfx.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/react/ChoiceDialog.js

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

package/dist/react/ChoiceDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChoiceDialog.js","sources":["../../src/react/ChoiceDialog.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport { answerChoice, choiceStore, firstChoice, type ChoiceQuestion } from './choiceStore';\nimport { Modal } from './Modal';\nimport { useStore } from './useStore';\nimport { useUi, useCx } from './UiProvider';\n\nconst selectPending = (s: { pending: ChoiceQuestion | null }) => s.pending;\n\n/**\n * The open `askChoice`, if any: mounted once at the UI's root. A row per option, the first that can be taken picked;\n * Enter takes the picked one, Esc or a press outside cancels.\n */\nexport function ChoiceDialog({ width = 400 }: { width?: number }) {\n  const cx = useCx();\n  const ui = useUi();\n  const pending = useStore(choiceStore, selectPending);\n  const [picked, setPicked] = useState<string | null>(null);\n  useEffect(() => setPicked(pending ? firstChoice(pending.options) : null), [pending]);\n  const cancel = useCallback(() => answerChoice(null), []);\n  const confirm = useCallback(() => {\n    if (picked) answerChoice(picked);\n  }, [picked]);\n  if (!pending) return null;\n  return (\n    <Modal\n      width={width}\n      onCancel={cancel}\n      onConfirm={confirm}\n      className={cx('e1681-choice')}\n      actions={\n        <>\n          <button type=\"button\" className={cx('e1681-button ghost')} onClick={cancel}>\n            {pending.cancel ?? ui.labels.cancel}\n          </button>\n          <button type=\"button\" className={cx('e1681-button')} disabled={!picked} onClick={confirm}>\n            {pending.confirm ?? ui.labels.choose}\n          </button>\n        </>\n      }\n    >\n      <div className={cx('e1681-confirm-text')}>{pending.text}</div>\n      <div className={cx('e1681-choice-list')} role=\"listbox\">\n        {pending.options.map(({ id, label, icon, note, disabled }) => (\n          <div\n            key={id}\n            role=\"option\"\n            aria-selected={picked === id}\n            aria-disabled={disabled || undefined}\n            className={cx(`e1681-row e1681-pickable${picked === id ? ' picked' : ''}${disabled ? ' disabled' : ''}`)}\n            onClick={() => !disabled && setPicked(id)}\n            onDoubleClick={() => !disabled && answerChoice(id)}\n          >\n            {icon !== undefined && <span className={cx('e1681-choice-icon')}>{icon}</span>}\n            <span className={cx('e1681-choice-label')}>{label}</span>\n            {note !== undefined && <span className={cx('e1681-choice-note')}>{note}</span>}\n          </div>\n        ))}\n      </div>\n    </Modal>\n  );\n}\n"],"names":["selectPending","s","ChoiceDialog","width","cx","useCx","ui","useUi","pending","useStore","choiceStore","picked","setPicked","useState","useEffect","firstChoice","cancel","useCallback","answerChoice","confirm","jsxs","Modal","Fragment","jsx","id","label","icon","note","disabled"],"mappings":";;;;;;AAMA,MAAMA,IAAgB,CAACC,MAA0CA,EAAE;AAM5D,SAASC,EAAa,EAAE,OAAAC,IAAQ,OAA2B;AAChE,QAAMC,IAAKC,EAAA,GACLC,IAAKC,EAAA,GACLC,IAAUC,EAASC,GAAaV,CAAa,GAC7C,CAACW,GAAQC,CAAS,IAAIC,EAAwB,IAAI;AACxD,EAAAC,EAAU,MAAMF,EAAUJ,IAAUO,EAAYP,EAAQ,OAAO,IAAI,IAAI,GAAG,CAACA,CAAO,CAAC;AACnF,QAAMQ,IAASC,EAAY,MAAMC,EAAa,IAAI,GAAG,CAAA,CAAE,GACjDC,IAAUF,EAAY,MAAM;AAChC,IAAIN,OAAqBA,CAAM;AAAA,EACjC,GAAG,CAACA,CAAM,CAAC;AACX,SAAKH,IAEH,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAlB;AAAA,MACA,UAAUa;AAAA,MACV,WAAWG;AAAA,MACX,WAAWf,EAAG,cAAc;AAAA,MAC5B,SACE,gBAAAgB,EAAAE,GAAA,EACE,UAAA;AAAA,QAAA,gBAAAC,EAAC,UAAA,EAAO,MAAK,UAAS,WAAWnB,EAAG,oBAAoB,GAAG,SAASY,GACjE,UAAAR,EAAQ,UAAUF,EAAG,OAAO,QAC/B;AAAA,0BACC,UAAA,EAAO,MAAK,UAAS,WAAWF,EAAG,cAAc,GAAG,UAAU,CAACO,GAAQ,SAASQ,GAC9E,YAAQ,WAAWb,EAAG,OAAO,OAAA,CAChC;AAAA,MAAA,GACF;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAiB,EAAC,SAAI,WAAWnB,EAAG,oBAAoB,GAAI,YAAQ,MAAK;AAAA,0BACvD,OAAA,EAAI,WAAWA,EAAG,mBAAmB,GAAG,MAAK,WAC3C,UAAAI,EAAQ,QAAQ,IAAI,CAAC,EAAE,IAAAgB,GAAI,OAAAC,GAAO,MAAAC,GAAM,MAAAC,GAAM,UAAAC,QAC7C,gBAAAR;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAK;AAAA,YACL,iBAAeT,MAAWa;AAAA,YAC1B,iBAAeI,KAAY;AAAA,YAC3B,WAAWxB,EAAG,2BAA2BO,MAAWa,IAAK,YAAY,EAAE,GAAGI,IAAW,cAAc,EAAE,EAAE;AAAA,YACvG,SAAS,MAAM,CAACA,KAAYhB,EAAUY,CAAE;AAAA,YACxC,eAAe,MAAM,CAACI,KAAYV,EAAaM,CAAE;AAAA,YAEhD,UAAA;AAAA,cAAAE,MAAS,UAAa,gBAAAH,EAAC,QAAA,EAAK,WAAWnB,EAAG,mBAAmB,GAAI,UAAAsB,GAAK;AAAA,gCACtE,QAAA,EAAK,WAAWtB,EAAG,oBAAoB,GAAI,UAAAqB,GAAM;AAAA,cACjDE,MAAS,UAAa,gBAAAJ,EAAC,QAAA,EAAK,WAAWnB,EAAG,mBAAmB,GAAI,UAAAuB,EAAA,CAAK;AAAA,YAAA;AAAA,UAAA;AAAA,UAVlEH;AAAA,QAAA,CAYR,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAnCiB;AAsCvB;"}

package/dist/react/ConfirmDialog.js

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

package/dist/react/ConfirmDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.js","sources":["../../src/react/ConfirmDialog.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport { answerConfirm, confirmStore, parseQuantity, type ConfirmQuestion } from './confirmStore';\nimport { Glyph } from './Glyph';\nimport { Modal } from './Modal';\nimport { Slider } from './Slider';\nimport { useStore } from './useStore';\nimport { useUi, useCx } from './UiProvider';\n\nconst selectPending = (s: { pending: ConfirmQuestion | null }) => s.pending;\n\n/**\n * The open `askConfirm` / `askQuantity` question, if any: mounted once at the UI's root. Enter confirms, Esc or a\n * press outside cancels. A quantity is asked with a slider, − and + and a field for an exact number (a slider over 99\n * cannot land on 37 with a thumb).\n */\nexport function ConfirmDialog({ width = 360 }: { width?: number }) {\n  const cx = useCx();\n  const ui = useUi();\n  const pending = useStore(confirmStore, selectPending);\n  const [qty, setQty] = useState(1);\n  useEffect(() => setQty(Math.max(1, pending?.max ?? 1)), [pending]);\n  const many = (pending?.max ?? 0) > 1;\n  const cancel = useCallback(() => answerConfirm(0), []);\n  const confirm = useCallback(() => answerConfirm(many ? qty : 1), [many, qty]);\n  if (!pending) return null;\n  const max = pending.max;\n  return (\n    <Modal\n      role=\"alertdialog\"\n      width={width}\n      onCancel={cancel}\n      onConfirm={confirm}\n      className={cx('e1681-confirm')}\n      actions={\n        <>\n          <button type=\"button\" className={cx('e1681-button ghost')} onClick={cancel}>\n            {pending.cancel ?? ui.labels.cancel}\n          </button>\n          <button type=\"button\" className={cx('e1681-button')} autoFocus={!ui.touch} onClick={confirm}>\n            {pending.ok ?? ui.labels.ok}\n          </button>\n        </>\n      }\n    >\n      <div className={cx('e1681-confirm-text')}>{pending.text}</div>\n      {many && (\n        <div className={cx('e1681-confirm-qty')}>\n          <button type=\"button\" className={cx('e1681-button ghost small')} aria-label=\"-1\" onClick={() => setQty(Math.max(1, qty - 1))}>\n            <Glyph id=\"minus\" />\n          </button>\n          <Slider value={qty} min={1} max={max} step={1} format={(v) => `x${v}`} label={ui.labels.quantity} onChange={setQty} />\n          <button type=\"button\" className={cx('e1681-button ghost small')} aria-label=\"+1\" onClick={() => setQty(Math.min(max, qty + 1))}>\n            <Glyph id=\"plus\" />\n          </button>\n          <input\n            className={cx('e1681-input e1681-confirm-qty-input')}\n            inputMode=\"numeric\"\n            aria-label={ui.labels.quantity}\n            value={qty}\n            onChange={(e) => setQty(parseQuantity(e.target.value, max))}\n            onFocus={(e) => e.target.select()}\n          />\n        </div>\n      )}\n    </Modal>\n  );\n}\n"],"names":["selectPending","ConfirmDialog","width","cx","useCx","ui","useUi","pending","useStore","confirmStore","qty","setQty","useState","useEffect","many","cancel","useCallback","answerConfirm","confirm","max","jsxs","Modal","Fragment","jsx","Glyph","Slider","v","e","parseQuantity"],"mappings":";;;;;;;;AAQA,MAAMA,IAAgB,CAAC,MAA2C,EAAE;AAO7D,SAASC,EAAc,EAAE,OAAAC,IAAQ,OAA2B;AACjE,QAAMC,IAAKC,EAAA,GACLC,IAAKC,EAAA,GACLC,IAAUC,EAASC,GAAcT,CAAa,GAC9C,CAACU,GAAKC,CAAM,IAAIC,EAAS,CAAC;AAChC,EAAAC,EAAU,MAAMF,EAAO,KAAK,IAAI,GAAGJ,GAAS,OAAO,CAAC,CAAC,GAAG,CAACA,CAAO,CAAC;AACjE,QAAMO,KAAQP,GAAS,OAAO,KAAK,GAC7BQ,IAASC,EAAY,MAAMC,EAAc,CAAC,GAAG,CAAA,CAAE,GAC/CC,IAAUF,EAAY,MAAMC,EAAcH,IAAOJ,IAAM,CAAC,GAAG,CAACI,GAAMJ,CAAG,CAAC;AAC5E,MAAI,CAACH,EAAS,QAAO;AACrB,QAAMY,IAAMZ,EAAQ;AACpB,SACE,gBAAAa;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,OAAAnB;AAAA,MACA,UAAUa;AAAA,MACV,WAAWG;AAAA,MACX,WAAWf,EAAG,eAAe;AAAA,MAC7B,SACE,gBAAAiB,EAAAE,GAAA,EACE,UAAA;AAAA,QAAA,gBAAAC,EAAC,UAAA,EAAO,MAAK,UAAS,WAAWpB,EAAG,oBAAoB,GAAG,SAASY,GACjE,UAAAR,EAAQ,UAAUF,EAAG,OAAO,QAC/B;AAAA,0BACC,UAAA,EAAO,MAAK,UAAS,WAAWF,EAAG,cAAc,GAAG,WAAW,CAACE,EAAG,OAAO,SAASa,GACjF,YAAQ,MAAMb,EAAG,OAAO,GAAA,CAC3B;AAAA,MAAA,GACF;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAkB,EAAC,SAAI,WAAWpB,EAAG,oBAAoB,GAAI,YAAQ,MAAK;AAAA,QACvDW,KACC,gBAAAM,EAAC,OAAA,EAAI,WAAWjB,EAAG,mBAAmB,GACpC,UAAA;AAAA,UAAA,gBAAAoB,EAAC,UAAA,EAAO,MAAK,UAAS,WAAWpB,EAAG,0BAA0B,GAAG,cAAW,MAAK,SAAS,MAAMQ,EAAO,KAAK,IAAI,GAAGD,IAAM,CAAC,CAAC,GACzH,UAAA,gBAAAa,EAACC,GAAA,EAAM,IAAG,QAAA,CAAQ,EAAA,CACpB;AAAA,UACA,gBAAAD,EAACE,KAAO,OAAOf,GAAK,KAAK,GAAG,KAAAS,GAAU,MAAM,GAAG,QAAQ,CAACO,MAAM,IAAIA,CAAC,IAAI,OAAOrB,EAAG,OAAO,UAAU,UAAUM,GAAQ;AAAA,UACpH,gBAAAY,EAAC,UAAA,EAAO,MAAK,UAAS,WAAWpB,EAAG,0BAA0B,GAAG,cAAW,MAAK,SAAS,MAAMQ,EAAO,KAAK,IAAIQ,GAAKT,IAAM,CAAC,CAAC,GAC3H,UAAA,gBAAAa,EAACC,GAAA,EAAM,IAAG,OAAA,CAAO,EAAA,CACnB;AAAA,UACA,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWpB,EAAG,qCAAqC;AAAA,cACnD,WAAU;AAAA,cACV,cAAYE,EAAG,OAAO;AAAA,cACtB,OAAOK;AAAA,cACP,UAAU,CAACiB,MAAMhB,EAAOiB,EAAcD,EAAE,OAAO,OAAOR,CAAG,CAAC;AAAA,cAC1D,SAAS,CAACQ,MAAMA,EAAE,OAAO,OAAA;AAAA,YAAO;AAAA,UAAA;AAAA,QAClC,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/react/Glyph.js

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

package/dist/react/Glyph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Glyph.js","sources":["../../src/react/Glyph.tsx"],"sourcesContent":["import { memo } from 'react';\nimport { useCx } from './UiProvider';\n\n/**\n * Small marks (close, check, arrows, a star…) as pixel art on a square grid, drawn in the text's colour. A pixel font\n * usually carries letters and punctuation only, so a ✕, ✓, ▾ or → typed into the UI falls through to a system font\n * and reads as a smooth vector glyph in the middle of pixel text. `scale` is screen pixels per glyph pixel: a whole\n * number, so the mark keeps its pixels square.\n *\n * Rows are strings, one character a pixel: `.` is empty, `X` the text's colour; any other letter takes its colour\n * from the glyph's `tones` (a coloured glyph, lit like the world's art).\n */\nexport interface GlyphArt {\n  rows: readonly string[];\n  tones?: Readonly<Record<string, string>>;\n}\n\nconst BUILT_IN = {\n  close: ['X.....X', '.X...X.', '..X.X..', '...X...', '..X.X..', '.X...X.', 'X.....X'],\n  check: ['.......', '......X', '.....XX', 'X...XX.', 'XX.XX..', '.XXX...', '..X....'],\n  down: ['.......', '.......', 'XXXXXXX', '.XXXXX.', '..XXX..', '...X...', '.......'],\n  up: ['.......', '...X...', '..XXX..', '.XXXXX.', 'XXXXXXX', '.......', '.......'],\n  right: ['..X....', '..XX...', '..XXX..', '..XXXX.', '..XXX..', '..XX...', '..X....'],\n  left: ['....X..', '...XX..', '..XXX..', '.XXXX..', '..XXX..', '...XX..', '....X..'],\n  arrow: ['.......', '....X..', '.....X.', 'XXXXXXX', '.....X.', '....X..', '.......'],\n  back: ['..X....', '.XX....', 'XXXXXX.', '.XX...X', '..X...X', '......X', '..XXXX.'],\n  star: ['...X...', '...X...', 'XXXXXXX', '.XXXXX.', '..XXX..', '.XX.XX.', 'X.....X'],\n  diamond: ['...X...', '..XXX..', '.XXXXX.', 'XXXXXXX', '.XXXXX.', '..XXX..', '...X...'],\n  diamondOpen: ['...X...', '..X.X..', '.X...X.', 'X.....X', '.X...X.', '..X.X..', '...X...'],\n  menu: ['.......', 'XXXXXXX', '.......', 'XXXXXXX', '.......', 'XXXXXXX', '.......'],\n  plus: ['.......', '...X...', '...X...', '.XXXXX.', '...X...', '...X...', '.......'],\n  minus: ['.......', '.......', '.......', '.XXXXX.', '.......', '.......', '.......'],\n  warn: ['...X...', '..XXX..', '..X.X..', '.XX.XX.', '.X...X.', 'XX.X.XX', 'XXXXXXX'],\n  spark: ['...X...', '...X...', '..XXX..', 'XXXXXXX', '..XXX..', '...X...', '...X...'],\n  lock: ['..XXX..', '.X...X.', '.X...X.', 'XXXXXXX', 'XXX.XXX', 'XXX.XXX', 'XXXXXXX'],\n  pin: ['.XXXXX.', '..XXX..', '..XXX..', '.XXXXX.', 'XXXXXXX', '...X...', '...X...'],\n  mail: ['.......', 'XXXXXXX', 'XX...XX', 'X.X.X.X', 'X..X..X', 'X.....X', 'XXXXXXX'],\n} as const;\n\n/** The marks the engine draws itself; a game adds its own with `registerGlyph`. */\nexport type BuiltInGlyph = keyof typeof BUILT_IN;\nexport type GlyphId = BuiltInGlyph | (string & {});\n\n/** Each glyph as [fill, path] pairs, built once: one pair in the text's colour, or one per tone. */\nconst LAYERS = new Map<string, { size: number; layers: [string, string][] }>();\n\n/** The cells of one letter as one SVG path of 1x1 squares. */\nexport function glyphPath(rows: readonly string[], letter: string): string {\n  return rows.flatMap((row, y) => [...row].flatMap((c, x) => (c === letter ? [`M${x} ${y}h1v1h-1z`] : []))).join('');\n}\n\n/** Adds a mark (or replaces one, a built-in included): a coin in the game's own colours, a class crest. */\nexport function registerGlyph(id: string, art: GlyphArt | readonly string[]): void {\n  const { rows, tones } = Array.isArray(art) ? { rows: art as readonly string[], tones: undefined } : (art as GlyphArt);\n  const size = Math.max(rows.length, ...rows.map((r) => r.length));\n  const layers: [string, string][] = [];\n  if (rows.some((r) => r.includes('X'))) layers.push(['currentColor', glyphPath(rows, 'X')]);\n  for (const [letter, fill] of Object.entries(tones ?? {})) layers.push([fill, glyphPath(rows, letter)]);\n  LAYERS.set(id, { size, layers });\n}\n\nfor (const [id, rows] of Object.entries(BUILT_IN)) registerGlyph(id, rows);\n\n/** Whether `id` has art (built in or registered). */\nexport function hasGlyph(id: string): boolean {\n  return LAYERS.has(id);\n}\n\nexport interface GlyphProps {\n  id: GlyphId;\n  /** Screen pixels per glyph pixel (default 2). */\n  scale?: number;\n  className?: string;\n  /** Spoken name; without it the mark is hidden from screen readers (it sits beside words that say it). */\n  label?: string;\n}\n\nexport const Glyph = memo(function Glyph({ id, scale = 2, className, label }: GlyphProps) {\n  const cx = useCx();\n  const art = LAYERS.get(id);\n  if (!art) return null;\n  const px = art.size * Math.max(1, Math.round(scale));\n  return (\n    <svg\n      className={cx(className ? `e1681-glyph ${className}` : 'e1681-glyph')}\n      width={px}\n      height={px}\n      viewBox={`0 0 ${art.size} ${art.size}`}\n      shapeRendering=\"crispEdges\"\n      role={label ? 'img' : undefined}\n      aria-label={label}\n      aria-hidden={label ? undefined : true}\n    >\n      {art.layers.map(([fill, d]) => (\n        <path key={fill} d={d} fill={fill} />\n      ))}\n    </svg>\n  );\n});\n"],"names":["BUILT_IN","LAYERS","glyphPath","rows","letter","row","y","c","x","registerGlyph","id","art","tones","size","r","layers","fill","hasGlyph","Glyph","memo","scale","className","label","cx","useCx","px","jsx","d"],"mappings":"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"}

package/dist/react/Modal.js

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

package/dist/react/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":["../../src/react/Modal.tsx"],"sourcesContent":["import { type ReactNode, useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { SCROLL_CLASS, useFitToViewport } from './useFitToViewport';\nimport { useUi, useCx } from './UiProvider';\n\nexport interface ModalProps {\n  /** Esc, or a press on the backdrop. */\n  onCancel: () => void;\n  /** Enter (a text field's own Enter included). */\n  onConfirm?: () => void;\n  /** The box's preferred width, px. */\n  width?: number;\n  role?: 'dialog' | 'alertdialog';\n  label?: string;\n  className?: string;\n  children: ReactNode;\n  /** Under the scrolling body, never scrolled away: the dialog's buttons. */\n  actions?: ReactNode;\n}\n\n/**\n * A dialog box over a backdrop, fitted into the viewport like a window (`fitToViewport`, centred in whole pixels) and\n * portalled to the `UiProvider`'s `portal`. Esc and Enter are caught on the window in the capture phase, so they do\n * not also close the window underneath or reach the game's keys.\n */\nexport function Modal({ onCancel, onConfirm, width, role = 'dialog', label, className, children, actions }: ModalProps) {\n  const cx = useCx();\n  const ui = useUi();\n  const ref = useRef<HTMLDivElement>(null);\n  useFitToViewport(ref, { enabled: true, ...(width !== undefined ? { width } : {}) });\n\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') onCancel();\n      else if (e.key === 'Enter' && onConfirm) onConfirm();\n      else return;\n      e.preventDefault();\n      e.stopImmediatePropagation();\n    };\n    window.addEventListener('keydown', onKey, true);\n    return () => window.removeEventListener('keydown', onKey, true);\n  }, [onCancel, onConfirm]);\n\n  const target = ui.portal();\n  const box = (\n    <div className={cx('e1681-backdrop')} onPointerDown={(e) => e.stopPropagation()} onClick={onCancel}>\n      <div\n        ref={ref}\n        className={cx(`e1681-dialog e1681-frame${className ? ` ${className}` : ''}`)}\n        role={role}\n        aria-modal=\"true\"\n        aria-label={label}\n        style={{ width }}\n        onClick={(e) => e.stopPropagation()}\n      >\n        <div className={cx(`e1681-dialog-body ${SCROLL_CLASS}`)}>{children}</div>\n        {actions !== undefined && <div className={cx('e1681-dialog-actions')}>{actions}</div>}\n      </div>\n    </div>\n  );\n  return target ? createPortal(box, target) : box;\n}\n"],"names":["Modal","onCancel","onConfirm","width","role","label","className","children","actions","cx","useCx","ui","useUi","ref","useRef","useFitToViewport","useEffect","onKey","e","target","box","jsx","jsxs","SCROLL_CLASS","createPortal"],"mappings":";;;;;AAyBO,SAASA,EAAM,EAAE,UAAAC,GAAU,WAAAC,GAAW,OAAAC,GAAO,MAAAC,IAAO,UAAU,OAAAC,GAAO,WAAAC,GAAW,UAAAC,GAAU,SAAAC,EAAA,GAAuB;AACtH,QAAMC,IAAKC,EAAA,GACLC,IAAKC,EAAA,GACLC,IAAMC,EAAuB,IAAI;AACvC,EAAAC,EAAiBF,GAAK,EAAE,SAAS,IAAM,GAAIV,MAAU,SAAY,EAAE,OAAAA,MAAU,CAAA,GAAK,GAElFa,EAAU,MAAM;AACd,UAAMC,IAAQ,CAACC,MAAqB;AAClC,UAAIA,EAAE,QAAQ,SAAU,CAAAjB,EAAA;AAAA,eACfiB,EAAE,QAAQ,WAAWhB,EAAW,CAAAA,EAAA;AAAA,UACpC;AACL,MAAAgB,EAAE,eAAA,GACFA,EAAE,yBAAA;AAAA,IACJ;AACA,kBAAO,iBAAiB,WAAWD,GAAO,EAAI,GACvC,MAAM,OAAO,oBAAoB,WAAWA,GAAO,EAAI;AAAA,EAChE,GAAG,CAAChB,GAAUC,CAAS,CAAC;AAExB,QAAMiB,IAASR,EAAG,OAAA,GACZS,IACJ,gBAAAC,EAAC,OAAA,EAAI,WAAWZ,EAAG,gBAAgB,GAAG,eAAe,CAAC,MAAM,EAAE,gBAAA,GAAmB,SAASR,GACxF,UAAA,gBAAAqB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAT;AAAA,MACA,WAAWJ,EAAG,2BAA2BH,IAAY,IAAIA,CAAS,KAAK,EAAE,EAAE;AAAA,MAC3E,MAAAF;AAAA,MACA,cAAW;AAAA,MACX,cAAYC;AAAA,MACZ,OAAO,EAAE,OAAAF,EAAA;AAAA,MACT,SAAS,CAAC,MAAM,EAAE,gBAAA;AAAA,MAElB,UAAA;AAAA,QAAA,gBAAAkB,EAAC,SAAI,WAAWZ,EAAG,qBAAqBc,CAAY,EAAE,GAAI,UAAAhB,GAAS;AAAA,QAClEC,MAAY,UAAa,gBAAAa,EAAC,OAAA,EAAI,WAAWZ,EAAG,sBAAsB,GAAI,UAAAD,EAAA,CAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEnF;AAEF,SAAOW,IAASK,EAAaJ,GAAKD,CAAM,IAAIC;AAC9C;"}

package/dist/react/Panel.js

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

package/dist/react/Panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","sources":["../../src/react/Panel.tsx"],"sourcesContent":["import { type CSSProperties, type ReactNode, useRef } from 'react';\nimport type { Point } from '../ui/layout/geometry';\nimport { Glyph } from './Glyph';\nimport { fillLabel } from './labels';\nimport { sheetScaleStyle } from './placement';\nimport { SCROLL_CLASS, useFitToViewport } from './useFitToViewport';\nimport { useUi, useCx } from './UiProvider';\n\nexport interface PanelProps {\n  title: ReactNode;\n  /** The close button's action; no close button without it. */\n  onClose?: () => void;\n  children?: ReactNode;\n  /** The width it wants, in px (its own units); default: as wide as its content. */\n  width?: number;\n  /** Where it wants to stand, screen px; default: centred. It is moved back inside the screen either way. */\n  at?: Point;\n  /** Under the scrolling body, never scrolled away (a row of buttons). */\n  footer?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n  /** The title as plain text, for the close button's spoken name when `title` is not a string. */\n  titleText?: string;\n}\n\n/**\n * A window that never overflows the screen: fitted by `fitToViewport` (moved inside the edges, cut to what is left,\n * shrunk to `minScale` when the `UiProvider` allows it) with its header kept and its body scrolling under it. Placed\n * in whole pixels by `left`/`top`, never centred with `translate(-50%)`, which stood an odd-width window half a pixel\n * off the grid and smeared every icon in it.\n *\n * On a touch screen it is a full-screen sheet instead (`.e1681-sheet`): no width of its own, the header put and the\n * body scrolling, laid out at the provider's `sheetScale`. A press inside never reaches the world under it.\n */\nexport function Panel({ title, onClose, children, width, at, footer, className, style, titleText }: PanelProps) {\n  const cx = useCx();\n  const ui = useUi();\n  const ref = useRef<HTMLDivElement>(null);\n  useFitToViewport(ref, { enabled: !ui.touch, ...(width !== undefined ? { width } : {}), ...(at ? { at } : {}) });\n  const name = titleText ?? (typeof title === 'string' ? title : '');\n  const header = (\n    <div className={cx('e1681-panel-header')}>\n      <h3 className={cx('e1681-panel-title')}>{title}</h3>\n      {onClose && (\n        <button type=\"button\" className={cx('e1681-close')} onClick={onClose} title={ui.labels.closeHint} aria-label={fillLabel(ui.labels.close, name).trim()}>\n          <Glyph id=\"close\" />\n        </button>\n      )}\n    </div>\n  );\n  const classes = ['e1681-panel', 'e1681-frame', ui.touch ? 'e1681-sheet' : '', className ?? ''].filter(Boolean).join(' ');\n  const own: CSSProperties = ui.touch ? { ...sheetScaleStyle(ui.sheetScale) } : { width };\n  return (\n    <div ref={ref} className={cx(classes)} style={{ ...own, ...style }} role=\"dialog\" aria-label={name || undefined} onPointerDown={(e) => e.stopPropagation()}>\n      {header}\n      <div className={cx(`e1681-panel-body ${SCROLL_CLASS}`)}>{children}</div>\n      {footer !== undefined && <div className={cx('e1681-panel-footer')}>{footer}</div>}\n    </div>\n  );\n}\n"],"names":["Panel","title","onClose","children","width","at","footer","className","style","titleText","cx","useCx","ui","useUi","ref","useRef","useFitToViewport","name","header","jsxs","jsx","fillLabel","Glyph","classes","own","sheetScaleStyle","e","SCROLL_CLASS"],"mappings":";;;;;;;AAkCO,SAASA,EAAM,EAAE,OAAAC,GAAO,SAAAC,GAAS,UAAAC,GAAU,OAAAC,GAAO,IAAAC,GAAI,QAAAC,GAAQ,WAAAC,GAAW,OAAAC,GAAO,WAAAC,EAAA,GAAyB;AAC9G,QAAMC,IAAKC,EAAA,GACLC,IAAKC,EAAA,GACLC,IAAMC,EAAuB,IAAI;AACvC,EAAAC,EAAiBF,GAAK,EAAE,SAAS,CAACF,EAAG,OAAO,GAAIR,MAAU,SAAY,EAAE,OAAAA,MAAU,CAAA,GAAK,GAAIC,IAAK,EAAE,IAAAA,EAAA,IAAO,CAAA,GAAK;AAC9G,QAAMY,IAAOR,MAAc,OAAOR,KAAU,WAAWA,IAAQ,KACzDiB,IACJ,gBAAAC,EAAC,OAAA,EAAI,WAAWT,EAAG,oBAAoB,GACrC,UAAA;AAAA,IAAA,gBAAAU,EAAC,MAAA,EAAG,WAAWV,EAAG,mBAAmB,GAAI,UAAAT,GAAM;AAAA,IAC9CC,KACC,gBAAAkB,EAAC,UAAA,EAAO,MAAK,UAAS,WAAWV,EAAG,aAAa,GAAG,SAASR,GAAS,OAAOU,EAAG,OAAO,WAAW,cAAYS,EAAUT,EAAG,OAAO,OAAOK,CAAI,EAAE,KAAA,GAC7I,UAAA,gBAAAG,EAACE,GAAA,EAAM,IAAG,QAAA,CAAQ,EAAA,CACpB;AAAA,EAAA,GAEJ,GAEIC,IAAU,CAAC,eAAe,eAAeX,EAAG,QAAQ,gBAAgB,IAAIL,KAAa,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GACjHiB,IAAqBZ,EAAG,QAAQ,EAAE,GAAGa,EAAgBb,EAAG,UAAU,MAAM,EAAE,OAAAR,EAAA;AAChF,SACE,gBAAAe,EAAC,OAAA,EAAI,KAAAL,GAAU,WAAWJ,EAAGa,CAAO,GAAG,OAAO,EAAE,GAAGC,GAAK,GAAGhB,KAAS,MAAK,UAAS,cAAYS,KAAQ,QAAW,eAAe,CAACS,MAAMA,EAAE,gBAAA,GACtI,UAAA;AAAA,IAAAR;AAAA,IACD,gBAAAE,EAAC,SAAI,WAAWV,EAAG,oBAAoBiB,CAAY,EAAE,GAAI,UAAAxB,GAAS;AAAA,IACjEG,MAAW,UAAa,gBAAAc,EAAC,OAAA,EAAI,WAAWV,EAAG,oBAAoB,GAAI,UAAAJ,EAAA,CAAO;AAAA,EAAA,GAC7E;AAEJ;"}

package/dist/react/PixelImage.js

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

package/dist/react/PixelImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PixelImage.js","sources":["../../src/react/PixelImage.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { pixelFit } from './placement';\nimport { useCx } from './UiProvider';\n\nexport interface PixelImageProps {\n  src: string;\n  /** The box, CSS px. */\n  width: number;\n  height: number;\n  /** Image pixels the URL already spends on one art pixel (a sheet painted at 4x). */\n  upscaled?: number;\n  /** Caps the multiple, so a row of sprites of different sizes keeps their sizes against each other. */\n  maxScale?: number;\n  alt?: string;\n  className?: string;\n}\n\n/**\n * A sprite whose size is not known ahead (a creature, a portrait), shown at the largest **whole** multiple of its\n * art that fits the box, centred (`pixelFit`); a sprite bigger than the box is shrunk by a whole divisor. Hidden until\n * it has loaded and been measured, so it never flashes at the wrong size.\n */\nexport function PixelImage({ src, width, height, upscaled = 1, maxScale, alt = '', className }: PixelImageProps) {\n  const cx = useCx();\n  const [art, setArt] = useState<{ src: string; w: number; h: number } | null>(null);\n  const size = art?.src === src ? pixelFit(art.w, art.h, width, height, maxScale) : null;\n  return (\n    <span className={cx(className ? `e1681-pixel-image ${className}` : 'e1681-pixel-image')} style={{ width, height }}>\n      <img\n        src={src}\n        alt={alt}\n        draggable={false}\n        style={size ? { width: size.width, height: size.height } : { visibility: 'hidden' }}\n        onLoad={(e) => {\n          const img = e.currentTarget;\n          setArt({ src, w: img.naturalWidth / upscaled, h: img.naturalHeight / upscaled });\n        }}\n      />\n    </span>\n  );\n}\n"],"names":["PixelImage","src","width","height","upscaled","maxScale","alt","className","cx","useCx","art","setArt","useState","size","pixelFit","jsx","e","img"],"mappings":";;;;AAsBO,SAASA,EAAW,EAAE,KAAAC,GAAK,OAAAC,GAAO,QAAAC,GAAQ,UAAAC,IAAW,GAAG,UAAAC,GAAU,KAAAC,IAAM,IAAI,WAAAC,EAAA,GAA8B;AAC/G,QAAMC,IAAKC,EAAA,GACL,CAACC,GAAKC,CAAM,IAAIC,EAAuD,IAAI,GAC3EC,IAAOH,GAAK,QAAQT,IAAMa,EAASJ,EAAI,GAAGA,EAAI,GAAGR,GAAOC,GAAQE,CAAQ,IAAI;AAClF,SACE,gBAAAU,EAAC,QAAA,EAAK,WAAWP,EAAGD,IAAY,qBAAqBA,CAAS,KAAK,mBAAmB,GAAG,OAAO,EAAE,OAAAL,GAAO,QAAAC,KACvG,UAAA,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAd;AAAA,MACA,KAAAK;AAAA,MACA,WAAW;AAAA,MACX,OAAOO,IAAO,EAAE,OAAOA,EAAK,OAAO,QAAQA,EAAK,OAAA,IAAW,EAAE,YAAY,SAAA;AAAA,MACzE,QAAQ,CAACG,MAAM;AACb,cAAMC,IAAMD,EAAE;AACd,QAAAL,EAAO,EAAE,KAAAV,GAAK,GAAGgB,EAAI,eAAeb,GAAU,GAAGa,EAAI,gBAAgBb,EAAA,CAAU;AAAA,MACjF;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/react/Select.js

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