@tensor_1/tokens 2.17.0 → 2.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/tokens",
-  "version": "2.17.0",
+  "version": "2.19.0",
   "description": "UIx v2 design tokens — the --uix-* contract for house products (Tensor, POSx, SHOPx). One DTCG source -> CSS variables, Tailwind theme, and typed TS constants.",
   "type": "module",
   "sideEffects": [

package/styles/components/comments.css

@@ -6,6 +6,18 @@
   .uix-comment__meta { font-size: var(--uix-text-meta); color: var(--uix-text-muted); margin-bottom: var(--uix-space-1); }
   .uix-comment__author { font-weight: 600; color: var(--uix-text); }
   .uix-mention { color: var(--uix-link); background: var(--uix-brand-muted); padding: 0 var(--uix-space-1); border-radius: var(--uix-radius-xs); font-weight: 500; }
+
+  /* System events (status changed, assigned) are chrome, not speech: no bubble, muted meta
+     size, so a thread reads as people talking with the product's record in between. */
+  .uix-comment--system .uix-comment__body { background: transparent; border: 0; padding: 0 var(--uix-space-3); color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
+  .uix-comment--system .uix-comment__meta { margin-bottom: 0; }
+  .uix-comment--system .uix-comment__author { font-weight: 500; color: var(--uix-text-muted); }
+
+  /* Reply quote: the answered message, above the answer. Two lines at most — it is a
+     pointer back, not a copy — with a rule so it never reads as part of the reply. */
+  .uix-comment__reply { margin: 0 0 var(--uix-space-2); padding: var(--uix-space-1) var(--uix-space-2); border-left: 2px solid var(--uix-border-strong); color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
+  .uix-comment__reply-label { display: block; color: var(--uix-text-hushed); font-size: var(--uix-text-eyebrow); }
+  .uix-comment__reply-body { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
   .uix-composer { border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface); }
   .uix-composer:focus-within { border-color: var(--uix-ring); box-shadow: 0 0 0 3px var(--uix-brand-muted); }
   .uix-composer textarea { width: 100%; border: 0; background: transparent; resize: vertical; padding: var(--uix-space-3) var(--uix-space-3); color: var(--uix-text); font: inherit; min-height: 60px; }

package/styles/components/editorial-home.css

@@ -23,8 +23,14 @@
   .uix-searchbar__wrap { position: relative; }
   .uix-searchbar__wrap > svg { position: absolute; top: 50%; left: 14px; z-index: var(--uix-z-raised); width: 17px; height: 17px; color: var(--uix-text-hushed); transform: translateY(-50%); pointer-events: none; }
 
-  .uix-shortcut-grid { grid-column: 1 / -1; margin-top: var(--uix-space-4); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--uix-space-2); }
-  .uix-shortcut-grid .uix-btn { min-height: 42px; justify-content: flex-start; }
+  /* The grid fits ITSELF rather than counting columns: a fixed count is only safe for label
+     lengths you already know, and `1fr` takes an auto minimum, so nowrap button labels push
+     the track past the viewport (LD-11: 382 px of content at 320 px on the German portal).
+     `min(100%, 12rem)` lets the track shrink to the container on a phone — one full-width
+     column — while 12rem keeps a sensible shortcut width on a desktop. Labels wrap, which
+     is why the track can shrink at all: .uix-btn is nowrap by design. */
+  .uix-shortcut-grid { grid-column: 1 / -1; margin-top: var(--uix-space-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--uix-space-2); }
+  .uix-shortcut-grid .uix-btn { min-height: 42px; justify-content: flex-start; white-space: normal; overflow-wrap: anywhere; text-align: left; }
 
   /* ── notice queue — rotating "important updates" banner ────────────────────── */
   .uix-notice { min-height: 48px; padding: var(--uix-space-2) var(--uix-space-4); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--uix-space-3); border-left: 2px solid var(--uix-text); background: var(--uix-bg-subtle); }
@@ -153,7 +159,6 @@
     /* stacked zones: the caret flips to point up at the stage above */
     .uix-rundown__item[data-selected="true"]::before { top: -23px; left: 22px; transform: rotate(45deg); border-bottom: 0; border-top: 1px solid var(--uix-border-strong); }
 
-    .uix-shortcut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   }
 
   @media (max-width: 620px) {
@@ -174,7 +179,8 @@
     .uix-searchbar { grid-template-columns: 1fr; }
 
     .uix-page-intro { margin-top: var(--uix-space-5); gap: var(--uix-space-5); }
-    .uix-shortcut-grid { grid-template-columns: 1fr 1fr; }
+    /* auto-fit already narrows the tracks; only the touch target grows here. Re-pinning a
+       column count would reintroduce LD-11. */
     .uix-shortcut-grid .uix-btn { min-height: 48px; }
 
     .uix-story-signal { top: 20px; left: 20px; }

package/styles/components/link.css

@@ -34,7 +34,7 @@
  *   • .uix-navitem, .uix-breadcrumbs a, .uix-section-link are already quiet by their own
  *     design and need no class here.
  *
- * Four forms:
+ * Five forms:
  *   1 · `.uix-link--quiet` — the opt-in utility, for block links outside the registry.
  *   2 · TITLE / NAME SLOTS — quiet by default. `:not(.uix-btn)` so an anchor deliberately
  *       styled as a button inside a title slot keeps its button treatment.
@@ -43,9 +43,14 @@
  *       links skip the hover underline too — see table.css (the row hover is the cue).
  *   4 · CONTAINER ANCHORS — the anchor IS the kit block (`<a class="uix-card">`). Without
  *       this the base `a { color }` tints every word in the block brand-blue.
+ *   5 · `.uix-cell-link` — a data cell's whole value, when the framework <Link> carries a
+ *       class so form 3's `:not([class])` cannot reach it. Quiet at REST as well: form 3
+ *       and table.css calm only the hover, so such links flipped from brand-blue to text
+ *       colour under the pointer (LD-06/CM-45). Row tint + focus ring are the cues.
  * Depends only on --uix-* tokens. */
 @layer uix.components {
   .uix-link--quiet,
+  .uix-cell-link,
 
   /* 2 · title / name slots */
   :is(
@@ -83,6 +88,11 @@
   /* body-row links are excluded: table.css keeps them calm on hover (the row tint is the cue) */
   :is(.uix-table :is(thead, tfoot) td, .uix-dl dd) a:not([class]):is(:hover, :focus-visible) { text-decoration: underline; }
 
+  /* Form 5 states its hover/focus rather than relying on no rule matching, so the contract
+     is written down. base.css supplies the ring; the radius keeps it hugging the text. */
+  .uix-cell-link:is(:hover, :focus-visible) { color: inherit; text-decoration: none; }
+  .uix-cell-link:focus-visible { border-radius: var(--uix-radius-xs); }
+
   /* Container anchors never underline: the anchor wraps the whole block, so an underline
      would strike through every word in it. They take the kit's standard row-hover tint
      instead — the same --uix-bg-hover that .uix-list__item / .uix-inbox__item / .uix-cmdk__item

package/styles/components/prose.css

@@ -10,6 +10,31 @@
   .uix-prose li + li { margin-top: var(--uix-space-1); }
   .uix-prose code { font-family: var(--uix-font-mono); font-size: .9em; background: var(--uix-bg-subtle); padding: 1px var(--uix-space-2); border-radius: var(--uix-radius-xs); }
   .uix-prose blockquote { border-left: 3px solid var(--uix-border-strong); padding-left: var(--uix-space-3); color: var(--uix-text-muted); }
+  /* markdown constructs written by the rich-text editor (RTE-01) */
+  .uix-prose h5, .uix-prose h6 { font-size: var(--uix-text-body); font-weight: 600; }
+  .uix-prose ul { list-style: disc; }
+  .uix-prose ol { list-style: decimal; }
+  .uix-prose li > :where(ul, ol) { margin-top: var(--uix-space-1); }
+  .uix-prose del, .uix-prose s { color: var(--uix-text-muted); }
+  .uix-prose pre {
+    overflow-x: auto; padding: var(--uix-space-3); border-radius: var(--uix-radius-md); background: var(--uix-bg-subtle);
+    font-family: var(--uix-font-mono); font-size: var(--uix-text-meta); line-height: var(--uix-leading-body);
+  }
+  .uix-prose pre code { padding: 0; background: none; font-size: inherit; }
+  .uix-prose hr { border: 0; border-top: 1px solid var(--uix-border); }
+  .uix-prose img { max-width: 100%; height: auto; border-radius: var(--uix-radius-sm); vertical-align: middle; }
+  .uix-prose table { border-collapse: collapse; font-size: var(--uix-text-body); }
+  .uix-prose th, .uix-prose td { padding: var(--uix-space-2) var(--uix-space-3); border: 1px solid var(--uix-border); text-align: left; vertical-align: top; }
+  .uix-prose th { background: var(--uix-bg-subtle); color: var(--uix-text); font-weight: 600; }
+  .uix-prose :where(th, td) > p { margin: 0; color: inherit; }
+  .uix-markdown__table { max-width: 100%; overflow-x: auto; border-radius: var(--uix-radius-xs); }
+  .uix-markdown__table:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
+  .uix-prose .uix-markdown__tasks { list-style: none; padding-left: 0; }
+  .uix-markdown__task { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--uix-space-2); align-items: baseline; }
+  .uix-markdown__task > input { margin: 0; accent-color: var(--uix-accent); }
+  .uix-markdown__task > input:disabled { opacity: 1; }
+  .uix-markdown__task > :where(ul, ol) { grid-column: 2; }
+  .uix-markdown__task[data-checked] > span { color: var(--uix-text-muted); }
 
   .uix-note { display: flex; gap: var(--uix-space-3); padding: var(--uix-space-3) var(--uix-space-4); border-radius: var(--uix-radius-md); border: 1px solid var(--uix-border); background: var(--uix-surface); }
   .uix-note__icon { flex: none; }

package/styles/components/reactions.css

@@ -19,4 +19,33 @@
   .uix-emoji-picker { display: flex; flex-wrap: wrap; gap: var(--uix-space-1); width: 196px; }
   .uix-emoji-picker__btn { font-size: 18px; line-height: 1; padding: var(--uix-space-2); border: 0; background: transparent; border-radius: var(--uix-radius-sm); cursor: pointer; }
   .uix-emoji-picker__btn:hover { background: var(--uix-bg-hover); }
+  .uix-emoji-picker__btn:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: -2px; }
+  .uix-reaction:focus-visible, .uix-reaction-add:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
+  .uix-reaction:disabled, .uix-reaction-add:disabled { opacity: .55; cursor: not-allowed; }
+  .uix-reaction > span[aria-hidden] { line-height: inherit; }
+
+  /* full picker (EmojiPicker, RTE-01): search, category jump bar, sectioned 8-column grid */
+  .uix-emoji-picker__anchor { display: inline-flex; }
+  .uix-emoji-picker-popover { padding: var(--uix-space-2); }
+  .uix-emoji-picker--full { display: flex; flex-direction: column; flex-wrap: nowrap; gap: var(--uix-space-2); width: 324px; max-width: calc(100vw - 32px); }
+  .uix-emoji-picker__nav { display: flex; gap: var(--uix-space-0); overflow-x: auto; scrollbar-width: none; }
+  .uix-emoji-picker__nav-btn {
+    flex: none; width: 32px; height: 28px; padding: 0; border: 0; border-radius: var(--uix-radius-sm);
+    background: transparent; font-size: var(--uix-text-body); cursor: pointer;
+  }
+  .uix-emoji-picker__nav-btn:hover { background: var(--uix-bg-hover); }
+  .uix-emoji-picker__nav-btn:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: -2px; }
+  .uix-emoji-picker__grid { height: 264px; overflow-y: auto; overscroll-behavior: contain; scroll-padding-top: var(--uix-space-6); }
+  .uix-emoji-picker__section { content-visibility: auto; contain-intrinsic-size: auto 15rem; }
+  .uix-emoji-picker__heading {
+    position: sticky; top: 0; z-index: var(--uix-z-raised); padding: var(--uix-space-1) var(--uix-space-1);
+    background: var(--uix-surface-2); color: var(--uix-text-muted);
+    font-size: var(--uix-text-eyebrow); font-weight: 600; letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase;
+  }
+  .uix-emoji-picker__cells { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--uix-space-0); }
+  .uix-emoji-picker--full .uix-emoji-picker__btn { display: flex; align-items: center; justify-content: center; padding: var(--uix-space-1); }
+  /* same-origin fallback image for emoji the device cannot draw (emojiImageBaseUrl) */
+  .uix-emoji-img { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.2em; object-fit: contain; }
+  .uix-emoji-picker__status { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
+  .uix-emoji-picker__status:empty { display: none; }
 }

package/styles/components/relationship-graph.css

@@ -18,4 +18,38 @@
   .uix-relationship-graph--compact .uix-relationship-graph__visual,.uix-relationship-graph--compact .uix-relationship-graph__visual svg { min-height:16rem; height:16rem; }
   .uix-relationship-graph--state { padding:var(--uix-space-8); border:1px dashed var(--uix-border-strong); border-radius:var(--uix-radius-lg); }
   @media (max-width:640px) { .uix-relationship-graph__list li { display:grid; } }
+
+  /* Layered mode (ADR-0002): HTML node buttons over an SVG edge layer, one transformed stage. */
+  .uix-relationship-graph--layered .uix-relationship-graph__toolbar button:disabled { opacity:.5; cursor:not-allowed; }
+  .uix-relationship-graph__viewport { position:relative; height:var(--uix-relationship-graph-height, 22rem); overflow:hidden; border:1px solid var(--uix-border); border-radius:var(--uix-radius-lg); background:var(--uix-bg-subtle); cursor:grab; touch-action:pan-y; }
+  .uix-relationship-graph__viewport:active { cursor:grabbing; }
+  .uix-relationship-graph__stage { position:absolute; top:0; left:0; transform-origin:0 0; }
+  .uix-relationship-graph__stage[data-animate] { transition:transform var(--uix-dur) var(--uix-ease-out); }
+  .uix-relationship-graph__edges { position:absolute; top:0; left:0; overflow:visible; pointer-events:none; }
+  .uix-relationship-graph__link path { fill:none; stroke:color-mix(in srgb, var(--uix-text) 28%, transparent); stroke-width:1.5px; }
+  .uix-relationship-graph__link polygon { fill:color-mix(in srgb, var(--uix-text) 45%, transparent); }
+  .uix-relationship-graph__link text { fill:var(--uix-text-muted); font-family:var(--uix-font-sans); font-size:var(--uix-text-eyebrow); paint-order:stroke; stroke:var(--uix-bg-subtle); stroke-width:4px; stroke-linejoin:round; }
+  .uix-relationship-graph__link[data-kind="lateral"] path, .uix-relationship-graph__link[data-kind="cycle"] path { stroke-dasharray:5 4; }
+  .uix-relationship-graph__link[data-emphasis] path { stroke:color-mix(in srgb, var(--uix-text) 55%, transparent); }
+  .uix-relationship-graph__link[data-active] path { stroke:var(--uix-accent); stroke-width:2.5px; }
+  .uix-relationship-graph__link[data-active] polygon { fill:var(--uix-accent); }
+  .uix-relationship-graph__link[data-active] text { fill:var(--uix-text); }
+  .uix-relationship-graph__link[data-conflicted] path { stroke:var(--uix-danger); }
+  .uix-relationship-graph__link[data-dimmed] { opacity:.35; }
+  .uix-relationship-graph__column { position:absolute; top:var(--uix-space-4); overflow:hidden; color:var(--uix-text-muted); font-size:var(--uix-text-meta); white-space:nowrap; text-overflow:ellipsis; text-transform:uppercase; letter-spacing:.04em; pointer-events:none; }
+  .uix-relationship-graph__item { position:absolute; display:flex; flex-direction:column; justify-content:center; gap:var(--uix-space-1); padding:var(--uix-space-2) var(--uix-space-3); border:1px solid var(--uix-border-strong); border-radius:var(--uix-radius-md); background:var(--uix-surface); color:var(--uix-text); font:inherit; text-align:left; cursor:pointer; transition:border-color var(--uix-dur-fast) var(--uix-ease-out), opacity var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-relationship-graph__item:hover { border-color:var(--uix-accent); }
+  .uix-relationship-graph__item:focus-visible { outline:2px solid var(--uix-ring); outline-offset:2px; }
+  .uix-relationship-graph__item[data-root] { border-width:2px; }
+  .uix-relationship-graph__item[data-selected], .uix-relationship-graph__item[data-highlighted] { border-color:var(--uix-accent); background:color-mix(in srgb, var(--uix-accent) 8%, var(--uix-surface)); }
+  .uix-relationship-graph__item[data-conflicted] { border-color:var(--uix-danger); border-style:dashed; }
+  .uix-relationship-graph__item[data-dimmed] { opacity:.45; }
+  .uix-relationship-graph__item[data-kind="cluster"] { border-style:dashed; background:var(--uix-surface-2); }
+  .uix-relationship-graph__item-label { min-width:0; display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow-wrap:anywhere; font-size:var(--uix-text-body); line-height:1.25; }
+  .uix-relationship-graph__item-meta { min-width:0; overflow:hidden; color:var(--uix-text-muted); font-size:var(--uix-text-meta); white-space:nowrap; text-overflow:ellipsis; }
+  .uix-relationship-graph__item-flag { position:absolute; top:-9px; right:var(--uix-space-2); padding:0 var(--uix-space-1); border:1px solid var(--uix-border); border-radius:var(--uix-radius-pill); background:var(--uix-surface); color:var(--uix-text-muted); font-size:var(--uix-text-meta); line-height:1.4; }
+  .uix-relationship-graph__collapse { position:absolute; height:22px; padding:0 var(--uix-space-2); border:1px dashed var(--uix-border-strong); border-radius:var(--uix-radius-pill); background:var(--uix-surface); color:var(--uix-text-muted); font-size:var(--uix-text-meta); cursor:pointer; }
+  .uix-relationship-graph__collapse:focus-visible { outline:2px solid var(--uix-ring); outline-offset:2px; }
+  .uix-relationship-graph--compact .uix-relationship-graph__item { padding:var(--uix-space-1) var(--uix-space-2); }
+  @media (forced-colors: active) { .uix-relationship-graph__link path { stroke:CanvasText; } .uix-relationship-graph__link polygon { fill:CanvasText; } .uix-relationship-graph__item { border-color:ButtonText; } }
 }

package/styles/components/rich-text.css

@@ -0,0 +1,157 @@
+/* uix rich-text editor — markdown editing surface (.uix-prose), a roving-tabindex toolbar that
+   scrolls sideways on narrow screens, source mode, counter/status footer, link popover and the
+   :shortcode emoji list. Composes with .uix-composer for comment boxes. Depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-rich-text {
+    display: flex; flex-direction: column; min-width: 0;
+    border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface);
+    transition: border-color var(--uix-dur-fast) var(--uix-ease-out), box-shadow var(--uix-dur-fast) var(--uix-ease-out);
+  }
+  .uix-rich-text:hover { border-color: var(--uix-border-strong); }
+  .uix-rich-text:focus-within { border-color: var(--uix-ring); box-shadow: 0 0 0 3px var(--uix-brand-muted); }
+  .uix-rich-text[data-invalid] { border-color: var(--uix-danger); }
+  .uix-rich-text[data-invalid]:focus-within { box-shadow: 0 0 0 3px var(--uix-danger-bg); }
+  .uix-rich-text[data-disabled] { opacity: .55; background: var(--uix-bg-subtle); }
+  .uix-rich-text[data-readonly] { background: var(--uix-bg-subtle); }
+  /* The fallback is a bare textarea: the textarea draws the box, not the wrapper. */
+  .uix-rich-text--fallback { border: 0; background: transparent; }
+  .uix-rich-text--fallback:focus-within { box-shadow: none; }
+
+  /* toolbar — one row; scrolls instead of wrapping so a narrow screen never loses a control */
+  .uix-rich-text__toolbar {
+    display: flex; align-items: center; gap: var(--uix-space-1); min-width: 0;
+    padding: var(--uix-space-1) var(--uix-space-2); border-bottom: 1px solid var(--uix-border);
+    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
+    /* size to the container, never to the row of tools (keeps grid/flex parents from widening) */
+    contain: inline-size;
+  }
+  .uix-rich-text__group { display: flex; align-items: center; gap: var(--uix-space-0); flex: none; }
+  .uix-rich-text__group + .uix-rich-text__group { padding-left: var(--uix-space-1); border-left: 1px solid var(--uix-border); }
+  .uix-rich-text__group--end { margin-left: auto; }
+  .uix-rich-text__tool {
+    display: inline-flex; align-items: center; justify-content: center; flex: none;
+    width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--uix-radius-sm);
+    background: transparent; color: var(--uix-text-hushed); cursor: pointer;
+    transition: background-color var(--uix-dur-fast) var(--uix-ease-out), color var(--uix-dur-fast) var(--uix-ease-out);
+  }
+  .uix-rich-text__tool svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
+  .uix-rich-text__tool:hover { background: var(--uix-bg-hover); color: var(--uix-text); }
+  .uix-rich-text__tool:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: -2px; }
+  .uix-rich-text__tool[aria-pressed="true"] { background: var(--uix-brand-muted); color: var(--uix-accent-text); }
+  .uix-rich-text__tool:disabled { opacity: .4; cursor: not-allowed; background: transparent; }
+
+  /* editing surface — .uix-prose supplies the typography */
+  .uix-rich-text__surface { position: relative; display: flex; flex-direction: column; min-width: 0; }
+  .uix-rich-text__editor { display: contents; }
+  .uix-rich-text__content {
+    max-width: none; padding: var(--uix-space-3); outline: none; overflow-wrap: anywhere;
+    font-size: var(--uix-text-body); line-height: var(--uix-leading-body); cursor: text;
+  }
+  .uix-rich-text[data-disabled] .uix-rich-text__content { cursor: not-allowed; }
+  /* ProseMirror essentials (the editor runs with injectCSS off, so a strict style-src CSP holds) */
+  .uix-rich-text__content.ProseMirror {
+    position: relative; white-space: pre-wrap; white-space: break-spaces; word-wrap: break-word;
+    font-variant-ligatures: none; font-feature-settings: "liga" 0;
+  }
+  .uix-rich-text__content [contenteditable="false"] { white-space: normal; }
+  .uix-rich-text__content [contenteditable="false"] [contenteditable="true"],
+  .uix-rich-text__content pre { white-space: pre-wrap; }
+  .uix-rich-text__content img.ProseMirror-separator { display: inline; border: 0; margin: 0; width: 0; height: 0; }
+  .uix-rich-text__content .ProseMirror-gapcursor { display: none; position: absolute; margin: 0; pointer-events: none; }
+  .uix-rich-text__content .ProseMirror-gapcursor::after {
+    content: ""; display: block; position: absolute; top: -2px; width: 20px; border-top: 1px solid var(--uix-text);
+    animation: uix-rich-text-caret 1.1s steps(2, start) infinite;
+  }
+  .uix-rich-text__content.ProseMirror-focused .ProseMirror-gapcursor { display: block; }
+  .uix-rich-text__content.ProseMirror-hideselection *::selection { background: transparent; }
+  .uix-rich-text__content.ProseMirror-hideselection * { caret-color: transparent; }
+  .uix-rich-text__content .tableWrapper { overflow-x: auto; }
+  @keyframes uix-rich-text-caret { to { visibility: hidden; } }
+  .uix-rich-text__content--loading { color: var(--uix-text-muted); cursor: progress; }
+  .uix-rich-text__content--loading > .uix-prose { max-width: none; }
+  /* editing text is full contrast (the reading view keeps prose's hushed body) */
+  .uix-rich-text .uix-rich-text__content :is(p, li) { color: var(--uix-text); }
+  /* Editor headings stay h1–h3 in the DOM; they look like the viewer's demoted h3–h5. */
+  .uix-rich-text__content h1 { font-size: var(--uix-text-h2); line-height: var(--uix-leading-h2); }
+  .uix-rich-text__content h2 { font-size: var(--uix-text-h3); line-height: var(--uix-leading-h3); }
+  .uix-rich-text__content h3 { font-size: var(--uix-text-body); line-height: var(--uix-leading-body); }
+  .uix-rich-text__content .is-editor-empty:first-child::before {
+    content: attr(data-placeholder); float: left; height: 0; pointer-events: none; color: var(--uix-text-muted);
+  }
+  .uix-rich-text__content a { cursor: text; }
+  /* the glyph stays in the text for editing and copying; its fallback image is drawn beside it */
+  .uix-rich-text__emoji-text { font-size: 0; }
+  .uix-rich-text__content .ProseMirror-selectednode { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
+  .uix-rich-text__content .selectedCell { background: var(--uix-row-selected-bg); }
+  .uix-rich-text__content table { table-layout: fixed; width: 100%; }
+  .uix-rich-text__content ul[data-type="taskList"] { list-style: none; padding-left: 0; }
+  .uix-rich-text__content ul[data-type="taskList"] li { display: flex; gap: var(--uix-space-2); align-items: flex-start; }
+  .uix-rich-text__content ul[data-type="taskList"] li > label { flex: none; padding-top: var(--uix-space-1); }
+  .uix-rich-text__content ul[data-type="taskList"] li > div { flex: 1 1 auto; min-width: 0; }
+  .uix-rich-text__content ul[data-type="taskList"] input { accent-color: var(--uix-accent); margin: 0; }
+  .uix-rich-text__image-link {
+    display: inline-flex; align-items: center; gap: var(--uix-space-1); padding: 0 var(--uix-space-2);
+    border: 1px dashed var(--uix-border-strong); border-radius: var(--uix-radius-sm);
+    color: var(--uix-link); font-size: var(--uix-text-meta);
+  }
+
+  /* source mode — the textarea sits flush inside the frame */
+  .uix-rich-text__source.uix-textarea {
+    border: 0; border-radius: 0; background: transparent; box-shadow: none;
+    font-family: var(--uix-font-mono); font-size: var(--uix-text-meta);
+  }
+  .uix-rich-text__source.uix-textarea:focus { box-shadow: none; }
+  .uix-rich-text--fallback .uix-rich-text__source.uix-textarea {
+    border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface);
+    font-family: inherit; font-size: var(--uix-text-body);
+  }
+  .uix-rich-text--fallback .uix-rich-text__source.uix-textarea:focus { box-shadow: 0 0 0 3px var(--uix-brand-muted); }
+
+  /* footer — status, counter, trailing actions */
+  .uix-rich-text__footer {
+    display: flex; align-items: center; justify-content: flex-end; gap: var(--uix-space-2); flex-wrap: wrap;
+    padding: 0 var(--uix-space-3) var(--uix-space-2);
+  }
+  .uix-rich-text__footer:not(:has(> :not(:empty))) { display: none; }
+  .uix-rich-text--fallback .uix-rich-text__footer { padding: var(--uix-space-1) 0 0; }
+  .uix-rich-text__status { margin-right: auto; font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
+  .uix-rich-text__status:empty { display: none; }
+  .uix-rich-text__status[data-kind="error"] { color: var(--uix-danger-text); }
+  .uix-rich-text__counter { font-size: var(--uix-text-meta); color: var(--uix-text-muted); font-variant-numeric: tabular-nums; }
+  .uix-rich-text__counter[data-over] { color: var(--uix-danger-text); font-weight: 600; }
+
+  /* composer variant — the composer draws the box; the toolbar joins the action bar */
+  .uix-rich-text--composer { border-radius: var(--uix-radius-md); }
+  .uix-rich-text--composer.uix-rich-text:focus-within { box-shadow: 0 0 0 3px var(--uix-brand-muted); }
+  .uix-rich-text--composer .uix-rich-text__bar { align-items: center; justify-content: flex-start; min-width: 0; }
+  .uix-rich-text--composer .uix-rich-text__toolbar { flex: 1 1 auto; padding: 0; border-bottom: 0; }
+  .uix-rich-text--composer .uix-rich-text__group--end { margin-left: 0; }
+  .uix-rich-text--composer .uix-rich-text__counter,
+  .uix-rich-text--composer .uix-rich-text__status { flex: none; margin-right: 0; }
+  .uix-rich-text--composer .uix-rich-text__bar > :last-child:not(.uix-rich-text__toolbar) { margin-left: auto; }
+  .uix-rich-text--composer .uix-rich-text__source.uix-textarea { border: 0; box-shadow: none; }
+
+  /* link popover */
+  .uix-rich-text__link { width: 320px; max-width: calc(100vw - 32px); padding: var(--uix-space-3); }
+  .uix-rich-text__link-form { display: flex; flex-direction: column; gap: var(--uix-space-3); }
+  .uix-rich-text__link-actions { display: flex; justify-content: flex-end; gap: var(--uix-space-2); }
+
+  /* :shortcode suggestions */
+  .uix-rich-text__suggest {
+    position: fixed; z-index: var(--uix-z-dropdown); min-width: 220px; max-height: 280px; overflow-y: auto;
+    padding: var(--uix-space-1); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md);
+    background: var(--uix-surface-2); box-shadow: var(--uix-shadow-popover); color: var(--uix-text);
+  }
+  .uix-rich-text__suggest-item {
+    display: flex; align-items: center; gap: var(--uix-space-2); padding: var(--uix-space-1) var(--uix-space-2);
+    border-radius: var(--uix-radius-sm); cursor: pointer; font-size: var(--uix-text-body);
+  }
+  .uix-rich-text__suggest-item:hover { background: var(--uix-bg-hover); }
+  .uix-rich-text__suggest-item[aria-selected="true"] { background: var(--uix-brand-muted); color: var(--uix-accent-text); }
+  .uix-rich-text__suggest-emoji { font-size: var(--uix-text-h3); line-height: 1; }
+  .uix-rich-text__suggest-name { font-family: var(--uix-font-mono); font-size: var(--uix-text-meta); }
+
+  @media (prefers-reduced-motion: reduce) {
+    .uix-rich-text, .uix-rich-text__tool { transition: none; }
+  }
+}

package/styles/components/save-status.css

@@ -0,0 +1,18 @@
+/* uix save status — inline saving → saved → failed feedback for autosave and inline edits,
+ * where a toast is too loud and silence leaves the user guessing (TENSOR LD-13). The text
+ * sits in a polite live region the React component keeps mounted in every state. Colour
+ * is never the only cue: each state has its own words. Depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-save-status { display: inline-flex; align-items: center; gap: var(--uix-space-1); min-height: var(--uix-icon-sm); color: var(--uix-text-muted); font-size: var(--uix-text-meta); white-space: nowrap; }
+  .uix-save-status__icon { width: var(--uix-space-2); height: var(--uix-space-2); flex-shrink: 0; border-radius: var(--uix-radius-pill); }
+  .uix-save-status[data-state="idle"] .uix-save-status__icon { display: none; }
+
+  .uix-save-status[data-state="saving"] .uix-save-status__icon { border: 1px solid var(--uix-border-strong); border-top-color: transparent; animation: uix-spin var(--uix-dur-slower) linear infinite; }
+  .uix-save-status[data-state="saved"] .uix-save-status__icon { background: var(--uix-success); }
+  .uix-save-status[data-state="failed"] { color: var(--uix-danger-text); }
+  .uix-save-status[data-state="failed"] .uix-save-status__icon { background: var(--uix-danger); }
+
+  @media (prefers-reduced-motion: reduce) {
+    .uix-save-status[data-state="saving"] .uix-save-status__icon { animation: none; }
+  }
+}

package/styles/components/table.css

@@ -88,7 +88,10 @@
     color: var(--uix-text); font: inherit;
     display: inline-flex; align-items: center; gap: var(--uix-space-1); white-space: nowrap;
   }
-  .uix-id-cell__btn:hover { color: var(--uix-accent); }
+  /* No accent flip on hover: the row tint plus the revealed ↗ arrow are the affordance, and
+     an id that turns brand-blue under the pointer reads as a state change on the record
+     (HAR-133). Keeps --uix-text; the focus ring below is the keyboard cue. */
+  .uix-id-cell__btn:hover { color: var(--uix-text); }
   .uix-id-cell__btn:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; border-radius: var(--uix-radius-xs); }
   .uix-id-cell__arrow {
     width: var(--uix-icon-sm); height: var(--uix-icon-sm); flex-shrink: 0; color: var(--uix-text-muted);