Skip to content

Impl fe ph 0#6

Merged
livelifelively merged 56 commits intomasterfrom
impl-fe-ph-0
Jan 22, 2026
Merged

Impl fe ph 0#6
livelifelively merged 56 commits intomasterfrom
impl-fe-ph-0

Conversation

@livelifelively
Copy link
Copy Markdown
Contributor

No description provided.

- Added CSS variables for colors, typography, spacing, shadows, z-index, motion
- Added ThemeProvider component and theme context
- Configured Storybook with font loading and tokens
- Added Badge component with variants (default, success, warning, error, info)
- Added support for size, count, and dot props
- Added Storybook stories
- Added Icon component wrapping lucide-svelte
- Added Icon stories and tests
- Added lucide-svelte dependency
- Binary switch for on/off settings
- Sizes: sm (32×18px), md (44×24px)
- Props: checked, disabled, size, label, onchange
- Accessibility: role=switch, aria-checked, keyboard navigation
- Uses design tokens (--color-request, --radius-full)
- Session/connection status indicator
- Sizes: sm (8px), md (10px), lg (12px)
- Status variants: success, warning, error, info, neutral
- Accessibility: aria-label support
- Uses design tokens (--color-success, --color-warning, etc.)
- Dropdown selection from predefined options
- Wraps Bits UI Select.Root with custom styling
- Props: value, options, placeholder, disabled, size, onchange
- Options support icons via svelte:component
- Uses design tokens (--color-border, --radius-md, etc.)
- Keyboard navigation handled by Bits UI
- Toggle: refactored to use bits-ui Switch for accessibility and consistency
- Checkbox: new primitive using bits-ui Checkbox with indeterminate state
- Tooltip: new primitive using bits-ui Tooltip.Root/Content/Trigger
- Toast: new primitive with store-based pattern (ToastContainer, ToastItem, toast store)

All components use design tokens for styling and include Storybook stories and tests.
For consistency with other form components, Button now uses bits-ui Button.Root for standardized accessibility, focus handling, and behavior across the codebase.
Svelte 5 requires 'let' for () destructuring to enable (). The 'Cannot bind to constant' and 'import unused' errors are false positives from the Svelte 5 preview language server.
- Spinner: SVG-based loading indicator with sm/md/lg sizes
- SkipLink: Accessibility link for keyboard navigation
- Both use design tokens and include Storybook stories and tests
- Added customizable loadingLabel prop
- Improved icon prop type safety (Component<{ size?: number }>)
- Added :active pseudo-class styles for all button variants
- Replaced deprecated ComponentType with Component in story wrapper
- Fixed test import path and spinner selector
- Exported ButtonProps type for consumers
- Fixed Button imports in Toast/Tooltip stories to use barrel export
- Updated bun.lock with new dependencies
- Added VSCode settings for workspace configuration
- Removed .svelte-kit/__package__ build artifacts
- Updated package.json with dependency changes
- Added Badge story wrapper for Storybook
- Updated Badge component stories and tests
- Updated Button stories
- Updated Checkbox, Select, Toggle components
- Simplified svelte.config.js
- Updated .gitignore to exclude .svelte-kit
- Added utils.d.ts type definitions for tests
- Replaced deprecated ComponentType with Component in Icon and Input
- Fixed Checkbox indeterminate state visual rendering
- Added Checkbox active/hover styles
- Updated Checkbox props to be manually controlled for better state handling
- Updated Checkbox tests to use bun:test and correct matchers
- Exported CheckboxProps type
- Add ce- prefix to all CSS classes for bits-ui components
- Export Props from module script in all primitives
- Update stories to use satisfies Meta<Props> pattern
- Fix deprecated svelte:component with dynamic components
- Replace deprecated AlertTriangle with TriangleAlert
- Change Toast tests from vitest to bun:test
- Remove deprecated template-based Storybook stories

Components updated:
- Button, Checkbox, Input, Select, SkipLink, Spinner, StatusDot, Toast
- Icon already had correct pattern
- Toggle: Add ce- prefix, :global(), fix button reset styles
- Tooltip: Add ce- prefix, :global(), Tooltip.Provider, fix button reset
- Toast: Fix store subscription bug, add story wrappers
- All primitives now export Props from module script
- All bits-ui elements wrapped in :global() with button resets

Components finalized: Toggle, Tooltip, Toast
Tokens:
- Convert spacing from px to rem for accessibility
- Add --color-bg-control for form controls
- Add --color-text-inverse for text on colored backgrounds
- Add --color-neutral for neutral status indicators
- Add --shadow-color token for theme customization

Primitives:
- Convert all component dimensions from px to rem
- Replace hardcoded 'white' with --color-text-inverse
- Fix dark mode visibility for checkbox, toggle, tooltip
- Keep 1px/2px borders and outlines as px (crisp rendering)

Storybook:
- Sync data-theme attribute with background selection
- Implemented FocusTrap composite with interactive story and tests.
- Refactored ThemeToggle stories for strict type safety.
- Updated Input primitive to correctly extend HTML attributes.
- Updated Button primitive to support class merging and arbitrary props.
- Added reset.css for global box-sizing fix.
- Added missing spacing tokens.
- Implemented LiveRegion composite with aria-live support.
- Added LiveRegion stories and unit tests.
- Fixed Input primitive to support two-way binding using $bindable().
- Implemented EmptyState dumb component.
- Added comprehensive stories (Default, WithAction, TextOnly).
- Added unit tests for property rendering.
- Implemented ExpandCollapse with controlled state and slide transitions.
- Implemented CopyButton with clipboard logic and 2s feedback state.
- Added Storybook stories and unit tests for both components.
- Fixed Svelte 5 lint warnings in ExpandCollapse story-wrapper.
- Created ToolCard component to display MCP tool metadata.
- Added support for annotation badges (destructive, read-only, open-world).
- Implemented responsive truncation for long descriptions.
- Added Storybook stories and unit tests.
- Updated ToolCard to use correct Badge variant 'error' (fixing type mismatch).
- Verified ToolCard with unit tests and Storybook.
- Created ContextMenu component wrapping Bits UI's native ContextMenu.
- Added support for custom menu items with icons and danger variants.
- Implemented interactive story wrapper and comprehensive unit tests.
- Fixed Lucide icon type mismatch and Storybook typing issues.
- Added --color-bg-surface to colors.css and theme.css.
- Fixed translucency in ContextMenu, ToolCard, and EmptyState components.
- Verified opacity in Storybook.
- Created ConnectionStatus component to show WebSocket state.
- Supports disconnected, connecting, connected, reconnecting, and error states.
- Implemented full and compact (icon-only with tooltip) modes.
- Added Storybook stories and unit tests.
- SessionCard: Displays session summary with status dot and badge.
- CreateSessionForm: Form for creating new MCP sessions.
- PairIndicator: Shows request/response pairing state.
- LiveUpdateMarker: Floating button for new message count.
- ScrollToLatest: Auto-scroll toggle with scroll-to-bottom button.
- Fixed test selectors to use container.querySelector for isolation.
- Added DetailPanel component with metadata grid and message details
- Added JSONInspector for recursive content viewing
- Fixed Button icon type to support lucide-svelte
- Updated reset.css with global font settings
- Added StatsPanel for visualizing traffic statistics
- Support for loading skeletons and number formatting
- Verified with unit tests
- Added SearchHighlight for safe text matching
- Added FilterPanel for traffic filtering
- Added SearchBar with navigation
- Added MethodBreakdown visualization
- All components verified with tests
@livelifelively livelifelively merged commit 1774e22 into master Jan 22, 2026
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant