@1agh/maude 0.40.0 → 0.41.0

package/apps/studio/client/comments-overlay.css

@@ -4,9 +4,14 @@
  * world plane scales the entire layer (pins + composer + thread popover)
  * uniformly with the artboards.
  *
- * DS-token only. No raw hex literals, no glow shadows, no rounded > 4px, no
- * gradients. The design-system-guard subagent enforces this on PR — keep edits
- * inside the token vocabulary.
+ * Maude-chrome tokens ONLY (`--maude-chrome-*` / `--maude-hud-*`, defined by
+ * canvas-shell.tsx's HUD_TOKENS_CSS) — never the project DS's own `--bg-*` /
+ * `--fg-*` / `--accent*` names. This overlay is studio chrome, not canvas
+ * content: it must look identical across every project regardless of which
+ * design system is loaded, the same discipline already applied to the
+ * toolbar/halos/context-menu/export-dialog. Reusing the DS's own token names
+ * here was the bug — the composer/pins/thread re-skinned themselves to match
+ * whatever palette the open canvas happened to declare.
  */
 
 .cm-layer {
@@ -28,41 +33,41 @@
   height: 24px;
   padding: 0;
   margin: 0;
-  background: var(--accent, #6f63ef);
-  color: var(--accent-fg, #faf6ef);
-  border: 1.5px solid var(--bg-0, #14131a);
-  border-radius: var(--radius-sm, 5px) var(--radius-sm, 5px) var(--radius-sm, 5px) 2px;
-  box-shadow: var(--shadow-md, 0 4px 14px rgba(0,0,0,0.3));
-  font: 600 var(--type-xs, 11px) / 1 var(--font-mono, ui-monospace, monospace);
-  letter-spacing: var(--tracking-wide, 0.04em);
+  background: var(--maude-hud-accent, #6f63ef);
+  color: var(--maude-hud-accent-fg, #faf6ef);
+  border: 1.5px solid var(--maude-chrome-bg-0, #14131a);
+  border-radius: 5px 5px 5px 2px;
+  box-shadow: 0 4px 14px var(--maude-chrome-shadow, rgba(0,0,0,0.3));
+  font: 600 11px / 1 var(--maude-chrome-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  letter-spacing: 0.04em;
   display: grid;
   place-items: center;
   cursor: pointer;
   pointer-events: auto;
   user-select: none;
-  transition: background var(--dur-flip, 120ms) var(--ease-out, ease-out);
+  transition: background 120ms ease-out;
   will-change: transform;
 }
 
 .cm-pin:hover,
 .cm-pin[aria-expanded='true'] {
-  background: var(--accent-hover, color-mix(in oklab, var(--accent, #d63b1f) 90%, white));
+  background: var(--maude-hud-accent-hover, color-mix(in oklab, var(--maude-hud-accent, #d63b1f) 90%, white));
 }
 
 .cm-pin:focus-visible {
   outline: none;
-  box-shadow: var(--shadow-focus, 0 0 0 2px var(--accent, #d63b1f));
+  box-shadow: 0 0 0 2px var(--maude-hud-accent, #d63b1f);
 }
 
 .cm-pin[data-resolved='true'] {
-  background: var(--bg-3, #1c1916);
-  color: var(--fg-2, #6e6660);
+  background: var(--maude-chrome-bg-2, #1c1916);
+  color: var(--maude-chrome-fg-1, #6e6660);
   opacity: 0.6;
 }
 
 .cm-pin[data-focused='true'] {
   /* Subtle ring — DS hard-edges discipline: no glow, just a hairline outline. */
-  outline: 1px solid var(--fg-0, #2a2520);
+  outline: 1px solid var(--maude-chrome-fg-0, #2a2520);
   outline-offset: 1px;
 }
 
@@ -70,34 +75,34 @@
 .cm-composer {
   position: absolute;
   width: 300px;
-  background: var(--bg-1, #faf6ef);
-  border: 1px solid var(--border-default, #3a352f);
-  border-radius: var(--radius-sm, 2px);
-  padding: var(--space-4, 12px);
-  box-shadow: var(--shadow-md, 0 4px 14px rgba(0,0,0,0.22));
-  font: var(--type-sm, 13px) / var(--lh-base, 1.5) var(--font-body, system-ui, sans-serif);
-  color: var(--fg-0, #2a2520);
+  background: var(--maude-chrome-bg-1, #faf6ef);
+  border: 1px solid var(--maude-chrome-border, #3a352f);
+  border-radius: 2px;
+  padding: 12px;
+  box-shadow: 0 4px 14px var(--maude-chrome-shadow, rgba(0,0,0,0.22));
+  font: 13px / 1.5 system-ui, sans-serif;
+  color: var(--maude-chrome-fg-0, #2a2520);
   pointer-events: auto;
   z-index: 4;
 }
 
 .cm-composer__head {
-  font-size: var(--type-xs, 11px);
-  color: var(--fg-2, #6e6660);
-  letter-spacing: var(--tracking-eyebrow, 0.08em);
+  font-size: 11px;
+  color: var(--maude-chrome-fg-1, #6e6660);
+  letter-spacing: 0.08em;
   text-transform: uppercase;
-  margin: 0 0 var(--space-2, 4px) 0;
+  margin: 0 0 4px 0;
   display: flex;
   align-items: center;
-  gap: var(--space-2, 4px);
+  gap: 4px;
 }
 
 .cm-composer__selector {
-  color: var(--fg-1, #4a4540);
-  background: var(--mono-cell-bg, color-mix(in oklab, var(--bg-1, #faf6ef) 80%, var(--accent, #d63b1f) 6%));
-  padding: 0 var(--space-2, 4px);
-  border: 1px solid var(--mono-rule, var(--border-subtle, #c8bfb4));
-  font-size: var(--type-xs, 11px);
+  color: var(--maude-chrome-fg-0, #4a4540);
+  background: color-mix(in oklab, var(--maude-chrome-bg-1, #faf6ef) 80%, var(--maude-hud-accent, #d63b1f) 6%);
+  padding: 0 4px;
+  border: 1px solid var(--maude-chrome-border, #c8bfb4);
+  font-size: 11px;
   letter-spacing: 0;
   text-transform: none;
 }
@@ -106,53 +111,53 @@
   width: 100%;
   min-height: 72px;
   resize: vertical;
-  background: var(--bg-0, #ffffff);
-  color: var(--fg-0, #2a2520);
-  border: 1px solid var(--border-default, #3a352f);
-  border-radius: var(--radius-sm, 5px);
-  padding: var(--space-3, 8px);
+  background: var(--maude-chrome-bg-0, #ffffff);
+  color: var(--maude-chrome-fg-0, #2a2520);
+  border: 1px solid var(--maude-chrome-border, #3a352f);
+  border-radius: 5px;
+  padding: 8px;
   font: inherit;
   box-sizing: border-box;
 }
 
 .cm-composer__textarea:focus-visible {
   outline: none;
-  border-color: var(--accent, #d63b1f);
-  box-shadow: var(--shadow-focus, 0 0 0 2px var(--accent, #d63b1f));
+  border-color: var(--maude-hud-accent, #d63b1f);
+  box-shadow: 0 0 0 2px var(--maude-hud-accent, #d63b1f);
 }
 
 .cm-composer__actions {
   display: flex;
-  gap: var(--space-2, 4px);
+  gap: 4px;
   justify-content: flex-end;
-  margin-top: var(--space-3, 8px);
+  margin-top: 8px;
 }
 
 .cm-btn {
-  font: 500 var(--type-xs, 11px) / 1.4 var(--font-mono, ui-monospace, monospace);
-  letter-spacing: var(--tracking-eyebrow, 0.08em);
+  font: 500 11px / 1.4 var(--maude-chrome-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  letter-spacing: 0.08em;
   text-transform: uppercase;
-  padding: var(--space-2, 4px) var(--space-3, 8px);
-  border: 1px solid var(--border-default, #3a352f);
-  border-radius: var(--radius-sm, 5px);
+  padding: 4px 8px;
+  border: 1px solid var(--maude-chrome-border, #3a352f);
+  border-radius: 5px;
   cursor: pointer;
   background: transparent;
-  color: var(--fg-0, #2a2520);
-  transition: background var(--dur-flip, 120ms) var(--ease-out, ease-out);
+  color: var(--maude-chrome-fg-0, #2a2520);
+  transition: background 120ms ease-out;
 }
 
 .cm-btn:hover {
-  background: var(--bg-2, color-mix(in oklab, var(--bg-1, #faf6ef) 80%, var(--fg-0, #2a2520) 6%));
+  background: var(--maude-chrome-bg-2, color-mix(in oklab, var(--maude-chrome-bg-1, #faf6ef) 80%, var(--maude-chrome-fg-0, #2a2520) 6%));
 }
 
 .cm-btn--primary {
-  background: var(--accent, #d63b1f);
-  color: var(--accent-fg, #faf6ef);
-  border-color: var(--accent, #d63b1f);
+  background: var(--maude-hud-accent, #d63b1f);
+  color: var(--maude-hud-accent-fg, #faf6ef);
+  border-color: var(--maude-hud-accent, #d63b1f);
 }
 
 .cm-btn--primary:hover {
-  background: var(--accent-hover, color-mix(in oklab, var(--accent, #d63b1f) 90%, white));
+  background: var(--maude-hud-accent-hover, color-mix(in oklab, var(--maude-hud-accent, #d63b1f) 90%, white));
 }
 
 .cm-btn:disabled {
@@ -162,7 +167,7 @@
 
 .cm-btn:focus-visible {
   outline: none;
-  box-shadow: var(--shadow-focus, 0 0 0 2px var(--accent, #d63b1f));
+  box-shadow: 0 0 0 2px var(--maude-hud-accent, #d63b1f);
 }
 
 /* ─── Thread popover ──────────────────────────────────────────────────────── */
@@ -171,13 +176,13 @@
   width: 340px;
   max-height: 60vh;
   overflow: auto;
-  background: var(--bg-2, color-mix(in oklab, var(--bg-1, #faf6ef) 80%, var(--fg-0, #2a2520) 6%));
-  border: 1px solid var(--border-default, #3a352f);
-  border-radius: var(--radius-sm, 2px);
-  padding: var(--space-4, 12px);
-  box-shadow: var(--shadow-md, 0 4px 14px rgba(0,0,0,0.22));
-  font: var(--type-sm, 13px) / var(--lh-base, 1.5) var(--font-body, system-ui, sans-serif);
-  color: var(--fg-0, #2a2520);
+  background: var(--maude-chrome-bg-2, color-mix(in oklab, var(--maude-chrome-bg-1, #faf6ef) 80%, var(--maude-chrome-fg-0, #2a2520) 6%));
+  border: 1px solid var(--maude-chrome-border, #3a352f);
+  border-radius: 2px;
+  padding: 12px;
+  box-shadow: 0 4px 14px var(--maude-chrome-shadow, rgba(0,0,0,0.22));
+  font: 13px / 1.5 system-ui, sans-serif;
+  color: var(--maude-chrome-fg-0, #2a2520);
   pointer-events: auto;
   z-index: 5;
 }
@@ -185,16 +190,16 @@
 .cm-thread__head {
   display: flex;
   flex-direction: column;
-  gap: var(--space-2, 4px);
-  padding-bottom: var(--space-3, 8px);
-  border-bottom: 1px solid var(--border-default, #3a352f);
+  gap: 4px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--maude-chrome-border, #3a352f);
 }
 
 .cm-thread__head-row {
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  gap: var(--space-2, 4px);
+  gap: 4px;
 }
 
 /* Plan C P18 — pin/sequence badge in the thread popover header. */
@@ -205,51 +210,50 @@
   width: 18px;
   height: 18px;
   border-radius: 4px;
-  background: var(--accent, #d63b1f);
-  color: var(--accent-fg, #fff);
-  font: 600 var(--type-xs, 11px) / 1 var(--font-mono, ui-monospace, monospace);
+  background: var(--maude-hud-accent, #d63b1f);
+  color: var(--maude-hud-accent-fg, #fff);
+  font: 600 11px / 1 var(--maude-chrome-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
 }
 
 .cm-thread__close {
   background: transparent;
-  color: var(--fg-2, #6e6660);
-  border: 1px solid var(--border-default, #3a352f);
-  border-radius: var(--radius-sm, 5px);
-  padding: 0 var(--space-2, 4px);
-  font: 600 var(--type-xs, 11px) / 1.2 var(--font-mono, ui-monospace, monospace);
+  color: var(--maude-chrome-fg-1, #6e6660);
+  border: 1px solid var(--maude-chrome-border, #3a352f);
+  padding: 0 4px;
+  font: 600 11px / 1.2 var(--maude-chrome-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   cursor: pointer;
   align-self: flex-start;
   margin-left: auto;
-  transition: background var(--dur-flip, 120ms) var(--ease-out, ease-out);
+  transition: background 120ms ease-out;
 }
 
 .cm-thread__close:hover {
-  background: var(--bg-3, #1c1916);
-  color: var(--fg-0, #2a2520);
+  background: color-mix(in oklab, var(--maude-chrome-fg-0, #1c1917) 8%, transparent);
+  color: var(--maude-chrome-fg-0, #2a2520);
 }
 
 .cm-thread__close:focus-visible {
   outline: none;
-  box-shadow: var(--shadow-focus, 0 0 0 2px var(--accent, #d63b1f));
+  box-shadow: 0 0 0 2px var(--maude-hud-accent, #d63b1f);
 }
 
 .cm-thread__author {
-  color: var(--fg-0, #2a2520);
+  color: var(--maude-chrome-fg-0, #2a2520);
   font-weight: 600;
 }
 
 .cm-thread__time {
-  color: var(--fg-2, #6e6660);
-  font-size: var(--type-xs, 11px);
+  color: var(--maude-chrome-fg-1, #6e6660);
+  font-size: 11px;
 }
 
 .cm-thread__selector {
   display: inline-block;
-  color: var(--fg-2, #6e6660);
-  font-size: var(--type-xs, 11px);
-  border: 1px solid var(--mono-rule, var(--border-subtle, #c8bfb4));
-  padding: 0 var(--space-2, 4px);
-  background: var(--mono-cell-bg, color-mix(in oklab, var(--bg-1, #faf6ef) 80%, var(--accent, #d63b1f) 6%));
+  color: var(--maude-chrome-fg-1, #6e6660);
+  font-size: 11px;
+  border: 1px solid var(--maude-chrome-border, #c8bfb4);
+  padding: 0 4px;
+  background: color-mix(in oklab, var(--maude-chrome-bg-1, #faf6ef) 80%, var(--maude-hud-accent, #d63b1f) 6%);
   align-self: flex-start;
   max-width: 100%;
   overflow: hidden;
@@ -258,7 +262,7 @@
 }
 
 .cm-thread__body {
-  padding: var(--space-3, 8px) 0;
+  padding: 8px 0;
   white-space: pre-wrap;
   word-break: break-word;
 }
@@ -266,30 +270,30 @@
 .cm-thread__body strong,
 .cm-thread__reply-body strong {
   /* @mention tokens — bold, accent color. Inserted by `renderBodyWithMentions`. */
-  color: var(--accent, #d63b1f);
+  color: var(--maude-hud-accent, #d63b1f);
   font-weight: 600;
 }
 
 .cm-thread__reply {
-  padding: var(--space-3, 8px) 0;
-  border-top: 1px solid var(--border-subtle, #c8bfb4);
+  padding: 8px 0;
+  border-top: 1px solid var(--maude-chrome-border, #c8bfb4);
 }
 
 .cm-thread__reply-head {
   display: flex;
   align-items: baseline;
-  gap: var(--space-2, 4px);
-  margin-bottom: var(--space-2, 4px);
+  gap: 4px;
+  margin-bottom: 4px;
 }
 
 .cm-thread__reply-author {
-  color: var(--fg-1, #4a4540);
+  color: var(--maude-chrome-fg-0, #4a4540);
   font-weight: 600;
 }
 
 .cm-thread__reply-time {
-  color: var(--fg-3, var(--fg-2, #6e6660));
-  font-size: var(--type-xs, 11px);
+  color: var(--maude-chrome-fg-1, #6e6660);
+  font-size: 11px;
 }
 
 .cm-thread__reply-body {
@@ -298,68 +302,68 @@
 }
 
 .cm-thread__reply-form {
-  padding-top: var(--space-3, 8px);
-  border-top: 1px solid var(--border-default, #3a352f);
+  padding-top: 8px;
+  border-top: 1px solid var(--maude-chrome-border, #3a352f);
   display: flex;
   flex-direction: column;
-  gap: var(--space-2, 4px);
+  gap: 4px;
 }
 
 .cm-thread__reply-textarea {
   width: 100%;
   min-height: 56px;
   resize: vertical;
-  background: var(--bg-0, #ffffff);
-  color: var(--fg-0, #2a2520);
-  border: 1px solid var(--border-default, #3a352f);
-  border-radius: var(--radius-sm, 5px);
-  padding: var(--space-3, 8px);
+  background: var(--maude-chrome-bg-0, #ffffff);
+  color: var(--maude-chrome-fg-0, #2a2520);
+  border: 1px solid var(--maude-chrome-border, #3a352f);
+  border-radius: 5px;
+  padding: 8px;
   font: inherit;
   box-sizing: border-box;
 }
 
 .cm-thread__reply-textarea:focus-visible {
   outline: none;
-  border-color: var(--accent, #d63b1f);
-  box-shadow: var(--shadow-focus, 0 0 0 2px var(--accent, #d63b1f));
+  border-color: var(--maude-hud-accent, #d63b1f);
+  box-shadow: 0 0 0 2px var(--maude-hud-accent, #d63b1f);
 }
 
 .cm-thread__reply-actions {
   display: flex;
   justify-content: flex-end;
-  gap: var(--space-2, 4px);
+  gap: 4px;
 }
 
 .cm-thread__actions {
   display: flex;
-  gap: var(--space-2, 4px);
-  padding-top: var(--space-3, 8px);
-  margin-top: var(--space-3, 8px);
-  border-top: 1px solid var(--border-default, #3a352f);
+  gap: 4px;
+  padding-top: 8px;
+  margin-top: 8px;
+  border-top: 1px solid var(--maude-chrome-border, #3a352f);
 }
 
 .cm-thread__actions .cm-btn--danger {
   margin-left: auto;
-  color: var(--status-error, #c0392b);
-  border-color: var(--status-error, #c0392b);
+  color: #c0392b;
+  border-color: #c0392b;
 }
 
 .cm-thread__actions .cm-btn--danger:hover {
-  background: color-mix(in oklab, var(--status-error, #c0392b) 12%, transparent);
+  background: color-mix(in oklab, #c0392b 12%, transparent);
 }
 
 /* ─── @mention autocomplete ──────────────────────────────────────────────── */
 .cm-mention-popup {
   position: absolute;
-  background: var(--bg-2, color-mix(in oklab, var(--bg-1, #faf6ef) 80%, var(--fg-0, #2a2520) 6%));
-  border: 1px solid var(--border-default, #3a352f);
-  border-radius: var(--radius-sm, 5px);
-  font: var(--type-xs, 11px) / var(--lh-xs, 1.3) var(--font-mono, ui-monospace, monospace);
-  color: var(--fg-0, #2a2520);
+  background: var(--maude-chrome-bg-2, color-mix(in oklab, var(--maude-chrome-bg-1, #faf6ef) 80%, var(--maude-chrome-fg-0, #2a2520) 6%));
+  border: 1px solid var(--maude-chrome-border, #3a352f);
+  border-radius: 5px;
+  font: 11px / 1.3 var(--maude-chrome-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  color: var(--maude-chrome-fg-0, #2a2520);
   max-height: 180px;
   min-width: 160px;
   overflow: auto;
-  box-shadow: var(--shadow-md, 0 4px 14px rgba(0,0,0,0.22));
+  box-shadow: 0 4px 14px var(--maude-chrome-shadow, rgba(0,0,0,0.22));
   pointer-events: auto;
   z-index: 6;
   list-style: none;
@@ -368,16 +372,16 @@
 }
 
 .cm-mention-popup__item {
-  padding: var(--space-2, 4px) var(--space-3, 8px);
+  padding: 4px 8px;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
-  gap: var(--space-3, 8px);
+  gap: 8px;
 }
 
 .cm-mention-popup__item[aria-selected='true'] {
-  background: var(--accent, #d63b1f);
-  color: var(--accent-fg, #faf6ef);
+  background: var(--maude-hud-accent, #d63b1f);
+  color: var(--maude-hud-accent-fg, #faf6ef);
 }
 
 .cm-mention-popup__name {
@@ -385,11 +389,11 @@
 }
 
 .cm-mention-popup__email {
-  color: var(--fg-2, #6e6660);
-  font-size: var(--type-xs, 11px);
+  color: var(--maude-chrome-fg-1, #6e6660);
+  font-size: 11px;
 }
 
 .cm-mention-popup__item[aria-selected='true'] .cm-mention-popup__email {
-  color: var(--accent-fg, #faf6ef);
+  color: var(--maude-hud-accent-fg, #faf6ef);
   opacity: 0.85;
 }

package/apps/studio/client/github.js

@@ -95,6 +95,14 @@ export const openLocalProject = (path) => invoke('open_local_project', { path })
  */
 export const saveExport = (filename, bytes) => invoke('save_export', { filename, bytes });
 
+/**
+ * Native "open file" for media upload — the read counterpart to saveExport.
+ * WKWebView won't present the file panel for an HTML <input type=file>, so the
+ * AssetPicker uses this in the desktop app. Returns { name, bytes:[...] } or null
+ * (cancelled). Browser build uses the <input type=file> path instead.
+ */
+export const pickMediaFile = () => invoke('pick_media_file');
+
 // ── Tauri shell: auto-update (Phase 32 / Task 1) ────────────────────────────────
 // The shell downloads + stages a newer build in the background and emits
 // `update-ready` with { version, notes }. The client shows a banner; clicking

package/apps/studio/client/styles/3-shell-maude.css

@@ -353,6 +353,13 @@
 .st-rp-tab .st-rp-tabct { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); }
 .st-rp-body { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
 .st-rp-hd { font-family: var(--font-mono); font-size: var(--type-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-2); }
+/* Stage H (INV-3) edit-scope strip — local (this element) vs shared (edits N places). */
+.st-scope { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--type-xs); border-bottom: 1px solid var(--border-subtle); flex: none; animation: st-pop var(--dur-soft) var(--ease-out); }
+.st-scope-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
+.st-scope--local { color: var(--fg-2); }
+.st-scope--local .st-scope-dot { background: var(--fg-3); }
+.st-scope--shared { color: var(--accent); }
+.st-scope--shared .st-scope-dot { background: var(--accent); }
 .st-rp-empty { color: var(--fg-2); font-size: var(--type-sm); line-height: 1.6; display: flex; flex-direction: column; gap: var(--space-4); }
 
 /* comment pin (inline badge in the panel) */
@@ -476,6 +483,24 @@
 .st-export-recent-row:hover { background: var(--bg-2); }
 .st-export-recent-row .st-mono { color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50%; }
 
+/* ─── AssetPicker (feature-element-editing-robustness Stage F1) ───────────── */
+.st-btn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; min-height: 28px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-2); color: var(--fg-1); font-family: var(--font-mono); font-size: var(--type-xs); padding: 0 12px; transition: background var(--dur-soft) var(--ease-out), border-color var(--dur-soft) var(--ease-out); }
+.st-btn:hover { background: var(--bg-3); border-color: var(--border-strong, var(--border-default)); }
+.st-btn:disabled { opacity: 0.55; cursor: default; }
+.st-asset-picker { width: 620px; }
+.st-ap-toolbar { display: flex; align-items: center; gap: var(--space-3); }
+.st-ap-err { color: var(--danger, #e5484d); font-family: var(--font-mono); font-size: var(--type-xs); }
+.st-ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--space-3); max-height: 52vh; overflow-y: auto; padding: 2px; }
+.st-ap-empty { grid-column: 1 / -1; color: var(--fg-2); font-family: var(--font-mono); font-size: var(--type-xs); padding: var(--space-6) 0; text-align: center; }
+.st-ap-cell { appearance: none; cursor: pointer; display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-2); text-align: left; transition: border-color var(--dur-soft) var(--ease-out), background var(--dur-soft) var(--ease-out); }
+.st-ap-cell:hover { border-color: var(--accent, var(--border-strong, var(--border-default))); background: var(--bg-3); }
+.st-ap-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-xs); background: var(--bg-4, var(--bg-3)); display: block; }
+.st-ap-name { font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.st-cp-replace { width: 100%; justify-content: center; }
+/* Media "Replace…" — a full-width button, NOT inside the 3-col .st-cp-row grid
+   (which would drop it into the 10px provenance-dot column and clip it). */
+.st-cp-mediabtn { padding: var(--space-1) 0 var(--space-2); }
+
 /* ─── Inspector panel fields / layers / css (Plan C P11–P13) ───────────────
  * Lifted from Studio.css; complements the already-present `.st-insp-row`,
  * `.st-insp-label`, `.st-rp-*`. */
@@ -716,6 +741,15 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 .st-cp-boxv--mb, .st-cp-boxv--pb { bottom: 1px; left: 50%; transform: translateX(-50%); }
 .st-cp-boxv--ml, .st-cp-boxv--pl { left: 0; top: 50%; transform: translateY(-50%); }
 .st-cp-boxv--mr, .st-cp-boxv--pr { right: 0; top: 50%; transform: translateY(-50%); }
+/* feature-element-editing-robustness Stage B — Position inset widget. One ring
+   (no nested padding box): the 4 inset inputs sit on the outer box edges around
+   a centered core showing the current `position` keyword (Figma constraints box). */
+.st-cp-boxv--it { top: 1px; left: 50%; transform: translateX(-50%); }
+.st-cp-boxv--ib { bottom: 1px; left: 50%; transform: translateX(-50%); }
+.st-cp-boxv--il { left: 0; top: 50%; transform: translateY(-50%); }
+.st-cp-boxv--ir { right: 0; top: 50%; transform: translateY(-50%); }
+.st-cp-boxtag--i { color: var(--accent); }
+.st-cp-boxcore--pos { text-transform: none; letter-spacing: 0; }
 .st-cp-boxhint { display: flex; flex-wrap: wrap; gap: var(--space-1); }
 .st-cp-boxhint + .st-cp-row { margin-top: var(--space-1); }
 .st-cp-chip { font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); background: var(--bg-2); border: 1px solid var(--border-default); border-radius: var(--radius-xs); padding: 1px 6px; }
@@ -762,6 +796,20 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 .st-cp-add:hover { border-color: var(--accent); color: var(--fg-0); }
 .st-cp-note { font-size: 10px; color: var(--fg-2); font-style: italic; }
 
+/* Stage M — Fixed / Hug / Fill sizing-mode segmented control (per axis). */
+.st-cp-modes { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-1); }
+.st-cp-modeseg { display: flex; align-items: stretch; gap: var(--space-1); }
+.st-cp-modeax { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); }
+.st-cp-modebtn { flex: 1; appearance: none; cursor: pointer; border: 1px solid var(--border-default); background: var(--bg-3); color: var(--fg-1); font-family: var(--font-mono); font-size: 10px; min-height: 22px; border-radius: var(--radius-xs); padding: 0 var(--space-1); }
+.st-cp-modebtn:hover:not(.is-active):not(:disabled) { background: var(--bg-4); color: var(--fg-0); }
+.st-cp-modebtn.is-active { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); }
+.st-cp-modebtn:disabled { opacity: 0.5; cursor: default; }
+/* Stage M — sub-header for the flex-child row group + the make-flex CTA. */
+.st-cp-subhd { font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.04em; margin-top: var(--space-2); }
+.st-cp-makeflex { align-self: flex-start; appearance: none; cursor: pointer; border: 1px dashed var(--border-default); background: transparent; color: var(--fg-1); font-family: var(--font-mono); font-size: var(--type-xs); border-radius: var(--radius-xs); padding: 4px var(--space-2); }
+.st-cp-makeflex:hover:not(:disabled) { border-color: var(--accent); color: var(--fg-0); }
+.st-cp-makeflex:disabled { opacity: 0.5; cursor: default; }
+
 /* provenance legend */
 .st-cp-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-1); border-top: 1px solid var(--border-subtle); }
 .st-cp-legend span { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); }