@nuxtseo/design-system 0.0.0-stage → 0.1.0

package/app/components/element/UiSelect.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts" generic="T extends ArrayOrNested<SelectItem> = ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> = 'value', M extends boolean = false">
+import type { ArrayOrNested, GetItemKeys, SelectEmits, SelectItem, SelectProps } from '@nuxt/ui'
+import { USelect } from '#components'
+
+/**
+ * UiSelect — thin wrapper around Nuxt UI v4's USelect (the native-style
+ * single/multi select, not the overlay `USelectMenu` — that one stays raw
+ * per DESIGN.md's overlay-chrome rule).
+ *
+ * Tokens (radius, ring, full-width) are already centralized in
+ * `app.config.ts`'s `ui.select` — this component isn't a re-theme, it's the
+ * single legal entry point (raw `<USelect>` is ESLint-banned via
+ * `eslint/selectors.ts`) so a future behavioral change lands in one file
+ * instead of another repo-wide sweep. Every prop, emit, and slot passes
+ * straight through unchanged.
+ */
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<Props>()
+const emit = defineEmits<SelectEmits<T, VK, M>>()
+/**
+ * `open`, `defaultOpen` and `portal` are omitted deliberately, and dropping any
+ * of them from this list breaks every select in the app.
+ *
+ * `defineProps<T>()` compiles a bare `boolean` prop into a runtime prop with no
+ * default, and Vue resolves an ABSENT boolean prop to `false` rather than
+ * `undefined`. `{ ...props }` below then hands `<USelect>` a real, enumerable
+ * `open: false` — indistinguishable from a caller writing `:open="false"`.
+ * Reka's `SelectRoot` reads that as controlled state and pins the listbox
+ * permanently closed: the trigger still emits `update:open`, nothing consumes
+ * it, and the menu never renders. Nuxt UI ships `useComponentProps()` to dodge
+ * exactly this footgun by inspecting the raw vnode props, and the spread
+ * defeats it. `portal` suffers the same forced `false`, which un-teleports the
+ * listbox and risks clipping inside scroll-constrained containers.
+ *
+ * No caller passes any of the three, so omitting them costs nothing.
+ */
+type Props = Omit<SelectProps<T, VK, M>, 'defaultValue' | 'modelModifiers' | 'open' | 'defaultOpen' | 'portal'>
+</script>
+
+<template>
+  <!-- @vue-generic {T, VK, M} -->
+  <USelect
+    v-bind="{ ...props, ...$attrs }"
+    @update:model-value="emit('update:modelValue', $event)"
+    @blur="emit('blur', $event)"
+    @change="emit('change', $event)"
+    @focus="emit('focus', $event)"
+  >
+    <template v-for="(_, name) in ($slots as Record<string, unknown>)" #[name]="slotProps" :key="name">
+      <slot :name="name" v-bind="slotProps || {}" />
+    </template>
+  </USelect>
+</template>

package/app/components/element/UiSeverityDot.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { SemanticStatus } from '../../composables/semanticColors'
+import { semanticColors } from '../../composables/semanticColors'
+
+const { severity = 'neutral', label } = defineProps<{
+  severity?: SemanticStatus
+  label?: string
+}>()
+
+// When the caller supplies neither a label nor slot content, severity is left to
+// the dot colour alone — give screen readers the severity word as a fallback.
+const SEVERITY_WORD: Record<SemanticStatus, string> = {
+  error: 'Error',
+  warning: 'Warning',
+  info: 'Info',
+  success: 'Success',
+  neutral: 'Neutral',
+}
+</script>
+
+<template>
+  <span class="inline-flex items-center gap-1.5 text-xs text-default w-auto">
+    <span class="size-1.5 rounded-full shrink-0" :class="semanticColors[severity].dot" aria-hidden="true" />
+    <slot>{{ label }}</slot>
+    <span v-if="!label && !$slots.default" class="sr-only">{{ SEVERITY_WORD[severity] }}</span>
+  </span>
+</template>

package/app/components/element/UiSiteFavicon.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { UiFavicon } from '#components'
+
+const { domain, tier, size = 16 } = defineProps<{
+  domain: string
+  /** Product-owned site tier. External identities should use `UiFavicon`. */
+  tier: 'growth' | 'monitor'
+  size?: number
+}>()
+</script>
+
+<template>
+  <span
+    class="inline-grid shrink-0 place-items-center"
+    :style="{
+      width: `${size + 2}px`,
+      height: `${size + 2}px`,
+    }"
+    :data-monitoring-tier="tier"
+    aria-hidden="true"
+  >
+    <UiFavicon :domain="domain" :size="size" decorative />
+  </span>
+</template>

package/app/components/element/UiSkeleton.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { useAttrs } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+/**
+ * Deterministic skeleton loader that avoids SSR hydration mismatches.
+ * Uses index-based pseudo-random sizing instead of Math.random().
+ */
+const {
+  type = 'text',
+  lines = 1,
+  index = 0,
+  base = 160,
+  range = 80,
+} = defineProps<{
+  /**
+   * Skeleton shape. `text`/`bar`/`circle` size themselves from `base`/`index`;
+   * `block` sets no width or height of its own, so the caller's utility classes
+   * decide the box — use it whenever the placeholder must match a known layout
+   * (a `w-full` row, a fixed-width label). The self-sizing types write an inline
+   * `width`/`height`, which silently beats any `w-*`/`h-*` class passed in.
+   */
+  type?: 'text' | 'bar' | 'circle' | 'block'
+  /** Number of skeleton lines (text type only) */
+  lines?: number
+  /** Seed index for deterministic width/height variation */
+  index?: number
+  /** Base size in px — text: width, bar: height percent, circle: diameter */
+  base?: number
+  /** Variation range in px or percent */
+  range?: number
+}>()
+
+const attrs = useAttrs()
+
+// Deterministic pseudo-random: produces consistent values for the same index on server + client
+function seededValue(i: number): number {
+  const x = Math.sin(i * 127.1 + 311.7) * 43758.5453
+  return x - Math.floor(x) // 0..1
+}
+
+function textWidth(i: number): string {
+  return `${Math.round(base + seededValue(i + index) * range)}px`
+}
+
+function barHeight(i: number): string {
+  return `${Math.round(20 + Math.sin(i * 0.3) * 15 + seededValue(i + index) * 30)}%`
+}
+</script>
+
+<template>
+  <!-- Text rows (multiple lines = fragment, wrapped in div for class inheritance) -->
+  <div v-if="type === 'text' && lines > 1" aria-hidden="true" v-bind="attrs" class="flex flex-col gap-2">
+    <div
+      v-for="i in lines"
+      :key="i"
+      class="ui-skeleton rounded h-3 max-w-full"
+      :style="{ width: textWidth(i) }"
+    />
+  </div>
+
+  <!-- Single text row -->
+  <div
+    v-else-if="type === 'text'"
+    aria-hidden="true"
+    v-bind="attrs"
+    class="ui-skeleton rounded h-3 max-w-full"
+    :style="{ width: textWidth(1) }"
+  />
+
+  <!-- Vertical chart bars -->
+  <div
+    v-else-if="type === 'bar'"
+    aria-hidden="true"
+    v-bind="attrs"
+    class="ui-skeleton rounded-t w-full mt-auto"
+    :style="{ height: barHeight(index) }"
+  />
+
+  <!-- Caller-sized box: no inline width/height, so `w-*`/`h-*` classes win -->
+  <div
+    v-else-if="type === 'block'"
+    aria-hidden="true"
+    v-bind="attrs"
+    class="ui-skeleton rounded"
+  />
+
+  <!-- Circle -->
+  <div
+    v-else-if="type === 'circle'"
+    aria-hidden="true"
+    v-bind="attrs"
+    class="ui-skeleton rounded-full"
+    :style="{ width: `${base}px`, height: `${base}px` }"
+  />
+</template>
+
+<!--
+  Cross-fade reveal recipe (consumer responsibility):
+    <Transition name="ui-skel-fade">
+      <UiSkeleton v-if="loading" />
+      <RealContent v-else />
+    </Transition>
+  with `.ui-skel-fade-enter-active{transition:opacity 160ms ease-out}`. Prevents pop-in.
+-->
+<style scoped>
+.ui-skeleton {
+  position: relative;
+  background:
+    linear-gradient(
+      90deg,
+      transparent 0%,
+      color-mix(in srgb, var(--ui-bg-elevated) 70%, transparent) 50%,
+      transparent 100%
+    ),
+    linear-gradient(
+      90deg,
+      var(--ui-bg-accented) 0%,
+      var(--ui-bg-elevated) 40%,
+      var(--ui-bg-accented) 80%
+    );
+  background-size: 200% 100%, 200% 100%;
+  background-repeat: no-repeat;
+  background-position: 200% 0, 200% 0;
+  /* Single shimmer pass. A second, slower animation on the same
+     `background-position` was fully overridden (last-declared animation wins)
+     so it only doubled paint work with zero visual effect. */
+  animation: ui-shimmer 1.6s ease-in-out infinite;
+  box-shadow: var(--elevation-inset);
+}
+
+@keyframes ui-shimmer {
+  0% { background-position: 200% 0, 0 0; }
+  100% { background-position: -200% 0, 0 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-skeleton {
+    animation: ui-skel-pulse 1.6s ease-in-out infinite;
+    background: var(--ui-bg-accented);
+  }
+  @keyframes ui-skel-pulse {
+    0%, 100% { opacity: 0.6; }
+    50% { opacity: 1; }
+  }
+}
+</style>

package/app/components/element/UiSlotText.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { SlotTextOptions } from '../../utils/slot-text'
+import { useReducedMotion } from 'motion-v'
+import { computed, onMounted, ref, watch } from 'vue'
+
+const { text, options } = defineProps<{
+  text: string
+  options?: SlotTextOptions
+}>()
+
+const reduced = useReducedMotion()
+// SSR and the first hydrated frame stay plain text. Character-slot markup only
+// appears for a real post-mount update, after the global animation CSS is ready.
+// This prevents a slow stylesheet/hydration path from exposing split glyphs.
+const mounted = ref(false)
+const animateUpdates = ref(false)
+onMounted(() => {
+  mounted.value = true
+})
+watch(() => text, (next, previous) => {
+  if (mounted.value && next !== previous)
+    animateUpdates.value = true
+})
+
+const resolvedOptions = computed<SlotTextOptions>(() => ({
+  direction: 'up',
+  stagger: 32,
+  duration: 260,
+  exitOffset: 38,
+  ...options,
+}))
+
+const chars = computed(() => Array.from(text))
+const directionClass = computed(() => resolvedOptions.value.direction === 'down' ? 'ui-slot-text--down' : 'ui-slot-text--up')
+
+function glyph(char: string) {
+  return char === ' ' ? '\u00A0' : char
+}
+
+function slotStyle(index: number) {
+  return {
+    '--ui-slot-delay': `${index * (resolvedOptions.value.stagger ?? 32)}ms`,
+    '--ui-slot-duration': `${resolvedOptions.value.duration ?? 260}ms`,
+    '--ui-slot-easing': resolvedOptions.value.easing ?? 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+  }
+}
+</script>
+
+<template>
+  <span v-if="reduced || !animateUpdates" class="ui-slot-text-host">{{ text }}</span>
+  <span v-else class="ui-slot-text-host ui-slot-text" :class="directionClass" :aria-label="text">
+    <span
+      v-for="(char, index) in chars"
+      :key="index"
+      class="ui-slot-text__slot"
+      :style="slotStyle(index)"
+      aria-hidden="true"
+    >
+      <span class="ui-slot-text__sizer">{{ glyph(char) }}</span>
+      <Transition name="ui-slot-text-roll">
+        <span :key="`${index}:${char}`" class="ui-slot-text__face">{{ glyph(char) }}</span>
+      </Transition>
+    </span>
+  </span>
+</template>

package/app/components/element/UiSourceLogos.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { UiBrandIcon, UiIcon } from '#components'
+
+export interface SourceLogo {
+  id: string
+  label: string
+  icon: string
+  image?: string
+  brand?: boolean
+  invertDark?: boolean
+  tint?: string
+  mono?: boolean
+}
+
+const { sources, size = 'sm', dither = false } = defineProps<{
+  sources: readonly SourceLogo[]
+  /**
+   * `inline` drops the frame so the mark sits inside a line of text at 12px,
+   * the way a byline credits its Source. `xs` and `sm` frame the mark as a
+   * badge for a row's edge.
+   */
+  size?: 'inline' | 'xs' | 'sm'
+  /**
+   * Quiet provenance mark for a card corner that must not compete with the
+   * number beside it: desaturated, softened, stippled with a fine dot mask.
+   * Same treatment `UiFavicon` uses for its `dither` prop, so a Source logo
+   * and a site favicon recede the same way. Hovering the enclosing `.group`,
+   * link or button restores the full logo.
+   */
+  dither?: boolean
+}>()
+
+const accessibleLabel = computed(() => sources.map(source => source.label).join(' and '))
+const framed = computed(() => size !== 'inline')
+const frameClass = computed(() => size === 'inline' ? '' : `border border-default bg-default shadow-xs rounded-md ${size === 'xs' ? 'size-5' : 'size-6'}`)
+const iconClass = computed(() => size === 'inline' ? 'size-3' : size === 'xs' ? 'size-3.5' : 'size-4')
+const brandClass = computed(() => size === 'inline' ? '!size-3' : size === 'xs' ? '!size-3.5' : '!size-4')
+const iconPixels = computed(() => size === 'inline' ? 12 : size === 'xs' ? 14 : 16)
+</script>
+
+<template>
+  <span
+    v-if="sources.length"
+    class="inline-flex shrink-0 items-center"
+    role="img"
+    :aria-label="accessibleLabel"
+    :title="accessibleLabel"
+  >
+    <span
+      v-for="(source, index) in sources"
+      :key="source.id"
+      class="relative inline-flex shrink-0 items-center justify-center"
+      :class="[frameClass, index ? (framed ? '-ml-1.5' : 'ml-0.5') : '', dither ? 'ui-source-logo-dithered' : '']"
+      aria-hidden="true"
+    >
+      <img
+        v-if="source.image"
+        :src="source.image"
+        alt=""
+        :width="iconPixels"
+        :height="iconPixels"
+        :class="[iconClass, dither ? 'ui-source-logo-dither' : '']"
+        class="rounded-full"
+      >
+      <UiBrandIcon v-else-if="source.brand" size="md" :class="[brandClass, dither ? 'ui-source-logo-dither' : '']" />
+      <UiIcon
+        v-else
+        :name="source.icon"
+        :class="[iconClass, source.invertDark ? 'dark:invert' : '', source.tint ?? '', source.mono ? 'text-highlighted' : '', dither ? 'ui-source-logo-dither' : '']"
+        aria-hidden="true"
+      />
+    </span>
+  </span>
+</template>
+
+<style scoped>
+/* Mirrors `UiFavicon`'s dither: the frame gets the dot mask, the mark gets the
+   desaturation, and the enclosing hover target restores both. */
+.ui-source-logo-dithered::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-image: radial-gradient(circle, var(--ui-bg) 38%, transparent 44%);
+  background-size: 2px 2px;
+  opacity: .55;
+  pointer-events: none;
+  transition: opacity 180ms var(--ease-standard, ease);
+}
+
+.ui-source-logo-dither {
+  filter: saturate(.35) contrast(.9) opacity(.85);
+  transition: filter 180ms var(--ease-standard, ease);
+}
+
+/* Hover restores the full mark, but never on a disabled control: a Source that
+   cannot be read is dithered to SAY so, and lighting it up contradicts that. */
+:is(a, button, .group):not(:disabled):hover .ui-source-logo-dithered::after {
+  opacity: 0;
+}
+
+:is(a, button, .group):not(:disabled):hover .ui-source-logo-dither {
+  filter: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-source-logo-dithered::after,
+  .ui-source-logo-dither {
+    transition: none;
+  }
+}
+</style>

package/app/components/element/UiSourceRail.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { SourceLogo } from './UiSourceLogos.vue'
+import { UiSourceLogos } from '#components'
+
+// The Source rail: the left column of any "pick a Source, then the thing"
+// surface (the Analytics add dialog, the Alert trigger picker). One Source per
+// row, wearing the catalogue's mark. A Source that cannot be read here stays
+// listed, greyed, with its reason: the rail is where a user learns what
+// connecting Bing or an analytics property would buy them. It never decides
+// availability itself; the caller passes `reason` from the Site's own state.
+export interface SourceRailItem {
+  identity: SourceLogo
+  /**
+   * What to call the Source. Usually the identity's own name; Web Analytics
+   * passes its Source name while `identity` carries the linked Provider's
+   * logo, because a Source and a Provider are different things (GLOSSARY).
+   */
+  label: string
+  /** Non-null when the Source is listed but cannot be read here. */
+  reason: string | null
+  /**
+   * False hides the reason line under the row (it stays in the title). The
+   * caller sets it when several rows share one reason and says it once
+   * instead, so the rail does not repeat a sentence four times.
+   */
+  caption?: boolean
+  /** Trailing count, e.g. rows already added or rules on this Source. Empty hides it. */
+  count?: number | string | null
+}
+
+const { sources, quiet = false } = defineProps<{
+  sources: readonly SourceRailItem[]
+  /**
+   * True while a search spans every Source: the selection is kept but not
+   * shown as current, so the rail does not claim a scope the rows ignore.
+   */
+  quiet?: boolean
+}>()
+const emit = defineEmits<{ pick: [id: string] }>()
+const selected = defineModel<string | null>({ default: null })
+function pick(id: string) {
+  selected.value = id
+  emit('pick', id)
+}
+</script>
+
+<template>
+  <ul class="flex flex-row gap-1 overflow-x-auto sm:flex-col sm:overflow-visible" aria-label="Sources">
+    <li v-for="s in sources" :key="s.identity.id">
+      <button
+        type="button"
+        class="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-primary"
+        :class="[
+          s.reason ? 'cursor-not-allowed text-dimmed' : 'text-default hover:bg-elevated',
+          !quiet && selected === s.identity.id ? 'bg-elevated text-highlighted' : '',
+        ]"
+        :disabled="!!s.reason"
+        :aria-current="!quiet && selected === s.identity.id ? 'true' : undefined"
+        :title="s.reason ?? undefined"
+        @click="pick(s.identity.id)"
+      >
+        <UiSourceLogos :sources="[s.identity]" size="xs" :dither="!!s.reason" />
+        <span class="min-w-0 flex-1 truncate">{{ s.label }}</span>
+        <span v-if="!s.reason && s.count" class="font-mono text-mini text-dimmed">{{ s.count }}</span>
+      </button>
+      <p v-if="s.reason && s.caption !== false" class="hidden px-2 pb-1 text-mini text-dimmed sm:block">
+        {{ s.reason }}
+      </p>
+    </li>
+  </ul>
+</template>

package/app/components/element/UiStaticTerminal.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import type { UiStaticTerminalLine } from '../../shared/static-terminal'
+import { useClipboard } from '@vueuse/core'
+import { computed } from 'vue'
+import { UiButton } from '#components'
+import { highlightCode } from '../../../shared/rangi'
+
+const {
+  lines,
+  copyLines,
+  title = 'zsh',
+  cwd = '~',
+  language = 'bash',
+} = defineProps<{
+  lines: UiStaticTerminalLine[]
+  /** Plaintext commands to copy when the visible commands mask a secret. */
+  copyLines?: UiStaticTerminalLine[]
+  title?: string
+  cwd?: string
+  language?: string
+}>()
+
+const { copy, copied } = useClipboard({ legacy: true })
+const copyText = computed(() => (copyLines ?? lines).map(line => line.command).join('\n'))
+const renderedLines = computed(() => lines.map(line => ({
+  ...line,
+  noteHtml: line.note ? highlightCode(`# ${line.note}`, 'bash').html : null,
+  commandHtml: highlightCode(line.command, line.language ?? language).html,
+  outputHtml: line.output ? highlightCode(line.output, line.outputLanguage ?? 'plain').html : null,
+})))
+</script>
+
+<template>
+  <div class="ui-static-terminal overflow-hidden rounded-xl border shadow-sm">
+    <div class="ui-static-terminal__chrome flex items-center gap-2 border-b px-3 py-1.5">
+      <span class="flex items-center gap-1.5" aria-hidden="true">
+        <span class="ui-static-terminal__dot size-2.5 rounded-full" />
+        <span class="ui-static-terminal__dot size-2.5 rounded-full" />
+        <span class="ui-static-terminal__dot size-2.5 rounded-full" />
+      </span>
+      <span class="ui-static-terminal__muted ml-1 min-w-0 flex-1 truncate font-mono text-mini">{{ cwd }} · {{ title }}</span>
+      <UiButton
+        :icon="copied ? 'check' : 'copy'"
+        purpose="quiet"
+        size="xs"
+        class="ui-static-terminal__copy min-h-11 min-w-11 sm:min-h-8 sm:min-w-8"
+        :aria-label="copied ? 'Copied' : 'Copy commands'"
+        @click="copy(copyText)"
+      />
+    </div>
+
+    <div tabindex="0" class="focus-visible:ring-2 focus-visible:ring-primary overflow-x-auto px-3 py-2.5 font-mono text-xs leading-relaxed">
+      <div v-for="(line, index) in renderedLines" :key="index" :class="index > 0 ? 'mt-3' : ''">
+        <!-- Rangi escapes source text before creating this token markup. -->
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <pre v-if="line.noteHtml" class="ui-static-terminal__muted m-0 whitespace-pre"><code class="rangi shj-lang-bash" v-html="line.noteHtml" /></pre>
+        <pre class="m-0 whitespace-pre"><span v-if="line.prompt !== false" class="select-none text-primary-500 dark:text-primary-400" aria-hidden="true">$ </span><!-- eslint-disable-next-line vue/no-v-html --><code class="rangi" :class="`shj-lang-${line.language ?? language}`" v-html="line.commandHtml" /></pre>
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <pre v-if="line.outputHtml" class="ui-static-terminal__output m-0 whitespace-pre"><code class="rangi" :class="`shj-lang-${line.outputLanguage ?? 'plain'}`" v-html="line.outputHtml" /></pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ui-static-terminal {
+  --terminal-bg: light-dark(oklch(0.985 0.002 286), oklch(0.145 0.008 326));
+  --terminal-chrome: light-dark(oklch(0.965 0.004 286), oklch(0.18 0.01 326));
+  --terminal-fg: light-dark(oklch(0.21 0.008 286), oklch(0.985 0 0));
+  --terminal-muted: light-dark(oklch(0.48 0.012 286), oklch(0.69 0.018 326));
+  --terminal-output: light-dark(oklch(0.39 0.01 286), oklch(0.76 0.014 326));
+  --terminal-border: light-dark(oklch(0.89 0.008 286), oklch(0.28 0.014 326));
+  background: var(--terminal-bg);
+  border-color: var(--terminal-border);
+  color: var(--terminal-fg);
+}
+
+.ui-static-terminal__chrome {
+  background: var(--terminal-chrome);
+  border-color: var(--terminal-border);
+}
+
+.ui-static-terminal__dot {
+  background: oklch(0.66 0.18 25);
+}
+
+.ui-static-terminal__dot:nth-child(2) {
+  background: oklch(0.78 0.15 82);
+}
+
+.ui-static-terminal__dot:nth-child(3) {
+  background: oklch(0.7 0.15 145);
+}
+
+.ui-static-terminal__muted {
+  color: var(--terminal-muted);
+}
+
+.ui-static-terminal__output,
+.ui-static-terminal__copy {
+  color: var(--terminal-output) !important;
+}
+
+.ui-static-terminal__copy:hover {
+  color: var(--terminal-fg) !important;
+}
+</style>

package/app/components/element/UiStatusBadge.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { SemanticStatus } from '../../composables/semanticColors'
+import type { UiIcon as UiIconName } from '../../shared/ui-icons'
+import { computed } from 'vue'
+import { UiChip, UiIcon } from '#components'
+import { semanticColors } from '../../composables/semanticColors'
+
+/**
+ * UiStatusBadge — the semantic status entry.
+ *
+ * Default (sm) is a colored dot + neutral text: color rides the 6px dot, the
+ * label stays `text-default`. This is the calm, stackable treatment for tables
+ * and lists where many statuses appear at once — the expected state shouldn't
+ * spend the page's color budget (see the color-budget ladder in the brand-kit).
+ *
+ *   - `prominent`  escalate to a tinted UiChip fill. Reserve for a SINGLE
+ *                  prominent status (a card header, a hero callout), never in a
+ *                  repeated row.
+ *   - `size="md"`  icon container for empty / error states.
+ */
+
+const { status = 'neutral', icon, label, size = 'sm', prominent = false, readable = false } = defineProps<{
+  status?: SemanticStatus
+  icon?: UiIconName
+  label?: string
+  /** 'sm' = inline indicator, 'md' = icon container (empty/error states) */
+  size?: 'sm' | 'md'
+  /** Escalate to a tinted chip fill. Reserve for a single prominent status. */
+  prominent?: boolean
+  /** Keep a report-visible inline label at the 14px readable tier. */
+  readable?: boolean
+}>()
+
+const colors = computed(() => semanticColors[status])
+</script>
+
+<template>
+  <!-- md: icon container (empty / error states) -->
+  <div v-if="size === 'md'" class="flex flex-col items-center gap-2">
+    <div class="size-12 rounded-2xl flex items-center justify-center" :class="colors.bg">
+      <UiIcon v-if="icon" :name="icon" class="size-6" :class="colors.text" aria-hidden="true" />
+    </div>
+    <slot>
+      <span v-if="label" class="text-sm font-medium">{{ label }}</span>
+    </slot>
+  </div>
+  <!-- sm + prominent: tinted chip — singular emphasis only -->
+  <UiChip
+    v-else-if="prominent"
+    purpose="status"
+    :status="status"
+    :icon="icon"
+    :size="readable ? 'md' : 'sm'"
+  >
+    <slot>{{ label }}</slot>
+  </UiChip>
+  <!-- sm default: colored dot + neutral text — calm, stackable -->
+  <span v-else class="inline-flex items-center gap-1.5 whitespace-nowrap" :class="readable ? 'text-sm' : 'text-xs'">
+    <span class="size-1.5 rounded-full shrink-0" :class="colors.dot" aria-hidden="true" />
+    <span class="text-default"><slot>{{ label }}</slot></span>
+  </span>
+</template>