@tensorix/metahub 0.5.6 → 0.5.8

package/dist/edge-worker.js

@@ -1850,6 +1850,10 @@ var EN = {
   "（空文档）": "(empty document)",
   文档: "Document",
   表格: "Table",
+  记录: "Record",
+  关闭: "Close",
+  查看全文: "Read full text",
+  "查看「{name}」全文": "Read full {name}",
   编辑: "Edit",
   编辑文档: "Edit document",
   保存: "Save",

package/dist/index.js

@@ -9389,7 +9389,7 @@ var package_default;
 var init_package = __esm(() => {
   package_default = {
     name: "@tensorix/metahub",
-    version: "0.5.6",
+    version: "0.5.8",
     description: "Metahub core library and CLI",
     license: "AGPL-3.0-only",
     type: "module",
@@ -12038,7 +12038,7 @@ var init_storage_s3_sign = __esm(() => {
 
 // src/core/sync/storage-s3-bun.ts
 var {S3Client } = globalThis.Bun;
-function makeClient(config) {
+function makeBunStorageClient(config) {
   const vhost = isVirtualHostedStyle(config);
   const s3 = new S3Client({
     accessKeyId: config.accessKeyId,
@@ -12082,7 +12082,7 @@ function makeClient(config) {
       if (opts?.ifMatch) {
         const res = await aws().fetch(objectUrl(key), {
           method: "PUT",
-          body,
+          body: new Uint8Array(body).buffer,
           headers: {
             "if-match": opts.ifMatch,
             ...opts.contentType ? { "content-type": opts.contentType } : {}
@@ -12124,7 +12124,7 @@ var init_storage_s3_bun = __esm(() => {
   init_errors();
   init_storage();
   init_storage_s3_sign();
-  setStorageClientFactory(makeClient);
+  setStorageClientFactory(makeBunStorageClient);
   setBucketCorsAdmin(putBucketCors);
 });
 
@@ -13280,6 +13280,10 @@ var init_page_messages = __esm(() => {
     "\uFF08\u7A7A\u6587\u6863\uFF09": "(empty document)",
     \u{6587}\u{6863}: "Document",
     \u{8868}\u{683c}: "Table",
+    \u{8bb0}\u{5f55}: "Record",
+    \u{5173}\u{95ed}: "Close",
+    \u{67e5}\u{770b}\u{5168}\u{6587}: "Read full text",
+    "\u67E5\u770B\u300C{name}\u300D\u5168\u6587": "Read full {name}",
     \u{7f16}\u{8f91}: "Edit",
     \u{7f16}\u{8f91}\u{6587}\u{6863}: "Edit document",
     \u{4fdd}\u{5b58}: "Save",
@@ -14972,7 +14976,7 @@ function copyScript(locale = "zh-CN") {
 var btn=document.getElementById('mh-copy');if(!btn)return;var L=${L};
 var label=btn.querySelector('span');var timer=0;
 function absolutize(root){root.querySelectorAll('img[src],a[href],video[src],audio[src]').forEach(function(el){var a=el.tagName==='A'?'href':'src';var v=el.getAttribute(a);if(v&&!/^(blob|data):/.test(v))el.setAttribute(a,new URL(v,location.href).href);});}
-function payload(){var src=document.getElementById('mh-src');var text=src?src.content.textContent:'';var body=document.querySelector('article.doc')||document.querySelector('.table-wrap');var html='';if(body){var c=body.cloneNode(true);absolutize(c);html=c.innerHTML;}return{text:text,html:html};}
+function payload(){var src=document.getElementById('mh-src');var text=src?src.content.textContent:'';var body=document.querySelector('article.doc')||document.querySelector('.table-wrap');var html='';if(body){var c=body.cloneNode(true);c.querySelectorAll('.share-cell-expand').forEach(function(el){el.remove();});c.querySelectorAll('.share-cell-value').forEach(function(el){el.removeAttribute('contenteditable');el.removeAttribute('class');el.removeAttribute('style');});c.querySelectorAll('.share-table').forEach(function(el){el.removeAttribute('data-ready');});absolutize(c);html=c.innerHTML;}return{text:text,html:html};}
 function legacy(text){var ta=document.createElement('textarea');ta.value=text;ta.setAttribute('readonly','');ta.style.cssText='position:fixed;top:0;left:0;opacity:0';document.body.appendChild(ta);ta.select();var ok=false;try{ok=document.execCommand('copy');}catch(e){}ta.remove();return ok?Promise.resolve():Promise.reject(new Error('copy'));}
 function write(p){var nc=navigator.clipboard;if(nc&&nc.write&&window.ClipboardItem){try{return nc.write([new ClipboardItem({'text/plain':new Blob([p.text],{type:'text/plain'}),'text/html':new Blob([p.html],{type:'text/html'})})]);}catch(e){}}if(nc&&nc.writeText)return nc.writeText(p.text);return legacy(p.text);}
 function settle(cls,txt){clearTimeout(timer);btn.classList.remove('done','fail');void btn.offsetWidth;btn.classList.add(cls);if(label)label.textContent=txt;timer=setTimeout(function(){btn.classList.remove(cls);if(label)label.textContent=L.idle;},1600);}
@@ -14996,6 +15000,140 @@ var init_share_copy = __esm(() => {
   init_page_messages();
 });
 
+// src/core/sync/share-table-client.js
+function mountShareTable(labels) {
+  const table = document.querySelector("table.share-table");
+  const peek = document.querySelector(".share-text-peek");
+  if (!table || !peek || typeof peek.showModal !== "function")
+    return;
+  const heading = peek.querySelector("h2");
+  const record = peek.querySelector(".share-text-record");
+  const body = peek.querySelector(".share-text-body");
+  const feedback = peek.querySelector(".share-text-feedback");
+  let restore = null;
+  let selected = null;
+  const select = (cell) => {
+    selected?.classList.remove("is-selected");
+    selected = cell;
+    cell.classList.add("is-selected");
+  };
+  const measure = (value) => {
+    const button = value.parentElement.querySelector(".share-cell-expand");
+    button.hidden = !(value.scrollHeight > value.clientHeight + 1 || value.scrollWidth > value.clientWidth + 1);
+  };
+  table.dataset.ready = "";
+  const values = Array.from(table.querySelectorAll(".share-cell-value"));
+  const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver((entries) => {
+    for (const entry of entries)
+      measure(entry.target);
+  }) : null;
+  for (const value of values) {
+    measure(value);
+    observer?.observe(value);
+    value.addEventListener("input", () => measure(value));
+    value.addEventListener("blur", () => requestAnimationFrame(() => measure(value)));
+  }
+  document.fonts?.ready.then(() => values.forEach(measure));
+  table.addEventListener("click", (event) => {
+    const target = event.target;
+    const cell = target.closest("td");
+    if (!cell)
+      return;
+    select(cell);
+    const button = target.closest(".share-cell-expand");
+    if (!button)
+      return;
+    const column = Array.from(cell.parentElement.children).indexOf(cell);
+    heading.textContent = table.querySelectorAll("thead th")[column].textContent;
+    record.textContent = cell.parentElement.querySelector(".share-cell-value")?.textContent || labels.record;
+    body.textContent = cell.querySelector(".share-cell-value").textContent;
+    feedback.textContent = "";
+    restore = button;
+    peek.showModal();
+    body.scrollTop = 0;
+  });
+  peek.querySelector(".share-text-close").addEventListener("click", () => peek.close());
+  peek.addEventListener("click", (event) => {
+    const rect = peek.getBoundingClientRect();
+    if (event.target === peek && (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom))
+      peek.close();
+  });
+  peek.addEventListener("close", () => restore?.focus({ preventScroll: true }));
+  peek.querySelector(".share-text-copy").addEventListener("click", async () => {
+    const text = body.textContent ?? "";
+    try {
+      await navigator.clipboard.writeText(text);
+      feedback.textContent = labels.copied;
+    } catch {
+      const input = document.createElement("textarea");
+      input.value = text;
+      input.readOnly = true;
+      input.style.cssText = "position:fixed;opacity:0;top:0;left:0";
+      peek.append(input);
+      input.select();
+      try {
+        feedback.textContent = document.execCommand("copy") ? labels.copied : labels.failed;
+      } catch {
+        feedback.textContent = labels.failed;
+      }
+      input.remove();
+      peek.querySelector(".share-text-copy").focus();
+    }
+  });
+}
+
+// src/core/sync/share-table.ts
+function shareCellHtml(html, name, locale, editAttrs = "") {
+  return `<td><div class="share-cell-value"${editAttrs ? ` ${editAttrs}` : ""}>${html}</div><button type="button" class="share-cell-expand" hidden aria-label="${escapeHtml(pm(locale, "\u67E5\u770B\u300C{name}\u300D\u5168\u6587", { name }))}" title="${escapeHtml(pm(locale, "\u67E5\u770B\u5168\u6587"))}">${expandIcon}</button></td>`;
+}
+function shareTableHtml(columns, rows, locale) {
+  const widths = columns.map((p) => typeof p.width === "number" && Number.isFinite(p.width) ? Math.max(80, Math.min(640, p.width)) : 180);
+  return `<div class="table-wrap"><table class="db share-table" style="width:${widths.reduce((a, b) => a + b, 0)}px"><colgroup>${widths.map((w) => `<col style="width:${w}px">`).join("")}</colgroup><thead><tr>${columns.map((p) => `<th scope="col" title="${escapeHtml(p.name)}">${escapeHtml(p.name)}</th>`).join("")}</tr></thead><tbody>${rows}</tbody></table></div>
+<dialog class="share-text-peek" aria-labelledby="share-text-heading">
+  <div class="share-text-toolbar"><button type="button" class="share-text-close" aria-label="${escapeHtml(pm(locale, "\u5173\u95ED"))}" autofocus>${closeIcon}</button><button type="button" class="copy-btn share-text-copy">${escapeHtml(pm(locale, "\u590D\u5236\u5168\u6587"))}</button><span class="share-text-feedback" role="status"></span></div>
+  <div class="share-text-heading"><h2 id="share-text-heading"></h2><p class="share-text-record"></p></div>
+  <div class="share-text-body" tabindex="0"></div>
+</dialog>`;
+}
+function shareTableScript(locale) {
+  return `(${mountShareTable.toString()})(${JSON.stringify({ copied: pm(locale, "\u5DF2\u590D\u5236"), failed: pm(locale, "\u590D\u5236\u5931\u8D25"), record: pm(locale, "\u8BB0\u5F55") })});`;
+}
+var expandIcon = '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M15 4v16"/></svg>', closeIcon = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18"/></svg>', SHARE_TABLE_CSS = `
+#app:has(.share-table),.wrap:has(.share-table){max-width:1440px}
+.table-wrap:has(.share-table){max-width:100%;overflow:auto;overscroll-behavior-x:contain}
+table.share-table{table-layout:fixed;min-width:100%}
+table.share-table th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:var(--muted)}
+table.share-table td{position:relative;vertical-align:top}
+.share-cell-value{min-width:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55}
+.share-table[data-ready] .share-cell-value{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;max-height:4.65em}
+.share-table .tag{max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}
+.share-cell-expand{position:absolute;top:5px;right:5px;display:flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:1px solid var(--line);border-radius:5px;background:var(--bg);color:var(--fg);cursor:pointer;opacity:0;pointer-events:none}
+.share-cell-expand[hidden]{display:none}
+.share-cell-expand svg,.share-text-close svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
+.share-table td:is(:hover,:focus-within,.is-selected) .share-cell-expand{opacity:1;pointer-events:auto}
+.share-table td.is-selected{box-shadow:inset 0 0 0 1.5px var(--accent);background:var(--accent-soft)}
+.share-cell-expand:hover,.share-text-close:hover{background:var(--card)}
+.share-cell-expand:focus-visible,.share-text-close:focus-visible,.share-text-body:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
+.share-table[data-ready] [contenteditable]:focus{display:block;-webkit-line-clamp:unset;max-height:min(320px,40vh);overflow:auto;outline:2px solid var(--accent);outline-offset:2px}
+.share-cell-value.saving{opacity:.5}.share-cell-value.saved{background:color-mix(in srgb,var(--success) 18%,transparent)}
+.share-text-peek{position:fixed;inset:0 0 0 auto;margin:0;padding:0;width:min(620px,100vw);max-width:100vw;height:100vh;height:100dvh;max-height:100dvh;border:0;border-inline-start:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;overflow:hidden}
+.share-text-peek[open]{display:flex;flex-direction:column}
+.share-text-peek::backdrop{background:rgba(15,15,25,.3)}
+body:has(.share-text-peek[open]){overflow:hidden}
+.share-text-toolbar{display:flex;align-items:center;gap:12px;flex:none;padding:12px 20px;border-bottom:1px solid var(--line)}
+.share-text-close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin-inline-end:auto;border:0;border-radius:5px;background:transparent;color:var(--muted);cursor:pointer}
+.share-text-feedback{font-size:13px;color:var(--muted)}.share-text-feedback:empty{display:none}
+.share-text-heading{flex:none;padding:24px 32px 16px;min-width:0}
+.share-text-heading h2{margin:0;font-size:20px;line-height:1.4;overflow-wrap:anywhere}
+.share-text-record{margin:6px 0 0;font-size:13px;color:var(--muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
+.share-text-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:0 32px 40px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.75;user-select:text}
+@media(max-width:600px){.share-text-peek{width:100vw}.share-text-toolbar{padding:10px 14px}.share-text-heading{padding:20px 20px 16px}.share-text-body{padding:0 20px 32px;font-size:16px}}
+@media(hover:none),(pointer:coarse){.share-cell-expand{opacity:1;pointer-events:auto;width:44px;height:44px;top:0;right:0}.share-table td:has(.share-cell-expand:not([hidden])) .share-cell-value{min-height:44px}.share-text-close{width:44px;height:44px}}
+`;
+var init_share_table = __esm(() => {
+  init_page_messages();
+});
+
 // src/core/sync/share-serve.ts
 function notFound() {
   return new Response("not found", { status: 404 });
@@ -15162,19 +15300,18 @@ async function serveTable(ctx, req, share, sub, locale) {
   }
   const titlesFor = (p) => p.type === "relation" ? relTitles.get(p.config?.database ?? "") : undefined;
   const editable = share.permission === "edit";
-  const head = props.map((p) => `<th>${escapeHtml(p.name)}</th>`).join("");
   const rows = records.map((r) => {
     const tds = props.map((p) => {
       const v = r.cells[p.id];
       if (editable && editableType(p.type)) {
-        return `<td contenteditable data-rec="${escapeHtml(r.id)}" data-prop="${escapeHtml(p.id)}" data-type="${p.type}">${escapeHtml(cellText(p, v))}</td>`;
+        return shareCellHtml(escapeHtml(cellText(p, v)), p.name, locale, `contenteditable aria-label="${escapeHtml(p.name)}" data-rec="${escapeHtml(r.id)}" data-prop="${escapeHtml(p.id)}" data-type="${p.type}"`);
       }
-      return `<td>${cellHtml(p, v, titlesFor(p))}</td>`;
+      return shareCellHtml(cellHtml(p, v, titlesFor(p)), p.name, locale);
     }).join("");
     return `<tr>${tds}</tr>`;
   }).join("");
-  const inner = `<div class="table-wrap"><table class="db"><thead><tr>${head}</tr></thead><tbody>${rows}</tbody></table></div>`;
-  const script = editable ? tableEditScript(locale, share.slug) : "";
+  const inner = shareTableHtml(props.map((p) => ({ name: p.name, width: p.config?.width })), rows, locale);
+  const script = shareTableScript(locale) + (editable ? tableEditScript(locale, share.slug) : "");
   const copySource = markdownTable(props.map((p) => p.name), records.map((r) => props.map((p) => cellText(p, r.cells[p.id], titlesFor(p)))));
   return new Response(pageShell(dbRow.name || pm(locale, "\u8868\u683C"), inner, {
     lang: locale,
@@ -15186,7 +15323,7 @@ async function serveTable(ctx, req, share, sub, locale) {
 function tableEditScript(locale, slug) {
   return `
   const L=${JSON.stringify({ failed: pm(locale, "\u4FDD\u5B58\u5931\u8D25") })};
-  document.querySelectorAll('td[contenteditable]').forEach(td=>{
+  document.querySelectorAll('.share-cell-value[contenteditable]').forEach(td=>{
     let orig=td.textContent;
     td.addEventListener('blur', async ()=>{
       const val=td.textContent;
@@ -15412,6 +15549,7 @@ function pageShell(title, inner, opts) {
   header.mh h1.title{font-size:22px;margin:0}
   .edit-btn{background:var(--accent);color:var(--accent-fg);border:0;border-radius:7px;height:32px;padding:0 14px;cursor:pointer;font-size:13px;font-weight:500;font-family:inherit}
   ${COPY_CSS}
+  ${SHARE_TABLE_CSS}
   .hint{color:var(--muted);font-size:13px;margin:0 0 14px}
   article.doc h1,article.doc h2,article.doc h3{line-height:1.3;margin:1.4em 0 .5em}
   article.doc h1{font-size:1.7em} article.doc h2{font-size:1.4em} article.doc h3{font-size:1.2em}
@@ -15471,6 +15609,7 @@ var init_share_serve = __esm(() => {
   init_share_render();
   init_share_copy();
   init_page_messages();
+  init_share_table();
   HTML = { "content-type": "text/html; charset=utf-8" };
   HASH_RE2 = /^[0-9a-f]{16,64}$/;
   SHARE_SESSION_TTL_MS = 12 * 60 * 60 * 1000;
@@ -17073,9 +17212,30 @@ var styles_default = `  :root {
   .theme-card.sel .tc-ico { background:var(--selected-icon-bg); color:var(--selected-icon-fg); }
   .theme-card.sel .tc-check { opacity:1; transform:scale(1); }
   @media (max-width:560px) { .theme-grid { grid-template-columns:1fr; } }
-  .brand-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr)); }
-  .brand-preview { display:block; width:56px; height:56px; }
-  .brand-caption { margin:12px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
+  .brand-appearance { container:brand-appearance / inline-size; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg); }
+  .brand-controls { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:24px; padding:18px 24px; }
+  .brand-preview { display:block; width:64px; height:64px; }
+  .brand-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; min-width:0; padding-left:24px; border-left:1px solid var(--line); }
+  .brand-option-row { display:grid; align-content:center; gap:6px; min-width:0; }
+  .brand-option-label { color:var(--fg-soft); font-size:var(--fs-ui); }
+  .brand-segments { display:flex; gap:2px; padding:3px; border-radius:var(--radius); background:var(--surface-2); }
+  .brand-segment { position:relative; flex:1; min-width:0; text-align:center; }
+  .brand-segment input { position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:pointer; }
+  .brand-segment > span { display:flex; align-items:center; justify-content:center; min-height:32px; padding:4px 12px;
+    border-radius:var(--radius-sm); color:var(--muted); font-size:var(--fs-ui); pointer-events:none;
+    transition:background .14s,color .14s; }
+  .brand-segment:hover > span { color:var(--fg); }
+  .brand-segment input:checked + span { background:var(--bg); color:var(--accent); font-weight:600; }
+  .brand-segment input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
+  @container brand-appearance (max-width:480px) {
+    .brand-controls { grid-template-columns:48px minmax(0,1fr); gap:16px; padding:16px; }
+    .brand-preview { width:48px; height:48px; }
+    .brand-options { grid-template-columns:minmax(0,1fr); gap:10px; padding-left:16px; }
+    .brand-option-row { gap:4px; }
+    .brand-option-label { font-size:var(--fs-sm); }
+    .brand-segment > span { padding:4px 8px; }
+  }
+  @media (pointer:coarse) { .brand-segment > span { min-height:44px; } }
   .theme-card:disabled { opacity:.55; cursor:not-allowed; }
   .theme-card:disabled:hover { transform:none; border-color:var(--line-strong); }
 
@@ -17823,10 +17983,9 @@ var styles_default = `  :root {
   .proprow-v .x:disabled:hover { background:none; color:var(--muted); }
   .tablewrap { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
   .tablescroll { overflow-x:auto; }
-  /* fixed layout + max-content: each <col> width is authoritative, so the table
-     is exactly the sum of its columns and resizing one column never redistributes
-     width to its neighbours. min-width:100% fills the container when columns are
-     narrow, with the slack absorbed only by the trailing auto (filler) column. */
+  /* The grid supplies a definite width (sum of its columns): max-content alone
+     lets intrinsic long text override fixed layout in some engines. min-width
+     fills the container, with slack absorbed by the trailing filler column. */
   table.grid { border-collapse:collapse; table-layout:fixed; width:max-content; min-width:100%; }
   table.grid th, table.grid td { border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:0; text-align:left; }
   table.grid th:last-child, table.grid td:last-child { border-right:0; }
@@ -17836,6 +17995,7 @@ var styles_default = `  :root {
   .colhead:hover { background:var(--hover); color:var(--fg-soft); }
   .colhead .ti { color:var(--muted); display:flex; } .colhead .ti svg { width:14px; height:14px; }
   .colhead .nm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+  .colhead, .colhead .nm { min-width:0; }
   .colhead .sortmark { width:12px; height:12px; color:var(--accent); flex:none; }
   .colhead .caret { width:12px; height:12px; color:var(--muted); flex:none; opacity:0; transition:opacity .12s; }
   .colhead:hover .caret { opacity:1; }
@@ -17856,9 +18016,9 @@ var styles_default = `  :root {
   table.grid td.filler { border-right:0; border-bottom:0; background:transparent; }
   body.col-resizing { user-select:none; cursor:col-resize; }
   table.grid .selcell { width:38px; min-width:38px; max-width:38px; text-align:center; }
-  /* relative: anchors the .celledit overlay editor to the cell */
+  /* relative: anchors preview actions and the selection fill handle */
   td.cell-td { position:relative; vertical-align:top; user-select:none; }
-  td.cell-td .celledit, td.cell-td .celledit * { user-select:text; }
+  .celledit, .celledit * { user-select:text; }
   .cell { padding:8px 11px; min-height:37px; cursor:text; word-break:break-word; display:flex; flex-wrap:wrap; gap:3px; align-items:center; }
   /* hover/active tint goes on the <td> (always full row height) not the inner
      .cell (only as tall as its content), so a taller sibling row never leaves a
@@ -17942,18 +18102,36 @@ var styles_default = `  :root {
   .inlineedit { width:100%; border:0; outline:2px solid var(--accent); border-radius:0; padding:7px 9px; background:var(--bg); color:var(--fg); font:inherit; }
   textarea.inlineedit { resize:none; overflow:hidden; line-height:1.45; display:block; }
   .inlineedit.num { text-align:right; font-variant-numeric:tabular-nums; }
-  /* Overlay cell editor: floats over the td; the display content underneath
-     stays in flow so the row height never changes while editing. Padding on the
+  /* Overlay cell editor: portaled to body to escape the table scrollport.
+     The display stays in flow so the row height never changes. Padding on the
      input matches .cell (8px 11px) so the text doesn't shift on entering edit;
      a multi-line text editor grows downward over the rows below. */
-  .celledit { position:absolute; top:0; left:0; width:100%; min-height:100%; z-index:10;
+  .celledit { position:fixed; z-index:60;
     display:flex; align-items:stretch; background:var(--bg); border-radius:0;
     box-shadow:inset 0 0 0 2px var(--accent), var(--shadow-md); }
   .celledit .inlineedit { width:100%; min-width:0; border:0; outline:0; border-radius:inherit;
     padding:8px 11px; background:transparent; }
-  .celledit textarea.inlineedit { min-height:37px; }
+  .celledit textarea.inlineedit { min-height:0; max-height:min(320px, 40vh, var(--cell-editor-max-height)); }
   .cell.num { justify-content:flex-end; font-variant-numeric:tabular-nums; }
   .cell .txt { white-space:pre-wrap; }
+  /* Grid text is a preview; full text belongs in the record drawer. Never
+     truncate stored values or let a long token determine the column width. */
+  .cell-preview { width:100%; min-width:0; }
+  .cell .cell-preview-text { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
+    overflow:hidden; overflow-wrap:anywhere; line-height:1.55; max-height:4.65em; }
+  table.grid.nowrap .cell .cell-preview-text { display:block; -webkit-line-clamp:unset; max-height:1.55em; }
+  /* Overlay the action so revealing it never changes row height. Opacity keeps
+     it keyboard reachable; focus-within reveals it before activation. */
+  .cell-read-more { position:absolute; top:6px; right:6px; z-index:2; display:flex; align-items:center; justify-content:center;
+    width:24px; height:24px; padding:0; border:1px solid var(--line); border-radius:var(--radius-sm);
+    background:var(--bg); color:var(--fg-soft); cursor:pointer; opacity:0; pointer-events:none; }
+  td.cell-td:is(:hover, .cellsel, :focus-within) .cell-read-more { opacity:1; pointer-events:auto; }
+  .firstcell:has(.cell-read-more) .rowactions { display:none; }
+  .cell-read-more svg { width:14px; height:14px; flex:none; }
+  .cell-read-more:hover { background:var(--surface-2); color:var(--fg); border-color:var(--line-strong); }
+  .cell-read-more:focus-visible, .peek-copy:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
+  textarea.inlineedit { max-height:min(320px, 40vh); overflow-y:auto; overflow-wrap:anywhere; }
+  table.grid .chip { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
   .cell-url { display:inline-flex; align-items:center; gap:4px; max-width:100%; min-width:0; color:var(--accent); text-decoration:none; }
   .cell-url span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
   .cell-url svg { flex:none; width:12px; height:12px; opacity:0; transition:opacity .1s; }
@@ -18395,6 +18573,33 @@ var styles_default = `  :root {
   .peek .proprow .k { cursor:pointer; }
   .proprow .v { flex:1; padding:7px 8px; border-radius:var(--radius-sm); cursor:text; min-height:33px; display:flex; flex-wrap:wrap; gap:3px; align-items:center; }
   .proprow .v:hover { background:var(--hover); }
+  .peek h2, .proprow .v { min-width:0; overflow-wrap:anywhere; }
+  .proprow .v .txt { white-space:pre-wrap; overflow-wrap:anywhere; max-width:100%; user-select:text; }
+  .proprow .k { min-width:0; }
+  .proprow .k > svg { flex:none; }
+  .proprow .k > span { min-width:0; overflow-wrap:anywhere; }
+  .proprow-long { flex-direction:column; gap:0; margin-block:18px; scroll-margin-top:8px; }
+  .proprow-long .k { width:100%; }
+  .proprow-long .v { width:100%; line-height:1.7; }
+  .proprow:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--radius-sm); }
+  .peek-copy { display:inline-flex; align-items:center; justify-content:center; flex:none; width:24px; height:24px;
+    margin-inline-start:auto; border-radius:var(--radius-sm); color:var(--muted); cursor:pointer; }
+  .peek-copy:hover { background:var(--hover-2); color:var(--fg); }
+  @media (max-width:560px) {
+    .peek-body { padding:20px 16px; }
+    .peek .proprow { flex-direction:column; gap:0; margin-block:12px; }
+    .peek .proprow .k, .peek .proprow .v { width:100%; }
+    .peek .proprow .v { font-size:16px; }
+    .peek textarea.inlineedit { font-size:16px; }
+  }
+  @media (pointer:coarse) {
+    .cell:has(.cell-read-more) { min-height:44px; }
+    .cell-read-more { width:44px; height:44px; top:0; right:0; }
+    .peek-copy { width:44px; height:44px; }
+  }
+  @media (hover:none), (pointer:coarse) {
+    .cell-read-more { opacity:1; pointer-events:auto; }
+  }
   .peek-divider { height:1px; background:var(--line); margin:22px 0 18px; }
   .peek-hidden-toggle { display:flex; align-items:center; gap:6px; padding:7px 8px; margin:2px 0; border-radius:var(--radius-sm); color:var(--muted); font-size:13px; width:100%; text-align:left; }
   .peek-hidden-toggle:hover { background:var(--hover); color:var(--fg-soft); }
@@ -18702,14 +18907,22 @@ var styles_default = `  :root {
   .tmpl .tt { font-weight:600; font-size:var(--fs-ui); } .tmpl .td { font-size:var(--fs-xs); color:var(--muted); margin-top:2px; }
 
   /* toast */
-  .toasts { position:fixed; bottom:20px; left:20px; z-index:110; display:flex; flex-direction:column; gap:8px; }
-  .toast { background:var(--fg); color:var(--bg); padding:10px 14px; border-radius:9px; font-size:13px; box-shadow:var(--shadow-lg);
+  .toasts { position:fixed; bottom:20px; left:20px; max-width:calc(100vw - 40px); z-index:110; display:flex; flex-direction:column; gap:8px; }
+  .toast { position:relative; box-sizing:border-box; touch-action:pan-y; user-select:none; transform:translateX(var(--toast-offset, 0px)); transition:transform .18s ease-out, opacity .16s ease; background:var(--fg); color:var(--bg); padding:10px 14px; border-radius:9px; font-size:13px; box-shadow:var(--shadow-lg);
     display:flex; align-items:center; gap:8px; animation:slidein .2s ease; }
   @keyframes slidein { from { opacity:0; transform:translateX(-12px); } }
   .toast.error { background:var(--danger); color:var(--danger-fg); }
   .toast.leaving { animation:toast-out .16s ease-in forwards; pointer-events:none; }
   @keyframes toast-out { to { opacity:0; transform:translateX(-8px); } }
-  .toast-msg { min-width:0; }
+  .toast-msg { min-width:0; overflow-wrap:anywhere; }
+  .toast > .ico, .toast-act { flex-shrink:0; }
+  .toast.dragging { animation:none; transition:none; cursor:grabbing; }
+  .toast.leaving.swipe-out { animation:none; transition:transform .16s ease-in, opacity .16s ease-in; }
+  .toast-act:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
+  @media (prefers-reduced-motion:reduce) {
+    .toast, .toast.dragging, .toast.leaving, .toast.leaving.swipe-out { animation:none; transition:none; transform:none; }
+    .toast.leaving { opacity:0; }
+  }
   .toast-act { margin-left:4px; padding:3px 9px; border-radius:6px; font-weight:600; color:inherit; background:color-mix(in srgb, var(--bg) 16%, transparent); white-space:nowrap; }
   .toast-act:hover { background:color-mix(in srgb, var(--bg) 28%, transparent); }
 
@@ -25344,4 +25557,4 @@ export {
   writeTx
 };
 
-//# debugId=39484D6BDF841CDA64756E2164756E21
+//# debugId=049F5CBBC74592BC64756E2164756E21