panelui-web 0.2.0 → 0.4.0

package/dist/components/command-dock/index.d.ts

@@ -8,7 +8,12 @@
  *   <CommandDock.Panel>
  *     <CommandDock.Input placeholder="What do you want to find?" />
  *     <CommandDock.Results>
- *       {rows.map((row) => <CommandDock.Row key={row.id}>{row.text}</CommandDock.Row>)}
+ *       {rows.map((row) => (
+ *         <CommandDock.Row key={row.id}>
+ *           <CommandDock.RowTitle>{row.title}</CommandDock.RowTitle>
+ *           <CommandDock.RowMeta>{row.where}</CommandDock.RowMeta>
+ *         </CommandDock.Row>
+ *       ))}
  *     </CommandDock.Results>
  *   </CommandDock.Panel>
  * </CommandDock>
@@ -99,6 +104,20 @@ declare function CommandDockRow({ className, onSelect, children, ...props }: Com
 declare namespace CommandDockRow {
     var displayName: string;
 }
+export interface CommandDockRowTitleProps extends ComponentProps<'span'> {
+}
+/** What a row is, in a line that takes the row's spare width and truncates. */
+declare function CommandDockRowTitle({ className, ...props }: CommandDockRowTitleProps): import("react").JSX.Element;
+declare namespace CommandDockRowTitle {
+    var displayName: string;
+}
+export interface CommandDockRowMetaProps extends ComponentProps<'span'> {
+}
+/** Something short at the end of a row, quieter than its title: a date, a place. */
+declare function CommandDockRowMeta({ className, ...props }: CommandDockRowMetaProps): import("react").JSX.Element;
+declare namespace CommandDockRowMeta {
+    var displayName: string;
+}
 export interface CommandDockStatusProps extends ComponentProps<'div'> {
     children?: ReactNode;
 }
@@ -113,6 +132,8 @@ export declare const CommandDock: typeof CommandDockRoot & {
     Input: typeof CommandDockInput;
     Results: typeof CommandDockResults;
     Row: typeof CommandDockRow;
+    RowTitle: typeof CommandDockRowTitle;
+    RowMeta: typeof CommandDockRowMeta;
     Status: typeof CommandDockStatus;
 };
-export { CommandDockTrigger, CommandDockPanel, CommandDockInput, CommandDockResults, CommandDockRow, CommandDockStatus, };
+export { CommandDockTrigger, CommandDockPanel, CommandDockInput, CommandDockResults, CommandDockRow, CommandDockRowTitle, CommandDockRowMeta, CommandDockStatus, };

package/dist/components/command-dock/index.js

@@ -10,7 +10,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *   <CommandDock.Panel>
  *     <CommandDock.Input placeholder="What do you want to find?" />
  *     <CommandDock.Results>
- *       {rows.map((row) => <CommandDock.Row key={row.id}>{row.text}</CommandDock.Row>)}
+ *       {rows.map((row) => (
+ *         <CommandDock.Row key={row.id}>
+ *           <CommandDock.RowTitle>{row.title}</CommandDock.RowTitle>
+ *           <CommandDock.RowMeta>{row.where}</CommandDock.RowMeta>
+ *         </CommandDock.Row>
+ *       ))}
  *     </CommandDock.Results>
  *   </CommandDock.Panel>
  * </CommandDock>
@@ -63,6 +68,9 @@ const commandDockVariants = tv({
         resultsClip: 'min-h-0 overflow-hidden',
         resultsInner: 'flex flex-col gap-0.5 border-t p-1.5',
         row: 'flex items-center gap-3 rounded-xl px-2.5 py-2 text-sm transition-[opacity,translate] duration-300 ease-out starting:translate-y-1.5 starting:opacity-0 motion-reduce:transition-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground',
+        // A row's subject takes the room and truncates; its meta keeps its width.
+        rowTitle: 'min-w-0 flex-1 truncate font-medium',
+        rowMeta: 'shrink-0 text-muted-foreground',
         status: 'flex items-center gap-2 px-2.5 py-2 text-sm text-muted-foreground',
         dots: 'flex gap-1',
         dot: 'size-1 animate-pulse rounded-full bg-muted-foreground',
@@ -220,6 +228,16 @@ function CommandDockRow({ className, onSelect, children, ...props }) {
     return (_jsx("div", { role: "listitem", ...props, children: onSelect ? (_jsx("button", { type: "button", onClick: onSelect, className: slots.row({ className: ['w-full text-start', className] }), children: children })) : (_jsx("div", { className: slots.row({ className }), children: children })) }));
 }
 CommandDockRow.displayName = 'CommandDock.Row';
+/** What a row is, in a line that takes the row's spare width and truncates. */
+function CommandDockRowTitle({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "command-dock-row-title", className: commandDockVariants().rowTitle({ className }), ...props }));
+}
+CommandDockRowTitle.displayName = 'CommandDock.RowTitle';
+/** Something short at the end of a row, quieter than its title: a date, a place. */
+function CommandDockRowMeta({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "command-dock-row-meta", className: commandDockVariants().rowMeta({ className }), ...props }));
+}
+CommandDockRowMeta.displayName = 'CommandDock.RowMeta';
 /** Shown under the rows while `busy`: three dots, and words if you give it some. */
 function CommandDockStatus({ className, children = 'Working', ...props }) {
     const slots = commandDockVariants();
@@ -232,8 +250,10 @@ export const CommandDock = Object.assign(CommandDockRoot, {
     Input: CommandDockInput,
     Results: CommandDockResults,
     Row: CommandDockRow,
+    RowTitle: CommandDockRowTitle,
+    RowMeta: CommandDockRowMeta,
     Status: CommandDockStatus,
 });
 /* By name as well, for a Server Component, which cannot dot into a client
    module. */
-export { CommandDockTrigger, CommandDockPanel, CommandDockInput, CommandDockResults, CommandDockRow, CommandDockStatus, };
+export { CommandDockTrigger, CommandDockPanel, CommandDockInput, CommandDockResults, CommandDockRow, CommandDockRowTitle, CommandDockRowMeta, CommandDockStatus, };

package/dist/components/day-grid/index.d.ts

@@ -81,7 +81,51 @@ declare function DayGridLegend({ color, less, more, className, ...props }: DayGr
 declare namespace DayGridLegend {
     var displayName: string;
 }
+export interface DayGridWeekdaysProps extends Omit<ComponentProps<'div'>, 'children'> {
+    /**
+     * The name written beside each row, first row first. An empty string leaves
+     * a row unnamed. Default Monday to Sunday with every other name left out.
+     */
+    labels?: string[];
+}
+/**
+ * The days of the week down the side of a grid that runs a week to a column.
+ * Put it beside the grid, in a row with it. Hidden from screen readers, which
+ * are given each day's own label.
+ */
+declare function DayGridWeekdays({ labels, className, style, ...props }: DayGridWeekdaysProps): import("react").JSX.Element;
+declare namespace DayGridWeekdays {
+    var displayName: string;
+}
+export interface DayGridCaptionProps extends ComponentProps<'div'> {
+}
+/**
+ * What the picked day holds, written out beside the grid: a `DayGrid.Title`
+ * over a `DayGrid.Description`. Read out politely each time the pick changes.
+ */
+declare function DayGridCaption({ className, ...props }: DayGridCaptionProps): import("react").JSX.Element;
+declare namespace DayGridCaption {
+    var displayName: string;
+}
+export interface DayGridTitleProps extends ComponentProps<'p'> {
+}
+/** The picked day's figure: "17 merged". */
+declare function DayGridTitle({ className, ...props }: DayGridTitleProps): import("react").JSX.Element;
+declare namespace DayGridTitle {
+    var displayName: string;
+}
+export interface DayGridDescriptionProps extends ComponentProps<'p'> {
+}
+/** The picked day's date, quieter, under its figure. */
+declare function DayGridDescription({ className, ...props }: DayGridDescriptionProps): import("react").JSX.Element;
+declare namespace DayGridDescription {
+    var displayName: string;
+}
 export declare const DayGrid: typeof DayGridRoot & {
     Legend: typeof DayGridLegend;
+    Weekdays: typeof DayGridWeekdays;
+    Caption: typeof DayGridCaption;
+    Title: typeof DayGridTitle;
+    Description: typeof DayGridDescription;
 };
-export { DayGridLegend };
+export { DayGridLegend, DayGridWeekdays, DayGridCaption, DayGridTitle, DayGridDescription };

package/dist/components/day-grid/index.js

@@ -46,6 +46,13 @@ const dayGridVariants = tv({
         dot: 'block size-full rounded-full [scale:calc(var(--pu-size)*(1+var(--pu-lens,0)*0.5)*var(--pu-in,1))] transition-[scale,box-shadow] duration-200 ease-[cubic-bezier(0.34,1.56,0.64,1)] motion-reduce:transition-none',
         tag: 'pointer-events-none absolute z-20 whitespace-nowrap rounded-lg bg-foreground px-2 py-1 text-xs font-medium text-background shadow-lg',
         legend: 'flex items-center gap-1.5 text-xs text-muted-foreground',
+        // One row per day, matching the grid's own rows, so each name sits level with its days.
+        weekdays: 'grid gap-1 text-xs leading-none text-muted-foreground',
+        weekday: 'flex items-center',
+        // The picked day, written out under the grid.
+        caption: 'flex flex-col gap-0.5',
+        title: 'text-sm font-medium',
+        description: 'text-sm text-muted-foreground',
         swatch: 'flex size-4 items-center justify-center',
     },
     variants: {
@@ -243,9 +250,41 @@ function DayGridLegend({ color = 'primary', less = 'Less', more = 'More', classN
     return (_jsxs("div", { className: slots.legend({ className }), ...props, children: [_jsx("span", { children: less }), LEVELS.map((level) => (_jsx("span", { "aria-hidden": "true", className: slots.swatch(), children: _jsx("span", { className: dayGridVariants({ level }).dot({ className: 'shadow-none' }) }) }, level))), _jsx("span", { children: more })] }));
 }
 DayGridLegend.displayName = 'DayGrid.Legend';
+/**
+ * The days of the week down the side of a grid that runs a week to a column.
+ * Put it beside the grid, in a row with it. Hidden from screen readers, which
+ * are given each day's own label.
+ */
+function DayGridWeekdays({ labels = ['Mon', '', 'Wed', '', 'Fri', '', 'Sun'], className, style, ...props }) {
+    const slots = dayGridVariants();
+    return (_jsx("div", { "aria-hidden": "true", "data-slot": "day-grid-weekdays", className: slots.weekdays({ className }), style: { gridTemplateRows: `repeat(${labels.length}, minmax(0, 1fr))`, ...style }, ...props, children: labels.map((day, index) => (_jsx("span", { className: slots.weekday(), children: day }, index))) }));
+}
+DayGridWeekdays.displayName = 'DayGrid.Weekdays';
+/**
+ * What the picked day holds, written out beside the grid: a `DayGrid.Title`
+ * over a `DayGrid.Description`. Read out politely each time the pick changes.
+ */
+function DayGridCaption({ className, ...props }) {
+    return (_jsx("div", { "aria-live": "polite", "data-slot": "day-grid-caption", className: dayGridVariants().caption({ className }), ...props }));
+}
+DayGridCaption.displayName = 'DayGrid.Caption';
+/** The picked day's figure: "17 merged". */
+function DayGridTitle({ className, ...props }) {
+    return _jsx("p", { "data-slot": "day-grid-title", className: dayGridVariants().title({ className }), ...props });
+}
+DayGridTitle.displayName = 'DayGrid.Title';
+/** The picked day's date, quieter, under its figure. */
+function DayGridDescription({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "day-grid-description", className: dayGridVariants().description({ className }), ...props }));
+}
+DayGridDescription.displayName = 'DayGrid.Description';
 export const DayGrid = Object.assign(DayGridRoot, {
     Legend: DayGridLegend,
+    Weekdays: DayGridWeekdays,
+    Caption: DayGridCaption,
+    Title: DayGridTitle,
+    Description: DayGridDescription,
 });
 /* By name as well, for a Server Component, which cannot dot into a client
    module. */
-export { DayGridLegend };
+export { DayGridLegend, DayGridWeekdays, DayGridCaption, DayGridTitle, DayGridDescription };

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

@@ -95,6 +95,52 @@ declare function FeedbackField({ value, onValueChange, minHeight, maxHeight, cla
 declare namespace FeedbackField {
     var displayName: string;
 }
+export interface FeedbackDescriptionProps extends ComponentProps<'p'> {
+}
+/**
+ * Body text in the panel, in place of the field: a thank-you once the message
+ * has gone. In a dialog it is also what the dialog is described as.
+ */
+declare function FeedbackDescription({ className, ...props }: FeedbackDescriptionProps): import("react").JSX.Element;
+declare namespace FeedbackDescription {
+    var displayName: string;
+}
+export interface FeedbackMessageProps extends ComponentProps<'p'> {
+    /**
+     * `muted` for a running note, read out politely as it changes: how much is
+     * left to write. `destructive` for a failure, announced at once. Default
+     * `muted`.
+     */
+    tone?: 'muted' | 'destructive';
+}
+/** A short line under the field. Figures in it keep their width as they change. */
+declare function FeedbackMessage({ tone, className, ...props }: FeedbackMessageProps): import("react").JSX.Element;
+declare namespace FeedbackMessage {
+    var displayName: string;
+}
+export interface FeedbackRatingProps extends Omit<ComponentProps<'div'>, 'children'> {
+    /** The highest score. The scores run from 1 to this. Default 5. */
+    max?: number;
+    /** Called with the score that was pressed. */
+    onValueChange?: (value: number) => void;
+    /** The word under the lowest score. */
+    startLabel?: ReactNode;
+    /** The word under the highest score. */
+    endLabel?: ReactNode;
+    /**
+     * The least height it takes, in pixels. Match the field's `minHeight` on the
+     * step that follows, so the dialog keeps its size between the two.
+     */
+    minHeight?: number;
+}
+/**
+ * A row of round buttons, one per score, with a word under each end. Use it
+ * as the first step of a dialog, and ask for the words once a score is in.
+ */
+declare function FeedbackRating({ max, onValueChange, startLabel, endLabel, minHeight, className, style, ...props }: FeedbackRatingProps): import("react").JSX.Element;
+declare namespace FeedbackRating {
+    var displayName: string;
+}
 export interface FeedbackFooterProps extends ComponentProps<'div'> {
 }
 /** The action row, in the band under the panel. */
@@ -128,8 +174,11 @@ export declare const Feedback: typeof FeedbackRoot & {
     Title: typeof FeedbackTitle;
     Close: typeof FeedbackClose;
     Field: typeof FeedbackField;
+    Description: typeof FeedbackDescription;
+    Message: typeof FeedbackMessage;
+    Rating: typeof FeedbackRating;
     Footer: typeof FeedbackFooter;
     Cancel: typeof FeedbackCancel;
     Submit: typeof FeedbackSubmit;
 };
-export { FeedbackTrigger, FeedbackContent, FeedbackPanel, FeedbackTitle, FeedbackClose, FeedbackField, FeedbackFooter, FeedbackCancel, FeedbackSubmit, };
+export { FeedbackTrigger, FeedbackContent, FeedbackPanel, FeedbackTitle, FeedbackClose, FeedbackField, FeedbackDescription, FeedbackMessage, FeedbackRating, FeedbackFooter, FeedbackCancel, FeedbackSubmit, };

package/dist/components/feedback/index.js

@@ -84,6 +84,14 @@ const feedbackVariants = tv({
         // over the ends of its lines.
         scrollbar: 'my-1 -me-3.5 flex w-1.5 opacity-0 transition-opacity delay-300 data-hovering:opacity-100 data-hovering:delay-0 data-hovering:duration-100 data-scrolling:opacity-100 data-scrolling:delay-0 data-scrolling:duration-100',
         thumb: 'relative flex-1 rounded-full bg-foreground/20',
+        // Body text in the well, set like what is written in the field.
+        description: 'text-[17px] leading-6 text-muted-foreground',
+        // A line under the field: how much is left to write, or what went wrong.
+        message: 'text-sm tabular-nums',
+        rating: 'flex flex-col justify-center gap-3',
+        ratingScores: 'flex justify-between gap-2',
+        ratingScore: 'flex size-12 cursor-pointer items-center justify-center rounded-full bg-foreground/10 text-lg font-semibold transition-colors hover:bg-primary hover:text-primary-foreground',
+        ratingEnds: 'flex justify-between text-sm text-muted-foreground',
         // Held in from the shell's edge further than the panel is. A row the full
         // width would read as a third edge of the dialog, not as two buttons.
         footer: 'flex items-center gap-3.5 px-[18px] pb-2.5 pt-4',
@@ -102,6 +110,10 @@ const feedbackVariants = tv({
         disabled: {
             true: { action: 'cursor-not-allowed active:scale-100' },
         },
+        messageTone: {
+            muted: { message: 'text-muted-foreground' },
+            destructive: { message: 'text-destructive' },
+        },
     },
     compoundVariants: [
         // Fainter than Cancel's own tint on purpose. Matched, they would read as
@@ -233,6 +245,33 @@ function FeedbackField({ value, onValueChange, minHeight = 200, maxHeight = 360,
                         }, onKeyDown: handleKeyDown, className: slots.field({ className }), style: { minHeight, ...style }, ...props }) }) }), _jsx(ScrollArea.Scrollbar, { orientation: "vertical", className: slots.scrollbar(), children: _jsx(ScrollArea.Thumb, { className: slots.thumb() }) })] }));
 }
 FeedbackField.displayName = 'Feedback.Field';
+/**
+ * Body text in the panel, in place of the field: a thank-you once the message
+ * has gone. In a dialog it is also what the dialog is described as.
+ */
+function FeedbackDescription({ className, ...props }) {
+    const { inline } = useFeedback('Feedback.Description');
+    const slots = feedbackVariants();
+    if (inline)
+        return _jsx("p", { className: slots.description({ className }), ...props });
+    return _jsx(Dialog.Description, { className: slots.description({ className }), ...props });
+}
+FeedbackDescription.displayName = 'Feedback.Description';
+/** A short line under the field. Figures in it keep their width as they change. */
+function FeedbackMessage({ tone = 'muted', className, ...props }) {
+    const slots = feedbackVariants({ messageTone: tone });
+    return (_jsx("p", { role: tone === 'destructive' ? 'alert' : undefined, "aria-live": tone === 'destructive' ? undefined : 'polite', className: slots.message({ className }), ...props }));
+}
+FeedbackMessage.displayName = 'Feedback.Message';
+/**
+ * A row of round buttons, one per score, with a word under each end. Use it
+ * as the first step of a dialog, and ask for the words once a score is in.
+ */
+function FeedbackRating({ max = 5, onValueChange, startLabel, endLabel, minHeight, className, style, ...props }) {
+    const slots = feedbackVariants();
+    return (_jsxs("div", { className: slots.rating({ className }), style: { minHeight, ...style }, ...props, children: [_jsx("div", { className: slots.ratingScores(), children: Array.from({ length: max }, (_, index) => index + 1).map((value) => (_jsx("button", { type: "button", "aria-label": `${value} out of ${max}`, onClick: () => onValueChange?.(value), className: slots.ratingScore(), children: value }, value))) }), startLabel !== undefined || endLabel !== undefined ? (_jsxs("div", { className: slots.ratingEnds(), children: [_jsx("span", { children: startLabel }), _jsx("span", { children: endLabel })] })) : null] }));
+}
+FeedbackRating.displayName = 'Feedback.Rating';
 /** The action row, in the band under the panel. */
 function FeedbackFooter({ className, ...props }) {
     const slots = feedbackVariants();
@@ -274,10 +313,13 @@ export const Feedback = Object.assign(FeedbackRoot, {
     Title: FeedbackTitle,
     Close: FeedbackClose,
     Field: FeedbackField,
+    Description: FeedbackDescription,
+    Message: FeedbackMessage,
+    Rating: FeedbackRating,
     Footer: FeedbackFooter,
     Cancel: FeedbackCancel,
     Submit: FeedbackSubmit,
 });
 /* The parts by name, for a Server Component, which cannot dot into a client
    module. `<FeedbackContent>` there is `<Feedback.Content>` everywhere else. */
-export { FeedbackTrigger, FeedbackContent, FeedbackPanel, FeedbackTitle, FeedbackClose, FeedbackField, FeedbackFooter, FeedbackCancel, FeedbackSubmit, };
+export { FeedbackTrigger, FeedbackContent, FeedbackPanel, FeedbackTitle, FeedbackClose, FeedbackField, FeedbackDescription, FeedbackMessage, FeedbackRating, FeedbackFooter, FeedbackCancel, FeedbackSubmit, };

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

@@ -4,7 +4,12 @@
  * ```tsx
  * <Flow>
  *   <Flow.Background variant="dots" />
- *   <Flow.Node id="source" position={{ x: 24, y: 40 }}>…</Flow.Node>
+ *   <Flow.Node id="source" position={{ x: 24, y: 40 }}>
+ *     <Flow.NodeContent>
+ *       <Flow.NodeTitle>Source</Flow.NodeTitle>
+ *       <Flow.NodeDescription>main</Flow.NodeDescription>
+ *     </Flow.NodeContent>
+ *   </Flow.Node>
  *   <Flow.Node id="build" position={{ x: 24, y: 200 }}>…</Flow.Node>
  *   <Flow.Edge from="source" to="build" dashed animated arrow />
  *   <Flow.Controls />
@@ -128,7 +133,7 @@ export interface FlowNodeProps extends Omit<ComponentProps<'div'>, 'id'> {
     /** How far one arrow key press moves it, in pixels. Shift moves four times as far. */
     moveStep?: number;
 }
-/** A box on the graph. Whatever is inside it is yours. */
+/** A box on the graph. Fill it with the node parts below, or with anything of your own. */
 declare function FlowNode({ id, position, draggable, selected, onPress, onDelete, moveStep, className, style, children, ...props }: FlowNodeProps): import("react").JSX.Element;
 declare namespace FlowNode {
     var displayName: string;
@@ -145,6 +150,53 @@ declare function FlowGroup({ id, position, draggable, selected: _selected, onPre
 declare namespace FlowGroup {
     var displayName: string;
 }
+export interface FlowNodeHeaderProps extends ComponentProps<'div'> {
+}
+/** A strip across the top of a node, ruled off from the rest: a step number and a state. */
+declare function FlowNodeHeader({ className, ...props }: FlowNodeHeaderProps): import("react").JSX.Element;
+declare namespace FlowNodeHeader {
+    var displayName: string;
+}
+export interface FlowNodeContentProps extends ComponentProps<'div'> {
+}
+/** The body of a node, with the node's padding: a title over a description. */
+declare function FlowNodeContent({ className, ...props }: FlowNodeContentProps): import("react").JSX.Element;
+declare namespace FlowNodeContent {
+    var displayName: string;
+}
+export interface FlowNodeTitleProps extends ComponentProps<'p'> {
+}
+/** What the node is. */
+declare function FlowNodeTitle({ className, ...props }: FlowNodeTitleProps): import("react").JSX.Element;
+declare namespace FlowNodeTitle {
+    var displayName: string;
+}
+export interface FlowNodeDescriptionProps extends ComponentProps<'p'> {
+}
+/** A quieter line about the node. Smaller inside a `Flow.GroupItem`. */
+declare function FlowNodeDescription({ className, ...props }: FlowNodeDescriptionProps): import("react").JSX.Element;
+declare namespace FlowNodeDescription {
+    var displayName: string;
+}
+export interface FlowNodeBadgeProps extends Omit<ComponentProps<'span'>, 'color'> {
+    /** Which of the theme's roles it is tinted with. `muted` is grey. Default `muted`. */
+    color?: FlowColor | 'muted';
+}
+/** A word in a pill, for a node's state: done, now, waiting. */
+declare function FlowNodeBadge({ color, className, ...props }: FlowNodeBadgeProps): import("react").JSX.Element;
+declare namespace FlowNodeBadge {
+    var displayName: string;
+}
+export interface FlowGroupItemProps extends ComponentProps<'div'> {
+}
+/**
+ * One thing inside a `Flow.Group` that is not a node of its own: an icon
+ * beside a `Flow.NodeContent`. It moves with the group and edges cannot join it.
+ */
+declare function FlowGroupItem({ className, ...props }: FlowGroupItemProps): import("react").JSX.Element;
+declare namespace FlowGroupItem {
+    var displayName: string;
+}
 export interface FlowHandleProps extends Omit<ComponentProps<'span'>, 'id'> {
     /** A name for this handle, so an edge can be joined to it and not only to the node. */
     id?: string;
@@ -228,8 +280,14 @@ export declare const Flow: typeof FlowRoot & {
     Handle: typeof FlowHandle;
     Edge: typeof FlowEdge;
     Group: typeof FlowGroup;
+    GroupItem: typeof FlowGroupItem;
+    NodeHeader: typeof FlowNodeHeader;
+    NodeContent: typeof FlowNodeContent;
+    NodeTitle: typeof FlowNodeTitle;
+    NodeDescription: typeof FlowNodeDescription;
+    NodeBadge: typeof FlowNodeBadge;
     Controls: typeof FlowControls;
     MiniMap: typeof FlowMiniMap;
 };
-export { FlowBackground, FlowNode, FlowHandle, FlowEdge, FlowGroup, FlowControls, FlowMiniMap };
+export { FlowBackground, FlowNode, FlowHandle, FlowEdge, FlowGroup, FlowGroupItem, FlowNodeHeader, FlowNodeContent, FlowNodeTitle, FlowNodeDescription, FlowNodeBadge, FlowControls, FlowMiniMap, };
 export type { FlowSide, FlowRect, FlowPoint };

package/dist/components/flow/index.js

@@ -6,7 +6,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * ```tsx
  * <Flow>
  *   <Flow.Background variant="dots" />
- *   <Flow.Node id="source" position={{ x: 24, y: 40 }}>…</Flow.Node>
+ *   <Flow.Node id="source" position={{ x: 24, y: 40 }}>
+ *     <Flow.NodeContent>
+ *       <Flow.NodeTitle>Source</Flow.NodeTitle>
+ *       <Flow.NodeDescription>main</Flow.NodeDescription>
+ *     </Flow.NodeContent>
+ *   </Flow.Node>
  *   <Flow.Node id="build" position={{ x: 24, y: 200 }}>…</Flow.Node>
  *   <Flow.Edge from="source" to="build" dashed animated arrow />
  *   <Flow.Controls />
@@ -50,6 +55,15 @@ const flowVariants = tv({
         node: 'absolute left-0 top-0 z-10 cursor-grab rounded-2xl border bg-card text-card-foreground shadow-sm outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing',
         group: 'absolute left-0 top-0 cursor-grab rounded-3xl border border-dashed bg-muted/40 p-3 pt-8 outline-none focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing',
         groupLabel: 'absolute start-4 top-2.5 text-xs font-medium uppercase tracking-wider text-muted-foreground',
+        // What goes inside a node. The padding is on the parts, so a header can
+        // draw its rule from edge to edge.
+        nodeHeader: 'flex items-center justify-between gap-3 border-b px-4 py-2.5',
+        // Inside a group item the item already has its padding.
+        nodeContent: 'px-4 py-3 in-data-[slot=flow-group-item]:p-0',
+        nodeTitle: 'text-sm font-medium',
+        nodeDescription: 'text-sm text-muted-foreground in-data-[slot=flow-group-item]:text-xs',
+        nodeBadge: 'rounded-full bg-[color-mix(in_oklab,var(--pu-color)_14%,transparent)] px-2 py-0.5 text-xs font-medium text-[var(--pu-color)]',
+        groupItem: 'flex items-center gap-3 rounded-xl border bg-card px-3 py-2.5 [&_svg]:size-4 [&_svg]:text-muted-foreground',
         handle: 'absolute z-20 size-3 -translate-x-1/2 -translate-y-1/2 cursor-crosshair rounded-full border-2 border-background bg-muted-foreground outline-none transition-[scale,background-color] hover:scale-150 hover:bg-foreground focus-visible:ring-2 focus-visible:ring-ring',
         edge: 'pointer-events-none absolute left-0 top-0 size-px overflow-visible text-[var(--pu-color)]',
         controls: 'absolute flex flex-col divide-y divide-border overflow-hidden rounded-xl border bg-card text-card-foreground shadow-sm',
@@ -58,13 +72,16 @@ const flowVariants = tv({
     },
     variants: {
         color: {
-            primary: { edge: '[--pu-color:var(--primary)]' },
-            info: { edge: '[--pu-color:var(--info)]' },
-            success: { edge: '[--pu-color:var(--success)]' },
-            warning: { edge: '[--pu-color:var(--warning)]' },
-            destructive: { edge: '[--pu-color:var(--destructive)]' },
+            primary: { edge: '[--pu-color:var(--primary)]', nodeBadge: '[--pu-color:var(--primary)]' },
+            info: { edge: '[--pu-color:var(--info)]', nodeBadge: '[--pu-color:var(--info)]' },
+            success: { edge: '[--pu-color:var(--success)]', nodeBadge: '[--pu-color:var(--success)]' },
+            warning: { edge: '[--pu-color:var(--warning)]', nodeBadge: '[--pu-color:var(--warning)]' },
+            destructive: { edge: '[--pu-color:var(--destructive)]', nodeBadge: '[--pu-color:var(--destructive)]' },
             // The colour of a hairline that is meant to be seen but not looked at.
-            muted: { edge: '[--pu-color:var(--muted-foreground)]' },
+            muted: {
+                edge: '[--pu-color:var(--muted-foreground)]',
+                nodeBadge: 'bg-muted text-muted-foreground',
+            },
         },
         selected: { true: { node: 'z-20 ring-2 ring-ring' } },
         position: {
@@ -474,7 +491,7 @@ function useMovable({ id, position, draggable, onPress, onDelete, moveStep, }) {
         },
     };
 }
-/** A box on the graph. Whatever is inside it is yours. */
+/** A box on the graph. Fill it with the node parts below, or with anything of your own. */
 function FlowNode({ id, position, draggable = true, selected = false, onPress, onDelete, moveStep, className, style, children, ...props }) {
     const movable = useMovable({ id, position, draggable, onPress, onDelete, moveStep });
     return (_jsx(NodeContext.Provider, { value: id, children: _jsx("div", { ref: movable.element, "data-flow-node": id, tabIndex: 0, "aria-roledescription": "Node", "aria-selected": selected || undefined, className: flowVariants({ selected }).node({ className }), style: { ...movable.style, ...style }, ...movable.handlers, ...props, children: children }) }));
@@ -489,6 +506,39 @@ function FlowGroup({ id, position, draggable = true, selected: _selected, onPres
     return (_jsx(NodeContext.Provider, { value: id, children: _jsxs("div", { ref: movable.element, "data-flow-node": id, tabIndex: 0, "aria-roledescription": "Group", className: flowVariants().group({ className }), style: { ...movable.style, ...style }, ...movable.handlers, ...props, children: [label !== undefined ? _jsx("span", { className: flowVariants().groupLabel(), children: label }) : null, children] }) }));
 }
 FlowGroup.displayName = 'Flow.Group';
+/** A strip across the top of a node, ruled off from the rest: a step number and a state. */
+function FlowNodeHeader({ className, ...props }) {
+    return _jsx("div", { "data-slot": "flow-node-header", className: flowVariants().nodeHeader({ className }), ...props });
+}
+FlowNodeHeader.displayName = 'Flow.NodeHeader';
+/** The body of a node, with the node's padding: a title over a description. */
+function FlowNodeContent({ className, ...props }) {
+    return _jsx("div", { "data-slot": "flow-node-content", className: flowVariants().nodeContent({ className }), ...props });
+}
+FlowNodeContent.displayName = 'Flow.NodeContent';
+/** What the node is. */
+function FlowNodeTitle({ className, ...props }) {
+    return _jsx("p", { "data-slot": "flow-node-title", className: flowVariants().nodeTitle({ className }), ...props });
+}
+FlowNodeTitle.displayName = 'Flow.NodeTitle';
+/** A quieter line about the node. Smaller inside a `Flow.GroupItem`. */
+function FlowNodeDescription({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "flow-node-description", className: flowVariants().nodeDescription({ className }), ...props }));
+}
+FlowNodeDescription.displayName = 'Flow.NodeDescription';
+/** A word in a pill, for a node's state: done, now, waiting. */
+function FlowNodeBadge({ color = 'muted', className, ...props }) {
+    return (_jsx("span", { "data-slot": "flow-node-badge", className: flowVariants({ color }).nodeBadge({ className }), ...props }));
+}
+FlowNodeBadge.displayName = 'Flow.NodeBadge';
+/**
+ * One thing inside a `Flow.Group` that is not a node of its own: an icon
+ * beside a `Flow.NodeContent`. It moves with the group and edges cannot join it.
+ */
+function FlowGroupItem({ className, ...props }) {
+    return _jsx("div", { "data-slot": "flow-group-item", className: flowVariants().groupItem({ className }), ...props });
+}
+FlowGroupItem.displayName = 'Flow.GroupItem';
 const SIDE_STYLE = {
     top: (offset) => ({ left: `${offset * 100}%`, top: '0%' }),
     bottom: (offset) => ({ left: `${offset * 100}%`, top: '100%' }),
@@ -589,9 +639,15 @@ export const Flow = Object.assign(FlowRoot, {
     Handle: FlowHandle,
     Edge: FlowEdge,
     Group: FlowGroup,
+    GroupItem: FlowGroupItem,
+    NodeHeader: FlowNodeHeader,
+    NodeContent: FlowNodeContent,
+    NodeTitle: FlowNodeTitle,
+    NodeDescription: FlowNodeDescription,
+    NodeBadge: FlowNodeBadge,
     Controls: FlowControls,
     MiniMap: FlowMiniMap,
 });
 /* By name as well, for a Server Component, which cannot dot into a client
    module. */
-export { FlowBackground, FlowNode, FlowHandle, FlowEdge, FlowGroup, FlowControls, FlowMiniMap };
+export { FlowBackground, FlowNode, FlowHandle, FlowEdge, FlowGroup, FlowGroupItem, FlowNodeHeader, FlowNodeContent, FlowNodeTitle, FlowNodeDescription, FlowNodeBadge, FlowControls, FlowMiniMap, };

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

@@ -44,8 +44,9 @@
  * ## Rows divide themselves
  *
  * The panel draws the hairline between its children, so no row has to know
- * whether it is first. A row with `href` is a link and one with `onClick` is a
- * button, each with the hover and focus a pressable row should have, and
+ * whether it is first. Under `band` it draws none: a figure and its chart are
+ * one thing, not two rows. A row with `href` is a link and one with `onClick`
+ * is a button, each with the hover and focus a pressable row should have, and
  * `chevron` marks one that leads somewhere.
  *
  * ## It renders on the server
@@ -58,7 +59,8 @@ export type FrameVariant = 'default' | 'band' | 'inset' | 'plain';
 export interface FrameProps extends ComponentProps<'div'> {
     /**
      * `default` sets the panel in a tray. `band` holds a bordered card in a
-     * thin muted band, for a widget showing one figure or chart. `inset` floats
+     * thin muted band, for a widget showing one figure or chart, and its panel
+     * draws no rule between its children. `inset` floats
      * the panel in a recessed band and gives `Frame.Footer` somewhere to sit.
      * `plain` drops the shell, for a frame inside a container that already draws
      * its own edge.
@@ -104,7 +106,7 @@ declare namespace FrameAction {
 }
 export interface FramePanelProps extends ComponentProps<'div'> {
 }
-/** The card the rows sit on. It draws the hairline between its children. */
+/** The card the rows sit on. It draws the hairline between its children, except under `band`. */
 declare function FramePanel({ className, ...props }: FramePanelProps): import("react").JSX.Element;
 declare namespace FramePanel {
     var displayName: string;

package/dist/components/frame/index.js

@@ -9,8 +9,11 @@ const frameVariants = tv({
     slots: {
         root: 'group/frame flex flex-col text-foreground',
         header: [
-            'grid grid-cols-[minmax(0,1fr)] items-center gap-x-3 gap-y-0.5 px-4 pt-2.5 pb-3',
+            'grid grid-cols-[minmax(0,1fr)] items-center gap-x-3 px-4 pt-2.5 pb-3',
             'has-data-[slot=frame-action]:grid-cols-[minmax(0,1fr)_auto]',
+            // The action spans two rows, so with no description the second is empty
+            // and a gap under the title would only add height.
+            'has-data-[slot=frame-description]:gap-y-0.5',
             'group-data-[variant=inset]/frame:px-3 group-data-[variant=inset]/frame:pt-1 group-data-[variant=inset]/frame:pb-2.5',
             'group-data-[variant=plain]/frame:px-1',
             'group-data-[variant=band]/frame:px-3.5 group-data-[variant=band]/frame:py-2.5',
@@ -32,6 +35,8 @@ const frameVariants = tv({
         // The panel's shape follows the root's variant, read from its data attribute.
         panel: [
             'flex flex-col divide-y overflow-hidden bg-card text-card-foreground',
+            // A band holds one figure, not a list of rows, so nothing in it is ruled off.
+            'group-data-[variant=band]/frame:divide-y-0',
             'group-data-[variant=default]/frame:rounded-t-2xl group-data-[variant=default]/frame:border-t',
             'group-data-[variant=plain]/frame:rounded-3xl group-data-[variant=plain]/frame:border group-data-[variant=plain]/frame:shadow-xs',
             'group-data-[variant=inset]/frame:rounded-[30px] group-data-[variant=inset]/frame:bg-popover group-data-[variant=inset]/frame:text-popover-foreground group-data-[variant=inset]/frame:shadow-xs',
@@ -109,7 +114,7 @@ function FrameAction({ className, ...props }) {
     return _jsx("div", { "data-slot": "frame-action", className: frameVariants().action({ className }), ...props });
 }
 FrameAction.displayName = 'Frame.Action';
-/** The card the rows sit on. It draws the hairline between its children. */
+/** The card the rows sit on. It draws the hairline between its children, except under `band`. */
 function FramePanel({ className, ...props }) {
     return _jsx("div", { "data-slot": "frame-panel", className: frameVariants().panel({ className }), ...props });
 }

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

@@ -187,9 +187,11 @@ declare namespace KpiSeparator {
 export interface KpiGroupProps extends ComponentProps<'div'> {
     /** Side by side with upright rules, or stacked with level ones. */
     orientation?: 'horizontal' | 'vertical';
+    /** Draws the group as a card of its own, for a group not already inside one. */
+    surface?: boolean;
 }
 /** Several metrics as one panel, with a rule between each and the next. */
-declare function KpiGroup({ orientation, className, ...props }: KpiGroupProps): import("react").JSX.Element;
+declare function KpiGroup({ orientation, surface, className, ...props }: KpiGroupProps): import("react").JSX.Element;
 declare namespace KpiGroup {
     var displayName: string;
 }