@revenexx/studio-shared 0.3.3 → 0.4.1

package/dist/runtime/components/Media/MediaPickerDialog.vue

@@ -1,14 +1,16 @@
 <script setup>
-import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@revenexx/studio";
-import { CloudUpload, FileText } from "#solar-icons";
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, SegmentedToggle, SegmentedToggleItem, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@revenexx/studio";
+import { CloudUpload, FileText, Gallery, ListCheck, Magnifer } from "#solar-icons";
 import MediaFolderTree from "./MediaFolderTree.vue";
 import MediaUploader from "./MediaUploader.vue";
 const props = defineProps({
   open: { type: Boolean, required: true },
   multiple: { type: Boolean, required: false, default: false },
-  kinds: { type: Array, required: false, default: void 0 }
+  kinds: { type: Array, required: false, default: void 0 },
+  catalogue: { type: [Object, null], required: false, default: null }
 });
-const emit = defineEmits(["update:open", "select"]);
+const emit = defineEmits(["update:open", "select", "uploaded"]);
+const lib = useMediaLibrary();
 const {
   assets,
   folderTree,
@@ -23,15 +25,76 @@ const {
   loadMore,
   thumbnailUrl,
   isProcessing
-} = useMediaLibrary();
+} = lib;
 const t = useT();
 const selected = ref([]);
 const uploadOpen = ref(false);
 const failedThumbs = ref(/* @__PURE__ */ new Set());
-const kindIcon = {};
-const visibleAssets = computed(
-  () => props.kinds?.length ? assets.value.filter((a) => props.kinds.includes(a.kind)) : assets.value
-);
+const canSearch = computed(() => !!lib.search && !!lib.loadAssets);
+const query = ref("");
+const KIND_CHIPS = [
+  { value: "image", key: "images" },
+  { value: "video", key: "videos" },
+  { value: "pdf", key: "pdfs" },
+  { value: "document", key: "documents" }
+];
+const chips = computed(() => KIND_CHIPS.filter((c) => !props.kinds?.length || props.kinds.includes(c.value)));
+const kindChip = ref(null);
+const sort = ref("-created_at");
+let searchTimer = null;
+function reload() {
+  if (!lib.loadAssets) return;
+  if (lib.search) lib.search.value = query.value.trim();
+  if (lib.kind) lib.kind.value = kindChip.value;
+  if (lib.sortKey) lib.sortKey.value = sort.value;
+  void lib.loadAssets();
+}
+watch(query, () => {
+  if (searchTimer) clearTimeout(searchTimer);
+  searchTimer = setTimeout(reload, 300);
+});
+watch([kindChip, sort], reload);
+const scope = ref("assets");
+const hasCatalogue = computed(() => !!props.catalogue);
+const entryOf = (a) => props.catalogue?.[a.id] ?? null;
+const visibleAssets = computed(() => {
+  let list = props.kinds?.length ? assets.value.filter((a) => props.kinds.includes(a.kind)) : assets.value;
+  if (hasCatalogue.value && scope.value === "assets") list = list.filter((a) => !!entryOf(a));
+  return list;
+});
+const titleOf = (a) => entryOf(a)?.title || a.display_name || a.original_name;
+function factsOf(a) {
+  const ext = /\.([a-z0-9]{2,5})$/i.exec(a.original_name ?? "")?.[1]?.toUpperCase() ?? (a.mime_type?.split("/")[1] ?? "").toUpperCase();
+  const kb = a.size_bytes != null ? a.size_bytes >= 1048576 ? `${(a.size_bytes / 1048576).toFixed(1).replace(".", ",")} MB` : `${Math.max(1, Math.round(a.size_bytes / 1024))} KB` : "";
+  const dims = a.width && a.height ? `${a.width} \xD7 ${a.height}` : "";
+  return [ext, kb, dims].filter(Boolean).join(" \xB7 ");
+}
+const VIEW_KEY = "rx.media.picker.view";
+function storedView() {
+  try {
+    return import.meta.client && localStorage.getItem(VIEW_KEY) === "list" ? "list" : "gallery";
+  } catch {
+    return "gallery";
+  }
+}
+const view = ref(storedView());
+watch(view, (v) => {
+  try {
+    localStorage.setItem(VIEW_KEY, v);
+  } catch {
+  }
+});
+const sentinel = ref(null);
+let observer = null;
+watch(sentinel, (el) => {
+  observer?.disconnect();
+  if (!el || typeof IntersectionObserver === "undefined") return;
+  observer = new IntersectionObserver((entries) => {
+    if (entries.some((e) => e.isIntersecting) && hasMore.value && !loadingAssets.value) void loadMore();
+  }, { rootMargin: "200px" });
+  observer.observe(el);
+});
+onBeforeUnmount(() => observer?.disconnect());
 function isSelected(asset) {
   return selected.value.some((a) => a.id === asset.id);
 }
@@ -52,31 +115,46 @@ function confirm() {
   emit("select", selected.value);
   emit("update:open", false);
 }
+let beforeUpload = /* @__PURE__ */ new Set();
+function startUpload() {
+  beforeUpload = new Set(assets.value.map((a) => a.id));
+  uploadOpen.value = true;
+}
 function onUploaded() {
   uploadOpen.value = false;
+  const fresh = assets.value.filter((a) => !beforeUpload.has(a.id));
+  if (fresh.length) emit("uploaded", fresh);
 }
 watch(() => props.open, (open) => {
   if (open) {
     selected.value = [];
+    query.value = "";
+    kindChip.value = null;
+    sort.value = "-created_at";
+    scope.value = "assets";
+    lib.resetFilters?.();
     void init();
+  } else {
+    lib.resetFilters?.();
   }
 });
 </script>
 
 <template>
   <Dialog :open="open" @update:open="(v) => emit('update:open', v)">
-    <DialogContent class="max-w-4xl">
+    <DialogContent class="sm:max-w-5xl">
       <DialogHeader>
         <DialogTitle>{{ multiple ? t("shared.media.picker.title.multiple") : t("shared.media.picker.title.single") }}</DialogTitle>
+        <DialogDescription>{{ multiple ? t("shared.media.picker.description.multiple") : t("shared.media.picker.description.single") }}</DialogDescription>
       </DialogHeader>
 
-      <div class="flex gap-4 h-[26rem]">
+      <div class="flex h-[30rem] gap-4">
         <!-- Folder sidebar -->
         <div class="w-56 shrink-0 overflow-y-auto border-r border-black/[0.06] pr-2">
           <button
             type="button"
-            class="w-full text-left rounded-md px-2 py-1 text-sm transition-colors"
-            :class="currentView === 'all' ? 'bg-primary/10 text-[#0B0522] font-medium' : 'text-foreground/80 hover:bg-primary/5'"
+            class="w-full rounded-md px-2 py-1 text-left text-sm transition-colors"
+            :class="currentView === 'all' ? 'bg-primary/10 font-medium text-[#0B0522]' : 'text-foreground/80 hover:bg-primary/5'"
             @click="showAllMedia"
           >
             {{ t("shared.media.picker.action.allmedia") }}
@@ -88,53 +166,127 @@ watch(() => props.open, (open) => {
           />
         </div>
 
-        <!-- Asset grid -->
-        <div class="flex-1 overflow-y-auto">
-          <div class="flex items-center justify-between mb-2">
-            <p class="text-sm text-muted-foreground">
-              {{ t("shared.media.picker.count", visibleAssets.length) }}
-            </p>
-            <Button variant="outline" size="sm" class="h-7 text-sm" @click="uploadOpen = true">
+        <div class="flex min-w-0 flex-1 flex-col">
+          <!-- Toolbar: search, kinds, sort, scope, view, upload -->
+          <div class="mb-2 flex flex-wrap items-center gap-2">
+            <div v-if="canSearch" class="relative min-w-48 flex-1">
+              <Magnifer :size="14" class="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" />
+              <Input v-model="query" type="search" class="h-8 pl-8 text-sm" :placeholder="t('shared.media.picker.search')" :aria-label="t('shared.media.picker.search')" />
+            </div>
+            <Select v-if="canSearch && lib.sortKey" v-model="sort">
+              <SelectTrigger class="h-8 w-36 text-sm" :aria-label="t('shared.media.picker.sort.label')"><SelectValue /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="-created_at">{{ t("shared.media.picker.sort.newest") }}</SelectItem>
+                <SelectItem value="original_name">{{ t("shared.media.picker.sort.name") }}</SelectItem>
+              </SelectContent>
+            </Select>
+            <SegmentedToggle v-model="view" variant="inset" :aria-label="t('shared.media.picker.view.label')">
+              <SegmentedToggleItem value="gallery" :aria-label="t('shared.media.picker.view.gallery')"><Gallery :size="14" /></SegmentedToggleItem>
+              <SegmentedToggleItem value="list" :aria-label="t('shared.media.picker.view.list')"><ListCheck :size="14" /></SegmentedToggleItem>
+            </SegmentedToggle>
+            <Button variant="outline" size="sm" class="h-8 text-sm" @click="startUpload">
               <CloudUpload :size="14" /> {{ t("shared.media.picker.action.upload") }}
             </Button>
           </div>
-
-          <div v-if="loadingAssets && !visibleAssets.length" class="py-12 text-center text-sm text-muted-foreground">
-            {{ t("shared.media.picker.loading") }}
-          </div>
-          <div v-else-if="!visibleAssets.length" class="py-12 text-center text-sm text-muted-foreground">
-            {{ t("shared.media.picker.empty") }}
-          </div>
-          <div v-else class="grid grid-cols-3 gap-3 sm:grid-cols-4">
-            <button
-              v-for="asset in visibleAssets"
-              :key="asset.id"
-              type="button"
-              class="group relative aspect-square rounded-md border overflow-hidden transition-all"
-              :class="isSelected(asset) ? 'border-primary ring-2 ring-primary' : 'border-black/[0.06] hover:border-primary/40'"
-              @click="toggle(asset)"
-            >
-              <img
-                v-if="thumbnailUrl(asset) && !failedThumbs.has(thumbnailUrl(asset))"
-                :src="thumbnailUrl(asset)"
-                :alt="asset.alt_text ?? asset.display_name ?? asset.original_name"
-                class="h-full w-full object-cover"
-                :class="{ 'opacity-50': isProcessing(asset) }"
-                @error="markFailed(thumbnailUrl(asset))"
+          <div class="mb-2 flex flex-wrap items-center gap-1.5">
+            <template v-if="hasCatalogue">
+              <button
+                v-for="s in ['assets', 'files']"
+                :key="s"
+                type="button"
+                class="rounded-full border px-2.5 py-0.5 text-xs transition-colors"
+                :class="scope === s ? 'border-primary bg-primary/10 text-[#0B0522]' : 'border-black/[0.08] text-muted-foreground hover:border-primary/40'"
+                @click="scope = s"
+              >
+                {{ t(`shared.media.picker.scope.${s}`) }}
+              </button>
+              <span class="mx-1 h-4 w-px bg-black/[0.08]" />
+            </template>
+            <template v-if="canSearch && lib.kind && chips.length > 1">
+              <button
+                type="button"
+                class="rounded-full border px-2.5 py-0.5 text-xs transition-colors"
+                :class="kindChip === null ? 'border-primary bg-primary/10 text-[#0B0522]' : 'border-black/[0.08] text-muted-foreground hover:border-primary/40'"
+                @click="kindChip = null"
               >
-              <span v-else class="flex h-full w-full items-center justify-center">
-                <component :is="kindIcon[asset.kind] ?? FileText" :size="28" class="text-foreground/30" />
-              </span>
-              <span class="absolute inset-x-0 bottom-0 truncate bg-black/50 px-1.5 py-0.5 text-[11px] text-white">
-                {{ asset.display_name ?? asset.original_name }}
-              </span>
-            </button>
+                {{ t("shared.media.picker.kind.all") }}
+              </button>
+              <button
+                v-for="c in chips"
+                :key="c.value"
+                type="button"
+                class="rounded-full border px-2.5 py-0.5 text-xs transition-colors"
+                :class="kindChip === c.value ? 'border-primary bg-primary/10 text-[#0B0522]' : 'border-black/[0.08] text-muted-foreground hover:border-primary/40'"
+                @click="kindChip = kindChip === c.value ? null : c.value"
+              >
+                {{ t(`shared.media.picker.kind.${c.key}`) }}
+              </button>
+            </template>
+            <span class="ml-auto text-xs text-muted-foreground">{{ t("shared.media.picker.count", visibleAssets.length) }}</span>
           </div>
 
-          <div v-if="hasMore" class="mt-3 flex justify-center">
-            <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="loadingAssets" @click="loadMore">
-              {{ t("shared.media.picker.action.loadmore") }}
-            </Button>
+          <div class="min-h-0 flex-1 overflow-y-auto">
+            <div v-if="loadingAssets && !visibleAssets.length" class="py-12 text-center text-sm text-muted-foreground">
+              {{ t("shared.media.picker.loading") }}
+            </div>
+            <div v-else-if="!visibleAssets.length" class="py-12 text-center text-sm text-muted-foreground">
+              <p class="font-medium text-foreground/80">{{ hasCatalogue && scope === "assets" ? t("shared.media.picker.emptyAssets") : t("shared.media.picker.empty") }}</p>
+              <button v-if="hasCatalogue && scope === 'assets'" type="button" class="mt-1 text-primary hover:underline" @click="scope = 'files'">{{ t("shared.media.picker.showFiles") }}</button>
+            </div>
+            <div v-else-if="view === 'gallery'" class="grid grid-cols-3 gap-3 sm:grid-cols-4">
+              <button
+                v-for="asset in visibleAssets"
+                :key="asset.id"
+                type="button"
+                class="group relative aspect-square overflow-hidden rounded-md border transition-all"
+                :class="isSelected(asset) ? 'border-primary ring-2 ring-primary' : 'border-black/[0.06] hover:border-primary/40'"
+                :aria-pressed="isSelected(asset)"
+                @click="toggle(asset)"
+              >
+                <img
+                  v-if="thumbnailUrl(asset) && !failedThumbs.has(thumbnailUrl(asset))"
+                  :src="thumbnailUrl(asset)"
+                  :alt="asset.alt_text ?? titleOf(asset)"
+                  class="h-full w-full object-cover"
+                  :class="{ 'opacity-50': isProcessing(asset) }"
+                  @error="markFailed(thumbnailUrl(asset))"
+                >
+                <span v-else class="flex h-full w-full items-center justify-center">
+                  <FileText :size="28" class="text-foreground/30" />
+                </span>
+                <span class="absolute inset-x-0 bottom-0 bg-black/55 px-1.5 py-0.5 text-left text-[11px] text-white">
+                  <span class="block truncate">{{ titleOf(asset) }}</span>
+                  <span v-if="entryOf(asset)?.sub" class="block truncate text-white/75">{{ entryOf(asset).sub }}</span>
+                </span>
+              </button>
+            </div>
+            <ul v-else class="divide-y divide-black/[0.06] rounded-md border border-black/[0.06]">
+              <li v-for="asset in visibleAssets" :key="asset.id">
+                <button
+                  type="button"
+                  class="flex w-full items-center gap-3 px-2 py-1.5 text-left text-sm transition-colors"
+                  :class="isSelected(asset) ? 'bg-primary/10' : 'hover:bg-primary/[0.04]'"
+                  :aria-pressed="isSelected(asset)"
+                  @click="toggle(asset)"
+                >
+                  <span class="grid size-9 shrink-0 place-items-center overflow-hidden rounded border border-black/[0.06] bg-muted/40">
+                    <img v-if="thumbnailUrl(asset, 80) && !failedThumbs.has(thumbnailUrl(asset, 80))" :src="thumbnailUrl(asset, 80)" alt="" class="h-full w-full object-cover" @error="markFailed(thumbnailUrl(asset, 80))">
+                    <FileText v-else :size="16" class="text-foreground/30" />
+                  </span>
+                  <span class="min-w-0 flex-1">
+                    <span class="block truncate font-medium text-[#0B0522]">{{ titleOf(asset) }}</span>
+                    <span class="block truncate text-xs text-muted-foreground">{{ [entryOf(asset)?.sub, factsOf(asset)].filter(Boolean).join(" \xB7 ") }}</span>
+                  </span>
+                  <span v-if="!asset.alt_text && asset.kind === 'image'" class="shrink-0 rounded-full bg-amber-50 px-2 py-0.5 text-[11px] text-amber-700">{{ t("shared.media.picker.altMissing") }}</span>
+                </button>
+              </li>
+            </ul>
+
+            <div v-if="hasMore" ref="sentinel" class="mt-3 flex justify-center">
+              <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="loadingAssets" @click="loadMore">
+                {{ t("shared.media.picker.action.loadmore") }}
+              </Button>
+            </div>
           </div>
         </div>
       </div>

package/dist/runtime/components/Media/MediaPickerDialog.vue.d.ts

@@ -1,18 +1,30 @@
 import type { StorageAsset } from '../../types/storage.js';
+export interface PickerCatalogueEntry {
+    /** What the record is called — shown instead of the file name. */
+    title: string;
+    /** One quiet line under it: type, licence. */
+    sub?: string;
+}
 type __VLS_Props = {
     open: boolean;
     multiple?: boolean;
     /** Restrict the grid to these asset kinds (e.g. ['image']). */
     kinds?: string[];
+    /** Records that manage these files, keyed by storage id — see the header. */
+    catalogue?: Record<string, PickerCatalogueEntry> | null;
 };
-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:open": (value: boolean) => any;
     select: (assets: StorageAsset[]) => any;
+    uploaded: (assets: StorageAsset[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onSelect?: ((assets: StorageAsset[]) => any) | undefined;
+    onUploaded?: ((assets: StorageAsset[]) => any) | undefined;
 }>, {
     multiple: boolean;
     kinds: string[];
+    catalogue: Record<string, PickerCatalogueEntry> | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Media/MediaUploader.d.vue.ts

@@ -13,7 +13,7 @@ type __VLS_Props = {
     folderId: string | null;
     folderName: string | null;
 };
-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:open": (value: boolean) => any;
     done: (summary: {
         created: number;
@@ -26,4 +26,5 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {
         failed: number;
     }) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Media/MediaUploader.vue

@@ -82,7 +82,7 @@ const folderLabel = computed(() => props.folderName ?? t("shared.media.uploader.
 
 <template>
   <Dialog :open="open" @update:open="(v) => emit('update:open', v)">
-    <DialogContent class="max-w-lg">
+    <DialogContent class="sm:max-w-xl">
       <DialogHeader>
         <DialogTitle>{{ t("shared.media.uploader.title") }}</DialogTitle>
         <DialogDescription>

package/dist/runtime/components/Media/MediaUploader.vue.d.ts

@@ -13,7 +13,7 @@ type __VLS_Props = {
     folderId: string | null;
     folderName: string | null;
 };
-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:open": (value: boolean) => any;
     done: (summary: {
         created: number;
@@ -26,4 +26,5 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {
         failed: number;
     }) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,21 @@
+import type { Component } from 'vue';
+type __VLS_Props = {
+    icon?: string | null;
+    navIcon?: string | null;
+    alt?: string;
+    /** Glyph size in px; also the box size when not `fill`. */
+    size?: number;
+    /** Fill the parent tile instead of drawing a `size`-px square. */
+    fill?: boolean;
+    fallback?: Component;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: number;
+    icon: string | null;
+    fill: boolean;
+    alt: string;
+    navIcon: string | null;
+    fallback: Component;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,47 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { Box } from "#solar-icons";
+import { appIconCandidates } from "../../lib/appIcon";
+import { solarIcon } from "../../lib/solarIcons";
+const props = defineProps({
+  icon: { type: [String, null], required: false, default: null },
+  navIcon: { type: [String, null], required: false, default: null },
+  alt: { type: String, required: false, default: "" },
+  size: { type: Number, required: false, default: 14 },
+  fill: { type: Boolean, required: false, default: false },
+  fallback: { type: null, required: false, default: void 0 }
+});
+const failed = ref(/* @__PURE__ */ new Set());
+watch(() => props.icon, () => {
+  failed.value = /* @__PURE__ */ new Set();
+});
+const resolved = computed(() => {
+  for (const c of appIconCandidates(props.icon, props.navIcon)) {
+    if (c.kind === "file") {
+      if (!failed.value.has(c.src)) return { src: c.src };
+      continue;
+    }
+    const glyph = solarIcon(c.name);
+    if (glyph) return { glyph };
+  }
+  return { glyph: props.fallback ?? Box };
+});
+const box = computed(() => props.fill ? void 0 : { width: `${props.size}px`, height: `${props.size}px` });
+function onError(src) {
+  failed.value = new Set(failed.value).add(src);
+}
+</script>
+
+<template>
+  <span class="inline-flex shrink-0 items-center justify-center" :class="fill ? 'size-full' : ''" :style="box">
+    <img
+      v-if="'src' in resolved"
+      :src="resolved.src"
+      :alt="alt"
+      class="size-full object-contain"
+      data-app-icon="file"
+      @error="onError(resolved.src)"
+    >
+    <component :is="resolved.glyph" v-else :size="size" data-app-icon="glyph" />
+  </span>
+</template>

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

@@ -0,0 +1,21 @@
+import type { Component } from 'vue';
+type __VLS_Props = {
+    icon?: string | null;
+    navIcon?: string | null;
+    alt?: string;
+    /** Glyph size in px; also the box size when not `fill`. */
+    size?: number;
+    /** Fill the parent tile instead of drawing a `size`-px square. */
+    fill?: boolean;
+    fallback?: Component;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: number;
+    icon: string | null;
+    fill: boolean;
+    alt: string;
+    navIcon: string | null;
+    fallback: Component;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -20,11 +20,12 @@ type __VLS_Props = {
     userPinned?: boolean;
     error?: string | null;
 };
-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: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>;
+declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -20,11 +20,12 @@ type __VLS_Props = {
     userPinned?: boolean;
     error?: string | null;
 };
-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: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>;
+declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,11 @@
+import type { CardSize } from '../../lib/cardSize.js';
+type __VLS_ModelProps = {
+    modelValue?: CardSize;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: CardSize) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: CardSize) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,19 @@
+<script setup>
+import { HamburgerMenu, List } from "#solar-icons";
+import { SegmentedToggle, SegmentedToggleItem } from "@revenexx/studio";
+import { useT } from "../../composables/useT";
+const size = defineModel({ type: String, ...{ default: "comfortable" } });
+const t = useT();
+const ITEM = "transition-colors data-[state=on]:text-primary data-[state=off]:hover:text-primary!";
+</script>
+
+<template>
+  <SegmentedToggle v-model="size" variant="inset" :aria-label="t('shared.cardSize.label')" data-test="card-size">
+    <SegmentedToggleItem value="comfortable" :aria-label="t('shared.cardSize.comfortable')" :class="ITEM">
+      <List :size="14" weight="Bold" />
+    </SegmentedToggleItem>
+    <SegmentedToggleItem value="compact" :aria-label="t('shared.cardSize.compact')" :class="ITEM">
+      <HamburgerMenu :size="14" weight="Linear" />
+    </SegmentedToggleItem>
+  </SegmentedToggle>
+</template>

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

@@ -0,0 +1,11 @@
+import type { CardSize } from '../../lib/cardSize.js';
+type __VLS_ModelProps = {
+    modelValue?: CardSize;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: CardSize) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: CardSize) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,60 @@
+type __VLS_Props = {
+    open: boolean;
+    /** Accessible name of the panel — normally the record's title. */
+    label: string;
+    /** The body is still fetching: `aria-busy` plus a spoken "loading". */
+    busy?: boolean;
+    /** Panel width in the wide layout. */
+    width?: string;
+    /** Distance from the viewport top in the wide layout — clears the top bar. */
+    top?: string;
+    /** Where focus goes on close. Defaults to the element focused at open. */
+    returnFocus?: () => HTMLElement | null | undefined;
+    /** Which neighbours exist — draws the previous/next buttons. Omit for none. */
+    canStep?: {
+        prev: boolean;
+        next: boolean;
+    };
+};
+declare var __VLS_13: {}, __VLS_30: {
+    layout: string;
+}, __VLS_32: {}, __VLS_61: {}, __VLS_73: {}, __VLS_75: {
+    layout: string;
+};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_13) => any;
+} & {
+    actions?: (props: typeof __VLS_30) => any;
+} & {
+    default?: (props: typeof __VLS_32) => any;
+} & {
+    header?: (props: typeof __VLS_61) => any;
+} & {
+    default?: (props: typeof __VLS_73) => any;
+} & {
+    actions?: (props: typeof __VLS_75) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (open: boolean) => any;
+    step: (dir: 1 | -1) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+    onStep?: ((dir: 1 | -1) => any) | undefined;
+}>, {
+    busy: boolean;
+    width: string;
+    top: string;
+    returnFocus: () => HTMLElement | null | undefined;
+    canStep: {
+        prev: boolean;
+        next: boolean;
+    };
+}, {}, {}, {}, 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 (): {
+        $slots: S;
+    };
+};