smoodly 0.0.10 → 0.0.11

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

@@ -1,4 +1,4 @@
-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:200px; --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-nav{\n  display:flex;flex-direction:column;gap:24px;padding:16px 12px;\n  border-right:var(--border);background:var(--surface);min-width:0;overflow:auto;\n}\n.sm-nav__logo{height:18px;width:auto;align-self:flex-start;filter:var(--logo-filter);flex:none}\n.sm-nav>.sm-nav__logo{margin-left:10px}\n.sm-nav__list{display:flex;flex-direction:column;gap:1px}\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.sm-nav-item[aria-current=\"page\"]{background:var(--nav-active-bg);color:var(--nav-active-fg);font-weight:600}\n.sm-nav-item[aria-current=\"page\"]:hover{background:var(--nav-active-bg);color:var(--nav-active-fg)}\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-nav-item[aria-disabled=\"true\"]{cursor:default}\n.sm-nav-item[aria-disabled=\"true\"]:hover{background:transparent}\n.sm-nav__foot{margin-top:auto;display:flex;flex-direction:column;gap:2px}\n.sm-nav__user{display:flex;align-items:center;gap:10px;padding:6px 10px;min-width:0}\n.sm-nav-item--icon{display:flex;align-items:center;gap:8px}\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-avatar{\n  width:24px;height:24px;flex:none;border-radius:var(--radius-round);\n  background:var(--accent-soft);color:var(--accent);\n  display:grid;place-items:center;font-size:var(--text-sm);font-weight:600;\n}\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";
+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";
 /** Where the theme toggle's choice is remembered, browser-side only. */
 export declare const THEME_KEY = "smoodly-theme";
 /** One <style> element and the theme boot, rendered once by AdminLayout. */

package/dist/admin/ui/theme.js

@@ -74,7 +74,7 @@ const SCALE = `
 
   --radius-xs:1px; --radius-sm:3px; --radius-md:4px; --radius-round:999px;
   --control-h:28px; --control-h-lg:36px; --row-h:38px; --topbar-h:48px;
-  --nav-w:200px; --inspector-w:380px;
+  --nav-w:72px; --inspector-w:380px;
   --border:1px solid var(--line);
   --outline-selection:1.5px solid var(--selection);
 `;
@@ -113,13 +113,61 @@ body:has(.sm-admin){margin:0}
 /* ── shell ─────────────────────────────────────────────────────────── */
 .sm-shell{display:grid;grid-template-columns:var(--nav-w) 1fr;height:100vh;height:100dvh;overflow:hidden}
 .sm-shell>.sm-main{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
-.sm-nav{
-  display:flex;flex-direction:column;gap:24px;padding:16px 12px;
-  border-right:var(--border);background:var(--surface);min-width:0;overflow:auto;
-}
-.sm-nav__logo{height:18px;width:auto;align-self:flex-start;filter:var(--logo-filter);flex:none}
-.sm-nav>.sm-nav__logo{margin-left:10px}
-.sm-nav__list{display:flex;flex-direction:column;gap:1px}
+.sm-wordmark{height:18px;width:auto;filter:var(--logo-filter);flex:none}
+/* The design system's IconRail (components/navigation/IconRail.html),
+   ported as-is: a 72px rail, 18px Lucide icons over a 10px label, a
+   40×32 active tile, the app icon on top and the avatar at the bottom. */
+.sm-rail{
+  width:var(--nav-w);height:100%;display:flex;flex-direction:column;align-items:center;gap:14px;
+  padding:14px 6px 12px;background:var(--surface);border-right:var(--border);color:var(--text);
+  font:500 10px/1 var(--font-sans);position:relative;
+}
+.sm-rail__logo{width:28px;height:28px;display:block;flex:none}
+.sm-rail__list{display:flex;flex-direction:column;gap:6px;width:100%;margin:0;padding:0;list-style:none}
+.sm-rail__item{position:relative}
+.sm-rail__btn{
+  appearance:none;background:none;border:0;margin:0;padding:2px 0;width:100%;display:flex;flex-direction:column;
+  align-items:center;gap:5px;color:inherit;font:inherit;cursor:pointer;border-radius:var(--radius-md);text-decoration:none;
+}
+.sm-rail__btn:hover{color:inherit}
+.sm-rail__btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;box-shadow:none}
+.sm-rail__tile{position:relative;width:40px;height:32px;border-radius:var(--radius-md);display:grid;place-items:center;transition:background .12s}
+.sm-rail__btn:hover .sm-rail__tile{background:var(--surface-inset)}
+.sm-rail__btn[aria-current="page"],.sm-rail__btn[aria-expanded="true"]{color:var(--nav-active-fg);font-weight:600}
+.sm-rail__btn[aria-current="page"]:hover,.sm-rail__btn[aria-expanded="true"]:hover{color:var(--nav-active-fg)}
+.sm-rail__btn[aria-current="page"] .sm-rail__tile,.sm-rail__btn[aria-expanded="true"] .sm-rail__tile{background:var(--nav-active-bg)}
+.sm-rail__tile svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
+.sm-rail__chev{position:absolute;right:3px;bottom:2px;width:8px;height:8px}
+.sm-rail__chev svg{width:8px;height:8px;stroke-width:3}
+.sm-rail__label{letter-spacing:.01em;white-space:nowrap}
+/* Not greyed: the reference renders every inactive item at --text and marks
+   the unavailable ones only by being inert (no pointer, no hover). */
+.sm-rail__btn[aria-disabled="true"]{cursor:default}
+.sm-rail__btn[aria-disabled="true"]:hover .sm-rail__tile{background:transparent}
+.sm-rail__foot{margin-top:auto;display:flex;flex-direction:column;align-items:center}
+.sm-rail__user{
+  width:26px;height:26px;border-radius:var(--radius-round);background:var(--accent-soft);color:var(--accent);
+  display:grid;place-items:center;font-size:var(--text-sm);font-weight:600;border:0;cursor:pointer;padding:0;
+}
+.sm-rail__user:focus-visible{outline:2px solid var(--accent);outline-offset:1px;box-shadow:none}
+/* Flyout: 6px right of the rail, aligned with its item (the user menu aligns to the bottom). */
+.sm-rail__menu{
+  position:absolute;left:calc(100% + 6px);top:0;z-index:20;width:168px;padding:6px;margin:0;list-style:none;
+  background:var(--surface);border:var(--border);border-radius:var(--radius-md);box-shadow:0 4px 20px rgba(0,0,0,.14);
+  display:none;flex-direction:column;gap:1px;font-size:var(--text-md);font-weight:500;color:var(--text);
+}
+.sm-rail__menu[data-open="true"]{display:flex}
+.sm-rail__menu--up{top:auto;bottom:0}
+.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}
+.sm-rail__menu-item{
+  appearance:none;background:none;border:0;width:100%;display:flex;align-items:center;justify-content:space-between;
+  padding:6px 8px;border-radius:var(--radius-sm);color:inherit;font:inherit;cursor:pointer;text-align:left;text-decoration:none;
+}
+.sm-rail__menu-item:hover,.sm-rail__menu-item:focus-visible{background:var(--surface-inset);color:inherit;outline:0;box-shadow:none}
+.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}
+.sm-when-light{display:var(--when-light);align-items:center;gap:8px}
+.sm-when-dark{display:var(--when-dark);align-items:center;gap:8px}
+/* .sm-nav-item survives as the inspector's link style (EditorView). */
 .sm-nav-item{
   display:block;padding:6px 10px;border-radius:var(--radius-md);line-height:1.3;
   color:var(--text);font-weight:500;text-decoration:none;cursor:pointer;
@@ -127,22 +175,6 @@ body:has(.sm-admin){margin:0}
   overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 }
 .sm-nav-item:hover{background:var(--surface-inset);color:var(--text)}
-.sm-nav-item[aria-current="page"]{background:var(--nav-active-bg);color:var(--nav-active-fg);font-weight:600}
-.sm-nav-item[aria-current="page"]:hover{background:var(--nav-active-bg);color:var(--nav-active-fg)}
-/* Not greyed: the reference renders every inactive item at --text and marks
-   the unavailable ones only by being inert (no pointer, no hover). */
-.sm-nav-item[aria-disabled="true"]{cursor:default}
-.sm-nav-item[aria-disabled="true"]:hover{background:transparent}
-.sm-nav__foot{margin-top:auto;display:flex;flex-direction:column;gap:2px}
-.sm-nav__user{display:flex;align-items:center;gap:10px;padding:6px 10px;min-width:0}
-.sm-nav-item--icon{display:flex;align-items:center;gap:8px}
-.sm-when-light{display:var(--when-light);align-items:center;gap:8px}
-.sm-when-dark{display:var(--when-dark);align-items:center;gap:8px}
-.sm-avatar{
-  width:24px;height:24px;flex:none;border-radius:var(--radius-round);
-  background:var(--accent-soft);color:var(--accent);
-  display:grid;place-items:center;font-size:var(--text-sm);font-weight:600;
-}
 
 /* ── top bar ───────────────────────────────────────────────────────── */
 .sm-topbar{
@@ -419,6 +451,57 @@ body:has(.sm-admin){margin:0}
   border:1px dashed var(--line-dashed);border-radius:var(--radius-md);
   display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-muted);
 }
+
+/* ── media ─────────────────────────────────────────────────────────── */
+.sm-modal{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:24px}
+.sm-modal__panel{
+  max-width:100%;max-height:100%;display:flex;flex-direction:column;background:var(--surface);
+  border:var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-pop);overflow:hidden;
+}
+.sm-modal__head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:var(--border)}
+.sm-modal__body{padding:12px;overflow:auto;display:flex;flex-direction:column;gap:10px;min-height:0}
+.sm-modal__foot{display:flex;justify-content:flex-end;gap:8px;padding:10px 12px;border-top:var(--border)}
+.sm-picker-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.sm-dropzone{
+  border:1px dashed var(--line-dashed);border-radius:var(--radius-md);color:var(--text-muted);
+  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;
+}
+.sm-dropzone--bar{padding:8px;font-size:var(--text-sm)}
+.sm-mediagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
+.sm-mediacard{
+  display:flex;flex-direction:column;gap:4px;padding:6px;background:transparent;border:1.5px solid transparent;
+  border-radius:var(--radius-md);cursor:pointer;text-align:left;color:var(--text);font:inherit;min-width:0;
+}
+.sm-mediacard:hover{background:var(--control-hover)}
+.sm-mediacard[aria-pressed="true"]{border-color:var(--selection);background:var(--accent-soft)}
+.sm-mediacard__thumb{display:block;aspect-ratio:4/3;border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-inset)}
+.sm-mediacard__img{width:100%;height:100%;object-fit:cover;display:block}
+.sm-thumb--chip{display:grid;place-items:center;width:100%;height:100%;font-weight:600;color:var(--text-muted);font-size:var(--text-sm)}
+.sm-mediacard__name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sm-mediacard__meta{font-size:var(--text-sm);color:var(--text-muted)}
+.sm-media{display:flex;flex-direction:column;gap:6px}
+.sm-media__thumb{position:relative;overflow:hidden;border-radius:var(--radius-md);background:var(--surface-inset)}
+.sm-media__thumb>img,.sm-media__thumb>video{position:absolute;max-width:none;display:block}
+.sm-media__alt{font-size:var(--text-sm);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sm-media__actions{display:flex;gap:6px}
+.sm-media__chip{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--surface-inset);border-radius:var(--radius-md)}
+.sm-crop{display:grid;grid-template-columns:1fr 240px;gap:14px;min-height:0}
+.sm-crop__stage{position:relative;user-select:none;touch-action:none;background:var(--surface-inset);border-radius:var(--radius-md);overflow:hidden}
+.sm-crop__stage>img{display:block;width:100%;height:auto;pointer-events:none}
+.sm-crop__shade{position:absolute;inset:0;background:rgba(0,0,0,.45);pointer-events:none}
+.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}
+.sm-crop__handle{position:absolute;width:12px;height:12px;background:#fff;border:1px solid rgba(0,0,0,.4);border-radius:2px}
+.sm-crop__handle--nw{left:-6px;top:-6px;cursor:nwse-resize}.sm-crop__handle--ne{right:-6px;top:-6px;cursor:nesw-resize}
+.sm-crop__handle--sw{left:-6px;bottom:-6px;cursor:nesw-resize}.sm-crop__handle--se{right:-6px;bottom:-6px;cursor:nwse-resize}
+.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)}
+.sm-crop__side{display:flex;flex-direction:column;gap:10px}
+.sm-crop__preview{position:relative;overflow:hidden;border-radius:var(--radius-md);background:var(--surface-inset)}
+.sm-crop__preview>img{position:absolute;max-width:none;display:block}
+.sm-mediascreen{display:grid;grid-template-columns:1fr 300px;flex:1;min-height:0}
+.sm-mediascreen__grid{padding:12px;overflow:auto}
+.sm-mediascreen__inspector{border-left:var(--border);padding:14px;overflow:auto;display:flex;flex-direction:column;gap:10px}
+.sm-facts{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:var(--text-sm);color:var(--text-muted)}
+.sm-usage{display:flex;flex-direction:column;gap:4px}
 `;
 /** Where the theme toggle's choice is remembered, browser-side only. */
 export const THEME_KEY = "smoodly-theme";

package/dist/admin/validate.js

@@ -21,6 +21,12 @@ function validateValue(path, value, d, errors) {
             errors.push({ field: path, message: "Required." });
         return;
     }
+    if (d.type === "image" || d.type === "video" || d.type === "file") {
+        if (typeof value !== "object" || Array.isArray(value) || typeof value.asset !== "string") {
+            errors.push({ field: path, message: "Must be an uploaded file." });
+        }
+        return;
+    }
     if (d.type === "list") {
         if (!Array.isArray(value)) {
             errors.push({ field: path, message: "Must be a list." });

package/dist/asset-store.d.ts

@@ -0,0 +1,86 @@
+import type { AssetKind, AssetMeta, AssetRecord } from "./media.ts";
+import { MemoryRefIndex } from "./ref-index.ts";
+export type UploadTicket = {
+    id: string;
+    uploadUrl: string;
+    token: string;
+};
+export type FinishInput = {
+    width?: number;
+    height?: number;
+    duration?: number;
+    posterId?: string;
+};
+export type AssetQuery = {
+    kind?: AssetKind;
+    search?: string;
+    cursor?: string;
+    limit?: number;
+};
+export type AssetPage = {
+    items: AssetRecord[];
+    nextCursor: string | null;
+};
+export type BeginUploadInput = {
+    filename: string;
+    mime: string;
+    size: number;
+    createdBy?: string;
+};
+export type CreateAssetInput = BeginUploadInput & AssetMeta & {
+    bytes: Uint8Array;
+    width?: number;
+    height?: number;
+    duration?: number;
+    posterId?: string;
+};
+export declare const PAGE_SIZE = 60;
+export interface AssetStore {
+    /** A pending row and a signed upload URL for `<space>/<id>.<ext>`. */
+    beginUpload(input: BeginUploadInput): Promise<UploadTicket>;
+    /** Marks the row ready with what the browser measured. */
+    finishUpload(id: string, dims: FinishInput): Promise<AssetRecord>;
+    /** Server-side: bytes in, a ready row out (the seed, scripts). */
+    create(input: CreateAssetInput): Promise<AssetRecord>;
+    /** Any status — the widget shows a pending row as "uploading". */
+    get(id: string): Promise<AssetRecord | null>;
+    /** Ready rows only, keyed by id — the resolver's fetcher. */
+    getMany(ids: string[]): Promise<Record<string, AssetRecord>>;
+    /** Ready rows, newest first, `PAGE_SIZE` per page; `cursor` is the last row's createdAt. */
+    list(query?: AssetQuery): Promise<AssetPage>;
+    update(id: string, meta: AssetMeta): Promise<AssetRecord>;
+    /** Refused while any refs row points at the asset; a video's poster goes with it. Idempotent. */
+    delete(id: string): Promise<void>;
+}
+export declare const assetErrors: {
+    notFound: (id: string) => Error;
+    notPending: (id: string) => Error;
+    referenced: (id: string, n: number) => Error;
+};
+export declare const kindOf: (mime: string) => AssetKind;
+/** The object's extension: the filename's when it has a sane one, else the mime's, else "bin". */
+export declare function extensionFor(filename: string, mime: string): string;
+export declare const objectPath: (space: string, id: string, filename: string, mime: string) => string;
+/** The public URL; an SVG carries ?download= so the bucket origin never renders it. */
+export declare const withDownload: (url: string, mime: string) => string;
+export declare class MemoryAssetStore implements AssetStore {
+    private refs;
+    private rows;
+    private objects;
+    private baseUrl;
+    private space;
+    constructor(refs?: MemoryRefIndex, options?: {
+        baseUrl?: string;
+        space?: string;
+    });
+    private url;
+    private row;
+    beginUpload(input: BeginUploadInput): Promise<UploadTicket>;
+    finishUpload(id: string, dims: FinishInput): Promise<AssetRecord>;
+    create(input: CreateAssetInput): Promise<AssetRecord>;
+    get(id: string): Promise<AssetRecord | null>;
+    getMany(ids: string[]): Promise<Record<string, AssetRecord>>;
+    list(query?: AssetQuery): Promise<AssetPage>;
+    update(id: string, meta: AssetMeta): Promise<AssetRecord>;
+    delete(id: string): Promise<void>;
+}

package/dist/asset-store.js

@@ -0,0 +1,141 @@
+import { MemoryRefIndex } from "./ref-index.js";
+import { DEFAULT_SPACE_ID } from "./sql-space.js";
+import { ASSET_COLLECTION } from "./media.js";
+export const PAGE_SIZE = 60;
+export const assetErrors = {
+    notFound: (id) => new Error(`smoodly: no asset "${id}".`),
+    notPending: (id) => new Error(`smoodly: asset "${id}" is not pending.`),
+    referenced: (id, n) => new Error(`smoodly: "asset/${id}" is referenced by ${n} document(s) — remove those references first.`),
+};
+export const kindOf = (mime) => mime.startsWith("image/") ? "image" : mime.startsWith("video/") ? "video" : "file";
+const BY_MIME = {
+    "image/jpeg": "jpg", "image/png": "png", "image/webp": "webp", "image/avif": "avif", "image/gif": "gif",
+    "image/svg+xml": "svg", "video/mp4": "mp4", "video/webm": "webm", "application/pdf": "pdf",
+};
+/** The object's extension: the filename's when it has a sane one, else the mime's, else "bin". */
+export function extensionFor(filename, mime) {
+    const m = /\.([a-z0-9]{1,8})$/i.exec(filename);
+    if (m)
+        return m[1].toLowerCase();
+    return BY_MIME[mime] ?? "bin";
+}
+export const objectPath = (space, id, filename, mime) => `${space}/${id}.${extensionFor(filename, mime)}`;
+/** The public URL; an SVG carries ?download= so the bucket origin never renders it. */
+export const withDownload = (url, mime) => (mime === "image/svg+xml" ? `${url}?download=` : url);
+const lower = (s) => (s ?? "").toLowerCase();
+export class MemoryAssetStore {
+    constructor(refs = new MemoryRefIndex(), options = {}) {
+        this.refs = refs;
+        this.rows = new Map();
+        this.objects = new Map();
+        this.baseUrl = options.baseUrl ?? "http://localhost/media";
+        this.space = options.space ?? DEFAULT_SPACE_ID;
+    }
+    url(path, mime) {
+        return withDownload(`${this.baseUrl}/${path}`, mime);
+    }
+    row(input, status) {
+        const id = crypto.randomUUID();
+        const path = objectPath(this.space, id, input.filename, input.mime);
+        const now = Date.now();
+        return {
+            id, kind: kindOf(input.mime), status, path, mime: input.mime, size: input.size,
+            width: null, height: null, duration: null, posterId: null, filename: input.filename,
+            title: null, alt: null, caption: null, credit: null, url: this.url(path, input.mime), createdAt: now, updatedAt: now,
+        };
+    }
+    async beginUpload(input) {
+        const row = this.row(input, "pending");
+        this.rows.set(row.id, row);
+        return { id: row.id, uploadUrl: `memory://upload/${row.path}`, token: "memory" };
+    }
+    async finishUpload(id, dims) {
+        const row = this.rows.get(id);
+        if (!row)
+            throw assetErrors.notFound(id);
+        if (row.status !== "pending")
+            throw assetErrors.notPending(id);
+        const next = {
+            ...row, status: "ready", width: dims.width ?? null, height: dims.height ?? null,
+            duration: dims.duration ?? null, posterId: dims.posterId ?? null, updatedAt: Date.now(),
+        };
+        this.rows.set(id, next);
+        return structuredClone(next);
+    }
+    async create(input) {
+        const row = {
+            ...this.row(input, "ready"),
+            width: input.width ?? null, height: input.height ?? null, duration: input.duration ?? null,
+            posterId: input.posterId ?? null, title: input.title ?? null, alt: input.alt ?? null,
+            caption: input.caption ?? null, credit: input.credit ?? null,
+        };
+        // Distinct createdAt per row keeps "newest first" and the cursor honest
+        // when two creates land in one millisecond.
+        const last = [...this.rows.values()].reduce((m, r) => Math.max(m, r.createdAt), 0);
+        if (row.createdAt <= last) {
+            row.createdAt = last + 1;
+            row.updatedAt = row.createdAt;
+        }
+        this.rows.set(row.id, row);
+        this.objects.set(row.path, input.bytes);
+        return structuredClone(row);
+    }
+    async get(id) {
+        const row = this.rows.get(id);
+        return row ? structuredClone(row) : null;
+    }
+    async getMany(ids) {
+        const out = {};
+        for (const id of ids) {
+            const row = this.rows.get(id);
+            if (row?.status === "ready")
+                out[id] = structuredClone(row);
+        }
+        return out;
+    }
+    async list(query = {}) {
+        const limit = query.limit ?? PAGE_SIZE;
+        const q = lower(query.search);
+        const cursor = query.cursor ? Number(query.cursor) : Infinity;
+        const all = [...this.rows.values()]
+            .filter((r) => r.status === "ready")
+            .filter((r) => !query.kind || r.kind === query.kind)
+            .filter((r) => !q || lower(r.title).includes(q) || lower(r.filename).includes(q) || lower(r.alt).includes(q))
+            .filter((r) => r.createdAt < cursor)
+            .sort((a, b) => b.createdAt - a.createdAt);
+        const items = all.slice(0, limit).map((r) => structuredClone(r));
+        return { items, nextCursor: all.length > limit ? String(items[items.length - 1].createdAt) : null };
+    }
+    async update(id, meta) {
+        const row = this.rows.get(id);
+        if (!row)
+            throw assetErrors.notFound(id);
+        const next = {
+            ...row,
+            ...(meta.title !== undefined ? { title: meta.title } : {}),
+            ...(meta.alt !== undefined ? { alt: meta.alt } : {}),
+            ...(meta.caption !== undefined ? { caption: meta.caption } : {}),
+            ...(meta.credit !== undefined ? { credit: meta.credit } : {}),
+            updatedAt: Math.max(Date.now(), row.updatedAt),
+        };
+        this.rows.set(id, next);
+        return structuredClone(next);
+    }
+    async delete(id) {
+        const row = this.rows.get(id);
+        if (!row)
+            return;
+        const usage = this.refs.to(ASSET_COLLECTION, id);
+        if (usage.length > 0)
+            throw assetErrors.referenced(id, usage.length);
+        if (row.posterId) {
+            const poster = this.rows.get(row.posterId);
+            if (poster) {
+                this.rows.delete(poster.id);
+                this.objects.delete(poster.path);
+            }
+        }
+        this.rows.delete(id);
+        this.objects.delete(row.path);
+    }
+}

package/dist/collections.js

@@ -5,6 +5,8 @@ export const collectionDepth = (c) => c.tree?.depth ?? 1;
 export function collection(input) {
     if (!input?.name)
         throw new Error("smoodly: a collection requires a name.");
+    if (["shared", "asset", "media"].includes(input.name))
+        throw new Error(`smoodly: "${input.name}" is a reserved name.`);
     if (input.tree !== undefined && (!Number.isInteger(input.tree.depth) || input.tree.depth < 1)) {
         throw new Error(`smoodly: collection "${input.name}" declares an invalid tree depth.`);
     }

package/dist/config.d.ts

@@ -50,6 +50,11 @@ export type SmoodlyConfig = {
     database?: {
         provider: string;
     };
+    /** Upload limits (spec 2026-09-08 media §10): bytes per file and the accepted mime types. */
+    media?: {
+        maxSize?: number;
+        accept?: string[];
+    };
 };
 export type ResolvedConfig = SmoodlyConfig & {
     homePageSlug: string;
@@ -57,6 +62,13 @@ export type ResolvedConfig = SmoodlyConfig & {
     pageDepth: number;
     /** The section's styles with the config standard set merged in (section keys win). */
     resolvedStyles(sectionName: string): Record<string, Descriptor>;
+    media: {
+        maxSize: number;
+        accept: string[];
+    };
 };
+/** `shared`: the placement node type and an admin route; `asset`: the refs
+ *  target of every media edge; `media`: the admin's Media screen route. */
+export declare const RESERVED_NAMES: readonly string[];
 export declare function defineConfig(config: SmoodlyConfig): ResolvedConfig;
 export {};