@threadlabs/looma 0.28.3 → 0.28.5

package/vue/components.css

@@ -3485,28 +3485,46 @@ from {
   display: none;
 }
 
-[data-component~="ui-editor-insert-table-grid"][data-v-a8e7e3a2] {
-  padding: var(--ui-space-3);
-  background: var(--ui-surface);
-  border: var(--ui-border-width) solid var(--ui-border-strong);
-  border-radius: var(--ui-radius-md);
-  box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+[data-component~="ui-editor-toolbar"][data-v-fa1e480e] {
+  position: sticky;
+  top: 0;
+  z-index: var(--ui-editor-toolbar-z-index, 10);
+  display: flex;
+  align-items: center;
+  padding: var(--ui-editor-toolbar-padding-block, 6px)
+    var(--ui-editor-toolbar-padding-inline, 12px);
+  min-height: var(--ui-editor-toolbar-min-height, 48px);
+  background: var(--ui-editor-toolbar-surface, var(--ui-surface));
+  border-bottom: var(--ui-border-width) solid
+    var(--ui-editor-toolbar-border, var(--ui-border-divider));
 }
-.hint[data-v-a8e7e3a2] {
-  margin: 0 0 var(--ui-space-2);
-  font-size: var(--ui-font-size-sm);
-  color: var(--ui-text-muted);
+
+/* One row, always. When the controls outgrow the space, the row scrolls sideways rather than
+   wrapping into several lines, and a fade at each edge that has more to show says so. */
+.strip[data-v-fa1e480e] {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--ui-editor-toolbar-gap, 2px);
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-inline: contain;
+  scrollbar-width: none;
 }
-.grid[data-v-a8e7e3a2] {
-  display: grid;
-  grid-template-columns: repeat(var(--_cols, 8), 1.25rem);
-  grid-template-rows: repeat(var(--_rows, 8), 1.25rem);
-  gap: 2px;
-  margin-bottom: var(--ui-space-2);
-  max-inline-size: 100%;
-  overflow: auto;
+.strip[data-v-fa1e480e]::-webkit-scrollbar {
+  display: none;
+}
+.strip > [data-v-fa1e480e-s] {
+  flex: 0 0 auto;
+}
+
+/* The edge fades are the scroll fade every Looma scroller uses (see ui-scroll-area), a mask on the
+   strip, so a floating toolbar's border and shadow stay whole. */
+.strip[data-v-fa1e480e] {
   --_ui-scroll-fade-direction: to right;
-  --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
+  --_ui-scroll-fade-size: var(--ui-editor-toolbar-fade-size, var(--ui-scroll-fade-size, 24px));
   mask-image: linear-gradient(
     var(--_ui-scroll-fade-direction),
     transparent,
@@ -3526,1130 +3544,1480 @@ from {
     -1px calc(100% - var(--_ui-scroll-fade-size)),
     calc(100% - var(--_ui-scroll-fade-size)) 100%;
 }
-[data-component~="ui-editor-insert-table-grid"]:dir(rtl) .grid[data-v-a8e7e3a2] {
+[data-component~="ui-editor-toolbar"]:dir(rtl) .strip[data-v-fa1e480e] {
   --_ui-scroll-fade-direction: to left;
 }
-.cell[data-v-a8e7e3a2] {
-  width: 1.25rem;
-  height: 1.25rem;
+.divider[data-v-fa1e480e-s] {
+  width: 1px;
+  height: 20px;
+  background: var(--ui-editor-toolbar-divider, var(--ui-border-divider));
+  flex-shrink: 0;
+  margin: 0 var(--ui-editor-toolbar-divider-margin, 4px);
+}
+[data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"][data-v-fa1e480e] {
+  position: relative;
+  top: auto;
+  width: max-content;
+  max-width: min(calc(100vw - 24px), 100%);
+  min-height: auto;
+  padding: var(--ui-editor-toolbar-floating-padding, 4px);
+  background: color-mix(
+    in srgb,
+    var(--ui-editor-toolbar-surface, var(--ui-surface)) 96%,
+    transparent
+  );
+  border: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
+  border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
+  box-shadow: var(
+    --ui-editor-toolbar-floating-shadow,
+    var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12))
+  );
+  backdrop-filter: blur(10px);
+}
+@media (max-width: 767px) {
+[data-component~="ui-editor-toolbar"][data-v-fa1e480e] {
+    position: fixed;
+    top: auto;
+    bottom: env(safe-area-inset-bottom);
+    left: 0;
+    right: 0;
+    min-height: var(--ui-editor-toolbar-mobile-min-height, 56px);
+    border-top: var(--ui-border-width) solid
+      var(--ui-editor-toolbar-border, var(--ui-border-divider));
+    border-bottom: none;
+    box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
+}
+[data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"][data-v-fa1e480e] {
+    position: relative;
+    inset: auto;
+    min-height: auto;
+    border: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
+    border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
+    box-shadow: var(
+      --ui-editor-toolbar-floating-shadow,
+      var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12))
+    );
+}
+}
+
+/* Inside LoomaEditor's sticky shell, the shell is the sticky surface. */
+.looma-editor__sticky-toolbar-shell [data-component~="ui-editor-toolbar"][data-v-fa1e480e] {
+  position: relative;
+  min-height: var(--ui-editor-toolbar-min-height, 48px);
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+}
+
+/* Inside LoomaEditor's mobile shell, the toolbar is a scroll-snapping strip. */
+.looma-editor__mobile-toolbar-shell
+  [data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"][data-v-fa1e480e] {
+  width: 100%;
+  max-width: none;
+  min-height: 100%;
   padding: 0;
-  border: var(--ui-border-width) solid var(--ui-control-border);
-  border-radius: var(--ui-radius-sm);
-  background: var(--ui-surface);
-  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  backdrop-filter: none;
 }
-.cell.selected[data-v-a8e7e3a2] {
-  background: var(--ui-accent-solid, var(--ui-accent));
-  border-color: var(--ui-accent-solid, var(--ui-accent));
+.looma-editor__mobile-toolbar-shell
+  [data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"]
+  .strip[data-v-fa1e480e] {
+  scroll-snap-type: x mandatory;
 }
-.cell[data-v-a8e7e3a2]:focus-visible {
-  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-  outline-offset: calc(-1 * var(--ui-focus-width));
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-editor-toolbar"][hidden][data-v-fa1e480e] {
+  display: none;
 }
-.header[data-v-a8e7e3a2] {
-  display: block;
-  margin-bottom: var(--ui-space-2);
-  font-size: var(--ui-font-size-sm);
-  cursor: pointer;
+
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-form-field-danger {
+  syntax: "*";
+  inherits: false;
 }
-@media (pointer: coarse) {
-.grid[data-v-a8e7e3a2] {
-    grid-template-columns: repeat(var(--_cols, 8), 44px);
-    grid-template-rows: repeat(var(--_rows, 8), 44px);
+@property --ui-form-field-help-font-size {
+  syntax: "*";
+  inherits: false;
 }
-.cell[data-v-a8e7e3a2] {
-    width: 44px;
-    height: 44px;
+@property --ui-form-field-help-min-block-size {
+  syntax: "*";
+  inherits: false;
 }
+@property --ui-form-field-help-text {
+  syntax: "*";
+  inherits: false;
 }
-@media (forced-colors: active) {
-.cell[data-v-a8e7e3a2]:focus-visible {
-    outline-color: Highlight;
+@property --ui-form-field-label-font-size {
+  syntax: "*";
+  inherits: false;
 }
+@property --ui-form-field-label-text {
+  syntax: "*";
+  inherits: false;
 }
-[data-component~="ui-editor-insert-table-grid"][hidden][data-v-a8e7e3a2] {
-  display: none;
+@property --ui-form-field-min-inline-size {
+  syntax: "*";
+  inherits: false;
 }
+[data-component~="ui-form-field"][data-v-3feaf986] {
+  /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-form-field-danger: var(--ui-form-field-danger);
+  --_ui-form-field-help-min-block-size: var(--ui-form-field-help-min-block-size);
+  --_ui-form-field-label-text: var(--ui-form-field-label-text);
+  --_ui-form-field-label-font-size: var(--ui-form-field-label-font-size);
+  --_ui-form-field-help-text: var(--ui-form-field-help-text);
+  --_ui-form-field-help-font-size: var(--ui-form-field-help-font-size);
 
-[data-component~="ui-editor-mention-menu"][popover][data-v-f27cd779] {
-  position: fixed;
-  inset: auto;
-  margin: 0;
+  display: grid;
+  gap: var(--ui-space-2);
+  min-inline-size: var(--ui-form-field-min-inline-size, 0);
+  align-content: start;
+  color: var(--ui-text-primary);
 }
-[data-component~="ui-editor-mention-menu"][data-v-f27cd779] {
-  user-select: none;
+
+/* Each named region styles whatever fills it, however it was slotted (slot="…" in HTML, #label
+   in Vue), and generates no box of its own, so an empty region adds no gap. */
+.label[data-v-3feaf986],
+.help[data-v-3feaf986],
+.error[data-v-3feaf986] {
+  display: contents;
 }
-[data-component~="ui-editor-mention-menu"][data-v-f27cd779] {
+.label[data-v-3feaf986] {
+  color: var(--_ui-form-field-label-text, var(--ui-text-secondary));
+  font-size: var(--_ui-form-field-label-font-size, var(--ui-font-size-sm));
+}
+
+/* A label action, such as a small help button, sits after the label text in a box one line
+   tall, centred on the first line and overflowing it. A button taller than a line of label
+   text then never makes this field's label row taller than its neighbours' in a grid row. */
+.label[data-v-3feaf986]:has(> .label-action > *) {
   display: flex;
-  overflow: hidden;
-  flex-direction: column;
-  background: var(--ui-surface);
-  border: var(--ui-border-width) solid var(--ui-border-strong);
-  border-radius: var(--ui-radius-dialog);
-  box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
+  align-items: start;
+  gap: var(--ui-space-1);
 }
-.header[data-v-f27cd779] {
+.label-action[data-v-3feaf986] {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--ui-space-3);
-  padding: var(--ui-space-2) var(--ui-space-3);
-  color: var(--ui-text-secondary);
-  border-bottom: var(--ui-border-width) solid var(--ui-border-divider);
-  font-size: var(--ui-font-size-xs);
-  font-weight: var(--ui-font-semibold);
+  align-items: unsafe center;
+  block-size: 1lh;
 }
-[data-component~="ui-editor-mention-menu"] > .header[data-v-f27cd779]:empty,
-[data-component~="ui-editor-mention-menu"] > .empty[data-v-f27cd779]:empty {
+.label-action[data-v-3feaf986]:not(:has(> *)) {
   display: none;
 }
-.empty[data-v-f27cd779] {
-  padding: var(--ui-space-3);
-  color: var(--ui-text-muted);
-  font-size: var(--ui-font-size-sm);
-}
-.hint[data-v-f27cd779] {
-  overflow: hidden;
-  color: var(--ui-text-muted);
-  font-weight: var(--ui-font-normal);
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.help[data-v-3feaf986] {
+  color: var(--_ui-form-field-help-text, var(--ui-text-muted));
+  font-size: var(--_ui-form-field-help-font-size, var(--ui-font-size-sm));
+  line-height: var(--ui-line-height-md);
 }
-.list[data-v-f27cd779] {
-  max-height: 280px;
-  padding: var(--ui-space-1) 0;
-  margin: 0;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  list-style: none;
-  /* Each edge that hides content fades: the scroll fade every Looma scroller uses (see ui-scroll-area). */
-  --_ui-scroll-fade-direction: to bottom;
-  --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
-  mask-image: linear-gradient(
-    var(--_ui-scroll-fade-direction),
-    transparent,
-    #000 var(--_ui-scroll-fade-start),
-    #000 calc(100% - var(--_ui-scroll-fade-end)),
-    transparent
-  );
-  animation:
-    ui-scroll-fade-start linear,
-    ui-scroll-fade-start-hold linear,
-    ui-scroll-fade-end-hold linear,
-    ui-scroll-fade-end linear;
-  animation-timeline: scroll(self block);
-  animation-range:
-    0 var(--_ui-scroll-fade-size),
-    var(--_ui-scroll-fade-size) calc(100% + 1px),
-    -1px calc(100% - var(--_ui-scroll-fade-size)),
-    calc(100% - var(--_ui-scroll-fade-size)) 100%;
+.help > [data-v-3feaf986-s] {
+  min-block-size: var(--_ui-form-field-help-min-block-size, 0);
 }
-.item[data-v-f27cd779] {
-  display: flex;
-  align-items: center;
-  min-height: 44px;
-  padding: var(--ui-space-2) var(--ui-space-3);
-  gap: var(--ui-space-3);
-  cursor: pointer;
+.error[data-v-3feaf986] {
+  display: none;
 }
-.item.active[data-v-f27cd779] {
-  background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
+[data-component~="ui-form-field"][data-ui-form-field-state~="invalid"] .error[data-v-3feaf986] {
+  display: contents;
 }
 
-/* The highlight and the initials circle share a tint; on the highlighted row the circle takes
-   the surface and a fine accent ring, so the initials stay visible. */
-.item.active .avatar[data-v-f27cd779] {
-  background: var(--ui-surface);
-  box-shadow: inset 0 0 0 1px var(--ui-accent-soft, var(--ui-accent-subtle));
+/* An error reads in the danger colour, the one the invalid control's border takes. */
+.error[data-v-3feaf986],[role="alert"][data-v-3feaf986-s] {
+  color: var(--_ui-form-field-danger, var(--ui-field-danger, var(--ui-danger)));
+  font-size: var(--ui-font-size-sm);
 }
-.avatar[data-v-f27cd779] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  flex: 0 0 auto;
-  color: var(--ui-accent-active, var(--ui-accent-solid));
-  background: var(--ui-accent-soft, var(--ui-accent-subtle));
-  border-radius: var(--ui-radius-round);
-  font-size: var(--ui-font-size-xs);
-  font-weight: var(--ui-font-semibold);
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-form-field"][hidden][data-v-3feaf986] {
+  display: none;
 }
-.body[data-v-f27cd779] {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
+
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-icon-button-active-scale {
+  syntax: "*";
+  inherits: false;
 }
-.label[data-v-f27cd779],
-.detail[data-v-f27cd779] {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+@property --ui-icon-button-active-surface {
+  syntax: "*";
+  inherits: false;
 }
-.label[data-v-f27cd779] {
-  color: var(--ui-text-primary);
-  font-size: var(--ui-font-size-sm);
-  font-weight: var(--ui-font-medium);
+@property --ui-icon-button-border {
+  syntax: "*";
+  inherits: false;
 }
-.detail[data-v-f27cd779],
-.loading[data-v-f27cd779] {
-  color: var(--ui-text-muted);
-  font-size: var(--ui-font-size-xs);
+@property --ui-icon-button-disabled-filter {
+  syntax: "*";
+  inherits: false;
 }
-.loading[data-v-f27cd779] {
-  min-height: 44px;
-  padding: var(--ui-space-3);
+@property --ui-icon-button-disabled-opacity {
+  syntax: "*";
+  inherits: false;
 }
-@media (max-width: 767px) {
-[data-component~="ui-editor-mention-menu"][data-v-f27cd779] {
-    border-bottom: 0;
-    border-radius: var(--ui-radius-dialog) var(--ui-radius-dialog) 0 0;
+@property --ui-icon-button-hover-border {
+  syntax: "*";
+  inherits: false;
 }
-.list[data-v-f27cd779] {
-    max-height: calc(60dvh - 48px);
+@property --ui-icon-button-hover-surface {
+  syntax: "*";
+  inherits: false;
 }
+@property --ui-icon-button-hover-text {
+  syntax: "*";
+  inherits: false;
 }
-[data-component~="ui-editor-mention-menu"][hidden][data-v-f27cd779] {
-  display: none;
+@property --ui-icon-button-icon-size {
+  syntax: "*";
+  inherits: false;
 }
-
-[data-component~="ui-editor-mention-menu-item"][data-v-aa8aa3c4] {
-  display: flex;
-  align-items: center;
-  min-block-size: 44px;
-  padding: var(--ui-space-2) var(--ui-space-3);
-  gap: var(--ui-space-3);
-  cursor: pointer;
-  list-style: none;
+@property --ui-icon-button-icon-stroke-width {
+  syntax: "*";
+  inherits: false;
 }
-[data-component~="ui-editor-mention-menu-item"][aria-selected="true"][data-v-aa8aa3c4] {
-  background: var(--ui-accent-subtle);
+@property --ui-icon-button-outline-surface {
+  syntax: "*";
+  inherits: false;
 }
-
-/* The highlight and the initials circle share a tint; on the highlighted row the circle takes
-   the surface and a fine accent ring, so the initials stay visible. */
-[data-component~="ui-editor-mention-menu-item"][aria-selected="true"] .avatar[data-v-aa8aa3c4] {
-  background: var(--ui-surface);
-  box-shadow: inset 0 0 0 1px var(--ui-accent-soft);
+@property --ui-icon-button-outline-text {
+  syntax: "*";
+  inherits: false;
 }
-
-/* A slotted Avatar (a person's photo) is its own circle. */
-[data-component~="ui-editor-mention-menu-item"] .avatar[data-v-aa8aa3c4]:has(> [data-component~="ui-avatar"]) {
-  background: none;
-  box-shadow: none;
+@property --ui-icon-button-radius {
+  syntax: "*";
+  inherits: false;
 }
-.avatar[data-v-aa8aa3c4] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 32px;
-  block-size: 32px;
-  flex: 0 0 auto;
-  color: var(--ui-accent-active);
-  background: var(--ui-accent-soft);
-  border-radius: var(--ui-radius-round);
-  font-size: var(--ui-font-size-xs);
-  font-weight: var(--ui-font-semibold);
+@property --ui-icon-button-size {
+  syntax: "*";
+  inherits: false;
 }
-.body[data-v-aa8aa3c4] {
-  display: flex;
-  min-inline-size: 0;
-  flex-direction: column;
+@property --ui-icon-button-solid-hover-surface {
+  syntax: "*";
+  inherits: false;
 }
-.label[data-v-aa8aa3c4], .detail[data-v-aa8aa3c4] {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+@property --ui-icon-button-solid-shadow {
+  syntax: "*";
+  inherits: false;
 }
-.label[data-v-aa8aa3c4] {
-  color: var(--ui-text-primary);
-  font-size: var(--ui-font-size-sm);
-  font-weight: var(--ui-font-medium);
+@property --ui-icon-button-solid-surface {
+  syntax: "*";
+  inherits: false;
 }
-.detail[data-v-aa8aa3c4] {
-  color: var(--ui-text-muted);
-  font-size: var(--ui-font-size-xs);
+@property --ui-icon-button-solid-text {
+  syntax: "*";
+  inherits: false;
 }
-[data-component~="ui-editor-mention-menu-item"][hidden][data-v-aa8aa3c4] {
-  display: none;
+@property --ui-icon-button-surface {
+  syntax: "*";
+  inherits: false;
 }
+[data-component~="ui-icon-button"][data-v-ea2a5496] {
+  /* Optional inherited action-group values keep text and icon actions under the same light.
+     One fine top/start highlight follows the bottom/end lowlight at a joined action seam.
+     A single ambient lift avoids stacking a face gradient or another inset bevel. */
+  --_ui-action-start: 1px;
+  --_ui-action-edge: var(
+    --ui-action-edge,
+    inset var(--_ui-action-start) 1px 0 light-dark(
+      rgb(255 255 255 / 0.08),
+      rgb(255 255 255 / 0.06)
+    ),
+    inset calc(-1 * var(--_ui-action-start)) -1px 0 light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.08))
+  );
+  --_ui-action-shadow:
+    var(--_ui-action-edge),
+    0 1px 2px light-dark(rgb(0 0 0 / 0.10), rgb(0 0 0 / 0.20));
+  /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-icon-button-icon-size: var(--ui-icon-button-icon-size);
+  --_ui-icon-button-icon-stroke-width: var(--ui-icon-button-icon-stroke-width);
 
-[data-component~="ui-editor-slash-menu"][popover][data-v-a85c3b18] {
-  position: fixed;
-  inset: auto;
-  margin: 0;
-}
-[data-component~="ui-editor-slash-menu"][data-v-a85c3b18] {
-  user-select: none;
+  display: inline-flex;
+  color: var(--ui-text-secondary);
 }
-[data-component~="ui-editor-slash-menu"][data-v-a85c3b18] {
-  background: var(--ui-surface);
-  border: var(--ui-border-width) solid var(--ui-border-strong);
-  border-radius: var(--ui-radius-dialog);
-  box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-@media (max-width: 767px) {
-[data-component~="ui-editor-slash-menu"][data-v-a85c3b18] {
-    border-radius: var(--ui-radius-dialog) var(--ui-radius-dialog) 0 0;
-    border-bottom: none;
+[data-component~="ui-icon-button"][data-v-ea2a5496]:dir(rtl) {
+  --_ui-action-start: -1px;
 }
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="tone=accent"][data-v-ea2a5496] {
+  --_icon-button-border: var(--ui-accent-solid);
+  --_icon-button-hover-border: var(--ui-accent-hover);
+  --_icon-button-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
+  --_icon-button-outline-surface: color-mix(
+    in srgb,
+    var(--ui-accent-solid) 5%,
+    var(--ui-surface-default)
+  );
+  color: var(--_icon-button-text);
 }
-.header[data-v-a85c3b18] {
-  display: none;
-  align-items: center;
-  gap: var(--ui-space-2);
-  padding: var(--ui-space-3) var(--ui-space-4);
-  border-bottom: var(--ui-border-width) solid var(--ui-border-divider);
-  font-size: var(--ui-font-size-xs);
-  color: var(--ui-text-muted);
-  font-weight: var(--ui-font-semibold);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+
+/* Omitted tone retains the existing accent solid; explicit neutral is additive. */
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="tone=neutral"][data-v-ea2a5496] {
+  --_icon-button-solid-surface: var(--ui-text-primary);
+  --_icon-button-solid-hover-surface: var(--ui-text-primary);
+  --_icon-button-solid-text: var(--ui-surface-default);
 }
-[data-component~="ui-editor-slash-menu"] > .header[data-v-a85c3b18]:empty,
-[data-component~="ui-editor-slash-menu"] > .footer[data-v-a85c3b18]:empty,
-[data-component~="ui-editor-slash-menu"] > .empty[data-v-a85c3b18]:empty {
-  display: none;
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ea2a5496] {
+  position: relative;
 }
-.empty[data-v-a85c3b18] {
-  padding: var(--ui-space-3);
-  color: var(--ui-text-muted);
-  font-size: var(--ui-font-size-sm);
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ea2a5496]::before {
+  content: "";
+  position: absolute;
+  inset: 50% auto auto 50%;
+  z-index: 1;
+  inline-size: var(--ui-affordance-guide-size);
+  block-size: var(--ui-affordance-guide-size);
+  border-radius: var(--ui-radius-round);
+  background: var(--ui-affordance-guide-color, var(--ui-border-strong));
+  opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
+  transform: translate(-50%, -50%);
+  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
+  pointer-events: none;
 }
-@media (max-width: 767px) {
-.header[data-v-a85c3b18] {
-    display: flex;
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-ui-icon-button-state~="guide=bar"][data-v-ea2a5496]::before {
+  inline-size: 2px;
+  block-size: 20px;
+  background: var(--ui-border-strong);
+  opacity: 1;
 }
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ea2a5496]:disabled::before {
+  opacity: 0;
 }
-.list[data-v-a85c3b18] {
-  list-style: none;
-  margin: 0;
-  padding: var(--ui-space-1) 0;
-  overflow-y: auto;
-  max-height: 280px;
-  overscroll-behavior: contain;
-  /* Each edge that hides content fades: the scroll fade every Looma scroller uses (see ui-scroll-area). */
-  --_ui-scroll-fade-direction: to bottom;
-  --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
-  mask-image: linear-gradient(
-    var(--_ui-scroll-fade-direction),
-    transparent,
-    #000 var(--_ui-scroll-fade-start),
-    #000 calc(100% - var(--_ui-scroll-fade-end)),
-    transparent
-  );
-  animation:
-    ui-scroll-fade-start linear,
-    ui-scroll-fade-start-hold linear,
-    ui-scroll-fade-end-hold linear,
-    ui-scroll-fade-end linear;
-  animation-timeline: scroll(self block);
-  animation-range:
-    0 var(--_ui-scroll-fade-size),
-    var(--_ui-scroll-fade-size) calc(100% + 1px),
-    -1px calc(100% - var(--_ui-scroll-fade-size)),
-    calc(100% - var(--_ui-scroll-fade-size)) 100%;
+
+/* At rest an anticipatory button shows only its guide dot. The icon grows into place when
+   proximity, hover, or focus reveals it; the button's hit area and guide remain stable. */
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"] .content[data-v-ea2a5496] {
+  opacity: 1;
+  transform: scale(1);
+  transition:
+    opacity var(--ui-motion-fast) var(--ui-motion-ease),
+    transform calc(var(--ui-motion-fast) * 2) cubic-bezier(0.2, 1.4, 0.35, 1);
 }
-@media (max-width: 767px) {
-.list[data-v-a85c3b18] {
-    max-height: calc(60dvh - 80px);
-    padding: var(--ui-space-1) 0 var(--ui-space-2);
+@media (hover: hover) and (pointer: fine) {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ea2a5496]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible) {
+    border-color: transparent;
+    background-color: transparent;
+    box-shadow: none;
 }
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
+    .content[data-v-ea2a5496] {
+    opacity: 0;
+    transform: scale(0.65);
+    transition-duration: var(--ui-motion-fast);
 }
-.item[data-v-a85c3b18] {
-  display: flex;
-  align-items: center;
-  gap: var(--ui-space-3);
-  padding: var(--ui-space-2) var(--ui-space-3);
-  min-height: 44px;
-  cursor: pointer;
-  transition: background-color 120ms ease;
 }
-.item.active[data-v-a85c3b18] {
-  background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ea2a5496]:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
+  opacity: 0;
 }
-.icon[data-v-a85c3b18] {
-  display: flex;
+[data-component~="ui-icon-button"][data-v-ea2a5496] {
+  /* The size prop resolves here; --ui-icon-button-size overrides it on an element. */
+  --_size: 2rem;
+  appearance: none;
+  inline-size: var(--ui-icon-button-size, var(--_size));
+  block-size: var(--ui-icon-button-size, var(--_size));
+  min-inline-size: var(--ui-icon-button-size, var(--_size));
+  min-block-size: var(--ui-icon-button-size, var(--_size));
+  padding: 0;
+  margin: 0;
+  border: var(--ui-border-width) solid transparent;
+  border-radius: var(--ui-icon-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
+  background-color: var(--ui-icon-button-surface, transparent);
+  color: inherit;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
-  background: var(--ui-surface-hover);
-  border: var(--ui-border-width) solid var(--ui-border);
-  border-radius: var(--ui-radius-md);
-  font-size: var(--ui-font-size-sm);
-  font-weight: var(--ui-font-bold);
-  color: var(--ui-text-secondary);
-  font-family: var(--ui-font-family-mono, ui-monospace, monospace);
-  flex-shrink: 0;
-  line-height: 1;
+  cursor: pointer;
+  transition:
+    background-color var(--ui-motion-fast) var(--ui-motion-ease),
+    border-color var(--ui-motion-fast) var(--ui-motion-ease),
+    color var(--ui-motion-fast) var(--ui-motion-ease),
+    box-shadow var(--ui-motion-base) var(--ui-motion-ease),
+    scale var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.item.active .icon[data-v-a85c3b18] {
-  background: var(--ui-accent);
-  border-color: var(--ui-accent);
-  color: var(--ui-accent-contrast);
+@media (hover: none), (pointer: coarse) {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ea2a5496]::before {
+    opacity: 0;
 }
-.icon[data-v-a85c3b18] {
-  --_ui-default-icon-size: 1rem;
-  --_ui-default-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
 }
-.body[data-v-a85c3b18] {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 1px;
+
+/* A touch target without a bigger button: an invisible hit area, at least the control
+   minimum, centred on the button (::before is the anticipatory guide). */
+@media (pointer: coarse) {
+[data-component~="ui-icon-button"][data-v-ea2a5496] {
+    position: relative;
 }
-.title[data-v-a85c3b18] {
-  font-size: var(--ui-font-size-sm);
-  font-weight: var(--ui-font-medium);
-  color: var(--ui-text);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+[data-component~="ui-icon-button"][data-v-ea2a5496]::after {
+    content: "";
+    position: absolute;
+    inset: 50% auto auto 50%;
+    inline-size: max(100%, var(--ui-control-min-block-size));
+    block-size: max(100%, var(--ui-control-min-block-size));
+    transform: translate(-50%, -50%);
 }
-.description[data-v-a85c3b18] {
-  font-size: var(--ui-font-size-xs);
-  color: var(--ui-text-muted);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
-.footer[data-v-a85c3b18] {
-  padding: var(--ui-space-2) var(--ui-space-3);
-  border-top: var(--ui-border-width) solid var(--ui-border-divider);
-  font-size: var(--ui-font-size-xs);
-  color: var(--ui-text-muted);
+html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-ea2a5496] {
+  position: relative;
 }
-[data-component~="ui-editor-slash-menu"] kbd[data-v-a85c3b18] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-family: var(--ui-font-family-mono, ui-monospace, monospace);
-  font-size: var(--ui-font-size-2xs);
-  background: var(--ui-surface-hover);
-  border: var(--ui-border-width) solid var(--ui-border);
-  border-radius: var(--ui-radius-sm);
-  padding: 0 3px;
-  color: var(--ui-text-secondary);
+html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-ea2a5496]::after {
+  content: "";
+  position: absolute;
+  inset: 50% auto auto 50%;
+  inline-size: max(100%, var(--ui-control-min-block-size));
+  block-size: max(100%, var(--ui-control-min-block-size));
+  transform: translate(-50%, -50%);
 }
-[data-component~="ui-editor-slash-menu"][hidden][data-v-a85c3b18] {
-  display: none;
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-ea2a5496] {
+  --_size: 1.75rem;
+  inline-size: var(--ui-icon-button-size, var(--_size));
+  block-size: var(--ui-icon-button-size, var(--_size));
+  min-inline-size: var(--ui-icon-button-size, var(--_size));
+  min-block-size: var(--ui-icon-button-size, var(--_size));
+}
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-ea2a5496] {
+  --_size: 2.5rem;
+  inline-size: var(--ui-icon-button-size, var(--_size));
+  block-size: var(--ui-icon-button-size, var(--_size));
+  min-inline-size: var(--ui-icon-button-size, var(--_size));
+  min-block-size: var(--ui-icon-button-size, var(--_size));
 }
 
-[data-component~="ui-editor-slash-menu-group"][data-v-516afff1] {
-  display: block;
-  list-style: none;
+/* A text button's companion uses control geometry; compact icon buttons keep their own density. */
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="matchButton"][data-v-ea2a5496] {
+  --_size: var(--ui-control-size-md);
+  block-size: auto;
+  align-self: stretch;
+}
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="matchButton"][data-ui-icon-button-state~="size=sm"][data-v-ea2a5496] {
+  --_size: var(--ui-control-size-sm);
+}
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="matchButton"][data-ui-icon-button-state~="size=lg"][data-v-ea2a5496] {
+  --_size: var(--ui-control-size-lg);
+}
+@media (pointer: coarse) {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="matchButton"][data-v-ea2a5496] {
+    inline-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
+    min-inline-size: max(
+      var(--ui-icon-button-size, var(--_size)),
+      var(--ui-control-min-block-size)
+    );
+    min-block-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
+}
+}
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="round"][data-v-ea2a5496] {
+  border-radius: var(--ui-radius-round);
+}
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-ea2a5496] {
+  border-color: var(
+    --ui-icon-button-border,
+    var(--_icon-button-border, var(--ui-control-border, var(--ui-border-strong)))
+  );
+  background-color: var(
+    --ui-icon-button-outline-surface,
+    var(--_icon-button-outline-surface, var(--ui-surface-default))
+  );
+  background-image: none;
+  color: var(--ui-icon-button-outline-text, var(--_icon-button-text, var(--ui-text-primary)));
+  box-shadow: var(--ui-action-shadow, var(--_ui-action-shadow));
+}
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-ea2a5496] {
+  background-color: var(
+    --ui-icon-button-solid-surface,
+    var(--_icon-button-solid-surface, var(--ui-accent-solid))
+  );
+  background-image: none;
+  color: var(--ui-icon-button-solid-text, var(--_icon-button-solid-text, var(--ui-text-on-accent)));
+  box-shadow: var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
+}
+[data-component~="ui-icon-button"][data-v-ea2a5496]:hover:enabled:not([aria-disabled="true"]) {
+  /* Derived from the text colour so the ghost hover shows on any background. */
+  background-color: var(
+    --ui-icon-button-hover-surface,
+    color-mix(in srgb, currentColor 8%, transparent)
+  );
+  color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
+}
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-ea2a5496]:hover:enabled:not([aria-disabled="true"]) {
+  border-color: var(
+    --ui-icon-button-hover-border,
+    var(--_icon-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border)))
+  );
+}
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-ea2a5496]:hover:enabled:not([aria-disabled="true"]) {
+  background-color: var(
+    --ui-icon-button-solid-hover-surface,
+    var(--_icon-button-solid-hover-surface, var(--ui-accent-hover))
+  );
+}
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=accent"][data-v-ea2a5496]:hover:enabled:not([aria-disabled="true"]),
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=neutral"][data-v-ea2a5496]:hover:enabled:not([aria-disabled="true"]) {
+  color: var(--ui-icon-button-solid-text, var(--_icon-button-solid-text, var(--ui-text-on-accent)));
+}
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=ghost"][aria-expanded="true"][data-v-ea2a5496]:enabled:not([aria-disabled="true"]) {
+  background-color: var(
+    --ui-icon-button-active-surface,
+    color-mix(in srgb, currentColor 16%, transparent)
+  );
+  color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
+  box-shadow: var(--ui-pressed);
+}
+
+/* Native toggle state persists after pointer release, including during loading. */
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][aria-pressed="true"][data-v-ea2a5496]:enabled {
+  background-color: var(
+    --ui-icon-button-active-surface,
+    color-mix(in srgb, currentColor 12%, var(--ui-surface-default))
+  );
+  background-image: none;
+  box-shadow: var(--ui-pressed);
+}
+[data-component~="ui-icon-button"][data-v-ea2a5496]:active:enabled:not([aria-disabled="true"]) {
+  scale: var(--ui-icon-button-active-scale, 0.96);
+}
+:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"][data-v-ea2a5496], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"][data-v-ea2a5496]) {
+  cursor: progress;
+}
+.content[data-v-ea2a5496] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"])
+  .content[data-v-ea2a5496] {
+  display: none;
+}
+@media (prefers-reduced-motion: reduce) {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"] .content[data-v-ea2a5496] {
+    transition: none;
+}
+}
+[data-component~="ui-icon-button"][data-v-ea2a5496]:focus-visible {
+  outline: none;
+  box-shadow: var(--ui-focus-halo);
+}
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-ea2a5496]:focus-visible {
+  box-shadow:
+    var(--ui-action-shadow, var(--_ui-action-shadow)),
+    var(--ui-focus-halo);
+}
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-ea2a5496]:focus-visible {
+  box-shadow:
+    var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
+    var(--ui-focus-halo);
+}
+[data-component~="ui-icon-button"][data-v-ea2a5496]:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"]):active:enabled:not([aria-disabled="true"]) {
+  background-image: none;
+  box-shadow: var(--ui-pressed);
+}
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][aria-pressed="true"][data-v-ea2a5496]:enabled:focus-visible {
+  box-shadow:
+    var(--ui-pressed),
+    var(--ui-focus-halo);
+}
+@media (forced-colors: active) {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][aria-pressed="true"][data-v-ea2a5496]:enabled {
+    outline: var(--ui-focus-width) solid Highlight;
+    outline-offset: calc(-2 * var(--ui-focus-width));
+}
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][aria-pressed="true"][data-v-ea2a5496]:enabled:focus-visible {
+    outline-offset: var(--ui-focus-width);
+}
+}
+
+/* Disabled is a flat neutral control, independent of the active variant's tone. */
+[data-component~="ui-icon-button"][data-v-ea2a5496]:disabled {
+  border-color: var(--ui-disabled-border);
+  background-color: var(--ui-disabled-surface);
+  color: var(--ui-disabled-text);
+  filter: var(--ui-icon-button-disabled-filter, var(--ui-disabled-filter));
+  opacity: var(--ui-icon-button-disabled-opacity, 1);
+  cursor: not-allowed;
+  box-shadow: none;
+  background-image: none;
+}
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=ghost"][data-v-ea2a5496]:disabled {
+  border-color: transparent;
+}
+[data-component~="ui-icon-button"][data-v-ea2a5496] {
+  --_icon-button-icon-default: var(--ui-icon-size-md);
+  /* A slotted ui-icon is its own component, out of reach of the svg rule below; these are its
+     defaults, which its own --ui-icon-* hooks still override. */
+  --_ui-default-icon-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
+  --_ui-default-icon-stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
+}
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-ea2a5496] {
+  --_icon-button-icon-default: var(--ui-icon-size-sm);
+}
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-ea2a5496] {
+  --_icon-button-icon-default: var(--ui-icon-size-lg);
+}
+svg[data-v-ea2a5496-s] {
+  inline-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
+  block-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
+  flex-shrink: 0;
+  stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-icon-button"][hidden][data-v-ea2a5496] {
+  display: none;
+}
+
+/* This component's hooks style the element they are set on, and never a nested one. An Input
+       Group sets --_ui-default-input-* for the input inside it, below the input's own hooks. */
+@property --ui-input-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-input-border-hover {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-input-border-width {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-input-focus-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-input-focus-outline {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-input-focus-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-input-inline-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-input-invalid-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-input-invalid-focus-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-input-min-block-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-input-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-input-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-input-surface {
+  syntax: "*";
+  inherits: false;
+}
+[data-component~="ui-input"][data-v-3c4d919b] {
+  box-sizing: border-box;
+  display: inline-block;
+  inline-size: var(--ui-input-inline-size, 100%);
+  min-inline-size: 0;
+  min-block-size: var(
+    --ui-input-min-block-size,
+    var(--_ui-default-input-min-block-size, var(--ui-control-size-md))
+  );
+  margin: 0;
+  padding: var(--ui-space-2) var(--ui-space-3);
+  appearance: none;
+  padding-inline-start: var(--_ui-default-input-padding-inline-start, var(--ui-space-3));
+  border: var(
+    --ui-input-border-width,
+    var(--_ui-default-input-border-width, var(--ui-border-width))
+  ) solid
+    var(
+      --ui-input-border,
+      var(--_ui-default-input-border, var(--ui-control-border, var(--ui-border-strong)))
+    );
+  border-radius: var(
+    --ui-input-radius,
+    var(--_ui-default-input-radius, var(--ui-field-radius, var(--ui-radius-md)))
+  );
+  background: var(
+    --ui-input-surface,
+    var(--_ui-default-input-surface, var(--ui-control-surface, var(--ui-surface-elevated)))
+  );
+  color: var(--ui-text-primary);
+  font: inherit;
+  line-height: var(--ui-line-height-tight);
+  box-shadow: var(--ui-input-shadow, var(--_ui-default-input-shadow, var(--ui-control-inset)));
+  transition:
+    border-color var(--ui-motion-fast) var(--ui-motion-ease),
+    box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+    background-color var(--ui-motion-fast) var(--ui-motion-ease);
+}
+
+/* Each size reads the hook and then an Input Group's default first, so a group, which draws the frame, can zero it. */
+[data-component~="ui-input"][data-ui-input-state~="size=sm"][data-v-3c4d919b] {
+  min-block-size: var(
+    --ui-input-min-block-size,
+    var(--_ui-default-input-min-block-size, var(--ui-control-size-sm))
+  );
+  padding: var(--ui-space-1) var(--ui-space-2);
+  font-size: var(--ui-font-size-sm);
+}
+[data-component~="ui-input"][data-ui-input-state~="size=lg"][data-v-3c4d919b] {
+  min-block-size: var(
+    --ui-input-min-block-size,
+    var(--_ui-default-input-min-block-size, var(--ui-control-size-lg))
+  );
+  padding: var(--ui-space-3) var(--ui-space-4);
+  font-size: var(--ui-font-size-md);
+}
+
+/* Under touch a small field is still a touch-sized target, as a small button is, and keeps
+   body-size text: below 16px, iOS zooms the page into the focused field. */
+@media (pointer: coarse) {
+[data-component~="ui-input"][data-v-3c4d919b] {
+    min-block-size: var(
+      --ui-input-min-block-size,
+      var(
+        --_ui-default-input-min-block-size,
+        max(var(--ui-control-size-md), var(--ui-control-min-block-size))
+      )
+    );
+}
+[data-component~="ui-input"][data-v-3c4d919b],
+  [data-component~="ui-input"][data-ui-input-state~="size=sm"][data-v-3c4d919b],
+  [data-component~="ui-input"][data-ui-input-state~="size=lg"][data-v-3c4d919b] {
+    font-size: var(--ui-font-size-md);
+}
+[data-component~="ui-input"][data-ui-input-state~="size=sm"][data-v-3c4d919b] {
+    min-block-size: var(
+      --ui-input-min-block-size,
+      var(--_ui-default-input-min-block-size, var(--ui-control-min-block-size))
+    );
+}
+}
+
+/* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
+[data-component~="ui-input"][data-v-3c4d919b]::selection {
+  background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
+  color: inherit;
+}
+[data-component~="ui-input"][data-v-3c4d919b]::placeholder {
+  color: var(--ui-control-placeholder, var(--ui-text-secondary));
+  opacity: 1;
+}
+[data-component~="ui-input"][data-v-3c4d919b]:hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
+  border-color: var(
+    --ui-input-border-hover,
+    var(--_ui-default-input-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary)))
+  );
+}
+[data-component~="ui-input"][data-v-3c4d919b]:focus-visible {
+  border-color: var(
+    --ui-input-focus-border,
+    var(--_ui-default-input-focus-border, var(--ui-control-focus, var(--ui-accent-solid)))
+  );
+  outline: none;
+  box-shadow: var(
+    --ui-input-focus-shadow,
+    var(
+      --_ui-default-input-focus-shadow,
+      var(--ui-control-inset),
+      var(--ui-control-focus-halo-shadow)
+    )
+  );
+}
+
+/* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
+[data-component~="ui-input"][aria-invalid="true"][data-v-3c4d919b],
+[data-component~="ui-input"][data-v-3c4d919b]:is(:user-invalid, [data-user-invalid]) {
+  border-color: var(
+    --ui-input-invalid-border,
+    var(--_ui-default-input-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)))
+  );
+}
+[data-component~="ui-input"][data-v-3c4d919b]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
+  box-shadow: var(
+    --ui-input-invalid-focus-shadow,
+    var(
+      --_ui-default-input-invalid-focus-shadow,
+      var(--ui-control-inset),
+      0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
+        in srgb,
+        var(--ui-input-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
+        transparent
+      )
+    )
+  );
+}
+[data-component~="ui-input"][data-v-3c4d919b]:disabled {
+  background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+  color: var(--ui-disabled-text);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+/* Forced colors drop box shadows, so the focus ring becomes an outline. */
+@media (forced-colors: active) {
+[data-component~="ui-input"][data-v-3c4d919b]:focus-visible {
+    outline: var(
+      --ui-input-focus-outline,
+      var(--_ui-default-input-focus-outline, var(--ui-focus-width) solid Highlight)
+    );
+    outline-offset: var(--ui-border-width);
+}
+}
+
+/* No text-box-trim here: trimming a native input's line box below its line height lets the text
+ * scroll vertically inside the field. Native inputs already center their single line. */
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-input"][hidden][data-v-3c4d919b] {
+  display: none;
+}
+
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-popover-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-popover-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-popover-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-popover-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-popover-viewport-gap {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-popover-offset {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-popover-padding {
+  syntax: "*";
+  inherits: false;
+}
+[data-component~="ui-popover"][data-v-c3034191] {
+  --_ui-popover-surface: var(--ui-popover-surface);
+  --_ui-popover-border: var(--ui-popover-border);
+  --_ui-popover-radius: var(--ui-popover-radius);
+  --_ui-popover-shadow: var(--ui-popover-shadow);
+  --_ui-popover-padding: var(--ui-popover-padding);
+  box-sizing: border-box;
+  max-inline-size: min(
+    20rem,
+    calc(100vw - var(--ui-popover-viewport-gap, var(--ui-space-2)) * 2)
+  );
+  max-block-size: calc(100dvh - var(--ui-popover-viewport-gap, var(--ui-space-2)) * 2);
+  overflow: visible;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+.surface[data-v-c3034191] {
+  box-sizing: border-box;
+  max-inline-size: inherit;
+  max-block-size: inherit;
+  overflow: auto;
+  padding: var(--_ui-popover-padding, var(--ui-space-3));
+  background: var(--_ui-popover-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+  border: var(--ui-border-width) solid
+    var(--_ui-popover-border, var(--ui-overlay-border, var(--ui-border-strong)));
+  border-radius: var(--_ui-popover-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
+  box-shadow: var(
+    --_ui-popover-shadow,
+    var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
+  );
 }
-.heading[data-v-516afff1] {
-  padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-1);
-  color: var(--ui-text-muted);
-  font-size: var(--ui-font-size-xs);
-  font-weight: var(--ui-font-semibold);
+[data-component~="ui-popover"][data-v-c3034191]:not([data-component~="ui-popover"][data-ui-popover-state~="internalOpen"]) {
+  display: none;
 }
-ul[data-v-516afff1] {
+[data-component~="ui-popover"][popover][data-v-c3034191] {
+  position: fixed;
+  inset: auto;
   margin: 0;
-  padding: 0;
-  list-style: none;
-}
-[data-component~="ui-editor-slash-menu-group"][hidden][data-v-516afff1] {
-  display: none;
+  opacity: 0;
+  transform: translateY(-4px) scale(0.99);
+  transition:
+    opacity var(--ui-motion-fast) var(--ui-motion-ease),
+    transform var(--ui-motion-fast) var(--ui-motion-ease),
+    display var(--ui-motion-fast) allow-discrete,
+    overlay var(--ui-motion-fast) allow-discrete;
 }
-
-[data-component~="ui-editor-slash-menu-item"][data-v-dd4dbe75] {
-  display: flex;
-  align-items: center;
-  gap: var(--ui-space-3);
-  min-block-size: 44px;
-  padding: var(--ui-space-2) var(--ui-space-3);
-  cursor: pointer;
-  list-style: none;
+[data-component~="ui-popover"][popover][data-v-c3034191]:popover-open {
+  opacity: 1;
+  transform: translateY(0) scale(1);
 }
-[data-component~="ui-editor-slash-menu-item"][aria-selected="true"][data-v-dd4dbe75] {
-  background: var(--ui-accent-subtle);
+@starting-style {
+[data-component~="ui-popover"][popover][data-v-c3034191]:popover-open {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.99);
 }
-[data-component~="ui-editor-slash-menu-item"][aria-disabled="true"][data-v-dd4dbe75] {
-  background: var(--ui-disabled-surface);
-  cursor: not-allowed;
 }
-[data-component~="ui-editor-slash-menu-item"][aria-disabled="true"] .title[data-v-dd4dbe75],
-[data-component~="ui-editor-slash-menu-item"][aria-disabled="true"] .description[data-v-dd4dbe75],
-[data-component~="ui-editor-slash-menu-item"][aria-disabled="true"] .icon[data-v-dd4dbe75] {
-  color: var(--ui-disabled-text);
+[data-component~="ui-popover"][data-ui-popover-state~="size=sm"][data-v-c3034191] {
+  inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
+  max-inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
 }
-.icon[data-v-dd4dbe75] {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 32px;
-  block-size: 32px;
-  flex: 0 0 auto;
-  color: var(--ui-text-secondary);
-  background: var(--ui-surface-hover);
-  border: var(--ui-border-width) solid var(--ui-border);
-  border-radius: var(--ui-radius-md);
+[data-component~="ui-popover"][data-ui-popover-state~="size=md"][data-v-c3034191] {
+  inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
+  max-inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
 }
-.icon[data-v-dd4dbe75] {
-  --_ui-default-icon-size: 1rem;
+[data-component~="ui-popover"][data-ui-popover-state~="size=lg"][data-v-c3034191] {
+  inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
+  max-inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
 }
-.body[data-v-dd4dbe75] {
-  display: flex;
-  min-inline-size: 0;
-  flex-direction: column;
-  gap: 1px;
+[data-component~="ui-popover"][hidden][data-v-c3034191] {
+  display: none;
 }
-.title[data-v-dd4dbe75], .description[data-v-dd4dbe75] {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+@media (prefers-reduced-motion: reduce) {
+[data-component~="ui-popover"][popover][data-v-c3034191] {
+    transition: none;
 }
-.title[data-v-dd4dbe75] {
-  color: var(--ui-text-primary);
-  font-size: var(--ui-font-size-sm);
-  font-weight: var(--ui-font-medium);
 }
-.description[data-v-dd4dbe75] {
-  color: var(--ui-text-muted);
-  font-size: var(--ui-font-size-xs);
+
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-stack-height {
+  syntax: "*";
+  inherits: false;
 }
-[data-component~="ui-editor-slash-menu-item"][hidden][data-v-dd4dbe75] {
-  display: none;
+@property --ui-stack-gap {
+  syntax: "*";
+  inherits: false;
 }
-
-[data-component~="ui-editor-surface"][data-v-dee440af] {
+[data-component~="ui-stack"][data-v-10ce261e] {
+  --_layout-gap: var(--ui-space-4);
   display: flex;
   flex-direction: column;
+  align-items: stretch;
+  gap: var(--ui-stack-gap, var(--_layout-gap));
   min-inline-size: 0;
   max-inline-size: 100%;
+  margin: 0;
 }
-/* The document renderer consumes these inherited surface settings. They do not style controls. */
-[data-component~="ui-editor-surface"][data-ui-editor-surface-state~="density=compact"][data-v-dee440af] {
-  --_ui-editor-content-min-height: 0px;
-  --_ui-editor-content-padding-block: 0px;
-  --_ui-editor-content-padding-inline: 0px;
-  --_ui-editor-mobile-bottom-space: 0px;
+[data-component~="ui-stack"][data-ui-stack-state~="fill"][data-v-10ce261e] {
+  flex: 1;
+  min-block-size: 0;
 }
-
-[data-component~="ui-editor-table-context-menu"][popover][data-v-f2ebbbc8] {
-  position: fixed;
-  inset: auto;
-  margin: 0;
+[data-component~="ui-stack"][data-ui-stack-state~="height"][data-v-10ce261e] {
+  block-size: calc(var(--ui-stack-height, 0) * 1px);
+  min-block-size: 0;
 }
-[data-component~="ui-editor-table-context-menu"][data-v-f2ebbbc8] {
-  /* The max-width is a promise about the menu's footprint, so it counts padding and border. */
-  box-sizing: border-box;
-  min-width: min(14rem, calc(100vw - 24px));
-  max-width: min(17rem, calc(100vw - 24px));
-  max-height: min(28rem, calc(100vh - 24px));
-  padding: var(--ui-space-2);
-  background: var(--ui-surface);
-  border: var(--ui-border-width) solid var(--ui-border-strong);
-  border-radius: var(--ui-radius-lg);
-  box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  scrollbar-width: thin;
+[data-component~="ui-stack"][data-ui-stack-state~="gap=none"][data-v-10ce261e] {
+  --_layout-gap: 0px;
 }
-.section[data-v-f2ebbbc8] {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
+[data-component~="ui-stack"][data-ui-stack-state~="gap=xs"][data-v-10ce261e] {
+  --_layout-gap: var(--ui-space-2);
 }
-[data-component~="ui-editor-table-context-menu"] button[data-v-f2ebbbc8] {
-  display: flex;
+[data-component~="ui-stack"][data-ui-stack-state~="gap=s"][data-v-10ce261e] {
+  --_layout-gap: var(--ui-space-3);
+}
+[data-component~="ui-stack"][data-ui-stack-state~="gap=m"][data-v-10ce261e] {
+  --_layout-gap: var(--ui-space-4);
+}
+[data-component~="ui-stack"][data-ui-stack-state~="gap=l"][data-v-10ce261e] {
+  --_layout-gap: var(--ui-space-5);
+}
+[data-component~="ui-stack"][data-ui-stack-state~="gap=xl"][data-v-10ce261e] {
+  --_layout-gap: var(--ui-space-6);
+}
+[data-component~="ui-stack"][data-ui-stack-state~="align=start"][data-v-10ce261e] {
+  align-items: flex-start;
+}
+[data-component~="ui-stack"][data-ui-stack-state~="align=center"][data-v-10ce261e] {
   align-items: center;
-  gap: var(--ui-space-2);
-  width: 100%;
-  text-align: left;
-  min-height: 32px;
-  padding: var(--ui-space-2) var(--ui-space-2);
-  border: none;
-  border-radius: var(--ui-radius-sm);
-  background: none;
-  font-size: var(--ui-font-size-sm);
-  cursor: pointer;
-  color: var(--ui-text);
 }
-[data-component~="ui-editor-table-context-menu"] button[data-v-f2ebbbc8] {
-  --_ui-default-icon-size: 1rem;
-  --_ui-default-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
+[data-component~="ui-stack"][data-ui-stack-state~="align=end"][data-v-10ce261e] {
+  align-items: flex-end;
 }
-[data-component~="ui-editor-table-context-menu"] button[data-v-f2ebbbc8]:hover:not(:disabled) {
-  background: var(--ui-surface-hover);
+[data-component~="ui-stack"][data-ui-stack-state~="justify=center"][data-v-10ce261e] {
+  justify-content: center;
 }
-[data-component~="ui-editor-table-context-menu"] button.selected[data-v-f2ebbbc8] {
-  background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
+[data-component~="ui-stack"][data-ui-stack-state~="justify=end"][data-v-10ce261e] {
+  justify-content: flex-end;
 }
-[data-component~="ui-editor-table-context-menu"] button.danger[data-v-f2ebbbc8] {
-  color: var(--ui-danger);
+[data-component~="ui-stack"][data-ui-stack-state~="justify=between"][data-v-10ce261e] {
+  justify-content: space-between;
 }
 
-/* Swatches wrap like words: the row asks for the menu's full width, and a narrower menu fits fewer. */
-.swatches[data-v-f2ebbbc8] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 3px;
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-stack"][hidden][data-v-10ce261e] {
+  display: none;
 }
 
-/* Three to a row at the menu's full width; 5rem keeps the longest label, "Default", whole. */
-[data-component~="ui-editor-table-context-menu"] .swatch-button[data-v-f2ebbbc8] {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ui-space-2);
-  flex: 1 0 5rem;
-  min-width: 5rem;
-  max-width: calc((100% - 6px) / 3);
-  padding-inline-end: var(--ui-space-1);
-}
-.swatch[data-v-f2ebbbc8] {
-  display: inline-flex;
-  width: 1rem;
-  height: 1rem;
-  border-radius: var(--ui-radius-round);
-  border: var(--ui-border-width) solid var(--ui-border);
-  background: var(--_swatch, #fff);
-  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
-  flex-shrink: 0;
+/* Running text, set on the type scale and in a tone that says what it is, so a view never styles
+       text of its own. The root is a paragraph unless as= names a span, div, small, strong, label, or
+       heading. */
+[data-component~="ui-text"][data-ui-text-state~="grow"][data-v-a12d976f] {
+  flex: 1;
 }
-.swatch.default[data-v-f2ebbbc8] {
-  position: relative;
-  background:
-    linear-gradient(
-      135deg,
-      transparent calc(50% - 1px),
-      var(--ui-text-muted) calc(50% - 1px),
-      var(--ui-text-muted) calc(50% + 1px),
-      transparent calc(50% + 1px)
-    ),
-    var(--ui-surface);
+[data-component~="ui-text"][data-v-a12d976f] {
+  margin: 0;
+  min-inline-size: 0;
+  color: var(--ui-text-primary);
+  text-align: start;
 }
-.swatch-label[data-v-f2ebbbc8] {
-  min-width: 0;
-  white-space: nowrap;
+
+/* A heading drops the browser's heading size and weight, so size and weight set it as they set
+   any text, and inherit keeps the text around it. */
+[data-component~="ui-text"][data-v-a12d976f]:is(h2, h3, h4, h5, h6) {
+  font-size: inherit;
+  font-weight: inherit;
 }
-.heading[data-v-f2ebbbc8] {
-  padding: var(--ui-space-1) var(--ui-space-2);
-  font-size: var(--ui-font-size-2xs);
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  color: var(--ui-text-muted);
+[data-component~="ui-text"][data-ui-text-state~="size=xs"][data-v-a12d976f] {
+  font-size: var(--ui-font-size-xs);
+  line-height: var(--ui-line-height);
 }
-.sep[data-v-f2ebbbc8] {
-  height: 1px;
-  background: var(--ui-border-divider);
-  margin: var(--ui-space-1) 0;
+[data-component~="ui-text"][data-ui-text-state~="size=sm"][data-v-a12d976f] {
+  font-size: var(--ui-font-size-sm);
+  line-height: var(--ui-line-height);
 }
-
-/* Separators divide sections, so none sits above the first. */
-.sep[data-v-f2ebbbc8]:first-child {
-  display: none;
+[data-component~="ui-text"][data-ui-text-state~="size=md"][data-v-a12d976f] {
+  font-size: var(--ui-font-size-md);
+  line-height: var(--ui-line-height);
 }
-[data-component~="ui-editor-table-context-menu"][hidden][data-v-f2ebbbc8] {
-  display: none;
+[data-component~="ui-text"][data-ui-text-state~="size=lg"][data-v-a12d976f] {
+  font-size: var(--ui-font-size-lg);
+  line-height: var(--ui-line-height-relaxed);
 }
 
-[data-component~="ui-editor-table-overlay"][data-v-0e632fe0] {
-  display: block;
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-  pointer-events: none;
+/* Opt in at the text owner; trimming does not inherit from a surrounding layout. */
+[data-component~="ui-text"][data-ui-text-state~="trim"][data-v-a12d976f] {
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
 }
-[data-component~="ui-editor-table-overlay"][data-v-0e632fe0] {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-  pointer-events: none;
+[data-component~="ui-text"][data-ui-text-state~="tone=secondary"][data-v-a12d976f] {
+  color: var(--ui-text-secondary);
 }
-.rows[data-v-0e632fe0],
-.cols[data-v-0e632fe0] {
-  pointer-events: none;
-  position: absolute;
+[data-component~="ui-text"][data-ui-text-state~="tone=muted"][data-v-a12d976f] {
+  color: var(--ui-text-muted);
 }
-.rows[data-v-0e632fe0] {
-  inset: 0;
-  width: 100%;
+[data-component~="ui-text"][data-ui-text-state~="tone=accent"][data-v-a12d976f] {
+  color: var(--ui-accent-active);
 }
-.cols[data-v-0e632fe0] {
-  inset: 0;
-  height: 100%;
+/* Every status tone uses the text-safe token a subtle badge sets its words in, so text and badges
+   in one tone match, and each holds 4.5:1 on sunken surfaces where some base colours fall short. */
+[data-component~="ui-text"][data-ui-text-state~="tone=danger"][data-v-a12d976f] {
+  color: var(--ui-danger-subtle-text);
 }
-.control[data-v-0e632fe0] {
-  position: absolute;
-  z-index: 1;
-  pointer-events: none;
+[data-component~="ui-text"][data-ui-text-state~="tone=success"][data-v-a12d976f] {
+  color: var(--ui-success-subtle-text);
 }
-.handle[data-v-0e632fe0] {
-  position: absolute;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: var(--ui-border-width) solid var(--ui-affordance-near-color, var(--ui-border-strong));
-  border-radius: var(--ui-radius-round);
-  background: color-mix(in srgb, var(--ui-surface-elevated) 96%, transparent);
-  color: var(--ui-affordance-near-color, var(--ui-text-secondary));
-  font: inherit;
-  font-size: 16px;
-  line-height: 1;
-  box-shadow: var(--ui-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.05));
-  opacity: 0;
-  scale: 0.72;
-  transition:
-    opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
-    scale var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
-    color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
-    background-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
-    border-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
-  pointer-events: auto;
-  cursor: pointer;
+[data-component~="ui-text"][data-ui-text-state~="tone=info"][data-v-a12d976f] {
+  color: var(--ui-info-subtle-text);
 }
-.handle[data-v-0e632fe0] {
-  --_ui-default-icon-size: 14px;
-  --_ui-default-icon-stroke-width: 2;
+[data-component~="ui-text"][data-ui-text-state~="tone=warning"][data-v-a12d976f] {
+  color: var(--ui-warning-subtle-text);
 }
-.handle[data-ui-proximity="near"][data-v-0e632fe0],
-.control.active .handle[data-v-0e632fe0],
-.handle[data-v-0e632fe0]:focus-visible {
-  opacity: 1;
-  scale: 1;
+[data-component~="ui-text"][data-ui-text-state~="weight=normal"][data-v-a12d976f] {
+  font-weight: var(--ui-font-normal);
 }
-.control.active .handle[data-v-0e632fe0],
-.handle[data-v-0e632fe0]:focus-visible {
-  border-color: var(--ui-affordance-direct-color, var(--ui-accent-solid));
-  background: var(--ui-affordance-direct-color, var(--ui-accent-solid));
-  color: var(--ui-text-on-accent);
-  box-shadow: var(--ui-shadow-sm, 0 1px 3px rgb(0 0 0 / 0.1));
+[data-component~="ui-text"][data-ui-text-state~="weight=medium"][data-v-a12d976f] {
+  font-weight: var(--ui-font-medium);
 }
-.handle[data-v-0e632fe0]:focus-visible,
-.selector[data-v-0e632fe0]:focus-visible,
-.cell-menu[data-v-0e632fe0]:focus-visible {
-  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-  outline-offset: var(--ui-focus-width);
+[data-component~="ui-text"][data-ui-text-state~="weight=semibold"][data-v-a12d976f] {
+  font-weight: var(--ui-font-semibold);
 }
-.control.row[data-v-0e632fe0] {
-  left: 0;
-  width: 100%;
-  height: 0;
+[data-component~="ui-text"][data-ui-text-state~="variant=eyebrow"][data-v-a12d976f] {
+  font-size: var(--ui-font-size-xs);
+  font-weight: var(--ui-font-semibold);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
 }
-.control.row .handle[data-v-0e632fe0] {
-  top: -12px;
-  left: -30px;
+[data-component~="ui-text"][data-ui-text-state~="variant=code"][data-v-a12d976f] {
+  font-family: var(--ui-font-family-mono);
 }
-.control.col[data-v-0e632fe0] {
-  top: 0;
-  width: 0;
-  height: 100%;
+
+/* A link in running text is underlined, so it stands apart from the words around it by more than
+   colour. */
+[data-component~="ui-text"] a[data-v-a12d976f-s] {
+  color: var(--ui-accent-active);
+  text-decoration: underline;
+  text-decoration-thickness: 0.06em;
+  text-underline-offset: 0.18em;
 }
-.control.col .handle[data-v-0e632fe0] {
-  top: -30px;
-  left: -12px;
+[data-component~="ui-text"][data-ui-text-state~="truncate"][data-v-a12d976f] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.line[data-v-0e632fe0] {
-  position: absolute;
-  background: var(--ui-affordance-direct-color, var(--ui-accent-solid));
-  opacity: 0;
-  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
+
+/* Trim ends the layout box at the baseline; preserve descending ink while clipping long labels. */
+[data-component~="ui-text"][data-ui-text-state~="trim"][data-ui-text-state~="truncate"][data-v-a12d976f] {
+  overflow-x: clip;
+  overflow-y: visible;
 }
-.control.row .line[data-v-0e632fe0] {
-  inset: calc(-0.5 * var(--ui-accent-line-width)) 0 auto;
-  height: var(--ui-accent-line-width);
+[data-component~="ui-text"][data-ui-text-state~="align=center"][data-v-a12d976f] {
+  text-align: center;
 }
-.control.col .line[data-v-0e632fe0] {
-  inset: 0 auto 0 calc(-0.5 * var(--ui-accent-line-width));
-  width: var(--ui-accent-line-width);
+[data-component~="ui-text"][data-ui-text-state~="font=sans"][data-v-a12d976f] {
+  font-family: var(--ui-font-family-sans, sans-serif);
 }
-.control.active .line[data-v-0e632fe0] {
-  opacity: 0.8;
+[data-component~="ui-text"][data-ui-text-state~="wrap=anywhere"][data-v-a12d976f] {
+  overflow-wrap: anywhere;
 }
-.guide[data-v-0e632fe0] {
-  position: absolute;
-  width: var(--ui-affordance-guide-size);
-  height: var(--ui-affordance-guide-size);
-  border-radius: var(--ui-radius-round);
-  background: var(--ui-affordance-guide-color, var(--ui-border-strong));
-  opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
-  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-text"][hidden][data-v-a12d976f] {
+  display: none;
 }
-.control.row .guide[data-v-0e632fe0] {
-  left: -10px;
-  top: -2px;
+
+[data-component~="ui-editor-insert-table-grid"][data-v-a8e7e3a2] {
+  padding: var(--ui-space-3);
+  background: var(--ui-surface);
+  border: var(--ui-border-width) solid var(--ui-border-strong);
+  border-radius: var(--ui-radius-md);
+  box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
 }
-.control.col .guide[data-v-0e632fe0] {
-  left: -2px;
-  top: -10px;
+.hint[data-v-a8e7e3a2] {
+  margin: 0 0 var(--ui-space-2);
+  font-size: var(--ui-font-size-sm);
+  color: var(--ui-text-muted);
 }
-.control:has(.handle[data-ui-proximity="near"]) .guide[data-v-0e632fe0],
-.control.active .guide[data-v-0e632fe0] {
-  opacity: 0;
+.grid[data-v-a8e7e3a2] {
+  display: grid;
+  grid-template-columns: repeat(var(--_cols, 8), 1.25rem);
+  grid-template-rows: repeat(var(--_rows, 8), 1.25rem);
+  gap: 2px;
+  margin-bottom: var(--ui-space-2);
+  max-inline-size: 100%;
+  overflow: auto;
+  --_ui-scroll-fade-direction: to right;
+  --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
+  mask-image: linear-gradient(
+    var(--_ui-scroll-fade-direction),
+    transparent,
+    #000 var(--_ui-scroll-fade-start),
+    #000 calc(100% - var(--_ui-scroll-fade-end)),
+    transparent
+  );
+  animation:
+    ui-scroll-fade-start linear,
+    ui-scroll-fade-start-hold linear,
+    ui-scroll-fade-end-hold linear,
+    ui-scroll-fade-end linear;
+  animation-timeline: scroll(self inline);
+  animation-range:
+    0 var(--_ui-scroll-fade-size),
+    var(--_ui-scroll-fade-size) calc(100% + 1px),
+    -1px calc(100% - var(--_ui-scroll-fade-size)),
+    calc(100% - var(--_ui-scroll-fade-size)) 100%;
 }
-.tooltip[data-v-0e632fe0] {
-  position: absolute;
-  z-index: 2;
-  top: calc(100% + 6px);
-  left: 50%;
-  width: max-content;
-  max-width: 14rem;
-  padding: var(--ui-space-1) var(--ui-space-2);
+[data-component~="ui-editor-insert-table-grid"]:dir(rtl) .grid[data-v-a8e7e3a2] {
+  --_ui-scroll-fade-direction: to left;
+}
+.cell[data-v-a8e7e3a2] {
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  border: var(--ui-border-width) solid var(--ui-control-border);
   border-radius: var(--ui-radius-sm);
-  background: var(--ui-text-primary);
-  color: var(--ui-surface-elevated);
-  font-size: var(--ui-font-size-xs);
-  font-weight: var(--ui-font-medium);
-  line-height: var(--ui-line-height-md);
-  opacity: 0;
-  transform: translateX(-50%);
-  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
-  pointer-events: none;
+  background: var(--ui-surface);
+  cursor: pointer;
 }
-.control.row .tooltip[data-v-0e632fe0] {
-  top: 50%;
-  left: auto;
-  right: calc(100% + 8px);
-  transform: translateY(-50%);
+.cell.selected[data-v-a8e7e3a2] {
+  background: var(--ui-accent-solid, var(--ui-accent));
+  border-color: var(--ui-accent-solid, var(--ui-accent));
 }
-.control.active .tooltip[data-v-0e632fe0],
-.handle:focus-visible .tooltip[data-v-0e632fe0] {
-  opacity: 1;
+.cell[data-v-a8e7e3a2]:focus-visible {
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+  outline-offset: calc(-1 * var(--ui-focus-width));
 }
-.selector[data-v-0e632fe0],
-.cell-menu[data-v-0e632fe0] {
-  position: absolute;
-  z-index: 2;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border: var(--ui-border-width) solid transparent;
-  background: transparent;
-  color: var(--ui-text-secondary);
-  box-shadow: none;
-  pointer-events: auto;
+.header[data-v-a8e7e3a2] {
+  display: block;
+  margin-bottom: var(--ui-space-2);
+  font-size: var(--ui-font-size-sm);
   cursor: pointer;
-  transition:
-    color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
-    background-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
-    border-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
-    box-shadow var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
 }
-.selector[data-v-0e632fe0]:hover,
-.cell-menu[data-v-0e632fe0]:hover {
-  background: var(--ui-surface-muted);
-  color: var(--ui-text-primary);
-  box-shadow: var(--ui-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.05));
+@media (pointer: coarse) {
+.grid[data-v-a8e7e3a2] {
+    grid-template-columns: repeat(var(--_cols, 8), 44px);
+    grid-template-rows: repeat(var(--_rows, 8), 44px);
 }
-.selector[data-v-0e632fe0] {
-  border-radius: var(--ui-radius-round);
-  touch-action: none;
-  cursor: grab;
+.cell[data-v-a8e7e3a2] {
+    width: 44px;
+    height: 44px;
 }
-.selector[data-v-0e632fe0]:active {
-  cursor: grabbing;
 }
-.selector[data-v-0e632fe0]::before {
-  content: "";
-  position: absolute;
-  inset: 50% auto auto 50%;
-  border-radius: var(--ui-radius-round);
-  background: var(--ui-affordance-guide-color, var(--ui-border-strong));
-  opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
-  transform: translate(-50%, -50%);
-  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
-  pointer-events: none;
+@media (forced-colors: active) {
+.cell[data-v-a8e7e3a2]:focus-visible {
+    outline-color: Highlight;
 }
-.selector .glyph[data-v-0e632fe0] {
-  display: block;
-  width: 14px;
-  height: 14px;
-  --_ui-default-icon-size: 14px;
-  --_ui-default-icon-stroke-width: 2;
-  opacity: 0;
-  transform: scale(0.72);
-  transition:
-    opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
-    transform var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
 }
-.selector[data-v-0e632fe0]:hover::before,
-.selector[data-v-0e632fe0]:focus-visible::before {
-  opacity: 0;
+[data-component~="ui-editor-insert-table-grid"][hidden][data-v-a8e7e3a2] {
+  display: none;
 }
-.selector:hover .glyph[data-v-0e632fe0],
-.selector:focus-visible .glyph[data-v-0e632fe0] {
-  opacity: 1;
-  transform: scale(1);
+
+[data-component~="ui-editor-mention-menu"][popover][data-v-f27cd779] {
+  position: fixed;
+  inset: auto;
+  margin: 0;
 }
-.selector.row[data-v-0e632fe0] {
-  left: -9px;
-  width: 18px;
-  height: 32px;
-  transform: translateY(-50%);
+[data-component~="ui-editor-mention-menu"][data-v-f27cd779] {
+  user-select: none;
 }
-.selector.row[data-v-0e632fe0]::before {
-  width: 2px;
-  height: 16px;
+[data-component~="ui-editor-mention-menu"][data-v-f27cd779] {
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  background: var(--ui-surface);
+  border: var(--ui-border-width) solid var(--ui-border-strong);
+  border-radius: var(--ui-radius-dialog);
+  box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
 }
-.selector.column[data-v-0e632fe0] {
-  top: -9px;
-  width: 32px;
-  height: 18px;
-  transform: translateX(-50%);
+.header[data-v-f27cd779] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ui-space-3);
+  padding: var(--ui-space-2) var(--ui-space-3);
+  color: var(--ui-text-secondary);
+  border-bottom: var(--ui-border-width) solid var(--ui-border-divider);
+  font-size: var(--ui-font-size-xs);
+  font-weight: var(--ui-font-semibold);
 }
-.selector.column[data-v-0e632fe0]::before {
-  width: 16px;
-  height: 2px;
+[data-component~="ui-editor-mention-menu"] > .header[data-v-f27cd779]:empty,
+[data-component~="ui-editor-mention-menu"] > .empty[data-v-f27cd779]:empty {
+  display: none;
 }
-@media (hover: none), (pointer: coarse) {
-.selector[data-v-0e632fe0]::before {
-    opacity: 0;
+.empty[data-v-f27cd779] {
+  padding: var(--ui-space-3);
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-sm);
 }
-.selector .glyph[data-v-0e632fe0] {
-    opacity: 1;
-    transform: none;
+.hint[data-v-f27cd779] {
+  overflow: hidden;
+  color: var(--ui-text-muted);
+  font-weight: var(--ui-font-normal);
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
+.list[data-v-f27cd779] {
+  max-height: 280px;
+  padding: var(--ui-space-1) 0;
+  margin: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  list-style: none;
+  /* Each edge that hides content fades: the scroll fade every Looma scroller uses (see ui-scroll-area). */
+  --_ui-scroll-fade-direction: to bottom;
+  --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
+  mask-image: linear-gradient(
+    var(--_ui-scroll-fade-direction),
+    transparent,
+    #000 var(--_ui-scroll-fade-start),
+    #000 calc(100% - var(--_ui-scroll-fade-end)),
+    transparent
+  );
+  animation:
+    ui-scroll-fade-start linear,
+    ui-scroll-fade-start-hold linear,
+    ui-scroll-fade-end-hold linear,
+    ui-scroll-fade-end linear;
+  animation-timeline: scroll(self block);
+  animation-range:
+    0 var(--_ui-scroll-fade-size),
+    var(--_ui-scroll-fade-size) calc(100% + 1px),
+    -1px calc(100% - var(--_ui-scroll-fade-size)),
+    calc(100% - var(--_ui-scroll-fade-size)) 100%;
 }
-.cell-menu[data-v-0e632fe0] {
-  width: 24px;
-  height: 24px;
-  border-radius: var(--ui-radius-sm);
-  background: color-mix(in srgb, var(--ui-surface-muted) 78%, transparent);
+.item[data-v-f27cd779] {
+  display: flex;
+  align-items: center;
+  min-height: 44px;
+  padding: var(--ui-space-2) var(--ui-space-3);
+  gap: var(--ui-space-3);
+  cursor: pointer;
 }
-.cell-menu[data-v-0e632fe0] {
-  --_ui-default-icon-size: 15px;
-  --_ui-default-icon-stroke-width: 2;
+.item.active[data-v-f27cd779] {
+  background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
 }
-.drop-indicator[data-v-0e632fe0] {
-  position: absolute;
-  z-index: 3;
-  background: var(--ui-accent-solid);
-  box-shadow: 0 0 0 var(--ui-border-width) var(--ui-surface);
-  pointer-events: none;
+
+/* The highlight and the initials circle share a tint; on the highlighted row the circle takes
+   the surface and a fine accent ring, so the initials stay visible. */
+.item.active .avatar[data-v-f27cd779] {
+  background: var(--ui-surface);
+  box-shadow: inset 0 0 0 1px var(--ui-accent-soft, var(--ui-accent-subtle));
 }
-.drop-indicator.row[data-v-0e632fe0] {
-  left: 0;
-  width: 100%;
-  height: var(--ui-accent-line-width);
+.avatar[data-v-f27cd779] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  flex: 0 0 auto;
+  color: var(--ui-accent-active, var(--ui-accent-solid));
+  background: var(--ui-accent-soft, var(--ui-accent-subtle));
+  border-radius: var(--ui-radius-round);
+  font-size: var(--ui-font-size-xs);
+  font-weight: var(--ui-font-semibold);
 }
-.drop-indicator.column[data-v-0e632fe0] {
-  top: 0;
-  width: var(--ui-accent-line-width);
-  height: 100%;
+.body[data-v-f27cd779] {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+.label[data-v-f27cd779],
+.detail[data-v-f27cd779] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.label[data-v-f27cd779] {
+  color: var(--ui-text-primary);
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-medium);
+}
+.detail[data-v-f27cd779],
+.loading[data-v-f27cd779] {
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-xs);
 }
-.drop-indicator[hidden][data-v-0e632fe0] {
-  display: none;
+.loading[data-v-f27cd779] {
+  min-height: 44px;
+  padding: var(--ui-space-3);
 }
-[data-component~="ui-editor-table-overlay"][hidden][data-v-0e632fe0] {
-  display: none;
+@media (max-width: 767px) {
+[data-component~="ui-editor-mention-menu"][data-v-f27cd779] {
+    border-bottom: 0;
+    border-radius: var(--ui-radius-dialog) var(--ui-radius-dialog) 0 0;
 }
-
-.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"][data-v-8c2d4497] {
-  min-width: max-content;
-  min-height: 100%;
-  padding: 0;
-  background: transparent;
-  border: 0;
-  border-radius: 0;
-  box-shadow: none;
-  backdrop-filter: none;
+.list[data-v-f27cd779] {
+    max-height: calc(60dvh - 48px);
 }
-.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button[data-v-8c2d4497] {
-  min-height: 44px;
-  background: transparent;
 }
-.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.active[data-v-8c2d4497],
-.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.selected[data-v-8c2d4497] {
-  background: var(--ui-accent-soft, var(--ui-accent-subtle));
+[data-component~="ui-editor-mention-menu"][hidden][data-v-f27cd779] {
+  display: none;
 }
-[data-component~="ui-editor-table-toolbar"][data-v-8c2d4497] {
-  display: inline-flex;
+
+[data-component~="ui-editor-mention-menu-item"][data-v-aa8aa3c4] {
+  display: flex;
   align-items: center;
-  gap: var(--ui-space-1);
-  padding: var(--ui-space-1);
-  background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
-  border: var(--ui-border-width) solid var(--ui-border-strong);
-  border-radius: calc(var(--ui-radius-md) + 2 * var(--ui-border-width));
-  box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
-  backdrop-filter: blur(10px);
+  min-block-size: 44px;
+  padding: var(--ui-space-2) var(--ui-space-3);
+  gap: var(--ui-space-3);
+  cursor: pointer;
+  list-style: none;
 }
-.group[data-v-8c2d4497] {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-  overflow: hidden;
+[data-component~="ui-editor-mention-menu-item"][aria-selected="true"][data-v-aa8aa3c4] {
+  background: var(--ui-accent-subtle);
 }
-.sep[data-v-8c2d4497] {
-  width: 1px;
-  align-self: stretch;
-  background: var(--ui-border-divider);
+
+/* The highlight and the initials circle share a tint; on the highlighted row the circle takes
+   the surface and a fine accent ring, so the initials stay visible. */
+[data-component~="ui-editor-mention-menu-item"][aria-selected="true"] .avatar[data-v-aa8aa3c4] {
+  background: var(--ui-surface);
+  box-shadow: inset 0 0 0 1px var(--ui-accent-soft);
 }
-.overflow[data-v-8c2d4497] {
-  position: relative;
+
+/* A slotted Avatar (a person's photo) is its own circle. */
+[data-component~="ui-editor-mention-menu-item"] .avatar[data-v-aa8aa3c4]:has(> [data-component~="ui-avatar"]) {
+  background: none;
+  box-shadow: none;
 }
-[data-component~="ui-editor-table-toolbar"] button[data-v-8c2d4497] {
+.avatar[data-v-aa8aa3c4] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--ui-space-2);
-  min-height: 32px;
-  border: 0;
-  border-radius: var(--ui-radius-sm);
-  background: transparent;
-  color: var(--ui-text-primary);
-  cursor: pointer;
-  font-size: var(--ui-font-size-sm);
-  font-weight: 500;
-  line-height: 1;
-  padding: var(--ui-space-2) var(--ui-space-2);
-  white-space: nowrap;
-}
-[data-component~="ui-editor-table-toolbar"] button[data-v-8c2d4497]:hover {
-  background: var(--ui-surface-hover);
-}
-[data-component~="ui-editor-table-toolbar"] button.active[data-v-8c2d4497] {
-  background: var(--ui-accent-soft, var(--ui-accent-subtle));
+  inline-size: 32px;
+  block-size: 32px;
+  flex: 0 0 auto;
   color: var(--ui-accent-active);
+  background: var(--ui-accent-soft);
+  border-radius: var(--ui-radius-round);
+  font-size: var(--ui-font-size-xs);
+  font-weight: var(--ui-font-semibold);
 }
-.group button[data-v-8c2d4497] {
-  border-radius: var(--ui-radius-sm);
-}
-.group button + button[data-v-8c2d4497] {
-  border-left: 0;
-}
-[data-component~="ui-editor-table-toolbar"] .more[data-v-8c2d4497] {
-  border: 0;
-  border-radius: var(--ui-radius-sm);
+.body[data-v-aa8aa3c4] {
+  display: flex;
+  min-inline-size: 0;
+  flex-direction: column;
 }
-[data-component~="ui-editor-table-toolbar"] button.danger[data-v-8c2d4497] {
-  color: var(--ui-danger);
+.label[data-v-aa8aa3c4], .detail[data-v-aa8aa3c4] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-[data-component~="ui-editor-table-toolbar"][data-v-8c2d4497] {
-  --_ui-default-icon-size: var(--ui-editor-toolbar-icon-size, 1rem);
-  --_ui-default-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
+.label[data-v-aa8aa3c4] {
+  color: var(--ui-text-primary);
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-medium);
 }
-.chevron[data-v-8c2d4497] {
-  display: inline-flex;
-  --_ui-default-icon-size: 0.875rem;
+.detail[data-v-aa8aa3c4] {
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-xs);
 }
-[data-component~="ui-editor-table-toolbar"] .icon-button[data-v-8c2d4497] {
-  width: 32px;
-  padding-inline: 0;
+[data-component~="ui-editor-mention-menu-item"][hidden][data-v-aa8aa3c4] {
+  display: none;
 }
-.menu[data-v-8c2d4497] {
-  box-sizing: border-box;
+
+[data-component~="ui-editor-slash-menu"][popover][data-v-a85c3b18] {
   position: fixed;
   inset: auto;
   margin: 0;
-  min-width: 12rem;
-  max-width: min(17rem, calc(100vw - 24px));
-  padding: var(--ui-space-1);
+}
+[data-component~="ui-editor-slash-menu"][data-v-a85c3b18] {
+  user-select: none;
+}
+[data-component~="ui-editor-slash-menu"][data-v-a85c3b18] {
   background: var(--ui-surface);
   border: var(--ui-border-width) solid var(--ui-border-strong);
-  border-radius: var(--ui-radius-md);
-  box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+  border-radius: var(--ui-radius-dialog);
+  box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
+  overflow: hidden;
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  z-index: 2;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  scrollbar-width: thin;
-}
-.menu-section + .menu-section[data-v-8c2d4497] {
-  margin-top: var(--ui-space-1);
-  padding-top: var(--ui-space-1);
-  border-top: var(--ui-border-width) solid var(--ui-border-divider);
-}
-.menu-heading[data-v-8c2d4497] {
-  padding: var(--ui-space-1) var(--ui-space-2);
-  font-size: var(--ui-font-size-2xs);
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  color: var(--ui-text-muted);
-}
-.menu button[data-v-8c2d4497] {
-  display: flex;
-  justify-content: flex-start;
-  width: 100%;
-  text-align: left;
-}
-.swatches[data-v-8c2d4497] {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 2px;
-}
-[data-component~="ui-editor-table-toolbar"] .swatch-button[data-v-8c2d4497] {
-  gap: var(--ui-space-1);
-  justify-content: flex-start;
-}
-.swatch[data-v-8c2d4497] {
-  width: 14px;
-  height: 14px;
-  flex: 0 0 14px;
-  border: var(--ui-border-width) solid color-mix(in srgb, var(--ui-border) 80%, #000);
-  border-radius: var(--ui-radius-round);
-  background: var(--_swatch);
 }
-.swatch.default[data-v-8c2d4497] {
-  background:
-    linear-gradient(135deg, transparent 44%, var(--ui-danger) 46% 54%, transparent 56%),
-    var(--ui-surface);
+@media (max-width: 767px) {
+[data-component~="ui-editor-slash-menu"][data-v-a85c3b18] {
+    border-radius: var(--ui-radius-dialog) var(--ui-radius-dialog) 0 0;
+    border-bottom: none;
 }
-.swatch-button.selected[data-v-8c2d4497] {
-  background: var(--ui-accent-soft, var(--ui-accent-subtle));
 }
-[data-component~="ui-editor-table-toolbar"][hidden][data-v-8c2d4497] {
+.header[data-v-a85c3b18] {
   display: none;
-}
-
-[data-component~="ui-editor-toolbar"][data-v-fa1e480e] {
-  position: sticky;
-  top: 0;
-  z-index: var(--ui-editor-toolbar-z-index, 10);
-  display: flex;
-  align-items: center;
-  padding: var(--ui-editor-toolbar-padding-block, 6px)
-    var(--ui-editor-toolbar-padding-inline, 12px);
-  min-height: var(--ui-editor-toolbar-min-height, 48px);
-  background: var(--ui-editor-toolbar-surface, var(--ui-surface));
-  border-bottom: var(--ui-border-width) solid
-    var(--ui-editor-toolbar-border, var(--ui-border-divider));
-}
-
-/* One row, always. When the controls outgrow the space, the row scrolls sideways rather than
-   wrapping into several lines, and a fade at each edge that has more to show says so. */
-.strip[data-v-fa1e480e] {
-  display: flex;
-  flex: 1 1 auto;
   align-items: center;
-  justify-content: flex-start;
-  gap: var(--ui-editor-toolbar-gap, 2px);
-  min-width: 0;
-  overflow-x: auto;
-  overflow-y: hidden;
-  overscroll-behavior-inline: contain;
-  scrollbar-width: none;
+  gap: var(--ui-space-2);
+  padding: var(--ui-space-3) var(--ui-space-4);
+  border-bottom: var(--ui-border-width) solid var(--ui-border-divider);
+  font-size: var(--ui-font-size-xs);
+  color: var(--ui-text-muted);
+  font-weight: var(--ui-font-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
-.strip[data-v-fa1e480e]::-webkit-scrollbar {
+[data-component~="ui-editor-slash-menu"] > .header[data-v-a85c3b18]:empty,
+[data-component~="ui-editor-slash-menu"] > .footer[data-v-a85c3b18]:empty,
+[data-component~="ui-editor-slash-menu"] > .empty[data-v-a85c3b18]:empty {
   display: none;
 }
-.strip > [data-v-fa1e480e-s] {
-  flex: 0 0 auto;
+.empty[data-v-a85c3b18] {
+  padding: var(--ui-space-3);
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-sm);
+}
+@media (max-width: 767px) {
+.header[data-v-a85c3b18] {
+    display: flex;
+}
 }
-
-/* The edge fades are the scroll fade every Looma scroller uses (see ui-scroll-area), a mask on the
-   strip, so a floating toolbar's border and shadow stay whole. */
-.strip[data-v-fa1e480e] {
-  --_ui-scroll-fade-direction: to right;
-  --_ui-scroll-fade-size: var(--ui-editor-toolbar-fade-size, var(--ui-scroll-fade-size, 24px));
+.list[data-v-a85c3b18] {
+  list-style: none;
+  margin: 0;
+  padding: var(--ui-space-1) 0;
+  overflow-y: auto;
+  max-height: 280px;
+  overscroll-behavior: contain;
+  /* Each edge that hides content fades: the scroll fade every Looma scroller uses (see ui-scroll-area). */
+  --_ui-scroll-fade-direction: to bottom;
+  --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
   mask-image: linear-gradient(
     var(--_ui-scroll-fade-direction),
     transparent,
@@ -4662,476 +5030,519 @@ ul[data-v-516afff1] {
     ui-scroll-fade-start-hold linear,
     ui-scroll-fade-end-hold linear,
     ui-scroll-fade-end linear;
-  animation-timeline: scroll(self inline);
+  animation-timeline: scroll(self block);
   animation-range:
     0 var(--_ui-scroll-fade-size),
     var(--_ui-scroll-fade-size) calc(100% + 1px),
     -1px calc(100% - var(--_ui-scroll-fade-size)),
     calc(100% - var(--_ui-scroll-fade-size)) 100%;
 }
-[data-component~="ui-editor-toolbar"]:dir(rtl) .strip[data-v-fa1e480e] {
-  --_ui-scroll-fade-direction: to left;
-}
-.divider[data-v-fa1e480e-s] {
-  width: 1px;
-  height: 20px;
-  background: var(--ui-editor-toolbar-divider, var(--ui-border-divider));
-  flex-shrink: 0;
-  margin: 0 var(--ui-editor-toolbar-divider-margin, 4px);
-}
-[data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"][data-v-fa1e480e] {
-  position: relative;
-  top: auto;
-  width: max-content;
-  max-width: min(calc(100vw - 24px), 100%);
-  min-height: auto;
-  padding: var(--ui-editor-toolbar-floating-padding, 4px);
-  background: color-mix(
-    in srgb,
-    var(--ui-editor-toolbar-surface, var(--ui-surface)) 96%,
-    transparent
-  );
-  border: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
-  border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
-  box-shadow: var(
-    --ui-editor-toolbar-floating-shadow,
-    var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12))
-  );
-  backdrop-filter: blur(10px);
-}
 @media (max-width: 767px) {
-[data-component~="ui-editor-toolbar"][data-v-fa1e480e] {
-    position: fixed;
-    top: auto;
-    bottom: env(safe-area-inset-bottom);
-    left: 0;
-    right: 0;
-    min-height: var(--ui-editor-toolbar-mobile-min-height, 56px);
-    border-top: var(--ui-border-width) solid
-      var(--ui-editor-toolbar-border, var(--ui-border-divider));
-    border-bottom: none;
-    box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
+.list[data-v-a85c3b18] {
+    max-height: calc(60dvh - 80px);
+    padding: var(--ui-space-1) 0 var(--ui-space-2);
 }
-[data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"][data-v-fa1e480e] {
-    position: relative;
-    inset: auto;
-    min-height: auto;
-    border: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
-    border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
-    box-shadow: var(
-      --ui-editor-toolbar-floating-shadow,
-      var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12))
-    );
 }
+.item[data-v-a85c3b18] {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-3);
+  padding: var(--ui-space-2) var(--ui-space-3);
+  min-height: 44px;
+  cursor: pointer;
+  transition: background-color 120ms ease;
 }
-
-/* Inside LoomaEditor's sticky shell, the shell is the sticky surface. */
-.looma-editor__sticky-toolbar-shell [data-component~="ui-editor-toolbar"][data-v-fa1e480e] {
-  position: relative;
-  min-height: var(--ui-editor-toolbar-min-height, 48px);
-  background: transparent;
-  border: 0;
-  box-shadow: none;
+.item.active[data-v-a85c3b18] {
+  background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
 }
-
-/* Inside LoomaEditor's mobile shell, the toolbar is a scroll-snapping strip. */
-.looma-editor__mobile-toolbar-shell
-  [data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"][data-v-fa1e480e] {
-  width: 100%;
-  max-width: none;
-  min-height: 100%;
-  padding: 0;
-  background: transparent;
-  border: 0;
-  border-radius: 0;
-  box-shadow: none;
-  backdrop-filter: none;
+.icon[data-v-a85c3b18] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: var(--ui-surface-hover);
+  border: var(--ui-border-width) solid var(--ui-border);
+  border-radius: var(--ui-radius-md);
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-bold);
+  color: var(--ui-text-secondary);
+  font-family: var(--ui-font-family-mono, ui-monospace, monospace);
+  flex-shrink: 0;
+  line-height: 1;
 }
-.looma-editor__mobile-toolbar-shell
-  [data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"]
-  .strip[data-v-fa1e480e] {
-  scroll-snap-type: x mandatory;
+.item.active .icon[data-v-a85c3b18] {
+  background: var(--ui-accent);
+  border-color: var(--ui-accent);
+  color: var(--ui-accent-contrast);
 }
-
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-editor-toolbar"][hidden][data-v-fa1e480e] {
-  display: none;
+.icon[data-v-a85c3b18] {
+  --_ui-default-icon-size: 1rem;
+  --_ui-default-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
 }
-
-/* This component's hooks style the element they are set on, and never a nested one. */
-@property --ui-floating-action-button-inset-block-end {
-  syntax: "*";
-  inherits: false;
+.body[data-v-a85c3b18] {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 1px;
 }
-@property --ui-floating-action-button-inset-inline-end {
-  syntax: "*";
-  inherits: false;
+.title[data-v-a85c3b18] {
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-medium);
+  color: var(--ui-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-@property --ui-floating-action-button-z-index {
-  syntax: "*";
-  inherits: false;
+.description[data-v-a85c3b18] {
+  font-size: var(--ui-font-size-xs);
+  color: var(--ui-text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-[data-component~="ui-floating-action-button"][data-v-955cfa65] {
-  position: fixed;
-  inset-block-end: calc(
-    var(--ui-floating-action-button-inset-block-end, var(--ui-space-6)) +
-      env(safe-area-inset-bottom)
-  );
-  inset-inline-end: max(
-    var(--ui-floating-action-button-inset-inline-end, var(--ui-space-5)),
-    env(safe-area-inset-right)
-  );
-  inline-size: var(--ui-control-min-block-size);
-  block-size: var(--ui-control-min-block-size);
-  display: inline-flex;
-  z-index: var(--ui-floating-action-button-z-index, 100);
+.footer[data-v-a85c3b18] {
+  padding: var(--ui-space-2) var(--ui-space-3);
+  border-top: var(--ui-border-width) solid var(--ui-border-divider);
+  font-size: var(--ui-font-size-xs);
+  color: var(--ui-text-muted);
 }
-[data-component~="ui-floating-action-button"][data-v-955cfa65] {
-  appearance: none;
-  border: none;
-  border-radius: var(--ui-radius-round);
-  margin: 0;
-  padding: 0;
+[data-component~="ui-editor-slash-menu"] kbd[data-v-a85c3b18] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: var(--ui-accent);
-  color: var(--ui-on-accent);
-  box-shadow: 0 4px 12px color-mix(in srgb, var(--ui-accent) 40%, transparent);
-  cursor: pointer;
-  transition:
-    background-color var(--ui-motion-fast) var(--ui-motion-ease),
-    transform var(--ui-motion-fast) var(--ui-motion-ease),
-    box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
-}
-[data-component~="ui-floating-action-button"][data-v-955cfa65]:hover:enabled {
-  background: var(--ui-accent-hover);
-  box-shadow: 0 6px 16px color-mix(in srgb, var(--ui-accent) 50%, transparent);
-}
-[data-component~="ui-floating-action-button"][data-v-955cfa65]:active:enabled {
-  transform: scale(0.94);
+  font-family: var(--ui-font-family-mono, ui-monospace, monospace);
+  font-size: var(--ui-font-size-2xs);
+  background: var(--ui-surface-hover);
+  border: var(--ui-border-width) solid var(--ui-border);
+  border-radius: var(--ui-radius-sm);
+  padding: 0 3px;
+  color: var(--ui-text-secondary);
 }
-[data-component~="ui-floating-action-button"][data-v-955cfa65]:focus-visible {
-  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-  outline-offset: var(--ui-focus-width);
+[data-component~="ui-editor-slash-menu"][hidden][data-v-a85c3b18] {
+  display: none;
 }
-[data-component~="ui-floating-action-button"][data-v-955cfa65]:disabled {
-  background: var(--ui-disabled-surface);
-  color: var(--ui-disabled-text);
-  box-shadow: none;
-  cursor: not-allowed;
+
+[data-component~="ui-editor-slash-menu-group"][data-v-516afff1] {
+  display: block;
+  list-style: none;
 }
-svg[data-v-955cfa65-s] {
-  inline-size: var(--ui-icon-size-lg);
-  block-size: var(--ui-icon-size-lg);
-  flex-shrink: 0;
+.heading[data-v-516afff1] {
+  padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-1);
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-xs);
+  font-weight: var(--ui-font-semibold);
 }
-@media (min-width: 768px) {
-[data-component~="ui-floating-action-button"][data-ui-floating-action-button-state~="mobileOnly"][data-v-955cfa65] {
-    display: none;
+ul[data-v-516afff1] {
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
+[data-component~="ui-editor-slash-menu-group"][hidden][data-v-516afff1] {
+  display: none;
 }
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-floating-action-button"][hidden][data-v-955cfa65] {
-  display: none;
+[data-component~="ui-editor-slash-menu-item"][data-v-dd4dbe75] {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-3);
+  min-block-size: 44px;
+  padding: var(--ui-space-2) var(--ui-space-3);
+  cursor: pointer;
+  list-style: none;
 }
-
-/* This component's hooks style the element they are set on, and never a nested one. */
-@property --ui-form-field-danger {
-  syntax: "*";
-  inherits: false;
+[data-component~="ui-editor-slash-menu-item"][aria-selected="true"][data-v-dd4dbe75] {
+  background: var(--ui-accent-subtle);
 }
-@property --ui-form-field-help-font-size {
-  syntax: "*";
-  inherits: false;
+[data-component~="ui-editor-slash-menu-item"][aria-disabled="true"][data-v-dd4dbe75] {
+  background: var(--ui-disabled-surface);
+  cursor: not-allowed;
 }
-@property --ui-form-field-help-min-block-size {
-  syntax: "*";
-  inherits: false;
+[data-component~="ui-editor-slash-menu-item"][aria-disabled="true"] .title[data-v-dd4dbe75],
+[data-component~="ui-editor-slash-menu-item"][aria-disabled="true"] .description[data-v-dd4dbe75],
+[data-component~="ui-editor-slash-menu-item"][aria-disabled="true"] .icon[data-v-dd4dbe75] {
+  color: var(--ui-disabled-text);
 }
-@property --ui-form-field-help-text {
-  syntax: "*";
-  inherits: false;
+.icon[data-v-dd4dbe75] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 32px;
+  block-size: 32px;
+  flex: 0 0 auto;
+  color: var(--ui-text-secondary);
+  background: var(--ui-surface-hover);
+  border: var(--ui-border-width) solid var(--ui-border);
+  border-radius: var(--ui-radius-md);
 }
-@property --ui-form-field-label-font-size {
-  syntax: "*";
-  inherits: false;
+.icon[data-v-dd4dbe75] {
+  --_ui-default-icon-size: 1rem;
 }
-@property --ui-form-field-label-text {
-  syntax: "*";
-  inherits: false;
+.body[data-v-dd4dbe75] {
+  display: flex;
+  min-inline-size: 0;
+  flex-direction: column;
+  gap: 1px;
 }
-@property --ui-form-field-min-inline-size {
-  syntax: "*";
-  inherits: false;
+.title[data-v-dd4dbe75], .description[data-v-dd4dbe75] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-[data-component~="ui-form-field"][data-v-3feaf986] {
-  /* Hooks do not inherit, so the parts below read them from the root. */
-  --_ui-form-field-danger: var(--ui-form-field-danger);
-  --_ui-form-field-help-min-block-size: var(--ui-form-field-help-min-block-size);
-  --_ui-form-field-label-text: var(--ui-form-field-label-text);
-  --_ui-form-field-label-font-size: var(--ui-form-field-label-font-size);
-  --_ui-form-field-help-text: var(--ui-form-field-help-text);
-  --_ui-form-field-help-font-size: var(--ui-form-field-help-font-size);
-
-  display: grid;
-  gap: var(--ui-space-2);
-  min-inline-size: var(--ui-form-field-min-inline-size, 0);
-  align-content: start;
+.title[data-v-dd4dbe75] {
   color: var(--ui-text-primary);
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-medium);
+}
+.description[data-v-dd4dbe75] {
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-xs);
+}
+[data-component~="ui-editor-slash-menu-item"][hidden][data-v-dd4dbe75] {
+  display: none;
 }
 
-/* Each named region styles whatever fills it, however it was slotted (slot="…" in HTML, #label
-   in Vue), and generates no box of its own, so an empty region adds no gap. */
-.label[data-v-3feaf986],
-.help[data-v-3feaf986],
-.error[data-v-3feaf986] {
-  display: contents;
+[data-component~="ui-editor-surface"][data-v-dee440af] {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  max-inline-size: 100%;
 }
-.label[data-v-3feaf986] {
-  color: var(--_ui-form-field-label-text, var(--ui-text-secondary));
-  font-size: var(--_ui-form-field-label-font-size, var(--ui-font-size-sm));
+/* The document renderer consumes these inherited surface settings. They do not style controls. */
+[data-component~="ui-editor-surface"][data-ui-editor-surface-state~="density=compact"][data-v-dee440af] {
+  --_ui-editor-content-min-height: 0px;
+  --_ui-editor-content-padding-block: 0px;
+  --_ui-editor-content-padding-inline: 0px;
+  --_ui-editor-mobile-bottom-space: 0px;
 }
 
-/* A label action, such as a small help button, sits after the label text in a box one line
-   tall, centred on the first line and overflowing it. A button taller than a line of label
-   text then never makes this field's label row taller than its neighbours' in a grid row. */
-.label[data-v-3feaf986]:has(> .label-action > *) {
+[data-component~="ui-editor-table-context-menu"][popover][data-v-f2ebbbc8] {
+  position: fixed;
+  inset: auto;
+  margin: 0;
+}
+[data-component~="ui-editor-table-context-menu"][data-v-f2ebbbc8] {
+  /* The max-width is a promise about the menu's footprint, so it counts padding and border. */
+  box-sizing: border-box;
+  min-width: min(14rem, calc(100vw - 24px));
+  max-width: min(17rem, calc(100vw - 24px));
+  max-height: min(28rem, calc(100vh - 24px));
+  padding: var(--ui-space-2);
+  background: var(--ui-surface);
+  border: var(--ui-border-width) solid var(--ui-border-strong);
+  border-radius: var(--ui-radius-lg);
+  box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
   display: flex;
-  align-items: start;
-  gap: var(--ui-space-1);
+  flex-direction: column;
+  gap: 2px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
 }
-.label-action[data-v-3feaf986] {
+.section[data-v-f2ebbbc8] {
   display: flex;
-  align-items: unsafe center;
-  block-size: 1lh;
+  flex-direction: column;
+  gap: 3px;
 }
-.label-action[data-v-3feaf986]:not(:has(> *)) {
-  display: none;
+[data-component~="ui-editor-table-context-menu"] button[data-v-f2ebbbc8] {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  width: 100%;
+  text-align: left;
+  min-height: 32px;
+  padding: var(--ui-space-2) var(--ui-space-2);
+  border: none;
+  border-radius: var(--ui-radius-sm);
+  background: none;
+  font-size: var(--ui-font-size-sm);
+  cursor: pointer;
+  color: var(--ui-text);
 }
-.help[data-v-3feaf986] {
-  color: var(--_ui-form-field-help-text, var(--ui-text-muted));
-  font-size: var(--_ui-form-field-help-font-size, var(--ui-font-size-sm));
-  line-height: var(--ui-line-height-md);
+[data-component~="ui-editor-table-context-menu"] button[data-v-f2ebbbc8] {
+  --_ui-default-icon-size: 1rem;
+  --_ui-default-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
 }
-.help > [data-v-3feaf986-s] {
-  min-block-size: var(--_ui-form-field-help-min-block-size, 0);
+[data-component~="ui-editor-table-context-menu"] button[data-v-f2ebbbc8]:hover:not(:disabled) {
+  background: var(--ui-surface-hover);
 }
-.error[data-v-3feaf986] {
-  display: none;
+[data-component~="ui-editor-table-context-menu"] button.selected[data-v-f2ebbbc8] {
+  background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
 }
-[data-component~="ui-form-field"][data-ui-form-field-state~="invalid"] .error[data-v-3feaf986] {
-  display: contents;
+[data-component~="ui-editor-table-context-menu"] button.danger[data-v-f2ebbbc8] {
+  color: var(--ui-danger);
 }
 
-/* An error reads in the danger colour, the one the invalid control's border takes. */
-.error[data-v-3feaf986],[role="alert"][data-v-3feaf986-s] {
-  color: var(--_ui-form-field-danger, var(--ui-field-danger, var(--ui-danger)));
-  font-size: var(--ui-font-size-sm);
+/* Swatches wrap like words: the row asks for the menu's full width, and a narrower menu fits fewer. */
+.swatches[data-v-f2ebbbc8] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3px;
 }
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-form-field"][hidden][data-v-3feaf986] {
-  display: none;
+/* Three to a row at the menu's full width; 5rem keeps the longest label, "Default", whole. */
+[data-component~="ui-editor-table-context-menu"] .swatch-button[data-v-f2ebbbc8] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  flex: 1 0 5rem;
+  min-width: 5rem;
+  max-width: calc((100% - 6px) / 3);
+  padding-inline-end: var(--ui-space-1);
 }
-
-/* This component's hooks style the element they are set on, and never a nested one. */
-@property --ui-grid-gap {
-  syntax: "*";
-  inherits: false;
+.swatch[data-v-f2ebbbc8] {
+  display: inline-flex;
+  width: 1rem;
+  height: 1rem;
+  border-radius: var(--ui-radius-round);
+  border: var(--ui-border-width) solid var(--ui-border);
+  background: var(--_swatch, #fff);
+  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
+  flex-shrink: 0;
 }
-@property --ui-grid-min {
-  syntax: "*";
-  inherits: false;
+.swatch.default[data-v-f2ebbbc8] {
+  position: relative;
+  background:
+    linear-gradient(
+      135deg,
+      transparent calc(50% - 1px),
+      var(--ui-text-muted) calc(50% - 1px),
+      var(--ui-text-muted) calc(50% + 1px),
+      transparent calc(50% + 1px)
+    ),
+    var(--ui-surface);
 }
-[data-component~="ui-grid"][data-v-d42a2c9e] {
-  --_grid-gap: var(--ui-space-4);
-  --_grid-min: 12rem;
-  display: grid;
-  gap: var(--ui-grid-gap, var(--_grid-gap));
-  grid-template-columns:
-    repeat(
-      auto-fit,
-      minmax(
-        min(
-          max(
-            var(--ui-grid-min, var(--_grid-min)),
-            calc(
-              (
-                100% -
-                  (max(1, var(--_grid-column-cap, 9999)) - 1) * var(--ui-grid-gap, var(--_grid-gap))
-              ) /
-                max(1, var(--_grid-column-cap, 9999))
-            )
-          ),
-          100%
-        ),
-        1fr
-      )
-    );
-  min-inline-size: 0;
-  max-inline-size: 100%;
-  margin: 0;
+.swatch-label[data-v-f2ebbbc8] {
+  min-width: 0;
+  white-space: nowrap;
+}
+.heading[data-v-f2ebbbc8] {
+  padding: var(--ui-space-1) var(--ui-space-2);
+  font-size: var(--ui-font-size-2xs);
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--ui-text-muted);
+}
+.sep[data-v-f2ebbbc8] {
+  height: 1px;
+  background: var(--ui-border-divider);
+  margin: var(--ui-space-1) 0;
 }
-[data-component~="ui-grid"][data-ui-grid-state~="gap=xs"][data-v-d42a2c9e] {
-  --_grid-gap: var(--ui-space-2);
+
+/* Separators divide sections, so none sits above the first. */
+.sep[data-v-f2ebbbc8]:first-child {
+  display: none;
 }
-[data-component~="ui-grid"][data-ui-grid-state~="gap=s"][data-v-d42a2c9e] {
-  --_grid-gap: var(--ui-space-3);
+[data-component~="ui-editor-table-context-menu"][hidden][data-v-f2ebbbc8] {
+  display: none;
 }
-[data-component~="ui-grid"][data-ui-grid-state~="gap=m"][data-v-d42a2c9e] {
-  --_grid-gap: var(--ui-space-4);
+
+[data-component~="ui-editor-table-overlay"][data-v-0e632fe0] {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
 }
-[data-component~="ui-grid"][data-ui-grid-state~="gap=l"][data-v-d42a2c9e] {
-  --_grid-gap: var(--ui-space-5);
+[data-component~="ui-editor-table-overlay"][data-v-0e632fe0] {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
 }
-[data-component~="ui-grid"][data-ui-grid-state~="gap=xl"][data-v-d42a2c9e] {
-  --_grid-gap: var(--ui-space-6);
+.rows[data-v-0e632fe0],
+.cols[data-v-0e632fe0] {
+  pointer-events: none;
+  position: absolute;
 }
-[data-component~="ui-grid"][data-ui-grid-state~="min=md"][data-v-d42a2c9e] {
-  --_grid-min: 16rem;
+.rows[data-v-0e632fe0] {
+  inset: 0;
+  width: 100%;
 }
-[data-component~="ui-grid"][data-ui-grid-state~="min=lg"][data-v-d42a2c9e] {
-  --_grid-min: 20rem;
+.cols[data-v-0e632fe0] {
+  inset: 0;
+  height: 100%;
 }
-
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-grid"][hidden][data-v-d42a2c9e] {
-  display: none;
+.control[data-v-0e632fe0] {
+  position: absolute;
+  z-index: 1;
+  pointer-events: none;
 }
-
-/* This component's hooks style the element they are set on, and never a nested one. */
-@property --ui-icon-button-active-scale {
-  syntax: "*";
-  inherits: false;
+.handle[data-v-0e632fe0] {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: var(--ui-border-width) solid var(--ui-affordance-near-color, var(--ui-border-strong));
+  border-radius: var(--ui-radius-round);
+  background: color-mix(in srgb, var(--ui-surface-elevated) 96%, transparent);
+  color: var(--ui-affordance-near-color, var(--ui-text-secondary));
+  font: inherit;
+  font-size: 16px;
+  line-height: 1;
+  box-shadow: var(--ui-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.05));
+  opacity: 0;
+  scale: 0.72;
+  transition:
+    opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    scale var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    background-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    border-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
+  pointer-events: auto;
+  cursor: pointer;
 }
-@property --ui-icon-button-active-surface {
-  syntax: "*";
-  inherits: false;
+.handle[data-v-0e632fe0] {
+  --_ui-default-icon-size: 14px;
+  --_ui-default-icon-stroke-width: 2;
 }
-@property --ui-icon-button-border {
-  syntax: "*";
-  inherits: false;
+.handle[data-ui-proximity="near"][data-v-0e632fe0],
+.control.active .handle[data-v-0e632fe0],
+.handle[data-v-0e632fe0]:focus-visible {
+  opacity: 1;
+  scale: 1;
 }
-@property --ui-icon-button-disabled-filter {
-  syntax: "*";
-  inherits: false;
+.control.active .handle[data-v-0e632fe0],
+.handle[data-v-0e632fe0]:focus-visible {
+  border-color: var(--ui-affordance-direct-color, var(--ui-accent-solid));
+  background: var(--ui-affordance-direct-color, var(--ui-accent-solid));
+  color: var(--ui-text-on-accent);
+  box-shadow: var(--ui-shadow-sm, 0 1px 3px rgb(0 0 0 / 0.1));
 }
-@property --ui-icon-button-disabled-opacity {
-  syntax: "*";
-  inherits: false;
+.handle[data-v-0e632fe0]:focus-visible,
+.selector[data-v-0e632fe0]:focus-visible,
+.cell-menu[data-v-0e632fe0]:focus-visible {
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+  outline-offset: var(--ui-focus-width);
 }
-@property --ui-icon-button-hover-border {
-  syntax: "*";
-  inherits: false;
+.control.row[data-v-0e632fe0] {
+  left: 0;
+  width: 100%;
+  height: 0;
 }
-@property --ui-icon-button-hover-surface {
-  syntax: "*";
-  inherits: false;
+.control.row .handle[data-v-0e632fe0] {
+  top: -12px;
+  left: -30px;
 }
-@property --ui-icon-button-hover-text {
-  syntax: "*";
-  inherits: false;
+.control.col[data-v-0e632fe0] {
+  top: 0;
+  width: 0;
+  height: 100%;
 }
-@property --ui-icon-button-icon-size {
-  syntax: "*";
-  inherits: false;
+.control.col .handle[data-v-0e632fe0] {
+  top: -30px;
+  left: -12px;
 }
-@property --ui-icon-button-icon-stroke-width {
-  syntax: "*";
-  inherits: false;
+.line[data-v-0e632fe0] {
+  position: absolute;
+  background: var(--ui-affordance-direct-color, var(--ui-accent-solid));
+  opacity: 0;
+  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
 }
-@property --ui-icon-button-outline-surface {
-  syntax: "*";
-  inherits: false;
+.control.row .line[data-v-0e632fe0] {
+  inset: calc(-0.5 * var(--ui-accent-line-width)) 0 auto;
+  height: var(--ui-accent-line-width);
 }
-@property --ui-icon-button-outline-text {
-  syntax: "*";
-  inherits: false;
+.control.col .line[data-v-0e632fe0] {
+  inset: 0 auto 0 calc(-0.5 * var(--ui-accent-line-width));
+  width: var(--ui-accent-line-width);
 }
-@property --ui-icon-button-radius {
-  syntax: "*";
-  inherits: false;
+.control.active .line[data-v-0e632fe0] {
+  opacity: 0.8;
 }
-@property --ui-icon-button-size {
-  syntax: "*";
-  inherits: false;
+.guide[data-v-0e632fe0] {
+  position: absolute;
+  width: var(--ui-affordance-guide-size);
+  height: var(--ui-affordance-guide-size);
+  border-radius: var(--ui-radius-round);
+  background: var(--ui-affordance-guide-color, var(--ui-border-strong));
+  opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
+  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
 }
-@property --ui-icon-button-solid-hover-surface {
-  syntax: "*";
-  inherits: false;
+.control.row .guide[data-v-0e632fe0] {
+  left: -10px;
+  top: -2px;
 }
-@property --ui-icon-button-solid-shadow {
-  syntax: "*";
-  inherits: false;
+.control.col .guide[data-v-0e632fe0] {
+  left: -2px;
+  top: -10px;
 }
-@property --ui-icon-button-solid-surface {
-  syntax: "*";
-  inherits: false;
+.control:has(.handle[data-ui-proximity="near"]) .guide[data-v-0e632fe0],
+.control.active .guide[data-v-0e632fe0] {
+  opacity: 0;
 }
-@property --ui-icon-button-solid-text {
-  syntax: "*";
-  inherits: false;
+.tooltip[data-v-0e632fe0] {
+  position: absolute;
+  z-index: 2;
+  top: calc(100% + 6px);
+  left: 50%;
+  width: max-content;
+  max-width: 14rem;
+  padding: var(--ui-space-1) var(--ui-space-2);
+  border-radius: var(--ui-radius-sm);
+  background: var(--ui-text-primary);
+  color: var(--ui-surface-elevated);
+  font-size: var(--ui-font-size-xs);
+  font-weight: var(--ui-font-medium);
+  line-height: var(--ui-line-height-md);
+  opacity: 0;
+  transform: translateX(-50%);
+  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
+  pointer-events: none;
 }
-@property --ui-icon-button-surface {
-  syntax: "*";
-  inherits: false;
+.control.row .tooltip[data-v-0e632fe0] {
+  top: 50%;
+  left: auto;
+  right: calc(100% + 8px);
+  transform: translateY(-50%);
 }
-[data-component~="ui-icon-button"][data-v-ea2a5496] {
-  /* Optional inherited action-group values keep text and icon actions under the same light.
-     One fine top/start highlight follows the bottom/end lowlight at a joined action seam.
-     A single ambient lift avoids stacking a face gradient or another inset bevel. */
-  --_ui-action-start: 1px;
-  --_ui-action-edge: var(
-    --ui-action-edge,
-    inset var(--_ui-action-start) 1px 0 light-dark(
-      rgb(255 255 255 / 0.08),
-      rgb(255 255 255 / 0.06)
-    ),
-    inset calc(-1 * var(--_ui-action-start)) -1px 0 light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.08))
-  );
-  --_ui-action-shadow:
-    var(--_ui-action-edge),
-    0 1px 2px light-dark(rgb(0 0 0 / 0.10), rgb(0 0 0 / 0.20));
-  /* Hooks do not inherit, so the parts below read them from the root. */
-  --_ui-icon-button-icon-size: var(--ui-icon-button-icon-size);
-  --_ui-icon-button-icon-stroke-width: var(--ui-icon-button-icon-stroke-width);
-
+.control.active .tooltip[data-v-0e632fe0],
+.handle:focus-visible .tooltip[data-v-0e632fe0] {
+  opacity: 1;
+}
+.selector[data-v-0e632fe0],
+.cell-menu[data-v-0e632fe0] {
+  position: absolute;
+  z-index: 2;
   display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: var(--ui-border-width) solid transparent;
+  background: transparent;
   color: var(--ui-text-secondary);
+  box-shadow: none;
+  pointer-events: auto;
+  cursor: pointer;
+  transition:
+    color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    background-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    border-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    box-shadow var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
 }
-[data-component~="ui-icon-button"][data-v-ea2a5496]:dir(rtl) {
-  --_ui-action-start: -1px;
-}
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="tone=accent"][data-v-ea2a5496] {
-  --_icon-button-border: var(--ui-accent-solid);
-  --_icon-button-hover-border: var(--ui-accent-hover);
-  --_icon-button-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
-  --_icon-button-outline-surface: color-mix(
-    in srgb,
-    var(--ui-accent-solid) 5%,
-    var(--ui-surface-default)
-  );
-  color: var(--_icon-button-text);
+.selector[data-v-0e632fe0]:hover,
+.cell-menu[data-v-0e632fe0]:hover {
+  background: var(--ui-surface-muted);
+  color: var(--ui-text-primary);
+  box-shadow: var(--ui-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.05));
 }
-
-/* Omitted tone retains the existing accent solid; explicit neutral is additive. */
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="tone=neutral"][data-v-ea2a5496] {
-  --_icon-button-solid-surface: var(--ui-text-primary);
-  --_icon-button-solid-hover-surface: var(--ui-text-primary);
-  --_icon-button-solid-text: var(--ui-surface-default);
+.selector[data-v-0e632fe0] {
+  border-radius: var(--ui-radius-round);
+  touch-action: none;
+  cursor: grab;
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ea2a5496] {
-  position: relative;
+.selector[data-v-0e632fe0]:active {
+  cursor: grabbing;
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ea2a5496]::before {
+.selector[data-v-0e632fe0]::before {
   content: "";
   position: absolute;
   inset: 50% auto auto 50%;
-  z-index: 1;
-  inline-size: var(--ui-affordance-guide-size);
-  block-size: var(--ui-affordance-guide-size);
   border-radius: var(--ui-radius-round);
   background: var(--ui-affordance-guide-color, var(--ui-border-strong));
   opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
@@ -5139,291 +5550,391 @@ svg[data-v-955cfa65-s] {
   transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
   pointer-events: none;
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-ui-icon-button-state~="guide=bar"][data-v-ea2a5496]::before {
-  inline-size: 2px;
-  block-size: 20px;
-  background: var(--ui-border-strong);
-  opacity: 1;
+.selector .glyph[data-v-0e632fe0] {
+  display: block;
+  width: 14px;
+  height: 14px;
+  --_ui-default-icon-size: 14px;
+  --_ui-default-icon-stroke-width: 2;
+  opacity: 0;
+  transform: scale(0.72);
+  transition:
+    opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    transform var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ea2a5496]:disabled::before {
+.selector[data-v-0e632fe0]:hover::before,
+.selector[data-v-0e632fe0]:focus-visible::before {
   opacity: 0;
 }
-
-/* At rest an anticipatory button shows only its guide dot. The icon grows into place when
-   proximity, hover, or focus reveals it; the button's hit area and guide remain stable. */
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"] .content[data-v-ea2a5496] {
+.selector:hover .glyph[data-v-0e632fe0],
+.selector:focus-visible .glyph[data-v-0e632fe0] {
   opacity: 1;
   transform: scale(1);
-  transition:
-    opacity var(--ui-motion-fast) var(--ui-motion-ease),
-    transform calc(var(--ui-motion-fast) * 2) cubic-bezier(0.2, 1.4, 0.35, 1);
 }
-@media (hover: hover) and (pointer: fine) {
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ea2a5496]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible) {
-    border-color: transparent;
-    background-color: transparent;
-    box-shadow: none;
+.selector.row[data-v-0e632fe0] {
+  left: -9px;
+  width: 18px;
+  height: 32px;
+  transform: translateY(-50%);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
-    .content[data-v-ea2a5496] {
+.selector.row[data-v-0e632fe0]::before {
+  width: 2px;
+  height: 16px;
+}
+.selector.column[data-v-0e632fe0] {
+  top: -9px;
+  width: 32px;
+  height: 18px;
+  transform: translateX(-50%);
+}
+.selector.column[data-v-0e632fe0]::before {
+  width: 16px;
+  height: 2px;
+}
+@media (hover: none), (pointer: coarse) {
+.selector[data-v-0e632fe0]::before {
     opacity: 0;
-    transform: scale(0.65);
-    transition-duration: var(--ui-motion-fast);
 }
+.selector .glyph[data-v-0e632fe0] {
+    opacity: 1;
+    transform: none;
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ea2a5496]:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
-  opacity: 0;
 }
-[data-component~="ui-icon-button"][data-v-ea2a5496] {
-  /* The size prop resolves here; --ui-icon-button-size overrides it on an element. */
-  --_size: 2rem;
-  appearance: none;
-  inline-size: var(--ui-icon-button-size, var(--_size));
-  block-size: var(--ui-icon-button-size, var(--_size));
-  min-inline-size: var(--ui-icon-button-size, var(--_size));
-  min-block-size: var(--ui-icon-button-size, var(--_size));
+.cell-menu[data-v-0e632fe0] {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--ui-radius-sm);
+  background: color-mix(in srgb, var(--ui-surface-muted) 78%, transparent);
+}
+.cell-menu[data-v-0e632fe0] {
+  --_ui-default-icon-size: 15px;
+  --_ui-default-icon-stroke-width: 2;
+}
+.drop-indicator[data-v-0e632fe0] {
+  position: absolute;
+  z-index: 3;
+  background: var(--ui-accent-solid);
+  box-shadow: 0 0 0 var(--ui-border-width) var(--ui-surface);
+  pointer-events: none;
+}
+.drop-indicator.row[data-v-0e632fe0] {
+  left: 0;
+  width: 100%;
+  height: var(--ui-accent-line-width);
+}
+.drop-indicator.column[data-v-0e632fe0] {
+  top: 0;
+  width: var(--ui-accent-line-width);
+  height: 100%;
+}
+.drop-indicator[hidden][data-v-0e632fe0] {
+  display: none;
+}
+[data-component~="ui-editor-table-overlay"][hidden][data-v-0e632fe0] {
+  display: none;
+}
+
+.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"][data-v-8c2d4497] {
+  min-width: max-content;
+  min-height: 100%;
   padding: 0;
-  margin: 0;
-  border: var(--ui-border-width) solid transparent;
-  border-radius: var(--ui-icon-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
-  background-color: var(--ui-icon-button-surface, transparent);
-  color: inherit;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  backdrop-filter: none;
+}
+.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button[data-v-8c2d4497] {
+  min-height: 44px;
+  background: transparent;
+}
+.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.active[data-v-8c2d4497],
+.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.selected[data-v-8c2d4497] {
+  background: var(--ui-accent-soft, var(--ui-accent-subtle));
+}
+[data-component~="ui-editor-table-toolbar"][data-v-8c2d4497] {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition:
-    background-color var(--ui-motion-fast) var(--ui-motion-ease),
-    border-color var(--ui-motion-fast) var(--ui-motion-ease),
-    color var(--ui-motion-fast) var(--ui-motion-ease),
-    box-shadow var(--ui-motion-base) var(--ui-motion-ease),
-    scale var(--ui-motion-fast) var(--ui-motion-ease);
+  gap: var(--ui-space-1);
+  padding: var(--ui-space-1);
+  background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
+  border: var(--ui-border-width) solid var(--ui-border-strong);
+  border-radius: calc(var(--ui-radius-md) + 2 * var(--ui-border-width));
+  box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+  backdrop-filter: blur(10px);
 }
-@media (hover: none), (pointer: coarse) {
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ea2a5496]::before {
-    opacity: 0;
+.group[data-v-8c2d4497] {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  overflow: hidden;
 }
+.sep[data-v-8c2d4497] {
+  width: 1px;
+  align-self: stretch;
+  background: var(--ui-border-divider);
 }
-
-/* A touch target without a bigger button: an invisible hit area, at least the control
-   minimum, centred on the button (::before is the anticipatory guide). */
-@media (pointer: coarse) {
-[data-component~="ui-icon-button"][data-v-ea2a5496] {
-    position: relative;
+.overflow[data-v-8c2d4497] {
+  position: relative;
 }
-[data-component~="ui-icon-button"][data-v-ea2a5496]::after {
-    content: "";
-    position: absolute;
-    inset: 50% auto auto 50%;
-    inline-size: max(100%, var(--ui-control-min-block-size));
-    block-size: max(100%, var(--ui-control-min-block-size));
-    transform: translate(-50%, -50%);
+[data-component~="ui-editor-table-toolbar"] button[data-v-8c2d4497] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ui-space-2);
+  min-height: 32px;
+  border: 0;
+  border-radius: var(--ui-radius-sm);
+  background: transparent;
+  color: var(--ui-text-primary);
+  cursor: pointer;
+  font-size: var(--ui-font-size-sm);
+  font-weight: 500;
+  line-height: 1;
+  padding: var(--ui-space-2) var(--ui-space-2);
+  white-space: nowrap;
 }
+[data-component~="ui-editor-table-toolbar"] button[data-v-8c2d4497]:hover {
+  background: var(--ui-surface-hover);
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-ea2a5496] {
-  position: relative;
+[data-component~="ui-editor-table-toolbar"] button.active[data-v-8c2d4497] {
+  background: var(--ui-accent-soft, var(--ui-accent-subtle));
+  color: var(--ui-accent-active);
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-ea2a5496]::after {
-  content: "";
-  position: absolute;
-  inset: 50% auto auto 50%;
-  inline-size: max(100%, var(--ui-control-min-block-size));
-  block-size: max(100%, var(--ui-control-min-block-size));
-  transform: translate(-50%, -50%);
+.group button[data-v-8c2d4497] {
+  border-radius: var(--ui-radius-sm);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-ea2a5496] {
-  --_size: 1.75rem;
-  inline-size: var(--ui-icon-button-size, var(--_size));
-  block-size: var(--ui-icon-button-size, var(--_size));
-  min-inline-size: var(--ui-icon-button-size, var(--_size));
-  min-block-size: var(--ui-icon-button-size, var(--_size));
+.group button + button[data-v-8c2d4497] {
+  border-left: 0;
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-ea2a5496] {
-  --_size: 2.5rem;
-  inline-size: var(--ui-icon-button-size, var(--_size));
-  block-size: var(--ui-icon-button-size, var(--_size));
-  min-inline-size: var(--ui-icon-button-size, var(--_size));
-  min-block-size: var(--ui-icon-button-size, var(--_size));
+[data-component~="ui-editor-table-toolbar"] .more[data-v-8c2d4497] {
+  border: 0;
+  border-radius: var(--ui-radius-sm);
 }
-
-/* A text button's companion uses control geometry; compact icon buttons keep their own density. */
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="matchButton"][data-v-ea2a5496] {
-  --_size: var(--ui-control-size-md);
-  block-size: auto;
-  align-self: stretch;
+[data-component~="ui-editor-table-toolbar"] button.danger[data-v-8c2d4497] {
+  color: var(--ui-danger);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="matchButton"][data-ui-icon-button-state~="size=sm"][data-v-ea2a5496] {
-  --_size: var(--ui-control-size-sm);
+[data-component~="ui-editor-table-toolbar"][data-v-8c2d4497] {
+  --_ui-default-icon-size: var(--ui-editor-toolbar-icon-size, 1rem);
+  --_ui-default-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="matchButton"][data-ui-icon-button-state~="size=lg"][data-v-ea2a5496] {
-  --_size: var(--ui-control-size-lg);
+.chevron[data-v-8c2d4497] {
+  display: inline-flex;
+  --_ui-default-icon-size: 0.875rem;
 }
-@media (pointer: coarse) {
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="matchButton"][data-v-ea2a5496] {
-    inline-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
-    min-inline-size: max(
-      var(--ui-icon-button-size, var(--_size)),
-      var(--ui-control-min-block-size)
-    );
-    min-block-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
+[data-component~="ui-editor-table-toolbar"] .icon-button[data-v-8c2d4497] {
+  width: 32px;
+  padding-inline: 0;
 }
+.menu[data-v-8c2d4497] {
+  box-sizing: border-box;
+  position: fixed;
+  inset: auto;
+  margin: 0;
+  min-width: 12rem;
+  max-width: min(17rem, calc(100vw - 24px));
+  padding: var(--ui-space-1);
+  background: var(--ui-surface);
+  border: var(--ui-border-width) solid var(--ui-border-strong);
+  border-radius: var(--ui-radius-md);
+  box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  z-index: 2;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="round"][data-v-ea2a5496] {
-  border-radius: var(--ui-radius-round);
+.menu-section + .menu-section[data-v-8c2d4497] {
+  margin-top: var(--ui-space-1);
+  padding-top: var(--ui-space-1);
+  border-top: var(--ui-border-width) solid var(--ui-border-divider);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-ea2a5496] {
-  border-color: var(
-    --ui-icon-button-border,
-    var(--_icon-button-border, var(--ui-control-border, var(--ui-border-strong)))
-  );
-  background-color: var(
-    --ui-icon-button-outline-surface,
-    var(--_icon-button-outline-surface, var(--ui-surface-default))
-  );
-  background-image: none;
-  color: var(--ui-icon-button-outline-text, var(--_icon-button-text, var(--ui-text-primary)));
-  box-shadow: var(--ui-action-shadow, var(--_ui-action-shadow));
+.menu-heading[data-v-8c2d4497] {
+  padding: var(--ui-space-1) var(--ui-space-2);
+  font-size: var(--ui-font-size-2xs);
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--ui-text-muted);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-ea2a5496] {
-  background-color: var(
-    --ui-icon-button-solid-surface,
-    var(--_icon-button-solid-surface, var(--ui-accent-solid))
-  );
-  background-image: none;
-  color: var(--ui-icon-button-solid-text, var(--_icon-button-solid-text, var(--ui-text-on-accent)));
-  box-shadow: var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
+.menu button[data-v-8c2d4497] {
+  display: flex;
+  justify-content: flex-start;
+  width: 100%;
+  text-align: left;
 }
-[data-component~="ui-icon-button"][data-v-ea2a5496]:hover:enabled:not([aria-disabled="true"]) {
-  /* Derived from the text colour so the ghost hover shows on any background. */
-  background-color: var(
-    --ui-icon-button-hover-surface,
-    color-mix(in srgb, currentColor 8%, transparent)
-  );
-  color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
+.swatches[data-v-8c2d4497] {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 2px;
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-ea2a5496]:hover:enabled:not([aria-disabled="true"]) {
-  border-color: var(
-    --ui-icon-button-hover-border,
-    var(--_icon-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border)))
-  );
+[data-component~="ui-editor-table-toolbar"] .swatch-button[data-v-8c2d4497] {
+  gap: var(--ui-space-1);
+  justify-content: flex-start;
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-ea2a5496]:hover:enabled:not([aria-disabled="true"]) {
-  background-color: var(
-    --ui-icon-button-solid-hover-surface,
-    var(--_icon-button-solid-hover-surface, var(--ui-accent-hover))
-  );
+.swatch[data-v-8c2d4497] {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 14px;
+  border: var(--ui-border-width) solid color-mix(in srgb, var(--ui-border) 80%, #000);
+  border-radius: var(--ui-radius-round);
+  background: var(--_swatch);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=accent"][data-v-ea2a5496]:hover:enabled:not([aria-disabled="true"]),
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=neutral"][data-v-ea2a5496]:hover:enabled:not([aria-disabled="true"]) {
-  color: var(--ui-icon-button-solid-text, var(--_icon-button-solid-text, var(--ui-text-on-accent)));
+.swatch.default[data-v-8c2d4497] {
+  background:
+    linear-gradient(135deg, transparent 44%, var(--ui-danger) 46% 54%, transparent 56%),
+    var(--ui-surface);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=ghost"][aria-expanded="true"][data-v-ea2a5496]:enabled:not([aria-disabled="true"]) {
-  background-color: var(
-    --ui-icon-button-active-surface,
-    color-mix(in srgb, currentColor 16%, transparent)
-  );
-  color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
-  box-shadow: var(--ui-pressed);
+.swatch-button.selected[data-v-8c2d4497] {
+  background: var(--ui-accent-soft, var(--ui-accent-subtle));
+}
+[data-component~="ui-editor-table-toolbar"][hidden][data-v-8c2d4497] {
+  display: none;
 }
 
-/* Native toggle state persists after pointer release, including during loading. */
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][aria-pressed="true"][data-v-ea2a5496]:enabled {
-  background-color: var(
-    --ui-icon-button-active-surface,
-    color-mix(in srgb, currentColor 12%, var(--ui-surface-default))
-  );
-  background-image: none;
-  box-shadow: var(--ui-pressed);
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-floating-action-button-inset-block-end {
+  syntax: "*";
+  inherits: false;
 }
-[data-component~="ui-icon-button"][data-v-ea2a5496]:active:enabled:not([aria-disabled="true"]) {
-  scale: var(--ui-icon-button-active-scale, 0.96);
+@property --ui-floating-action-button-inset-inline-end {
+  syntax: "*";
+  inherits: false;
 }
-:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"][data-v-ea2a5496], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"][data-v-ea2a5496]) {
-  cursor: progress;
+@property --ui-floating-action-button-z-index {
+  syntax: "*";
+  inherits: false;
 }
-.content[data-v-ea2a5496] {
+[data-component~="ui-floating-action-button"][data-v-955cfa65] {
+  position: fixed;
+  inset-block-end: calc(
+    var(--ui-floating-action-button-inset-block-end, var(--ui-space-6)) +
+      env(safe-area-inset-bottom)
+  );
+  inset-inline-end: max(
+    var(--ui-floating-action-button-inset-inline-end, var(--ui-space-5)),
+    env(safe-area-inset-right)
+  );
+  inline-size: var(--ui-control-min-block-size);
+  block-size: var(--ui-control-min-block-size);
+  display: inline-flex;
+  z-index: var(--ui-floating-action-button-z-index, 100);
+}
+[data-component~="ui-floating-action-button"][data-v-955cfa65] {
+  appearance: none;
+  border: none;
+  border-radius: var(--ui-radius-round);
+  margin: 0;
+  padding: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  background: var(--ui-accent);
+  color: var(--ui-on-accent);
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--ui-accent) 40%, transparent);
+  cursor: pointer;
+  transition:
+    background-color var(--ui-motion-fast) var(--ui-motion-ease),
+    transform var(--ui-motion-fast) var(--ui-motion-ease),
+    box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
 }
-:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"])
-  .content[data-v-ea2a5496] {
-  display: none;
+[data-component~="ui-floating-action-button"][data-v-955cfa65]:hover:enabled {
+  background: var(--ui-accent-hover);
+  box-shadow: 0 6px 16px color-mix(in srgb, var(--ui-accent) 50%, transparent);
 }
-@media (prefers-reduced-motion: reduce) {
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"] .content[data-v-ea2a5496] {
-    transition: none;
+[data-component~="ui-floating-action-button"][data-v-955cfa65]:active:enabled {
+  transform: scale(0.94);
 }
+[data-component~="ui-floating-action-button"][data-v-955cfa65]:focus-visible {
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+  outline-offset: var(--ui-focus-width);
 }
-[data-component~="ui-icon-button"][data-v-ea2a5496]:focus-visible {
-  outline: none;
-  box-shadow: var(--ui-focus-halo);
+[data-component~="ui-floating-action-button"][data-v-955cfa65]:disabled {
+  background: var(--ui-disabled-surface);
+  color: var(--ui-disabled-text);
+  box-shadow: none;
+  cursor: not-allowed;
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-ea2a5496]:focus-visible {
-  box-shadow:
-    var(--ui-action-shadow, var(--_ui-action-shadow)),
-    var(--ui-focus-halo);
+svg[data-v-955cfa65-s] {
+  inline-size: var(--ui-icon-size-lg);
+  block-size: var(--ui-icon-size-lg);
+  flex-shrink: 0;
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-ea2a5496]:focus-visible {
-  box-shadow:
-    var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
-    var(--ui-focus-halo);
+@media (min-width: 768px) {
+[data-component~="ui-floating-action-button"][data-ui-floating-action-button-state~="mobileOnly"][data-v-955cfa65] {
+    display: none;
 }
-[data-component~="ui-icon-button"][data-v-ea2a5496]:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"]):active:enabled:not([aria-disabled="true"]) {
-  background-image: none;
-  box-shadow: var(--ui-pressed);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][aria-pressed="true"][data-v-ea2a5496]:enabled:focus-visible {
-  box-shadow:
-    var(--ui-pressed),
-    var(--ui-focus-halo);
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-floating-action-button"][hidden][data-v-955cfa65] {
+  display: none;
 }
-@media (forced-colors: active) {
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][aria-pressed="true"][data-v-ea2a5496]:enabled {
-    outline: var(--ui-focus-width) solid Highlight;
-    outline-offset: calc(-2 * var(--ui-focus-width));
+
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-grid-gap {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-grid-min {
+  syntax: "*";
+  inherits: false;
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][aria-pressed="true"][data-v-ea2a5496]:enabled:focus-visible {
-    outline-offset: var(--ui-focus-width);
+[data-component~="ui-grid"][data-v-d42a2c9e] {
+  --_grid-gap: var(--ui-space-4);
+  --_grid-min: 12rem;
+  display: grid;
+  gap: var(--ui-grid-gap, var(--_grid-gap));
+  grid-template-columns:
+    repeat(
+      auto-fit,
+      minmax(
+        min(
+          max(
+            var(--ui-grid-min, var(--_grid-min)),
+            calc(
+              (
+                100% -
+                  (max(1, var(--_grid-column-cap, 9999)) - 1) * var(--ui-grid-gap, var(--_grid-gap))
+              ) /
+                max(1, var(--_grid-column-cap, 9999))
+            )
+          ),
+          100%
+        ),
+        1fr
+      )
+    );
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  margin: 0;
 }
+[data-component~="ui-grid"][data-ui-grid-state~="gap=xs"][data-v-d42a2c9e] {
+  --_grid-gap: var(--ui-space-2);
 }
-
-/* Disabled is a flat neutral control, independent of the active variant's tone. */
-[data-component~="ui-icon-button"][data-v-ea2a5496]:disabled {
-  border-color: var(--ui-disabled-border);
-  background-color: var(--ui-disabled-surface);
-  color: var(--ui-disabled-text);
-  filter: var(--ui-icon-button-disabled-filter, var(--ui-disabled-filter));
-  opacity: var(--ui-icon-button-disabled-opacity, 1);
-  cursor: not-allowed;
-  box-shadow: none;
-  background-image: none;
+[data-component~="ui-grid"][data-ui-grid-state~="gap=s"][data-v-d42a2c9e] {
+  --_grid-gap: var(--ui-space-3);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=ghost"][data-v-ea2a5496]:disabled {
-  border-color: transparent;
+[data-component~="ui-grid"][data-ui-grid-state~="gap=m"][data-v-d42a2c9e] {
+  --_grid-gap: var(--ui-space-4);
 }
-[data-component~="ui-icon-button"][data-v-ea2a5496] {
-  --_icon-button-icon-default: var(--ui-icon-size-md);
-  /* A slotted ui-icon is its own component, out of reach of the svg rule below; these are its
-     defaults, which its own --ui-icon-* hooks still override. */
-  --_ui-default-icon-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
-  --_ui-default-icon-stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
+[data-component~="ui-grid"][data-ui-grid-state~="gap=l"][data-v-d42a2c9e] {
+  --_grid-gap: var(--ui-space-5);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-ea2a5496] {
-  --_icon-button-icon-default: var(--ui-icon-size-sm);
+[data-component~="ui-grid"][data-ui-grid-state~="gap=xl"][data-v-d42a2c9e] {
+  --_grid-gap: var(--ui-space-6);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-ea2a5496] {
-  --_icon-button-icon-default: var(--ui-icon-size-lg);
+[data-component~="ui-grid"][data-ui-grid-state~="min=md"][data-v-d42a2c9e] {
+  --_grid-min: 16rem;
 }
-svg[data-v-ea2a5496-s] {
-  inline-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
-  block-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
-  flex-shrink: 0;
-  stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
+[data-component~="ui-grid"][data-ui-grid-state~="min=lg"][data-v-d42a2c9e] {
+  --_grid-min: 20rem;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-icon-button"][hidden][data-v-ea2a5496] {
+[data-component~="ui-grid"][hidden][data-v-d42a2c9e] {
   display: none;
 }
 
@@ -5520,276 +6031,61 @@ svg[data-v-ea2a5496-s] {
 }
 .handle[data-corner="bottom-left"][data-v-bfb3171c] {
   bottom: -12px;
-  left: -12px;
-  cursor: nesw-resize;
-}
-.handle[data-corner="bottom-right"][data-v-bfb3171c] {
-  bottom: -12px;
-  right: -12px;
-  cursor: nwse-resize;
-}
-.handles[hidden][data-v-bfb3171c], [data-component~="ui-image"][hidden][data-v-bfb3171c] {
-  display: none;
-}
-@media (max-width: 767px) {
-[data-component~="ui-image"][data-v-bfb3171c]:is([data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"], [data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"]) {
-    float: none;
-    inline-size: 100%;
-    padding-inline: 0;
-}
-[data-component~="ui-image"]:is([data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"], [data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"])
-    .handles[data-v-bfb3171c] {
-    display: none;
-}
-}
-@media (pointer: coarse) {
-.handle[data-v-bfb3171c] {
-    inline-size: 44px;
-    block-size: 44px;
-}
-.handle[data-v-bfb3171c]::after {
-    inset: 18px;
-}
-.handle[data-corner="top-left"][data-v-bfb3171c] {
-    top: -22px;
-    left: -22px;
-}
-.handle[data-corner="top-right"][data-v-bfb3171c] {
-    top: -22px;
-    right: -22px;
-}
-.handle[data-corner="bottom-left"][data-v-bfb3171c] {
-    bottom: -22px;
-    left: -22px;
-}
-.handle[data-corner="bottom-right"][data-v-bfb3171c] {
-    bottom: -22px;
-    right: -22px;
-}
-}
-@media (forced-colors: active) {
-[data-component~="ui-image"][data-ui-image-state~="selected"] .frame[data-v-bfb3171c], .handle[data-v-bfb3171c]:focus-visible {
-    outline-color: Highlight;
-}
-.handle[data-v-bfb3171c]::after {
-    border-color: Highlight;
-    background: Canvas;
-}
-}
-
-/* This component's hooks style the element they are set on, and never a nested one. An Input
-       Group sets --_ui-default-input-* for the input inside it, below the input's own hooks. */
-@property --ui-input-border {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-input-border-hover {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-input-border-width {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-input-focus-border {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-input-focus-outline {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-input-focus-shadow {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-input-inline-size {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-input-invalid-border {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-input-invalid-focus-shadow {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-input-min-block-size {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-input-radius {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-input-shadow {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-input-surface {
-  syntax: "*";
-  inherits: false;
-}
-[data-component~="ui-input"][data-v-3c4d919b] {
-  box-sizing: border-box;
-  display: inline-block;
-  inline-size: var(--ui-input-inline-size, 100%);
-  min-inline-size: 0;
-  min-block-size: var(
-    --ui-input-min-block-size,
-    var(--_ui-default-input-min-block-size, var(--ui-control-size-md))
-  );
-  margin: 0;
-  padding: var(--ui-space-2) var(--ui-space-3);
-  appearance: none;
-  padding-inline-start: var(--_ui-default-input-padding-inline-start, var(--ui-space-3));
-  border: var(
-    --ui-input-border-width,
-    var(--_ui-default-input-border-width, var(--ui-border-width))
-  ) solid
-    var(
-      --ui-input-border,
-      var(--_ui-default-input-border, var(--ui-control-border, var(--ui-border-strong)))
-    );
-  border-radius: var(
-    --ui-input-radius,
-    var(--_ui-default-input-radius, var(--ui-field-radius, var(--ui-radius-md)))
-  );
-  background: var(
-    --ui-input-surface,
-    var(--_ui-default-input-surface, var(--ui-control-surface, var(--ui-surface-elevated)))
-  );
-  color: var(--ui-text-primary);
-  font: inherit;
-  line-height: var(--ui-line-height-tight);
-  box-shadow: var(--ui-input-shadow, var(--_ui-default-input-shadow, var(--ui-control-inset)));
-  transition:
-    border-color var(--ui-motion-fast) var(--ui-motion-ease),
-    box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
-    background-color var(--ui-motion-fast) var(--ui-motion-ease);
-}
-
-/* Each size reads the hook and then an Input Group's default first, so a group, which draws the frame, can zero it. */
-[data-component~="ui-input"][data-ui-input-state~="size=sm"][data-v-3c4d919b] {
-  min-block-size: var(
-    --ui-input-min-block-size,
-    var(--_ui-default-input-min-block-size, var(--ui-control-size-sm))
-  );
-  padding: var(--ui-space-1) var(--ui-space-2);
-  font-size: var(--ui-font-size-sm);
-}
-[data-component~="ui-input"][data-ui-input-state~="size=lg"][data-v-3c4d919b] {
-  min-block-size: var(
-    --ui-input-min-block-size,
-    var(--_ui-default-input-min-block-size, var(--ui-control-size-lg))
-  );
-  padding: var(--ui-space-3) var(--ui-space-4);
-  font-size: var(--ui-font-size-md);
-}
-
-/* Under touch a small field is still a touch-sized target, as a small button is, and keeps
-   body-size text: below 16px, iOS zooms the page into the focused field. */
-@media (pointer: coarse) {
-[data-component~="ui-input"][data-v-3c4d919b] {
-    min-block-size: var(
-      --ui-input-min-block-size,
-      var(
-        --_ui-default-input-min-block-size,
-        max(var(--ui-control-size-md), var(--ui-control-min-block-size))
-      )
-    );
+  left: -12px;
+  cursor: nesw-resize;
 }
-[data-component~="ui-input"][data-v-3c4d919b],
-  [data-component~="ui-input"][data-ui-input-state~="size=sm"][data-v-3c4d919b],
-  [data-component~="ui-input"][data-ui-input-state~="size=lg"][data-v-3c4d919b] {
-    font-size: var(--ui-font-size-md);
+.handle[data-corner="bottom-right"][data-v-bfb3171c] {
+  bottom: -12px;
+  right: -12px;
+  cursor: nwse-resize;
 }
-[data-component~="ui-input"][data-ui-input-state~="size=sm"][data-v-3c4d919b] {
-    min-block-size: var(
-      --ui-input-min-block-size,
-      var(--_ui-default-input-min-block-size, var(--ui-control-min-block-size))
-    );
+.handles[hidden][data-v-bfb3171c], [data-component~="ui-image"][hidden][data-v-bfb3171c] {
+  display: none;
 }
+@media (max-width: 767px) {
+[data-component~="ui-image"][data-v-bfb3171c]:is([data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"], [data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"]) {
+    float: none;
+    inline-size: 100%;
+    padding-inline: 0;
 }
-
-/* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
-[data-component~="ui-input"][data-v-3c4d919b]::selection {
-  background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
-  color: inherit;
+[data-component~="ui-image"]:is([data-component~="ui-image"][data-ui-image-state~="placement=wrap-left"], [data-component~="ui-image"][data-ui-image-state~="placement=wrap-right"])
+    .handles[data-v-bfb3171c] {
+    display: none;
 }
-[data-component~="ui-input"][data-v-3c4d919b]::placeholder {
-  color: var(--ui-control-placeholder, var(--ui-text-secondary));
-  opacity: 1;
 }
-[data-component~="ui-input"][data-v-3c4d919b]:hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
-  border-color: var(
-    --ui-input-border-hover,
-    var(--_ui-default-input-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary)))
-  );
+@media (pointer: coarse) {
+.handle[data-v-bfb3171c] {
+    inline-size: 44px;
+    block-size: 44px;
 }
-[data-component~="ui-input"][data-v-3c4d919b]:focus-visible {
-  border-color: var(
-    --ui-input-focus-border,
-    var(--_ui-default-input-focus-border, var(--ui-control-focus, var(--ui-accent-solid)))
-  );
-  outline: none;
-  box-shadow: var(
-    --ui-input-focus-shadow,
-    var(
-      --_ui-default-input-focus-shadow,
-      var(--ui-control-inset),
-      var(--ui-control-focus-halo-shadow)
-    )
-  );
+.handle[data-v-bfb3171c]::after {
+    inset: 18px;
 }
-
-/* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
-[data-component~="ui-input"][aria-invalid="true"][data-v-3c4d919b],
-[data-component~="ui-input"][data-v-3c4d919b]:is(:user-invalid, [data-user-invalid]) {
-  border-color: var(
-    --ui-input-invalid-border,
-    var(--_ui-default-input-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)))
-  );
+.handle[data-corner="top-left"][data-v-bfb3171c] {
+    top: -22px;
+    left: -22px;
 }
-[data-component~="ui-input"][data-v-3c4d919b]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
-  box-shadow: var(
-    --ui-input-invalid-focus-shadow,
-    var(
-      --_ui-default-input-invalid-focus-shadow,
-      var(--ui-control-inset),
-      0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
-        in srgb,
-        var(--ui-input-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
-        transparent
-      )
-    )
-  );
+.handle[data-corner="top-right"][data-v-bfb3171c] {
+    top: -22px;
+    right: -22px;
+}
+.handle[data-corner="bottom-left"][data-v-bfb3171c] {
+    bottom: -22px;
+    left: -22px;
+}
+.handle[data-corner="bottom-right"][data-v-bfb3171c] {
+    bottom: -22px;
+    right: -22px;
 }
-[data-component~="ui-input"][data-v-3c4d919b]:disabled {
-  background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
-  color: var(--ui-disabled-text);
-  box-shadow: none;
-  cursor: not-allowed;
 }
-
-/* Forced colors drop box shadows, so the focus ring becomes an outline. */
 @media (forced-colors: active) {
-[data-component~="ui-input"][data-v-3c4d919b]:focus-visible {
-    outline: var(
-      --ui-input-focus-outline,
-      var(--_ui-default-input-focus-outline, var(--ui-focus-width) solid Highlight)
-    );
-    outline-offset: var(--ui-border-width);
+[data-component~="ui-image"][data-ui-image-state~="selected"] .frame[data-v-bfb3171c], .handle[data-v-bfb3171c]:focus-visible {
+    outline-color: Highlight;
 }
+.handle[data-v-bfb3171c]::after {
+    border-color: Highlight;
+    background: Canvas;
 }
-
-/* No text-box-trim here: trimming a native input's line box below its line height lets the text
- * scroll vertically inside the field. Native inputs already center their single line. */
-
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-input"][hidden][data-v-3c4d919b] {
-  display: none;
 }
 
 @property --ui-input-group-radius {
@@ -7011,174 +7307,64 @@ svg[data-v-ea2a5496-s] {
   min-inline-size: 0;
 }
 .leading[data-v-093b89cc] {
-  display: inline-flex;
-  flex: none;
-  align-self: center;
-  color: var(--ui-text-muted);
-  font-size: var(--ui-font-size-2xl);
-}
-.copy[data-v-093b89cc] {
-  display: flex;
-  flex: 1 1 16rem;
-  flex-direction: column;
-  gap: var(--ui-space-1);
-  min-inline-size: 0;
-}
-.eyebrow[data-v-093b89cc] {
-  color: var(--ui-text-muted);
-  font-size: var(--ui-font-size-xs);
-  font-weight: var(--ui-font-semibold);
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-.title[data-v-093b89cc] {
-  margin: 0;
-  color: var(--ui-text-primary);
-  font-size: var(--ui-font-size-2xl);
-  font-weight: var(--ui-font-bold, 700);
-  line-height: var(--ui-line-height-tight);
-  overflow-wrap: anywhere;
-}
-.description[data-v-093b89cc] {
-  color: var(--ui-text-secondary);
-  font-size: var(--ui-font-size-md);
-  line-height: var(--ui-line-height);
-}
-.actions[data-v-093b89cc] {
-  display: inline-flex;
-  flex: none;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--ui-space-2);
-}
-[data-component~="ui-page-header"][data-ui-page-header-state~="align=center"][data-v-093b89cc] {
-  flex-direction: column;
-  text-align: center;
-}
-[data-component~="ui-page-header"][data-ui-page-header-state~="align=center"] .copy[data-v-093b89cc] {
-  align-items: center;
-  flex-basis: auto;
-}
-.leading[data-v-093b89cc]:empty,
-.eyebrow[data-v-093b89cc]:empty,
-.description[data-v-093b89cc]:empty,
-.actions[data-v-093b89cc]:empty {
-  display: none;
-}
-
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-page-header"][hidden][data-v-093b89cc] {
-  display: none;
-}
-
-/* This component's hooks style the element they are set on, and never a nested one. */
-@property --ui-popover-surface {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-popover-border {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-popover-radius {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-popover-shadow {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-popover-viewport-gap {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-popover-offset {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-popover-padding {
-  syntax: "*";
-  inherits: false;
-}
-[data-component~="ui-popover"][data-v-c3034191] {
-  --_ui-popover-surface: var(--ui-popover-surface);
-  --_ui-popover-border: var(--ui-popover-border);
-  --_ui-popover-radius: var(--ui-popover-radius);
-  --_ui-popover-shadow: var(--ui-popover-shadow);
-  --_ui-popover-padding: var(--ui-popover-padding);
-  box-sizing: border-box;
-  max-inline-size: min(
-    20rem,
-    calc(100vw - var(--ui-popover-viewport-gap, var(--ui-space-2)) * 2)
-  );
-  max-block-size: calc(100dvh - var(--ui-popover-viewport-gap, var(--ui-space-2)) * 2);
-  overflow: visible;
-  padding: 0;
-  border: 0;
-  outline: 0;
-  border-radius: 0;
-  background: transparent;
-  box-shadow: none;
-}
-.surface[data-v-c3034191] {
-  box-sizing: border-box;
-  max-inline-size: inherit;
-  max-block-size: inherit;
-  overflow: auto;
-  padding: var(--_ui-popover-padding, var(--ui-space-3));
-  background: var(--_ui-popover-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
-  border: var(--ui-border-width) solid
-    var(--_ui-popover-border, var(--ui-overlay-border, var(--ui-border-strong)));
-  border-radius: var(--_ui-popover-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
-  box-shadow: var(
-    --_ui-popover-shadow,
-    var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
-  );
-}
-[data-component~="ui-popover"][data-v-c3034191]:not([data-component~="ui-popover"][data-ui-popover-state~="internalOpen"]) {
-  display: none;
-}
-[data-component~="ui-popover"][popover][data-v-c3034191] {
-  position: fixed;
-  inset: auto;
-  margin: 0;
-  opacity: 0;
-  transform: translateY(-4px) scale(0.99);
-  transition:
-    opacity var(--ui-motion-fast) var(--ui-motion-ease),
-    transform var(--ui-motion-fast) var(--ui-motion-ease),
-    display var(--ui-motion-fast) allow-discrete,
-    overlay var(--ui-motion-fast) allow-discrete;
+  display: inline-flex;
+  flex: none;
+  align-self: center;
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-2xl);
 }
-[data-component~="ui-popover"][popover][data-v-c3034191]:popover-open {
-  opacity: 1;
-  transform: translateY(0) scale(1);
+.copy[data-v-093b89cc] {
+  display: flex;
+  flex: 1 1 16rem;
+  flex-direction: column;
+  gap: var(--ui-space-1);
+  min-inline-size: 0;
 }
-@starting-style {
-[data-component~="ui-popover"][popover][data-v-c3034191]:popover-open {
-    opacity: 0;
-    transform: translateY(-4px) scale(0.99);
+.eyebrow[data-v-093b89cc] {
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-xs);
+  font-weight: var(--ui-font-semibold);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
 }
+.title[data-v-093b89cc] {
+  margin: 0;
+  color: var(--ui-text-primary);
+  font-size: var(--ui-font-size-2xl);
+  font-weight: var(--ui-font-bold, 700);
+  line-height: var(--ui-line-height-tight);
+  overflow-wrap: anywhere;
 }
-[data-component~="ui-popover"][data-ui-popover-state~="size=sm"][data-v-c3034191] {
-  inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
-  max-inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
+.description[data-v-093b89cc] {
+  color: var(--ui-text-secondary);
+  font-size: var(--ui-font-size-md);
+  line-height: var(--ui-line-height);
 }
-[data-component~="ui-popover"][data-ui-popover-state~="size=md"][data-v-c3034191] {
-  inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
-  max-inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
+.actions[data-v-093b89cc] {
+  display: inline-flex;
+  flex: none;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--ui-space-2);
 }
-[data-component~="ui-popover"][data-ui-popover-state~="size=lg"][data-v-c3034191] {
-  inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
-  max-inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
+[data-component~="ui-page-header"][data-ui-page-header-state~="align=center"][data-v-093b89cc] {
+  flex-direction: column;
+  text-align: center;
 }
-[data-component~="ui-popover"][hidden][data-v-c3034191] {
-  display: none;
+[data-component~="ui-page-header"][data-ui-page-header-state~="align=center"] .copy[data-v-093b89cc] {
+  align-items: center;
+  flex-basis: auto;
 }
-@media (prefers-reduced-motion: reduce) {
-[data-component~="ui-popover"][popover][data-v-c3034191] {
-    transition: none;
+.leading[data-v-093b89cc]:empty,
+.eyebrow[data-v-093b89cc]:empty,
+.description[data-v-093b89cc]:empty,
+.actions[data-v-093b89cc]:empty {
+  display: none;
 }
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-page-header"][hidden][data-v-093b89cc] {
+  display: none;
 }
 
 /* This component's hooks style the element they are set on, and never a nested one. */
@@ -8234,75 +8420,6 @@ dialog[data-v-62b2f3da] {
   display: none;
 }
 
-/* This component's hooks style the element they are set on, and never a nested one. */
-@property --ui-stack-height {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-stack-gap {
-  syntax: "*";
-  inherits: false;
-}
-[data-component~="ui-stack"][data-v-10ce261e] {
-  --_layout-gap: var(--ui-space-4);
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: var(--ui-stack-gap, var(--_layout-gap));
-  min-inline-size: 0;
-  max-inline-size: 100%;
-  margin: 0;
-}
-[data-component~="ui-stack"][data-ui-stack-state~="fill"][data-v-10ce261e] {
-  flex: 1;
-  min-block-size: 0;
-}
-[data-component~="ui-stack"][data-ui-stack-state~="height"][data-v-10ce261e] {
-  block-size: calc(var(--ui-stack-height, 0) * 1px);
-  min-block-size: 0;
-}
-[data-component~="ui-stack"][data-ui-stack-state~="gap=none"][data-v-10ce261e] {
-  --_layout-gap: 0px;
-}
-[data-component~="ui-stack"][data-ui-stack-state~="gap=xs"][data-v-10ce261e] {
-  --_layout-gap: var(--ui-space-2);
-}
-[data-component~="ui-stack"][data-ui-stack-state~="gap=s"][data-v-10ce261e] {
-  --_layout-gap: var(--ui-space-3);
-}
-[data-component~="ui-stack"][data-ui-stack-state~="gap=m"][data-v-10ce261e] {
-  --_layout-gap: var(--ui-space-4);
-}
-[data-component~="ui-stack"][data-ui-stack-state~="gap=l"][data-v-10ce261e] {
-  --_layout-gap: var(--ui-space-5);
-}
-[data-component~="ui-stack"][data-ui-stack-state~="gap=xl"][data-v-10ce261e] {
-  --_layout-gap: var(--ui-space-6);
-}
-[data-component~="ui-stack"][data-ui-stack-state~="align=start"][data-v-10ce261e] {
-  align-items: flex-start;
-}
-[data-component~="ui-stack"][data-ui-stack-state~="align=center"][data-v-10ce261e] {
-  align-items: center;
-}
-[data-component~="ui-stack"][data-ui-stack-state~="align=end"][data-v-10ce261e] {
-  align-items: flex-end;
-}
-[data-component~="ui-stack"][data-ui-stack-state~="justify=center"][data-v-10ce261e] {
-  justify-content: center;
-}
-[data-component~="ui-stack"][data-ui-stack-state~="justify=end"][data-v-10ce261e] {
-  justify-content: flex-end;
-}
-[data-component~="ui-stack"][data-ui-stack-state~="justify=between"][data-v-10ce261e] {
-  justify-content: space-between;
-}
-
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-stack"][hidden][data-v-10ce261e] {
-  display: none;
-}
-
 /* The one way a view says it is loading, has nothing yet, or failed, with an optional next step.
        Every view says it the same way, in the same place, at the same size. */
 [data-component~="ui-status-message"][data-v-8783f735] {
@@ -8839,123 +8956,6 @@ tbody tr[data-v-722ca2ea-s]:last-child > * {
   display: none;
 }
 
-/* Running text, set on the type scale and in a tone that says what it is, so a view never styles
-       text of its own. The root is a paragraph unless as= names a span, div, small, strong, label, or
-       heading. */
-[data-component~="ui-text"][data-ui-text-state~="grow"][data-v-a12d976f] {
-  flex: 1;
-}
-[data-component~="ui-text"][data-v-a12d976f] {
-  margin: 0;
-  min-inline-size: 0;
-  color: var(--ui-text-primary);
-  text-align: start;
-}
-
-/* A heading drops the browser's heading size and weight, so size and weight set it as they set
-   any text, and inherit keeps the text around it. */
-[data-component~="ui-text"][data-v-a12d976f]:is(h2, h3, h4, h5, h6) {
-  font-size: inherit;
-  font-weight: inherit;
-}
-[data-component~="ui-text"][data-ui-text-state~="size=xs"][data-v-a12d976f] {
-  font-size: var(--ui-font-size-xs);
-  line-height: var(--ui-line-height);
-}
-[data-component~="ui-text"][data-ui-text-state~="size=sm"][data-v-a12d976f] {
-  font-size: var(--ui-font-size-sm);
-  line-height: var(--ui-line-height);
-}
-[data-component~="ui-text"][data-ui-text-state~="size=md"][data-v-a12d976f] {
-  font-size: var(--ui-font-size-md);
-  line-height: var(--ui-line-height);
-}
-[data-component~="ui-text"][data-ui-text-state~="size=lg"][data-v-a12d976f] {
-  font-size: var(--ui-font-size-lg);
-  line-height: var(--ui-line-height-relaxed);
-}
-
-/* Opt in at the text owner; trimming does not inherit from a surrounding layout. */
-[data-component~="ui-text"][data-ui-text-state~="trim"][data-v-a12d976f] {
-  text-box-trim: trim-both;
-  text-box-edge: cap alphabetic;
-}
-[data-component~="ui-text"][data-ui-text-state~="tone=secondary"][data-v-a12d976f] {
-  color: var(--ui-text-secondary);
-}
-[data-component~="ui-text"][data-ui-text-state~="tone=muted"][data-v-a12d976f] {
-  color: var(--ui-text-muted);
-}
-[data-component~="ui-text"][data-ui-text-state~="tone=accent"][data-v-a12d976f] {
-  color: var(--ui-accent-active);
-}
-/* Every status tone uses the text-safe token a subtle badge sets its words in, so text and badges
-   in one tone match, and each holds 4.5:1 on sunken surfaces where some base colours fall short. */
-[data-component~="ui-text"][data-ui-text-state~="tone=danger"][data-v-a12d976f] {
-  color: var(--ui-danger-subtle-text);
-}
-[data-component~="ui-text"][data-ui-text-state~="tone=success"][data-v-a12d976f] {
-  color: var(--ui-success-subtle-text);
-}
-[data-component~="ui-text"][data-ui-text-state~="tone=info"][data-v-a12d976f] {
-  color: var(--ui-info-subtle-text);
-}
-[data-component~="ui-text"][data-ui-text-state~="tone=warning"][data-v-a12d976f] {
-  color: var(--ui-warning-subtle-text);
-}
-[data-component~="ui-text"][data-ui-text-state~="weight=normal"][data-v-a12d976f] {
-  font-weight: var(--ui-font-normal);
-}
-[data-component~="ui-text"][data-ui-text-state~="weight=medium"][data-v-a12d976f] {
-  font-weight: var(--ui-font-medium);
-}
-[data-component~="ui-text"][data-ui-text-state~="weight=semibold"][data-v-a12d976f] {
-  font-weight: var(--ui-font-semibold);
-}
-[data-component~="ui-text"][data-ui-text-state~="variant=eyebrow"][data-v-a12d976f] {
-  font-size: var(--ui-font-size-xs);
-  font-weight: var(--ui-font-semibold);
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-[data-component~="ui-text"][data-ui-text-state~="variant=code"][data-v-a12d976f] {
-  font-family: var(--ui-font-family-mono);
-}
-
-/* A link in running text is underlined, so it stands apart from the words around it by more than
-   colour. */
-[data-component~="ui-text"] a[data-v-a12d976f-s] {
-  color: var(--ui-accent-active);
-  text-decoration: underline;
-  text-decoration-thickness: 0.06em;
-  text-underline-offset: 0.18em;
-}
-[data-component~="ui-text"][data-ui-text-state~="truncate"][data-v-a12d976f] {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Trim ends the layout box at the baseline; preserve descending ink while clipping long labels. */
-[data-component~="ui-text"][data-ui-text-state~="trim"][data-ui-text-state~="truncate"][data-v-a12d976f] {
-  overflow-x: clip;
-  overflow-y: visible;
-}
-[data-component~="ui-text"][data-ui-text-state~="align=center"][data-v-a12d976f] {
-  text-align: center;
-}
-[data-component~="ui-text"][data-ui-text-state~="font=sans"][data-v-a12d976f] {
-  font-family: var(--ui-font-family-sans, sans-serif);
-}
-[data-component~="ui-text"][data-ui-text-state~="wrap=anywhere"][data-v-a12d976f] {
-  overflow-wrap: anywhere;
-}
-
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-text"][hidden][data-v-a12d976f] {
-  display: none;
-}
-
 /* This component's hooks style the element they are set on, and never a nested one. */
 @property --ui-textarea-border-width {
   syntax: "*";