smoodly 0.0.12 → 0.0.14

package/dist/admin/ui/primitives.js

@@ -5,16 +5,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // values live here; every static rule, and all hover/focus state, lives in
 // theme.tsx's stylesheet.
 import { Fragment } from "react";
-import { Moon, Sun } from "lucide-react";
+import { GlobeOff, GripVertical, Moon, Sun } from "lucide-react";
 import { THEME_KEY } from "./theme.js";
 import { RouteLink } from "../shell/RouteLink.js";
 /** Lucide at the design system's size and stroke. */
 const ICON = { size: 14, strokeWidth: 1.5, "aria-hidden": true };
 /* ── brand ───────────────────────────────────────────────────────────── */
 /** The wordmark, inlined: a package can't ship a file into the host app's
- *  /public. Dark mode inverts it through --logo-filter, per the handoff. */
+ *  /public. Its colour is the --logo-color token (accent in the warm look). */
 export function Logo({ height = 18 }) {
-    return (_jsx("svg", { className: "sm-wordmark", style: { height }, viewBox: "0 0 183 43", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": "Smoodly", children: _jsx("path", { fill: "#0038B1", d: "M13.294 9.9796C15.9908 9.9796 19.823 10.7144 21.4552 11.5204L20.1069 18.3473C18.1198 17.4228 15.3284 16.688 12.7973 16.688C11.307 16.688 10.3371 17.0198 10.3371 17.8021C10.3371 18.3236 10.8575 18.6318 11.7801 18.8214L13.7198 19.2481C17.7413 20.1251 19.7993 22.2111 19.7993 25.4112C19.7993 31.9063 14.7607 34.3716 8.23173 34.3716C4.9909 34.3716 1.8447 33.5893 0.046875 32.8782L1.48987 25.6009C3.90274 26.8572 7.14357 27.6395 9.22526 27.6395C10.7156 27.6395 11.7328 27.2602 11.7328 26.3357C11.7328 25.8142 11.3543 25.4112 10.2425 25.2216L8.58656 24.8897C5.44036 24.2971 2.74362 22.14 2.74362 18.6792C2.74362 13.2982 6.81239 10.0033 13.3413 10.0033L13.294 9.9796ZM52.8463 9.9796C49.014 9.9796 46.6012 12.0656 45.2528 13.5116C44.1883 11.3308 41.9174 9.9796 39.2916 9.9796C36.6658 9.9796 34.6551 10.9989 33.283 12.3975L33.6142 10.7381H26.0681L21.6208 33.6604H29.2616L32.0766 19.011C32.9992 17.8495 34.2529 16.9724 35.6013 16.9724C37.4464 16.9724 38.2034 18.2288 37.8249 20.22L35.2228 33.6604H42.8636L45.6786 18.9162C46.6012 17.8021 47.8549 16.9724 49.156 16.9724C51.0011 16.9724 51.7344 18.2288 51.3796 20.22L49.9366 27.7817C49.5581 29.7255 49.4635 31.9537 50.1732 33.6604H57.8139C57.1279 31.9537 57.1989 29.7255 57.5774 27.7817L59.3752 18.3236C60.3451 13.3219 57.1043 10.027 52.8463 10.027V9.9796ZM109.596 19.6273C109.596 27.6158 103.304 34.3241 94.7877 34.3241C89.7727 34.3241 86.1061 31.9537 84.6158 28.3743C84.4975 28.1136 84.19 28.0662 84.0244 28.3032C81.3986 31.93 77.0933 34.3241 72.031 34.3241C65.4074 34.3241 61.0548 30.1996 61.0548 24.629C61.0548 16.688 67.2998 9.9796 75.8159 9.9796C80.8545 9.9796 84.5211 12.3501 86.0351 15.882C86.1534 16.1428 86.4609 16.1902 86.6265 15.9531C89.2523 12.3501 93.5103 9.9559 98.5963 9.9559C105.267 9.9559 109.62 14.0805 109.62 19.6036L109.596 19.6273ZM78.7965 20.9785C78.7965 18.7029 77.2825 17.1858 74.8697 17.1858C71.6761 17.1858 69.0267 19.9592 69.0267 23.349C69.0267 25.672 70.5643 27.1417 72.9062 27.1417C76.0997 27.1417 78.7728 24.3682 78.7728 20.9785H78.7965ZM101.577 20.9785C101.577 18.7029 100.039 17.1858 97.65 17.1858C94.4565 17.1858 91.8307 19.9592 91.8307 23.349C91.8307 25.672 93.3447 27.1417 95.7103 27.1417C98.9038 27.1417 101.601 24.3682 101.601 20.9785H101.577ZM134.529 33.6367H126.888C126.652 33.1152 126.51 32.5226 126.463 31.93C124.972 33.0915 122.299 34.3479 119.484 34.3479C114.02 34.3479 110.968 29.9388 110.921 24.7475C110.921 16.7591 116.527 10.0033 123.837 10.0033C126.108 10.0033 128.331 10.6433 129.68 12.0419L132.022 0H139.662L134.293 27.7343C133.914 29.6781 133.819 31.9063 134.529 33.6367ZM128.331 18.9873C127.503 17.8258 126.06 17.1858 124.57 17.1858C121.14 17.1858 118.964 20.0066 118.964 23.1356C118.822 25.6957 120.454 27.1654 122.749 27.1654C124.002 27.1654 125.848 26.4305 127.101 25.3638L128.308 19.011L128.331 18.9873ZM146.002 27.758L151.348 0H143.708L138.338 27.7343C137.959 29.6781 137.865 31.9063 138.574 33.613H146.215C145.529 31.9063 145.624 29.6781 145.978 27.7343L146.002 27.758ZM169.752 10.7381L162.064 23.823L158.776 10.7381H150.71L156.86 32.4041L150.095 43.0237H158.421L178.552 10.7381H169.705H169.752ZM179.167 24.8423C176.258 24.8423 173.608 27.4024 173.608 30.2707C173.608 32.3093 175.099 33.8975 177.417 33.8975C180.421 33.8975 183.023 31.3374 183.023 28.4691C183.023 26.3831 181.486 24.8423 179.191 24.8423H179.167Z" }) }));
+    return (_jsx("svg", { className: "sm-wordmark", style: { height }, viewBox: "0 0 183 43", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": "Smoodly", children: _jsx("path", { fill: "currentColor", d: "M13.294 9.9796C15.9908 9.9796 19.823 10.7144 21.4552 11.5204L20.1069 18.3473C18.1198 17.4228 15.3284 16.688 12.7973 16.688C11.307 16.688 10.3371 17.0198 10.3371 17.8021C10.3371 18.3236 10.8575 18.6318 11.7801 18.8214L13.7198 19.2481C17.7413 20.1251 19.7993 22.2111 19.7993 25.4112C19.7993 31.9063 14.7607 34.3716 8.23173 34.3716C4.9909 34.3716 1.8447 33.5893 0.046875 32.8782L1.48987 25.6009C3.90274 26.8572 7.14357 27.6395 9.22526 27.6395C10.7156 27.6395 11.7328 27.2602 11.7328 26.3357C11.7328 25.8142 11.3543 25.4112 10.2425 25.2216L8.58656 24.8897C5.44036 24.2971 2.74362 22.14 2.74362 18.6792C2.74362 13.2982 6.81239 10.0033 13.3413 10.0033L13.294 9.9796ZM52.8463 9.9796C49.014 9.9796 46.6012 12.0656 45.2528 13.5116C44.1883 11.3308 41.9174 9.9796 39.2916 9.9796C36.6658 9.9796 34.6551 10.9989 33.283 12.3975L33.6142 10.7381H26.0681L21.6208 33.6604H29.2616L32.0766 19.011C32.9992 17.8495 34.2529 16.9724 35.6013 16.9724C37.4464 16.9724 38.2034 18.2288 37.8249 20.22L35.2228 33.6604H42.8636L45.6786 18.9162C46.6012 17.8021 47.8549 16.9724 49.156 16.9724C51.0011 16.9724 51.7344 18.2288 51.3796 20.22L49.9366 27.7817C49.5581 29.7255 49.4635 31.9537 50.1732 33.6604H57.8139C57.1279 31.9537 57.1989 29.7255 57.5774 27.7817L59.3752 18.3236C60.3451 13.3219 57.1043 10.027 52.8463 10.027V9.9796ZM109.596 19.6273C109.596 27.6158 103.304 34.3241 94.7877 34.3241C89.7727 34.3241 86.1061 31.9537 84.6158 28.3743C84.4975 28.1136 84.19 28.0662 84.0244 28.3032C81.3986 31.93 77.0933 34.3241 72.031 34.3241C65.4074 34.3241 61.0548 30.1996 61.0548 24.629C61.0548 16.688 67.2998 9.9796 75.8159 9.9796C80.8545 9.9796 84.5211 12.3501 86.0351 15.882C86.1534 16.1428 86.4609 16.1902 86.6265 15.9531C89.2523 12.3501 93.5103 9.9559 98.5963 9.9559C105.267 9.9559 109.62 14.0805 109.62 19.6036L109.596 19.6273ZM78.7965 20.9785C78.7965 18.7029 77.2825 17.1858 74.8697 17.1858C71.6761 17.1858 69.0267 19.9592 69.0267 23.349C69.0267 25.672 70.5643 27.1417 72.9062 27.1417C76.0997 27.1417 78.7728 24.3682 78.7728 20.9785H78.7965ZM101.577 20.9785C101.577 18.7029 100.039 17.1858 97.65 17.1858C94.4565 17.1858 91.8307 19.9592 91.8307 23.349C91.8307 25.672 93.3447 27.1417 95.7103 27.1417C98.9038 27.1417 101.601 24.3682 101.601 20.9785H101.577ZM134.529 33.6367H126.888C126.652 33.1152 126.51 32.5226 126.463 31.93C124.972 33.0915 122.299 34.3479 119.484 34.3479C114.02 34.3479 110.968 29.9388 110.921 24.7475C110.921 16.7591 116.527 10.0033 123.837 10.0033C126.108 10.0033 128.331 10.6433 129.68 12.0419L132.022 0H139.662L134.293 27.7343C133.914 29.6781 133.819 31.9063 134.529 33.6367ZM128.331 18.9873C127.503 17.8258 126.06 17.1858 124.57 17.1858C121.14 17.1858 118.964 20.0066 118.964 23.1356C118.822 25.6957 120.454 27.1654 122.749 27.1654C124.002 27.1654 125.848 26.4305 127.101 25.3638L128.308 19.011L128.331 18.9873ZM146.002 27.758L151.348 0H143.708L138.338 27.7343C137.959 29.6781 137.865 31.9063 138.574 33.613H146.215C145.529 31.9063 145.624 29.6781 145.978 27.7343L146.002 27.758ZM169.752 10.7381L162.064 23.823L158.776 10.7381H150.71L156.86 32.4041L150.095 43.0237H158.421L178.552 10.7381H169.705H169.752ZM179.167 24.8423C176.258 24.8423 173.608 27.4024 173.608 30.2707C173.608 32.3093 175.099 33.8975 177.417 33.8975C180.421 33.8975 183.023 31.3374 183.023 28.4691C183.023 26.3831 181.486 24.8423 179.191 24.8423H179.167Z" }) }));
 }
 /** Light ⇄ dark, remembered in localStorage; an entry in the rail's user menu.
  *  The attribute goes on the ADMIN wrapper, never the host <html>: a customer's
@@ -51,34 +51,59 @@ export function LinkButton({ variant = "secondary", children, ...rest }) {
 export function IconButton({ label, tone = "default", size = 24, children, ...rest }) {
     return (_jsx("button", { type: "button", "aria-label": label, title: label, className: cx("sm-iconbtn", tone === "inverse" && "sm-iconbtn--inverse"), style: { width: size, height: size }, ...rest, children: children }));
 }
+/** An on/off control in the design system's control language: a pill
+ *  track, a knob, the accent when on. A button, so it sits inside a
+ *  field's implicit label and the label click toggles it. */
+export function Switch({ checked, onChange, disabled, label }) {
+    return (_jsx("button", { type: "button", role: "switch", "aria-checked": checked, "aria-label": label, disabled: disabled, className: "sm-switch", onClick: () => onChange(!checked), children: _jsx("span", { className: "sm-switch__knob" }) }));
+}
+/** The drag handle every sortable row carries at its left edge (spec
+ *  2026-09-09 §2): a button, so it is focusable and takes the arrow keys;
+ *  `touch-action: none` (theme) so a finger on it drags instead of scrolling. */
+export function Grip(props) {
+    return (_jsx("button", { type: "button", className: "sm-grip", "aria-label": "Drag to reorder", title: "Drag to reorder", ...props, children: _jsx(GripVertical, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }) }));
+}
 /** Label + optional counter above a control — the handoff's Input/Textarea head.
  *  `asDiv` for groups holding more than one control: an implicit <label>
  *  activates its first labelable descendant, so wrapping several is a trap. */
-export function Field({ label, counter, hint, error, asDiv, children, style, className }) {
+export function Field({ label, mark, counter, hint, error, asDiv, children, style, className, path }) {
     const Tag = asDiv ? "div" : "label";
-    return (_jsxs(Tag, { className: cx("sm-field", className), style: style, children: [(label || counter) && (_jsxs("span", { className: "sm-field__head", children: [_jsx("span", { className: "sm-label", children: label }), counter && _jsx("span", { className: "sm-counter", children: counter })] })), children, hint && _jsx("span", { className: "sm-hint", children: hint }), error && _jsx("span", { className: "sm-error", children: error })] }));
+    return (_jsxs(Tag, { className: cx("sm-field", className), style: style, "data-sm-path": path, children: [(label || counter) && (_jsxs("span", { className: "sm-field__head", children: [_jsxs("span", { className: "sm-label", children: [label, mark] }), counter && _jsx("span", { className: "sm-counter", children: counter })] })), children, hint && _jsx("span", { className: "sm-hint", children: hint }), error && _jsx("span", { className: "sm-error", children: error })] }));
+}
+/** The mark beside a field that is NOT `.localized()`: a globe-off, so a
+ *  multilingual form needs no "shared across languages" grouping. */
+export function UnlocalizedMark() {
+    const title = "Same in every language";
+    return (_jsx("span", { className: "sm-label__mark", role: "img", "aria-label": title, title: title, children: _jsx(GlobeOff, { size: 13, strokeWidth: 1.75, "aria-hidden": "true" }) }));
 }
 /* ── navigation ──────────────────────────────────────────────────────── */
 export function TopBar({ left, right }) {
     return (_jsxs("header", { className: "sm-topbar", children: [_jsx("div", { className: "sm-topbar__left", children: left }), _jsx("div", { className: "sm-topbar__right", children: right })] }));
 }
 /** `items` are crumbs; every one but the last is a link when given an href.
- *  Links route in place: the shell never reloads for a crumb. */
+ *  Links route in place: the shell never reloads for a crumb. A crumb whose
+ *  label starts with "/" (a page path) brings its own slash, so no
+ *  separator is drawn before it. A crumb's `trailing` node renders right
+ *  after it — the locale switch rides the first crumb, so it keeps its
+ *  place however long the title or path after it grows. */
 export function Breadcrumb({ items, backHref }) {
     return (_jsxs("div", { className: "sm-crumbs", children: [backHref && _jsx(RouteLink, { className: "sm-back", href: backHref, "aria-label": "Back", children: "\u2190" }), items.map((it, i) => {
                 const last = i === items.length - 1;
-                return (_jsxs(Fragment, { children: [i > 0 && _jsx("span", { className: "sm-crumbs__sep", children: "/" }), last
+                return (_jsxs(Fragment, { children: [i > 0 && !it.label.startsWith("/") && _jsx("span", { className: "sm-crumbs__sep", children: "/" }), last
                             ? _jsx("span", { className: "sm-crumbs__here", children: it.label })
                             : it.href
                                 ? _jsx(RouteLink, { href: it.href, style: { color: "inherit" }, children: it.label })
-                                : _jsx("span", { children: it.label })] }, i));
+                                : _jsx("span", { children: it.label }), it.trailing] }, i));
             })] }));
 }
 export function Tabs({ tabs, value, onChange }) {
     return (_jsx("div", { className: "sm-tabs", role: "tablist", children: tabs.map((t) => (_jsx("button", { type: "button", role: "tab", "aria-selected": t === value, className: "sm-tab", onClick: () => onChange(t), children: t }, t))) }));
 }
-export function Segmented({ options, value, onChange, stretch, disabled }) {
-    return (_jsx("div", { className: cx("sm-seg", stretch && "sm-seg--stretch", disabled && "sm-seg--disabled"), children: options.map((o) => (_jsx("button", { type: "button", className: "sm-seg__opt", "aria-pressed": o === value, disabled: disabled, onClick: () => onChange(o), children: o }, o))) }));
+export function Segmented({ options, value, onChange, stretch, disabled, label, option, className }) {
+    return (_jsx("div", { className: cx("sm-seg", stretch && "sm-seg--stretch", disabled && "sm-seg--disabled", className), children: options.map((o) => {
+            const extra = option?.(o);
+            return (_jsx("button", { type: "button", className: cx("sm-seg__opt", extra?.className), "aria-pressed": o === value, disabled: disabled || extra?.disabled, title: extra?.title, onClick: () => onChange(o), children: label ? label(o) : o }, o));
+        }) }));
 }
 /* ── data ────────────────────────────────────────────────────────────── */
 const STATUS_TONE = {

package/dist/admin/ui/resize.d.ts

@@ -0,0 +1,16 @@
+/** Where the dragged width is remembered, browser-side only (like the theme). */
+export declare const INSPECTOR_W_KEY = "smoodly-inspector-w";
+/** Below this the richtext toolbar and the outline rows no longer fit. */
+export declare const MIN_INSPECTOR_W = 260;
+/** The token's value in the warm look; what a reset returns to. */
+export declare const DEFAULT_INSPECTOR_W = 360;
+/** One arrow-key press. */
+export declare const RESIZE_STEP = 16;
+/** Half the editor row (canvas + handle + inspector), never below the minimum. */
+export declare const maxInspectorW: (rowWidth: number) => number;
+/** An integer inside [MIN, half the row]. */
+export declare const clampInspectorW: (px: number, rowWidth: number) => number;
+/** A stored value is trusted only as a plain integer ≥ MIN; anything else is
+ *  ignored (never clamped or rewritten). The boot script in theme.tsx repeats
+ *  this test inline — keep the two in step. */
+export declare const parseStoredWidth: (raw: string | null) => number | null;

package/dist/admin/ui/resize.js

@@ -0,0 +1,23 @@
+// The inspector's drag-to-resize maths (spec 2026-09-10 §1, §5): pure, so
+// the handle and the pre-paint boot script agree on one clamp.
+/** Where the dragged width is remembered, browser-side only (like the theme). */
+export const INSPECTOR_W_KEY = "smoodly-inspector-w";
+/** Below this the richtext toolbar and the outline rows no longer fit. */
+export const MIN_INSPECTOR_W = 260;
+/** The token's value in the warm look; what a reset returns to. */
+export const DEFAULT_INSPECTOR_W = 360;
+/** One arrow-key press. */
+export const RESIZE_STEP = 16;
+/** Half the editor row (canvas + handle + inspector), never below the minimum. */
+export const maxInspectorW = (rowWidth) => Math.max(MIN_INSPECTOR_W, Math.floor(rowWidth / 2));
+/** An integer inside [MIN, half the row]. */
+export const clampInspectorW = (px, rowWidth) => Math.min(maxInspectorW(rowWidth), Math.max(MIN_INSPECTOR_W, Math.round(px)));
+/** A stored value is trusted only as a plain integer ≥ MIN; anything else is
+ *  ignored (never clamped or rewritten). The boot script in theme.tsx repeats
+ *  this test inline — keep the two in step. */
+export const parseStoredWidth = (raw) => {
+    if (raw === null || !/^\d+$/.test(raw))
+        return null;
+    const n = Number(raw);
+    return Number.isSafeInteger(n) && n >= MIN_INSPECTOR_W ? n : null;
+};

package/dist/admin/ui/sortable.d.ts

@@ -0,0 +1,23 @@
+/** A row's box in the container's coordinate space, measured once at drag start. */
+export type RowRect = {
+    top: number;
+    height: number;
+};
+/** The drop index for a dragged row whose centre is at `centerY`: the
+ *  number of OTHER rows whose midpoint that centre has passed. */
+export declare function slotAt(rects: RowRect[], from: number, centerY: number): number;
+/** The translateY of every row while the dragged row (`from`) hovers at
+ *  slot `to`: the rows between them slide by the dragged row's height to
+ *  open the gap; the dragged row's own entry is 0 (it follows the pointer). */
+export declare function gapTransforms(rects: RowRect[], from: number, to: number): number[];
+/** Where the dragged row settles once dropped at `to`, as a translateY
+ *  from its measured position — used for the pending hold. */
+export declare function restingOffset(rects: RowRect[], from: number, to: number): number;
+/** The dragged row's translateY held inside the rows' extent: its top no
+ *  higher than the first row's, its bottom no lower than the last row's.
+ *  A transform past the extent grows the scroller's overflow, and the
+ *  edge autoscroll would chase that growth forever (found in the
+ *  2026-09-09 walk). */
+export declare function clampOffset(rects: RowRect[], from: number, dy: number): number;
+/** The keyboard step: one row up or down, null at the ends. */
+export declare function stepIndex(count: number, from: number, dir: -1 | 1): number | null;

package/dist/admin/ui/sortable.js

@@ -0,0 +1,57 @@
+// The drag gesture's maths as pure functions over row rectangles, so the
+// hook (./useSortable.ts) is thin and this is tested without a DOM
+// (spec 2026-09-09 §3). Every index is a position in the rendered row
+// list; `to` is the index in the RESULTING order, moveItem's convention.
+/** The drop index for a dragged row whose centre is at `centerY`: the
+ *  number of OTHER rows whose midpoint that centre has passed. */
+export function slotAt(rects, from, centerY) {
+    let slot = 0;
+    rects.forEach((r, i) => {
+        if (i !== from && centerY > r.top + r.height / 2)
+            slot++;
+    });
+    return slot;
+}
+/** The translateY of every row while the dragged row (`from`) hovers at
+ *  slot `to`: the rows between them slide by the dragged row's height to
+ *  open the gap; the dragged row's own entry is 0 (it follows the pointer). */
+export function gapTransforms(rects, from, to) {
+    const h = rects[from]?.height ?? 0;
+    return rects.map((_, i) => {
+        if (i === from)
+            return 0;
+        if (to > from && i > from && i <= to)
+            return -h;
+        if (to < from && i >= to && i < from)
+            return h;
+        return 0;
+    });
+}
+/** Where the dragged row settles once dropped at `to`, as a translateY
+ *  from its measured position — used for the pending hold. */
+export function restingOffset(rects, from, to) {
+    if (to === from || !rects[from] || !rects[to])
+        return 0;
+    const own = rects[from];
+    if (to > from)
+        return rects[to].top + rects[to].height - own.height - own.top;
+    return rects[to].top - own.top;
+}
+/** The dragged row's translateY held inside the rows' extent: its top no
+ *  higher than the first row's, its bottom no lower than the last row's.
+ *  A transform past the extent grows the scroller's overflow, and the
+ *  edge autoscroll would chase that growth forever (found in the
+ *  2026-09-09 walk). */
+export function clampOffset(rects, from, dy) {
+    const own = rects[from];
+    if (!own || rects.length === 0)
+        return dy;
+    const top = Math.min(...rects.map((r) => r.top));
+    const bottom = Math.max(...rects.map((r) => r.top + r.height));
+    return Math.max(top - own.top, Math.min(bottom - own.height - own.top, dy));
+}
+/** The keyboard step: one row up or down, null at the ends. */
+export function stepIndex(count, from, dir) {
+    const to = from + dir;
+    return to < 0 || to >= count ? null : to;
+}

package/dist/admin/ui/theme.d.ts

@@ -1,5 +1,7 @@
-export declare const ADMIN_CSS = "\n@import url(\"https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap\");\n\n.sm-admin{\n  --font-sans:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;\n  --font-mono:ui-monospace,Menlo,Consolas,monospace;\n  --text-2xs:9px; --text-xs:10px; --text-sm:11px; --text-md:12px;\n  --text-lg:13px; --text-xl:14px; --text-2xl:15px; --text-3xl:20px; --text-4xl:30px;\n  --tracking-tight:-0.02em; --tracking-label:0.1em; --tracking-tag:0.08em;\n\n  --radius-xs:1px; --radius-sm:3px; --radius-md:4px; --radius-round:999px;\n  --control-h:28px; --control-h-lg:36px; --row-h:38px; --topbar-h:48px;\n  --nav-w:72px; --inspector-w:380px;\n  --border:1px solid var(--line);\n  --outline-selection:1.5px solid var(--selection);\n\n  --brand-600:#0038B1; --brand-500:#2554D6; --brand-300:#6E96FF;\n  --brand-200:#A9C0FF; --brand-100:#DCE4F9; --brand-50:#E3EAFA;\n  --gray-0:#FFFFFF; --gray-50:#F1F2F6; --gray-100:#E1E4EC; --gray-300:#C9D0E2;\n  --gray-500:#8B93A7; --gray-600:#6B7386; --gray-700:#4A5165; --gray-900:#0F1420;\n  --green-700:#1F7A46; --green-50:#E3F3EA; --green-300:#6FD39A; --green-500:#2E9E5B;\n  --amber-700:#8A5A00; --amber-50:#FBF1DC; --amber-300:#E8B85A;\n  --red-700:#B42318; --red-50:#FDECEC; --red-300:#F5A5A0;\n\n  --bg:var(--gray-50); --surface:var(--gray-0); --surface-inset:var(--gray-50);\n  --input-bg:var(--gray-0); --line:var(--gray-100); --line-dashed:var(--gray-300);\n  --text:var(--gray-900); --text-muted:var(--gray-600); --text-subtle:var(--gray-500);\n  --accent:var(--brand-600); --on-accent:#FFFFFF; --accent-soft:var(--brand-50);\n  --selection:var(--brand-600); --nav-active-bg:var(--brand-100); --nav-active-fg:var(--brand-600);\n  --hover:rgba(15,20,32,.045); --press:rgba(15,20,32,.08);\n  --control-hover:var(--gray-100);\n\n  --status-published-fg:var(--green-700); --status-published-bg:var(--green-50);\n  --status-draft-fg:var(--amber-700); --status-draft-bg:var(--amber-50);\n  --status-scheduled-fg:var(--accent); --status-scheduled-bg:var(--accent-soft);\n  --status-saved-dot:var(--green-500);\n  --warn:var(--amber-700); --warn-soft:var(--amber-50);\n  --danger:var(--red-700); --danger-soft:var(--red-50);\n\n  --page-bg:#FFFFFF; --page-text:var(--gray-900);\n  --shadow-page:0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);\n  --shadow-float:0 2px 8px rgba(0,0,0,.25);\n  --shadow-seg:0 1px 2px rgba(0,0,0,.08);\n  --focus-ring:0 0 0 3px var(--accent-soft);\n  --shadow-pop:0 8px 32px rgba(0,0,0,.18);\n  --logo-filter:none;\n\n  /* Which half of the theme toggle is visible. A token, so the icon can never\n     disagree with the colors \u2014 both follow the one cascade below. */\n  --when-light:inline-flex; --when-dark:none;\n}\nhtml[data-theme=\"dark\"] .sm-admin,.sm-admin[data-theme=\"dark\"]{\n  --bg:#0D0F14; --surface:#15181F; --surface-inset:#0D0F14; --input-bg:#1B1F28;\n  --line:#2A2F3B; --line-dashed:#2A2F3B;\n  --text:#EEF0F5; --text-muted:#8C94A8; --text-subtle:#6B7386;\n  --accent:var(--brand-300); --on-accent:#06122F; --accent-soft:rgba(110,150,255,.16);\n  --nav-active-bg:rgba(110,150,255,.14); --nav-active-fg:var(--brand-200);\n  --hover:rgba(238,240,245,.05); --press:rgba(238,240,245,.09);\n  --control-hover:var(--input-bg);\n\n  --status-published-fg:var(--green-300); --status-published-bg:rgba(111,211,154,.14);\n  --status-draft-fg:var(--amber-300); --status-draft-bg:rgba(232,184,90,.14);\n  --warn:var(--amber-300); --warn-soft:rgba(232,184,90,.14);\n  --danger:var(--red-300); --danger-soft:rgba(244,102,92,.14);\n\n  --shadow-page:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);\n  --shadow-pop:0 8px 32px rgba(0,0,0,.5);\n  --logo-filter:brightness(0) invert(1);\n  --when-light:none; --when-dark:inline-flex;\n}\n@media (prefers-color-scheme:dark){\n  html:not([data-theme=\"light\"]) .sm-admin:not([data-theme=\"light\"]){\n  --bg:#0D0F14; --surface:#15181F; --surface-inset:#0D0F14; --input-bg:#1B1F28;\n  --line:#2A2F3B; --line-dashed:#2A2F3B;\n  --text:#EEF0F5; --text-muted:#8C94A8; --text-subtle:#6B7386;\n  --accent:var(--brand-300); --on-accent:#06122F; --accent-soft:rgba(110,150,255,.16);\n  --nav-active-bg:rgba(110,150,255,.14); --nav-active-fg:var(--brand-200);\n  --hover:rgba(238,240,245,.05); --press:rgba(238,240,245,.09);\n  --control-hover:var(--input-bg);\n\n  --status-published-fg:var(--green-300); --status-published-bg:rgba(111,211,154,.14);\n  --status-draft-fg:var(--amber-300); --status-draft-bg:rgba(232,184,90,.14);\n  --warn:var(--amber-300); --warn-soft:rgba(232,184,90,.14);\n  --danger:var(--red-300); --danger-soft:rgba(244,102,92,.14);\n\n  --shadow-page:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);\n  --shadow-pop:0 8px 32px rgba(0,0,0,.5);\n  --logo-filter:brightness(0) invert(1);\n  --when-light:none; --when-dark:inline-flex;\n}\n}\n/* Last, and the same specificity as the host-attribute rule: an explicit\n   choice from the theme toggle wins over a dark <html> and over the OS. */\n.sm-admin[data-theme=\"light\"]{\n  --brand-600:#0038B1; --brand-500:#2554D6; --brand-300:#6E96FF;\n  --brand-200:#A9C0FF; --brand-100:#DCE4F9; --brand-50:#E3EAFA;\n  --gray-0:#FFFFFF; --gray-50:#F1F2F6; --gray-100:#E1E4EC; --gray-300:#C9D0E2;\n  --gray-500:#8B93A7; --gray-600:#6B7386; --gray-700:#4A5165; --gray-900:#0F1420;\n  --green-700:#1F7A46; --green-50:#E3F3EA; --green-300:#6FD39A; --green-500:#2E9E5B;\n  --amber-700:#8A5A00; --amber-50:#FBF1DC; --amber-300:#E8B85A;\n  --red-700:#B42318; --red-50:#FDECEC; --red-300:#F5A5A0;\n\n  --bg:var(--gray-50); --surface:var(--gray-0); --surface-inset:var(--gray-50);\n  --input-bg:var(--gray-0); --line:var(--gray-100); --line-dashed:var(--gray-300);\n  --text:var(--gray-900); --text-muted:var(--gray-600); --text-subtle:var(--gray-500);\n  --accent:var(--brand-600); --on-accent:#FFFFFF; --accent-soft:var(--brand-50);\n  --selection:var(--brand-600); --nav-active-bg:var(--brand-100); --nav-active-fg:var(--brand-600);\n  --hover:rgba(15,20,32,.045); --press:rgba(15,20,32,.08);\n  --control-hover:var(--gray-100);\n\n  --status-published-fg:var(--green-700); --status-published-bg:var(--green-50);\n  --status-draft-fg:var(--amber-700); --status-draft-bg:var(--amber-50);\n  --status-scheduled-fg:var(--accent); --status-scheduled-bg:var(--accent-soft);\n  --status-saved-dot:var(--green-500);\n  --warn:var(--amber-700); --warn-soft:var(--amber-50);\n  --danger:var(--red-700); --danger-soft:var(--red-50);\n\n  --page-bg:#FFFFFF; --page-text:var(--gray-900);\n  --shadow-page:0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);\n  --shadow-float:0 2px 8px rgba(0,0,0,.25);\n  --shadow-seg:0 1px 2px rgba(0,0,0,.08);\n  --focus-ring:0 0 0 3px var(--accent-soft);\n  --shadow-pop:0 8px 32px rgba(0,0,0,.18);\n  --logo-filter:none;\n\n  /* Which half of the theme toggle is visible. A token, so the icon can never\n     disagree with the colors \u2014 both follow the one cascade below. */\n  --when-light:inline-flex; --when-dark:none;\n}\n\n/* The admin owns the viewport; a host <body> margin would push it into a\n   page scrollbar. Scoped by :has, so only a page holding the admin is touched. */\nbody:has(.sm-admin){margin:0}\n.sm-admin,.sm-admin *,.sm-admin *::before,.sm-admin *::after{box-sizing:border-box}\n.sm-admin{\n  font-family:var(--font-sans);font-size:var(--text-md);line-height:1.4;\n  color:var(--text);background:var(--surface);\n  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;\n}\n.sm-admin h1,.sm-admin h2,.sm-admin h3,.sm-admin p,.sm-admin ul{margin:0}\n/* :where() keeps this at zero specificity \u2014 a bare <a> is accent, but any\n   component class on it (.sm-nav-item, .sm-btn, .sm-back) decides its own\n   colour. Without this the element selector silently beat every one of them. */\n:where(.sm-admin a){color:var(--accent);text-decoration:none}\n:where(.sm-admin a:hover){color:var(--brand-500)}\n.sm-admin button,.sm-admin input,.sm-admin select,.sm-admin textarea{font-family:inherit}\n.sm-admin ::placeholder{color:var(--text-subtle)}\n.sm-admin ::selection{background:var(--accent-soft);color:var(--text)}\n.sm-mono{font-family:var(--font-mono)}\n\n/* \u2500\u2500 shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-shell{display:grid;grid-template-columns:var(--nav-w) 1fr;height:100vh;height:100dvh;overflow:hidden}\n.sm-shell>.sm-main{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}\n.sm-wordmark{height:18px;width:auto;filter:var(--logo-filter);flex:none}\n/* The design system's IconRail (components/navigation/IconRail.html),\n   ported as-is: a 72px rail, 18px Lucide icons over a 10px label, a\n   40\u00D732 active tile, the app icon on top and the avatar at the bottom. */\n.sm-rail{\n  width:var(--nav-w);height:100%;display:flex;flex-direction:column;align-items:center;gap:14px;\n  padding:14px 6px 12px;background:var(--surface);border-right:var(--border);color:var(--text);\n  font:500 10px/1 var(--font-sans);position:relative;\n}\n.sm-rail__logo{width:28px;height:28px;display:block;flex:none}\n.sm-rail__list{display:flex;flex-direction:column;gap:6px;width:100%;margin:0;padding:0;list-style:none}\n.sm-rail__item{position:relative}\n.sm-rail__btn{\n  appearance:none;background:none;border:0;margin:0;padding:2px 0;width:100%;display:flex;flex-direction:column;\n  align-items:center;gap:5px;color:inherit;font:inherit;cursor:pointer;border-radius:var(--radius-md);text-decoration:none;\n}\n.sm-rail__btn:hover{color:inherit}\n.sm-rail__btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;box-shadow:none}\n.sm-rail__tile{position:relative;width:40px;height:32px;border-radius:var(--radius-md);display:grid;place-items:center;transition:background .12s}\n.sm-rail__btn:hover .sm-rail__tile{background:var(--surface-inset)}\n.sm-rail__btn[aria-current=\"page\"],.sm-rail__btn[aria-expanded=\"true\"]{color:var(--nav-active-fg);font-weight:600}\n.sm-rail__btn[aria-current=\"page\"]:hover,.sm-rail__btn[aria-expanded=\"true\"]:hover{color:var(--nav-active-fg)}\n.sm-rail__btn[aria-current=\"page\"] .sm-rail__tile,.sm-rail__btn[aria-expanded=\"true\"] .sm-rail__tile{background:var(--nav-active-bg)}\n.sm-rail__tile svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}\n.sm-rail__chev{position:absolute;right:3px;bottom:2px;width:8px;height:8px}\n.sm-rail__chev svg{width:8px;height:8px;stroke-width:3}\n.sm-rail__label{letter-spacing:.01em;white-space:nowrap}\n/* Not greyed: the reference renders every inactive item at --text and marks\n   the unavailable ones only by being inert (no pointer, no hover). */\n.sm-rail__btn[aria-disabled=\"true\"]{cursor:default}\n.sm-rail__btn[aria-disabled=\"true\"]:hover .sm-rail__tile{background:transparent}\n.sm-rail__foot{margin-top:auto;display:flex;flex-direction:column;align-items:center}\n.sm-rail__user{\n  width:26px;height:26px;border-radius:var(--radius-round);background:var(--accent-soft);color:var(--accent);\n  display:grid;place-items:center;font-size:var(--text-sm);font-weight:600;border:0;cursor:pointer;padding:0;\n}\n.sm-rail__user:focus-visible{outline:2px solid var(--accent);outline-offset:1px;box-shadow:none}\n/* Flyout: 6px right of the rail, aligned with its item (the user menu aligns to the bottom). */\n.sm-rail__menu{\n  position:absolute;left:calc(100% + 6px);top:0;z-index:20;width:168px;padding:6px;margin:0;list-style:none;\n  background:var(--surface);border:var(--border);border-radius:var(--radius-md);box-shadow:0 4px 20px rgba(0,0,0,.14);\n  display:none;flex-direction:column;gap:1px;font-size:var(--text-md);font-weight:500;color:var(--text);\n}\n.sm-rail__menu[data-open=\"true\"]{display:flex}\n.sm-rail__menu--up{top:auto;bottom:0}\n.sm-rail__menu-title{font-size:var(--text-2xs);font-weight:600;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);padding:6px 8px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.sm-rail__menu-item{\n  appearance:none;background:none;border:0;width:100%;display:flex;align-items:center;justify-content:space-between;\n  padding:6px 8px;border-radius:var(--radius-sm);color:inherit;font:inherit;cursor:pointer;text-align:left;text-decoration:none;\n}\n.sm-rail__menu-item:hover,.sm-rail__menu-item:focus-visible{background:var(--surface-inset);color:inherit;outline:0;box-shadow:none}\n.sm-rail__menu-item[aria-current=\"page\"],.sm-rail__menu-item[aria-current=\"page\"]:hover{background:var(--nav-active-bg);color:var(--nav-active-fg);font-weight:600}\n.sm-when-light{display:var(--when-light);align-items:center;gap:8px}\n.sm-when-dark{display:var(--when-dark);align-items:center;gap:8px}\n/* .sm-nav-item survives as the inspector's link style (EditorView). */\n.sm-nav-item{\n  display:block;padding:6px 10px;border-radius:var(--radius-md);line-height:1.3;\n  color:var(--text);font-weight:500;text-decoration:none;cursor:pointer;\n  background:transparent;border:0;width:100%;text-align:left;font-size:var(--text-md);\n  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\n}\n.sm-nav-item:hover{background:var(--surface-inset);color:var(--text)}\n\n/* \u2500\u2500 top bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-topbar{\n  height:var(--topbar-h);flex:none;display:flex;align-items:center;justify-content:space-between;\n  gap:16px;padding:0 16px;border-bottom:var(--border);background:var(--surface);\n}\n.sm-topbar__left{display:flex;align-items:center;gap:10px;min-width:0}\n.sm-topbar__right{display:flex;align-items:center;gap:8px;flex:none}\n.sm-crumbs{display:flex;align-items:center;gap:8px;color:var(--text-muted);min-width:0}\n.sm-crumbs__sep{opacity:.5}\n.sm-crumbs__here{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.sm-back{border:0;background:transparent;padding:0;color:var(--text);font:inherit;cursor:pointer;line-height:1}\n.sm-back:hover{color:var(--accent)}\n.sm-title{font-size:var(--text-xl);font-weight:600}\n.sm-count{color:var(--text-muted)}\n\n/* \u2500\u2500 buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-btn{\n  display:inline-flex;align-items:center;justify-content:center;gap:6px;\n  height:var(--control-h);padding:0 12px;border-radius:var(--radius-md);border:0;\n  font-size:var(--text-md);font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;\n  text-decoration:none;\n}\n.sm-btn--lg{height:var(--control-h-lg);padding:0 16px}\n.sm-btn--primary{background:var(--accent);color:var(--on-accent);font-weight:600;padding:0 14px}\n.sm-btn--primary:hover{background:var(--brand-500);color:var(--on-accent)}\n.sm-btn--secondary{background:var(--surface-inset);color:var(--text)}\n.sm-btn--secondary:hover{background:var(--control-hover);color:var(--text)}\n.sm-btn--ghost{background:transparent;color:var(--accent);font-weight:600;padding:0 8px}\n.sm-btn--ghost:hover{background:var(--accent-soft);color:var(--accent)}\n.sm-btn--danger{background:var(--surface-inset);color:var(--danger)}\n.sm-btn--danger:hover{background:var(--danger-soft);color:var(--danger)}\n.sm-btn--ok{background:var(--status-published-bg);color:var(--status-published-fg);font-weight:600;padding:0 14px}\n.sm-btn:disabled,.sm-btn[aria-disabled=\"true\"]{opacity:.5;cursor:default;pointer-events:none}\n.sm-btn:focus-visible,.sm-iconbtn:focus-visible,.sm-nav-item:focus-visible,\n.sm-tab:focus-visible,.sm-seg__opt:focus-visible,.sm-row:focus-visible{\n  outline:2px solid var(--accent);outline-offset:1px\n}\n\n.sm-iconbtn{\n  width:24px;height:24px;flex:none;display:grid;place-items:center;padding:0;\n  border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);\n  font-size:12px;line-height:1;cursor:pointer;\n}\n.sm-iconbtn:hover{background:var(--hover);color:var(--text)}\n.sm-iconbtn--inverse{color:#EEF0F5}\n.sm-iconbtn--inverse:hover{background:rgba(255,255,255,.14);color:#fff}\n.sm-iconbtn:disabled{opacity:.3;cursor:default}\n.sm-iconbtn:disabled:hover{background:transparent}\n\n/* \u2500\u2500 fields \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-field{display:flex;flex-direction:column;gap:6px;min-width:0}\n.sm-field__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}\n.sm-label{\n  font-size:var(--text-2xs);font-weight:600;letter-spacing:var(--tracking-label);\n  text-transform:uppercase;color:var(--text-muted);\n}\n.sm-counter,.sm-hint{font-size:var(--text-sm);color:var(--text-muted)}\n.sm-input,.sm-textarea,.sm-select{\n  width:100%;min-width:0;border:1.5px solid transparent;border-radius:var(--radius-md);\n  background:var(--surface-inset);color:var(--text);font-size:var(--text-md);\n  outline:0;box-shadow:none;\n}\n.sm-input,.sm-select{height:var(--control-h);padding:0 10px}\n.sm-textarea{padding:8px 10px;line-height:1.5;resize:vertical;min-height:60px}\n.sm-input--lg{height:var(--control-h-lg);font-size:var(--text-2xl);font-weight:600}\n.sm-input--mono{font-family:var(--font-mono);font-size:var(--text-sm)}\n.sm-input:hover,.sm-textarea:hover,.sm-select:hover{background:var(--control-hover)}\n.sm-input:focus,.sm-textarea:focus,.sm-select:focus,\n.sm-inputwrap:focus-within{\n  background:var(--input-bg);border-color:var(--selection);box-shadow:var(--focus-ring);\n}\n.sm-input:disabled,.sm-textarea:disabled,.sm-select:disabled{opacity:.6;cursor:default}\n.sm-select{\n  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:26px;font-weight:500;\n  background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),\n    linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);\n  background-position:calc(100% - 14px) 12px,calc(100% - 10px) 12px;\n  background-size:4px 4px,4px 4px;background-repeat:no-repeat;\n}\n.sm-inputwrap{\n  display:flex;align-items:center;gap:0;height:var(--control-h);padding:0 10px;\n  border:1.5px solid transparent;border-radius:var(--radius-md);background:var(--surface-inset);\n}\n.sm-inputwrap>.sm-input{height:auto;padding:0;background:transparent;border:0;box-shadow:none}\n.sm-inputwrap>.sm-input:hover,.sm-inputwrap>.sm-input:focus{background:transparent;box-shadow:none}\n.sm-prefix{color:var(--text-muted);font-family:var(--font-mono);font-size:var(--text-sm);flex:none}\n.sm-error{color:var(--danger);font-size:var(--text-sm)}\n/* \u2500\u2500 richtext \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-richtext{display:flex;flex-direction:column;gap:6px;min-width:0}\n.sm-richtext__bar{display:flex;flex-wrap:wrap;align-items:center;gap:2px}\n.sm-richtext__sep{width:1px;height:16px;margin:0 4px;background:var(--line)}\n.sm-richtext__bar .sm-iconbtn[aria-pressed=\"true\"]{background:var(--press);color:var(--text)}\n.sm-richtext__link{display:flex;align-items:center;gap:6px}\n.sm-richtext__content{\n  min-height:110px;padding:8px 10px;border:1.5px solid transparent;border-radius:var(--radius-md);\n  background:var(--surface-inset);color:var(--text);font-size:var(--text-md);line-height:1.5;outline:0;\n}\n.sm-richtext__content:hover{background:var(--control-hover)}\n.sm-richtext__content:focus{background:var(--input-bg);border-color:var(--selection);box-shadow:var(--focus-ring)}\n.sm-richtext__content>*+*{margin-top:.5em}\n.sm-richtext__content p,.sm-richtext__content h1,.sm-richtext__content h2,.sm-richtext__content h3,\n.sm-richtext__content h4,.sm-richtext__content h5,.sm-richtext__content h6,\n.sm-richtext__content ul,.sm-richtext__content ol,.sm-richtext__content blockquote{margin:0}\n.sm-richtext__content h1,.sm-richtext__content h2,.sm-richtext__content h3,\n.sm-richtext__content h4,.sm-richtext__content h5,.sm-richtext__content h6{font-weight:600;line-height:1.25}\n.sm-richtext__content h1{font-size:var(--text-3xl)}\n.sm-richtext__content h2{font-size:var(--text-2xl)}\n.sm-richtext__content h3{font-size:var(--text-xl)}\n.sm-richtext__content h4,.sm-richtext__content h5,.sm-richtext__content h6{font-size:var(--text-lg)}\n.sm-richtext__content ul,.sm-richtext__content ol{padding-left:18px}\n.sm-richtext__content li+li{margin-top:.25em}\n.sm-richtext__content blockquote{padding-left:10px;border-left:2px solid var(--line);color:var(--text-muted)}\n.sm-richtext__content a{color:var(--accent);text-decoration:underline}\n\n.sm-group{display:flex;flex-direction:column;gap:10px;padding:2px 0 0 10px;border-left:2px solid var(--line)}\n.sm-list{display:flex;flex-direction:column;gap:6px;align-items:stretch}\n.sm-listrow{border:1px solid var(--line);border-radius:var(--radius-md);min-width:0}\n.sm-listrow__head{display:flex;align-items:center;gap:2px;height:var(--control-h);padding:0 4px 0 4px}\n.sm-listrow__toggle{\n  flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:100%;padding:0 4px;\n  border:0;background:transparent;color:var(--text);font:inherit;font-size:var(--text-md);font-weight:500;\n  text-align:left;cursor:pointer;\n}\n.sm-listrow__toggle:hover{color:var(--accent)}\n.sm-listrow__summary{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n.sm-listrow__body{display:flex;flex-direction:column;gap:10px;padding:8px 10px 10px;border-top:1px solid var(--line)}\n\n/* \u2500\u2500 data \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-table{display:flex;flex-direction:column;padding:0 16px 16px}\n.sm-table__head,.sm-row{display:grid;gap:12px;align-items:center;padding:0 8px}\n.sm-table__head{\n  height:34px;border-bottom:var(--border);font-family:var(--font-mono);\n  font-size:var(--text-2xs);letter-spacing:var(--tracking-tag);color:var(--text-muted);\n  text-transform:uppercase;position:sticky;top:0;background:var(--surface);z-index:1;\n}\n.sm-table__body{display:flex;flex-direction:column;padding-top:4px}\n.sm-row{\n  height:var(--row-h);border-radius:var(--radius-md);background:transparent;\n  border:0;font:inherit;color:inherit;text-align:left;width:100%;\n}\n.sm-row--clickable{cursor:pointer}\n.sm-row--clickable:hover{background:var(--surface-inset)}\n.sm-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}\n.sm-cell--muted{color:var(--text-muted)}\n.sm-cell--mono{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-muted)}\n.sm-cell--title{font-weight:500}\n.sm-empty{padding:28px 8px;color:var(--text-muted)}\n.sm-chevron{\n  width:12px;flex:none;border:0;background:none;padding:0;font:inherit;font-size:10px;\n  color:var(--text-muted);cursor:pointer;line-height:1;\n}\n.sm-chevron:hover{color:var(--text)}\n.sm-cell--tree{display:flex;align-items:center;gap:6px;font-weight:500}\n.sm-cell--tree.sm-cell--parent{font-weight:600}\n.sm-rowmenu{\n  border:0;background:none;padding:0 6px;font:inherit;color:var(--text-muted);cursor:pointer;\n  border-radius:var(--radius-md);line-height:1;height:24px;\n}\n.sm-rowmenu:hover{background:var(--surface-inset);color:var(--text)}\n\n.sm-badge{\n  display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--radius-md);\n  font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;white-space:nowrap;\n}\n.sm-savestate{\n  display:inline-flex;align-items:center;gap:6px;padding:0 6px;\n  font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;\n}\n.sm-dot{width:5px;height:5px;border-radius:var(--radius-round);flex:none}\n\n/* \u2500\u2500 navigation bits \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-tabs{display:flex;gap:18px;padding:0 14px;height:36px;align-items:stretch;border-bottom:var(--border);flex:none}\n.sm-tab{\n  display:flex;align-items:center;border:0;background:transparent;padding:0;font:inherit;\n  cursor:pointer;color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px;\n}\n.sm-tab:hover{color:var(--text)}\n.sm-tab[aria-selected=\"true\"]{color:var(--accent);font-weight:600;border-bottom-color:var(--accent)}\n.sm-seg{display:flex;gap:2px;padding:2px;background:var(--surface-inset);border-radius:var(--radius-md)}\n.sm-seg--stretch{width:100%}\n.sm-seg--disabled{opacity:.6}\n.sm-seg__opt:disabled{cursor:default}\n.sm-seg__opt{\n  flex:1;padding:3px 10px;border:0;border-radius:var(--radius-sm);background:transparent;\n  color:var(--text-muted);font:inherit;cursor:pointer;white-space:nowrap;\n}\n.sm-seg__opt:hover{color:var(--text)}\n.sm-seg__opt[aria-pressed=\"true\"]{background:var(--surface);color:var(--text);font-weight:600;box-shadow:var(--shadow-seg)}\n.sm-divider{height:1px;background:var(--line);flex:none}\n.sm-sectionlabel{display:flex;align-items:center;justify-content:space-between;gap:8px}\n.sm-sectionlabel--mono>.sm-label{\n  font-family:var(--font-mono);font-weight:400;letter-spacing:var(--tracking-tag);\n}\n.sm-banner{\n  display:flex;gap:14px;align-items:flex-start;padding:10px 14px;border-radius:var(--radius-md);\n  font-size:var(--text-md);\n}\n.sm-banner--error{background:var(--danger-soft);color:var(--danger)}\n.sm-banner--ok{background:var(--status-published-bg);color:var(--status-published-fg)}\n.sm-banner--warn{background:var(--warn-soft);color:var(--warn)}\n\n/* \u2500\u2500 editor \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-editor{flex:1;min-height:0;display:grid;grid-template-columns:1fr var(--inspector-w)}\n.sm-canvas{display:flex;flex-direction:column;background:var(--bg);min-width:0;min-height:0;overflow:hidden}\n.sm-canvas__meta{\n  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;flex:none;\n  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.04em;color:var(--text-muted);\n}\n.sm-canvas__scroll{flex:1;min-height:0;overflow:auto;padding:0 20px 20px}\n.sm-page{\n  position:relative;background:var(--page-bg);border-radius:var(--radius-md);\n  box-shadow:var(--shadow-page);min-height:100%;\n}\n.sm-inspector{\n  display:flex;flex-direction:column;min-height:0;overflow:hidden;\n  border-left:var(--border);background:var(--surface);\n}\n.sm-inspector__head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px 10px;flex:none}\n.sm-inspector__body{display:flex;flex-direction:column;gap:14px;padding:14px;overflow:auto}\n.sm-blockglyph{width:14px;height:10px;border:1.5px solid var(--text-muted);border-radius:var(--radius-xs);flex:none}\n.sm-blocktag{\n  position:absolute;top:0;left:0;background:var(--selection);color:#fff;\n  font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:700;\n  letter-spacing:var(--tracking-tag);text-transform:uppercase;padding:3px 7px;\n  border-radius:var(--radius-sm) 0 var(--radius-sm) 0;white-space:nowrap;\n}\n.sm-blocktoolbar{\n  display:flex;gap:2px;padding:2px;background:#15181F;border-radius:var(--radius-md);\n  box-shadow:var(--shadow-float);\n}\n.sm-plus{\n  width:24px;height:24px;border-radius:var(--radius-round);border:0;background:var(--selection);\n  color:#fff;display:grid;place-items:center;font-size:15px;line-height:1;cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,56,177,.35);padding:0;\n}\n.sm-plus:hover{background:var(--brand-500)}\n.sm-guide{height:1px;background:color-mix(in srgb,var(--selection) 35%,transparent)}\n.sm-tooltip{\n  background:#15181F;color:#EEF0F5;font-size:var(--text-sm);padding:4px 8px;\n  border-radius:var(--radius-sm);white-space:nowrap;\n}\n.sm-outline-row{\n  display:flex;align-items:center;justify-content:space-between;gap:4px;\n  height:var(--control-h);border-radius:var(--radius-md);padding:0 4px 0 10px;\n  color:var(--text);font-weight:500;background:transparent;\n  border:1px solid var(--line);\n}\n.sm-outline-row--clickable{cursor:pointer}\n.sm-outline-row--clickable:hover{background:var(--surface-inset)}\n/* Selected and locked rows are read by their fill, so they drop the hairline \u2014\n   border-color, not border, so every row keeps the same 28px box. */\n.sm-outline-row--selected,.sm-outline-row--selected:hover{\n  background:var(--nav-active-bg);color:var(--nav-active-fg);font-weight:600;border-color:transparent;\n}\n.sm-outline-row--empty{border:1px dashed var(--line-dashed);color:var(--text-muted);padding:0 10px}\n.sm-outline-row--locked{background:var(--surface-inset);color:var(--text-muted);padding:0 10px;border-color:transparent}\n.sm-outline-row__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}\n\n.sm-picker{\n  width:300px;background:var(--surface);border:var(--border);border-radius:var(--radius-md);\n  padding:6px;box-shadow:var(--shadow-pop);\n}\n.sm-picker__item{\n  display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:transparent;\n  border:0;border-radius:var(--radius-md);padding:8px 8px;cursor:pointer;color:var(--text);font:inherit;\n}\n.sm-picker__item:hover{background:var(--nav-active-bg)}\n.sm-picker__icon{\n  width:26px;height:26px;flex:none;border-radius:var(--radius-sm);background:var(--accent-soft);\n  color:var(--accent);display:grid;place-items:center;font-size:13px;\n}\n.sm-dashed{\n  border:1px dashed var(--line-dashed);border-radius:var(--radius-md);\n  display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-muted);\n}\n\n/* \u2500\u2500 media \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.sm-modal{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:24px}\n.sm-modal__panel{\n  max-width:100%;max-height:100%;display:flex;flex-direction:column;background:var(--surface);\n  border:var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-pop);overflow:hidden;\n}\n.sm-modal__head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:var(--border)}\n.sm-modal__body{padding:12px;overflow:auto;display:flex;flex-direction:column;gap:10px;min-height:0}\n.sm-modal__foot{display:flex;justify-content:flex-end;gap:8px;padding:10px 12px;border-top:var(--border)}\n.sm-picker-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}\n.sm-dropzone{\n  border:1px dashed var(--line-dashed);border-radius:var(--radius-md);color:var(--text-muted);\n  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;\n}\n.sm-dropzone--bar{padding:8px;font-size:var(--text-sm)}\n.sm-mediagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}\n.sm-mediacard{\n  display:flex;flex-direction:column;gap:4px;padding:6px;background:transparent;border:1.5px solid transparent;\n  border-radius:var(--radius-md);cursor:pointer;text-align:left;color:var(--text);font:inherit;min-width:0;\n}\n.sm-mediacard:hover{background:var(--control-hover)}\n.sm-mediacard[aria-pressed=\"true\"]{border-color:var(--selection);background:var(--accent-soft)}\n.sm-mediacard__thumb{display:block;aspect-ratio:4/3;border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-inset)}\n.sm-mediacard__img{width:100%;height:100%;object-fit:cover;display:block}\n.sm-thumb--chip{display:grid;place-items:center;width:100%;height:100%;font-weight:600;color:var(--text-muted);font-size:var(--text-sm)}\n.sm-mediacard__name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.sm-mediacard__meta{font-size:var(--text-sm);color:var(--text-muted)}\n.sm-media{display:flex;flex-direction:column;gap:6px}\n.sm-media__thumb{position:relative;overflow:hidden;border-radius:var(--radius-md);background:var(--surface-inset)}\n.sm-media__thumb>img,.sm-media__thumb>video{position:absolute;max-width:none;display:block}\n.sm-media__alt{font-size:var(--text-sm);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.sm-media__actions{display:flex;gap:6px}\n.sm-media__chip{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--surface-inset);border-radius:var(--radius-md)}\n.sm-crop{display:grid;grid-template-columns:1fr 240px;gap:14px;min-height:0}\n.sm-crop__stage{position:relative;user-select:none;touch-action:none;background:var(--surface-inset);border-radius:var(--radius-md);overflow:hidden}\n.sm-crop__stage>img{display:block;width:100%;height:auto;pointer-events:none}\n.sm-crop__shade{position:absolute;inset:0;background:rgba(0,0,0,.45);pointer-events:none}\n.sm-crop__rect{position:absolute;outline:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.4);cursor:move;background:transparent}\n.sm-crop__handle{position:absolute;width:12px;height:12px;background:#fff;border:1px solid rgba(0,0,0,.4);border-radius:2px}\n.sm-crop__handle--nw{left:-6px;top:-6px;cursor:nwse-resize}.sm-crop__handle--ne{right:-6px;top:-6px;cursor:nesw-resize}\n.sm-crop__handle--sw{left:-6px;bottom:-6px;cursor:nesw-resize}.sm-crop__handle--se{right:-6px;bottom:-6px;cursor:nwse-resize}\n.sm-crop__hotspot{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:2px solid #fff;background:rgba(0,56,177,.55);cursor:grab;box-shadow:0 0 0 1px rgba(0,0,0,.4)}\n.sm-crop__side{display:flex;flex-direction:column;gap:10px}\n.sm-crop__preview{position:relative;overflow:hidden;border-radius:var(--radius-md);background:var(--surface-inset)}\n.sm-crop__preview>img{position:absolute;max-width:none;display:block}\n.sm-mediascreen{display:grid;grid-template-columns:1fr 300px;flex:1;min-height:0}\n.sm-mediascreen__grid{padding:12px;overflow:auto}\n.sm-mediascreen__inspector{border-left:var(--border);padding:14px;overflow:auto;display:flex;flex-direction:column;gap:10px}\n.sm-facts{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:var(--text-sm);color:var(--text-muted)}\n.sm-usage{display:flex;flex-direction:column;gap:4px}\n";
+export declare const ADMIN_CSS: string;
 /** Where the theme toggle's choice is remembered, browser-side only. */
 export declare const THEME_KEY = "smoodly-theme";
+/** TEMPORARY, see the technical block: which look the developer is comparing. */
+export declare const LOOK_KEY = "smoodly-look";
 /** One <style> element and the theme boot, rendered once by AdminLayout. */
 export declare function AdminStyles(): import("react").JSX.Element;