@quillmark/svelte 0.1.1 → 0.3.0

package/dist/core/codec/prose.css

@@ -4,33 +4,33 @@
    hidden-selection and separator-image guards. It is imported whole; the rules are
    interdependent and which ones a given schema needs is not visible from here.
 
-   What it does NOT carry is a block reset, so without the rules below every leaf
+   What it does not carry is a block reset, so without the rules below every leaf
    inherits the UA `p { margin: 1em 0 }` (32px of margin in a box drawn to hold one
    line), which is enough on its own to make an inline richtext field twice the height
    of the input beside it. The reset lives here rather than per component because every
    prose leaf in the package mounts through the codec (a field, the body, an array
    element) and picks it up without restating it, and a leaf that carries the
    control recipe (`visual/ProseField.svelte`) can then match `.qm-input` by
-   construction instead of by a tuned `min-height`. The source view is NOT one of
+   construction instead of by a tuned `min-height`. The source view is not one of
    them: it is a `<pre>` holding `textContent` (`source/view.ts`), outside
    `.ProseMirror` and so outside every rule in this file.
 
-   It also carries hard-coded VALUES that answer to no rung: a `#8cf` node-selection
+   It also carries hard-coded values that answer to no rung: a `#8cf` node-selection
    outline, twice, and the `-32px` placing a selected list item's. Retinted and
    re-measured here rather than in `theme.css` because a layered rule loses to that
    unlayered stylesheet: equal specificity and a later import is what wins. */
 .ProseMirror-selectednode {
-	outline: var(--_qm-ring-width) solid var(--_qm-accent);
+	outline: var(--_qm-ring);
 }
 /* Upstream's `-32px` is measured against the UA's 40px list indent, which the list
    rule below replaces with a rung. The offset moves with it, or a selected item's
    outline hangs into the margin by the difference. */
 li.ProseMirror-selectednode::after {
-	border: var(--_qm-ring-width) solid var(--_qm-accent);
+	border: var(--_qm-ring);
 	left: calc(var(--_qm-space-4) * -1);
 }
 
-/* The GAP CURSOR (`prosemirror-gapcursor`, imported beside this file): a caret
+/* The gap cursor (`prosemirror-gapcursor`, imported beside this file): a caret
    between two blocks, where the document holds no text position for an ordinary one.
    It is what a press beside an island lands, so it is drawn in the surface's ink
    rather than the upstream sheet's `black`, which is the `#8cf` defect again. */
@@ -47,14 +47,28 @@ li.ProseMirror-selectednode::after {
 }
 
 /* One rhythm between sibling blocks, in place of the UA's collapsed pair. Scoped by
-   PARENT rather than by tag, which is what keeps it true as the schema grows: the
-   four containers below are every node whose content is `block+` (`schema.ts`), so
+   parent rather than by tag, which is what keeps it true as the schema grows: the
+   containers below are every node whose content is `block+` (`schema.ts`), so
    their children are blocks by definition, whatever kinds exist. `ul`/`ol` are
    deliberately absent: a run of list items is tight, and the gap before a list is
-   the list's, not each item's. */
+   the list's, not each item's.
+
+   An item is the exception to its own container. A list nested under an item is
+   part of the run that omission already keeps tight — `a. …` under `1. …` is the
+   next line of one list, not a new block after a paragraph — so an item's children
+   take the gap only up to the point where one of them is a list. Written as its own
+   arm rather than as a `:not()` over the shared one, because the exception is the
+   item's: a list after a paragraph inside a blockquote is an ordinary sibling pair
+   and keeps the gap.
+
+   A line box is ~22px at the paper size and the body leading, so the rung is a
+   little over half a line: enough that a break reads as a break, short of the full
+   blank line that doubles the leading and makes a short document read as a list of
+   fragments. */
 .ProseMirror > * + *,
-.ProseMirror :is(blockquote, li, [data-qm-unknown-container]) > * + * {
-	margin-top: var(--_qm-space-4);
+.ProseMirror :is(blockquote, [data-qm-unknown-container]) > * + *,
+.ProseMirror li > * + :not(ul, ol) {
+	margin-top: var(--_qm-space-3);
 }
 
 /* A blockquote's UA indent was its only mark, and the reset above takes it. The rule
@@ -70,18 +84,18 @@ li.ProseMirror-selectednode::after {
    emits, minus the four the UA already renders correctly (`strong`, `em`, `u`, `s`)
    and the blockquote above.
 
-   Each rule answers to the REFERENCE QUILL rather than to a browser default or to a
+   Each rule answers to the reference quill rather than to a browser default or to a
    web editor's chrome, because the leaf sits beside a live preview of the same
    content. `usaf_memo` sets `raw` in a monospace face and adds nothing; it renders a
-   heading as a bold RUN-IN prepended to the following paragraph, with the level
-   never read; it gives a link no decoration at all. So a leaf shows that a span IS
-   code and a line IS a heading: never a prediction of the size paper will set it
+   heading as a bold run-in prepended to the following paragraph, with the level
+   never read; it gives a link no decoration at all. So a leaf shows that a span is
+   code and a line is a heading: never a prediction of the size paper will set it
    at, which the package cannot know for a quill it has not seen.
 
-   Scoping is by TAG, and the schema does the rest: `h1`–`h6`, `hr` and the lists
+   Scoping is by tag, and the schema does the rest: `h1`–`h6`, `hr` and the lists
    cannot exist under the inline schema, so no rule for them can land on a `subject`
-   field however that field is mounted. The two MARKS are the exception: `code` and
-   `link` are in both schemas, and a `plaintext` leaf strips them at DECODE while
+   field however that field is mounted. The two marks are the exception: `code` and
+   `link` are in both schemas, and a `plaintext` leaf strips them at decode while
    mounting a schema that still carries them, so a paste can put either in one. The
    rules stand there too, and correctly: they say the leaf holds code, or a link,
    which is exactly what it then holds.
@@ -89,28 +103,39 @@ li.ProseMirror-selectednode::after {
    `visual/TipsCard.svelte` restates the two mark rules by hand, over the same
    `toDOM` output injected outside any view. */
 
-/* Code is a FACE: no chip, no fill, no inset, no size step. The blockquote above
+/* Code is a face: no chip, no fill, no inset, no size step. The blockquote above
    already argues the general form: a span reads as set apart without a fill or a
    second box, on the one surface in the card with no edge of its own. A chip has
-   nowhere to come from in any case: the card is
-   `--_qm-surface-raised` and the only rung over it is `--_qm-surface-hover`, the
-   hover lane, so a chip at rest would read as a hovered button.
-
-   ONE selector for the mark and the block: a `code_block` renders `pre > code`
-   (`schema.ts`), so every character of it is inside a `code` element and the `pre`
-   needs no face of its own. `pre` takes no `overflow-x` either, because there is no
-   overflow: ProseMirror's own stylesheet sets `white-space: pre-wrap` there, so a
-   long line wraps. A scroller means overriding that to `pre` inside an editable
-   `code` textblock, which is an editing change, not a display rule. */
-.ProseMirror code {
+   nowhere to come from in any case: the body sits at `--_qm-surface` and the rungs
+   either side of it are the field well and the hover lane, so a chip at rest would
+   read as a hole in the paper or as a hovered button.
+
+   The withheld properties are declared at their zero, which is what makes the
+   paragraph above true of a mounted leaf: a chip on these tags is an ordinary page
+   rule, so left off, these are the two tags the host draws rather than the surface.
+   The other marks are ink, weight and decoration, which the leaf sets or safely
+   inherits, so the box is this mark's alone and the zeros are not a reset.
+
+   Both tags, where the face alone needs only one: a `code_block` renders `pre > code`
+   (`schema.ts`), so every character is inside a `code` element and the face reaches it
+   there — but the block's box is the `pre`, outside that element and styled by the
+   host on its own. `pre` still takes no `overflow-x`, because there is no overflow:
+   ProseMirror's own stylesheet sets `white-space: pre-wrap` there, so a long line
+   wraps. A scroller means overriding that to `pre` inside an editable `code`
+   textblock, which is an editing change, not a display rule. */
+.ProseMirror :is(code, pre) {
 	font-family: var(--_qm-font-mono);
+	padding: 0;
+	border-radius: 0;
+	background: none;
+	font-size: inherit;
 }
 
 /* A link takes the surface's ink (the UA's blue is the `#8cf` defect again) and a
-   DOTTED underline. Dotted rather than solid because `underline` is a mark in the
+   dotted underline. Dotted rather than solid because `underline` is a mark in the
    same schema, and a solid rule renders an authored `<u>` and a link identically in a
    paragraph that can hold both. An underline at all, where the tips card's link takes
-   none, because this leaf is EDITABLE: the `href` is otherwise imperceptible, so
+   none, because this leaf is editable: the `href` is otherwise imperceptible, so
    removing the rule loses an answer rather than ornament. No hue:
    `--_qm-accent` already means focus, and a body of accent-coloured links collides
    with the ring and with the correlation wash. */
@@ -128,74 +153,107 @@ li.ProseMirror-selectednode::after {
 }
 
 /* The UA's 40px list indent is the one box the reset above does not take (it is
-   padding, not margin), and it is a length nothing chose. A rung replaces it. The
-   MARKERS stay the UA's: `disc` and `decimal` are already right, and restating them
-   buys nothing. Per-item spacing is untouched, which is the point of putting this on
-   the list rather than the item: the sibling-gap rule deliberately omits `ul`/`ol`,
-   and padding on the container cannot reintroduce what it withholds. */
+   padding, not margin), and it is a length nothing chose. A rung replaces it.
+   Per-item spacing is untouched, which is the point of putting this on the list
+   rather than the item: the sibling-gap rule deliberately omits `ul`/`ol`, and
+   padding on the container cannot reintroduce what it withholds.
+
+   The markers are the UA's, reclaimed rather than inherited. `disc` and `decimal`
+   are right and this restates neither: a host reset (Tailwind's preflight sets
+   `list-style: none` on `ol, ul, menu`) is the common case, and against one an
+   unstated default is no default at all — bullets and numbers vanish from the leaf
+   while the preview beside it still draws them, which is an editor/paper
+   divergence on the plainest formatting there is. `revert` over a named type
+   because the UA's markers step by depth (disc, circle, square) and the schema
+   nests (`lists.ts`: Tab sinks an item); naming `disc` would flatten that ramp to
+   hold the first level. Same reclaim for `strong`/`em`/`u`/`s` above if a reset
+   that takes those ever turns up: the positive half states what it leaves to the
+   UA, and what a reset takes is what has to be asked back. */
 .ProseMirror :is(ul, ol) {
 	padding-left: var(--_qm-space-4);
+	list-style: revert;
 }
 
 /* Six levels, one weight, no size step. The quill reads no level at all, so a size
    ramp here would be the editor predicting a hierarchy the paper does not set; the
    level stays in the model, which is where the codec round-trips it. It is also all
-   the ramp could carry: `--_qm-text-title` is one 1.125 step over the body, the
-   body sits on `--_qm-text-body` by decision, and leading alone is what separates
-   paper from chrome. Six levels do not fit in one step, and
+   the ramp could carry: this leaf renders at `--_qm-text-paper` and the next rung up
+   is `--_qm-text-title`, a chrome rung a heading inside a document has no business
+   reading. Six levels do not fit in the gap, and
    minting five more is the drift the scale exists to prevent. */
 .ProseMirror :is(h1, h2, h3, h4, h5, h6) {
 	font-size: inherit;
-	font-weight: var(--_qm-weight-label);
+	font-weight: var(--_qm-weight-strong);
 }
 
 /* ── The table island ────────────────────────────────────────────────────────
 
-   The one construct in this file with CHROME in it. The rest of the stylesheet
+   The one construct in this file with chrome in it. The rest of the stylesheet
    states what a block is and lets paper set its size; a table island is edited
-   through controls that do not print, so it also has a recede ladder, a target
-   floor and a reveal. Those live here rather than in `visual/controls.css` for the
-   same reason the NodeView is vanilla: the island is inside the leaf, and the leaf
-   is the codec's. What it does NOT restate is the surface's dials: every value
-   below is a `--_qm-*` rung, so the island retints with everything else.
-
-   THE CHROME IS IN NO TRACK. Every control is absolutely positioned inside a real
-   data cell, hanging into a band the scroller carries as PADDING. So the grid holds
-   the box a paragraph would, the accessibility tree is the data's shape, and a
-   handle still lines up with its line by CONSTRUCTION rather than by a measured
-   overlay: it is inside the cell it names. */
-
-/* The band, and the whole of what it costs. `padding` opens it; the island's
-   negative `margin` spends the card's own inset buying it back, so the grid sits one
+   through controls that do not print, so it also has a target floor and a reveal.
+   Those live here rather than in `visual/controls.css` for the same reason the
+   NodeView is vanilla: the island is inside the leaf, and the leaf is the codec's.
+   What it does not restate is the surface's dials: every value below is a `--_qm-*`
+   rung, so the island retints with everything else.
+
+   The band is in no track. Every control in it is absolutely positioned inside a real
+   data cell or against the grid's frame, hanging into a band the scroller carries as
+   padding. So the grid holds the box a paragraph would, the accessibility tree is the
+   data's shape, and a grip still lines up with its line by construction rather than by
+   a measured overlay: it is inside the cell it names.
+
+   Each control comes up alone. A grip or a bar is drawn while the pointer is on that
+   control, while it holds the focus, or while it is the one the gesture is about — a
+   selected line, a lifted one. The target is there the whole time either way, an
+   invisible button being hit-tested like any other, so what the reveal decides is what
+   the table looks like under a passing pointer, not what it answers to. */
+
+/* The band, and the whole of what it costs. `padding` opens it on all four sides,
+   because each axis begins with a grip and ends with an add bar; the island's negative
+   `margin` spends the card's own inset buying the left one back, so the grid sits one
    inset from the prose edge instead of a tap target plus one.
 
    `margin-top: 0` overrides the sibling-gap rule rather than going negative: the band
-   ABSORBS the gap. A negative top margin would hang the band over the block above,
-   and an `opacity: 0` control is still hit-tested, so it would take that block's last
-   presses. */
-.qm-table-island {
+   absorbs the gap, at both ends. A negative margin would hang the band over the
+   neighbouring block, and an `opacity: 0` control is still hit-tested, so it would take
+   that block's presses. The `.ProseMirror` qualifier is what makes the override hold
+   wherever the island lands: two of the gap rule's arms name a container, so a bare
+   class loses to them for an island inside a list item or a quote, both of which the
+   schema admits. */
+.ProseMirror .qm-table-island {
 	margin-top: 0;
 	margin-left: calc(var(--_qm-space-3) * -1);
 }
+.ProseMirror > .qm-table-island + * {
+	margin-top: 0;
+}
 .qm-table-scroller {
 	/* The one horizontally scrolling box in a leaf: a table is as wide as its
 	   columns, and a wide one must not push the card's own layout. `overflow-y` is
 	   `hidden` rather than left alone, because a non-`visible` axis computes the other
 	   to `auto` and a table has nothing to scroll vertically. */
-	position: relative;
 	overflow-x: auto;
 	overflow-y: hidden;
-	padding: var(--_qm-tap-min) 0 0 var(--_qm-tap-min);
+	padding: var(--_qm-tap-min);
 	width: max-content;
 	max-width: 100%;
 }
+/* The containing block for everything out of flow, and the reason it exists rather
+   than the scroller serving: an absolute inside a scroll container is placed against a
+   padding box the scroll then slides out from under it, so a cap pinned to the grid's
+   far end would drift into the middle of a scrolled table. The frame is the grid's own
+   box and travels with it. */
+.qm-table-frame {
+	position: relative;
+	width: max-content;
+}
 .qm-table {
 	border-collapse: separate;
 	border-spacing: 0;
 	border: var(--_qm-border-width) solid var(--_qm-border);
 	border-radius: var(--_qm-radius-inner);
 }
-/* Two tiers of rule, because a table draws two different things. The FRAME and the
+/* Two tiers of rule, because a table draws two different things. The frame and the
    header's rule are structure and keep the full hairline; the lines between cells are
    rhythm and drop to the faint rung, so the grid reads as one object with divisions
    rather than as a stack of boxes. `separate` with zero spacing rather than
@@ -216,20 +274,21 @@ li.ProseMirror-selectednode::after {
 .qm-table tbody tr:last-child > .qm-table-cell {
 	border-bottom: none;
 }
-/* The header row is the ONE weight distinction the island draws: `header` is a
+/* The header row is the one weight distinction the island draws: `header` is a
    separate field in the model rather than a flag on a row, so the surface says so.
-   It takes a tone with it, which is the same elevation move the cards make: a rung,
-   never a shadow. The rest of a table's type is paper's. */
+   It takes a tone with it, which is the same move a field makes: the well rung, a
+   band cut into the paper rather than a layer stacked on it, and a rung either way
+   rather than a shadow. The rest of a table's type is paper's. */
 .qm-table-header-row .qm-table-cell {
-	font-weight: var(--_qm-weight-label);
-	background: var(--_qm-surface-raised);
+	font-weight: var(--_qm-weight-strong);
+	background: var(--_qm-surface-well);
 	border-bottom: var(--_qm-border-width) solid var(--_qm-border);
 }
 /* A cell holds a whole nested view. Its measure floor keeps an empty table from
    collapsing to a row of hairlines with nothing to aim at, and the caret is the
    focus indicator here exactly as it is in the leaf: no ring.
 
-   The HEIGHT floor is one line box, named as size times leading so both factors move
+   The height floor is one line box, named as size times leading so both factors move
    with the type ramp (`.qm-prose-block` states the same expression for three). An
    empty row is then the height it will be once typed, so the first keystroke changes
    no geometry. */
@@ -241,201 +300,180 @@ li.ProseMirror-selectednode::after {
 	outline: none;
 }
 /* A selected island takes the node outline every leaf block does
-   (`.ProseMirror-selectednode`, above), and that is the state the corner and Escape
-   leave a line FOR: the caret is out, the island is what is selected, and Backspace
-   deletes it. A caret inside a cell is not that state and does not paint it. */
-
-/* A SELECTED LINE, washed across its cells: what Backspace deletes and Alt+arrow
-   moves. The hover rung, because it makes a hover's claim (this line, the one the next
-   command is about) held rather than passing. */
-.qm-table-cell.qm-table-line {
-	background: var(--_qm-surface-hover);
-}
-
-/* Every control in the band is a flat centred button hung out of flow; what differs
-   is where it hangs and what it draws. */
-:is(.qm-table-handle, .qm-table-seam, .qm-table-align-item) {
+   (`.ProseMirror-selectednode`, above), and that is the state Escape leaves a cell or a
+   line for: the caret is out, the island is what is selected, and Backspace deletes it.
+   A caret inside a cell is not that state and does not paint it. */
+
+/* The selection, washed across the cells it covers: what Backspace acts on, and the
+   only thing on the island that says what the next command is about. The accent held,
+   not the hover rung: a hover is what the pointer is passing over and a selection is
+   what the next command will act on, and two states one tone apart on the same surface
+   ladder read as the same state at a glance. Translucent, so a selected header cell
+   keeps its raised tone under the tint instead of trading it away.
+
+   One attribute for both gestures, because there is one selection: a grip draws the
+   rectangle covering its line and a sweep draws the block the pointer crossed, and the
+   wash cannot tell them apart because nothing downstream needs to. */
+.qm-table-cell[data-selected] {
+	background: var(--_qm-accent-tint);
+}
+
+/* ── The band ────────────────────────────────────────────────────────────────
+   Two control families, one geometry: absolutely positioned out of the grid, a
+   `--_qm-tap-min` target whatever is drawn inside it, and no box of their own at rest.
+   What differs is which edge each hangs off and what it draws. The grips take the
+   leading edges, where a line begins; the add bars take the trailing ones, past where
+   the axis ends. Position is the whole of what says which is which: the grip's marks are
+   the only glyph on the island, and they say draggable rather than which control this
+   is. */
+:is(.qm-table-grip, .qm-table-add) {
+	position: absolute;
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	padding: 0;
 	border: none;
 	background: none;
+	color: var(--_qm-ink);
 	cursor: pointer;
 }
-:is(.qm-table-seam, .qm-table-align-item) svg {
-	width: var(--_qm-glyph-control);
-	height: var(--_qm-glyph-control);
-}
-
-/* ONE control per line, and it is a bar rather than a glyph: what a handle acts on
-   is the row or column it sits against, and position says that better than an icon
-   would.
+/* The bar every one of them draws: a pill the length of what it acts on, a rhythm rung
+   thick where the target is the tap floor. Stated once, so a grip and an add bar cannot
+   drift into two shapes.
 
-   The TARGET is the band and the MARK is drawn small inside it, which is the rule
-   the tips card's dots already state: the handle spans its line on one axis and the
-   tap minimum on the other, and the bar in the middle of it is 3px. A handle sized to
-   the bar would be a 3px target on a control a pointer has to find. */
-.qm-table-handle {
-	position: absolute;
-	padding: var(--_qm-space-half);
-	/* The pointer owns this gesture, not the page's scroll: a handle drags. */
-	touch-action: none;
-}
-.qm-table-handle[data-axis='column'] {
-	inset-inline: 0;
-	bottom: 100%;
-	height: var(--_qm-tap-min);
-}
-.qm-table-handle[data-axis='row'] {
-	inset-block: 0;
-	right: 100%;
-	width: var(--_qm-tap-min);
-}
-.qm-table-handle-bar {
-	display: block;
+   One tone, not a hover ladder: the control is drawn only while it is the one the
+   pointer is on or the one a gesture is about, so a resting tone under that would be a
+   rung nothing ever reaches. The selected grip's tint below is the one exception, and it
+   says which line the next command acts on rather than where the pointer is. */
+:is(.qm-table-grip-bar, .qm-table-add-bar) {
+	display: flex;
+	align-items: center;
+	justify-content: center;
 	border-radius: var(--_qm-radius-pill);
 	background: var(--_qm-border);
-}
-.qm-table-handle[data-axis='column'] .qm-table-handle-bar {
+	transition:
+		background-color var(--_qm-duration-fast) var(--_qm-ease-reverse),
+		color var(--_qm-duration-fast) var(--_qm-ease-reverse);
+}
+/* The glyph is square and the bar is not: the marks sit in the bar's thickness and the
+   bar's length is its line's, so the frame is sized off the one axis both share. */
+.qm-table-grip-bar svg {
+	width: var(--_qm-space-3);
+	height: var(--_qm-space-3);
+}
+/* A grip runs along the line it names; an add bar runs across the axis it appends to.
+   So the two families map one `data-axis` onto opposite orientations, and orientation
+   is the one thing the rule above cannot share with them: a column's grip is as wide as
+   its column, and the bar that adds a column is as tall as the table. */
+.qm-table-grip[data-axis='column'] .qm-table-grip-bar,
+.qm-table-add[data-axis='row'] .qm-table-add-bar {
 	width: 100%;
-	height: 0.1875rem;
+	height: var(--_qm-space-3);
 }
-.qm-table-handle[data-axis='row'] .qm-table-handle-bar {
-	width: 0.1875rem;
+.qm-table-grip[data-axis='row'] .qm-table-grip-bar,
+.qm-table-add[data-axis='column'] .qm-table-add-bar {
+	width: var(--_qm-space-3);
 	height: 100%;
-	min-height: 0.75rem;
-}
-/* A selected handle carries the line's ink, so the bar and the wash say the same
-   thing at both ends of the gesture. */
-.qm-table-handle[aria-pressed='true'] .qm-table-handle-bar {
-	background: var(--_qm-ink-label);
-}
-
-/* The corner is the ISLAND's handle: the grid origin, where the two bands converge,
-   and the one gesture that selects the whole table. Its mark is a square because what
-   it acts on is the rectangle and not a line of it. */
-.qm-table-corner-handle {
-	right: 100%;
-	bottom: 100%;
-	width: var(--_qm-tap-min);
-	height: var(--_qm-tap-min);
-}
-.qm-table-corner-mark {
-	display: block;
-	width: 0.4375rem;
-	height: 0.4375rem;
-	border-radius: var(--_qm-radius-pill);
-	background: var(--_qm-border);
 }
 
-/* A SEAM: the boundary between two lines, and the whole of how a table grows. One per
-   boundary including the leading and trailing ones, so an append and an interior
-   insert are one gesture at different places.
+/* One grip per line, and it is a bar rather than a glyph: what a grip acts on is the
+   row or column it sits against, and spanning that line says so better than an icon
+   could. The bar carries the grip's own marks — two rows of three, the shape a thing
+   you can pick up has everywhere else — so the control reads as draggable before it is
+   dragged.
 
-   It sits OVER the handles in the band, and it is narrow, so the two share the band
-   without a dead zone: the handle owns the line's length and the seam owns its ends. */
-.qm-table-seam {
-	position: absolute;
-	z-index: 1;
-	width: var(--_qm-tap-min);
-	height: var(--_qm-tap-min);
-	border-radius: var(--_qm-radius-pill);
-	color: var(--_qm-accent);
+   The target is the band and the bar is drawn inside it: a grip spans its line on one
+   axis and the tap floor on the other, and the bar is drawn thinner inside that. A grip
+   sized to its own bar would be a target the thickness of the mark on it, on a control
+   the pointer has to find. */
+.qm-table-grip {
+	/* The pointer owns this gesture, not the page's scroll: a grip drags. */
+	touch-action: none;
 }
-.qm-table-seam[data-axis='column'] {
+.qm-table-grip[data-axis='column'] {
+	inset-inline: 0;
 	bottom: 100%;
-	left: calc(var(--_qm-tap-min) / -2);
-}
-/* The TRAILING seams sit flush inside their edge rather than centred on it: the last
-   boundary is the grid's own edge, and a seam centred on it would hang half outside
-   the scroller, where the padding does not reach and the clip does, making the append
-   affordance the one control that could not be pressed. */
-.qm-table-seam[data-axis='column'][data-side='trail'] {
-	left: auto;
-	right: 0;
+	height: var(--_qm-tap-min);
 }
-.qm-table-seam[data-axis='row'] {
+.qm-table-grip[data-axis='row'] {
+	inset-block: 0;
 	right: 100%;
-	top: calc(var(--_qm-tap-min) / -2);
+	width: var(--_qm-tap-min);
 }
-.qm-table-seam[data-axis='row'][data-side='trail'] {
-	top: auto;
-	bottom: 0;
+/* A selected grip takes the line's own tint and the accent for its marks, so the bar
+   and the wash say the same thing at both ends of the gesture. */
+.qm-table-grip[aria-pressed='true'] .qm-table-grip-bar {
+	background: var(--_qm-accent-tint);
+	color: var(--_qm-accent);
 }
 
-/* The alignment cluster: the one op with no gesture, so the one surface the chrome
-   still raises. It rides the column's SELECTION rather than a hover, so it costs
-   nothing at rest, and it sits in the band beside the handle rather than portalled:
-   four glyphs in a row is not a list to read. */
-.qm-table-align {
-	position: absolute;
-	z-index: 2;
-	display: flex;
-	bottom: 100%;
-	left: 0;
-	height: var(--_qm-tap-min);
-	background: var(--_qm-surface-raised);
-	border: var(--_qm-border-width) solid var(--_qm-border);
-	border-radius: var(--_qm-radius-pill);
-}
-/* The LAST column anchors right instead: a cluster is wider than a narrow column, and
-   one hung off the right edge would be the only chrome the scroller could clip. */
-.qm-table-cell:last-child .qm-table-align {
-	left: auto;
-	right: 0;
-}
-.qm-table-align-item {
+/* The add bars: one along each trailing edge, spanning it. A bar rather than a button
+   at the end of the band, because what it appends to is the axis and not a line — there
+   is no line out past the last one to sit against, and the whole edge is the easiest
+   target on the island to hit. They are the grips' mirror in every way but the edge and
+   the marks, which is what makes a bar out there read as one more of these rather than
+   as a control of its own: an empty bar past the last line is the table's own shape,
+   offered one line further on. */
+.qm-table-add[data-axis='column'] {
+	inset-block: 0;
+	left: 100%;
 	width: var(--_qm-tap-min);
-	height: 100%;
-	padding: 0;
-	border-radius: var(--_qm-radius-pill);
-	color: var(--_qm-ink-label);
 }
-.qm-table-align-item:hover {
-	background: var(--_qm-surface-hover);
-	color: var(--_qm-ink);
-}
-.qm-table-align-item[aria-pressed='true'] {
-	color: var(--_qm-accent);
+.qm-table-add[data-axis='row'] {
+	inset-inline: 0;
+	top: 100%;
+	height: var(--_qm-tap-min);
 }
-
-/* Pointer OR focus, the card stack's rule unchanged: opacity rather than absence, so
-   the controls stay in the tab order, and `:focus-within` on the ISLAND, so a caret
-   in a cell holds the reveal as a focused control does.
-
-   The reveal is per LINE: the island's hover arms the band, and `qm-hot` (the line the
-   pointer is actually over) is what reaches the idle rung, so a hover answers about
-   one line rather than about every one at once. */
-.qm-table-handle,
-.qm-table-seam {
+/* The reveal, in two rungs, one per question (CODEC §"The table island"). The band comes
+   up muted while the pointer is anywhere on the island, answering whether there is one at
+   all; a control raises to full while the pointer is on it, while it holds the focus, or
+   while it is what a gesture is about — the selected line's grip, and the lifted one,
+   which is drawn through a drag the pointer has travelled off — answering which line.
+
+   Opacity rather than absence, so every control keeps its box and is hit-tested wherever
+   it sits. A grip's reach is the pointer's — no Tab arrives at one, the cell traversal
+   claiming the key first (`table-view.ts` §`step`) — so it is out of the tab order, and
+   the focus rung there draws the focus the view takes itself. The two bars are in it, the
+   Tab that declines off the last cell landing on them, and the same rung is what draws
+   one a keyboard has reached. */
+:is(.qm-table-grip, .qm-table-add) {
 	opacity: 0;
 	transition: opacity var(--_qm-duration-fast) var(--_qm-ease-reverse);
 }
-.qm-table-island:is(:hover, :focus-within)
-	:is(.qm-table-handle.qm-hot, .qm-table-corner-handle, .qm-table-seam) {
-	opacity: var(--_qm-opacity-idle);
+/* `:where` on the island, so the first rung carries the specificity of the control alone
+   and the second one outranks it. Unwrapped, the descendant selector is the heavier of
+   the two and a hovered grip stays muted under the pointer that is on it. */
+:where(.qm-table-island:hover) :is(.qm-table-grip, .qm-table-add) {
+	opacity: var(--_qm-opacity-muted);
 }
-.qm-table-handle:hover,
-.qm-table-handle:focus-visible,
-.qm-table-handle[aria-pressed='true'],
-.qm-table-seam:hover,
-.qm-table-seam:focus-visible {
+:is(.qm-table-grip, .qm-table-add):is(:hover, :focus-visible),
+.qm-table-grip:is([aria-pressed='true'], .qm-table-lifted) {
 	opacity: 1;
 }
 
-/* The ring, on the chrome and nowhere else in this file. A prose leaf's focus
-   indicator is its CARET and a cell's is too, so the outline is dropped there; a
-   handle is a button, and a button that takes focus to hold a selection has to show
-   it. Declared here rather than reached for as `.qm-focus-ring`: that recipe is the
-   visual tier's stylesheet, and the island is inside the leaf, which is the codec's. */
-.qm-table-handle:focus-visible,
-.qm-table-seam:focus-visible,
-.qm-table-align-item:focus-visible {
-	outline: var(--_qm-ring-focus);
+/* The ring, on the chrome and nowhere else in this file. A prose leaf's focus indicator
+   is its caret and a cell's is too, so the outline is dropped there; a control that comes
+   up out of nothing has the reveal, and a ring under a keyboard is what says the focus is
+   there rather than on the paper behind it. Declared here rather than reached for as
+   `.qm-focus-ring`: that recipe is the visual tier's stylesheet, and the island is inside
+   the leaf, which is the codec's.
+
+   A selected grip takes none. Focus and selection arrive together there — the grip takes
+   the focus because the selection's keys bind on it — and the tint plus the wash already
+   say where the next command lands. A ring on top is a second box around the loudest
+   thing on the island, drawn on the press that made the selection: a pointer gesture
+   answering with a keyboard's indicator. Stated as `none` rather than left unset, because
+   what fills the gap is the browser's own ring, which is the same box in a colour the
+   surface does not own. */
+:is(.qm-table-grip, .qm-table-add):focus-visible {
+	outline: var(--_qm-ring);
 	outline-offset: var(--_qm-ring-offset);
 }
+.qm-table-grip[aria-pressed='true']:focus-visible {
+	outline: none;
+}
 
-/* A DRAG in flight. The lifted line reads as picked up by TONE, never a shadow:
+/* A drag in flight. The lifted line reads as picked up by tone, never a shadow:
    elevation is a surface rung here, which says the same thing at both poles. The drop
    rule is the accent, the surface's one saturated ink, spent where a change is about
    to land. */