@panphora/clayjs 1.5.3 → 1.6.1

package/src/sync/presence.js

@@ -1,7 +1,7 @@
 /**
  * presence.js — who else is on this document.
  *
- * A fixed-corner stack of circles, one per participant the host chose to name,
+ * A fixed-corner stack of squares, one per participant the host chose to name,
  * plus a count of everyone it did not. The host decides who is named, per
  * recipient, from that recipient's own access; nothing here asks for a name and
  * nothing here can widen what arrived.
@@ -37,26 +37,24 @@
 
 import { hostSupports } from '../core/host-meta.js';
 import { make, set } from '../lib/hostile-css.js';
+import { pageScheme, RUNTIME_ONLY } from '../ui/bevel-controls.js';
+import { TOKENS, FONT_MONO, SHADOW } from '../ui/bevel.js';
 
-// Runtime-only chrome, in one string so no root can carry two of the three.
-const RUNTIME_ONLY = 'no-save no-watch no-snapshot';
-
-// Two initials at 12px need about 15px of the circle, so the overlap has to
-// leave that much clear or the neighbouring circle eats the second letter.
+// Two initials at 11px need about 15px of the square, so the overlap has to
+// leave that much clear or the neighbouring square eats the second letter.
 const SIZE = 30;
 const OVERLAP = 6;
-const FONT = "12px/1 system-ui,-apple-system,'Segoe UI',sans-serif";
-const LABEL_FONT = "12px/1.4 system-ui,-apple-system,'Segoe UI',sans-serif";
-
-// The chrome around the circles is themeable like every other clayjs surface.
-// The circles themselves are not: their colour is computed per participant, so
-// there is no one value a page could override.
-const INK = 'var(--clay-presence-ink,#1f2023)';
-const CHIP_BG = 'var(--clay-presence-bg,#fff)';
-const CHIP_EDGE = 'var(--clay-presence-edge,rgba(0,0,0,.14))';
-const TIP_BG = 'var(--clay-presence-tip-bg,#222)';
-const TIP_INK = 'var(--clay-presence-tip-ink,#fff)';
-const FACE = '#ffffff';
+const FONT = `600 11px/1 ${FONT_MONO}`;
+const LABEL_FONT = `500 11px/1.4 ${FONT_MONO}`;
+
+// all:initial first on every element, so a page rule has nothing left to reach; it
+// resets color-scheme and direction too, which are put back straight after.
+const RESET = ['all:initial', 'color-scheme:inherit', 'direction:ltr', 'unicode-bidi:isolate'];
+
+// The paper a participant's colour sits on: the initials of a solid square, the fill
+// of a hollow one. One literal in both schemes, because every colour below was chosen
+// against it.
+const FACE = '#FFFCF6';
 
 // A fixed set rather than a computed hue: every one of these was looked at
 // against white initials, and a hue wheel puts neighbouring pseudonyms on two
@@ -97,7 +95,7 @@ function initialsOf(name) {
 /**
  * Read the roster frame defensively. Everything here arrived over a wire, and a
  * frame this function cannot understand must draw nothing rather than draw a
- * guess: `[object Object]` in a circle is worse than an empty corner.
+ * guess: `[object Object]` in a square is worse than an empty corner.
  */
 function normalize(data) {
   const list = data && Array.isArray(data.people) ? data.people : [];
@@ -176,11 +174,12 @@ class Presence {
     if (!this.build()) return;
 
     this.hideTip();
+    set(this.root, 'color-scheme', pageScheme());
     this.stack.textContent = '';
     for (const person of people) {
       this.stack.appendChild(this.avatar(person));
     }
-    // The overlap belongs between circles, so the leftmost one does not pull
+    // The overlap belongs between squares, so the leftmost one does not pull
     // itself into the count beside it.
     if (this.stack.firstElementChild) set(this.stack.firstElementChild, 'margin-left', '0');
 
@@ -207,44 +206,50 @@ class Presence {
     if (typeof document === 'undefined' || !document.body) return false;
 
     this.root = runtimeRoot(make('div', [
+      ...RESET,
+      `color-scheme:${pageScheme()}`,
       'position:fixed',
       'top:calc(12px + env(safe-area-inset-top,0px))',
       'right:calc(12px + env(safe-area-inset-right,0px))',
       'z-index:2147483000',
       'display:flex', 'align-items:center', 'gap:8px',
       'max-width:calc(100vw - 24px)',
-      `font:${LABEL_FONT}`, `color:${INK}`,
-      // Only the circles take a pointer. A fixed corner that swallowed clicks
+      `font:${LABEL_FONT}`, `color:${TOKENS.ink}`,
+      // Only the squares take a pointer. A fixed corner that swallowed clicks
       // would take a bite out of whatever the page put underneath it.
       'pointer-events:none',
     ]));
     this.root.setAttribute('data-clay-presence', '');
 
     this.count = runtimeRoot(make('span', [
+      ...RESET,
       'box-sizing:border-box', 'flex:none', 'white-space:nowrap',
-      'padding:4px 8px', 'border-radius:999px',
-      `background-color:${CHIP_BG}`, 'background-image:none', `color:${INK}`,
-      'border-width:1px', 'border-style:solid', `border-color:${CHIP_EDGE}`,
-      `font:${LABEL_FONT}`,
-      'box-shadow:0 1px 3px rgba(0,0,0,.2)',
+      'padding:3px 8px', 'border-radius:0',
+      `background:${TOKENS.surface}`, `color:${TOKENS.muted}`,
+      `border:1px solid ${TOKENS['line-2']}`,
+      `font:${LABEL_FONT}`, 'letter-spacing:.02em',
+      `box-shadow:${SHADOW}`,
       'display:none',
+      'pointer-events:none',
     ]));
     this.count.setAttribute('data-clay-presence-count', '');
 
     this.stack = runtimeRoot(make('div', [
-      'display:flex', 'align-items:center', 'flex:none',
+      ...RESET,
+      'display:flex', 'align-items:center', 'flex:none', 'pointer-events:none',
     ]));
 
     // Inside the root rather than appended to <body>, so the one element that
     // holds a name at rest cannot outlive the subtree that keeps it out of a
     // snapshot. It carries the marking of its own too.
     this.tip = runtimeRoot(make('span', [
+      ...RESET,
       'position:absolute', 'top:100%', 'right:0', 'margin-top:6px',
       'box-sizing:border-box', 'white-space:nowrap', 'pointer-events:none',
-      'padding:4px 8px', 'border-radius:6px',
-      `background-color:${TIP_BG}`, 'background-image:none',
-      `color:${TIP_INK}`, `font:${LABEL_FONT}`,
-      'box-shadow:0 4px 14px rgba(0,0,0,.28)',
+      'padding:5px 9px', 'border-radius:0',
+      `background:${TOKENS.ink}`, `color:${TOKENS.ground}`,
+      `font:${LABEL_FONT}`, 'letter-spacing:.02em',
+      `box-shadow:${SHADOW}`,
       'display:none',
     ]));
     this.tip.setAttribute('data-clay-presence-tip', '');
@@ -264,20 +269,21 @@ class Presence {
       : [`background-color:${FACE}`, `color:${color}`, `border-color:${color}`];
 
     const el = runtimeRoot(make('div', [
+      ...RESET,
       'box-sizing:border-box', 'flex:none',
-      `width:${SIZE}px`, `height:${SIZE}px`, 'border-radius:50%',
+      `width:${SIZE}px`, `height:${SIZE}px`, 'border-radius:0',
       'display:flex', 'align-items:center', 'justify-content:center',
-      `font:${FONT}`, 'font-weight:600',
+      `font:${FONT}`, 'letter-spacing:.02em',
       `margin-left:-${OVERLAP}px`,
       'border-width:2px', 'border-style:solid', 'background-image:none',
-      'box-shadow:0 1px 3px rgba(0,0,0,.28)',
+      `box-shadow:${SHADOW}`,
       'user-select:none', 'cursor:default', 'pointer-events:auto',
       ...skin,
     ], initialsOf(person.name)));
     el.setAttribute('data-clay-presence-avatar', '');
 
     // The name lives in this closure, never in an attribute on the element, and
-    // it reaches the DOM only while a pointer is actually on the circle.
+    // it reaches the DOM only while a pointer is actually on the square.
     const label = person.you ? `${person.name} (you)` : person.name;
     el.addEventListener('mouseenter', () => this.showTip(label));
     el.addEventListener('mouseleave', () => this.hideTip());

package/src/sync/section-notice.js

@@ -31,7 +31,8 @@
  * The region is kept AFTER focus leaves, deliberately. The three-way merge
  * keeps the reader's own typing in the focused region and restores the caret,
  * so the frame worth reporting is the one that lands on the paragraph the
- * reader just left.
+ * reader just left. The line is drawn beside that region, so the reader sees
+ * which section it means.
  *
  * DISMISS ONLY. An undo here would mean recovering displaced local work, which
  * nothing in this library builds. Unsaved local work survives the three-way
@@ -56,15 +57,8 @@
  * nowhere else — no attribute, no data store, nothing a serializer walks.
  */
 
-import { make, set } from '../lib/hostile-css.js';
-
-// Runtime-only chrome, in one string so no root can carry two of the three.
-const RUNTIME_ONLY = 'no-save no-watch no-snapshot';
-
-const BG = 'var(--clay-section-bg,#222)';
-const INK = 'var(--clay-section-ink,#fff)';
-const EDGE = 'var(--clay-section-edge,rgba(255,255,255,.28))';
-const FONT = "14px/1.45 system-ui,-apple-system,'Segoe UI',sans-serif";
+import { set } from '../lib/hostile-css.js';
+import { bevelButton, bevelSurface, bevelText, pageScheme, RUNTIME_ONLY } from '../ui/bevel-controls.js';
 
 // A control's work is its live value, which its markup does not carry. An
 // editable subtree's is its markup, and `outerHTML` covers the region's own
@@ -114,6 +108,7 @@ class SectionNotice {
     this._onFocusIn = (event) => this.remember(event.target);
     this._onEdit = (event) => this.refresh(event.target);
     this._onApplied = (event) => this.applied(event && event.detail);
+    this._onMove = () => this.place();
   }
 
   /** Idempotent, so importing this module twice cannot double-report a frame. */
@@ -130,6 +125,7 @@ class SectionNotice {
   destroy() {
     if (!this._wired) return;
     this._wired = false;
+    this.follow(false);
     document.removeEventListener('focusin', this._onFocusIn);
     document.removeEventListener('input', this._onEdit);
     document.removeEventListener('clay:sync-applied', this._onApplied);
@@ -168,21 +164,62 @@ class SectionNotice {
 
   show(name) {
     if (!this.build()) return;
+    // The conflict notice sits in the same corner and matters more.
+    const conflict = document.querySelector('[data-clay-conflict]');
+    if (conflict && conflict.style.display !== 'none') return;
     this.line.textContent = `${name} changed this section`;
+    set(this.root, 'color-scheme', pageScheme());
     set(this.root, 'display', 'flex');
+    this.place();
+    this.follow(true);
   }
 
   hide() {
     if (!this.root) return;
     this.line.textContent = '';
     set(this.root, 'display', 'none');
+    this.follow(false);
+  }
+
+  // Beside the section it names: just above its top edge, or just below it when there
+  // is no room above. A section scrolled out of view, removed by the frame, or never
+  // focused leaves the line in its corner, clear of the conflict bar.
+  place() {
+    if (!this.root) return;
+    // The conflict notice hides the line directly; stop following until the next show().
+    if (this.root.style.display === 'none') { this.follow(false); return; }
+    const r = this.region && this.region.isConnected ? this.region.getBoundingClientRect() : null;
+    const vw = document.documentElement.clientWidth || window.innerWidth;
+    const vh = document.documentElement.clientHeight || window.innerHeight;
+    if (!r || !(r.width || r.height) || r.bottom <= 0 || r.top >= vh) {
+      set(this.root, 'top', 'auto');
+      set(this.root, 'left', 'calc(12px + env(safe-area-inset-left,0px))');
+      set(this.root, 'bottom', 'calc(72px + env(safe-area-inset-bottom,0px))');
+      return;
+    }
+    const h = this.root.offsetHeight || 40;
+    const w = this.root.offsetWidth || 280;
+    const gap = 6;
+    const top = r.top - h - gap >= 8 ? r.top - h - gap : Math.min(r.bottom + gap, vh - h - 8);
+    const left = Math.max(12, Math.min(r.left, vw - w - 12));
+    set(this.root, 'bottom', 'auto');
+    set(this.root, 'top', `${Math.round(top)}px`);
+    set(this.root, 'left', `${Math.round(left)}px`);
+  }
+
+  follow(on) {
+    if (typeof window === 'undefined' || !!on === !!this._following) return;
+    this._following = !!on;
+    const method = on ? 'addEventListener' : 'removeEventListener';
+    window[method]('scroll', this._onMove, { capture: true, passive: true });
+    window[method]('resize', this._onMove, { passive: true });
   }
 
   build() {
     if (this.root && this.root.isConnected) return true;
     if (typeof document === 'undefined' || !document.body) return false;
 
-    this.root = runtimeRoot(make('div', [
+    this.root = runtimeRoot(bevelSurface('div', [
       'position:fixed',
       'left:calc(12px + env(safe-area-inset-left,0px))',
       // Clear of the conflict bar, which is bottom-anchored and can span almost
@@ -190,30 +227,18 @@ class SectionNotice {
       // this one moves rather than covering it.
       'bottom:calc(72px + env(safe-area-inset-bottom,0px))',
       'z-index:2147483000',
-      'display:none', 'align-items:center', 'gap:10px',
-      'box-sizing:border-box', 'max-width:calc(100vw - 24px)',
-      'padding:9px 12px', 'border-radius:10px',
-      `background-color:${BG}`, 'background-image:none', `color:${INK}`,
-      'border-width:1px', 'border-style:solid', `border-color:${EDGE}`,
-      'box-shadow:0 6px 24px rgba(0,0,0,.32),0 1px 2px rgba(0,0,0,.24)',
-      `font:${FONT}`, 'text-align:left',
+      'display:none', 'align-items:center', 'gap:10px 12px',
+      'max-width:calc(100vw - 24px)', 'padding:8px 8px 8px 14px', 'text-align:left',
+      `color-scheme:${pageScheme()}`,
     ]));
     this.root.setAttribute('data-clay-section-notice', '');
     this.root.setAttribute('role', 'status');
 
-    this.line = runtimeRoot(make('span', ['flex:1 1 auto']));
+    this.line = runtimeRoot(bevelText('span', ['flex:1 1 auto']));
     this.line.setAttribute('data-clay-section-notice-line', '');
 
-    // all:initial first, because a page restyling every button is the normal
-    // case rather than the adversarial one; everything it needs is restated.
-    const dismiss = runtimeRoot(make('button', [
-      'all:initial', 'box-sizing:border-box', 'cursor:pointer', `font:${FONT}`,
-      'font-weight:500', 'border-radius:6px', 'padding:4px 8px',
-      'white-space:nowrap', 'flex:none', `color:${INK}`, 'opacity:.72',
-    ], 'Dismiss'));
-    dismiss.type = 'button';
+    const dismiss = bevelButton('Dismiss', { small: true, variant: 'quiet', onClick: () => this.hide() });
     dismiss.setAttribute('data-clay-section-notice-dismiss', '');
-    dismiss.addEventListener('click', () => this.hide());
 
     this.root.append(this.line, dismiss);
     document.body.appendChild(this.root);

package/src/ui/bevel-controls.js

@@ -0,0 +1,277 @@
+// Bevel controls for UI ClayJS draws on somebody else's page. Every declaration
+// goes on inline and !important (hostile-css.js), so the page's stylesheet cannot
+// repaint them. Inline styles have no :hover or :active, so each button keeps its
+// state in flags and rebuilds its whole inline style from them on every change:
+// a property one state set can never survive into the next. Style a button only
+// through `extra` and `labelExtra`; anything set on it afterwards is rebuilt away.
+//
+// all:initial resets color-scheme and direction too. Both are put back after every
+// reset, so light-dark() follows the scheme the UI root sets and a page cannot
+// flip the text direction.
+import { style, make, set } from '../lib/hostile-css.js';
+import { RULES, MEDIA, FONT_SANS, TOKENS } from './bevel.js';
+
+export const RUNTIME_ONLY = 'no-save no-watch no-snapshot';
+
+const RESET = ['all:initial', 'color-scheme:inherit', 'direction:ltr', 'unicode-bidi:isolate'];
+
+const SIZE = {
+  normal: [`font:500 14px/1.45 ${FONT_SANS}`, 'padding:4px 12px'],
+  small: [`font:500 12.5px/1.45 ${FONT_SANS}`, 'padding:1px 8px'],
+};
+
+// Bevel composes :hover and :active in source order; so do these lists.
+const VARIANT = {
+  default: { rest: RULES.button, hover: RULES.buttonHover, active: RULES.buttonActive },
+  primary: { rest: RULES.buttonPrimary, hover: [...RULES.buttonPrimaryHoverBase, ...RULES.buttonPrimaryHover], active: RULES.buttonPrimaryActive },
+  quiet: { rest: [...RULES.button, ...RULES.buttonQuiet], hover: [...RULES.buttonHover, ...RULES.buttonQuietHover], active: [...RULES.buttonActive, ...RULES.buttonQuietActive] },
+  danger: { rest: RULES.buttonDanger, hover: RULES.buttonDangerHover, active: RULES.buttonDangerActive },
+};
+
+const media = (query) => typeof matchMedia === 'function' && matchMedia(query).matches;
+
+let keyboardModality = false;
+const focusedButtons = new Set();
+if (typeof document !== 'undefined') {
+  document.addEventListener('keydown', () => {
+    keyboardModality = true;
+    for (const refresh of focusedButtons) refresh();
+  }, true);
+  document.addEventListener('pointerdown', () => { keyboardModality = false; }, true);
+}
+
+function runtime(el) {
+  el.setAttribute('clay', RUNTIME_ONLY);
+  return el;
+}
+
+function restyle(el, rules) {
+  el.style.cssText = '';
+  style(el, rules);
+}
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const SHAPES = new Set(['path', 'circle', 'rect', 'line', 'polyline', 'polygon', 'ellipse', 'g']);
+
+// Presentation attributes lose to any author rule, so the icon's own attributes are
+// restated as inline !important declarations: the page cannot hide, resize or
+// repaint it. A path's geometry is pinned through the `d` property as well.
+// It inherits colour, so a currentColor shape takes the ink of the control it sits in.
+function protectIcon(svg, size) {
+  if (!svg || svg.namespaceURI !== SVG_NS) return;
+  runtime(svg);
+  style(svg, [
+    ...RESET, 'color:inherit', 'display:block', `width:${size}px`, `height:${size}px`, 'overflow:visible',
+    'visibility:visible', 'opacity:1', 'transform:none', 'pointer-events:none',
+  ]);
+  for (const el of svg.querySelectorAll('*')) {
+    if (!SHAPES.has(el.localName)) continue;
+    const attr = (name, fallback) => el.getAttribute(name) ?? fallback;
+    const rules = [
+      'visibility:visible', 'opacity:1', 'transform:none', 'display:inline',
+      `fill:${attr('fill', svg.getAttribute('fill') ?? 'currentColor')}`,
+      `stroke:${attr('stroke', svg.getAttribute('stroke') ?? 'none')}`,
+    ];
+    if (el.hasAttribute('stroke-width')) rules.push(`stroke-width:${el.getAttribute('stroke-width')}`);
+    if (el.hasAttribute('stroke-linecap')) rules.push(`stroke-linecap:${el.getAttribute('stroke-linecap')}`);
+    if (el.localName === 'path' && el.hasAttribute('d')) rules.push(`d:path("${el.getAttribute('d')}")`);
+    style(el, rules);
+  }
+}
+
+export function bevelButton(label, { variant = 'default', small = false, onClick = null, extra = [], labelExtra = [], onState = null } = {}) {
+  const v = VARIANT[variant] || VARIANT.default;
+  const size = small ? SIZE.small : SIZE.normal;
+  const reducedMotion = media('(prefers-reduced-motion: reduce)');
+  const forced = media('(forced-colors: active)');
+  const flags = { hovered: false, pressed: false, focusVisible: false, disabled: false };
+  const pinned = new Map();
+
+  const b = runtime(make('button', []));
+  b.type = 'button';
+  const span = runtime(make('span', []));
+  span.textContent = label;
+  b.append(span);
+
+  function applyState() {
+    const rules = [...RESET, 'box-sizing:border-box', ...v.rest, ...size];
+    if (flags.disabled) {
+      rules.push(...RULES.buttonDisabled);
+    } else {
+      if (flags.hovered) rules.push(...v.hover);
+      if (flags.pressed) rules.push(...v.active);
+    }
+    if (flags.focusVisible) rules.push(...RULES.focus);
+    if (forced) rules.push(...MEDIA.forcedColors);
+    rules.push(...extra);
+    for (const [prop, value] of pinned) rules.push(`${prop}:${value}`);
+    restyle(b, rules);
+    const labelRules = [...RESET, 'font:inherit', 'color:inherit', ...RULES.buttonLabel];
+    if (flags.disabled) labelRules.push(...RULES.buttonDisabledLabel);
+    else if (flags.pressed) labelRules.push(...(reducedMotion ? MEDIA.reducedMotion : RULES.buttonActiveLabel));
+    labelRules.push(...labelExtra);
+    restyle(span, labelRules);
+    onState?.({ ...flags });
+  }
+
+  function refreshFocus() {
+    let visible;
+    try { visible = b.matches(':focus-visible'); } catch { visible = false; }
+    const next = visible || keyboardModality;
+    if (next !== flags.focusVisible) { flags.focusVisible = next; applyState(); }
+  }
+
+  const on = (type, fn) => b.addEventListener(type, fn);
+  on('pointerenter', () => { flags.hovered = true; applyState(); });
+  on('pointerleave', () => { flags.hovered = false; flags.pressed = false; applyState(); });
+  on('pointercancel', () => { flags.pressed = false; applyState(); });
+  on('pointerdown', (e) => {
+    if (e.button !== undefined && e.button !== 0) return;
+    if (!flags.disabled) { flags.pressed = true; applyState(); }
+  });
+  on('pointerup', () => { flags.pressed = false; applyState(); });
+  on('keydown', (e) => {
+    if ((e.key === ' ' || e.key === 'Enter') && !flags.disabled) { flags.pressed = true; applyState(); }
+  });
+  on('keyup', () => { if (flags.pressed) { flags.pressed = false; applyState(); } });
+  on('focus', () => { focusedButtons.add(refreshFocus); flags.focusVisible = false; refreshFocus(); applyState(); });
+  on('blur', () => { focusedButtons.delete(refreshFocus); flags.focusVisible = false; flags.pressed = false; applyState(); });
+  on('click', (e) => {
+    if (flags.pressed) { flags.pressed = false; applyState(); }
+    if (flags.disabled) { e.preventDefault(); e.stopImmediatePropagation(); return; }
+    if (onClick) onClick(e);
+  });
+
+  b.setLabel = (text) => { span.textContent = text; };
+  b.setDisabled = (disabled) => {
+    flags.disabled = !!disabled;
+    if (flags.disabled) b.setAttribute('aria-disabled', 'true');
+    else b.removeAttribute('aria-disabled');
+    applyState();
+  };
+  b.isDisabled = () => flags.disabled;
+  // Declarations that must outlive every state rebuild: where a floating button sits,
+  // whether it shows. Written anywhere else, they would be rebuilt away on the next hover.
+  b.pin = (props) => {
+    for (const [prop, value] of Object.entries(props)) pinned.set(prop, value);
+    applyState();
+  };
+
+  applyState();
+  return b;
+}
+
+export function bevelIconButton(svg, { label, onClick = null }) {
+  const b = bevelButton('', {
+    small: true,
+    onClick,
+    extra: ['width:26px', 'height:26px', 'padding:0', 'display:inline-grid', 'place-items:center'],
+    labelExtra: ['display:inline-grid', 'width:12px', 'height:12px'],
+  });
+  b.firstChild.innerHTML = svg;
+  protectIcon(b.firstChild.firstElementChild, 12);
+  b.setAttribute('aria-label', label);
+  b.title = label;
+  return b;
+}
+
+// Bevel's overlay close: a 68px corner cut on the diagonal, the pixel X drawn on it.
+// Hover lifts the corner to the face, keyboard focus fills it with brass.
+const CORNER = [
+  'position:absolute', 'top:-1px', 'right:-1px', 'z-index:2', 'display:block',
+  'width:68px', 'height:68px', 'padding:0', 'margin:0', 'border:0', 'outline:none',
+  'background:transparent', 'clip-path:polygon(0 4%, 0 0, 100% 0, 100% 100%, 94% 100%)',
+];
+const CORNER_BG = 'M132 132.5 1 1.5h131v131Z';
+const CORNER_X = 'M0 0h3v1.5h1.5V3H6v1.5h1.5V6H9v1.5h1.5V9H12v1.5h1.5V12H15v1.5h1.5V15H18v1.5h1.5V18H21v1.5h1.5V21H24v1.5h1.5V24H27v1.5h1.5V27H30v1.5h1.5V30H33v1.5h1.5V33H36v1.5h1.5V36H39v1.5h1.5V39H42v1.5h1.5V42H45v1.5h1.5V45H48v1.5h1.5V48H51v1.5h1.5V51H54v1.5h1.5V54H57v1.5h1.5V57H60v1.5h1.5V60H63v1.5h1.5V63H66v1.5h1.5V66H69v1.5h1.5V69H72v1.5h1.5V72H75v1.5h1.5V75H78v1.5h1.5V78H81v1.5h1.5V81H84v1.5h1.5V84H87v1.5h1.5V87H90v1.5h1.5V90H93v1.5h1.5V93H96v1.5h1.5V96H99v1.5h1.5V99h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v3h-3V132H129v-1.5h-1.5V129H126v-1.5h-1.5V126H123v-1.5h-1.5V123H120v-1.5h-1.5V120H117v-1.5h-1.5V117H114v-1.5h-1.5V114H111v-1.5h-1.5V111H108v-1.5h-1.5V108H105v-1.5h-1.5V105H102v-1.5h-1.5V102H99v-1.5h-1.5V99H96v-1.5h-1.5V96H93v-1.5h-1.5V93H90v-1.5h-1.5V90H87v-1.5h-1.5V87H84v-1.5h-1.5V84H81v-1.5h-1.5V81H78v-1.5h-1.5V78H75v-1.5h-1.5V75H72v-1.5h-1.5V72H69v-1.5h-1.5V69H66v-1.5h-1.5V66H63v-1.5h-1.5V63H60v-1.5h-1.5V60H57v-1.5h-1.5V57H54v-1.5h-1.5V54H51v-1.5h-1.5V51H48v-1.5h-1.5V48H45v-1.5h-1.5V45H42v-1.5h-1.5V42H39v-1.5h-1.5V39H36v-1.5h-1.5V36H33v-1.5h-1.5V33H30v-1.5h-1.5V30H27v-1.5h-1.5V27H24v-1.5h-1.5V24H21v-1.5h-1.5V21H18v-1.5h-1.5V18H15v-1.5h-1.5V15H12v-1.5h-1.5V12H9v-1.5H7.5V9H6V7.5H4.5V6H3V4.5H1.5V3H0V0ZM108.8 22h5.2v5.1h-2.6v2.6H109v2.6h-2.6v2.6h-2.6v2.5h-2.6v5.2h2.6V45h2.6v2.6h2.6v2.6h2.5v2.6h2.6V58h-5.1v-2.6h-2.6V53h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6h-5.2v2.6H91v2.6h-2.6v2.6h-2.6v2.5h-2.6V58H78v-5.1h2.6v-2.6H83v-2.6h2.6v-2.6h2.6v-2.5h2.6v-5.2h-2.6V35h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6H78V22h5.2v2.6h2.5V27h2.6v2.6h2.6v2.6h2.5v2.6h5.2v-2.6h2.5v-2.6h2.6v-2.6h2.6v-2.5h2.5V22Z';
+
+export function bevelCornerClose({ label = 'Close', onClick = null } = {}) {
+  let bg = null;
+  let x = null;
+  const paint = ({ hovered, focusVisible }) => {
+    if (!bg) return;
+    set(bg, 'fill', focusVisible ? TOKENS.brass : hovered ? TOKENS.face : TOKENS.sunk);
+    set(x, 'fill', focusVisible ? TOKENS.face : TOKENS.ink);
+  };
+  const b = bevelButton('', {
+    variant: 'quiet', onClick, extra: CORNER,
+    labelExtra: ['display:block', 'width:100%', 'height:100%'], onState: paint,
+  });
+  b.setAttribute('aria-label', label);
+  b.firstChild.innerHTML = `<svg viewBox="0 0 134 134" xmlns="http://www.w3.org/2000/svg"><path d="${CORNER_BG}"/><path fill-rule="evenodd" clip-rule="evenodd" d="${CORNER_X}"/></svg>`;
+  const svg = b.firstChild.firstElementChild;
+  protectIcon(svg, 68);
+  [bg, x] = svg.children;
+  set(x, 'fill-rule', 'evenodd');
+  set(x, 'clip-rule', 'evenodd');
+  paint({ hovered: false, focusVisible: false });
+  return b;
+}
+
+// A plain runtime-only box: reset, then only the given rules. For structure inside a
+// surface (rows, stacks, backdrops) that carries no material of its own.
+export function bevelBox(tag, rules = []) {
+  return runtime(make(tag, [...RESET, 'box-sizing:border-box', ...rules]));
+}
+
+export function bevelSurface(tag, rules = []) {
+  return runtime(make(tag, [...RESET, 'box-sizing:border-box', ...RULES.surface, `font:14px/1.5 ${FONT_SANS}`, ...rules]));
+}
+
+export function bevelWell(rules = []) {
+  return runtime(make('div', [...RESET, 'display:block', 'box-sizing:border-box', `font:14px/1.5 ${FONT_SANS}`, `color:${TOKENS.ink}`, ...RULES.recess, ...rules]));
+}
+
+export function bevelText(tag, rules = [], text) {
+  const el = runtime(make(tag, [...RESET, 'font:inherit', `color:${TOKENS.ink}`, ...rules]));
+  if (text != null) el.textContent = text;
+  return el;
+}
+
+// A text field in Bevel's input material, on an element that already exists (markup a
+// dialog wrote) or a new one. Focus and hover live in flags, as on a button. A
+// textarea keeps the height a person dragged it to across every repaint.
+export function paintInput(el, { rules = [] } = {}) {
+  const flags = { hovered: false, focused: false };
+  const forced = media('(forced-colors: active)');
+  runtime(el);
+  function applyState() {
+    const height = el.localName === 'textarea' ? el.style.getPropertyValue('height') : '';
+    const list = [...RESET, 'box-sizing:border-box', ...RULES.input];
+    if (flags.hovered) list.push(...RULES.inputHover);
+    if (flags.focused) list.push(...RULES.inputFocus);
+    if (forced) list.push(...MEDIA.forcedColors);
+    list.push(...rules);
+    if (height) list.push(`height:${height}`);
+    restyle(el, list);
+  }
+  el.addEventListener('pointerenter', () => { flags.hovered = true; applyState(); });
+  el.addEventListener('pointerleave', () => { flags.hovered = false; applyState(); });
+  el.addEventListener('focus', () => { flags.focused = true; applyState(); });
+  el.addEventListener('blur', () => { flags.focused = false; applyState(); });
+  applyState();
+  return el;
+}
+
+export function bevelInput(tag = 'input', opts = {}) {
+  const el = document.createElement(tag);
+  if (tag === 'input') el.type = 'text';
+  return paintInput(el, opts);
+}
+
+// The scheme a UI root gives its subtree: the page's own when it declares one, so
+// light-dark() matches what the person is looking at, else the reader's preference.
+export function pageScheme() {
+  const s = getComputedStyle(document.documentElement).colorScheme;
+  return s === 'light' || s === 'dark' ? s : 'light dark';
+}
+
+// `hidden` loses to an inline !important display, so showing and hiding a control
+// sets both: the attribute for assistive tech and callers, the declaration for looks.
+export function setShown(el, shown, display = 'block') {
+  el.hidden = !shown;
+  if (el.pin) el.pin({ display: shown ? display : 'none' });
+  else set(el, 'display', shown ? display : 'none');
+}
+
+export { protectIcon };