caracms 0.0.0-stage → 0.2.0

package/src/editor/styles/levels/media.css

@@ -0,0 +1,175 @@
+/* M5b: the media field, the library, the focal point and the library's stage (notes/mockups/m2-editor.html,
+   lifted from its M5b CSS). The mockup draws a picture as .ph/.ph-in; here a .ph holds one <img class="ph-img">
+   with object-fit:cover and object-position (the focal point), which is what .ph-in stands in for. */
+/* ── Media (M5b) ──
+   A picture is .ph (the box, which covers) holding .ph-in (the original at its own ratio --r, placed by the focal point
+   --fx/--fy). It's the mockup's stand-in for one <img> with object-fit:cover and object-position: every crop keeps the
+   point in view, and with no point it keeps the centre. .ph.contain shows the whole picture (a logo). */
+.ph{position:relative;overflow:hidden;container-type:size;background:var(--surface-sunken)}
+.ph-in{position:absolute;--W:max(100cqw,calc(100cqh * var(--r,1.5)));--H:max(100cqh,calc(100cqw / var(--r,1.5)));width:var(--W);height:var(--H);left:calc((100cqw - var(--W)) * var(--fx,.5));top:calc((100cqh - var(--H)) * var(--fy,.5));--tp:0}
+.ph.contain .ph-in{--W:min(100cqw,calc(100cqh * var(--r,1)));--H:min(100cqh,calc(100cqw / var(--r,1)))}
+.ph-in.svg{display:grid;place-items:center;padding:16%;background:var(--surface-sunken)}
+.ph-in.svg svg{display:block;width:100%;height:100%}
+.ph.pending{display:grid;place-items:center;color:var(--icon);font:var(--weight-semibold) var(--text-2xs)/1 var(--font-mono);letter-spacing:var(--tracking-caps)}
+.ph.pending .i{width:20px;height:20px;stroke-width:1.3}
+/* The focal point on a thumbnail: the overlay's two-tone ring, so it reads on any picture */
+.fp-dot{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border:2px solid var(--ov);border-radius:50%;box-shadow:0 0 0 1px var(--ov-halo),inset 0 0 0 1px var(--ov-halo)}
+/* The media field: what's in the slot (a card), its actions, then what it needs (focal point, alt text, a clip's settings) */
+.media{border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface);overflow:hidden}
+.media-main{display:flex;align-items:center;gap:var(--space-2-5);padding:var(--space-1-5)}
+.thumb{position:relative;display:block;width:var(--thumb-w);height:var(--thumb-h);flex:none;padding:0;border:0;border-radius:var(--radius-sm);overflow:hidden}
+.thumb.wide{width:calc(var(--thumb-h) * 16 / 9)}
+.thumb.square{width:var(--thumb-h)}
+button.thumb{transition:box-shadow var(--dur-fast)}
+button.thumb:hover:not(:disabled){box-shadow:0 0 0 2px var(--border-hover)}
+button.thumb:disabled{cursor:default}
+.thumb .dur,.pbadge{position:absolute;right:3px;bottom:3px;z-index:1;display:inline-flex;align-items:center;gap:3px;height:16px;padding:0 4px;border-radius:var(--radius-xs);background:color-mix(in srgb,var(--tooltip-bg) 74%,transparent);color:var(--on-fill);font:var(--weight-medium) var(--text-2xs)/1 var(--font-mono)}
+.media-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;line-height:1.35}
+.media-txt b{display:block;font-weight:var(--weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.media-txt small{display:flex;align-items:center;gap:var(--space-1);min-width:0;color:var(--text-muted);font-size:var(--text-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.media-txt small .i{flex:none;color:var(--icon)}
+.media-txt small.fp-on{color:var(--select-strong)}
+.media-txt small.fp-on .i{color:var(--select)}
+.media-acts{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-1-5);border-top:1px solid var(--border);background:var(--surface-sunken)}
+.media-acts .btn.sm{padding:0 var(--space-2)}
+.media-acts .end{margin-left:auto}
+.media-acts .btn[aria-expanded="true"]{background:var(--surface-pressed);border-color:var(--border-hover)}
+.media-prog{padding:0 var(--space-2) var(--space-2)}
+.media-prog p{margin-top:var(--space-1-5);font-size:var(--text-xs);color:var(--text-muted)}
+/* Upload progress is real progress (a percentage), never a skeleton; Mux's processing has no percentage, so it runs */
+.mbar{position:relative;height:4px;border-radius:2px;overflow:hidden;background:var(--surface-pressed)}
+.mbar>i{position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);border-radius:2px;background:var(--select);transition:width var(--dur-base) var(--ease-out)}
+.mbar.busy>i{width:35%;animation:prog calc(var(--dur-pulse) * 2.4) var(--ease-in-out) infinite}
+@media (prefers-reduced-motion:reduce){.mbar.busy>i{animation:none;width:100%;opacity:.45}}
+/* An empty slot: a drop target, and Choose… for the library */
+.mdrop{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-4) var(--space-3) var(--space-3);border:1px dashed var(--border-strong);border-radius:var(--radius-md);background:var(--surface);text-align:center;font-size:var(--text-sm);color:var(--text-muted);transition:border-color var(--dur-fast),background var(--dur-fast),box-shadow var(--dur-fast)}
+.mdrop>.i{width:22px;height:22px;margin-bottom:var(--space-0-5);stroke-width:1.3;color:var(--icon)}
+.mdrop b{color:var(--text);font-size:var(--text-base);font-weight:var(--weight-semibold)}
+.mdrop .or{display:inline-flex;align-items:center;gap:var(--space-1-5);margin-top:var(--space-1)}
+.mdrop .fine{margin-top:var(--space-1);font-size:var(--text-xs);color:var(--text-subtle)}
+.mdrop .when-over{display:none}
+.mdrop.is-over{border-style:solid;border-color:var(--select);background:var(--select-wash);color:var(--select-strong);box-shadow:0 0 0 3px var(--select-halo)}
+.mdrop.is-over>.i,.mdrop.is-over b{color:var(--select-strong)}
+.mdrop.is-over .when-idle{display:none}
+.mdrop.is-over .when-over{display:inline}
+.mdrop.sm{flex-direction:row;align-items:center;gap:var(--space-2);padding:var(--space-1-5) var(--space-1-5) var(--space-1-5) var(--space-2-5);text-align:left}
+.mdrop.sm>.i{width:16px;height:16px;margin:0;stroke-width:1.5}
+.mdrop.sm .t{flex:1;min-width:0}
+/* Alt text: asked for right after placing (the tool's blue), warned in amber when skipped. Neither blocks anything. */
+.media-field .alt[aria-invalid="true"]{border-color:var(--status-warning-dot);box-shadow:0 0 0 3px var(--status-warning-wash)}
+.media-field .alt[aria-invalid="true"]:focus{border-color:var(--select);box-shadow:0 0 0 3px var(--select-halo)}
+/* Decorative (M5b, Decision 3): beside the alt text. Ticked, the alt input empties and turns off, and nothing warns */
+.alt-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin:var(--space-2) 0 var(--space-1)}
+.alt-head .sub-label{margin:0}
+.deco{display:inline-flex;align-items:center;gap:var(--space-1-5);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--text-muted);cursor:pointer;white-space:nowrap}
+.deco input{width:14px;height:14px;margin:0;accent-color:var(--select);cursor:inherit}
+.deco:has(input:checked){color:var(--text)}
+.deco:has(input:disabled){cursor:not-allowed;opacity:.6}
+.field-ask{display:flex;align-items:flex-start;gap:var(--space-1-5);margin-top:var(--space-1-5);font-size:var(--text-sm);color:var(--select-strong);font-weight:var(--weight-medium)}
+.field-ask .i{flex:none;margin-top:2px}
+.field-ask .linkbtn{margin-left:var(--space-1);font-weight:var(--weight-medium);white-space:nowrap}
+/* The focal point, set on the image's own preview: a click or a drag puts it, the arrow keys move it 5% */
+.fp{margin-top:var(--space-2)}
+.fp-stage{display:grid;place-items:center;padding:var(--space-2);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-sunken)}
+.fp-img{position:relative;width:min(100%,calc(var(--focal-max-h) * var(--r,1.5)));aspect-ratio:var(--r,1.5);border-radius:var(--radius-xs);cursor:crosshair;touch-action:none;user-select:none}
+.fp-img:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
+.fp-img[aria-disabled="true"]{cursor:default}
+.fp-ring{position:absolute;width:var(--focal-ring);height:var(--focal-ring);margin:calc(var(--focal-ring) / -2) 0 0 calc(var(--focal-ring) / -2);border:2px solid var(--ov);border-radius:50%;box-shadow:0 0 0 1.5px var(--ov-halo),inset 0 0 0 1.5px var(--ov-halo);pointer-events:none;transition:left var(--dur-fast) var(--ease-out),top var(--dur-fast) var(--ease-out)}
+.fp-ring::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:var(--ov);box-shadow:0 0 0 1px var(--ov-halo)}
+.fp-ring.unset{border-style:dashed}
+.fp-img.is-dragging .fp-ring{transition:none}
+.fp-row{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-1-5);font-size:var(--text-xs);color:var(--text-muted);font-variant-numeric:tabular-nums}
+.fp-row .linkbtn{margin-left:auto}
+.fp-help{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);margin-top:var(--space-1);font-size:var(--text-xs);color:var(--text-subtle)}
+/* A clip's settings, and "Use this frame" for its poster */
+.media-field .mini-seg{margin:0 0 var(--space-1)}
+.fr{margin-top:var(--space-2)}
+.fr-vid{aspect-ratio:16/9;border-radius:var(--radius-md)}
+.fr-time{position:absolute;left:var(--space-2);bottom:var(--space-2);z-index:1;height:18px;padding:0 6px;display:inline-flex;align-items:center;border-radius:var(--radius-xs);background:color-mix(in srgb,var(--tooltip-bg) 74%,transparent);color:var(--on-fill);font:var(--weight-medium) var(--text-2xs)/1 var(--font-mono)}
+.fr-range{display:block;width:100%;margin:var(--space-2) 0 0;accent-color:var(--select)}
+.fr-row{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-1);font-size:var(--text-xs);color:var(--text-muted);font-variant-numeric:tabular-nums}
+.fr-row .btn{margin-left:auto}
+/* A gallery's images in M5a's list rows: a small 4:5 picture in each summary */
+.item-sum .mini{width:22px;height:28px;flex:none;border-radius:var(--radius-xs)}
+.media-acts{flex-wrap:wrap}
+/* The brand's logo and icon (Site Settings): image-only, no alt text, the whole picture shown */
+.media.compact .media-main{padding:var(--space-1)}
+.media.compact .thumb{width:40px;height:40px}
+/* The library: a grid of pictures, newest first; a level of its own (Media) or a picker from a field */
+.lib-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-3)}
+.lib-bar .mini-seg{flex:none;margin:0}
+.lib-bar .mini-seg button{flex:none;padding:0 var(--space-2-5)}
+.lib-bar .mini-seg .n{font-weight:var(--weight-regular);color:var(--text-subtle);font-variant-numeric:tabular-nums}
+.lib-bar .only{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-muted)}
+.switch.sm{height:26px;gap:var(--space-1-5);font-size:var(--text-sm);color:var(--text-muted)}
+.switch.sm .track{width:26px;height:16px;border-radius:8px}
+.switch.sm .track::after{width:12px;height:12px}
+.switch.sm[aria-checked="true"] .track::after{translate:10px 0}
+.lgrid{display:grid;grid-template-columns:repeat(var(--lib-cols),minmax(0,1fr));gap:var(--space-3) var(--space-2)}
+.lgrid.clips{--lib-cols:2}
+.mtile{position:relative;display:flex;flex-direction:column;gap:3px;min-width:0;padding:0;border:0;background:none;color:var(--text);text-align:left}
+.mtile .ph{aspect-ratio:1;border-radius:var(--radius-md)}
+.lgrid.clips .mtile .ph{aspect-ratio:16/9}
+.mtile .ph::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 10%,transparent);transition:box-shadow var(--dur-fast)}
+.mtile:hover:not(:disabled) .ph::after{box-shadow:inset 0 0 0 2px var(--border-hover)}
+.mtile.is-current .ph::after{box-shadow:inset 0 0 0 2px var(--select),inset 0 0 0 4px var(--surface)}
+.mtile:focus-visible{outline:none}
+/* Focus shows on a hovered tile too (the hover rule above is more specific than plain :focus-visible) */
+.mtile:is(:focus-visible,:focus-visible:hover) .ph::after{box-shadow:inset 0 0 0 2px var(--focus),inset 0 0 0 4px var(--surface)}
+.mtile:disabled{cursor:default}
+.mtile .nm{font-size:var(--text-xs);font-weight:var(--weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.mtile .mt{margin-top:-2px;font-size:var(--text-2xs);color:var(--text-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.mtile .mt.new{color:var(--status-live);font-weight:var(--weight-semibold)}
+.mtile .mt.danger{color:var(--status-danger);font-weight:var(--weight-semibold)}
+.mtile .pcheck{position:absolute;right:5px;top:5px;z-index:3;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--select);color:var(--on-fill);box-shadow:0 0 0 2px var(--surface)}
+.mtile .mbar{position:absolute;left:6px;right:6px;bottom:6px;z-index:1}
+.mtile .pbadge{right:4px;bottom:4px}
+.mtile .pbadge.busy{left:4px;right:auto;bottom:auto;top:4px}
+/* A clip that failed: across the grid, with a sentence a designer can act on */
+.mfail{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-2-5);align-items:start;padding:var(--space-1-5);border:1px solid var(--status-danger-border);border-radius:var(--radius-md);background:var(--status-danger-wash);font-size:var(--text-sm);color:var(--status-danger)}
+.mfail .ph{width:calc(var(--thumb-h) * 16 / 9);height:var(--thumb-h);border-radius:var(--radius-sm);background:var(--surface)}
+.mfail b{display:block;color:var(--status-danger-strong);font-weight:var(--weight-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.mfail p{margin-top:2px;font-size:var(--text-xs);line-height:1.45}
+/* Files the library refused, each with its sentence (a refused create: red, as M5a's address taken) */
+.refused{display:flex;flex-direction:column;gap:var(--space-1);margin-bottom:var(--space-3)}
+.refused .note{margin:0;padding:var(--space-2) var(--space-2) var(--space-2) var(--space-2-5)}
+.refused .note b{font:var(--weight-semibold) var(--text-sm)/1.35 var(--font-mono);overflow-wrap:anywhere}
+.refused .note .ib{width:24px;height:24px;margin:-2px -2px 0 0}
+.refused .note.has-x{grid-template-columns:16px minmax(0,1fr) auto}
+/* An image's own level: the picture, its facts, where it's used, the alt text already used for it */
+.mdetail{display:grid;place-items:center;padding:var(--space-2);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-sunken)}
+.mdetail .ph{width:min(100%,calc(var(--focal-max-h) * var(--r,1.5)));aspect-ratio:var(--r,1.5);border-radius:var(--radius-xs)}
+.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-1) var(--space-3);margin:var(--space-3) 0 var(--space-1);font-size:var(--text-sm)}
+.kv dt{color:var(--text-muted)}
+.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
+.kv dd .mono{font-size:var(--text-xs);color:var(--text-muted)}
+.uses .drow{min-height:34px}
+.uses .drow .meta{max-width:50%;overflow:hidden;text-overflow:ellipsis}
+.alt-used{padding:var(--space-2) var(--space-2-5);border-radius:var(--radius-md);background:var(--surface-sunken);font-size:var(--text-sm)}
+.alt-used q{display:block;color:var(--text);quotes:"“" "”"}
+.alt-used small{display:block;margin-top:var(--space-1);font-size:var(--text-xs);color:var(--text-subtle)}
+/* The real picture inside a .ph (the mockup's .ph-in): an <img> of the imgproxy thumbnail, covering, at its focal point */
+.ph>.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
+.ph.contain>.ph-img{object-fit:contain}
+.fp-img>.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;pointer-events:none}
+.fr-vid>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
+/* The library has no page of its own either (M5b): the stage holds the last page, dimmed, and is the big drop target */
+.stage-aside{container-type:size}
+.stage-drop{display:flex;flex-direction:column;align-items:center;gap:var(--space-1-5);width:min(420px,100%);padding:var(--space-8) var(--space-6);border:1.5px dashed var(--bar-border-hover);border-radius:var(--radius-xl);transition:border-color var(--dur-fast),background var(--dur-fast)}
+.stage-drop>.i{width:26px;height:26px;margin-bottom:var(--space-1);stroke-width:1.3;color:var(--bar-muted)}
+.stage-drop .fine{color:var(--bar-muted);font-size:var(--text-xs)}
+.stage-drop .acts{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2);margin-top:var(--space-3)}
+.stage-drop .acts .btn{margin-top:0}
+.stage-drop .acts .btn.ghost{background:none;border-color:var(--bar-border-strong);color:var(--bar-text)}
+.stage-drop.is-over{border-style:solid;border-color:var(--focus-on-dark);background:color-mix(in srgb,var(--focus-on-dark) 12%,transparent)}
+.stage-lb{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
+.stage-lb .ph{width:min(calc(100cqw - 4 * var(--space-10)),calc((100cqh - 200px) * var(--r,1.5)));aspect-ratio:var(--r,1.5);border-radius:var(--radius-md);box-shadow:var(--shadow-frame)}
+.stage-lb .cap{color:var(--bar-muted);font-size:var(--text-sm)}
+.stage-lb .cap b{color:var(--bar-text);font-weight:var(--weight-semibold)}
+/* A slot's wrapper (MediaField.tsx → MediaSlot): it carries the slot's path for picking and focusing, and no look of its own */
+.mslot{display:block}
+.mslot:focus{outline:none}
+/* The library level while a file is held over it: the same wash as a slot's drop target, as a full ring (never a side rail) */
+.side-body[data-drop-lib].is-over{background:var(--select-wash);box-shadow:inset 0 0 0 2px var(--select)}
+/* The empty library's Upload… sits a little below its sentence (the mockup's #library-empty) */
+[data-library-empty] > .btn{margin-top:var(--space-2)}

package/src/editor/styles/levels/switcher.css

@@ -0,0 +1,3 @@
+/* The ⌘K switcher (Phase 4), beyond ../editor.css: the keyboard highlight is a wash, not a rail. */
+#swlist .drow.is-active{background:var(--surface-pressed)}
+#swlist .drow.is-active.is-current{background:var(--select-wash)}

package/src/editor/styles/tokens.css

@@ -0,0 +1,114 @@
+/*
+ * The editor's design tokens, lifted as is from notes/mockups/m2-editor.html's
+ * :root (M2 → What's built: "lift it as is"). Semantic custom properties, light
+ * only (M2 Decision 7); components use these, never raw colours.
+ * The brand slots (--accent, --accent-ink, --accent-edge) are overridden per site
+ * on <html> by the admin route (ink and edge computed by contrast, brand.ts).
+ */
+/* ══════════════════════════════════════════════════════════════════════════
+   TOKENS — semantic custom properties M3 lifts as-is (Decision 1, 7).
+   Light only; a dark set would redefine these names, never the components.
+   ══════════════════════════════════════════════════════════════════════════ */
+:root{
+  /* Colour · neutral chrome */
+  --surface:#ffffff;              /* sidebar, popovers, cards, inputs */
+  --surface-sunken:#f5f5f2;       /* trail, strips, sign-in page */
+  --surface-tab:#ebebe7;          /* levels stacked in the drill-down trail */
+  --surface-tab-near:#f0f0ec;     /* the level just above the current one */
+  --surface-hover:#efefeb;
+  --surface-pressed:#e6e6e1;
+  --border:#e3e3de;
+  --border-strong:#cbcbc4;        /* inputs and buttons */
+  --border-hover:#b1b1a9;
+  --text:#1b1b19;
+  --text-muted:#5e5e58;           /* 6.3:1 on surface, 5.8:1 on sunken */
+  --text-subtle:#66665f;          /* 5.8:1 on surface, 5.3 on sunken, 4.8 on tab, 4.6 on pressed: meta text only */
+  --icon:#6b6b64;
+  --ink-hover:#33332f;            /* the ink button's hover */
+  --on-fill:#ffffff;              /* text and icons on a filled colour: danger, phone, ink tags, avatars */
+  --scrim:rgba(20,20,18,.46);
+  --backdrop:#0e0e0d;             /* behind the editor when it's sized smaller than the window */
+  --frame-bg:#ffffff;             /* a preview frame before its page paints */
+  /* Colour · stage (behind the preview) and the one bar */
+  --stage:#2a2a27;
+  --stage-dim:rgba(42,42,39,.86);  /* over the held preview when a document has none of its own (Site Settings, M5a) */
+  --bar-bg:#1b1b19;
+  --bar-raised:#2d2d2a;
+  --bar-raised-hover:#3a3a36;
+  --bar-border:#393934;
+  --bar-border-strong:#4d4d47;
+  --bar-border-hover:#6a6a62;
+  --tooltip-bg:#111110;
+  --bar-text:#f0f0ec;
+  --bar-muted:#adada5;            /* 7.4:1 on bar-bg */
+  --bar-control:#f2f2ee;          /* the off-white control on the dark bar */
+  --bar-control-text:#1b1b19;
+  --bar-off:#33332f;              /* a control that's visibly off */
+  --bar-off-text:#a3a39b;
+  /* Colour · tool colours: fixed, never the brand */
+  --select:#1463f3; --select-strong:#0f56d9; --select-wash:#ebf2ff; --select-halo:rgba(20,99,243,.2);
+  --phone:#0a7266; --phone-strong:#075e54; --phone-wash:#e7f4f1; --phone-field:#f7fbfa; --phone-border:#9dd2c8; --phone-halo:rgba(10,114,102,.2);
+  --focus:#1463f3; --focus-on-dark:#8fb8ff;
+  /* Colour · status: fixed, never the brand (Decision 5) */
+  --status-warning:#94500a; --status-warning-strong:#6b3a06; --status-warning-dot:#e08a00; --status-warning-wash:#fff5e3; --status-warning-border:#edcb88;
+  --status-warning-on-dark:#ffc46b; --status-warning-dark-wash:#3a2a10; --status-warning-dark-border:#6b4a14;
+  --status-danger:#b42318;  --status-danger-strong:#8a1a12; --status-danger-hover:#9a1d14; --status-danger-dot:#e5372a; --status-danger-wash:#fef1ef; --status-danger-border:#f1bdb6; --status-danger-halo:rgba(180,35,24,.14);
+  --status-danger-on-dark:#ff9a90; --status-danger-dark-border:#7a2a22;
+  --status-live:#17743d;    --status-live-dot:#2fa45a;    --status-live-wash:#eaf6ee;    --status-live-border:#b3dfc1;   --status-live-on-dark:#7bdb9c;
+  --status-waiting:#5b42c9; --status-waiting-dot:#7a5ae6; --status-waiting-wash:#f2eefd; --status-waiting-border:#d4c9f7; --status-waiting-on-dark:#bdabff;
+  --status-locked:#4f5866;  --status-locked-wash:#eef0f3; --status-locked-border:#d2d7de;
+  /* Colour · preview overlays, drawn inside the iframes over any site (Decision 6) */
+  --ov:#1463f3;                   /* outline core */
+  --ov-text:#0f56d9;
+  --ov-halo:rgba(255,255,255,.95);/* the second tone, both sides of the core */
+  --ov-on:#ffffff;                /* text on a filled overlay tag */
+  --ov-surface:#ffffff;           /* hover tags and insert-point pills */
+  --ov-wash:rgba(20,99,243,.07);  /* hover fill */
+  --ov-phone:#0a7266;             /* phone lines */
+  --ov-warn:#e08a00; --ov-warn-text:#6e3c05; --ov-warn-wash:#fff6e3;
+  --ov-ring:rgba(20,99,243,.18);  /* the soft ring while typing on the page */
+  --ov-lift:rgba(0,0,0,.28);      /* shadow under insert points */
+  --ov-veil-a:rgba(255,255,255,.28); --ov-veil-b:rgba(17,17,15,.16); /* the lock veil's two-tone hatch */
+  --ov-pop:rgba(20,20,18,.2); --ov-pop-line:rgba(20,20,18,.12); /* on the page: the formatting bar's and its popovers' shadow and hairline (--shadow-pop's, the hairline a touch stronger over a busy page) */
+  /* Colour · people (avatars) */
+  --p-niamh:#4f6aa8; --p-aoife:#a24f7c; --p-ciaran:#8a6a2e;
+  /* Brand slots (Site Settings › Editor branding). Set by the brand switcher; ink and edge are computed by contrast */
+  --accent:#1f2f57; --accent-ink:#ffffff; --accent-edge:#1f2f57;
+  /* Type */
+  --font-ui:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
+  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
+  --text-2xs:10.5px; --text-xs:11px; --text-sm:12px; --text-base:13px; --text-md:14px; --text-lg:16px; --text-xl:19px; --text-2xl:24px;
+  --leading-tight:1.2; --leading:1.45; --leading-loose:1.55;
+  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
+  --tracking-caps:.06em; --tracking-tight:-.01em;
+  /* Space */
+  --space-0-5:2px; --space-1:4px; --space-1-5:6px; --space-2:8px; --space-2-5:10px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
+  /* Radius */
+  --radius-xs:3px; --radius-sm:5px; --radius-md:7px; --radius-lg:10px; --radius-xl:14px; --radius-pill:999px;
+  /* Shadow */
+  --shadow-control:0 1px 1px rgba(20,20,18,.05);
+  --shadow-raised:0 1px 2px rgba(20,20,18,.16);   /* a switch knob, the chosen segment */
+  --shadow-pop:0 14px 36px rgba(20,20,18,.2),0 0 0 1px rgba(20,20,18,.07);
+  --shadow-drag:0 12px 28px rgba(20,20,18,.22),0 0 0 1px rgba(20,20,18,.08);
+  --shadow-modal:0 28px 70px rgba(20,20,18,.3),0 0 0 1px rgba(20,20,18,.06);
+  --shadow-frame:0 0 0 1px rgba(255,255,255,.07),0 10px 34px rgba(0,0,0,.42);
+  /* Motion (all zero under reduced motion) */
+  --dur-fast:120ms; --dur-base:180ms; --dur-slow:320ms; --dur-pulse:900ms;
+  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-in-out:cubic-bezier(.45,0,.25,1);
+  /* Layout */
+  --bar-h:44px; --sidebar-w:320px; --row-h:30px; --control-h:32px; --control-h-sm:26px; --pop-gap:8px; --frame-pad:16px;
+  /* Pages tree (M3 Decision 8): the twisty's column, and one step of indent (the twisty plus the row's gap, so a child's icon sits under its parent's name) */
+  --tree-twisty:16px; --tree-indent:24px;
+  /* Media (M5b): a slot's thumbnail, the library's grid (columns at the sidebar's width), the focal point's ring */
+  --thumb-w:64px; --thumb-h:48px; --lib-cols:3; --focal-ring:22px; --focal-max-h:220px;
+  /* The grid (M6c G5): a card's narrowest width (the stage fits as many as it can), the gaps, the card's own padding,
+     the text card's paper and the picture's box while its image is on its way (the ratio is the collection's, set inline) */
+  --card-min:208px; --card-gap-x:var(--space-3); --card-gap-y:var(--space-4); --card-pad:var(--space-1-5);
+  --card-text-bg:var(--surface-tab-near); --card-loading-bg:var(--surface-sunken);
+  /* Submissions (M6): the unread mark, a submission's sheet in the stage, its label column */
+  --unread:var(--select); --sub-sheet-w:640px; --sub-label-w:168px;
+  /* Layers */
+  --z-frame:1; --z-bar:20; --z-pop:40; --z-toast:45; --z-modal:60; --z-screen:80;
+}
+@media (prefers-reduced-motion:reduce){:root{--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms;--dur-pulse:0ms}}
+:root[data-motion="reduce"]{--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms;--dur-pulse:0ms}

package/src/editor/tsconfig.json

@@ -0,0 +1,16 @@
+// The editor's React files (M3 Decision 2). Vite takes its JSX settings from the
+// nearest tsconfig, and a site's own is Astro's (JSX preserved), so the editor
+// carries its own. Type-checking uses the package's tsconfig, which matches.
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "noEmit": true
+  }
+}