smoodly 0.0.4 → 0.0.6

package/dist/admin/ui/theme.js

@@ -0,0 +1,396 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// The design system, as one injected stylesheet.
+//
+// Smoodly ships as a library into someone else's Next app, so the admin
+// can't rely on the host importing CSS: `AdminLayout` renders <AdminStyles/>
+// once and every admin surface styles itself from these tokens. Everything
+// is scoped under `.sm-admin` — never `:root` — so the host's own custom
+// properties and class names can't collide with ours.
+//
+// Values come from design_handoff_smoodly_cms/tokens/*.css and are final:
+// don't round them to a grid. Hover/focus/disabled live here rather than in
+// inline styles, which is the whole reason for the stylesheet.
+const TOKENS_LIGHT = `
+  --brand-600:#0038B1; --brand-500:#2554D6; --brand-300:#6E96FF;
+  --brand-200:#A9C0FF; --brand-100:#DCE4F9; --brand-50:#E3EAFA;
+  --gray-0:#FFFFFF; --gray-50:#F1F2F6; --gray-100:#E1E4EC; --gray-300:#C9D0E2;
+  --gray-500:#8B93A7; --gray-600:#6B7386; --gray-700:#4A5165; --gray-900:#0F1420;
+  --green-700:#1F7A46; --green-50:#E3F3EA; --green-300:#6FD39A; --green-500:#2E9E5B;
+  --amber-700:#8A5A00; --amber-50:#FBF1DC; --amber-300:#E8B85A;
+  --red-700:#B42318; --red-50:#FDECEC; --red-300:#F5A5A0;
+
+  --bg:var(--gray-50); --surface:var(--gray-0); --surface-inset:var(--gray-50);
+  --input-bg:var(--gray-0); --line:var(--gray-100); --line-dashed:var(--gray-300);
+  --text:var(--gray-900); --text-muted:var(--gray-600); --text-subtle:var(--gray-500);
+  --accent:var(--brand-600); --on-accent:#FFFFFF; --accent-soft:var(--brand-50);
+  --selection:var(--brand-600); --nav-active-bg:var(--brand-100); --nav-active-fg:var(--brand-600);
+  --hover:rgba(15,20,32,.045); --press:rgba(15,20,32,.08);
+  --control-hover:var(--gray-100);
+
+  --status-published-fg:var(--green-700); --status-published-bg:var(--green-50);
+  --status-draft-fg:var(--amber-700); --status-draft-bg:var(--amber-50);
+  --status-scheduled-fg:var(--accent); --status-scheduled-bg:var(--accent-soft);
+  --status-saved-dot:var(--green-500);
+  --warn:var(--amber-700); --warn-soft:var(--amber-50);
+  --danger:var(--red-700); --danger-soft:var(--red-50);
+
+  --page-bg:#FFFFFF; --page-text:var(--gray-900);
+  --shadow-page:0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
+  --shadow-float:0 2px 8px rgba(0,0,0,.25);
+  --shadow-seg:0 1px 2px rgba(0,0,0,.08);
+  --focus-ring:0 0 0 3px var(--accent-soft);
+  --shadow-pop:0 8px 32px rgba(0,0,0,.18);
+  --logo-filter:none;
+
+  /* Which half of the theme toggle is visible. A token, so the icon can never
+     disagree with the colors — both follow the one cascade below. */
+  --when-light:inline-flex; --when-dark:none;
+`;
+const TOKENS_DARK = `
+  --bg:#0D0F14; --surface:#15181F; --surface-inset:#0D0F14; --input-bg:#1B1F28;
+  --line:#2A2F3B; --line-dashed:#2A2F3B;
+  --text:#EEF0F5; --text-muted:#8C94A8; --text-subtle:#6B7386;
+  --accent:var(--brand-300); --on-accent:#06122F; --accent-soft:rgba(110,150,255,.16);
+  --nav-active-bg:rgba(110,150,255,.14); --nav-active-fg:var(--brand-200);
+  --hover:rgba(238,240,245,.05); --press:rgba(238,240,245,.09);
+  --control-hover:var(--input-bg);
+
+  --status-published-fg:var(--green-300); --status-published-bg:rgba(111,211,154,.14);
+  --status-draft-fg:var(--amber-300); --status-draft-bg:rgba(232,184,90,.14);
+  --warn:var(--amber-300); --warn-soft:rgba(232,184,90,.14);
+  --danger:var(--red-300); --danger-soft:rgba(244,102,92,.14);
+
+  --shadow-page:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
+  --shadow-pop:0 8px 32px rgba(0,0,0,.5);
+  --logo-filter:brightness(0) invert(1);
+  --when-light:none; --when-dark:inline-flex;
+`;
+const SCALE = `
+  --font-sans:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
+  --font-mono:ui-monospace,Menlo,Consolas,monospace;
+  --text-2xs:9px; --text-xs:10px; --text-sm:11px; --text-md:12px;
+  --text-lg:13px; --text-xl:14px; --text-2xl:15px; --text-3xl:20px; --text-4xl:30px;
+  --tracking-tight:-0.02em; --tracking-label:0.1em; --tracking-tag:0.08em;
+
+  --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:300px;
+  --border:1px solid var(--line);
+  --outline-selection:1.5px solid var(--selection);
+`;
+export const ADMIN_CSS = `
+@import url("https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap");
+
+.sm-admin{${SCALE}${TOKENS_LIGHT}}
+html[data-theme="dark"] .sm-admin,.sm-admin[data-theme="dark"]{${TOKENS_DARK}}
+@media (prefers-color-scheme:dark){
+  html:not([data-theme="light"]) .sm-admin:not([data-theme="light"]){${TOKENS_DARK}}
+}
+/* Last, and the same specificity as the host-attribute rule: an explicit
+   choice from the theme toggle wins over a dark <html> and over the OS. */
+.sm-admin[data-theme="light"]{${TOKENS_LIGHT}}
+
+/* The admin owns the viewport; a host <body> margin would push it into a
+   page scrollbar. Scoped by :has, so only a page holding the admin is touched. */
+body:has(.sm-admin){margin:0}
+.sm-admin,.sm-admin *,.sm-admin *::before,.sm-admin *::after{box-sizing:border-box}
+.sm-admin{
+  font-family:var(--font-sans);font-size:var(--text-md);line-height:1.4;
+  color:var(--text);background:var(--surface);
+  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
+}
+.sm-admin h1,.sm-admin h2,.sm-admin h3,.sm-admin p,.sm-admin ul{margin:0}
+/* :where() keeps this at zero specificity — a bare <a> is accent, but any
+   component class on it (.sm-nav-item, .sm-btn, .sm-back) decides its own
+   colour. Without this the element selector silently beat every one of them. */
+:where(.sm-admin a){color:var(--accent);text-decoration:none}
+:where(.sm-admin a:hover){color:var(--brand-500)}
+.sm-admin button,.sm-admin input,.sm-admin select,.sm-admin textarea{font-family:inherit}
+.sm-admin ::placeholder{color:var(--text-subtle)}
+.sm-admin ::selection{background:var(--accent-soft);color:var(--text)}
+.sm-mono{font-family:var(--font-mono)}
+
+/* ── 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-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;
+  background:transparent;border:0;width:100%;text-align:left;font-size:var(--text-md);
+  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{
+  height:var(--topbar-h);flex:none;display:flex;align-items:center;justify-content:space-between;
+  gap:16px;padding:0 16px;border-bottom:var(--border);background:var(--surface);
+}
+.sm-topbar__left{display:flex;align-items:center;gap:10px;min-width:0}
+.sm-topbar__right{display:flex;align-items:center;gap:8px;flex:none}
+.sm-crumbs{display:flex;align-items:center;gap:8px;color:var(--text-muted);min-width:0}
+.sm-crumbs__sep{opacity:.5}
+.sm-crumbs__here{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sm-back{border:0;background:transparent;padding:0;color:var(--text);font:inherit;cursor:pointer;line-height:1}
+.sm-back:hover{color:var(--accent)}
+.sm-title{font-size:var(--text-xl);font-weight:600}
+.sm-count{color:var(--text-muted)}
+
+/* ── buttons ───────────────────────────────────────────────────────── */
+.sm-btn{
+  display:inline-flex;align-items:center;justify-content:center;gap:6px;
+  height:var(--control-h);padding:0 12px;border-radius:var(--radius-md);border:0;
+  font-size:var(--text-md);font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;
+  text-decoration:none;
+}
+.sm-btn--lg{height:var(--control-h-lg);padding:0 16px}
+.sm-btn--primary{background:var(--accent);color:var(--on-accent);font-weight:600;padding:0 14px}
+.sm-btn--primary:hover{background:var(--brand-500);color:var(--on-accent)}
+.sm-btn--secondary{background:var(--surface-inset);color:var(--text)}
+.sm-btn--secondary:hover{background:var(--control-hover);color:var(--text)}
+.sm-btn--ghost{background:transparent;color:var(--accent);font-weight:600;padding:0 8px}
+.sm-btn--ghost:hover{background:var(--accent-soft);color:var(--accent)}
+.sm-btn--danger{background:var(--surface-inset);color:var(--danger)}
+.sm-btn--danger:hover{background:var(--danger-soft);color:var(--danger)}
+.sm-btn--ok{background:var(--status-published-bg);color:var(--status-published-fg);font-weight:600;padding:0 14px}
+.sm-btn:disabled,.sm-btn[aria-disabled="true"]{opacity:.5;cursor:default;pointer-events:none}
+.sm-btn:focus-visible,.sm-iconbtn:focus-visible,.sm-nav-item:focus-visible,
+.sm-tab:focus-visible,.sm-seg__opt:focus-visible,.sm-row:focus-visible{
+  outline:2px solid var(--accent);outline-offset:1px
+}
+
+.sm-iconbtn{
+  width:24px;height:24px;flex:none;display:grid;place-items:center;padding:0;
+  border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);
+  font-size:12px;line-height:1;cursor:pointer;
+}
+.sm-iconbtn:hover{background:var(--hover);color:var(--text)}
+.sm-iconbtn--inverse{color:#EEF0F5}
+.sm-iconbtn--inverse:hover{background:rgba(255,255,255,.14);color:#fff}
+.sm-iconbtn:disabled{opacity:.3;cursor:default}
+.sm-iconbtn:disabled:hover{background:transparent}
+
+/* ── fields ────────────────────────────────────────────────────────── */
+.sm-field{display:flex;flex-direction:column;gap:6px;min-width:0}
+.sm-field__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
+.sm-label{
+  font-size:var(--text-2xs);font-weight:600;letter-spacing:var(--tracking-label);
+  text-transform:uppercase;color:var(--text-muted);
+}
+.sm-counter,.sm-hint{font-size:var(--text-sm);color:var(--text-muted)}
+.sm-input,.sm-textarea,.sm-select{
+  width:100%;min-width:0;border:1.5px solid transparent;border-radius:var(--radius-md);
+  background:var(--surface-inset);color:var(--text);font-size:var(--text-md);
+  outline:0;box-shadow:none;
+}
+.sm-input,.sm-select{height:var(--control-h);padding:0 10px}
+.sm-textarea{padding:8px 10px;line-height:1.5;resize:vertical;min-height:60px}
+.sm-input--lg{height:var(--control-h-lg);font-size:var(--text-2xl);font-weight:600}
+.sm-input--mono{font-family:var(--font-mono);font-size:var(--text-sm)}
+.sm-input:hover,.sm-textarea:hover,.sm-select:hover{background:var(--control-hover)}
+.sm-input:focus,.sm-textarea:focus,.sm-select:focus,
+.sm-inputwrap:focus-within{
+  background:var(--input-bg);border-color:var(--selection);box-shadow:var(--focus-ring);
+}
+.sm-input:disabled,.sm-textarea:disabled,.sm-select:disabled{opacity:.6;cursor:default}
+.sm-select{
+  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:26px;font-weight:500;
+  background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),
+    linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);
+  background-position:calc(100% - 14px) 12px,calc(100% - 10px) 12px;
+  background-size:4px 4px,4px 4px;background-repeat:no-repeat;
+}
+.sm-inputwrap{
+  display:flex;align-items:center;gap:0;height:var(--control-h);padding:0 10px;
+  border:1.5px solid transparent;border-radius:var(--radius-md);background:var(--surface-inset);
+}
+.sm-inputwrap>.sm-input{height:auto;padding:0;background:transparent;border:0;box-shadow:none}
+.sm-inputwrap>.sm-input:hover,.sm-inputwrap>.sm-input:focus{background:transparent;box-shadow:none}
+.sm-prefix{color:var(--text-muted);font-family:var(--font-mono);font-size:var(--text-sm);flex:none}
+.sm-error{color:var(--danger);font-size:var(--text-sm)}
+
+/* ── data ──────────────────────────────────────────────────────────── */
+.sm-table{display:flex;flex-direction:column;padding:0 16px 16px}
+.sm-table__head,.sm-row{display:grid;gap:12px;align-items:center;padding:0 8px}
+.sm-table__head{
+  height:34px;border-bottom:var(--border);font-family:var(--font-mono);
+  font-size:var(--text-2xs);letter-spacing:var(--tracking-tag);color:var(--text-muted);
+  text-transform:uppercase;position:sticky;top:0;background:var(--surface);z-index:1;
+}
+.sm-table__body{display:flex;flex-direction:column;padding-top:4px}
+.sm-row{
+  height:var(--row-h);border-radius:var(--radius-md);background:transparent;
+  border:0;font:inherit;color:inherit;text-align:left;width:100%;
+}
+.sm-row--clickable{cursor:pointer}
+.sm-row--clickable:hover{background:var(--surface-inset)}
+.sm-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
+.sm-cell--muted{color:var(--text-muted)}
+.sm-cell--mono{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-muted)}
+.sm-cell--title{font-weight:500}
+.sm-empty{padding:28px 8px;color:var(--text-muted)}
+.sm-chevron{
+  width:12px;flex:none;border:0;background:none;padding:0;font:inherit;font-size:10px;
+  color:var(--text-muted);cursor:pointer;line-height:1;
+}
+.sm-chevron:hover{color:var(--text)}
+.sm-cell--tree{display:flex;align-items:center;gap:6px;font-weight:500}
+.sm-cell--tree.sm-cell--parent{font-weight:600}
+.sm-rowmenu{
+  border:0;background:none;padding:0 6px;font:inherit;color:var(--text-muted);cursor:pointer;
+  border-radius:var(--radius-md);line-height:1;height:24px;
+}
+.sm-rowmenu:hover{background:var(--surface-inset);color:var(--text)}
+
+.sm-badge{
+  display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--radius-md);
+  font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;white-space:nowrap;
+}
+.sm-savestate{
+  display:inline-flex;align-items:center;gap:6px;padding:0 6px;
+  font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
+}
+.sm-dot{width:5px;height:5px;border-radius:var(--radius-round);flex:none}
+
+/* ── navigation bits ───────────────────────────────────────────────── */
+.sm-tabs{display:flex;gap:18px;padding:0 14px;height:36px;align-items:stretch;border-bottom:var(--border);flex:none}
+.sm-tab{
+  display:flex;align-items:center;border:0;background:transparent;padding:0;font:inherit;
+  cursor:pointer;color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px;
+}
+.sm-tab:hover{color:var(--text)}
+.sm-tab[aria-selected="true"]{color:var(--accent);font-weight:600;border-bottom-color:var(--accent)}
+.sm-seg{display:flex;gap:2px;padding:2px;background:var(--surface-inset);border-radius:var(--radius-md)}
+.sm-seg--stretch{width:100%}
+.sm-seg--disabled{opacity:.6}
+.sm-seg__opt:disabled{cursor:default}
+.sm-seg__opt{
+  flex:1;padding:3px 10px;border:0;border-radius:var(--radius-sm);background:transparent;
+  color:var(--text-muted);font:inherit;cursor:pointer;white-space:nowrap;
+}
+.sm-seg__opt:hover{color:var(--text)}
+.sm-seg__opt[aria-pressed="true"]{background:var(--surface);color:var(--text);font-weight:600;box-shadow:var(--shadow-seg)}
+.sm-divider{height:1px;background:var(--line);flex:none}
+.sm-sectionlabel{display:flex;align-items:center;justify-content:space-between;gap:8px}
+.sm-sectionlabel--mono>.sm-label{
+  font-family:var(--font-mono);font-weight:400;letter-spacing:var(--tracking-tag);
+}
+.sm-banner{
+  display:flex;gap:14px;align-items:flex-start;padding:10px 14px;border-radius:var(--radius-md);
+  font-size:var(--text-md);
+}
+.sm-banner--error{background:var(--danger-soft);color:var(--danger)}
+.sm-banner--ok{background:var(--status-published-bg);color:var(--status-published-fg)}
+.sm-banner--warn{background:var(--warn-soft);color:var(--warn)}
+
+/* ── editor ────────────────────────────────────────────────────────── */
+.sm-editor{flex:1;min-height:0;display:grid;grid-template-columns:1fr var(--inspector-w)}
+.sm-canvas{display:flex;flex-direction:column;background:var(--bg);min-width:0;min-height:0;overflow:hidden}
+.sm-canvas__meta{
+  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;flex:none;
+  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.04em;color:var(--text-muted);
+}
+.sm-canvas__scroll{flex:1;min-height:0;overflow:auto;padding:0 20px 20px}
+.sm-page{
+  position:relative;background:var(--page-bg);border-radius:var(--radius-md);
+  box-shadow:var(--shadow-page);min-height:100%;
+}
+.sm-inspector{
+  display:flex;flex-direction:column;min-height:0;overflow:hidden;
+  border-left:var(--border);background:var(--surface);
+}
+.sm-inspector__head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px 10px;flex:none}
+.sm-inspector__body{display:flex;flex-direction:column;gap:14px;padding:14px;overflow:auto}
+.sm-blockglyph{width:14px;height:10px;border:1.5px solid var(--text-muted);border-radius:var(--radius-xs);flex:none}
+.sm-blocktag{
+  position:absolute;top:0;left:0;background:var(--selection);color:#fff;
+  font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:700;
+  letter-spacing:var(--tracking-tag);text-transform:uppercase;padding:3px 7px;
+  border-radius:var(--radius-sm) 0 var(--radius-sm) 0;white-space:nowrap;
+}
+.sm-blocktoolbar{
+  display:flex;gap:2px;padding:2px;background:#15181F;border-radius:var(--radius-md);
+  box-shadow:var(--shadow-float);
+}
+.sm-plus{
+  width:24px;height:24px;border-radius:var(--radius-round);border:0;background:var(--selection);
+  color:#fff;display:grid;place-items:center;font-size:15px;line-height:1;cursor:pointer;
+  box-shadow:0 2px 6px rgba(0,56,177,.35);padding:0;
+}
+.sm-plus:hover{background:var(--brand-500)}
+.sm-guide{height:1px;background:color-mix(in srgb,var(--selection) 35%,transparent)}
+.sm-tooltip{
+  background:#15181F;color:#EEF0F5;font-size:var(--text-sm);padding:4px 8px;
+  border-radius:var(--radius-sm);white-space:nowrap;
+}
+.sm-outline-row{
+  display:flex;align-items:center;justify-content:space-between;gap:4px;
+  height:var(--control-h);border-radius:var(--radius-md);padding:0 4px 0 10px;
+  color:var(--text);font-weight:500;background:transparent;
+  border:1px solid var(--line);
+}
+.sm-outline-row--clickable{cursor:pointer}
+.sm-outline-row--clickable:hover{background:var(--surface-inset)}
+/* Selected and locked rows are read by their fill, so they drop the hairline —
+   border-color, not border, so every row keeps the same 28px box. */
+.sm-outline-row--selected,.sm-outline-row--selected:hover{
+  background:var(--nav-active-bg);color:var(--nav-active-fg);font-weight:600;border-color:transparent;
+}
+.sm-outline-row--empty{border:1px dashed var(--line-dashed);color:var(--text-muted);padding:0 10px}
+.sm-outline-row--locked{background:var(--surface-inset);color:var(--text-muted);padding:0 10px;border-color:transparent}
+.sm-outline-row__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
+
+.sm-picker{
+  width:300px;background:var(--surface);border:var(--border);border-radius:var(--radius-md);
+  padding:6px;box-shadow:var(--shadow-pop);
+}
+.sm-picker__item{
+  display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:transparent;
+  border:0;border-radius:var(--radius-md);padding:8px 8px;cursor:pointer;color:var(--text);font:inherit;
+}
+.sm-picker__item:hover{background:var(--nav-active-bg)}
+.sm-picker__icon{
+  width:26px;height:26px;flex:none;border-radius:var(--radius-sm);background:var(--accent-soft);
+  color:var(--accent);display:grid;place-items:center;font-size:13px;
+}
+.sm-dashed{
+  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);
+}
+`;
+/** Where the theme toggle's choice is remembered, browser-side only. */
+export const THEME_KEY = "smoodly-theme";
+/** Applies a remembered choice before first paint, so a dark-mode editor never
+ *  gets a white flash. It runs INSIDE the admin wrapper, so
+ *  `currentScript.parentElement` is that element — no id lookup, and the host
+ *  document's <html> is left alone. */
+const THEME_BOOT = `(function(){try{var e=document.currentScript.parentElement,` +
+    `t=localStorage.getItem(${JSON.stringify(THEME_KEY)});` +
+    `if(t==="dark"||t==="light")e.setAttribute("data-theme",t)}catch(e){}})()`;
+/** One <style> element and the theme boot, rendered once by AdminLayout. */
+export function AdminStyles() {
+    return (_jsxs(_Fragment, { children: [_jsx("style", { "data-smoodly-admin-styles": true, dangerouslySetInnerHTML: { __html: ADMIN_CSS } }), _jsx("script", { dangerouslySetInnerHTML: { __html: THEME_BOOT } })] }));
+}

package/dist/collections.d.ts

@@ -1,26 +1,47 @@
 import type { Descriptor } from "./fields.ts";
 import type { BuilderMap, NamespaceValues } from "./schema.ts";
+/** How a collection is ordered — in the admin list and in public reads
+ *  alike (spec 2026-09-05 §3). "manual" is the drag order (`sort`). */
+export type EntryOrder = "manual" | {
+    by: "createdAt" | "updatedAt" | (string & {});
+    direction: "asc" | "desc";
+};
+export declare const DEFAULT_ORDER: EntryOrder;
+export declare const BUILT_IN_ORDER_FIELDS: readonly ["createdAt", "updatedAt"];
 export type CollectionSchema<F extends BuilderMap = BuilderMap> = {
     kind: "collection";
     name: string;
     title: string;
     titleField?: string;
     fields: Record<string, Descriptor>;
+    /** Base URL segment of the collection's entries, code-owned per locale
+     *  (`"posts"` or `{ en: "posts", fi: "artikkelit" }`). Absent = no URLs. */
+    path?: string | Record<string, string>;
+    /** Entries nest under entries up to this depth. Absent = flat. */
+    tree?: {
+        depth: number;
+    };
+    order?: EntryOrder;
     admin?: {
         listColumns?: string[];
-        orderBy?: Record<string, "asc" | "desc">;
     };
     /** phantom: the entry value shape, used by f.ref target inference */
     readonly __entry?: NamespaceValues<F>;
 };
+export declare const collectionOrder: (c: CollectionSchema<any>) => EntryOrder;
+export declare const collectionDepth: (c: CollectionSchema<any>) => number;
 export declare function collection<F extends BuilderMap>(input: {
     name: string;
     title: string;
     titleField?: string;
     fields: F;
+    path?: string | Record<string, string>;
+    tree?: {
+        depth: number;
+    };
+    order?: EntryOrder;
     admin?: {
         listColumns?: string[];
-        orderBy?: Record<string, "asc" | "desc">;
     };
 }): CollectionSchema<F>;
 export type Toolset = {

package/dist/collections.js

@@ -1,12 +1,31 @@
+export const DEFAULT_ORDER = { by: "createdAt", direction: "desc" };
+export const BUILT_IN_ORDER_FIELDS = ["createdAt", "updatedAt"];
+export const collectionOrder = (c) => c.order ?? DEFAULT_ORDER;
+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 (input.tree !== undefined && (!Number.isInteger(input.tree.depth) || input.tree.depth < 1)) {
+        throw new Error(`smoodly: collection "${input.name}" declares an invalid tree depth.`);
+    }
+    if (input.order !== undefined &&
+        input.order !== "manual" &&
+        !BUILT_IN_ORDER_FIELDS.includes(input.order.by) &&
+        // own property only: `in` would accept "toString", "constructor" and
+        // the rest of the prototype chain as declared order fields. (The
+        // package targets ES2020, so not `Object.hasOwn`.)
+        !Object.prototype.hasOwnProperty.call(input.fields, input.order.by)) {
+        throw new Error(`smoodly: collection "${input.name}" orders by an unknown field "${input.order.by}".`);
+    }
     return {
         kind: "collection",
         name: input.name,
         title: input.title,
         titleField: input.titleField,
         fields: Object.fromEntries(Object.entries(input.fields).map(([k, b]) => [k, b.descriptor])),
+        ...(input.path !== undefined ? { path: input.path } : {}),
+        ...(input.tree !== undefined ? { tree: input.tree } : {}),
+        ...(input.order !== undefined ? { order: input.order } : {}),
         admin: input.admin,
     };
 }

package/dist/config.d.ts

@@ -4,7 +4,8 @@ type Registered = {
     schema: {
         kind: string;
         name: string;
-        slug?: string;
+        slug?: string | Record<string, string>;
+        collection?: string;
         styles?: Record<string, Descriptor>;
         styleDefaults?: false | {
             omit: string[];
@@ -16,12 +17,19 @@ export type SmoodlyConfig = {
         sections?: Registered[];
         elements?: Registered[];
         collections?: CollectionSchema<any>[];
+        /** Page shapes and entry pages alike — everything that renders a URL. */
         pages?: Registered[];
     };
     locales: {
         default: string;
         supported: string[];
     };
+    /** `tree.depth` — how deep editors may nest pages. Absent = flat. */
+    pages?: {
+        tree?: {
+            depth: number;
+        };
+    };
     styles?: {
         sections?: Record<string, FieldBuilder<any, any>>;
         elements?: Record<string, FieldBuilder<any, any>>;
@@ -42,6 +50,8 @@ export type SmoodlyConfig = {
 };
 export type ResolvedConfig = SmoodlyConfig & {
     homePageSlug: string;
+    /** How deep editors may nest pages in the tree. Default 1 (flat). */
+    pageDepth: number;
     /** The section's styles with the config standard set merged in (section keys win). */
     resolvedStyles(sectionName: string): Record<string, Descriptor>;
 };

package/dist/config.js

@@ -1,10 +1,11 @@
+import { assertSegment, perLocaleSegments } from "./paths.js";
 function assertUniqueNames(config) {
     const seen = new Set();
     const all = [
         ...(config.registry.sections ?? []).map((s) => s.schema.name),
         ...(config.registry.elements ?? []).map((e) => e.schema.name),
         ...(config.registry.collections ?? []).map((c) => c.name),
-        ...(config.registry.pages ?? []).map((p) => p.schema.name),
+        ...(config.registry.pages ?? []).filter((p) => p.schema.kind !== "entryPage").map((p) => p.schema.name),
     ];
     for (const name of all) {
         if (seen.has(name))
@@ -12,29 +13,86 @@ function assertUniqueNames(config) {
         seen.add(name);
     }
 }
-/** A fixed slug names the ONE page record a route file serves; two
- * registrations claiming it would make which-one-renders undefined. */
-function assertUniqueFixedSlugs(config) {
-    const owners = new Map();
-    for (const p of config.registry.pages ?? []) {
+/** Every root-level segment a registration claims, per locale: fixed page
+ *  slugs and collection paths. Two claims on one (locale, segment) are a
+ *  conflict — except a fixed page sitting at a collection's segment in
+ *  EVERY locale of that path, which is the collection's index page. */
+function assertRootSegments(config) {
+    const { default: def, supported } = config.locales;
+    const perLocale = (v) => perLocaleSegments(v, supported);
+    const pages = (config.registry.pages ?? []).filter((p) => p.schema.kind === "page" && p.schema.slug !== undefined);
+    const owners = new Map(); // "<locale> <segment>" → page name
+    for (const p of pages) {
         const slug = p.schema.slug;
-        if (slug === undefined)
+        if (typeof slug !== "string" && slug[def] === undefined) {
+            throw new Error(`smoodly: page "${p.schema.name}" declares a per-locale slug without the default locale "${def}".`);
+        }
+        for (const [locale, segment] of Object.entries(perLocale(slug))) {
+            assertSegment(segment, `page "${p.schema.name}" fixed slug`);
+            const owner = owners.get(`${locale} ${segment}`);
+            if (owner) {
+                throw new Error(`smoodly: page registrations "${owner}" and "${p.schema.name}" both claim the fixed slug "${segment}" (${locale}).`);
+            }
+            owners.set(`${locale} ${segment}`, p.schema.name);
+        }
+    }
+    const entryPages = new Set((config.registry.pages ?? []).filter((p) => p.schema.kind === "entryPage").map((p) => p.schema.collection));
+    const collectionOwners = new Map();
+    for (const c of config.registry.collections ?? []) {
+        if (c.path === undefined)
             continue;
-        const owner = owners.get(slug);
-        if (owner) {
-            throw new Error(`smoodly: page registrations "${owner}" and "${p.schema.name}" both claim the fixed slug "${slug}".`);
+        if (!entryPages.has(c.name)) {
+            throw new Error(`smoodly: collection "${c.name}" declares a path but no entry page — register smoodly.entryPage(${c.name}, View).`);
+        }
+        if (typeof c.path !== "string" && c.path[def] === undefined) {
+            throw new Error(`smoodly: collection "${c.name}" declares a per-locale path without the default locale "${def}".`);
+        }
+        const segments = perLocale(c.path);
+        for (const [locale, segment] of Object.entries(segments)) {
+            assertSegment(segment, `collection "${c.name}" path`);
+            const other = collectionOwners.get(`${locale} ${segment}`);
+            if (other) {
+                throw new Error(`smoodly: collections "${other}" and "${c.name}" both claim the root segment "${segment}" (${locale}).`);
+            }
+            collectionOwners.set(`${locale} ${segment}`, c.name);
+        }
+        // A page may sit on the collection's segment only if it does so in every locale.
+        for (const [locale, segment] of Object.entries(segments)) {
+            const pageName = owners.get(`${locale} ${segment}`);
+            if (!pageName)
+                continue;
+            const page = pages.find((p) => p.schema.name === pageName);
+            const everywhere = Object.entries(segments).every(([l, s]) => perLocale(page.schema.slug)[l] === s);
+            if (!everywhere) {
+                throw new Error(`smoodly: collection "${c.name}" and page registration "${pageName}" both claim the root segment "${segment}" (${locale}).`);
+            }
         }
-        owners.set(slug, p.schema.name);
     }
 }
 export function defineConfig(config) {
     assertUniqueNames(config);
-    assertUniqueFixedSlugs(config);
+    assertRootSegments(config);
+    const depth = config.pages?.tree?.depth ?? 1;
+    if (!Number.isInteger(depth) || depth < 1)
+        throw new Error("smoodly: pages.tree.depth must be a positive integer.");
+    // The root record's slug is a segment like any other, and it cannot be a
+    // collection's mount: that node is a folder or an index page, never "/".
+    const homePageSlug = config.homePageSlug ?? "home";
+    assertSegment(homePageSlug, "homePageSlug");
+    for (const c of config.registry.collections ?? []) {
+        if (c.path === undefined)
+            continue;
+        const segment = typeof c.path === "string" ? c.path : c.path[config.locales.default];
+        if (segment === homePageSlug) {
+            throw new Error(`smoodly: homePageSlug "${homePageSlug}" is also the path of collection "${c.name}".`);
+        }
+    }
     const standard = Object.fromEntries(Object.entries(config.styles?.sections ?? {}).map(([k, b]) => [k, b.descriptor]));
     const byName = new Map((config.registry.sections ?? []).map((s) => [s.schema.name, s.schema]));
     return {
         ...config,
-        homePageSlug: config.homePageSlug ?? "home",
+        homePageSlug,
+        pageDepth: depth,
         resolvedStyles(sectionName) {
             const schema = byName.get(sectionName);
             if (!schema)

package/dist/entry-page.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentType, ReactElement } from "react";
+import type { CollectionSchema } from "./collections.ts";
+import type { EntryRecord } from "./entry-store.ts";
+export type EntryPageSchema = {
+    kind: "entryPage";
+    name: string;
+    collection: string;
+};
+export type EntryPageProps = {
+    entry: EntryRecord;
+    path: string;
+};
+export type PairedEntryPage = ((props: EntryPageProps) => ReactElement) & {
+    schema: EntryPageSchema;
+};
+export declare function entryPage(collection: CollectionSchema<any>, View: ComponentType<EntryPageProps>): PairedEntryPage;

package/dist/entry-page.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function entryPage(collection, View) {
+    const Component = ((props) => _jsx(View, { entry: props.entry, path: props.path }));
+    Component.schema = { kind: "entryPage", name: `entry:${collection.name}`, collection: collection.name };
+    return Component;
+}