@revenexx/studio-shared 0.1.1 → 0.2.0

package/components/DataTable/DataTable.vue

@@ -1,518 +0,0 @@
-<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/types.ts

@@ -1,82 +0,0 @@
-// 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/SortHeader.vue

@@ -1,50 +0,0 @@
-<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/StudioCard.vue

@@ -1,24 +0,0 @@
-<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>