{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "tiling", "title": "Tiling", "description": "Tiles on the 12-column grid, held apart by space and one hairline, never boxed. Leave the sheet still, or drag a tile and pull its corner: the grid makes room for your arrangement.", "registryDependencies": [ "https://thedirectors.agency/ui/r/0nlytype.json" ], "files": [ { "path": "registry/0nlytype/ui/tiling.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype TilingProps = React.ComponentProps<\"div\"> & {\n /** rules: one hairline between tiles, as \"Less is more.\" divides its sheet. crosses: no lines, a registration cross where the tiles' corners meet. */\n variant?: \"rules\" | \"crosses\"\n}\n\n/**\n * Tiles on the 12-column grid, held apart by space and one hairline, never boxed. A tiling covers the plane with\n * no gaps and no overlaps, so neighbours share an edge: each tile draws only its start and top edge, halfway into\n * the gap, and the edges that meet the tiling's own border are clipped away.\n */\nfunction Tiling({ variant = \"rules\", className, children, ...props }: TilingProps) {\n // The sheet is the grid; the outer box is the container its narrow layouts are measured against.\n return (\n
\n
{children}
\n
\n )\n}\n\ntype TileProps = React.ComponentProps<\"div\"> & {\n /** Columns out of 12. In a narrow tiling a tile of 6 or fewer takes half, a wider one the whole width. */\n span?: number\n /** Rows it stands through. */\n rows?: number\n /** The corner its content keeps to, as the poster keeps its notes. A child with margin-block-start: auto goes to the foot. */\n place?: \"start-top\" | \"end-top\" | \"start-foot\" | \"end-foot\"\n}\n\nfunction Tile({ span = 4, rows = 1, place = \"start-top\", className, style, ...props }: TileProps) {\n return (\n \n )\n}\n\n/** A plain, serialisable rectangle. Columns and rows start at 1, from the inline start. */\ntype TilingItem = {\n id: string\n label: string\n column: number\n row: number\n span: number\n rows: number\n}\n\ntype TilingLayout = readonly TilingItem[]\n\ntype TilingEditorProps = Omit, \"children\" | \"defaultValue\"> & {\n label: string\n value?: TilingLayout\n defaultValue?: TilingLayout\n onValueChange?: (value: TilingItem[]) => void\n variant?: TilingProps[\"variant\"]\n renderTile?: (tile: TilingItem) => React.ReactNode\n /** Offers JSON on the page as well as a clipboard action. */\n copyLayout?: boolean\n /** Starts with a tile picked up; useful for a holding specimen. */\n defaultHeld?: string\n}\n\nconst overlaps = (a: TilingItem, b: TilingItem) => a.column < b.column + b.span && b.column < a.column + a.span && a.row < b.row + b.rows && b.row < a.row + a.rows\nconst geometry = (tile: TilingItem) => `column ${tile.column}, row ${tile.row}. ${tile.span} wide, ${tile.rows} high.`\nconst copyTiles = (tiles: TilingLayout) => tiles.map((tile) => ({ ...tile }))\n\nfunction layoutError(tiles: TilingLayout) {\n const ids = new Set()\n for (const tile of tiles) {\n if (!tile.id || ids.has(tile.id)) return \"Give every tile a unique, non-empty id.\"\n ids.add(tile.id)\n if (typeof tile.label !== \"string\" || !tile.label.trim()) return \"Give every tile a label.\"\n if (![tile.column, tile.row, tile.span, tile.rows].every((n) => Number.isSafeInteger(n) && n > 0) || tile.column + tile.span > 13 || !Number.isSafeInteger(tile.row + tile.rows)) return \"Use positive whole rows and spans, within the 12 columns.\"\n }\n for (let i = 0; i < tiles.length; i++) {\n if (tiles.slice(i + 1).some((tile) => overlaps(tiles[i], tile))) return \"Place tiles in separate spaces; two tiles overlap.\"\n }\n return null\n}\n\ntype EditKind = \"move\" | \"corner\" | \"start\" | \"end\" | \"top\" | \"bottom\"\ntype TilingEdit = { id: string; base: TilingLayout; layout: TilingItem[]; kind: EditKind; offset?: { x: number; y: number } }\nconst sameGeometry = (a: TilingItem, b: TilingItem) => a.column === b.column && a.row === b.row && a.span === b.span && a.rows === b.rows\nconst tracks = (tile: TilingItem) => ({ gridColumn: `${tile.column} / span ${tile.span}`, gridRow: `${tile.row} / span ${tile.rows}` })\n\n// A sparse sheet can make room. Matching rectangles swap; other neighbours keep their\n// columns and move down, in reading order, until each has its own unoccupied rectangle.\nfunction arrange(tiles: TilingLayout, next: TilingItem, kind: EditKind) {\n const original = tiles.find((tile) => tile.id === next.id)!\n const neighbours = tiles.filter((tile) => tile.id !== next.id)\n const hit = neighbours.filter((tile) => overlaps(next, tile))\n if (kind === \"move\" && hit.length === 1 && sameGeometry(next, { ...hit[0], id: next.id })) {\n const swapped = { ...hit[0], column: original.column, row: original.row, span: original.span, rows: original.rows }\n return tiles.map((tile) => tile.id === next.id ? next : tile.id === swapped.id ? swapped : { ...tile })\n }\n const placed = [next]\n for (const tile of [...neighbours].sort((a, b) => a.row - b.row || a.column - b.column)) {\n let candidate = { ...tile }\n let collisions = placed.filter((other) => overlaps(candidate, other))\n while (collisions.length) {\n candidate = { ...candidate, row: Math.max(...collisions.map((other) => other.row + other.rows)) }\n collisions = placed.filter((other) => overlaps(candidate, other))\n }\n placed.push(candidate)\n }\n return tiles.map((tile) => placed.find((other) => other.id === tile.id)!)\n}\n\nfunction adjusted(tile: TilingItem, dx: number, dy: number, kind: EditKind) {\n const next = { ...tile }\n if (kind === \"move\") {\n next.column = Math.max(1, Math.min(13 - tile.span, tile.column + dx))\n next.row = Math.max(1, tile.row + dy)\n } else {\n if (kind === \"corner\" || kind === \"end\") next.span = Math.max(1, Math.min(13 - tile.column, tile.span + dx))\n if (kind === \"corner\" || kind === \"bottom\") next.rows = Math.max(1, tile.rows + dy)\n if (kind === \"start\") {\n next.column = Math.max(1, Math.min(tile.column + tile.span - 1, tile.column + dx))\n next.span = tile.span + tile.column - next.column\n }\n if (kind === \"top\") {\n next.row = Math.max(1, Math.min(tile.row + tile.rows - 1, tile.row + dy))\n next.rows = tile.rows + tile.row - next.row\n }\n }\n return next\n}\n\n/** Editing is opt-in. Pointer and keyboard previews commit together on drop; Escape discards them. */\nfunction TilingEditor({ label, value, defaultValue = [], onValueChange, variant = \"rules\", renderTile, copyLayout = false, defaultHeld, className, ...props }: TilingEditorProps) {\n const [local, setLocal] = React.useState(() => copyTiles(defaultValue))\n const tiles = value ?? local\n const error = layoutError(tiles)\n const [selected, setSelected] = React.useState(defaultHeld ?? \"\")\n const [edit, setEdit] = React.useState(() => defaultHeld && tiles.some((tile) => tile.id === defaultHeld) ? { id: defaultHeld, base: tiles, layout: copyTiles(tiles), kind: \"move\" } : null)\n // An external controlled update always wins over an unfinished gesture.\n const activeEdit = edit?.base === tiles ? edit : null\n const shown = activeEdit?.layout ?? tiles\n const current = shown.find((tile) => tile.id === selected)\n const [notice, setNotice] = React.useState({ text: \"\", sequence: 0 })\n const hint = React.useId()\n const keys = React.useId()\n const sheet = React.useRef(null)\n const add = React.useRef(null)\n const output = React.useRef(null)\n const json = React.useRef(null)\n const handles = React.useRef(new Map())\n const focusNext = React.useRef(null)\n const previous = React.useRef(new Map())\n const animateNext = React.useRef(false)\n const suppressClick = React.useRef(false)\n const drag = React.useRef<{\n tile: TilingItem; base: TilingLayout; pointer: number; x: number; y: number\n columnStep: number; rowStep: number; rtl: boolean; kind: EditKind; moved: boolean; preview: TilingItem[]\n } | null>(null)\n\n // Before capture, the release can land anywhere. A lost window also ends the gesture.\n React.useEffect(() => {\n const abandon = () => {\n const pending = drag.current\n drag.current = null\n if (!pending?.moved) return\n animateNext.current = true\n setEdit(null)\n setNotice((before) => ({ text: \"Edit cancelled. Saved layout unchanged.\", sequence: before.sequence + 1 }))\n const handle = handles.current.get(pending.tile.id)\n if (handle?.hasPointerCapture(pending.pointer)) handle.releasePointerCapture(pending.pointer)\n }\n const end = (event: PointerEvent) => {\n const pending = drag.current\n if (pending?.pointer === event.pointerId && (event.type === \"pointercancel\" || !pending.moved)) abandon()\n }\n document.addEventListener(\"pointerup\", end, true)\n document.addEventListener(\"pointercancel\", end, true)\n window.addEventListener(\"blur\", abandon)\n return () => {\n document.removeEventListener(\"pointerup\", end, true)\n document.removeEventListener(\"pointercancel\", end, true)\n window.removeEventListener(\"blur\", abandon)\n }\n }, [])\n\n const say = (text: string) => setNotice((before) => ({ text, sequence: before.sequence + 1 }))\n const commit = (next: TilingItem[]) => {\n animateNext.current = true\n if (value === undefined) setLocal(next)\n onValueChange?.(copyTiles(next))\n }\n const lift = (tile: TilingItem, kind: EditKind = \"move\") => {\n setSelected(tile.id)\n setEdit({ id: tile.id, base: tiles, layout: copyTiles(tiles), kind })\n say(`${tile.label} picked up. ${geometry(tile)}`)\n }\n const clear = () => {\n drag.current = null\n setEdit(null)\n animateNext.current = true\n }\n const cancel = () => {\n clear()\n say(\"Edit cancelled. Saved layout unchanged.\")\n }\n const drop = (next = activeEdit?.layout) => {\n const tile = next?.find((item) => item.id === selected)\n if (next && next.some((item, i) => !sameGeometry(item, tiles[i]))) commit(next)\n clear()\n if (tile) say(`${tile.label} set down. ${geometry(tile)}`)\n }\n\n // Capture visible positions, including the held tile's pointer offset, so release\n // glides from the hand to its landing cells. Prop updates and mounts stay still.\n React.useLayoutEffect(() => {\n const board = sheet.current\n if (!board) return\n const bounds = board.getBoundingClientRect()\n const cs = getComputedStyle(board)\n const scaleX = bounds.width / board.offsetWidth || 1\n const scaleY = bounds.height / board.offsetHeight || 1\n const glide = animateNext.current && !matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n const seen = new Map()\n Array.from(board.children).forEach((node) => {\n if (!(node instanceof HTMLElement) || !node.dataset.id) return\n const rect = node.getBoundingClientRect()\n const at = { x: (rect.left - bounds.left) / scaleX, y: (rect.top - bounds.top) / scaleY }\n const before = previous.current.get(node.dataset.id)\n seen.set(node.dataset.id, at)\n if (glide && before && !node.hasAttribute(\"data-dragging\") && (Math.abs(at.x - before.x) > 0.5 || Math.abs(at.y - before.y) > 0.5)) {\n node.getAnimations().forEach((animation) => animation.cancel())\n node.animate([{ translate: `${before.x - node.offsetLeft}px ${before.y - node.offsetTop}px` }, { translate: \"0 0\" }], { duration: parseFloat(cs.getPropertyValue(\"--ot-moderato\")) || 320, easing: cs.getPropertyValue(\"--ot-breath\").trim() || \"ease\" })\n }\n })\n previous.current = seen\n animateNext.current = false\n if (focusNext.current) {\n handles.current.get(focusNext.current)?.focus({ preventScroll: true })\n focusNext.current = null\n }\n })\n\n const key = (event: React.KeyboardEvent, tile: TilingItem, kind: EditKind = \"move\") => {\n if (event.target !== event.currentTarget || event.altKey || event.ctrlKey || event.metaKey) return\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault()\n event.stopPropagation()\n if (activeEdit?.id === tile.id) drop()\n else lift(tile, kind)\n return\n }\n if (!activeEdit || activeEdit.id !== tile.id) return\n const rtl = getComputedStyle(event.currentTarget).direction === \"rtl\"\n const dx = (event.key === \"ArrowRight\" ? 1 : event.key === \"ArrowLeft\" ? -1 : 0) * (rtl ? -1 : 1)\n const dy = event.key === \"ArrowDown\" ? 1 : event.key === \"ArrowUp\" ? -1 : 0\n if (!dx && !dy) return\n event.preventDefault()\n event.stopPropagation()\n const action = event.shiftKey ? \"corner\" : kind\n const next = adjusted(tile, dx, dy, action)\n if (sameGeometry(next, tile)) { say(`${tile.label} reached the grid edge.`); return }\n const layout = arrange(activeEdit.base, next, action)\n animateNext.current = true\n setEdit({ ...activeEdit, layout, kind: action })\n say(`${tile.label} ${action === \"move\" ? \"moved\" : \"resized\"}. ${geometry(next)} Neighbours make room.`)\n }\n\n const pointerDown = (event: React.PointerEvent, tile: TilingItem, kind: EditKind = \"move\") => {\n if (event.defaultPrevented || event.button !== 0 || !event.isPrimary || !sheet.current) return\n if ((event.target as HTMLElement).closest(\"input, textarea, select, [contenteditable]:not([contenteditable='false']), [data-tiling-no-drag]\")) return\n if (kind !== \"move\") { event.preventDefault(); event.stopPropagation() }\n const board = sheet.current\n const bounds = board.getBoundingClientRect()\n const cs = getComputedStyle(board)\n const scaleX = bounds.width / board.offsetWidth || 1\n const scaleY = bounds.height / board.offsetHeight || 1\n suppressClick.current = false\n // Do not capture or prevent the initial press: links and buttons still receive a click.\n drag.current = { tile, base: tiles, pointer: event.pointerId, x: (event.clientX - bounds.left) / scaleX, y: (event.clientY - bounds.top) / scaleY, columnStep: (board.offsetWidth + parseFloat(cs.columnGap)) / 12, rowStep: parseFloat(cs.gridAutoRows) + parseFloat(cs.rowGap), rtl: cs.direction === \"rtl\", kind, moved: false, preview: copyTiles(tiles) }\n setSelected(tile.id)\n }\n const pointerMove = (event: React.PointerEvent) => {\n const pending = drag.current\n if (!pending || pending.pointer !== event.pointerId || !sheet.current) return\n if (!(event.buttons & 1)) { cancel(); return }\n if (pending.base !== tiles) { cancel(); return }\n const board = sheet.current\n const bounds = board.getBoundingClientRect()\n const scaleX = bounds.width / board.offsetWidth || 1\n const scaleY = bounds.height / board.offsetHeight || 1\n const x = (event.clientX - bounds.left) / scaleX - pending.x\n const y = (event.clientY - bounds.top) / scaleY - pending.y\n // Translations and grid steps are local; the click threshold stays in viewport pixels.\n if (!pending.moved && Math.hypot(x * scaleX, y * scaleY) < 6) return\n if (!pending.moved) {\n pending.moved = true\n event.currentTarget.focus({ preventScroll: true })\n event.currentTarget.setPointerCapture(event.pointerId)\n event.currentTarget.getAnimations().forEach((animation) => animation.cancel())\n }\n event.preventDefault()\n suppressClick.current = true\n const dx = Math.round(x / pending.columnStep) * (pending.rtl ? -1 : 1)\n const dy = Math.round(y / pending.rowStep)\n const next = adjusted(pending.tile, dx, dy, pending.kind)\n const layout = arrange(pending.base, next, pending.kind)\n const was = pending.preview.find((tile) => tile.id === next.id)!\n animateNext.current = !sameGeometry(was, next)\n if (!sameGeometry(was, next)) say(`${next.label}, ${geometry(next)} Release to place. Neighbours make room.`)\n pending.preview = layout\n setEdit({ id: next.id, base: pending.base, layout, kind: pending.kind, offset: pending.kind === \"move\" ? { x, y } : undefined })\n }\n const pointerUp = (event: React.PointerEvent) => {\n const pending = drag.current\n if (!pending || pending.pointer !== event.pointerId) return\n if (pending.base !== tiles) cancel()\n else if (pending.moved) drop(pending.preview)\n else drag.current = null\n if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId)\n }\n\n const addTile = () => {\n let n = tiles.length + 1\n while (tiles.some((tile) => tile.id === `tile-${n}`)) n++\n const tile = { id: `tile-${n}`, label: `Tile ${n}`, column: 1, row: 1, span: 4, rows: 1 }\n const last = Math.max(0, ...tiles.map((item) => item.row + item.rows - 1)) + 1\n for (let row = 1; row <= last; row++) {\n for (let column = 1; column <= 9; column++) {\n Object.assign(tile, { column, row })\n if (tiles.some((item) => overlaps(tile, item))) continue\n clear()\n focusNext.current = tile.id\n commit([...tiles, tile])\n setSelected(tile.id)\n say(`${tile.label} added. ${geometry(tile)}`)\n return\n }\n }\n }\n const removeTile = () => {\n if (!current) return\n const at = tiles.findIndex((tile) => tile.id === current.id)\n const next = tiles.filter((tile) => tile.id !== current.id)\n focusNext.current = next[Math.min(at, next.length - 1)]?.id ?? null\n clear()\n commit(next)\n setSelected(focusNext.current ?? \"\")\n if (!next.length) add.current?.focus()\n say(`${current.label} removed. ${next.length} ${next.length === 1 ? \"tile remains\" : \"tiles remain\"}.`)\n }\n const copy = async () => {\n try {\n await navigator.clipboard.writeText(JSON.stringify(tiles, null, 2))\n say(\"Layout copied as JSON.\")\n } catch {\n if (output.current) output.current.open = true\n json.current?.focus()\n json.current?.select()\n say(\"Clipboard unavailable. Select and copy the layout below.\")\n }\n }\n\n const rows = error ? 2 : Math.max(2, ...shown.map((tile) => tile.row + tile.rows), ...tiles.map((tile) => tile.row + tile.rows))\n const landing = activeEdit?.layout.find((tile) => tile.id === activeEdit.id)\n return (\n
{ if (event.key === \"Escape\" && (activeEdit || drag.current)) { event.preventDefault(); cancel() }; props.onKeyDown?.(event) }}>\n
\n {label}\n
\n \n \n {copyLayout ? : null}\n
\n
\n
\n

Drag to move. Drag the corner to resize.

\n

Enter / Space picks up or drops. Arrows move. Shift + arrows resize. Escape cancels.

\n
\n {error ?

{error}

: (\n
\n
\n
{Array.from({ length: 12 }, (_, i) => {String(i + 1).padStart(2, \"0\")})}
\n
\n {landing ?
: null}\n {shown.map((tile) => {\n const holding = activeEdit?.id === tile.id\n const floating = holding && activeEdit.offset\n const rectangle = floating ? activeEdit.base.find((item) => item.id === tile.id)! : tile\n return (\n { if (node) handles.current.set(tile.id, node); else handles.current.delete(tile.id) }} span={rectangle.span} rows={rectangle.rows} data-id={tile.id} data-selected={selected === tile.id || undefined} data-held={holding || undefined} data-dragging={!!floating || undefined} role=\"group\" aria-roledescription=\"movable tile\" aria-label={`${tile.label}, ${geometry(tile)}`} aria-describedby={`${hint} ${keys}`} tabIndex={0} style={{ ...tracks(rectangle), translate: floating ? `${floating.x}px ${floating.y}px` : undefined }}\n onKeyDown={(event) => key(event, tile)} onPointerDown={(event) => pointerDown(event, tile)} onPointerMove={pointerMove} onPointerUp={pointerUp}\n onPointerCancel={cancel} onLostPointerCapture={(event) => { if (event.target === event.currentTarget && drag.current?.moved) cancel() }} onDragStart={(event) => event.preventDefault()}\n onClickCapture={(event) => { if (suppressClick.current) { event.preventDefault(); event.stopPropagation(); suppressClick.current = false } }}\n onClick={() => setSelected(tile.id)}>\n
\n
\n
\n )}\n

{notice.text}

\n {copyLayout ?
Layout JSON