@revenexx/studio-shared 0.3.3 → 0.4.1

package/dist/runtime/components/Shared/SidebarNavAreas.vue

@@ -0,0 +1,291 @@
+<script setup>
+import { AltArrowDown as ChevronDownIcon, AltArrowRight as ChevronIcon } from "#solar-icons";
+import { SIDEBAR_BEST_MATCH, sidebarItemIsCurrent, sidebarItemKey, sidebarItemTarget } from "../../lib/sidebarNav";
+import {
+  AREA_AIM_DELAY,
+  AREA_CLOSE_DELAY,
+  AREA_OPEN_DELAY,
+  inSafeTriangle,
+  sidebarAreaBlocks
+} from "../../lib/sidebarAreas";
+import SidebarNavLink from "./SidebarNavLink.vue";
+const props = defineProps({
+  sections: { type: Array, required: true }
+});
+const t = useT();
+const route = useRoute();
+const best = inject(SIDEBAR_BEST_MATCH, null);
+const blocks = computed(() => sidebarAreaBlocks(props.sections, route.fullPath, best?.value));
+const root = ref(null);
+const panel = ref(null);
+const openKey = ref(null);
+const pinned = ref(false);
+const rect = ref({ left: 0, top: 0, height: 0, width: 0 });
+const titleHeight = ref(0);
+const openSection = computed(
+  () => openKey.value ? props.sections.find((s) => s.key === openKey.value) ?? null : null
+);
+let openTimer;
+let aimTimer;
+let closeTimer;
+let apex = null;
+let last = null;
+function headRows(section) {
+  return section.label ? section.items.slice(0, 1) : section.items;
+}
+function isOneRow(block) {
+  return block.kind === "area" || !listsItems(block.section);
+}
+function blockIsCurrent(block) {
+  return block.kind === "section" && headRows(block.section).some((item) => headIsCurrent(block.section, item));
+}
+function listsItems(section) {
+  return !!section.label && (section.items.length > 1 || section.items[0]?.label !== section.label);
+}
+function headIsCurrent(section, item) {
+  if (listsItems(section)) return false;
+  return sidebarItemIsCurrent(item, route.fullPath, best?.value);
+}
+function clearTimers() {
+  clearTimeout(openTimer);
+  clearTimeout(aimTimer);
+  clearTimeout(closeTimer);
+}
+const shelf = ref(null);
+function measure() {
+  const aside = root.value?.closest("aside");
+  if (!aside) return;
+  shelf.value = aside.closest("[data-studio-shelf]");
+  const head = aside.firstElementChild;
+  titleHeight.value = head?.classList.contains("border-b") ? head.getBoundingClientRect().height : 0;
+  const r = aside.getBoundingClientRect();
+  const frame = shelf.value?.getBoundingClientRect() ?? r;
+  rect.value = { left: r.right + 1, top: frame.top, height: frame.height, width: r.width + 1 };
+}
+function open(key) {
+  measure();
+  openKey.value = key;
+}
+function close() {
+  clearTimers();
+  openKey.value = null;
+  pinned.value = false;
+  apex = null;
+}
+function panelEdge() {
+  if (!panel.value) return null;
+  const r = panel.value.getBoundingClientRect();
+  return [{ x: r.left, y: r.top }, { x: r.left, y: r.bottom }];
+}
+function aimingAtPanel(p) {
+  const edge = panelEdge();
+  return !!(apex && edge && inSafeTriangle(p, apex, edge[0], edge[1]));
+}
+function onMove(e) {
+  if (e.pointerType !== "mouse") return;
+  last = { x: e.clientX, y: e.clientY };
+  const row = e.target?.closest("[data-area]");
+  if (row && row.dataset.area === openKey.value || !openKey.value || !aimingAtPanel(last)) apex = last;
+}
+function onAreaEnter(key, e) {
+  if (e.pointerType !== "mouse") return;
+  clearTimers();
+  if (openKey.value === key) return;
+  if (openKey.value) {
+    if (aimingAtPanel({ x: e.clientX, y: e.clientY })) {
+      aimTimer = setTimeout(() => {
+        const under = last && document.elementFromPoint(last.x, last.y)?.closest("[data-area]");
+        if (under?.dataset.area === key) open(key);
+      }, AREA_AIM_DELAY);
+      return;
+    }
+    open(key);
+    return;
+  }
+  openTimer = setTimeout(() => open(key), AREA_OPEN_DELAY);
+}
+function onAreaLeave() {
+  clearTimeout(openTimer);
+}
+function onRowEnter(e) {
+  if (e.pointerType !== "mouse" || !openKey.value || pinned.value) return;
+  if (aimingAtPanel({ x: e.clientX, y: e.clientY })) return;
+  clearTimers();
+  closeTimer = setTimeout(close, 60);
+}
+function onLeave(e) {
+  if (e.pointerType !== "mouse" || pinned.value) return;
+  clearTimeout(openTimer);
+  if (!openKey.value) return;
+  const to = e.relatedTarget;
+  if (to && (panel.value?.contains(to) || root.value?.contains(to))) return;
+  closeTimer = setTimeout(close, AREA_CLOSE_DELAY);
+}
+function onEnterKeep() {
+  clearTimeout(closeTimer);
+  clearTimeout(aimTimer);
+}
+function onAreaClick(section) {
+  const target = section.items[0] && sidebarItemTarget(section.items[0]);
+  close();
+  if (target) void navigateTo(target);
+}
+function focusPanel() {
+  nextTick(() => panel.value?.querySelector("a")?.focus());
+}
+function onAreaKey(key, e) {
+  if (e.key === "ArrowRight") {
+    e.preventDefault();
+    pinned.value = true;
+    open(key);
+    focusPanel();
+  }
+}
+function onPanelKey(e) {
+  const links = [...panel.value?.querySelectorAll("a") ?? []];
+  const i = links.indexOf(document.activeElement);
+  if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+    e.preventDefault();
+    links[(i + (e.key === "ArrowDown" ? 1 : -1) + links.length) % links.length]?.focus();
+  } else if (e.key === "Escape" || e.key === "ArrowLeft") {
+    e.preventDefault();
+    const key = openKey.value;
+    close();
+    root.value?.querySelector(`[data-area="${key}"]`)?.focus();
+  }
+}
+function onDocDown(e) {
+  if (!openKey.value) return;
+  const t2 = e.target;
+  if (panel.value?.contains(t2) || root.value?.contains(t2)) return;
+  close();
+}
+function onDocKey(e) {
+  if (e.key === "Escape" && openKey.value) close();
+}
+watch(() => route.fullPath, close);
+onMounted(() => {
+  document.addEventListener("pointerdown", onDocDown);
+  document.addEventListener("keydown", onDocKey);
+  window.addEventListener("resize", measure);
+});
+onBeforeUnmount(() => {
+  clearTimers();
+  document.removeEventListener("pointerdown", onDocDown);
+  document.removeEventListener("keydown", onDocKey);
+  window.removeEventListener("resize", measure);
+});
+</script>
+
+<template>
+  <div ref="root" @pointermove="onMove" @pointerleave="onLeave" @pointerenter="onEnterKeep">
+    <!--
+      Every labelled section is one row with its icon in a tile (the node
+      palette of the Integration Studio, kept neutral). Hairlines divide the
+      sections. The route's section lists its entries under its row, flush;
+      every other row opens the panel on hover and its first page on click.
+      The open section sits on a faint violet wash between its hairlines, so
+      it stands out in the list; a one-row block takes the same wash on hover
+      (Michael 17.10.).
+    -->
+    <div
+      v-for="(block, i) in blocks"
+      :key="block.section.key"
+      class="flex flex-col gap-0.5 px-2 py-1"
+      :class="[
+  i > 0 ? 'border-t border-black/[0.06]' : '',
+  block.kind === 'section' && listsItems(block.section) ? 'rx-area-open bg-[#faf8ff]' : '',
+  openKey === block.section.key || blockIsCurrent(block) ? 'bg-[#faf8ff]' : '',
+  isOneRow(block) ? 'transition-colors hover:bg-[#faf8ff]' : ''
+]"
+      @pointerenter.capture="block.kind === 'section' ? onRowEnter($event) : void 0"
+    >
+      <template v-if="block.kind === 'section'">
+        <NuxtLink
+          v-for="item in headRows(block.section)"
+          :key="`h-${sidebarItemKey(item)}`"
+          :to="sidebarItemTarget(item)"
+          :data-nav-current="headIsCurrent(block.section, item) && !listsItems(block.section) || void 0"
+          class="group flex h-9 items-center gap-2.5 rounded-md px-2 text-sm font-medium text-[#0B0522] transition-colors"
+        >
+          <span
+            class="flex size-6 shrink-0 items-center justify-center rounded-md transition-colors"
+            :class="headIsCurrent(block.section, item) || listsItems(block.section) ? 'bg-primary/10 text-primary' : 'bg-black/[0.04] text-foreground/60 group-hover:bg-primary/10 group-hover:text-primary'"
+          >
+            <component :is="block.section.icon ?? item.icon" :size="14" />
+          </span>
+          <span class="min-w-0 flex-1 truncate">{{ block.section.label ?? item.label }}</span>
+          <!-- The open section points down at its entries; the others point right at their panel. -->
+          <ChevronDownIcon v-if="listsItems(block.section)" :size="12" weight="Bold" class="shrink-0 text-muted-foreground" />
+        </NuxtLink>
+        <template v-if="listsItems(block.section)">
+          <template v-for="item in block.section.items" :key="sidebarItemKey(item)">
+            <div v-if="item.heading" class="rx-area-heading">{{ item.heading }}</div>
+            <SidebarNavLink class="rx-area-item" :item="item" />
+          </template>
+        </template>
+      </template>
+      <button
+        v-else
+        type="button"
+        :data-area="block.section.key"
+        class="group flex h-9 w-full cursor-pointer items-center gap-2.5 rounded-md px-2 text-left text-sm font-medium text-[#0B0522]"
+        :aria-expanded="openKey === block.section.key"
+        aria-haspopup="true"
+        :aria-label="t('shared.nav.area.open', { section: block.section.label ?? '', count: block.section.items.length })"
+        @pointerenter="onAreaEnter(block.section.key, $event)"
+        @pointerleave="onAreaLeave"
+        @click="onAreaClick(block.section)"
+        @keydown="onAreaKey(block.section.key, $event)"
+      >
+        <span
+          class="flex size-6 shrink-0 items-center justify-center rounded-md transition-colors group-hover:bg-primary/10 group-hover:text-primary"
+          :class="openKey === block.section.key ? 'bg-primary/10 text-primary' : 'bg-black/[0.04] text-foreground/60'"
+        >
+          <component :is="block.section.icon" v-if="block.section.icon" :size="14" />
+        </span>
+        <span class="min-w-0 flex-1 truncate">{{ block.section.label }}</span>
+        <ChevronIcon :size="12" weight="Bold" class="shrink-0 group-hover:text-primary" :class="openKey === block.section.key ? 'text-primary' : 'text-muted-foreground'" />
+      </button>
+    </div>
+
+    <Teleport to="body">
+      <!--
+        The panel continues the shelf: its frame is the shelf's, the sidebar
+        pane's hairline runs down its left edge, and its title rule sits on the
+        sidebar's own. A soft shadow to the right lifts it off the page.
+        The shelf's frame is gray-400/10 over the lavender page, so it reads
+        as #eae9f3; the panel lies over the shelf's edge and would double that
+        tint, hence the solid colour.
+      -->
+      <div
+        v-if="openSection"
+        ref="panel"
+        role="menu"
+        :aria-label="openSection.label"
+        class="rx-area-panel fixed z-40 flex flex-col overflow-hidden rounded-r-lg border border-l-0 border-[#eae9f3] bg-white outline-1 outline-white/30 shadow-[16px_0_32px_-18px_rgb(42_29_97/0.28)]"
+        :style="{ left: `${rect.left}px`, top: `${rect.top}px`, height: `${rect.height}px`, width: `${rect.width}px` }"
+        @pointerenter="onEnterKeep"
+        @pointerleave="onLeave"
+        @keydown="onPanelKey"
+      >
+        <div class="flex shrink-0 items-center gap-2 border-b border-black/[0.06] px-4 pb-3 pt-4" :style="titleHeight ? { height: `${titleHeight}px` } : void 0">
+          <span v-if="openSection.icon" class="flex size-6 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
+            <component :is="openSection.icon" :size="14" />
+          </span>
+          <h2 class="min-w-0 flex-1 truncate text-lg font-medium text-[#0B0522]">{{ openSection.label }}</h2>
+        </div>
+        <div class="flex flex-1 flex-col gap-0.5 overflow-y-auto px-2 py-3">
+          <template v-for="item in openSection.items" :key="sidebarItemKey(item)">
+            <div v-if="item.heading" class="rx-area-heading">{{ item.heading }}</div>
+            <SidebarNavLink class="rx-area-item" :item="item" />
+          </template>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.rx-area-item :deep(.rx-nav-icon){margin-inline:5px}.rx-area-heading{color:var(--muted-foreground,#6b6880);font-size:11px;font-weight:500;letter-spacing:.04em;padding:10px 8px 2px 42px;text-transform:uppercase}.rx-area-panel{animation:rx-area-in 90ms ease-out}@keyframes rx-area-in{0%{opacity:.4;transform:translateX(-4px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.rx-area-panel{animation:none}}
+</style>

package/dist/runtime/components/Shared/SidebarNavAreas.vue.d.ts

@@ -0,0 +1,7 @@
+import type { SidebarNavSection } from '../../types/nav.js';
+type __VLS_Props = {
+    sections: SidebarNavSection[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Shared/SidebarNavLink.d.vue.ts

@@ -1,15 +1,8 @@
-/**
- * One row of a `SidebarNav` section — always exactly one link, never a group.
- *
- * An item's `children` are the **tabs of the page this row opens**, not rows
- * of their own (see `lib/sidebarNav.ts`), so there is nothing to expand here:
- * the row links to the item's route, or — for a pure container that nominates
- * no landing page — to its first tab, and stays highlighted while the route is
- * on any of them.
- */
 import type { SidebarNavItem } from '../../types/nav.js';
 type __VLS_Props = {
     item: SidebarNavItem;
+    collapsed?: boolean;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Shared/SidebarNavLink.vue

@@ -1,12 +1,20 @@
 <script setup>
-import { sidebarItemIsCurrent, sidebarItemTarget } from "../../lib/sidebarNav";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@revenexx/studio";
+import { SIDEBAR_BEST_MATCH, sidebarItemIsCurrent, sidebarItemTarget } from "../../lib/sidebarNav";
 const props = defineProps({
-  item: { type: Object, required: true }
+  item: { type: Object, required: true },
+  collapsed: { type: Boolean, required: false }
 });
 const t = useT();
 const route = useRoute();
 const target = computed(() => sidebarItemTarget(props.item));
-const current = computed(() => sidebarItemIsCurrent(props.item, route.path));
+const best = inject(SIDEBAR_BEST_MATCH, null);
+const current = computed(() => sidebarItemIsCurrent(props.item, route.fullPath, best?.value));
+const iconRowClass = computed(() => [
+  "group relative flex size-9 items-center justify-center rounded-md transition-colors hover:text-primary",
+  current.value ? "bg-primary/10 text-[#0B0522]" : "text-foreground/70 hover:bg-primary/5",
+  props.item.preview ? "opacity-70" : ""
+]);
 const rowClass = computed(() => [
   "group flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-sm transition-colors hover:text-primary",
   current.value ? "bg-primary/10 text-[#0B0522] font-medium" : "text-foreground/80 hover:bg-primary/5",
@@ -15,8 +23,26 @@ const rowClass = computed(() => [
 </script>
 
 <template>
-  <NuxtLink v-if="target" :to="target" :class="rowClass">
-    <component :is="item.icon" v-if="item.icon" :size="14" :stroke-width="2" class="shrink-0 text-foreground/60 group-hover:text-primary" />
+  <TooltipProvider v-if="target && collapsed" :delay-duration="200">
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <NuxtLink :to="target" :class="iconRowClass" :data-nav-current="current || void 0" :aria-label="item.label">
+          <component :is="item.icon" v-if="item.icon" :size="18" :stroke-width="2" class="rx-nav-icon shrink-0" :class="current ? 'text-primary' : 'text-foreground/60 group-hover:text-primary'" />
+          <span v-else class="text-sm font-medium">{{ item.label.slice(0, 1) }}</span>
+          <span
+            v-if="item.badge !== null && item.badge !== void 0"
+            class="absolute right-1 top-1 size-1.5 rounded-full bg-primary"
+            aria-hidden="true"
+          />
+        </NuxtLink>
+      </TooltipTrigger>
+      <TooltipContent side="right" class="text-sm">
+        {{ item.label }}<template v-if="item.badge !== null && item.badge !== void 0 && item.badge !== 'dot'"> · {{ item.badge }}</template>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+  <NuxtLink v-else-if="target" :to="target" :class="rowClass" :data-nav-current="current || void 0">
+    <component :is="item.icon" v-if="item.icon" :size="14" :stroke-width="2" class="rx-nav-icon shrink-0 text-foreground/60 group-hover:text-primary" />
     <span class="min-w-0 flex-1 truncate flex items-center gap-1.5">
       {{ item.label }}
       <span

package/dist/runtime/components/Shared/SidebarNavLink.vue.d.ts

@@ -1,15 +1,8 @@
-/**
- * One row of a `SidebarNav` section — always exactly one link, never a group.
- *
- * An item's `children` are the **tabs of the page this row opens**, not rows
- * of their own (see `lib/sidebarNav.ts`), so there is nothing to expand here:
- * the row links to the item's route, or — for a pure container that nominates
- * no landing page — to its first tab, and stays highlighted while the route is
- * on any of them.
- */
 import type { SidebarNavItem } from '../../types/nav.js';
 type __VLS_Props = {
     item: SidebarNavItem;
+    collapsed?: boolean;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Shared/SortHeader.d.vue.ts

@@ -9,12 +9,13 @@ declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     toggle: (column: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onToggle?: ((column: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Shared/SortHeader.vue

@@ -18,7 +18,7 @@ const sortIcon = computed(() => {
 <template>
   <button
     type="button"
-    class="group inline-flex min-w-0 max-w-full cursor-pointer items-center gap-1.5 -m-1 p-1 rounded-md text-left transition-colors hover:text-primary"
+    class="group inline-flex min-w-0 cursor-pointer items-center gap-1.5 -my-1 -ml-1 mr-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)"
   >
@@ -26,7 +26,11 @@ const sortIcon = computed(() => {
          and a heading longer than its column simply prints over the next one —
          "SortierungGeändert" on a category list, with no hint that two columns
          are involved. The cell carries the full text as its `title`. -->
-    <span class="min-w-0 truncate"><slot /></span>
+    <!-- Breaks only between words — „Kundennum-mer“ read as a typo (Re-QA
+         18.10.). The left margin pulls the hover ground out to the cell edge; the
+         right margin gives the 4px back, so a column sized to its content
+         counts the whole button and the sort icon stays inside it. -->
+    <span class="min-w-0 break-normal leading-tight"><slot /></span>
     <component
       :is="sortIcon"
       weight="Linear"

package/dist/runtime/components/Shared/SortHeader.vue.d.ts

@@ -9,12 +9,13 @@ declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     toggle: (column: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onToggle?: ((column: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Shared/StateCard.d.vue.ts

@@ -14,16 +14,17 @@ type __VLS_Props = {
     title: string;
     description?: string;
 };
-declare var __VLS_22: {}, __VLS_28: {};
+declare var __VLS_31: {}, __VLS_39: {};
 type __VLS_Slots = {} & {
-    description?: (props: typeof __VLS_22) => any;
+    description?: (props: typeof __VLS_31) => any;
 } & {
-    actions?: (props: typeof __VLS_28) => any;
+    actions?: (props: typeof __VLS_39) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     variant: Variant;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Shared/StateCard.vue

@@ -27,7 +27,7 @@ const tileClass = computed(
 
 <template>
   <Card class="bg-white/60 backdrop-blur-sm">
-    <CardHeader class="items-center text-center">
+    <CardHeader class="items-center justify-items-center text-center">
       <div
         class="flex size-12 items-center justify-center rounded-full mb-2"
         :class="tileClass"

package/dist/runtime/components/Shared/StateCard.vue.d.ts

@@ -14,16 +14,17 @@ type __VLS_Props = {
     title: string;
     description?: string;
 };
-declare var __VLS_22: {}, __VLS_28: {};
+declare var __VLS_31: {}, __VLS_39: {};
 type __VLS_Slots = {} & {
-    description?: (props: typeof __VLS_22) => any;
+    description?: (props: typeof __VLS_31) => any;
 } & {
-    actions?: (props: typeof __VLS_28) => any;
+    actions?: (props: typeof __VLS_39) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     variant: Variant;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Shared/StudioCard.d.vue.ts

@@ -1,12 +1,13 @@
 type __VLS_Props = {
     to?: string;
 };
-declare var __VLS_6: {};
+declare var __VLS_8: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_6) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Shared/StudioCard.vue.d.ts

@@ -1,12 +1,13 @@
 type __VLS_Props = {
     to?: string;
 };
-declare var __VLS_6: {};
+declare var __VLS_8: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_6) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Shared/TabBar.d.vue.ts

@@ -1,23 +1,3 @@
-/**
- * Underline tab bar — the standard cockpit tabs. A full-width hairline sits
- * behind the row; the active/hover indicator is a 2px bar spanning exactly the
- * label width (inset-x-2.5 = the button's px-2.5), 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.
- *
- * ## `sticky`
- *
- * On by default, because the original job was a detail page: the row glues
- * itself to the bottom of the sticky `PageHeader` (hence the magic `57px`) and
- * frosts its background so content scrolls through.
- *
- * Off for a row INSIDE a panel — the queue tabs between a DataTable's toolbar
- * and its header, say. There the offset is wrong (there is no page header above
- * it) and the frosted layer is worse than nothing, because the panel already
- * has a background of its own and the blur only muddies the rows scrolling past
- * underneath. Same tabs, same indicator, same hairline; just not pinned.
- */
 export interface TabItem {
     key: string;
     label: string;
@@ -28,12 +8,15 @@ type __VLS_Props = {
     modelValue: string;
     /** Pin to the page header. Off for a bar inside a panel. */
     sticky?: boolean;
+    /** Accessible name of the tab list. */
+    label?: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (key: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((key: string) => any) | undefined;
 }>, {
     sticky: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;