@livenetworks/ashlar 1.5.1 → 1.6.0

package/scss/config/_tokens.scss

@@ -20,9 +20,9 @@
 	// -----------------------------------------------------------------------
 	// Colors — Primary
 	// -----------------------------------------------------------------------
-	--color-primary: 216 95% 42%;
-	--color-primary-light: 216 95% 93%;
-	--color-primary-lighter: 216 95% 97%;
+	--color-primary: 232 75% 52%;
+	--color-primary-light: 232 75% 93%;
+	--color-primary-lighter: 232 75% 97%;
 
 	// -----------------------------------------------------------------------
 	// Colors — Secondary (brand accent — surface/element color, NOT text)
@@ -59,17 +59,17 @@
 	// during dark-mode audits -- semantic tokens inherit dark adjustments
 	// automatically, direct-neutral references do not.
 	//
-	--color-neutral-50:  215 20% 98%;
-	--color-neutral-100: 215 16% 96%;
-	--color-neutral-150: 215 14% 93%;
-	--color-neutral-200: 215 13% 91%;
-	--color-neutral-300: 215 13% 83%;
-	--color-neutral-400: 215 11% 65%;
-	--color-neutral-500: 215  9% 46%;
-	--color-neutral-600: 215 11% 34%;
-	--color-neutral-700: 215 14% 24%;
-	--color-neutral-800: 215 20% 15%;
-	--color-neutral-900: 215 39% 11%;
+	--color-neutral-50:  220 20% 98%;
+	--color-neutral-100: 220 16% 96%;
+	--color-neutral-150: 220 14% 93%;
+	--color-neutral-200: 220 13% 91%;
+	--color-neutral-300: 220 13% 83%;
+	--color-neutral-400: 218 11% 65%;
+	--color-neutral-500: 220  9% 46%;
+	--color-neutral-600: 220 11% 34%;
+	--color-neutral-700: 220 14% 24%;
+	--color-neutral-800: 220 20% 15%;
+	--color-neutral-900: 221 39% 11%;
 
 	// -----------------------------------------------------------------------
 	// Colors — Backgrounds
@@ -100,6 +100,8 @@
 	--size-xl:     2rem;       // 32px
 	--size-2xl:    3rem;       // 48px
 	--size-3xl:    4rem;       // 64px
+	--size-4xl:    6rem;
+	--size-5xl:    8rem;
 
 	// -----------------------------------------------------------------------
 	// Border Width
@@ -184,7 +186,7 @@
 	// Typography
 	// -----------------------------------------------------------------------
 	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-	--font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
+	--font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
 
 	--text-xs: 0.75rem;      // 12px
 	--text-sm: 0.875rem;     // 14px
@@ -194,25 +196,28 @@
 	--text-2xl: 1.5rem;      // 24px
 
 	// -----------------------------------------------------------------------
-	// Typography — semantic role tokens (v1.1)
+	// Typography — semantic role tokens (v1.1) — VOCABULARY
 	// -----------------------------------------------------------------------
 	// Public API surface — full scale exposed; internal usage may skip levels.
+	// Vocabulary: density + themes rebind these; mixins read the
+	// --font-size/--line-height primitives via @include typography(role),
+	// never these tokens directly.
 	--text-display-lg: 3.75rem;   --lh-display-lg: 1.1;
 	--text-display-md: 3rem;      --lh-display-md: 1.1;
-	--text-display-sm: 2.25rem;   --lh-display-sm: 1.15;
+	--text-display-sm: 1.875rem;  --lh-display-sm: 1.1;
 
-	--text-heading-lg: 1.875rem;  --lh-heading-lg: 1.2;
-	--text-heading-md: 1.5rem;    --lh-heading-md: 1.25;
-	--text-heading-sm: 1.25rem;   --lh-heading-sm: 1.3;
+	--text-heading-lg: 1.75rem;   --lh-heading-lg: 1.15;
+	--text-heading-md: 1.25rem;   --lh-heading-md: 1.2;
+	--text-heading-sm: 1.125rem;  --lh-heading-sm: 1.25;
 
-	--text-title-md:   1.125rem;  --lh-title-md:   1.4;
-	--text-title-sm:   1rem;      --lh-title-sm:   1.4;
+	--text-title-md:   1rem;      --lh-title-md:   1.3;
+	--text-title-sm:   0.875rem;  --lh-title-sm:   1.3;
 
 	--text-body-lg:    1.125rem;  --lh-body-lg:    1.6;
-	--text-body-md:    1rem;      --lh-body-md:    1.6;
-	--text-body-sm:    0.875rem;  --lh-body-sm:    1.5;
+	--text-body-md:    0.875rem;  --lh-body-md:    1.5;   // 14px / 1.5 — DocuFlow body
+	--text-body-sm:    0.8125rem; --lh-body-sm:    1.45;  // 13px
 
-	--text-label-md:   0.875rem;  --lh-label-md:   1.4;
+	--text-label-md:   0.8125rem; --lh-label-md:   1.4;   // 13px
 	--text-label-sm:   0.75rem;   --lh-label-sm:   1.4;
 
 	--text-caption:    0.75rem;   --lh-caption:    1.4;
@@ -241,17 +246,21 @@
 	// -----------------------------------------------------------------------
 	// App shell — intrinsic dimensions (not spacing rhythm)
 	// -----------------------------------------------------------------------
-	--app-header-height: 3.5rem;
-	--app-sidebar-width: 16rem;
+	--app-header-height: 3.25rem;   // 52px — DocuFlow topbar height
+	--app-sidebar-width: 14.5rem;   // 232px — DocuFlow sidebar width
 	--app-scrim-bg: hsl(var(--color-neutral-900) / 0.4);
 
 	// -----------------------------------------------------------------------
 	// Logical tokens — the public contract mixins read
 	// -----------------------------------------------------------------------
-	// Rule: mixin bodies reference ONLY these tokens (and --text-*/--lh-*/
-	// --radius-*/--shadow-*/--transition-*/--easing-* role scales). Back-end
-	// scales (--size-*, --color-neutral-*) are re-bound here and in context
-	// scopes (density, theme, region overrides) — never read directly
+	// Rule: mixin bodies reference ONLY these tokens. Typography mixins read
+	// --font-size/--line-height ONLY (via @include typography(role), which
+	// rebinds the primitive per role on the consuming element's scope).
+	// --text-*/--lh-* role scale is VOCABULARY: density + themes rebind it,
+	// mixins never read it directly. --radius-*/--shadow-*/--transition-*/
+	// --easing-* role scales remain directly readable (not yet primitived).
+	// Back-end scales (--size-*, --color-neutral-*) are re-bound here and in
+	// context scopes (density, theme, region overrides) — never read directly
 	// inside a component mixin.
 	//
 	// See .claude/plans/refactor-logical-tokens-architecture.md for the
@@ -260,8 +269,8 @@
 
 	// -- Structure & rhythm -----------------------------------------------
 	--padding-x:       var(--size-sm-up);
-	--padding-y:       var(--size-sm);
-	--gap:             var(--size-sm);
+	--padding-y:       var(--size-xs-up);   // 6px — dense base (DocuFlow 7px rounds to 6px)
+	--gap:             var(--size-xs-up);   // 6px — dense base
 	--radius:          var(--radius-md);
 
 	// -----------------------------------------------------------------------
@@ -350,10 +359,24 @@
 	--btn-border-hover: var(--border-strong-hover);
 
 	// Button padding tokens
-	--btn-padding-x:    var(--size-md);
-	--btn-padding-y:    var(--size-sm);
-
-	// -- Typography ------------------------------------------------------
+	--btn-padding-x:    var(--size-sm-up);
+	--btn-padding-y:    var(--size-xs-up);
+
+	// Card padding tokens — roomier than base rhythm; density-reactive via _density.scss
+	--card-padding-y:        var(--size-sm-up);    // 12px dense base
+	--card-padding-x:        var(--size-md);       // 16px dense base
+
+	// Table cell padding tokens — roomier than base rhythm; density-reactive via _density.scss
+	--table-cell-padding-y:  var(--size-sm);       // 8px dense base (DocuFlow th: 9px / td: 10px)
+	--table-cell-padding-x:  var(--size-md);       // 16px dense base
+
+	// -- Typography — primitives -----------------------------------------
+	// Mixins read these two primitives ONLY (via @include typography(role),
+	// which rebinds them per role on the consuming element's scope — mirror
+	// of how @mixin card rebinds --color-bg). The --text-{role}/--lh-{role}
+	// role scale (lines ~202-220) is VOCABULARY: density + themes rebind it,
+	// mixins never read it directly. These :root values are the default for
+	// text that does not pass through a typography mixin.
 	--font-size:    var(--text-body-md);
 	--line-height:  var(--lh-body-md);
 
@@ -389,10 +412,10 @@
 	//       margin-bottom: var(--margin-block);
 	//   }
 	//
-	// Density-compact reacts automatically: density-compact rebinds
-	// the underlying --size-* scale, and the consumer's
-	// `--margin-block: var(--size-md)` re-resolves at the consumer
-	// element under the compact scope.
+	// NOTE: [data-density] scopes rebind type roles, logical
+	// --padding-y/--gap, and control sizing — NOT the --size-* scale.
+	// So --margin-block (reading --size-*) is constant across density
+	// tiers for now; making structural margins reactive is a Phase 3 item.
 	//
 	// --margin-inline is the horizontal companion. Used for
 	// element-pushing structural offsets (icon→text gap inside a
@@ -402,18 +425,17 @@
 
 // ---------------------------------------------------------------------------
 // Mobile rhythm — logical tokens tighten at ≤ md viewport.
-// Not the same as `.density-compact` (that's a user opt-in).
+// Not the same as `[data-density]` (that's a user opt-in).
 // This is viewport-driven structural compression: content dominates chrome
 // at narrow widths. Components reading --padding-x/--padding-y/--gap
 // react via the cascade.
 //
-// Interaction with .density-compact: stacks. Compact user + mobile viewport =
-// both apply; the underlying --size-* scale is already tighter in
-// .density-compact so logical tokens resolve to the tightest value.
+// Interaction with [data-density]: stacks. Compact density + mobile viewport =
+// both apply; the underlying --padding-y tightens further from the mobile rebind.
 // ---------------------------------------------------------------------------
 @include mq-down(md) {
 	:root {
-		--padding-y: var(--size-xs);     // 12px → 4px
-		--gap:       var(--size-xs-up);  // 8px → 6px
+		--padding-y: var(--size-xs);     // 6px → 4px
+		--gap:       var(--size-xs-up);  // 6px → 6px (already tight)
 	}
 }

package/scss/config/mixins/_accordion.scss

@@ -41,12 +41,7 @@
 			@include cursor-pointer;
 		}
 
-		// Content body padding — on children, not the overflow:hidden wrapper
-		.collapsible-body > * {
-			--padding-y: var(--size-sm-up);
-			--padding-x: var(--size-md);
-			padding: var(--padding-y) var(--padding-x);
-			margin: 0;
-		}
+		// Body spacing now comes from the universal `.collapsible-body > *`
+		// rule in components/_toggle.scss (applies to every collapsible).
 	}
 }

package/scss/config/mixins/_alert.scss

@@ -15,10 +15,10 @@
 //
 // HTML:
 //   <div class="alert" role="alert">
-//       <svg class="ln-icon" aria-hidden="true"><use href="#ln-info-circle"></use></svg>
+//       <svg class="ln-icon" aria-hidden="true"><use href="#ln-icon-info-circle"></use></svg>
 //       <p>Message text.</p>
 //       <button type="button" aria-label="Dismiss">
-//           <svg class="ln-icon" aria-hidden="true"><use href="#ln-x"></use></svg>
+//           <svg class="ln-icon" aria-hidden="true"><use href="#ln-icon-x"></use></svg>
 //       </button>
 //   </div>
 
@@ -63,12 +63,12 @@
 // HTML (dismissible via ln-toggle, dismissed state persists across reloads):
 //   <div class="alert banner" role="status" aria-live="polite"
 //        data-ln-toggle="open" data-ln-persist id="trial-notice">
-//       <svg class="ln-icon" aria-hidden="true"><use href="#ln-info-circle"></use></svg>
+//       <svg class="ln-icon" aria-hidden="true"><use href="#ln-icon-info-circle"></use></svg>
 //       <p>Trial expires in 3 days.</p>
 //       <button type="button" aria-label="Dismiss"
 //               data-ln-toggle-for="trial-notice"
 //               data-ln-toggle-action="close">
-//           <svg class="ln-icon" aria-hidden="true"><use href="#ln-x"></use></svg>
+//           <svg class="ln-icon" aria-hidden="true"><use href="#ln-icon-x"></use></svg>
 //       </button>
 //   </div>
 

package/scss/config/mixins/_breadcrumbs.scss

@@ -2,6 +2,7 @@
 @use 'borders' as *;
 @use 'focus' as *;
 @use 'interaction' as *;
+@use 'typography' as *;
 
 // ─── Breadcrumbs ────────────────────────────────────────────────────────────
 // CSS-only navigation trail. No JS involvement.
@@ -37,8 +38,7 @@
 			@include flex;
 			@include items-center;
 			gap: var(--gap);
-			font-size: var(--text-body-sm);
-			line-height: var(--lh-body-sm);
+			@include typography(body-sm);
 			margin: 0;
 
 			+ li::before {

package/scss/config/mixins/_btn.scss

@@ -48,7 +48,7 @@
 // --color-accent / --color-accent-fg) sidestep that: the default
 // theme leaves them unset (mixin falls back to solid + white), Glass
 // rebinds them at theme :root to flip the accent button to
-// translucent. Solid-accent consumers (toast-side, pill-checked,
+// translucent. Solid-accent consumers (toast-icon, pill-checked,
 // stepper active/complete) read --color-accent / --color-accent-fg
 // directly and are unaffected by Glass's rebind because Glass leaves
 // --color-accent-fg alone. See CLAUDE.md ## Theme Architecture for

package/scss/config/mixins/_card.scss

@@ -11,6 +11,9 @@
 // Card & Section — composite mixins
 
 @mixin card {
+	--color-bg: var(--nested-card-bg, var(--bg-base));
+	--shadow:   var(--nested-card-shadow, var(--shadow-resting));
+
 	background: var(--color-bg);
 	@include border;
 	@include w-full;
@@ -18,12 +21,28 @@
 	border-radius: var(--radius);
 	@include overflow-hidden;
 	@include transition;
-	--shadow: var(--shadow-resting);
 	box-shadow: var(--shadow);
 
 	&:hover {
-		--color-border: var(--border-strong);
-		--shadow: var(--shadow-floating);
+		--color-border: color-mix(in srgb, var(--color-accent) 35%, transparent);
+		--shadow: var(--nested-card-shadow-hover, var(--shadow-floating));
+	}
+
+	// Nesting ladder: when nested inside a section-card or another card,
+	// climb to elevated surface to preserve visual depth.
+	.section-card &,
+	.section &,
+	.card & {
+		--color-bg: var(--bg-elevated);
+		--shadow:   var(--shadow-floating);
+	}
+
+	// Bulletproof nesting support for custom/semantic selectors:
+	// sets the elevated background variables on all descendants.
+	& * {
+		--nested-card-bg: var(--bg-elevated);
+		--nested-card-shadow: var(--shadow-floating);
+		--nested-card-shadow-hover: var(--shadow-floating);
 	}
 
 	// Direct-child selectors only — nested <header>/<main>/<footer>
@@ -47,13 +66,22 @@
 		@include flex-1;
 		text-decoration: none;
 		color: inherit;
+
+		> header { @include panel-header; }
+		> main   { @include panel-body; }
+		> footer { @include panel-footer; }
+
+		> main {
+			@include flex-1;
+			gap: var(--gap);
+		}
 	}
 
 	// Tile-header h3: when a card carries a title inside > main
 	// without a <header> wrapper, the global h3 cascade (heading-sm)
 	// is too large for tile context. Tighten to tile-title sizing.
 	> main h3 {
-		font-size: var(--text-body-sm);
+		@include typography(body-sm);
 		@include font-semibold;
 		color: inherit;
 		margin: 0;
@@ -64,15 +92,15 @@
 	@include flex;
 	@include items-center;
 	@include justify-between;
-	padding: var(--padding-y) var(--padding-x);
+	padding: var(--card-padding-y) var(--card-padding-x);
 	@include border-b;
 	--color-bg: var(--bg-sunken);
 	background: var(--color-bg);
 	@include transition;
+	margin-bottom: 0;
 
-	h3 {
-		font-size: var(--text-body-sm);
-		line-height: var(--lh-body-sm);
+	:is(h1, h2, h3, h4, h5, h6) {
+		@include typography(body-sm);
 		@include font-medium;
 		color: var(--color-fg);
 		margin: 0;
@@ -110,7 +138,48 @@
 }
 
 @mixin panel-body {
-	padding: var(--padding-y) var(--padding-x);
+	padding: var(--card-padding-y) var(--card-padding-x);
+
+	ul, ol {
+		padding-left: 1.5em;
+		margin-bottom: var(--size-md);
+
+		li {
+			margin-bottom: var(--size-xs);
+			line-height: 1.7;
+			list-style: inherit;
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+
+	ul {
+		list-style-type: disc;
+	}
+
+	ol {
+		list-style-type: decimal;
+	}
+
+	&:has(> table),
+	&:has(> .table-container) {
+		overflow-x: auto;
+		max-width: 100%;
+		-webkit-overflow-scrolling: touch;
+	}
+
+	// ln-table brings its own chrome and sticky thead/footer — `clip` keeps
+	// this cell from becoming the scroll container that would trap them.
+	&:has(> [data-ln-table]) {
+		overflow-x: clip;
+		max-width: 100%;
+	}
+
+	table {
+		min-width: var(--table-min-width, 600px);
+	}
 
 	// Auto-flush: ONLY when the table (or .table-container) is the
 	// sole child of main — i.e. the card is a pure table card.
@@ -122,11 +191,13 @@
 	// then <table>), :only-child doesn't match, padding stays,
 	// and the table keeps its own inset.
 	&:has(> table:only-child),
-	&:has(> .table-container:only-child) {
+	&:has(> .table-container:only-child),
+	&:has(> [data-ln-table]:only-child) {
 		padding: 0;
 
 		> table,
-		> .table-container > table {
+		> .table-container > table,
+		> [data-ln-table] > table {
 			border-radius: 0;
 			box-shadow: none;
 			margin-bottom: 0;
@@ -135,8 +206,10 @@
 }
 
 @mixin panel-footer {
-	padding: var(--padding-y) var(--padding-x);
+	padding: var(--card-padding-y) var(--card-padding-x);
 	@include border-t;
+	--color-bg: var(--bg-sunken);
+	background: var(--color-bg);
 	@include flex;
 	@include justify-end;
 	gap: var(--gap);
@@ -146,7 +219,7 @@
 	--margin-block: var(--size-xl);
 	margin-bottom: var(--margin-block);
 
-	header {
+	> header {
 		@include flex;
 		@include items-center;
 		@include justify-between;
@@ -277,7 +350,9 @@
 	border-inline-end:   var(--border-inline-end,   var(--border-width) solid var(--color-border));
 	border-radius: var(--radius);
 	box-shadow: var(--shadow);
-	z-index: var(--z-dropdown);
+	// z-index is the caller's responsibility: top-layer consumers (dropdown,
+	// popover, tooltip portal) don't need one; standalone consumers do —
+	// see [data-ln-table] .column-filter-dropdown in components/_filter.scss.
 }
 
 // ─── Card field list (label/value rows) ────────────────

package/scss/config/mixins/_collapsible.scss

@@ -21,4 +21,7 @@
 
 @mixin collapsible-content {
 	overflow: hidden;
+	// Pair with overflow:hidden so the grid item's automatic minimum resolves
+	// to 0 (not min-content) and the 0fr track can collapse fully.
+	min-height: 0;
 }

package/scss/config/mixins/_colors.scss

@@ -19,7 +19,7 @@
 // --color-accent vocabulary to a status family (success / warning /
 // error / info / secondary). Used by .success / .warning / .error /
 // .info / .secondary classes in _utilities.scss. Cascading both families
-// ensures every downstream consumer (btn, toast-side, card-accent,
+// ensures every downstream consumer (btn, toast-icon, card-accent,
 // alert, badge, etc.) picks up the status color through inherited
 // custom-property values — no per-mixin redeclare required.
 @mixin semantic-color($family) {

package/scss/config/mixins/_diagnostics.scss

@@ -35,3 +35,14 @@
 		margin-inline-start: var(--size-xs, 0.5rem);
 	}
 }
+
+// Replaced-element DOM diagnostic error (img, video, iframe, etc.)
+// Replaced elements do NOT render ::before/::after generated content, so this
+// mixin uses a visible outline + translucent wash instead of a text label.
+// The human-readable reason is carried by surrounding copy (e.g. a demo
+// section header), not by a pseudo-element.
+@mixin dev-replaced-error {
+	outline: 2px dashed hsl(var(--color-error));
+	outline-offset: var(--size-xs);
+	background: color-mix(in srgb, hsl(var(--color-error)) 15%, transparent);
+}

package/scss/config/mixins/_display.scss

@@ -5,6 +5,7 @@
 @mixin block         { display: block; }
 @mixin inline-block  { display: inline-block; }
 @mixin hidden        { display: none; }
+@mixin invisible     { visibility: hidden; }
 
 @mixin flex-col      { display: flex; flex-direction: column; }
 @mixin flex-row      { display: flex; flex-direction: row; }

package/scss/config/mixins/_dropdown.scss

@@ -130,11 +130,9 @@
 
 @mixin dropdown-menu {
 	@include floating-panel;
-	@include absolute;
-	right: 0;
-	top: 100%;
-	--margin-block: var(--size-xs);
-	margin-top: var(--margin-block);
+	@include fixed;
+	inset: auto;
+	margin: 0;
 	--padding-y: var(--size-xs);
 	padding-block: var(--padding-y);
 	min-width: 10rem;

package/scss/config/mixins/_editor.scss

@@ -0,0 +1,124 @@
+@use 'spacing' as *;
+@use 'display' as *;
+@use 'typography' as *;
+@use 'colors' as *;
+@use 'borders' as *;
+@use 'transitions' as *;
+@use 'motion' as *;
+@use 'focus' as *;
+@use 'prose' as *;
+
+// ─── Editor ────────────────────────────────────────────────────
+// Lightweight WYSIWYG editor wrapper: toolbar + contentEditable
+// surface. The editing surface reuses @include prose for content
+// formatting so authored content matches rendered output.
+//
+// Structure:
+//   [data-ln-editor]
+//     > [role="toolbar"]       toolbar (authored container)
+//       > ul > li > button     formatting actions (grouped)
+//     > .ln-editor__surface    contentEditable div (JS-created)
+//     > textarea               hidden source (form submission)
+
+@mixin editor {
+	@include border;
+	border-radius: var(--radius);
+	overflow: hidden;
+	--color-bg: var(--bg-base);
+	background: var(--color-bg);
+
+	// ─── Toolbar ───────────────────────────────────────────────
+	> [role="toolbar"] {
+		@include flex;
+		@include flex-wrap;
+		@include items-center;
+		--gap: var(--size-2xs);
+		gap: var(--gap);
+		--padding-y: var(--size-xs);
+		--padding-x: var(--size-sm);
+		padding: var(--padding-y) var(--padding-x);
+		--color-bg: var(--bg-sunken);
+		background: var(--color-bg);
+		border-bottom: var(--border-width) solid var(--color-border);
+
+		// Button groups — each <ul> is a visual group
+		> ul {
+			@include flex;
+			@include items-center;
+			--gap: var(--size-2xs);
+			gap: var(--gap);
+			list-style: none;
+			padding: 0;
+			margin: 0;
+
+			// Visual separator between groups (not on last)
+			&:not(:last-child) {
+				--padding-x: var(--size-xs);
+				padding-right: var(--padding-x);
+				border-right: var(--border-width) solid var(--color-border);
+				--margin-inline: var(--size-xs);
+				margin-right: var(--margin-inline);
+			}
+		}
+
+		// Toolbar buttons — compact, neutral
+		button {
+			--padding-y: var(--size-2xs);
+			--padding-x: var(--size-xs);
+			padding: var(--padding-y) var(--padding-x);
+			border-radius: var(--radius-sm);
+			background: transparent;
+			color: var(--color-fg);
+			@include transition-colors;
+
+			&:hover {
+				--color-bg: var(--bg-base);
+				background: var(--color-bg);
+			}
+
+			// Active formatting state (JS toggles this class)
+			&.ln-editor-active {
+				--color-bg: var(--bg-base);
+				background: var(--color-bg);
+				color: var(--color-accent);
+			}
+		}
+	}
+
+	// ─── Editing Surface ───────────────────────────────────────
+	> .ln-editor__surface {
+		@include prose;
+		max-width: none; // Override prose's max-width constraint
+		--padding-y: var(--size-md);
+		--padding-x: var(--size-md);
+		padding: var(--padding-y) var(--padding-x);
+		min-height: 8rem;
+		outline: none;
+		cursor: text;
+
+		// Counter the global reset (`ul li, ol li { list-style: none }`).
+		// The reset kills markers on <li> directly; prose only sets
+		// list-style on the <ul>/<ol> container. Restore inheritance
+		// so the container's disc/decimal flows through to each item.
+		ul li { list-style: disc; }
+		ol li { list-style: decimal; }
+
+		// Empty placeholder via CSS
+		&:empty::before {
+			content: attr(data-placeholder);
+			--color-fg: var(--fg-subtle);
+			color: var(--color-fg);
+			pointer-events: none;
+		}
+	}
+
+	// Focus state on the whole editor when editing
+	&:focus-within {
+		border-color: var(--color-accent);
+	}
+
+	// ─── Hidden textarea (source for form submission) ──────────
+	> textarea[data-ln-editor-source] {
+		display: none;
+	}
+}

package/scss/config/mixins/_empty-state.scss

@@ -28,3 +28,10 @@
 		margin-top: var(--margin-block);
 	}
 }
+
+@mixin empty-state-span {
+	grid-column: 1 / -1;
+	width: 100%;
+	height: auto !important;
+	min-height: auto !important;
+}