@honua/app-platform 0.1.2-beta.0 → 0.1.4-beta.0

package/web-components/measurement.js

@@ -34,6 +34,7 @@
  * @module
  */
 import { area as geodesicArea, length as geodesicLength } from "../geometry/index.js";
+import { renderCspSafeShadowHtml } from "./csp-styles.js";
 const globalDom = globalThis;
 const HTMLElementBase = globalDom.HTMLElement ?? class {
 };
@@ -49,6 +50,14 @@ export class HonuaMeasurementElement extends HTMLElementBase {
     #vertices = [];
     #finished = false;
     #result;
+    #messages = {};
+    get messages() {
+        return this.#messages;
+    }
+    set messages(messages) {
+        this.#messages = messages ?? {};
+        this.render();
+    }
     #connected = false;
     #disposeMapReadyListener;
     #clickListener;
@@ -353,33 +362,35 @@ export class HonuaMeasurementElement extends HTMLElementBase {
         const root = this.shadowRoot;
         if (!root || !this.#connected)
             return;
-        const label = this.#attr("label") ?? "Measure";
+        const focusedMode = root.activeElement?.getAttribute("data-measure-mode");
+        const label = this.#messages.label ?? this.#attr("label") ?? "Measure";
         const ready = this.#map !== undefined;
         const sketchActive = this.#mode !== "off" && this.#vertices.length > 0 && !this.#finished;
-        root.innerHTML = `
+        renderCspSafeShadowHtml(root, `
       <style>${structuralStyles()}</style>
       <section class="panel" part="panel" aria-label="${escapeAttribute(label)}">
         <div class="bar">
           <h2>${escapeHtml(label)}</h2>
-          <span class="state">${escapeHtml(ready ? "ready" : "waiting for map")}</span>
+          <span class="state">${escapeHtml(ready ? (this.#messages.ready ?? "ready") : (this.#messages.waitingForMap ?? "waiting for map"))}</span>
         </div>
-        <div class="segmented" role="group" aria-label="${escapeAttribute(`${label} mode`)}">
+        <div class="segmented" role="group" aria-label="${escapeAttribute(this.#messages.modeGroupLabel?.(label) ?? `${label} mode`)}">
           ${["off", "distance", "area"]
             .map((mode) => `
-            <button type="button" part="mode" data-measure-mode="${mode}" aria-pressed="${String(this.#mode === mode)}"${ready || mode === "off" ? "" : " disabled"}>${escapeHtml(modeLabel(mode))}</button>
+            <button type="button" part="mode" data-measure-mode="${mode}" aria-pressed="${String(this.#mode === mode)}"${ready || mode === "off" ? "" : " disabled"}>${escapeHtml(this.#messages.modeLabel?.[mode] ?? modeLabel(mode))}</button>
           `)
             .join("")}
         </div>
         <p class="value" part="value" role="status" aria-live="polite">${escapeHtml(this.#resultText())}</p>
         <div class="actions">
-          <button type="button" part="finish" data-measure-finish${sketchActive ? "" : " disabled"}>Finish</button>
-          <button type="button" part="cancel" data-measure-cancel${this.#vertices.length > 0 ? "" : " disabled"}>Cancel</button>
+          <button type="button" part="finish" data-measure-finish${sketchActive ? "" : " disabled"}>${escapeHtml(this.#messages.finish ?? "Finish")}</button>
+          <button type="button" part="cancel" data-measure-cancel${this.#vertices.length > 0 ? "" : " disabled"}>${escapeHtml(this.#messages.cancel ?? "Cancel")}</button>
         </div>
         <p class="hint">${escapeHtml(this.#mode === "off"
-            ? "Pick a mode, then click the map to add vertices."
-            : "Click adds a vertex; double-click or Finish completes; Escape or Cancel discards.")}</p>
+            ? (this.#messages.hintOff ?? "Pick a mode, then click the map to add vertices.")
+            : (this.#messages.hintActive ??
+                "Click adds a vertex; double-click or Finish completes; Escape or Cancel discards."))}</p>
       </section>
-    `;
+      `);
         root.querySelectorAll("button[data-measure-mode]").forEach((button) => {
             button.addEventListener("click", () => {
                 this.setMode((button.dataset.measureMode ?? "off"));
@@ -391,23 +402,35 @@ export class HonuaMeasurementElement extends HTMLElementBase {
         root.querySelector("button[data-measure-cancel]")?.addEventListener("click", () => {
             this.cancel();
         });
+        if (focusedMode) {
+            [...root.querySelectorAll("[data-measure-mode]")]
+                .find((button) => button.getAttribute("data-measure-mode") === focusedMode)
+                ?.focus({ preventScroll: true });
+        }
     }
     #resultText() {
         const result = this.#result;
         if (this.#mode === "off")
-            return "Measurement off.";
+            return this.#messages.offStatus ?? "Measurement off.";
         if (!result || this.#vertices.length === 0) {
-            return this.#mode === "distance" ? "Click the map to start a line." : "Click the map to outline an area.";
+            return this.#mode === "distance"
+                ? (this.#messages.startDistance ?? "Click the map to start a line.")
+                : (this.#messages.startArea ?? "Click the map to outline an area.");
         }
         if (this.#mode === "distance") {
-            if (result.distance === undefined)
-                return `${this.#vertices.length} vertex — add another to measure.`;
-            return `Distance: ${formatDistance(result.distance)}${this.#finished ? " (finished)" : ""}`;
+            if (result.distance === undefined) {
+                return (this.#messages.vertexDistance?.(this.#vertices.length) ??
+                    `${this.#vertices.length} vertex — add another to measure.`);
+            }
+            const value = formatDistance(result.distance);
+            return (this.#messages.distance?.(value, this.#finished) ?? `Distance: ${value}${this.#finished ? " (finished)" : ""}`);
         }
         if (result.area === undefined) {
-            return `${this.#vertices.length} of 3 vertices needed for an area.`;
+            return (this.#messages.vertexArea?.(this.#vertices.length) ??
+                `${this.#vertices.length} of 3 vertices needed for an area.`);
         }
-        return `Area: ${formatArea(result.area)}${this.#finished ? " (finished)" : ""}`;
+        const value = formatArea(result.area);
+        return this.#messages.area?.(value, this.#finished) ?? `Area: ${value}${this.#finished ? " (finished)" : ""}`;
     }
     #dispatchChange() {
         if (!globalDom.CustomEvent || typeof this.dispatchEvent !== "function")
@@ -477,9 +500,11 @@ function structuralStyles() {
       --honua-ui-accent-fg: #ffffff;
       box-sizing: border-box;
       color: var(--honua-ui-fg);
+      direction: inherit;
       display: block;
       font: 14px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     }
+    :host([dir="rtl"]) { direction: rtl; }
     *, *::before, *::after { box-sizing: inherit; }
     button {
       border: 1px solid var(--honua-ui-border);
@@ -505,14 +530,33 @@ function structuralStyles() {
       display: grid;
       gap: 10px;
       min-width: 180px;
-      padding: 10px;
+      padding-block: 10px;
+      padding-inline: 10px;
     }
+    button { padding-block: 0; padding-inline: 10px; }
     .bar { align-items: center; display: flex; gap: 8px; justify-content: space-between; }
     .state { color: var(--honua-ui-muted); font-size: 12px; }
     .segmented { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); }
+    .segmented button { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
     .actions { display: flex; gap: 6px; }
     .value { margin: 0; }
     .hint { color: var(--honua-ui-muted); font-size: 12px; margin: 0; }
+    @media (max-width: 320px) {
+      .panel { min-width: 0; }
+      .bar { align-items: flex-start; flex-direction: column; }
+      .segmented { grid-template-columns: minmax(0, 1fr); }
+      .actions { flex-wrap: wrap; }
+      .actions button { flex: 1 1 120px; min-width: 0; }
+      .hint { overflow-wrap: anywhere; }
+    }
+    @media (forced-colors: active), (prefers-contrast: more) {
+      .panel { background: Canvas; border-color: CanvasText; color: CanvasText; }
+      .state, .hint { color: GrayText; }
+      button { background: ButtonFace; border-color: ButtonText; color: ButtonText; }
+      button[aria-pressed="true"] { background: Highlight; border-color: Highlight; color: HighlightText; }
+      button:disabled { color: GrayText; }
+      button:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
+    }
   `;
 }
 function escapeHtml(value) {

package/web-components/time-slider.d.ts

@@ -0,0 +1,122 @@
+/**
+ * `<honua-time-slider>` — the time-slider UI over the existing temporal
+ * playback controller (issue #959, epic #486 "Esri Widget Cliff").
+ *
+ * Temporal playback has been headless since issue #497: `createTemporalPlayback`
+ * (`@honua/sdk-js/map`) owns the window, the frame timer, and the filter sinks
+ * that drive the map. This element is the missing *view* over that controller —
+ * it introduces no second temporal model, keeps no window state of its own, and
+ * never fetches or caches data. Every user gesture becomes one controller call,
+ * and every rendered value comes back from the controller's own `tick` /
+ * `play` / `pause` / `end` events. Layered over a realtime feed the controller
+ * keeps issue #393's snapshot-plus-delta semantics untouched, because the
+ * element adds nothing between the controller and its sinks.
+ *
+ * ## Wiring
+ * ```ts doc-test=skip reason="wiring snippet requires an application host"
+ * import { createTemporalPlayback } from "@honua/sdk-js/map";
+ * import "@honua/sdk-js/web-components";
+ *
+ * const playback = createTemporalPlayback({ handle: mounted, timeField: "event_time", ... });
+ * document.querySelector("honua-time-slider").playback = playback;
+ * ```
+ *
+ * The `playback` property (or the equivalent {@link HonuaTimeSliderElement.connect})
+ * accepts anything shaped like {@link HonuaTimeSliderPlayback}; the element
+ * never imports the controller module, so the component kit's bundle does not
+ * gain the `/map` entrypoint's closure.
+ *
+ * ## Attributes
+ * - `label` — accessible name and heading of the panel.
+ * - `unavailable-reason` — honest degraded state: set this when the mounted
+ *   source has no usable temporal metadata. The panel still renders, names the
+ *   reason, and disables every transport control rather than offering a
+ *   scrubber that cannot move anything.
+ * - `speeds` — comma-separated playback rate multipliers for the speed control
+ *   (default `0.5,1,2,4`). The control is hidden entirely when the bound
+ *   controller exposes no `setSpeed`.
+ *
+ * ## Events
+ * - `honua-time-change` — `CustomEvent<HonuaTimeChangeDetail>` whenever the
+ *   window moves (controller tick, scrub, step, or keyboard).
+ * - `honua-time-playback-change` — `CustomEvent<HonuaTimePlaybackChangeDetail>`
+ *   whenever transport or rate changes (play, pause, end, speed, binding).
+ *
+ * ## Accessibility
+ * The scrubber follows the WAI-ARIA slider pattern: `role="slider"` with
+ * `aria-valuemin` / `aria-valuemax` / `aria-valuenow` in epoch milliseconds,
+ * a human-readable `aria-valuetext` naming the window, `aria-orientation`, and
+ * an accessible name derived from the panel label. It is a single tab stop
+ * (`tabindex="0"`, pinned to `-1` while degraded) and is operable from the
+ * keyboard alone: ArrowRight/ArrowUp step forward, ArrowLeft/ArrowDown step
+ * back (mirrored on the inline axis under `dir="rtl"`), PageUp/PageDown move
+ * ten steps, Home/End jump to the first/last window. Transport is a
+ * `role="group"` of buttons with `aria-pressed` on the play/pause toggle, and
+ * the window readout is a `role="status"` live region.
+ *
+ * Rendering is CSP-safe (`renderCspSafeShadowHtml`) and the shadow tree is
+ * built exactly once: state updates mutate the existing nodes in place, so
+ * handlers never accumulate, an active drag is never torn out from under the
+ * pointer, and the focused control is never replaced. Theme via the shared
+ * `--honua-ui-*` custom properties.
+ *
+ * @module
+ */
+import type { HonuaComponentStatus, HonuaTimeSliderMessages, HonuaTimeSliderPlayback, HonuaTimeSliderWindow } from "./types.js";
+declare const HTMLElementBase: typeof HTMLElement;
+export declare class HonuaTimeSliderElement extends HTMLElementBase {
+    #private;
+    static get observedAttributes(): string[];
+    /** The temporal playback controller this slider drives and reflects. */
+    get playback(): HonuaTimeSliderPlayback | undefined;
+    set playback(playback: HonuaTimeSliderPlayback | undefined);
+    /** Binds a playback controller. Equivalent to assigning `.playback`. */
+    connect(playback: HonuaTimeSliderPlayback): void;
+    /** Caller-supplied message source; assigning re-renders the panel text. */
+    get messages(): HonuaTimeSliderMessages;
+    set messages(messages: HonuaTimeSliderMessages | undefined);
+    /**
+     * Why playback is unavailable, e.g. the mounted source exposes no temporal
+     * field. Reflects the `unavailable-reason` attribute.
+     */
+    get unavailableReason(): string | undefined;
+    set unavailableReason(reason: string | undefined);
+    /** Playback rate multipliers offered by the speed control. */
+    get speeds(): readonly number[];
+    set speeds(values: readonly number[] | undefined);
+    /** `unsupported` when a reason is declared, `ready` when bound, else `idle`. */
+    get status(): HonuaComponentStatus;
+    /** The controller's current window, when one is bound. */
+    get window(): HonuaTimeSliderWindow | undefined;
+    /** The controller's full playable extent, when one is bound. */
+    get extent(): HonuaTimeSliderWindow | undefined;
+    get playing(): boolean;
+    get speed(): number;
+    /** Window-start position within the scrubbable range, 0..1. */
+    get progress(): number;
+    play(): void;
+    pause(): void;
+    /** Play when paused, pause when playing. */
+    toggle(): void;
+    /** Moves the window `count` steps forward (positive) or back (negative). */
+    step(direction?: 1 | -1, count?: number): void;
+    /** Jumps the window start to `epochMs`, clamped by the controller. */
+    scrubTo(epochMs: number): void;
+    /** Changes the playback rate multiplier when the controller supports it. */
+    setSpeed(multiplier: number): void;
+    attributeChangedCallback(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Builds the shadow tree once per structural shape, then updates it in place.
+     * The shape only changes when the speed control appears/disappears or its
+     * options change, so a playback tick never replaces a node — which is what
+     * keeps handlers from accumulating and the focused control (or an active
+     * pointer drag) intact.
+     */
+    protected render(): void;
+}
+/** Registers `<honua-time-slider>`; skipped when the tag is already defined. */
+export declare function defineHonuaTimeSlider(registry?: CustomElementRegistry): void;
+export {};
+//# sourceMappingURL=time-slider.d.ts.map

package/web-components/time-slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-slider.d.ts","sourceRoot":"","sources":["../../../src/web-components/time-slider.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AAGH,OAAO,KAAK,EACV,oBAAoB,EAGpB,uBAAuB,EACvB,uBAAuB,EACvB,qBAAqB,EACtB,MAAM,YAAY,CAAC;AASpB,QAAA,MAAM,eAAe,EAAE,OAAO,WAAkF,CAAC;AAQjH,qBAAa,sBAAuB,SAAQ,eAAe;;IACzD,WAAkB,kBAAkB,IAAI,MAAM,EAAE,CAE/C;IAYD,wEAAwE;IACxE,IAAW,QAAQ,IAAI,uBAAuB,GAAG,SAAS,CAEzD;IAED,IAAW,QAAQ,CAAC,QAAQ,EAAE,uBAAuB,GAAG,SAAS,EAOhE;IAED,wEAAwE;IACjE,OAAO,CAAC,QAAQ,EAAE,uBAAuB,GAAG,IAAI;IAIvD,2EAA2E;IAC3E,IAAW,QAAQ,IAAI,uBAAuB,CAE7C;IAED,IAAW,QAAQ,CAAC,QAAQ,EAAE,uBAAuB,GAAG,SAAS,EAGhE;IAED;;;OAGG;IACH,IAAW,iBAAiB,IAAI,MAAM,GAAG,SAAS,CAEjD;IAED,IAAW,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,EAItD;IAED,8DAA8D;IAC9D,IAAW,MAAM,IAAI,SAAS,MAAM,EAAE,CAQrC;IAED,IAAW,MAAM,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,EAItD;IAID,gFAAgF;IAChF,IAAW,MAAM,IAAI,oBAAoB,CAGxC;IAED,0DAA0D;IAC1D,IAAW,MAAM,IAAI,qBAAqB,GAAG,SAAS,CAErD;IAED,gEAAgE;IAChE,IAAW,MAAM,IAAI,qBAAqB,GAAG,SAAS,CAErD;IAED,IAAW,OAAO,IAAI,OAAO,CAE5B;IAED,IAAW,KAAK,IAAI,MAAM,CAEzB;IAED,+DAA+D;IAC/D,IAAW,QAAQ,IAAI,MAAM,CAM5B;IAIM,IAAI,IAAI,IAAI;IAKZ,KAAK,IAAI,IAAI;IAIpB,4CAA4C;IACrC,MAAM,IAAI,IAAI;IAKrB,4EAA4E;IACrE,IAAI,CAAC,SAAS,GAAE,CAAC,GAAG,CAAC,CAAK,EAAE,KAAK,SAAI,GAAG,IAAI;IAYnD,sEAAsE;IAC/D,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAOrC,4EAA4E;IACrE,QAAQ,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IAWlC,wBAAwB,IAAI,IAAI;IAIhC,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAyCnC;;;;;;OAMG;IACH,SAAS,CAAC,MAAM,IAAI,IAAI;CA2UzB;AAED,gFAAgF;AAChF,wBAAgB,qBAAqB,CAAC,QAAQ,wBAA2B,GAAG,IAAI,CAK/E"}