@spaethtech/svelte-ui 0.21.1-dev.129.7debcd5 → 0.21.1-dev.131.6298c61

package/dist/components/ContextMenu/ContextMenu.svelte

@@ -23,7 +23,10 @@
     children,
     ...rest
   }: {
-    items: MenuItem[];
+    /** The menu items — a static list, OR a function of the triggering event so one wrapper can build
+     *  the menu from whatever was right-clicked (read `event.target`, a row's `data-key`, …) without
+     *  the consumer tracking target state during the bubble. Return `[]` to suppress the menu. */
+    items: MenuItem[] | ((event: MouseEvent) => MenuItem[]);
     size?: Responsive<Size>;
     variant?: Variant;
     disabled?: boolean;
@@ -35,10 +38,14 @@
   let anchorEl = $state<HTMLElement>();
   let x = $state(0);
   let y = $state(0);
+  // The items shown for the current open — a snapshot (for the function form, computed from the event).
+  let resolvedItems = $state<MenuItem[]>([]);
 
   function onContextMenu(e: MouseEvent) {
     if (disabled) return;
     e.preventDefault();
+    resolvedItems = typeof items === "function" ? items(e) : items;
+    if (!resolvedItems?.length) return; // nothing to show → don't open (and let no empty menu flash)
     x = e.clientX;
     y = e.clientY;
     open = true;
@@ -57,4 +64,4 @@
   style="position: fixed; left: {x}px; top: {y}px; width: 0; height: 0; pointer-events: none;"
 ></span>
 
-<Menu anchor={anchorEl} bind:open {items} {size} {variant} side="bottom" align="start" />
+<Menu anchor={anchorEl} bind:open items={resolvedItems} {size} {variant} side="bottom" align="start" />

package/dist/components/ContextMenu/ContextMenu.svelte.d.ts

@@ -5,7 +5,10 @@ import type { Variant } from "../../types/variants.js";
 import type { Size } from "../../types/sizes.js";
 import type { Responsive } from "../../types/responsive.js";
 type $$ComponentProps = {
-    items: MenuItem[];
+    /** The menu items — a static list, OR a function of the triggering event so one wrapper can build
+     *  the menu from whatever was right-clicked (read `event.target`, a row's `data-key`, …) without
+     *  the consumer tracking target state during the bubble. Return `[]` to suppress the menu. */
+    items: MenuItem[] | ((event: MouseEvent) => MenuItem[]);
     size?: Responsive<Size>;
     variant?: Variant;
     disabled?: boolean;

package/dist/components/FileList/FileList.svelte

@@ -0,0 +1,354 @@
+<!--
+/**
+ * FileList — the details pane of a file explorer: Name · Date modified · Type · Size, folders first,
+ * sortable by any column. Click selects (Ctrl/⌘ adds, Shift extends), double-click or Enter opens,
+ * right-click reports what's under the pointer (the event bubbles on, so a wrapping svelte-ui
+ * `ContextMenu` opens), and desktop files dragged in are handed to `ondropfiles` (onto a folder row →
+ * that folder). Keys: Delete, F2 (rename in place), Backspace (up), Ctrl+A, arrows.
+ *
+ * Consumer-driven: the PARENT owns the data and every action (via callbacks); this component owns only
+ * selection, sort, the in-place rename field, and the drop highlight. Unlike `DataTable` this is shaped
+ * like an OS explorer (fixed explorer columns that collapse by container width), not a generic grid.
+ * See FileList.spec.md.
+ */
+-->
+<script lang="ts" module>
+  export type { ExplorerEntry, FileListColumn } from "./types.js";
+  export { formatSize } from "./types.js";
+</script>
+
+<script lang="ts">
+  import { untrack } from "svelte";
+  import Badge from "../Badge/Badge.svelte";
+  import Input from "../Input.svelte";
+  import { uiI18n } from "../../i18n.js";
+  import { variantToken, type Variant } from "../../types/variants.js";
+  import IconFolder from "~icons/mdi/folder";
+  import IconFile from "~icons/mdi/file-outline";
+  import IconDrive from "~icons/mdi/harddisk";
+  import IconUp from "~icons/mdi/menu-up";
+  import IconDown from "~icons/mdi/menu-down";
+  import { formatSize, type ExplorerEntry, type FileListColumn } from "./types.js";
+
+  const i18n = uiI18n();
+
+  let {
+    entries,
+    loading = false,
+    error = null,
+    selected = $bindable(new Set<string>()),
+    editing = $bindable<string | null>(null),
+    sortCol = $bindable<FileListColumn>("name"),
+    sortDir = $bindable<1 | -1>(1),
+    emptyText,
+    canDrop = true,
+    variant = "primary",
+    formatDate,
+    class: cls = "",
+    onopen,
+    oncontextmenu,
+    ondropfiles,
+    ondelete,
+    onrename,
+    oncommitname,
+    onup,
+    onsort,
+  }: {
+    entries: ExplorerEntry[];
+    loading?: boolean;
+    error?: string | null;
+    /** Selected keys (bindable). */
+    selected?: Set<string>;
+    /** The entry being renamed in place (bindable), or null. */
+    editing?: string | null;
+    /** Active sort column / direction (bindable; `onsort` also fires on change). */
+    sortCol?: FileListColumn;
+    sortDir?: 1 | -1;
+    /** Empty-state text. Default: localized "This folder is empty." */
+    emptyText?: string;
+    canDrop?: boolean;
+    /** Selection accent (shared axis). Default `primary`. */
+    variant?: Variant;
+    /** Override the Date column formatting. Default: `Intl.DateTimeFormat(i18n.locale)` medium+short. */
+    formatDate?: (modified: string) => string;
+    class?: string;
+    onopen: (e: ExplorerEntry) => void;
+    /** Right-click: `entry` is the row under the pointer, or null on empty space. Not prevented — a
+     *  wrapping `ContextMenu` still opens. */
+    oncontextmenu?: (ev: MouseEvent, entry: ExplorerEntry | null) => void;
+    ondropfiles?: (files: File[], into: ExplorerEntry | null) => void;
+    ondelete?: (entries: ExplorerEntry[]) => void;
+    onrename?: (entry: ExplorerEntry) => void;
+    /** An in-place rename ended — `name` null = cancelled/unchanged. */
+    oncommitname?: (entry: ExplorerEntry, name: string | null) => void;
+    onup?: () => void;
+    /** Fired when the sort column/direction changes (e.g. to persist or sort server-side). */
+    onsort?: (col: FileListColumn, dir: 1 | -1) => void;
+  } = $props();
+
+  const token = $derived(variantToken[variant]);
+  const empty = $derived(emptyText ?? i18n.messages.emptyFolder);
+
+  const defaultFormatDate = (iso: string) =>
+    new Intl.DateTimeFormat(i18n.locale, {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    }).format(new Date(iso));
+  const fmtDate = (iso: string) => (formatDate ? formatDate(iso) : defaultFormatDate(iso));
+
+  /** "File folder", "PDF file", "Local disk" — the Type column (localized). */
+  function typeLabel(e: ExplorerEntry): string {
+    if (e.kind === "drive") return i18n.messages.localDisk;
+    if (e.kind === "folder") return i18n.messages.fileFolder;
+    const dot = e.name.lastIndexOf(".");
+    return dot > 0
+      ? i18n.messages.fileOfType({ ext: e.name.slice(dot + 1).toUpperCase() })
+      : i18n.messages.genericFile;
+  }
+
+  let draft = $state("");
+  // field starts from the current name — only when editing starts, not on every live listing
+  $effect(() => {
+    const k = editing;
+    if (k) untrack(() => (draft = entries.find((e) => e.key === k)?.name ?? ""));
+  });
+  function finish(e: ExplorerEntry, commit: boolean) {
+    if (editing !== e.key) return;
+    editing = null;
+    const name = draft.trim();
+    oncommitname?.(e, commit && name && name !== e.name ? name : null);
+  }
+  /** Focus the field and select the name without its extension, as a desktop explorer does. */
+  function editField(node: HTMLElement, e: ExplorerEntry) {
+    const input = node.querySelector("input");
+    if (input) {
+      input.focus();
+      const dot = e.kind === "file" ? e.name.lastIndexOf(".") : -1;
+      input.setSelectionRange(0, dot > 0 ? dot : e.name.length);
+    }
+  }
+
+  let anchor = $state<string | null>(null);
+  let dropOn = $state<string | null>(null); // a folder key, or "" for the pane
+
+  const rank = (e: ExplorerEntry) => (e.kind === "file" ? 1 : 0);
+  const sorted = $derived(
+    [...entries].sort((a, b) => {
+      if (rank(a) !== rank(b)) return rank(a) - rank(b);
+      let c = 0;
+      if (sortCol === "size") c = (a.size ?? -1) - (b.size ?? -1);
+      else if (sortCol === "modified")
+        c = String(a.modified ?? "").localeCompare(String(b.modified ?? ""));
+      else if (sortCol === "type") c = typeLabel(a).localeCompare(typeLabel(b));
+      if (c === 0)
+        c = a.name.localeCompare(b.name, i18n.locale, { numeric: true, sensitivity: "base" });
+      return c * sortDir;
+    }),
+  );
+  const picked = $derived(sorted.filter((e) => selected.has(e.key)));
+
+  function sortBy(c: FileListColumn) {
+    if (sortCol === c) sortDir = sortDir === 1 ? -1 : 1;
+    else {
+      sortCol = c;
+      sortDir = 1;
+    }
+    onsort?.(sortCol, sortDir);
+  }
+
+  function click(ev: MouseEvent, e: ExplorerEntry) {
+    if (ev.shiftKey && anchor) {
+      const keys = sorted.map((x) => x.key);
+      const [a, b] = [keys.indexOf(anchor), keys.indexOf(e.key)].sort((x, y) => x - y);
+      selected = new Set(keys.slice(a, b + 1));
+      return;
+    }
+    if (ev.ctrlKey || ev.metaKey) {
+      const s = new Set(selected);
+      if (s.has(e.key)) s.delete(e.key);
+      else s.add(e.key);
+      selected = s;
+    } else selected = new Set([e.key]);
+    anchor = e.key;
+  }
+  // A right-click bubbles on (so a wrapping ContextMenu opens where the pointer is); the row's handler
+  // runs first and marks the event so the pane's handler doesn't also fire for empty space.
+  const ROW = Symbol("row");
+  function context(ev: MouseEvent, e: ExplorerEntry | null) {
+    if (!oncontextmenu) return;
+    if (!e && (ev as unknown as Record<symbol, boolean>)[ROW]) return;
+    if (e) (ev as unknown as Record<symbol, boolean>)[ROW] = true;
+    if (e && !selected.has(e.key)) {
+      selected = new Set([e.key]);
+      anchor = e.key;
+    }
+    if (!e) selected = new Set();
+    oncontextmenu(ev, e);
+  }
+
+  function onkeydown(ev: KeyboardEvent) {
+    if ((ev.target as HTMLElement).closest("input")) return;
+    const keys = sorted.map((x) => x.key);
+    const i = anchor ? keys.indexOf(anchor) : -1;
+    if (ev.key === "ArrowDown" || ev.key === "ArrowUp") {
+      const n = Math.max(0, Math.min(keys.length - 1, i + (ev.key === "ArrowDown" ? 1 : -1)));
+      if (keys[n]) {
+        anchor = keys[n];
+        selected = new Set([keys[n]]);
+        document.getElementById(rowId(keys[n]))?.scrollIntoView({ block: "nearest" });
+      }
+    } else if (ev.key === "Enter" && picked.length === 1) onopen(picked[0]);
+    else if (ev.key === "Delete" && picked.length && ondelete) ondelete(picked);
+    else if (ev.key === "F2" && picked.length === 1) {
+      if (oncommitname) editing = picked[0].key;
+      else onrename?.(picked[0]);
+    } else if (ev.key === "Backspace" && onup) onup();
+    else if (ev.key === "a" && (ev.ctrlKey || ev.metaKey)) selected = new Set(keys);
+    else if (ev.key === "Escape") selected = new Set();
+    else return;
+    ev.preventDefault();
+  }
+
+  const hasFiles = (ev: DragEvent) => !!ev.dataTransfer?.types.includes("Files");
+  function over(ev: DragEvent, target: string) {
+    if (!canDrop || !ondropfiles || !hasFiles(ev)) return;
+    ev.preventDefault();
+    ev.stopPropagation();
+    if (ev.dataTransfer) ev.dataTransfer.dropEffect = "copy";
+    dropOn = target;
+  }
+  function drop(ev: DragEvent, into: ExplorerEntry | null) {
+    if (!canDrop || !ondropfiles || !hasFiles(ev)) return;
+    ev.preventDefault();
+    ev.stopPropagation();
+    dropOn = null;
+    const files = Array.from(ev.dataTransfer?.files ?? []);
+    if (files.length) ondropfiles(files, into);
+  }
+
+  const rowId = (key: string) =>
+    `fl-${btoa(unescape(encodeURIComponent(key))).replace(/[^A-Za-z0-9]/g, "")}`;
+  const muted = "[color:color-mix(in_srgb,var(--ui-color-text)_60%,transparent)]";
+  // columns follow the LIST's own width (it sits beside a tree): Name + Size, then Date, then Type
+  const cols =
+    "grid grid-cols-[minmax(0,1fr)_6rem] @lg:grid-cols-[minmax(0,1fr)_11rem_6rem] @2xl:grid-cols-[minmax(0,1fr)_11rem_8rem_6rem] gap-x-4 items-center";
+</script>
+
+{#snippet head(c: FileListColumn, label: string, extra = "")}
+  <span
+    role="columnheader"
+    class={extra}
+    aria-sort={sortCol === c ? (sortDir === 1 ? "ascending" : "descending") : "none"}
+  >
+    <span
+      role="button"
+      tabindex="0"
+      class="inline-flex cursor-pointer items-center gap-0.5 hover:underline"
+      onclick={() => sortBy(c)}
+      onkeydown={(e) => (e.key === "Enter" || e.key === " ") && (e.preventDefault(), sortBy(c))}
+      >{label}{#if sortCol === c}{#if sortDir === 1}<IconUp class="size-4" />{:else}<IconDown
+            class="size-4"
+          />{/if}{/if}</span
+    >
+  </span>
+{/snippet}
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex a11y_no_noninteractive_element_interactions -->
+<div
+  role="grid"
+  aria-multiselectable="true"
+  aria-label={i18n.messages.files}
+  tabindex="0"
+  class="@container flex h-full min-h-0 flex-col select-none outline-none {cls}
+    {dropOn === '' ? `ring-2 ring-inset [--tw-ring-color:var(${token})]` : ''}"
+  {onkeydown}
+  oncontextmenu={(ev) => context(ev, null)}
+  ondragover={(ev) => over(ev, "")}
+  ondragleave={(ev) => {
+    if (!(ev.currentTarget as HTMLElement).contains(ev.relatedTarget as Node)) dropOn = null;
+  }}
+  ondrop={(ev) => drop(ev, null)}
+  onclick={(ev) => {
+    if (ev.target === ev.currentTarget) selected = new Set();
+  }}
+>
+  <div
+    role="row"
+    class="{cols} border-b px-3 py-2 font-medium [border-color:var(--ui-border-color)] {muted}"
+  >
+    {@render head("name", i18n.messages.colName)}
+    {@render head("modified", i18n.messages.colDateModified, "hidden @lg:block")}
+    {@render head("type", i18n.messages.colType, "hidden @2xl:block")}
+    {@render head("size", i18n.messages.colSize, "text-right")}
+  </div>
+  <div class="min-h-0 grow overflow-y-auto py-1" role="rowgroup">
+    {#if error}
+      <div class="px-3 py-6 [color:var(--ui-color-error)]">{error}</div>
+    {:else if loading && entries.length === 0}
+      <div class="px-3 py-6 {muted}">{i18n.messages.loading}</div>
+    {:else if entries.length === 0}
+      <div class="px-3 py-6 {muted}">{empty}</div>
+    {:else}
+      {#each sorted as e (e.key)}
+        {@const isSel = selected.has(e.key)}
+        <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+        <div
+          id={rowId(e.key)}
+          role="row"
+          aria-selected={isSel}
+          tabindex="-1"
+          class="{cols} mx-1 cursor-default rounded px-3 py-1.5
+            {isSel
+            ? `[background-color:color-mix(in_srgb,var(${token})_16%,transparent)]`
+            : dropOn === e.key
+              ? `[background-color:color-mix(in_srgb,var(${token})_10%,transparent)] ring-1 ring-inset [--tw-ring-color:var(${token})]`
+              : 'hover:[background-color:var(--ui-color-hover)]'}"
+          onclick={(ev) => click(ev, e)}
+          ondblclick={() => onopen(e)}
+          oncontextmenu={(ev) => context(ev, e)}
+          ondragover={e.kind === "file" ? undefined : (ev) => over(ev, e.key)}
+          ondrop={e.kind === "file" ? undefined : (ev) => drop(ev, e)}
+        >
+          <span role="gridcell" class="flex min-w-0 items-center gap-2">
+            {#if e.kind === "drive"}
+              <IconDrive class="size-5 shrink-0 {muted}" />
+            {:else if e.kind === "folder"}
+              <IconFolder class="size-5 shrink-0 [color:var(--ui-color-warning)]" />
+            {:else}
+              <IconFile class="size-5 shrink-0 {muted}" />
+            {/if}
+            {#if editing === e.key}
+              <!-- svelte-ignore a11y_no_static_element_interactions -->
+              <div
+                class="min-w-0 grow"
+                use:editField={e}
+                onclick={(ev) => ev.stopPropagation()}
+                ondblclick={(ev) => ev.stopPropagation()}
+                onkeydown={(ev) => {
+                  if (ev.key === "Enter") (ev.preventDefault(), finish(e, true));
+                  else if (ev.key === "Escape") (ev.preventDefault(), finish(e, false));
+                }}
+                onfocusout={() => finish(e, true)}
+              >
+                <Input bind:value={draft} aria-label={i18n.messages.newName} />
+              </div>
+            {:else}
+              <span class="truncate">{e.name}</span>
+            {/if}
+            {#each e.flags ?? [] as f (f)}<Badge size="sm" variant="neutral" text={f} />{/each}
+          </span>
+          <span role="gridcell" class="hidden truncate @lg:block {muted}"
+            >{e.modified ? fmtDate(e.modified) : ""}</span
+          >
+          <span role="gridcell" class="hidden truncate @2xl:block {muted}">{typeLabel(e)}</span>
+          <span role="gridcell" class="truncate text-right {muted}"
+            >{e.kind === "file" ? formatSize(e.size, i18n.locale) : ""}</span
+          >
+        </div>
+      {/each}
+    {/if}
+  </div>
+</div>

package/dist/components/FileList/FileList.svelte.d.ts

@@ -0,0 +1,39 @@
+export type { ExplorerEntry, FileListColumn } from "./types.js";
+export { formatSize } from "./types.js";
+import { type Variant } from "../../types/variants.js";
+import { type ExplorerEntry, type FileListColumn } from "./types.js";
+type $$ComponentProps = {
+    entries: ExplorerEntry[];
+    loading?: boolean;
+    error?: string | null;
+    /** Selected keys (bindable). */
+    selected?: Set<string>;
+    /** The entry being renamed in place (bindable), or null. */
+    editing?: string | null;
+    /** Active sort column / direction (bindable; `onsort` also fires on change). */
+    sortCol?: FileListColumn;
+    sortDir?: 1 | -1;
+    /** Empty-state text. Default: localized "This folder is empty." */
+    emptyText?: string;
+    canDrop?: boolean;
+    /** Selection accent (shared axis). Default `primary`. */
+    variant?: Variant;
+    /** Override the Date column formatting. Default: `Intl.DateTimeFormat(i18n.locale)` medium+short. */
+    formatDate?: (modified: string) => string;
+    class?: string;
+    onopen: (e: ExplorerEntry) => void;
+    /** Right-click: `entry` is the row under the pointer, or null on empty space. Not prevented — a
+     *  wrapping `ContextMenu` still opens. */
+    oncontextmenu?: (ev: MouseEvent, entry: ExplorerEntry | null) => void;
+    ondropfiles?: (files: File[], into: ExplorerEntry | null) => void;
+    ondelete?: (entries: ExplorerEntry[]) => void;
+    onrename?: (entry: ExplorerEntry) => void;
+    /** An in-place rename ended — `name` null = cancelled/unchanged. */
+    oncommitname?: (entry: ExplorerEntry, name: string | null) => void;
+    onup?: () => void;
+    /** Fired when the sort column/direction changes (e.g. to persist or sort server-side). */
+    onsort?: (col: FileListColumn, dir: 1 | -1) => void;
+};
+declare const FileList: import("svelte").Component<$$ComponentProps, {}, "selected" | "editing" | "sortCol" | "sortDir">;
+type FileList = ReturnType<typeof FileList>;
+export default FileList;

package/dist/components/FileList/index.d.ts

@@ -0,0 +1,3 @@
+export { default as FileList } from "./FileList.svelte";
+export type { ExplorerEntry, FileListColumn } from "./types.js";
+export { formatSize } from "./types.js";

package/dist/components/FileList/index.js

@@ -0,0 +1,2 @@
+export { default as FileList } from "./FileList.svelte";
+export { formatSize } from "./types.js";

package/dist/components/FileList/types.d.ts

@@ -0,0 +1,16 @@
+/** Shapes for the `FileList` details view. Backend-agnostic — the consumer owns the data. */
+export interface ExplorerEntry {
+    /** Unique key — usually the full path. */
+    key: string;
+    name: string;
+    kind: "drive" | "folder" | "file";
+    size?: number | null;
+    /** ISO date string (or anything `new Date()` accepts); formatted for the Date column. */
+    modified?: string | null;
+    /** Small `Badge`s rendered after the name ("read-only", …). */
+    flags?: string[];
+}
+/** The sortable columns. */
+export type FileListColumn = "name" | "modified" | "type" | "size";
+/** Human size — `1.5 MB`. The numeric part is localized via `locale` (decimal separator). */
+export declare function formatSize(n: number | null | undefined, locale?: string): string;

package/dist/components/FileList/types.js

@@ -0,0 +1,17 @@
+/** Shapes for the `FileList` details view. Backend-agnostic — the consumer owns the data. */
+/** Human size — `1.5 MB`. The numeric part is localized via `locale` (decimal separator). */
+export function formatSize(n, locale) {
+    if (n === null || n === undefined)
+        return "";
+    const u = ["B", "KB", "MB", "GB", "TB"];
+    let i = 0;
+    let v = n;
+    while (v >= 1024 && i < u.length - 1) {
+        v /= 1024;
+        i++;
+    }
+    const num = i
+        ? new Intl.NumberFormat(locale, { maximumFractionDigits: 1 }).format(v)
+        : String(v);
+    return `${num} ${u[i]}`;
+}

package/dist/components/Tree/Tree.svelte

@@ -256,6 +256,7 @@
           bind:this={rowRefs[f.key]}
           role="treeitem"
           data-key={f.key}
+          aria-label={f.node.label}
           aria-level={f.level + 1}
           aria-selected={active}
           aria-expanded={f.hasChildren ? f.open : undefined}

package/dist/i18n.d.ts

@@ -62,6 +62,19 @@ export type UiMessages = {
     removeFile: MsgFn<{
         name: string;
     }>;
+    files: Msg;
+    colName: Msg;
+    colDateModified: Msg;
+    colType: Msg;
+    colSize: Msg;
+    emptyFolder: Msg;
+    newName: Msg;
+    localDisk: Msg;
+    fileFolder: Msg;
+    genericFile: Msg;
+    fileOfType: MsgFn<{
+        ext: string;
+    }>;
     queryHelp: Msg;
     querySyntax: Msg;
     casts: Msg;

package/dist/i18n.js

@@ -53,6 +53,17 @@ export const defaultUiMessages = {
     textAreaControls: "Text area with controls",
     uploadFiles: "Upload files: drag and drop or activate to browse",
     removeFile: ({ name }) => `Remove ${name}`,
+    files: "Files",
+    colName: "Name",
+    colDateModified: "Date modified",
+    colType: "Type",
+    colSize: "Size",
+    emptyFolder: "This folder is empty.",
+    newName: "New name",
+    localDisk: "Local disk",
+    fileFolder: "File folder",
+    genericFile: "File",
+    fileOfType: ({ ext }) => `${ext} file`,
     queryHelp: "Query help",
     querySyntax: "Query syntax",
     casts: "Casts",

package/dist/index.d.ts

@@ -53,6 +53,8 @@ export { CommandPalette } from "./components/CommandPalette/index.js";
 export type { Command } from "./components/CommandPalette/index.js";
 export { Tree } from "./components/Tree/index.js";
 export type { TreeNode } from "./components/Tree/index.js";
+export { FileList, formatSize } from "./components/FileList/index.js";
+export type { ExplorerEntry, FileListColumn } from "./components/FileList/index.js";
 export type { MenuItem, MenuAction, MenuSeparator } from "./data/table/types.js";
 export { ButtonGroup } from "./components/ButtonGroup/index.js";
 export type { ButtonGroupItem, ButtonGroupSelect } from "./components/ButtonGroup/index.js";

package/dist/index.js

@@ -55,6 +55,7 @@ export { default as Menu } from "./components/Menu.svelte";
 export { ContextMenu } from "./components/ContextMenu/index.js";
 export { CommandPalette } from "./components/CommandPalette/index.js";
 export { Tree } from "./components/Tree/index.js";
+export { FileList, formatSize } from "./components/FileList/index.js";
 export { ButtonGroup } from "./components/ButtonGroup/index.js";
 export { default as Checkbox } from "./components/Checkbox.svelte";
 export { default as Toggle } from "./components/Toggle.svelte";

package/docs/components.md

@@ -840,8 +840,11 @@ Vertical event sequence — marker + connecting line + title/time/description.
 Right-click menu over any content; opens `Menu` at the pointer.
 
 - **Location**: `src/lib/components/ContextMenu/ContextMenu.svelte`
-- **Props**: `items` (`MenuItem[]`), `size`, `variant`, `disabled` (leaves the native menu), `class`,
-  `children` (the right-clickable content)
+- **Props**: `items` (`MenuItem[]` **or** `(event: MouseEvent) => MenuItem[]`), `size`, `variant`,
+  `disabled` (leaves the native menu), `class`, `children` (the right-clickable content)
+- **Dynamic items**: pass a function to build the menu from whatever was right-clicked — read
+  `event.target` (e.g. a row's `data-key`) and return that target's items; return `[]` to suppress the
+  menu. Lets one wrapper serve many targets (e.g. a `Tree`/file list) without tracking target state.
 - **Composition**: `Menu` anchored to a 0-size point at the pointer; flips/shifts at edges
 
 ### Tree
@@ -865,6 +868,28 @@ Hierarchical, expandable tree view (ARIA `tree`).
   select, Home/End
 - **Accessibility**: `role="tree"`/`treeitem` with `aria-level`/`-expanded`/`-selected`/`-disabled`
 
+### FileList
+
+The **details pane of a file explorer** — `Name · Date modified · Type · Size`, folders first. Shaped
+like an OS explorer (columns collapse by the component's own width via container queries), not a generic
+`DataTable`. **Consumer-driven**: the parent owns the data + every action; the component owns selection,
+sort, the rename field, and the drop highlight.
+
+- **Location**: `src/lib/components/FileList/FileList.svelte` · subpath `@spaethtech/svelte-ui/file-list`
+- **Types**: `ExplorerEntry` (`{ key, name, kind: 'drive'|'folder'|'file', size?, modified?, flags? }`),
+  `FileListColumn`; helper `formatSize(n, locale?)`
+- **State props (bindable)**: `selected` (`Set<string>`), `editing` (key being renamed), `sortCol`,
+  `sortDir`
+- **Other props**: `entries`, `loading`, `error`, `emptyText` (default localized), `canDrop`, `variant`
+  (selection accent), `formatDate(iso)` (override; default `Intl.DateTimeFormat(locale)`), `class`
+- **Callbacks** (actions): `onopen(e)` *(required)*, `oncontextmenu(ev, entry|null)` (not prevented, so
+  a wrapping `ContextMenu` opens), `ondropfiles(files, into|null)`, `ondelete(entries)`, `onrename(e)`,
+  `oncommitname(e, name|null)`, `onup()`, `onsort(col, dir)`
+- **Interaction**: click / Ctrl+click / Shift+click select; double-click or Enter opens; F2 renames in
+  place; Delete / Backspace / Ctrl+A / arrows; drag desktop files onto the pane or a folder row
+- **i18n**: column headers, Type labels, empty/aria strings via `UiMessages`; date/number via `locale`
+- **Composition**: built on `Input` (rename) + `Badge` (flags); pairs with `ContextMenu` + `Tree`
+
 ### ScrollArea
 
 Scroll container with a themed thin scrollbar.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.21.1-dev.129.7debcd5",
+  "version": "0.21.1-dev.131.6298c61",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"
@@ -253,6 +253,10 @@
       "types": "./dist/components/Tree/index.d.ts",
       "svelte": "./dist/components/Tree/index.js"
     },
+    "./file-list": {
+      "types": "./dist/components/FileList/index.d.ts",
+      "svelte": "./dist/components/FileList/index.js"
+    },
     "./button-group": {
       "types": "./dist/components/ButtonGroup/index.d.ts",
       "svelte": "./dist/components/ButtonGroup/index.js"