@cueplusplus/ui 0.3.0 → 0.5.0

package/dist/elements/generative.css

@@ -0,0 +1,1145 @@
+/*! @cueplusplus/ui — the generative vocabulary
+ *
+ * Plain CSS. No Tailwind, no `@apply`, no `@theme`, no build step: this sheet
+ * is a `<link>` away from working in a host that has never heard of cue, which
+ * is upstream's own arrangement and the reason the layer exists. A model
+ * composes a widget out of 27 intrinsics; the widget has to draw wherever the
+ * console it was sent to happens to live, and a console is very often somebody
+ * else's app.
+ *
+ * Two consequences run through the whole file.
+ *
+ * The first is that every hook is an attribute. A class is a claim on a name in
+ * the host's one global namespace, and this sheet is imported by apps that
+ * never agreed to cue's naming — `[data-aui="card"]` collides with nothing and
+ * needs no prefix convention to stay that way.
+ *
+ * The second is the seam. Exactly one rule below reads a `--cue-*` token, and
+ * every reference in it carries a literal fallback, so the sheet has two honest
+ * modes: with `@cueplusplus/ui/styles.css` present it is cue's palette, its
+ * type ladder and its density; without it, it is a plain, legible widget. Every
+ * other rule in the file spends `--aui-*` and nothing else, which is what makes
+ * a re-skin forty declarations in one place instead of a hunt through two
+ * hundred rules.
+ *
+ * The `--aui-ladder-*` pairs in that seam look like duplication and are not.
+ * `--aui-card-padding` is the value in force; `--aui-ladder-card-padding` is
+ * cue's rung, kept beside it so the `cue-metrics` island at the foot of this
+ * file can put the ladder back on a subtree that sits inside an `upstream` one.
+ * Without the pair the two fidelity islands would not compose.
+ */
+
+[data-aui="root"] {
+  --aui-fg: var(--cue-fg, #f5f5f7);
+  --aui-fg-muted: var(--cue-fg-muted, rgba(255, 255, 255, 0.55));
+  --aui-fg-subtle: var(--cue-fg-subtle, rgba(255, 255, 255, 0.35));
+  --aui-bg: var(--cue-bg, #0a0a0a);
+  --aui-surface: var(--cue-surface-1, #121212);
+  --aui-surface-raised: var(--cue-surface-2, #1a1a1a);
+  --aui-line: var(--cue-border, rgba(255, 255, 255, 0.1));
+  --aui-line-strong: var(--cue-border-strong, rgba(255, 255, 255, 0.25));
+  --aui-accent: var(--cue-accent, #ffffff);
+  --aui-accent-fg: var(--cue-accent-fg, #0a0a0a);
+  --aui-focus: var(--cue-focus, #ffffff);
+  --aui-ok: var(--cue-ok, #3fb950);
+  --aui-warn: var(--cue-warn, #d29922);
+  --aui-danger: var(--cue-danger, #ff5f57);
+  --aui-danger-fg: var(--cue-danger-fg, #000000);
+  --aui-info: var(--cue-info, #58a6ff);
+
+  --aui-series-0: var(--cue-stream, #4c8dff);
+  --aui-series-1: var(--cue-ok, #3fb950);
+  --aui-series-2: var(--cue-warn, #d29922);
+  --aui-series-3: var(--cue-danger, #ff5f57);
+  --aui-series-4: var(--cue-busy, #56b6e0);
+
+  --aui-font: var(--cue-font-sans, ui-sans-serif, system-ui, sans-serif);
+  --aui-text-micro: var(--cue-text-micro, 0.5rem);
+  --aui-text-label: var(--cue-text-label, 0.5625rem);
+  --aui-text-ui: var(--cue-text-ui, 0.625rem);
+  --aui-text-body: var(--cue-text-body, 0.6875rem);
+  --aui-text-emphasis: var(--cue-text-emphasis, 0.875rem);
+  --aui-text-title: var(--cue-text-title, 1.125rem);
+  --aui-tracking-label: var(--cue-tracking-label, 0.12em);
+
+  --aui-card-radius: var(--cue-radius-surface, 6px);
+  --aui-field-radius: var(--cue-radius-control, 3px);
+  --aui-button-radius: var(--cue-radius-control, 3px);
+  --aui-image-radius: var(--cue-radius-control, 3px);
+  --aui-badge-radius: var(--cue-radius-full, 9999px);
+
+  --aui-hairline: var(--cue-border-width, 1px);
+  --aui-card-border: var(--cue-border-width, 1px) solid var(--aui-line);
+  --aui-field-border: var(--cue-border-width, 1px) solid var(--aui-line);
+  --aui-card-shadow: none;
+
+  --aui-control-height: var(--cue-control-md, 1.5rem);
+  --aui-control-font-size: var(--cue-text-ui, 0.625rem);
+  --aui-button-padding-x: var(--cue-space-5, 0.75rem);
+  --aui-field-padding-x: var(--cue-space-4, 0.5rem);
+  --aui-card-padding: var(--cue-space-6, 1rem);
+
+  --aui-ladder-control-height: var(--cue-control-md, 1.5rem);
+  --aui-ladder-control-font-size: var(--cue-text-ui, 0.625rem);
+  --aui-ladder-button-padding-x: var(--cue-space-5, 0.75rem);
+  --aui-ladder-field-padding-x: var(--cue-space-4, 0.5rem);
+  --aui-ladder-card-padding: var(--cue-space-6, 1rem);
+  --aui-ladder-text-label: var(--cue-text-label, 0.5625rem);
+  --aui-ladder-text-ui: var(--cue-text-ui, 0.625rem);
+  --aui-ladder-text-body: var(--cue-text-body, 0.6875rem);
+  --aui-ladder-text-emphasis: var(--cue-text-emphasis, 0.875rem);
+  --aui-ladder-text-title: var(--cue-text-title, 1.125rem);
+
+  --aui-scale-0: 0;
+  --aui-scale-1: var(--cue-space-1, 0.125rem);
+  --aui-scale-2: var(--cue-space-2, 0.25rem);
+  --aui-scale-3: var(--cue-space-3, 0.375rem);
+  --aui-scale-4: var(--cue-space-4, 0.5rem);
+  --aui-scale-5: var(--cue-space-5, 0.75rem);
+  --aui-scale-6: var(--cue-space-6, 1rem);
+  --aui-scale-7: var(--cue-space-7, 1.5rem);
+  --aui-scale-8: var(--cue-space-8, 2rem);
+
+  --aui-row-y: var(--cue-pad-row-y, 0.25rem);
+  --aui-row-x: var(--cue-pad-row-x, 0.5rem);
+  --aui-gap: var(--cue-space-4, 0.5rem);
+
+  --aui-icon-stroke: var(--cue-icon-stroke, 1.5);
+  --aui-icon-size: var(--cue-icon-md, 0.75rem);
+  --aui-focus-ring: var(--cue-focus-ring, 2px);
+  --aui-focus-offset: var(--cue-focus-ring-offset, 1px);
+  --aui-motion: var(--cue-transition-fast, 120ms);
+  --aui-ease: var(--cue-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--aui-gap);
+  color: var(--aui-fg);
+  font-family: var(--aui-font);
+  font-size: var(--aui-text-body);
+  line-height: 1.45;
+  text-align: start;
+  animation: aui-enter var(--aui-motion) var(--aui-ease) both;
+}
+
+/* Everything a browser puts on a form control by default and this vocabulary
+ * has no use for. Stated once, on the elements that need it, rather than as a
+ * blanket reset — a reset in a shared sheet is a change to the host's page. */
+[data-aui="button"],
+[data-aui="card-confirm"],
+[data-aui="card-cancel"],
+[data-aui="listview-item-trigger"],
+[data-aui="select"],
+[data-aui="input"],
+[data-aui="datepicker"] {
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  letter-spacing: inherit;
+}
+
+[data-aui="root"] :focus-visible {
+  outline: var(--aui-focus-ring) solid var(--aui-focus);
+  outline-offset: var(--aui-focus-offset);
+}
+
+/* ── Layout ───────────────────────────────────────────────────────── */
+
+[data-aui="box"] {
+  display: block;
+  min-width: 0;
+}
+
+[data-aui="row"] {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--aui-gap);
+  min-width: 0;
+}
+
+[data-aui="col"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--aui-gap);
+  min-width: 0;
+}
+
+[data-aui="form"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--aui-gap);
+  min-width: 0;
+}
+
+/* A spacer is the one intrinsic whose whole job is to take part in the flex
+ * distribution, so it grows and never shrinks below nothing. */
+[data-aui="spacer"] {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+[data-aui="divider"] {
+  flex: 0 0 auto;
+  margin: 0;
+  border: 0;
+  border-top: var(--aui-hairline) solid var(--aui-line);
+  align-self: stretch;
+}
+
+/* `flush` cancels a card's padding for the width of the rule, which is the one
+ * way to draw a divider that meets both edges of a padded surface. */
+[data-aui="divider"][data-aui-flush] {
+  margin-inline: calc(var(--aui-card-padding) * -1);
+}
+
+[data-aui="row"] > [data-aui="divider"] {
+  align-self: stretch;
+  border-top: 0;
+  border-left: var(--aui-hairline) solid var(--aui-line);
+}
+
+/* ── Card ─────────────────────────────────────────────────────────── */
+
+/* A plain card is a group, not a slab: no frame, no fill, just the padding and
+ * the stacking. It earns a surface from its content — a background, a footer of
+ * controls, a slot in a carousel — which is upstream's rule and the reason a
+ * composition of six cards does not read as six boxes. */
+[data-aui="card"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--aui-gap);
+  min-width: 0;
+  margin: 0;
+  border-radius: var(--aui-card-radius);
+}
+
+[data-aui="card"][data-aui-surface] {
+  padding: var(--aui-card-padding);
+  background: var(--aui-surface);
+  border: var(--aui-card-border);
+  box-shadow: var(--aui-card-shadow);
+}
+
+[data-aui="card-title"] {
+  margin: 0;
+  font-size: var(--aui-text-emphasis);
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+[data-aui="card-footer"] {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--aui-scale-3);
+  margin-top: auto;
+  padding-top: var(--aui-scale-2);
+}
+
+[data-aui="card-confirm"],
+[data-aui="card-cancel"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--aui-control-height);
+  padding-inline: var(--aui-button-padding-x);
+  border-radius: var(--aui-button-radius);
+  font-size: var(--aui-control-font-size);
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity var(--aui-motion) var(--aui-ease);
+}
+
+[data-aui="card-confirm"] {
+  background: var(--aui-accent);
+  color: var(--aui-accent-fg);
+  border: 0;
+}
+
+[data-aui="card-cancel"] {
+  background: transparent;
+  border: var(--aui-field-border);
+}
+
+[data-aui="card-confirm"]:hover,
+[data-aui="card-cancel"]:hover {
+  opacity: 0.85;
+}
+
+/* ── Carousel ─────────────────────────────────────────────────────── */
+
+/* Scroll snapping rather than a script: the vocabulary ships no JavaScript of
+ * its own beyond the renderer, and a native scroller is the version that works
+ * with a trackpad, a keyboard and a screen reader without any. */
+[data-aui="carousel"] {
+  display: flex;
+  flex-direction: row;
+  gap: var(--aui-gap);
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: thin;
+  padding-bottom: var(--aui-scale-2);
+}
+
+[data-aui="carousel-slide"] {
+  flex: 0 0 auto;
+  width: min(18rem, 78%);
+  scroll-snap-align: start;
+}
+
+[data-aui="carousel-slide"] > [data-aui="card"] {
+  height: 100%;
+}
+
+/* ── Typography ───────────────────────────────────────────────────── */
+
+[data-aui="header"] {
+  margin: 0;
+  font-size: var(--aui-text-emphasis);
+  font-weight: 600;
+  line-height: 1.25;
+  text-wrap: balance;
+}
+
+[data-aui="header"][data-aui-size="sm"] {
+  font-size: var(--aui-text-ui);
+}
+[data-aui="header"][data-aui-size="md"] {
+  font-size: var(--aui-text-body);
+}
+[data-aui="header"][data-aui-size="lg"] {
+  font-size: var(--aui-text-emphasis);
+}
+[data-aui="header"][data-aui-size="xl"] {
+  font-size: var(--aui-text-title);
+}
+[data-aui="header"][data-aui-size="2xl"] {
+  font-size: calc(var(--aui-text-title) * 1.2);
+}
+[data-aui="header"][data-aui-size="3xl"] {
+  font-size: calc(var(--aui-text-title) * 1.45);
+}
+
+[data-aui="text"] {
+  margin: 0;
+  font-size: var(--aui-text-body);
+  text-wrap: pretty;
+}
+
+[data-aui="text"][data-aui-size="sm"] {
+  font-size: var(--aui-text-label);
+}
+[data-aui="text"][data-aui-size="md"] {
+  font-size: var(--aui-text-ui);
+}
+[data-aui="text"][data-aui-size="lg"] {
+  font-size: var(--aui-text-body);
+}
+[data-aui="text"][data-aui-size="xl"] {
+  font-size: var(--aui-text-emphasis);
+}
+[data-aui="text"][data-aui-size="2xl"] {
+  font-size: var(--aui-text-title);
+}
+[data-aui="text"][data-aui-size="3xl"] {
+  font-size: calc(var(--aui-text-title) * 1.2);
+}
+
+[data-aui-weight="normal"] {
+  font-weight: 400;
+}
+[data-aui-weight="medium"] {
+  font-weight: 500;
+}
+[data-aui-weight="semibold"] {
+  font-weight: 600;
+}
+[data-aui-weight="bold"] {
+  font-weight: 700;
+}
+
+/* `alpha-*` and `white-*` are upstream's names for text drawn over a card that
+ * set its own `background`, where the console's foreground token is the wrong
+ * colour by construction. They are the one place this vocabulary talks about
+ * ink rather than role. */
+[data-aui-color="emphasis"] {
+  color: var(--aui-fg);
+}
+[data-aui-color="secondary"] {
+  color: var(--aui-fg-muted);
+}
+[data-aui-color="alpha-70"] {
+  color: color-mix(in oklab, currentcolor 70%, transparent);
+}
+[data-aui-color="white"] {
+  color: white;
+}
+[data-aui-color="white-70"] {
+  color: color-mix(in oklab, white 70%, transparent);
+}
+[data-aui-color="white-50"] {
+  color: color-mix(in oklab, white 50%, transparent);
+}
+
+[data-aui="caption"] {
+  margin: 0;
+  color: var(--aui-fg-muted);
+  font-size: var(--aui-text-label);
+  line-height: 1.4;
+}
+
+/* The renderer hands `Markdown` through verbatim unless the caller supplied a
+ * renderer, so this rule styles both cases: a preserved-whitespace string, and
+ * whatever `@cueplusplus/ui/elements/markdown` produced. */
+[data-aui="markdown"] {
+  min-width: 0;
+  font-size: var(--aui-text-body);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/* ── Data ─────────────────────────────────────────────────────────── */
+
+[data-aui="fact"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--aui-scale-1);
+  min-width: 0;
+}
+
+[data-aui="fact-label"] {
+  color: var(--aui-fg-muted);
+  font-size: var(--aui-text-label);
+  letter-spacing: var(--aui-tracking-label);
+  text-transform: uppercase;
+}
+
+[data-aui="fact-value"] {
+  font-size: var(--aui-text-emphasis);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.2;
+}
+
+[data-aui="table"] {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--aui-text-ui);
+  font-variant-numeric: tabular-nums;
+}
+
+[data-aui="table-col"] {
+  padding: var(--aui-row-y) var(--aui-row-x);
+  border-bottom: var(--aui-hairline) solid var(--aui-line);
+  color: var(--aui-fg-muted);
+  font-size: var(--aui-text-label);
+  font-weight: 500;
+  letter-spacing: var(--aui-tracking-label);
+  text-align: start;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+[data-aui="table"] td {
+  padding: var(--aui-row-y) var(--aui-row-x);
+  border-bottom: var(--aui-hairline) solid var(--aui-line);
+  vertical-align: baseline;
+}
+
+[data-aui="table"] tr:last-child td {
+  border-bottom: 0;
+}
+
+[data-aui="badge"] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--aui-scale-1);
+  padding: 0 var(--aui-scale-3);
+  min-height: var(--aui-text-emphasis);
+  border: var(--aui-hairline) solid var(--aui-line);
+  border-radius: var(--aui-badge-radius);
+  color: var(--aui-fg-muted);
+  font-size: var(--aui-text-label);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+[data-aui="badge"][data-aui-variant="default"] {
+  background: var(--aui-accent);
+  border-color: transparent;
+  color: var(--aui-accent-fg);
+}
+[data-aui="badge"][data-aui-variant="secondary"] {
+  background: var(--aui-surface-raised);
+  color: var(--aui-fg);
+}
+[data-aui="badge"][data-aui-variant="info"] {
+  background: color-mix(in oklab, var(--aui-info) 14%, transparent);
+  border-color: color-mix(in oklab, var(--aui-info) 35%, transparent);
+  color: var(--aui-info);
+}
+[data-aui="badge"][data-aui-variant="success"] {
+  background: color-mix(in oklab, var(--aui-ok) 14%, transparent);
+  border-color: color-mix(in oklab, var(--aui-ok) 35%, transparent);
+  color: var(--aui-ok);
+}
+[data-aui="badge"][data-aui-variant="warning"] {
+  background: color-mix(in oklab, var(--aui-warn) 14%, transparent);
+  border-color: color-mix(in oklab, var(--aui-warn) 35%, transparent);
+  color: var(--aui-warn);
+}
+
+/* ── Chart ────────────────────────────────────────────────────────── */
+
+[data-aui="chart"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--aui-scale-2);
+  margin: 0;
+  min-width: 0;
+}
+
+[data-aui="chart-frame"] {
+  width: 100%;
+  height: 7.5rem;
+}
+
+[data-aui="chart-frame"] svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+[data-aui="chart"][data-aui-variant="sparkline"] [data-aui="chart-frame"] {
+  height: 2rem;
+}
+
+[data-aui="chart-ticks"] line {
+  stroke: var(--aui-line);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+}
+
+[data-aui="chart-ticks"] text {
+  fill: var(--aui-fg-subtle);
+  font-size: 8px;
+  font-family: var(--aui-font);
+}
+
+/* One custom property carries the whole answer, so a series is one declaration
+ * away from a caller's own colour: `chart.tsx` sets `--aui-series-color`
+ * inline when the spec named one, and an inline custom property beats the
+ * banded rule below without either of them knowing about the other. */
+[data-aui="chart-series"] {
+  --aui-series-color: var(--aui-series-0);
+}
+
+[data-aui="chart-series"] polyline {
+  fill: none;
+  stroke: var(--aui-series-color);
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+}
+
+[data-aui="chart-series"] polygon {
+  fill: color-mix(in oklab, var(--aui-series-color) 22%, transparent);
+  stroke: none;
+}
+
+[data-aui="chart-series"] rect {
+  fill: var(--aui-series-color);
+  rx: 1;
+}
+
+[data-aui-series="0"] {
+  --aui-series-color: var(--aui-series-0);
+}
+[data-aui-series="1"] {
+  --aui-series-color: var(--aui-series-1);
+}
+[data-aui-series="2"] {
+  --aui-series-color: var(--aui-series-2);
+}
+[data-aui-series="3"] {
+  --aui-series-color: var(--aui-series-3);
+}
+[data-aui-series="4"] {
+  --aui-series-color: var(--aui-series-4);
+}
+
+[data-aui="chart-xlabels"] {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--aui-scale-2);
+  color: var(--aui-fg-subtle);
+  font-size: var(--aui-text-micro);
+}
+
+[data-aui="chart-legend"] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--aui-scale-2) var(--aui-scale-5);
+  color: var(--aui-fg-muted);
+  font-size: var(--aui-text-label);
+}
+
+[data-aui="chart-legend-item"] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--aui-scale-2);
+}
+
+[data-aui="chart-legend-swatch"] {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 2px;
+  background: var(--aui-series-color);
+}
+
+/* ── Media ────────────────────────────────────────────────────────── */
+
+[data-aui="image"] {
+  display: block;
+  max-width: 100%;
+  border-radius: var(--aui-image-radius);
+  object-fit: cover;
+}
+
+[data-aui="image"][data-aui-size="sm"] {
+  width: 3rem;
+  height: 3rem;
+}
+[data-aui="image"][data-aui-size="md"] {
+  width: 5rem;
+  height: 5rem;
+}
+[data-aui="image"][data-aui-size="lg"] {
+  width: 100%;
+  height: auto;
+}
+
+[data-aui="image"][data-aui-round] {
+  border-radius: 9999px;
+}
+
+[data-aui="icon"] {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: var(--aui-icon-size);
+  height: var(--aui-icon-size);
+  color: currentcolor;
+}
+
+[data-aui="icon"] svg {
+  width: 100%;
+  height: 100%;
+  stroke-width: var(--aui-icon-stroke);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+[data-aui="icon"][data-aui-size="sm"] {
+  --aui-icon-size: 0.625rem;
+}
+[data-aui="icon"][data-aui-size="md"] {
+  --aui-icon-size: 0.75rem;
+}
+[data-aui="icon"][data-aui-size="lg"] {
+  --aui-icon-size: 1rem;
+}
+[data-aui="icon"][data-aui-size="xl"] {
+  --aui-icon-size: 1.25rem;
+}
+[data-aui="icon"][data-aui-size="2xl"] {
+  --aui-icon-size: 1.75rem;
+}
+[data-aui="icon"][data-aui-size="3xl"] {
+  --aui-icon-size: 2.5rem;
+}
+
+/* The glyph the renderer draws for a name it does not publish. Dimmed rather
+ * than hidden: it holds the row's alignment and says there is a picture here
+ * this version does not have. */
+[data-aui="icon"][data-aui-icon="unknown"] {
+  color: var(--aui-fg-subtle);
+}
+
+/* ── Controls ─────────────────────────────────────────────────────── */
+
+[data-aui="button"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--aui-scale-2);
+  height: var(--aui-control-height);
+  padding-inline: var(--aui-button-padding-x);
+  background: var(--aui-accent);
+  color: var(--aui-accent-fg);
+  border: 0;
+  border-radius: var(--aui-button-radius);
+  font-size: var(--aui-control-font-size);
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    opacity var(--aui-motion) var(--aui-ease),
+    background-color var(--aui-motion) var(--aui-ease);
+}
+
+[data-aui="button"]:hover {
+  opacity: 0.85;
+}
+
+[data-aui="button"][data-aui-style="primary"] {
+  background: var(--aui-accent);
+  color: var(--aui-accent-fg);
+}
+[data-aui="button"][data-aui-style="secondary"] {
+  background: var(--aui-surface-raised);
+  color: var(--aui-fg);
+}
+[data-aui="button"][data-aui-style="outline"] {
+  background: transparent;
+  color: var(--aui-fg);
+  border: var(--aui-field-border);
+}
+[data-aui="button"][data-aui-style="ghost"] {
+  background: transparent;
+  color: var(--aui-fg-muted);
+}
+/* The ink on a filled red is the one the theme authored for it, not the page it
+ * sits on. `--aui-bg` reads 4.03:1 on terminal's dark block and 4.12:1 on
+ * hivehub's, and 3.82:1 on the `aui` skin's light half — which is the number
+ * `elements.css` writes down beside `--cue-danger-fg` as the reason that token
+ * exists. `--aui-danger-fg` clears 4.5:1 on all twenty shipped blocks and on
+ * both halves of the island, and it is the same pairing every other solid
+ * destructive fill in this package spends. */
+[data-aui="button"][data-aui-style="danger"] {
+  background: var(--aui-danger);
+  color: var(--aui-danger-fg);
+}
+
+[data-aui="button"][data-aui-block] {
+  display: flex;
+  width: 100%;
+}
+
+/* A labelled control. Upstream styles the control and leaves the label to the
+ * host's own typography, which this layer cannot do: there is no host to fall
+ * back on when the sheet is the only one loaded. */
+[data-aui="field"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--aui-scale-2);
+  min-width: 0;
+}
+
+[data-aui="field-label"] {
+  color: var(--aui-fg-muted);
+  font-size: var(--aui-text-label);
+  font-weight: 500;
+}
+
+[data-aui="select"],
+[data-aui="input"],
+[data-aui="datepicker"] {
+  width: 100%;
+  min-width: 0;
+  height: var(--aui-control-height);
+  padding-inline: var(--aui-field-padding-x);
+  background: var(--aui-bg);
+  border: var(--aui-field-border);
+  border-radius: var(--aui-field-radius);
+  font-size: var(--aui-control-font-size);
+  transition: border-color var(--aui-motion) var(--aui-ease);
+}
+
+[data-aui="input"][data-aui-multiline] {
+  height: auto;
+  min-height: calc(var(--aui-control-height) * 2.5);
+  padding-block: var(--aui-scale-2);
+  resize: vertical;
+}
+
+[data-aui="select"]:hover,
+[data-aui="input"]:hover,
+[data-aui="datepicker"]:hover {
+  border-color: var(--aui-line-strong);
+}
+
+[data-aui="select"] {
+  cursor: pointer;
+}
+
+[data-aui="checkbox"] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--aui-scale-3);
+  cursor: pointer;
+}
+
+[data-aui="checkbox"] input {
+  flex: 0 0 auto;
+  margin: 0;
+  accent-color: var(--aui-accent);
+}
+
+[data-aui="radiogroup"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--aui-scale-2);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+
+[data-aui="radiogroup-option"] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--aui-scale-3);
+  cursor: pointer;
+}
+
+[data-aui="radiogroup-option"] input {
+  flex: 0 0 auto;
+  margin: 0;
+  accent-color: var(--aui-accent);
+}
+
+/* ── Lists ────────────────────────────────────────────────────────── */
+
+[data-aui="listview"] {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+[data-aui="listview-item"] {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border-bottom: var(--aui-hairline) solid var(--aui-line);
+}
+
+[data-aui="listview"] > [data-aui="listview-item"]:last-child {
+  border-bottom: 0;
+}
+
+/* The whole row is the control when the node carries an `$action`, which is why
+ * it is a button and not a click handler: a row that answers a mouse and not a
+ * keyboard is a control only some people have. */
+[data-aui="listview-item-trigger"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--aui-scale-1);
+  width: 100%;
+  padding: var(--aui-row-y) var(--aui-row-x);
+  background: transparent;
+  border: 0;
+  border-radius: var(--aui-field-radius);
+  text-align: start;
+  cursor: pointer;
+  transition: background-color var(--aui-motion) var(--aui-ease);
+}
+
+[data-aui="listview-item-trigger"]:hover {
+  background: color-mix(in oklab, currentcolor 5%, transparent);
+}
+
+/* ── Feedback ─────────────────────────────────────────────────────── */
+
+[data-aui="alert"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--aui-scale-1);
+  padding: var(--aui-scale-4) var(--aui-scale-5);
+  border: var(--aui-hairline) solid var(--aui-line);
+  border-radius: var(--aui-field-radius);
+  font-size: var(--aui-text-ui);
+}
+
+[data-aui="alert-title"] {
+  font-weight: 600;
+}
+
+[data-aui="alert-desc"] {
+  color: var(--aui-fg-muted);
+}
+
+[data-aui="alert"][data-aui-tone="info"] {
+  background: color-mix(in oklab, var(--aui-info) 10%, transparent);
+  border-color: color-mix(in oklab, var(--aui-info) 32%, transparent);
+}
+[data-aui="alert"][data-aui-tone="success"] {
+  background: color-mix(in oklab, var(--aui-ok) 10%, transparent);
+  border-color: color-mix(in oklab, var(--aui-ok) 32%, transparent);
+}
+[data-aui="alert"][data-aui-tone="warning"] {
+  background: color-mix(in oklab, var(--aui-warn) 10%, transparent);
+  border-color: color-mix(in oklab, var(--aui-warn) 32%, transparent);
+}
+[data-aui="alert"][data-aui-tone="danger"] {
+  background: color-mix(in oklab, var(--aui-danger) 10%, transparent);
+  border-color: color-mix(in oklab, var(--aui-danger) 32%, transparent);
+}
+
+/* ── What the renderer draws when it will not guess ───────────────── */
+
+/* Legible on purpose. A fallback that renders nothing is indistinguishable
+ * from a model that chose to send nothing, so nobody ever reports it — and the
+ * person best placed to notice that this console is a version behind the model
+ * driving it is the person looking at the screen. */
+[data-aui="fallback"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--aui-scale-1);
+  padding: var(--aui-scale-4) var(--aui-scale-5);
+  background: color-mix(in oklab, var(--aui-warn) 8%, transparent);
+  border: var(--aui-hairline) dashed color-mix(in oklab, var(--aui-warn) 40%, transparent);
+  border-radius: var(--aui-field-radius);
+  font-size: var(--aui-text-label);
+}
+
+[data-aui="fallback-headline"] {
+  color: var(--aui-warn);
+  font-weight: 600;
+}
+
+[data-aui="fallback-detail"] {
+  color: var(--aui-fg-muted);
+  overflow-wrap: anywhere;
+}
+
+[data-aui="error"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--aui-scale-1);
+  padding: var(--aui-scale-5);
+  background: color-mix(in oklab, var(--aui-danger) 8%, transparent);
+  border: var(--aui-hairline) solid color-mix(in oklab, var(--aui-danger) 40%, transparent);
+  border-radius: var(--aui-card-radius);
+  font-size: var(--aui-text-ui);
+}
+
+[data-aui="error-headline"] {
+  color: var(--aui-danger);
+  font-weight: 600;
+}
+
+[data-aui="error-detail"] {
+  color: var(--aui-fg-muted);
+  font-size: var(--aui-text-label);
+  overflow-wrap: anywhere;
+}
+
+/* ── The two 0–8 scales ───────────────────────────────────────────── */
+
+/* `gap` and `padding` are the only two numbers a model may pick, and they are
+ * rungs rather than lengths: nine values it can name, every one of them on
+ * cue's ladder, so a spec cannot invent a spacing the system does not have. */
+[data-aui-gap="0"] {
+  gap: var(--aui-scale-0);
+}
+[data-aui-gap="1"] {
+  gap: var(--aui-scale-1);
+}
+[data-aui-gap="2"] {
+  gap: var(--aui-scale-2);
+}
+[data-aui-gap="3"] {
+  gap: var(--aui-scale-3);
+}
+[data-aui-gap="4"] {
+  gap: var(--aui-scale-4);
+}
+[data-aui-gap="5"] {
+  gap: var(--aui-scale-5);
+}
+[data-aui-gap="6"] {
+  gap: var(--aui-scale-6);
+}
+[data-aui-gap="7"] {
+  gap: var(--aui-scale-7);
+}
+[data-aui-gap="8"] {
+  gap: var(--aui-scale-8);
+}
+
+[data-aui-padding="0"] {
+  padding: var(--aui-scale-0);
+}
+[data-aui-padding="1"] {
+  padding: var(--aui-scale-1);
+}
+[data-aui-padding="2"] {
+  padding: var(--aui-scale-2);
+}
+[data-aui-padding="3"] {
+  padding: var(--aui-scale-3);
+}
+[data-aui-padding="4"] {
+  padding: var(--aui-scale-4);
+}
+[data-aui-padding="5"] {
+  padding: var(--aui-scale-5);
+}
+[data-aui-padding="6"] {
+  padding: var(--aui-scale-6);
+}
+[data-aui-padding="7"] {
+  padding: var(--aui-scale-7);
+}
+[data-aui-padding="8"] {
+  padding: var(--aui-scale-8);
+}
+
+/* ── Alignment ────────────────────────────────────────────────────── */
+
+[data-aui-align="start"] {
+  align-items: flex-start;
+}
+[data-aui-align="center"] {
+  align-items: center;
+}
+[data-aui-align="end"] {
+  align-items: flex-end;
+}
+
+[data-aui-justify="start"] {
+  justify-content: flex-start;
+}
+[data-aui-justify="center"] {
+  justify-content: center;
+}
+[data-aui-justify="end"] {
+  justify-content: flex-end;
+}
+[data-aui-justify="between"] {
+  justify-content: space-between;
+}
+
+/* `align` on a table column is about the text in the cells, not the box. */
+[data-aui="table"] [data-aui-align="start"] {
+  text-align: start;
+}
+[data-aui="table"] [data-aui-align="center"] {
+  text-align: center;
+}
+[data-aui="table"] [data-aui-align="end"] {
+  text-align: end;
+}
+
+/* ── Motion ───────────────────────────────────────────────────────── */
+
+@keyframes aui-enter {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-aui="root"],
+  [data-aui="root"] * {
+    animation: none;
+    transition: none;
+  }
+}
+
+/* ── The skin island ──────────────────────────────────────────────── */
+
+/* assistant-ui's own `data-aui-theme="elements"` layer, transcribed: a 20px
+ * card, a 12px borderless field on a filled ground, a pill button, and a card
+ * that carries a shadow instead of a hairline.
+ *
+ * Geometry only. Colour re-pointing arrives through `elements.css`, whose
+ * island re-declares the `--cue-*` tokens the seam above reads — so a skin that
+ * restated a palette here would win over the theme rather than follow it, and
+ * an `aui`-skinned widget would stop tracking light and dark.
+ *
+ * Two selectors, because the stamp can land in two places: on an ancestor when
+ * the tree sits inside an `AgentSurface`, and on the root itself when the
+ * caller handed `skin` to `GenerativeUI` directly. */
+[data-cue-skin="aui"] [data-aui="root"],
+[data-aui="root"][data-cue-skin="aui"] {
+  --aui-card-radius: 20px;
+  --aui-field-radius: 12px;
+  --aui-button-radius: 9999px;
+  --aui-image-radius: 12px;
+  --aui-field-border: none;
+  --aui-card-border: none;
+  --aui-card-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 8px 24px rgb(0 0 0 / 0.08);
+  --aui-tracking-label: 0;
+}
+
+/* Upstream draws a field as a filled well rather than an outlined box, which is
+ * the half of the change a radius alone does not carry. */
+[data-cue-skin="aui"] [data-aui="select"],
+[data-cue-skin="aui"] [data-aui="input"],
+[data-cue-skin="aui"] [data-aui="datepicker"] {
+  background: var(--aui-surface-raised);
+}
+
+[data-cue-skin="aui"] [data-aui="table-col"],
+[data-cue-skin="aui"] [data-aui="fact-label"] {
+  text-transform: none;
+}
+
+/* ── The two fidelities ───────────────────────────────────────────── */
+
+/* `upstream` pins the five density knobs to the numbers assistant-ui's registry
+ * item ships — a 36px control, 14px control type, `px-4`, `px-3`, `p-5` — which
+ * is what "render it the way its authors drew it" has to mean. Nothing here
+ * reads `--cue-density`: that is the whole distinction. */
+[data-cue-fidelity="upstream"] [data-aui="root"],
+[data-aui="root"][data-cue-fidelity="upstream"] {
+  --aui-control-height: 2.25rem;
+  --aui-control-font-size: 0.875rem;
+  --aui-button-padding-x: 1rem;
+  --aui-field-padding-x: 0.75rem;
+  --aui-card-padding: 1.25rem;
+  --aui-text-label: 0.75rem;
+  --aui-text-ui: 0.8125rem;
+  --aui-text-body: 0.875rem;
+  --aui-text-emphasis: 1rem;
+  --aui-text-title: 1.25rem;
+}
+
+/* And `cue-metrics` puts the ladder back, which only matters when it is nested
+ * inside an `upstream` island — the default already reads the ladder, so this
+ * block exists so the two islands compose rather than latch.
+ *
+ * Line for line with the block above, and it has to stay that way: a property
+ * `upstream` pins and this one does not restore is a value that survives the
+ * nesting, and the subtree would draw at neither fidelity — cue's metrics with
+ * assistant-ui's type scale still sitting on top of them. The type steps are
+ * half of what decision 1 of the spec means by cue metrics. */
+[data-cue-fidelity="cue-metrics"] [data-aui="root"],
+[data-aui="root"][data-cue-fidelity="cue-metrics"] {
+  --aui-control-height: var(--aui-ladder-control-height);
+  --aui-control-font-size: var(--aui-ladder-control-font-size);
+  --aui-button-padding-x: var(--aui-ladder-button-padding-x);
+  --aui-field-padding-x: var(--aui-ladder-field-padding-x);
+  --aui-card-padding: var(--aui-ladder-card-padding);
+  --aui-text-label: var(--aui-ladder-text-label);
+  --aui-text-ui: var(--aui-ladder-text-ui);
+  --aui-text-body: var(--aui-ladder-text-body);
+  --aui-text-emphasis: var(--aui-ladder-text-emphasis);
+  --aui-text-title: var(--aui-ladder-text-title);
+}