From ed71ccf46bd4ccca5b261f14f8a2edd9ae963602 Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Tue, 2 Jun 2026 21:42:47 +0200
Subject: [PATCH] fix(words): drawer toggle overlap + faithful preview
 (columns, headings)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three demo/chrome fixes:
- Drawer inspector: the open toggle (SlidersHorizontal) stayed mounted
  while the panel was open, colliding with the panel's own X close in the
  same corner. Render it only while closed; the panel's header X closes it.
- Preview columns: serialize as <div data-words-columns><div data-words-column>,
  which no preview rule matched, so they stacked. Mirror the editor's row flex.
- Preview headings: were --font-size-2xl/xl/lg at weight 700 — louder than
  the editor. Reference the SAME recipe tokens (xl, lg+4, lg; semibold;
  heading line-height + primary color) so Preview reads like Edit. Verified
  editor + preview both render h1=28px/600, h2=24px/600.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/uix/eidos/components/words/words.svelte  | 29 ++++++++-------
 web/routes/uix/components/words/+page.svelte | 38 +++++++++++++++-----
 2 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/src/uix/eidos/components/words/words.svelte b/src/uix/eidos/components/words/words.svelte
index e1ec37ba1..59af48adb 100644
--- a/src/uix/eidos/components/words/words.svelte
+++ b/src/uix/eidos/components/words/words.svelte
@@ -87,19 +87,22 @@
 					<WordsInspector {api} />
 				</aside>
 			{:else if inspector === 'drawer'}
-				<Button
-					data-words-drawer-toggle
-					variant="ghost"
-					size="xs"
-					iconOnly
-					rounded="md"
-					aria-label="Block settings"
-					aria-pressed={drawerOpen}
-					data-active={drawerOpen ? '' : undefined}
-					onclick={() => (drawerOpen = !drawerOpen)}
-				>
-					{#snippet icon()}<SlidersHorizontal />{/snippet}
-				</Button>
+				<!-- Open affordance only while CLOSED. The open panel carries its
+				     own X close in the header; keeping the toggle visible too made
+				     both buttons collide in the same top-right corner. -->
+				{#if !drawerOpen}
+					<Button
+						data-words-drawer-toggle
+						variant="ghost"
+						size="xs"
+						iconOnly
+						rounded="md"
+						aria-label="Block settings"
+						onclick={() => (drawerOpen = true)}
+					>
+						{#snippet icon()}<SlidersHorizontal />{/snippet}
+					</Button>
+				{/if}
 				<aside data-words-drawer-panel data-open={drawerOpen ? '' : undefined}>
 					<header data-words-drawer-panel-head>
 						<span>Block</span>
diff --git a/web/routes/uix/components/words/+page.svelte b/web/routes/uix/components/words/+page.svelte
index fa02b67aa..2dc0d6184 100644
--- a/web/routes/uix/components/words/+page.svelte
+++ b/web/routes/uix/components/words/+page.svelte
@@ -410,20 +410,42 @@
 		font-size: var(--font-size-md);
 		line-height: 1.7;
 	}
+	/* Headings mirror the editor recipe tokens (words `heading-*`): same
+	   sizes (h1 = xl, h2 = lg+4, h3 = lg), semibold weight, heading
+	   line-height + primary color, top-only rhythm — so Preview reads
+	   like Edit mode rather than a louder, bolder variant. */
+	.demo-preview :global(:first-child) {
+		margin-block-start: 0;
+	}
+	.demo-preview :global(h1),
+	.demo-preview :global(h2),
+	.demo-preview :global(h3) {
+		font-weight: var(--font-weight-semibold);
+		line-height: var(--leading-heading);
+		color: var(--color-content-primary);
+		margin-block: calc(var(--space-3) * 1.5) 0;
+	}
 	.demo-preview :global(h1) {
-		font-size: var(--font-size-2xl);
-		font-weight: 700;
-		margin-block: var(--space-5) var(--space-3);
+		font-size: var(--font-size-xl);
 	}
 	.demo-preview :global(h2) {
-		font-size: var(--font-size-xl);
-		font-weight: 700;
-		margin-block: var(--space-4) var(--space-2);
+		font-size: calc(var(--font-size-lg) + 4px);
 	}
 	.demo-preview :global(h3) {
 		font-size: var(--font-size-lg);
-		font-weight: 600;
-		margin-block: var(--space-4) var(--space-2);
+	}
+	/* Columns serialize to `<div data-words-columns><div data-words-column>` —
+	   plain divs, so without this they stack. Mirror the editor's row flex. */
+	.demo-preview :global([data-words-columns]) {
+		display: flex;
+		flex-direction: row;
+		gap: var(--space-3);
+		align-items: stretch;
+		margin-block: var(--space-3);
+	}
+	.demo-preview :global([data-words-column]) {
+		flex: 1 1 0;
+		min-inline-size: 0;
 	}
 	.demo-preview :global(p) {
 		margin-block: var(--space-3);