Tiling

Underneath: native CSS grid. Tiling and Tile keep their static server-rendered markup, responsive rules and crosses. TilingEditor is an opt-in interactive part in the same client entry; every part is server-renderable, with no browser work during render.

Anatomy: <div class="ot-tiling" data-variant="rules | crosses"> (the container its narrow layouts are measured against) holding .ot-tiling-sheet, the grid, of .ot-tiles (data-place="start-top | end-top | start-foot | end-foot", --span and --rows from span and rows). Each tile's lines are its ::before.

The type-led answer to the bento grid, after "Less is more.": tiles on the 12-column grid held apart by space (--ot-space-6) and one ink hairline, never boxed, filled or rounded. Named for the tiling of a plane, which leaves no gaps and no overlaps: neighbours share an edge, so each tile draws only its start and top edge, halfway into the gap, and one line serves both sides (the top line whole, the start line under it, so no pixel is drawn twice). The edges that would fall on the tiling's own border lie half a gap outside it and are clipped, so nothing frames the whole; the lines that stay run a step (--ot-space-2) past the edge, as a draughtsman's construction lines overrun, and focus rings keep that step of room.

A tile's content keeps to one corner (place), as the poster keeps its notes; the end corners set it flush to the end. A child with margin-block-start: auto goes to the foot, so one tall tile can hold a note at its head and a paragraph at its foot. Type is the content: a headline a word to a tile, standing at the foot on its line; a large number in the last corner.

Narrow (a tiling under 40rem, by container query), twelve columns' gaps alone would outgrow it, so the sheet falls to two columns: a tile of 6 columns or fewer takes one, a wider one both. Under 24rem it is one column, every tile the whole width and one row high.

variant (data-variant; none for the default, rules): crosses.

crosses: after "the uncreative", which marks the corners of its block with + signs. No lines: the space alone holds the tiles apart (Principle 1), and a registration cross in the pencil (--ot-space-3 arms) stands on every corner of every tile, where neighbours' crosses coincide; the outer ones stand half a gap outside the block, unclipped.

Right to left the start edge, and so the vertical lines, are on the right. Forced colours keep the lines and crosses in CanvasText.

Editor anatomy: .ot-tiling.ot-tiling-editor holds a named action group, a one-line pointer hint, a keyboard-focusable region, numbered columns and the sheet of focusable tiles. Twelve columns fit its container at every width, keeping saved coordinates stable and every resize corner reachable on touch. Fixed row tracks use space-8 through space-9, independent of content height.

Its move is the drafting sheet: large personal words in expression italic, faint construction guides (dots for crosses), and one separate hairline boundary per editable tile. These functional boundaries never share, overlap or use the static tiling's overrunning lines. A held tile lifts in ink without fill or shadow; a dotted accent hairline previews its landing cells. The end corner has a visible corner mark that grows on hover, within a space-6 hit area; all four edges offer resize marks on hover, selection or focus. A small fraction-style column × row figure accompanies the held tile, left to right and isolated.

TilingLayout is a plain array of { id, label, column, row, span, rows }, with exported TilingItem and TilingEditorProps. Coordinates are positive whole numbers from 1 at inline start; spans stay within twelve columns, rows at least 1. Ids and labels are non-empty, ids unique, rectangles non-overlapping. Invalid supplied layouts show an alert. Empty space is allowed. Moving onto a matching rectangle swaps the two tiles; other collisions keep neighbours' columns and reflow them down in reading order, preserving content and preventing overlap. Geometry clamps at the grid edges and one-cell minimum.

value, defaultValue and onValueChange offer controlled or uncontrolled data. Gestures preview locally, including reflow; pointer release or keyboard drop commits a fresh array. Escape or pointer cancellation discards the whole preview without changing saved data. A new external controlled value takes priority over a pending preview. Add and Remove commit directly. renderTile supplies content separately. copyLayout offers saved JSON on the page and the clipboard, with a selectable fallback when access fails. defaultHeld starts a holding specimen. New tiles take the first free four-column space, one row high.

Drag the whole tile with pointer or touch; six pixels distinguish a drag from a content click. Capture begins only after the threshold, and dragging suppresses the trailing click. Inputs, editable text and descendants marked data-tiling-no-drag retain their pointer interaction. Pull the end corner to resize both spans; edges change their own dimension, keeping the opposite edge fixed. RTL mirrors horizontal deltas, keys and the end corner. Click selects a tile for Remove; the selection remains after a drop. Add focuses the new tile, Remove focuses its neighbour or Add when empty.

Keyboard: Tab reaches each tile and resize control. Enter or Space picks up and drops. Arrows move, Shift + arrows resize; on a corner or edge control arrows resize that dimension. Escape discards the preview. Tab remains normal navigation. The pointer hint is one line, “Drag to move. Drag the corner to resize.” The keyboard line appears only while focus is within the sheet, without moving it. Focus is visible; a polite, atomic live region announces position, size, placement, cancellation, deletion, limits and clipboard results. Forced colours retain boundaries, guides, handles and Highlight landing marks.

Motion: Glide, answering edits only. The held tile follows the pointer directly; snapping moves the landing outline and reflows neighbours. Neighbours, keyboard edits and the released tile glide over moderato with breath. Resize snaps to whole tracks, with allegro corner growth. Mounts and external updates are still; reduced motion places geometry directly. States: static rules and crosses, editing, holding, RTL editing, interactive content and empty.