@stacksjs/defaults 0.70.207 → 0.70.208

package/views/dashboard/content/files/index.stx

@@ -0,0 +1,706 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - File Manager')
+<script server>
+// Seed the grid from a real Storage disk (stacksjs/stacks#245). Defaults to the
+// `public` disk, which carries real media + public URLs so image/video previews
+// render. Best-effort: any failure leaves the payload empty and the client
+// script falls back to the built-in demo tree below.
+let serverFileTreeJson = ''
+try {
+  const { buildStorageFileTree } = await import('../../../../resources/functions/dashboard/files-tree')
+  const tree = await buildStorageFileTree({ disk: 'public' })
+  if (tree)
+    serverFileTreeJson = JSON.stringify(tree)
+}
+catch {}
+</script>
+<div class="flex flex-col h-full">
+  <div data-file-tree hidden>{{ serverFileTreeJson }}</div>
+  <div class="flex flex-1">
+    <div :class="sidePanelClass()">
+      <div :show="showSidePanel" class="flex flex-col h-full">
+        <div class="p-4 border-b border-black/5 dark:border-white/10">
+          <h3 class="font-semibold text-sm text-stone-500 tracking-wider uppercase dark:text-neutral-400">Storage</h3>
+          <div class="mt-2" style="height: 120px;"><canvas id="files_storage_chart"></canvas></div>
+          <div class="mt-2 text-stone-500 text-xs dark:text-neutral-400">
+            <div class="flex justify-between py-0.5"><span>Used</span><span>{{ usedLabel }}</span></div>
+            <div class="flex justify-between py-0.5"><span>Available</span><span>{{ availableLabel }}</span></div>
+            <div class="flex justify-between py-0.5 font-medium text-stone-700 dark:text-neutral-300"><span>Total</span><span>{{ totalLabel }}</span></div>
+          </div>
+        </div>
+
+        <div class="p-4 border-b border-black/5 dark:border-white/10">
+          <h3 class="font-semibold text-sm text-stone-500 tracking-wider uppercase dark:text-neutral-400">Storage by Type</h3>
+          <div class="mt-2" style="height: 120px;"><canvas id="files_type_chart"></canvas></div>
+          <div class="mt-2 text-stone-500 text-xs dark:text-neutral-400">
+            <div class="flex justify-between py-0.5"><span>Documents</span><span>{{ docsLabel }}</span></div>
+            <div class="flex justify-between py-0.5"><span>Images</span><span>{{ imgsLabel }}</span></div>
+            <div class="flex justify-between py-0.5"><span>Videos</span><span>{{ videosLabel }}</span></div>
+            <div class="flex justify-between py-0.5"><span>Other</span><span>{{ otherLabel }}</span></div>
+          </div>
+        </div>
+
+        <nav class="overflow-y-auto flex-1 px-2 py-2">
+          <div class="space-y-px">
+            <button @click="navigateToRoot()" :class="navRowClass(currentFolderId() === root().id)">
+              <div class="h-[18px] w-[18px] text-blue-500 i-hugeicons-home-02"></div>
+              Home
+            </button>
+            <button :class="navRowClass(false)">
+              <div class="h-[18px] w-[18px] text-amber-400 i-hugeicons-star"></div>
+              Starred
+              <span class="ml-auto tabular-nums text-[12px] text-stone-400 dark:text-neutral-500">{{ starredCount }}</span>
+            </button>
+            <button :class="navRowClass(false)">
+              <div class="h-[18px] w-[18px] text-emerald-500 i-hugeicons-share-01"></div>
+              Shared
+              <span class="ml-auto tabular-nums text-[12px] text-stone-400 dark:text-neutral-500">{{ sharedCount }}</span>
+            </button>
+          </div>
+          <div class="mt-5">
+            <h3 class="mb-1 px-2.5 font-semibold text-[11px] text-stone-400 dark:text-neutral-500">Folders</h3>
+            <div class="space-y-px">
+              <template :for="folder in topLevelFolders">
+                <button @click="navigateToFolder(folder)" :class="navRowClass(currentFolderId() === folder.id)">
+                  <div class="h-[18px] w-[18px] text-amber-400 i-hugeicons-folder-02"></div>
+                  {{ folder.name }}
+                  <span class="ml-auto tabular-nums text-[12px] text-stone-400 dark:text-neutral-500">{{ (folder.items ?? []).length }}</span>
+                </button>
+              </template>
+            </div>
+          </div>
+        </nav>
+
+        <div class="p-3 border-black/5 border-t dark:border-white/10">
+          <button @click="openUploadModal()" class="flex gap-2 items-center justify-center px-4 py-2 w-full font-medium text-[13px] text-white bg-blue-500 hover:bg-blue-600 rounded-lg shadow-sm">
+            <div class="mr-2 h-5 w-5 i-hugeicons-upload-01"></div>
+            Upload Files
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-1 flex-col bg-white dark:bg-neutral-900">
+      <div class="p-4 bg-white/70 dark:bg-neutral-900/50 border-b border-black/5 dark:border-white/10 backdrop-blur-xl">
+        <div class="flex items-center justify-between">
+          <button @click="toggleSidePanel()" class="p-2 text-gray-500 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-700 rounded-md">
+            <div class="h-5 w-5 i-hugeicons-menu-01"></div>
+          </button>
+
+          <div class="ml-4 max-w-lg w-full lg:max-w-xs">
+            <div class="relative">
+              <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                <div class="h-5 w-5 text-gray-400 i-hugeicons-search-01"></div>
+              </div>
+              <input x-model="searchQuery" type="search" placeholder="Search files and folders..." class="block placeholder-gray-500 dark:placeholder-gray-400 pl-10 pr-3 py-2 w-full leading-5 text-gray-900 sm:text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:outline-none focus:ring-blue-500" />
+            </div>
+          </div>
+
+          <div class="flex items-center space-x-2">
+            <div class="flex gap-0.5 p-0.5 bg-black/[0.05] dark:bg-white/[0.06] rounded-lg">
+              <button @click="setViewMode('grid')" :class="gridViewClass()">
+                <div class="h-5 w-5 i-hugeicons-grid-view"></div>
+              </button>
+              <button @click="setViewMode('list')" :class="listViewClass()">
+                <div class="h-5 w-5 i-hugeicons-right-to-left-list-number"></div>
+              </button>
+            </div>
+
+            <select x-model="sortBy" class="block pl-3 pr-10 py-2 w-full text-base text-gray-900 sm:text-sm dark:text-white bg-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:outline-none focus:ring-blue-500">
+              <option value="name">Name</option>
+              <option value="lastModified">Date</option>
+              <option value="size">Size</option>
+            </select>
+
+            <button @click="toggleSortOrder()" class="p-2 text-gray-500 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-700 rounded-md">
+              <div :class="sortOrderIconClass()"></div>
+            </button>
+          </div>
+
+          <div class="flex items-center space-x-2">
+            <button @click="openCreateFolderModal()" class="inline-flex items-center px-3 py-2 font-medium text-sm text-white bg-indigo-600 hover:bg-indigo-700 rounded-md">
+              <div class="mr-2 h-4 w-4 i-hugeicons-folder-add"></div>
+              New Folder
+            </button>
+            <button @click="openUploadModal()" class="inline-flex items-center px-3 py-2 font-medium text-sm text-white bg-indigo-600 hover:bg-indigo-700 rounded-md">
+              <div class="mr-2 h-4 w-4 i-hugeicons-upload-01"></div>
+              Upload
+            </button>
+          </div>
+        </div>
+
+        <nav class="flex mt-4">
+          <ol class="flex items-center space-x-1">
+            <template :for="(path, index) in currentPath">
+              <li>
+                <div class="flex items-center">
+                  <span :show="index > 0" class="mx-1 text-gray-400 dark:text-neutral-500">/</span>
+                  <button @click="navigateToPath(index)" class="font-medium text-gray-500 text-sm dark:text-neutral-400 hover:text-gray-700 dark:hover:text-gray-300">{{ path }}</button>
+                </div>
+              </li>
+            </template>
+          </ol>
+        </nav>
+      </div>
+
+      <div class="overflow-auto flex-1 p-4 bg-stone-50/50 dark:bg-neutral-900">
+        <div :show="filteredItems().length === 0" class="flex flex-col items-center justify-center h-full text-center">
+          <div class="h-16 w-16 text-gray-400 dark:text-neutral-600 i-hugeicons-folder-02"></div>
+          <h3 class="mt-2 font-medium text-gray-900 text-sm dark:text-white">No items</h3>
+          <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">{{ emptyHint }}</p>
+        </div>
+
+        <div :show="filteredItems().length > 0 && viewMode() === 'grid'" class="grid gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
+          <template :for="item in filteredItems">
+            <div @click="onItemClick(item)" :class="gridCardClass(item)">
+              <MediaCard :item="item" />
+              <div class="flex absolute right-2 top-2 space-x-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                <button @click="onStarClick(item, $event)" :class="gridStarButtonClass(item)">
+                  <div class="h-4 w-4 i-hugeicons-star"></div>
+                </button>
+                <button @click="onShareClick(item, $event)" :class="gridShareButtonClass(item)">
+                  <div class="h-4 w-4 i-hugeicons-share-01"></div>
+                </button>
+              </div>
+            </div>
+          </template>
+        </div>
+
+        <div :show="filteredItems().length > 0 && viewMode() === 'list'" class="overflow-hidden ring-1 ring-stone-200/80 rounded-xl dark:ring-neutral-700 shadow-sm">
+          <table class="min-w-full divide-stone-100 divide-y dark:divide-neutral-700">
+            <thead class="bg-stone-50/80 dark:bg-neutral-800">
+              <tr>
+                <th class="pl-6 pr-3 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Name</th>
+                <th class="px-3 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Size</th>
+                <th class="px-3 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Modified</th>
+                <th class="relative pl-3 pr-6 py-3.5"><span class="sr-only">Actions</span></th>
+              </tr>
+            </thead>
+            <tbody class="bg-white dark:bg-neutral-800 divide-stone-100 divide-y dark:divide-neutral-700">
+              <template :for="item in filteredItems">
+                <tr @click="onItemClick(item)" class="hover:bg-stone-50/50 dark:hover:bg-neutral-700/50 transition-colors cursor-pointer">
+                  <td class="pl-6 pr-3 py-3.5 text-sm whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div :class="rowIconClass(item)"></div>
+                      <div class="font-medium text-stone-800 dark:text-white">{{ item.name }}</div>
+                    </div>
+                  </td>
+                  <td class="px-3 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-400">{{ item.type === 'folder' ? '-' : formatFileSize(item.size ?? 0) }}</td>
+                  <td class="px-3 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-400">{{ formatDate(item.lastModified) }}</td>
+                  <td class="relative pl-3 pr-6 py-3.5 font-medium text-right text-sm whitespace-nowrap">
+                    <div class="flex justify-end space-x-2">
+                      <button @click="onStarClick(item, $event)" :class="starButtonClass(item)"><div class="h-5 w-5 i-hugeicons-star"></div></button>
+                      <button @click="onShareClick(item, $event)" :class="shareButtonClass(item)"><div class="h-5 w-5 i-hugeicons-share-01"></div></button>
+                      <button @click="onDeleteClick(item, $event)" class="text-gray-400 hover:text-red-500"><div class="h-5 w-5 i-hugeicons-waste"></div></button>
+                    </div>
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Meema-style file info / preview slide-over -->
+  <div :show="showInfoPanel" class="fixed inset-0 z-20">
+    <div class="absolute inset-0 bg-gray-900/40 dark:bg-black/50" @click="closeInfoPanel()"></div>
+    <aside class="flex absolute inset-y-0 right-0 flex-col max-w-sm w-full bg-white/80 dark:bg-neutral-900/70 border-black/5 border-l dark:border-white/10 shadow-xl backdrop-blur-2xl">
+      <div class="flex items-center justify-between p-4 border-b border-black/5 dark:border-white/10">
+        <h3 class="font-semibold text-sm text-stone-500 tracking-wider uppercase dark:text-neutral-400">Details</h3>
+        <button @click="closeInfoPanel()" class="p-1.5 text-gray-400 dark:text-neutral-500 hover:text-gray-600 dark:hover:text-neutral-300 hover:bg-gray-100 dark:hover:bg-neutral-700 rounded-md">
+          <div class="h-5 w-5 i-hugeicons-cancel-01"></div>
+        </button>
+      </div>
+      <div class="overflow-auto flex-1 p-5">
+        <MediaInfoPanel :item="selectedItem()" />
+      </div>
+    </aside>
+  </div>
+
+  <div :show="showCreateFolderModal" class="fixed inset-0 overflow-y-auto z-10">
+    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 dark:bg-neutral-900 dark:bg-opacity-75" @click="closeCreateFolderModal()"></div>
+    <div class="flex sm:block items-end justify-center pb-20 pt-4 px-4 sm:p-0 min-h-screen text-center">
+      <span class="hidden sm:inline-block sm:h-screen sm:align-middle">&#8203;</span>
+      <div class="inline-block overflow-hidden pb-4 pt-5 px-4 sm:my-8 sm:p-6 sm:max-w-lg sm:w-full text-left bg-white dark:bg-neutral-800 rounded-lg shadow-xl align-bottom sm:align-middle">
+        <h3 class="font-medium leading-6 text-gray-900 text-lg dark:text-white">Create New Folder</h3>
+        <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">Enter a name for the new folder.</p>
+        <input x-model="newFolderName" type="text" placeholder="Folder name" class="block mt-4 w-full sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-indigo-500 focus:ring-indigo-500 shadow-sm" />
+        <div class="sm:flex sm:flex-row-reverse mt-5">
+          <button type="button" @click="createNewFolder()" class="inline-flex justify-center px-4 py-2 sm:ml-3 w-full sm:w-auto font-medium text-base text-white sm:text-sm bg-indigo-600 hover:bg-indigo-700 rounded-md shadow-sm">Create</button>
+          <button type="button" @click="closeCreateFolderModal()" class="inline-flex justify-center mt-3 px-4 py-2 sm:mt-0 w-full sm:w-auto font-medium text-base text-gray-700 sm:text-sm dark:text-neutral-200 bg-white dark:bg-neutral-700 hover:bg-gray-50 dark:hover:bg-neutral-600 border border-gray-300 rounded-md dark:border-neutral-600 shadow-sm">Cancel</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div :show="showUploadModal" class="fixed inset-0 overflow-y-auto z-10">
+    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 dark:bg-neutral-900 dark:bg-opacity-75" @click="closeUploadModal()"></div>
+    <div class="flex sm:block items-end justify-center pb-20 pt-4 px-4 sm:p-0 min-h-screen text-center">
+      <span class="hidden sm:inline-block sm:h-screen sm:align-middle">&#8203;</span>
+      <div class="inline-block overflow-hidden pb-4 pt-5 px-4 sm:my-8 sm:p-6 sm:max-w-lg sm:w-full text-left bg-white dark:bg-neutral-800 rounded-lg shadow-xl align-bottom sm:align-middle">
+        <h3 class="font-medium leading-6 text-gray-900 text-lg dark:text-white">Upload Files</h3>
+        <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">Select files to upload to the current folder.</p>
+        <div class="flex justify-center mt-4 pb-6 pt-5 px-6 border-2 border-dashed border-gray-300 rounded-md dark:border-neutral-600">
+          <div class="space-y-1 text-center">
+            <div class="mx-auto h-12 w-12 text-gray-400 dark:text-neutral-500 i-hugeicons-upload-01"></div>
+            <div class="flex text-gray-600 text-sm dark:text-neutral-400">
+              <label for="file-upload" class="relative font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 bg-white dark:bg-neutral-800 rounded-md cursor-pointer">
+                <span>Upload a file</span>
+                <input id="file-upload" type="file" class="sr-only" multiple />
+              </label>
+              <p class="pl-1">or drag and drop</p>
+            </div>
+            <p class="text-gray-500 text-xs dark:text-neutral-400">PNG, JPG, GIF, PDF, DOCX up to 10MB</p>
+          </div>
+        </div>
+        <div class="sm:flex sm:flex-row-reverse mt-5">
+          <button type="button" class="inline-flex justify-center px-4 py-2 sm:ml-3 w-full sm:w-auto font-medium text-base text-white sm:text-sm bg-indigo-600 hover:bg-indigo-700 rounded-md shadow-sm">Upload</button>
+          <button type="button" @click="closeUploadModal()" class="inline-flex justify-center mt-3 px-4 py-2 sm:mt-0 w-full sm:w-auto font-medium text-base text-gray-700 sm:text-sm dark:text-neutral-200 bg-white dark:bg-neutral-700 hover:bg-gray-50 dark:hover:bg-neutral-600 border border-gray-300 rounded-md dark:border-neutral-600 shadow-sm">Cancel</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div :show="showDeleteConfirmation" class="fixed inset-0 overflow-y-auto z-10">
+    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 dark:bg-neutral-900 dark:bg-opacity-75" @click="closeDeleteConfirmation()"></div>
+    <div class="flex sm:block items-end justify-center pb-20 pt-4 px-4 sm:p-0 min-h-screen text-center">
+      <span class="hidden sm:inline-block sm:h-screen sm:align-middle">&#8203;</span>
+      <div class="inline-block overflow-hidden pb-4 pt-5 px-4 sm:my-8 sm:p-6 sm:max-w-lg sm:w-full text-left bg-white dark:bg-neutral-800 rounded-lg shadow-xl align-bottom sm:align-middle">
+        <h3 class="font-medium leading-6 text-gray-900 text-lg dark:text-white">Delete Item</h3>
+        <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">Are you sure you want to delete this item? This action cannot be undone.</p>
+        <div class="sm:flex sm:flex-row-reverse mt-5">
+          <button type="button" @click="deleteSelectedItems()" class="inline-flex justify-center px-4 py-2 sm:ml-3 w-full sm:w-auto font-medium text-base text-white sm:text-sm bg-red-600 hover:bg-red-700 rounded-md shadow-sm">Delete</button>
+          <button type="button" @click="closeDeleteConfirmation()" class="inline-flex justify-center mt-3 px-4 py-2 sm:mt-0 w-full sm:w-auto font-medium text-base text-gray-700 sm:text-sm dark:text-neutral-200 bg-white dark:bg-neutral-700 hover:bg-gray-50 dark:hover:bg-neutral-600 border border-gray-300 rounded-md dark:border-neutral-600 shadow-sm">Cancel</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script client>
+
+interface FileItem {
+  id: number
+  name: string
+  type: string
+  size?: number
+  path: string
+  lastModified: string
+  starred: boolean
+  shared: boolean
+  // Present on real Storage-backed items (#245) so MediaCard can render true
+  // previews; absent on the demo tree.
+  mime_type?: string
+  url?: string
+  items?: FileItem[]
+}
+
+interface ChartLike { destroy: () => void }
+type ChartCtor = new (canvas: HTMLElement, config: { type: string, data: unknown, options?: unknown }) => ChartLike
+
+const fileTypeIcons: Record<string, string> = {
+  pdf: 'i-hugeicons-pdf-01', doc: 'i-hugeicons-doc-01', docx: 'i-hugeicons-doc-01',
+  xls: 'i-hugeicons-xls-01', xlsx: 'i-hugeicons-xls-01',
+  ppt: 'i-hugeicons-ppt-01', pptx: 'i-hugeicons-ppt-01',
+  jpg: 'i-hugeicons-jpg-01', jpeg: 'i-hugeicons-jpg-01',
+  png: 'i-hugeicons-png-01', gif: 'i-hugeicons-gif-01', svg: 'i-hugeicons-svg-01',
+  txt: 'i-hugeicons-txt-01', zip: 'i-hugeicons-zip-01',
+  mp3: 'i-hugeicons-mp3-01', mp4: 'i-hugeicons-mp-4-01',
+  folder: 'i-hugeicons-folder-02', default: 'i-hugeicons-file-02',
+}
+
+const rootFolder: FileItem = {
+  id: 1,
+  name: 'Root',
+  type: 'folder',
+  path: '/',
+  lastModified: '2023-12-01T10:00:00',
+  starred: false,
+  shared: false,
+  items: [
+    { id: 2, name: 'Documents', type: 'folder', path: '/Documents', lastModified: '2023-12-01T10:00:00', starred: true, shared: true, items: [
+      { id: 6, name: 'Project Proposal.pdf', type: 'pdf', size: 2500000, path: '/Documents/Project Proposal.pdf', lastModified: '2023-12-05T14:30:00', starred: true, shared: true },
+      { id: 7, name: 'Meeting Notes.docx', type: 'docx', size: 350000, path: '/Documents/Meeting Notes.docx', lastModified: '2023-12-10T09:15:00', starred: false, shared: false },
+      { id: 8, name: 'Budget.xlsx', type: 'xlsx', size: 1200000, path: '/Documents/Budget.xlsx', lastModified: '2023-12-08T16:45:00', starred: false, shared: true },
+    ] },
+    { id: 3, name: 'Images', type: 'folder', path: '/Images', lastModified: '2023-12-02T11:30:00', starred: false, shared: false, items: [
+      { id: 9, name: 'Profile Photo.jpg', type: 'jpg', size: 1800000, path: '/Images/Profile Photo.jpg', lastModified: '2023-12-03T13:20:00', starred: true, shared: false },
+      { id: 10, name: 'Banner.png', type: 'png', size: 2700000, path: '/Images/Banner.png', lastModified: '2023-12-04T10:10:00', starred: false, shared: true },
+      { id: 11, name: 'Icon.svg', type: 'svg', size: 150000, path: '/Images/Icon.svg', lastModified: '2023-12-05T09:05:00', starred: false, shared: false },
+    ] },
+    { id: 4, name: 'Videos', type: 'folder', path: '/Videos', lastModified: '2023-12-03T14:00:00', starred: false, shared: false, items: [
+      { id: 12, name: 'Product Demo.mp4', type: 'mp4', size: 15000000, path: '/Videos/Product Demo.mp4', lastModified: '2023-12-06T15:30:00', starred: false, shared: true },
+      { id: 13, name: 'Tutorial.mp4', type: 'mp4', size: 25000000, path: '/Videos/Tutorial.mp4', lastModified: '2023-12-07T11:45:00', starred: true, shared: true },
+    ] },
+    { id: 5, name: 'Downloads', type: 'folder', path: '/Downloads', lastModified: '2023-12-04T09:00:00', starred: false, shared: false, items: [
+      { id: 14, name: 'Software Update.zip', type: 'zip', size: 45000000, path: '/Downloads/Software Update.zip', lastModified: '2023-12-08T10:20:00', starred: false, shared: false },
+      { id: 15, name: 'E-book.pdf', type: 'pdf', size: 3500000, path: '/Downloads/E-book.pdf', lastModified: '2023-12-09T14:10:00', starred: true, shared: false },
+    ] },
+  ],
+}
+
+// Prefer the server-injected real Storage tree (stacksjs/stacks#245); fall back
+// to the demo tree above when it's absent (empty disk, listing failed, or the
+// server block couldn't resolve). The payload is HTML-escaped JSON in a hidden
+// element — same server->client hand-off the dashboard sidebar uses.
+function readInjectedFileTree(): FileItem | null {
+  try {
+    const node = document.querySelector('[data-file-tree]')
+    const raw = node?.textContent?.trim()
+    if (!raw)
+      return null
+    const parsed = JSON.parse(raw)
+    return parsed && Array.isArray(parsed.items) && parsed.items.length > 0 ? parsed as FileItem : null
+  }
+  catch {
+    return null
+  }
+}
+
+const initialRoot = readInjectedFileTree() ?? rootFolder
+const root = state<FileItem>(initialRoot)
+const currentFolderId = state<number>(initialRoot.id)
+const searchQuery = state('')
+const sortBy = state<'name' | 'lastModified' | 'size'>('name')
+const sortOrder = state<'asc' | 'desc'>('asc')
+const viewMode = state<'grid' | 'list'>('grid')
+const showSidePanel = state(true)
+const showUploadModal = state(false)
+const showCreateFolderModal = state(false)
+const showDeleteConfirmation = state(false)
+const newFolderName = state('')
+const itemToDelete = state<FileItem | null>(null)
+// Selected file for the Meema-style info/preview panel. Defaults to a neutral
+// placeholder (never null) so the panel component always receives a valid item
+// even while hidden; onItemClick swaps in the real file.
+const selectedItem = state<FileItem>({ id: 0, name: '', type: 'file', path: '/', lastModified: '', starred: false } as FileItem)
+const showInfoPanel = state(false)
+
+const storageStats = { total: 100 * 1024 ** 3, used: 45 * 1024 ** 3, available: 55 * 1024 ** 3 }
+const storageByType = { documents: 15 * 1024 ** 3, images: 10 * 1024 ** 3, videos: 18 * 1024 ** 3, other: 2 * 1024 ** 3 }
+
+function findFolderById(folder: FileItem, id: number): FileItem | null {
+  if (folder.id === id)
+    return folder
+  for (const child of folder.items ?? []) {
+    if (child.type === 'folder') {
+      const found = findFolderById(child, id)
+      if (found)
+        return found
+    }
+  }
+  return null
+}
+
+function findPathToId(folder: FileItem, id: number, path: string[] = []): string[] | null {
+  const next = [...path, folder.name]
+  if (folder.id === id)
+    return next
+  for (const child of folder.items ?? []) {
+    if (child.type === 'folder') {
+      const found = findPathToId(child, id, next)
+      if (found)
+        return found
+    }
+  }
+  return null
+}
+
+const currentFolder = derived(() => findFolderById(root(), currentFolderId()) ?? root())
+const currentPath = derived(() => findPathToId(root(), currentFolderId()) ?? ['Root'])
+
+const filteredItems = derived(() => {
+  let items = [...(currentFolder().items ?? [])]
+  const q = searchQuery().toLowerCase()
+  if (q)
+    items = items.filter(item => item.name.toLowerCase().includes(q))
+  items.sort((a, b) => {
+    if (sortBy() === 'name')
+      return sortOrder() === 'asc' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name)
+    if (sortBy() === 'lastModified')
+      return sortOrder() === 'asc' ? new Date(a.lastModified).getTime() - new Date(b.lastModified).getTime() : new Date(b.lastModified).getTime() - new Date(a.lastModified).getTime()
+    const sa = a.size ?? 0
+    const sb = b.size ?? 0
+    return sortOrder() === 'asc' ? sa - sb : sb - sa
+  })
+  return items
+})
+
+function countByPredicate(folder: FileItem, predicate: (item: FileItem) => boolean): number {
+  let count = 0
+  for (const item of folder.items ?? []) {
+    if (predicate(item))
+      count++
+    if (item.type === 'folder')
+      count += countByPredicate(item, predicate)
+  }
+  return count
+}
+
+const starredCount = derived(() => countByPredicate(root(), i => i.starred))
+const sharedCount = derived(() => countByPredicate(root(), i => i.shared))
+const topLevelFolders = derived(() => (root().items ?? []).filter(i => i.type === 'folder'))
+
+// Each derived/function below returns a COMPLETE class string (static + dynamic)
+// because stx's `{{ ... }}` placeholder is not reactively bound inside a `class`
+// attribute — only inside text content. The `:class="fn()"` directive is the
+// supported reactive form, so any class that mixes static and dynamic tokens
+// has to be assembled in JS and applied via :class.
+// Native macOS sidebar vibrancy: a translucent material over the window
+// background rather than a flat fill, matching the desktop shell's macos-themed
+// global sidebar (titlebarHidden window). stacksjs — native File Manager.
+const sidePanelBase = 'border-r border-black/[0.06] dark:border-white/[0.08] bg-[#F5F3EE]/70 dark:bg-neutral-900/40 backdrop-blur-2xl transition-all duration-300'
+const sidePanelClass = derived(() => `${sidePanelBase} ${showSidePanel() ? 'w-64' : 'w-0 overflow-hidden'}`)
+
+const sortOrderIconClass = derived(() => `${sortOrder() === 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02'} h-5 w-5`)
+
+// Native macOS segmented control: the active segment is an elevated white pill
+// on a recessed track (see the track container in the toolbar), not a filled
+// accent button.
+const segmentBase = 'inline-flex items-center px-2.5 py-1.5 rounded-md text-sm font-medium transition-colors'
+const segmentActive = 'bg-white dark:bg-neutral-700 text-stone-800 dark:text-white shadow-sm'
+const segmentInactive = 'text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200'
+const gridViewClass = derived(() => `${segmentBase} ${viewMode() === 'grid' ? segmentActive : segmentInactive}`)
+const listViewClass = derived(() => `${segmentBase} ${viewMode() === 'list' ? segmentActive : segmentInactive}`)
+
+// Native macOS source-list row: a rounded selection pill on the active row
+// (light translucent fill), colored SF-style icons, plain trailing counts.
+const navRowBase = 'group flex items-center gap-2.5 px-2.5 py-1.5 w-full text-left font-medium text-[13px] rounded-lg transition-colors'
+function navRowClass(active: boolean): string {
+  return active
+    ? `${navRowBase} bg-black/[0.06] dark:bg-white/[0.09] text-stone-900 dark:text-white`
+    : `${navRowBase} text-stone-600 dark:text-neutral-300 hover:bg-black/[0.04] dark:hover:bg-white/[0.06]`
+}
+
+// Native selection: the open file gets a Finder-style accent ring, updated
+// reactively as the info panel opens/closes on different items.
+const gridCardBase = 'group relative overflow-hidden rounded-lg border shadow-sm hover:shadow-lg duration-200 transition-all cursor-pointer bg-white dark:bg-neutral-800'
+const gridCardClass = (item: FileItem) => `${gridCardBase} ${showInfoPanel() && selectedItem().id === item.id
+  ? 'border-indigo-400 dark:border-indigo-500 ring-2 ring-indigo-500/30'
+  : 'border-gray-200 dark:border-neutral-700 hover:border-indigo-300 dark:hover:border-indigo-500/50'}`
+
+const rowIconClass = (item: FileItem) => `${itemIconClass(item)} h-5 w-5 mr-3`
+const gridStarButtonClass = (item: FileItem) => `p-1 hover:bg-gray-100 dark:hover:bg-neutral-700 rounded-full ${starButtonClass(item)}`
+const gridShareButtonClass = (item: FileItem) => `p-1 hover:bg-gray-100 dark:hover:bg-neutral-700 rounded-full ${shareButtonClass(item)}`
+
+const usedLabel = derived(() => formatFileSize(storageStats.used))
+const availableLabel = derived(() => formatFileSize(storageStats.available))
+const totalLabel = derived(() => formatFileSize(storageStats.total))
+const docsLabel = derived(() => formatFileSize(storageByType.documents))
+const imgsLabel = derived(() => formatFileSize(storageByType.images))
+const videosLabel = derived(() => formatFileSize(storageByType.videos))
+const otherLabel = derived(() => formatFileSize(storageByType.other))
+
+const emptyHint = derived(() => searchQuery() ? 'No items match your search.' : 'This folder is empty.')
+
+function formatFileSize(bytes: number) {
+  if (bytes === 0)
+    return '0 Bytes'
+  const k = 1024
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`
+}
+
+function formatDate(dateString: string) {
+  return new Date(dateString).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })
+}
+
+function getFileIcon(type: string) {
+  return fileTypeIcons[type] ?? fileTypeIcons.default
+}
+
+function itemIconClass(item: FileItem) {
+  return item.type === 'folder'
+    ? 'i-hugeicons-folder-02 text-indigo-400 dark:text-indigo-300'
+    : `${getFileIcon(item.type)} text-gray-500 dark:text-neutral-400`
+}
+
+function starButtonClass(item: FileItem) {
+  return item.starred ? 'text-yellow-500' : 'text-gray-400 dark:text-neutral-500 hover:text-yellow-500'
+}
+
+function shareButtonClass(item: FileItem) {
+  return item.shared ? 'text-indigo-500' : 'text-gray-400 dark:text-neutral-500 hover:text-indigo-500'
+}
+
+function navigateToRoot() {
+  currentFolderId.set(root().id)
+}
+
+function navigateToFolder(folder: FileItem) {
+  currentFolderId.set(folder.id)
+}
+
+function navigateToPath(index: number) {
+  const path = currentPath()
+  if (index >= path.length - 1)
+    return
+  const targetName = path[index]
+  let folder = root()
+  for (let i = 1; i <= index; i++) {
+    const next = (folder.items ?? []).find(it => it.type === 'folder' && it.name === path[i])
+    if (next)
+      folder = next
+  }
+  if (folder.name === targetName || index === 0)
+    currentFolderId.set(folder.id)
+}
+
+function toggleSidePanel() {
+  showSidePanel.set(!showSidePanel())
+}
+
+function setViewMode(mode: 'grid' | 'list') {
+  viewMode.set(mode)
+}
+
+function toggleSortOrder() {
+  sortOrder.set(sortOrder() === 'asc' ? 'desc' : 'asc')
+}
+
+function onItemClick(item: FileItem) {
+  if (item.type === 'folder') {
+    navigateToFolder(item)
+    return
+  }
+  selectedItem.set(item)
+  showInfoPanel.set(true)
+}
+
+function closeInfoPanel() {
+  showInfoPanel.set(false)
+}
+
+function onStarClick(item: FileItem, event: Event) {
+  event.stopPropagation()
+  toggleFlag(item.id, 'starred')
+}
+
+function onShareClick(item: FileItem, event: Event) {
+  event.stopPropagation()
+  toggleFlag(item.id, 'shared')
+}
+
+function onDeleteClick(item: FileItem, event: Event) {
+  event.stopPropagation()
+  itemToDelete.set(item)
+  showDeleteConfirmation.set(true)
+}
+
+function toggleFlag(id: number, key: 'starred' | 'shared') {
+  function visit(folder: FileItem): FileItem {
+    return {
+      ...folder,
+      items: (folder.items ?? []).map((child) => {
+        if (child.id === id)
+          return { ...child, [key]: !child[key] }
+        if (child.type === 'folder')
+          return visit(child)
+        return child
+      }),
+    }
+  }
+  root.set(visit(root()))
+}
+
+function openCreateFolderModal() {
+  newFolderName.set('')
+  showCreateFolderModal.set(true)
+}
+
+function closeCreateFolderModal() {
+  showCreateFolderModal.set(false)
+}
+
+function openUploadModal() {
+  showUploadModal.set(true)
+}
+
+function closeUploadModal() {
+  showUploadModal.set(false)
+}
+
+function closeDeleteConfirmation() {
+  showDeleteConfirmation.set(false)
+  itemToDelete.set(null)
+}
+
+function createNewFolder() {
+  const name = newFolderName().trim()
+  if (!name)
+    return
+  const newFolder: FileItem = {
+    id: Date.now(),
+    name,
+    type: 'folder',
+    path: `${currentFolder().path}/${name}`,
+    lastModified: new Date().toISOString(),
+    starred: false,
+    shared: false,
+    items: [],
+  }
+  function visit(folder: FileItem): FileItem {
+    if (folder.id === currentFolderId())
+      return { ...folder, items: [...(folder.items ?? []), newFolder] }
+    return { ...folder, items: (folder.items ?? []).map(child => child.type === 'folder' ? visit(child) : child) }
+  }
+  root.set(visit(root()))
+  showCreateFolderModal.set(false)
+}
+
+function deleteSelectedItems() {
+  const target = itemToDelete()
+  if (!target) {
+    closeDeleteConfirmation()
+    return
+  }
+  function visit(folder: FileItem): FileItem {
+    return {
+      ...folder,
+      items: (folder.items ?? []).filter(c => c.id !== target.id).map(c => c.type === 'folder' ? visit(c) : c),
+    }
+  }
+  root.set(visit(root()))
+  closeDeleteConfirmation()
+}
+
+let chartHandles: ChartLike[] = []
+
+onMount(async () => {
+  const { Chart, registerables } = await import('@stacksjs/charts')
+  Chart.register(...registerables)
+  const Ctor = Chart as unknown as ChartCtor
+
+  const doughnutOptions = { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom' } } }
+
+  const handles: Array<ChartLike | null> = [
+    useChart({
+      Chart: Ctor,
+      id: 'files_storage_chart',
+      type: 'doughnut',
+      data: { labels: ['Used', 'Available'], datasets: [{ backgroundColor: ['rgba(54, 162, 235, 0.6)', 'rgba(200, 200, 200, 0.6)'], borderColor: ['rgba(54, 162, 235, 1)', 'rgba(200, 200, 200, 1)'], borderWidth: 1, data: [storageStats.used, storageStats.available] }] },
+      options: doughnutOptions,
+    }) as ChartLike | null,
+    useChart({
+      Chart: Ctor,
+      id: 'files_type_chart',
+      type: 'doughnut',
+      data: { labels: ['Documents', 'Images', 'Videos', 'Other'], datasets: [{ backgroundColor: ['rgba(255, 99, 132, 0.6)', 'rgba(54, 162, 235, 0.6)', 'rgba(255, 206, 86, 0.6)', 'rgba(75, 192, 192, 0.6)'], borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)'], borderWidth: 1, data: [storageByType.documents, storageByType.images, storageByType.videos, storageByType.other] }] },
+      options: doughnutOptions,
+    }) as ChartLike | null,
+  ]
+  chartHandles = handles.filter((h): h is ChartLike => h !== null)
+})
+
+onDestroy(() => {
+  chartHandles.forEach(h => h.destroy())
+  chartHandles = []
+})
+</script>
+
+@endsection