@nuxtseo/design-system 0.0.0-stage → 0.1.0

package/app/components/data/UiDonutChart.vue

@@ -0,0 +1,132 @@
+<script lang="ts" setup generic="T extends Record<string, unknown>">
+import { computed } from 'vue'
+import { categoricalVizColors } from '../../composables/dataVizColors'
+import { formatGroupedNumber } from '../../composables/formatting'
+import { roundedShareLabel, roundedShares } from '../../utils/number'
+
+// Donut/pie chart for composition — share of a whole (device split, brand vs non-brand,
+// country share). SVG arc ring + a legend with value and percentage per slice. Generic +
+// dependency-free, so any row array drives it.
+
+const {
+  data,
+  labelKey,
+  valueKey,
+  size = 132,
+  colors = categoricalVizColors,
+  colorMap,
+  centerValue,
+  centerLabel,
+  label = 'Composition',
+  format,
+} = defineProps<{
+  data: T[]
+  /** Row key for the slice label. */
+  labelKey: keyof T & string
+  /** Row key for the numeric value. */
+  valueKey: keyof T & string
+  /** Diameter in px. Default 132. */
+  size?: number
+  /** Ordered design-system chart colours. */
+  colors?: readonly string[]
+  /** Stable category identity colours keyed by the rendered label. */
+  colorMap?: Readonly<Record<string, string>>
+  /** Optional dominant takeaway rendered in the ring centre. */
+  centerValue?: string | number
+  /** Short label beneath the centre value. */
+  centerLabel?: string
+  /** Accessible caption for the exact semantic legend. */
+  label?: string
+  /** Format the value in the legend. */
+  format?: (value: number) => string
+}>()
+
+function num(v: unknown) {
+  const n = typeof v === 'number' ? v : Number(String(v).replace(/^"+|"+$/g, ''))
+  return Number.isFinite(n) ? n : 0
+}
+
+// Arc maths against a unit-100 circumference so stroke-dasharray reads as percentages.
+const R = 15.9155 // circumference ≈ 100
+const C = 2 * Math.PI * R
+const palette = computed(() => colors.length ? colors : categoricalVizColors)
+const categoryColors = computed(() => {
+  const labels = [...new Set(data.map(r => String(r[labelKey] ?? '')))].sort((a, b) => a.localeCompare(b))
+  return new Map(labels.map((label, index) => [
+    label,
+    colorMap?.[label] ?? palette.value[index % palette.value.length]!,
+  ]))
+})
+
+const segments = computed(() => {
+  const items = data
+    .map(r => ({ label: String(r[labelKey] ?? ''), value: num(r[valueKey]) }))
+    .filter(s => s.value > 0)
+    .sort((a, b) => b.value - a.value)
+  const total = items.reduce((sum, s) => sum + s.value, 0) || 1
+  // The legend column sums to 100 (largest remainder); the arcs keep exact shares.
+  const rounded = roundedShares(items.map(s => s.value))
+  let acc = 0
+  return items.map((s, i) => {
+    const pct = (s.value / total) * 100
+    const pctLabel = roundedShareLabel(rounded[i]!, s.value, items.length > 1)
+    const seg = { ...s, color: categoryColors.value.get(s.label) ?? palette.value[i % palette.value.length]!, pct, pctLabel, offset: acc }
+    acc += pct
+    return seg
+  })
+})
+
+function fmt(value: number): string {
+  return format ? format(value) : formatGroupedNumber(value)
+}
+</script>
+
+<template>
+  <figure data-ui="UiDonutChart" class="flex items-center gap-4">
+    <div class="relative shrink-0" :style="{ width: `${size}px`, height: `${size}px` }">
+      <svg
+        :width="size"
+        :height="size"
+        viewBox="0 0 36 36"
+        class="-rotate-90"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <circle cx="18" cy="18" :r="R" fill="none" stroke="var(--ui-bg-muted)" stroke-width="4" />
+        <circle
+          v-for="(s, i) in segments"
+          :key="i"
+          data-donut-segment
+          cx="18"
+          cy="18"
+          :r="R"
+          fill="none"
+          :stroke="s.color"
+          stroke-width="4"
+          :stroke-dasharray="`${(s.pct / 100) * C} ${C}`"
+          :stroke-dashoffset="`${-(s.offset / 100) * C}`"
+        />
+      </svg>
+      <div
+        v-if="centerValue != null || centerLabel"
+        data-donut-center
+        class="pointer-events-none absolute inset-0 flex flex-col items-center justify-center px-4 text-center"
+      >
+        <span v-if="centerValue != null" class="numerals-display text-heading text-highlighted">{{ centerValue }}</span>
+        <span v-if="centerLabel" class="max-w-full truncate text-sm text-muted">{{ centerLabel }}</span>
+      </div>
+    </div>
+
+    <ul class="min-w-0 flex-1 flex flex-col gap-1 text-sm">
+      <li v-for="(s, i) in segments" :key="i" class="flex items-center gap-2">
+        <span class="size-2 shrink-0 rounded-full" :style="{ background: s.color }" aria-hidden="true" />
+        <span data-donut-label class="flex-1 truncate text-muted" :title="s.label">{{ s.label }}</span>
+        <span class="tabular-nums text-highlighted">{{ fmt(s.value) }}</span>
+        <span class="w-9 text-right tabular-nums text-muted">{{ s.pctLabel }}</span>
+      </li>
+    </ul>
+    <figcaption class="sr-only">
+      {{ label }}
+    </figcaption>
+  </figure>
+</template>

package/app/components/data/UiDoorwayColumn.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import type { NavigationDestination as RouteLocationRaw } from '../../shared/navigation'
+import { computed } from 'vue'
+import { NuxtLink, UiButton, UiIcon, UiSkeleton } from '#components'
+
+/**
+ * UiDoorwayColumn — the card shell of a doorway column, extracted from the site
+ * overview's Next Actions / Recent Activity pair so a feature page can render
+ * the SAME column instead of a look-alike.
+ *
+ * A doorway names its destination once and stops: the header carries the label
+ * and one "View all" link, and the body carries one-line rows. The chrome that
+ * Columns sit inside a `UiDoorwayGrid`, which owns the single-column collapse
+ * and the hide-the-row-when-every-column-is-empty rule off the
+ * `data-doorway-empty` stamp below. Never hand-roll the `md:grid-cols-2` around
+ * a pair of columns — that grid is what leaves a gated-off column's half of the
+ * page blank.
+ *
+ * The chrome that
+ * does NOT belong here (and is what this shell exists to keep out) is the rail
+ * grammar it replaces on feature pages — count chips, context chips, group
+ * headings, severity bars, per-row lead-fact lines, age tails, and an "N more"
+ * footer. Depth is the owning route's job, which is what the header link is for.
+ */
+const {
+  title,
+  viewAllTo = null,
+  viewAllLabel = 'View all',
+  status = 'success',
+  empty = false,
+  emptyLabel = null,
+  errorLabel = 'Could not load this column.',
+  skeletonRows = 4,
+} = defineProps<{
+  title: string
+  /** The owning route this column is a doorway to. Omit to render no link. */
+  viewAllTo?: RouteLocationRaw | null
+  viewAllLabel?: string
+  status?: 'pending' | 'success' | 'error'
+  empty?: boolean
+  /** Honest empty copy. Rendered only when `empty` and loaded. */
+  emptyLabel?: string | null
+  errorLabel?: string
+  skeletonRows?: number
+}>()
+
+const emit = defineEmits<{ retry: [] }>()
+
+/**
+ * The stamp `UiDoorwayGrid` reads to decide whether the whole row has anything
+ * to say. It means "loaded, and there is nothing here" — never "still loading"
+ * and never "failed", both of which are content a reader needs.
+ */
+const doorwayEmpty = computed(() => (status === 'success' && empty ? '' : undefined))
+</script>
+
+<template>
+  <section
+    class="overflow-hidden rounded-xl border border-default bg-elevated/20"
+    :aria-label="title"
+    :aria-busy="status === 'pending' ? 'true' : undefined"
+    :data-doorway-empty="doorwayEmpty"
+  >
+    <div class="flex min-h-11 items-center gap-2 border-b border-default/60 px-4">
+      <span class="text-label">{{ title }}</span>
+      <slot name="header-meta" />
+      <NuxtLink
+        v-if="viewAllTo"
+        :to="viewAllTo"
+        class="ml-auto flex min-h-11 items-center text-xs text-muted outline-none transition-colors hover:text-default focus-visible:ring-2 focus-visible:ring-primary sm:min-h-0"
+      >
+        {{ viewAllLabel }}
+      </NuxtLink>
+    </div>
+
+    <template v-if="status === 'pending'">
+      <span class="sr-only" role="status" aria-live="polite">Loading {{ title }}</span>
+      <ul aria-hidden="true" class="divide-y divide-default/60">
+        <li v-for="n in skeletonRows" :key="n" class="flex min-w-0 items-center gap-2.5 px-4 py-2">
+          <UiSkeleton type="circle" :base="16" :index="n" class="shrink-0" />
+          <UiSkeleton type="text" :base="130" :range="90" :index="n" class="!h-3" />
+        </li>
+      </ul>
+    </template>
+
+    <div v-else-if="status === 'error'" class="flex min-h-11 items-center gap-2.5 px-4 py-2" role="alert">
+      <UiIcon name="caution" class="size-4 shrink-0 text-error" aria-hidden="true" />
+      <p class="min-w-0 flex-1 text-sm text-muted">
+        {{ errorLabel }}
+      </p>
+      <UiButton purpose="secondary" size="xs" icon="refresh" @click="emit('retry')">
+        Retry
+      </UiButton>
+    </div>
+
+    <template v-else-if="empty">
+      <slot name="empty">
+        <p v-if="emptyLabel" class="px-4 py-3 text-sm text-muted">
+          {{ emptyLabel }}
+        </p>
+      </slot>
+    </template>
+
+    <ul v-else class="divide-y divide-default/60">
+      <slot />
+    </ul>
+  </section>
+</template>

package/app/components/data/UiDoorwayGrid.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+/**
+ * UiDoorwayGrid — the row that holds `UiDoorwayColumn`s and owns the two rules
+ * a page must not have to restate: how many columns actually rendered, and what
+ * to do when none of them has anything to say.
+ *
+ * Both rules are CSS, deliberately. A page gates a column with `v-if`
+ * (`allowLiveQueries`, `fullMonitoringAvailable`), and a column only learns it
+ * is empty after its query settles — so a JS count would have to be a
+ * registration protocol that resolves AFTER the parent's first render, which
+ * means a wrong class on the server and a hydration patch on the client.
+ * Counting slots is worse still: a slot is "present" even when everything
+ * inside it is `v-if`'d away. The selectors below read the DOM, which is the
+ * only thing that knows the truth, at the moment it is true.
+ *
+ * - `:only-child` — a gated-off column leaves a comment placeholder, not an
+ *   element, so the surviving column is a genuine only-child and spans the full
+ *   width instead of sitting in the left half of a 2-col grid. (Requires each
+ *   column to be a single-root component; `UiDoorwayColumn` is.)
+ * - `:has(> :not([data-doorway-empty]))` — `UiDoorwayColumn` stamps
+ *   `data-doorway-empty` on itself once it has LOADED and has no rows. If no
+ *   child lacks that stamp, every column is empty and the whole row hides: a
+ *   column stays rendered while its sibling has content (the pair teaches where
+ *   activity will appear), but a page with nothing to say does not show two
+ *   boxes saying nothing. Pending and error columns are never stamped, so the
+ *   row never flickers away while loading.
+ */
+</script>
+
+<template>
+  <div data-doorway-grid class="grid items-start gap-5 md:grid-cols-2">
+    <slot />
+  </div>
+</template>
+
+<style>
+/* Deliberately unscoped: these rules are the component's behaviour, and the
+   last one has to reach the WRAPPER, which a scope attribute wouldn't match. */
+
+/* The only column left (its sibling gated off) takes the whole width. */
+[data-doorway-grid] > *:only-child {
+  grid-column: 1 / -1;
+}
+
+/* No column has content: the row says nothing, so it isn't drawn. */
+[data-doorway-grid]:not(:has(> *:not([data-doorway-empty]))) {
+  display: none;
+}
+
+/* …and neither is the page zone that exists only to hold it — a hidden row
+   would otherwise still spend a section gap on nothing. `:only-child` keeps
+   this off a zone that holds other content beside the row. Written as two
+   sibling conditions rather than one nested test because `:has()` inside
+   `:has()` is invalid and silently drops the whole rule. */
+:where(div):has(> [data-doorway-grid]:only-child):not(:has([data-doorway-grid] > *:not([data-doorway-empty]))) {
+  display: none;
+}
+</style>

package/app/components/data/UiDoorwayRow.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import type { RichSegment } from '../../../shared/rich-text'
+import type { NavigationDestination as RouteLocationRaw } from '../../shared/navigation'
+import { computed } from 'vue'
+import { NuxtLink, UiFavicon, UiIcon, UiRichText } from '#components'
+
+/**
+ * UiDoorwayRow — one line inside a `UiDoorwayColumn`: source identity, the
+ * typed headline, an optional trailing fact, a chevron. Nothing else. The row
+ * states what is next; the surface it opens owns the evidence.
+ *
+ * A row that opens a modal is a `<button aria-haspopup="dialog">`, never a
+ * `NuxtLink` carrying an `@click`. Vue's `mergeProps` appends a parent's
+ * fallthrough click AFTER `RouterLink`'s own `navigate` handler, so the router
+ * pushes first and the modal opens onto a page that is already leaving. The
+ * click listener here is bound ONLY on the button branch, so a link row can
+ * never grow that bug by accident.
+ */
+const {
+  label,
+  segments = null,
+  glyph = null,
+  faviconDomain = null,
+  to = null,
+  interactive = true,
+} = defineProps<{
+  /** Plain-text row title. Always required — it is the accessible name. */
+  label: string
+  /** Typed headline; falls back to `label` when the producer has no segments. */
+  segments?: RichSegment[] | null
+  glyph?: string | null
+  /**
+   * Lead with this host's favicon instead of the glyph. Use it where the rows
+   * name external entities (a citing site, a platform) — a column of identical
+   * kind glyphs carries no signal, the favicons do.
+   */
+  faviconDomain?: string | null
+  /** Navigation destination. Omit for a modal trigger. */
+  to?: RouteLocationRaw | null
+  /**
+   * A read-only log line (no destination, no modal) renders as a plain row: no
+   * hover cue, no chevron, no focus ring. Advertising a click a row cannot
+   * honour is the defect this flag exists to prevent.
+   */
+  interactive?: boolean
+}>()
+
+const emit = defineEmits<{ select: [] }>()
+
+const kind = computed<'link' | 'button' | 'static'>(() => {
+  if (!interactive)
+    return 'static'
+  return to ? 'link' : 'button'
+})
+</script>
+
+<template>
+  <li>
+    <component
+      :is="kind === 'link' ? NuxtLink : kind === 'button' ? 'button' : 'div'"
+      :to="kind === 'link' ? to! : undefined"
+      :type="kind === 'button' ? 'button' : undefined"
+      :aria-haspopup="kind === 'button' ? 'dialog' : undefined"
+      :aria-label="kind === 'static' ? undefined : label"
+      class="flex min-h-11 w-full min-w-0 items-center gap-2.5 px-4 py-1.5 text-left"
+      :class="kind === 'static'
+        ? ''
+        : 'cursor-pointer outline-none transition-colors hover:bg-elevated/40 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary sm:min-h-0'"
+      v-on="kind === 'button' ? { click: () => emit('select') } : {}"
+    >
+      <slot name="leading">
+        <UiFavicon v-if="faviconDomain" :domain="faviconDomain" :size="14" decorative class="shrink-0 rounded-sm" />
+        <UiIcon v-else-if="glyph" :name="glyph" class="size-3.5 shrink-0 text-dimmed" aria-hidden="true" />
+      </slot>
+      <span class="min-w-0 flex-1 truncate text-sm leading-5 text-default">
+        <UiRichText v-if="segments?.length" :segments="segments" size="sm" truncate />
+        <template v-else>{{ label }}</template>
+      </span>
+      <slot name="trailing" />
+      <UiIcon v-if="kind !== 'static'" name="chevron-right" class="size-3 shrink-0 text-dimmed" aria-hidden="true" />
+    </component>
+  </li>
+</template>

package/app/components/data/UiEntitySummary.vue

@@ -0,0 +1,261 @@
+<script setup lang="ts">
+import type { VNodeChild } from 'vue'
+import type { FactItem } from './UiFactsGrid.vue'
+import { useElementHover } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+import { ClientOnly, UiCard, UiFactsGrid, UiSparkline, UiStat } from '#components'
+/**
+ * UiEntitySummary — the identity header for a machine-object DETAIL page
+ * (a competitor, a Lighthouse scan, an alert delivery). One hero metric +
+ * sparkline on the left, a quiet facts grid on the right, in a single card.
+ *
+ * NOT a data-page hero moment — the "UiMetricsRow OR UiStats cards, never both"
+ * gate is untouched. This is an *entity header*; it lives on detail pages that
+ * aren't in the page-hero blueprint at all.
+ *
+ * Squint test: the hero column dominates by SIZE + WEIGHT (lg value); facts
+ * recede (text-label / text-sm). The column divider is a NEUTRAL rule
+ * (--ui-border) — never a semantic / accent stripe (Avoid: left-border cliché).
+ *
+ * It's a thin composition of UiStat (hero) + UiSparkline + UiFactsGrid — keep it
+ * that way. Domain-shaped props stay at the call site; this only knows
+ * {heading, metric, facts}.
+ */
+
+const {
+  heading,
+  title,
+  tooltip,
+  tooltipDescription,
+  value,
+  suffix,
+  caption,
+  trend,
+  trendSuffix,
+  invertTrend,
+  sparkline,
+  sparklineColor,
+  facts = [],
+  factColumns = 3,
+  status,
+  emphasis = true,
+  divider = 'bleed',
+  stackHeaderOnMobile = false,
+} = defineProps<{
+  /** Entity identity line (e.g. a hostname). Overridable via #heading. */
+  heading?: string
+  /** Hero metric label (e.g. "Organic traffic"). */
+  title?: string
+  /** Contextual help — renders a (?) on the hero metric label. */
+  tooltip?: string
+  tooltipDescription?: string
+  value?: string | number | null
+  suffix?: string
+  /** Period / context line under the metric (e.g. "Last 12 months"). */
+  caption?: string
+  /** Full caption shown on hover when the visible caption is shortened. */
+  captionTitle?: string
+  trend?: number | null
+  trendSuffix?: string
+  invertTrend?: boolean
+  /** Hero sparkline series (metric identity color via sparklineColor). */
+  sparkline?: number[] | Record<string, number | string>[]
+  sparklineColor?: string
+  facts?: FactItem[]
+  factColumns?: 2 | 3
+  /** Threshold state — surfaces UiStat's status chip beside the metric label. */
+  status?: 'crisis' | 'warning' | 'good'
+  /**
+   * Separator treatment between hero / facts and under the header:
+   *   - `bleed` crisp hairline bled to the card edges — structural ⊤ (default)
+   *   - `inset` same full-bleed geometry, carved (line + highlight offset)
+   *   - `fade`  muted hairline that fades before the padding edges
+   *   - `none`  no rule — spacing carries the split (Linear-clean)
+   * `bleed` / `inset` run the header rule full card width and the column rule
+   * from that rule down to the card's bottom edge.
+   */
+  divider?: 'fade' | 'none' | 'inset' | 'bleed'
+  /**
+   * The one sanctioned card lift (--elevation-emphasis + primary-tinted top
+   * bevel). Defaults on: the entity header is a detail page's single hero
+   * surface, so it's the sanctioned "max one per page" emphasis. Turn off when
+   * the page already spends its emphasis elsewhere.
+   */
+  emphasis?: boolean
+  /** Stack identity and actions on narrow screens when actions need full labels. */
+  stackHeaderOnMobile?: boolean
+}>()
+
+defineSlots<{
+  /** Override the identity line (e.g. to host a UiOverflowCount / favicon). */
+  heading?: () => VNodeChild
+  /** Top-right actions (eject menu, refresh, links). */
+  actions?: () => VNodeChild
+  /** Override the hero column entirely. */
+  hero?: () => VNodeChild
+  /** Override the facts column entirely. */
+  facts?: () => VNodeChild
+}>()
+// Card hover drives the sparkline's draw-in tracer — the sanctioned spark-joy
+// micro-moment (DESIGN: hover tracer is the one exception to animate-once).
+const cardEl = useTemplateRef<HTMLElement>('cardEl')
+const cardHovered = useElementHover(cardEl)
+</script>
+
+<template>
+  <UiCard variant="subtle" :emphasis="emphasis" :class="`divider-${divider}`" data-ui="UiEntitySummary">
+    <!-- Identity + actions header (optional). Separator is a faded hairline
+         (mask idiom) so it never hard-hits the card padding edges. -->
+    <div
+      v-if="heading || $slots.heading || $slots.actions"
+      class="entity-hrule relative mb-5 flex justify-between gap-3 pb-4"
+      :class="stackHeaderOnMobile ? 'flex-col items-stretch sm:flex-row sm:items-center' : 'items-center'"
+    >
+      <slot name="heading">
+        <span class="truncate text-sm font-medium text-highlighted">{{ heading }}</span>
+      </slot>
+      <div
+        v-if="$slots.actions"
+        class="flex shrink-0 items-center gap-2"
+        :class="stackHeaderOnMobile ? 'w-full justify-end sm:w-auto' : ''"
+      >
+        <slot name="actions" />
+      </div>
+    </div>
+
+    <!-- Hero (left, dominant) · facts (right, recede). Neutral column rule.
+         items-stretch lets the sparkline flex-fill the hero column so it
+         anchors the metric instead of floating; the facts column top-aligns. -->
+    <div class="grid items-stretch gap-y-6 lg:grid-cols-2 lg:gap-x-0">
+      <slot name="hero">
+        <div ref="cardEl" class="flex min-w-0 flex-col gap-1 lg:pr-6">
+          <UiStat
+            size="lg"
+            :title="title"
+            :tooltip="tooltip"
+            :tooltip-description="tooltipDescription"
+            :value="value"
+            value-class="text-highlighted"
+            :suffix="suffix"
+            :trend="trend"
+            :trend-suffix="trendSuffix"
+            :invert-trend="invertTrend"
+            :status="status"
+            trend-colored
+          />
+          <p v-if="caption" class="text-sm text-muted" :title="captionTitle">
+            {{ caption }}
+          </p>
+          <ClientOnly v-if="sparkline?.length">
+            <div class="mt-2 min-h-[76px] flex-1">
+              <UiSparkline
+                :data="sparkline"
+                :color="sparklineColor"
+                :inverted="invertTrend"
+                :stroke-width="2"
+                interactive
+                :hovered="cardHovered"
+                area
+                width="100%"
+                height="100%"
+                preserve-aspect-ratio="none"
+                class="block size-full"
+              />
+            </div>
+          </ClientOnly>
+        </div>
+      </slot>
+
+      <div class="entity-vrule relative min-w-0 lg:pl-6">
+        <slot name="facts">
+          <UiFactsGrid :facts="facts" :columns="factColumns" />
+        </slot>
+      </div>
+    </div>
+  </UiCard>
+</template>
+
+<style scoped>
+/* Separator geometry (shared). Color / mask / depth is set per `divider` mode
+   below so the same positions read four ways. A hard, edge-to-edge, full-weight
+   1px line is the cheap tell — every mode here softens or structures that. */
+.entity-hrule::after {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  height: 1px;
+}
+
+/* Vertical column rule — desktop only; on mobile the columns stack (gap-y). */
+@media (min-width: 1024px) {
+  .entity-vrule::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0.25rem;
+    bottom: 0.25rem;
+    width: 1px;
+  }
+}
+
+/* none — no rule; spacing carries the split. */
+.divider-none .entity-hrule::after,
+.divider-none .entity-vrule::before {
+  display: none;
+}
+
+/* fade — muted hairline that fades before the padding edges (mask idiom). */
+.divider-fade .entity-hrule::after {
+  background: var(--ui-border-muted);
+  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
+  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
+}
+.divider-fade .entity-vrule::before {
+  background: var(--ui-border-muted);
+  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
+  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
+}
+
+/* bleed — crisp full-length hairline, edge to edge. Structured / Stripe-like. */
+.divider-bleed .entity-hrule::after,
+.divider-bleed .entity-vrule::before {
+  background: var(--ui-border);
+}
+
+/* inset — carved line: a hairline with a 1px light highlight offset below / to
+   the right, so the seam reads recessed (tactile depth, not a flat stroke). */
+.divider-inset .entity-hrule::after {
+  background: var(--ui-border-accented);
+  box-shadow: 0 1px 0 var(--ui-bg-elevated);
+}
+.divider-inset .entity-vrule::before {
+  background: var(--ui-border-accented);
+  box-shadow: 1px 0 0 var(--ui-bg-elevated);
+}
+
+/* Full-bleed structural geometry (bleed + inset): the seams reach the card's
+   inner edges. --seam-pad tracks UiCard's body padding so the negative insets
+   land exactly on the border; the card's overflow-hidden clips any overshoot.
+   Header rule → full card width; column rule → from the header rule (mb-5) down
+   to the card's bottom edge (the Vercel ⊤). */
+[data-ui='UiEntitySummary'] {
+  --seam-pad: 1rem;
+}
+@media (min-width: 640px) {
+  [data-ui='UiEntitySummary'] {
+    --seam-pad: var(--density-card-padding, 1.5rem);
+  }
+}
+.divider-bleed .entity-hrule::after,
+.divider-inset .entity-hrule::after {
+  inset-inline: calc(-1 * var(--seam-pad));
+}
+@media (min-width: 1024px) {
+  .divider-bleed .entity-vrule::before,
+  .divider-inset .entity-vrule::before {
+    top: -1.25rem;
+    bottom: calc(-1 * var(--seam-pad));
+  }
+}
+</style>