Skip to content

41-modals: one z-index scale, questions as modals, settings by container width, connection status dot (G3b G16 G19 G21) - #357

Open
AlexZ005 wants to merge 10 commits into
feat/41from
feat/41-modals
Open

41-modals: one z-index scale, questions as modals, settings by container width, connection status dot (G3b G16 G19 G21)#357
AlexZ005 wants to merge 10 commits into
feat/41from
feat/41-modals

Conversation

@AlexZ005

@AlexZ005 AlexZ005 commented Oct 11, 2026

Copy link
Copy Markdown
Collaborator

Lane 41-modals — roadmap 41 rows G3b, G16, G19, G21 (1.32 preview review).

G3b — one z-index scale; modals cover the logo, What's new tops every button

  • src/styles/ui.css: one ordered token list, lowest first: canvas < canvas-overlay < chrome < selection < dock < sheet < window < phone-bar < hud < side-panel < chrome-top < popover < toast-low < modal < onboarding < portal < toast. Old names stay as aliases.
  • Every page-level hard-coded z-index (80 sites) moved onto it; npm run check:zindex + a CI step fail a new literal ≥ 30 (// z-ok: <reason> for numbers code reads back).
  • The logo is top-bar chrome, so Settings and every app modal cover it. What's new is on --z-onboarding at every width.
  • The phone selection strip sits under docks and sheets (the z-index half of G20).

G16 — questions are modals, outcomes are toasts

  • All 826 toast call sites inventoried with a decision (see the lane STATUS). 12 become kit modals: Delete flow, Restore previous session?, the too-large-scene gate, delete a group, update/delete a prefab, rebuild discarding edits/sculpt, leave/join a session, export-all with nothing selected, local copy.
  • Requests from peers stay cards (like approvals).

G19 — settings rows reflow by their own width

  • ui/SettingRow is a container query (container: sr): under 560 px a wide control drops under its label, under 420 px every control but a switch does.

G21 — the Connect pill is a status dot

  • $lib/connectionStatus.js: grey / yellow pulsing / green / red + words for title and aria-label.
  • No reconnect toasts. After about 1 min the dot turns red and the notification centre gets one entry.
  • Phone chip = dot + chevron (+ mic); desktop bar = dot in place of the "Reconnecting" badge.

Proof

  • New / rewritten suites, green on the lane and RED on feat/40-int (counterfactual run):
    • z-scale-layering: the scale is ordered; the logo shows over Settings/Modules/Sessions/Templates on desktop + unfolded, and the corner buttons/toasts show over What's new.
    • toast-to-modal: Delete flow / restore / group delete / export-all are toasts there.
    • settings-narrow + settings-narrow-devices: unfolded, "Voice typing provider" had a 19 px text column (0 px at 700).
    • signaling-reconnect: reconnect toasts, no dot, a text chip.
  • Also green on the lane: flow-object-graphs, gltf-export-selection, ingest-gate, overload-guard, settings-autorestore-colors, terrain-procedural, object-delete, whats-new, whats-new-cloud, mobile-ui-fixes, connect-overlay, peers-popover, mobile-map.
  • svelte-check 300/40 (baseline); vitest 1963 green (incl. the new connectionStatus test); build green; check:tokens and check:zindex clean.
  • Screenshots (dark + light; desktop, N6 folded and unfolded): ~/.code/lanes-30/after-41/41-modals/shots/ — before/after probe, ab/ (G16, G21), g19-after/ (every Settings page at 7 sizes).
  • OWED on device: the N6 tab-switch reconnect, the restore modal at boot, Settings across a real fold/unfold.

Touch points

PhoneShell / phone.css / ui/Sheet (41-sheets), windowFocus / docking (41-windows), Controls (41-controls): z-index literals moved to tokens only.

🤖 Generated with Claude Code

AlexZ005 and others added 10 commits October 11, 2026 02:44
@AlexZ005 @claude
[feat] 41-modals G3b: one z-index scale as tokens; modals cover the l…
d0383d9 
…ogo, What's new tops every button

- src/styles/ui.css: ONE ordered scale, lowest first: --z-canvas < --z-canvas-overlay < --z-chrome
  (FABs, Controls pill, side drawers) < --z-selection (phone strip) < --z-dock < --z-sheet <
  --z-window (40..44) < --z-phone-bar < --z-hud < --z-side-panel < --z-chrome-top (logo, undo/redo,
  Connect, notes/notifications/peers/profile) < --z-popover (main menu, profile, Add, search) <
  --z-toast-low < --z-modal < --z-onboarding (What's new, Welcome, tours) < --z-portal (selects,
  context menus, drag ghosts) < --z-toast. Old names stay as aliases (--z-drawer/-bottom/-viewport/
  -menu) so a branch written before the scale still resolves.
- every page-level hard-coded z-index moved onto it (80 sites: Users 996-999, Connect/PhoneShell
  300, Add/ObjectSearch 999/1000, ThemedSelect 9999, drag chips 1400, Sheet 60/61/42/43,
  PhoneShell 36-44, HUD 38/46, FABs z-30, Inspector z-50, ...); in-component stacking stays < 30.
- G3b: the logo is --z-chrome-top, so Settings and every app modal cover it (was --z-menu 1300 over
  --z-modal 1100); What's new is --z-onboarding at every width (no focusStack, no wn-sheet hack).
- G20 (scale half): the phone selection strip sits on --z-selection, under docks and sheets, and no
  longer rises with the bar over an open main/profile/Add menu.
- scripts/check-zindex.cjs + `npm run check:zindex` + a CI step: a page-level literal (>= 30)
  fails; `z-ok: <reason>` marks the numbers code reads back (windowFocus, docking).
- mobile-ui-fixes: the wn-sheet checks become "the changelog outranks the logo at every width".

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@AlexZ005 @claude
[feat] 41-modals G16: blocking and destructive questions are kit moda…
71efb07 
…ls, toasts stay for outcomes

- inventory: all 826 toast call sites on feat/40-int classified (STATUS-41-modals.md) — 12 become
  modals, 5 reconnect toasts go to G21, the rest stay toasts (passive outcomes, failures, peer requests).
- SessionPrompts.svelte: "Restore previous session?" and the too-large-scene ingest gate were
  STATE-MIRRORED sticky toasts in Toasts.svelte; now compact true modals (ConfirmModal's look) open
  exactly while their store holds a value. X / Esc / outside = Dismiss (restore) or Cancel (gate).
- confirmDialog (showConfirm / showChoice) for the one-shot questions: Delete flow, delete a group and
  its children, update / delete a prefab, rebuild discarding vertex edits or a sculpt, leave a session
  to join another, join on another server, export everything with nothing selected, create a local copy.
- peer REQUESTS (load a session, take control, see a private scene) stay cards like approvals.
- suites: toast-to-modal (new; counterfactual red on feat/40-int); gltf-export-selection,
  overload-guard, settings-autorestore-colors, touch-actions, ingest-gate, invite-link-live read the
  dialogs instead of the toasts.
- z-scale-layering: the desktop What's new window is clamped below the top bar, so the logo check
  applies only where the window overlaps it.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@AlexZ005 @claude
[feat] 41-modals G19: settings rows reflow by their own width (contai…
f0bab7d 
…ner queries)

- ui/SettingRow: the row is an inline-size container (`container: sr`), its grid moves to `.sr-body`.
  Under 560 px of ROW a wide control (flagged `wide`, segmented, slider, or two pieces such as a
  control and its status badge) drops under the label at full width; under 420 px every control but a
  lone switch does. Replaces the 640 px VIEWPORT rule, which never fired on an unfolded phone or in a
  narrow desktop window — reduced-width.jpg's "Voice typing provider" / "Speech / to / text" column.
- containment makes the row the containing block of fixed descendants; nothing in a row is
  (ThemedSelect portals to <body> in the non-modal Settings dialog).
- settings-narrow (new): every page at Settings widths 360 / 540 / 700 / 900, the N6 folded and
  unfolded, and desktop — every row keeps >= 180 px of text beside its control or spans the row,
  no control overflows; SHOTS=<dir> writes one screenshot per page and width.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@AlexZ005 @claude
[feat] 41-modals G21: the Connect pill is a status dot, reconnecting …
916a7a8 
…never toasts

- $lib/connectionStatus.js: ONE {tone, words} — grey idle, yellow (pulsing) connecting / dialling /
  reconnecting, green connected (stays green through a signaling outage, the words say it), red past
  GIVE_UP_ATTEMPTS (6, ~1 min on the 27-F backoff). Pure connectionStatusOf + vitest.
- peerHandler: the "Lost the peer server", "closed the link", "Cannot reach … Retrying" and
  "Reconnected" toasts are gone (a phone tab switch raised three). Past the threshold ONE
  notification-centre entry per outage; the fallback-to-public notice is a notification too; the
  store ticks on open so the dot turns back. Retry behaviour is unchanged (never gives up).
- phone chip (#ps-connect-chip): dot + chevron (+ mic in a call), no text — fits beside the bell and
  the peers (space-connect-svelte.jpg); title + aria-label carry the words.
- desktop bar: a status dot (#connect-status) leads the bar in place of the "Reconnecting · 12 s"
  badge (its tooltip keeps the elapsed time); the connected chip drops its text label.
- the cloud plugin mounts nothing into the pill any more (mountProfile / mountConnectDrawer) and none
  of its toasts are about reconnecting — no cloud change.
- signaling-reconnect: rewritten to the new contract (no toasts, dot tones, one notification) + a
  phone section (no text on the chip, a drop and return raise no toast).

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@AlexZ005 @claude
[docs] 41-modals: CLAUDE.md z-index gotcha points at the one scale
2de0191 
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@AlexZ005 @claude
[test] 41-modals: fbInput pins the docked panel root by --z-dock (ren…
d009970 
…amed from --z-bottom)

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@AlexZ005 @claude
[test] 41-modals: settings-narrow takes THEME= for the light-theme sc…
5a57a08 
…reenshot pass

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@AlexZ005 @claude
[fix] 41-modals G21: the connecting dot is amber in light too (--stat…
9ef6314 
…us-warn fill token; --ink-warn is a text ink)

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@AlexZ005 @claude
[test] 41-modals: suites fit the runner — split settings-narrow (480 …
4669ecb 
…s cap), never return a pending confirm promise, object-delete reads the group modal

- settings-narrow (360/540/700/900) + settings-narrow-devices (folded/unfolded/desktop) share
  settingsNarrowShared.cjs; seven sizes in one file ran past run.cjs's 480 s kill, which surfaced as
  'Target page, context or browser has been closed'.
- toast-to-modal: requestDeleteObjectGraph is async now (it awaits the answer), so the evaluate must not
  return it — it waited for a click that never came until the runner killed it.
- object-delete: the group delete asks in a modal (G16).

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@AlexZ005 @claude
[test] 41-modals: mobile-map finds the copy-invite button as the pill…
917f621 
…'s first BUTTON (the status dot leads now); toast-to-modal reads plain-string toasts whole

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@AlexZ005