@djangocfg/ui-tools 2.1.315 → 2.1.317

package/dist/chunk-YXBOAGIM.cjs

@@ -0,0 +1,63 @@
+'use strict';
+
+var chunkWGEGR3DF_cjs = require('./chunk-WGEGR3DF.cjs');
+var lib = require('@djangocfg/ui-core/lib');
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+
+function TreeSkeleton({ rows = 6, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: lib.cn("flex flex-col gap-1 p-2", className), "aria-hidden": true, children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", style: { paddingLeft: i % 3 * 16 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-4 shrink-0 animate-pulse rounded bg-muted" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-4 shrink-0 animate-pulse rounded bg-muted" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-3 flex-1 animate-pulse rounded bg-muted" })
+  ] }, i)) });
+}
+chunkWGEGR3DF_cjs.__name(TreeSkeleton, "TreeSkeleton");
+function TreeError({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: lib.cn(
+        "flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive",
+        className
+      ),
+      role: "alert",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { "aria-hidden": true, className: "mt-0.5 size-4 shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children })
+      ]
+    }
+  );
+}
+chunkWGEGR3DF_cjs.__name(TreeError, "TreeError");
+
+// src/tools/Tree/data/createDemoTree.ts
+function createDemoTree({
+  depth = 3,
+  breadth = 4,
+  rootPrefix = "node"
+} = {}) {
+  const make = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((id, name, level) => {
+    if (level >= depth) {
+      return { id, data: { name } };
+    }
+    const children = [];
+    for (let i = 0; i < breadth; i++) {
+      const childId = `${id}/${i}`;
+      children.push(make(childId, `${name}-${i}`, level + 1));
+    }
+    return { id, data: { name }, children };
+  }, "make");
+  const roots = [];
+  for (let i = 0; i < breadth; i++) {
+    roots.push(make(`${rootPrefix}-${i}`, `${rootPrefix} ${i}`, 1));
+  }
+  return roots;
+}
+chunkWGEGR3DF_cjs.__name(createDemoTree, "createDemoTree");
+
+exports.TreeError = TreeError;
+exports.TreeSkeleton = TreeSkeleton;
+exports.createDemoTree = createDemoTree;
+//# sourceMappingURL=chunk-YXBOAGIM.cjs.map
+//# sourceMappingURL=chunk-YXBOAGIM.cjs.map

package/dist/chunk-YXBOAGIM.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tools/Tree/components/TreeSkeleton.tsx","../src/tools/Tree/components/TreeError.tsx","../src/tools/Tree/data/createDemoTree.ts"],"names":["jsx","cn","jsxs","__name","AlertCircle"],"mappings":"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","file":"chunk-YXBOAGIM.cjs","sourcesContent":["'use client';\n\nimport { cn } from '@djangocfg/ui-core/lib';\n\nexport interface TreeSkeletonProps {\n  rows?: number;\n  className?: string;\n}\n\nexport function TreeSkeleton({ rows = 6, className }: TreeSkeletonProps) {\n  return (\n    <div className={cn('flex flex-col gap-1 p-2', className)} aria-hidden>\n      {Array.from({ length: rows }).map((_, i) => (\n        <div key={i} className=\"flex items-center gap-2\" style={{ paddingLeft: (i % 3) * 16 }}>\n          <span className=\"size-4 shrink-0 animate-pulse rounded bg-muted\" />\n          <span className=\"size-4 shrink-0 animate-pulse rounded bg-muted\" />\n          <span className=\"h-3 flex-1 animate-pulse rounded bg-muted\" />\n        </div>\n      ))}\n    </div>\n  );\n}\n","'use client';\n\nimport { AlertCircle } from 'lucide-react';\nimport { cn } from '@djangocfg/ui-core/lib';\n\nexport interface TreeErrorProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function TreeError({ children, className }: TreeErrorProps) {\n  return (\n    <div\n      className={cn(\n        'flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive',\n        className,\n      )}\n      role=\"alert\"\n    >\n      <AlertCircle aria-hidden className=\"mt-0.5 size-4 shrink-0\" />\n      <span>{children}</span>\n    </div>\n  );\n}\n","'use client';\n\nimport type { TreeNode } from '../types';\n\nexport interface DemoNode {\n  name: string;\n}\n\n/**\n * Build a deterministic synthetic tree for stories and tests.\n *\n * @example\n *   const data = createDemoTree({ depth: 4, breadth: 3 });\n *   <TreeRoot data={data} getItemName={(n) => n.data.name} />\n */\nexport function createDemoTree({\n  depth = 3,\n  breadth = 4,\n  rootPrefix = 'node',\n}: {\n  depth?: number;\n  breadth?: number;\n  rootPrefix?: string;\n} = {}): TreeNode<DemoNode>[] {\n  const make = (id: string, name: string, level: number): TreeNode<DemoNode> => {\n    if (level >= depth) {\n      return { id, data: { name } };\n    }\n    const children: TreeNode<DemoNode>[] = [];\n    for (let i = 0; i < breadth; i++) {\n      const childId = `${id}/${i}`;\n      children.push(make(childId, `${name}-${i}`, level + 1));\n    }\n    return { id, data: { name }, children };\n  };\n\n  const roots: TreeNode<DemoNode>[] = [];\n  for (let i = 0; i < breadth; i++) {\n    roots.push(make(`${rootPrefix}-${i}`, `${rootPrefix} ${i}`, 1));\n  }\n  return roots;\n}\n"]}

package/dist/file-icon/index.cjs

@@ -0,0 +1,117 @@
+'use strict';
+
+var chunkWGEGR3DF_cjs = require('../chunk-WGEGR3DF.cjs');
+var react = require('react');
+var lucideReact = require('lucide-react');
+var lib = require('@djangocfg/ui-core/lib');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/tools/FileIcon/loader.ts
+var cached;
+var inflight = null;
+async function loadMaterialIcons() {
+  if (cached !== void 0) return cached;
+  if (inflight) return inflight;
+  inflight = (async () => {
+    try {
+      const specifier = "material-file-icons";
+      const mod = await import(
+        /* @vite-ignore */
+        specifier
+      );
+      const fn = mod.getIcon ?? mod.default?.getIcon ?? null;
+      cached = fn;
+      return fn;
+    } catch {
+      cached = null;
+      return null;
+    } finally {
+      inflight = null;
+    }
+  })();
+  return inflight;
+}
+chunkWGEGR3DF_cjs.__name(loadMaterialIcons, "loadMaterialIcons");
+function getMaterialIconsSync() {
+  return cached ?? null;
+}
+chunkWGEGR3DF_cjs.__name(getMaterialIconsSync, "getMaterialIconsSync");
+function FileIcon({
+  name,
+  isFolder = false,
+  isExpanded = false,
+  size = 16,
+  className
+}) {
+  const [svg, setSvg] = react.useState(() => {
+    if (isFolder) return null;
+    const fn = getMaterialIconsSync();
+    return fn ? fn(name)?.svg ?? null : null;
+  });
+  react.useEffect(() => {
+    if (isFolder) {
+      setSvg(null);
+      return;
+    }
+    let cancelled = false;
+    void loadMaterialIcons().then((fn) => {
+      if (cancelled) return;
+      setSvg(fn ? fn(name)?.svg ?? null : null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [isFolder, name]);
+  if (isFolder) {
+    const Icon = isExpanded ? lucideReact.FolderOpen : lucideReact.Folder;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Icon,
+      {
+        className: lib.cn("shrink-0 text-amber-500", className),
+        style: { width: size, height: size }
+      }
+    );
+  }
+  if (!svg) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      lucideReact.File,
+      {
+        className: lib.cn("shrink-0 text-muted-foreground/80", className),
+        style: { width: size, height: size }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      role: "img",
+      "aria-hidden": true,
+      className: lib.cn("inline-block shrink-0", className),
+      style: { width: size, height: size },
+      dangerouslySetInnerHTML: { __html: svg }
+    }
+  );
+}
+chunkWGEGR3DF_cjs.__name(FileIcon, "FileIcon");
+function createFileIconSlot({
+  getName,
+  size = 16
+}) {
+  return ({ node, isFolder, isExpanded }) => /* @__PURE__ */ jsxRuntime.jsx(
+    FileIcon,
+    {
+      name: getName(node),
+      isFolder,
+      isExpanded,
+      size
+    }
+  );
+}
+chunkWGEGR3DF_cjs.__name(createFileIconSlot, "createFileIconSlot");
+
+exports.FileIcon = FileIcon;
+exports.createFileIconSlot = createFileIconSlot;
+exports.getMaterialIconsSync = getMaterialIconsSync;
+exports.loadMaterialIcons = loadMaterialIcons;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/file-icon/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tools/FileIcon/loader.ts","../../src/tools/FileIcon/FileIcon.tsx","../../src/tools/FileIcon/treeAdapter.tsx"],"names":["__name","useState","useEffect","FolderOpen","Folder","jsx","cn","FileFallback"],"mappings":";;;;;;;;;AAcA,IAAI,MAAA;AACJ,IAAI,QAAA,GAA6C,IAAA;AAEjD,eAAsB,iBAAA,GAA+C;AACnE,EAAA,IAAI,MAAA,KAAW,QAAW,OAAO,MAAA;AACjC,EAAA,IAAI,UAAU,OAAO,QAAA;AAErB,EAAA,QAAA,GAAA,CAAY,YAAY;AACtB,IAAA,IAAI;AAEF,MAAA,MAAM,SAAA,GAAY,qBAAA;AAClB,MAAA,MAAM,MAAO,MAAM;AAAA;AAAA,QAA0B;AAAA,OAAA;AAI7C,MAAA,MAAM,EAAA,GAAK,GAAA,CAAI,OAAA,IAAW,GAAA,CAAI,SAAS,OAAA,IAAW,IAAA;AAClD,MAAA,MAAA,GAAS,EAAA;AACT,MAAA,OAAO,EAAA;AAAA,IACT,CAAA,CAAA,MAAQ;AACN,MAAA,MAAA,GAAS,IAAA;AACT,MAAA,OAAO,IAAA;AAAA,IACT,CAAA,SAAE;AACA,MAAA,QAAA,GAAW,IAAA;AAAA,IACb;AAAA,EACF,CAAA,GAAG;AAEH,EAAA,OAAO,QAAA;AACT;AAxBsBA,wBAAA,CAAA,iBAAA,EAAA,mBAAA,CAAA;AA2Bf,SAAS,oBAAA,GAAyC;AACvD,EAAA,OAAO,MAAA,IAAU,IAAA;AACnB;AAFgBA,wBAAA,CAAA,oBAAA,EAAA,sBAAA,CAAA;ACZT,SAAS,QAAA,CAAS;AAAA,EACvB,IAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,UAAA,GAAa,KAAA;AAAA,EACb,IAAA,GAAO,EAAA;AAAA,EACP;AACF,CAAA,EAAkB;AAChB,EAAA,MAAM,CAAC,GAAA,EAAK,MAAM,CAAA,GAAIC,eAAwB,MAAM;AAClD,IAAA,IAAI,UAAU,OAAO,IAAA;AACrB,IAAA,MAAM,KAAK,oBAAA,EAAqB;AAChC,IAAA,OAAO,EAAA,GAAM,EAAA,CAAG,IAAI,CAAA,EAAG,OAAO,IAAA,GAAQ,IAAA;AAAA,EACxC,CAAC,CAAA;AAED,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,QAAA,EAAU;AACZ,MAAA,MAAA,CAAO,IAAI,CAAA;AACX,MAAA;AAAA,IACF;AACA,IAAA,IAAI,SAAA,GAAY,KAAA;AAChB,IAAA,KAAK,iBAAA,EAAkB,CAAE,IAAA,CAAK,CAAC,EAAA,KAAO;AACpC,MAAA,IAAI,SAAA,EAAW;AACf,MAAA,MAAA,CAAO,KAAM,EAAA,CAAG,IAAI,CAAA,EAAG,GAAA,IAAO,OAAQ,IAAI,CAAA;AAAA,IAC5C,CAAC,CAAA;AACD,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,GAAY,IAAA;AAAA,IACd,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,QAAA,EAAU,IAAI,CAAC,CAAA;AAEnB,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,MAAM,IAAA,GAAO,aAAaC,sBAAA,GAAaC,kBAAA;AACvC,IAAA,uBACEC,cAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,MAAA,CAAG,yBAAA,EAA2B,SAAS,CAAA;AAAA,QAClD,KAAA,EAAO,EAAE,KAAA,EAAO,IAAA,EAAM,QAAQ,IAAA;AAAK;AAAA,KACrC;AAAA,EAEJ;AAEA,EAAA,IAAI,CAAC,GAAA,EAAK;AACR,IAAA,uBACED,cAAA;AAAA,MAACE,gBAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWD,MAAA,CAAG,mCAAA,EAAqC,SAAS,CAAA;AAAA,QAC5D,KAAA,EAAO,EAAE,KAAA,EAAO,IAAA,EAAM,QAAQ,IAAA;AAAK;AAAA,KACrC;AAAA,EAEJ;AAEA,EAAA,uBACED,cAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,KAAA;AAAA,MACL,aAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAWC,MAAA,CAAG,uBAAA,EAAyB,SAAS,CAAA;AAAA,MAChD,KAAA,EAAO,EAAE,KAAA,EAAO,IAAA,EAAM,QAAQ,IAAA,EAAK;AAAA,MACnC,uBAAA,EAAyB,EAAE,MAAA,EAAQ,GAAA;AAAI;AAAA,GACzC;AAEJ;AAxDgBN,wBAAA,CAAA,QAAA,EAAA,UAAA,CAAA;ACJT,SAAS,kBAAA,CAAsB;AAAA,EACpC,OAAA;AAAA,EACA,IAAA,GAAO;AACT,CAAA,EAAiD;AAC/C,EAAA,OAAO,CAAC,EAAE,IAAA,EAAM,QAAA,EAAU,UAAA,uBACxBK,cAAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,QAAQ,IAAI,CAAA;AAAA,MAClB,QAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;AAZgBL,wBAAA,CAAA,kBAAA,EAAA,oBAAA,CAAA","file":"index.cjs","sourcesContent":["'use client';\n\n/**\n * Lazy loader for `material-file-icons`. The package is an optional dependency:\n * if it's installed in the consumer's tree, we render its rich VSCode-style\n * SVGs; if not, the loader resolves to `null` and `<FileIcon>` falls back to a\n * Lucide icon. Either way, ui-tools never throws or warns about a missing\n * package.\n *\n * Resolution is cached per-process so we don't re-import on every render.\n */\n\ntype GetIconFn = (name: string) => { svg: string } | undefined;\n\nlet cached: GetIconFn | null | undefined;\nlet inflight: Promise<GetIconFn | null> | null = null;\n\nexport async function loadMaterialIcons(): Promise<GetIconFn | null> {\n  if (cached !== undefined) return cached;\n  if (inflight) return inflight;\n\n  inflight = (async () => {\n    try {\n      // Computed specifier so bundlers don't try to eagerly resolve it.\n      const specifier = 'material-file-icons';\n      const mod = (await import(/* @vite-ignore */ specifier)) as {\n        getIcon?: GetIconFn;\n        default?: { getIcon?: GetIconFn };\n      };\n      const fn = mod.getIcon ?? mod.default?.getIcon ?? null;\n      cached = fn;\n      return fn;\n    } catch {\n      cached = null;\n      return null;\n    } finally {\n      inflight = null;\n    }\n  })();\n\n  return inflight;\n}\n\n/** Synchronous accessor — returns null until `loadMaterialIcons` resolves. */\nexport function getMaterialIconsSync(): GetIconFn | null {\n  return cached ?? null;\n}\n","'use client';\n\nimport { useEffect, useState } from 'react';\nimport { File as FileFallback, Folder, FolderOpen } from 'lucide-react';\nimport { cn } from '@djangocfg/ui-core/lib';\n\nimport { getMaterialIconsSync, loadMaterialIcons } from './loader';\n\nexport type FileIconSize = 12 | 14 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 64;\n\nexport interface FileIconProps {\n  /** File name (with extension) or folder name. */\n  name: string;\n  /** Render a folder icon instead of a file icon. */\n  isFolder?: boolean;\n  /** Folder open / closed state. Ignored when `isFolder` is false. */\n  isExpanded?: boolean;\n  /** Pixel size of the icon. */\n  size?: FileIconSize;\n  className?: string;\n}\n\n/**\n * VSCode-style file icon.\n *\n * - Folders render Lucide `Folder` / `FolderOpen` (amber tint).\n * - Files use `material-file-icons` if it's installed in the consumer; otherwise\n *   fall back to a neutral Lucide `File` icon.\n *\n * The optional dependency is loaded lazily on first render — there is zero\n * bundle cost for consumers who never mount this component.\n */\nexport function FileIcon({\n  name,\n  isFolder = false,\n  isExpanded = false,\n  size = 16,\n  className,\n}: FileIconProps) {\n  const [svg, setSvg] = useState<string | null>(() => {\n    if (isFolder) return null;\n    const fn = getMaterialIconsSync();\n    return fn ? (fn(name)?.svg ?? null) : null;\n  });\n\n  useEffect(() => {\n    if (isFolder) {\n      setSvg(null);\n      return;\n    }\n    let cancelled = false;\n    void loadMaterialIcons().then((fn) => {\n      if (cancelled) return;\n      setSvg(fn ? (fn(name)?.svg ?? null) : null);\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, [isFolder, name]);\n\n  if (isFolder) {\n    const Icon = isExpanded ? FolderOpen : Folder;\n    return (\n      <Icon\n        className={cn('shrink-0 text-amber-500', className)}\n        style={{ width: size, height: size }}\n      />\n    );\n  }\n\n  if (!svg) {\n    return (\n      <FileFallback\n        className={cn('shrink-0 text-muted-foreground/80', className)}\n        style={{ width: size, height: size }}\n      />\n    );\n  }\n\n  return (\n    <span\n      role=\"img\"\n      aria-hidden\n      className={cn('inline-block shrink-0', className)}\n      style={{ width: size, height: size }}\n      dangerouslySetInnerHTML={{ __html: svg }}\n    />\n  );\n}\n\nexport default FileIcon;\n","'use client';\n\nimport type { TreeNode, TreeRowSlot } from '../Tree/types';\nimport { FileIcon, type FileIconSize } from './FileIcon';\n\nexport interface CreateFileIconSlotOptions<T> {\n  /**\n   * How to read the displayed name (with extension) for a node. Use the same\n   * accessor you pass to `<TreeRoot getItemName={...} />`.\n   */\n  getName: (node: TreeNode<T>) => string;\n  /** Pixel size for both file and folder icons. Default: 16. */\n  size?: FileIconSize;\n}\n\n/**\n * Build a `renderIcon` slot for `<TreeRoot>` that uses `<FileIcon>` for both\n * leaves and folders.\n *\n * @example\n * ```tsx\n * <TreeRoot\n *   data={data}\n *   getItemName={(n) => n.data.name}\n *   renderIcon={createFileIconSlot({ getName: (n) => n.data.name })}\n * />\n * ```\n */\nexport function createFileIconSlot<T>({\n  getName,\n  size = 16,\n}: CreateFileIconSlotOptions<T>): TreeRowSlot<T> {\n  return ({ node, isFolder, isExpanded }) => (\n    <FileIcon\n      name={getName(node)}\n      isFolder={isFolder}\n      isExpanded={isExpanded}\n      size={size}\n    />\n  );\n}\n"]}

package/dist/file-icon/index.d.cts

@@ -0,0 +1,69 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { T as TreeNode, a as TreeRowSlot } from '../types-Cclwv4Hl.cjs';
+import 'react';
+
+type FileIconSize = 12 | 14 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 64;
+interface FileIconProps {
+    /** File name (with extension) or folder name. */
+    name: string;
+    /** Render a folder icon instead of a file icon. */
+    isFolder?: boolean;
+    /** Folder open / closed state. Ignored when `isFolder` is false. */
+    isExpanded?: boolean;
+    /** Pixel size of the icon. */
+    size?: FileIconSize;
+    className?: string;
+}
+/**
+ * VSCode-style file icon.
+ *
+ * - Folders render Lucide `Folder` / `FolderOpen` (amber tint).
+ * - Files use `material-file-icons` if it's installed in the consumer; otherwise
+ *   fall back to a neutral Lucide `File` icon.
+ *
+ * The optional dependency is loaded lazily on first render — there is zero
+ * bundle cost for consumers who never mount this component.
+ */
+declare function FileIcon({ name, isFolder, isExpanded, size, className, }: FileIconProps): react_jsx_runtime.JSX.Element;
+
+interface CreateFileIconSlotOptions<T> {
+    /**
+     * How to read the displayed name (with extension) for a node. Use the same
+     * accessor you pass to `<TreeRoot getItemName={...} />`.
+     */
+    getName: (node: TreeNode<T>) => string;
+    /** Pixel size for both file and folder icons. Default: 16. */
+    size?: FileIconSize;
+}
+/**
+ * Build a `renderIcon` slot for `<TreeRoot>` that uses `<FileIcon>` for both
+ * leaves and folders.
+ *
+ * @example
+ * ```tsx
+ * <TreeRoot
+ *   data={data}
+ *   getItemName={(n) => n.data.name}
+ *   renderIcon={createFileIconSlot({ getName: (n) => n.data.name })}
+ * />
+ * ```
+ */
+declare function createFileIconSlot<T>({ getName, size, }: CreateFileIconSlotOptions<T>): TreeRowSlot<T>;
+
+/**
+ * Lazy loader for `material-file-icons`. The package is an optional dependency:
+ * if it's installed in the consumer's tree, we render its rich VSCode-style
+ * SVGs; if not, the loader resolves to `null` and `<FileIcon>` falls back to a
+ * Lucide icon. Either way, ui-tools never throws or warns about a missing
+ * package.
+ *
+ * Resolution is cached per-process so we don't re-import on every render.
+ */
+type GetIconFn = (name: string) => {
+    svg: string;
+} | undefined;
+declare function loadMaterialIcons(): Promise<GetIconFn | null>;
+/** Synchronous accessor — returns null until `loadMaterialIcons` resolves. */
+declare function getMaterialIconsSync(): GetIconFn | null;
+
+export { type CreateFileIconSlotOptions, FileIcon, type FileIconProps, type FileIconSize, createFileIconSlot, getMaterialIconsSync, loadMaterialIcons };

package/dist/file-icon/index.d.ts

@@ -0,0 +1,69 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { T as TreeNode, a as TreeRowSlot } from '../types-Cclwv4Hl.js';
+import 'react';
+
+type FileIconSize = 12 | 14 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 64;
+interface FileIconProps {
+    /** File name (with extension) or folder name. */
+    name: string;
+    /** Render a folder icon instead of a file icon. */
+    isFolder?: boolean;
+    /** Folder open / closed state. Ignored when `isFolder` is false. */
+    isExpanded?: boolean;
+    /** Pixel size of the icon. */
+    size?: FileIconSize;
+    className?: string;
+}
+/**
+ * VSCode-style file icon.
+ *
+ * - Folders render Lucide `Folder` / `FolderOpen` (amber tint).
+ * - Files use `material-file-icons` if it's installed in the consumer; otherwise
+ *   fall back to a neutral Lucide `File` icon.
+ *
+ * The optional dependency is loaded lazily on first render — there is zero
+ * bundle cost for consumers who never mount this component.
+ */
+declare function FileIcon({ name, isFolder, isExpanded, size, className, }: FileIconProps): react_jsx_runtime.JSX.Element;
+
+interface CreateFileIconSlotOptions<T> {
+    /**
+     * How to read the displayed name (with extension) for a node. Use the same
+     * accessor you pass to `<TreeRoot getItemName={...} />`.
+     */
+    getName: (node: TreeNode<T>) => string;
+    /** Pixel size for both file and folder icons. Default: 16. */
+    size?: FileIconSize;
+}
+/**
+ * Build a `renderIcon` slot for `<TreeRoot>` that uses `<FileIcon>` for both
+ * leaves and folders.
+ *
+ * @example
+ * ```tsx
+ * <TreeRoot
+ *   data={data}
+ *   getItemName={(n) => n.data.name}
+ *   renderIcon={createFileIconSlot({ getName: (n) => n.data.name })}
+ * />
+ * ```
+ */
+declare function createFileIconSlot<T>({ getName, size, }: CreateFileIconSlotOptions<T>): TreeRowSlot<T>;
+
+/**
+ * Lazy loader for `material-file-icons`. The package is an optional dependency:
+ * if it's installed in the consumer's tree, we render its rich VSCode-style
+ * SVGs; if not, the loader resolves to `null` and `<FileIcon>` falls back to a
+ * Lucide icon. Either way, ui-tools never throws or warns about a missing
+ * package.
+ *
+ * Resolution is cached per-process so we don't re-import on every render.
+ */
+type GetIconFn = (name: string) => {
+    svg: string;
+} | undefined;
+declare function loadMaterialIcons(): Promise<GetIconFn | null>;
+/** Synchronous accessor — returns null until `loadMaterialIcons` resolves. */
+declare function getMaterialIconsSync(): GetIconFn | null;
+
+export { type CreateFileIconSlotOptions, FileIcon, type FileIconProps, type FileIconSize, createFileIconSlot, getMaterialIconsSync, loadMaterialIcons };

package/dist/file-icon/index.mjs

@@ -0,0 +1,112 @@
+import { __name } from '../chunk-CGILA3WO.mjs';
+import { useState, useEffect } from 'react';
+import { FolderOpen, Folder, File } from 'lucide-react';
+import { cn } from '@djangocfg/ui-core/lib';
+import { jsx } from 'react/jsx-runtime';
+
+// src/tools/FileIcon/loader.ts
+var cached;
+var inflight = null;
+async function loadMaterialIcons() {
+  if (cached !== void 0) return cached;
+  if (inflight) return inflight;
+  inflight = (async () => {
+    try {
+      const specifier = "material-file-icons";
+      const mod = await import(
+        /* @vite-ignore */
+        specifier
+      );
+      const fn = mod.getIcon ?? mod.default?.getIcon ?? null;
+      cached = fn;
+      return fn;
+    } catch {
+      cached = null;
+      return null;
+    } finally {
+      inflight = null;
+    }
+  })();
+  return inflight;
+}
+__name(loadMaterialIcons, "loadMaterialIcons");
+function getMaterialIconsSync() {
+  return cached ?? null;
+}
+__name(getMaterialIconsSync, "getMaterialIconsSync");
+function FileIcon({
+  name,
+  isFolder = false,
+  isExpanded = false,
+  size = 16,
+  className
+}) {
+  const [svg, setSvg] = useState(() => {
+    if (isFolder) return null;
+    const fn = getMaterialIconsSync();
+    return fn ? fn(name)?.svg ?? null : null;
+  });
+  useEffect(() => {
+    if (isFolder) {
+      setSvg(null);
+      return;
+    }
+    let cancelled = false;
+    void loadMaterialIcons().then((fn) => {
+      if (cancelled) return;
+      setSvg(fn ? fn(name)?.svg ?? null : null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [isFolder, name]);
+  if (isFolder) {
+    const Icon = isExpanded ? FolderOpen : Folder;
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        className: cn("shrink-0 text-amber-500", className),
+        style: { width: size, height: size }
+      }
+    );
+  }
+  if (!svg) {
+    return /* @__PURE__ */ jsx(
+      File,
+      {
+        className: cn("shrink-0 text-muted-foreground/80", className),
+        style: { width: size, height: size }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "img",
+      "aria-hidden": true,
+      className: cn("inline-block shrink-0", className),
+      style: { width: size, height: size },
+      dangerouslySetInnerHTML: { __html: svg }
+    }
+  );
+}
+__name(FileIcon, "FileIcon");
+function createFileIconSlot({
+  getName,
+  size = 16
+}) {
+  return ({ node, isFolder, isExpanded }) => /* @__PURE__ */ jsx(
+    FileIcon,
+    {
+      name: getName(node),
+      isFolder,
+      isExpanded,
+      size
+    }
+  );
+}
+__name(createFileIconSlot, "createFileIconSlot");
+
+export { FileIcon, createFileIconSlot, getMaterialIconsSync, loadMaterialIcons };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/file-icon/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tools/FileIcon/loader.ts","../../src/tools/FileIcon/FileIcon.tsx","../../src/tools/FileIcon/treeAdapter.tsx"],"names":["FileFallback","jsx"],"mappings":"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","file":"index.mjs","sourcesContent":["'use client';\n\n/**\n * Lazy loader for `material-file-icons`. The package is an optional dependency:\n * if it's installed in the consumer's tree, we render its rich VSCode-style\n * SVGs; if not, the loader resolves to `null` and `<FileIcon>` falls back to a\n * Lucide icon. Either way, ui-tools never throws or warns about a missing\n * package.\n *\n * Resolution is cached per-process so we don't re-import on every render.\n */\n\ntype GetIconFn = (name: string) => { svg: string } | undefined;\n\nlet cached: GetIconFn | null | undefined;\nlet inflight: Promise<GetIconFn | null> | null = null;\n\nexport async function loadMaterialIcons(): Promise<GetIconFn | null> {\n  if (cached !== undefined) return cached;\n  if (inflight) return inflight;\n\n  inflight = (async () => {\n    try {\n      // Computed specifier so bundlers don't try to eagerly resolve it.\n      const specifier = 'material-file-icons';\n      const mod = (await import(/* @vite-ignore */ specifier)) as {\n        getIcon?: GetIconFn;\n        default?: { getIcon?: GetIconFn };\n      };\n      const fn = mod.getIcon ?? mod.default?.getIcon ?? null;\n      cached = fn;\n      return fn;\n    } catch {\n      cached = null;\n      return null;\n    } finally {\n      inflight = null;\n    }\n  })();\n\n  return inflight;\n}\n\n/** Synchronous accessor — returns null until `loadMaterialIcons` resolves. */\nexport function getMaterialIconsSync(): GetIconFn | null {\n  return cached ?? null;\n}\n","'use client';\n\nimport { useEffect, useState } from 'react';\nimport { File as FileFallback, Folder, FolderOpen } from 'lucide-react';\nimport { cn } from '@djangocfg/ui-core/lib';\n\nimport { getMaterialIconsSync, loadMaterialIcons } from './loader';\n\nexport type FileIconSize = 12 | 14 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 64;\n\nexport interface FileIconProps {\n  /** File name (with extension) or folder name. */\n  name: string;\n  /** Render a folder icon instead of a file icon. */\n  isFolder?: boolean;\n  /** Folder open / closed state. Ignored when `isFolder` is false. */\n  isExpanded?: boolean;\n  /** Pixel size of the icon. */\n  size?: FileIconSize;\n  className?: string;\n}\n\n/**\n * VSCode-style file icon.\n *\n * - Folders render Lucide `Folder` / `FolderOpen` (amber tint).\n * - Files use `material-file-icons` if it's installed in the consumer; otherwise\n *   fall back to a neutral Lucide `File` icon.\n *\n * The optional dependency is loaded lazily on first render — there is zero\n * bundle cost for consumers who never mount this component.\n */\nexport function FileIcon({\n  name,\n  isFolder = false,\n  isExpanded = false,\n  size = 16,\n  className,\n}: FileIconProps) {\n  const [svg, setSvg] = useState<string | null>(() => {\n    if (isFolder) return null;\n    const fn = getMaterialIconsSync();\n    return fn ? (fn(name)?.svg ?? null) : null;\n  });\n\n  useEffect(() => {\n    if (isFolder) {\n      setSvg(null);\n      return;\n    }\n    let cancelled = false;\n    void loadMaterialIcons().then((fn) => {\n      if (cancelled) return;\n      setSvg(fn ? (fn(name)?.svg ?? null) : null);\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, [isFolder, name]);\n\n  if (isFolder) {\n    const Icon = isExpanded ? FolderOpen : Folder;\n    return (\n      <Icon\n        className={cn('shrink-0 text-amber-500', className)}\n        style={{ width: size, height: size }}\n      />\n    );\n  }\n\n  if (!svg) {\n    return (\n      <FileFallback\n        className={cn('shrink-0 text-muted-foreground/80', className)}\n        style={{ width: size, height: size }}\n      />\n    );\n  }\n\n  return (\n    <span\n      role=\"img\"\n      aria-hidden\n      className={cn('inline-block shrink-0', className)}\n      style={{ width: size, height: size }}\n      dangerouslySetInnerHTML={{ __html: svg }}\n    />\n  );\n}\n\nexport default FileIcon;\n","'use client';\n\nimport type { TreeNode, TreeRowSlot } from '../Tree/types';\nimport { FileIcon, type FileIconSize } from './FileIcon';\n\nexport interface CreateFileIconSlotOptions<T> {\n  /**\n   * How to read the displayed name (with extension) for a node. Use the same\n   * accessor you pass to `<TreeRoot getItemName={...} />`.\n   */\n  getName: (node: TreeNode<T>) => string;\n  /** Pixel size for both file and folder icons. Default: 16. */\n  size?: FileIconSize;\n}\n\n/**\n * Build a `renderIcon` slot for `<TreeRoot>` that uses `<FileIcon>` for both\n * leaves and folders.\n *\n * @example\n * ```tsx\n * <TreeRoot\n *   data={data}\n *   getItemName={(n) => n.data.name}\n *   renderIcon={createFileIconSlot({ getName: (n) => n.data.name })}\n * />\n * ```\n */\nexport function createFileIconSlot<T>({\n  getName,\n  size = 16,\n}: CreateFileIconSlotOptions<T>): TreeRowSlot<T> {\n  return ({ node, isFolder, isExpanded }) => (\n    <FileIcon\n      name={getName(node)}\n      isFolder={isFolder}\n      isExpanded={isExpanded}\n      size={size}\n    />\n  );\n}\n"]}