@corbits/react-ui 0.1.0

package/dist/ui/now-cards.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { formatRelativeTime } from "../lib/relative-time.js";
+import { sortNowItems } from "../lib/now-item.js";
+import { Badge } from "./badge.js";
+/**
+ * The attention band at the top of the inbox. Its own container rather than the
+ * generic `Section` because it says something `Section` cannot: an eyebrow that
+ * marks urgency, a count in words, and a collapsed mode.
+ *
+ * Collapsing keeps the body mounted (so it can animate, and so anchors into it
+ * still resolve) but marks it `inert` — `aria-hidden` alone would hide it from
+ * a screen reader while leaving every card in the tab order.
+ */ export function NowSection({ count, collapsed = false, children, className }) {
+    const countLabel = count === 1 ? "1 thing needs you" : `${count} things need you`;
+    return /*#__PURE__*/ _jsxs("section", {
+        "data-slot": "now-section",
+        "aria-label": "Now",
+        className: cn("border-b border-border bg-card px-4 py-3 text-card-foreground", className),
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "flex items-end justify-between gap-2",
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: "min-w-0",
+                    children: [
+                        /*#__PURE__*/ _jsx("p", {
+                            className: "text-xs font-semibold tracking-[0.14em] text-primary-emphasis uppercase",
+                            children: "Now"
+                        }),
+                        /*#__PURE__*/ _jsx("p", {
+                            className: "text-sm font-semibold tracking-tight",
+                            children: count === 0 ? "Clear" : countLabel
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: cn("grid transition-[grid-template-rows,opacity] duration-300", collapsed ? "grid-rows-[0fr] opacity-0" : "mt-3 grid-rows-[1fr] opacity-100"),
+                ...collapsed ? {
+                    inert: true
+                } : {},
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: "min-h-0 overflow-hidden",
+                    children: children
+                })
+            })
+        ]
+    });
+}
+/**
+ * The highest-attention items as cards. Ordering is not the caller's problem —
+ * the list is sorted here by priority then recency, so two surfaces fed the
+ * same items always agree on what is most urgent.
+ */ export function NowCards({ items, limit = 3, selectedId = null, now, className }) {
+    const shown = sortNowItems(items).slice(0, limit);
+    if (shown.length === 0) return null;
+    return /*#__PURE__*/ _jsx("ul", {
+        "aria-label": "Needs you now",
+        className: cn("grid gap-2.5 sm:grid-cols-2 lg:grid-cols-3", className),
+        children: shown.map((item, index)=>{
+            const selected = item.id === selectedId;
+            const body = /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center gap-2",
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "grid size-5 shrink-0 place-items-center rounded-full bg-primary/15 text-xs font-bold text-primary-emphasis",
+                                children: index + 1
+                            }),
+                            /*#__PURE__*/ _jsx(Badge, {
+                                tone: item.priority === "now" ? "accent" : "neutral",
+                                children: item.classification
+                            }),
+                            item.type === "mail" && !item.read ? /*#__PURE__*/ _jsx("span", {
+                                className: "size-2 shrink-0 rounded-full bg-primary",
+                                "aria-label": "Unread",
+                                role: "img"
+                            }) : null,
+                            /*#__PURE__*/ _jsx("time", {
+                                dateTime: item.when,
+                                className: "ml-auto shrink-0 text-xs text-muted-foreground",
+                                children: formatRelativeTime(item.when, now)
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        className: "mt-2 line-clamp-2 text-sm leading-snug font-semibold",
+                        children: item.title
+                    }),
+                    item.summary === undefined ? null : /*#__PURE__*/ _jsx("p", {
+                        className: "mt-1 line-clamp-2 text-xs leading-relaxed text-muted-foreground",
+                        children: item.summary
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        className: "mt-2.5 text-xs font-medium text-primary-emphasis",
+                        children: item.type === "gate" ? `${item.action} →` : `From ${item.from}`
+                    })
+                ]
+            });
+            const shell = cn("block h-full w-full rounded-lg border p-3.5 text-left transition-colors", selected ? "border-primary-emphasis bg-primary/10" : "border-border bg-background hover:bg-muted");
+            return /*#__PURE__*/ _jsx("li", {
+                children: item.href === undefined ? /*#__PURE__*/ _jsx("div", {
+                    "aria-current": selected ? "true" : undefined,
+                    className: shell,
+                    children: body
+                }) : /*#__PURE__*/ _jsx("a", {
+                    href: item.href,
+                    "aria-current": selected ? "true" : undefined,
+                    className: shell,
+                    children: body
+                })
+            }, `${item.type}:${item.id}`);
+        })
+    });
+}

package/dist/ui/page-panel.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+export type PagePanelProps = {
+    readonly children: ReactNode;
+    /**
+     * When true the inner panel scrolls vertically; when false it clips overflow
+     * and leaves scrolling to its own children (e.g. a header + scroll body).
+     */
+    readonly scroll?: boolean;
+    /** Drop the panel's shadow — some surfaces render flatter. */
+    readonly flat?: boolean;
+    /**
+     * Size the panel to its content instead of filling the viewport. Short pages
+     * then leave no dead band below their last section. The framing border is
+     * dropped in this mode so a content-height panel has no floating edge where
+     * it stops — it blends into the identical fill below it. Still capped at the
+     * viewport, so overflowing content scrolls as normal.
+     */
+    readonly fitContent?: boolean;
+    /**
+     * Fill token for the outer bleed and the panel itself. `background` (the
+     * default) is for top-level routes hosted directly under the app shell; pass
+     * `card` when the panel is nested inside a surface that already supplies its
+     * own ground, so the panel blends in instead of reading as a stray card.
+     */
+    readonly surface?: "background" | "card";
+    readonly className?: string;
+};
+/**
+ * The standard page-content frame: a full-height outer fill plus a bordered
+ * panel that owns the page's vertical scroll. Shared by the top-level pages so
+ * margins, border and background are decided once instead of per page.
+ *
+ * It is not `PageShell` — that caps and centres a measure of content — and not
+ * `Card`, which is a surface within a page. This is the boundary between the
+ * app shell and whatever the route renders.
+ */
+export declare function PagePanel({ children, scroll, flat, fitContent, surface, className, }: PagePanelProps): import("react").JSX.Element;

package/dist/ui/page-panel.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+/**
+ * The standard page-content frame: a full-height outer fill plus a bordered
+ * panel that owns the page's vertical scroll. Shared by the top-level pages so
+ * margins, border and background are decided once instead of per page.
+ *
+ * It is not `PageShell` — that caps and centres a measure of content — and not
+ * `Card`, which is a surface within a page. This is the boundary between the
+ * app shell and whatever the route renders.
+ */ export function PagePanel({ children, scroll = true, flat = false, fitContent = false, surface = "background", className }) {
+    const sizing = fitContent ? "w-full max-h-full self-start" : "flex-1 border border-border";
+    const overflow = scroll ? fitContent ? "overflow-y-auto" : "min-h-full overflow-y-auto" : "overflow-hidden";
+    const fill = surface === "card" ? "bg-card" : "bg-background";
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn("flex h-full overflow-hidden", fill),
+        children: /*#__PURE__*/ _jsx("section", {
+            "data-slot": "page-panel",
+            className: cn("flex flex-col", fill, sizing, overflow, !flat && "shadow-sm", className),
+            children: children
+        })
+    });
+}

package/dist/ui/page-shell.d.ts

@@ -0,0 +1,21 @@
+import type * as React from "react";
+export type PageShellProps = React.ComponentProps<"div"> & {
+    /**
+     * The shell owns the vertical scroll. Turn it off when the page has its own
+     * scrolling body under a sticky header — two nested scroll containers is how
+     * a header ends up scrolling away with the content under it.
+     */
+    readonly scroll?: boolean;
+    /** Caps and centres the content. Omit for full-bleed pages like a dashboard. */
+    readonly width?: "prose" | "wide" | "full";
+};
+/**
+ * The frame a top-level page sits in: full height, one scroll container, and a
+ * consistent measure.
+ *
+ * It exists so margins, max-width and scroll ownership are decided once instead
+ * of by whichever page was written most recently. It is not `Section` — that is
+ * a titled block *within* a page — and it is not `Card`, which is a surface.
+ * This is the page's outer boundary and it deliberately draws nothing.
+ */
+export declare function PageShell({ scroll, width, className, children, ...props }: PageShellProps): React.JSX.Element;

package/dist/ui/page-shell.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+const WIDTH_CLASS = {
+    prose: "mx-auto w-full max-w-3xl",
+    wide: "mx-auto w-full max-w-5xl",
+    full: "w-full"
+};
+/**
+ * The frame a top-level page sits in: full height, one scroll container, and a
+ * consistent measure.
+ *
+ * It exists so margins, max-width and scroll ownership are decided once instead
+ * of by whichever page was written most recently. It is not `Section` — that is
+ * a titled block *within* a page — and it is not `Card`, which is a surface.
+ * This is the page's outer boundary and it deliberately draws nothing.
+ */ export function PageShell({ scroll = true, width = "wide", className, children, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "page-shell",
+        className: cn("flex h-full flex-col", scroll ? "overflow-y-auto" : "overflow-hidden", className),
+        ...props,
+        children: /*#__PURE__*/ _jsx("div", {
+            className: cn("flex min-h-0 flex-1 flex-col gap-6 px-4 py-6", WIDTH_CLASS[width]),
+            children: children
+        })
+    });
+}

package/dist/ui/parts-renderer.d.ts

@@ -0,0 +1,22 @@
+import type { Part, PartToolTrace } from "../lib/chat-parts.js";
+import { type ToolBlockState } from "./tool-block.js";
+export type PartsRendererProps = {
+    readonly parts: readonly Part[];
+    readonly className?: string;
+};
+/** Maps the wire's four-outcome status onto `ToolBlock`'s render-side state. */
+export declare function toolTraceToBlockState(part: PartToolTrace): ToolBlockState;
+/**
+ * Renders an ordered `Part[]` in the order the model produced it: text as
+ * prose, reasoning as a closed disclosure, tool calls through `ToolBlock`,
+ * files as an attachment chip, events as an inline system line, any block
+ * part as a labeled fallback card, and any `kind` outside the `Part` union
+ * itself as a neutral unknown-part fallback — the host's own generative-UI
+ * registry, if it has one, renders blocks by intercepting `kind: "block"`
+ * before it reaches this component.
+ *
+ * An empty `parts` array renders nothing — no placeholder, no empty-state
+ * chrome. A message with no parts is not a message a transcript should show
+ * anything for.
+ */
+export declare function PartsRenderer({ parts, className }: PartsRendererProps): import("react").JSX.Element | null;

package/dist/ui/parts-renderer.js

@@ -0,0 +1,234 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronRight, Paperclip } from "lucide-react";
+import { useState } from "react";
+import { cn } from "../lib/utils.js";
+import { BlockCard } from "./block-card.js";
+import { ToolBlock } from "./tool-block.js";
+/** `1.2s`, `45s`, `3m 05s` — never a raw millisecond count. */ function formatDuration(ms) {
+    const totalSeconds = ms / 1000;
+    if (totalSeconds < 60) {
+        return `${totalSeconds < 10 ? totalSeconds.toFixed(1) : Math.round(totalSeconds)}s`;
+    }
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = Math.round(totalSeconds % 60);
+    return `${minutes}m ${String(seconds).padStart(2, "0")}s`;
+}
+/** Maps the wire's four-outcome status onto `ToolBlock`'s render-side state. */ export function toolTraceToBlockState(part) {
+    switch(part.status){
+        case "pending":
+            return {
+                status: "pending"
+            };
+        case "running":
+            return {
+                status: "running"
+            };
+        case "output-available":
+            return {
+                status: "output-available",
+                output: stringifyOutput(part.output)
+            };
+        case "error":
+            return {
+                status: "error",
+                message: stringifyOutput(part.output)
+            };
+        case "approval-requested":
+            return {
+                status: "approval-requested",
+                reason: stringifyOutput(part.output)
+            };
+        case "output-denied":
+            return {
+                status: "output-denied",
+                reason: stringifyOutput(part.output)
+            };
+    }
+}
+function stringifyOutput(output) {
+    if (output === undefined) return "";
+    if (typeof output === "string") return output;
+    return JSON.stringify(output, null, 2);
+}
+function TextPartView({ text }) {
+    if (text.trim().length === 0) return null;
+    return /*#__PURE__*/ _jsx("p", {
+        className: "whitespace-pre-wrap text-sm leading-relaxed text-foreground",
+        children: text
+    });
+}
+/**
+ * The agent's thinking, folded away, with how long it took once known.
+ *
+ * Closed by default, including while streaming: a block that expands itself
+ * mid-stream makes the transcript jump under the reader. A native
+ * `<details>`, not a div with state — it gets disclosure semantics, keyboard
+ * behaviour and find-in-page expansion from the browser for free.
+ */ function ReasoningPartView({ text, durationMs }) {
+    const [open, setOpen] = useState(false);
+    if (text.trim().length === 0) return null;
+    return /*#__PURE__*/ _jsxs("details", {
+        "data-slot": "reasoning-part",
+        open: open,
+        onToggle: (event)=>setOpen(event.currentTarget.open),
+        className: "text-xs",
+        children: [
+            /*#__PURE__*/ _jsxs("summary", {
+                className: cn(// `relative` plus the `::after` pseudo-element extends the
+                // effective hit area to 40px tall without changing the row's own
+                // padding/density — see design-engineering.md's hit-area pattern.
+                "relative flex cursor-pointer list-none items-center gap-1.5 rounded-md px-2 py-1.5 text-muted-foreground transition-colors after:absolute after:inset-x-0 after:top-1/2 after:h-10 after:-translate-y-1/2 hover:bg-muted hover:text-foreground", "[&::-webkit-details-marker]:hidden"),
+                children: [
+                    /*#__PURE__*/ _jsx(ChevronRight, {
+                        className: cn("size-3.5 shrink-0 transition-transform duration-200 ease-out", open && "rotate-90"),
+                        "aria-hidden": true
+                    }),
+                    /*#__PURE__*/ _jsxs("span", {
+                        children: [
+                            "Thought",
+                            durationMs === undefined ? "" : ` for ${formatDuration(durationMs)}`
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                className: "mt-1 ml-4 border-l border-border pl-3 leading-relaxed whitespace-pre-wrap text-muted-foreground [animation:corbits-rail-block-in_200ms_var(--ease-out)_both]",
+                children: text
+            }, open ? "open" : "closed")
+        ]
+    });
+}
+function FilePartView({ name, mediaType, url }) {
+    const content = /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Paperclip, {
+                className: "size-3.5 shrink-0",
+                "aria-hidden": true
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                className: "min-w-0 flex-1 truncate",
+                children: name
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                className: "shrink-0 text-muted-foreground",
+                children: mediaType
+            })
+        ]
+    });
+    if (url === undefined) {
+        return /*#__PURE__*/ _jsx("span", {
+            "data-slot": "file-part",
+            className: "inline-flex max-w-full items-center gap-2 rounded-md border border-border bg-muted/40 px-2.5 py-1.5 text-xs text-foreground",
+            children: content
+        });
+    }
+    return /*#__PURE__*/ _jsx("a", {
+        "data-slot": "file-part",
+        href: url,
+        target: "_blank",
+        rel: "noreferrer",
+        className: "inline-flex max-w-full items-center gap-2 rounded-md border border-border bg-muted/40 px-2.5 py-1.5 text-xs text-foreground transition-colors hover:bg-muted",
+        children: content
+    });
+}
+function EventPartView({ event }) {
+    const label = event.replace(/[.-]+/g, " ");
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "event-part",
+        className: "flex items-center gap-2 py-1 text-xs text-muted-foreground italic",
+        children: /*#__PURE__*/ _jsx("span", {
+            children: label
+        })
+    });
+}
+/**
+ * A block part this renderer has no host-specific registry for. Phase 1
+ * ships no generative-UI JSON-spec renderer, so a block always falls back to
+ * its type name and raw payload rather than going unrendered.
+ */ function BlockPartFallback({ type, data }) {
+    return /*#__PURE__*/ _jsx(BlockCard, {
+        title: type,
+        children: /*#__PURE__*/ _jsx("pre", {
+            className: "max-h-64 overflow-auto font-mono text-[11px] whitespace-pre-wrap text-muted-foreground",
+            children: JSON.stringify(data, null, 2)
+        })
+    });
+}
+/**
+ * A `Part` whose `kind` this renderer has never heard of — a wire value
+ * outside `Part`'s own union, which can only ever arrive because this
+ * package validates nothing of its own (see `chat-parts.ts`). Renders a
+ * neutral labeled card naming the unrecognized kind rather than rendering
+ * nothing, so a producer/consumer version skew is visible in the transcript
+ * instead of silently swallowing content.
+ */ function UnknownPartFallback({ kind }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        "data-slot": "unknown-part",
+        className: "rounded-md border border-dashed border-border bg-muted/30 px-2.5 py-1.5 text-xs text-muted-foreground",
+        children: [
+            "Unsupported part: ",
+            /*#__PURE__*/ _jsx("span", {
+                className: "font-mono",
+                children: kind
+            })
+        ]
+    });
+}
+/**
+ * Renders an ordered `Part[]` in the order the model produced it: text as
+ * prose, reasoning as a closed disclosure, tool calls through `ToolBlock`,
+ * files as an attachment chip, events as an inline system line, any block
+ * part as a labeled fallback card, and any `kind` outside the `Part` union
+ * itself as a neutral unknown-part fallback — the host's own generative-UI
+ * registry, if it has one, renders blocks by intercepting `kind: "block"`
+ * before it reaches this component.
+ *
+ * An empty `parts` array renders nothing — no placeholder, no empty-state
+ * chrome. A message with no parts is not a message a transcript should show
+ * anything for.
+ */ export function PartsRenderer({ parts, className }) {
+    if (parts.length === 0) return null;
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "parts-renderer",
+        className: cn("flex flex-col gap-1.5", className),
+        children: parts.map((part, index)=>{
+            const key = `${part.kind}-${index}`;
+            switch(part.kind){
+                case "text":
+                    return /*#__PURE__*/ _jsx(TextPartView, {
+                        text: part.text
+                    }, key);
+                case "reasoning":
+                    return /*#__PURE__*/ _jsx(ReasoningPartView, {
+                        text: part.text,
+                        durationMs: part.durationMs
+                    }, key);
+                case "tool-trace":
+                    return /*#__PURE__*/ _jsx(ToolBlock, {
+                        name: part.name,
+                        input: part.input,
+                        state: toolTraceToBlockState(part)
+                    }, key);
+                case "file":
+                    return /*#__PURE__*/ _jsx(FilePartView, {
+                        name: part.name,
+                        mediaType: part.mediaType,
+                        url: part.url
+                    }, key);
+                case "event":
+                    return /*#__PURE__*/ _jsx(EventPartView, {
+                        event: part.event
+                    }, key);
+                case "block":
+                    return /*#__PURE__*/ _jsx(BlockPartFallback, {
+                        type: part.block.type,
+                        data: part.block.data
+                    }, key);
+                default:
+                    return /*#__PURE__*/ _jsx(UnknownPartFallback, {
+                        kind: part.kind
+                    }, key);
+            }
+        })
+    });
+}

package/dist/ui/profile-card.d.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from "react";
+import { type AvatarTone } from "./avatar.js";
+import { type BadgeTone } from "./badge.js";
+export type ProfileCardAction = {
+    readonly id: string;
+    readonly label: string;
+    readonly onClick?: () => void;
+    readonly tone?: "primary" | "outline";
+};
+export type ProfileCardChannel = {
+    readonly id: string;
+    readonly name: string;
+    readonly href?: string;
+};
+export type ProfileCardSkill = {
+    readonly id: string;
+    readonly name: string;
+    readonly href?: string;
+};
+export type ProfileCardProps = {
+    readonly name: string;
+    readonly initials: string;
+    readonly subtitle?: string;
+    readonly statusLabel?: string;
+    readonly statusTone?: BadgeTone;
+    readonly avatarTone?: AvatarTone;
+    readonly tenantMonogram?: string;
+    readonly actions?: readonly ProfileCardAction[];
+    readonly sharedChannels?: readonly ProfileCardChannel[];
+    readonly pinnedSkills?: readonly ProfileCardSkill[];
+    readonly footer?: ReactNode;
+    readonly className?: string;
+};
+/**
+ * Canvas profile card: hero identity, status, action chips, shared
+ * channels, and pinned skills. Deep-links are plain hrefs so the host
+ * router owns navigation.
+ */
+export declare function ProfileCard({ name, initials, subtitle, statusLabel, statusTone, avatarTone, tenantMonogram, actions, sharedChannels, pinnedSkills, footer, className, }: ProfileCardProps): import("react").JSX.Element;

package/dist/ui/profile-card.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { toSafeHref } from "../lib/url.js";
+import { cn } from "../lib/utils.js";
+import { Avatar } from "./avatar.js";
+import { Badge } from "./badge.js";
+import { Button } from "./button.js";
+/**
+ * Canvas profile card: hero identity, status, action chips, shared
+ * channels, and pinned skills. Deep-links are plain hrefs so the host
+ * router owns navigation.
+ */ export function ProfileCard({ name, initials, subtitle, statusLabel, statusTone = "neutral", avatarTone = "neutral", tenantMonogram, actions = [], sharedChannels = [], pinnedSkills = [], footer, className }) {
+    return /*#__PURE__*/ _jsxs("article", {
+        "data-slot": "profile-card",
+        className: cn("flex flex-col gap-4 border border-border bg-card p-4", className),
+        children: [
+            /*#__PURE__*/ _jsxs("header", {
+                className: "flex items-start gap-3",
+                children: [
+                    /*#__PURE__*/ _jsx(Avatar, {
+                        initials: initials,
+                        label: name,
+                        tone: avatarTone,
+                        size: "lg",
+                        ...tenantMonogram === undefined ? {} : {
+                            tenantMonogram
+                        }
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "min-w-0 flex-1",
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex flex-wrap items-center gap-2",
+                                children: [
+                                    /*#__PURE__*/ _jsx("h2", {
+                                        className: "truncate text-base font-semibold",
+                                        children: name
+                                    }),
+                                    statusLabel === undefined ? null : /*#__PURE__*/ _jsx(Badge, {
+                                        tone: statusTone,
+                                        children: statusLabel
+                                    })
+                                ]
+                            }),
+                            subtitle === undefined ? null : /*#__PURE__*/ _jsx("p", {
+                                className: "truncate text-xs text-muted-foreground",
+                                children: subtitle
+                            })
+                        ]
+                    })
+                ]
+            }),
+            actions.length === 0 ? null : /*#__PURE__*/ _jsx("div", {
+                className: "flex flex-wrap gap-1.5",
+                children: actions.map((action)=>/*#__PURE__*/ _jsx(Button, {
+                        type: "button",
+                        size: "sm",
+                        variant: action.tone === "primary" ? "primary" : "outline",
+                        onClick: action.onClick,
+                        children: action.label
+                    }, action.id))
+            }),
+            sharedChannels.length === 0 ? null : /*#__PURE__*/ _jsxs("section", {
+                className: "flex flex-col gap-1.5",
+                children: [
+                    /*#__PURE__*/ _jsx("h3", {
+                        className: "text-[10.5px] font-bold uppercase tracking-[0.06em] text-muted-foreground",
+                        children: "Shared channels"
+                    }),
+                    /*#__PURE__*/ _jsx("ul", {
+                        className: "flex flex-col gap-1",
+                        children: sharedChannels.map((channel)=>{
+                            const href = toSafeHref(channel.href);
+                            return /*#__PURE__*/ _jsx("li", {
+                                children: href === undefined ? /*#__PURE__*/ _jsxs("span", {
+                                    className: "text-sm",
+                                    children: [
+                                        "#",
+                                        channel.name
+                                    ]
+                                }) : /*#__PURE__*/ _jsxs("a", {
+                                    href: href,
+                                    className: "text-sm text-foreground hover:underline",
+                                    children: [
+                                        "#",
+                                        channel.name
+                                    ]
+                                })
+                            }, channel.id);
+                        })
+                    })
+                ]
+            }),
+            pinnedSkills.length === 0 ? null : /*#__PURE__*/ _jsxs("section", {
+                className: "flex flex-col gap-1.5",
+                children: [
+                    /*#__PURE__*/ _jsx("h3", {
+                        className: "text-[10.5px] font-bold uppercase tracking-[0.06em] text-muted-foreground",
+                        children: "Pinned skills"
+                    }),
+                    /*#__PURE__*/ _jsx("ul", {
+                        className: "flex flex-wrap gap-1.5",
+                        children: pinnedSkills.map((skill)=>{
+                            const href = toSafeHref(skill.href);
+                            return href === undefined ? /*#__PURE__*/ _jsx(Badge, {
+                                tone: "neutral",
+                                children: skill.name
+                            }, skill.id) : /*#__PURE__*/ _jsx("a", {
+                                href: href,
+                                children: /*#__PURE__*/ _jsx(Badge, {
+                                    tone: "neutral",
+                                    children: skill.name
+                                })
+                            }, skill.id);
+                        })
+                    })
+                ]
+            }),
+            footer === undefined ? null : /*#__PURE__*/ _jsx("footer", {
+                className: "border-t border-border pt-3",
+                children: footer
+            })
+        ]
+    });
+}