@kanzo-tech/graph 0.18.0 → 0.20.0

package/dist/parts/graph-legend.js

@@ -1,61 +1,43 @@
 "use client";
-import { jsxs as s, jsx as a } from "react/jsx-runtime";
-import { useChartCapacity as S, Show as x, cn as b } from "@kanzo-tech/ui";
-import { useMemo as O } from "react";
-import { nameOf as G } from "../core/categories.js";
-import { bindingOf as j } from "../core/channels.js";
-import { useGraphState as r } from "../react/use-graph-state.js";
-import { scaleOf as z } from "../render/graph-model.js";
-import { ShapeGlyph as y } from "./shape-glyph.js";
-const C = (l, c) => l.length === c.length && l.every((p, n) => p === c[n]);
-function E({ className: l, slot: c, ...p }) {
-  const n = r((e) => e.options), u = r((e) => {
+import { jsx as a, jsxs as m } from "react/jsx-runtime";
+import { useChartCapacity as b, Show as N, cn as w } from "@kanzo-tech/ui";
+import { useMemo as S } from "react";
+import { nameOf as O } from "../core/categories.js";
+import { bindingOf as G } from "../core/channels.js";
+import { useGraphState as d } from "../react/use-graph-state.js";
+import { scaleOf as j } from "../render/graph-model.js";
+import { ShapeGlyph as f } from "./shape-glyph.js";
+const v = (n, r) => n.length === r.length && n.every((i, o) => i === r[o]);
+function B({ className: n, slot: r, ...i }) {
+  const o = d((e) => e.options), p = d((e) => {
     var t;
     return ((t = e.drawn) == null ? void 0 : t.domain) ?? e.domain;
-  }, C), i = r((e) => {
+  }, v), l = d((e) => {
     var t;
     return ((t = e.drawn) == null ? void 0 : t.tally) ?? null;
-  }), N = r((e) => {
-    var t;
-    return ((t = e.drawn) == null ? void 0 : t.vertices) ?? null;
-  }), w = r((e) => e.total), o = S(), d = O(() => z(n, o), [n, o]), g = j(n), f = g.byTable || g.category !== void 0, h = u.slice(0, o), v = i ? i.slice(o).reduce((e, t) => e + t, 0) : null, m = (e) => e == null ? "—" : e.toLocaleString();
-  return /* @__PURE__ */ s(
+  }), s = b(), c = S(() => j(o, s), [o, s]), h = G(o), x = h.byTable || h.category !== void 0, u = p.slice(0, s), y = l ? l.slice(s).reduce((e, t) => e + t, 0) : null, g = (e) => e === null ? "—" : e.toLocaleString();
+  return !x || u.length === 0 ? null : /* @__PURE__ */ a(
     "div",
     {
-      ...p,
-      className: b("rounded-lg border bg-card px-2.5 py-1.5 text-xs", l),
-      "data-slot": c ?? "graph-legend",
-      children: [
-        /* @__PURE__ */ a(x, { when: f && h.length > 0, children: /* @__PURE__ */ s("ul", { className: "space-y-1", "data-slot": "graph-legend-items", children: [
-          h.map((e, t) => /* @__PURE__ */ s("li", { className: "flex items-center gap-2", "data-slot": "graph-legend-item", children: [
-            /* @__PURE__ */ a(y, { className: "size-2.5 shrink-0", color: d.color(t), shape: d.shape(t) }),
-            /* @__PURE__ */ a("span", { className: "truncate", children: G(e, n.categories) }),
-            /* @__PURE__ */ a("span", { className: "ms-auto ps-4 text-muted-foreground tabular-nums", children: m(i ? i[t] ?? 0 : null) })
-          ] }, String(e))),
-          /* @__PURE__ */ a(x, { when: u.length > o, children: /* @__PURE__ */ s("li", { className: "flex items-center gap-2", "data-slot": "graph-legend-item", children: [
-            /* @__PURE__ */ a(y, { className: "size-2.5 shrink-0", color: d.color(o), shape: d.shape(o) }),
-            /* @__PURE__ */ a("span", { children: "Other" }),
-            /* @__PURE__ */ a("span", { className: "ms-auto ps-4 text-muted-foreground tabular-nums", children: m(v) })
-          ] }) })
-        ] }) }),
-        /* @__PURE__ */ s(
-          "p",
-          {
-            className: b("text-muted-foreground tabular-nums", f && h.length > 0 && "mt-1 border-t pt-1"),
-            "data-slot": "graph-legend-count",
-            children: [
-              m(N),
-              " of ",
-              m(w),
-              " drawn"
-            ]
-          }
-        )
-      ]
+      ...i,
+      className: w("rounded-lg border bg-card px-2.5 py-2 text-xs", n),
+      "data-slot": r ?? "graph-legend",
+      children: /* @__PURE__ */ m("ul", { className: "space-y-1.5", "data-slot": "graph-legend-items", children: [
+        u.map((e, t) => /* @__PURE__ */ m("li", { className: "flex items-center gap-2", "data-slot": "graph-legend-item", children: [
+          /* @__PURE__ */ a(f, { className: "size-2.5 shrink-0", color: c.color(t), shape: c.shape(t) }),
+          /* @__PURE__ */ a("span", { className: "truncate", children: O(e, o.categories) }),
+          /* @__PURE__ */ a("span", { className: "ms-auto ps-4 text-muted-foreground tabular-nums", children: g(l ? l[t] ?? 0 : null) })
+        ] }, String(e))),
+        /* @__PURE__ */ a(N, { when: p.length > s, children: /* @__PURE__ */ m("li", { className: "flex items-center gap-2 border-t pt-1.5", "data-slot": "graph-legend-item", children: [
+          /* @__PURE__ */ a(f, { className: "size-2.5 shrink-0", color: c.color(s), shape: c.shape(s) }),
+          /* @__PURE__ */ a("span", { children: "Other" }),
+          /* @__PURE__ */ a("span", { className: "ms-auto ps-4 text-muted-foreground tabular-nums", children: g(y) })
+        ] }) })
+      ] })
     }
   );
 }
 export {
-  E as GraphLegend
+  B as GraphLegend
 };
 //# sourceMappingURL=graph-legend.js.map

package/dist/parts/graph-legend.js.map

@@ -1 +1 @@
-{"version":3,"file":"graph-legend.js","sources":["../../src/parts/graph-legend.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn, Show, useChartCapacity } from \"@kanzo-tech/ui\";\nimport { useMemo } from \"react\";\nimport { nameOf } from \"../core/categories\";\nimport { bindingOf } from \"../core/channels\";\nimport { useGraphState } from \"../react/use-graph-state\";\nimport { scaleOf } from \"../render/graph-model\";\nimport { ShapeGlyph } from \"./shape-glyph\";\n\nexport type GraphLegendProps = React.ComponentProps<\"div\">;\n\nconst shallow = (a: readonly unknown[], b: readonly unknown[]) => a.length === b.length && a.every((v, i) => v === b[i]);\n\n/**\n * **The categorical scale the canvas draws, as rows** — glyph, name and how many vertices of that\n * category are drawn, then what is drawn of the whole. Unbound, the categories are the vertex types.\n * The rows are the domain fixed before the graph loaded, so a row never moves and a colour never\n * changes hands; a category past the palette's capacity is Other, as it is on the canvas.\n *\n * Names are the root's `categories`, never this part's: a legend that renamed a category would be\n * encoding one product's policy, which is the parts rule's reversal.\n */\nexport function GraphLegend({ className, slot, ...rest }: GraphLegendProps) {\n  const options = useGraphState((s) => s.options);\n  const domain = useGraphState((s) => s.drawn?.domain ?? s.domain, shallow);\n  const tally = useGraphState((s) => s.drawn?.tally ?? null);\n  const vertices = useGraphState((s) => s.drawn?.vertices ?? null);\n  const total = useGraphState((s) => s.total);\n  const capacity = useChartCapacity();\n  const scale = useMemo(() => scaleOf(options, capacity), [options, capacity]);\n  const binding = bindingOf(options);\n  const bound = binding.byTable || binding.category !== undefined;\n  const shown = domain.slice(0, capacity);\n  const other = tally ? tally.slice(capacity).reduce((sum, n) => sum + n, 0) : null;\n  const count = (n: number | null | undefined) => (n === null || n === undefined ? \"—\" : n.toLocaleString());\n\n  return (\n    <div\n      {...rest}\n      className={cn(\"rounded-lg border bg-card px-2.5 py-1.5 text-xs\", className)}\n      data-slot={slot ?? \"graph-legend\"}\n    >\n      <Show when={bound && shown.length > 0}>\n        <ul className=\"space-y-1\" data-slot=\"graph-legend-items\">\n          {shown.map((value, rank) => (\n            <li className=\"flex items-center gap-2\" data-slot=\"graph-legend-item\" key={String(value)}>\n              <ShapeGlyph className=\"size-2.5 shrink-0\" color={scale.color(rank)} shape={scale.shape(rank)} />\n              <span className=\"truncate\">{nameOf(value, options.categories)}</span>\n              <span className=\"ms-auto ps-4 text-muted-foreground tabular-nums\">{count(tally ? (tally[rank] ?? 0) : null)}</span>\n            </li>\n          ))}\n          <Show when={domain.length > capacity}>\n            <li className=\"flex items-center gap-2\" data-slot=\"graph-legend-item\">\n              <ShapeGlyph className=\"size-2.5 shrink-0\" color={scale.color(capacity)} shape={scale.shape(capacity)} />\n              <span>Other</span>\n              <span className=\"ms-auto ps-4 text-muted-foreground tabular-nums\">{count(other)}</span>\n            </li>\n          </Show>\n        </ul>\n      </Show>\n      <p\n        className={cn(\"text-muted-foreground tabular-nums\", bound && shown.length > 0 && \"mt-1 border-t pt-1\")}\n        data-slot=\"graph-legend-count\"\n      >\n        {count(vertices)} of {count(total)} drawn\n      </p>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAYA;AAWO;AACL;;AACoC;AAAqB;;AACtB;AAAkB;;AACf;AAAqB;AAU3D;AACE;AAAC;AAAA;AACK;AACsE;AACvD;AAEnB;AAEK;AAEG;AAA8F;AAChC;AAC8C;AAE/G;AAGG;AAAsG;AAC3F;AACqE;AAEpF;AAEJ;AACA;AAAC;AAAA;AACsG;AAC3F;AAET;AAAc;AAAE;AAAgB;AAAE;AAAA;AAAA;AAAA;AACrC;AAAA;AAGN;;;;"}
+{"version":3,"file":"graph-legend.js","sources":["../../src/parts/graph-legend.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn, Show, useChartCapacity } from \"@kanzo-tech/ui\";\nimport { useMemo } from \"react\";\nimport { nameOf } from \"../core/categories\";\nimport { bindingOf } from \"../core/channels\";\nimport { useGraphState } from \"../react/use-graph-state\";\nimport { scaleOf } from \"../render/graph-model\";\nimport { ShapeGlyph } from \"./shape-glyph\";\n\nexport type GraphLegendProps = React.ComponentProps<\"div\">;\n\nconst shallow = (a: readonly unknown[], b: readonly unknown[]) => a.length === b.length && a.every((v, i) => v === b[i]);\n\n/**\n * **The categorical scale the canvas draws, as rows** — glyph, name and how many vertices of that\n * category are drawn; what is drawn of the whole is `GraphCounts`. Unbound, the categories are the\n * vertex types, and with no category at all there is nothing to key, so nothing is drawn.\n * The rows are the domain fixed before the graph loaded, so a row never moves and a colour never\n * changes hands; a category past the palette's capacity is Other, as it is on the canvas.\n *\n * Names are the root's `categories`, never this part's: a legend that renamed a category would be\n * encoding one product's policy, which is the parts rule's reversal.\n */\nexport function GraphLegend({ className, slot, ...rest }: GraphLegendProps) {\n  const options = useGraphState((s) => s.options);\n  const domain = useGraphState((s) => s.drawn?.domain ?? s.domain, shallow);\n  const tally = useGraphState((s) => s.drawn?.tally ?? null);\n  const capacity = useChartCapacity();\n  const scale = useMemo(() => scaleOf(options, capacity), [options, capacity]);\n  const binding = bindingOf(options);\n  const bound = binding.byTable || binding.category !== undefined;\n  const shown = domain.slice(0, capacity);\n  const other = tally ? tally.slice(capacity).reduce((sum, n) => sum + n, 0) : null;\n  const count = (n: number | null) => (n === null ? \"—\" : n.toLocaleString());\n  if (!bound || shown.length === 0) return null;\n\n  return (\n    <div\n      {...rest}\n      className={cn(\"rounded-lg border bg-card px-2.5 py-2 text-xs\", className)}\n      data-slot={slot ?? \"graph-legend\"}\n    >\n      <ul className=\"space-y-1.5\" data-slot=\"graph-legend-items\">\n        {shown.map((value, rank) => (\n          <li className=\"flex items-center gap-2\" data-slot=\"graph-legend-item\" key={String(value)}>\n            <ShapeGlyph className=\"size-2.5 shrink-0\" color={scale.color(rank)} shape={scale.shape(rank)} />\n            <span className=\"truncate\">{nameOf(value, options.categories)}</span>\n            <span className=\"ms-auto ps-4 text-muted-foreground tabular-nums\">{count(tally ? (tally[rank] ?? 0) : null)}</span>\n          </li>\n        ))}\n        <Show when={domain.length > capacity}>\n          <li className=\"flex items-center gap-2 border-t pt-1.5\" data-slot=\"graph-legend-item\">\n            <ShapeGlyph className=\"size-2.5 shrink-0\" color={scale.color(capacity)} shape={scale.shape(capacity)} />\n            <span>Other</span>\n            <span className=\"ms-auto ps-4 text-muted-foreground tabular-nums\">{count(other)}</span>\n          </li>\n        </Show>\n      </ul>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAYA;AAYO;AACL;;AACoC;AAAqB;;AACtB;AAAkB;AAQrD;AAGE;AAAC;AAAA;AACK;AACoE;AACrD;AAGhB;AAEG;AAA8F;AAChC;AAC8C;AAE/G;AAGG;AAAsG;AAC3F;AACqE;AAEpF;AACF;AAAA;AAGN;;;;"}

package/dist/parts/graph-looks.d.ts

@@ -0,0 +1,16 @@
+export type GraphLooksProps = React.ComponentProps<"div">;
+/**
+ * **The graph's picture, as three looks and the axes under them** — GitHub's appearance settings:
+ * pick by looking, then customise. The looks are `PRESETS` over `GRAPH_SECTION`'s axes; wearing one
+ * writes every axis it names, and a look is checked exactly when the resolved axes are its own, so
+ * there is no name stored beside them to go stale. "Customize" holds the axes themselves — Marks as
+ * a segmented control, the rest as the section declares them — and opens on its own when the axes
+ * are no preset.
+ *
+ * Under `KanzoThemeProvider` with `GRAPH_SECTION` among its `sections` — without it there is nothing
+ * to write and it draws nothing, as `PreferencesSections` does for an unknown namespace. It needs no
+ * `GraphRoot`, so it sits in a preferences panel as well as in a dock. A look whose axes a tenant pinned is disabled,
+ * because wearing it would change nothing.
+ */
+export declare function GraphLooks({ className, slot, ...rest }: GraphLooksProps): import("react").JSX.Element | null;
+//# sourceMappingURL=graph-looks.d.ts.map

package/dist/parts/graph-looks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-looks.d.ts","sourceRoot":"","sources":["../../src/parts/graph-looks.tsx"],"names":[],"mappings":"AAyBA,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAsG1D;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,sCA6DvE"}

package/dist/parts/graph-looks.js

@@ -0,0 +1,138 @@
+"use client";
+import { jsxs as o, jsx as e, Fragment as y } from "react/jsx-runtime";
+import { useKanzoTheme as v, PreferencesFieldSet as k, RadioGroup as C, RadioGroupCard as S, Collapsible as w, CollapsibleTrigger as N, Button as E, Show as g, CollapsibleIndicator as O, CollapsibleContent as A, SegmentGroup as G, PreferencesSections as P, cn as $ } from "@kanzo-tech/ui";
+import { useId as z } from "react";
+import { useGraphPrefs as M } from "../react/use-graph-prefs.js";
+import { lookFrom as j, PRESETS as b } from "../render/graph-looks.js";
+import { scaleOf as R } from "../render/graph-model.js";
+import { GRAPH_SECTION as I } from "../section.js";
+import { ShapeGlyph as L } from "./shape-glyph.js";
+const m = I.namespace, h = {
+  nebula: { label: "Nebula", blurb: "Dense, dim points and additive links: a picture that reads as flow.", channels: {} },
+  atlas: {
+    label: "Atlas",
+    blurb: "Map-steady points, links that just bow, generous labels.",
+    channels: { stroke: "var(--muted-foreground)" }
+  },
+  ink: {
+    label: "Ink",
+    blurb: "Large, legible marks in one ink, identity on shape — the print-and-projector register.",
+    channels: { fill: "var(--foreground)", symbol: "category", stroke: "var(--muted-foreground)" }
+  }
+}, T = ["links", "labels", "additive-links", "bowed-links", "vignette", "grid"], x = [
+  { x: 22, y: 20, rank: 0, ramp: 1 },
+  { x: 58, y: 8, rank: 1, ramp: 0.3 },
+  { x: 58, y: 32, rank: 1, ramp: 0.3 },
+  { x: 98, y: 20, rank: 2, ramp: 0.7 },
+  { x: 140, y: 10, rank: 3, ramp: 0.45 },
+  { x: 140, y: 31, rank: 2, ramp: 0.2 },
+  { x: 184, y: 21, rank: 0, ramp: 0.85 }
+], D = [
+  [0, 1],
+  [0, 2],
+  [1, 2],
+  [0, 3],
+  [3, 4],
+  [3, 5],
+  [4, 6],
+  [5, 6]
+], F = 0.55;
+function B({ channels: d, look: l }) {
+  const p = z(), i = R(d), u = (t) => (l.size[0] + t * (l.size[1] - l.size[0])) * F;
+  return /* @__PURE__ */ o("svg", { "aria-hidden": !0, className: "h-16 w-full rounded-[4px] border bg-background", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 208 40", children: [
+    D.map(([t, s]) => {
+      const n = x[t], r = x[s], f = (n.x + r.x) / 2 - (r.y - n.y) * l.link.curve, a = (n.y + r.y) / 2 + (r.x - n.x) * l.link.curve;
+      return /* @__PURE__ */ e(
+        "path",
+        {
+          d: `M${n.x} ${n.y}Q${f} ${a} ${r.x} ${r.y}`,
+          fill: "none",
+          stroke: d.stroke ?? i.color(n.rank),
+          strokeOpacity: l.link.opacity,
+          strokeWidth: l.link.width
+        },
+        `${t}-${s}`
+      );
+    }),
+    x.map((t, s) => {
+      const n = u(t.ramp);
+      return /* @__PURE__ */ e(
+        L,
+        {
+          color: i.color(t.rank),
+          height: n * 2,
+          shape: i.shape(t.rank),
+          width: n * 2,
+          x: t.x - n,
+          y: t.y - n
+        },
+        s
+      );
+    }),
+    l.vignette ? /* @__PURE__ */ o(y, { children: [
+      /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ o("radialGradient", { id: p, children: [
+        /* @__PURE__ */ e("stop", { offset: "55%", stopColor: "var(--background)", stopOpacity: "0" }),
+        /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "var(--background)", stopOpacity: "0.85" })
+      ] }) }),
+      /* @__PURE__ */ e("rect", { fill: `url(#${p})`, height: "40", width: "208" })
+    ] }) : null
+  ] });
+}
+function _({ className: d, slot: l, ...p }) {
+  const { sectionPrefs: i, setSectionPref: u } = v(), { preset: t } = M(), s = i[m];
+  if (!s) return null;
+  const n = (a) => {
+    var c;
+    return ((c = s[a]) == null ? void 0 : c.offered) === !0;
+  }, r = s.marks, f = (r == null ? void 0 : r.decl.kind) === "choice" && Array.isArray(r.decl.options) ? r.decl.options : [];
+  return /* @__PURE__ */ o("div", { ...p, className: $("flex flex-col gap-4", d), "data-slot": l ?? "graph-looks", children: [
+    /* @__PURE__ */ e(k, { label: "Look", children: /* @__PURE__ */ e(
+      C,
+      {
+        onValueChange: (a) => {
+          const c = a.value;
+          c && u(m, b[c]);
+        },
+        value: t,
+        children: Object.keys(h).map((a) => /* @__PURE__ */ o(
+          S,
+          {
+            className: "flex-col gap-0 p-2",
+            disabled: !Object.keys(b[a]).every(n),
+            value: a,
+            children: [
+              /* @__PURE__ */ e(B, { channels: h[a].channels, look: j(b[a]) }),
+              /* @__PURE__ */ e("span", { className: "mt-1.5 font-medium text-xs", children: h[a].label }),
+              /* @__PURE__ */ e("span", { className: "mt-0.5 text-[10px] text-muted-foreground leading-relaxed", children: h[a].blurb })
+            ]
+          },
+          a
+        ))
+      }
+    ) }),
+    /* @__PURE__ */ o(w, { defaultOpen: t === null, children: [
+      /* @__PURE__ */ e(N, { asChild: !0, children: /* @__PURE__ */ o(E, { className: "w-full", size: "sm", variant: "ghost", children: [
+        "Customize",
+        /* @__PURE__ */ e(g, { when: t === null, children: /* @__PURE__ */ e("span", { className: "ms-auto me-1 font-normal text-muted-foreground text-xs", children: "Custom" }) }),
+        /* @__PURE__ */ e(O, {})
+      ] }) }),
+      /* @__PURE__ */ o(A, { className: "flex flex-col gap-4 pt-3", children: [
+        /* @__PURE__ */ e(g, { when: n("marks"), children: /* @__PURE__ */ e(k, { label: (r == null ? void 0 : r.decl.label) ?? "Marks", children: /* @__PURE__ */ e(
+          G,
+          {
+            onValueChange: (a) => a.value && u(m, { marks: a.value }),
+            options: f,
+            size: "sm",
+            value: (r == null ? void 0 : r.value) ?? null,
+            variant: "solid"
+          }
+        ) }) }),
+        /* @__PURE__ */ e(P, { namespace: m, only: T })
+      ] })
+    ] })
+  ] });
+}
+export {
+  _ as GraphLooks
+};
+//# sourceMappingURL=graph-looks.js.map

package/dist/parts/graph-looks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-looks.js","sources":["../../src/parts/graph-looks.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Button,\n  cn,\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleIndicator,\n  CollapsibleTrigger,\n  PreferencesFieldSet,\n  PreferencesSections,\n  RadioGroup,\n  RadioGroupCard,\n  SegmentGroup,\n  Show,\n  useKanzoTheme,\n} from \"@kanzo-tech/ui\";\nimport { useId } from \"react\";\nimport type { Channels } from \"../core/channels\";\nimport { useGraphPrefs } from \"../react/use-graph-prefs\";\nimport { lookFrom, PRESETS, type Look, type LookPreset } from \"../render/graph-looks\";\nimport { scaleOf } from \"../render/graph-model\";\nimport { GRAPH_SECTION } from \"../section\";\nimport { ShapeGlyph } from \"./shape-glyph\";\n\nexport type GraphLooksProps = React.ComponentProps<\"div\">;\n\nconst NAMESPACE = GRAPH_SECTION.namespace;\n\nconst CARDS: Record<LookPreset, { label: string; blurb: string; channels: Channels }> = {\n  nebula: { label: \"Nebula\", blurb: \"Dense, dim points and additive links: a picture that reads as flow.\", channels: {} },\n  atlas: {\n    label: \"Atlas\",\n    blurb: \"Map-steady points, links that just bow, generous labels.\",\n    channels: { stroke: \"var(--muted-foreground)\" },\n  },\n  ink: {\n    label: \"Ink\",\n    blurb: \"Large, legible marks in one ink, identity on shape — the print-and-projector register.\",\n    channels: { fill: \"var(--foreground)\", symbol: \"category\", stroke: \"var(--muted-foreground)\" },\n  },\n};\n\n/** The axes under \"Customize\", after Marks; the forces are a live layout's and are not the picture. */\nconst CUSTOMIZE = [\"links\", \"labels\", \"additive-links\", \"bowed-links\", \"vignette\", \"grid\"] as const;\n\n/**\n * One small graph — the same seven vertices and eight edges on every card, so every pixel that differs\n * comes from the look. Glyphs are `ShapeGlyph` and colours `scaleOf`, the canvas's own, so a card\n * cannot promise a picture the canvas does not paint.\n */\nconst NODES = [\n  { x: 22, y: 20, rank: 0, ramp: 1 },\n  { x: 58, y: 8, rank: 1, ramp: 0.3 },\n  { x: 58, y: 32, rank: 1, ramp: 0.3 },\n  { x: 98, y: 20, rank: 2, ramp: 0.7 },\n  { x: 140, y: 10, rank: 3, ramp: 0.45 },\n  { x: 140, y: 31, rank: 2, ramp: 0.2 },\n  { x: 184, y: 21, rank: 0, ramp: 0.85 },\n] as const;\n\nconst EDGES = [\n  [0, 1],\n  [0, 2],\n  [1, 2],\n  [0, 3],\n  [3, 4],\n  [3, 5],\n  [4, 6],\n  [5, 6],\n] as const;\n\n/** Screen pixels to the card's units, one factor for every look: Ink's larger floor is the look. */\nconst SCALE = 0.55;\n\nfunction LookPreview({ channels, look }: { channels: Channels; look: Look }) {\n  const id = useId();\n  const scale = scaleOf(channels);\n  const radius = (ramp: number) => (look.size[0] + ramp * (look.size[1] - look.size[0])) * SCALE;\n  return (\n    <svg aria-hidden className=\"h-16 w-full rounded-[4px] border bg-background\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 208 40\">\n      {EDGES.map(([from, to]) => {\n        const a = NODES[from];\n        const b = NODES[to];\n        // cosmos.gl bows a link by a fraction of its length: the midpoint pushed along the perpendicular.\n        const cx = (a.x + b.x) / 2 - (b.y - a.y) * look.link.curve;\n        const cy = (a.y + b.y) / 2 + (b.x - a.x) * look.link.curve;\n        return (\n          <path\n            d={`M${a.x} ${a.y}Q${cx} ${cy} ${b.x} ${b.y}`}\n            fill=\"none\"\n            key={`${from}-${to}`}\n            stroke={channels.stroke ?? scale.color(a.rank)}\n            strokeOpacity={look.link.opacity}\n            strokeWidth={look.link.width}\n          />\n        );\n      })}\n      {NODES.map((node, i) => {\n        const r = radius(node.ramp);\n        return (\n          <ShapeGlyph\n            color={scale.color(node.rank)}\n            height={r * 2}\n            key={i}\n            shape={scale.shape(node.rank)}\n            width={r * 2}\n            x={node.x - r}\n            y={node.y - r}\n          />\n        );\n      })}\n      {look.vignette ? (\n        <>\n          <defs>\n            <radialGradient id={id}>\n              <stop offset=\"55%\" stopColor=\"var(--background)\" stopOpacity=\"0\" />\n              <stop offset=\"100%\" stopColor=\"var(--background)\" stopOpacity=\"0.85\" />\n            </radialGradient>\n          </defs>\n          <rect fill={`url(#${id})`} height=\"40\" width=\"208\" />\n        </>\n      ) : null}\n    </svg>\n  );\n}\n\n/**\n * **The graph's picture, as three looks and the axes under them** — GitHub's appearance settings:\n * pick by looking, then customise. The looks are `PRESETS` over `GRAPH_SECTION`'s axes; wearing one\n * writes every axis it names, and a look is checked exactly when the resolved axes are its own, so\n * there is no name stored beside them to go stale. \"Customize\" holds the axes themselves — Marks as\n * a segmented control, the rest as the section declares them — and opens on its own when the axes\n * are no preset.\n *\n * Under `KanzoThemeProvider` with `GRAPH_SECTION` among its `sections` — without it there is nothing\n * to write and it draws nothing, as `PreferencesSections` does for an unknown namespace. It needs no\n * `GraphRoot`, so it sits in a preferences panel as well as in a dock. A look whose axes a tenant pinned is disabled,\n * because wearing it would change nothing.\n */\nexport function GraphLooks({ className, slot, ...rest }: GraphLooksProps) {\n  const { sectionPrefs, setSectionPref } = useKanzoTheme();\n  const { preset } = useGraphPrefs();\n  const prefs = sectionPrefs[NAMESPACE];\n  if (!prefs) return null;\n  const offered = (key: string) => prefs[key]?.offered === true;\n  const marks = prefs.marks;\n  const options = marks?.decl.kind === \"choice\" && Array.isArray(marks.decl.options) ? marks.decl.options : [];\n\n  return (\n    <div {...rest} className={cn(\"flex flex-col gap-4\", className)} data-slot={slot ?? \"graph-looks\"}>\n      <PreferencesFieldSet label=\"Look\">\n        <RadioGroup\n          onValueChange={(details) => {\n            const id = details.value as LookPreset | null;\n            if (id) setSectionPref(NAMESPACE, PRESETS[id]);\n          }}\n          value={preset}\n        >\n          {(Object.keys(CARDS) as LookPreset[]).map((id) => (\n            <RadioGroupCard\n              className=\"flex-col gap-0 p-2\"\n              disabled={!Object.keys(PRESETS[id]).every(offered)}\n              key={id}\n              value={id}\n            >\n              <LookPreview channels={CARDS[id].channels} look={lookFrom(PRESETS[id])} />\n              <span className=\"mt-1.5 font-medium text-xs\">{CARDS[id].label}</span>\n              <span className=\"mt-0.5 text-[10px] text-muted-foreground leading-relaxed\">{CARDS[id].blurb}</span>\n            </RadioGroupCard>\n          ))}\n        </RadioGroup>\n      </PreferencesFieldSet>\n\n      <Collapsible defaultOpen={preset === null}>\n        <CollapsibleTrigger asChild>\n          <Button className=\"w-full\" size=\"sm\" variant=\"ghost\">\n            Customize\n            <Show when={preset === null}>\n              <span className=\"ms-auto me-1 font-normal text-muted-foreground text-xs\">Custom</span>\n            </Show>\n            <CollapsibleIndicator />\n          </Button>\n        </CollapsibleTrigger>\n        <CollapsibleContent className=\"flex flex-col gap-4 pt-3\">\n          <Show when={offered(\"marks\")}>\n            <PreferencesFieldSet label={marks?.decl.label ?? \"Marks\"}>\n              <SegmentGroup\n                onValueChange={(details) => details.value && setSectionPref(NAMESPACE, { marks: details.value })}\n                options={options}\n                size=\"sm\"\n                value={marks?.value ?? null}\n                variant=\"solid\"\n              />\n            </PreferencesFieldSet>\n          </Show>\n          <PreferencesSections namespace={NAMESPACE} only={CUSTOMIZE} />\n        </CollapsibleContent>\n      </Collapsible>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AA2BA;AAEwF;AAC8B;AAC7G;AACE;AACA;AACa;AAA0B;AAE3C;AACI;AACA;AAC4D;AAEvE;AAUc;AACmB;AACD;AACC;AACA;AACC;AACA;AAElC;AAEc;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AAEP;AAKA;AACE;AAGA;AAEK;AACC;AAKA;AACE;AAAC;AAAA;AAC4C;AACtC;AAEwC;AACpB;AACF;AAAA;AAHL;AAAA;AAMvB;AAEC;AACA;AACE;AAAC;AAAA;AAC6B;AAChB;AAEgB;AACjB;AACC;AACA;AAAA;AAJP;AAAA;AAOV;AAGG;AAEI;AAAiE;AACI;AAEzE;AACmD;AAEnD;AAGV;AAeO;AACL;AAGA;AACA;;AAAiC;AAAwB;AAIzD;AAEI;AACE;AAAC;AAAA;AAEG;AACA;AAA6C;AAC/C;AACO;AAGL;AAAC;AAAA;AACW;AACuC;AAE1C;AAEP;AAAwE;AACV;AAC8B;AAAA;AAAA;AALvF;AAOR;AAAA;AAEL;AAGE;AACuD;AAAA;AAInD;AACsB;AAE1B;AAEE;AAEI;AAAC;AAAA;AACgG;AAC/F;AACK;AACkB;AACf;AAAA;AAGd;AAC4D;AAC9D;AACF;AAGN;;;;"}

package/dist/parts/graph-search.d.ts

@@ -0,0 +1,17 @@
+import { ComboboxInput } from '@kanzo-tech/ui';
+export interface GraphSearchProps extends Pick<React.ComponentProps<typeof ComboboxInput>, "className" | "placeholder" | "size"> {
+    /** How many matches the list shows; past it, the list says to keep typing. */
+    limit?: number;
+}
+/**
+ * **Find a vertex by its text and go to it.** Every drawn vertex's `title` — or its table's
+ * `identity` — is read once, then filtered in the browser as the reader types: no query per
+ * keystroke. The list is ordered by the `r` ramp, so with `r="degree"` the hubs come first, and each
+ * match is named by the root's `categories`. Picking one is `reveal`: the canvas frames it and
+ * selects it with its neighbours, and `GraphInspector` reads it.
+ *
+ * A vertex the page's filter hides is not offered, because there is nothing on the canvas to go to.
+ * A read that fails is handed to `onFailure` whole and the input says so, rather than staying disabled.
+ */
+export declare function GraphSearch({ className, limit, placeholder, size }: GraphSearchProps): import("react").JSX.Element;
+//# sourceMappingURL=graph-search.d.ts.map

package/dist/parts/graph-search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-search.d.ts","sourceRoot":"","sources":["../../src/parts/graph-search.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,aAAa,EAMd,MAAM,gBAAgB,CAAC;AAUxB,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,EAAE,WAAW,GAAG,aAAa,GAAG,MAAM,CAAC;IAC9H,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmCD;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,KAAU,EAAE,WAA4B,EAAE,IAAW,EAAE,EAAE,gBAAgB,+BAkFjH"}

package/dist/parts/graph-search.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsxs as h, jsx as r } from "react/jsx-runtime";
+import { useFilter as z, createListCollection as A, Combobox as O, ComboboxInput as q, InputGroupAddon as K, ComboboxContent as L, ComboboxEmpty as M, ComboboxItem as Q, Show as E } from "@kanzo-tech/ui";
+import { SearchIcon as R } from "lucide-react";
+import { useState as T, useEffect as $, useMemo as V } from "react";
+import { nameOf as B } from "../core/categories.js";
+import { bindingOf as D } from "../core/channels.js";
+import { readEveryTitle as H } from "../core/detail.js";
+import { useGraphContext as J } from "../react/graph-root.js";
+import { useGraphState as N, useGraphSnapshot as v } from "../react/use-graph-state.js";
+function P(m, s, d, f, a) {
+  const i = [];
+  for (let t = 0; t < m.size; t++)
+    (!d || d[t]) && !Number.isNaN(m.positions[t * 2]) && i.push(t);
+  const { sizes: l } = s;
+  if (l) {
+    const t = (o) => Number.isNaN(l[o]) ? -1 / 0 : l[o];
+    i.sort((o, c) => t(c) - t(o) || o - c);
+  }
+  return i.map((t) => ({
+    value: String(t),
+    label: f[t] || `#${t}`,
+    kind: a ? a(s.ranks[t]) : null
+  }));
+}
+function oe({ className: m, limit: s = 50, placeholder: d = "Find a node…", size: f = "sm" }) {
+  const a = J(), i = N((e) => e.corpus), l = N((e) => e.options), t = v((e) => e.geometry), o = v((e) => e.encoding), c = v((e) => e.mask), w = N((e) => {
+    var n;
+    return ((n = e.drawn) == null ? void 0 : n.domain) ?? e.domain;
+  }), [p, S] = T(null), [b, j] = T(""), { contains: k } = z({ sensitivity: "base" }), { title: u, categories: I } = l;
+  $(() => {
+    if (!i || !t) return;
+    const e = new AbortController();
+    return H(i, t, u, e.signal).then(
+      (n) => !e.signal.aborted && S({ geometry: t, title: u, titles: n }),
+      (n) => {
+        e.signal.aborted || (S({ geometry: t, title: u, titles: !1 }), a.getState().options.onFailure(n));
+      }
+    ), () => e.abort();
+  }, [a, i, t, u]);
+  const g = p && p.geometry === t && p.title === u ? p.titles : null, x = g || null, G = D(l), F = G.byTable || G.category !== void 0, y = V(() => !t || !o || !x ? null : P(t, o, c, x, F ? (e) => B(w[e], I) : null), [t, o, c, x, F, w, I]), C = V(() => {
+    const e = [];
+    for (const n of y ?? []) {
+      if (e.length === s) break;
+      (!b || k(n.label, b)) && e.push(n);
+    }
+    return A({ items: e });
+  }, [y, b, k, s]);
+  return /* @__PURE__ */ h(
+    O,
+    {
+      collection: C,
+      disabled: y === null,
+      onInputValueChange: (e) => j(e.inputValue),
+      onValueChange: (e) => {
+        const n = e.value[0];
+        n !== void 0 && a.reveal(Number(n));
+      },
+      children: [
+        /* @__PURE__ */ r(
+          q,
+          {
+            "aria-invalid": g === !1 || void 0,
+            className: m,
+            placeholder: g === !1 ? "The names could not be read." : d,
+            size: f,
+            children: /* @__PURE__ */ r(K, { align: "inline-start", children: /* @__PURE__ */ r(R, {}) })
+          }
+        ),
+        /* @__PURE__ */ h(L, { children: [
+          /* @__PURE__ */ r(M, { children: "Nothing drawn by that name." }),
+          C.items.map((e) => /* @__PURE__ */ h(Q, { item: e, children: [
+            /* @__PURE__ */ r("span", { className: "min-w-0 truncate", children: e.label }),
+            /* @__PURE__ */ r(E, { when: e.kind !== null, children: /* @__PURE__ */ r("span", { className: "ms-auto ps-2 text-muted-foreground text-xs", children: e.kind }) })
+          ] }, e.value)),
+          /* @__PURE__ */ r(E, { when: C.items.length === s, children: /* @__PURE__ */ h("p", { className: "border-t px-2 py-1.5 text-muted-foreground text-xs", children: [
+            "First ",
+            s,
+            ". Keep typing to narrow it."
+          ] }) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  oe as GraphSearch
+};
+//# sourceMappingURL=graph-search.js.map

package/dist/parts/graph-search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-search.js","sources":["../../src/parts/graph-search.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  createListCollection,\n  InputGroupAddon,\n  Show,\n  useFilter,\n} from \"@kanzo-tech/ui\";\nimport { SearchIcon } from \"lucide-react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { nameOf } from \"../core/categories\";\nimport { bindingOf } from \"../core/channels\";\nimport { readEveryTitle } from \"../core/detail\";\nimport type { Encoding, Geometry } from \"../core/load\";\nimport { useGraphContext } from \"../react/graph-root\";\nimport { useGraphSnapshot, useGraphState } from \"../react/use-graph-state\";\n\nexport interface GraphSearchProps extends Pick<React.ComponentProps<typeof ComboboxInput>, \"className\" | \"placeholder\" | \"size\"> {\n  /** How many matches the list shows; past it, the list says to keep typing. */\n  limit?: number;\n}\n\ninterface Entry {\n  value: string;\n  label: string;\n  kind: string | null;\n}\n\n/** The titles read for one geometry and title column, or `false` when the read failed. */\ntype Titles = { geometry: Geometry; title: string | undefined; titles: string[] | false } | null;\n\n/** Every drawn vertex, biggest on the `r` ramp first — the vertices a reader most likely means. */\nfunction entriesOf(\n  geometry: Geometry,\n  encoding: Encoding,\n  mask: Uint8Array | null,\n  titles: readonly string[],\n  kindOf: ((rank: number) => string) | null,\n): Entry[] {\n  const ids: number[] = [];\n  for (let id = 0; id < geometry.size; id++) {\n    if ((!mask || mask[id]) && !Number.isNaN(geometry.positions[id * 2])) ids.push(id);\n  }\n  const { sizes } = encoding;\n  if (sizes) {\n    const ramp = (id: number) => (Number.isNaN(sizes[id]) ? -Infinity : (sizes[id] as number));\n    ids.sort((a, b) => ramp(b) - ramp(a) || a - b);\n  }\n  return ids.map((id) => ({\n    value: String(id),\n    label: titles[id] || `#${id}`,\n    kind: kindOf ? kindOf(encoding.ranks[id] as number) : null,\n  }));\n}\n\n/**\n * **Find a vertex by its text and go to it.** Every drawn vertex's `title` — or its table's\n * `identity` — is read once, then filtered in the browser as the reader types: no query per\n * keystroke. The list is ordered by the `r` ramp, so with `r=\"degree\"` the hubs come first, and each\n * match is named by the root's `categories`. Picking one is `reveal`: the canvas frames it and\n * selects it with its neighbours, and `GraphInspector` reads it.\n *\n * A vertex the page's filter hides is not offered, because there is nothing on the canvas to go to.\n * A read that fails is handed to `onFailure` whole and the input says so, rather than staying disabled.\n */\nexport function GraphSearch({ className, limit = 50, placeholder = \"Find a node…\", size = \"sm\" }: GraphSearchProps) {\n  const api = useGraphContext();\n  const corpus = useGraphState((s) => s.corpus);\n  const options = useGraphState((s) => s.options);\n  const geometry = useGraphSnapshot((s) => s.geometry);\n  const encoding = useGraphSnapshot((s) => s.encoding);\n  const mask = useGraphSnapshot((s) => s.mask);\n  const domain = useGraphState((s) => s.drawn?.domain ?? s.domain);\n  const [read, setRead] = useState<Titles>(null);\n  const [query, setQuery] = useState(\"\");\n  const { contains } = useFilter({ sensitivity: \"base\" });\n  const { title, categories } = options;\n\n  useEffect(() => {\n    if (!corpus || !geometry) return;\n    const aborter = new AbortController();\n    readEveryTitle(corpus, geometry, title, aborter.signal).then(\n      (titles) => !aborter.signal.aborted && setRead({ geometry, title, titles }),\n      (error: unknown) => {\n        if (aborter.signal.aborted) return;\n        setRead({ geometry, title, titles: false });\n        api.getState().options.onFailure(error);\n      },\n    );\n    return () => aborter.abort();\n  }, [api, corpus, geometry, title]);\n\n  const answered = read && read.geometry === geometry && read.title === title ? read.titles : null;\n  const titles = answered || null;\n  const binding = bindingOf(options);\n  const bound = binding.byTable || binding.category !== undefined;\n\n  const entries = useMemo(() => {\n    if (!geometry || !encoding || !titles) return null;\n    return entriesOf(geometry, encoding, mask, titles, bound ? (rank) => nameOf(domain[rank], categories) : null);\n  }, [geometry, encoding, mask, titles, bound, domain, categories]);\n\n  const collection = useMemo(() => {\n    const matches: Entry[] = [];\n    for (const entry of entries ?? []) {\n      if (matches.length === limit) break;\n      if (!query || contains(entry.label, query)) matches.push(entry);\n    }\n    return createListCollection({ items: matches });\n  }, [entries, query, contains, limit]);\n\n  return (\n    <Combobox\n      collection={collection}\n      disabled={entries === null}\n      onInputValueChange={(details) => setQuery(details.inputValue)}\n      onValueChange={(details) => {\n        const picked = details.value[0];\n        if (picked !== undefined) api.reveal(Number(picked));\n      }}\n    >\n      <ComboboxInput\n        aria-invalid={answered === false || undefined}\n        className={className}\n        placeholder={answered === false ? \"The names could not be read.\" : placeholder}\n        size={size}\n      >\n        <InputGroupAddon align=\"inline-start\">\n          <SearchIcon />\n        </InputGroupAddon>\n      </ComboboxInput>\n      <ComboboxContent>\n        <ComboboxEmpty>Nothing drawn by that name.</ComboboxEmpty>\n        {collection.items.map((item) => (\n          <ComboboxItem item={item} key={item.value}>\n            <span className=\"min-w-0 truncate\">{item.label}</span>\n            <Show when={item.kind !== null}>\n              <span className=\"ms-auto ps-2 text-muted-foreground text-xs\">{item.kind}</span>\n            </Show>\n          </ComboboxItem>\n        ))}\n        <Show when={collection.items.length === limit}>\n          <p className=\"border-t px-2 py-1.5 text-muted-foreground text-xs\">First {limit}. Keep typing to narrow it.</p>\n        </Show>\n      </ComboboxContent>\n    </Combobox>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAqCA;AAOE;AACA;AACE;AAEF;AACA;AACE;AACA;AAA6C;AAE/C;AAAwB;AACN;AACW;AAC2B;AAE1D;AAYO;AACL;;AAMoC;AAAqB;AAMzD;AACE;AACA;AACA;AAAwD;AACoB;AAExE;AAEsC;AACxC;AAEmB;AAGvB;AAWE;AACA;AACE;AACA;AAA8D;AAEhE;AAA8C;AAGhD;AACE;AAAC;AAAA;AACC;AACsB;AACsC;AAE1D;AACA;AAAmD;AACrD;AAEA;AAAA;AAAC;AAAA;AACqC;AACpC;AACmE;AACnE;AAIA;AAAA;AAAA;AAGA;AAA0C;AAGtC;AAA+C;AAG/C;AAEH;AAEmE;AAAA;AAAO;AAAM;AACjF;AACF;AAAA;AAAA;AAGN;;;;"}

package/dist/react/use-graph-prefs.d.ts

@@ -1,4 +1,4 @@
-import { Look } from '../render/graph-looks';
+import { Look, LookPreset } from '../render/graph-looks';
 import { Sim } from '../render/graph-sim';
 /**
  * The graph section's resolved preferences, as the two objects `useGraph` takes.
@@ -9,11 +9,15 @@ import { Sim } from '../render/graph-sim';
  * the keys, the defaults and the bounds are all `GRAPH_SECTION`'s, and the resolution chain is the
  * provider's. What reaches `lookFrom`/`simFrom` is the resolved value, never the stored one.
  *
+ * `preset` is the named look the axes are, for a host that pairs channels with it — Ink spends
+ * identity on shape — and `null` once a reader has customised past all three.
+ *
  * Needs `KanzoThemeProvider` with `GRAPH_SECTION` among its `sections`. Without it the namespace
- * resolves to nothing and both objects are the manifest's defaults.
+ * resolves to nothing, both objects are the manifest's defaults and the preset is Atlas.
  */
 export declare function useGraphPrefs(): {
     look: Look;
     sim: Sim;
+    preset: LookPreset | null;
 };
 //# sourceMappingURL=use-graph-prefs.d.ts.map

package/dist/react/use-graph-prefs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-graph-prefs.d.ts","sourceRoot":"","sources":["../../src/react/use-graph-prefs.ts"],"names":[],"mappings":"AAIA,OAAO,EAAY,KAAK,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAW,KAAK,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAGxD;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,IAAI;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,GAAG,EAAE,GAAG,CAAA;CAAE,CASxD"}
+{"version":3,"file":"use-graph-prefs.d.ts","sourceRoot":"","sources":["../../src/react/use-graph-prefs.ts"],"names":[],"mappings":"AAIA,OAAO,EAAsB,KAAK,IAAI,EAAE,KAAK,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACvF,OAAO,EAAW,KAAK,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAGxD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,aAAa,IAAI;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,GAAG,EAAE,GAAG,CAAC;IAAC,MAAM,EAAE,UAAU,GAAG,IAAI,CAAA;CAAE,CASnF"}

package/dist/react/use-graph-prefs.js

@@ -1,17 +1,17 @@
 "use client";
 import { useMemo as t } from "react";
 import { useKanzoTheme as s } from "@kanzo-tech/ui";
-import { lookFrom as i } from "../render/graph-looks.js";
-import { simFrom as n } from "../render/graph-sim.js";
+import { presetOf as i, lookFrom as n } from "../render/graph-looks.js";
+import { simFrom as p } from "../render/graph-sim.js";
 import { GRAPH_SECTION as f } from "../section.js";
 function v() {
-  const o = s().sectionPrefs[f.namespace];
+  const r = s().sectionPrefs[f.namespace];
   return t(() => {
-    const r = Object.fromEntries(
-      Object.entries(o ?? {}).map(([e, m]) => [e, m.value])
+    const e = Object.fromEntries(
+      Object.entries(r ?? {}).map(([o, m]) => [o, m.value])
     );
-    return { look: i(r), sim: n(r) };
-  }, [o]);
+    return { look: n(e), sim: p(e), preset: i(e) };
+  }, [r]);
 }
 export {
   v as useGraphPrefs

package/dist/react/use-graph-prefs.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-graph-prefs.js","sources":["../../src/react/use-graph-prefs.ts"],"sourcesContent":["\"use client\";\n\nimport { useMemo } from \"react\";\nimport { useKanzoTheme } from \"@kanzo-tech/ui\";\nimport { lookFrom, type Look } from \"../render/graph-looks\";\nimport { simFrom, type Sim } from \"../render/graph-sim\";\nimport { GRAPH_SECTION } from \"../section\";\n\n/**\n * The graph section's resolved preferences, as the two objects `useGraph` takes.\n *\n * The join between the provider's `sectionPrefs` and the two readers of this package's manifest.\n * Every host that drew a graph under a preferences panel wrote it — the docs' workspace and keasy's\n * discover page, the same eight lines each — and it knows nothing a host decides: the namespace,\n * the keys, the defaults and the bounds are all `GRAPH_SECTION`'s, and the resolution chain is the\n * provider's. What reaches `lookFrom`/`simFrom` is the resolved value, never the stored one.\n *\n * Needs `KanzoThemeProvider` with `GRAPH_SECTION` among its `sections`. Without it the namespace\n * resolves to nothing and both objects are the manifest's defaults.\n */\nexport function useGraphPrefs(): { look: Look; sim: Sim } {\n  const resolved = useKanzoTheme().sectionPrefs[GRAPH_SECTION.namespace];\n\n  return useMemo(() => {\n    const values = Object.fromEntries(\n      Object.entries(resolved ?? {}).map(([key, pref]) => [key, pref.value]),\n    );\n    return { look: lookFrom(values), sim: simFrom(values) };\n  }, [resolved]);\n}\n"],"names":[],"mappings":";;;;;;AAoBO;AACL;AAEA;AACE;AAAsB;AACiD;AAEvE;AAAoD;AAExD;;;;"}
+{"version":3,"file":"use-graph-prefs.js","sources":["../../src/react/use-graph-prefs.ts"],"sourcesContent":["\"use client\";\n\nimport { useMemo } from \"react\";\nimport { useKanzoTheme } from \"@kanzo-tech/ui\";\nimport { lookFrom, presetOf, type Look, type LookPreset } from \"../render/graph-looks\";\nimport { simFrom, type Sim } from \"../render/graph-sim\";\nimport { GRAPH_SECTION } from \"../section\";\n\n/**\n * The graph section's resolved preferences, as the two objects `useGraph` takes.\n *\n * The join between the provider's `sectionPrefs` and the two readers of this package's manifest.\n * Every host that drew a graph under a preferences panel wrote it — the docs' workspace and keasy's\n * discover page, the same eight lines each — and it knows nothing a host decides: the namespace,\n * the keys, the defaults and the bounds are all `GRAPH_SECTION`'s, and the resolution chain is the\n * provider's. What reaches `lookFrom`/`simFrom` is the resolved value, never the stored one.\n *\n * `preset` is the named look the axes are, for a host that pairs channels with it — Ink spends\n * identity on shape — and `null` once a reader has customised past all three.\n *\n * Needs `KanzoThemeProvider` with `GRAPH_SECTION` among its `sections`. Without it the namespace\n * resolves to nothing, both objects are the manifest's defaults and the preset is Atlas.\n */\nexport function useGraphPrefs(): { look: Look; sim: Sim; preset: LookPreset | null } {\n  const resolved = useKanzoTheme().sectionPrefs[GRAPH_SECTION.namespace];\n\n  return useMemo(() => {\n    const values = Object.fromEntries(\n      Object.entries(resolved ?? {}).map(([key, pref]) => [key, pref.value]),\n    );\n    return { look: lookFrom(values), sim: simFrom(values), preset: presetOf(values) };\n  }, [resolved]);\n}\n"],"names":[],"mappings":";;;;;;AAuBO;AACL;AAEA;AACE;AAAsB;AACiD;AAEvE;AAA8E;AAElF;;;;"}