rimecms 0.33.0 → 1.0.0

package/dist/panel/style/palette.css

@@ -1,30 +1,39 @@
+/*
+ * The palette: grays and an accent in OKLCH, set by four numbers. 0 is the darkest gray.
+ * Only scheme.css reads it; components read the scheme's tokens.
+ */
 :root {
-  --rz-gray-0: 0 0% 2.03%;
-  --rz-gray-1: 0 0% 4.52%;
-  --rz-gray-2: 0 0% 7.94%;
-  --rz-gray-3: 0 0% 12.21%;
-  --rz-gray-4: 0 0% 17.26%;
-  --rz-gray-5: 0 0% 22.97%;
-  --rz-gray-6: 0 0% 29.23%;
-  --rz-gray-7: 0 0% 35.91%;
-  --rz-gray-8: 0 0% 42.88%;
-  --rz-gray-9: 0 0% 50%;
-  --rz-gray-10: 0 0% 57.12%;
-  --rz-gray-11: 0 0% 64.09%;
-  --rz-gray-12: 0 0% 70.77%;
-  --rz-gray-13: 0 0% 77.03%;
-  --rz-gray-14: 0 0% 82.74%;
-  --rz-gray-15: 0 0% 87.79%;
-  --rz-gray-16: 0 0% 92.06%;
-  --rz-gray-17: 0 0% 95.48%;
-  --rz-gray-18: 0 0% 97.97%;
-  --rz-gray-19: 0 0% 99.49%;
+  --rz-gray-hue: 0;
+  --rz-gray-chroma: 0;
+  --rz-gray-0: oklch(0.13 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-1: oklch(0.155 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-2: oklch(0.178 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-3: oklch(0.203 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-4: oklch(0.232 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-5: oklch(0.27 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-6: oklch(0.33 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-7: oklch(0.4 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-8: oklch(0.48 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-9: oklch(0.555 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-10: oklch(0.625 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-11: oklch(0.69 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-12: oklch(0.755 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-13: oklch(0.815 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-14: oklch(0.865 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-15: oklch(0.905 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-16: oklch(0.94 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-17: oklch(0.965 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-18: oklch(0.982 var(--rz-gray-chroma) var(--rz-gray-hue));
+  --rz-gray-19: oklch(0.996 var(--rz-gray-chroma) var(--rz-gray-hue));
 
-  /* --rz-color-spot: 160deg 72% 49%; */
-  --rz-color-spot: 229deg 89% 60%;
-  --rz-color-spot-fg: 229deg 72% 19%;
+  --rz-accent-hue: 268;
+  --rz-accent-chroma: 0.19;
+  --rz-accent-strong: oklch(0.5 var(--rz-accent-chroma) var(--rz-accent-hue));
+  --rz-accent-solid: oklch(0.585 var(--rz-accent-chroma) var(--rz-accent-hue));
+  --rz-accent-soft: oklch(0.76 calc(var(--rz-accent-chroma) * 0.8) var(--rz-accent-hue));
+  --rz-accent-contrast: oklch(0.99 0 0);
 
-  --rz-color-success: 160deg 72% 49%;
-  --rz-color-warn: 14deg, 80%, 60%;
-  --rz-color-alert: 4deg 100% 69%;
+  --rz-success: oklch(0.64 0.14 155);
+  --rz-warn: oklch(0.76 0.15 70);
+  --rz-danger: oklch(0.62 0.19 25);
 }

package/dist/panel/style/postcss/size-function.d.ts

@@ -0,0 +1,4 @@
+export function sizeFunction(): import("postcss").Plugin;
+export namespace sizeFunction {
+    let postcss: boolean;
+}

package/dist/panel/style/postcss/size-function.js

@@ -0,0 +1,24 @@
+/**
+ * `--size(n)`: a length off the size scale, `n` steps of `--rz-unit` (0.25rem).
+ *
+ * The named sizes (`--rz-size-4`, `--rz-size-2-5`, …) cover the usual steps; this reaches the
+ * others without adding two of them together.
+ *
+ * ```css
+ * width: --size(5.5);           ->  width: calc(5.5 * var(--rz-unit));
+ * margin: --size(-2) --size(1); ->  margin: calc(-2 * var(--rz-unit)) calc(1 * var(--rz-unit));
+ * ```
+ *
+ * @returns {import('postcss').Plugin}
+ */
+export const sizeFunction = () => ({
+  postcssPlugin: 'rz-size-function',
+  Declaration(decl) {
+    if (!decl.value.includes('--size(')) return;
+    decl.value = decl.value.replace(
+      /--size\(\s*(-?\d*\.?\d+)\s*\)/g,
+      (/** @type {string} */ _, /** @type {string} */ n) => `calc(${n} * var(--rz-unit))`
+    );
+  }
+});
+sizeFunction.postcss = true;

package/dist/panel/style/radius.css

@@ -1,9 +1,8 @@
 :root {
   --rz-radius-none: 0;
-  --rz-base-radius: 0.165rem;
-  --rz-radius-sm: calc(var(--rz-base-radius) * 1);
-  --rz-radius-md: calc(var(--rz-base-radius) * 1.5);
-  --rz-radius-lg: calc(var(--rz-base-radius) * 2);
-  --rz-radius-xl: calc(var(--rz-base-radius) * 4);
+  --rz-radius-sm: 0.25rem;
+  --rz-radius-md: 0.375rem;
+  --rz-radius-lg: 0.4375rem;
+  --rz-radius-xl: 0.625rem;
   --rz-radius-full: 999999px;
 }

package/dist/panel/style/scheme.css

@@ -0,0 +1,111 @@
+/*
+ * What each token is, in light and in dark. Nothing else names a gray.
+ *
+ * base → page → raised → float: each level sits on the one before it.
+ * The tints are translucent, so they shade whatever level is under them.
+ */
+:root {
+  color-scheme: light dark;
+
+  /* levels */
+  --rz-bg-base: var(--rz-gray-17);
+  --rz-bg-page: var(--rz-gray-19);
+  --rz-bg-raised: var(--rz-gray-19);
+  --rz-bg-float: var(--rz-gray-19);
+  --rz-bg-knob: var(--rz-gray-19);
+  --rz-bg-inverse: var(--rz-gray-2);
+
+  /* tints */
+  --rz-bg-well: oklch(from var(--rz-gray-0) l c h / 0.035);
+  --rz-bg-hover: oklch(from var(--rz-gray-0) l c h / 0.035);
+  --rz-bg-active: oklch(from var(--rz-gray-0) l c h / 0.06);
+  --rz-bg-overlay: oklch(from var(--rz-gray-0) l c h / 0.2);
+
+  /* borders */
+  --rz-border: oklch(from var(--rz-gray-0) l c h / 0.075);
+  --rz-border-strong: oklch(from var(--rz-gray-0) l c h / 0.13);
+
+  /* text */
+  --rz-fg: var(--rz-gray-2);
+  --rz-fg-muted: var(--rz-gray-8);
+  --rz-fg-subtle: var(--rz-gray-10);
+  --rz-fg-inverse: var(--rz-gray-18);
+
+  /* accent: focus, a selection, a link */
+  --rz-accent: var(--rz-accent-solid);
+  --rz-accent-fg: var(--rz-accent-contrast);
+  --rz-accent-text: var(--rz-accent-strong);
+  --rz-accent-tint: oklch(from var(--rz-accent-solid) l c h / 0.07);
+  --rz-accent-border: oklch(from var(--rz-accent-solid) l c h / 0.5);
+  --rz-ring: oklch(from var(--rz-accent-solid) l c h / 0.16);
+
+  /* shadows: light mode lifts with a shadow, dark mode with a lit top edge */
+  --rz-shadow-raised: 0 1px 2px oklch(from var(--rz-gray-0) l c h / 0.035);
+  --rz-shadow-float:
+    0 4px 12px -2px oklch(from var(--rz-gray-0) l c h / 0.06),
+    0 16px 36px -12px oklch(from var(--rz-gray-0) l c h / 0.16);
+  --rz-shadow-knob:
+    0 0 0 1px oklch(from var(--rz-gray-0) l c h / 0.06),
+    0 1px 2px oklch(from var(--rz-gray-0) l c h / 0.08);
+
+  /* gradients */
+  --rz-gradient-primary: linear-gradient(
+    180deg,
+    oklch(from var(--rz-bg-inverse) calc(l + 0.08) c h),
+    var(--rz-bg-inverse)
+  );
+  --rz-shadow-primary:
+    inset 0 1px 0 oklch(from var(--rz-gray-19) l c h / 0.12),
+    0 1px 2px oklch(from var(--rz-gray-0) l c h / 0.18);
+  --rz-glow: radial-gradient(
+    70% 38% at 50% 0%,
+    oklch(from var(--rz-accent-solid) l c h / 0.035),
+    transparent
+  );
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --rz-bg-base: var(--rz-gray-1);
+    --rz-bg-page: var(--rz-gray-2);
+    --rz-bg-raised: var(--rz-gray-3);
+    --rz-bg-float: var(--rz-gray-4);
+    --rz-bg-knob: var(--rz-gray-5);
+    --rz-bg-inverse: var(--rz-gray-17);
+
+    --rz-bg-well: oklch(from var(--rz-gray-19) l c h / 0.035);
+    --rz-bg-hover: oklch(from var(--rz-gray-19) l c h / 0.04);
+    --rz-bg-active: oklch(from var(--rz-gray-19) l c h / 0.07);
+    --rz-bg-overlay: oklch(from var(--rz-gray-0) l c h / 0.55);
+
+    --rz-border: oklch(from var(--rz-gray-19) l c h / 0.07);
+    --rz-border-strong: oklch(from var(--rz-gray-19) l c h / 0.12);
+
+    --rz-fg: var(--rz-gray-17);
+    --rz-fg-muted: var(--rz-gray-12);
+    --rz-fg-subtle: var(--rz-gray-9);
+    --rz-fg-inverse: var(--rz-gray-2);
+
+    --rz-accent-text: var(--rz-accent-soft);
+    --rz-accent-tint: oklch(from var(--rz-accent-solid) l c h / 0.13);
+    --rz-accent-border: oklch(from var(--rz-accent-soft) l c h / 0.45);
+    --rz-ring: oklch(from var(--rz-accent-soft) l c h / 0.2);
+
+    --rz-shadow-raised: inset 0 1px 0 oklch(from var(--rz-gray-19) l c h / 0.03);
+    --rz-shadow-float:
+      inset 0 1px 0 oklch(from var(--rz-gray-19) l c h / 0.05),
+      0 16px 40px -12px oklch(from var(--rz-gray-0) l c h / 0.6);
+    --rz-shadow-knob:
+      inset 0 1px 0 oklch(from var(--rz-gray-19) l c h / 0.07),
+      0 1px 2px oklch(from var(--rz-gray-0) l c h / 0.5);
+
+    --rz-shadow-primary:
+      inset 0 1px 0 oklch(from var(--rz-gray-19) l c h / 0.5),
+      0 1px 2px oklch(from var(--rz-gray-0) l c h / 0.4);
+    --rz-glow: radial-gradient(
+      70% 38% at 50% 0%,
+      oklch(from var(--rz-accent-solid) l c h / 0.07),
+      transparent
+    );
+  }
+}

package/dist/panel/style/size.css

@@ -1,4 +1,7 @@
 :root {
+  /* One step of the scale: `--rz-size-4` is 4 of them, `--size(5.5)` five and a half. */
+  --rz-unit: 0.25rem;
+
   --rz-size-0-5: 0.125rem;
   --rz-size-1: 0.25rem;
   --rz-size-1-5: 0.375rem;

package/dist/panel/util/Sortable.js

@@ -2,16 +2,20 @@ import Sortable from 'sortablejs';
 export const useSortable = ({ ...sortableProps }) => {
     const sortable = (el) => {
         let childNodes = [];
+        let from = null;
         const existing = Sortable.get(el);
         if (existing) {
             // Better safe than sorry. At least we know this ain't the case.
             throw new Error('Instance exist. Should never happen.');
         }
         const sortableInstance = new Sortable(el, {
+            // No text in the drag: an editor under the pointer takes nothing from the drop.
+            setData: (dataTransfer) => dataTransfer.setData('application/x-rime-sortable', '1'),
             ...sortableProps,
             onStart: function (e) {
                 const node = e.item;
-                // Remember the list of child nodes when drag started.
+                // Remember the list, and its child nodes, when drag started.
+                from = e.from;
                 childNodes = Array.prototype.slice.call(node.parentNode.childNodes);
                 // Filter out the 'sortable-fallback' element used on mobile/old browsers.
                 childNodes = childNodes.filter((node) => node.nodeType != Node.ELEMENT_NODE || !node.classList.contains('sortable-fallback'));
@@ -20,12 +24,13 @@ export const useSortable = ({ ...sortableProps }) => {
                 }
             },
             onEnd: function (e) {
-                const node = e.item;
-                const parentNode = node.parentNode;
+                // Put the DOM back the way it was, in the list the drag started from — the item may have
+                // landed in another one — so the state change below is the only thing that reorders.
+                const parentNode = from ?? e.item.parentNode;
                 for (const childNode of childNodes) {
                     parentNode.appendChild(childNode);
                 }
-                if (e.oldIndex == e.newIndex)
+                if (e.from === e.to && e.oldIndex == e.newIndex)
                     return;
                 if (sortableProps.onEnd) {
                     sortableProps.onEnd(e);

package/dist/panel/util/keys.d.ts

@@ -0,0 +1,24 @@
+/** A key chord: `mod` is ⌘ on a Mac, Ctrl elsewhere; `key` is `event.key` in lower case. */
+export type Keys = {
+    mod: boolean;
+    shift: boolean;
+    alt: boolean;
+    key: string;
+};
+/**
+ * `alt+arrowup` -> `{ alt: true, key: 'arrowup' }`. The last part is the key, the others the
+ * modifiers, in any order.
+ */
+export declare function parseKeys(keys: string): Keys;
+/**
+ * The event is exactly this chord: every modifier named, no other one down. Shift does not count
+ * for a character with no case, since some keyboards need it to type one:
+ *
+ *   `/` on a French keyboard is Shift + `:`
+ */
+export declare function matches(event: KeyboardEvent, keys: Keys): boolean;
+export declare const isMac: () => boolean;
+/** `mod+s` -> `⌘S` on a Mac, `Ctrl+S` elsewhere. */
+export declare function formatKeys(keys: string, mac?: boolean): string;
+/** The keyboard is a field's: an input, a textarea, a select, a contenteditable, an editor. */
+export declare function isTyping(event: Event): boolean;

package/dist/panel/util/keys.js

@@ -0,0 +1,63 @@
+/**
+ * `alt+arrowup` -> `{ alt: true, key: 'arrowup' }`. The last part is the key, the others the
+ * modifiers, in any order.
+ */
+export function parseKeys(keys) {
+    const parts = keys.toLowerCase().split('+');
+    const key = parts.pop() ?? '';
+    return {
+        mod: parts.includes('mod'),
+        shift: parts.includes('shift'),
+        alt: parts.includes('alt'),
+        key
+    };
+}
+/**
+ * The event is exactly this chord: every modifier named, no other one down. Shift does not count
+ * for a character with no case, since some keyboards need it to type one:
+ *
+ *   `/` on a French keyboard is Shift + `:`
+ */
+export function matches(event, keys) {
+    const caseless = keys.key.length === 1 && keys.key.toUpperCase() === keys.key.toLowerCase();
+    return (keys.mod === (event.metaKey || event.ctrlKey) &&
+        (caseless || keys.shift === event.shiftKey) &&
+        keys.alt === event.altKey &&
+        keys.key === event.key.toLowerCase());
+}
+export const isMac = () => typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/.test(navigator.platform);
+const KEY_LABELS = {
+    arrowup: '↑',
+    arrowdown: '↓',
+    arrowleft: '←',
+    arrowright: '→',
+    backspace: '⌫',
+    delete: '⌦',
+    escape: 'Esc',
+    enter: '↵'
+};
+/** `mod+s` -> `⌘S` on a Mac, `Ctrl+S` elsewhere. */
+export function formatKeys(keys, mac = isMac()) {
+    const parsed = parseKeys(keys);
+    const parts = [];
+    if (parsed.mod)
+        parts.push(mac ? '⌘' : 'Ctrl');
+    if (parsed.alt)
+        parts.push(mac ? '⌥' : 'Alt');
+    if (parsed.shift)
+        parts.push(mac ? '⇧' : 'Shift');
+    parts.push(KEY_LABELS[parsed.key] ?? parsed.key.toUpperCase());
+    return parts.join(mac ? '' : '+');
+}
+/** The keyboard is a field's: an input, a textarea, a select, a contenteditable, an editor. */
+export function isTyping(event) {
+    const target = event.composedPath()[0];
+    if (!(target instanceof HTMLElement))
+        return false;
+    if (target instanceof HTMLInputElement ||
+        target instanceof HTMLTextAreaElement ||
+        target instanceof HTMLSelectElement) {
+        return true;
+    }
+    return target.isContentEditable || !!target.closest('.ProseMirror');
+}

package/dist/panel/util/populate.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Relations and resource links resolved at depth 1, the shape the API answers with.
+ * A resolved document is returned as is; a relation that cannot be fetched stays a reference.
+ */
+export declare function populate<T>(value: T): Promise<T>;
+export declare namespace populate {
+    var clear: () => void;
+}

package/dist/panel/util/populate.js

@@ -0,0 +1,49 @@
+import { API_PREFIX } from '../../core/routes/constants.js';
+import { isObjectLiteral } from '../../util/object.js';
+import { toKebabCase } from '../../util/string.js';
+const cache = new Map();
+/** One request per document for the page's life. */
+function fetchDoc(slug, id) {
+    const key = `${slug}/${id}`;
+    if (!cache.has(key)) {
+        const url = `${API_PREFIX}/${toKebabCase(slug)}/${id}?depth=1`;
+        cache.set(key, fetch(url)
+            .then((response) => response.json())
+            .then((response) => response?.doc ?? null)
+            .catch((error) => {
+            console.error(error);
+            return null;
+        }));
+    }
+    return cache.get(key);
+}
+const isLink = (value) => 'value' in value &&
+    'target' in value &&
+    'type' in value &&
+    !['url', 'email', 'tel', 'anchor'].includes(value.type);
+const isRelation = (value) => 'documentId' in value && 'relationTo' in value;
+/**
+ * Relations and resource links resolved at depth 1, the shape the API answers with.
+ * A resolved document is returned as is; a relation that cannot be fetched stays a reference.
+ */
+export async function populate(value) {
+    if (Array.isArray(value)) {
+        return Promise.all(value.map((item) => populate(item)));
+    }
+    if (!isObjectLiteral(value))
+        return value;
+    if (isLink(value)) {
+        if (!value.type || !value.value)
+            return value;
+        const doc = await fetchDoc(value.type, value.value);
+        return doc?.url ? { ...value, url: doc.url } : value;
+    }
+    if (isRelation(value)) {
+        if ('livePreview' in value)
+            return value.livePreview;
+        return ((await fetchDoc(value.relationTo, value.documentId)) ?? value);
+    }
+    const entries = await Promise.all(Object.entries(value).map(async ([key, item]) => [key, await populate(item)]));
+    return Object.fromEntries(entries);
+}
+populate.clear = () => cache.clear();

package/dist/panel/util/time.d.ts

@@ -0,0 +1,12 @@
+import { type Translate } from '../../core/i18n/index.js';
+/**
+ * How long ago a date was, short: relative within a week, the date after.
+ *
+ * ```ts
+ * formatWhen(twoHoursAgo, now, 'en') // '2 h ago'
+ * formatWhen(yesterday, now, 'en')   // 'Yesterday'
+ * formatWhen(lastMonth, now, 'en')   // 'Aug 12'
+ * formatWhen(lastYear, now, 'en')    // 'Aug 12, 2025'
+ * ```
+ */
+export declare function formatWhen(date: Date | string, now: Date, lang: string, t?: Translate): string;

package/dist/panel/util/time.js

@@ -0,0 +1,35 @@
+import { t__ } from '../../core/i18n/index.js';
+const MINUTE = 60;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+const WEEK = 7 * DAY;
+/**
+ * How long ago a date was, short: relative within a week, the date after.
+ *
+ * ```ts
+ * formatWhen(twoHoursAgo, now, 'en') // '2 h ago'
+ * formatWhen(yesterday, now, 'en')   // 'Yesterday'
+ * formatWhen(lastMonth, now, 'en')   // 'Aug 12'
+ * formatWhen(lastYear, now, 'en')    // 'Aug 12, 2025'
+ * ```
+ */
+export function formatWhen(date, now, lang, t = t__) {
+    const then = new Date(date);
+    const seconds = Math.max(0, (now.getTime() - then.getTime()) / 1000);
+    if (seconds < MINUTE)
+        return t('common.time_now');
+    if (seconds < HOUR)
+        return t('common.time_minutes_ago', String(Math.floor(seconds / MINUTE)));
+    if (seconds < DAY)
+        return t('common.time_hours_ago', String(Math.floor(seconds / HOUR)));
+    if (seconds < 2 * DAY)
+        return t('common.time_yesterday');
+    if (seconds < WEEK)
+        return t('common.time_days_ago', String(Math.floor(seconds / DAY)));
+    const sameYear = then.getFullYear() === now.getFullYear();
+    return new Intl.DateTimeFormat(lang, {
+        day: 'numeric',
+        month: 'short',
+        year: sameYear ? undefined : 'numeric'
+    }).format(then);
+}

package/dist/panel/util/upload-file.d.ts

@@ -0,0 +1,106 @@
+import type { UploadDoc } from '../../core/prototype/collection/upload/types.js';
+/** Where files go: the collection's API url, the folder, and the mime types it takes. */
+export type UploadTarget = {
+    url: string;
+    path?: string;
+    accept?: string[];
+};
+/** How a batch goes, after each file. */
+export type UploadProgress = {
+    total: number;
+    uploaded: number;
+    /** The names of the files that did not make it. */
+    failed: string[];
+    /** The name of the file on its way, `null` once the last one is done. */
+    current: string | null;
+};
+/**
+ * Whether the collection takes this file. No `accept` takes anything.
+ *
+ * ```ts
+ * isAccepted(photo, ['image/jpeg', 'image/png']) // true for a .jpg
+ * ```
+ */
+export declare const isAccepted: (file: Pick<File, "type">, accept?: string[]) => boolean;
+/**
+ * A mime type as people read it.
+ *
+ * ```ts
+ * typeLabel('image/jpeg')      // 'JPG'
+ * typeLabel('application/pdf') // 'PDF'
+ * ```
+ */
+export declare const typeLabel: (mimeType?: string) => string;
+/**
+ * A file size in bytes, from a count of bytes or a stored size.
+ *
+ * ```ts
+ * fileSizeBytes('3.20MB') // 3200000
+ * fileSizeBytes('0.84KB') // 840
+ * fileSizeBytes(840)      // 840
+ * fileSizeBytes('')       // null
+ * ```
+ */
+export declare const fileSizeBytes: (size?: string | number | null) => number | null;
+/**
+ * A file size as people read it: whole kilobytes, then one decimal from a megabyte up.
+ *
+ * ```ts
+ * fileSizeLabel('3.20MB')      // '3.2 MB'
+ * fileSizeLabel('840.12KB')    // '840 KB'
+ * fileSizeLabel(1_240_000_000) // '1.2 GB'
+ * fileSizeLabel(512)           // '512 B'
+ * ```
+ */
+export declare const fileSizeLabel: (size?: string | number | null) => string;
+/**
+ * A media's size and type, for the line under its name.
+ *
+ * ```ts
+ * mediaMeta({ filesize: '3.20MB', mimeType: 'image/jpeg' }) // '3.2 MB · JPG'
+ * ```
+ */
+export declare const mediaMeta: (doc: {
+    filesize?: string | number | null;
+    mimeType?: string | null;
+}) => string;
+export declare const MEDIA_KINDS: readonly ["image", "video", "audio", "document", "other"];
+export type MediaKind = (typeof MEDIA_KINDS)[number];
+/**
+ * The kind of file a mime type is, to filter medias by.
+ *
+ * ```ts
+ * mediaKind('image/webp')      // 'image'
+ * mediaKind('application/pdf') // 'document'
+ * mediaKind('application/zip') // 'other'
+ * ```
+ */
+export declare const mediaKind: (mimeType?: string | null) => MediaKind;
+/**
+ * The accepted types as a sentence.
+ *
+ * ```ts
+ * acceptLabel(['image/jpeg', 'image/png', 'image/webp'], 'or') // 'JPG, PNG or WEBP'
+ * ```
+ */
+export declare const acceptLabel: (accept: string[], or: string) => string;
+/**
+ * Creates one document of an upload collection from a file, and answers it.
+ * Validation is skipped, so a required field the file cannot fill, like an `alt`, never blocks it.
+ *
+ * ```ts
+ * const doc = await uploadFile(file, { url: '/api/medias', path: 'root:press' });
+ * ```
+ */
+export declare function uploadFile(file: File, target: UploadTarget): Promise<UploadDoc>;
+/**
+ * Uploads files one after the other. A file that fails is counted and skipped.
+ *
+ * ```ts
+ * const { docs, failed } = await uploadFiles(files, target, (progress) => (state = progress));
+ * ```
+ */
+export declare function uploadFiles(files: File[], target: UploadTarget, onProgress?: (progress: UploadProgress) => void): Promise<{
+    docs: UploadDoc[];
+    failed: string[];
+}>;