@flanksource/clicky-ui 0.3.55 → 0.3.57

package/dist/data/charts/TrendChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrendChart.js","names":["_Fragment"],"sources":["../../../src/data/charts/TrendChart.tsx"],"sourcesContent":["import { formatShort } from \"../../lib/format\";\nimport { ChartEmpty, ChartFrame, WithLegend } from \"./chart-marks\";\nimport { CHART_INK, chartColor } from \"./chart-palette\";\nimport {\n  assertChartSize,\n  assertFinite,\n  clampLabelX,\n  formatChartValue,\n  formatChartX,\n  labelStep,\n  niceTicks,\n  px,\n  textWidth,\n  X_AXIS_BAND,\n  X_LABEL_INSET,\n} from \"./chart-scale\";\nimport type { ChartSeries } from \"./StackedBarChart\";\n\nexport type TrendChartProps = {\n  /** ISO dates or labels, drawn evenly spaced. */\n  x: string[];\n  /** `values[i]` is the series' value at `x[i]`. */\n  series: ChartSeries[];\n  width: number;\n  height: number;\n  variant?: \"line\" | \"area\";\n  /** Defaults to on for two or more series. */\n  legend?: boolean;\n  /** Formats y ticks and hover values. Ticks default to SI-short (1.2K), hover values to grouped digits. */\n  yFormat?: (n: number) => string;\n  /** Formats x labels; ISO dates default to \"Aug 16\". */\n  xFormat?: (x: string) => string;\n  className?: string;\n};\n\ntype Plot = { left: number; top: number; width: number; height: number; low: number; high: number; count: number };\n\nconst GAP = 6;\nconst PAD = 8;\n\nfunction xAt(plot: Plot, index: number): number {\n  return px(plot.count === 1 ? plot.left + plot.width / 2 : plot.left + (index / (plot.count - 1)) * plot.width);\n}\n\nfunction yAt(plot: Plot, value: number): number {\n  return px(plot.top + ((plot.high - value) / (plot.high - plot.low)) * plot.height);\n}\n\n/** Series over evenly spaced x positions, on a y axis of nice ticks that includes 0. */\nexport function TrendChart({ x, series, width, height, variant = \"line\", legend, yFormat, xFormat = formatChartX, className }: TrendChartProps) {\n  assertChartSize(\"TrendChart\", width, height);\n  series.forEach((entry) => {\n    if (entry.values.length !== x.length) {\n      throw new Error(`TrendChart: series \"${entry.label}\" has ${entry.values.length} values for ${x.length} x positions`);\n    }\n    entry.values.forEach((value, index) => assertFinite(\"TrendChart\", `${entry.label}[${index}]`, value));\n  });\n  if (x.length === 0 || series.length === 0) return <ChartEmpty className={className} height={height} width={width} />;\n\n  const tickFormat = yFormat ?? formatShort;\n  const valueFormat = yFormat ?? formatChartValue;\n  const all = series.flatMap((entry) => entry.values);\n  const ticks = niceTicks(Math.min(0, ...all), Math.max(0, ...all));\n  const left = Math.max(...ticks.map((tick) => textWidth(tickFormat(tick)))) + GAP;\n  const plot: Plot = {\n    left,\n    top: PAD,\n    width: width - left - PAD,\n    height: height - PAD - X_AXIS_BAND,\n    low: ticks[0]!,\n    high: ticks[ticks.length - 1]!,\n    count: x.length,\n  };\n  if (plot.width < 8 || plot.height < 8) throw new Error(`TrendChart: ${width}×${height} leaves no plot area after the axes`);\n  const colors = series.map((entry, index) => entry.color ?? chartColor(index));\n  const labels = x.map(xFormat);\n\n  return (\n    <WithLegend\n      className={className}\n      items={series.map((entry, index) => ({ label: entry.label, color: colors[index]! }))}\n      show={legend ?? series.length > 1}\n      width={width}\n    >\n      {(svgClassName) => (\n        <ChartFrame className={svgClassName} height={height} label={`Trend of ${series.length} series over ${x.length} points`} width={width}>\n          <Axes height={height} labels={labels} plot={plot} tickFormat={tickFormat} ticks={ticks} width={width} />\n          {series.map((entry, index) => (\n            <SeriesMark color={colors[index]!} key={`${index}-${entry.label}`} label={entry.label} plot={plot} values={entry.values} variant={variant} />\n          ))}\n          {labels.map((label, index) => (\n            <HoverColumn\n              index={index}\n              key={`${index}-${label}`}\n              plot={plot}\n              title={`${label} — ${series.map((entry) => `${entry.label}: ${valueFormat(entry.values[index]!)}`).join(\" · \")}`}\n            />\n          ))}\n        </ChartFrame>\n      )}\n    </WithLegend>\n  );\n}\n\nfunction Axes({\n  plot,\n  ticks,\n  labels,\n  tickFormat,\n  width,\n  height,\n}: {\n  plot: Plot;\n  ticks: number[];\n  labels: string[];\n  tickFormat: (n: number) => string;\n  width: number;\n  height: number;\n}) {\n  const step = labelStep(labels, plot.count === 1 ? plot.width : plot.width / (plot.count - 1));\n  return (\n    <>\n      {ticks.map((tick) => (\n        <g key={tick}>\n          <line stroke={CHART_INK.grid} x1={px(plot.left)} x2={px(plot.left + plot.width)} y1={yAt(plot, tick)} y2={yAt(plot, tick)} />\n          <text data-role=\"y-tick\" dominantBaseline=\"central\" fill={CHART_INK.axis} textAnchor=\"end\" x={px(plot.left - GAP)} y={yAt(plot, tick)}>\n            {tickFormat(tick)}\n          </text>\n        </g>\n      ))}\n      {labels.map((label, index) =>\n        index % step === 0 ? (\n          <text data-role=\"x-label\" fill={CHART_INK.axis} key={`${index}-${label}`} textAnchor=\"middle\" x={clampLabelX(xAt(plot, index), label, width)} y={height - X_LABEL_INSET}>\n            {label}\n          </text>\n        ) : null,\n      )}\n    </>\n  );\n}\n\nfunction SeriesMark({\n  label,\n  values,\n  color,\n  plot,\n  variant,\n}: {\n  label: string;\n  values: number[];\n  color: string;\n  plot: Plot;\n  variant: \"line\" | \"area\";\n}) {\n  const points = values.map((value, index) => `${xAt(plot, index)},${yAt(plot, value)}`);\n  const zero = yAt(plot, 0);\n  const lastX = xAt(plot, values.length - 1);\n  const lastY = yAt(plot, values[values.length - 1]!);\n  return (\n    <g data-series={label}>\n      {variant === \"area\" && (\n        <path\n          d={`M${xAt(plot, 0)},${zero} L${points.join(\" L\")} L${lastX},${zero} Z`}\n          data-mark=\"area\"\n          fill={color}\n          fillOpacity={0.12}\n        />\n      )}\n      {values.length > 1 && (\n        <polyline fill=\"none\" points={points.join(\" \")} stroke={color} strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} />\n      )}\n      <circle cx={lastX} cy={lastY} fill={color} r={4} stroke={CHART_INK.surface} strokeWidth={2} />\n    </g>\n  );\n}\n\nfunction HoverColumn({ plot, index, title }: { plot: Plot; index: number; title: string }) {\n  const half = (plot.count === 1 ? plot.width : plot.width / (plot.count - 1)) / 2;\n  const start = Math.max(plot.left, xAt(plot, index) - half);\n  const end = Math.min(plot.left + plot.width, xAt(plot, index) + half);\n  return (\n    <g data-role=\"hover\">\n      <title>{title}</title>\n      <rect fill=\"transparent\" height={px(plot.height)} width={px(end - start)} x={px(start)} y={px(plot.top)} />\n    </g>\n  );\n}\n"],"mappings":"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"}

package/dist/data/charts/chart-marks.cjs

@@ -0,0 +1,115 @@
+const require_chart_palette = require("./chart-palette.cjs");
+const require_ChartLegend = require("./ChartLegend.cjs");
+const require_chart_scale = require("./chart-scale.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/data/charts/chart-marks.tsx
+var FRAME_STYLE = {
+	display: "block",
+	maxWidth: "100%",
+	height: "auto",
+	overflow: "visible",
+	fontVariantNumeric: "tabular-nums"
+};
+function ChartFrame({ width, height, label, title, className, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		"aria-label": label,
+		className,
+		fontSize: 11,
+		height,
+		role: "img",
+		style: FRAME_STYLE,
+		viewBox: `0 0 ${width} ${height}`,
+		width,
+		xmlns: "http://www.w3.org/2000/svg",
+		children: [title !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: title }), children]
+	});
+}
+/** An empty chart says so, at the size the chart would have had. */
+function ChartEmpty({ width, height, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ChartFrame, {
+		className,
+		height,
+		label: "No data",
+		width,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+			fill: "none",
+			height: Math.max(0, height - 2),
+			rx: 4,
+			stroke: require_chart_palette.CHART_INK.grid,
+			strokeDasharray: "4 3",
+			width: Math.max(0, width - 2),
+			x: 1,
+			y: 1
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+			dominantBaseline: "central",
+			fill: require_chart_palette.CHART_INK.axis,
+			fontSize: Math.min(11, height * .6),
+			textAnchor: "middle",
+			x: width / 2,
+			y: height / 2,
+			children: "No data"
+		})]
+	});
+}
+/**
+* One bar. `base` is where the bar is anchored (x for horizontal, the baseline
+* y for vertical), `cross` the start of its thickness, and `length` grows away
+* from the base (rightward, or upward).
+*/
+function BarMark({ orientation, base, cross, length, thickness, fill, rounded }) {
+	if (length <= 0) return null;
+	const radius = rounded ? require_chart_scale.px(Math.min(4, thickness / 2)) : 0;
+	const square = require_chart_scale.px(Math.min(radius, length));
+	const horizontal = orientation === "horizontal";
+	const body = horizontal ? {
+		x: require_chart_scale.px(base),
+		y: require_chart_scale.px(cross),
+		width: require_chart_scale.px(length),
+		height: require_chart_scale.px(thickness)
+	} : {
+		x: require_chart_scale.px(cross),
+		y: require_chart_scale.px(base - length),
+		width: require_chart_scale.px(thickness),
+		height: require_chart_scale.px(length)
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+		"data-mark": "bar",
+		fill,
+		rx: radius || void 0,
+		...body
+	}), square > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+		fill,
+		...horizontal ? {
+			x: body.x,
+			y: body.y,
+			width: square,
+			height: body.height
+		} : {
+			x: body.x,
+			y: require_chart_scale.px(base - square),
+			width: body.width,
+			height: square
+		}
+	})] });
+}
+/** Wraps a chart with its legend below it when `show` is set. */
+function WithLegend({ show, items, width, className, children }) {
+	if (!show) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: children(className) });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className,
+		style: {
+			width,
+			maxWidth: "100%"
+		},
+		children: [children(void 0), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChartLegend.ChartLegend, {
+			items,
+			style: { marginTop: 6 }
+		})]
+	});
+}
+exports.BarMark = BarMark;
+exports.ChartEmpty = ChartEmpty;
+exports.ChartFrame = ChartFrame;
+exports.WithLegend = WithLegend;
+
+//# sourceMappingURL=chart-marks.cjs.map

package/dist/data/charts/chart-marks.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-marks.cjs","names":["CHART_INK","px","_Fragment","ChartLegend"],"sources":["../../../src/data/charts/chart-marks.tsx"],"sourcesContent":["/**\n * The marks every static chart is drawn from, ported from the playground's\n * design-system specimens (`dataviz-marks.tsx`):\n *\n *   - 2px strokes; thinner disappears on a dense page, thicker reads as decoration.\n *   - Rounded data ends, square at the baseline. `rx` rounds all four corners,\n *     so the baseline end is squared off by overdrawing it — rounding both ends\n *     makes a bar look like it floats above its own axis.\n *   - Adjacent fills are separated by a 2px gap in the SURFACE colour, so they\n *     read as separated rather than outlined.\n *   - A recessive grid; one that competes with the data is drawn too dark.\n *\n * Everything is plain SVG with explicit geometry: no measurement, no effects,\n * no state, so `renderToStaticMarkup` produces the finished chart.\n */\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { CHART_FONT_SIZE, CHART_INK } from \"./chart-palette\";\nimport { ChartLegend, type ChartLegendItem } from \"./ChartLegend\";\nimport { px } from \"./chart-scale\";\n\nconst FRAME_STYLE: CSSProperties = {\n  display: \"block\",\n  maxWidth: \"100%\",\n  height: \"auto\",\n  overflow: \"visible\",\n  fontVariantNumeric: \"tabular-nums\",\n};\n\nexport function ChartFrame({\n  width,\n  height,\n  label,\n  title,\n  className,\n  children,\n}: {\n  width: number;\n  height: number;\n  label: string;\n  title?: string;\n  className?: string | undefined;\n  children: ReactNode;\n}) {\n  return (\n    <svg\n      aria-label={label}\n      className={className}\n      fontSize={CHART_FONT_SIZE}\n      height={height}\n      role=\"img\"\n      style={FRAME_STYLE}\n      viewBox={`0 0 ${width} ${height}`}\n      width={width}\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      {title !== undefined && <title>{title}</title>}\n      {children}\n    </svg>\n  );\n}\n\n/** An empty chart says so, at the size the chart would have had. */\nexport function ChartEmpty({ width, height, className }: { width: number; height: number; className?: string | undefined }) {\n  return (\n    <ChartFrame className={className} height={height} label=\"No data\" width={width}>\n      <rect\n        fill=\"none\"\n        height={Math.max(0, height - 2)}\n        rx={4}\n        stroke={CHART_INK.grid}\n        strokeDasharray=\"4 3\"\n        width={Math.max(0, width - 2)}\n        x={1}\n        y={1}\n      />\n      <text\n        dominantBaseline=\"central\"\n        fill={CHART_INK.axis}\n        fontSize={Math.min(CHART_FONT_SIZE, height * 0.6)}\n        textAnchor=\"middle\"\n        x={width / 2}\n        y={height / 2}\n      >\n        No data\n      </text>\n    </ChartFrame>\n  );\n}\n\n/**\n * One bar. `base` is where the bar is anchored (x for horizontal, the baseline\n * y for vertical), `cross` the start of its thickness, and `length` grows away\n * from the base (rightward, or upward).\n */\nexport function BarMark({\n  orientation,\n  base,\n  cross,\n  length,\n  thickness,\n  fill,\n  rounded,\n}: {\n  orientation: \"horizontal\" | \"vertical\";\n  base: number;\n  cross: number;\n  length: number;\n  thickness: number;\n  fill: string;\n  rounded: boolean;\n}) {\n  if (length <= 0) return null;\n  const radius = rounded ? px(Math.min(4, thickness / 2)) : 0;\n  const square = px(Math.min(radius, length));\n  const horizontal = orientation === \"horizontal\";\n  const body = horizontal\n    ? { x: px(base), y: px(cross), width: px(length), height: px(thickness) }\n    : { x: px(cross), y: px(base - length), width: px(thickness), height: px(length) };\n  return (\n    <>\n      <rect data-mark=\"bar\" fill={fill} rx={radius || undefined} {...body} />\n      {square > 0 && (\n        <rect\n          fill={fill}\n          {...(horizontal\n            ? { x: body.x, y: body.y, width: square, height: body.height }\n            : { x: body.x, y: px(base - square), width: body.width, height: square })}\n        />\n      )}\n    </>\n  );\n}\n\n/** Wraps a chart with its legend below it when `show` is set. */\nexport function WithLegend({\n  show,\n  items,\n  width,\n  className,\n  children,\n}: {\n  show: boolean;\n  items: ChartLegendItem[];\n  width: number;\n  className?: string | undefined;\n  children: (svgClassName: string | undefined) => ReactNode;\n}) {\n  if (!show) return <>{children(className)}</>;\n  return (\n    <div className={className} style={{ width, maxWidth: \"100%\" }}>\n      {children(undefined)}\n      <ChartLegend items={items} style={{ marginTop: 6 }} />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/data/charts/chart-marks.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+import { ChartLegendItem } from './ChartLegend.js';
+export declare function ChartFrame({ width, height, label, title, className, children, }: {
+    width: number;
+    height: number;
+    label: string;
+    title?: string;
+    className?: string | undefined;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** An empty chart says so, at the size the chart would have had. */
+export declare function ChartEmpty({ width, height, className }: {
+    width: number;
+    height: number;
+    className?: string | undefined;
+}): import("react").JSX.Element;
+/**
+ * One bar. `base` is where the bar is anchored (x for horizontal, the baseline
+ * y for vertical), `cross` the start of its thickness, and `length` grows away
+ * from the base (rightward, or upward).
+ */
+export declare function BarMark({ orientation, base, cross, length, thickness, fill, rounded, }: {
+    orientation: "horizontal" | "vertical";
+    base: number;
+    cross: number;
+    length: number;
+    thickness: number;
+    fill: string;
+    rounded: boolean;
+}): import("react").JSX.Element | null;
+/** Wraps a chart with its legend below it when `show` is set. */
+export declare function WithLegend({ show, items, width, className, children, }: {
+    show: boolean;
+    items: ChartLegendItem[];
+    width: number;
+    className?: string | undefined;
+    children: (svgClassName: string | undefined) => ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=chart-marks.d.ts.map

package/dist/data/charts/chart-marks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-marks.d.ts","sourceRoot":"","sources":["../../../src/data/charts/chart-marks.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAe,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAWlE,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,MAAM,EACN,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAiBA;AAED,oEAAoE;AACpE,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,+BAyBzH;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EACtB,WAAW,EACX,IAAI,EACJ,KAAK,EACL,MAAM,EACN,SAAS,EACT,IAAI,EACJ,OAAO,GACR,EAAE;IACD,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;CAClB,sCAqBA;AAED,iEAAiE;AACjE,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,KAAK,SAAS,CAAC;CAC3D,+BAQA"}

package/dist/data/charts/chart-marks.js

@@ -0,0 +1,112 @@
+import { CHART_INK } from "./chart-palette.js";
+import { ChartLegend } from "./ChartLegend.js";
+import { px } from "./chart-scale.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/data/charts/chart-marks.tsx
+var FRAME_STYLE = {
+	display: "block",
+	maxWidth: "100%",
+	height: "auto",
+	overflow: "visible",
+	fontVariantNumeric: "tabular-nums"
+};
+function ChartFrame({ width, height, label, title, className, children }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		"aria-label": label,
+		className,
+		fontSize: 11,
+		height,
+		role: "img",
+		style: FRAME_STYLE,
+		viewBox: `0 0 ${width} ${height}`,
+		width,
+		xmlns: "http://www.w3.org/2000/svg",
+		children: [title !== void 0 && /* @__PURE__ */ jsx("title", { children: title }), children]
+	});
+}
+/** An empty chart says so, at the size the chart would have had. */
+function ChartEmpty({ width, height, className }) {
+	return /* @__PURE__ */ jsxs(ChartFrame, {
+		className,
+		height,
+		label: "No data",
+		width,
+		children: [/* @__PURE__ */ jsx("rect", {
+			fill: "none",
+			height: Math.max(0, height - 2),
+			rx: 4,
+			stroke: CHART_INK.grid,
+			strokeDasharray: "4 3",
+			width: Math.max(0, width - 2),
+			x: 1,
+			y: 1
+		}), /* @__PURE__ */ jsx("text", {
+			dominantBaseline: "central",
+			fill: CHART_INK.axis,
+			fontSize: Math.min(11, height * .6),
+			textAnchor: "middle",
+			x: width / 2,
+			y: height / 2,
+			children: "No data"
+		})]
+	});
+}
+/**
+* One bar. `base` is where the bar is anchored (x for horizontal, the baseline
+* y for vertical), `cross` the start of its thickness, and `length` grows away
+* from the base (rightward, or upward).
+*/
+function BarMark({ orientation, base, cross, length, thickness, fill, rounded }) {
+	if (length <= 0) return null;
+	const radius = rounded ? px(Math.min(4, thickness / 2)) : 0;
+	const square = px(Math.min(radius, length));
+	const horizontal = orientation === "horizontal";
+	const body = horizontal ? {
+		x: px(base),
+		y: px(cross),
+		width: px(length),
+		height: px(thickness)
+	} : {
+		x: px(cross),
+		y: px(base - length),
+		width: px(thickness),
+		height: px(length)
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+		"data-mark": "bar",
+		fill,
+		rx: radius || void 0,
+		...body
+	}), square > 0 && /* @__PURE__ */ jsx("rect", {
+		fill,
+		...horizontal ? {
+			x: body.x,
+			y: body.y,
+			width: square,
+			height: body.height
+		} : {
+			x: body.x,
+			y: px(base - square),
+			width: body.width,
+			height: square
+		}
+	})] });
+}
+/** Wraps a chart with its legend below it when `show` is set. */
+function WithLegend({ show, items, width, className, children }) {
+	if (!show) return /* @__PURE__ */ jsx(Fragment, { children: children(className) });
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		style: {
+			width,
+			maxWidth: "100%"
+		},
+		children: [children(void 0), /* @__PURE__ */ jsx(ChartLegend, {
+			items,
+			style: { marginTop: 6 }
+		})]
+	});
+}
+export { BarMark, ChartEmpty, ChartFrame, WithLegend };
+
+//# sourceMappingURL=chart-marks.js.map

package/dist/data/charts/chart-marks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-marks.js","names":["_Fragment"],"sources":["../../../src/data/charts/chart-marks.tsx"],"sourcesContent":["/**\n * The marks every static chart is drawn from, ported from the playground's\n * design-system specimens (`dataviz-marks.tsx`):\n *\n *   - 2px strokes; thinner disappears on a dense page, thicker reads as decoration.\n *   - Rounded data ends, square at the baseline. `rx` rounds all four corners,\n *     so the baseline end is squared off by overdrawing it — rounding both ends\n *     makes a bar look like it floats above its own axis.\n *   - Adjacent fills are separated by a 2px gap in the SURFACE colour, so they\n *     read as separated rather than outlined.\n *   - A recessive grid; one that competes with the data is drawn too dark.\n *\n * Everything is plain SVG with explicit geometry: no measurement, no effects,\n * no state, so `renderToStaticMarkup` produces the finished chart.\n */\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { CHART_FONT_SIZE, CHART_INK } from \"./chart-palette\";\nimport { ChartLegend, type ChartLegendItem } from \"./ChartLegend\";\nimport { px } from \"./chart-scale\";\n\nconst FRAME_STYLE: CSSProperties = {\n  display: \"block\",\n  maxWidth: \"100%\",\n  height: \"auto\",\n  overflow: \"visible\",\n  fontVariantNumeric: \"tabular-nums\",\n};\n\nexport function ChartFrame({\n  width,\n  height,\n  label,\n  title,\n  className,\n  children,\n}: {\n  width: number;\n  height: number;\n  label: string;\n  title?: string;\n  className?: string | undefined;\n  children: ReactNode;\n}) {\n  return (\n    <svg\n      aria-label={label}\n      className={className}\n      fontSize={CHART_FONT_SIZE}\n      height={height}\n      role=\"img\"\n      style={FRAME_STYLE}\n      viewBox={`0 0 ${width} ${height}`}\n      width={width}\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      {title !== undefined && <title>{title}</title>}\n      {children}\n    </svg>\n  );\n}\n\n/** An empty chart says so, at the size the chart would have had. */\nexport function ChartEmpty({ width, height, className }: { width: number; height: number; className?: string | undefined }) {\n  return (\n    <ChartFrame className={className} height={height} label=\"No data\" width={width}>\n      <rect\n        fill=\"none\"\n        height={Math.max(0, height - 2)}\n        rx={4}\n        stroke={CHART_INK.grid}\n        strokeDasharray=\"4 3\"\n        width={Math.max(0, width - 2)}\n        x={1}\n        y={1}\n      />\n      <text\n        dominantBaseline=\"central\"\n        fill={CHART_INK.axis}\n        fontSize={Math.min(CHART_FONT_SIZE, height * 0.6)}\n        textAnchor=\"middle\"\n        x={width / 2}\n        y={height / 2}\n      >\n        No data\n      </text>\n    </ChartFrame>\n  );\n}\n\n/**\n * One bar. `base` is where the bar is anchored (x for horizontal, the baseline\n * y for vertical), `cross` the start of its thickness, and `length` grows away\n * from the base (rightward, or upward).\n */\nexport function BarMark({\n  orientation,\n  base,\n  cross,\n  length,\n  thickness,\n  fill,\n  rounded,\n}: {\n  orientation: \"horizontal\" | \"vertical\";\n  base: number;\n  cross: number;\n  length: number;\n  thickness: number;\n  fill: string;\n  rounded: boolean;\n}) {\n  if (length <= 0) return null;\n  const radius = rounded ? px(Math.min(4, thickness / 2)) : 0;\n  const square = px(Math.min(radius, length));\n  const horizontal = orientation === \"horizontal\";\n  const body = horizontal\n    ? { x: px(base), y: px(cross), width: px(length), height: px(thickness) }\n    : { x: px(cross), y: px(base - length), width: px(thickness), height: px(length) };\n  return (\n    <>\n      <rect data-mark=\"bar\" fill={fill} rx={radius || undefined} {...body} />\n      {square > 0 && (\n        <rect\n          fill={fill}\n          {...(horizontal\n            ? { x: body.x, y: body.y, width: square, height: body.height }\n            : { x: body.x, y: px(base - square), width: body.width, height: square })}\n        />\n      )}\n    </>\n  );\n}\n\n/** Wraps a chart with its legend below it when `show` is set. */\nexport function WithLegend({\n  show,\n  items,\n  width,\n  className,\n  children,\n}: {\n  show: boolean;\n  items: ChartLegendItem[];\n  width: number;\n  className?: string | undefined;\n  children: (svgClassName: string | undefined) => ReactNode;\n}) {\n  if (!show) return <>{children(className)}</>;\n  return (\n    <div className={className} style={{ width, maxWidth: \"100%\" }}>\n      {children(undefined)}\n      <ChartLegend items={items} style={{ marginTop: 6 }} />\n    </div>\n  );\n}\n"],"mappings":";;;;;AAoBA,IAAM,cAA6B;CACjC,SAAS;CACT,UAAU;CACV,QAAQ;CACR,UAAU;CACV,oBAAoB;AACtB;AAEA,SAAgB,WAAW,EACzB,OACA,QACA,OACA,OACA,WACA,YAQC;CACD,OACE,qBAAC,OAAD;EACE,cAAY;EACD;EACX,UAAA;EACQ;EACR,MAAK;EACL,OAAO;EACP,SAAS,OAAO,MAAM,GAAG;EAClB;EACP,OAAM;EATR,UAAA,CAWG,UAAU,KAAA,KAAa,oBAAC,SAAD,EAAA,UAAQ,MAAa,CAAA,GAC5C,QACE;;AAET;;AAGA,SAAgB,WAAW,EAAE,OAAO,QAAQ,aAAgF;CAC1H,OACE,qBAAC,YAAD;EAAuB;EAAmB;EAAQ,OAAM;EAAiB;EAAzE,UAAA,CACE,oBAAC,QAAD;GACE,MAAK;GACL,QAAQ,KAAK,IAAI,GAAG,SAAS,CAAC;GAC9B,IAAI;GACJ,QAAQ,UAAU;GAClB,iBAAgB;GAChB,OAAO,KAAK,IAAI,GAAG,QAAQ,CAAC;GAC5B,GAAG;GACH,GAAG;EACJ,CAAA,GACD,oBAAC,QAAD;GACE,kBAAiB;GACjB,MAAM,UAAU;GAChB,UAAU,KAAK,IAAA,IAAqB,SAAS,EAAG;GAChD,YAAW;GACX,GAAG,QAAQ;GACX,GAAG,SAAS;GACb,UAAA;EAEK,CAAA,CACI;;AAEhB;;;;;;AAOA,SAAgB,QAAQ,EACtB,aACA,MACA,OACA,QACA,WACA,MACA,WASC;CACD,IAAI,UAAU,GAAG,OAAO;CACxB,MAAM,SAAS,UAAU,GAAG,KAAK,IAAI,GAAG,YAAY,CAAC,CAAC,IAAI;CAC1D,MAAM,SAAS,GAAG,KAAK,IAAI,QAAQ,MAAM,CAAC;CAC1C,MAAM,aAAa,gBAAgB;CACnC,MAAM,OAAO,aACT;EAAE,GAAG,GAAG,IAAI;EAAG,GAAG,GAAG,KAAK;EAAG,OAAO,GAAG,MAAM;EAAG,QAAQ,GAAG,SAAS;CAAE,IACtE;EAAE,GAAG,GAAG,KAAK;EAAG,GAAG,GAAG,OAAO,MAAM;EAAG,OAAO,GAAG,SAAS;EAAG,QAAQ,GAAG,MAAM;CAAE;CACnF,OACE,qBAAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;EAAM,aAAU;EAAY;EAAM,IAAI,UAAU,KAAA;EAAW,GAAI;CAAO,CAAA,GACrE,SAAS,KACR,oBAAC,QAAD;EACQ;EACN,GAAK,aACD;GAAE,GAAG,KAAK;GAAG,GAAG,KAAK;GAAG,OAAO;GAAQ,QAAQ,KAAK;EAAO,IAC3D;GAAE,GAAG,KAAK;GAAG,GAAG,GAAG,OAAO,MAAM;GAAG,OAAO,KAAK;GAAO,QAAQ;EAAO;CAC1E,CAAA,CAEH,EAAA,CAAA;AAEN;;AAGA,SAAgB,WAAW,EACzB,MACA,OACA,OACA,WACA,YAOC;CACD,IAAI,CAAC,MAAM,OAAO,oBAAAA,UAAA,EAAA,UAAG,SAAS,SAAS,EAAI,CAAA;CAC3C,OACE,qBAAC,OAAD;EAAgB;EAAW,OAAO;GAAE;GAAO,UAAU;EAAO;EAA5D,UAAA,CACG,SAAS,KAAA,CAAS,GACnB,oBAAC,aAAD;GAAoB;GAAO,OAAO,EAAE,WAAW,EAAE;EAAI,CAAA,CAClD;;AAET"}

package/dist/data/charts/chart-palette.cjs

@@ -0,0 +1,74 @@
+// src/data/charts/chart-palette.ts
+/**
+* The Flanksource categorical chart palette, promoted from the playground's
+* design-system page (`apps/playground/src/design-system/patterns/dataviz-palette.ts`,
+* which holds the validator provenance: worst adjacent CVD ΔE 9.4, every slot
+* ≥ 3:1 on both #ffffff and #030712).
+*
+* The order is load-bearing: emerald and rose are kept three slots apart
+* because adjacent they fail deuteranopia (ΔE 5.8).
+*/
+var CHART_PALETTE = [
+	{
+		index: 1,
+		hue: "sky",
+		hex: "#0284c7"
+	},
+	{
+		index: 2,
+		hue: "amber",
+		hex: "#d97706"
+	},
+	{
+		index: 3,
+		hue: "rose",
+		hex: "#e11d48"
+	},
+	{
+		index: 4,
+		hue: "violet",
+		hex: "#7c3aed"
+	},
+	{
+		index: 5,
+		hue: "emerald",
+		hex: "#059669"
+	},
+	{
+		index: 6,
+		hue: "indigo",
+		hex: "#6366f1"
+	},
+	{
+		index: 7,
+		hue: "teal",
+		hex: "#0d9488"
+	}
+];
+/**
+* The `--chart-N` token for a 0-based series index, with the validated hex as
+* the fallback so a render without the theme CSS (a PDF, an email) still has
+* colour. Cycles past the seventh slot.
+*/
+function chartColor(index) {
+	if (!Number.isInteger(index) || index < 0) throw new Error(`chartColor: index must be a non-negative integer, got ${index}`);
+	const slot = CHART_PALETTE[index % CHART_PALETTE.length];
+	return `var(--chart-${slot.index}, ${slot.hex})`;
+}
+/**
+* Non-data ink. Each reads the playground's chart token first, then the
+* clicky-ui theme token, then a literal, so it resolves with or without CSS.
+*/
+var CHART_INK = {
+	text: "var(--foreground, #111827)",
+	axis: "var(--chart-axis, var(--muted-foreground, #6b7280))",
+	grid: "var(--chart-grid, var(--border, #e5e7eb))",
+	surface: "var(--background, #ffffff)",
+	/** The folded "Other" bar: neutral, because it is not one of the series. */
+	other: "var(--muted-foreground, #6b7280)"
+};
+exports.CHART_INK = CHART_INK;
+exports.CHART_PALETTE = CHART_PALETTE;
+exports.chartColor = chartColor;
+
+//# sourceMappingURL=chart-palette.cjs.map

package/dist/data/charts/chart-palette.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-palette.cjs","names":[],"sources":["../../../src/data/charts/chart-palette.ts"],"sourcesContent":["/**\n * The Flanksource categorical chart palette, promoted from the playground's\n * design-system page (`apps/playground/src/design-system/patterns/dataviz-palette.ts`,\n * which holds the validator provenance: worst adjacent CVD ΔE 9.4, every slot\n * ≥ 3:1 on both #ffffff and #030712).\n *\n * The order is load-bearing: emerald and rose are kept three slots apart\n * because adjacent they fail deuteranopia (ΔE 5.8).\n */\nexport const CHART_PALETTE = [\n  { index: 1, hue: \"sky\", hex: \"#0284c7\" },\n  { index: 2, hue: \"amber\", hex: \"#d97706\" },\n  { index: 3, hue: \"rose\", hex: \"#e11d48\" },\n  { index: 4, hue: \"violet\", hex: \"#7c3aed\" },\n  { index: 5, hue: \"emerald\", hex: \"#059669\" },\n  { index: 6, hue: \"indigo\", hex: \"#6366f1\" },\n  { index: 7, hue: \"teal\", hex: \"#0d9488\" },\n] as const;\n\n/**\n * The `--chart-N` token for a 0-based series index, with the validated hex as\n * the fallback so a render without the theme CSS (a PDF, an email) still has\n * colour. Cycles past the seventh slot.\n */\nexport function chartColor(index: number): string {\n  if (!Number.isInteger(index) || index < 0) {\n    throw new Error(`chartColor: index must be a non-negative integer, got ${index}`);\n  }\n  const slot = CHART_PALETTE[index % CHART_PALETTE.length]!;\n  return `var(--chart-${slot.index}, ${slot.hex})`;\n}\n\n/**\n * Non-data ink. Each reads the playground's chart token first, then the\n * clicky-ui theme token, then a literal, so it resolves with or without CSS.\n */\nexport const CHART_INK = {\n  text: \"var(--foreground, #111827)\",\n  axis: \"var(--chart-axis, var(--muted-foreground, #6b7280))\",\n  grid: \"var(--chart-grid, var(--border, #e5e7eb))\",\n  surface: \"var(--background, #ffffff)\",\n  /** The folded \"Other\" bar: neutral, because it is not one of the series. */\n  other: \"var(--muted-foreground, #6b7280)\",\n} as const;\n\nexport const CHART_FONT_SIZE = 11;\n"],"mappings":";;;;;;;;;;AASA,IAAa,gBAAgB;CAC3B;EAAE,OAAO;EAAG,KAAK;EAAO,KAAK;CAAU;CACvC;EAAE,OAAO;EAAG,KAAK;EAAS,KAAK;CAAU;CACzC;EAAE,OAAO;EAAG,KAAK;EAAQ,KAAK;CAAU;CACxC;EAAE,OAAO;EAAG,KAAK;EAAU,KAAK;CAAU;CAC1C;EAAE,OAAO;EAAG,KAAK;EAAW,KAAK;CAAU;CAC3C;EAAE,OAAO;EAAG,KAAK;EAAU,KAAK;CAAU;CAC1C;EAAE,OAAO;EAAG,KAAK;EAAQ,KAAK;CAAU;AAC1C;;;;;;AAOA,SAAgB,WAAW,OAAuB;CAChD,IAAI,CAAC,OAAO,UAAU,KAAK,KAAK,QAAQ,GACtC,MAAM,IAAI,MAAM,yDAAyD,OAAO;CAElF,MAAM,OAAO,cAAc,QAAQ,cAAc;CACjD,OAAO,eAAe,KAAK,MAAM,IAAI,KAAK,IAAI;AAChD;;;;;AAMA,IAAa,YAAY;CACvB,MAAM;CACN,MAAM;CACN,MAAM;CACN,SAAS;;CAET,OAAO;AACT"}

package/dist/data/charts/chart-palette.d.ts

@@ -0,0 +1,58 @@
+/**
+ * The Flanksource categorical chart palette, promoted from the playground's
+ * design-system page (`apps/playground/src/design-system/patterns/dataviz-palette.ts`,
+ * which holds the validator provenance: worst adjacent CVD ΔE 9.4, every slot
+ * ≥ 3:1 on both #ffffff and #030712).
+ *
+ * The order is load-bearing: emerald and rose are kept three slots apart
+ * because adjacent they fail deuteranopia (ΔE 5.8).
+ */
+export declare const CHART_PALETTE: readonly [{
+    readonly index: 1;
+    readonly hue: "sky";
+    readonly hex: "#0284c7";
+}, {
+    readonly index: 2;
+    readonly hue: "amber";
+    readonly hex: "#d97706";
+}, {
+    readonly index: 3;
+    readonly hue: "rose";
+    readonly hex: "#e11d48";
+}, {
+    readonly index: 4;
+    readonly hue: "violet";
+    readonly hex: "#7c3aed";
+}, {
+    readonly index: 5;
+    readonly hue: "emerald";
+    readonly hex: "#059669";
+}, {
+    readonly index: 6;
+    readonly hue: "indigo";
+    readonly hex: "#6366f1";
+}, {
+    readonly index: 7;
+    readonly hue: "teal";
+    readonly hex: "#0d9488";
+}];
+/**
+ * The `--chart-N` token for a 0-based series index, with the validated hex as
+ * the fallback so a render without the theme CSS (a PDF, an email) still has
+ * colour. Cycles past the seventh slot.
+ */
+export declare function chartColor(index: number): string;
+/**
+ * Non-data ink. Each reads the playground's chart token first, then the
+ * clicky-ui theme token, then a literal, so it resolves with or without CSS.
+ */
+export declare const CHART_INK: {
+    readonly text: "var(--foreground, #111827)";
+    readonly axis: "var(--chart-axis, var(--muted-foreground, #6b7280))";
+    readonly grid: "var(--chart-grid, var(--border, #e5e7eb))";
+    readonly surface: "var(--background, #ffffff)";
+    /** The folded "Other" bar: neutral, because it is not one of the series. */
+    readonly other: "var(--muted-foreground, #6b7280)";
+};
+export declare const CHART_FONT_SIZE = 11;
+//# sourceMappingURL=chart-palette.d.ts.map

package/dist/data/charts/chart-palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-palette.d.ts","sourceRoot":"","sources":["../../../src/data/charts/chart-palette.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAQhB,CAAC;AAEX;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAMhD;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;IAKpB,4EAA4E;;CAEpE,CAAC;AAEX,eAAO,MAAM,eAAe,KAAK,CAAC"}

package/dist/data/charts/chart-palette.js

@@ -0,0 +1,72 @@
+// src/data/charts/chart-palette.ts
+/**
+* The Flanksource categorical chart palette, promoted from the playground's
+* design-system page (`apps/playground/src/design-system/patterns/dataviz-palette.ts`,
+* which holds the validator provenance: worst adjacent CVD ΔE 9.4, every slot
+* ≥ 3:1 on both #ffffff and #030712).
+*
+* The order is load-bearing: emerald and rose are kept three slots apart
+* because adjacent they fail deuteranopia (ΔE 5.8).
+*/
+var CHART_PALETTE = [
+	{
+		index: 1,
+		hue: "sky",
+		hex: "#0284c7"
+	},
+	{
+		index: 2,
+		hue: "amber",
+		hex: "#d97706"
+	},
+	{
+		index: 3,
+		hue: "rose",
+		hex: "#e11d48"
+	},
+	{
+		index: 4,
+		hue: "violet",
+		hex: "#7c3aed"
+	},
+	{
+		index: 5,
+		hue: "emerald",
+		hex: "#059669"
+	},
+	{
+		index: 6,
+		hue: "indigo",
+		hex: "#6366f1"
+	},
+	{
+		index: 7,
+		hue: "teal",
+		hex: "#0d9488"
+	}
+];
+/**
+* The `--chart-N` token for a 0-based series index, with the validated hex as
+* the fallback so a render without the theme CSS (a PDF, an email) still has
+* colour. Cycles past the seventh slot.
+*/
+function chartColor(index) {
+	if (!Number.isInteger(index) || index < 0) throw new Error(`chartColor: index must be a non-negative integer, got ${index}`);
+	const slot = CHART_PALETTE[index % CHART_PALETTE.length];
+	return `var(--chart-${slot.index}, ${slot.hex})`;
+}
+/**
+* Non-data ink. Each reads the playground's chart token first, then the
+* clicky-ui theme token, then a literal, so it resolves with or without CSS.
+*/
+var CHART_INK = {
+	text: "var(--foreground, #111827)",
+	axis: "var(--chart-axis, var(--muted-foreground, #6b7280))",
+	grid: "var(--chart-grid, var(--border, #e5e7eb))",
+	surface: "var(--background, #ffffff)",
+	/** The folded "Other" bar: neutral, because it is not one of the series. */
+	other: "var(--muted-foreground, #6b7280)"
+};
+export { CHART_INK, CHART_PALETTE, chartColor };
+
+//# sourceMappingURL=chart-palette.js.map

package/dist/data/charts/chart-palette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-palette.js","names":[],"sources":["../../../src/data/charts/chart-palette.ts"],"sourcesContent":["/**\n * The Flanksource categorical chart palette, promoted from the playground's\n * design-system page (`apps/playground/src/design-system/patterns/dataviz-palette.ts`,\n * which holds the validator provenance: worst adjacent CVD ΔE 9.4, every slot\n * ≥ 3:1 on both #ffffff and #030712).\n *\n * The order is load-bearing: emerald and rose are kept three slots apart\n * because adjacent they fail deuteranopia (ΔE 5.8).\n */\nexport const CHART_PALETTE = [\n  { index: 1, hue: \"sky\", hex: \"#0284c7\" },\n  { index: 2, hue: \"amber\", hex: \"#d97706\" },\n  { index: 3, hue: \"rose\", hex: \"#e11d48\" },\n  { index: 4, hue: \"violet\", hex: \"#7c3aed\" },\n  { index: 5, hue: \"emerald\", hex: \"#059669\" },\n  { index: 6, hue: \"indigo\", hex: \"#6366f1\" },\n  { index: 7, hue: \"teal\", hex: \"#0d9488\" },\n] as const;\n\n/**\n * The `--chart-N` token for a 0-based series index, with the validated hex as\n * the fallback so a render without the theme CSS (a PDF, an email) still has\n * colour. Cycles past the seventh slot.\n */\nexport function chartColor(index: number): string {\n  if (!Number.isInteger(index) || index < 0) {\n    throw new Error(`chartColor: index must be a non-negative integer, got ${index}`);\n  }\n  const slot = CHART_PALETTE[index % CHART_PALETTE.length]!;\n  return `var(--chart-${slot.index}, ${slot.hex})`;\n}\n\n/**\n * Non-data ink. Each reads the playground's chart token first, then the\n * clicky-ui theme token, then a literal, so it resolves with or without CSS.\n */\nexport const CHART_INK = {\n  text: \"var(--foreground, #111827)\",\n  axis: \"var(--chart-axis, var(--muted-foreground, #6b7280))\",\n  grid: \"var(--chart-grid, var(--border, #e5e7eb))\",\n  surface: \"var(--background, #ffffff)\",\n  /** The folded \"Other\" bar: neutral, because it is not one of the series. */\n  other: \"var(--muted-foreground, #6b7280)\",\n} as const;\n\nexport const CHART_FONT_SIZE = 11;\n"],"mappings":";;;;;;;;;;AASA,IAAa,gBAAgB;CAC3B;EAAE,OAAO;EAAG,KAAK;EAAO,KAAK;CAAU;CACvC;EAAE,OAAO;EAAG,KAAK;EAAS,KAAK;CAAU;CACzC;EAAE,OAAO;EAAG,KAAK;EAAQ,KAAK;CAAU;CACxC;EAAE,OAAO;EAAG,KAAK;EAAU,KAAK;CAAU;CAC1C;EAAE,OAAO;EAAG,KAAK;EAAW,KAAK;CAAU;CAC3C;EAAE,OAAO;EAAG,KAAK;EAAU,KAAK;CAAU;CAC1C;EAAE,OAAO;EAAG,KAAK;EAAQ,KAAK;CAAU;AAC1C;;;;;;AAOA,SAAgB,WAAW,OAAuB;CAChD,IAAI,CAAC,OAAO,UAAU,KAAK,KAAK,QAAQ,GACtC,MAAM,IAAI,MAAM,yDAAyD,OAAO;CAElF,MAAM,OAAO,cAAc,QAAQ,cAAc;CACjD,OAAO,eAAe,KAAK,MAAM,IAAI,KAAK,IAAI;AAChD;;;;;AAMA,IAAa,YAAY;CACvB,MAAM;CACN,MAAM;CACN,MAAM;CACN,SAAS;;CAET,OAAO;AACT"}