kinu

Adds native swipe-to-dismiss functionality to Drawer, Sheet, and Sidebar components on touch devices, while preserving the existing transform-based animations on desktop. Summary On touch devices ( and ), the overlay dialogs now become CSS scroll-snap containers where users can swipe the panel away into an empty "rail" to dismiss. The gesture tracking, momentum, and snap-back are all handled by the browser's native scroll behavior. A new helper provides minimal JavaScript control, only nudging the scroller at open/close boundaries. Key Changes New handler (): Registers and listeners that: On open: jumps to the rail edge instantly, then smooth-scrolls the panel into view On scroll settle: closes the dialog if the panel has been flung off-screen Tracks "entering" dialogs to ignore their own entrance scroll as a dismiss Shared swipe CSS primitive (): Provides the scroll-snap container scaffolding for Drawer and Sheet, configurable via CSS variables (, , ) Component updates: Drawer, Sheet, and Sidebar now wrap their content in and divs. On desktop these are inert ( or ); on touch they become the scroll-snap structure Rail tap-to-close: Added click handler in to close dialogs when tapping the rail area Tests and docs**: Added comprehensive test suite for the swipe control plane and updated component documentation Implementation Details The solution uses CSS media queries to opt dialogs in via , enabling zero JavaScript branching in components Desktop behavior is completely unchanged—existing transform animations remain the default The WeakSet prevents the entrance scroll from being misinterpreted as a dismiss gesture All gesture physics (momentum, snap-back) are delegated to the browser's scroll-snap implementation https://claude.ai/code/session_01HVhWBjQBAoNHwgfubbsADb

Summary This PR enhances the design system with modern CSS features and accessibility improvements, including native numeric alignment, scroll-driven animations, squircle corners, material surfaces with backdrop blur, and improved text rendering. Key Changes Base Styling () Added for numeric alignment in tables, pagination, OTP, time pickers, calendars, meters, and kbd elements Applied and theming to all kinu components using the primary color Added branded text selection styling with semi-transparent primary color background Implemented optical text wrapping with for headings and alerts, and for body copy Added squircle corner support via with a curated allow-list of components (excludes pills/circles and thin bars to preserve their shapes) Implemented optical text centering with for label-like controls Added accessibility backstops for increased contrast (stronger shadows) and forced-colors mode (removes shadows and backdrop filters) Shadow System () Introduced a themeable elevation scale with , , and derived from a single hue () Shadows automatically strengthen on dark surfaces for better contrast Replaced hardcoded shadow values across components with CSS variables Material Design Surfaces Added translucent "material" surfaces (macOS/iOS vibrancy style) to floating menus (popovers, dropdowns, context menus, comboboxes), hover cards, and toasts Uses with fallback to solid backgrounds when unsupported or under or preferences Introduced and variables for consistent vibrancy across surfaces Scroll Area () Implemented scroll-driven edge fades using CSS scroll timeline animations Top edge fades in when scrolling away from top; bottom edge fades out at end Uses registered custom properties (, ) for smooth interpolation Gracefully degrades: no mask applied in unsupported browsers, no fade when content doesn't overflow Carousel Enhancements () Added native CSS pagination dots via pseudo-element (progressive enhancement) Dots are themed with primary color highlight for current slide Added for more predictable snapping behavior Updated TypeScript types to include optional prop on Component Updates Updated all component shadow values to use new CSS variables (, , ) Affected components: card, dialog, dropdown-menu, hover-card, popover, sheet, sidebar, toast Configuration Updated to disable rule to support new media queries Notable Implementation Details All new features use queries for progressive enhancement Accessibility preferences (, , ) are respected throughout The shadow system is automatically adjusted for dark color schemes Corner shape can be globally reverted via CSS custom property override Material surfaces gracefully degrade to solid backgrounds in unsupported browsers https://claude.ai/code/session_01F3Jt1mTthRAT6HwyXQqqma

Summary This PR significantly expands kinu's component library with 20+ new components focused on layout primitives, form enhancements, and chat/messaging UI. It also introduces comprehensive benchmarking infrastructure to track per-component bundle size and generates LLM-friendly documentation. Key Changes New Layout & Spacing Components , , , , , — CSS-driven flex/grid layout primitives with token-based gap control — full-page scaffold with header, sidebar, main, footer grid layout — horizontal ordered steps with numbered markers Form & Input Enhancements — native number input with stepper buttons driven by the command bus — password input with show/hide toggle — token/tags input that submits via hidden field — wrapper that runs native validation before submit handler Added CSS styling to , , for post-interaction validation feedback Chat & Messaging Components — chat bubble with author-driven color and alignment — message list that sticks to bottom as new messages arrive — chat input form with autosizing textarea and Enter-to-send — command palette (Dialog + Listbox composition) Utility & Display Components — styled code block and inline code with optional copy button — one-tap copy-to-clipboard with CSS-only copied state — star rating built from native radio group — corner overlay for notification counts or status dots — declarative keyboard shortcut binding to commands Infrastructure & Documentation Per-component bundle size benchmarking () tracking JS, CSS, and total sizes Generated and from component metadata for LLM authoring guidance New foundation docs: and — single source of truth for component contribution process — long-horizon execution plan with stable IDs and status tracking — expanded with platform-gating policy Library Utilities — global hotkey singleton using delegated keydown listener — View Transitions API wrapper with fallback — enhanced command bus for custom commands (, , , ) Styling & Theming Added spacing scale tokens ( through ) for layout primitives New theme files: , Enhanced with forced-colors (Windows High Contrast) support Updated to support attribute for full-bleed page-level alerts Updated sizing defaults and added attribute Tests New test suites: , , , , Notable Implementation Details All new components follow the pattern — thin JSX-to-HTML pass-throughs with attribute styling hooks Layout components use CSS custom properties for gap control, enabling token-based spacing without per-instance JS state Form validation leverages native HTML Constraint Validation API (, , , , etc.) — no validation library Chat components (, , ) compose existing primitives (e.g., wraps ) Hotkey and command systems use delegated event listeners to avoid per-instance overhead Benchmarking splits JS and CSS sizes separately to track the library's performance-first discipline https://claude.ai/code/session_01ScFTtdr4ETgSEGEYG5Hopr