@djangocfg/ui-tools 2.1.316 → 2.1.318

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

@@ -0,0 +1,98 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LucideIcon } from 'lucide-react';
+import { T as TreeNode, a as TreeRowSlot } from '../types-CevSbyfD.js';
+import 'react';
+
+interface ResolveFolderIconOptions {
+    /** Folder display name (no path). */
+    name: string;
+    /** Open / closed state — only used for the *generic* folder fallback. */
+    isExpanded?: boolean;
+    /**
+     * Optional override map. Wins over the built-in table. Keys are
+     * matched case-insensitively after `trim()`.
+     */
+    overrides?: Record<string, LucideIcon>;
+}
+/**
+ * Pick the right folder icon for `name`. Returns `Folder` / `FolderOpen`
+ * for unknown names so callers can render the generic open/closed pair.
+ */
+declare function resolveFolderIcon({ name, isExpanded, overrides, }: ResolveFolderIconOptions): LucideIcon;
+type FolderIconOverrides = Record<string, LucideIcon>;
+
+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;
+    /**
+     * Override or extend the built-in special-folder mapping. Keys are
+     * matched case-insensitively. Only used when `isFolder` is true.
+     */
+    folderOverrides?: FolderIconOverrides;
+    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, folderOverrides, 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;
+    /**
+     * Override or extend the built-in special-folder mapping (e.g. give
+     * `tests` a custom icon). Keys are matched case-insensitively.
+     */
+    folderOverrides?: FolderIconOverrides;
+}
+/**
+ * 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, folderOverrides, }: 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, type FolderIconOverrides, type ResolveFolderIconOptions, createFileIconSlot, getMaterialIconsSync, loadMaterialIcons, resolveFolderIcon };

package/dist/file-icon/index.mjs

@@ -0,0 +1,167 @@
+import { __name } from '../chunk-CGILA3WO.mjs';
+import { useState, useEffect } from 'react';
+import { FolderGit2, Github, Settings, Terminal, FlaskConical, BookOpen, FolderOutput, Image, FolderInput, Package, FolderCode, 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");
+var SPECIAL_FOLDERS = {
+  src: FolderCode,
+  source: FolderCode,
+  lib: FolderCode,
+  app: FolderCode,
+  packages: Package,
+  node_modules: Package,
+  vendor: Package,
+  public: FolderInput,
+  static: FolderInput,
+  assets: Image,
+  images: Image,
+  media: Image,
+  dist: FolderOutput,
+  build: FolderOutput,
+  out: FolderOutput,
+  ".next": FolderOutput,
+  ".nuxt": FolderOutput,
+  ".turbo": FolderOutput,
+  docs: BookOpen,
+  documentation: BookOpen,
+  tests: FlaskConical,
+  test: FlaskConical,
+  __tests__: FlaskConical,
+  __test__: FlaskConical,
+  scripts: Terminal,
+  bin: Terminal,
+  config: Settings,
+  configs: Settings,
+  ".config": Settings,
+  ".vscode": Settings,
+  ".idea": Settings,
+  ".git": FolderGit2,
+  ".github": Github,
+  ".gitlab": FolderGit2
+};
+function resolveFolderIcon({
+  name,
+  isExpanded = false,
+  overrides
+}) {
+  const key = name.trim().toLowerCase();
+  if (overrides?.[key]) return overrides[key];
+  const special = SPECIAL_FOLDERS[key];
+  if (special) return special;
+  return isExpanded ? FolderOpen : Folder;
+}
+__name(resolveFolderIcon, "resolveFolderIcon");
+function FileIcon({
+  name,
+  isFolder = false,
+  isExpanded = false,
+  size = 16,
+  folderOverrides,
+  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 = resolveFolderIcon({
+      name,
+      isExpanded,
+      overrides: folderOverrides
+    });
+    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,
+  folderOverrides
+}) {
+  return ({ node, isFolder, isExpanded }) => /* @__PURE__ */ jsx(
+    FileIcon,
+    {
+      name: getName(node),
+      isFolder,
+      isExpanded,
+      size,
+      folderOverrides
+    }
+  );
+}
+__name(createFileIconSlot, "createFileIconSlot");
+
+export { FileIcon, createFileIconSlot, getMaterialIconsSync, loadMaterialIcons, resolveFolderIcon };
+//# 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/specialFolders.ts","../../src/tools/FileIcon/FileIcon.tsx","../../src/tools/FileIcon/treeAdapter.tsx"],"names":["ImageIcon","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 {\n  BookOpen,\n  FlaskConical,\n  Folder,\n  FolderCode,\n  FolderGit2,\n  FolderInput,\n  FolderOpen,\n  FolderOutput,\n  Github,\n  Image as ImageIcon,\n  Package,\n  Settings,\n  Terminal,\n  type LucideIcon,\n} from 'lucide-react';\n\n/**\n * Conventional folder names → Lucide icon. Lookup is case-insensitive and\n * trimmed. Anything not in this map falls back to a generic folder icon.\n *\n * Designed to feel \"right\" across the common dev project layouts (Node,\n * Python, Go, Rust, Django, Next, Vite). Not exhaustive on purpose —\n * keeps the bundle light and the behaviour predictable.\n */\nconst SPECIAL_FOLDERS: Record<string, LucideIcon> = {\n  src: FolderCode,\n  source: FolderCode,\n  lib: FolderCode,\n  app: FolderCode,\n  packages: Package,\n  node_modules: Package,\n  vendor: Package,\n  public: FolderInput,\n  static: FolderInput,\n  assets: ImageIcon,\n  images: ImageIcon,\n  media: ImageIcon,\n  dist: FolderOutput,\n  build: FolderOutput,\n  out: FolderOutput,\n  '.next': FolderOutput,\n  '.nuxt': FolderOutput,\n  '.turbo': FolderOutput,\n  docs: BookOpen,\n  documentation: BookOpen,\n  tests: FlaskConical,\n  test: FlaskConical,\n  __tests__: FlaskConical,\n  __test__: FlaskConical,\n  scripts: Terminal,\n  bin: Terminal,\n  config: Settings,\n  configs: Settings,\n  '.config': Settings,\n  '.vscode': Settings,\n  '.idea': Settings,\n  '.git': FolderGit2,\n  '.github': Github,\n  '.gitlab': FolderGit2,\n};\n\nexport interface ResolveFolderIconOptions {\n  /** Folder display name (no path). */\n  name: string;\n  /** Open / closed state — only used for the *generic* folder fallback. */\n  isExpanded?: boolean;\n  /**\n   * Optional override map. Wins over the built-in table. Keys are\n   * matched case-insensitively after `trim()`.\n   */\n  overrides?: Record<string, LucideIcon>;\n}\n\n/**\n * Pick the right folder icon for `name`. Returns `Folder` / `FolderOpen`\n * for unknown names so callers can render the generic open/closed pair.\n */\nexport function resolveFolderIcon({\n  name,\n  isExpanded = false,\n  overrides,\n}: ResolveFolderIconOptions): LucideIcon {\n  const key = name.trim().toLowerCase();\n  if (overrides?.[key]) return overrides[key];\n  const special = SPECIAL_FOLDERS[key];\n  if (special) return special;\n  return isExpanded ? FolderOpen : Folder;\n}\n\nexport type FolderIconOverrides = Record<string, LucideIcon>;\n","'use client';\n\nimport { useEffect, useState } from 'react';\nimport { File as FileFallback } from 'lucide-react';\nimport { cn } from '@djangocfg/ui-core/lib';\n\nimport { getMaterialIconsSync, loadMaterialIcons } from './loader';\nimport { resolveFolderIcon, type FolderIconOverrides } from './specialFolders';\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  /**\n   * Override or extend the built-in special-folder mapping. Keys are\n   * matched case-insensitively. Only used when `isFolder` is true.\n   */\n  folderOverrides?: FolderIconOverrides;\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  folderOverrides,\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 = resolveFolderIcon({\n      name,\n      isExpanded,\n      overrides: folderOverrides,\n    });\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';\nimport type { FolderIconOverrides } from './specialFolders';\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   * Override or extend the built-in special-folder mapping (e.g. give\n   * `tests` a custom icon). Keys are matched case-insensitively.\n   */\n  folderOverrides?: FolderIconOverrides;\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  folderOverrides,\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      folderOverrides={folderOverrides}\n    />\n  );\n}\n"]}

package/dist/index.cjs

@@ -1,5 +1,6 @@
 'use strict';
 
+var chunkL37FZYJU_cjs = require('./chunk-L37FZYJU.cjs');
 var chunkPRPG2T2E_cjs = require('./chunk-PRPG2T2E.cjs');
 var chunkZLQHUZDU_cjs = require('./chunk-ZLQHUZDU.cjs');
 var chunkDFTVB66S_cjs = require('./chunk-DFTVB66S.cjs');
@@ -7,11 +8,10 @@ var chunkIHAY6FO6_cjs = require('./chunk-IHAY6FO6.cjs');
 var chunk77HQWEQ6_cjs = require('./chunk-77HQWEQ6.cjs');
 var chunkF2CMIIOH_cjs = require('./chunk-F2CMIIOH.cjs');
 var chunkYXBOAGIM_cjs = require('./chunk-YXBOAGIM.cjs');
-var chunk4CEOJDMB_cjs = require('./chunk-4CEOJDMB.cjs');
+var chunk3Z3A7FHA_cjs = require('./chunk-3Z3A7FHA.cjs');
 var chunkS44PW6NK_cjs = require('./chunk-S44PW6NK.cjs');
 var chunk33AMWFBZ_cjs = require('./chunk-33AMWFBZ.cjs');
 require('./chunk-2SMCH62O.cjs');
-var chunkL37FZYJU_cjs = require('./chunk-L37FZYJU.cjs');
 var chunkWGEGR3DF_cjs = require('./chunk-WGEGR3DF.cjs');
 var React = require('react');
 var lib = require('@djangocfg/ui-core/lib');
@@ -363,7 +363,7 @@ var LazyCronScheduler = createLazyComponent(
   }
 );
 var LazyTree = createLazyComponent(
-  () => import('./TreeRoot-A25RIGYE.cjs'),
+  () => import('./TreeRoot-DSK5JILT.cjs'),
   {
     displayName: "LazyTree",
     fallback: /* @__PURE__ */ jsxRuntime.jsx(LoadingFallback, { minHeight: 200, text: "Loading tree\u2026" })
@@ -1401,6 +1401,94 @@ function MarkdownToolbar({ editor }) {
 }
 chunkWGEGR3DF_cjs.__name(MarkdownToolbar, "MarkdownToolbar");
 
+Object.defineProperty(exports, "ArrayFieldItemTemplate", {
+  enumerable: true,
+  get: function () { return chunkL37FZYJU_cjs.ArrayFieldItemTemplate; }
+});
+Object.defineProperty(exports, "ArrayFieldTemplate", {
+  enumerable: true,
+  get: function () { return chunkL37FZYJU_cjs.ArrayFieldTemplate; }
+});
+Object.defineProperty(exports, "BaseInputTemplate", {
+  enumerable: true,
+  get: function () { return chunkL37FZYJU_cjs.BaseInputTemplate; }
+});
+Object.defineProperty(exports, "CheckboxWidget", {
+  enumerable: true,
+  get: function () { return chunkL37FZYJU_cjs.CheckboxWidget; }
+});
+Object.defineProperty(exports, "ColorWidget", {
+  enumerable: true,
+  get: function () { return chunkL37FZYJU_cjs.ColorWidget; }
+});
+Object.defineProperty(exports, "ErrorListTemplate", {
+  enumerable: true,
+  get: function () { return chunkL37FZYJU_cjs.ErrorListTemplate; }
+});
+Object.defineProperty(exports, "FieldTemplate", {
+  enumerable: true,
+  get: function () { return chunkL37FZYJU_cjs.FieldTemplate; }
+});
+Object.defineProperty(exports, "JsonSchemaForm", {
+  enumerable: true,
+  get: function () { return chunkL37FZYJU_cjs.JsonSchemaForm; }
+});
+Object.defineProperty(exports, "NumberWidget", {
+  enumerable: true,
+  get: function () { return chunkL37FZYJU_cjs.NumberWidget; }
+});
+Object.defineProperty(exports, "ObjectFieldTemplate", {
+  enumerable: true,
+  get: function () { return chunkL37FZYJU_cjs.ObjectFieldTemplate; }
+});
+Object.defineProperty(exports, "SelectWidget", {
+  enumerable: true,
+  get: function () { return chunkL37FZYJU_cjs.SelectWidget; }
+});
+Object.defineProperty(exports, "SliderWidget", {
+  enumerable: true,
+  get: function () { return chunkL37FZYJU_cjs.SliderWidget; }
+});
+Object.defineProperty(exports, "SwitchWidget", {
+  enumerable: true,
+  get: function () { return chunkL37FZYJU_cjs.SwitchWidget; }
+});
+Object.defineProperty(exports, "TextWidget", {
+  enumerable: true,
+  get: function () { return chunkL37FZYJU_cjs.TextWidget; }
+});
+Object.defineProperty(exports, "getRequiredFields", {
+  enumerable: true,
+  get: function () { return chunkL37FZYJU_cjs.getRequiredFields; }
+});
+Object.defineProperty(exports, "hasRequiredFields", {
+  enumerable: true,
+  get: function () { return chunkL37FZYJU_cjs.hasRequiredFields; }
+});
+Object.defineProperty(exports, "mergeDefaults", {
+  enumerable: true,
+  get: function () { return chunkL37FZYJU_cjs.mergeDefaults; }
+});
+Object.defineProperty(exports, "normalizeFormData", {
+  enumerable: true,
+  get: function () { return chunkL37FZYJU_cjs.normalizeFormData; }
+});
+Object.defineProperty(exports, "safeJsonParse", {
+  enumerable: true,
+  get: function () { return chunkL37FZYJU_cjs.safeJsonParse; }
+});
+Object.defineProperty(exports, "safeJsonStringify", {
+  enumerable: true,
+  get: function () { return chunkL37FZYJU_cjs.safeJsonStringify; }
+});
+Object.defineProperty(exports, "validateRequiredFields", {
+  enumerable: true,
+  get: function () { return chunkL37FZYJU_cjs.validateRequiredFields; }
+});
+Object.defineProperty(exports, "validateSchema", {
+  enumerable: true,
+  get: function () { return chunkL37FZYJU_cjs.validateSchema; }
+});
 Object.defineProperty(exports, "useLottie", {
   enumerable: true,
   get: function () { return chunkPRPG2T2E_cjs.useLottie; }
@@ -1583,127 +1671,127 @@ Object.defineProperty(exports, "createDemoTree", {
 });
 Object.defineProperty(exports, "DEFAULT_TREE_APPEARANCE", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.DEFAULT_TREE_APPEARANCE; }
+  get: function () { return chunk3Z3A7FHA_cjs.DEFAULT_TREE_APPEARANCE; }
 });
 Object.defineProperty(exports, "DEFAULT_TREE_LABELS", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.DEFAULT_TREE_LABELS; }
+  get: function () { return chunk3Z3A7FHA_cjs.DEFAULT_TREE_LABELS; }
 });
 Object.defineProperty(exports, "Tree", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.TreeRoot; }
+  get: function () { return chunk3Z3A7FHA_cjs.TreeRoot; }
 });
 Object.defineProperty(exports, "TreeChevron", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.TreeChevron; }
+  get: function () { return chunk3Z3A7FHA_cjs.TreeChevron; }
 });
 Object.defineProperty(exports, "TreeContent", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.TreeContent; }
+  get: function () { return chunk3Z3A7FHA_cjs.TreeContent; }
 });
 Object.defineProperty(exports, "TreeEmpty", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.TreeEmpty; }
+  get: function () { return chunk3Z3A7FHA_cjs.TreeEmpty; }
 });
 Object.defineProperty(exports, "TreeIcon", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.TreeIcon; }
+  get: function () { return chunk3Z3A7FHA_cjs.TreeIcon; }
 });
 Object.defineProperty(exports, "TreeIndentGuides", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.TreeIndentGuides; }
+  get: function () { return chunk3Z3A7FHA_cjs.TreeIndentGuides; }
 });
 Object.defineProperty(exports, "TreeLabel", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.TreeLabel; }
+  get: function () { return chunk3Z3A7FHA_cjs.TreeLabel; }
 });
 Object.defineProperty(exports, "TreeProvider", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.TreeProvider; }
+  get: function () { return chunk3Z3A7FHA_cjs.TreeProvider; }
 });
 Object.defineProperty(exports, "TreeRoot", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.TreeRoot; }
+  get: function () { return chunk3Z3A7FHA_cjs.TreeRoot; }
 });
 Object.defineProperty(exports, "TreeRow", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.TreeRow; }
+  get: function () { return chunk3Z3A7FHA_cjs.TreeRow; }
 });
 Object.defineProperty(exports, "TreeSearchInput", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.TreeSearchInput; }
+  get: function () { return chunk3Z3A7FHA_cjs.TreeSearchInput; }
 });
 Object.defineProperty(exports, "appearanceToStyle", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.appearanceToStyle; }
+  get: function () { return chunk3Z3A7FHA_cjs.appearanceToStyle; }
 });
 Object.defineProperty(exports, "clearTreeState", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.clearTreeState; }
+  get: function () { return chunk3Z3A7FHA_cjs.clearTreeState; }
 });
 Object.defineProperty(exports, "createChildCache", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.createChildCache; }
+  get: function () { return chunk3Z3A7FHA_cjs.createChildCache; }
 });
 Object.defineProperty(exports, "flattenTree", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.flattenTree; }
+  get: function () { return chunk3Z3A7FHA_cjs.flattenTree; }
 });
 Object.defineProperty(exports, "loadTreeState", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.loadTreeState; }
+  get: function () { return chunk3Z3A7FHA_cjs.loadTreeState; }
 });
 Object.defineProperty(exports, "resolveAppearance", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.resolveAppearance; }
+  get: function () { return chunk3Z3A7FHA_cjs.resolveAppearance; }
 });
 Object.defineProperty(exports, "resolveChildren", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.resolveChildren; }
+  get: function () { return chunk3Z3A7FHA_cjs.resolveChildren; }
 });
 Object.defineProperty(exports, "saveTreeState", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.saveTreeState; }
+  get: function () { return chunk3Z3A7FHA_cjs.saveTreeState; }
 });
 Object.defineProperty(exports, "useTreeActions", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.useTreeActions; }
+  get: function () { return chunk3Z3A7FHA_cjs.useTreeActions; }
 });
 Object.defineProperty(exports, "useTreeContext", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.useTreeContext; }
+  get: function () { return chunk3Z3A7FHA_cjs.useTreeContext; }
 });
 Object.defineProperty(exports, "useTreeExpansion", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.useTreeExpansion; }
+  get: function () { return chunk3Z3A7FHA_cjs.useTreeExpansion; }
 });
 Object.defineProperty(exports, "useTreeFocus", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.useTreeFocus; }
+  get: function () { return chunk3Z3A7FHA_cjs.useTreeFocus; }
 });
 Object.defineProperty(exports, "useTreeKeyboard", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.useTreeKeyboard; }
+  get: function () { return chunk3Z3A7FHA_cjs.useTreeKeyboard; }
 });
 Object.defineProperty(exports, "useTreeLabels", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.useTreeLabels; }
+  get: function () { return chunk3Z3A7FHA_cjs.useTreeLabels; }
 });
 Object.defineProperty(exports, "useTreeRows", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.useTreeRows; }
+  get: function () { return chunk3Z3A7FHA_cjs.useTreeRows; }
 });
 Object.defineProperty(exports, "useTreeSearch", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.useTreeSearch; }
+  get: function () { return chunk3Z3A7FHA_cjs.useTreeSearch; }
 });
 Object.defineProperty(exports, "useTreeSelection", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.useTreeSelection; }
+  get: function () { return chunk3Z3A7FHA_cjs.useTreeSelection; }
 });
 Object.defineProperty(exports, "useTreeTypeAhead", {
   enumerable: true,
-  get: function () { return chunk4CEOJDMB_cjs.useTreeTypeAhead; }
+  get: function () { return chunk3Z3A7FHA_cjs.useTreeTypeAhead; }
 });
 Object.defineProperty(exports, "MarkdownMessage", {
   enumerable: true,
@@ -1729,94 +1817,6 @@ Object.defineProperty(exports, "JsonTree", {
   enumerable: true,
   get: function () { return chunk33AMWFBZ_cjs.JsonTree_default; }
 });
-Object.defineProperty(exports, "ArrayFieldItemTemplate", {
-  enumerable: true,
-  get: function () { return chunkL37FZYJU_cjs.ArrayFieldItemTemplate; }
-});
-Object.defineProperty(exports, "ArrayFieldTemplate", {
-  enumerable: true,
-  get: function () { return chunkL37FZYJU_cjs.ArrayFieldTemplate; }
-});
-Object.defineProperty(exports, "BaseInputTemplate", {
-  enumerable: true,
-  get: function () { return chunkL37FZYJU_cjs.BaseInputTemplate; }
-});
-Object.defineProperty(exports, "CheckboxWidget", {
-  enumerable: true,
-  get: function () { return chunkL37FZYJU_cjs.CheckboxWidget; }
-});
-Object.defineProperty(exports, "ColorWidget", {
-  enumerable: true,
-  get: function () { return chunkL37FZYJU_cjs.ColorWidget; }
-});
-Object.defineProperty(exports, "ErrorListTemplate", {
-  enumerable: true,
-  get: function () { return chunkL37FZYJU_cjs.ErrorListTemplate; }
-});
-Object.defineProperty(exports, "FieldTemplate", {
-  enumerable: true,
-  get: function () { return chunkL37FZYJU_cjs.FieldTemplate; }
-});
-Object.defineProperty(exports, "JsonSchemaForm", {
-  enumerable: true,
-  get: function () { return chunkL37FZYJU_cjs.JsonSchemaForm; }
-});
-Object.defineProperty(exports, "NumberWidget", {
-  enumerable: true,
-  get: function () { return chunkL37FZYJU_cjs.NumberWidget; }
-});
-Object.defineProperty(exports, "ObjectFieldTemplate", {
-  enumerable: true,
-  get: function () { return chunkL37FZYJU_cjs.ObjectFieldTemplate; }
-});
-Object.defineProperty(exports, "SelectWidget", {
-  enumerable: true,
-  get: function () { return chunkL37FZYJU_cjs.SelectWidget; }
-});
-Object.defineProperty(exports, "SliderWidget", {
-  enumerable: true,
-  get: function () { return chunkL37FZYJU_cjs.SliderWidget; }
-});
-Object.defineProperty(exports, "SwitchWidget", {
-  enumerable: true,
-  get: function () { return chunkL37FZYJU_cjs.SwitchWidget; }
-});
-Object.defineProperty(exports, "TextWidget", {
-  enumerable: true,
-  get: function () { return chunkL37FZYJU_cjs.TextWidget; }
-});
-Object.defineProperty(exports, "getRequiredFields", {
-  enumerable: true,
-  get: function () { return chunkL37FZYJU_cjs.getRequiredFields; }
-});
-Object.defineProperty(exports, "hasRequiredFields", {
-  enumerable: true,
-  get: function () { return chunkL37FZYJU_cjs.hasRequiredFields; }
-});
-Object.defineProperty(exports, "mergeDefaults", {
-  enumerable: true,
-  get: function () { return chunkL37FZYJU_cjs.mergeDefaults; }
-});
-Object.defineProperty(exports, "normalizeFormData", {
-  enumerable: true,
-  get: function () { return chunkL37FZYJU_cjs.normalizeFormData; }
-});
-Object.defineProperty(exports, "safeJsonParse", {
-  enumerable: true,
-  get: function () { return chunkL37FZYJU_cjs.safeJsonParse; }
-});
-Object.defineProperty(exports, "safeJsonStringify", {
-  enumerable: true,
-  get: function () { return chunkL37FZYJU_cjs.safeJsonStringify; }
-});
-Object.defineProperty(exports, "validateRequiredFields", {
-  enumerable: true,
-  get: function () { return chunkL37FZYJU_cjs.validateRequiredFields; }
-});
-Object.defineProperty(exports, "validateSchema", {
-  enumerable: true,
-  get: function () { return chunkL37FZYJU_cjs.validateSchema; }
-});
 exports.CardLoadingFallback = CardLoadingFallback;
 exports.CronScheduler = CronScheduler;
 exports.DiffEditor = DiffEditor;