@ggts-sh/svelte 0.43.0

package/dist/layers/plot-layer-contract.js

@@ -0,0 +1,29 @@
+import { createPlotLayer } from "./plot-layer.svelte.js";
+// Dead branch: type-checked, never executed (getContext must not run at load).
+if (false) {
+    // Positive: each kind accepts its own value type.
+    createPlotLayer("scale", () => ({}));
+    createPlotLayer("theme", () => "default");
+    createPlotLayer("coord", () => "flip");
+    createPlotLayer("facet", () => ({ wrap: "x" }));
+    createPlotLayer("labs", () => ({ title: "t" }));
+    createPlotLayer("guides", () => ({}));
+    createPlotLayer("legend", () => ({}));
+    // Negative: mismatched kind/value pairs must not compile.
+    // @ts-expect-error — labs value is not a scale fragment
+    createPlotLayer("scale", () => ({ title: "nope" }));
+    // @ts-expect-error — scales value is not a coord
+    createPlotLayer("coord", () => ({}));
+    // @ts-expect-error — flip is not a facet input
+    createPlotLayer("facet", () => "flip");
+    // @ts-expect-error — guides bag is not labs
+    createPlotLayer("labs", () => ({}));
+    // @ts-expect-error — legend options are not a guides bag
+    createPlotLayer("guides", () => ({}));
+    // @ts-expect-error — theme name is not a legend spec
+    createPlotLayer("legend", () => "dark");
+    // @ts-expect-error — mark is not a PlotLayerKind
+    createPlotLayer("mark", () => {
+        throw new Error("unreachable");
+    });
+}

package/dist/layers/plot-layer.svelte.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Shared factory for declaration-only non-mark plot layers (#786).
+ *
+ * Six grammar families (scale, coord, facet, labs, guides, legend) previously
+ * each shipped an identical `definedProps` + `create*Layer` pair. One module
+ * owns the ADR 0001 contract: register during component init with a live
+ * `value` getter over the child's `$props`, unregister in `onDestroy`.
+ *
+ * Theme stays in `theme/factory.svelte.ts` (role whitelist + ThemeName|ThemeSpec
+ * shape). Marks stay in `geoms/factory.svelte.ts` (GEOM_PARAM_KEYS whitelist).
+ * Guides' `splitChannel` stays in `guides/factory.svelte.ts` (real behaviour).
+ */
+import type { Layer } from "../geoms/registry.svelte.js";
+/** Non-mark layer kinds that register a live `value` getter. */
+type ValueLayer = Exclude<Layer, {
+    kind: "mark";
+}>;
+export type PlotLayerKind = ValueLayer["kind"];
+/**
+ * Value type for a given plot-layer kind. Indexed access on a `get value()`
+ * declaration yields the getter's return type.
+ */
+export type LayerValue<K extends PlotLayerKind> = Extract<ValueLayer, {
+    kind: K;
+}>["value"];
+/**
+ * Copy own enumerable keys whose value is not `undefined`. No whitelist.
+ * Undefined-valued own keys are stripped so exactOptionalPropertyTypes +
+ * additionalProperties:false agree, but unknown/misspelled props reach
+ * validate() and fail loudly.
+ */
+export declare function definedProps<T extends object>(props: T): T;
+/**
+ * Register a non-mark plot layer from a deferred builder. The getter is
+ * load-bearing: it re-reads props on every assemble pass (ADR 0001).
+ *
+ * The cast is unavoidable — TypeScript cannot correlate a generic `K` with
+ * the matching `Layer` union member. Kind→value mapping is enforced by
+ * `plot-layer-contract.ts` (compile-time only).
+ */
+export declare function createPlotLayer<K extends PlotLayerKind>(kind: K, build: () => LayerValue<K>): void;
+export {};

package/dist/layers/plot-layer.svelte.js

@@ -0,0 +1,34 @@
+import { registerPlotLayer } from "../geoms/registry.svelte.js";
+/**
+ * Copy own enumerable keys whose value is not `undefined`. No whitelist.
+ * Undefined-valued own keys are stripped so exactOptionalPropertyTypes +
+ * additionalProperties:false agree, but unknown/misspelled props reach
+ * validate() and fail loudly.
+ */
+export function definedProps(props) {
+    const out = {};
+    for (const key of Object.keys(props)) {
+        const value = props[key];
+        if (value !== undefined) {
+            out[key] = value;
+        }
+    }
+    return out;
+}
+/**
+ * Register a non-mark plot layer from a deferred builder. The getter is
+ * load-bearing: it re-reads props on every assemble pass (ADR 0001).
+ *
+ * The cast is unavoidable — TypeScript cannot correlate a generic `K` with
+ * the matching `Layer` union member. Kind→value mapping is enforced by
+ * `plot-layer-contract.ts` (compile-time only).
+ */
+export function createPlotLayer(kind, build) {
+    const layer = {
+        kind,
+        get value() {
+            return build();
+        },
+    };
+    registerPlotLayer(layer);
+}

package/dist/layers/types.d.ts

@@ -0,0 +1,2 @@
+export { isHostPlotLayer } from "@ggts-sh/compose";
+export type { GrammarLayerKind, Layer, MarkLayerDescriptor, PlotLayerLike } from "@ggts-sh/compose";

package/dist/layers/types.js

@@ -0,0 +1 @@
+export { isHostPlotLayer } from "@ggts-sh/compose";

package/dist/legend/Legend.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  /**
+   * <Legend> — declaration-only legend-options layer for <GGPlot>
+   * (#659 slice 6). Today that is exactly one thing: `order`, the plot-wide
+   * ENTRY-SORT enum ("stable-domain" | "present-first-seen" | "sorted").
+   * Ordering never changes color assignments.
+   *
+   * Distinct from <GuideLegend order={2}/>, whose `order` is a per-aesthetic
+   * INTEGER placement rank. Same word, unrelated concepts — do not fold them.
+   * Legends style only through the theme, so there is nothing else here.
+   *
+   * Emits NO markup; registers a live legend layer during component init and
+   * unregisters on destroy. Inert without a <GGPlot> ancestor.
+   */
+  import type { LegendSpec } from "@ggts-sh/spec";
+
+  import {
+    createPlotLayer,
+    definedProps,
+  } from "../layers/plot-layer.svelte.js";
+
+  const props: LegendSpec = $props();
+  createPlotLayer("legend", () => definedProps(props));
+</script>

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

@@ -0,0 +1,5 @@
+declare const Legend: import("svelte").Component<{
+    order?: "stable-domain" | "present-first-seen" | "sorted";
+}, {}, "">;
+type Legend = ReturnType<typeof Legend>;
+export default Legend;

package/dist/legend/LegendFilters.svelte

@@ -0,0 +1,196 @@
+<script lang="ts">
+  /**
+   * Discrete legend-filter fieldset for GGPlot.
+   * Host owns the controller + entries derived; this child owns markup, the
+   * reset-focus microtask, and fieldset-scoped styles (root layout margins
+   * stay on the plot root).
+   */
+  import { encodeKey } from "@ggts-sh/core";
+
+  import type {
+    FilterableLegendEntry,
+    LegendFilterState,
+  } from "./filter-state.svelte.js";
+
+  const {
+    controller,
+    entries,
+  }: {
+    controller: LegendFilterState;
+    entries: readonly FilterableLegendEntry[];
+  } = $props();
+
+  let fieldsetEl = $state<HTMLFieldSetElement | null>(null);
+
+  function syncCheckboxDom(): void {
+    if (fieldsetEl === null) return;
+    const inputs = fieldsetEl.querySelectorAll<HTMLInputElement>(
+      "input[type='checkbox']",
+    );
+    for (let index = 0; index < entries.length; index++) {
+      const input = inputs[index];
+      const row = entries[index];
+      if (input === undefined || row === undefined) continue;
+      input.checked = row.visible;
+    }
+  }
+
+  function liveVisible(target: FilterableLegendEntry): boolean | null {
+    const row = entries.find(
+      (candidate) =>
+        candidate.legend.scale === target.legend.scale &&
+        candidate.field === target.field &&
+        encodeKey(candidate.entry.value) === encodeKey(target.entry.value),
+    );
+    return row === undefined ? null : row.visible;
+  }
+
+  function onReset(event: MouseEvent): void {
+    // Mirror the controller's no-op guard: a reset with no active filters
+    // must not move keyboard focus (original resetLegendFilters early-
+    // returned before capturing the return target).
+    if (!controller.hasActiveFilters) return;
+    // Capture first checkbox before reset (which may unmount the button).
+    // Controller retains zero DOM/querySelector behavior.
+    const returnTarget = fieldsetEl?.querySelector<HTMLElement>("input");
+    controller.reset(event);
+    queueMicrotask(() => {
+      syncCheckboxDom();
+      returnTarget?.focus();
+    });
+  }
+
+  /**
+   * Force the controlled checkbox after toggle. Keep checked={target.visible}
+   * for SSR/initial markup. Re-assert the property through microtask + rAF +
+   * short timeouts, always re-reading live visibility so a later catalog or
+   * mode reset cannot be overwritten with a stale click-time value. Needed
+   * because Svelte's set_checked caches the last write and skips DOM updates
+   * when the UA mutates the IDL outside the JS setter after the flush.
+   */
+  function onToggle(target: FilterableLegendEntry, event: MouseEvent): void {
+    controller.toggle(target, event);
+    const input = event.currentTarget;
+    if (!(input instanceof HTMLInputElement)) return;
+    const apply = (): void => {
+      if (!input.isConnected) return;
+      const visible = liveVisible(target);
+      if (visible === null) return;
+      input.checked = visible;
+    };
+    apply();
+    queueMicrotask(apply);
+    requestAnimationFrame(() => {
+      apply();
+      requestAnimationFrame(apply);
+    });
+    setTimeout(apply, 0);
+    setTimeout(apply, 32);
+  }
+
+  // Align DOM whenever entries re-derive (reset, catalog, mode).
+  $effect(() => {
+    void entries;
+    void controller.hasActiveFilters;
+    syncCheckboxDom();
+  });
+</script>
+
+{#if entries.length > 0}
+  <fieldset class="gg-legend-filters" bind:this={fieldsetEl}>
+    <legend>Filter legend</legend>
+    {#each entries as target (`${target.legend.scale}:${target.field}:${encodeKey(target.entry.value)}`)}
+      <label>
+        <input
+          type="checkbox"
+          checked={target.visible}
+          aria-label={`Show ${target.entry.label}`}
+          onpointerdown={(event) =>
+            controller.setPointerType(event.pointerType)}
+          onpointercancel={() => controller.setPointerType(null)}
+          onclick={(event) => onToggle(target, event)}
+        />
+        <span>{target.entry.label}</span>
+      </label>
+    {/each}
+    {#if controller.hasActiveFilters}
+      <button
+        type="button"
+        aria-label="Reset legend filters"
+        onpointerdown={(event) => controller.setPointerType(event.pointerType)}
+        onpointercancel={() => controller.setPointerType(null)}
+        onclick={onReset}>Reset</button
+      >
+    {/if}
+  </fieldset>
+{/if}
+
+<style>
+  .gg-legend-filters {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 4px;
+    z-index: 5;
+    display: flex;
+    min-height: 44px;
+    max-width: calc(100% - 8px);
+    margin: 0;
+    padding: 0;
+    border: 0;
+    gap: 4px;
+    align-items: center;
+    overflow-x: auto;
+    color: var(--gg-ink, var(--gg-theme-ink, currentColor));
+    font: 11px/1.2 var(--gg-font-family, sans-serif);
+    pointer-events: auto;
+  }
+
+  .gg-legend-filters legend {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+
+  .gg-legend-filters label,
+  .gg-legend-filters button {
+    display: inline-flex;
+    min-height: 44px;
+    margin: 0;
+    padding: 0 8px;
+    align-items: center;
+    gap: 5px;
+    border: 1px solid
+      var(--gg-tooltipBorder, var(--gg-theme-tooltipBorder, currentColor));
+    border-radius: 3px;
+    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: inherit;
+    white-space: nowrap;
+  }
+
+  .gg-legend-filters input {
+    width: 18px;
+    height: 18px;
+    margin: 0;
+  }
+
+  .gg-legend-filters label:has(:focus-visible),
+  .gg-legend-filters button:focus-visible {
+    outline: 2px solid var(--gg-focusRing, var(--gg-theme-focusRing, Highlight));
+    outline-offset: 2px;
+  }
+</style>

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

@@ -0,0 +1,8 @@
+import type { FilterableLegendEntry, LegendFilterState } from "./filter-state.svelte.js";
+type $$ComponentProps = {
+    controller: LegendFilterState;
+    entries: readonly FilterableLegendEntry[];
+};
+declare const LegendFilters: import("svelte").Component<$$ComponentProps, {}, "">;
+type LegendFilters = ReturnType<typeof LegendFilters>;
+export default LegendFilters;