@dirwell/theme-crosswave 0.0.0-stage → 0.0.1-alpha

package/dist/source/shared/navigation.mjs

@@ -0,0 +1,294 @@
+// ../core/src/json.ts
+function copyJsonObject(value) {
+  const seen = /* @__PURE__ */ new Set();
+  const copy = (input, depth) => {
+    if (depth > 32) throw new TypeError("Presentation data is too deeply nested");
+    if (input === null || typeof input === "string" || typeof input === "boolean") return input;
+    if (typeof input === "number" && Number.isFinite(input)) return input;
+    if (typeof input !== "object" || input === null || seen.has(input))
+      throw new TypeError("Presentation data must be finite, acyclic JSON");
+    seen.add(input);
+    try {
+      if (Array.isArray(input)) return input.map((item) => copy(item, depth + 1));
+      if (Object.getPrototypeOf(input) !== Object.prototype && Object.getPrototypeOf(input) !== null)
+        throw new TypeError("Presentation data must use plain objects");
+      return Object.fromEntries(
+        Object.entries(input).map(([key, item]) => [key, copy(item, depth + 1)])
+      );
+    } finally {
+      seen.delete(input);
+    }
+  };
+  if (typeof value !== "object" || value === null || Array.isArray(value))
+    throw new TypeError("Presentation data must be an object");
+  const result = copy(value, 0);
+  if (typeof result !== "object" || result === null || Array.isArray(result))
+    throw new TypeError("Presentation data must be an object");
+  return result;
+}
+
+// ../core/src/client.ts
+var ListingDataError = class extends Error {
+  name = "ListingDataError";
+};
+var StaleListingError = class extends ListingDataError {
+};
+var object = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var count = (value) => typeof value === "number" && Number.isSafeInteger(value) && value >= 0;
+var kind = (value) => typeof value === "string" && ["directory", "file", "symlink", "other"].includes(value);
+function string(value, name) {
+  if (typeof value !== "string") throw new ListingDataError(`Invalid ${name}`);
+  return value;
+}
+function boolean(value, name) {
+  if (typeof value !== "boolean") throw new ListingDataError(`Invalid ${name}`);
+  return value;
+}
+function href(value, base) {
+  if (value === null) return null;
+  const result = new URL(string(value, "href"), base);
+  if (!["http:", "https:"].includes(result.protocol))
+    throw new ListingDataError("Unsupported listing link protocol");
+  return result.href;
+}
+function entry(value, base) {
+  if (!object(value) || !kind(value.kind) || typeof value.size !== "number" || !Number.isFinite(value.size) || value.size < 0)
+    throw new ListingDataError("Invalid listing entry");
+  let link = null;
+  if (value.link !== null) {
+    if (!object(value.link)) throw new ListingDataError("Invalid link metadata");
+    const targetKind = value.link.targetKind;
+    if (targetKind !== null && (!kind(targetKind) || targetKind === "symlink"))
+      throw new ListingDataError("Invalid target kind");
+    const targetSize = value.link.targetSize;
+    if (targetSize !== null && (typeof targetSize !== "number" || !Number.isFinite(targetSize) || targetSize < 0))
+      throw new ListingDataError("Invalid target size");
+    link = {
+      target: string(value.link.target, "target"),
+      targetKind,
+      targetSize,
+      unavailable: boolean(value.link.unavailable, "unavailable"),
+      cycle: boolean(value.link.cycle, "cycle")
+    };
+  }
+  return {
+    ...value.presentation === void 0 ? {} : { presentation: copyJsonObject(value.presentation) },
+    id: string(value.id, "id"),
+    name: string(value.name, "name"),
+    kind: value.kind,
+    href: href(value.href, base),
+    exitsExplorer: boolean(value.exitsExplorer, "exitsExplorer"),
+    size: value.size,
+    modifiedAt: string(value.modifiedAt, "modifiedAt"),
+    link
+  };
+}
+function manifest(value) {
+  if (!object(value) || value.version !== 1 || !count(value.total) || !Array.isArray(value.blocks) || !object(value.sort))
+    throw new ListingDataError("Invalid listing manifest");
+  const sort = value.sort;
+  if (typeof sort.field !== "string" || !["name", "size", "modified"].includes(sort.field) || typeof sort.direction !== "string" || !["asc", "desc"].includes(sort.direction) || typeof sort.nameMode !== "string" || !["locale", "natural", "unicode"].includes(sort.nameMode) || typeof sort.directoriesFirst !== "boolean")
+    throw new ListingDataError("Invalid listing order");
+  const field = sort.field === "size" ? "size" : sort.field === "modified" ? "modified" : "name";
+  const direction = sort.direction === "desc" ? "desc" : "asc";
+  const nameMode = sort.nameMode === "unicode" ? "unicode" : sort.nameMode === "locale" ? "locale" : "natural";
+  const blocks = value.blocks.map((item) => {
+    if (!object(item) || !count(item.offset) || !count(item.count))
+      throw new ListingDataError("Invalid block descriptor");
+    return { href: string(item.href, "block href"), offset: item.offset, count: item.count };
+  });
+  if (blocks.length === 0) throw new ListingDataError("Missing blocks");
+  return {
+    version: 1,
+    revision: string(value.revision, "revision"),
+    directory: string(value.directory, "directory"),
+    hrefBase: string(value.hrefBase, "href base"),
+    total: value.total,
+    sort: { field, direction, nameMode, directoriesFirst: sort.directoriesFirst },
+    blocks
+  };
+}
+async function loadListing(manifestUrl, options = {}) {
+  const request = options.fetch ?? fetch;
+  const maxEntries = options.maxEntries ?? 1e5;
+  if (!count(maxEntries)) throw new ListingDataError("Invalid entry limit");
+  const source = new URL(manifestUrl);
+  if (!["http:", "https:"].includes(source.protocol))
+    throw new ListingDataError("Listing loading requires HTTP(S); use native file navigation");
+  for (let attempt = 0; attempt < 2; attempt++) {
+    try {
+      const init = {
+        ...options.signal === void 0 ? {} : { signal: options.signal },
+        cache: attempt === 0 ? options.cache ?? "default" : "reload"
+      };
+      const response = await request(source, init);
+      if (!response.ok) throw new ListingDataError(`Manifest request failed: ${response.status}`);
+      const current = manifest(await response.json());
+      if (current.total > maxEntries)
+        throw new ListingDataError("Listing exceeds the configured entry limit");
+      const base = new URL(current.hrefBase, source);
+      if (!["http:", "https:"].includes(base.protocol))
+        throw new ListingDataError("Unsupported href base protocol");
+      const entries = [];
+      const ids = /* @__PURE__ */ new Set();
+      for (const descriptor of current.blocks) {
+        if (descriptor.offset !== entries.length || descriptor.count + entries.length > current.total)
+          throw new ListingDataError("Invalid block coverage");
+        const blockUrl = new URL(descriptor.href, source);
+        if (blockUrl.origin !== source.origin || !["http:", "https:"].includes(blockUrl.protocol))
+          throw new ListingDataError("Block leaves the manifest origin");
+        const blockResponse = await request(blockUrl, init);
+        if (blockResponse.status === 404 || blockResponse.status === 410)
+          throw new StaleListingError("Block no longer available");
+        if (!blockResponse.ok)
+          throw new ListingDataError(`Block request failed: ${blockResponse.status}`);
+        const data = await blockResponse.json();
+        if (!object(data) || data.version !== 1 || data.revision !== current.revision)
+          throw new StaleListingError("Listing revision changed");
+        if (data.offset !== descriptor.offset || data.total !== current.total || !Array.isArray(data.entries) || data.entries.length !== descriptor.count)
+          throw new ListingDataError("Invalid block envelope");
+        for (const raw of data.entries) {
+          const record = entry(raw, base);
+          if (ids.has(record.id)) throw new ListingDataError("Duplicate entry ID");
+          ids.add(record.id);
+          entries.push(record);
+        }
+      }
+      if (entries.length !== current.total) throw new ListingDataError("Incomplete listing");
+      return { manifest: current, entries };
+    } catch (error) {
+      if (options.signal?.aborted || !(error instanceof StaleListingError) || attempt === 1)
+        throw error;
+    }
+  }
+  throw new ListingDataError("Listing unavailable");
+}
+function parseListingEntries(value, baseHref, maxEntries = 1e5) {
+  if (!Array.isArray(value) || value.length > maxEntries)
+    throw new ListingDataError("Invalid page slice");
+  const base = new URL(baseHref), ids = /* @__PURE__ */ new Set();
+  const result = value.map((raw) => entry(raw, base));
+  for (const record of result) {
+    if (ids.has(record.id)) throw new ListingDataError("Duplicate entry ID");
+    ids.add(record.id);
+  }
+  return result;
+}
+
+// ../shared-theme/src/navigation.ts
+async function fetchThemePage(dataHref, pageHref, theme, signal, fresh = false, attempt = 0) {
+  const source = new URL(dataHref, document.baseURI);
+  if (source.origin !== location.origin)
+    throw new ListingDataError("Folder leaves the theme origin");
+  const response = await fetch(source, { signal, cache: fresh ? "no-store" : "default" });
+  if (!response.ok) throw new ListingDataError("Unavailable folder");
+  const value = await response.json();
+  if (typeof value !== "object" || value === null || Array.isArray(value))
+    throw new ListingDataError("Invalid folder snapshot");
+  const data = value;
+  if (data.version !== 1 || data.theme !== theme || typeof data.title !== "string" || typeof data.path !== "string" || !Number.isSafeInteger(data.total) || Number(data.total) < 0 || !Array.isArray(data.breadcrumbs))
+    throw new ListingDataError("Unsupported folder snapshot");
+  if (data.metadataHead !== void 0 && typeof data.metadataHead !== "string")
+    throw new ListingDataError("Invalid folder metadata");
+  const base = document.querySelector("base")?.href ?? pageHref;
+  const link = (raw) => {
+    if (raw === null) return null;
+    if (typeof raw !== "string") throw new ListingDataError("Invalid folder link");
+    const url = new URL(raw, base);
+    if (!["http:", "https:"].includes(url.protocol) || url.origin !== location.origin)
+      throw new ListingDataError("Unsupported folder link");
+    return url.href;
+  };
+  const entries = parseListingEntries(data.entries, base).map((entry2) => ({
+    ...entry2,
+    ...entry2.presentation ? {
+      presentation: {
+        ...entry2.presentation,
+        folderDataHref: link(entry2.presentation.folderDataHref ?? null)
+      }
+    } : {}
+  }));
+  if (entries.length > Number(data.total)) throw new ListingDataError("Invalid folder count");
+  const result = {
+    ...data,
+    updatesHref: link(data.updatesHref ?? null),
+    entries,
+    dataHref: source.href,
+    manifestHref: link(data.manifestHref),
+    rootHref: link(data.rootHref),
+    rootDataHref: link(data.rootDataHref),
+    parentHref: link(data.parentHref),
+    parentDataHref: link(data.parentDataHref),
+    breadcrumbs: data.breadcrumbs.map((raw) => {
+      if (typeof raw !== "object" || raw === null || !("name" in raw) || !("href" in raw) || !("dataHref" in raw) || typeof raw.name !== "string")
+        throw new ListingDataError("Invalid breadcrumb");
+      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 (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");
+    }
+    result.entries = [...loaded.entries];
+  }
+  return result;
+}
+var hotModels = /* @__PURE__ */ new WeakMap();
+function restoreThemePage(initial, hot) {
+  if (!hot || typeof document === "undefined") return initial;
+  const root = document.querySelector("[data-dirwell-theme]");
+  if (!root) return initial;
+  const snapshot = hotModels.get(root) ?? initial;
+  hotModels.set(root, snapshot);
+  return snapshot;
+}
+function applyThemeMetadata(page, pageHref) {
+  const root = document.querySelector("[data-dirwell-theme]");
+  if (root && hotModels.has(root)) hotModels.set(root, page);
+  document.title = typeof page.title === "string" ? page.title : "";
+  const template = document.createElement("template");
+  template.innerHTML = typeof page.metadataHead === "string" ? page.metadataHead : "";
+  document.head.querySelectorAll("[data-dirwell-metadata]").forEach((element) => element.remove());
+  const base = document.querySelector("base")?.href ?? pageHref;
+  const url = (value) => {
+    try {
+      const target = new URL(value, base);
+      return ["http:", "https:"].includes(target.protocol) ? target.href : null;
+    } catch {
+      return null;
+    }
+  };
+  for (const element of template.content.children) {
+    if (!element.hasAttribute("data-dirwell-metadata")) continue;
+    let next;
+    if (element.tagName === "META") {
+      const attribute = element.hasAttribute("property") ? "property" : "name";
+      const key = element.getAttribute(attribute) ?? "";
+      if (!/^(?:description|og:[a-z_:]+|twitter:[a-z_:]+)$/i.test(key)) continue;
+      let content = element.getAttribute("content") ?? "";
+      if (["og:image", "og:url", "twitter:image"].includes(key)) {
+        const resolved = url(content);
+        if (resolved === null) continue;
+        content = resolved;
+      }
+      next = document.createElement("meta");
+      next.setAttribute(attribute, key);
+      next.setAttribute("content", content);
+    } else if (element.tagName === "LINK" && element.getAttribute("rel") === "canonical") {
+      const href2 = url(element.getAttribute("href") ?? "");
+      if (href2 === null) continue;
+      next = document.createElement("link");
+      next.setAttribute("rel", "canonical");
+      next.setAttribute("href", href2);
+    } else continue;
+    next.setAttribute("data-dirwell-metadata", "");
+    document.head.append(next);
+  }
+}
+export {
+  applyThemeMetadata,
+  fetchThemePage,
+  restoreThemePage
+};

package/dist/source/shared/records.mjs

@@ -0,0 +1,60 @@
+// ../shared-theme/src/records.ts
+var directoryLike = (entry) => entry.kind === "directory" || entry.link?.targetKind === "directory";
+var entryType = (entry) => entry.kind === "symlink" ? "link" : directoryLike(entry) ? "directory" : "file";
+function fuzzy(query, value) {
+  let score = 0, start = 0, last = -2;
+  for (const character of query.trim().toLocaleLowerCase()) {
+    const index = value.toLocaleLowerCase().indexOf(character, start);
+    if (index < 0) return null;
+    if (index === last + 1) score += 8;
+    if (index === 0 || /[\s/_.-]/.test(value[index - 1] ?? "")) score += 5;
+    score += Math.max(0, 4 - index * 0.05);
+    last = index;
+    start = index + 1;
+  }
+  return score - value.length * 0.01;
+}
+function visibleRecords(entries, query, types, sort) {
+  return entries.map((entry) => ({ entry, score: fuzzy(query, `${entry.name} ${entry.link?.target ?? ""}`) })).filter((item) => types.includes(entryType(item.entry)) && item.score !== null).sort((left, right) => {
+    if (query.trim() && left.score !== right.score) return (right.score ?? 0) - (left.score ?? 0);
+    const a = left.entry, b = right.entry;
+    if (sort.directoriesFirst && directoryLike(a) !== directoryLike(b))
+      return directoryLike(a) ? -1 : 1;
+    const name = () => sort.nameMode === "unicode" ? compareUnicode(a.name, b.name) : a.name.localeCompare(b.name, void 0, {
+      numeric: sort.nameMode === "natural",
+      sensitivity: "base"
+    });
+    const primary = (sort.field === "name" ? name() : sort.field === "size" ? (a.kind === "directory" ? 0 : a.size) - (b.kind === "directory" ? 0 : b.size) : a.modifiedAt.localeCompare(b.modifiedAt)) || name();
+    return (sort.direction === "asc" ? primary : -primary) || compareUnicode(a.id, b.id);
+  }).map((item) => item.entry);
+}
+function compareUnicode(left, right) {
+  const a = [...left], b = [...right];
+  for (let i = 0; i < Math.min(a.length, b.length); i++) {
+    const delta = (a[i]?.codePointAt(0) ?? 0) - (b[i]?.codePointAt(0) ?? 0);
+    if (delta) return delta;
+  }
+  return a.length - b.length;
+}
+function size(bytes) {
+  const units = ["B", "KiB", "MiB", "GiB", "TiB"];
+  let value = bytes, index = 0;
+  while (value >= 1024 && index < 4) {
+    value /= 1024;
+    index++;
+  }
+  return `${value.toFixed(index === 0 || value >= 100 ? 0 : 1)} ${units[index]}`;
+}
+function modified(value, local = false) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "Unknown";
+  return local ? date.toLocaleString(void 0, { dateStyle: "short", timeStyle: "short" }) : `${date.toISOString().slice(0, 16).replace("T", " ")} UTC`;
+}
+export {
+  directoryLike,
+  entryType,
+  fuzzy,
+  modified,
+  size,
+  visibleRecords
+};

package/dist/source/wave.mjs

@@ -0,0 +1,132 @@
+export function createWave(canvas, colors, root, moving, onReady) {
+  let gl;
+  try {
+    gl = canvas.getContext("webgl", {
+      alpha: false,
+      antialias: false,
+      powerPreference: "low-power",
+    });
+  } catch {
+    return null;
+  }
+  if (!gl) return null;
+  const vertex = "attribute vec2 p;void main(){gl_Position=vec4(p,0.,1.);}";
+  const fragment = `precision highp float;uniform vec2 resolution;uniform float time;uniform vec3 tint;
+    void main(){vec2 uv=gl_FragCoord.xy/resolution;float x=uv.x;float y=uv.y;float t=time;
+    vec3 ground=mix(tint*.22,tint,clamp(y*.85+x*.1,0.,1.));ground+=vec3(.035)*pow(max(0.,1.-distance(uv,vec2(.2,.9))),3.);
+    float light=0.;for(int i=0;i<3;i++){float k=float(i);float center=.40+.07*sin(x*4.2+t*.17+k*.8)+.035*cos(x*7.1-t*.11+k*1.4)+k*.024;
+    float breadth=.012+.037*(.5+.5*sin(x*2.7+t*.09+k));float d=y-center;float sheet=exp(-pow(d/breadth,2.));float edge=exp(-abs(d-breadth*.65)*430.);
+    float fold=exp(-abs(d+breadth*.35)*170.);float taper=pow(sin(clamp(x,0.,1.)*3.14159),.6);light+=(sheet*.07+edge*.23+fold*.09)*taper;}
+    ground+=mix(vec3(.6,.8,1.),vec3(1.),.75)*min(light,.12);gl_FragColor=vec4(ground,1.);}`;
+  const shader = (type, source) => {
+    const s = gl.createShader(type);
+    if (!s) return null;
+    gl.shaderSource(s, source);
+    gl.compileShader(s);
+    if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
+      gl.deleteShader(s);
+      return null;
+    }
+    return s;
+  };
+  const vs = shader(gl.VERTEX_SHADER, vertex),
+    fs = shader(gl.FRAGMENT_SHADER, fragment);
+  if (!vs || !fs) {
+    if (vs) gl.deleteShader(vs);
+    if (fs) gl.deleteShader(fs);
+    return null;
+  }
+  const program = gl.createProgram();
+  if (!program) return null;
+  gl.attachShader(program, vs);
+  gl.attachShader(program, fs);
+  gl.linkProgram(program);
+  gl.deleteShader(vs);
+  gl.deleteShader(fs);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    gl.deleteProgram(program);
+    return null;
+  }
+  const buffer = gl.createBuffer();
+  if (!buffer) {
+    gl.deleteProgram(program);
+    return null;
+  }
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
+  gl.useProgram(program);
+  const p = gl.getAttribLocation(program, "p");
+  gl.enableVertexAttribArray(p);
+  gl.vertexAttribPointer(p, 2, gl.FLOAT, false, 0, 0);
+  const r = gl.getUniformLocation(program, "resolution"),
+    t = gl.getUniformLocation(program, "time"),
+    c = gl.getUniformLocation(program, "tint");
+  let frame = 0,
+    last = 0,
+    lost = false,
+    frozenTime = 17;
+  const draw = (now) => {
+    if (lost) return;
+    const ratio = Math.min(devicePixelRatio || 1, 1.5, 1600 / innerWidth, 1000 / innerHeight),
+      width = Math.round(innerWidth * ratio),
+      height = Math.round(innerHeight * ratio);
+    if (canvas.width !== width || canvas.height !== height) {
+      canvas.width = width;
+      canvas.height = height;
+      gl.viewport(0, 0, width, height);
+    }
+    if (moving()) frozenTime = (Date.now() % 86400000) / 1000;
+    gl.uniform2f(r, width, height);
+    gl.uniform1f(t, frozenTime);
+    gl.uniform3fv(c, colors[root.dataset.cwColor] ?? colors.azure);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    onReady(true);
+    last = now;
+  };
+  const tick = (now) => {
+    frame = 0;
+    if (!moving() || lost) return;
+    if (now - last >= 33) draw(now);
+    frame = requestAnimationFrame(tick);
+  };
+  const stop = () => {
+    cancelAnimationFrame(frame);
+    frame = 0;
+  };
+  const sync = () => {
+    stop();
+    if (lost) return;
+    draw(0);
+    if (moving()) frame = requestAnimationFrame(tick);
+  };
+  const contextLost = (event) => {
+    event.preventDefault();
+    lost = true;
+    stop();
+    onReady(false);
+  };
+  canvas.addEventListener("webglcontextlost", contextLost);
+  const contextRestored = () => {
+    onReady(false);
+    lost = true;
+  };
+  canvas.addEventListener("webglcontextrestored", contextRestored);
+  const resized = () => draw(0);
+  addEventListener("resize", resized);
+  return {
+    dispose() {
+      stop();
+      removeEventListener("resize", resized);
+      canvas.removeEventListener("webglcontextlost", contextLost);
+      canvas.removeEventListener("webglcontextrestored", contextRestored);
+      gl.deleteBuffer(buffer);
+      gl.deleteProgram(program);
+    },
+    draw,
+    sync,
+    stop,
+    get available() {
+      return !lost;
+    },
+  };
+}

package/dist/styles.css

@@ -0,0 +1,23 @@
+
+: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-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}
+.cw-navigation-notice{position:fixed;z-index:5;left:48px;right:24px;bottom:calc(var(--cw-footer-height,82px) + 8px);background:var(--cw-bottom);color:var(--cw-text);padding:12px 16px;border-radius:4px;font-size:13px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.cw-navigation-notice[hidden]{display:none}.cw-navigation-notice button,.cw-navigation-notice a{background:none;min-height:44px;padding:6px 12px;border:1px solid var(--cw-muted);border-radius:4px}.cw-transition-layer *{animation:none!important;transition:none!important}.cw-transition-layer [data-cw-status]{display:none}
+@view-transition{navigation:auto}::view-transition-old(root),::view-transition-new(root){animation:none}::view-transition-old(cw-background),::view-transition-new(cw-background){animation-duration:420ms}::view-transition-old(cw-browser),::view-transition-old(cw-detail){animation:cw-out 180ms ease-in both}::view-transition-new(cw-browser),::view-transition-new(cw-detail){animation:cw-in 420ms var(--cw-ease) both}::view-transition-old(cw-header),::view-transition-new(cw-header){animation-duration:240ms}@keyframes cw-out{to{opacity:0;transform:translateX(-22px);filter:blur(3px)}}@keyframes cw-in{from{opacity:0;transform:translateX(32px);filter:blur(5px)}}:root[data-cw-transitions=false]::view-transition-group(*){animation-duration:0s}:root[data-cw-transitions=false]::view-transition-old(*),:root[data-cw-transitions=false]::view-transition-new(*){animation:none}.cw-category-changing .cw-files{animation:cw-category-in 260ms var(--cw-ease)}@keyframes cw-category-in{from{opacity:.35;transform:translateX(12px)}}
+@media(min-width:1500px){.cw-stage{margin-top:55px}.cw-categories{gap:48px}.cw-category{min-width:112px}.cw-list-scroll{max-height:calc(100svh - 405px)}}
+@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}}
+@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)}
+.cw-motion{display:flex;align-items:center;background:transparent;border:1px solid #d7e9ff33;border-radius:4px;font-size:12px;min-height:44px;padding:6px 12px;white-space:nowrap}
+.cw-appearance{min-width:0}.cw-appearance select{max-width:116px}
+@media(max-width:680px){.cw-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}.cw-appearance{width:auto;justify-content:flex-start;gap:12px}.cw-motion{max-width:140px;white-space:normal}.cw-list-head{align-items:start}}

package/package.json

@@ -1,6 +1,52 @@
 {
   "name": "@dirwell/theme-crosswave",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.0.1-alpha",
+  "description": "Vue-owned media navigation with VueUse gamepad support.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vp-tw/dirwell.git",
+    "directory": "packages/theme-crosswave"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    },
+    "./source": {
+      "types": "./dist/source/component.d.mts",
+      "default": "./dist/source/Crosswave.vue"
+    },
+    "./model": {
+      "types": "./dist/model.d.mts",
+      "import": "./dist/model.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true,
+    "tag": "alpha"
+  },
+  "dependencies": {
+    "@dirwell/core": "0.0.1-alpha",
+    "@vue/server-renderer": "3.5.43",
+    "@vueuse/core": "15.0.0",
+    "mime": "4.1.0",
+    "vue": "3.5.43"
+  },
+  "devDependencies": {
+    "@vue/compiler-sfc": "3.5.43"
+  },
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "scripts": {
+    "build": "node ../../scripts/build-framework-theme.mjs theme-crosswave"
+  }
 }