@ship-it-ui/cytoscape 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ship-it-ops
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,362 @@
+'use client';
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  GRAPH_CANVAS_CLASS: () => GRAPH_CANVAS_CLASS,
+  GraphCanvas: () => GraphCanvas,
+  buildShipItStylesheet: () => buildShipItStylesheet,
+  readThemeTokens: () => readThemeTokens,
+  resolveColorReference: () => resolveColorReference,
+  resolveCssVar: () => resolveCssVar,
+  resolveEntityColor: () => resolveEntityColor,
+  useShipItStylesheet: () => useShipItStylesheet
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/stylesheet.ts
+var import_shipit2 = require("@ship-it-ui/shipit");
+
+// src/theme-tokens.ts
+var import_shipit = require("@ship-it-ui/shipit");
+var DEFAULT_FALLBACK = {
+  bg: "#0a0a0a",
+  panel: "#0f0f0f",
+  "panel-2": "#161616",
+  border: "#262626",
+  "border-strong": "#383838",
+  text: "#fafafa",
+  "text-muted": "#a3a3a3",
+  "text-dim": "#737373",
+  accent: "#3b82f6",
+  ok: "#10b981",
+  warn: "#f59e0b",
+  err: "#ef4444",
+  purple: "#a855f7",
+  pink: "#ec4899"
+};
+function resolveCssVar(name, fallback = "") {
+  if (typeof document === "undefined") return fallback;
+  const raw = getComputedStyle(document.documentElement).getPropertyValue(name);
+  const trimmed = raw.trim();
+  return trimmed.length > 0 ? trimmed : fallback;
+}
+function readThemeTokens() {
+  return {
+    bg: resolveCssVar("--color-bg", DEFAULT_FALLBACK.bg),
+    panel: resolveCssVar("--color-panel", DEFAULT_FALLBACK.panel),
+    panel2: resolveCssVar("--color-panel-2", DEFAULT_FALLBACK["panel-2"]),
+    border: resolveCssVar("--color-border", DEFAULT_FALLBACK.border),
+    borderStrong: resolveCssVar("--color-border-strong", DEFAULT_FALLBACK["border-strong"]),
+    text: resolveCssVar("--color-text", DEFAULT_FALLBACK.text),
+    textMuted: resolveCssVar("--color-text-muted", DEFAULT_FALLBACK["text-muted"]),
+    textDim: resolveCssVar("--color-text-dim", DEFAULT_FALLBACK["text-dim"]),
+    accent: resolveCssVar("--color-accent", DEFAULT_FALLBACK.accent),
+    ok: resolveCssVar("--color-ok", DEFAULT_FALLBACK.ok),
+    warn: resolveCssVar("--color-warn", DEFAULT_FALLBACK.warn),
+    err: resolveCssVar("--color-err", DEFAULT_FALLBACK.err),
+    purple: resolveCssVar("--color-purple", DEFAULT_FALLBACK.purple),
+    pink: resolveCssVar("--color-pink", DEFAULT_FALLBACK.pink)
+  };
+}
+function resolveEntityColor(type, palette) {
+  const meta = (0, import_shipit.getEntityTypeMeta)(type);
+  return resolveColorReference(meta.colorVar, palette);
+}
+function parseColorVarName(value) {
+  let i = 0;
+  while (i < value.length && isWhitespace(value.charCodeAt(i))) i++;
+  if (!value.startsWith("var(", i)) return void 0;
+  i += 4;
+  while (i < value.length && isWhitespace(value.charCodeAt(i))) i++;
+  if (!value.startsWith("--color-", i)) return void 0;
+  i += 8;
+  const start = i;
+  while (i < value.length) {
+    const c = value.charCodeAt(i);
+    if (c === CC_COMMA || c === CC_PAREN_CLOSE || isWhitespace(c)) break;
+    i++;
+  }
+  if (i === start) return void 0;
+  const close = value.indexOf(")", i);
+  if (close === -1) return void 0;
+  return value.slice(start, i);
+}
+var CC_COMMA = 44;
+var CC_PAREN_CLOSE = 41;
+function isWhitespace(cc) {
+  return cc === 32 || cc === 9 || cc === 10 || cc === 13 || cc === 12 || cc === 11;
+}
+function resolveColorReference(value, palette) {
+  const key = parseColorVarName(value);
+  if (key === void 0) return value;
+  switch (key) {
+    case "bg":
+      return palette.bg;
+    case "panel":
+      return palette.panel;
+    case "panel-2":
+      return palette.panel2;
+    case "border":
+      return palette.border;
+    case "border-strong":
+      return palette.borderStrong;
+    case "text":
+      return palette.text;
+    case "text-muted":
+      return palette.textMuted;
+    case "text-dim":
+      return palette.textDim;
+    case "accent":
+      return palette.accent;
+    case "ok":
+      return palette.ok;
+    case "warn":
+      return palette.warn;
+    case "err":
+      return palette.err;
+    case "purple":
+      return palette.purple;
+    case "pink":
+      return palette.pink;
+    default:
+      return palette.accent;
+  }
+}
+
+// src/stylesheet.ts
+function buildShipItStylesheet(options = {}) {
+  const palette = options.palette ?? readThemeTokens();
+  const color = (cssVar) => resolveColorReference(cssVar, palette);
+  const base = [
+    {
+      selector: "node",
+      style: {
+        "background-color": palette.panel,
+        "border-width": 1.5,
+        "border-color": palette.accent,
+        "border-opacity": 1,
+        label: "data(label)",
+        color: palette.textMuted,
+        "font-family": "var(--font-mono, monospace)",
+        "font-size": 10,
+        "text-valign": "bottom",
+        "text-halign": "center",
+        "text-margin-y": 6,
+        width: 36,
+        height: 36,
+        shape: "round-rectangle"
+      }
+    },
+    // One selector per entity type registered with @ship-it-ui/shipit. Built-in
+    // types are seeded automatically; custom types registered via
+    // `registerEntityType(...)` pick up their `colorVar` here without a docs
+    // patch or a forked stylesheet.
+    ...(0, import_shipit2.listEntityTypes)().map(([type, meta]) => ({
+      selector: `node[entityType = "${escapeCytoscapeAttr(type)}"]`,
+      style: { "border-color": color(meta.colorVar) }
+    })),
+    {
+      selector: "node:selected",
+      style: {
+        "border-width": 3,
+        "overlay-color": palette.accent,
+        "overlay-opacity": 0.15,
+        "overlay-padding": 4
+      }
+    },
+    {
+      selector: "node.graph-canvas\\:path",
+      style: { "border-color": palette.purple }
+    },
+    {
+      selector: "node.graph-canvas\\:dim",
+      style: { opacity: 0.35 }
+    },
+    {
+      selector: "edge",
+      style: {
+        width: 1,
+        "line-color": palette.border,
+        "target-arrow-color": palette.border,
+        "target-arrow-shape": "triangle",
+        "arrow-scale": 0.8,
+        "curve-style": "bezier"
+      }
+    },
+    {
+      selector: "edge.graph-canvas\\:path",
+      style: {
+        "line-color": palette.purple,
+        "target-arrow-color": palette.purple,
+        width: 1.5
+      }
+    },
+    {
+      selector: "edge.graph-canvas\\:dim",
+      style: { opacity: 0.25 }
+    }
+  ];
+  return [...base, ...options.extra ?? []];
+}
+var GRAPH_CANVAS_CLASS = {
+  path: "graph-canvas:path",
+  dim: "graph-canvas:dim"
+};
+function escapeCytoscapeAttr(value) {
+  return value.replace(/[\\"]/g, (c) => `\\${c}`);
+}
+
+// src/useShipItStylesheet.ts
+var import_react = require("react");
+function useShipItStylesheet(cyRef, options = {}) {
+  const { observe = true, palette, extra } = options;
+  const buildOptions = (0, import_react.useMemo)(
+    () => ({ palette, extra }),
+    [palette, extra]
+  );
+  const apply = (0, import_react.useCallback)(() => {
+    const cy = cyRef.current;
+    if (!cy) return;
+    cy.style(buildShipItStylesheet(buildOptions)).update();
+  }, [cyRef, buildOptions]);
+  (0, import_react.useEffect)(() => {
+    apply();
+    if (!observe || typeof document === "undefined") return void 0;
+    const observer = new MutationObserver(apply);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme"]
+    });
+    return () => observer.disconnect();
+  }, [apply, observe]);
+  return { refresh: apply };
+}
+
+// src/GraphCanvas.tsx
+var import_react2 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_LAYOUT = { name: "preset" };
+var GraphCanvas = (0, import_react2.forwardRef)(function GraphCanvas2({
+  engine,
+  elements,
+  layout = DEFAULT_LAYOUT,
+  onSelect,
+  onClearSelection,
+  onNodeHover,
+  onNodeLeave,
+  inspector,
+  styleOptions,
+  className,
+  "aria-label": ariaLabel = "Graph canvas",
+  ...props
+}, forwardedRef) {
+  const containerRef = (0, import_react2.useRef)(null);
+  const cyRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    if (!containerRef.current) return void 0;
+    const cy = engine({
+      container: containerRef.current,
+      elements,
+      layout,
+      style: buildShipItStylesheet(styleOptions)
+    });
+    cyRef.current = cy;
+    return () => {
+      cy.destroy();
+      cyRef.current = null;
+    };
+  }, [engine]);
+  (0, import_react2.useEffect)(() => {
+    const cy = cyRef.current;
+    if (!cy) return;
+    cy.json({ elements });
+  }, [elements]);
+  (0, import_react2.useEffect)(() => {
+    const cy = cyRef.current;
+    if (!cy) return;
+    cy.layout(layout).run();
+  }, [layout]);
+  const { refresh: refreshStyles } = useShipItStylesheet(cyRef, styleOptions);
+  (0, import_react2.useEffect)(() => {
+    const cy = cyRef.current;
+    if (!cy) return void 0;
+    const handleSelect = (event) => {
+      if (event.target?.isNode?.()) {
+        onSelect?.(event.target);
+      }
+    };
+    const handleBackgroundTap = (event) => {
+      if (event.target === cy) onClearSelection?.();
+    };
+    const handleEnter = (event) => {
+      onNodeHover?.(event.target);
+    };
+    const handleLeave = () => onNodeLeave?.();
+    cy.on("tap", "node", handleSelect);
+    cy.on("tap", handleBackgroundTap);
+    cy.on("mouseover", "node", handleEnter);
+    cy.on("mouseout", "node", handleLeave);
+    return () => {
+      cy.off("tap", "node", handleSelect);
+      cy.off("tap", handleBackgroundTap);
+      cy.off("mouseover", "node", handleEnter);
+      cy.off("mouseout", "node", handleLeave);
+    };
+  }, [engine, onSelect, onClearSelection, onNodeHover, onNodeLeave]);
+  (0, import_react2.useImperativeHandle)(
+    forwardedRef,
+    () => ({
+      get cy() {
+        return cyRef.current;
+      },
+      refreshStyles
+    }),
+    [refreshStyles]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      role: "region",
+      "aria-label": ariaLabel,
+      className: ["relative h-full w-full", className].filter(Boolean).join(" "),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: containerRef, className: "absolute inset-0" }),
+        inspector && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute top-4 right-4 z-10", children: inspector })
+      ]
+    }
+  );
+});
+GraphCanvas.displayName = "GraphCanvas";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GRAPH_CANVAS_CLASS,
+  GraphCanvas,
+  buildShipItStylesheet,
+  readThemeTokens,
+  resolveColorReference,
+  resolveCssVar,
+  resolveEntityColor,
+  useShipItStylesheet
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/stylesheet.ts","../src/theme-tokens.ts","../src/useShipItStylesheet.ts","../src/GraphCanvas.tsx"],"sourcesContent":["/**\n * @ship-it-ui/cytoscape — Cytoscape adapter for the Ship-It design system.\n *\n * Three layered exports:\n *   - {@link buildShipItStylesheet}   — token-driven stylesheet array.\n *   - {@link useShipItStylesheet}     — theme-aware re-resolver hook.\n *   - {@link GraphCanvas}             — `<GraphCanvas>` React wrapper that\n *                                       owns the data-theme ↔ stylesheet ↔\n *                                       inspector dance.\n *\n * Cytoscape is a peer dependency — pass `engine={cytoscape}` so the consumer\n * controls the version and any registered extensions.\n */\n\nexport {\n  buildShipItStylesheet,\n  GRAPH_CANVAS_CLASS,\n  type BuildStylesheetOptions,\n  type ShipItStylesheetBlock,\n} from './stylesheet';\n\nexport {\n  useShipItStylesheet,\n  type UseShipItStylesheetOptions,\n  type UseShipItStylesheetReturn,\n} from './useShipItStylesheet';\n\nexport {\n  GraphCanvas,\n  type GraphCanvasProps,\n  type GraphCanvasHandle,\n  type CytoscapeEngine,\n} from './GraphCanvas';\n\nexport {\n  readThemeTokens,\n  resolveCssVar,\n  resolveColorReference,\n  resolveEntityColor,\n  type ThemeTokenPalette,\n} from './theme-tokens';\n","import { listEntityTypes } from '@ship-it-ui/shipit';\nimport type cytoscape from 'cytoscape';\n\nimport { readThemeTokens, resolveColorReference, type ThemeTokenPalette } from './theme-tokens';\n\n/**\n * Build a Cytoscape stylesheet from the live design tokens. The result is a\n * plain JSON array suitable for `cytoscape({ style: ... })` — re-run after a\n * `data-theme` change to pick up the new palette.\n *\n * The stylesheet is opinionated:\n *   - Nodes are square-ish rounded glyphs colored by `data(entityType)`.\n *   - Edges are token-colored thin lines with arrowheads.\n *   - Selected / on-path / dimmed states are driven by class names that the\n *     consumer toggles (`graph-canvas:selected`, `graph-canvas:path`,\n *     `graph-canvas:dim`).\n *\n * Pass `palette` to override the token read — useful for SSR or tests.\n */\n\nexport interface BuildStylesheetOptions {\n  /** Pre-resolved palette. When omitted, tokens are read from the document. */\n  palette?: ThemeTokenPalette;\n  /**\n   * Additional entries appended to the stylesheet — handy for app-specific\n   * selectors without forking the builder.\n   */\n  extra?: ReadonlyArray<cytoscape.StylesheetJsonBlock>;\n}\n\n// Re-export the block type so consumers can declare typed `extra` entries.\nexport type ShipItStylesheetBlock = cytoscape.StylesheetJsonBlock;\n\nexport function buildShipItStylesheet(\n  options: BuildStylesheetOptions = {},\n): cytoscape.StylesheetJson {\n  const palette = options.palette ?? readThemeTokens();\n  const color = (cssVar: string) => resolveColorReference(cssVar, palette);\n\n  const base: cytoscape.StylesheetJsonBlock[] = [\n    {\n      selector: 'node',\n      style: {\n        'background-color': palette.panel,\n        'border-width': 1.5,\n        'border-color': palette.accent,\n        'border-opacity': 1,\n        label: 'data(label)',\n        color: palette.textMuted,\n        'font-family': 'var(--font-mono, monospace)',\n        'font-size': 10,\n        'text-valign': 'bottom',\n        'text-halign': 'center',\n        'text-margin-y': 6,\n        width: 36,\n        height: 36,\n        shape: 'round-rectangle',\n      },\n    },\n    // One selector per entity type registered with @ship-it-ui/shipit. Built-in\n    // types are seeded automatically; custom types registered via\n    // `registerEntityType(...)` pick up their `colorVar` here without a docs\n    // patch or a forked stylesheet.\n    ...listEntityTypes().map<cytoscape.StylesheetJsonBlock>(([type, meta]) => ({\n      selector: `node[entityType = \"${escapeCytoscapeAttr(type)}\"]`,\n      style: { 'border-color': color(meta.colorVar) },\n    })),\n    {\n      selector: 'node:selected',\n      style: {\n        'border-width': 3,\n        'overlay-color': palette.accent,\n        'overlay-opacity': 0.15,\n        'overlay-padding': 4,\n      },\n    },\n    {\n      selector: 'node.graph-canvas\\\\:path',\n      style: { 'border-color': palette.purple },\n    },\n    {\n      selector: 'node.graph-canvas\\\\:dim',\n      style: { opacity: 0.35 },\n    },\n    {\n      selector: 'edge',\n      style: {\n        width: 1,\n        'line-color': palette.border,\n        'target-arrow-color': palette.border,\n        'target-arrow-shape': 'triangle',\n        'arrow-scale': 0.8,\n        'curve-style': 'bezier',\n      },\n    },\n    {\n      selector: 'edge.graph-canvas\\\\:path',\n      style: {\n        'line-color': palette.purple,\n        'target-arrow-color': palette.purple,\n        width: 1.5,\n      },\n    },\n    {\n      selector: 'edge.graph-canvas\\\\:dim',\n      style: { opacity: 0.25 },\n    },\n  ];\n\n  return [...base, ...(options.extra ?? [])] as cytoscape.StylesheetJson;\n}\n\n/**\n * Convenience class names the stylesheet recognizes. Toggle these on Cytoscape\n * nodes / edges to drive the on-path and dimmed visuals.\n */\nexport const GRAPH_CANVAS_CLASS = {\n  path: 'graph-canvas:path',\n  dim: 'graph-canvas:dim',\n} as const;\n\n// Cytoscape's attribute selector accepts a double-quoted string. Escape\n// embedded backslashes and double quotes so a malformed (or hostile)\n// registered key can't break out of the selector. The grammar\n// (https://js.cytoscape.org/#selectors/data) is more permissive than CSS, but\n// these two characters are the only ones that would change selector semantics.\nfunction escapeCytoscapeAttr(value: string): string {\n  return value.replace(/[\\\\\"]/g, (c) => `\\\\${c}`);\n}\n","/**\n * Token resolution helpers. The Ship-It design system stores colors as CSS\n * custom properties on `<html>` (`--color-accent`, `--color-bg`, …). Cytoscape\n * renders to a canvas / SVG layer outside Tailwind, so those vars never\n * resolve — we read the *computed* values at runtime and feed them into the\n * stylesheet builder as concrete color strings.\n *\n * Two layers:\n *   1. `resolveCssVar` — single-var reader with a fallback.\n *   2. `readThemeTokens` — pulls every color the stylesheet uses, returning a\n *      flat `Record<string, string>` keyed by short name (no `--color-`\n *      prefix). Re-running this after a `data-theme` flip yields a fresh\n *      palette.\n */\n\nimport { getEntityTypeMeta, type EntityType } from '@ship-it-ui/shipit';\n\nconst DEFAULT_FALLBACK: Record<string, string> = {\n  bg: '#0a0a0a',\n  panel: '#0f0f0f',\n  'panel-2': '#161616',\n  border: '#262626',\n  'border-strong': '#383838',\n  text: '#fafafa',\n  'text-muted': '#a3a3a3',\n  'text-dim': '#737373',\n  accent: '#3b82f6',\n  ok: '#10b981',\n  warn: '#f59e0b',\n  err: '#ef4444',\n  purple: '#a855f7',\n  pink: '#ec4899',\n};\n\n/**\n * Read a single CSS variable from the document root and return its trimmed\n * computed value, falling back to `fallback` when the document is missing\n * (SSR) or the variable is unset.\n */\nexport function resolveCssVar(name: string, fallback = ''): string {\n  if (typeof document === 'undefined') return fallback;\n  const raw = getComputedStyle(document.documentElement).getPropertyValue(name);\n  const trimmed = raw.trim();\n  return trimmed.length > 0 ? trimmed : fallback;\n}\n\nexport interface ThemeTokenPalette {\n  /** Surface backgrounds. */\n  bg: string;\n  panel: string;\n  panel2: string;\n  /** Hairline + emphasis border. */\n  border: string;\n  borderStrong: string;\n  /** Foreground tiers. */\n  text: string;\n  textMuted: string;\n  textDim: string;\n  /** Brand + status. */\n  accent: string;\n  ok: string;\n  warn: string;\n  err: string;\n  /** Extras the graph uses for entity-type ring colors. */\n  purple: string;\n  pink: string;\n}\n\n/** Read the canonical Ship-It color tokens from the document root. */\nexport function readThemeTokens(): ThemeTokenPalette {\n  return {\n    bg: resolveCssVar('--color-bg', DEFAULT_FALLBACK.bg),\n    panel: resolveCssVar('--color-panel', DEFAULT_FALLBACK.panel),\n    panel2: resolveCssVar('--color-panel-2', DEFAULT_FALLBACK['panel-2']),\n    border: resolveCssVar('--color-border', DEFAULT_FALLBACK.border),\n    borderStrong: resolveCssVar('--color-border-strong', DEFAULT_FALLBACK['border-strong']),\n    text: resolveCssVar('--color-text', DEFAULT_FALLBACK.text),\n    textMuted: resolveCssVar('--color-text-muted', DEFAULT_FALLBACK['text-muted']),\n    textDim: resolveCssVar('--color-text-dim', DEFAULT_FALLBACK['text-dim']),\n    accent: resolveCssVar('--color-accent', DEFAULT_FALLBACK.accent),\n    ok: resolveCssVar('--color-ok', DEFAULT_FALLBACK.ok),\n    warn: resolveCssVar('--color-warn', DEFAULT_FALLBACK.warn),\n    err: resolveCssVar('--color-err', DEFAULT_FALLBACK.err),\n    purple: resolveCssVar('--color-purple', DEFAULT_FALLBACK.purple),\n    pink: resolveCssVar('--color-pink', DEFAULT_FALLBACK.pink),\n  };\n}\n\n/**\n * Resolve the concrete color for a registered entity type. Reads the type's\n * `colorVar` (a `var(--color-…)` string) and looks the value up in the\n * palette. Falls back to the palette's `accent` color when the var is\n * malformed or unknown.\n */\nexport function resolveEntityColor(type: EntityType, palette: ThemeTokenPalette): string {\n  const meta = getEntityTypeMeta(type);\n  return resolveColorReference(meta.colorVar, palette);\n}\n\n/**\n * Extract `foo` from `var(--color-foo)` or `var(--color-foo, fallback)`.\n * Returns `undefined` if the input doesn't match. O(n), no backtracking.\n */\nfunction parseColorVarName(value: string): string | undefined {\n  // Strip surrounding whitespace once. `String#trim` is linear, not a regex.\n  let i = 0;\n  while (i < value.length && isWhitespace(value.charCodeAt(i))) i++;\n  if (!value.startsWith('var(', i)) return undefined;\n  i += 4;\n  // Skip whitespace inside the parens.\n  while (i < value.length && isWhitespace(value.charCodeAt(i))) i++;\n  if (!value.startsWith('--color-', i)) return undefined;\n  i += 8;\n  // Read the name: stop at the first whitespace, comma, or `)`.\n  const start = i;\n  while (i < value.length) {\n    const c = value.charCodeAt(i);\n    if (c === CC_COMMA || c === CC_PAREN_CLOSE || isWhitespace(c)) break;\n    i++;\n  }\n  if (i === start) return undefined;\n  // Require a closing `)` somewhere after, so we don't classify malformed\n  // inputs (`var(--color-foo`) as valid references.\n  const close = value.indexOf(')', i);\n  if (close === -1) return undefined;\n  return value.slice(start, i);\n}\n\nconst CC_COMMA = 0x2c;\nconst CC_PAREN_CLOSE = 0x29;\n\nfunction isWhitespace(cc: number): boolean {\n  // ASCII whitespace: space, tab, LF, CR, FF, VT.\n  return cc === 0x20 || cc === 0x09 || cc === 0x0a || cc === 0x0d || cc === 0x0c || cc === 0x0b;\n}\n\n/**\n * Map a `var(--color-foo)` reference or a raw color literal to a concrete\n * color string, using the supplied palette. Unrecognized references fall back\n * to `accent`.\n */\nexport function resolveColorReference(value: string, palette: ThemeTokenPalette): string {\n  // Deterministic parser instead of a regex — regex variants with overlapping\n  // quantifiers around the color name produced quadratic backtracking on\n  // adversarial inputs (CodeQL js/polynomial-redos).\n  const key = parseColorVarName(value);\n  if (key === undefined) return value;\n  switch (key) {\n    case 'bg':\n      return palette.bg;\n    case 'panel':\n      return palette.panel;\n    case 'panel-2':\n      return palette.panel2;\n    case 'border':\n      return palette.border;\n    case 'border-strong':\n      return palette.borderStrong;\n    case 'text':\n      return palette.text;\n    case 'text-muted':\n      return palette.textMuted;\n    case 'text-dim':\n      return palette.textDim;\n    case 'accent':\n      return palette.accent;\n    case 'ok':\n      return palette.ok;\n    case 'warn':\n      return palette.warn;\n    case 'err':\n      return palette.err;\n    case 'purple':\n      return palette.purple;\n    case 'pink':\n      return palette.pink;\n    default:\n      return palette.accent;\n  }\n}\n","'use client';\n\nimport type cytoscape from 'cytoscape';\nimport { useCallback, useEffect, useMemo } from 'react';\n\nimport { buildShipItStylesheet, type BuildStylesheetOptions } from './stylesheet';\n\n/**\n * useShipItStylesheet — keeps a Cytoscape instance's stylesheet in sync with\n * the live design-token palette. Re-applies the stylesheet whenever\n * `<html data-theme>` flips, so toggling between dark and light propagates to\n * the graph without remounting.\n *\n * Returns a `refresh()` callback the consumer can invoke after any other\n * theme-affecting change (e.g., a `--color-accent` hue knob update).\n *\n * ```ts\n * const cyRef = useRef<cytoscape.Core | null>(null);\n * const { refresh } = useShipItStylesheet(cyRef);\n * ```\n */\n\nexport interface UseShipItStylesheetOptions extends BuildStylesheetOptions {\n  /** Skip the MutationObserver wiring (e.g., when the host owns its own observer). */\n  observe?: boolean;\n}\n\nexport interface UseShipItStylesheetReturn {\n  /** Re-read tokens and re-apply the stylesheet. */\n  refresh: () => void;\n}\n\nexport function useShipItStylesheet(\n  cyRef: { current: cytoscape.Core | null },\n  options: UseShipItStylesheetOptions = {},\n): UseShipItStylesheetReturn {\n  const { observe = true, palette, extra } = options;\n  // Memoize the build options against their flat constituents so callers that\n  // pass `options` inline (a fresh object each render) don't churn `apply` /\n  // disconnect+reconnect the MutationObserver on every render.\n  const buildOptions = useMemo<BuildStylesheetOptions>(\n    () => ({ palette, extra }),\n    [palette, extra],\n  );\n\n  const apply = useCallback(() => {\n    const cy = cyRef.current;\n    if (!cy) return;\n    cy.style(buildShipItStylesheet(buildOptions)).update();\n  }, [cyRef, buildOptions]);\n\n  useEffect(() => {\n    apply();\n    if (!observe || typeof document === 'undefined') return undefined;\n    const observer = new MutationObserver(apply);\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['data-theme'],\n    });\n    return () => observer.disconnect();\n  }, [apply, observe]);\n\n  return { refresh: apply };\n}\n","'use client';\n\nimport type cytoscape from 'cytoscape';\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\n\nimport { buildShipItStylesheet, type BuildStylesheetOptions } from './stylesheet';\nimport { useShipItStylesheet } from './useShipItStylesheet';\n\n/**\n * GraphCanvas — high-level wrapper around a Cytoscape instance. Owns the\n * `data-theme` ↔ stylesheet sync (via {@link useShipItStylesheet}), the\n * cytoscape lifecycle (create / destroy on mount / unmount), and a thin\n * selection API on top of Cytoscape's events.\n *\n * The component never bundles Cytoscape itself — pass the engine factory in\n * via the `engine` prop so the consumer controls the Cytoscape version and\n * any registered extensions:\n *\n * ```tsx\n * import cytoscape from 'cytoscape';\n *\n * <GraphCanvas\n *   engine={cytoscape}\n *   elements={[...]}\n *   layout={{ name: 'cose' }}\n *   onSelect={(node) => setSelected(node.id())}\n *   inspector={selected && <GraphInspector …/>}\n * />\n * ```\n */\n\nexport type CytoscapeEngine = (options: cytoscape.CytoscapeOptions) => cytoscape.Core;\n\nexport interface GraphCanvasHandle {\n  /** Live Cytoscape instance. `null` until mount. */\n  cy: cytoscape.Core | null;\n  /** Re-read tokens and re-apply the stylesheet. */\n  refreshStyles: () => void;\n}\n\nexport interface GraphCanvasProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onSelect' | 'children'\n> {\n  /** Cytoscape factory. Pass the imported `cytoscape` default export. */\n  engine: CytoscapeEngine;\n  /** Graph elements (nodes + edges). Passed straight through to Cytoscape. */\n  elements: cytoscape.ElementDefinition[];\n  /** Layout config. Defaults to a static `preset` layout (no auto-layout). */\n  layout?: cytoscape.LayoutOptions;\n  /** Fires when a node is tapped/selected. */\n  onSelect?: (node: cytoscape.NodeSingular) => void;\n  /** Fires when the selection is cleared (background tap). */\n  onClearSelection?: () => void;\n  /** Fires when the pointer enters a node. */\n  onNodeHover?: (node: cytoscape.NodeSingular) => void;\n  /** Fires when the pointer leaves a node. */\n  onNodeLeave?: () => void;\n  /** Slot rendered over the graph (e.g., a `<GraphInspector>`). Positioned top-right. */\n  inspector?: ReactNode;\n  /** Overrides for the stylesheet builder. */\n  styleOptions?: BuildStylesheetOptions;\n  /** Accessible label for the container. */\n  'aria-label'?: string;\n}\n\nconst DEFAULT_LAYOUT: cytoscape.LayoutOptions = { name: 'preset' };\n\nexport const GraphCanvas = forwardRef<GraphCanvasHandle, GraphCanvasProps>(function GraphCanvas(\n  {\n    engine,\n    elements,\n    layout = DEFAULT_LAYOUT,\n    onSelect,\n    onClearSelection,\n    onNodeHover,\n    onNodeLeave,\n    inspector,\n    styleOptions,\n    className,\n    'aria-label': ariaLabel = 'Graph canvas',\n    ...props\n  },\n  forwardedRef,\n) {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const cyRef = useRef<cytoscape.Core | null>(null);\n\n  // Create the cytoscape instance once on mount.\n  useEffect(() => {\n    if (!containerRef.current) return undefined;\n    const cy = engine({\n      container: containerRef.current,\n      elements,\n      layout,\n      style: buildShipItStylesheet(styleOptions),\n    });\n    cyRef.current = cy;\n    return () => {\n      cy.destroy();\n      cyRef.current = null;\n    };\n    // We intentionally re-create on engine swap or container remount only.\n    // Elements / layout / style updates are handled in the effects below.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [engine]);\n\n  // Keep elements in sync.\n  useEffect(() => {\n    const cy = cyRef.current;\n    if (!cy) return;\n    cy.json({ elements });\n  }, [elements]);\n\n  // Re-run layout when the layout config changes.\n  useEffect(() => {\n    const cy = cyRef.current;\n    if (!cy) return;\n    cy.layout(layout).run();\n  }, [layout]);\n\n  const { refresh: refreshStyles } = useShipItStylesheet(cyRef, styleOptions);\n\n  // Wire selection events. `engine` is in the deps so the listeners re-bind\n  // whenever the upstream effect destroys + recreates the Cytoscape instance —\n  // without it, an `engine` swap would leave the new `cy` without handlers.\n  useEffect(() => {\n    const cy = cyRef.current;\n    if (!cy) return undefined;\n    const handleSelect = (event: cytoscape.EventObject) => {\n      if (event.target?.isNode?.()) {\n        onSelect?.(event.target as cytoscape.NodeSingular);\n      }\n    };\n    const handleBackgroundTap = (event: cytoscape.EventObject) => {\n      if (event.target === cy) onClearSelection?.();\n    };\n    const handleEnter = (event: cytoscape.EventObject) => {\n      onNodeHover?.(event.target as cytoscape.NodeSingular);\n    };\n    const handleLeave = () => onNodeLeave?.();\n    cy.on('tap', 'node', handleSelect);\n    cy.on('tap', handleBackgroundTap);\n    cy.on('mouseover', 'node', handleEnter);\n    cy.on('mouseout', 'node', handleLeave);\n    return () => {\n      cy.off('tap', 'node', handleSelect);\n      cy.off('tap', handleBackgroundTap);\n      cy.off('mouseover', 'node', handleEnter);\n      cy.off('mouseout', 'node', handleLeave);\n    };\n  }, [engine, onSelect, onClearSelection, onNodeHover, onNodeLeave]);\n\n  // Expose the imperative handle via getters so consumers always read the live\n  // `cyRef.current`. Snapshotting `cyRef.current` here would freeze it at\n  // `null` because the instance is assigned inside an effect that runs *after*\n  // the initial render — Copilot/Claude both flagged this.\n  useImperativeHandle(\n    forwardedRef,\n    (): GraphCanvasHandle => ({\n      get cy() {\n        return cyRef.current;\n      },\n      refreshStyles,\n    }),\n    [refreshStyles],\n  );\n\n  return (\n    <div\n      role=\"region\"\n      aria-label={ariaLabel}\n      className={['relative h-full w-full', className].filter(Boolean).join(' ')}\n      {...props}\n    >\n      <div ref={containerRef} className=\"absolute inset-0\" />\n      {inspector && <div className=\"absolute top-4 right-4 z-10\">{inspector}</div>}\n    </div>\n  );\n});\n\nGraphCanvas.displayName = 'GraphCanvas';\n"],"mappings":"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","names":["import_shipit","import_react","GraphCanvas"]}

package/dist/index.d.cts

@@ -0,0 +1,177 @@
+import cytoscape from 'cytoscape';
+import { EntityType } from '@ship-it-ui/shipit';
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Token resolution helpers. The Ship-It design system stores colors as CSS
+ * custom properties on `<html>` (`--color-accent`, `--color-bg`, …). Cytoscape
+ * renders to a canvas / SVG layer outside Tailwind, so those vars never
+ * resolve — we read the *computed* values at runtime and feed them into the
+ * stylesheet builder as concrete color strings.
+ *
+ * Two layers:
+ *   1. `resolveCssVar` — single-var reader with a fallback.
+ *   2. `readThemeTokens` — pulls every color the stylesheet uses, returning a
+ *      flat `Record<string, string>` keyed by short name (no `--color-`
+ *      prefix). Re-running this after a `data-theme` flip yields a fresh
+ *      palette.
+ */
+
+/**
+ * Read a single CSS variable from the document root and return its trimmed
+ * computed value, falling back to `fallback` when the document is missing
+ * (SSR) or the variable is unset.
+ */
+declare function resolveCssVar(name: string, fallback?: string): string;
+interface ThemeTokenPalette {
+    /** Surface backgrounds. */
+    bg: string;
+    panel: string;
+    panel2: string;
+    /** Hairline + emphasis border. */
+    border: string;
+    borderStrong: string;
+    /** Foreground tiers. */
+    text: string;
+    textMuted: string;
+    textDim: string;
+    /** Brand + status. */
+    accent: string;
+    ok: string;
+    warn: string;
+    err: string;
+    /** Extras the graph uses for entity-type ring colors. */
+    purple: string;
+    pink: string;
+}
+/** Read the canonical Ship-It color tokens from the document root. */
+declare function readThemeTokens(): ThemeTokenPalette;
+/**
+ * Resolve the concrete color for a registered entity type. Reads the type's
+ * `colorVar` (a `var(--color-…)` string) and looks the value up in the
+ * palette. Falls back to the palette's `accent` color when the var is
+ * malformed or unknown.
+ */
+declare function resolveEntityColor(type: EntityType, palette: ThemeTokenPalette): string;
+/**
+ * Map a `var(--color-foo)` reference or a raw color literal to a concrete
+ * color string, using the supplied palette. Unrecognized references fall back
+ * to `accent`.
+ */
+declare function resolveColorReference(value: string, palette: ThemeTokenPalette): string;
+
+/**
+ * Build a Cytoscape stylesheet from the live design tokens. The result is a
+ * plain JSON array suitable for `cytoscape({ style: ... })` — re-run after a
+ * `data-theme` change to pick up the new palette.
+ *
+ * The stylesheet is opinionated:
+ *   - Nodes are square-ish rounded glyphs colored by `data(entityType)`.
+ *   - Edges are token-colored thin lines with arrowheads.
+ *   - Selected / on-path / dimmed states are driven by class names that the
+ *     consumer toggles (`graph-canvas:selected`, `graph-canvas:path`,
+ *     `graph-canvas:dim`).
+ *
+ * Pass `palette` to override the token read — useful for SSR or tests.
+ */
+interface BuildStylesheetOptions {
+    /** Pre-resolved palette. When omitted, tokens are read from the document. */
+    palette?: ThemeTokenPalette;
+    /**
+     * Additional entries appended to the stylesheet — handy for app-specific
+     * selectors without forking the builder.
+     */
+    extra?: ReadonlyArray<cytoscape.StylesheetJsonBlock>;
+}
+type ShipItStylesheetBlock = cytoscape.StylesheetJsonBlock;
+declare function buildShipItStylesheet(options?: BuildStylesheetOptions): cytoscape.StylesheetJson;
+/**
+ * Convenience class names the stylesheet recognizes. Toggle these on Cytoscape
+ * nodes / edges to drive the on-path and dimmed visuals.
+ */
+declare const GRAPH_CANVAS_CLASS: {
+    readonly path: "graph-canvas:path";
+    readonly dim: "graph-canvas:dim";
+};
+
+/**
+ * useShipItStylesheet — keeps a Cytoscape instance's stylesheet in sync with
+ * the live design-token palette. Re-applies the stylesheet whenever
+ * `<html data-theme>` flips, so toggling between dark and light propagates to
+ * the graph without remounting.
+ *
+ * Returns a `refresh()` callback the consumer can invoke after any other
+ * theme-affecting change (e.g., a `--color-accent` hue knob update).
+ *
+ * ```ts
+ * const cyRef = useRef<cytoscape.Core | null>(null);
+ * const { refresh } = useShipItStylesheet(cyRef);
+ * ```
+ */
+interface UseShipItStylesheetOptions extends BuildStylesheetOptions {
+    /** Skip the MutationObserver wiring (e.g., when the host owns its own observer). */
+    observe?: boolean;
+}
+interface UseShipItStylesheetReturn {
+    /** Re-read tokens and re-apply the stylesheet. */
+    refresh: () => void;
+}
+declare function useShipItStylesheet(cyRef: {
+    current: cytoscape.Core | null;
+}, options?: UseShipItStylesheetOptions): UseShipItStylesheetReturn;
+
+/**
+ * GraphCanvas — high-level wrapper around a Cytoscape instance. Owns the
+ * `data-theme` ↔ stylesheet sync (via {@link useShipItStylesheet}), the
+ * cytoscape lifecycle (create / destroy on mount / unmount), and a thin
+ * selection API on top of Cytoscape's events.
+ *
+ * The component never bundles Cytoscape itself — pass the engine factory in
+ * via the `engine` prop so the consumer controls the Cytoscape version and
+ * any registered extensions:
+ *
+ * ```tsx
+ * import cytoscape from 'cytoscape';
+ *
+ * <GraphCanvas
+ *   engine={cytoscape}
+ *   elements={[...]}
+ *   layout={{ name: 'cose' }}
+ *   onSelect={(node) => setSelected(node.id())}
+ *   inspector={selected && <GraphInspector …/>}
+ * />
+ * ```
+ */
+type CytoscapeEngine = (options: cytoscape.CytoscapeOptions) => cytoscape.Core;
+interface GraphCanvasHandle {
+    /** Live Cytoscape instance. `null` until mount. */
+    cy: cytoscape.Core | null;
+    /** Re-read tokens and re-apply the stylesheet. */
+    refreshStyles: () => void;
+}
+interface GraphCanvasProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect' | 'children'> {
+    /** Cytoscape factory. Pass the imported `cytoscape` default export. */
+    engine: CytoscapeEngine;
+    /** Graph elements (nodes + edges). Passed straight through to Cytoscape. */
+    elements: cytoscape.ElementDefinition[];
+    /** Layout config. Defaults to a static `preset` layout (no auto-layout). */
+    layout?: cytoscape.LayoutOptions;
+    /** Fires when a node is tapped/selected. */
+    onSelect?: (node: cytoscape.NodeSingular) => void;
+    /** Fires when the selection is cleared (background tap). */
+    onClearSelection?: () => void;
+    /** Fires when the pointer enters a node. */
+    onNodeHover?: (node: cytoscape.NodeSingular) => void;
+    /** Fires when the pointer leaves a node. */
+    onNodeLeave?: () => void;
+    /** Slot rendered over the graph (e.g., a `<GraphInspector>`). Positioned top-right. */
+    inspector?: ReactNode;
+    /** Overrides for the stylesheet builder. */
+    styleOptions?: BuildStylesheetOptions;
+    /** Accessible label for the container. */
+    'aria-label'?: string;
+}
+declare const GraphCanvas: react.ForwardRefExoticComponent<GraphCanvasProps & react.RefAttributes<GraphCanvasHandle>>;
+
+export { type BuildStylesheetOptions, type CytoscapeEngine, GRAPH_CANVAS_CLASS, GraphCanvas, type GraphCanvasHandle, type GraphCanvasProps, type ShipItStylesheetBlock, type ThemeTokenPalette, type UseShipItStylesheetOptions, type UseShipItStylesheetReturn, buildShipItStylesheet, readThemeTokens, resolveColorReference, resolveCssVar, resolveEntityColor, useShipItStylesheet };

package/dist/index.d.ts

@@ -0,0 +1,177 @@
+import cytoscape from 'cytoscape';
+import { EntityType } from '@ship-it-ui/shipit';
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Token resolution helpers. The Ship-It design system stores colors as CSS
+ * custom properties on `<html>` (`--color-accent`, `--color-bg`, …). Cytoscape
+ * renders to a canvas / SVG layer outside Tailwind, so those vars never
+ * resolve — we read the *computed* values at runtime and feed them into the
+ * stylesheet builder as concrete color strings.
+ *
+ * Two layers:
+ *   1. `resolveCssVar` — single-var reader with a fallback.
+ *   2. `readThemeTokens` — pulls every color the stylesheet uses, returning a
+ *      flat `Record<string, string>` keyed by short name (no `--color-`
+ *      prefix). Re-running this after a `data-theme` flip yields a fresh
+ *      palette.
+ */
+
+/**
+ * Read a single CSS variable from the document root and return its trimmed
+ * computed value, falling back to `fallback` when the document is missing
+ * (SSR) or the variable is unset.
+ */
+declare function resolveCssVar(name: string, fallback?: string): string;
+interface ThemeTokenPalette {
+    /** Surface backgrounds. */
+    bg: string;
+    panel: string;
+    panel2: string;
+    /** Hairline + emphasis border. */
+    border: string;
+    borderStrong: string;
+    /** Foreground tiers. */
+    text: string;
+    textMuted: string;
+    textDim: string;
+    /** Brand + status. */
+    accent: string;
+    ok: string;
+    warn: string;
+    err: string;
+    /** Extras the graph uses for entity-type ring colors. */
+    purple: string;
+    pink: string;
+}
+/** Read the canonical Ship-It color tokens from the document root. */
+declare function readThemeTokens(): ThemeTokenPalette;
+/**
+ * Resolve the concrete color for a registered entity type. Reads the type's
+ * `colorVar` (a `var(--color-…)` string) and looks the value up in the
+ * palette. Falls back to the palette's `accent` color when the var is
+ * malformed or unknown.
+ */
+declare function resolveEntityColor(type: EntityType, palette: ThemeTokenPalette): string;
+/**
+ * Map a `var(--color-foo)` reference or a raw color literal to a concrete
+ * color string, using the supplied palette. Unrecognized references fall back
+ * to `accent`.
+ */
+declare function resolveColorReference(value: string, palette: ThemeTokenPalette): string;
+
+/**
+ * Build a Cytoscape stylesheet from the live design tokens. The result is a
+ * plain JSON array suitable for `cytoscape({ style: ... })` — re-run after a
+ * `data-theme` change to pick up the new palette.
+ *
+ * The stylesheet is opinionated:
+ *   - Nodes are square-ish rounded glyphs colored by `data(entityType)`.
+ *   - Edges are token-colored thin lines with arrowheads.
+ *   - Selected / on-path / dimmed states are driven by class names that the
+ *     consumer toggles (`graph-canvas:selected`, `graph-canvas:path`,
+ *     `graph-canvas:dim`).
+ *
+ * Pass `palette` to override the token read — useful for SSR or tests.
+ */
+interface BuildStylesheetOptions {
+    /** Pre-resolved palette. When omitted, tokens are read from the document. */
+    palette?: ThemeTokenPalette;
+    /**
+     * Additional entries appended to the stylesheet — handy for app-specific
+     * selectors without forking the builder.
+     */
+    extra?: ReadonlyArray<cytoscape.StylesheetJsonBlock>;
+}
+type ShipItStylesheetBlock = cytoscape.StylesheetJsonBlock;
+declare function buildShipItStylesheet(options?: BuildStylesheetOptions): cytoscape.StylesheetJson;
+/**
+ * Convenience class names the stylesheet recognizes. Toggle these on Cytoscape
+ * nodes / edges to drive the on-path and dimmed visuals.
+ */
+declare const GRAPH_CANVAS_CLASS: {
+    readonly path: "graph-canvas:path";
+    readonly dim: "graph-canvas:dim";
+};
+
+/**
+ * useShipItStylesheet — keeps a Cytoscape instance's stylesheet in sync with
+ * the live design-token palette. Re-applies the stylesheet whenever
+ * `<html data-theme>` flips, so toggling between dark and light propagates to
+ * the graph without remounting.
+ *
+ * Returns a `refresh()` callback the consumer can invoke after any other
+ * theme-affecting change (e.g., a `--color-accent` hue knob update).
+ *
+ * ```ts
+ * const cyRef = useRef<cytoscape.Core | null>(null);
+ * const { refresh } = useShipItStylesheet(cyRef);
+ * ```
+ */
+interface UseShipItStylesheetOptions extends BuildStylesheetOptions {
+    /** Skip the MutationObserver wiring (e.g., when the host owns its own observer). */
+    observe?: boolean;
+}
+interface UseShipItStylesheetReturn {
+    /** Re-read tokens and re-apply the stylesheet. */
+    refresh: () => void;
+}
+declare function useShipItStylesheet(cyRef: {
+    current: cytoscape.Core | null;
+}, options?: UseShipItStylesheetOptions): UseShipItStylesheetReturn;
+
+/**
+ * GraphCanvas — high-level wrapper around a Cytoscape instance. Owns the
+ * `data-theme` ↔ stylesheet sync (via {@link useShipItStylesheet}), the
+ * cytoscape lifecycle (create / destroy on mount / unmount), and a thin
+ * selection API on top of Cytoscape's events.
+ *
+ * The component never bundles Cytoscape itself — pass the engine factory in
+ * via the `engine` prop so the consumer controls the Cytoscape version and
+ * any registered extensions:
+ *
+ * ```tsx
+ * import cytoscape from 'cytoscape';
+ *
+ * <GraphCanvas
+ *   engine={cytoscape}
+ *   elements={[...]}
+ *   layout={{ name: 'cose' }}
+ *   onSelect={(node) => setSelected(node.id())}
+ *   inspector={selected && <GraphInspector …/>}
+ * />
+ * ```
+ */
+type CytoscapeEngine = (options: cytoscape.CytoscapeOptions) => cytoscape.Core;
+interface GraphCanvasHandle {
+    /** Live Cytoscape instance. `null` until mount. */
+    cy: cytoscape.Core | null;
+    /** Re-read tokens and re-apply the stylesheet. */
+    refreshStyles: () => void;
+}
+interface GraphCanvasProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect' | 'children'> {
+    /** Cytoscape factory. Pass the imported `cytoscape` default export. */
+    engine: CytoscapeEngine;
+    /** Graph elements (nodes + edges). Passed straight through to Cytoscape. */
+    elements: cytoscape.ElementDefinition[];
+    /** Layout config. Defaults to a static `preset` layout (no auto-layout). */
+    layout?: cytoscape.LayoutOptions;
+    /** Fires when a node is tapped/selected. */
+    onSelect?: (node: cytoscape.NodeSingular) => void;
+    /** Fires when the selection is cleared (background tap). */
+    onClearSelection?: () => void;
+    /** Fires when the pointer enters a node. */
+    onNodeHover?: (node: cytoscape.NodeSingular) => void;
+    /** Fires when the pointer leaves a node. */
+    onNodeLeave?: () => void;
+    /** Slot rendered over the graph (e.g., a `<GraphInspector>`). Positioned top-right. */
+    inspector?: ReactNode;
+    /** Overrides for the stylesheet builder. */
+    styleOptions?: BuildStylesheetOptions;
+    /** Accessible label for the container. */
+    'aria-label'?: string;
+}
+declare const GraphCanvas: react.ForwardRefExoticComponent<GraphCanvasProps & react.RefAttributes<GraphCanvasHandle>>;
+
+export { type BuildStylesheetOptions, type CytoscapeEngine, GRAPH_CANVAS_CLASS, GraphCanvas, type GraphCanvasHandle, type GraphCanvasProps, type ShipItStylesheetBlock, type ThemeTokenPalette, type UseShipItStylesheetOptions, type UseShipItStylesheetReturn, buildShipItStylesheet, readThemeTokens, resolveColorReference, resolveCssVar, resolveEntityColor, useShipItStylesheet };

package/dist/index.js

@@ -0,0 +1,333 @@
+'use client';
+
+// src/stylesheet.ts
+import { listEntityTypes } from "@ship-it-ui/shipit";
+
+// src/theme-tokens.ts
+import { getEntityTypeMeta } from "@ship-it-ui/shipit";
+var DEFAULT_FALLBACK = {
+  bg: "#0a0a0a",
+  panel: "#0f0f0f",
+  "panel-2": "#161616",
+  border: "#262626",
+  "border-strong": "#383838",
+  text: "#fafafa",
+  "text-muted": "#a3a3a3",
+  "text-dim": "#737373",
+  accent: "#3b82f6",
+  ok: "#10b981",
+  warn: "#f59e0b",
+  err: "#ef4444",
+  purple: "#a855f7",
+  pink: "#ec4899"
+};
+function resolveCssVar(name, fallback = "") {
+  if (typeof document === "undefined") return fallback;
+  const raw = getComputedStyle(document.documentElement).getPropertyValue(name);
+  const trimmed = raw.trim();
+  return trimmed.length > 0 ? trimmed : fallback;
+}
+function readThemeTokens() {
+  return {
+    bg: resolveCssVar("--color-bg", DEFAULT_FALLBACK.bg),
+    panel: resolveCssVar("--color-panel", DEFAULT_FALLBACK.panel),
+    panel2: resolveCssVar("--color-panel-2", DEFAULT_FALLBACK["panel-2"]),
+    border: resolveCssVar("--color-border", DEFAULT_FALLBACK.border),
+    borderStrong: resolveCssVar("--color-border-strong", DEFAULT_FALLBACK["border-strong"]),
+    text: resolveCssVar("--color-text", DEFAULT_FALLBACK.text),
+    textMuted: resolveCssVar("--color-text-muted", DEFAULT_FALLBACK["text-muted"]),
+    textDim: resolveCssVar("--color-text-dim", DEFAULT_FALLBACK["text-dim"]),
+    accent: resolveCssVar("--color-accent", DEFAULT_FALLBACK.accent),
+    ok: resolveCssVar("--color-ok", DEFAULT_FALLBACK.ok),
+    warn: resolveCssVar("--color-warn", DEFAULT_FALLBACK.warn),
+    err: resolveCssVar("--color-err", DEFAULT_FALLBACK.err),
+    purple: resolveCssVar("--color-purple", DEFAULT_FALLBACK.purple),
+    pink: resolveCssVar("--color-pink", DEFAULT_FALLBACK.pink)
+  };
+}
+function resolveEntityColor(type, palette) {
+  const meta = getEntityTypeMeta(type);
+  return resolveColorReference(meta.colorVar, palette);
+}
+function parseColorVarName(value) {
+  let i = 0;
+  while (i < value.length && isWhitespace(value.charCodeAt(i))) i++;
+  if (!value.startsWith("var(", i)) return void 0;
+  i += 4;
+  while (i < value.length && isWhitespace(value.charCodeAt(i))) i++;
+  if (!value.startsWith("--color-", i)) return void 0;
+  i += 8;
+  const start = i;
+  while (i < value.length) {
+    const c = value.charCodeAt(i);
+    if (c === CC_COMMA || c === CC_PAREN_CLOSE || isWhitespace(c)) break;
+    i++;
+  }
+  if (i === start) return void 0;
+  const close = value.indexOf(")", i);
+  if (close === -1) return void 0;
+  return value.slice(start, i);
+}
+var CC_COMMA = 44;
+var CC_PAREN_CLOSE = 41;
+function isWhitespace(cc) {
+  return cc === 32 || cc === 9 || cc === 10 || cc === 13 || cc === 12 || cc === 11;
+}
+function resolveColorReference(value, palette) {
+  const key = parseColorVarName(value);
+  if (key === void 0) return value;
+  switch (key) {
+    case "bg":
+      return palette.bg;
+    case "panel":
+      return palette.panel;
+    case "panel-2":
+      return palette.panel2;
+    case "border":
+      return palette.border;
+    case "border-strong":
+      return palette.borderStrong;
+    case "text":
+      return palette.text;
+    case "text-muted":
+      return palette.textMuted;
+    case "text-dim":
+      return palette.textDim;
+    case "accent":
+      return palette.accent;
+    case "ok":
+      return palette.ok;
+    case "warn":
+      return palette.warn;
+    case "err":
+      return palette.err;
+    case "purple":
+      return palette.purple;
+    case "pink":
+      return palette.pink;
+    default:
+      return palette.accent;
+  }
+}
+
+// src/stylesheet.ts
+function buildShipItStylesheet(options = {}) {
+  const palette = options.palette ?? readThemeTokens();
+  const color = (cssVar) => resolveColorReference(cssVar, palette);
+  const base = [
+    {
+      selector: "node",
+      style: {
+        "background-color": palette.panel,
+        "border-width": 1.5,
+        "border-color": palette.accent,
+        "border-opacity": 1,
+        label: "data(label)",
+        color: palette.textMuted,
+        "font-family": "var(--font-mono, monospace)",
+        "font-size": 10,
+        "text-valign": "bottom",
+        "text-halign": "center",
+        "text-margin-y": 6,
+        width: 36,
+        height: 36,
+        shape: "round-rectangle"
+      }
+    },
+    // One selector per entity type registered with @ship-it-ui/shipit. Built-in
+    // types are seeded automatically; custom types registered via
+    // `registerEntityType(...)` pick up their `colorVar` here without a docs
+    // patch or a forked stylesheet.
+    ...listEntityTypes().map(([type, meta]) => ({
+      selector: `node[entityType = "${escapeCytoscapeAttr(type)}"]`,
+      style: { "border-color": color(meta.colorVar) }
+    })),
+    {
+      selector: "node:selected",
+      style: {
+        "border-width": 3,
+        "overlay-color": palette.accent,
+        "overlay-opacity": 0.15,
+        "overlay-padding": 4
+      }
+    },
+    {
+      selector: "node.graph-canvas\\:path",
+      style: { "border-color": palette.purple }
+    },
+    {
+      selector: "node.graph-canvas\\:dim",
+      style: { opacity: 0.35 }
+    },
+    {
+      selector: "edge",
+      style: {
+        width: 1,
+        "line-color": palette.border,
+        "target-arrow-color": palette.border,
+        "target-arrow-shape": "triangle",
+        "arrow-scale": 0.8,
+        "curve-style": "bezier"
+      }
+    },
+    {
+      selector: "edge.graph-canvas\\:path",
+      style: {
+        "line-color": palette.purple,
+        "target-arrow-color": palette.purple,
+        width: 1.5
+      }
+    },
+    {
+      selector: "edge.graph-canvas\\:dim",
+      style: { opacity: 0.25 }
+    }
+  ];
+  return [...base, ...options.extra ?? []];
+}
+var GRAPH_CANVAS_CLASS = {
+  path: "graph-canvas:path",
+  dim: "graph-canvas:dim"
+};
+function escapeCytoscapeAttr(value) {
+  return value.replace(/[\\"]/g, (c) => `\\${c}`);
+}
+
+// src/useShipItStylesheet.ts
+import { useCallback, useEffect, useMemo } from "react";
+function useShipItStylesheet(cyRef, options = {}) {
+  const { observe = true, palette, extra } = options;
+  const buildOptions = useMemo(
+    () => ({ palette, extra }),
+    [palette, extra]
+  );
+  const apply = useCallback(() => {
+    const cy = cyRef.current;
+    if (!cy) return;
+    cy.style(buildShipItStylesheet(buildOptions)).update();
+  }, [cyRef, buildOptions]);
+  useEffect(() => {
+    apply();
+    if (!observe || typeof document === "undefined") return void 0;
+    const observer = new MutationObserver(apply);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme"]
+    });
+    return () => observer.disconnect();
+  }, [apply, observe]);
+  return { refresh: apply };
+}
+
+// src/GraphCanvas.tsx
+import {
+  forwardRef,
+  useEffect as useEffect2,
+  useImperativeHandle,
+  useRef
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_LAYOUT = { name: "preset" };
+var GraphCanvas = forwardRef(function GraphCanvas2({
+  engine,
+  elements,
+  layout = DEFAULT_LAYOUT,
+  onSelect,
+  onClearSelection,
+  onNodeHover,
+  onNodeLeave,
+  inspector,
+  styleOptions,
+  className,
+  "aria-label": ariaLabel = "Graph canvas",
+  ...props
+}, forwardedRef) {
+  const containerRef = useRef(null);
+  const cyRef = useRef(null);
+  useEffect2(() => {
+    if (!containerRef.current) return void 0;
+    const cy = engine({
+      container: containerRef.current,
+      elements,
+      layout,
+      style: buildShipItStylesheet(styleOptions)
+    });
+    cyRef.current = cy;
+    return () => {
+      cy.destroy();
+      cyRef.current = null;
+    };
+  }, [engine]);
+  useEffect2(() => {
+    const cy = cyRef.current;
+    if (!cy) return;
+    cy.json({ elements });
+  }, [elements]);
+  useEffect2(() => {
+    const cy = cyRef.current;
+    if (!cy) return;
+    cy.layout(layout).run();
+  }, [layout]);
+  const { refresh: refreshStyles } = useShipItStylesheet(cyRef, styleOptions);
+  useEffect2(() => {
+    const cy = cyRef.current;
+    if (!cy) return void 0;
+    const handleSelect = (event) => {
+      if (event.target?.isNode?.()) {
+        onSelect?.(event.target);
+      }
+    };
+    const handleBackgroundTap = (event) => {
+      if (event.target === cy) onClearSelection?.();
+    };
+    const handleEnter = (event) => {
+      onNodeHover?.(event.target);
+    };
+    const handleLeave = () => onNodeLeave?.();
+    cy.on("tap", "node", handleSelect);
+    cy.on("tap", handleBackgroundTap);
+    cy.on("mouseover", "node", handleEnter);
+    cy.on("mouseout", "node", handleLeave);
+    return () => {
+      cy.off("tap", "node", handleSelect);
+      cy.off("tap", handleBackgroundTap);
+      cy.off("mouseover", "node", handleEnter);
+      cy.off("mouseout", "node", handleLeave);
+    };
+  }, [engine, onSelect, onClearSelection, onNodeHover, onNodeLeave]);
+  useImperativeHandle(
+    forwardedRef,
+    () => ({
+      get cy() {
+        return cyRef.current;
+      },
+      refreshStyles
+    }),
+    [refreshStyles]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "region",
+      "aria-label": ariaLabel,
+      className: ["relative h-full w-full", className].filter(Boolean).join(" "),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { ref: containerRef, className: "absolute inset-0" }),
+        inspector && /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 z-10", children: inspector })
+      ]
+    }
+  );
+});
+GraphCanvas.displayName = "GraphCanvas";
+export {
+  GRAPH_CANVAS_CLASS,
+  GraphCanvas,
+  buildShipItStylesheet,
+  readThemeTokens,
+  resolveColorReference,
+  resolveCssVar,
+  resolveEntityColor,
+  useShipItStylesheet
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/stylesheet.ts","../src/theme-tokens.ts","../src/useShipItStylesheet.ts","../src/GraphCanvas.tsx"],"sourcesContent":["import { listEntityTypes } from '@ship-it-ui/shipit';\nimport type cytoscape from 'cytoscape';\n\nimport { readThemeTokens, resolveColorReference, type ThemeTokenPalette } from './theme-tokens';\n\n/**\n * Build a Cytoscape stylesheet from the live design tokens. The result is a\n * plain JSON array suitable for `cytoscape({ style: ... })` — re-run after a\n * `data-theme` change to pick up the new palette.\n *\n * The stylesheet is opinionated:\n *   - Nodes are square-ish rounded glyphs colored by `data(entityType)`.\n *   - Edges are token-colored thin lines with arrowheads.\n *   - Selected / on-path / dimmed states are driven by class names that the\n *     consumer toggles (`graph-canvas:selected`, `graph-canvas:path`,\n *     `graph-canvas:dim`).\n *\n * Pass `palette` to override the token read — useful for SSR or tests.\n */\n\nexport interface BuildStylesheetOptions {\n  /** Pre-resolved palette. When omitted, tokens are read from the document. */\n  palette?: ThemeTokenPalette;\n  /**\n   * Additional entries appended to the stylesheet — handy for app-specific\n   * selectors without forking the builder.\n   */\n  extra?: ReadonlyArray<cytoscape.StylesheetJsonBlock>;\n}\n\n// Re-export the block type so consumers can declare typed `extra` entries.\nexport type ShipItStylesheetBlock = cytoscape.StylesheetJsonBlock;\n\nexport function buildShipItStylesheet(\n  options: BuildStylesheetOptions = {},\n): cytoscape.StylesheetJson {\n  const palette = options.palette ?? readThemeTokens();\n  const color = (cssVar: string) => resolveColorReference(cssVar, palette);\n\n  const base: cytoscape.StylesheetJsonBlock[] = [\n    {\n      selector: 'node',\n      style: {\n        'background-color': palette.panel,\n        'border-width': 1.5,\n        'border-color': palette.accent,\n        'border-opacity': 1,\n        label: 'data(label)',\n        color: palette.textMuted,\n        'font-family': 'var(--font-mono, monospace)',\n        'font-size': 10,\n        'text-valign': 'bottom',\n        'text-halign': 'center',\n        'text-margin-y': 6,\n        width: 36,\n        height: 36,\n        shape: 'round-rectangle',\n      },\n    },\n    // One selector per entity type registered with @ship-it-ui/shipit. Built-in\n    // types are seeded automatically; custom types registered via\n    // `registerEntityType(...)` pick up their `colorVar` here without a docs\n    // patch or a forked stylesheet.\n    ...listEntityTypes().map<cytoscape.StylesheetJsonBlock>(([type, meta]) => ({\n      selector: `node[entityType = \"${escapeCytoscapeAttr(type)}\"]`,\n      style: { 'border-color': color(meta.colorVar) },\n    })),\n    {\n      selector: 'node:selected',\n      style: {\n        'border-width': 3,\n        'overlay-color': palette.accent,\n        'overlay-opacity': 0.15,\n        'overlay-padding': 4,\n      },\n    },\n    {\n      selector: 'node.graph-canvas\\\\:path',\n      style: { 'border-color': palette.purple },\n    },\n    {\n      selector: 'node.graph-canvas\\\\:dim',\n      style: { opacity: 0.35 },\n    },\n    {\n      selector: 'edge',\n      style: {\n        width: 1,\n        'line-color': palette.border,\n        'target-arrow-color': palette.border,\n        'target-arrow-shape': 'triangle',\n        'arrow-scale': 0.8,\n        'curve-style': 'bezier',\n      },\n    },\n    {\n      selector: 'edge.graph-canvas\\\\:path',\n      style: {\n        'line-color': palette.purple,\n        'target-arrow-color': palette.purple,\n        width: 1.5,\n      },\n    },\n    {\n      selector: 'edge.graph-canvas\\\\:dim',\n      style: { opacity: 0.25 },\n    },\n  ];\n\n  return [...base, ...(options.extra ?? [])] as cytoscape.StylesheetJson;\n}\n\n/**\n * Convenience class names the stylesheet recognizes. Toggle these on Cytoscape\n * nodes / edges to drive the on-path and dimmed visuals.\n */\nexport const GRAPH_CANVAS_CLASS = {\n  path: 'graph-canvas:path',\n  dim: 'graph-canvas:dim',\n} as const;\n\n// Cytoscape's attribute selector accepts a double-quoted string. Escape\n// embedded backslashes and double quotes so a malformed (or hostile)\n// registered key can't break out of the selector. The grammar\n// (https://js.cytoscape.org/#selectors/data) is more permissive than CSS, but\n// these two characters are the only ones that would change selector semantics.\nfunction escapeCytoscapeAttr(value: string): string {\n  return value.replace(/[\\\\\"]/g, (c) => `\\\\${c}`);\n}\n","/**\n * Token resolution helpers. The Ship-It design system stores colors as CSS\n * custom properties on `<html>` (`--color-accent`, `--color-bg`, …). Cytoscape\n * renders to a canvas / SVG layer outside Tailwind, so those vars never\n * resolve — we read the *computed* values at runtime and feed them into the\n * stylesheet builder as concrete color strings.\n *\n * Two layers:\n *   1. `resolveCssVar` — single-var reader with a fallback.\n *   2. `readThemeTokens` — pulls every color the stylesheet uses, returning a\n *      flat `Record<string, string>` keyed by short name (no `--color-`\n *      prefix). Re-running this after a `data-theme` flip yields a fresh\n *      palette.\n */\n\nimport { getEntityTypeMeta, type EntityType } from '@ship-it-ui/shipit';\n\nconst DEFAULT_FALLBACK: Record<string, string> = {\n  bg: '#0a0a0a',\n  panel: '#0f0f0f',\n  'panel-2': '#161616',\n  border: '#262626',\n  'border-strong': '#383838',\n  text: '#fafafa',\n  'text-muted': '#a3a3a3',\n  'text-dim': '#737373',\n  accent: '#3b82f6',\n  ok: '#10b981',\n  warn: '#f59e0b',\n  err: '#ef4444',\n  purple: '#a855f7',\n  pink: '#ec4899',\n};\n\n/**\n * Read a single CSS variable from the document root and return its trimmed\n * computed value, falling back to `fallback` when the document is missing\n * (SSR) or the variable is unset.\n */\nexport function resolveCssVar(name: string, fallback = ''): string {\n  if (typeof document === 'undefined') return fallback;\n  const raw = getComputedStyle(document.documentElement).getPropertyValue(name);\n  const trimmed = raw.trim();\n  return trimmed.length > 0 ? trimmed : fallback;\n}\n\nexport interface ThemeTokenPalette {\n  /** Surface backgrounds. */\n  bg: string;\n  panel: string;\n  panel2: string;\n  /** Hairline + emphasis border. */\n  border: string;\n  borderStrong: string;\n  /** Foreground tiers. */\n  text: string;\n  textMuted: string;\n  textDim: string;\n  /** Brand + status. */\n  accent: string;\n  ok: string;\n  warn: string;\n  err: string;\n  /** Extras the graph uses for entity-type ring colors. */\n  purple: string;\n  pink: string;\n}\n\n/** Read the canonical Ship-It color tokens from the document root. */\nexport function readThemeTokens(): ThemeTokenPalette {\n  return {\n    bg: resolveCssVar('--color-bg', DEFAULT_FALLBACK.bg),\n    panel: resolveCssVar('--color-panel', DEFAULT_FALLBACK.panel),\n    panel2: resolveCssVar('--color-panel-2', DEFAULT_FALLBACK['panel-2']),\n    border: resolveCssVar('--color-border', DEFAULT_FALLBACK.border),\n    borderStrong: resolveCssVar('--color-border-strong', DEFAULT_FALLBACK['border-strong']),\n    text: resolveCssVar('--color-text', DEFAULT_FALLBACK.text),\n    textMuted: resolveCssVar('--color-text-muted', DEFAULT_FALLBACK['text-muted']),\n    textDim: resolveCssVar('--color-text-dim', DEFAULT_FALLBACK['text-dim']),\n    accent: resolveCssVar('--color-accent', DEFAULT_FALLBACK.accent),\n    ok: resolveCssVar('--color-ok', DEFAULT_FALLBACK.ok),\n    warn: resolveCssVar('--color-warn', DEFAULT_FALLBACK.warn),\n    err: resolveCssVar('--color-err', DEFAULT_FALLBACK.err),\n    purple: resolveCssVar('--color-purple', DEFAULT_FALLBACK.purple),\n    pink: resolveCssVar('--color-pink', DEFAULT_FALLBACK.pink),\n  };\n}\n\n/**\n * Resolve the concrete color for a registered entity type. Reads the type's\n * `colorVar` (a `var(--color-…)` string) and looks the value up in the\n * palette. Falls back to the palette's `accent` color when the var is\n * malformed or unknown.\n */\nexport function resolveEntityColor(type: EntityType, palette: ThemeTokenPalette): string {\n  const meta = getEntityTypeMeta(type);\n  return resolveColorReference(meta.colorVar, palette);\n}\n\n/**\n * Extract `foo` from `var(--color-foo)` or `var(--color-foo, fallback)`.\n * Returns `undefined` if the input doesn't match. O(n), no backtracking.\n */\nfunction parseColorVarName(value: string): string | undefined {\n  // Strip surrounding whitespace once. `String#trim` is linear, not a regex.\n  let i = 0;\n  while (i < value.length && isWhitespace(value.charCodeAt(i))) i++;\n  if (!value.startsWith('var(', i)) return undefined;\n  i += 4;\n  // Skip whitespace inside the parens.\n  while (i < value.length && isWhitespace(value.charCodeAt(i))) i++;\n  if (!value.startsWith('--color-', i)) return undefined;\n  i += 8;\n  // Read the name: stop at the first whitespace, comma, or `)`.\n  const start = i;\n  while (i < value.length) {\n    const c = value.charCodeAt(i);\n    if (c === CC_COMMA || c === CC_PAREN_CLOSE || isWhitespace(c)) break;\n    i++;\n  }\n  if (i === start) return undefined;\n  // Require a closing `)` somewhere after, so we don't classify malformed\n  // inputs (`var(--color-foo`) as valid references.\n  const close = value.indexOf(')', i);\n  if (close === -1) return undefined;\n  return value.slice(start, i);\n}\n\nconst CC_COMMA = 0x2c;\nconst CC_PAREN_CLOSE = 0x29;\n\nfunction isWhitespace(cc: number): boolean {\n  // ASCII whitespace: space, tab, LF, CR, FF, VT.\n  return cc === 0x20 || cc === 0x09 || cc === 0x0a || cc === 0x0d || cc === 0x0c || cc === 0x0b;\n}\n\n/**\n * Map a `var(--color-foo)` reference or a raw color literal to a concrete\n * color string, using the supplied palette. Unrecognized references fall back\n * to `accent`.\n */\nexport function resolveColorReference(value: string, palette: ThemeTokenPalette): string {\n  // Deterministic parser instead of a regex — regex variants with overlapping\n  // quantifiers around the color name produced quadratic backtracking on\n  // adversarial inputs (CodeQL js/polynomial-redos).\n  const key = parseColorVarName(value);\n  if (key === undefined) return value;\n  switch (key) {\n    case 'bg':\n      return palette.bg;\n    case 'panel':\n      return palette.panel;\n    case 'panel-2':\n      return palette.panel2;\n    case 'border':\n      return palette.border;\n    case 'border-strong':\n      return palette.borderStrong;\n    case 'text':\n      return palette.text;\n    case 'text-muted':\n      return palette.textMuted;\n    case 'text-dim':\n      return palette.textDim;\n    case 'accent':\n      return palette.accent;\n    case 'ok':\n      return palette.ok;\n    case 'warn':\n      return palette.warn;\n    case 'err':\n      return palette.err;\n    case 'purple':\n      return palette.purple;\n    case 'pink':\n      return palette.pink;\n    default:\n      return palette.accent;\n  }\n}\n","'use client';\n\nimport type cytoscape from 'cytoscape';\nimport { useCallback, useEffect, useMemo } from 'react';\n\nimport { buildShipItStylesheet, type BuildStylesheetOptions } from './stylesheet';\n\n/**\n * useShipItStylesheet — keeps a Cytoscape instance's stylesheet in sync with\n * the live design-token palette. Re-applies the stylesheet whenever\n * `<html data-theme>` flips, so toggling between dark and light propagates to\n * the graph without remounting.\n *\n * Returns a `refresh()` callback the consumer can invoke after any other\n * theme-affecting change (e.g., a `--color-accent` hue knob update).\n *\n * ```ts\n * const cyRef = useRef<cytoscape.Core | null>(null);\n * const { refresh } = useShipItStylesheet(cyRef);\n * ```\n */\n\nexport interface UseShipItStylesheetOptions extends BuildStylesheetOptions {\n  /** Skip the MutationObserver wiring (e.g., when the host owns its own observer). */\n  observe?: boolean;\n}\n\nexport interface UseShipItStylesheetReturn {\n  /** Re-read tokens and re-apply the stylesheet. */\n  refresh: () => void;\n}\n\nexport function useShipItStylesheet(\n  cyRef: { current: cytoscape.Core | null },\n  options: UseShipItStylesheetOptions = {},\n): UseShipItStylesheetReturn {\n  const { observe = true, palette, extra } = options;\n  // Memoize the build options against their flat constituents so callers that\n  // pass `options` inline (a fresh object each render) don't churn `apply` /\n  // disconnect+reconnect the MutationObserver on every render.\n  const buildOptions = useMemo<BuildStylesheetOptions>(\n    () => ({ palette, extra }),\n    [palette, extra],\n  );\n\n  const apply = useCallback(() => {\n    const cy = cyRef.current;\n    if (!cy) return;\n    cy.style(buildShipItStylesheet(buildOptions)).update();\n  }, [cyRef, buildOptions]);\n\n  useEffect(() => {\n    apply();\n    if (!observe || typeof document === 'undefined') return undefined;\n    const observer = new MutationObserver(apply);\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['data-theme'],\n    });\n    return () => observer.disconnect();\n  }, [apply, observe]);\n\n  return { refresh: apply };\n}\n","'use client';\n\nimport type cytoscape from 'cytoscape';\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\n\nimport { buildShipItStylesheet, type BuildStylesheetOptions } from './stylesheet';\nimport { useShipItStylesheet } from './useShipItStylesheet';\n\n/**\n * GraphCanvas — high-level wrapper around a Cytoscape instance. Owns the\n * `data-theme` ↔ stylesheet sync (via {@link useShipItStylesheet}), the\n * cytoscape lifecycle (create / destroy on mount / unmount), and a thin\n * selection API on top of Cytoscape's events.\n *\n * The component never bundles Cytoscape itself — pass the engine factory in\n * via the `engine` prop so the consumer controls the Cytoscape version and\n * any registered extensions:\n *\n * ```tsx\n * import cytoscape from 'cytoscape';\n *\n * <GraphCanvas\n *   engine={cytoscape}\n *   elements={[...]}\n *   layout={{ name: 'cose' }}\n *   onSelect={(node) => setSelected(node.id())}\n *   inspector={selected && <GraphInspector …/>}\n * />\n * ```\n */\n\nexport type CytoscapeEngine = (options: cytoscape.CytoscapeOptions) => cytoscape.Core;\n\nexport interface GraphCanvasHandle {\n  /** Live Cytoscape instance. `null` until mount. */\n  cy: cytoscape.Core | null;\n  /** Re-read tokens and re-apply the stylesheet. */\n  refreshStyles: () => void;\n}\n\nexport interface GraphCanvasProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onSelect' | 'children'\n> {\n  /** Cytoscape factory. Pass the imported `cytoscape` default export. */\n  engine: CytoscapeEngine;\n  /** Graph elements (nodes + edges). Passed straight through to Cytoscape. */\n  elements: cytoscape.ElementDefinition[];\n  /** Layout config. Defaults to a static `preset` layout (no auto-layout). */\n  layout?: cytoscape.LayoutOptions;\n  /** Fires when a node is tapped/selected. */\n  onSelect?: (node: cytoscape.NodeSingular) => void;\n  /** Fires when the selection is cleared (background tap). */\n  onClearSelection?: () => void;\n  /** Fires when the pointer enters a node. */\n  onNodeHover?: (node: cytoscape.NodeSingular) => void;\n  /** Fires when the pointer leaves a node. */\n  onNodeLeave?: () => void;\n  /** Slot rendered over the graph (e.g., a `<GraphInspector>`). Positioned top-right. */\n  inspector?: ReactNode;\n  /** Overrides for the stylesheet builder. */\n  styleOptions?: BuildStylesheetOptions;\n  /** Accessible label for the container. */\n  'aria-label'?: string;\n}\n\nconst DEFAULT_LAYOUT: cytoscape.LayoutOptions = { name: 'preset' };\n\nexport const GraphCanvas = forwardRef<GraphCanvasHandle, GraphCanvasProps>(function GraphCanvas(\n  {\n    engine,\n    elements,\n    layout = DEFAULT_LAYOUT,\n    onSelect,\n    onClearSelection,\n    onNodeHover,\n    onNodeLeave,\n    inspector,\n    styleOptions,\n    className,\n    'aria-label': ariaLabel = 'Graph canvas',\n    ...props\n  },\n  forwardedRef,\n) {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const cyRef = useRef<cytoscape.Core | null>(null);\n\n  // Create the cytoscape instance once on mount.\n  useEffect(() => {\n    if (!containerRef.current) return undefined;\n    const cy = engine({\n      container: containerRef.current,\n      elements,\n      layout,\n      style: buildShipItStylesheet(styleOptions),\n    });\n    cyRef.current = cy;\n    return () => {\n      cy.destroy();\n      cyRef.current = null;\n    };\n    // We intentionally re-create on engine swap or container remount only.\n    // Elements / layout / style updates are handled in the effects below.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [engine]);\n\n  // Keep elements in sync.\n  useEffect(() => {\n    const cy = cyRef.current;\n    if (!cy) return;\n    cy.json({ elements });\n  }, [elements]);\n\n  // Re-run layout when the layout config changes.\n  useEffect(() => {\n    const cy = cyRef.current;\n    if (!cy) return;\n    cy.layout(layout).run();\n  }, [layout]);\n\n  const { refresh: refreshStyles } = useShipItStylesheet(cyRef, styleOptions);\n\n  // Wire selection events. `engine` is in the deps so the listeners re-bind\n  // whenever the upstream effect destroys + recreates the Cytoscape instance —\n  // without it, an `engine` swap would leave the new `cy` without handlers.\n  useEffect(() => {\n    const cy = cyRef.current;\n    if (!cy) return undefined;\n    const handleSelect = (event: cytoscape.EventObject) => {\n      if (event.target?.isNode?.()) {\n        onSelect?.(event.target as cytoscape.NodeSingular);\n      }\n    };\n    const handleBackgroundTap = (event: cytoscape.EventObject) => {\n      if (event.target === cy) onClearSelection?.();\n    };\n    const handleEnter = (event: cytoscape.EventObject) => {\n      onNodeHover?.(event.target as cytoscape.NodeSingular);\n    };\n    const handleLeave = () => onNodeLeave?.();\n    cy.on('tap', 'node', handleSelect);\n    cy.on('tap', handleBackgroundTap);\n    cy.on('mouseover', 'node', handleEnter);\n    cy.on('mouseout', 'node', handleLeave);\n    return () => {\n      cy.off('tap', 'node', handleSelect);\n      cy.off('tap', handleBackgroundTap);\n      cy.off('mouseover', 'node', handleEnter);\n      cy.off('mouseout', 'node', handleLeave);\n    };\n  }, [engine, onSelect, onClearSelection, onNodeHover, onNodeLeave]);\n\n  // Expose the imperative handle via getters so consumers always read the live\n  // `cyRef.current`. Snapshotting `cyRef.current` here would freeze it at\n  // `null` because the instance is assigned inside an effect that runs *after*\n  // the initial render — Copilot/Claude both flagged this.\n  useImperativeHandle(\n    forwardedRef,\n    (): GraphCanvasHandle => ({\n      get cy() {\n        return cyRef.current;\n      },\n      refreshStyles,\n    }),\n    [refreshStyles],\n  );\n\n  return (\n    <div\n      role=\"region\"\n      aria-label={ariaLabel}\n      className={['relative h-full w-full', className].filter(Boolean).join(' ')}\n      {...props}\n    >\n      <div ref={containerRef} className=\"absolute inset-0\" />\n      {inspector && <div className=\"absolute top-4 right-4 z-10\">{inspector}</div>}\n    </div>\n  );\n});\n\nGraphCanvas.displayName = 'GraphCanvas';\n"],"mappings":"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","names":["useEffect","GraphCanvas","useEffect"]}

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@ship-it-ui/cytoscape",
+  "version": "0.0.2",
+  "description": "Cytoscape adapter for the Ship-It design system. Token-driven stylesheet, theme-aware re-resolver hook, and a `<GraphCanvas>` wrapper that owns the data-theme ↔ stylesheet ↔ inspector dance.",
+  "license": "MIT",
+  "homepage": "https://ship-it-ops.github.io/ship-it-design/",
+  "bugs": {
+    "url": "https://github.com/ship-it-ops/ship-it-design/issues"
+  },
+  "author": "Ship-It Ops",
+  "keywords": [
+    "design-system",
+    "cytoscape",
+    "graph",
+    "knowledge-graph",
+    "shipit"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ship-it-ops/ship-it-design.git",
+    "directory": "packages/cytoscape"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "peerDependencies": {
+    "cytoscape": "^3.28.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "@ship-it-ui/shipit": "0.0.4",
+    "@ship-it-ui/ui": "0.0.4"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "axe-core": "^4.10.2",
+    "cytoscape": "^3.30.0",
+    "esbuild-plugin-preserve-directives": "^0.0.11",
+    "jsdom": "^29.1.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.3",
+    "vitest": "^2.1.3",
+    "vitest-axe": "^0.1.0",
+    "@ship-it-ui/shipit": "0.0.4",
+    "@ship-it-ui/tokens": "0.0.4",
+    "@ship-it-ui/tsconfig": "0.0.1",
+    "@ship-it-ui/ui": "0.0.4",
+    "@ship-it-ui/eslint-config": "0.0.1"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist .turbo"
+  }
+}