@corensystem/coren-ui 1.0.0-next.20260924.75108.887a9c2

package/dist/tree-list.mjs

@@ -0,0 +1,95 @@
+import { cn } from "@corensystem/coren-utils";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/tree-list.tsx
+/** Hierarchical tree list component for nested data. */
+const TreeList = React.forwardRef(({ className, items, selectedId, expandedIds: controlledExpandedIds, onSelect, onExpand, defaultExpandedIds = [], multiSelect = false, selectedIds = [], indentSize = 20, showLines = false, ...props }, ref) => {
+	const [internalExpandedIds, setInternalExpandedIds] = React.useState(defaultExpandedIds);
+	const expandedIds = controlledExpandedIds ?? internalExpandedIds;
+	const toggleExpand = (id) => {
+		const newExpandedIds = expandedIds.includes(id) ? expandedIds.filter((eid) => eid !== id) : [...expandedIds, id];
+		if (controlledExpandedIds === void 0) setInternalExpandedIds(newExpandedIds);
+		onExpand?.(newExpandedIds);
+	};
+	const renderItem = (item, level = 0) => {
+		const hasChildren = item.children && item.children.length > 0;
+		const isExpanded = expandedIds.includes(item.id);
+		const isSelected = multiSelect ? selectedIds.includes(item.id) : selectedId === item.id;
+		const indent = level * indentSize;
+		return /* @__PURE__ */ jsxs("div", {
+			className: "wwc:relative",
+			children: [
+				showLines && level > 0 && /* @__PURE__ */ jsx("div", {
+					className: "wwc:absolute wwc:top-0 wwc:bottom-0 wwc:border-l wwc:border-border",
+					style: { left: `${indent - indentSize / 2}px` }
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					role: "treeitem",
+					"aria-selected": isSelected,
+					"aria-expanded": hasChildren ? isExpanded : void 0,
+					"aria-disabled": item.disabled,
+					tabIndex: item.disabled ? -1 : 0,
+					className: cn("wwc:flex wwc:items-center wwc:gap-1 wwc:py-1 wwc:pr-2 wwc:rounded-md wwc:cursor-pointer wwc:transition-colors", "wwc:focus-visible:outline-none wwc:focus-visible:ring-1 wwc:focus-visible:ring-ring", isSelected ? "wwc:bg-accent wwc:text-accent-foreground" : "hover:wwc:bg-accent/50", item.disabled && "wwc:opacity-50 wwc:cursor-not-allowed"),
+					style: { paddingLeft: `${indent + 4}px` },
+					onClick: () => {
+						if (item.disabled) return;
+						if (hasChildren) toggleExpand(item.id);
+						onSelect?.(item.id, item);
+					},
+					onKeyDown: (e) => {
+						if (item.disabled) return;
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+							if (hasChildren) toggleExpand(item.id);
+							onSelect?.(item.id, item);
+						}
+						if (e.key === "ArrowRight" && hasChildren && !isExpanded) {
+							e.preventDefault();
+							toggleExpand(item.id);
+						}
+						if (e.key === "ArrowLeft" && hasChildren && isExpanded) {
+							e.preventDefault();
+							toggleExpand(item.id);
+						}
+					},
+					children: [
+						hasChildren ? /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: (e) => {
+								e.stopPropagation();
+								toggleExpand(item.id);
+							},
+							className: "wwc:p-0.5 wwc:rounded hover:wwc:bg-accent",
+							children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "wwc:h-4 wwc:w-4 wwc:text-muted-foreground" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "wwc:h-4 wwc:w-4 wwc:text-muted-foreground" })
+						}) : /* @__PURE__ */ jsx("span", { className: "wwc:w-5" }),
+						item.icon && /* @__PURE__ */ jsx("span", {
+							className: "wwc:flex-shrink-0",
+							children: item.icon
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "wwc:flex-1 wwc:truncate wwc:text-sm",
+							children: item.label
+						})
+					]
+				}),
+				hasChildren && isExpanded && /* @__PURE__ */ jsx("div", {
+					role: "group",
+					children: item.children.map((child) => renderItem(child, level + 1))
+				})
+			]
+		}, item.id);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		role: "tree",
+		className: cn("wwc:space-y-0.5", className),
+		...props,
+		children: items.map((item) => renderItem(item))
+	});
+});
+TreeList.displayName = "TreeList";
+//#endregion
+export { TreeList };
+
+//# sourceMappingURL=tree-list.mjs.map

package/dist/tree-list.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-list.mjs","names":[],"sources":["../src/tree-list.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {ChevronRight, ChevronDown} from \"lucide-react\";\nimport * as React from \"react\";\n\nexport interface TreeListItem {\n\tid: string;\n\tlabel: React.ReactNode;\n\ticon?: React.ReactNode;\n\tchildren?: TreeListItem[];\n\tdisabled?: boolean;\n\t/** Additional data attached to the item */\n\tdata?: unknown;\n}\n\nexport interface TreeListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n\t/** Tree items */\n\titems: TreeListItem[];\n\t/** Currently selected item ID */\n\tselectedId?: string;\n\t/** Currently expanded item IDs */\n\texpandedIds?: string[];\n\t/** Callback when selection changes */\n\tonSelect?: (id: string, item: TreeListItem) => void;\n\t/** Callback when expansion changes */\n\tonExpand?: (expandedIds: string[]) => void;\n\t/** Default expanded state */\n\tdefaultExpandedIds?: string[];\n\t/** Allow multiple selection */\n\tmultiSelect?: boolean;\n\t/** Selected item IDs (for multiSelect) */\n\tselectedIds?: string[];\n\t/** Indent per level in pixels */\n\tindentSize?: number;\n\t/** Show connecting lines */\n\tshowLines?: boolean;\n}\n\n/** Hierarchical tree list component for nested data. */\nconst TreeList = React.forwardRef<HTMLDivElement, TreeListProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\titems,\n\t\t\tselectedId,\n\t\t\texpandedIds: controlledExpandedIds,\n\t\t\tonSelect,\n\t\t\tonExpand,\n\t\t\tdefaultExpandedIds = [],\n\t\t\tmultiSelect = false,\n\t\t\tselectedIds = [],\n\t\t\tindentSize = 20,\n\t\t\tshowLines = false,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst [internalExpandedIds, setInternalExpandedIds] = React.useState<string[]>(defaultExpandedIds);\n\t\tconst expandedIds = controlledExpandedIds ?? internalExpandedIds;\n\n\t\tconst toggleExpand = (id: string) => {\n\t\t\tconst newExpandedIds = expandedIds.includes(id) ? expandedIds.filter((eid) => eid !== id) : [...expandedIds, id];\n\n\t\t\tif (controlledExpandedIds === undefined) {\n\t\t\t\tsetInternalExpandedIds(newExpandedIds);\n\t\t\t}\n\t\t\tonExpand?.(newExpandedIds);\n\t\t};\n\n\t\tconst renderItem = (item: TreeListItem, level: number = 0) => {\n\t\t\tconst hasChildren = item.children && item.children.length > 0;\n\t\t\tconst isExpanded = expandedIds.includes(item.id);\n\t\t\tconst isSelected = multiSelect ? selectedIds.includes(item.id) : selectedId === item.id;\n\t\t\tconst indent = level * indentSize;\n\n\t\t\treturn (\n\t\t\t\t<div key={item.id} className=\"wwc:relative\">\n\t\t\t\t\t{showLines && level > 0 && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"wwc:absolute wwc:top-0 wwc:bottom-0 wwc:border-l wwc:border-border\"\n\t\t\t\t\t\t\tstyle={{left: `${indent - indentSize / 2}px`}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t<div\n\t\t\t\t\t\trole=\"treeitem\"\n\t\t\t\t\t\taria-selected={isSelected}\n\t\t\t\t\t\taria-expanded={hasChildren ? isExpanded : undefined}\n\t\t\t\t\t\taria-disabled={item.disabled}\n\t\t\t\t\t\ttabIndex={item.disabled ? -1 : 0}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"wwc:flex wwc:items-center wwc:gap-1 wwc:py-1 wwc:pr-2 wwc:rounded-md wwc:cursor-pointer wwc:transition-colors\",\n\t\t\t\t\t\t\t\"wwc:focus-visible:outline-none wwc:focus-visible:ring-1 wwc:focus-visible:ring-ring\",\n\t\t\t\t\t\t\tisSelected ? \"wwc:bg-accent wwc:text-accent-foreground\" : \"hover:wwc:bg-accent/50\",\n\t\t\t\t\t\t\titem.disabled && \"wwc:opacity-50 wwc:cursor-not-allowed\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tstyle={{paddingLeft: `${indent + 4}px`}}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (item.disabled) return;\n\t\t\t\t\t\t\tif (hasChildren) {\n\t\t\t\t\t\t\t\ttoggleExpand(item.id);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonSelect?.(item.id, item);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\tif (item.disabled) return;\n\t\t\t\t\t\t\tif (e.key === \"Enter\" || e.key === \" \") {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\tif (hasChildren) {\n\t\t\t\t\t\t\t\t\ttoggleExpand(item.id);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonSelect?.(item.id, item);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (e.key === \"ArrowRight\" && hasChildren && !isExpanded) {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\ttoggleExpand(item.id);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (e.key === \"ArrowLeft\" && hasChildren && isExpanded) {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\ttoggleExpand(item.id);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{hasChildren ? (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\t\ttoggleExpand(item.id);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tclassName=\"wwc:p-0.5 wwc:rounded hover:wwc:bg-accent\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{isExpanded ? (\n\t\t\t\t\t\t\t\t\t<ChevronDown className=\"wwc:h-4 wwc:w-4 wwc:text-muted-foreground\" />\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<ChevronRight className=\"wwc:h-4 wwc:w-4 wwc:text-muted-foreground\" />\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span className=\"wwc:w-5\" />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{item.icon && <span className=\"wwc:flex-shrink-0\">{item.icon}</span>}\n\t\t\t\t\t\t<span className=\"wwc:flex-1 wwc:truncate wwc:text-sm\">{item.label}</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t{hasChildren && isExpanded && (\n\t\t\t\t\t\t<div role=\"group\">{item.children!.map((child) => renderItem(child, level + 1))}</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t);\n\t\t};\n\n\t\treturn (\n\t\t\t<div ref={ref} role=\"tree\" className={cn(\"wwc:space-y-0.5\", className)} {...props}>\n\t\t\t\t{items.map((item) => renderItem(item))}\n\t\t\t</div>\n\t\t);\n\t},\n);\nTreeList.displayName = \"TreeList\";\n\nexport {TreeList};\n"],"mappings":"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"}

package/dist/tree-row.d.mts

@@ -0,0 +1,84 @@
+import { ReactNode } from "react";
+//#region src/tree-row.d.ts
+export interface TreeRowContentProps {
+  /** Indentation depth level (0 = root) */
+  level: number;
+  /** Whether this row has expandable children */
+  expandable?: boolean;
+  /** Whether the row is currently expanded */
+  expanded?: boolean;
+  /** Called when the chevron or label is clicked. Use for expand/collapse. */
+  onToggle?: () => void;
+  /**
+   * Whether clicking the label toggles expansion (calls `onToggle`). Default `true`. Set `false`
+   * to make only the chevron toggle, letting label/empty-space clicks fall through to the row's
+   * `onClick` instead.
+   */
+  labelTogglesExpand?: boolean;
+  /** Icon element rendered after the chevron */
+  icon?: ReactNode;
+  /** Primary label text */
+  label: string;
+  /**
+   * Long-name handling. Omit for plain end truncation (CSS ellipsis, no tooltip). Set `"end"`
+   * to add a hover tooltip with the full label when it overflows, `"middle"` to truncate the head
+   * while keeping the tail visible (good for filenames), or `"clamp"` to let the label wrap onto
+   * multiple lines up to `maxLines` and then truncate. All add a tooltip with the full label.
+   */
+  truncate?: "end" | "middle" | "clamp";
+  /** For `truncate="middle"`, how many trailing characters to always keep visible. Default 7. */
+  tailChars?: number;
+  /** For `truncate="clamp"`, the maximum number of wrapped lines before truncating. Default 3. */
+  maxLines?: number;
+  /**
+   * Whether this row is the selected one. In `truncate="clamp"` mode the selected row wraps to
+   * show its full name while the others fall back to single-line middle truncation.
+   */
+  selected?: boolean;
+  /** Font weight class (defaults based on level) */
+  fontWeight?: "wwc:font-normal" | "wwc:font-medium" | "wwc:font-semibold" | "wwc:font-bold";
+  /** Custom chevron color class override */
+  chevronClassName?: string;
+  /** Custom label text class override */
+  textClassName?: string;
+  /** Custom class for the leading icon wrapper. */
+  iconClassName?: string;
+  /** Pixels of indent per level (default 20) */
+  indentPx?: number;
+}
+/**
+ * The inner content of a tree row: indent + chevron + icon + label.
+ * Use this when you need to embed tree-row content inside a custom container
+ * (e.g. a TableCell). For a standalone clickable row, use TreeRow instead.
+ */
+export declare function TreeRowContent({ level, expandable, expanded, onToggle, labelTogglesExpand, truncate, tailChars, maxLines, selected, icon, label, fontWeight, chevronClassName, textClassName, iconClassName, indentPx }: TreeRowContentProps): import("react/jsx-runtime").JSX.Element;
+export interface TreeRowProps extends TreeRowContentProps {
+  /** Unique identifier for this row */
+  id: string;
+  /** Called when the row body (empty space) is clicked. Use for selection. */
+  onClick?: () => void;
+  /** Trailing content (badges, counts, etc.) */
+  trailing?: ReactNode;
+  /** Visual style variant */
+  variant?: "default" | "active" | "selected" | "neutral-selected" | "muted";
+  /** Left border accent color class from your own CSS (e.g. "border-primary") */
+  accentBorder?: string;
+  /** Custom background class override */
+  bgClassName?: string;
+  /**
+   * Position within a contiguous group of selected rows. When set, adjacent selected rows
+   * collapse their borders and rounding so the group reads as a single block.
+   * - "first": rounded top, square bottom
+   * - "middle": no rounding, no top border
+   * - "last": square top, rounded bottom, no top border
+   */
+  groupPosition?: "first" | "middle" | "last";
+}
+/**
+ * A standalone clickable hierarchical row with chevron toggle, icon, label, and optional trailing
+ * content. Use for building expandable tree-style lists; embed `TreeRowContent` inside custom
+ * containers (e.g. table cells) instead.
+ */
+export declare function TreeRow({ level, expandable, expanded, onClick, onToggle, labelTogglesExpand, truncate, tailChars, maxLines, icon, label, trailing, variant, accentBorder, bgClassName, textClassName, iconClassName, fontWeight, chevronClassName, indentPx, groupPosition }: TreeRowProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//# sourceMappingURL=tree-row.d.mts.map

package/dist/tree-row.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-row.d.mts","names":[],"sources":["../src/tree-row.tsx"],"mappings":";;iBAmBiB;;EAEhB;;EAEA;;EAEA;;EAEA;;;;;;EAMA;;EAEA,OAAO;;EAEP;;;;;;;EAOA;;EAEA;;EAEA;;;;;EAKA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;;;;;;wBAQe,iBACf,OACA,YACA,UACA,UACA,oBACA,UACA,WACA,UACA,UACA,MACA,OACA,YACA,kBACA,eACA,eACA,YACE,kDAAmB,IAAA;iBAiGL,qBAAqB;;EAErC;;EAEA;;EAEA,WAAW;;EAEX;;EAEA;;EAEA;;;;;;;;EAQA;;;;;;;wBAQe,UACf,OACA,YACA,UACA,SACA,UACA,oBACA,UACA,WACA,UACA,MACA,OACA,UACA,SACA,cACA,aACA,eACA,eACA,YACA,kBACA,UACA,iBACE,2CAAY,IAAA"}

package/dist/tree-row.mjs

@@ -0,0 +1,150 @@
+import { cn } from "@corensystem/coren-utils";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/tree-row.tsx
+/** Middle-truncates a string: truncates the head with an ellipsis, always keeping the last `tail` chars. */
+function MiddleLabel({ text, tail }) {
+	if (text.length <= tail) return /* @__PURE__ */ jsx(Fragment$1, { children: text });
+	return /* @__PURE__ */ jsxs("span", {
+		className: "wwc:flex wwc:min-w-0 wwc:items-center wwc:overflow-hidden",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "wwc:min-w-0 wwc:overflow-hidden wwc:text-ellipsis wwc:whitespace-pre",
+			children: text.slice(0, -tail)
+		}), /* @__PURE__ */ jsx("span", {
+			className: "wwc:shrink-0 wwc:whitespace-pre",
+			children: text.slice(-tail)
+		})]
+	});
+}
+/**
+* The inner content of a tree row: indent + chevron + icon + label.
+* Use this when you need to embed tree-row content inside a custom container
+* (e.g. a TableCell). For a standalone clickable row, use TreeRow instead.
+*/
+function TreeRowContent({ level, expandable, expanded, onToggle, labelTogglesExpand = true, truncate, tailChars = 7, maxLines = 3, selected = false, icon, label, fontWeight, chevronClassName, textClassName, iconClassName, indentPx = 20 }) {
+	const resolvedFontWeight = fontWeight ?? (level === 0 ? "wwc:font-semibold" : "wwc:font-medium");
+	const handleToggle = (e) => {
+		e.stopPropagation();
+		onToggle?.();
+	};
+	const usesClamp = truncate === "clamp" && selected;
+	const usesMiddle = truncate === "middle" || truncate === "clamp" && !selected;
+	const tooltipEnabled = truncate !== void 0;
+	const labelRef = useRef(null);
+	const [overflowing, setOverflowing] = useState(false);
+	useLayoutEffect(() => {
+		if (!tooltipEnabled || usesMiddle) return;
+		const el = labelRef.current;
+		if (!el) return;
+		const check = () => setOverflowing(usesClamp ? el.scrollHeight > el.clientHeight + 1 : el.scrollWidth > el.clientWidth + 1);
+		check();
+		const observer = new ResizeObserver(check);
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [
+		tooltipEnabled,
+		usesMiddle,
+		usesClamp,
+		label,
+		maxLines
+	]);
+	const title = tooltipEnabled ? usesMiddle ? label.length > tailChars ? label : void 0 : overflowing ? label : void 0 : void 0;
+	const labelClass = cn("wwc:min-w-0", usesClamp ? "wwc:break-words" : usesMiddle ? "wwc:flex wwc:items-center wwc:overflow-hidden" : "wwc:truncate", resolvedFontWeight, textClassName);
+	const labelStyle = usesClamp ? {
+		display: "-webkit-box",
+		WebkitBoxOrient: "vertical",
+		WebkitLineClamp: maxLines,
+		overflow: "hidden"
+	} : void 0;
+	const labelInner = usesMiddle ? /* @__PURE__ */ jsx(MiddleLabel, {
+		text: label,
+		tail: tailChars
+	}) : label;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("wwc:flex wwc:min-w-0 wwc:gap-1.5", usesClamp ? "wwc:items-start" : "wwc:items-center"),
+		style: { paddingLeft: `${level * indentPx}px` },
+		children: [
+			expandable ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: handleToggle,
+				"aria-label": expanded ? "Collapse" : "Expand",
+				"data-treerow-toggle": "",
+				className: "wwc:flex wwc:shrink-0 wwc:items-center wwc:justify-center wwc:rounded-sm wwc:hover:bg-foreground/10",
+				children: expanded ? /* @__PURE__ */ jsx(ChevronDown, { className: cn("wwc:h-3.5 wwc:w-3.5", chevronClassName || "wwc:text-foreground") }) : /* @__PURE__ */ jsx(ChevronRight, { className: cn("wwc:h-3.5 wwc:w-3.5", chevronClassName || "wwc:text-foreground") })
+			}) : /* @__PURE__ */ jsx("span", { className: "wwc:w-3.5 wwc:shrink-0" }),
+			icon && /* @__PURE__ */ jsx("span", {
+				className: cn("wwc:flex wwc:shrink-0 wwc:items-center", iconClassName),
+				children: icon
+			}),
+			expandable && labelTogglesExpand ? /* @__PURE__ */ jsx("button", {
+				ref: labelRef,
+				type: "button",
+				onClick: handleToggle,
+				title,
+				style: labelStyle,
+				"data-treerow-toggle": "",
+				className: cn("wwc:text-left wwc:bg-transparent", labelClass),
+				children: labelInner
+			}) : /* @__PURE__ */ jsx("span", {
+				ref: labelRef,
+				title,
+				style: labelStyle,
+				className: labelClass,
+				children: labelInner
+			})
+		]
+	});
+}
+/**
+* A standalone clickable hierarchical row with chevron toggle, icon, label, and optional trailing
+* content. Use for building expandable tree-style lists; embed `TreeRowContent` inside custom
+* containers (e.g. table cells) instead.
+*/
+function TreeRow({ level, expandable, expanded, onClick, onToggle, labelTogglesExpand, truncate, tailChars, maxLines, icon, label, trailing, variant = "default", accentBorder, bgClassName, textClassName, iconClassName, fontWeight, chevronClassName, indentPx = 20, groupPosition }) {
+	const variantStyles = {
+		default: "wwc:hover:bg-muted/50 wwc:rounded-sm",
+		active: "wwc:bg-primary/10 wwc:rounded-sm",
+		selected: variant === "selected" && groupPosition !== void 0 ? "wwc:bg-primary/10 wwc:relative wwc:z-10" : "wwc:bg-primary/10 wwc:ring-2 wwc:ring-primary wwc:relative wwc:z-10 wwc:rounded-sm",
+		"neutral-selected": "wwc:relative wwc:z-10 wwc:rounded-sm wwc:bg-muted wwc:text-foreground wwc:hover:bg-muted/80",
+		muted: "wwc:rounded-sm"
+	};
+	const groupStyles = groupPosition === "first" ? "wwc:rounded-t-sm wwc:rounded-b-none" : groupPosition === "middle" ? "wwc:rounded-none" : groupPosition === "last" ? "wwc:rounded-b-sm wwc:rounded-t-none" : "";
+	const primary = "var(--primary)";
+	const groupShadow = groupPosition === "first" ? `0 -2px 0 ${primary}, -2px 0 0 ${primary}, 2px 0 0 ${primary}` : groupPosition === "middle" ? `-2px 0 0 ${primary}, 2px 0 0 ${primary}` : groupPosition === "last" ? `0 2px 0 ${primary}, -2px 0 0 ${primary}, 2px 0 0 ${primary}` : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "button",
+		tabIndex: 0,
+		className: cn("wwc:group wwc:relative wwc:flex wwc:w-full wwc:items-center wwc:gap-1.5 wwc:px-2 wwc:py-1.5 wwc:text-sm wwc:text-left wwc:transition-colors wwc:cursor-pointer wwc:focus-visible:outline-none wwc:focus-visible:ring-1 wwc:focus-visible:ring-ring", variantStyles[variant], groupStyles, accentBorder && `wwc:border-l-2 ${accentBorder}`, bgClassName),
+		style: groupShadow ? { boxShadow: groupShadow } : void 0,
+		onClick,
+		onKeyDown: (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				onClick?.();
+			}
+		},
+		children: [/* @__PURE__ */ jsx(TreeRowContent, {
+			level,
+			expandable,
+			expanded,
+			onToggle: onToggle ?? onClick,
+			labelTogglesExpand,
+			truncate,
+			tailChars,
+			maxLines,
+			selected: variant === "selected" || variant === "neutral-selected",
+			icon,
+			label,
+			fontWeight,
+			chevronClassName,
+			textClassName,
+			iconClassName,
+			indentPx
+		}), trailing && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", { className: "wwc:flex-1" }), trailing] })]
+	});
+}
+//#endregion
+export { TreeRow, TreeRowContent };
+
+//# sourceMappingURL=tree-row.mjs.map

package/dist/tree-row.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-row.mjs","names":[],"sources":["../src/tree-row.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {ChevronDown, ChevronRight} from \"lucide-react\";\nimport {type MouseEvent, type ReactNode, type RefObject, useLayoutEffect, useRef, useState} from \"react\";\n\n/** Middle-truncates a string: truncates the head with an ellipsis, always keeping the last `tail` chars. */\nfunction MiddleLabel({text, tail}: {text: string; tail: number}) {\n\tif (text.length <= tail) return <>{text}</>;\n\treturn (\n\t\t<span className=\"wwc:flex wwc:min-w-0 wwc:items-center wwc:overflow-hidden\">\n\t\t\t<span className=\"wwc:min-w-0 wwc:overflow-hidden wwc:text-ellipsis wwc:whitespace-pre\">\n\t\t\t\t{text.slice(0, -tail)}\n\t\t\t</span>\n\t\t\t{/* `whitespace-pre`: the split lands mid-name, and these are two flex items, so a space at the\n\t\t\t    boundary would collapse — \"Built assets\" rendered as \"Builtassets\". */}\n\t\t\t<span className=\"wwc:shrink-0 wwc:whitespace-pre\">{text.slice(-tail)}</span>\n\t\t</span>\n\t);\n}\n\nexport interface TreeRowContentProps {\n\t/** Indentation depth level (0 = root) */\n\tlevel: number;\n\t/** Whether this row has expandable children */\n\texpandable?: boolean;\n\t/** Whether the row is currently expanded */\n\texpanded?: boolean;\n\t/** Called when the chevron or label is clicked. Use for expand/collapse. */\n\tonToggle?: () => void;\n\t/**\n\t * Whether clicking the label toggles expansion (calls `onToggle`). Default `true`. Set `false`\n\t * to make only the chevron toggle, letting label/empty-space clicks fall through to the row's\n\t * `onClick` instead.\n\t */\n\tlabelTogglesExpand?: boolean;\n\t/** Icon element rendered after the chevron */\n\ticon?: ReactNode;\n\t/** Primary label text */\n\tlabel: string;\n\t/**\n\t * Long-name handling. Omit for plain end truncation (CSS ellipsis, no tooltip). Set `\"end\"`\n\t * to add a hover tooltip with the full label when it overflows, `\"middle\"` to truncate the head\n\t * while keeping the tail visible (good for filenames), or `\"clamp\"` to let the label wrap onto\n\t * multiple lines up to `maxLines` and then truncate. All add a tooltip with the full label.\n\t */\n\ttruncate?: \"end\" | \"middle\" | \"clamp\";\n\t/** For `truncate=\"middle\"`, how many trailing characters to always keep visible. Default 7. */\n\ttailChars?: number;\n\t/** For `truncate=\"clamp\"`, the maximum number of wrapped lines before truncating. Default 3. */\n\tmaxLines?: number;\n\t/**\n\t * Whether this row is the selected one. In `truncate=\"clamp\"` mode the selected row wraps to\n\t * show its full name while the others fall back to single-line middle truncation.\n\t */\n\tselected?: boolean;\n\t/** Font weight class (defaults based on level) */\n\tfontWeight?: \"wwc:font-normal\" | \"wwc:font-medium\" | \"wwc:font-semibold\" | \"wwc:font-bold\";\n\t/** Custom chevron color class override */\n\tchevronClassName?: string;\n\t/** Custom label text class override */\n\ttextClassName?: string;\n\t/** Custom class for the leading icon wrapper. */\n\ticonClassName?: string;\n\t/** Pixels of indent per level (default 20) */\n\tindentPx?: number;\n}\n\n/**\n * The inner content of a tree row: indent + chevron + icon + label.\n * Use this when you need to embed tree-row content inside a custom container\n * (e.g. a TableCell). For a standalone clickable row, use TreeRow instead.\n */\nexport function TreeRowContent({\n\tlevel,\n\texpandable,\n\texpanded,\n\tonToggle,\n\tlabelTogglesExpand = true,\n\ttruncate,\n\ttailChars = 7,\n\tmaxLines = 3,\n\tselected = false,\n\ticon,\n\tlabel,\n\tfontWeight,\n\tchevronClassName,\n\ttextClassName,\n\ticonClassName,\n\tindentPx = 20,\n}: TreeRowContentProps) {\n\tconst resolvedFontWeight = fontWeight ?? (level === 0 ? \"wwc:font-semibold\" : \"wwc:font-medium\");\n\n\tconst handleToggle = (e: MouseEvent) => {\n\t\te.stopPropagation();\n\t\tonToggle?.();\n\t};\n\n\t// \"clamp\" mode: the selected row wraps to show its full name; every other row falls back to\n\t// single-line middle truncation. \"end\"/\"middle\" behave the same for every row.\n\tconst usesClamp = truncate === \"clamp\" && selected;\n\tconst usesMiddle = truncate === \"middle\" || (truncate === \"clamp\" && !selected);\n\tconst tooltipEnabled = truncate !== undefined;\n\tconst labelRef = useRef<HTMLElement>(null);\n\tconst [overflowing, setOverflowing] = useState(false);\n\tuseLayoutEffect(() => {\n\t\tif (!tooltipEnabled || usesMiddle) return;\n\t\tconst el = labelRef.current;\n\t\tif (!el) return;\n\t\tconst check = () =>\n\t\t\tsetOverflowing(usesClamp ? el.scrollHeight > el.clientHeight + 1 : el.scrollWidth > el.clientWidth + 1);\n\t\tcheck();\n\t\tconst observer = new ResizeObserver(check);\n\t\tobserver.observe(el);\n\t\treturn () => observer.disconnect();\n\t}, [tooltipEnabled, usesMiddle, usesClamp, label, maxLines]);\n\n\tconst title = tooltipEnabled\n\t\t? usesMiddle\n\t\t\t? label.length > tailChars\n\t\t\t\t? label\n\t\t\t\t: undefined\n\t\t\t: overflowing\n\t\t\t\t? label\n\t\t\t\t: undefined\n\t\t: undefined;\n\n\tconst labelClass = cn(\n\t\t\"wwc:min-w-0\",\n\t\tusesClamp ? \"wwc:break-words\" : usesMiddle ? \"wwc:flex wwc:items-center wwc:overflow-hidden\" : \"wwc:truncate\",\n\t\tresolvedFontWeight,\n\t\ttextClassName,\n\t);\n\tconst labelStyle = usesClamp\n\t\t? ({\n\t\t\t\tdisplay: \"-webkit-box\",\n\t\t\t\tWebkitBoxOrient: \"vertical\" as const,\n\t\t\t\tWebkitLineClamp: maxLines,\n\t\t\t\toverflow: \"hidden\",\n\t\t\t} as const)\n\t\t: undefined;\n\tconst labelInner = usesMiddle ? <MiddleLabel text={label} tail={tailChars} /> : label;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"wwc:flex wwc:min-w-0 wwc:gap-1.5\", usesClamp ? \"wwc:items-start\" : \"wwc:items-center\")}\n\t\t\tstyle={{paddingLeft: `${level * indentPx}px`}}\n\t\t>\n\t\t\t{expandable ? (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tonClick={handleToggle}\n\t\t\t\t\taria-label={expanded ? \"Collapse\" : \"Expand\"}\n\t\t\t\t\tdata-treerow-toggle=\"\"\n\t\t\t\t\tclassName=\"wwc:flex wwc:shrink-0 wwc:items-center wwc:justify-center wwc:rounded-sm wwc:hover:bg-foreground/10\"\n\t\t\t\t>\n\t\t\t\t\t{expanded ? (\n\t\t\t\t\t\t<ChevronDown className={cn(\"wwc:h-3.5 wwc:w-3.5\", chevronClassName || \"wwc:text-foreground\")} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<ChevronRight className={cn(\"wwc:h-3.5 wwc:w-3.5\", chevronClassName || \"wwc:text-foreground\")} />\n\t\t\t\t\t)}\n\t\t\t\t</button>\n\t\t\t) : (\n\t\t\t\t<span className=\"wwc:w-3.5 wwc:shrink-0\" />\n\t\t\t)}\n\t\t\t{icon && <span className={cn(\"wwc:flex wwc:shrink-0 wwc:items-center\", iconClassName)}>{icon}</span>}\n\t\t\t{expandable && labelTogglesExpand ? (\n\t\t\t\t<button\n\t\t\t\t\tref={labelRef as RefObject<HTMLButtonElement>}\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tonClick={handleToggle}\n\t\t\t\t\ttitle={title}\n\t\t\t\t\tstyle={labelStyle}\n\t\t\t\t\tdata-treerow-toggle=\"\"\n\t\t\t\t\tclassName={cn(\"wwc:text-left wwc:bg-transparent\", labelClass)}\n\t\t\t\t>\n\t\t\t\t\t{labelInner}\n\t\t\t\t</button>\n\t\t\t) : (\n\t\t\t\t<span ref={labelRef as RefObject<HTMLSpanElement>} title={title} style={labelStyle} className={labelClass}>\n\t\t\t\t\t{labelInner}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nexport interface TreeRowProps extends TreeRowContentProps {\n\t/** Unique identifier for this row */\n\tid: string;\n\t/** Called when the row body (empty space) is clicked. Use for selection. */\n\tonClick?: () => void;\n\t/** Trailing content (badges, counts, etc.) */\n\ttrailing?: ReactNode;\n\t/** Visual style variant */\n\tvariant?: \"default\" | \"active\" | \"selected\" | \"neutral-selected\" | \"muted\";\n\t/** Left border accent color class from your own CSS (e.g. \"border-primary\") */\n\taccentBorder?: string;\n\t/** Custom background class override */\n\tbgClassName?: string;\n\t/**\n\t * Position within a contiguous group of selected rows. When set, adjacent selected rows\n\t * collapse their borders and rounding so the group reads as a single block.\n\t * - \"first\": rounded top, square bottom\n\t * - \"middle\": no rounding, no top border\n\t * - \"last\": square top, rounded bottom, no top border\n\t */\n\tgroupPosition?: \"first\" | \"middle\" | \"last\";\n}\n\n/**\n * A standalone clickable hierarchical row with chevron toggle, icon, label, and optional trailing\n * content. Use for building expandable tree-style lists; embed `TreeRowContent` inside custom\n * containers (e.g. table cells) instead.\n */\nexport function TreeRow({\n\tlevel,\n\texpandable,\n\texpanded,\n\tonClick,\n\tonToggle,\n\tlabelTogglesExpand,\n\ttruncate,\n\ttailChars,\n\tmaxLines,\n\ticon,\n\tlabel,\n\ttrailing,\n\tvariant = \"default\",\n\taccentBorder,\n\tbgClassName,\n\ttextClassName,\n\ticonClassName,\n\tfontWeight,\n\tchevronClassName,\n\tindentPx = 20,\n\tgroupPosition,\n}: TreeRowProps) {\n\tconst isSelectedGroup = variant === \"selected\" && groupPosition !== undefined;\n\n\tconst variantStyles = {\n\t\tdefault: \"wwc:hover:bg-muted/50 wwc:rounded-sm\",\n\t\tactive: \"wwc:bg-primary/10 wwc:rounded-sm\",\n\t\tselected: isSelectedGroup\n\t\t\t? \"wwc:bg-primary/10 wwc:relative wwc:z-10\"\n\t\t\t: \"wwc:bg-primary/10 wwc:ring-2 wwc:ring-primary wwc:relative wwc:z-10 wwc:rounded-sm\",\n\t\t\"neutral-selected\": \"wwc:relative wwc:z-10 wwc:rounded-sm wwc:bg-muted wwc:text-foreground wwc:hover:bg-muted/80\",\n\t\tmuted: \"wwc:rounded-sm\",\n\t};\n\n\tconst groupStyles =\n\t\tgroupPosition === \"first\"\n\t\t\t? \"wwc:rounded-t-sm wwc:rounded-b-none\"\n\t\t\t: groupPosition === \"middle\"\n\t\t\t\t? \"wwc:rounded-none\"\n\t\t\t\t: groupPosition === \"last\"\n\t\t\t\t\t? \"wwc:rounded-b-sm wwc:rounded-t-none\"\n\t\t\t\t\t: \"\";\n\n\t// For grouped selected rows, draw the outline with outset box-shadow so it sits\n\t// outside the layout box (no height change) and adjacent rows' side shadows touch\n\t// continuously without breaking the outline at the join.\n\tconst primary = \"var(--primary)\";\n\tconst groupShadow =\n\t\tgroupPosition === \"first\"\n\t\t\t? `0 -2px 0 ${primary}, -2px 0 0 ${primary}, 2px 0 0 ${primary}`\n\t\t\t: groupPosition === \"middle\"\n\t\t\t\t? `-2px 0 0 ${primary}, 2px 0 0 ${primary}`\n\t\t\t\t: groupPosition === \"last\"\n\t\t\t\t\t? `0 2px 0 ${primary}, -2px 0 0 ${primary}, 2px 0 0 ${primary}`\n\t\t\t\t\t: undefined;\n\n\treturn (\n\t\t<div\n\t\t\trole=\"button\"\n\t\t\ttabIndex={0}\n\t\t\tclassName={cn(\n\t\t\t\t\"wwc:group wwc:relative wwc:flex wwc:w-full wwc:items-center wwc:gap-1.5 wwc:px-2 wwc:py-1.5 wwc:text-sm wwc:text-left wwc:transition-colors wwc:cursor-pointer wwc:focus-visible:outline-none wwc:focus-visible:ring-1 wwc:focus-visible:ring-ring\",\n\t\t\t\tvariantStyles[variant],\n\t\t\t\tgroupStyles,\n\t\t\t\taccentBorder && `wwc:border-l-2 ${accentBorder}`,\n\t\t\t\tbgClassName,\n\t\t\t)}\n\t\t\tstyle={groupShadow ? {boxShadow: groupShadow} : undefined}\n\t\t\tonClick={onClick}\n\t\t\tonKeyDown={(e) => {\n\t\t\t\tif (e.key === \"Enter\" || e.key === \" \") {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\tonClick?.();\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\t<TreeRowContent\n\t\t\t\tlevel={level}\n\t\t\t\texpandable={expandable}\n\t\t\t\texpanded={expanded}\n\t\t\t\tonToggle={onToggle ?? onClick}\n\t\t\t\tlabelTogglesExpand={labelTogglesExpand}\n\t\t\t\ttruncate={truncate}\n\t\t\t\ttailChars={tailChars}\n\t\t\t\tmaxLines={maxLines}\n\t\t\t\tselected={variant === \"selected\" || variant === \"neutral-selected\"}\n\t\t\t\ticon={icon}\n\t\t\t\tlabel={label}\n\t\t\t\tfontWeight={fontWeight}\n\t\t\t\tchevronClassName={chevronClassName}\n\t\t\t\ttextClassName={textClassName}\n\t\t\t\ticonClassName={iconClassName}\n\t\t\t\tindentPx={indentPx}\n\t\t\t/>\n\t\t\t{trailing && (\n\t\t\t\t<>\n\t\t\t\t\t<span className=\"wwc:flex-1\" />\n\t\t\t\t\t{trailing}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}

package/dist/trend-chart.d.mts

@@ -0,0 +1,28 @@
+import { ChartSeriesTheme } from "./chart.mjs";
+import * as React from "react";
+import { EChartsOption } from "echarts";
+//#region src/trend-chart.d.ts
+export interface TrendChartProps {
+  /** Title shown in the grey header band. */
+  title?: React.ReactNode;
+  /** Right-aligned header slot (info icon, menu, range toggle, ...). */
+  actions?: React.ReactNode;
+  /** Headline figure rendered above the chart (e.g. the period total). */
+  value?: React.ReactNode;
+  /** Optional extra content rendered under the value (e.g. a custom legend). */
+  header?: React.ReactNode;
+  /** ECharts option for the chart (series / axes / tooltip / ...). */
+  option: EChartsOption;
+  /** Core semantic tones or chart palette indexes applied to series in order. */
+  seriesThemes?: ChartSeriesTheme[];
+  /** Chart height in px (or any CSS size). Default 240. */
+  height?: number | string;
+  className?: string;
+}
+/** A titled card wrapping a themed ECharts trend/analysis chart (line / bar) — the reusable chart tile
+ * in an analytics report. Composes the Chart (ChartContainer) primitive for theming + instance handling
+ * and the WidgetCard shell for its grey header band. */
+declare const TrendChart: React.ForwardRefExoticComponent<TrendChartProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { TrendChart };
+//# sourceMappingURL=trend-chart.d.mts.map

package/dist/trend-chart.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"trend-chart.d.mts","names":[],"sources":["../src/trend-chart.tsx"],"mappings":";;;;iBAOiB;;EAEhB,QAAQ,MAAM;;EAEd,UAAU,MAAM;;EAEhB,QAAQ,MAAM;;EAEd,SAAS,MAAM;;EAEf,QAAQ;;EAER,eAAe;;EAEf;EACA;;;;;cAMK,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA"}

package/dist/trend-chart.mjs

@@ -0,0 +1,33 @@
+import { WidgetCard, WidgetCardActions, WidgetCardBody, WidgetCardHeader, WidgetCardTitle } from "./widget-card.mjs";
+import { ChartContainer } from "./chart.mjs";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/trend-chart.tsx
+/** A titled card wrapping a themed ECharts trend/analysis chart (line / bar) — the reusable chart tile
+* in an analytics report. Composes the Chart (ChartContainer) primitive for theming + instance handling
+* and the WidgetCard shell for its grey header band. */
+const TrendChart = React.forwardRef(({ title, actions, value, header, option, seriesThemes, height = 240, className }, ref) => {
+	return /* @__PURE__ */ jsxs(WidgetCard, {
+		ref,
+		className,
+		"data-core-artifact": "trend-chart",
+		"data-core-surface-owner": "artifact",
+		children: [(title || actions) && /* @__PURE__ */ jsxs(WidgetCardHeader, { children: [title ? /* @__PURE__ */ jsx(WidgetCardTitle, { children: title }) : /* @__PURE__ */ jsx("span", {}), actions && /* @__PURE__ */ jsx(WidgetCardActions, { children: actions })] }), /* @__PURE__ */ jsxs(WidgetCardBody, { children: [
+			value !== void 0 && /* @__PURE__ */ jsx("div", {
+				className: "wwc:text-3xl wwc:font-semibold wwc:tracking-tight",
+				children: value
+			}),
+			header,
+			/* @__PURE__ */ jsx(ChartContainer, {
+				option,
+				seriesThemes,
+				height
+			})
+		] })]
+	});
+});
+TrendChart.displayName = "TrendChart";
+//#endregion
+export { TrendChart };
+
+//# sourceMappingURL=trend-chart.mjs.map

package/dist/trend-chart.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"trend-chart.mjs","names":[],"sources":["../src/trend-chart.tsx"],"sourcesContent":["import type {EChartsOption} from \"echarts\";\n\nimport * as React from \"react\";\n\nimport {ChartContainer, type ChartSeriesTheme} from \"./chart\";\nimport {WidgetCard, WidgetCardActions, WidgetCardBody, WidgetCardHeader, WidgetCardTitle} from \"./widget-card\";\n\nexport interface TrendChartProps {\n\t/** Title shown in the grey header band. */\n\ttitle?: React.ReactNode;\n\t/** Right-aligned header slot (info icon, menu, range toggle, ...). */\n\tactions?: React.ReactNode;\n\t/** Headline figure rendered above the chart (e.g. the period total). */\n\tvalue?: React.ReactNode;\n\t/** Optional extra content rendered under the value (e.g. a custom legend). */\n\theader?: React.ReactNode;\n\t/** ECharts option for the chart (series / axes / tooltip / ...). */\n\toption: EChartsOption;\n\t/** Core semantic tones or chart palette indexes applied to series in order. */\n\tseriesThemes?: ChartSeriesTheme[];\n\t/** Chart height in px (or any CSS size). Default 240. */\n\theight?: number | string;\n\tclassName?: string;\n}\n\n/** A titled card wrapping a themed ECharts trend/analysis chart (line / bar) — the reusable chart tile\n * in an analytics report. Composes the Chart (ChartContainer) primitive for theming + instance handling\n * and the WidgetCard shell for its grey header band. */\nconst TrendChart = React.forwardRef<HTMLDivElement, TrendChartProps>(\n\t({title, actions, value, header, option, seriesThemes, height = 240, className}, ref) => {\n\t\treturn (\n\t\t\t<WidgetCard ref={ref} className={className} data-core-artifact=\"trend-chart\" data-core-surface-owner=\"artifact\">\n\t\t\t\t{(title || actions) && (\n\t\t\t\t\t<WidgetCardHeader>\n\t\t\t\t\t\t{title ? <WidgetCardTitle>{title}</WidgetCardTitle> : <span />}\n\t\t\t\t\t\t{actions && <WidgetCardActions>{actions}</WidgetCardActions>}\n\t\t\t\t\t</WidgetCardHeader>\n\t\t\t\t)}\n\t\t\t\t<WidgetCardBody>\n\t\t\t\t\t{value !== undefined && <div className=\"wwc:text-3xl wwc:font-semibold wwc:tracking-tight\">{value}</div>}\n\t\t\t\t\t{header}\n\t\t\t\t\t<ChartContainer option={option} seriesThemes={seriesThemes} height={height} />\n\t\t\t\t</WidgetCardBody>\n\t\t\t</WidgetCard>\n\t\t);\n\t},\n);\nTrendChart.displayName = \"TrendChart\";\n\nexport {TrendChart};\n"],"mappings":";;;;;;;;AA4BA,MAAM,aAAa,MAAM,YACvB,EAAC,OAAO,SAAS,OAAO,QAAQ,QAAQ,cAAc,SAAS,KAAK,aAAY,QAAQ;CACxF,OACC,qBAAC,YAAD;EAAiB;EAAgB;EAAW,sBAAmB;EAAc,2BAAwB;EAArG,UAAA,EACG,SAAS,YACV,qBAAC,kBAAD,EAAA,UAAA,CACE,QAAQ,oBAAC,iBAAD,EAAA,UAAkB,MAAuB,CAAA,IAAI,oBAAC,QAAD,CAAO,CAAA,GAC5D,WAAW,oBAAC,mBAAD,EAAA,UAAoB,QAA2B,CAAA,CAC1C,EAAA,CAAA,GAEnB,qBAAC,gBAAD,EAAA,UAAA;GACE,UAAU,KAAA,KAAa,oBAAC,OAAD;IAAK,WAAU;IAAqD,UAAA;GAAW,CAAA;GACtG;GACD,oBAAC,gBAAD;IAAwB;IAAsB;IAAsB;GAAS,CAAA;EAC9D,EAAA,CAAA,CACL;;AAEd,CACD;AACA,WAAW,cAAc"}

package/dist/turn-timer.d.mts

@@ -0,0 +1,23 @@
+import * as React from "react";
+//#region src/turn-timer.d.ts
+export interface TurnTimerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  /**
+   * When the turn started. Used to compute elapsed time. If omitted, the
+   * component uses its mount time. Re-render with the same value to preserve
+   * the count.
+   */
+  startedAt?: Date | number;
+  /** When true, the timer freezes at its current value and renders the dim "done" state. */
+  done?: boolean;
+  /** Override the displayed value (e.g. show a precomputed final duration). */
+  value?: string;
+  /** Tick interval in ms while live. Defaults to 100. */
+  tickIntervalMs?: number;
+}
+/**
+ * Mono-text duration counter. Live during work, frozen + de-emphasised when complete.
+ * Sits as a footnote beneath the result it timed.
+ */
+export declare const TurnTimer: React.ForwardRefExoticComponent<TurnTimerProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+//# sourceMappingURL=turn-timer.d.mts.map

package/dist/turn-timer.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"turn-timer.d.mts","names":[],"sources":["../src/turn-timer.tsx"],"mappings":";;iBAGiB,uBAAuB,KAAK,MAAM,eAAe;;;;;;EAMjE,YAAY;;EAEZ;;EAEA;;EAEA;;;;;;qBASY,WAAS,MAAA,0BAAA,iBAAA,MAAA,cAAA"}

package/dist/turn-timer.mjs

@@ -0,0 +1,51 @@
+import { cn } from "@corensystem/coren-utils";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/turn-timer.tsx
+const formatSeconds = (ms) => `${(ms / 1e3).toFixed(1)}s`;
+/**
+* Mono-text duration counter. Live during work, frozen + de-emphasised when complete.
+* Sits as a footnote beneath the result it timed.
+*/
+const TurnTimer = React.forwardRef(({ startedAt, done = false, value, tickIntervalMs = 100, className, ...props }, ref) => {
+	const startMs = React.useMemo(() => {
+		if (value !== void 0) return 0;
+		if (startedAt instanceof Date) return startedAt.getTime();
+		if (typeof startedAt === "number") return startedAt;
+		return Date.now();
+	}, [startedAt, value]);
+	const [text, setText] = React.useState(() => value ?? formatSeconds(Date.now() - startMs));
+	React.useEffect(() => {
+		if (value !== void 0) {
+			setText(value);
+			return;
+		}
+		if (done) {
+			setText(formatSeconds(Date.now() - startMs));
+			return;
+		}
+		setText(formatSeconds(Date.now() - startMs));
+		const interval = window.setInterval(() => {
+			setText(formatSeconds(Date.now() - startMs));
+		}, tickIntervalMs);
+		return () => window.clearInterval(interval);
+	}, [
+		done,
+		startMs,
+		tickIntervalMs,
+		value
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"aria-hidden": done ? void 0 : true,
+		"aria-label": done ? `Took ${text}` : void 0,
+		className: cn("wwc:inline-flex wwc:items-center wwc:gap-1.5 wwc:self-start wwc:px-0 wwc:py-0.5 wwc:text-[11px] wwc:text-muted-foreground", "wwc:font-mono", done && "wwc:opacity-70", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", { className: cn("wwc:shrink-0 wwc:rounded-full", done ? "wwc:h-1 wwc:w-1 wwc:bg-muted-foreground/50" : "wwc:h-2 wwc:w-2 wwc:border-[1.5px] wwc:border-muted-foreground wwc:border-t-transparent wwc:animate-spin wwc:[animation-duration:0.9s] wwc:motion-reduce:animate-none") }), /* @__PURE__ */ jsx("span", { children: text })]
+	});
+});
+TurnTimer.displayName = "TurnTimer";
+//#endregion
+export { TurnTimer };
+
+//# sourceMappingURL=turn-timer.mjs.map

package/dist/turn-timer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"turn-timer.mjs","names":[],"sources":["../src/turn-timer.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport * as React from \"react\";\n\nexport interface TurnTimerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n\t/**\n\t * When the turn started. Used to compute elapsed time. If omitted, the\n\t * component uses its mount time. Re-render with the same value to preserve\n\t * the count.\n\t */\n\tstartedAt?: Date | number;\n\t/** When true, the timer freezes at its current value and renders the dim \"done\" state. */\n\tdone?: boolean;\n\t/** Override the displayed value (e.g. show a precomputed final duration). */\n\tvalue?: string;\n\t/** Tick interval in ms while live. Defaults to 100. */\n\ttickIntervalMs?: number;\n}\n\nconst formatSeconds = (ms: number): string => `${(ms / 1000).toFixed(1)}s`;\n\n/**\n * Mono-text duration counter. Live during work, frozen + de-emphasised when complete.\n * Sits as a footnote beneath the result it timed.\n */\nexport const TurnTimer = React.forwardRef<HTMLDivElement, TurnTimerProps>(\n\t({startedAt, done = false, value, tickIntervalMs = 100, className, ...props}, ref) => {\n\t\tconst startMs = React.useMemo(() => {\n\t\t\tif (value !== undefined) return 0;\n\t\t\tif (startedAt instanceof Date) return startedAt.getTime();\n\t\t\tif (typeof startedAt === \"number\") return startedAt;\n\t\t\treturn Date.now();\n\t\t}, [startedAt, value]);\n\n\t\tconst [text, setText] = React.useState(() => value ?? formatSeconds(Date.now() - startMs));\n\n\t\tReact.useEffect(() => {\n\t\t\tif (value !== undefined) {\n\t\t\t\tsetText(value);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (done) {\n\t\t\t\tsetText(formatSeconds(Date.now() - startMs));\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetText(formatSeconds(Date.now() - startMs));\n\t\t\tconst interval = window.setInterval(() => {\n\t\t\t\tsetText(formatSeconds(Date.now() - startMs));\n\t\t\t}, tickIntervalMs);\n\t\t\treturn () => window.clearInterval(interval);\n\t\t}, [done, startMs, tickIntervalMs, value]);\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\taria-hidden={done ? undefined : true}\n\t\t\t\taria-label={done ? `Took ${text}` : undefined}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"wwc:inline-flex wwc:items-center wwc:gap-1.5 wwc:self-start wwc:px-0 wwc:py-0.5 wwc:text-[11px] wwc:text-muted-foreground\",\n\t\t\t\t\t\"wwc:font-mono\",\n\t\t\t\t\tdone && \"wwc:opacity-70\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<span\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"wwc:shrink-0 wwc:rounded-full\",\n\t\t\t\t\t\tdone\n\t\t\t\t\t\t\t? \"wwc:h-1 wwc:w-1 wwc:bg-muted-foreground/50\"\n\t\t\t\t\t\t\t: \"wwc:h-2 wwc:w-2 wwc:border-[1.5px] wwc:border-muted-foreground wwc:border-t-transparent wwc:animate-spin wwc:[animation-duration:0.9s] wwc:motion-reduce:animate-none\",\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t\t<span>{text}</span>\n\t\t\t</div>\n\t\t);\n\t},\n);\nTurnTimer.displayName = \"TurnTimer\";\n"],"mappings":";;;;AAkBA,MAAM,iBAAiB,OAAuB,IAAI,KAAK,IAAA,CAAM,QAAQ,CAAC,EAAE;;;;;AAMxE,MAAa,YAAY,MAAM,YAC7B,EAAC,WAAW,OAAO,OAAO,OAAO,iBAAiB,KAAK,WAAW,GAAG,SAAQ,QAAQ;CACrF,MAAM,UAAU,MAAM,cAAc;EACnC,IAAI,UAAU,KAAA,GAAW,OAAO;EAChC,IAAI,qBAAqB,MAAM,OAAO,UAAU,QAAQ;EACxD,IAAI,OAAO,cAAc,UAAU,OAAO;EAC1C,OAAO,KAAK,IAAI;CACjB,GAAG,CAAC,WAAW,KAAK,CAAC;CAErB,MAAM,CAAC,MAAM,WAAW,MAAM,eAAe,SAAS,cAAc,KAAK,IAAI,IAAI,OAAO,CAAC;CAEzF,MAAM,gBAAgB;EACrB,IAAI,UAAU,KAAA,GAAW;GACxB,QAAQ,KAAK;GACb;EACD;EACA,IAAI,MAAM;GACT,QAAQ,cAAc,KAAK,IAAI,IAAI,OAAO,CAAC;GAC3C;EACD;EACA,QAAQ,cAAc,KAAK,IAAI,IAAI,OAAO,CAAC;EAC3C,MAAM,WAAW,OAAO,kBAAkB;GACzC,QAAQ,cAAc,KAAK,IAAI,IAAI,OAAO,CAAC;EAC5C,GAAG,cAAc;EACjB,aAAa,OAAO,cAAc,QAAQ;CAC3C,GAAG;EAAC;EAAM;EAAS;EAAgB;CAAK,CAAC;CAEzC,OACC,qBAAC,OAAD;EACM;EACL,eAAa,OAAO,KAAA,IAAY;EAChC,cAAY,OAAO,QAAQ,SAAS,KAAA;EACpC,WAAW,GACV,6HACA,iBACA,QAAQ,kBACR,SACD;EACA,GAAI;EAVL,UAAA,CAYC,oBAAC,QAAD,EACC,WAAW,GACV,iCACA,OACG,+CACA,uKACJ,EACA,CAAA,GACD,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA,CACd;;AAEP,CACD;AACA,UAAU,cAAc"}

package/dist/typeahead-item.d.mts

@@ -0,0 +1,34 @@
+import * as React from "react";
+//#region src/typeahead-item.d.ts
+export interface TypeaheadItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  /** Item value */
+  value: string;
+  /** Item label (display text) */
+  label?: string;
+  /** Item description */
+  description?: string;
+  /** Leading icon */
+  icon?: React.ReactNode;
+  /** Whether the item is selected */
+  selected?: boolean;
+  /** Whether the item is highlighted (keyboard navigation) */
+  highlighted?: boolean;
+  /** Whether the item is disabled */
+  disabled?: boolean;
+  /** Callback when item is selected */
+  onSelect?: (value: string) => void;
+}
+/** Individual item for typeahead/autocomplete dropdowns. */
+declare const TypeaheadItem: React.ForwardRefExoticComponent<TypeaheadItemProps & React.RefAttributes<HTMLDivElement>>;
+export interface TypeaheadGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Group label */
+  label: string;
+}
+/** Group header for categorizing typeahead items. */
+declare const TypeaheadGroup: React.ForwardRefExoticComponent<TypeaheadGroupProps & React.RefAttributes<HTMLDivElement>>;
+export interface TypeaheadEmptyProps extends React.HTMLAttributes<HTMLDivElement> {}
+/** Empty state for typeahead when no results are found. */
+declare const TypeaheadEmpty: React.ForwardRefExoticComponent<TypeaheadEmptyProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { TypeaheadEmpty, TypeaheadGroup, TypeaheadItem };
+//# sourceMappingURL=typeahead-item.d.mts.map

package/dist/typeahead-item.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typeahead-item.d.mts","names":[],"sources":["../src/typeahead-item.tsx"],"mappings":";;iBAIiB,2BAA2B,KAAK,MAAM,eAAe;;EAErE;;EAEA;;EAEA;;EAEA,OAAO,MAAM;;EAEb;;EAEA;;EAEA;;EAEA,YAAY;;;cAIP,eAAa,MAAA,0BAAA,qBAAA,MAAA,cAAA;iBAqEF,4BAA4B,MAAM,eAAe;;EAEjE;;;cAIK,gBAAc,MAAA,0BAAA,sBAAA,MAAA,cAAA;iBAUH,4BAA4B,MAAM,eAAe;;cAG5D,gBAAc,MAAA,0BAAA,sBAAA,MAAA,cAAA"}