@design.estate/dees-catalog 9.6.0 → 9.7.0

package/readme.plan.md

@@ -1,671 +0,0 @@
-# Catalog modernization — September 2026
-
-## Forms and the full input family — September 2026
-
-Continue the approved modern Apple app direction across every implemented input
-and the form/submit/label owners, in consultation with Fable. Consolidate field
-dimensions, label/helper rhythm, focus and disabled presentation in the input
-foundation; retain compact settings rows and roomier document editors. Correct
-compound controls that prevent real editing or keyboard use. Preserve existing
-values, change events, validation, file/crop operations and editor engines.
-
-Replace disconnected demo galleries with shared workspace settings examples and
-focused component/state views. Cover text/password, dropdown/date, phone/IBAN,
-checkbox/toggle/radio/segmented selection, quantities, tags/type lists/editable
-lists, file/avatar input, code and rich/block editors. The empty search-select
-source has no registered implementation; use the existing searchable dropdown.
-Keep all demo state local and deterministic, with real form collection.
-
-Review desktop bright/dark and touch renders with Fable. Verify field editing,
-keyboard/focus/disabled states, grouped alignment, form values and touched editor
-behavior; run focused native tests, strict checks, build and documentation/theme
-checks sequentially. Commit the verified changes on main after the stable-diff
-gate. This batch does not include a release.
-
-Implemented: the shared field/compound recipes, 18-input preferences showcase,
-focused demos and corrected API discovery. Phone/IBAN edits publish once through
-their shadow boundary; form Enter skips disabled fields and preserves native
-button actions. Avatar actions remain visible, rich text retains disabled content,
-and collection edits survive submission. Fable accepted the final dark, bright,
-grouped, validation and touch captures. Production build, strict new-test check,
-37 focused browser tests, component documentation and theme ratchet checks pass.
-The preview remains on port 3002. Final local commit review follows verification.
-
-## Charts, App UI and storage workspace
-
-Modernize the three families together following the reviewed Fable direction.
-Charts get shared framing, readable series and deterministic demos; fix reconnect
-initialization, empty data and reduced-motion behavior at the chart owners.
-Retain existing chart engines, distributed license notices, ranges and data contracts.
-App UI gets visible sidebar controls, keyboard-accessible navigation and tabs,
-consistent spacing and an integrated demo with overview, analytics and files.
-Storage gets one toolbar/content frame, discoverable row actions and a preview
-that becomes the active pane on narrow screens with an explicit return control.
-Preserve provider operations, confirmations and existing events. Use valid demo
-assets and local deterministic state. Fix request/lifecycle defects that block
-these interactions without unrelated routing or persistence changes.
-
-Verify native keyboard/touch interactions, reconnects, empty/loading/error states,
-preview navigation and representative storage operations. Run focused regression
-tests, strict type checks, build and theme ratchet; review rendered desktop and
-phone results with Fable. Commit the verified task locally after the final gate.
-No release or dependency upgrade is included.
-
-The batch also consolidates segmented controls in the existing
-`dees-input-multitoggle`: keyed options, boolean binding order, native keyboard
-selection, disabled choices, compact/touch sizing and resize-safe thumb geometry.
-Storage, codebox, composer and the affected demos share it. Codebox preserves
-explicit pinning of its automatic diff layout. The README now starts with a
-pattern/task chooser and has a generated tag/source index verified by
-`node scripts/check-component-docs.cjs`.
-
-Implemented and reviewed in bright/dark desktop and phone layouts. Fable's visual
-findings are resolved. Native verification covers keyboard/touch selection,
-chart reconnects and compact axes, retained diff choices, preview load generations,
-move confirmation, edit/save, and guarded navigation. Build, strict checks,
-theme ratchet and README index checks pass. The full suite identified outdated
-consumer selectors; all affected consumer and workspace regression tests pass
-after updating them. Final local commit follows the stable-diff review.
-
-## Operational overview components — September 2026
-
-Modernize `dees-statsgrid` and `dees-dataview-statusobject` as a coherent pair
-following the table pass. Keep existing tile types, status data and action
-contracts. Give values, labels and explanations clear hierarchy on quiet opaque
-surfaces. Expose actions to mouse, keyboard and touch; retain existing safe tile
-click and context menus. Render status text and distinct status shapes, allow
-long detail values to wrap, and show honest copy feedback. Fix the metric grid's
-container sizing and clamp spans to available columns without changing the
-configured minimum width/gap semantics. Use connection-owned resize observation
-and respect reduced motion.
-
-Replace the static galleries with deterministic interactive overview and service
-health scenarios, plus discoverable examples of all nine tile types. Consult
-Fable before the implementation and on actual bright/dark/touch renders. Verify
-actions, responsive layout, state transitions, copy success/failure and existing
-live updates; run native build/strict checks and the theme ratchet. Commit the
-verified batch locally after the final sanity gate. No release in this batch.
-
-## Session scroll shadows and search toolbar
-
-Correct the session list's floating shadow band: the 16px edge overlay was
-casting an outer box shadow from its inner edge. Use the shared transcript
-contact-shadow gradient inside the overlay, darkest at the scroll boundary.
-Keep overflow-driven visibility and hit targets unchanged.
-Move New group into a compact action beside search and remove the bottom row.
-Keep the action visible while filtering, preserve its request event, and let the
-demo clear search after successful creation. Use distinct 44px touch targets.
-Verify both appearances, scrolling endpoints, filtering, keyboard/touch creation
-and the existing session tests; review the rendered result with Fable.
-
-The taller viewport exposed browser scroll anchoring moving the list after drag
-auto-scroll stopped. Disable anchoring only during active drags so moving drop
-placeholders cannot shift the manually controlled viewport; restore normal
-anchoring when the gesture ends.
-
-Implemented and reviewed with Fable in dark, bright and touch layouts. Build,
-strict checks for both changed tests, all 49 session/resource/demo tests and the
-theme ratchet pass. Browser checks confirm flush inward shadows, end-of-scroll
-visibility, stable search width, keyboard and touch creation, retained button
-focus, and distinct 44px input/button targets with an 8px gap on touch devices.
-
-## Session states and harness identity
-
-Add optional harness identity and precise status labels to session metadata.
-Keep a stable three-line row (title, status, harness/time) so both the state and
-the harness remain visible at sidebar widths. Use small semantic state icons,
-stationary warning/error edge cues, and activity-only reduced-motion-safe pulses.
-Preserve controlled selection, expansion, grouping, resources and ordering; show
-attention counts even when groups are collapsed. Make identity and state searchable.
-
-Replace the repetitive session demo with a bounded two-pane app and curated
-sessions. Let users step through starting, working, feedback, approval, completion
-and failure using existing question and permission cards. Keep all transitions
-local and deterministic, with no timers, and retain resource and modal examples.
-Review both themes and phone layouts with Fable, run the session/resource tests,
-strict test checks and build, then commit the verified changes locally.
-
-Implemented and reviewed with Fable. The native build, strict checks for both
-changed test files, 48 session/resource/demo tests and theme ratchet pass.
-Browser checks cover both themes, seven visible desktop states, real approval
-and question responses, reduced motion, dialog-owned Actions, and touch navigation
-with focus restored to the selected row. Resources remain attached to the final
-session so their child rows do not hide other states on the initial desktop view.
-
-## Transcript scroll depth
-
-Give the transcript fixed top and bottom contact shadows so it reads as passing
-under the header and composer. Keep the 20px gradients inside the transcript
-width, hide the upper shadow when there is no toolbar, and leave scroll/follow
-behavior and nested transcript fades untouched. Use a shared theme token for
-the stronger dark appearance. Verify both themes, scroll endpoints, empty and
-toolbar-free states, suggestions, the jump control, and the narrow drawer.
-
-Implemented with a passing build, 20 chat browser tests, and the theme ratchet.
-Browser checks confirm stationary edges, toolbar-aware upper shadow visibility,
-unchanged hit targets, and unobstructed suggestions and narrow drawers.
-
-## Chat composer and sidebar alignment
-
-Integrate reply context into the composer's input surface through a named
-`context` slot and an accessible text description. Keep the composer at a stable
-position inside the transcript column so its width follows the conversation and
-the desktop sidebar extends to the bottom. Preserve draft, attachment, suggestion,
-IME, send/steer, and narrow drawer behavior. Use one field border/focus treatment,
-an empty slot with no reserved height, and bounded context text. Verify desktop
-geometry, narrow drawer hit targets, keyboard focus, and both themes with Fable
-before the native checks and local main commit.
-
-Implemented and reviewed with Fable. The focused chat/composer suite passes 42
-tests, including preserved draft and selection, field focus, slot geometry, and
-drawer hit testing. Strict checks cover both changed test files. Browser checks
-cover both themes, the embedded desktop view, and a real coarse-pointer phone
-context. The narrow chat owns clipping of its closed off-canvas drawer.
-
-## Harness components
-
-Continue the shared visual system across chat, composer, transcript cards,
-session navigation and supporting controls. Use neutral grouped surfaces,
-consistent action heights and typography, opaque chrome, and small status
-indicators. Session selection keeps constant geometry. Retain event-driven
-outcome flashes and scroll-edge indicators; replace perpetual surface scans
-with small opacity pulses that stop under reduced motion.
-
-Preserve public APIs, streaming, virtualization, nested subagent disclosure,
-keyboard behavior, attachments, steering and resource drag operations. Refresh
-the demos with the shared catalog presentation and review rendered results with
-Fable before the native build/tests and final commit gate.
-
-Implemented and reviewed with Fable 5.1. The full catalog suite passed 405 tests;
-final responsive polish is covered by the affected harness tests and a fresh
-build. Browser checks cover both themes, 320/390px layouts, visible demo responses,
-session-modal dismissal, subagent activity and reduced-motion behavior.
-
-## Harness touch and adaptive diffs
-
-Following the 9.0.0 release, add automatic codebox layouts using the codebox's
-own width, while retaining concrete manual choices and transcript view state.
-Keep automatic resize updates limited to the 640px boundary, preserve unfolded
-context, and disconnect observation outside auto mode or after removal.
-
-Expose session Actions alongside the independent expander, with 44px coarse
-pointer targets and ContextMenu/Shift+F10 access through the existing context
-event. The session demos open dialog-owned menus synchronously, show action
-results, and restore focus through the menu lifecycle, including group moves.
-Correct the shared context menu's hidden-focus and hover-based keyboard handling
-so these controls support arrow navigation, Enter, and isolated Escape dismissal.
-
-Implemented with a passing native build, 80 focused browser tests, and strict
-type checks for the four changed test files. Browser checks cover automatic and
-manual diff layouts, 44px touch targets, dialog ownership, keyboard menu actions,
-and focus restoration after dismissal and session moves. Real coarse-pointer
-browser assertions also confirm resting surfaces remain unchanged after tapping
-and dismissing Actions; desktop hover feedback remains available.
-
-## Catalog foundations
-
-Approved scope: modern Apple app styling, coordinated with Fable 5.1, with an
-emphasis on performance and a coherent catalog. The user also approved improving
-the pages and demos and requested stable settings-window dimensions.
-
-- Shared tonal surfaces, compact control proportions, readable semantic colors,
-  grouped form rows, and opaque modal and dropdown surfaces.
-- Native modal focus containment, dismissal and restoration; transient controls
-  mount inside their owning dialog. Sidebar windows reserve a fixed height.
-- Explicit form submission separate from focus, accessible text/picker controls,
-  and consistent button behavior across pointer and keyboard activation.
-- Four complementary pages and shared layouts for the core button, form, submit,
-  text input, and modal demos. Settings retain a draft across navigation.
-- Native build, contrast/form/modal regressions, full catalog tests, and browser
-  checks in both appearances and compact viewports precede the local main commit.
-
-The related connection/directive lifecycle correction is published in
-`dees-element` 3.1.0, and composed demo instance discovery is published in
-`dees-wcctools` 3.9.4. The catalog consumes both published packages.
-
----
-
-# Plan: dees-workspace-terminal PTY support
-
-## Context
-
-`dees-workspace-terminal` already uses xterm.js, so the terminal renderer can handle TUI escape sequences. The missing pieces were PTY-aware runtime dimensions, process resize propagation, and safe process/listener cleanup. A native `node-pty` backend is intentionally out of scope for `dees-catalog` because this package is browser-side UI; backend PTY implementations should live in a consuming app or optional companion backend package.
-
-## Implemented Scope
-
-1. Add terminal-aware spawn options to `IExecutionEnvironment.spawn()`.
-2. Add optional process resize support to `IProcessHandle`.
-3. Forward terminal dimensions and resize support through `WebContainerEnvironment`.
-4. Spawn terminal processes with current xterm `cols`/`rows`.
-5. Resize active non-exited processes whenever xterm is fitted after attach or container resize.
-6. Preserve raw PTY output by not forcing `convertEol` in interactive terminal tabs.
-7. Clean up terminal input listeners, process input writers, output pipes, and resize observers on exit/close/disconnect.
-8. Guard async setup/spawn paths so disconnecting the component while libraries or environments load cannot leave unmanaged processes.
-
-## Verification
-
-- `pnpm run build` passes.
-- No existing terminal/WebContainer browser smoke test exists in `test/`; manual verification should cover shell startup, TUI rendering, resize, Ctrl-C latency, large output, and an opencode session against a real PTY backend.
-
----
-
-# Plan: dees-stepper — adopt dees-tile + optional overlay window layer
-
-> First line (per CLAUDE.md): Please reread `/home/philkunz/.claude/CLAUDE.md` before continuing.
-
-## Context
-
-Today `dees-stepper` is an inline-only layout component: it hard-codes each step as a custom `.step` `<div>` with its own border / background / box-shadow / border-radius, and its `:host` is `position: absolute; width: 100%; height: 100%;` so it can only live inside a bounded parent container.
-
-The user wants it to behave more like `dees-modal`:
-
-1. Each step should be wrapped in a `<dees-tile>` — the unified "rounded on rounded" frame used by modals and panels — rather than a bespoke `.step` div.
-2. A `DeesWindowLayer` should be added behind the stepper, the same way `DeesModal.createAndShow` does, so the stepper can appear as an overlay on top of the page.
-
-User has confirmed (via AskUserQuestion in this session):
-- **API**: keep the current inline usage working AND add a static `createAndShow()` like dees-modal.
-- **Layout**: keep the current vertical stack + SweetScroll behavior inside the overlay (don't switch to single-tile swap).
-- **Nav placement**: split header/footer — goBack + step counter go into the `dees-tile` header slot; the title stays in the content area; the tile footer is used for optional next/submit buttons supplied per-step.
-
-No external consumers of `dees-stepper` were found inside this package (`grep dees-stepper|DeesStepper` only matches its own source, demo, index, changelog, readme). External consumers in dependent projects may exist — the refactor is kept backward-compatible for the inline path.
-
-## Current state (reference)
-
-**File:** `ts_web/elements/00group-layout/dees-stepper/dees-stepper.ts` (lines 20–299)
-
-- `IStep` interface — `title`, `content: TemplateResult`, `validationFunc`, `onReturnToStepFunc`, internal flags (lines 20–27).
-- `:host { position: absolute; width: 100%; height: 100%; }` (lines 59–63).
-- `.stepperContainer` — absolute, 100% w/h, `overflow: hidden`, holds SweetScroll (lines 64–69).
-- `.step` — max-width 500, min-height 300, `border-radius: 12px`, theme background, theme border, `box-shadow: 0 8px 32px rgba(0,0,0,0.4)`, `filter: opacity(0.55) saturate(0.85)`, transform transition (lines 71–97). **These frame styles overlap with what `dees-tile` already provides.**
-- `.step.selected` — `filter: opacity(1) saturate(1)` (lines 89–93). **Scroll-through visual cue, keep.**
-- `.step.hiddenStep` — `filter: opacity(0)` (line 95). **Keep.**
-- `.step.entrance` — faster transition variant for first-render (lines 99–105). **Keep.**
-- `.step .stepCounter` — `position: absolute; top: 12px; right: 12px;` pill (lines 111–121). **Move into header slot as a flex child.**
-- `.step .goBack` — `position: absolute; top: 12px; left: 12px;` pill + icon + hover (lines 123–161). **Move into header slot as a flex child.**
-- `.step .title` — centered, 24px, 64px top padding (lines 163–171). **Keep inside the tile's content slot; remove the 64px top padding since goBack/counter no longer overlap it.**
-- `.step .content` — 32px padding (lines 173–175). **Keep.**
-- `render()` (lines 179–204) — maps `steps` to `.step` divs.
-- `setScrollStatus()` (lines 226–263) — SweetScroll container setup + step validation kick-off. **Keep mostly as-is; selectors still target `.step`/`.selected` so rename cautiously.**
-- `firstUpdated` (lines 210–218), `updated` (lines 220–222), `goBack` (lines 265–282), `goNext` (lines 284–298) — untouched in behavior, only DOM selectors may need adjusting.
-
-**Reference files (read, do not modify):**
-- `ts_web/elements/00group-overlay/dees-modal/dees-modal.ts` — canonical `createAndShow` + `destroy` + window-layer coordination + z-index registry usage.
-- `ts_web/elements/00group-layout/dees-tile/dees-tile.ts` — slot API: `slot="header"`, default slot, `slot="footer"`. Auto-hides footer when slotted nodes are empty. Uses `part="outer"`, `part="header"`, `part="content"`, `part="footer"` for external shadow-part styling.
-- `ts_web/elements/00group-overlay/dees-windowlayer/dees-windowlayer.ts` — `createAndShow({ blur })`, `destroy()`, dispatches `clicked` event on backdrop click, uses `zIndexRegistry`.
-- `ts_web/elements/00group-layout/dees-stepper/dees-stepper.demo.ts` — existing inline demo.
-
-## Target state
-
-### 1. IStep interface — add one optional field
-
-```ts
-export interface IStep {
-  title: string;
-  content: TemplateResult;
-  footerContent?: TemplateResult;   // NEW: optional, rendered in dees-tile footer slot
-  validationFunc?: (stepper: DeesStepper, htmlElement: HTMLElement, signal?: AbortSignal) => Promise<any>;
-  onReturnToStepFunc?: (stepper: DeesStepper, htmlElement: HTMLElement) => Promise<any>;
-  validationFuncCalled?: boolean;
-  abortController?: AbortController;
-}
-```
-
-Form-based steps don't need `footerContent` — their `dees-form-submit` stays inside the form in the content slot (as today). `footerContent` is for non-form steps that need an explicit primary action, or for any step that wants buttons in the conventional tile footer location.
-
-### 2. New overlay-mode state + API on DeesStepper
-
-```ts
-@state() accessor overlay: boolean = false;
-@state() accessor stepperZIndex: number = 1000;
-private windowLayer?: DeesWindowLayer;
-
-public static async createAndShow(optionsArg: {
-  steps: IStep[];
-}): Promise<DeesStepper> {
-  const body = document.body;
-  const stepper = new DeesStepper();
-  stepper.steps = optionsArg.steps;
-  stepper.overlay = true;
-  stepper.windowLayer = await DeesWindowLayer.createAndShow({ blur: true });
-  stepper.windowLayer.addEventListener('click', async () => {
-    await stepper.destroy();
-  });
-  body.append(stepper.windowLayer);   // (already appended inside createAndShow, but mirror dees-modal's pattern; see note)
-  body.append(stepper);
-  stepper.stepperZIndex = zIndexRegistry.getNextZIndex();
-  zIndexRegistry.register(stepper, stepper.stepperZIndex);
-  return stepper;
-}
-
-public async destroy() {
-  const domtools = await this.domtoolsPromise;
-  const container = this.shadowRoot!.querySelector('.stepperContainer');
-  container?.classList.add('predestroy');
-  await domtools.convenience.smartdelay.delayFor(200);
-  if (this.parentElement) this.parentElement.removeChild(this);
-  if (this.windowLayer) await this.windowLayer.destroy();
-  zIndexRegistry.unregister(this);
-}
-```
-
-**Note on `body.append(windowLayer)`:** `DeesWindowLayer.createAndShow` already appends the window layer to `document.body` (line 27 of `dees-windowlayer.ts`). `dees-modal.ts:71` still calls `body.append(modal.windowLayer)` — that's either a no-op (already-attached nodes) or a re-parent to keep ordering. I will match dees-modal's exact sequence verbatim to avoid introducing subtle differences; if it's a bug in dees-modal it is out of scope for this task.
-
-**Minimum new scope for createAndShow:** just `steps` for now. No `onComplete`, no `showCloseButton`, no width options. Future-proofing via additional options is an explicit follow-up — this plan keeps scope razor-sharp (per CLAUDE.md). The caller can already wire completion via the last step's `validationFunc` calling back into their own code.
-
-### 3. Render template — wrap each step in `<dees-tile>`
-
-```ts
-public render() {
-  return html`
-    <div class="stepperContainer ${this.overlay ? 'overlay' : ''}" style="${this.overlay ? `z-index: ${this.stepperZIndex}` : ''}">
-      ${this.steps.map((stepArg, i) => {
-        const isSelected = stepArg === this.selectedStep;
-        const isHidden = this.getIndexOfStep(stepArg) > this.getIndexOfStep(this.selectedStep);
-        const isFirst = i === 0;
-        const stepNumber = i + 1;
-        return html`
-          <dees-tile
-            class="step ${isSelected ? 'selected' : ''} ${isHidden ? 'hiddenStep' : ''} ${isFirst ? 'entrance' : ''}"
-          >
-            <div slot="header" class="step-header">
-              ${!isFirst
-                ? html`<div class="goBack" @click=${this.goBack}>
-                    <span>&larr;</span> go to previous step
-                  </div>`
-                : html`<div class="goBack-spacer"></div>`}
-              <div class="stepCounter">Step ${stepNumber} of ${this.steps.length}</div>
-            </div>
-            <div class="step-body">
-              <div class="title">${stepArg.title}</div>
-              <div class="content">${stepArg.content}</div>
-            </div>
-            ${stepArg.footerContent
-              ? html`<div slot="footer" class="step-footer">${stepArg.footerContent}</div>`
-              : ''}
-          </dees-tile>
-        `;
-      })}
-    </div>
-  `;
-}
-```
-
-**Key detail:** on the first step, render a `.goBack-spacer` (empty div) in the header instead of nothing — so the `stepCounter` stays right-aligned via `justify-content: space-between`. Without a spacer, flex would left-align the counter on step 1.
-
-### 4. CSS changes
-
-**Remove from `.step`:**
-- `border-radius: 12px;`
-- `background: ${cssManager.bdTheme(...)};`
-- `border: 1px solid ${cssManager.bdTheme(...)};`
-- `color: ${cssManager.bdTheme(...)};`
-- `box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);`
-- `overflow: hidden;`
-
-**Why:** `dees-tile` owns all of these now. The `.step` selector still exists (since `dees-tile` has `class="step ..."` on it), but it only controls the outer animation wrapper: `max-width`, `min-height`, `margin`, `filter`, `transform`, `transition`, `user-select`, `pointer-events`.
-
-**Keep on `.step`:**
-- `position: relative;`
-- `pointer-events: none;` + `.step.selected { pointer-events: all; }`
-- `max-width: 500px;` / `min-height: 300px;`
-- `margin: auto; margin-bottom: 20px;`
-- `filter: opacity(0.55) saturate(0.85);` + `.selected { filter: opacity(1) saturate(1); }`
-- `.hiddenStep { filter: opacity(0); }`
-- All the cubic-bezier transitions (transform/filter/box-shadow — but box-shadow is now a no-op since dees-tile provides the shadow; leave the transition spec in so we don't have to re-check browser parsing; or just drop `box-shadow` from the transition list — I'll drop it for cleanliness).
-- `.step.entrance` + `.step.entrance.hiddenStep { transform: translateY(16px); }`
-- `.step:last-child { margin-bottom: 100vh; }`
-
-**Add for dees-tile shadow enhancement:** use `::part(outer)` to apply the modal-style elevated shadow only when in overlay mode (optional polish — inline mode stays flat):
-```css
-.stepperContainer.overlay dees-tile.step::part(outer) {
-  box-shadow:
-    0 0 0 1px ${cssManager.bdTheme('hsl(0 0% 0% / 0.03)', 'hsl(0 0% 100% / 0.03)')},
-    0 8px 40px ${cssManager.bdTheme('hsl(0 0% 0% / 0.12)', 'hsl(0 0% 0% / 0.5)')},
-    0 2px 8px ${cssManager.bdTheme('hsl(0 0% 0% / 0.06)', 'hsl(0 0% 0% / 0.25)')};
-}
-```
-This exactly mirrors the dees-modal::part(outer) shadow stack (dees-modal.ts:157–161) so the overlay stepper reads as "same visual language as modal."
-
-**Restyle `.step-header` (NEW — the `<div slot="header">`):**
-```css
-.step-header {
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-  gap: 12px;
-}
-```
-
-**Restyle `.step .stepCounter` → `.step-header .stepCounter` (move from absolute to flex child):**
-- Drop `position: absolute; top: 12px; right: 12px;`
-- Keep everything else (padding, font-size, border-radius, background, border).
-
-**Restyle `.step .goBack` → `.step-header .goBack` (move from absolute to flex child):**
-- Drop `position: absolute; top: 12px; left: 12px;`
-- Keep everything else (padding, font-size, border-radius, background, border, hover/active states).
-
-**Add `.goBack-spacer`:**
-```css
-.goBack-spacer { width: 1px; }   /* placeholder so flex space-between works on step 1 */
-```
-
-**Restyle `.step .title`:**
-- Drop `padding-top: 64px;` — no longer overlaps anything since header is in its own slot.
-- Keep `text-align: center; font-family: 'Geist Sans', sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; color: inherit;`
-- Add `padding-top: 32px;` (or similar) so there's consistent breathing room above the title inside the tile content.
-
-**Add `.step-footer` (new container for `stepArg.footerContent`):**
-```css
-.step-footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 12px 16px;
-}
-```
-
-**Add overlay-mode positioning:**
-```css
-.stepperContainer {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-.stepperContainer.overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-}
-.stepperContainer.predestroy {
-  opacity: 0;
-  transition: opacity 0.2s ease-in;
-}
-```
-
-**Adjust `:host` for dual-mode:**
-```css
-:host {
-  position: absolute;      /* inline default */
-  width: 100%;
-  height: 100%;
-  font-family: ${cssGeistFontFamily};
-  color: var(--dees-color-text-primary);
-}
-:host([overlay]) {
-  position: fixed;         /* overlay mode */
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-}
-```
-
-The `overlay` @state needs to reflect to an attribute for the `:host([overlay])` selector to work. Since `@state` doesn't reflect attributes, use `@property({ type: Boolean, reflect: true })` instead — change the decorator accordingly.
-
-### 5. Imports to add in `dees-stepper.ts`
-
-```ts
-import { DeesWindowLayer } from '../../00group-overlay/dees-windowlayer/dees-windowlayer.js';
-import { zIndexRegistry } from '../../00zindex.js';
-import { cssGeistFontFamily } from '../../00fonts.js';
-import '../../00group-layout/dees-tile/dees-tile.js';
-```
-
-`dees-tile` side-effect import registers the custom element. `cssGeistFontFamily` is only needed if I add it to `:host` (which I want, to match modal).
-
-### 6. SweetScroll selector stability
-
-`setScrollStatus()` selectors target `.step` and `.selected` (lines 228–229). These continue to match since I'm keeping those class names on the `<dees-tile>` elements. **No selector changes needed.**
-
-One subtlety: `offsetTop` / `offsetHeight` on `<dees-tile>` should still work — the tile's `:host` is `display: flex; flex-direction: column;` which participates in layout. I'll verify visually in the demo.
-
-### 7. Demo update
-
-**File:** `ts_web/elements/00group-layout/dees-stepper/dees-stepper.demo.ts`
-
-Current demo renders one inline stepper directly. I'll keep that and add an **overlay launcher button** above it:
-
-```ts
-export const stepperDemo = () => html`
-  <div style="padding: 16px;">
-    <dees-button @click=${async () => {
-      const stepper = await DeesStepper.createAndShow({
-        steps: [/* same steps as inline demo */],
-      });
-    }}>Open stepper as overlay</dees-button>
-  </div>
-  <dees-stepper .steps=${[/* ... existing inline demo steps ... */]}></dees-stepper>
-`;
-```
-
-Extract the step definitions into a `const demoSteps = [...]` above the template so both the inline and overlay paths reuse them (DRY). Import `DeesStepper` at the top of the demo file.
-
-## Files to modify
-
-1. **`ts_web/elements/00group-layout/dees-stepper/dees-stepper.ts`** — main refactor (IStep, imports, render, styles, createAndShow, destroy, overlay state).
-2. **`ts_web/elements/00group-layout/dees-stepper/dees-stepper.demo.ts`** — add overlay launcher button, extract shared `demoSteps` const, import `DeesStepper`.
-
-**Files explicitly NOT modified:**
-- `dees-tile.ts` — used as-is via its slot API.
-- `dees-windowlayer.ts` — used as-is via `createAndShow` / `destroy` / `click` event.
-- `dees-modal.ts` — reference only.
-- `00zindex.ts` — reference only.
-
-## Verification
-
-1. **Build**: `pnpm run build` — must pass with no TS errors. Pure refactor, no new dependencies, no lib-check regressions expected.
-
-2. **Inline demo (backward compat)**:
-   - Start the demo server (port 8080 is already running) and navigate to the dees-stepper demo page.
-   - Confirm the stepper renders inline exactly like before: first step centered, subsequent steps dimmed below, scroll-through animation on goNext / goBack.
-   - Fill out the first form, submit → stepper scrolls to step 2. Click goBack → scrolls back.
-   - Confirm the `dees-tile` frame is visible on each step (rounded, bordered, themed) and that the title + form are inside the tile's content area.
-   - Confirm goBack button + step counter sit in the tile's header row, space-between, left/right respectively.
-
-3. **Overlay demo (new path)**:
-   - Click the "Open stepper as overlay" button.
-   - Confirm a `dees-windowlayer` with blur appears behind the stepper.
-   - Confirm the stepper fills the viewport (fixed, 100vw×100vh).
-   - Confirm z-index stacking: stepper above window layer above page content.
-   - Click the window layer (outside the tile) → stepper animates out, then destroys along with the window layer.
-   - Re-open and step through forward & back — behavior identical to inline mode.
-
-4. **Playwright visual check** (per CLAUDE.md: screenshots MUST go in `.playwright-mcp/`):
-   - `.playwright-mcp/dees-stepper-inline.png` — inline mode, step 1 with form.
-   - `.playwright-mcp/dees-stepper-overlay.png` — overlay mode, same step.
-   - `.playwright-mcp/dees-stepper-overlay-step3.png` — overlay mode mid-flow, to verify scroll-stack visual.
-   - Both light and dark themes if the demo has a theme toggle.
-
-5. **Grep sanity**:
-   - Confirm `dees-stepper` has no new unexpected match locations: `grep dees-stepper ts_web/` should still only match stepper's own files.
-   - Confirm no `.step` class collisions elsewhere (unlikely — `.step` is a plain class name; all usages should be shadow-scoped to `dees-stepper`).
-
-## Open assumptions & deferred scope
-
-These are explicit defaults in this plan. If the user wants different behavior for any of them, they should flag it on review — each is a simple follow-up but not in scope right now (CLAUDE.md: stay focused, no "while we're at it"):
-
-- **No close button on overlay stepper.** Clicking the window layer backdrop is the only way to dismiss. Matches how dees-modal with `showCloseButton: false` behaves. Can add a close button in a follow-up.
-- **No `onComplete` callback in `createAndShow`.** The last step doesn't auto-destroy the overlay — the app controls it via the step's `validationFunc`. Can add a callback option in a follow-up.
-- **No width/size options in `createAndShow`.** The step tile continues to use the stepper's existing `max-width: 500px`. Can parameterize in a follow-up.
-- **Box-shadow in the `.step` transition list** is dropped from the transition for cleanliness — the box-shadow is now on `dees-tile::part(outer)` and doesn't change between selected/hiddenStep, so transitioning it was already a no-op.
-- **`pnpm start` / dev server path**: I'll reuse the existing server on port 8080 that was already listening when this session began; if that server doesn't serve the stepper demo, I'll start wcctools manually.
-
-## Risk
-
-- **Low-medium.** The change is localized to one component and its demo. No API removal, only an additive `createAndShow` + an optional `footerContent` field. External consumers of the inline API continue to work if they only set `steps` + `selectedStep`.
-- **Biggest risk:** SweetScroll's `offsetTop` / `offsetHeight` measurements on `<dees-tile>` may compute differently than on the former `<div class="step">` because `dees-tile` has an internal `display: flex; flex-direction: column;` host and a `.tile-outer { flex: 1; min-height: 0; }` inner frame. If the scroll math drifts, the mitigation is to keep the `.step` wrapper as an outer `<div>` that **contains** a `<dees-tile>`, rather than putting the class directly on `<dees-tile>`. That preserves the exact box model SweetScroll was measuring. I'll try the direct-class approach first (simpler) and fall back to the wrapper approach if the scroll target looks off in the demo.
-- **Second risk:** The `:host([overlay])` attribute selector requires `overlay` to be a reflected `@property`, not `@state`. I've already accounted for this in the plan (decorator change).
-
-## Coherent App UI workspace — 2026-09-07
-
-Follow-up design pass: align App UI chrome to one 40px desktop / 48px touch
-row. Use an opaque shared chrome tone, quiet collapsible section labels,
-consistent 13px navigation, inset tab selection and clearer activity/profile
-hierarchy. Preserve all demo flows and public controls. Tab selection should
-belong to the tab itself so scrolling/resizing cannot detach its highlight;
-fix sidebar selection after immutable badge updates in the owning component.
-Review rendered bright/dark, expanded/rail and phone results with Fable, verify
-keyboard and geometry regressions, then commit locally after the stable gate.
-Fable's rendered review approved the aligned chrome and CSS tab selection;
-follow-up refinements raise the dark account popover, add the compact drawer
-scrim, and improve tab close-control contrast. Activity streaming is explicitly
-opt-in through both the component and shell configuration, without a pulse.
-
-User-authorized implementation: compose every App UI shell component into one
-gateway example, improving shared components where composition exposes defects.
-Fable reviewed Browse / Inspect / Focus presets. Keep one per-instance model for
-service health, samples, files, settings and activity. Presets own layout; views
-own contextual navigation and tabs. Show a complete incident-to-recovery flow,
-service detail tabs, charts, searchable navigation, file editing, profile settings
-and activity/status updates without embedding standalone demo launchers.
-
-Fix the owning chrome for keyboard controls, profile focus/dismissal, context-menu
-anchoring, hidden panel focus and bottom-bar state preservation. Use existing
-multitoggle, table, form, modal, storage and chart components. No dependencies,
-timed simulations, external services or releases. Verify coherent state, guarded
-navigation, layout persistence, overlays, narrow/touch and both themes; send
-rendered compositions to Fable, then build/test and commit locally after the
-stable sanity gate. Document the composition map in the README.
-
-Implemented the shared gateway model and all nine App UI roles, with one
-walkthrough below the frame. Fable's rendered review led to compact navigation
-drawers, full-width activity, retained attention badges and less duplicate
-chrome. Also corrected two composition defects in their owners: the activity
-overlay's height extended beneath the status bar, and area-chart resizing
-revealed empty history instead of preserving the visible range. Regression
-coverage exercises shared state, settings guards, file activity, tab closing,
-menu/profile focus, compact navigation, table footer semantics and chart ranges.
-Rapid clicks also exposed duplicate profile portals. App-bar menu opens now
-invalidate stale asynchronous results on toggle or disconnect, with regression
-coverage for both profile and application menus.
-
-## Table modernization — approved 2026-09-06
-
-- Preserve the existing table data pipeline, stable row identity, editing, file drop, action contracts, virtualization and both sticky-header modes.
-- Correct action-column ownership, native keyboard action/sort controls, filtered-empty feedback, and visible/total/selected counts. Keep search state controlled through current APIs and remove obsolete search subscriptions.
-- Keep the shared tile shell. Introduce a stronger heading, integrated search and quieter row separators by default; preserve explicit grid options. Add optional column alignment without inferring value semantics. Use container width for toolbar/action compaction and coarse pointer for 44px touch controls.
-- Limit primary row actions to three; expose remaining actions through the existing context menu with relevance and ordering preserved. Compact layouts offer one Actions menu.
-- Replace the disconnected demo gallery with an interactive operations example and grouped advanced demonstrations, preserving discoverability of schema, filtering, editing, grid, server search, multi-sort and live/virtualized capabilities. Correct the table documentation.
-- Verify focused browser regressions, live-update/retention checks, build and theme ratchet. Review dark, bright, narrow and touch screenshots with Fable before the stable commit gate. Commit to local main when verified; a further release is not part of this step.
-
-Implemented with 11 focused table tests, 3 existing live-update/retention tests,
-7 context-menu tests, strict checks for the changed tests, a passing build and
-the theme ratchet. Browser checks cover both themes, real coarse-pointer 44px
-targets, centered checkboxes, both sticky-header modes, filtering, approval,
-creation, keyboard menu focus and virtualized updates. The hover defect came
-from the alpha row-hover color showing through the pinned column; it now has
-an opaque base. The contact shadow follows actual pinned-edge occlusion,
-including scrollbar gutters, resize and reconnect. Integrated editors delegate
-their focus ring to the cell; other editors retain their own single ring.
-Shared context menus restore focus to their shadow-DOM opener when dismissal
-would otherwise leave focus on the body. The detached watcher uses the element
-preset's default port 3002.
-Fable reviewed the final bright, dark and touch renders with no required visual
-changes. The page-floating header mirrors the original table's compact state
-and typography, including when a wide table is clipped by a narrower ancestor.