rimecms 0.33.0 → 1.0.1

package/dist/panel/components/ui/tabs/tabs.css

@@ -1,8 +1,3 @@
-.rz-tabs[data-tabs-root] {
-  margin-left: calc(-1 * var(--rz-fields-padding));
-  margin-right: calc(-1 * var(--rz-fields-padding));
-}
-
 /**************************************/
 /* Trigger
 /**************************************/
@@ -15,36 +10,51 @@
   white-space: nowrap;
   text-transform: capitalize;
   transition: all 0.2s ease;
-  border-bottom: 2px solid transparent;
-  --rz-ring-opacity: 0;
-  box-shadow:
-    0 0 0 var(--rz-ring-offset, 0px) hsl(var(--rz-ring-offset-bg, var(--rz-gray-6)) / 1),
-    0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-ring) / var(--rz-ring-opacity, 1));
-  font-variation-settings: 'wght' 600;
-  font-weight: 600;
+  padding-inline: var(--rz-size-3);
+  border-radius: var(--rz-radius-md);
+  background-color: transparent;
+  color: var(--rz-fg-muted);
+  font-variation-settings: 'wght' 380;
+  font-weight: 380;
+}
+
+.rz-tabs-trigger:hover {
+  color: var(--rz-fg);
+}
+
+/* With a data-label, the trigger keeps the width of its bolder, active label. */
+.rz-tabs-trigger[data-label] {
+  flex-direction: column;
+}
+.rz-tabs-trigger[data-label]::after {
+  content: attr(data-label);
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+  font-variation-settings: 'wght' 450;
+  font-weight: 450;
 }
 
 .rz-tabs-trigger[data-state='active'] {
-  border-color: hsl(var(--rz-color-fg));
+  background-color: var(--rz-bg-knob);
+  box-shadow: var(--rz-shadow-knob);
   position: relative;
+  font-variation-settings: 'wght' 450;
+  font-weight: 450;
 }
 
 .rz-tabs-trigger[data-state='active']:not([data-error='true']) {
-  color: hsl(var(--rz-color-fg));
+  color: var(--rz-fg);
 }
 .rz-tabs-trigger[data-error='true'] {
-  color: hsl(var(--rz-color-alert) / 1);
-}
-.rz-tabs-trigger[data-state='inactive'] {
-  opacity: 0.8;
+  color: var(--rz-danger);
 }
 
+/* The ring hugs the trigger: the track clips what overflows it. */
 .rz-tabs-trigger:focus-visible {
-  --rz-ring-opacity: 1;
-  box-shadow:
-    0 0 0 var(--rz-ring-offset, 0px) hsl(var(--rz-ring-offset-bg, var(--rz-gray-6)) / 1),
-    0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-ring) / var(--rz-ring-opacity, 1));
-  outline: none;
+  outline: 2px solid var(--rz-accent-border);
+  outline-offset: 2px;
+  outline-offset: 0;
 }
 .rz-tabs-trigger:disabled {
   pointer-events: none;
@@ -59,13 +69,9 @@
   margin-top: var(--rz-size-2);
 }
 .rz-tabs-content:focus-visible {
-  outline: none;
   border-radius: var(--rz-radius-sm);
-  --rz-ring-offset: 8px;
-  --rz-ring-offset-bg: var(--rz-color-bg);
-  box-shadow:
-    0 0 0 var(--rz-ring-offset, 0px) hsl(var(--rz-ring-offset-bg, var(--rz-gray-6)) / 1),
-    0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-ring) / var(--rz-ring-opacity, 1));
+  outline: 2px solid var(--rz-accent-border);
+  outline-offset: 2px;
 }
 
 /**************************************/
@@ -75,13 +81,16 @@
 .rz-tabs-list {
   overflow-x: auto;
   overflow-y: visible;
-  background-color: hsl(var(--rz-color-bg));
-  color: hsl(var(--rz-ground-2) / 1);
-  height: var(--rz-size-10);
-  width: 100%;
+  background-color: var(--rz-bg-well);
+  box-shadow: inset 0 0 0 1px var(--rz-border);
+  border-radius: var(--rz-radius-lg);
+  padding: 3px;
+  height: var(--rz-size-9);
+  width: -moz-fit-content;
+  width: fit-content;
+  max-width: 100%;
   display: inline-flex;
   align-items: center;
-  gap: var(--rz-size-6);
+  gap: 2px;
   justify-content: flex-start;
-  /* border-bottom: 1px solid hsl(var(--rz-color-border)); */
 }

package/dist/panel/components/ui/tag/tag.svelte

@@ -20,10 +20,24 @@
   </button>
 </div>
 
-<style global>
-  :root {
-    --tag-color-bg: hsl(var(--rz-gray-0));
-    --tag-color-fg: hsl(var(--rz-gray-13));
+<style global>/* A level: its fill, a hairline, its shadow. raised, float. */
+
+/* A well: an input, a track, a dropzone. Its edge shows on hover. */
+
+/* The hover tint, laid over the element's own fill. */
+
+/* The picked item of a segmented control. */
+
+/* The primary button's face: black on light, white on dark. */
+
+/* Keyboard focus on a button, a tab, a link. */
+
+/* A focused input: an accent edge and a soft halo. */
+
+/* An input with an error. */
+:root {
+    --tag-color-bg: var(--rz-bg-active);
+    --tag-color-fg: var(--rz-fg-muted);
   }
 
   .rz-tag {
@@ -48,8 +62,8 @@
   }
 
   .rz-tag__button:focus-visible {
-    outline: none;
-    background-color: hsl(var(--rz-color-ring));
+    outline: 2px solid var(--rz-accent-border);
+    outline-offset: 2px;
   }
 
   .rz-tag__button--readonly {

package/dist/panel/components/ui/tooltip/tooltip-content.svelte

@@ -25,8 +25,8 @@
 
 <style>
   :root {
-    --rz-tooltip-color-fg: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-2)));
-    --rz-tooltip-color-bg: light-dark(hsl(var(--rz-gray-0)), hsl(var(--rz-gray-11)));
+    --rz-tooltip-color-fg: var(--rz-fg-inverse);
+    --rz-tooltip-color-bg: var(--rz-bg-inverse);
   }
 
   .rz-tooltip {
@@ -34,8 +34,18 @@
     color: var(--rz-tooltip-color-fg);
     padding: var(--rz-size-1-5) var(--rz-size-3);
     font-size: var(--rz-text-xs);
-    z-index: 200;
-    overflow: hidden;
+    z-index: 400;
     border-radius: var(--rz-radius-md);
+    position: relative;
+    &:before {
+      left: 0;
+      top: 12px;
+      content: '';
+      width: 6px;
+      background-color: var(--rz-tooltip-color-bg);
+      height: 6px;
+      transform: rotate(45deg) translateX(-3px);
+      position: absolute;
+    }
   }
 </style>

package/dist/panel/components/ui/tree/tree-rows.css

@@ -0,0 +1,146 @@
+/*
+ * Rows of a tree in one raised card: a nested collection's documents.
+ * A list sets the depth of its rows; a row moved into another list, while dragged, takes that
+ * list's depth at once.
+ *
+ *   ╭──────────────────────────────────────╮
+ *   │ ⠿ ⌄  About                        ⋯ │   depth 0
+ *   │ ⠿  │    Team                       ⋯ │   depth 1, the guide under About's chevron
+ *   │ ⠿ ›  Blog  3                      ⋯ │   folded, its count of children
+ *   ╰──────────────────────────────────────╯
+ *
+ *   [grip 24][20 × depth][chevron 16][8][title …]
+ */
+
+.rz-tree-rows {
+  position: relative;
+}
+
+/* The card around a tree: its rows, and whatever heads them. */
+.rz-tree-card:not([data-empty]) {
+  background-color: var(--rz-bg-raised);
+  box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-raised);
+  border-radius: var(--rz-radius-xl);
+  overflow: hidden;
+
+  /* A first row on the card's edge has no hairline above it. */
+  > :first-child > .rz-tree-row {
+    box-shadow: none;
+  }
+}
+
+/* Inside a group, a block, a tree item or a stage card: a hairline, no second fill. */
+:is(.rz-group-field__content, .rz-block__fields, .rz-tree-item__fields, .rz-stage__fields)
+  .rz-tree-card:not([data-empty]) {
+  background-color: transparent;
+  box-shadow: 0 0 0 1px var(--rz-border);
+}
+
+/* A nested list: the guide down from its parent's chevron, through every row under it. */
+.rz-tree-rows:not(.rz-tree-rows--root)::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: calc(calc(8 * var(--rz-unit)) + (var(--rz-tree-depth, 1) - 1) * calc(5 * var(--rz-unit)));
+  width: 1px;
+  background-color: var(--rz-border-strong);
+  pointer-events: none;
+}
+
+.rz-tree-rows:not(:has(> *))::before {
+  display: none;
+}
+
+.rz-tree-rows[hidden] {
+  display: none;
+}
+
+/* A row: flat, a hairline above it, pushed right by its depth. */
+.rz-tree-row {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--rz-size-2);
+  min-height: var(--rz-row-height);
+  padding-left: calc(calc(6 * var(--rz-unit)) + var(--rz-tree-depth, 0) * calc(5 * var(--rz-unit)));
+  padding-right: var(--rz-size-2);
+  box-shadow: inset 0 1px 0 var(--rz-border);
+  transition: background-color 0.15s;
+
+  &:hover {
+    background-color: var(--rz-bg-hover);
+  }
+}
+
+/* The grip, at the row's left edge whatever its depth; faint, clear on hover. */
+.rz-tree-row__grip {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  display: grid;
+  place-items: center;
+  width: var(--rz-size-6);
+  color: var(--rz-fg-subtle);
+  opacity: 0.5;
+  cursor: grab;
+  transition: opacity 0.15s;
+}
+
+.rz-tree-row:hover .rz-tree-row__grip {
+  opacity: 1;
+}
+
+/* Folds the children, on a row that has some. */
+.rz-tree-row__fold {
+  display: grid;
+  flex-shrink: 0;
+  place-items: center;
+  width: var(--rz-size-4);
+  height: var(--rz-size-4);
+  border-radius: var(--rz-radius-sm);
+  color: var(--rz-fg-subtle);
+
+  &:hover {
+    background-color: var(--rz-bg-hover);
+    color: var(--rz-fg);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--rz-accent-border);
+    outline-offset: 2px;
+    outline-offset: 0;
+  }
+}
+
+.rz-tree-row__title {
+  font-variation-settings: 'wght' 500;
+  font-weight: 500;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+}
+
+/* How many children a folded row holds. */
+.rz-tree-row__count {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  height: calc(4.5 * var(--rz-unit));
+  padding-inline: var(--rz-size-1-5);
+  border-radius: var(--rz-radius-full);
+  background-color: var(--rz-bg-well);
+  box-shadow: inset 0 0 0 1px var(--rz-border);
+  color: var(--rz-fg-subtle);
+  font-size: var(--rz-text-xs);
+}
+
+/* The row in hand stays faint where it will land. */
+.sortable-ghost > .rz-tree-row {
+  opacity: 0.4;
+}

package/dist/panel/context/blocks-ops.d.ts

@@ -0,0 +1,78 @@
+import type { GenericBlock } from '../../core/prototype/types.js';
+import type { Dic } from '../../util/types.js';
+/**
+ * The block operations, over a plain document. The form wraps them with its state, its errors
+ * and its live-edit callback; every view of the blocks — the inline cards, the focus mode, the
+ * shortcuts — goes through the form and lands here.
+ *
+ * Paths are normalized: no `:type` segment. A block path names one block, `sections.2`; a list
+ * path names the array it sits in, `sections` or `sections.0.items`.
+ */
+/** Where a block goes: the list, and the index it will have in it. `list.length` appends. */
+export type BlockAt = {
+    list: string;
+    index: number;
+};
+/** A block to insert: its type and its values. Id, path and position are given on the way in. */
+export type NewBlock = {
+    type: string;
+} & Dic;
+/** What the clipboard carries. */
+export type BlockClipboardData = {
+    rime: typeof CLIPBOARD_KIND;
+    type: string;
+    block: GenericBlock;
+};
+export declare const CLIPBOARD_KIND = "block";
+export declare const tempId: () => string;
+/** `sections.0.items.2` -> `{ list: 'sections.0.items', index: 2 }` */
+export declare const parseBlockPath: (path: string) => BlockAt;
+export declare const blockPath: (at: BlockAt) => string;
+/** Whether `path` is `ancestor` itself or lies below it. */
+export declare const isWithin: (path: string, ancestor: string) => boolean;
+/**
+ * The index a list path carries at the position `removed` names, once the block at `removed` is
+ * gone: a list under a later sibling moves up by one.
+ *
+ * ```
+ * shiftListPath('sections.3.items', { list: 'sections', index: 1 }) // 'sections.2.items'
+ * shiftListPath('sections.0.items', { list: 'sections', index: 1 }) // 'sections.0.items'
+ * ```
+ */
+export declare const shiftListPath: (list: string, removed: BlockAt, delta?: number) => string;
+/**
+ * The path with each block index carrying its type, read off the document: what
+ * `getFieldAtPath` wants.
+ *
+ * ```
+ * withBlockTypes('sections.0.items.1', doc) // 'sections.0:grid.items.1:paragraph'
+ * ```
+ */
+export declare const withBlockTypes: (path: string, doc: Dic) => string;
+/**
+ * Every `path` and `position` under a list, rewritten from the list's own path: the block's, and
+ * those of the lists nested in it.
+ */
+export declare const rebuildPaths: <T extends Dic>(items: T[], listPath: string) => T[];
+/** A copy with a fresh temporary id on the block and on everything nested that has one. */
+export declare const withFreshIds: <T extends Dic>(block: T) => T;
+export declare const readList: (doc: Dic, list: string) => GenericBlock[];
+export type BlocksChange<D extends Dic> = {
+    doc: D;
+    lists: string[];
+};
+export declare const insertBlock: <D extends Dic>(doc: D, at: BlockAt, block: NewBlock) => BlocksChange<D> & {
+    id: string;
+};
+export declare const removeBlock: <D extends Dic>(doc: D, path: string) => BlocksChange<D>;
+export declare const duplicateBlock: <D extends Dic>(doc: D, path: string) => BlocksChange<D> & {
+    id: string | null;
+};
+/**
+ * `to.index` is the index the block has in `to.list` once it is there — what a sortable's
+ * `newIndex` says. A move into the block's own subtree is refused and changes nothing.
+ */
+export declare const moveBlock: <D extends Dic>(doc: D, from: string, to: BlockAt) => BlocksChange<D>;
+export declare const toClipboard: (block: GenericBlock) => BlockClipboardData;
+/** The block a clipboard text holds, or `null` when the text is something else. */
+export declare const fromClipboard: (text: string) => BlockClipboardData | null;

package/dist/panel/context/blocks-ops.js

@@ -0,0 +1,170 @@
+import { getValueAtPath, isObjectLiteral, setValueAtPath } from '../../util/object.js';
+import { normalizeFieldPath } from '../../util/string.js';
+import { randomId } from '../../util/random.js';
+import cloneDeep from 'clone-deep';
+export const CLIPBOARD_KIND = 'block';
+export const tempId = () => `temp-${randomId(8)}`;
+/** `sections.0.items.2` -> `{ list: 'sections.0.items', index: 2 }` */
+export const parseBlockPath = (path) => {
+    const normalized = normalizeFieldPath(path);
+    const dot = normalized.lastIndexOf('.');
+    return { list: normalized.slice(0, dot), index: parseInt(normalized.slice(dot + 1)) };
+};
+export const blockPath = (at) => `${at.list}.${at.index}`;
+/** Whether `path` is `ancestor` itself or lies below it. */
+export const isWithin = (path, ancestor) => path === ancestor || path.startsWith(`${ancestor}.`);
+/**
+ * The index a list path carries at the position `removed` names, once the block at `removed` is
+ * gone: a list under a later sibling moves up by one.
+ *
+ * ```
+ * shiftListPath('sections.3.items', { list: 'sections', index: 1 }) // 'sections.2.items'
+ * shiftListPath('sections.0.items', { list: 'sections', index: 1 }) // 'sections.0.items'
+ * ```
+ */
+export const shiftListPath = (list, removed, delta = -1) => {
+    const prefix = removed.list ? `${removed.list}.` : '';
+    if (!list.startsWith(prefix))
+        return list;
+    const rest = list.slice(prefix.length);
+    const [head, ...tail] = rest.split('.');
+    const index = parseInt(head);
+    if (Number.isNaN(index) || index < removed.index)
+        return list;
+    if (index === removed.index && delta < 0)
+        return list;
+    return [prefix + (index + delta), ...tail].join('.');
+};
+/**
+ * The path with each block index carrying its type, read off the document: what
+ * `getFieldAtPath` wants.
+ *
+ * ```
+ * withBlockTypes('sections.0.items.1', doc) // 'sections.0:grid.items.1:paragraph'
+ * ```
+ */
+export const withBlockTypes = (path, doc) => {
+    const parts = normalizeFieldPath(path).split('.');
+    const typed = [];
+    for (let i = 0; i < parts.length; i++) {
+        const part = parts[i];
+        const isIndex = /^\d+$/.test(part);
+        if (isIndex) {
+            const item = getValueAtPath([...parts.slice(0, i), part].join('.'), doc);
+            const type = item && isObjectLiteral(item) && typeof item.type === 'string' ? item.type : '';
+            typed.push(type ? `${part}:${type}` : part);
+        }
+        else {
+            typed.push(part);
+        }
+    }
+    return typed.join('.');
+};
+/**
+ * Every `path` and `position` under a list, rewritten from the list's own path: the block's, and
+ * those of the lists nested in it.
+ */
+export const rebuildPaths = (items, listPath) => items.map((item, index) => {
+    const next = cloneDeep(item);
+    if ('path' in next)
+        next.path = listPath;
+    next.position = index;
+    for (const key of Object.keys(next)) {
+        const value = next[key];
+        if (Array.isArray(value) && value.length && isObjectLiteral(value[0])) {
+            next[key] = rebuildPaths(value, `${listPath}.${index}.${key}`);
+        }
+    }
+    return next;
+});
+/** A copy with a fresh temporary id on the block and on everything nested that has one. */
+export const withFreshIds = (block) => {
+    const reset = (value) => {
+        if (Array.isArray(value))
+            return value.map(reset);
+        if (!isObjectLiteral(value))
+            return value;
+        const next = {};
+        for (const [key, child] of Object.entries(value))
+            next[key] = reset(child);
+        if ('id' in next)
+            next.id = tempId();
+        return next;
+    };
+    return reset(cloneDeep(block));
+};
+export const readList = (doc, list) => cloneDeep(getValueAtPath(list, doc)) || [];
+/** One list rewritten and set back on the document. */
+const writeList = (doc, list, blocks) => setValueAtPath(list, doc, rebuildPaths(blocks, list));
+export const insertBlock = (doc, at, block) => {
+    const id = tempId();
+    const blocks = readList(doc, at.list);
+    const inserted = {
+        ...block,
+        id,
+        type: block.type,
+        path: at.list,
+        position: at.index
+    };
+    blocks.splice(at.index, 0, inserted);
+    return { doc: writeList(doc, at.list, blocks), lists: [at.list], id };
+};
+export const removeBlock = (doc, path) => {
+    const at = parseBlockPath(path);
+    const blocks = readList(doc, at.list).filter((_, index) => index !== at.index);
+    return { doc: writeList(doc, at.list, blocks), lists: [at.list] };
+};
+export const duplicateBlock = (doc, path) => {
+    const at = parseBlockPath(path);
+    const blocks = readList(doc, at.list);
+    const source = blocks[at.index];
+    if (!source)
+        return { doc, lists: [], id: null };
+    const copy = withFreshIds(source);
+    blocks.splice(at.index + 1, 0, copy);
+    return { doc: writeList(doc, at.list, blocks), lists: [at.list], id: copy.id };
+};
+/**
+ * `to.index` is the index the block has in `to.list` once it is there — what a sortable's
+ * `newIndex` says. A move into the block's own subtree is refused and changes nothing.
+ */
+export const moveBlock = (doc, from, to) => {
+    const source = parseBlockPath(from);
+    const sourcePath = blockPath(source);
+    if (isWithin(to.list, sourcePath))
+        return { doc, lists: [] };
+    const sourceBlocks = readList(doc, source.list);
+    const [moved] = sourceBlocks.splice(source.index, 1);
+    if (!moved)
+        return { doc, lists: [] };
+    if (to.list === source.list) {
+        sourceBlocks.splice(to.index, 0, moved);
+        return { doc: writeList(doc, source.list, sourceBlocks), lists: [source.list] };
+    }
+    // The source list first; the target may hang under one of its later siblings and shift.
+    let next = writeList(doc, source.list, sourceBlocks);
+    const targetList = shiftListPath(to.list, source);
+    const targetBlocks = readList(next, targetList);
+    targetBlocks.splice(to.index, 0, moved);
+    next = writeList(next, targetList, targetBlocks);
+    return { doc: next, lists: [source.list, targetList] };
+};
+export const toClipboard = (block) => ({
+    rime: CLIPBOARD_KIND,
+    type: block.type,
+    block: cloneDeep(block)
+});
+/** The block a clipboard text holds, or `null` when the text is something else. */
+export const fromClipboard = (text) => {
+    try {
+        const data = JSON.parse(text);
+        if (!isObjectLiteral(data) || data.rime !== CLIPBOARD_KIND)
+            return null;
+        if (typeof data.type !== 'string' || !isObjectLiteral(data.block))
+            return null;
+        return data;
+    }
+    catch {
+        return null;
+    }
+};

package/dist/panel/context/collection.svelte.d.ts

@@ -1,9 +1,13 @@
 import type { BuiltCollection } from '../../core/config/types.js';
 import type { Directory } from '../../core/prototype/collection/upload/types.js';
 import type { GenericDoc } from '../../core/prototype/types.js';
+import { VERSIONS_STATUS } from '../../core/prototype/shared/versions/constant.js';
 import type { FormField } from '../../fields/types.js';
+import { type MediaKind } from '../util/upload-file.js';
 type SortMode = 'asc' | 'dsc';
 export type DisplayMode = (typeof DISPLAY_MODE)[keyof typeof DISPLAY_MODE];
+export type StatusFilter = 'all' | typeof VERSIONS_STATUS.DRAFT | typeof VERSIONS_STATUS.PUBLISHED;
+export type KindFilter = 'all' | MediaKind;
 export declare const DISPLAY_MODE: {
     readonly LIST: "display_list";
     readonly GRID: "display_grid";
@@ -34,10 +38,22 @@ export declare function setCollectionContext(args: Args): {
     toggleSelectOf: (docId: string) => void;
     selectAll: () => void;
     selected: string[];
+    /** On while a document is checked; turning it off drops the selection. */
     selectMode: boolean;
     readonly isAllSelected: boolean;
     deleteSelection: () => Promise<void>;
     filterBy: (inputValue: string) => void;
+    /** The documents on screen, after the search, the folder and the filters. */
+    readonly shown: GenericDoc[];
+    /** A filter change drops the selection, so no hidden document stays picked. */
+    statusFilter: StatusFilter;
+    kindFilter: KindFilter;
+    readonly kinds: ("image" | "document" | "audio" | "video" | "other")[];
+    readonly draftsCount: number;
+    readonly totalSize: number;
+    /** Every document of the collection, whatever the search. */
+    readonly total: number;
+    pathOf: (doc: GenericDoc) => string;
     readonly isUpload: boolean;
     upload: {
         directories: Directory[];
@@ -84,10 +100,22 @@ export declare function getCollectionContext(): {
     toggleSelectOf: (docId: string) => void;
     selectAll: () => void;
     selected: string[];
+    /** On while a document is checked; turning it off drops the selection. */
     selectMode: boolean;
     readonly isAllSelected: boolean;
     deleteSelection: () => Promise<void>;
     filterBy: (inputValue: string) => void;
+    /** The documents on screen, after the search, the folder and the filters. */
+    readonly shown: GenericDoc[];
+    /** A filter change drops the selection, so no hidden document stays picked. */
+    statusFilter: StatusFilter;
+    kindFilter: KindFilter;
+    readonly kinds: ("image" | "document" | "audio" | "video" | "other")[];
+    readonly draftsCount: number;
+    readonly totalSize: number;
+    /** Every document of the collection, whatever the search. */
+    readonly total: number;
+    pathOf: (doc: GenericDoc) => string;
     readonly isUpload: boolean;
     upload: {
         directories: Directory[];