kinu

Summary Two rounds of work that push kinu further onto native DOM and CSS features, so behaviour that competitors reimplement in JavaScript comes from the browser instead. Round 1 was the styling layer (squircles, materials, elevation, scroll-driven effects). Round 2 went after the platform layer — the overlay engine, the `@supportsz-index: 1000divz-indexshowModal()Dialogclosedby="closerequest"mobile="drawer"beforetogglebackdrop-filterdisplay: noneoverflowz-index.show()command="toggle-popover"closedialog.show()preventDefaultclosedby="any"appearance: base-select::checkmark@starting-stylecorner-shape--k-radius-1..4--k-corner-radius@supports (corner-shape: squircle)calc(var(--k-radius) 1.8408964)1 + 2^(-1/4)--k-radiuscorner-shape--k-shadow-1/2/3--k-shadow-hslprefers-contrast--k-backdrop-blurnoneprefers-reduced-transparencyforced-colors::scroll-markertext-wrap: balanceprettytext-box: trim-bothscrollbar-color::-webkit-scrollbarscrollbar-gutter: stablescroll-state()position-visibilityvirtualcontent-visibilityinterestforpopover="hint":hoveroverflow:is([open], :popover-open)[open]--k-radius--k-backdrop-blurnonemobile="drawer"--modalshowModal()[open]closedbySheetContent[k="sheet-panel"]closedby="any"k-swipe-fadebackdrop-filter--k-radius-1..4--k-corner-radius--k-shadow-1/2/3base.css::selection--k-selection-bg--k-scrollbar-thumb0.75rem0.5625remmainpnpm buildpnpm tsccommands.ts:popover-openbase-selectmobile="drawer"[open]:modal--swipe: y[k="sheet-panel"]closedbynoneprefers-reduced-transparencycorner-shape--k-radius--k-shadow---k-selection-bg` overrides still win. No component exceeds 45% of its short side in any mode. 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