@burdenoff/microfe-proserviceworld 2026.525.1 → 2026.625.1

package/dist/proserviceworld/pages/DocumentsPage.js

@@ -1,176 +1,196 @@
 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 ee, ChevronRight as te, Clock as r, Download as i, File as a, FileText as o, FolderOpen as s, FolderPlus as c, Grid3x3 as l, HardDrive as u, Image as d, List as f, MoreHorizontal as p, Search as m, Share2 as h, Star as g, Upload as _, Users as v } from "lucide-react";
+import { Fragment as ne, jsx as y, jsxs as b } from "react/jsx-runtime";
+import { AuroraBackground as x, Button as S, CTAOverflowMenu as C, Card as w, CardContent as T, CardHeader as E, CardTitle as D, GlassCard as O, GradientText as k, IllustratedEmptyState as A, Input 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: o,
+	docx: a,
+	doc: a,
+	txt: o,
+	image: d,
+	video: a,
+	audio: a,
+	other: a
+}, 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"
+}, re = {
+	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 P(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 F() {
+	let { documents: d, folders: F } = e(), [I, L] = n("grid"), [R, z] = n(""), [B, V] = n("all"), [H, U] = n("date"), [W, G] = n(!1), [K, q] = n(null), [J, Y] = n(!1), [X, Z] = n(!1), Q = t(() => {
+		let e = [...d];
+		if (K && (e = e.filter((e) => e.folderId === K)), B === "starred" ? e = e.filter((e) => e.isStarred) : B !== "all" && (e = e.filter((e) => e.type === B)), R.trim()) {
+			let t = R.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 = H === "name" ? e.name.localeCompare(t.name) : H === "date" ? new Date(t.modifiedAt).getTime() - new Date(e.modifiedAt).getTime() : t.size - e.size;
+			return W ? -n : n;
 		}), e;
 	}, [
-		p,
-		G,
-		z,
-		L,
-		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));
+		d,
+		K,
+		B,
+		R,
+		H,
+		W
+	]), ie = d.reduce((e, t) => e + t.size, 0), ae = d.filter((e) => e.isStarred).length, $ = K ? F.find((e) => e.id === K) : null, oe = (e) => {
+		H === e ? G(!W) : (U(e), G(!1));
 	};
-	return /* @__PURE__ */ C("div", {
-		className: "space-y-6 p-6",
+	return /* @__PURE__ */ b("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-muted-foreground",
-					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__ */ b("div", {
+				className: "relative overflow-hidden rounded-card -mx-2 px-2 pt-1",
+				children: [/* @__PURE__ */ y(x, { intensity: "subtle" }), /* @__PURE__ */ b("div", {
+					className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
+					children: [/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("h1", {
+						className: "text-2xl font-semibold tracking-tight",
+						children: /* @__PURE__ */ y(k, { children: "Documents" })
+					}), /* @__PURE__ */ y("p", {
+						className: "text-sm text-text-secondary",
+						children: "Manage files, folders, and shared documents."
+					})] }), /* @__PURE__ */ y(C, {
+						primary: {
+							label: "Upload",
+							onSelect: () => Y(!0),
+							icon: /* @__PURE__ */ y(_, { className: "h-4 w-4" })
+						},
+						actions: [{
+							label: "New Folder",
+							onSelect: () => Z(!0),
+							icon: /* @__PURE__ */ y(c, { className: "h-4 w-4" })
+						}]
 					})]
 				})]
 			}),
-			/* @__PURE__ */ C("div", {
+			/* @__PURE__ */ b("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-muted-foreground",
-								children: "Total Files"
-							})] })]
+					/* @__PURE__ */ y(O, {
+						treatment: "metric",
+						className: "border-border-seam",
+						children: /* @__PURE__ */ y(T, {
+							className: "pt-4",
+							children: /* @__PURE__ */ b("div", {
+								className: "flex items-center gap-3",
+								children: [/* @__PURE__ */ y("div", {
+									className: "rounded-lg bg-accent-blue-subtle p-2",
+									children: /* @__PURE__ */ y(o, { className: "h-5 w-5 text-accent-blue" })
+								}), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+									className: "text-2xl font-bold tabular-nums",
+									children: d.length
+								}), /* @__PURE__ */ y("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-muted-foreground",
-								children: "Folders"
-							})] })]
+					}),
+					/* @__PURE__ */ y(O, {
+						treatment: "metric",
+						className: "border-border-seam",
+						children: /* @__PURE__ */ y(T, {
+							className: "pt-4",
+							children: /* @__PURE__ */ b("div", {
+								className: "flex items-center gap-3",
+								children: [/* @__PURE__ */ y("div", {
+									className: "rounded-lg bg-accent-purple-subtle p-2",
+									children: /* @__PURE__ */ y(s, { className: "h-5 w-5 text-accent-purple" })
+								}), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+									className: "text-2xl font-bold tabular-nums",
+									children: F.length
+								}), /* @__PURE__ */ y("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-muted-foreground",
-								children: "Starred"
-							})] })]
+					}),
+					/* @__PURE__ */ y(O, {
+						treatment: "metric",
+						className: "border-border-seam",
+						children: /* @__PURE__ */ y(T, {
+							className: "pt-4",
+							children: /* @__PURE__ */ b("div", {
+								className: "flex items-center gap-3",
+								children: [/* @__PURE__ */ y("div", {
+									className: "rounded-lg bg-status-warning-bg-subtle p-2",
+									children: /* @__PURE__ */ y(g, { className: "h-5 w-5 text-status-warning-text" })
+								}), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+									className: "text-2xl font-bold tabular-nums",
+									children: ae
+								}), /* @__PURE__ */ y("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-muted-foreground",
-								children: "Total Size"
-							})] })]
+					}),
+					/* @__PURE__ */ y(O, {
+						treatment: "glass",
+						glow: !0,
+						className: "border-border-seam",
+						children: /* @__PURE__ */ y(T, {
+							className: "pt-4",
+							children: /* @__PURE__ */ b("div", {
+								className: "flex items-center gap-3",
+								children: [/* @__PURE__ */ y("div", {
+									className: "rounded-lg bg-status-success-bg-subtle p-2",
+									children: /* @__PURE__ */ y(u, { className: "h-5 w-5 text-status-success-text" })
+								}), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+									className: "text-2xl font-bold tabular-nums",
+									children: P(ie)
+								}), /* @__PURE__ */ y("p", {
+									className: "text-xs text-text-secondary",
+									children: "Total Size"
+								})] })]
+							})
 						})
-					}) })
+					})
 				]
 			}),
-			/* @__PURE__ */ C("div", {
+			/* @__PURE__ */ b("div", {
 				className: "flex items-center gap-2 text-sm",
-				children: [/* @__PURE__ */ S("button", {
-					onClick: () => K(null),
-					className: `font-medium ${G ? "text-muted-foreground hover:text-foreground" : "text-primary"}`,
+				children: [/* @__PURE__ */ y("button", {
+					onClick: () => q(null),
+					className: `font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus rounded ${K ? "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-muted-foreground" }), /* @__PURE__ */ S("span", {
-					className: "font-medium text-primary",
+				}), $ && /* @__PURE__ */ b(ne, { children: [/* @__PURE__ */ y(te, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ y("span", {
+					className: "font-medium text-accent-blue",
 					children: $.name
 				})] })]
 			}),
-			/* @__PURE__ */ C("div", {
+			/* @__PURE__ */ b("div", {
 				className: "flex flex-col gap-4 sm:flex-row sm:items-center",
-				children: [/* @__PURE__ */ C("div", {
+				children: [/* @__PURE__ */ b("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-muted-foreground" }), /* @__PURE__ */ S(k, {
+					children: [/* @__PURE__ */ y(m, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" }), /* @__PURE__ */ y(j, {
 						placeholder: "Search documents...",
-						value: L,
-						onChange: (e) => R(e.target.value),
+						"aria-label": "Search documents",
+						value: R,
+						onChange: (e) => z(e.target.value),
 						className: "pl-10"
 					})]
-				}), /* @__PURE__ */ C("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ S("div", {
+				}), /* @__PURE__ */ b("div", {
+					className: "flex flex-wrap items-center gap-2",
+					children: [/* @__PURE__ */ y("div", {
 						className: "flex flex-wrap gap-1",
 						children: [
 							"all",
@@ -178,26 +198,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-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-muted/80"}`,
+						].map((e) => /* @__PURE__ */ y("button", {
+							onClick: () => V(e),
+							"aria-pressed": B === 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 ${B === 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-primary text-primary-foreground" : "text-muted-foreground"}`,
-							children: /* @__PURE__ */ S(d, { className: "h-4 w-4" })
-						}), /* @__PURE__ */ S("button", {
-							onClick: () => I("list"),
-							className: `p-1.5 ${F === "list" ? "bg-primary text-primary-foreground" : "text-muted-foreground"}`,
-							children: /* @__PURE__ */ S(m, { className: "h-4 w-4" })
+					}), /* @__PURE__ */ b("div", {
+						className: "flex rounded border border-border-seam",
+						children: [/* @__PURE__ */ y("button", {
+							onClick: () => L("grid"),
+							"aria-label": "Grid view",
+							"aria-pressed": I === "grid",
+							className: `p-1.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus ${I === "grid" ? "bg-accent-blue text-action-primary-text" : "text-text-secondary"}`,
+							children: /* @__PURE__ */ y(l, { className: "h-4 w-4" })
+						}), /* @__PURE__ */ y("button", {
+							onClick: () => L("list"),
+							"aria-label": "List view",
+							"aria-pressed": I === "list",
+							className: `p-1.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus ${I === "list" ? "bg-accent-blue text-action-primary-text" : "text-text-secondary"}`,
+							children: /* @__PURE__ */ y(f, { className: "h-4 w-4" })
 						})]
 					})]
 				})]
 			}),
-			/* @__PURE__ */ S("div", {
+			/* @__PURE__ */ y("div", {
 				className: "flex gap-2",
 				children: [
 					{
@@ -212,29 +237,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-primary/5 text-primary" : "text-muted-foreground hover:bg-muted/50"}`,
-					children: [/* @__PURE__ */ S(r, { className: "h-3 w-3" }), t]
+				].map(({ field: e, label: t }) => /* @__PURE__ */ b("button", {
+					onClick: () => oe(e),
+					"aria-pressed": H === 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 ${H === e ? "border-accent-blue bg-accent-blue-subtle text-accent-blue" : "border-border-seam text-text-secondary hover:text-text-primary"}`,
+					children: [/* @__PURE__ */ y(ee, { className: "h-3 w-3" }), t]
 				}, e))
 			}),
-			!G && /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("h3", {
-				className: "mb-3 text-sm font-medium text-muted-foreground",
+			!K && /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("h3", {
+				className: "mb-3 text-sm font-medium text-text-secondary",
 				children: "Folders"
-			}), /* @__PURE__ */ S("div", {
+			}), /* @__PURE__ */ y("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-muted/50",
-					children: [/* @__PURE__ */ S(l, { className: `h-8 w-8 ${M[e.color] ?? "text-gray-500"}` }), /* @__PURE__ */ C("div", {
+				children: F.map((e) => /* @__PURE__ */ b("button", {
+					onClick: () => q(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__ */ y(s, { className: `h-8 w-8 ${re[e.color] ?? "text-text-secondary"}` }), /* @__PURE__ */ b("div", {
 						className: "min-w-0 flex-1",
-						children: [/* @__PURE__ */ S("p", {
+						children: [/* @__PURE__ */ y("p", {
 							className: "truncate font-medium text-sm",
 							children: e.name
-						}), /* @__PURE__ */ C("p", {
-							className: "text-xs text-muted-foreground",
+						}), /* @__PURE__ */ b("p", {
+							className: "text-xs text-text-secondary",
 							children: [
-								e.documentsCount,
+								/* @__PURE__ */ y("span", {
+									className: "tabular-nums",
+									children: e.documentsCount
+								}),
 								" files",
 								e.isPublic && " - Public"
 							]
@@ -242,206 +271,237 @@ function P() {
 					})]
 				}, e.id))
 			})] }),
-			/* @__PURE__ */ C("div", { children: [/* @__PURE__ */ C("h3", {
-				className: "mb-3 text-sm font-medium text-muted-foreground",
-				children: ["Files ", Z.length > 0 && `(${Z.length})`]
-			}), Z.length === 0 ? /* @__PURE__ */ S(T, { children: /* @__PURE__ */ S(E, {
-				className: "py-12 text-center text-muted-foreground",
-				children: "No files found. Try adjusting your filters."
-			}) }) : F === "grid" ? /* @__PURE__ */ S("div", {
+			/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ b("h3", {
+				className: "mb-3 text-sm font-medium text-text-secondary",
+				children: ["Files ", Q.length > 0 && `(${Q.length})`]
+			}), Q.length === 0 ? /* @__PURE__ */ y(w, {
+				className: "border-border-seam",
+				children: /* @__PURE__ */ y(T, {
+					className: "py-6",
+					children: /* @__PURE__ */ y(A, {
+						illustration: R || B !== "all" ? "empty-search" : "empty-files",
+						title: "No files found",
+						description: "Try adjusting your filters or upload a new document.",
+						action: /* @__PURE__ */ b(S, {
+							size: "sm",
+							onClick: () => Y(!0),
+							children: [/* @__PURE__ */ y(_, { className: "mr-2 h-4 w-4" }), " Upload"]
+						})
+					})
+				})
+			}) : I === "grid" ? /* @__PURE__ */ y("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-muted/30 transition-colors",
-					children: /* @__PURE__ */ C(E, {
+				children: Q.map((e) => /* @__PURE__ */ y(O, {
+					treatment: "plain",
+					className: "border-border-seam transition-shadow hover:shadow-pop",
+					children: /* @__PURE__ */ b(T, {
 						className: "pt-4",
 						children: [
-							/* @__PURE__ */ C("div", {
+							/* @__PURE__ */ b("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__ */ y(M[e.type] ?? a, { className: `h-10 w-10 ${N[e.type] ?? "text-text-secondary"}` }), /* @__PURE__ */ b("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-muted-foreground" })]
+									children: [e.isStarred && /* @__PURE__ */ y(g, { className: "h-4 w-4 fill-status-warning-text text-status-warning-text" }), e.sharedWith > 0 && /* @__PURE__ */ y(h, { className: "h-4 w-4 text-text-secondary" })]
 								})]
 							}),
-							/* @__PURE__ */ S("h4", {
+							/* @__PURE__ */ y("h4", {
 								className: "mt-3 truncate font-medium text-sm",
 								children: e.name
 							}),
-							/* @__PURE__ */ C("div", {
-								className: "mt-1 flex items-center gap-2 text-xs text-muted-foreground",
-								children: [/* @__PURE__ */ S("span", { children: N(e.size) }), /* @__PURE__ */ C("span", { children: ["v", e.version] })]
+							/* @__PURE__ */ b("div", {
+								className: "mt-1 flex items-center gap-2 text-xs text-text-secondary",
+								children: [/* @__PURE__ */ y("span", {
+									className: "tabular-nums",
+									children: P(e.size)
+								}), /* @__PURE__ */ b("span", {
+									className: "tabular-nums",
+									children: ["v", e.version]
+								})]
 							}),
-							/* @__PURE__ */ C("div", {
-								className: "mt-2 flex items-center gap-1 text-xs text-muted-foreground",
+							/* @__PURE__ */ b("div", {
+								className: "mt-2 flex items-center gap-1 text-xs text-text-secondary",
 								children: [
-									/* @__PURE__ */ S(a, { className: "h-3 w-3" }),
+									/* @__PURE__ */ y(r, { className: "h-3 w-3" }),
 									" ",
 									e.modifiedAt
 								]
 							}),
-							/* @__PURE__ */ C("div", {
+							/* @__PURE__ */ b("div", {
 								className: "mt-3 flex gap-1",
-								children: [/* @__PURE__ */ C(w, {
+								children: [/* @__PURE__ */ b(S, {
 									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__ */ y(i, { className: "mr-1 h-3 w-3" }), " Download"]
+								}), /* @__PURE__ */ y(S, {
 									variant: "outline",
 									size: "sm",
-									children: /* @__PURE__ */ S(h, { className: "h-3 w-3" })
+									"aria-label": "More actions",
+									children: /* @__PURE__ */ y(p, { 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-muted-foreground",
-							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-muted/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-muted-foreground",
-												children: [
-													/* @__PURE__ */ S(b, { className: "h-3 w-3" }),
-													" ",
-													e.sharedWith
-												]
-											})
-										]
+			}) : /* @__PURE__ */ y(w, {
+				className: "border-border-seam",
+				children: /* @__PURE__ */ y(T, {
+					className: "pt-4",
+					children: /* @__PURE__ */ y("div", {
+						className: "overflow-x-auto",
+						children: /* @__PURE__ */ b("table", {
+							className: "w-full text-sm",
+							children: [/* @__PURE__ */ y("thead", { children: /* @__PURE__ */ b("tr", {
+								className: "border-b border-border-seam text-left text-text-secondary",
+								children: [
+									/* @__PURE__ */ y("th", {
+										className: "p-3",
+										children: "Name"
+									}),
+									/* @__PURE__ */ y("th", {
+										className: "p-3",
+										children: "Type"
+									}),
+									/* @__PURE__ */ y("th", {
+										className: "p-3",
+										children: "Size"
+									}),
+									/* @__PURE__ */ y("th", {
+										className: "p-3",
+										children: "Modified"
+									}),
+									/* @__PURE__ */ y("th", {
+										className: "p-3",
+										children: "Uploaded By"
+									}),
+									/* @__PURE__ */ y("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-muted-foreground",
-									children: e.modifiedAt
-								}),
-								/* @__PURE__ */ S("td", {
-									className: "p-3 text-muted-foreground",
-									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__ */ y("tbody", { children: Q.map((e) => /* @__PURE__ */ b("tr", {
+								className: "border-b border-border-seam hover:bg-bg-sunken",
+								children: [
+									/* @__PURE__ */ y("td", {
+										className: "p-3",
+										children: /* @__PURE__ */ b("div", {
+											className: "flex items-center gap-2",
+											children: [
+												/* @__PURE__ */ y(M[e.type] ?? a, { className: `h-5 w-5 ${N[e.type] ?? "text-text-secondary"}` }),
+												/* @__PURE__ */ y("span", {
+													className: "font-medium",
+													children: e.name
+												}),
+												e.isStarred && /* @__PURE__ */ y(g, { className: "h-3 w-3 fill-status-warning-text text-status-warning-text" }),
+												e.sharedWith > 0 && /* @__PURE__ */ b("span", {
+													className: "flex items-center gap-0.5 text-xs text-text-secondary",
+													children: [
+														/* @__PURE__ */ y(v, { className: "h-3 w-3" }),
+														" ",
+														/* @__PURE__ */ y("span", {
+															className: "tabular-nums",
+															children: e.sharedWith
+														})
+													]
+												})
+											]
+										})
+									}),
+									/* @__PURE__ */ y("td", {
+										className: "p-3 uppercase text-xs",
+										children: e.type
+									}),
+									/* @__PURE__ */ y("td", {
+										className: "p-3 tabular-nums",
+										children: P(e.size)
+									}),
+									/* @__PURE__ */ y("td", {
+										className: "p-3 text-text-secondary",
+										children: e.modifiedAt
+									}),
+									/* @__PURE__ */ y("td", {
+										className: "p-3 text-text-secondary",
+										children: e.uploadedBy
+									}),
+									/* @__PURE__ */ y("td", {
+										className: "p-3",
+										children: /* @__PURE__ */ b("div", {
+											className: "flex justify-end gap-1",
+											children: [/* @__PURE__ */ y(S, {
+												variant: "outline",
+												size: "sm",
+												"aria-label": "Download",
+												children: /* @__PURE__ */ y(i, { className: "h-3 w-3" })
+											}), /* @__PURE__ */ y(S, {
+												variant: "outline",
+												size: "sm",
+												"aria-label": "Share",
+												children: /* @__PURE__ */ y(h, { 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", {
+			})] }),
+			J && /* @__PURE__ */ y("div", {
+				className: "fixed inset-0 z-50 flex items-center justify-center bg-bg-overlay",
+				children: /* @__PURE__ */ b(O, {
+					treatment: "glass",
+					className: "mx-4 w-full max-w-md border-border-seam",
+					children: [/* @__PURE__ */ y(E, { children: /* @__PURE__ */ b("div", {
 						className: "flex items-center justify-between",
-						children: [/* @__PURE__ */ S(O, { children: "Upload Files" }), /* @__PURE__ */ S(w, {
+						children: [/* @__PURE__ */ y(D, { children: "Upload Files" }), /* @__PURE__ */ y(S, {
 							variant: "outline",
 							size: "sm",
-							onClick: () => J(!1),
+							onClick: () => Y(!1),
 							children: "Close"
 						})]
-					}) }), /* @__PURE__ */ C(E, {
+					}) }), /* @__PURE__ */ b(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__ */ b("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-muted-foreground" }),
-									/* @__PURE__ */ S("p", {
+									/* @__PURE__ */ y(_, { className: "h-10 w-10 text-text-secondary" }),
+									/* @__PURE__ */ y("p", {
 										className: "mt-2 text-sm font-medium",
 										children: "Drag & drop files here"
 									}),
-									/* @__PURE__ */ S("p", {
-										className: "text-xs text-muted-foreground",
+									/* @__PURE__ */ y("p", {
+										className: "text-xs text-text-secondary",
 										children: "or click to browse"
 									})
 								]
 							}),
-							/* @__PURE__ */ C("div", {
+							/* @__PURE__ */ b("div", {
 								className: "space-y-2",
-								children: [/* @__PURE__ */ S("label", {
+								children: [/* @__PURE__ */ y("label", {
 									className: "text-sm font-medium",
+									htmlFor: "upload-folder",
 									children: "Destination Folder"
-								}), /* @__PURE__ */ C("select", {
-									className: "w-full rounded border bg-background px-3 py-2 text-sm",
-									children: [/* @__PURE__ */ S("option", {
+								}), /* @__PURE__ */ b("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__ */ y("option", {
 										value: "",
 										children: "Root"
-									}), P.map((e) => /* @__PURE__ */ S("option", {
+									}), F.map((e) => /* @__PURE__ */ y("option", {
 										value: e.id,
 										children: e.name
 									}, e.id))]
 								})]
 							}),
-							/* @__PURE__ */ C("div", {
+							/* @__PURE__ */ b("div", {
 								className: "flex gap-2",
-								children: [/* @__PURE__ */ S(w, {
+								children: [/* @__PURE__ */ y(S, {
 									variant: "outline",
 									className: "flex-1",
-									onClick: () => J(!1),
+									onClick: () => Y(!1),
 									children: "Cancel"
-								}), /* @__PURE__ */ S(w, {
+								}), /* @__PURE__ */ y(S, {
 									className: "flex-1",
 									children: "Upload"
 								})]
@@ -450,34 +510,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", {
+			X && /* @__PURE__ */ y("div", {
+				className: "fixed inset-0 z-50 flex items-center justify-center bg-bg-overlay",
+				children: /* @__PURE__ */ b(O, {
+					treatment: "glass",
+					className: "mx-4 w-full max-w-md border-border-seam",
+					children: [/* @__PURE__ */ y(E, { children: /* @__PURE__ */ b("div", {
 						className: "flex items-center justify-between",
-						children: [/* @__PURE__ */ S(O, { children: "Create Folder" }), /* @__PURE__ */ S(w, {
+						children: [/* @__PURE__ */ y(D, { children: "Create Folder" }), /* @__PURE__ */ y(S, {
 							variant: "outline",
 							size: "sm",
-							onClick: () => X(!1),
+							onClick: () => Z(!1),
 							children: "Close"
 						})]
-					}) }), /* @__PURE__ */ C(E, {
+					}) }), /* @__PURE__ */ b(T, {
 						className: "space-y-4",
-						children: [/* @__PURE__ */ C("div", {
+						children: [/* @__PURE__ */ b("div", {
 							className: "space-y-2",
-							children: [/* @__PURE__ */ S("label", {
+							children: [/* @__PURE__ */ y("label", {
 								className: "text-sm font-medium",
+								htmlFor: "folder-name",
 								children: "Folder Name"
-							}), /* @__PURE__ */ S(k, { placeholder: "Enter folder name..." })]
-						}), /* @__PURE__ */ C("div", {
+							}), /* @__PURE__ */ y(j, {
+								id: "folder-name",
+								placeholder: "Enter folder name..."
+							})]
+						}), /* @__PURE__ */ b("div", {
 							className: "flex gap-2",
-							children: [/* @__PURE__ */ S(w, {
+							children: [/* @__PURE__ */ y(S, {
 								variant: "outline",
 								className: "flex-1",
-								onClick: () => X(!1),
+								onClick: () => Z(!1),
 								children: "Cancel"
-							}), /* @__PURE__ */ S(w, {
+							}), /* @__PURE__ */ y(S, {
 								className: "flex-1",
 								children: "Create"
 							})]
@@ -489,6 +554,6 @@ function P() {
 	});
 }
 //#endregion
-export { P as DocumentsPage };
+export { F as DocumentsPage };
 
 //# sourceMappingURL=DocumentsPage.js.map