@diwauhris/ui 1.0.0

package/lib/index62.cjs

@@ -0,0 +1,213 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let lucide_react = require("lucide-react");
+//#region src/ui-library/gallery/tree-view/TreeView.tsx
+/**
+* TreeView — Design System Component
+*
+* Hierarchical tree with expand/collapse, selection, and keyboard navigation.
+*
+* WAI-ARIA Tree pattern:
+*   role="tree" on the root <ul>
+*   role="treeitem" + aria-expanded + aria-selected on each item
+*   role="group" on nested <ul> children
+*
+* Keyboard (WAI-ARIA authoring guide):
+*   ArrowDown — next visible item
+*   ArrowUp   — previous visible item
+*   ArrowRight — expand collapsed node, or move to first child
+*   ArrowLeft  — collapse expanded node, or move to parent
+*   Home       — first item in tree
+*   End        — last visible item in tree
+*   Enter      — select item
+*   Space      — select item
+*
+* Data model:
+*   const items: TreeItem[] = [
+*     { id: '1', label: 'Parent', children: [
+*       { id: '1.1', label: 'Child' },
+*     ]},
+*   ];
+*
+*   <TreeView
+*     items={items}
+*     selectedId={selected}
+*     onSelect={setSelected}
+*   />
+*/
+function flattenVisible(items, expanded) {
+	const result = [];
+	for (const item of items) {
+		result.push(item);
+		if (item.children && expanded.has(item.id)) result.push(...flattenVisible(item.children, expanded));
+	}
+	return result;
+}
+function findParent(items, id) {
+	for (const item of items) if (item.children) {
+		if (item.children.some((c) => c.id === id)) return item;
+		const found = findParent(item.children, id);
+		if (found) return found;
+	}
+	return null;
+}
+function TreeNode({ item, depth, selectedId, expanded, toggleExpand, onSelect, baseId }) {
+	const hasChildren = Boolean(item.children?.length);
+	const isExpanded = expanded.has(item.id);
+	const isSelected = item.id === selectedId;
+	const handleClick = () => {
+		if (item.disabled) return;
+		if (hasChildren) toggleExpand(item.id);
+		onSelect(item.id);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+		id: `${baseId}-${item.id}`,
+		role: "treeitem",
+		"aria-expanded": hasChildren ? isExpanded : void 0,
+		"aria-selected": isSelected,
+		"aria-disabled": item.disabled || void 0,
+		"aria-level": depth,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			onClick: handleClick,
+			disabled: item.disabled,
+			style: { paddingLeft: `${(depth - 1) * 16 + 8}px` },
+			className: [
+				"flex w-full items-center gap-1.5 rounded-lg py-1.5 pr-3 text-sm font-medium transition",
+				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+				isSelected ? "bg-blue-50 font-semibold text-brand-blue" : item.disabled ? "cursor-not-allowed text-slate-300" : "text-slate-700 hover:bg-slate-100"
+			].filter(Boolean).join(" "),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: `flex h-4 w-4 shrink-0 items-center justify-center transition-transform ${hasChildren ? "" : "invisible"} ${isExpanded ? "rotate-90" : ""}`,
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { size: 12 })
+				}),
+				item.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "shrink-0 text-slate-400",
+					"aria-hidden": "true",
+					children: item.icon
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "truncate",
+					children: item.label
+				})
+			]
+		}), hasChildren && isExpanded && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+			role: "group",
+			children: item.children.map((child) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeNode, {
+				item: child,
+				depth: depth + 1,
+				selectedId,
+				expanded,
+				toggleExpand,
+				onSelect,
+				baseId
+			}, child.id))
+		})]
+	});
+}
+function TreeView({ items, selectedId, onSelect, "aria-label": ariaLabel, className = "" }) {
+	const baseId = (0, react.useId)().replace(/:/g, "");
+	const [expanded, setExpanded] = (0, react.useState)(() => {
+		const s = /* @__PURE__ */ new Set();
+		items.forEach((i) => {
+			if (i.children?.length) s.add(i.id);
+		});
+		return s;
+	});
+	const treeRef = (0, react.useRef)(null);
+	const toggleExpand = (0, react.useCallback)((id) => {
+		setExpanded((prev) => {
+			const next = new Set(prev);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	}, []);
+	const handleSelect = (0, react.useCallback)((id) => {
+		onSelect?.(id);
+	}, [onSelect]);
+	const handleKeyDown = (e) => {
+		const visible = flattenVisible(items, expanded);
+		if (visible.length === 0) return;
+		const currentId = selectedId ?? visible[0]?.id;
+		const currentIdx = visible.findIndex((v) => v.id === currentId);
+		const current = visible[currentIdx];
+		const focusItem = (id) => {
+			handleSelect(id);
+			document.getElementById(`${baseId}-${id}`)?.querySelector("button")?.focus();
+		};
+		switch (e.key) {
+			case "ArrowDown": {
+				e.preventDefault();
+				const next = visible[currentIdx + 1];
+				if (next && !next.disabled) focusItem(next.id);
+				break;
+			}
+			case "ArrowUp": {
+				e.preventDefault();
+				let prev = visible[currentIdx - 1];
+				while (prev && prev.disabled) prev = visible[visible.indexOf(prev) - 1];
+				if (prev) focusItem(prev.id);
+				break;
+			}
+			case "ArrowRight":
+				e.preventDefault();
+				if (current?.children?.length && !expanded.has(current.id)) toggleExpand(current.id);
+				else {
+					const child = current?.children?.[0];
+					if (child && !child.disabled) focusItem(child.id);
+				}
+				break;
+			case "ArrowLeft":
+				e.preventDefault();
+				if (current?.children?.length && expanded.has(current.id)) toggleExpand(current.id);
+				else {
+					const parent = findParent(items, current?.id ?? "");
+					if (parent) focusItem(parent.id);
+				}
+				break;
+			case "Home": {
+				e.preventDefault();
+				const first = visible.find((v) => !v.disabled);
+				if (first) focusItem(first.id);
+				break;
+			}
+			case "End": {
+				e.preventDefault();
+				const last = [...visible].reverse().find((v) => !v.disabled);
+				if (last) focusItem(last.id);
+				break;
+			}
+			case "Enter":
+			case " ":
+				e.preventDefault();
+				if (current && !current.disabled) {
+					if (current.children?.length) toggleExpand(current.id);
+					handleSelect(current.id);
+				}
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+		ref: treeRef,
+		role: "tree",
+		"aria-label": ariaLabel,
+		onKeyDown: handleKeyDown,
+		className: `flex flex-col gap-0.5 outline-none ${className}`,
+		tabIndex: 0,
+		children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeNode, {
+			item,
+			depth: 1,
+			selectedId,
+			expanded,
+			toggleExpand,
+			onSelect: handleSelect,
+			baseId
+		}, item.id))
+	});
+}
+//#endregion
+exports.TreeView = TreeView;
+
+//# sourceMappingURL=index62.cjs.map

package/lib/index62.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index62.cjs","names":[],"sources":["../src/ui-library/gallery/tree-view/TreeView.tsx"],"sourcesContent":["/**\n * TreeView — Design System Component\n *\n * Hierarchical tree with expand/collapse, selection, and keyboard navigation.\n *\n * WAI-ARIA Tree pattern:\n *   role=\"tree\" on the root <ul>\n *   role=\"treeitem\" + aria-expanded + aria-selected on each item\n *   role=\"group\" on nested <ul> children\n *\n * Keyboard (WAI-ARIA authoring guide):\n *   ArrowDown — next visible item\n *   ArrowUp   — previous visible item\n *   ArrowRight — expand collapsed node, or move to first child\n *   ArrowLeft  — collapse expanded node, or move to parent\n *   Home       — first item in tree\n *   End        — last visible item in tree\n *   Enter      — select item\n *   Space      — select item\n *\n * Data model:\n *   const items: TreeItem[] = [\n *     { id: '1', label: 'Parent', children: [\n *       { id: '1.1', label: 'Child' },\n *     ]},\n *   ];\n *\n *   <TreeView\n *     items={items}\n *     selectedId={selected}\n *     onSelect={setSelected}\n *   />\n */\n\nimport { useCallback, useId, useRef, useState, type ReactNode } from 'react';\nimport { ChevronRight } from 'lucide-react';\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport interface TreeItem {\n  id: string;\n  label: string;\n  icon?: ReactNode;\n  disabled?: boolean;\n  children?: TreeItem[];\n}\n\nexport interface TreeViewProps {\n  items: TreeItem[];\n  /** Currently selected item id */\n  selectedId?: string;\n  /** Called when an item is selected */\n  onSelect?: (id: string) => void;\n  /** Optional accessible label for the tree */\n  'aria-label'?: string;\n  className?: string;\n}\n\n// ── Flatten visible items for keyboard navigation ─────────────────────────────\n\nfunction flattenVisible(items: TreeItem[], expanded: Set<string>): TreeItem[] {\n  const result: TreeItem[] = [];\n  for (const item of items) {\n    result.push(item);\n    if (item.children && expanded.has(item.id)) {\n      result.push(...flattenVisible(item.children, expanded));\n    }\n  }\n  return result;\n}\n\n// ── Find parent of a given id ─────────────────────────────────────────────────\n\nfunction findParent(items: TreeItem[], id: string): TreeItem | null {\n  for (const item of items) {\n    if (item.children) {\n      if (item.children.some((c) => c.id === id)) return item;\n      const found = findParent(item.children, id);\n      if (found) return found;\n    }\n  }\n  return null;\n}\n\n// ── TreeNode (recursive) ──────────────────────────────────────────────────────\n\ninterface TreeNodeProps {\n  item: TreeItem;\n  depth: number;\n  selectedId?: string;\n  expanded: Set<string>;\n  toggleExpand: (id: string) => void;\n  onSelect: (id: string) => void;\n  baseId: string;\n}\n\nfunction TreeNode({ item, depth, selectedId, expanded, toggleExpand, onSelect, baseId }: TreeNodeProps) {\n  const hasChildren = Boolean(item.children?.length);\n  const isExpanded = expanded.has(item.id);\n  const isSelected = item.id === selectedId;\n\n  const handleClick = () => {\n    if (item.disabled) return;\n    if (hasChildren) toggleExpand(item.id);\n    onSelect(item.id);\n  };\n\n  return (\n    <li\n      id={`${baseId}-${item.id}`}\n      role=\"treeitem\"\n      aria-expanded={hasChildren ? isExpanded : undefined}\n      aria-selected={isSelected}\n      aria-disabled={item.disabled || undefined}\n      aria-level={depth}\n    >\n      <button\n        type=\"button\"\n        onClick={handleClick}\n        disabled={item.disabled}\n        style={{ paddingLeft: `${(depth - 1) * 16 + 8}px` }}\n        className={[\n          'flex w-full items-center gap-1.5 rounded-lg py-1.5 pr-3 text-sm font-medium transition',\n          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30',\n          isSelected\n            ? 'bg-blue-50 font-semibold text-brand-blue'\n            : item.disabled\n              ? 'cursor-not-allowed text-slate-300'\n              : 'text-slate-700 hover:bg-slate-100',\n        ].filter(Boolean).join(' ')}\n      >\n        {/* Expand/collapse chevron */}\n        <span\n          className={`flex h-4 w-4 shrink-0 items-center justify-center transition-transform ${\n            hasChildren ? '' : 'invisible'\n          } ${isExpanded ? 'rotate-90' : ''}`}\n          aria-hidden=\"true\"\n        >\n          <ChevronRight size={12} />\n        </span>\n\n        {/* Icon */}\n        {item.icon && (\n          <span className=\"shrink-0 text-slate-400\" aria-hidden=\"true\">\n            {item.icon}\n          </span>\n        )}\n\n        {/* Label */}\n        <span className=\"truncate\">{item.label}</span>\n      </button>\n\n      {/* Children */}\n      {hasChildren && isExpanded && (\n        <ul role=\"group\">\n          {item.children!.map((child) => (\n            <TreeNode\n              key={child.id}\n              item={child}\n              depth={depth + 1}\n              selectedId={selectedId}\n              expanded={expanded}\n              toggleExpand={toggleExpand}\n              onSelect={onSelect}\n              baseId={baseId}\n            />\n          ))}\n        </ul>\n      )}\n    </li>\n  );\n}\n\n// ── TreeView (root) ───────────────────────────────────────────────────────────\n\nexport function TreeView({\n  items,\n  selectedId,\n  onSelect,\n  'aria-label': ariaLabel,\n  className = '',\n}: TreeViewProps) {\n  const baseId = useId().replace(/:/g, '');\n  const [expanded, setExpanded] = useState<Set<string>>(() => {\n    // Start with top-level nodes expanded\n    const s = new Set<string>();\n    items.forEach((i) => { if (i.children?.length) s.add(i.id); });\n    return s;\n  });\n  const treeRef = useRef<HTMLUListElement>(null);\n\n  const toggleExpand = useCallback((id: string) => {\n    setExpanded((prev) => {\n      const next = new Set(prev);\n      if (next.has(id)) next.delete(id); else next.add(id);\n      return next;\n    });\n  }, []);\n\n  const handleSelect = useCallback((id: string) => {\n    onSelect?.(id);\n  }, [onSelect]);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLUListElement>) => {\n    const visible = flattenVisible(items, expanded);\n    if (visible.length === 0) return;\n\n    const currentId = selectedId ?? visible[0]?.id;\n    const currentIdx = visible.findIndex((v) => v.id === currentId);\n    const current = visible[currentIdx];\n\n    const focusItem = (id: string) => {\n      handleSelect(id);\n      document.getElementById(`${baseId}-${id}`)?.querySelector('button')?.focus();\n    };\n\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault();\n        const next = visible[currentIdx + 1];\n        if (next && !next.disabled) focusItem(next.id);\n        break;\n      }\n      case 'ArrowUp': {\n        e.preventDefault();\n        let prev = visible[currentIdx - 1];\n        while (prev && prev.disabled) {\n          const idx = visible.indexOf(prev);\n          prev = visible[idx - 1];\n        }\n        if (prev) focusItem(prev.id);\n        break;\n      }\n      case 'ArrowRight': {\n        e.preventDefault();\n        if (current?.children?.length && !expanded.has(current.id)) {\n          toggleExpand(current.id);\n        } else {\n          const child = current?.children?.[0];\n          if (child && !child.disabled) focusItem(child.id);\n        }\n        break;\n      }\n      case 'ArrowLeft': {\n        e.preventDefault();\n        if (current?.children?.length && expanded.has(current.id)) {\n          toggleExpand(current.id);\n        } else {\n          const parent = findParent(items, current?.id ?? '');\n          if (parent) focusItem(parent.id);\n        }\n        break;\n      }\n      case 'Home': {\n        e.preventDefault();\n        const first = visible.find((v) => !v.disabled);\n        if (first) focusItem(first.id);\n        break;\n      }\n      case 'End': {\n        e.preventDefault();\n        const last = [...visible].reverse().find((v) => !v.disabled);\n        if (last) focusItem(last.id);\n        break;\n      }\n      case 'Enter':\n      case ' ': {\n        e.preventDefault();\n        if (current && !current.disabled) {\n          if (current.children?.length) toggleExpand(current.id);\n          handleSelect(current.id);\n        }\n        break;\n      }\n    }\n  };\n\n  return (\n    <ul\n      ref={treeRef}\n      role=\"tree\"\n      aria-label={ariaLabel}\n      onKeyDown={handleKeyDown}\n      className={`flex flex-col gap-0.5 outline-none ${className}`}\n      tabIndex={0}\n    >\n      {items.map((item) => (\n        <TreeNode\n          key={item.id}\n          item={item}\n          depth={1}\n          selectedId={selectedId}\n          expanded={expanded}\n          toggleExpand={toggleExpand}\n          onSelect={handleSelect}\n          baseId={baseId}\n        />\n      ))}\n    </ul>\n  );\n}\n"],"mappings":"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"}

package/lib/index62.mjs

@@ -0,0 +1,213 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useRef, useState } from "react";
+import { ChevronRight } from "lucide-react";
+//#region src/ui-library/gallery/tree-view/TreeView.tsx
+/**
+* TreeView — Design System Component
+*
+* Hierarchical tree with expand/collapse, selection, and keyboard navigation.
+*
+* WAI-ARIA Tree pattern:
+*   role="tree" on the root <ul>
+*   role="treeitem" + aria-expanded + aria-selected on each item
+*   role="group" on nested <ul> children
+*
+* Keyboard (WAI-ARIA authoring guide):
+*   ArrowDown — next visible item
+*   ArrowUp   — previous visible item
+*   ArrowRight — expand collapsed node, or move to first child
+*   ArrowLeft  — collapse expanded node, or move to parent
+*   Home       — first item in tree
+*   End        — last visible item in tree
+*   Enter      — select item
+*   Space      — select item
+*
+* Data model:
+*   const items: TreeItem[] = [
+*     { id: '1', label: 'Parent', children: [
+*       { id: '1.1', label: 'Child' },
+*     ]},
+*   ];
+*
+*   <TreeView
+*     items={items}
+*     selectedId={selected}
+*     onSelect={setSelected}
+*   />
+*/
+function flattenVisible(items, expanded) {
+	const result = [];
+	for (const item of items) {
+		result.push(item);
+		if (item.children && expanded.has(item.id)) result.push(...flattenVisible(item.children, expanded));
+	}
+	return result;
+}
+function findParent(items, id) {
+	for (const item of items) if (item.children) {
+		if (item.children.some((c) => c.id === id)) return item;
+		const found = findParent(item.children, id);
+		if (found) return found;
+	}
+	return null;
+}
+function TreeNode({ item, depth, selectedId, expanded, toggleExpand, onSelect, baseId }) {
+	const hasChildren = Boolean(item.children?.length);
+	const isExpanded = expanded.has(item.id);
+	const isSelected = item.id === selectedId;
+	const handleClick = () => {
+		if (item.disabled) return;
+		if (hasChildren) toggleExpand(item.id);
+		onSelect(item.id);
+	};
+	return /* @__PURE__ */ jsxs("li", {
+		id: `${baseId}-${item.id}`,
+		role: "treeitem",
+		"aria-expanded": hasChildren ? isExpanded : void 0,
+		"aria-selected": isSelected,
+		"aria-disabled": item.disabled || void 0,
+		"aria-level": depth,
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: handleClick,
+			disabled: item.disabled,
+			style: { paddingLeft: `${(depth - 1) * 16 + 8}px` },
+			className: [
+				"flex w-full items-center gap-1.5 rounded-lg py-1.5 pr-3 text-sm font-medium transition",
+				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+				isSelected ? "bg-blue-50 font-semibold text-brand-blue" : item.disabled ? "cursor-not-allowed text-slate-300" : "text-slate-700 hover:bg-slate-100"
+			].filter(Boolean).join(" "),
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: `flex h-4 w-4 shrink-0 items-center justify-center transition-transform ${hasChildren ? "" : "invisible"} ${isExpanded ? "rotate-90" : ""}`,
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx(ChevronRight, { size: 12 })
+				}),
+				item.icon && /* @__PURE__ */ jsx("span", {
+					className: "shrink-0 text-slate-400",
+					"aria-hidden": "true",
+					children: item.icon
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: item.label
+				})
+			]
+		}), hasChildren && isExpanded && /* @__PURE__ */ jsx("ul", {
+			role: "group",
+			children: item.children.map((child) => /* @__PURE__ */ jsx(TreeNode, {
+				item: child,
+				depth: depth + 1,
+				selectedId,
+				expanded,
+				toggleExpand,
+				onSelect,
+				baseId
+			}, child.id))
+		})]
+	});
+}
+function TreeView({ items, selectedId, onSelect, "aria-label": ariaLabel, className = "" }) {
+	const baseId = useId().replace(/:/g, "");
+	const [expanded, setExpanded] = useState(() => {
+		const s = /* @__PURE__ */ new Set();
+		items.forEach((i) => {
+			if (i.children?.length) s.add(i.id);
+		});
+		return s;
+	});
+	const treeRef = useRef(null);
+	const toggleExpand = useCallback((id) => {
+		setExpanded((prev) => {
+			const next = new Set(prev);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	}, []);
+	const handleSelect = useCallback((id) => {
+		onSelect?.(id);
+	}, [onSelect]);
+	const handleKeyDown = (e) => {
+		const visible = flattenVisible(items, expanded);
+		if (visible.length === 0) return;
+		const currentId = selectedId ?? visible[0]?.id;
+		const currentIdx = visible.findIndex((v) => v.id === currentId);
+		const current = visible[currentIdx];
+		const focusItem = (id) => {
+			handleSelect(id);
+			document.getElementById(`${baseId}-${id}`)?.querySelector("button")?.focus();
+		};
+		switch (e.key) {
+			case "ArrowDown": {
+				e.preventDefault();
+				const next = visible[currentIdx + 1];
+				if (next && !next.disabled) focusItem(next.id);
+				break;
+			}
+			case "ArrowUp": {
+				e.preventDefault();
+				let prev = visible[currentIdx - 1];
+				while (prev && prev.disabled) prev = visible[visible.indexOf(prev) - 1];
+				if (prev) focusItem(prev.id);
+				break;
+			}
+			case "ArrowRight":
+				e.preventDefault();
+				if (current?.children?.length && !expanded.has(current.id)) toggleExpand(current.id);
+				else {
+					const child = current?.children?.[0];
+					if (child && !child.disabled) focusItem(child.id);
+				}
+				break;
+			case "ArrowLeft":
+				e.preventDefault();
+				if (current?.children?.length && expanded.has(current.id)) toggleExpand(current.id);
+				else {
+					const parent = findParent(items, current?.id ?? "");
+					if (parent) focusItem(parent.id);
+				}
+				break;
+			case "Home": {
+				e.preventDefault();
+				const first = visible.find((v) => !v.disabled);
+				if (first) focusItem(first.id);
+				break;
+			}
+			case "End": {
+				e.preventDefault();
+				const last = [...visible].reverse().find((v) => !v.disabled);
+				if (last) focusItem(last.id);
+				break;
+			}
+			case "Enter":
+			case " ":
+				e.preventDefault();
+				if (current && !current.disabled) {
+					if (current.children?.length) toggleExpand(current.id);
+					handleSelect(current.id);
+				}
+		}
+	};
+	return /* @__PURE__ */ jsx("ul", {
+		ref: treeRef,
+		role: "tree",
+		"aria-label": ariaLabel,
+		onKeyDown: handleKeyDown,
+		className: `flex flex-col gap-0.5 outline-none ${className}`,
+		tabIndex: 0,
+		children: items.map((item) => /* @__PURE__ */ jsx(TreeNode, {
+			item,
+			depth: 1,
+			selectedId,
+			expanded,
+			toggleExpand,
+			onSelect: handleSelect,
+			baseId
+		}, item.id))
+	});
+}
+//#endregion
+export { TreeView };
+
+//# sourceMappingURL=index62.mjs.map

package/lib/index62.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index62.mjs","names":[],"sources":["../src/ui-library/gallery/tree-view/TreeView.tsx"],"sourcesContent":["/**\n * TreeView — Design System Component\n *\n * Hierarchical tree with expand/collapse, selection, and keyboard navigation.\n *\n * WAI-ARIA Tree pattern:\n *   role=\"tree\" on the root <ul>\n *   role=\"treeitem\" + aria-expanded + aria-selected on each item\n *   role=\"group\" on nested <ul> children\n *\n * Keyboard (WAI-ARIA authoring guide):\n *   ArrowDown — next visible item\n *   ArrowUp   — previous visible item\n *   ArrowRight — expand collapsed node, or move to first child\n *   ArrowLeft  — collapse expanded node, or move to parent\n *   Home       — first item in tree\n *   End        — last visible item in tree\n *   Enter      — select item\n *   Space      — select item\n *\n * Data model:\n *   const items: TreeItem[] = [\n *     { id: '1', label: 'Parent', children: [\n *       { id: '1.1', label: 'Child' },\n *     ]},\n *   ];\n *\n *   <TreeView\n *     items={items}\n *     selectedId={selected}\n *     onSelect={setSelected}\n *   />\n */\n\nimport { useCallback, useId, useRef, useState, type ReactNode } from 'react';\nimport { ChevronRight } from 'lucide-react';\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\nexport interface TreeItem {\n  id: string;\n  label: string;\n  icon?: ReactNode;\n  disabled?: boolean;\n  children?: TreeItem[];\n}\n\nexport interface TreeViewProps {\n  items: TreeItem[];\n  /** Currently selected item id */\n  selectedId?: string;\n  /** Called when an item is selected */\n  onSelect?: (id: string) => void;\n  /** Optional accessible label for the tree */\n  'aria-label'?: string;\n  className?: string;\n}\n\n// ── Flatten visible items for keyboard navigation ─────────────────────────────\n\nfunction flattenVisible(items: TreeItem[], expanded: Set<string>): TreeItem[] {\n  const result: TreeItem[] = [];\n  for (const item of items) {\n    result.push(item);\n    if (item.children && expanded.has(item.id)) {\n      result.push(...flattenVisible(item.children, expanded));\n    }\n  }\n  return result;\n}\n\n// ── Find parent of a given id ─────────────────────────────────────────────────\n\nfunction findParent(items: TreeItem[], id: string): TreeItem | null {\n  for (const item of items) {\n    if (item.children) {\n      if (item.children.some((c) => c.id === id)) return item;\n      const found = findParent(item.children, id);\n      if (found) return found;\n    }\n  }\n  return null;\n}\n\n// ── TreeNode (recursive) ──────────────────────────────────────────────────────\n\ninterface TreeNodeProps {\n  item: TreeItem;\n  depth: number;\n  selectedId?: string;\n  expanded: Set<string>;\n  toggleExpand: (id: string) => void;\n  onSelect: (id: string) => void;\n  baseId: string;\n}\n\nfunction TreeNode({ item, depth, selectedId, expanded, toggleExpand, onSelect, baseId }: TreeNodeProps) {\n  const hasChildren = Boolean(item.children?.length);\n  const isExpanded = expanded.has(item.id);\n  const isSelected = item.id === selectedId;\n\n  const handleClick = () => {\n    if (item.disabled) return;\n    if (hasChildren) toggleExpand(item.id);\n    onSelect(item.id);\n  };\n\n  return (\n    <li\n      id={`${baseId}-${item.id}`}\n      role=\"treeitem\"\n      aria-expanded={hasChildren ? isExpanded : undefined}\n      aria-selected={isSelected}\n      aria-disabled={item.disabled || undefined}\n      aria-level={depth}\n    >\n      <button\n        type=\"button\"\n        onClick={handleClick}\n        disabled={item.disabled}\n        style={{ paddingLeft: `${(depth - 1) * 16 + 8}px` }}\n        className={[\n          'flex w-full items-center gap-1.5 rounded-lg py-1.5 pr-3 text-sm font-medium transition',\n          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30',\n          isSelected\n            ? 'bg-blue-50 font-semibold text-brand-blue'\n            : item.disabled\n              ? 'cursor-not-allowed text-slate-300'\n              : 'text-slate-700 hover:bg-slate-100',\n        ].filter(Boolean).join(' ')}\n      >\n        {/* Expand/collapse chevron */}\n        <span\n          className={`flex h-4 w-4 shrink-0 items-center justify-center transition-transform ${\n            hasChildren ? '' : 'invisible'\n          } ${isExpanded ? 'rotate-90' : ''}`}\n          aria-hidden=\"true\"\n        >\n          <ChevronRight size={12} />\n        </span>\n\n        {/* Icon */}\n        {item.icon && (\n          <span className=\"shrink-0 text-slate-400\" aria-hidden=\"true\">\n            {item.icon}\n          </span>\n        )}\n\n        {/* Label */}\n        <span className=\"truncate\">{item.label}</span>\n      </button>\n\n      {/* Children */}\n      {hasChildren && isExpanded && (\n        <ul role=\"group\">\n          {item.children!.map((child) => (\n            <TreeNode\n              key={child.id}\n              item={child}\n              depth={depth + 1}\n              selectedId={selectedId}\n              expanded={expanded}\n              toggleExpand={toggleExpand}\n              onSelect={onSelect}\n              baseId={baseId}\n            />\n          ))}\n        </ul>\n      )}\n    </li>\n  );\n}\n\n// ── TreeView (root) ───────────────────────────────────────────────────────────\n\nexport function TreeView({\n  items,\n  selectedId,\n  onSelect,\n  'aria-label': ariaLabel,\n  className = '',\n}: TreeViewProps) {\n  const baseId = useId().replace(/:/g, '');\n  const [expanded, setExpanded] = useState<Set<string>>(() => {\n    // Start with top-level nodes expanded\n    const s = new Set<string>();\n    items.forEach((i) => { if (i.children?.length) s.add(i.id); });\n    return s;\n  });\n  const treeRef = useRef<HTMLUListElement>(null);\n\n  const toggleExpand = useCallback((id: string) => {\n    setExpanded((prev) => {\n      const next = new Set(prev);\n      if (next.has(id)) next.delete(id); else next.add(id);\n      return next;\n    });\n  }, []);\n\n  const handleSelect = useCallback((id: string) => {\n    onSelect?.(id);\n  }, [onSelect]);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLUListElement>) => {\n    const visible = flattenVisible(items, expanded);\n    if (visible.length === 0) return;\n\n    const currentId = selectedId ?? visible[0]?.id;\n    const currentIdx = visible.findIndex((v) => v.id === currentId);\n    const current = visible[currentIdx];\n\n    const focusItem = (id: string) => {\n      handleSelect(id);\n      document.getElementById(`${baseId}-${id}`)?.querySelector('button')?.focus();\n    };\n\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault();\n        const next = visible[currentIdx + 1];\n        if (next && !next.disabled) focusItem(next.id);\n        break;\n      }\n      case 'ArrowUp': {\n        e.preventDefault();\n        let prev = visible[currentIdx - 1];\n        while (prev && prev.disabled) {\n          const idx = visible.indexOf(prev);\n          prev = visible[idx - 1];\n        }\n        if (prev) focusItem(prev.id);\n        break;\n      }\n      case 'ArrowRight': {\n        e.preventDefault();\n        if (current?.children?.length && !expanded.has(current.id)) {\n          toggleExpand(current.id);\n        } else {\n          const child = current?.children?.[0];\n          if (child && !child.disabled) focusItem(child.id);\n        }\n        break;\n      }\n      case 'ArrowLeft': {\n        e.preventDefault();\n        if (current?.children?.length && expanded.has(current.id)) {\n          toggleExpand(current.id);\n        } else {\n          const parent = findParent(items, current?.id ?? '');\n          if (parent) focusItem(parent.id);\n        }\n        break;\n      }\n      case 'Home': {\n        e.preventDefault();\n        const first = visible.find((v) => !v.disabled);\n        if (first) focusItem(first.id);\n        break;\n      }\n      case 'End': {\n        e.preventDefault();\n        const last = [...visible].reverse().find((v) => !v.disabled);\n        if (last) focusItem(last.id);\n        break;\n      }\n      case 'Enter':\n      case ' ': {\n        e.preventDefault();\n        if (current && !current.disabled) {\n          if (current.children?.length) toggleExpand(current.id);\n          handleSelect(current.id);\n        }\n        break;\n      }\n    }\n  };\n\n  return (\n    <ul\n      ref={treeRef}\n      role=\"tree\"\n      aria-label={ariaLabel}\n      onKeyDown={handleKeyDown}\n      className={`flex flex-col gap-0.5 outline-none ${className}`}\n      tabIndex={0}\n    >\n      {items.map((item) => (\n        <TreeNode\n          key={item.id}\n          item={item}\n          depth={1}\n          selectedId={selectedId}\n          expanded={expanded}\n          toggleExpand={toggleExpand}\n          onSelect={handleSelect}\n          baseId={baseId}\n        />\n      ))}\n    </ul>\n  );\n}\n"],"mappings":"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"}

package/lib/index63.cjs

@@ -0,0 +1,42 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ui-library/gallery/kanban/Kanban.tsx
+function Kanban({ columns, className = "" }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `w-full flex gap-4 overflow-x-auto pb-2 ${className}`,
+		children: columns.map((col) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+			"aria-label": `${col.label} column, ${col.cards.length} cards`,
+			className: "flex w-64 shrink-0 flex-col rounded-2xl border border-slate-200 bg-slate-50/60 overflow-hidden",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center justify-between px-4 py-3",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2",
+					children: [col.accentClass && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: `h-2.5 w-2.5 rounded-full ${col.accentClass}`,
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+						className: "text-xs font-bold uppercase tracking-widest text-slate-600",
+						children: col.label
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"aria-label": `${col.cards.length} cards`,
+					className: "rounded-full bg-slate-200 px-2 py-0.5 text-[10px] font-bold text-slate-500",
+					children: col.cards.length
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ul", {
+				className: "flex flex-col gap-2 px-3 pb-3",
+				"aria-label": `${col.label} cards`,
+				children: [col.cards.map((card) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "rounded-xl border border-slate-200 bg-white p-3 shadow-sm",
+					children: card.content
+				}) }, card.id)), col.cards.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex items-center justify-center rounded-xl border-2 border-dashed border-slate-200 p-4 text-xs font-medium text-slate-400",
+					children: "No cards"
+				}) })]
+			})]
+		}, col.id))
+	});
+}
+//#endregion
+exports.Kanban = Kanban;
+
+//# sourceMappingURL=index63.cjs.map

package/lib/index63.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index63.cjs","names":[],"sources":["../src/ui-library/gallery/kanban/Kanban.tsx"],"sourcesContent":["/**\n * Kanban — Design System Component\n *\n * A static column-based board for visualizing workflow states.\n * Cards are rendered by the caller; this component provides the\n * column layout and card slot structure.\n *\n * No drag-and-drop: this is a gallery demonstration component.\n * For drag-and-drop in production, add @dnd-kit or similar.\n *\n * Accessibility:\n *   - Each column is a <section> with aria-label\n *   - Card count announced via aria-label on the count badge\n *   - Card slots render as <li> items in a <ul>\n */\n\nimport type { ReactNode } from 'react';\n\nexport interface KanbanColumn {\n  id: string;\n  label: string;\n  /** Color class for the column header accent. E.g. \"bg-amber-400\" */\n  accentClass?: string;\n  cards: KanbanCard[];\n}\n\nexport interface KanbanCard {\n  id: string;\n  content: ReactNode;\n}\n\nexport interface KanbanProps {\n  columns: KanbanColumn[];\n  /** Additional class on the root element. */\n  className?: string;\n}\n\nexport function Kanban({ columns, className = '' }: KanbanProps) {\n  return (\n    <div className={`w-full flex gap-4 overflow-x-auto pb-2 ${className}`}>\n      {columns.map((col) => (\n        <section\n          key={col.id}\n          aria-label={`${col.label} column, ${col.cards.length} cards`}\n          className=\"flex w-64 shrink-0 flex-col rounded-2xl border border-slate-200 bg-slate-50/60 overflow-hidden\"\n        >\n          {/* Column header */}\n          <div className=\"flex items-center justify-between px-4 py-3\">\n            <div className=\"flex items-center gap-2\">\n              {col.accentClass && (\n                <span className={`h-2.5 w-2.5 rounded-full ${col.accentClass}`} aria-hidden=\"true\" />\n              )}\n              <h3 className=\"text-xs font-bold uppercase tracking-widest text-slate-600\">\n                {col.label}\n              </h3>\n            </div>\n            <span\n              aria-label={`${col.cards.length} cards`}\n              className=\"rounded-full bg-slate-200 px-2 py-0.5 text-[10px] font-bold text-slate-500\"\n            >\n              {col.cards.length}\n            </span>\n          </div>\n\n          {/* Cards */}\n          <ul className=\"flex flex-col gap-2 px-3 pb-3\" aria-label={`${col.label} cards`}>\n            {col.cards.map((card) => (\n              <li key={card.id}>\n                <div className=\"rounded-xl border border-slate-200 bg-white p-3 shadow-sm\">\n                  {card.content}\n                </div>\n              </li>\n            ))}\n            {col.cards.length === 0 && (\n              <li>\n                <div className=\"flex items-center justify-center rounded-xl border-2 border-dashed border-slate-200 p-4 text-xs font-medium text-slate-400\">\n                  No cards\n                </div>\n              </li>\n            )}\n          </ul>\n        </section>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;AAqCA,SAAgB,OAAO,EAAE,SAAS,YAAY,MAAmB;CAC/D,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,WAAW,0CAA0C;EACvD,UAAA,QAAQ,KAAK,QACZ,iBAAA,GAAA,kBAAA,KAAA,CAAC,WAAD;GAEE,cAAY,GAAG,IAAI,MAAM,WAAW,IAAI,MAAM,OAAO;GACrD,WAAU;GAHZ,UAAA,CAME,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACG,IAAI,eACH,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MAAM,WAAW,4BAA4B,IAAI;MAAe,eAAY;KAAQ,CAAA,GAEtF,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;MAAI,WAAU;MACX,UAAA,IAAI;KACH,CAAA,CACD;IACL,CAAA,GAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;KACE,cAAY,GAAG,IAAI,MAAM,OAAO;KAChC,WAAU;KAET,UAAA,IAAI,MAAM;IACP,CAAA,CACH;GAGL,CAAA,GAAA,iBAAA,GAAA,kBAAA,KAAA,CAAC,MAAD;IAAI,WAAU;IAAgC,cAAY,GAAG,IAAI,MAAM;IAAvE,UAAA,CACG,IAAI,MAAM,KAAK,SACd,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAU;KACZ,UAAA,KAAK;IACH,CAAA,EACH,GAJK,KAAK,EAIV,CACL,GACA,IAAI,MAAM,WAAW,KACpB,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAU;KAA6H,UAAA;IAEvI,CAAA,EACH,CAAA,CAEJ;GACG,CAAA,CAAA;EAvCF,GAAA,IAAI,EAuCF,CACV;CACE,CAAA;AAET"}

package/lib/index63.mjs

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui-library/gallery/kanban/Kanban.tsx
+function Kanban({ columns, className = "" }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `w-full flex gap-4 overflow-x-auto pb-2 ${className}`,
+		children: columns.map((col) => /* @__PURE__ */ jsxs("section", {
+			"aria-label": `${col.label} column, ${col.cards.length} cards`,
+			className: "flex w-64 shrink-0 flex-col rounded-2xl border border-slate-200 bg-slate-50/60 overflow-hidden",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between px-4 py-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [col.accentClass && /* @__PURE__ */ jsx("span", {
+						className: `h-2.5 w-2.5 rounded-full ${col.accentClass}`,
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ jsx("h3", {
+						className: "text-xs font-bold uppercase tracking-widest text-slate-600",
+						children: col.label
+					})]
+				}), /* @__PURE__ */ jsx("span", {
+					"aria-label": `${col.cards.length} cards`,
+					className: "rounded-full bg-slate-200 px-2 py-0.5 text-[10px] font-bold text-slate-500",
+					children: col.cards.length
+				})]
+			}), /* @__PURE__ */ jsxs("ul", {
+				className: "flex flex-col gap-2 px-3 pb-3",
+				"aria-label": `${col.label} cards`,
+				children: [col.cards.map((card) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("div", {
+					className: "rounded-xl border border-slate-200 bg-white p-3 shadow-sm",
+					children: card.content
+				}) }, card.id)), col.cards.length === 0 && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("div", {
+					className: "flex items-center justify-center rounded-xl border-2 border-dashed border-slate-200 p-4 text-xs font-medium text-slate-400",
+					children: "No cards"
+				}) })]
+			})]
+		}, col.id))
+	});
+}
+//#endregion
+export { Kanban };
+
+//# sourceMappingURL=index63.mjs.map

package/lib/index63.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index63.mjs","names":[],"sources":["../src/ui-library/gallery/kanban/Kanban.tsx"],"sourcesContent":["/**\n * Kanban — Design System Component\n *\n * A static column-based board for visualizing workflow states.\n * Cards are rendered by the caller; this component provides the\n * column layout and card slot structure.\n *\n * No drag-and-drop: this is a gallery demonstration component.\n * For drag-and-drop in production, add @dnd-kit or similar.\n *\n * Accessibility:\n *   - Each column is a <section> with aria-label\n *   - Card count announced via aria-label on the count badge\n *   - Card slots render as <li> items in a <ul>\n */\n\nimport type { ReactNode } from 'react';\n\nexport interface KanbanColumn {\n  id: string;\n  label: string;\n  /** Color class for the column header accent. E.g. \"bg-amber-400\" */\n  accentClass?: string;\n  cards: KanbanCard[];\n}\n\nexport interface KanbanCard {\n  id: string;\n  content: ReactNode;\n}\n\nexport interface KanbanProps {\n  columns: KanbanColumn[];\n  /** Additional class on the root element. */\n  className?: string;\n}\n\nexport function Kanban({ columns, className = '' }: KanbanProps) {\n  return (\n    <div className={`w-full flex gap-4 overflow-x-auto pb-2 ${className}`}>\n      {columns.map((col) => (\n        <section\n          key={col.id}\n          aria-label={`${col.label} column, ${col.cards.length} cards`}\n          className=\"flex w-64 shrink-0 flex-col rounded-2xl border border-slate-200 bg-slate-50/60 overflow-hidden\"\n        >\n          {/* Column header */}\n          <div className=\"flex items-center justify-between px-4 py-3\">\n            <div className=\"flex items-center gap-2\">\n              {col.accentClass && (\n                <span className={`h-2.5 w-2.5 rounded-full ${col.accentClass}`} aria-hidden=\"true\" />\n              )}\n              <h3 className=\"text-xs font-bold uppercase tracking-widest text-slate-600\">\n                {col.label}\n              </h3>\n            </div>\n            <span\n              aria-label={`${col.cards.length} cards`}\n              className=\"rounded-full bg-slate-200 px-2 py-0.5 text-[10px] font-bold text-slate-500\"\n            >\n              {col.cards.length}\n            </span>\n          </div>\n\n          {/* Cards */}\n          <ul className=\"flex flex-col gap-2 px-3 pb-3\" aria-label={`${col.label} cards`}>\n            {col.cards.map((card) => (\n              <li key={card.id}>\n                <div className=\"rounded-xl border border-slate-200 bg-white p-3 shadow-sm\">\n                  {card.content}\n                </div>\n              </li>\n            ))}\n            {col.cards.length === 0 && (\n              <li>\n                <div className=\"flex items-center justify-center rounded-xl border-2 border-dashed border-slate-200 p-4 text-xs font-medium text-slate-400\">\n                  No cards\n                </div>\n              </li>\n            )}\n          </ul>\n        </section>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;AAqCA,SAAgB,OAAO,EAAE,SAAS,YAAY,MAAmB;CAC/D,OACE,oBAAC,OAAD;EAAK,WAAW,0CAA0C;EACvD,UAAA,QAAQ,KAAK,QACZ,qBAAC,WAAD;GAEE,cAAY,GAAG,IAAI,MAAM,WAAW,IAAI,MAAM,OAAO;GACrD,WAAU;GAHZ,UAAA,CAME,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACG,IAAI,eACH,oBAAC,QAAD;MAAM,WAAW,4BAA4B,IAAI;MAAe,eAAY;KAAQ,CAAA,GAEtF,oBAAC,MAAD;MAAI,WAAU;MACX,UAAA,IAAI;KACH,CAAA,CACD;IACL,CAAA,GAAA,oBAAC,QAAD;KACE,cAAY,GAAG,IAAI,MAAM,OAAO;KAChC,WAAU;KAET,UAAA,IAAI,MAAM;IACP,CAAA,CACH;GAGL,CAAA,GAAA,qBAAC,MAAD;IAAI,WAAU;IAAgC,cAAY,GAAG,IAAI,MAAM;IAAvE,UAAA,CACG,IAAI,MAAM,KAAK,SACd,oBAAC,MAAD,EAAA,UACE,oBAAC,OAAD;KAAK,WAAU;KACZ,UAAA,KAAK;IACH,CAAA,EACH,GAJK,KAAK,EAIV,CACL,GACA,IAAI,MAAM,WAAW,KACpB,oBAAC,MAAD,EAAA,UACE,oBAAC,OAAD;KAAK,WAAU;KAA6H,UAAA;IAEvI,CAAA,EACH,CAAA,CAEJ;GACG,CAAA,CAAA;EAvCF,GAAA,IAAI,EAuCF,CACV;CACE,CAAA;AAET"}