@revenexx/studio-shared 0.3.3 → 0.4.1

package/dist/runtime/components/Form/FormLayout.vue

@@ -0,0 +1,169 @@
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onBeforeUpdate, onMounted, provide, ref, shallowRef, useSlots, watch } from "vue";
+import { useT } from "../../composables/useT";
+import {
+  activeSectionId,
+  CONTEXT_COLUMN_CLASS,
+  isScrolledToEnd,
+  layoutGridClass,
+  NAV_COLUMN_CLASS,
+  showSectionNav
+} from "../../lib/formLayout";
+import { FORM_LAYOUT_KEY } from "../../lib/formLayoutContext";
+const props = defineProps({
+  nav: { type: [Boolean, String], required: false, default: "auto" },
+  context: { type: Boolean, required: false, default: void 0 },
+  stickyOffset: { type: Number, required: false, default: 57 },
+  navLabel: { type: String, required: false },
+  contextLabel: { type: String, required: false }
+});
+const slots = useSlots();
+const t = useT();
+const navLabelText = computed(() => props.navLabel ?? t("shared.form.nav.label"));
+const contextLabelText = computed(() => props.contextLabel ?? t("shared.form.context.label"));
+const sections = shallowRef([]);
+function sortByDocument(list) {
+  return [...list].sort((a, b) => {
+    const ea = a.el();
+    const eb = b.el();
+    if (!ea || !eb) return 0;
+    return ea.compareDocumentPosition(eb) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+  });
+}
+function register(entry) {
+  const rest = sections.value.filter((s) => s.id !== entry.id);
+  sections.value = sortByDocument([...rest, entry]);
+  void nextTick(updateActive);
+}
+function unregister(id) {
+  sections.value = sections.value.filter((s) => s.id !== id);
+}
+const hasSlot = ref({ nav: !!slots.nav, context: !!slots.context });
+onBeforeUpdate(() => {
+  const next = { nav: !!slots.nav, context: !!slots.context };
+  if (next.nav !== hasSlot.value.nav || next.context !== hasSlot.value.context) hasSlot.value = next;
+});
+const navVisible = computed(() => hasSlot.value.nav || showSectionNav(props.nav, sections.value.length));
+const contextVisible = computed(() => props.context ?? hasSlot.value.context);
+const gridClass = computed(() => layoutGridClass(navVisible.value, contextVisible.value));
+provide(FORM_LAYOUT_KEY, { register, unregister, gridClass, navVisible, contextVisible });
+const root = ref(null);
+const activeId = ref(null);
+let pinnedId = null;
+let pinTimer = null;
+let scroller = null;
+function findScroller(el) {
+  let node = el?.parentElement ?? null;
+  while (node) {
+    const { overflowY } = getComputedStyle(node);
+    if (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay") return node;
+    node = node.parentElement;
+  }
+  return window;
+}
+function updateActive() {
+  if (pinnedId) return;
+  if (!scroller) {
+    activeId.value = sections.value[0]?.id ?? null;
+    return;
+  }
+  const isWindow = scroller === window;
+  const viewportTop = isWindow ? 0 : scroller.getBoundingClientRect().top;
+  const offsets = sections.value.flatMap((s) => {
+    const el = s.el();
+    return el ? [{ id: s.id, top: el.getBoundingClientRect().top - viewportTop }] : [];
+  });
+  const metrics = isWindow ? { top: window.scrollY, client: window.innerHeight, height: document.documentElement.scrollHeight } : { top: scroller.scrollTop, client: scroller.clientHeight, height: scroller.scrollHeight };
+  activeId.value = activeSectionId(offsets, {
+    // The line just under the sticky header, plus the breathing room a
+    // section is scrolled to (see `scroll-margin-top` in FormSection).
+    threshold: props.stickyOffset + 48,
+    atEnd: isScrolledToEnd(metrics.top, metrics.client, metrics.height)
+  });
+}
+function releasePin() {
+  pinnedId = null;
+  if (pinTimer) clearTimeout(pinTimer);
+  pinTimer = null;
+}
+function onScrollEnd() {
+  if (pinnedId) releasePin();
+}
+function goTo(id, event) {
+  event?.preventDefault();
+  const entry = sections.value.find((s) => s.id === id);
+  const el = entry?.el();
+  if (!el) return;
+  activeId.value = id;
+  pinnedId = id;
+  if (pinTimer) clearTimeout(pinTimer);
+  pinTimer = setTimeout(onScrollEnd, 900);
+  const reduce = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  el.scrollIntoView({ behavior: reduce ? "auto" : "smooth", block: "start" });
+  el.focus({ preventScroll: true });
+}
+onMounted(() => {
+  scroller = findScroller(root.value);
+  scroller.addEventListener("scroll", updateActive, { passive: true });
+  scroller.addEventListener("scrollend", onScrollEnd);
+  window.addEventListener("resize", updateActive, { passive: true });
+  updateActive();
+});
+onBeforeUnmount(() => {
+  scroller?.removeEventListener("scroll", updateActive);
+  scroller?.removeEventListener("scrollend", onScrollEnd);
+  window.removeEventListener("resize", updateActive);
+  releasePin();
+});
+watch(() => sections.value.map((s) => s.id).join("|"), () => void nextTick(updateActive));
+defineExpose({ activeId, goTo });
+</script>
+
+<template>
+  <div
+    ref="root"
+    class="@container flex flex-col"
+    :style="{ '--form-sticky-top': `${stickyOffset}px`, 'minHeight': `calc(100% - ${stickyOffset}px)` }"
+  >
+    <div class="flex-1 px-4 pt-4 pb-6" :class="gridClass">
+      <nav
+        v-if="navVisible"
+        :aria-label="navLabelText"
+        class="sticky top-[calc(var(--form-sticky-top)+1rem)] self-start"
+        :class="NAV_COLUMN_CLASS"
+      >
+        <slot name="nav" :sections="sections" :active-id="activeId" :go-to="goTo">
+          <p aria-hidden="true" class="mb-2 px-2.5 text-[11px] font-medium uppercase tracking-[0.08em] text-muted-foreground">
+            {{ navLabelText }}
+          </p>
+          <ul class="space-y-0.5">
+            <li v-for="section in sections" :key="section.id">
+              <a
+                :href="`#${section.id}`"
+                :aria-current="activeId === section.id ? 'true' : void 0"
+                class="block rounded-md border-l-2 px-2.5 py-1.5 text-sm transition-colors"
+                :class="activeId === section.id ? 'border-primary bg-accent font-medium text-[#0B0522]' : 'border-transparent text-muted-foreground hover:text-[#0B0522]'"
+                @click="goTo(section.id, $event)"
+              >{{ section.title }}</a>
+            </li>
+          </ul>
+        </slot>
+      </nav>
+
+      <div class="min-w-0 space-y-3.5">
+        <slot />
+      </div>
+
+      <aside
+        v-if="contextVisible"
+        :aria-label="contextLabelText"
+        class="sticky top-[calc(var(--form-sticky-top)+1rem)] self-start"
+        :class="CONTEXT_COLUMN_CLASS"
+      >
+        <slot name="context" />
+      </aside>
+    </div>
+
+    <slot name="savebar" />
+  </div>
+</template>

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

@@ -0,0 +1,47 @@
+import type { FormSectionEntry } from '../../lib/formLayoutContext.js';
+type __VLS_Props = {
+    /** `auto` = from three sections on. `false` hides it, `true` forces it from one. */
+    nav?: boolean | 'auto';
+    /** Draw the context column. Defaults to "when a `#context` slot is given". */
+    context?: boolean;
+    /**
+     * Height of the sticky page header in px. The nav and context column park
+     * under it, sections scroll to just below it. 57 = PageHeader without tabs.
+     */
+    stickyOffset?: number;
+    /** Accessible name of the navigation. Defaults to "Sections". */
+    navLabel?: string;
+    /** Accessible name of the context column. Defaults to "Summary". */
+    contextLabel?: string;
+};
+declare function goTo(id: string, event?: Event): void;
+declare var __VLS_1: {
+    sections: FormSectionEntry[];
+    activeId: string | null;
+    goTo: typeof goTo;
+}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
+type __VLS_Slots = {} & {
+    nav?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    context?: (props: typeof __VLS_5) => any;
+} & {
+    savebar?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    activeId: import("vue").Ref<string | null, string | null>;
+    goTo: typeof goTo;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    nav: boolean | "auto";
+    context: boolean;
+    stickyOffset: number;
+}, {}, {}, {}, 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;
+    };
+};

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

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    /** Anchor id — the nav links to `#id`. Unique on the page. */
+    id: string;
+    title?: string;
+    /** One sentence: what this group is for. Not a field hint. */
+    description?: string;
+    headingLevel?: 2 | 3 | 4;
+};
+declare var __VLS_7: {}, __VLS_9: {};
+type __VLS_Slots = {} & {
+    actions?: (props: typeof __VLS_7) => any;
+} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    headingLevel: 2 | 3 | 4;
+}, {}, {}, {}, 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;
+    };
+};

package/dist/runtime/components/Form/FormSection.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { FORM_LAYOUT_KEY } from "../../lib/formLayoutContext";
+const props = defineProps({
+  id: { type: String, required: true },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  headingLevel: { type: Number, required: false, default: 2 }
+});
+const el = ref(null);
+const layout = inject(FORM_LAYOUT_KEY, null);
+const headingId = computed(() => props.title ? `${props.id}-title` : void 0);
+const headingTag = computed(() => `h${props.headingLevel}`);
+onMounted(() => {
+  if (props.title) layout?.register({ id: props.id, title: props.title, el: () => el.value });
+});
+watch(() => [props.id, props.title], ([id, title], [oldId]) => {
+  if (!layout) return;
+  layout.unregister(oldId);
+  if (title) layout.register({ id, title, el: () => el.value });
+});
+onBeforeUnmount(() => layout?.unregister(props.id));
+</script>
+
+<template>
+  <section
+    :id="id"
+    ref="el"
+    tabindex="-1"
+    :aria-labelledby="headingId"
+    class="scroll-mt-[calc(var(--form-sticky-top,0px)+1rem)] rounded-lg border border-black/[0.06] bg-white/70 p-[18px] outline-none backdrop-blur-sm"
+  >
+    <div v-if="title || description || $slots.actions" class="mb-3.5 flex items-start gap-3">
+      <div class="min-w-0 flex-1">
+        <component :is="headingTag" v-if="title" :id="headingId" class="text-[14.5px] font-medium text-[#0B0522]">
+          {{ title }}
+        </component>
+        <p v-if="description" class="mt-0.5 text-[12.5px] text-muted-foreground">
+          {{ description }}
+        </p>
+      </div>
+      <div v-if="$slots.actions" class="flex shrink-0 items-center gap-2">
+        <slot name="actions" />
+      </div>
+    </div>
+    <slot />
+  </section>
+</template>

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

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    /** Anchor id — the nav links to `#id`. Unique on the page. */
+    id: string;
+    title?: string;
+    /** One sentence: what this group is for. Not a field hint. */
+    description?: string;
+    headingLevel?: 2 | 3 | 4;
+};
+declare var __VLS_7: {}, __VLS_9: {};
+type __VLS_Slots = {} & {
+    actions?: (props: typeof __VLS_7) => any;
+} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    headingLevel: 2 | 3 | 4;
+}, {}, {}, {}, 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;
+    };
+};

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

@@ -0,0 +1,44 @@
+type __VLS_Props = {
+    /** Something differs from what is stored. Save is disabled without it. */
+    dirty?: boolean;
+    /** A save is in flight: both buttons disabled, the save shows a spinner. */
+    busy?: boolean;
+    /** Extra gate on save (a required field empty). */
+    canSubmit?: boolean;
+    /** Keep save enabled on a clean form — a create, where "nothing changed" is not the point. */
+    allowClean?: boolean;
+    submitLabel?: string;
+    busyLabel?: string;
+    cancelLabel?: string;
+    /** Hide the cancel button (nothing to go back to). */
+    hideCancel?: boolean;
+    /** Id of a `<form>` to submit natively instead of emitting `submit`. */
+    form?: string;
+};
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    status?: (props: typeof __VLS_1) => any;
+} & {
+    actions?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: () => any;
+    cancel: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSubmit?: (() => any) | undefined;
+    onCancel?: (() => any) | undefined;
+}>, {
+    dirty: boolean;
+    busy: boolean;
+    canSubmit: boolean;
+    allowClean: boolean;
+    hideCancel: 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;
+    };
+};

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

@@ -0,0 +1,71 @@
+<script setup>
+import { Button } from "@revenexx/studio";
+import { RefreshCircle } from "#solar-icons";
+import { computed, inject } from "vue";
+import { useT } from "../../composables/useT";
+import { FORM_LAYOUT_KEY } from "../../lib/formLayoutContext";
+const props = defineProps({
+  dirty: { type: Boolean, required: false, default: false },
+  busy: { type: Boolean, required: false, default: false },
+  canSubmit: { type: Boolean, required: false, default: true },
+  allowClean: { type: Boolean, required: false, default: false },
+  submitLabel: { type: String, required: false },
+  busyLabel: { type: String, required: false },
+  cancelLabel: { type: String, required: false },
+  hideCancel: { type: Boolean, required: false, default: false },
+  form: { type: String, required: false }
+});
+const emit = defineEmits(["submit", "cancel"]);
+const t = useT();
+const layout = inject(FORM_LAYOUT_KEY, null);
+const submitText = computed(() => props.submitLabel ?? t("shared.form.savebar.action.save"));
+const busyText = computed(() => props.busyLabel ?? t("shared.form.savebar.action.saving"));
+const cancelText = computed(() => props.cancelLabel ?? t("shared.form.savebar.action.cancel"));
+const statusText = computed(() => props.dirty ? t("shared.form.savebar.status.dirty") : t("shared.form.savebar.status.clean"));
+const submitDisabled = computed(() => props.busy || !props.canSubmit || !props.dirty && !props.allowClean);
+function onSubmit() {
+  if (props.form || submitDisabled.value) return;
+  emit("submit");
+}
+</script>
+
+<template>
+  <div class="sticky bottom-0 z-10 border-t border-black/[0.06] bg-white/85 backdrop-blur">
+    <div class="px-4" :class="layout?.gridClass.value">
+      <div v-if="layout?.navVisible.value" aria-hidden="true" class="hidden @3xl:block" />
+      <div class="flex min-w-0 flex-wrap items-center gap-2 py-2.5">
+        <p class="mr-auto min-w-0 text-[12.5px] text-muted-foreground" role="status" aria-live="polite">
+          <slot name="status">
+            <span class="inline-flex items-center gap-1.5">
+              <span v-if="dirty" aria-hidden="true" class="size-1.5 shrink-0 rounded-full bg-amber-500" />
+              {{ statusText }}
+            </span>
+          </slot>
+        </p>
+        <slot name="actions" />
+        <Button
+          v-if="!hideCancel"
+          type="button"
+          variant="outline"
+          size="sm"
+          :disabled="busy"
+          @click="emit('cancel')"
+        >
+          {{ cancelText }}
+        </Button>
+        <Button
+          :type="form ? 'submit' : 'button'"
+          :form="form"
+          size="sm"
+          :disabled="submitDisabled"
+          :aria-busy="busy || void 0"
+          @click="onSubmit"
+        >
+          <RefreshCircle v-if="busy" :size="14" class="animate-spin" aria-hidden="true" />
+          {{ busy ? busyText : submitText }}
+        </Button>
+      </div>
+      <div v-if="layout?.contextVisible.value" aria-hidden="true" class="hidden @5xl:block" />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,44 @@
+type __VLS_Props = {
+    /** Something differs from what is stored. Save is disabled without it. */
+    dirty?: boolean;
+    /** A save is in flight: both buttons disabled, the save shows a spinner. */
+    busy?: boolean;
+    /** Extra gate on save (a required field empty). */
+    canSubmit?: boolean;
+    /** Keep save enabled on a clean form — a create, where "nothing changed" is not the point. */
+    allowClean?: boolean;
+    submitLabel?: string;
+    busyLabel?: string;
+    cancelLabel?: string;
+    /** Hide the cancel button (nothing to go back to). */
+    hideCancel?: boolean;
+    /** Id of a `<form>` to submit natively instead of emitting `submit`. */
+    form?: string;
+};
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    status?: (props: typeof __VLS_1) => any;
+} & {
+    actions?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: () => any;
+    cancel: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSubmit?: (() => any) | undefined;
+    onCancel?: (() => any) | undefined;
+}>, {
+    dirty: boolean;
+    busy: boolean;
+    canSubmit: boolean;
+    allowClean: boolean;
+    hideCancel: 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;
+    };
+};

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[];
@@ -9,9 +9,10 @@ type __VLS_Props = {
     /** Internal: nesting depth for indentation. */
     depth?: number;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    select: (id: string | null) => any;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    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[];
@@ -9,9 +9,10 @@ type __VLS_Props = {
     /** Internal: nesting depth for indentation. */
     depth?: number;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    select: (id: string | null) => any;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    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,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;