ui

the rules things are arranged by: masonry lanes, justified rows, an ordered bento

how a set of things is arranged, framework-free, whatever the things are. the lanes rule (placeLane) is one decision: the lane whose bottom is highest takes the next item, lanes within a tolerance (a share of the lane width) count as level and fill in reading order after the previous item's, so a level stretch reads 1 2 3 / 4 5 6. the rect engines take aspects and a width and give one rect per item in set order: lanes, decided in lane units so a resize that keeps the lane count moves nothing between lanes and appending never moves an earlier item, and justified rows (loom's greedy fill, last row never stretched), behind one interface; plus the geometry a grid moves by: the window a viewport shows, arrows in set order and within a lane, a page, a marquee's members. pack orders an ordered bento's cards (one cell, two across, two by two) for a grid's auto-placement at two and three columns. placeLane, laneCount, breakRows (the justified rows rule) and pack are self-contained, so arrange inlines them into a page

a site's pages written to the event stream, for visits without cookies

a site's pages in the event stream (the utils contract, Web pages), through ts-utils' logger, shipped to the site's own route (visits' visitsRoute, which composes visits; installed with it). a post shown whole on a page (data-view, a note in a feed) is a view of its page once half on screen. a page shown is a page span, ended when hidden, a new one on a route change (soft, read off the Navigation API, any router), on coming back (resumed) and out of the back/forward cache; its end says which data-section parts came on screen and the load's vitals. a same-origin request is a fetch span under it, its traceparent on the request so the server's spans join the page's trace (log/next). errors are the page's error lines. never written: a query string, a URL, an IP, a user agent, a cookie; nothing stored in the browser, and a browser asking not to be tracked (Global Privacy Control, Do Not Track) gets nothing. PageSensor (mount once, in the root layout), currentPage() for a named event, usePageReport() for what this tab has written

fetch that asks the public internet only, never the server's own network

fetch for addresses a stranger named: http(s) only, every address the host resolves to must be public (no loopback, private, link-local or metadata ranges), checked where the connection resolves the name (undici's lookup, so a rebinding name server gets nowhere), redirects followed by hand and each hop checked again; server-only (node:dns, node:net)

paid and studio items kept encrypted in a public repository, opened at build

A Node script for a public repository that uses @ag paid or studio items: every file whose first line names such an item is committed encrypted beside itself (AES-256-GCM, its path bound in, the plain file's SHA-256 beside so a stale copy shows without the key), its path ignored by git in a block the script keeps, and opened by the build where SEALED_KEY is. seal, open, check; no list of files to keep, no dependencies

a site's own visits without cookies: the route its pages post to, the store, the readers

the server half of page-sensor, framework-free: visitsRoute (a Request in, a Response out) takes a page's batch of lines and keeps each page in a visit in the site's own SQLite through ts-utils' metrics drivers (libSQL / Turso, D1); readVisits gives the visits user-flows draws, readVisit one visit's lines for its pages' traces (telemetry), readViews a page's all-time view count. a visit is one caller's pages within half an hour, within a UTC day; the caller is a hash of its IP and user agent with the site and a random salt of the day, deleted when the day ends, so nobody is followed across days and one store can hold several sites without linking a person across them. never stored: an IP, a user agent, a cookie, a field named like a person; crawlers dropped, probes and the site's staff flagged and never counted. a page's views: each visit once, opened or read where it was shown (a note in a feed). VISITS_SCHEMA is provisioned once with the database's own tools

every base control in one install

the base controls in one install: button, badge, label, textarea, checkbox, radio-group, switch, select, toggle-group, rating, vote, tabs, separator, spinner, skeleton, panel, group-box, readout, field, form, setting, dialog, command, sheet, popover, hover-card, toast, alert, accordion, slider, number, tree, menu, breadcrumb, tooltip, progress, input, kbd, shortcut, thumb-strip, edge-arrows, scroll-thumb (the scroll area), calendar, date-picker, resizable, and material (plain or glass, for a control or a whole subtree). each stays its own item, installable alone

who a key press belongs to, page-wide: one listener, one owner for each press

who a key belongs to, page-wide: every item that answers keys on the page registers here (useKeys, registerKeys) instead of on the document, and one listener hands each press to one of them. never one a focused control owns (lib/keys' ownsKeys: a field's typing, a switch's Space, a tab's arrows); a modal (an open lightbox) takes every press; else the instance holding focus, then the one under the pointer, then the one last pressed, then the newest, the first to take it ending the press, so a player and a gallery on one page never both answer Space. and the Escape ladder (useEscape, openLayer): the layers open now in the order they opened, Esc closing the innermost one only, and only when nothing inside it took that Esc. ownedHere and keyTargetOf read the same rule off the page for a widget's own handler

keyboard shortcuts as data: any notation read, and who a press belongs to

keyboard shortcuts as data: any notation (⌃⌥⌘A, ctrl+alt+cmd+a, ← →) split into the keys pressed in the Mac's glyphs, anything that is not keys refused, and shortcuts found inside text; whether a press is one (a letter still known under ⌥ by its physical key, a symbol however the layout types it); ownsKeys, the one rule for whether a press belongs to what it landed in (typed into a field, a key a focused widget answers itself, already taken) so a page-wide shortcut leaves it alone; aria-keyshortcuts written from the same notation. framework-free

a search field: a magnifier, clear, Esc, and the matched letters lit

a search field and its match: Search (the input's well with a magnifier, clear, Esc, an optional page-wide focus key, Enter and down handlers) and Highlight (the letters a fuzzy match lit), on lib/fuzzy

markdown worked out once at build: one parse, anchors, measured pictures, tags as data

what a page of markdown needs worked out once, where the files are (a build, a script), so the page only draws it: prepareMarkdown parses with markdown-core's syntax and returns the tree Markdown draws (<Markdown tree={…} />), every heading anchored once (the table of contents and the page agree), its words as plain text, the pictures measured by the host's own measure (which throws for a file of its own that is missing), and the tags the text may name (tags: ["Bars"]) read as data: a prop is a literal (a string, a number, an array or an object of them), never code, and a tag not named throws. The tree is JSON, so a build keeps it on disk. highlightTree colours every code block ahead with Shiki (ui's code themes, or the host's highlight), so no highlighter loads in the browser. Framework-free, Node. Replaces an MDX runtime for text whose tags are components with data

a row of cards that overflows, with a picker, keys and swipe

overflowing cards with a shared picker, keyboard and touch navigation; optionally driven by a scroll-stage timeline

a player or talking head that follows the reader while its spot is off screen

something that leaves its place in the page to stay with the reader: a talking head reading an article aloud, a player kept while you scroll on. mode auto floats while when holds (a player's playing) and its spot is out of the window, and comes home when the spot is back; always floats; off stays. the same element moves (a video keeps playing, its sound and clock intact) and its spot keeps its size so the page never jumps. where it floats is a place on the window (fractions across and down, so it means the same on any window); it sticks to spots a page offers (the corners and edge middles by default, or your own: a gutter, a rail) when let go within a magnet's reach, and stays where it is let go otherwise; a drag is not a click; useFloating tells content it floats (to take a smaller shape); while floating a button scrolls back to its spot. reduced motion: no easing

what a prepared file is: kind, size, length, poster, blur, colour and frames

portable, validated asset metadata shared by preparation, upload and presentation: what a file is (image, animation, video, audio), its size, length, poster, blur, mean colour and frames along it (frame i at i × every seconds). The contract between whoever prepares (prepare-media in Node; an app with AVFoundation) and whatever draws

image and video renditions cut at the edge by Cloudflare, at the size shown

the serving half of preparation: renditions cut at the edge on request by Cloudflare's transformations (an image at the width shown, a video's frame at a second), on a host you name, no storage dependency

images, video and sound made ready in Node: posters, previews, frames, FFmpeg

Node image preparation and opt-in FFmpeg video and sound preparation, from bytes, a path or a URL (read by ranges, its headers sent): dimensions, transparent previews, posters, the mean colour, a span of a long source, frames along a clip, sound alone, content-addressed files, with no storage dependency. keep(dir, parts, make, ext) (lib/prepare-keep, for build scripts: a page importing it would trace the whole project) keeps anything prepared (a blur, a still, a link preview) in a file named by the hash of what it is made from and of the preparer's own code, so a build prepares only what changed; keepOnly drops what nothing asked for

anything drawn from a moment: its length and its chapters, without React

anything drawn from a moment, as the facts a driver moves through it by: its length and its chapters. the player plays a clip, a scroll stage scrolls it, a fixed progress is a still. framework-free

a stage pinned while the page scrolls past it, played act by act in CSS

the pinned stage: a tall track, a sticky stage, --stage-p driven by CSS scroll-driven animation, acts as checkpoints. an act drives a clip by cueing its clock (@ag/playback cue, @ag/clip chapterSpan); a beat's progress scrubs one directly (progressWithin)

a story told on the scroll, a card per chapter, its words beside its scene

one list of chapters (name, mark, scroll, what each draws at its progress) told on a pinned stage: a deck of cards sliding in from the side, or one card whose chapters crossfade; the picker, seeking and the stacked carousel derived from the list. StoryCard sets the words beside the scene, a device standing out of the card where it overflows

a coding agent's session as data, for the claude-code and codex skins

a coding agent's session as data: prompts, replies, tool calls with their results, and the working line. the claude-code and codex skins draw it. framework-free

the timeline a macos stage plays, as data, without React

the timeline a macos stage plays: the step types an app's scene compiler writes, the pacing, and frameAt, a pure fold from a timeline and an instant to the whole stage. framework-free

a site's RSS or Atom feed read into items: title, address, date, picture

a site's latest, from its RSS 2.0 or Atom feed (a blog, a YouTube channel's uploads, a podcast): parseFeed reads the XML into items (title, address, date, picture), newest first; feedOf finds the feed a page names; readFeed fetches one on a server through public-fetch

a link's six facts and its host as shown; fetches nothing, safe in a browser

the six facts of a link (url, site, title, description, image, icon) as a type, and how a link is written (hrefOf) and shown (hostOf); fetches nothing, so a browser can import it

a link's six facts, read from its page at authoring time or live on a server

the one fetch that reads a link's six facts from its page (oEmbed for YouTube); run once at authoring time and shipped as data, or live on a server, where it asks the public internet only (public-fetch)