From 91bab32bc20933a8440006ce1eaf2c94b02b5598 Mon Sep 17 00:00:00 2001 From: dev Date: Wed, 3 Jun 2026 02:44:36 +0200 Subject: [PATCH] =?UTF-8?q?words:=20active-block=20marker=20=E2=86=92=20th?= =?UTF-8?q?e=20gutter=20(not=20the=20block)=20+=20no=20select=20in=20previ?= =?UTF-8?q?ew?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two fixes from feedback: - The active/hovered-block marker belonged in the GUTTER, not as an overlay on the block. `[data-words-block-outline]` is now a thin (3px) vertical accent rail pinned to the gutter column (left margin, just left of where the text begins) spanning the block's height — only top/height track the block. Replaces the tinted fill that landed on the block content. - Preview is read-only, but `WordsActivate` (click-to-select → the dotted active outline) still ran, so blocks could be selected in preview. Add an `enabled` prop (false in preview): no click-activation and the active stamp is cleared. `` passes `enabled={mode === 'edit'}`. Verified in-browser: the gutter rail sits 8px left of the block text (not over it), spanning the block height; clicking a block in preview no longer stamps `data-words-active`. Check clean for the touched files. Co-Authored-By: Claude Opus 4.8 (1M context) --- .../eidos/components/words/words-activate.svelte | 12 +++++++++--- .../components/words/words-block-gutter.svelte | 10 +++++----- src/uix/eidos/components/words/words.css | 13 +++++++------ src/uix/eidos/components/words/words.svelte | 2 +- 4 files changed, 22 insertions(+), 15 deletions(-) diff --git a/src/uix/eidos/components/words/words-activate.svelte b/src/uix/eidos/components/words/words-activate.svelte index 8b1810e19..168e06d93 100644 --- a/src/uix/eidos/components/words/words-activate.svelte +++ b/src/uix/eidos/components/words/words-activate.svelte @@ -28,11 +28,15 @@ let { api, content, - dom + dom, + enabled = true }: { api: ProviderSnippetProps; content: HTMLElement; dom: ActiveDom; + /** When false (preview / read-only) block activation is off: no + * click-to-select and the active-block outline is cleared. */ + enabled?: boolean; } = $props(); // Build the MATERIALIZED-PATH id of the clicked block: walk the DOM up @@ -52,7 +56,7 @@ } $effect(() => { - if (!content) return; + if (!content || !enabled) return; const onPointerDown = (e: Event) => { const target = e.target as HTMLElement | null; if (!target) return; @@ -76,6 +80,7 @@ // are unique, so we match the LAST segment. The segment count is the // nesting depth → `data-words-depth`. $effect(() => { + const on = enabled; // re-run (and clear) when activation is turned off const idPath = api.activeBlockId; // Touch `html` so this effect re-runs after each re-render and // re-stamps the (freshly recreated) element. @@ -88,7 +93,8 @@ prev.removeAttribute('data-words-active'); prev.removeAttribute('data-words-depth'); } - if (!idPath) return; + // Preview / read-only: stamps cleared above, never re-applied. + if (!on || !idPath) return; const segments = idPath.split('/').filter(Boolean); const localId = segments[segments.length - 1]; if (!localId) return; diff --git a/src/uix/eidos/components/words/words-block-gutter.svelte b/src/uix/eidos/components/words/words-block-gutter.svelte index 59d8dd2b8..cd9a717db 100644 --- a/src/uix/eidos/components/words/words-block-gutter.svelte +++ b/src/uix/eidos/components/words/words-block-gutter.svelte @@ -314,11 +314,11 @@ {#if (show || menuOpen) && rect} {#if inGutter || menuOpen} -
+ +
{/if}