@crewlethq/ui 0.54.1 → 0.56.0

package/dist/RunChip/RunChip.d.ts

@@ -0,0 +1,53 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/**
+ * Where a request stands. `thinking` before its first step, `working` while
+ * its steps run, `done`, `waiting` on the person's approval, `applying` while
+ * an approved change is carried out, `stopped` by the person, `failed` (the
+ * system could not finish it) and `refused` (the person's own access does not
+ * allow it).
+ */
+export type RunState = 'thinking' | 'working' | 'done' | 'waiting' | 'applying' | 'stopped' | 'failed' | 'refused';
+export declare const RUN_STATES: readonly ["thinking", "working", "done", "waiting", "applying", "stopped", "failed", "refused"];
+export interface RunChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> {
+    state: RunState;
+    /** The state in words, with the time where it has one: "Working", "Done in 5s", "Stopped after 3s". */
+    title: string;
+    /** A fact after the title, behind a " · " separator: "3s", "2 steps", "1 of 2 steps". */
+    meta?: string | undefined;
+    /**
+     * What the chip opens: the request's steps (`StepList`). Without it, or
+     * with `expandable` false, the chip is words with its chevron's slot kept,
+     * so its mark does not move when the first step arrives.
+     */
+    children?: ReactNode;
+    /** Whether there is anything to open. Defaults to whether `children` is given. */
+    expandable?: boolean | undefined;
+    /** Controlled open state. */
+    open?: boolean | undefined;
+    /**
+     * The uncontrolled starting state. Left out, the chip is open while the
+     * request is under way and closed otherwise, and it follows the request: it
+     * opens when work starts and closes itself when the request settles,
+     * whatever the reader last did with it.
+     */
+    defaultOpen?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+}
+/**
+ * A request's state, as the row a reader opens to see its steps.
+ *
+ * BUILT ON THE DISCLOSURE TRIGGER: the chevron, then the state's mark (the
+ * spinner while it works, the check, the clock, the lock), the state in words
+ * and a quieter fact after a " · ", in the disclosure's own register. The
+ * chevron's padding hangs into the gutter, so the chevron sits on the text
+ * edge of the thread above it.
+ *
+ * THE STATE CARRIES ITS TONE IN THE TITLE'S INK: waiting on the person in the
+ * warning ink, failed in the danger ink, everything else in the secondary
+ * ink. Colour is never alone: the words say the state, and the mark draws it.
+ *
+ * ITS NAME IS ITS WORDS, "Working, 3 s": the visible separator is hidden from
+ * assistive technology and a comma said in its place. The step list it opens
+ * is a region named by the chip.
+ */
+export declare function RunChip({ state, title, meta, children, expandable: expandableProp, open: controlledOpen, defaultOpen, onOpenChange, className, ...rest }: RunChipProps): import("react").JSX.Element;

package/dist/RunChip/index.d.ts

@@ -0,0 +1,3 @@
+import './RunChip.css';
+export { RUN_STATES, RunChip } from './RunChip.js';
+export type { RunChipProps, RunState } from './RunChip.js';

package/dist/RunChip/index.js

@@ -0,0 +1,10 @@
+export { RUN_STATES, RunChip } from '../chunk-EVWTLFKI.js';
+import '../chunk-CGT4R7LW.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-GG4QZWMQ.js';
+import '../chunk-TFGCNBWP.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-EA23JG6R.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/RunChip-I2S4VZ3R.css

@@ -0,0 +1,43 @@
+/*
+ * A request's state on the disclosure trigger. Only what differs from the
+ * disclosure is said here: the trigger is as wide as its words (not the whole
+ * row), its padding hangs into the gutter so the chevron sits on the text
+ * edge, its figures are tabular so a ticking time does not shake the row, and
+ * the title takes the state's tone.
+ */
+.crewlet-run-chip {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-run-chip .crewlet-run-chip__trigger {
+  flex: none;
+  width: auto;
+  max-width: calc(100% + var(--spacing-2));
+  margin-inline-start: calc(var(--spacing-2) * -1);
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-run-chip__separator {
+  color: var(--color-text-tertiary);
+}
+
+/* The state's tone, in the title's ink, at rest and under the pointer. */
+.crewlet-run-chip--waiting .crewlet-run-chip__trigger,
+.crewlet-run-chip--waiting .crewlet-run-chip__trigger:hover {
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-run-chip--failed .crewlet-run-chip__trigger,
+.crewlet-run-chip--failed .crewlet-run-chip__trigger:hover {
+  color: var(--color-feedback-danger-ink);
+}
+
+/* The steps it opens fill the thread's width under it. */
+.crewlet-run-chip__panel {
+  align-self: stretch;
+  min-width: 0;
+}

package/dist/SandboxedFrame/index.js

@@ -1,8 +1,9 @@
-export { FRAME_HELLO_TIMEOUT_MS, FRAME_LOAD_GRACE_MS, SandboxedFrame, SandboxedFrameNotice, SandboxedFramePlaceholder } from '../chunk-WQQ5T5SA.js';
+export { FRAME_HELLO_TIMEOUT_MS, FRAME_LOAD_GRACE_MS, SandboxedFrame, SandboxedFrameNotice, SandboxedFramePlaceholder } from '../chunk-OZIBNFLO.js';
 import '../chunk-F6V2PTN6.js';
 import '../chunk-ZXXDZJQN.js';
 import '../chunk-BPCY7ZID.js';
 import '../chunk-TEUQWOWZ.js';
-import '../chunk-OG6CL3EB.js';
+import '../chunk-HD4QJ2SI.js';
+import '../chunk-EA23JG6R.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SegmentedControl/index.js

@@ -1,15 +1,16 @@
 import '../chunk-OOC7Q67K.js';
-export { SegmentedControl } from '../chunk-6FVGSWLS.js';
-import '../chunk-ILFEWRLG.js';
+export { SegmentedControl } from '../chunk-AWSFK2IK.js';
+import '../chunk-I7VG6RQE.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-BHHIIK3M.js';
-import '../chunk-TMM32U7D.js';
+import '../chunk-TKS7FTTO.js';
+import '../chunk-HD4QJ2SI.js';
+import '../chunk-EA23JG6R.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SelectionBar/index.js

@@ -1,8 +1,9 @@
-export { SelectionBar } from '../chunk-OCRVY42T.js';
+export { SelectionBar } from '../chunk-NK3D66PB.js';
 import '../chunk-NR4CPM4T.js';
 import '../chunk-RSAQOKH3.js';
+import '../chunk-HD4QJ2SI.js';
+import '../chunk-EA23JG6R.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/SendButton/SendButton.d.ts

@@ -0,0 +1,38 @@
+import { type IconButtonProps } from '../IconButton/index.js';
+/** Whether the button sends the message or stops the request already running. */
+export type SendButtonMode = 'send' | 'stop';
+export interface SendButtonLabels {
+    /** The send button's name and tooltip. */
+    send: string;
+    /** The stop button's name and tooltip. */
+    stop: string;
+}
+export declare const SEND_BUTTON_LABELS: SendButtonLabels;
+export interface SendButtonProps extends Omit<IconButtonProps, 'label' | 'icon' | 'variant' | 'size' | 'onClick' | 'children' | 'asChild'> {
+    /** `send` while nothing is running; `stop` while a request runs. */
+    mode: SendButtonMode;
+    /** Called on a press in either mode: the caller sends, or stops what is running. */
+    onPress: () => void;
+    /**
+     * Why it cannot send right now ("Write a question first", "Offline"). Soft
+     * disabled, as every disabled control here is: it keeps its place in the
+     * tab order and says why. Ignored while stopping, because Stop is always
+     * available while something runs.
+     */
+    disabledReason?: string | undefined;
+    labels?: Partial<SendButtonLabels> | undefined;
+}
+/**
+ * A chat composer's send button, which becomes Stop while a request runs.
+ *
+ * ONE ELEMENT IN BOTH MODES, so the button a keyboard reader is on stays
+ * focused when the request starts or ends: it changes what it says ("Send",
+ * "Stop") and how it looks, never which element it is.
+ *
+ * SEND is the accent square (IconButton `primary`) with the arrow; STOP is the
+ * bordered square (IconButton `secondary`) with a filled square in the primary
+ * ink. Stop is quieter than Send on purpose: an inverse block was the loudest
+ * thing on the panel in dark mode, and Stop is a way out, not the decision.
+ * Inside a `Composer`'s `trailing` slot its corner nests in the composer's.
+ */
+export declare const SendButton: import("react").ForwardRefExoticComponent<SendButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/SendButton/index.d.ts

@@ -0,0 +1,2 @@
+export { SEND_BUTTON_LABELS, SendButton } from './SendButton.js';
+export type { SendButtonLabels, SendButtonMode, SendButtonProps } from './SendButton.js';

package/dist/SendButton/index.js

@@ -0,0 +1,4 @@
+export { SEND_BUTTON_LABELS, SendButton } from '../chunk-JILNCBBS.js';
+import '../chunk-2BQYODY3.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/SetupWizard/index.js

@@ -1,11 +1,12 @@
-export { SetupWizard } from '../chunk-WXWMHYKW.js';
-import '../chunk-LDGQIDIZ.js';
+export { SetupWizard } from '../chunk-D5OSP3KI.js';
+import '../chunk-CGT4R7LW.js';
 import '../chunk-DKB73KZI.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-OGXHZHRX.js';
-import '../chunk-FZVJDJFN.js';
+import '../chunk-GG4QZWMQ.js';
+import '../chunk-TFGCNBWP.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RTPQDNW3.js';
+import '../chunk-EA23JG6R.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ShareDialog/index.js

@@ -1,21 +1,22 @@
-export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-PGYIDNGG.js';
+export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-OOZ5AGPS.js';
 import '../chunk-XQZ6EWOE.js';
-import '../chunk-YCC2S7DF.js';
-import '../chunk-7KHM2FZH.js';
-import '../chunk-7SHAFLEX.js';
+import '../chunk-ES4HR34Y.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
+import '../chunk-QZ4B72FP.js';
+import '../chunk-7KHM2FZH.js';
 import '../chunk-BPCY7ZID.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RTPQDNW3.js';
+import '../chunk-HD4QJ2SI.js';
+import '../chunk-EA23JG6R.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SheetColumnEditor/index.js

@@ -1,28 +1,29 @@
-export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from '../chunk-J53T2QAH.js';
+export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from '../chunk-EBG3V4MK.js';
 import '../chunk-XQZ6EWOE.js';
 import '../chunk-FFMCMSJB.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-LFSIKGRQ.js';
 import '../chunk-Z7JYG5TF.js';
-import '../chunk-34RMTXDZ.js';
+import '../chunk-OYAXKHVW.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-6FVGSWLS.js';
-import '../chunk-ILFEWRLG.js';
+import '../chunk-AWSFK2IK.js';
+import '../chunk-I7VG6RQE.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
-import '../chunk-RQI43UJ7.js';
+import '../chunk-NHJQXDHA.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-LJHH4WWB.js';
+import '../chunk-FXQLNETQ.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
-import '../chunk-TMM32U7D.js';
+import '../chunk-TKS7FTTO.js';
+import '../chunk-HD4QJ2SI.js';
+import '../chunk-EA23JG6R.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SheetGrid/index.js

@@ -1,9 +1,9 @@
-export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-WXOYHVWG.js';
+export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-TD3UHDFY.js';
 import '../chunk-O2EGEONV.js';
 import '../chunk-CENOOTAV.js';
-import '../chunk-KYIAFNU7.js';
 import '../chunk-3BYIWOTV.js';
 import '../chunk-I6POAB4V.js';
+import '../chunk-KYIAFNU7.js';
 import '../chunk-66X5WDKE.js';
 import '../chunk-LFSIKGRQ.js';
 import '../chunk-Z7JYG5TF.js';
@@ -14,11 +14,12 @@ import '../chunk-WIATRXEJ.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-RSAQOKH3.js';
-import '../chunk-TMM32U7D.js';
+import '../chunk-TKS7FTTO.js';
+import '../chunk-HD4QJ2SI.js';
+import '../chunk-EA23JG6R.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SidePanel/SidePanel.d.ts

@@ -0,0 +1,137 @@
+import { type ReactNode, type Ref } from 'react';
+import { type SidePanelInitialFocus, type SidePanelShape } from './SidePanelBase.js';
+export type { SidePanelInitialFocus, SidePanelShape } from './SidePanelBase.js';
+/** The panel's resting width, in px, where the host names none. */
+export declare const SIDE_PANEL_WIDTH = 420;
+/** The narrowest a reader may drag it, in px. */
+export declare const SIDE_PANEL_MIN_WIDTH = 360;
+/** The widest, in px, before any cap the host applies so the content keeps its floor. */
+export declare const SIDE_PANEL_MAX_WIDTH = 640;
+export interface SidePanelLabels {
+    /** Names the close button: "Close the assistant". */
+    close: (title: string) => string;
+    /** Names the grip: "Resize the assistant panel". */
+    resize: (title: string) => string;
+}
+export declare const SIDE_PANEL_LABELS: SidePanelLabels;
+export interface SidePanelProps {
+    /** Names the panel; it is the panel's heading, level two. */
+    title: string;
+    /** A mark before the title: the product mark, the glyph of the control that opened it. */
+    icon?: ReactNode;
+    /** Draw the title for assistive technology only, where the icon says it. */
+    hideTitle?: boolean | undefined;
+    /** Closes the panel: its close button, and Escape from anywhere inside it. */
+    onClose: () => void;
+    /** Controls in the head, before Close: New conversation, a history menu. */
+    actions?: ReactNode;
+    /**
+     * What stays under the body however far it scrolls: a composer, a commit.
+     * Drawn on a hairline at the panel's foot, outside the scrolling body.
+     */
+    footer?: ReactNode;
+    /**
+     * Drops the body's inset, for content that owns its own edges: a
+     * `ChatThread`, which scrolls itself and insets its own items, so its
+     * scrollbar stands on the panel's edge and the inset is not drawn twice; or
+     * a table whose rules meet the panel's sides. `--crewlet-side-panel-inset`
+     * reads 0 inside the body, so a sticky foot that offsets itself by the
+     * inset still sits on the edge.
+     */
+    flush?: boolean | undefined;
+    /**
+     * The width, in px, in a `SidePanelFrame`. In the shell's aside the shell's
+     * track sizes the panel (`AppShell` `asideWidth`), and this is ignored.
+     */
+    width?: number | undefined;
+    /** The narrowest a drag or a key may take it. */
+    minWidth?: number | undefined;
+    /** The widest, already capped by the host so the content beside it keeps its floor. */
+    maxWidth?: number | undefined;
+    /** The resting width a reset (Enter on the grip, a double press) returns to. */
+    defaultWidth?: number | undefined;
+    /** Every change of width while a drag or a key moves it. */
+    onWidthChange?: ((width: number) => void) | undefined;
+    /** Where a resize ends: the moment to keep the reader's width. */
+    onWidthCommit?: ((width: number) => void) | undefined;
+    /**
+     * Draws the grip on the panel's start edge as a column or a drawer. In the
+     * shell's aside the shell draws the grip in its seam (`AppShell`
+     * `asideResize`), so this is ignored there.
+     */
+    resizable?: boolean | undefined;
+    /**
+     * Where focus goes on open: the heading (the default, so a screen reader
+     * announces what opened), nowhere (a panel a link opened on arrival must
+     * not take focus from the page), or a field of the panel's own, such as a
+     * composer. The heading takes focus without drawing a ring: it is not a
+     * control, and a ring round it reads as one.
+     */
+    initialFocus?: SidePanelInitialFocus | undefined;
+    labels?: Partial<SidePanelLabels> | undefined;
+    className?: string | undefined;
+    children: ReactNode;
+}
+/**
+ * A panel beside what the reader is working on: the assistant, a peek at a
+ * record, an artifact's details. Head, scrolling body, foot.
+ *
+ * A REGION, NOT A DIALOG, wherever the content beside it is still reachable:
+ * a complementary landmark named by its heading, which never traps focus, so
+ * the reader moves between the two with Tab as between any two parts of a
+ * page. Only as a `sheet`, where it covers everything, is it a modal dialog
+ * on the shared layer stack.
+ *
+ * FOCUS IS STILL MANAGED. Opening moves focus to the heading (or to
+ * `initialFocus`); closing with focus inside hands it back to whatever held
+ * it before, and leaves it alone otherwise. Escape closes it from anywhere
+ * inside, a field included, unless something inside answered the press
+ * first.
+ *
+ * IN THE SHELL'S ASIDE it is a box that fills the aside: the shell names the
+ * region, sizes the track and draws the grip in the seam, from the same
+ * width the host keeps for both.
+ */
+export declare function SidePanel({ title, icon, hideTitle, onClose, actions, footer, flush, width, minWidth, maxWidth, defaultWidth, onWidthChange, onWidthCommit, resizable, initialFocus, labels, className, children, }: SidePanelProps): import("react").JSX.Element;
+export interface SidePanelFrameProps {
+    /** The open panel, if any: a `SidePanel`. */
+    panel?: ReactNode;
+    /**
+     * Where the panel stands, decided by the host from its own arithmetic. Left
+     * out, the frame measures itself: a column where there is room for two, a
+     * drawer over the content's end below 960px, and the whole frame below
+     * 640px (still a region, since nothing told it the content is out of reach).
+     */
+    shape?: SidePanelShape | undefined;
+    /**
+     * The content's floor beside a column, in px: the panel is capped at what
+     * leaves the content this wide, so a width dragged in a wide frame never
+     * takes a narrower frame's content away.
+     */
+    reserve?: number | undefined;
+    /** Whether the open panel takes the whole frame. */
+    expanded?: boolean | undefined;
+    /** The content's own element: the one a caller scrolls, measures or listens on. */
+    bodyRef?: Ref<HTMLDivElement> | undefined;
+    bodyClassName?: string | undefined;
+    /** Names the content's region. */
+    bodyLabel?: string | undefined;
+    className?: string | undefined;
+    children: ReactNode;
+}
+/** A frame's own parts, with a preset's names beside them. */
+export interface SidePanelFrameBaseProps extends SidePanelFrameProps {
+    alias?: string | undefined;
+}
+/**
+ * The content and its one open side panel, side by side or one over the
+ * other. Not exported from the package; `SidePanelFrame` and
+ * `ArtifactWorkspace` are its two names.
+ */
+export declare function SidePanelFrameBase({ alias, panel, shape, reserve, expanded, bodyRef, bodyClassName, bodyLabel, className, children, }: SidePanelFrameBaseProps): import("react").JSX.Element;
+/**
+ * The content and its one open side panel: a column beside it, a drawer over
+ * its end edge, or a sheet over all of it, as the host decides (`shape`), or
+ * as the frame's own width decides where the host leaves it out.
+ */
+export declare function SidePanelFrame(props: SidePanelFrameProps): import("react").JSX.Element;

package/dist/SidePanel/SidePanelBase.d.ts

@@ -0,0 +1,59 @@
+/**
+ * The drawing and the behaviour every side panel shares: `SidePanel`, and
+ * `ArtifactPanel`, which is a preset of it.
+ *
+ * Not exported from the package. It carries the two things only a preset
+ * needs: `alias`, the block class a preset has always published (so a
+ * consumer's selectors on `crewlet-artifact-panel__body` keep matching), and
+ * `expanded`, the artifact's full-workspace view.
+ */
+import { type ReactNode, type RefObject } from 'react';
+/**
+ * Where a side panel stands, decided by its host.
+ *
+ * - `column`: beside the content, which narrows to make room; a complementary
+ *   region.
+ * - `drawer`: over the content's end edge, lifted off it, with no veil and no
+ *   trap: the content stays live and reachable.
+ * - `sheet`: the whole frame, on a phone; a modal dialog, because nothing else
+ *   is reachable.
+ */
+export type SidePanelShape = 'column' | 'drawer' | 'sheet';
+/** What a `SidePanelFrame` tells the panel inside it. Null where the frame measures (`shape` left out). */
+export declare const SidePanelFrameContext: import("react").Context<{
+    shape: SidePanelShape | null;
+} | null>;
+/** Where focus goes when the panel opens. */
+export type SidePanelInitialFocus = 'heading' | 'none' | RefObject<HTMLElement | null>;
+export interface SidePanelBaseProps {
+    /** A preset's own block class, added beside every part's class. */
+    alias?: string | undefined;
+    title: string;
+    icon?: ReactNode;
+    onClose: () => void;
+    closeLabel: string;
+    actions?: ReactNode;
+    footer?: ReactNode;
+    /** Whether the body drops its inset, for content that draws its own. */
+    flush?: boolean | undefined;
+    initialFocus?: SidePanelInitialFocus | undefined;
+    /** Whether the heading draws the focus ring when it holds focus. */
+    ringHeading?: boolean | undefined;
+    /** Whether the title is drawn, or only names the panel. */
+    hideTitle?: boolean | undefined;
+    expanded?: boolean | undefined;
+    onExpandedChange?: ((expanded: boolean) => void) | undefined;
+    expandLabel?: string | undefined;
+    collapseLabel?: string | undefined;
+    width?: number | undefined;
+    minWidth?: number | undefined;
+    maxWidth?: number | undefined;
+    defaultWidth?: number | undefined;
+    onWidthChange?: ((width: number) => void) | undefined;
+    onWidthCommit?: ((width: number) => void) | undefined;
+    resizable?: boolean | undefined;
+    resizeLabel?: string | undefined;
+    className?: string | undefined;
+    children: ReactNode;
+}
+export declare function SidePanelBase({ alias, title, icon, onClose, closeLabel, actions, footer, flush, initialFocus, ringHeading, hideTitle, expanded, onExpandedChange, expandLabel, collapseLabel, width, minWidth, maxWidth, defaultWidth, onWidthChange, onWidthCommit, resizable, resizeLabel, className, children, }: SidePanelBaseProps): import("react").JSX.Element;

package/dist/SidePanel/index.d.ts

@@ -0,0 +1,5 @@
+import '../HitArea/HitArea.css';
+import '../AppShell/ResizeHandle.css';
+import './SidePanel.css';
+export { SIDE_PANEL_LABELS, SIDE_PANEL_MAX_WIDTH, SIDE_PANEL_MIN_WIDTH, SIDE_PANEL_WIDTH, SidePanel, SidePanelFrame, } from './SidePanel.js';
+export type { SidePanelFrameProps, SidePanelInitialFocus, SidePanelLabels, SidePanelProps, SidePanelShape, } from './SidePanel.js';

package/dist/SidePanel/index.js

@@ -0,0 +1,11 @@
+import '../chunk-NVZCANJ5.js';
+export { SIDE_PANEL_LABELS, SIDE_PANEL_MAX_WIDTH, SIDE_PANEL_MIN_WIDTH, SIDE_PANEL_WIDTH, SidePanel, SidePanelFrame } from '../chunk-XODESBSR.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-PIYJNCN7.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-2YTOOH3A.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-2BQYODY3.js';
+import '../chunk-NUZHC6MM.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';