@mks2508/mks-ui 0.6.8 → 0.8.0

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

@@ -0,0 +1,138 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { FileIconStyles, FolderIconStyles, fileIconVariants, folderIconVariants } from "./FileIcon.styles.js";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/ui/FileIcon/index.tsx
+/**
+* FileIcon / FolderIcon — Material Icon Theme-powered file/folder glyphs.
+*
+* Thin React wrapper over a configurable icon resolver. By default it
+* consumes `vscode-material-icon-theme-js` (optional peer) to map a
+* filename to an SVG basename, then renders an `<img>` pointing at
+* `${basePath}${basename}`. Consumers are responsible for hosting the
+* SVGs under `basePath` (defaults to `/file-icons/`).
+*
+* Ported from mks-mission-control with MC-specific plumbing stripped.
+*
+* @module @mks2508/mks-ui/react/ui/FileIcon
+*/
+/**
+* Try to load the Material Icon Theme resolver lazily.
+*
+* Uses a runtime require via dynamic lookup so that consumers who do
+* not install `vscode-material-icon-theme-js` simply get a `file.svg`
+* fallback instead of a bundler error.
+*/
+function tryLoadMaterialResolvers() {
+	try {
+		const mod = globalThis.require?.("vscode-material-icon-theme-js");
+		if (!mod) return {};
+		return {
+			file: mod.getIconForFile,
+			folder: mod.getIconForFolder,
+			folderOpen: mod.getIconForOpenFolder
+		};
+	} catch {
+		return {};
+	}
+}
+const MATERIAL = /* @__PURE__ */ tryLoadMaterialResolvers();
+/** Default filename → svg-basename resolver. */
+const defaultFileResolver = (filename) => MATERIAL.file?.(filename) ?? "file.svg";
+/** Default foldername → svg-basename resolver. */
+const defaultFolderResolver = (name, open) => {
+	if (open) return MATERIAL.folderOpen?.(name) ?? "folder-open.svg";
+	return MATERIAL.folder?.(name) ?? "folder.svg";
+};
+/** Minimal inline git-fork glyph used for submodules (no external icon dep). */
+function GitForkGlyph({ size, className }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.5,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: cn("shrink-0 text-primary", className),
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "18",
+				r: "3"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "6",
+				cy: "6",
+				r: "3"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "18",
+				cy: "6",
+				r: "3"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M18 9v1a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V9" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 12v3" })
+		]
+	});
+}
+/**
+* FileIcon — renders an icon for a given filename.
+*
+* @param filename - Filename used to resolve the icon asset
+* @param slots - Override Tailwind classes per visual slot
+*
+* @example
+* ```tsx
+* <FileIcon filename="App.tsx" />         // react_ts.svg
+* <FileIcon filename="package.json" />    // json.svg
+* <FileIcon filename=".gitignore" size={20} />
+* ```
+*/
+const FileIcon = memo(function FileIcon({ filename, size = 16, className, isSubmodule, basePath = "/file-icons/", resolve = defaultFileResolver, slots }) {
+	if (isSubmodule) return /* @__PURE__ */ jsx(GitForkGlyph, {
+		size,
+		className: cn(fileIconVariants(), slots?.root, className)
+	});
+	return /* @__PURE__ */ jsx("img", {
+		src: `${basePath}${resolve(filename)}`,
+		alt: "",
+		width: size,
+		height: size,
+		className: cn(fileIconVariants(), slots?.root, className),
+		loading: "lazy",
+		decoding: "async"
+	});
+});
+/**
+* FolderIcon — renders an icon for a given folder (supports open/closed state).
+*
+* @param name - Folder name used to resolve the icon asset
+* @param open - Whether the folder is visually open
+* @param slots - Override Tailwind classes per visual slot
+*
+* @example
+* ```tsx
+* <FolderIcon name="src" />              // folder-src.svg
+* <FolderIcon name="src" open />         // folder-src-open.svg
+* ```
+*/
+const FolderIcon = memo(function FolderIcon({ name, open = false, size = 16, className, basePath = "/file-icons/", resolve = defaultFolderResolver, slots }) {
+	return /* @__PURE__ */ jsx("img", {
+		src: `${basePath}${resolve(name, open)}`,
+		alt: "",
+		width: size,
+		height: size,
+		className: cn(folderIconVariants(), slots?.root, className),
+		loading: "lazy",
+		decoding: "async"
+	});
+});
+
+//#endregion
+export { FileIcon, FolderIcon };

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

@@ -0,0 +1,47 @@
+/**
+ * Styles for FileItem.
+ *
+ * @module @mks2508/mks-ui/react/ui/FileItem
+ */
+import type { StyleSlots } from '../../../core/types';
+/** Visual regions of the FileItem component. */
+export type FileItemSlot = 'root' | 'icon' | 'path' | 'modifiedChip' | 'boost' | 'gitStatus';
+/**
+ * Tailwind utility classes per git change status. All values resolve to
+ * theme design tokens (CSS variables) so the dot colours adapt across
+ * light/dark and custom themes without hardcoded hex.
+ *
+ * Consumers can override via `slots.gitStatus` when a view needs a
+ * different palette (e.g. VSCode-style gutter).
+ */
+export declare const FileItemGitStatusClasses: {
+    readonly modified: "bg-primary";
+    readonly added: "bg-accent-foreground";
+    readonly deleted: "bg-destructive";
+    readonly untracked: "bg-ring";
+    readonly renamed: "bg-secondary-foreground";
+};
+/**
+ * Default Tailwind classes for each FileItem slot.
+ *
+ * | Slot | Region |
+ * |------|--------|
+ * | `root` | Row container |
+ * | `icon` | Leading file/folder icon |
+ * | `path` | Middle-truncated path |
+ * | `modifiedChip` | Trailing "Xh ago" chip |
+ * | `boost` | Trailing boost (⭐) glyph |
+ * | `gitStatus` | Leading git change-status dot (only rendered when `changeStatus` is set to a non-null value) |
+ */
+export declare const FileItemStyles: StyleSlots<FileItemSlot>;
+/**
+ * CVA variants for the FileItem root.
+ *
+ * Density variants:
+ * - `compact` — 28px row (h-7), smaller icon
+ * - `comfortable` — 32px row (h-8), default icon size
+ */
+export declare const fileItemVariants: (props?: ({
+    density?: "compact" | "comfortable" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=FileItem.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileItem.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/FileItem/FileItem.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,cAAc,GACd,OAAO,GACP,WAAW,CAAC;AAEhB;;;;;;;GAOG;AACH,eAAO,MAAM,wBAAwB;;;;;;CAM3B,CAAC;AAEX;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,EAAE,UAAU,CAAC,YAAY,CAO1C,CAAC;AAEX;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB;;8EAU3B,CAAC"}

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

@@ -0,0 +1,60 @@
+import { cva } from "class-variance-authority";
+
+//#region src/react-ui/ui/FileItem/FileItem.styles.ts
+/**
+* Styles for FileItem.
+*
+* @module @mks2508/mks-ui/react/ui/FileItem
+*/
+/**
+* Tailwind utility classes per git change status. All values resolve to
+* theme design tokens (CSS variables) so the dot colours adapt across
+* light/dark and custom themes without hardcoded hex.
+*
+* Consumers can override via `slots.gitStatus` when a view needs a
+* different palette (e.g. VSCode-style gutter).
+*/
+const FileItemGitStatusClasses = {
+	modified: "bg-primary",
+	added: "bg-accent-foreground",
+	deleted: "bg-destructive",
+	untracked: "bg-ring",
+	renamed: "bg-secondary-foreground"
+};
+/**
+* Default Tailwind classes for each FileItem slot.
+*
+* | Slot | Region |
+* |------|--------|
+* | `root` | Row container |
+* | `icon` | Leading file/folder icon |
+* | `path` | Middle-truncated path |
+* | `modifiedChip` | Trailing "Xh ago" chip |
+* | `boost` | Trailing boost (⭐) glyph |
+* | `gitStatus` | Leading git change-status dot (only rendered when `changeStatus` is set to a non-null value) |
+*/
+const FileItemStyles = {
+	root: "file-list-item group flex items-center gap-1.5 px-2 cursor-pointer select-none transition-colors duration-100 hover:bg-accent/40 focus:bg-accent/50 focus:outline-none data-[active]:bg-accent/60",
+	icon: "",
+	path: "flex-1 min-w-0 text-xs font-mono text-foreground",
+	modifiedChip: "shrink-0 text-[10px] font-mono text-muted-foreground/60",
+	boost: "shrink-0 text-[11px] text-primary",
+	gitStatus: "shrink-0 inline-block size-1.5 rounded-full"
+};
+/**
+* CVA variants for the FileItem root.
+*
+* Density variants:
+* - `compact` — 28px row (h-7), smaller icon
+* - `comfortable` — 32px row (h-8), default icon size
+*/
+const fileItemVariants = cva(FileItemStyles.root, {
+	variants: { density: {
+		compact: "h-7",
+		comfortable: "h-8"
+	} },
+	defaultVariants: { density: "compact" }
+});
+
+//#endregion
+export { FileItemGitStatusClasses, FileItemStyles, fileItemVariants };

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

@@ -0,0 +1,84 @@
+/**
+ * Types for FileItem.
+ *
+ * @module @mks2508/mks-ui/react/ui/FileItem
+ */
+import type { VariantProps } from 'class-variance-authority';
+import type { SlotOverrides } from '../../../core/types';
+import type { FileIconResolver } from '../FileIcon/FileIcon.types';
+import type { FileItemSlot, fileItemVariants } from './FileItem.styles';
+/** What kind of filesystem entry this row represents. */
+export type FileItemKind = 'file' | 'dir';
+/**
+ * Git change status for a file, rendered as a small dot in the `gitStatus`
+ * slot when set. Colours resolve to theme design tokens (see
+ * {@link FileItemGitStatusClasses}) so the dot reads correctly under any
+ * theme without hardcoded hex.
+ *
+ * | Status | Token | Meaning |
+ * |--------|-------|---------|
+ * | `modified`  | `bg-primary` | Tracked file with unstaged or staged modifications |
+ * | `added`     | `bg-accent-foreground` | New file staged |
+ * | `deleted`   | `bg-destructive` | Tracked file removed from the working tree |
+ * | `untracked` | `bg-ring` | New file not yet tracked by git |
+ * | `renamed`   | `bg-secondary-foreground` | File renamed/moved (porcelain `R`) |
+ */
+export type FileItemChangeStatus = 'modified' | 'added' | 'deleted' | 'untracked' | 'renamed';
+/**
+ * Visual density of the row.
+ *
+ * Maps 1:1 to the `density` CVA variant in `fileItemVariants`.
+ */
+export type FileItemDensity = NonNullable<VariantProps<typeof fileItemVariants>['density']>;
+/**
+ * Props for FileItem.
+ *
+ * @see {@link FileItemSlot} for available slot names
+ */
+export interface IFileItemProps extends Omit<VariantProps<typeof fileItemVariants>, 'density'> {
+    /** Full path relative to some root (e.g. `"src/components/Button/index.tsx"`). */
+    path: string;
+    /** Whether this is a file or a directory. */
+    kind: FileItemKind;
+    /** Last-modified timestamp; when present renders a "Xh ago"-style chip. */
+    modifiedAt?: Date;
+    /** Mark this row with a boost glyph (e.g. ⭐ recents/pinned). */
+    isBoosted?: boolean;
+    /**
+     * Git change status — when set to a non-null value, renders a small
+     * coloured dot in the `gitStatus` slot before the path. Accepts `null`
+     * explicitly so consumers that receive optional data from a backend
+     * (e.g. `?withGitStatus=true`) can pass through cleanly.
+     */
+    changeStatus?: FileItemChangeStatus | null;
+    /** Whether this row is currently selected (for highlighting). */
+    selected?: boolean;
+    /** Click / activate handler. */
+    onSelect?: () => void;
+    /** Row density. Default `"compact"` (28px, matches MC). */
+    density?: FileItemDensity;
+    /**
+     * Icon base path passed to FileIcon. Default `"/file-icons/"`.
+     */
+    iconBasePath?: string;
+    /** Custom file-icon resolver. */
+    iconResolve?: FileIconResolver;
+    /** Optional CSS class merged onto the root. */
+    className?: string;
+    /** Native tab index. Default 0 so rows are keyboard-reachable. */
+    tabIndex?: number;
+    /**
+     * Override default Tailwind classes for specific visual regions.
+     *
+     * @example
+     * ```tsx
+     * <FileItem
+     *   path="src/App.tsx"
+     *   kind="file"
+     *   slots={{ root: 'rounded-md', boost: 'text-warning' }}
+     * />
+     * ```
+     */
+    slots?: SlotOverrides<FileItemSlot>;
+}
+//# sourceMappingURL=FileItem.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileItem.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/FileItem/FileItem.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,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAExE,yDAAyD;AACzD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,KAAK,CAAC;AAE1C;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,oBAAoB,GAC5B,UAAU,GACV,OAAO,GACP,SAAS,GACT,WAAW,GACX,SAAS,CAAC;AAEd;;;;GAIG;AACH,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,kFAAkF;IAClF,IAAI,EAAE,MAAM,CAAC;IACb,6CAA6C;IAC7C,IAAI,EAAE,YAAY,CAAC;IACnB,2EAA2E;IAC3E,UAAU,CAAC,EAAE,IAAI,CAAC;IAClB,gEAAgE;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC3C,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;;OAWG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACrC"}

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

@@ -0,0 +1,48 @@
+/**
+ * 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
+ */
+import type { IFileItemProps } from './FileItem.types';
+/**
+ * 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' }}
+ * />
+ * ```
+ */
+export declare const FileItem: import("react").MemoExoticComponent<({ path, kind, modifiedAt, isBoosted, changeStatus, selected, onSelect, density, iconBasePath, iconResolve, className, tabIndex, slots, }: IFileItemProps) => import("react/jsx-runtime").JSX.Element>;
+export { FileItemGitStatusClasses, FileItemStyles, fileItemVariants, } from './FileItem.styles';
+export type { FileItemSlot } from './FileItem.styles';
+export type { IFileItemProps, FileItemKind, FileItemDensity, FileItemChangeStatus, } from './FileItem.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/FileItem/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAaH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAkBvD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,QAAQ,iLAclB,cAAc,6CA6Ef,CAAC;AAEH,OAAO,EACL,wBAAwB,EACxB,cAAc,EACd,gBAAgB,GACjB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,YAAY,EACV,cAAc,EACd,YAAY,EACZ,eAAe,EACf,oBAAoB,GACrB,MAAM,kBAAkB,CAAC"}

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