@revenexx/studio-shared 0.1.0

package/README.md

@@ -0,0 +1,52 @@
+# @revenexx/studio-shared
+
+Shared revenexx **Studio shell primitives** (`PageHeader`, `SidebarNav`,
+`StateCard`, `StudioCard`, `TabBar`, `KpiTile`, `DataTable`, …) plus the
+**platform provider contract** (`usePlatformAuth` / `usePlatformTenant`).
+
+It's a **Nuxt layer** (ships source): you `extends` it, then add a studio
+module (`@revenexx/studio-integrations`, `@revenexx/studio-commerce`). It's a
+peer/base of those modules — install it alongside them.
+
+## Install
+
+Public on npm — no registry config or token needed:
+
+```bash
+pnpm add @revenexx/studio-shared @revenexx/studio
+```
+
+## Use
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  extends: ['@revenexx/studio-shared'],
+  modules: ['@solar-icons/nuxt'], // provides the #solar-icons the primitives use
+})
+```
+
+The components auto-import by bare name (`<PageHeader>`, `<DataTable>`, …). Types
+(`DataTableColumn`, `SidebarNavSection`, `PlatformAuth`, `PlatformTenant`) import
+from `@revenexx/studio-shared`.
+
+## ⚠️ Tailwind: you MUST scan this package
+
+The primitives ship **source**, not precompiled CSS — Tailwind generates their
+classes from **your** build. Add this package to your Tailwind sources, or
+classes used only here (e.g. the `TabBar` active 2px underline: `inset-x-2.5` +
+`bg-primary/40`) **won't be generated** and styling silently breaks:
+
+```css
+/* your app's main tailwind entry */
+@import "tailwindcss";
+@import "@revenexx/studio/tokens";   /* design-system tokens */
+@import "@revenexx/studio/fonts";
+@source "../node_modules/@revenexx/studio-shared/components";
+```
+
+Adjust the relative path to reach `node_modules` from your CSS file.
+
+## Peers
+`@revenexx/studio` (design system + tokens), `nuxt` ^4, `vue` ^3.5, plus the
+consumer must register `@solar-icons/nuxt`.

package/components/DataTable/ColumnsMenu.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { Widget as Columns, CheckCircle as Check } from '#solar-icons'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@revenexx/studio'
+import type { DataTableColumn } from './types'
+
+const props = defineProps<{
+  columns: DataTableColumn[]
+  /** Set of currently visible column keys. */
+  visible: Set<string>
+}>()
+
+const emit = defineEmits<{
+  toggle: [key: string]
+}>()
+
+const toggleable = computed(() => props.columns.filter(c => c.toggleable !== false))
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <button
+        type="button"
+        class="flex size-7 items-center justify-center rounded-md border border-black/[0.06] bg-white text-muted-foreground transition hover:text-foreground"
+        title="Columns"
+      >
+        <Columns :size="15" />
+      </button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end" class="w-48">
+      <DropdownMenuLabel class="text-sm text-muted-foreground">
+        Columns
+      </DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem
+        v-for="col in toggleable"
+        :key="col.key"
+        class="justify-between gap-2"
+        @select.prevent="emit('toggle', col.key)"
+      >
+        <span class="truncate">{{ col.label }}</span>
+        <Check
+          v-if="visible.has(col.key)"
+          :size="14"
+          class="text-muted-foreground shrink-0"
+        />
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>

package/components/DataTable/DataTable.vue

@@ -0,0 +1,518 @@
+<script setup lang="ts" generic="T">
+import { AltArrowDown, Filter, Magnifier as Search } from '#solar-icons'
+import {
+  Button,
+  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator,
+  DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger,
+  Input,
+} from '@revenexx/studio'
+import type { Component } from 'vue'
+import SortHeader from '../Shared/SortHeader.vue'
+import ColumnsMenu from './ColumnsMenu.vue'
+import FilterMenu from './FilterMenu.vue'
+import type { DataTableColumn, DataTableFilter, DataTableState, RowKey, SortState } from './types'
+
+// One DataTable to rule them all. Two operating modes:
+//
+//   Static (default): the table holds search/sort/page state internally
+//   and filters/sorts/paginates the `data` array in-memory.
+//
+//   Server (`server-mode`): the page owns the data pipeline. The table
+//   just renders `data` (the current page) and emits `state-change`
+//   whenever search / sort / page changes — the page should re-fetch.
+//   Pass `total` so the footer knows the un-paginated count.
+//
+// Per-row rendering is slot-based: `#cell-<key>` receives `{ row }`.
+// Cells fall back to the column's sortGetter value if no slot is given.
+
+const props = withDefaults(defineProps<{
+  data: T[]
+  columns: DataTableColumn<T>[]
+  rowKey: RowKey<T>
+
+  // Toolbar
+  search?: boolean | { placeholder?: string }
+  columnsMenu?: boolean
+  filter?: boolean
+  /** Built-in status/dimension filter pills (static mode). One dimension, or
+   *  several (each renders as its own sub-menu). */
+  filterTabs?: DataTableFilter<T> | DataTableFilter<T>[]
+
+  // Pagination
+  pagination?: boolean | { pageSize?: number }
+
+  // Sort
+  defaultSort?: { column: string, direction: 'asc' | 'desc' }
+
+  // Server mode
+  serverMode?: boolean
+  total?: number
+  loading?: boolean
+
+  // Empty state
+  emptyText?: string
+}>(), {
+  search: true,
+  columnsMenu: true,
+  filter: false,
+  pagination: true,
+  serverMode: false,
+  loading: false,
+})
+
+const emit = defineEmits<{
+  rowClick: [row: T]
+  stateChange: [state: DataTableState]
+}>()
+
+// ---------------------------------------------------------------------------
+// Internal state
+// ---------------------------------------------------------------------------
+const query = ref('')
+// `sort` and `page` are optionally controlled: a parent in server mode
+// can `v-model:sort` / `v-model:page` to stay authoritative over the data
+// pipeline (e.g. AppRenderer/ListView driving PostgREST). Left unbound,
+// they behave as plain local state seeded from `defaultSort`.
+const sort = defineModel<SortState>('sort', {
+  default: () => ({
+    column: null,
+    direction: null,
+  }),
+})
+const page = defineModel<number>('page', { default: 0 })
+if (props.defaultSort && sort.value.column == null) {
+  sort.value = { column: props.defaultSort.column, direction: props.defaultSort.direction }
+}
+// Page size is local state (the footer lets the user change it), seeded from
+// the `pagination.pageSize` prop. Defaults to 20.
+const pageSize = ref(
+  typeof props.pagination === 'object' && props.pagination?.pageSize
+    ? props.pagination.pageSize
+    : 20,
+)
+const pageSizeOptions = computed(() => Array.from(new Set([10, 20, 50, 100, pageSize.value])).sort((a, b) => a - b))
+
+// Column visibility — initialised once from column defaults.
+const visibleKeys = ref<Set<string>>(
+  new Set(props.columns.filter(c => c.visible !== false).map(c => c.key)),
+)
+function toggleColumn(key: string) {
+  const next = new Set(visibleKeys.value)
+  if (next.has(key)) next.delete(key)
+  else next.add(key)
+  visibleKeys.value = next
+}
+
+const visibleColumns = computed(() =>
+  props.columns.filter(c => visibleKeys.value.has(c.key)),
+)
+
+// ColumnsMenu is non-generic (DataTableColumn<unknown>[]); the per-row getters
+// make DataTableColumn<T> invariant in T, so widen for the menu prop.
+const menuColumns = computed(() => props.columns as unknown as DataTableColumn[])
+
+// ---------------------------------------------------------------------------
+// Static-mode data pipeline (search → sort → paginate). Skipped in
+// server mode; in server mode the page is expected to do this work and
+// pass back the already-prepared `data`.
+// ---------------------------------------------------------------------------
+function searchOf(col: DataTableColumn<T>, row: T): string {
+  if (col.searchGetter) return col.searchGetter(row).toLowerCase()
+  if (col.sortGetter) {
+    const v = col.sortGetter(row)
+    return v == null ? '' : String(v).toLowerCase()
+  }
+  const raw = (row as Record<string, unknown>)[col.key]
+  return raw == null ? '' : String(raw).toLowerCase()
+}
+
+// Filter dimensions (static mode) run before search. One or many dimensions,
+// each rendered as a sub-menu under the generic "Filter" dropdown.
+interface FilterDim { key: string, label: string, getter: (row: T) => string | null | undefined, options: { value: string, label: string }[], allLabel?: string }
+const filterDims = computed<FilterDim[]>(() => {
+  const raw = props.filterTabs
+  if (!raw) return []
+  const arr = Array.isArray(raw) ? raw : [raw]
+  return arr.map((f, i) => ({ key: f.key ?? f.label ?? `dim${i}`, label: f.label ?? 'Status', getter: f.getter, options: f.options, allLabel: f.allLabel }))
+})
+const activeFilters = ref<Record<string, string | null>>({})
+const anyFilterActive = computed(() => Object.values(activeFilters.value).some(Boolean))
+function setFilter(key: string, value: string | null) {
+  activeFilters.value = { ...activeFilters.value, [key]: value }
+}
+function dimCounts(d: FilterDim): Record<string, number> {
+  const m: Record<string, number> = {}
+  for (const row of props.data) { const k = String(d.getter(row) ?? ''); m[k] = (m[k] ?? 0) + 1 }
+  return m
+}
+const filtered = computed(() => {
+  if (props.serverMode || !filterDims.value.length) return props.data
+  const active = filterDims.value.filter(d => activeFilters.value[d.key])
+  if (!active.length) return props.data
+  return props.data.filter(row => active.every(d => String(d.getter(row) ?? '') === activeFilters.value[d.key]))
+})
+
+const searched = computed(() => {
+  if (props.serverMode) return props.data
+  const q = query.value.trim().toLowerCase()
+  if (!q) return filtered.value
+  return filtered.value.filter(row =>
+    props.columns.some(col => searchOf(col, row).includes(q)),
+  )
+})
+
+function sortKey(col: DataTableColumn<T>, row: T) {
+  if (col.sortGetter) return col.sortGetter(row)
+  const raw = (row as Record<string, unknown>)[col.key]
+  return raw as never
+}
+
+const sorted = computed(() => {
+  if (props.serverMode) return searched.value
+  const col = sort.value.column
+  const dir = sort.value.direction
+  if (!col || !dir) return searched.value
+  const c = props.columns.find(x => x.key === col)
+  if (!c) return searched.value
+  const sign = dir === 'asc' ? 1 : -1
+  return [...searched.value].sort((a, b) => {
+    const av = sortKey(c, a)
+    const bv = sortKey(c, b)
+    const aNull = av == null || av === ''
+    const bNull = bv == null || bv === ''
+    if (aNull && bNull) return 0
+    if (aNull) return 1
+    if (bNull) return -1
+    const aCmp = typeof av === 'boolean' ? (av ? 1 : 0) : av
+    const bCmp = typeof bv === 'boolean' ? (bv ? 1 : 0) : bv
+    if (aCmp < bCmp) return -1 * sign
+    if (aCmp > bCmp) return 1 * sign
+    return 0
+  })
+})
+
+const totalCount = computed(() =>
+  props.serverMode ? (props.total ?? props.data.length) : sorted.value.length,
+)
+
+const paginated = computed(() => {
+  if (props.serverMode || !props.pagination) return sorted.value
+  const start = page.value * pageSize.value
+  return sorted.value.slice(start, start + pageSize.value)
+})
+
+const displayedRows = computed(() => paginated.value)
+
+// Guarantee unique v-for keys. External data sources (e.g. the mail gateway's
+// queued/held messages) can hand back rows with a null or duplicated row-key;
+// duplicate keys make Vue's keyed patch crash on the next re-sort/re-filter
+// with "Cannot read properties of null (reading 'nextSibling')". Suffixing
+// repeats keeps every key distinct without changing what the page passed.
+const keyedRows = computed<{ row: T, key: string | number }[]>(() => {
+  const seen = new Map<string | number, number>()
+  return displayedRows.value.map((row) => {
+    const base = rowKeyFor(row) ?? '∅'
+    const n = seen.get(base) ?? 0
+    seen.set(base, n + 1)
+    return { row, key: n === 0 ? base : `${base}#${n}` }
+  })
+})
+
+// ---------------------------------------------------------------------------
+// State-change hook for server mode
+// ---------------------------------------------------------------------------
+function emitState() {
+  emit('stateChange', {
+    search: query.value,
+    sort: { ...sort.value },
+    page: page.value,
+    pageSize: pageSize.value,
+  })
+}
+watch([query, sort, page, pageSize], () => {
+  if (props.serverMode) emitState()
+})
+
+// Reset to first page whenever search / sort / filter / page-size changes.
+watch([query, sort, pageSize, activeFilters], () => {
+  page.value = 0
+}, { deep: true })
+
+// ---------------------------------------------------------------------------
+// Header sort
+// ---------------------------------------------------------------------------
+function toggleSort(column: string) {
+  if (sort.value.column !== column) {
+    sort.value = { column, direction: 'asc' }
+    return
+  }
+  if (sort.value.direction === 'asc') {
+    sort.value = { column, direction: 'desc' }
+    return
+  }
+  sort.value = { column: null, direction: null }
+}
+
+// ---------------------------------------------------------------------------
+// Misc
+// ---------------------------------------------------------------------------
+function rowKeyFor(row: T): string | number {
+  if (typeof props.rowKey === 'function') return props.rowKey(row)
+  return row[props.rowKey] as unknown as string | number
+}
+
+const gridTemplate = computed(() => {
+  const tracks = visibleColumns.value.map(c => c.width ?? 'minmax(0,1fr)')
+  return `grid-template-columns: ${tracks.join(' ')};`
+})
+
+const placeholder = computed(() =>
+  typeof props.search === 'object' ? (props.search.placeholder ?? 'Search…') : 'Search…',
+)
+
+const slots = useSlots()
+const showToolbar = computed(() =>
+  props.search || props.columnsMenu || props.filter || !!props.filterTabs || !!slots.actions || !!slots['toolbar-left'],
+)
+
+// Leading icon tile for a (primary) column. `cellIcon` is a component — we must
+// NOT call it: Solar icons are functional components (typeof === 'function'), so
+// a `typeof ci === 'function'` "is this a getter?" check wrongly invokes the
+// icon as `icon(row)` and it crashes destructuring its render context. For a
+// per-row icon, use a `#cell-<key>` slot instead.
+function cellIconFor(col: DataTableColumn<T>): Component | null {
+  return col.cellIcon ?? null
+}
+const showFooter = computed(() => props.pagination !== false)
+
+// Pagination
+const lastPage = computed(() =>
+  pageSize.value > 0 ? Math.max(0, Math.ceil(totalCount.value / pageSize.value) - 1) : 0,
+)
+const rangeStart = computed(() => totalCount.value === 0 ? 0 : page.value * pageSize.value + 1)
+const rangeEnd = computed(() =>
+  Math.min((page.value + 1) * pageSize.value, totalCount.value),
+)
+
+function prevPage() {
+  if (page.value > 0) page.value -= 1
+}
+function nextPage() {
+  if (page.value < lastPage.value) page.value += 1
+}
+
+// Default cell value when no slot is provided.
+function defaultCell(col: DataTableColumn<T>, row: T): string {
+  const v = col.sortGetter
+    ? col.sortGetter(row)
+    : (row as Record<string, unknown>)[col.key]
+  if (v == null) return '—'
+  return String(v)
+}
+</script>
+
+<template>
+  <div class="rounded-lg border border-black/[0.06] overflow-hidden flex flex-col">
+    <!-- Toolbar ------------------------------------------------------ -->
+    <!-- Toolbar: LEFT = search · filter · columns · RIGHT = actions.
+         (Pagination always lives in the footer.) -->
+    <div
+      v-if="showToolbar"
+      class="flex items-center justify-between gap-2 px-4 py-3 bg-white/55 backdrop-blur-md"
+    >
+      <div class="flex items-center gap-2 min-w-0">
+        <div v-if="search" class="relative w-[21rem] max-w-full">
+          <Search :size="13" class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            v-model="query"
+            :placeholder="placeholder"
+            class="h-7 pl-8 text-sm bg-white"
+          />
+        </div>
+        <!-- Generic "Filter" dropdown — each dimension is a labelled sub-menu. -->
+        <DropdownMenu v-if="filterDims.length">
+          <DropdownMenuTrigger as-child>
+            <Button
+              variant="outline"
+              size="sm"
+              class="h-7 gap-1.5 text-sm"
+              :class="anyFilterActive ? 'border-primary/30 text-primary' : ''"
+            >
+              <Filter :size="14" />
+              Filter
+              <AltArrowDown :size="12" class="opacity-60" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" class="w-48">
+            <DropdownMenuSub v-for="d in filterDims" :key="d.key">
+              <DropdownMenuSubTrigger class="gap-2">
+                <span class="flex-1">{{ d.label }}</span>
+                <span v-if="activeFilters[d.key]" class="text-xs text-primary capitalize">{{ activeFilters[d.key] }}</span>
+              </DropdownMenuSubTrigger>
+              <DropdownMenuSubContent class="w-48">
+                <DropdownMenuItem class="gap-2" @select="setFilter(d.key, null)">
+                  <span class="flex-1">{{ d.allLabel ?? 'All' }}</span>
+                  <span class="tabular-nums text-muted-foreground">{{ data.length }}</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  v-for="o in d.options"
+                  :key="o.value"
+                  class="gap-2"
+                  @select="setFilter(d.key, o.value)"
+                >
+                  <span class="flex-1">{{ o.label }}</span>
+                  <span class="tabular-nums text-muted-foreground">{{ dimCounts(d)[o.value] ?? 0 }}</span>
+                </DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <FilterMenu v-if="filter">
+          <slot name="filter-menu" />
+        </FilterMenu>
+        <ColumnsMenu
+          v-if="columnsMenu"
+          :columns="menuColumns"
+          :visible="visibleKeys"
+          @toggle="toggleColumn"
+        />
+        <slot name="toolbar-left" />
+      </div>
+      <div class="flex items-center gap-1.5 ml-auto shrink-0">
+        <slot name="actions" />
+      </div>
+    </div>
+
+    <!-- Header row -------------------------------------------------- -->
+    <div
+      class="grid items-center gap-2 border-t rounded-t-lg border-gray-200 bg-gray-100 px-4 py-2.5 text-sm font-medium uppercase tracking-normal text-muted-foreground"
+      :style="gridTemplate"
+    >
+      <div
+        v-for="col in visibleColumns"
+        :key="col.key"
+        :class="col.alignRight ? 'text-right' : ''"
+      >
+        <SortHeader
+          v-if="col.sortable"
+          :column="col.key"
+          :active="sort.column"
+          :direction="sort.direction"
+          :align-right="col.alignRight"
+          @toggle="toggleSort"
+        >
+          {{ col.label }}
+        </SortHeader>
+        <span v-else>{{ col.label }}</span>
+      </div>
+    </div>
+
+    <!-- Body --------------------------------------------------------- -->
+    <div
+      v-for="{ row, key } in keyedRows"
+      :key="key"
+      class="group grid items-center gap-2 border-t border-black/[0.04] px-4 py-3 cursor-pointer bg-gray-50 transition-colors"
+      :style="gridTemplate"
+      @click="emit('rowClick', row)"
+    >
+      <div
+        v-for="col in visibleColumns"
+        :key="col.key"
+        class="min-w-0"
+        :class="col.alignRight ? 'text-right' : ''"
+      >
+        <slot :name="`cell-${col.key}`" :row="row">
+          <!-- Primary column: bold record anchor + optional tinted icon tile. -->
+          <div v-if="col.primary" class="flex items-center gap-2.5 min-w-0">
+            <span
+              v-if="cellIconFor(col)"
+              class="flex size-7 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary"
+            >
+              <component :is="cellIconFor(col)" :size="13" />
+            </span>
+            <span class="text-sm font-semibold text-[#0B0522] truncate transition-colors group-hover:text-primary">{{ defaultCell(col, row) }}</span>
+          </div>
+          <span v-else class="text-sm truncate">{{ defaultCell(col, row) }}</span>
+        </slot>
+      </div>
+    </div>
+
+    <!-- Loading skeleton (only when there are no rows yet) ----------- -->
+    <template v-if="loading && !displayedRows.length">
+      <div
+        v-for="n in 6"
+        :key="`sk-${n}`"
+        class="grid items-center gap-2 border-t border-black/[0.04] bg-gray-50 px-4 py-3"
+        :style="gridTemplate"
+      >
+        <div
+          v-for="col in visibleColumns"
+          :key="col.key"
+          :class="col.alignRight ? 'flex justify-end' : ''"
+        >
+          <div
+            class="h-3 rounded bg-black/[0.07] animate-pulse"
+            :class="col.alignRight ? 'w-10' : 'w-2/3'"
+          />
+        </div>
+      </div>
+    </template>
+
+    <!-- Empty -------------------------------------------------------- -->
+    <div
+      v-if="!displayedRows.length && !loading"
+      class="px-3 py-8 text-center text-sm text-muted-foreground"
+    >
+      <slot name="empty">
+        {{ emptyText ?? 'No entries.' }}
+      </slot>
+    </div>
+
+    <!-- Footer ------------------------------------------------------- -->
+    <div
+      v-if="showFooter"
+      class="flex items-center justify-between gap-2 border-t border-gray-200 bg-white/55 backdrop-blur-md px-4 py-3 text-sm text-muted-foreground/60"
+    >
+      <div class="flex items-center gap-2.5">
+        <span class="tabular-nums">
+          <span v-if="totalCount === 0">No results</span>
+          <span v-else>Showing {{ rangeStart }}–{{ rangeEnd }} of {{ totalCount }}</span>
+        </span>
+        <span class="text-muted-foreground/40">-</span>
+        <label class="flex items-center gap-1.5">
+          <span class="hidden sm:inline">Rows per page</span>
+          <select
+            v-model.number="pageSize"
+            class="h-7 rounded-md border border-input bg-white px-1.5 text-sm tabular-nums focus:outline-none focus:ring-1 focus:ring-ring"
+          >
+            <option v-for="s in pageSizeOptions" :key="s" :value="s">{{ s }}</option>
+          </select>
+        </label>
+      </div>
+      <div v-if="lastPage > 0" class="flex items-center gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          class="h-7 text-sm"
+          :disabled="page === 0 || loading"
+          @click="prevPage"
+        >
+          Previous
+        </Button>
+        <span class="tabular-nums">
+          {{ page + 1 }} / {{ lastPage + 1 }}
+        </span>
+        <Button
+          variant="outline"
+          size="sm"
+          class="h-7 text-sm"
+          :disabled="page >= lastPage || loading"
+          @click="nextPage"
+        >
+          Next
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>

package/components/DataTable/FilterMenu.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { Filter } from '#solar-icons'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@revenexx/studio'
+
+// Placeholder filter affordance — exposes the icon + dropdown shell so
+// pages can mount custom filter chips inside via the default slot. Wire
+// up actual filter state at the call site.
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <button
+        type="button"
+        class="flex size-7 items-center justify-center rounded-md border border-black/[0.06] bg-white text-muted-foreground transition hover:text-foreground"
+        title="Filter"
+      >
+        <Filter :size="12" />
+      </button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end" class="w-56">
+      <DropdownMenuLabel class="text-sm text-muted-foreground">
+        Filter
+      </DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      <slot>
+        <DropdownMenuItem disabled>
+          No filters defined.
+        </DropdownMenuItem>
+      </slot>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>