@threadlabs/looma 0.6.0 → 0.6.1

package/vue/components.css

@@ -556,43 +556,43 @@ input[data-v-acf71232]:focus-visible {
   display: none;
 }
 
-[data-component~="ui-cluster"][data-v-06d4310a] {
+[data-component~="ui-cluster"][data-v-6de2f2e4] {
   --_layout-gap: var(--ui-space-3);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--ui-layout-gap, var(--_layout-gap));
+  gap: var(--ui-cluster-gap, var(--_layout-gap));
   min-inline-size: 0;
   max-inline-size: 100%;
   margin: 0;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xs"][data-v-06d4310a] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xs"][data-v-6de2f2e4] {
   --_layout-gap: var(--ui-space-2);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=s"][data-v-06d4310a] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=s"][data-v-6de2f2e4] {
   --_layout-gap: var(--ui-space-3);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=m"][data-v-06d4310a] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=m"][data-v-6de2f2e4] {
   --_layout-gap: var(--ui-space-4);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=l"][data-v-06d4310a] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=l"][data-v-6de2f2e4] {
   --_layout-gap: var(--ui-space-5);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xl"][data-v-06d4310a] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xl"][data-v-6de2f2e4] {
   --_layout-gap: var(--ui-space-6);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="align=start"][data-v-06d4310a] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="align=start"][data-v-6de2f2e4] {
   align-items: flex-start;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="align=end"][data-v-06d4310a] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="align=end"][data-v-6de2f2e4] {
   align-items: flex-end;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="align=stretch"][data-v-06d4310a] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="align=stretch"][data-v-6de2f2e4] {
   align-items: stretch;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-cluster"][hidden][data-v-06d4310a] {
+[data-component~="ui-cluster"][hidden][data-v-6de2f2e4] {
   display: none;
 }
 
@@ -1339,26 +1339,26 @@ from {
   display: none;
 }
 
-[data-component~="ui-editor-insert-table-grid"][data-v-c4064690] {
+[data-component~="ui-editor-insert-table-grid"][data-v-00e6602a] {
   padding: var(--ui-space-3);
   background: var(--ui-surface);
   border: 1px solid var(--ui-border);
   border-radius: var(--ui-radius-md);
   box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
 }
-.hint[data-v-c4064690] {
+.hint[data-v-00e6602a] {
   margin: 0 0 var(--ui-space-2);
   font-size: var(--ui-font-size-sm);
   color: var(--ui-text-muted);
 }
-.grid[data-v-c4064690] {
+.grid[data-v-00e6602a] {
   display: grid;
-  grid-template-columns: repeat(var(--ui-editor-table-grid-cols, 8), 1.25rem);
-  grid-template-rows: repeat(var(--ui-editor-table-grid-rows, 8), 1.25rem);
+  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);
 }
-.cell[data-v-c4064690] {
+.cell[data-v-00e6602a] {
   width: 1.25rem;
   height: 1.25rem;
   padding: 0;
@@ -1367,17 +1367,17 @@ from {
   background: var(--ui-surface);
   cursor: pointer;
 }
-.cell.selected[data-v-c4064690] {
+.cell.selected[data-v-00e6602a] {
   background: var(--ui-accent-solid, var(--ui-accent));
   border-color: var(--ui-accent-solid, var(--ui-accent));
 }
-.header[data-v-c4064690] {
+.header[data-v-00e6602a] {
   display: block;
   margin-bottom: var(--ui-space-2);
   font-size: var(--ui-font-size-sm);
   cursor: pointer;
 }
-[data-component~="ui-editor-insert-table-grid"] .insert[data-v-c4064690] {
+[data-component~="ui-editor-insert-table-grid"] .insert[data-v-00e6602a] {
   width: 100%;
   padding: var(--ui-space-2) var(--ui-space-3);
   border: 1px solid var(--ui-border);
@@ -1387,10 +1387,10 @@ from {
   font-size: var(--ui-font-size-sm);
   cursor: pointer;
 }
-[data-component~="ui-editor-insert-table-grid"] .insert[data-v-c4064690]:hover {
+[data-component~="ui-editor-insert-table-grid"] .insert[data-v-00e6602a]:hover {
   filter: brightness(1.05);
 }
-[data-component~="ui-editor-insert-table-grid"][hidden][data-v-c4064690] {
+[data-component~="ui-editor-insert-table-grid"][hidden][data-v-00e6602a] {
   display: none;
 }
 
@@ -1656,7 +1656,7 @@ svg[data-v-b2b50d17] {
   display: none;
 }
 
-[data-component~="ui-editor-table-context-menu"][data-v-7c984caf] {
+[data-component~="ui-editor-table-context-menu"][data-v-9cbdf038] {
   min-width: 14rem;
   max-width: min(17rem, calc(100vw - 24px));
   max-height: min(28rem, calc(100vh - 24px));
@@ -1672,12 +1672,12 @@ svg[data-v-b2b50d17] {
   overscroll-behavior: contain;
   scrollbar-width: thin;
 }
-.section[data-v-7c984caf] {
+.section[data-v-9cbdf038] {
   display: flex;
   flex-direction: column;
   gap: 3px;
 }
-[data-component~="ui-editor-table-context-menu"] button[data-v-7c984caf] {
+[data-component~="ui-editor-table-context-menu"] button[data-v-9cbdf038] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-2);
@@ -1692,40 +1692,40 @@ svg[data-v-b2b50d17] {
   cursor: pointer;
   color: var(--ui-text);
 }
-[data-component~="ui-editor-table-context-menu"] button[data-v-7c984caf] {
+[data-component~="ui-editor-table-context-menu"] button[data-v-9cbdf038] {
   --ui-icon-size: 1rem;
   --ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
 }
-[data-component~="ui-editor-table-context-menu"] button[data-v-7c984caf]:hover:not(:disabled) {
+[data-component~="ui-editor-table-context-menu"] button[data-v-9cbdf038]:hover:not(:disabled) {
   background: var(--ui-surface-hover);
 }
-[data-component~="ui-editor-table-context-menu"] button.selected[data-v-7c984caf] {
+[data-component~="ui-editor-table-context-menu"] button.selected[data-v-9cbdf038] {
   background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
 }
-[data-component~="ui-editor-table-context-menu"] button.danger[data-v-7c984caf] {
+[data-component~="ui-editor-table-context-menu"] button.danger[data-v-9cbdf038] {
   color: var(--ui-danger);
 }
-.swatches[data-v-7c984caf] {
+.swatches[data-v-9cbdf038] {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 3px;
 }
-.swatch-button[data-v-7c984caf] {
+.swatch-button[data-v-9cbdf038] {
   display: inline-flex;
   align-items: center;
   gap: var(--ui-space-2);
 }
-.swatch[data-v-7c984caf] {
+.swatch[data-v-9cbdf038] {
   display: inline-flex;
   width: 1rem;
   height: 1rem;
   border-radius: 999px;
   border: 1px solid var(--ui-border);
-  background: var(--ui-editor-table-context-swatch, #fff);
+  background: var(--_swatch, #fff);
   box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
   flex-shrink: 0;
 }
-.swatch.default[data-v-7c984caf] {
+.swatch.default[data-v-9cbdf038] {
   position: relative;
   background:
     linear-gradient(
@@ -1737,11 +1737,11 @@ svg[data-v-b2b50d17] {
     ),
     var(--ui-surface);
 }
-.swatch-label[data-v-7c984caf] {
+.swatch-label[data-v-9cbdf038] {
   min-width: 0;
   white-space: nowrap;
 }
-.heading[data-v-7c984caf] {
+.heading[data-v-9cbdf038] {
   padding: var(--ui-space-1) var(--ui-space-2);
   font-size: 0.6875rem;
   font-weight: 700;
@@ -1749,12 +1749,12 @@ svg[data-v-b2b50d17] {
   text-transform: uppercase;
   color: var(--ui-text-muted);
 }
-.sep[data-v-7c984caf] {
+.sep[data-v-9cbdf038] {
   height: 1px;
   background: var(--ui-border);
   margin: var(--ui-space-1) 0;
 }
-[data-component~="ui-editor-table-context-menu"][hidden][data-v-7c984caf] {
+[data-component~="ui-editor-table-context-menu"][hidden][data-v-9cbdf038] {
   display: none;
 }
 
@@ -2029,7 +2029,7 @@ svg[data-v-b2b50d17] {
   display: none;
 }
 
-.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"][data-v-c7ed049b] {
+.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"][data-v-1066cfb2] {
   min-width: max-content;
   min-height: 100%;
   padding: 0;
@@ -2039,15 +2039,15 @@ svg[data-v-b2b50d17] {
   box-shadow: none;
   backdrop-filter: none;
 }
-.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button[data-v-c7ed049b] {
+.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button[data-v-1066cfb2] {
   min-height: 44px;
   background: transparent;
 }
-.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.active[data-v-c7ed049b],
-.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.selected[data-v-c7ed049b] {
+.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.active[data-v-1066cfb2],
+.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.selected[data-v-1066cfb2] {
   background: var(--ui-accent-soft, var(--ui-accent-subtle));
 }
-.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] .menu[data-v-c7ed049b] {
+.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] .menu[data-v-1066cfb2] {
   top: auto;
   right: 0;
   bottom: calc(100% + var(--ui-space-2));
@@ -2055,7 +2055,7 @@ svg[data-v-b2b50d17] {
   overflow-y: auto;
   overscroll-behavior: contain;
 }
-[data-component~="ui-editor-table-toolbar"][data-v-c7ed049b] {
+[data-component~="ui-editor-table-toolbar"][data-v-1066cfb2] {
   display: inline-flex;
   align-items: center;
   gap: var(--ui-space-1);
@@ -2066,21 +2066,21 @@ svg[data-v-b2b50d17] {
   box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
   backdrop-filter: blur(10px);
 }
-.group[data-v-c7ed049b] {
+.group[data-v-1066cfb2] {
   display: inline-flex;
   align-items: center;
   gap: 2px;
   overflow: hidden;
 }
-.sep[data-v-c7ed049b] {
+.sep[data-v-1066cfb2] {
   width: 1px;
   align-self: stretch;
   background: var(--ui-border);
 }
-.overflow[data-v-c7ed049b] {
+.overflow[data-v-1066cfb2] {
   position: relative;
 }
-[data-component~="ui-editor-table-toolbar"] button[data-v-c7ed049b] {
+[data-component~="ui-editor-table-toolbar"] button[data-v-1066cfb2] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2097,39 +2097,39 @@ svg[data-v-b2b50d17] {
   padding: var(--ui-space-2) var(--ui-space-2);
   white-space: nowrap;
 }
-[data-component~="ui-editor-table-toolbar"] button[data-v-c7ed049b]:hover {
+[data-component~="ui-editor-table-toolbar"] button[data-v-1066cfb2]:hover {
   background: var(--ui-surface-hover);
 }
-[data-component~="ui-editor-table-toolbar"] button.active[data-v-c7ed049b] {
+[data-component~="ui-editor-table-toolbar"] button.active[data-v-1066cfb2] {
   background: var(--ui-accent-soft, var(--ui-accent-subtle));
   color: var(--ui-accent-active);
 }
-.group button[data-v-c7ed049b] {
+.group button[data-v-1066cfb2] {
   border-radius: var(--ui-radius-sm);
 }
-.group button + button[data-v-c7ed049b] {
+.group button + button[data-v-1066cfb2] {
   border-left: 0;
 }
-[data-component~="ui-editor-table-toolbar"] .more[data-v-c7ed049b] {
+[data-component~="ui-editor-table-toolbar"] .more[data-v-1066cfb2] {
   border: 0;
   border-radius: var(--ui-radius-sm);
 }
-[data-component~="ui-editor-table-toolbar"] button.danger[data-v-c7ed049b] {
+[data-component~="ui-editor-table-toolbar"] button.danger[data-v-1066cfb2] {
   color: var(--ui-danger);
 }
-[data-component~="ui-editor-table-toolbar"][data-v-c7ed049b] {
+[data-component~="ui-editor-table-toolbar"][data-v-1066cfb2] {
   --ui-icon-size: var(--ui-editor-toolbar-icon-size, 1rem);
   --ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
 }
-.chevron[data-v-c7ed049b] {
+.chevron[data-v-1066cfb2] {
   display: inline-flex;
   --ui-icon-size: 0.875rem;
 }
-[data-component~="ui-editor-table-toolbar"] .icon-button[data-v-c7ed049b] {
+[data-component~="ui-editor-table-toolbar"] .icon-button[data-v-1066cfb2] {
   width: 32px;
   padding-inline: 0;
 }
-.menu[data-v-c7ed049b] {
+.menu[data-v-1066cfb2] {
   position: absolute;
   top: calc(100% + var(--ui-space-2));
   right: 0;
@@ -2144,12 +2144,12 @@ svg[data-v-b2b50d17] {
   gap: 2px;
   z-index: 2;
 }
-.menu-section + .menu-section[data-v-c7ed049b] {
+.menu-section + .menu-section[data-v-1066cfb2] {
   margin-top: var(--ui-space-1);
   padding-top: var(--ui-space-1);
   border-top: 1px solid color-mix(in srgb, var(--ui-border) 80%, transparent);
 }
-.menu-heading[data-v-c7ed049b] {
+.menu-heading[data-v-1066cfb2] {
   padding: var(--ui-space-1) var(--ui-space-2);
   font-size: 0.6875rem;
   font-weight: 700;
@@ -2157,42 +2157,42 @@ svg[data-v-b2b50d17] {
   text-transform: uppercase;
   color: var(--ui-text-muted);
 }
-.menu button[data-v-c7ed049b] {
+.menu button[data-v-1066cfb2] {
   display: flex;
   justify-content: flex-start;
   width: 100%;
   text-align: left;
 }
-.swatches[data-v-c7ed049b] {
+.swatches[data-v-1066cfb2] {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 2px;
 }
-[data-component~="ui-editor-table-toolbar"] .swatch-button[data-v-c7ed049b] {
+[data-component~="ui-editor-table-toolbar"] .swatch-button[data-v-1066cfb2] {
   gap: var(--ui-space-1);
   justify-content: flex-start;
 }
-.swatch[data-v-c7ed049b] {
+.swatch[data-v-1066cfb2] {
   width: 14px;
   height: 14px;
   flex: 0 0 14px;
   border: 1px solid color-mix(in srgb, var(--ui-border) 80%, #000);
   border-radius: 3px;
-  background: var(--ui-editor-table-toolbar-swatch);
+  background: var(--_swatch);
 }
-.swatch.default[data-v-c7ed049b] {
+.swatch.default[data-v-1066cfb2] {
   background:
     linear-gradient(135deg, transparent 44%, var(--ui-danger) 46% 54%, transparent 56%),
     var(--ui-surface);
 }
-.swatch-button.selected[data-v-c7ed049b] {
+.swatch-button.selected[data-v-1066cfb2] {
   background: var(--ui-accent-soft, var(--ui-accent-subtle));
 }
-[data-component~="ui-editor-table-toolbar"][hidden][data-v-c7ed049b] {
+[data-component~="ui-editor-table-toolbar"][hidden][data-v-1066cfb2] {
   display: none;
 }
 
-[data-component~="ui-editor-toolbar"][data-v-472b5c16] {
+[data-component~="ui-editor-toolbar"][data-v-0da1a114] {
   position: sticky;
   top: 0;
   z-index: var(--ui-editor-toolbar-z-index, 10);
@@ -2203,26 +2203,28 @@ svg[data-v-b2b50d17] {
   padding: var(--ui-editor-toolbar-padding-block, 6px)
     var(--ui-editor-toolbar-padding-inline, 12px);
   min-height: var(--ui-editor-toolbar-min-height, 48px);
-  overflow-x: auto;
-  scrollbar-width: none;
-  white-space: nowrap;
+  /* More controls than the column is wide is normal at a readable measure, so the row wraps.
+     Scrolling hid the tail behind an invisible scrollbar. */
+  flex-wrap: wrap;
+  row-gap: var(--ui-editor-toolbar-row-gap, var(--ui-editor-toolbar-gap, 2px));
   background: var(--ui-editor-toolbar-surface, var(--ui-surface));
   border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
 }
-[data-component~="ui-editor-toolbar"][data-v-472b5c16]::-webkit-scrollbar {
+[data-component~="ui-editor-toolbar"][data-v-0da1a114]::-webkit-scrollbar {
   display: none;
 }
-[data-component~="ui-editor-toolbar"] > [data-v-472b5c16-s] {
+[data-component~="ui-editor-toolbar"] > [data-v-0da1a114-s] {
   flex: 0 0 auto;
 }
-.divider[data-v-472b5c16-s] {
+.divider[data-v-0da1a114-s] {
   width: 1px;
   height: 20px;
   background: var(--ui-editor-toolbar-divider, var(--ui-border));
   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-472b5c16] {
+[data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"][data-v-0da1a114] {
+  flex-wrap: nowrap;
   position: static;
   top: auto;
   width: max-content;
@@ -2244,7 +2246,7 @@ svg[data-v-b2b50d17] {
   backdrop-filter: blur(10px);
 }
 @media (max-width: 767px) {
-[data-component~="ui-editor-toolbar"][data-v-472b5c16] {
+[data-component~="ui-editor-toolbar"][data-v-0da1a114] {
     position: fixed;
     top: auto;
     bottom: env(safe-area-inset-bottom);
@@ -2255,7 +2257,7 @@ svg[data-v-b2b50d17] {
     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-472b5c16] {
+[data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"][data-v-0da1a114] {
     position: static;
     inset: auto;
     min-height: auto;
@@ -2269,7 +2271,7 @@ svg[data-v-b2b50d17] {
 }
 
 /* Inside LoomaEditor's sticky shell, the shell is the sticky surface. */
-.looma-editor__sticky-toolbar-shell [data-component~="ui-editor-toolbar"][data-v-472b5c16] {
+.looma-editor__sticky-toolbar-shell [data-component~="ui-editor-toolbar"][data-v-0da1a114] {
   position: static;
   min-height: var(--ui-editor-toolbar-min-height, 48px);
   overscroll-behavior-inline: contain;
@@ -2280,7 +2282,7 @@ svg[data-v-b2b50d17] {
 
 /* 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-472b5c16] {
+  [data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"][data-v-0da1a114] {
   width: 100%;
   max-width: none;
   min-height: 100%;
@@ -2297,7 +2299,7 @@ svg[data-v-b2b50d17] {
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-editor-toolbar"][hidden][data-v-472b5c16] {
+[data-component~="ui-editor-toolbar"][hidden][data-v-0da1a114] {
   display: none;
 }
 
@@ -3394,52 +3396,52 @@ hr[aria-orientation="vertical"][data-v-f0034397] {
   display: none;
 }
 
-[data-component~="ui-stack"][data-v-aa8062a9] {
+[data-component~="ui-stack"][data-v-9a903e2b] {
   --_layout-gap: var(--ui-space-4);
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  gap: var(--ui-layout-gap, var(--_layout-gap));
+  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~="gap=xs"][data-v-aa8062a9] {
+[data-component~="ui-stack"][data-ui-stack-state~="gap=xs"][data-v-9a903e2b] {
   --_layout-gap: var(--ui-space-2);
 }
-[data-component~="ui-stack"][data-ui-stack-state~="gap=s"][data-v-aa8062a9] {
+[data-component~="ui-stack"][data-ui-stack-state~="gap=s"][data-v-9a903e2b] {
   --_layout-gap: var(--ui-space-3);
 }
-[data-component~="ui-stack"][data-ui-stack-state~="gap=m"][data-v-aa8062a9] {
+[data-component~="ui-stack"][data-ui-stack-state~="gap=m"][data-v-9a903e2b] {
   --_layout-gap: var(--ui-space-4);
 }
-[data-component~="ui-stack"][data-ui-stack-state~="gap=l"][data-v-aa8062a9] {
+[data-component~="ui-stack"][data-ui-stack-state~="gap=l"][data-v-9a903e2b] {
   --_layout-gap: var(--ui-space-5);
 }
-[data-component~="ui-stack"][data-ui-stack-state~="gap=xl"][data-v-aa8062a9] {
+[data-component~="ui-stack"][data-ui-stack-state~="gap=xl"][data-v-9a903e2b] {
   --_layout-gap: var(--ui-space-6);
 }
-[data-component~="ui-stack"][data-ui-stack-state~="align=start"][data-v-aa8062a9] {
+[data-component~="ui-stack"][data-ui-stack-state~="align=start"][data-v-9a903e2b] {
   align-items: flex-start;
 }
-[data-component~="ui-stack"][data-ui-stack-state~="align=center"][data-v-aa8062a9] {
+[data-component~="ui-stack"][data-ui-stack-state~="align=center"][data-v-9a903e2b] {
   align-items: center;
 }
-[data-component~="ui-stack"][data-ui-stack-state~="align=end"][data-v-aa8062a9] {
+[data-component~="ui-stack"][data-ui-stack-state~="align=end"][data-v-9a903e2b] {
   align-items: flex-end;
 }
-[data-component~="ui-stack"][data-ui-stack-state~="justify=center"][data-v-aa8062a9] {
+[data-component~="ui-stack"][data-ui-stack-state~="justify=center"][data-v-9a903e2b] {
   justify-content: center;
 }
-[data-component~="ui-stack"][data-ui-stack-state~="justify=end"][data-v-aa8062a9] {
+[data-component~="ui-stack"][data-ui-stack-state~="justify=end"][data-v-9a903e2b] {
   justify-content: flex-end;
 }
-[data-component~="ui-stack"][data-ui-stack-state~="justify=between"][data-v-aa8062a9] {
+[data-component~="ui-stack"][data-ui-stack-state~="justify=between"][data-v-9a903e2b] {
   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-aa8062a9] {
+[data-component~="ui-stack"][hidden][data-v-9a903e2b] {
   display: none;
 }
 
@@ -3746,7 +3748,7 @@ input[data-v-44eb48fd], input[data-v-44eb48fd]::after {
   display: none;
 }
 
-[data-component~="ui-toast-region"][data-v-7d8dab78] {
+[data-component~="ui-toast-region"][data-v-660faa24] {
   position: fixed;
   top: calc(var(--ui-space-4) + env(safe-area-inset-top));
   right: auto;
@@ -3768,14 +3770,14 @@ input[data-v-44eb48fd], input[data-v-44eb48fd]::after {
   box-shadow: none;
   pointer-events: none;
 }
-[data-component~="ui-toast-region"][data-v-7d8dab78]:not(:popover-open) {
+[data-component~="ui-toast-region"][data-v-660faa24]:not(:popover-open) {
   display: none;
 }
-[data-component~="ui-toast-region"] > .toast[data-v-7d8dab78],
-[data-component~="ui-toast-region"] > [data-v-7d8dab78-s] {
+[data-component~="ui-toast-region"] > .toast[data-v-660faa24],
+[data-component~="ui-toast-region"] > [data-v-660faa24-s] {
   pointer-events: auto;
 }
-.toast[data-v-7d8dab78] {
+.toast[data-v-660faa24] {
   display: grid;
   grid-template-columns: 1fr auto;
   gap: var(--ui-space-2);
@@ -3786,16 +3788,16 @@ input[data-v-44eb48fd], input[data-v-44eb48fd]::after {
   background: var(--ui-surface-elevated);
   color: var(--ui-text-primary);
   box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
-  animation: ui-toast-enter-7d8dab78 var(--ui-toast-enter-duration, 0.32s)
+  animation: ui-toast-enter-660faa24 var(--ui-toast-region-enter-duration, 0.32s)
     var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
 }
 
 /* Leaving slides on down and fades; the controller removes the toast when this ends. */
-.toast.closing[data-v-7d8dab78] {
-  animation: ui-toast-exit-7d8dab78 var(--ui-toast-exit-duration, 0.22s) var(--ui-motion-ease) both;
+.toast.closing[data-v-660faa24] {
+  animation: ui-toast-exit-660faa24 var(--ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease) both;
   pointer-events: none;
 }
-@keyframes ui-toast-enter-7d8dab78 {
+@keyframes ui-toast-enter-660faa24 {
 from {
     opacity: 0;
     transform: translateY(-1rem);
@@ -3805,7 +3807,7 @@ to {
     transform: translateY(0);
 }
 }
-@keyframes ui-toast-exit-7d8dab78 {
+@keyframes ui-toast-exit-660faa24 {
 from {
     opacity: 1;
     transform: translateY(0);
@@ -3816,21 +3818,21 @@ to {
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.toast[data-v-7d8dab78], .toast.closing[data-v-7d8dab78] {
+.toast[data-v-660faa24], .toast.closing[data-v-660faa24] {
     animation: none;
 }
 }
-.message[data-v-7d8dab78] {
+.message[data-v-660faa24] {
   min-inline-size: 0;
   align-self: center;
 }
-.dismiss[data-v-7d8dab78] {
+.dismiss[data-v-660faa24] {
   align-self: center;
   margin-inline-end: calc(var(--ui-space-2) * -1);
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-toast-region"][hidden][data-v-7d8dab78] {
+[data-component~="ui-toast-region"][hidden][data-v-660faa24] {
   display: none;
 }
 
@@ -4237,7 +4239,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-hand
   padding: var(--ui-callout-padding-block) var(--ui-callout-padding-inline);
   border: var(--ui-callout-border-width) solid color-mix(in srgb, var(--ui-callout-border) 35%, transparent);
   border-inline-start: var(--ui-callout-leading-border-width) solid var(--ui-callout-border);
-  border-radius: var(--ui-radius-2);
+  border-radius: var(--ui-radius-md);
   background: var(--ui-callout-surface);
   color: var(--ui-callout-text);
 }
@@ -4285,7 +4287,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-hand
   padding: var(--ui-space-4);
   overflow-x: auto;
   border: 1px solid var(--ui-border-default);
-  border-radius: var(--ui-radius-2);
+  border-radius: var(--ui-radius-md);
   background: var(--ui-surface-muted);
   font-family: var(--ui-font-family-mono, ui-monospace, monospace);
   font-size: var(--ui-font-size-sm);
@@ -4293,7 +4295,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-hand
 
 .looma-editor .ProseMirror code {
   padding: 0.1em 0.3em;
-  border-radius: var(--ui-radius-1);
+  border-radius: var(--ui-radius-sm);
   background: var(--ui-surface-subtle);
   font-family: var(--ui-font-family-mono, ui-monospace, monospace);
   font-size: 0.9em;
@@ -4311,7 +4313,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-hand
 }
 
 .looma-editor .ProseMirror mark {
-  border-radius: var(--ui-radius-1);
+  border-radius: var(--ui-radius-sm);
   background: var(--ui-editor-highlight-bg, var(--ui-warning-soft));
 }
 
@@ -4354,7 +4356,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-hand
   max-width: 100%;
   height: auto;
   margin: var(--ui-space-3) 0;
-  border-radius: var(--ui-radius-2);
+  border-radius: var(--ui-radius-md);
 }
 
 .looma-editor .ProseMirror img[data-looma-image]:focus-visible {
@@ -4378,7 +4380,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-hand
   margin-top: var(--ui-space-3);
   padding: var(--ui-space-2) var(--ui-space-3);
   border: 1px solid var(--ui-danger-solid);
-  border-radius: var(--ui-radius-2);
+  border-radius: var(--ui-radius-md);
   background: var(--ui-danger-soft);
   color: var(--ui-text);
   font-size: var(--ui-font-size-sm);
@@ -4388,7 +4390,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-hand
   min-height: 2rem;
   padding: 0 var(--ui-space-3);
   border: 0;
-  border-radius: var(--ui-radius-1);
+  border-radius: var(--ui-radius-sm);
   background: var(--ui-danger-solid);
   color: var(--ui-text-on-accent);
   cursor: pointer;
@@ -4416,7 +4418,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-hand
   justify-content: center;
   gap: var(--ui-space-3);
   border: 2px dashed var(--ui-accent-solid);
-  border-radius: var(--ui-radius-2);
+  border-radius: var(--ui-radius-md);
   background: color-mix(in srgb, var(--ui-accent-soft) 92%, transparent);
   color: var(--ui-accent-active);
   font-size: var(--ui-font-size-sm);
@@ -4432,10 +4434,17 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-hand
 
 .looma-editor__toolbar-button {
   --ui-icon-button-size: var(--ui-editor-toolbar-button-size, 2rem);
-  --ui-icon-button-radius: var(--ui-editor-toolbar-button-radius, var(--ui-radius-1));
+  --ui-icon-button-radius: var(--ui-editor-toolbar-button-radius, var(--ui-radius-sm));
   --ui-icon-button-icon-size: var(--ui-editor-toolbar-icon-size, 1rem);
 }
 
+.looma-editor__toolbar-button[data-active="true"] {
+  --ui-icon-button-surface: var(--ui-editor-toolbar-active-surface, var(--ui-accent-subtle));
+  --ui-icon-button-text: var(--ui-editor-toolbar-active-text, var(--ui-accent-active));
+  color: var(--ui-editor-toolbar-active-text, var(--ui-accent-active));
+  box-shadow: inset 0 0 0 1px var(--ui-editor-toolbar-active-border, color-mix(in srgb, var(--ui-accent) 40%, transparent));
+}
+
 .looma-editor__toolbar-button > .looma-icon {
   width: var(--ui-editor-toolbar-icon-size, 1rem);
   height: var(--ui-editor-toolbar-icon-size, 1rem);
@@ -4447,7 +4456,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-hand
   top: var(--ui-editor-sticky-toolbar-top, 0);
   z-index: var(--ui-editor-toolbar-z-index, 10);
   min-width: 0;
-  background: var(--ui-editor-toolbar-bg, var(--ui-surface, #fff));
+  background: var(--ui-editor-toolbar-surface, var(--ui-surface, #fff));
   border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
 }
 
@@ -4485,7 +4494,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-hand
   -webkit-overflow-scrolling: touch;
   scroll-snap-type: x mandatory;
   scrollbar-width: none;
-  background: var(--ui-editor-toolbar-bg, var(--ui-surface, #fff));
+  background: var(--ui-editor-toolbar-surface, var(--ui-surface, #fff));
   border-top: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
   box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
 }
@@ -4508,7 +4517,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-hand
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--ui-space-1-5, 6px);
+  gap: var(--ui-space-2);
   min-width: 44px;
   min-height: 44px;
   padding: 0 var(--ui-space-3, 12px);
@@ -4642,7 +4651,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-hand
   left: calc(100% + 6px);
   width: max-content;
   padding: var(--ui-space-1, 4px) var(--ui-space-2, 8px);
-  border-radius: var(--ui-radius-1, 4px);
+  border-radius: var(--ui-radius-sm, 4px);
   background: var(--ui-text-primary, #1a1a1a);
   color: var(--ui-surface-elevated, #fff);
   font-size: var(--ui-font-size-xs, 0.75rem);