@kodffe/ui 0.0.0-stage → 0.10.1

package/dist/data-display/data-display.js

@@ -0,0 +1,227 @@
+import { cx as e } from "../lib/cx.js";
+import { Icon as t } from "../icon/icon.js";
+import { Glyph as n } from "../lib/glyphs.js";
+import { AV_SIZE as r } from "./avatar-sizes.js";
+import { Avatar as i } from "./avatar.js";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useId as c } from "react";
+//#region src/data-display/data-display.tsx
+var l = {
+	primary: "text-primary",
+	accent: "text-accent",
+	success: "text-success-icon",
+	danger: "text-danger-icon"
+};
+function u({ data: t, label: n, height: r = 40, tone: i = "primary", area: u = !0, className: d, ...f }) {
+	let p = c();
+	if (t.length < 2) return null;
+	let m = Math.min(...t), h = Math.max(...t) - m || 1, g = t.map((e, n) => [n / (t.length - 1) * 100, r - 2 - (e - m) / h * (r - 4)]).map(([e, t], n) => `${n ? "L" : "M"}${e.toFixed(2)},${t.toFixed(2)}`).join(" ");
+	return /* @__PURE__ */ s("svg", {
+		role: "img",
+		"aria-label": n,
+		viewBox: `0 0 100 ${r}`,
+		preserveAspectRatio: "none",
+		className: e("block h-10 w-full overflow-visible", l[i], d),
+		style: { height: r },
+		...f,
+		children: [u && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("defs", { children: /* @__PURE__ */ s("linearGradient", {
+			id: p,
+			x1: "0",
+			x2: "0",
+			y1: "0",
+			y2: "1",
+			children: [/* @__PURE__ */ o("stop", {
+				offset: "0",
+				stopColor: "currentColor",
+				stopOpacity: "0.25"
+			}), /* @__PURE__ */ o("stop", {
+				offset: "1",
+				stopColor: "currentColor",
+				stopOpacity: "0"
+			})]
+		}) }), /* @__PURE__ */ o("path", {
+			d: `${g} L100,${r} L0,${r} Z`,
+			fill: `url(#${p})`
+		})] }), /* @__PURE__ */ o("path", {
+			d: g,
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinejoin: "round",
+			strokeLinecap: "round",
+			vectorEffect: "non-scaling-stroke"
+		})]
+	});
+}
+function d({ people: t, max: n = 4, size: a = "sm", label: c, className: l, ...u }) {
+	let d = t.slice(0, n), f = t.length - d.length;
+	return /* @__PURE__ */ s("div", {
+		role: "group",
+		"aria-label": c ?? t.map((e) => e.name).join(", "),
+		className: e("flex items-center -space-x-2", l),
+		...u,
+		children: [d.map((e) => /* @__PURE__ */ o(i, {
+			...e,
+			size: a,
+			className: "ring-2 ring-bg",
+			"aria-hidden": "true"
+		}, e.name)), f > 0 && /* @__PURE__ */ s("span", {
+			"aria-hidden": "true",
+			className: e("relative inline-grid place-items-center rounded-full bg-surface-muted font-sans font-bold text-fg-muted ring-2 ring-bg", r[a]),
+			children: ["+", f]
+		})]
+	});
+}
+function f({ icon: n, className: r, children: i, ...a }) {
+	return /* @__PURE__ */ s("span", {
+		className: e("inline-flex items-center gap-1 rounded-xs bg-surface-muted px-2 py-0.5 font-sans text-xs font-semibold text-fg-muted", r),
+		...a,
+		children: [n && /* @__PURE__ */ o(t, {
+			name: n,
+			size: 14
+		}), i]
+	});
+}
+var p = {
+	default: "bg-surface-muted text-fg-muted",
+	success: "bg-success-surface text-success-icon",
+	warning: "bg-warning-surface text-warning-icon",
+	danger: "bg-danger-surface text-danger-icon",
+	info: "bg-info-surface text-info-icon"
+};
+function m({ items: r, className: i }) {
+	return /* @__PURE__ */ o("ol", {
+		className: e("m-0 grid list-none gap-0 p-0 font-sans", i),
+		children: r.map((i, a) => /* @__PURE__ */ s("li", {
+			className: "relative grid grid-cols-[auto_1fr] gap-x-4 pb-6 last:pb-0",
+			children: [
+				a < r.length - 1 && /* @__PURE__ */ o("span", {
+					"aria-hidden": "true",
+					className: "absolute top-10 bottom-1 left-[17px] w-0.5 rounded-full bg-border"
+				}),
+				/* @__PURE__ */ o("span", {
+					className: e("relative grid size-9 place-items-center rounded-full", p[i.tone ?? "default"]),
+					children: i.icon ? /* @__PURE__ */ o(t, {
+						name: i.icon,
+						size: 20
+					}) : /* @__PURE__ */ o(n, {
+						name: "dot",
+						size: 12
+					})
+				}),
+				/* @__PURE__ */ s("div", {
+					className: "min-w-0 pt-1.5",
+					children: [
+						i.time && /* @__PURE__ */ o("p", {
+							className: "m-0 text-xs font-semibold tracking-wide text-fg-muted uppercase",
+							children: i.time
+						}),
+						/* @__PURE__ */ o("p", {
+							className: "m-0 text-[15px] font-semibold text-fg",
+							children: i.title
+						}),
+						i.description && /* @__PURE__ */ o("div", {
+							className: "mt-0.5 text-sm text-fg-muted",
+							children: i.description
+						})
+					]
+				})
+			]
+		}, a))
+	});
+}
+function h({ items: t, layout: n = "inline", className: r, ...i }) {
+	return /* @__PURE__ */ o("dl", {
+		className: e("m-0 font-sans text-sm", n === "inline" && "divide-y divide-border", n === "grid" && "grid gap-x-8 gap-y-5 sm:grid-cols-2 md:grid-cols-3", n === "stacked" && "grid gap-4", r),
+		...i,
+		children: t.map((t, r) => /* @__PURE__ */ s("div", {
+			className: e(n === "inline" ? "grid gap-1 py-3 sm:grid-cols-[minmax(8rem,1fr)_2fr] sm:gap-4" : "grid gap-1"),
+			children: [/* @__PURE__ */ o("dt", {
+				className: "font-medium text-fg-muted",
+				children: t.term
+			}), /* @__PURE__ */ o("dd", {
+				className: "m-0 min-w-0 break-words text-fg",
+				children: t.description
+			})]
+		}, r))
+	});
+}
+var g = {
+	trigger: "border-border bg-surface",
+	action: "border-border bg-surface",
+	ai: "border-accent bg-accent/10",
+	output: "border-primary bg-info-surface"
+};
+function _({ steps: r, label: i, orientation: a = "responsive", className: c }) {
+	let l = v[a];
+	return /* @__PURE__ */ o("ol", {
+		"aria-label": i,
+		className: e("m-0 flex list-none gap-0 p-0 font-sans", l.list, c),
+		children: r.map((i, a) => /* @__PURE__ */ s("li", {
+			className: e("flex", l.item),
+			children: [/* @__PURE__ */ s("div", {
+				className: e("flex min-w-[10rem] items-center gap-3 rounded-md border-2 px-4 py-3", g[i.kind ?? "action"]),
+				children: [i.icon && /* @__PURE__ */ o(t, {
+					name: i.icon,
+					size: 26,
+					className: i.kind === "ai" ? "text-accent" : "text-primary"
+				}), /* @__PURE__ */ s("div", {
+					className: "min-w-0",
+					children: [i.meta && /* @__PURE__ */ o("p", {
+						className: "m-0 text-xs font-semibold tracking-wide text-fg-muted uppercase",
+						children: i.meta
+					}), /* @__PURE__ */ o("p", {
+						className: "m-0 text-sm font-semibold text-fg",
+						children: i.label
+					})]
+				})]
+			}), a < r.length - 1 && /* @__PURE__ */ s("span", {
+				"aria-hidden": "true",
+				className: e("flex items-center justify-center text-fg-muted", l.connector),
+				children: [
+					/* @__PURE__ */ o("span", { className: e("bg-border", l.line) }),
+					/* @__PURE__ */ o(n, {
+						name: "chevron-down",
+						size: 16,
+						className: e("-mt-1.5", l.down)
+					}),
+					/* @__PURE__ */ o(n, {
+						name: "chevron-right",
+						size: 16,
+						className: e("-ml-1.5", l.right)
+					})
+				]
+			})]
+		}, i.id))
+	});
+}
+var v = {
+	responsive: {
+		list: "flex-col items-stretch md:flex-row md:items-center",
+		item: "flex-col items-center md:flex-row",
+		connector: "flex-col md:flex-row md:px-1",
+		line: "h-5 w-0.5 md:h-0.5 md:w-6",
+		down: "md:hidden",
+		right: "hidden md:block"
+	},
+	vertical: {
+		list: "flex-col items-stretch",
+		item: "flex-col items-stretch",
+		connector: "flex-col",
+		line: "h-5 w-0.5",
+		down: "",
+		right: "hidden"
+	},
+	horizontal: {
+		list: "flex-row items-center",
+		item: "flex-row items-center",
+		connector: "px-1",
+		line: "h-0.5 w-6",
+		down: "hidden",
+		right: "block"
+	}
+};
+//#endregion
+export { d as AvatarGroup, h as DescriptionList, _ as FlowDiagram, u as Sparkline, f as Tag, m as Timeline };
+
+//# sourceMappingURL=data-display.js.map

package/dist/data-display/data-display.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-display.js","names":["_Fragment","TONE","Sparkline","rest","gradientId","useId","data","min","span","line","i","height","v","x","y","label","cx","tone","className","area","Fragment","AvatarGroup","shown","people","max","extra","p","Avatar","AV_SIZE","size","Tag","icon","Icon","children","DOT","Timeline","items","item","Glyph","DescriptionList","layout","KIND","FlowDiagram","o","FLOW_LAYOUT","orientation","steps","s"],"sources":["../../src/data-display/data-display.tsx"],"sourcesContent":["import { useId, type HTMLAttributes, type ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { Glyph } from '../lib/glyphs';\nimport { Icon, type IconName } from '../icon/icon';\nimport { Avatar, type AvatarProps } from './avatar';\nimport { AV_SIZE } from './avatar-sizes';\n\n/*\n * Server-safe: no state or handlers here, so these render as Server Components in Next.js.\n * Interactive pieces live in their own 'use client' modules (avatar, chip, code-block), exported from\n * the package index — don't re-export them here, or every page using this module would ship them.\n */\n\n/* ---------------- Sparkline ---------------- */\n\nexport interface SparklineProps extends Omit<HTMLAttributes<SVGSVGElement>, 'children'> {\n  data: number[];\n  /** Accessible summary, e.g. \"Runs per day, last 14 days: rising from 120 to 310\". */\n  label: string;\n  height?: number;\n  tone?: 'primary' | 'accent' | 'success' | 'danger';\n  /** Fill the area under the line. */\n  area?: boolean;\n}\n\nconst TONE = {\n  primary: 'text-primary',\n  accent: 'text-accent',\n  success: 'text-success-icon',\n  danger: 'text-danger-icon',\n};\n\n/** Dependency-free trend line for KPI tiles. For full charts use LineChart, AreaChart, BarChart, DonutChart. */\nexport function Sparkline({\n  data,\n  label,\n  height = 40,\n  tone = 'primary',\n  area = true,\n  className,\n  ...rest\n}: SparklineProps) {\n  const gradientId = useId();\n  if (data.length < 2) return null;\n  const w = 100;\n  const min = Math.min(...data);\n  const max = Math.max(...data);\n  const span = max - min || 1;\n  const pts = data.map(\n    (v, i) => [(i / (data.length - 1)) * w, height - 2 - ((v - min) / span) * (height - 4)] as const,\n  );\n  const line = pts.map(([x, y], i) => `${i ? 'L' : 'M'}${x.toFixed(2)},${y.toFixed(2)}`).join(' ');\n  return (\n    <svg\n      role=\"img\"\n      aria-label={label}\n      viewBox={`0 0 ${w} ${height}`}\n      preserveAspectRatio=\"none\"\n      className={cx('block h-10 w-full overflow-visible', TONE[tone], className)}\n      style={{ height }}\n      {...rest}\n    >\n      {area && (\n        <>\n          <defs>\n            <linearGradient id={gradientId} x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n              <stop offset=\"0\" stopColor=\"currentColor\" stopOpacity=\"0.25\" />\n              <stop offset=\"1\" stopColor=\"currentColor\" stopOpacity=\"0\" />\n            </linearGradient>\n          </defs>\n          <path d={`${line} L${w},${height} L0,${height} Z`} fill={`url(#${gradientId})`} />\n        </>\n      )}\n      <path\n        d={line}\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinejoin=\"round\"\n        strokeLinecap=\"round\"\n        vectorEffect=\"non-scaling-stroke\"\n      />\n    </svg>\n  );\n}\n\n/* ---------------- AvatarGroup ---------------- */\n\nexport interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {\n  people: { name: string; src?: string }[];\n  max?: number;\n  size?: AvatarProps['size'];\n  /** Accessible summary, e.g. \"5 members\". Defaults to the names. */\n  label?: string;\n}\n\nexport function AvatarGroup({ people, max = 4, size = 'sm', label, className, ...rest }: AvatarGroupProps) {\n  const shown = people.slice(0, max);\n  const extra = people.length - shown.length;\n  return (\n    <div\n      role=\"group\"\n      aria-label={label ?? people.map((p) => p.name).join(', ')}\n      className={cx('flex items-center -space-x-2', className)}\n      {...rest}\n    >\n      {shown.map((p) => (\n        <Avatar key={p.name} {...p} size={size} className=\"ring-2 ring-bg\" aria-hidden=\"true\" />\n      ))}\n      {extra > 0 && (\n        <span\n          aria-hidden=\"true\"\n          className={cx(\n            'relative inline-grid place-items-center rounded-full bg-surface-muted font-sans font-bold text-fg-muted ring-2 ring-bg',\n            AV_SIZE[size],\n          )}\n        >\n          +{extra}\n        </span>\n      )}\n    </div>\n  );\n}\n\n/* ---------------- Tag ---------------- */\n\nexport interface TagProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Neutral metadata label (technology, category). For status use `Badge`. */\n  children: ReactNode;\n  icon?: IconName;\n}\n\nexport function Tag({ icon, className, children, ...rest }: TagProps) {\n  return (\n    <span\n      className={cx(\n        'inline-flex items-center gap-1 rounded-xs bg-surface-muted px-2 py-0.5 font-sans text-xs font-semibold text-fg-muted',\n        className,\n      )}\n      {...rest}\n    >\n      {icon && <Icon name={icon} size={14} />}\n      {children}\n    </span>\n  );\n}\n\n/* ---------------- Timeline ---------------- */\n\nexport interface TimelineItem {\n  title: ReactNode;\n  description?: ReactNode;\n  /** Label at the start (year, time). */\n  time?: ReactNode;\n  icon?: IconName;\n  tone?: 'default' | 'success' | 'warning' | 'danger' | 'info';\n}\n\nconst DOT = {\n  default: 'bg-surface-muted text-fg-muted',\n  success: 'bg-success-surface text-success-icon',\n  warning: 'bg-warning-surface text-warning-icon',\n  danger: 'bg-danger-surface text-danger-icon',\n  info: 'bg-info-surface text-info-icon',\n};\n\n/** Vertical sequence of events: company history (years), run logs, activity. */\nexport function Timeline({ items, className }: { items: TimelineItem[]; className?: string }) {\n  return (\n    <ol className={cx('m-0 grid list-none gap-0 p-0 font-sans', className)}>\n      {items.map((item, i) => (\n        <li key={i} className=\"relative grid grid-cols-[auto_1fr] gap-x-4 pb-6 last:pb-0\">\n          {i < items.length - 1 && (\n            <span aria-hidden=\"true\" className=\"absolute top-10 bottom-1 left-[17px] w-0.5 rounded-full bg-border\" />\n          )}\n          <span className={cx('relative grid size-9 place-items-center rounded-full', DOT[item.tone ?? 'default'])}>\n            {item.icon ? <Icon name={item.icon} size={20} /> : <Glyph name=\"dot\" size={12} />}\n          </span>\n          <div className=\"min-w-0 pt-1.5\">\n            {item.time && (\n              <p className=\"m-0 text-xs font-semibold tracking-wide text-fg-muted uppercase\">{item.time}</p>\n            )}\n            <p className=\"m-0 text-[15px] font-semibold text-fg\">{item.title}</p>\n            {item.description && <div className=\"mt-0.5 text-sm text-fg-muted\">{item.description}</div>}\n          </div>\n        </li>\n      ))}\n    </ol>\n  );\n}\n\n/* ---------------- DescriptionList ---------------- */\n\nexport interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {\n  items: { term: ReactNode; description: ReactNode }[];\n  /** `stacked` (term above), `inline` (term | value columns from sm), `grid` (2–3 columns of pairs). */\n  layout?: 'stacked' | 'inline' | 'grid';\n}\n\n/** Key/value details for record pages (workflow settings, invoice data). */\nexport function DescriptionList({ items, layout = 'inline', className, ...rest }: DescriptionListProps) {\n  return (\n    <dl\n      className={cx(\n        'm-0 font-sans text-sm',\n        layout === 'inline' && 'divide-y divide-border',\n        layout === 'grid' && 'grid gap-x-8 gap-y-5 sm:grid-cols-2 md:grid-cols-3',\n        layout === 'stacked' && 'grid gap-4',\n        className,\n      )}\n      {...rest}\n    >\n      {items.map((item, i) => (\n        <div\n          key={i}\n          className={cx(\n            layout === 'inline' ? 'grid gap-1 py-3 sm:grid-cols-[minmax(8rem,1fr)_2fr] sm:gap-4' : 'grid gap-1',\n          )}\n        >\n          <dt className=\"font-medium text-fg-muted\">{item.term}</dt>\n          <dd className=\"m-0 min-w-0 break-words text-fg\">{item.description}</dd>\n        </div>\n      ))}\n    </dl>\n  );\n}\n\n/* ---------------- FlowDiagram ---------------- */\n\nexport interface FlowStep {\n  id: string;\n  label: ReactNode;\n  /** App or system (\"Gmail\", \"AI\", \"QuickBooks\"). */\n  meta?: ReactNode;\n  icon?: IconName;\n  kind?: 'trigger' | 'action' | 'ai' | 'output';\n}\n\nconst KIND = {\n  trigger: 'border-border bg-surface',\n  action: 'border-border bg-surface',\n  ai: 'border-accent bg-accent/10',\n  output: 'border-primary bg-info-surface',\n};\n\n/**\n * Static automation flow for case studies and the Blueprint tool. `responsive` (default): left to\n * right from 960px, top to bottom below. Use `vertical` in narrow containers. The interactive\n * editor (React Flow) needs its own ADR.\n */\nexport function FlowDiagram({\n  steps,\n  label,\n  orientation = 'responsive',\n  className,\n}: {\n  steps: FlowStep[];\n  label: string;\n  orientation?: 'responsive' | 'vertical' | 'horizontal';\n  className?: string;\n}) {\n  const o = FLOW_LAYOUT[orientation];\n  return (\n    <ol aria-label={label} className={cx('m-0 flex list-none gap-0 p-0 font-sans', o.list, className)}>\n      {steps.map((s, i) => (\n        <li key={s.id} className={cx('flex', o.item)}>\n          <div\n            className={cx(\n              'flex min-w-[10rem] items-center gap-3 rounded-md border-2 px-4 py-3',\n              KIND[s.kind ?? 'action'],\n            )}\n          >\n            {s.icon && <Icon name={s.icon} size={26} className={s.kind === 'ai' ? 'text-accent' : 'text-primary'} />}\n            <div className=\"min-w-0\">\n              {s.meta && <p className=\"m-0 text-xs font-semibold tracking-wide text-fg-muted uppercase\">{s.meta}</p>}\n              <p className=\"m-0 text-sm font-semibold text-fg\">{s.label}</p>\n            </div>\n          </div>\n          {i < steps.length - 1 && (\n            <span aria-hidden=\"true\" className={cx('flex items-center justify-center text-fg-muted', o.connector)}>\n              <span className={cx('bg-border', o.line)} />\n              <Glyph name=\"chevron-down\" size={16} className={cx('-mt-1.5', o.down)} />\n              <Glyph name=\"chevron-right\" size={16} className={cx('-ml-1.5', o.right)} />\n            </span>\n          )}\n        </li>\n      ))}\n    </ol>\n  );\n}\n\n/* Literal class names per orientation so Tailwind can find them. */\nconst FLOW_LAYOUT = {\n  responsive: {\n    list: 'flex-col items-stretch md:flex-row md:items-center',\n    item: 'flex-col items-center md:flex-row',\n    connector: 'flex-col md:flex-row md:px-1',\n    line: 'h-5 w-0.5 md:h-0.5 md:w-6',\n    down: 'md:hidden',\n    right: 'hidden md:block',\n  },\n  vertical: {\n    list: 'flex-col items-stretch',\n    item: 'flex-col items-stretch',\n    connector: 'flex-col',\n    line: 'h-5 w-0.5',\n    down: '',\n    right: 'hidden',\n  },\n  horizontal: {\n    list: 'flex-row items-center',\n    item: 'flex-row items-center',\n    connector: 'px-1',\n    line: 'h-0.5 w-6',\n    down: 'hidden',\n    right: 'block',\n  },\n};\n"],"mappings":"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"}

package/dist/data-display/insights.d.ts

@@ -0,0 +1,120 @@
+import { type ReactNode } from 'react';
+import { type IconName } from '../icon/icon';
+export interface LegendItem {
+    label: string;
+    /** Any CSS color, usually `var(--kf-category-N)`. */
+    color: string;
+}
+/** A row of colored dots with labels that explains a status or category palette (tables, calendars, charts). */
+export declare function StatusLegend({ items, label, className, }: {
+    items: LegendItem[];
+    label?: string;
+    className?: string;
+}): import("react").JSX.Element;
+export interface ChipListItem {
+    label: string;
+    count?: number;
+}
+export interface ChipListProps {
+    items: ChipListItem[];
+    /** Chips shown before "+N". */
+    max?: number;
+    labels?: {
+        more?: (n: number) => string;
+        less?: string;
+    };
+    className?: string;
+}
+/** Read-only chips with counts that collapse into "+N" after a limit (tags in tables, AI insight topics). */
+export declare function ChipList({ items, max, labels, className }: ChipListProps): import("react").JSX.Element;
+/** Holds the page-level "Show amounts" state for every `SensitiveValue` inside it. Hidden by default. */
+export declare function SensitiveProvider({ children, defaultRevealed, }: {
+    children: ReactNode;
+    defaultRevealed?: boolean;
+}): import("react").JSX.Element;
+/** The "Show amounts / Hide amounts" toggle for a `SensitiveProvider`. */
+export declare function SensitiveToggle({ labels, className, }: {
+    labels?: {
+        show?: string;
+        hide?: string;
+    };
+    className?: string;
+}): import("react").JSX.Element | null;
+export interface SensitiveValueProps {
+    /**
+     * Rendered only when revealed, so it is not in the visible page or the accessibility tree while hidden. It is a
+     * visual mask, not access control: the value is still sent to the browser. Data a viewer may not see must not be
+     * sent at all (check permissions on the server).
+     */
+    children: ReactNode;
+    /** Width of the mask in characters, so layouts do not jump when revealing (default 6). */
+    chars?: number;
+    /** Accessible text while hidden. */
+    hiddenLabel?: string;
+    /** Without a provider: controlled visibility. */
+    revealed?: boolean;
+    className?: string;
+}
+/** A masked value ("••••") that a page-level toggle reveals (salaries, revenue, balances). */
+export declare function SensitiveValue({ children, chars, hiddenLabel, revealed: revealedProp, className, }: SensitiveValueProps): import("react").JSX.Element;
+export interface ActivityPerson {
+    name: string;
+    src?: string;
+}
+export interface ActivityItem {
+    id: string;
+    from: ActivityPerson;
+    /** The receiver ("A → B"); omit for one-person events. */
+    to?: ActivityPerson;
+    /** What happened or why ("for helping with the March close"). */
+    text?: ReactNode;
+    /** Relative time to show ("2 h ago") and the exact time for `<time>`. */
+    time: string;
+    dateTime?: string;
+    /** Where it came from (Slack, the web app…). */
+    source?: {
+        icon: IconName;
+        label: string;
+    };
+}
+/** A list of events: "A → B", a reason and a relative time with its source (kudos, audit log, notifications). */
+export declare function ActivityFeed({ items, columns, className, 'aria-label': label, }: {
+    items: ActivityItem[];
+    columns?: 1 | 2;
+    className?: string;
+    'aria-label'?: string;
+}): import("react").JSX.Element;
+export interface RankedItem {
+    id: string;
+    name: string;
+    src?: string;
+    value: number;
+    /** Formatted value ("13 kudos"); defaults to the number. */
+    display?: string;
+}
+/** A leaderboard: rank, avatar, name, an inline bar and the value (top receivers, top plans). */
+export declare function RankedList({ items, color, className, 'aria-label': label, }: {
+    items: RankedItem[];
+    color?: string;
+    className?: string;
+    'aria-label'?: string;
+}): import("react").JSX.Element;
+export interface BarSeries {
+    key: string;
+    label: string;
+    color: string;
+}
+export interface SegmentedBarRow {
+    label: string;
+    values: Record<string, number>;
+}
+/**
+ * One bar per row split into colored segments, with one legend (usage by type, evidence by month, budget split).
+ * Each row also states its values as text for screen readers.
+ */
+export declare function SegmentedBar({ series, rows, format, className, }: {
+    series: BarSeries[];
+    rows: SegmentedBarRow[];
+    format?: (n: number) => string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/data-display/insights.js

@@ -0,0 +1,220 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Icon as t } from "../icon/icon.js";
+import { Avatar as n } from "./avatar.js";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { createContext as o, useContext as s, useState as c } from "react";
+//#region src/data-display/insights.tsx
+function l({ items: t, label: n = "Legend", className: r }) {
+	return /* @__PURE__ */ i("ul", {
+		"aria-label": n,
+		className: e("m-0 flex list-none flex-wrap gap-x-4 gap-y-1.5 p-0 font-sans text-sm text-fg-muted", r),
+		children: t.map((e) => /* @__PURE__ */ a("li", {
+			className: "inline-flex items-center gap-1.5",
+			children: [/* @__PURE__ */ i("span", {
+				"aria-hidden": "true",
+				className: "size-2.5 rounded-full",
+				style: { background: e.color }
+			}), e.label]
+		}, e.label))
+	});
+}
+function u({ items: t, max: n = 3, labels: r = {}, className: o }) {
+	let [s, l] = c(!1), u = s ? t : t.slice(0, n), d = t.length - u.length, f = "inline-flex items-center gap-1 rounded-full bg-surface-muted px-2.5 py-0.5 text-xs font-semibold text-fg";
+	return /* @__PURE__ */ a("ul", {
+		className: e("m-0 flex list-none flex-wrap gap-1.5 p-0 font-sans", o),
+		children: [u.map((e) => /* @__PURE__ */ a("li", {
+			className: f,
+			children: [e.label, e.count !== void 0 && /* @__PURE__ */ i("span", {
+				className: "text-fg-muted tabular-nums",
+				children: e.count
+			})]
+		}, e.label)), (d > 0 || s && t.length > n) && /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i("button", {
+			type: "button",
+			"aria-expanded": s,
+			onClick: () => l((e) => !e),
+			className: e(f, "cursor-pointer border-0 text-link hover:bg-info-surface focus-visible:outline-3 focus-visible:outline-offset-1 focus-visible:outline-focus"),
+			children: s ? r.less ?? "Show less" : r.more?.(d) ?? `+${d}`
+		}) })]
+	});
+}
+var d = o(null);
+function f({ children: e, defaultRevealed: t = !1 }) {
+	let [n, r] = c(t);
+	return /* @__PURE__ */ i(d.Provider, {
+		value: {
+			revealed: n,
+			setRevealed: r
+		},
+		children: e
+	});
+}
+function p({ labels: n = {}, className: r }) {
+	let o = s(d);
+	return o ? /* @__PURE__ */ a("button", {
+		type: "button",
+		"aria-pressed": o.revealed,
+		onClick: () => o.setRevealed(!o.revealed),
+		className: e("inline-flex min-h-9 cursor-pointer items-center gap-1.5 rounded-full border border-border bg-surface px-3 font-sans text-sm font-semibold text-fg hover:bg-surface-muted", "focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus pointer-coarse:min-h-11", r),
+		children: [/* @__PURE__ */ i(t, {
+			name: o.revealed ? "eye-off" : "eye",
+			size: 16
+		}), o.revealed ? n.hide ?? "Hide amounts" : n.show ?? "Show amounts"]
+	}) : null;
+}
+function m({ children: t, chars: n = 6, hiddenLabel: r = "Hidden", revealed: a, className: o }) {
+	let c = s(d), l = a ?? c?.revealed ?? !1;
+	return /* @__PURE__ */ i("span", {
+		className: e("inline-block tabular-nums", o),
+		style: { minWidth: `${n}ch` },
+		children: l ? t : /* @__PURE__ */ i("span", {
+			role: "img",
+			"aria-label": r,
+			className: "tracking-widest text-fg-muted",
+			children: "•".repeat(Math.max(3, Math.min(n, 8)))
+		})
+	});
+}
+function h({ items: o, columns: s = 1, className: c, "aria-label": l }) {
+	return /* @__PURE__ */ i("ol", {
+		"aria-label": l,
+		className: e("m-0 grid list-none gap-3 p-0 font-sans", s === 2 && "md:grid-cols-2", c),
+		children: o.map((e) => /* @__PURE__ */ a("li", {
+			className: "flex gap-3 rounded-md border border-border bg-surface p-3",
+			children: [/* @__PURE__ */ i(n, {
+				name: e.from.name,
+				src: e.from.src,
+				size: "sm",
+				decorative: !0
+			}), /* @__PURE__ */ a("div", {
+				className: "grid min-w-0 flex-1 gap-1 text-sm",
+				children: [
+					/* @__PURE__ */ a("p", {
+						className: "m-0 flex flex-wrap items-center gap-1.5 font-semibold text-fg",
+						children: [e.from.name, e.to && /* @__PURE__ */ a(r, { children: [
+							/* @__PURE__ */ i(t, {
+								name: "arrow-right",
+								size: 14,
+								className: "text-fg-muted"
+							}),
+							/* @__PURE__ */ i("span", {
+								className: "sr-only",
+								children: "to"
+							}),
+							e.to.name
+						] })]
+					}),
+					e.text && /* @__PURE__ */ i("p", {
+						className: "m-0 text-fg-muted",
+						children: e.text
+					}),
+					/* @__PURE__ */ a("p", {
+						className: "m-0 flex items-center gap-1.5 text-xs text-fg-muted",
+						children: [/* @__PURE__ */ i("time", {
+							dateTime: e.dateTime,
+							children: e.time
+						}), e.source && /* @__PURE__ */ a(r, { children: [
+							/* @__PURE__ */ i("span", {
+								"aria-hidden": "true",
+								children: "·"
+							}),
+							/* @__PURE__ */ i(t, {
+								name: e.source.icon,
+								size: 14
+							}),
+							e.source.label
+						] })]
+					})
+				]
+			})]
+		}, e.id))
+	});
+}
+function g({ items: t, color: r = "var(--kf-primary)", className: o, "aria-label": s }) {
+	let c = Math.max(1, ...t.map((e) => e.value));
+	return /* @__PURE__ */ i("ol", {
+		"aria-label": s,
+		className: e("m-0 grid list-none gap-2.5 p-0 font-sans text-sm", o),
+		children: t.map((t, o) => /* @__PURE__ */ a("li", {
+			className: "grid grid-cols-[1.5rem_auto_minmax(0,1fr)_auto] items-center gap-3",
+			children: [
+				/* @__PURE__ */ i("span", {
+					className: e("text-right font-bold tabular-nums", o < 3 ? "text-fg" : "text-fg-muted"),
+					children: o + 1
+				}),
+				/* @__PURE__ */ i(n, {
+					name: t.name,
+					src: t.src,
+					size: "xs",
+					decorative: !0
+				}),
+				/* @__PURE__ */ a("span", {
+					className: "grid min-w-0 gap-1",
+					children: [/* @__PURE__ */ i("span", {
+						className: "truncate font-medium text-fg",
+						children: t.name
+					}), /* @__PURE__ */ i("span", {
+						"aria-hidden": "true",
+						className: "h-1.5 rounded-full bg-surface-muted",
+						children: /* @__PURE__ */ i("span", {
+							className: "block h-full rounded-full",
+							style: {
+								width: `${t.value / c * 100}%`,
+								background: r
+							}
+						})
+					})]
+				}),
+				/* @__PURE__ */ i("span", {
+					className: "font-semibold text-fg tabular-nums",
+					children: t.display ?? t.value
+				})
+			]
+		}, t.id))
+	});
+}
+function _({ series: t, rows: n, format: r = String, className: o }) {
+	return /* @__PURE__ */ a("div", {
+		className: e("grid gap-4 font-sans text-sm", o),
+		children: [/* @__PURE__ */ i(l, { items: t.map((e) => ({
+			label: e.label,
+			color: e.color
+		})) }), /* @__PURE__ */ i("ul", {
+			className: "m-0 grid list-none gap-3 p-0",
+			children: n.map((e) => {
+				let n = t.reduce((t, n) => t + (e.values[n.key] ?? 0), 0);
+				return /* @__PURE__ */ a("li", {
+					className: "grid gap-1.5",
+					children: [
+						/* @__PURE__ */ a("div", {
+							className: "flex items-baseline justify-between gap-3",
+							children: [/* @__PURE__ */ i("span", {
+								className: "font-medium text-fg",
+								children: e.label
+							}), /* @__PURE__ */ i("span", {
+								className: "text-fg-muted tabular-nums",
+								children: r(n)
+							})]
+						}),
+						/* @__PURE__ */ i("div", {
+							"aria-hidden": "true",
+							className: "flex h-2.5 gap-0.5 overflow-hidden rounded-full bg-surface-muted",
+							children: t.map((t) => e.values[t.key] ? /* @__PURE__ */ i("span", { style: {
+								width: `${(e.values[t.key] ?? 0) / Math.max(n, 1) * 100}%`,
+								background: t.color
+							} }, t.key) : null)
+						}),
+						/* @__PURE__ */ i("span", {
+							className: "sr-only",
+							children: t.map((t) => `${t.label}: ${r(e.values[t.key] ?? 0)}`).join(", ")
+						})
+					]
+				}, e.label);
+			})
+		})]
+	});
+}
+//#endregion
+export { h as ActivityFeed, u as ChipList, g as RankedList, _ as SegmentedBar, f as SensitiveProvider, p as SensitiveToggle, m as SensitiveValue, l as StatusLegend };
+
+//# sourceMappingURL=insights.js.map

package/dist/data-display/insights.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"insights.js","names":["_Fragment","StatusLegend","label","cx","className","items","i","ChipList","open","setOpen","useState","shown","max","hidden","chip","o","labels","SensitiveContext","createContext","SensitiveProvider","revealed","setRevealed","defaultRevealed","SensitiveToggle","ctx","useContext","Icon","SensitiveValue","revealedProp","chars","children","hiddenLabel","ActivityFeed","columns","Avatar","a","Fragment","RankedList","n","color","SegmentedBar","series","s","rows","total","r","format"],"sources":["../../src/data-display/insights.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, useContext, useState, type ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { Icon, type IconName } from '../icon/icon';\nimport { Avatar } from './avatar';\n\n/* ---------------- StatusLegend ---------------- */\n\nexport interface LegendItem {\n  label: string;\n  /** Any CSS color, usually `var(--kf-category-N)`. */\n  color: string;\n}\n\n/** A row of colored dots with labels that explains a status or category palette (tables, calendars, charts). */\nexport function StatusLegend({\n  items,\n  label = 'Legend',\n  className,\n}: {\n  items: LegendItem[];\n  label?: string;\n  className?: string;\n}) {\n  return (\n    <ul\n      aria-label={label}\n      className={cx('m-0 flex list-none flex-wrap gap-x-4 gap-y-1.5 p-0 font-sans text-sm text-fg-muted', className)}\n    >\n      {items.map((i) => (\n        <li key={i.label} className=\"inline-flex items-center gap-1.5\">\n          <span aria-hidden=\"true\" className=\"size-2.5 rounded-full\" style={{ background: i.color }} />\n          {i.label}\n        </li>\n      ))}\n    </ul>\n  );\n}\n\n/* ---------------- ChipList ---------------- */\n\nexport interface ChipListItem {\n  label: string;\n  count?: number;\n}\n\nexport interface ChipListProps {\n  items: ChipListItem[];\n  /** Chips shown before \"+N\". */\n  max?: number;\n  labels?: { more?: (n: number) => string; less?: string };\n  className?: string;\n}\n\n/** Read-only chips with counts that collapse into \"+N\" after a limit (tags in tables, AI insight topics). */\nexport function ChipList({ items, max = 3, labels = {}, className }: ChipListProps) {\n  const [open, setOpen] = useState(false);\n  const shown = open ? items : items.slice(0, max);\n  const hidden = items.length - shown.length;\n  const chip =\n    'inline-flex items-center gap-1 rounded-full bg-surface-muted px-2.5 py-0.5 text-xs font-semibold text-fg';\n  return (\n    <ul className={cx('m-0 flex list-none flex-wrap gap-1.5 p-0 font-sans', className)}>\n      {shown.map((i) => (\n        <li key={i.label} className={chip}>\n          {i.label}\n          {i.count !== undefined && <span className=\"text-fg-muted tabular-nums\">{i.count}</span>}\n        </li>\n      ))}\n      {(hidden > 0 || (open && items.length > max)) && (\n        <li>\n          <button\n            type=\"button\"\n            aria-expanded={open}\n            onClick={() => setOpen((o) => !o)}\n            className={cx(\n              chip,\n              'cursor-pointer border-0 text-link hover:bg-info-surface focus-visible:outline-3 focus-visible:outline-offset-1 focus-visible:outline-focus',\n            )}\n          >\n            {open ? (labels.less ?? 'Show less') : (labels.more?.(hidden) ?? `+${hidden}`)}\n          </button>\n        </li>\n      )}\n    </ul>\n  );\n}\n\n/* ---------------- SensitiveValue ---------------- */\n\nconst SensitiveContext = createContext<{ revealed: boolean; setRevealed: (v: boolean) => void } | null>(null);\n\n/** Holds the page-level \"Show amounts\" state for every `SensitiveValue` inside it. Hidden by default. */\nexport function SensitiveProvider({\n  children,\n  defaultRevealed = false,\n}: {\n  children: ReactNode;\n  defaultRevealed?: boolean;\n}) {\n  const [revealed, setRevealed] = useState(defaultRevealed);\n  return <SensitiveContext.Provider value={{ revealed, setRevealed }}>{children}</SensitiveContext.Provider>;\n}\n\n/** The \"Show amounts / Hide amounts\" toggle for a `SensitiveProvider`. */\nexport function SensitiveToggle({\n  labels = {},\n  className,\n}: {\n  labels?: { show?: string; hide?: string };\n  className?: string;\n}) {\n  const ctx = useContext(SensitiveContext);\n  if (!ctx) return null;\n  return (\n    <button\n      type=\"button\"\n      aria-pressed={ctx.revealed}\n      onClick={() => ctx.setRevealed(!ctx.revealed)}\n      className={cx(\n        'inline-flex min-h-9 cursor-pointer items-center gap-1.5 rounded-full border border-border bg-surface px-3 font-sans text-sm font-semibold text-fg hover:bg-surface-muted',\n        'focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus pointer-coarse:min-h-11',\n        className,\n      )}\n    >\n      <Icon name={ctx.revealed ? 'eye-off' : 'eye'} size={16} />\n      {ctx.revealed ? (labels.hide ?? 'Hide amounts') : (labels.show ?? 'Show amounts')}\n    </button>\n  );\n}\n\nexport interface SensitiveValueProps {\n  /**\n   * Rendered only when revealed, so it is not in the visible page or the accessibility tree while hidden. It is a\n   * visual mask, not access control: the value is still sent to the browser. Data a viewer may not see must not be\n   * sent at all (check permissions on the server).\n   */\n  children: ReactNode;\n  /** Width of the mask in characters, so layouts do not jump when revealing (default 6). */\n  chars?: number;\n  /** Accessible text while hidden. */\n  hiddenLabel?: string;\n  /** Without a provider: controlled visibility. */\n  revealed?: boolean;\n  className?: string;\n}\n\n/** A masked value (\"••••\") that a page-level toggle reveals (salaries, revenue, balances). */\nexport function SensitiveValue({\n  children,\n  chars = 6,\n  hiddenLabel = 'Hidden',\n  revealed: revealedProp,\n  className,\n}: SensitiveValueProps) {\n  const ctx = useContext(SensitiveContext);\n  const revealed = revealedProp ?? ctx?.revealed ?? false;\n  return (\n    <span className={cx('inline-block tabular-nums', className)} style={{ minWidth: `${chars}ch` }}>\n      {revealed ? (\n        children\n      ) : (\n        <span role=\"img\" aria-label={hiddenLabel} className=\"tracking-widest text-fg-muted\">\n          {'•'.repeat(Math.max(3, Math.min(chars, 8)))}\n        </span>\n      )}\n    </span>\n  );\n}\n\n/* ---------------- ActivityFeed ---------------- */\n\nexport interface ActivityPerson {\n  name: string;\n  src?: string;\n}\n\nexport interface ActivityItem {\n  id: string;\n  from: ActivityPerson;\n  /** The receiver (\"A → B\"); omit for one-person events. */\n  to?: ActivityPerson;\n  /** What happened or why (\"for helping with the March close\"). */\n  text?: ReactNode;\n  /** Relative time to show (\"2 h ago\") and the exact time for `<time>`. */\n  time: string;\n  dateTime?: string;\n  /** Where it came from (Slack, the web app…). */\n  source?: { icon: IconName; label: string };\n}\n\n/** A list of events: \"A → B\", a reason and a relative time with its source (kudos, audit log, notifications). */\nexport function ActivityFeed({\n  items,\n  columns = 1,\n  className,\n  'aria-label': label,\n}: {\n  items: ActivityItem[];\n  columns?: 1 | 2;\n  className?: string;\n  'aria-label'?: string;\n}) {\n  return (\n    <ol\n      aria-label={label}\n      className={cx('m-0 grid list-none gap-3 p-0 font-sans', columns === 2 && 'md:grid-cols-2', className)}\n    >\n      {items.map((a) => (\n        <li key={a.id} className=\"flex gap-3 rounded-md border border-border bg-surface p-3\">\n          <Avatar name={a.from.name} src={a.from.src} size=\"sm\" decorative />\n          <div className=\"grid min-w-0 flex-1 gap-1 text-sm\">\n            <p className=\"m-0 flex flex-wrap items-center gap-1.5 font-semibold text-fg\">\n              {a.from.name}\n              {a.to && (\n                <>\n                  <Icon name=\"arrow-right\" size={14} className=\"text-fg-muted\" />\n                  <span className=\"sr-only\">to</span>\n                  {a.to.name}\n                </>\n              )}\n            </p>\n            {a.text && <p className=\"m-0 text-fg-muted\">{a.text}</p>}\n            <p className=\"m-0 flex items-center gap-1.5 text-xs text-fg-muted\">\n              <time dateTime={a.dateTime}>{a.time}</time>\n              {a.source && (\n                <>\n                  <span aria-hidden=\"true\">·</span>\n                  <Icon name={a.source.icon} size={14} />\n                  {a.source.label}\n                </>\n              )}\n            </p>\n          </div>\n        </li>\n      ))}\n    </ol>\n  );\n}\n\n/* ---------------- RankedList ---------------- */\n\nexport interface RankedItem {\n  id: string;\n  name: string;\n  src?: string;\n  value: number;\n  /** Formatted value (\"13 kudos\"); defaults to the number. */\n  display?: string;\n}\n\n/** A leaderboard: rank, avatar, name, an inline bar and the value (top receivers, top plans). */\nexport function RankedList({\n  items,\n  color = 'var(--kf-primary)',\n  className,\n  'aria-label': label,\n}: {\n  items: RankedItem[];\n  color?: string;\n  className?: string;\n  'aria-label'?: string;\n}) {\n  const max = Math.max(1, ...items.map((i) => i.value));\n  return (\n    <ol aria-label={label} className={cx('m-0 grid list-none gap-2.5 p-0 font-sans text-sm', className)}>\n      {items.map((i, n) => (\n        <li key={i.id} className=\"grid grid-cols-[1.5rem_auto_minmax(0,1fr)_auto] items-center gap-3\">\n          <span className={cx('text-right font-bold tabular-nums', n < 3 ? 'text-fg' : 'text-fg-muted')}>{n + 1}</span>\n          <Avatar name={i.name} src={i.src} size=\"xs\" decorative />\n          <span className=\"grid min-w-0 gap-1\">\n            <span className=\"truncate font-medium text-fg\">{i.name}</span>\n            <span aria-hidden=\"true\" className=\"h-1.5 rounded-full bg-surface-muted\">\n              <span\n                className=\"block h-full rounded-full\"\n                style={{ width: `${(i.value / max) * 100}%`, background: color }}\n              />\n            </span>\n          </span>\n          <span className=\"font-semibold text-fg tabular-nums\">{i.display ?? i.value}</span>\n        </li>\n      ))}\n    </ol>\n  );\n}\n\n/* ---------------- SegmentedBar ---------------- */\n\nexport interface BarSeries {\n  key: string;\n  label: string;\n  color: string;\n}\n\nexport interface SegmentedBarRow {\n  label: string;\n  values: Record<string, number>;\n}\n\n/**\n * One bar per row split into colored segments, with one legend (usage by type, evidence by month, budget split).\n * Each row also states its values as text for screen readers.\n */\nexport function SegmentedBar({\n  series,\n  rows,\n  format = String,\n  className,\n}: {\n  series: BarSeries[];\n  rows: SegmentedBarRow[];\n  format?: (n: number) => string;\n  className?: string;\n}) {\n  return (\n    <div className={cx('grid gap-4 font-sans text-sm', className)}>\n      <StatusLegend items={series.map((s) => ({ label: s.label, color: s.color }))} />\n      <ul className=\"m-0 grid list-none gap-3 p-0\">\n        {rows.map((r) => {\n          const total = series.reduce((t, s) => t + (r.values[s.key] ?? 0), 0);\n          return (\n            <li key={r.label} className=\"grid gap-1.5\">\n              <div className=\"flex items-baseline justify-between gap-3\">\n                <span className=\"font-medium text-fg\">{r.label}</span>\n                <span className=\"text-fg-muted tabular-nums\">{format(total)}</span>\n              </div>\n              <div aria-hidden=\"true\" className=\"flex h-2.5 gap-0.5 overflow-hidden rounded-full bg-surface-muted\">\n                {series.map((s) =>\n                  r.values[s.key] ? (\n                    <span\n                      key={s.key}\n                      style={{ width: `${((r.values[s.key] ?? 0) / Math.max(total, 1)) * 100}%`, background: s.color }}\n                    />\n                  ) : null,\n                )}\n              </div>\n              <span className=\"sr-only\">\n                {series.map((s) => `${s.label}: ${format(r.values[s.key] ?? 0)}`).join(', ')}\n              </span>\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAgBA,SAAgBC,EAAa,EAC3B,UACA,WAAQ,UACR,gBAKC;CACD,OACE,kBAAC,MAAD;EACE,cAAYC;EACZ,WAAWC,EAAG,sFAAsFC,CAAS;EAE5G,UAAAC,EAAM,KAAK,MACV,kBAAC,MAAD;GAAkB,WAAU;GAA5B,UAAA,CACE,kBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;IAAwB,OAAO,EAAE,YAAYC,EAAE,MAAM;GAAI,CAAA,GAC3FA,EAAE,KACD;EAHK,GAAAA,EAAE,KAGP,CACL;CACC,CAAA;AAER;AAkBA,SAAgBC,EAAS,EAAE,UAAO,SAAM,GAAG,YAAS,CAAC,GAAG,gBAA4B;CAClF,IAAM,CAACC,GAAMC,KAAWC,EAAS,EAAK,GAChCC,IAAQH,IAAOH,IAAQA,EAAM,MAAM,GAAGO,CAAG,GACzCC,IAASR,EAAM,SAASM,EAAM,QAC9BG,IACJ;CACF,OACE,kBAAC,MAAD;EAAI,WAAWX,EAAG,sDAAsDC,CAAS;EAAjF,UAAA,CACGO,EAAM,KAAK,MACV,kBAAC,MAAD;GAAkB,WAAWG;GAA7B,UAAA,CACGR,EAAE,OACFA,EAAE,UAAU,KAAA,KAAa,kBAAC,QAAD;IAAM,WAAU;IAA8B,UAAAA,EAAE;GAAY,CAAA,CACpF;EAHK,GAAAA,EAAE,KAGP,CACL,IACCO,IAAS,KAAML,KAAQH,EAAM,SAASO,MACtC,kBAAC,MAAD,EAAA,UACE,kBAAC,UAAD;GACE,MAAK;GACL,iBAAeJ;GACf,eAAeC,GAAS,MAAM,CAACM,CAAC;GAChC,WAAWZ,EACTW,GACA,4IACF;GAEC,UAAAN,IAAQQ,EAAO,QAAQ,cAAgBA,EAAO,OAAOH,CAAM,KAAK,IAAIA;EAC/D,CAAA,EACN,CAAA,CAEJ;;AAER;AAIA,IAAMI,IAAmBC,EAA+E,IAAI;AAG5G,SAAgBC,EAAkB,EAChC,aACA,qBAAkB,MAIjB;CACD,IAAM,CAACC,GAAUC,KAAeX,EAASY,CAAe;CACxD,OAAO,kBAACL,EAAiB,UAAlB;EAA2B,OAAO;GAAE;GAAU;EAAY;EAAI;CAAoC,CAAA;AAC3G;AAGA,SAAgBM,EAAgB,EAC9B,YAAS,CAAC,GACV,gBAIC;CACD,IAAMC,IAAMC,EAAWR,CAAgB;CAEvC,OADKO,IAEH,kBAAC,UAAD;EACE,MAAK;EACL,gBAAcA,EAAI;EAClB,eAAeA,EAAI,YAAY,CAACA,EAAI,QAAQ;EAC5C,WAAWrB,EACT,4KACA,8GACAC,CACF;EARF,UAAA,CAUE,kBAACsB,GAAD;GAAM,MAAMF,EAAI,WAAW,YAAY;GAAO,MAAM;EAAK,CAAA,GACxDA,EAAI,WAAYR,EAAO,QAAQ,iBAAmBA,EAAO,QAAQ,cAC5D;C,KAdO;AAgBnB;AAmBA,SAAgBW,EAAe,EAC7B,aACA,WAAQ,GACR,iBAAc,UACd,UAAUC,GACV,gBACsB;CACtB,IAAMJ,IAAMC,EAAWR,CAAgB,GACjCG,IAAWQ,KAAgBJ,GAAK,YAAY;CAClD,OACE,kBAAC,QAAD;EAAM,WAAWrB,EAAG,6BAA6BC,CAAS;EAAG,OAAO,EAAE,UAAU,GAAGyB,EAAM,IAAI;EAC1F,UAAAT,IACCU,IAEA,kBAAC,QAAD;GAAM,MAAK;GAAM,cAAYC;GAAa,WAAU;GACjD,UAAA,IAAI,OAAO,KAAK,IAAI,GAAG,KAAK,IAAIF,GAAO,CAAC,CAAC,CAAC;EACvC,CAAA;CAEJ,CAAA;AAEV;AAwBA,SAAgBG,EAAa,EAC3B,UACA,aAAU,GACV,cACA,cAAc9B,KAMb;CACD,OACE,kBAAC,MAAD;EACE,cAAYA;EACZ,WAAWC,EAAG,0CAA0C8B,MAAY,KAAK,kBAAkB7B,CAAS;EAEnG,UAAAC,EAAM,KAAK,MACV,kBAAC,MAAD;GAAe,WAAU;GAAzB,UAAA,CACE,kBAAC6B,GAAD;IAAQ,MAAMC,EAAE,KAAK;IAAM,KAAKA,EAAE,KAAK;IAAK,MAAK;IAAK,YAAA;GAAY,CAAA,GAClE,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,kBAAC,KAAD;MAAG,WAAU;MAAb,UAAA,CACGA,EAAE,KAAK,MACPA,EAAE,MACD,kBAAAnC,GAAA,EAAA,UAAA;OACE,kBAAC0B,GAAD;QAAM,MAAK;QAAc,MAAM;QAAI,WAAU;OAAiB,CAAA;OAC9D,kBAAC,QAAD;QAAM,WAAU;QAAU,UAAA;OAAQ,CAAA;OACjCS,EAAE,GAAG;MACN,EAAA,CAAA,CAEH;;KACFA,EAAE,QAAQ,kBAAC,KAAD;MAAG,WAAU;MAAqB,UAAAA,EAAE;KAAQ,CAAA;KACvD,kBAAC,KAAD;MAAG,WAAU;MAAb,UAAA,CACE,kBAAC,QAAD;OAAM,UAAUA,EAAE;OAAW,UAAAA,EAAE;MAAW,CAAA,GACzCA,EAAE,UACD,kBAAAnC,GAAA,EAAA,UAAA;OACE,kBAAC,QAAD;QAAM,eAAY;QAAO,UAAA;OAAO,CAAA;OAChC,kBAAC0B,GAAD;QAAM,MAAMS,EAAE,OAAO;QAAM,MAAM;OAAK,CAAA;OACrCA,EAAE,OAAO;MACV,EAAA,CAAA,CAEH;;IACA;GACH,CAAA,CAAA;EAzBK,GAAAA,EAAE,EAyBP,CACL;CACC,CAAA;AAER;AAcA,SAAgBE,EAAW,EACzB,UACA,WAAQ,qBACR,cACA,cAAcnC,KAMb;CACD,IAAMU,IAAM,KAAK,IAAI,GAAG,GAAGP,EAAM,KAAK,MAAMC,EAAE,KAAK,CAAC;CACpD,OACE,kBAAC,MAAD;EAAI,cAAYJ;EAAO,WAAWC,EAAG,oDAAoDC,CAAS;EAC/F,UAAAC,EAAM,KAAK,GAAG,MACb,kBAAC,MAAD;GAAe,WAAU;GAAzB,UAAA;IACE,kBAAC,QAAD;KAAM,WAAWF,EAAG,qCAAqCmC,IAAI,IAAI,YAAY,eAAe;KAAI,UAAAA,IAAI;IAAQ,CAAA;IAC5G,kBAACJ,GAAD;KAAQ,MAAM5B,EAAE;KAAM,KAAKA,EAAE;KAAK,MAAK;KAAK,YAAA;IAAY,CAAA;IACxD,kBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACE,kBAAC,QAAD;MAAM,WAAU;MAAgC,UAAAA,EAAE;KAAW,CAAA,GAC7D,kBAAC,QAAD;MAAM,eAAY;MAAO,WAAU;MACjC,UAAA,kBAAC,QAAD;OACE,WAAU;OACV,OAAO;QAAE,OAAO,GAAIA,EAAE,QAAQM,IAAO,IAAI;QAAI,YAAY2B;OAAM;MAChE,CAAA;KACG,CAAA,CACF;;IACN,kBAAC,QAAD;KAAM,WAAU;KAAsC,UAAAjC,EAAE,WAAWA,EAAE;IAAY,CAAA;GAC/E;EAbK,GAAAA,EAAE,EAaP,CACL;CACC,CAAA;AAER;AAmBA,SAAgBkC,EAAa,EAC3B,WACA,SACA,YAAS,QACT,gBAMC;CACD,OACE,kBAAC,OAAD;EAAK,WAAWrC,EAAG,gCAAgCC,CAAS;EAA5D,UAAA,CACE,kBAACH,GAAD,EAAc,OAAOwC,EAAO,KAAK,OAAO;GAAE,OAAOC,EAAE;GAAO,OAAOA,EAAE;EAAM,EAAE,EAAI,CAAA,GAC/E,kBAAC,MAAD;GAAI,WAAU;GACX,UAAAC,EAAK,KAAK,MAAM;IACf,IAAMC,IAAQH,EAAO,QAAQ,GAAG,MAAM,KAAKI,EAAE,OAAOH,EAAE,QAAQ,IAAI,CAAC;IACnE,OACE,kBAAC,MAAD;KAAkB,WAAU;KAA5B,UAAA;MACE,kBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACE,kBAAC,QAAD;QAAM,WAAU;QAAuB,UAAAG,EAAE;OAAY,CAAA,GACrD,kBAAC,QAAD;QAAM,WAAU;QAA8B,UAAAC,EAAOF,CAAK;OAAQ,CAAA,CAC/D;;MACL,kBAAC,OAAD;OAAK,eAAY;OAAO,WAAU;OAC/B,UAAAH,EAAO,KAAK,MACXI,EAAE,OAAOH,EAAE,OACT,kBAAC,QAAD,EAEE,OAAO;QAAE,OAAO,IAAKG,EAAE,OAAOH,EAAE,QAAQ,KAAK,KAAK,IAAIE,GAAO,CAAC,IAAK,IAAI;QAAI,YAAYF,EAAE;OAAM,EAChG,GAFMA,EAAE,GAER,IACC,IACN;MACG,CAAA;MACL,kBAAC,QAAD;OAAM,WAAU;OACb,UAAAD,EAAO,KAAK,MAAM,GAAGC,EAAE,MAAM,IAAII,EAAOD,EAAE,OAAOH,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,IAAI;MACvE,CAAA;KACJ;IAlBK,GAAAG,EAAE,KAkBP;GAER,CAAC;EACC,CAAA,CACD;;AAET"}