@djangocfg/widget-data 0.1.1

package/src/Tree/data/appearance.ts

@@ -0,0 +1,237 @@
+'use client';
+
+import type { CSSProperties } from 'react';
+
+export type TreeDensity = 'compact' | 'cozy' | 'comfortable';
+export type TreeAccentIntensity = 'subtle' | 'default' | 'strong';
+export 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).
+ */
+export type TreeVariant = 'explorer' | 'list';
+
+export type TreeRowSizing = 'fixed' | 'auto';
+
+/**
+ * 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.
+ */
+export 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;
+  /**
+   * 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;
+}
+
+export interface ResolvedAppearance {
+  density: TreeDensity;
+  rowHeight: number;
+  iconSize: number;
+  iconStrokeWidth: number;
+  fontSize: number;
+  gap: number;
+  indent: number;
+  accent: TreeAccentIntensity;
+  radius: TreeRadius;
+  indentGuideOpacity: number;
+  showActiveIndicator: boolean;
+  hideLeafIcons: boolean;
+  hideFolderIcons: boolean;
+  rowSizing: TreeRowSizing;
+}
+
+const DENSITY_PRESETS: Record<
+  TreeDensity,
+  Pick<ResolvedAppearance, 'rowHeight' | 'iconSize' | 'fontSize' | 'gap'>
+> = {
+  compact: { rowHeight: 24, iconSize: 14, fontSize: 13, gap: 6 },
+  cozy: { rowHeight: 28, iconSize: 16, fontSize: 13, gap: 8 },
+  comfortable: { rowHeight: 32, iconSize: 16, fontSize: 14, gap: 8 },
+};
+
+/**
+ * Per-variant defaults for the icon / sizing / indicator fields. The
+ * `'list'` variant is the macOS-sidebar / chat-history look.
+ */
+const VARIANT_DEFAULTS: Record<
+  TreeVariant,
+  Pick<
+    ResolvedAppearance,
+    'hideLeafIcons' | 'hideFolderIcons' | 'rowSizing' | 'showActiveIndicator'
+  >
+> = {
+  explorer: {
+    hideLeafIcons: false,
+    hideFolderIcons: false,
+    rowSizing: 'fixed',
+    showActiveIndicator: true,
+  },
+  list: {
+    hideLeafIcons: true,
+    hideFolderIcons: true,
+    rowSizing: 'auto',
+    showActiveIndicator: false,
+  },
+};
+
+export const DEFAULT_TREE_APPEARANCE: ResolvedAppearance = {
+  density: 'cozy',
+  ...DENSITY_PRESETS.cozy,
+  iconStrokeWidth: 1.5,
+  indent: 16,
+  accent: 'default',
+  radius: 'sm',
+  indentGuideOpacity: 0.4,
+  ...VARIANT_DEFAULTS.explorer,
+};
+
+/**
+ * Merge a partial appearance with the default + density preset.
+ *
+ * Explicit numeric overrides (e.g. `rowHeight`) win over the density preset.
+ */
+export function resolveAppearance(
+  input?: TreeAppearance,
+  /** Outer `indent` prop (kept on TreeRoot for back-compat). */
+  outerIndent?: number,
+): ResolvedAppearance {
+  if (!input && outerIndent === undefined) return DEFAULT_TREE_APPEARANCE;
+
+  const density: TreeDensity = input?.density ?? 'cozy';
+  const preset = DENSITY_PRESETS[density];
+  // Variant sets the icon/sizing/indicator defaults; explicit fields win.
+  const variant: TreeVariant = input?.variant ?? 'explorer';
+  const v = VARIANT_DEFAULTS[variant];
+
+  return {
+    density,
+    rowHeight: input?.rowHeight ?? preset.rowHeight,
+    iconSize: input?.iconSize ?? preset.iconSize,
+    iconStrokeWidth: input?.iconStrokeWidth ?? DEFAULT_TREE_APPEARANCE.iconStrokeWidth,
+    fontSize: input?.fontSize ?? preset.fontSize,
+    gap: input?.gap ?? preset.gap,
+    indent: input?.indent ?? outerIndent ?? DEFAULT_TREE_APPEARANCE.indent,
+    accent: input?.accent ?? DEFAULT_TREE_APPEARANCE.accent,
+    radius: input?.radius ?? DEFAULT_TREE_APPEARANCE.radius,
+    indentGuideOpacity:
+      input?.indentGuideOpacity ?? DEFAULT_TREE_APPEARANCE.indentGuideOpacity,
+    showActiveIndicator: input?.showActiveIndicator ?? v.showActiveIndicator,
+    hideLeafIcons: input?.hideLeafIcons ?? v.hideLeafIcons,
+    hideFolderIcons: input?.hideFolderIcons ?? v.hideFolderIcons,
+    rowSizing: input?.rowSizing ?? v.rowSizing,
+  };
+}
+
+/**
+ * Build the `style` object that exposes the resolved appearance to any
+ * descendant via CSS variables. Set on `<TreeRoot>`'s outer div.
+ */
+export function appearanceToStyle(a: ResolvedAppearance): CSSProperties {
+  return {
+    ['--tree-row-height' as string]: `${a.rowHeight}px`,
+    ['--tree-icon-size' as string]: `${a.iconSize}px`,
+    ['--tree-icon-stroke' as string]: a.iconStrokeWidth,
+    ['--tree-font-size' as string]: `${a.fontSize}px`,
+    ['--tree-gap' as string]: `${a.gap}px`,
+    ['--tree-indent' as string]: `${a.indent}px`,
+    ['--tree-guide-opacity' as string]: a.indentGuideOpacity,
+  };
+}
+
+const RADIUS_CLASS: Record<TreeRadius, string> = {
+  none: 'rounded-none',
+  sm: 'rounded-sm',
+  md: 'rounded-md',
+};
+export function radiusClass(a: ResolvedAppearance) {
+  return RADIUS_CLASS[a.radius];
+}
+
+/**
+ * VSCode-style row state classes.
+ *
+ *  - hover: subtle neutral wash
+ *  - focused (keyboard nav, not yet selected): slightly stronger neutral
+ *  - selected (tree NOT focused): muted neutral block
+ *  - selected + tree focused-within: primary-tinted block + colored text
+ *
+ * Intensity scales with `appearance.accent`.
+ */
+const HOVER: Record<TreeAccentIntensity, string> = {
+  subtle: 'hover:bg-foreground/[.03]',
+  default: 'hover:bg-foreground/[.06]',
+  strong: 'hover:bg-foreground/[.09]',
+};
+const FOCUSED_NOT_SELECTED: Record<TreeAccentIntensity, string> = {
+  subtle: 'data-[focused=true]:bg-foreground/[.05]',
+  default: 'data-[focused=true]:bg-foreground/[.08]',
+  strong: 'data-[focused=true]:bg-foreground/[.12]',
+};
+const SELECTED_INACTIVE: Record<TreeAccentIntensity, string> = {
+  subtle: 'data-[selected=true]:bg-foreground/[.06]',
+  default: 'data-[selected=true]:bg-foreground/[.10]',
+  strong: 'data-[selected=true]:bg-foreground/[.14]',
+};
+const SELECTED_ACTIVE: Record<TreeAccentIntensity, string> = {
+  subtle:
+    'data-[selected=true]:group-focus-within/tree:bg-primary/10 data-[selected=true]:group-focus-within/tree:text-primary',
+  default:
+    'data-[selected=true]:group-focus-within/tree:bg-primary/15 data-[selected=true]:group-focus-within/tree:text-primary',
+  strong:
+    'data-[selected=true]:group-focus-within/tree:bg-primary/25 data-[selected=true]:group-focus-within/tree:text-primary',
+};
+
+export function rowStateClasses(a: ResolvedAppearance) {
+  return [
+    HOVER[a.accent],
+    FOCUSED_NOT_SELECTED[a.accent],
+    SELECTED_INACTIVE[a.accent],
+    SELECTED_ACTIVE[a.accent],
+  ].join(' ');
+}

package/src/Tree/data/childCache.ts

@@ -0,0 +1,43 @@
+'use client';
+
+import type { TreeItemId, TreeNode } from '../types';
+
+export type ChildEntryStatus = 'idle' | 'loading' | 'loaded' | 'error';
+
+export interface ChildEntry<T> {
+  status: ChildEntryStatus;
+  children: TreeNode<T>[];
+  error?: string;
+}
+
+export type ChildCache<T> = Map<TreeItemId, ChildEntry<T>>;
+
+export const createChildCache = <T>(): ChildCache<T> => new Map();
+
+export const getEntry = <T>(
+  cache: ChildCache<T>,
+  id: TreeItemId,
+): ChildEntry<T> | undefined => cache.get(id);
+
+/**
+ * Resolve a node's children for the current render.
+ *
+ * - If the node carries inline `children`, those win (no async fetch).
+ * - Otherwise we look in the cache.
+ *
+ * Returns `null` when nothing is loaded yet (caller may show a skeleton).
+ */
+export const resolveChildren = <T>(
+  cache: ChildCache<T>,
+  node: TreeNode<T>,
+): { children: TreeNode<T>[] | null; status: ChildEntryStatus; error?: string } => {
+  if (Array.isArray(node.children)) {
+    return { children: node.children, status: 'loaded' };
+  }
+  const entry = cache.get(node.id);
+  if (!entry) return { children: null, status: 'idle' };
+  if (entry.status === 'loaded') {
+    return { children: entry.children, status: 'loaded' };
+  }
+  return { children: null, status: entry.status, error: entry.error };
+};

package/src/Tree/data/clipboard.ts

@@ -0,0 +1,33 @@
+'use client';
+
+import type { TreeItemId } from '../types';
+
+// =====================================================================
+// Tree-local clipboard.
+//
+// Why not the system clipboard? Because we need a visual "cut" state
+// (Finder/Explorer dim cut items) and a single source of truth across
+// Tree's own keyboard / menu / DnD entry points. The system clipboard
+// can't carry that semantics in a way that survives focus changes.
+//
+// Clipboard owns *ids*, not full nodes — Tree resolves them through
+// `getNodeById` at paste time. This keeps the model immutable to the
+// underlying data refreshing under us (async load, refresh, etc.).
+// =====================================================================
+
+export type ClipboardKind = 'cut' | 'copy';
+
+export interface ClipboardEntry {
+  kind: ClipboardKind;
+  ids: TreeItemId[];
+}
+
+export type ClipboardState = ClipboardEntry | null;
+
+/**
+ * Was this id put on the clipboard with `kind: 'cut'`? Used by `TreeRow`
+ * to render dimmed (`opacity-60`) rows the way Finder does.
+ */
+export function isCutId(state: ClipboardState, id: TreeItemId): boolean {
+  return state?.kind === 'cut' && state.ids.includes(id);
+}

package/src/Tree/data/createDemoTree.ts

@@ -0,0 +1,42 @@
+'use client';
+
+import type { TreeNode } from '../types';
+
+export interface DemoNode {
+  name: string;
+}
+
+/**
+ * Build a deterministic synthetic tree for stories and tests.
+ *
+ * @example
+ *   const data = createDemoTree({ depth: 4, breadth: 3 });
+ *   <TreeRoot data={data} getItemName={(n) => n.data.name} />
+ */
+export function createDemoTree({
+  depth = 3,
+  breadth = 4,
+  rootPrefix = 'node',
+}: {
+  depth?: number;
+  breadth?: number;
+  rootPrefix?: string;
+} = {}): TreeNode<DemoNode>[] {
+  const make = (id: string, name: string, level: number): TreeNode<DemoNode> => {
+    if (level >= depth) {
+      return { id, data: { name } };
+    }
+    const children: TreeNode<DemoNode>[] = [];
+    for (let i = 0; i < breadth; i++) {
+      const childId = `${id}/${i}`;
+      children.push(make(childId, `${name}-${i}`, level + 1));
+    }
+    return { id, data: { name }, children };
+  };
+
+  const roots: TreeNode<DemoNode>[] = [];
+  for (let i = 0; i < breadth; i++) {
+    roots.push(make(`${rootPrefix}-${i}`, `${rootPrefix} ${i}`, 1));
+  }
+  return roots;
+}

package/src/Tree/data/dnd.ts

@@ -0,0 +1,123 @@
+'use client';
+
+import type { FlatRow, TreeItemId, TreeMovePosition, TreeNode } from '../types';
+
+// =====================================================================
+// Drag-and-drop primitives — pure, framework-agnostic.
+//
+// @dnd-kit handles the pointer/keyboard sensors and overlay rendering;
+// these helpers only translate pointer geometry into a domain-level
+// drop position (`before` / `inside` / `after`) and validate whether
+// a given drag/drop combo is allowed.
+//
+// Folder vs leaf semantics:
+//   - leaves        → no `inside` zone; row splits into top/bottom halves
+//                     for `before` / `after` reorder
+//   - folders       → top third = `before`, middle third = `inside`,
+//                     bottom third = `after`
+// =====================================================================
+
+export interface DropZoneInput {
+  /** Pointer Y in viewport coordinates. */
+  pointerY: number;
+  /** Row bounding box (`getBoundingClientRect()`). */
+  rowRect: { top: number; bottom: number; height: number };
+  /** Folders accept `inside` drops; leaves only reorder via before/after. */
+  isFolder: boolean;
+}
+
+/**
+ * Translate pointer geometry into a drop position relative to the row.
+ *
+ * For folders the row is split into three zones (top third / middle /
+ * bottom third). For leaves it's split in half (before / after).
+ */
+export function resolveDropZone(input: DropZoneInput): TreeMovePosition {
+  const { pointerY, rowRect, isFolder } = input;
+  const offset = pointerY - rowRect.top;
+  const ratio = rowRect.height > 0 ? offset / rowRect.height : 0.5;
+
+  if (isFolder) {
+    if (ratio < 0.33) return 'before';
+    if (ratio > 0.66) return 'after';
+    return 'inside';
+  }
+  return ratio < 0.5 ? 'before' : 'after';
+}
+
+// =====================================================================
+// canDrop — default validator.
+//
+// Rejects:
+//   1. Dropping a node onto itself.
+//   2. Dropping a folder into one of its own descendants (would create
+//      a cycle).
+//   3. Dropping `inside` a non-folder (defensive — UI already routes
+//      these as `before`/`after`, but the API can be called directly).
+//
+// Consumers can pass their own `canDrop` via `<TreeRoot canDrop={…}>`
+// to layer extra rules on top (e.g. read-only branches, type matching).
+// =====================================================================
+
+export interface CanDropInput<T> {
+  /** Nodes being dragged. */
+  source: TreeNode<T>[];
+  /** Row under the pointer (`null` = root drop zone). */
+  target: TreeNode<T> | null;
+  /** Resolved drop position. */
+  position: TreeMovePosition;
+  /** Tree's id→node lookup, used to walk descendants. */
+  getNodeById: (id: TreeItemId) => TreeNode<T> | undefined;
+}
+
+export function defaultCanDrop<T>(input: CanDropInput<T>): boolean {
+  const { source, target, position } = input;
+  if (source.length === 0) return false;
+  if (!target) return true; // root drop is always allowed when no other rule rejects.
+
+  // Inside a leaf doesn't make sense.
+  if (position === 'inside') {
+    const isFolder = Array.isArray(target.children) || !!target.isFolder;
+    if (!isFolder) return false;
+  }
+
+  for (const node of source) {
+    if (node.id === target.id) return false;
+    if (isDescendant(node, target.id)) return false;
+  }
+  return true;
+}
+
+/**
+ * Walk `root`'s inline children searching for `id`. Cached async children
+ * are *not* walked here because the cycle check needs to be cheap and
+ * deterministic — a missing cycle in unloaded branches is acceptable
+ * (the consumer's `adapter.move` is the final gatekeeper).
+ */
+function isDescendant<T>(root: TreeNode<T>, id: TreeItemId): boolean {
+  if (!Array.isArray(root.children)) return false;
+  for (const child of root.children) {
+    if (child.id === id) return true;
+    if (isDescendant(child, id)) return true;
+  }
+  return false;
+}
+
+// =====================================================================
+// DataTransfer mime — used both for in-tree drags and (later) for
+// receiving dragged files from the OS. The id payload is the JSON-
+// encoded list of `TreeItemId`s.
+// =====================================================================
+
+export const TREE_DND_MIME = 'application/x-djangocfg-tree';
+
+/**
+ * Sentinel droppable id used by `<TreeEmptyArea>` to claim the
+ * "root drop target" slot. `<TreeDndProvider>` recognises this id and
+ * maps it to `{ id: null, position: 'inside' }` in `dnd.dropTarget`.
+ *
+ * Lives in `data/` (not in the component) so both producer and
+ * consumer reference one constant instead of duplicating the magic
+ * string.
+ */
+export const TREE_ROOT_DROP_ID = '__tree_root_drop__';

package/src/Tree/data/finderShortcuts.ts

@@ -0,0 +1,67 @@
+'use client';
+
+import type { TreeBuiltinAction } from '../types';
+
+// =====================================================================
+// Finder / Explorer keyboard shortcuts.
+//
+// Each entry maps a built-in action to a list of `react-hotkeys-hook`
+// combos. `mod` resolves to ⌘ on macOS and Ctrl on Win/Linux automatically,
+// so a single declaration works cross-platform.
+//
+// Tree only binds shortcuts whose corresponding adapter method is
+// defined. So `delete` only fires if `adapter.remove` exists — same
+// gating used for context-menu items, no duplicated source of truth.
+// =====================================================================
+
+export interface FinderShortcut {
+  /** Built-in action id this shortcut runs. */
+  action: TreeBuiltinAction;
+  /** `react-hotkeys-hook` key combos. */
+  keys: string[];
+  /** Cheat-sheet description (registered via `useHotkey`). */
+  description: string;
+}
+
+export const FINDER_SHORTCUTS: FinderShortcut[] = [
+  {
+    action: 'delete',
+    keys: ['mod+backspace', 'delete'],
+    description: 'Delete selected items',
+  },
+  {
+    action: 'rename',
+    keys: ['f2'],
+    description: 'Rename selected item',
+  },
+  {
+    action: 'duplicate',
+    keys: ['mod+d'],
+    description: 'Duplicate selected items',
+  },
+  {
+    action: 'new-folder',
+    keys: ['mod+shift+n'],
+    description: 'New folder',
+  },
+  {
+    action: 'new-file',
+    keys: ['mod+n'],
+    description: 'New file',
+  },
+  {
+    action: 'cut',
+    keys: ['mod+x'],
+    description: 'Cut',
+  },
+  {
+    action: 'copy',
+    keys: ['mod+c'],
+    description: 'Copy',
+  },
+  {
+    action: 'paste',
+    keys: ['mod+v'],
+    description: 'Paste',
+  },
+];

package/src/Tree/data/flatten.ts

@@ -0,0 +1,66 @@
+'use client';
+
+import type { FlatRow, TreeItemId, TreeNode } from '../types';
+import { resolveChildren, type ChildCache } from './childCache';
+
+export interface FlattenInput<T> {
+  roots: TreeNode<T>[];
+  expandedIds: ReadonlySet<TreeItemId>;
+  cache: ChildCache<T>;
+  /** Optional predicate. Nodes returning `false` (and their descendants) are excluded. */
+  filterNode?: (node: TreeNode<T>) => boolean;
+}
+
+const isNodeFolder = <T>(node: TreeNode<T>): boolean => {
+  if (typeof node.isFolder === 'boolean') return node.isFolder;
+  return Array.isArray(node.children);
+};
+
+/**
+ * Walk the tree top-to-bottom and produce a flat list of visible rows.
+ *
+ * Visibility rule: a child row appears only when every ancestor is in
+ * `expandedIds`. The output is ordered exactly as it should render,
+ * which keeps keyboard navigation (next/prev row) trivial.
+ */
+export function flattenTree<T>({
+  roots,
+  expandedIds,
+  cache,
+  filterNode,
+}: FlattenInput<T>): FlatRow<T>[] {
+  const out: FlatRow<T>[] = [];
+
+  const walk = (nodes: TreeNode<T>[], level: number, parentId: TreeItemId | null) => {
+    // Visible siblings only — `aria-setsize`/`posinset` must ignore filtered nodes.
+    const visible = filterNode ? nodes.filter(filterNode) : nodes;
+    const setSize = visible.length;
+
+    visible.forEach((node, index) => {
+      const isFolder = isNodeFolder(node);
+      const isExpanded = expandedIds.has(node.id);
+      const resolved = isFolder
+        ? resolveChildren(cache, node)
+        : { children: [], status: 'loaded' as const };
+
+      out.push({
+        node,
+        level,
+        parentId,
+        isFolder,
+        isExpanded,
+        isLoading: resolved.status === 'loading',
+        hasError: resolved.status === 'error',
+        posInSet: index + 1,
+        setSize,
+      });
+
+      if (isFolder && isExpanded && resolved.children) {
+        walk(resolved.children, level + 1, node.id);
+      }
+    });
+  };
+
+  walk(roots, 0, null);
+  return out;
+}

package/src/Tree/data/index.ts

@@ -0,0 +1,45 @@
+'use client';
+
+export { createChildCache, getEntry, resolveChildren } from './childCache';
+export type { ChildCache, ChildEntry, ChildEntryStatus } from './childCache';
+export { flattenTree } from './flatten';
+export type { FlattenInput } from './flatten';
+export { loadTreeState, saveTreeState, clearTreeState } from './persist';
+export type { PersistedTreeState } from './persist';
+export { createDemoTree } from './createDemoTree';
+export type { DemoNode } from './createDemoTree';
+export {
+  computeRange,
+  selectionFromClick,
+  selectionFromMove,
+  selectionSelectAll,
+  selectionClear,
+} from './selection';
+export type { SelectionState, ClickModifiers } from './selection';
+export { splitFileName, autoSelectRange } from './renameUtils';
+export type { SplitName } from './renameUtils';
+export { isCutId } from './clipboard';
+export type { ClipboardKind, ClipboardEntry, ClipboardState } from './clipboard';
+export {
+  resolveDropZone,
+  defaultCanDrop,
+  TREE_DND_MIME,
+  TREE_ROOT_DROP_ID,
+} from './dnd';
+export type { DropZoneInput, CanDropInput } from './dnd';
+export {
+  DEFAULT_TREE_APPEARANCE,
+  resolveAppearance,
+  appearanceToStyle,
+  radiusClass,
+  rowStateClasses,
+} from './appearance';
+export type {
+  TreeAppearance,
+  ResolvedAppearance,
+  TreeDensity,
+  TreeAccentIntensity,
+  TreeRadius,
+  TreeVariant,
+  TreeRowSizing,
+} from './appearance';