Chore/architecture refactoring #42
Reference in New Issue
Block a user
Delete Branch "chore/architecture-refactoring"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Renamings, refactorings and visual improvements.
Dynamic import inside the vi.mock('$entities/Font') factory was missed when batchFontStore was relocated into its own subdirectory in1573950. Restores the previously-failing comparisonStore test suite (9 tests) and clears the lingering TS error in svelte-check.Name throttle/debounce intervals, spring presets, and layout paddings that were inline numeric literals: - VirtualList: VISIBLE_CHANGE_THROTTLE_MS (150), NEAR_BOTTOM_THROTTLE_MS (200), JUMP_THROTTLE_MS (200) - SampleList: CHECK_POSITION_THROTTLE_MS (100) - SliderArea: SLIDER_SPRING_CONFIG ({stiffness: 0.2, damping: 0.7}), SLIDER_PERSIST_DEBOUNCE_MS (100), SLIDER_PADDING_MOBILE_PX (48), SLIDER_PADDING_DESKTOP_PX (96) - FontVirtualList: TOUCH_DEBOUNCE_MS (150) - createPerspectiveManager: PERSPECTIVE_SPRING_CONFIG ({stiffness: 0.2, damping: 0.8}) No behavior changes — values preserved exactly.Establish a real design system foundation by moving the project from inline arbitrary-value classes to named tokens and reusable utilities. Tokens added to @theme (auto-generate Tailwind utilities): - Shadows: shadow-rest, shadow-stamp-{rest,hover,pressed,card}, shadow-popover, shadow-floating-panel{,-dark}, shadow-overlay - Motion: duration-{fast,normal,slow,slower}; ease-{standard,out-soft,spring-overshoot} Semantic mode-switching colors added to :root / .dark so utilities auto-adapt without dark: variants: - --color-border-subtle, --color-text-subtle, --color-skeleton Utilities migrated to Tailwind v4's @utility directive with direct CSS properties (previously @layer utilities with @apply chains, which silently failed when chaining to other user-defined utilities): - border-subtle, text-subtle, focus-ring - surface-canvas, surface-card, surface-card-elevated, surface-popover, surface-floating - flex-center, skeleton-fill, text-label-mono Notes: - text-secondary was renamed to text-subtle because --color-secondary is registered in @theme (a near-white shadcn surface token), which made Tailwind v4 auto-generate a colliding text-secondary utility that won over the user-defined one — every consumer effectively rendered as near-white text. The text-subtle name pairs cleanly with border-subtle and avoids any @theme collisions. - Dead --space-* variable scale removed (was defined but never wired into @theme; Tailwind's default spacing scale is used everywhere).- New layout prop with values 'inline' (default) and 'block-list-row'. The block-list-row variant bakes in full-width, left-aligned content with trailing icon and text-sm, replacing the ~10-class override duplicated across FilterGroup, FontList, and similar list-row sites. - primary variant's three hard-offset shadows now reference the shadow-stamp-{rest,hover,pressed} tokens; the 0.0625rem translate becomes translate-{x,y}-px. - Base classes use text-label-mono and duration-normal utilities instead of inline 'font-primary font-bold tracking-tight uppercase' and 'duration-200'. - The icon variant's background uses surface-canvas (semantic naming; picks up dark-mode automatically via --color-surface). - text-secondary → text-subtle (avoids collision with the @theme --color-secondary token; see earlier styles commit). New exported type: ButtonLayout.The decorative dotted-grid background on the paper surface was a 6-line $derived gridStyle string applied via inline style="" plus four extra utility classes for color and opacity. Replace with two named utilities and let CSS handle the responsive switch. app.css: - New --color-grid-line CSS var (light + dark) so the grid colour and intensity auto-switch without consumers needing a dark: variant or an opacity layer. - @utility bg-grid (20px cells) and @utility bg-grid-sm (10px cells). Both reference --color-grid-line, so the same markup paints correctly in light and dark mode. SliderArea.svelte: - Drop the gridStyle $derived block and the inline style= attribute. - Overlay becomes a single line: <div class="absolute inset-0 pointer-events-none bg-grid-sm md:bg-grid" aria-hidden="true" /> Mobile picks the tight 10px grid; the md: breakpoint flips to 20px, matching the prior JS-driven behaviour with no extra runtime cost.