mnfst 0.5.195 → 0.5.197

package/lib/manifest.css

@@ -274,13 +274,16 @@
         color: color-mix(in oklab, currentcolor 50%, transparent)
     }
 
+    /* Animates `scale`, not `transform`: a transform animation with fill `both`
+       keeps its final value and would override any transform an author sets on
+       a popover of their own. */
     @keyframes mnfst-popover-in {
         from {
-            transform: scale(.9);
+            scale: .9;
         }
 
         to {
-            transform: none;
+            scale: 1;
         }
     }
 
@@ -2547,8 +2550,11 @@
     /* Hide dropdowns when dialogs are open */
     html:has(dialog:popover-open) {
 
-        /* Hide dropdowns outside of any dialog */
-        & menu[popover]:not(dialog *) {
+        /* Hide dropdowns outside of any dialog. A generated popover (a datepicker
+           calendar, a colorpicker panel) is appended to <body>, so DOM position alone
+           can't tell page chrome from a menu the dialog itself opened —
+           data-popover-nested marks the latter, which CSS has no way to work out. */
+        & menu[popover]:not(dialog *):not([data-popover-nested]) {
             opacity: 0;
             scale: .9;
             pointer-events: none;
@@ -2893,21 +2899,36 @@
 
 @layer base, components, utilities;
 
-/* Authors override any of this without specificity battles: every rule is wrapped
-   in :where(), state lives on data-attributes, and injected affordances use plain
-   semantic class names (.edit-handle, .edit-frame) — no framework-prefixed litter. */
+/* Self-contained: every rule the plugin needs lives here, so this stylesheet works
+   on its own. Authors override without specificity battles — rules are :where()
+   wrapped and keyed off data-edit-* attributes, including the injected affordances
+   (handles, overlay, live region, toolbar, menu). No class names to collide with. */
 
 @layer utilities {
 
-    /* ---- Editable area (armed) ---- */
+    /* ---- Editable area (armed) ----
+       Chrome is opt-in. Most uses of this plugin are a resize handle or a sortable
+       list, which should look like themselves; only .authoring gets the outline and
+       the region label. */
     :where([data-edit-armed]) {
         position: relative;
-        outline: 1px dashed var(--color-line);
+    }
+
+    /* Quiet until touched. A page covered in dashed boxes reads as a diagram of
+       itself; the affordance only has to be there when you go looking for it. */
+    :where([data-edit-armed][data-edit-authoring]) {
+        outline: 1px dashed transparent;
         outline-offset: 6px;
         border-radius: var(--radius);
+        transition: outline-color 0.12s ease;
+    }
+
+    :where([data-edit-armed][data-edit-authoring]):hover,
+    :where([data-edit-armed][data-edit-authoring]):focus-within {
+        outline-color: var(--color-line);
     }
 
-    :where([data-edit-armed])::before {
+    :where([data-edit-armed][data-edit-authoring])::before {
         content: attr(data-edit-label);
         position: absolute;
         inset-block-start: -1.5rem;
@@ -2917,6 +2938,13 @@
         text-transform: uppercase;
         color: var(--color-content-subtle);
         pointer-events: none;
+        opacity: 0;
+        transition: opacity 0.12s ease;
+    }
+
+    :where([data-edit-armed][data-edit-authoring]):hover::before,
+    :where([data-edit-armed][data-edit-authoring]):focus-within::before {
+        opacity: 1;
     }
 
     /* ---- Reorder (pointer + keyboard; touch-action:none lets touch-drag beat scroll) ---- */
@@ -2925,31 +2953,55 @@
         touch-action: none;
         transition: opacity 0.12s ease, outline-color 0.12s ease;
     }
-    :where([data-edit-sortable]):hover {
+
+    :where([data-edit-sortable]):hover,
+    :where([data-edit-sortable]):focus-within {
         outline: 1px solid var(--edit-accent, var(--color-brand-content));
         outline-offset: 3px;
     }
-    :where([data-edit-sortable]):focus-visible,
-    :where([data-edit-movable]):focus-visible {
+
+    :where([data-edit-sortable], [data-edit-movable]):focus-visible {
         outline: 2px solid var(--edit-accent, var(--color-brand-content));
         outline-offset: 3px;
     }
-    :where([data-edit-dragging]) { opacity: 0.4; }
+
+    /* Lifted out of the flow and following the pointer. */
+    :where([data-edit-sortable][data-edit-dragging]) {
+        z-index: 1000;
+        cursor: grabbing;
+        box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
+    }
+
+    /* The stand-in holding the slot the drop would land in — a translucent copy of
+       the element by default, because the clearest preview of where it lands is the
+       thing itself. Restyle it freely: hide its contents for an empty outlined slot,
+       give it a background, animate it. */
+    :where([data-edit-ghost]) {
+        opacity: var(--edit-ghost-opacity, 0.4);
+        pointer-events: none;
+    }
+
+    /* Nothing else should react while a drag is in progress */
+    :where([data-edit-dragging-in]) {
+        cursor: grabbing;
+        user-select: none;
+
+        & :where([data-edit-sortable]:not([data-edit-dragging])) {
+            cursor: grabbing;
+        }
+    }
+
     :where([data-edit-grabbed]) {
         outline: 2px dashed var(--edit-accent, var(--color-brand-content));
         outline-offset: 3px;
     }
 
-    /* Screen-reader announcement region (keyboard grab/move/drop) */
-    :where(.edit-sr) {
-        position: absolute;
-        width: 1px; height: 1px;
-        margin: -1px; padding: 0; border: 0;
-        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
+    /* ---- Move (positioned children) ---- */
+    :where([data-edit-movable]) {
+        cursor: move;
+        touch-action: none;
     }
 
-    /* ---- Move (positioned children) ---- */
-    :where([data-edit-movable]) { cursor: move; touch-action: none; }
     :where([data-edit-movable]):hover {
         outline: 1px solid var(--edit-accent, var(--color-brand-content));
         outline-offset: 2px;
@@ -2957,83 +3009,204 @@
 
     /* ---- Inline text ---- */
     :where([data-edit-armed]) [contenteditable="true"] {
-        outline: 1px solid color-mix(in srgb, var(--edit-accent, var(--color-brand-content)) 45%, transparent);
+        outline: 1px solid transparent;
         outline-offset: 2px;
         border-radius: 3px;
+        transition: outline-color 0.12s ease;
+    }
+
+    :where([data-edit-armed]) [contenteditable="true"]:hover {
+        outline-color: color-mix(in oklch, var(--edit-accent, var(--color-brand-content)) 45%, transparent);
     }
+
     :where([data-edit-armed]) [contenteditable="true"]:focus {
         outline: 2px solid var(--edit-accent, var(--color-brand-content));
     }
 
-    /* ---- Size (resize handles) — injected overlay children, fully stylable ---- */
-    /* The element keeps its own markup untouched, so its native :hover/:focus still
-       fire. Handles are separate elements with pointer-events; the body of the
-       element stays interactive. Geometry: styles/snippets/manifest.handles.css. */
+    /* ---- Size handles ----
+       Injected as siblings of the element's own markup, so its native :hover and
+       :focus still fire and its body stays interactive. */
     :where([data-edit-sizable]) {
         position: relative;
+    }
+
+    /* Handles reveal on approach rather than sitting on the element permanently */
+    :where([data-edit-sizable]) :where([data-edit-handle])::before {
+        opacity: 0;
+        transition: opacity 0.12s ease, background-color 0.15s ease;
+    }
 
-        .edit-handle {
+    :where([data-edit-sizable]):hover :where([data-edit-handle])::before,
+    :where([data-edit-sizable]):focus-within :where([data-edit-handle])::before {
+        opacity: 1;
+    }
+
+    :where([data-edit-handle]) {
+        position: absolute;
+        z-index: 100;
+        background: transparent;
+        --h: var(--edit-size-handle, 1rem);
+
+        /* Hairline, revealed on hover */
+        &::before {
+            content: '';
             position: absolute;
-            z-index: 100;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 1px;
+            height: 1px;
             background: transparent;
-            --h: var(--edit-size-handle, 1rem);
+            transition: background-color 0.15s ease;
+            pointer-events: none;
+        }
 
-            &::before {
-                content: '';
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                width: 1px;
-                height: 1px;
-                background: transparent;
-                transition: background-color 0.15s ease;
-            }
-            &:hover::before, &:active::before {
-                background-color: var(--edit-accent, var(--color-brand-content));
-            }
+        &:hover::before,
+        &:active::before {
+            background-color: var(--edit-accent, var(--color-brand-content));
         }
+    }
 
-        /* Corner cursors (geometry is shared; resize handles use nw/ne/sw/se) */
-        .edit-handle-top-left, .edit-handle-bottom-right,
-        .edit-handle-top-start, .edit-handle-bottom-end { cursor: nwse-resize; }
-        .edit-handle-top-right, .edit-handle-bottom-left,
-        .edit-handle-top-end, .edit-handle-bottom-start { cursor: nesw-resize; }
+    :where([data-edit-handle]):focus-visible {
+        outline: 2px solid var(--edit-accent, var(--color-brand-content));
     }
 
-    /* Collapsed state (size dropped below --edit-size-collapse-*) — authors restyle freely */
-    :where([data-edit-collapsed]) { opacity: 0.45; }
+    /* Edges span their axis; corners are square. A corner value contains a hyphen. */
+    :where([data-edit-handle="top"], [data-edit-handle="bottom"]) {
+        left: 0;
+        width: 100%;
+        height: var(--h);
+        cursor: ns-resize;
 
-    /* Full-viewport capture layer during a size/move drag (mirrors resize overlay) */
-    :where(.edit-overlay) {
+        &::before {
+            width: 100%;
+        }
+    }
+
+    :where([data-edit-handle="left"], [data-edit-handle="right"], [data-edit-handle="start"], [data-edit-handle="end"]) {
+        top: 0;
+        width: var(--h);
+        height: 100%;
+        cursor: ew-resize;
+
+        &::before {
+            height: 100%;
+        }
+    }
+
+    :where([data-edit-handle*="-"]) {
+        width: var(--h);
+        height: var(--h);
+    }
+
+    /* Inset — each handle straddles its edge; a corner matches one rule per axis.
+       inset-inline-* carries the logical start/end values, so they flip for RTL. */
+    :where([data-edit-handle^="top"]) {
+        top: calc(var(--h) * -0.5);
+    }
+
+    :where([data-edit-handle^="bottom"]) {
+        bottom: calc(var(--h) * -0.5);
+    }
+
+    :where([data-edit-handle$="left"]) {
+        left: calc(var(--h) * -0.5);
+    }
+
+    :where([data-edit-handle$="right"]) {
+        right: calc(var(--h) * -0.5);
+    }
+
+    :where([data-edit-handle$="start"]) {
+        inset-inline-start: calc(var(--h) * -0.5);
+    }
+
+    :where([data-edit-handle$="end"]) {
+        inset-inline-end: calc(var(--h) * -0.5);
+    }
+
+    /* Corner cursors; the logical pair flips with direction. */
+    :where([data-edit-handle="top-left"], [data-edit-handle="bottom-right"], [data-edit-handle="top-start"], [data-edit-handle="bottom-end"]) {
+        cursor: nwse-resize;
+    }
+
+    :where([data-edit-handle="top-right"], [data-edit-handle="bottom-left"], [data-edit-handle="top-end"], [data-edit-handle="bottom-start"]) {
+        cursor: nesw-resize;
+    }
+
+    [dir=rtl] :where([data-edit-handle="top-start"], [data-edit-handle="bottom-end"]) {
+        cursor: nesw-resize;
+    }
+
+    [dir=rtl] :where([data-edit-handle="top-end"], [data-edit-handle="bottom-start"]) {
+        cursor: nwse-resize;
+    }
+
+    /* Collapsed past --edit-size-collapse-* — authors restyle freely */
+    :where([data-edit-collapsed]) {
+        opacity: 0.45;
+    }
+
+    /* Full-viewport capture layer during a size or move drag */
+    :where([data-edit-overlay]) {
         position: fixed;
         inset: 0;
         z-index: 9999;
         background: transparent;
     }
 
+    /* Screen-reader announcements (keyboard grab / move / drop) */
+    :where([data-edit-live]) {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        padding: 0;
+        border: 0;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+    }
+
     @media (prefers-reduced-motion: reduce) {
-        :where([data-edit-armed]) > [draggable="true"], :where([data-edit-sizable]) .edit-handle::before { transition: none; }
+
+        :where([data-edit-armed]) > [draggable="true"],
+        :where([data-edit-handle])::before {
+            transition: none;
+        }
     }
 }
 
-/* ---- Plugin dev chrome (spike-only: toolbar + class/scope menu) ---- */
+/* ---- Authoring chrome (toolbar + class/scope menu) ---- */
 @layer components {
 
-    :where(.edit-toolbar) {
+    /* Presence is script's business — it knows which route is on screen. Whether it
+       is seen is not, so the toolbar is styled and revealed here. */
+    :where([data-edit-toolbar]) {
+        display: none;
         position: fixed;
         inset-block-end: 1rem;
         inset-inline-end: 1rem;
         z-index: 9999;
-        display: flex;
         gap: 0.5rem;
         align-items: center;
+
+        & button[disabled] {
+            opacity: 0.35;
+            pointer-events: none;
+        }
     }
 
-    :where(.edit-classes) {
+    :root[data-edit-active] :where([data-edit-toolbar]) {
+        display: flex;
+    }
+
+    /* A popover: the top layer sits above every stacking context, so no handle,
+       overlay or z-index anywhere on the page can paint over it. */
+    :where([data-edit-menu]) {
         position: fixed;
-        z-index: 10000;
-        width: 260px;
+        margin: 0;
+        width: 16rem;
         padding: 0.6rem;
         display: flex;
         flex-direction: column;
@@ -3042,12 +3215,20 @@
         border: 1px solid var(--color-line);
         border-radius: var(--radius);
         box-shadow: 0 8px 30px rgb(0 0 0 / 0.2);
-    }
-    :where(.edit-classes)[hidden] { display: none; }
-    :where(.edit-classes) input { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.75rem; }
-    :where(.edit-classes) .muted { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-content-subtle); }
 
-    :where(.edit-toolbar) button[disabled] { opacity: 0.35; pointer-events: none; }
+        & input {
+            width: 100%;
+            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+            font-size: 0.75rem;
+        }
+
+        & small {
+            font-size: 0.7rem;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            color: var(--color-content-subtle);
+        }
+    }
 }
 
 /* Manifest Forms */
@@ -3087,8 +3268,10 @@
 
             &>:where(button, [role=button], input:not([type=hidden]), select, textarea, .combobox, label:has(input:not([type=checkbox], [type=radio]), select, textarea), .label:has(input:not([type=checkbox], [type=radio]), select, textarea)):not([hidden]):not([popover]):not(.hidden):not([style*="display: none"]) {
 
-                /* First participant */
-                &:not(:where(button, [role=button], input:not([type=hidden]), select, textarea, .combobox, label:has(input:not([type=checkbox], [type=radio]), select, textarea), .label:has(input:not([type=checkbox], [type=radio]), select, textarea)):not([hidden]):not([popover]):not(.hidden):not([style*="display: none"]) ~ &) {
+                /* First participant — only when something follows it. A lone
+                   participant matched this AND the last rule, squaring all four
+                   corners of what is really just a single field. */
+                &:not(:where(button, [role=button], input:not([type=hidden]), select, textarea, .combobox, label:has(input:not([type=checkbox], [type=radio]), select, textarea), .label:has(input:not([type=checkbox], [type=radio]), select, textarea)):not([hidden]):not([popover]):not(.hidden):not([style*="display: none"]) ~ &):has(~ :where(button, [role=button], input:not([type=hidden]), select, textarea, .combobox, label:has(input:not([type=checkbox], [type=radio]), select, textarea), .label:has(input:not([type=checkbox], [type=radio]), select, textarea)):not([hidden]):not([popover]):not(.hidden):not([style*="display: none"])) {
                     border-start-end-radius: 0;
                     border-end-end-radius: 0
                 }
@@ -3098,8 +3281,8 @@
                     border-radius: 0
                 }
 
-                /* Last participant */
-                &:not(:has(~ :where(button, [role=button], input:not([type=hidden]), select, textarea, .combobox, label:has(input:not([type=checkbox], [type=radio]), select, textarea), .label:has(input:not([type=checkbox], [type=radio]), select, textarea)):not([hidden]):not([popover]):not(.hidden):not([style*="display: none"]))) {
+                /* Last participant — only when something precedes it */
+                &:where(:where(button, [role=button], input:not([type=hidden]), select, textarea, .combobox, label:has(input:not([type=checkbox], [type=radio]), select, textarea), .label:has(input:not([type=checkbox], [type=radio]), select, textarea)):not([hidden]):not([popover]):not(.hidden):not([style*="display: none"]) ~ &):not(:has(~ :where(button, [role=button], input:not([type=hidden]), select, textarea, .combobox, label:has(input:not([type=checkbox], [type=radio]), select, textarea), .label:has(input:not([type=checkbox], [type=radio]), select, textarea)):not([hidden]):not([popover]):not(.hidden):not([style*="display: none"]))) {
                     border-start-start-radius: 0;
                     border-end-start-radius: 0
                 }
@@ -3707,7 +3890,10 @@
     }
 }
 
-/* Manifest Resize Handles */
+/* Manifest Resize Handles
+
+   Superseded by x-edit.size (manifest.edit.css) — kept for existing projects.
+   Self-contained: handle geometry lives here, not in a shared snippet. */
 
 @layer base, components, utilities;
 
@@ -3716,7 +3902,7 @@
     :where([x-resize]) {
         position: relative;
 
-        /* Resize handle area (geometry: styles/snippets/manifest.handles.css) */
+        /* Resize handle area */
         .resize-handle {
             position: absolute;
             display: block;
@@ -3748,7 +3934,81 @@
             }
         }
 
-        /* Corner cursors (geometry is shared; edit handles use nwse/nesw) */
+        /* Handle geometry — edges span their axis, corners stay square */
+        .resize-handle-top,
+        .resize-handle-bottom {
+            left: 0;
+            width: 100%;
+            height: var(--h);
+            cursor: ns-resize;
+
+            &::before {
+                width: 100%
+            }
+        }
+
+        .resize-handle-left,
+        .resize-handle-right,
+        .resize-handle-start,
+        .resize-handle-end {
+            top: 0;
+            width: var(--h);
+            height: 100%;
+            cursor: ew-resize;
+
+            &::before {
+                height: 100%
+            }
+        }
+
+        .resize-handle-top {
+            top: calc(var(--h) * -0.5)
+        }
+
+        .resize-handle-bottom {
+            bottom: calc(var(--h) * -0.5)
+        }
+
+        .resize-handle-left,
+        .resize-handle-top-left,
+        .resize-handle-bottom-left {
+            left: calc(var(--h) * -0.5)
+        }
+
+        .resize-handle-right,
+        .resize-handle-top-right,
+        .resize-handle-bottom-right {
+            right: calc(var(--h) * -0.5)
+        }
+
+        /* Logical edges — inset-inline-* auto-flips for RTL */
+        .resize-handle-start,
+        .resize-handle-top-start,
+        .resize-handle-bottom-start {
+            inset-inline-start: calc(var(--h) * -0.5)
+        }
+
+        .resize-handle-end,
+        .resize-handle-top-end,
+        .resize-handle-bottom-end {
+            inset-inline-end: calc(var(--h) * -0.5)
+        }
+
+        .resize-handle-top-left,
+        .resize-handle-top-right,
+        .resize-handle-top-start,
+        .resize-handle-top-end {
+            top: calc(var(--h) * -0.5)
+        }
+
+        .resize-handle-bottom-left,
+        .resize-handle-bottom-right,
+        .resize-handle-bottom-start,
+        .resize-handle-bottom-end {
+            bottom: calc(var(--h) * -0.5)
+        }
+
+        /* Corner cursors */
         .resize-handle-top-left,
         .resize-handle-top-start {
             cursor: nw-resize;
@@ -4121,6 +4381,211 @@
     }
 }
 
+/* Manifest Text Edit */
+
+@layer base, components, utilities;
+
+/* Self-contained. The editable area is a field first — it borrows the tokens inputs
+   and textareas use, so it sits in a form without looking bolted on. Controls are
+   styled where they are, not by where they sit, because they can be anywhere. */
+
+@layer components {
+
+    :where([data-text-edit]) {
+        min-height: var(--text-edit-min-height, 8rem);
+        max-height: var(--text-edit-max-height, none);
+        overflow-y: auto;
+        padding: var(--text-edit-padding, 0.75rem);
+        background: var(--text-edit-background, var(--color-surface-1));
+        border: 1px solid var(--color-line);
+        border-radius: var(--radius);
+        outline: none;
+
+        /* Page-level styling — set by .page controls, read back by $text.page.
+           Presentation, so it lives here rather than inside the stored markup. */
+        font-family: var(--text-edit-font, inherit);
+        font-size: var(--text-edit-size, inherit);
+        line-height: var(--text-edit-leading, inherit);
+        text-align: var(--text-edit-align, start);
+        color: var(--text-edit-color, inherit);
+
+        &:focus {
+            border-color: var(--color-content-subtle);
+        }
+
+        /* Flagged from script: :empty never matches the <br> a contenteditable
+           keeps, and the tag holding it is not predictable after a wipe. */
+        &[data-text-edit-empty]::before {
+            content: attr(placeholder);
+            color: var(--color-content-subtle);
+            pointer-events: none;
+        }
+    }
+
+    /* ---- Controls ----
+       A control is marked wherever it lives, so a toolbar is optional markup and
+       never a requirement. The reset already dims [aria-disabled=true]. */
+    :where([data-text-edit-control]) {
+        &[data-text-edit-active] {
+            background: color-mix(in oklch, var(--color-content-stark) 10%, transparent);
+            color: var(--color-content-stark);
+        }
+
+        & > svg {
+            width: 1rem;
+            height: 1rem;
+        }
+    }
+
+    :where(button[data-text-edit-control]) {
+        padding: 0.35rem;
+        line-height: 0;
+    }
+
+    /* ---- Editable content ----
+       The editor authors real block elements, so style them as elements. Deliberately
+       lighter than the .prose class, which sets a reading measure this field can't use. */
+    :where([data-text-edit]) {
+
+        & > * + * {
+            margin-block-start: 0.75em;
+        }
+
+        & :where(h1, h2, h3, h4, h5, h6) {
+            font-weight: 600;
+            line-height: 1.25;
+        }
+
+        & h1 { font-size: 1.6em }
+        & h2 { font-size: 1.35em }
+        & h3 { font-size: 1.15em }
+
+        & :where(ul, ol) {
+            padding-inline-start: 1.5em;
+        }
+
+        & li {
+            list-style: revert;
+        }
+
+        & blockquote {
+            padding-inline-start: 0.85em;
+            border-inline-start: 2px solid var(--color-line);
+            color: var(--color-content-neutral);
+        }
+
+        & code {
+            padding: 0.1em 0.3em;
+            border-radius: 4px;
+            font-size: 0.9em;
+            background: color-mix(in oklch, var(--color-content-stark) 8%, transparent);
+        }
+
+        & pre {
+            padding: 0.75em;
+            border-radius: var(--radius);
+            overflow-x: auto;
+            background: color-mix(in oklch, var(--color-content-stark) 8%, transparent);
+
+            & code {
+                padding: 0;
+                background: none;
+            }
+        }
+
+        & a {
+            color: var(--color-brand-content);
+            text-decoration: underline;
+        }
+
+        & hr {
+            margin-block: 1em;
+        }
+
+        & img {
+            max-width: 100%;
+        }
+
+        & table {
+            width: 100%;
+            table-layout: fixed;
+
+            & :where(td, th) {
+                padding: 0.35em 0.5em;
+                border: 1px solid var(--color-line);
+                vertical-align: top;
+            }
+
+            & th {
+                font-weight: 600;
+                text-align: start;
+                background: var(--color-surface-2);
+            }
+        }
+
+        /* A block selection across cells. The browser can only highlight text, so an
+           empty cell shows nothing — this is what makes a spreadsheet-style
+           selection visible. */
+        & :where(td, th)[data-text-edit-cell] {
+            background: color-mix(in oklch, var(--color-brand-content) 18%, transparent);
+        }
+
+        /* Borders read as grabbable only when the pointer is on one */
+        &[data-text-edit-border="x"] { cursor: col-resize }
+        &[data-text-edit-border="y"] { cursor: row-resize }
+        &[data-text-edit-resizing] { user-select: none }
+        &[data-text-edit-resizing="x"] { cursor: col-resize }
+        &[data-text-edit-resizing="y"] { cursor: row-resize }
+
+        /* Task lists — the checkbox replaces the marker */
+        & :where(ul[data-checklist]) {
+            padding-inline-start: 0.25em;
+            list-style: none;
+
+            & li {
+                display: flex;
+                align-items: baseline;
+                gap: 0.5em;
+                list-style: none;
+            }
+        }
+
+        & :where(dt) {
+            font-weight: 600;
+        }
+
+        & :where(dd) {
+            margin-inline-start: 1.5em;
+        }
+
+        & :where(kbd) {
+            padding: 0.1em 0.35em;
+            border: 1px solid var(--color-line);
+            border-radius: 4px;
+            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+            font-size: 0.85em;
+        }
+
+        & :where(mark) {
+            background: color-mix(in oklch, var(--color-brand-content) 25%, transparent);
+            color: inherit;
+        }
+
+        & :where(small) {
+            font-size: 0.8em;
+        }
+
+        & :where(figcaption) {
+            font-size: 0.8em;
+            color: var(--color-content-neutral);
+        }
+
+        & :where(abbr, dfn) {
+            text-decoration: underline dotted;
+        }
+    }
+}
+
 /* ManifestToasts */
 
 @layer base, components, utilities;
@@ -4809,123 +5274,6 @@
     }
 }
 
-/* Drag-handle geometry — single source for x-resize and x-edit handles.
-   The build appends this to standalone copies and adds it once to the bundle.
-   Hosts set --h (handle thickness) and keep their own chrome: hairline colour,
-   transition, and corner cursors (resize uses nw/ne/sw/se, edit nwse/nesw). */
-
-@layer base, components, utilities;
-
-@layer utilities {
-
-    /* Horizontal edges */
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-top, .resize-handle-bottom, .edit-handle-top, .edit-handle-bottom) {
-        left: 0;
-        width: 100%;
-        height: var(--h);
-        cursor: ns-resize;
-
-        &::before {
-            width: 100%
-        }
-    }
-
-    /* Vertical edges */
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-left, .resize-handle-right, .resize-handle-start, .resize-handle-end, .edit-handle-left, .edit-handle-right, .edit-handle-start, .edit-handle-end) {
-        top: 0;
-        width: var(--h);
-        height: 100%;
-        cursor: ew-resize;
-
-        &::before {
-            height: 100%
-        }
-    }
-
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-top, .edit-handle-top) {
-        top: calc(var(--h) * -0.5)
-    }
-
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-bottom, .edit-handle-bottom) {
-        bottom: calc(var(--h) * -0.5)
-    }
-
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-left, .edit-handle-left) {
-        left: calc(var(--h) * -0.5)
-    }
-
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-right, .edit-handle-right) {
-        right: calc(var(--h) * -0.5)
-    }
-
-    /* Logical edges — inset-inline-* auto-flips for RTL */
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-start, .edit-handle-start) {
-        inset-inline-start: calc(var(--h) * -0.5)
-    }
-
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-end, .edit-handle-end) {
-        inset-inline-end: calc(var(--h) * -0.5)
-    }
-
-    /* Corners — square and inset; cursors stay with each host */
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-top-left, .edit-handle-top-left) {
-        width: var(--h);
-        height: var(--h);
-        top: calc(var(--h) * -0.5);
-        left: calc(var(--h) * -0.5)
-    }
-
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-top-right, .edit-handle-top-right) {
-        width: var(--h);
-        height: var(--h);
-        top: calc(var(--h) * -0.5);
-        right: calc(var(--h) * -0.5)
-    }
-
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-bottom-left, .edit-handle-bottom-left) {
-        width: var(--h);
-        height: var(--h);
-        bottom: calc(var(--h) * -0.5);
-        left: calc(var(--h) * -0.5)
-    }
-
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-bottom-right, .edit-handle-bottom-right) {
-        width: var(--h);
-        height: var(--h);
-        bottom: calc(var(--h) * -0.5);
-        right: calc(var(--h) * -0.5)
-    }
-
-    /* Logical corners — inset-inline-* auto-flips for RTL */
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-top-start, .edit-handle-top-start) {
-        width: var(--h);
-        height: var(--h);
-        top: calc(var(--h) * -0.5);
-        inset-inline-start: calc(var(--h) * -0.5)
-    }
-
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-top-end, .edit-handle-top-end) {
-        width: var(--h);
-        height: var(--h);
-        top: calc(var(--h) * -0.5);
-        inset-inline-end: calc(var(--h) * -0.5)
-    }
-
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-bottom-start, .edit-handle-bottom-start) {
-        width: var(--h);
-        height: var(--h);
-        bottom: calc(var(--h) * -0.5);
-        inset-inline-start: calc(var(--h) * -0.5)
-    }
-
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-bottom-end, .edit-handle-bottom-end) {
-        width: var(--h);
-        height: var(--h);
-        bottom: calc(var(--h) * -0.5);
-        inset-inline-end: calc(var(--h) * -0.5)
-    }
-}
-
 :root,
 ::selection {