# FileExplorer

> A file browser with a folder tree, breadcrumbs, a sortable list or a grid, a preview pane, upload by button or drop, new folder and delete. It has no storage, your callbacks do the work.

Source: https://docs.nasaqui.com/components/file-explorer

## Install

```bash
npx shadcn@latest add https://docs.nasaqui.com/r/file-explorer.json
```

Browse and manage files. A folder tree on one side, breadcrumbs and a search box above the listing, a list
(name, modified, size) or a thumbnail grid in the middle, and a preview pane on the other side. Clicking a
folder opens it, clicking a file previews it (image, or text with syntax highlighting, or an icon and details).
Upload works from the button and by dropping files on the listing. New folder and Delete ask through dialogs.

The component owns only view state (open folder, selection, list or grid). The files are yours: pass `nodes`,
run the upload, create and delete in your callbacks, then pass the new `nodes` back.

## When to use

- A media library, a documents area, a project files tab.

## When not to use

- Picking one file in a form: use `FileUpload`.
- A plain hierarchy without files: use `TreeView`.

## Import

```tsx
import { FileExplorer } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"
```

## Quick start

```tsx
import { FileExplorer, type FileNode } from "@fadymondy/nasaq/web";

declare const nodes: FileNode[];
declare const api: { upload(files: File[], folder: string | null): Promise<void> };

export function Files() {
  return <FileExplorer nodes={nodes} onUpload={async (files, folder) => api.upload(files, folder)} />;
}
```

## Anatomy

```
FileExplorer                   data-slot="file-explorer"
├─ aside                       TreeView of folders
├─ main
│  ├─ Breadcrumb, New folder, Upload
│  ├─ search, list and grid toggle
│  ├─ UploadList               when `uploads` is set
│  └─ listing                  data-slot="file-explorer-listing" (DataTable or grid, drop target)
└─ aside                       data-slot="file-preview": preview, details, Download, Delete
Dialog, AlertDialog            new folder, delete
```

## API

Every `section` prop except `children`, `title` and `onSelect`, plus:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `nodes` | `FileNode[]` | required | `{ id, name, kind: "file" \| "folder", size?, modifiedAt?, mime?, children?, previewUrl?, previewText? }`. |
| `rootLabel` | `string` | All files | Name of the top level in the tree and breadcrumbs. |
| `folderId`, `defaultFolderId`, `onFolderChange` | `string \| null` | `null` | The open folder, controlled or not. `null` is the root. |
| `selectedId`, `onSelectedChange` | `string \| null` | | The previewed file. |
| `view`, `defaultView`, `onViewChange` | `"list" \| "grid"` | `list` | The layout. |
| `onUpload` | `(files, folderId) => Promise<void \| { error? }>` | | Shows Upload and the drop target. |
| `uploads`, `onRemoveUpload`, `onRetryUpload` | `UploadFile[]` | | Progress rows, same shape as `FileUpload`. |
| `onCreateFolder` | `(name, parentId) => Promise<void \| { error? }>` | | Shows New folder. `{ error }` keeps the dialog open. |
| `onDelete` | `(node) => Promise<void \| { error? }>` | | Shows Delete, after a confirm. |
| `onDownload` | `(node) => void` | | Shows Download in the preview and the row menu. |
| `loading` | `boolean` | `false` | Skeleton rows. |
| `title` | `ReactNode` | | The region label. |
| `labels` | `Partial<FileExplorerLabels>` | | Override any string. |

**Helpers** (pure, tested): `fileKind`, `extension`, `findPath`, `findNode`, `sortNodes`, `checkName`, `folderSize`.

## Examples

**Grid view with thumbnails**

```tsx
<FileExplorer nodes={nodes} defaultView="grid" onDownload={(n) => window.open(`/files/${n.id}`)} />
```

## Context menu

Rows (list view) and tiles (grid view) open their actions (download, delete) on right-click, Shift+F10 or the Menu key when `onDownload` or `onDelete` is set. `contextMenu={false}` opts out. The tree view has no item actions, so it keeps the browser menu.

## Accessibility

- The tree and the list use their own keyboard patterns. Rows are buttons, the row menu holds Download and Delete.
- The list and grid toggle uses `aria-pressed`. Thumbnails are decorative, the name is the label.
- Dialog errors are announced with `role="alert"`. Dropping files is optional: the Upload button does the same.

## RTL & i18n

- English and Arabic strings follow the Nasaq locale. File names use `<bdi dir="auto">`, sizes stay `dir="ltr"`.
- The layout uses logical classes only: the tree moves to the right in Arabic.

## Styling & tokens

- Built on `TreeView`, `DataTable`, `Breadcrumb`, `CodeBlock`, `UploadList`, `Dialog`, `AlertDialog` and `--nq-*` tokens.
- Target `[data-slot="file-explorer"]` and `[data-slot="file-preview"]`.

## Do / Don't

- Do validate uploads (size, type) on the server too.
- Do return `{ error }` from a callback when the server refuses.
- Don't put whole files in `previewText`: keep it to a short excerpt.
- Don't use it for thousands of files in one folder: page on the server.

## Related

- [`FileUpload`](https://docs.nasaqui.com/components/file-upload)
- [`TreeView`](https://docs.nasaqui.com/components/tree-view)
- [`DataTable`](https://docs.nasaqui.com/components/data-table)

## Lab

https://docs.nasaqui.com/?path=/docs/components-files-file-explorer--docs

## Code

### React

```tsx
import { FileExplorer, type FileNode } from "@fadymondy/nasaq/web";

declare const nodes: FileNode[];
declare const api: { upload(files: File[], folder: string | null): Promise<void> };

export function Files() {
  return <FileExplorer nodes={nodes} onUpload={async (files, folder) => api.upload(files, folder)} />;
}
```

### shadcn

```tsx
import { FileExplorer, type FileNode } from "@/components/ui/file-explorer";

declare const nodes: FileNode[];
declare const api: { upload(files: File[], folder: string | null): Promise<void> };

export function Files() {
  return <FileExplorer nodes={nodes} onUpload={async (files, folder) => api.upload(files, folder)} />;
}
```

### Vue

```vue
<script setup lang="ts">
import { NqFileExplorer, type FileNode } from "@fadymondy/nasaq/vue";
import { ref } from "vue";

const nodes = ref<FileNode[]>([
  {
    id: "docs",
    name: "Documents",
    kind: "folder",
    children: [
      { id: "brief", name: "brief.pdf", kind: "file", size: 482_000, modifiedAt: "2026-09-20T10:00:00Z", mime: "application/pdf" },
      { id: "notes", name: "notes.md", kind: "file", size: 1_240, modifiedAt: "2026-09-22T08:30:00Z", previewText: "# Launch notes\n\n- Ship the file explorer\n- Write the docs\n" },
    ],
  },
  { id: "images", name: "Images", kind: "folder", children: [{ id: "logo", name: "logo.svg", kind: "file", size: 3_400, modifiedAt: "2026-09-10T12:00:00Z", mime: "image/svg+xml" }] },
  { id: "report", name: "report.xlsx", kind: "file", size: 91_300, modifiedAt: "2026-09-27T14:15:00Z" },
]);

async function onUpload(files: File[], folderId: string | null) {
  const added = files.map((f, i) => ({ id: `up-${Date.now()}-${i}`, name: f.name, kind: "file" as const, size: f.size, modifiedAt: Date.now() }));
  if (!folderId) nodes.value = [...nodes.value, ...added];
  else nodes.value = nodes.value.map((n) => (n.id === folderId ? { ...n, children: [...(n.children ?? []), ...added] } : n));
}
async function onCreateFolder(name: string, parentId: string | null) {
  const folder: FileNode = { id: `f-${Date.now()}`, name, kind: "folder", children: [] };
  if (!parentId) nodes.value = [...nodes.value, folder];
  else nodes.value = nodes.value.map((n) => (n.id === parentId ? { ...n, children: [...(n.children ?? []), folder] } : n));
}
const without = (list: FileNode[], id: string): FileNode[] => list.filter((n) => n.id !== id).map((n) => (n.children ? { ...n, children: without(n.children, id) } : n));
async function onDelete(node: FileNode) {
  nodes.value = without(nodes.value, node.id);
}
function onDownload(node: FileNode) {
  window.open(`/files/${node.id}`);
}
</script>

<template>
  <NqFileExplorer :nodes="nodes" :on-upload="onUpload" :on-create-folder="onCreateFolder" :on-delete="onDelete" :on-download="onDownload" />
</template>
```

### Blade

```blade
@php
    $nodes = [
        [
            'id' => 'docs', 'name' => 'Documents', 'kind' => 'folder',
            'children' => [
                ['id' => 'brief', 'name' => 'brief.pdf', 'kind' => 'file', 'size' => 482000, 'modifiedAt' => '2026-09-20T10:00:00Z', 'mime' => 'application/pdf'],
                ['id' => 'notes', 'name' => 'notes.md', 'kind' => 'file', 'size' => 1240, 'modifiedAt' => '2026-09-22T08:30:00Z', 'previewText' => "# Launch notes\n\n- Ship the file explorer\n- Write the docs\n"],
            ],
        ],
        ['id' => 'images', 'name' => 'Images', 'kind' => 'folder', 'children' => [
            ['id' => 'logo', 'name' => 'logo.svg', 'kind' => 'file', 'size' => 3400, 'modifiedAt' => '2026-09-10T12:00:00Z', 'mime' => 'image/svg+xml'],
        ]],
        ['id' => 'empty', 'name' => 'Archive', 'kind' => 'folder', 'children' => []],
        ['id' => 'report', 'name' => 'report.xlsx', 'kind' => 'file', 'size' => 91300, 'modifiedAt' => '2026-09-27T14:15:00Z'],
    ];
@endphp
<x-nq::file-explorer :nodes="$nodes" can-upload can-create-folder can-delete can-download
    x-on:nq-file-upload="$event.detail.wait(Promise.resolve())"
    x-on:nq-file-create-folder="$event.detail.wait(Promise.resolve())"
    x-on:nq-file-delete="$event.detail.wait(Promise.resolve())"
    x-on:nq-file-download="window.open('/files/' + $event.detail.id)" />
```

### HTML + Alpine

```html
<section data-slot="file-explorer" aria-label="Files" x-data="nqFileExplorer(JSON.parse('{\u0022folder\u0022:\u0022\u0022,\u0022picked\u0022:null,\u0022view\u0022:\u0022list\u0022,\u0022locale\u0022:\u0022en\u0022,\u0022rootLabel\u0022:\u0022All files\u0022,\u0022nodes\u0022:[{\u0022id\u0022:\u0022empty\u0022,\u0022parent\u0022:\u0022\u0022,\u0022name\u0022:\u0022Archive\u0022,\u0022folder\u0022:true,\u0022size\u0022:null,\u0022mod\u0022:null,\u0022count\u0022:0},{\u0022id\u0022:\u0022docs\u0022,\u0022parent\u0022:\u0022\u0022,\u0022name\u0022:\u0022Documents\u0022,\u0022folder\u0022:true,\u0022size\u0022:null,\u0022mod\u0022:null,\u0022count\u0022:2},{\u0022id\u0022:\u0022brief\u0022,\u0022parent\u0022:\u0022docs\u0022,\u0022name\u0022:\u0022brief.pdf\u0022,\u0022folder\u0022:false,\u0022size\u0022:482000,\u0022mod\u0022:1789898400000,\u0022count\u0022:0},{\u0022id\u0022:\u0022notes\u0022,\u0022parent\u0022:\u0022docs\u0022,\u0022name\u0022:\u0022notes.md\u0022,\u0022folder\u0022:false,\u0022size\u0022:1240,\u0022mod\u0022:1790065800000,\u0022count\u0022:0},{\u0022id\u0022:\u0022images\u0022,\u0022parent\u0022:\u0022\u0022,\u0022name\u0022:\u0022Images\u0022,\u0022folder\u0022:true,\u0022size\u0022:null,\u0022mod\u0022:null,\u0022count\u0022:1},{\u0022id\u0022:\u0022logo\u0022,\u0022parent\u0022:\u0022images\u0022,\u0022name\u0022:\u0022logo.svg\u0022,\u0022folder\u0022:false,\u0022size\u0022:3400,\u0022mod\u0022:1789041600000,\u0022count\u0022:0},{\u0022id\u0022:\u0022report\u0022,\u0022parent\u0022:\u0022\u0022,\u0022name\u0022:\u0022report.xlsx\u0022,\u0022folder\u0022:false,\u0022size\u0022:91300,\u0022mod\u0022:1790518500000,\u0022count\u0022:0}],\u0022labels\u0022:{\u0022items\u0022:{\u0022one\u0022:\u00221 item\u0022,\u0022two\u0022:\u0022{n} items\u0022,\u0022few\u0022:\u0022{n} items\u0022,\u0022many\u0022:\u0022{n} items\u0022},\u0022genericError\u0022:\u0022Something went wrong. Try again.\u0022,\u0022problems\u0022:{\u0022empty\u0022:\u0022Enter a name.\u0022,\u0022invalid\u0022:\u0022A name cannot contain \\\/ \\\\ : * ? \\u0022 \\u003C \\u003E |\u0022,\u0022duplicate\u0022:\u0022Something with this name is already here.\u0022,\u0022reserved\u0022:\u0022That name is not allowed.\u0022},\u0022deleteTitle\u0022:\u0022Delete {name}?\u0022,\u0022deleteFile\u0022:\u0022The file is removed for everyone who can see this folder.\u0022,\u0022deleteFolder\u0022:{\u0022zero\u0022:\u0022The empty folder is removed.\u0022,\u0022one\u0022:\u0022The folder and the 1 item inside it are removed.\u0022,\u0022many\u0022:\u0022The folder and the {n} items inside it are removed.\u0022}}}'))"
    x-on:nq-file-upload="$event.detail.wait(Promise.resolve())" x-on:nq-file-create-folder="$event.detail.wait(Promise.resolve())" x-on:nq-file-delete="$event.detail.wait(Promise.resolve())" x-on:nq-file-download="window.open(&#039;/files/&#039; + $event.detail.id)" class="grid min-w-0 gap-4 lg:grid-cols-[14rem_minmax(0,1fr)] xl:grid-cols-[14rem_minmax(0,1fr)_18rem]">
    <aside aria-label="Folders" class="min-w-0 rounded-card border border-border bg-card p-2 max-lg:max-h-48 max-lg:overflow-y-auto lg:max-h-[36rem] lg:overflow-y-auto">
        <div data-slot="file-explorer-tree" role="tree" aria-label="Folders" class="flex flex-col gap-0.5 text-body text-foreground">
                        <div data-slot="file-explorer-tree-item" role="treeitem" tabindex="0" data-node-id="" aria-level="1" aria-expanded="true"
                x-bind:aria-selected="isHere('') ? 'true' : 'false'" x-bind:data-selected="isHere('') ? '' : null"
                x-on:click="enter('')" x-on:keydown.enter.self.prevent="enter('')" x-on:keydown.space.self.prevent="enter('')"
                style="padding-inline-start: 0.375rem" class="flex min-h-8 cursor-default items-center gap-1.5 rounded-control pe-2 outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-[selected]:bg-nq-selected">
                <svg aria-hidden="true" class="size-4 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"/>
</svg>                <bdi dir="auto" class="min-w-0 flex-1 truncate">All files</bdi>
            </div>
                                            <div data-slot="file-explorer-tree-item" role="treeitem" tabindex="0" data-node-id="empty" aria-level="2"
                    x-show="treeShown('empty')"
                                        x-bind:aria-selected="isHere('empty') ? 'true' : 'false'" x-bind:data-selected="isHere('empty') ? '' : null"
                    x-on:click="enter('empty')" x-on:keydown.enter.self.prevent="enter('empty')" x-on:keydown.space.self.prevent="enter('empty')"
                    style=" padding-inline-start: 1.625rem" class="flex min-h-8 cursor-default items-center gap-1.5 rounded-control pe-2 outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-[selected]:bg-nq-selected">
                    <svg aria-hidden="true" class="size-4 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>
</svg>                    <bdi dir="auto" class="min-w-0 flex-1 truncate">Archive</bdi>
                </div>
                                            <div data-slot="file-explorer-tree-item" role="treeitem" tabindex="0" data-node-id="docs" aria-level="2"
                    x-show="treeShown('docs')"
                                        x-bind:aria-selected="isHere('docs') ? 'true' : 'false'" x-bind:data-selected="isHere('docs') ? '' : null"
                    x-on:click="enter('docs')" x-on:keydown.enter.self.prevent="enter('docs')" x-on:keydown.space.self.prevent="enter('docs')"
                    style=" padding-inline-start: 1.625rem" class="flex min-h-8 cursor-default items-center gap-1.5 rounded-control pe-2 outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-[selected]:bg-nq-selected">
                    <svg aria-hidden="true" class="size-4 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>
</svg>                    <bdi dir="auto" class="min-w-0 flex-1 truncate">Documents</bdi>
                </div>
                                            <div data-slot="file-explorer-tree-item" role="treeitem" tabindex="0" data-node-id="images" aria-level="2"
                    x-show="treeShown('images')"
                                        x-bind:aria-selected="isHere('images') ? 'true' : 'false'" x-bind:data-selected="isHere('images') ? '' : null"
                    x-on:click="enter('images')" x-on:keydown.enter.self.prevent="enter('images')" x-on:keydown.space.self.prevent="enter('images')"
                    style=" padding-inline-start: 1.625rem" class="flex min-h-8 cursor-default items-center gap-1.5 rounded-control pe-2 outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus data-[selected]:bg-nq-selected">
                    <svg aria-hidden="true" class="size-4 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>
</svg>                    <bdi dir="auto" class="min-w-0 flex-1 truncate">Images</bdi>
                </div>
                    </div>
    </aside>
    <div class="flex min-w-0 flex-col gap-3">
        <div class="flex flex-wrap items-center justify-between gap-2">
            <nav data-slot="breadcrumb" aria-label="Path">
                <ol data-slot="breadcrumb-list" class="flex min-w-0 flex-wrap items-center gap-1.5 text-body-sm text-muted-foreground">
                    <template x-for="crumb in crumbs()" x-bind:key="crumb.id">
                        <li data-slot="breadcrumb-item" class="inline-flex min-w-0 items-center gap-1.5">
                            <span x-show="crumb.last" aria-current="page" data-slot="breadcrumb-page" class="truncate text-foreground"><bdi dir="auto" x-text="crumb.name"></bdi></span>
                            <span x-show="! crumb.last" class="inline-flex min-w-0 items-center gap-1.5">
                                <a href="#" data-slot="breadcrumb-link" x-on:click.prevent="enter(crumb.id)" class="truncate rounded-[3px] transition-colors duration-150 ease-nq outline-none hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus"><bdi dir="auto" x-text="crumb.name"></bdi></a>
                                <span data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" class="inline-flex [&_svg]:size-3.5 rtl:-scale-x-100"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg></span>
                            </span>
                        </li>
                    </template>
                </ol>
            </nav>
            <div class="flex flex-wrap items-center gap-2">
                                    <button data-slot="button"
     type="button"                         x-on:click="beginNew()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 10v6"/>
  <path d="M9 13h6"/>
  <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>
</svg>New folder</button>
                                                    <input type="file" multiple class="sr-only" tabindex="-1" aria-hidden="true" x-ref="picker" x-on:change="onPick($event)" />
                    <button data-slot="button"
     type="button"                         x-on:click="$refs.picker.click()" x-bind:aria-busy="uploading ? &#039;true&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control-sm px-2.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 3v12"/>
  <path d="m17 8-5-5-5 5"/>
  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
</svg>Upload</button>
                            </div>
        </div>
        <div class="flex flex-wrap items-center gap-2">
            <div role="group" data-slot="input-group"
    class="group/input-group flex h-control min-h-[var(--nq-touch-min,0px)] w-full items-center overflow-hidden rounded-control border border-input bg-card text-body text-foreground transition-colors duration-150 ease-nq focus-within:border-nq-focus focus-within:outline-1 focus-within:outline-nq-focus has-[[data-invalid]]:border-nq-danger has-[[aria-invalid=true]]:border-nq-danger has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50 min-w-0 max-w-sm flex-1"><div data-slot="input-group-addon" data-align="start"
    class="flex h-full shrink-0 items-center gap-1.5 text-body-sm text-muted-foreground [&_svg]:size-4 order-first ps-3 pe-1"><svg aria-hidden="true" class="size-4 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg></div>
                <input data-slot="input-group-input"     type="search" x-model="needle" placeholder="Search in this folder" aria-label="Search in this folder" class="h-full min-w-0 flex-1 border-0 bg-transparent px-3 text-body text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed pointer-coarse:text-[16px]" /></div>
            <div role="group" aria-label="View" class="ms-auto inline-flex rounded-control border border-border p-0.5">
                <button type="button" aria-label="List" title="List" x-on:click="setView('list')" x-bind:aria-pressed="viewMode === 'list' ? 'true' : 'false'"
                    x-bind:class="viewMode === 'list' ? 'bg-secondary' : ''" class="inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-foreground outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus [&amp;_svg]:size-4"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M3 5h.01"/>
  <path d="M3 12h.01"/>
  <path d="M3 19h.01"/>
  <path d="M8 5h13"/>
  <path d="M8 12h13"/>
  <path d="M8 19h13"/>
</svg></button>
                <button type="button" aria-label="Grid" title="Grid" x-on:click="setView('grid')" x-bind:aria-pressed="viewMode === 'grid' ? 'true' : 'false'"
                    x-bind:class="viewMode === 'grid' ? 'bg-secondary' : ''" class="inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-foreground outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus [&amp;_svg]:size-4"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="7" height="7" x="3" y="3" rx="1"/>
  <rect width="7" height="7" x="14" y="3" rx="1"/>
  <rect width="7" height="7" x="14" y="14" rx="1"/>
  <rect width="7" height="7" x="3" y="14" rx="1"/>
</svg></button>
            </div>
        </div>
        <div x-show="notice" style="display: none" data-slot="file-explorer-notice">
            <div data-slot="alert" data-tone="danger" role="alert"
        class="relative grid grid-cols-[auto_1fr_auto] items-start gap-x-3 rounded-card border p-3 text-start border-nq-danger/30 bg-nq-danger-soft">
    <svg aria-hidden="true" data-slot="alert-icon" class="mt-0.5 size-4 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>    <div data-slot="alert-body" class="flex min-w-0 flex-col gap-0.5">
                            <div data-slot="alert-description" class="text-body-sm text-foreground"><span x-text="notice"></span></div>
            </div>
    </div>
        </div>
        <div data-slot="file-explorer-listing" class="relative min-w-0 rounded-card" x-bind:data-dragging="dragging ? '' : null" x-bind:class="dragging ? 'outline-2 -outline-offset-2 outline-nq-focus outline-dashed' : ''"
             x-on:dragenter="dragIn($event)" x-on:dragover="dragOver($event)" x-on:dragleave="dragOut()" x-on:drop="dropIn($event)" >
                            <div x-show="dragging" style="display: none" class="absolute inset-0 z-10 flex items-center justify-center rounded-card bg-card/85 text-label text-foreground">
                    <svg aria-hidden="true" class="me-2 size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 3v12"/>
  <path d="m17 8-5-5-5 5"/>
  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
</svg>Drop to upload
                </div>
                                        <div x-show="isEmpty()"  style="display: none" >
                    <div data-slot="empty-state" class="flex flex-col items-center justify-center gap-3 border border-dashed border-border px-6 py-12 text-center rounded-card">
            <span data-slot="state-icon" class="inline-flex size-10 items-center justify-center rounded-control border border-border bg-card [&amp;_svg]:size-5 text-muted-foreground">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">This folder is empty</p>
                    <p class="text-body-sm text-muted-foreground">Drop files here or use Upload.</p>
            </div>
            <div class="mt-1 flex flex-wrap items-center justify-center gap-2"><button data-slot="button"
     type="button"                         x-on:click="$refs.picker.click()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control px-[var(--nq-control-pad)]">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 3v12"/>
  <path d="m17 8-5-5-5 5"/>
  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
</svg>Upload</button></div>
    </div>
                </div>
                <p x-show="isNoMatch()" style="display: none" class="rounded-card border border-dashed border-border px-4 py-10 text-center text-body-sm text-muted-foreground">Nothing here matches your search.</p>
                <div data-slot="file-explorer-list" role="grid" aria-label="Files in this folder" x-show="showList()"                     class="min-w-0 overflow-x-auto text-body-sm">
                    <div role="rowgroup" class="block">
                        <div role="row" class="grid grid-cols-[minmax(0,1fr)_6rem] sm:grid-cols-[minmax(0,1fr)_8rem_6rem] border-b border-border">
                                                            <div role="columnheader" data-slot="table-head" data-col="name" x-bind:aria-sort="ariaSort('name')"
                                    class="flex h-row items-center px-4 text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground  ">
                                    <button type="button" x-on:click="sortOn('name')" class="inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 -mx-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus">
                                        <span>Name</span>
                                        <svg aria-hidden="true" class="size-3.5 shrink-0 opacity-40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    </button>
                                </div>
                                                            <div role="columnheader" data-slot="table-head" data-col="modified" x-bind:aria-sort="ariaSort('modified')"
                                    class="flex h-row items-center px-4 text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground hidden sm:block ">
                                    <button type="button" x-on:click="sortOn('modified')" class="inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 -mx-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus">
                                        <span>Modified</span>
                                        <svg aria-hidden="true" class="size-3.5 shrink-0 opacity-40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    </button>
                                </div>
                                                            <div role="columnheader" data-slot="table-head" data-col="size" x-bind:aria-sort="ariaSort('size')"
                                    class="flex h-row items-center px-4 text-start align-middle text-caption font-medium whitespace-nowrap text-muted-foreground text-end justify-end">
                                    <button type="button" x-on:click="sortOn('size')" class="inline-flex h-7 max-w-full items-center gap-1 rounded-control px-1.5 -mx-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus">
                                        <span>Size</span>
                                        <svg aria-hidden="true" class="size-3.5 shrink-0 opacity-40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>                                    </button>
                                </div>
                                                    </div>
                    </div>
                    <div role="rowgroup" class="flex flex-col">
                                                    <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger" class="group/entry min-w-0 outline-none transition-colors duration-150 ease-nq focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus cursor-pointer grid grid-cols-[minmax(0,1fr)_6rem] sm:grid-cols-[minmax(0,1fr)_8rem_6rem] items-center border-b border-border hover:bg-nq-hover data-[selected]:bg-nq-selected" data-entry="data-entry" role="row" data-node-id="empty" tabindex="0" x-bind:style="{ order: rowOrder('empty') }" x-bind:hidden="inFolder('empty') ? null : ''" x-bind:data-selected="isPicked('empty') ? '' : null" x-bind:aria-selected="null" x-on:click="go('empty')" x-on:keydown.enter.self.prevent="go('empty')" x-on:keydown.space.self.prevent="go('empty')"><div role="gridcell" data-slot="table-cell" class="flex h-row min-w-0 items-center gap-2 px-4 py-3">
                                    <svg aria-hidden="true" class="text-nq-accent-text size-4.5 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>
</svg>                                    <bdi dir="auto" class="truncate text-foreground">Archive</bdi>
                                </div>
                                <div role="gridcell" data-slot="table-cell" class="hidden h-row items-center px-4 py-3 sm:flex">
                                                                            <span class="text-muted-foreground">-</span>
                                                                    </div>
                                <div role="gridcell" data-slot="table-cell" class="flex h-row items-center justify-end px-4 py-3 text-end tabular-nums">
                                                                            <span class="text-muted-foreground">0 items</span>
                                                                    </div></div>
        <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 min-w-44 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"><div data-slot="context-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="askDelete(&#039;empty&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 text-nq-danger-text [&_svg]:text-current"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>Delete</div></div>
</template></div>
                                                    <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger" class="group/entry min-w-0 outline-none transition-colors duration-150 ease-nq focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus cursor-pointer grid grid-cols-[minmax(0,1fr)_6rem] sm:grid-cols-[minmax(0,1fr)_8rem_6rem] items-center border-b border-border hover:bg-nq-hover data-[selected]:bg-nq-selected" data-entry="data-entry" role="row" data-node-id="docs" tabindex="0" x-bind:style="{ order: rowOrder('docs') }" x-bind:hidden="inFolder('docs') ? null : ''" x-bind:data-selected="isPicked('docs') ? '' : null" x-bind:aria-selected="null" x-on:click="go('docs')" x-on:keydown.enter.self.prevent="go('docs')" x-on:keydown.space.self.prevent="go('docs')"><div role="gridcell" data-slot="table-cell" class="flex h-row min-w-0 items-center gap-2 px-4 py-3">
                                    <svg aria-hidden="true" class="text-nq-accent-text size-4.5 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>
</svg>                                    <bdi dir="auto" class="truncate text-foreground">Documents</bdi>
                                </div>
                                <div role="gridcell" data-slot="table-cell" class="hidden h-row items-center px-4 py-3 sm:flex">
                                                                            <span class="text-muted-foreground">-</span>
                                                                    </div>
                                <div role="gridcell" data-slot="table-cell" class="flex h-row items-center justify-end px-4 py-3 text-end tabular-nums">
                                                                            <span class="text-muted-foreground">2 items</span>
                                                                    </div></div>
        <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 min-w-44 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"><div data-slot="context-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="askDelete(&#039;docs&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 text-nq-danger-text [&_svg]:text-current"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>Delete</div></div>
</template></div>
                                                    <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger" class="group/entry min-w-0 outline-none transition-colors duration-150 ease-nq focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus cursor-pointer grid grid-cols-[minmax(0,1fr)_6rem] sm:grid-cols-[minmax(0,1fr)_8rem_6rem] items-center border-b border-border hover:bg-nq-hover data-[selected]:bg-nq-selected" data-entry="data-entry" role="row" data-node-id="brief" tabindex="0" x-bind:style="{ order: rowOrder('brief') }" x-bind:hidden="inFolder('brief') ? null : ''" x-bind:data-selected="isPicked('brief') ? '' : null" x-bind:aria-selected="isPicked('brief') ? 'true' : 'false'" x-on:click="go('brief')" x-on:keydown.enter.self.prevent="go('brief')" x-on:keydown.space.self.prevent="go('brief')" hidden="hidden"><div role="gridcell" data-slot="table-cell" class="flex h-row min-w-0 items-center gap-2 px-4 py-3">
                                    <svg aria-hidden="true" class="text-muted-foreground size-4.5 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/>
  <path d="M14 2v5a1 1 0 0 0 1 1h5"/>
  <path d="M10 9H8"/>
  <path d="M16 13H8"/>
  <path d="M16 17H8"/>
</svg>                                    <bdi dir="auto" class="truncate text-foreground">brief.pdf</bdi>
                                </div>
                                <div role="gridcell" data-slot="table-cell" class="hidden h-row items-center px-4 py-3 sm:flex">
                                                                            <time data-slot="date-time" datetime="2026-09-20T10:00:00+00:00" dir="auto"     class="tabular-nums [unicode-bidi:isolate] text-muted-foreground">Sep 20, 2026</time>
                                                                    </div>
                                <div role="gridcell" data-slot="table-cell" class="flex h-row items-center justify-end px-4 py-3 text-end tabular-nums">
                                                                            <span class="text-muted-foreground"><bdi dir="ltr">470.7 KB</bdi></span>
                                                                    </div></div>
        <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 min-w-44 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"><div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="download(&#039;brief&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 15V3"/>
  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
  <path d="m7 10 5 5 5-5"/>
</svg>Download</div>
                                        <div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                                        <div data-slot="context-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="askDelete(&#039;brief&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 text-nq-danger-text [&_svg]:text-current"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>Delete</div></div>
</template></div>
                                                    <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger" class="group/entry min-w-0 outline-none transition-colors duration-150 ease-nq focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus cursor-pointer grid grid-cols-[minmax(0,1fr)_6rem] sm:grid-cols-[minmax(0,1fr)_8rem_6rem] items-center border-b border-border hover:bg-nq-hover data-[selected]:bg-nq-selected" data-entry="data-entry" role="row" data-node-id="notes" tabindex="0" x-bind:style="{ order: rowOrder('notes') }" x-bind:hidden="inFolder('notes') ? null : ''" x-bind:data-selected="isPicked('notes') ? '' : null" x-bind:aria-selected="isPicked('notes') ? 'true' : 'false'" x-on:click="go('notes')" x-on:keydown.enter.self.prevent="go('notes')" x-on:keydown.space.self.prevent="go('notes')" hidden="hidden"><div role="gridcell" data-slot="table-cell" class="flex h-row min-w-0 items-center gap-2 px-4 py-3">
                                    <svg aria-hidden="true" class="text-muted-foreground size-4.5 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/>
  <path d="M14 2v5a1 1 0 0 0 1 1h5"/>
  <path d="M10 9H8"/>
  <path d="M16 13H8"/>
  <path d="M16 17H8"/>
</svg>                                    <bdi dir="auto" class="truncate text-foreground">notes.md</bdi>
                                </div>
                                <div role="gridcell" data-slot="table-cell" class="hidden h-row items-center px-4 py-3 sm:flex">
                                                                            <time data-slot="date-time" datetime="2026-09-22T08:30:00+00:00" dir="auto"     class="tabular-nums [unicode-bidi:isolate] text-muted-foreground">Sep 22, 2026</time>
                                                                    </div>
                                <div role="gridcell" data-slot="table-cell" class="flex h-row items-center justify-end px-4 py-3 text-end tabular-nums">
                                                                            <span class="text-muted-foreground"><bdi dir="ltr">1.2 KB</bdi></span>
                                                                    </div></div>
        <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 min-w-44 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"><div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="download(&#039;notes&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 15V3"/>
  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
  <path d="m7 10 5 5 5-5"/>
</svg>Download</div>
                                        <div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                                        <div data-slot="context-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="askDelete(&#039;notes&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 text-nq-danger-text [&_svg]:text-current"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>Delete</div></div>
</template></div>
                                                    <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger" class="group/entry min-w-0 outline-none transition-colors duration-150 ease-nq focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus cursor-pointer grid grid-cols-[minmax(0,1fr)_6rem] sm:grid-cols-[minmax(0,1fr)_8rem_6rem] items-center border-b border-border hover:bg-nq-hover data-[selected]:bg-nq-selected" data-entry="data-entry" role="row" data-node-id="images" tabindex="0" x-bind:style="{ order: rowOrder('images') }" x-bind:hidden="inFolder('images') ? null : ''" x-bind:data-selected="isPicked('images') ? '' : null" x-bind:aria-selected="null" x-on:click="go('images')" x-on:keydown.enter.self.prevent="go('images')" x-on:keydown.space.self.prevent="go('images')"><div role="gridcell" data-slot="table-cell" class="flex h-row min-w-0 items-center gap-2 px-4 py-3">
                                    <svg aria-hidden="true" class="text-nq-accent-text size-4.5 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>
</svg>                                    <bdi dir="auto" class="truncate text-foreground">Images</bdi>
                                </div>
                                <div role="gridcell" data-slot="table-cell" class="hidden h-row items-center px-4 py-3 sm:flex">
                                                                            <span class="text-muted-foreground">-</span>
                                                                    </div>
                                <div role="gridcell" data-slot="table-cell" class="flex h-row items-center justify-end px-4 py-3 text-end tabular-nums">
                                                                            <span class="text-muted-foreground">1 item</span>
                                                                    </div></div>
        <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 min-w-44 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"><div data-slot="context-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="askDelete(&#039;images&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 text-nq-danger-text [&_svg]:text-current"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>Delete</div></div>
</template></div>
                                                    <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger" class="group/entry min-w-0 outline-none transition-colors duration-150 ease-nq focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus cursor-pointer grid grid-cols-[minmax(0,1fr)_6rem] sm:grid-cols-[minmax(0,1fr)_8rem_6rem] items-center border-b border-border hover:bg-nq-hover data-[selected]:bg-nq-selected" data-entry="data-entry" role="row" data-node-id="logo" tabindex="0" x-bind:style="{ order: rowOrder('logo') }" x-bind:hidden="inFolder('logo') ? null : ''" x-bind:data-selected="isPicked('logo') ? '' : null" x-bind:aria-selected="isPicked('logo') ? 'true' : 'false'" x-on:click="go('logo')" x-on:keydown.enter.self.prevent="go('logo')" x-on:keydown.space.self.prevent="go('logo')" hidden="hidden"><div role="gridcell" data-slot="table-cell" class="flex h-row min-w-0 items-center gap-2 px-4 py-3">
                                    <svg aria-hidden="true" class="text-muted-foreground size-4.5 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/>
  <path d="M14 2v5a1 1 0 0 0 1 1h5"/>
  <circle cx="10" cy="12" r="2"/>
  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22"/>
</svg>                                    <bdi dir="auto" class="truncate text-foreground">logo.svg</bdi>
                                </div>
                                <div role="gridcell" data-slot="table-cell" class="hidden h-row items-center px-4 py-3 sm:flex">
                                                                            <time data-slot="date-time" datetime="2026-09-10T12:00:00+00:00" dir="auto"     class="tabular-nums [unicode-bidi:isolate] text-muted-foreground">Sep 10, 2026</time>
                                                                    </div>
                                <div role="gridcell" data-slot="table-cell" class="flex h-row items-center justify-end px-4 py-3 text-end tabular-nums">
                                                                            <span class="text-muted-foreground"><bdi dir="ltr">3.3 KB</bdi></span>
                                                                    </div></div>
        <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 min-w-44 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"><div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="download(&#039;logo&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 15V3"/>
  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
  <path d="m7 10 5 5 5-5"/>
</svg>Download</div>
                                        <div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                                        <div data-slot="context-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="askDelete(&#039;logo&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 text-nq-danger-text [&_svg]:text-current"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>Delete</div></div>
</template></div>
                                                    <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger" class="group/entry min-w-0 outline-none transition-colors duration-150 ease-nq focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus cursor-pointer grid grid-cols-[minmax(0,1fr)_6rem] sm:grid-cols-[minmax(0,1fr)_8rem_6rem] items-center border-b border-border hover:bg-nq-hover data-[selected]:bg-nq-selected" data-entry="data-entry" role="row" data-node-id="report" tabindex="0" x-bind:style="{ order: rowOrder('report') }" x-bind:hidden="inFolder('report') ? null : ''" x-bind:data-selected="isPicked('report') ? '' : null" x-bind:aria-selected="isPicked('report') ? 'true' : 'false'" x-on:click="go('report')" x-on:keydown.enter.self.prevent="go('report')" x-on:keydown.space.self.prevent="go('report')"><div role="gridcell" data-slot="table-cell" class="flex h-row min-w-0 items-center gap-2 px-4 py-3">
                                    <svg aria-hidden="true" class="text-muted-foreground size-4.5 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/>
  <path d="M14 2v5a1 1 0 0 0 1 1h5"/>
  <path d="M8 13h2"/>
  <path d="M14 13h2"/>
  <path d="M8 17h2"/>
  <path d="M14 17h2"/>
</svg>                                    <bdi dir="auto" class="truncate text-foreground">report.xlsx</bdi>
                                </div>
                                <div role="gridcell" data-slot="table-cell" class="hidden h-row items-center px-4 py-3 sm:flex">
                                                                            <time data-slot="date-time" datetime="2026-09-27T14:15:00+00:00" dir="auto"     class="tabular-nums [unicode-bidi:isolate] text-muted-foreground">Sep 27, 2026</time>
                                                                    </div>
                                <div role="gridcell" data-slot="table-cell" class="flex h-row items-center justify-end px-4 py-3 text-end tabular-nums">
                                                                            <span class="text-muted-foreground"><bdi dir="ltr">89.2 KB</bdi></span>
                                                                    </div></div>
        <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 min-w-44 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"><div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="download(&#039;report&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 15V3"/>
  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
  <path d="m7 10 5 5 5-5"/>
</svg>Download</div>
                                        <div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                                        <div data-slot="context-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="askDelete(&#039;report&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 text-nq-danger-text [&_svg]:text-current"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>Delete</div></div>
</template></div>
                                            </div>
                </div>
                <div data-slot="file-explorer-grid" role="list" aria-label="Files in this folder" x-show="showGrid()"  style="display: none"                     class="m-0 grid grid-cols-2 gap-3 p-0 sm:grid-cols-3 md:grid-cols-4">
                                            <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger" class="group/entry min-w-0 outline-none transition-colors duration-150 ease-nq focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus cursor-pointer flex w-full flex-col items-stretch gap-2 rounded-card border border-border bg-card p-2 text-start hover:bg-nq-hover data-[selected]:border-nq-accent data-[selected]:bg-nq-selected" data-entry="data-entry" role="listitem" data-node-id="empty" tabindex="0" x-bind:style="{ order: rowOrder('empty') }" x-bind:hidden="inFolder('empty') ? null : ''" x-bind:data-selected="isPicked('empty') ? '' : null" x-bind:aria-selected="null" x-on:click="go('empty')" x-on:keydown.enter.self.prevent="go('empty')" x-on:keydown.space.self.prevent="go('empty')"><span class="flex aspect-[4/3] items-center justify-center overflow-hidden rounded-control bg-secondary">
                                                                    <svg aria-hidden="true" class="text-nq-accent-text size-10 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>
</svg>                                                            </span>
                            <span class="flex min-w-0 flex-col">
                                <bdi dir="auto" class="truncate text-body-sm text-foreground">Archive</bdi>
                                <span class="truncate text-caption text-muted-foreground">
                                    0 items                                </span>
                            </span></div>
        <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 min-w-44 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"><div data-slot="context-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="askDelete(&#039;empty&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 text-nq-danger-text [&_svg]:text-current"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>Delete</div></div>
</template></div>
                                            <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger" class="group/entry min-w-0 outline-none transition-colors duration-150 ease-nq focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus cursor-pointer flex w-full flex-col items-stretch gap-2 rounded-card border border-border bg-card p-2 text-start hover:bg-nq-hover data-[selected]:border-nq-accent data-[selected]:bg-nq-selected" data-entry="data-entry" role="listitem" data-node-id="docs" tabindex="0" x-bind:style="{ order: rowOrder('docs') }" x-bind:hidden="inFolder('docs') ? null : ''" x-bind:data-selected="isPicked('docs') ? '' : null" x-bind:aria-selected="null" x-on:click="go('docs')" x-on:keydown.enter.self.prevent="go('docs')" x-on:keydown.space.self.prevent="go('docs')"><span class="flex aspect-[4/3] items-center justify-center overflow-hidden rounded-control bg-secondary">
                                                                    <svg aria-hidden="true" class="text-nq-accent-text size-10 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>
</svg>                                                            </span>
                            <span class="flex min-w-0 flex-col">
                                <bdi dir="auto" class="truncate text-body-sm text-foreground">Documents</bdi>
                                <span class="truncate text-caption text-muted-foreground">
                                    2 items                                </span>
                            </span></div>
        <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 min-w-44 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"><div data-slot="context-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="askDelete(&#039;docs&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 text-nq-danger-text [&_svg]:text-current"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>Delete</div></div>
</template></div>
                                            <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger" class="group/entry min-w-0 outline-none transition-colors duration-150 ease-nq focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus cursor-pointer flex w-full flex-col items-stretch gap-2 rounded-card border border-border bg-card p-2 text-start hover:bg-nq-hover data-[selected]:border-nq-accent data-[selected]:bg-nq-selected" data-entry="data-entry" role="listitem" data-node-id="brief" tabindex="0" x-bind:style="{ order: rowOrder('brief') }" x-bind:hidden="inFolder('brief') ? null : ''" x-bind:data-selected="isPicked('brief') ? '' : null" x-bind:aria-selected="null" x-on:click="go('brief')" x-on:keydown.enter.self.prevent="go('brief')" x-on:keydown.space.self.prevent="go('brief')" hidden="hidden"><span class="flex aspect-[4/3] items-center justify-center overflow-hidden rounded-control bg-secondary">
                                                                    <svg aria-hidden="true" class="text-muted-foreground size-10 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/>
  <path d="M14 2v5a1 1 0 0 0 1 1h5"/>
  <path d="M10 9H8"/>
  <path d="M16 13H8"/>
  <path d="M16 17H8"/>
</svg>                                                            </span>
                            <span class="flex min-w-0 flex-col">
                                <bdi dir="auto" class="truncate text-body-sm text-foreground">brief.pdf</bdi>
                                <span class="truncate text-caption text-muted-foreground">
                                    <bdi dir="ltr">470.7 KB</bdi>                                </span>
                            </span></div>
        <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 min-w-44 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"><div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="download(&#039;brief&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 15V3"/>
  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
  <path d="m7 10 5 5 5-5"/>
</svg>Download</div>
                                        <div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                                        <div data-slot="context-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="askDelete(&#039;brief&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 text-nq-danger-text [&_svg]:text-current"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>Delete</div></div>
</template></div>
                                            <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger" class="group/entry min-w-0 outline-none transition-colors duration-150 ease-nq focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus cursor-pointer flex w-full flex-col items-stretch gap-2 rounded-card border border-border bg-card p-2 text-start hover:bg-nq-hover data-[selected]:border-nq-accent data-[selected]:bg-nq-selected" data-entry="data-entry" role="listitem" data-node-id="notes" tabindex="0" x-bind:style="{ order: rowOrder('notes') }" x-bind:hidden="inFolder('notes') ? null : ''" x-bind:data-selected="isPicked('notes') ? '' : null" x-bind:aria-selected="null" x-on:click="go('notes')" x-on:keydown.enter.self.prevent="go('notes')" x-on:keydown.space.self.prevent="go('notes')" hidden="hidden"><span class="flex aspect-[4/3] items-center justify-center overflow-hidden rounded-control bg-secondary">
                                                                    <svg aria-hidden="true" class="text-muted-foreground size-10 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/>
  <path d="M14 2v5a1 1 0 0 0 1 1h5"/>
  <path d="M10 9H8"/>
  <path d="M16 13H8"/>
  <path d="M16 17H8"/>
</svg>                                                            </span>
                            <span class="flex min-w-0 flex-col">
                                <bdi dir="auto" class="truncate text-body-sm text-foreground">notes.md</bdi>
                                <span class="truncate text-caption text-muted-foreground">
                                    <bdi dir="ltr">1.2 KB</bdi>                                </span>
                            </span></div>
        <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 min-w-44 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"><div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="download(&#039;notes&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 15V3"/>
  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
  <path d="m7 10 5 5 5-5"/>
</svg>Download</div>
                                        <div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                                        <div data-slot="context-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="askDelete(&#039;notes&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 text-nq-danger-text [&_svg]:text-current"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>Delete</div></div>
</template></div>
                                            <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger" class="group/entry min-w-0 outline-none transition-colors duration-150 ease-nq focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus cursor-pointer flex w-full flex-col items-stretch gap-2 rounded-card border border-border bg-card p-2 text-start hover:bg-nq-hover data-[selected]:border-nq-accent data-[selected]:bg-nq-selected" data-entry="data-entry" role="listitem" data-node-id="images" tabindex="0" x-bind:style="{ order: rowOrder('images') }" x-bind:hidden="inFolder('images') ? null : ''" x-bind:data-selected="isPicked('images') ? '' : null" x-bind:aria-selected="null" x-on:click="go('images')" x-on:keydown.enter.self.prevent="go('images')" x-on:keydown.space.self.prevent="go('images')"><span class="flex aspect-[4/3] items-center justify-center overflow-hidden rounded-control bg-secondary">
                                                                    <svg aria-hidden="true" class="text-nq-accent-text size-10 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>
</svg>                                                            </span>
                            <span class="flex min-w-0 flex-col">
                                <bdi dir="auto" class="truncate text-body-sm text-foreground">Images</bdi>
                                <span class="truncate text-caption text-muted-foreground">
                                    1 item                                </span>
                            </span></div>
        <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 min-w-44 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"><div data-slot="context-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="askDelete(&#039;images&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 text-nq-danger-text [&_svg]:text-current"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>Delete</div></div>
</template></div>
                                            <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger" class="group/entry min-w-0 outline-none transition-colors duration-150 ease-nq focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus cursor-pointer flex w-full flex-col items-stretch gap-2 rounded-card border border-border bg-card p-2 text-start hover:bg-nq-hover data-[selected]:border-nq-accent data-[selected]:bg-nq-selected" data-entry="data-entry" role="listitem" data-node-id="logo" tabindex="0" x-bind:style="{ order: rowOrder('logo') }" x-bind:hidden="inFolder('logo') ? null : ''" x-bind:data-selected="isPicked('logo') ? '' : null" x-bind:aria-selected="null" x-on:click="go('logo')" x-on:keydown.enter.self.prevent="go('logo')" x-on:keydown.space.self.prevent="go('logo')" hidden="hidden"><span class="flex aspect-[4/3] items-center justify-center overflow-hidden rounded-control bg-secondary">
                                                                    <svg aria-hidden="true" class="text-muted-foreground size-10 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/>
  <path d="M14 2v5a1 1 0 0 0 1 1h5"/>
  <circle cx="10" cy="12" r="2"/>
  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22"/>
</svg>                                                            </span>
                            <span class="flex min-w-0 flex-col">
                                <bdi dir="auto" class="truncate text-body-sm text-foreground">logo.svg</bdi>
                                <span class="truncate text-caption text-muted-foreground">
                                    <bdi dir="ltr">3.3 KB</bdi>                                </span>
                            </span></div>
        <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 min-w-44 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"><div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="download(&#039;logo&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 15V3"/>
  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
  <path d="m7 10 5 5 5-5"/>
</svg>Download</div>
                                        <div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                                        <div data-slot="context-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="askDelete(&#039;logo&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 text-nq-danger-text [&_svg]:text-current"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>Delete</div></div>
</template></div>
                                            <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger" class="group/entry min-w-0 outline-none transition-colors duration-150 ease-nq focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus cursor-pointer flex w-full flex-col items-stretch gap-2 rounded-card border border-border bg-card p-2 text-start hover:bg-nq-hover data-[selected]:border-nq-accent data-[selected]:bg-nq-selected" data-entry="data-entry" role="listitem" data-node-id="report" tabindex="0" x-bind:style="{ order: rowOrder('report') }" x-bind:hidden="inFolder('report') ? null : ''" x-bind:data-selected="isPicked('report') ? '' : null" x-bind:aria-selected="null" x-on:click="go('report')" x-on:keydown.enter.self.prevent="go('report')" x-on:keydown.space.self.prevent="go('report')"><span class="flex aspect-[4/3] items-center justify-center overflow-hidden rounded-control bg-secondary">
                                                                    <svg aria-hidden="true" class="text-muted-foreground size-10 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/>
  <path d="M14 2v5a1 1 0 0 0 1 1h5"/>
  <path d="M8 13h2"/>
  <path d="M14 13h2"/>
  <path d="M8 17h2"/>
  <path d="M14 17h2"/>
</svg>                                                            </span>
                            <span class="flex min-w-0 flex-col">
                                <bdi dir="auto" class="truncate text-body-sm text-foreground">report.xlsx</bdi>
                                <span class="truncate text-caption text-muted-foreground">
                                    <bdi dir="ltr">89.2 KB</bdi>                                </span>
                            </span></div>
        <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 min-w-44 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"><div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        x-on:click="download(&#039;report&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 15V3"/>
  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
  <path d="m7 10 5 5 5-5"/>
</svg>Download</div>
                                        <div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                                        <div data-slot="context-menu-item" role="menuitem" data-variant="danger" x-bind="item"
        x-on:click="askDelete(&#039;report&#039;)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 text-nq-danger-text [&_svg]:text-current"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>Delete</div></div>
</template></div>
                                    </div>
                    </div>
        <p class="text-caption text-muted-foreground" x-text="countText()">4 items</p>
    </div>
    <aside aria-label="Preview" class="min-w-0 rounded-card border border-border bg-card p-3 max-xl:col-span-full lg:max-xl:col-start-2">
        <p x-show="! pickedId"  class="px-2 py-6 text-center text-body-sm text-muted-foreground">Select a file to preview it</p>
                                                        <div data-slot="file-preview" data-node-id="brief" x-show="isPicked('brief')"  style="display: none"  class="flex flex-col gap-3">
                <div class="flex items-start justify-between gap-2">
                    <bdi dir="auto" class="min-w-0 break-words text-label text-foreground">brief.pdf</bdi>
                    <button type="button" aria-label="Close preview" x-on:click="pick(null)" class="inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-foreground outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus [&amp;_svg]:size-4"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                </div>
                <div class="flex min-h-32 items-center justify-center overflow-hidden rounded-control bg-secondary">
                                            <div class="flex flex-col items-center gap-2 p-6 text-center">
                            <svg aria-hidden="true" class="size-10 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/>
  <path d="M14 2v5a1 1 0 0 0 1 1h5"/>
  <path d="M10 9H8"/>
  <path d="M16 13H8"/>
  <path d="M16 17H8"/>
</svg>                            <span class="text-caption text-muted-foreground">No preview for this file type</span>
                        </div>
                                    </div>
                <dl class="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-body-sm">
                    <dt class="text-muted-foreground">Type</dt>
                    <dd>PDF document</dd>
                                            <dt class="text-muted-foreground">Size</dt>
                        <dd><bdi dir="ltr">470.7 KB</bdi></dd>
                                                                <dt class="text-muted-foreground">Modified</dt>
                        <dd><time data-slot="date-time" datetime="2026-09-20T10:00:00+00:00" dir="auto"     class="tabular-nums [unicode-bidi:isolate]">Sep 20, 2026, 10:00 AM</time>
</dd>
                                        <dt class="text-muted-foreground">Location</dt>
                    <dd class="min-w-0 break-words"><bdi dir="auto">All files / Documents</bdi></dd>
                </dl>
                                    <div class="flex flex-wrap gap-2">
                                                    <button data-slot="button"
     type="button"                         x-on:click="download(&#039;brief&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 15V3"/>
  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
  <path d="m7 10 5 5 5-5"/>
</svg>Download</button>
                                                                            <button data-slot="button"
     type="button"                         x-on:click="askDelete(&#039;brief&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-nq-hover h-control-sm px-2.5 text-nq-danger-text">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>Delete</button>
                                            </div>
                            </div>
                                <div data-slot="file-preview" data-node-id="notes" x-show="isPicked('notes')"  style="display: none"  class="flex flex-col gap-3">
                <div class="flex items-start justify-between gap-2">
                    <bdi dir="auto" class="min-w-0 break-words text-label text-foreground">notes.md</bdi>
                    <button type="button" aria-label="Close preview" x-on:click="pick(null)" class="inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-foreground outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus [&amp;_svg]:size-4"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                </div>
                <div class="flex min-h-32 items-center justify-center overflow-hidden rounded-control bg-secondary">
                                            <figure data-slot="code-block" data-language="md" dir="ltr" x-data="nqCodeBlock(JSON.parse('{\u0022code\u0022:\u0022# Launch notes\\n\\n- Ship the file explorer\\n- Write the docs\u0022,\u0022language\u0022:\u0022md\u0022}'))" x-bind:data-highlighted="highlighted ? '' : null"
    class="group/code relative m-0 overflow-hidden rounded-surface border border-border bg-nq-surface-soft text-start [--shiki-foreground:var(--nq-fg)] [--shiki-background:transparent] [--shiki-token-comment:var(--nq-fg-muted)] [--shiki-token-keyword:var(--nq-accent-text)] [--shiki-token-string:var(--nq-success-text)] [--shiki-token-string-expression:var(--nq-success-text)] [--shiki-token-constant:var(--nq-warning-text)] [--shiki-token-function:var(--nq-info-text)] [--shiki-token-parameter:var(--nq-fg-body)] [--shiki-token-punctuation:var(--nq-fg-muted)] [--shiki-token-link:var(--nq-info-text)] w-full">
            <figcaption data-slot="code-block-header" class="flex h-row items-center justify-between gap-2 border-b border-border ps-3 pe-1.5 font-mono text-caption text-muted-foreground">
            <span class="truncate">notes.md</span>
                            <span class="contents" x-data="nqCopyButton('# Launch notes\n\n- Ship the file explorer\n- Write the docs', 1500)">
    <button data-slot="copy-button"
     type="button"                         aria-label="Copy code" x-on:click="copy()" x-bind:data-copied="state === &#039;copied&#039; ? &#039;&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0 data-copied:text-nq-success-text">
        <svg aria-hidden="true" x-show="state !== 'copied'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
  <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
</svg>        <svg aria-hidden="true" x-show="state === 'copied'" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></button>
    <span data-slot="copy-button-status" role="status" aria-live="polite" class="sr-only"
        data-copied-label="Code copied to clipboard" data-failed-label="Could not copy"
        x-text="state === 'copied' ? $el.dataset.copiedLabel : state === 'failed' ? $el.dataset.failedLabel : ''"></span>
</span>
                    </figcaption>
        <pre data-slot="code-block-pre" role="region" tabindex="0" aria-label="notes.md"
        class="m-0 overflow-auto bg-transparent py-3 font-mono text-code text-[var(--shiki-foreground)] outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus max-h-64"><code class="block w-max min-w-full"><span data-line="1"  class="flex min-h-[1lh] border-s-2 border-transparent pe-4 whitespace-pre ps-3"><span data-code-line># Launch notes</span></span><span data-line="2"  class="flex min-h-[1lh] border-s-2 border-transparent pe-4 whitespace-pre ps-3"><span data-code-line></span></span><span data-line="3"  class="flex min-h-[1lh] border-s-2 border-transparent pe-4 whitespace-pre ps-3"><span data-code-line>- Ship the file explorer</span></span><span data-line="4"  class="flex min-h-[1lh] border-s-2 border-transparent pe-4 whitespace-pre ps-3"><span data-code-line>- Write the docs</span></span></code></pre>
</figure>
                                    </div>
                <dl class="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-body-sm">
                    <dt class="text-muted-foreground">Type</dt>
                    <dd>Text file</dd>
                                            <dt class="text-muted-foreground">Size</dt>
                        <dd><bdi dir="ltr">1.2 KB</bdi></dd>
                                                                <dt class="text-muted-foreground">Modified</dt>
                        <dd><time data-slot="date-time" datetime="2026-09-22T08:30:00+00:00" dir="auto"     class="tabular-nums [unicode-bidi:isolate]">Sep 22, 2026, 8:30 AM</time>
</dd>
                                        <dt class="text-muted-foreground">Location</dt>
                    <dd class="min-w-0 break-words"><bdi dir="auto">All files / Documents</bdi></dd>
                </dl>
                                    <div class="flex flex-wrap gap-2">
                                                    <button data-slot="button"
     type="button"                         x-on:click="download(&#039;notes&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 15V3"/>
  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
  <path d="m7 10 5 5 5-5"/>
</svg>Download</button>
                                                                            <button data-slot="button"
     type="button"                         x-on:click="askDelete(&#039;notes&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-nq-hover h-control-sm px-2.5 text-nq-danger-text">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>Delete</button>
                                            </div>
                            </div>
                                            <div data-slot="file-preview" data-node-id="logo" x-show="isPicked('logo')"  style="display: none"  class="flex flex-col gap-3">
                <div class="flex items-start justify-between gap-2">
                    <bdi dir="auto" class="min-w-0 break-words text-label text-foreground">logo.svg</bdi>
                    <button type="button" aria-label="Close preview" x-on:click="pick(null)" class="inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-foreground outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus [&amp;_svg]:size-4"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                </div>
                <div class="flex min-h-32 items-center justify-center overflow-hidden rounded-control bg-secondary">
                                            <div class="flex flex-col items-center gap-2 p-6 text-center">
                            <svg aria-hidden="true" class="size-10 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/>
  <path d="M14 2v5a1 1 0 0 0 1 1h5"/>
  <circle cx="10" cy="12" r="2"/>
  <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22"/>
</svg>                            <span class="text-caption text-muted-foreground">No preview for this file type</span>
                        </div>
                                    </div>
                <dl class="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-body-sm">
                    <dt class="text-muted-foreground">Type</dt>
                    <dd>Image</dd>
                                            <dt class="text-muted-foreground">Size</dt>
                        <dd><bdi dir="ltr">3.3 KB</bdi></dd>
                                                                <dt class="text-muted-foreground">Modified</dt>
                        <dd><time data-slot="date-time" datetime="2026-09-10T12:00:00+00:00" dir="auto"     class="tabular-nums [unicode-bidi:isolate]">Sep 10, 2026, 12:00 PM</time>
</dd>
                                        <dt class="text-muted-foreground">Location</dt>
                    <dd class="min-w-0 break-words"><bdi dir="auto">All files / Images</bdi></dd>
                </dl>
                                    <div class="flex flex-wrap gap-2">
                                                    <button data-slot="button"
     type="button"                         x-on:click="download(&#039;logo&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 15V3"/>
  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
  <path d="m7 10 5 5 5-5"/>
</svg>Download</button>
                                                                            <button data-slot="button"
     type="button"                         x-on:click="askDelete(&#039;logo&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-nq-hover h-control-sm px-2.5 text-nq-danger-text">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>Delete</button>
                                            </div>
                            </div>
                                <div data-slot="file-preview" data-node-id="report" x-show="isPicked('report')"  style="display: none"  class="flex flex-col gap-3">
                <div class="flex items-start justify-between gap-2">
                    <bdi dir="auto" class="min-w-0 break-words text-label text-foreground">report.xlsx</bdi>
                    <button type="button" aria-label="Close preview" x-on:click="pick(null)" class="inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-foreground outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus [&amp;_svg]:size-4"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                </div>
                <div class="flex min-h-32 items-center justify-center overflow-hidden rounded-control bg-secondary">
                                            <div class="flex flex-col items-center gap-2 p-6 text-center">
                            <svg aria-hidden="true" class="size-10 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/>
  <path d="M14 2v5a1 1 0 0 0 1 1h5"/>
  <path d="M8 13h2"/>
  <path d="M14 13h2"/>
  <path d="M8 17h2"/>
  <path d="M14 17h2"/>
</svg>                            <span class="text-caption text-muted-foreground">No preview for this file type</span>
                        </div>
                                    </div>
                <dl class="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-body-sm">
                    <dt class="text-muted-foreground">Type</dt>
                    <dd>Spreadsheet</dd>
                                            <dt class="text-muted-foreground">Size</dt>
                        <dd><bdi dir="ltr">89.2 KB</bdi></dd>
                                                                <dt class="text-muted-foreground">Modified</dt>
                        <dd><time data-slot="date-time" datetime="2026-09-27T14:15:00+00:00" dir="auto"     class="tabular-nums [unicode-bidi:isolate]">Sep 27, 2026, 2:15 PM</time>
</dd>
                                        <dt class="text-muted-foreground">Location</dt>
                    <dd class="min-w-0 break-words"><bdi dir="auto">All files</bdi></dd>
                </dl>
                                    <div class="flex flex-wrap gap-2">
                                                    <button data-slot="button"
     type="button"                         x-on:click="download(&#039;report&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 15V3"/>
  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
  <path d="m7 10 5 5 5-5"/>
</svg>Download</button>
                                                                            <button data-slot="button"
     type="button"                         x-on:click="askDelete(&#039;report&#039;)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-nq-hover h-control-sm px-2.5 text-nq-danger-text">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10 11v6"/>
  <path d="M14 11v6"/>
  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
  <path d="M3 6h18"/>
  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>Delete</button>
                                            </div>
                            </div>
            </aside>
            <div data-slot="dialog" x-data="nqDialog(false)" x-modelable="open" x-id="['nq-dialog']" x-model="newOpen" class="contents">
    <template x-teleport="body">
    <div data-slot="dialog-portal">
        <div data-slot="dialog-backdrop" x-nq-presence="open" x-on:click="close()" class="fixed inset-0 z-50 bg-nq-fg/15 dark:bg-nq-bg/60 transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"></div>
        <div data-slot="dialog-content" x-bind="popup" x-nq-presence="open" x-trap.noscroll="open"
            class="fixed inset-0 z-50 m-auto grid h-fit w-[calc(100%-2rem)] max-w-lg gap-4 rounded-floating border border-border bg-popover p-6 text-popover-foreground outline-none max-h-[calc(100dvh-2rem)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0">
            <form class="grid gap-4" novalidate x-on:submit.prevent="submitNew()">
                    <div data-slot="dialog-header" class="flex flex-col gap-1.5 pe-8 text-start"><h2 data-slot="dialog-title" :id="$id('nq-dialog', 'title')" class="text-h3 text-foreground">New folder</h2>
                        <p data-slot="dialog-description" :id="$id('nq-dialog', 'description')" class="text-body-sm text-muted-foreground">Created inside the current folder.</p></div>
                    <div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     x-model="newInvalid" class="flex flex-col gap-1.5">
    <label data-slot="field-label"  class="text-label text-foreground data-disabled:opacity-50">Folder name</label>
                        <input data-slot="input" type="text"
                    x-model="newName" x-on:input="syncNew()" x-on:blur="touchNew()" autocomplete="off" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control">
                        <div data-slot="field-error" role="alert" x-show="invalid"  style="display: none"  class="text-caption text-nq-danger-text"><span x-text="newText"></span></div>
</div>
                    <div x-show="newFail" style="display: none" data-slot="file-explorer-new-error">
                        <div data-slot="alert" data-tone="danger" role="alert"
        class="relative grid grid-cols-[auto_1fr_auto] items-start gap-x-3 rounded-card border p-3 text-start border-nq-danger/30 bg-nq-danger-soft">
    <svg aria-hidden="true" data-slot="alert-icon" class="mt-0.5 size-4 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="m15 9-6 6"/>
  <path d="m9 9 6 6"/>
</svg>    <div data-slot="alert-body" class="flex min-w-0 flex-col gap-0.5">
                            <div data-slot="alert-description" class="text-body-sm text-foreground"><span x-text="newFail"></span></div>
            </div>
    </div>
                    </div>
                    <div data-slot="dialog-footer" class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"><button data-slot="dialog-close"
     type="button"                         x-on:click="close()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-control px-[var(--nq-control-pad)]">
        Cancel</button>
                        <button data-slot="button"
     type="submit"                         x-bind:aria-busy="newBusy ? &#039;true&#039; : null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control px-[var(--nq-control-pad)]">
        Create</button></div>
                </form>
                            <button type="button" data-slot="dialog-close" x-on:click="close()" aria-label="Close"
                    class="absolute end-3 top-3 inline-flex size-8 items-center justify-center rounded-control text-muted-foreground transition-colors duration-150 hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus [&_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                    </div>
    </div>
</template>
</div>
            <div data-slot="alert-dialog" x-data="nqAlertDialog(false)" x-modelable="open" x-id="['nq-alert-dialog']" x-model="delOpen" class="contents">
    <template x-teleport="body">
    <div data-slot="alert-dialog-portal">
        <div data-slot="alert-dialog-backdrop" x-nq-presence="open" class="fixed inset-0 z-50 bg-nq-fg/15 dark:bg-nq-bg/60 transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"></div>
        <div data-slot="alert-dialog-content" x-bind="popup" x-nq-presence="open" x-trap.noscroll="open"
            class="fixed inset-0 z-50 m-auto grid h-fit w-[calc(100%-2rem)] max-w-md gap-4 rounded-floating border border-border bg-popover p-6 text-popover-foreground outline-none max-h-[calc(100dvh-2rem)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0">
            <div data-slot="alert-dialog-header" class="flex flex-col gap-1.5 text-start"><h2 data-slot="alert-dialog-title" :id="$id('nq-alert-dialog', 'title')" class="text-h3 text-foreground"><bdi dir="auto" x-text="delTitle"></bdi></h2>
                    <p data-slot="alert-dialog-description" :id="$id('nq-alert-dialog', 'description')" class="text-body-sm text-muted-foreground"><span x-text="delBody"></span></p></div>
                <div data-slot="alert-dialog-footer" class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"><button data-slot="alert-dialog-cancel"
     type="button"                         autofocus="autofocus" x-on:click="close()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-control px-[var(--nq-control-pad)]">
        Cancel</button>
                    <button data-slot="alert-dialog-action"
     type="button"                         x-on:click.capture="close()" x-on:click="confirmDelete()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-destructive text-destructive-foreground hover:bg-[color-mix(in_oklab,var(--nq-danger-solid)_88%,var(--nq-fg))] h-control px-[var(--nq-control-pad)]">
        Delete</button></div>
        </div>
    </div>
</template>
</div>
    </section>
```