panelui-web 0.1.0 → 0.3.0

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

@@ -0,0 +1,107 @@
+/**
+ * Card — a surface that holds one thing: a plan, a setting, a summary.
+ *
+ * ```tsx
+ * <Card>
+ *   <Card.Header>
+ *     <Card.Title>Storage</Card.Title>
+ *     <Card.Description>Northwind Studio workspace</Card.Description>
+ *     <Card.Action><Button variant="ghost">Manage</Button></Card.Action>
+ *   </Card.Header>
+ *   <Card.Content>…</Card.Content>
+ *   <Card.Footer variant="panel">…</Card.Footer>
+ * </Card>
+ * ```
+ *
+ * ## The padding is on the parts
+ *
+ * The card itself draws a surface and nothing inside it, and every part
+ * carries its own padding. That is what lets a picture reach the card's
+ * corners with nothing but `overflow-hidden` on the card, and what lets a
+ * footer be a band set into the bottom of it rather than one more row.
+ *
+ * ## The action sits beside the heading
+ *
+ * `Card.Action` is placed in the header's top trailing corner whatever order
+ * it is written in, and the title and description keep the rest of the width.
+ * A button that belongs to the whole card goes there; one that belongs to the
+ * content goes in the content.
+ *
+ * ## It renders on the server
+ *
+ * No state, no effects, no handlers of its own: everything that changes with
+ * `size` or with the parts present is done in CSS, so a page of cards costs no
+ * JavaScript.
+ */
+import type { ComponentProps } from 'react';
+export interface CardProps extends ComponentProps<'div'> {
+    /** `sm` tightens the padding and the title, for a card in a dense grid. Default `default`. */
+    size?: 'default' | 'sm';
+    /**
+     * The element to render. `article` for a card that stands on its own, `li`
+     * for one in a list, `section` for one that groups a part of a page.
+     */
+    as?: 'div' | 'article' | 'section' | 'li';
+}
+declare function CardRoot({ size, as: Element, className, ...props }: CardProps): import("react").JSX.Element;
+declare namespace CardRoot {
+    var displayName: string;
+}
+export interface CardHeaderProps extends ComponentProps<'div'> {
+}
+/** The title, the line under it, and the action beside them. */
+declare function CardHeader({ className, ...props }: CardHeaderProps): import("react").JSX.Element;
+declare namespace CardHeader {
+    var displayName: string;
+}
+export interface CardTitleProps extends ComponentProps<'h3'> {
+    /** The heading level, to fit the page around the card. Default `h3`. */
+    as?: 'h2' | 'h3' | 'h4' | 'div';
+}
+/** What the card is about. A heading, so the page outline includes it. */
+declare function CardTitle({ as: Element, className, ...props }: CardTitleProps): import("react").JSX.Element;
+declare namespace CardTitle {
+    var displayName: string;
+}
+export interface CardDescriptionProps extends ComponentProps<'p'> {
+}
+/** A line under the title. */
+declare function CardDescription({ className, ...props }: CardDescriptionProps): import("react").JSX.Element;
+declare namespace CardDescription {
+    var displayName: string;
+}
+export interface CardActionProps extends ComponentProps<'div'> {
+}
+/** A control for the whole card, held in the header's top trailing corner. */
+declare function CardAction({ className, ...props }: CardActionProps): import("react").JSX.Element;
+declare namespace CardAction {
+    var displayName: string;
+}
+export interface CardContentProps extends ComponentProps<'div'> {
+}
+/** The body. */
+declare function CardContent({ className, ...props }: CardContentProps): import("react").JSX.Element;
+declare namespace CardContent {
+    var displayName: string;
+}
+export interface CardFooterProps extends ComponentProps<'div'> {
+    /**
+     * `plain` continues the card. `panel` is a darker band set into its bottom,
+     * for actions. Default `plain`.
+     */
+    variant?: 'plain' | 'panel';
+}
+/** The row at the bottom, usually the card's actions. */
+declare function CardFooter({ variant, className, ...props }: CardFooterProps): import("react").JSX.Element;
+declare namespace CardFooter {
+    var displayName: string;
+}
+export declare const Card: typeof CardRoot & {
+    Header: typeof CardHeader;
+    Title: typeof CardTitle;
+    Description: typeof CardDescription;
+    Action: typeof CardAction;
+    Content: typeof CardContent;
+    Footer: typeof CardFooter;
+};
+export { CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter };

package/dist/components/card/index.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tv } from 'tailwind-variants';
+const cardVariants = tv({
+    slots: {
+        root: 'group/card flex flex-col rounded-2xl border bg-card text-card-foreground shadow-xs',
+        header: [
+            'grid auto-rows-min grid-cols-[minmax(0,1fr)] items-start gap-x-4 gap-y-1.5 p-6',
+            'has-data-[slot=card-action]:grid-cols-[minmax(0,1fr)_auto]',
+            'group-data-[size=sm]/card:gap-y-1 group-data-[size=sm]/card:p-4',
+        ],
+        title: 'text-lg font-semibold leading-tight tracking-[-0.01em] group-data-[size=sm]/card:text-base',
+        description: 'text-sm text-muted-foreground',
+        // Its own column, across both of the heading's rows, so a long title wraps
+        // beside it instead of underneath it.
+        action: 'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        // `first:` for a card with no header, which would otherwise start flush.
+        content: 'px-6 pb-6 first:pt-6 group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:pb-4 group-data-[size=sm]/card:first:pt-4',
+        footer: 'flex items-center gap-2',
+    },
+    variants: {
+        footer: {
+            /** Part of the card: same surface, continuing the content's padding. */
+            plain: {
+                footer: 'px-6 pb-6 first:pt-6 group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:pb-4 group-data-[size=sm]/card:first:pt-4',
+            },
+            /**
+             * A band set into the bottom of the card: a rule across its top, a step
+             * darker, and the card's own bottom corners. For a footer that is what
+             * somebody does with the card, not more of what it says.
+             */
+            panel: {
+                footer: 'mt-auto rounded-b-[calc(var(--radius-2xl)-1px)] border-t bg-muted/60 px-6 py-4 group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:py-3',
+            },
+        },
+    },
+});
+function CardRoot({ size = 'default', as: Element = 'div', className, ...props }) {
+    const slots = cardVariants();
+    const Tag = Element;
+    return _jsx(Tag, { "data-slot": "card", "data-size": size, className: slots.root({ className }), ...props });
+}
+CardRoot.displayName = 'Card';
+/** The title, the line under it, and the action beside them. */
+function CardHeader({ className, ...props }) {
+    const slots = cardVariants();
+    return _jsx("div", { "data-slot": "card-header", className: slots.header({ className }), ...props });
+}
+CardHeader.displayName = 'Card.Header';
+/** What the card is about. A heading, so the page outline includes it. */
+function CardTitle({ as: Element = 'h3', className, ...props }) {
+    const slots = cardVariants();
+    const Tag = Element;
+    return _jsx(Tag, { "data-slot": "card-title", className: slots.title({ className }), ...props });
+}
+CardTitle.displayName = 'Card.Title';
+/** A line under the title. */
+function CardDescription({ className, ...props }) {
+    const slots = cardVariants();
+    return _jsx("p", { "data-slot": "card-description", className: slots.description({ className }), ...props });
+}
+CardDescription.displayName = 'Card.Description';
+/** A control for the whole card, held in the header's top trailing corner. */
+function CardAction({ className, ...props }) {
+    const slots = cardVariants();
+    return _jsx("div", { "data-slot": "card-action", className: slots.action({ className }), ...props });
+}
+CardAction.displayName = 'Card.Action';
+/** The body. */
+function CardContent({ className, ...props }) {
+    const slots = cardVariants();
+    return _jsx("div", { "data-slot": "card-content", className: slots.content({ className }), ...props });
+}
+CardContent.displayName = 'Card.Content';
+/** The row at the bottom, usually the card's actions. */
+function CardFooter({ variant = 'plain', className, ...props }) {
+    const slots = cardVariants({ footer: variant });
+    return _jsx("div", { "data-slot": "card-footer", className: slots.footer({ className }), ...props });
+}
+CardFooter.displayName = 'Card.Footer';
+export const Card = Object.assign(CardRoot, {
+    Header: CardHeader,
+    Title: CardTitle,
+    Description: CardDescription,
+    Action: CardAction,
+    Content: CardContent,
+    Footer: CardFooter,
+});
+export { CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter };

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 };