@revenexx/studio-shared 0.1.0

package/components/DataTable/types.ts

@@ -0,0 +1,82 @@
+// Shared types for the cockpit-wide DataTable component.
+//
+// A page builds a `columns` array (mapping data fields to display +
+// behaviour) and passes it to `<DataTable>` together with its source
+// rows. Sorting, text search, column visibility and pagination are
+// handled inside the table; backend-driven modes can take over by
+// setting `server-mode` and reacting to the emitted `state-change`.
+
+import type { Component } from 'vue'
+
+export type Comparable = string | number | boolean | Date | null | undefined
+
+export interface DataTableColumn<T = unknown> {
+  /** Stable key — matches the slot name `cell-<key>` and is used in the
+   *  sort state. */
+  key: string
+  /** Header label. */
+  label: string
+  /** CSS grid track. Defaults to `minmax(0,1fr)` for text columns; pass
+   *  a fixed value like `120px` or `minmax(0,140px)` for compact ones. */
+  width?: string
+  /** Enable sort affordance on this column. */
+  sortable?: boolean
+  /** Returns the sort key for the row. Falls back to `row[key]` if it
+   *  looks like a primitive. ISO date strings sort correctly as-is. */
+  sortGetter?: (row: T) => Comparable
+  /** Returns the string a text-search query is matched against. Falls
+   *  back to the stringified sortGetter result. */
+  searchGetter?: (row: T) => string
+  /** Initial visibility (default `true`). */
+  visible?: boolean
+  /** Hide-able via the column menu (default `true`). */
+  toggleable?: boolean
+  /** Right-align cell content (numeric columns). */
+  alignRight?: boolean
+  /** Optional icon component for the header. */
+  icon?: Component
+  /** Marks the identifying column. When set (and no `#cell-<key>` slot is
+   *  given) the DataTable renders the value as the bold record anchor —
+   *  `font-semibold text-[#0B0522]`, truncated — optionally led by a tinted
+   *  icon tile (see `cellIcon`). One per table. (datatable-ux) */
+  primary?: boolean
+  /** Leading tinted icon tile for the cell (typically the `primary` column).
+   *  A static icon component, rendered as the `bg-primary/10` rounded tile the
+   *  scanning rules call for. (For a per-row icon use a `#cell-<key>` slot —
+   *  `cellIcon` must NOT be a getter: Solar icons are functional components, so
+   *  the table can't tell a getter from an icon and would crash invoking it.) */
+  cellIcon?: Component
+}
+
+/** A built-in filter dimension rendered under the generic "Filter" dropdown as
+ *  a labelled sub-menu (datatable-ux). Static mode only: the DataTable filters
+ *  `data` in-memory and shows a count per option. Pass one, or an array of
+ *  several dimensions — each becomes its own sub-menu. */
+export interface DataTableFilter<T = unknown> {
+  /** Stable id for this dimension (defaults to `label`). */
+  key?: string
+  /** Sub-menu title, e.g. "Status" (default `Status`). */
+  label?: string
+  /** The row's value for this dimension (e.g. `r => r.status`). */
+  getter: (row: T) => string | null | undefined
+  /** The selectable values + their labels. */
+  options: { value: string, label: string }[]
+  /** Label for the reset/"all" entry (default `All`). */
+  allLabel?: string
+}
+
+export type SortDirection = 'asc' | 'desc' | null
+
+export interface SortState {
+  column: string | null
+  direction: SortDirection
+}
+
+export interface DataTableState {
+  search: string
+  sort: SortState
+  page: number
+  pageSize: number
+}
+
+export type RowKey<T> = keyof T | ((row: T) => string | number)

package/components/Shared/BuildLogsFlyout.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { RefreshCircle as Loader2, Copy as CopyIcon } from '#solar-icons'
+import {
+  Badge,
+  Button,
+  Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle,
+} from '@revenexx/studio'
+import { toast } from 'vue-sonner'
+
+/**
+ * Minimal shape of a site deployment — just the fields this flyout renders.
+ * Kept local so studio-shared has no dependency on the private SDK; a full
+ * SDK `Models.Deployment` is structurally assignable to it.
+ */
+interface BuildDeployment {
+  $id?: string
+  status?: string
+  buildLogs?: string
+  buildDuration?: number
+  providerBranch?: string
+  providerCommitHash?: string
+  providerCommitUrl?: string
+}
+
+defineProps<{
+  open: boolean
+  deployment: BuildDeployment | null
+  loading: boolean
+  isBuilding?: boolean
+  userPinned?: boolean
+  error?: string | null
+}>()
+
+const emit = defineEmits<{
+  'update:open': [boolean]
+  'refresh': []
+}>()
+
+async function copyId(id: string | undefined) {
+  if (!id) return
+  try {
+    await navigator.clipboard.writeText(id)
+    toast.success('ID copied')
+  }
+  catch {
+    toast.error('Could not copy')
+  }
+}
+</script>
+
+<template>
+  <Sheet :open="open" @update:open="(v: boolean) => emit('update:open', v)">
+    <SheetContent side="right" class="flex w-full flex-col gap-0 p-0 sm:max-w-[max(50vw,640px)]">
+      <SheetHeader class="border-b px-4 py-3">
+        <div class="flex items-center gap-2">
+          <Badge variant="outline" class="shrink-0">Build</Badge>
+          <SheetTitle class="truncate font-mono text-sm">
+            {{ deployment?.$id || 'Build logs' }}
+          </SheetTitle>
+          <button v-if="deployment?.$id" title="Copy ID" class="ml-auto" @click="copyId(deployment.$id)">
+            <CopyIcon :size="12" class="text-muted-foreground hover:text-foreground" />
+          </button>
+        </div>
+        <SheetDescription v-if="deployment" class="flex items-center gap-2 text-xs">
+          <span v-if="deployment.providerBranch" class="font-mono">{{ deployment.providerBranch }}</span>
+          <template v-if="deployment.providerCommitHash">
+            <span class="text-muted-foreground">·</span>
+            <a
+              v-if="deployment.providerCommitUrl"
+              :href="deployment.providerCommitUrl"
+              target="_blank"
+              rel="noreferrer"
+              class="font-mono hover:underline"
+            >{{ deployment.providerCommitHash.slice(0, 7) }}</a>
+            <span v-else class="font-mono">{{ deployment.providerCommitHash.slice(0, 7) }}</span>
+          </template>
+          <template v-if="userPinned">
+            <span class="text-muted-foreground">·</span>
+            <span>pinned</span>
+          </template>
+        </SheetDescription>
+      </SheetHeader>
+
+      <div class="flex-1 overflow-y-auto">
+        <div v-if="loading && !deployment" class="py-8 text-center text-sm text-muted-foreground">
+          <Loader2 :size="16" class="mr-2 inline animate-spin" /> Loading…
+        </div>
+        <p v-else-if="error" class="p-4 text-sm text-rose-700">{{ error }}</p>
+
+        <template v-else-if="deployment">
+          <div class="flex items-center justify-between gap-2 px-4 py-2 border-b bg-muted/30">
+            <span class="text-xs text-muted-foreground">
+              Status: <span class="font-medium text-foreground">{{ deployment.status || '—' }}</span>
+              <template v-if="deployment.buildDuration">
+                · {{ deployment.buildDuration }}s
+              </template>
+            </span>
+            <div class="flex items-center gap-2">
+              <Loader2 v-if="isBuilding || loading" :size="12" class="animate-spin text-muted-foreground" />
+              <Button variant="ghost" size="sm" class="h-6 text-xs" @click="emit('refresh')">
+                Refresh
+              </Button>
+            </div>
+          </div>
+
+          <div class="p-4">
+            <pre
+              v-if="deployment.buildLogs"
+              class="min-h-[300px] max-h-[calc(100vh-180px)] overflow-auto rounded-md border bg-[#0B0522] text-emerald-100 p-4 font-mono text-sm leading-relaxed whitespace-pre-wrap"
+            >{{ stripAnsi(deployment.buildLogs) }}</pre>
+            <p v-else-if="isBuilding" class="flex items-center gap-2 text-sm text-muted-foreground py-8">
+              <Loader2 :size="12" class="animate-spin" />
+              Waiting for first log output…
+            </p>
+            <p v-else class="text-sm text-muted-foreground py-8 text-center">
+              No logs captured for this build.
+            </p>
+          </div>
+        </template>
+
+        <div v-else class="py-12 text-center text-sm text-muted-foreground">
+          Select a build from the list to see its logs.
+        </div>
+      </div>
+    </SheetContent>
+  </Sheet>
+</template>

package/components/Shared/GitDeploymentSettings.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+/**
+ * Deployment-trigger settings for a git-connected resource (app / site /
+ * integration). Two orthogonal controls, mapped to the platform attributes
+ * added in V33 (26.1.9):
+ *
+ *  - vcsTriggerMode ('push' | 'tag'): when a deployment is triggered — on every
+ *    branch push, or only when a tag is pushed / a GitHub release is published.
+ *  - vcsPreviewsEnabled: whether pull requests get a preview deployment + a
+ *    status comment. Hidden via `showPreviews=false` for resources where it
+ *    makes no sense.
+ *
+ * Presentational only — two v-models, parent owns persistence.
+ */
+import {
+  Card, CardContent, CardDescription, CardHeader, CardTitle,
+  Label,
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+  Switch,
+} from '@revenexx/studio'
+
+withDefaults(defineProps<{
+  triggerMode: string
+  previewsEnabled: boolean
+  disabled?: boolean
+  showPreviews?: boolean
+}>(), {
+  disabled: false,
+  showPreviews: true,
+})
+
+defineEmits<{
+  'update:triggerMode': [value: string]
+  'update:previewsEnabled': [value: boolean]
+}>()
+</script>
+
+<template>
+  <Card class="bg-white/60 backdrop-blur-sm">
+    <CardHeader>
+      <CardTitle class="text-sm">Deployment triggers</CardTitle>
+      <CardDescription class="text-sm">
+        Control when a git push deploys this resource.
+      </CardDescription>
+    </CardHeader>
+    <CardContent class="space-y-4">
+      <div class="space-y-1">
+        <Label for="vcs-trigger-mode">When to deploy</Label>
+        <Select
+          :model-value="triggerMode"
+          :disabled="disabled"
+          @update:model-value="(v) => $emit('update:triggerMode', v as string)"
+        >
+          <SelectTrigger id="vcs-trigger-mode">
+            <SelectValue placeholder="On every push" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="push">On every push</SelectItem>
+            <SelectItem value="tag">Only on tag / release</SelectItem>
+          </SelectContent>
+        </Select>
+        <p class="text-sm text-muted-foreground">
+          <template v-if="triggerMode === 'tag'">
+            Builds only when you push a tag or publish a GitHub release.
+          </template>
+          <template v-else>
+            Builds on every push to the production branch.
+          </template>
+        </p>
+      </div>
+
+      <div v-if="showPreviews" class="flex items-center gap-2 pt-1">
+        <Switch
+          :model-value="previewsEnabled"
+          :disabled="disabled"
+          @update:model-value="(v) => $emit('update:previewsEnabled', v as boolean)"
+        />
+        <div class="text-sm">
+          <div class="font-medium">Preview deployments</div>
+          <div class="text-sm text-muted-foreground">
+            Build a preview and comment the status on every pull request.
+          </div>
+        </div>
+      </div>
+    </CardContent>
+  </Card>
+</template>

package/components/Shared/KpiTile.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+/**
+ * Polished KPI tile — the standard big-number card used across dashboards.
+ * Refined card token (hairline border + outline), tinted icon chip, large
+ * tabular value, optional delta (up/down) and a sub line. Optionally a link.
+ */
+import { NuxtLink } from '#components'
+
+defineProps<{
+  label: string
+  value: string | number
+  icon?: unknown
+  /** Colored change indicator, e.g. "+12.5%". */
+  delta?: string
+  up?: boolean
+  /** Muted line under the value (e.g. "vs last month"). */
+  sub?: string
+  to?: string
+}>()
+</script>
+
+<template>
+  <component
+    :is="to ? NuxtLink : 'div'"
+    :to="to"
+    class="block rounded-lg border border-gray-400/10 outline-1 outline-white/30"
+    :class="to ? 'transition-transform hover:-translate-y-0.5' : ''"
+  >
+    <div class="relative h-full overflow-hidden rounded-lg bg-white p-4">
+      <div class="flex items-center justify-between gap-2">
+        <span class="text-xs text-muted-foreground truncate">{{ label }}</span>
+        <span v-if="icon" class="flex size-7 items-center justify-center rounded-md bg-primary/10 text-primary shrink-0"><component :is="icon" :size="14" /></span>
+      </div>
+      <div class="mt-1.5 text-2xl font-semibold leading-none tabular-nums text-[#0B0522]">{{ value }}</div>
+      <div v-if="delta || sub" class="mt-1.5 text-xs">
+        <span v-if="delta" class="font-medium tabular-nums" :class="up ? 'text-emerald-600' : 'text-rose-600'">{{ delta }}</span>
+        <span v-if="sub" class="text-muted-foreground" :class="delta ? 'ml-1' : ''">{{ sub }}</span>
+      </div>
+    </div>
+  </component>
+</template>

package/components/Shared/PageHeader.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+defineProps<{
+  /** Lucide icon component shown left of the title. Rendered as a plain
+   *  outline icon (no tile background) to keep the header calm. */
+  icon?: unknown
+  title: string
+  description?: string
+}>()
+</script>
+
+<template>
+  <div class="sticky top-0 z-20 border-b border-black/[0.06] bg-white/40 backdrop-blur-xl">
+    <div class="flex items-center gap-2 px-4 pt-4 pb-3">
+      <component
+        :is="icon"
+        v-if="icon"
+        :size="18"
+        :stroke-width="2"
+        class="shrink-0 text-foreground/70"
+      />
+      <h1 class="text-xl font-medium text-[#0B0522] truncate">
+        <slot name="title">{{ title }}</slot>
+      </h1>
+
+      <div class="flex-1" />
+
+      <slot name="actions" />
+    </div>
+
+    <div v-if="$slots.tabs" class="flex items-center gap-1 px-3 pb-2 overflow-x-auto">
+      <slot name="tabs" />
+    </div>
+  </div>
+</template>

package/components/Shared/SidebarNav.vue

@@ -0,0 +1,100 @@
+<script lang="ts">
+import type { Component } from 'vue'
+
+export type SidebarNavItem = {
+  label: string
+  to: string
+  icon?: Component
+  badge?: number | string | null
+  /** Dim + show a "soon" tag (not-yet-shipped surfaces). */
+  preview?: boolean
+  /** Match the route exactly (for studio roots like `/settings`). */
+  exact?: boolean
+}
+
+export type SidebarNavSection = {
+  key: string
+  /** Empty/omitted → no group label (pinned items at the top). */
+  label?: string
+  items: SidebarNavItem[]
+}
+</script>
+
+<script setup lang="ts">
+/**
+ * Shared studio sidebar.
+ *
+ * Header (icon + title) + a sectioned, link list driven by data. Every
+ * studio sidebar (Settings, Integrations, Commerce, Apps, …) renders
+ * through this so spacing, active state, badges and "soon" tags stay
+ * identical. Pass `sections`; use `#notice` for loading/empty hints.
+ */
+import type { Component } from 'vue'
+
+defineProps<{
+  title: string
+  icon?: Component
+  sections: SidebarNavSection[]
+  /** Hide the header icon and use a lighter header title weight. */
+  minimal?: boolean
+}>()
+
+const route = useRoute()
+function isActive(item: SidebarNavItem): boolean {
+  if (item.exact) return route.path === item.to
+  return route.path === item.to || route.path.startsWith(`${item.to}/`)
+}
+</script>
+
+<template>
+  <aside class="h-full flex flex-col">
+    <div class="flex items-center gap-2 px-4 pt-4 pb-3 shrink-0 border-b border-black/[0.06]">
+      <slot v-if="!minimal" name="icon">
+        <component :is="icon" v-if="icon" :size="18" :stroke-width="2" class="text-foreground/70 shrink-0" />
+      </slot>
+      <h2 class="text-lg text-[#0B0522] truncate" :class="minimal ? 'font-medium' : 'font-semibold'">
+        {{ title }}
+      </h2>
+    </div>
+
+    <div class="flex-1 overflow-y-auto pt-3 pb-3">
+      <slot name="top" />
+
+      <template v-for="section in sections" :key="section.key">
+        <div v-if="section.label" class="mt-3 px-4 pb-1">
+          <div class="text-mono text-muted-foreground">
+            {{ section.label }}
+          </div>
+        </div>
+        <nav class="flex flex-col gap-0.5 px-2">
+          <NuxtLink
+            v-for="item in section.items"
+            :key="item.to"
+            :to="item.to"
+            class="group flex items-center gap-2.5 rounded-md px-2 py-1.5 text-sm transition-colors hover:text-primary"
+            :class="[
+              isActive(item)
+                ? 'bg-primary/10 text-[#0B0522] font-medium'
+                : 'text-foreground/80 hover:bg-primary/5',
+              item.preview ? 'opacity-70' : '',
+            ]"
+          >
+            <component :is="item.icon" v-if="item.icon" :size="14" :stroke-width="2" class="shrink-0 text-foreground/60 group-hover:text-primary" />
+            <span class="flex-1 truncate flex items-center gap-1.5">
+              {{ item.label }}
+              <span
+                v-if="item.preview"
+                class="rounded bg-muted px-1 text-mono text-muted-foreground"
+                title="Coming soon"
+              >
+                soon
+              </span>
+            </span>
+          </NuxtLink>
+        </nav>
+      </template>
+
+      <slot name="notice" />
+    </div>
+  </aside>
+</template>

package/components/Shared/SortHeader.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { RoundSortVertical, SortFromBottomToTop, SortFromTopToBottom } from '#solar-icons'
+
+// Clickable column header for data tables (datatable-ux). One Solar sort
+// glyph that switches with the sort state — matching cover's tokens:
+//   idle  → round-sort-vertical
+//   asc   → sort-from-bottom-to-top
+//   desc  → sort-from-top-to-bottom
+// Outline weight (Linear), never duotone. Active = primary accent;
+// inactive = dimmed, revealed on hover.
+//
+//   <SortHeader column="name" :active="sort.column"
+//     :direction="sort.direction" @toggle="toggle">Name</SortHeader>
+
+const props = defineProps<{
+  column: string
+  active: string | null
+  direction: 'asc' | 'desc' | null
+  /** Right-align the indicator for numeric columns. */
+  alignRight?: boolean
+}>()
+
+const emit = defineEmits<{ toggle: [column: string] }>()
+
+const isActive = computed(() => props.active === props.column && !!props.direction)
+const sortIcon = computed(() => {
+  if (isActive.value && props.direction === 'asc') return SortFromBottomToTop
+  if (isActive.value && props.direction === 'desc') return SortFromTopToBottom
+  return RoundSortVertical
+})
+</script>
+
+<template>
+  <button
+    type="button"
+    class="group inline-flex cursor-pointer items-center gap-1.5 -m-1 p-1 rounded-md text-left transition-colors hover:text-primary"
+    :class="alignRight ? 'flex-row-reverse w-full justify-end' : ''"
+    @click="emit('toggle', column)"
+  >
+    <slot />
+    <component
+      :is="sortIcon"
+      weight="Linear"
+      :size="14"
+      class="shrink-0 transition-colors"
+      :class="isActive ? 'text-primary' : 'text-foreground/30 group-hover:text-primary'"
+      aria-hidden="true"
+    />
+  </button>
+</template>

package/components/Shared/StateCard.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+/**
+ * Shared empty / loading / error / not-found state.
+ *
+ * One calm centered card used across the studios so every "nothing here
+ * yet", "still loading" and "something broke" surface looks the same.
+ * Pass copy via props; put a CTA in the `#actions` slot.
+ */
+import type { Component } from 'vue'
+import {
+  Card, CardContent, CardDescription, CardHeader, CardTitle,
+} from '@revenexx/studio'
+import { Box as Boxes, DangerTriangle as AlertTriangle, MagniferZoomIn as Magnifier } from '#solar-icons'
+
+type Variant = 'empty' | 'loading' | 'error' | 'notfound'
+
+const props = withDefaults(defineProps<{
+  variant?: Variant
+  /** Override the default icon for the variant. */
+  icon?: Component
+  title: string
+  description?: string
+}>(), {
+  variant: 'empty',
+})
+
+const defaultIcon: Record<Variant, Component> = {
+  empty: Boxes,
+  loading: Boxes,
+  error: AlertTriangle,
+  notfound: Magnifier,
+}
+
+const resolvedIcon = computed(() => props.icon ?? defaultIcon[props.variant])
+
+const tileClass = computed(() =>
+  props.variant === 'error'
+    ? 'bg-rose-500/10 text-rose-600'
+    : 'bg-primary/10 text-primary',
+)
+</script>
+
+<template>
+  <Card class="bg-white/60 backdrop-blur-sm">
+    <CardHeader class="items-center text-center">
+      <div
+        class="flex size-12 items-center justify-center rounded-full mb-2"
+        :class="tileClass"
+      >
+        <span
+          v-if="variant === 'loading'"
+          class="size-5 rounded-full border-2 border-primary/30 border-t-primary animate-spin"
+        />
+        <component :is="resolvedIcon" v-else :size="22" />
+      </div>
+      <CardTitle>{{ title }}</CardTitle>
+      <CardDescription v-if="description">
+        {{ description }}
+      </CardDescription>
+      <slot name="description" />
+    </CardHeader>
+    <CardContent v-if="$slots.actions" class="flex justify-center">
+      <slot name="actions" />
+    </CardContent>
+  </Card>
+</template>

package/components/Shared/StudioCard.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+/**
+ * The standard cockpit card — the 2-layer "glass" used on the dashboard:
+ * an outer transparent ring (hairline border + white outline) wrapping a solid
+ * white inner pane clipped to the radius. Use everywhere instead of a single
+ * bordered div. Optional `to` makes the whole card a link.
+ */
+import { NuxtLink } from '#components'
+
+defineProps<{ to?: string }>()
+</script>
+
+<template>
+  <component
+    :is="to ? NuxtLink : 'div'"
+    :to="to"
+    class="block rounded-lg border border-gray-400/10 outline-1 outline-white/30"
+    :class="to ? 'transition-transform hover:-translate-y-0.5' : ''"
+  >
+    <div class="relative h-full overflow-hidden rounded-lg bg-white">
+      <slot />
+    </div>
+  </component>
+</template>

package/components/Shared/TabBar.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+/**
+ * Underline tab bar — the standard cockpit detail-page tabs. A full-width
+ * hairline sits behind the row; the active/hover indicator is a 2px bar that
+ * spans exactly the label width (inset-x-3 = the px-3 padding), sitting on the
+ * baseline over the hairline. Active = primary; hover = soft primary. Tabs
+ * scroll horizontally on overflow. To bleed the line to the panel edges, pass
+ * e.g. `class="-mx-4 px-4"` from a padded page.
+ */
+export interface TabItem { key: string, label: string, badge?: number | string | null }
+
+defineProps<{ tabs: TabItem[], modelValue: string }>()
+defineEmits<{ 'update:modelValue': [key: string] }>()
+</script>
+
+<template>
+  <!-- Sticks flush against the bottom of the sticky PageHeader (57px = its
+       pt-4 pb-3 + text-xl line + 1px border) so header and tabs stay glued as
+       one unit while the panel scrolls. Glassy frosted bg (blur + low opacity)
+       lets content scroll through. -->
+  <div class="sticky top-[57px] z-10 bg-white/40 backdrop-blur-xl">
+    <!-- Pull the row out by the tab padding so the first/last label sits flush
+         with the surrounding content (headline) edges. -->
+    <div class="relative z-10 -mx-2.5 flex gap-1 overflow-x-auto">
+      <button
+        v-for="t in tabs"
+        :key="t.key"
+        type="button"
+        class="group relative shrink-0 cursor-pointer whitespace-nowrap px-2.5 py-2 text-sm font-medium transition-colors"
+        :class="modelValue === t.key
+          ? 'text-[#0B0522] hover:text-primary'
+          : 'text-[#0B0522]/80 hover:text-primary'"
+        @click="$emit('update:modelValue', t.key)"
+      >
+        {{ t.label }}
+        <span
+          v-if="t.badge"
+          class="ml-1 rounded-full bg-muted px-1.5 text-mono font-medium tabular-nums text-muted-foreground"
+        >{{ t.badge }}</span>
+        <!-- 2px indicator, exactly under the label (inset-x-3 = px-3). -->
+        <span
+          class="pointer-events-none absolute inset-x-2.5 bottom-0 h-0.5 rounded-full transition-colors"
+          :class="modelValue === t.key ? 'bg-primary' : 'bg-transparent group-hover:bg-primary/40'"
+        />
+      </button>
+    </div>
+    <!-- Full-width hairline behind the tabs. -->
+    <div class="pointer-events-none absolute inset-x-0 bottom-0 h-px bg-black/[0.06]" />
+  </div>
+</template>