panelui-web 0.1.0 → 0.3.0

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

@@ -0,0 +1,191 @@
+/**
+ * Frame — a widget shell: a panel of rows sitting in a tray, with the tray's
+ * one exposed strip along the top carrying the title.
+ *
+ * ```tsx
+ * <Frame>
+ *   <Frame.Header>
+ *     <Frame.Title>Deploys</Frame.Title>
+ *     <Frame.Action>Last 24 hours</Frame.Action>
+ *   </Frame.Header>
+ *   <Frame.Panel>
+ *     <Frame.Row>
+ *       <Frame.Media><RocketIcon /></Frame.Media>
+ *       <Frame.Content>
+ *         <Frame.Title>main · a41c2e9</Frame.Title>
+ *         <Frame.Description>Production · 2 minutes ago</Frame.Description>
+ *       </Frame.Content>
+ *       <Frame.Actions><Badge>Ready</Badge></Frame.Actions>
+ *     </Frame.Row>
+ *   </Frame.Panel>
+ * </Frame>
+ * ```
+ *
+ * ## Two surfaces, one exposed edge
+ *
+ * The panel sits flush against the shell's left, right and bottom, so the
+ * shell reads as something the panel is set into rather than as a border
+ * round it — and the strip left at the top is the header, which is why the
+ * header needs no rule under it and no background of its own. The panel's
+ * bottom corners are not drawn at all: the shell clips them to its own radius.
+ *
+ * ## Four ways to nest them
+ *
+ * `default` is the tray. `band` holds a bordered card in a thin muted band,
+ * with the band's top strip naming what is inside — the frame for a widget
+ * with one thing to show, a figure or a chart, rather than a list of rows.
+ * `inset` floats the panel clear of the shell on all four sides, at the radius
+ * that keeps the two curves concentric, and the band left round it is a recess
+ * — darker than the panel in a light theme and a dark one alike — that
+ * `Frame.Footer` puts its actions in. `plain` drops the shell, for a frame
+ * inside something that already draws an edge, where a second one just inside
+ * it reads as a double line.
+ *
+ * ## Rows divide themselves
+ *
+ * The panel draws the hairline between its children, so no row has to know
+ * 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
+ *
+ * The variant reaches the parts through a data attribute and CSS rather than
+ * through context, so a frame has no client JavaScript of its own.
+ */
+import type { ComponentProps, MouseEventHandler, ReactNode } from 'react';
+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, 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.
+     */
+    variant?: FrameVariant;
+}
+declare function FrameRoot({ variant, className, ...props }: FrameProps): import("react").JSX.Element;
+declare namespace FrameRoot {
+    var displayName: string;
+}
+export interface FrameHeaderProps extends ComponentProps<'div'> {
+}
+/**
+ * The strip of shell above the panel: a title, an optional description under
+ * it, and `Frame.Action` on the trailing side.
+ */
+declare function FrameHeader({ className, ...props }: FrameHeaderProps): import("react").JSX.Element;
+declare namespace FrameHeader {
+    var displayName: string;
+}
+export interface FrameTitleProps extends ComponentProps<'h3'> {
+    /** The heading level in a header. Default `h3`; a row title is always a `p`. */
+    as?: 'h2' | 'h3' | 'h4' | 'p';
+}
+/** A caption in the header; the subject line inside `Frame.Content`. */
+declare function FrameTitle({ as: Tag, className, ...props }: FrameTitleProps): import("react").JSX.Element;
+declare namespace FrameTitle {
+    var displayName: string;
+}
+export interface FrameDescriptionProps extends ComponentProps<'p'> {
+}
+/** A line under a title, in the header or in a row. */
+declare function FrameDescription({ className, ...props }: FrameDescriptionProps): import("react").JSX.Element;
+declare namespace FrameDescription {
+    var displayName: string;
+}
+export interface FrameActionProps extends ComponentProps<'div'> {
+}
+/** The header's trailing side: a short status, a link, a small button. */
+declare function FrameAction({ className, ...props }: FrameActionProps): import("react").JSX.Element;
+declare namespace FrameAction {
+    var displayName: string;
+}
+export interface FramePanelProps extends ComponentProps<'div'> {
+}
+/** 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;
+}
+export interface FrameRowProps extends Omit<ComponentProps<'div'>, 'onClick'> {
+    /** Make the row a link to this address. */
+    href?: string;
+    /** Where a link row opens, as on an `<a>`. */
+    target?: string;
+    /** The relationship of a link row's target, as on an `<a>`. */
+    rel?: string;
+    /** Make the row a button that calls this. Ignored when `href` is set. */
+    onClick?: MouseEventHandler<HTMLElement>;
+    /** A trailing chevron, for a row that leads somewhere. */
+    chevron?: boolean;
+}
+/**
+ * One line of the panel: `Frame.Media`, `Frame.Content` and `Frame.Actions`
+ * side by side. With `href` it is a link and with `onClick` a button.
+ */
+declare function FrameRow({ className, children, chevron, href, target, rel, ...props }: FrameRowProps): import("react").JSX.Element;
+declare namespace FrameRow {
+    var displayName: string;
+}
+export interface FrameMediaProps extends ComponentProps<'div'> {
+}
+/** A row's leading icon, avatar or picture. Holds its size. */
+declare function FrameMedia({ className, ...props }: FrameMediaProps): import("react").JSX.Element;
+declare namespace FrameMedia {
+    var displayName: string;
+}
+export interface FrameContentProps extends ComponentProps<'div'> {
+}
+/**
+ * The flexible middle of a row, usually a title over a description. It takes
+ * what the media and actions leave and may shrink past its content, which is
+ * what keeps a long line from pushing the rest of the row off the edge.
+ */
+declare function FrameContent({ className, ...props }: FrameContentProps): import("react").JSX.Element;
+declare namespace FrameContent {
+    var displayName: string;
+}
+export interface FrameActionsProps extends ComponentProps<'div'> {
+}
+/** A row's trailing side: a badge, a value, a switch, a small button. Holds its size. */
+declare function FrameActions({ className, ...props }: FrameActionsProps): import("react").JSX.Element;
+declare namespace FrameActions {
+    var displayName: string;
+}
+export interface FrameSectionProps extends Omit<ComponentProps<'section'>, 'title'> {
+    /** The heading over the section's rows. */
+    title?: ReactNode;
+}
+/** A labelled group of rows, for a panel holding more than one. */
+declare function FrameSection({ title, className, children, ...props }: FrameSectionProps): import("react").JSX.Element;
+declare namespace FrameSection {
+    var displayName: string;
+}
+export interface FrameFooterProps extends ComponentProps<'div'> {
+}
+/**
+ * The strip below the panel. Under `inset` its children become equal pills in
+ * the recessed band, the shape a row of decisions takes.
+ */
+declare function FrameFooter({ className, ...props }: FrameFooterProps): import("react").JSX.Element;
+declare namespace FrameFooter {
+    var displayName: string;
+}
+export declare const Frame: typeof FrameRoot & {
+    Header: typeof FrameHeader;
+    Title: typeof FrameTitle;
+    Description: typeof FrameDescription;
+    Action: typeof FrameAction;
+    Panel: typeof FramePanel;
+    Row: typeof FrameRow;
+    Media: typeof FrameMedia;
+    Content: typeof FrameContent;
+    Actions: typeof FrameActions;
+    Section: typeof FrameSection;
+    Footer: typeof FrameFooter;
+};
+export { FrameHeader, FrameTitle, FrameDescription, FrameAction, FramePanel, FrameRow, FrameMedia, FrameContent, FrameActions, FrameSection, FrameFooter, };

package/dist/components/frame/index.js

@@ -0,0 +1,186 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { tv } from 'tailwind-variants';
+/*
+ * `inset` geometry. The panel's radius is the shell's less the shell's padding,
+ * so the two curves are concentric — a panel radius that ignored the band
+ * would leave a crescent of shell thicker at the corners than along the sides.
+ */
+const frameVariants = tv({
+    slots: {
+        root: 'group/frame flex flex-col text-foreground',
+        header: [
+            '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',
+        ],
+        /*
+         * One part in two places. In the header it labels the tray, so it stays
+         * quiet; inside a row's content it is the row's subject, so it takes the
+         * foreground and the weight, and truncates rather than pushing the row's
+         * trailing slot out of view.
+         */
+        title: [
+            'text-sm font-medium text-muted-foreground',
+            'in-data-[slot=frame-content]:truncate in-data-[slot=frame-content]:text-foreground',
+            // A band names one thing rather than captioning a list, so its title reads first.
+            'group-data-[variant=band]/frame:text-foreground',
+        ],
+        description: 'text-sm text-muted-foreground in-data-[slot=frame-content]:truncate',
+        action: 'col-start-2 row-span-2 row-start-1 text-sm text-muted-foreground',
+        // 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',
+            // 18px is the band's 24 less its 6px of padding: one corner, two curves.
+            'group-data-[variant=band]/frame:rounded-[1.125rem] group-data-[variant=band]/frame:border group-data-[variant=band]/frame:shadow-xs',
+        ],
+        row: 'flex w-full items-center gap-3 px-4 py-3 text-start',
+        rowPressable: [
+            'cursor-pointer outline-none transition-colors hover:bg-muted/60',
+            'focus-visible:bg-muted/60 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset',
+        ],
+        chevron: 'size-4 shrink-0 text-muted-foreground/70 rtl:-scale-x-100',
+        media: 'flex shrink-0 items-center justify-center',
+        content: 'flex min-w-0 flex-1 flex-col gap-0.5',
+        actions: 'flex shrink-0 items-center gap-1.5',
+        section: 'flex flex-col divide-y',
+        sectionTitle: 'bg-muted/40 px-4 pt-2.5 pb-1.5 text-xs font-medium uppercase tracking-wider text-muted-foreground',
+        footer: [
+            'flex items-center gap-2 px-4 pt-3 pb-3.5',
+            // Under `inset` the band is a row of equal decisions: equal widths, full pills.
+            'group-data-[variant=inset]/frame:gap-3.5 group-data-[variant=inset]/frame:px-[18px] group-data-[variant=inset]/frame:pt-4 group-data-[variant=inset]/frame:pb-2.5',
+            'group-data-[variant=inset]/frame:*:h-11 group-data-[variant=inset]/frame:*:flex-1 group-data-[variant=inset]/frame:*:rounded-full',
+            'group-data-[variant=plain]/frame:px-1',
+            'group-data-[variant=band]/frame:px-3.5 group-data-[variant=band]/frame:pt-2.5 group-data-[variant=band]/frame:pb-1',
+        ],
+    },
+    variants: {
+        variant: {
+            default: {
+                // `overflow-hidden` is what gives the panel the shell's bottom corners.
+                root: 'overflow-hidden rounded-3xl border bg-muted',
+            },
+            plain: {},
+            band: {
+                root: 'rounded-3xl bg-muted p-1.5',
+            },
+            inset: {
+                // The band is the popover surface with black mixed in, so it is the
+                // darker of the two in either theme, which a step on a grey scale
+                // cannot promise: those run darker one way and lighter the other.
+                root: [
+                    'rounded-[38px] p-2 ring-1 ring-foreground/[0.06]',
+                    'bg-[color-mix(in_oklab,var(--popover),black_5%)] dark:bg-[color-mix(in_oklab,var(--popover),black_14%)]',
+                ],
+            },
+        },
+    },
+    defaultVariants: { variant: 'default' },
+});
+function FrameRoot({ variant = 'default', className, ...props }) {
+    const slots = frameVariants({ variant });
+    return _jsx("div", { "data-slot": "frame", "data-variant": variant, className: slots.root({ className }), ...props });
+}
+FrameRoot.displayName = 'Frame';
+/**
+ * The strip of shell above the panel: a title, an optional description under
+ * it, and `Frame.Action` on the trailing side.
+ */
+function FrameHeader({ className, ...props }) {
+    return _jsx("div", { "data-slot": "frame-header", className: frameVariants().header({ className }), ...props });
+}
+FrameHeader.displayName = 'Frame.Header';
+/** A caption in the header; the subject line inside `Frame.Content`. */
+function FrameTitle({ as: Tag = 'h3', className, ...props }) {
+    return _jsx(Tag, { "data-slot": "frame-title", className: frameVariants().title({ className }), ...props });
+}
+FrameTitle.displayName = 'Frame.Title';
+/** A line under a title, in the header or in a row. */
+function FrameDescription({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "frame-description", className: frameVariants().description({ className }), ...props }));
+}
+FrameDescription.displayName = 'Frame.Description';
+/** The header's trailing side: a short status, a link, a small button. */
+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, except under `band`. */
+function FramePanel({ className, ...props }) {
+    return _jsx("div", { "data-slot": "frame-panel", className: frameVariants().panel({ className }), ...props });
+}
+FramePanel.displayName = 'Frame.Panel';
+const Chevron = ({ className }) => (_jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": true, className: className, fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m9 6 6 6-6 6" }) }));
+/**
+ * One line of the panel: `Frame.Media`, `Frame.Content` and `Frame.Actions`
+ * side by side. With `href` it is a link and with `onClick` a button.
+ */
+function FrameRow({ className, children, chevron = false, href, target, rel, ...props }) {
+    const slots = frameVariants();
+    const inside = (_jsxs(_Fragment, { children: [children, chevron ? _jsx(Chevron, { className: slots.chevron() }) : null] }));
+    if (href !== undefined) {
+        return (_jsx("a", { "data-slot": "frame-row", href: href, target: target, rel: rel, className: slots.row({ className: [slots.rowPressable(), className] }), ...props, children: inside }));
+    }
+    // `onClick` stays in `props`, so it reaches whichever element is rendered.
+    if (props.onClick !== undefined) {
+        return (_jsx("button", { type: "button", "data-slot": "frame-row", className: slots.row({ className: [slots.rowPressable(), className] }), ...props, children: inside }));
+    }
+    return (_jsx("div", { "data-slot": "frame-row", className: slots.row({ className }), ...props, children: inside }));
+}
+FrameRow.displayName = 'Frame.Row';
+/** A row's leading icon, avatar or picture. Holds its size. */
+function FrameMedia({ className, ...props }) {
+    return _jsx("div", { "data-slot": "frame-media", className: frameVariants().media({ className }), ...props });
+}
+FrameMedia.displayName = 'Frame.Media';
+/**
+ * The flexible middle of a row, usually a title over a description. It takes
+ * what the media and actions leave and may shrink past its content, which is
+ * what keeps a long line from pushing the rest of the row off the edge.
+ */
+function FrameContent({ className, ...props }) {
+    return _jsx("div", { "data-slot": "frame-content", className: frameVariants().content({ className }), ...props });
+}
+FrameContent.displayName = 'Frame.Content';
+/** A row's trailing side: a badge, a value, a switch, a small button. Holds its size. */
+function FrameActions({ className, ...props }) {
+    return _jsx("div", { "data-slot": "frame-actions", className: frameVariants().actions({ className }), ...props });
+}
+FrameActions.displayName = 'Frame.Actions';
+/** A labelled group of rows, for a panel holding more than one. */
+function FrameSection({ title, className, children, ...props }) {
+    const slots = frameVariants();
+    return (_jsxs("section", { "data-slot": "frame-section", className: slots.section({ className }), ...props, children: [title !== undefined ? _jsx("h4", { className: slots.sectionTitle(), children: title }) : null, children] }));
+}
+FrameSection.displayName = 'Frame.Section';
+/**
+ * The strip below the panel. Under `inset` its children become equal pills in
+ * the recessed band, the shape a row of decisions takes.
+ */
+function FrameFooter({ className, ...props }) {
+    return _jsx("div", { "data-slot": "frame-footer", className: frameVariants().footer({ className }), ...props });
+}
+FrameFooter.displayName = 'Frame.Footer';
+export const Frame = Object.assign(FrameRoot, {
+    Header: FrameHeader,
+    Title: FrameTitle,
+    Description: FrameDescription,
+    Action: FrameAction,
+    Panel: FramePanel,
+    Row: FrameRow,
+    Media: FrameMedia,
+    Content: FrameContent,
+    Actions: FrameActions,
+    Section: FrameSection,
+    Footer: FrameFooter,
+});
+export { FrameHeader, FrameTitle, FrameDescription, FrameAction, FramePanel, FrameRow, FrameMedia, FrameContent, FrameActions, FrameSection, FrameFooter, };

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

package/dist/components/kpi/index.js

@@ -25,7 +25,10 @@ const kpiVariants = tv({
     },
     variants: {
         surface: {
-            true: { root: 'rounded-3xl border bg-card p-5 text-card-foreground' },
+            true: {
+                root: 'rounded-3xl border bg-card p-5 text-card-foreground',
+                group: 'rounded-3xl border bg-card p-5 text-card-foreground',
+            },
         },
         color: {
             primary: { chart: '[--pu-color:var(--primary)]', progress: '[--pu-color:var(--primary)]' },
@@ -221,8 +224,8 @@ function KpiSeparator({ className, ...props }) {
 }
 KpiSeparator.displayName = 'Kpi.Separator';
 /** Several metrics as one panel, with a rule between each and the next. */
-function KpiGroup({ orientation = 'horizontal', className, ...props }) {
-    return _jsx("div", { className: kpiVariants({ orientation }).group({ className }), ...props });
+function KpiGroup({ orientation = 'horizontal', surface = false, className, ...props }) {
+    return _jsx("div", { className: kpiVariants({ orientation, surface }).group({ className }), ...props });
 }
 KpiGroup.displayName = 'Kpi.Group';
 export const Kpi = Object.assign(KpiRoot, {

package/dist/components/lane-board/index.d.ts

@@ -114,6 +114,13 @@ declare function LaneBoardMeta({ className, ...props }: LaneBoardMetaProps): imp
 declare namespace LaneBoardMeta {
     var displayName: string;
 }
+export interface LaneBoardAvatarProps extends ComponentProps<'span'> {
+}
+/** Who a card belongs to, as initials in a small circle. */
+declare function LaneBoardAvatar({ className, ...props }: LaneBoardAvatarProps): import("react").JSX.Element;
+declare namespace LaneBoardAvatar {
+    var displayName: string;
+}
 export declare const LaneBoard: typeof LaneBoardRoot & {
     Title: typeof LaneBoardTitle;
     Code: typeof LaneBoardCode;
@@ -121,5 +128,6 @@ export declare const LaneBoard: typeof LaneBoardRoot & {
     Steps: typeof LaneBoardSteps;
     Tag: typeof LaneBoardTag;
     Meta: typeof LaneBoardMeta;
+    Avatar: typeof LaneBoardAvatar;
 };
-export { LaneBoardTitle, LaneBoardCode, LaneBoardRow, LaneBoardSteps, LaneBoardTag, LaneBoardMeta };
+export { LaneBoardTitle, LaneBoardCode, LaneBoardRow, LaneBoardSteps, LaneBoardTag, LaneBoardMeta, LaneBoardAvatar, };

package/dist/components/lane-board/index.js

@@ -89,6 +89,7 @@ const laneBoardVariants = tv({
         step: 'h-1 w-4 rounded-full',
         tag: 'inline-flex items-center rounded-full border border-[color-mix(in_oklab,var(--pu-color)_35%,var(--card))] bg-[color-mix(in_oklab,var(--pu-color)_14%,transparent)] px-2 py-0.5 text-xs font-medium text-[var(--pu-color)]',
         meta: 'font-mono text-sm tabular-nums text-foreground',
+        avatar: 'flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-[0.625rem] font-semibold text-muted-foreground',
     },
     variants: {
         color: {
@@ -678,6 +679,11 @@ function LaneBoardMeta({ className, ...props }) {
     return _jsx("span", { className: laneBoardVariants().meta({ className }), ...props });
 }
 LaneBoardMeta.displayName = 'LaneBoard.Meta';
+/** Who a card belongs to, as initials in a small circle. */
+function LaneBoardAvatar({ className, ...props }) {
+    return _jsx("span", { "data-slot": "lane-board-avatar", className: laneBoardVariants().avatar({ className }), ...props });
+}
+LaneBoardAvatar.displayName = 'LaneBoard.Avatar';
 export const LaneBoard = Object.assign(LaneBoardRoot, {
     Title: LaneBoardTitle,
     Code: LaneBoardCode,
@@ -685,7 +691,8 @@ export const LaneBoard = Object.assign(LaneBoardRoot, {
     Steps: LaneBoardSteps,
     Tag: LaneBoardTag,
     Meta: LaneBoardMeta,
+    Avatar: LaneBoardAvatar,
 });
 /* By name as well, for a Server Component, which cannot dot into a client
    module. */
-export { LaneBoardTitle, LaneBoardCode, LaneBoardRow, LaneBoardSteps, LaneBoardTag, LaneBoardMeta };
+export { LaneBoardTitle, LaneBoardCode, LaneBoardRow, LaneBoardSteps, LaneBoardTag, LaneBoardMeta, LaneBoardAvatar, };

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

@@ -124,9 +124,32 @@ declare function PlanetControls({ step, className, children, ...props }: PlanetC
 declare namespace PlanetControls {
     var displayName: string;
 }
+export interface PlanetListProps extends ComponentProps<'ul'> {
+}
+/**
+ * The places on the globe as a list, in two columns, for picking one by name.
+ * Put it beside or under the globe and turn the globe to whatever is picked.
+ */
+declare function PlanetList({ className, ...props }: PlanetListProps): import("react").JSX.Element;
+declare namespace PlanetList {
+    var displayName: string;
+}
+export interface PlanetListItemProps extends Omit<ComponentProps<'button'>, 'color'> {
+    /** The colour of the dot before the name. Match it to the place's marker. */
+    color?: PlanetMarkerColor;
+    /** Draws the row as the one that has been picked. */
+    selected?: boolean;
+}
+/** One place in `Planet.List`: a dot in its marker's colour, and its name. A button. */
+declare function PlanetListItem({ color, selected, className, children, ...props }: PlanetListItemProps): import("react").JSX.Element;
+declare namespace PlanetListItem {
+    var displayName: string;
+}
 export declare const Planet: import("react").ForwardRefExoticComponent<Omit<PlanetProps, "ref"> & import("react").RefAttributes<PlanetHandle>> & {
     Globe: typeof PlanetGlobe;
     Marker: typeof PlanetMarker;
     Controls: typeof PlanetControls;
+    List: typeof PlanetList;
+    ListItem: typeof PlanetListItem;
 };
-export { PlanetGlobe, PlanetMarker, PlanetControls };
+export { PlanetGlobe, PlanetMarker, PlanetControls, PlanetList, PlanetListItem };