@kromatv/sdk 0.1.40-canary.0

package/types/ui/src/components/organisms/chart/chart-parts.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+/** Which edge a scale is drawn along. */
+type ChartEdge = 'bottom' | 'left';
+/** What each scale reserves for its labels when the caller says nothing. */
+declare const AXIS_ROOM: Record<ChartEdge, number>;
+interface ChartGridProps {
+    /** How many rules, both ends included. Defaults to 5. */
+    ticks?: number;
+}
+/** The ruled ground a plot is read against: one horizontal rule per level. */
+declare function ChartGrid({ ticks }: Readonly<ChartGridProps>): import("react").JSX.Element;
+interface ChartAxisProps {
+    /** Which edge the scale runs along. */
+    edge: ChartEdge;
+    /** How many levels a left scale labels, both ends included. Defaults to 5.
+     *  A bottom scale draws whatever the points are named, so it ignores this. */
+    ticks?: number;
+    /** How much room the labels are given, in px. Defaults to 52 on the left and
+     *  20 along the bottom. */
+    room?: number;
+    /** A bottom scale labels one sample in every `every`, counting back from the
+     *  newest so that one is always named. Defaults to as many as fit. */
+    every?: number;
+    /** Overrides the Root's `format` for this scale. */
+    format?: (value: number) => string;
+}
+/** One edge's scale: its levels and their labels. */
+declare function ChartAxis({ edge, ticks, room, every, format }: Readonly<ChartAxisProps>): import("react").JSX.Element;
+/** The key to the plot's colours, one entry per named series. */
+declare function ChartLegend(): import("react").JSX.Element | null;
+interface ChartFooterProps {
+    /** The caption: an average, a total, the window the samples cover. */
+    children?: ReactNode;
+}
+/** The caption under a plot, on the key's row and pushed to the far end. */
+declare function ChartFooter({ children }: Readonly<ChartFooterProps>): import("react").JSX.Element;
+/** The readout for the sample under the pointer, and the rule marking it.
+ *  Writing one is also what makes the plot track a pointer at all. */
+declare function ChartTooltip(): import("react").JSX.Element | null;
+export type { ChartAxisProps, ChartEdge, ChartFooterProps, ChartGridProps };
+export { AXIS_ROOM, ChartAxis, ChartFooter, ChartGrid, ChartLegend, ChartTooltip };

package/types/ui/src/components/organisms/chart/chart-path.d.ts

@@ -0,0 +1,28 @@
+import { type ChartBox, type ChartDomain } from './chart-scale';
+/** The line drawn between two samples. */
+export type ChartCurve = 'linear' | 'monotone' | 'step';
+interface Point {
+    x: number;
+    y: number;
+}
+/**
+ * The Fritsch-Carlson tangent at each sample: the slope a monotone cubic leaves
+ * and enters it with.
+ *
+ * Two properties earn it. A flat run gets zero tangents, so a series resting at
+ * one value draws a straight line rather than rippling around it; and a run that
+ * only rises has every tangent limited to three times the local secant, which is
+ * exactly the condition under which the cubic stays inside the two samples it
+ * joins.
+ */
+export declare function tangentsOf(points: readonly Point[]): number[];
+/** One unbroken run as a path. A run of one closes onto itself, which a round
+ *  linecap draws as the dot the sample is. */
+export declare function curveOf(points: readonly Point[], curve: ChartCurve): string;
+/** `d` for the open trace of one series. Empty where nothing is finite; a run
+ *  broken by a gap continues as a new subpath rather than jumping the hole. */
+export declare function linePath(column: readonly (number | null)[], domain: ChartDomain, box: ChartBox, curve?: ChartCurve): string;
+/** `d` for the same trace closed down to the baseline, one filled shape per
+ *  unbroken run. */
+export declare function areaPath(column: readonly (number | null)[], domain: ChartDomain, box: ChartBox, curve?: ChartCurve): string;
+export {};

package/types/ui/src/components/organisms/chart/chart-scale.d.ts

@@ -0,0 +1,82 @@
+/** One sample. A series reads its own field off it; anything not a finite
+ *  number is a gap. */
+export type ChartPoint = Record<string, number | string | null | undefined>;
+/** The value range a plot is drawn against. `max` is always greater than
+ *  `min`, which is what makes every division below safe. */
+export interface ChartDomain {
+    min: number;
+    max: number;
+}
+export interface ChartBox {
+    width: number;
+    height: number;
+}
+export interface DomainOptions {
+    min?: number;
+    max?: number;
+    /** Pull 0 into the range, for a mark measured from a baseline. */
+    baseline?: boolean;
+}
+export interface ChartBand {
+    x: number;
+    width: number;
+}
+/** A point's value for one series, or null where there is nothing to draw. */
+export declare function valueFor(point: ChartPoint | undefined, series: string): number | null;
+/** The column one series contributes, in point order. */
+export declare function columnOf(data: readonly ChartPoint[], series: string): (number | null)[];
+/**
+ * The range every series in one chart shares, so two series are read against
+ * each other rather than each against its own scale.
+ *
+ * `min`/`max` win outright, and an inverted pair is widened rather than
+ * rejected. Otherwise a flat run is opened out: to `0..1` when it sits on zero
+ * or is measured from a baseline, and symmetrically by 1 when it does not, so a
+ * dead metric draws along the floor instead of dividing by zero.
+ */
+export declare function domainOf(columns: readonly (readonly (number | null)[])[], options?: Readonly<DomainOptions>): ChartDomain;
+/** Sample index to x, first sample on the left edge and last on the right. A
+ *  lone sample sits in the middle, where a division would otherwise be by zero. */
+export declare function xAt(index: number, count: number, width: number): number;
+/** The slice of the plot one sample owns, and the bar drawn inside it. */
+export declare function bandAt(index: number, count: number, width: number): ChartBand;
+/** Value to y. Larger values sit higher, which is why this inverts; a value
+ *  outside an explicit domain is clamped to the edge rather than drawn off it. */
+export declare function yAt(value: number, domain: ChartDomain, box: ChartBox): number;
+/** The level a baselined mark is measured from: zero, or the nearer edge of a
+ *  domain that does not contain it. */
+export declare function baselineOf(domain: ChartDomain): number;
+/** Quantise to 0.1px: finer is invisible at this size, and the shorter `d` is
+ *  what crosses into the renderer on every repaint. */
+export declare function px(value: number): number;
+/** `count` evenly spaced levels across the domain, both ends included. */
+export declare function ticksOf(domain: ChartDomain, count: number): number[];
+/** Which sample an x lands on, for the cursor. Null where there is nothing to
+ *  land on. `band` picks the slice a bar owns rather than the nearest point. */
+export declare function indexAtX(x: number, count: number, width: number, band?: boolean): number | null;
+export interface BarBox {
+    x: number;
+    width: number;
+    y: number;
+    height: number;
+}
+/** The corners a bar rounds, in px. */
+export interface BarCorners {
+    top: number;
+    bottom: number;
+}
+/**
+ * One bar as a path, rounding only the corners it is given.
+ *
+ * The radius belongs to the STACK and not to the segment: a join between two
+ * segments that both rounded would pinch, showing the ground through the notch
+ * and reading as two bars that happen to touch. A radius larger than the box
+ * can hold is clamped rather than allowed to deform it.
+ */
+export declare function barPath(box: Readonly<BarBox>, corners: Readonly<BarCorners>): string;
+/**
+ * Where each bar in a stack starts, given the columns declared before it.
+ * Values are summed as drawn, so a gap contributes nothing and does not sink
+ * the bars above it.
+ */
+export declare function stackBase(below: readonly (readonly (number | null)[])[], count: number): number[];

package/types/ui/src/components/organisms/chart/chart.d.ts

@@ -0,0 +1,63 @@
+import { type ReactNode } from 'react';
+import { Area, Bar, Line } from './chart-marks';
+import { ChartAxis, ChartFooter, ChartGrid, ChartLegend, ChartTooltip } from './chart-parts';
+import { type ChartPoint } from './chart-scale';
+interface ChartRootProps {
+    /** The samples, oldest first. */
+    data: readonly ChartPoint[];
+    /** The field naming each sample along the bottom edge. Omit it and the
+     *  samples go unnamed, which is what a sparkline wants. */
+    x?: string;
+    /** The whole chart's width. Omit it and the Root measures its own box, which
+     *  costs one frame before the first paint. */
+    width?: number;
+    /** The plot's height, plus whatever a bottom scale reserves. Defaults to 180. */
+    height?: number;
+    /** Pins the low end of the scale, which is otherwise read off the data. */
+    min?: number;
+    /** Pins the high end. A `max` at or below `min` is widened rather than
+     *  refused. */
+    max?: number;
+    /** How a value is written on a scale and in the readout. */
+    format?: (value: number) => string;
+    /** Names the PLOT to assistive tech, which cannot read a drawing: say what it
+     *  shows and how it is going. A plot with no name is decoration, and is
+     *  hidden from the accessibility tree rather than announced as an image. */
+    label?: string;
+    /** The sample the readout is on, as an index into `data`. */
+    active?: number | null;
+    defaultActive?: number | null;
+    onActiveChange?: (index: number | null) => void;
+    /** The grid, the marks, the scales, the key and the readout. Only a DIRECT
+     *  child takes part: the Root sorts them to know what belongs where. */
+    children?: ReactNode;
+}
+declare function Root({ data, x, width, height, min, max, format, label, active: activeProp, defaultActive, onActiveChange, children, }: Readonly<ChartRootProps>): import("react").JSX.Element;
+/**
+ * A plot of one or more series over one shared scale.
+ *
+ * ```tsx
+ * <Chart.Root data={samples} x="at" height={208} format={mbps} label="Debit">
+ *   <Chart.Grid />
+ *   <Chart.Area series="local" label="Local" />
+ *   <Chart.Line series="remote" label="Distant" />
+ *   <Chart.Axis edge="left" />
+ *   <Chart.Axis edge="bottom" />
+ *   <Chart.Tooltip />
+ *   <Chart.Legend />
+ * </Chart.Root>
+ * ```
+ */
+declare const Chart: {
+    Root: typeof Root;
+    Grid: typeof ChartGrid;
+    Line: typeof Line;
+    Area: typeof Area;
+    Bar: typeof Bar;
+    Axis: typeof ChartAxis;
+    Tooltip: typeof ChartTooltip;
+    Legend: typeof ChartLegend;
+    Footer: typeof ChartFooter;
+};
+export type { ChartRootProps };
+export { Chart };

package/types/ui/src/components/organisms/chart/index.d.ts

@@ -0,0 +1,5 @@
+export * from './chart';
+export type { ChartBarProps, ChartMarkProps, ChartTraceProps } from './chart-marks';
+export type { ChartAxisProps, ChartEdge, ChartFooterProps, ChartGridProps } from './chart-parts';
+export type { ChartCurve } from './chart-path';
+export type { ChartPoint } from './chart-scale';

package/types/ui/src/components/organisms/code-block/code-block.d.ts

@@ -0,0 +1,23 @@
+interface CodeBlockProps {
+    /** The snippet, trimmed before it is painted. */
+    code: string;
+    /** Numbers the lines. Defaults to on for anything longer than one line. */
+    numbers?: boolean;
+    /** The height past which the block scrolls rather than growing. Defaults to
+     *  320: a two-line snippet is a two-line block, never a mostly-empty well. */
+    maxHeight?: number;
+}
+/**
+ * A block of TSX. Code is never wrapped and never truncated - a broken call site
+ * reads as a different call site - so a long line scrolls sideways instead.
+ * Which is why the layout is two scrollers rather than one: the line numbers sit
+ * OUTSIDE the horizontal one, so they stay put while the code slides under them,
+ * and INSIDE the vertical one, so they still travel with their own lines.
+ *
+ * ```tsx
+ * <CodeBlock code={`<Button label="Play" onPress={play} />`} />
+ * ```
+ */
+declare function CodeBlock({ code, numbers, maxHeight }: Readonly<CodeBlockProps>): import("react").JSX.Element;
+export type { CodeBlockProps };
+export { CodeBlock };

package/types/ui/src/components/organisms/code-block/code-tokens.d.ts

@@ -0,0 +1,15 @@
+/** What a run of code was recognised as, which is the only thing the painter
+ * reads. */
+type TokenKind = 'plain' | 'tag' | 'attr' | 'string' | 'keyword' | 'number' | 'brace' | 'comment';
+interface Token {
+    text: string;
+    kind: TokenKind;
+}
+/** Every character of `code`, in order and with nothing lost: the tokens
+ * concatenate back to the input. */
+declare function tokenize(code: string): Token[];
+/** The tokens regrouped per line, so a line number can sit beside each one
+ * without the colouring having to survive a wrapping layout. */
+declare function lines(code: string): Token[][];
+export type { Token, TokenKind };
+export { lines, tokenize };

package/types/ui/src/components/organisms/code-block/index.d.ts

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

package/types/ui/src/components/organisms/command/command-context.d.ts

@@ -0,0 +1,31 @@
+import type { CommandItem, CommandSection } from './command-list';
+/** What the palette is currently showing. */
+interface CommandResults {
+    /** Rows the query left. */
+    shown: number;
+    /** Rows there are in total. */
+    total: number;
+    query: string;
+}
+interface CommandState extends CommandResults {
+    sections: readonly CommandSection[];
+    /** The row the keyboard cursor is on, or nothing on a target that has none. */
+    cursor: string | undefined;
+    /** The row already open behind the palette. */
+    selected: string | undefined;
+    setQuery: (next: string) => void;
+    /** The pointer moves the SAME cursor the arrows do. */
+    point: (item: CommandItem) => void;
+    choose: (item: CommandItem | undefined) => void;
+    close: () => void;
+    /** Where the list should be, recomputed whenever the cursor moves. */
+    scroll: (offset: number, viewport: number) => number | null;
+}
+declare const CommandContext: import("react").Context<CommandState | null>, useCommand: (part: string) => CommandState;
+/**
+ * What the palette is showing, for a status line or a footer inside it. Works
+ * at any depth under a `<Command.Root>`; throws outside one.
+ */
+declare function useCommandResults(): CommandResults;
+export type { CommandResults, CommandState };
+export { CommandContext, useCommand, useCommandResults };

package/types/ui/src/components/organisms/command/command-keys-types.d.ts

@@ -0,0 +1,11 @@
+interface CommandKeysOptions {
+    /** Rows to move the cursor by: one for an arrow, a page for PageUp/PageDown. */
+    onStep: (rows: number) => void;
+    /** Enter: open whatever the cursor is on. */
+    onChoose: () => void;
+    onClose: () => void;
+}
+/** What PageUp and PageDown are worth. */
+declare const PAGE = 8;
+export type { CommandKeysOptions };
+export { PAGE };

package/types/ui/src/components/organisms/command/command-keys.d.ts

@@ -0,0 +1,3 @@
+import type { CommandKeysOptions } from './command-keys-types';
+declare function useCommandKeys(_options: CommandKeysOptions): void;
+export { useCommandKeys };

package/types/ui/src/components/organisms/command/command-keys.web.d.ts

@@ -0,0 +1,3 @@
+import { type CommandKeysOptions } from './command-keys-types';
+declare function useCommandKeys({ onStep, onChoose, onClose }: CommandKeysOptions): void;
+export { useCommandKeys };

package/types/ui/src/components/organisms/command/command-list.d.ts

@@ -0,0 +1,46 @@
+import type { IconName } from '#ui/components/atoms/icon';
+/** One row of a command palette. */
+interface CommandItem {
+    id: string;
+    label: string;
+    /** The section it is listed under. Items are grouped in the order they are
+     *  given, so a caller sorts once and the palette follows. */
+    group?: string;
+    icon?: IconName;
+    /** Searched as well as the label: a summary, a path, a list of synonyms. */
+    keywords?: string;
+    /** Reported at the end of the row, after the label. */
+    meta?: string;
+}
+/** A run of items under one heading. An empty title is a run with no heading. */
+interface CommandSection {
+    title: string;
+    items: readonly CommandItem[];
+}
+/** The heights the palette is drawn at, and the ones `offsetOf` sums. */
+declare const METRICS: {
+    readonly row: 36;
+    readonly heading: 26;
+    readonly pad: 6;
+    readonly separator: 1;
+    /** How tall the list may get before it scrolls. */
+    readonly maxHeight: 320;
+};
+/** Whether a query reaches an item at all. */
+declare function matches(item: CommandItem, query: string): boolean;
+/** The sections a query leaves. With nothing typed they are the order the items
+ * were given; with a query they are best first, and a section follows the best
+ * row inside it. */
+declare function sectionsOf(items: readonly CommandItem[], query: string): CommandSection[];
+/** Every visible row, in cursor order. */
+declare function flatten(sections: readonly CommandSection[]): CommandItem[];
+/** Where the nth result starts inside the scroller. */
+declare function offsetOf(sections: readonly CommandSection[], index: number): number;
+/** Where the scroller has to move to bring row `index` into view, or null when
+ * it is already there. Moves as little as possible: recentring on every arrow
+ * press flickers the whole list past the row being read. */
+declare function scrollTo(sections: readonly CommandSection[], index: number, offset: number, viewport: number): number | null;
+/** The cursor `delta` rows on, wrapping at both ends. */
+declare function stepTo(from: number, delta: number, length: number): number;
+export type { CommandItem, CommandSection };
+export { flatten, METRICS, matches, offsetOf, scrollTo, sectionsOf, stepTo };

package/types/ui/src/components/organisms/command/command-parts.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from 'react';
+interface CommandInputProps {
+    placeholder?: string;
+    /** The accessible name of the field. Give it something the control that
+     *  opened the palette does not also say. */
+    label?: string;
+}
+/** The one thing a palette can be typed into. */
+declare function Input({ placeholder, label }: Readonly<CommandInputProps>): import("react").JSX.Element;
+/** The scrolling list of results. Renders nothing while the query matches
+ * nothing, which is when a `<Command.Empty>` beside it takes the space. */
+declare function List(): import("react").JSX.Element | null;
+/** What the list shows when the query matches nothing. */
+declare function Empty({ children }: Readonly<{
+    children?: ReactNode;
+}>): import("react").JSX.Element | null;
+/** The row under the list: the shortcut hints and the tally. Compose it from
+ * `<Kbd>` and `<Text>`; `useCommandResults()` is how something inside it reads
+ * how many rows are showing. */
+declare function Footer({ children }: Readonly<{
+    children?: ReactNode;
+}>): import("react").JSX.Element;
+export type { CommandInputProps };
+export { Empty, Footer, Input, List };

package/types/ui/src/components/organisms/command/command-row.d.ts

@@ -0,0 +1,15 @@
+import type { CommandItem } from './command-list';
+interface CommandRowProps {
+    item: CommandItem;
+    /** The row that is already open behind the palette. */
+    open: boolean;
+    /** The row the keyboard cursor is on. */
+    cursor: boolean;
+    /** Both are handed the row's `item`, so one handler serves the whole list
+     *  rather than a closure per row. */
+    onHover: (item: CommandItem) => void;
+    onPress: (item: CommandItem) => void;
+}
+declare function CommandRow({ item, open, cursor, onHover, onPress }: Readonly<CommandRowProps>): import("react").JSX.Element;
+export type { CommandRowProps };
+export { CommandRow };

package/types/ui/src/components/organisms/command/command.d.ts

@@ -0,0 +1,45 @@
+import { type ReactNode } from 'react';
+import { type CommandItem } from './command-list';
+import { Empty, Footer, Input, List } from './command-parts';
+interface CommandRootProps {
+    /** Every row the palette can reach, in the order they should be listed with
+     *  nothing typed. A query ranks them itself. */
+    items: readonly CommandItem[];
+    /** The id already open behind the palette, marked in the list. */
+    selected?: string;
+    onSelect: (item: CommandItem) => void;
+    /** Escape, the scrim, and choosing a row all come through here. */
+    onClose: () => void;
+    query?: string;
+    defaultQuery?: string;
+    onQueryChange?: (next: string) => void;
+    /** `<Command.Input>`, `<Command.List>`, `<Command.Empty>` and
+     *  `<Command.Footer>`, in the order they should be stacked. */
+    children?: ReactNode;
+}
+/**
+ * The palette. Render it while it is open and unmount it to close; it takes the
+ * keyboard for as long as it is up.
+ *
+ * ```tsx
+ * <Command.Root items={rows} selected={open} onSelect={go} onClose={shut}>
+ *   <Command.Input placeholder="Search…" label="Search the library" />
+ *   <Command.List />
+ *   <Command.Empty>Nothing found.</Command.Empty>
+ * </Command.Root>
+ * ```
+ */
+declare function Root({ items, selected, onSelect, onClose, query: queryProp, defaultQuery, onQueryChange, children, }: Readonly<CommandRootProps>): import("react").JSX.Element;
+/**
+ * A search-and-jump overlay: one field, a ranked and grouped list, a cursor the
+ * arrows and the pointer share, and Enter to open.
+ */
+declare const Command: {
+    Root: typeof Root;
+    Input: typeof Input;
+    List: typeof List;
+    Empty: typeof Empty;
+    Footer: typeof Footer;
+};
+export type { CommandRootProps };
+export { Command };

package/types/ui/src/components/organisms/command/index.d.ts

@@ -0,0 +1,7 @@
+export type { CommandRootProps } from './command';
+export { Command } from './command';
+export type { CommandResults } from './command-context';
+export { useCommandResults } from './command-context';
+export type { CommandItem, CommandSection } from './command-list';
+export { METRICS as COMMAND_METRICS } from './command-list';
+export type { CommandInputProps } from './command-parts';

package/types/ui/src/components/organisms/dialog/confirm-dialog/confirm-dialog.d.ts

@@ -0,0 +1,12 @@
+import { type DialogRootProps } from '#ui/components/organisms/dialog/dialog';
+interface ConfirmDialogProps extends Omit<DialogRootProps, 'children'> {
+    confirmLabel: string;
+    cancelLabel: string;
+    onConfirm: () => void;
+    destructive?: boolean;
+}
+/** A whole yes/no panel: a question, and a pair of full-size buttons with the
+ *  ring already on the answer. `confirm()` is the imperative way to raise one. */
+declare function ConfirmDialog({ confirmLabel, cancelLabel, onConfirm, destructive, ...dialog }: Readonly<ConfirmDialogProps>): import("react").JSX.Element;
+export type { ConfirmDialogProps };
+export { ConfirmDialog };

package/types/ui/src/components/organisms/dialog/confirm-dialog/confirm.d.ts

@@ -0,0 +1,16 @@
+export interface ConfirmOptions {
+    title: string;
+    /** Already translated - the kit does not know your catalog. */
+    message?: string;
+    confirmLabel: string;
+    cancelLabel: string;
+    destructive?: boolean;
+}
+/**
+ * Ask a yes/no question. Resolves `true` on confirm, `false` when dismissed -
+ * and immediately `false` when no <ConfirmHost/> is mounted, so a shell that
+ * has not opted in fails closed instead of hanging the caller forever.
+ */
+export declare function confirm(options: Readonly<ConfirmOptions>): Promise<boolean>;
+/** Mount once, near the root. Draws whatever `confirm()` asks, one at a time. */
+export declare function ConfirmHost(): import("react").JSX.Element | null;

package/types/ui/src/components/organisms/dialog/confirm-dialog/index.d.ts

@@ -0,0 +1,2 @@
+export * from './confirm';
+export * from './confirm-dialog';

package/types/ui/src/components/organisms/dialog/dialog-actions.d.ts

@@ -0,0 +1,29 @@
+import { type ReactNode } from 'react';
+interface DialogActionsProps {
+    /** Dismisses the panel. Drawn to the left of the confirm, and quiet. */
+    onCancel?: () => void;
+    cancelLabel?: string;
+    /** The panel's own action, drawn accent to the right of the cancel. A panel
+     *  with nothing to confirm leaves it out and keeps its way out. */
+    onConfirm?: () => void;
+    /** Already resolved by the caller, so it can swap to "Saving...". */
+    confirmLabel?: string;
+    /** The confirm destroys something: it goes red rather than accent. The one
+     *  spelling, shared with <ConfirmDialog> and `confirm()`. */
+    destructive?: boolean;
+    /** The confirm spins and both actions ignore presses while the work runs. */
+    busy?: boolean;
+    /** Disables the confirm alone: the way out stays open. */
+    disabled?: boolean;
+    /** Controls of your own. Alone they ARE the row; beside a cancel or a confirm
+     *  they sit at the opposite edge, which is where a "Delete account" belongs. */
+    children?: ReactNode;
+}
+/** The controls a panel offers, as one focus group. `<Dialog.Actions onCancel
+ *  cancelLabel onConfirm confirmLabel />` is the standard footer, `destructive`
+ *  turns the confirm red, and children are extra actions. Each control is
+ *  drawn only where it was asked for, and a row holding none of them draws
+ *  nothing: a panel whose only way out is to close grows no confirm. */
+declare function Actions({ onCancel, cancelLabel, onConfirm, confirmLabel, destructive, busy, disabled, children, }: Readonly<DialogActionsProps>): import("react").JSX.Element | null;
+export type { DialogActionsProps };
+export { Actions };

package/types/ui/src/components/organisms/dialog/dialog-parts.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+interface Shell {
+    pad: number;
+    hasHeader: boolean;
+    hasFooter: boolean;
+}
+declare const ShellContext: import("react").Context<Shell>;
+declare function Header({ children }: Readonly<{
+    children: ReactNode;
+}>): import("react").JSX.Element;
+/** The scrolling middle, and the only part of the panel that scrolls. */
+declare function Panel({ children }: Readonly<{
+    children: ReactNode;
+}>): import("react").JSX.Element;
+/** The pinned bottom: a shelf, not a row. Put a <Dialog.Actions> in it. */
+declare function Footer({ children }: Readonly<{
+    children: ReactNode;
+}>): import("react").JSX.Element;
+export type { Shell };
+export { Footer, Header, Panel, ShellContext };

package/types/ui/src/components/organisms/dialog/dialog.d.ts

@@ -0,0 +1,55 @@
+import { type ReactNode } from 'react';
+import { type SurfaceWidth } from '#ui/lib/surface-shell';
+import { Actions } from './dialog-actions';
+import { Footer, Header, Panel } from './dialog-parts';
+interface DialogRootProps {
+    open: boolean;
+    onClose?: () => void;
+    title?: string;
+    description?: string;
+    /** The panel's bands: a `<Dialog.Header>`, a `<Dialog.Panel>` and a
+     *  `<Dialog.Footer>`, each optional. Anything else is the panel's content. */
+    children?: ReactNode;
+    /** The panel's step on the kit's width ladder, named for the densest thing it
+     *  holds rather than measured in pixels. See {@link SURFACE_WIDTH}. */
+    width?: SurfaceWidth;
+    /** Panel padding. 0 hands the surface to content that owns its own layout
+     *  (a routed detail sheet); such a dialog names itself via `title` even
+     *  though nothing visible renders it. */
+    pad?: number;
+    /** Keep `title` as the accessible name only; the visible header is the
+     *  content's own. */
+    titleHidden?: boolean;
+}
+declare function Root({ open, onClose, title, description, children, width, pad, titleHidden, }: Readonly<DialogRootProps>): import("react").JSX.Element | null;
+/**
+ * The modal panel. The Root takes `title` / `description`, which name it to
+ * assistive tech and draw the ordinary header; the parts arrange a panel that
+ * needs a header of its own, or a footer:
+ *
+ * ```tsx
+ * <Dialog.Root open onClose={close} title="Supprimer">
+ *   <Text>…</Text>
+ *   <Dialog.Footer><Dialog.Actions … /></Dialog.Footer>
+ * </Dialog.Root>
+ *
+ * <Dialog.Root open onClose={close}>
+ *   <Dialog.Header>…</Dialog.Header>
+ *   <Dialog.Panel>…</Dialog.Panel>
+ *   <Dialog.Footer><Dialog.Actions … /></Dialog.Footer>
+ * </Dialog.Root>
+ * ```
+ *
+ * Either way only `Panel` scrolls; the header and the footer stay put.
+ * `Footer` is the pinned shelf and `Actions` is the row of controls, so the two
+ * nest rather than compete.
+ */
+declare const Dialog: {
+    Root: typeof Root;
+    Header: typeof Header;
+    Panel: typeof Panel;
+    Footer: typeof Footer;
+    Actions: typeof Actions;
+};
+export type { DialogRootProps };
+export { Dialog };

package/types/ui/src/components/organisms/dialog/index.d.ts

@@ -0,0 +1,3 @@
+export * from './confirm-dialog';
+export * from './dialog';
+export type { DialogActionsProps } from './dialog-actions';

package/types/ui/src/components/organisms/drawer/drawer-parts.d.ts

@@ -0,0 +1,29 @@
+import { type ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type IconButtonProps } from '#ui/components/atoms/icon-button';
+interface Shell {
+    pad: number;
+    onClose?: () => void;
+}
+declare const PAD = 24;
+declare const ShellContext: import("react").Context<Shell>;
+interface DrawerBandProps {
+    children?: ReactNode;
+    /** Merged over the band's own padding, for the browser-only insets the kit's
+     *  vocabulary has no spelling for (`env(safe-area-inset-top)`). */
+    style?: StyleProp<ViewStyle>;
+}
+declare function Header({ children, style }: Readonly<DrawerBandProps>): import("react").JSX.Element;
+/** The scrolling middle, and the only part of the sheet that scrolls. */
+declare function Panel({ children, style }: Readonly<DrawerBandProps>): import("react").JSX.Element;
+/** The pinned bottom: a shelf for the sheet's actions. */
+declare function Footer({ children, style }: Readonly<DrawerBandProps>): import("react").JSX.Element;
+/** Everything an icon button takes except what dismissing the sheet decides:
+ *  the glyph, the accessible name and what pressing it does. */
+type DrawerCloseProps = Omit<IconButtonProps, 'icon' | 'label' | 'onPress' | 'children'>;
+/** The way out, wired to the Root's `onClose`. Renders nothing when the sheet
+ *  cannot be dismissed, so a header composed by a caller needs no condition of
+ *  its own. */
+declare function Close({ variant, ...button }: Readonly<DrawerCloseProps>): import("react").JSX.Element | null;
+export type { DrawerBandProps, DrawerCloseProps, Shell };
+export { Close, Footer, Header, PAD, Panel, ShellContext };