@cueplusplus/ui 0.1.0 → 0.3.0

package/manifest/components/calendar.json

@@ -0,0 +1,65 @@
+{
+  "name": "Calendar",
+  "slug": "calendar",
+  "group": "date",
+  "importPath": "@cueplusplus/ui/date",
+  "peerDependencies": [
+    "react-day-picker"
+  ],
+  "clientOnly": true,
+  "description": "A month grid, on react-day-picker v10.\n\nSelection modes, keyboard navigation, the ARIA grid wiring and the date maths\n(date-fns under the hood) are the library's; this layer supplies the token\nskin and nothing else, so upgrading the library never means re-deriving\nbehaviour. Every `classNames` slot the caller passes is merged *over* the\nskin rather than replacing it.\n\n`react-day-picker` and `date-fns` are **optional peers**: import this from\n`@cueplusplus/ui/date`, never from the core barrel.",
+  "props": [],
+  "typeReferences": [
+    "DayPickerProps"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-accent-fg",
+    "--cue-accent-hover",
+    "--cue-accent-soft",
+    "--cue-border",
+    "--cue-control-sm",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-icon-sm",
+    "--cue-radius-control",
+    "--cue-space-2",
+    "--cue-space-5",
+    "--cue-sunken",
+    "--cue-surface-3",
+    "--cue-text-label",
+    "--cue-text-micro",
+    "--cue-text-ui"
+  ],
+  "summary": "A month grid, on react-day-picker v10.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Calendar mode=\"single\" selected={date} onSelect={setDate} />\n<Calendar mode=\"range\" numberOfMonths={2} selected={range} onSelect={setRange} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/calendar",
+  "mdUrl": "/docs/components/calendar.md",
+  "jsonUrl": "/r/components/calendar.json",
+  "specimens": [
+    {
+      "title": "Calendar",
+      "group": "date",
+      "components": [
+        "Calendar"
+      ],
+      "code": "<div className=\"flex flex-wrap gap-(--cue-space-6)\">\n  <Specimen label=\"single\">\n    <Calendar\n      mode=\"single\"\n      month={TODAY}\n      selected={day}\n      onSelect={setDay}\n      aria-label=\"Go-live date\"\n    />\n  </Specimen>\n  <Specimen label=\"range\">\n    <Calendar\n      mode=\"range\"\n      month={TODAY}\n      selected={range}\n      onSelect={setRange}\n      aria-label=\"Run of the show\"\n    />\n  </Specimen>\n  <Specimen label=\"with disabled days\">\n    <Calendar\n      mode=\"single\"\n      month={TODAY}\n      disabled={{ dayOfWeek: [0, 6] }}\n      aria-label=\"Weekdays only\"\n    />\n  </Specimen>\n</div>",
+      "note": "react-day-picker's month grid, restyled from tokens. Speaks plain `Date`, because that is what a show file holds.",
+      "interaction": "arrow keys walk the grid, Page Up and Page Down change month; the selected day is accent-soft, today is ringed."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/card.json

@@ -0,0 +1,140 @@
+{
+  "name": "Card",
+  "slug": "card",
+  "group": "layout",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "A padded container for one thing: a summary, a setting group, a preview.\n\nEvery section paints its own `surface-1` ground, which is what lets the root\nswitch to the seam idiom without any of the parts knowing.",
+  "props": [],
+  "typeReferences": [],
+  "subcomponents": [
+    "Root",
+    "Header",
+    "Title",
+    "Description",
+    "Content",
+    "Footer"
+  ],
+  "parts": [
+    {
+      "name": "Root",
+      "usage": "Card.Root",
+      "description": "The card frame: one hairline rim, one raised surface, one radius.\n\nDeliberately the same shape as `Panel` — a console must not have two\ncompeting container languages. What differs is the inside: a `Panel` holds\nrows that reach its rim, a `Card` holds a padded block of prose, numbers or\ncontrols. Reach for `Panel` when the content is a list; reach for `Card` when\nthe content is a thing.\n\nStatic markup — no `\"use client\"`.",
+      "props": [
+        {
+          "name": "seam",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Separate the card's sections with hairline seams instead of whitespace.\n\nThe card is then filled with the border colour and its sections sit `1px`\napart, each painting its own opaque ground — the same idiom as `SeamList`,\nwhere the gap *is* the rule and can never double up with a border."
+        }
+      ],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"div\">"
+      ]
+    },
+    {
+      "name": "Header",
+      "usage": "Card.Header",
+      "description": "The card's title block: heading column left, actions right.\n\nCarries no bottom padding of its own, so the body's own `p-(--cue-space-5)`\nis the whole gap between the two. Under `seam` it takes its full padding\nback, because the hairline — not the whitespace — is then the separator.",
+      "props": [
+        {
+          "name": "actions",
+          "type": "ReactNode",
+          "required": false,
+          "defaultValue": null,
+          "description": "Right-hand slot: the controls that act on the whole card (a menu, a status\nchip, a count)."
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "defaultValue": null,
+          "description": "The leading cluster — normally a {@link CardTitle} and a description."
+        }
+      ],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"div\">"
+      ]
+    },
+    {
+      "name": "Title",
+      "usage": "Card.Title",
+      "description": "The card's name, one type rung above body text.\n\nAn `<h3>`, because a card is almost always nested under a page `<h1>` and a\nsection `<h2>`. Where that is wrong, style your own heading with these\nclasses rather than nesting the wrong level.",
+      "props": [],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"h3\">"
+      ]
+    },
+    {
+      "name": "Description",
+      "usage": "Card.Description",
+      "description": "One supporting line under a {@link CardTitle}.",
+      "props": [],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"p\">"
+      ]
+    },
+    {
+      "name": "Content",
+      "usage": "Card.Content",
+      "description": "The card's body, on the card padding rung.",
+      "props": [],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"div\">"
+      ]
+    },
+    {
+      "name": "Footer",
+      "usage": "Card.Footer",
+      "description": "The action strip at the foot of a card. Right-aligned, like a dialog's.",
+      "props": [],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"div\">"
+      ]
+    }
+  ],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-border",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-font-mono",
+    "--cue-radius-surface",
+    "--cue-space-1",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-space-4",
+    "--cue-space-5",
+    "--cue-surface-1",
+    "--cue-text-emphasis",
+    "--cue-text-ui"
+  ],
+  "summary": "A padded container for one thing: a summary, a setting group, a preview.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Card.Root seam>\n  <Card.Header><Card.Title>Failover</Card.Title></Card.Header>\n  <Card.Content>…</Card.Content>\n</Card.Root>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/card",
+  "mdUrl": "/docs/components/card.md",
+  "jsonUrl": "/r/components/card.json",
+  "specimens": [
+    {
+      "title": "Card",
+      "group": "layout",
+      "components": [
+        "Card"
+      ],
+      "code": "<div className=\"grid w-full gap-(--cue-space-5) lg:grid-cols-2\">\n  <Card.Root>\n    <Card.Header actions={<Chip tone=\"ok\">patched</Chip>}>\n      <Card.Title>Front truss</Card.Title>\n      <Card.Description>6 fixtures, universe 1.</Card.Description>\n    </Card.Header>\n    <Card.Content>\n      <DescriptionList.Root>\n        <DescriptionList.Term>Type</DescriptionList.Term>\n        <DescriptionList.Detail>Source Four 26°</DescriptionList.Detail>\n        <DescriptionList.Term>Channels</DescriptionList.Term>\n        <DescriptionList.Detail>1 to 48</DescriptionList.Detail>\n      </DescriptionList.Root>\n    </Card.Content>\n    <Card.Footer>\n      <Button size=\"sm\">Inspect</Button>\n    </Card.Footer>\n  </Card.Root>\n  <Card.Root seam>\n    <Card.Header>\n      <Card.Title>Seam card</Card.Title>\n      <Card.Description>Separated by gaps, not rules.</Card.Description>\n    </Card.Header>\n    <Card.Content>The 1px-gap idiom, at card scale.</Card.Content>\n  </Card.Root>\n</div>",
+      "note": "A panel with body padding and a title family. `seam` swaps the hairline separation for the 1px-gap idiom.",
+      "interaction": "none by default; wrap the header in a button if the card is a link."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/carousel.json

@@ -0,0 +1,200 @@
+{
+  "name": "Carousel",
+  "slug": "carousel",
+  "group": "layout",
+  "importPath": "@cueplusplus/ui/layout/carousel",
+  "peerDependencies": [
+    "embla-carousel-react"
+  ],
+  "clientOnly": true,
+  "description": "A swipeable strip of slides, on embla.\n\n`embla-carousel-react` is an **optional peer**: import this from\n`@cueplusplus/ui/layout/carousel`, never from the core barrel, so an app that\nships no carousel never installs one.",
+  "props": [],
+  "typeReferences": [],
+  "subcomponents": [
+    "Root",
+    "Content",
+    "Slide",
+    "Previous",
+    "Next",
+    "Dots"
+  ],
+  "parts": [
+    {
+      "name": "Root",
+      "usage": "Carousel.Root",
+      "description": "The carousel frame: sets up embla and publishes its state to the parts.\n\nFocusable and wired to the arrow keys, because a carousel a mouse can drive\nand a keyboard cannot is not a carousel (WCAG 2.1.1).",
+      "props": [
+        {
+          "name": "options",
+          "type": "Partial<OptionsType>",
+          "required": false,
+          "defaultValue": null,
+          "description": "embla options, merged over the axis this component derives from `orientation`."
+        },
+        {
+          "name": "plugins",
+          "type": "CreatePluginType<LoosePluginType, {}>[]",
+          "required": false,
+          "defaultValue": null,
+          "description": "embla plugins (autoplay, class names, wheel gestures…)."
+        },
+        {
+          "name": "orientation",
+          "type": "\"horizontal\" | \"vertical\"",
+          "required": false,
+          "defaultValue": "horizontal",
+          "description": "Which way the slides travel. Defaults to `\"horizontal\"`."
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "required": false,
+          "defaultValue": "Carousel",
+          "description": "The region's accessible name. Defaults to `\"Carousel\"`."
+        },
+        {
+          "name": "setApi",
+          "type": "((api: EmblaCarouselType) => void)",
+          "required": false,
+          "defaultValue": null,
+          "description": "Receives the embla instance once mounted — the escape hatch to its full API."
+        }
+      ],
+      "typeReferences": [
+        "Omit<React.ComponentPropsWithoutRef<\"div\">, \"onSelect\">"
+      ]
+    },
+    {
+      "name": "Content",
+      "usage": "Carousel.Content",
+      "description": "The clipping viewport and the track inside it.\n\nTwo elements rather than one because embla measures the viewport and\ntranslates the track; giving one element both jobs makes the transform fight\nthe overflow. Each child is wrapped so `Carousel.Slide` can name itself\n\"Slide 2 of 5\" without the call site counting.",
+      "props": [
+        {
+          "name": "trackClassName",
+          "type": "string",
+          "required": false,
+          "defaultValue": null,
+          "description": "Extra classes for the flex track inside the viewport."
+        }
+      ],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"div\">"
+      ]
+    },
+    {
+      "name": "Slide",
+      "usage": "Carousel.Slide",
+      "description": "One slide. `basis-full` by default, so a slide fills the viewport; override\nwith `className=\"basis-1/3\"` for a multi-up carousel.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "required": false,
+          "defaultValue": null,
+          "description": "Override the spoken name. Defaults to `\"Slide <n> of <total>\"`."
+        }
+      ],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"div\">"
+      ]
+    },
+    {
+      "name": "Previous",
+      "usage": "Carousel.Previous",
+      "description": "Step one slide back. Disabled at the start unless the carousel loops.",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "required": false,
+          "defaultValue": "Previous slide",
+          "description": "Override the spoken name."
+        },
+        {
+          "name": "render",
+          "type": "RenderProp<Record<string, unknown>>",
+          "required": false,
+          "defaultValue": null,
+          "description": "Replace the rendered element (Base UI render prop)."
+        }
+      ],
+      "typeReferences": [
+        "Omit<IconButtonProps, \"aria-label\" | \"icon\">"
+      ]
+    },
+    {
+      "name": "Next",
+      "usage": "Carousel.Next",
+      "description": "Step one slide forward. Disabled at the end unless the carousel loops.",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "required": false,
+          "defaultValue": "Next slide",
+          "description": "Override the spoken name."
+        },
+        {
+          "name": "render",
+          "type": "RenderProp<Record<string, unknown>>",
+          "required": false,
+          "defaultValue": null,
+          "description": "Replace the rendered element (Base UI render prop)."
+        }
+      ],
+      "typeReferences": [
+        "Omit<IconButtonProps, \"aria-label\" | \"icon\">"
+      ]
+    },
+    {
+      "name": "Dots",
+      "usage": "Carousel.Dots",
+      "description": "One dot per scroll snap: position, and a way to jump straight to it.",
+      "props": [
+        {
+          "name": "dotLabel",
+          "type": "((index: number) => string)",
+          "required": false,
+          "defaultValue": "(index) => `Go to slide ${index + 1}`",
+          "description": "Builds each dot's spoken name. Defaults to `\"Go to slide <n>\"`."
+        }
+      ],
+      "typeReferences": [
+        "Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">"
+      ]
+    }
+  ],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border-strong",
+    "--cue-space-2",
+    "--cue-space-4"
+  ],
+  "summary": "A swipeable strip of slides, on embla.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Carousel.Root label=\"Fixture gallery\" options={{ loop: true }}>\n  <Carousel.Content>\n    {shots.map((s) => <Carousel.Slide key={s.id}><img src={s.src} /></Carousel.Slide>)}\n  </Carousel.Content>\n  <Carousel.Previous />\n  <Carousel.Next />\n  <Carousel.Dots />\n</Carousel.Root>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/carousel",
+  "mdUrl": "/docs/components/carousel.md",
+  "jsonUrl": "/r/components/carousel.json",
+  "specimens": [
+    {
+      "title": "Carousel",
+      "group": "layout",
+      "components": [
+        "Carousel"
+      ],
+      "code": "<Carousel.Root label=\"Fixture profiles\" className=\"w-full max-w-[32rem]\">\n  <Carousel.Content>\n    {[\"Source Four\", \"MAC Viper\", \"Sharpy Plus\"].map((name) => (\n      <Carousel.Slide key={name} label={name} className=\"basis-1/2\">\n        <Panel className=\"flex h-[6rem] items-center justify-center p-(--cue-space-4) font-mono text-(length:--cue-text-ui) text-fg-muted\">\n          {name}\n        </Panel>\n      </Carousel.Slide>\n    ))}\n  </Carousel.Content>\n  <div className=\"mt-(--cue-space-4) flex items-center gap-(--cue-space-3)\">\n    <Carousel.Previous />\n    <Carousel.Next />\n    <Carousel.Dots />\n  </div>\n</Carousel.Root>",
+      "note": "Embla, wearing the tokens. An optional peer, so it ships from @cueplusplus/ui/layout/carousel rather than the core barrel.",
+      "interaction": "drag or use the two controls; the dots are buttons and each says which slide it goes to."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/channel-matrix.json

@@ -0,0 +1,173 @@
+{
+  "name": "ChannelMatrix",
+  "slug": "channel-matrix",
+  "group": "dmx",
+  "importPath": "@cueplusplus/ui/dmx",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "The channel-by-channel view: 512 addressed cells, repainted imperatively.\n\nPorted from dmxhub's bridge debugger. The interesting part is not the grid —\nit is what happens between frames. Five hundred and twelve React elements\nre-rendered forty times a second is a locked tab, so this component renders\nthe grid *once* and then never re-renders it: an animation loop reads the\nbuffer, diffs each slot against a previous-value cache, and writes only the\ncells whose level actually moved. A typical lighting state changes a handful\nof channels per frame, so a typical frame touches a handful of nodes.\n\nThat is also why `data` is read through a ref rather than through props: a\ndecoder that writes into one buffer forever is the cheapest thing it can do,\nand this component is built to be pointed at exactly that.\n\nTwo things it keeps from the port, and one it fixes:\n\n- **Two ramps.** Grey answers \"how bright\", the status ramp answers \"which\n  ones are hot\". Both are lookup tables, built once per theme (see `_ramp.ts`).\n- **Overview and drill-in.** Thirty-two universes as thumbnails, drawn through\n  one 32×16 offscreen canvas and scaled up unsmoothed; clicking one opens it.\n- **It stops.** The original left `requestAnimationFrame` running forever. Here\n  the loop is off under `prefers-reduced-motion` and off when `live` is\n  `false`; a new `data` reference still repaints, so a paused stream is never\n  a stale grid.",
+  "props": [
+    {
+      "name": "data",
+      "type": "Uint8Array<ArrayBufferLike>",
+      "required": false,
+      "defaultValue": null,
+      "description": "The frame buffer: `universes × 512` bytes, universe 0 first.\n\nRead on every animation frame rather than on every render, so mutating it\nin place is the intended usage — that is what makes a 40 Hz stream cost one\n`requestAnimationFrame` instead of one React render per packet. The one\nthing that does not follow an in-place write is the accessible summary,\nwhich is computed in render and so refreshes when a new reference arrives."
+    },
+    {
+      "name": "universes",
+      "type": "number",
+      "required": false,
+      "defaultValue": "1",
+      "description": "How many universes the buffer holds. Defaults to `1`."
+    },
+    {
+      "name": "universe",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "description": "Selected universe, 0-based. Use with `onUniverseChange` for a controlled widget."
+    },
+    {
+      "name": "defaultUniverse",
+      "type": "number",
+      "required": false,
+      "defaultValue": "0",
+      "description": "Initially selected universe for an uncontrolled widget. Defaults to `0`."
+    },
+    {
+      "name": "onUniverseChange",
+      "type": "((universe: number) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called with the universe a drill-in selected."
+    },
+    {
+      "name": "mode",
+      "type": "\"detail\" | \"overview\"",
+      "required": false,
+      "defaultValue": null,
+      "description": "Current view. Use with `onModeChange` for a controlled widget."
+    },
+    {
+      "name": "defaultMode",
+      "type": "\"detail\" | \"overview\"",
+      "required": false,
+      "defaultValue": "detail",
+      "description": "Initial view for an uncontrolled widget. Defaults to `\"detail\"`."
+    },
+    {
+      "name": "onModeChange",
+      "type": "((mode: ChannelMatrixMode) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when the view changes, including on a drill-in."
+    },
+    {
+      "name": "ramp",
+      "type": "\"value\" | \"mono\"",
+      "required": false,
+      "defaultValue": null,
+      "description": "Cell colouring. Use with `onRampChange` for a controlled widget."
+    },
+    {
+      "name": "defaultRamp",
+      "type": "\"value\" | \"mono\"",
+      "required": false,
+      "defaultValue": "mono",
+      "description": "Initial cell colouring for an uncontrolled widget. Defaults to `\"mono\"`."
+    },
+    {
+      "name": "onRampChange",
+      "type": "((ramp: \"value\" | \"mono\") => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when the colouring changes."
+    },
+    {
+      "name": "live",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "true",
+      "description": "Whether frames are still arriving. Defaults to `true`; `false` stops the repaint loop."
+    },
+    {
+      "name": "controls",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "true",
+      "description": "Show the view and colouring buttons. Defaults to `true`."
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "What this output is. Defaults to `\"DMX output\"`."
+    },
+    {
+      "name": "formatUniverse",
+      "type": "((universe: number) => string)",
+      "required": false,
+      "defaultValue": "(value) => `Universe ${value}`",
+      "description": "Name a universe for its button and card. Defaults to `\"Universe 3\"` / `U03`."
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-accent-soft",
+    "--cue-border",
+    "--cue-border-overlay",
+    "--cue-control-sm",
+    "--cue-data-ground",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-radius-control",
+    "--cue-radius-overlay",
+    "--cue-scrim",
+    "--cue-space-1",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-space-4",
+    "--cue-surface-1",
+    "--cue-surface-2",
+    "--cue-text-emphasis",
+    "--cue-text-label",
+    "--cue-text-micro",
+    "--cue-text-ui"
+  ],
+  "summary": "The channel-by-channel view: 512 addressed cells, repainted imperatively.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<ChannelMatrix label=\"Output\" data={buffer} universes={32} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/channel-matrix",
+  "mdUrl": "/docs/components/channel-matrix.md",
+  "jsonUrl": "/r/components/channel-matrix.json",
+  "specimens": [
+    {
+      "title": "ChannelMatrix",
+      "group": "dmx",
+      "components": [
+        "ChannelMatrix"
+      ],
+      "code": "<div className=\"flex w-full flex-col gap-(--cue-space-5)\">\n  <ChannelMatrix data={data} universes={4} label=\"Universe 1 channels\" />\n  <ChannelMatrix\n    data={data}\n    universes={4}\n    defaultMode=\"overview\"\n    defaultRamp=\"value\"\n    label=\"All universes, value ramp\"\n  />\n  <ChannelMatrix data={data} controls={false} label=\"Universe 1 channels, no controls\" />\n</div>",
+      "note": "A 32×16 grid repainted inside an animation frame against a previous-value cache, with the colour ramps precomputed to a Uint8Array. Two ramps, and an overview mode that drills into one universe.",
+      "interaction": "the controls switch universe, mode and ramp; the grid itself reports its occupancy in words."
+    }
+  ],
+  "todo": true
+}