@burdenoff/microfe-proserviceworld 2026.624.1 → 2026.626.1

package/dist/proserviceworld/pages/DocumentsPage.js

@@ -1,176 +1,200 @@
 import { useProServiceWorldStore as e } from "../store/proserviceworldStore.js";
 import { useMemo as t, useState as n } from "react";
-import { ArrowUpDown as r, ChevronRight as i, Clock as a, Download as o, File as s, FileText as c, FolderOpen as l, FolderPlus as u, Grid3x3 as d, HardDrive as f, Image as p, List as m, MoreHorizontal as h, Search as g, Share2 as _, Star as v, Upload as y, Users as b } from "lucide-react";
-import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
-import { Button as w, Card as T, CardContent as E, CardHeader as D, CardTitle as O, Input as k } from "@burdenoff/fe-libs/ui";
+import { ArrowUpDown as r, ChevronRight as i, Clock as ee, Download as a, File as o, FileText as s, FolderOpen as c, FolderPlus as l, Grid3x3 as u, HardDrive as d, Image as f, List as p, MoreHorizontal as m, Search as h, Share2 as g, Star as _, Upload as v, Users as y } from "lucide-react";
+import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
+import { AuroraBackground as te, Button as C, CTAOverflowMenu as ne, Card as w, CardContent as T, CardHeader as E, CardTitle as D, GlassCard as O, GradientText as re, IllustratedEmptyState as k, Input as A, PagePurpose as j } from "@burdenoff/fe-libs/ui";
 //#region src/proserviceworld/pages/DocumentsPage.tsx
-var A = {
-	pdf: c,
-	docx: s,
-	doc: s,
-	txt: c,
-	image: p,
-	video: s,
-	audio: s,
-	other: s
-}, j = {
-	pdf: "text-red-500",
-	docx: "text-blue-500",
-	doc: "text-blue-500",
-	txt: "text-gray-500",
-	image: "text-green-500",
-	video: "text-purple-500",
-	audio: "text-orange-500",
-	other: "text-gray-400"
-}, M = {
-	blue: "text-blue-500",
-	green: "text-green-500",
-	purple: "text-purple-500",
-	yellow: "text-yellow-500",
-	red: "text-red-500"
+var M = {
+	pdf: s,
+	docx: o,
+	doc: o,
+	txt: s,
+	image: f,
+	video: o,
+	audio: o,
+	other: o
+}, N = {
+	pdf: "text-status-error-text",
+	docx: "text-accent-blue",
+	doc: "text-accent-blue",
+	txt: "text-text-secondary",
+	image: "text-status-success-text",
+	video: "text-accent-purple",
+	audio: "text-status-warning-text",
+	other: "text-text-secondary"
+}, P = {
+	blue: "text-accent-blue",
+	green: "text-status-success-text",
+	purple: "text-accent-purple",
+	yellow: "text-status-warning-text",
+	red: "text-status-error-text"
 };
-function N(e) {
+function F(e) {
 	return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / (1024 * 1024)).toFixed(1)} MB`;
 }
-function P() {
-	let { documents: p, folders: P } = e(), [F, I] = n("grid"), [L, R] = n(""), [z, B] = n("all"), [V, H] = n("date"), [U, W] = n(!1), [G, K] = n(null), [q, J] = n(!1), [Y, X] = n(!1), Z = t(() => {
-		let e = [...p];
-		if (G && (e = e.filter((e) => e.folderId === G)), z === "starred" ? e = e.filter((e) => e.isStarred) : z !== "all" && (e = e.filter((e) => e.type === z)), L.trim()) {
-			let t = L.toLowerCase();
+function I() {
+	let { documents: f, folders: I } = e(), [L, R] = n("grid"), [z, B] = n(""), [V, H] = n("all"), [U, W] = n("date"), [G, K] = n(!1), [q, J] = n(null), [Y, X] = n(!1), [ie, Z] = n(!1), Q = t(() => {
+		let e = [...f];
+		if (q && (e = e.filter((e) => e.folderId === q)), V === "starred" ? e = e.filter((e) => e.isStarred) : V !== "all" && (e = e.filter((e) => e.type === V)), z.trim()) {
+			let t = z.toLowerCase();
 			e = e.filter((e) => e.name.toLowerCase().includes(t) || e.tags.some((e) => e.toLowerCase().includes(t)));
 		}
 		return e.sort((e, t) => {
-			let n = V === "name" ? e.name.localeCompare(t.name) : V === "date" ? new Date(t.modifiedAt).getTime() - new Date(e.modifiedAt).getTime() : t.size - e.size;
-			return U ? -n : n;
+			let n = U === "name" ? e.name.localeCompare(t.name) : U === "date" ? new Date(t.modifiedAt).getTime() - new Date(e.modifiedAt).getTime() : t.size - e.size;
+			return G ? -n : n;
 		}), e;
 	}, [
-		p,
-		G,
-		z,
-		L,
+		f,
+		q,
 		V,
-		U
-	]), Q = p.reduce((e, t) => e + t.size, 0), ee = p.filter((e) => e.isStarred).length, $ = G ? P.find((e) => e.id === G) : null, te = (e) => {
-		V === e ? W(!U) : (H(e), W(!1));
+		z,
+		U,
+		G
+	]), ae = f.reduce((e, t) => e + t.size, 0), oe = f.filter((e) => e.isStarred).length, $ = q ? I.find((e) => e.id === q) : null, se = (e) => {
+		U === e ? K(!G) : (W(e), K(!1));
 	};
-	return /* @__PURE__ */ C("div", {
-		className: "space-y-6 p-6",
+	return /* @__PURE__ */ S("div", {
+		className: "space-y-6 p-6 bg-bg-canvas min-h-screen",
 		children: [
-			/* @__PURE__ */ C("div", {
-				className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
-				children: [/* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("h1", {
-					className: "text-2xl font-semibold",
-					children: "Documents"
-				}), /* @__PURE__ */ S("p", {
-					className: "text-sm text-text-secondary",
-					children: "Manage files, folders, and shared documents."
-				})] }), /* @__PURE__ */ C("div", {
-					className: "flex gap-2",
-					children: [/* @__PURE__ */ C(w, {
-						variant: "outline",
-						size: "sm",
-						onClick: () => X(!0),
-						children: [/* @__PURE__ */ S(u, { className: "mr-2 h-4 w-4" }), " New Folder"]
-					}), /* @__PURE__ */ C(w, {
-						size: "sm",
-						onClick: () => J(!0),
-						children: [/* @__PURE__ */ S(y, { className: "mr-2 h-4 w-4" }), " Upload"]
+			/* @__PURE__ */ S("div", {
+				className: "relative overflow-hidden rounded-card -mx-2 px-2 pt-1",
+				children: [/* @__PURE__ */ x(te, { intensity: "subtle" }), /* @__PURE__ */ S("div", {
+					className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
+					children: [/* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("h1", {
+						className: "text-2xl font-semibold tracking-tight",
+						children: /* @__PURE__ */ x(re, { children: "Documents" })
+					}), /* @__PURE__ */ x("p", {
+						className: "text-sm text-text-secondary",
+						children: "Manage files, folders, and shared documents."
+					})] }), /* @__PURE__ */ x(ne, {
+						primary: {
+							label: "Upload",
+							onSelect: () => X(!0),
+							icon: /* @__PURE__ */ x(v, { className: "h-4 w-4" })
+						},
+						actions: [{
+							label: "New Folder",
+							onSelect: () => Z(!0),
+							icon: /* @__PURE__ */ x(l, { className: "h-4 w-4" })
+						}]
 					})]
 				})]
 			}),
-			/* @__PURE__ */ C("div", {
+			/* @__PURE__ */ x(j, {
+				icon: /* @__PURE__ */ x(c, { className: "h-4 w-4" }),
+				children: "A shared home for the files behind your work — contracts, deliverables, briefs, and more. Organise documents into folders, star the ones you reach for often, search across everything, and share files securely with clients and collaborators."
+			}),
+			/* @__PURE__ */ S("div", {
 				className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-4",
 				children: [
-					/* @__PURE__ */ S(T, { children: /* @__PURE__ */ S(E, {
-						className: "pt-4",
-						children: /* @__PURE__ */ C("div", {
-							className: "flex items-center gap-3",
-							children: [/* @__PURE__ */ S("div", {
-								className: "rounded-lg bg-blue-100 p-2 dark:bg-blue-950",
-								children: /* @__PURE__ */ S(c, { className: "h-5 w-5 text-blue-600" })
-							}), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
-								className: "text-2xl font-bold",
-								children: p.length
-							}), /* @__PURE__ */ S("p", {
-								className: "text-xs text-text-secondary",
-								children: "Total Files"
-							})] })]
+					/* @__PURE__ */ x(O, {
+						treatment: "metric",
+						className: "border-border-seam",
+						children: /* @__PURE__ */ x(T, {
+							className: "pt-4",
+							children: /* @__PURE__ */ S("div", {
+								className: "flex items-center gap-3",
+								children: [/* @__PURE__ */ x("div", {
+									className: "rounded-lg bg-accent-blue-subtle p-2",
+									children: /* @__PURE__ */ x(s, { className: "h-5 w-5 text-accent-blue" })
+								}), /* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("p", {
+									className: "text-2xl font-bold tabular-nums",
+									children: f.length
+								}), /* @__PURE__ */ x("p", {
+									className: "text-xs text-text-secondary",
+									children: "Total Files"
+								})] })]
+							})
 						})
-					}) }),
-					/* @__PURE__ */ S(T, { children: /* @__PURE__ */ S(E, {
-						className: "pt-4",
-						children: /* @__PURE__ */ C("div", {
-							className: "flex items-center gap-3",
-							children: [/* @__PURE__ */ S("div", {
-								className: "rounded-lg bg-purple-100 p-2 dark:bg-purple-950",
-								children: /* @__PURE__ */ S(l, { className: "h-5 w-5 text-purple-600" })
-							}), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
-								className: "text-2xl font-bold",
-								children: P.length
-							}), /* @__PURE__ */ S("p", {
-								className: "text-xs text-text-secondary",
-								children: "Folders"
-							})] })]
+					}),
+					/* @__PURE__ */ x(O, {
+						treatment: "metric",
+						className: "border-border-seam",
+						children: /* @__PURE__ */ x(T, {
+							className: "pt-4",
+							children: /* @__PURE__ */ S("div", {
+								className: "flex items-center gap-3",
+								children: [/* @__PURE__ */ x("div", {
+									className: "rounded-lg bg-accent-purple-subtle p-2",
+									children: /* @__PURE__ */ x(c, { className: "h-5 w-5 text-accent-purple" })
+								}), /* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("p", {
+									className: "text-2xl font-bold tabular-nums",
+									children: I.length
+								}), /* @__PURE__ */ x("p", {
+									className: "text-xs text-text-secondary",
+									children: "Folders"
+								})] })]
+							})
 						})
-					}) }),
-					/* @__PURE__ */ S(T, { children: /* @__PURE__ */ S(E, {
-						className: "pt-4",
-						children: /* @__PURE__ */ C("div", {
-							className: "flex items-center gap-3",
-							children: [/* @__PURE__ */ S("div", {
-								className: "rounded-lg bg-yellow-100 p-2 dark:bg-yellow-950",
-								children: /* @__PURE__ */ S(v, { className: "h-5 w-5 text-yellow-600" })
-							}), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
-								className: "text-2xl font-bold",
-								children: ee
-							}), /* @__PURE__ */ S("p", {
-								className: "text-xs text-text-secondary",
-								children: "Starred"
-							})] })]
+					}),
+					/* @__PURE__ */ x(O, {
+						treatment: "metric",
+						className: "border-border-seam",
+						children: /* @__PURE__ */ x(T, {
+							className: "pt-4",
+							children: /* @__PURE__ */ S("div", {
+								className: "flex items-center gap-3",
+								children: [/* @__PURE__ */ x("div", {
+									className: "rounded-lg bg-status-warning-bg-subtle p-2",
+									children: /* @__PURE__ */ x(_, { className: "h-5 w-5 text-status-warning-text" })
+								}), /* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("p", {
+									className: "text-2xl font-bold tabular-nums",
+									children: oe
+								}), /* @__PURE__ */ x("p", {
+									className: "text-xs text-text-secondary",
+									children: "Starred"
+								})] })]
+							})
 						})
-					}) }),
-					/* @__PURE__ */ S(T, { children: /* @__PURE__ */ S(E, {
-						className: "pt-4",
-						children: /* @__PURE__ */ C("div", {
-							className: "flex items-center gap-3",
-							children: [/* @__PURE__ */ S("div", {
-								className: "rounded-lg bg-green-100 p-2 dark:bg-green-950",
-								children: /* @__PURE__ */ S(f, { className: "h-5 w-5 text-green-600" })
-							}), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
-								className: "text-2xl font-bold",
-								children: N(Q)
-							}), /* @__PURE__ */ S("p", {
-								className: "text-xs text-text-secondary",
-								children: "Total Size"
-							})] })]
+					}),
+					/* @__PURE__ */ x(O, {
+						treatment: "glass",
+						glow: !0,
+						className: "border-border-seam",
+						children: /* @__PURE__ */ x(T, {
+							className: "pt-4",
+							children: /* @__PURE__ */ S("div", {
+								className: "flex items-center gap-3",
+								children: [/* @__PURE__ */ x("div", {
+									className: "rounded-lg bg-status-success-bg-subtle p-2",
+									children: /* @__PURE__ */ x(d, { className: "h-5 w-5 text-status-success-text" })
+								}), /* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("p", {
+									className: "text-2xl font-bold tabular-nums",
+									children: F(ae)
+								}), /* @__PURE__ */ x("p", {
+									className: "text-xs text-text-secondary",
+									children: "Total Size"
+								})] })]
+							})
 						})
-					}) })
+					})
 				]
 			}),
-			/* @__PURE__ */ C("div", {
+			/* @__PURE__ */ S("div", {
 				className: "flex items-center gap-2 text-sm",
-				children: [/* @__PURE__ */ S("button", {
-					onClick: () => K(null),
-					className: `font-medium ${G ? "text-text-secondary hover:text-text-primary" : "text-primary"}`,
+				children: [/* @__PURE__ */ x("button", {
+					onClick: () => J(null),
+					className: `font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus rounded ${q ? "text-text-secondary hover:text-text-primary" : "text-accent-blue"}`,
 					children: "All Files"
-				}), $ && /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S(i, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ S("span", {
-					className: "font-medium text-primary",
+				}), $ && /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x(i, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ x("span", {
+					className: "font-medium text-accent-blue",
 					children: $.name
 				})] })]
 			}),
-			/* @__PURE__ */ C("div", {
+			/* @__PURE__ */ S("div", {
 				className: "flex flex-col gap-4 sm:flex-row sm:items-center",
-				children: [/* @__PURE__ */ C("div", {
+				children: [/* @__PURE__ */ S("div", {
 					className: "relative flex-1",
-					children: [/* @__PURE__ */ S(g, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" }), /* @__PURE__ */ S(k, {
+					children: [/* @__PURE__ */ x(h, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" }), /* @__PURE__ */ x(A, {
 						placeholder: "Search documents...",
-						value: L,
-						onChange: (e) => R(e.target.value),
+						"aria-label": "Search documents",
+						value: z,
+						onChange: (e) => B(e.target.value),
 						className: "pl-10"
 					})]
-				}), /* @__PURE__ */ C("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ S("div", {
+				}), /* @__PURE__ */ S("div", {
+					className: "flex flex-wrap items-center gap-2",
+					children: [/* @__PURE__ */ x("div", {
 						className: "flex flex-wrap gap-1",
 						children: [
 							"all",
@@ -178,26 +202,31 @@ function P() {
 							"docx",
 							"txt",
 							"starred"
-						].map((e) => /* @__PURE__ */ S("button", {
-							onClick: () => B(e),
-							className: `rounded px-2 py-1 text-xs font-medium transition-colors ${z === e ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-secondary hover:bg-bg-sunken/80"}`,
+						].map((e) => /* @__PURE__ */ x("button", {
+							onClick: () => H(e),
+							"aria-pressed": V === e,
+							className: `rounded px-2 py-1 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus ${V === e ? "bg-accent-blue text-action-primary-text" : "bg-bg-sunken text-text-secondary hover:text-text-primary"}`,
 							children: e === "all" ? "All" : e === "starred" ? "Starred" : e.toUpperCase()
 						}, e))
-					}), /* @__PURE__ */ C("div", {
-						className: "flex rounded border",
-						children: [/* @__PURE__ */ S("button", {
-							onClick: () => I("grid"),
-							className: `p-1.5 ${F === "grid" ? "bg-action-primary-bg text-action-primary-text" : "text-text-secondary"}`,
-							children: /* @__PURE__ */ S(d, { className: "h-4 w-4" })
-						}), /* @__PURE__ */ S("button", {
-							onClick: () => I("list"),
-							className: `p-1.5 ${F === "list" ? "bg-action-primary-bg text-action-primary-text" : "text-text-secondary"}`,
-							children: /* @__PURE__ */ S(m, { className: "h-4 w-4" })
+					}), /* @__PURE__ */ S("div", {
+						className: "flex rounded border border-border-seam",
+						children: [/* @__PURE__ */ x("button", {
+							onClick: () => R("grid"),
+							"aria-label": "Grid view",
+							"aria-pressed": L === "grid",
+							className: `p-1.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus ${L === "grid" ? "bg-accent-blue text-action-primary-text" : "text-text-secondary"}`,
+							children: /* @__PURE__ */ x(u, { className: "h-4 w-4" })
+						}), /* @__PURE__ */ x("button", {
+							onClick: () => R("list"),
+							"aria-label": "List view",
+							"aria-pressed": L === "list",
+							className: `p-1.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus ${L === "list" ? "bg-accent-blue text-action-primary-text" : "text-text-secondary"}`,
+							children: /* @__PURE__ */ x(p, { className: "h-4 w-4" })
 						})]
 					})]
 				})]
 			}),
-			/* @__PURE__ */ S("div", {
+			/* @__PURE__ */ x("div", {
 				className: "flex gap-2",
 				children: [
 					{
@@ -212,29 +241,33 @@ function P() {
 						field: "size",
 						label: "Size"
 					}
-				].map(({ field: e, label: t }) => /* @__PURE__ */ C("button", {
-					onClick: () => te(e),
-					className: `flex items-center gap-1 rounded border px-3 py-1 text-xs ${V === e ? "border-primary bg-action-primary-bg/5 text-primary" : "text-text-secondary hover:bg-bg-sunken/50"}`,
-					children: [/* @__PURE__ */ S(r, { className: "h-3 w-3" }), t]
+				].map(({ field: e, label: t }) => /* @__PURE__ */ S("button", {
+					onClick: () => se(e),
+					"aria-pressed": U === e,
+					className: `flex items-center gap-1 rounded border px-3 py-1 text-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus ${U === e ? "border-accent-blue bg-accent-blue-subtle text-accent-blue" : "border-border-seam text-text-secondary hover:text-text-primary"}`,
+					children: [/* @__PURE__ */ x(r, { className: "h-3 w-3" }), t]
 				}, e))
 			}),
-			!G && /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("h3", {
+			!q && /* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("h3", {
 				className: "mb-3 text-sm font-medium text-text-secondary",
 				children: "Folders"
-			}), /* @__PURE__ */ S("div", {
+			}), /* @__PURE__ */ x("div", {
 				className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-4",
-				children: P.map((e) => /* @__PURE__ */ C("button", {
-					onClick: () => K(e.id),
-					className: "flex items-center gap-3 rounded-lg border p-3 text-left transition-colors hover:bg-bg-sunken/50",
-					children: [/* @__PURE__ */ S(l, { className: `h-8 w-8 ${M[e.color] ?? "text-gray-500"}` }), /* @__PURE__ */ C("div", {
+				children: I.map((e) => /* @__PURE__ */ S("button", {
+					onClick: () => J(e.id),
+					className: "flex items-center gap-3 rounded-lg border border-border-seam p-3 text-left transition-shadow hover:shadow-pop focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+					children: [/* @__PURE__ */ x(c, { className: `h-8 w-8 ${P[e.color] ?? "text-text-secondary"}` }), /* @__PURE__ */ S("div", {
 						className: "min-w-0 flex-1",
-						children: [/* @__PURE__ */ S("p", {
+						children: [/* @__PURE__ */ x("p", {
 							className: "truncate font-medium text-sm",
 							children: e.name
-						}), /* @__PURE__ */ C("p", {
+						}), /* @__PURE__ */ S("p", {
 							className: "text-xs text-text-secondary",
 							children: [
-								e.documentsCount,
+								/* @__PURE__ */ x("span", {
+									className: "tabular-nums",
+									children: e.documentsCount
+								}),
 								" files",
 								e.isPublic && " - Public"
 							]
@@ -242,206 +275,237 @@ function P() {
 					})]
 				}, e.id))
 			})] }),
-			/* @__PURE__ */ C("div", { children: [/* @__PURE__ */ C("h3", {
+			/* @__PURE__ */ S("div", { children: [/* @__PURE__ */ S("h3", {
 				className: "mb-3 text-sm font-medium text-text-secondary",
-				children: ["Files ", Z.length > 0 && `(${Z.length})`]
-			}), Z.length === 0 ? /* @__PURE__ */ S(T, { children: /* @__PURE__ */ S(E, {
-				className: "py-12 text-center text-text-secondary",
-				children: "No files found. Try adjusting your filters."
-			}) }) : F === "grid" ? /* @__PURE__ */ S("div", {
+				children: ["Files ", Q.length > 0 && `(${Q.length})`]
+			}), Q.length === 0 ? /* @__PURE__ */ x(w, {
+				className: "border-border-seam",
+				children: /* @__PURE__ */ x(T, {
+					className: "py-6",
+					children: /* @__PURE__ */ x(k, {
+						illustration: z || V !== "all" ? "empty-search" : "empty-files",
+						title: "No files found",
+						description: "Try adjusting your filters or upload a new document.",
+						action: /* @__PURE__ */ S(C, {
+							size: "sm",
+							onClick: () => X(!0),
+							children: [/* @__PURE__ */ x(v, { className: "mr-2 h-4 w-4" }), " Upload"]
+						})
+					})
+				})
+			}) : L === "grid" ? /* @__PURE__ */ x("div", {
 				className: "grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
-				children: Z.map((e) => /* @__PURE__ */ S(T, {
-					className: "hover:bg-bg-sunken/30 transition-colors",
-					children: /* @__PURE__ */ C(E, {
+				children: Q.map((e) => /* @__PURE__ */ x(O, {
+					treatment: "plain",
+					className: "border-border-seam transition-shadow hover:shadow-pop",
+					children: /* @__PURE__ */ S(T, {
 						className: "pt-4",
 						children: [
-							/* @__PURE__ */ C("div", {
+							/* @__PURE__ */ S("div", {
 								className: "flex items-start justify-between",
-								children: [/* @__PURE__ */ S(A[e.type] ?? s, { className: `h-10 w-10 ${j[e.type] ?? "text-gray-400"}` }), /* @__PURE__ */ C("div", {
+								children: [/* @__PURE__ */ x(M[e.type] ?? o, { className: `h-10 w-10 ${N[e.type] ?? "text-text-secondary"}` }), /* @__PURE__ */ S("div", {
 									className: "flex items-center gap-1",
-									children: [e.isStarred && /* @__PURE__ */ S(v, { className: "h-4 w-4 fill-yellow-400 text-yellow-400" }), e.sharedWith > 0 && /* @__PURE__ */ S(_, { className: "h-4 w-4 text-text-secondary" })]
+									children: [e.isStarred && /* @__PURE__ */ x(_, { className: "h-4 w-4 fill-status-warning-text text-status-warning-text" }), e.sharedWith > 0 && /* @__PURE__ */ x(g, { className: "h-4 w-4 text-text-secondary" })]
 								})]
 							}),
-							/* @__PURE__ */ S("h4", {
+							/* @__PURE__ */ x("h4", {
 								className: "mt-3 truncate font-medium text-sm",
 								children: e.name
 							}),
-							/* @__PURE__ */ C("div", {
+							/* @__PURE__ */ S("div", {
 								className: "mt-1 flex items-center gap-2 text-xs text-text-secondary",
-								children: [/* @__PURE__ */ S("span", { children: N(e.size) }), /* @__PURE__ */ C("span", { children: ["v", e.version] })]
+								children: [/* @__PURE__ */ x("span", {
+									className: "tabular-nums",
+									children: F(e.size)
+								}), /* @__PURE__ */ S("span", {
+									className: "tabular-nums",
+									children: ["v", e.version]
+								})]
 							}),
-							/* @__PURE__ */ C("div", {
+							/* @__PURE__ */ S("div", {
 								className: "mt-2 flex items-center gap-1 text-xs text-text-secondary",
 								children: [
-									/* @__PURE__ */ S(a, { className: "h-3 w-3" }),
+									/* @__PURE__ */ x(ee, { className: "h-3 w-3" }),
 									" ",
 									e.modifiedAt
 								]
 							}),
-							/* @__PURE__ */ C("div", {
+							/* @__PURE__ */ S("div", {
 								className: "mt-3 flex gap-1",
-								children: [/* @__PURE__ */ C(w, {
+								children: [/* @__PURE__ */ S(C, {
 									variant: "outline",
 									size: "sm",
 									className: "flex-1 text-xs",
-									children: [/* @__PURE__ */ S(o, { className: "mr-1 h-3 w-3" }), " Download"]
-								}), /* @__PURE__ */ S(w, {
+									children: [/* @__PURE__ */ x(a, { className: "mr-1 h-3 w-3" }), " Download"]
+								}), /* @__PURE__ */ x(C, {
 									variant: "outline",
 									size: "sm",
-									children: /* @__PURE__ */ S(h, { className: "h-3 w-3" })
+									"aria-label": "More actions",
+									children: /* @__PURE__ */ x(m, { className: "h-3 w-3" })
 								})]
 							})
 						]
 					})
 				}, e.id))
-			}) : /* @__PURE__ */ S(T, { children: /* @__PURE__ */ S(E, {
-				className: "pt-4",
-				children: /* @__PURE__ */ S("div", {
-					className: "overflow-x-auto",
-					children: /* @__PURE__ */ C("table", {
-						className: "w-full text-sm",
-						children: [/* @__PURE__ */ S("thead", { children: /* @__PURE__ */ C("tr", {
-							className: "border-b text-left text-text-secondary",
-							children: [
-								/* @__PURE__ */ S("th", {
-									className: "p-3",
-									children: "Name"
-								}),
-								/* @__PURE__ */ S("th", {
-									className: "p-3",
-									children: "Type"
-								}),
-								/* @__PURE__ */ S("th", {
-									className: "p-3",
-									children: "Size"
-								}),
-								/* @__PURE__ */ S("th", {
-									className: "p-3",
-									children: "Modified"
-								}),
-								/* @__PURE__ */ S("th", {
-									className: "p-3",
-									children: "Uploaded By"
-								}),
-								/* @__PURE__ */ S("th", {
-									className: "p-3 text-right",
-									children: "Actions"
-								})
-							]
-						}) }), /* @__PURE__ */ S("tbody", { children: Z.map((e) => /* @__PURE__ */ C("tr", {
-							className: "border-b hover:bg-bg-sunken/50",
-							children: [
-								/* @__PURE__ */ S("td", {
-									className: "p-3",
-									children: /* @__PURE__ */ C("div", {
-										className: "flex items-center gap-2",
-										children: [
-											/* @__PURE__ */ S(A[e.type] ?? s, { className: `h-5 w-5 ${j[e.type] ?? "text-gray-400"}` }),
-											/* @__PURE__ */ S("span", {
-												className: "font-medium",
-												children: e.name
-											}),
-											e.isStarred && /* @__PURE__ */ S(v, { className: "h-3 w-3 fill-yellow-400 text-yellow-400" }),
-											e.sharedWith > 0 && /* @__PURE__ */ C("span", {
-												className: "flex items-center gap-0.5 text-xs text-text-secondary",
-												children: [
-													/* @__PURE__ */ S(b, { className: "h-3 w-3" }),
-													" ",
-													e.sharedWith
-												]
-											})
-										]
+			}) : /* @__PURE__ */ x(w, {
+				className: "border-border-seam",
+				children: /* @__PURE__ */ x(T, {
+					className: "pt-4",
+					children: /* @__PURE__ */ x("div", {
+						className: "overflow-x-auto",
+						children: /* @__PURE__ */ S("table", {
+							className: "w-full text-sm",
+							children: [/* @__PURE__ */ x("thead", { children: /* @__PURE__ */ S("tr", {
+								className: "border-b border-border-seam text-left text-text-secondary",
+								children: [
+									/* @__PURE__ */ x("th", {
+										className: "p-3",
+										children: "Name"
+									}),
+									/* @__PURE__ */ x("th", {
+										className: "p-3",
+										children: "Type"
+									}),
+									/* @__PURE__ */ x("th", {
+										className: "p-3",
+										children: "Size"
+									}),
+									/* @__PURE__ */ x("th", {
+										className: "p-3",
+										children: "Modified"
+									}),
+									/* @__PURE__ */ x("th", {
+										className: "p-3",
+										children: "Uploaded By"
+									}),
+									/* @__PURE__ */ x("th", {
+										className: "p-3 text-right",
+										children: "Actions"
 									})
-								}),
-								/* @__PURE__ */ S("td", {
-									className: "p-3 uppercase text-xs",
-									children: e.type
-								}),
-								/* @__PURE__ */ S("td", {
-									className: "p-3",
-									children: N(e.size)
-								}),
-								/* @__PURE__ */ S("td", {
-									className: "p-3 text-text-secondary",
-									children: e.modifiedAt
-								}),
-								/* @__PURE__ */ S("td", {
-									className: "p-3 text-text-secondary",
-									children: e.uploadedBy
-								}),
-								/* @__PURE__ */ S("td", {
-									className: "p-3",
-									children: /* @__PURE__ */ C("div", {
-										className: "flex justify-end gap-1",
-										children: [/* @__PURE__ */ S(w, {
-											variant: "outline",
-											size: "sm",
-											children: /* @__PURE__ */ S(o, { className: "h-3 w-3" })
-										}), /* @__PURE__ */ S(w, {
-											variant: "outline",
-											size: "sm",
-											children: /* @__PURE__ */ S(_, { className: "h-3 w-3" })
-										})]
+								]
+							}) }), /* @__PURE__ */ x("tbody", { children: Q.map((e) => /* @__PURE__ */ S("tr", {
+								className: "border-b border-border-seam hover:bg-bg-sunken",
+								children: [
+									/* @__PURE__ */ x("td", {
+										className: "p-3",
+										children: /* @__PURE__ */ S("div", {
+											className: "flex items-center gap-2",
+											children: [
+												/* @__PURE__ */ x(M[e.type] ?? o, { className: `h-5 w-5 ${N[e.type] ?? "text-text-secondary"}` }),
+												/* @__PURE__ */ x("span", {
+													className: "font-medium",
+													children: e.name
+												}),
+												e.isStarred && /* @__PURE__ */ x(_, { className: "h-3 w-3 fill-status-warning-text text-status-warning-text" }),
+												e.sharedWith > 0 && /* @__PURE__ */ S("span", {
+													className: "flex items-center gap-0.5 text-xs text-text-secondary",
+													children: [
+														/* @__PURE__ */ x(y, { className: "h-3 w-3" }),
+														" ",
+														/* @__PURE__ */ x("span", {
+															className: "tabular-nums",
+															children: e.sharedWith
+														})
+													]
+												})
+											]
+										})
+									}),
+									/* @__PURE__ */ x("td", {
+										className: "p-3 uppercase text-xs",
+										children: e.type
+									}),
+									/* @__PURE__ */ x("td", {
+										className: "p-3 tabular-nums",
+										children: F(e.size)
+									}),
+									/* @__PURE__ */ x("td", {
+										className: "p-3 text-text-secondary",
+										children: e.modifiedAt
+									}),
+									/* @__PURE__ */ x("td", {
+										className: "p-3 text-text-secondary",
+										children: e.uploadedBy
+									}),
+									/* @__PURE__ */ x("td", {
+										className: "p-3",
+										children: /* @__PURE__ */ S("div", {
+											className: "flex justify-end gap-1",
+											children: [/* @__PURE__ */ x(C, {
+												variant: "outline",
+												size: "sm",
+												"aria-label": "Download",
+												children: /* @__PURE__ */ x(a, { className: "h-3 w-3" })
+											}), /* @__PURE__ */ x(C, {
+												variant: "outline",
+												size: "sm",
+												"aria-label": "Share",
+												children: /* @__PURE__ */ x(g, { className: "h-3 w-3" })
+											})]
+										})
 									})
-								})
-							]
-						}, e.id)) })]
+								]
+							}, e.id)) })]
+						})
 					})
 				})
-			}) })] }),
-			q && /* @__PURE__ */ S("div", {
-				className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50",
-				children: /* @__PURE__ */ C(T, {
-					className: "mx-4 w-full max-w-md",
-					children: [/* @__PURE__ */ S(D, { children: /* @__PURE__ */ C("div", {
+			})] }),
+			Y && /* @__PURE__ */ x("div", {
+				className: "fixed inset-0 z-50 flex items-center justify-center bg-bg-overlay",
+				children: /* @__PURE__ */ S(O, {
+					treatment: "glass",
+					className: "mx-4 w-full max-w-md border-border-seam",
+					children: [/* @__PURE__ */ x(E, { children: /* @__PURE__ */ S("div", {
 						className: "flex items-center justify-between",
-						children: [/* @__PURE__ */ S(O, { children: "Upload Files" }), /* @__PURE__ */ S(w, {
+						children: [/* @__PURE__ */ x(D, { children: "Upload Files" }), /* @__PURE__ */ x(C, {
 							variant: "outline",
 							size: "sm",
-							onClick: () => J(!1),
+							onClick: () => X(!1),
 							children: "Close"
 						})]
-					}) }), /* @__PURE__ */ C(E, {
+					}) }), /* @__PURE__ */ S(T, {
 						className: "space-y-4",
 						children: [
-							/* @__PURE__ */ C("div", {
-								className: "flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-8",
+							/* @__PURE__ */ S("div", {
+								className: "flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-border-seam p-8",
 								children: [
-									/* @__PURE__ */ S(y, { className: "h-10 w-10 text-text-secondary" }),
-									/* @__PURE__ */ S("p", {
+									/* @__PURE__ */ x(v, { className: "h-10 w-10 text-text-secondary" }),
+									/* @__PURE__ */ x("p", {
 										className: "mt-2 text-sm font-medium",
 										children: "Drag & drop files here"
 									}),
-									/* @__PURE__ */ S("p", {
+									/* @__PURE__ */ x("p", {
 										className: "text-xs text-text-secondary",
 										children: "or click to browse"
 									})
 								]
 							}),
-							/* @__PURE__ */ C("div", {
+							/* @__PURE__ */ S("div", {
 								className: "space-y-2",
-								children: [/* @__PURE__ */ S("label", {
+								children: [/* @__PURE__ */ x("label", {
 									className: "text-sm font-medium",
+									htmlFor: "upload-folder",
 									children: "Destination Folder"
-								}), /* @__PURE__ */ C("select", {
-									className: "w-full rounded border bg-bg-surface px-3 py-2 text-sm",
-									children: [/* @__PURE__ */ S("option", {
+								}), /* @__PURE__ */ S("select", {
+									id: "upload-folder",
+									className: "w-full rounded border border-border-seam bg-bg-surface px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+									children: [/* @__PURE__ */ x("option", {
 										value: "",
 										children: "Root"
-									}), P.map((e) => /* @__PURE__ */ S("option", {
+									}), I.map((e) => /* @__PURE__ */ x("option", {
 										value: e.id,
 										children: e.name
 									}, e.id))]
 								})]
 							}),
-							/* @__PURE__ */ C("div", {
+							/* @__PURE__ */ S("div", {
 								className: "flex gap-2",
-								children: [/* @__PURE__ */ S(w, {
+								children: [/* @__PURE__ */ x(C, {
 									variant: "outline",
 									className: "flex-1",
-									onClick: () => J(!1),
+									onClick: () => X(!1),
 									children: "Cancel"
-								}), /* @__PURE__ */ S(w, {
+								}), /* @__PURE__ */ x(C, {
 									className: "flex-1",
 									children: "Upload"
 								})]
@@ -450,34 +514,39 @@ function P() {
 					})]
 				})
 			}),
-			Y && /* @__PURE__ */ S("div", {
-				className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50",
-				children: /* @__PURE__ */ C(T, {
-					className: "mx-4 w-full max-w-md",
-					children: [/* @__PURE__ */ S(D, { children: /* @__PURE__ */ C("div", {
+			ie && /* @__PURE__ */ x("div", {
+				className: "fixed inset-0 z-50 flex items-center justify-center bg-bg-overlay",
+				children: /* @__PURE__ */ S(O, {
+					treatment: "glass",
+					className: "mx-4 w-full max-w-md border-border-seam",
+					children: [/* @__PURE__ */ x(E, { children: /* @__PURE__ */ S("div", {
 						className: "flex items-center justify-between",
-						children: [/* @__PURE__ */ S(O, { children: "Create Folder" }), /* @__PURE__ */ S(w, {
+						children: [/* @__PURE__ */ x(D, { children: "Create Folder" }), /* @__PURE__ */ x(C, {
 							variant: "outline",
 							size: "sm",
-							onClick: () => X(!1),
+							onClick: () => Z(!1),
 							children: "Close"
 						})]
-					}) }), /* @__PURE__ */ C(E, {
+					}) }), /* @__PURE__ */ S(T, {
 						className: "space-y-4",
-						children: [/* @__PURE__ */ C("div", {
+						children: [/* @__PURE__ */ S("div", {
 							className: "space-y-2",
-							children: [/* @__PURE__ */ S("label", {
+							children: [/* @__PURE__ */ x("label", {
 								className: "text-sm font-medium",
+								htmlFor: "folder-name",
 								children: "Folder Name"
-							}), /* @__PURE__ */ S(k, { placeholder: "Enter folder name..." })]
-						}), /* @__PURE__ */ C("div", {
+							}), /* @__PURE__ */ x(A, {
+								id: "folder-name",
+								placeholder: "Enter folder name..."
+							})]
+						}), /* @__PURE__ */ S("div", {
 							className: "flex gap-2",
-							children: [/* @__PURE__ */ S(w, {
+							children: [/* @__PURE__ */ x(C, {
 								variant: "outline",
 								className: "flex-1",
-								onClick: () => X(!1),
+								onClick: () => Z(!1),
 								children: "Cancel"
-							}), /* @__PURE__ */ S(w, {
+							}), /* @__PURE__ */ x(C, {
 								className: "flex-1",
 								children: "Create"
 							})]
@@ -489,6 +558,6 @@ function P() {
 	});
 }
 //#endregion
-export { P as DocumentsPage };
+export { I as DocumentsPage };
 
 //# sourceMappingURL=DocumentsPage.js.map