@mosetta/editor 0.0.0-stage → 0.0.29

package/tiles/canvas/canvas.css

@@ -0,0 +1,973 @@
+.canvas-view {
+  --canvas-bar: calc(var(--mosetta-wb-icon-box) + 8px);
+
+  /* Room under the page for the control that adds a block AFTER the last one. That control stands
+     at the page's bottom edge, so a page whose content ends exactly at the bottom of the frame
+     leaves it nowhere to be: outside, where the surface clips it. The strip is both where it can
+     be drawn and the few pixels of scroll that bring the page's own end into view. */
+  --canvas-foot: 24px;
+
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #ffffff;
+}
+
+/* Actions above the frame — and the room the topmost label needs: an outline's tag hangs above
+   what it names, so for a block at the very top of the page it used to be cut off by the panel's
+   edge. Overflow on the sides is accepted: pushing a label back inside would take more machinery
+   than it is worth. */
+.canvas-view__bar {
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  gap: 2px;
+  height: var(--canvas-bar);
+  padding: 4px 6px;
+  border-bottom: 1px solid #e4e4e7;
+  background: #fafafa;
+}
+
+.canvas-view__action {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--mosetta-wb-icon-box);
+  height: var(--mosetta-wb-icon-box);
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: none;
+  color: #52525b;
+  cursor: pointer;
+}
+
+.canvas-view__action svg {
+  width: var(--mosetta-wb-icon);
+  height: var(--mosetta-wb-icon);
+}
+
+.canvas-view__action:hover {
+  background: #e4e4e7;
+}
+
+/* the bar's links (the preview in a new tab) dress as its buttons */
+a.canvas-view__action {
+  text-decoration: none;
+}
+
+/* a hairline between the desk's buttons (tree, open) and the frame's own */
+.canvas-view__divider {
+  flex: none;
+  width: 1px;
+  height: calc(var(--mosetta-wb-icon-box) - 8px);
+  margin: 0 4px;
+  background: #d4d4d8;
+}
+
+.canvas-view__action--play {
+  color: #16a34a;
+}
+
+.canvas-view__action--picker {
+  color: #2563eb;
+}
+
+/* the canvas tools are unfolded */
+.canvas-view__action--on {
+  background: #e4e4e7;
+  color: #18181b;
+}
+
+/* the inspector is off — the one state of this bar worth shouting about */
+.canvas-view__action--off {
+  color: #dc2626;
+}
+
+/* an inspected published revision: the badge says why nothing on this canvas can be edited */
+.canvas-view__readonly {
+  margin-left: 6px;
+  padding: 1px 7px;
+  border: 1px solid #d4d4d8;
+  border-radius: 9px;
+  font-size: var(--mosetta-wb-font-xs);
+  line-height: 16px;
+  color: #52525b;
+  background: #f4f4f5;
+  white-space: nowrap;
+}
+
+/* the DRAFT's badge, beside where a revision says it is read-only: which draft, and whether its
+   edits are on disk — a green dot when saved, amber while saving */
+.canvas-view__readonly--draft {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  border-color: #bbf7d0;
+  color: #166534;
+  background: #f0fdf4;
+}
+
+.canvas-view__readonly--saving {
+  border-color: #fde68a;
+  color: #92400e;
+  background: #fffbeb;
+}
+
+.canvas-view__save-dot {
+  flex: none;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #22c55e;
+}
+
+.canvas-view__readonly--saving .canvas-view__save-dot {
+  background: #f59e0b;
+  animation: canvas-view-pulse 1s ease-in-out infinite alternate;
+}
+
+@keyframes canvas-view-pulse {
+  to {
+    opacity: 0.35;
+  }
+}
+
+/* a revision's way to an edit: a draft of it — worded, like Publish is for a draft, but quieter */
+/* the page's blocks have newer versions: a chip that opens the updates window (ADR-0061) */
+.canvas-view__updates {
+  margin-left: 6px;
+  padding: 2px 10px;
+  border: 1px solid #bfdbfe;
+  border-radius: 9px;
+  font: inherit;
+  font-size: var(--mosetta-wb-font-xs);
+  font-weight: 600;
+  line-height: 16px;
+  color: #1d4ed8;
+  background: #eff6ff;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.canvas-view__updates:hover {
+  border-color: #93c5fd;
+}
+
+.canvas-view__new-draft {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin-left: 6px;
+  padding: 2px 10px 2px 8px;
+  border: 1px solid #2563eb;
+  border-radius: 9px;
+  font: inherit;
+  font-size: var(--mosetta-wb-font-xs);
+  font-weight: 600;
+  line-height: 16px;
+  color: #2563eb;
+  background: #ffffff;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.canvas-view__new-draft:hover:not(:disabled) {
+  background: #eff6ff;
+}
+
+.canvas-view__new-draft:disabled {
+  border-color: #d4d4d8;
+  color: #a1a1aa;
+  cursor: default;
+}
+
+.canvas-view__new-draft svg,
+.canvas-view__publish svg {
+  flex: none;
+  width: 13px;
+  height: 13px;
+}
+
+/* the draft's way to the site — the one worded button of the bar, beside the draft group */
+.canvas-view__publish {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin-left: 6px;
+  padding: 2px 10px 2px 8px;
+  border: 1px solid #2563eb;
+  border-radius: 9px;
+  font: inherit;
+  font-size: var(--mosetta-wb-font-xs);
+  font-weight: 600;
+  line-height: 16px;
+  color: #ffffff;
+  background: #2563eb;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.canvas-view__publish:hover {
+  border-color: #1d4ed8;
+  background: #1d4ed8;
+}
+
+.canvas-view__publish:disabled {
+  border-color: #d4d4d8;
+  color: #a1a1aa;
+  background: #f4f4f5;
+  cursor: default;
+}
+
+/* the draft group (copy/paste/undo/redo) keeps to the right edge: blue while the action has
+   something to act on, gray while it has not — the colour IS the whole status UI */
+.canvas-view__action--right {
+  margin-left: auto;
+}
+
+.canvas-view__action--history {
+  color: #2563eb;
+}
+
+.canvas-view__action--history:disabled {
+  color: #a1a1aa;
+  cursor: default;
+}
+
+.canvas-view__action--history:disabled:hover {
+  background: none;
+}
+
+/* The frame lives in the stage's CONTENT box, the overlay in its padding box — so the foot strip
+   below the frame is drawable while the frame itself ends above it. Its colour is the bar's: the
+   page is bracketed by two neutral strips, and neither is mistaken for the page. */
+.canvas-view__stage {
+  position: relative;
+  box-sizing: border-box;
+  flex: 1;
+  min-height: 0;
+  padding-bottom: var(--canvas-foot);
+  background: #fafafa;
+}
+
+/* The page over everything else. Fixed rather than moved into another container on purpose:
+   re-parenting an iframe reloads it, and "look at the page" must not restart the page.
+   No foot strip either: it is room for a control that is not drawn here (nothing of the editor
+   is), and full screen means the page gets the whole screen. */
+.canvas-view--fullscreen .canvas-view__stage {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483000;
+  padding-bottom: 0;
+  background: #ffffff;
+}
+
+.canvas-view__close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--mosetta-wb-icon-sm) + 4px);
+  height: calc(var(--mosetta-wb-icon-sm) + 4px);
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: #dc2626;
+  color: #ffffff;
+  cursor: pointer;
+}
+
+.canvas-view__close svg {
+  width: var(--mosetta-wb-icon-sm);
+  height: var(--mosetta-wb-icon-sm);
+}
+
+.canvas-view__frame {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+.canvas-view__empty {
+  color: #71717a;
+  font: var(--mosetta-wb-font)/1.5 ui-sans-serif, system-ui, sans-serif;
+  padding: 12px;
+}
+
+/* The drawing surface: covers the frame exactly, clips whatever hangs outside it, and lets every
+   event through — hit-testing happens inside the preview, on the real DOM.
+   It CLIPS but never moves: the layer inside is what slides with the page. Sliding the clipping
+   box itself takes the visible window with it, and outlines start disappearing towards the edge
+   you scrolled away from. */
+.canvas-view__overlay {
+  position: absolute;
+  top: calc(-1 * var(--canvas-bar));
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+/* What actually follows the page's scroll (see the canvas module: written straight to the node).
+   It starts at the FRAME's top, not at the surface's — the surface reaches a bar's height higher
+   so that a label belonging to the topmost block has somewhere to hang; every coordinate the
+   preview reports is still measured from the frame. */
+.canvas-view__layer {
+  position: absolute;
+  top: var(--canvas-bar);
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+/* Layers, from the back: the map of resting places, then the block outlines (a selection has to
+   be visible over the places it offers), then the place being pointed at, then the control that
+   points at it. Under the pointer the green has to close around its own control — over the blue
+   outline and over the selection's labels, or the two borders cut each other. */
+.canvas-view__outline {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  box-sizing: border-box;
+}
+
+.canvas-view__outline--hover {
+  outline: 1px dashed #60a5fa;
+  outline-offset: -1px;
+  background: rgb(96 165 250 / 6%);
+}
+
+.canvas-view__outline--select {
+  outline: 2px solid #2563eb;
+  outline-offset: -2px;
+}
+
+/* The PICK (Ctrl) mode wears YELLOW — the semantic colour of picking parts of the tree for
+   copy/paste. Same shapes as the blue pair: the mode changes the colour, never the language. */
+.canvas-view__outline--hover-pick {
+  outline: 1px dashed #facc15;
+  outline-offset: -1px;
+  background: rgb(250 204 21 / 8%);
+}
+
+.canvas-view__outline--pick {
+  outline: 2px solid #eab308;
+  outline-offset: -2px;
+}
+
+/* everything a pick covers is PICKED, so it wears the same yellow — thinner, so the branch root
+   (what was actually clicked) still reads at a glance */
+.canvas-view__outline--pick-covered {
+  outline: 1px solid #eab308;
+  outline-offset: -1px;
+}
+
+/* GHOSTS — the places a block may go, as green tabs cut from the same sheet as the selection's
+   frame and tags: on top a segment of the corner strip (the strip's own rounding applies), below a
+   tab hanging from the bottom edge, left and right tabs on those edges; a free tag of its own inside
+   an empty slot or at the page's ends. Green, not the blue of the selection: those point at a block
+   that is there, this one adds one. */
+.canvas-view__ghost {
+  display: flex;
+  flex: none;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 1px 6px;
+  border: 0;
+  background: #059669;
+  color: #ffffff;
+  font: var(--mosetta-wb-font-xs)/16px ui-sans-serif, system-ui, sans-serif;
+  white-space: nowrap;
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.canvas-view__ghost:hover {
+  background: #047857;
+}
+
+.canvas-view__ghost-plus {
+  font-weight: 700;
+}
+
+/* free: a tag standing on its own over the page */
+.canvas-view__ghost--free {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 3;
+  border-radius: 3px;
+}
+
+/* the side tabs: as tall as the block, up to a few lines, a "+" on the edge */
+.canvas-view__ghost--left,
+.canvas-view__ghost--right {
+  width: 18px;
+  padding: 0;
+}
+
+.canvas-view__ghost--left {
+  border-radius: 3px 0 0 3px;
+}
+
+.canvas-view__ghost--right {
+  border-radius: 0 3px 3px 0;
+}
+
+/* where the side tabs hang: off the block's left or right edge, halfway down */
+.canvas-view__edge {
+  position: absolute;
+  top: 50%;
+  display: flex;
+  transform: translateY(-50%);
+}
+
+.canvas-view__edge--left {
+  right: 100%;
+}
+
+.canvas-view__edge--right {
+  left: 100%;
+}
+
+/* the outline steps forward while its ghost is pointed at — the tooltip of a side tab must read */
+.canvas-view__outline:has(.canvas-view__ghost:hover) {
+  z-index: 4;
+}
+
+/* THE LANDING SPACE: the very spot a picked block goes — room the preview made for it, framed in
+   violet (green says which block it joins, violet says where exactly) */
+.canvas-view__landing {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  box-sizing: border-box;
+  border: 2px dashed #7c3aed;
+  border-radius: 4px;
+  background: rgb(124 58 237 / 10%);
+}
+
+.canvas-view__slot-area {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  box-sizing: border-box;
+}
+
+/* the map of where things can go — shown only while nothing in particular is being pointed at */
+.canvas-view__slot-area--resting {
+  z-index: 0;
+  border: 1px dashed #6ee7b7;
+  background: rgb(5 150 105 / 5%);
+}
+
+/* The MARCHING BORDER: the one signal that a place is waiting for a block. The same border is
+   drawn twice — around the container in the preview and around the palette (see palette.css) — so the
+   two halves of one answer look like one thing. Painted as four gradients rather than a dashed
+   border because a border's dashes cannot be moved: it is the travel that catches the eye. */
+.canvas-view__slot-area--target {
+  background-color: rgb(16 185 129 / 10%);
+  background-image:
+    repeating-linear-gradient(90deg, #10b981 0 3px, transparent 3px 6px),
+    repeating-linear-gradient(90deg, #10b981 0 3px, transparent 3px 6px),
+    repeating-linear-gradient(0deg, #10b981 0 3px, transparent 3px 6px),
+    repeating-linear-gradient(0deg, #10b981 0 3px, transparent 3px 6px);
+  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+  background-position: 0 0, 0 100%, 0 0, 100% 0;
+  background-size: 6px 1px, 6px 1px, 1px 6px, 1px 6px;
+  animation: mosetta-marching-border 1s linear infinite;
+}
+
+/* top rightwards, bottom leftwards, left upwards, right downwards — one circuit of the perimeter */
+@keyframes mosetta-marching-border {
+  to {
+    background-position: 6px 0, -6px 100%, 0 -6px, 100% 6px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .canvas-view__slot-area--target {
+    animation: none;
+  }
+}
+
+
+/* A label hanging off the top-left corner of what it names. MODIFIERS BELOW, NEVER ABOVE: they
+   carry the same specificity as this rule, so whichever comes last in the file wins — put one
+   above and it silently loses its own position back to the base. */
+.canvas-view__tag {
+  position: absolute;
+  top: -18px;
+  left: -2px;
+  padding: 1px 6px;
+  border-radius: 3px 3px 0 0;
+  background: #2563eb;
+  color: #ffffff;
+  font: var(--mosetta-wb-font-xs)/16px ui-sans-serif, system-ui, sans-serif;
+  white-space: nowrap;
+}
+
+/* the name inside the chip (no room for it on its own over the frame): a shade apart from the
+   size and the buttons it leads */
+.canvas-view__corner .canvas-view__tag--name {
+  background: #1d4ed8;
+}
+
+/* the size of the selected block, in the corner opposite its name */
+.canvas-view__tag--size {
+  right: -2px;
+  left: auto;
+}
+
+/* The right corner of a SELECTION is a strip rather than a single tag: what the block measures, and
+   the one action that takes the whole block away. They share one rounded rectangle with nothing
+   between them — a red button standing alone over the page would read as page content, and the
+   overlay's whole point is that nothing on it belongs to the application. So the tags inside go
+   square and only the ENDS of the strip are rounded — by position, not by clipping: the button's
+   tooltip hangs below it, and an overflow:hidden here would cut it off.
+   Order matters (see the tag above): the square reset must come BEFORE the two ends, or it takes
+   their rounding back off.
+   Flush with the block's edge, NOT 2px past it like the name tag opposite: a block that reaches
+   the right side of the page puts that overhang outside the frame, where the surface clips it —
+   and a clipped square reads as a button whose icon sits off-centre. */
+.canvas-view__corner {
+  position: absolute;
+  top: -18px;
+  right: 0;
+  display: flex;
+  align-items: stretch;
+}
+
+.canvas-view__corner .canvas-view__tag {
+  position: static;
+  border-radius: 0;
+}
+
+.canvas-view__corner > :first-child {
+  border-top-left-radius: 3px;
+}
+
+.canvas-view__corner > :last-child {
+  border-top-right-radius: 3px;
+}
+
+/* The destructive one — the only red on the overlay, and the only thing on it that is pressed.
+   A square: `flex: none` so it keeps its width whatever the strip is asked to fit into, and the
+   glyph centred by margins rather than by the box, which stays right even if the box is not. */
+.canvas-view__tag-action {
+  position: relative;
+  display: flex;
+  flex: none;
+  width: 18px;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  background: #dc2626;
+  color: #ffffff;
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.canvas-view__tag-action svg {
+  display: block;
+  width: 11px;
+  height: 11px;
+  margin: auto;
+}
+
+/* the bottom strip: the top one's twin, hanging from the bottom edge under the same corner */
+.canvas-view__corner.canvas-view__corner--bottom {
+  top: 100%;
+}
+
+.canvas-view__corner.canvas-view__corner--bottom > * {
+  border-radius: 0 0 3px 3px;
+}
+
+/* A tooltip has to be readable, and this one hangs over the block, where the insertion control
+   also lives — which sits ABOVE the outlines by design (a place under the pointer wins over the
+   selection). The outline as a whole steps forward for as long as the button is pointed at, which
+   is the only moment the tooltip exists. */
+.canvas-view__outline:has(.canvas-view__tag-action:hover) {
+  z-index: 4;
+}
+
+.canvas-view__tag-action:hover {
+  background: #b91c1c;
+}
+
+/* a place wears the same two corners as a block, in the colour of the frame around it */
+.canvas-view__tag--slot {
+  background: #10b981;
+}
+
+.canvas-view__tag--landing {
+  background: #7c3aed;
+}
+
+/* the block's settings, folded behind the chip: blue like the chip, pressed while they are out */
+.canvas-view__tag-action--settings {
+  background: #2563eb;
+}
+
+.canvas-view__tag-action--settings:hover {
+  background: #1d4ed8;
+}
+
+.canvas-view__tag-action--on {
+  background: #1e3a8a;
+}
+
+/* the settings asked for and their form still loading: the button turns while the card waits,
+   unseen, to appear whole where it stays (settingsPopover.tsx) */
+.canvas-view__tag-action--loading svg {
+  visibility: hidden;
+}
+
+.canvas-view__tag-action--loading::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  width: 8px;
+  height: 8px;
+  margin: auto;
+  border: 1.5px solid rgb(255 255 255 / 35%);
+  border-top-color: #ffffff;
+  border-radius: 50%;
+  animation: canvas-view-spin 0.7s linear infinite;
+}
+
+@keyframes canvas-view-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* The CANVAS TOOLS (providerChrome.tsx), unfolded by the cog of the bar: a column in the top-right
+   corner of the stage, over the overlay — the page's settings and the blocks' standing controls
+   (i18n's language, a theme's pick). The author's tools, not the page. */
+/* an editor tool (ADR-0062): over the whole stage — the page, its frames, its popovers — while
+   the tree beside the canvas stays in sight; the tool draws its own head and body */
+.canvas-view__tool {
+  position: absolute;
+  inset: 0;
+  z-index: 6;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  background: #fff;
+}
+
+.canvas-view__tool > * {
+  flex: 1;
+  min-height: 0;
+}
+
+.canvas-view__tool-icon {
+  width: var(--mosetta-wb-icon);
+  height: var(--mosetta-wb-icon);
+  object-fit: contain;
+}
+
+.canvas-view__chrome {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: flex-end;
+  pointer-events: auto;
+}
+
+.canvas-view__chrome-item {
+  padding: 2px 6px;
+  border: 1px solid #e4e4e7;
+  border-radius: 6px;
+  background: #ffffffee;
+  box-shadow: 0 1px 2px #0000000f;
+  font: var(--mosetta-wb-font-sm)/1.4 ui-sans-serif, system-ui, sans-serif;
+}
+
+.canvas-view__chrome-button {
+  padding: 4px 10px;
+  color: #3f3f46;
+  cursor: pointer;
+}
+
+.canvas-view__chrome-button:hover {
+  border-color: #a1a1aa;
+}
+
+.canvas-view__chrome-empty {
+  color: #71717a;
+}
+
+/* The selected block's settings, beside the block (see popoverPlacement.ts) — or, expanded, the
+   whole stage for a form that needs room. Over the overlay and the providers' chrome. */
+.canvas-view__settings {
+  position: absolute;
+  z-index: 4;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  /* the selection's own frame: square, blue, 2px — lapping over the block's, the two share the
+     line where they meet */
+  border: 2px solid #2563eb;
+  border-radius: 0;
+  background: #ffffff;
+  /* a shadow that falls away from the block, never across the seam */
+  box-shadow: 0 14px 28px -10px #00000040;
+  pointer-events: auto;
+  overflow: hidden;
+}
+
+/* the place under the block, riding on the seam: right in the head, before the close button */
+.canvas-view__settings-seam-ghost {
+  display: flex;
+  margin-left: auto;
+}
+
+.canvas-view__settings-seam-ghost .canvas-view__ghost {
+  border-radius: 3px;
+}
+
+.canvas-view__settings-head .canvas-view__settings-seam-ghost + .canvas-view__settings-action {
+  margin-left: 4px;
+}
+
+/* while the grip is dragged, the form below must not catch the pointer or select its text */
+.canvas-view__settings--resizing {
+  user-select: none;
+}
+
+/* a grip on the top edge sits in the head's left corner — the name steps aside for it */
+.canvas-view__settings--grip-top .canvas-view__settings-head {
+  padding-left: 20px;
+}
+
+/* the grip sits in the popover's free corner (the one away from the block and the edge it hugs) */
+.canvas-view__settings-grip {
+  position: absolute;
+  z-index: 1;
+  width: 16px;
+  height: 16px;
+  padding: 3px;
+  box-sizing: border-box;
+  color: #a1a1aa;
+  touch-action: none;
+}
+
+.canvas-view__settings-grip:hover,
+.canvas-view__settings--resizing .canvas-view__settings-grip {
+  color: #52525b;
+}
+
+.canvas-view__settings-grip svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.canvas-view__settings-grip--bottom-right {
+  right: 0;
+  bottom: 0;
+  cursor: nwse-resize;
+}
+
+.canvas-view__settings-grip--bottom-left {
+  left: 0;
+  bottom: 0;
+  cursor: nesw-resize;
+}
+
+.canvas-view__settings-grip--bottom-left svg {
+  transform: scaleX(-1);
+}
+
+.canvas-view__settings-grip--top-right {
+  right: 0;
+  top: 0;
+  cursor: nesw-resize;
+}
+
+.canvas-view__settings-grip--top-right svg {
+  transform: scaleY(-1);
+}
+
+.canvas-view__settings-grip--top-left {
+  left: 0;
+  top: 0;
+  cursor: nwse-resize;
+}
+
+.canvas-view__settings-grip--top-left svg {
+  transform: scale(-1);
+}
+
+.canvas-view__settings-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px 6px 12px;
+  border-bottom: 1px solid #f4f4f5;
+  font: var(--mosetta-wb-font-sm)/1.4 ui-sans-serif, system-ui, sans-serif;
+}
+
+.canvas-view__settings-name {
+  font-weight: 600;
+  color: #18181b;
+}
+
+.canvas-view__settings-id {
+  color: #a1a1aa;
+}
+
+/* where the block comes from — quieter than its id, and the first to give way in a narrow card */
+.canvas-view__settings-version {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  overflow: hidden;
+  color: #a1a1aa;
+  font-size: var(--mosetta-wb-font-xs);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.canvas-view__settings-version::before {
+  content: "·";
+}
+
+/* a newer version deployed: the tree's mark, in the head */
+.canvas-view__settings-newer {
+  flex: none;
+  padding: 0 5px;
+  border-radius: 3px;
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+
+.canvas-view__settings-action {
+  width: var(--mosetta-wb-icon-box);
+  height: var(--mosetta-wb-icon-box);
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: #52525b;
+  font-size: calc(var(--mosetta-wb-icon) - 1px);
+  line-height: var(--mosetta-wb-icon-box);
+  cursor: pointer;
+}
+
+.canvas-view__settings-action:first-of-type {
+  margin-left: auto;
+}
+
+.canvas-view__settings-action:hover {
+  background: #f4f4f5;
+}
+
+.canvas-view__settings-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  padding: 4px 12px 12px;
+}
+
+/* The settings' TABS (settingsTabs.ts): a row under the head, the one shown underlined */
+.canvas-view__settings-tabs {
+  display: flex;
+  gap: 2px;
+  padding: 0 8px;
+  border-bottom: 1px solid #f4f4f5;
+}
+
+.canvas-view__settings-tab {
+  margin-bottom: -1px;
+  padding: 6px 10px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: #71717a;
+  font: var(--mosetta-wb-font-sm)/1.4 ui-sans-serif, system-ui, sans-serif;
+  cursor: pointer;
+}
+
+.canvas-view__settings-tab:hover {
+  color: #18181b;
+}
+
+.canvas-view__settings-tab--on {
+  border-bottom-color: #2563eb;
+  color: #18181b;
+  font-weight: 600;
+}
+
+/* One tab at a time: the sections named for the others step aside — on Other, everything the
+   catalog does not know as Main or Styles stays (a section's own name the catalog lacks) */
+.canvas-view__settings-body[data-settings-tab="main"] [data-inspector-tab]:not([data-inspector-tab="main"]),
+.canvas-view__settings-body[data-settings-tab="styles"] [data-inspector-tab]:not([data-inspector-tab="styles"]),
+.canvas-view__settings-body[data-settings-tab="other"] [data-inspector-tab]:is([data-inspector-tab="main"], [data-inspector-tab="styles"]) {
+  display: none !important;
+}
+
+/* …and what a block's form leaves unnamed is its main settings: away on every other tab. An element
+   steps aside when it is outside every named section and holds none of them */
+.canvas-view__settings-body:not([data-settings-tab="main"]) .settings__form-host :not([data-inspector-tab], [data-inspector-tab] *):not(:has([data-inspector-tab])) {
+  display: none !important;
+}
+
+/* the page's own settings, folded: a button in the corner until asked for */
+/* the insert popover (insertPopover.tsx) wears the settings popover's frame; its body is the
+   block picker — the search stays put, the list scrolls */
+.canvas-view__insert-body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  padding-top: 8px;
+}
+
+.canvas-view__insert-body > .block-picker {
+  flex: 1 1 auto;
+}
+
+/* A wide field (a paragraph's text) widens the card; the form's other controls keep the width the
+   author wished for (--settings-wish-width, less the card's padding and — where a field can have
+   a reference circle — its gutter) — a select or the styler is not stretched along with a long text */
+.canvas-view__settings .settings__form .dui-root > :not(:has([data-wide-field])) {
+  max-width: calc(var(--settings-wish-width, 340px) - 24px);
+}
+
+.canvas-view__settings .settings__form[data-bindable] .dui-root > :not(:has([data-wide-field])) {
+  max-width: calc(var(--settings-wish-width, 340px) - 64px);
+}
+
+/* out of the way for a moment — the page scrolls, or the block is out of sight: invisible and
+   not in the pointer's way, yet still there (its focus, its open picker, what is being typed) */
+.canvas-view__settings--hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.canvas-view__settings {
+  transition: opacity 0.12s ease;
+}