@poodle64/ui 2026.10.16 → 2026.10.17

package/dist/components/ui/graph-canvas/graph-canvas.svelte.d.ts

@@ -0,0 +1,73 @@
+/**
+     * A live force-directed graph of entities and relations, drawn on a canvas
+     * and themed from the --ds-* tokens of wherever it is placed, a page or an
+     * element's shadow root alike. Every colour is resolved against this
+     * component's own element, never the document, so a shadow root takes its
+     * host page's palette; nothing portals out.
+     */
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { GraphEdge, GraphKind, GraphNeighbour, GraphNode } from './types.js';
+declare function $$render<N extends GraphNode>(): {
+    props: Omit<HTMLAttributes<HTMLDivElement>, "class" | "onselect"> & {
+        nodes: N[];
+        edges: GraphEdge[];
+        /** Legend order, labels, colours and shapes. Kinds in the data but not here still draw. */
+        kinds?: GraphKind[];
+        /** The selected node's id. */
+        selected?: string | null;
+        /** Kind ids the legend has switched off. */
+        hiddenKinds?: string[];
+        /** Arrowheads at each edge's target. */
+        directed?: boolean;
+        /** The accessible name. */
+        label?: string;
+        /** The find field. */
+        search?: boolean;
+        activateLabel?: string;
+        /** A click on a node, a match or a neighbour; `null` when the selection clears. */
+        onselect?: (node: N | null) => void;
+        /** Double-click, Enter, or the card's action: open the thing the node stands for. */
+        onactivate?: (node: N) => void;
+        /** Extra content for the selected node's card, under its title. */
+        detail?: Snippet<[N, GraphNeighbour<N>[]]>;
+        class?: string;
+    };
+    exports: {
+        fit: () => void;
+        focus: (id: string) => Promise<void>;
+        locate: (id: string) => {
+            x: number;
+            y: number;
+        } | null;
+        relayout: () => void;
+    };
+    bindings: "selected" | "hiddenKinds";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<N extends GraphNode> {
+    props(): ReturnType<typeof $$render<N>>['props'];
+    events(): ReturnType<typeof $$render<N>>['events'];
+    slots(): ReturnType<typeof $$render<N>>['slots'];
+    bindings(): "selected" | "hiddenKinds";
+    exports(): {
+        fit: () => void;
+        focus: (id: string) => Promise<void>;
+        locate: (id: string) => {
+            x: number;
+            y: number;
+        } | null;
+        relayout: () => void;
+    };
+}
+interface $$IsomorphicComponent {
+    new <N extends GraphNode>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<N>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<N>['props']>, ReturnType<__sveltets_Render<N>['events']>, ReturnType<__sveltets_Render<N>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<N>['bindings']>;
+    } & ReturnType<__sveltets_Render<N>['exports']>;
+    <N extends GraphNode>(internal: unknown, props: ReturnType<__sveltets_Render<N>['props']> & {}): ReturnType<__sveltets_Render<N>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const GraphCanvas: $$IsomorphicComponent;
+type GraphCanvas<N extends GraphNode> = InstanceType<typeof GraphCanvas<N>>;
+export default GraphCanvas;

package/dist/components/ui/graph-canvas/index.d.ts

@@ -0,0 +1,3 @@
+export { default as GraphCanvas } from './graph-canvas.svelte';
+export { default } from './graph-canvas.svelte';
+export type { GraphEdge, GraphKind, GraphNeighbour, GraphNode, GraphShape } from './types.js';

package/dist/components/ui/graph-canvas/index.js

@@ -0,0 +1,2 @@
+export { default as GraphCanvas } from './graph-canvas.svelte';
+export { default } from './graph-canvas.svelte';

package/dist/components/ui/graph-canvas/scene.d.ts

@@ -0,0 +1,107 @@
+/**
+ * The graph's world: d3-force for the layout, a Canvas 2D painter, the camera
+ * and hit-testing. No Svelte in here; the component owns the loop, the
+ * pointer and the chrome, and calls in.
+ *
+ * Paint cost is bounded at any size: edges and nodes are culled to the
+ * viewport and stroked as a handful of batched paths, labels are placed
+ * greedily in screen space against a grid of what is already drawn, and the
+ * label pass stops at a fixed budget, so a few thousand nodes paint in a few
+ * milliseconds and the layout's own ticks are the cost that dominates.
+ */
+import { type Simulation, type SimulationLinkDatum, type SimulationNodeDatum } from 'd3-force';
+import type { GraphEdge, GraphNode, GraphShape } from './types.js';
+export interface SimNode<N extends GraphNode = GraphNode> extends SimulationNodeDatum {
+    id: string;
+    node: N;
+    x: number;
+    y: number;
+    r: number;
+    degree: number;
+}
+export interface SimEdge<N extends GraphNode = GraphNode> extends SimulationLinkDatum<SimNode<N>> {
+    source: SimNode<N>;
+    target: SimNode<N>;
+    edge: GraphEdge;
+    /** Signed curvature: parallel edges between one pair fan out. */
+    bend: number;
+}
+/** Every colour already resolved to a value canvas parses. */
+export interface ScenePalette {
+    kinds: Map<string, string>;
+    fallback: string;
+    ground: string;
+    ink: string;
+    inkSoft: string;
+    edge: string;
+    font: string;
+}
+export interface Camera {
+    k: number;
+    x: number;
+    y: number;
+}
+export interface Inset {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export declare class GraphScene<N extends GraphNode = GraphNode> {
+    nodes: SimNode<N>[];
+    edges: SimEdge<N>[];
+    byId: Map<string, SimNode<N>>;
+    adj: Map<SimNode<N>, Set<SimNode<N>>>;
+    /** Label priority, fixed per data set: emphasis, then degree. */
+    ranked: SimNode<N>[];
+    cam: Camera;
+    width: number;
+    height: number;
+    dpr: number;
+    palette: ScenePalette | null;
+    shapes: Map<string, GraphShape>;
+    hidden: Set<string>;
+    directed: boolean;
+    selected: SimNode<N> | null;
+    hovered: SimNode<N> | null;
+    matches: Set<SimNode<N>>;
+    readonly sim: Simulation<SimNode<N>, SimEdge<N>>;
+    private link;
+    private charge;
+    private collide;
+    private ticks;
+    private gx;
+    private gy;
+    private widths;
+    private grid;
+    private boxes;
+    constructor();
+    /** Gravity follows the frame's shape, so a wide view lays out wide and a phone tall. */
+    setAspect(width: number, height: number): void;
+    /** Replace the data, keeping every surviving node where it is. */
+    setData(nodes: readonly N[], edges: readonly GraphEdge[]): number;
+    hot(): boolean;
+    heat(alpha: number): void;
+    /** Advance the layout for at most `budgetMs`, and at least one tick. */
+    advance(budgetMs: number): void;
+    visible(s: SimNode<N>): boolean;
+    neighbourhood(s: SimNode<N>): SimNode<N>[];
+    /** The camera that frames `subset` (default: every visible node) inside the inset box. */
+    fit(subset?: Iterable<SimNode<N>>, inset?: Inset, maxK?: number): Camera | null;
+    toWorld(sx: number, sy: number): [number, number];
+    /** Zoom by `factor` about the screen point (sx, sy). */
+    zoomAt(sx: number, sy: number, factor: number, min: number, max: number): void;
+    /** The node under a screen point, with `slop` px of grace for a finger. */
+    pick(sx: number, sy: number, slop: number): SimNode<N> | null;
+    clearTextCache(): void;
+    draw(ctx: CanvasRenderingContext2D): void;
+    colour(s: SimNode<N>): string;
+    private control;
+    private arrow;
+    private shape;
+    private measure;
+    /** Reserve a screen box unless it overlaps one already reserved. */
+    private claim;
+    private labels;
+    private text;
+}