@revenexx/studio-shared 0.4.0 → 0.4.1

package/dist/runtime/components/Form/SaveBar.vue.d.ts

@@ -29,8 +29,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     onCancel?: (() => any) | undefined;
 }>, {
     dirty: boolean;
-    canSubmit: boolean;
     busy: boolean;
+    canSubmit: boolean;
     allowClean: boolean;
     hideCancel: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,7 +1,7 @@
 import type { StorageFolderNode } from '../../types/storage.js';
 /**
- * Recursive folder tree for the media browser sidebar. Emits `select` with a
- * folder id (or null for the synthetic root). Self-renders for children.
+ * Recursive folder tree for the media browser sidebar. Emits `select` with the
+ * clicked folder's id. Self-renders for children.
  */
 type __VLS_Props = {
     nodes: StorageFolderNode[];
@@ -10,9 +10,9 @@ type __VLS_Props = {
     depth?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    select: (id: string | null) => any;
+    select: (id: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onSelect?: ((id: string | null) => any) | undefined;
+    onSelect?: ((id: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -38,8 +38,7 @@ const t = useT();
           <AltArrowRight
             :size="12"
             class="transition-transform"
-            :class="{ 'rotate-90': expanded.has(node.id) }"
-          />
+            :class="{ 'rotate-90': expanded.has(node.id) }" weight="Bold" />
         </button>
         <component
           :is="currentId === node.id ? FolderOpen : FolderIcon"

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

@@ -1,7 +1,7 @@
 import type { StorageFolderNode } from '../../types/storage.js';
 /**
- * Recursive folder tree for the media browser sidebar. Emits `select` with a
- * folder id (or null for the synthetic root). Self-renders for children.
+ * Recursive folder tree for the media browser sidebar. Emits `select` with the
+ * clicked folder's id. Self-renders for children.
  */
 type __VLS_Props = {
     nodes: StorageFolderNode[];
@@ -10,9 +10,9 @@ type __VLS_Props = {
     depth?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    select: (id: string | null) => any;
+    select: (id: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onSelect?: ((id: string | null) => any) | undefined;
+    onSelect?: ((id: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,19 +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 __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/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,19 +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 __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.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/Shared/AppIcon.d.vue.ts

@@ -13,8 +13,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     size: number;
     icon: string | null;
     fill: boolean;
-    navIcon: string | null;
     alt: string;
+    navIcon: string | null;
     fallback: Component;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -13,8 +13,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     size: number;
     icon: string | null;
     fill: boolean;
-    navIcon: string | null;
     alt: string;
+    navIcon: string | null;
     fallback: Component;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -41,9 +41,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:open"?: ((open: boolean) => any) | undefined;
     onStep?: ((dir: 1 | -1) => any) | undefined;
 }>, {
+    busy: boolean;
     width: string;
     top: string;
-    busy: boolean;
     returnFocus: () => HTMLElement | null | undefined;
     canStep: {
         prev: boolean;

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

@@ -1,6 +1,7 @@
 <script setup>
 import { AltArrowDown, AltArrowLeft, AltArrowUp, CloseCircle } from "#solar-icons";
 import { Sheet, SheetContent, SheetTitle } from "@revenexx/studio";
+import { vSwipeClose } from "../../lib/swipeToClose";
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { isCloseKey, isRecordStepKey } from "../../lib/detailSheet";
 import { useT } from "../../composables/useT";
@@ -109,7 +110,7 @@ onBeforeUnmount(() => {
               :aria-disabled="canStep.prev ? void 0 : 'true'"
               @click="stepBy(-1)"
             >
-              <AltArrowUp :size="18" />
+              <AltArrowUp :size="18" weight="Bold" />
             </button>
             <button
               type="button"
@@ -120,7 +121,7 @@ onBeforeUnmount(() => {
               :aria-disabled="canStep.next ? void 0 : 'true'"
               @click="stepBy(1)"
             >
-              <AltArrowDown :size="18" />
+              <AltArrowDown :size="18" weight="Bold" />
             </button>
           </template>
           <button
@@ -157,6 +158,9 @@ onBeforeUnmount(() => {
       class="w-full gap-0 p-0 sm:max-w-md [&>button.absolute]:hidden motion-reduce:animate-none motion-reduce:transition-none"
       @close-auto-focus="onCloseAutoFocus"
     >
+      <div v-swipe-close="close" class="flex shrink-0 justify-center pt-2 md:hidden">
+        <span class="h-1.5 w-10 rounded-full bg-black/15" />
+      </div>
       <SheetTitle class="sr-only">{{ label }}</SheetTitle>
       <div class="flex shrink-0 items-start gap-2 border-b border-black/[0.06] p-3">
         <button
@@ -165,7 +169,7 @@ onBeforeUnmount(() => {
           :aria-label="t('shared.detailsheet.action.back')"
           @click="close"
         >
-          <AltArrowLeft :size="20" />
+          <AltArrowLeft :size="20" weight="Bold" />
         </button>
         <div class="min-w-0 flex-1 self-center">
           <slot name="header" />
@@ -180,7 +184,7 @@ onBeforeUnmount(() => {
             :aria-disabled="canStep.prev ? void 0 : 'true'"
             @click="stepBy(-1)"
           >
-            <AltArrowUp :size="20" />
+            <AltArrowUp :size="20" weight="Bold" />
           </button>
           <button
             type="button"
@@ -191,7 +195,7 @@ onBeforeUnmount(() => {
             :aria-disabled="canStep.next ? void 0 : 'true'"
             @click="stepBy(1)"
           >
-            <AltArrowDown :size="20" />
+            <AltArrowDown :size="20" weight="Bold" />
           </button>
         </template>
       </div>

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

@@ -41,9 +41,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:open"?: ((open: boolean) => any) | undefined;
     onStep?: ((dir: 1 | -1) => any) | undefined;
 }>, {
+    busy: boolean;
     width: string;
     top: string;
-    busy: boolean;
     returnFocus: () => HTMLElement | null | undefined;
     canStep: {
         prev: boolean;

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

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    title?: string | null;
+    description?: string | null;
+    /** One paragraph, split into headline and subtitle at its first sentence. */
+    text?: string | null;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+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 (): {
+        $slots: S;
+    };
+};