@abyss-project/commons-front-core 6.1.0 → 7.1.0

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

@@ -0,0 +1 @@
+export { MODES, focusRingColor, renderIn, rgb, styleText, } from '../../mobile/test-support/mobile-test-harness';

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

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { Command } from './command-registry';
+export type { Command } from './command-registry';
+export interface CommandPaletteApi {
+    /** Opens the palette, as `Ctrl+K` / `Cmd+K` does. */
+    open(): 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 CommandPaletteProviderProps {
+    children: ReactNode;
+}
+/**
+ * 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;
+/**
+ * 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. */
+export declare const useCommandPalette: () => CommandPaletteApi;

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

@@ -0,0 +1,38 @@
+/** 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. */
+    id: string;
+    label: string;
+    /** Heading the command is listed under in the palette. */
+    group: string;
+    /** Extra words the search matches, such as synonyms. */
+    keywords?: string[];
+    /** Shortcut hint shown next to the command; the palette binds no key for it. */
+    shortcut?: string;
+    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.
+ */
+export declare class CommandRegistry {
+    private readonly registrations;
+    private readonly listeners;
+    private snapshot;
+    register(key: symbol, commands: Command[]): void;
+    unregister(key: symbol): void;
+    find(id: string): Command | undefined;
+    readonly subscribe: (listener: () => void) => (() => void);
+    readonly getSnapshot: () => Command[];
+    private refresh;
+}
+export interface CommandGroup {
+    name: string;
+    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.
+ */
+export declare const searchCommands: (commands: Command[], query: string) => CommandGroup[];

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

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+export declare enum ConfirmDialogTone {
+    Default = "default",
+    Danger = "danger"
+}
+export interface ConfirmDialogProps {
+    open: boolean;
+    title: string;
+    body: ReactNode;
+    confirmLabel: string;
+    /** `danger` paints the confirm button in `status.danger` and starts the focus on « Annuler ». */
+    tone?: ConfirmDialogTone;
+    /** Text the user must type, exactly, before the confirm button is enabled. */
+    confirmationText?: string;
+    /**
+     * Runs on confirm. A returned promise keeps the dialog pending (confirm button loading, cancel and
+     * Escape inactive); a rejection shows a generic failure message and lets the user retry. The host
+     * closes the dialog itself once the action succeeded.
+     */
+    onConfirm(): void | Promise<void>;
+    onCancel(): void;
+}
+/** A modal that asks the user to confirm an action, optionally by typing a confirmation text. */
+export declare function ConfirmDialog({ open, title, body, confirmLabel, tone, confirmationText, onConfirm, onCancel, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+export declare enum DrawerAnchor {
+    Left = "left",
+    Right = "right"
+}
+export interface DrawerProps {
+    open: boolean;
+    onClose(): void;
+    /** Edge the drawer slides from, `right` by default. */
+    anchor?: DrawerAnchor;
+    title: string;
+    /** Width in px, capped to the viewport; the `sm` breakpoint (480) by default. */
+    width?: number;
+    children: ReactNode;
+}
+/**
+ * A side panel over the page, sliding from the left or right edge. Focus is trapped inside and
+ * returns to the opener on close; Escape, the scrim and the close button close it.
+ */
+export declare function Drawer({ open, onClose, anchor, title, width, children, }: DrawerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+export declare enum MenuItemTone {
+    Default = "default",
+    Danger = "danger"
+}
+/** A separator line between two groups of items. */
+export declare enum MenuSeparator {
+    Divider = "divider"
+}
+export interface MenuItem {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    /** Shortcut hint shown at the end of the row, such as `⌘D`; the host binds the key itself. */
+    shortcut?: string;
+    tone?: MenuItemTone;
+    disabled?: boolean;
+    onSelect(): void;
+}
+export interface MenuProps {
+    anchorEl: HTMLElement | null;
+    open: boolean;
+    onClose(): void;
+    items: (MenuItem | MenuSeparator)[];
+}
+/**
+ * A menu of actions anchored to an element (`.menu`), on the `overlay` elevation. Arrow keys move
+ * between the enabled items, Enter or Space selects, Escape and Tab close it and the focus returns
+ * to the anchor.
+ */
+export declare function Menu({ anchorEl, open, onClose, items }: MenuProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+/** Maximum width of the modal: the `sm`, `md` or `lg` breakpoint of the theme. */
+export declare enum ModalSize {
+    Small = "sm",
+    Medium = "md",
+    Large = "lg"
+}
+export interface ModalProps {
+    open: boolean;
+    onClose(): void;
+    title: string;
+    description?: string;
+    size?: ModalSize;
+    /** Buttons of the footer, right-aligned; the first focus goes to the one carrying `autoFocus`. */
+    actions?: ReactNode;
+    children: ReactNode;
+}
+/**
+ * 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`.
+ */
+export declare function Modal({ open, onClose, title, description, size, actions, children, }: ModalProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+export declare enum ToastTone {
+    Success = "success",
+    Warning = "warning",
+    Danger = "danger",
+    Info = "info"
+}
+export interface ToastAction {
+    label: string;
+    onPress(): void;
+}
+export interface ToastOptions {
+    tone: ToastTone;
+    message: string;
+    action?: ToastAction;
+}
+export interface ToastApi {
+    show(toast: ToastOptions): void;
+}
+export interface ToastProviderProps {
+    children: ReactNode;
+}
+/**
+ * Time a toast stays on screen, in ms, counted again from the start each time the pointer or the
+ * focus leaves it. Not an ADR-0166 value: the ADR fixes animation durations only.
+ */
+export declare const TOAST_DURATION = 5000;
+/**
+ * Holds the toasts of the application and renders them in a live region at the bottom right (full
+ * width below `md`), on the `overlay` elevation. Mount it once, inside the theme and the messages.
+ */
+export declare function ToastProvider({ children }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;
+/** Shows toasts from any component below a `ToastProvider`. */
+export declare const useToast: () => ToastApi;

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

@@ -0,0 +1,6 @@
+export * from './Modal/Modal';
+export * from './ConfirmDialog/ConfirmDialog';
+export * from './Drawer/Drawer';
+export * from './Menu/Menu';
+export * from './Toast/Toast';
+export * from './CommandPalette/CommandPalette';

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

@@ -0,0 +1,22 @@
+import { ReactElement } from 'react';
+import { RenderResult } from '@testing-library/react';
+import { Theme } from '@mui/material/styles';
+import { ThemeMode } from '../../../theme';
+export { cssColor, currentOutlineColor, focusRingColor, pressTab, restoreViewport, tabbableElements, THEME_MODES, VIEWPORT, } from '../../structure/test-support/structure-test-harness';
+export interface LayerRenderOptions {
+    mode?: ThemeMode;
+    width?: number;
+}
+export interface LayerRenderResult extends Omit<RenderResult, 'rerender'> {
+    theme: Theme;
+    /** Re-renders `next` inside the same theme and messages. */
+    rerender(next: ReactElement): void;
+}
+/** Renders `ui` under the design system theme and the French messages, at a viewport `width`. */
+export declare const renderLayer: (ui: ReactElement, { mode, width }?: LayerRenderOptions) => LayerRenderResult;
+/** The `#rrggbb` token as jsdom reports a computed color. */
+export declare const rgb: (hex: string) => string;
+/** A box-shadow as jsdom serializes it once applied to an element. */
+export declare const cssShadow: (value: string) => string;
+/** The MUI modal root around `layer`: its focus trap keeps the focus inside this root. */
+export declare const layerOf: (layer: HTMLElement) => HTMLElement;

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

@@ -0,0 +1,6 @@
+import { HttpMethod } from '../../../theme/tokens/domain';
+export interface MethodBadgeProps {
+    method: HttpMethod;
+}
+/** An HTTP verb, in mono, one color per verb. */
+export declare const MethodBadge: ({ method }: MethodBadgeProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,7 @@
+import { AccessLevel } from '../../../theme/tokens/domain';
+export interface RoleBadgeProps {
+    level: AccessLevel;
+    label: string;
+}
+/** An access level (owner, admin, write, read) told by color and by the host's own label. */
+export declare const RoleBadge: ({ level, label }: RoleBadgeProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { ScanVerdict } from '../../../theme/tokens/domain';
+export interface ScanBadgeProps {
+    verdict: ScanVerdict;
+    /** Extra explanation (scanner message), exposed as the native tooltip of the badge. */
+    detail?: string;
+}
+/** The antivirus verdict of a file. */
+export declare const ScanBadge: ({ verdict, detail }: ScanBadgeProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+import { LogSeverity } from '../../../theme/tokens/domain';
+export interface SeverityBadgeProps {
+    severity: LogSeverity;
+}
+/** A log level, in mono capitals; error and fatal share the danger color and differ by label. */
+export declare const SeverityBadge: ({ severity }: SeverityBadgeProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,15 @@
+export declare enum StatusTone {
+    Success = "success",
+    Warning = "warning",
+    Danger = "danger",
+    Info = "info",
+    Highlight = "highlight",
+    Neutral = "neutral"
+}
+export interface StatusBadgeProps {
+    tone: StatusTone;
+    label: string;
+    dot?: boolean;
+}
+/** A state or outcome told by color and by its label, with an optional leading dot. */
+export declare const StatusBadge: ({ tone, label, dot }: StatusBadgeProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,10 @@
+import { ToolKind } from '../../../theme/tokens/domain';
+export type ToolIconSize = 16 | 20 | 24 | 32 | 44;
+export interface ToolIconProps {
+    tool: ToolKind;
+    size?: ToolIconSize;
+    /** Accessible name; without it the icon is decorative and hidden from assistive technology. */
+    label?: string;
+}
+/** A product icon: its SVG used as a mask over the brand gradient. */
+export declare const ToolIcon: ({ tool, size, label }: ToolIconProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+export * from './StatusBadge/StatusBadge';
+export * from './MethodBadge/MethodBadge';
+export * from './SeverityBadge/SeverityBadge';
+export * from './ScanBadge/ScanBadge';
+export * from './RoleBadge/RoleBadge';
+export * from './ToolIcon/ToolIcon';

package/dist/components/meaning/meaning-tone.d.ts

@@ -0,0 +1,9 @@
+import { Theme } from '@mui/material/styles';
+import { SemanticToken } from '../../theme/tokens/semantic';
+/** The semantic token a badge text is drawn with. */
+export declare const toneColor: (theme: Theme, token: SemanticToken) => string;
+/**
+ * The soft fill that goes with a status token. `accent` has no `.soft` twin: its fill is the
+ * accent mixed into transparent.
+ */
+export declare const toneSoft: (theme: Theme, token: SemanticToken) => string;

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

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react';
+import { Theme } from '@mui/material/styles';
+import { ThemeMode } from '../../../theme/tokens/primitives';
+export declare const MODES: ThemeMode[];
+/** Renders `ui` under the design system theme of `mode`, with the French messages of the core. */
+export declare const renderIn: (mode: ThemeMode, ui: ReactElement) => {
+    theme: Theme;
+};
+/** A `#rrggbb` token as jsdom reports a computed color. */
+export declare const rgb: (hex: string) => string;
+/** The elements Tab would stop on, `element` included: a badge has none. */
+export declare const tabStopsOf: (element: HTMLElement) => Element[];
+/**
+ * A badge read as text by assistive technology: not hidden, and no widget role a screen reader
+ * would announce as a control.
+ */
+export declare const isReadAsText: (element: HTMLElement) => boolean;

package/dist/components/mobile/ActionBar/ActionBar.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+export declare enum ActionBarTone {
+    Default = "default",
+    Primary = "primary",
+    Danger = "danger"
+}
+export interface ActionBarAction {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    tone?: ActionBarTone;
+    onPress(): void;
+    disabled?: boolean;
+}
+export interface ActionBarProps {
+    actions: ActionBarAction[];
+}
+/**
+ * The bottom action bar of the mobile screens (`.actionbar`), clear of the home indicator. Each
+ * button shows its icon over its whole label. Up to three actions, each has its button; from four,
+ * the bar keeps the first two and a « Plus » button that lists the others in a `BottomSheet`.
+ * Arrow keys move between the enabled buttons (toolbar pattern).
+ */
+export declare function ActionBar({ actions }: ActionBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/mobile/BottomSheet/BottomSheet.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export interface BottomSheetProps {
+    open: boolean;
+    onClose(): void;
+    title?: string;
+    /** Shows a close button in the top corner, named by this label (`Modal` below 768 px). */
+    closeLabel?: string;
+    children: ReactNode;
+}
+/**
+ * A sheet that slides up from the bottom edge (`.sheet`). Escape, the scrim and a downward drag of
+ * its handle past 30 % of its height close it; focus stays inside while it is open.
+ */
+export declare function BottomSheet({ open, onClose, title, closeLabel, children, }: BottomSheetProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/mobile/MobileShell/MobileShell.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+export interface MobileTab {
+    id: string;
+    label: string;
+    icon: ReactNode;
+    badge?: number;
+}
+export interface MobileMainAction {
+    icon: ReactNode;
+    label: string;
+    onPress(): void;
+}
+export interface MobileShellProps {
+    title: string;
+    largeTitle?: boolean;
+    onBack?(): void;
+    actions?: ReactNode;
+    tabs: MobileTab[];
+    activeTab: string;
+    onTabChange(id: string): void;
+    mainAction?: MobileMainAction;
+    onRefresh?(): Promise<void>;
+    children: ReactNode;
+}
+/**
+ * The frame of the mobile apps (Capacitor): header with back button and title, scrolling content
+ * with pull-to-refresh, bottom tab bar whose main action sits in the center. Every edge keeps
+ * clear of the notch and home indicator through `env(safe-area-inset-*)`.
+ */
+export declare function MobileShell({ title, largeTitle, onBack, actions, tabs, activeTab, onTabChange, mainAction, onRefresh, children, }: MobileShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/mobile/MobileShell/use-pull-to-refresh.d.ts

@@ -0,0 +1,22 @@
+import { TouchEvent } from 'react';
+export interface PullToRefresh {
+    /** Current downward pull, in px, capped at the threshold. */
+    pullDistance: number;
+    refreshing: boolean;
+    touchHandlers: {
+        onTouchStart(event: TouchEvent<HTMLElement>): void;
+        onTouchMove(event: TouchEvent<HTMLElement>): void;
+        onTouchEnd(event: TouchEvent<HTMLElement>): void;
+        onTouchCancel(): void;
+    };
+}
+/**
+ * Pull-to-refresh on a scroll container. Touch events, not pointer events: a vertical pan on a
+ * scrollable element cancels the pointer stream as soon as the browser starts scrolling, while
+ * touch events keep reporting the finger. A pull starts only when the container is scrolled to
+ * the top, and refreshes once released past `threshold`.
+ *
+ * `onRefresh` owns its failures (it shows its own message); a rejection still ends the spinner and
+ * is handed to `reportError`, so the global error handlers see it instead of it being lost.
+ */
+export declare function usePullToRefresh(onRefresh: (() => Promise<void>) | undefined, threshold: number): PullToRefresh;

package/dist/components/mobile/SwipeDeck/SwipeDeck.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+export declare enum SwipeDecision {
+    Approve = "approve",
+    Reject = "reject"
+}
+export interface SwipeDeckProgress {
+    done: number;
+    total: number;
+    approved: number;
+}
+export interface SwipeDeckProps<T> {
+    items: T[];
+    getId(item: T): string;
+    renderCard(item: T): ReactNode;
+    onDecide(item: T, decision: SwipeDecision): void;
+    onUndo(): void;
+    canUndo: boolean;
+    onApproveAll(remaining: T[]): void;
+    emptyState: ReactNode;
+    progress: SwipeDeckProgress;
+}
+/**
+ * A moderation queue, one card at a time (Memories bulk moderation). The top card follows the
+ * finger and tilts; past 30 % of its width it is approved (right) or rejected (left), short of
+ * that it springs back. The host owns the queue: `items` are the cards still to decide, `onDecide`
+ * removes one, `onUndo` puts the last decision back.
+ */
+export declare function SwipeDeck<T>({ items, getId, renderCard, onDecide, onUndo, canUndo, onApproveAll, emptyState, progress, }: SwipeDeckProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+export * from './MobileShell/MobileShell';
+export * from './BottomSheet/BottomSheet';
+export * from './ActionBar/ActionBar';
+export * from './SwipeDeck/SwipeDeck';

package/dist/components/mobile/mobile-layout.d.ts

@@ -0,0 +1,17 @@
+export declare enum SafeAreaSide {
+    Top = "top",
+    Bottom = "bottom",
+    Left = "left",
+    Right = "right"
+}
+/**
+ * A padding that keeps content clear of the device notch, home indicator and rounded corners:
+ * the design spacing plus the platform safe-area inset (0 outside a notched device or a
+ * Capacitor webview with `viewport-fit=cover`).
+ */
+export declare const withSafeArea: (side: SafeAreaSide, spacing: number) => string;
+/**
+ * Share of the dragged element's size past which a drag commits: a card swiped past 30 % of its
+ * width is decided, a sheet pulled down past 30 % of its height closes.
+ */
+export declare const DRAG_COMMIT_RATIO = 0.3;

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

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+import { Theme } from '@mui/material/styles';
+import { ThemeMode } from '../../../theme/tokens/primitives';
+export declare const MODES: ThemeMode[];
+/** Renders `ui` under the design system theme of `mode`, with the French messages of the core. */
+export declare const renderIn: (mode: ThemeMode, ui: ReactElement) => {
+    theme: Theme;
+    rerender(next: ReactElement): void;
+};
+/** A `#rrggbb` token as jsdom reports a computed color. */
+export declare const rgb: (hex: string) => string;
+/** Every rule emotion injected, as text. */
+export declare const styleText: () => string;
+/**
+ * The outline color of the rules that apply to `element` once it holds the keyboard focus. jsdom
+ * cannot enter `:focus-visible`, so the rules are matched with the focus state removed.
+ */
+export declare const focusRingColor: (element: HTMLElement) => string | undefined;

package/dist/components/states/PageState/PageState.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+export declare enum PageStatus {
+    Loading = "loading",
+    Ready = "ready",
+    Empty = "empty",
+    Error = "error",
+    Forbidden = "forbidden",
+    NotFound = "notFound"
+}
+export interface PageStateEmpty {
+    title: string;
+    description?: string;
+    action?: ReactNode;
+}
+export interface PageStateError {
+    /** Replaces the generic description; the title stays « Le chargement a échoué ». */
+    message?: string;
+    onRetry(): void;
+}
+export interface PageStateProps {
+    status: PageStatus;
+    /** Placeholder built by the page from the same layout as the ready content. */
+    skeleton: ReactNode;
+    empty?: PageStateEmpty;
+    error?: PageStateError;
+    /** The ready content. */
+    children: ReactNode;
+}
+/**
+ * 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;

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

@@ -0,0 +1 @@
+export * from './PageState/PageState';

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

@@ -0,0 +1,11 @@
+import { AppShellProps } from './app-shell.types';
+/**
+ * The frame of every web front (ADR-0166 §5, mock-up `.app`, `.side`): the space card with the
+ * product icon and the personal or organization space menu, the "Mon espace Abyss" link, the
+ * 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.
+ */
+export declare function AppShell({ product, space, nav, activeItemId, mainSpaceLink, topbar, footer, children, }: AppShellProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,27 @@
+import { AppShellFooterItem, AppShellMainSpaceLink, NavSection } from './app-shell.types';
+/** How the navigation is drawn: labelled rows, icon rail, or labelled rows sized for touch. */
+export declare enum NavigationForm {
+    Full = "full",
+    Rail = "rail",
+    Touch = "touch"
+}
+/** The "Mon espace Abyss" link, back to the main front (outside the app). */
+export declare function MainSpaceLink({ link, form, }: {
+    link: AppShellMainSpaceLink;
+    form: NavigationForm;
+}): JSX.Element;
+/** The navigation sections of the app (mock-up `.navscroll`, `.navg`, `.nav`). */
+export declare function ShellNavigation({ nav, activeItemId, form, onNavigate, }: {
+    nav: NavSection[];
+    activeItemId: string;
+    form: NavigationForm;
+    onNavigate?(): void;
+}): 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.
+ */
+export declare function ShellFooterLinks({ items, form, }: {
+    items: AppShellFooterItem[];
+    form: NavigationForm;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,13 @@
+import { AppShellProduct, AppShellSpaces } from './app-shell.types';
+interface SpaceSwitcherProps {
+    product: AppShellProduct;
+    space: AppShellSpaces;
+    /** Icon only, its text in a tooltip (tablet rail). */
+    compact: boolean;
+}
+/**
+ * The space card at the top of the navigation (mock-up `.scopecard`): product icon, product name
+ * and current space; it opens the menu of the viewer's spaces, personal or organization.
+ */
+export declare function SpaceSwitcher({ product, space, compact }: SpaceSwitcherProps): import("react/jsx-runtime").JSX.Element;
+export {};