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

package/dist/{CookieConsentSettings.component-DMEAuCVS.js → CookieConsentSettings.component-BKsYgpMa.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-TE46ywnd.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/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/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/states/PageState/PageState.d.ts

@@ -17,12 +17,17 @@ export interface PageStateError {
     message?: string;
     onRetry(): void;
 }
+export interface PageStateForbidden {
+    /** Replaces the generic description (who to ask); the title stays « Accès refusé ». */
+    message: string;
+}
 export interface PageStateProps {
     status: PageStatus;
     /** Placeholder built by the page from the same layout as the ready content. */
     skeleton: ReactNode;
     empty?: PageStateEmpty;
     error?: PageStateError;
+    forbidden?: PageStateForbidden;
     /** The ready content. */
     children: ReactNode;
 }
@@ -30,4 +35,4 @@ export interface PageStateProps {
  * The content slot of a page in each of its states. The page frame (header, toolbar) stays around
  * it: only the slot changes, so an empty or failed page keeps its header and actions.
  */
-export declare function PageState({ status, skeleton, empty, error, children, }: PageStateProps): import("react/jsx-runtime").JSX.Element | undefined;
+export declare function PageState({ status, skeleton, empty, error, forbidden, children, }: PageStateProps): import("react/jsx-runtime").JSX.Element | undefined;

package/dist/components/structure/AccountMenu/AccountMenu.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { ThemeMode } from '../../../theme/tokens/primitives';
+export interface AccountMenuUser {
+    name: string;
+    email?: string;
+    avatarUrl?: string;
+}
+export interface AccountMenuItem {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    /** A route followed by the host router, or an absolute URL. */
+    href?: string;
+    onClick?(): void;
+}
+export interface AccountMenuProps {
+    user: AccountMenuUser;
+    themeMode: ThemeMode;
+    onThemeModeChange(mode: ThemeMode): void;
+    items: AccountMenuItem[];
+    onLogout(): void;
+}
+/**
+ * The account entry of the top bar: the viewer's avatar opens a menu with their name and email,
+ * the host's entries (account, settings, billing…), the dark theme switch and the logout.
+ */
+export declare function AccountMenu({ user, themeMode, onThemeModeChange, items, onLogout, }: AccountMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/structure/AccountMenu/AccountMenu.spec.d.ts

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

package/dist/components/structure/AppShell/AppShell.d.ts

@@ -5,7 +5,13 @@ import { AppShellProps } from './app-shell.types';
  * navigation sections with their counts, an optional footer, a top bar and the page. There is no
  * application switcher: each service keeps its own front.
  *
- * From `lg` up the sidebar is 256 px wide; from `md` to `lg` it becomes an icon rail with
- * tooltips; below `md` a top bar opens it in a drawer.
+ * From 1200 px up the sidebar is 256 px wide; from 768 to 1199 px it becomes an icon rail with
+ * tooltips; below 768 px a top bar opens it in a drawer. The widths are the design system's tiers,
+ * never the theme's MUI breakpoints: the legacy theme's `md` is 900 px.
+ *
+ * With `chromeless` there is no sidebar, rail, drawer or top bar: the page fills the window.
+ *
+ * Every form renders `children` at the same place of one tree (root, column, `main`): switching
+ * form or `chromeless` never remounts the page.
  */
-export declare function AppShell({ product, space, nav, activeItemId, mainSpaceLink, topbar, footer, children, }: AppShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppShell({ product, space, nav, activeItemId, mainSpaceLink, topbar, footer, chromeless, children, }: AppShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/structure/AppShell/ShellNavigation.d.ts

@@ -19,9 +19,11 @@ export declare function ShellNavigation({ nav, activeItemId, form, onNavigate, }
 }): import("react/jsx-runtime").JSX.Element;
 /**
  * The footer entries of the navigation (plan, family, account): labelled rows, or an icon with a
- * tooltip in the rail, like the navigation entries. They lead out of the app: plain links.
+ * tooltip in the rail, like the navigation entries. They lead to the main front as plain links,
+ * unless `internal`: a route of this app, followed by the host router.
  */
-export declare function ShellFooterLinks({ items, form, }: {
+export declare function ShellFooterLinks({ items, form, onNavigate, }: {
     items: AppShellFooterItem[];
     form: NavigationForm;
+    onNavigate?(): void;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/structure/AppShell/app-shell.types.d.ts

@@ -10,20 +10,46 @@ export interface Space {
     kind: SpaceKind;
     avatarUrl?: string;
 }
+/**
+ * A secondary action on a navigation row, such as "new board" next to "Boards", or on a section,
+ * such as "manage pins" next to "Épinglés".
+ */
+export interface NavItemAction {
+    /** Accessible name of the icon button. */
+    label: string;
+    icon: ReactNode;
+    onClick(): void;
+}
 export interface NavItem {
     id: string;
     label: string;
     icon: ReactNode;
-    /** Route inside the app, followed by the host router. */
+    /**
+     * Route inside the app, followed by the host router; with `external`, an absolute URL opened in
+     * a new tab.
+     */
     href: string;
     count?: number;
     /** The count needs action: shown as a red pill (a red dot in the rail). */
     urgent?: boolean;
+    /** A plain link opened in a new tab, its accessible name saying so. */
+    external?: boolean;
+    /**
+     * An icon button at the end of the row: shown on hover or focus in the sidebar, always in the
+     * drawer, absent from the rail.
+     */
+    action?: NavItemAction;
 }
 export interface NavSection {
     id: string;
     title?: string;
+    /** May be empty when the section carries an `action`: the section then shows only its action. */
     items: NavItem[];
+    /**
+     * An icon button at the right of the section title in the sidebar and the drawer; in the rail,
+     * where titles are hidden, a single icon button with a tooltip at the head of the section.
+     */
+    action?: NavItemAction;
 }
 export interface AppShellProduct {
     kind: ToolKind;
@@ -47,8 +73,13 @@ export interface AppShellFooterItem {
     label: string;
     /** Icon or avatar, sized by the shell; alone in the rail, with `label` as its tooltip. */
     icon: ReactNode;
-    /** Absolute URL: the footer entries lead to the main front, so they are plain links. */
+    /**
+     * Absolute URL of the main front, followed as a plain link; with `internal`, a route inside the
+     * app, followed by the host router like `NavItem.href`.
+     */
     href: string;
+    /** The entry is a route of this app (the main front's own account pages). */
+    internal?: boolean;
 }
 export interface AppShellProps {
     product: AppShellProduct;
@@ -60,6 +91,11 @@ export interface AppShellProps {
     topbar?: ReactNode;
     /** Bottom of the navigation (plan, family, account), under a hairline. */
     footer?: AppShellFooterItem[];
+    /**
+     * Full-screen mode (editors): no sidebar, rail, drawer or top bar, the page fills the window.
+     * An open mobile drawer closes.
+     */
+    chromeless?: boolean;
     children: ReactNode;
 }
 /** The three forms of the shell: full sidebar (≥ `lg`), icon rail (`md`–`lg`), drawer (< `md`). */

package/dist/components/structure/NotificationsMenu/NotificationsMenu.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+export interface NotificationItem {
+    id: string;
+    title: string;
+    body?: string;
+    createdAt: string | Date;
+    read: boolean;
+    /** Icon or avatar, sized by the menu (24 px). */
+    icon?: ReactNode;
+    /** Where the notification leads: a route followed by the host router, or an absolute URL. */
+    href?: string;
+}
+export interface NotificationsMenuProps {
+    items: NotificationItem[];
+    unreadCount: number;
+    loading: boolean;
+    /** Called each time the panel opens, for the host to refresh the list. */
+    onOpen?(): void;
+    /** Called when a notification is chosen; the host marks it read. */
+    onItemClick(id: string): void;
+    onMarkAllRead(): void;
+    /** State of the sound toggle, shown when `onToggleSound` is given. */
+    soundEnabled?: boolean;
+    onToggleSound?(): void;
+    /** Route of the notification preferences page: a settings link in the panel header. */
+    preferencesHref?: string;
+    /** Buttons at the end of a notification row (accept an invitation, dismiss…). */
+    renderItemActions?(item: NotificationItem): ReactNode;
+}
+/**
+ * The notifications of the top bar: a bell with the unread count, which opens a panel (a popover
+ * from `md` up, a bottom sheet below) listing the notifications, with "mark all read", the sound
+ * toggle and the preferences link. The host owns the data: it loads the list in `onOpen`, marks a
+ * notification read in `onItemClick` and all of them in `onMarkAllRead`.
+ */
+export declare function NotificationsMenu({ items, unreadCount, loading, onOpen, onItemClick, onMarkAllRead, soundEnabled, onToggleSound, preferencesHref, renderItemActions, }: NotificationsMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/structure/NotificationsMenu/NotificationsMenu.spec.d.ts

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

package/dist/components/structure/PageHeader/PageHeader.d.ts

@@ -14,7 +14,7 @@ export interface PageHeaderProps {
 }
 /**
  * The header of a page (mock-up `.ph`): breadcrumbs, optional icon, the page title (`h1`, the one
- * title size of the ecosystem), a subtitle line and the page actions. Below `md` the actions go
- * under the title.
+ * title size of the ecosystem), a subtitle line and the page actions. The actions go under the
+ * title below `md`, and from `md` up whenever they do not fit beside it.
  */
 export declare function PageHeader({ title, subtitle, breadcrumbs, icon, actions, }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,7 @@
 export * from './AppShell/AppShell';
 export * from './AppShell/app-shell.types';
+export * from './NotificationsMenu/NotificationsMenu';
+export * from './AccountMenu/AccountMenu';
 export * from './PageHeader/PageHeader';
 export * from './Section/Section';
 export * from './Surface/Surface';

package/dist/components/structure/test-support/structure-test-harness.d.ts

@@ -51,3 +51,9 @@ export declare const stateRules: (element: HTMLElement, state: "focus" | "hover"
 export declare const focusRingColor: (element: HTMLElement) => string | undefined;
 /** The outline color `element` draws now (a state class such as `Mui-focused` already set). */
 export declare const currentOutlineColor: (element: HTMLElement) => string;
+/**
+ * The value of `property` on `element` at a viewport of `width` pixels: the last declaration of
+ * the style rules that match the element, media rules included when their width query matches
+ * `width` (jsdom evaluates no media query, so `getComputedStyle` sees none of them).
+ */
+export declare const styleAt: (element: HTMLElement, width: number, property: string) => string;

package/dist/cookie-consent.js

@@ -1,5 +1,5 @@
-import { A as e, c as a, C as n, D as C, R as i, V as t, d as r, f as A, r as k, e as c, u as l, b, a as f, w as u } from "./AbyssCookieConsentProvider-BhSzVu8P.js";
-import { C as E } from "./CookieConsentSettings.component-DMEAuCVS.js";
+import { A as e, c as a, C as n, D as C, R as i, V as t, d as r, f as A, r as k, e as c, u as l, b, a as f, w as u } from "./AbyssCookieConsentProvider-TE46ywnd.js";
+import { C as E } from "./CookieConsentSettings.component-BKsYgpMa.js";
 export {
   e as AbyssCookieConsentProvider,
   a as COOKIE_NAME,