@kupcad/files 0.0.0-stage → 0.1.4

package/README.md

@@ -1,3 +1,50 @@
-# Temporary Holding Version
+# @kupcad/files
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A KupCAD project's files as a tree, for any host of them: the desktop app's folder on the disk,
+the browser IDE's in its private file system (OPFS). Svelte components and plain functions; the
+host brings the file system.
+
+```svelte
+<script>
+  import { ContextMenu, FileTree, listFolder, rowMenu } from '@kupcad/files';
+  import '@kupcad/ui/tokens.css';
+
+  let entries = $state(await listFolder('/', { readDir }));
+</script>
+
+<FileTree
+  {entries}
+  collapsed={new Set()}
+  selected={null}
+  unsaved={new Set()}
+  root="/"
+  onopen={(entry) => open(entry.path)}
+  ontoggle={(folder, opening) => toggle(folder.path, opening)}
+  onnew={(kind) => startNew(kind)}
+/>
+```
+
+* **The tree** (`FileTree`): folders, scripts and the files they read, each under its folder, a
+  folder opened and closed by a click or the arrow keys, the open script marked, and one with
+  unsaved changes. Its bar has its title and the buttons that make a script and a folder
+  (`onnew`; `keys` shows the host's shortcuts in their tooltips). A row's menu, and the tree's,
+  are the host's (`onmenu`, with where to show it); F2 renames a row, Delete or ⌘⌫ removes it. A
+  name being given (`editing`) is a field in the tree, what is wrong with it said under it
+  (`problem`). It fills its box, its rows scrolling under the bar, in `@kupcad/ui`'s `--kc-*`
+  tokens.
+* **The rows' menu** (`rowMenu`): what a row, or the tree, offers, as data: New Script, New
+  Folder, Rename…, and removing (`Delete…`, or the host's `Move to Trash`), with Upload Files…
+  and a file's Download where the host gives them (a browser's). A desktop app draws it as a
+  native menu; a page draws it with `ContextMenu`, a popover at the pointer that the arrow keys
+  move through and Escape, a click elsewhere or the focus leaving close.
+* **The folder** (`listFolder(root, { readDir })`): the tree of `root`, each folder's folders
+  first, hidden folders, `node_modules` and `target` left out, and a folder holding files but
+  no script or file a script reads (`kindOf`), at most `MAX_ENTRIES`. The names a new entry may
+  take (`nameProblem`, `scriptName`), and paths in it (`childPath`, `parentOf`, `within`) with
+  the host's separator, `/` or `\`.
+* **The scripts read** (`Scripts`, over the host's `read`, `write` and `exists`): each one's text
+  now and as the disk had it, for what is unsaved; a save that finds the disk changed since
+  holds the disk's text as a conflict for the person to choose; each script's editor snapshot,
+  its undo history, kept while another is shown.
+
+`pnpm test` runs its tests under jsdom (the popover is stood in for, `popover.test-helper.js`).

package/package.json

@@ -1,6 +1,43 @@
 {
   "name": "@kupcad/files",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.4",
+  "description": "A KupCAD project's files as a tree, for any host of them (the desktop app's disk, a browser's private file system): the Svelte tree with its bar, its rows' menu, the folder model and the scripts read with their unsaved changes.",
+  "license": "AGPL-3.0-only",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kupcad/kupcad.git",
+    "directory": "packages/kupcad-files"
+  },
+  "files": [
+    "src",
+    "!src/**/*.test.js",
+    "!src/**/*.test-helper.*"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "svelte": "./src/index.js",
+      "default": "./src/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^7.3.1",
+    "@testing-library/svelte": "^5.4.2",
+    "@types/node": "^26.6.5",
+    "jsdom": "^30.1.3",
+    "svelte": "^5.57.2",
+    "svelte-check": "^4.7.7",
+    "vite": "^8.3.5",
+    "vitest": "^5.0.5"
+  },
+  "peerDependencies": {
+    "svelte": "^5.57.2"
+  },
+  "scripts": {
+    "check": "svelte-check --tsconfig ./jsconfig.json --fail-on-warnings",
+    "test": "vitest run"
+  }
 }

package/src/ContextMenu.svelte

@@ -0,0 +1,155 @@
+<!--
+  @component
+  A menu at a point of the page (a tree row's, as `rowMenu` gives it), for a host with no native
+  one: in the page's top layer (an auto popover), moved in to stay in the window. It takes the
+  focus, on its first item; the arrow keys, Home and End move between its items. Choosing one
+  closes it and does what it says; Escape, a click elsewhere or the focus leaving close it with
+  nothing done. Closed either way, it says so (`onclose`, for the host to drop it), the focus
+  back where it was unless it went elsewhere.
+-->
+<script>
+  import { onMount } from 'svelte';
+
+  /** @import { MenuItem } from './menu.js' */
+
+  /**
+   * @typedef {object} Props
+   * @property {readonly MenuItem[]} items
+   * @property {{ x: number, y: number }} at its top left corner, in the window's pixels (read
+   *   as it opens)
+   * @property {() => void} onclose
+   * @property {string} [label] what it is a menu of, for a screen reader
+   */
+
+  /** @type {Props} */
+  let { items, at, onclose, label = 'Menu' } = $props();
+
+  /** @type {HTMLDivElement} */
+  let bound;
+  /** The menu, kept once shown: the browser's events of it may come after it is unmounted. */
+  let menu = /** @type {HTMLDivElement | null} */ (null);
+  /** What had the focus before it opened. */
+  let before = /** @type {Element | null} */ (null);
+  let open = false;
+
+  onMount(() => {
+    menu = bound;
+    before = document.activeElement;
+    menu.showPopover();
+    open = true;
+    const { width, height } = menu.getBoundingClientRect();
+    menu.style.left = `${Math.max(0, Math.min(at.x, innerWidth - width))}px`;
+    menu.style.top = `${Math.max(0, Math.min(at.y, innerHeight - height))}px`;
+    itemsOf()[0]?.focus();
+    return close;
+  });
+
+  const itemsOf = () => [...(menu?.querySelectorAll('button') ?? [])];
+
+  function close() {
+    if (!open) return;
+    open = false;
+    menu?.hidePopover();
+  }
+
+  /** @param {Extract<MenuItem, object>} item */
+  function choose(item) {
+    close();
+    item.action();
+  }
+
+  /** Closed, by a choice or the browser (Escape, a click elsewhere). @param {Event} event */
+  function toggled(event) {
+    if (/** @type {ToggleEvent} */ (event).newState !== 'closed') return;
+    open = false;
+    const focused = document.activeElement;
+    const lost = !focused || focused === document.body || !!menu?.contains(focused);
+    if (lost && before instanceof HTMLElement && before.isConnected) before.focus();
+    onclose();
+  }
+
+  /** @param {KeyboardEvent} event */
+  function keydown(event) {
+    const all = itemsOf();
+    const focused = all.indexOf(/** @type {HTMLButtonElement} */ (document.activeElement));
+    const next = {
+      ArrowDown: (focused + 1) % all.length,
+      ArrowUp: (focused - 1 + all.length) % all.length,
+      Home: 0,
+      End: all.length - 1,
+    }[event.key];
+    if (next === undefined) return;
+    event.preventDefault();
+    all[next]?.focus();
+  }
+
+  /** The focus left it (Tab, a click on something that takes it): it closes. @param {FocusEvent} event */
+  function focusout(event) {
+    if (!menu?.contains(/** @type {Node | null} */ (event.relatedTarget))) close();
+  }
+</script>
+
+<div
+  bind:this={bound}
+  class="kc-menu"
+  popover="auto"
+  role="menu"
+  tabindex="-1"
+  aria-label={label}
+  ontoggle={toggled}
+  onkeydown={keydown}
+  onfocusout={focusout}
+>
+  {#each items as item, i (i)}
+    {#if item === '-'}
+      <div class="separator" role="separator"></div>
+    {:else}
+      <button type="button" role="menuitem" tabindex="-1" onclick={() => choose(item)}>
+        {item.text}
+      </button>
+    {/if}
+  {/each}
+</div>
+
+<style>
+  .kc-menu {
+    /* At the point it opens, not the middle of the window where a popover goes */
+    position: fixed;
+    inset: auto;
+    margin: 0;
+    min-width: 12em;
+    padding: 4px;
+    font: inherit;
+    color: var(--kc-fg);
+    background: var(--kc-bg);
+    border: 1px solid var(--kc-border);
+    border-radius: var(--kc-radius);
+    box-shadow: 0 6px 20px rgb(0 0 0 / 0.18);
+  }
+  button {
+    display: block;
+    width: 100%;
+    padding: 4px 12px;
+    font: inherit;
+    text-align: left;
+    color: inherit;
+    background: none;
+    border: none;
+    border-radius: var(--kc-radius);
+    cursor: pointer;
+  }
+  button:hover,
+  button:focus {
+    outline: none;
+    background: var(--kc-hover);
+  }
+  button:focus-visible {
+    outline: 2px solid var(--kc-focus);
+    outline-offset: -2px;
+  }
+  .separator {
+    height: 1px;
+    margin: 4px 0;
+    background: var(--kc-border);
+  }
+</style>

package/src/FileTree.svelte

@@ -0,0 +1,412 @@
+<!--
+  @component
+  A project's tree: its folders, scripts and the files they read, each under its folder, under a
+  bar with its title and what can be made in it (`onnew`: a script, a folder). A folder,
+  clicked, opens or closes, nothing under a closed one shown; a script, clicked, is opened; the
+  open one is marked, and one with unsaved changes too. The arrow keys move through it as
+  through any tree: up and down from row to row, right into a folder (opening it first), left
+  out of it to its folder (closing an open one first). A row's menu (a right click, the menu key
+  or Shift+F10) and the tree's are the host's (`onmenu`, with where to show it); F2 renames a
+  row, Delete or ⌘⌫ (Ctrl+Backspace) removes it. A name being given (`editing`: a row renamed,
+  an entry made in a folder) is a field in the tree, Enter giving it and Escape leaving it, what
+  is wrong with it said under it (`problem`). It fills its box, the rows scrolling under the bar.
+-->
+<script>
+  import { foldersAbove, shownEntries } from './tree.js';
+
+  /** @import { Entry } from './tree.js' */
+
+  /**
+   * @typedef {object} Props
+   * @property {Entry[]} entries
+   * @property {ReadonlySet<string>} collapsed the closed folders' paths
+   * @property {string | null} selected the open script's path
+   * @property {ReadonlySet<string>} unsaved the paths of the scripts with unsaved changes
+   * @property {(entry: Entry) => void} onopen
+   * @property {(folder: Entry, open: boolean) => void} ontoggle opens or closes a folder
+   * @property {string} [root] the folder's own path: where an entry made in no folder of it goes
+   * @property {Naming | null} [editing] the name being given, if one is
+   * @property {string | null} [problem] what is wrong with the name given last
+   * @property {(name: string) => void} [oncommit] the name is given
+   * @property {() => void} [oncancel] it isn't
+   * @property {(entry: Entry | null, at: Point) => void} [onmenu] a row's menu, or the tree's
+   *   (null), to show at `at`: where the pointer is, or under the row for the keys
+   * @property {(entry: Entry) => void} [onrename]
+   * @property {(entry: Entry) => void} [ontrash] removes it
+   * @property {(kind: 'script' | 'folder') => void} [onnew] makes one: the bar's buttons
+   * @property {string} [title] the bar's
+   * @property {{ script?: string, folder?: string }} [keys] the host's shortcuts for the bar's
+   *   buttons, shown in their tooltips (`⌘N`)
+   */
+
+  /** A point in the window, in its pixels. @typedef {{ x: number, y: number }} Point */
+
+  /**
+   * A name being given: a row's new one, or a new entry's in the folder `in`.
+   * @typedef {{ path: string } | { in: string, kind: 'script' | 'folder' }} Naming
+   */
+
+  /** @type {Props} */
+  let {
+    entries,
+    collapsed,
+    selected,
+    unsaved,
+    onopen,
+    ontoggle,
+    root = '',
+    editing = null,
+    problem = null,
+    oncommit,
+    oncancel,
+    onmenu,
+    onrename,
+    ontrash,
+    onnew,
+    title = 'Files',
+    keys = {},
+  } = $props();
+
+  const id = $props.id();
+
+  const shown = $derived(shownEntries(entries, collapsed));
+  let list = $state(/** @type {HTMLUListElement | null} */ (null));
+
+  /** The row of the entry at `path`, when it has one to focus (data files have none). */
+  const rowOf = (/** @type {string | undefined} */ path) =>
+    [...(list?.querySelectorAll('button') ?? [])].find((button) => button.dataset.path === path);
+
+  /** @param {KeyboardEvent} event */
+  function keydown(event) {
+    const rows = [...(list?.querySelectorAll('button') ?? [])];
+    const row = rows.indexOf(/** @type {HTMLButtonElement} */ (document.activeElement));
+    const at = shown.findIndex((entry) => entry.path === rows[row]?.dataset.path);
+    if (at < 0) return;
+    const entry = shown[at];
+    const closed = entry.kind === 'folder' && collapsed.has(entry.path);
+    if (event.key === 'F2') onrename?.(entry);
+    else if (
+      event.key === 'Delete' ||
+      (event.key === 'Backspace' && (event.metaKey || event.ctrlKey))
+    ) {
+      ontrash?.(entry);
+    } else if (event.key === 'ContextMenu' || (event.key === 'F10' && event.shiftKey)) {
+      const { left, bottom } = rows[row].getBoundingClientRect();
+      onmenu?.(entry, { x: left, y: bottom });
+    } else if (event.key === 'ArrowDown') rows[row + 1]?.focus();
+    else if (event.key === 'ArrowUp') rows[row - 1]?.focus();
+    else if (event.key === 'ArrowRight' && entry.kind === 'folder') {
+      if (closed) ontoggle(entry, true);
+      else if (shown[at + 1]?.depth > entry.depth) rowOf(shown[at + 1].path)?.focus();
+    } else if (event.key === 'ArrowLeft') {
+      if (entry.kind === 'folder' && !closed) ontoggle(entry, false);
+      else rowOf(foldersAbove(entries, entry.path).at(-1))?.focus();
+    } else return;
+    event.preventDefault();
+  }
+
+  /**
+   * The menu of `entry`'s row, or of the tree itself, in place of the page's.
+   * @param {MouseEvent} event
+   * @param {Entry | null} entry
+   */
+  function menu(event, entry) {
+    if (!onmenu) return;
+    event.preventDefault();
+    event.stopPropagation();
+    onmenu(entry, { x: event.clientX, y: event.clientY });
+  }
+
+  /**
+   * The field a name is given in: focused once there, its name without its extension chosen.
+   * @param {HTMLInputElement} input
+   */
+  function naming(input) {
+    input.focus();
+    const dot = input.value.lastIndexOf('.');
+    input.setSelectionRange(0, dot > 0 ? dot : input.value.length);
+  }
+
+  /**
+   * The name in the field given (Enter, or the field left), or none where it is empty or the
+   * row's own. A field left with Escape gives nothing on the blur that follows; the host takes a
+   * name given again while it makes one, or once there is none to give, for nothing.
+   * @param {HTMLInputElement} input
+   * @param {string} given what the field started with
+   */
+  function settle(input, given) {
+    if (input.dataset.left) return;
+    const name = input.value;
+    if (name.trim() !== '' && name !== given) {
+      oncommit?.(name);
+      return;
+    }
+    input.dataset.left = 'true';
+    oncancel?.();
+  }
+</script>
+
+{#snippet field(
+  /** @type {string} */ given,
+  /** @type {string} */ label,
+  /** @type {number} */ depth,
+)}
+  <li class="naming" style:padding-left="{depth * 12 + 8}px">
+    <span class="twisty" aria-hidden="true"></span>
+    <span class="field">
+      <input
+        type="text"
+        class="kc-control"
+        value={given}
+        aria-label={label}
+        aria-invalid={problem ? 'true' : undefined}
+        aria-describedby={problem ? `${id}-problem` : undefined}
+        spellcheck="false"
+        autocomplete="off"
+        {@attach naming}
+        onkeydown={(event) => {
+          if (event.key === 'Enter') settle(event.currentTarget, given);
+          else if (event.key === 'Escape') {
+            event.currentTarget.dataset.left = 'true';
+            oncancel?.();
+          } else return;
+          event.preventDefault();
+          event.stopPropagation();
+        }}
+        onblur={(event) => settle(event.currentTarget, given)}
+      />
+      {#if problem}<span class="problem" id="{id}-problem">{problem}</span>{/if}
+    </span>
+  </li>
+{/snippet}
+
+{#snippet made(/** @type {number} */ depth)}
+  {#if editing && 'in' in editing}
+    {@render field('', editing.kind === 'script' ? 'New script name' : 'New folder name', depth)}
+  {/if}
+{/snippet}
+
+<div class="kc-files">
+  <div class="bar">
+    <span class="title">{title}</span>
+    {#if onnew}
+      <button
+        type="button"
+        class="action"
+        aria-label="New script"
+        title={keys.script ? `New script (${keys.script})` : 'New script'}
+        onclick={() => onnew('script')}
+      >
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M7 3.5h7l4 4v13H7z" />
+          <path d="M14 3.5v4h4M12.5 11v6M9.5 14h6" />
+        </svg>
+      </button>
+      <button
+        type="button"
+        class="action"
+        aria-label="New folder"
+        title={keys.folder ? `New folder (${keys.folder})` : 'New folder'}
+        onclick={() => onnew('folder')}
+      >
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M3.5 6.5h6l2 2h9v11h-17z" />
+          <path d="M12 11v6M9 14h6" />
+        </svg>
+      </button>
+    {/if}
+  </div>
+  <!-- svelte-ignore a11y_no_noninteractive_element_interactions: its rows are the buttons the keys move between, and their menu is the keys' too -->
+  <ul
+    class="tree"
+    bind:this={list}
+    onkeydown={keydown}
+    oncontextmenu={(event) => menu(event, null)}
+  >
+    {#if editing && 'in' in editing && editing.in === root}{@render made(0)}{/if}
+    {#each shown as entry (entry.path)}
+      {#if editing && 'path' in editing && editing.path === entry.path}
+        {@render field(entry.name, `Rename ${entry.name}`, entry.depth)}
+      {:else}
+        <!-- svelte-ignore a11y_no_noninteractive_element_interactions: a row's menu is its keys' too -->
+        <li
+          class={entry.kind}
+          style:padding-left="{entry.depth * 12 + 8}px"
+          oncontextmenu={(event) => menu(event, entry)}
+        >
+          {#if entry.kind === 'folder'}
+            {@const open = !collapsed.has(entry.path)}
+            <button
+              type="button"
+              data-path={entry.path}
+              aria-expanded={open}
+              title={entry.path}
+              onclick={() => ontoggle(entry, !open)}
+            >
+              <span class="twisty" aria-hidden="true">{open ? '▾' : '▸'}</span>{entry.name}
+            </button>
+          {:else if entry.kind === 'script'}
+            <span class="twisty" aria-hidden="true"></span>
+            <button
+              type="button"
+              data-path={entry.path}
+              class:selected={entry.path === selected}
+              aria-current={entry.path === selected ? 'true' : undefined}
+              aria-label={unsaved.has(entry.path) ? `${entry.name}, unsaved` : entry.name}
+              title={entry.path}
+              onclick={() => onopen(entry)}
+            >
+              {entry.name}{#if unsaved.has(entry.path)}<span class="unsaved" aria-hidden="true"
+                  >●</span
+                >{/if}
+            </button>
+          {:else}
+            <span class="twisty" aria-hidden="true"></span>
+            <span class="name" title={entry.path}>{entry.name}</span>
+          {/if}
+        </li>
+      {/if}
+      {#if editing && 'in' in editing && editing.in === entry.path}{@render made(
+          entry.depth + 1,
+        )}{/if}
+    {:else}
+      <li class="empty">No scripts here.</li>
+    {/each}
+  </ul>
+</div>
+
+<style>
+  .kc-files {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+  }
+  /* The tree's own bar: its title, and what can be made in it, each a plain icon in the text's
+     colour */
+  .bar {
+    flex: none;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    padding: 3px 4px 3px 12px;
+    border-bottom: 1px solid var(--kc-border);
+  }
+  .title {
+    flex: 1;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--kc-muted);
+  }
+  .action {
+    flex: none;
+    display: grid;
+    place-items: center;
+    width: 26px;
+    height: 26px;
+    padding: 0;
+    color: var(--kc-fg);
+  }
+  .action:focus-visible {
+    outline: 2px solid var(--kc-focus);
+    outline-offset: -2px;
+  }
+  .action svg {
+    width: 18px;
+    height: 18px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  .tree {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    margin: 0;
+    padding: 4px 0;
+    list-style: none;
+  }
+  li {
+    display: flex;
+    min-height: 22px;
+    align-items: center;
+    padding-right: 8px;
+    white-space: nowrap;
+  }
+  .folder {
+    color: var(--kc-muted);
+    font-weight: 600;
+  }
+  .data,
+  .empty {
+    color: var(--kc-muted);
+  }
+  .empty {
+    padding-left: 8px;
+  }
+  /* The folders' arrow, and its room in the other rows, so names at one depth line up */
+  .twisty {
+    flex: none;
+    display: inline-block;
+    width: 12px;
+    text-align: center;
+  }
+  .name {
+    padding: 2px 4px;
+  }
+  button {
+    flex: 1;
+    min-width: 0;
+    padding: 2px 4px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: left;
+    font: inherit;
+    color: var(--kc-fg);
+    background: none;
+    border: none;
+    border-radius: var(--kc-radius);
+    cursor: pointer;
+  }
+  /* A folder's arrow is inside its button, in the room the padding takes in the others */
+  .folder button {
+    padding-left: 0;
+    color: inherit;
+  }
+  .folder .twisty {
+    margin-right: 4px;
+  }
+  button:hover {
+    background: var(--kc-hover);
+  }
+  /* Tinted, its text as any row's: a full accent row outshouts the editor beside it */
+  button.selected {
+    background: var(--kc-accent-subtle);
+  }
+  .unsaved {
+    margin-left: 4px;
+  }
+  /* A name being given: the field the row's width, what is wrong with it under it */
+  .field {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+    padding: 1px 0;
+  }
+  .field input {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 1px 4px;
+    font: inherit;
+  }
+  .problem {
+    color: var(--kc-error);
+    white-space: normal;
+  }
+</style>

package/src/index.js

@@ -0,0 +1,32 @@
+// @kupcad/files: a project's files as a tree, for any host of them (the desktop app's on the
+// disk, the browser IDE's in its private file system): the tree (FileTree), its rows' menu
+// (rowMenu, drawn by a host's native menu or by ContextMenu), the folder listed through the
+// host's `readDir` and the paths and names in it (tree.js), and the scripts read, their unsaved
+// changes and undo histories (Scripts).
+
+export { default as ContextMenu } from './ContextMenu.svelte';
+export { default as FileTree } from './FileTree.svelte';
+export { rowMenu } from './menu.js';
+export { Scripts } from './scripts.svelte.js';
+export {
+  childPath,
+  DATA_EXTENSIONS,
+  foldersAbove,
+  kindOf,
+  listFolder,
+  MAX_ENTRIES,
+  nameProblem,
+  parentOf,
+  SCRIPT_EXTENSION,
+  scriptName,
+  shownEntries,
+  SKIPPED_FOLDER,
+  within,
+} from './tree.js';
+
+/** @typedef {import('./tree.js').Entry} Entry */
+/** @typedef {import('./tree.js').DirEntry} DirEntry */
+/** @typedef {import('./tree.js').DirReader} DirReader */
+/** @typedef {import('./menu.js').MenuItem} MenuItem */
+/** @typedef {import('./menu.js').RowActions} RowActions */
+/** @typedef {import('./scripts.svelte.js').ScriptFiles} ScriptFiles */