@revenexx/studio-shared 0.1.2 → 0.2.0

package/dist/runtime/components/DataTable/DataTable.vue

@@ -0,0 +1,453 @@
+<script setup>
+import { AltArrowDown, Filter, Magnifier as Search } from "#solar-icons";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  Input
+} from "@revenexx/studio";
+import SortHeader from "../Shared/SortHeader.vue";
+import ColumnsMenu from "./ColumnsMenu.vue";
+import FilterMenu from "./FilterMenu.vue";
+const props = defineProps({
+  data: { type: Array, required: true },
+  columns: { type: Array, required: true },
+  rowKey: { type: Function, required: true, skipCheck: true },
+  search: { type: [Boolean, Object], required: false, default: true },
+  columnsMenu: { type: Boolean, required: false, default: true },
+  filter: { type: Boolean, required: false, default: false },
+  filterTabs: { type: [Object, Array], required: false },
+  pagination: { type: [Boolean, Object], required: false, default: true },
+  defaultSort: { type: Object, required: false },
+  serverMode: { type: Boolean, required: false, default: false },
+  total: { type: Number, required: false },
+  loading: { type: Boolean, required: false, default: false },
+  emptyText: { type: String, required: false },
+  groupBy: { type: [Function, null], required: false, default: null },
+  groupEmptyLabel: { type: String, required: false }
+});
+const emit = defineEmits(["rowClick", "stateChange"]);
+const query = ref("");
+const sort = defineModel("sort", { type: Object, ...{
+  default: () => ({
+    column: null,
+    direction: null
+  })
+} });
+const page = defineModel("page", { type: Number, ...{ default: 0 } });
+if (props.defaultSort && sort.value.column == null) {
+  sort.value = { column: props.defaultSort.column, direction: props.defaultSort.direction };
+}
+const pageSize = ref(
+  typeof props.pagination === "object" && props.pagination?.pageSize ? props.pagination.pageSize : 20
+);
+const pageSizeOptions = computed(() => Array.from(/* @__PURE__ */ new Set([10, 20, 50, 100, pageSize.value])).sort((a, b) => a - b));
+const visibleKeys = ref(
+  new Set(props.columns.filter((c) => c.visible !== false).map((c) => c.key))
+);
+function toggleColumn(key) {
+  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))
+);
+const menuColumns = computed(() => props.columns);
+function searchOf(col, row) {
+  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[col.key];
+  return raw == null ? "" : String(raw).toLowerCase();
+}
+const filterDims = computed(() => {
+  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({});
+const anyFilterActive = computed(() => Object.values(activeFilters.value).some(Boolean));
+function setFilter(key, value) {
+  activeFilters.value = { ...activeFilters.value, [key]: value };
+}
+function dimCounts(d) {
+  const m = {};
+  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, row) {
+  if (col.sortGetter) return col.sortGetter(row);
+  const raw = row[col.key];
+  return raw;
+}
+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(() => props.groupBy ? sorted.value : paginated.value);
+const keyedRows = computed(() => {
+  const seen = /* @__PURE__ */ new Map();
+  return displayedRows.value.map((row) => {
+    const base = rowKeyFor(row) ?? "\u2205";
+    const n = seen.get(base) ?? 0;
+    seen.set(base, n + 1);
+    return { row, key: n === 0 ? base : `${base}#${n}` };
+  });
+});
+const renderRows = computed(() => {
+  if (!props.groupBy) return keyedRows.value.map(({ row, key }) => ({ kind: "row", row, key }));
+  const emptyLabel = props.groupEmptyLabel ?? "Ungrouped";
+  const groups = /* @__PURE__ */ new Map();
+  for (const entry of keyedRows.value) {
+    const labels2 = props.groupBy(entry.row);
+    for (const label of labels2.length ? labels2 : [emptyLabel]) {
+      if (!groups.has(label)) groups.set(label, []);
+      groups.get(label).push(entry);
+    }
+  }
+  const labels = [...groups.keys()].sort((a, b) => a.localeCompare(b));
+  if (labels.includes(emptyLabel)) {
+    labels.splice(labels.indexOf(emptyLabel), 1);
+    labels.push(emptyLabel);
+  }
+  const out = [];
+  for (const label of labels) {
+    const rows = groups.get(label);
+    out.push({ kind: "header", label, count: rows.length, key: `__group__${label}` });
+    for (const e of rows) out.push({ kind: "row", row: e.row, key: `${label}::${e.key}` });
+  }
+  return out;
+});
+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();
+});
+watch([query, sort, pageSize, activeFilters], () => {
+  page.value = 0;
+}, { deep: true });
+function toggleSort(column) {
+  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 };
+}
+function rowKeyFor(row) {
+  if (typeof props.rowKey === "function") return props.rowKey(row);
+  return row[props.rowKey];
+}
+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\u2026" : "Search\u2026"
+);
+const slots = useSlots();
+const showToolbar = computed(
+  () => props.search || props.columnsMenu || props.filter || !!props.filterTabs || !!slots.actions || !!slots["toolbar-left"]
+);
+function cellIconFor(col) {
+  return col.cellIcon ?? null;
+}
+const showFooter = computed(() => props.pagination !== false && !props.groupBy);
+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;
+}
+function defaultCell(col, row) {
+  const v = col.sortGetter ? col.sortGetter(row) : row[col.key];
+  if (v == null) return "\u2014";
+  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 --------------------------------------------------------- -->
+    <template v-for="entry in renderRows" :key="entry.key">
+      <!-- Group header (groupBy mode) -->
+      <div
+        v-if="entry.kind === 'header'"
+        class="flex items-center gap-2 border-t border-black/[0.04] bg-gray-100/70 px-4 py-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground"
+      >
+        {{ entry.label }}
+        <span class="tabular-nums normal-case text-muted-foreground/70">{{ entry.count }}</span>
+      </div>
+      <div
+        v-else
+        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', entry.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="entry.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, entry.row) }}</span>
+            </div>
+            <span v-else class="text-sm truncate">{{ defaultCell(col, entry.row) }}</span>
+          </slot>
+        </div>
+      </div>
+    </template>
+
+    <!-- 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/dist/runtime/components/DataTable/DataTable.vue.d.ts

@@ -0,0 +1,59 @@
+import type { DataTableColumn, DataTableFilter, DataTableState, RowKey, SortState } from './types.js';
+declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:sort"?: ((value: SortState) => any) | undefined;
+        readonly "onUpdate:page"?: ((value: number) => any) | undefined;
+        readonly onRowClick?: ((row: T) => any) | undefined;
+        readonly onStateChange?: ((state: DataTableState) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:sort" | "onUpdate:page" | "onRowClick" | "onStateChange"> & ({
+        data: T[];
+        columns: DataTableColumn<T>[];
+        rowKey: RowKey<T>;
+        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?: boolean | {
+            pageSize?: number;
+        };
+        defaultSort?: {
+            column: string;
+            direction: "asc" | "desc";
+        };
+        serverMode?: boolean;
+        total?: number;
+        loading?: boolean;
+        emptyText?: string;
+        groupBy?: ((row: T) => string[]) | null;
+        groupEmptyLabel?: string;
+    } & {
+        sort?: SortState;
+        page?: number;
+    }) & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        [x: string]: ((props: {
+            row: any;
+        }) => any) | undefined;
+    } & {
+        'filter-menu'?: (props: {}) => any;
+    } & {
+        'toolbar-left'?: (props: {}) => any;
+    } & {
+        actions?: (props: {}) => any;
+    } & {
+        empty?: (props: {}) => any;
+    };
+    emit: (((evt: "rowClick", row: T) => void) & ((evt: "stateChange", state: DataTableState) => void)) & (((evt: "update:sort", value: SortState) => void) & ((evt: "update:page", value: number) => void));
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/DataTable/FilterMenu.d.vue.ts

@@ -0,0 +1,12 @@
+declare var __VLS_26: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_26) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/{components → dist/runtime/components}/DataTable/FilterMenu.vue

@@ -1,17 +1,13 @@
-<script setup lang="ts">
-import { Filter } from '#solar-icons'
+<script setup>
+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.
+  DropdownMenuTrigger
+} from "@revenexx/studio";
 </script>
 
 <template>

package/dist/runtime/components/DataTable/FilterMenu.vue.d.ts

@@ -0,0 +1,12 @@
+declare var __VLS_26: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_26) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DataTable/types.d.ts

@@ -0,0 +1,70 @@
+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/dist/runtime/components/Shared/BuildLogsFlyout.d.vue.ts

@@ -0,0 +1,30 @@
+/**
+ * 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;
+}
+type __VLS_Props = {
+    open: boolean;
+    deployment: BuildDeployment | null;
+    loading: boolean;
+    isBuilding?: boolean;
+    userPinned?: boolean;
+    error?: string | null;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (args_0: boolean) => any;
+    refresh: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
+    onRefresh?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;