@dirwell/theme-crosswave 0.0.1-alpha → 0.0.1

package/dist/source/component.d.mts

@@ -1,4 +1,4 @@
 import type {DefineComponent, SlotsType, VNode, ComponentOptionsMixin, PublicProps} from 'vue';
 import type {ThemePage, RowContext} from '../model.mjs';
-export interface CrosswaveSlots {header?: (props: {model: ThemePage}) => VNode[]; row?: (props: RowContext) => VNode[]; footer?: (props: {model: ThemePage}) => VNode[];}
+export interface CrosswaveSlots {header?: (props: {model: ThemePage}) => VNode[]; row?: (props: RowContext) => VNode[]; actions?: (props: RowContext) => VNode[]; footer?: (props: {model: ThemePage}) => VNode[];}
 declare const Crosswave: DefineComponent<{model: ThemePage}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, {model: ThemePage}, {}, SlotsType<CrosswaveSlots>>; export default Crosswave;

package/dist/source/shared/customization.mjs

@@ -0,0 +1,255 @@
+// ../shared-theme/src/customization.ts
+var defaultLabels = {
+  other: "other",
+  crosswaveKeyboardHelp: "Arrow keys navigate \xB7 Enter confirms \xB7 Backspace returns",
+  brokenLink: "broken link",
+  unavailableLink: "unavailable link",
+  cycleLink: "cycle link",
+  azure: "azure",
+  violet: "violet",
+  amber: "amber",
+  rose: "rose",
+  jade: "jade",
+  graphite: "graphite",
+  allFiles: "All files",
+  categoryFolders: "Folders",
+  categoryPhotos: "Photos",
+  categoryMusic: "Music",
+  categoryVideos: "Videos",
+  categoryDocuments: "Documents",
+  categoryOther: "Other",
+  indexOf: "Index of {path}",
+  home: "Home",
+  breadcrumb: "Breadcrumb",
+  archive: "File archive",
+  searchDirectory: "Search this directory",
+  searchFiles: "Search files",
+  search: "Search",
+  types: "Types",
+  directory: "directory",
+  file: "file",
+  link: "link",
+  folder: "Folder",
+  sort: "Sort",
+  name: "Name",
+  size: "Size",
+  modified: "Modified",
+  names: "Names",
+  natural: "Natural",
+  locale: "Locale",
+  unicode: "Unicode",
+  order: "Order",
+  ascending: "Ascending",
+  descending: "Descending",
+  directoriesFirst: "Folders first",
+  appearance: "Appearance",
+  system: "System",
+  light: "Light",
+  dark: "Dark",
+  searchArchive: "Search archive",
+  archiveSearchInput: "Search archive files",
+  entries: "{count} entries",
+  pageEntries: "{total} entries \xB7 {count} on this page",
+  loading: "Loading\u2026",
+  noMatches: "No matching entries.",
+  empty: "This directory is empty.",
+  pagination: "Pagination",
+  previous: "Previous",
+  next: "Next",
+  page: "Page {page} of {pages}",
+  keyboardHelp: "Arrow keys select files \xB7 Home / End jump \xB7 / searches \xB7 Backspace opens parent",
+  modifiedTime: "Modified time",
+  close: "Close",
+  unknown: "Unknown",
+  unavailable: "Target unavailable",
+  beginArchive: "Enter a search to begin.",
+  searchingArchive: "Searching archive\u2026",
+  archiveResults: "{count} results",
+  truncatedResults: "Showing {shown} of {count} results",
+  archiveError: "Could not load archive search. Try again.",
+  listingError: "Could not load complete directory data. Native page links remain available.",
+  folderError: "Could not open the folder. Its native link remains available.",
+  updatesError: "Live updates disconnected. Refresh to retry.",
+  retry: "Retry",
+  openNative: "Open folder directly",
+  categories: "File categories",
+  items: "{count} items",
+  filesIn: "Files in {path}",
+  controller: "Controller \xB7 Confirm / Back",
+  color: "Color",
+  pauseMotion: "Pause motion",
+  resumeMotion: "Resume motion",
+  copyLink: "Copy link",
+  copyPath: "Copy path",
+  download: "Download",
+  copied: "Copied.",
+  copyError: "Could not copy. Use the native link or select the path.",
+  repository: "Repository",
+  author: "by",
+  target: "Target",
+  newTab: "opens in a new tab"
+};
+function resolveCustomization(options = {}) {
+  const language = options.language === void 0 ? "en" : options.language, locale = options.locale === void 0 ? "en-US" : options.locale, timeZone = options.timeZone === void 0 ? "UTC" : options.timeZone;
+  for (const [key, value] of Object.entries({ language, locale, timeZone }))
+    if (typeof value !== "string" || !value)
+      throw new TypeError(`${key} must be a non-empty string`);
+  new Intl.DateTimeFormat(locale, { timeZone });
+  const direction = options.direction ?? "ltr";
+  if (direction !== "ltr" && direction !== "rtl")
+    throw new TypeError("direction must be ltr or rtl");
+  const labels = { ...defaultLabels };
+  if (options.labels !== void 0) {
+    if (typeof options.labels !== "object" || options.labels === null || Array.isArray(options.labels))
+      throw new TypeError("labels must be an object");
+    for (const [key, value] of Object.entries(options.labels)) {
+      if (!Object.hasOwn(labels, key) || typeof value !== "string")
+        throw new TypeError(`Unsupported label or value: ${key}`);
+      Object.assign(labels, { [key]: value });
+    }
+  }
+  const brand = options.brand ?? {};
+  if (typeof brand !== "object" || brand === null || Array.isArray(brand))
+    throw new TypeError("brand must be an object");
+  for (const [key, value] of Object.entries(brand)) {
+    if (!["name", "logoUrl", "logoAlt", "footerText", "footerUrl", "faviconUrl"].includes(key) || typeof value !== "string")
+      throw new TypeError(`Unsupported brand option or value: ${key}`);
+    if (key.endsWith("Url") && !/^https?:\/\//i.test(value) && !(value.startsWith("/") && !value.startsWith("//")))
+      throw new TypeError(`brand.${key} must be an HTTP(S) or root-relative URL`);
+  }
+  const columns = options.columns ?? ["name", "size", "modified"];
+  if (!Array.isArray(columns) || !columns.includes("name"))
+    throw new TypeError("columns must contain name and unique supported columns");
+  const columnIds = /* @__PURE__ */ new Set();
+  for (const column of columns) {
+    let id;
+    if (typeof column === "string") {
+      if (!["name", "size", "modified"].includes(column)) throw new TypeError("Unsupported column");
+      id = column;
+    } else {
+      if (typeof column !== "object" || column === null || Object.keys(column).some((key) => !["dataKey", "label"].includes(key)) || typeof column.dataKey !== "string" || !column.dataKey || typeof column.label !== "string" || !column.label)
+        throw new TypeError("Data columns require dataKey and label");
+      id = "data:" + column.dataKey;
+    }
+    if (columnIds.has(id)) throw new TypeError("columns must contain unique supported columns");
+    columnIds.add(id);
+  }
+  const actions = options.actions ?? [];
+  if (!Array.isArray(actions) || new Set(actions).size !== actions.length || actions.some((key) => !["copy-link", "copy-path", "download"].includes(key)))
+    throw new TypeError("actions must contain unique supported actions");
+  const cssVariables = options.cssVariables ?? {};
+  if (typeof cssVariables !== "object" || cssVariables === null || Array.isArray(cssVariables))
+    throw new TypeError("cssVariables must be an object");
+  for (const [key, value] of Object.entries(cssVariables))
+    if (!/^--[a-zA-Z][a-zA-Z0-9_-]*$/.test(key) || typeof value !== "string" || /[{};<>]/.test(value))
+      throw new TypeError(`Invalid CSS variable: ${key}`);
+  return {
+    language,
+    dateOptions: {
+      ...options.locale === void 0 ? {} : { locale: options.locale },
+      ...options.timeZone === void 0 ? {} : { timeZone: options.timeZone }
+    },
+    direction,
+    locale,
+    timeZone,
+    labels,
+    brand: { ...brand },
+    columns: columns.map((column) => typeof column === "string" ? column : { ...column }),
+    actions: [...actions],
+    cssVariables: { ...cssVariables }
+  };
+}
+var defaultCustomization = resolveCustomization();
+function label(ui, key, values = {}) {
+  return ui.labels[key].replace(
+    /\{([a-zA-Z]+)\}/g,
+    (match, name) => Object.hasOwn(values, name) ? String(values[name]) : match
+  );
+}
+var dateFormats = /* @__PURE__ */ new Map();
+function formattedDate(value, ui, local = false) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return ui.labels.unknown;
+  if (ui.dateOptions.locale === void 0 && ui.dateOptions.timeZone === void 0)
+    return local ? date.toLocaleString(void 0, { dateStyle: "short", timeStyle: "short" }) : date.toISOString().slice(0, 16).replace("T", " ") + " UTC";
+  const locale = ui.dateOptions.locale, timeZone = ui.dateOptions.timeZone ?? (local ? void 0 : "UTC");
+  const key = String(locale) + "\0" + String(timeZone);
+  let formatter = dateFormats.get(key);
+  if (formatter === void 0) {
+    formatter = new Intl.DateTimeFormat(locale, {
+      timeZone,
+      dateStyle: "short",
+      timeStyle: "short"
+    });
+    if (dateFormats.size >= 32) dateFormats.delete(dateFormats.keys().next().value);
+    dateFormats.set(key, formatter);
+  }
+  return formatter.format(date);
+}
+function customizationCss(ui) {
+  const declarations = Object.entries(ui.cssVariables).map(([key, value]) => `${key}:${value}`).join(";");
+  return declarations ? `:root:root{${declarations}}${ui.cssVariables["--dw-font-family"] ? "body{font-family:var(--dw-font-family)}" : ""}` : "";
+}
+async function copyEntryAction(action, entry) {
+  const value = action === "copy-link" && entry.href ? new URL(entry.href, document.baseURI).href : entry.id;
+  if (!navigator.clipboard?.writeText) throw new Error("Clipboard unavailable");
+  await navigator.clipboard.writeText(value);
+}
+function pickCustomization(options) {
+  const result = {};
+  for (const key of [
+    "language",
+    "direction",
+    "locale",
+    "timeZone",
+    "labels",
+    "brand",
+    "columns",
+    "actions",
+    "cssVariables"
+  ])
+    if (options[key] !== void 0) {
+      const value = options[key];
+      Object.assign(result, {
+        [key]: Array.isArray(value) ? value.map((item) => typeof item === "object" ? { ...item } : item) : typeof value === "object" && value !== null ? { ...value } : value
+      });
+    }
+  return Object.keys(result).length ? result : void 0;
+}
+function assertThemeOptions(value, extraKeys) {
+  if (typeof value !== "object" || value === null || Array.isArray(value))
+    throw new TypeError("Theme options must be an object");
+  const allowed = [
+    "language",
+    "direction",
+    "locale",
+    "timeZone",
+    "labels",
+    "brand",
+    "columns",
+    "actions",
+    "cssVariables",
+    ...extraKeys
+  ];
+  for (const key of Object.keys(value))
+    if (!allowed.includes(key)) throw new TypeError(`Unsupported theme option: ${key}`);
+}
+function columnLabel(column, ui) {
+  return typeof column === "string" ? ui.labels[column] : column.label;
+}
+function publicDataValue(value) {
+  return value === void 0 || value === null ? "" : typeof value === "object" ? JSON.stringify(value) : String(value);
+}
+export {
+  assertThemeOptions,
+  columnLabel,
+  copyEntryAction,
+  customizationCss,
+  defaultCustomization,
+  defaultLabels,
+  formattedDate,
+  label,
+  pickCustomization,
+  publicDataValue,
+  resolveCustomization
+};

package/dist/source/shared/navigation.mjs

@@ -72,6 +72,7 @@ function entry(value, base) {
     };
   }
   return {
+    ...value.data === void 0 ? {} : { data: copyJsonObject(value.data) },
     ...value.presentation === void 0 ? {} : { presentation: copyJsonObject(value.presentation) },
     id: string(value.id, "id"),
     name: string(value.name, "name"),
@@ -175,6 +176,169 @@ function parseListingEntries(value, baseHref, maxEntries = 1e5) {
   return result;
 }
 
+// ../shared-theme/src/customization.ts
+var defaultLabels = {
+  other: "other",
+  crosswaveKeyboardHelp: "Arrow keys navigate \xB7 Enter confirms \xB7 Backspace returns",
+  brokenLink: "broken link",
+  unavailableLink: "unavailable link",
+  cycleLink: "cycle link",
+  azure: "azure",
+  violet: "violet",
+  amber: "amber",
+  rose: "rose",
+  jade: "jade",
+  graphite: "graphite",
+  allFiles: "All files",
+  categoryFolders: "Folders",
+  categoryPhotos: "Photos",
+  categoryMusic: "Music",
+  categoryVideos: "Videos",
+  categoryDocuments: "Documents",
+  categoryOther: "Other",
+  indexOf: "Index of {path}",
+  home: "Home",
+  breadcrumb: "Breadcrumb",
+  archive: "File archive",
+  searchDirectory: "Search this directory",
+  searchFiles: "Search files",
+  search: "Search",
+  types: "Types",
+  directory: "directory",
+  file: "file",
+  link: "link",
+  folder: "Folder",
+  sort: "Sort",
+  name: "Name",
+  size: "Size",
+  modified: "Modified",
+  names: "Names",
+  natural: "Natural",
+  locale: "Locale",
+  unicode: "Unicode",
+  order: "Order",
+  ascending: "Ascending",
+  descending: "Descending",
+  directoriesFirst: "Folders first",
+  appearance: "Appearance",
+  system: "System",
+  light: "Light",
+  dark: "Dark",
+  searchArchive: "Search archive",
+  archiveSearchInput: "Search archive files",
+  entries: "{count} entries",
+  pageEntries: "{total} entries \xB7 {count} on this page",
+  loading: "Loading\u2026",
+  noMatches: "No matching entries.",
+  empty: "This directory is empty.",
+  pagination: "Pagination",
+  previous: "Previous",
+  next: "Next",
+  page: "Page {page} of {pages}",
+  keyboardHelp: "Arrow keys select files \xB7 Home / End jump \xB7 / searches \xB7 Backspace opens parent",
+  modifiedTime: "Modified time",
+  close: "Close",
+  unknown: "Unknown",
+  unavailable: "Target unavailable",
+  beginArchive: "Enter a search to begin.",
+  searchingArchive: "Searching archive\u2026",
+  archiveResults: "{count} results",
+  truncatedResults: "Showing {shown} of {count} results",
+  archiveError: "Could not load archive search. Try again.",
+  listingError: "Could not load complete directory data. Native page links remain available.",
+  folderError: "Could not open the folder. Its native link remains available.",
+  updatesError: "Live updates disconnected. Refresh to retry.",
+  retry: "Retry",
+  openNative: "Open folder directly",
+  categories: "File categories",
+  items: "{count} items",
+  filesIn: "Files in {path}",
+  controller: "Controller \xB7 Confirm / Back",
+  color: "Color",
+  pauseMotion: "Pause motion",
+  resumeMotion: "Resume motion",
+  copyLink: "Copy link",
+  copyPath: "Copy path",
+  download: "Download",
+  copied: "Copied.",
+  copyError: "Could not copy. Use the native link or select the path.",
+  repository: "Repository",
+  author: "by",
+  target: "Target",
+  newTab: "opens in a new tab"
+};
+function resolveCustomization(options = {}) {
+  const language = options.language === void 0 ? "en" : options.language, locale = options.locale === void 0 ? "en-US" : options.locale, timeZone = options.timeZone === void 0 ? "UTC" : options.timeZone;
+  for (const [key, value] of Object.entries({ language, locale, timeZone }))
+    if (typeof value !== "string" || !value)
+      throw new TypeError(`${key} must be a non-empty string`);
+  new Intl.DateTimeFormat(locale, { timeZone });
+  const direction = options.direction ?? "ltr";
+  if (direction !== "ltr" && direction !== "rtl")
+    throw new TypeError("direction must be ltr or rtl");
+  const labels = { ...defaultLabels };
+  if (options.labels !== void 0) {
+    if (typeof options.labels !== "object" || options.labels === null || Array.isArray(options.labels))
+      throw new TypeError("labels must be an object");
+    for (const [key, value] of Object.entries(options.labels)) {
+      if (!Object.hasOwn(labels, key) || typeof value !== "string")
+        throw new TypeError(`Unsupported label or value: ${key}`);
+      Object.assign(labels, { [key]: value });
+    }
+  }
+  const brand = options.brand ?? {};
+  if (typeof brand !== "object" || brand === null || Array.isArray(brand))
+    throw new TypeError("brand must be an object");
+  for (const [key, value] of Object.entries(brand)) {
+    if (!["name", "logoUrl", "logoAlt", "footerText", "footerUrl", "faviconUrl"].includes(key) || typeof value !== "string")
+      throw new TypeError(`Unsupported brand option or value: ${key}`);
+    if (key.endsWith("Url") && !/^https?:\/\//i.test(value) && !(value.startsWith("/") && !value.startsWith("//")))
+      throw new TypeError(`brand.${key} must be an HTTP(S) or root-relative URL`);
+  }
+  const columns = options.columns ?? ["name", "size", "modified"];
+  if (!Array.isArray(columns) || !columns.includes("name"))
+    throw new TypeError("columns must contain name and unique supported columns");
+  const columnIds = /* @__PURE__ */ new Set();
+  for (const column of columns) {
+    let id;
+    if (typeof column === "string") {
+      if (!["name", "size", "modified"].includes(column)) throw new TypeError("Unsupported column");
+      id = column;
+    } else {
+      if (typeof column !== "object" || column === null || Object.keys(column).some((key) => !["dataKey", "label"].includes(key)) || typeof column.dataKey !== "string" || !column.dataKey || typeof column.label !== "string" || !column.label)
+        throw new TypeError("Data columns require dataKey and label");
+      id = "data:" + column.dataKey;
+    }
+    if (columnIds.has(id)) throw new TypeError("columns must contain unique supported columns");
+    columnIds.add(id);
+  }
+  const actions = options.actions ?? [];
+  if (!Array.isArray(actions) || new Set(actions).size !== actions.length || actions.some((key) => !["copy-link", "copy-path", "download"].includes(key)))
+    throw new TypeError("actions must contain unique supported actions");
+  const cssVariables = options.cssVariables ?? {};
+  if (typeof cssVariables !== "object" || cssVariables === null || Array.isArray(cssVariables))
+    throw new TypeError("cssVariables must be an object");
+  for (const [key, value] of Object.entries(cssVariables))
+    if (!/^--[a-zA-Z][a-zA-Z0-9_-]*$/.test(key) || typeof value !== "string" || /[{};<>]/.test(value))
+      throw new TypeError(`Invalid CSS variable: ${key}`);
+  return {
+    language,
+    dateOptions: {
+      ...options.locale === void 0 ? {} : { locale: options.locale },
+      ...options.timeZone === void 0 ? {} : { timeZone: options.timeZone }
+    },
+    direction,
+    locale,
+    timeZone,
+    labels,
+    brand: { ...brand },
+    columns: columns.map((column) => typeof column === "string" ? column : { ...column }),
+    actions: [...actions],
+    cssVariables: { ...cssVariables }
+  };
+}
+var defaultCustomization = resolveCustomization();
+
 // ../shared-theme/src/navigation.ts
 async function fetchThemePage(dataHref, pageHref, theme, signal, fresh = false, attempt = 0) {
   const source = new URL(dataHref, document.baseURI);
@@ -190,6 +354,20 @@ async function fetchThemePage(dataHref, pageHref, theme, signal, fresh = false,
     throw new ListingDataError("Unsupported folder snapshot");
   if (data.metadataHead !== void 0 && typeof data.metadataHead !== "string")
     throw new ListingDataError("Invalid folder metadata");
+  const sort = data.sort;
+  if (!sort || typeof sort !== "object" || !["name", "size", "modified"].includes(String(sort.field)) || !["asc", "desc"].includes(String(sort.direction)) || !["natural", "locale", "unicode"].includes(String(sort.nameMode)) || typeof sort.directoriesFirst !== "boolean")
+    throw new ListingDataError("Invalid folder order");
+  if (theme === "crosswave") {
+    const categories = data.categories;
+    const ids = /* @__PURE__ */ new Set();
+    if (!Array.isArray(categories) || categories.length === 0 || categories.some((category) => {
+      if (typeof category !== "object" || category === null || typeof category.id !== "string" || !category.id || ids.has(category.id) || typeof category.label !== "string" || typeof category.svg !== "string")
+        return true;
+      ids.add(category.id);
+      return false;
+    }))
+      throw new ListingDataError("Invalid folder categories");
+  }
   const base = document.querySelector("base")?.href ?? pageHref;
   const link = (raw) => {
     if (raw === null) return null;
@@ -209,6 +387,19 @@ async function fetchThemePage(dataHref, pageHref, theme, signal, fresh = false,
     } : {}
   }));
   if (entries.length > Number(data.total)) throw new ListingDataError("Invalid folder count");
+  if (data.page !== null) {
+    const page = data.page;
+    if (!page || typeof page !== "object" || !Number.isSafeInteger(page.number) || Number(page.number) < 1 || !Number.isSafeInteger(page.count) || Number(page.count) < Number(page.number) || !Number.isSafeInteger(page.offset) || Number(page.offset) < 0 || Number(page.offset) > Number(data.total) || page.total !== data.total)
+      throw new ListingDataError("Invalid folder pagination");
+    data.page = {
+      ...page,
+      href: link(page.href),
+      previousHref: link(page.previousHref),
+      nextHref: link(page.nextHref)
+    };
+  }
+  if (data.ui !== void 0)
+    resolveCustomization(data.ui);
   const result = {
     ...data,
     updatesHref: link(data.updatesHref ?? null),
@@ -225,8 +416,11 @@ async function fetchThemePage(dataHref, pageHref, theme, signal, fresh = false,
       return { name: raw.name, href: link(raw.href), dataHref: link(raw.dataHref) };
     })
   };
-  if (fresh && result.manifestHref) {
-    const loaded = await loadListing(result.manifestHref, { signal, cache: "no-store" });
+  if (result.manifestHref) {
+    const loaded = await loadListing(result.manifestHref, {
+      signal,
+      cache: fresh ? "no-store" : "default"
+    });
     if (loaded.manifest.total !== data.total || data.listingRevision !== void 0 && loaded.manifest.revision !== data.listingRevision) {
       if (attempt < 2) return fetchThemePage(dataHref, pageHref, theme, signal, true, attempt + 1);
       throw new ListingDataError("Folder changed while refreshing");

package/dist/source/shared/view-state.mjs

@@ -0,0 +1,128 @@
+// ../shared-theme/src/view-state.ts
+var supportedTypes = ["directory", "file", "link"];
+function validSort(value) {
+  if (typeof value !== "object" || value === null) return false;
+  const sort = value;
+  return ["name", "size", "modified"].includes(String(sort.field)) && ["asc", "desc"].includes(String(sort.direction)) && ["natural", "locale", "unicode"].includes(String(sort.nameMode)) && typeof sort.directoriesFirst === "boolean";
+}
+function position(value) {
+  return typeof value === "number" && Number.isFinite(value) ? Math.max(0, Math.min(value, 1e9)) : 0;
+}
+function readView(href, theme, path, defaults, categories = [], historyState = null) {
+  const params = new URL(href).searchParams;
+  const result = {
+    ...defaults,
+    query: (params.get("dw.q") ?? "").slice(0, 4096),
+    selected: null,
+    windowY: 0,
+    listTop: 0
+  };
+  if (theme === "ledger") {
+    const parts = params.get("dw.sort")?.split(":");
+    if (parts?.length === 4) {
+      const sort = {
+        field: parts[0],
+        direction: parts[1],
+        nameMode: parts[2],
+        directoriesFirst: parts[3] === "folders"
+      };
+      if (["folders", "mixed"].includes(parts[3]) && validSort(sort)) result.sort = sort;
+    }
+    if (params.has("dw.types")) {
+      const types = params.get("dw.types").split(",").filter(Boolean);
+      if (types.every((type) => supportedTypes.includes(type))) result.types = [...new Set(types)];
+    }
+  } else {
+    const category = params.get("dw.category");
+    if (category !== null && categories.includes(category)) result.category = category;
+  }
+  if (typeof historyState === "object" && historyState !== null && "dirwell" in historyState) {
+    const state = historyState.dirwell;
+    if (typeof state === "object" && state !== null && "version" in state && state.version === 1 && "theme" in state && state.theme === theme && "path" in state && state.path === path && "view" in state && typeof state.view === "object" && state.view !== null) {
+      const view = state.view;
+      result.selected = typeof view.selected === "string" && view.selected.length <= 4096 ? view.selected : null;
+      result.windowY = position(view.windowY);
+      result.listTop = position(view.listTop);
+    }
+  }
+  return result;
+}
+function viewHref(href, theme, view, defaults) {
+  const url = new URL(href);
+  for (const key of ["dw.q", "dw.sort", "dw.types", "dw.category"]) url.searchParams.delete(key);
+  if (view.query) url.searchParams.set("dw.q", view.query.slice(0, 4096));
+  if (theme === "ledger") {
+    if (view.sort && ["field", "direction", "nameMode", "directoriesFirst"].some(
+      (key) => view.sort[key] !== defaults.sort?.[key]
+    )) {
+      const sort = view.sort;
+      url.searchParams.set(
+        "dw.sort",
+        `${sort.field}:${sort.direction}:${sort.nameMode}:${sort.directoriesFirst ? "folders" : "mixed"}`
+      );
+    }
+    if (view.types && supportedTypes.some(
+      (type) => view.types.includes(type) !== (defaults.types ?? supportedTypes).includes(type)
+    ))
+      url.searchParams.set("dw.types", view.types.join(","));
+  } else if (view.category && view.category !== defaults.category)
+    url.searchParams.set("dw.category", view.category);
+  return url.href;
+}
+function createViewHistory(theme) {
+  let committedHref = location.href;
+  let committedState = history.state;
+  const stateFor = (dataHref, path, view) => ({
+    ...typeof history.state === "object" && history.state !== null ? history.state : {},
+    dataHref,
+    dirwell: {
+      version: 1,
+      theme,
+      path,
+      ...view === void 0 ? {} : {
+        view: {
+          query: view.query,
+          ...view.sort === void 0 ? {} : { sort: { ...view.sort } },
+          ...view.types === void 0 ? {} : { types: [...view.types] },
+          category: view.category ?? null,
+          selected: view.selected ?? null,
+          windowY: view.windowY ?? 0,
+          listTop: view.listTop ?? 0
+        }
+      }
+    }
+  });
+  return {
+    save(dataHref, path, view, defaults) {
+      if (location.href !== committedHref) return;
+      const href = viewHref(committedHref, theme, view, defaults);
+      const state = stateFor(dataHref, path, view);
+      try {
+        history.replaceState(state, "", href);
+        committedHref = href;
+        committedState = state;
+      } catch {
+      }
+    },
+    commit(dataHref, path, href, push) {
+      const state = stateFor(dataHref, path);
+      if (push) history.pushState(state, "", href);
+      else history.replaceState(state, "", href);
+      committedHref = href;
+      committedState = state;
+    },
+    rollback() {
+      if (location.href !== committedHref) {
+        try {
+          history.replaceState(committedState, "", committedHref);
+        } catch {
+        }
+      }
+    }
+  };
+}
+export {
+  createViewHistory,
+  readView,
+  viewHref
+};

package/dist/styles.css

@@ -1,11 +1,15 @@
 
+.cw-custom-footer{min-width:0;overflow-wrap:anywhere;font-size:14px;flex:1 1 auto}.cw-data-value{min-width:0;overflow-wrap:anywhere}.cw-row[data-custom-columns=true] .cw-row-date{display:block}
+
+.cw-row-actions{display:flex;flex-wrap:wrap;gap:.5rem;padding:0 12px 12px}.cw-row-actions button,.cw-row-actions a{min-height:44px;padding:8px 12px;border:1px solid currentColor;background:transparent;border-radius:4px}
+
 :root{color-scheme:dark;--cw-top:#2b4f85;--cw-bottom:#091a3a;--cw-text:#f7fbff;--cw-muted:#edf4fc;--cw-focus:#fff;--cw-ease:cubic-bezier(.16,1,.3,1);font-family:"Segoe UI",Helvetica,Arial,sans-serif;font-synthesis:none}
 :root[data-cw-color=violet]{--cw-top:#5c407d;--cw-bottom:#241532;--cw-muted:#edf4fc}:root[data-cw-color=amber]{--cw-top:#704d1a;--cw-bottom:#30200b;--cw-muted:#edf4fc}:root[data-cw-color=rose]{--cw-top:#704055;--cw-bottom:#351b29;--cw-muted:#edf4fc}:root[data-cw-color=jade]{--cw-top:#215e52;--cw-bottom:#0b2a28;--cw-muted:#edf4fc}:root[data-cw-color=graphite]{--cw-top:#424d61;--cw-bottom:#181d28;--cw-muted:#edf4fc}
 *{box-sizing:border-box}[hidden]{display:none!important}html{scroll-padding-bottom:110px;min-height:100%;background:var(--cw-bottom)}body{margin:0;color:var(--cw-text);background:var(--cw-bottom);min-height:100svh;font-size:16px;line-height:1.5}::selection{background:#d0e4fc;color:#132848}a{color:inherit;text-decoration:none}button,input,select{font:inherit;color:inherit}button,select{cursor:pointer}button{border:0}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cw-focus);outline-offset:6px;border-radius:3px}svg{display:block;width:24px;height:24px;flex:none}.cw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.cw-skip{position:fixed;left:24px;top:16px;padding:12px 18px;background:#fff;color:#142e53;z-index:20;transform:translateY(-150%)}.cw-skip:focus{transform:none}
 .cw-background{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 28% 4%,#c0d7ff12,transparent 68%),linear-gradient(165deg,var(--cw-top),var(--cw-bottom));view-transition-name:cw-background;overflow:hidden}.cw-background canvas{width:100%;height:100%;display:block}.cw-fallback-wave{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#d5e8ff;stroke-width:18;opacity:.06;filter:blur(3px)}.cw-background[data-ready] .cw-fallback-wave{display:none}
 .cw-top,.cw-stage,.cw-bottom,.cw-noscript{position:relative;z-index:1}.cw-top{display:flex;align-items:center;gap:32px;padding:30px 48px 20px;min-height:92px;view-transition-name:cw-header}.cw-brand{font-size:20px;font-weight:500;letter-spacing:-.02em;white-space:nowrap}.cw-brand>a:hover{text-decoration:underline;text-underline-offset:5px}.cw-location{display:flex;gap:12px;align-items:center;min-width:0;flex-wrap:wrap;font-size:13px;color:var(--cw-muted)}.cw-location a:hover{text-decoration:underline;text-underline-offset:5px}.cw-separator{opacity:.6}.cw-clock{margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:14px;color:var(--cw-muted)}
 .cw-stage{max-width:1500px;margin:28px auto 110px;padding:0 72px;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(220px,1fr);column-gap:80px}.cw-rail{grid-column:1/-1;margin:0 -12px 22px;overflow-x:auto;padding:12px 12px 24px;scrollbar-width:none}.cw-rail::-webkit-scrollbar{display:none}.cw-categories{padding-left:104px;padding-right:calc(100vw - 200px);display:flex;gap:32px;min-width:max-content;align-items:flex-start}.cw-category{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:94px;min-height:96px;background:none;padding:10px 4px;color:var(--cw-muted);transition:color .2s,transform .3s var(--cw-ease);flex:none}.cw-category svg{width:40px;height:40px;filter:drop-shadow(0 3px 2px #07182a55)}.cw-category span{font-size:14px;white-space:nowrap}.cw-category small{font-size:10px;position:absolute;right:8px;top:0;color:var(--cw-muted)}.cw-category:hover{color:#fff;transform:translateY(-3px)}.cw-category.cw-active{color:#fff;transform:scale(1.1)}.cw-category.cw-active:after{content:"";position:absolute;left:calc(50% - 12px);bottom:-8px;width:24px;height:2px;background:#e6f2ff;box-shadow:0 3px 10px #bddaff55}
-.cw-browser{padding-left:104px;min-width:0;view-transition-name:cw-browser}.cw-list-head{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:58px;margin:0 0 12px;padding:0 4px}.cw-directory{display:flex;align-items:center;gap:16px;min-width:0}.cw-directory h2{font-size:17px;font-weight:400;margin:0;white-space:nowrap}.cw-directory>[data-cw-count]{font-size:12px;color:var(--cw-muted);white-space:nowrap}.cw-parent,.cw-parent-placeholder{width:34px;height:44px;display:flex;align-items:center;justify-content:center;flex:none}.cw-parent:hover{background:#ffffff12;border-radius:5px}.cw-search{display:flex;align-items:center;gap:8px;border-bottom:1px solid #d5e7ff55;min-width:140px;width:220px;padding:6px 0}.cw-search svg{width:17px;height:17px;color:var(--cw-muted)}.cw-search input{background:none;border:0;min-width:0;width:100%;outline-offset:3px;font-size:13px;caret-color:#fff}.cw-search input::placeholder{color:var(--cw-muted);opacity:1}.cw-search button{background:none;font-size:11px;padding:6px 0}.cw-search input::-webkit-search-cancel-button{display:none}
+.cw-browser{padding-left:104px;min-width:0;view-transition-name:cw-browser}.cw-list-head{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:58px;margin:0 0 12px;padding:0 4px}.cw-directory{display:flex;align-items:center;gap:16px;min-width:0}.cw-directory h2{font-size:17px;font-weight:400;margin:0;white-space:nowrap}.cw-directory>[data-cw-count]{font-size:12px;color:var(--cw-muted);white-space:nowrap}.cw-parent,.cw-parent-placeholder{width:34px;height:44px;display:flex;align-items:center;justify-content:center;flex:none}.cw-parent:hover{background:#ffffff12;border-radius:5px}.cw-search{display:flex;align-items:center;gap:8px;border-bottom:1px solid #d5e7ff55;min-width:140px;width:220px;padding:6px 0}.cw-search>span{white-space:nowrap;flex:none}.cw-search svg{width:17px;height:17px;color:var(--cw-muted)}.cw-search input{background:none;border:0;min-width:0;width:100%;outline-offset:3px;font-size:13px;caret-color:#fff}.cw-search input::placeholder{color:var(--cw-muted);opacity:1}.cw-search button{background:none;font-size:11px;padding:6px 0}.cw-search input::-webkit-search-cancel-button{display:none}
 .cw-list-scroll{max-height:calc(100svh - 365px);min-height:220px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#d6e8fa66 transparent;padding:14px 12px 24px 8px;scroll-padding-block:20px;overscroll-behavior:contain}.cw-list-scroll::-webkit-scrollbar{width:5px}.cw-list-scroll::-webkit-scrollbar-thumb{background:#d6e8fa66;border-radius:4px}.cw-files{list-style:none;padding:0;margin:0}.cw-row{margin:0;min-height:76px;padding:0}.cw-entry{display:flex;align-items:center;gap:25px;padding:14px 18px;min-height:76px;transition:background .2s,opacity .2s,transform .3s var(--cw-ease);border-radius:7px}.cw-entry-icon{display:flex;width:42px;min-width:42px;align-items:center;justify-content:center;transition:transform .3s var(--cw-ease);filter:drop-shadow(0 3px 2px #08192c66)}.cw-entry-icon svg{width:34px;height:34px}.cw-entry-label{min-width:0;display:block}.cw-name{display:block;font-size:18px;font-weight:400;line-height:1.4;overflow-wrap:anywhere;text-shadow:0 2px 3px #07192b66}.cw-row-meta{display:block;font-size:11px;color:var(--cw-muted);margin-top:3px}.cw-row-date{display:none;font-size:11px;color:var(--cw-muted);margin-top:4px}.cw-target{display:block;font-size:11px;color:var(--cw-muted);overflow-wrap:anywhere;margin-top:4px}.cw-row.cw-selected .cw-entry{background:linear-gradient(90deg,#f4f9ff08,#f4f9ff04);transform:translateX(5px)}.cw-row.cw-selected .cw-entry-icon{transform:scale(1.22)}.cw-row.cw-selected .cw-name{color:#fff}.cw-row:hover .cw-entry{background:#eef7ff08}.cw-unavailable{color:var(--cw-muted)}.cw-notice{position:fixed;bottom:calc(var(--cw-footer-height,82px) + 8px);left:48px;right:24px;z-index:3;margin:0;background:var(--cw-bottom);border-radius:4px;font-size:12px;color:var(--cw-muted);padding:12px 24px;max-width:52ch}.cw-empty{padding:36px 28px;color:var(--cw-muted);font-size:15px}.cw-detail{min-width:0;align-self:center;padding:20px 0 28px;view-transition-name:cw-detail}.cw-detail-symbol{margin-bottom:28px;filter:drop-shadow(0 12px 12px #04152e44)}.cw-detail-symbol svg{width:110px;height:110px;stroke-width:.8;opacity:.9}.cw-detail h2{font-size:25px;font-weight:300;margin:0 0 7px;overflow-wrap:anywhere;line-height:1.3;letter-spacing:-.015em}.cw-detail>p{font-size:12px;color:var(--cw-muted);margin:0 0 25px}.cw-detail dl{margin:0;font-size:12px}.cw-detail dl>div{display:grid;grid-template-columns:70px minmax(0,1fr);gap:10px;margin-bottom:10px}.cw-detail dt{color:var(--cw-muted)}.cw-detail dd{margin:0;overflow-wrap:anywhere}.cw-open{display:inline-flex;margin-top:24px;min-height:44px;align-items:center;font-size:14px;border-bottom:1px solid #e8f1ff88;gap:12px}.cw-open:hover{border-bottom-color:#fff}.cw-open:after{content:"";display:block;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
 .cw-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 48px;position:fixed;bottom:0;left:0;right:0;background:linear-gradient(0deg,var(--cw-bottom),transparent);min-height:82px}.cw-credits{display:flex;align-items:center;gap:6px;margin:0;font-size:12px;font-weight:400;letter-spacing:normal;color:var(--cw-muted)}.cw-credits a{display:inline-flex;align-items:center;min-height:24px;padding-inline:2px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#edf4fc66}.cw-credits a:hover{text-decoration-color:currentColor}.cw-key-help{display:flex;gap:20px;flex-wrap:wrap;font-size:11px;color:var(--cw-muted)}kbd{font:inherit;color:#fff;margin-right:5px}.cw-appearance{display:flex;align-items:center;gap:16px;flex:none}.cw-appearance select{background:#0b193b70;border:1px solid #d7e9ff33;padding:7px 24px 7px 10px;border-radius:4px;max-width:116px;font-size:12px;min-height:36px}.cw-appearance button{display:flex;align-items:center;gap:8px;background:transparent;font-size:12px;min-height:40px;padding:6px 0}.cw-appearance button svg{width:16px;height:16px}.cw-controller{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--cw-muted)}.cw-controller svg{width:22px;height:22px}.cw-noscript{padding:0 48px 24px;color:var(--cw-muted);font-size:13px}
 body:not([data-cw-enhanced]) .cw-browser{padding-left:0}body:not([data-cw-enhanced]) .cw-stage{display:block;margin-top:20px}body:not([data-cw-enhanced]) .cw-list-scroll{max-height:none;min-height:0}body:not([data-cw-enhanced]) .cw-parent-placeholder{display:none}body:not([data-cw-enhanced]) .cw-bottom{display:none}
@@ -15,6 +19,7 @@ body:not([data-cw-enhanced]) .cw-browser{padding-left:0}body:not([data-cw-enhanc
 @media(max-width:1000px){.cw-top{padding:24px 30px;gap:22px}.cw-stage{padding:0 36px;column-gap:35px}.cw-categories{padding-left:44px;gap:20px}.cw-browser{padding-left:44px}.cw-category{min-width:82px}.cw-list-head{flex-wrap:wrap;gap:8px}.cw-search{margin-left:52px;width:calc(100% - 52px)}.cw-list-scroll{max-height:calc(100svh - 390px)}.cw-bottom{padding:20px 30px}.cw-key-help{gap:12px}.cw-detail h2{font-size:21px}.cw-clock{font-size:12px}}
 @media(max-width:680px){.cw-top{padding:22px 20px 12px;flex-wrap:wrap;gap:16px;min-height:104px}.cw-brand{font-size:18px}.cw-clock{order:1;font-size:11px}.cw-location{order:2;width:100%;font-size:12px;gap:8px}.cw-stage{padding:0 16px;margin:12px auto 100px;display:block}.cw-rail{margin:0 -8px 8px;padding:12px 8px 20px}.cw-categories{padding-left:0;gap:14px}.cw-browser{padding-left:0}.cw-category{min-width:76px;min-height:83px;padding:10px 2px;gap:10px}.cw-category svg{width:33px;height:33px}.cw-category span{font-size:12px}.cw-category small{right:5px}.cw-list-head{padding:0 12px;margin-bottom:8px}.cw-directory{gap:12px}.cw-directory h2{font-size:16px}.cw-search{margin-left:46px;width:calc(100% - 46px);min-height:44px}.cw-search input,.cw-search button{min-height:44px}.cw-list-scroll{max-height:none;min-height:150px;padding:8px 2px 18px}.cw-entry{gap:20px;padding:14px 12px;min-height:78px}.cw-entry-icon{width:36px;min-width:36px}.cw-entry-icon svg{width:29px;height:29px}.cw-name{font-size:17px}.cw-detail{display:none!important}.cw-row-date{display:block}.cw-bottom{padding:16px 20px;min-height:76px;gap:12px}.cw-key-help{display:none!important}.cw-appearance{width:100%;justify-content:space-between}.cw-appearance select,.cw-appearance button{min-height:44px}.cw-controller{position:absolute;bottom:calc(var(--cw-footer-height,76px) + 4px);right:20px;background:var(--cw-bottom);padding:6px 9px;border-radius:4px;max-width:calc(100% - 40px)}.cw-notice{left:20px;right:20px;bottom:calc(var(--cw-footer-height,82px) + 8px)}.cw-noscript{padding:0 24px 24px}}
 @media(max-height:520px){.cw-stage{grid-template-columns:minmax(0,1fr)}.cw-detail{display:none!important}.cw-row-date{display:block}.cw-top{flex-wrap:nowrap}.cw-location{order:0;width:auto}.cw-clock{display:none!important}.cw-top{min-height:58px;padding-top:10px;padding-bottom:8px}.cw-stage{margin-top:0;margin-bottom:70px}.cw-rail{margin-bottom:0;padding-bottom:12px}.cw-category{min-height:68px;gap:4px;padding-top:4px}.cw-category svg{width:28px;height:28px}.cw-list-scroll{max-height:calc(100svh - 235px);min-height:80px}.cw-list-head{min-height:36px;margin-bottom:0}.cw-detail-symbol{margin-bottom:10px}.cw-detail-symbol svg{width:60px;height:60px}.cw-detail>p{margin-bottom:12px}.cw-bottom{min-height:60px;padding-block:8px}.cw-key-help{display:none!important}.cw-list-head{flex-wrap:nowrap}.cw-search{margin-left:0;width:170px}.cw-detail dl>div{margin-bottom:4px}}
+.cw-list-scroll[data-virtual=true]{max-height:var(--cw-list-height,calc(100svh - 365px));min-height:160px}.cw-stage{margin-bottom:calc(var(--cw-footer-height,82px) + 24px)}
 @media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}.cw-row.cw-selected .cw-entry,.cw-category.cw-active,.cw-category:hover{transform:none}}
 
 .cw-directory{flex-wrap:wrap;gap:.35rem}.cw-list-head h2{font-size:17px;font-weight:400;margin:0}.cw-list-head [data-cw-count]{font-size:12px;color:var(--cw-muted)}