@panphora/clayjs 1.19.0 → 1.21.0

package/src/core/copy-content.js

@@ -0,0 +1,103 @@
+// Copy-only content: marked regions that stay in the file, in normal saves, in snapshots
+// and in recovery storage, and are removed only from the bytes of a copy someone asks for.
+// The removal is a splice on the original string using parse5's source offsets, so every
+// byte outside a removed range survives, templates and implicit end tags included.
+
+import { parse } from "../vendor/parse5.vendor.js";
+
+const CLAY = "clay";
+const PAID_ONLY = "data-paid-only";
+const NO_COPY = "no-copy";
+const CONDITIONAL_FORMS = "no-copy-unless:paid-forms";
+const CLAY_TOKENS = /[\t\n\f\r ]+/;
+
+function attributeOf(node, name) {
+  return node.attrs?.find((attr) => attr.name === name)?.value ?? null;
+}
+
+function childrenOf(node) {
+  return node.content ? [...(node.childNodes || []), node.content] : (node.childNodes || []);
+}
+
+function eachElement(node, visit) {
+  visit(node);
+  for (const child of childrenOf(node)) eachElement(child, visit);
+}
+
+function clayTokensOf(node) {
+  return (attributeOf(node, CLAY) ?? "").split(CLAY_TOKENS);
+}
+
+// The marker is compared to a feature key exactly: no trim, no lowercase, so a typo, an
+// empty value or `FORMS` strips nothing and the content stays, which is the direction
+// that fails closed. `clay="no-copy-unless:paid-forms"` is the approved spelling of the
+// same condition.
+function paidMarkersOf(node) {
+  const markers = [];
+  const value = attributeOf(node, PAID_ONLY);
+  if (value !== null) markers.push(value);
+  if (clayTokensOf(node).includes(CONDITIONAL_FORMS)) markers.push("forms");
+  return [...new Set(markers)];
+}
+
+function lastDescendantEnd(node) {
+  let end = null;
+  eachElement(node, (entry) => {
+    const entryEnd = entry.sourceCodeLocation?.endOffset;
+    if (typeof entryEnd === "number" && entryEnd >= 0 && (end === null || entryEnd > end)) end = entryEnd;
+  });
+  return end;
+}
+
+function endOffsetFor(node) {
+  const location = node.sourceCodeLocation;
+  if (typeof location?.endOffset === "number" && location.endOffset >= 0) return location.endOffset;
+  const fallback = lastDescendantEnd(node) ?? location?.startTag?.endOffset ?? null;
+  if (fallback === null) return null;
+  console.warn(`clayjs: <${node.tagName}> has no end offset; removing through ${fallback}`);
+  return fallback;
+}
+
+function markedRanges(html, features) {
+  const ranges = [];
+  eachElement(parse(html, { sourceCodeLocationInfo: true }), (node) => {
+    const markers = paidMarkersOf(node);
+    const unconditional = clayTokensOf(node).includes(NO_COPY);
+    const conditional = features === null ? markers.length > 0 : markers.some((marker) => features.includes(marker));
+    if (!unconditional && !conditional) return;
+    const start = node.sourceCodeLocation?.startOffset;
+    const end = typeof start === "number" ? endOffsetFor(node) : null;
+    if (typeof start === "number" && start >= 0 && end !== null && end > start) ranges.push({ start, end });
+  });
+  return ranges.filter((range, index) => !ranges.some((other, otherIndex) =>
+    otherIndex !== index && other.start <= range.start && range.end <= other.end));
+}
+
+function leadingRunStart(html, start) {
+  const newline = html.lastIndexOf("\n", start - 1);
+  if (newline < 0 || /\S/.test(html.slice(newline + 1, start))) return start;
+  return html[newline - 1] === "\r" ? newline - 1 : newline;
+}
+
+function spliceRanges(html, ranges) {
+  const sorted = [...ranges].sort((a, b) => a.start - b.start);
+  let stripped = html;
+  let limit = html.length;
+  for (let index = sorted.length - 1; index >= 0; index -= 1) {
+    const { start, end } = sorted[index];
+    if (end > limit) continue;
+    const from = leadingRunStart(html, start);
+    if (from >= end) continue;
+    stripped = stripped.slice(0, from) + stripped.slice(end);
+    limit = from;
+  }
+  return stripped;
+}
+
+// `features` decides the conditional regions: null (the default, and the offline
+// destination) strips every one of them, while a list strips only the missing features
+// it names. Unconditional `no-copy` content always goes.
+export function stripCopyContent(html, features = null) {
+  if (typeof html !== "string" || !/clay|data-paid-only/i.test(html)) return html;
+  return spliceRanges(html, markedRanges(html, features));
+}

package/src/core/download.js

@@ -1,6 +1,13 @@
 // Saving a page as a file the browser downloads. Kept apart from the conflict copy
 // builders so an editor that only offers "download this page" loads none of them.
 
+const HTML_TYPES = ["text/html", "application/xhtml+xml"];
+
+function isHtml(type) {
+  if (typeof type !== "string") return false;
+  return HTML_TYPES.includes(type.split(";")[0].trim().toLowerCase());
+}
+
 export function documentName(pathname = location.pathname) {
   const last = pathname.split("/").filter(Boolean).pop();
   if (!last) return pathname.endsWith("/") || pathname === "" ? "index" : "page";
@@ -9,10 +16,15 @@ export function documentName(pathname = location.pathname) {
   return name.replace(/\.(html?|htmlclay)$/i, "") || "page";
 }
 
-export function downloadHtml({ html, name, type = "text/html" }) {
+export async function downloadHtml({ html, name, type = "text/html" }) {
   let url = null;
   try {
-    url = URL.createObjectURL(new Blob([html], { type }));
+    let contents = html;
+    if (isHtml(type) && typeof html === "string" && /clay|data-paid-only/i.test(html)) {
+      const { stripCopyContent } = await import("./copy-content.js");
+      contents = stripCopyContent(html);
+    }
+    url = URL.createObjectURL(new Blob([contents], { type }));
     const a = document.createElement("a");
     a.setAttribute("clay", "no-save no-watch no-snapshot");
     a.href = url;

package/src/core/save-size-notice.js

@@ -57,8 +57,8 @@ function place() {
 // The safe copy the conflict notice offers, for the same reason: a file the person can
 // open has to exist outside a host that will not store these bytes. It already reports
 // its own failure.
-function download() {
-  downloadStored({});
+async function download() {
+  await downloadStored({});
 }
 
 function build() {

package/src/core/upgrade-run.js

@@ -348,7 +348,11 @@ export async function pageBytes(clay, { loc = location, fetchFn = (url, init) =>
 export async function downloadCopy({ clay, doc = document, loc = location, fetchFn } = {}) {
   if (typeof URL === "undefined" || typeof URL.createObjectURL !== "function") return false;
   try {
-    const bytes = await pageBytes(clay, { loc, fetchFn });
+    let bytes = await pageBytes(clay, { loc, fetchFn });
+    if (typeof bytes === "string" && /clay|data-paid-only/i.test(bytes)) {
+      const { stripCopyContent } = await import("./copy-content.js");
+      bytes = stripCopyContent(bytes);
+    }
     const url = URL.createObjectURL(new Blob([bytes], { type: "text/html" }));
     const a = doc.createElement("a");
     a.setAttribute("clay", "editor-ui");

package/src/lib/region-policy.js

@@ -54,7 +54,7 @@ export const REGION_ATTRS = ['no-save', 'no-trigger-autosave', 'no-dirty', 'no-u
 // Every canonical token spellable inside the space-separated `clay` attribute.
 // Exported: this list used to exist as a private CLAY_TOKENS that nothing read,
 // while callers hardcoded their own copies.
-export const TOKENS = [...POLICY_TOKENS];
+export const TOKENS = [...POLICY_TOKENS, 'no-copy', 'no-copy-unless:paid-forms'];
 
 // True when a region marker is present, whether spelled as a `clay` token
 // (whitespace-token semantics, matching [clay~=token]) or a legacy bare attribute.

package/src/page/features/export-html.js

@@ -112,12 +112,12 @@ export function createFeature({ view = null, download = downloadHtml, fetch: fet
   }
 
   function decide(s) {
-    listen(s, s.panel, "click", (event) => {
+    listen(s, s.panel, "click", async (event) => {
       const b = event.target.closest?.("[data-act]");
       if (!b) return;
       event.preventDefault();
       if (b.dataset.act === "close") close();
-      else if (b.dataset.act === "download") save(s);
+      else if (b.dataset.act === "download") await save(s);
       else if (b.dataset.act === "retry") run().catch((error) => console.error("clayjs: the reading copy could not be made", error));
     });
     listen(s, doc, "keydown", (event) => {
@@ -130,9 +130,9 @@ export function createFeature({ view = null, download = downloadHtml, fetch: fet
 
   // The one place a reading copy becomes a file. The download is handed the bytes that
   // were shown, never a second render, so what a person saw is what they get.
-  function save(s) {
+  async function save(s) {
     if (!s.ready || disposed) return { ok: false, code: "not-editing" };
-    const saved = download({ html: s.ready.html, name: s.ready.name });
+    const saved = await download({ html: s.ready.html, name: s.ready.name });
     close();
     return { ok: saved === true, downloaded: saved === true };
   }

package/src/page/features/export-markdown.js

@@ -83,10 +83,10 @@ export function createFeature({ view = null, download = downloadHtml } = {}) {
     s.panel.replaceChildren(...parts);
   }
 
-  function save() {
+  async function save() {
     const s = session;
     if (!s) return { ok: false, code: "no-export" };
-    if (download({ html: s.report.text, name: s.name, type: "text/markdown" })) {
+    if (await download({ html: s.report.text, name: s.name, type: "text/markdown" })) {
       close();
       view.focus?.();
       return { ok: true, downloaded: true };

package/src/page/recovery-ui.js

@@ -228,12 +228,12 @@ export function createRecoveryReview({
     button.setAttribute("aria-expanded", "false");
   };
 
-  const download = () => {
+  const download = async () => {
     const edits = [];
     for (const row of rows) edits.push({ id: row.id, kind: "recovered-page", name: row.message, yours: row.text, now: "", sentence: row.message });
     const composing = "Text typed while composing never reached the page.";
     for (const row of journaled) edits.push({ id: row.id, kind: "composing", name: "Typed text", yours: row.text, now: "", sentence: composing });
-    if (!downloadStored({ html: null, edits })) failure = "That download could not be made.";
+    if (!(await downloadStored({ html: null, edits }))) failure = "That download could not be made.";
     draw();
   };
 

package/src/page/save-states.js

@@ -67,14 +67,14 @@ function withoutPageTag(html) {
 // One complete, openable file: the capture the save would have sent, with the
 // page projection already applied by the live store's snapshot listener, and
 // without the page editor's merge state, which no saved file or download carries.
-function downloadPageCopy() {
+async function downloadPageCopy() {
   const { forSave } = captureForSaveAndComparison({ emitForSync: false });
-  return downloadHtml({ html: withoutPageTag(forSave), name: `${documentName()}.html` });
+  return await downloadHtml({ html: withoutPageTag(forSave), name: `${documentName()}.html` });
 }
 
 // A copy of the page captured earlier (captureForSaveAndComparison().forSave), as a download.
-function downloadSnapshot(forSave) {
-  return downloadHtml({ html: withoutPageTag(forSave), name: `${documentName()}.html` });
+async function downloadSnapshot(forSave) {
+  return await downloadHtml({ html: withoutPageTag(forSave), name: `${documentName()}.html` });
 }
 
 // The article's own plain text, never the editor's chrome: the capture carries

package/src/plugins/menu/actions.js

@@ -146,7 +146,7 @@ export function attachActions({ addItem, note, currentMode }) {
       if (typeof html === "string" && /^https?:$/.test(location.protocol)) {
         html = html.replace(/(^|[^\w./:-])\/_\/uploads\//g, `$1${location.origin}/_/uploads/`);
       }
-      if (typeof html !== "string" || !downloadHtml({ html, name: `${documentName()}.html` })) {
+      if (typeof html !== "string" || !(await downloadHtml({ html, name: `${documentName()}.html` }))) {
         note("Couldn't build the download. Try again.");
       }
     },

package/src/plugins/menu/style.js

@@ -3,7 +3,9 @@
 // The surface and muted ink below, per scheme, for ui/page-colour.js's tint.
 export const MENU_SURFACE = { light: [0xFF, 0xFC, 0xF6], dark: [0x1A, 0x1D, 0x2C], mutedLight: [0x6B, 0x59, 0x42], mutedDark: [0xA3, 0xA9, 0xC2] };
 
-export default `.clay-menu-dock, .clay-menu-spots, .clay-seo {
+// The parts of the look a page may replace, through <style clay-menu-skin="1">. Everything
+// else below stays: layout, hidden, focus rings, touch targets and reduced motion.
+export const MENU_BASE = `.clay-menu-dock, .clay-menu-spots, .clay-seo {
   --bevel-font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
   --bevel-font-serif: Newsreader, Georgia, "Times New Roman", serif;
   --bevel-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
@@ -40,19 +42,11 @@ export default `.clay-menu-dock, .clay-menu-spots, .clay-seo {
   text-size-adjust: 100%;
 }
 
-/* The dock: the roster (when a page opts in) and the capsule, fixed in one corner. */
-.clay-menu-dock { position: fixed; z-index: 2147482000; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.4; }
-.clay-menu-dock[data-corner$="left"] { right: auto; left: max(12px, env(safe-area-inset-left)); flex-direction: row-reverse; }
-.clay-menu-dock[data-corner^="bottom"] { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); }
+.clay-menu-dock { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.4; }
+.clay-menu-dock[data-embedded] { position: relative; display: inline-flex; }
 .clay-menu-dock[hidden], .clay-menu-spots[hidden], .clay-menu-dock [hidden], .clay-seo [hidden] { display: none !important; }
 
-.clay-menu { box-sizing: border-box; display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 0 4px 0 2px; border: 1px solid var(--bevel-line-3); background: var(--bevel-surface); box-shadow: var(--clay-shadow); user-select: none; -webkit-user-select: none; }
-.clay-menu-dock[data-dragging] .clay-menu { border-color: var(--bevel-brass); cursor: grabbing; }
-
-.clay-menu-grip { position: relative; display: inline-grid; place-items: center; width: 18px; height: 28px; margin: 0; padding: 0; border: 0; background: none; color: var(--bevel-faint); cursor: grab; touch-action: none; }
-.clay-menu-grip::before { content: ""; position: absolute; inset: -8px -2px -8px -10px; }
-.clay-menu-grip:hover { color: var(--bevel-ink-2); }
-.clay-menu-grip svg { display: block; width: 6px; height: 12px; fill: currentColor; }
+.clay-menu { box-sizing: border-box; display: inline-flex; align-items: center; gap: 2px; user-select: none; -webkit-user-select: none; }
 
 .clay-menu-edit { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 28px; margin: 0; padding: 0 8px 0 5px; border: 0; background: none; font: 500 13px/1 var(--bevel-font-sans); color: var(--bevel-ink); cursor: pointer; }
 .clay-menu-edit::before { content: ""; position: absolute; inset: -8px 0; }
@@ -68,12 +62,8 @@ export default `.clay-menu-dock, .clay-menu-spots, .clay-seo {
 
 .clay-menu-divider { width: 1px; height: 18px; margin: 0 2px; background: var(--bevel-line-2); }
 
-.clay-menu-goo { position: relative; display: inline-grid; place-items: center; box-sizing: border-box; width: 28px; height: 28px; min-height: 0; border-radius: 0; margin: 0; padding: 0; border: 2px solid transparent; background: none; color: var(--bevel-ink); cursor: pointer; }
-.clay-menu-goo::before { content: ""; position: absolute; inset: -8px -8px -8px -4px; }
-.clay-menu-goo svg { display: block; width: 18px; height: auto; fill: currentColor; }
-.clay-menu-goo:hover svg { translate: 0 -1px; }
-.clay-menu-goo:active, .clay-menu-goo[aria-expanded="true"] { background: var(--bevel-face-in); border-color: var(--bevel-edge-in) var(--bevel-edge-in-hi) var(--bevel-edge-in-hi) var(--bevel-edge-in); }
-.clay-menu-goo:active svg, .clay-menu-goo[aria-expanded="true"] svg { translate: 1px 1px; }
+.clay-menu-goo { position: relative; display: inline-grid; place-items: center; box-sizing: border-box; margin: 0; padding: 0; cursor: pointer; }
+.clay-menu-goo svg { display: block; }
 .clay-menu-dot { position: absolute; top: -1px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--bevel-brass); box-shadow: 0 0 0 2px var(--bevel-surface); }
 
 .clay-menu :focus-visible, .clay-roster:focus-visible { outline: 2px solid var(--bevel-brass); outline-offset: 2px; }
@@ -98,22 +88,24 @@ export default `.clay-menu-dock, .clay-menu-spots, .clay-seo {
 .clay-avatar[data-tone="teal"] { background: var(--bevel-teal-soft); color: var(--bevel-teal); border-color: color-mix(in srgb, var(--bevel-teal) 35%, var(--bevel-teal-soft)); }
 
 /* Popovers: the menu, the people panel, the status note. Below the dock, above it in a bottom corner. */
-.clay-menu-list, .clay-people, .clay-menu-note { position: absolute; z-index: 1; top: calc(100% + 8px); right: 0; box-sizing: border-box; margin: 0; border: 1px solid var(--bevel-line-2); background: var(--bevel-surface); box-shadow: var(--clay-shadow); color: var(--bevel-ink); text-align: left; }
-.clay-menu-dock[data-corner$="left"] :is(.clay-menu-list, .clay-people, .clay-menu-note) { right: auto; left: 0; }
-.clay-menu-dock[data-corner^="bottom"] :is(.clay-menu-list, .clay-people, .clay-menu-note) { top: auto; bottom: calc(100% + 8px); }
+.clay-menu-list, .clay-people, .clay-menu-note { position: absolute; z-index: 1; top: calc(100% + 8px); right: 0; box-sizing: border-box; margin: 0; color: var(--bevel-ink); text-align: left; }
+.clay-people, .clay-menu-note { border: 1px solid var(--bevel-line-2); background: var(--bevel-surface); box-shadow: var(--clay-shadow); }
 
-.clay-menu-list { width: max-content; min-width: 284px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
-.clay-menu-list [role="menuitem"] { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 32px; margin: 0; padding: 5px 9px; border: 0; background: none; font: 400 13px/1.35 var(--bevel-font-sans); color: var(--bevel-ink); text-align: left; text-decoration: none; cursor: pointer; }
+.clay-menu-list { width: max-content; max-width: calc(100vw - 24px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; }
+.clay-menu-list[popover] { position: fixed; inset: auto; margin: 0; }
+.clay-menu-list [role="menuitem"] { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 0; border: 0; background: none; text-align: left; text-decoration: none; cursor: pointer; }
 .clay-menu-list [role="menuitem"]:hover:not([aria-disabled="true"]), .clay-menu-list [role="menuitem"]:focus-visible { outline: none; background: var(--bevel-sunk); }
-.clay-menu-list [role="menuitem"][aria-disabled="true"] { color: var(--bevel-faint); cursor: default; }
-.clay-menu-list [role="menuitem"][aria-disabled="true"] kbd { opacity: .6; }
+.clay-menu-list [role="menuitem"][aria-disabled="true"] { cursor: default; }
 .clay-menu-pair { display: flex; gap: 12px; padding: 3px 9px; }
-.clay-menu-list .clay-menu-pair [role="menuitem"] { flex: none; width: auto; min-height: 30px; justify-content: flex-start; gap: 9px; padding: 4px 6px 4px 9px; border: 1px solid var(--bevel-line); }
-.clay-menu-list kbd { flex: none; font: 500 11px/1 var(--bevel-font-mono); padding: 3px 5px; border: 1px solid var(--bevel-line-2); background: var(--bevel-sunk); color: var(--bevel-muted); white-space: nowrap; }
-.clay-menu-sep { height: 1px; margin: 4px 2px; background: var(--bevel-line); }
+.clay-menu-list .clay-menu-pair [role="menuitem"] { flex: none; width: auto; justify-content: flex-start; gap: 9px; }
+.clay-menu-list kbd { flex: none; white-space: nowrap; }
+.clay-menu-row { display: flex; align-items: center; gap: 2px; }
+.clay-menu-list .clay-menu-row > [part~="item"] { flex: 1; width: auto; min-width: 0; }
+.clay-menu-list .clay-menu-row > [part~="dismiss"] { flex: none; width: 28px; justify-content: center; padding: 0; }
+.clay-menu-row > [part~="dismiss"] svg { display: block; width: 10px; height: 10px; fill: currentColor; }
 .clay-menu-upgrade { display: inline-flex; align-items: center; gap: 8px; }
 .clay-menu-upgrade::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bevel-brass); }
-.clay-menu-version { margin: 0; padding: 6px 9px 4px; font: 400 11.5px/1.4 var(--bevel-font-mono); color: var(--bevel-muted); }
+.clay-menu-version { margin: 0; }
 
 .clay-menu-note { z-index: 2; width: max-content; max-width: 264px; padding: 8px 12px; font-size: 13px; line-height: 1.45; }
 
@@ -149,6 +141,19 @@ export default `.clay-menu-dock, .clay-menu-spots, .clay-seo {
 .clay-menu-btn-small { height: 26px; padding: 0 9px; font-size: 12px; }
 .clay-menu-btn-primary { --bevel-face: var(--bevel-ink); --bevel-edge-hi: color-mix(in srgb, var(--bevel-ink), light-dark(#FFFCF6, #FFFFFF) 22%); --bevel-edge-lo: color-mix(in srgb, var(--bevel-ink), light-dark(#0B0C13, #6A7090) 34%); color: var(--bevel-ground); }
 .clay-menu-btn-primary:hover { background: color-mix(in srgb, var(--bevel-ink), var(--bevel-ground) 12%); }
+`;
+
+export const MENU_FLOATING = `/* The dock: the roster (when a page opts in) and the capsule, fixed in one corner. */
+.clay-menu-dock { position: fixed; z-index: 2147482000; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
+.clay-menu-dock[data-corner$="left"] { right: auto; left: max(12px, env(safe-area-inset-left)); flex-direction: row-reverse; }
+.clay-menu-dock[data-corner^="bottom"] { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); }
+.clay-menu-dock[data-corner$="left"] :is(.clay-menu-list, .clay-people, .clay-menu-note) { right: auto; left: 0; }
+.clay-menu-dock[data-corner^="bottom"] :is(.clay-menu-list, .clay-people, .clay-menu-note) { top: auto; bottom: calc(100% + 8px); }
+.clay-menu-dock[data-dragging] .clay-menu { border-color: var(--bevel-brass); cursor: grabbing; }
+.clay-menu-grip { position: relative; display: inline-grid; place-items: center; width: 18px; height: 28px; margin: 0; padding: 0; border: 0; background: none; color: var(--bevel-faint); cursor: grab; touch-action: none; }
+.clay-menu-grip::before { content: ""; position: absolute; inset: -8px -2px -8px -10px; }
+.clay-menu-grip:hover { color: var(--bevel-ink-2); }
+.clay-menu-grip svg { display: block; width: 6px; height: 12px; fill: currentColor; }
 
 /* Drop spots while dragging. */
 .clay-menu-spots { position: fixed; inset: 0; z-index: 2147481999; pointer-events: none; }
@@ -158,8 +163,28 @@ export default `.clay-menu-dock, .clay-menu-spots, .clay-seo {
 .clay-menu-spot[data-to$="left"] { left: 12px; }
 .clay-menu-spot[data-to$="right"] { right: 12px; }
 .clay-menu-spot[data-near] { border: 2px solid var(--bevel-brass); background: var(--bevel-brass-soft); }
+`;
 
-@media (pointer: coarse), (max-width: 680px) {
+export const MENU_SKIN = `.clay-menu { height: 34px; padding: 0 4px 0 2px; border: 1px solid var(--bevel-line-3); background: var(--bevel-surface); box-shadow: var(--clay-shadow); }
+.clay-menu-goo { width: 28px; height: 28px; min-height: 0; border-radius: 0; border: 2px solid transparent; background: none; color: var(--bevel-ink); }
+.clay-menu-goo::before { content: ""; position: absolute; inset: -8px -8px -8px -4px; }
+.clay-menu-goo svg { width: 18px; height: auto; fill: currentColor; }
+.clay-menu-goo:hover svg { translate: 0 -1px; }
+.clay-menu-goo:active, .clay-menu-goo[aria-expanded="true"] { background: var(--bevel-face-in); border-color: var(--bevel-edge-in) var(--bevel-edge-in-hi) var(--bevel-edge-in-hi) var(--bevel-edge-in); }
+.clay-menu-goo:active svg, .clay-menu-goo[aria-expanded="true"] svg { translate: 1px 1px; }
+.clay-menu-list { min-width: 284px; padding: 6px; border: 1px solid var(--bevel-line-2); background: var(--bevel-surface); box-shadow: var(--clay-shadow); }
+.clay-menu-list [role="menuitem"] { min-height: 32px; padding: 5px 9px; font: 400 13px/1.35 var(--bevel-font-sans); color: var(--bevel-ink); }
+.clay-menu-list [role="menuitem"][aria-disabled="true"] { color: var(--bevel-faint); }
+.clay-menu-list [role="menuitem"][aria-disabled="true"] kbd { opacity: .6; }
+.clay-menu-list .clay-menu-pair [role="menuitem"] { min-height: 30px; padding: 4px 6px 4px 9px; border: 1px solid var(--bevel-line); }
+.clay-menu-list kbd { font: 500 11px/1 var(--bevel-font-mono); padding: 3px 5px; border: 1px solid var(--bevel-line-2); background: var(--bevel-sunk); color: var(--bevel-muted); }
+.clay-menu-list [part~="quiet"] { font-size: 12px; color: var(--bevel-muted); }
+.clay-menu-sep { height: 1px; margin: 4px 2px; background: var(--bevel-line); }
+.clay-menu-version { padding: 6px 9px 4px; font: 400 11.5px/1.4 var(--bevel-font-mono); color: var(--bevel-muted); }
+`;
+
+// Last, so no skin can shrink a touch target or bring motion back.
+export const MENU_TOUCH = `@media (pointer: coarse), (max-width: 680px) {
   .clay-menu-list [role="menuitem"] { min-height: 44px; font-size: 15px; }
   .clay-menu-list .clay-menu-pair [role="menuitem"] { min-height: 44px; }
   :is(.clay-menu-dock, .clay-seo) :is(input, textarea, select) { font-size: 16px; }
@@ -168,4 +193,7 @@ export default `.clay-menu-dock, .clay-menu-spots, .clay-seo {
 }
 @media (prefers-reduced-motion: reduce) {
   .clay-menu-track, .clay-menu-thumb { transition: none; }
-}`;
+}
+`;
+
+export default MENU_BASE + MENU_FLOATING + MENU_SKIN + MENU_TOUCH;