@mocanvas/mocanvas 4.0.2 → 4.1.0

package/dist/{ui-4C5V5GYT.css → mocanvas.css}

@@ -1,19 +1,7 @@
-/*
- * Default UI theme.
- *
- * Everything is driven by custom properties declared on the editor container
- * (`.mocanvas`), so an app can restyle the whole UI — chrome drawn on the
- * canvas included — by overriding a handful of variables. See `docs/UI.md`.
- *
- * Every text/background pair below is at or above 4.5:1 in both palettes, and
- * every icon or canvas-chrome stroke is at or above 3:1 against the surface it
- * sits on.
- */
-
+/* src/ui/ui.css */
 .mocanvas,
 .mocanvas-panel,
 .mocanvas-layer {
-  /* surfaces */
   --mocanvas-ui-panel: #ffffff;
   --mocanvas-ui-panel-border: #d6d9e0;
   --mocanvas-ui-control: rgba(16, 24, 40, 0.06);
@@ -28,8 +16,6 @@
   --mocanvas-ui-tip-bg: #16181d;
   --mocanvas-ui-tip-fg: #f6f7f9;
   --mocanvas-ui-tip-muted: #a9aeb9;
-
-  /* metrics */
   --mocanvas-ui-radius: 12px;
   --mocanvas-ui-radius-sm: 8px;
   --mocanvas-ui-btn: 40px;
@@ -38,31 +24,23 @@
   --mocanvas-ui-pad: 4px;
   --mocanvas-ui-pad-lg: 10px;
   --mocanvas-ui-inset: 12px;
-  /*
-   * Width the bottom-left and bottom-right docks (zoom bar, stats chip) reserve
-   * on either side of the centred toolbar. The toolbar wraps rather than grow
-   * into that reservation, so the three can never collide.
-   */
   --mocanvas-ui-dock: 300px;
-  /* Height the bottom edge occupies; the style panel stops above it. */
   --mocanvas-ui-bottom-dock: 62px;
-  --mocanvas-ui-font: system-ui, -apple-system, "Segoe UI", sans-serif;
-  --mocanvas-ui-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
-
-  /*
-   * Canvas chrome, read by the editor's indicator layer. These are deliberately
-   * NOT redefined for the dark UI: the canvas keeps its own background, which
-   * does not follow `prefers-color-scheme`. The values clear 3:1 against both a
-   * light (#f9fafb: 4.45 and 3.69) and a dark (#1b1d22: 3.63 and 4.37) canvas,
-   * so an app that darkens the canvas only needs to swap `-selection-fg`, the
-   * fill behind a solid handle.
-   */
+  --mocanvas-ui-font:
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    sans-serif;
+  --mocanvas-ui-mono:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
   --mocanvas-selection: #2f6fe4;
   --mocanvas-selection-fg: #ffffff;
   --mocanvas-brush-fill: rgba(47, 111, 228, 0.12);
   --mocanvas-snap: #cf3fe0;
 }
-
 @media (prefers-color-scheme: dark) {
   .mocanvas,
   .mocanvas-panel,
@@ -83,9 +61,6 @@
     --mocanvas-ui-tip-muted: #b9bec9;
   }
 }
-
-/* --- surfaces ----------------------------------------------------------- */
-
 .mocanvas-panel {
   position: absolute;
   z-index: 10;
@@ -105,13 +80,6 @@
   user-select: none;
   -webkit-user-select: none;
 }
-
-/*
- * `left: 50%` alone caps an absolutely positioned box at half the container
- * width (shrink-to-fit uses `container - left`), which made the toolbar wrap on
- * any viewport narrower than twice its own width. Anchoring both edges and
- * letting the margins centre a `max-content` box has no such cap.
- */
 .mocanvas-toolbar {
   left: var(--mocanvas-ui-inset);
   right: var(--mocanvas-ui-inset);
@@ -122,19 +90,13 @@
   flex-wrap: wrap;
   justify-content: center;
 }
-
 .mocanvas-zoombar {
   left: var(--mocanvas-ui-inset);
   bottom: var(--mocanvas-ui-inset);
 }
-
 .mocanvas-stylepanel {
   right: var(--mocanvas-ui-inset);
   top: var(--mocanvas-ui-inset);
-  /*
-   * Sized so the content column still holds two 3-button groups side by side
-   * (2 × 124 + 4) with a classic 17px scrollbar taking its share of the width.
-   */
   width: 292px;
   max-height: calc(100% - 2 * var(--mocanvas-ui-inset) - var(--mocanvas-ui-bottom-dock));
   overflow-y: auto;
@@ -144,22 +106,34 @@
   align-items: stretch;
   gap: var(--mocanvas-ui-pad-lg);
   padding: var(--mocanvas-ui-pad-lg);
-  /*
-   * Scroll affordance: two fixed gradients painted against the panel and two
-   * scrolling shadows behind them. The shadow only shows while content is
-   * clipped in that direction, so a short panel looks flat.
-   */
   background-image:
     linear-gradient(var(--mocanvas-ui-panel) 30%, rgba(0, 0, 0, 0)),
     linear-gradient(rgba(0, 0, 0, 0), var(--mocanvas-ui-panel) 70%),
-    radial-gradient(farthest-side at 50% 0, rgba(15, 18, 25, 0.22), rgba(0, 0, 0, 0)),
-    radial-gradient(farthest-side at 50% 100%, rgba(15, 18, 25, 0.22), rgba(0, 0, 0, 0));
-  background-position: 0 0, 0 100%, 0 0, 0 100%;
-  background-size: 100% 26px, 100% 26px, 100% 9px, 100% 9px;
+    radial-gradient(
+      farthest-side at 50% 0,
+      rgba(15, 18, 25, 0.22),
+      rgba(0, 0, 0, 0)),
+    radial-gradient(
+      farthest-side at 50% 100%,
+      rgba(15, 18, 25, 0.22),
+      rgba(0, 0, 0, 0));
+  background-position:
+    0 0,
+    0 100%,
+    0 0,
+    0 100%;
+  background-size:
+    100% 26px,
+    100% 26px,
+    100% 9px,
+    100% 9px;
   background-repeat: no-repeat;
-  background-attachment: local, local, scroll, scroll;
+  background-attachment:
+    local,
+    local,
+    scroll,
+    scroll;
 }
-
 .mocanvas-stats {
   right: var(--mocanvas-ui-inset);
   bottom: var(--mocanvas-ui-inset);
@@ -173,12 +147,10 @@
   color: var(--mocanvas-ui-muted);
   border-radius: var(--mocanvas-ui-radius-sm);
 }
-
 .mocanvas-stats b {
   color: var(--mocanvas-ui-text);
   font-weight: 600;
 }
-
 .mocanvas-divider {
   flex: 0 0 auto;
   align-self: stretch;
@@ -186,40 +158,23 @@
   margin: 4px 3px;
   background: var(--mocanvas-ui-panel-border);
 }
-
-/*
- * Narrow layouts. The bottom edge holds three panels — zoom bar, toolbar,
- * stats — whose natural widths add up to about 1290px. Below that the toolbar
- * takes a row of its own and stops reserving the docks; below 560px the stats
- * chip moves out of the bottom edge altogether.
- */
 @media (max-width: 1290px) {
   .mocanvas,
   .mocanvas-panel {
-    /* the toolbar now has a row of its own above the zoom bar */
     --mocanvas-ui-bottom-dock: 124px;
   }
-
   .mocanvas-toolbar {
     --mocanvas-ui-dock: 0px;
     bottom: calc(2 * var(--mocanvas-ui-inset) + 50px);
   }
 }
-
-/*
- * Phone-width: the bottom edge cannot hold the zoom bar and the stats chip side
- * by side, so each takes a row of its own and the style panel keeps the top,
- * spanning the width and capped at a share of the height.
- */
 @media (max-width: 560px) {
   .mocanvas-stats {
     bottom: calc(2 * var(--mocanvas-ui-inset) + 50px);
   }
-
   .mocanvas-toolbar {
     bottom: calc(3 * var(--mocanvas-ui-inset) + 112px);
   }
-
   .mocanvas-stylepanel {
     left: var(--mocanvas-ui-inset);
     right: var(--mocanvas-ui-inset);
@@ -227,9 +182,6 @@
     max-height: 42%;
   }
 }
-
-/* --- buttons ------------------------------------------------------------ */
-
 .mocanvas-btn {
   position: relative;
   flex: 0 0 auto;
@@ -251,59 +203,47 @@
   font-weight: 600;
   line-height: 1;
   cursor: pointer;
-  transition: background-color 0.12s ease, color 0.12s ease, transform 0.08s ease;
+  transition:
+    background-color 0.12s ease,
+    color 0.12s ease,
+    transform 0.08s ease;
 }
-
 .mocanvas-btn--wide {
   width: auto;
   min-width: 56px;
   padding: 0 10px;
   font-variant-numeric: tabular-nums;
 }
-
 .mocanvas-btn:hover:not(:disabled) {
   background: var(--mocanvas-ui-hover);
 }
-
 .mocanvas-btn:active:not(:disabled) {
   background: var(--mocanvas-ui-active);
   transform: scale(0.94);
 }
-
-.mocanvas-btn[aria-pressed="true"],
-.mocanvas-btn[aria-checked="true"] {
+.mocanvas-btn[aria-pressed=true],
+.mocanvas-btn[aria-checked=true] {
   background: var(--mocanvas-ui-accent);
   color: var(--mocanvas-ui-accent-fg);
 }
-
-.mocanvas-btn[aria-pressed="true"]:hover,
-.mocanvas-btn[aria-checked="true"]:hover,
-.mocanvas-btn[aria-pressed="true"]:active,
-.mocanvas-btn[aria-checked="true"]:active {
+.mocanvas-btn[aria-pressed=true]:hover,
+.mocanvas-btn[aria-checked=true]:hover,
+.mocanvas-btn[aria-pressed=true]:active,
+.mocanvas-btn[aria-checked=true]:active {
   background: var(--mocanvas-ui-accent);
-  /* The accent already reads as "on"; darkening it would break its contrast
-     with the label, so pressed buttons signal hover with the ring instead. */
   box-shadow: inset 0 0 0 2px var(--mocanvas-ui-panel), inset 0 0 0 3px var(--mocanvas-ui-accent);
 }
-
-/* The tint carries the "open" signal on its own; tinting the icon as well
-   would drop it to 4.37:1 against that tint in the light palette. */
-.mocanvas-btn[aria-expanded="true"]:not([aria-pressed="true"]):not([aria-checked="true"]) {
+.mocanvas-btn[aria-expanded=true]:not([aria-pressed=true]):not([aria-checked=true]) {
   background: var(--mocanvas-ui-accent-soft);
 }
-
 .mocanvas-btn:disabled {
   opacity: 0.35;
   cursor: default;
 }
-
 .mocanvas-btn:focus,
 .mocanvas-swatch:focus {
   outline: none;
 }
-
-/* The 2px offset keeps a ring of panel colour between an accent-filled button
-   and its accent ring, so focus stays visible on a pressed control. */
 .mocanvas-btn:focus-visible,
 .mocanvas-swatch:focus-visible,
 .mocanvas-slider:focus-visible {
@@ -311,47 +251,35 @@
   outline-offset: 2px;
   z-index: 1;
 }
-
-/* Buttons take their icon size from the token; icons used as inline marks
-   (the "mixed" badge, the picker chevron) keep the size they ask for. */
 .mocanvas-btn > .mocanvas-icon {
   width: var(--mocanvas-ui-icon);
   height: var(--mocanvas-ui-icon);
 }
-
-/* --- style panel groups ------------------------------------------------- */
-
 .mocanvas-group {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-
 .mocanvas-group + .mocanvas-group {
   padding-top: var(--mocanvas-ui-pad-lg);
   border-top: 1px solid var(--mocanvas-ui-panel-border);
 }
-
 .mocanvas-seg {
   display: flex;
   flex-wrap: wrap;
   gap: var(--mocanvas-ui-gap);
 }
-
-.mocanvas-seg .mocanvas-btn:not([aria-checked="true"]):not([aria-pressed="true"]) {
+.mocanvas-seg .mocanvas-btn:not([aria-checked=true]):not([aria-pressed=true]) {
   background: var(--mocanvas-ui-control);
 }
-
-.mocanvas-seg .mocanvas-btn:hover:not([aria-checked="true"]):not([aria-pressed="true"]) {
+.mocanvas-seg .mocanvas-btn:hover:not([aria-checked=true]):not([aria-pressed=true]) {
   background: var(--mocanvas-ui-accent-soft);
 }
-
 .mocanvas-seg--split {
   flex-wrap: nowrap;
   justify-content: space-between;
   gap: 4px;
 }
-
 .mocanvas-row-label {
   display: flex;
   align-items: center;
@@ -364,7 +292,6 @@
   letter-spacing: 0.5px;
   text-transform: uppercase;
 }
-
 .mocanvas-mixed {
   display: inline-flex;
   align-items: center;
@@ -375,9 +302,6 @@
   letter-spacing: 0;
   text-transform: none;
 }
-
-/* --- the shape picker --------------------------------------------------- */
-
 .mocanvas-picker {
   display: flex;
   align-items: center;
@@ -395,37 +319,27 @@
   cursor: pointer;
   transition: background-color 0.12s ease;
 }
-
 .mocanvas-picker:hover {
   background: var(--mocanvas-ui-accent-soft);
 }
-
 .mocanvas-picker:active {
   background: var(--mocanvas-ui-active);
 }
-
 .mocanvas-picker:focus {
   outline: none;
 }
-
 .mocanvas-picker:focus-visible {
   outline: 2px solid var(--mocanvas-ui-accent);
   outline-offset: 2px;
 }
-
 .mocanvas-picker > span {
   display: inline-flex;
   align-items: center;
   gap: 8px;
 }
-
 .mocanvas-picker .mocanvas-icon:last-child {
   color: var(--mocanvas-ui-muted);
 }
-
-/* --- swatches ----------------------------------------------------------- */
-
-/* The button is a full 40×40 target; the disc inside it is the visual mark. */
 .mocanvas-swatch {
   display: inline-flex;
   align-items: center;
@@ -440,7 +354,6 @@
   cursor: pointer;
   transition: background-color 0.12s ease, transform 0.08s ease;
 }
-
 .mocanvas-swatch > span {
   display: block;
   width: 22px;
@@ -450,28 +363,24 @@
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
   transition: box-shadow 0.12s ease;
 }
-
 .mocanvas-swatch:hover {
   background: var(--mocanvas-ui-hover);
 }
-
 .mocanvas-swatch:active {
   transform: scale(0.92);
   background: var(--mocanvas-ui-active);
 }
-
-.mocanvas-swatch[aria-checked="true"] > span {
-  box-shadow: 0 0 0 2px var(--mocanvas-ui-panel), 0 0 0 4px var(--mocanvas-ui-accent), inset 0 0 0 1px rgba(0, 0, 0, 0.18);
+.mocanvas-swatch[aria-checked=true] > span {
+  box-shadow:
+    0 0 0 2px var(--mocanvas-ui-panel),
+    0 0 0 4px var(--mocanvas-ui-accent),
+    inset 0 0 0 1px rgba(0, 0, 0, 0.18);
 }
-
 .mocanvas-swatches {
   display: grid;
   grid-template-columns: repeat(6, minmax(var(--mocanvas-ui-btn), 1fr));
   gap: var(--mocanvas-ui-gap);
 }
-
-/* --- slider ------------------------------------------------------------- */
-
 .mocanvas-slider {
   width: 100%;
   height: 24px;
@@ -479,14 +388,6 @@
   accent-color: var(--mocanvas-ui-accent);
   cursor: pointer;
 }
-
-/* --- popovers ----------------------------------------------------------- */
-
-/*
- * Fixed, not absolute: a popover anchored inside `.mocanvas-stylepanel` would
- * otherwise be clipped by that panel's own scroll container. Placement is
- * computed against the viewport in `overlays.tsx`.
- */
 .mocanvas-popover {
   position: fixed;
   z-index: 30;
@@ -502,13 +403,6 @@
   font-family: var(--mocanvas-ui-font);
   pointer-events: auto;
 }
-
-/* --- tooltip ------------------------------------------------------------ */
-
-/*
- * One shared, viewport-clamped tooltip. A CSS-only `::after` version cannot
- * avoid the viewport edge, and is clipped outright inside a scrolling panel.
- */
 .mocanvas-tooltip {
   position: fixed;
   z-index: 40;
@@ -528,12 +422,10 @@
   white-space: nowrap;
   pointer-events: none;
 }
-
 .mocanvas-tooltip kbd {
   color: var(--mocanvas-ui-tip-muted);
   font: inherit;
 }
-
 @media (prefers-reduced-motion: reduce) {
   .mocanvas-btn,
   .mocanvas-swatch,
@@ -542,24 +434,20 @@
     transition: none;
   }
 }
-
+[data-reduce-motion=true] .mocanvas-btn,
+[data-reduce-motion=true] .mocanvas-swatch,
+[data-reduce-motion=true] .mocanvas-swatch > span,
+[data-reduce-motion=true] .mocanvas-picker,
+[data-reduce-motion=true] .mocanvas-menu-item,
+[data-reduce-motion=true] .mocanvas-layer {
+  transition: none !important;
+  animation: none !important;
+}
 .mocanvas-more {
   position: relative;
   display: inline-flex;
   flex: 0 0 auto;
 }
-
-/* ==========================================================================
- * The tldraw-shaped UI layer
- * --------------------------------------------------------------------------
- * Everything below styles the components in `ui-*.tsx`, `menu-items.tsx` and
- * `panel-*.tsx`. They use the same custom properties as the panels above, so
- * a host that has restyled the editor by setting `--mocanvas-ui-*` on the
- * container gets these for free.
- * ========================================================================== */
-
-/* --- screen-reader-only text -------------------------------------------- */
-
 .sr-only {
   position: absolute;
   width: 1px;
@@ -571,9 +459,6 @@
   white-space: nowrap;
   border: 0;
 }
-
-/* --- menus --------------------------------------------------------------- */
-
 .mocanvas-menu {
   position: fixed;
   z-index: 400;
@@ -589,19 +474,16 @@
   font-family: var(--mocanvas-ui-font);
   font-size: 13px;
 }
-
 .mocanvas-menu--icons .mocanvas-menu-icon-group {
   display: grid;
   grid-template-columns: repeat(3, var(--mocanvas-ui-btn));
   gap: var(--mocanvas-ui-gap);
 }
-
 .mocanvas-menu-group + .mocanvas-menu-group {
   margin-top: var(--mocanvas-ui-pad);
   padding-top: var(--mocanvas-ui-pad);
   border-top: 1px solid var(--mocanvas-ui-panel-border);
 }
-
 .mocanvas-menu-item {
   display: flex;
   align-items: center;
@@ -617,42 +499,32 @@
   text-align: start;
   cursor: pointer;
 }
-
 .mocanvas-menu-item:hover:not(:disabled) {
   background: var(--mocanvas-ui-hover);
 }
-
 .mocanvas-menu-item:focus-visible {
   outline: 2px solid var(--mocanvas-ui-accent);
   outline-offset: -2px;
 }
-
 .mocanvas-menu-item:disabled {
   opacity: 0.4;
   cursor: default;
 }
-
 .mocanvas-menu-item-label {
   flex: 1 1 auto;
 }
-
 .mocanvas-menu-item-note,
 .mocanvas-shortcut-label {
   color: var(--mocanvas-ui-muted);
 }
-
 .mocanvas-menu-item--sub::after {
   content: "";
 }
-
-/* --- keyboard shortcuts -------------------------------------------------- */
-
 .mocanvas-kbd {
   display: inline-flex;
   gap: 2px;
   color: var(--mocanvas-ui-muted);
 }
-
 .mocanvas-kbd kbd {
   min-width: 16px;
   padding: 1px 4px;
@@ -662,7 +534,6 @@
   font-size: 11px;
   text-align: center;
 }
-
 .mocanvas-shortcut-row {
   display: flex;
   align-items: center;
@@ -670,13 +541,11 @@
   gap: 16px;
   min-height: 26px;
 }
-
 .mocanvas-shortcuts {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 16px;
 }
-
 .mocanvas-shortcut-section h3 {
   margin: 0 0 6px;
   font-size: 12px;
@@ -684,9 +553,6 @@
   letter-spacing: 0.4px;
   color: var(--mocanvas-ui-muted);
 }
-
-/* --- dialogs ------------------------------------------------------------- */
-
 .mocanvas-dialog-backdrop {
   position: absolute;
   inset: 0;
@@ -695,7 +561,6 @@
   place-items: center;
   background: rgba(15, 18, 25, 0.35);
 }
-
 .mocanvas-dialog {
   position: relative;
   max-width: min(560px, calc(100% - 32px));
@@ -706,7 +571,6 @@
   align-items: stretch;
   padding: 0;
 }
-
 .mocanvas-dialog-header {
   display: flex;
   align-items: center;
@@ -714,18 +578,15 @@
   gap: 8px;
   padding: 12px 12px 8px;
 }
-
 .mocanvas-dialog-title {
   margin: 0;
   font-size: 15px;
   font-weight: 600;
 }
-
 .mocanvas-dialog-body {
   overflow-y: auto;
   padding: 0 12px 12px;
 }
-
 .mocanvas-dialog-footer {
   display: flex;
   align-items: center;
@@ -733,7 +594,6 @@
   gap: 8px;
   padding: 8px 12px 12px;
 }
-
 .mocanvas-dialog-checkbox {
   margin-inline-end: auto;
   display: inline-flex;
@@ -741,9 +601,6 @@
   gap: 6px;
   color: var(--mocanvas-ui-muted);
 }
-
-/* --- toasts -------------------------------------------------------------- */
-
 .mocanvas-toasts {
   position: absolute;
   right: var(--mocanvas-ui-inset);
@@ -754,26 +611,20 @@
   gap: 8px;
   max-width: min(360px, calc(100% - 2 * var(--mocanvas-ui-inset)));
 }
-
 .mocanvas-toast {
   position: relative;
   gap: 8px;
   padding: 10px;
 }
-
 .mocanvas-toast-body {
   display: flex;
   flex-direction: column;
   gap: 2px;
   flex: 1 1 auto;
 }
-
 .mocanvas-toast-desc {
   color: var(--mocanvas-ui-muted);
 }
-
-/* --- inputs and sliders --------------------------------------------------- */
-
 .mocanvas-input {
   display: flex;
   align-items: center;
@@ -782,7 +633,6 @@
   background: var(--mocanvas-ui-control);
   border-radius: var(--mocanvas-ui-radius-sm);
 }
-
 .mocanvas-input input,
 .mocanvas-textarea {
   flex: 1 1 auto;
@@ -793,20 +643,15 @@
   color: inherit;
   font: inherit;
 }
-
 .mocanvas-input input:focus-visible,
 .mocanvas-textarea:focus-visible {
   outline: 2px solid var(--mocanvas-ui-accent);
   outline-offset: 1px;
 }
-
-/* --- panels --------------------------------------------------------------- */
-
 .mocanvas-menu-panel {
   left: var(--mocanvas-ui-inset);
   top: var(--mocanvas-ui-inset);
 }
-
 .mocanvas-navigation-panel {
   left: var(--mocanvas-ui-inset);
   bottom: var(--mocanvas-ui-inset);
@@ -814,18 +659,15 @@
   align-items: stretch;
   min-width: 140px;
 }
-
 .mocanvas-navigation-row {
   display: flex;
   align-items: center;
   gap: var(--mocanvas-ui-gap);
 }
-
 .mocanvas-share-panel {
   right: var(--mocanvas-ui-inset);
   top: var(--mocanvas-ui-inset);
 }
-
 .mocanvas-quick-actions,
 .mocanvas-helper-buttons {
   position: absolute;
@@ -836,14 +678,12 @@
   gap: var(--mocanvas-ui-gap);
   z-index: 10;
 }
-
 .mocanvas-contextual-toolbar .mocanvas-toolbar {
   position: relative;
   inset: auto;
   margin: 0;
   max-width: none;
 }
-
 .mocanvas-following-indicator {
   position: absolute;
   inset: 0;
@@ -852,50 +692,49 @@
   border: 3px solid var(--mocanvas-selection);
   border-radius: 4px;
 }
-
 .mocanvas-following-indicator > * {
   pointer-events: auto;
 }
-
 .mocanvas-offline {
   left: 50%;
   top: var(--mocanvas-ui-inset);
   transform: translateX(-50%);
   padding: 4px 10px;
 }
-
-/* --- pickers -------------------------------------------------------------- */
-
 .mocanvas-style-row + .mocanvas-style-row {
   margin-top: var(--mocanvas-ui-pad-lg);
 }
-
 .mocanvas-popover-grid {
   display: grid;
   grid-template-columns: repeat(var(--mocanvas-popover-cols, 5), var(--mocanvas-ui-btn));
   gap: var(--mocanvas-ui-gap);
 }
-
 .mocanvas-select-value {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
-/* --- people --------------------------------------------------------------- */
-
 .mocanvas-people-list,
 .mocanvas-page-list {
   display: flex;
   flex-direction: column;
 }
-
 .mocanvas-page-row {
   display: flex;
   align-items: center;
   gap: 4px;
 }
-
+.mocanvas-page-row-name,
+.mocanvas-page-rename {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.mocanvas-page-row-actions {
+  flex: 0 0 auto;
+  width: var(--mocanvas-ui-btn);
+  justify-content: center;
+  padding: 0;
+}
 .mocanvas-presence-editor {
   display: flex;
   align-items: center;
@@ -903,15 +742,11 @@
   padding-bottom: var(--mocanvas-ui-pad);
   border-bottom: 1px solid var(--mocanvas-ui-panel-border);
 }
-
 .mocanvas-face-pile-more {
   align-self: center;
   margin-left: 4px;
   color: var(--mocanvas-ui-muted);
 }
-
-/* --- debug ---------------------------------------------------------------- */
-
 .mocanvas-debug-flags {
   display: flex;
   flex-direction: column;
@@ -919,17 +754,14 @@
   font-family: var(--mocanvas-ui-mono);
   font-size: 11px;
 }
-
 .mocanvas-debug-flag {
   display: flex;
   align-items: center;
   gap: 6px;
 }
-
-/* --- images --------------------------------------------------------------- */
-
 .mocanvas-image,
 .mocanvas-image > svg {
   max-width: 100%;
   height: auto;
 }
+/*# sourceMappingURL=mocanvas.css.map */