@revenexx/studio-shared 0.2.0 → 0.3.1

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

@@ -1,8 +1,19 @@
-declare var __VLS_26: {};
+type __VLS_Props = {
+    /** Popover width class (a wide panel of inputs needs more than the default). */
+    width?: string;
+    /** The trigger goes primary while at least one filter is set. */
+    active?: boolean;
+    /** How many are set, for the badge. */
+    count?: number;
+};
+declare var __VLS_22: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_26) => any;
+    default?: (props: typeof __VLS_22) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    active: boolean;
+    width: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -1,36 +1,42 @@
 <script setup>
 import { Filter } from "#solar-icons";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger
-} from "@revenexx/studio";
+import { Popover, PopoverContent, PopoverTrigger, ToolbarFilterTrigger } from "@revenexx/studio";
+defineProps({
+  width: { type: String, required: false, default: "w-72" },
+  active: { type: Boolean, required: false, default: false },
+  count: { type: Number, required: false }
+});
+const t = useT();
 </script>
 
 <template>
-  <DropdownMenu>
-    <DropdownMenuTrigger as-child>
-      <button
-        type="button"
-        class="flex size-7 items-center justify-center rounded-md border border-black/[0.06] bg-white text-muted-foreground transition hover:text-foreground"
-        title="Filter"
+  <Popover>
+    <PopoverTrigger as-child>
+      <ToolbarFilterTrigger
+        icon-only
+        :active="active"
+        :count="count"
+        :label="t('shared.datatable.filtermenu.aria')"
       >
-        <Filter :size="12" />
-      </button>
-    </DropdownMenuTrigger>
-    <DropdownMenuContent align="end" class="w-56">
-      <DropdownMenuLabel class="text-sm text-muted-foreground">
-        Filter
-      </DropdownMenuLabel>
-      <DropdownMenuSeparator />
-      <slot>
-        <DropdownMenuItem disabled>
-          No filters defined.
-        </DropdownMenuItem>
-      </slot>
-    </DropdownMenuContent>
-  </DropdownMenu>
+        <template #icon>
+          <Filter :size="14" weight="BoldDuotone" />
+        </template>
+      </ToolbarFilterTrigger>
+    </PopoverTrigger>
+
+    <PopoverContent align="start" :class="['p-0', width]">
+      <p class="px-4 pt-3 pb-1 text-sm text-muted-foreground">
+        {{ t("shared.datatable.filtermenu.heading") }}
+      </p>
+      <!-- The surface's controls, stacked. Full width, because a filter panel
+           holding a half-width select looks like something failed to load. -->
+      <div class="space-y-2.5 p-4 pt-2 [&_[data-slot=select-trigger]]:w-full">
+        <slot>
+          <p class="py-4 text-center text-sm text-muted-foreground">
+            {{ t("shared.datatable.filtermenu.empty") }}
+          </p>
+        </slot>
+      </div>
+    </PopoverContent>
+  </Popover>
 </template>

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

@@ -1,8 +1,19 @@
-declare var __VLS_26: {};
+type __VLS_Props = {
+    /** Popover width class (a wide panel of inputs needs more than the default). */
+    width?: string;
+    /** The trigger goes primary while at least one filter is set. */
+    active?: boolean;
+    /** How many are set, for the badge. */
+    count?: number;
+};
+declare var __VLS_22: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_26) => any;
+    default?: (props: typeof __VLS_22) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    active: boolean;
+    width: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -0,0 +1,6 @@
+import type { DataTableSavedViews } from './types.js';
+type __VLS_Props = {
+    config: DataTableSavedViews;
+};
+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>;
+export default _default;

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

@@ -0,0 +1,189 @@
+<script setup>
+import { AltArrowDown, Bookmark, TrashBinMinimalistic } from "#solar-icons";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Input
+} from "@revenexx/studio";
+const props = defineProps({
+  config: { type: Object, required: true }
+});
+const t = useT();
+const views = ref([]);
+function read() {
+  try {
+    if (typeof window === "undefined") return [];
+    const raw = window.localStorage.getItem(props.config.storageKey);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter((v) => !!v && typeof v === "object" && typeof v.name === "string");
+  } catch {
+    return [];
+  }
+}
+function persist() {
+  try {
+    if (typeof window === "undefined") return;
+    window.localStorage.setItem(props.config.storageKey, JSON.stringify(views.value));
+  } catch {
+  }
+}
+onMounted(() => {
+  views.value = read();
+});
+watch(() => props.config.storageKey, () => {
+  views.value = read();
+});
+const allLabel = computed(() => props.config.allLabel ?? t("shared.datatable.savedviews.all.default"));
+function same(a, b) {
+  return JSON.stringify(a) === JSON.stringify(b);
+}
+const isDefault = computed(() => same(props.config.snapshot(), props.config.defaultSnapshot()));
+function isActive(v) {
+  return same(v.snapshot, props.config.snapshot());
+}
+const activeLabel = computed(() => {
+  const hit = views.value.find(isActive);
+  if (hit) return hit.name;
+  return isDefault.value ? allLabel.value : t("shared.datatable.savedviews.custom");
+});
+function applyDefault() {
+  props.config.apply(props.config.defaultSnapshot());
+}
+function applyView(v) {
+  props.config.apply(v.snapshot);
+}
+const saveOpen = ref(false);
+const saveName = ref("");
+function openSave() {
+  saveName.value = "";
+  saveOpen.value = true;
+}
+function save() {
+  const name = saveName.value.trim();
+  if (!name) return;
+  const entry = { name, snapshot: props.config.snapshot() };
+  const idx = views.value.findIndex((v) => v.name === name);
+  if (idx >= 0) views.value.splice(idx, 1, entry);
+  else views.value.push(entry);
+  persist();
+  saveOpen.value = false;
+}
+const deleteTarget = ref(null);
+function remove() {
+  if (!deleteTarget.value) return;
+  views.value = views.value.filter((v) => v.name !== deleteTarget.value.name);
+  persist();
+  deleteTarget.value = null;
+}
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button
+        variant="outline"
+        size="sm"
+        class="h-7 max-w-48 gap-1.5 text-sm"
+        :class="isDefault ? '' : 'border-primary/30 text-primary'"
+        :aria-label="t('shared.datatable.savedviews.aria')"
+      >
+        <Bookmark :size="13" />
+        <span class="truncate">{{ activeLabel }}</span>
+        <AltArrowDown :size="12" class="opacity-60" />
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end" class="w-56">
+      <DropdownMenuItem class="gap-2" @select="applyDefault">
+        <span class="flex-1 truncate">{{ allLabel }}</span>
+        <span v-if="isDefault" class="text-xs text-primary">{{ t("shared.datatable.savedviews.active.badge") }}</span>
+      </DropdownMenuItem>
+      <template v-if="views.length">
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          v-for="v in views"
+          :key="v.name"
+          class="gap-2"
+          @select="applyView(v)"
+        >
+          <span class="flex-1 truncate">{{ v.name }}</span>
+          <span
+            role="button"
+            class="text-muted-foreground transition-colors hover:text-rose-600"
+            :aria-label="t('shared.datatable.savedviews.delete.aria', { name: v.name })"
+            @click.stop="deleteTarget = v"
+            @pointerdown.stop.prevent
+          >
+            <TrashBinMinimalistic :size="13" />
+          </span>
+        </DropdownMenuItem>
+      </template>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem @select="openSave">
+        {{ t("shared.datatable.savedviews.action.savecurrent") }}
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+
+  <!-- Save the current filters + sort under a name -->
+  <Dialog :open="saveOpen" @update:open="(v2) => {
+  if (!v2) saveOpen = false;
+}">
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>{{ t("shared.datatable.savedviews.savedialog.title") }}</DialogTitle>
+        <DialogDescription>{{ t("shared.datatable.savedviews.savedialog.description") }}</DialogDescription>
+      </DialogHeader>
+      <div class="space-y-1">
+        <label for="saved-view-name" class="text-sm font-medium">{{ t("shared.datatable.savedviews.savedialog.field.name.label") }}</label>
+        <Input
+          id="saved-view-name"
+          v-model="saveName"
+          :placeholder="t('shared.datatable.savedviews.savedialog.field.name.placeholder')"
+          @keydown.enter="save"
+        />
+      </div>
+      <DialogFooter>
+        <Button variant="outline" @click="saveOpen = false">
+          {{ t("shared.datatable.savedviews.savedialog.action.cancel") }}
+        </Button>
+        <Button :disabled="!saveName.trim()" @click="save">
+          {{ t("shared.datatable.savedviews.savedialog.action.save") }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+
+  <!-- Delete a saved view -->
+  <Dialog :open="deleteTarget !== null" @update:open="(v2) => {
+  if (!v2) deleteTarget = null;
+}">
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>{{ t("shared.datatable.savedviews.deletedialog.title") }}</DialogTitle>
+        <DialogDescription>
+          {{ t("shared.datatable.savedviews.deletedialog.description", { name: deleteTarget?.name ?? "" }) }}
+        </DialogDescription>
+      </DialogHeader>
+      <DialogFooter>
+        <Button variant="outline" @click="deleteTarget = null">
+          {{ t("shared.datatable.savedviews.deletedialog.action.cancel") }}
+        </Button>
+        <Button variant="outline" class="border-rose-500/30 text-rose-700 hover:bg-rose-500/10" @click="remove">
+          {{ t("shared.datatable.savedviews.deletedialog.action.delete") }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

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

@@ -0,0 +1,6 @@
+import type { DataTableSavedViews } from './types.js';
+type __VLS_Props = {
+    config: DataTableSavedViews;
+};
+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>;
+export default _default;

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

@@ -0,0 +1,13 @@
+import type { DataTableColumn, SortState } from './types.js';
+type __VLS_Props = {
+    columns: DataTableColumn[];
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue: SortState;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: SortState) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: SortState) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,47 @@
+<script setup>
+import { AltArrowDown, SortVertical } from "#solar-icons";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "@revenexx/studio";
+const props = defineProps({
+  columns: { type: Array, required: true }
+});
+const sort = defineModel({ type: Object, ...{ required: true } });
+const t = useT();
+const label = computed(() => {
+  const col = props.columns.find((c) => c.key === sort.value.column);
+  if (!col || !sort.value.direction) return t("shared.datatable.sortmenu.label.default");
+  return `${col.label} ${sort.value.direction === "asc" ? "\u2191" : "\u2193"}`;
+});
+function pick(key, direction) {
+  sort.value = { column: key, direction };
+}
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="outline" size="sm" class="h-7 gap-1.5 text-sm" :aria-label="t('shared.datatable.sortmenu.aria')">
+        <SortVertical :size="14" />
+        {{ label }}
+        <AltArrowDown :size="12" class="opacity-60" />
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="start" class="w-52">
+      <template v-for="col in columns" :key="col.key">
+        <DropdownMenuItem class="gap-2" @select="pick(col.key, 'asc')">
+          <span class="flex-1 truncate">{{ col.label }} ↑</span>
+          <span v-if="sort.column === col.key && sort.direction === 'asc'" class="text-xs text-primary">{{ t("shared.datatable.sortmenu.active.badge") }}</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem class="gap-2" @select="pick(col.key, 'desc')">
+          <span class="flex-1 truncate">{{ col.label }} ↓</span>
+          <span v-if="sort.column === col.key && sort.direction === 'desc'" class="text-xs text-primary">{{ t("shared.datatable.sortmenu.active.badge") }}</span>
+        </DropdownMenuItem>
+      </template>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>

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

@@ -0,0 +1,13 @@
+import type { DataTableColumn, SortState } from './types.js';
+type __VLS_Props = {
+    columns: DataTableColumn[];
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue: SortState;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: SortState) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: SortState) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,20 @@
+/**
+ * List | Gallery (| …) switch for the DataTable toolbar.
+ *
+ * A gallery is a view mode of a table, not a different kind of page: the
+ * toolbar, the footer and the data pipeline stay put, only the body swaps
+ * for the `#view` slot.
+ */
+import type { DataTableViewMode } from './types.js';
+type __VLS_Props = {
+    modes: DataTableViewMode[];
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,26 @@
+<script setup>
+defineProps({
+  modes: { type: Array, required: true }
+});
+const mode = defineModel({ type: String, ...{ required: true } });
+</script>
+
+<template>
+  <div class="inline-flex shrink-0 overflow-hidden rounded-md border border-black/[0.06]">
+    <button
+      v-for="(m, i) in modes"
+      :key="m.value"
+      type="button"
+      class="inline-flex items-center gap-1.5 px-2.5 py-1 text-sm transition-colors"
+      :class="[
+  i > 0 ? 'border-l border-black/[0.06]' : '',
+  mode === m.value ? 'bg-primary/10 font-medium text-[#0B0522]' : 'text-muted-foreground hover:bg-muted/60'
+]"
+      :aria-pressed="mode === m.value"
+      @click="mode = m.value"
+    >
+      <component :is="m.icon" v-if="m.icon" :size="13" />
+      {{ m.label }}
+    </button>
+  </div>
+</template>

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

@@ -0,0 +1,20 @@
+/**
+ * List | Gallery (| …) switch for the DataTable toolbar.
+ *
+ * A gallery is a view mode of a table, not a different kind of page: the
+ * toolbar, the footer and the data pipeline stay put, only the body swaps
+ * for the `#view` slot.
+ */
+import type { DataTableViewMode } from './types.js';
+type __VLS_Props = {
+    modes: DataTableViewMode[];
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -46,8 +46,21 @@ export interface DataTableFilter<T = unknown> {
     key?: string;
     /** Sub-menu title, e.g. "Status" (default `Status`). */
     label?: string;
-    /** The row's value for this dimension (e.g. `r => r.status`). */
-    getter: (row: T) => string | null | undefined;
+    /**
+     * The row's value(s) for this dimension.
+     *
+     * A string for anything a row has exactly one of — `r => r.status`. An ARRAY
+     * where a row can have several, and that is not a convenience: modelled as
+     * one value, `r => r.locales.join(', ')` makes the SET the value, so the
+     * options become combinations (four languages produce up to fifteen, six up
+     * to sixty-three) and "which of these have Polish?" cannot be asked at all —
+     * the answer is spread across three options and none of the counts is it.
+     *
+     * With an array the row lands in every bucket it belongs to. The counts then
+     * overlap rather than sum to the row total, which is correct and looks like a
+     * bug; see `runtime/lib/dataTableFilters.ts`.
+     */
+    getter: (row: T) => string | string[] | null | undefined;
     /** The selectable values + their labels. */
     options: {
         value: string;
@@ -56,6 +69,40 @@ export interface DataTableFilter<T = unknown> {
     /** Label for the reset/"all" entry (default `All`). */
     allLabel?: string;
 }
+/** A named snapshot of a list surface's filter + sort state. */
+export interface DataTableSavedView<S = unknown> {
+    name: string;
+    snapshot: S;
+}
+/**
+ * Saved-view wiring for the DataTable toolbar. The table owns the control,
+ * the storage and the save/delete dialogs; the surface only says how to read
+ * and write its own filter state.
+ */
+export interface DataTableSavedViews<S = unknown> {
+    /** `localStorage` key — one bucket per list surface. */
+    storageKey: string;
+    /** Label of the reset entry (default `All`). */
+    allLabel?: string;
+    /** The surface's current filter + sort state. */
+    snapshot: () => S;
+    /** The unfiltered baseline the reset entry restores. */
+    defaultSnapshot: () => S;
+    /** Put a snapshot back onto the surface. */
+    apply: (snapshot: S) => void;
+}
+/** One entry of the toolbar's view-mode switch (List | Gallery | …). */
+export interface DataTableViewMode {
+    /** `list` renders the table; any other value renders the `#view` slot. */
+    value: string;
+    label: string;
+    icon?: Component;
+}
+/** Collapsible left-rail affordance in the toolbar. */
+export interface DataTableRail {
+    /** Button label (default `Filters`). */
+    label?: string;
+}
 export type SortDirection = 'asc' | 'desc' | null;
 export interface SortState {
     column: string | null;

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

@@ -0,0 +1,17 @@
+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.
+ */
+type __VLS_Props = {
+    nodes: StorageFolderNode[];
+    currentId: string | null;
+    /** 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;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((id: string | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,65 @@
+<script setup>
+import { Folder as FolderIcon, FolderOpen, AltArrowRight } from "#solar-icons";
+const props = defineProps({
+  nodes: { type: Array, required: true },
+  currentId: { type: [String, null], required: true },
+  depth: { type: Number, required: false }
+});
+const emit = defineEmits(["select"]);
+const expanded = ref(/* @__PURE__ */ new Set());
+function toggle(id) {
+  const next = new Set(expanded.value);
+  if (next.has(id)) next.delete(id);
+  else next.add(id);
+  expanded.value = next;
+}
+const depth = computed(() => props.depth ?? 0);
+const t = useT();
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <div
+      v-for="node in nodes"
+      :key="node.id"
+    >
+      <div
+        class="group flex items-center gap-1 rounded-md pr-2 py-1 text-sm transition-colors cursor-pointer"
+        :class="currentId === node.id ? 'bg-primary/10 text-[#0B0522] font-medium' : 'text-foreground/80 hover:bg-primary/5'"
+        :style="{ paddingLeft: `${depth * 12 + 4}px` }"
+        @click="emit('select', node.id)"
+      >
+        <button
+          type="button"
+          class="shrink-0 rounded p-0.5 text-foreground/40 hover:text-foreground/80"
+          :class="{ invisible: node.children.length === 0 }"
+          @click.stop="toggle(node.id)"
+        >
+          <AltArrowRight
+            :size="12"
+            class="transition-transform"
+            :class="{ 'rotate-90': expanded.has(node.id) }"
+          />
+        </button>
+        <component
+          :is="currentId === node.id ? FolderOpen : FolderIcon"
+          :size="14"
+          class="shrink-0 text-foreground/50"
+        />
+        <span class="flex-1 truncate">{{ node.name }}</span>
+        <span
+          v-if="node.is_system"
+          class="rounded bg-muted px-1 text-[10px] font-medium text-muted-foreground"
+        >{{ t("shared.media.foldertree.badge.system") }}</span>
+      </div>
+
+      <MediaFolderTree
+        v-if="node.children.length && expanded.has(node.id)"
+        :nodes="node.children"
+        :current-id="currentId"
+        :depth="depth + 1"
+        @select="(id) => emit('select', id)"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,17 @@
+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.
+ */
+type __VLS_Props = {
+    nodes: StorageFolderNode[];
+    currentId: string | null;
+    /** 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;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((id: string | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,18 @@
+import type { StorageAsset } from '../../types/storage.js';
+type __VLS_Props = {
+    open: boolean;
+    multiple?: boolean;
+    /** Restrict the grid to these asset kinds (e.g. ['image']). */
+    kinds?: string[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (assets: StorageAsset[]) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((assets: StorageAsset[]) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    multiple: boolean;
+    kinds: string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;