@djangocfg/ui-tools 2.1.415 → 2.1.417

package/src/tools/media/AudioPlayer/lazy.tsx

@@ -3,31 +3,41 @@
 /**
  * `@djangocfg/ui-tools/audio-player` subpath entrypoint.
  *
- * `LazyPlayer` is exported as a direct (synchronous) alias of `Player`. We
- * intentionally avoid `React.lazy` + `import('./Player')` here: under bundlers
- * that pre-bundle subpath entries (Vite optimizeDeps in Next.js/Vite/SB), the
- * dynamic import creates a second chunk that re-instantiates the React
- * Contexts (AudioRefCtx/ControlsCtx/MetaCtx/StateCtx/LevelsCtx). The slot
- * components and selector hooks re-exported below would then read from a
- * different context instance than `<PlayerProvider>` writes to, which made
- * `usePlayerAudio` throw "must be used inside <PlayerProvider>".
+ * We deliberately keep this surface narrow:
  *
- * Heavy audio-decoding work (peaks, AudioContext) already happens lazily at
- * runtime via effects inside `PlayerProvider`/`PlayerShell` — there is no
- * benefit to splitting the React shell behind a second chunk.
+ *   - `Player` / `LazyPlayer` — the only React component you should
+ *     import. Already wraps `<PlayerProvider>` + `<PlayerShell>`.
+ *   - types
+ *   - `PlayerProvider` + selector hooks — for the rare consumer that
+ *     wants to render a fully custom layout. They must own the
+ *     provider themselves.
+ *   - cross-instance store helpers (active player, preferences).
+ *
+ * Slot components (Cover/Title/Waveform/Controls/Layout) and internal
+ * peak-cache helpers are NOT re-exported from this entrypoint. Earlier
+ * versions did re-export them, which produced a second module-graph
+ * entry into the `context/*` files under Vite's `optimizeDeps`
+ * pre-bundling — the slot files import the same selectors as
+ * `PlayerShell`, but via a different URL key, so `<PlayerProvider>`
+ * (one context instance) and `usePlayerAudio` inside a slot read
+ * (another context instance) ended up on different `createContext()`
+ * objects → "usePlayerAudio must be used inside <PlayerProvider>".
+ *
+ * If you need raw slots, import from a deeper path (e.g.
+ * `@djangocfg/ui-tools/src/tools/media/AudioPlayer/parts/Cover`) and
+ * accept that you must own a single `<PlayerProvider>` boundary.
  */
 
 // ============================================================================
-// Player component (synchronous; previously lazy — see note above)
+// Player component (synchronous; previously lazy)
 // ============================================================================
 
 export { Player, Player as LazyPlayer } from './Player';
 
 // ============================================================================
-// Light surface — types, store, context, slot components, hooks
+// Types
 // ============================================================================
 
-// Types
 export type {
   PlayerProps,
   PlayerState,
@@ -41,7 +51,10 @@ export type {
   PlayerErrorReason,
 } from './types';
 
+// ============================================================================
 // Context provider + selector hooks (no UI)
+// ============================================================================
+
 export {
   PlayerProvider,
   usePlayerAudio,
@@ -53,7 +66,10 @@ export {
   usePlayerState,
 } from './context';
 
+// ============================================================================
 // Cross-instance store (active player, preferences)
+// ============================================================================
+
 export {
   setActivePlayer,
   getActivePlayer,
@@ -66,37 +82,9 @@ export {
   type PlayerPreferences,
 } from './store';
 
-// Store-backed hooks
 export {
   useActivePlayer,
   useLastActivePlayer,
   useIsActivePlayer,
 } from './hooks/useActivePlayer';
 export { usePlayerPreferences } from './hooks/usePlayerPreferences';
-
-// Peak cache helpers
-export { clearPeaksCache, setPeaks } from './audio';
-
-// Slot components — presentational, read from PlayerContext. Safe to
-// re-export synchronously: they don't import the heavy Player tree
-// (audio decoding, layouts, shell) — only context selectors and types.
-export { Cover, CoverPlaceholder, ReactivePulse } from './parts/Cover';
-export { Title, Artist, TimeDisplay } from './parts/Meta';
-export {
-  PlayButton,
-  SkipButton,
-  VolumeControl,
-  LoopButton,
-  ControlsRow,
-  IconButton,
-} from './parts/Controls';
-export {
-  Waveform,
-  PeaksWaveform,
-  LiveWaveform,
-  BarsWaveform,
-  ProgressBar,
-  WaveformSkeleton,
-} from './parts/Waveform';
-export { ErrorState } from './parts/ErrorState';
-export { DefaultLayout, CompactLayout } from './parts/Layout';

package/src/tools/media/AudioPlayer/parts/Controls/IconButton.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
 import {
   Tooltip,
   TooltipContent,
@@ -19,21 +19,20 @@ type Props = {
   noTooltip?: boolean;
 } & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'aria-label'>;
 
-export function IconButton({
-  label,
-  shortcut,
-  active,
-  children,
-  noTooltip,
-  className = '',
-  ...rest
-}: Props) {
+// `forwardRef` is mandatory: this button is used as `<PopoverTrigger asChild>`
+// in VolumeControl. Without ref forwarding, Radix can't anchor the popper to
+// the trigger, and `<PopoverContent>` renders with zero rect (invisible).
+export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButton(
+  { label, shortcut, active, children, noTooltip, className = '', ...rest },
+  ref,
+) {
   // Active state uses a tinted primary surface — readable, on-brand, not loud.
   const stateClasses = active
     ? 'bg-primary/10 text-primary hover:bg-primary/15'
     : 'text-muted-foreground hover:bg-accent hover:text-foreground';
   const button = (
     <button
+      ref={ref}
       type="button"
       aria-label={label}
       aria-pressed={active}
@@ -59,4 +58,4 @@ export function IconButton({
       </TooltipContent>
     </Tooltip>
   );
-}
+});

package/src/tools/media/AudioPlayer/parts/Controls/VolumeControl.tsx

@@ -1,13 +1,11 @@
 'use client';
 
 import { Volume2, VolumeX } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
-import { useMediaQuery } from '@djangocfg/ui-core/hooks';
+import { useEffect, useState } from 'react';
+import { Popover, PopoverContent, PopoverTrigger, Slider } from '@djangocfg/ui-core/components';
 import { usePlayerAudio, usePlayerControls } from '../../context/selectors';
 import { IconButton } from './IconButton';
 
-const CLOSE_DELAY_MS = 120;
-
 // `audio.volume` is read-only on iOS Safari (controlled by hardware buttons),
 // so a JS slider does nothing useful there. Detect once at module load.
 function isIosSafari(): boolean {
@@ -19,16 +17,22 @@ function isIosSafari(): boolean {
 }
 const HIDE_VOLUME = isIosSafari();
 
+/**
+ * Volume control — click-to-open Popover with a vertical `<Slider>`.
+ *
+ * Click on the trigger toggles the popover (not mute). Mute lives as a
+ * dedicated icon button inside the popover. This avoids the classic
+ * Radix `<Tooltip>` + `<Popover>` collision on the same trigger:
+ * hovering opened the tooltip, click toggled the popover — but the
+ * tooltip's pointer-events fought the popover's outside-click logic.
+ * One trigger, one job: open the popover; volume + mute live inside.
+ */
 export function VolumeControl() {
   const audio = usePlayerAudio();
   const { setVolume, toggleMute } = usePlayerControls();
   const [volume, setVol] = useState(audio.volume);
   const [muted, setMuted] = useState(audio.muted);
   const [isOpen, setOpen] = useState(false);
-  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  // Touch devices have no hover — open the popover on click instead.
-  const isTouch = useMediaQuery('(hover: none), (pointer: coarse)');
 
   useEffect(() => {
     const sync = () => {
@@ -39,26 +43,7 @@ export function VolumeControl() {
     return () => audio.removeEventListener('volumechange', sync);
   }, [audio]);
 
-  useEffect(() => {
-    return () => {
-      if (closeTimer.current) clearTimeout(closeTimer.current);
-    };
-  }, []);
-
-  // Close on outside-click in touch mode.
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  useEffect(() => {
-    if (!isOpen || !isTouch) return;
-    const onDown = (e: PointerEvent) => {
-      if (!containerRef.current) return;
-      if (!containerRef.current.contains(e.target as Node)) setOpen(false);
-    };
-    document.addEventListener('pointerdown', onDown);
-    return () => document.removeEventListener('pointerdown', onDown);
-  }, [isOpen, isTouch]);
-
   if (HIDE_VOLUME) {
-    // iOS Safari can't change volume via JS — keep mute toggle only.
     return (
       <IconButton
         label={muted ? 'Unmute' : 'Mute'}
@@ -74,98 +59,50 @@ export function VolumeControl() {
     );
   }
 
-  const cancelClose = () => {
-    if (closeTimer.current) {
-      clearTimeout(closeTimer.current);
-      closeTimer.current = null;
-    }
-  };
-  const scheduleClose = () => {
-    cancelClose();
-    closeTimer.current = setTimeout(() => setOpen(false), CLOSE_DELAY_MS);
-  };
-  const open = () => {
-    cancelClose();
-    setOpen(true);
-  };
-
   const Icon = muted || volume === 0 ? VolumeX : Volume2;
 
-  // Hover bindings only apply on devices with real hover. On touch the popover
-  // is toggled by the icon click.
-  const hoverHandlers = isTouch
-    ? {}
-    : {
-        onPointerEnter: open,
-        onPointerLeave: scheduleClose,
-        onFocusCapture: open,
-        onBlurCapture: (e: React.FocusEvent) => {
-          if (!e.currentTarget.contains(e.relatedTarget as Node | null)) scheduleClose();
-        },
-      };
+  const handleChange = (v: number) => {
+    setVolume(v);
+    setVol(v);
+    if (v > 0) setMuted(false);
+  };
 
   return (
-    <div ref={containerRef} className="relative" {...hoverHandlers}>
-      <IconButton
-        label={isOpen ? 'Close volume' : muted ? 'Unmute' : 'Volume'}
-        shortcut={isTouch ? undefined : 'M'}
-        active={muted}
-        // Inside the popover wrapper — disable IconButton's tooltip when the
-        // popover is open (the popover already shows controls; nesting Radix
-        // tooltip+popover content fights for focus/dismiss).
-        noTooltip={isOpen}
-        onClick={() => {
-          if (isTouch) {
-            setOpen((v) => !v);
-            return;
-          }
-          toggleMute();
-          setMuted(audio.muted);
-        }}
-      >
-        <Icon size={16} strokeWidth={1.75} />
-      </IconButton>
-      {isOpen && (
-        <div
-          className="absolute bottom-full left-1/2 z-20 -translate-x-1/2 pb-2"
-          onPointerEnter={isTouch ? undefined : open}
-          onPointerLeave={isTouch ? undefined : scheduleClose}
+    <Popover open={isOpen} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <IconButton
+          label={isOpen ? 'Close volume' : 'Volume'}
+          // Tooltip while open would race the popover for pointer/focus
+          // — suppress it as soon as the popover opens.
+          noTooltip={isOpen}
+          active={muted}
         >
-          <div className="flex items-center gap-2 rounded-md border border-border/60 bg-card px-3 py-2 shadow-sm">
-            <input
-              type="range"
-              min={0}
-              max={1}
-              step={0.01}
-              value={muted ? 0 : volume}
-              onChange={(e) => {
-                const v = parseFloat(e.target.value);
-                setVolume(v);
-                setVol(v);
-                if (v > 0) setMuted(false);
-              }}
-              className="h-1 w-32 appearance-none rounded-full bg-muted accent-foreground"
-              aria-label="Volume"
-            />
-            <span className="w-8 tabular-nums text-right text-[10px] text-muted-foreground">
-              {Math.round((muted ? 0 : volume) * 100)}
-            </span>
-            {isTouch && (
-              <button
-                type="button"
-                aria-label={muted ? 'Unmute' : 'Mute'}
-                className="audioplayer-press grid h-7 w-7 place-items-center rounded text-muted-foreground hover:bg-accent"
-                onClick={() => {
-                  toggleMute();
-                  setMuted(audio.muted);
-                }}
-              >
-                {muted ? <VolumeX size={14} strokeWidth={1.75} /> : <Volume2 size={14} strokeWidth={1.75} />}
-              </button>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
+          <Icon size={16} strokeWidth={1.75} />
+        </IconButton>
+      </PopoverTrigger>
+      <PopoverContent
+        side="top"
+        align="center"
+        sideOffset={6}
+        className="flex w-14! flex-col items-center gap-2 p-3!"
+        // Keep the focus ring on the trigger; the slider still accepts
+        // keyboard once tabbed into.
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
+        <span className="w-full text-center tabular-nums text-[10px] text-muted-foreground">
+          {Math.round((muted ? 0 : volume) * 100)}
+        </span>
+        <Slider
+          orientation="vertical"
+          min={0}
+          max={1}
+          step={0.01}
+          value={[muted ? 0 : volume]}
+          onValueChange={([v]) => handleChange(v)}
+          aria-label="Volume"
+          className="h-32"
+        />
+      </PopoverContent>
+    </Popover>
   );
 }

package/src/tools/media/AudioPlayer/types.ts

@@ -51,6 +51,18 @@ export type PlayerProps = {
 
   ariaLabel?: string;
   enableKeyboardShortcuts?: boolean;
+  /**
+   * Move keyboard focus into the player container on mount. Activates
+   * the hotkey scope (Space=play/pause, ←→=seek, ↑↓=volume, M=mute)
+   * without the user having to click the player first.
+   *
+   * Useful when the player mounts as the result of an explicit user
+   * action — e.g. a file picker selecting an audio file — so keyboard
+   * control is immediately live.
+   *
+   * @default false
+   */
+  autoFocus?: boolean;
 
   // When the user clicks on the waveform while paused, also start playback.
   // Default true — clicking on a time mark almost always means "play here".
@@ -92,4 +104,7 @@ export type PlayerHandle = {
   seek: (seconds: number) => void;
   getCurrentTime: () => number;
   getDuration: () => number;
+  /** Move keyboard focus to the player container so its hotkey scope
+   *  (Space=play/pause, ←→=seek, ↑↓=volume, M=mute) becomes active. */
+  focus: () => void;
 };

package/dist/types-j2vhn4Kv.d.cts

@@ -1,241 +0,0 @@
-import { CSSProperties, ReactNode } from 'react';
-
-type TreeDensity = 'compact' | 'cozy' | 'comfortable';
-type TreeAccentIntensity = 'subtle' | 'default' | 'strong';
-type TreeRadius = 'none' | 'sm' | 'md';
-/**
- * Cosmetic configuration. Every field is optional; missing values fall
- * back to the `cozy` preset (a comfortable VSCode-Explorer-like density).
- *
- * Customize the look without re-implementing slots.
- */
-interface TreeAppearance {
-    /** Built-in size preset. Default: `'cozy'`. */
-    density?: TreeDensity;
-    /** Override row height in px (wins over density). */
-    rowHeight?: number;
-    /** Override icon + chevron size in px (wins over density). */
-    iconSize?: number;
-    /** Lucide stroke width for icon + chevron. Default: 1.5. */
-    iconStrokeWidth?: number;
-    /** Override label font size in px (wins over density). */
-    fontSize?: number;
-    /** Pixels between chevron / icon / label. Default depends on density. */
-    gap?: number;
-    /** Pixels between nesting levels. Default: 16. */
-    indent?: number;
-    /** Hover / selected highlight intensity. Default: `'default'`. */
-    accent?: TreeAccentIntensity;
-    /** Row corner radius. Default: `'sm'`. */
-    radius?: TreeRadius;
-    /** Indent-guide line opacity (0..1). Default: 0.4. */
-    indentGuideOpacity?: number;
-    /**
-     * Show a 2px primary-tinted bar on the left of the selected row.
-     * Mimics the VSCode active-tab indicator. Default: `true`.
-     */
-    showActiveIndicator?: boolean;
-}
-interface ResolvedAppearance {
-    density: TreeDensity;
-    rowHeight: number;
-    iconSize: number;
-    iconStrokeWidth: number;
-    fontSize: number;
-    gap: number;
-    indent: number;
-    accent: TreeAccentIntensity;
-    radius: TreeRadius;
-    indentGuideOpacity: number;
-    showActiveIndicator: boolean;
-}
-declare const DEFAULT_TREE_APPEARANCE: ResolvedAppearance;
-/**
- * Merge a partial appearance with the default + density preset.
- *
- * Explicit numeric overrides (e.g. `rowHeight`) win over the density preset.
- */
-declare function resolveAppearance(input?: TreeAppearance, 
-/** Outer `indent` prop (kept on TreeRoot for back-compat). */
-outerIndent?: number): ResolvedAppearance;
-/**
- * Build the `style` object that exposes the resolved appearance to any
- * descendant via CSS variables. Set on `<TreeRoot>`'s outer div.
- */
-declare function appearanceToStyle(a: ResolvedAppearance): CSSProperties;
-
-type TreeItemId = string;
-/** A single node in the consumer's tree data. Generic over your payload. */
-interface TreeNode<T = unknown> {
-    id: TreeItemId;
-    data: T;
-    /** Inline children. Omit (and provide a `loadChildren`) for async loading. */
-    children?: TreeNode<T>[];
-    /**
-     * Set to `true` to mark a node as a folder even when its `children` array
-     * is empty (e.g. an unloaded async folder). Default: derived from
-     * `Array.isArray(children)`.
-     */
-    isFolder?: boolean;
-    /** Disable interaction. */
-    disabled?: boolean;
-}
-interface TreeLabels {
-    loading: string;
-    empty: string;
-    error: string;
-    searchPlaceholder: string;
-    searchMatches: (count: number) => string;
-    ariaLabel: string;
-}
-declare const DEFAULT_TREE_LABELS: TreeLabels;
-type TreeSelectionMode = 'none' | 'single' | 'multiple';
-/**
- * How a node becomes "activated" (i.e. opened) on pointer interaction.
- *
- * - `'single-click'` (default): single click activates a leaf immediately;
- *   double-click also activates. Folders always toggle on single click.
- * - `'double-click'`: single click only selects + focuses; double-click is
- *   required to activate. Mirrors classic file-manager behaviour.
- * - `'single-click-preview'`: VSCode Explorer / Cursor behaviour. Single
- *   click activates with `{ preview: true }` (consumer renders a preview
- *   tab); double-click activates with `{ preview: false }` (pinned tab).
- *
- * Folders ignore this setting — they always toggle on single click and
- * never call `onActivate`.
- */
-type TreeActivationMode = 'single-click' | 'double-click' | 'single-click-preview';
-interface TreeActivateOptions {
-    /**
-     * `true` when the activation came from a single click in
-     * `'single-click-preview'` mode. `false` for double-click and for
-     * non-preview modes. Consumers typically map this to a
-     * preview-tab vs pinned-tab distinction.
-     */
-    preview: boolean;
-}
-/**
- * Async loader: called the first time a folder is expanded with no inline
- * `children`. Result is cached; concurrent expansions are de-duplicated.
- */
-type TreeLoadChildren<T> = (node: TreeNode<T>) => Promise<TreeNode<T>[]>;
-interface TreeRowRenderProps<T> {
-    node: TreeNode<T>;
-    level: number;
-    isSelected: boolean;
-    isExpanded: boolean;
-    isFocused: boolean;
-    isFolder: boolean;
-    isLoading: boolean;
-    isMatchingSearch: boolean;
-}
-type TreeRowSlot<T> = (props: TreeRowRenderProps<T>) => ReactNode;
-type TreeContextMenuSlot<T> = (props: TreeRowRenderProps<T>, trigger: ReactNode) => ReactNode;
-/**
- * Declarative context-menu item. Pass `'separator'` (string) in place of an
- * object to insert a `<ContextMenuSeparator />` between groups.
- *
- * For more advanced needs (submenus, checkbox items, custom JSX), drop down
- * to `renderContextMenu` instead.
- */
-interface TreeContextMenuAction<T> {
-    /** Stable React key. */
-    id: string;
-    label: ReactNode;
-    /** Lucide-style icon component. Rendered as `<icon className="size-4" />`. */
-    icon?: React.ComponentType<{
-        className?: string;
-    }>;
-    /** Right-aligned keyboard hint (e.g. `'⌘C'`, `'↵'`). Cosmetic. */
-    shortcut?: ReactNode;
-    /** Disable the item — still rendered, not selectable. */
-    disabled?: boolean;
-    /** Style as destructive (red). */
-    destructive?: boolean;
-    /** Click / Enter handler. Receives the row meta. */
-    onSelect: (props: TreeRowRenderProps<T>) => void;
-}
-type TreeContextMenuItem<T> = TreeContextMenuAction<T> | 'separator';
-type TreeContextMenuActionsResolver<T> = (props: TreeRowRenderProps<T>) => TreeContextMenuItem<T>[] | null | undefined;
-interface TreeRootProps<T> {
-    /** Root nodes. Top-level items are rendered directly (no synthetic root). */
-    data: TreeNode<T>[];
-    /** Returns the human-readable name for a node (used by search/type-ahead). */
-    getItemName: (node: TreeNode<T>) => string;
-    /** Async loader for folders without inline `children`. */
-    loadChildren?: TreeLoadChildren<T>;
-    /** Selection behaviour. Default: `'single'`. */
-    selectionMode?: TreeSelectionMode;
-    /** Pointer activation behaviour. Default: `'single-click'`. */
-    activationMode?: TreeActivationMode;
-    /** Initially expanded ids. */
-    initialExpandedIds?: TreeItemId[];
-    /** Initially selected ids. */
-    initialSelectedIds?: TreeItemId[];
-    /** Pixels of indent per nesting level. Default: 16. (Shortcut for `appearance.indent`.) */
-    indent?: number;
-    /** Cosmetic configuration: density, sizes, accent intensity, radius. */
-    appearance?: TreeAppearance;
-    /** Triggered when selection changes. */
-    onSelectionChange?: (selectedIds: TreeItemId[]) => void;
-    /** Triggered when expanded set changes. */
-    onExpansionChange?: (expandedIds: TreeItemId[]) => void;
-    /**
-     * Triggered when a leaf is activated (Enter / dblclick / click depending
-     * on `activationMode`). Folders never call this — they toggle instead.
-     */
-    onActivate?: (node: TreeNode<T>, opts: TreeActivateOptions) => void;
-    /**
-     * Optional predicate. Nodes returning `false` (and their descendants) are
-     * not rendered and not searchable. Use this to hide dot-files, system
-     * entries, or anything else the consumer wants to filter out.
-     */
-    filterNode?: (node: TreeNode<T>) => boolean;
-    /** Show built-in search input. Default: false. */
-    enableSearch?: boolean;
-    /** Type printable letters to jump to a matching name. Default: true. */
-    enableTypeAhead?: boolean;
-    /** Render vertical indent guides under expanded folders. Default: false. */
-    showIndentGuides?: boolean;
-    /** Custom row renderer. Falls back to the default <TreeRow />. */
-    renderRow?: TreeRowSlot<T>;
-    /** Replace default folder/file icon. */
-    renderIcon?: TreeRowSlot<T>;
-    /** Replace default label rendering. */
-    renderLabel?: TreeRowSlot<T>;
-    /** Right-side actions slot (per row). */
-    renderActions?: TreeRowSlot<T>;
-    /** Wrap each row in a context menu (right-click). Receives the row meta + trigger element. */
-    renderContextMenu?: TreeContextMenuSlot<T>;
-    /**
-     * Declarative right-click menu — short-form. Pass `(row) => [items]` and the
-     * Tree builds a `<ContextMenu>` for you with sensible defaults. Ignored if
-     * `renderContextMenu` is also set. Return `null`/`undefined`/`[]` to skip
-     * the menu for that row.
-     */
-    contextMenuActions?: TreeContextMenuActionsResolver<T>;
-    /** Override built-in copy in your locale. */
-    labels?: Partial<TreeLabels>;
-    /** Persist expanded + (optional) selected ids in localStorage under this key. */
-    persistKey?: string;
-    /** Persist selection alongside expansion. Default: false. */
-    persistSelection?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-}
-/** Internal flat-row representation used by the renderer + keyboard nav. */
-interface FlatRow<T> {
-    node: TreeNode<T>;
-    level: number;
-    parentId: TreeItemId | null;
-    isFolder: boolean;
-    isExpanded: boolean;
-    isLoading: boolean;
-    hasError: boolean;
-    /** 1-based position among visible siblings (for `aria-posinset`). */
-    posInSet: number;
-    /** Count of visible siblings sharing this row's parent (for `aria-setsize`). */
-    setSize: number;
-}
-
-export { DEFAULT_TREE_APPEARANCE as D, type FlatRow as F, type ResolvedAppearance as R, type TreeRootProps as T, type TreeItemId as a, type TreeNode as b, type TreeActivateOptions as c, type TreeLabels as d, type TreeSelectionMode as e, type TreeActivationMode as f, type TreeRowSlot as g, type TreeContextMenuSlot as h, appearanceToStyle as i, type TreeAppearance as j, type TreeDensity as k, type TreeAccentIntensity as l, type TreeRadius as m, DEFAULT_TREE_LABELS as n, type TreeRowRenderProps as o, type TreeContextMenuAction as p, type TreeContextMenuItem as q, resolveAppearance as r, type TreeContextMenuActionsResolver as s, type TreeLoadChildren as t };