kayg/calternal
Watch
1
0
Fork
You've already forked calternal
 0
Code Issues 805 Pull requests Projects Releases Packages Wiki Activity Actions 434

Audit: remove local restyling of shared components and hand-rolled controls app-wide #1190

New issue
Open
opened 2026-10-06 08:07:40 +00:00 by kayg · 44 comments
kayg commented 2026-10-06 08:07:40 +00:00
Owner
Copy link

Audit: local restyling and hand-rolled controls (owner, 2026-10-06: "why so many instances of custom components again?")

Example found: apps/web/src/lib/editor/format/BlockHoverActions.svelte wraps the shared PillGroup frosted but adds its own ProgressiveBlur+wash slab and a hand-styled ⋯ button with px literals (#1189 fixes that file).

Do (whole repo, apps/web + packages):

  1. Find every place that (a) renders a shared primitive (Pill, PillGroup, PrimaryPill, StatusPill, TagPill, Menu/MenuItem, FloatingSurface, Card/metric cards, Kbd, ItemPreview, ProgressiveBlur, scroll-edge blur, Inspector rows) and then overrides its look locally (:global(...) selectors into it, extra background/backdrop-filter/border/shadow/radius/hover colours, wrapper overlays); (b) draws its own button/pill/chip/menu/card/toggle instead of the shared one; (c) uses size/colour/radius/duration literals outside token files.
  2. Write the full list with file:line, category (a/b/c) and the shared component that should be used to artifacts/restyle-audit.md and post it on this issue, grouped by Tab.
  3. Fix them mechanically in small commits per area, by EXTENDING the shared primitive (new prop/variant + tests + doc) where a needed look is missing, then deleting the local overrides. No visual redesigns beyond restoring the shared look.
  4. Add a lint/design-rule test that fails on new :global overrides into shared primitive classes and on new hand-rolled <button class=…> controls in feature folders (with an allow-list for justified exceptions, each with a comment and issue link).
    Screenshots before/after of each changed surface at ACTUAL size (1x/2x), light + dark. Gates: bun run check + bun run test quoted. Commit; comment with head SHA. Do not push.
## Audit: local restyling and hand-rolled controls (owner, 2026-10-06: "why so many instances of custom components again?") Example found: apps/web/src/lib/editor/format/BlockHoverActions.svelte wraps the shared `PillGroup frosted` but adds its own ProgressiveBlur+wash slab and a hand-styled ⋯ button with px literals (#1189 fixes that file). Do (whole repo, apps/web + packages): 1. Find every place that (a) renders a shared primitive (Pill, PillGroup, PrimaryPill, StatusPill, TagPill, Menu/MenuItem, FloatingSurface, Card/metric cards, Kbd, ItemPreview, ProgressiveBlur, scroll-edge blur, Inspector rows) and then overrides its look locally (`:global(...)` selectors into it, extra background/backdrop-filter/border/shadow/radius/hover colours, wrapper overlays); (b) draws its own button/pill/chip/menu/card/toggle instead of the shared one; (c) uses size/colour/radius/duration literals outside token files. 2. Write the full list with file:line, category (a/b/c) and the shared component that should be used to `artifacts/restyle-audit.md` and post it on this issue, grouped by Tab. 3. Fix them mechanically in small commits per area, by EXTENDING the shared primitive (new prop/variant + tests + doc) where a needed look is missing, then deleting the local overrides. No visual redesigns beyond restoring the shared look. 4. Add a lint/design-rule test that fails on new `:global` overrides into shared primitive classes and on new hand-rolled `<button class=…>` controls in feature folders (with an allow-list for justified exceptions, each with a comment and issue link). Screenshots before/after of each changed surface at ACTUAL size (1x/2x), light + dark. Gates: `bun run check` + `bun run test` quoted. Commit; comment with head SHA. Do not push.
before-2x-820-tokyo-night-dark-calendar-task-inspector.png
1.3 MiB
before-2x-820-tokyo-night-dark-tasks-board.png
1.3 MiB
before-2x-820-tokyo-night-dark-tasks-list.png
1.3 MiB
after-1x-1440-paper-light-calendar-task-inspector.png
539 KiB
after-1x-1440-paper-light-tasks-board.png
541 KiB
after-1x-1440-paper-light-tasks-list.png
545 KiB
after-1x-1440-tokyo-night-dark-calendar-task-inspector.png
427 KiB
after-1x-1440-tokyo-night-dark-tasks-board.png
419 KiB
after-1x-1440-tokyo-night-dark-tasks-list.png
425 KiB
after-1x-390-paper-light-calendar-task-inspector.png
70 KiB
after-1x-390-paper-light-tasks-board.png
170 KiB
after-1x-390-paper-light-tasks-list.png
175 KiB
after-1x-390-tokyo-night-dark-calendar-task-inspector.png
108 KiB
after-1x-390-tokyo-night-dark-tasks-board.png
147 KiB
after-1x-390-tokyo-night-dark-tasks-list.png
151 KiB
after-1x-820-paper-light-calendar-task-inspector.png
446 KiB
after-1x-820-paper-light-tasks-board.png
475 KiB
after-1x-820-paper-light-tasks-list.png
480 KiB
after-1x-820-tokyo-night-dark-calendar-task-inspector.png
453 KiB
after-1x-820-tokyo-night-dark-tasks-board.png
466 KiB
after-1x-820-tokyo-night-dark-tasks-list.png
472 KiB
after-2x-1440-paper-light-calendar-task-inspector.png
2.4 MiB
after-2x-1440-paper-light-tasks-board.png
2.4 MiB
after-2x-1440-paper-light-tasks-list.png
2.5 MiB
after-2x-1440-tokyo-night-dark-calendar-task-inspector.png
2.2 MiB
after-2x-1440-tokyo-night-dark-tasks-board.png
2.1 MiB
after-2x-1440-tokyo-night-dark-tasks-list.png
2.2 MiB
after-2x-390-paper-light-calendar-task-inspector.png
211 KiB
after-2x-390-paper-light-tasks-board.png
1 MiB
after-2x-390-paper-light-tasks-list.png
1 MiB
after-2x-390-tokyo-night-dark-calendar-task-inspector.png
182 KiB
after-2x-390-tokyo-night-dark-tasks-board.png
983 KiB
after-2x-390-tokyo-night-dark-tasks-list.png
995 KiB
after-2x-820-paper-light-calendar-task-inspector.png
1.4 MiB
after-2x-820-paper-light-tasks-board.png
1.4 MiB
after-2x-820-tokyo-night-dark-calendar-task-inspector.png
1.3 MiB
after-2x-820-tokyo-night-dark-tasks-list.png
1.3 MiB
before-1x-1440-paper-light-calendar-task-inspector.png
542 KiB
before-1x-1440-paper-light-tasks-board.png
541 KiB
before-1x-1440-paper-light-tasks-list.png
545 KiB
before-1x-390-paper-light-calendar-task-inspector.png
71 KiB
before-1x-390-paper-light-tasks-board.png
170 KiB
before-1x-390-tokyo-night-dark-tasks-list.png
151 KiB
before-2x-1440-paper-light-tasks-board.png
2.4 MiB
before-2x-1440-paper-light-tasks-list.png
2.5 MiB
after-2x-820-paper-light-tasks-list.png
1.5 MiB
after-2x-820-tokyo-night-dark-tasks-board.png
1.3 MiB
before-1x-1440-tokyo-night-dark-calendar-task-inspector.png
440 KiB
before-1x-1440-tokyo-night-dark-tasks-board.png
419 KiB
before-1x-1440-tokyo-night-dark-tasks-list.png
425 KiB
before-1x-390-paper-light-tasks-list.png
174 KiB
before-1x-390-tokyo-night-dark-calendar-task-inspector.png
70 KiB
before-1x-390-tokyo-night-dark-tasks-board.png
147 KiB
before-1x-820-paper-light-calendar-task-inspector.png
450 KiB
before-1x-820-paper-light-tasks-board.png
475 KiB
before-1x-820-paper-light-tasks-list.png
477 KiB
before-1x-820-tokyo-night-dark-calendar-task-inspector.png
453 KiB
before-1x-820-tokyo-night-dark-tasks-board.png
466 KiB
before-1x-820-tokyo-night-dark-tasks-list.png
470 KiB
before-2x-1440-paper-light-calendar-task-inspector.png
2.4 MiB
before-2x-1440-tokyo-night-dark-calendar-task-inspector.png
2.2 MiB
before-2x-1440-tokyo-night-dark-tasks-board.png
2.1 MiB
before-2x-1440-tokyo-night-dark-tasks-list.png
2.2 MiB
before-2x-390-paper-light-calendar-task-inspector.png
195 KiB
before-2x-390-paper-light-tasks-board.png
1 MiB
before-2x-390-paper-light-tasks-list.png
1 MiB
before-2x-390-tokyo-night-dark-calendar-task-inspector.png
199 KiB
before-2x-390-tokyo-night-dark-tasks-board.png
984 KiB
before-2x-390-tokyo-night-dark-tasks-list.png
985 KiB
before-2x-820-paper-light-calendar-task-inspector.png
1.4 MiB
before-2x-820-paper-light-tasks-board.png
1.4 MiB
before-2x-820-paper-light-tasks-list.png
1.5 MiB
before-2x-820-tokyo-night-dark-calendar-task-inspector.png before-2x-820-tokyo-night-dark-tasks-board.png before-2x-820-tokyo-night-dark-tasks-list.png after-1x-1440-paper-light-calendar-task-inspector.png after-1x-1440-paper-light-tasks-board.png after-1x-1440-paper-light-tasks-list.png after-1x-1440-tokyo-night-dark-calendar-task-inspector.png after-1x-1440-tokyo-night-dark-tasks-board.png after-1x-1440-tokyo-night-dark-tasks-list.png after-1x-390-paper-light-calendar-task-inspector.png after-1x-390-paper-light-tasks-board.png after-1x-390-paper-light-tasks-list.png after-1x-390-tokyo-night-dark-calendar-task-inspector.png after-1x-390-tokyo-night-dark-tasks-board.png after-1x-390-tokyo-night-dark-tasks-list.png after-1x-820-paper-light-calendar-task-inspector.png after-1x-820-paper-light-tasks-board.png after-1x-820-paper-light-tasks-list.png after-1x-820-tokyo-night-dark-calendar-task-inspector.png after-1x-820-tokyo-night-dark-tasks-board.png after-1x-820-tokyo-night-dark-tasks-list.png after-2x-1440-paper-light-calendar-task-inspector.png after-2x-1440-paper-light-tasks-board.png after-2x-1440-paper-light-tasks-list.png after-2x-1440-tokyo-night-dark-calendar-task-inspector.png after-2x-1440-tokyo-night-dark-tasks-board.png after-2x-1440-tokyo-night-dark-tasks-list.png after-2x-390-paper-light-calendar-task-inspector.png after-2x-390-paper-light-tasks-board.png after-2x-390-paper-light-tasks-list.png after-2x-390-tokyo-night-dark-calendar-task-inspector.png after-2x-390-tokyo-night-dark-tasks-board.png after-2x-390-tokyo-night-dark-tasks-list.png after-2x-820-paper-light-calendar-task-inspector.png after-2x-820-paper-light-tasks-board.png after-2x-820-tokyo-night-dark-calendar-task-inspector.png after-2x-820-tokyo-night-dark-tasks-list.png before-1x-1440-paper-light-calendar-task-inspector.png before-1x-1440-paper-light-tasks-board.png before-1x-1440-paper-light-tasks-list.png before-1x-390-paper-light-calendar-task-inspector.png before-1x-390-paper-light-tasks-board.png before-1x-390-tokyo-night-dark-tasks-list.png before-2x-1440-paper-light-tasks-board.png before-2x-1440-paper-light-tasks-list.png after-2x-820-paper-light-tasks-list.png after-2x-820-tokyo-night-dark-tasks-board.png before-1x-1440-tokyo-night-dark-calendar-task-inspector.png before-1x-1440-tokyo-night-dark-tasks-board.png before-1x-1440-tokyo-night-dark-tasks-list.png before-1x-390-paper-light-tasks-list.png before-1x-390-tokyo-night-dark-calendar-task-inspector.png before-1x-390-tokyo-night-dark-tasks-board.png before-1x-820-paper-light-calendar-task-inspector.png before-1x-820-paper-light-tasks-board.png before-1x-820-paper-light-tasks-list.png before-1x-820-tokyo-night-dark-calendar-task-inspector.png before-1x-820-tokyo-night-dark-tasks-board.png before-1x-820-tokyo-night-dark-tasks-list.png before-2x-1440-paper-light-calendar-task-inspector.png before-2x-1440-tokyo-night-dark-calendar-task-inspector.png before-2x-1440-tokyo-night-dark-tasks-board.png before-2x-1440-tokyo-night-dark-tasks-list.png before-2x-390-paper-light-calendar-task-inspector.png before-2x-390-paper-light-tasks-board.png before-2x-390-paper-light-tasks-list.png before-2x-390-tokyo-night-dark-calendar-task-inspector.png before-2x-390-tokyo-night-dark-tasks-board.png before-2x-390-tokyo-night-dark-tasks-list.png before-2x-820-paper-light-calendar-task-inspector.png before-2x-820-paper-light-tasks-board.png before-2x-820-paper-light-tasks-list.png
kayg commented 2026-10-06 09:33:42 +00:00
Author
Owner
Copy link

Starting #1190 in job/restyle-1190, based on origin/dev at 5301e020859c1d61b4a7f812a5049a64241203e8. I have read CLAUDE.md, docs/DESIGN.md, and CONTEXT.md. I am mapping shared primitive overrides, hand-rolled controls, and non-token visual literals across apps/web and packages before making small area commits.

Starting #1190 in `job/restyle-1190`, based on `origin/dev` at `5301e020859c1d61b4a7f812a5049a64241203e8`. I have read `CLAUDE.md`, `docs/DESIGN.md`, and `CONTEXT.md`. I am mapping shared primitive overrides, hand-rolled controls, and non-token visual literals across `apps/web` and `packages` before making small area commits.
kayg commented 2026-10-06 09:57:58 +00:00
Author
Owner
Copy link

Initial full inventory from 5301e020859c1d61b4a7f812a5049a64241203e8. It groups findings by Tab and lists file, line, category, and the shared primitive or token family. The BlockHoverActions wash slab is assigned to #1189.

Restyle audit — Forgejo #1190

Inventory from 2026-10-06 in apps/web and packages. Each entry has a file and line. Category (a) is a local style override of a shared primitive class or an extra surface around one. Category (b) is app-owned button, pill, chip, menu, card, or toggle markup and names the shared control to use. Category (c) is a literal control size, colour, radius, or duration outside token files and names the shared primitive.

Calendar (0 a, 1 b, 7 c)

(b)

  • [apps/web/src/routes/calendar/[view]/[date]/+page.svelte:3096] — Pill (or PillGroup for adjacent actions).

(c)

  • [packages/ui/src/components/calendar/ActivityStack.svelte:141] — .card → border: 1px solid color-mix(in srgb, var(--hair) 80%, transparent); box-shadow: 0 1px 2px rgb(0 0 0 / 8%); use Card and shared tokens.
  • [packages/ui/src/components/calendar/AttachmentDeck.svelte:969] — :global(.attachment-actions .pg-btn) → gap: 4px; padding-inline: 8px; use PillGroup and shared tokens.
  • [packages/ui/src/components/calendar/TaskCheckbox.svelte:51] — :global(.task-checkbox-wrap > .checkbox-control) → width: var(--hit, 44px); height: var(--hit, 44px); use Checkbox and shared tokens.
  • [packages/ui/src/components/calendar/TaskCheckbox.svelte:57] — :global(.task-checkbox-wrap .checkbox-indicator.editor) → width: 16px; height: 16px; use Checkbox and shared tokens.
  • [packages/ui/src/components/calendar/TimeGrid.svelte:1983] — .chip → gap: 5px; height: 22px; padding: 0 7px; use Pill / TagPill and shared tokens.
  • [packages/ui/src/components/calendar/TimeGrid.svelte:2006] — .chip :global(svg) → width: 13px; height: 13px; use Pill / TagPill and shared tokens.
  • [packages/ui/src/components/calendar/YearHeatmap.svelte:197] — button.d:hover → box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--ink) 40%, transparent); use Pill and shared tokens.

Tasks (6 a, 10 b, 3 c)

(a)

  • [apps/web/src/lib/tasks/TaskCard.svelte:75] — .card.task-card → box-sizing: border-box; position: relative; display: block; width: 100%; height: auto; min-height: 0; padding: 0.55rem 0.65rem; text-shadow: none;; extend Card.
  • [apps/web/src/lib/tasks/TaskCard.svelte:89] — .checkbox-input-wrap → margin-block-start: 0.2rem;; extend Checkbox.
  • [apps/web/src/lib/tasks/TaskCard.svelte:97] — .status-pill-frame.task-status-pill .status-pill → --pill-nav-height: 1.4rem; --pill-nav-padding: 0.08rem 0.45rem; --pill-nav-font-size: var(--text-caption); min-height: 1.4rem; max-width: none;; extend StatusPill.
  • [apps/web/src/lib/tasks/TaskColumn.svelte:186] — .card.task-card → outline: 1px dashed var(--accent); outline-offset: -2px;; extend Card.
  • [apps/web/src/lib/tasks/TaskList.svelte:69] — .card.task-list-card → min-width: 0; overflow: hidden; text-shadow: none;; extend Card.
  • [apps/web/src/lib/tasks/TaskList.svelte:90] — .status-pill-frame.task-status-pill .status-pill → --pill-nav-height: 1.4rem; --pill-nav-padding: 0.08rem 0.45rem; --pill-nav-font-size: var(--text-caption); min-height: 1.4rem; max-width: none;; extend StatusPill.

(b)

  • [apps/web/src/lib/tasks/TaskColumn.svelte:131] — Card.
  • [apps/web/src/lib/tasks/TaskColumn.svelte:172] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/tasks/TaskSection.svelte:632] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/tasks/TaskSection.svelte:638] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/tasks/TaskSection.svelte:646] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/tasks/TaskSection.svelte:655] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/tasks/TaskSection.svelte:657] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/tasks/TaskSection.svelte:659] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/tasks/TaskSection.svelte:672] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/tasks/TaskSection.svelte:679] — Pill (or PillGroup for adjacent actions).

(c)

  • [apps/web/src/lib/tasks/TaskCard.svelte:74] — :global(.card.task-card) → padding: 0.55rem 0.65rem; use Card and shared tokens.
  • [apps/web/src/lib/tasks/TasksWorkspace.svelte:486] — .view-add button → min-height: 2.65rem; border: 1px solid var(--hair); padding: 0 1rem; use Pill and shared tokens.
  • [apps/web/src/lib/tasks/TasksWorkspace.svelte:489] — .tasks-state button → min-height: 2.5rem; border: 1px solid var(--hair); padding: 0 0.8rem; use Pill and shared tokens.

Notes (8 a, 27 b, 11 c)

(a)

  • [apps/web/src/lib/editor/format/BlockHoverActions.svelte:250] — extra ProgressiveBlur wash slab behind PillGroup; remove the slab and keep the shared capsule material (#1189).
  • [apps/web/src/lib/notes/NoteContents.svelte:364] — .surface.note-contents-sheet .sheet-scroll → overscroll-behavior: contain;; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/lib/notes/NoteContents.svelte:370] — .surface.note-contents-sheet .sheet-chrome → background: transparent;; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/lib/notes/NoteContents.svelte:372] — .surface.note-contents-sheet .sheet-title-row → grid-template-columns: minmax(0, 1fr); justify-items: center;; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/lib/notes/NoteContents.svelte:376] — .surface.note-contents-sheet .sheet-leading → grid-column: 1; justify-self: center;; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/lib/notes/NoteContents.svelte:383] — .surface.note-contents-sheet .sheet-title → position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/lib/notes/NoteView.svelte:2566] — .card.glass-card → box-shadow: none;; extend Card.
  • [apps/web/src/lib/notes/NoteView.svelte:2674] — .note-stack .note-card.card.note-card--segmented → background: transparent; border-color: transparent; box-shadow: none;; extend Card.

(b)

  • [apps/web/src/lib/canvas/CanvasItemCard.svelte:56] — Card.
  • [apps/web/src/lib/canvas/CanvasItemCard.svelte:57] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/canvas/CanvasItemCard.svelte:69] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/canvas/CanvasItemCard.svelte:70] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/canvas/CanvasItemCard.svelte:72] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/canvas/CanvasPreview.svelte:92] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/editor/format/BlockHoverActions.svelte:260] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/editor/format/BlockReminderPicker.svelte:284] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/editor/format/BlockReminderPicker.svelte:302] — Pill or TagPill.
  • [apps/web/src/lib/editor/format/BlockReminderPicker.svelte:308] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/editor/format/BlockReminderPicker.svelte:315] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/editor/format/BlockReminderPicker.svelte:321] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/editor/format/FormatButton.svelte:64] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/notes/NoteContents.svelte:166] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/notes/NoteContents.svelte:211] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/notes/NoteImageView.svelte:121] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/notes/NoteView.svelte:2211] — Card.
  • [apps/web/src/lib/notes/NoteView.svelte:2216] — Card.
  • [apps/web/src/lib/notes/NoteView.svelte:2223] — Card.
  • [apps/web/src/lib/notes/NoteView.svelte:2226] — Card.
  • [apps/web/src/lib/notes/NoteView.svelte:2234] — Card.
  • [apps/web/src/lib/notes/NotesExplorer.svelte:463] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/notes/NotesExplorer.svelte:507] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/routes/journal/+page.svelte:78] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/routes/notes/+page.svelte:175] — Pill (or PillGroup for adjacent actions).
  • [packages/editor/src/components/CalloutView.svelte:27] — Pill (or PillGroup for adjacent actions).
  • [packages/editor/src/components/TaskItemView.svelte:66] — Checkbox.

(c)

  • [apps/web/src/lib/canvas/CanvasView.svelte:486] — .canvas-elements-row :global(button) → min-height:44px; use Pill and shared tokens.
  • [apps/web/src/lib/canvas/DrawingBlock.svelte:469] — :global(.drawing-block .App-toolbar--mobile button), :global(.drawing-block .App-toolbar--mobile .ToolIcon) → min-width: 44px; min-height: 44px; use Pill and shared tokens.
  • [apps/web/src/lib/editor/format/FormatButton.svelte:124] — .format-button.wide → gap: 7px; padding-inline: 8px; use Pill and shared tokens.
  • [apps/web/src/lib/editor/format/FormatButton.svelte:151] — .format-button → width: 28px; min-width: 28px; height: 28px; min-height: 28px; use Pill and shared tokens.
  • [apps/web/src/lib/editor/format/FormatButton.svelte:157] — .format-button.wide → height: 28px; min-height: 28px; use Pill and shared tokens.
  • [apps/web/src/lib/editor/format/FormatButton.svelte:161] — .format-button → width: 44px; min-width: 44px; height: 44px; min-height: 44px; use Pill and shared tokens.
  • [apps/web/src/lib/editor/format/FormatButton.svelte:169] — .format-button.wide → min-width: 44px; min-height: 44px; padding-inline: 10px; use Pill and shared tokens.
  • [apps/web/src/lib/editor/format/FormatButton.svelte:97] — .format-button → width: 28px; min-width: 28px; height: 28px; min-height: 28px; use Pill and shared tokens.
  • [apps/web/src/lib/notes/NoteView.svelte:2937] — .note-state-actions a, .note-state-actions button → min-height: 40px; padding: 0 16px; use Pill and shared tokens.
  • [packages/ui/src/components/notes/NoteMentionsCard.svelte:320] — :global(.mention-count.pill.count) → width: 24px; min-width: 24px; height: 24px; min-height: 24px; padding: 0 3px; use Card and shared tokens.
  • [packages/ui/src/components/notes/NoteProperties.svelte:294] — :global(.properties-count.pill.count) → width: 20px; min-width: 20px; height: 20px; min-height: 20px; padding: 0 3px; use Pill and shared tokens.

Files (6 a, 58 b, 1 c)

(a)

  • [apps/web/src/lib/files/FilesBrowser.svelte:1826] — .surface.dialog.paste-upload-conflict → width: min(460px, calc(100vw - 32px)); translate: -50% -50%;; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/lib/files/ShareDialog.svelte:493] — .surface.sheet.share-sheet → max-height: min(88dvh, 860px);; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/lib/files/ShareDialog.svelte:495] — .surface.dialog.share-sheet → width: min(580px, calc(100vw - 32px)); max-height: min(88dvh, 860px);; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/lib/files/ShareDialog.svelte:641] — .pg-btn → display: grid; width: var(--control-h); height: var(--control-h); place-items: center; border: 0; border-radius: var(--radius-circle); background: transparent; color: var(--ink-muted); cursor: pointer; --pill-group-glyph-size: var(--icon);; extend PillGroup.
  • [apps/web/src/lib/files/ShareDialog.svelte:653] — .pg-btn:hover → background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink);; extend PillGroup.
  • [apps/web/src/lib/files/SharedByYou.svelte:165] — .pg-btn → display: grid; width: var(--control-h); height: var(--control-h); place-items: center; border: 0; border-radius: var(--radius-circle); background: transparent; color: var(--ink-muted); cursor: pointer; --pill-group-glyph-size: var(--icon);; extend PillGroup.

(b)

  • [apps/web/src/lib/files/FilesBrowser.svelte:1620] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/FilesBrowser.svelte:1621] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/FilesBrowser.svelte:1628] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/FilesBrowser.svelte:1633] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/FilesBrowser.svelte:1645] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/FilesBrowser.svelte:1646] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/FilesBrowser.svelte:1700] — Card.
  • [apps/web/src/lib/files/FilesBrowser.svelte:1762] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/FilesSidebar.svelte:196] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/FilesSidebar.svelte:216] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/FilesSidebar.svelte:217] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/FilesSidebar.svelte:218] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/InfoPanel.svelte:613] — Card.
  • [apps/web/src/lib/files/InfoPanel.svelte:664] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/InfoPanel.svelte:665] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/InfoPanel.svelte:671] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/InfoPanel.svelte:679] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/InfoPanel.svelte:688] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/InfoPanel.svelte:722] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/InfoPanel.svelte:728] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/InfoPanel.svelte:758] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/InfoPanel.svelte:825] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/InfoPanel.svelte:840] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/PublicLinkPage.svelte:467] — Card.
  • [apps/web/src/lib/files/PublicLinkPage.svelte:473] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/PublicLinkPage.svelte:476] — Card.
  • [apps/web/src/lib/files/PublicLinkPage.svelte:481] — Card.
  • [apps/web/src/lib/files/PublicLinkPage.svelte:483] — Card.
  • [apps/web/src/lib/files/PublicLinkPage.svelte:512] — Card.
  • [apps/web/src/lib/files/PublicLinkPage.svelte:514] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/PublicLinkPage.svelte:521] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/PublicLinkPage.svelte:523] — Card.
  • [apps/web/src/lib/files/PublicLinkPage.svelte:529] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/PublicLinkPage.svelte:532] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/PublicLinkPage.svelte:540] — Card.
  • [apps/web/src/lib/files/PublicLinkPage.svelte:553] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/PublicLinkPage.svelte:580] — Card.
  • [apps/web/src/lib/files/PublicLinkPage.svelte:585] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/PublicLinkPage.svelte:593] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/PublicLinkPage.svelte:600] — Card.
  • [apps/web/src/lib/files/PublicLinkPage.svelte:603] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/PublicLinkPage.svelte:609] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/PublicLinkPage.svelte:620] — Card.
  • [apps/web/src/lib/files/PublicLinkPage.svelte:628] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/PublicLinkPage.svelte:635] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/ShareDialog.svelte:323] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/ShareDialog.svelte:341] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/ShareDialog.svelte:374] — Pill.
  • [apps/web/src/lib/files/ShareDialog.svelte:391] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/ShareDialog.svelte:392] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/SharedByYou.svelte:86] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/UploadToast.svelte:130] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/UploadToast.svelte:136] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/UploadToast.svelte:146] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/UploadToast.svelte:163] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/UploadToast.svelte:165] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/UploadToast.svelte:167] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/files/UploadToast.svelte:170] — Pill (or PillGroup for adjacent actions).

(c)

  • [apps/web/src/lib/files/ShareDialog.svelte:746] — .pill-icon-label → gap: 6px; use Pill and shared tokens.

Photos (0 a, 7 b, 1 c)

(b)

  • [apps/web/src/lib/photos/PhotoViewer.svelte:372] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/photos/PhotoViewer.svelte:387] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/photos/PhotosView.svelte:857] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/photos/PhotosView.svelte:894] — Card.
  • [apps/web/src/lib/photos/PhotosView.svelte:913] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/photos/PhotosView.svelte:926] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/photos/PhotosView.svelte:928] — Pill (or PillGroup for adjacent actions).

(c)

  • [apps/web/src/lib/photos/BackgroundsFolderView.svelte:167] — .empty button → padding: 0 14px; use Pill and shared tokens.

Mail (2 a, 8 b, 0 c)

(a)

  • [apps/web/src/lib/mail/MailView.svelte:1534] — .pill → grid-area: action;; extend Pill.
  • [apps/web/src/lib/mail/MailView.svelte:1539] — .pill → justify-self: start;; extend Pill.

(b)

  • [apps/web/src/lib/mail/MailMorphCard.svelte:61] — Card.
  • [apps/web/src/lib/mail/MailView.svelte:1389] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/mail/MailView.svelte:1411] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/mail/MailView.svelte:1421] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/mail/MailView.svelte:1442] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/mail/MailView.svelte:1456] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/mail/MailView.svelte:1477] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/mail/MailView.svelte:1478] — Pill (or PillGroup for adjacent actions).

Money (0 a, 7 b, 0 c)

(b)

  • [apps/web/src/routes/money/[budget]/[month]/+page.svelte:278] — Card.
  • [apps/web/src/routes/money/[budget]/[month]/+page.svelte:301] — Card.
  • [apps/web/src/routes/money/[budget]/[month]/+page.svelte:364] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/routes/money/[budget]/accounts/account/+page.svelte:328] — Card.
  • [apps/web/src/routes/money/[budget]/accounts/account/+page.svelte:334] — Card.
  • [apps/web/src/routes/money/[budget]/accounts/account/+page.svelte:385] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/routes/money/[budget]/accounts/account/+page.svelte:410] — Pill (or PillGroup for adjacent actions).

Search (9 a, 20 b, 14 c)

(a)

  • [apps/web/src/lib/components/search-dialog.svelte:1145] — .surface.pill.search-window → display: flex; flex-direction: column; width: var(--palette-width); /* The top stays at --palette-top; the bottom stops at two-thirds height. */ max-height: max(0px, min(calc(66.666dvh - var(--palette-top)), 44rem)); transition: height var(--dur-morph) var(--ease-spring), width var(--dur-search) var(--ease-out), max-height var(--dur-search) var(--ease-out);; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/lib/components/search-dialog.svelte:1158] — .surface.pill.search-window.has-preview → width: var(--palette-width-preview);; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/lib/components/search-dialog.svelte:1163] — .surface.pill.search-window.is-expanded → top: max(24px, 4dvh); width: min(76rem, calc(100vw - 32px)); height: min(92dvh, 64rem); max-height: min(92dvh, 64rem);; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/lib/components/search-dialog.svelte:1175] — :root .surface.pill.search-window.is-expanded → --search-band: calc(var(--search-vv-height, 100dvh) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px); width: calc(100vw - 16px); max-height: var(--search-band);; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/lib/components/search-dialog.svelte:1183] — :root .surface.pill.search-window.is-expanded → top: calc(var(--search-vv-top, 0px) + var(--search-vv-height, 100dvh) / 2); translate: 0 -50%; height: auto;; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/lib/components/search-dialog.svelte:1199] — .surface.pill.search-window → transition: none;; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/lib/search/SearchPreview.svelte:1061] — .actions > .pill-group → min-width: 0; max-width: 100%; flex-wrap: wrap;; extend PillGroup.
  • [apps/web/src/lib/search/SearchPreview.svelte:1066] — .actions > .pill-group:last-child → margin-left: 0;; extend PillGroup.
  • [apps/web/src/lib/search/SearchResultRow.svelte:261] — .item-card → gap: var(--search-result-icon-gap);; extend ItemCard.

(b)

  • [apps/web/src/lib/components/search-dialog.svelte:868] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/components/search-dialog.svelte:869] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/components/search-dialog.svelte:878] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/components/search-dialog.svelte:899] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/components/search-dialog.svelte:909] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/components/search-dialog.svelte:919] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/components/search-dialog.svelte:928] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/components/search-dialog.svelte:939] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/search/SavedSearchList.svelte:184] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/search/SearchField.svelte:281] — Pill or TagPill.
  • [apps/web/src/lib/search/SearchField.svelte:282] — Pill or TagPill.
  • [apps/web/src/lib/search/SearchField.svelte:287] — Pill or TagPill.
  • [apps/web/src/lib/search/SearchField.svelte:293] — Pill.
  • [apps/web/src/lib/search/SearchField.svelte:300] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/search/SearchField.svelte:313] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/search/SearchPreview.svelte:683] — Card.
  • [apps/web/src/lib/search/SearchPreview.svelte:770] — Pill.
  • [apps/web/src/lib/search/SearchPreview.svelte:795] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/search/SearchPreview.svelte:799] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/routes/tag/[tag]/+page.svelte:205] — Pill (or PillGroup for adjacent actions).

(c)

  • [apps/web/src/lib/components/search-dialog.svelte:1141] — :global(.surface.pill.search-window) → max-height: max(0px, min(calc(66.666dvh - var(--palette-top)), 44rem)); use Pill and shared tokens.
  • [apps/web/src/lib/components/search-dialog.svelte:1163] — :global(.surface.pill.search-window.is-expanded) → width: min(76rem, calc(100vw - 32px)); height: min(92dvh, 64rem); max-height: min(92dvh, 64rem); use Pill and shared tokens.
  • [apps/web/src/lib/components/search-dialog.svelte:1173] — :global(:root .surface.pill.search-window), :global(:root .surface.pill.search-window.is-expanded) → width: calc(100vw - 16px); use Pill and shared tokens.
  • [apps/web/src/lib/components/search-dialog.svelte:1192] — :global(:root .surface.pill.search-window.is-expanded) .sw → max-height: calc(var(--search-band) - 2px); use Pill and shared tokens.
  • [apps/web/src/lib/components/search-dialog.svelte:1220] — :global(.surface.pill.search-window) .sw → --search-edge-blur-height: 2rem; use Pill and shared tokens.
  • [apps/web/src/lib/components/search-dialog.svelte:1284] — .expanded .results-list :global(.row:not(.card)) → height: 58px; use Card and shared tokens.
  • [apps/web/src/lib/components/search-dialog.svelte:1305] — :global(.surface.pill.search-window.preview-resized) .preview-pane → width: var(--palette-preview-width, var(--search-preview-width, 300px)); use Pill and shared tokens.
  • [apps/web/src/lib/search/SearchField.svelte:496] — .q-pill button, .scope-chip button → width: 20px; height: 20px; use Pill and shared tokens.
  • [apps/web/src/lib/search/SearchField.svelte:524] — .q-pill button :global(svg), .scope-chip button :global(svg) → width: 12px; height: 12px; use Pill and shared tokens.
  • [apps/web/src/lib/search/SearchField.svelte:532] — .q-pill button, .scope-chip button → width: 44px; height: 44px; use Pill and shared tokens.
  • [apps/web/src/lib/search/SearchField.svelte:547] — .action-trailing → gap: 6px; use shared control primitive and shared tokens.
  • [apps/web/src/lib/search/SearchPreview.svelte:1118] — .action → width: 34px; height: 34px; border: 1px solid var(--control-boundary); use shared control primitive and shared tokens.
  • [apps/web/src/lib/search/SearchResultRow.svelte:339] — .row.card → min-height: 52px; padding: 11px 14px 11px calc(var(--search-column-inset, 18px) - var(--search-row-inset, 6px) - 1px); use Card and shared tokens.
  • [apps/web/src/lib/search/SearchResultRow.svelte:351] — .row.card .line1 → row-gap: 1px; use Card and shared tokens.

Settings (18 a, 34 b, 10 c)

(a)

  • [apps/web/src/routes/settings/account/AppPasswordsGroup.svelte:1216] — .surface.sheet #opt-app-passwords > .app-passwords-sheet-card → padding: 0; border-color: transparent; background: transparent; box-shadow: none;; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/routes/settings/account/RecoveryKeySheet.svelte:116] — .surface-background.sheet.rotate-sheet → background: var(--surface);; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/routes/settings/account/RecoveryKeySheet.svelte:118] — .surface.dialog.rotate-sheet → width: min(480px, calc(100vw - 32px));; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/routes/settings/account/RecoveryKeySheet.svelte:121] — .surface-background.dialog.rotate-sheet → background: var(--surface);; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/routes/settings/appearance/UnsplashSheet.svelte:139] — .surface-background.sheet.unsplash-sheet → background: var(--surface);; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/routes/settings/appearance/UnsplashSheet.svelte:141] — .surface.dialog.unsplash-sheet → width: min(720px, calc(100vw - 32px)); max-height: min(88dvh, 860px);; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/routes/settings/appearance/UnsplashSheet.svelte:145] — .surface-background.dialog.unsplash-sheet → background: var(--surface);; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/routes/settings/apps/CalendarFeedsGroup.svelte:251] — html.scrim-open body .surface-background.glass-overlay.feed-sheet → background: var(--surface);; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/routes/settings/connected-accounts/ConnectedAccountsSection.svelte:821] — .surface.dialog.connected-account-provider-sheet → /* OverlaySurface owns both center coordinates and the Settings pane offset. */ translate: -50% -50%; width: min(560px, calc(100vw - 32px)); max-height: min(88dvh, 820px);; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/routes/settings/connected-accounts/ConnectedAccountsSection.svelte:837] — .surface.sheet.connected-account-provider-sheet → --sheet-chrome-height: calc(1.5rem + var(--header-reserve));; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/routes/settings/connected-accounts/ConnectedAccountsSection.svelte:838] — .surface.sheet.connected-account-provider-sheet .sheet-scroll → /* header-reserve already includes the title-to-content gap. */ padding-block-start: var(--sheet-chrome-height); scroll-padding-top: var(--sheet-chrome-height);; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/routes/settings/connected-accounts/ConnectedAccountsSection.svelte:863] — .surface.sheet.connected-account-provider-sheet .provider-sheet → padding-top: 0;; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/routes/settings/jobs/JobDetails.svelte:98] — .pill.row-action → padding-inline-start: 0;; extend Pill.
  • [apps/web/src/routes/settings/parts/RowAction.svelte:24] — .pill.row-action.danger → --pill-color: var(--now); --pill-color-hover: var(--now); --pill-bg-hover: color-mix(in srgb, var(--now) 10%, transparent);; extend Pill.
  • [apps/web/src/routes/settings/parts/RowAction.svelte:28] — .pill.row-action:disabled → opacity: 0.5; cursor: default;; extend Pill.
  • [apps/web/src/routes/settings/parts/StateChip.svelte:21] — .pill.state-chip → --pill-bg: var(--paper-2); --pill-border: transparent; --pill-color: var(--muted);; extend Pill.
  • [apps/web/src/routes/settings/parts/StateChip.svelte:25] — .pill.state-chip.accent → --pill-bg: var(--accent-soft); --pill-border: color-mix(in srgb, var(--accent) 25%, transparent); --pill-color: var(--accent);; extend Pill.
  • [apps/web/src/routes/settings/parts/StateChip.svelte:30] — .pill.state-chip.attention → --pill-bg: color-mix(in srgb, var(--now) 14%, var(--surface)); --pill-border: color-mix(in srgb, var(--now) 25%, transparent); --pill-color: color-mix(in srgb, var(--now) 78%, var(--ink));; extend Pill.

(b)

  • [apps/web/src/lib/auth/components/AuthCard.svelte:24] — Card.
  • [apps/web/src/lib/auth/components/CreateAccountFlow.svelte:184] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/auth/components/CreateAccountFlow.svelte:205] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/auth/components/CreateAccountFlow.svelte:234] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/auth/components/RecoverFlow.svelte:146] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/auth/components/RecoverFlow.svelte:162] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/auth/components/RecoverFlow.svelte:173] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/auth/components/RecoveryKeyEntry.svelte:286] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/auth/components/RecoveryKeyWords.svelte:65] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/auth/components/RecoveryKeyWords.svelte:72] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/routes/settings/[...path]/+page.svelte:392] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/routes/settings/[...path]/+page.svelte:400] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/routes/settings/[...path]/+page.svelte:406] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/routes/settings/[...path]/+page.svelte:419] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/routes/settings/account/AppPasswordsGroup.svelte:884] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/routes/settings/account/AppPasswordsGroup.svelte:963] — Card.
  • [apps/web/src/routes/settings/account/PasskeysGroup.svelte:271] — Card.
  • [apps/web/src/routes/settings/account/SessionsGroup.svelte:104] — Card.
  • [apps/web/src/routes/settings/admin/InvitationsGroup.svelte:185] — Card.
  • [apps/web/src/routes/settings/appearance/BackgroundGroup.svelte:1044] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/routes/settings/appearance/BackgroundGroup.svelte:1058] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/routes/settings/appearance/BackgroundGroup.svelte:1099] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/routes/settings/appearance/BackgroundGroup.svelte:907] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/routes/settings/appearance/BackgroundGroup.svelte:929] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/routes/settings/appearance/BackgroundGroup.svelte:942] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/routes/settings/appearance/BackgroundGroup.svelte:955] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/routes/settings/appearance/BackgroundGroup.svelte:988] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/routes/settings/appearance/UnsplashSheet.svelte:120] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/routes/settings/calendars/CalendarsSection.svelte:401] — Card.
  • [apps/web/src/routes/settings/connected-accounts/ConnectedAccountsSection.svelte:614] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/routes/settings/notifications/NotificationsSection.svelte:172] — Card.
  • [apps/web/src/routes/settings/notifications/NotificationsSection.svelte:184] — Card.
  • [apps/web/src/routes/settings/plugins/PluginsSection.svelte:176] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/routes/settings/voice/VoiceSection.svelte:170] — Card.

(c)

  • [apps/web/src/lib/auth/components/AuthCard.svelte:34] — .card → width: min(420px, 100%); border: 1px solid var(--hair); padding: 26px 22px; gap: 12px; use Card and shared tokens.
  • [apps/web/src/lib/auth/components/AuthCard.svelte:46] — .card.wide → width: min(480px, 100%); use Card and shared tokens.
  • [apps/web/src/lib/auth/components/RecoveryKeyWords.svelte:87] — .btn-row → gap: 8px; use shared control primitive and shared tokens.
  • [apps/web/src/lib/auth/components/RecoveryKeyWords.svelte:91] — .btn-row .btn → min-width: 8rem; use shared control primitive and shared tokens.
  • [apps/web/src/routes/settings/admin/SignInGroup.svelte:76] — .toggle-row → gap: 16px; use Toggle and shared tokens.
  • [apps/web/src/routes/settings/admin/SignInGroup.svelte:81] — .toggle-text → gap: 2px; use Toggle and shared tokens.
  • [apps/web/src/routes/settings/apps/CalendarFeedsGroup.svelte:268] — .toggle-row → gap: 12px; min-height: 44px; use Toggle and shared tokens.
  • [apps/web/src/routes/settings/notifications/NotificationsSection.svelte:190] — .toggle-slot → min-height: 34px; use Toggle and shared tokens.
  • [apps/web/src/routes/settings/parts/settings-forms.css:29] — :is(.settings-shell, .money-form) :where(.card-footer) → gap: 10px 8px; use Card and shared tokens.
  • [apps/web/src/routes/settings/voice/VoiceSection.svelte:242] — .toggle-slot → min-height: 34px; use Toggle and shared tokens.

Analytics (2 a, 5 b, 2 c)

(a)

  • [apps/web/src/lib/components/analytics/widgets/StatRow.svelte:334] — .card → display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 2px;; extend Card.
  • [apps/web/src/lib/components/analytics/widgets/StatRow.svelte:344] — .card → grid-row: auto; display: flex; flex-direction: column; min-height: calc(var(--stat-card-min-height) + 32px);; extend Card.

(b)

  • [apps/web/src/lib/components/analytics/Dashboard.svelte:86] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/components/analytics/RangePicker.svelte:323] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/components/analytics/RangePicker.svelte:335] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/components/analytics/RangePicker.svelte:406] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/routes/analytics/[period]/[date]/+page.svelte:134] — Card.

(c)

  • [apps/web/src/lib/components/analytics/widgets/StatRow.svelte:328] — .grid > :global(.card) → row-gap: 2px; use Card and shared tokens.
  • [apps/web/src/lib/components/analytics/widgets/StatRow.svelte:342] — .grid > :global(.card) → min-height: calc(var(--stat-card-min-height) + 32px); use Card and shared tokens.

Notifications (5 a, 3 b, 0 c)

(a)

  • [apps/web/src/lib/notifications/InboxPanel.svelte:427] — .surface.panel.inbox-surface → top: var(--inbox-top, calc(env(safe-area-inset-top, 0px) + 64px)); right: var(--inbox-right, 16px); bottom: auto; width: min(400px, calc(100vw - 24px)); max-height: min(640px, calc(100dvh - var(--inbox-top, 64px) - 24px)); padding: 0; border: 1px solid var(--glass-border); border-radius: var(--radius-dialog); background: var(--cal-sheet-material); box-shadow: var(--glass-shadow);; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/lib/notifications/InboxPanel.svelte:441] — .surface.sheet.inbox-surface → padding-inline: 0;; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/lib/notifications/InboxPanel.svelte:443] — .surface.sheet.inbox-surface .sheet-scroll → padding-inline: 8px;; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/lib/notifications/InboxPanel.svelte:495] — .inbox-actions .pg-btn[aria-disabled='true'] → opacity: 0.4; cursor: default;; extend PillGroup.
  • [apps/web/src/lib/notifications/InboxPanel.svelte:499] — .inbox-actions .pg-btn[aria-disabled='true'] → opacity: 0.4; cursor: default;; extend PillGroup.

(b)

  • [apps/web/src/lib/notifications/InboxPanel.svelte:389] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/notifications/InboxPanel.svelte:393] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/notifications/InboxPanel.svelte:399] — Pill (or PillGroup for adjacent actions).

Shared UI (16 a, 40 b, 53 c)

(a)

  • [apps/web/src/lib/ai/TurnPanel.svelte:302] — .surface.dialog.turn-panel → width: min(var(--turn-panel-width, 460px), calc(100vw - 24px)); height: min(780px, 82dvh); max-height: 82dvh; padding: 0; overflow: hidden; background: var(--surface); border: 1px solid color-mix(in srgb, var(--hair) 65%, transparent); box-shadow: 0 24px 50px -22px rgba(20, 30, 24, 0.42);; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/lib/ai/TurnPanel.svelte:311] — .surface.sheet.turn-panel → padding: 0; overflow: hidden; background: var(--surface);; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/lib/components/AppToaster.svelte:533] — .cal-toaster .cal-toast .cal-toast-btn .pill-content → pointer-events: none;; extend Pill.
  • [apps/web/src/lib/components/ConfirmSheet.svelte:113] — .surface-background.sheet.confirm-sheet → background: var(--surface);; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/lib/components/ConfirmSheet.svelte:115] — .surface-background.dialog.confirm-sheet → background: var(--surface);; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/lib/components/ConfirmSheet.svelte:118] — .surface.dialog.confirm-sheet → width: min(440px, calc(100vw - 32px)); /* OverlaySurface owns the vertical centring; this confirmation also needs the matching horizontal offset at tablet and desktop widths. */ translate: -50% -50%;; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/lib/components/ConfirmSheet.svelte:172] — .pill.confirm-danger → --pill-bg: var(--now); --pill-bg-hover: color-mix(in srgb, var(--now) 88%, var(--ink));; extend Pill.
  • [apps/web/src/lib/components/ShortcutList.svelte:128] — .kbd-caps → grid-column: 2; grid-row: 1; align-self: center;; extend Kbd.
  • [apps/web/src/lib/components/TagEditor.svelte:191] — .surface.sheet.tag-sheet → max-height: min(80dvh, 620px);; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/lib/components/TagEditor.svelte:193] — .surface-background.sheet.tag-sheet → background: var(--surface);; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/lib/components/TagEditor.svelte:196] — .surface.dialog.tag-sheet → width: min(500px, calc(100vw - 32px)); max-height: min(80dvh, 620px);; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/lib/components/TagEditor.svelte:200] — .surface-background.dialog.tag-sheet → background: var(--surface);; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/lib/components/app-sidebar.svelte:724] — .sidebar-month-card.glass-card → background: var(--glass-card-inner-bg); border-color: var(--glass-border);; extend Card.
  • [apps/web/src/lib/composer/Composer.svelte:2386] — .surface.pill.viewport-fit.composer-window → /* The Composer is the centered member of the shared pill family. Keep its center attached to the visible area as the software keyboard moves it. */ top: calc(var(--vv-top, 0px) + var(--vv-height, 100dvh) / 2); translate: 0 -50%; max-height: calc(var(--vv-height, 100dvh) - 24px);; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/lib/composer/Composer.svelte:2392] — .surface.pill.composer-window → overflow: hidden;; extend FloatingSurface / OverlaySurface.
  • [apps/web/src/lib/history/VersionHistory.svelte:418] — .pill svg → width: var(--icon); height: var(--icon);; extend Pill.

(b)

  • [apps/web/src/lib/components/KeyboardShortcutsCard.svelte:54] — Card.
  • [apps/web/src/lib/components/KeyboardShortcutsCard.svelte:72] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/components/TagEditor.svelte:135] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/components/TagEditor.svelte:141] — Pill or TagPill.
  • [apps/web/src/lib/components/TagEditor.svelte:143] — Pill or TagPill.
  • [apps/web/src/lib/components/app-sidebar.svelte:577] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/components/empty-state.svelte:25] — Card.
  • [apps/web/src/lib/composer/Composer.svelte:2068] — Pill or TagPill.
  • [apps/web/src/lib/composer/Composer.svelte:2074] — Pill or TagPill.
  • [apps/web/src/lib/composer/Composer.svelte:2076] — Pill or TagPill.
  • [apps/web/src/lib/composer/Composer.svelte:2081] — Pill or TagPill.
  • [apps/web/src/lib/composer/Composer.svelte:2096] — Pill or TagPill.
  • [apps/web/src/lib/composer/Composer.svelte:2099] — Pill or TagPill.
  • [apps/web/src/lib/composer/Composer.svelte:2100] — Pill or TagPill.
  • [apps/web/src/lib/composer/Composer.svelte:2105] — Pill or TagPill.
  • [apps/web/src/lib/composer/Composer.svelte:2106] — Pill or TagPill.
  • [apps/web/src/lib/composer/Composer.svelte:2113] — Pill or TagPill.
  • [apps/web/src/lib/composer/Composer.svelte:2115] — Pill or TagPill.
  • [apps/web/src/lib/composer/Composer.svelte:2118] — Pill or TagPill.
  • [apps/web/src/lib/composer/Composer.svelte:2122] — Pill or TagPill.
  • [apps/web/src/lib/composer/Composer.svelte:2125] — Pill or TagPill.
  • [apps/web/src/lib/composer/Composer.svelte:2128] — Pill or TagPill.
  • [apps/web/src/lib/composer/Composer.svelte:2132] — Pill or TagPill.
  • [apps/web/src/lib/composer/Composer.svelte:2132] — TagPill.
  • [apps/web/src/lib/composer/Composer.svelte:2136] — TagPill.
  • [apps/web/src/lib/composer/Composer.svelte:2145] — Pill or TagPill.
  • [apps/web/src/lib/composer/Composer.svelte:2248] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/composer/Composer.svelte:2254] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/composer/Composer.svelte:2264] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/composer/Composer.svelte:2267] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/composer/Composer.svelte:2273] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/composer/Composer.svelte:2280] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/composer/Composer.svelte:2281] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/composer/Composer.svelte:2320] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/lib/history/VersionHistory.svelte:345] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/routes/+layout.svelte:1425] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/routes/login/+page.svelte:168] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/routes/login/+page.svelte:173] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/routes/login/+page.svelte:191] — Pill (or PillGroup for adjacent actions).
  • [apps/web/src/routes/login/+page.svelte:200] — Pill (or PillGroup for adjacent actions).

(c)

  • [apps/web/src/lib/components/TagEditor.svelte:262] — .chip → gap: 1px; use Pill / TagPill and shared tokens.
  • [apps/web/src/lib/composer/Composer.svelte:2383] — :global(.surface.pill.viewport-fit.composer-window) → max-height: calc(var(--vv-height, 100dvh) - 24px); use Pill and shared tokens.
  • [apps/web/src/lib/composer/Composer.svelte:2492] — .chip → border: 1px solid color-mix(in srgb, var(--hair) 60%, transparent); use Pill / TagPill and shared tokens.
  • [apps/web/src/lib/composer/Composer.svelte:2584] — .chip.tag → max-width: min(15rem, 52vw); use Pill / TagPill and shared tokens.
  • [apps/web/src/lib/composer/Composer.svelte:2596] — .chip.tag.inferred → border: 1px dashed color-mix(in srgb, var(--tfg) 55%, transparent); use Pill / TagPill and shared tokens.
  • [apps/web/src/lib/styles/auth-ui.css:117] — .auth-ui :where(.btn) → padding: 12px 16px; min-height: 44px; gap: 8px; use shared control primitive and shared tokens.
  • [apps/web/src/lib/styles/auth-ui.css:137] — .auth-ui :where(.btn.primary) → color: #fff; use shared control primitive and shared tokens.
  • [packages/ui/src/components/Card.svelte:59] — .card → padding: 16px 18px; use Card and shared tokens.
  • [packages/ui/src/components/Card.svelte:65] — .card.column → gap: var(--card-gap, 4px); use Card and shared tokens.
  • [packages/ui/src/components/Checkbox.svelte:225] — .checkbox-glyph → width: 16px; height: 16px; use Checkbox and shared tokens.
  • [packages/ui/src/components/Checkbox.svelte:249] — .checkbox-indicator.file, .checkbox-indicator.tile → width: 22px; height: 22px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 35%, transparent); use Checkbox and shared tokens.
  • [packages/ui/src/components/Checkbox.svelte:281] — .checkbox-control.fc-check-control:active:not(:disabled) .checkbox-indicator:not(.checked):not(.mixed) → box-shadow: inset 0 0 0 1.5px var(--accent); use Checkbox and shared tokens.
  • [packages/ui/src/components/Checkbox.svelte:285] — .checkbox-indicator.form, .checkbox-indicator.editor → width: var(--checkbox-size, 13px); height: var(--checkbox-size, 13px); box-shadow: inset 0 0 0 1.5px var(--control-boundary); use Checkbox and shared tokens.
  • [packages/ui/src/components/Checkbox.svelte:295] — .checkbox-indicator.editor → width: 16px; height: 16px; use Checkbox and shared tokens.
  • [packages/ui/src/components/Checkbox.svelte:304] — .checkbox-control.editor:hover:not(:disabled) .checkbox-indicator:not(.checked):not(.mixed) → box-shadow: inset 0 0 0 1.5px var(--accent); use Checkbox and shared tokens.
  • [packages/ui/src/components/Checkbox.svelte:308] — .checkbox-indicator.photo → width: 20px; height: 20px; border: 1.5px solid color-mix(in srgb, var(--ink) 38%, transparent); use Checkbox and shared tokens.
  • [packages/ui/src/components/Checkbox.svelte:316] — .checkbox-indicator.photo .checkbox-glyph → width: 13px; height: 13px; use Checkbox and shared tokens.
  • [packages/ui/src/components/Checkbox.svelte:321] — .checkbox-indicator.menu → width: 16px; height: 16px; use Checkbox and shared tokens.
  • [packages/ui/src/components/Checkbox.svelte:330] — .checkbox-indicator.menu .checkbox-glyph → width: 16px; height: 16px; use Checkbox and shared tokens.
  • [packages/ui/src/components/OverlaySurface.svelte:1241] — .surface.pill.viewport-fit → max-height: calc(var(--vv-height, 100dvh) - 24px); use OverlaySurface and shared tokens.
  • [packages/ui/src/components/Pill.svelte:146] — .pill → border: 1px solid var(--pill-border, var(--glass-border)); use Pill and shared tokens.
  • [packages/ui/src/components/Pill.svelte:175] — .pill.label → padding: 0 calc(var(--control-h) / 2 - 2px); use Pill and shared tokens.
  • [packages/ui/src/components/Pill.svelte:199] — .pill.icon.btn::before → width: calc(100% + 2px + var(--pill-hit-outset) + var(--pill-hit-outset)); height: calc(100% + 2px + var(--pill-hit-outset) + var(--pill-hit-outset)); use Pill and shared tokens.
  • [packages/ui/src/components/Pill.svelte:281] — .pill.nav → gap: var(--pill-nav-gap, 6px); padding: var(--pill-nav-padding, 0 14px 0 10px); use Pill and shared tokens.
  • [packages/ui/src/components/Pill.svelte:299] — .pill.count → padding: 0 6px; use Pill and shared tokens.
  • [packages/ui/src/components/Pill.svelte:324] — .pill.count.hours, .pill.count:has(:global([torph-exiting])) → width: var(--hours-width, calc((var(--hours-chars) + 1) * 1ch + 12px)); use Pill and shared tokens.
  • [packages/ui/src/components/Pill.svelte:329] — .pill.chip → height: 24px; min-height: 24px; gap: 3px; padding: 0 var(--pill-chip-padding, 7px); use Pill and shared tokens.
  • [packages/ui/src/components/Pill.svelte:364] — .pill.select → min-width: 112px; use Pill and shared tokens.
  • [packages/ui/src/components/Pill.svelte:385] — .pill-select-native → padding: 0 30px 0 14px; use Pill and shared tokens.
  • [packages/ui/src/components/Pill.svelte:406] — .pill-select-chevron → width: 16px; height: 16px; use Pill and shared tokens.
  • [packages/ui/src/components/Pill.svelte:460] — .pill :global(svg:not(.pill-select-chevron)) → width: var(--pill-glyph-size, 24px); height: var(--pill-glyph-size, 24px); use Pill and shared tokens.
  • [packages/ui/src/components/PillGroup.svelte:336] — .pill-group--reveal :global([data-pill-reveal]:focus-visible) → gap: 6px; padding-inline: 12px; use Pill and shared tokens.
  • [packages/ui/src/components/PillGroup.svelte:352] — .pill-group--reveal :global([data-pill-reveal]:hover) → gap: 6px; padding-inline: 12px; use Pill and shared tokens.
  • [packages/ui/src/components/PillGroup.svelte:457] — .pill-group--single :global(.pg-btn) → height: var(--island-hit, 38px); width: var(--island-hit, 38px); min-width: var(--island-hit, 38px); use Pill and shared tokens.
  • [packages/ui/src/components/PillGroup.svelte:469] — .pill-group :global(.pg-btn svg) → width: var(--pill-group-glyph-size, var(--pill-glyph-size, 24px)); height: var(--pill-group-glyph-size, var(--pill-glyph-size, 24px)); use Pill and shared tokens.
  • [packages/ui/src/components/TodayButton.svelte:46] — .today-button.today-button → min-width: 78px; padding-inline: 14px; use Pill and shared tokens.
  • [packages/ui/src/components/Toggle.svelte:76] — .toggle → border: 1.5px solid var(--control-boundary); use Toggle and shared tokens.
  • [packages/ui/src/components/Toggle.svelte:94] — .toggle::after → width: calc(var(--switch-h) - 7px); height: calc(var(--switch-h) - 7px); use Toggle and shared tokens.
  • [packages/ui/src/components/composer/FieldPopover.svelte:110] — .toggle → gap: 8px; use Toggle and shared tokens.
  • [packages/ui/src/components/composer/FieldPopover.svelte:136] — .btn → padding: 0 14px; use shared control primitive and shared tokens.
  • [packages/ui/src/components/composer/VoiceRecordingPill.svelte:226] — :global(.pill-group .voice-recording-pill.expanded) → width: var(--voice-pill-open-size, 12.75rem); use Pill and shared tokens.
  • [packages/ui/src/components/composer/VoiceRecordingPill.svelte:335] — .action-icon → width: 16px; height: 16px; use Pill and shared tokens.
  • [packages/ui/src/components/menu/Menu.svelte:518] — .menu-list → gap: 1px; --menu-icon-gap: 9px; use Menu / MenuItem and shared tokens.
  • [packages/ui/src/components/menu/Menu.svelte:546] — :global([data-density='touch']) .menu-list → --menu-icon-gap: 12px; use Menu / MenuItem and shared tokens.
  • [packages/ui/src/components/menu/Menu.svelte:556] — .menu-header → padding: 6px var(--menu-pad-x) 4px var(--menu-label-x); use Menu / MenuItem and shared tokens.
  • [packages/ui/src/components/menu/MenuItem.svelte:157] — .menu-item → gap: var(--menu-icon-gap, 9px); height: var(--menu-row, 28px); padding: 0 var(--menu-pad-x, 10px); use Menu / MenuItem and shared tokens.
  • [packages/ui/src/components/menu/MenuItem.svelte:180] — .menu-item.drop-target → box-shadow: inset 0 0 0 2px var(--accent); use Menu / MenuItem and shared tokens.
  • [packages/ui/src/components/menu/MenuItem.svelte:232] — .menu-swatch → width: 14px; height: 14px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); use Menu / MenuItem and shared tokens.
  • [packages/ui/src/components/menu/MenuSeparator.svelte:11] — .menu-separator → height: var(--menu-sep-block, 10px); use Menu / MenuItem and shared tokens.
  • [packages/ui/src/components/menu/MenuSeparator.svelte:15] — .menu-separator::before → height: 1px; use Menu / MenuItem and shared tokens.
  • [packages/ui/src/components/modeIsland.css:86] — .island-segment, .pill-group .pg-btn → gap: 6px; use PillGroup and shared tokens.
  • [packages/ui/src/components/viewer/QuickLook.svelte:363] — :global(.pill.label.ql-title-pill) → max-width: min(38rem, calc(100% - 60px)); gap: 8px; padding: 6px calc(var(--control-h) / 2 - 2px); use Pill and shared tokens.
  • [packages/ui/src/components/viewer/QuickLook.svelte:508] — :global(.pill.label.ql-title-pill) → max-width: calc(100% - 46px); use Pill and shared tokens.
Initial full inventory from `5301e020859c1d61b4a7f812a5049a64241203e8`. It groups findings by Tab and lists file, line, category, and the shared primitive or token family. The BlockHoverActions wash slab is assigned to #1189. # Restyle audit — Forgejo #1190 Inventory from 2026-10-06 in apps/web and packages. Each entry has a file and line. Category **(a)** is a local style override of a shared primitive class or an extra surface around one. Category **(b)** is app-owned button, pill, chip, menu, card, or toggle markup and names the shared control to use. Category **(c)** is a literal control size, colour, radius, or duration outside token files and names the shared primitive. ## Calendar (0 a, 1 b, 7 c) ### (b) - [apps/web/src/routes/calendar/[view]/[date]/+page.svelte:3096] — Pill (or PillGroup for adjacent actions). ### (c) - [packages/ui/src/components/calendar/ActivityStack.svelte:141] — .card → border: 1px solid color-mix(in srgb, var(--hair) 80%, transparent); box-shadow: 0 1px 2px rgb(0 0 0 / 8%); use Card and shared tokens. - [packages/ui/src/components/calendar/AttachmentDeck.svelte:969] — :global(.attachment-actions .pg-btn) → gap: 4px; padding-inline: 8px; use PillGroup and shared tokens. - [packages/ui/src/components/calendar/TaskCheckbox.svelte:51] — :global(.task-checkbox-wrap > .checkbox-control) → width: var(--hit, 44px); height: var(--hit, 44px); use Checkbox and shared tokens. - [packages/ui/src/components/calendar/TaskCheckbox.svelte:57] — :global(.task-checkbox-wrap .checkbox-indicator.editor) → width: 16px; height: 16px; use Checkbox and shared tokens. - [packages/ui/src/components/calendar/TimeGrid.svelte:1983] — .chip → gap: 5px; height: 22px; padding: 0 7px; use Pill / TagPill and shared tokens. - [packages/ui/src/components/calendar/TimeGrid.svelte:2006] — .chip :global(svg) → width: 13px; height: 13px; use Pill / TagPill and shared tokens. - [packages/ui/src/components/calendar/YearHeatmap.svelte:197] — button.d:hover → box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--ink) 40%, transparent); use Pill and shared tokens. ## Tasks (6 a, 10 b, 3 c) ### (a) - [apps/web/src/lib/tasks/TaskCard.svelte:75] — .card.task-card → box-sizing: border-box; position: relative; display: block; width: 100%; height: auto; min-height: 0; padding: 0.55rem 0.65rem; text-shadow: none;; extend Card. - [apps/web/src/lib/tasks/TaskCard.svelte:89] — .checkbox-input-wrap → margin-block-start: 0.2rem;; extend Checkbox. - [apps/web/src/lib/tasks/TaskCard.svelte:97] — .status-pill-frame.task-status-pill .status-pill → --pill-nav-height: 1.4rem; --pill-nav-padding: 0.08rem 0.45rem; --pill-nav-font-size: var(--text-caption); min-height: 1.4rem; max-width: none;; extend StatusPill. - [apps/web/src/lib/tasks/TaskColumn.svelte:186] — .card.task-card → outline: 1px dashed var(--accent); outline-offset: -2px;; extend Card. - [apps/web/src/lib/tasks/TaskList.svelte:69] — .card.task-list-card → min-width: 0; overflow: hidden; text-shadow: none;; extend Card. - [apps/web/src/lib/tasks/TaskList.svelte:90] — .status-pill-frame.task-status-pill .status-pill → --pill-nav-height: 1.4rem; --pill-nav-padding: 0.08rem 0.45rem; --pill-nav-font-size: var(--text-caption); min-height: 1.4rem; max-width: none;; extend StatusPill. ### (b) - [apps/web/src/lib/tasks/TaskColumn.svelte:131] — Card. - [apps/web/src/lib/tasks/TaskColumn.svelte:172] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/tasks/TaskSection.svelte:632] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/tasks/TaskSection.svelte:638] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/tasks/TaskSection.svelte:646] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/tasks/TaskSection.svelte:655] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/tasks/TaskSection.svelte:657] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/tasks/TaskSection.svelte:659] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/tasks/TaskSection.svelte:672] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/tasks/TaskSection.svelte:679] — Pill (or PillGroup for adjacent actions). ### (c) - [apps/web/src/lib/tasks/TaskCard.svelte:74] — :global(.card.task-card) → padding: 0.55rem 0.65rem; use Card and shared tokens. - [apps/web/src/lib/tasks/TasksWorkspace.svelte:486] — .view-add button → min-height: 2.65rem; border: 1px solid var(--hair); padding: 0 1rem; use Pill and shared tokens. - [apps/web/src/lib/tasks/TasksWorkspace.svelte:489] — .tasks-state button → min-height: 2.5rem; border: 1px solid var(--hair); padding: 0 0.8rem; use Pill and shared tokens. ## Notes (8 a, 27 b, 11 c) ### (a) - [apps/web/src/lib/editor/format/BlockHoverActions.svelte:250] — extra ProgressiveBlur wash slab behind PillGroup; remove the slab and keep the shared capsule material (#1189). - [apps/web/src/lib/notes/NoteContents.svelte:364] — .surface.note-contents-sheet .sheet-scroll → overscroll-behavior: contain;; extend FloatingSurface / OverlaySurface. - [apps/web/src/lib/notes/NoteContents.svelte:370] — .surface.note-contents-sheet .sheet-chrome → background: transparent;; extend FloatingSurface / OverlaySurface. - [apps/web/src/lib/notes/NoteContents.svelte:372] — .surface.note-contents-sheet .sheet-title-row → grid-template-columns: minmax(0, 1fr); justify-items: center;; extend FloatingSurface / OverlaySurface. - [apps/web/src/lib/notes/NoteContents.svelte:376] — .surface.note-contents-sheet .sheet-leading → grid-column: 1; justify-self: center;; extend FloatingSurface / OverlaySurface. - [apps/web/src/lib/notes/NoteContents.svelte:383] — .surface.note-contents-sheet .sheet-title → position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;; extend FloatingSurface / OverlaySurface. - [apps/web/src/lib/notes/NoteView.svelte:2566] — .card.glass-card → box-shadow: none;; extend Card. - [apps/web/src/lib/notes/NoteView.svelte:2674] — .note-stack .note-card.card.note-card--segmented → background: transparent; border-color: transparent; box-shadow: none;; extend Card. ### (b) - [apps/web/src/lib/canvas/CanvasItemCard.svelte:56] — Card. - [apps/web/src/lib/canvas/CanvasItemCard.svelte:57] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/canvas/CanvasItemCard.svelte:69] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/canvas/CanvasItemCard.svelte:70] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/canvas/CanvasItemCard.svelte:72] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/canvas/CanvasPreview.svelte:92] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/editor/format/BlockHoverActions.svelte:260] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/editor/format/BlockReminderPicker.svelte:284] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/editor/format/BlockReminderPicker.svelte:302] — Pill or TagPill. - [apps/web/src/lib/editor/format/BlockReminderPicker.svelte:308] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/editor/format/BlockReminderPicker.svelte:315] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/editor/format/BlockReminderPicker.svelte:321] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/editor/format/FormatButton.svelte:64] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/notes/NoteContents.svelte:166] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/notes/NoteContents.svelte:211] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/notes/NoteImageView.svelte:121] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/notes/NoteView.svelte:2211] — Card. - [apps/web/src/lib/notes/NoteView.svelte:2216] — Card. - [apps/web/src/lib/notes/NoteView.svelte:2223] — Card. - [apps/web/src/lib/notes/NoteView.svelte:2226] — Card. - [apps/web/src/lib/notes/NoteView.svelte:2234] — Card. - [apps/web/src/lib/notes/NotesExplorer.svelte:463] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/notes/NotesExplorer.svelte:507] — Pill (or PillGroup for adjacent actions). - [apps/web/src/routes/journal/+page.svelte:78] — Pill (or PillGroup for adjacent actions). - [apps/web/src/routes/notes/+page.svelte:175] — Pill (or PillGroup for adjacent actions). - [packages/editor/src/components/CalloutView.svelte:27] — Pill (or PillGroup for adjacent actions). - [packages/editor/src/components/TaskItemView.svelte:66] — Checkbox. ### (c) - [apps/web/src/lib/canvas/CanvasView.svelte:486] — .canvas-elements-row :global(button) → min-height:44px; use Pill and shared tokens. - [apps/web/src/lib/canvas/DrawingBlock.svelte:469] — :global(.drawing-block .App-toolbar--mobile button), :global(.drawing-block .App-toolbar--mobile .ToolIcon) → min-width: 44px; min-height: 44px; use Pill and shared tokens. - [apps/web/src/lib/editor/format/FormatButton.svelte:124] — .format-button.wide → gap: 7px; padding-inline: 8px; use Pill and shared tokens. - [apps/web/src/lib/editor/format/FormatButton.svelte:151] — .format-button → width: 28px; min-width: 28px; height: 28px; min-height: 28px; use Pill and shared tokens. - [apps/web/src/lib/editor/format/FormatButton.svelte:157] — .format-button.wide → height: 28px; min-height: 28px; use Pill and shared tokens. - [apps/web/src/lib/editor/format/FormatButton.svelte:161] — .format-button → width: 44px; min-width: 44px; height: 44px; min-height: 44px; use Pill and shared tokens. - [apps/web/src/lib/editor/format/FormatButton.svelte:169] — .format-button.wide → min-width: 44px; min-height: 44px; padding-inline: 10px; use Pill and shared tokens. - [apps/web/src/lib/editor/format/FormatButton.svelte:97] — .format-button → width: 28px; min-width: 28px; height: 28px; min-height: 28px; use Pill and shared tokens. - [apps/web/src/lib/notes/NoteView.svelte:2937] — .note-state-actions a, .note-state-actions button → min-height: 40px; padding: 0 16px; use Pill and shared tokens. - [packages/ui/src/components/notes/NoteMentionsCard.svelte:320] — :global(.mention-count.pill.count) → width: 24px; min-width: 24px; height: 24px; min-height: 24px; padding: 0 3px; use Card and shared tokens. - [packages/ui/src/components/notes/NoteProperties.svelte:294] — :global(.properties-count.pill.count) → width: 20px; min-width: 20px; height: 20px; min-height: 20px; padding: 0 3px; use Pill and shared tokens. ## Files (6 a, 58 b, 1 c) ### (a) - [apps/web/src/lib/files/FilesBrowser.svelte:1826] — .surface.dialog.paste-upload-conflict → width: min(460px, calc(100vw - 32px)); translate: -50% -50%;; extend FloatingSurface / OverlaySurface. - [apps/web/src/lib/files/ShareDialog.svelte:493] — .surface.sheet.share-sheet → max-height: min(88dvh, 860px);; extend FloatingSurface / OverlaySurface. - [apps/web/src/lib/files/ShareDialog.svelte:495] — .surface.dialog.share-sheet → width: min(580px, calc(100vw - 32px)); max-height: min(88dvh, 860px);; extend FloatingSurface / OverlaySurface. - [apps/web/src/lib/files/ShareDialog.svelte:641] — .pg-btn → display: grid; width: var(--control-h); height: var(--control-h); place-items: center; border: 0; border-radius: var(--radius-circle); background: transparent; color: var(--ink-muted); cursor: pointer; --pill-group-glyph-size: var(--icon);; extend PillGroup. - [apps/web/src/lib/files/ShareDialog.svelte:653] — .pg-btn:hover → background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink);; extend PillGroup. - [apps/web/src/lib/files/SharedByYou.svelte:165] — .pg-btn → display: grid; width: var(--control-h); height: var(--control-h); place-items: center; border: 0; border-radius: var(--radius-circle); background: transparent; color: var(--ink-muted); cursor: pointer; --pill-group-glyph-size: var(--icon);; extend PillGroup. ### (b) - [apps/web/src/lib/files/FilesBrowser.svelte:1620] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/FilesBrowser.svelte:1621] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/FilesBrowser.svelte:1628] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/FilesBrowser.svelte:1633] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/FilesBrowser.svelte:1645] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/FilesBrowser.svelte:1646] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/FilesBrowser.svelte:1700] — Card. - [apps/web/src/lib/files/FilesBrowser.svelte:1762] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/FilesSidebar.svelte:196] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/FilesSidebar.svelte:216] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/FilesSidebar.svelte:217] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/FilesSidebar.svelte:218] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/InfoPanel.svelte:613] — Card. - [apps/web/src/lib/files/InfoPanel.svelte:664] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/InfoPanel.svelte:665] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/InfoPanel.svelte:671] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/InfoPanel.svelte:679] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/InfoPanel.svelte:688] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/InfoPanel.svelte:722] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/InfoPanel.svelte:728] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/InfoPanel.svelte:758] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/InfoPanel.svelte:825] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/InfoPanel.svelte:840] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/PublicLinkPage.svelte:467] — Card. - [apps/web/src/lib/files/PublicLinkPage.svelte:473] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/PublicLinkPage.svelte:476] — Card. - [apps/web/src/lib/files/PublicLinkPage.svelte:481] — Card. - [apps/web/src/lib/files/PublicLinkPage.svelte:483] — Card. - [apps/web/src/lib/files/PublicLinkPage.svelte:512] — Card. - [apps/web/src/lib/files/PublicLinkPage.svelte:514] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/PublicLinkPage.svelte:521] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/PublicLinkPage.svelte:523] — Card. - [apps/web/src/lib/files/PublicLinkPage.svelte:529] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/PublicLinkPage.svelte:532] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/PublicLinkPage.svelte:540] — Card. - [apps/web/src/lib/files/PublicLinkPage.svelte:553] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/PublicLinkPage.svelte:580] — Card. - [apps/web/src/lib/files/PublicLinkPage.svelte:585] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/PublicLinkPage.svelte:593] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/PublicLinkPage.svelte:600] — Card. - [apps/web/src/lib/files/PublicLinkPage.svelte:603] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/PublicLinkPage.svelte:609] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/PublicLinkPage.svelte:620] — Card. - [apps/web/src/lib/files/PublicLinkPage.svelte:628] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/PublicLinkPage.svelte:635] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/ShareDialog.svelte:323] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/ShareDialog.svelte:341] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/ShareDialog.svelte:374] — Pill. - [apps/web/src/lib/files/ShareDialog.svelte:391] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/ShareDialog.svelte:392] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/SharedByYou.svelte:86] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/UploadToast.svelte:130] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/UploadToast.svelte:136] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/UploadToast.svelte:146] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/UploadToast.svelte:163] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/UploadToast.svelte:165] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/UploadToast.svelte:167] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/files/UploadToast.svelte:170] — Pill (or PillGroup for adjacent actions). ### (c) - [apps/web/src/lib/files/ShareDialog.svelte:746] — .pill-icon-label → gap: 6px; use Pill and shared tokens. ## Photos (0 a, 7 b, 1 c) ### (b) - [apps/web/src/lib/photos/PhotoViewer.svelte:372] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/photos/PhotoViewer.svelte:387] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/photos/PhotosView.svelte:857] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/photos/PhotosView.svelte:894] — Card. - [apps/web/src/lib/photos/PhotosView.svelte:913] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/photos/PhotosView.svelte:926] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/photos/PhotosView.svelte:928] — Pill (or PillGroup for adjacent actions). ### (c) - [apps/web/src/lib/photos/BackgroundsFolderView.svelte:167] — .empty button → padding: 0 14px; use Pill and shared tokens. ## Mail (2 a, 8 b, 0 c) ### (a) - [apps/web/src/lib/mail/MailView.svelte:1534] — .pill → grid-area: action;; extend Pill. - [apps/web/src/lib/mail/MailView.svelte:1539] — .pill → justify-self: start;; extend Pill. ### (b) - [apps/web/src/lib/mail/MailMorphCard.svelte:61] — Card. - [apps/web/src/lib/mail/MailView.svelte:1389] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/mail/MailView.svelte:1411] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/mail/MailView.svelte:1421] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/mail/MailView.svelte:1442] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/mail/MailView.svelte:1456] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/mail/MailView.svelte:1477] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/mail/MailView.svelte:1478] — Pill (or PillGroup for adjacent actions). ## Money (0 a, 7 b, 0 c) ### (b) - [apps/web/src/routes/money/[budget]/[month]/+page.svelte:278] — Card. - [apps/web/src/routes/money/[budget]/[month]/+page.svelte:301] — Card. - [apps/web/src/routes/money/[budget]/[month]/+page.svelte:364] — Pill (or PillGroup for adjacent actions). - [apps/web/src/routes/money/[budget]/accounts/[[account]]/+page.svelte:328] — Card. - [apps/web/src/routes/money/[budget]/accounts/[[account]]/+page.svelte:334] — Card. - [apps/web/src/routes/money/[budget]/accounts/[[account]]/+page.svelte:385] — Pill (or PillGroup for adjacent actions). - [apps/web/src/routes/money/[budget]/accounts/[[account]]/+page.svelte:410] — Pill (or PillGroup for adjacent actions). ## Search (9 a, 20 b, 14 c) ### (a) - [apps/web/src/lib/components/search-dialog.svelte:1145] — .surface.pill.search-window → display: flex; flex-direction: column; width: var(--palette-width); /* The top stays at --palette-top; the bottom stops at two-thirds height. */ max-height: max(0px, min(calc(66.666dvh - var(--palette-top)), 44rem)); transition: height var(--dur-morph) var(--ease-spring), width var(--dur-search) var(--ease-out), max-height var(--dur-search) var(--ease-out);; extend FloatingSurface / OverlaySurface. - [apps/web/src/lib/components/search-dialog.svelte:1158] — .surface.pill.search-window.has-preview → width: var(--palette-width-preview);; extend FloatingSurface / OverlaySurface. - [apps/web/src/lib/components/search-dialog.svelte:1163] — .surface.pill.search-window.is-expanded → top: max(24px, 4dvh); width: min(76rem, calc(100vw - 32px)); height: min(92dvh, 64rem); max-height: min(92dvh, 64rem);; extend FloatingSurface / OverlaySurface. - [apps/web/src/lib/components/search-dialog.svelte:1175] — :root .surface.pill.search-window.is-expanded → --search-band: calc(var(--search-vv-height, 100dvh) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px); width: calc(100vw - 16px); max-height: var(--search-band);; extend FloatingSurface / OverlaySurface. - [apps/web/src/lib/components/search-dialog.svelte:1183] — :root .surface.pill.search-window.is-expanded → top: calc(var(--search-vv-top, 0px) + var(--search-vv-height, 100dvh) / 2); translate: 0 -50%; height: auto;; extend FloatingSurface / OverlaySurface. - [apps/web/src/lib/components/search-dialog.svelte:1199] — .surface.pill.search-window → transition: none;; extend FloatingSurface / OverlaySurface. - [apps/web/src/lib/search/SearchPreview.svelte:1061] — .actions > .pill-group → min-width: 0; max-width: 100%; flex-wrap: wrap;; extend PillGroup. - [apps/web/src/lib/search/SearchPreview.svelte:1066] — .actions > .pill-group:last-child → margin-left: 0;; extend PillGroup. - [apps/web/src/lib/search/SearchResultRow.svelte:261] — .item-card → gap: var(--search-result-icon-gap);; extend ItemCard. ### (b) - [apps/web/src/lib/components/search-dialog.svelte:868] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/components/search-dialog.svelte:869] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/components/search-dialog.svelte:878] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/components/search-dialog.svelte:899] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/components/search-dialog.svelte:909] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/components/search-dialog.svelte:919] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/components/search-dialog.svelte:928] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/components/search-dialog.svelte:939] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/search/SavedSearchList.svelte:184] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/search/SearchField.svelte:281] — Pill or TagPill. - [apps/web/src/lib/search/SearchField.svelte:282] — Pill or TagPill. - [apps/web/src/lib/search/SearchField.svelte:287] — Pill or TagPill. - [apps/web/src/lib/search/SearchField.svelte:293] — Pill. - [apps/web/src/lib/search/SearchField.svelte:300] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/search/SearchField.svelte:313] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/search/SearchPreview.svelte:683] — Card. - [apps/web/src/lib/search/SearchPreview.svelte:770] — Pill. - [apps/web/src/lib/search/SearchPreview.svelte:795] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/search/SearchPreview.svelte:799] — Pill (or PillGroup for adjacent actions). - [apps/web/src/routes/tag/[tag]/+page.svelte:205] — Pill (or PillGroup for adjacent actions). ### (c) - [apps/web/src/lib/components/search-dialog.svelte:1141] — :global(.surface.pill.search-window) → max-height: max(0px, min(calc(66.666dvh - var(--palette-top)), 44rem)); use Pill and shared tokens. - [apps/web/src/lib/components/search-dialog.svelte:1163] — :global(.surface.pill.search-window.is-expanded) → width: min(76rem, calc(100vw - 32px)); height: min(92dvh, 64rem); max-height: min(92dvh, 64rem); use Pill and shared tokens. - [apps/web/src/lib/components/search-dialog.svelte:1173] — :global(:root .surface.pill.search-window), :global(:root .surface.pill.search-window.is-expanded) → width: calc(100vw - 16px); use Pill and shared tokens. - [apps/web/src/lib/components/search-dialog.svelte:1192] — :global(:root .surface.pill.search-window.is-expanded) .sw → max-height: calc(var(--search-band) - 2px); use Pill and shared tokens. - [apps/web/src/lib/components/search-dialog.svelte:1220] — :global(.surface.pill.search-window) .sw → --search-edge-blur-height: 2rem; use Pill and shared tokens. - [apps/web/src/lib/components/search-dialog.svelte:1284] — .expanded .results-list :global(.row:not(.card)) → height: 58px; use Card and shared tokens. - [apps/web/src/lib/components/search-dialog.svelte:1305] — :global(.surface.pill.search-window.preview-resized) .preview-pane → width: var(--palette-preview-width, var(--search-preview-width, 300px)); use Pill and shared tokens. - [apps/web/src/lib/search/SearchField.svelte:496] — .q-pill button, .scope-chip button → width: 20px; height: 20px; use Pill and shared tokens. - [apps/web/src/lib/search/SearchField.svelte:524] — .q-pill button :global(svg), .scope-chip button :global(svg) → width: 12px; height: 12px; use Pill and shared tokens. - [apps/web/src/lib/search/SearchField.svelte:532] — .q-pill button, .scope-chip button → width: 44px; height: 44px; use Pill and shared tokens. - [apps/web/src/lib/search/SearchField.svelte:547] — .action-trailing → gap: 6px; use shared control primitive and shared tokens. - [apps/web/src/lib/search/SearchPreview.svelte:1118] — .action → width: 34px; height: 34px; border: 1px solid var(--control-boundary); use shared control primitive and shared tokens. - [apps/web/src/lib/search/SearchResultRow.svelte:339] — .row.card → min-height: 52px; padding: 11px 14px 11px calc(var(--search-column-inset, 18px) - var(--search-row-inset, 6px) - 1px); use Card and shared tokens. - [apps/web/src/lib/search/SearchResultRow.svelte:351] — .row.card .line1 → row-gap: 1px; use Card and shared tokens. ## Settings (18 a, 34 b, 10 c) ### (a) - [apps/web/src/routes/settings/account/AppPasswordsGroup.svelte:1216] — .surface.sheet #opt-app-passwords > .app-passwords-sheet-card → padding: 0; border-color: transparent; background: transparent; box-shadow: none;; extend FloatingSurface / OverlaySurface. - [apps/web/src/routes/settings/account/RecoveryKeySheet.svelte:116] — .surface-background.sheet.rotate-sheet → background: var(--surface);; extend FloatingSurface / OverlaySurface. - [apps/web/src/routes/settings/account/RecoveryKeySheet.svelte:118] — .surface.dialog.rotate-sheet → width: min(480px, calc(100vw - 32px));; extend FloatingSurface / OverlaySurface. - [apps/web/src/routes/settings/account/RecoveryKeySheet.svelte:121] — .surface-background.dialog.rotate-sheet → background: var(--surface);; extend FloatingSurface / OverlaySurface. - [apps/web/src/routes/settings/appearance/UnsplashSheet.svelte:139] — .surface-background.sheet.unsplash-sheet → background: var(--surface);; extend FloatingSurface / OverlaySurface. - [apps/web/src/routes/settings/appearance/UnsplashSheet.svelte:141] — .surface.dialog.unsplash-sheet → width: min(720px, calc(100vw - 32px)); max-height: min(88dvh, 860px);; extend FloatingSurface / OverlaySurface. - [apps/web/src/routes/settings/appearance/UnsplashSheet.svelte:145] — .surface-background.dialog.unsplash-sheet → background: var(--surface);; extend FloatingSurface / OverlaySurface. - [apps/web/src/routes/settings/apps/CalendarFeedsGroup.svelte:251] — html.scrim-open body .surface-background.glass-overlay.feed-sheet → background: var(--surface);; extend FloatingSurface / OverlaySurface. - [apps/web/src/routes/settings/connected-accounts/ConnectedAccountsSection.svelte:821] — .surface.dialog.connected-account-provider-sheet → /* OverlaySurface owns both center coordinates and the Settings pane offset. */ translate: -50% -50%; width: min(560px, calc(100vw - 32px)); max-height: min(88dvh, 820px);; extend FloatingSurface / OverlaySurface. - [apps/web/src/routes/settings/connected-accounts/ConnectedAccountsSection.svelte:837] — .surface.sheet.connected-account-provider-sheet → --sheet-chrome-height: calc(1.5rem + var(--header-reserve));; extend FloatingSurface / OverlaySurface. - [apps/web/src/routes/settings/connected-accounts/ConnectedAccountsSection.svelte:838] — .surface.sheet.connected-account-provider-sheet .sheet-scroll → /* header-reserve already includes the title-to-content gap. */ padding-block-start: var(--sheet-chrome-height); scroll-padding-top: var(--sheet-chrome-height);; extend FloatingSurface / OverlaySurface. - [apps/web/src/routes/settings/connected-accounts/ConnectedAccountsSection.svelte:863] — .surface.sheet.connected-account-provider-sheet .provider-sheet → padding-top: 0;; extend FloatingSurface / OverlaySurface. - [apps/web/src/routes/settings/jobs/JobDetails.svelte:98] — .pill.row-action → padding-inline-start: 0;; extend Pill. - [apps/web/src/routes/settings/parts/RowAction.svelte:24] — .pill.row-action.danger → --pill-color: var(--now); --pill-color-hover: var(--now); --pill-bg-hover: color-mix(in srgb, var(--now) 10%, transparent);; extend Pill. - [apps/web/src/routes/settings/parts/RowAction.svelte:28] — .pill.row-action:disabled → opacity: 0.5; cursor: default;; extend Pill. - [apps/web/src/routes/settings/parts/StateChip.svelte:21] — .pill.state-chip → --pill-bg: var(--paper-2); --pill-border: transparent; --pill-color: var(--muted);; extend Pill. - [apps/web/src/routes/settings/parts/StateChip.svelte:25] — .pill.state-chip.accent → --pill-bg: var(--accent-soft); --pill-border: color-mix(in srgb, var(--accent) 25%, transparent); --pill-color: var(--accent);; extend Pill. - [apps/web/src/routes/settings/parts/StateChip.svelte:30] — .pill.state-chip.attention → --pill-bg: color-mix(in srgb, var(--now) 14%, var(--surface)); --pill-border: color-mix(in srgb, var(--now) 25%, transparent); --pill-color: color-mix(in srgb, var(--now) 78%, var(--ink));; extend Pill. ### (b) - [apps/web/src/lib/auth/components/AuthCard.svelte:24] — Card. - [apps/web/src/lib/auth/components/CreateAccountFlow.svelte:184] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/auth/components/CreateAccountFlow.svelte:205] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/auth/components/CreateAccountFlow.svelte:234] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/auth/components/RecoverFlow.svelte:146] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/auth/components/RecoverFlow.svelte:162] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/auth/components/RecoverFlow.svelte:173] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/auth/components/RecoveryKeyEntry.svelte:286] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/auth/components/RecoveryKeyWords.svelte:65] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/auth/components/RecoveryKeyWords.svelte:72] — Pill (or PillGroup for adjacent actions). - [apps/web/src/routes/settings/[...path]/+page.svelte:392] — Pill (or PillGroup for adjacent actions). - [apps/web/src/routes/settings/[...path]/+page.svelte:400] — Pill (or PillGroup for adjacent actions). - [apps/web/src/routes/settings/[...path]/+page.svelte:406] — Pill (or PillGroup for adjacent actions). - [apps/web/src/routes/settings/[...path]/+page.svelte:419] — Pill (or PillGroup for adjacent actions). - [apps/web/src/routes/settings/account/AppPasswordsGroup.svelte:884] — Pill (or PillGroup for adjacent actions). - [apps/web/src/routes/settings/account/AppPasswordsGroup.svelte:963] — Card. - [apps/web/src/routes/settings/account/PasskeysGroup.svelte:271] — Card. - [apps/web/src/routes/settings/account/SessionsGroup.svelte:104] — Card. - [apps/web/src/routes/settings/admin/InvitationsGroup.svelte:185] — Card. - [apps/web/src/routes/settings/appearance/BackgroundGroup.svelte:1044] — Pill (or PillGroup for adjacent actions). - [apps/web/src/routes/settings/appearance/BackgroundGroup.svelte:1058] — Pill (or PillGroup for adjacent actions). - [apps/web/src/routes/settings/appearance/BackgroundGroup.svelte:1099] — Pill (or PillGroup for adjacent actions). - [apps/web/src/routes/settings/appearance/BackgroundGroup.svelte:907] — Pill (or PillGroup for adjacent actions). - [apps/web/src/routes/settings/appearance/BackgroundGroup.svelte:929] — Pill (or PillGroup for adjacent actions). - [apps/web/src/routes/settings/appearance/BackgroundGroup.svelte:942] — Pill (or PillGroup for adjacent actions). - [apps/web/src/routes/settings/appearance/BackgroundGroup.svelte:955] — Pill (or PillGroup for adjacent actions). - [apps/web/src/routes/settings/appearance/BackgroundGroup.svelte:988] — Pill (or PillGroup for adjacent actions). - [apps/web/src/routes/settings/appearance/UnsplashSheet.svelte:120] — Pill (or PillGroup for adjacent actions). - [apps/web/src/routes/settings/calendars/CalendarsSection.svelte:401] — Card. - [apps/web/src/routes/settings/connected-accounts/ConnectedAccountsSection.svelte:614] — Pill (or PillGroup for adjacent actions). - [apps/web/src/routes/settings/notifications/NotificationsSection.svelte:172] — Card. - [apps/web/src/routes/settings/notifications/NotificationsSection.svelte:184] — Card. - [apps/web/src/routes/settings/plugins/PluginsSection.svelte:176] — Pill (or PillGroup for adjacent actions). - [apps/web/src/routes/settings/voice/VoiceSection.svelte:170] — Card. ### (c) - [apps/web/src/lib/auth/components/AuthCard.svelte:34] — .card → width: min(420px, 100%); border: 1px solid var(--hair); padding: 26px 22px; gap: 12px; use Card and shared tokens. - [apps/web/src/lib/auth/components/AuthCard.svelte:46] — .card.wide → width: min(480px, 100%); use Card and shared tokens. - [apps/web/src/lib/auth/components/RecoveryKeyWords.svelte:87] — .btn-row → gap: 8px; use shared control primitive and shared tokens. - [apps/web/src/lib/auth/components/RecoveryKeyWords.svelte:91] — .btn-row .btn → min-width: 8rem; use shared control primitive and shared tokens. - [apps/web/src/routes/settings/admin/SignInGroup.svelte:76] — .toggle-row → gap: 16px; use Toggle and shared tokens. - [apps/web/src/routes/settings/admin/SignInGroup.svelte:81] — .toggle-text → gap: 2px; use Toggle and shared tokens. - [apps/web/src/routes/settings/apps/CalendarFeedsGroup.svelte:268] — .toggle-row → gap: 12px; min-height: 44px; use Toggle and shared tokens. - [apps/web/src/routes/settings/notifications/NotificationsSection.svelte:190] — .toggle-slot → min-height: 34px; use Toggle and shared tokens. - [apps/web/src/routes/settings/parts/settings-forms.css:29] — :is(.settings-shell, .money-form) :where(.card-footer) → gap: 10px 8px; use Card and shared tokens. - [apps/web/src/routes/settings/voice/VoiceSection.svelte:242] — .toggle-slot → min-height: 34px; use Toggle and shared tokens. ## Analytics (2 a, 5 b, 2 c) ### (a) - [apps/web/src/lib/components/analytics/widgets/StatRow.svelte:334] — .card → display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 2px;; extend Card. - [apps/web/src/lib/components/analytics/widgets/StatRow.svelte:344] — .card → grid-row: auto; display: flex; flex-direction: column; min-height: calc(var(--stat-card-min-height) + 32px);; extend Card. ### (b) - [apps/web/src/lib/components/analytics/Dashboard.svelte:86] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/components/analytics/RangePicker.svelte:323] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/components/analytics/RangePicker.svelte:335] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/components/analytics/RangePicker.svelte:406] — Pill (or PillGroup for adjacent actions). - [apps/web/src/routes/analytics/[period]/[date]/+page.svelte:134] — Card. ### (c) - [apps/web/src/lib/components/analytics/widgets/StatRow.svelte:328] — .grid > :global(.card) → row-gap: 2px; use Card and shared tokens. - [apps/web/src/lib/components/analytics/widgets/StatRow.svelte:342] — .grid > :global(.card) → min-height: calc(var(--stat-card-min-height) + 32px); use Card and shared tokens. ## Notifications (5 a, 3 b, 0 c) ### (a) - [apps/web/src/lib/notifications/InboxPanel.svelte:427] — .surface.panel.inbox-surface → top: var(--inbox-top, calc(env(safe-area-inset-top, 0px) + 64px)); right: var(--inbox-right, 16px); bottom: auto; width: min(400px, calc(100vw - 24px)); max-height: min(640px, calc(100dvh - var(--inbox-top, 64px) - 24px)); padding: 0; border: 1px solid var(--glass-border); border-radius: var(--radius-dialog); background: var(--cal-sheet-material); box-shadow: var(--glass-shadow);; extend FloatingSurface / OverlaySurface. - [apps/web/src/lib/notifications/InboxPanel.svelte:441] — .surface.sheet.inbox-surface → padding-inline: 0;; extend FloatingSurface / OverlaySurface. - [apps/web/src/lib/notifications/InboxPanel.svelte:443] — .surface.sheet.inbox-surface .sheet-scroll → padding-inline: 8px;; extend FloatingSurface / OverlaySurface. - [apps/web/src/lib/notifications/InboxPanel.svelte:495] — .inbox-actions .pg-btn[aria-disabled='true'] → opacity: 0.4; cursor: default;; extend PillGroup. - [apps/web/src/lib/notifications/InboxPanel.svelte:499] — .inbox-actions .pg-btn[aria-disabled='true'] → opacity: 0.4; cursor: default;; extend PillGroup. ### (b) - [apps/web/src/lib/notifications/InboxPanel.svelte:389] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/notifications/InboxPanel.svelte:393] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/notifications/InboxPanel.svelte:399] — Pill (or PillGroup for adjacent actions). ## Shared UI (16 a, 40 b, 53 c) ### (a) - [apps/web/src/lib/ai/TurnPanel.svelte:302] — .surface.dialog.turn-panel → width: min(var(--turn-panel-width, 460px), calc(100vw - 24px)); height: min(780px, 82dvh); max-height: 82dvh; padding: 0; overflow: hidden; background: var(--surface); border: 1px solid color-mix(in srgb, var(--hair) 65%, transparent); box-shadow: 0 24px 50px -22px rgba(20, 30, 24, 0.42);; extend FloatingSurface / OverlaySurface. - [apps/web/src/lib/ai/TurnPanel.svelte:311] — .surface.sheet.turn-panel → padding: 0; overflow: hidden; background: var(--surface);; extend FloatingSurface / OverlaySurface. - [apps/web/src/lib/components/AppToaster.svelte:533] — .cal-toaster .cal-toast .cal-toast-btn .pill-content → pointer-events: none;; extend Pill. - [apps/web/src/lib/components/ConfirmSheet.svelte:113] — .surface-background.sheet.confirm-sheet → background: var(--surface);; extend FloatingSurface / OverlaySurface. - [apps/web/src/lib/components/ConfirmSheet.svelte:115] — .surface-background.dialog.confirm-sheet → background: var(--surface);; extend FloatingSurface / OverlaySurface. - [apps/web/src/lib/components/ConfirmSheet.svelte:118] — .surface.dialog.confirm-sheet → width: min(440px, calc(100vw - 32px)); /* OverlaySurface owns the vertical centring; this confirmation also needs the matching horizontal offset at tablet and desktop widths. */ translate: -50% -50%;; extend FloatingSurface / OverlaySurface. - [apps/web/src/lib/components/ConfirmSheet.svelte:172] — .pill.confirm-danger → --pill-bg: var(--now); --pill-bg-hover: color-mix(in srgb, var(--now) 88%, var(--ink));; extend Pill. - [apps/web/src/lib/components/ShortcutList.svelte:128] — .kbd-caps → grid-column: 2; grid-row: 1; align-self: center;; extend Kbd. - [apps/web/src/lib/components/TagEditor.svelte:191] — .surface.sheet.tag-sheet → max-height: min(80dvh, 620px);; extend FloatingSurface / OverlaySurface. - [apps/web/src/lib/components/TagEditor.svelte:193] — .surface-background.sheet.tag-sheet → background: var(--surface);; extend FloatingSurface / OverlaySurface. - [apps/web/src/lib/components/TagEditor.svelte:196] — .surface.dialog.tag-sheet → width: min(500px, calc(100vw - 32px)); max-height: min(80dvh, 620px);; extend FloatingSurface / OverlaySurface. - [apps/web/src/lib/components/TagEditor.svelte:200] — .surface-background.dialog.tag-sheet → background: var(--surface);; extend FloatingSurface / OverlaySurface. - [apps/web/src/lib/components/app-sidebar.svelte:724] — .sidebar-month-card.glass-card → background: var(--glass-card-inner-bg); border-color: var(--glass-border);; extend Card. - [apps/web/src/lib/composer/Composer.svelte:2386] — .surface.pill.viewport-fit.composer-window → /* The Composer is the centered member of the shared pill family. Keep its center attached to the visible area as the software keyboard moves it. */ top: calc(var(--vv-top, 0px) + var(--vv-height, 100dvh) / 2); translate: 0 -50%; max-height: calc(var(--vv-height, 100dvh) - 24px);; extend FloatingSurface / OverlaySurface. - [apps/web/src/lib/composer/Composer.svelte:2392] — .surface.pill.composer-window → overflow: hidden;; extend FloatingSurface / OverlaySurface. - [apps/web/src/lib/history/VersionHistory.svelte:418] — .pill svg → width: var(--icon); height: var(--icon);; extend Pill. ### (b) - [apps/web/src/lib/components/KeyboardShortcutsCard.svelte:54] — Card. - [apps/web/src/lib/components/KeyboardShortcutsCard.svelte:72] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/components/TagEditor.svelte:135] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/components/TagEditor.svelte:141] — Pill or TagPill. - [apps/web/src/lib/components/TagEditor.svelte:143] — Pill or TagPill. - [apps/web/src/lib/components/app-sidebar.svelte:577] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/components/empty-state.svelte:25] — Card. - [apps/web/src/lib/composer/Composer.svelte:2068] — Pill or TagPill. - [apps/web/src/lib/composer/Composer.svelte:2074] — Pill or TagPill. - [apps/web/src/lib/composer/Composer.svelte:2076] — Pill or TagPill. - [apps/web/src/lib/composer/Composer.svelte:2081] — Pill or TagPill. - [apps/web/src/lib/composer/Composer.svelte:2096] — Pill or TagPill. - [apps/web/src/lib/composer/Composer.svelte:2099] — Pill or TagPill. - [apps/web/src/lib/composer/Composer.svelte:2100] — Pill or TagPill. - [apps/web/src/lib/composer/Composer.svelte:2105] — Pill or TagPill. - [apps/web/src/lib/composer/Composer.svelte:2106] — Pill or TagPill. - [apps/web/src/lib/composer/Composer.svelte:2113] — Pill or TagPill. - [apps/web/src/lib/composer/Composer.svelte:2115] — Pill or TagPill. - [apps/web/src/lib/composer/Composer.svelte:2118] — Pill or TagPill. - [apps/web/src/lib/composer/Composer.svelte:2122] — Pill or TagPill. - [apps/web/src/lib/composer/Composer.svelte:2125] — Pill or TagPill. - [apps/web/src/lib/composer/Composer.svelte:2128] — Pill or TagPill. - [apps/web/src/lib/composer/Composer.svelte:2132] — Pill or TagPill. - [apps/web/src/lib/composer/Composer.svelte:2132] — TagPill. - [apps/web/src/lib/composer/Composer.svelte:2136] — TagPill. - [apps/web/src/lib/composer/Composer.svelte:2145] — Pill or TagPill. - [apps/web/src/lib/composer/Composer.svelte:2248] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/composer/Composer.svelte:2254] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/composer/Composer.svelte:2264] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/composer/Composer.svelte:2267] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/composer/Composer.svelte:2273] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/composer/Composer.svelte:2280] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/composer/Composer.svelte:2281] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/composer/Composer.svelte:2320] — Pill (or PillGroup for adjacent actions). - [apps/web/src/lib/history/VersionHistory.svelte:345] — Pill (or PillGroup for adjacent actions). - [apps/web/src/routes/+layout.svelte:1425] — Pill (or PillGroup for adjacent actions). - [apps/web/src/routes/login/+page.svelte:168] — Pill (or PillGroup for adjacent actions). - [apps/web/src/routes/login/+page.svelte:173] — Pill (or PillGroup for adjacent actions). - [apps/web/src/routes/login/+page.svelte:191] — Pill (or PillGroup for adjacent actions). - [apps/web/src/routes/login/+page.svelte:200] — Pill (or PillGroup for adjacent actions). ### (c) - [apps/web/src/lib/components/TagEditor.svelte:262] — .chip → gap: 1px; use Pill / TagPill and shared tokens. - [apps/web/src/lib/composer/Composer.svelte:2383] — :global(.surface.pill.viewport-fit.composer-window) → max-height: calc(var(--vv-height, 100dvh) - 24px); use Pill and shared tokens. - [apps/web/src/lib/composer/Composer.svelte:2492] — .chip → border: 1px solid color-mix(in srgb, var(--hair) 60%, transparent); use Pill / TagPill and shared tokens. - [apps/web/src/lib/composer/Composer.svelte:2584] — .chip.tag → max-width: min(15rem, 52vw); use Pill / TagPill and shared tokens. - [apps/web/src/lib/composer/Composer.svelte:2596] — .chip.tag.inferred → border: 1px dashed color-mix(in srgb, var(--tfg) 55%, transparent); use Pill / TagPill and shared tokens. - [apps/web/src/lib/styles/auth-ui.css:117] — .auth-ui :where(.btn) → padding: 12px 16px; min-height: 44px; gap: 8px; use shared control primitive and shared tokens. - [apps/web/src/lib/styles/auth-ui.css:137] — .auth-ui :where(.btn.primary) → color: #fff; use shared control primitive and shared tokens. - [packages/ui/src/components/Card.svelte:59] — .card → padding: 16px 18px; use Card and shared tokens. - [packages/ui/src/components/Card.svelte:65] — .card.column → gap: var(--card-gap, 4px); use Card and shared tokens. - [packages/ui/src/components/Checkbox.svelte:225] — .checkbox-glyph → width: 16px; height: 16px; use Checkbox and shared tokens. - [packages/ui/src/components/Checkbox.svelte:249] — .checkbox-indicator.file, .checkbox-indicator.tile → width: 22px; height: 22px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 35%, transparent); use Checkbox and shared tokens. - [packages/ui/src/components/Checkbox.svelte:281] — .checkbox-control.fc-check-control:active:not(:disabled) .checkbox-indicator:not(.checked):not(.mixed) → box-shadow: inset 0 0 0 1.5px var(--accent); use Checkbox and shared tokens. - [packages/ui/src/components/Checkbox.svelte:285] — .checkbox-indicator.form, .checkbox-indicator.editor → width: var(--checkbox-size, 13px); height: var(--checkbox-size, 13px); box-shadow: inset 0 0 0 1.5px var(--control-boundary); use Checkbox and shared tokens. - [packages/ui/src/components/Checkbox.svelte:295] — .checkbox-indicator.editor → width: 16px; height: 16px; use Checkbox and shared tokens. - [packages/ui/src/components/Checkbox.svelte:304] — .checkbox-control.editor:hover:not(:disabled) .checkbox-indicator:not(.checked):not(.mixed) → box-shadow: inset 0 0 0 1.5px var(--accent); use Checkbox and shared tokens. - [packages/ui/src/components/Checkbox.svelte:308] — .checkbox-indicator.photo → width: 20px; height: 20px; border: 1.5px solid color-mix(in srgb, var(--ink) 38%, transparent); use Checkbox and shared tokens. - [packages/ui/src/components/Checkbox.svelte:316] — .checkbox-indicator.photo .checkbox-glyph → width: 13px; height: 13px; use Checkbox and shared tokens. - [packages/ui/src/components/Checkbox.svelte:321] — .checkbox-indicator.menu → width: 16px; height: 16px; use Checkbox and shared tokens. - [packages/ui/src/components/Checkbox.svelte:330] — .checkbox-indicator.menu .checkbox-glyph → width: 16px; height: 16px; use Checkbox and shared tokens. - [packages/ui/src/components/OverlaySurface.svelte:1241] — .surface.pill.viewport-fit → max-height: calc(var(--vv-height, 100dvh) - 24px); use OverlaySurface and shared tokens. - [packages/ui/src/components/Pill.svelte:146] — .pill → border: 1px solid var(--pill-border, var(--glass-border)); use Pill and shared tokens. - [packages/ui/src/components/Pill.svelte:175] — .pill.label → padding: 0 calc(var(--control-h) / 2 - 2px); use Pill and shared tokens. - [packages/ui/src/components/Pill.svelte:199] — .pill.icon.btn::before → width: calc(100% + 2px + var(--pill-hit-outset) + var(--pill-hit-outset)); height: calc(100% + 2px + var(--pill-hit-outset) + var(--pill-hit-outset)); use Pill and shared tokens. - [packages/ui/src/components/Pill.svelte:281] — .pill.nav → gap: var(--pill-nav-gap, 6px); padding: var(--pill-nav-padding, 0 14px 0 10px); use Pill and shared tokens. - [packages/ui/src/components/Pill.svelte:299] — .pill.count → padding: 0 6px; use Pill and shared tokens. - [packages/ui/src/components/Pill.svelte:324] — .pill.count.hours, .pill.count:has(:global([torph-exiting])) → width: var(--hours-width, calc((var(--hours-chars) + 1) * 1ch + 12px)); use Pill and shared tokens. - [packages/ui/src/components/Pill.svelte:329] — .pill.chip → height: 24px; min-height: 24px; gap: 3px; padding: 0 var(--pill-chip-padding, 7px); use Pill and shared tokens. - [packages/ui/src/components/Pill.svelte:364] — .pill.select → min-width: 112px; use Pill and shared tokens. - [packages/ui/src/components/Pill.svelte:385] — .pill-select-native → padding: 0 30px 0 14px; use Pill and shared tokens. - [packages/ui/src/components/Pill.svelte:406] — .pill-select-chevron → width: 16px; height: 16px; use Pill and shared tokens. - [packages/ui/src/components/Pill.svelte:460] — .pill :global(svg:not(.pill-select-chevron)) → width: var(--pill-glyph-size, 24px); height: var(--pill-glyph-size, 24px); use Pill and shared tokens. - [packages/ui/src/components/PillGroup.svelte:336] — .pill-group--reveal :global([data-pill-reveal]:focus-visible) → gap: 6px; padding-inline: 12px; use Pill and shared tokens. - [packages/ui/src/components/PillGroup.svelte:352] — .pill-group--reveal :global([data-pill-reveal]:hover) → gap: 6px; padding-inline: 12px; use Pill and shared tokens. - [packages/ui/src/components/PillGroup.svelte:457] — .pill-group--single :global(.pg-btn) → height: var(--island-hit, 38px); width: var(--island-hit, 38px); min-width: var(--island-hit, 38px); use Pill and shared tokens. - [packages/ui/src/components/PillGroup.svelte:469] — .pill-group :global(.pg-btn svg) → width: var(--pill-group-glyph-size, var(--pill-glyph-size, 24px)); height: var(--pill-group-glyph-size, var(--pill-glyph-size, 24px)); use Pill and shared tokens. - [packages/ui/src/components/TodayButton.svelte:46] — .today-button.today-button → min-width: 78px; padding-inline: 14px; use Pill and shared tokens. - [packages/ui/src/components/Toggle.svelte:76] — .toggle → border: 1.5px solid var(--control-boundary); use Toggle and shared tokens. - [packages/ui/src/components/Toggle.svelte:94] — .toggle::after → width: calc(var(--switch-h) - 7px); height: calc(var(--switch-h) - 7px); use Toggle and shared tokens. - [packages/ui/src/components/composer/FieldPopover.svelte:110] — .toggle → gap: 8px; use Toggle and shared tokens. - [packages/ui/src/components/composer/FieldPopover.svelte:136] — .btn → padding: 0 14px; use shared control primitive and shared tokens. - [packages/ui/src/components/composer/VoiceRecordingPill.svelte:226] — :global(.pill-group .voice-recording-pill.expanded) → width: var(--voice-pill-open-size, 12.75rem); use Pill and shared tokens. - [packages/ui/src/components/composer/VoiceRecordingPill.svelte:335] — .action-icon → width: 16px; height: 16px; use Pill and shared tokens. - [packages/ui/src/components/menu/Menu.svelte:518] — .menu-list → gap: 1px; --menu-icon-gap: 9px; use Menu / MenuItem and shared tokens. - [packages/ui/src/components/menu/Menu.svelte:546] — :global([data-density='touch']) .menu-list → --menu-icon-gap: 12px; use Menu / MenuItem and shared tokens. - [packages/ui/src/components/menu/Menu.svelte:556] — .menu-header → padding: 6px var(--menu-pad-x) 4px var(--menu-label-x); use Menu / MenuItem and shared tokens. - [packages/ui/src/components/menu/MenuItem.svelte:157] — .menu-item → gap: var(--menu-icon-gap, 9px); height: var(--menu-row, 28px); padding: 0 var(--menu-pad-x, 10px); use Menu / MenuItem and shared tokens. - [packages/ui/src/components/menu/MenuItem.svelte:180] — .menu-item.drop-target → box-shadow: inset 0 0 0 2px var(--accent); use Menu / MenuItem and shared tokens. - [packages/ui/src/components/menu/MenuItem.svelte:232] — .menu-swatch → width: 14px; height: 14px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); use Menu / MenuItem and shared tokens. - [packages/ui/src/components/menu/MenuSeparator.svelte:11] — .menu-separator → height: var(--menu-sep-block, 10px); use Menu / MenuItem and shared tokens. - [packages/ui/src/components/menu/MenuSeparator.svelte:15] — .menu-separator::before → height: 1px; use Menu / MenuItem and shared tokens. - [packages/ui/src/components/modeIsland.css:86] — .island-segment, .pill-group .pg-btn → gap: 6px; use PillGroup and shared tokens. - [packages/ui/src/components/viewer/QuickLook.svelte:363] — :global(.pill.label.ql-title-pill) → max-width: min(38rem, calc(100% - 60px)); gap: 8px; padding: 6px calc(var(--control-h) / 2 - 2px); use Pill and shared tokens. - [packages/ui/src/components/viewer/QuickLook.svelte:508] — :global(.pill.label.ql-title-pill) → max-width: calc(100% - 46px); use Pill and shared tokens.
kayg commented 2026-10-06 10:28:07 +00:00
Author
Owner
Copy link

Tasks audit finding fixed at d15075e81: TaskCard and TaskList styled shared Card/StatusPill internals through :global selectors, and TaskColumn hand-drew Add task. Card now owns compact padding, clipping, and DnD outline; StatusPill owns compact sizing; Pill owns the muted Add task control. Focused primitive and Tasks component tests passed. Exact #1058 hashes were refreshed for changed Task list sites; the ratchet did not change.

Tasks audit finding fixed at d15075e81: TaskCard and TaskList styled shared Card/StatusPill internals through :global selectors, and TaskColumn hand-drew Add task. Card now owns compact padding, clipping, and DnD outline; StatusPill owns compact sizing; Pill owns the muted Add task control. Focused primitive and Tasks component tests passed. Exact #1058 hashes were refreshed for changed Task list sites; the ratchet did not change.
kayg commented 2026-10-06 10:31:09 +00:00
Author
Owner
Copy link

Tasks workspace finding fixed at cf1775319: List/Matrix Add task and the Task index Retry action used local button CSS. Both now use the shared muted Pill; the parent keeps only layout. TaskBoard/TaskList tests passed (7 tests), and the design-rule test passed against origin/dev.

Tasks workspace finding fixed at cf1775319: List/Matrix Add task and the Task index Retry action used local button CSS. Both now use the shared muted Pill; the parent keeps only layout. TaskBoard/TaskList tests passed (7 tests), and the design-rule test passed against origin/dev.
kayg commented 2026-10-06 10:47:26 +00:00
Author
Owner
Copy link

Finding: Task Inspector values and Task card overflow counts had local button/chip treatments instead of shared primitives. Replaced Inspector value buttons with Pill shape="text" and shared semantic tones, and replaced the +N count span with Pill shape="chip" tone="inset". Extended Pill with these shared variants, tests, and docs; local value paint and chip CSS are removed.

Evidence: bun run check passed (performance/token/type checks and Svelte check); focused Pill, Card, StatusPill, TaskBoard and TaskList tests passed: 5 files, 16 tests. node scripts/design-rules.test.mjs passed.

Commit: b95e6c04a6.

Finding: Task Inspector values and Task card overflow counts had local button/chip treatments instead of shared primitives. Replaced Inspector value buttons with `Pill shape="text"` and shared semantic tones, and replaced the `+N` count span with `Pill shape="chip" tone="inset"`. Extended Pill with these shared variants, tests, and docs; local value paint and chip CSS are removed. Evidence: `bun run check` passed (performance/token/type checks and Svelte check); focused Pill, Card, StatusPill, TaskBoard and TaskList tests passed: 5 files, 16 tests. `node scripts/design-rules.test.mjs` passed. Commit: b95e6c04a67a6c75b88b46b63006b57a3c605fb1.
kayg commented 2026-10-06 10:52:41 +00:00
Author
Owner
Copy link

Finding: Task List repeated the same local status sizing already represented by StatusPill size="compact" and drew the hidden-tag count as a custom span. Removed the override and now render the count with the shared inset Pill used by Task cards.

Evidence: TaskList.svelte.test.ts: 1 file, 4 tests passed; node scripts/design-rules.test.mjs passed; exact performance contract pins refreshed, without raising the ratchet. Commit: c74086679b.

Finding: Task List repeated the same local status sizing already represented by `StatusPill size="compact"` and drew the hidden-tag count as a custom span. Removed the override and now render the count with the shared inset `Pill` used by Task cards. Evidence: `TaskList.svelte.test.ts`: 1 file, 4 tests passed; `node scripts/design-rules.test.mjs` passed; exact performance contract pins refreshed, without raising the ratchet. Commit: c74086679b4d294e21889ea180b0a0e5ec656859.
kayg commented 2026-10-06 10:54:09 +00:00
Author
Owner
Copy link

The design-rule regression test now scans changed Svelte/CSS in apps/web/src/lib, apps/web/src/routes, packages/editor/src, and packages/ui/src. It rejects new local primitive overrides in feature consumers and new hand-rolled classed buttons across those roots. packages/ui is excluded from the override check because a shared primitive must style its own composed internals; its native control markup remains guarded. node scripts/design-rules.test.mjs passes.

Commit: 2b27975324.

The design-rule regression test now scans changed Svelte/CSS in `apps/web/src/lib`, `apps/web/src/routes`, `packages/editor/src`, and `packages/ui/src`. It rejects new local primitive overrides in feature consumers and new hand-rolled classed buttons across those roots. `packages/ui` is excluded from the override check because a shared primitive must style its own composed internals; its native control markup remains guarded. `node scripts/design-rules.test.mjs` passes. Commit: 2b27975324bb1df94103b37cf8f90562390483e2.
kayg commented 2026-10-06 11:14:21 +00:00
Author
Owner
Copy link

Coordination: #1200 owns SegmentedControl and all single-choice selector call sites; this audit leaves them alone and lists findings for them.

Coordination: #1200 owns SegmentedControl and all single-choice selector call sites; this audit leaves them alone and lists findings for them.
kayg commented 2026-10-06 12:07:54 +00:00
Author
Owner
Copy link

Final report — Forgejo #1190

Head SHA: 2b27975324bb1df94103b37cf8f90562390483e2
Branch: job/restyle-1190
Status: The Tasks area and regression guard are implemented. The wider repo audit is not complete, so this branch is not ready to merge.

What changed

  • Added the 512-line, tab-grouped inventory to artifacts/restyle-audit.md and posted the full inventory in the earlier issue comment.
  • Replaced the audited Task Board, Task List and Task Inspector controls with shared Card, Checkbox, Pill, StatusPill and TagPill controls. TasksWorkspace also uses Pill for its Add and Retry actions. Existing action callbacks, task writes, tag filters and drag/drop behavior stay in place.
  • Extended Card with overflow and dropPreview; Pill with the Inspector text shape, shared hit floor and muted, danger and inset tones; and StatusPill with a compact size. Added component tests and package documentation.
  • Added apps/web/scripts/design-rules.test.mjs to reject new shared-primitive :global overrides in web and Editor feature code, and new classed native buttons across web, Editor and shared UI source. A local exception needs an adjacent comment with an issue number and reason. The rule compares changes with origin/dev so the existing inventory does not fail the gate.
  • Refreshed exact live performance pins for the changed source; no ratchet was raised.

Files

  • apps/web/scripts/design-rules.test.mjs, apps/web/package.json
  • apps/web/src/lib/tasks/TaskCard.svelte, TaskColumn.svelte, TaskList.svelte, TaskList.svelte.test.ts, TaskSection.svelte, TasksWorkspace.svelte
  • apps/web/src/lib/components/Card.svelte.test.ts, Pill.svelte.test.ts, StatusPill.svelte.test.ts
  • packages/ui/src/components/Card.svelte, Pill.svelte, StatusPill.svelte, packages/ui/src/tokens.css, packages/ui/README.md
  • contracts/perf/adoption-1058.json, contracts/perf/exceptions.json

The six commits are aef181c, d15075e, cf17753, b95e6c0, c740866 and 2b27975. The worktree is clean. No Rust source changed. cargo clean completed at the end and the web build output was removed.

UX gaps closed

  • Task controls use shared focus, hover, pressed and hit-area behavior. The Inspector's text actions use the shared 44 px hit floor.
  • Task status, tag count, card clipping and drag-preview paint now come from shared primitives instead of feature-local styles.
  • The Task actions continue to update the same server-backed records; this change adds no API requests or per-item data work. Render cost remains proportional to the visible Task rows and their controls.

UX gaps left

  • This job only remediated the Tasks findings. The Calendar, Notes, Files, Photos, Mail, Money, Search, Settings, Analytics, Notifications and Shared UI findings in the posted inventory still need triage and fixes. The #1189 BlockHoverActions.svelte item remains with #1189.
  • Codex attached evidence and did not judge its visual quality. The reviewer should inspect the screenshots below.

Decisions not stated in DESIGN.md

  • Shared primitive extensions own the missing Task treatments: Card owns clipping and drag preview; Pill owns compact Inspector text actions and semantic tones; StatusPill owns compact status sizing.
  • The regression test uses the fetched origin/dev tree as its baseline and only rejects new signatures. Existing inventory entries remain visible for follow-up instead of being silently grandfathered as individual exceptions.
  • This visual refactor adds no new user operation, route or IO path; no feature benchmark was added.

Web gate output

bun run check:

perf-lint: PASS; 0 violations; 22359 scoped exceptions
svelte-check found 0 errors and 2 warnings in 2 files

The two warnings are existing empty CSS rulesets in packages/ui/src/components/calendar/AttachmentDeck.svelte and AgendaList.svelte.

bun run test:

8 pass
0 fail
16 expect() calls
Ran 8 tests across 1 file. [1.62s]
design rules: no new shared primitive overrides or hand-rolled buttons (origin/dev baseline)

 Test Files  276 passed (276)
      Tests  1914 passed (1914)
   Duration  651.27s (transform 28%, environment 27%, import 21%, tests 18%, setup 6%)

Production screenshots

72 PNGs are attached to this issue: before and after for Tasks Board, Tasks List and Calendar Task Inspector at 390, 820 and 1440 px, in Paper light and Tokyo Night dark, at 1× and 2×. The production app used real server data and macOS platform emulation.

Open the 72-image screenshot index

Before

Tasks Board

Tasks List

Calendar Task Inspector

After

Tasks Board

Tasks List

Calendar Task Inspector

## Final report — Forgejo #1190 **Head SHA:** `2b27975324bb1df94103b37cf8f90562390483e2` **Branch:** `job/restyle-1190` **Status:** The Tasks area and regression guard are implemented. The wider repo audit is not complete, so this branch is not ready to merge. ### What changed - Added the 512-line, tab-grouped inventory to `artifacts/restyle-audit.md` and posted the full inventory in the earlier issue comment. - Replaced the audited Task Board, Task List and Task Inspector controls with shared `Card`, `Checkbox`, `Pill`, `StatusPill` and `TagPill` controls. `TasksWorkspace` also uses `Pill` for its Add and Retry actions. Existing action callbacks, task writes, tag filters and drag/drop behavior stay in place. - Extended `Card` with `overflow` and `dropPreview`; `Pill` with the Inspector `text` shape, shared hit floor and `muted`, `danger` and `inset` tones; and `StatusPill` with a `compact` size. Added component tests and package documentation. - Added `apps/web/scripts/design-rules.test.mjs` to reject new shared-primitive `:global` overrides in web and Editor feature code, and new classed native buttons across web, Editor and shared UI source. A local exception needs an adjacent comment with an issue number and reason. The rule compares changes with `origin/dev` so the existing inventory does not fail the gate. - Refreshed exact live performance pins for the changed source; no ratchet was raised. ### Files - `apps/web/scripts/design-rules.test.mjs`, `apps/web/package.json` - `apps/web/src/lib/tasks/TaskCard.svelte`, `TaskColumn.svelte`, `TaskList.svelte`, `TaskList.svelte.test.ts`, `TaskSection.svelte`, `TasksWorkspace.svelte` - `apps/web/src/lib/components/Card.svelte.test.ts`, `Pill.svelte.test.ts`, `StatusPill.svelte.test.ts` - `packages/ui/src/components/Card.svelte`, `Pill.svelte`, `StatusPill.svelte`, `packages/ui/src/tokens.css`, `packages/ui/README.md` - `contracts/perf/adoption-1058.json`, `contracts/perf/exceptions.json` The six commits are `aef181c`, `d15075e`, `cf17753`, `b95e6c0`, `c740866` and `2b27975`. The worktree is clean. No Rust source changed. `cargo clean` completed at the end and the web build output was removed. ### UX gaps closed - Task controls use shared focus, hover, pressed and hit-area behavior. The Inspector's text actions use the shared 44 px hit floor. - Task status, tag count, card clipping and drag-preview paint now come from shared primitives instead of feature-local styles. - The Task actions continue to update the same server-backed records; this change adds no API requests or per-item data work. Render cost remains proportional to the visible Task rows and their controls. ### UX gaps left - This job only remediated the Tasks findings. The Calendar, Notes, Files, Photos, Mail, Money, Search, Settings, Analytics, Notifications and Shared UI findings in the posted inventory still need triage and fixes. The #1189 `BlockHoverActions.svelte` item remains with #1189. - Codex attached evidence and did not judge its visual quality. The reviewer should inspect the screenshots below. ### Decisions not stated in DESIGN.md - Shared primitive extensions own the missing Task treatments: `Card` owns clipping and drag preview; `Pill` owns compact Inspector text actions and semantic tones; `StatusPill` owns compact status sizing. - The regression test uses the fetched `origin/dev` tree as its baseline and only rejects new signatures. Existing inventory entries remain visible for follow-up instead of being silently grandfathered as individual exceptions. - This visual refactor adds no new user operation, route or IO path; no feature benchmark was added. ### Web gate output `bun run check`: ```text perf-lint: PASS; 0 violations; 22359 scoped exceptions svelte-check found 0 errors and 2 warnings in 2 files ``` The two warnings are existing empty CSS rulesets in `packages/ui/src/components/calendar/AttachmentDeck.svelte` and `AgendaList.svelte`. `bun run test`: ```text 8 pass 0 fail 16 expect() calls Ran 8 tests across 1 file. [1.62s] design rules: no new shared primitive overrides or hand-rolled buttons (origin/dev baseline) Test Files 276 passed (276) Tests 1914 passed (1914) Duration 651.27s (transform 28%, environment 27%, import 21%, tests 18%, setup 6%) ``` ### Production screenshots 72 PNGs are attached to this issue: before and after for Tasks Board, Tasks List and Calendar Task Inspector at 390, 820 and 1440 px, in Paper light and Tokyo Night dark, at 1× and 2×. The production app used real server data and macOS platform emulation. <details> <summary>Open the 72-image screenshot index</summary> #### Before **Tasks Board** - [1x · 390 px · Paper light](https://git.kayg.org/attachments/07b11341-5a44-423a-ae83-806fe5eb3e82) - [1x · 390 px · Tokyo Night dark](https://git.kayg.org/attachments/3cd4122a-acde-483c-b009-659abed0d480) - [1x · 820 px · Paper light](https://git.kayg.org/attachments/ed64698b-04bf-47b3-aba2-6cac56a0e715) - [1x · 820 px · Tokyo Night dark](https://git.kayg.org/attachments/fbe3d98e-ad06-42ed-91dc-200e9ad0276b) - [1x · 1440 px · Paper light](https://git.kayg.org/attachments/4ec5ada6-3be5-4394-91fa-a4a7ff66e129) - [1x · 1440 px · Tokyo Night dark](https://git.kayg.org/attachments/ba2ea082-1816-42a2-b35e-3c9dfd560486) - [2x · 390 px · Paper light](https://git.kayg.org/attachments/6d7bbbde-5a54-45d2-94f2-9ba6de6c65f2) - [2x · 390 px · Tokyo Night dark](https://git.kayg.org/attachments/1ced2a42-e580-4494-a6ec-52dae64fb385) - [2x · 820 px · Paper light](https://git.kayg.org/attachments/763873aa-6c0e-4ce9-a259-455b53041ef5) - [2x · 820 px · Tokyo Night dark](https://git.kayg.org/attachments/6287d09a-eaa1-42c6-825f-f0676b74b0a4) - [2x · 1440 px · Paper light](https://git.kayg.org/attachments/22cfd9c6-f742-4fc2-a736-372143be990d) - [2x · 1440 px · Tokyo Night dark](https://git.kayg.org/attachments/56f113ce-9149-4c4d-b8d2-12c7da0f7322) **Tasks List** - [1x · 390 px · Paper light](https://git.kayg.org/attachments/b40c55b6-2118-41a6-8d54-0358026e5657) - [1x · 390 px · Tokyo Night dark](https://git.kayg.org/attachments/58456a50-b39c-46d6-b9b4-6a86d6a63915) - [1x · 820 px · Paper light](https://git.kayg.org/attachments/33a4004e-7163-402d-b4cd-db3dfd51a30f) - [1x · 820 px · Tokyo Night dark](https://git.kayg.org/attachments/0d7e697b-9d55-4b63-81ec-a343dc20ac26) - [1x · 1440 px · Paper light](https://git.kayg.org/attachments/0709106f-4090-43b1-9af1-727c572d590e) - [1x · 1440 px · Tokyo Night dark](https://git.kayg.org/attachments/94b2f397-ca3a-4e4c-a853-4241b44d8d87) - [2x · 390 px · Paper light](https://git.kayg.org/attachments/51b063b1-1d53-46db-8c22-ffc74691b70f) - [2x · 390 px · Tokyo Night dark](https://git.kayg.org/attachments/6b7e3d0a-70dc-4999-800a-2bedf72ef4a9) - [2x · 820 px · Paper light](https://git.kayg.org/attachments/f029e4a3-bf28-4e1e-b863-7e9659d9bbc1) - [2x · 820 px · Tokyo Night dark](https://git.kayg.org/attachments/81d62dcd-d436-4b55-89cb-c43d3993e03d) - [2x · 1440 px · Paper light](https://git.kayg.org/attachments/94e7bc12-2a47-48fc-8fff-1e137d23777c) - [2x · 1440 px · Tokyo Night dark](https://git.kayg.org/attachments/d177b9fa-4c0f-4961-bf7e-02847c459ba1) **Calendar Task Inspector** - [1x · 390 px · Paper light](https://git.kayg.org/attachments/9d686dc6-e58e-4245-9c73-84291dc57f9d) - [1x · 390 px · Tokyo Night dark](https://git.kayg.org/attachments/4a1ad8ca-3284-4388-8327-6b0f173885e9) - [1x · 820 px · Paper light](https://git.kayg.org/attachments/48695018-5175-47b9-8a62-4c804056badb) - [1x · 820 px · Tokyo Night dark](https://git.kayg.org/attachments/ae05ba2f-ebc9-4476-aae0-e8662a1c7417) - [1x · 1440 px · Paper light](https://git.kayg.org/attachments/9c45ce93-a066-450d-9ce9-dd3179eef92b) - [1x · 1440 px · Tokyo Night dark](https://git.kayg.org/attachments/17ba309e-35e1-41b5-b5bd-28f6c983618a) - [2x · 390 px · Paper light](https://git.kayg.org/attachments/57b0f8f4-b086-4ae7-b323-86bc56cf0bfc) - [2x · 390 px · Tokyo Night dark](https://git.kayg.org/attachments/72477a3b-a2d7-4db9-8019-25b03d20f789) - [2x · 820 px · Paper light](https://git.kayg.org/attachments/77c5cca7-c9b7-42b3-a242-63f71dd6246e) - [2x · 820 px · Tokyo Night dark](https://git.kayg.org/attachments/10b24ef8-25aa-4a56-8552-d03b74921c32) - [2x · 1440 px · Paper light](https://git.kayg.org/attachments/e55180cf-da8e-4aa1-b59a-ce127c5f4cb6) - [2x · 1440 px · Tokyo Night dark](https://git.kayg.org/attachments/53c8967c-0ead-4a08-8bde-60cfb5c5f37a) #### After **Tasks Board** - [1x · 390 px · Paper light](https://git.kayg.org/attachments/4e598d99-1a04-48b3-9b71-1b5b5327adfb) - [1x · 390 px · Tokyo Night dark](https://git.kayg.org/attachments/a3574c20-aff4-410d-82a9-cfd7b2986aee) - [1x · 820 px · Paper light](https://git.kayg.org/attachments/c1513690-06a1-4af4-a073-b94ddae30c6a) - [1x · 820 px · Tokyo Night dark](https://git.kayg.org/attachments/6d15d169-5f14-401a-b9e6-733c9740f209) - [1x · 1440 px · Paper light](https://git.kayg.org/attachments/3678cdd5-6a54-4778-92b4-c39b1d1bd393) - [1x · 1440 px · Tokyo Night dark](https://git.kayg.org/attachments/3298b836-70ec-485a-98bb-86d014a80500) - [2x · 390 px · Paper light](https://git.kayg.org/attachments/917f80b8-71ed-423d-9f55-450f73ab5dbc) - [2x · 390 px · Tokyo Night dark](https://git.kayg.org/attachments/e543c585-1604-4162-a4e6-dd4062f5cd57) - [2x · 820 px · Paper light](https://git.kayg.org/attachments/a57ac85e-0053-419e-a6fe-c39253f21e32) - [2x · 820 px · Tokyo Night dark](https://git.kayg.org/attachments/7dbcc0bf-18b2-4c57-965b-64bac9291d9a) - [2x · 1440 px · Paper light](https://git.kayg.org/attachments/4ba1218b-ce94-40b2-af55-05e15d3f64d9) - [2x · 1440 px · Tokyo Night dark](https://git.kayg.org/attachments/484aa365-39a5-45f3-8194-87fc4c9be002) **Tasks List** - [1x · 390 px · Paper light](https://git.kayg.org/attachments/c6d61fc3-4f44-4f12-bbdd-4104104a198e) - [1x · 390 px · Tokyo Night dark](https://git.kayg.org/attachments/5cd5e2d5-38f9-4fc0-b3be-092bc6ce5d0d) - [1x · 820 px · Paper light](https://git.kayg.org/attachments/502c2e6b-6559-499d-9de1-758620827484) - [1x · 820 px · Tokyo Night dark](https://git.kayg.org/attachments/dba74b46-c475-4ab9-9367-cb28739f6059) - [1x · 1440 px · Paper light](https://git.kayg.org/attachments/cec0077b-afc2-418f-9138-5fa7219dfe12) - [1x · 1440 px · Tokyo Night dark](https://git.kayg.org/attachments/35eb8e45-6a64-4728-b5b9-d3830fb5d4fd) - [2x · 390 px · Paper light](https://git.kayg.org/attachments/f265f709-f0ce-409d-992a-ebcd44bd1c40) - [2x · 390 px · Tokyo Night dark](https://git.kayg.org/attachments/adb53670-21fc-4508-9a45-a20806c6fdfb) - [2x · 820 px · Paper light](https://git.kayg.org/attachments/80c0fd67-2229-4fea-9524-a8c5dd226e32) - [2x · 820 px · Tokyo Night dark](https://git.kayg.org/attachments/c444f93a-4074-481c-8852-ae935c6ee185) - [2x · 1440 px · Paper light](https://git.kayg.org/attachments/c27b47b8-fe04-4fd8-8fda-2cecc81a99e4) - [2x · 1440 px · Tokyo Night dark](https://git.kayg.org/attachments/9a482ba7-c38a-41bf-941f-19ebe471ebb2) **Calendar Task Inspector** - [1x · 390 px · Paper light](https://git.kayg.org/attachments/e51c11ed-ae52-461f-a9d2-580913147d03) - [1x · 390 px · Tokyo Night dark](https://git.kayg.org/attachments/69abdf9b-b1e4-4722-82bc-755611bb2076) - [1x · 820 px · Paper light](https://git.kayg.org/attachments/9e017dbc-ff61-4c04-a91d-fa10f56d5b86) - [1x · 820 px · Tokyo Night dark](https://git.kayg.org/attachments/f13d9a74-648a-4422-9ce4-7ce44289f067) - [1x · 1440 px · Paper light](https://git.kayg.org/attachments/c6e745ad-4c49-4665-bfe0-882e9795a217) - [1x · 1440 px · Tokyo Night dark](https://git.kayg.org/attachments/5b98eb86-6a87-46ff-8ea9-3ba4fcba7eca) - [2x · 390 px · Paper light](https://git.kayg.org/attachments/c25a99e4-e125-4510-8bd2-a6cdb4ba440f) - [2x · 390 px · Tokyo Night dark](https://git.kayg.org/attachments/b913cfb3-b236-44fe-9614-2ab82b98c45f) - [2x · 820 px · Paper light](https://git.kayg.org/attachments/b69bdb5f-cf53-49d4-8eb3-c8abb0b728aa) - [2x · 820 px · Tokyo Night dark](https://git.kayg.org/attachments/71827295-1111-49eb-876c-07f34b0ff7de) - [2x · 1440 px · Paper light](https://git.kayg.org/attachments/e2743085-bd07-46a3-bc23-4a356b72d0ec) - [2x · 1440 px · Tokyo Night dark](https://git.kayg.org/attachments/5d22ad20-267e-4109-a8c6-a26f7553ebc0) </details>
kayg commented 2026-10-06 12:10:29 +00:00
Author
Owner
Copy link

Starting Notes restyle audit on branch job/restyle-notes, base 2b27975324. I’m locating the Notes inventory and surfaces now.

Starting Notes restyle audit on branch job/restyle-notes, base 2b27975324bb1df94103b37cf8f90562390483e2. I’m locating the Notes inventory and surfaces now.
kayg commented 2026-10-06 12:11:12 +00:00
Author
Owner
Copy link

Starting Files+Photos pass on job/restyle-files, based on 2b27975324. I am locating the audit inventory and mapping its findings to the shared UI primitives before editing.

Starting Files+Photos pass on job/restyle-files, based on 2b27975324bb1df94103b37cf8f90562390483e2. I am locating the audit inventory and mapping its findings to the shared UI primitives before editing.
kayg commented 2026-10-06 12:13:12 +00:00
Author
Owner
Copy link

Starting Calendar + Mail + Money findings for #1190.
Branch: job/restyle-mailmoney
Base SHA: 2b27975324
I have read CLAUDE.md, CONTEXT.md, and the relevant Calendar, Mail, Money, Chrome, and Connected Account decisions in docs/DESIGN.md.

Starting Calendar + Mail + Money findings for #1190. Branch: job/restyle-mailmoney Base SHA: 2b27975324bb1df94103b37cf8f90562390483e2 I have read CLAUDE.md, CONTEXT.md, and the relevant Calendar, Mail, Money, Chrome, and Connected Account decisions in docs/DESIGN.md.
kayg commented 2026-10-06 12:13:20 +00:00
Author
Owner
Copy link

Starting Search-area restyle in job/restyle-search, based at 2b27975324.

Starting Search-area restyle in job/restyle-search, based at 2b27975324bb1df94103b37cf8f90562390483e2.
kayg commented 2026-10-06 12:13:28 +00:00
Author
Owner
Copy link

Starting #1190 Settings area in job/restyle-settings, based at 2b27975324bb1df94103b37cf8f90562390483e2.

The prompt references artifacts/restyle-audit.md, but that file is not present in the worktree or HEAD. I am checking the issue's recorded inventory and the Settings-specific design guard to recover the exact findings before editing.

Starting #1190 Settings area in `job/restyle-settings`, based at `2b27975324bb1df94103b37cf8f90562390483e2`. The prompt references `artifacts/restyle-audit.md`, but that file is not present in the worktree or HEAD. I am checking the issue's recorded inventory and the Settings-specific design guard to recover the exact findings before editing.
kayg commented 2026-10-06 12:14:54 +00:00
Author
Owner
Copy link

Evidence: test -f artifacts/restyle-audit.md returns false, and git ls-tree -r HEAD -- artifacts/restyle-audit.md returns no path. The initial inventory is present in the #1190 issue comments, so I am using it as the checklist for this pass.

Evidence: test -f artifacts/restyle-audit.md returns false, and git ls-tree -r HEAD -- artifacts/restyle-audit.md returns no path. The initial inventory is present in the #1190 issue comments, so I am using it as the checklist for this pass.
kayg commented 2026-10-06 12:15:42 +00:00
Author
Owner
Copy link

Finding: artifacts/restyle-audit.md and the claimed top-level copy are absent from this worktree (git ls-tree and rg --files show no match). The issue's inventory comment contains the full Notes section, so I’m using that as the source list.

Finding: artifacts/restyle-audit.md and the claimed top-level copy are absent from this worktree (git ls-tree and rg --files show no match). The issue's inventory comment contains the full Notes section, so I’m using that as the source list.
kayg commented 2026-10-06 12:26:40 +00:00
Author
Owner
Copy link

The first web check surfaced one stale exact performance pin: coverage.surfaces for apps/web/src/lib/canvas/CanvasView.svelte#each:3a4cbef6167607e4:1 reports “unused or changed exception.” This surface's action controls changed from native buttons to shared Pills and the local 44 px sizing rule was removed. I will refresh only the live syntax hash for the changed scope, keeping its owner, reason, replacement test, expiry, and limit unchanged, then rerun the guard.

The first web check surfaced one stale exact performance pin: `coverage.surfaces` for `apps/web/src/lib/canvas/CanvasView.svelte#each:3a4cbef6167607e4:1` reports “unused or changed exception.” This surface's action controls changed from native buttons to shared Pills and the local 44 px sizing rule was removed. I will refresh only the live syntax hash for the changed scope, keeping its owner, reason, replacement test, expiry, and limit unchanged, then rerun the guard.
kayg commented 2026-10-06 12:33:21 +00:00
Author
Owner
Copy link

Inventory finding for Settings: artifacts/restyle-audit.md is absent from HEAD and the file history, but the #1190 audit comment records 18 shared-style overrides, 34 hand-rolled controls/cards, and 10 literal sizing/layout findings under Settings. I will use that posted inventory as the source.

Scope boundary: the listed BackgroundGroup swatches and Unsplash photo choices are single-choice selectors. I will leave those controls to #1200 as requested, while fixing the ordinary action controls and shared surfaces in the same files.

Inventory finding for Settings: `artifacts/restyle-audit.md` is absent from HEAD and the file history, but the #1190 audit comment records 18 shared-style overrides, 34 hand-rolled controls/cards, and 10 literal sizing/layout findings under Settings. I will use that posted inventory as the source. Scope boundary: the listed BackgroundGroup swatches and Unsplash photo choices are single-choice selectors. I will leave those controls to #1200 as requested, while fixing the ordinary action controls and shared surfaces in the same files.
kayg commented 2026-10-06 12:39:23 +00:00
Author
Owner
Copy link

Notes implementation decisions where DESIGN was silent:

  • Card now has additive material="clear", edge="none", shadow="none", and radius="control" props. This lets the Note editor keep its existing host geometry and lets embedded Canvas cards use Card without consumer selectors on .card.
  • Pill adds shape="row" for full-width label/value actions and tone="accent-soft" for the parsed reminder status. Pressed and expanded action Pills use their real ARIA state for the shared selected tint.
  • OverlaySurface adds sheetHeaderLayout="centered-leading" so the phone Contents control stays centered while the changing sheet title remains in the accessibility tree.
  • The performance guard pins for the three existing CanvasView lists were refreshed only to their live syntax hashes; the owner, reason, replacement test, expiry and limit are unchanged.
  • The design-rule guard has no Notes allow-list entries; it compares the live design source against origin/dev.

The selector-owned surfaces stayed with their owners: Callout's kind selector and reminder audience selectors remain unchanged; PillGroup and BlockHoverActions remain untouched for #1189. No single-choice selector was changed.

Notes implementation decisions where DESIGN was silent: - Card now has additive `material="clear"`, `edge="none"`, `shadow="none"`, and `radius="control"` props. This lets the Note editor keep its existing host geometry and lets embedded Canvas cards use Card without consumer selectors on `.card`. - Pill adds `shape="row"` for full-width label/value actions and `tone="accent-soft"` for the parsed reminder status. Pressed and expanded action Pills use their real ARIA state for the shared selected tint. - OverlaySurface adds `sheetHeaderLayout="centered-leading"` so the phone Contents control stays centered while the changing sheet title remains in the accessibility tree. - The performance guard pins for the three existing CanvasView lists were refreshed only to their live syntax hashes; the owner, reason, replacement test, expiry and limit are unchanged. - The design-rule guard has no Notes allow-list entries; it compares the live design source against `origin/dev`. The selector-owned surfaces stayed with their owners: Callout's kind selector and reminder audience selectors remain unchanged; PillGroup and BlockHoverActions remain untouched for #1189. No single-choice selector was changed.
kayg commented 2026-10-06 12:41:24 +00:00
Author
Owner
Copy link

Source review findings from the posted Settings inventory:

  • The eight entries labeled Card resolve to .card-footer layout wrappers inside existing SettingsCard groups. They are not private card shells; wrapping each footer in another Card would add nested surfaces. App Passwords also already uses the shared Card for its instruction sub-cards.
  • The UnsplashSheet photo choice button and ConnectedAccountsSection provider choice buttons select a single option/provider. I will leave them to #1200, along with the BackgroundGroup swatches and SegmentedControl.
  • BackgroundGroup's centre handle and stop controls are drag/slider controls, not action buttons. I will preserve their specialized interaction and only migrate plain actions in that group.
Source review findings from the posted Settings inventory: - The eight entries labeled `Card` resolve to `.card-footer` layout wrappers inside existing `SettingsCard` groups. They are not private card shells; wrapping each footer in another Card would add nested surfaces. App Passwords also already uses the shared `Card` for its instruction sub-cards. - The `UnsplashSheet` photo choice button and `ConnectedAccountsSection` provider choice buttons select a single option/provider. I will leave them to #1200, along with the BackgroundGroup swatches and SegmentedControl. - BackgroundGroup's centre handle and stop controls are drag/slider controls, not action buttons. I will preserve their specialized interaction and only migrate plain actions in that group.
kayg commented 2026-10-06 12:54:00 +00:00
Author
Owner
Copy link

Finding during the Files restyle: bun run check reported an unused or changed exact render.bound pin for FilesBrowser.svelte#each:c469e9f9e005d61c:1. The Files menu row now uses the shared Pill, which changed the pinned loop syntax. I will refresh only this exact live pin and keep the existing performance rule and ratchet.

Finding during the Files restyle: `bun run check` reported an unused or changed exact `render.bound` pin for `FilesBrowser.svelte#each:c469e9f9e005d61c:1`. The Files menu row now uses the shared Pill, which changed the pinned loop syntax. I will refresh only this exact live pin and keep the existing performance rule and ratchet.
kayg commented 2026-10-06 12:56:08 +00:00
Author
Owner
Copy link

Correction: the menu loop hash is shared by 12 exact performance-contract entries, not one. The source parser reports the live syntax digest as 93ca91d2cd4239a4edfab625a6074dfa70cba3907da5a7be04a94a8b455e6aa6. I will update those 12 existing entries to that digest only; their rules, limits, owners, and ratchet counts stay unchanged.

Correction: the menu loop hash is shared by 12 exact performance-contract entries, not one. The source parser reports the live syntax digest as `93ca91d2cd4239a4edfab625a6074dfa70cba3907da5a7be04a94a8b455e6aa6`. I will update those 12 existing entries to that digest only; their rules, limits, owners, and ratchet counts stay unchanged.
kayg commented 2026-10-06 13:06:31 +00:00
Author
Owner
Copy link

The initial bun run check then reported two implicit-any event parameters in the shared Files pinned-row Pill, one in the shared Card form on PublicLinkPage, and an unused .drop-name rule after replacing that local control. I added DragEvent, KeyboardEvent, and SubmitEvent annotations and removed the dead selector. The full check will run again after the required origin/dev merge.

The initial `bun run check` then reported two implicit-`any` event parameters in the shared Files pinned-row Pill, one in the shared Card form on PublicLinkPage, and an unused `.drop-name` rule after replacing that local control. I added `DragEvent`, `KeyboardEvent`, and `SubmitEvent` annotations and removed the dead selector. The full check will run again after the required `origin/dev` merge.
kayg commented 2026-10-06 13:07:09 +00:00
Author
Owner
Copy link

Finding and fix: the focused Card/Pill tests first failed because the shared primitives did not expose the Settings variants. I added status tones, shared sizing flags, solid Card material, sheet flattening, and a semantic drop-target Card mode, with component tests and prop documentation. Focused result: Test Files 2 passed (2); Tests 10 passed (10). The initial test invocation also found missing worktree dependencies; bun install --frozen-lockfile restored them without a lockfile change. Commit: 3b412851c.

Finding and fix: the focused Card/Pill tests first failed because the shared primitives did not expose the Settings variants. I added status tones, shared sizing flags, solid Card material, sheet flattening, and a semantic drop-target Card mode, with component tests and prop documentation. Focused result: `Test Files 2 passed (2); Tests 10 passed (10)`. The initial test invocation also found missing worktree dependencies; `bun install --frozen-lockfile` restored them without a lockfile change. Commit: `3b412851c`.
kayg commented 2026-10-06 13:10:02 +00:00
Author
Owner
Copy link

Finding and fix: Settings StateChip and RowAction had feature-scoped global rules that painted generic Pill tones and disabled state. They now select shared Pill tones; Jobs detail actions use the shared flushStart prop. Focused result: Test Files 2 passed (2); Tests 9 passed (9). Commit: 7438aa832.

Finding and fix: Settings `StateChip` and `RowAction` had feature-scoped global rules that painted generic Pill tones and disabled state. They now select shared `Pill` tones; Jobs detail actions use the shared `flushStart` prop. Focused result: `Test Files 2 passed (2); Tests 9 passed (9)`. Commit: `7438aa832`.
kayg commented 2026-10-06 13:17:14 +00:00
Author
Owner
Copy link

Finding and fix: Recovery Key, Unsplash and Calendar Feeds had local solid overlay paint; Recovery Key, Unsplash and Connected Accounts also carried local dialog sizes, and provider setup repeated the Settings sheet inset. OverlaySurface now owns solid, compact/standard/wide dialog sizes and the Settings chrome option. Focused result: Test Files 1 passed (1); Tests 24 passed (24). Commit: f169d5716.

Finding and fix: Recovery Key, Unsplash and Calendar Feeds had local solid overlay paint; Recovery Key, Unsplash and Connected Accounts also carried local dialog sizes, and provider setup repeated the Settings sheet inset. OverlaySurface now owns `solid`, compact/standard/wide dialog sizes and the Settings chrome option. Focused result: `Test Files 1 passed (1); Tests 24 passed (24)`. Commit: `f169d5716`.
kayg commented 2026-10-06 13:22:46 +00:00
Author
Owner
Copy link

Finding: the App Password expiry trigger is a date-popover button with the same field material as a text input, but the shared Select owns a single-choice menu and is outside this issue's scope. I added the additive Pill field shape for anchored form triggers; it does not alter Select. The focused Card/Pill tests pass: Test Files 2 passed (2); Tests 11 passed (11). Commit: be81f469b.

Finding: the App Password expiry trigger is a date-popover button with the same field material as a text input, but the shared Select owns a single-choice menu and is outside this issue's scope. I added the additive `Pill` field shape for anchored form triggers; it does not alter Select. The focused Card/Pill tests pass: `Test Files 2 passed (2); Tests 11 passed (11)`. Commit: `be81f469b`.
kayg commented 2026-10-06 13:30:01 +00:00
Author
Owner
Copy link

Finding and fix: Plugins used a native button with a local 44px shell and local grab/touch styles. The handle now uses shared Pill icon geometry and shared drag affordance while retaining the existing feature-owned drag action on the primitive root. Focused result: Test Files 2 passed (2); Tests 12 passed (12). Commit: 4bd206287.

Finding and fix: Plugins used a native button with a local 44px shell and local grab/touch styles. The handle now uses shared `Pill` icon geometry and shared drag affordance while retaining the existing feature-owned drag action on the primitive root. Focused result: `Test Files 2 passed (2); Tests 12 passed (12)`. Commit: `4bd206287`.
kayg commented 2026-10-06 13:33:06 +00:00
Author
Owner
Copy link

Finding and fix: App Passwords had a sheet-only local Card override and a hand-built expiry button. SettingsCard now forwards flatOnSheet to shared Card, and the expiry date popover uses shared Pill field geometry. The new forwarding regression test passes: Test Files 1 passed (1); Tests 4 passed (4). Commit: 111b59bf6.

Finding and fix: App Passwords had a sheet-only local Card override and a hand-built expiry button. `SettingsCard` now forwards `flatOnSheet` to shared Card, and the expiry date popover uses shared Pill field geometry. The new forwarding regression test passes: `Test Files 1 passed (1); Tests 4 passed (4)`. Commit: `111b59bf6`.
kayg commented 2026-10-06 13:33:30 +00:00
Author
Owner
Copy link

Finding and fix: the shared AuthCard hand-built its shell, and auth flows styled native .btn controls around it. AuthCard now delegates surface, dimensions, padding and stack gap to shared Card; the flow actions use shared Pills and auth-ui.css excludes Pills from its native-button recipe. Commit: 9b7717808.

Finding and fix: the shared AuthCard hand-built its shell, and auth flows styled native `.btn` controls around it. AuthCard now delegates surface, dimensions, padding and stack gap to shared Card; the flow actions use shared Pills and auth-ui.css excludes Pills from its native-button recipe. Commit: `9b7717808`.
kayg commented 2026-10-06 13:34:45 +00:00
Author
Owner
Copy link

Finding and fix: Background picture upload used a feature-local dashed button, and its error retry used a hand-styled native button. The upload now uses shared Card dropTarget, and Retry uses the shared text Pill; file selection and drag-and-drop handlers are unchanged. Commit: 6df41be2a.

Finding and fix: Background picture upload used a feature-local dashed button, and its error retry used a hand-styled native button. The upload now uses shared Card `dropTarget`, and Retry uses the shared text Pill; file selection and drag-and-drop handlers are unchanged. Commit: `6df41be2a`.
kayg commented 2026-10-06 13:34:58 +00:00
Author
Owner
Copy link

Finding and fix: the Settings route's account, Admin-data, Plugin-catalog and Shortcuts retry actions used a locally styled native button. They now use the shared text Pill with its shared focus and touch behavior. Commit: a303750dd.

Finding and fix: the Settings route's account, Admin-data, Plugin-catalog and Shortcuts retry actions used a locally styled native button. They now use the shared text Pill with its shared focus and touch behavior. Commit: `a303750dd`.
kayg commented 2026-10-06 13:42:21 +00:00
Author
Owner
Copy link

Settings follow-up findings: Admin Sign-in and Calendar Feeds had local toggle row spacing; they now use the shared Settings gap and hit-area tokens. Notifications and Voice wrapped shared Toggles in extra 34 px wrappers; those wrappers are removed because Toggle owns the target. Settings form footers now use the shared toolbar gap while Money retains its own existing footer gap.

Commits: 57776d5e9, 1849d5c68, f1b077cfa, a84fbaf3d. git diff --check passed. The final web gates and production screenshots are still in progress.

Settings follow-up findings: Admin Sign-in and Calendar Feeds had local toggle row spacing; they now use the shared Settings gap and hit-area tokens. Notifications and Voice wrapped shared Toggles in extra 34 px wrappers; those wrappers are removed because Toggle owns the target. Settings form footers now use the shared toolbar gap while Money retains its own existing footer gap. Commits: `57776d5e9`, `1849d5c68`, `f1b077cfa`, `a84fbaf3d`. `git diff --check` passed. The final web gates and production screenshots are still in progress.
kayg commented 2026-10-06 14:05:41 +00:00
Author
Owner
Copy link

Build finding: the local calternal-server target embeds apps/web/build, which was absent from this worktree. The server compile stopped at that embed step after dependency compilation. I am building this branch’s production web assets and will rerun cargo build -p calternal-server; no Rust source change is needed.

Build finding: the local calternal-server target embeds apps/web/build, which was absent from this worktree. The server compile stopped at that embed step after dependency compilation. I am building this branch’s production web assets and will rerun cargo build -p calternal-server; no Rust source change is needed.
kayg commented 2026-10-06 14:10:49 +00:00
Author
Owner
Copy link

Evidence finding: the first baseline screenshot runner exited before browser launch because Bun sharp could not resolve libstdc++.so.6. The Nix runtime library at /nix/store/z0n70pxyzi87why1bcq81zgd7b924nfj-gcc-15.2.0-lib/lib resolves it, and a sharp import check passes with that LD_LIBRARY_PATH. I am retrying the captures with this runtime path.

Evidence finding: the first baseline screenshot runner exited before browser launch because Bun sharp could not resolve libstdc++.so.6. The Nix runtime library at /nix/store/z0n70pxyzi87why1bcq81zgd7b924nfj-gcc-15.2.0-lib/lib resolves it, and a sharp import check passes with that LD_LIBRARY_PATH. I am retrying the captures with this runtime path.
kayg commented 2026-10-06 14:11:21 +00:00
Author
Owner
Copy link

Evidence finding: the existing Contents rail runner reached the baseline production page but failed its unchanged geometry assertion at 1440 px light: the hover title pill intersects Note body text (pill x=292.80–526.39 px). I am preserving the test expectation and checking the after build for this overlap; I will capture the full viewport/theme matrix with a capture-only fallback if the assertion aborts early.

Evidence finding: the existing Contents rail runner reached the baseline production page but failed its unchanged geometry assertion at 1440 px light: the hover title pill intersects Note body text (pill x=292.80–526.39 px). I am preserving the test expectation and checking the after build for this overlap; I will capture the full viewport/theme matrix with a capture-only fallback if the assertion aborts early.
kayg commented 2026-10-06 14:17:26 +00:00
Author
Owner
Copy link

After-build finding: the Contents tick's offset parent is a zero-sized .pill-content; the shared magnetic action creates that positioning context, so the tick starts 15 px from the rail origin and the 1440 px hover pill begins 3 px before the tick ends. The preview container was also 233.6 px wide while Note text starts 182.8 px after its left edge. I am adding a Pill magnetic opt-out for positional markers and including both route paddings in the preview offset; the existing geometry assertions stay unchanged.

After-build finding: the Contents tick's offset parent is a zero-sized .pill-content; the shared magnetic action creates that positioning context, so the tick starts 15 px from the rail origin and the 1440 px hover pill begins 3 px before the tick ends. The preview container was also 233.6 px wide while Note text starts 182.8 px after its left edge. I am adding a Pill magnetic opt-out for positional markers and including both route paddings in the preview offset; the existing geometry assertions stay unchanged.
kayg commented 2026-10-06 14:19:41 +00:00
Author
Owner
Copy link

Baseline evidence before code changes: CALTERNAL_SERVER_BIN=/home/kayg/build/targets/restyle-mailmoney/debug/calternal-server CALTERNAL_E2E_MAC=1 bun e2e/agenda-decks-822.mjs built the local production route and passed the media contract checks, then timed out after 90 seconds waiting for the Week/Day attachment list to become visible. The captured DOM showed .attachment-list.is-fan with aria-hidden="true" and the is-stack is-fan classes. The script emitted partial Agenda screenshots, then exited 1. I did not change the existing assertion; I am keeping this restyle scoped to #1190 and will capture the affected Calendar surfaces with a focused screenshot flow.

Baseline evidence before code changes: `CALTERNAL_SERVER_BIN=/home/kayg/build/targets/restyle-mailmoney/debug/calternal-server CALTERNAL_E2E_MAC=1 bun e2e/agenda-decks-822.mjs` built the local production route and passed the media contract checks, then timed out after 90 seconds waiting for the Week/Day attachment list to become visible. The captured DOM showed `.attachment-list.is-fan` with `aria-hidden="true"` and the `is-stack is-fan` classes. The script emitted partial Agenda screenshots, then exited 1. I did not change the existing assertion; I am keeping this restyle scoped to #1190 and will capture the affected Calendar surfaces with a focused screenshot flow.
kayg commented 2026-10-06 14:22:49 +00:00
Author
Owner
Copy link

Screenshot evidence finding: the after build's real Settings theme-save API returned HTTP 507 with Home storage quota or server free-space reserve reached. df -h showed 23 GB available on /dev/sdb1. The screenshot fixture stopped before the after matrix completed. I am freeing this job's Rust build output, then I will rerun the production captures.

Screenshot evidence finding: the after build's real Settings theme-save API returned HTTP 507 with `Home storage quota or server free-space reserve reached`. `df -h` showed 23 GB available on `/dev/sdb1`. The screenshot fixture stopped before the after matrix completed. I am freeing this job's Rust build output, then I will rerun the production captures.
kayg commented 2026-10-06 14:26:07 +00:00
Author
Owner
Copy link

After-fix finding: magnetic opt-out and padded route offset now pass the horizontal and prose-overlap assertions. The remaining centering assertion showed the rail's one-class placement selector losing to shared positioning, leaving the root 7 px above its row center. I strengthened the layout selector to target the rail row; the existing centering expectation is unchanged.

After-fix finding: magnetic opt-out and padded route offset now pass the horizontal and prose-overlap assertions. The remaining centering assertion showed the rail's one-class placement selector losing to shared positioning, leaving the root 7 px above its row center. I strengthened the layout selector to target the rail row; the existing centering expectation is unchanged.
kayg commented 2026-10-06 14:26:14 +00:00
Author
Owner
Copy link

Clarification: after the prior fix, the remaining Contents tick centering issue came from selector specificity. The shared icon pill rule uses two classes, so the rail's one-class position rule did not win. I strengthened the Notes rail selector; the test expectation remains unchanged.

Clarification: after the prior fix, the remaining Contents tick centering issue came from selector specificity. The shared icon pill rule uses two classes, so the rail's one-class position rule did not win. I strengthened the Notes rail selector; the test expectation remains unchanged.
kayg commented 2026-10-06 14:35:43 +00:00
Author
Owner
Copy link

After-fix finding: the 1440 px hover geometry now passes, including tick clearance and no prose overlap. The next assertion found the visible tick extends 1 px into the editor Card at 820 px because the shared Pill border moves its child marker inward. I am offsetting the decorative tick by the shared hairline token so it aligns with the rail's outer edge; assertions remain unchanged.

After-fix finding: the 1440 px hover geometry now passes, including tick clearance and no prose overlap. The next assertion found the visible tick extends 1 px into the editor Card at 820 px because the shared Pill border moves its child marker inward. I am offsetting the decorative tick by the shared hairline token so it aligns with the rail's outer edge; assertions remain unchanged.
kayg commented 2026-10-06 14:47:34 +00:00
Author
Owner
Copy link

Notes Contents follow-up: the real-server tablet geometry assertion measured the visible tick 0.078 px inside the editor Card after the shared Pill border inset. I increased the decorative marker offset by one shared hairline. The unchanged tocrail-636 assertion now passes across desktop, tablet, and phone in light and dark at 1x; committing this Contents surface fix.

Notes Contents follow-up: the real-server tablet geometry assertion measured the visible tick 0.078 px inside the editor Card after the shared Pill border inset. I increased the decorative marker offset by one shared hairline. The unchanged tocrail-636 assertion now passes across desktop, tablet, and phone in light and dark at 1x; committing this Contents surface fix.
kayg commented 2026-10-06 16:18:50 +00:00
Author
Owner
Copy link

Resuming #1190 in job/restyle-search. Base/head at resume: 2b27975324. Working tree is clean; I am locating the Search audit inventory and continuing the Search-only fixes.

Resuming #1190 in job/restyle-search. Base/head at resume: 2b27975324bb1df94103b37cf8f90562390483e2. Working tree is clean; I am locating the Search audit inventory and continuing the Search-only fixes.
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
dev
wip/tagperf-1186
wip/sidebar3-1094
wip/segmented-1200
job/tagperf-1186
wip/rev2-webperf
wip/rev2-money-ident
wip/restyle-mailmoney
wip/restyle-files
wip/previewcard-1098
wip/palette2-1123
wip/palette-1093
wip/onboard2-1141
wip/onboard-1141.aborted-early
wip/onboard-1141
wip/nlpchip-1127
wip/morph-1104
wip/merge-round-7c5
wip/merge-round-7c4
wip/merge-round-7c3
wip/merge-round-7c2
wip/merge-round-7c
wip/mchrome-1084
wip/mailghost2-1094
wip/mailghost-1094
wip/kbpreview2-1118
wip/kbpreview-1118
wip/kanban-1092
wip/importhang-1121
wip/hiderev-1153
wip/hide4-1153
wip/hide3-1153
wip/hide2-1153
wip/hide-1153
wip/editreg-1132
wip/editorrail3-1113
wip/editorrail2-1113
wip/editorrail-1113
wip/e2e-b2-1071
wip/e2e-b-1071
wip/draw4-1101
wip/draw3-1101
wip/draw2-1101
wip/draw-1101
wip/directory-1199-r
wip/directory-1199
wip/delete-1119
wip/cards2-1083
wip/cards-1083
wip/canvas-visual
wip/canvasvis2-976
wip/calhdr-1112
wip/calcards-1115
wip/browserfix
wip/blocks-1125
job/collabloss-1197
wip/allday-1107
wip/agenda-decks
wip/agenda-1086
wip/adv7c-1105
wip/txentry-1198
wip/trayicons2-1095
wip/trayicons-1095
wip/collabrev-1197
wip/collabloss2-1197
wip/collabloss-1197
job/merge30
job/restyle-notes
job/adv-1202
job/notifloop-1194
job/restyle-mailmoney
job/onboard-1141
wip/restyle-notes
job/segmented-1200
job/hide-1153
wip/notifloop-1194
job/txentry-1198
job/perf-1124
job/perf2-1124
job/tocrail-1191
job/restyle-settings
wip/restyle-settings
job/restyle-files
job/tagdnd-1187
job/cards-1179
wip/cards2-1179
wip/cards-1179
wip/tocrail-1191
wip/tagdnd-1187
wip/perf-1124
wip/merge30j
job/wizchoices-1140
wip/wizchoices-1140
wip/restyle-1190
job/moneyfmt-1180
wip/moneyfmt2-1180
wip/moneyfmt-1180-r
wip/moneyfmt-1180
job/pillglass-1189
job/flags-1181
wip/flags-1181
job/restyle-1190
job/restyle-search
job/settingsreg-1195
job/wizard-1140
site/website
wip/wizardrev2-1140
wip/wizardrev-1140
wip/wizard5-1140
wip/wizard4-1140
wip/wizard3-1140
wip/wizard2-1140
wip/wizard-1140
wip/pillglass-1189
wip/settingsreg-1195
job/merge29
job/fu-1171
wip/merge29j
wip/fu-1171
job/fu-1166
job/directory-1199
job/proflog-1204
job/txresearch-1188
wip/fu-1166
job/merge28
job/search-1066
wip/search-1066
wip/merge28j
job/gateslot-1182
job/bulkimport-1157
job/mailnet-1160
wip/mailnetrev-1160
wip/mailnet-1160
wip/bulkrev-1157
wip/bulkimport-1157
job/startup-1161
wip/startup-1161
job/merge27
job/linkcards-1151
wip/linkcards3-1151
wip/linkcards2-1151
wip/linkcards-1151
job/traydate-1144
wip/traydate3-1144
wip/traydate2-1144
wip/traydate-1144
job/draw-1101
wip/merge27j
job/blockpill-1152
wip/blockpill3-1152
wip/blockpill2-1152
wip/blockpill-1152
job/minihover-1149
wip/minihover2-1149
wip/minihover-1149
job/merge25
wip/merge25-r
wip/merge25b
wip/merge25
job/inspector-1129
job/tags-1110
wip/inspector3-1129
wip/inspector2-1129
wip/inspector-1129
wip/tagsrev-1110
wip/tags2-1110
wip/tags-1110
job/dates-1148
wip/datesrev-1148
wip/dates2-1148
wip/dates-1148
job/licence-1145
wip/licence2-1145
wip/licence-1145
job/selfhost-1156
job/merge23
wip/merge23
job/tagfilter-1109
wip/tagfilter2-1109
wip/tagfilter-1109
job/kbd-1134
wip/kbd2-1134
wip/kbd-1134
job/palfoot-1137
wip/selfhost-1156
wip/palfoot2-1137
wip/palfoot-1137
job/toggle-1158
wip/toggle-1158
job/kbpreview-1118
job/docratchet-1155
job/perflint-1133
job/devtests-1159
wip/docratchet-1155
wip/devtests-1159
job/segv-1136
wip/toast-1142
wip/segv-1136
job/toast-1142
job/blockreload-1147
wip/blockreload-1147
job/font-1150
wip/font-1150
job/importui-1120
job/minimonth-1149
wip/importui-1120
wip/minimonth-1149
job/depcheck-1146
wip/perflint-1133
wip/depcheck-1146
job/calcards-1115
job/blocks-1125
job/plus-1128
job/shift-1138
wip/plus2-1128
wip/plus-1128
wip/shift-1138
job/moneyfid-1130
job/editorrail-1113
wip/moneyrev-1130
wip/moneyfid-1130
job/noext-851
wip/noext-851
wip/noext3-851
wip/noext2-851
job/week-1135
wip/week-1135
job/editreg-1132
job/smoke-1122
wip/smoke-1122
job/docs-1143
job/palette2-1123
job/calhdr-1112
job/nlpchip-1127
job/mailghost-1094
job/reconnect-1131
wip/reconnect-1131
job/trayicons-1095
job/delete-1119
job/importhang-1121
job/cards-1083
job/palette-1093
job/mchrome-1084
job/e2e-a-1071
job/canvas-visual
job/previewcard-1098
job/allday-1107
wip/e2e-a2-1071
wip/e2e-a-1071
job/e2e-b-1071
job/adv7c-1105
job/kanban-1092
job/agenda-1086
job/merge-round-7c
job/morph-1104
wip/surfaces-p2
job/merge-round-9
wip/merge-round-9
job/7cfix-small
wip/7cfix-small
job/mailui-1078
job/merge-round-8
wip/merge-round-8
wip/mailui-1078
job/mailround-1038
job/applemail-accept
wip/settitle-1068
wip/mailround2-1038
wip/mailround-1038
wip/e2e-7b
job/crash-1069
wip/crash-1069
job/searchlost-1066
wip/searchlost-1066
job/7b-reconcile
job/flake-1065
wip/flake-1065
wip/merge-round-7b7
wip/merge-round-7b6
wip/merge-round-7b5
wip/merge-round-7b4
wip/7b-reconcile
job/appupdate-1059
job/nfd-1044
wip/appupdate-1059
job/e2e-7b
job/loop-1062
wip/loop-1062
job/pdfprev-1045
job/invtoggle-1053
wip/pdfprev-1045
wip/nfd-1044
wip/invtoggle-1053
job/7bfix-e2e
job/mailstress-b
wip/7bfix-e2e
wip/mailstress-b
job/7bfix-adv
wip/7bfix-adv
job/mailstress-a
job/stack-1054
wip/stack-1054
wip/mailstress-a
job/mailstress-1038
wip/mailstress-1038
job/upload500-1051
wip/upload500-1051
job/share-1034
wip/share-1034
job/syncerr-1037
job/7bfix-photos
wip/7bfix-photos
job/paste-1036
job/setside-1039
wip/setside-1039
wip/paste-1036
job/lease-1042
wip/syncerr-1037
wip/lease-1042
job/7bfix-data
job/passkeybind-1043
wip/apprevoke-1041
job/invite-1035
wip/invite-1035
job/merge-round-7b2
wip/merge-round-7b2
job/mailproxy-486
job/apprevoke-1041
job/rebuild-1033
job/pillborder-1029
wip/pillborder-1029
wip/mailproxy-486
wip/applemail-486
job/headless-998
wip/headless-998
job/groups-1028
wip/groups-1028
job/rebuildwarn-1016
wip/rebuildwarn-1016
job/startup-1011
wip/startup-1011
job/monthpill-1009
job/bgthumb-1025
job/sharetitle-1012
wip/monthpill-1009
wip/bgthumb-1025
wip/sharetitle-1012
job/canvas-cards-977
wip/canvas-cards-977
job/canvas-pencil-978
job/canvas-sketch-990
wip/canvas-sketch-990
wip/canvas-pencil-978
job/canvas-files-989
wip/canvas-files-989
job/canvas-collab-991
wip/canvas-collab-991
job/weekscroll-1018
wip/weekscroll-1018
wip/canvas-core-976
job/canvas-core-976
job/round-drag
wip/round-drag
job/round-settings
job/browserfix
wip/oapi-974
job/oapi-974
job/hist2-integrate
job/mailhtml-726
wip/mailhtml-726
wip/hist2-integrate
job/moneyfu-984
job/drag-1015
wip/drag-1015
job/rename-1017
wip/rename-1017
job/hist2-api
wip/hist2-api
job/oneacct-1014
wip/oneacct-1014
wip/moneyfu-984
job/hist2-bench
job/hist2-restore
wip/hist2-bench
job/hist2-write
job/hotfix-724
wip/hotfix-724
wip/hist2-write
wip/hist2-restore
job/hist2-store
job/hist2-ui
wip/hist2-ui
wip/hist2-store
job/searchstarve-965
job/shutdown-963
wip/shutdown-963
wip/pubedit-981
job/pubedit-981
job/analytics-973
wip/searchstarve-965
job/authflash-850
job/weeklane-969
job/pvtitle-1004
job/hist-975
wip/authflash-850
job/voicepill-617
wip/pvtitle-1004
job/headring-1003
wip/weeklane-969
wip/voicepill-617
wip/headring-1003
wip/analytics-973
job/agentscope-980
wip/thumbsandbox-988
job/thumbsandbox-988
wip/hist-975
job/links-856
wip/links-856
job/davetag-966
wip/davetag-966
job/filesstorm-1000
job/hoverpad-725
wip/filesstorm-1000
job/ffmpegblas-993
job/merge-round-7a
wip/hoverpad-725
wip/ffmpegblas-993
job/nowdot-1002
wip/verify-7a
job/noteid-857
wip/nowdot-1002
wip/noteid-857
wip/merge-round-7a
wip/agentscope-980
job/imapedge
job/a11yfix2
wip/imapedge-941
wip/imapedge
wip/a11yfix2
job/notetask-986
job/logheading
wip/logheading-998
job/textthumb-652
job/photolive-987
wip/photolive-987
job/davactive-983
job/savefix-985
job/tabicons-607
wip/davactive-983
wip/tabicons-607
wip/notetask-986
wip/savefix-985
job/dirid-627
job/buildspeed-1007
wip/dirid-627
job/agenda-decks
job/perfguards-impl
job/undo-a11y
wip/undo-a11y
job/mailperf
job/wal-824
wip/settings-50
job/settings-50
job/notesfilter-606
wip/notesfilter-606
job/surfaces-p2
wip/wal-824
job/maillayouts
wip/mailperf
wip/maillayouts
job/taskmeta-659
job/money-ident
wip/money-ident
wip/taskmeta-659
job/errstates
wip/perfguards-impl
job/headings-881
wip/headings-881
wip/errstates
job/voice-619
job/gaps-827
job/notesperf
wip/notesperf
wip/voice-619
job/hddsql-549
job/perf-stream-668
wip/perf-stream-668
wip/deeplinks-fix
job/deeplinks-fix
job/authfix
job/docsfix-rust
wip/docsfix-rust
job/webperf
job/docsfix-web
job/datafix2
job/webdav-lock-476
job/copyfix
wip/copyfix
wip/webperf
job/focus-658
wip/protofix
job/mediafix
job/protofix
wip/mediafix
job/agentfix
job/hhmm-724
wip/agentfix
job/undo-722
job/reuse
wip/webdav-lock-476
wip/reuse
job/scopefix
job/datafix
wip/hhmm-724
wip/undo-722
job/surfaces-p1
wip/hddsql-549
job/voicememos-618
wip/datafix2
wip/surfaces-p1
job/fix-940
wip/fix-940
job/blaze-surfaces
wip/datafix
wip/blaze-surfaces
job/taskday-655
job/linknav-639
wip/linknav-639
wip/gaps-827
job/isolation-707
job/audiophotos-720
wip/audiophotos-720
job/advfind-664
wip/voicememos-618
wip/taskday-655
wip/isolation-707
wip/advfind-664
wip/scopefix
wip/focus-658
job/testgaps
wip/testgaps
job/overscroll-718
wip/authfix
job/deps
wip/overscroll-718
job/rev2-agentfix
job/rev2-money-ident
job/rev2-mailperf
wip/deps
job/hardening-728
wip/hardening-728
job/searchgen-832
wip/searchgen-832
job/photopw-849
job/mailsql-825
wip/photopw-849
job/sharefix
wip/sharefix
job/rev2-mailhtml-726
job/rev2-perfguards
job/copyval-723
job/lightglass-r2
wip/lightglass-r2
wip/docsfix-web
job/copy-audit
job/macinterop-staging-r2
job/design-sync
job/rev2-taskmeta-659
job/rev2-webperf
job/docs-audit
job/rev2-advfind-664
job/rev2-mailproxy-486
job/states-audit
job/rev2-datafix
job/design-drift
job/test-gaps
job/rev2-voicememos-618
job/rev2-mediafix
job/rev2-deps
job/rev2-datafix2
job/licence-audit
job/issue-hygiene
job/rev2-protofix
job/rev2-voice-619
job/rev2-isolation-707
job/rev2-surfaces-p1
job/deeplink-audit2
job/rev2-audiophotos-720
wip/test-gaps
job/rev2-overscroll-718
job/rev2-undo-722
wip/states-audit
job/rev2-dropmd-719
job/rev2-linknav-639
job/merge-7b-plan
wip/merge-7b-plan
job/rev2-taskday-655
wip/mailsql-825
job/rev2-webdav-lock-476
job/rev2-browserfix
wip/design-drift
job/rev2-hddsql-549
wip/deeplink-audit2
job/rev2-scopefix
job/rev2-authfix
job/rev2-hardening-728
job/rev2-wal-824
job/rev2-sharefix
job/calsidebar-638
job/chrome-audit
job/ioperf
wip/ioperf
wip/chrome-audit
wip/calsidebar-638
job/dropmd-719
wip/dropmd-719
job/ocr-build
wip/ocr-build
job/blaze-settings
wip/copyval-723
job/toastring-721
wip/toastring-721
job/deployfix-732
wip/deployfix-732
wip/blaze-settings
job/money-import-recheck
job/rev-a11y
job/perf-arch-db
job/rev-7b-data
wip/textthumb-652
wip/perf-arch-db
job/sec-protocols
job/sidehdr-660
job/rev-7b-security
job/research-surfaces
job/rev-design-gaps
job/rev-mcp-api
wip/sidehdr-660
job/perf-arch-memory
wip/sec-protocols
job/perf-arch-bundle
job/snapedge-714
wip/rev-mcp-api
job/sec-supplychain
wip/research-surfaces
job/perf-arch-sync
job/rev-consistency
job/perf-arch-server
wip/perf-arch-server
wip/perf-arch-memory
job/perf-arch-io
job/perf-arch-client
job/sec-fs
job/sec-mcp-scopes
job/sec-sharing
job/perf-guards
job/sec-browser
job/sec-admin-deploy
job/sec-auth
wip/snapedge-714
job/bgpicker-717
wip/perf-arch-bundle
wip/money-import-recheck
job/advsetup-654
wip/bgpicker-717
wip/advsetup-654
job/burst-709
job/kbdcaps-710
job/app-pw-chooser
wip/burst-709
wip/app-pw-chooser
job/imaptest-625
wip/kbdcaps-710
job/fix-499
wip/fix-499
job/perf-mut-667
job/calimg-589
job/perf-snap-666
wip/calimg-589
wip/perf-snap-666
wip/perf-mut-667
job/perf-cache-665
wip/perf-cache-665
job/voicefiles-620
wip/voicefiles-620
job/admin-burst-705
wip/admin-burst-705
job/voicememos-review
wip/voicememos-review
wip/ryw-653
job/ryw-653
job/writeonopen-661
job/instant-663
wip/writeonopen-661
job/money-import-review
wip/money-import-review
wip/importjs-610
review/integrations-407-round6
wip/integrations-review
job/dragghost-612
wip/dragghost-612
job/integrations
wip/integrations
job/decider-656
job/merge-round-6
job/perf-rerun
wip/merge-round-6
job/integrations-review-round5
job/selalign-576
wip/selalign-576
job/mcp-events-491
job/files-631
job/cal-e2e-569
wip/cal-e2e-569
job/reload-423
wip/reload-423
wip/mcp-events-491
wip/files-631
job/notesbridge-644
wip/notesbridge-644
job/editor-series
job/calcard-series
wip/calcard-series
job/mcp-events-review-491
wip/mcp-events-review
wip/editor-series
job/quirks-546
job/integrations-recheck
job/tocrail-636
wip/tocrail-636
wip/quirks-546
wip/reminders-643
job/reminders-643
wip/davscale-573
job/davscale-573
job/integrations-review
wip/ocr-eval-584
job/ocr-eval-584
job/esc-537
wip/esc-537
job/toastname-586
wip/toastname-586
job/submenu-579
wip/submenu-579
job/tasks-mode
wip/tasks-mode
job/agentdocs-630
job/dupwrite-634
wip/agentdocs-630
wip/dupwrite-634
job/lightglass-588
wip/lightglass-588
job/tabswitch-549
job/ghosttask-623
wip/ghosttask-623
job/toaststack-616
job/weekstate-609
job/mailsync-613
wip/mailsync-613
wip/weekstate-609
job/maildup-626
wip/tabswitch-549
wip/maildup-626
wip/toaststack-616
job/motion-611
wip/motion-611
job/tlstest-601
wip/tlstest-601
job/perf-495
job/floating-sheet
wip/floating-sheet
job/remdup-585
wip/remdup-585
job/fix-502
wip/fix-502
job/attachplay-622
job/perf-batch
wip/perf-batch-563
wip/perf-495
hotfix/mail-sync-diag
job/mail-m3
wip/mail-m3
job/attach-poof-603
job/calhover-608
job/editorbar-604
job/mentions-605
job/merge-round-4
job/allday-514
wip/merge-round-4
wip/allday-514
job/merge-round-4a
wip/merge-round-4a
job/sharestack-580
job/fix-501
wip/sharestack-580
wip/fix-501
job/perf-batch-563
job/apw-cache-review
wip/apw-cache-review
job/probe-520
wip/probe-520
job/mac-393
wip/mac-393
job/header-571
job/flake-513
wip/flake-513
job/docs-thumb-547
wip/header-571
job/webcal-572
wip/webcal-572
wip/shortcuts-542
job/shortcuts-542
wip/docs-thumb-547
job/caldav-stress
wip/caldav-stress
wip/sweep-478
job/apw-cache-512
wip/apw-cache-512
job/money-empty-540
wip/restart-505
wip/money-empty-540
wip/fix-510
job/restart-505
job/fix-503
job/perf-496
wip/perf-496
job/fix-498
wip/fix-498
job/info-inspector-465
wip/info-inspector-465
job/fix-510
job/fix-507
wip/fix-507
wip/fix-503
job/fix-493
job/money-kinds
wip/money-kinds
job/hygiene-548
job/merge-round-3
wip/fix-493
job/drag-snap-536
wip/merge-round-3
wip/merge-round-0930
wip/drag-snap-536
job/align-538
wip/align-538
job/bg-flash
wip/bg-flash
job/money-import
job/search-count-544
wip/search-count-544
wip/money-import
job/settings-key-541
wip/settings-key-541
job/toast-539
job/preview-421
wip/preview-421
wip/toast-539
job/tasks-500-531
job/title-plain-526
wip/title-plain-526
wip/tasks-500-531
job/notes-bridge
wip/parity-484
job/parity-484
job/files-slow
job/crash-525
wip/notes-bridge
wip/files-slow
wip/crash-525
job/kbd-motion-527
wip/bg-422
job/analytics-504
wip/analytics-504
wip/kbd-motion-527
job/upload-pill-523
wip/upload-pill-523
wip/tray-order
job/tray-order
wip/overflow-mid
wip/merge-round-2
job/perf-494
wip/perf-494
wip/mcp-fast-492
wip/motion-477
wip/asr-ab-489
wip/theme-variants-506
wip/overflow-511
wip/week-header-508
wip/attach-427
job/dav-delete-471
job/iso-435
wip/iso-435
wip/files-sel-keys
wip/dav-delete-471
job/align-253
job/siwc-490
wip/siwc-490
job/money-kinds-review
wip/align-253
wip/money-kinds-review
job/small-bugs-3
wip/overlay-title-487
wip/multiget-500
wip/hidden-420
wip/webcal-ui
wip/webcal-431
job/perf-367
job/location
wip/small-bugs-3
wip/location
wip/perf-367
wip/admin-deny-483
job/tag-unicode-473
wip/tag-unicode-473
job/blur-436
wip/photos-470
wip/blur-436
wip/small-bugs-4
wip/hunt-20260930
wip/settings-hdr-482
wip/chips-416
job/dedup-375
wip/dedup-375
job/doc-stack
wip/doc-stack
job/tokens-literals
wip/tokens-literals
job/jobs-leftovers
wip/send-fast
wip/paste-467
wip/money-numbers
job/money-plugin
wip/money-plugin
job/break-dav
wip/merge-batch
wip/crossday-469
wip/mac-verify
wip/mail-m2
wip/break-dav
wip/money-review2
job/money-md
job/modes-424
wip/money-md
wip/jobs-leftovers
job/agenda-413
wip/agenda-413
wip/modes-424
job/recog-417
wip/recog-417
wip/bounce-425
wip/ab-384-luna
job/webdav-perf
wip/webdav-perf
job/toast-ring
wip/toast-ring
job/money-review
wip/money-review
wip/micro-motion
wip/settings-card
wip/minical
job/notes-imap-428
job/least-priv
wip/ui-small-2
wip/flaky-426
wip/drag-end-418
job/jank
wip/jank
wip/least-priv
wip/docs-site
job/agenda
job/sec-batch
wip/sec-batch
wip/per-user-index
job/area-calendars
wip/area-calendars
job/parity
wip/parity
job/documents-research
wip/documents-research
job/test-infra
job/reminders-sync
wip/small-bugs-2
wip/reminders-sync
wip/gestures
job/google-oauth
wip/tags-merge
wip/tags
job/e2e-theme
wip/e2e-theme
job/icon-align
wip/test-infra
wip/select-align
wip/editor-385
job/voice
wip/webdav
job/webdav
job/app-pw-ui
job/editor-integrity
wip/editor-integrity
wip/voice
wip/quota
wip/cal-followups
wip/icon-align
job/composer-scale
wip/composer-scale
job/jobs-page
wip/jobs-page
job/hig-type
wip/hig-type
wip/app-pw-ui
job/motion-spring
job/mcp
wip/motion-spring
wip/mcp
job/small-bugs
wip/push-hosts
job/profile-sign
wip/touch-369
wip/profile-sign
job/mobile-focus
wip/mobile-focus
wip/ui-polish-354
wip/small-bugs
wip/dup-task
job/toast-polish
job/app-pw-scopes
wip/toast-polish
wip/app-pw-scopes
wip/cli-agent
wip/selection-pills
job/preview-attach
wip/preview-attach
job/dav-proppatch
wip/dav-proppatch
wip/cal-switcher
job/atomic-race
wip/atomic-race
job/photos-shared
wip/photos-shared
wip/cal-grid
wip/note-rewrite
wip/search-rebuild
job/mail-m1
job/paperless-import
wip/paperless-import
wip/mail-m1
wip/hidden-activity
wip/search-d
wip/pricing-research
wip/cursors
wip/auto-scheme
job/single-pills
wip/single-pills
wip/xuser-matrix
wip/money-format
wip/app-pw-setup
wip/purge-dos
wip/vault-health
wip/caldav-apple
wip/xuser-audit
wip/e2e-green
wip/tabbar
wip/adv-harness
wip/maple-mono
job/search-fix
wip/search-fix
wip/search-perf-c
job/adv-harness
wip/sidebar-headers
job/glass
wip/temp-index
job/polish
wip/polish
wip/file-protocols
wip/money-research
wip/glass
wip/voice-models
wip/collab-redo
job/voice-research
wip/hunt-20260928
wip/notes-actions-research
wip/search-pad
wip/search-perf
wip/search-sticky
wip/editor-undo
wip/chrome-rules
wip/motion
wip/appearance-research
wip/appearance
wip/audit-bugs
wip/cal-glass
wip/block-actions
wip/authz-order
wip/event-stripes
wip/chrome-sidebar
wip/auth-flaky
wip/robust-2
wip/gate-fix
wip/menu-blur
wip/import-calternaljs
wip/tray-fix
job/import-calternaljs
wip/index-order
wip/audit-fixes
wip/search-chevrons
research/mail
wip/phone-chrome
wip/dedup-break
wip/csp
wip/ui-audit
wip/select-toast
wip/perf
wip/flat-layout
wip/fonts
wip/event-tint
wip/sync-converge
wip/data-split
wip/glass-audit
wip/robustness
wip/sync-chaos
wip/search-thumbs
wip/fuzz
wip/menu-icons
wip/search-pill
wip/sync-changing
wip/heading-links
wip/date-formats
wip/a11y
wip/break-editor
wip/e2e-fix
wip/settings-sections
wip/sync-root-guard
wip/search-palette
wip/share-edit
job/toasts
wip/toasts
wip/cont-analytics
wip/authz-review
wip/popovers
wip/overlay-glass
wip/change-feed
wip/editor-modes
wip/composer-align
wip/cont-agenda
wip/agenda-merge
job/agent-conventions
wip/agent-conventions
wip/backend-misc
job/route-audit
wip/route-audit
wip/ui-batch
wip/heif-hardening
wip/grid-resize
wip/ask-page
wip/webmcp
job/deeplink-audit
wip/deeplinks
wip/shortcuts
wip/cont-tz-days
main
No results found.
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
kayg/calternal#1190
No description provided.