@logicplanes/kaeso-ui 0.4.4 → 0.4.6

package/dist/components/flow.js

@@ -1,112 +1,143 @@
 "use client";
-import { t as e } from "../chunks/cn-Dj6sRgkF.js";
+import { t as e } from "../chunks/cn-BjnOAUrA.js";
 import { i as t } from "../chunks/context-BELWW79w.js";
-import { t as n } from "../chunks/icon-D7ja-_Yk.js";
+import { t as n } from "../chunks/icon-CBzOwqrX.js";
 import { t as r } from "../chunks/observe-resize-DhxhmoyB.js";
-import { forwardRef as i, useLayoutEffect as a, useRef as o, useState as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { t as i } from "../chunks/use-scroll-fade-uc8mWSDX.js";
+import { forwardRef as a, useEffect as o, useLayoutEffect as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { motion as f } from "@logicplanes/kaeso-tokens";
 //#region src/components/flow/flow.tsx
-var u = { node: {
+var p = { node: {
 	pill: { classes: "h-36 rounded-pill px-14" },
 	box: { classes: "min-h-56 rounded-well px-16 py-10" }
-} }, d = { node: "pill" }, f = /* @__PURE__ */ i(function({ columns: i, edges: d, node: f = "pill", animated: p = !1, className: m, "aria-label": h }, g) {
-	let _ = t(), [v, y = ""] = _("flow.connection", "{from} to {to}").split("{from}"), [b, x = ""] = y.split("{to}"), S = new Map(i.flat().map((e) => [e.id, e.label])), C = d.filter(([e, t]) => S.has(e) && S.has(t)), w = o(null), [T, E] = s([]), [D, O] = s({
+} }, m = { node: "pill" }, h = (e) => e.map(([e, t]) => `${e}>${t}`).join("|"), g = () => typeof matchMedia < "u" && matchMedia("(prefers-reduced-motion: reduce)").matches, _ = f.duration.fresh;
+function v(e, t) {
+	let n = c(e), [r, i] = l(null);
+	return o(() => {
+		if (n.current === e || (n.current = e, !t || g())) return;
+		let r = performance.now(), a = 0, o = () => {
+			let e = (performance.now() - r) / _;
+			i(e >= 1 ? null : e), e < 1 && (a = requestAnimationFrame(o));
+		};
+		return a = requestAnimationFrame(o), () => {
+			cancelAnimationFrame(a), i(null);
+		};
+	}, [e, t]), r;
+}
+var y = /* @__PURE__ */ a(function({ columns: a, edges: o, node: f = "pill", animated: m = !1, className: g, "aria-label": _ }, y) {
+	let b = t(), [x, S = ""] = b("flow.connection", "{from} to {to}").split("{from}"), [C, w = ""] = S.split("{to}"), T = new Map(a.flat().map((e) => [e.id, e.label])), E = o.filter(([e, t]) => T.has(e) && T.has(t)), D = c(null), O = c(null), k = c(null), [A, j] = l([]), [M, N] = l({
 		w: 0,
 		h: 0
-	});
-	return a(() => {
-		let e = w.current;
-		if (!e) return;
-		let t = () => {
-			let t = e.getBoundingClientRect(), n = (t) => e.querySelector(`[data-flow-node="${t}"]`)?.getBoundingClientRect();
-			O({
-				w: Math.round(t.width),
-				h: Math.round(t.height)
-			}), E(d.flatMap(([e, r]) => {
-				let i = n(e), a = n(r);
+	}), [P, F] = l(!1);
+	i(D, "[data-flow-content]");
+	let I = v(h(E), m);
+	s(() => {
+		let e = O.current, t = D.current;
+		if (!e || !t) return;
+		let n = () => {
+			let n = e.getBoundingClientRect(), r = (t) => e.querySelector(`[data-flow-node="${t}"]`)?.getBoundingClientRect();
+			N({
+				w: Math.round(n.width),
+				h: Math.round(n.height)
+			}), F(t.scrollWidth > t.clientWidth + 1), j(o.flatMap(([e, t]) => {
+				let i = r(e), a = r(t);
 				if (!i || !a) return [];
-				let o = Math.round(i.right - t.left), s = Math.round(i.top + i.height / 2 - t.top) + .5, c = Math.round(a.left - t.left), l = Math.round(a.top + a.height / 2 - t.top) + .5, u = Math.round((o + c) / 2), d = Math.min(12, Math.abs(l - s) / 2, (c - o) / 4);
+				let o = Math.round(i.right - n.left), s = Math.round(i.top + i.height / 2 - n.top) + .5, c = Math.round(a.left - n.left), l = Math.round(a.top + a.height / 2 - n.top) + .5, u = Math.round((o + c) / 2), d = Math.min(12, Math.abs(l - s) / 2, (c - o) / 4);
 				if (Math.abs(l - s) < 1) return [{
-					key: `${e}-${r}`,
+					key: `${e}-${t}`,
 					d: `M${o} ${s}H${c}`
 				}];
 				let f = l > s ? 1 : -1;
 				return [{
-					key: `${e}-${r}`,
+					key: `${e}-${t}`,
 					d: `M${o} ${s}H${u - d}Q${u} ${s} ${u} ${s + f * d}V${l - f * d}Q${u} ${l} ${u + d} ${l}H${c}`
 				}];
 			}));
 		};
-		t();
-		let n = r([e], t);
-		return document.fonts?.ready.then(t), n;
-	}, [i, d]), /* @__PURE__ */ l("div", {
+		n();
+		let i = r([t, e], n);
+		return document.fonts?.ready.then(n), i;
+	}, [a, o]);
+	let L = I === null ? [] : A.flatMap((e) => {
+		let t = k.current?.querySelector(`[data-flow-edge="${e.key}"]`);
+		if (!t?.getTotalLength) return [];
+		let n = t.getPointAtLength(t.getTotalLength() * I);
+		return [{
+			key: e.key,
+			x: n.x,
+			y: n.y
+		}];
+	});
+	return /* @__PURE__ */ d("div", {
 		ref: (e) => {
-			w.current = e, typeof g == "function" ? g(e) : g && (g.current = e);
+			D.current = e, typeof y == "function" ? y(e) : y && (y.current = e);
 		},
 		role: "figure",
-		"aria-label": h ?? _("flow.label", "Flow diagram"),
-		className: e("relative -m-4 inline-flex max-w-full-bleed-4 items-center gap-64 overflow-x-auto p-4 scrollbar-quiet", m),
-		children: [
-			/* @__PURE__ */ c("svg", {
+		"aria-label": _ ?? b("flow.label", "Flow diagram"),
+		...P ? { tabIndex: 0 } : {},
+		className: e("relative inline-block max-w-full overflow-x-auto overflow-y-hidden align-top scrollbar-quiet scroll-fade-x focus-ring-inset", g),
+		children: [/* @__PURE__ */ d("div", {
+			ref: O,
+			"data-flow-content": "",
+			className: "relative flex w-max items-center gap-64",
+			children: [/* @__PURE__ */ d("svg", {
+				ref: k,
 				"aria-hidden": !0,
 				className: "pointer-events-none absolute inset-0 overflow-visible",
-				width: D.w,
-				height: D.h,
-				children: T.map((e) => /* @__PURE__ */ l("g", { children: [/* @__PURE__ */ c("path", {
+				width: M.w,
+				height: M.h,
+				children: [A.map((e) => /* @__PURE__ */ u("path", {
+					"data-flow-edge": e.key,
 					d: e.d,
 					fill: "none",
-					stroke: "var(--k-line-strong)",
+					stroke: "var(--k-text-tertiary)",
 					strokeWidth: 1.5,
 					strokeLinecap: "round",
 					strokeLinejoin: "round"
-				}), p && /* @__PURE__ */ c("circle", {
+				}, e.key)), L.map((e) => /* @__PURE__ */ u("circle", {
+					"data-flow-dot": "",
+					cx: e.x,
+					cy: e.y,
 					r: 2.5,
-					fill: "var(--k-text-secondary)",
-					children: /* @__PURE__ */ c("animateMotion", {
-						dur: "2.4s",
-						repeatCount: "indefinite",
-						path: e.d
-					})
-				})] }, e.key))
-			}),
-			i.map((t, r) => /* @__PURE__ */ c("div", {
+					fill: "var(--k-text-secondary)"
+				}, e.key))]
+			}), a.map((t, r) => /* @__PURE__ */ u("div", {
 				className: "relative flex shrink-0 flex-col items-start gap-16",
-				children: t.map((t) => /* @__PURE__ */ l("div", {
+				children: t.map((t) => /* @__PURE__ */ d("div", {
 					"data-flow-node": t.id,
-					className: e("inline-flex items-center gap-8 bg-raised text-body font-medium text-fg", u.node[f].classes, t.emphasis ? "ring-step" : "shadow-control"),
+					className: e("inline-flex items-center gap-8 bg-panel text-body font-medium text-fg", p.node[f].classes, t.emphasis ? "ring-step forced-colors:outline-2 forced-colors:-outline-offset-2" : "shadow-ring"),
 					children: [
 						t.leading,
-						t.icon && /* @__PURE__ */ c(n, {
+						t.icon && /* @__PURE__ */ u(n, {
 							icon: t.icon,
 							size: "sm",
 							className: "text-fg-secondary"
 						}),
-						/* @__PURE__ */ l("span", {
+						/* @__PURE__ */ d("span", {
 							className: "flex flex-col whitespace-nowrap",
-							children: [/* @__PURE__ */ c("span", { children: t.label }), t.description && f === "box" && /* @__PURE__ */ c("span", {
+							children: [/* @__PURE__ */ u("span", { children: t.label }), t.description && f === "box" && /* @__PURE__ */ u("span", {
 								className: "text-small font-regular text-fg-secondary",
 								children: t.description
 							})]
 						})
 					]
 				}, t.id))
-			}, r)),
-			C.length > 0 && /* @__PURE__ */ c("ul", {
-				className: "sr-only",
-				children: C.map(([e, t]) => /* @__PURE__ */ l("li", { children: [
-					v,
-					S.get(e),
-					b,
-					S.get(t),
-					x
-				] }, `${e}-${t}`))
-			})
-		]
+			}, r))]
+		}), E.length > 0 && /* @__PURE__ */ u("ul", {
+			className: "sr-only",
+			children: E.map(([e, t]) => /* @__PURE__ */ d("li", { children: [
+				x,
+				T.get(e),
+				C,
+				T.get(t),
+				w
+			] }, `${e}-${t}`))
+		})]
 	});
 });
-process.env.NODE_ENV !== "production" && (f.displayName = "Flow");
+process.env.NODE_ENV !== "production" && (y.displayName = "Flow");
 //#endregion
-export { f as Flow, d as KAESO_FLOW_DEFAULT_VARIANTS, u as KAESO_FLOW_VARIANTS };
+export { y as Flow, m as KAESO_FLOW_DEFAULT_VARIANTS, p as KAESO_FLOW_VARIANTS };
 
 //# sourceMappingURL=flow.js.map

package/dist/components/flow.js.map

@@ -1 +1 @@
-{"version":3,"file":"flow.js","names":["cn","useUiText","Icon","observeResize","KAESO_FLOW_VARIANTS","KAESO_FLOW_DEFAULT_VARIANTS","Flow","ariaLabel","t","beforeFrom","fromRest","beforeTo","afterTo","labels","columns","n","connections","edges","a","b","root","useRef","paths","setPaths","useState","size","setSize","useLayoutEffect","el","measure","box","pos","id","p","q","x1","y1","x2","y2","mx","r","dir","stop","ref","className","animated","col","node","ci"],"sources":["../../src/components/flow/flow.tsx"],"sourcesContent":["import { forwardRef, useLayoutEffect, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { observeResize } from \"../../utils/observe-resize.js\";\nimport { Icon, type IconData } from \"../icon/icon.js\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nexport const KAESO_FLOW_VARIANTS = {\n  node: {\n    pill: { classes: \"h-36 rounded-pill px-14\" },\n    box: { classes: \"min-h-56 rounded-well px-16 py-10\" },\n  },\n} as const;\nexport const KAESO_FLOW_DEFAULT_VARIANTS = { node: \"pill\" } as const;\n\nexport interface FlowNode {\n  id: string;\n  label: ReactNode;\n  description?: ReactNode | undefined;\n  icon?: IconData | undefined;\n  leading?: ReactNode | undefined;\n  emphasis?: boolean | undefined;\n}\n\nexport interface FlowProps {\n  columns: FlowNode[][];\n  edges: [string, string][];\n  node?: keyof typeof KAESO_FLOW_VARIANTS.node | undefined;\n  animated?: boolean | undefined;\n  \"aria-label\"?: string | undefined;\n  className?: string | undefined;\n}\n\ninterface Path {\n  d: string;\n  key: string;\n}\n\nexport const Flow = /* @__PURE__ */ forwardRef<HTMLDivElement, FlowProps>(function Flow(\n  { columns, edges, node = \"pill\", animated = false, className, \"aria-label\": ariaLabel },\n  ref,\n) {\n  const t = useUiText();\n  const [beforeFrom, fromRest = \"\"] = t(\"flow.connection\", \"{from} to {to}\").split(\"{from}\");\n  const [beforeTo, afterTo = \"\"] = fromRest.split(\"{to}\");\n  const labels = new Map(columns.flat().map((n) => [n.id, n.label]));\n  const connections = edges.filter(([a, b]) => labels.has(a) && labels.has(b));\n  const root = useRef<HTMLDivElement | null>(null);\n  const [paths, setPaths] = useState<Path[]>([]);\n  const [size, setSize] = useState({ w: 0, h: 0 });\n  useLayoutEffect(() => {\n    const el = root.current;\n    if (!el) return;\n    const measure = () => {\n      const box = el.getBoundingClientRect();\n      const pos = (id: string) => el.querySelector<HTMLElement>(`[data-flow-node=\"${id}\"]`)?.getBoundingClientRect();\n      setSize({ w: Math.round(box.width), h: Math.round(box.height) });\n      setPaths(\n        edges.flatMap(([a, b]) => {\n          const p = pos(a);\n          const q = pos(b);\n          if (!p || !q) return [];\n          const x1 = Math.round(p.right - box.left);\n          const y1 = Math.round(p.top + p.height / 2 - box.top) + 0.5;\n          const x2 = Math.round(q.left - box.left);\n          const y2 = Math.round(q.top + q.height / 2 - box.top) + 0.5;\n          const mx = Math.round((x1 + x2) / 2);\n          const r = Math.min(12, Math.abs(y2 - y1) / 2, (x2 - x1) / 4);\n          if (Math.abs(y2 - y1) < 1) return [{ key: `${a}-${b}`, d: `M${x1} ${y1}H${x2}` }];\n          const dir = y2 > y1 ? 1 : -1;\n          return [{ key: `${a}-${b}`, d: `M${x1} ${y1}H${mx - r}Q${mx} ${y1} ${mx} ${y1 + dir * r}V${y2 - dir * r}Q${mx} ${y2} ${mx + r} ${y2}H${x2}` }];\n        }),\n      );\n    };\n    measure();\n    const stop = observeResize([el], measure);\n    document.fonts?.ready.then(measure);\n    return stop;\n  }, [columns, edges]);\n  return (\n    <div\n      ref={(e) => {\n        root.current = e;\n        if (typeof ref === \"function\") ref(e);\n        else if (ref) ref.current = e;\n      }}\n      role=\"figure\"\n      aria-label={ariaLabel ?? t(\"flow.label\", \"Flow diagram\")}\n      className={cn(\"relative -m-4 inline-flex max-w-full-bleed-4 items-center gap-64 overflow-x-auto p-4 scrollbar-quiet\", className)}\n    >\n      <svg aria-hidden className=\"pointer-events-none absolute inset-0 overflow-visible\" width={size.w} height={size.h}>\n        {paths.map((p) => (\n          <g key={p.key}>\n            <path d={p.d} fill=\"none\" stroke=\"var(--k-line-strong)\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n            {animated && (\n              <circle r={2.5} fill=\"var(--k-text-secondary)\">\n                <animateMotion dur=\"2.4s\" repeatCount=\"indefinite\" path={p.d} />\n              </circle>\n            )}\n          </g>\n        ))}\n      </svg>\n      {columns.map((col, ci) => (\n        <div key={ci} className=\"relative flex shrink-0 flex-col items-start gap-16\">\n          {col.map((n) => (\n            <div\n              key={n.id}\n              data-flow-node={n.id}\n              className={cn(\n                \"inline-flex items-center gap-8 bg-raised text-body font-medium text-fg\",\n                KAESO_FLOW_VARIANTS.node[node].classes,\n                n.emphasis ? \"ring-step\" : \"shadow-control\",\n              )}\n            >\n              {n.leading}\n              {n.icon && <Icon icon={n.icon} size=\"sm\" className=\"text-fg-secondary\" />}\n              <span className=\"flex flex-col whitespace-nowrap\">\n                <span>{n.label}</span>\n                {n.description && node === \"box\" && <span className=\"text-small font-regular text-fg-secondary\">{n.description}</span>}\n              </span>\n            </div>\n          ))}\n        </div>\n      ))}\n      {connections.length > 0 && (\n        <ul className=\"sr-only\">\n          {connections.map(([a, b]) => (\n            <li key={`${a}-${b}`}>\n              {beforeFrom}\n              {labels.get(a)}\n              {beforeTo}\n              {labels.get(b)}\n              {afterTo}\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Flow.displayName = \"Flow\";\n"],"mappings":"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"}
+{"version":3,"file":"flow.js","names":["cn","useUiText","Icon","observeResize","useScrollFadeX","KAESO_FLOW_VARIANTS","KAESO_FLOW_DEFAULT_VARIANTS","routeKey","edges","a","b","reducedMotion","PASS","motion","useRoutePass","seen","useRef","route","progress","setProgress","useState","useEffect","enabled","start","raf","step","t","Flow","ariaLabel","beforeFrom","fromRest","beforeTo","afterTo","labels","columns","n","connections","root","content","lines","paths","setPaths","size","setSize","scrolls","setScrolls","animated","el","outer","measure","box","pos","id","p","q","x1","y1","x2","y2","mx","r","dir","stop","dots","line","at","ref","className","dot","col","node","ci"],"sources":["../../src/components/flow/flow.tsx"],"sourcesContent":["import { forwardRef, useEffect, useLayoutEffect, useRef, useState, type ReactNode } from \"react\";\nimport { motion } from \"@logicplanes/kaeso-tokens\";\nimport { cn } from \"../../utils/cn.js\";\nimport { observeResize } from \"../../utils/observe-resize.js\";\nimport { useScrollFadeX } from \"../../hooks/use-scroll-fade.js\";\nimport { Icon, type IconData } from \"../icon/icon.js\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nexport const KAESO_FLOW_VARIANTS = {\n  node: {\n    pill: { classes: \"h-36 rounded-pill px-14\" },\n    box: { classes: \"min-h-56 rounded-well px-16 py-10\" },\n  },\n} as const;\nexport const KAESO_FLOW_DEFAULT_VARIANTS = { node: \"pill\" } as const;\n\nexport interface FlowNode {\n  id: string;\n  label: ReactNode;\n  description?: ReactNode | undefined;\n  icon?: IconData | undefined;\n  leading?: ReactNode | undefined;\n  emphasis?: boolean | undefined;\n}\n\nexport interface FlowProps {\n  columns: FlowNode[][];\n  edges: [string, string][];\n  node?: keyof typeof KAESO_FLOW_VARIANTS.node | undefined;\n  animated?: boolean | undefined;\n  \"aria-label\"?: string | undefined;\n  className?: string | undefined;\n}\n\ninterface Path {\n  d: string;\n  key: string;\n}\n\nconst routeKey = (edges: [string, string][]) => edges.map(([a, b]) => `${a}>${b}`).join(\"|\");\nconst reducedMotion = () => typeof matchMedia !== \"undefined\" && matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\nconst PASS = motion.duration.fresh;\n\nfunction useRoutePass(route: string, enabled: boolean) {\n  const seen = useRef(route);\n  const [progress, setProgress] = useState<number | null>(null);\n  useEffect(() => {\n    if (seen.current === route) return;\n    seen.current = route;\n    if (!enabled || reducedMotion()) return;\n    const start = performance.now();\n    let raf = 0;\n    const step = () => {\n      const t = (performance.now() - start) / PASS;\n      setProgress(t >= 1 ? null : t);\n      if (t < 1) raf = requestAnimationFrame(step);\n    };\n    raf = requestAnimationFrame(step);\n    return () => {\n      cancelAnimationFrame(raf);\n      setProgress(null);\n    };\n  }, [route, enabled]);\n  return progress;\n}\n\nexport const Flow = /* @__PURE__ */ forwardRef<HTMLDivElement, FlowProps>(function Flow(\n  { columns, edges, node = \"pill\", animated = false, className, \"aria-label\": ariaLabel },\n  ref,\n) {\n  const t = useUiText();\n  const [beforeFrom, fromRest = \"\"] = t(\"flow.connection\", \"{from} to {to}\").split(\"{from}\");\n  const [beforeTo, afterTo = \"\"] = fromRest.split(\"{to}\");\n  const labels = new Map(columns.flat().map((n) => [n.id, n.label]));\n  const connections = edges.filter(([a, b]) => labels.has(a) && labels.has(b));\n  const root = useRef<HTMLDivElement | null>(null);\n  const content = useRef<HTMLDivElement | null>(null);\n  const lines = useRef<SVGSVGElement | null>(null);\n  const [paths, setPaths] = useState<Path[]>([]);\n  const [size, setSize] = useState({ w: 0, h: 0 });\n  const [scrolls, setScrolls] = useState(false);\n  useScrollFadeX(root, \"[data-flow-content]\");\n  const progress = useRoutePass(routeKey(connections), animated);\n  useLayoutEffect(() => {\n    const el = content.current;\n    const outer = root.current;\n    if (!el || !outer) return;\n    const measure = () => {\n      const box = el.getBoundingClientRect();\n      const pos = (id: string) => el.querySelector<HTMLElement>(`[data-flow-node=\"${id}\"]`)?.getBoundingClientRect();\n      setSize({ w: Math.round(box.width), h: Math.round(box.height) });\n      setScrolls(outer.scrollWidth > outer.clientWidth + 1);\n      setPaths(\n        edges.flatMap(([a, b]) => {\n          const p = pos(a);\n          const q = pos(b);\n          if (!p || !q) return [];\n          const x1 = Math.round(p.right - box.left);\n          const y1 = Math.round(p.top + p.height / 2 - box.top) + 0.5;\n          const x2 = Math.round(q.left - box.left);\n          const y2 = Math.round(q.top + q.height / 2 - box.top) + 0.5;\n          const mx = Math.round((x1 + x2) / 2);\n          const r = Math.min(12, Math.abs(y2 - y1) / 2, (x2 - x1) / 4);\n          if (Math.abs(y2 - y1) < 1) return [{ key: `${a}-${b}`, d: `M${x1} ${y1}H${x2}` }];\n          const dir = y2 > y1 ? 1 : -1;\n          return [{ key: `${a}-${b}`, d: `M${x1} ${y1}H${mx - r}Q${mx} ${y1} ${mx} ${y1 + dir * r}V${y2 - dir * r}Q${mx} ${y2} ${mx + r} ${y2}H${x2}` }];\n        }),\n      );\n    };\n    measure();\n    const stop = observeResize([outer, el], measure);\n    document.fonts?.ready.then(measure);\n    return stop;\n  }, [columns, edges]);\n  const dots =\n    progress === null\n      ? []\n      : paths.flatMap((p) => {\n          const line = lines.current?.querySelector<SVGPathElement>(`[data-flow-edge=\"${p.key}\"]`);\n          if (!line?.getTotalLength) return [];\n          const at = line.getPointAtLength(line.getTotalLength() * progress);\n          return [{ key: p.key, x: at.x, y: at.y }];\n        });\n  return (\n    <div\n      ref={(e) => {\n        root.current = e;\n        if (typeof ref === \"function\") ref(e);\n        else if (ref) ref.current = e;\n      }}\n      role=\"figure\"\n      aria-label={ariaLabel ?? t(\"flow.label\", \"Flow diagram\")}\n      {...(scrolls ? { tabIndex: 0 } : {})}\n      className={cn(\"relative inline-block max-w-full overflow-x-auto overflow-y-hidden align-top scrollbar-quiet scroll-fade-x focus-ring-inset\", className)}\n    >\n      <div ref={content} data-flow-content=\"\" className=\"relative flex w-max items-center gap-64\">\n        <svg ref={lines} aria-hidden className=\"pointer-events-none absolute inset-0 overflow-visible\" width={size.w} height={size.h}>\n          {paths.map((p) => (\n            <path\n              key={p.key}\n              data-flow-edge={p.key}\n              d={p.d}\n              fill=\"none\"\n              stroke=\"var(--k-text-tertiary)\"\n              strokeWidth={1.5}\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          ))}\n          {dots.map((dot) => (\n            <circle key={dot.key} data-flow-dot=\"\" cx={dot.x} cy={dot.y} r={2.5} fill=\"var(--k-text-secondary)\" />\n          ))}\n        </svg>\n        {columns.map((col, ci) => (\n          <div key={ci} className=\"relative flex shrink-0 flex-col items-start gap-16\">\n            {col.map((n) => (\n              <div\n                key={n.id}\n                data-flow-node={n.id}\n                className={cn(\n                  \"inline-flex items-center gap-8 bg-panel text-body font-medium text-fg\",\n                  KAESO_FLOW_VARIANTS.node[node].classes,\n                  n.emphasis ? \"ring-step forced-colors:outline-2 forced-colors:-outline-offset-2\" : \"shadow-ring\",\n                )}\n              >\n                {n.leading}\n                {n.icon && <Icon icon={n.icon} size=\"sm\" className=\"text-fg-secondary\" />}\n                <span className=\"flex flex-col whitespace-nowrap\">\n                  <span>{n.label}</span>\n                  {n.description && node === \"box\" && <span className=\"text-small font-regular text-fg-secondary\">{n.description}</span>}\n                </span>\n              </div>\n            ))}\n          </div>\n        ))}\n      </div>\n      {connections.length > 0 && (\n        <ul className=\"sr-only\">\n          {connections.map(([a, b]) => (\n            <li key={`${a}-${b}`}>\n              {beforeFrom}\n              {labels.get(a)}\n              {beforeTo}\n              {labels.get(b)}\n              {afterTo}\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Flow.displayName = \"Flow\";\n"],"mappings":"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"}

package/dist/components/heading.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as e } from "../chunks/cn-Dj6sRgkF.js";
+import { t as e } from "../chunks/cn-BjnOAUrA.js";
 import { forwardRef as t } from "react";
 import { jsx as n } from "react/jsx-runtime";
 //#region src/components/heading/heading.tsx

package/dist/components/icon-button.js

@@ -1,2 +1,2 @@
 "use client";
-export { t as IconButton, n as KAESO_ICON_BUTTON_DEFAULT_VARIANTS, r as KAESO_ICON_BUTTON_VARIANTS } from "../chunks/icon-button-CrdF_eMG.js";
+export { t as IconButton, n as KAESO_ICON_BUTTON_DEFAULT_VARIANTS, r as KAESO_ICON_BUTTON_VARIANTS } from "../chunks/icon-button-Dfwpvmav.js";

package/dist/components/icon.js

@@ -1,4 +1,4 @@
 "use client";
-import { n as e, r as t, t as n } from "../chunks/icon-D7ja-_Yk.js";
+import { n as e, r as t, t as n } from "../chunks/icon-CBzOwqrX.js";
 import { t as r } from "../chunks/icon-CPJWE2N-.js";
 export { n as Icon, e as KAESO_ICON_DEFAULT_VARIANTS, t as KAESO_ICON_VARIANTS, r as icons };