@databricks/appkit-ui 0.18.0 → 0.19.1

package/CLAUDE.md

@@ -44,6 +44,7 @@ npx @databricks/appkit docs <query>
 - [Caching](./docs/plugins/caching.md): AppKit provides both global and plugin-level caching capabilities.
 - [Creating custom plugins](./docs/plugins/custom-plugins.md): If you need custom API routes or background logic, implement an AppKit plugin. The fastest way is to use the CLI:
 - [Execution context](./docs/plugins/execution-context.md): AppKit manages Databricks authentication via two contexts:
+- [Files plugin](./docs/plugins/files.md): File operations against Databricks Unity Catalog Volumes. Supports listing, reading, downloading, uploading, deleting, and previewing files with built-in caching, retry, and timeout handling via the execution interceptor pipeline.
 - [Genie plugin](./docs/plugins/genie.md): Integrates Databricks AI/BI Genie spaces into your AppKit application, enabling natural language data queries via a conversational interface.
 - [Lakebase plugin](./docs/plugins/lakebase.md): Currently, the Lakebase plugin currently requires a one-time manual setup to connect your Databricks App with your Lakebase database. An automated setup process is planned for an upcoming future release.
 - [Plugin management](./docs/plugins/plugin-management.md): AppKit includes a CLI for managing plugins. All commands are available under npx @databricks/appkit plugin.
@@ -83,7 +84,7 @@ npx @databricks/appkit docs <query>
 - [Interface: GenerateDatabaseCredentialRequest](./docs/api/appkit/Interface.GenerateDatabaseCredentialRequest.md): Request parameters for generating database OAuth credentials
 - [Interface: ITelemetry](./docs/api/appkit/Interface.ITelemetry.md): Plugin-facing interface for OpenTelemetry instrumentation.
 - [Interface: LakebasePoolConfig](./docs/api/appkit/Interface.LakebasePoolConfig.md): Configuration for creating a Lakebase connection pool
-- [Interface: PluginManifest](./docs/api/appkit/Interface.PluginManifest.md): Plugin manifest that declares metadata and resource requirements.
+- [Interface: PluginManifest<TName>](./docs/api/appkit/Interface.PluginManifest.md): Plugin manifest that declares metadata and resource requirements.
 - [Interface: RequestedClaims](./docs/api/appkit/Interface.RequestedClaims.md): Optional claims for fine-grained Unity Catalog table permissions
 - [Interface: RequestedResource](./docs/api/appkit/Interface.RequestedResource.md): Resource to request permissions for in Unity Catalog
 - [Interface: ResourceEntry](./docs/api/appkit/Interface.ResourceEntry.md): Internal representation of a resource in the registry.
@@ -94,6 +95,7 @@ npx @databricks/appkit docs <query>
 - [Interface: ValidationResult](./docs/api/appkit/Interface.ValidationResult.md): Result of validating all registered resources against the environment.
 - [Type Alias: ConfigSchema](./docs/api/appkit/TypeAlias.ConfigSchema.md): Configuration schema definition for plugin config.
 - [Type Alias: IAppRouter](./docs/api/appkit/TypeAlias.IAppRouter.md): Express router type for plugin route registration
+- [Type Alias: PluginData<T, U, N>](./docs/api/appkit/TypeAlias.PluginData.md): Type Parameters
 - [Type Alias: ResourcePermission](./docs/api/appkit/TypeAlias.ResourcePermission.md): Union of all possible permission levels across all resource types.
 - [Type Alias: ToPlugin()<T, U, N>](./docs/api/appkit/TypeAlias.ToPlugin.md): Type Parameters
 - [Variable: sql](./docs/api/appkit/Variable.sql.md): SQL helper namespace
@@ -110,6 +112,11 @@ npx @databricks/appkit docs <query>
 - [PieChart](./docs/api/appkit-ui/data/PieChart.md): Pie Chart component for proportional data visualization.
 - [RadarChart](./docs/api/appkit-ui/data/RadarChart.md): Radar Chart component for multi-dimensional data comparison.
 - [ScatterChart](./docs/api/appkit-ui/data/ScatterChart.md): Scatter Chart component for correlation and distribution visualization.
+- [DirectoryList](./docs/api/appkit-ui/files/DirectoryList.md): Card-wrapped directory listing with loading, error, and empty states
+- [FileBreadcrumb](./docs/api/appkit-ui/files/FileBreadcrumb.md): Path-aware breadcrumb navigation built on top of Breadcrumb primitives
+- [FileEntry](./docs/api/appkit-ui/files/FileEntry.md): Single file or directory row with icon, name, size, and selection state
+- [FilePreviewPanel](./docs/api/appkit-ui/files/FilePreviewPanel.md): Preview panel displaying file metadata, image/text preview, and download/delete actions
+- [NewFolderInput](./docs/api/appkit-ui/files/NewFolderInput.md): Inline folder-name input with create/cancel actions
 - [GenieChat](./docs/api/appkit-ui/genie/GenieChat.md): Full-featured chat interface for a single Databricks AI/BI Genie space. Handles message streaming, conversation history, and auto-reconnection via SSE.
 - [GenieChatInput](./docs/api/appkit-ui/genie/GenieChatInput.md): Auto-expanding textarea input with a send button for chat messages. Submits on Enter (Shift+Enter for newline).
 - [GenieChatMessage](./docs/api/appkit-ui/genie/GenieChatMessage.md): Renders a single Genie message bubble with optional expandable SQL query attachments.

package/dist/cli/commands/plugin/create/scaffold.js

@@ -92,9 +92,7 @@ function scaffoldPlugin(targetDir, answers, options) {
 import manifest from "./manifest.json";
 
 export class ${className} extends Plugin {
-  name = "${answers.name}";
-
-  static manifest = manifest as PluginManifest;
+  static manifest = manifest as PluginManifest<"${answers.name}">;
 
   injectRoutes(router: IAppRouter): void {
     // Add your routes here, e.g.:
@@ -109,11 +107,7 @@ export class ${className} extends Plugin {
   }
 }
 
-export const ${exportName} = toPlugin<
-  typeof ${className},
-  Record<string, never>,
-  "${answers.name}"
->(${className}, "${answers.name}");
+export const ${exportName} = toPlugin(${className});
 `;
 		writeTracked(path.join(targetDir, `${answers.name}.ts`), pluginTs, written);
 		const indexTs = `export { ${className}, ${exportName} } from "./${answers.name}";

package/dist/cli/commands/plugin/create/scaffold.js.map

@@ -1 +1 @@
-{"version":3,"file":"scaffold.js","names":[],"sources":["../../../../../src/cli/commands/plugin/create/scaffold.ts"],"sourcesContent":["import fs from \"node:fs\";\nimport path from \"node:path\";\nimport { humanizeResourceType, MANIFEST_SCHEMA_ID } from \"./resource-defaults\";\nimport type { CreateAnswers } from \"./types\";\n\n/** Convert kebab-name to PascalCase (e.g. my-plugin -> MyPlugin). */\nfunction toPascalCase(name: string): string {\n  return name\n    .split(\"-\")\n    .map((s) => s.charAt(0).toUpperCase() + s.slice(1).toLowerCase())\n    .join(\"\");\n}\n\n/** Convert kebab-name to camelCase (e.g. my-plugin -> myPlugin). */\nfunction toCamelCase(name: string): string {\n  const pascal = toPascalCase(name);\n  return pascal.charAt(0).toLowerCase() + pascal.slice(1);\n}\n\n/** Build manifest.json resources from selected resources. */\nfunction buildManifestResources(answers: CreateAnswers) {\n  const required: unknown[] = [];\n  const optional: unknown[] = [];\n\n  for (const r of answers.resources) {\n    const alias = humanizeResourceType(r.type);\n    const entry = {\n      type: r.type,\n      alias,\n      resourceKey: r.resourceKey,\n      description: r.description || `Required for ${alias} functionality.`,\n      permission: r.permission,\n      fields: r.fields,\n    };\n    if (r.required) {\n      required.push(entry);\n    } else {\n      optional.push(entry);\n    }\n  }\n\n  return { required, optional };\n}\n\n/** Build full manifest object for manifest.json. */\nfunction buildManifest(answers: CreateAnswers): Record<string, unknown> {\n  const { required, optional } = buildManifestResources(answers);\n  const manifest: Record<string, unknown> = {\n    $schema: MANIFEST_SCHEMA_ID,\n    name: answers.name,\n    displayName: answers.displayName,\n    description: answers.description,\n    resources: { required, optional },\n  };\n  if (answers.author) manifest.author = answers.author;\n  manifest.version = answers.version || \"0.1.0\";\n  if (answers.license) manifest.license = answers.license;\n  return manifest;\n}\n\n/** Resolve absolute target directory from cwd and answers. */\nexport function resolveTargetDir(cwd: string, answers: CreateAnswers): string {\n  return path.resolve(cwd, answers.targetPath);\n}\n\n/** Track files written during scaffolding for rollback on failure. */\nfunction writeTracked(\n  filePath: string,\n  content: string,\n  written: string[],\n): void {\n  fs.writeFileSync(filePath, content);\n  written.push(filePath);\n}\n\n/** Remove files written during a failed scaffold attempt. */\nfunction rollback(written: string[], targetDir: string): void {\n  for (const filePath of written.reverse()) {\n    try {\n      fs.unlinkSync(filePath);\n    } catch {\n      // best-effort cleanup\n    }\n  }\n  try {\n    const remaining = fs.readdirSync(targetDir);\n    if (remaining.length === 0) fs.rmdirSync(targetDir);\n  } catch {\n    // directory may not be empty or may have been removed already\n  }\n}\n\n/**\n * Scaffold plugin files into targetDir. Pure: no interactive I/O.\n * Writes manifest.json, {name}.ts, index.ts; for isolated also package.json, tsconfig.json, README.md.\n * On failure, rolls back any files already written.\n */\nexport function scaffoldPlugin(\n  targetDir: string,\n  answers: CreateAnswers,\n  options: { isolated: boolean },\n): void {\n  fs.mkdirSync(targetDir, { recursive: true });\n\n  const written: string[] = [];\n\n  try {\n    const manifest = buildManifest(answers);\n    const className = toPascalCase(answers.name);\n    const exportName = toCamelCase(answers.name);\n\n    writeTracked(\n      path.join(targetDir, \"manifest.json\"),\n      `${JSON.stringify(manifest, null, 2)}\\n`,\n      written,\n    );\n\n    const pluginTs = `import {\n  Plugin,\n  toPlugin,\n  type IAppRouter,\n  type PluginManifest,\n} from \"@databricks/appkit\";\nimport manifest from \"./manifest.json\";\n\nexport class ${className} extends Plugin {\n  name = \"${answers.name}\";\n\n  static manifest = manifest as PluginManifest;\n\n  injectRoutes(router: IAppRouter): void {\n    // Add your routes here, e.g.:\n    // this.route(router, {\n    //   name: \"example\",\n    //   method: \"get\",\n    //   path: \"/\",\n    //   handler: async (_req, res) => {\n    //     res.json({ message: \"Hello from ${answers.name}\" });\n    //   },\n    // });\n  }\n}\n\nexport const ${exportName} = toPlugin<\n  typeof ${className},\n  Record<string, never>,\n  \"${answers.name}\"\n>(${className}, \"${answers.name}\");\n`;\n\n    writeTracked(path.join(targetDir, `${answers.name}.ts`), pluginTs, written);\n\n    const indexTs = `export { ${className}, ${exportName} } from \"./${answers.name}\";\n`;\n\n    writeTracked(path.join(targetDir, \"index.ts\"), indexTs, written);\n\n    if (options.isolated) {\n      const packageName =\n        answers.name.includes(\"/\") || answers.name.startsWith(\"@\")\n          ? answers.name\n          : `appkit-plugin-${answers.name}`;\n\n      const packageJson = {\n        name: packageName,\n        version: answers.version || \"0.1.0\",\n        type: \"module\",\n        main: \"./dist/index.js\",\n        types: \"./dist/index.d.ts\",\n        files: [\"dist\"],\n        scripts: {\n          build: \"tsc\",\n          typecheck: \"tsc --noEmit\",\n        },\n        peerDependencies: {\n          \"@databricks/appkit\": \">=0.5.0\",\n        },\n        devDependencies: {\n          typescript: \"^5.0.0\",\n        },\n      };\n\n      writeTracked(\n        path.join(targetDir, \"package.json\"),\n        `${JSON.stringify(packageJson, null, 2)}\\n`,\n        written,\n      );\n\n      const tsconfigJson = {\n        compilerOptions: {\n          target: \"ES2022\",\n          module: \"NodeNext\",\n          moduleResolution: \"NodeNext\",\n          outDir: \"dist\",\n          rootDir: \".\",\n          declaration: true,\n          strict: true,\n          skipLibCheck: true,\n        },\n        include: [\"*.ts\"],\n        exclude: [\"node_modules\", \"dist\"],\n      };\n\n      writeTracked(\n        path.join(targetDir, \"tsconfig.json\"),\n        `${JSON.stringify(tsconfigJson, null, 2)}\\n`,\n        written,\n      );\n\n      const readme = `# ${answers.displayName}\n\n${answers.description}\n\n## Installation\n\n\\`\\`\\`bash\npnpm add ${packageName} @databricks/appkit\n\\`\\`\\`\n\n## Usage\n\nRegister the plugin in your AppKit app:\n\n\\`\\`\\`ts\nimport { createApp } from \"@databricks/appkit\";\nimport { ${exportName} } from \"${packageName}\";\n\ncreateApp({\n  plugins: [\n    ${exportName}(),\n    // ... other plugins\n  ],\n}).then((app) => { /* ... */ });\n\\`\\`\\`\n`;\n\n      writeTracked(path.join(targetDir, \"README.md\"), readme, written);\n    }\n  } catch (err) {\n    rollback(written, targetDir);\n    throw err;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"scaffold.js","names":[],"sources":["../../../../../src/cli/commands/plugin/create/scaffold.ts"],"sourcesContent":["import fs from \"node:fs\";\nimport path from \"node:path\";\nimport { humanizeResourceType, MANIFEST_SCHEMA_ID } from \"./resource-defaults\";\nimport type { CreateAnswers } from \"./types\";\n\n/** Convert kebab-name to PascalCase (e.g. my-plugin -> MyPlugin). */\nfunction toPascalCase(name: string): string {\n  return name\n    .split(\"-\")\n    .map((s) => s.charAt(0).toUpperCase() + s.slice(1).toLowerCase())\n    .join(\"\");\n}\n\n/** Convert kebab-name to camelCase (e.g. my-plugin -> myPlugin). */\nfunction toCamelCase(name: string): string {\n  const pascal = toPascalCase(name);\n  return pascal.charAt(0).toLowerCase() + pascal.slice(1);\n}\n\n/** Build manifest.json resources from selected resources. */\nfunction buildManifestResources(answers: CreateAnswers) {\n  const required: unknown[] = [];\n  const optional: unknown[] = [];\n\n  for (const r of answers.resources) {\n    const alias = humanizeResourceType(r.type);\n    const entry = {\n      type: r.type,\n      alias,\n      resourceKey: r.resourceKey,\n      description: r.description || `Required for ${alias} functionality.`,\n      permission: r.permission,\n      fields: r.fields,\n    };\n    if (r.required) {\n      required.push(entry);\n    } else {\n      optional.push(entry);\n    }\n  }\n\n  return { required, optional };\n}\n\n/** Build full manifest object for manifest.json. */\nfunction buildManifest(answers: CreateAnswers): Record<string, unknown> {\n  const { required, optional } = buildManifestResources(answers);\n  const manifest: Record<string, unknown> = {\n    $schema: MANIFEST_SCHEMA_ID,\n    name: answers.name,\n    displayName: answers.displayName,\n    description: answers.description,\n    resources: { required, optional },\n  };\n  if (answers.author) manifest.author = answers.author;\n  manifest.version = answers.version || \"0.1.0\";\n  if (answers.license) manifest.license = answers.license;\n  return manifest;\n}\n\n/** Resolve absolute target directory from cwd and answers. */\nexport function resolveTargetDir(cwd: string, answers: CreateAnswers): string {\n  return path.resolve(cwd, answers.targetPath);\n}\n\n/** Track files written during scaffolding for rollback on failure. */\nfunction writeTracked(\n  filePath: string,\n  content: string,\n  written: string[],\n): void {\n  fs.writeFileSync(filePath, content);\n  written.push(filePath);\n}\n\n/** Remove files written during a failed scaffold attempt. */\nfunction rollback(written: string[], targetDir: string): void {\n  for (const filePath of written.reverse()) {\n    try {\n      fs.unlinkSync(filePath);\n    } catch {\n      // best-effort cleanup\n    }\n  }\n  try {\n    const remaining = fs.readdirSync(targetDir);\n    if (remaining.length === 0) fs.rmdirSync(targetDir);\n  } catch {\n    // directory may not be empty or may have been removed already\n  }\n}\n\n/**\n * Scaffold plugin files into targetDir. Pure: no interactive I/O.\n * Writes manifest.json, {name}.ts, index.ts; for isolated also package.json, tsconfig.json, README.md.\n * On failure, rolls back any files already written.\n */\nexport function scaffoldPlugin(\n  targetDir: string,\n  answers: CreateAnswers,\n  options: { isolated: boolean },\n): void {\n  fs.mkdirSync(targetDir, { recursive: true });\n\n  const written: string[] = [];\n\n  try {\n    const manifest = buildManifest(answers);\n    const className = toPascalCase(answers.name);\n    const exportName = toCamelCase(answers.name);\n\n    writeTracked(\n      path.join(targetDir, \"manifest.json\"),\n      `${JSON.stringify(manifest, null, 2)}\\n`,\n      written,\n    );\n\n    const pluginTs = `import {\n  Plugin,\n  toPlugin,\n  type IAppRouter,\n  type PluginManifest,\n} from \"@databricks/appkit\";\nimport manifest from \"./manifest.json\";\n\nexport class ${className} extends Plugin {\n  static manifest = manifest as PluginManifest<\"${answers.name}\">;\n\n  injectRoutes(router: IAppRouter): void {\n    // Add your routes here, e.g.:\n    // this.route(router, {\n    //   name: \"example\",\n    //   method: \"get\",\n    //   path: \"/\",\n    //   handler: async (_req, res) => {\n    //     res.json({ message: \"Hello from ${answers.name}\" });\n    //   },\n    // });\n  }\n}\n\nexport const ${exportName} = toPlugin(${className});\n`;\n\n    writeTracked(path.join(targetDir, `${answers.name}.ts`), pluginTs, written);\n\n    const indexTs = `export { ${className}, ${exportName} } from \"./${answers.name}\";\n`;\n\n    writeTracked(path.join(targetDir, \"index.ts\"), indexTs, written);\n\n    if (options.isolated) {\n      const packageName =\n        answers.name.includes(\"/\") || answers.name.startsWith(\"@\")\n          ? answers.name\n          : `appkit-plugin-${answers.name}`;\n\n      const packageJson = {\n        name: packageName,\n        version: answers.version || \"0.1.0\",\n        type: \"module\",\n        main: \"./dist/index.js\",\n        types: \"./dist/index.d.ts\",\n        files: [\"dist\"],\n        scripts: {\n          build: \"tsc\",\n          typecheck: \"tsc --noEmit\",\n        },\n        peerDependencies: {\n          \"@databricks/appkit\": \">=0.5.0\",\n        },\n        devDependencies: {\n          typescript: \"^5.0.0\",\n        },\n      };\n\n      writeTracked(\n        path.join(targetDir, \"package.json\"),\n        `${JSON.stringify(packageJson, null, 2)}\\n`,\n        written,\n      );\n\n      const tsconfigJson = {\n        compilerOptions: {\n          target: \"ES2022\",\n          module: \"NodeNext\",\n          moduleResolution: \"NodeNext\",\n          outDir: \"dist\",\n          rootDir: \".\",\n          declaration: true,\n          strict: true,\n          skipLibCheck: true,\n        },\n        include: [\"*.ts\"],\n        exclude: [\"node_modules\", \"dist\"],\n      };\n\n      writeTracked(\n        path.join(targetDir, \"tsconfig.json\"),\n        `${JSON.stringify(tsconfigJson, null, 2)}\\n`,\n        written,\n      );\n\n      const readme = `# ${answers.displayName}\n\n${answers.description}\n\n## Installation\n\n\\`\\`\\`bash\npnpm add ${packageName} @databricks/appkit\n\\`\\`\\`\n\n## Usage\n\nRegister the plugin in your AppKit app:\n\n\\`\\`\\`ts\nimport { createApp } from \"@databricks/appkit\";\nimport { ${exportName} } from \"${packageName}\";\n\ncreateApp({\n  plugins: [\n    ${exportName}(),\n    // ... other plugins\n  ],\n}).then((app) => { /* ... */ });\n\\`\\`\\`\n`;\n\n      writeTracked(path.join(targetDir, \"README.md\"), readme, written);\n    }\n  } catch (err) {\n    rollback(written, targetDir);\n    throw err;\n  }\n}\n"],"mappings":"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"}

package/dist/react/file-browser/directory-list.d.ts

@@ -0,0 +1,54 @@
+import { DirectoryEntry, FileBrowserLabels } from "./types.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/react/file-browser/directory-list.d.ts
+/** Props for the DirectoryList component */
+interface DirectoryListProps extends Omit<React.ComponentProps<"div">, "children"> {
+  /** Directory entries to display */
+  entries: DirectoryEntry[];
+  /** Whether the directory is currently loading */
+  loading?: boolean;
+  /** Error message to display */
+  error?: string | null;
+  /** Called when an entry is clicked */
+  onEntryClick: (entry: DirectoryEntry) => void;
+  /** Called when the back/parent button is clicked */
+  onNavigateToParent?: () => void;
+  /** Called when the retry button is clicked */
+  onRetry?: () => void;
+  /** Whether the user is at the root directory (hides back button) */
+  isAtRoot?: boolean;
+  /** Currently selected file path for highlighting */
+  selectedPath?: string | null;
+  /** Resolves a DirectoryEntry to its full path */
+  resolveEntryPath: (entry: DirectoryEntry) => string;
+  /** Content rendered between the back button and the entry list (e.g., NewFolderInput) */
+  headerContent?: React.ReactNode;
+  /** Whether a current path is set (affects empty state message) */
+  hasCurrentPath?: boolean;
+  /** Custom file size formatter */
+  formatSize?: (bytes: number | undefined) => string;
+  /** Customizable labels */
+  labels?: Pick<FileBrowserLabels, "backToParent" | "emptyDirectory" | "noVolumeConfigured" | "retry">;
+}
+/** Card-wrapped directory listing with loading, error, and empty states */
+declare function DirectoryList({
+  entries,
+  loading,
+  error,
+  onEntryClick,
+  onNavigateToParent,
+  onRetry,
+  isAtRoot,
+  selectedPath,
+  resolveEntryPath,
+  headerContent,
+  hasCurrentPath,
+  formatSize,
+  labels,
+  className,
+  ...props
+}: DirectoryListProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DirectoryList, DirectoryListProps };
+//# sourceMappingURL=directory-list.d.ts.map

package/dist/react/file-browser/directory-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"directory-list.d.ts","names":[],"sources":["../../../src/react/file-browser/directory-list.tsx"],"mappings":";;;;;UAQiB,kBAAA,SACP,IAAA,CAAK,KAAA,CAAM,cAAA;;EAEnB,OAAA,EAAS,cAAA;EAFT;EAIA,OAAA;EAJa;EAMb,KAAA;EAEsB;EAAtB,YAAA,GAAe,KAAA,EAAO,cAAA;EAYN;EAVhB,kBAAA;EAgBS;EAdT,OAAA;EAZY;EAcZ,QAAA;EAdQ;EAgBR,YAAA;EAhBmB;EAkBnB,gBAAA,GAAmB,KAAA,EAAO,cAAA;EAhBjB;EAkBT,aAAA,GAAgB,KAAA,CAAM,SAAA;EAdtB;EAgBA,cAAA;EAdsB;EAgBtB,UAAA,IAAc,KAAA;EAdd;EAgBA,MAAA,GAAS,IAAA,CACP,iBAAA;AAAA;;iBAMY,aAAA,CAAA;EACd,OAAA;EACA,OAAA;EACA,KAAA;EACA,YAAA;EACA,kBAAA;EACA,OAAA;EACA,QAAA;EACA,YAAA;EACA,gBAAA;EACA,aAAA;EACA,cAAA;EACA,UAAA;EACA,MAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,kBAAA,GAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/react/file-browser/directory-list.js

@@ -0,0 +1,74 @@
+import { Button } from "../ui/button.js";
+import { Card } from "../ui/card.js";
+import { Skeleton } from "../ui/skeleton.js";
+import { FileEntry } from "./file-entry.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertCircle, ArrowLeft, FileIcon } from "lucide-react";
+
+//#region src/react/file-browser/directory-list.tsx
+/** Card-wrapped directory listing with loading, error, and empty states */
+function DirectoryList({ entries, loading, error, onEntryClick, onNavigateToParent, onRetry, isAtRoot, selectedPath, resolveEntryPath, headerContent, hasCurrentPath, formatSize, labels, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "directory-list",
+		className,
+		...props,
+		children: /* @__PURE__ */ jsxs(Card, {
+			className: "p-0 overflow-hidden",
+			children: [
+				!isAtRoot && onNavigateToParent && /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: onNavigateToParent,
+					className: "flex items-center gap-2 px-4 py-3 w-full text-left hover:bg-muted/50 border-b text-sm text-muted-foreground transition-colors",
+					children: [/* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" }), labels?.backToParent ?? "Back to parent"]
+				}),
+				headerContent,
+				loading && /* @__PURE__ */ jsxs("div", {
+					className: "p-4 space-y-3",
+					children: [
+						/* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" }),
+						/* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" }),
+						/* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })
+					]
+				}),
+				error && /* @__PURE__ */ jsxs("div", {
+					className: "p-6 text-center",
+					children: [
+						/* @__PURE__ */ jsx(AlertCircle, { className: "h-8 w-8 text-destructive mx-auto mb-2" }),
+						/* @__PURE__ */ jsx("p", {
+							className: "text-sm text-destructive",
+							children: error
+						}),
+						onRetry && /* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "sm",
+							className: "mt-3",
+							onClick: onRetry,
+							children: labels?.retry ?? "Retry"
+						})
+					]
+				}),
+				!loading && !error && entries.length === 0 && /* @__PURE__ */ jsxs("div", {
+					className: "p-6 text-center text-muted-foreground",
+					children: [/* @__PURE__ */ jsx(FileIcon, { className: "h-8 w-8 mx-auto mb-2 opacity-50" }), /* @__PURE__ */ jsx("p", {
+						className: "text-sm",
+						children: hasCurrentPath ? labels?.emptyDirectory ?? "This directory is empty." : labels?.noVolumeConfigured ?? "No volume configured. Configure volumes in the files plugin to get started."
+					})]
+				}),
+				!loading && !error && entries.map((entry) => {
+					const entryPath = resolveEntryPath(entry);
+					return /* @__PURE__ */ jsx(FileEntry, {
+						entry,
+						entryPath,
+						isSelected: selectedPath === entryPath,
+						formatSize,
+						onClick: () => onEntryClick(entry)
+					}, entryPath);
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+export { DirectoryList };
+//# sourceMappingURL=directory-list.js.map

package/dist/react/file-browser/directory-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"directory-list.js","names":[],"sources":["../../../src/react/file-browser/directory-list.tsx"],"sourcesContent":["import { AlertCircle, ArrowLeft, FileIcon } from \"lucide-react\";\nimport { Button } from \"../ui/button\";\nimport { Card } from \"../ui/card\";\nimport { Skeleton } from \"../ui/skeleton\";\nimport { FileEntry } from \"./file-entry\";\nimport type { DirectoryEntry, FileBrowserLabels } from \"./types\";\n\n/** Props for the DirectoryList component */\nexport interface DirectoryListProps\n  extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  /** Directory entries to display */\n  entries: DirectoryEntry[];\n  /** Whether the directory is currently loading */\n  loading?: boolean;\n  /** Error message to display */\n  error?: string | null;\n  /** Called when an entry is clicked */\n  onEntryClick: (entry: DirectoryEntry) => void;\n  /** Called when the back/parent button is clicked */\n  onNavigateToParent?: () => void;\n  /** Called when the retry button is clicked */\n  onRetry?: () => void;\n  /** Whether the user is at the root directory (hides back button) */\n  isAtRoot?: boolean;\n  /** Currently selected file path for highlighting */\n  selectedPath?: string | null;\n  /** Resolves a DirectoryEntry to its full path */\n  resolveEntryPath: (entry: DirectoryEntry) => string;\n  /** Content rendered between the back button and the entry list (e.g., NewFolderInput) */\n  headerContent?: React.ReactNode;\n  /** Whether a current path is set (affects empty state message) */\n  hasCurrentPath?: boolean;\n  /** Custom file size formatter */\n  formatSize?: (bytes: number | undefined) => string;\n  /** Customizable labels */\n  labels?: Pick<\n    FileBrowserLabels,\n    \"backToParent\" | \"emptyDirectory\" | \"noVolumeConfigured\" | \"retry\"\n  >;\n}\n\n/** Card-wrapped directory listing with loading, error, and empty states */\nexport function DirectoryList({\n  entries,\n  loading,\n  error,\n  onEntryClick,\n  onNavigateToParent,\n  onRetry,\n  isAtRoot,\n  selectedPath,\n  resolveEntryPath,\n  headerContent,\n  hasCurrentPath,\n  formatSize,\n  labels,\n  className,\n  ...props\n}: DirectoryListProps) {\n  return (\n    <div data-slot=\"directory-list\" className={className} {...props}>\n      <Card className=\"p-0 overflow-hidden\">\n        {!isAtRoot && onNavigateToParent && (\n          <button\n            type=\"button\"\n            onClick={onNavigateToParent}\n            className=\"flex items-center gap-2 px-4 py-3 w-full text-left hover:bg-muted/50 border-b text-sm text-muted-foreground transition-colors\"\n          >\n            <ArrowLeft className=\"h-4 w-4\" />\n            {labels?.backToParent ?? \"Back to parent\"}\n          </button>\n        )}\n\n        {headerContent}\n\n        {loading && (\n          <div className=\"p-4 space-y-3\">\n            <Skeleton className=\"h-10 w-full\" />\n            <Skeleton className=\"h-10 w-full\" />\n            <Skeleton className=\"h-10 w-full\" />\n          </div>\n        )}\n\n        {error && (\n          <div className=\"p-6 text-center\">\n            <AlertCircle className=\"h-8 w-8 text-destructive mx-auto mb-2\" />\n            <p className=\"text-sm text-destructive\">{error}</p>\n            {onRetry && (\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"mt-3\"\n                onClick={onRetry}\n              >\n                {labels?.retry ?? \"Retry\"}\n              </Button>\n            )}\n          </div>\n        )}\n\n        {!loading && !error && entries.length === 0 && (\n          <div className=\"p-6 text-center text-muted-foreground\">\n            <FileIcon className=\"h-8 w-8 mx-auto mb-2 opacity-50\" />\n            <p className=\"text-sm\">\n              {hasCurrentPath\n                ? (labels?.emptyDirectory ?? \"This directory is empty.\")\n                : (labels?.noVolumeConfigured ??\n                  \"No volume configured. Configure volumes in the files plugin to get started.\")}\n            </p>\n          </div>\n        )}\n\n        {!loading &&\n          !error &&\n          entries.map((entry) => {\n            const entryPath = resolveEntryPath(entry);\n            return (\n              <FileEntry\n                key={entryPath}\n                entry={entry}\n                entryPath={entryPath}\n                isSelected={selectedPath === entryPath}\n                formatSize={formatSize}\n                onClick={() => onEntryClick(entry)}\n              />\n            );\n          })}\n      </Card>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AA0CA,SAAgB,cAAc,EAC5B,SACA,SACA,OACA,cACA,oBACA,SACA,UACA,cACA,kBACA,eACA,gBACA,YACA,QACA,WACA,GAAG,SACkB;AACrB,QACE,oBAAC;EAAI,aAAU;EAA4B;EAAW,GAAI;YACxD,qBAAC;GAAK,WAAU;;IACb,CAAC,YAAY,sBACZ,qBAAC;KACC,MAAK;KACL,SAAS;KACT,WAAU;gBAEV,oBAAC,aAAU,WAAU,YAAY,EAChC,QAAQ,gBAAgB;MAClB;IAGV;IAEA,WACC,qBAAC;KAAI,WAAU;;MACb,oBAAC,YAAS,WAAU,gBAAgB;MACpC,oBAAC,YAAS,WAAU,gBAAgB;MACpC,oBAAC,YAAS,WAAU,gBAAgB;;MAChC;IAGP,SACC,qBAAC;KAAI,WAAU;;MACb,oBAAC,eAAY,WAAU,0CAA0C;MACjE,oBAAC;OAAE,WAAU;iBAA4B;QAAU;MAClD,WACC,oBAAC;OACC,SAAQ;OACR,MAAK;OACL,WAAU;OACV,SAAS;iBAER,QAAQ,SAAS;QACX;;MAEP;IAGP,CAAC,WAAW,CAAC,SAAS,QAAQ,WAAW,KACxC,qBAAC;KAAI,WAAU;gBACb,oBAAC,YAAS,WAAU,oCAAoC,EACxD,oBAAC;MAAE,WAAU;gBACV,iBACI,QAAQ,kBAAkB,6BAC1B,QAAQ,sBACT;OACF;MACA;IAGP,CAAC,WACA,CAAC,SACD,QAAQ,KAAK,UAAU;KACrB,MAAM,YAAY,iBAAiB,MAAM;AACzC,YACE,oBAAC;MAEQ;MACI;MACX,YAAY,iBAAiB;MACjB;MACZ,eAAe,aAAa,MAAM;QAL7B,UAML;MAEJ;;IACC;GACH"}

package/dist/react/file-browser/file-breadcrumb.d.ts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/react/file-browser/file-breadcrumb.d.ts
+/** Props for the FileBreadcrumb component */
+interface FileBreadcrumbProps extends Omit<React.ComponentProps<"nav">, "children"> {
+  /** Label for the root breadcrumb item */
+  rootLabel: string;
+  /** Path segments after the root */
+  segments: string[];
+  /** Called when the root breadcrumb is clicked */
+  onNavigateToRoot: () => void;
+  /** Called when a segment breadcrumb is clicked (receives segment index) */
+  onNavigateToSegment: (index: number) => void;
+}
+/** Path-aware breadcrumb navigation built on top of Breadcrumb primitives */
+declare function FileBreadcrumb({
+  rootLabel,
+  segments,
+  onNavigateToRoot,
+  onNavigateToSegment,
+  ...props
+}: FileBreadcrumbProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { FileBreadcrumb, FileBreadcrumbProps };
+//# sourceMappingURL=file-breadcrumb.d.ts.map

package/dist/react/file-browser/file-breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-breadcrumb.d.ts","names":[],"sources":["../../../src/react/file-browser/file-breadcrumb.tsx"],"mappings":";;;;UAUiB,mBAAA,SACP,IAAA,CAAK,KAAA,CAAM,cAAA;;EAEnB,SAAA;EAFA;EAIA,QAAA;EAJY;EAMZ,gBAAA;EANa;EAQb,mBAAA,GAAsB,KAAA;AAAA;;iBAIR,cAAA,CAAA;EACd,SAAA;EACA,QAAA;EACA,gBAAA;EACA,mBAAA;EAAA,GACG;AAAA,GACF,mBAAA,GAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/react/file-browser/file-breadcrumb.js

@@ -0,0 +1,27 @@
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "../ui/breadcrumb.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react/file-browser/file-breadcrumb.tsx
+/** Path-aware breadcrumb navigation built on top of Breadcrumb primitives */
+function FileBreadcrumb({ rootLabel, segments, onNavigateToRoot, onNavigateToSegment, ...props }) {
+	return /* @__PURE__ */ jsx(Breadcrumb, {
+		"data-slot": "file-breadcrumb",
+		...props,
+		children: /* @__PURE__ */ jsxs(BreadcrumbList, { children: [/* @__PURE__ */ jsx(BreadcrumbItem, { children: segments.length > 0 ? /* @__PURE__ */ jsx(BreadcrumbLink, {
+			className: "cursor-pointer",
+			onClick: onNavigateToRoot,
+			children: rootLabel
+		}) : /* @__PURE__ */ jsx(BreadcrumbPage, { children: rootLabel }) }), segments.map((segment, index) => /* @__PURE__ */ jsxs("span", {
+			className: "contents",
+			children: [/* @__PURE__ */ jsx(BreadcrumbSeparator, {}), /* @__PURE__ */ jsx(BreadcrumbItem, { children: index === segments.length - 1 ? /* @__PURE__ */ jsx(BreadcrumbPage, { children: segment }) : /* @__PURE__ */ jsx(BreadcrumbLink, {
+				className: "cursor-pointer",
+				onClick: () => onNavigateToSegment(index),
+				children: segment
+			}) })]
+		}, segment))] })
+	});
+}
+
+//#endregion
+export { FileBreadcrumb };
+//# sourceMappingURL=file-breadcrumb.js.map

package/dist/react/file-browser/file-breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-breadcrumb.js","names":[],"sources":["../../../src/react/file-browser/file-breadcrumb.tsx"],"sourcesContent":["import {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"../ui/breadcrumb\";\n\n/** Props for the FileBreadcrumb component */\nexport interface FileBreadcrumbProps\n  extends Omit<React.ComponentProps<\"nav\">, \"children\"> {\n  /** Label for the root breadcrumb item */\n  rootLabel: string;\n  /** Path segments after the root */\n  segments: string[];\n  /** Called when the root breadcrumb is clicked */\n  onNavigateToRoot: () => void;\n  /** Called when a segment breadcrumb is clicked (receives segment index) */\n  onNavigateToSegment: (index: number) => void;\n}\n\n/** Path-aware breadcrumb navigation built on top of Breadcrumb primitives */\nexport function FileBreadcrumb({\n  rootLabel,\n  segments,\n  onNavigateToRoot,\n  onNavigateToSegment,\n  ...props\n}: FileBreadcrumbProps) {\n  return (\n    <Breadcrumb data-slot=\"file-breadcrumb\" {...props}>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          {segments.length > 0 ? (\n            <BreadcrumbLink\n              className=\"cursor-pointer\"\n              onClick={onNavigateToRoot}\n            >\n              {rootLabel}\n            </BreadcrumbLink>\n          ) : (\n            <BreadcrumbPage>{rootLabel}</BreadcrumbPage>\n          )}\n        </BreadcrumbItem>\n        {segments.map((segment, index) => (\n          <span key={segment} className=\"contents\">\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              {index === segments.length - 1 ? (\n                <BreadcrumbPage>{segment}</BreadcrumbPage>\n              ) : (\n                <BreadcrumbLink\n                  className=\"cursor-pointer\"\n                  onClick={() => onNavigateToSegment(index)}\n                >\n                  {segment}\n                </BreadcrumbLink>\n              )}\n            </BreadcrumbItem>\n          </span>\n        ))}\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n"],"mappings":";;;;;AAuBA,SAAgB,eAAe,EAC7B,WACA,UACA,kBACA,qBACA,GAAG,SACmB;AACtB,QACE,oBAAC;EAAW,aAAU;EAAkB,GAAI;YAC1C,qBAAC,6BACC,oBAAC,4BACE,SAAS,SAAS,IACjB,oBAAC;GACC,WAAU;GACV,SAAS;aAER;IACc,GAEjB,oBAAC,4BAAgB,YAA2B,GAE/B,EAChB,SAAS,KAAK,SAAS,UACtB,qBAAC;GAAmB,WAAU;cAC5B,oBAAC,wBAAsB,EACvB,oBAAC,4BACE,UAAU,SAAS,SAAS,IAC3B,oBAAC,4BAAgB,UAAyB,GAE1C,oBAAC;IACC,WAAU;IACV,eAAe,oBAAoB,MAAM;cAExC;KACc,GAEJ;KAbR,QAcJ,CACP,IACa;GACN"}

package/dist/react/file-browser/file-entry.d.ts

@@ -0,0 +1,27 @@
+import { DirectoryEntry } from "./types.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/react/file-browser/file-entry.d.ts
+/** Props for the FileEntry component */
+interface FileEntryProps extends Omit<React.ComponentProps<"button">, "children"> {
+  /** The directory entry to render */
+  entry: DirectoryEntry;
+  /** Resolved full path for this entry */
+  entryPath: string;
+  /** Whether this entry is currently selected */
+  isSelected?: boolean;
+  /** Custom file size formatter (defaults to formatFileSize) */
+  formatSize?: (bytes: number | undefined) => string;
+}
+/** Single file or directory row with icon, name, size, and selection state */
+declare function FileEntry({
+  entry,
+  entryPath,
+  isSelected,
+  formatSize,
+  className,
+  ...props
+}: FileEntryProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { FileEntry, FileEntryProps };
+//# sourceMappingURL=file-entry.d.ts.map

package/dist/react/file-browser/file-entry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-entry.d.ts","names":[],"sources":["../../../src/react/file-browser/file-entry.tsx"],"mappings":";;;;;UAMiB,cAAA,SACP,IAAA,CAAK,KAAA,CAAM,cAAA;;EAEnB,KAAA,EAAO,cAAA;EAFP;EAIA,SAAA;EAJa;EAMb,UAAA;EANQ;EAQR,UAAA,IAAc,KAAA;AAAA;;iBAIA,SAAA,CAAA;EACd,KAAA;EACA,SAAA;EACA,UAAA;EACA,UAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,cAAA,GAAc,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/react/file-browser/file-entry.js

@@ -0,0 +1,31 @@
+import { formatFileSize } from "../lib/format.js";
+import { cn } from "../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight, FileIcon, FolderIcon } from "lucide-react";
+
+//#region src/react/file-browser/file-entry.tsx
+/** Single file or directory row with icon, name, size, and selection state */
+function FileEntry({ entry, entryPath, isSelected, formatSize = formatFileSize, className, ...props }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"data-slot": "file-entry",
+		className: cn("flex items-center gap-3 px-4 py-3 w-full text-left hover:bg-muted/50 border-b last:border-b-0 transition-colors", isSelected && "bg-muted", className),
+		...props,
+		children: [
+			entry.is_directory ? /* @__PURE__ */ jsx(FolderIcon, { className: "h-5 w-5 text-blue-500 shrink-0" }) : /* @__PURE__ */ jsx(FileIcon, { className: "h-5 w-5 text-muted-foreground shrink-0" }),
+			/* @__PURE__ */ jsx("span", {
+				className: "flex-1 truncate text-sm text-foreground",
+				children: entry.name ?? entryPath.split("/").pop()
+			}),
+			entry.is_directory && /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
+			!entry.is_directory && entry.file_size !== void 0 && /* @__PURE__ */ jsx("span", {
+				className: "text-xs text-muted-foreground shrink-0",
+				children: formatSize(entry.file_size)
+			})
+		]
+	});
+}
+
+//#endregion
+export { FileEntry };
+//# sourceMappingURL=file-entry.js.map

package/dist/react/file-browser/file-entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-entry.js","names":[],"sources":["../../../src/react/file-browser/file-entry.tsx"],"sourcesContent":["import { ChevronRight, FileIcon, FolderIcon } from \"lucide-react\";\nimport { formatFileSize } from \"../lib/format\";\nimport { cn } from \"../lib/utils\";\nimport type { DirectoryEntry } from \"./types\";\n\n/** Props for the FileEntry component */\nexport interface FileEntryProps\n  extends Omit<React.ComponentProps<\"button\">, \"children\"> {\n  /** The directory entry to render */\n  entry: DirectoryEntry;\n  /** Resolved full path for this entry */\n  entryPath: string;\n  /** Whether this entry is currently selected */\n  isSelected?: boolean;\n  /** Custom file size formatter (defaults to formatFileSize) */\n  formatSize?: (bytes: number | undefined) => string;\n}\n\n/** Single file or directory row with icon, name, size, and selection state */\nexport function FileEntry({\n  entry,\n  entryPath,\n  isSelected,\n  formatSize = formatFileSize,\n  className,\n  ...props\n}: FileEntryProps) {\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"file-entry\"\n      className={cn(\n        \"flex items-center gap-3 px-4 py-3 w-full text-left hover:bg-muted/50 border-b last:border-b-0 transition-colors\",\n        isSelected && \"bg-muted\",\n        className,\n      )}\n      {...props}\n    >\n      {entry.is_directory ? (\n        <FolderIcon className=\"h-5 w-5 text-blue-500 shrink-0\" />\n      ) : (\n        <FileIcon className=\"h-5 w-5 text-muted-foreground shrink-0\" />\n      )}\n      <span className=\"flex-1 truncate text-sm text-foreground\">\n        {entry.name ?? entryPath.split(\"/\").pop()}\n      </span>\n      {entry.is_directory && (\n        <ChevronRight className=\"h-4 w-4 text-muted-foreground shrink-0\" />\n      )}\n      {!entry.is_directory && entry.file_size !== undefined && (\n        <span className=\"text-xs text-muted-foreground shrink-0\">\n          {formatSize(entry.file_size)}\n        </span>\n      )}\n    </button>\n  );\n}\n"],"mappings":";;;;;;;AAmBA,SAAgB,UAAU,EACxB,OACA,WACA,YACA,aAAa,gBACb,WACA,GAAG,SACc;AACjB,QACE,qBAAC;EACC,MAAK;EACL,aAAU;EACV,WAAW,GACT,mHACA,cAAc,YACd,UACD;EACD,GAAI;;GAEH,MAAM,eACL,oBAAC,cAAW,WAAU,mCAAmC,GAEzD,oBAAC,YAAS,WAAU,2CAA2C;GAEjE,oBAAC;IAAK,WAAU;cACb,MAAM,QAAQ,UAAU,MAAM,IAAI,CAAC,KAAK;KACpC;GACN,MAAM,gBACL,oBAAC,gBAAa,WAAU,2CAA2C;GAEpE,CAAC,MAAM,gBAAgB,MAAM,cAAc,UAC1C,oBAAC;IAAK,WAAU;cACb,WAAW,MAAM,UAAU;KACvB;;GAEF"}

package/dist/react/file-browser/file-preview-panel.d.ts

@@ -0,0 +1,42 @@
+import { FileBrowserLabels, FilePreview } from "./types.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/react/file-browser/file-preview-panel.d.ts
+/** Props for the FilePreviewPanel component */
+interface FilePreviewPanelProps extends Omit<React.ComponentProps<"div">, "children"> {
+  /** Full path of the selected file (null when nothing is selected) */
+  selectedFile: string | null;
+  /** Preview data for the selected file */
+  preview: FilePreview | null;
+  /** Whether the preview is loading */
+  previewLoading?: boolean;
+  /** Called when the download button is clicked */
+  onDownload?: (filePath: string) => void;
+  /** Called when the delete button is clicked */
+  onDelete?: (filePath: string) => void;
+  /** Whether a delete operation is in progress */
+  deleting?: boolean;
+  /** Image preview source — string URL or function that receives the file path */
+  imagePreviewSrc?: string | ((filePath: string) => string);
+  /** Custom file size formatter (defaults to formatFileSize) */
+  formatSize?: (bytes: number | undefined) => string;
+  /** Customizable labels */
+  labels?: Pick<FileBrowserLabels, "selectFilePrompt" | "previewNotAvailable" | "previewFailed" | "download" | "size" | "type" | "modified" | "unknown">;
+}
+/** Preview panel displaying file metadata, image/text preview, and download/delete actions */
+declare function FilePreviewPanel({
+  selectedFile,
+  preview,
+  previewLoading,
+  onDownload,
+  onDelete,
+  deleting,
+  imagePreviewSrc,
+  formatSize,
+  labels,
+  className,
+  ...props
+}: FilePreviewPanelProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { FilePreviewPanel, FilePreviewPanelProps };
+//# sourceMappingURL=file-preview-panel.d.ts.map

package/dist/react/file-browser/file-preview-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-preview-panel.d.ts","names":[],"sources":["../../../src/react/file-browser/file-preview-panel.tsx"],"mappings":";;;;;UAQiB,qBAAA,SACP,IAAA,CAAK,KAAA,CAAM,cAAA;;EAEnB,YAAA;EAFA;EAIA,OAAA,EAAS,WAAA;EAJI;EAMb,cAAA;EAaE;EAXF,UAAA,IAAc,QAAA;EARN;EAUR,QAAA,IAAY,QAAA;EAVA;EAYZ,QAAA;EAZa;EAcb,eAAA,cAA6B,QAAA;EAZ7B;EAcA,UAAA,IAAc,KAAA;EAZL;EAcT,MAAA,GAAS,IAAA,CACP,iBAAA;AAAA;;iBAaY,gBAAA,CAAA;EACd,YAAA;EACA,OAAA;EACA,cAAA;EACA,UAAA;EACA,QAAA;EACA,QAAA;EACA,eAAA;EACA,UAAA;EACA,MAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,qBAAA,GAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/react/file-browser/file-preview-panel.js

@@ -0,0 +1,135 @@
+import { formatFileSize } from "../lib/format.js";
+import { Button } from "../ui/button.js";
+import { Card } from "../ui/card.js";
+import { Skeleton } from "../ui/skeleton.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertCircle, Download, FileIcon, Loader2, Trash2 } from "lucide-react";
+
+//#region src/react/file-browser/file-preview-panel.tsx
+/** Preview panel displaying file metadata, image/text preview, and download/delete actions */
+function FilePreviewPanel({ selectedFile, preview, previewLoading, onDownload, onDelete, deleting, imagePreviewSrc, formatSize = formatFileSize, labels, className, ...props }) {
+	const resolveImageSrc = (filePath) => {
+		if (!imagePreviewSrc) return "";
+		if (typeof imagePreviewSrc === "string") return imagePreviewSrc;
+		return imagePreviewSrc(filePath);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "file-preview-panel",
+		className,
+		...props,
+		children: /* @__PURE__ */ jsxs(Card, {
+			className: "p-6",
+			children: [
+				!selectedFile && /* @__PURE__ */ jsxs("div", {
+					className: "text-center text-muted-foreground py-8",
+					children: [/* @__PURE__ */ jsx(FileIcon, { className: "h-10 w-10 mx-auto mb-3 opacity-40" }), /* @__PURE__ */ jsx("p", {
+						className: "text-sm",
+						children: labels?.selectFilePrompt ?? "Select a file to preview"
+					})]
+				}),
+				selectedFile && previewLoading && /* @__PURE__ */ jsxs("div", {
+					className: "space-y-3",
+					children: [
+						/* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-3/4" }),
+						/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }),
+						/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-2/3" }),
+						/* @__PURE__ */ jsx(Skeleton, { className: "h-32 w-full mt-4" })
+					]
+				}),
+				selectedFile && !previewLoading && preview && /* @__PURE__ */ jsxs("div", {
+					className: "space-y-4",
+					children: [
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+							className: "font-semibold text-foreground truncate mb-1",
+							children: selectedFile.split("/").pop()
+						}), /* @__PURE__ */ jsx("p", {
+							className: "text-xs text-muted-foreground truncate",
+							children: selectedFile
+						})] }),
+						/* @__PURE__ */ jsxs("div", {
+							className: "space-y-2 text-sm",
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									className: "flex justify-between",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground",
+										children: labels?.size ?? "Size"
+									}), /* @__PURE__ */ jsx("span", {
+										className: "text-foreground",
+										children: formatSize(preview.contentLength)
+									})]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "flex justify-between",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground",
+										children: labels?.type ?? "Type"
+									}), /* @__PURE__ */ jsx("span", {
+										className: "text-foreground truncate ml-2",
+										children: preview.contentType ?? labels?.unknown ?? "Unknown"
+									})]
+								}),
+								preview.lastModified && /* @__PURE__ */ jsxs("div", {
+									className: "flex justify-between",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground",
+										children: labels?.modified ?? "Modified"
+									}), /* @__PURE__ */ jsx("span", {
+										className: "text-foreground",
+										children: preview.lastModified
+									})]
+								})
+							]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex gap-2",
+							children: [onDownload && /* @__PURE__ */ jsxs(Button, {
+								variant: "outline",
+								size: "sm",
+								className: "flex-1",
+								onClick: () => onDownload(selectedFile),
+								children: [/* @__PURE__ */ jsx(Download, { className: "h-4 w-4 mr-2" }), labels?.download ?? "Download"]
+							}), onDelete && /* @__PURE__ */ jsx(Button, {
+								variant: "destructive",
+								size: "sm",
+								disabled: deleting,
+								onClick: () => onDelete(selectedFile),
+								children: deleting ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
+							})]
+						}),
+						preview.isImage && imagePreviewSrc && /* @__PURE__ */ jsx("div", {
+							className: "border rounded overflow-hidden",
+							children: /* @__PURE__ */ jsx("img", {
+								src: resolveImageSrc(selectedFile),
+								alt: selectedFile.split("/").pop() ?? "Preview",
+								className: "w-full h-auto"
+							})
+						}),
+						preview.isText && preview.textPreview !== null && /* @__PURE__ */ jsx("div", {
+							className: "border rounded",
+							children: /* @__PURE__ */ jsx("pre", {
+								className: "p-3 text-xs font-mono overflow-auto max-h-80 whitespace-pre-wrap text-foreground bg-muted/30",
+								children: preview.textPreview
+							})
+						}),
+						!preview.isText && !preview.isImage && /* @__PURE__ */ jsx("div", {
+							className: "text-center py-4 text-sm text-muted-foreground",
+							children: labels?.previewNotAvailable ?? "Preview not available for this file type."
+						})
+					]
+				}),
+				selectedFile && !previewLoading && !preview && /* @__PURE__ */ jsxs("div", {
+					className: "text-center py-8",
+					children: [/* @__PURE__ */ jsx(AlertCircle, { className: "h-8 w-8 text-destructive mx-auto mb-2" }), /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-destructive",
+						children: labels?.previewFailed ?? "Failed to load preview"
+					})]
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+export { FilePreviewPanel };
+//# sourceMappingURL=file-preview-panel.js.map

package/dist/react/file-browser/file-preview-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-preview-panel.js","names":[],"sources":["../../../src/react/file-browser/file-preview-panel.tsx"],"sourcesContent":["import { AlertCircle, Download, FileIcon, Loader2, Trash2 } from \"lucide-react\";\nimport { formatFileSize } from \"../lib/format\";\nimport { Button } from \"../ui/button\";\nimport { Card } from \"../ui/card\";\nimport { Skeleton } from \"../ui/skeleton\";\nimport type { FileBrowserLabels, FilePreview } from \"./types\";\n\n/** Props for the FilePreviewPanel component */\nexport interface FilePreviewPanelProps\n  extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  /** Full path of the selected file (null when nothing is selected) */\n  selectedFile: string | null;\n  /** Preview data for the selected file */\n  preview: FilePreview | null;\n  /** Whether the preview is loading */\n  previewLoading?: boolean;\n  /** Called when the download button is clicked */\n  onDownload?: (filePath: string) => void;\n  /** Called when the delete button is clicked */\n  onDelete?: (filePath: string) => void;\n  /** Whether a delete operation is in progress */\n  deleting?: boolean;\n  /** Image preview source — string URL or function that receives the file path */\n  imagePreviewSrc?: string | ((filePath: string) => string);\n  /** Custom file size formatter (defaults to formatFileSize) */\n  formatSize?: (bytes: number | undefined) => string;\n  /** Customizable labels */\n  labels?: Pick<\n    FileBrowserLabels,\n    | \"selectFilePrompt\"\n    | \"previewNotAvailable\"\n    | \"previewFailed\"\n    | \"download\"\n    | \"size\"\n    | \"type\"\n    | \"modified\"\n    | \"unknown\"\n  >;\n}\n\n/** Preview panel displaying file metadata, image/text preview, and download/delete actions */\nexport function FilePreviewPanel({\n  selectedFile,\n  preview,\n  previewLoading,\n  onDownload,\n  onDelete,\n  deleting,\n  imagePreviewSrc,\n  formatSize = formatFileSize,\n  labels,\n  className,\n  ...props\n}: FilePreviewPanelProps) {\n  const resolveImageSrc = (filePath: string) => {\n    if (!imagePreviewSrc) return \"\";\n    if (typeof imagePreviewSrc === \"string\") return imagePreviewSrc;\n    return imagePreviewSrc(filePath);\n  };\n\n  return (\n    <div data-slot=\"file-preview-panel\" className={className} {...props}>\n      <Card className=\"p-6\">\n        {/* No file selected */}\n        {!selectedFile && (\n          <div className=\"text-center text-muted-foreground py-8\">\n            <FileIcon className=\"h-10 w-10 mx-auto mb-3 opacity-40\" />\n            <p className=\"text-sm\">\n              {labels?.selectFilePrompt ?? \"Select a file to preview\"}\n            </p>\n          </div>\n        )}\n\n        {/* Loading state */}\n        {selectedFile && previewLoading && (\n          <div className=\"space-y-3\">\n            <Skeleton className=\"h-5 w-3/4\" />\n            <Skeleton className=\"h-4 w-1/2\" />\n            <Skeleton className=\"h-4 w-2/3\" />\n            <Skeleton className=\"h-32 w-full mt-4\" />\n          </div>\n        )}\n\n        {/* Preview content */}\n        {selectedFile && !previewLoading && preview && (\n          <div className=\"space-y-4\">\n            <div>\n              <h3 className=\"font-semibold text-foreground truncate mb-1\">\n                {selectedFile.split(\"/\").pop()}\n              </h3>\n              <p className=\"text-xs text-muted-foreground truncate\">\n                {selectedFile}\n              </p>\n            </div>\n\n            <div className=\"space-y-2 text-sm\">\n              <div className=\"flex justify-between\">\n                <span className=\"text-muted-foreground\">\n                  {labels?.size ?? \"Size\"}\n                </span>\n                <span className=\"text-foreground\">\n                  {formatSize(preview.contentLength)}\n                </span>\n              </div>\n              <div className=\"flex justify-between\">\n                <span className=\"text-muted-foreground\">\n                  {labels?.type ?? \"Type\"}\n                </span>\n                <span className=\"text-foreground truncate ml-2\">\n                  {preview.contentType ?? labels?.unknown ?? \"Unknown\"}\n                </span>\n              </div>\n              {preview.lastModified && (\n                <div className=\"flex justify-between\">\n                  <span className=\"text-muted-foreground\">\n                    {labels?.modified ?? \"Modified\"}\n                  </span>\n                  <span className=\"text-foreground\">\n                    {preview.lastModified}\n                  </span>\n                </div>\n              )}\n            </div>\n\n            <div className=\"flex gap-2\">\n              {onDownload && (\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  className=\"flex-1\"\n                  onClick={() => onDownload(selectedFile)}\n                >\n                  <Download className=\"h-4 w-4 mr-2\" />\n                  {labels?.download ?? \"Download\"}\n                </Button>\n              )}\n              {onDelete && (\n                <Button\n                  variant=\"destructive\"\n                  size=\"sm\"\n                  disabled={deleting}\n                  onClick={() => onDelete(selectedFile)}\n                >\n                  {deleting ? (\n                    <Loader2 className=\"h-4 w-4 animate-spin\" />\n                  ) : (\n                    <Trash2 className=\"h-4 w-4\" />\n                  )}\n                </Button>\n              )}\n            </div>\n\n            {preview.isImage && imagePreviewSrc && (\n              <div className=\"border rounded overflow-hidden\">\n                <img\n                  src={resolveImageSrc(selectedFile)}\n                  alt={selectedFile.split(\"/\").pop() ?? \"Preview\"}\n                  className=\"w-full h-auto\"\n                />\n              </div>\n            )}\n\n            {preview.isText && preview.textPreview !== null && (\n              <div className=\"border rounded\">\n                <pre className=\"p-3 text-xs font-mono overflow-auto max-h-80 whitespace-pre-wrap text-foreground bg-muted/30\">\n                  {preview.textPreview}\n                </pre>\n              </div>\n            )}\n\n            {!preview.isText && !preview.isImage && (\n              <div className=\"text-center py-4 text-sm text-muted-foreground\">\n                {labels?.previewNotAvailable ??\n                  \"Preview not available for this file type.\"}\n              </div>\n            )}\n          </div>\n        )}\n\n        {/* Preview load failed */}\n        {selectedFile && !previewLoading && !preview && (\n          <div className=\"text-center py-8\">\n            <AlertCircle className=\"h-8 w-8 text-destructive mx-auto mb-2\" />\n            <p className=\"text-sm text-destructive\">\n              {labels?.previewFailed ?? \"Failed to load preview\"}\n            </p>\n          </div>\n        )}\n      </Card>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAyCA,SAAgB,iBAAiB,EAC/B,cACA,SACA,gBACA,YACA,UACA,UACA,iBACA,aAAa,gBACb,QACA,WACA,GAAG,SACqB;CACxB,MAAM,mBAAmB,aAAqB;AAC5C,MAAI,CAAC,gBAAiB,QAAO;AAC7B,MAAI,OAAO,oBAAoB,SAAU,QAAO;AAChD,SAAO,gBAAgB,SAAS;;AAGlC,QACE,oBAAC;EAAI,aAAU;EAAgC;EAAW,GAAI;YAC5D,qBAAC;GAAK,WAAU;;IAEb,CAAC,gBACA,qBAAC;KAAI,WAAU;gBACb,oBAAC,YAAS,WAAU,sCAAsC,EAC1D,oBAAC;MAAE,WAAU;gBACV,QAAQ,oBAAoB;OAC3B;MACA;IAIP,gBAAgB,kBACf,qBAAC;KAAI,WAAU;;MACb,oBAAC,YAAS,WAAU,cAAc;MAClC,oBAAC,YAAS,WAAU,cAAc;MAClC,oBAAC,YAAS,WAAU,cAAc;MAClC,oBAAC,YAAS,WAAU,qBAAqB;;MACrC;IAIP,gBAAgB,CAAC,kBAAkB,WAClC,qBAAC;KAAI,WAAU;;MACb,qBAAC,oBACC,oBAAC;OAAG,WAAU;iBACX,aAAa,MAAM,IAAI,CAAC,KAAK;QAC3B,EACL,oBAAC;OAAE,WAAU;iBACV;QACC,IACA;MAEN,qBAAC;OAAI,WAAU;;QACb,qBAAC;SAAI,WAAU;oBACb,oBAAC;UAAK,WAAU;oBACb,QAAQ,QAAQ;WACZ,EACP,oBAAC;UAAK,WAAU;oBACb,WAAW,QAAQ,cAAc;WAC7B;UACH;QACN,qBAAC;SAAI,WAAU;oBACb,oBAAC;UAAK,WAAU;oBACb,QAAQ,QAAQ;WACZ,EACP,oBAAC;UAAK,WAAU;oBACb,QAAQ,eAAe,QAAQ,WAAW;WACtC;UACH;QACL,QAAQ,gBACP,qBAAC;SAAI,WAAU;oBACb,oBAAC;UAAK,WAAU;oBACb,QAAQ,YAAY;WAChB,EACP,oBAAC;UAAK,WAAU;oBACb,QAAQ;WACJ;UACH;;QAEJ;MAEN,qBAAC;OAAI,WAAU;kBACZ,cACC,qBAAC;QACC,SAAQ;QACR,MAAK;QACL,WAAU;QACV,eAAe,WAAW,aAAa;mBAEvC,oBAAC,YAAS,WAAU,iBAAiB,EACpC,QAAQ,YAAY;SACd,EAEV,YACC,oBAAC;QACC,SAAQ;QACR,MAAK;QACL,UAAU;QACV,eAAe,SAAS,aAAa;kBAEpC,WACC,oBAAC,WAAQ,WAAU,yBAAyB,GAE5C,oBAAC,UAAO,WAAU,YAAY;SAEzB;QAEP;MAEL,QAAQ,WAAW,mBAClB,oBAAC;OAAI,WAAU;iBACb,oBAAC;QACC,KAAK,gBAAgB,aAAa;QAClC,KAAK,aAAa,MAAM,IAAI,CAAC,KAAK,IAAI;QACtC,WAAU;SACV;QACE;MAGP,QAAQ,UAAU,QAAQ,gBAAgB,QACzC,oBAAC;OAAI,WAAU;iBACb,oBAAC;QAAI,WAAU;kBACZ,QAAQ;SACL;QACF;MAGP,CAAC,QAAQ,UAAU,CAAC,QAAQ,WAC3B,oBAAC;OAAI,WAAU;iBACZ,QAAQ,uBACP;QACE;;MAEJ;IAIP,gBAAgB,CAAC,kBAAkB,CAAC,WACnC,qBAAC;KAAI,WAAU;gBACb,oBAAC,eAAY,WAAU,0CAA0C,EACjE,oBAAC;MAAE,WAAU;gBACV,QAAQ,iBAAiB;OACxB;MACA;;IAEH;GACH"}

package/dist/react/file-browser/index.d.ts

@@ -0,0 +1,7 @@
+import { formatFileSize } from "../lib/format.js";
+import { DirectoryEntry, FileBrowserLabels, FilePreview } from "./types.js";
+import { DirectoryList, DirectoryListProps } from "./directory-list.js";
+import { FileBreadcrumb, FileBreadcrumbProps } from "./file-breadcrumb.js";
+import { FileEntry, FileEntryProps } from "./file-entry.js";
+import { FilePreviewPanel, FilePreviewPanelProps } from "./file-preview-panel.js";
+import { NewFolderInput, NewFolderInputProps } from "./new-folder-input.js";

package/dist/react/file-browser/index.js

@@ -0,0 +1,6 @@
+import { formatFileSize } from "../lib/format.js";
+import { FileEntry } from "./file-entry.js";
+import { DirectoryList } from "./directory-list.js";
+import { FileBreadcrumb } from "./file-breadcrumb.js";
+import { FilePreviewPanel } from "./file-preview-panel.js";
+import { NewFolderInput } from "./new-folder-input.js";