@djangocfg/ui-tools 2.1.429 → 2.1.431

package/dist/tree/index.d.cts

@@ -130,6 +130,18 @@ type TreeBuiltinAction = 'open' | 'rename' | 'duplicate' | 'cut' | 'copy' | 'pas
 type TreeDensity = 'compact' | 'cozy' | 'comfortable';
 type TreeAccentIntensity = 'subtle' | 'default' | 'strong';
 type TreeRadius = 'none' | 'sm' | 'md';
+/**
+ * High-level look. Sets sensible defaults for icons / row sizing / the
+ * active indicator; any individual `TreeAppearance` field still overrides.
+ *
+ *  - `'explorer'` (default) — classic file/folder tree: leaf + folder
+ *    icons, fixed single-line rows, VSCode active-bar.
+ *  - `'list'` — macOS-sidebar / chat-history look: no icons (chevron
+ *    only on groups), auto-height rows (multi-line label friendly), quiet
+ *    selection (no active-bar).
+ */
+type TreeVariant = 'explorer' | 'list';
+type TreeRowSizing = 'fixed' | 'auto';
 /**
  * Cosmetic configuration. Every field is optional; missing values fall
  * back to the `cozy` preset (a comfortable VSCode-Explorer-like density).
@@ -162,6 +174,21 @@ interface TreeAppearance {
      * Mimics the VSCode active-tab indicator. Default: `true`.
      */
     showActiveIndicator?: boolean;
+    /**
+     * High-level look. Default: `'explorer'`. Sets defaults for the three
+     * fields below; pass any of them explicitly to override the variant.
+     */
+    variant?: TreeVariant;
+    /** Hide per-leaf icons (chevron + label only). Variant default. */
+    hideLeafIcons?: boolean;
+    /** Hide folder icons too (chevron stays). Variant default. */
+    hideFolderIcons?: boolean;
+    /**
+     * `'fixed'` — every row is exactly `rowHeight` (single-line explorer).
+     * `'auto'` — `rowHeight` is a *minimum*; rows grow to fit a multi-line
+     * label (title + meta). Variant default.
+     */
+    rowSizing?: TreeRowSizing;
 }
 interface ResolvedAppearance {
     density: TreeDensity;
@@ -175,6 +202,9 @@ interface ResolvedAppearance {
     radius: TreeRadius;
     indentGuideOpacity: number;
     showActiveIndicator: boolean;
+    hideLeafIcons: boolean;
+    hideFolderIcons: boolean;
+    rowSizing: TreeRowSizing;
 }
 declare const DEFAULT_TREE_APPEARANCE: ResolvedAppearance;
 /**
@@ -972,4 +1002,4 @@ interface TreeEmptyAreaProps {
  */
 declare function TreeEmptyArea({ className }: TreeEmptyAreaProps): react_jsx_runtime.JSX.Element;
 
-export { type ChildCache, type ChildEntry, type ChildEntryStatus, DEFAULT_TREE_APPEARANCE, DEFAULT_TREE_LABELS, type DemoNode, FinderTree, FlatRow, type FlattenInput, type PersistedTreeState, type ResolvedAppearance, TREE_DND_MIME, TreeRoot as Tree, type TreeAccentIntensity, type TreeActionsHandle, type TreeActivateOptions, type TreeActivationMode, type TreeAdapter, type TreeAppearance, type TreeBuiltinAction, TreeChevron, type TreeChevronProps, TreeContent, type TreeContentProps, TreeContextMenuActionsResolver, TreeContextMenuItem, TreeContextMenuSlot, type TreeContextValue, type TreeDensity, TreeDropIndicator, type TreeDropIndicatorProps, TreeEmpty, TreeEmptyArea, type TreeEmptyAreaProps, type TreeEmptyProps, TreeError, type TreeErrorProps, TreeIcon, type TreeIconProps, TreeIndentGuides, type TreeIndentGuidesProps, TreeItemId, TreeLabel, type TreeLabelProps, type TreeLabels, type TreeLoadChildren, type TreeMovePosition, TreeNode, TreeProvider, type TreeProviderProps, type TreeRadius, TreeRenameInput, type TreeRenameInputProps, TreeRoot, type TreeRootProps, TreeRow, type TreeRowProps, TreeRowRenderProps, TreeRowSlot, TreeSearchInput, type TreeSearchInputProps, type TreeSelectionMode, TreeSkeleton, type TreeSkeletonProps, type UseTreeFinderHotkeysOptions, type UseTreeKeyboardOptions, type UseTreeTypeAheadOptions, appearanceToStyle, autoSelectRange, clearTreeState, createChildCache, createDemoTree, TreeRoot as default, defaultCanDrop, flattenTree, loadTreeState, resolveAppearance, resolveChildren, resolveDropZone, saveTreeState, splitFileName, useTreeActions, useTreeClipboard, useTreeContext, useTreeDnd, useTreeExpansion, useTreeFinderHotkeys, useTreeFocus, useTreeKeyboard, useTreeLabels, useTreeRename, useTreeRows, useTreeSearch, useTreeSelection, useTreeTypeAhead };
+export { type ChildCache, type ChildEntry, type ChildEntryStatus, DEFAULT_TREE_APPEARANCE, DEFAULT_TREE_LABELS, type DemoNode, FinderTree, FlatRow, type FlattenInput, type PersistedTreeState, type ResolvedAppearance, TREE_DND_MIME, TreeRoot as Tree, type TreeAccentIntensity, type TreeActionsHandle, type TreeActivateOptions, type TreeActivationMode, type TreeAdapter, type TreeAppearance, type TreeBuiltinAction, TreeChevron, type TreeChevronProps, TreeContent, type TreeContentProps, TreeContextMenuActionsResolver, TreeContextMenuItem, TreeContextMenuSlot, type TreeContextValue, type TreeDensity, TreeDropIndicator, type TreeDropIndicatorProps, TreeEmpty, TreeEmptyArea, type TreeEmptyAreaProps, type TreeEmptyProps, TreeError, type TreeErrorProps, TreeIcon, type TreeIconProps, TreeIndentGuides, type TreeIndentGuidesProps, TreeItemId, TreeLabel, type TreeLabelProps, type TreeLabels, type TreeLoadChildren, type TreeMovePosition, TreeNode, TreeProvider, type TreeProviderProps, type TreeRadius, TreeRenameInput, type TreeRenameInputProps, TreeRoot, type TreeRootProps, TreeRow, type TreeRowProps, TreeRowRenderProps, type TreeRowSizing, TreeRowSlot, TreeSearchInput, type TreeSearchInputProps, type TreeSelectionMode, TreeSkeleton, type TreeSkeletonProps, type TreeVariant, type UseTreeFinderHotkeysOptions, type UseTreeKeyboardOptions, type UseTreeTypeAheadOptions, appearanceToStyle, autoSelectRange, clearTreeState, createChildCache, createDemoTree, TreeRoot as default, defaultCanDrop, flattenTree, loadTreeState, resolveAppearance, resolveChildren, resolveDropZone, saveTreeState, splitFileName, useTreeActions, useTreeClipboard, useTreeContext, useTreeDnd, useTreeExpansion, useTreeFinderHotkeys, useTreeFocus, useTreeKeyboard, useTreeLabels, useTreeRename, useTreeRows, useTreeSearch, useTreeSelection, useTreeTypeAhead };

package/dist/tree/index.d.ts

@@ -130,6 +130,18 @@ type TreeBuiltinAction = 'open' | 'rename' | 'duplicate' | 'cut' | 'copy' | 'pas
 type TreeDensity = 'compact' | 'cozy' | 'comfortable';
 type TreeAccentIntensity = 'subtle' | 'default' | 'strong';
 type TreeRadius = 'none' | 'sm' | 'md';
+/**
+ * High-level look. Sets sensible defaults for icons / row sizing / the
+ * active indicator; any individual `TreeAppearance` field still overrides.
+ *
+ *  - `'explorer'` (default) — classic file/folder tree: leaf + folder
+ *    icons, fixed single-line rows, VSCode active-bar.
+ *  - `'list'` — macOS-sidebar / chat-history look: no icons (chevron
+ *    only on groups), auto-height rows (multi-line label friendly), quiet
+ *    selection (no active-bar).
+ */
+type TreeVariant = 'explorer' | 'list';
+type TreeRowSizing = 'fixed' | 'auto';
 /**
  * Cosmetic configuration. Every field is optional; missing values fall
  * back to the `cozy` preset (a comfortable VSCode-Explorer-like density).
@@ -162,6 +174,21 @@ interface TreeAppearance {
      * Mimics the VSCode active-tab indicator. Default: `true`.
      */
     showActiveIndicator?: boolean;
+    /**
+     * High-level look. Default: `'explorer'`. Sets defaults for the three
+     * fields below; pass any of them explicitly to override the variant.
+     */
+    variant?: TreeVariant;
+    /** Hide per-leaf icons (chevron + label only). Variant default. */
+    hideLeafIcons?: boolean;
+    /** Hide folder icons too (chevron stays). Variant default. */
+    hideFolderIcons?: boolean;
+    /**
+     * `'fixed'` — every row is exactly `rowHeight` (single-line explorer).
+     * `'auto'` — `rowHeight` is a *minimum*; rows grow to fit a multi-line
+     * label (title + meta). Variant default.
+     */
+    rowSizing?: TreeRowSizing;
 }
 interface ResolvedAppearance {
     density: TreeDensity;
@@ -175,6 +202,9 @@ interface ResolvedAppearance {
     radius: TreeRadius;
     indentGuideOpacity: number;
     showActiveIndicator: boolean;
+    hideLeafIcons: boolean;
+    hideFolderIcons: boolean;
+    rowSizing: TreeRowSizing;
 }
 declare const DEFAULT_TREE_APPEARANCE: ResolvedAppearance;
 /**
@@ -972,4 +1002,4 @@ interface TreeEmptyAreaProps {
  */
 declare function TreeEmptyArea({ className }: TreeEmptyAreaProps): react_jsx_runtime.JSX.Element;
 
-export { type ChildCache, type ChildEntry, type ChildEntryStatus, DEFAULT_TREE_APPEARANCE, DEFAULT_TREE_LABELS, type DemoNode, FinderTree, FlatRow, type FlattenInput, type PersistedTreeState, type ResolvedAppearance, TREE_DND_MIME, TreeRoot as Tree, type TreeAccentIntensity, type TreeActionsHandle, type TreeActivateOptions, type TreeActivationMode, type TreeAdapter, type TreeAppearance, type TreeBuiltinAction, TreeChevron, type TreeChevronProps, TreeContent, type TreeContentProps, TreeContextMenuActionsResolver, TreeContextMenuItem, TreeContextMenuSlot, type TreeContextValue, type TreeDensity, TreeDropIndicator, type TreeDropIndicatorProps, TreeEmpty, TreeEmptyArea, type TreeEmptyAreaProps, type TreeEmptyProps, TreeError, type TreeErrorProps, TreeIcon, type TreeIconProps, TreeIndentGuides, type TreeIndentGuidesProps, TreeItemId, TreeLabel, type TreeLabelProps, type TreeLabels, type TreeLoadChildren, type TreeMovePosition, TreeNode, TreeProvider, type TreeProviderProps, type TreeRadius, TreeRenameInput, type TreeRenameInputProps, TreeRoot, type TreeRootProps, TreeRow, type TreeRowProps, TreeRowRenderProps, TreeRowSlot, TreeSearchInput, type TreeSearchInputProps, type TreeSelectionMode, TreeSkeleton, type TreeSkeletonProps, type UseTreeFinderHotkeysOptions, type UseTreeKeyboardOptions, type UseTreeTypeAheadOptions, appearanceToStyle, autoSelectRange, clearTreeState, createChildCache, createDemoTree, TreeRoot as default, defaultCanDrop, flattenTree, loadTreeState, resolveAppearance, resolveChildren, resolveDropZone, saveTreeState, splitFileName, useTreeActions, useTreeClipboard, useTreeContext, useTreeDnd, useTreeExpansion, useTreeFinderHotkeys, useTreeFocus, useTreeKeyboard, useTreeLabels, useTreeRename, useTreeRows, useTreeSearch, useTreeSelection, useTreeTypeAhead };
+export { type ChildCache, type ChildEntry, type ChildEntryStatus, DEFAULT_TREE_APPEARANCE, DEFAULT_TREE_LABELS, type DemoNode, FinderTree, FlatRow, type FlattenInput, type PersistedTreeState, type ResolvedAppearance, TREE_DND_MIME, TreeRoot as Tree, type TreeAccentIntensity, type TreeActionsHandle, type TreeActivateOptions, type TreeActivationMode, type TreeAdapter, type TreeAppearance, type TreeBuiltinAction, TreeChevron, type TreeChevronProps, TreeContent, type TreeContentProps, TreeContextMenuActionsResolver, TreeContextMenuItem, TreeContextMenuSlot, type TreeContextValue, type TreeDensity, TreeDropIndicator, type TreeDropIndicatorProps, TreeEmpty, TreeEmptyArea, type TreeEmptyAreaProps, type TreeEmptyProps, TreeError, type TreeErrorProps, TreeIcon, type TreeIconProps, TreeIndentGuides, type TreeIndentGuidesProps, TreeItemId, TreeLabel, type TreeLabelProps, type TreeLabels, type TreeLoadChildren, type TreeMovePosition, TreeNode, TreeProvider, type TreeProviderProps, type TreeRadius, TreeRenameInput, type TreeRenameInputProps, TreeRoot, type TreeRootProps, TreeRow, type TreeRowProps, TreeRowRenderProps, type TreeRowSizing, TreeRowSlot, TreeSearchInput, type TreeSearchInputProps, type TreeSelectionMode, TreeSkeleton, type TreeSkeletonProps, type TreeVariant, type UseTreeFinderHotkeysOptions, type UseTreeKeyboardOptions, type UseTreeTypeAheadOptions, appearanceToStyle, autoSelectRange, clearTreeState, createChildCache, createDemoTree, TreeRoot as default, defaultCanDrop, flattenTree, loadTreeState, resolveAppearance, resolveChildren, resolveDropZone, saveTreeState, splitFileName, useTreeActions, useTreeClipboard, useTreeContext, useTreeDnd, useTreeExpansion, useTreeFinderHotkeys, useTreeFocus, useTreeKeyboard, useTreeLabels, useTreeRename, useTreeRows, useTreeSearch, useTreeSelection, useTreeTypeAhead };

package/dist/tree/index.mjs

@@ -118,6 +118,20 @@ var DENSITY_PRESETS = {
   cozy: { rowHeight: 28, iconSize: 16, fontSize: 13, gap: 8 },
   comfortable: { rowHeight: 32, iconSize: 16, fontSize: 14, gap: 8 }
 };
+var VARIANT_DEFAULTS = {
+  explorer: {
+    hideLeafIcons: false,
+    hideFolderIcons: false,
+    rowSizing: "fixed",
+    showActiveIndicator: true
+  },
+  list: {
+    hideLeafIcons: true,
+    hideFolderIcons: true,
+    rowSizing: "auto",
+    showActiveIndicator: false
+  }
+};
 var DEFAULT_TREE_APPEARANCE = {
   density: "cozy",
   ...DENSITY_PRESETS.cozy,
@@ -126,12 +140,14 @@ var DEFAULT_TREE_APPEARANCE = {
   accent: "default",
   radius: "sm",
   indentGuideOpacity: 0.4,
-  showActiveIndicator: true
+  ...VARIANT_DEFAULTS.explorer
 };
 function resolveAppearance(input, outerIndent) {
   if (!input && outerIndent === void 0) return DEFAULT_TREE_APPEARANCE;
   const density = input?.density ?? "cozy";
   const preset = DENSITY_PRESETS[density];
+  const variant = input?.variant ?? "explorer";
+  const v = VARIANT_DEFAULTS[variant];
   return {
     density,
     rowHeight: input?.rowHeight ?? preset.rowHeight,
@@ -143,7 +159,10 @@ function resolveAppearance(input, outerIndent) {
     accent: input?.accent ?? DEFAULT_TREE_APPEARANCE.accent,
     radius: input?.radius ?? DEFAULT_TREE_APPEARANCE.radius,
     indentGuideOpacity: input?.indentGuideOpacity ?? DEFAULT_TREE_APPEARANCE.indentGuideOpacity,
-    showActiveIndicator: input?.showActiveIndicator ?? DEFAULT_TREE_APPEARANCE.showActiveIndicator
+    showActiveIndicator: input?.showActiveIndicator ?? v.showActiveIndicator,
+    hideLeafIcons: input?.hideLeafIcons ?? v.hideLeafIcons,
+    hideFolderIcons: input?.hideFolderIcons ?? v.hideFolderIcons,
+    rowSizing: input?.rowSizing ?? v.rowSizing
   };
 }
 __name(resolveAppearance, "resolveAppearance");
@@ -1048,10 +1067,15 @@ function useResolvedMenu(opts) {
   ]);
 }
 __name(useResolvedMenu, "useResolvedMenu");
-function renderItemsAsContextMenu(rowProps, items, trigger) {
-  return /* @__PURE__ */ jsxs(ContextMenu, { children: [
+function RowContextMenu({
+  rowProps,
+  items,
+  trigger
+}) {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(ContextMenu, { onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(ContextMenuTrigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx(ContextMenuContent, { children: items.map((item, idx) => {
+    open ? /* @__PURE__ */ jsx(ContextMenuContent, { children: items.map((item, idx) => {
       if (item === "separator") {
         return /* @__PURE__ */ jsx(ContextMenuSeparator, {}, `sep-${idx}`);
       }
@@ -1070,9 +1094,13 @@ function renderItemsAsContextMenu(rowProps, items, trigger) {
         },
         item.id
       );
-    }) })
+    }) }) : null
   ] });
 }
+__name(RowContextMenu, "RowContextMenu");
+function renderItemsAsContextMenu(rowProps, items, trigger) {
+  return /* @__PURE__ */ jsx(RowContextMenu, { rowProps, items, trigger });
+}
 __name(renderItemsAsContextMenu, "renderItemsAsContextMenu");
 function tidyMenuItems(items) {
   const out = [];
@@ -1967,7 +1995,14 @@ function TreeRowRaw({ row, className }) {
       tabIndex: -1,
       style: {
         paddingLeft: 6 + level * appearance.indent,
-        height: "var(--tree-row-height)",
+        // `auto` sizing lets a multi-line label (e.g. title + meta in a
+        // chat-history list) grow the row instead of overflowing a fixed
+        // height. `fixed` keeps the classic single-line explorer row.
+        ...appearance.rowSizing === "auto" ? {
+          minHeight: "var(--tree-row-height)",
+          paddingTop: 4,
+          paddingBottom: 4
+        } : { height: "var(--tree-row-height)" },
         gap: "var(--tree-gap)"
       },
       ...dnd.active ? draggable.listeners : {},
@@ -2018,7 +2053,7 @@ function TreeRowRaw({ row, className }) {
             style: { width: "var(--tree-icon-size)", height: "var(--tree-icon-size)" },
             className: "shrink-0 animate-spin text-muted-foreground/70"
           }
-        ) : renderIcon ? renderIcon(slot) : /* @__PURE__ */ jsx(TreeIcon, { isFolder, isExpanded }),
+        ) : renderIcon ? renderIcon(slot) : (isFolder ? appearance.hideFolderIcons : appearance.hideLeafIcons) ? null : /* @__PURE__ */ jsx(TreeIcon, { isFolder, isExpanded }),
         /* @__PURE__ */ jsx(
           "span",
           {