feat(preview): comprehensive framework showcase with 7 tabbed sections

[jackgranatowski]

Replaces the partial sample UI with a full live-preview showcase covering
every aspect of the SLASHED framework: color variant ladders, palette scales,
LumLocker demo, full typography scale, all layout primitives (stack/cluster/
grid/sidebar/switcher/cover/frame/bento), macro classes, state classes, and
a complete tokens reference — all driven by the live --sf-* custom properties.

https://claude.ai/code/session_01XYKxYrtpTLeMmZ3Lw3BHbV

Summary by CodeRabbit

• New Features
  • Introduced multi-section preview interface with tabs covering Overview, Colors, Palette, Typography, Layout, Macros, and Tokens sections
  • Added light/dark theme toggle and reduced-motion controls in the preview header
  • Enhanced token visualizations with improved layouts for spacing, shadows, typography scale, and design system components
  • Added close button to preview interface

[coderabbitai]

Warning

Review limit reached

@jackgranatowski, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 28 minutes and 23 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: aa302661-67af-474c-934c-bb06858c0204

📥 Commits

Reviewing files that changed from the base of the PR and between 698b102 and e1dad8e.

📒 Files selected for processing (1)

• configurator/src/components/Preview.svelte

📝 Walkthrough

Walkthrough

Preview.svelte is expanded from a single-overview component into a seven-section tabbed live preview. A SECTIONS model and activeSection state are added, the header gains theme, reduced-motion, and close controls plus a section tablist, and each section (Overview, Colors, Palette, Typography, Layout, Macros, Tokens) is rebuilt using token-driven arrays and #each loops. CSS is substantially extended to support all new visual components.

Changes

Multi-section Preview Rewrite

Layer / File(s)	Summary
SECTIONS model, activeSection state, and token arrays configurator/src/components/Preview.svelte	Adds the SECTIONS list and reactive activeSection state, reorganizes script imports, removes an obsolete comment, and replaces/extends prior token-constant arrays with a broad collection covering spacing, radii, shadows, gradients, palette steps, alpha steps, full typography scale, font weights/stacks, line heights, letter spacing, state class lists, and macro-related lists.
Preview header controls and section tablist configurator/src/components/Preview.svelte	Updates the overlay header to add theme (light/dark) and reduced-motion toggle controls plus a close button, and appends a horizontal tablist bound to activeSection using the SECTIONS array.
Overview section content rebuild configurator/src/components/Preview.svelte	Refactors Overview: updates type scale markup, rebuilds surface/brand/status/gradient blocks with token array loops and inline style bindings, removes the old hardcoded navigation block, rewrites feedback alerts and card component previews, and adds spacing scale, border radius, shadow, and motion demo sections.
Colors and Palette sections configurator/src/components/Preview.svelte	Replaces static Colors and Palette previews with token-driven sections using #each loops to generate brand/status swatches, semantic surfaces, interaction backgrounds, text/border/inline samples, numeric palette scales, alpha steps on checker backgrounds, key color steps, a LumLocker demo, a scoped theming demo, and gradient swatches.
Typography and Layout sections configurator/src/components/Preview.svelte	Rebuilds Typography to render headings, fluid type scales, font weights, semantic weight aliases, line heights, letter spacing, font stacks, and semantic HTML examples. Rebuilds Layout to demonstrate stack/cluster/grid/equal/sidebar/switcher/cover/frame/bento/container/divider variants with dynamic loops.
Macros and Tokens sections plus CSS overhaul configurator/src/components/Preview.svelte	Rebuilds Macros (surface/text/flow/overflow/link/state/a11y) and Tokens (spacing/radius/shadows/border/z-index/motion/easing/focus-ring) sections via loop-driven markup, and performs a major CSS expansion adding styles for all new visual components, grids, motion keyframes, and header controls.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat(preview): comprehensive framework showcase with 7 tabbed sections' directly and accurately describes the main change: expanding the Preview component to include 7 tabbed sections that comprehensively showcase the framework's capabilities.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/live-preview-framework-showcase-imd74f

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@configurator/src/components/Preview.svelte`:
- Line 130: The demo anchor links with hash hrefs (like href="`#a`") are causing
URL hash mutations and scroll jumps in the preview pane. Apply a click event
handler with preventDefault to all preview-only anchor elements to prevent the
default link navigation behavior while keeping them interactive for
demonstration purposes. This handler needs to be applied consistently at all
four affected locations in configurator/src/components/Preview.svelte: line 130
(the anchor at pv__a class), lines 415-418, line 599, and lines 870-873. Use the
same handler pattern across all these locations to ensure consistent
non-navigating behavior throughout the preview pane.
- Around line 110-113: The Preview component declares a tablist/tab pattern
using role="tablist" and role="tab" but lacks the complete tab implementation
required for proper accessibility. Either implement the full tabs pattern by
adding aria-controls attributes to each tab button pointing to corresponding tab
panels with role="tabpanel", implementing roving tabindex behavior, and adding
arrow-key navigation handlers (ArrowLeft/ArrowRight to switch active sections),
or simplify the semantics by removing the tablist/tab roles and aria-label from
the container and the role="tab" attributes from the buttons to make them
standard toggle buttons that don't imply keyboard navigation requirements.
- Around line 102-104: The three icon-only buttons for light theme, dark theme,
and motion preference controls lack explicit accessible names, relying only on
title attributes which assistive technology may not reliably detect. Add
aria-label attributes to each button (the light theme button with ☀ emoji, the
dark theme button with ☾ emoji, and the motion preference button with 🐢 emoji)
with clear, descriptive names that properly identify the control's purpose and
intent for screen readers and other assistive technology.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 6d68f990-39af-4677-8e77-c4302acaa16e

📥 Commits

Reviewing files that changed from the base of the PR and between a805909 and 698b102.

📒 Files selected for processing (1)

• configurator/src/components/Preview.svelte