Changelog

Foundation tokens: ink levels (100/62/40/24) replace eleven ad-hoc text opacities; edge weights (70/50/30) replace four border treatments; 4px radius everywhere; one signature easing with four tokenized durations

Type scale: micro 10px / meta 11px / ui 12px / body 13px / title 14px — nothing in the UI renders below 10px anymore (specimen footers were 7.5px)

Roomier inspector: desktop split is now sidebar 2 / gallery 6 / panel 4 — specimens, palettes, and asset grids finally breathe; cards are wider at typical desktop widths (2-up, 3-up on very large screens)

Press / to focus search (keycap hint in the field); panel load failures now offer Retry

Panel tabs: sliding active underline (shared layout animation), legible 10px labels

One spinner, one copy-feedback pattern (in-place check morph, no layout shift — export buttons no longer jump), one section-label treatment, one focus ring

Calmer motion: scale-pop removed from panel content, card hover eased to 1.015 on the signature curve, all durations tokenized

Skeleton cards now match real card geometry exactly; mobile filter pills returned to library materials (mono, tabular counts); sheet respects safe-area

Presentation mode: white-alpha steps mirroring the ink system, keycap hints for pointer users, tokenized progress motion

Type specimens: fade-in-up keyframe was never defined in globals — specimens could render invisible; now defined

viewport themeColor now matches the real background tokens (#f7f7f5 / #0e0e0e)

Removed dead components theme-toggle.tsx and typography-display.tsx; duplicate Google Fonts link on specimens

Design cards: subtler hover scale (1.02×), visit link replaced with a blurred pill that reveals on hover, metadata section has cleaner hierarchy — title in tight tracking, domain in 40% opacity mono, industry in uppercase caps

Header title: "Hitman's Library" split so the apostrophe-s renders in font-light — intentional weight contrast, not a typo

Sidebar: active category now uses bg-muted/70 instead of full bg-foreground inversion — less aggressive, more editorial

Panel tabs: labels now uppercase with wider letter-spacing, 1.5px border indicator, slightly smaller icons — tighter and more refined

Panel header: hostname uses tighter tracking, industry/tag shows as uppercase badge below

Empty panel state: stale "figma" removed from hint text, type treatment more restrained

Globals: 2.2% SVG fractal noise grain overlay on body — gives all surfaces a material, warm quality instead of flat digital feel

Skeleton cards match the updated 3px border-radius of real cards

Removed Figma tab entirely — panel-tabs, site-detail-panel updated; figma-tab.tsx deleted

Preview tab loading state: clean domain name + three staggered pulsing dots — no screenshot background while the iframe loads. What you see while loading matches what you'll see when it's ready

Preview tab proxy-failed state: domain name + "Live preview unavailable" label + "Open site ↗" CTA. Honest about what's happening instead of silently showing a static screenshot as if it were live

Presentation mode proxy-failed state: subtle dot-grid background, large domain name, industry label, color palette swatches, and a "Visit site ↗" link. Blocked sites now feel like reference cards, not broken frames

Design card selected state: top accent line (2px) appears when a card is active — stronger visual signal that pairs with the brighter border

Design card color swatches are slightly larger (14px) for better readability at a glance

Empty panel state: "Select a site" now shows the list of available tabs (preview · colors · type · assets · figma) as a quiet visual hint of what's inside

Layers button in the Figma tab — opens the site in a capture window using Figma's own publicly-hosted capture.js script (the same tool that powers their AI integrations). Click "Copy to clipboard" in the toolbar that appears, then ⌘V in Figma to get fully editable text, shapes, and layout — not a rasterized PNG

Element selection in capture mode — the capture toolbar lets you select any component (nav, card, pricing section) instead of capturing the full page, so you can pull only what you need into Figma

Presentation mode shows the site thumbnail immediately while the proxy iframe loads — navigating between sites now feels instant instead of flashing to black

Presentation mode: added always-visible prev/next buttons to the bottom HUD — arrows are now immediately discoverable instead of requiring hover over the preview area

Sidebar active category now has a left border accent — clearer visual signal for which filter is selected, especially when multiple industries are active

Panel tabs: active tab label is now font-medium — stronger differentiation from inactive tabs at a glance

Added sandbox attribute to all proxy iframes — the root cause of "Application error" crashes. The proxy serves external sites at the hitmanslibrary.xyz origin, so their JavaScript ran same-origin, letting any unhandled JS error in those sites fire window.onerror on the parent and trigger the Next.js error page. Sandboxing the iframes without allow-same-origin isolates errors to the iframe while keeping postMessage (used for proxy-failed signals and the Figma picker) fully functional.

Presentation mode: minimal overlay HUD — controls float at top-right and fade in after a beat so the first thing you see is the site, not chrome

Presentation mode: nav arrows appear only on hover over the preview area, keeping the experience immersive when you're just watching

Presentation mode: thin animated progress bar at the very top shows your position across the full collection at a glance

Presentation mode: bottom HUD shows domain, industry, counter, and color palette in one compact row instead of two separate top/bottom bars

Presentation mode: info row slides in the direction of navigation — left when going back, right when going forward — giving a physical sense of movement

Presentation mode: swipe left/right to navigate on touch devices — works on any phone or tablet without tapping arrows

Header icon buttons increased from 32px to 36px — easier to tap accurately on touch screens

Mobile category filter pills increased from 28px to 40px height — were consistently too small to tap without mis-tapping adjacent pill

Sidebar filter rows increased to 36px — matches minimum recommended touch target for dense lists

Detail panel action buttons (re-extract, close) increased from 32px to 36px

Panel tabs increased from 40px to 44px height — meets Apple HIG minimum touch target recommendation

Color copy button expanded to 28px minimum — was previously a 12px hit target from a 4px padding box

Type specimen action icons (copy, Google Fonts link) increased from 24px to 32px

Figma tab now appears in the detail panel — it was fully implemented but never wired into the panel tabs

Replaced transition-all on all buttons and links with transition-colors — eliminates browser compositing cost across all CSS properties on every click target

Sidebar and mobile filter "All" count now shows the real total (e.g. 177) instead of the current page load (32)

Removed invalid workflow key from next.config.mjs that was generating startup warnings on every dev server boot

Created missing UI components: Label, Select, Badge, Tabs, ScrollArea, Textarea, Slider — many node and panel components were importing these non-existent files

Created missing lib/node-utils module — all node components importing getStatusColor() were silently broken at runtime

Node components now use correct @xyflow/react v12 NodeProps generic — NodeProps<FlowNode<DataType>> instead of NodeProps<DataType>

fetch() timeout option removed — not part of RequestInit; replaced with AbortController signal for proper 8s timeout on URL extraction

motion/react Variants type — spring transition type is now a string literal (as const) so it satisfies AnimationGeneratorType

unknown → ReactNode errors in 6 node files — output conditions now use !! to guarantee boolean before &&

Missing CheckCircle import in excel-parser node

prompt-node onFocus handler accepts SyntheticEvent instead of MouseEvent

Implicit any on Slider onValueChange callbacks — destructured value now typed as number[]

Implicit any on forEach callbacks in browser-extraction.ts — all font string arrays now typed explicitly

Removed unused DesignBrowser component — eliminates dead code and reduces bundle

Type specimen sample text and glyphs now render at correct opacity — was using hsl() around an oklch token which browsers silently ignored

Design cards are now keyboard-navigable — Tab to reach, Enter or Space to open the detail panel

Status colors (success, error, loading) now use design tokens — consistent across nodes, type specimens, figma tab, and changelog

Consolidated to single icon library (@phosphor-icons) — removed lucide-react dependency

Search inputs now have accessible labels for screen readers via aria-label

Filter and sort buttons now announce their active/inactive state to screen readers via aria-pressed

Color swatch copy button now announces its action and value to screen readers

Re-extract button uses aria-label instead of title — now accessible to screen readers and keyboard users

Mobile detail sheet upgraded to native <dialog> with showModal() — gains proper focus trapping, Escape to close, and system backdrop

Presentation mode screenshot alt text now describes the site by name, not just domain

Extracted shared NodeStatus component — eliminates duplicated status icon logic across all node components

Google Fonts stylesheet now only injected once per URL — prevents duplicate network requests when multiple type specimens share a font

Theme toggle button now announces the destination mode ("Switch to dark mode") rather than just "Toggle theme"

Preloader is now hidden from screen readers via aria-hidden — decorative counter is not meaningful content

Preloader setTimeout calls now properly cleaned up on unmount — eliminates potential state updates after component is removed

Color swatches on gallery cards now have role="img" and aria-label with the hex value for screen readers

Replaced all spring/bounce easing (0.34,1.56,0.64,1) with ease-out-expo (0.22,1,0.36,1) — animations feel faster and more intentional

Extracted DesignCard component and getDomain helper to their own files — reduces page.tsx by ~130 lines

Assets tab checkerboard background now uses design tokens — adapts correctly to light and dark mode

Preview tab screenshot image now uses loading="lazy" — deferred until the panel is actually viewed

Re-extract and close icon buttons in the detail panel increased from 28px to 32px for easier touch activation

Package name corrected from "ai-agent-builder" to "hitmans-library"

Figma tab — copy Desktop or Mobile screenshot as a PNG image, paste directly into Figma with ⌘V — no html.to.design plugin required

Sort pills in header — New / Old / A–Z / Top (quality)

Multi-select industry filters — hold multiple categories at once

Card hover reveals a visit ↗ button without opening the detail panel

Tags shown on gallery cards and in the detail panel header

Detail panel hostname is now a direct link to the site

All 177 thumbnails now use captured blob screenshots — eliminates blank cards from rate-limited external screenshot services

Sidebar category counts now match exactly what the gallery shows

Font 404 errors — removed dead @font-face declarations for missing SuisseIntl files

Extraction error UI in Preview tab was never visible due to an impossible condition

Re-extract could crash Colors/Type/Assets tabs by not normalizing null arrays

Quality sort silently fell back to "newest" — now correctly sorts by extracted quality score

SVG assets tab had an XSS vector from inline rendering of raw DB content

Breakpoint selector in Figma tab — switch between Auto / 390 / 768 / 1440px and see the site respond live

Full-page copy — one click captures the entire page as Figma layers, not just a single element

Client-side exception on some sites — API error responses now handled gracefully, no more crash on load

Site cards not visible — gallery query was referencing non-existent DB columns, now uses safe correlated subqueries

Retina screenshots — desktop now captured at 2× DPR, mobile at 3×, with lazy-image scroll-through before capture

Card image hover — CSS transition replaces motion.img for better performance and no layout shift

Element picker — hover any element to highlight it, click to copy directly to Figma

Full-page Figma layers pre-loaded on tab open — copy is instant, no wait

HTML proxy — loads any site inside the panel regardless of X-Frame-Options restrictions

Live preview — embedded iframe replaces static screenshots entirely

Figma tab — dedicated panel tab with auto-capture on first open

Search input in header — search across all sites in real time

Panel header redesigned — compact icon row for visit, re-extract, and close

Preview simplified — responsive iframe with no desktop/mobile toggle needed

Filter effect dep used JSON.stringify on every render — replaced with stable primitives

Copy to Figma — paste any captured site as editable layers directly into Figma

Mobile screenshots alongside desktop — captured at 390×844 during extraction

Desktop / Mobile toggle in the preview tab

Palette export — copy colors as CSS custom properties or Tailwind config in one click

Bulk add — paste multiple URLs at once and watch them process in a live queue

Preloader — 000→100 counter on first visit

HEX and OKLCH values are now separately copyable from the colors tab

Full gallery layout redesign — cleaner grid, tighter type, better dark mode

Subtle sound effects on copy and successful extraction

Admin CMS — passcode protection and one-click duplicate removal

Admin page was unscrollable due to a global overflow:hidden — resolved

Skeleton loading on first page load and category filtering

HEX / OKLCH format toggle on the colors tab

Dark / light theme toggle — instant, no flash of wrong theme

Category labels rewritten to better reflect actual design context

Mobile sheet — safe-area insets and 44px touch targets throughout

Prevented scroll chaining between preview panel and page body on mobile

Edge case: achromatic and scientific-notation OKLCH values now parse correctly

Live website screenshots displayed on every design card

Switched to a reliable headless screenshot pipeline after testing multiple providers

Copy feedback on color swatches — animated toast on click

OG image and social meta for sharing the library

Microinteractions across the UI following Emil Kowalski's principles

Color palette extraction — brand colors with OKLCH values

Typography extraction — font families, roles, and Google Fonts links

Asset catalog — logos, icons, images discovered per site

Industry categorization for every captured site

Browse and search across your entire design library

Excel import for bulk seeding the library