svelte-kit-vice

Commit Graph

Author	SHA1	Message	Date
dev	9a5f3c2359	refactor(words): drawer canon — morfo part + soma provider + eidos consumes via provider (DRAWER-CANON) Closes the architectural gap from the DRAWER spike: the companion drawer now follows the same morfo/soma/eidos pattern as every other Words part (Toolbar/BubbleMenu/SlashMenu/LinkEditor/Status/etc.). DRAWER-CANON-1 — morfo + soma: - wordsMorfo gains a 'Drawer' part (kebab 'drawer', archetype 'group', defaultElement 'aside', role 'complementary'). Declares data-words- drawer-mode (default/format/image/table/code/list), data-open, data-disabled, aria-label. New event 'commit-toggle-drawer' fires on collapse/expand for sema/telemetry hooks. - New WordsDrawerProvider in words-provider.svelte: owns `open` bindable state, derives `mode` from parent provider's currentBlock + selection (same logic as the spike, now in soma where it belongs), exposes snippetProps {mode, open, disabled, snippet, toggle, setOpen}. `toggle()` and `setOpen()` emit the event. - WordsDrawerProps + WordsDrawerSnippetProps + WordsDrawerMode types added to types.ts and re-exported via exports.ts. - soma/components/words/components/words-drawer.svelte (the soma component) mounts the provider and forwards merged props to either the `child` snippet or the default <aside> render. DRAWER-CANON-2 — eidos refactor: - eidos words-drawer.svelte rewritten as a consumer of <Words.Drawer>. The shell (aside + header + collapse button) and the per-mode body now live inside the children snippet that receives the soma's drawer snippet props. Mode derivation removed from eidos (it's now in soma). Local open $state removed (now bindable via the soma component). - Demo +page.svelte: `<Words.Drawer snippet={snippetProps} />` collapses to plain `<Words.Drawer />` — the soma provider hands the parent snippet down internally. DRAWER-CANON-3 — verify: - 214/214 tests pass in soma+morfo scope (no regressions). - npx tsc --noEmit clean for words area. - Visual verification: drawer still renders with DOCUMENT/OUTLINE/ STATS/SUGGESTIONS in default mode; context-switching to table / code / list / format still works; aside element now carries role='complementary', aria-label from morfo translationRef, data-words-drawer-mode reflecting current panel. The eidos drawer now passes the same canon checks as every other Words part: morfo declares its contract, soma owns the state, eidos only paints. The schema validator can verify the drawer's attrs, the eidos lint can check selector usage, sema can react to the toggle event. Demo header chips reflect the new contract: PARTS 19→20, EVENTS 11→12. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	15dbf0f8fd	feat(words): drawer contextual panels — format/image/table/code/list (DRAWER-2) The companion drawer now switches its body content based on where the caret is. Five context modes wired to runCommand on the snippet provider, all reading current state to show active highlights: - format: B/I/U/S/code mark toggles (data-active reflects activeMarks), align L/C/R/J (data-active reflects currentTextAlign), Add link (URL prompt) + Remove (canUnlink-gated), Clear formatting. - image: read-only view of src, alt (italic + "(missing)" placeholder when empty), caption, status (pending → accent tint, error → threat tint). Edit-image flow deferred to a follow-up (needs a new updateImage operation; for the spike, view-only is enough to validate the panel works). - table: Rows +/- · Columns +/- · Row/Col header toggles · Striped / Compact toggles · Cell tone Plain/Muted/Accent. Every toggle reads current* state so the user sees which buttons are currently applied. - code: Plain + TS/JS/CSS/HTML/JSON/Bash/Py language chips, data-active reflects currentCodeLanguage. - list: Bullet/Numbered/Check kind chips · ⇤ Outdent / ⇥ Indent. All buttons use onmousedown preventDefault so the editor selection isn't dropped when clicking a drawer action (would otherwise lose the target paragraph / table cell / list item). CSS adds a generic .data-words-drawer-action chip (with hover, active, ghost, full, risk tones) + readonly-text style with pending/error tints. Reused across all panels, so adding new panels later means markup-only, no CSS extension. Verified in browser: - Click table cell → drawer shows TABLE panel with Striped active (matches sample's striped=true) and Plain tone active (matches default cell tone). - Click code block → drawer shows CODE panel with TS chip active (matches sample's language='ts'). - Click list item → drawer shows LIST panel with kind + indent actions. Concept A+D validated visually: ONE surface replaces what would otherwise be bubble menu + slash menu + heading picker + language picker + table popover + image controls + link editor. The contextual switch happens automatically; the user just moves the caret. DRAWER-3 (polish): mobile bottom-sheet layout, A/B toggle in demo controls, image-edit flow — deferred to next session if needed. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	23f90a775c	feat(words): companion drawer right-rail (concept A+D) — shell + default panel (DRAWER-1) A radical disposition shift: instead of N fragmented popovers (bubble menu + slash menu + link editor + heading picker + language picker + table popover + image controls) we mount ONE contextual right-rail that changes its panel based on what the user is editing. Spike-1 surface (this commit) ships: - New eidos component <Words.Drawer> (words-drawer.svelte) — a collapsible right sidebar with mode detection derived from snippet props (currentBlock + selection). 6 modes mapped: default \| format \| image \| table \| code \| list. - Default panel (visible when no contextual mode active): - OUTLINE — flat list of h1/h2/h3 headings, indented by level - STATS — word count + char count + reading time (200wpm) - SUGGESTIONS — writer-coaching warnings derived from the document model: missing alt text, long paragraphs (>600 chars), heading skip patterns (h3 without h2 above). Empty state shows "Nothing flagged" in affirm color. - Contextual panels (format/image/table/code/list) render a placeholder "coming soon" message — implemented in DRAWER-2. - Eidos CSS: - Provider host gains a grid-template-areas layout when a drawer is present: 'toolbar drawer / content drawer / status drawer'. Existing children (toolbar/content/placeholder/status) get explicit grid-area assignments. - Drawer collapses to 2.25rem (just the chevron) when closed. 16rem default open. - Outline items, stats grid, warning list each have their own discrete styling. Demo (+page.svelte): - New `showDrawer` state (default true). - Children snippet refactored to capture full snippetProps via @const destructure (kept selectedLink working). - <Words.Drawer snippet={snippetProps} /> mounted inside the children block alongside the other parts. Visual verification: - Drawer renders as a dedicated right column with the editor content on the left, no layout overlap. - DOCUMENT header + OUTLINE shows "H1 ActiveUIX Words", STATS shows 73 words / 508 chars / 1 min reading, SUGGESTIONS shows "Nothing flagged" (sample doc has no warnings). - Collapse button toggles open/closed via animated inline-size transition. Next: - DRAWER-2: format/image/table/code/list contextual panels wired to runCommand. - DRAWER-3: polish (mobile drawer-as-bottom-sheet, transitions, A/B toggle in demo to compare classic toolbar vs companion drawer). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago

Author

SHA1

Message

Date

dev

9a5f3c2359

refactor(words): drawer canon — morfo part + soma provider + eidos consumes via provider (DRAWER-CANON)

Closes the architectural gap from the DRAWER spike: the companion
drawer now follows the same morfo/soma/eidos pattern as every other
Words part (Toolbar/BubbleMenu/SlashMenu/LinkEditor/Status/etc.).

DRAWER-CANON-1 — morfo + soma:
- wordsMorfo gains a 'Drawer' part (kebab 'drawer', archetype 'group',
  defaultElement 'aside', role 'complementary'). Declares data-words-
  drawer-mode (default/format/image/table/code/list), data-open,
  data-disabled, aria-label. New event 'commit-toggle-drawer' fires
  on collapse/expand for sema/telemetry hooks.
- New WordsDrawerProvider in words-provider.svelte: owns `open`
  bindable state, derives `mode` from parent provider's currentBlock
  + selection (same logic as the spike, now in soma where it
  belongs), exposes snippetProps {mode, open, disabled, snippet,
  toggle, setOpen}. `toggle()` and `setOpen()` emit the event.
- WordsDrawerProps + WordsDrawerSnippetProps + WordsDrawerMode types
  added to types.ts and re-exported via exports.ts.
- soma/components/words/components/words-drawer.svelte (the soma
  component) mounts the provider and forwards merged props to either
  the `child` snippet or the default <aside> render.

DRAWER-CANON-2 — eidos refactor:
- eidos words-drawer.svelte rewritten as a consumer of
  <Words.Drawer>. The shell (aside + header + collapse button) and
  the per-mode body now live inside the children snippet that
  receives the soma's drawer snippet props. Mode derivation removed
  from eidos (it's now in soma). Local open $state removed (now
  bindable via the soma component).
- Demo +page.svelte: `<Words.Drawer snippet={snippetProps} />`
  collapses to plain `<Words.Drawer />` — the soma provider hands the
  parent snippet down internally.

DRAWER-CANON-3 — verify:
- 214/214 tests pass in soma+morfo scope (no regressions).
- npx tsc --noEmit clean for words area.
- Visual verification: drawer still renders with DOCUMENT/OUTLINE/
  STATS/SUGGESTIONS in default mode; context-switching to table /
  code / list / format still works; aside element now carries
  role='complementary', aria-label from morfo translationRef,
  data-words-drawer-mode reflecting current panel.

The eidos drawer now passes the same canon checks as every other
Words part: morfo declares its contract, soma owns the state, eidos
only paints. The schema validator can verify the drawer's attrs, the
eidos lint can check selector usage, sema can react to the toggle
event.

Demo header chips reflect the new contract: PARTS 19→20, EVENTS
11→12.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

dev

15dbf0f8fd

feat(words): drawer contextual panels — format/image/table/code/list (DRAWER-2)

The companion drawer now switches its body content based on where the
caret is. Five context modes wired to runCommand on the snippet
provider, all reading current state to show active highlights:

- format: B/I/U/S/code mark toggles (data-active reflects activeMarks),
  align L/C/R/J (data-active reflects currentTextAlign), Add link (URL
  prompt) + Remove (canUnlink-gated), Clear formatting.
- image: read-only view of src, alt (italic + "(missing)" placeholder
  when empty), caption, status (pending → accent tint, error → threat
  tint). Edit-image flow deferred to a follow-up (needs a new
  updateImage operation; for the spike, view-only is enough to
  validate the panel works).
- table: Rows +/- · Columns +/- · Row/Col header toggles · Striped /
  Compact toggles · Cell tone Plain/Muted/Accent. Every toggle reads
  current* state so the user sees which buttons are currently applied.
- code: Plain + TS/JS/CSS/HTML/JSON/Bash/Py language chips,
  data-active reflects currentCodeLanguage.
- list: Bullet/Numbered/Check kind chips · ⇤ Outdent / ⇥ Indent.

All buttons use onmousedown preventDefault so the editor selection
isn't dropped when clicking a drawer action (would otherwise lose the
target paragraph / table cell / list item).

CSS adds a generic .data-words-drawer-action chip (with hover, active,
ghost, full, risk tones) + readonly-text style with pending/error
tints. Reused across all panels, so adding new panels later means
markup-only, no CSS extension.

Verified in browser:
- Click table cell → drawer shows TABLE panel with Striped active
  (matches sample's striped=true) and Plain tone active (matches
  default cell tone).
- Click code block → drawer shows CODE panel with TS chip active
  (matches sample's language='ts').
- Click list item → drawer shows LIST panel with kind + indent
  actions.

Concept A+D validated visually: ONE surface replaces what would
otherwise be bubble menu + slash menu + heading picker + language
picker + table popover + image controls + link editor. The contextual
switch happens automatically; the user just moves the caret.

DRAWER-3 (polish): mobile bottom-sheet layout, A/B toggle in demo
controls, image-edit flow — deferred to next session if needed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

dev

23f90a775c

feat(words): companion drawer right-rail (concept A+D) — shell + default panel (DRAWER-1)

A radical disposition shift: instead of N fragmented popovers (bubble
menu + slash menu + link editor + heading picker + language picker +
table popover + image controls) we mount ONE contextual right-rail
that changes its panel based on what the user is editing.

Spike-1 surface (this commit) ships:

- New eidos component <Words.Drawer> (words-drawer.svelte) — a
  collapsible right sidebar with mode detection derived from snippet
  props (currentBlock + selection). 6 modes mapped: default | format
  | image | table | code | list.
- Default panel (visible when no contextual mode active):
  - OUTLINE — flat list of h1/h2/h3 headings, indented by level
  - STATS — word count + char count + reading time (200wpm)
  - SUGGESTIONS — writer-coaching warnings derived from the document
    model: missing alt text, long paragraphs (>600 chars), heading
    skip patterns (h3 without h2 above). Empty state shows "Nothing
    flagged" in affirm color.
- Contextual panels (format/image/table/code/list) render a
  placeholder "coming soon" message — implemented in DRAWER-2.
- Eidos CSS:
  - Provider host gains a grid-template-areas layout when a drawer is
    present: 'toolbar drawer / content drawer / status drawer'.
    Existing children (toolbar/content/placeholder/status) get
    explicit grid-area assignments.
  - Drawer collapses to 2.25rem (just the chevron) when closed.
    16rem default open.
  - Outline items, stats grid, warning list each have their own
    discrete styling.

Demo (+page.svelte):
- New `showDrawer` state (default true).
- Children snippet refactored to capture full snippetProps via @const
  destructure (kept selectedLink working).
- <Words.Drawer snippet={snippetProps} /> mounted inside the children
  block alongside the other parts.

Visual verification:
- Drawer renders as a dedicated right column with the editor content
  on the left, no layout overlap.
- DOCUMENT header + OUTLINE shows "H1 ActiveUIX Words", STATS shows
  73 words / 508 chars / 1 min reading, SUGGESTIONS shows "Nothing
  flagged" (sample doc has no warnings).
- Collapse button toggles open/closed via animated inline-size
  transition.

Next:
- DRAWER-2: format/image/table/code/list contextual panels wired to
  runCommand.
- DRAWER-3: polish (mobile drawer-as-bottom-sheet, transitions, A/B
  toggle in demo to compare classic toolbar vs companion drawer).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

3 Commits (9a5f3c2359f60b2d72639eafd1739f4317be20ff)