@shivaedev/work-board 0.2.1 → 0.3.0

package/dist/page/shell.js.map

@@ -1 +1 @@
-{"version":3,"file":"shell.js","sourceRoot":"","sources":["../../src/page/shell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,GAAW,EAAE,IAAY,EAAU,EAAE,CACzE;IACC,6DAA6D;IAC7D,qHAAqH;IACrH,UAAU,UAAU,CAAC,KAAK,CAAC,UAAU;IACrC,yGAAyG;IACzG,qDAAqD;IACrD,iCAAiC,GAAG,+DAA+D;IACnG,kBAAkB,IAAI,6BAA6B;CACnD,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC"}
+{"version":3,"file":"shell.js","sourceRoot":"","sources":["../../src/page/shell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,SAAS,QAAQ,CAAC,IAAY;IAC7B,OAAO,IAAI;SACT,KAAK,CAAC,GAAG,CAAC;SACV,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,SAAS,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC;SACjD,IAAI,CAAC,kCAAkC,CAAC,CAAC;AAC5C,CAAC;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,GAAW,EAAE,IAAY,EAAE,SAAiB,EAAE,KAAc,EAAE,QAAiB,EAAE,IAAI,GAAG,KAAK,EAAU,EAAE,CAC7I;IACC,kDAAkD,UAAU,CAAC,SAAS,CAAC,gCAAgC;IACvG,qHAAqH;IACrH,UAAU,UAAU,CAAC,KAAK,CAAC,UAAU;IACrC,yGAAyG;IACzG,qFAAqF;IACrF,0GAA0G;IAC1G,2GAA2G;IAC3G,4DAA4D,GAAG,gBAAgB;IAC/E,6IAA6I;IAC7I,iIAAiI,QAAQ,CAAC,KAAK,CAAC,QAAQ;IACxJ,qEAAqE,IAAI,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,0QAA0Q;IACjX,yEAAyE;IACzE,wMAAwM;IACxM,0LAA0L;IAC1L,0DAA0D;IAC1D,QAAQ,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,mBAAmB,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,wBAAwB,UAAU,CAAC,KAAK,CAAC,eAAe,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,eAAe,mBAAmB,IAAI,SAAS;IACxQ,eAAe,YAAY,gBAAgB;CAC3C,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC"}

package/dist/page/stateScript.d.ts

@@ -0,0 +1,2 @@
+export declare function pageStateScript(): string;
+//# sourceMappingURL=stateScript.d.ts.map

package/dist/page/stateScript.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stateScript.d.ts","sourceRoot":"","sources":["../../src/page/stateScript.ts"],"names":[],"mappings":"AAAA,wBAAgB,eAAe,IAAI,MAAM,CA+CxC"}

package/dist/page/stateScript.js

@@ -0,0 +1,49 @@
+export function pageStateScript() {
+    return `
+import { remember, swap } from "/_board/swap.js";
+import { renderDiagrams } from "/_board/diagrams.js";
+import { captureReading, reportMissingPassage, restoreReading } from "/_board/reading-state.js";
+import { refreshLibrary } from "/_board/library.js";
+
+export const capturePage = () => {
+  const page = document.implementation.createHTMLDocument(document.title);
+  for (const id of ["files", "doc", "breadcrumbs"]) page.body.append(document.getElementById(id).cloneNode(true));
+  return { page, reading: captureReading() };
+};
+
+export const applyPage = (page, preserve = false) => {
+  const incoming = page.getElementById("doc");
+  const current = document.getElementById("doc");
+  if (!incoming || !page.getElementById("files")) return false;
+  const reading = preserve ? captureReading() : null;
+  const cachedScheme = incoming.dataset.scheme;
+  if (preserve && (current.dataset.file === incoming.dataset.file || (current.dataset.identity && current.dataset.identity === incoming.dataset.identity))) {
+    swap(current, incoming);
+  } else {
+    current.replaceWith(document.importNode(incoming, true));
+    remember(document.getElementById("doc"));
+  }
+  const doc = document.getElementById("doc");
+  doc.className = incoming.className;
+  doc.dataset.file = incoming.dataset.file;
+  if (incoming.dataset.identity) doc.dataset.identity = incoming.dataset.identity; else delete doc.dataset.identity;
+  doc.dataset.url = incoming.dataset.url;
+  if (incoming.dataset.view) doc.dataset.view = incoming.dataset.view; else delete doc.dataset.view;
+  document.getElementById("work-open")?.setAttribute("aria-current", doc.dataset.view === "work" ? "page" : "false");
+  doc.dataset.scheme = document.documentElement.dataset.scheme;
+  swap(document.getElementById("files"), page.getElementById("files"));
+  const crumbs = page.getElementById("breadcrumbs");
+  if (crumbs) document.getElementById("breadcrumbs").replaceChildren(...document.importNode(crumbs, true).childNodes);
+  if (!preserve) {
+    document.querySelector('#files a[aria-current="page"]')?.closest("details")?.setAttribute("open", "");
+  }
+  refreshLibrary(!preserve);
+  if (reading) restoreReading({ ...reading, selection: null }, false);
+  renderDiagrams(document, cachedScheme && cachedScheme !== doc.dataset.scheme ? "figure.diagram" : undefined);
+  reportMissingPassage();
+  document.dispatchEvent(new Event("board-page"));
+  return true;
+};
+`;
+}
+//# sourceMappingURL=stateScript.js.map

package/dist/page/stateScript.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stateScript.js","sourceRoot":"","sources":["../../src/page/stateScript.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,eAAe;IAC9B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CP,CAAC;AACF,CAAC"}

package/dist/page/style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../src/page/style.ts"],"names":[],"mappings":"AA8EA,eAAO,MAAM,KAAK,QAA2C,CAAC"}
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../src/page/style.ts"],"names":[],"mappings":"AAyDA,eAAO,MAAM,KAAK,QAA4G,CAAC"}

package/dist/page/style.js

@@ -1,34 +1,11 @@
-const tokens = `
-:root {
-  color-scheme: light dark;
-  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
-  --bg: #ffffff; --surface: #f6f8fa; --text: #1f2328; --muted: #59636e; --border: #d1d9e0; --link: #0969da; --danger: #b3261e;
-}
-@media (prefers-color-scheme: dark) {
-  :root { --bg: #1e1e1e; --surface: #272727; --text: #e8e8e8; --muted: #a8a8a8; --border: #3d3d3d; --link: #58a6ff; --danger: #ff8a80; }
-}
-`;
-const page = `
-body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.65 var(--sans); }
-a { color: var(--link); }
-.page { box-sizing: content-box; max-width: 72ch; margin: 0 auto; padding: 0 16px 64px; }
-.bar { display: flex; align-items: flex-start; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
-.files { flex: 1; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
-.files a { color: var(--text); text-decoration: none; }
-.files a:hover, .files a[aria-current="page"] { color: var(--link); text-decoration: underline; }
-.files details[open] { flex-basis: 100%; }
-.files summary { cursor: pointer; color: var(--muted); }
-.files ul { list-style: none; margin: 4px 0 8px; padding: 0 0 0 12px; border-left: 1px solid var(--border); }
-.age { color: var(--muted); font: 12px var(--mono); margin-left: 6px; }
-.live { color: var(--muted); font: 12px/1.9 var(--mono); }
-.live[data-state="down"], .live[data-state="stale"] { color: var(--danger); }
-.meta { color: var(--muted); font-size: 14px; margin: 0; }
-.meta .age { margin: 0; }
-`;
+import { workStyle } from "#views/workStyle.ts";
+import { metadataStyles } from "./metadata.js";
+import { readingStyles } from "./readingStyles.js";
+import { searchStyles } from "./searchDialog.js";
+import { layout, theme } from "./workspaceStyles.js";
 const prose = `
 h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; margin: 1.6em 0 0.5em; }
-h1 { font-size: 1.9em; margin-top: 1em; }
+h1 { overflow-wrap: anywhere; font-size: 1.9em; margin-top: 1em; }
 h2 { font-size: 1.45em; }
 h3 { font-size: 1.15em; }
 h1 strong, h2 strong, h3 strong { font-weight: inherit; }
@@ -41,7 +18,8 @@ code { font: 0.875em var(--mono); background: var(--surface); padding: 0.1em 0.3
 pre { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
 pre code { background: none; padding: 0; font-size: 0.85em; }
 .shiki span { color: var(--shiki-light); }
-@media (prefers-color-scheme: dark) { .shiki span { color: var(--shiki-dark); } }
+@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .shiki span { color: var(--shiki-dark); } }
+:root[data-theme="dark"] .shiki span { color: var(--shiki-dark); }
 table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 0.925em; }
 th, td { text-align: left; vertical-align: top; padding: 6px 10px; border: 1px solid var(--border); }
 tr:nth-child(2n) td { background: var(--surface); }
@@ -56,9 +34,11 @@ const board = `
 .board-head .intro { color: var(--muted); }
 .counts { margin: 0; }
 .counts b { font-variant-numeric: tabular-nums; }
-.board section { margin-top: 2.2em; }
-.board section > h2 { margin: 0 0 0.2em; }
-.item, .notes { padding: 0.9em 0 0.1em; border-top: 1px solid var(--border); }
+.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--space); margin-top: 2em; align-items: start; }
+.board section { min-width: 0; }
+.board section > h2 { margin: 0 0 0.8em; font-size: 1.1em; overflow-wrap: anywhere; }
+.item, .notes { padding: var(--card-space); margin-bottom: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); overflow-wrap: anywhere; }
+.item > :last-child, .notes > :last-child { margin-bottom: 0; }
 .item > h3 { margin: 0 0 0.4em; }
 .item > h3 > code:first-child { background: none; padding: 0; margin-right: 0.6em; color: var(--muted); font-weight: 400; }
 footer { margin-top: 2.5em; padding-top: 1em; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.925em; }
@@ -71,5 +51,5 @@ figure.diagram[data-state="failed"] .diagram-source { display: block; }
 figure.diagram[data-state="failed"]::after { content: attr(data-error); color: var(--danger); font-size: 0.875em; }
 @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
 `;
-export const style = tokens + page + prose + board + diagrams;
+export const style = theme + layout + prose + board + diagrams + readingStyles() + searchStyles + metadataStyles + workStyle();
 //# sourceMappingURL=style.js.map

package/dist/page/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sourceRoot":"","sources":["../../src/page/style.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,GAAG;;;;;;;;;;CAUd,CAAC;AAEF,MAAM,IAAI,GAAG;;;;;;;;;;;;;;;;CAgBZ,CAAC;AAEF,MAAM,KAAK,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;CAyBb,CAAC;AAEF,MAAM,KAAK,GAAG;;;;;;;;;;CAUb,CAAC;AAEF,MAAM,QAAQ,GAAG;;;;;;;CAOhB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,CAAC"}
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../src/page/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAErD,MAAM,KAAK,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;CA0Bb,CAAC;AAEF,MAAM,KAAK,GAAG;;;;;;;;;;;;CAYb,CAAC;AAEF,MAAM,QAAQ,GAAG;;;;;;;CAOhB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,GAAG,aAAa,EAAE,GAAG,YAAY,GAAG,cAAc,GAAG,SAAS,EAAE,CAAC"}

package/dist/page/swap.d.ts

@@ -1,2 +1,2 @@
-export declare const swap = "\nconst containers = new Set([\"DIV\", \"SECTION\", \"ARTICLE\", \"HEADER\", \"FOOTER\", \"MAIN\", \"NAV\"]);\n\nconst structural = (element) => [...element.childNodes].every((node) => node.nodeType === 1 || node.textContent.trim() === \"\");\n\nconst pristine = new WeakMap();\n\nexport const remember = (element) => {\n  pristine.set(element, element.outerHTML);\n  if (containers.has(element.tagName)) for (const child of element.children) remember(child);\n};\n\nconst normalized = (element) => {\n  const copy = element.cloneNode(true);\n  for (const node of [copy, ...copy.querySelectorAll(\"*\")]) {\n    if (node.tagName === \"DETAILS\") node.removeAttribute(\"open\");\n    if (node.matches(\"figure.diagram\")) {\n      node.querySelector(\".diagram-svg\")?.remove();\n      node.dataset.state = \"pending\";\n      delete node.dataset.error;\n    }\n    if (node.matches(\"[data-modified]\")) node.textContent = \"\";\n  }\n  return copy.outerHTML;\n};\n\nconst signature = (element) => {\n  if (!pristine.has(element)) pristine.set(element, normalized(element));\n  return pristine.get(element);\n};\n\nconst sameShell = (old, next) =>\n  old.tagName === next.tagName && containers.has(old.tagName) && old.cloneNode(false).outerHTML === next.cloneNode(false).outerHTML;\n\nconst matches = (a, b) => {\n  let start = 0;\n  while (start < a.length && start < b.length && a[start] === b[start]) start++;\n  let tail = 0;\n  while (tail < a.length - start && tail < b.length - start && a[a.length - 1 - tail] === b[b.length - 1 - tail]) tail++;\n  const n = a.length - start - tail;\n  const m = b.length - start - tail;\n  const table = Array.from({ length: n + 1 }, () => new Uint32Array(m + 1));\n  for (let i = n - 1; i >= 0; i--) {\n    for (let j = m - 1; j >= 0; j--) {\n      table[i][j] = a[start + i] === b[start + j] ? table[i + 1][j + 1] + 1 : Math.max(table[i + 1][j], table[i][j + 1]);\n    }\n  }\n  const pairs = Array.from({ length: start }, (_, index) => [index, index]);\n  for (let i = 0, j = 0; i < n && j < m; ) {\n    if (a[start + i] === b[start + j]) pairs.push([start + i++, start + j++]);\n    else if (table[i + 1][j] >= table[i][j + 1]) i++;\n    else j++;\n  }\n  for (let index = tail; index > 0; index--) pairs.push([a.length - index, b.length - index]);\n  return [...pairs, [a.length, b.length]];\n};\n\nconst patch = (current, incoming) => {\n  if (!structural(current) || !structural(incoming)) {\n    current.replaceChildren(...incoming.childNodes);\n    for (const child of current.children) remember(child);\n    return;\n  }\n  const olds = [...current.children];\n  const news = [...incoming.children];\n  const signatures = news.map((next) => next.outerHTML);\n  const arrive = (index) => {\n    remember(news[index]);\n    return news[index];\n  };\n  let i = 0;\n  let j = 0;\n  for (const [kept, arrived] of matches(olds.map(signature), signatures)) {\n    const anchor = olds[kept] ?? null;\n    for (; i < kept && j < arrived; i++, j++) {\n      if (sameShell(olds[i], news[j])) {\n        patch(olds[i], news[j]);\n        pristine.set(olds[i], signatures[j]);\n      } else olds[i].replaceWith(arrive(j));\n    }\n    for (; i < kept; i++) olds[i].remove();\n    for (; j < arrived; j++) current.insertBefore(arrive(j), anchor);\n    i++;\n    j++;\n  }\n};\n\nconst keysOf = (root) => {\n  const seen = new Map();\n  return [...root.querySelectorAll(\"details\")].map((details) => {\n    const base =\n      details.dataset.key ??\n      (details.closest(\".item\")?.querySelector(\"h3\")?.textContent ?? \"\") + \"|\" + (details.querySelector(\"summary\")?.textContent ?? \"\");\n    const count = seen.get(base) ?? 0;\n    seen.set(base, count + 1);\n    return [base + \"#\" + count, details];\n  });\n};\n\nconst carryDrawings = (drawings, figures) => {\n  if (drawings.length !== figures.length) return;\n  figures.forEach((figure, index) => {\n    const drawing = drawings[index];\n    if (figure.dataset.state !== \"pending\" || drawing === null || drawing.isConnected) return;\n    figure.prepend(drawing);\n    figure.dataset.state = \"redrawing\";\n  });\n};\n\nexport const swap = (current, incoming) => {\n  const before = keysOf(current);\n  const open = new Map(before.map(([key, details]) => [key, details.open]));\n  const existing = new Set(before.map(([, details]) => details));\n  const drawings = [...current.querySelectorAll(\"figure.diagram\")].map((figure) => figure.querySelector(\".diagram-svg\"));\n  patch(current, incoming);\n  carryDrawings(drawings, [...current.querySelectorAll(\"figure.diagram\")]);\n  for (const [key, details] of keysOf(current)) {\n    const was = open.get(key);\n    if (was !== undefined && !existing.has(details)) details.open = was;\n  }\n};\n";
+export declare const swap = "\nconst containers = new Set([\"DIV\", \"SECTION\", \"ARTICLE\", \"HEADER\", \"FOOTER\", \"MAIN\", \"NAV\", \"FORM\", \"SELECT\", \"LABEL\", \"ASIDE\"]);\n\nconst structural = (element) => [...element.childNodes].every((node) => node.nodeType === 1 || node.textContent.trim() === \"\");\n\nconst pristine = new WeakMap();\n\nexport const remember = (element) => {\n  pristine.set(element, element.outerHTML);\n  if (containers.has(element.tagName)) for (const child of element.children) remember(child);\n};\n\nconst normalized = (element) => {\n  const copy = element.cloneNode(true);\n  for (const node of [copy, ...copy.querySelectorAll(\"*\")]) {\n    if (node.tagName === \"DETAILS\") node.removeAttribute(\"open\");\n    if (node.matches(\"figure.diagram\")) {\n      node.querySelector(\".diagram-svg\")?.remove();\n      node.dataset.state = \"pending\";\n      delete node.dataset.error;\n    }\n    if (node.matches(\"[data-modified]\")) node.textContent = \"\";\n  }\n  return copy.outerHTML;\n};\n\nconst signature = (element) => {\n  if (!pristine.has(element)) pristine.set(element, normalized(element));\n  return pristine.get(element);\n};\n\nconst sameShell = (old, next) =>\n  old.tagName === next.tagName && containers.has(old.tagName) && old.cloneNode(false).outerHTML === next.cloneNode(false).outerHTML;\n\nconst matches = (a, b) => {\n  let start = 0;\n  while (start < a.length && start < b.length && a[start] === b[start]) start++;\n  let tail = 0;\n  while (tail < a.length - start && tail < b.length - start && a[a.length - 1 - tail] === b[b.length - 1 - tail]) tail++;\n  const n = a.length - start - tail;\n  const m = b.length - start - tail;\n  const table = Array.from({ length: n + 1 }, () => new Uint32Array(m + 1));\n  for (let i = n - 1; i >= 0; i--) {\n    for (let j = m - 1; j >= 0; j--) {\n      table[i][j] = a[start + i] === b[start + j] ? table[i + 1][j + 1] + 1 : Math.max(table[i + 1][j], table[i][j + 1]);\n    }\n  }\n  const pairs = Array.from({ length: start }, (_, index) => [index, index]);\n  for (let i = 0, j = 0; i < n && j < m; ) {\n    if (a[start + i] === b[start + j]) pairs.push([start + i++, start + j++]);\n    else if (table[i + 1][j] >= table[i][j + 1]) i++;\n    else j++;\n  }\n  for (let index = tail; index > 0; index--) pairs.push([a.length - index, b.length - index]);\n  return [...pairs, [a.length, b.length]];\n};\n\nconst patch = (current, incoming) => {\n  const selected = current.tagName === \"SELECT\" ? current.value : null;\n  const fallback = incoming.tagName === \"SELECT\" ? incoming.value : null;\n  if (!structural(current) || !structural(incoming)) {\n    current.replaceChildren(...incoming.childNodes);\n    for (const child of current.children) remember(child);\n    return;\n  }\n  const olds = [...current.children];\n  const news = [...incoming.children];\n  const signatures = news.map((next) => next.outerHTML);\n  const arrive = (index) => {\n    remember(news[index]);\n    return news[index];\n  };\n  let i = 0;\n  let j = 0;\n  for (const [kept, arrived] of matches(olds.map(signature), signatures)) {\n    const anchor = olds[kept] ?? null;\n    for (; i < kept && j < arrived; i++, j++) {\n      if (sameShell(olds[i], news[j])) {\n        patch(olds[i], news[j]);\n        pristine.set(olds[i], signatures[j]);\n      } else olds[i].replaceWith(arrive(j));\n    }\n    for (; i < kept; i++) olds[i].remove();\n    for (; j < arrived; j++) current.insertBefore(arrive(j), anchor);\n    i++;\n    j++;\n  }\n  if (selected !== null) current.value = [...current.options].some((option) => option.value === selected) ? selected : fallback;\n};\n\nconst keysOf = (root) => {\n  const seen = new Map();\n  return [...root.querySelectorAll(\"details\")].map((details) => {\n    const base =\n      details.dataset.key ??\n      (details.closest(\".item\")?.querySelector(\"h3\")?.textContent ?? \"\") + \"|\" + (details.querySelector(\"summary\")?.textContent ?? \"\");\n    const count = seen.get(base) ?? 0;\n    seen.set(base, count + 1);\n    return [base + \"#\" + count, details];\n  });\n};\n\nconst carryDrawings = (drawings, figures) => {\n  if (drawings.length !== figures.length) return;\n  figures.forEach((figure, index) => {\n    const drawing = drawings[index];\n    if (figure.dataset.state !== \"pending\" || drawing === null || drawing.isConnected) return;\n    figure.prepend(drawing);\n    figure.dataset.state = \"redrawing\";\n  });\n};\n\nexport const swap = (current, incoming) => {\n  const before = keysOf(current);\n  const open = new Map(before.map(([key, details]) => [key, details.open]));\n  const existing = new Set(before.map(([, details]) => details));\n  const drawings = [...current.querySelectorAll(\"figure.diagram\")].map((figure) => figure.querySelector(\".diagram-svg\"));\n  patch(current, incoming);\n  carryDrawings(drawings, [...current.querySelectorAll(\"figure.diagram\")]);\n  for (const [key, details] of keysOf(current)) {\n    const was = open.get(key);\n    if (was !== undefined && !existing.has(details)) details.open = was;\n  }\n};\n";
 //# sourceMappingURL=swap.d.ts.map

package/dist/page/swap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"swap.d.ts","sourceRoot":"","sources":["../../src/page/swap.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI,0pJAyHhB,CAAC"}
+{"version":3,"file":"swap.d.ts","sourceRoot":"","sources":["../../src/page/swap.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI,g+JA4HhB,CAAC"}

package/dist/page/swap.js

@@ -1,5 +1,5 @@
 export const swap = `
-const containers = new Set(["DIV", "SECTION", "ARTICLE", "HEADER", "FOOTER", "MAIN", "NAV"]);
+const containers = new Set(["DIV", "SECTION", "ARTICLE", "HEADER", "FOOTER", "MAIN", "NAV", "FORM", "SELECT", "LABEL", "ASIDE"]);
 
 const structural = (element) => [...element.childNodes].every((node) => node.nodeType === 1 || node.textContent.trim() === "");
 
@@ -56,6 +56,8 @@ const matches = (a, b) => {
 };
 
 const patch = (current, incoming) => {
+  const selected = current.tagName === "SELECT" ? current.value : null;
+  const fallback = incoming.tagName === "SELECT" ? incoming.value : null;
   if (!structural(current) || !structural(incoming)) {
     current.replaceChildren(...incoming.childNodes);
     for (const child of current.children) remember(child);
@@ -83,6 +85,7 @@ const patch = (current, incoming) => {
     i++;
     j++;
   }
+  if (selected !== null) current.value = [...current.options].some((option) => option.value === selected) ? selected : fallback;
 };
 
 const keysOf = (root) => {

package/dist/page/swap.js.map

@@ -1 +1 @@
-{"version":3,"file":"swap.js","sourceRoot":"","sources":["../../src/page/swap.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHnB,CAAC"}
+{"version":3,"file":"swap.js","sourceRoot":"","sources":["../../src/page/swap.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4HnB,CAAC"}

package/dist/page/workspaceStyles.d.ts

@@ -0,0 +1,3 @@
+export declare const layout = "\n* { box-sizing: border-box; }\nbody { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.65 var(--sans); }\na { color: var(--link); }\nbutton, select { font: inherit; color: inherit; }\nbutton, select, summary { cursor: pointer; }\nbutton, select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); }\n:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }\n.skip { position: fixed; top: -100px; left: 16px; z-index: 5; padding: 8px 16px; background: var(--card); }\n.skip:focus { top: 8px; }\n.workspace { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }\n:root[data-sidebar=\"closed\"] .workspace { grid-template-columns: minmax(0, 1fr); }\n.sidebar { --focus: #e2bc79; position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; padding: var(--space) 16px; background: var(--sidebar); color: var(--sidebar-text); }\n.sidebar[hidden] { display: none; }\n.brand { display: block; padding: 0 12px 28px; font-size: 24px; font-weight: 600; letter-spacing: -0.8px; text-decoration: none; color: var(--sidebar-text); }\n.brand span { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--sidebar-muted); }\n.sidebar .nav-heading { margin: 0 12px 12px; font: 600 12px var(--sans); color: var(--sidebar-muted); }\n.files { font-size: 14px; }\n.files ul { list-style: none; margin: 0 0 10px; padding: 0; }\n.files li { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 4px 10px; border-radius: 5px; }\n.files li:has(a[aria-current=\"page\"]) { background: #385242; }\n.files a { flex: 1; min-width: 0; color: var(--sidebar-text); text-decoration: none; overflow-wrap: anywhere; }\n.files a:hover, .files a[aria-current=\"page\"] { text-decoration: underline; text-underline-offset: 4px; }\n.files details { margin: 8px 0; }\n.files summary { padding: 6px 10px; color: var(--sidebar-muted); overflow-wrap: anywhere; }\n.files details ul { margin-left: 14px; border-left: 1px solid var(--sidebar-border); }\n.age { color: var(--muted); font: 12px var(--mono); margin-left: 6px; white-space: nowrap; }\n.files .age { color: var(--sidebar-muted); margin: 0; flex-shrink: 0; }\n.page { min-width: 0; }\n.bar { display: flex; align-items: center; gap: 16px; padding: 16px var(--space); border-bottom: 1px solid var(--border); font-size: 13px; }\n.bar button { flex-shrink: 0; }\n.breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; flex: 1; min-width: 0; overflow-wrap: anywhere; }\n.breadcrumbs > span:not(.separator) { min-width: 0; }\n.separator { color: var(--muted); }\n.live { color: var(--muted); font: 12px/1.9 var(--mono); }\n.live[data-state=\"down\"], .live[data-state=\"stale\"] { color: var(--danger); }\n.preferences { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px var(--space) 0; color: var(--muted); font-size: 12px; }\n.preference { display: flex; gap: 8px; align-items: center; }\n#preference-status:empty { display: none; }\n#doc { padding: var(--space) var(--space) 64px; min-width: 0; }\n.document-view { max-width: calc(72ch + 2 * var(--space)); margin-inline: auto; }\n.board-view { max-width: 1600px; margin-inline: auto; }\n.meta { color: var(--muted); font-size: 13px; margin: 0; overflow-wrap: anywhere; }\n.meta .age { margin: 0; }\n@media (max-width: 760px) {\n  .workspace { grid-template-columns: minmax(0, 1fr); }\n  .sidebar { position: static; height: auto; max-height: 42vh; border-bottom: 1px solid var(--border); }\n  .brand { padding-bottom: 16px; }\n  .bar { flex-wrap: wrap; gap: 12px; }\n  .breadcrumbs { flex-basis: calc(100% - 100px); }\n  .live { margin-left: auto; }\n  .preferences { justify-content: flex-start; }\n  :root { --space: 18px; }\n}\n";
+export declare const theme = "\n:root {\n  --sans: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;\n  --space: 24px; --card-space: 20px;\n  \n  color-scheme: light;\n  --bg: #f7f8f4; --surface: #edf1e7; --card: #ffffff; --text: #263c34; --muted: #596957;\n  --border: #d5dfd0; --link: #315f45; --danger: #a03024; --focus: #976323;\n  --sidebar: #203a30; --sidebar-text: #e7eee2; --sidebar-muted: #b6c8ad; --sidebar-border: #4a624c;\n\n}\n@media (prefers-color-scheme: dark) { :root:not([data-theme=\"light\"]) { \n  color-scheme: dark;\n  --bg: #18251f; --surface: #26382d; --card: #203027; --text: #e7eee2; --muted: #b0c1a6;\n  --border: #455a48; --link: #b1d4a1; --danger: #ffafa2; --focus: #e2bc79;\n  --sidebar: #142219; --sidebar-text: #e7eee2; --sidebar-muted: #b6c8ad; --sidebar-border: #455a48;\n } }\n:root[data-theme=\"dark\"] { \n  color-scheme: dark;\n  --bg: #18251f; --surface: #26382d; --card: #203027; --text: #e7eee2; --muted: #b0c1a6;\n  --border: #455a48; --link: #b1d4a1; --danger: #ffafa2; --focus: #e2bc79;\n  --sidebar: #142219; --sidebar-text: #e7eee2; --sidebar-muted: #b6c8ad; --sidebar-border: #455a48;\n }\n:root[data-density=\"compact\"] { --space: 16px; --card-space: 12px; }\n";
+//# sourceMappingURL=workspaceStyles.d.ts.map

package/dist/page/workspaceStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspaceStyles.d.ts","sourceRoot":"","sources":["../../src/page/workspaceStyles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM,0wHAsDlB,CAAC;AAcF,eAAO,MAAM,KAAK,quCAUjB,CAAC"}

package/dist/page/workspaceStyles.js

@@ -0,0 +1,79 @@
+export const layout = `
+* { box-sizing: border-box; }
+body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.65 var(--sans); }
+a { color: var(--link); }
+button, select { font: inherit; color: inherit; }
+button, select, summary { cursor: pointer; }
+button, select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); }
+:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
+.skip { position: fixed; top: -100px; left: 16px; z-index: 5; padding: 8px 16px; background: var(--card); }
+.skip:focus { top: 8px; }
+.workspace { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
+:root[data-sidebar="closed"] .workspace { grid-template-columns: minmax(0, 1fr); }
+.sidebar { --focus: #e2bc79; position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; padding: var(--space) 16px; background: var(--sidebar); color: var(--sidebar-text); }
+.sidebar[hidden] { display: none; }
+.brand { display: block; padding: 0 12px 28px; font-size: 24px; font-weight: 600; letter-spacing: -0.8px; text-decoration: none; color: var(--sidebar-text); }
+.brand span { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--sidebar-muted); }
+.sidebar .nav-heading { margin: 0 12px 12px; font: 600 12px var(--sans); color: var(--sidebar-muted); }
+.files { font-size: 14px; }
+.files ul { list-style: none; margin: 0 0 10px; padding: 0; }
+.files li { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 4px 10px; border-radius: 5px; }
+.files li:has(a[aria-current="page"]) { background: #385242; }
+.files a { flex: 1; min-width: 0; color: var(--sidebar-text); text-decoration: none; overflow-wrap: anywhere; }
+.files a:hover, .files a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
+.files details { margin: 8px 0; }
+.files summary { padding: 6px 10px; color: var(--sidebar-muted); overflow-wrap: anywhere; }
+.files details ul { margin-left: 14px; border-left: 1px solid var(--sidebar-border); }
+.age { color: var(--muted); font: 12px var(--mono); margin-left: 6px; white-space: nowrap; }
+.files .age { color: var(--sidebar-muted); margin: 0; flex-shrink: 0; }
+.page { min-width: 0; }
+.bar { display: flex; align-items: center; gap: 16px; padding: 16px var(--space); border-bottom: 1px solid var(--border); font-size: 13px; }
+.bar button { flex-shrink: 0; }
+.breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.breadcrumbs > span:not(.separator) { min-width: 0; }
+.separator { color: var(--muted); }
+.live { color: var(--muted); font: 12px/1.9 var(--mono); }
+.live[data-state="down"], .live[data-state="stale"] { color: var(--danger); }
+.preferences { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px var(--space) 0; color: var(--muted); font-size: 12px; }
+.preference { display: flex; gap: 8px; align-items: center; }
+#preference-status:empty { display: none; }
+#doc { padding: var(--space) var(--space) 64px; min-width: 0; }
+.document-view { max-width: calc(72ch + 2 * var(--space)); margin-inline: auto; }
+.board-view { max-width: 1600px; margin-inline: auto; }
+.meta { color: var(--muted); font-size: 13px; margin: 0; overflow-wrap: anywhere; }
+.meta .age { margin: 0; }
+@media (max-width: 760px) {
+  .workspace { grid-template-columns: minmax(0, 1fr); }
+  .sidebar { position: static; height: auto; max-height: 42vh; border-bottom: 1px solid var(--border); }
+  .brand { padding-bottom: 16px; }
+  .bar { flex-wrap: wrap; gap: 12px; }
+  .breadcrumbs { flex-basis: calc(100% - 100px); }
+  .live { margin-left: auto; }
+  .preferences { justify-content: flex-start; }
+  :root { --space: 18px; }
+}
+`;
+const light = `
+  color-scheme: light;
+  --bg: #f7f8f4; --surface: #edf1e7; --card: #ffffff; --text: #263c34; --muted: #596957;
+  --border: #d5dfd0; --link: #315f45; --danger: #a03024; --focus: #976323;
+  --sidebar: #203a30; --sidebar-text: #e7eee2; --sidebar-muted: #b6c8ad; --sidebar-border: #4a624c;
+`;
+const dark = `
+  color-scheme: dark;
+  --bg: #18251f; --surface: #26382d; --card: #203027; --text: #e7eee2; --muted: #b0c1a6;
+  --border: #455a48; --link: #b1d4a1; --danger: #ffafa2; --focus: #e2bc79;
+  --sidebar: #142219; --sidebar-text: #e7eee2; --sidebar-muted: #b6c8ad; --sidebar-border: #455a48;
+`;
+export const theme = `
+:root {
+  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+  --space: 24px; --card-space: 20px;
+  ${light}
+}
+@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { ${dark} } }
+:root[data-theme="dark"] { ${dark} }
+:root[data-density="compact"] { --space: 16px; --card-space: 12px; }
+`;
+//# sourceMappingURL=workspaceStyles.js.map

package/dist/page/workspaceStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspaceStyles.js","sourceRoot":"","sources":["../../src/page/workspaceStyles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDrB,CAAC;AACF,MAAM,KAAK,GAAG;;;;;CAKb,CAAC;AACF,MAAM,IAAI,GAAG;;;;;CAKZ,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG;;;;;IAKjB,KAAK;;0EAEiE,IAAI;6BACjD,IAAI;;CAEhC,CAAC"}