@thunderclap-engine/engine 0.0.0-stage → 1.1.0

package/dist/ui/hud.js

@@ -0,0 +1,431 @@
+/**
+ * HUD widgets for a first- or third-person game (ws/ui-hud): a reticle at the centre of the
+ * frame, a meter, a strip of slots and a sliding heading indicator. Built on the overlay's
+ * layers, regions and theme tokens; noun-free (a meter is a meter, a strip is a strip).
+ *
+ * Lengths are **theme px**: `n` theme px is `n * var(--tc-space-1) / 4`, which is `n` design px
+ * of the frame on the `hud` layer, `n` CSS px in a region in `frame` units and `n / 2` CSS px in
+ * `css` units (phones), the same way the theme's own sizes follow `ui.units`.
+ *
+ * The reticle lives in `layers.hud` and hides itself while a modal panel is open (the layer is
+ * also `inert` then). Meters, slots and the heading go through `ui.layout` like other widgets,
+ * so they follow the regions and the modal rule the layout already applies.
+ */
+import { h } from './dom.js';
+import { createOrbMeter, meterClock, meterPlace, meterReducedMotion, readoutText, rearmTrail, TrailClock, trailTimings, } from './orb.js';
+/** `n` theme px (see the module comment). */
+export function themePx(n) {
+    return `calc(${n} * var(--tc-space-1) / 4)`;
+}
+const STYLE_ID = 'tc-ui-hud';
+/**
+ * The HUD stylesheet, under `.tc-overlay` and in `--tc-*` tokens only. Injected once per document
+ * by the first HUD widget (`ensureHudStyles`), next to the overlay's base sheet.
+ */
+export const HUD_CSS = `
+.tc-overlay .tc-reticle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
+  width: var(--tc-reticle-size); height: var(--tc-reticle-size); color: var(--tc-reticle-color, var(--tc-color-text));
+  pointer-events: none; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.7)); }
+.tc-overlay .tc-reticle[hidden], .tc-overlay .tc-reticle[data-modal] { display: none; }
+.tc-overlay .tc-reticle::before, .tc-overlay .tc-reticle::after { content: ''; position: absolute; background: currentColor; }
+.tc-overlay .tc-reticle[data-style="dot"]::before { inset: 25%; border-radius: 50%; }
+.tc-overlay .tc-reticle[data-style="dot"]::after { display: none; }
+.tc-overlay .tc-reticle[data-style="circle"]::before { inset: 0; border-radius: 50%; background: none;
+  border: var(--tc-reticle-stroke) solid currentColor; }
+.tc-overlay .tc-reticle[data-style="circle"]::after { left: 50%; top: 50%; width: var(--tc-reticle-stroke); height: var(--tc-reticle-stroke);
+  transform: translate(-50%, -50%); border-radius: 50%; }
+.tc-overlay .tc-reticle[data-style="cross"]::before { left: 0; right: 0; top: 50%; height: var(--tc-reticle-stroke); transform: translateY(-50%);
+  -webkit-mask: linear-gradient(90deg, #000 calc(50% - var(--tc-reticle-gap) / 2), transparent calc(50% - var(--tc-reticle-gap) / 2), transparent calc(50% + var(--tc-reticle-gap) / 2), #000 calc(50% + var(--tc-reticle-gap) / 2));
+  mask: linear-gradient(90deg, #000 calc(50% - var(--tc-reticle-gap) / 2), transparent calc(50% - var(--tc-reticle-gap) / 2), transparent calc(50% + var(--tc-reticle-gap) / 2), #000 calc(50% + var(--tc-reticle-gap) / 2)); }
+.tc-overlay .tc-reticle[data-style="cross"]::after { top: 0; bottom: 0; left: 50%; width: var(--tc-reticle-stroke); transform: translateX(-50%);
+  -webkit-mask: linear-gradient(180deg, #000 calc(50% - var(--tc-reticle-gap) / 2), transparent calc(50% - var(--tc-reticle-gap) / 2), transparent calc(50% + var(--tc-reticle-gap) / 2), #000 calc(50% + var(--tc-reticle-gap) / 2));
+  mask: linear-gradient(180deg, #000 calc(50% - var(--tc-reticle-gap) / 2), transparent calc(50% - var(--tc-reticle-gap) / 2), transparent calc(50% + var(--tc-reticle-gap) / 2), #000 calc(50% + var(--tc-reticle-gap) / 2)); }
+.tc-overlay .tc-reticle.tc-reticle-pulse { animation: tc-reticle-pulse var(--tc-duration-normal) var(--tc-easing); }
+@keyframes tc-reticle-pulse { 50% { transform: translate(-50%, -50%) scale(1.5); color: var(--tc-color-accent); } }
+
+.tc-overlay .tc-meter { display: flex; flex-direction: column; gap: var(--tc-space-1); width: var(--tc-meter-width, ${themePx(240)});
+  font-family: var(--tc-font-ui); font-size: var(--tc-font-size-s); color: var(--tc-color-text); pointer-events: none; }
+.tc-overlay .tc-meter-label { display: flex; justify-content: space-between; gap: var(--tc-space-2); line-height: 1.2;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
+.tc-overlay .tc-meter-label:empty { display: none; }
+.tc-overlay .tc-meter-track { position: relative; height: var(--tc-space-3); overflow: hidden; border-radius: var(--tc-radius-s);
+  background: var(--tc-color-surface); border: var(--tc-border-width) solid var(--tc-color-border); }
+.tc-overlay .tc-meter-fill { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(var(--tc-meter-value, 1));
+  background: var(--tc-color-accent); transition: transform var(--tc-duration-fast) var(--tc-easing); }
+.tc-overlay .tc-meter[data-tone="info"] .tc-meter-fill { background: var(--tc-color-info); }
+.tc-overlay .tc-meter[data-tone="success"] .tc-meter-fill { background: var(--tc-color-success); }
+.tc-overlay .tc-meter[data-tone="warn"] .tc-meter-fill { background: var(--tc-color-warn); }
+.tc-overlay .tc-meter[data-tone="danger"] .tc-meter-fill { background: var(--tc-color-danger); }
+.tc-overlay .tc-meter-trail { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(var(--tc-meter-trail, 1));
+  background: var(--tc-color-meter-trail); transition: transform var(--tc-meter-trail-duration, 600ms) linear var(--tc-meter-trail-delay, 400ms); }
+.tc-overlay .tc-meter[data-color] .tc-meter-fill { background: var(--tc-meter-color); }
+.tc-overlay .tc-meter[data-reduced] .tc-meter-fill { transition: none; }
+@media (prefers-reduced-motion: reduce) { .tc-overlay .tc-meter-trail { display: none; } }
+
+.tc-overlay .tc-slots { display: flex; gap: var(--tc-space-2); pointer-events: none; font-family: var(--tc-font-ui); }
+.tc-overlay .tc-slot { position: relative; display: grid; place-items: center; width: var(--tc-slot-size, ${themePx(72)}); height: var(--tc-slot-size, ${themePx(72)});
+  border-radius: var(--tc-radius-m); background: var(--tc-color-surface); border: var(--tc-border-width) solid var(--tc-color-border);
+  color: var(--tc-color-text); font-size: var(--tc-font-size-s); overflow: hidden;
+  transition: border-color var(--tc-duration-fast), transform var(--tc-duration-fast), box-shadow var(--tc-duration-fast); }
+.tc-overlay .tc-slot[data-selected] { border-color: var(--tc-color-accent); box-shadow: 0 0 0 var(--tc-focus-ring) var(--tc-color-accent);
+  transform: translateY(calc(-1 * var(--tc-space-1))); }
+.tc-overlay .tc-slot-content { display: grid; place-items: center; width: 100%; height: 100%; text-align: center; line-height: 1.1; }
+.tc-overlay .tc-slot-content > canvas, .tc-overlay .tc-slot-content > img { max-width: 100%; max-height: 100%; }
+.tc-overlay .tc-slot-hint { position: absolute; left: var(--tc-space-1); top: var(--tc-space-1); padding: 0 var(--tc-space-1);
+  border-radius: var(--tc-radius-s); background: var(--tc-color-surface-alt); color: var(--tc-color-text-muted);
+  font-size: calc(var(--tc-font-size-s) * 0.7); line-height: 1.4; }
+.tc-overlay .tc-slot-hint:empty { display: none; }
+
+.tc-overlay .tc-heading { position: relative; width: var(--tc-heading-width, ${themePx(480)}); height: var(--tc-space-6); overflow: hidden;
+  pointer-events: none; font-family: var(--tc-font-ui); font-size: var(--tc-font-size-s); color: var(--tc-color-text);
+  -webkit-mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
+  mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
+.tc-overlay .tc-heading-strip { position: absolute; left: 0; top: 0; height: 100%; will-change: transform; }
+.tc-overlay .tc-heading-tick { position: absolute; bottom: 0; width: var(--tc-border-width); height: var(--tc-space-2);
+  background: var(--tc-color-text-muted); transform: translateX(-50%); }
+.tc-overlay .tc-heading-tick[data-major] { height: var(--tc-space-3); background: var(--tc-color-text); }
+.tc-overlay .tc-heading-label { position: absolute; top: 0; transform: translateX(-50%); line-height: 1.2; font-weight: 600; letter-spacing: 0.08em; }
+.tc-overlay .tc-heading-mark { position: absolute; left: 50%; top: 0; bottom: 0; width: var(--tc-border-width); transform: translateX(-50%);
+  background: var(--tc-color-accent); }
+`;
+/** Add the HUD stylesheet to `doc` once. */
+export function ensureHudStyles(doc) {
+    if (doc.getElementById(STYLE_ID))
+        return;
+    const style = doc.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = HUD_CSS;
+    doc.head.appendChild(style);
+}
+const PULSE_CLASS = 'tc-reticle-pulse';
+const PULSE_FALLBACK_MS = 400;
+/** A reticle centred on the frame, on the `hud` layer; hidden while a modal panel is open. */
+export function createReticle(host, opts = {}) {
+    const doc = host.layers.hud.ownerDocument;
+    ensureHudStyles(doc);
+    const size = opts.size ?? 24;
+    const el = h('div', {
+        class: 'tc-reticle',
+        'aria-hidden': 'true',
+        dataset: { style: opts.style ?? 'dot' },
+        style: {
+            '--tc-reticle-size': themePx(size),
+            '--tc-reticle-gap': themePx(opts.gap ?? 6),
+            '--tc-reticle-stroke': themePx(Math.max(2, Math.round(size / 12))),
+            ...(opts.color ? { '--tc-reticle-color': opts.color } : {}),
+        },
+    });
+    host.layers.hud.append(el);
+    const modal = () => el.toggleAttribute('data-modal', host.stack.hasModal);
+    modal();
+    const unwatch = host.stack.onChange(modal);
+    let pulseTimer = null;
+    const endPulse = () => {
+        if (pulseTimer)
+            clearTimeout(pulseTimer);
+        pulseTimer = null;
+        el.classList.remove(PULSE_CLASS);
+    };
+    el.addEventListener('animationend', endPulse);
+    return {
+        el,
+        get visible() {
+            return !el.hidden;
+        },
+        get style() {
+            return el.dataset.style;
+        },
+        show() {
+            el.hidden = false;
+        },
+        hide() {
+            el.hidden = true;
+        },
+        pulse() {
+            // Restart: drop the class, reflow, add it again.
+            endPulse();
+            void el.offsetWidth;
+            el.classList.add(PULSE_CLASS);
+            // Reduced motion (or a test DOM) fires no animationend: time it out.
+            pulseTimer = setTimeout(endPulse, PULSE_FALLBACK_MS);
+        },
+        setStyle(style) {
+            el.dataset.style = style;
+        },
+        remove() {
+            endPulse();
+            unwatch();
+            el.remove();
+        },
+    };
+}
+/** A labelled bar with `role="meter"`, in a layout region. */
+export function createMeter(host, opts = {}) {
+    if (opts.shape === 'orb')
+        return createOrbMeter(host, opts);
+    ensureHudStyles(host.layers.hud.ownerDocument);
+    let max = opts.max ?? 1;
+    let value = Math.min(max, Math.max(0, opts.value ?? max));
+    const reduced = opts.trail || opts.reducedMotion ? meterReducedMotion(host, opts) : false;
+    const timings = trailTimings(opts, reduced);
+    const clock = timings ? new TrailClock(timings.delay, timings.duration, meterClock(opts)) : null;
+    const label = h('span', null, opts.label ?? '');
+    const readout = h('span', { class: 'tc-meter-readout' });
+    const fill = h('div', { class: 'tc-meter-fill' });
+    const trailEl = clock ? h('div', { class: 'tc-meter-trail' }) : null;
+    const style = {};
+    if (opts.width !== undefined)
+        style['--tc-meter-width'] = themePx(opts.width);
+    if (opts.color)
+        style['--tc-meter-color'] = opts.color;
+    if (timings) {
+        style['--tc-meter-trail-delay'] = `${timings.delay}ms`;
+        style['--tc-meter-trail-duration'] = `${timings.duration}ms`;
+    }
+    const el = h('div', {
+        class: 'tc-meter',
+        role: 'meter',
+        'aria-label': opts.label,
+        'aria-valuemin': '0',
+        dataset: {
+            tone: opts.tone ?? 'accent',
+            ...(reduced ? { reduced: '' } : {}),
+            ...(opts.color ? { color: '' } : {}),
+        },
+        style: Object.keys(style).length > 0 ? style : undefined,
+    }, h('div', { class: 'tc-meter-label' }, label, readout), h('div', { class: 'tc-meter-track' }, trailEl, fill));
+    const frac = () => (max > 0 ? value / max : 0);
+    /** The band's timings were rewritten by a re-arm after a move (ws/ui-11). */
+    let rearmed = false;
+    if (clock && trailEl) {
+        clock.reset(frac());
+        trailEl.style.setProperty('--tc-meter-trail', String(frac()));
+    }
+    const write = () => {
+        el.setAttribute('aria-valuenow', String(value));
+        el.setAttribute('aria-valuemax', String(max));
+        fill.style.setProperty('--tc-meter-value', String(frac()));
+        if (opts.format) {
+            const text = opts.format(value, max);
+            el.setAttribute('aria-valuetext', text);
+            readout.textContent = text;
+        }
+        else if (opts.readout && opts.readout !== 'none') {
+            const text = readoutText(opts.readout, value, max);
+            if (opts.readout === 'percent')
+                el.setAttribute('aria-valuetext', text);
+            readout.textContent = text;
+        }
+        if (clock && trailEl && timings) {
+            if (rearmed) {
+                rearmed = false;
+                el.style.setProperty('--tc-meter-trail-delay', `${timings.delay}ms`);
+                el.style.setProperty('--tc-meter-trail-duration', `${timings.duration}ms`);
+            }
+            clock.retarget(frac());
+            trailEl.style.setProperty('--tc-meter-trail', String(frac()));
+        }
+    };
+    write();
+    const handle = host.layout.add(el, {
+        place: meterPlace(opts.place, opts.region),
+        order: opts.order,
+        // A move cancels the band's transition: run the rest of it from where the model is.
+        onMove: () => {
+            if (clock && trailEl && rearmTrail(clock, trailEl, 'meter', trailEl, el))
+                rearmed = true;
+        },
+    });
+    return {
+        el,
+        shape: 'bar',
+        get value() {
+            return value;
+        },
+        get max() {
+            return max;
+        },
+        get trail() {
+            return clock ? Math.max(value, clock.at() * max) : value;
+        },
+        size: undefined,
+        get region() {
+            return handle.region;
+        },
+        set(v, m) {
+            if (m !== undefined)
+                max = Math.max(0, m);
+            const next = Math.min(max, Math.max(0, v));
+            if (next === value && m === undefined)
+                return;
+            value = next;
+            write();
+        },
+        setTone(tone) {
+            el.dataset.tone = tone;
+        },
+        setColor(color) {
+            if (color)
+                el.style.setProperty('--tc-meter-color', color);
+            else
+                el.style.removeProperty('--tc-meter-color');
+            el.toggleAttribute('data-color', !!color);
+        },
+        setSize() { },
+        setPlace(place) {
+            handle.setPlace(meterPlace(place, undefined));
+        },
+        remove() {
+            handle.remove();
+            el.remove();
+        },
+    };
+}
+/** A strip of equal slots with key-hint badges and one selected highlight. */
+export function createSlots(host, opts) {
+    ensureHudStyles(host.layers.hud.ownerDocument);
+    const count = Math.max(0, Math.floor(opts.count));
+    const items = [];
+    const contents = [];
+    const hints = [];
+    for (let i = 0; i < count; i++) {
+        const hint = h('span', { class: 'tc-slot-hint', 'aria-hidden': 'true' }, opts.hints?.[i] ?? '');
+        const content = h('div', { class: 'tc-slot-content' });
+        const item = h('div', { class: 'tc-slot', role: 'option', 'aria-selected': 'false', dataset: { index: String(i) } }, hint, content);
+        items.push(item);
+        contents.push(content);
+        hints.push(hint);
+    }
+    const el = h('div', {
+        class: 'tc-slots',
+        role: 'listbox',
+        'aria-label': opts.label ?? 'Slots',
+        style: opts.size !== undefined ? { '--tc-slot-size': themePx(opts.size) } : undefined,
+    }, ...items);
+    let selected = -1;
+    const wrap = (i) => (count === 0 ? -1 : ((Math.trunc(i) % count) + count) % count);
+    const select = (i) => {
+        const next = wrap(i);
+        if (next === selected)
+            return;
+        const prev = items[selected];
+        if (prev) {
+            prev.removeAttribute('data-selected');
+            prev.setAttribute('aria-selected', 'false');
+        }
+        selected = next;
+        const cur = items[selected];
+        if (cur) {
+            cur.setAttribute('data-selected', '');
+            cur.setAttribute('aria-selected', 'true');
+        }
+    };
+    select(opts.selected ?? 0);
+    const handle = host.layout.add(el, {
+        place: { default: opts.region ?? 'bottom' },
+        order: opts.order,
+    });
+    return {
+        el,
+        count,
+        get selected() {
+            return selected;
+        },
+        select,
+        setContent(i, content) {
+            const c = contents[i];
+            if (!c)
+                return;
+            if (content === '')
+                c.replaceChildren();
+            else
+                c.replaceChildren(content);
+        },
+        setHint(i, hint) {
+            const hEl = hints[i];
+            if (hEl)
+                hEl.textContent = hint;
+        },
+        remove() {
+            handle.remove();
+            el.remove();
+        },
+    };
+}
+/** Degrees in `[0, 360)`. */
+export function wrapDegrees(deg) {
+    const d = deg % 360;
+    return d < 0 ? d + 360 : d;
+}
+/** The strip offset (theme px) for a yaw, given the visible width and span. */
+export function headingOffset(yawRadians, width, span) {
+    const deg = wrapDegrees((yawRadians * 180) / Math.PI);
+    return width / 2 - deg * (width / span);
+}
+/**
+ * A sliding cardinal strip: the four labels and ticks at every `tickEvery` degrees, drawn over
+ * two turns (−180° to 540°) so the strip never jumps at north. The centre mark shows the yaw.
+ */
+export function createHeading(host, opts = {}) {
+    ensureHudStyles(host.layers.hud.ownerDocument);
+    const width = opts.width ?? 480;
+    const span = opts.span ?? 90;
+    const tickEvery = opts.tickEvery ?? 15;
+    const labels = opts.labels ?? ['N', 'E', 'S', 'W'];
+    const ppd = width / span;
+    const strip = h('div', { class: 'tc-heading-strip', 'aria-hidden': 'true' });
+    for (let deg = -180; deg <= 540; deg += tickEvery) {
+        const major = deg % 90 === 0;
+        strip.append(h('span', {
+            class: 'tc-heading-tick',
+            'data-major': major,
+            style: { left: themePx(deg * ppd) },
+        }));
+        if (major) {
+            const label = labels[wrapDegrees(deg) / 90] ?? '';
+            strip.append(h('span', { class: 'tc-heading-label', style: { left: themePx(deg * ppd) } }, label));
+        }
+    }
+    const el = h('div', {
+        class: 'tc-heading',
+        role: 'img',
+        'aria-label': 'Heading',
+        style: { '--tc-heading-width': themePx(width) },
+    }, strip, h('span', { class: 'tc-heading-mark', 'aria-hidden': 'true' }));
+    let yaw = Number.NaN;
+    let offset = Number.NaN;
+    let lastDeg = -1;
+    const setYaw = (radians) => {
+        yaw = radians;
+        const next = headingOffset(radians, width, span);
+        if (next === offset)
+            return;
+        offset = next;
+        strip.style.transform = `translate3d(${themePx(offset)}, 0, 0)`;
+        const deg = Math.round(wrapDegrees((radians * 180) / Math.PI));
+        if (deg !== lastDeg) {
+            lastDeg = deg;
+            el.setAttribute('aria-label', `Heading ${deg}°`);
+        }
+    };
+    setYaw(0);
+    const handle = host.layout.add(el, {
+        place: { default: opts.region ?? 'top' },
+        order: opts.order,
+    });
+    return {
+        el,
+        strip,
+        get yaw() {
+            return yaw;
+        },
+        get offset() {
+            return offset;
+        },
+        setYaw,
+        remove() {
+            handle.remove();
+            el.remove();
+        },
+    };
+}

package/dist/ui/index.d.ts

@@ -0,0 +1,37 @@
+export type { AnchorFrame } from './anchor.js';
+export { type AnchorCamera, type AnchorHandle, type AnchorOptions, type AnchorRect, type AnchorSurface, Anchors, type AnchorsOptions, } from './anchor.js';
+export { CaptionCard, type CaptionOptions, type Corner, cornerOrder, overlapArea, type ReadingTimeOptions, readingTimeMs, revealDelayMs, type SayOptions, } from './caption.js';
+export { type CursorHost, type CursorOptions, type CursorRepeat, createCursor, ensureCursorStyles, pickTarget, type WorldCursor, type WorldTarget, } from './cursor.js';
+export { append, type Child, focusableWithin, h } from './dom.js';
+export { createFloats, ensureFloatsStyles, type Floats, type FloatsHost, type FloatsOptions, type FloatTextOptions, } from './floats.js';
+export { createHeading, createMeter, createReticle, createSlots, ensureHudStyles, type Heading, type HeadingOptions, type HudHost, headingOffset, type Meter, type MeterOptions, type MeterReadout, type MeterShape, type MeterTone, type MeterTrailOptions, type Reticle, type ReticleOptions, type ReticleStyle, type Slots, type SlotsOptions, themePx, wrapDegrees, } from './hud.js';
+export { type CellItem, type CellRef, type DragLink, type DragPick, type DropSpot, type DropTarget, defaultInventoryLabels, ensureInventoryStyles, type GridCell, type InventoryHost, type InventoryLabels, iconNode, } from './inventory.js';
+export { type Card, type CardOptions, type CardPlacement, type CardRow, type CardSide, card, placeCard, } from './inventory-card.js';
+export { type ContextItem, type ContextList, type ContextListOptions, contextList, } from './inventory-context.js';
+export { createDragContext, type DragContext, type DragContextOptions, type SlotsTarget, type SlotsTargetOptions, slotsTarget, } from './inventory-drag.js';
+export { type Grid, type GridEntry, type GridOptions, grid, type PadAction, } from './inventory-grid.js';
+export { type Radial, type RadialItem, type RadialOptions, radial } from './inventory-radial.js';
+export { type BarName, type BarSize, type ClassifyInput, classifyFormFactor, defaultForms, effectiveInsets, FORM_FACTORS, type FormFactor, type FormSize, type FormSizes, type FormSpec, type FreePlacement, followSafeArea, formSize, formSpec, type Insets, type Layout, type LayoutHost, type LayoutOverflow, type LayoutSpec, type LayoutState, NO_INSETS, PHONE_MAX_SHORT_SIDE, PHONE_MAX_VIEW_SHORT, type Placement, parseAreas, placementFor, REGIONS, type RegionName, readSafeArea, resolveLayout, resolveTracks, type SafeAreaSource, type Track, type Units, type WidgetHandle, type WidgetOptions, } from './layout.js';
+export { activateLink, type ExternalLink, type ExternalLinkLabels, type ExternalLinkOptions, externalLink, } from './link.js';
+export { createLoading, ensureLoadingStyles, type LoadingHost, type LoadingOptions, type LoadingScreen, } from './loading.js';
+export { Loupe, type LoupeOptions, type LoupeView, loupeLeader } from './loupe.js';
+export { type MenuNavActions, type MenuNavInput, type MenuNavResult, menuNav, } from './menu-nav.js';
+export { type CanvasMinimap, type CanvasMinimapHost, type CanvasMinimapOptions, createCanvasMinimap, ensureCanvasMinimapStyles, type MinimapBackground, type MinimapKindStyle, type MinimapMarker, type MinimapMarkerPlace, type MinimapMarkerShape, type MinimapRotate, type MinimapShape, type MinimapWorld, } from './minimap-canvas.js';
+export { createNotifier, ensureNotifyStyles, type Notification, type Notifier, type NotifyAction, type NotifyOptions, type NotifyTone, } from './notify.js';
+export { createOrbMeter, ensureOrbStyles } from './orb.js';
+export { CONTROL_ID_ATTR, CONTROL_PAGE_ATTR, controlId, createOverlay, type Overlay, type OverlayOptions, type Rect, } from './overlay.js';
+export { defaultPads, type PadControl, type PadDir, type PadLike, PadNav, type PadNavOptions, readPad, } from './padnav.js';
+export { createPerfMonitor, createPerfOverlay, type PerfCorner, type PerfFrameStats, type PerfGpuStats, type PerfMonitor, type PerfMonitorOptions, type PerfOverlay, type PerfOverlayOptions, type PerfSample, type PerfSource, } from './perf.js';
+export { createRotateCard, type RotateCard, type RotateCardColors, type RotateCardOptions, } from './rotate-card.js';
+export type { ArrowNav, PadOwner } from './stack.js';
+export { type CloseReason, NO_RESTORE_FOCUS_ATTR, type PanelHandle, type PanelOptions, PanelStack, type PanelStackFocusOptions, } from './stack.js';
+export { ensureStyles, prefersReducedMotionIn } from './styles.js';
+export { applyTextScale, CSS_FONT_PX, DESIGN_FONT_PX, scaledPx, scaleFontSizes, scalePxCss, TEXT_MIN_VAR, TEXT_SCALE_VAR, textScaleTokens, toFrameUnits, UNIT_VAR, } from './text-scale.js';
+export { applyTheme, cssPxTheme, cssVar, defaultTheme, type ThemeOverrides, type ThemeTokens, themeToCss, tokenVar, } from './theme.js';
+export { Toaster, type ToastHandle, type ToastOptions, type ToastTone } from './toast.js';
+export { createTooltips, ensureTooltipStyles, placeTooltip, type Tooltip, type TooltipHost, type TooltipOptions, type TooltipPlace, type TooltipPlacement, type TooltipSide, type Tooltips, type TooltipTarget, } from './tooltip.js';
+export { type ButtonOptions, button, type SliderOptions, slider, toggle } from './widgets.js';
+export { type Bar, type BarOptions, bar, type ChoiceOption, cooldown, ensureWidgets2Styles, type KeyPrompt, type KeyPromptOptions, keyPrompt, reticle, type Segmented, type Select, type Stepper, type StepperOptions, segmented, select, stepper, type WidgetCooldown, type WidgetCooldownOptions, type WidgetReticle, type WidgetReticleOptions, type WidgetTone, } from './widgets-2.js';
+export { bearingOffset, type Compass, type CompassMarker, type CompassOptions, createCompass, createRing, ensureWidgets3Styles, type Ring, type RingOptions, type Widgets3Host, } from './widgets-3.js';
+export type { WorldPanelInput } from './world-panel/index.js';
+export { createWorldPanel, type FlowItem, type FlowOptions, flowLayout, makePanelCanvas, Painter, type PanelCanvas, type PanelContext2D, type PanelKeyEvent, type PanelRect, type PanelTheme, resolvePanelTheme, WorldButton, type WorldButtonOptions, WorldLabel, type WorldLabelOptions, WorldList, type WorldListOptions, WorldPanel, type WorldPanelHit, type WorldPanelOptions, type WorldPanelStats, WorldProgress, type WorldProgressOptions, WorldSlider, type WorldSliderOptions, WorldToggle, type WorldToggleOptions, WorldWidget, type WorldWidgetAlign, type WorldWidgetHost, type WorldWidgetSize, type WorldWidgetTone, worldButton, worldLabel, worldList, worldPanelTarget, worldProgress, worldSlider, worldToggle, } from './world-panel/index.js';

package/dist/ui/index.js

@@ -0,0 +1,34 @@
+export { Anchors, } from './anchor.js';
+export { CaptionCard, cornerOrder, overlapArea, readingTimeMs, revealDelayMs, } from './caption.js';
+export { createCursor, ensureCursorStyles, pickTarget, } from './cursor.js';
+export { append, focusableWithin, h } from './dom.js';
+export { createFloats, ensureFloatsStyles, } from './floats.js';
+export { createHeading, createMeter, createReticle, createSlots, ensureHudStyles, headingOffset, themePx, wrapDegrees, } from './hud.js';
+export { defaultInventoryLabels, ensureInventoryStyles, iconNode, } from './inventory.js';
+export { card, placeCard, } from './inventory-card.js';
+export { contextList, } from './inventory-context.js';
+export { createDragContext, slotsTarget, } from './inventory-drag.js';
+export { grid, } from './inventory-grid.js';
+export { radial } from './inventory-radial.js';
+export { classifyFormFactor, defaultForms, effectiveInsets, FORM_FACTORS, followSafeArea, formSize, formSpec, NO_INSETS, PHONE_MAX_SHORT_SIDE, PHONE_MAX_VIEW_SHORT, parseAreas, placementFor, REGIONS, readSafeArea, resolveLayout, resolveTracks, } from './layout.js';
+export { activateLink, externalLink, } from './link.js';
+export { createLoading, ensureLoadingStyles, } from './loading.js';
+export { Loupe, loupeLeader } from './loupe.js';
+export { menuNav, } from './menu-nav.js';
+export { createCanvasMinimap, ensureCanvasMinimapStyles, } from './minimap-canvas.js';
+export { createNotifier, ensureNotifyStyles, } from './notify.js';
+export { createOrbMeter, ensureOrbStyles } from './orb.js';
+export { CONTROL_ID_ATTR, CONTROL_PAGE_ATTR, controlId, createOverlay, } from './overlay.js';
+export { defaultPads, PadNav, readPad, } from './padnav.js';
+export { createPerfMonitor, createPerfOverlay, } from './perf.js';
+export { createRotateCard, } from './rotate-card.js';
+export { NO_RESTORE_FOCUS_ATTR, PanelStack, } from './stack.js';
+export { ensureStyles, prefersReducedMotionIn } from './styles.js';
+export { applyTextScale, CSS_FONT_PX, DESIGN_FONT_PX, scaledPx, scaleFontSizes, scalePxCss, TEXT_MIN_VAR, TEXT_SCALE_VAR, textScaleTokens, toFrameUnits, UNIT_VAR, } from './text-scale.js';
+export { applyTheme, cssPxTheme, cssVar, defaultTheme, themeToCss, tokenVar, } from './theme.js';
+export { Toaster } from './toast.js';
+export { createTooltips, ensureTooltipStyles, placeTooltip, } from './tooltip.js';
+export { button, slider, toggle } from './widgets.js';
+export { bar, cooldown, ensureWidgets2Styles, keyPrompt, reticle, segmented, select, stepper, } from './widgets-2.js';
+export { bearingOffset, createCompass, createRing, ensureWidgets3Styles, } from './widgets-3.js';
+export { createWorldPanel, flowLayout, makePanelCanvas, Painter, resolvePanelTheme, WorldButton, WorldLabel, WorldList, WorldPanel, WorldProgress, WorldSlider, WorldToggle, WorldWidget, worldButton, worldLabel, worldList, worldPanelTarget, worldProgress, worldSlider, worldToggle, } from './world-panel/index.js';

package/dist/ui/inventory-card.d.ts

@@ -0,0 +1,52 @@
+import { type InventoryHost } from './inventory.js';
+import type { Rect } from './overlay.js';
+import type { WidgetTone } from './widgets-2.js';
+export interface CardRow {
+    label: string;
+    value: string;
+    tone?: WidgetTone;
+    /** An arrow after the value: better, worse or the same as what the player has. */
+    compare?: 'up' | 'down' | 'same';
+}
+export interface CardOptions {
+    title: string;
+    subtitle?: string;
+    tone?: WidgetTone;
+    rows: CardRow[];
+    footer?: string;
+    /** Width, theme px. Default 280. */
+    width?: number;
+}
+export type CardPlacement = 'auto' | 'right' | 'left' | 'above' | 'below';
+export type CardSide = Exclude<CardPlacement, 'auto'>;
+export interface Card {
+    readonly element: HTMLElement;
+    /** Rewrite the content (DOM writes only where a field changed). */
+    set(opts: CardOptions): void;
+    /**
+     * Show beside `anchor` (an element, or a rect in the host's `hud`-layer CSS px), placed by
+     * `placeCard`. An element anchor gets `aria-describedby` while the card is visible.
+     */
+    show(anchor: HTMLElement | Rect, placement?: CardPlacement): void;
+    hide(): void;
+    readonly visible: boolean;
+    /** Where it landed last (`placeCard`'s choice), or null while hidden. */
+    readonly placement: CardSide | null;
+    remove(): void;
+}
+/**
+ * Where a card of `size` goes beside `anchor` inside `frame` (all in the same units). `auto`
+ * tries right, left, below, above and takes the first that fits, else the side with the most
+ * room; a named side flips to its opposite when it does not fit and the opposite does. The
+ * result is clamped into the frame on both axes. `gap` separates card and anchor.
+ */
+export declare function placeCard(anchor: Rect, size: {
+    width: number;
+    height: number;
+}, frame: Rect, placement?: CardPlacement, gap?: number): {
+    x: number;
+    y: number;
+    placement: CardSide;
+};
+/** An item card on the host's `hud` layer. See the module comment. */
+export declare function card(host: InventoryHost, opts: CardOptions): Card;