@ggts-sh/svelte 0.43.0

package/dist/scene/Legend.svelte

@@ -0,0 +1,278 @@
+<script lang="ts">
+  import type { SceneLegend, ThemeTokens } from "@ggts-sh/core";
+  import { LEGEND_ROW_HEIGHT, LINETYPE_DASHES, themeVar } from "@ggts-sh/core";
+  import { LINETYPE_NAMES } from "@ggts-sh/spec";
+
+  const { legend, theme }: { legend: SceneLegend; theme: ThemeTokens } =
+    $props();
+  const uid = $props.id();
+  const gradientId = $derived(`gg-ramp-${uid}-${legend.scale}`);
+  const ink = $derived(themeVar("ink", theme));
+  const contentTop = $derived(
+    legend.title === "" ? 0 : (legend.titleHeight ?? 18),
+  );
+  const horizontal = $derived(legend.direction === "horizontal");
+  const rampX = $derived(
+    horizontal ? (legend.type === "ramp" ? (legend.rampX ?? 4) : 4) : 4,
+  );
+  const titleSize = $derived(legend.titleSize ?? 11);
+  const labelSize = $derived(legend.labelSize ?? 11);
+</script>
+
+<g
+  class={`gg-legend gg-legend-${legend.scale} gg-legend-${legend.position ?? "right"} gg-legend-${legend.direction ?? "vertical"}`}
+  transform={`translate(${legend.x},${legend.y})`}
+>
+  {#if legend.title !== ""}
+    <text
+      class="gg-legend-title"
+      x="4"
+      y={Math.max(11, contentTop - 7)}
+      font-size={titleSize}
+      font-weight="bold"
+      fill={ink}>{legend.title}</text
+    >
+  {/if}
+  {#if legend.type === "discrete"}
+    {#each legend.entries as entry}
+      {@const baseX = (entry.x ?? 0) + 4}
+      {@const rowHeight = entry.height ?? LEGEND_ROW_HEIGHT}
+      {@const lines = entry.lines ?? [entry.label]}
+      {@const lineHeight = entry.lineHeight ?? labelSize * 1.2}
+      {@const labelY =
+        entry.y + (rowHeight - lines.length * lineHeight) / 2 + lineHeight / 2}
+      {@const keyY = entry.y + (rowHeight - legend.swatchSize) / 2}
+      {@const keyX = baseX + legend.swatchSize / 2}
+      {@const keyCenterY = keyY + legend.swatchSize / 2}
+      {@const keyColor =
+        (entry.shape !== undefined ||
+          entry.size !== undefined ||
+          entry.linetype !== undefined ||
+          entry.linewidth !== undefined) &&
+        entry.color === "#999999" &&
+        entry.hasPaint !== true
+          ? ink
+          : entry.color}
+      <!-- Shape key geometry must match core's pointShape() so SSR/pure-SVG
+           and hydrated Svelte legend keys render identical proportions. -->
+      {#if entry.shape === "square"}
+        <rect
+          class="gg-legend-key gg-shape-square"
+          x={keyX -
+            Math.min(
+              legend.swatchSize / 2,
+              entry.size ?? legend.swatchSize / 2,
+            )}
+          y={keyCenterY -
+            Math.min(
+              legend.swatchSize / 2,
+              entry.size ?? legend.swatchSize / 2,
+            )}
+          width={Math.min(
+            legend.swatchSize,
+            (entry.size ?? legend.swatchSize / 2) * 2,
+          )}
+          height={Math.min(
+            legend.swatchSize,
+            (entry.size ?? legend.swatchSize / 2) * 2,
+          )}
+          fill={keyColor}
+          opacity={entry.alpha}
+        />
+      {:else if entry.shape === "triangle"}
+        {@const r = Math.min(
+          legend.swatchSize / 2,
+          entry.size ?? legend.swatchSize / 2,
+        )}
+        <path
+          class="gg-legend-key gg-shape-triangle"
+          d={`M${keyX} ${keyCenterY - r * 1.2}L${keyX + r * 1.1} ${keyCenterY + r * 0.9}L${keyX - r * 1.1} ${keyCenterY + r * 0.9}Z`}
+          fill={keyColor}
+          opacity={entry.alpha}
+        />
+      {:else if entry.shape === "diamond"}
+        {@const r = Math.min(
+          legend.swatchSize / 2,
+          entry.size ?? legend.swatchSize / 2,
+        )}
+        <path
+          class="gg-legend-key gg-shape-diamond"
+          d={`M${keyX} ${keyCenterY - r * 1.25}L${keyX + r} ${keyCenterY}L${keyX} ${keyCenterY + r * 1.25}L${keyX - r} ${keyCenterY}Z`}
+          fill={keyColor}
+          opacity={entry.alpha}
+        />
+      {:else if entry.shape === "circle-open"}
+        {@const r = Math.min(
+          legend.swatchSize / 2,
+          entry.size ?? legend.swatchSize / 2,
+        )}
+        <circle
+          class="gg-legend-key gg-shape-circle-open"
+          cx={keyX}
+          cy={keyCenterY}
+          {r}
+          fill="none"
+          stroke={keyColor}
+          stroke-width={Math.max(1, r / 3)}
+          opacity={entry.alpha}
+        />
+      {:else if entry.shape === "plus" || entry.shape === "cross"}
+        {@const r = Math.min(
+          legend.swatchSize / 2,
+          entry.size ?? legend.swatchSize / 2,
+        )}
+        <path
+          class={`gg-legend-key gg-shape-${entry.shape}`}
+          d={entry.shape === "plus"
+            ? `M${keyX - r} ${keyCenterY}H${keyX + r}M${keyX} ${keyCenterY - r}V${keyCenterY + r}`
+            : `M${keyX - r * 0.75} ${keyCenterY - r * 0.75}L${keyX + r * 0.75} ${keyCenterY + r * 0.75}M${keyX + r * 0.75} ${keyCenterY - r * 0.75}L${keyX - r * 0.75} ${keyCenterY + r * 0.75}`}
+          fill="none"
+          stroke={keyColor}
+          stroke-width={Math.max(1, r / 2)}
+          opacity={entry.alpha}
+        />
+      {:else if entry.shape !== undefined || entry.size !== undefined}
+        <circle
+          class="gg-legend-key gg-shape-circle"
+          cx={keyX}
+          cy={keyCenterY}
+          r={Math.min(
+            legend.swatchSize / 2,
+            entry.size ?? legend.swatchSize / 2,
+          )}
+          fill={keyColor}
+          opacity={entry.alpha}
+        />
+      {:else if entry.linetype !== undefined || entry.linewidth !== undefined}
+        {@const linetype = entry.linetype ?? "solid"}
+        {@const dash = LINETYPE_DASHES[LINETYPE_NAMES.indexOf(linetype)] ?? []}
+        <line
+          class="gg-legend-key"
+          x1={baseX}
+          y1={keyCenterY}
+          x2={baseX + legend.swatchSize}
+          y2={keyCenterY}
+          stroke={keyColor}
+          stroke-width={entry.linewidth ?? 1.5}
+          stroke-dasharray={dash.length === 0 ? undefined : dash.join(" ")}
+          opacity={entry.alpha}
+        />
+      {:else}
+        <rect
+          class="gg-legend-swatch"
+          x={baseX}
+          y={keyY}
+          width={legend.swatchSize}
+          height={legend.swatchSize}
+          fill={entry.color}
+          opacity={entry.alpha}
+        />
+      {/if}
+      <text
+        class="gg-legend-label"
+        x={baseX + legend.swatchSize + (legend.keyGap ?? 6)}
+        y={entry.lines === undefined ? entry.y + rowHeight / 2 : labelY}
+        dy="0.32em"
+        font-size={labelSize}
+        fill={ink}
+      >
+        {#if entry.lines !== undefined}
+          {#each lines as line, index}
+            <tspan
+              x={baseX + legend.swatchSize + (legend.keyGap ?? 6)}
+              dy={index === 0 ? undefined : lineHeight}>{line}</tspan
+            >
+          {/each}
+        {:else}
+          {entry.label}{#if entry.fullLabel !== undefined && entry.fullLabel !== entry.label}<title
+              >{entry.fullLabel}</title
+            >{/if}
+        {/if}
+      </text>
+    {/each}
+  {:else if legend.type === "steps"}
+    {#each legend.entries as entry}
+      {@const entryX = 4 + (entry.x ?? 0)}
+      {@const entryY = contentTop + entry.y}
+      <rect
+        class="gg-legend-step"
+        x={entryX}
+        y={entryY}
+        width={legend.stepWidth}
+        height={legend.stepHeight}
+        fill={entry.color}
+      />
+      {#if entry.label !== ""}
+        <text
+          class="gg-legend-label"
+          x={horizontal
+            ? entryX + legend.stepWidth / 2
+            : entryX + legend.stepWidth + 6}
+          y={horizontal
+            ? entryY + legend.stepHeight + 12
+            : entryY + legend.stepHeight / 2}
+          text-anchor={horizontal ? "middle" : "start"}
+          dy="0.32em"
+          font-size={labelSize}
+          fill={ink}
+          >{entry.label}{#if entry.fullLabel !== undefined && entry.fullLabel !== entry.label}<title
+              >{entry.fullLabel}</title
+            >{/if}</text
+        >
+      {/if}
+    {/each}
+  {:else}
+    <defs>
+      <linearGradient
+        id={gradientId}
+        x1="0"
+        y1="0"
+        x2={horizontal ? "1" : "0"}
+        y2={horizontal ? "0" : "1"}
+      >
+        {#each legend.stops as [offset, color]}
+          <stop offset={`${offset * 100}%`} stop-color={color} />
+        {/each}
+      </linearGradient>
+    </defs>
+    <rect
+      class="gg-legend-ramp"
+      x={rampX}
+      y={contentTop}
+      width={legend.rampWidth}
+      height={legend.rampHeight}
+      fill={`url(#${gradientId})`}
+    />
+    {#each legend.ticks as tick}
+      {@const pos = tick.pos ?? tick.y ?? 0}
+      {#if legend.showTicks !== false}
+        <line
+          class="gg-legend-tick"
+          x1={horizontal ? rampX + pos : rampX + legend.rampWidth}
+          y1={horizontal ? contentTop + legend.rampHeight : contentTop + pos}
+          x2={horizontal ? rampX + pos : rampX + legend.rampWidth + 4}
+          y2={horizontal
+            ? contentTop + legend.rampHeight + 4
+            : contentTop + pos}
+          stroke={ink}
+        />
+      {/if}
+      {#if tick.label !== ""}
+        <text
+          class="gg-legend-label"
+          x={horizontal ? rampX + pos : rampX + legend.rampWidth + 6}
+          y={horizontal
+            ? contentTop + legend.rampHeight + 12
+            : contentTop + pos}
+          text-anchor={horizontal ? "middle" : "start"}
+          dy="0.32em"
+          font-size={labelSize}
+          fill={ink}
+          >{tick.label}{#if tick.fullLabel !== undefined && tick.fullLabel !== tick.label}<title
+              >{tick.fullLabel}</title
+            >{/if}</text
+        >
+      {/if}
+    {/each}
+  {/if}
+</g>

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

@@ -0,0 +1,8 @@
+import type { SceneLegend, ThemeTokens } from "@ggts-sh/core";
+type $$ComponentProps = {
+    legend: SceneLegend;
+    theme: ThemeTokens;
+};
+declare const Legend: import("svelte").Component<$$ComponentProps, {}, "">;
+type Legend = ReturnType<typeof Legend>;
+export default Legend;

package/dist/scene/MarkStrata.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+  /**
+   * Mark-strata compositing for GGPlot (decision 0006).
+   * Renders as a bare fragment so document order = paint order under
+   * `.gg-plot-root`. Host owns paint ledger / readiness / shared a11y open.
+   */
+  import { untrack } from "svelte";
+  import type {
+    BatchInteractionMask,
+    GeometryBatch,
+    RenderModel,
+    Stratum,
+  } from "@ggts-sh/core";
+  import { sceneLabel } from "@ggts-sh/core";
+
+  import {
+    paintCanvasStratum,
+    resolveBatchFocusMasks,
+  } from "./stratum-paint.js";
+  import CanvasA11y from "../a11y/CanvasA11y.svelte";
+  import SceneView from "./SceneView.svelte";
+
+  const {
+    model,
+    strata,
+    ariaLabel,
+    markLabel,
+    interactionMasks,
+    a11yTableOpen,
+    onA11yToggle,
+    onPainted,
+  }: {
+    model: RenderModel;
+    strata: readonly Stratum[];
+    ariaLabel?: string | undefined;
+    markLabel: (row: number) => string;
+    interactionMasks: readonly (BatchInteractionMask | null)[];
+    a11yTableOpen: boolean;
+    onA11yToggle: () => void;
+    /** Only called after a successful paintCanvasStratum (context available). */
+    onPainted: (runId: number, stratumKey: string) => void;
+  } = $props();
+
+  const hasCanvas = $derived(
+    strata.some((stratum) => stratum.backend === "canvas"),
+  );
+
+  // Redraw canvases when the host theme flips (canvas colors resolve from
+  // computed style at draw time; SVG re-resolves via CSS automatically).
+  let themeEpoch = $state(0);
+  $effect(() => {
+    if (!hasCanvas) return;
+    const observer = new MutationObserver(() => {
+      themeEpoch++;
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme", "class"],
+    });
+    return () => observer.disconnect();
+  });
+
+  /** Svelte attachment: paint stratum and signal first paint only on success. */
+  function canvasAttachment(
+    m: RenderModel,
+    batches: GeometryBatch[],
+    stratumKey: string,
+  ) {
+    void themeEpoch;
+    const focusMasks = resolveBatchFocusMasks(
+      m.scene.batches,
+      batches,
+      interactionMasks,
+    );
+    return (canvas: HTMLCanvasElement) => {
+      const painted = paintCanvasStratum({
+        canvas,
+        scene: m.scene,
+        batches,
+        focusMasks,
+      });
+      // untrack: write paint state without SUBSCRIBING (would re-attach loop).
+      if (painted) untrack(() => onPainted(m.runId, stratumKey));
+    };
+  }
+</script>
+
+{#if hasCanvas}
+  <SceneView scene={model.scene} mode="chrome-bottom" {ariaLabel} />
+  {#each strata as stratum, si (si)}
+    {#if stratum.backend === "canvas"}
+      <canvas
+        class="gg-stratum gg-canvas"
+        {@attach canvasAttachment(model, stratum.batches, `canvas:${si}`)}
+      ></canvas>
+      <CanvasA11y
+        {model}
+        batches={stratum.batches}
+        sceneLabelText={ariaLabel ?? sceneLabel(model.scene)}
+        open={a11yTableOpen}
+        onToggle={onA11yToggle}
+      />
+    {:else}
+      <SceneView
+        scene={model.scene}
+        mode="marks"
+        batches={stratum.batches}
+        focusable={false}
+        {markLabel}
+        focusMasks={interactionMasks}
+      />
+    {/if}
+  {/each}
+  <SceneView scene={model.scene} mode="chrome-top" />
+{:else}
+  <SceneView
+    scene={model.scene}
+    {ariaLabel}
+    focusable={false}
+    {markLabel}
+    focusMasks={interactionMasks}
+  />
+{/if}
+
+<style>
+  canvas.gg-stratum {
+    display: block;
+  }
+</style>

package/dist/scene/MarkStrata.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { BatchInteractionMask, RenderModel, Stratum } from "@ggts-sh/core";
+type $$ComponentProps = {
+    model: RenderModel;
+    strata: readonly Stratum[];
+    ariaLabel?: string | undefined;
+    markLabel: (row: number) => string;
+    interactionMasks: readonly (BatchInteractionMask | null)[];
+    a11yTableOpen: boolean;
+    onA11yToggle: () => void;
+    /** Only called after a successful paintCanvasStratum (context available). */
+    onPainted: (runId: number, stratumKey: string) => void;
+};
+declare const MarkStrata: import("svelte").Component<$$ComponentProps, {}, "">;
+type MarkStrata = ReturnType<typeof MarkStrata>;
+export default MarkStrata;

package/dist/scene/SceneOverlays.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+  /**
+   * Selection / inspection overlay strata for GGPlot (decision 0006 paint order).
+   * Host owns anchors, inspection state, brush draft, and tools.
+   *
+   * Surface-interactive and inert selection overlays are mutually exclusive
+   * via `{:else if}` so both never mount even if host props are inconsistent.
+   */
+  import type { CellValue } from "@ggts-sh/core";
+
+  import type {
+    InteractionTool,
+    IntervalSelection,
+    PlotInspectionChange,
+  } from "../interaction/interaction.js";
+  import type {
+    PresentationAnchor,
+    PresentationChrome,
+  } from "../selection/selection.js";
+  import InteractionOverlay from "./InteractionOverlay.svelte";
+  import { shouldShowInertSelectionOverlay } from "../interaction/capability.js";
+  import type { CrosshairGapBox } from "./geometry.js";
+  type Panel = {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+  };
+  type BrushRect = {
+    readonly x0: number;
+    readonly y0: number;
+    readonly x1: number;
+    readonly y1: number;
+  };
+
+  let {
+    width,
+    height,
+    interactive,
+    surfaceInteractive,
+    inspection = null,
+    inspectionPanel = null,
+    coordFlipped = false,
+    hoverChrome = "ring",
+    hoverBoxWidth,
+    hoverBoxHeight,
+    hoverBoxAnchor,
+    crosshairGapObstacles = [],
+    selectedAnchors = [],
+    emphasizedAnchors = [],
+    brushRect = null,
+    activeTool = "inspect",
+    areaAwaitingSecond = false,
+    committedInterval = null,
+  }: {
+    width: number;
+    height: number;
+    /** Chart-local interactive (tools or legend focus). */
+    interactive: boolean;
+    /** Capture + full overlay (available tools). */
+    surfaceInteractive: boolean;
+    inspection?: PlotInspectionChange<
+      Record<string, CellValue>,
+      PropertyKey
+    > | null;
+    inspectionPanel?: Panel | null;
+    coordFlipped?: boolean;
+    hoverChrome?: PresentationChrome;
+    hoverBoxWidth?: number | undefined;
+    hoverBoxHeight?: number | undefined;
+    hoverBoxAnchor?: "start" | "middle" | "end" | undefined;
+    /** Sibling glyph AABBs for crosshair hard-gaps (#1207). */
+    crosshairGapObstacles?: readonly CrosshairGapBox[];
+    selectedAnchors?: readonly PresentationAnchor[];
+    emphasizedAnchors?: readonly PresentationAnchor[];
+    brushRect?: BrushRect | null;
+    activeTool?: InteractionTool;
+    areaAwaitingSecond?: boolean;
+    committedInterval?: IntervalSelection | null;
+  } = $props();
+
+  const showInert = $derived(
+    shouldShowInertSelectionOverlay({
+      interactive,
+      selectedAnchorCount: selectedAnchors.length,
+      emphasizedAnchorCount: emphasizedAnchors.length,
+    }),
+  );
+</script>
+
+{#if surfaceInteractive}
+  <InteractionOverlay
+    {width}
+    {height}
+    {inspection}
+    {inspectionPanel}
+    {coordFlipped}
+    {hoverChrome}
+    {hoverBoxWidth}
+    {hoverBoxHeight}
+    {hoverBoxAnchor}
+    {crosshairGapObstacles}
+    {selectedAnchors}
+    {emphasizedAnchors}
+    {brushRect}
+    {activeTool}
+    {areaAwaitingSecond}
+    {committedInterval}
+  />
+{:else if showInert}
+  <InteractionOverlay
+    {width}
+    {height}
+    interactive={false}
+    {selectedAnchors}
+    {emphasizedAnchors}
+  />
+{/if}

package/dist/scene/SceneOverlays.svelte.d.ts

@@ -0,0 +1,49 @@
+/**
+   * Selection / inspection overlay strata for GGPlot (decision 0006 paint order).
+   * Host owns anchors, inspection state, brush draft, and tools.
+   *
+   * Surface-interactive and inert selection overlays are mutually exclusive
+   * via `{:else if}` so both never mount even if host props are inconsistent.
+   */
+import type { CellValue } from "@ggts-sh/core";
+import type { InteractionTool, IntervalSelection, PlotInspectionChange } from "../interaction/interaction.js";
+import type { PresentationAnchor, PresentationChrome } from "../selection/selection.js";
+import type { CrosshairGapBox } from "./geometry.js";
+type Panel = {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+};
+type BrushRect = {
+    readonly x0: number;
+    readonly y0: number;
+    readonly x1: number;
+    readonly y1: number;
+};
+type $$ComponentProps = {
+    width: number;
+    height: number;
+    /** Chart-local interactive (tools or legend focus). */
+    interactive: boolean;
+    /** Capture + full overlay (available tools). */
+    surfaceInteractive: boolean;
+    inspection?: PlotInspectionChange<Record<string, CellValue>, PropertyKey> | null;
+    inspectionPanel?: Panel | null;
+    coordFlipped?: boolean;
+    hoverChrome?: PresentationChrome;
+    hoverBoxWidth?: number | undefined;
+    hoverBoxHeight?: number | undefined;
+    hoverBoxAnchor?: "start" | "middle" | "end" | undefined;
+    /** Sibling glyph AABBs for crosshair hard-gaps (#1207). */
+    crosshairGapObstacles?: readonly CrosshairGapBox[];
+    selectedAnchors?: readonly PresentationAnchor[];
+    emphasizedAnchors?: readonly PresentationAnchor[];
+    brushRect?: BrushRect | null;
+    activeTool?: InteractionTool;
+    areaAwaitingSecond?: boolean;
+    committedInterval?: IntervalSelection | null;
+};
+declare const SceneOverlays: import("svelte").Component<$$ComponentProps, {}, "">;
+type SceneOverlays = ReturnType<typeof SceneOverlays>;
+export default SceneOverlays;