#File Manager

File Manager presents workspace locations, folder navigation, multi-selection, search, grid or list views, Quick Look, and recoverable file actions in one bounded surface. The trusted host still owns filesystem I/O, permissions, persistence, downloads, and trash recovery.

npm install @a3s-lab/ui@0.4.1

<section class="file-manager" data-state="ready" data-view="list" aria-label="Workspace files">
<aside data-file-manager-navigation><nav aria-label="File locations"><a href="#workspace" aria-current="page">Workspace</a><a href="#recent">Recent</a></nav></aside>
<main>
  <header data-file-manager-header>
    <nav aria-label="Current location"><ol><li><a href="#workspace">Workspace</a></li><li aria-current="page">Project</li></ol></nav>
    <label data-file-manager-search><span class="sr-only">Search files</span><input type="search" /></label>
  </header>
  <div data-file-manager-toolbar>
    <button type="button" data-file-action="new-folder">New folder</button>
    <button type="button" data-file-view="list" aria-pressed="true">List</button>
  </div>
  <div data-file-manager-viewport data-view="list" role="listbox" aria-multiselectable="true">
    <button type="button" role="option" data-file-item data-file-value="design" aria-selected="true"><strong data-file-label>DESIGN.md</strong><span>Markdown</span></button>
  </div>
</main>
</section>
<script type="module">
import "@a3s-lab/ui";
import "@a3s-lab/ui/file-manager";
const manager = document.querySelector(".file-manager");
manager.addEventListener("a3s:file-manager-before-action", event => {
  if (!authorizeFileAction(event.detail)) event.preventDefault();
});
manager.addEventListener("a3s:file-manager-action", event => runFileAction(event.detail));
</script>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#Product decisions

File Manager is not a code tree. Use File Explorer for repository hierarchy, dirty states, and editor-focused rename flows. Use File Manager when users need familiar workspace navigation, multi-selection, sorting, import, preview, and lifecycle actions across many file types.

• Selection is local UI state; the host authorizes every mutation through a cancelable before-* event.
• Delete means a host-defined recoverable trash operation unless the product explicitly presents permanent deletion.
• Loading and failure states retain the current location and user search. A failed refresh does not erase a usable listing.
• Grid view prioritizes file identity and type on separate lines. Owner and update metadata remain available in list view or Quick Look, where users can compare or inspect them without compressing grid cards.
• Quick Look previews only trusted or sanitized content. Large, binary, or remote files use a host previewer or download action.

#Controller contract

#Accessibility and ownership

The viewport is a multi-select listbox. Arrow keys move selection, Ctrl/Cmd + A selects visible items, Enter requests open, Space requests Quick Look, Delete requests a recoverable delete, and Escape closes preview before clearing selection. Toolbar actions, view toggles, and the search field keep native Enter/Space activation and are not stolen by the listbox shortcuts. Search results update the operable set without moving page scroll. The host owns path resolution, symlink policy, conflict handling, upload limits, permissions, file content, persistence, and recovery.