@panphora/bevel 0.3.2 → 0.4.0

package/README.md

@@ -111,6 +111,10 @@ New mutating components emit cancelable `bevel:beforechange`, then `bevel:change
 
 Richclay, Quickcrop and Datastar remain optional. Load their adapters from `integrations/` after `bevel.js`. The Richclay adapter exposes `Bevel.richtext.mount()` and `unmount()`. The Quickcrop adapter exposes `Bevel.crop()`. The Datastar adapter exposes `Bevel.datastar.mount()`, `unmount()`, `control()` and `state()`.
 
+The Sheet add-on is CSS only. Load `integrations/sheet.css` after `bevel.css` for a compact toolbar (`.bevel-toolbar--sheet` on a `.bevel-toolbar`), a phone tool strip (`.bevel-sheet-tools`), a spreadsheet grid (`.bevel-sheet-grid`, or saved `<table grid>` markup with `<td n>` for numbers), sheet tabs (`.bevel-sheet-tabs`) and a flat look picker (`.bevel-sheet-looks`). It adds four selection tokens: `--bevel-sel`, `--bevel-sel-fill`, `--bevel-sel-head` and `--bevel-sel-line`. The application positions `.bevel-sheet-grid__selection` and `.bevel-sheet-grid__editor` over the grid. See `examples/components/sheet.html`.
+
+The application supplies `table-layout: fixed` and a table width when column widths should clip cell content.
+
 Nested Datastar registrations retain their own sessions when an outer registration unmounts. The adapter passes the remaining roots through `Bevel.destroy(root, { preserve: roots })`; those subtrees and their owned rich editors are excluded from teardown. Ordinary `Bevel.destroy(root)` still releases the entire subtree.
 
 For Richclay, load its Squire and DOMPurify scripts followed by its `richclay.js` global build before mounting. Bevel reuses externally mounted instances and never destroys them. It owns newly created instances even when the author supplied `contenteditable`. Repeated mounts reuse the instance; unmount releases its owned editor and theme tracking. A missing peer throws and emits `bevel:error`.

package/bevel.css

@@ -1595,6 +1595,7 @@
   .bevel-fieldset { border: 1px solid var(--bevel-line); border-radius: 0; padding: 16px 20px 18px; margin: 0; min-width: 0; }
   .bevel-fieldset > legend { padding: 0 8px; margin-left: -8px; }
   .bevel-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
+  .bevel-form > .bevel-field + .bevel-field { margin-block-start: 0; }
   .bevel-form__full { grid-column: 1 / -1; }
   @media (max-width: 640px) { .bevel-form { grid-template-columns: 1fr; } }
   .bevel-choices { display: flex; flex-wrap: wrap; gap: 12px 26px; }

package/dist/react/theme.css

@@ -4047,6 +4047,10 @@ a.bevel-r-file__name:where([data-bevel-appearance="bevel"]) { text-decoration: u
 
 
 
+.bevel-r-form > .bevel-r-field + .bevel-r-field:where([data-bevel-appearance="bevel"]) { margin-block-start: 0; }
+
+
+
 .bevel-r-form__full:where([data-bevel-appearance="bevel"]) { grid-column: 1 / -1; }
 
 

package/examples/components/manifest.json

@@ -1575,11 +1575,16 @@
     {
       "source": "src/components/split-panes/editor-page.html",
       "output": "examples/components/split-panes-editor.html"
+    },
+    {
+      "source": "src/docs/sheet-addon.html",
+      "output": "examples/components/sheet.html"
     }
   ],
   "exampleStyles": [
     "examples/components/context-hypercms.css",
-    "integrations/quickcrop.css"
+    "integrations/quickcrop.css",
+    "integrations/sheet.css"
   ],
   "build": {
     "javascript": [

package/examples/components/sheet.html

@@ -0,0 +1,114 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Sheet add-on · Bevel</title>
+<link rel="stylesheet" href="../../bevel-fonts.css">
+<link rel="stylesheet" href="../../bevel.css">
+<link rel="stylesheet" href="../../integrations/sheet.css">
+<style>
+  .sheet-demo { display: grid; gap: 28px; max-inline-size: 960px; margin-inline: auto; }
+  .sheet-demo .bevel-sheet { block-size: 360px; }
+  .sheet-demo__phone { inline-size: 360px; max-inline-size: 100%; }
+  .sheet-demo__phone .bevel-sheet { block-size: 300px; }
+  .sheet-demo pre { overflow-x: auto; }
+</style>
+</head>
+<body>
+<main class="bevel-example">
+<div class="sheet-demo">
+<header class="bevel-example__header">
+  <div>
+    <h1>Sheet add-on</h1>
+    <p>An optional stylesheet for spreadsheet-like tools: a compact toolbar, a grid with headers that stay in place, a selection, sheet tabs and a flat look picker. Link it after <code>bevel.css</code>. It adds no script.</p>
+  </div>
+</header>
+
+<pre><code>&lt;link rel="stylesheet" href="bevel.css"&gt;
+&lt;link rel="stylesheet" href="integrations/sheet.css"&gt;</code></pre>
+
+<section class="bevel-sheet" aria-label="Budget workbook">
+  <div class="bevel-toolbar bevel-toolbar--sheet" role="toolbar" aria-label="Formatting">
+    <div class="bevel-toolbar__group">
+      <button class="bevel-toolbar__icon" type="button" aria-label="Undo"><svg width="14" height="14" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true" focusable="false"><path d="M224,128a96,96,0,0,1-94.71,96H128A95.38,95.38,0,0,1,62.1,197.8a8,8,0,0,1,11-11.63A80,80,0,1,0,71.43,71.39a3.07,3.07,0,0,1-.26.25L44.59,96H72a8,8,0,0,1,0,16H24a8,8,0,0,1-8-8V56a8,8,0,0,1,16,0V85.8L60.25,60A96,96,0,0,1,224,128Z"/></svg></button>
+      <button class="bevel-toolbar__icon" type="button" aria-label="Redo"><svg width="14" height="14" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true" focusable="false"><path d="M240,56v48a8,8,0,0,1-8,8H184a8,8,0,0,1,0-16H211.4L184.81,71.64l-.25-.24a80,80,0,1,0-1.67,114.78,8,8,0,0,1,11,11.63A95.44,95.44,0,0,1,128,224h-1.32A96,96,0,1,1,195.75,60L224,85.8V56a8,8,0,1,1,16,0Z"/></svg></button>
+    </div>
+    <span class="bevel-toolbar__separator" aria-hidden="true"></span>
+    <div class="bevel-toolbar__group">
+      <button class="bevel-button" type="button" aria-haspopup="menu" aria-expanded="false">Currency <svg class="bevel-sheet-caret" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter" aria-hidden="true" focusable="false"><path d="m5 9 7 7 7-7"/></svg></button>
+      <button class="bevel-button" type="button" aria-label="Fewer decimals">.0</button>
+      <button class="bevel-button" type="button" aria-label="More decimals">.00</button>
+    </div>
+    <span class="bevel-toolbar__separator" aria-hidden="true"></span>
+    <div class="bevel-toolbar__group">
+      <button class="bevel-toolbar__icon" type="button" aria-label="Bold" aria-pressed="true"><svg width="14" height="14" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true" focusable="false"><path d="M178.48,115.7A44,44,0,0,0,148,40H80a8,8,0,0,0-8,8V200a8,8,0,0,0,8,8h80a48,48,0,0,0,18.48-92.3ZM88,56h60a28,28,0,0,1,0,56H88Zm72,136H88V128h72a32,32,0,0,1,0,64Z"/></svg></button>
+      <button class="bevel-toolbar__icon" type="button" aria-label="Italic" aria-pressed="false"><svg width="14" height="14" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true" focusable="false"><path d="M200,56a8,8,0,0,1-8,8H157.77L115.1,192H144a8,8,0,0,1,0,16H64a8,8,0,0,1,0-16H98.23L140.9,64H112a8,8,0,0,1,0-16h80A8,8,0,0,1,200,56Z"/></svg></button>
+    </div>
+  </div>
+
+  <div class="bevel-sheet__viewport">
+    <table class="bevel-sheet-grid" id="sheet-demo-budget">
+      <colgroup><col style="width:42px"><col style="width:200px"><col style="width:120px"><col style="width:120px"><col style="width:120px"></colgroup>
+      <thead>
+        <tr><th class="bevel-sheet-grid__coord" scope="col"></th><th class="bevel-sheet-grid__coord" scope="col">A</th><th class="bevel-sheet-grid__coord" scope="col" aria-selected="true">B</th><th class="bevel-sheet-grid__coord" scope="col">C</th><th class="bevel-sheet-grid__coord" scope="col">D</th></tr>
+        <tr style="background:var(--bevel-sel-head);font-weight:400;text-align:center;white-space:normal"><th class="bevel-sheet-grid__coord" scope="row">1</th><td>Item</td><td>Planned</td><td>Spent</td><td>Left</td></tr>
+      </thead>
+      <tbody>
+        <tr><th class="bevel-sheet-grid__coord" scope="row">2</th><td>Rent</td><td n>1,200.00</td><td n>1,200.00</td><td n>0.00</td></tr>
+        <tr><th class="bevel-sheet-grid__coord" scope="row" aria-selected="true">3</th><td>Groceries</td><td n aria-selected="true">420.00</td><td n>388.15</td><td n>31.85</td></tr>
+        <tr><th class="bevel-sheet-grid__coord" scope="row" aria-selected="true">4</th><td>Transport</td><td n aria-selected="true">160.00</td><td n>142.60</td><td n>17.40</td></tr>
+        <tr><th class="bevel-sheet-grid__coord" scope="row" aria-selected="true">5</th><td>Utilities</td><td n aria-selected="true">210.00</td><td n>226.30</td><td n>-16.30</td></tr>
+        <tr><th class="bevel-sheet-grid__coord" scope="row">6</th><td>Savings</td><td n>500.00</td><td n>500.00</td><td n>0.00</td></tr>
+        <tr class="bevel-sheet-grid__total"><th class="bevel-sheet-grid__coord" scope="row">7</th><td>Total</td><td n>2,490.00</td><td n>2,457.05</td><td n>32.95</td></tr>
+      </tbody>
+    </table>
+  </div>
+
+  <div class="bevel-sheet-tabs">
+    <div class="bevel-sheet-tabs__list" role="tablist" aria-label="Sheets">
+      <button class="bevel-sheet-tabs__tab" type="button" role="tab" aria-selected="true" aria-controls="sheet-demo-budget">Budget</button>
+      <button class="bevel-sheet-tabs__tab" type="button" role="tab" aria-selected="false" aria-controls="sheet-demo-budget">Trips</button>
+      <button class="bevel-sheet-tabs__add" type="button" aria-label="Add a sheet">+</button>
+    </div>
+    <div class="bevel-sheet-tabs__status"><span>Sum <strong>790.00</strong></span><span>Count <strong>3</strong></span></div>
+  </div>
+</section>
+
+<div class="bevel-sheet-looks" role="group" aria-label="Page look">
+  <div class="bevel-sheet-looks__group">
+    <span class="bevel-sheet-looks__label">Look</span>
+    <button class="bevel-sheet-looks__button" type="button" aria-label="Previous look">&lsaquo;</button>
+    <span class="bevel-sheet-looks__current">Ledger</span>
+    <button class="bevel-sheet-looks__button" type="button" aria-label="Next look">&rsaquo;</button>
+  </div>
+  <button class="bevel-sheet-looks__button bevel-sheet-looks__button--confirm" type="button">Use this look</button>
+</div>
+
+<div class="sheet-demo__phone">
+  <section class="bevel-sheet" aria-label="Budget workbook on a phone">
+    <div class="bevel-sheet-tools" role="toolbar" aria-label="Cell tools">
+      <button class="bevel-sheet-tools__button" type="button" aria-label="Bold" aria-pressed="true"><span class="bevel-sheet-tools__cap">B</span></button>
+      <button class="bevel-sheet-tools__button" type="button" aria-label="Italic" aria-pressed="false"><span class="bevel-sheet-tools__cap">I</span></button>
+      <button class="bevel-sheet-tools__button" type="button" aria-label="Currency"><span class="bevel-sheet-tools__cap">$</span></button>
+      <button class="bevel-sheet-tools__button" type="button" aria-label="Sum"><span class="bevel-sheet-tools__cap">&Sigma;</span></button>
+      <button class="bevel-sheet-tools__button" type="button" aria-label="Undo"><span class="bevel-sheet-tools__cap"><svg width="17" height="17" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true" focusable="false"><path d="M224,128a96,96,0,0,1-94.71,96H128A95.38,95.38,0,0,1,62.1,197.8a8,8,0,0,1,11-11.63A80,80,0,1,0,71.43,71.39a3.07,3.07,0,0,1-.26.25L44.59,96H72a8,8,0,0,1,0,16H24a8,8,0,0,1-8-8V56a8,8,0,0,1,16,0V85.8L60.25,60A96,96,0,0,1,224,128Z"/></svg></span></button>
+    </div>
+    <div class="bevel-sheet__viewport">
+      <table grid>
+        <thead><tr><td>Item</td><td>Planned</td></tr></thead>
+        <tbody>
+          <tr><td>Rent</td><td n>1,200.00</td></tr>
+          <tr><td>Groceries</td><td n>420.00</td></tr>
+          <tr><td>Transport</td><td n>160.00</td></tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+</div>
+
+<p>The second grid is plain saved markup, <code>&lt;table grid&gt;</code> with <code>&lt;td n&gt;</code> for numbers. It needs no classes, so a file opened with no script still reads as a sheet.</p>
+</div>
+</main>
+</body>
+</html>

package/integrations/sheet.css

@@ -0,0 +1,99 @@
+/* Bevel add-on: the Sheet look. Optional. Link it after bevel.css.
+   It styles the Sheet template's saved <table grid> markup and plain
+   .bevel-sheet-* classes, so other data apps can use the same look.
+   The full interactive workbook is the Sheet starter template. */
+@layer base, components;
+
+@layer base {
+  :root {
+    --bevel-sel:      light-dark(#1D5B79, #5CA8CC);
+    --bevel-sel-fill: light-dark(#E5F0F6, #182B3A);
+    --bevel-sel-head: light-dark(#D8E8F1, #1E3548);
+    --bevel-sel-line: light-dark(#ADCBE0, #2D4F6C);
+  }
+}
+
+@layer components {
+  .bevel-sheet { display: flex; flex-direction: column; min-inline-size: 0; border: 1px solid var(--bevel-line-2); background: var(--bevel-surface); color: var(--bevel-ink); font-family: var(--bevel-font-sans); }
+  .bevel-sheet__viewport { position: relative; flex: 1; min-block-size: 0; overflow: auto; overscroll-behavior: contain; background: var(--bevel-surface); }
+
+  .bevel-toolbar--sheet { flex-wrap: nowrap; gap: 4px; min-block-size: 36px; padding: 0 10px; border: 0; border-block-end: 1px solid var(--bevel-line-2); background: var(--bevel-ground); overflow-x: auto; }
+  .bevel-toolbar--sheet .bevel-toolbar__group { gap: 3px; }
+  .bevel-toolbar--sheet .bevel-toolbar__separator { flex: none; block-size: 18px; margin-inline: 5px; }
+  .bevel-toolbar--sheet .bevel-toolbar__icon { inline-size: 26px; block-size: 26px; }
+  .bevel-toolbar--sheet .bevel-toolbar__group .bevel-toolbar__icon + .bevel-toolbar__icon { margin-inline-start: 0; }
+  .bevel-toolbar--sheet .bevel-button { flex: none; gap: 5px; height: 26px; padding: 0 9px; font-size: 12px; line-height: 1; }
+  .bevel-toolbar--sheet .bevel-button[aria-pressed="true"], .bevel-toolbar--sheet .bevel-button[aria-expanded="true"] { border-color: var(--bevel-edge-in) var(--bevel-edge-in-hi) var(--bevel-edge-in-hi) var(--bevel-edge-in); background: var(--bevel-face-in); }
+  .bevel-toolbar--sheet svg { flex: none; inline-size: 14px; block-size: 14px; }
+  .bevel-toolbar--sheet .bevel-sheet-caret { inline-size: 11px; block-size: 11px; }
+
+  .bevel-sheet-tools { display: flex; align-items: center; justify-content: space-between; gap: 2px; block-size: 44px; padding: 0 6px; border-block-end: 1px solid var(--bevel-line-2); background: var(--bevel-ground); overflow-x: auto; }
+  .bevel-sheet-tools__button { display: inline-grid; flex: none; place-items: center; inline-size: 44px; block-size: 44px; padding: 0; border: 0; background: transparent; color: var(--bevel-ink); cursor: pointer; }
+  .bevel-sheet-tools__button:focus-visible { outline: 2px solid var(--bevel-brass); outline-offset: -2px; }
+  .bevel-sheet-tools__cap { display: inline-grid; place-items: center; inline-size: 30px; block-size: 30px; border: 2px solid; border-color: var(--bevel-edge-hi) var(--bevel-edge-lo) var(--bevel-edge-lo) var(--bevel-edge-hi); background: var(--bevel-face); font: 600 11.5px/1 var(--bevel-font-sans); }
+  .bevel-sheet-tools__cap svg { inline-size: 17px; block-size: 17px; }
+  .bevel-sheet-tools__button:hover .bevel-sheet-tools__cap { background: color-mix(in srgb, var(--bevel-face), var(--bevel-edge-hi) 45%); }
+  .bevel-sheet-tools__button:active .bevel-sheet-tools__cap, .bevel-sheet-tools__button[aria-pressed="true"] .bevel-sheet-tools__cap { border-color: var(--bevel-edge-in) var(--bevel-edge-in-hi) var(--bevel-edge-in-hi) var(--bevel-edge-in); background: var(--bevel-face-in); color: var(--bevel-sel); }
+
+  :where(.bevel-sheet-grid, table[grid]) { border-collapse: separate; border-spacing: 0; border-block-start: 1px solid var(--bevel-line); border-inline-start: 1px solid var(--bevel-line); background: var(--bevel-surface); color: var(--bevel-ink); font: 400 13px/1.35 var(--bevel-font-sans); text-align: start; white-space: nowrap; }
+  :where(.bevel-sheet-grid, table[grid]) :is(td, th) { block-size: 26px; padding: 0 8px; border: 0; border-inline-end: 1px solid var(--bevel-line); border-block-end: 1px solid var(--bevel-line); font-size: 13px; line-height: 25px; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; }
+  :where(.bevel-sheet-grid, table[grid]) th { font-weight: inherit; text-align: inherit; }
+  :where(.bevel-sheet-grid, table[grid]) td[n], .bevel-sheet-grid__num { text-align: end; font-family: var(--bevel-font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
+  /* Stacking: frozen cells 2, frozen selection/editor 3, row and column labels 4, corner 5. */
+  :where(.bevel-sheet-grid, table[grid]) thead tr { background: var(--bevel-ground); color: var(--bevel-ink); font-weight: 600; }
+  :where(.bevel-sheet-grid, table[grid]) thead td { position: sticky; inset-block-start: var(--bevel-sheet-frozen-top, 0px); z-index: 2; block-size: 27px; border-block-end: 2px solid var(--bevel-line-3); background: inherit; }
+  :where(.bevel-sheet-grid, table[grid]) td[aria-selected="true"] { background: var(--bevel-sel-fill); }
+  .bevel-sheet-grid:has(.bevel-sheet-grid__coord) { --bevel-sheet-frozen-top: 24px; }
+
+  .bevel-sheet-grid .bevel-sheet-grid__coord { position: sticky; z-index: 4; border-inline-end-color: var(--bevel-line-2); border-block-end-color: var(--bevel-line-2); background: var(--bevel-sunk); color: var(--bevel-muted); font: 500 11px/23px var(--bevel-font-mono); text-align: center; }
+  .bevel-sheet-grid thead .bevel-sheet-grid__coord { inset-block-start: var(--bevel-sheet-frozen-top, 0px); }
+  .bevel-sheet-grid thead tr:first-child .bevel-sheet-grid__coord { inset-block-start: 0; block-size: 24px; }
+  .bevel-sheet-grid .bevel-sheet-grid__coord:first-child { inset-inline-start: 0; padding: 0; }
+  .bevel-sheet-grid thead tr:first-child .bevel-sheet-grid__coord:first-child { z-index: 5; }
+  .bevel-sheet-grid .bevel-sheet-grid__coord[aria-selected="true"] { background: var(--bevel-sel-head); color: var(--bevel-sel); font-weight: 600; }
+  .bevel-sheet-grid tr:has(> .bevel-sheet-grid__coord[aria-selected="true"]):has(+ tr > .bevel-sheet-grid__coord[aria-selected="true"]) > .bevel-sheet-grid__coord[aria-selected="true"] { border-block-end-color: var(--bevel-sel-line); }
+
+  .bevel-sheet-grid tr:has(+ .bevel-sheet-grid__total) > :is(td, th) { border-block-end-color: var(--bevel-line-3); }
+  :where(.bevel-sheet-grid .bevel-sheet-grid__total) > td { block-size: 28px; border-block-end-color: var(--bevel-line-2); background: var(--bevel-ground); font-weight: 600; }
+
+  .bevel-sheet-grid__selection { position: absolute; z-index: 1; box-sizing: border-box; border: 2px solid var(--bevel-sel); pointer-events: none; }
+  .bevel-sheet-grid__handle { position: absolute; inset-inline-end: -5px; inset-block-end: -5px; inline-size: 8px; block-size: 8px; border: 1.5px solid var(--bevel-surface); background: var(--bevel-sel); pointer-events: auto; cursor: crosshair; }
+  .bevel-sheet-grid__editor { position: absolute; z-index: 1; box-sizing: border-box; margin: 0; padding: 0 6px; border: 0; outline: 2px solid var(--bevel-brass); outline-offset: -2px; background: var(--bevel-surface); color: var(--bevel-ink); font: 500 12px/1 var(--bevel-font-mono); box-shadow: var(--bevel-shadow); }
+
+  .bevel-sheet-grid__selection--frozen, .bevel-sheet-grid__editor--frozen { z-index: 3; }
+
+  .bevel-sheet-tabs { display: flex; align-items: stretch; justify-content: space-between; gap: 12px; min-block-size: 30px; padding: 0 10px; border-block-start: 1px solid var(--bevel-line-2); background: var(--bevel-sunk); }
+  .bevel-sheet-tabs__list { display: flex; align-items: stretch; gap: 2px; min-inline-size: 0; overflow-x: auto; }
+  .bevel-sheet-tabs__tab { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border: 0; border-inline: 1px solid var(--bevel-line-2); background: transparent; color: var(--bevel-muted); font: 500 12px/1 var(--bevel-font-sans); white-space: nowrap; cursor: pointer; }
+  .bevel-sheet-tabs__tab:hover { background: var(--bevel-ground); color: var(--bevel-ink); }
+  .bevel-sheet-tabs__tab[aria-selected="true"] { margin-block-start: -1px; border-block-start: 1px solid var(--bevel-surface); background: var(--bevel-surface); color: var(--bevel-sel); font-weight: 600; }
+  .bevel-sheet-tabs__add { inline-size: 28px; border: 0; background: transparent; color: var(--bevel-muted); font: 500 15px/1 var(--bevel-font-sans); cursor: pointer; }
+  .bevel-sheet-tabs__add:hover { background: var(--bevel-face); color: var(--bevel-ink); }
+  .bevel-sheet-tabs__tab:focus-visible, .bevel-sheet-tabs__add:focus-visible { outline: 2px solid var(--bevel-brass); outline-offset: -2px; }
+  .bevel-sheet-tabs__status { display: flex; align-items: center; gap: 14px; color: var(--bevel-ink-2); font: 11.5px/1 var(--bevel-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
+  .bevel-sheet-tabs__status strong { color: var(--bevel-ink); font-weight: 600; }
+
+  .bevel-sheet-looks { display: flex; align-items: center; justify-content: space-between; gap: 8px; inline-size: 100%; max-inline-size: 440px; padding: 5px 10px; border: 1px solid var(--bevel-line-2); background: var(--bevel-surface); color: var(--bevel-ink-2); font: 12px/1.2 var(--bevel-font-sans); }
+  .bevel-sheet-looks__group { display: inline-flex; align-items: center; gap: 4px; }
+  .bevel-sheet-looks__label { margin-inline-end: 2px; color: var(--bevel-muted); }
+  .bevel-sheet-looks__current { min-inline-size: 112px; color: var(--bevel-ink); font-weight: 600; text-align: center; }
+  .bevel-sheet-looks__button { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 4px 7px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--bevel-muted); font: 500 12px/1.2 var(--bevel-font-sans); cursor: pointer; appearance: none; }
+  .bevel-sheet-looks__button:hover { background: var(--bevel-sunk); color: var(--bevel-ink); }
+  .bevel-sheet-looks__button:focus-visible { outline: 2px solid var(--bevel-brass); outline-offset: -2px; }
+  .bevel-sheet-looks__button--confirm { color: var(--bevel-sel); font-weight: 600; }
+
+  @media (pointer: coarse) {
+    .bevel-toolbar--sheet .bevel-toolbar__icon { inline-size: 40px; block-size: 40px; }
+    .bevel-sheet-tabs { min-block-size: 44px; }
+    .bevel-sheet-looks__button { min-inline-size: 44px; min-block-size: 44px; }
+  }
+  @media (forced-colors: active) {
+    :where(.bevel-sheet-grid, table[grid]) td[aria-selected="true"] { outline: 1px solid Highlight; outline-offset: -1px; }
+    .bevel-sheet-grid .bevel-sheet-grid__coord[aria-selected="true"], .bevel-sheet-tabs__tab[aria-selected="true"] { text-decoration: underline; }
+  }
+  @media print {
+    .bevel-toolbar--sheet, .bevel-sheet-tools, .bevel-sheet-tabs__add, .bevel-sheet-looks, .bevel-sheet-grid__selection, .bevel-sheet-grid__handle { display: none; }
+    .bevel-sheet__viewport { overflow: visible; }
+    :where(.bevel-sheet-grid, table[grid]) thead td, .bevel-sheet-grid .bevel-sheet-grid__coord { position: static; }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panphora/bevel",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "Beveled controls in an editorial page. One stylesheet, one script, no build.",
   "license": "MIT-0",
   "author": "David Miranda",
@@ -450,6 +450,7 @@
     "fonts": "node scripts/vendor-fonts.mjs",
     "vendor:floating": "node scripts/vendor-floating-ui.mjs",
     "check": "node scripts/check.mjs && node scripts/icon-guard.mjs --strict",
+    "sheet-addon": "node --test tests/sheet-addon.test.mjs",
     "check:icons": "node scripts/icon-guard.mjs",
     "contrast": "node scripts/contrast.mjs",
     "roundtrip": "node scripts/roundtrip.mjs",
@@ -458,7 +459,7 @@
     "correction:c1": "node tests/correction-c1.mjs",
     "correction:c2": "node tests/correction-c2.mjs",
     "correction:c2:overlays": "node tests/correction-c2-modal-drawer.mjs",
-    "test": "node scripts/test-guard.mjs && npm run test:build && npm run test:showcase && npm run check && npm run contrast && npm run roundtrip && npm run functional && npm run datastar && npm run correction:c1 && npm run datastar:native && npm run clay:snapshot && npm run datastar:pickers && npm run correction:c2:overlays && npm run correction:c2:pickers && npm run correction:c2:forms && npm run correction:c2:wizard && npm run datastar:lifecycle && npm run datastar:reload && npm run richclay:integration && npm run inline-edit:integration && npm run quickcrop:integration && npm run packaged:peers && npm run upload:integration && npm run correction:c3:navigation && npm run correction:app-shell && npm run file-tree && npm run correction:c3:code-diff && npm run correction:c3:feedback && npm run correction:c3:split && npm run correction:c3:navigation-controls && npm run correction:c3:display && npm run correction:c3:rich-toolbar && npm run correction:c3:grid && npm run correction:c3:kanban && npm run context:hypercms && npm run context:quickcrop && npm run datastar:active && npm run datastar:board && npm run datastar:upload && npm run datastar:grid && npm run datastar:state-reload && npm run acceptance:layout && npm run final-review:regressions",
+    "test": "node scripts/test-guard.mjs && npm run test:build && npm run test:showcase && npm run check && npm run sheet-addon && npm run contrast && npm run roundtrip && npm run functional && npm run datastar && npm run correction:c1 && npm run datastar:native && npm run clay:snapshot && npm run datastar:pickers && npm run correction:c2:overlays && npm run correction:c2:pickers && npm run correction:c2:forms && npm run correction:c2:wizard && npm run datastar:lifecycle && npm run datastar:reload && npm run richclay:integration && npm run inline-edit:integration && npm run quickcrop:integration && npm run packaged:peers && npm run upload:integration && npm run correction:c3:navigation && npm run correction:app-shell && npm run file-tree && npm run correction:c3:code-diff && npm run correction:c3:feedback && npm run correction:c3:split && npm run correction:c3:navigation-controls && npm run correction:c3:display && npm run correction:c3:rich-toolbar && npm run correction:c3:grid && npm run correction:c3:kanban && npm run context:hypercms && npm run context:quickcrop && npm run datastar:active && npm run datastar:board && npm run datastar:upload && npm run datastar:grid && npm run datastar:state-reload && npm run acceptance:layout && npm run final-review:regressions",
     "dev": "node scripts/dev.mjs",
     "datastar:native": "node tests/datastar-native.mjs",
     "correction:c2:pickers": "node tests/correction-c2-pickers.mjs",

package/vendor/richclay/provenance.json

@@ -1,10 +1,10 @@
 {
   "name": "richclay",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "source": "Explicitly supplied local distribution; hashes identify the exact tested bytes, not a published release claim.",
   "files": {
-    "richclay.js": "5434545ce62960fc27611edae1ef808f29dfe31f4e8bd8c8553c4eb118d83c0c",
-    "richclay.css": "fc44ab9e71f8b66950fbda5a535774c7acb97d7e54aff2521ea4122d21422d47",
+    "richclay.js": "cb11c591ef58cec92b7ce7b392606a8a74ba52a972750013a2a9a58eeb3c8c41",
+    "richclay.css": "b2aed9608266f6798ea25edfa40c344c84b8f37d65e19ce8484f93ad849cd3c8",
     "LICENSE": "5312a8ef6ff9a844697b8b112612467efd12957e8afba098ce600dec0f8396c4",
     "THIRD-PARTY-NOTICES.md": "3659529614b62297b8336ac7f6189ef9f67425911265bff1cde8d136df21562b",
     "vendor/squire.js": "00f2b05431457a05f1b42e4f876b8a334c0e01841ed57a3aa47e6a0e463869c3",

package/vendor/richclay/richclay.css

@@ -314,6 +314,30 @@
   font-weight: 650;
 }
 
+.richclay-dialog.richclay-link-popover {
+  align-items: center;
+  display: flex;
+  gap: 6px;
+  max-width: min(420px, calc(100vw - 16px));
+  padding: 6px;
+  width: auto;
+}
+
+.richclay-link-address {
+  color: inherit;
+  font-size: 0.875rem;
+  max-width: 260px;
+  overflow: hidden;
+  padding: 0 6px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.richclay-link-popover .richclay-secondary {
+  min-height: 30px;
+  padding: 3px 9px;
+}
+
 .richclay-field {
   display: grid;
   gap: 4px;

package/vendor/richclay/richclay.js

@@ -542,7 +542,7 @@ var RichClayBundle = (() => {
     if (!el.tagName.includes("-")) return true;
     return el.matches(RICHCLAY_OPT_IN);
   }
-  var CHROME_SELECTOR = "[data-richclay-toolbar], [data-richclay-menu], [data-richclay-dialog], [data-richclay-live], [data-richclay-float]";
+  var CHROME_SELECTOR = "[data-richclay-toolbar], [data-richclay-menu], [data-richclay-dialog], [data-richclay-link-popover], [data-richclay-live], [data-richclay-float]";
   var runtimeClasses = [
     "richclay-editor",
     "richclay-inline",
@@ -612,6 +612,11 @@ var RichClayBundle = (() => {
       toolbarOnSelect: tokens.has("toolbar-on-select")
     };
     if (tokens.has("no-toolbar")) options.toolbar = false;
+    if (tokens.has("link-label")) {
+      options.singleLine = true;
+      options.linkLabel = true;
+      options.toolbar = ["link", "undo", "redo"];
+    }
     return options;
   }
   function installHyperclayBridge(win = window) {
@@ -1448,12 +1453,15 @@ var RichClayBundle = (() => {
     const scheme = (stripped.match(/^([a-z][a-z0-9+.\-]*):/i) || [])[1];
     return !scheme || SAFE_URL_SCHEMES.has(scheme.toLowerCase());
   }
+  var SITE_FILE = /^[^\s/?#:]+\.(?:html?|pdf|txt|csv|json|xml|svg|png|jpe?g|gif|webp|docx?|xlsx?|pptx?|bib|tex|zip)(?:[?#]\S*)?$/i;
+  var SITE_PATH = /^[^\s/?#:.]+\/\S*$/;
   function normalizeUrl(value) {
     const raw = String(value == null ? "" : value).trim();
     if (!raw || !isSafeUrl(raw)) return "";
     if (/^(?:https?:|mailto:|tel:)/i.test(raw)) return raw;
     if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(raw)) return `mailto:${raw}`;
     if (/^(?:[#?]|\/|\.{1,2}\/)/.test(raw)) return raw;
+    if (SITE_FILE.test(raw) || SITE_PATH.test(raw)) return raw;
     return `https://${raw}`;
   }
   function resolveDOMPurify(doc) {
@@ -1524,6 +1532,170 @@ var RichClayBundle = (() => {
     if (last?.nodeType === 3) last.nodeValue = last.nodeValue.replace(/\s+$/, "");
   }
 
+  // src/link-popover.js
+  var LINK_POPOVER_GRACE_MS = 300;
+  var shownAddress = (href) => href.replace(/^mailto:/i, "").replace(/^https?:\/\//i, "");
+  var LinkPopover = class {
+    constructor(editor) {
+      this.editor = editor;
+      this.root = null;
+      this.anchor = null;
+      this.href = null;
+      this.dismissed = null;
+      this.hideTimer = null;
+      this.pointerInside = false;
+      this.cleanup = null;
+    }
+    currentAnchor() {
+      const editor = this.editor;
+      if (!editor.active || editor.options.readOnly || editor.dialog) return null;
+      const doc = editor.element.ownerDocument;
+      if (doc.hidden) return null;
+      const live = doc.getSelection?.();
+      if (!live || !live.rangeCount || !editor.element.contains(live.anchorNode)) return null;
+      return editor.currentLinkElement();
+    }
+    update() {
+      const anchor = this.currentAnchor();
+      if (anchor && anchor === this.dismissed) return;
+      this.dismissed = null;
+      if (!anchor) {
+        this.scheduleHide();
+        return;
+      }
+      this.cancelHide();
+      this.show(anchor);
+    }
+    show(anchor) {
+      if (!this.root) this.mount();
+      const href = anchor.getAttribute("href") || "";
+      if (anchor !== this.anchor || href !== this.href) {
+        this.anchor = anchor;
+        this.href = href;
+        const address = this.root.querySelector(".richclay-link-address");
+        address.textContent = shownAddress(href) || href;
+        address.title = href;
+        if (href && isSafeUrl(href)) address.setAttribute("href", href);
+        else address.removeAttribute("href");
+        if (/^(?:mailto|tel):/i.test(href)) address.removeAttribute("target");
+        else address.setAttribute("target", "_blank");
+      }
+      this.position();
+    }
+    mount() {
+      const editor = this.editor;
+      const doc = editor.element.ownerDocument;
+      const win = doc.defaultView || globalThis;
+      const root = doc.createElement("div");
+      root.className = "richclay-dialog richclay-link-popover";
+      root.setAttribute("role", "group");
+      root.setAttribute("aria-label", "Link");
+      root.setAttribute("data-richclay-link-popover", "");
+      markChrome(root);
+      root.setAttribute("save-remove", "");
+      root.innerHTML = `
+      <a class="richclay-link-address" rel="noopener noreferrer"></a>
+      <button type="button" class="richclay-secondary" data-richclay-link-edit>Edit</button>
+      <button type="button" class="richclay-secondary" data-richclay-link-remove>Remove</button>
+    `;
+      if (editor.options.linkLabel) root.querySelector("[data-richclay-link-remove]").remove();
+      root.addEventListener("pointerdown", preservePointerSelection);
+      root.addEventListener("pointerenter", () => {
+        this.pointerInside = true;
+        this.cancelHide();
+      });
+      root.addEventListener("pointerleave", () => {
+        this.pointerInside = false;
+        this.update();
+      });
+      root.querySelector("[data-richclay-link-edit]").addEventListener("click", () => {
+        const anchor = this.anchor;
+        if (!anchor || !editor.element.contains(anchor)) return this.hide();
+        editor.selectElement(anchor);
+        editor.openLinkDialog();
+      });
+      root.querySelector("[data-richclay-link-remove]")?.addEventListener("click", () => {
+        const anchor = this.anchor;
+        this.hide();
+        editor.removeLinkElement(anchor);
+        editor.focus();
+      });
+      const host = editor.element.closest("dialog") || doc.body;
+      const layered = typeof root.showPopover === "function";
+      if (layered) root.setAttribute("popover", "manual");
+      pin(root, "position", "fixed");
+      pin(root, "inset", "0px auto auto 0px");
+      pin(root, "margin", "0");
+      pin(root, "overflow", "visible");
+      host.appendChild(root);
+      if (layered) root.showPopover();
+      this.root = root;
+      const reposition = () => this.position();
+      const onKeydown = (event) => {
+        if (event.key !== "Escape" || !this.root) return;
+        this.dismissed = this.anchor;
+        this.hide();
+      };
+      doc.addEventListener("scroll", reposition, { capture: true, passive: true });
+      win.addEventListener("resize", reposition, { passive: true });
+      editor.element.addEventListener("keydown", onKeydown);
+      this.cleanup = () => {
+        doc.removeEventListener("scroll", reposition, { capture: true });
+        win.removeEventListener("resize", reposition);
+        editor.element.removeEventListener("keydown", onKeydown);
+      };
+    }
+    position() {
+      const root = this.root;
+      if (!root || !this.anchor) return;
+      const win = root.ownerDocument.defaultView || globalThis;
+      const placement = placePopover({
+        anchor: this.anchor.getBoundingClientRect(),
+        box: { width: root.offsetWidth || 0, height: root.offsetHeight || 0 },
+        viewport: {
+          width: win.visualViewport?.width ?? win.innerWidth,
+          height: win.visualViewport?.height ?? win.innerHeight
+        }
+      });
+      root.setAttribute("data-richclay-side", placement.side);
+      root.style.setProperty("--richclay-dialog-arrow", `${Math.round(placement.arrow)}px`);
+      pin(root, "transform", `translate(${Math.round(placement.x)}px, ${Math.round(placement.y)}px)`);
+    }
+    scheduleHide() {
+      if (!this.root || this.hideTimer !== null) return;
+      const win = this.root.ownerDocument.defaultView || globalThis;
+      this.hideTimer = win.setTimeout(() => {
+        this.hideTimer = null;
+        if (!this.pointerInside) this.hide();
+      }, LINK_POPOVER_GRACE_MS);
+    }
+    cancelHide() {
+      if (this.hideTimer === null) return;
+      const win = this.editor.element.ownerDocument.defaultView || globalThis;
+      win.clearTimeout(this.hideTimer);
+      this.hideTimer = null;
+    }
+    onEditorBlur(event) {
+      const next = event?.relatedTarget;
+      if (next && this.editor.ownsFocusTarget(next)) return;
+      this.hide();
+    }
+    hide() {
+      this.cancelHide();
+      this.cleanup?.();
+      this.cleanup = null;
+      this.root?.remove();
+      this.root = null;
+      this.anchor = null;
+      this.href = null;
+      this.pointerInside = false;
+    }
+    destroy() {
+      this.hide();
+      this.dismissed = null;
+    }
+  };
+
   // src/styles.js
   var STYLE_ID = "richclay-styles";
   var styledDocs = /* @__PURE__ */ new WeakSet();
@@ -1807,8 +1979,11 @@ var RichClayBundle = (() => {
     Squire: null,
     inline: false,
     singleLine: false,
-    toolbarOnSelect: false
+    toolbarOnSelect: false,
+    linkPopover: true,
+    linkLabel: false
   };
+  var LINK_LABEL_CONTROLS = ["link", "undo", "redo"];
   var RichClay = class _RichClay {
     static presets = presets;
     static selector = RICHCLAY_SELECTOR;
@@ -1834,6 +2009,7 @@ var RichClayBundle = (() => {
       this.description = null;
       this.dialog = null;
       this.dialogCleanup = null;
+      this.linkPopover = null;
       this.savedSelection = null;
       this.path = "";
       this.active = false;
@@ -1853,6 +2029,7 @@ var RichClayBundle = (() => {
       };
       this._onBlur = (event) => {
         this.element.classList.remove("richclay-focused");
+        this.linkPopover?.onEditorBlur(event);
         if (this.options.inline) this.scheduleFloatTeardown(event);
       };
       this._onLinkActivation = (event) => {
@@ -1864,6 +2041,13 @@ var RichClayBundle = (() => {
         if (chrome && chrome !== this.element && this.element.contains(chrome) && chrome.contains(anchor)) return;
         event.preventDefault();
       };
+      this._onExternalWrite = () => {
+        if (!this._squire) return;
+        this._squire._mutation?.takeRecords();
+        if (this.options.linkLabel) this._labelHref = this.element.querySelector("a[href]")?.getAttribute("href") ?? this._labelHref;
+        this.resetSquireUndoBaseline();
+        this.updatePlaceholder();
+      };
       this.ensureMarker();
       this.hyperclay = shouldUseHyperclay(this.options, this.window);
       if (this.hyperclay) installHyperclayBridge(this.window);
@@ -2063,6 +2247,7 @@ var RichClayBundle = (() => {
             const ignored = editor._ignoreChange;
             editor._docWasChanged();
             if (local && ignored) editor.fireEvent("input");
+            if (this.options.linkLabel) this.keepOneLink();
           } else if (local) {
             editor._mayHaveZWS = true;
             editor.fireEvent("input");
@@ -2091,6 +2276,7 @@ var RichClayBundle = (() => {
       this.maskSquireCodeShortcut();
       this.maskSquireBlockShortcuts();
       this.installShortcuts();
+      if (this.options.linkLabel) this.maskFormattingShortcuts();
       if (this.options.inline) {
         this._onToolbarKey = (event) => {
           if (event.altKey && event.key === "F10") {
@@ -2114,6 +2300,17 @@ var RichClayBundle = (() => {
         this._squire.addEventListener("willPaste", willPaste);
         this._squireListeners.push(["willPaste", willPaste]);
       }
+      if (this.options.linkLabel) {
+        const plainPaste = (event) => {
+          const fragment = event.detail?.fragment;
+          if (!fragment) return;
+          const text = fragment.textContent.replace(/\s+/g, " ");
+          fragment.replaceChildren(this.element.ownerDocument.createTextNode(text));
+        };
+        this._squire.addEventListener("willPaste", plainPaste);
+        this._squireListeners.push(["willPaste", plainPaste]);
+        this._labelHref = this.element.querySelector("a[href]")?.getAttribute("href") ?? null;
+      }
       this.renderToolbar();
       this.updatePlaceholder();
       this.warnOnBlockInInlineRegion();
@@ -2178,6 +2375,8 @@ var RichClayBundle = (() => {
     }
     destroy() {
       this.closeLinkDialog();
+      this.linkPopover?.destroy();
+      this.linkPopover = null;
       this.teardownFloatingToolbar();
       this.toolbar?.destroy();
       this.toolbar = null;
@@ -2420,6 +2619,7 @@ var RichClayBundle = (() => {
     openLinkDialog() {
       this.saveSelection();
       this.closeLinkDialog();
+      this.linkPopover?.hide();
       const doc = this.element.ownerDocument;
       const existingLink = this.currentLinkElement();
       const existing = existingLink?.getAttribute("href") || "";
@@ -2439,7 +2639,7 @@ var RichClayBundle = (() => {
         <input class="richclay-input" name="url" type="text" inputmode="url" autocomplete="url" placeholder="https://example.com">
       </label>
       <div class="richclay-dialog-actions">
-        ${existingLink ? '<button type="button" class="richclay-secondary" data-richclay-remove-link>Remove link</button>' : ""}
+        ${existingLink && !this.options.linkLabel ? '<button type="button" class="richclay-secondary" data-richclay-remove-link>Remove link</button>' : ""}
         <button type="button" class="richclay-secondary" data-richclay-cancel>Cancel</button>
         <button type="submit" class="richclay-primary">Apply</button>
       </div>
@@ -2448,17 +2648,18 @@ var RichClayBundle = (() => {
         this.closeLinkDialog();
         this.toolbar?.update();
         this.focus();
+        this.updateLinkPopover();
       };
       const remove = () => {
         this.restoreSelection();
-        const anchor = this.currentLinkElement();
-        if (anchor) {
-          this.selectElement(anchor);
-          this._squire.removeLink();
-          announce(this.liveRegion, "Link removed");
-        }
+        this.removeLinkElement(this.currentLinkElement());
         close();
       };
+      const cancel = () => {
+        close();
+        this.restoreSelection();
+        this.updateLinkPopover();
+      };
       dialog.addEventListener("submit", (event) => {
         event.preventDefault();
         const data = new FormData(dialog);
@@ -2473,7 +2674,12 @@ var RichClayBundle = (() => {
           return;
         }
         this.restoreSelection();
-        const anchor = this.currentLinkElement();
+        const anchor = this.options.linkLabel ? null : this.currentLinkElement();
+        if (this.options.linkLabel) {
+          const range = this.element.ownerDocument.createRange();
+          range.selectNodeContents(this.element);
+          this._squire.setSelection(range);
+        }
         if (anchor) {
           this.selectElement(anchor);
           this._squire.saveUndoState();
@@ -2485,11 +2691,11 @@ var RichClayBundle = (() => {
         close();
       });
       dialog.querySelector("[data-richclay-remove-link]")?.addEventListener("click", remove);
-      dialog.querySelector("[data-richclay-cancel]").addEventListener("click", close);
+      dialog.querySelector("[data-richclay-cancel]").addEventListener("click", cancel);
       dialog.addEventListener("keydown", (event) => {
         if (event.key === "Escape") {
           event.preventDefault();
-          close();
+          cancel();
         } else if (event.key === "Tab") {
           trapTab(event, dialog);
         }
@@ -2531,6 +2737,23 @@ var RichClayBundle = (() => {
       input.select();
       return KEEP_FOCUS;
     }
+    // Unwraps one link and keeps its text, as one undo step. The link form's Remove and the
+    // link popover's Remove are this same call.
+    removeLinkElement(anchor) {
+      if (!anchor || !this.element.contains(anchor)) return false;
+      this.selectElement(anchor);
+      this._squire.removeLink();
+      announce(this.liveRegion, "Link removed");
+      return true;
+    }
+    updateLinkPopover() {
+      if (this.options.linkPopover === false || this.options.readOnly || !this._squire) return;
+      if (!this.linkPopover) {
+        if (this.dialog || !this.currentLinkElement()) return;
+        this.linkPopover = new LinkPopover(this);
+      }
+      this.linkPopover.update();
+    }
     currentLinkElement() {
       const range = getSquireSelection(this._squire);
       if (!range || !this.element.contains(range.commonAncestorContainer)) return null;
@@ -2649,6 +2872,7 @@ var RichClayBundle = (() => {
       this.element.addEventListener("blur", this._onBlur);
       this.element.addEventListener("click", this._onLinkActivation, true);
       this.element.addEventListener("auxclick", this._onLinkActivation, true);
+      this.element.addEventListener("clay:external-write", this._onExternalWrite);
     }
     cleanupEditorAttributes() {
       removeRuntimeState(this.element, "destroy");
@@ -2656,6 +2880,41 @@ var RichClayBundle = (() => {
       this.element.removeEventListener("blur", this._onBlur);
       this.element.removeEventListener("click", this._onLinkActivation, true);
       this.element.removeEventListener("auxclick", this._onLinkActivation, true);
+      this.element.removeEventListener("clay:external-write", this._onExternalWrite);
+    }
+    // A link label holds one link around all of its text, the shape its store reads back
+    // as text and address. Squire puts a space typed at a link's end, and a paste, outside
+    // the link (or splits it), and typing over the whole label deletes it; each of those
+    // is folded back into the one link, with the caret kept at the same character.
+    keepOneLink() {
+      const element = this.element;
+      const doc = element.ownerDocument;
+      const first = element.querySelector("a[href]");
+      const href = first?.getAttribute("href") ?? this._labelHref;
+      if (!href) return;
+      this._labelHref = href;
+      const text = element.textContent.replace(/\u200B/g, "").replace(/\s*[\r\n]+\s*/g, " ");
+      const only = element.childNodes.length === 1 && element.firstChild === first ? first : null;
+      const clean = only && [...only.childNodes].every((node) => node.nodeType === 3) && !only.textContent.includes("\u200B");
+      if (clean || !text) return;
+      const selection = this._squire.getSelection();
+      let caret = text.length;
+      if (selection && element.contains(selection.startContainer)) {
+        const before = doc.createRange();
+        before.selectNodeContents(element);
+        before.setEnd(selection.startContainer, selection.startOffset);
+        caret = before.toString().replace(/\u200B/g, "").replace(/\s*[\r\n]+\s*/g, " ").length;
+      }
+      this._squire.modifyDocument(() => {
+        const anchor = first ?? doc.createElement("a");
+        if (!first) anchor.setAttribute("href", href);
+        anchor.replaceChildren(doc.createTextNode(text));
+        element.replaceChildren(anchor);
+        const range = doc.createRange();
+        range.setStart(anchor.firstChild, Math.min(caret, text.length));
+        range.collapse(true);
+        this._squire.setSelection(range);
+      });
     }
     bindSquire() {
       const input = () => {
@@ -2663,16 +2922,19 @@ var RichClayBundle = (() => {
         this.updatePlaceholder();
         this.options.onChange?.(this.getHTML());
         this.toolbar?.update();
+        this.updateLinkPopover();
       };
       const pathChange = (event) => {
         this.path = event.detail?.path || this._squire.getPath?.() || "";
         this.saveSelection();
         this.toolbar?.update();
+        this.updateLinkPopover();
       };
       const selection = () => {
         this.saveSelection();
         this.toolbar?.update();
         if (this.options.toolbarOnSelect) this.updateFloatVisibility();
+        this.updateLinkPopover();
       };
       const undoState = () => this.toolbar?.update();
       [
@@ -2749,7 +3011,7 @@ var RichClayBundle = (() => {
       }, 0);
     }
     ownsFocusTarget(node) {
-      return node === this.element || this.element.contains(node) || Boolean(this.float?.root.contains(node)) || Boolean(this.dialog?.contains(node));
+      return node === this.element || this.element.contains(node) || Boolean(this.float?.root.contains(node)) || Boolean(this.dialog?.contains(node)) || Boolean(this.linkPopover?.root?.contains(node));
     }
     updateFloatVisibility() {
       if (!this.float) return;
@@ -2773,7 +3035,7 @@ var RichClayBundle = (() => {
     installShortcuts() {
       const seen = /* @__PURE__ */ new Set();
       const registryDefs = [...this.registry.values()].filter(
-        (def) => !this.options.singleLine || presets.inline.includes(def.id)
+        (def) => (!this.options.singleLine || presets.inline.includes(def.id)) && (!this.options.linkLabel || LINK_LABEL_CONTROLS.includes(def.id))
       );
       const defs = [...this.resolveToolbarControls(this.options.toolbar), ...registryDefs];
       defs.forEach((def) => {
@@ -2794,6 +3056,18 @@ var RichClayBundle = (() => {
         this._shortcutKeys.push(key);
       });
     }
+    // Formatting typed into a link label would be dropped by the next save of the shared
+    // store, which keeps only its text and address. Squire binds bold, italic and underline
+    // on its own prototype, so each key is answered with preventDefault: a null handler
+    // would hand it to the browser's own contenteditable formatting instead.
+    maskFormattingShortcuts() {
+      for (const def of this.registry.values()) {
+        if (!def.shortcut || LINK_LABEL_CONTROLS.includes(def.id)) continue;
+        const key = shortcutKey(def.shortcut, this.window);
+        this._squire.setKeyHandler(key, (squire, event) => event.preventDefault());
+        this._shortcutKeys.push(key);
+      }
+    }
     // macOS sends Ctrl+D and Ctrl+H to the browser's own forward/backward delete,
     // which merges two blocks by wrapping the moved text in a computed-style
     // <span> — permanent junk in an editor whose DOM is the saved document. Point
@@ -2847,7 +3121,8 @@ var RichClayBundle = (() => {
       });
       this._onBeforeInput = (event) => {
         if (!this.element.contains(event.target)) return;
-        if (event.inputType === "insertParagraph" || event.inputType === "insertLineBreak") {
+        const formats = this.options.linkLabel && event.inputType.startsWith("format");
+        if (event.inputType === "insertParagraph" || event.inputType === "insertLineBreak" || formats) {
           event.preventDefault();
           event.stopPropagation();
         }
@@ -2973,7 +3248,7 @@ var RichClayBundle = (() => {
   }
 
   // richclay.css
-  var richclay_default = ":root {\n  --richclay-surface: #ffffff;\n  --richclay-surface-alt: #f6f7f9;\n  --richclay-text: #0b0e14;\n  --richclay-muted: #667085;\n  --richclay-border: #c9ced8;\n  --richclay-accent: #0f766e;\n  --richclay-accent-ink: #ffffff;\n  --richclay-focus: #2563eb;\n  --richclay-danger: #b42318;\n  --richclay-radius: 6px;\n  --richclay-control-size: 34px;\n  --richclay-shadow: 0 10px 24px rgb(15 23 42 / 0.16);\n  --richclay-dialog-arrow: 28px;\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --richclay-surface: #16181d;\n    --richclay-surface-alt: #22252c;\n    --richclay-text: #ffffff;\n    --richclay-muted: #a3aab8;\n    --richclay-border: #4a5260;\n    --richclay-accent: #2dd4bf;\n    --richclay-accent-ink: #05201d;\n    --richclay-focus: #93c5fd;\n    --richclay-shadow: 0 12px 28px rgb(0 0 0 / 0.35);\n  }\n}\n\n.richclay-toolbar {\n  align-items: center;\n  background: var(--richclay-surface-alt);\n  border: 1px solid var(--richclay-border);\n  border-radius: var(--richclay-radius);\n  color: var(--richclay-text);\n  display: flex;\n  flex-wrap: wrap;\n  gap: 2px;\n  margin-block: 0 6px;\n  padding: 4px;\n}\n\n/* Seamless card: in the default layout the toolbar sits directly above the\n   editor. Fuse them into a single bordered card with one divider \u2014 the\n   toolbar's bottom border \u2014 instead of two stacked, separated boxes. */\n.richclay-toolbar:has(+ .richclay-editor) {\n  margin-block-end: 0;\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.richclay-toolbar + .richclay-editor {\n  border-top: 0;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n/* In a fused card, draw the focus ring inside the body so it never crosses\n   the toolbar divider. */\n.richclay-toolbar + .richclay-editor:focus-visible {\n  outline-offset: -3px;\n}\n\n.richclay-button {\n  align-items: center;\n  appearance: none;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: 5px;\n  color: currentColor;\n  display: inline-flex;\n  height: var(--richclay-control-size);\n  justify-content: center;\n  margin: 0;\n  min-width: var(--richclay-control-size);\n  padding: 0;\n  position: relative;\n}\n\n.richclay-button:hover,\n.richclay-button[aria-expanded=\"true\"],\n.richclay-menu-item:hover {\n  background: var(--richclay-surface);\n  border-color: var(--richclay-border);\n}\n\n.richclay-button.is-active,\n.richclay-button[aria-pressed=\"true\"],\n.richclay-menu-item.is-active {\n  background: rgb(0 0 0 / 0.13);\n  border-color: rgb(0 0 0 / 0.22);\n  color: var(--richclay-text);\n  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.26);\n}\n\n.richclay-button:focus-visible,\n.richclay-menu-item:focus-visible,\n.richclay-editor:focus-visible,\n.richclay-input:focus-visible,\n.richclay-primary:focus-visible,\n.richclay-secondary:focus-visible {\n  outline: 3px solid var(--richclay-focus);\n  outline-offset: 2px;\n}\n\n.richclay-button:disabled {\n  color: var(--richclay-muted);\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n\n.richclay-separator {\n  align-self: stretch;\n  background: var(--richclay-border);\n  display: inline-block;\n  margin: 5px 4px;\n  width: 1px;\n}\n\n.richclay-menu-wrap {\n  display: inline-flex;\n  position: relative;\n}\n\n.richclay-menu {\n  background: var(--richclay-surface);\n  border: 1px solid var(--richclay-border);\n  border-radius: var(--richclay-radius);\n  box-shadow: var(--richclay-shadow);\n  color: var(--richclay-text);\n  display: grid;\n  gap: 2px;\n  inset-block-start: calc(100% + 4px);\n  inset-inline-start: 0;\n  min-width: 160px;\n  padding: 4px;\n  position: absolute;\n  z-index: 1000;\n}\n\n.richclay-menu[hidden] {\n  display: none;\n}\n\n.richclay-menu-item {\n  align-items: center;\n  appearance: none;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: 4px;\n  color: inherit;\n  display: flex;\n  font: inherit;\n  gap: 8px;\n  min-height: 32px;\n  padding: 5px 9px;\n  text-align: start;\n}\n\n.richclay-editor {\n  background: var(--richclay-surface);\n  border: 1px solid var(--richclay-border);\n  border-radius: var(--richclay-radius);\n  color: var(--richclay-text);\n  min-height: 9rem;\n  /* Break a long unbreakable string (e.g. a bare URL) in prose rather than let\n     it widen the editor. `anywhere` also lowers min-content, so the editor can't\n     grow even as a flex/grid item. Inert on the code <pre> (white-space: pre). */\n  overflow-wrap: anywhere;\n  padding: 12px;\n  position: relative;\n}\n\n.richclay-editor.richclay-empty::before {\n  color: var(--richclay-muted);\n  content: attr(data-richclay-placeholder);\n  inset-block-start: 12px;\n  inset-inline-start: 12px;\n  pointer-events: none;\n  position: absolute;\n}\n\n.richclay-editor p,\n.richclay-editor h1,\n.richclay-editor h2,\n.richclay-editor h3,\n.richclay-editor h4,\n.richclay-editor h5,\n.richclay-editor h6,\n.richclay-editor blockquote,\n.richclay-editor pre,\n.richclay-editor ul,\n.richclay-editor ol {\n  margin-block: 0 0.75em;\n}\n\n.richclay-editor > :last-child {\n  margin-block-end: 0;\n}\n\n/* Inline editors ([editable]) inherit the page's own styling. richclay adds\n   only a caret, a discoverability outline, and empty-state affordances. */\n.richclay-inline {\n  caret-color: currentColor;\n}\n\n.richclay-inline:hover {\n  outline: 1px dashed var(--richclay-border);\n  outline-offset: 2px;\n}\n\n.richclay-inline.richclay-focused,\n.richclay-inline:focus-visible {\n  outline: 2px dashed var(--richclay-focus);\n  outline-offset: 2px;\n}\n\n.richclay-inline.richclay-empty {\n  min-height: 1em;\n  min-width: 1ch;\n}\n\n.richclay-inline.richclay-empty::before {\n  color: var(--richclay-muted);\n  content: attr(data-richclay-placeholder);\n  pointer-events: none;\n}\n\n/* Floating toolbar shell for inline editors. Fixed-position and body-mounted:\n   fixed elements never create scrollbars, and body mounting avoids transformed\n   ancestors silently turning fixed into ancestor-relative. */\n.richclay-float {\n  left: 0;\n  position: fixed;\n  top: 0;\n  will-change: transform;\n  z-index: 99999;\n}\n\n.richclay-float .richclay-toolbar {\n  box-shadow: var(--richclay-shadow);\n  margin-block: 0;\n}\n\n/* Compact vertical rail for narrow margins. */\n.richclay-float-rail .richclay-toolbar {\n  --richclay-control-size: 28px;\n  flex-direction: column;\n  flex-wrap: nowrap;\n}\n\n.richclay-float-rail .richclay-toolbar svg {\n  height: 15px;\n  width: 15px;\n}\n\n.richclay-float-rail .richclay-separator {\n  align-self: stretch;\n  height: 1px;\n  margin: 4px 5px;\n  width: auto;\n}\n\n.richclay-float-rail .richclay-menu {\n  inset-block-start: 0;\n  inset-inline-start: calc(100% + 4px);\n}\n\n.richclay-editor blockquote {\n  border-inline-start: 3px solid var(--richclay-border);\n  color: var(--richclay-muted);\n  margin-inline: 0;\n  padding-inline-start: 12px;\n}\n\n/* Code blocks scroll horizontally inside the editor instead of widening it.\n   `width: 0; min-width: 100%` zeroes the pre's intrinsic-width contribution so a\n   long unbreakable line can't push an intrinsically-sized ancestor (flex/grid\n   item, inline-block, table cell) wider, while still filling the editor and\n   scrolling its own overflow. box-sizing keeps padding inside that 100%.\n   Containment applies to inline editors too: `white-space: pre` never wraps, so\n   without it one code block runs off the side of the page. Only the decoration\n   below stays card-scoped, since inline mode keeps the page's own typography. */\n.richclay-editor pre,\n.richclay-inline pre {\n  box-sizing: border-box;\n  min-width: 100%;\n  overflow: auto;\n  width: 0;\n}\n\n.richclay-editor pre {\n  background: var(--richclay-surface-alt);\n  border-radius: 4px;\n  padding: 10px;\n}\n\n.richclay-dialog {\n  background: var(--richclay-surface);\n  border: 1px solid var(--richclay-border);\n  border-radius: var(--richclay-radius);\n  box-shadow: var(--richclay-shadow);\n  color: var(--richclay-text);\n  display: grid;\n  gap: 10px;\n  box-sizing: border-box;\n  width: min(420px, calc(100vw - 16px));\n  z-index: 99999;\n  padding: 12px;\n}\n\n.richclay-dialog-title {\n  font-weight: 650;\n}\n\n.richclay-field {\n  display: grid;\n  gap: 4px;\n}\n\n.richclay-field span {\n  color: var(--richclay-muted);\n  font-size: 0.875rem;\n}\n\n.richclay-input {\n  background: var(--richclay-surface);\n  border: 1px solid var(--richclay-border);\n  border-radius: 4px;\n  color: var(--richclay-text);\n  font: inherit;\n  min-height: 36px;\n  padding: 6px 8px;\n}\n\n.richclay-dialog-actions {\n  display: flex;\n  gap: 8px;\n  justify-content: flex-end;\n}\n\n.richclay-dialog-actions [data-richclay-remove-link] {\n  margin-inline-end: auto;\n}\n\n.richclay-primary,\n.richclay-secondary {\n  appearance: none;\n  border: 1px solid var(--richclay-border);\n  border-radius: 4px;\n  font: inherit;\n  min-height: 34px;\n  padding: 5px 10px;\n}\n\n.richclay-primary {\n  background: var(--richclay-accent);\n  border-color: var(--richclay-accent);\n  color: var(--richclay-accent-ink);\n}\n\n.richclay-secondary {\n  background: var(--richclay-surface-alt);\n  color: var(--richclay-text);\n}\n\n.richclay-sr-only {\n  border: 0;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@media (forced-colors: active) {\n  .richclay-toolbar,\n  .richclay-editor,\n  .richclay-menu,\n  .richclay-dialog,\n  .richclay-input {\n    border-color: CanvasText;\n  }\n\n  .richclay-button.is-active,\n  .richclay-button[aria-pressed=\"true\"],\n  .richclay-menu-item.is-active,\n  .richclay-primary {\n    background: Highlight;\n    color: HighlightText;\n  }\n\n  .richclay-button:focus-visible,\n  .richclay-menu-item:focus-visible,\n  .richclay-editor:focus-visible,\n  .richclay-input:focus-visible {\n    outline-color: Highlight;\n  }\n}\n";
+  var richclay_default = ":root {\n  --richclay-surface: #ffffff;\n  --richclay-surface-alt: #f6f7f9;\n  --richclay-text: #0b0e14;\n  --richclay-muted: #667085;\n  --richclay-border: #c9ced8;\n  --richclay-accent: #0f766e;\n  --richclay-accent-ink: #ffffff;\n  --richclay-focus: #2563eb;\n  --richclay-danger: #b42318;\n  --richclay-radius: 6px;\n  --richclay-control-size: 34px;\n  --richclay-shadow: 0 10px 24px rgb(15 23 42 / 0.16);\n  --richclay-dialog-arrow: 28px;\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --richclay-surface: #16181d;\n    --richclay-surface-alt: #22252c;\n    --richclay-text: #ffffff;\n    --richclay-muted: #a3aab8;\n    --richclay-border: #4a5260;\n    --richclay-accent: #2dd4bf;\n    --richclay-accent-ink: #05201d;\n    --richclay-focus: #93c5fd;\n    --richclay-shadow: 0 12px 28px rgb(0 0 0 / 0.35);\n  }\n}\n\n.richclay-toolbar {\n  align-items: center;\n  background: var(--richclay-surface-alt);\n  border: 1px solid var(--richclay-border);\n  border-radius: var(--richclay-radius);\n  color: var(--richclay-text);\n  display: flex;\n  flex-wrap: wrap;\n  gap: 2px;\n  margin-block: 0 6px;\n  padding: 4px;\n}\n\n/* Seamless card: in the default layout the toolbar sits directly above the\n   editor. Fuse them into a single bordered card with one divider \u2014 the\n   toolbar's bottom border \u2014 instead of two stacked, separated boxes. */\n.richclay-toolbar:has(+ .richclay-editor) {\n  margin-block-end: 0;\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.richclay-toolbar + .richclay-editor {\n  border-top: 0;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n/* In a fused card, draw the focus ring inside the body so it never crosses\n   the toolbar divider. */\n.richclay-toolbar + .richclay-editor:focus-visible {\n  outline-offset: -3px;\n}\n\n.richclay-button {\n  align-items: center;\n  appearance: none;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: 5px;\n  color: currentColor;\n  display: inline-flex;\n  height: var(--richclay-control-size);\n  justify-content: center;\n  margin: 0;\n  min-width: var(--richclay-control-size);\n  padding: 0;\n  position: relative;\n}\n\n.richclay-button:hover,\n.richclay-button[aria-expanded=\"true\"],\n.richclay-menu-item:hover {\n  background: var(--richclay-surface);\n  border-color: var(--richclay-border);\n}\n\n.richclay-button.is-active,\n.richclay-button[aria-pressed=\"true\"],\n.richclay-menu-item.is-active {\n  background: rgb(0 0 0 / 0.13);\n  border-color: rgb(0 0 0 / 0.22);\n  color: var(--richclay-text);\n  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.26);\n}\n\n.richclay-button:focus-visible,\n.richclay-menu-item:focus-visible,\n.richclay-editor:focus-visible,\n.richclay-input:focus-visible,\n.richclay-primary:focus-visible,\n.richclay-secondary:focus-visible {\n  outline: 3px solid var(--richclay-focus);\n  outline-offset: 2px;\n}\n\n.richclay-button:disabled {\n  color: var(--richclay-muted);\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n\n.richclay-separator {\n  align-self: stretch;\n  background: var(--richclay-border);\n  display: inline-block;\n  margin: 5px 4px;\n  width: 1px;\n}\n\n.richclay-menu-wrap {\n  display: inline-flex;\n  position: relative;\n}\n\n.richclay-menu {\n  background: var(--richclay-surface);\n  border: 1px solid var(--richclay-border);\n  border-radius: var(--richclay-radius);\n  box-shadow: var(--richclay-shadow);\n  color: var(--richclay-text);\n  display: grid;\n  gap: 2px;\n  inset-block-start: calc(100% + 4px);\n  inset-inline-start: 0;\n  min-width: 160px;\n  padding: 4px;\n  position: absolute;\n  z-index: 1000;\n}\n\n.richclay-menu[hidden] {\n  display: none;\n}\n\n.richclay-menu-item {\n  align-items: center;\n  appearance: none;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: 4px;\n  color: inherit;\n  display: flex;\n  font: inherit;\n  gap: 8px;\n  min-height: 32px;\n  padding: 5px 9px;\n  text-align: start;\n}\n\n.richclay-editor {\n  background: var(--richclay-surface);\n  border: 1px solid var(--richclay-border);\n  border-radius: var(--richclay-radius);\n  color: var(--richclay-text);\n  min-height: 9rem;\n  /* Break a long unbreakable string (e.g. a bare URL) in prose rather than let\n     it widen the editor. `anywhere` also lowers min-content, so the editor can't\n     grow even as a flex/grid item. Inert on the code <pre> (white-space: pre). */\n  overflow-wrap: anywhere;\n  padding: 12px;\n  position: relative;\n}\n\n.richclay-editor.richclay-empty::before {\n  color: var(--richclay-muted);\n  content: attr(data-richclay-placeholder);\n  inset-block-start: 12px;\n  inset-inline-start: 12px;\n  pointer-events: none;\n  position: absolute;\n}\n\n.richclay-editor p,\n.richclay-editor h1,\n.richclay-editor h2,\n.richclay-editor h3,\n.richclay-editor h4,\n.richclay-editor h5,\n.richclay-editor h6,\n.richclay-editor blockquote,\n.richclay-editor pre,\n.richclay-editor ul,\n.richclay-editor ol {\n  margin-block: 0 0.75em;\n}\n\n.richclay-editor > :last-child {\n  margin-block-end: 0;\n}\n\n/* Inline editors ([editable]) inherit the page's own styling. richclay adds\n   only a caret, a discoverability outline, and empty-state affordances. */\n.richclay-inline {\n  caret-color: currentColor;\n}\n\n.richclay-inline:hover {\n  outline: 1px dashed var(--richclay-border);\n  outline-offset: 2px;\n}\n\n.richclay-inline.richclay-focused,\n.richclay-inline:focus-visible {\n  outline: 2px dashed var(--richclay-focus);\n  outline-offset: 2px;\n}\n\n.richclay-inline.richclay-empty {\n  min-height: 1em;\n  min-width: 1ch;\n}\n\n.richclay-inline.richclay-empty::before {\n  color: var(--richclay-muted);\n  content: attr(data-richclay-placeholder);\n  pointer-events: none;\n}\n\n/* Floating toolbar shell for inline editors. Fixed-position and body-mounted:\n   fixed elements never create scrollbars, and body mounting avoids transformed\n   ancestors silently turning fixed into ancestor-relative. */\n.richclay-float {\n  left: 0;\n  position: fixed;\n  top: 0;\n  will-change: transform;\n  z-index: 99999;\n}\n\n.richclay-float .richclay-toolbar {\n  box-shadow: var(--richclay-shadow);\n  margin-block: 0;\n}\n\n/* Compact vertical rail for narrow margins. */\n.richclay-float-rail .richclay-toolbar {\n  --richclay-control-size: 28px;\n  flex-direction: column;\n  flex-wrap: nowrap;\n}\n\n.richclay-float-rail .richclay-toolbar svg {\n  height: 15px;\n  width: 15px;\n}\n\n.richclay-float-rail .richclay-separator {\n  align-self: stretch;\n  height: 1px;\n  margin: 4px 5px;\n  width: auto;\n}\n\n.richclay-float-rail .richclay-menu {\n  inset-block-start: 0;\n  inset-inline-start: calc(100% + 4px);\n}\n\n.richclay-editor blockquote {\n  border-inline-start: 3px solid var(--richclay-border);\n  color: var(--richclay-muted);\n  margin-inline: 0;\n  padding-inline-start: 12px;\n}\n\n/* Code blocks scroll horizontally inside the editor instead of widening it.\n   `width: 0; min-width: 100%` zeroes the pre's intrinsic-width contribution so a\n   long unbreakable line can't push an intrinsically-sized ancestor (flex/grid\n   item, inline-block, table cell) wider, while still filling the editor and\n   scrolling its own overflow. box-sizing keeps padding inside that 100%.\n   Containment applies to inline editors too: `white-space: pre` never wraps, so\n   without it one code block runs off the side of the page. Only the decoration\n   below stays card-scoped, since inline mode keeps the page's own typography. */\n.richclay-editor pre,\n.richclay-inline pre {\n  box-sizing: border-box;\n  min-width: 100%;\n  overflow: auto;\n  width: 0;\n}\n\n.richclay-editor pre {\n  background: var(--richclay-surface-alt);\n  border-radius: 4px;\n  padding: 10px;\n}\n\n.richclay-dialog {\n  background: var(--richclay-surface);\n  border: 1px solid var(--richclay-border);\n  border-radius: var(--richclay-radius);\n  box-shadow: var(--richclay-shadow);\n  color: var(--richclay-text);\n  display: grid;\n  gap: 10px;\n  box-sizing: border-box;\n  width: min(420px, calc(100vw - 16px));\n  z-index: 99999;\n  padding: 12px;\n}\n\n.richclay-dialog-title {\n  font-weight: 650;\n}\n\n.richclay-dialog.richclay-link-popover {\n  align-items: center;\n  display: flex;\n  gap: 6px;\n  max-width: min(420px, calc(100vw - 16px));\n  padding: 6px;\n  width: auto;\n}\n\n.richclay-link-address {\n  color: inherit;\n  font-size: 0.875rem;\n  max-width: 260px;\n  overflow: hidden;\n  padding: 0 6px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.richclay-link-popover .richclay-secondary {\n  min-height: 30px;\n  padding: 3px 9px;\n}\n\n.richclay-field {\n  display: grid;\n  gap: 4px;\n}\n\n.richclay-field span {\n  color: var(--richclay-muted);\n  font-size: 0.875rem;\n}\n\n.richclay-input {\n  background: var(--richclay-surface);\n  border: 1px solid var(--richclay-border);\n  border-radius: 4px;\n  color: var(--richclay-text);\n  font: inherit;\n  min-height: 36px;\n  padding: 6px 8px;\n}\n\n.richclay-dialog-actions {\n  display: flex;\n  gap: 8px;\n  justify-content: flex-end;\n}\n\n.richclay-dialog-actions [data-richclay-remove-link] {\n  margin-inline-end: auto;\n}\n\n.richclay-primary,\n.richclay-secondary {\n  appearance: none;\n  border: 1px solid var(--richclay-border);\n  border-radius: 4px;\n  font: inherit;\n  min-height: 34px;\n  padding: 5px 10px;\n}\n\n.richclay-primary {\n  background: var(--richclay-accent);\n  border-color: var(--richclay-accent);\n  color: var(--richclay-accent-ink);\n}\n\n.richclay-secondary {\n  background: var(--richclay-surface-alt);\n  color: var(--richclay-text);\n}\n\n.richclay-sr-only {\n  border: 0;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@media (forced-colors: active) {\n  .richclay-toolbar,\n  .richclay-editor,\n  .richclay-menu,\n  .richclay-dialog,\n  .richclay-input {\n    border-color: CanvasText;\n  }\n\n  .richclay-button.is-active,\n  .richclay-button[aria-pressed=\"true\"],\n  .richclay-menu-item.is-active,\n  .richclay-primary {\n    background: Highlight;\n    color: HighlightText;\n  }\n\n  .richclay-button:focus-visible,\n  .richclay-menu-item:focus-visible,\n  .richclay-editor:focus-visible,\n  .richclay-input:focus-visible {\n    outline-color: Highlight;\n  }\n}\n";
 
   // src/browser-global.js
   setRichClayStyles(richclay_default);