# Roman Chursin (RChursin_)

> Roman Chursin is a software engineer who builds software with AI agents and makes sure it works. The site is built with RChursin_, the component library it documents: every part on these pages runs here.

## Pages
- [Home](https://www.romanchursin.dev/): who Roman is and what he builds
- [Brand](https://www.romanchursin.dev/brand): the RChursin_ component library, every part with a live example and the code that runs it

## Foundations

- [Colour](https://www.romanchursin.dev/brand/foundations/color): Twelve semantic greys that switch with the theme, and six fixed brand values for the logo and brand panels.
- [Typography](https://www.romanchursin.dev/brand/foundations/typography): Geist for the interface and Geist Mono for labels, code and the wordmark, in the sizes the site and the kit really use.
- [Shape & depth](https://www.romanchursin.dev/brand/foundations/shape-depth): Corner sizes from 4 to 24 px plus the 22 px app-icon tile, four elevation steps, and the brand’s Lift shadow.
- [Focus](https://www.romanchursin.dev/brand/foundations/focus): A 2px ring in the text colour, outside or inside the edge, plus the lit-metal buttons’ own ring. Keyboard only.
- [Dark mode](https://www.romanchursin.dev/brand/foundations/dark-mode): One class flips every token: on <html> for the whole page, or on any wrapper for one part of it.
- [Fills & patterns](https://www.romanchursin.dev/brand/foundations/fills): Solid, hatched, outline and dashed: the second “colour” of a black-and-white interface, plus the dot-grid canvas.

## Brand

- [Logo](https://www.romanchursin.dev/brand/brand/logo): The 09 Frame mark and the RChursin_ wordmark in four lockups, drawn as one SVG that takes the text colour.
- [Frame corners](https://www.romanchursin.dev/brand/brand/frame-corners): The logo’s two shapes as a viewfinder: an L bottom-left and a square top-right, drawn around any box.
- [Cursor underscore](https://www.romanchursin.dev/brand/brand/cursor): The underscore in RChursin_ is a cursor: it blinks on hover and focus, or a few times when it appears.

## Finishing layer

- [Metal finish](https://www.romanchursin.dev/brand/finishing/metal): The lit-metal button finish as plain classes: graphite, pearl, ghost, outline and inverse, on any element you press.
- [Cards & elevation](https://www.romanchursin.dev/brand/finishing/surfaces): Cards on one four-step elevation scale: lux-card, a lower lux-card-flat, lux-lift on hover and lux-float for overlays.
- [Hairlines](https://www.romanchursin.dev/brand/finishing/hairlines): A 1px rule that fades out at both ends, and a lit top edge for dark panels.
- [Light & grain](https://www.romanchursin.dev/brand/finishing/light-grain): A ceiling halo for heroes, film grain for flat grounds, a fade for product shots and a shadow that follows torn paper.
- [Pointer light](https://www.romanchursin.dev/brand/finishing/pointer-light): A soft pool of light that follows the mouse over cards, and a lens that shows a brighter copy of a background.
- [Scroll arrivals](https://www.romanchursin.dev/brand/finishing/arrivals): Content that fades and rises in as it scrolls into view, bars that grow, stamps that land and a frame that draws itself.
- [Glass header](https://www.romanchursin.dev/brand/finishing/glass-header): A header that is clear at the top of the page and frosts over the content once the page scrolls.
- [Easing & transitions](https://www.romanchursin.dev/brand/finishing/easing): Four motion curves, a soft cross-fade for view changes, a reduced-motion hook and disclosures that ease open.
- [Count up](https://www.romanchursin.dev/brand/finishing/count-up): A number that counts up once, the first time it scrolls into view. Screen readers get the final value straight away.
- [Drawn underlines](https://www.romanchursin.dev/brand/finishing/drawn-links): Link underlines that draw themselves in on hover and focus, or slide away from links that are underlined at rest.
- [Backgrounds](https://www.romanchursin.dev/brand/finishing/backgrounds): Dot and grid patterns, masks and vignettes to fade them, a retro floor grid, a spotlight, a lamp and a softly lit card.
- [Animated accents](https://www.romanchursin.dev/brand/finishing/accents): Shiny and gradient text, a beam round a border, a shine border, ripples, lines that type in and a scanning column.

## Actions

- [Button](https://www.romanchursin.dev/brand/actions/button): The lit-metal button in five finishes and five sizes, with icons, a loading state and shortcut hints.
- [Icon button](https://www.romanchursin.dev/brand/actions/icon-button): A square button with just an icon. The label is required: it is the accessible name and the tooltip.
- [Key caps](https://www.romanchursin.dev/brand/actions/keys): Keyboard keys cut from the same metal as the buttons, and shortcuts written as key caps.
- [Button link](https://www.romanchursin.dev/brand/actions/button-link): A link cut from the same lit metal as Button, for calls to action that go somewhere.
- [Copy button](https://www.romanchursin.dev/brand/actions/copy-button): Copy text to the clipboard with one press: a pearl button that says “Copied”, a quiet one for code, and the helper under both.
- [Effect buttons](https://www.romanchursin.dev/brand/actions/effect-buttons): A shimmer button, a shiny announcement pill and a glowing border, from the launch-page screens.

## Inputs

- [Field](https://www.romanchursin.dev/brand/inputs/field): Label above, hint under it, error in words between the hint and the control, with the ids and aria wiring done for you.
- [Text input](https://www.romanchursin.dev/brand/inputs/text-input): A one-line field in the inset lux-input finish, in two sizes, with an optional icon inside and a slot on the right.
- [Textarea](https://www.romanchursin.dev/brand/inputs/textarea): A multi-line field that grows with what is typed, up to a maximum, then scrolls.
- [Select](https://www.romanchursin.dev/brand/inputs/select): The browser’s own select in the field finish, with an up-down chevron, so phones show their own picker and the keys work for free.
- [Checkbox](https://www.romanchursin.dev/brand/inputs/checkbox): A labelled checkbox drawn as the brand square with a cut-in tick, with a hint and a mixed state.
- [Radio group](https://www.romanchursin.dev/brand/inputs/radio-group): A fieldset of native radios, each a ring with the brand square inside when chosen, with optional hints.
- [Radio cards](https://www.romanchursin.dev/brand/inputs/radio-cards): A radio group drawn as cards, for choices that each need a sentence, where the whole card is the target.
- [Switch](https://www.romanchursin.dev/brand/inputs/switch): An on/off switch for settings that apply at once: label and hint on the left, a sunken track with a pearl thumb on the right.
- [Segmented control](https://www.romanchursin.dev/brand/inputs/segmented): A radio group drawn as one strip, with a lit pill that glides to the choice and arrow keys that move and choose.
- [Range slider](https://www.romanchursin.dev/brand/inputs/range): The lux-range finish for a native range input: a hairline track that fills to the thumb and a lit pearl thumb.
- [Password input](https://www.romanchursin.dev/brand/inputs/password-input): A password field with a Show / Hide button and a caps-lock warning, where paste and password managers always work.
- [One-time code](https://www.romanchursin.dev/brand/inputs/otp-input): A one-time code field: one real input painted as six slots, so paste, autofill and screen readers just work.
- [Number field](https://www.romanchursin.dev/brand/inputs/number-field): A number field with − and + steppers, following the APG spinbutton: arrows step, Page keys step ×10, Home and End jump.
- [Combobox](https://www.romanchursin.dev/brand/inputs/combobox): A text field that suggests options as you type, for long lists like time zones or skills (APG list autocomplete).
- [File drop](https://www.romanchursin.dev/brand/inputs/file-drop): A file picker whose real control is a “Choose file” button; dropping a file on the zone is a shortcut, never the only way.
- [Character count](https://www.romanchursin.dev/brand/inputs/character-count): A textarea that counts down to its limit, GOV.UK style: it never cuts text off, and speaks the count when typing pauses.
- [Picker](https://www.romanchursin.dev/brand/inputs/picker): A filterable list of options, on its own or in a popover: type to filter, arrows and Enter to choose, or 1–9 to pick at once.
- [Property pickers](https://www.romanchursin.dev/brand/inputs/property-pickers): The Tasks tool’s pickers for status, priority, assignee, labels and estimate, as a chip, a row or an icon.

## Dates & time

- [Date picker](https://www.romanchursin.dev/brand/dates-time/date-picker): A field that shows the chosen date and opens a month grid in a popover. Values are ISO date strings.
- [Range picker](https://www.romanchursin.dev/brand/dates-time/range-picker): A start and end date for report filters, with analytics presets, typed ends and two linked months.
- [Date field](https://www.romanchursin.dev/brand/dates-time/date-field): A date typed in segments in the locale’s order, with a calendar button beside it. Paste "2026-10-21" to fill it.
- [Memorable date](https://www.romanchursin.dev/brand/dates-time/memorable-date): Day, month and year as three plain fields (the GOV.UK date input) for birthdays and dates people know by heart.
- [Time select](https://www.romanchursin.dev/brand/dates-time/time-select): A time of day from a list in 15-minute steps, in the locale’s hour cycle. End-time lists show each option’s length.
- [Calendar grid](https://www.romanchursin.dev/brand/dates-time/calendar-grid): One month as an ARIA grid with the APG date-picker keys. Every picker in the kit is built on it.
- [Mini calendar](https://www.romanchursin.dev/brand/dates-time/mini-calendar): A small month for sidebars and widgets, with up to three squares under days that have events.
- [Due date](https://www.romanchursin.dev/brand/dates-time/due-date): Relative due dates for task rows (“Today”, “Fri”, “Oct 30”) with overdue shown by shape, and a picker with quick choices.
- [Time display](https://www.romanchursin.dev/brand/dates-time/time-display): The clock face: Geist Mono digits in fixed cells, lit like the buttons, still or live, with a spoken form for screen readers.
- [Stopwatch](https://www.romanchursin.dev/brand/dates-time/stopwatch): A stopwatch with laps: a square that fills once a minute, hundredths drawn per frame, and Undo after a reset.
- [Countdown](https://www.romanchursin.dev/brand/dates-time/countdown): A countdown with presets or a typed length, +1 min while it runs, a closing square and an honest finished banner.
- [Quick capture](https://www.romanchursin.dev/brand/dates-time/quick-capture): One field that reads a date, time or repeat out of plain English and shows what it understood before you save.

## Overlays

- [Dialog](https://www.romanchursin.dev/brand/overlays/dialog): A modal on the native <dialog> element: the page behind goes inert, Esc closes it, and focus goes back to what opened it.
- [Popover](https://www.romanchursin.dev/brand/overlays/popover): A panel beside its trigger, on the native popover API: never clipped, closed by Esc or a click outside, and it hands focus back.
- [Menu](https://www.romanchursin.dev/brand/overlays/menu): A menu button with actions, checkbox and radio items, group labels, shortcut hints and type-ahead, in a popover beside its trigger.
- [Tooltip](https://www.romanchursin.dev/brand/overlays/tooltip): A few words on hover (after a short wait) or keyboard focus, in the top layer. Esc hides it. Best for naming icon buttons.

## Feedback

- [Toast](https://www.romanchursin.dev/brand/feedback/toast): Short past-tense results with at most one action, like “Run archived · Undo”. Read out politely; they wait while hovered or focused.
- [Spinner](https://www.romanchursin.dev/brand/feedback/spinner): The loader icon turning once every 900 ms, only when motion is allowed. Decorative next to words; give it a label when it stands alone.
- [Empty state](https://www.romanchursin.dev/brand/feedback/empty-state): One heading that says what is missing, one line that says why, and one way forward, centred under an outlined icon tile.
- [Error summary](https://www.romanchursin.dev/brand/feedback/error-summary): A “There is a problem” box at the top of a form that takes focus after a failed submit and links each message to its field.
- [Screen-reader announcements](https://www.romanchursin.dev/brand/feedback/announcer): useAnnounce makes screen readers say a result like “Moved to Done”, politely or, for urgent things, at once. Nothing shows on screen.
- [Progress square](https://www.romanchursin.dev/brand/feedback/progress-square): Progress drawn as the brand’s square, closing clockwise from the top centre, and a row of squares for a set of focus sessions.
- [Banners](https://www.romanchursin.dev/brand/feedback/banners): In-page messages for things that happen on their own: a timer that finished, a reminder that came due.
- [Inline confirm](https://www.romanchursin.dev/brand/feedback/inline-confirm): A question asked in place of the buttons, never with window.confirm: “Abandon this session?” with Keep going first.
- [Autosave status](https://www.romanchursin.dev/brand/feedback/autosave-status): A quiet line under an editor: “Unsaved changes”, “Saving…”, “Saved · 2 min ago”, and what happens next when a save can’t go through.

## Data display

- [Avatar](https://www.romanchursin.dev/brand/data-display/avatar): Initials on a softened grey square, in five sizes, and a stack that folds extra people into a count.
- [Chip](https://www.romanchursin.dev/brand/data-display/chip): A small label on a thing, in four shapes (outline, solid, muted, dashed), with an optional icon and remove button.
- [Code block](https://www.romanchursin.dev/brand/data-display/code-block): Highlighted code in five grey roles, with line numbers, picked-out lines, a Wrap toggle, Copy, and long files folded.
- [Status & priority](https://www.romanchursin.dev/brand/data-display/status-priority): Task glyphs told apart by shape: a square that fills as work moves on, priority bars, assignee, labels and estimate.
- [Verdict badge](https://www.romanchursin.dev/brand/data-display/verdict-badge): Keep, fix, merge or cut: a mono badge where each verdict has its own shape, and the word is always there.
- [Sample badge](https://www.romanchursin.dev/brand/data-display/sample-badge): A small “Sample data” marker for anything that shows invented records or numbers.
- [Key table](https://www.romanchursin.dev/brand/data-display/key-table): Keyboard shortcuts as a two-column table: key caps on the left, what they do on the right.
- [Rules list](https://www.romanchursin.dev/brand/data-display/rules): A numbered grid of short principles (01, 02, 03), each a title and one or two lines.
- [Do and don’t](https://www.romanchursin.dev/brand/data-display/do-dont): A do / don’t pair: two cards side by side with a short note each, told apart by icon, word and a dashed edge.
- [Weekly chart](https://www.romanchursin.dev/brand/data-display/weekly-chart): Focused time over the last seven days as square-topped bars to scale, with a real table underneath for screen readers.
- [Laps table](https://www.romanchursin.dev/brand/data-display/laps-table): The Stopwatch’s table on its own: lap, lap time and total, newest first, with the fastest and slowest named.
- [Agenda list](https://www.romanchursin.dev/brand/data-display/agenda-list): Events grouped by day under headings that can stick, earliest first, each with its time, calendar pattern and people.
- [Event blocks](https://www.romanchursin.dev/brand/data-display/event-blocks): How an event looks in each calendar view: a block in the week grid, a bar for all-day, a chip in a month cell.

## Navigation

- [Tabs](https://www.romanchursin.dev/brand/navigation/tabs): Switch between views of the same thing. A lit pill or a hairline glides to the selected tab; arrow keys move between tabs.
- [Link & router](https://www.romanchursin.dev/brand/navigation/link): A small router with no dependencies: Link changes page without a reload, useRouter says where you are, in history or hash mode.
- [Command palette](https://www.romanchursin.dev/brand/navigation/command-palette): One search field over every page and action, opened with ⌘K, grouped and ranked, run with Enter.
- [Site header](https://www.romanchursin.dev/brand/navigation/site-header): The home pages’ sticky header in three styles: a full bar, a floating glass pill and a minimal mono row.
- [Site footer](https://www.romanchursin.dev/brand/navigation/site-footer): The home pages’ footer: three link columns with a cropped wordmark, or one simple row.
- [Skip link](https://www.romanchursin.dev/brand/navigation/skip-link): A “Skip to content” link that stays hidden until the first Tab, then jumps past the header to #main.

## Layout

- [Container](https://www.romanchursin.dev/brand/layout/container): A centred page column with a max width and side gutters. Container serves the home pages, Wrap the kit pages.
- [Page intro](https://www.romanchursin.dev/brand/layout/page-intro): The top of a kit page: an eyebrow, the page’s h1, a lead and a row of facts, over film grain and a soft ceiling light.
- [Section](https://www.romanchursin.dev/brand/layout/section): A page band with an eyebrow, an h2 and a lead, on a plain or sunken ground. SectionHeading is the heading block alone.
- [Specimen](https://www.romanchursin.dev/brand/layout/specimen): One part on a quiet raised card. Specimen captions it underneath; Figure titles it on top.
- [Separator](https://www.romanchursin.dev/brand/layout/separator): A 1 pixel line between groups, horizontal or vertical, announced as a separator.
- [App window](https://www.romanchursin.dev/brand/layout/app-window): The RChursin_ app frame: a sidebar with the tools, a title row with a toolbar, and your tool in the body.

## Page sections

- [Terminal](https://www.romanchursin.dev/brand/sections/terminal): A dark terminal window with sample scan output: usage bars, a context cost and a verdict per item, printed line by line.
- [Receipt](https://www.romanchursin.dev/brand/sections/receipt): A paper receipt for one agent task: torn edges, dotted leaders, a total, and a FIX stamp that lands.
- [Dashboard mock](https://www.romanchursin.dev/brand/sections/dashboard-mock): A still picture of the product: four headline numbers, a bar list of skill runs and a ledger with verdicts, on sample data.
- [Cut calculator](https://www.romanchursin.dev/brand/sections/cut-calculator): Two sliders estimate the tokens idle skills add to every turn, beside a grid with one square per skill.
- [Run wall](https://www.romanchursin.dev/brand/sections/run-wall): A month of agent runs as a wall of squares, with a sweeping day highlight you can pause.
- [FAQ](https://www.romanchursin.dev/brand/sections/faq): Questions and answers on native <details>: one answer open at a time, with no JavaScript required.
- [Command line](https://www.romanchursin.dev/brand/sections/command-line): A one-line shell command with a $ prompt and a Copy command button.

## Auth & forms

- [Sign-in flow](https://www.romanchursin.dev/brand/auth/sign-in-flow): The whole front door in one component: email first, password or passkey, GitHub or Google, sign-up with a code, and recovery.
- [Auth layout](https://www.romanchursin.dev/brand/auth/auth-layout): The frame for every sign-in page: a dark brand panel when there is room, one calm form column, the logo on top and legal links below.
- [Social buttons](https://www.romanchursin.dev/brand/auth/social-buttons): “Continue with GitHub” and “Continue with Google” at equal weight, with a waiting state while the provider answers.
- [Password strength](https://www.romanchursin.dev/brand/auth/password-strength): An advisory meter that guesses like an attacker, plus the blocklist check. Four grey segments and a word; it never blocks.
- [Account settings](https://www.romanchursin.dev/brand/auth/account-settings): The in-app settings form: profile with a picture and time zone, a password change, passkeys and sessions, with an error summary on save.
- [Form toolkit](https://www.romanchursin.dev/brand/auth/form-toolkit): useForm for values, errors and validation timing, plus the checks and GOV.UK-style messages every form in the kit shares.
- [Contact form](https://www.romanchursin.dev/brand/auth/contact-form): Checks like GOV.UK, keeps every word through a failed send, and sends through your function, Formspree, Web3Forms or no backend at all.

## Tools

- [Tasks](https://www.romanchursin.dev/brand/tools/tasks-app): The whole task tracker: a keyboard-first list and board, a detail view, bulk edits, and undo for every change.
- [Task list](https://www.romanchursin.dev/brand/tools/task-list): The task list as a data grid: one Tab stop, arrows to move, pickers in the cells, and groups that collapse.
- [Task board](https://www.romanchursin.dev/brand/tools/task-board): A column per status, with cards moved by dragging, by keys on their grip or from a menu, and every move announced.
- [Task detail](https://www.romanchursin.dev/brand/tools/task-detail): Everything about one task: an editable title and description, and each property as a picker button.
- [Create task](https://www.romanchursin.dev/brand/tools/create-task): The New task dialog, with a draft that survives Esc, and the dialog that lists every Tasks shortcut.
- [Bulk actions bar](https://www.romanchursin.dev/brand/tools/bulk-bar): A dark floating toolbar for a selection: the count, clear, five property pickers and delete.
- [Filter bar](https://www.romanchursin.dev/brand/tools/filter-bar): Live search and multi-select quick filters for tasks, and the Display popover for grouping, ordering and properties.
- [Tasks widget](https://www.romanchursin.dev/brand/tools/tasks-widget): Your open tasks for a dashboard, soonest due first: tick one to finish it, or change its status from its icon.
- [Calendar](https://www.romanchursin.dev/brand/tools/calendar-app): The whole calendar: week, day, month and agenda views, calendars told apart by pattern, and create, edit and delete.
- [Week and day view](https://www.romanchursin.dev/brand/tools/time-grid): Days across, hours down: a time grid with an all-day row, overlaps side by side, and a line at the current time.
- [Month view](https://www.romanchursin.dev/brand/tools/month-view): The month as a keyboard grid: up to three events a day, “+N more” for the rest, and pattern squares on phones.
- [Agenda widget](https://www.romanchursin.dev/brand/tools/agenda-widget): A mini month with event markers and the chosen day’s agenda, for a dashboard.
- [Event dialog](https://www.romanchursin.dev/brand/tools/event-dialog): The create and edit form for an event, in a dialog, and the details popover that leads to it.
- [Timer](https://www.romanchursin.dev/brand/tools/timer-app): The Focus screen: a focus session, a stopwatch and a countdown one switch apart, with the time log beside them.
- [Focus session](https://www.romanchursin.dev/brand/tools/focus-session): A Pomodoro session: choose a task, say what you’ll finish, then focus and break in phases, with overtime and an inline Abandon.
- [Focus widget](https://www.romanchursin.dev/brand/tools/focus-widget): The focus session for a dashboard: choose a task, start or pause, see the time left in the square and today’s total.
- [Time log](https://www.romanchursin.dev/brand/tools/time-log): What was focused on, by day with daily totals and a seven-day chart, with time added by hand and Undo on delete.
- [Notes](https://www.romanchursin.dev/brand/tools/notes-app): Notes and reminders in one window: a searchable list beside a block editor, and reminders typed in plain words.
- [Note editor](https://www.romanchursin.dev/brand/tools/note-editor): A note’s title, a Markdown block body, tags, word count and an honest save status; it saves 800 ms after typing stops.
- [Reminders](https://www.romanchursin.dev/brand/tools/reminders): Reminders grouped from Overdue to Done, checked off, snoozed or deleted with Undo, plus a compact widget for a dashboard.

## Icons

- [Icon](https://www.romanchursin.dev/brand/icons/icon): One component for all 161 icons: a 24-pixel grid, a 1.5 stroke, square ends, coloured by the text around it.
- [Icon browser](https://www.romanchursin.dev/brand/icons/icon-browser): Search all 161 icons by name or use, check them at 16 to 24 pixels, and copy one as SVG, JSX or its name.
- [Icon guidelines](https://www.romanchursin.dev/brand/icons/icon-guidelines): How the icons are built, how status and priority are drawn, how to use icons, and how the set ships, as live sections.
- [Screen icons](https://www.romanchursin.dev/brand/icons/screen-icons): Fifteen small round-capped icons used by the library-style screens, each its own component.

## Templates

- [Control Room](https://www.romanchursin.dev/brand/templates/control-room): A home page where the product is the hero: a live dashboard shot, a bento of features, a run wall and an FAQ.
- [One Command](https://www.romanchursin.dev/brand/templates/one-command): A developer-first home page: one command to copy, a terminal that types out the scan, a sample report and pricing.
- [The Receipt](https://www.romanchursin.dev/brand/templates/the-receipt): An editorial home page about cost: a printed receipt for agent work, figures that count up, a ledger and a cost chart.
- [The Frame](https://www.romanchursin.dev/brand/templates/the-frame): The logo becomes a viewfinder: frame the few skills that work and cut the rest, with an estimator and a floating header.
- [The Details](https://www.romanchursin.dev/brand/templates/details-page): A living spec of the finishing layer: the metal button built up layer by layer, surfaces, controls, motion, type and moments.
- [Product kit overview](https://www.romanchursin.dev/brand/templates/kit-overview): The product kit’s front page: a Today screen built from every tool’s widget, a map of the kits and the shared parts.
- [Tailwind Plus screens](https://www.romanchursin.dev/brand/templates/tailwind-plus-screens): Five screens in the Tailwind Plus style: a centred hero, a sidebar app shell, a sign-in form, a header and a loading screen.
- [shadcn screens](https://www.romanchursin.dev/brand/templates/shadcn-screens): Five screens in the shadcn/ui style: a hero, an inset sidebar shell, a login card, a site header and a loading screen.
- [Magic UI screens](https://www.romanchursin.dev/brand/templates/magic-ui-screens): Five screens with Magic UI’s effects: retro grid, border beam, shiny and gradient text, shimmer buttons, ripples and a dock.
- [Aceternity screens](https://www.romanchursin.dev/brand/templates/aceternity-screens): Five screens in the Aceternity style: a spotlight hero, a borderless sidebar, a signup-style form, a floating navbar and a lamp.

## Hooks & utilities

- [useHotkeys](https://www.romanchursin.dev/brand/hooks/use-hotkeys): Single-key and modifier shortcuts, Linear style, that wait while you type and can be scoped to one part of the page.
- [usePersistentState](https://www.romanchursin.dev/brand/hooks/use-persistent-state): useState that survives a reload, stays in step across components and tabs, and never breaks when storage is blocked.
- [Date helpers](https://www.romanchursin.dev/brand/hooks/dates): Small date maths and Intl formatting on plain Dates: month grids, week starts from the locale, ISO weeks, relative days, durations.
- [ISO dates](https://www.romanchursin.dev/brand/hooks/iso-dates): Dates as "2026-10-12" strings: strict and forgiving parsers, range labels with a spoken form, and the date grid’s arrow-key model.
- [highlight](https://www.romanchursin.dev/brand/hooks/highlight): A small, dependency-free syntax highlighter for TSX, TS, CSS, HTML, shell and JSON, drawn in greys, weight and tint instead of colour.
- [cx](https://www.romanchursin.dev/brand/hooks/cx): Joins class names and skips anything falsy, so each condition sits next to the classes it adds.
- [useMediaQuery & useNow](https://www.romanchursin.dev/brand/hooks/media-and-time): Two small hooks from the calendar: a media query as a boolean, and the current time that re-renders on each whole minute or second.
- [Timer engine](https://www.romanchursin.dev/brand/hooks/timer-engine): Clocks that keep honest time: stopwatch and countdown hooks built on timestamps, one shared frame loop, and duration parsing.
- [Chime](https://www.romanchursin.dev/brand/hooks/chime): A soft two-note chime made with Web Audio: arm it inside a click, then play it later, even from a background tab.
- [Markdown blocks](https://www.romanchursin.dev/brand/hooks/markdown): Turns a note’s Markdown into flat blocks (headings, lists, checklists, quotes) and back, so notes stay plain Markdown in storage.
- [Event layout](https://www.romanchursin.dev/brand/hooks/event-layout): The calendar’s layout maths: overlapping events side by side, all-day bars stacked into lanes, and the sentence a screen reader hears.
- [Copy & download](https://www.romanchursin.dev/brand/hooks/copy-download): Copy text with a toast and a fallback when the clipboard is blocked, and save text as a file.