@abyss-project/commons-front-core 8.1.0 → 8.3.0

package/dist/{CookieConsentSettings.component-DMEAuCVS.js → CookieConsentSettings.component-DEGCDEJW.js}

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as a } from "react/jsx-runtime";
 import { useState as m, useEffect as C } from "react";
 import { Card as v, CardContent as b, Stack as u, Typography as o, FormControlLabel as l, Box as r, Checkbox as d, Button as M } from "@mui/material";
-import { g as R, u as x } from "./AbyssCookieConsentProvider-BhSzVu8P.js";
+import { g as R, u as x } from "./AbyssCookieConsentProvider-B-PlGbFf.js";
 const B = () => {
   const t = R(), { consent: i, save: y } = x(), [h, g] = m((i == null ? void 0 : i.analytics) ?? !1), [k, f] = m((i == null ? void 0 : i.marketing) ?? !1), c = i == null ? void 0 : i.analytics, n = i == null ? void 0 : i.marketing;
   return C(() => {

package/dist/components/business/CloudImport/CloudImport.d.ts

@@ -0,0 +1,24 @@
+import { IFile, ISpace } from '@abyss-project/cloud';
+import { CloudPicker } from '../../../hooks/cloud-picker.types';
+export interface CloudImportProps {
+    /** Picker state and actions, as returned by `useCloudPicker`. */
+    cloudPicker: CloudPicker;
+    /** Receives the Space the files were picked from, and the picked files. */
+    onImport(space: ISpace, files: IFile[]): void;
+    /** Several files can be picked; one otherwise. */
+    multiple?: boolean;
+    /** Files larger than this, in bytes, are not listed. */
+    maxSize?: number;
+    /**
+     * The files offered, as the HTML `accept` attribute lists them: MIME types (`application/pdf`),
+     * wildcards (`image/*`) and extensions (`.pdf`). Absent or empty: every file.
+     */
+    accept?: string[];
+}
+/**
+ * The AbyssCloud picker: the user picks a Space (personal, one group per organization, shared
+ * with them), opens its folders and picks files, then imports them. Mounting it provisions the
+ * Spaces (`cloudPicker.refresh`); a failed provisioning with nothing listed offers one « Créer mon
+ * cloud » retry. Files larger than `maxSize` or of a type `accept` refuses are not listed.
+ */
+export declare function CloudImport({ cloudPicker, onImport, multiple, maxSize, accept, }: CloudImportProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/business/CloudImport/cloud-import-tree.d.ts

@@ -0,0 +1,22 @@
+import { IFile, IFolder } from '@abyss-project/cloud';
+/** What decides whether a cloud file is offered, and how picked files are tracked. */
+export interface CloudTreeContext {
+    multiple: boolean;
+    maxSize?: number;
+    accept?: string[];
+    selectedIds: ReadonlySet<string>;
+    getFileThumbnailUrl(fileId: string): string;
+    /** Adds the files to the selection (replaces it when not `multiple`). */
+    select(files: IFile[]): void;
+    unselect(files: IFile[]): void;
+}
+/** The key of a file in the selection. */
+export declare const fileKey: (file: IFile) => string;
+/** Whether a file is listed: within the size limit and of an accepted type. */
+export declare const isOffered: (file: IFile, maxSize: number | undefined, accept: string[] | undefined) => boolean;
+/** The list of a folder level: sub-folders first, then the files the picker offers. */
+export declare function CloudTreeLevel({ folders, files, context, }: {
+    folders: IFolder[];
+    files: IFile[];
+    context: CloudTreeContext;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/business/ImportFromCloudModal/ImportFromCloudModal.d.ts

@@ -0,0 +1,21 @@
+import { IFile, ISpace } from '@abyss-project/cloud';
+import { CloudPicker } from '../../../hooks/cloud-picker.types';
+export interface ImportFromCloudModalProps {
+    open: boolean;
+    onClose(): void;
+    /** Receives the Space the files were picked from, and the files; the modal then closes. */
+    onImport(space: ISpace, files: IFile[]): void | Promise<void>;
+    /** Picker state and actions, as returned by `useCloudPicker`. */
+    cloudPicker: CloudPicker;
+    multiple?: boolean;
+    /** Files larger than this, in bytes, are not listed. */
+    maxSize?: number;
+    /** The files offered, as the HTML `accept` attribute lists them. Absent or empty: every file. */
+    accept?: string[];
+}
+/**
+ * The AbyssCloud picker (`CloudImport`) in a `Modal`: a bottom sheet below 768 px. Importing hands
+ * the files to `onImport` and closes the modal; the host runs the import and reports its outcome.
+ * The picker mounts on opening, which is what provisions the user's Spaces.
+ */
+export declare function ImportFromCloudModal({ open, onClose, onImport, cloudPicker, multiple, maxSize, accept, }: ImportFromCloudModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/business/QRCodeModal/QRCodeModal.d.ts

@@ -0,0 +1,18 @@
+export interface QRCodeModalProps {
+    open: boolean;
+    onClose(): void;
+    /** The link the QR code encodes. */
+    url: string;
+    /** Hides the « Partager » button. */
+    maskShareButton?: boolean;
+    /** Hides the link and its copy button. */
+    maskCopyButton?: boolean;
+}
+/** Side of the QR code image, in px: large enough for a phone camera across a desk. */
+export declare const QR_CODE_SIZE = 200;
+/**
+ * A link as a QR code, in a `Modal` (a bottom sheet below 768 px): the code on a light page, the
+ * link with its copy button (`CopyField`), and « Partager », which opens the device's share sheet
+ * or, without one, copies the link.
+ */
+export declare function QRCodeModal({ open, onClose, url, maskShareButton, maskCopyButton, }: QRCodeModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/business/QRCodeModal/QRCodeModal.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/business/index.d.ts

@@ -1 +1,4 @@
 export * from './InfectedDownloadModal/InfectedDownloadModal';
+export * from './CloudImport/CloudImport';
+export * from './ImportFromCloudModal/ImportFromCloudModal';
+export * from './QRCodeModal/QRCodeModal';

package/dist/components/data/DataTable/data-table.types.d.ts

@@ -29,6 +29,16 @@ export interface DataColumn<T> {
     mono?: boolean;
     /** `Default` when absent; an `Optional` column is hidden from 768 to 1199 px. */
     priority?: ColumnPriority;
+    /**
+     * The cells run over several lines instead of being cut by an ellipsis (words stay whole): for a
+     * label whose whole text matters. The other columns keep their single line.
+     */
+    wrap?: boolean;
+    /**
+     * The header is read by assistive technologies but not drawn: a narrow column of icon actions
+     * whose label would only show cut.
+     */
+    hideHeader?: boolean;
 }
 export interface DataTableSelection {
     selected: string[];

package/dist/components/data/UsageMeter/UsageMeter.d.ts

@@ -0,0 +1,31 @@
+/** Shares of `max` (0.8 = 80 %) from which the meter turns to the warning, then danger color. */
+export interface UsageMeterThresholds {
+    warning: number;
+    danger: number;
+}
+export interface UsageMeterProps {
+    /** The consumption, in the unit of `max`. */
+    value: number;
+    /** The ceiling. Without it, only the value is shown, no gauge. */
+    max?: number;
+    thresholds?: UsageMeterThresholds;
+    label: string;
+    /** Formats `value` and `max` for display (`intl.formatNumber`, bytes, credits). */
+    formatValue(value: number): string;
+}
+/** How full the meter is, against its thresholds. */
+export declare enum UsageLevel {
+    Normal = "normal",
+    Warning = "warning",
+    Danger = "danger"
+}
+/** The level of a consumption share, against the thresholds (none: always normal). */
+export declare const usageLevel: (share: number, thresholds?: UsageMeterThresholds) => UsageLevel;
+/**
+ * A consumption against its ceiling (storage, credits, quota): the label, the value and the
+ * ceiling in mono, and a gauge filled with the accent, then the warning and danger colors once
+ * the share reaches `thresholds`. The gauge is a `meter` named by the label, its value text the
+ * formatted "value of max"; a consumption above the ceiling fills it whole. Without `max`, the
+ * value alone.
+ */
+export declare function UsageMeter({ value, max, thresholds, label, formatValue, }: UsageMeterProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/data/UsageMeter/UsageMeter.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/data/index.d.ts

@@ -3,3 +3,4 @@ export * from './KeyValueList/KeyValueList';
 export * from './StatTile/StatTile';
 export * from './Sparkline/Sparkline';
 export * from './chart-theme';
+export * from './UsageMeter/UsageMeter';

package/dist/components/inputs/ContextSelector/ContextSelector.d.ts

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+/** The three scopes a context can take. */
+export declare enum ContextKind {
+    Personal = "personal",
+    Organization = "organization",
+    Project = "project"
+}
+/** The selected context: the personal space, a whole organization, or one of its projects. */
+export type ContextValue = {
+    kind: ContextKind.Personal;
+} | {
+    kind: ContextKind.Organization;
+    organizationId: string;
+} | {
+    kind: ContextKind.Project;
+    organizationId: string;
+    projectId: string;
+};
+/** A project of an organization. */
+export interface ContextSelectorProject {
+    id: string;
+    name: string;
+    /** A `ProjectAvatar`, for instance; a folder icon without it. */
+    avatar?: ReactNode;
+}
+/** An organization the user belongs to, with its projects. */
+export interface ContextSelectorOrganization {
+    id: string;
+    name: string;
+    /** An `OrganizationAvatar`, for instance; a building icon without it. */
+    avatar?: ReactNode;
+    projects?: ContextSelectorProject[];
+}
+/** The personal space. */
+export interface ContextSelectorPersonal {
+    /** The user's alias, for instance; « Mon espace » without it. */
+    label?: string;
+    /** A `UserAvatar`, for instance; a person icon without it. */
+    avatar?: ReactNode;
+}
+export interface ContextSelectorData {
+    personal: ContextSelectorPersonal;
+    organizations: ContextSelectorOrganization[];
+}
+export interface ContextSelectorProps {
+    data: ContextSelectorData;
+    value: ContextValue;
+    onChange(next: ContextValue): void;
+    /** Label above the field, its accessible name. */
+    label: string;
+    disabled?: boolean;
+}
+/**
+ * The scope picker of a page: the personal space first, then one group per organization (headed
+ * by its name) holding an entry for the whole organization and one per project. The field shows
+ * the avatar of the selected context; typing filters the entries. Avatars are passed by the host
+ * (they need its storage URLs) and are hidden from assistive technology: the label names each
+ * entry.
+ */
+export declare function ContextSelector({ data, value, onChange, label, disabled, }: ContextSelectorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/ContextSelector/ContextSelector.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/CopyField/CopyField.d.ts

@@ -0,0 +1,19 @@
+export interface CopyFieldProps {
+    value: string;
+    /** Hides the value behind dots until the user reveals it; the copy button still copies it. */
+    masked?: boolean;
+    /** Called each time the user reveals a masked value. */
+    onReveal?(): void;
+    /** Label of the copy button, named after what it copies ("Copier la clé"). */
+    copyLabel: string;
+}
+/** How long the copy button shows its check mark after a copy, in ms. */
+export declare const COPY_FEEDBACK_MS = 2000;
+/**
+ * A value to copy (API key, connection identifier): shown in mono in a read-only box, with a
+ * button that copies it to the clipboard. Masked, the value is replaced by dots and a toggle
+ * reveals it (calling `onReveal`). The outcome of a copy is announced in a polite live region; a
+ * success turns the copy icon into a check mark for a moment, a failure is also written under the
+ * field.
+ */
+export declare function CopyField({ value, masked, onReveal, copyLabel, }: CopyFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/CopyField/CopyField.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/DropZone/DropZone.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { Accept } from 'react-dropzone';
+import { CloudImportWiring } from '../../../hooks/cloud-picker.types';
+export interface DropZoneProps {
+    /** The files dropped or picked from the device, once the size and type checks passed. */
+    onDrop(files: File[]): void;
+    /** Several files at once. Defaults to `true`. */
+    multiple?: boolean;
+    /** Accepted types, as `react-dropzone` reads them: `{ 'image/*': ['.png', '.jpg'] }`. */
+    accept?: Accept;
+    /** Largest accepted file, in bytes; shown under the zone. */
+    maxSize?: number;
+    /** Title above the zone, which names it. */
+    title?: string;
+    /**
+     * AbyssCloud picker (from `useCloudPicker`) plus the import action, which receives the Space
+     * the files were picked from. The AbyssCloud entry exists only when this is passed.
+     */
+    cloudImport?: CloudImportWiring;
+    /** Replaces the icon and the prompt inside the zone (a preview of the current file, say). */
+    children?: ReactNode;
+}
+/**
+ * A zone to drop files on, with a button that opens the device's file picker and, when
+ * `cloudImport` is wired, an « Importer depuis AbyssCloud » entry. Files larger than `maxSize` and
+ * types `accept` refuses are left out, and the reason is written under the zone (`role="alert"`);
+ * a single file that is too large is not handed over at all. Cloud files arrive through
+ * `cloudImport.onImport`, never through `onDrop`.
+ */
+export declare function DropZone({ onDrop, multiple, accept, maxSize, title, cloudImport, children, }: DropZoneProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/DropZone/DropZone.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/FormField/FormField.d.ts

@@ -0,0 +1,29 @@
+import { ReactElement, ReactNode } from 'react';
+export interface FormFieldProps {
+    label: string;
+    /** A hint under the field, always shown. */
+    help?: ReactNode;
+    /** The error message: the field turns to the danger color and is marked invalid. */
+    error?: ReactNode;
+    required?: boolean;
+    /**
+     * One MUI control of the input family, without a label of its own: `OutlinedInput`,
+     * `InputBase`, or `Select`.
+     */
+    children: ReactElement<FieldControlProps>;
+}
+/** What the field gives its control so that the label, the hint and the error reach it. */
+interface FieldControlProps {
+    id?: string;
+    'aria-describedby'?: string;
+    labelId?: string;
+}
+/**
+ * A labelled form field (mock-up `.field`): the label above the control, a hint and an error
+ * under it. The control gets the `id` the label points to (its own `id` when it has one) and an
+ * `aria-describedby` listing the hint and the error; a `Select` also gets the `labelId` that
+ * names its listbox button. The error and `required` state reach the control through the MUI form
+ * control: red border, `aria-invalid`, the `required` attribute and the asterisk of the label.
+ */
+export declare function FormField({ label, help, error, required, children, }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/FormField/FormField.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/ImportButton/ImportButton.d.ts

@@ -0,0 +1,33 @@
+import { ChangeEvent, MouseEvent, ReactElement } from 'react';
+import { CloudImportWiring } from '../../../hooks/cloud-picker.types';
+/** What the trigger receives: it opens the menu of sources. */
+interface TriggerProps {
+    onClick?(event: MouseEvent<HTMLElement>): void;
+    'aria-haspopup'?: 'menu';
+    'aria-expanded'?: boolean;
+}
+export interface ImportButtonProps {
+    /** The trigger, a button: it opens the menu of sources. */
+    children: ReactElement<TriggerProps>;
+    /** An import is running: the entries are disabled. */
+    isLoading: boolean;
+    /** « Mon ordinateur »: receives the change event of the file input. */
+    handleFileUpload(event: ChangeEvent<HTMLInputElement>): Promise<void>;
+    /** « Lien URL »: the entry exists only when this is passed. */
+    handleUploadFromUrl?(url: string): Promise<void>;
+    multiple?: boolean;
+    /** Largest file the AbyssCloud picker lists, in bytes. */
+    maxSize?: number;
+    /** Accepted types, as the HTML `accept` attribute lists them. */
+    accept?: string[];
+    /** AbyssCloud picker plus the import action: the « AbyssCloud » entry exists only when passed. */
+    cloudImport?: CloudImportWiring;
+}
+/**
+ * Wraps a trigger and opens a menu of upload sources: the device's files, a link (with
+ * `handleUploadFromUrl`) and AbyssCloud (with `cloudImport`). The link opens a small modal whose
+ * address is checked before it can be confirmed; it closes once the import succeeded and says so
+ * when it failed. AbyssCloud opens `ImportFromCloudModal`.
+ */
+export declare function ImportButton({ children, isLoading, handleFileUpload, handleUploadFromUrl, multiple, maxSize, accept, cloudImport, }: ImportButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/ImportButton/ImportButton.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/NumberField/NumberField.d.ts

@@ -0,0 +1,21 @@
+export interface NumberFieldProps {
+    label: string;
+    /** The number shown; `null` for an empty field. */
+    value: number | null;
+    /** Called with each number typed, `null` once emptied, and the clamped, rounded number on leave. */
+    onChange(value: number | null): void;
+    /** Digits kept after the decimal mark: 0 for a quantity (default), 2 for an amount. */
+    decimals?: number;
+    /** Lowest number kept when the field is left; 0 by default. */
+    min?: number;
+    disabled?: boolean;
+    /** Unit or currency shown at the end of the field (`€`, `Go`). */
+    adornment?: string;
+}
+/**
+ * A labelled number input that follows the language of the viewer: « 1 234,50 » in French,
+ * « 1,234.50 » in English. While focused it shows what is typed (either decimal mark is read);
+ * on leaving it clamps to `min`, rounds to `decimals` and formats again. A value changed from
+ * outside (a linked field) is shown at once unless the field is being edited.
+ */
+export declare function NumberField({ label, value, onChange, decimals, min, disabled, adornment, }: NumberFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/NumberField/NumberField.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/NumberField/number-input.d.ts

@@ -0,0 +1,13 @@
+/** The grouping and decimal separators of a locale. */
+export interface LocaleSeparators {
+    group: string;
+    decimal: string;
+}
+/** The grouping and decimal separators of a locale, read from `Intl` (never hardcoded). */
+export declare const getLocaleSeparators: (locale: string) => LocaleSeparators;
+/**
+ * Reads a typed number: the grouping separators of the locale (and the usual whitespace) are
+ * dropped, then « , » or « . » is the decimal mark, so « 50,5 » and « 50.5 » give the same number.
+ * Empty or non-numeric text gives `null`.
+ */
+export declare const parseNumberInput: (raw: string, separators: LocaleSeparators) => number | null;

package/dist/components/inputs/SettingsRow/SettingsRow.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+export interface SettingsRowProps {
+    label: string;
+    description?: ReactNode;
+    /** The control of the setting: a switch, a select, a button. */
+    control: ReactNode;
+    /** `id` of the form element inside `control`: the label then labels it (`<label for>`). */
+    htmlFor?: string;
+}
+/**
+ * One setting of a settings list: its label and description on the left, its
+ * control on the right, rows split by a 1 px rule. Below 768 px the control goes under the text.
+ * The row is a `group` named by the label and described by the description; with `htmlFor` the
+ * label also labels the form element of the control.
+ */
+export declare function SettingsRow({ label, description, control, htmlFor, }: SettingsRowProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/SettingsRow/SettingsRow.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/index.d.ts

@@ -3,3 +3,10 @@ export * from './DateField/DateField';
 export * from './DateRangeField/DateRangeField';
 export * from './ColorField/ColorField';
 export * from './SegmentedControl/SegmentedControl';
+export * from './FormField/FormField';
+export * from './NumberField/NumberField';
+export * from './SettingsRow/SettingsRow';
+export * from './CopyField/CopyField';
+export * from './ContextSelector/ContextSelector';
+export * from './DropZone/DropZone';
+export * from './ImportButton/ImportButton';

package/dist/components/layers/CommandPalette/CommandPalette.d.ts

@@ -1,28 +1,49 @@
 import { ReactNode } from 'react';
-import { Command } from './command-registry';
-export type { Command } from './command-registry';
+import { Command, CommandSource } from './command-registry';
+export type { Command, CommandSource } from './command-registry';
+/** Delay between the last keystroke and the call of the command sources. */
+export declare const COMMAND_SOURCE_DEBOUNCE_MS = 200;
+export interface CommandPaletteOpenOptions {
+    /** Lists only the commands of this group; the filter shows as a chip the user can remove. */
+    group?: string;
+}
 export interface CommandPaletteApi {
-    /** Opens the palette, as `Ctrl+K` / `Cmd+K` does. */
-    open(): void;
+    /** Whether the palette is open: a host fetches the lists it registers only while it is. */
+    isOpen: boolean;
+    /** Opens the palette, as `Ctrl+K` / `Cmd+K` does, filtered on `options.group` when given. */
+    open(options?: CommandPaletteOpenOptions): void;
     /**
      * Runs the registered command `id` (closing the palette first if it is open) and returns `true`;
      * returns `false` when no mounted component registers that command.
      */
     execute(id: string): boolean;
 }
+export interface CommandPaletteRecents {
+    /** `localStorage` key the identifiers of the last executed commands are kept under. */
+    storageKey: string;
+    /** Number of recent commands kept and listed; 5 by default. */
+    max?: number;
+}
 export interface CommandPaletteProviderProps {
     children: ReactNode;
+    /** Lists the last executed commands first, under « Récents », while the search is empty. */
+    recents?: CommandPaletteRecents;
 }
 /**
  * Holds the commands the mounted screens register and the palette that lists them. `Ctrl+K` /
  * `Cmd+K` opens it anywhere in the page; `useCommandPalette().execute(id)` runs a command by its
  * identifier, for the voice and MCP clients.
  */
-export declare function CommandPaletteProvider({ children, }: CommandPaletteProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function CommandPaletteProvider({ children, recents, }: CommandPaletteProviderProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Registers `commands` while the calling component is mounted. Pass a memoized array: a new array
  * replaces the previous one at each render.
  */
 export declare const useRegisterCommands: (commands: Command[]) => void;
-/** Opens the palette and runs commands by identifier. */
+/**
+ * Registers `source` while the calling component is mounted. Memoize `search`: a new function is a
+ * new source, which drops its answers and searches again.
+ */
+export declare const useRegisterCommandSource: (source: CommandSource) => void;
+/** Opens the palette, tells whether it is open and runs commands by identifier. */
 export declare const useCommandPalette: () => CommandPaletteApi;

package/dist/components/layers/CommandPalette/command-registry.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 /** An action of the application, reachable from the palette and by its identifier. */
 export interface Command {
     /** Stable identifier: the address the voice and MCP clients use to run the action. */
@@ -5,6 +6,10 @@ export interface Command {
     label: string;
     /** Heading the command is listed under in the palette. */
     group: string;
+    /** Context shown muted under the label, on one line; searched like the label. */
+    subtitle?: string;
+    /** Decorative mark shown before the label. */
+    icon?: ReactNode;
     /** Extra words the search matches, such as synonyms. */
     keywords?: string[];
     /** Shortcut hint shown next to the command; the palette binds no key for it. */
@@ -12,19 +17,36 @@ export interface Command {
     run(): void;
 }
 /**
- * The commands every mounted `useRegisterCommands` call contributes, as an external store. A
- * registration is replaced in place when its commands change, so the listing order stays the
- * mount order; when two registrations share an identifier, the most recent command wins.
+ * Commands found by a search the palette cannot run itself, such as a server-side search. The
+ * palette calls `search` while it is open, once the query is long enough, and lists the results
+ * under `group`.
  */
-export declare class CommandRegistry {
+export interface CommandSource {
+    /** Stable identifier of the source. */
+    id: string;
+    /** Heading the results are listed under; a group filter matches it. */
+    group: string;
+    /** Resolves the commands matching `query`; `signal` aborts when the query changes or the palette closes. */
+    search(query: string, signal: AbortSignal): Promise<Command[]>;
+    /** Number of characters of the trimmed query below which the source is not called; 1 by default. */
+    minQueryLength?: number;
+}
+/**
+ * The items every mounted registration contributes, as an external store. A registration is
+ * replaced in place when its items change, so the listing order stays the mount order; when two
+ * registrations share an identifier, the most recent item wins.
+ */
+export declare class KeyedRegistry<Item extends {
+    id: string;
+}> {
     private readonly registrations;
     private readonly listeners;
     private snapshot;
-    register(key: symbol, commands: Command[]): void;
+    register(key: symbol, items: Item[]): void;
     unregister(key: symbol): void;
-    find(id: string): Command | undefined;
+    find(id: string): Item | undefined;
     readonly subscribe: (listener: () => void) => (() => void);
-    readonly getSnapshot: () => Command[];
+    readonly getSnapshot: () => Item[];
     private refresh;
 }
 export interface CommandGroup {
@@ -32,7 +54,15 @@ export interface CommandGroup {
     commands: Command[];
 }
 /**
- * The commands whose label, group or keywords contain every word of `query` (case and accents
- * ignored), grouped in the order their group first appears.
+ * The commands whose label, subtitle, group or keywords contain every word of `query` (case and
+ * accents ignored), grouped in the order their group first appears.
  */
 export declare const searchCommands: (commands: Command[], query: string) => CommandGroup[];
+/** Number of recent commands kept when the host sets no maximum. */
+export declare const DEFAULT_RECENTS_MAX = 5;
+/** The identifiers stored under `storageKey`, most recent first; none when storage is unreadable. */
+export declare const readRecents: (storageKey: string) => string[];
+/** Stores `ids` under `storageKey`; when storage refuses, the recents live for the page only. */
+export declare const writeRecents: (storageKey: string, ids: string[]) => void;
+/** `ids` with `id` moved to the front, at most `max` long. */
+export declare const pushRecent: (ids: string[], id: string, max: number) => string[];

package/dist/components/layers/Menu/Menu.d.ts

@@ -10,6 +10,8 @@ export declare enum MenuSeparator {
 export interface MenuItem {
     id: string;
     label: string;
+    /** Secondary line under the label; it describes the item (`aria-describedby`) without renaming it. */
+    description?: string;
     icon?: ReactNode;
     /** Shortcut hint shown at the end of the row, such as `⌘D`; the host binds the key itself. */
     shortcut?: string;

package/dist/components/layers/Modal/Modal.d.ts

@@ -18,6 +18,7 @@ export interface ModalProps {
 /**
  * A modal dialog (`.modal`): header with title, description and close button, scrolling body,
  * footer of actions. Focus is trapped inside and returns to the opener on close; Escape and the
- * scrim close it. Below the `md` breakpoint it is presented as a `BottomSheet`.
+ * scrim close it. Below 768 px (the design system's tablet tier, whatever the theme) it is presented
+ * as a `BottomSheet`.
  */
 export declare function Modal({ open, onClose, title, description, size, actions, children, }: ModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/meaning/Avatar/Avatar.d.ts

@@ -0,0 +1,41 @@
+/** Side of an avatar when the host gives none, in px. */
+export declare const AVATAR_DEFAULT_SIZE = 32;
+export interface UserAvatarProps {
+    userId: string;
+    /** The user's alias: accessible name, and its initial while there is no picture. */
+    alias: string;
+    /** Whether the user has uploaded a picture; without one, no request is made. */
+    hasThumbnail: boolean;
+    /** Changes when the picture does (a timestamp after an upload): appended to the URL. */
+    cache?: string;
+    /** Side in px. Defaults to `AVATAR_DEFAULT_SIZE`. */
+    size?: number;
+    /** URL of a user's picture, from the host's storage helpers. */
+    getProfilePictureUrl(userId: string): string;
+}
+/** A person: their picture in a disc, or the initial of their alias. */
+export declare function UserAvatar({ userId, alias, hasThumbnail, cache, size, getProfilePictureUrl, }: UserAvatarProps): import("react/jsx-runtime").JSX.Element;
+export interface OrganizationAvatarProps {
+    orgId: string;
+    /** The organization's name: accessible name, and its initial while there is no logo. */
+    name: string;
+    hasThumbnail: boolean;
+    cache?: string;
+    size?: number;
+    /** URL of an organization's logo, from the host's storage helpers. */
+    getLogoUrl(orgId: string): string;
+}
+/** An organization: its logo in a rounded square, or the initial of its name. */
+export declare function OrganizationAvatar({ orgId, name, hasThumbnail, cache, size, getLogoUrl, }: OrganizationAvatarProps): import("react/jsx-runtime").JSX.Element;
+export interface ProjectAvatarProps {
+    projectId: string;
+    /** The project's title: accessible name, and its initial while there is no picture. */
+    title: string;
+    hasThumbnail: boolean;
+    cache?: string;
+    size?: number;
+    /** URL of a project's picture, from the host's storage helpers. */
+    getProjectPictureUrl(projectId: string): string;
+}
+/** A project: its picture in a rounded square, or the initial of its title. */
+export declare function ProjectAvatar({ projectId, title, hasThumbnail, cache, size, getProjectPictureUrl, }: ProjectAvatarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/meaning/Avatar/Avatar.spec.d.ts

@@ -0,0 +1 @@
+export {};