@ggts-sh/svelte 0.43.0

package/dist/interaction/target.js

@@ -0,0 +1,68 @@
+/**
+ * Resolved target ownership (#1080).
+ *
+ * One module owns panel-scoped nearest (#787), the per-intent distance policy,
+ * and the candidate match that hover / tap / point-select all need. Callers
+ * stop each carrying their own `panelAtOrOnly().nearest()` and maxDistance.
+ *
+ * Does not own hit geometry (core) or the inspect pin lifecycle. Semantic
+ * keys stay on the host (`candidateSemanticKeys`). Reducer inspect payloads
+ * are built from CandidateMatch / CandidateFacts in inspection/frame.ts.
+ */
+import { panelBoundsFrom } from "../scene/geometry.js";
+/**
+ * Nearest-candidate radius (plot px) for point-tool click.
+ * Deliberate constant — distinct from inspect.maxDistance (default also 24,
+ * but hover/tap read config; point-select does not).
+ */
+export const POINT_SELECT_NEAREST_MAX_DISTANCE_PX = 24;
+/**
+ * Intent → nearest search params.
+ *
+ * | intent       | mode              | maxDistance                          |
+ * |--------------|-------------------|--------------------------------------|
+ * | hover        | inspect.mode      | inspect.maxDistance                  |
+ * | tap          | inspect.mode      | inspect.maxDistance                  |
+ * | point-select | always `"xy"`     | `POINT_SELECT_NEAREST_MAX_DISTANCE_PX` |
+ *
+ * Returns null when hover/tap has no inspect snapshot (nothing to resolve).
+ */
+export function targetSearch(intent, inspect) {
+    if (intent === "point-select") {
+        return {
+            mode: "xy",
+            maxDistance: POINT_SELECT_NEAREST_MAX_DISTANCE_PX,
+        };
+    }
+    if (inspect === null)
+        return null;
+    return {
+        mode: inspect.mode,
+        maxDistance: inspect.maxDistance,
+    };
+}
+/**
+ * Panel-scoped nearest for one intent. Sole call site of
+ * `panelAtOrOnly().nearest()` for hover / tap / point-select.
+ */
+export function resolveTarget(input) {
+    const search = input.search ?? targetSearch(input.intent, input.inspect);
+    if (search === null)
+        return null;
+    const panel = input.model.viewport.panelAtOrOnly(input.point);
+    if (panel === null)
+        return null;
+    const match = panel.nearest(input.point, search);
+    if (match === null)
+        return null;
+    return {
+        epoch: match.epoch,
+        candidateId: match.id,
+        panelId: match.panelId,
+        point: { x: match.x, y: match.y },
+        mode: match.mode,
+        distance: match.distance,
+        match,
+        panel: { id: panel.id, ...panelBoundsFrom(panel.bounds) },
+    };
+}

package/dist/interaction/transition-owner.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Cross-module interaction transition apply (issue #627).
+ *
+ * Pure decision tables live in inspection/teardown, surface/brush-finish, etc.
+ * This module owns only multi-module *side-effect application* after a plan is
+ * decided — not a method-forwarding port over sibling controllers.
+ */
+import type { InteractionTool } from "./interaction.js";
+import type { InspectionDismissPlan } from "../inspection/teardown.js";
+/** Surface ops required when applying an inspection dismiss plan across modules. */
+export type DismissSurfaceSink = {
+    clearBrush(): void;
+    chooseTool(next: InteractionTool): void;
+};
+/**
+ * Apply the cross-module tail of `planInspectionDismiss`.
+ * Local inspection clears stay in InspectionState; brush/tool live on surface.
+ */
+export declare function applyInspectionDismissSideEffects(plan: InspectionDismissPlan, surface: DismissSurfaceSink): void;

package/dist/interaction/transition-owner.js

@@ -0,0 +1,10 @@
+/**
+ * Apply the cross-module tail of `planInspectionDismiss`.
+ * Local inspection clears stay in InspectionState; brush/tool live on surface.
+ */
+export function applyInspectionDismissSideEffects(plan, surface) {
+    if (plan.clearBrush)
+        surface.clearBrush();
+    if (plan.returnToInspect)
+        surface.chooseTool("inspect");
+}

package/dist/interaction/wiring-advisories.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Ambiguous-wiring advisories (ADR 0013 audit): prop combinations that
+ * silently do nothing.
+ *
+ * Pure collection — assembly reads current prop snapshots into
+ * {@link collectWiringDiagnostics} from a `$derived`. Delivery (once per
+ * code:prop per plot instance) stays in assembly.
+ */
+import { type InteractionDiagnostic } from "./interaction-diagnostics.js";
+/** Handler prop → matching capability prop. */
+declare const HANDLER_CAPABILITY_PAIRS: readonly [readonly ["oninspect", "inspect"], readonly ["onselect", "select"], readonly ["onzoom", "zoom"], readonly ["onlegendfocus", "legendFocus"], readonly ["onlegendfilter", "legendFilter"]];
+type WiringHandlerName = (typeof HANDLER_CAPABILITY_PAIRS)[number][0];
+type WiringCapabilityName = (typeof HANDLER_CAPABILITY_PAIRS)[number][1];
+/**
+ * Full handler/capability bags (not Partial): missing keys would silently
+ * drop advisories when the pair table grows. Call sites must list every
+ * entry from HANDLER_CAPABILITY_PAIRS.
+ */
+export type WiringDiagnosticInput = {
+    readonly interactionScope: unknown;
+    readonly interaction: unknown;
+    /** Present handlers only need defined vs undefined; values are not inspected. */
+    readonly handlers: Record<WiringHandlerName, unknown>;
+    /** Capability "requested" means not undefined and not false. */
+    readonly capabilities: Record<WiringCapabilityName, unknown>;
+};
+/**
+ * Collect scope-without-controller and handler-without-capability advisories
+ * from a plain snapshot. Re-run on every prop recompute so late-bound handlers
+ * still advise (assembly's once-per-code:prop Set handles dedup).
+ */
+export declare function collectWiringDiagnostics(input: WiringDiagnosticInput): InteractionDiagnostic[];
+export {};

package/dist/interaction/wiring-advisories.js

@@ -0,0 +1,46 @@
+/**
+ * Ambiguous-wiring advisories (ADR 0013 audit): prop combinations that
+ * silently do nothing.
+ *
+ * Pure collection — assembly reads current prop snapshots into
+ * {@link collectWiringDiagnostics} from a `$derived`. Delivery (once per
+ * code:prop per plot instance) stays in assembly.
+ */
+import { INTERACTION_DIAGNOSTIC_CATALOG, } from "./interaction-diagnostics.js";
+/** Handler prop → matching capability prop. */
+const HANDLER_CAPABILITY_PAIRS = [
+    ["oninspect", "inspect"],
+    ["onselect", "select"],
+    ["onzoom", "zoom"],
+    ["onlegendfocus", "legendFocus"],
+    ["onlegendfilter", "legendFilter"],
+];
+/**
+ * Collect scope-without-controller and handler-without-capability advisories
+ * from a plain snapshot. Re-run on every prop recompute so late-bound handlers
+ * still advise (assembly's once-per-code:prop Set handles dedup).
+ */
+export function collectWiringDiagnostics(input) {
+    const list = [];
+    if (input.interactionScope !== undefined && input.interaction === undefined) {
+        list.push({ ...INTERACTION_DIAGNOSTIC_CATALOG.INTERACTION_SCOPE_WITHOUT_CONTROLLER });
+    }
+    for (const [handler, capability] of HANDLER_CAPABILITY_PAIRS) {
+        const handlerValue = input.handlers[handler];
+        if (handlerValue === undefined)
+            continue;
+        // Capability "requested" (any value but undefined/false) is enough:
+        // requested-but-degraded configs already get their own diagnostics
+        // (requires-key, faceted zoom, ...) — never advise twice for one
+        // mistake.
+        const capabilityValue = input.capabilities[capability];
+        if (capabilityValue !== undefined && capabilityValue !== false)
+            continue;
+        list.push({
+            ...INTERACTION_DIAGNOSTIC_CATALOG.INTERACTION_HANDLER_WITHOUT_CAPABILITY,
+            prop: handler,
+            actual: capability,
+        });
+    }
+    return list;
+}

package/dist/interval/BoundsEditor.svelte

@@ -0,0 +1,332 @@
+<script lang="ts">
+  import { onMount, tick } from "svelte";
+
+  import {
+    formatBoundsDraft,
+    validateBoundsDraft,
+    type BoundsDraftErrors,
+    type BoundsEditorInput,
+    type BoundsInputSource,
+    type PreciseBoundsApplyEvent,
+  } from "./bounds-editor.js";
+
+  const {
+    input,
+    onapply,
+    oncancel = () => {},
+    returnFocus = null,
+  }: {
+    input: BoundsEditorInput;
+    onapply: (event: PreciseBoundsApplyEvent) => void;
+    oncancel?: () => void;
+    returnFocus?: HTMLElement | null;
+  } = $props();
+
+  const uid = $props.id();
+  const initial = (() => formatBoundsDraft(input))();
+  let lowerDraft = $state(initial.lower);
+  let upperDraft = $state(initial.upper);
+  let errors = $state<BoundsDraftErrors>({});
+  let lowerControl = $state<HTMLInputElement | HTMLSelectElement | null>(null);
+  let upperControl = $state<HTMLInputElement | HTMLSelectElement | null>(null);
+  let finished = false;
+  let pendingInputSource: BoundsInputSource = "keyboard";
+
+  const axisName = $derived(input.axis === "x" ? "horizontal" : "vertical");
+  const actionName = $derived(input.action === "select" ? "selection" : "zoom");
+  const fieldsetLabel = $derived(`Edit ${axisName} ${actionName} bounds`);
+  const hint = $derived(
+    input.scale === "time"
+      ? input.temporalKind === "monthDay"
+        ? "Enter a month-day as MM-DD (for example 04-01)."
+        : "Enter an ISO 8601 date, or a date-time with Z or an explicit offset."
+      : input.scale === "band"
+        ? "Endpoints include both selected categories."
+        : input.transform === "log10"
+          ? "Enter positive values in ascending domain order."
+          : input.transform === "sqrt"
+            ? "Enter zero or positive values in ascending domain order."
+            : "Enter values in ascending domain order.",
+  );
+
+  // A parent may switch axes or replace the committed interval while keeping
+  // the inline editor mounted. Only prop changes reset drafts; typing itself
+  // does not feed back into this effect.
+  $effect(() => {
+    const draft = formatBoundsDraft(input);
+    lowerDraft = draft.lower;
+    upperDraft = draft.upper;
+    errors = {};
+    finished = false;
+  });
+
+  function describedBy(field: "lower" | "upper"): string {
+    return `${uid}-hint${errors[field] === undefined ? "" : ` ${uid}-${field}-error`}`;
+  }
+
+  function restoreFocus(): void {
+    if (returnFocus === null) return;
+    returnFocus.focus();
+  }
+
+  function resetDraft(): void {
+    const draft = formatBoundsDraft(input);
+    lowerDraft = draft.lower;
+    upperDraft = draft.upper;
+    errors = {};
+  }
+
+  async function apply(): Promise<void> {
+    const inputSource = pendingInputSource;
+    pendingInputSource = "keyboard";
+    const result = validateBoundsDraft(
+      input,
+      lowerDraft,
+      upperDraft,
+      inputSource,
+    );
+    if (!result.ok) {
+      errors = result.errors;
+      await tick();
+      (errors.lower === undefined ? upperControl : lowerControl)?.focus();
+      return;
+    }
+    errors = {};
+    finished = true;
+    onapply(result.event);
+    restoreFocus();
+  }
+
+  function cancel(): void {
+    resetDraft();
+    finished = true;
+    oncancel();
+    restoreFocus();
+  }
+
+  function keydown(event: KeyboardEvent): void {
+    if (event.key !== "Escape") return;
+    event.preventDefault();
+    event.stopPropagation();
+    cancel();
+  }
+
+  function escapeKey(node: HTMLElement): { destroy: () => void } {
+    node.addEventListener("keydown", keydown);
+    return { destroy: () => node.removeEventListener("keydown", keydown) };
+  }
+
+  onMount(() => {
+    void tick().then(() => {
+      if (!finished) lowerControl?.focus();
+    });
+  });
+</script>
+
+<form
+  class="gg-bounds-editor"
+  onsubmit={(event) => {
+    event.preventDefault();
+    void apply();
+  }}
+>
+  <fieldset aria-label={fieldsetLabel} use:escapeKey>
+    <legend>Precise {axisName} bounds</legend>
+    <p class="gg-bounds-hint" id={`${uid}-hint`}>{hint}</p>
+    <div class="gg-bounds-fields">
+      <div class="gg-bounds-field">
+        <label for={`${uid}-lower`}>Lower bound</label>
+        {#if input.scale === "band"}
+          <select
+            id={`${uid}-lower`}
+            bind:this={lowerControl}
+            value={lowerDraft}
+            oninput={(event) => {
+              lowerDraft = event.currentTarget.value;
+            }}
+            aria-invalid={errors.lower === undefined ? undefined : "true"}
+            aria-describedby={describedBy("lower")}
+          >
+            {#each input.categories as category, index}
+              <option value={String(index)}>{category.label}</option>
+            {/each}
+          </select>
+        {:else}
+          <input
+            id={`${uid}-lower`}
+            bind:this={lowerControl}
+            value={lowerDraft}
+            oninput={(event) => {
+              lowerDraft = event.currentTarget.value;
+            }}
+            type={input.scale === "time" ? "text" : "number"}
+            inputmode={input.scale === "time" ? undefined : "decimal"}
+            step={input.scale === "linear" ? (input.step ?? "any") : undefined}
+            autocomplete="off"
+            aria-invalid={errors.lower === undefined ? undefined : "true"}
+            aria-describedby={describedBy("lower")}
+          />
+        {/if}
+        {#if errors.lower !== undefined}
+          <p class="gg-bounds-error" id={`${uid}-lower-error`} role="alert">
+            {errors.lower}
+          </p>
+        {/if}
+      </div>
+      <div class="gg-bounds-field">
+        <label for={`${uid}-upper`}>Upper bound</label>
+        {#if input.scale === "band"}
+          <select
+            id={`${uid}-upper`}
+            bind:this={upperControl}
+            value={upperDraft}
+            oninput={(event) => {
+              upperDraft = event.currentTarget.value;
+            }}
+            aria-invalid={errors.upper === undefined ? undefined : "true"}
+            aria-describedby={describedBy("upper")}
+          >
+            {#each input.categories as category, index}
+              <option value={String(index)}>{category.label}</option>
+            {/each}
+          </select>
+        {:else}
+          <input
+            id={`${uid}-upper`}
+            bind:this={upperControl}
+            value={upperDraft}
+            oninput={(event) => {
+              upperDraft = event.currentTarget.value;
+            }}
+            type={input.scale === "time" ? "text" : "number"}
+            inputmode={input.scale === "time" ? undefined : "decimal"}
+            step={input.scale === "linear" ? (input.step ?? "any") : undefined}
+            autocomplete="off"
+            aria-invalid={errors.upper === undefined ? undefined : "true"}
+            aria-describedby={describedBy("upper")}
+          />
+        {/if}
+        {#if errors.upper !== undefined}
+          <p class="gg-bounds-error" id={`${uid}-upper-error`} role="alert">
+            {errors.upper}
+          </p>
+        {/if}
+      </div>
+    </div>
+    <div class="gg-bounds-actions">
+      <button
+        type="submit"
+        onpointerdown={(event) => {
+          pendingInputSource =
+            event.pointerType === "touch" ? "touch" : "pointer";
+        }}
+        onpointercancel={() => (pendingInputSource = "keyboard")}>Apply</button
+      >
+      <button type="button" onclick={cancel}>Cancel</button>
+    </div>
+  </fieldset>
+</form>
+
+<style>
+  .gg-bounds-editor {
+    color: var(--gg-text, var(--gg-theme-text, currentColor));
+    font: inherit;
+  }
+
+  .gg-bounds-editor fieldset {
+    min-width: 0;
+    margin: 0;
+    border: 1px solid
+      var(--gg-panelBorder, var(--gg-theme-panelBorder, currentColor));
+    padding: 12px;
+  }
+
+  .gg-bounds-editor legend {
+    padding: 0 4px;
+    font-weight: 600;
+  }
+
+  .gg-bounds-hint,
+  .gg-bounds-error {
+    margin: 0 0 8px;
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+
+  .gg-bounds-error {
+    margin: 4px 0 0;
+    color: var(--gg-error, var(--gg-theme-error, #a40000));
+  }
+
+  .gg-bounds-fields {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+  }
+
+  .gg-bounds-field {
+    display: grid;
+    align-content: start;
+    gap: 4px;
+  }
+
+  .gg-bounds-field label {
+    font-weight: 500;
+  }
+
+  .gg-bounds-field input,
+  .gg-bounds-field select,
+  .gg-bounds-actions button {
+    box-sizing: border-box;
+    min-width: 44px;
+    min-height: 44px;
+    border: 1px solid
+      var(--gg-panelBorder, var(--gg-theme-panelBorder, currentColor));
+    border-radius: 2px;
+    padding: 8px 10px;
+    background: var(--gg-panelBg, var(--gg-theme-panelBg, Canvas));
+    color: inherit;
+    font: inherit;
+  }
+
+  .gg-bounds-field input:focus-visible,
+  .gg-bounds-field select:focus-visible,
+  .gg-bounds-actions button:focus-visible {
+    outline: 2px solid var(--gg-focusRing, var(--gg-theme-focusRing, Highlight));
+    outline-offset: 2px;
+  }
+
+  .gg-bounds-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-top: 12px;
+  }
+
+  .gg-bounds-actions button {
+    cursor: pointer;
+  }
+
+  @media (max-width: 359px) {
+    .gg-bounds-fields {
+      grid-template-columns: 1fr;
+    }
+
+    .gg-bounds-actions button {
+      flex: 1;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .gg-bounds-editor fieldset,
+    .gg-bounds-field input,
+    .gg-bounds-field select,
+    .gg-bounds-actions button {
+      border-color: CanvasText;
+    }
+
+    .gg-bounds-error {
+      color: MarkText;
+    }
+  }
+</style>

package/dist/interval/BoundsEditor.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type BoundsEditorInput, type PreciseBoundsApplyEvent } from "./bounds-editor.js";
+type $$ComponentProps = {
+    input: BoundsEditorInput;
+    onapply: (event: PreciseBoundsApplyEvent) => void;
+    oncancel?: () => void;
+    returnFocus?: HTMLElement | null;
+};
+declare const BoundsEditor: import("svelte").Component<$$ComponentProps, {}, "">;
+type BoundsEditor = ReturnType<typeof BoundsEditor>;
+export default BoundsEditor;

package/dist/interval/bounds-editor.d.ts

@@ -0,0 +1 @@
+export { type BoundsInputSource, type BoundsEditorInput, type PreciseBoundsApplyEvent, type BoundsDraftErrors, formatBoundsDraft, validateBoundsDraft, } from "@ggts-sh/core/interaction";

package/dist/interval/bounds-editor.js

@@ -0,0 +1,2 @@
+// Shared pure behavior used by React and Svelte.
+export { formatBoundsDraft, validateBoundsDraft, } from "@ggts-sh/core/interaction";

package/dist/interval/consumption.d.ts

@@ -0,0 +1 @@
+export { type IntervalConsumptionCandidate, consumeIntervalKeys, sameIntervalRecord, nextLocalIntervalRecords, recomputePanelIntervalProjection, type PanelIntervalLookupCandidate, recomputePanelIntervalFromLookup, } from "@ggts-sh/core/interaction";

package/dist/interval/consumption.js

@@ -0,0 +1,2 @@
+// Shared pure behavior used by React and Svelte.
+export { consumeIntervalKeys, sameIntervalRecord, nextLocalIntervalRecords, recomputePanelIntervalProjection, recomputePanelIntervalFromLookup, } from "@ggts-sh/core/interaction";

package/dist/interval/interval-bounds-state.svelte.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Bounds-editor state machine extracted from interval-state for S5.
+ *
+ * Owns the boundsEditor + boundsReturnFocus rune state, the boundsEditorInput
+ * derivation, the reactive cancel effect, and the open/cancel actions. The
+ * committed interval state, scoped store, interval-reconcile effect, and
+ * applyPreciseBounds stay in interval-state — applyPreciseBounds drives this
+ * module through the live `boundsEditor` getter + `cancel()`.
+ *
+ * Deps are LIVE getters — never snapshots. The factory is constructed
+ * synchronously during component init so the cancel effect registers at the
+ * derivation's original position (after the interval-reconcile effect).
+ */
+import type { RenderModel, ScenePanel } from "@ggts-sh/core";
+import type { PlotInteractionInterval } from "../interaction/interaction.js";
+import type { ContinuousZoomDomains } from "../scene/geometry.js";
+import type { BoundsEditorInput } from "./bounds-editor.js";
+type IntervalBoundsEditorRef = {
+    action: "select" | "zoom";
+    axis: "x" | "y";
+    panelId?: string;
+    panelLabel?: string;
+};
+export type IntervalBoundsEditorDeps = {
+    /** Trained render model (null pre-model). */
+    readonly model: () => RenderModel | null;
+    /** Stable recovery target for reactive cancellation. */
+    readonly captureSurface: () => HTMLDivElement | null;
+    /** Stable announcer sink. */
+    readonly announce: (message: string) => void;
+    /** Zoom controller read path for the zoom branch (live getter). */
+    readonly effectiveZoomDomains: () => ContinuousZoomDomains | null;
+    /** Owning controller's current interval record (live getter). */
+    readonly currentIntervalRecord: () => PlotInteractionInterval<PropertyKey> | null;
+    readonly currentIntervalPanel: () => ScenePanel | undefined;
+    /** Handler-only inspection fallback target for the select branch. */
+    readonly inspectionPanel: () => Readonly<{
+        id: string;
+    }> | null;
+    /** Panel label resolver owned by the interval controller. */
+    readonly intervalPanelLabel: (panel: ScenePanel) => string;
+};
+export type IntervalBoundsEditorState = {
+    /** Live getter — applyPreciseBounds reads `panelId` through it. */
+    readonly boundsEditor: Readonly<IntervalBoundsEditorRef> | null;
+    readonly boundsEditorInput: BoundsEditorInput | null;
+    readonly boundsReturnFocus: HTMLElement | null;
+    openBoundsEditor(action: "select" | "zoom", axis: "x" | "y", trigger: HTMLElement): void;
+    /** Close the editor without focus restoration (Apply paths cancel it). */
+    cancel(): void;
+};
+export declare function createIntervalBoundsEditor(deps: IntervalBoundsEditorDeps): IntervalBoundsEditorState;
+export {};