@mks2508/mks-ui 0.7.0 → 0.8.0

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

@@ -0,0 +1,124 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { FileIcon } from "../FileIcon/index.js";
+import { MiddleTruncatePath } from "../MiddleTruncatePath/index.js";
+import { FileItemGitStatusClasses, FileItemStyles, fileItemVariants } from "./FileItem.styles.js";
+import { memo, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/ui/FileItem/index.tsx
+/**
+* FileItem — compact file-row primitive (icon + path + modified-chip + boost).
+*
+* Trimmed port of `mks-mission-control`'s FileItem: git-status dots,
+* staging, discard flow, context menu and multi-select were all stripped.
+* This is the row shape expected by mention menus, file pickers and
+* simple file lists.
+*
+* Layout (compact, 28px row):
+*   [icon] [path — middle truncated] [modified-chip?] [⭐?]
+*
+* Keyboard: `role="option"`, `tabIndex=0`, Enter/Space fires `onSelect`.
+*
+* @module @mks2508/mks-ui/react/ui/FileItem
+*/
+/** Very small relative-time formatter ("3m ago", "4h ago", "2d ago"). */
+function formatRelative(now, then) {
+	const diff = Math.max(0, now - then);
+	const s = Math.floor(diff / 1e3);
+	if (s < 60) return `${s}s ago`;
+	const m = Math.floor(s / 60);
+	if (m < 60) return `${m}m ago`;
+	const h = Math.floor(m / 60);
+	if (h < 24) return `${h}h ago`;
+	const d = Math.floor(h / 24);
+	if (d < 30) return `${d}d ago`;
+	const mo = Math.floor(d / 30);
+	if (mo < 12) return `${mo}mo ago`;
+	return `${Math.floor(mo / 12)}y ago`;
+}
+/**
+* FileItem — single row rendering an icon, path, optional modified chip and boost star.
+*
+* @param density - Row density (`compact` 28px vs `comfortable` 32px)
+* @param slots - Override Tailwind classes per visual slot
+*
+* @example
+* ```tsx
+* <FileItem
+*   path="src/components/Button/index.tsx"
+*   kind="file"
+*   modifiedAt={new Date()}
+*   isBoosted
+*   onSelect={() => console.log('picked')}
+* />
+* ```
+*
+* @example
+* ```tsx
+* // With slot overrides
+* <FileItem
+*   path="src/App.tsx"
+*   kind="file"
+*   slots={{ root: 'rounded-md', boost: 'text-destructive' }}
+* />
+* ```
+*/
+const FileItem = memo(function FileItem({ path, kind, modifiedAt, isBoosted = false, changeStatus, selected = false, onSelect, density = "compact", iconBasePath, iconResolve, className, tabIndex = 0, slots }) {
+	const filename = path.split("/").pop() ?? path;
+	const handleKeyDown = useCallback((e) => {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			onSelect?.();
+		}
+	}, [onSelect]);
+	const handleClick = useCallback(() => {
+		onSelect?.();
+	}, [onSelect]);
+	const iconSize = density === "comfortable" ? 16 : 15;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "option",
+		"aria-selected": selected,
+		tabIndex,
+		"data-active": selected || void 0,
+		"data-kind": kind,
+		onClick: handleClick,
+		onKeyDown: handleKeyDown,
+		className: cn(fileItemVariants({ density }), slots?.root, className),
+		children: [
+			/* @__PURE__ */ jsx(FileIcon, {
+				filename,
+				size: iconSize,
+				basePath: iconBasePath,
+				resolve: iconResolve,
+				className: cn(FileItemStyles.icon, slots?.icon)
+			}),
+			changeStatus && /* @__PURE__ */ jsx("span", {
+				"aria-label": `git: ${changeStatus}`,
+				title: `git: ${changeStatus}`,
+				"data-git-status": changeStatus,
+				className: cn(FileItemStyles.gitStatus, FileItemGitStatusClasses[changeStatus], slots?.gitStatus)
+			}),
+			/* @__PURE__ */ jsx(MiddleTruncatePath, {
+				path,
+				className: cn(FileItemStyles.path, slots?.path),
+				startClassName: "text-muted-foreground/60"
+			}),
+			modifiedAt && /* @__PURE__ */ jsx("span", {
+				className: cn(FileItemStyles.modifiedChip, slots?.modifiedChip),
+				title: modifiedAt.toISOString(),
+				children: formatRelative(Date.now(), modifiedAt.getTime())
+			}),
+			isBoosted && /* @__PURE__ */ jsx("span", {
+				"aria-label": "boosted",
+				title: "Boosted",
+				className: cn(FileItemStyles.boost, slots?.boost),
+				children: "★"
+			})
+		]
+	});
+});
+
+//#endregion
+export { FileItem };

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

@@ -0,0 +1,34 @@
+/**
+ * Styles for FilePanel.
+ *
+ * @module @mks2508/mks-ui/react/ui/FilePanel
+ */
+import type { StyleSlots } from '../../../core/types';
+/** Visual regions of the FilePanel component. */
+export type FilePanelSlot = 'root' | 'header' | 'title' | 'toolbar' | 'search' | 'body' | 'footer' | 'status';
+/**
+ * Default Tailwind classes for each FilePanel slot.
+ *
+ * | Slot | Region |
+ * |------|--------|
+ * | `root` | Outer panel frame |
+ * | `header` | Sticky header row (title + actions) |
+ * | `title` | Panel title text |
+ * | `toolbar` | Toolbar strip under the header (search input + chips) |
+ * | `search` | Search input slot wrapper |
+ * | `body` | Scrollable body that hosts the tree / children |
+ * | `footer` | Footer row |
+ * | `status` | Status text in the footer |
+ */
+export declare const FilePanelStyles: StyleSlots<FilePanelSlot>;
+/**
+ * CVA variants for the FilePanel root.
+ *
+ * Density variants adjust only padding; children (tree, search) pass
+ * their own density through their own props.
+ */
+export declare const filePanelVariants: (props?: ({
+    density?: "compact" | "comfortable" | null | undefined;
+    bordered?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=FilePanel.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilePanel.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/FilePanel/FilePanel.styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,iDAAiD;AACjD,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,QAAQ,GACR,OAAO,GACP,SAAS,GACT,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,QAAQ,CAAC;AAEb;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,eAAe,EAAE,UAAU,CAAC,aAAa,CAY5C,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB;;;8EAe5B,CAAC"}

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

@@ -0,0 +1,57 @@
+import { cva } from "class-variance-authority";
+
+//#region src/react-ui/ui/FilePanel/FilePanel.styles.ts
+/**
+* Styles for FilePanel.
+*
+* @module @mks2508/mks-ui/react/ui/FilePanel
+*/
+/**
+* Default Tailwind classes for each FilePanel slot.
+*
+* | Slot | Region |
+* |------|--------|
+* | `root` | Outer panel frame |
+* | `header` | Sticky header row (title + actions) |
+* | `title` | Panel title text |
+* | `toolbar` | Toolbar strip under the header (search input + chips) |
+* | `search` | Search input slot wrapper |
+* | `body` | Scrollable body that hosts the tree / children |
+* | `footer` | Footer row |
+* | `status` | Status text in the footer |
+*/
+const FilePanelStyles = {
+	root: "file-panel flex flex-col h-full w-full bg-card text-card-foreground border border-border rounded-lg overflow-hidden",
+	header: "shrink-0 flex items-center justify-between gap-2 px-3 h-9 border-b border-border bg-muted/30",
+	title: "text-xs font-semibold text-foreground truncate",
+	toolbar: "shrink-0 flex items-center gap-2 px-2 py-1.5 border-b border-border bg-background/40",
+	search: "flex-1 min-w-0",
+	body: "flex-1 min-h-0 overflow-y-auto",
+	footer: "shrink-0 flex items-center gap-2 px-3 h-7 border-t border-border bg-muted/20",
+	status: "text-[10px] font-mono text-muted-foreground/70 truncate"
+};
+/**
+* CVA variants for the FilePanel root.
+*
+* Density variants adjust only padding; children (tree, search) pass
+* their own density through their own props.
+*/
+const filePanelVariants = cva(FilePanelStyles.root, {
+	variants: {
+		density: {
+			compact: "",
+			comfortable: ""
+		},
+		bordered: {
+			true: "",
+			false: "border-0 rounded-none"
+		}
+	},
+	defaultVariants: {
+		density: "compact",
+		bordered: true
+	}
+});
+
+//#endregion
+export { FilePanelStyles, filePanelVariants };

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

@@ -0,0 +1,55 @@
+/**
+ * Types for FilePanel.
+ *
+ * @module @mks2508/mks-ui/react/ui/FilePanel
+ */
+import type { ReactNode } from 'react';
+import type { VariantProps } from 'class-variance-authority';
+import type { SlotOverrides } from '../../../core/types';
+import type { FilePanelSlot, filePanelVariants } from './FilePanel.styles';
+/** Visual density for the panel frame. */
+export type FilePanelDensity = NonNullable<VariantProps<typeof filePanelVariants>['density']>;
+/**
+ * Props for FilePanel.
+ *
+ * FilePanel is a thin **frame**: header (title + actions), toolbar (search),
+ * body (tree or any children), and a footer (status). Each region is a slot
+ * so consumers compose the content — there is zero business logic here.
+ *
+ * @see {@link FilePanelSlot}
+ */
+export interface IFilePanelProps extends Omit<VariantProps<typeof filePanelVariants>, 'density' | 'bordered'> {
+    /** Panel title rendered in the header. */
+    title?: ReactNode;
+    /** Optional trailing actions (buttons, chips) next to the title. */
+    actions?: ReactNode;
+    /** Search input slot content (e.g. an `<Input>`). Toolbar is hidden when both this and `toolbar` are absent. */
+    search?: ReactNode;
+    /** Arbitrary toolbar content rendered next to `search`. */
+    toolbar?: ReactNode;
+    /** Body content — typically a `<FileTree>` or custom children. */
+    children?: ReactNode;
+    /** Footer status content (e.g. node count, last refresh). */
+    status?: ReactNode;
+    /** Optional trailing footer actions. */
+    footerActions?: ReactNode;
+    /** Density — proxied to child primitives via the consumer. */
+    density?: FilePanelDensity;
+    /** Whether to render border + rounded frame. Default `true`. */
+    bordered?: boolean;
+    /** Optional CSS class merged onto the root. */
+    className?: string;
+    /**
+     * Override default Tailwind classes for specific visual regions.
+     *
+     * @example
+     * ```tsx
+     * <FilePanel
+     *   title="Files"
+     *   slots={{ header: 'bg-primary/10', body: 'p-1' }}
+     * />
+     * ```
+     */
+    slots?: SlotOverrides<FilePanelSlot>;
+}
+//# sourceMappingURL=FilePanel.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilePanel.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/FilePanel/FilePanel.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,0CAA0C;AAC1C,MAAM,MAAM,gBAAgB,GAAG,WAAW,CACxC,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC,SAAS,CAAC,CAClD,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,iBAAiB,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAC5E,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oEAAoE;IACpE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gHAAgH;IAChH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,wCAAwC;IACxC,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,8DAA8D;IAC9D,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;CACtC"}

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"}