@mks2508/mks-ui 0.6.8 → 0.8.0

package/dist/react-ui/ui/FilePanel/index.d.ts

@@ -0,0 +1,55 @@
+/**
+ * FilePanel — IDE-style file-panel frame (header + toolbar + body + footer).
+ *
+ * Thin frame primitive: no business logic, no data fetching. Each region is
+ * a slot so consumers compose what goes inside — typically a `<FileTree>`
+ * in the body and an `<Input>` in the search slot.
+ *
+ * Layout:
+ *   ┌───────────────────────────────────┐
+ *   │ header (title · actions)          │  (sticky)
+ *   ├───────────────────────────────────┤
+ *   │ toolbar (search · extras)         │  (optional)
+ *   ├───────────────────────────────────┤
+ *   │                                   │
+ *   │ body (children — FileTree, etc.)  │  (scrollable)
+ *   │                                   │
+ *   ├───────────────────────────────────┤
+ *   │ footer (status · actions)         │  (optional)
+ *   └───────────────────────────────────┘
+ *
+ * @module @mks2508/mks-ui/react/ui/FilePanel
+ */
+import type { IFilePanelProps } from './FilePanel.types';
+/**
+ * FilePanel — frame around file-tree UI (header + toolbar + body + footer).
+ *
+ * @example
+ * ```tsx
+ * <FilePanel
+ *   title="Files"
+ *   search={<Input placeholder="Filter..." />}
+ *   status={`${count} files`}
+ * >
+ *   <FileTree nodes={nodes} onSelect={onSelect} />
+ * </FilePanel>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Borderless, with trailing actions
+ * <FilePanel
+ *   title="Project"
+ *   actions={<Button size="sm">Refresh</Button>}
+ *   bordered={false}
+ *   slots={{ header: 'bg-primary/5' }}
+ * >
+ *   {tree}
+ * </FilePanel>
+ * ```
+ */
+export declare const FilePanel: import("react").MemoExoticComponent<({ title, actions, search, toolbar, children, status, footerActions, density, bordered, className, slots, }: IFilePanelProps) => import("react/jsx-runtime").JSX.Element>;
+export { FilePanelStyles, filePanelVariants } from './FilePanel.styles';
+export type { FilePanelSlot } from './FilePanel.styles';
+export type { IFilePanelProps, FilePanelDensity } from './FilePanel.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/react-ui/ui/FilePanel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/FilePanel/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAOH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,SAAS,mJAYnB,eAAe,6CAmDhB,CAAC;AAEH,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACxE,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/react-ui/ui/FilePanel/index.js

@@ -0,0 +1,107 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { FilePanelStyles, filePanelVariants } from "./FilePanel.styles.js";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/ui/FilePanel/index.tsx
+/**
+* FilePanel — IDE-style file-panel frame (header + toolbar + body + footer).
+*
+* Thin frame primitive: no business logic, no data fetching. Each region is
+* a slot so consumers compose what goes inside — typically a `<FileTree>`
+* in the body and an `<Input>` in the search slot.
+*
+* Layout:
+*   ┌───────────────────────────────────┐
+*   │ header (title · actions)          │  (sticky)
+*   ├───────────────────────────────────┤
+*   │ toolbar (search · extras)         │  (optional)
+*   ├───────────────────────────────────┤
+*   │                                   │
+*   │ body (children — FileTree, etc.)  │  (scrollable)
+*   │                                   │
+*   ├───────────────────────────────────┤
+*   │ footer (status · actions)         │  (optional)
+*   └───────────────────────────────────┘
+*
+* @module @mks2508/mks-ui/react/ui/FilePanel
+*/
+/**
+* FilePanel — frame around file-tree UI (header + toolbar + body + footer).
+*
+* @example
+* ```tsx
+* <FilePanel
+*   title="Files"
+*   search={<Input placeholder="Filter..." />}
+*   status={`${count} files`}
+* >
+*   <FileTree nodes={nodes} onSelect={onSelect} />
+* </FilePanel>
+* ```
+*
+* @example
+* ```tsx
+* // Borderless, with trailing actions
+* <FilePanel
+*   title="Project"
+*   actions={<Button size="sm">Refresh</Button>}
+*   bordered={false}
+*   slots={{ header: 'bg-primary/5' }}
+* >
+*   {tree}
+* </FilePanel>
+* ```
+*/
+const FilePanel = memo(function FilePanel({ title, actions, search, toolbar, children, status, footerActions, density = "compact", bordered = true, className, slots }) {
+	const hasHeader = title !== void 0 || actions !== void 0;
+	const hasToolbar = search !== void 0 || toolbar !== void 0;
+	const hasFooter = status !== void 0 || footerActions !== void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(filePanelVariants({
+			density,
+			bordered
+		}), slots?.root, className),
+		children: [
+			hasHeader && /* @__PURE__ */ jsxs("div", {
+				className: cn(FilePanelStyles.header, slots?.header),
+				children: [/* @__PURE__ */ jsx("div", {
+					className: cn(FilePanelStyles.title, slots?.title),
+					children: title
+				}), actions && /* @__PURE__ */ jsx("div", {
+					className: "flex items-center gap-1 shrink-0",
+					children: actions
+				})]
+			}),
+			hasToolbar && /* @__PURE__ */ jsxs("div", {
+				className: cn(FilePanelStyles.toolbar, slots?.toolbar),
+				children: [search !== void 0 && /* @__PURE__ */ jsx("div", {
+					className: cn(FilePanelStyles.search, slots?.search),
+					children: search
+				}), toolbar && /* @__PURE__ */ jsx("div", {
+					className: "flex items-center gap-1 shrink-0",
+					children: toolbar
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn(FilePanelStyles.body, slots?.body),
+				children
+			}),
+			hasFooter && /* @__PURE__ */ jsxs("div", {
+				className: cn(FilePanelStyles.footer, slots?.footer),
+				children: [/* @__PURE__ */ jsx("div", {
+					className: cn(FilePanelStyles.status, slots?.status),
+					children: status
+				}), footerActions && /* @__PURE__ */ jsx("div", {
+					className: "flex items-center gap-1 shrink-0 ml-auto",
+					children: footerActions
+				})]
+			})
+		]
+	});
+});
+
+//#endregion
+export { FilePanel };

package/dist/react-ui/ui/FileTree/FileTree.styles.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Styles for FileTree.
+ *
+ * @module @mks2508/mks-ui/react/ui/FileTree
+ */
+import type { StyleSlots } from '../../../core/types';
+/** Visual regions of the FileTree component. */
+export type FileTreeSlot = 'root' | 'list' | 'node' | 'row' | 'indent' | 'chevron' | 'empty';
+/**
+ * Default Tailwind classes for each FileTree slot.
+ *
+ * | Slot | Region |
+ * |------|--------|
+ * | `root` | Outer container (role="tree") |
+ * | `list` | Child list (`role="group"`) |
+ * | `node` | Single node wrapper (row + children) |
+ * | `row` | Row line holding indent guides + chevron + FileItem |
+ * | `indent` | Leading indent spacer per depth level |
+ * | `chevron` | Expand/collapse glyph for directories |
+ * | `empty` | "No files" placeholder |
+ */
+export declare const FileTreeStyles: StyleSlots<FileTreeSlot>;
+/**
+ * CVA variants for the FileTree root.
+ *
+ * Density variants map to the underlying `FileItem` density so rows align.
+ */
+export declare const fileTreeVariants: (props?: ({
+    density?: "compact" | "comfortable" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=FileTree.styles.d.ts.map

package/dist/react-ui/ui/FileTree/FileTree.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileTree.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/FileTree/FileTree.styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,gDAAgD;AAChD,MAAM,MAAM,YAAY,GACpB,MAAM,GACN,MAAM,GACN,MAAM,GACN,KAAK,GACL,QAAQ,GACR,SAAS,GACT,OAAO,CAAC;AAEZ;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,EAAE,UAAU,CAAC,YAAY,CAS1C,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;;8EAU3B,CAAC"}

package/dist/react-ui/ui/FileTree/FileTree.styles.js

@@ -0,0 +1,45 @@
+import { cva } from "class-variance-authority";
+
+//#region src/react-ui/ui/FileTree/FileTree.styles.ts
+/**
+* Styles for FileTree.
+*
+* @module @mks2508/mks-ui/react/ui/FileTree
+*/
+/**
+* Default Tailwind classes for each FileTree slot.
+*
+* | Slot | Region |
+* |------|--------|
+* | `root` | Outer container (role="tree") |
+* | `list` | Child list (`role="group"`) |
+* | `node` | Single node wrapper (row + children) |
+* | `row` | Row line holding indent guides + chevron + FileItem |
+* | `indent` | Leading indent spacer per depth level |
+* | `chevron` | Expand/collapse glyph for directories |
+* | `empty` | "No files" placeholder |
+*/
+const FileTreeStyles = {
+	root: "file-tree flex flex-col w-full text-foreground",
+	list: "flex flex-col",
+	node: "flex flex-col",
+	row: "flex items-center w-full",
+	indent: "shrink-0 h-full",
+	chevron: "shrink-0 inline-flex items-center justify-center size-4 text-muted-foreground/70 hover:text-foreground transition-transform duration-100",
+	empty: "px-3 py-2 text-xs font-mono text-muted-foreground/60"
+};
+/**
+* CVA variants for the FileTree root.
+*
+* Density variants map to the underlying `FileItem` density so rows align.
+*/
+const fileTreeVariants = cva(FileTreeStyles.root, {
+	variants: { density: {
+		compact: "",
+		comfortable: ""
+	} },
+	defaultVariants: { density: "compact" }
+});
+
+//#endregion
+export { FileTreeStyles, fileTreeVariants };

package/dist/react-ui/ui/FileTree/FileTree.types.d.ts

@@ -0,0 +1,95 @@
+/**
+ * Types for FileTree.
+ *
+ * @module @mks2508/mks-ui/react/ui/FileTree
+ */
+import type { VariantProps } from 'class-variance-authority';
+import type { SlotOverrides } from '../../../core/types';
+import type { FileIconResolver } from '../FileIcon/FileIcon.types';
+import type { FileItemChangeStatus } from '../FileItem/FileItem.types';
+import type { FileTreeSlot, fileTreeVariants } from './FileTree.styles';
+/** What kind of filesystem entry a tree node represents. */
+export type FileTreeNodeKind = 'file' | 'dir';
+/**
+ * A single node in a file tree.
+ *
+ * Nodes are identified by `id` (typically the relative path). Directories
+ * may have `children` eagerly populated, or `null`/`undefined` to indicate
+ * unloaded children that will be fetched lazily via `onToggle`.
+ */
+export interface IFileTreeNode {
+    /** Stable identifier — usually the relpath. */
+    id: string;
+    /** Display name (usually basename). */
+    name: string;
+    /** Full path relative to root (shown in `FileItem`). */
+    path: string;
+    /** File or directory. */
+    kind: FileTreeNodeKind;
+    /** Last-modified timestamp (rendered as trailing chip on the row). */
+    modifiedAt?: Date;
+    /** Whether this node is boosted (⭐ on the row). */
+    isBoosted?: boolean;
+    /** Optional git change status — proxied to the underlying `FileItem`. */
+    changeStatus?: FileItemChangeStatus | null;
+    /**
+     * Children for directories.
+     * - `undefined` → unloaded (will request on expand)
+     * - `[]` → loaded, empty
+     * - `IFileTreeNode[]` → loaded with entries
+     */
+    children?: IFileTreeNode[];
+}
+/** Visual density, proxied to `FileItem`. */
+export type FileTreeDensity = NonNullable<VariantProps<typeof fileTreeVariants>['density']>;
+/**
+ * Props for FileTree.
+ *
+ * @see {@link FileTreeSlot}
+ */
+export interface IFileTreeProps extends Omit<VariantProps<typeof fileTreeVariants>, 'density'> {
+    /** Root nodes to render. */
+    nodes: IFileTreeNode[];
+    /** Fired when a file row is activated (Enter / click on file). */
+    onSelect?: (node: IFileTreeNode) => void;
+    /**
+     * Fired when a directory is expanded or collapsed.
+     *
+     * Called with the node and the next-expanded state. Useful for lazy-loading
+     * children — consumers can fetch children and push them into `nodes`.
+     */
+    onToggle?: (node: IFileTreeNode, expanded: boolean) => void;
+    /**
+     * Controlled expanded-ids. If provided, the tree is controlled and
+     * `onToggle` is expected to update this set upstream.
+     * If omitted, the tree manages its own expand state internally.
+     */
+    expandedIds?: ReadonlySet<string> | readonly string[];
+    /** Controlled selected id. Highlights the matching row. */
+    selectedId?: string;
+    /** Row density (proxied to `FileItem`). Default `"compact"`. */
+    density?: FileTreeDensity;
+    /** Icon base path passed to inner `FileItem` rows. */
+    iconBasePath?: string;
+    /** Custom file-icon resolver passed to inner `FileItem` rows. */
+    iconResolve?: FileIconResolver;
+    /** Indent width in px per depth level. Default `12`. */
+    indentPx?: number;
+    /** Empty-state text shown when `nodes` is empty. Default `"No files"`. */
+    emptyLabel?: string;
+    /** Optional CSS class merged onto the root. */
+    className?: string;
+    /**
+     * Override default Tailwind classes for specific visual regions.
+     *
+     * @example
+     * ```tsx
+     * <FileTree
+     *   nodes={tree}
+     *   slots={{ chevron: 'text-primary', row: 'rounded-md' }}
+     * />
+     * ```
+     */
+    slots?: SlotOverrides<FileTreeSlot>;
+}
+//# sourceMappingURL=FileTree.types.d.ts.map

package/dist/react-ui/ui/FileTree/FileTree.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileTree.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/FileTree/FileTree.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AACvE,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAExE,4DAA4D;AAC5D,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,KAAK,CAAC;AAE9C;;;;;;GAMG;AACH,MAAM,WAAW,aAAa;IAC5B,+CAA+C;IAC/C,EAAE,EAAE,MAAM,CAAC;IACX,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,wDAAwD;IACxD,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,IAAI,EAAE,gBAAgB,CAAC;IACvB,sEAAsE;IACtE,UAAU,CAAC,EAAE,IAAI,CAAC;IAClB,mDAAmD;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yEAAyE;IACzE,YAAY,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC3C;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;CAC5B;AAED,6CAA6C;AAC7C,MAAM,MAAM,eAAe,GAAG,WAAW,CACvC,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC,SAAS,CAAC,CACjD,CAAC;AAEF;;;;GAIG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC9D,4BAA4B;IAC5B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5D;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,SAAS,MAAM,EAAE,CAAC;IACtD,2DAA2D;IAC3D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gEAAgE;IAChE,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iEAAiE;IACjE,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACrC"}

package/dist/react-ui/ui/FileTree/index.d.ts

@@ -0,0 +1,60 @@
+/**
+ * FileTree — collapsible tree renderer over `FileItem` rows.
+ *
+ * Lightweight tree over the `FileItem` primitive. Directories render a
+ * chevron that toggles expansion; files act as leaves. Supports either
+ * uncontrolled expansion (internal state) or controlled via `expandedIds`
+ * + `onToggle` (useful for lazy-loading children).
+ *
+ * Keyboard: rows are reachable via Tab (inherited from `FileItem`). Enter/
+ * Space on a file fires `onSelect`; Enter/Space on a dir toggles expansion.
+ * ArrowRight expands a dir, ArrowLeft collapses it.
+ *
+ * @module @mks2508/mks-ui/react/ui/FileTree
+ */
+import type { IFileTreeProps } from './FileTree.types';
+/**
+ * FileTree — tree of `FileItem` rows with expand/collapse.
+ *
+ * @example
+ * ```tsx
+ * <FileTree
+ *   nodes={[
+ *     {
+ *       id: 'src',
+ *       name: 'src',
+ *       path: 'src',
+ *       kind: 'dir',
+ *       children: [
+ *         { id: 'src/App.tsx', name: 'App.tsx', path: 'src/App.tsx', kind: 'file' },
+ *       ],
+ *     },
+ *   ]}
+ *   onSelect={(n) => console.log('selected', n.path)}
+ *   onToggle={(n, exp) => console.log('toggled', n.path, exp)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Controlled expansion for lazy loading
+ * const [expanded, setExpanded] = useState<Set<string>>(new Set());
+ * <FileTree
+ *   nodes={nodes}
+ *   expandedIds={expanded}
+ *   onToggle={(n, exp) => {
+ *     setExpanded((prev) => {
+ *       const next = new Set(prev);
+ *       if (exp) next.add(n.id); else next.delete(n.id);
+ *       return next;
+ *     });
+ *     if (exp && !n.children) loadChildren(n);
+ *   }}
+ * />
+ * ```
+ */
+export declare const FileTree: import("react").MemoExoticComponent<({ nodes, onSelect, onToggle, expandedIds, selectedId, density, iconBasePath, iconResolve, indentPx, emptyLabel, className, slots, }: IFileTreeProps) => import("react/jsx-runtime").JSX.Element>;
+export { FileTreeStyles, fileTreeVariants } from './FileTree.styles';
+export type { FileTreeSlot } from './FileTree.styles';
+export type { IFileTreeProps, IFileTreeNode, FileTreeNodeKind, FileTreeDensity, } from './FileTree.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/react-ui/ui/FileTree/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/FileTree/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAQH,OAAO,KAAK,EAEV,cAAc,EACf,MAAM,kBAAkB,CAAC;AAkK1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,QAAQ,4KAalB,cAAc,6CAsEf,CAAC;AAEH,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrE,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,YAAY,EACV,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,eAAe,GAChB,MAAM,kBAAkB,CAAC"}

package/dist/react-ui/ui/FileTree/index.js

@@ -0,0 +1,226 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { FileItem } from "../FileItem/index.js";
+import { FileTreeStyles, fileTreeVariants } from "./FileTree.styles.js";
+import { memo, useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/ui/FileTree/index.tsx
+/**
+* FileTree — collapsible tree renderer over `FileItem` rows.
+*
+* Lightweight tree over the `FileItem` primitive. Directories render a
+* chevron that toggles expansion; files act as leaves. Supports either
+* uncontrolled expansion (internal state) or controlled via `expandedIds`
+* + `onToggle` (useful for lazy-loading children).
+*
+* Keyboard: rows are reachable via Tab (inherited from `FileItem`). Enter/
+* Space on a file fires `onSelect`; Enter/Space on a dir toggles expansion.
+* ArrowRight expands a dir, ArrowLeft collapses it.
+*
+* @module @mks2508/mks-ui/react/ui/FileTree
+*/
+/** Default pixel width per indent level. */
+const DEFAULT_INDENT_PX = 12;
+/** Normalise the `expandedIds` prop into a stable `Set<string>`. */
+function toSet(ids) {
+	if (!ids) return null;
+	if (ids instanceof Set) return new Set(ids);
+	return new Set(ids);
+}
+/** Single row (FileItem + chevron + indent) with recursive children rendering. */
+const NodeRow = memo(function NodeRow({ node, depth, expanded, selectedId, indentPx, density, iconBasePath, iconResolve, slots, onToggle, onSelect }) {
+	const isDir = node.kind === "dir";
+	const isExpanded = isDir && expanded.has(node.id);
+	const isSelected = selectedId === node.id;
+	const handleRowSelect = useCallback(() => {
+		if (isDir) onToggle(node, !isExpanded);
+		else onSelect(node);
+	}, [
+		isDir,
+		isExpanded,
+		node,
+		onSelect,
+		onToggle
+	]);
+	const handleChevronClick = useCallback((e) => {
+		e.stopPropagation();
+		onToggle(node, !isExpanded);
+	}, [
+		isExpanded,
+		node,
+		onToggle
+	]);
+	const handleKeyDown = useCallback((e) => {
+		if (!isDir) return;
+		if (e.key === "ArrowRight" && !isExpanded) {
+			e.preventDefault();
+			onToggle(node, true);
+		} else if (e.key === "ArrowLeft" && isExpanded) {
+			e.preventDefault();
+			onToggle(node, false);
+		}
+	}, [
+		isDir,
+		isExpanded,
+		node,
+		onToggle
+	]);
+	const children = isExpanded ? node.children ?? [] : [];
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(FileTreeStyles.node, slots?.node),
+		role: "none",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn(FileTreeStyles.row, slots?.row),
+			onKeyDown: handleKeyDown,
+			children: [
+				depth > 0 && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: cn(FileTreeStyles.indent, slots?.indent),
+					style: { width: depth * indentPx }
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": isExpanded ? "Collapse" : "Expand",
+					"aria-expanded": isDir ? isExpanded : void 0,
+					tabIndex: -1,
+					onClick: handleChevronClick,
+					className: cn(FileTreeStyles.chevron, !isDir && "invisible", isExpanded && "rotate-90", slots?.chevron),
+					children: /* @__PURE__ */ jsx("svg", {
+						viewBox: "0 0 12 12",
+						width: "10",
+						height: "10",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "1.5",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						children: /* @__PURE__ */ jsx("path", { d: "M4.5 3 L8 6 L4.5 9" })
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex-1 min-w-0",
+					children: /* @__PURE__ */ jsx(FileItem, {
+						path: node.path,
+						kind: node.kind,
+						modifiedAt: node.modifiedAt,
+						isBoosted: node.isBoosted,
+						changeStatus: node.changeStatus,
+						selected: isSelected,
+						onSelect: handleRowSelect,
+						density,
+						iconBasePath,
+						iconResolve
+					})
+				})
+			]
+		}), isExpanded && children.length > 0 && /* @__PURE__ */ jsx("div", {
+			role: "group",
+			className: cn(FileTreeStyles.list, slots?.list),
+			children: children.map((child) => /* @__PURE__ */ jsx(NodeRow, {
+				node: child,
+				depth: depth + 1,
+				expanded,
+				selectedId,
+				indentPx,
+				density,
+				iconBasePath,
+				iconResolve,
+				slots,
+				onToggle,
+				onSelect
+			}, child.id))
+		})]
+	});
+});
+/**
+* FileTree — tree of `FileItem` rows with expand/collapse.
+*
+* @example
+* ```tsx
+* <FileTree
+*   nodes={[
+*     {
+*       id: 'src',
+*       name: 'src',
+*       path: 'src',
+*       kind: 'dir',
+*       children: [
+*         { id: 'src/App.tsx', name: 'App.tsx', path: 'src/App.tsx', kind: 'file' },
+*       ],
+*     },
+*   ]}
+*   onSelect={(n) => console.log('selected', n.path)}
+*   onToggle={(n, exp) => console.log('toggled', n.path, exp)}
+* />
+* ```
+*
+* @example
+* ```tsx
+* // Controlled expansion for lazy loading
+* const [expanded, setExpanded] = useState<Set<string>>(new Set());
+* <FileTree
+*   nodes={nodes}
+*   expandedIds={expanded}
+*   onToggle={(n, exp) => {
+*     setExpanded((prev) => {
+*       const next = new Set(prev);
+*       if (exp) next.add(n.id); else next.delete(n.id);
+*       return next;
+*     });
+*     if (exp && !n.children) loadChildren(n);
+*   }}
+* />
+* ```
+*/
+const FileTree = memo(function FileTree({ nodes, onSelect, onToggle, expandedIds, selectedId, density = "compact", iconBasePath, iconResolve, indentPx = DEFAULT_INDENT_PX, emptyLabel = "No files", className, slots }) {
+	const controlled = expandedIds !== void 0;
+	const controlledSet = useMemo(() => toSet(expandedIds), [expandedIds]);
+	const [internal, setInternal] = useState(() => /* @__PURE__ */ new Set());
+	const expanded = controlled ? controlledSet : internal;
+	const handleToggle = useCallback((node, next) => {
+		if (!controlled) setInternal((prev) => {
+			const nextSet = new Set(prev);
+			if (next) nextSet.add(node.id);
+			else nextSet.delete(node.id);
+			return nextSet;
+		});
+		onToggle?.(node, next);
+	}, [controlled, onToggle]);
+	const handleSelect = useCallback((node) => {
+		onSelect?.(node);
+	}, [onSelect]);
+	if (!nodes || nodes.length === 0) return /* @__PURE__ */ jsx("div", {
+		role: "tree",
+		className: cn(fileTreeVariants({ density }), slots?.root, className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn(FileTreeStyles.empty, slots?.empty),
+			children: emptyLabel
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		role: "tree",
+		className: cn(fileTreeVariants({ density }), slots?.root, className),
+		children: /* @__PURE__ */ jsx("div", {
+			role: "group",
+			className: cn(FileTreeStyles.list, slots?.list),
+			children: nodes.map((node) => /* @__PURE__ */ jsx(NodeRow, {
+				node,
+				depth: 0,
+				expanded,
+				selectedId,
+				indentPx,
+				density,
+				iconBasePath,
+				iconResolve,
+				slots,
+				onToggle: handleToggle,
+				onSelect: handleSelect
+			}, node.id))
+		})
+	});
+});
+
+//#endregion
+export { FileTree };

package/dist/react-ui/ui/GooeyButton/GooeyButton.types.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Types for the GooeyButton component — a clickable pill that reveals a
+ * card via a gooey SVG-filter morph.
+ *
+ * @module @mks2508/mks-ui/react/ui/GooeyButton
+ */
+import type { ReactNode } from 'react';
+import type { IGooeyMorphConfig, IGooeyMorphSlots } from '../../../react-ui/primitives/GooeyMorphingSurface';
+export interface IGooeyButtonProps {
+    /** Controlled open state. */
+    open?: boolean;
+    /** Default open state for uncontrolled usage. */
+    defaultOpen?: boolean;
+    /** Change callback for the open state. */
+    onOpenChange?: (open: boolean) => void;
+    /** Content rendered inside the pill. */
+    pill: ReactNode;
+    /** Content rendered inside the card body (revealed when open). */
+    card: ReactNode;
+    /** Partial override of the morph config. */
+    config?: Partial<IGooeyMorphConfig>;
+    /** Close when Escape is pressed. Default: true. */
+    closeOnEscape?: boolean;
+    /** Close when clicking outside the host element. Default: true. */
+    closeOnOutside?: boolean;
+    /** Disable the trigger. */
+    disabled?: boolean;
+    /** Extra className for the host. */
+    className?: string;
+    /** Per-slot className overrides (forwarded to primitive). */
+    slots?: IGooeyMorphSlots;
+    /** aria-label for the trigger button (defaults to "Toggle"). */
+    'aria-label'?: string;
+}
+//# sourceMappingURL=GooeyButton.types.d.ts.map

package/dist/react-ui/ui/GooeyButton/GooeyButton.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GooeyButton.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/GooeyButton/GooeyButton.types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EACX,iBAAiB,EACjB,gBAAgB,EAChB,MAAM,4CAA4C,CAAC;AAEpD,MAAM,WAAW,iBAAiB;IACjC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,wCAAwC;IACxC,IAAI,EAAE,SAAS,CAAC;IAChB,kEAAkE;IAClE,IAAI,EAAE,SAAS,CAAC;IAChB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACpC,mDAAmD;IACnD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mEAAmE;IACnE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,gEAAgE;IAChE,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB"}