@tulipfarm/sprout 0.3.1 → 0.5.0

package/dist/components/sql-viewer.js

@@ -1,16 +1,16 @@
-"use client";
+'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Background, getSmoothStepPath, Handle, Panel, Position, ReactFlow, ReactFlowProvider, useInternalNode, useNodesState, } from "@xyflow/react";
-import { createContext, useCallback, useContext, useEffect, useId, useMemo, useState, } from "react";
-import { Fingerprint } from "reicon-react/icons/Fingerprint";
-import { Key } from "reicon-react/icons/Key";
-import { Layers } from "reicon-react/icons/Layers";
-import { Link } from "reicon-react/icons/Link";
-import { cn } from "../internal/classes.js";
-import { FitOnResize, flowMaxZoom, flowMinZoom, useKeyboardView, useViewportMobile, ZoomControls, } from "../internal/flow.js";
-import { Button } from "./button.js";
-export const sqlViewerLayoutNames = ["auto", "horizontal", "vertical"];
-const moreId = "~more";
+import { Background, getSmoothStepPath, Handle, Panel, Position, ReactFlow, ReactFlowProvider, useInternalNode, useNodesState, } from '@xyflow/react';
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useState, } from 'react';
+import { Fingerprint } from 'reicon-react/icons/Fingerprint';
+import { Key } from 'reicon-react/icons/Key';
+import { Layers } from 'reicon-react/icons/Layers';
+import { Link } from 'reicon-react/icons/Link';
+import { cn } from '../internal/classes.js';
+import { FitOnResize, flowMaxZoom, flowMinZoom, useKeyboardView, useViewportMobile, ZoomControls, } from '../internal/flow.js';
+import { Button } from './button.js';
+export const sqlViewerLayoutNames = ['auto', 'horizontal', 'vertical'];
+const moreId = '~more';
 const groupId = (key) => `~group:${key}`;
 // Card geometry. The CSS uses the same numbers so layout never waits for a measure.
 const cardWidth = 272;
@@ -19,7 +19,6 @@ const headerHeight = 40;
 const rowHeight = 28;
 const keysChrome = 36;
 const keyHeight = 26;
-const moreHeight = 132;
 const colGap = 104;
 const rowGap = 32;
 const groupPad = 20;
@@ -28,38 +27,33 @@ const groupGap = 56;
 const wrapWidth = 1400;
 const tones = 5;
 const fitAll = { padding: 0.12, maxZoom: 1 };
-const compositeKeys = (table) => (table.uniqueKeys ?? []).filter((key) => key.fieldIds.length > 1);
+const compositeKeys = (table) => (table.uniqueKeys ?? []).filter(key => key.fieldIds.length > 1);
 const cardHeight = (table) => {
     const keys = compositeKeys(table).length;
-    return (cardChrome +
-        headerHeight +
-        (table.fields.length + 1) * rowHeight +
-        (keys ? keysChrome + keys * keyHeight : 0));
+    return cardChrome + headerHeight + (table.fields.length + 1) * rowHeight + (keys ? keysChrome + keys * keyHeight : 0);
 };
 function columnType(field) {
     switch (field.kind) {
-        case "text":
+        case 'text':
             return `varchar(${field.maxLength})`;
-        case "numeric":
+        case 'numeric':
             return `numeric(${field.precision},${field.scale})`;
-        case "timestamp":
-            return "timestamptz";
-        case "single-select":
-            return "enum";
-        case "multi-select":
-            return "enum[]";
-        case "relationship":
-            return field.cardinality === "one" ? "uuid" : "uuid[]";
-        case "file":
-            return field.cardinality === "one" ? "file" : "file[]";
+        case 'timestamp':
+            return 'timestamptz';
+        case 'single-select':
+            return 'enum';
+        case 'multi-select':
+            return 'enum[]';
+        case 'relationship':
+            return field.cardinality === 'one' ? 'uuid' : 'uuid[]';
+        case 'file':
+            return field.cardinality === 'one' ? 'file' : 'file[]';
         default:
             return field.kind;
     }
 }
 function joinText(from, field, to, many) {
-    return many
-        ? `${to}.id = ANY(${from}.${field})`
-        : `${from}.${field} = ${to}.id`;
+    return many ? `${to}.id = ANY(${from}.${field})` : `${from}.${field} = ${to}.id`;
 }
 /** Places tables in team groups. Linked tables sit one column right of the tables that link to them. */
 function arrange(visible, hidden, groups, direction) {
@@ -67,9 +61,9 @@ function arrange(visible, hidden, groups, direction) {
     for (const table of visible) {
         const team = table.owningTeamId;
         const key = team !== undefined && groups?.[team] ? team : null;
-        let block = blocks.find((candidate) => candidate.key === key);
+        let block = blocks.find(candidate => candidate.key === key);
         if (!block) {
-            block = { key, label: key ? groups[key] : "", tables: [] };
+            block = { key, label: key ? groups[key] : '', tables: [] };
             blocks.push(block);
         }
         block.tables.push(table);
@@ -82,21 +76,18 @@ function arrange(visible, hidden, groups, direction) {
     let bottom = 0;
     let tone = 0;
     for (const block of blocks) {
-        const ids = new Set(block.tables.map((table) => table.id));
-        const depth = new Map(block.tables.map((table) => [table.id, 0]));
-        if (direction === "horizontal") {
+        const ids = new Set(block.tables.map(table => table.id));
+        const depth = new Map(block.tables.map(table => [table.id, 0]));
+        if (direction === 'horizontal') {
             for (let pass = 0; pass < block.tables.length; pass++) {
                 let moved = false;
                 for (const table of block.tables)
                     for (const field of table.fields) {
-                        if (field.kind !== "relationship")
+                        if (field.kind !== 'relationship')
                             continue;
                         const target = field.targetTableId;
                         const next = depth.get(table.id) + 1;
-                        if (target !== table.id &&
-                            ids.has(target) &&
-                            next > depth.get(target) &&
-                            next < block.tables.length) {
+                        if (target !== table.id && ids.has(target) && next > depth.get(target) && next < block.tables.length) {
                             depth.set(target, next);
                             moved = true;
                         }
@@ -106,20 +97,18 @@ function arrange(visible, hidden, groups, direction) {
             }
         }
         const columnBottoms = new Map();
-        const placed = block.tables.map((table) => {
+        const placed = block.tables.map(table => {
             const column = depth.get(table.id);
             const y = columnBottoms.get(column) ?? 0;
             columnBottoms.set(column, y + cardHeight(table) + rowGap);
             return { table, x: column * (cardWidth + colGap), y };
         });
-        const innerWidth = Math.max(...placed.map((item) => item.x)) + cardWidth;
+        const innerWidth = Math.max(...placed.map(item => item.x)) + cardWidth;
         const innerHeight = Math.max(...columnBottoms.values()) - rowGap;
         const framed = block.key !== null;
         const width = framed ? innerWidth + groupPad * 2 : innerWidth;
         const height = framed ? innerHeight + groupHeader + groupPad : innerHeight;
-        if (direction === "horizontal" &&
-            cursorX > 0 &&
-            cursorX + width > wrapWidth) {
+        if (direction === 'horizontal' && cursorX > 0 && cursorX + width > wrapWidth) {
             cursorX = 0;
             cursorY += lineHeight + groupGap;
             lineHeight = 0;
@@ -129,7 +118,7 @@ function arrange(visible, hidden, groups, direction) {
         if (framed)
             nodes.push({
                 id: parent,
-                type: "group",
+                type: 'group',
                 position: { x: cursorX, y: cursorY },
                 width,
                 height,
@@ -138,26 +127,26 @@ function arrange(visible, hidden, groups, direction) {
                     tone: blockTone,
                     count: block.tables.length,
                 },
-                dragHandle: ".sprout-sql-group-label",
+                dragHandle: '.sprout-sql-group-label',
                 focusable: false,
                 selectable: false,
             });
         for (const item of placed)
             nodes.push({
                 id: item.table.id,
-                type: "table",
+                type: 'table',
                 position: framed
                     ? { x: groupPad + item.x, y: groupHeader + item.y }
                     : { x: cursorX + item.x, y: cursorY + item.y },
                 ...(parent ? { parentId: parent, expandParent: true } : {}),
                 data: { table: item.table, tone: blockTone },
-                ariaRole: "group",
+                ariaRole: 'group',
                 ariaLabel: `${item.table.label} table, ${item.table.fields.length + 1} columns`,
-                domAttributes: { "aria-roledescription": "table card" },
+                domAttributes: { 'aria-roledescription': 'table card' },
             });
         right = Math.max(right, cursorX + width);
         bottom = Math.max(bottom, cursorY + height);
-        if (direction === "horizontal") {
+        if (direction === 'horizontal') {
             cursorX += width + groupGap;
             lineHeight = Math.max(lineHeight, height);
         }
@@ -168,42 +157,40 @@ function arrange(visible, hidden, groups, direction) {
     if (hidden.length)
         nodes.push({
             id: moreId,
-            type: "more",
-            position: direction === "horizontal"
-                ? { x: right + colGap, y: 0 }
-                : { x: 0, y: bottom + groupGap },
+            type: 'more',
+            position: direction === 'horizontal' ? { x: right + colGap, y: 0 } : { x: 0, y: bottom + groupGap },
             data: { tables: [...hidden] },
             focusable: false,
         });
     return nodes;
 }
 function joins(visible, hidden) {
-    const shown = new Set(visible.map((table) => table.id));
-    const collapsed = new Set(hidden.map((table) => table.id));
-    const labels = new Map([...visible, ...hidden].map((table) => [table.id, table.label]));
-    const node = (id) => shown.has(id) ? id : collapsed.has(id) ? moreId : null;
+    const shown = new Set(visible.map(table => table.id));
+    const collapsed = new Set(hidden.map(table => table.id));
+    const labels = new Map([...visible, ...hidden].map(table => [table.id, table.label]));
+    const node = (id) => (shown.has(id) ? id : collapsed.has(id) ? moreId : null);
     const edges = [];
     for (const table of [...visible, ...hidden])
         for (const field of table.fields) {
-            if (field.kind !== "relationship")
+            if (field.kind !== 'relationship')
                 continue;
             const source = node(table.id);
             const target = node(field.targetTableId);
             if (!source || !target || (source === moreId && target === moreId))
                 continue;
             const to = labels.get(field.targetTableId);
-            const sourceMany = field.inverseCardinality === "many";
-            const targetMany = field.cardinality === "many";
+            const sourceMany = field.inverseCardinality === 'many';
+            const targetMany = field.cardinality === 'many';
             edges.push({
                 id: `${table.id}/${field.id}`,
-                type: "join",
+                type: 'join',
                 source,
-                sourceHandle: source === moreId ? "out:right" : `${field.id}:right`,
+                sourceHandle: source === moreId ? 'out:right' : `${field.id}:right`,
                 target,
-                targetHandle: target === moreId ? "in:left" : "id:left",
+                targetHandle: target === moreId ? 'in:left' : 'id:left',
                 data: {
                     join: joinText(table.label, field.label, to, targetMany),
-                    description: `${table.label}.${field.label} joins ${to}.id, ${sourceMany ? "many" : "one"} to ${targetMany ? "many" : "one"}`,
+                    description: `${table.label}.${field.label} joins ${to}.id, ${sourceMany ? 'many' : 'one'} to ${targetMany ? 'many' : 'one'}`,
                     sourceMany,
                     targetMany,
                 },
@@ -219,42 +206,36 @@ function sideHandles(type, id) {
 function TableCard({ id, data: { table, tone } }) {
     const viewer = useViewer();
     const composite = compositeKeys(table);
-    const unique = new Set((table.uniqueKeys ?? [])
-        .filter((key) => key.fieldIds.length === 1)
-        .map((key) => key.fieldIds[0]));
-    const labels = new Map(table.fields.map((field) => [field.id, field.label]));
+    const unique = new Set((table.uniqueKeys ?? []).filter(key => key.fieldIds.length === 1).map(key => key.fieldIds[0]));
+    const labels = new Map(table.fields.map(field => [field.id, field.label]));
     const focused = viewer.focus?.table === id;
-    return (_jsxs("section", { "data-slot": "sql-table", "data-tone": tone, "data-dimmed": viewer.focus && !viewer.related.has(id) ? "" : undefined, "data-active": focused ? "" : undefined, className: "sprout-sql-table", onMouseLeave: () => viewer.hover(null), children: [_jsx("header", { className: "sprout-sql-table-header", children: _jsx("h3", { className: "sprout-sql-table-title", title: table.label, children: table.label }) }), _jsxs("ul", { className: "sprout-sql-columns", children: [_jsxs("li", { className: "sprout-sql-column", "data-key": "primary", children: [sideHandles("target", "id"), _jsx("span", { className: "sprout-sql-column-icon", children: _jsx(Key, { size: 12, role: "img", "aria-label": "Primary key" }) }), _jsx("span", { className: "sprout-sql-column-name", children: "id" }), _jsx("span", { className: "sprout-sql-column-type", children: "uuid" })] }), table.fields.map((field) => {
-                        const join = field.kind === "relationship";
+    return (_jsxs("section", { "data-slot": "sql-table", "data-tone": tone, "data-dimmed": viewer.focus && !viewer.related.has(id) ? '' : undefined, "data-active": focused ? '' : undefined, className: "sprout-sql-table", onMouseLeave: () => viewer.hover(null), children: [_jsx("header", { className: "sprout-sql-table-header", children: _jsx("h3", { className: "sprout-sql-table-title", title: table.label, children: table.label }) }), _jsxs("ul", { className: "sprout-sql-columns", children: [_jsxs("li", { className: "sprout-sql-column", "data-key": "primary", children: [sideHandles('target', 'id'), _jsx("span", { className: "sprout-sql-column-icon", children: _jsx(Key, { size: 12, role: "img", "aria-label": "Primary key" }) }), _jsx("span", { className: "sprout-sql-column-name", children: "id" }), _jsx("span", { className: "sprout-sql-column-type", children: "uuid" })] }), table.fields.map(field => {
+                        const join = field.kind === 'relationship';
                         const type = columnType(field);
-                        return (_jsxs("li", { className: "sprout-sql-column", "data-join": join ? "" : undefined, "data-active": focused && viewer.focus?.field === field.id ? "" : undefined, title: field.kind === "single-select" || field.kind === "multi-select"
+                        return (_jsxs("li", { className: "sprout-sql-column", "data-join": join ? '' : undefined, "data-active": focused && viewer.focus?.field === field.id ? '' : undefined, title: field.kind === 'single-select' || field.kind === 'multi-select'
                                 ? field.options
-                                    .filter((option) => !option.retired)
-                                    .map((option) => option.label)
-                                    .join(" · ")
-                                : undefined, onMouseEnter: join
-                                ? () => viewer.hover({ table: id, field: field.id })
-                                : undefined, onMouseLeave: join ? () => viewer.hover({ table: id }) : undefined, onClick: join
-                                ? (event) => {
+                                    .filter(option => !option.retired)
+                                    .map(option => option.label)
+                                    .join(' · ')
+                                : undefined, onMouseEnter: join ? () => viewer.hover({ table: id, field: field.id }) : undefined, onMouseLeave: join ? () => viewer.hover({ table: id }) : undefined, onClick: join
+                                ? event => {
                                     event.stopPropagation();
                                     viewer.pin({ table: id, field: field.id });
                                 }
-                                : undefined, children: [join && sideHandles("source", field.id), _jsx("span", { className: "sprout-sql-column-icon", children: join ? (_jsx(Link, { size: 12, role: "img", "aria-label": "Foreign key" })) : unique.has(field.id) ? (_jsx(Fingerprint, { size: 12, role: "img", "aria-label": "Unique" })) : null }), _jsx("span", { className: "sprout-sql-column-name", title: field.label, children: field.label }), _jsxs("span", { className: "sprout-sql-column-type", children: [type, !field.required && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", children: "?" }), _jsx("span", { className: "sprout-sql-sr-only", children: ", nullable" })] }))] })] }, field.id));
-                    })] }), composite.length > 0 && (_jsxs("div", { className: "sprout-sql-keys", children: [_jsx("p", { className: "sprout-sql-keys-title", children: "Unique keys" }), _jsx("ul", { className: "sprout-sql-keys-list", children: composite.map((key) => (_jsxs("li", { className: "sprout-sql-key", children: [_jsx(Fingerprint, { size: 12, "aria-hidden": "true" }), _jsx("span", { children: key.fieldIds
-                                        .map((field) => labels.get(field) ?? field)
-                                        .join(", ") })] }, key.id))) })] }))] }));
+                                : undefined, children: [join && sideHandles('source', field.id), _jsx("span", { className: "sprout-sql-column-icon", children: join ? (_jsx(Link, { size: 12, role: "img", "aria-label": "Foreign key" })) : unique.has(field.id) ? (_jsx(Fingerprint, { size: 12, role: "img", "aria-label": "Unique" })) : null }), _jsx("span", { className: "sprout-sql-column-name", title: field.label, children: field.label }), _jsxs("span", { className: "sprout-sql-column-type", children: [type, !field.required && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", children: "?" }), _jsx("span", { className: "sprout-sql-sr-only", children: ", nullable" })] }))] })] }, field.id));
+                    })] }), composite.length > 0 && (_jsxs("div", { className: "sprout-sql-keys", children: [_jsx("p", { className: "sprout-sql-keys-title", children: "Unique keys" }), _jsx("ul", { className: "sprout-sql-keys-list", children: composite.map(key => (_jsxs("li", { className: "sprout-sql-key", children: [_jsx(Fingerprint, { size: 12, "aria-hidden": "true" }), _jsx("span", { children: key.fieldIds.map(field => labels.get(field) ?? field).join(', ') })] }, key.id))) })] }))] }));
 }
 function GroupFrame({ data: { label, tone, count } }) {
-    return (_jsx("section", { "data-slot": "sql-group", "data-tone": tone, "aria-label": `${label}, ${count} ${count === 1 ? "table" : "tables"}`, className: "sprout-sql-group", children: _jsxs("header", { className: "sprout-sql-group-label", children: [_jsx(Layers, { size: 14, "aria-hidden": "true" }), _jsx("span", { className: "sprout-sql-group-name", children: label }), _jsx("span", { className: "sprout-sql-group-count", children: count })] }) }));
+    return (_jsx("section", { "data-slot": "sql-group", "data-tone": tone, "aria-label": `${label}, ${count} ${count === 1 ? 'table' : 'tables'}`, className: "sprout-sql-group", children: _jsxs("header", { className: "sprout-sql-group-label", children: [_jsx(Layers, { size: 14, "aria-hidden": "true" }), _jsx("span", { className: "sprout-sql-group-name", children: label }), _jsx("span", { className: "sprout-sql-group-count", children: count })] }) }));
 }
 function MoreCard({ data: { tables } }) {
     const { expand } = useViewer();
-    const names = tables.slice(0, 3).map((table) => table.label);
+    const names = tables.slice(0, 3).map(table => table.label);
     const rest = tables.length - names.length;
-    return (_jsxs("div", { "data-slot": "sql-more", className: "sprout-sql-more", children: [sideHandles("target", "in"), sideHandles("source", "out"), _jsx("span", { "aria-hidden": "true", className: "sprout-sql-more-sheet" }), _jsx("span", { "aria-hidden": "true", className: "sprout-sql-more-sheet" }), _jsxs("button", { type: "button", className: "nodrag sprout-sql-more-button", onClick: expand, "aria-label": `Show ${tables.length} more ${tables.length === 1 ? "table" : "tables"}: ${tables.map((table) => table.label).join(", ")}`, children: [_jsxs("span", { className: "sprout-sql-more-count", children: ["+", tables.length, " ", tables.length === 1 ? "table" : "tables"] }), _jsxs("span", { className: "sprout-sql-more-names", children: [names.join(", "), rest > 0 && ` and ${rest} more`] }), _jsx("span", { className: "sprout-sql-more-action", children: "Show all" })] })] }));
+    return (_jsxs("div", { "data-slot": "sql-more", className: "sprout-sql-more", children: [sideHandles('target', 'in'), sideHandles('source', 'out'), _jsx("span", { "aria-hidden": "true", className: "sprout-sql-more-sheet" }), _jsx("span", { "aria-hidden": "true", className: "sprout-sql-more-sheet" }), _jsxs("button", { type: "button", className: "nodrag sprout-sql-more-button", onClick: expand, "aria-label": `Show ${tables.length} more ${tables.length === 1 ? 'table' : 'tables'}: ${tables.map(table => table.label).join(', ')}`, children: [_jsxs("span", { className: "sprout-sql-more-count", children: ["+", tables.length, " ", tables.length === 1 ? 'table' : 'tables'] }), _jsxs("span", { className: "sprout-sql-more-names", children: [names.join(', '), rest > 0 && ` and ${rest} more`] }), _jsx("span", { className: "sprout-sql-more-action", children: "Show all" })] })] }));
 }
 function handlePoint(node, type, id) {
-    const handle = node.internals.handleBounds?.[type]?.find((candidate) => candidate.id === id);
+    const handle = node.internals.handleBounds?.[type]?.find(candidate => candidate.id === id);
     if (!handle)
         return null;
     return {
@@ -264,13 +245,13 @@ function handlePoint(node, type, id) {
 }
 /** A crow's foot for many, a bar for one, drawn outward from the card edge. */
 function endMark(x, y, side, many) {
-    const out = side === "right" ? 1 : -1;
+    const out = side === 'right' ? 1 : -1;
     return many
         ? `M ${x + out * 12} ${y} L ${x} ${y - 6} M ${x + out * 12} ${y} L ${x} ${y + 6}`
         : `M ${x + out * 9} ${y - 5} L ${x + out * 9} ${y + 5}`;
 }
 // Picks the facing sides of the two cards on every render, so links stay tidy while tables are dragged.
-function JoinLine({ id, source, target, sourceHandleId, targetHandleId, data, }) {
+function JoinLine({ id, source, target, sourceHandleId, targetHandleId, data }) {
     const from = useInternalNode(source);
     const to = useInternalNode(target);
     const viewer = useViewer();
@@ -280,17 +261,13 @@ function JoinLine({ id, source, target, sourceHandleId, targetHandleId, data, })
     const toLeft = to.internals.positionAbsolute.x;
     const fromRight = fromLeft + (from.measured.width ?? 0);
     const toRight = toLeft + (to.measured.width ?? 0);
-    const [sourceSide, targetSide] = fromRight + 24 <= toLeft
-        ? ["right", "left"]
-        : toRight + 24 <= fromLeft
-            ? ["left", "right"]
-            : ["right", "right"];
-    const base = (handle) => handle.slice(0, handle.lastIndexOf(":"));
-    const start = handlePoint(from, "source", `${base(sourceHandleId)}:${sourceSide}`);
-    const end = handlePoint(to, "target", `${base(targetHandleId)}:${targetSide}`);
+    const [sourceSide, targetSide] = fromRight + 24 <= toLeft ? ['right', 'left'] : toRight + 24 <= fromLeft ? ['left', 'right'] : ['right', 'right'];
+    const base = (handle) => handle.slice(0, handle.lastIndexOf(':'));
+    const start = handlePoint(from, 'source', `${base(sourceHandleId)}:${sourceSide}`);
+    const end = handlePoint(to, 'target', `${base(targetHandleId)}:${targetSide}`);
     if (!start || !end)
         return null;
-    const position = (side) => side === "right" ? Position.Right : Position.Left;
+    const position = (side) => (side === 'right' ? Position.Right : Position.Left);
     const [path] = getSmoothStepPath({
         sourceX: start.x,
         sourceY: start.y,
@@ -302,7 +279,7 @@ function JoinLine({ id, source, target, sourceHandleId, targetHandleId, data, })
         offset: 28,
     });
     const active = viewer.activeEdges.has(id);
-    return (_jsx("path", { d: `${path} ${endMark(start.x, start.y, sourceSide, data.sourceMany)} ${endMark(end.x, end.y, targetSide, data.targetMany)}`, className: "react-flow__edge-path sprout-sql-join", "data-active": active ? "" : undefined, "data-dimmed": viewer.focus && !active ? "" : undefined }));
+    return (_jsx("path", { d: `${path} ${endMark(start.x, start.y, sourceSide, data.sourceMany)} ${endMark(end.x, end.y, targetSide, data.targetMany)}`, className: "react-flow__edge-path sprout-sql-join", "data-active": active ? '' : undefined, "data-dimmed": viewer.focus && !active ? '' : undefined }));
 }
 const nodeTypes = { table: TableCard, group: GroupFrame, more: MoreCard };
 const edgeTypes = { join: JoinLine };
@@ -313,9 +290,7 @@ function ViewerFlow({ layoutNodes, edges, direction, label, hintId, expanded, se
     const [hovered, setHovered] = useState(null);
     const [pinned, setPinned] = useState(null);
     const focus = hovered ?? pinned;
-    const pin = useCallback((next) => setPinned((current) => current?.table === next.table && current.field === next.field
-        ? null
-        : next), []);
+    const pin = useCallback((next) => setPinned(current => (current?.table === next.table && current.field === next.field ? null : next)), []);
     const state = useMemo(() => {
         const activeEdges = new Set();
         const related = new Set();
@@ -341,69 +316,65 @@ function ViewerFlow({ layoutNodes, edges, direction, label, hintId, expanded, se
         };
     }, [focus, edges, pin, setExpanded]);
     const shownEdges = useMemo(() => state.activeEdges.size
-        ? edges.map((edge) => state.activeEdges.has(edge.id) ? { ...edge, zIndex: 1000 } : edge)
+        ? edges.map(edge => (state.activeEdges.has(edge.id) ? { ...edge, zIndex: 1000 } : edge))
         : edges, [edges, state.activeEdges]);
     // Phones fit the first block to the width and let people pan down; wider panes fit everything.
-    const fitFirst = useMemo(() => direction === "vertical" && layoutNodes[0]
+    const fitFirst = useMemo(() => direction === 'vertical' && layoutNodes[0]
         ? { padding: 0.06, maxZoom: 1, nodes: [{ id: layoutNodes[0].id }] }
         : fitAll, [direction, layoutNodes]);
     const keyboardView = useKeyboardView(fitAll);
     const onKeyDown = (event) => {
         const target = event.target;
-        const id = target.dataset["id"];
-        if ((event.key === "Enter" || event.key === " ") &&
-            target.classList.contains("react-flow__node-table") &&
-            id) {
+        const id = target.dataset['id'];
+        if ((event.key === 'Enter' || event.key === ' ') && target.classList.contains('react-flow__node-table') && id) {
             event.preventDefault();
             pin({ table: id });
             return;
         }
-        if (event.key === "Escape" && pinned) {
+        if (event.key === 'Escape' && pinned) {
             setPinned(null);
             return;
         }
         keyboardView(event);
     };
     const onFocus = (event) => {
-        const id = event.target.dataset["id"];
-        if (event.target.classList.contains("react-flow__node-table") && id)
+        const id = event.target.dataset['id'];
+        if (event.target.classList.contains('react-flow__node-table') && id)
             setHovered({ table: id });
     };
     const onNodeMouseEnter = (_, node) => {
-        if (node.type === "table")
+        if (node.type === 'table')
             setHovered({ table: node.id });
     };
     const onNodeClick = (_, node) => {
-        if (node.type === "table")
+        if (node.type === 'table')
             pin({ table: node.id });
     };
-    return (_jsx(ViewerContext.Provider, { value: state, children: _jsxs(ReactFlow, { className: "sprout-schema-flow sprout-sql-flow", "data-slot": "sql-viewer-viewport", "data-focus": focus ? "" : undefined, "aria-label": label, "aria-describedby": hintId, tabIndex: 0, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: () => setHovered(null), nodes: nodes, edges: shownEdges, onNodesChange: onNodesChange, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onNodeMouseEnter: onNodeMouseEnter, onNodeClick: onNodeClick, onPaneClick: () => setPinned(null), fitView: true, fitViewOptions: fitFirst, minZoom: flowMinZoom, maxZoom: flowMaxZoom, nodesConnectable: false, elementsSelectable: false, edgesFocusable: false, ariaLabelConfig: {
-                "node.a11yDescription.default": keyboardHint,
-                "node.a11yDescription.keyboardDisabled": keyboardHint,
+    return (_jsx(ViewerContext.Provider, { value: state, children: _jsxs(ReactFlow, { className: "sprout-schema-flow sprout-sql-flow", "data-slot": "sql-viewer-viewport", "data-focus": focus ? '' : undefined, "aria-label": label, "aria-describedby": hintId, tabIndex: 0, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: () => setHovered(null), nodes: nodes, edges: shownEdges, onNodesChange: onNodesChange, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onNodeMouseEnter: onNodeMouseEnter, onNodeClick: onNodeClick, onPaneClick: () => setPinned(null), fitView: true, fitViewOptions: fitFirst, minZoom: flowMinZoom, maxZoom: flowMaxZoom, nodesConnectable: false, elementsSelectable: false, edgesFocusable: false, ariaLabelConfig: {
+                'node.a11yDescription.default': keyboardHint,
+                'node.a11yDescription.keyboardDisabled': keyboardHint,
             }, proOptions: { hideAttribution: true }, children: [_jsx(Background, { gap: 16, size: 1 }), _jsx(FitOnResize, { nodes: layoutNodes, fit: fitFirst }), collapsible && expanded && (_jsx(Panel, { position: "top-left", "data-slot": "sql-viewer-collapse", children: _jsxs(Button, { variant: "secondary", size: "sm", onClick: () => {
                             setPinned(null);
                             setExpanded(false);
                         }, children: ["Show ", maxVisible, " tables"] }) })), state.activeEdges.size > 0 && (_jsxs(Panel, { position: "bottom-left", "data-slot": "sql-viewer-joins", "aria-hidden": "true", className: "sprout-sql-joins", children: [edges
-                            .filter((edge) => state.activeEdges.has(edge.id))
+                            .filter(edge => state.activeEdges.has(edge.id))
                             .slice(0, 3)
-                            .map((edge) => (_jsx("code", { className: "sprout-sql-join-text", children: edge.data.join }, edge.id))), state.activeEdges.size > 3 && (_jsxs("span", { className: "sprout-sql-joins-more", children: ["and ", state.activeEdges.size - 3, " more"] }))] })), _jsx(ZoomControls, { position: direction === "vertical" ? "top-right" : "bottom-right", fit: fitAll, className: "sprout-schema-controls", slot: "sql-viewer-controls" })] }) }));
+                            .map(edge => (_jsx("code", { className: "sprout-sql-join-text", children: edge.data.join }, edge.id))), state.activeEdges.size > 3 && (_jsxs("span", { className: "sprout-sql-joins-more", children: ["and ", state.activeEdges.size - 3, " more"] }))] })), _jsx(ZoomControls, { position: direction === 'vertical' ? 'top-right' : 'bottom-right', fit: fitAll, className: "sprout-schema-controls", slot: "sql-viewer-controls" })] }) }));
 }
 /**
  * A pan-and-zoom map of SQL tables, their columns and keys, and the joins
  * between them. Hover or pin a table or a foreign key to trace its joins.
  */
-export function SqlViewer({ tables, label, groups, maxVisible = 4, layout = "auto", className, ...props }) {
+export function SqlViewer({ tables, label, groups, maxVisible = 4, layout = 'auto', className, ...props }) {
     const mobile = useViewportMobile();
-    const direction = layout === "auto" ? (mobile ? "vertical" : "horizontal") : layout;
+    const direction = layout === 'auto' ? (mobile ? 'vertical' : 'horizontal') : layout;
     const hintId = useId();
     const [expanded, setExpanded] = useState(false);
     const limit = Math.max(1, Math.floor(maxVisible));
     const collapsible = tables.length > limit;
-    const [visible, hidden] = useMemo(() => collapsible && !expanded
-        ? [tables.slice(0, limit), tables.slice(limit)]
-        : [tables, []], [tables, limit, collapsible, expanded]);
+    const [visible, hidden] = useMemo(() => (collapsible && !expanded ? [tables.slice(0, limit), tables.slice(limit)] : [tables, []]), [tables, limit, collapsible, expanded]);
     const layoutNodes = useMemo(() => arrange(visible, hidden, groups, direction), [visible, hidden, groups, direction]);
     const edges = useMemo(() => joins(visible, hidden), [visible, hidden]);
     const descriptions = joins(tables, []);
-    return (_jsxs("div", { ...props, role: "figure", "aria-label": label, "data-slot": "sql-viewer", "data-layout": direction, className: cn("sprout-sql-viewer", className), children: [_jsx("p", { id: hintId, className: "sprout-sql-sr-only", children: keyboardHint }), descriptions.length > 0 && (_jsx("ul", { "aria-label": "Joins", className: "sprout-sql-sr-only", children: descriptions.map((edge) => (_jsx("li", { children: edge.data.description }, edge.id))) })), tables.length === 0 ? (_jsx("p", { className: "sprout-sql-empty", children: "No tables to show" })) : (_jsx(ReactFlowProvider, { children: _jsx(ViewerFlow, { layoutNodes: layoutNodes, edges: edges, direction: direction, label: label, hintId: hintId, expanded: expanded, setExpanded: setExpanded, collapsible: collapsible, maxVisible: limit }) }, direction))] }));
+    return (_jsxs("div", { ...props, role: "figure", "aria-label": label, "data-slot": "sql-viewer", "data-layout": direction, className: cn('sprout-sql-viewer', className), children: [_jsx("p", { id: hintId, className: "sprout-sql-sr-only", children: keyboardHint }), descriptions.length > 0 && (_jsx("ul", { "aria-label": "Joins", className: "sprout-sql-sr-only", children: descriptions.map(edge => (_jsx("li", { children: edge.data.description }, edge.id))) })), tables.length === 0 ? (_jsx("p", { className: "sprout-sql-empty", children: "No tables to show" })) : (_jsx(ReactFlowProvider, { children: _jsx(ViewerFlow, { layoutNodes: layoutNodes, edges: edges, direction: direction, label: label, hintId: hintId, expanded: expanded, setExpanded: setExpanded, collapsible: collapsible, maxVisible: limit }) }, direction))] }));
 }

package/dist/components/state-panel-samples.d.ts

@@ -1,6 +1,6 @@
-import { type SampleWindowProps } from "./state-sample.js";
+import { type SampleWindowProps } from './state-sample.js';
 /** Pass-through props for the outer sample window. */
-export type StatePanelSampleProps = Omit<SampleWindowProps, "icon" | "trail" | "tabs" | "children">;
+export type StatePanelSampleProps = Omit<SampleWindowProps, 'icon' | 'trail' | 'tabs' | 'children'>;
 export declare function ChatsSample(props: StatePanelSampleProps): import("react").JSX.Element;
 export declare function FilesSample(props: StatePanelSampleProps): import("react").JSX.Element;
 export declare function AgentsSample(props: StatePanelSampleProps): import("react").JSX.Element;