@ggts-sh/svelte 0.43.0

package/dist/legend/LegendTargets.svelte

@@ -0,0 +1,393 @@
+<script lang="ts">
+  /**
+   * Interactive legend hit targets + clear control for GGPlot.
+   * Host owns focus state machine, key index, and commit/preview side effects.
+   * Clear anchors off the pressed legend box (see resolveClearControlLayout).
+   */
+  import {
+    CLEAR_HIDE_DELAY_MS,
+    shouldRevealClearControl,
+    type ClearControlLayout,
+  } from "../assembly/layout.js";
+  import type { InteractiveLegendEntry, LegendEntryIdentity } from "./focus.js";
+
+  const {
+    entries,
+    previewIdentity = null,
+    pressedIdentity = null,
+    rovingIndex = 0,
+    sceneWidth: _sceneWidth,
+    /** Retained for caller layout parity; Clear is legend-relative, not scene-corner. */
+    sceneHeight: _sceneHeight,
+    /** Scene-local Clear position; null hides the control (no pressed legend). */
+    clearLayout = null,
+    onPreviewIndex,
+    onPreviewClear,
+    onPointerDown,
+    onPointerUp,
+    onPointerCancel,
+    onFocus,
+    onBlur,
+    onClick,
+    onKeyDown,
+    onClearPointerDown,
+    onClearPointerCancel,
+    onClearClick,
+  }: {
+    entries: readonly InteractiveLegendEntry[];
+    previewIdentity?: LegendEntryIdentity | null;
+    pressedIdentity?: LegendEntryIdentity | null;
+    rovingIndex?: number;
+    sceneWidth: number;
+    sceneHeight: number;
+    clearLayout?: ClearControlLayout | null;
+    onPreviewIndex: (index: number, source: "pointer") => void;
+    onPreviewClear: () => void;
+    onPointerDown: (event: PointerEvent, index: number) => void;
+    onPointerUp: (event: PointerEvent, index: number) => void;
+    onPointerCancel: () => void;
+    onFocus: (index: number) => void;
+    onBlur: (event: FocusEvent) => void;
+    onClick: (event: MouseEvent, index: number) => void;
+    onKeyDown: (event: KeyboardEvent, index: number) => void;
+    onClearPointerDown: (pointerType: string) => void;
+    onClearPointerCancel: () => void;
+    onClearClick: (event: MouseEvent) => void;
+  } = $props();
+
+  /** Pointer or focus is inside legend targets / Clear chrome. */
+  let chromeActive = $state(false);
+  /** Hide delay elapsed after leave — Clear fades so screenshots stay clean. */
+  let hideElapsed = $state(false);
+  let hideTimer: ReturnType<typeof setTimeout> | null = null;
+
+  const clearVisible = $derived(
+    shouldRevealClearControl({
+      pressed: clearLayout !== null,
+      chromeActive,
+      hideElapsed,
+    }),
+  );
+
+  function clearHideTimer(): void {
+    if (hideTimer === null) return;
+    clearTimeout(hideTimer);
+    hideTimer = null;
+  }
+
+  function pinChrome(): void {
+    clearHideTimer();
+    chromeActive = true;
+    hideElapsed = false;
+  }
+
+  function scheduleHide(): void {
+    chromeActive = false;
+    clearHideTimer();
+    hideTimer = setTimeout(() => {
+      hideElapsed = true;
+      hideTimer = null;
+    }, CLEAR_HIDE_DELAY_MS);
+  }
+
+  /**
+   * Chrome uses pointer-events:none so plot hit-testing still works; enter/leave
+   * therefore fire on the interactive children (targets + Clear), not the wrapper.
+   * relatedTarget checks keep the pin alive while moving between those children.
+   */
+  function stillInsideChrome(
+    current: EventTarget | null,
+    next: EventTarget | null,
+  ): boolean {
+    return (
+      current instanceof Element &&
+      next instanceof Node &&
+      current.closest(".gg-legend-chrome")?.contains(next) === true
+    );
+  }
+
+  function onChromeChildPointerLeave(event: PointerEvent): void {
+    if (stillInsideChrome(event.currentTarget, event.relatedTarget)) return;
+    scheduleHide();
+  }
+
+  function onChromeFocusOut(event: FocusEvent): void {
+    if (stillInsideChrome(event.currentTarget, event.relatedTarget)) return;
+    scheduleHide();
+  }
+
+  // Track pressed-ness as a boolean so parent re-renders that rebuild the
+  // clearLayout object do not restart the hide clock or fight pinChrome.
+  const clearPressed = $derived(clearLayout !== null);
+
+  // On a fresh press with idle chrome (touch commit, no hover), start the hide
+  // clock. If the pointer is already over a target from the click, stay pinned
+  // until leave/blur calls scheduleHide.
+  $effect(() => {
+    if (!clearPressed) {
+      clearHideTimer();
+      hideElapsed = false;
+      return;
+    }
+    if (chromeActive) {
+      clearHideTimer();
+      hideElapsed = false;
+      return;
+    }
+    clearHideTimer();
+    hideTimer = setTimeout(() => {
+      hideElapsed = true;
+      hideTimer = null;
+    }, CLEAR_HIDE_DELAY_MS);
+    return () => {
+      clearHideTimer();
+    };
+  });
+
+  function sameIdentity(
+    left: LegendEntryIdentity | null | undefined,
+    right: LegendEntryIdentity,
+  ): boolean {
+    return (
+      left !== null &&
+      left !== undefined &&
+      left.scale === right.scale &&
+      left.entryIndex === right.entryIndex
+    );
+  }
+
+  function targetAriaLabel(target: InteractiveLegendEntry): string {
+    const scale = target.identity.scale;
+    const aesthetics = target.legend.aesthetics ?? [scale];
+    return `${target.legend.title || scale}: ${target.entry.fullLabel ?? target.entry.label} (${aesthetics.join(" + ")} legend)`;
+  }
+
+  function targetLeft(target: InteractiveLegendEntry): number {
+    return (
+      target.legend.x +
+      (target.legend.direction === "horizontal" ? (target.entry.x ?? 0) : 0)
+    );
+  }
+
+  function targetWidth(target: InteractiveLegendEntry, index: number): number {
+    if (target.legend.direction !== "horizontal")
+      return Math.max(24, target.legend.width);
+    const start = target.entry.x ?? 0;
+    const next = entries[index + 1];
+    const end =
+      next?.legend === target.legend && next.entry.y === target.entry.y
+        ? (next.entry.x ?? target.legend.width)
+        : target.legend.width;
+    return Math.max(24, end - start);
+  }
+</script>
+
+{#if entries.length > 0 || clearLayout !== null}
+  <div
+    class="gg-legend-chrome"
+    role="presentation"
+    onfocusin={pinChrome}
+    onfocusout={onChromeFocusOut}
+  >
+    {#if entries.length > 0}
+      <div
+        class="gg-legend-targets"
+        role="group"
+        aria-label="Interactive legends"
+      >
+        {#each entries as target, index (`${target.identity.scale}:${target.identity.entryIndex}`)}
+          <button
+            type="button"
+            class="gg-legend-target"
+            class:gg-legend-target-active={sameIdentity(
+              previewIdentity,
+              target.identity,
+            )}
+            aria-label={targetAriaLabel(target)}
+            aria-pressed={sameIdentity(pressedIdentity, target.identity)}
+            tabindex={index === rovingIndex ? 0 : -1}
+            data-gg-legend-target
+            data-index={index}
+            style:left={`${targetLeft(target)}px`}
+            style:top={`${target.legend.y + target.entry.y}px`}
+            style:width={`${targetWidth(target, index)}px`}
+            style:height={`${Math.max(24, target.entry.height ?? 24)}px`}
+            onpointerenter={(event) => {
+              pinChrome();
+              if (event.pointerType !== "touch")
+                onPreviewIndex(index, "pointer");
+            }}
+            onpointerleave={(event) => {
+              onPreviewClear();
+              onChromeChildPointerLeave(event);
+            }}
+            onpointerdown={(event) => onPointerDown(event, index)}
+            onpointerup={(event) => onPointerUp(event, index)}
+            onpointercancel={() => onPointerCancel()}
+            onfocus={() => onFocus(index)}
+            onblur={onBlur}
+            onclick={(event) => onClick(event, index)}
+            onkeydown={(event) => onKeyDown(event, index)}
+          >
+            <span class="gg-legend-target-label">{target.entry.label}</span>
+          </button>
+        {/each}
+      </div>
+    {/if}
+    {#if clearLayout !== null}
+      <!-- clearLayout gates visibility (pressed legend scale). Anchored relative to
+           the pressed legend box (below right stacks, beside bottom strips) so
+           title/swatch labels stay readable. Fades after idle so screenshots of a
+           committed series stay clean; reappears on legend chrome hover/focus.
+           Smoke baseline: interaction-legend-focus-committed-light.png. -->
+      <button
+        type="button"
+        class="gg-legend-clear"
+        class:gg-legend-clear-faded={!clearVisible}
+        aria-label="Clear legend focus"
+        aria-hidden={!clearVisible ? true : undefined}
+        tabindex={clearVisible ? 0 : -1}
+        style:left={`${clearLayout.left}px`}
+        style:top={`${clearLayout.top}px`}
+        onpointerenter={pinChrome}
+        onpointerleave={onChromeChildPointerLeave}
+        onpointerdown={(event) => onClearPointerDown(event.pointerType)}
+        onpointercancel={() => onClearPointerCancel()}
+        onclick={(event) => onClearClick(event)}>Clear</button
+      >
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .gg-legend-chrome {
+    position: absolute;
+    inset: 0;
+    z-index: 5;
+    pointer-events: none;
+  }
+
+  .gg-legend-clear {
+    position: absolute;
+    z-index: 5;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    /* Compact row — matches legend entry height (AA 24px), not a 44×44 slab. */
+    min-width: 24px;
+    min-height: 24px;
+    height: 24px;
+    margin: 0;
+    border: 1px solid
+      var(--gg-tooltipBorder, var(--gg-theme-tooltipBorder, currentColor));
+    border-radius: 0.2rem;
+    padding: 0 0.4rem;
+    background: var(
+      --gg-tooltipPaper,
+      var(
+        --gg-tooltip-background,
+        var(--gg-theme-tooltipPaper, var(--gg-paper, #fff))
+      )
+    );
+    color: var(
+      --gg-tooltipInk,
+      var(
+        --gg-tooltip-foreground,
+        var(--gg-theme-tooltipInk, var(--gg-ink, #1f2328))
+      )
+    );
+    font: 600 0.75rem/1 var(--gg-font-family, system-ui, sans-serif);
+    letter-spacing: -0.01em;
+    white-space: nowrap;
+    pointer-events: auto;
+    cursor: pointer;
+    opacity: 1;
+    transition: opacity 180ms ease;
+  }
+
+  .gg-legend-clear-faded {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .gg-legend-clear:hover {
+    background: color-mix(
+      in srgb,
+      var(--gg-tooltipInk, var(--gg-theme-tooltipInk, var(--gg-ink, #1f2328)))
+        6%,
+      var(
+        --gg-tooltipPaper,
+        var(--gg-theme-tooltipPaper, var(--gg-paper, #fff))
+      )
+    );
+  }
+
+  .gg-legend-targets {
+    position: absolute;
+    inset: 0;
+    z-index: 5;
+    pointer-events: none;
+  }
+
+  .gg-legend-target {
+    position: absolute;
+    min-width: 24px;
+    min-height: 24px;
+    margin: 0;
+    border: 1px solid transparent;
+    border-radius: 3px;
+    padding: 0;
+    background: transparent;
+    color: transparent;
+    pointer-events: auto;
+    touch-action: manipulation;
+  }
+
+  .gg-legend-target:hover,
+  .gg-legend-target-active,
+  .gg-legend-target[aria-pressed="true"] {
+    border-color: var(
+      --gg-interactionInk,
+      var(--gg-theme-interactionInk, currentColor)
+    );
+    background: color-mix(in srgb, currentColor 7%, transparent);
+  }
+
+  .gg-legend-target:focus-visible {
+    outline: 2px solid var(--gg-focusRing, var(--gg-theme-focusRing, Highlight));
+    outline-offset: -2px;
+  }
+
+  .gg-legend-clear:focus-visible {
+    outline: 2px solid var(--gg-focusRing, var(--gg-theme-focusRing, Highlight));
+    outline-offset: 2px;
+  }
+
+  @media (forced-colors: active) {
+    .gg-legend-target:hover,
+    .gg-legend-target-active,
+    .gg-legend-target[aria-pressed="true"] {
+      border-color: Highlight;
+      background: Canvas;
+    }
+
+    .gg-legend-clear {
+      border-color: ButtonText;
+      background: Canvas;
+      color: CanvasText;
+    }
+  }
+
+  /* Local sr-only for target labels (GGPlot keeps its own .gg-sr-only for other chrome). */
+  .gg-legend-target-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+</style>

package/dist/legend/LegendTargets.svelte.d.ts

@@ -0,0 +1,31 @@
+/**
+   * Interactive legend hit targets + clear control for GGPlot.
+   * Host owns focus state machine, key index, and commit/preview side effects.
+   * Clear anchors off the pressed legend box (see resolveClearControlLayout).
+   */
+import { type ClearControlLayout } from "../assembly/layout.js";
+import type { InteractiveLegendEntry, LegendEntryIdentity } from "./focus.js";
+type $$ComponentProps = {
+    entries: readonly InteractiveLegendEntry[];
+    previewIdentity?: LegendEntryIdentity | null;
+    pressedIdentity?: LegendEntryIdentity | null;
+    rovingIndex?: number;
+    sceneWidth: number;
+    sceneHeight: number;
+    clearLayout?: ClearControlLayout | null;
+    onPreviewIndex: (index: number, source: "pointer") => void;
+    onPreviewClear: () => void;
+    onPointerDown: (event: PointerEvent, index: number) => void;
+    onPointerUp: (event: PointerEvent, index: number) => void;
+    onPointerCancel: () => void;
+    onFocus: (index: number) => void;
+    onBlur: (event: FocusEvent) => void;
+    onClick: (event: MouseEvent, index: number) => void;
+    onKeyDown: (event: KeyboardEvent, index: number) => void;
+    onClearPointerDown: (pointerType: string) => void;
+    onClearPointerCancel: () => void;
+    onClearClick: (event: MouseEvent) => void;
+};
+declare const LegendTargets: import("svelte").Component<$$ComponentProps, {}, "">;
+type LegendTargets = ReturnType<typeof LegendTargets>;
+export default LegendTargets;

package/dist/legend/entry-key-index.d.ts

@@ -0,0 +1 @@
+export { type LegendKeyIndexAdapter, buildLegendEntryKeyIndexForPlot, buildLegendEntryKeyIndex, } from "@ggts-sh/core/interaction";

package/dist/legend/entry-key-index.js

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

package/dist/legend/entry-key-index.svelte.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Legend entry → semantic-key index service.
+ *
+ * Owns the reactive index Map and keysForLegend lookup previously hosted on
+ * the semantic-key service (S13 access contract: reactive getters, not snapped
+ * Maps). Re-homes under legend/ so runtime/semantic-keys has zero legend
+ * imports (S16 ownership goal).
+ */
+import type { RenderModel } from "@ggts-sh/core";
+import type { LegendEntryAction } from "./focus.js";
+export type LegendEntryKeyIndexDeps = {
+    /** Reactive model source (thunk so `$derived` tracks host model updates). */
+    model: () => RenderModel | null;
+    /**
+     * Per-row semantic key lookup. Hosts pass `semanticKeys.keyAt(i)` — not the
+     * public `semanticKey(row, index)` method (which needs the row record).
+     */
+    keyAt: (rowIndex: number) => PropertyKey | null;
+};
+/**
+ * Structural access surface consumed by legend-focus (and any host that needs
+ * the entry→key index without depending on the full semantic-key service).
+ */
+export type LegendEntryKeyAccess = {
+    readonly legendEntryKeyIndex: ReadonlyMap<string, readonly PropertyKey[]>;
+    keysForLegend(action: LegendEntryAction): readonly PropertyKey[];
+};
+/**
+ * Create the legend entry-key index. Construction registers the `$derived.by`
+ * that rebuilds the index when `model` / `keyAt` reactive deps change.
+ * Call during host init at the same relative position the index used to occupy
+ * inside the semantic-key service (after semanticKeys, before inspection).
+ */
+export declare function createLegendEntryKeyIndex(deps: LegendEntryKeyIndexDeps): LegendEntryKeyAccess;

package/dist/legend/entry-key-index.svelte.js

@@ -0,0 +1,35 @@
+import { buildLegendEntryKeyIndexForPlot } from "./entry-key-index.js";
+import { keysForLegendEntry } from "./focus.js";
+/**
+ * Create the legend entry-key index. Construction registers the `$derived.by`
+ * that rebuilds the index when `model` / `keyAt` reactive deps change.
+ * Call during host init at the same relative position the index used to occupy
+ * inside the semantic-key service (after semanticKeys, before inspection).
+ */
+export function createLegendEntryKeyIndex(deps) {
+    const legendEntryKeyIndex = $derived.by(() => {
+        const model = deps.model();
+        return buildLegendEntryKeyIndexForPlot({
+            model: model === null
+                ? null
+                : {
+                    scene: model.scene,
+                    candidates: model.candidates,
+                    layerFields: model.layerFields,
+                    layerScaledConstants: model.layerScaledConstants,
+                    lineage: model.lineage,
+                    row: (rowIndex) => model.row(rowIndex),
+                },
+            semanticKey: (rowIndex) => deps.keyAt(rowIndex),
+        });
+    });
+    function keysForLegend(action) {
+        return keysForLegendEntry(legendEntryKeyIndex, action.identity);
+    }
+    return {
+        get legendEntryKeyIndex() {
+            return legendEntryKeyIndex;
+        },
+        keysForLegend,
+    };
+}

package/dist/legend/filter-state.svelte.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Legend-filter controller extracted from GGPlot for S2.
+ *
+ * Owns chart-local filter clauses, mode/capability reset effects, catalog
+ * reconciliation (phased registration), and toggle/reset side effects.
+ * Construction-time deriveds must NOT read `model` (declared later;
+ * construction-order DAG — model is used only from late catalog effects).
+ */
+import type { RenderModel, SceneDiscreteLegend, SceneLegendEntry } from "@ggts-sh/core";
+import type { PortableSpec } from "@ggts-sh/spec";
+import { type LegendFilterClause, type LegendFilterEvent, type LegendFilterInput } from "./filter.js";
+type ResolvedLegendFilterOptions = {
+    readonly mode: "exclude" | "include";
+    readonly multiple: boolean;
+};
+export type FilterableLegendEntry = {
+    readonly legend: SceneDiscreteLegend;
+    readonly entry: SceneLegendEntry;
+    readonly field: string;
+    readonly visible: boolean;
+};
+export type LegendFilterStateDeps = {
+    effectiveSpec: () => PortableSpec | null;
+    /** Raw prop; options are derived internally. */
+    legendFilterProp: () => LegendFilterInput;
+    onlegendfilter: () => ((event: LegendFilterEvent) => void) | undefined;
+    oninteraction: () => ((event: LegendFilterEvent) => void) | undefined;
+    /** Stable announce sink (not a getter). */
+    announce: (message: string) => void;
+    /**
+     * Used ONLY inside catalog effects (never at construction). Armed-getter
+     * construction tests enforce this construction-order DAG contract.
+     */
+    model: () => RenderModel | null;
+    /**
+     * Live filterable entries for catalog reconcile. May close over a later
+     * host `$derived` (handler/effect-only; not read at construction).
+     */
+    catalogEntries: () => readonly FilterableLegendEntry[];
+};
+export type LegendFilterState = {
+    readonly options: ResolvedLegendFilterOptions | null;
+    /** Effective clauses (capability-gated) — feeds the plot runtime getter. */
+    readonly filters: readonly LegendFilterClause[];
+    /**
+     * Reset-button condition: true when any local clause exists (not merely
+     * effective length — transient reconciliation can differ).
+     */
+    readonly hasActiveFilters: boolean;
+    computeEntries(model: RenderModel | null): FilterableLegendEntry[];
+    /**
+     * Toggle one legend entry. Returns the post-toggle visibility so the host
+     * can force the controlled checkbox DOM (Svelte's set_checked cache skips
+     * writes when its last value matches, and trusted clicks can mutate
+     * input.checked after the reactive flush).
+     */
+    toggle(target: FilterableLegendEntry, event: MouseEvent): boolean;
+    reset(event: MouseEvent): void;
+    setPointerType(type: string | null): void;
+};
+/**
+ * Create the legend-filter controller. Construction registers capability-reset,
+ * mode-reset, and catalog-reconcile effects (#627).
+ */
+export declare function createLegendFilterState(deps: LegendFilterStateDeps): LegendFilterState;
+export {};