@calliopelabs/ui 0.7.0 → 0.12.0

package/dist/data/use-local-table.js

@@ -0,0 +1,127 @@
+"use client";
+import * as React from "react";
+import { DEFAULT_PAGE_SIZE, PAGE_SIZES, } from "./types.js";
+const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" });
+function compareValues(a, b) {
+    if (a instanceof Date)
+        a = a.getTime();
+    if (b instanceof Date)
+        b = b.getTime();
+    if (typeof a === "string" && typeof b === "string")
+        return collator.compare(a, b);
+    if (typeof a === "number" && typeof b === "number")
+        return a - b;
+    if (typeof a === "boolean" && typeof b === "boolean")
+        return Number(a) - Number(b);
+    return collator.compare(String(a), String(b));
+}
+function toList(sort) {
+    if (!sort)
+        return [];
+    return Array.isArray(sort) ? [...sort] : [sort];
+}
+/**
+ * A TableController over rows already in memory, for DataTable: search,
+ * the app's filters, sort and paging, all over the whole set, so a page
+ * boundary is never wrong. For a list the server pages, implement the
+ * controller over the server (Astrolift's `useCursorTable`) instead.
+ */
+export function useLocalTable(rows, options = {}) {
+    const { sortBy, initialSort, searchText, filter, onClearFilters, pageSizes, loading = false, error = null, retry, } = options;
+    const [search, setSearchState] = React.useState("");
+    const [sorts, setSorts] = React.useState(() => toList(initialSort));
+    const [pageSize, setPageSizeState] = React.useState(options.pageSize ?? DEFAULT_PAGE_SIZE);
+    const [page, setPage] = React.useState(0);
+    const matched = React.useMemo(() => {
+        const needle = search.trim().toLowerCase();
+        return rows.filter((row) => (!filter || filter(row)) &&
+            (!needle || !searchText || searchText(row).toLowerCase().includes(needle)));
+    }, [rows, search, searchText, filter]);
+    const sorted = React.useMemo(() => {
+        const active = sorts.filter((s) => sortBy?.[s.key]);
+        if (active.length === 0)
+            return matched;
+        return [...matched].sort((x, y) => {
+            for (const { key, dir } of active) {
+                const read = sortBy[key];
+                const [a, b] = [read(x), read(y)];
+                const aMissing = a === null || a === undefined;
+                const bMissing = b === null || b === undefined;
+                if (aMissing || bMissing) {
+                    if (aMissing && bMissing)
+                        continue;
+                    return aMissing ? 1 : -1;
+                }
+                const order = compareValues(a, b);
+                if (order !== 0)
+                    return dir === "asc" ? order : -order;
+            }
+            return 0;
+        });
+    }, [matched, sorts, sortBy]);
+    const pages = Math.max(1, Math.ceil(sorted.length / pageSize));
+    // Rows can shrink under the page on screen (a refetch, a filter): hold it in range.
+    const pageIndex = Math.min(page, pages - 1);
+    const pageRows = React.useMemo(() => sorted.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize), [sorted, pageIndex, pageSize]);
+    const isFiltered = Boolean(filter) || (Boolean(searchText) && search.trim() !== "");
+    const state = loading
+        ? "loading"
+        : error
+            ? "error"
+            : sorted.length > 0
+                ? "ready"
+                : isFiltered
+                    ? "emptyFiltered"
+                    : "empty";
+    const setSearch = React.useCallback((next) => {
+        setSearchState(next);
+        setPage(0);
+    }, []);
+    const setPageSize = React.useCallback((size) => {
+        setPageSizeState(size);
+        setPage(0);
+    }, []);
+    const toggleSort = React.useCallback((key, additive) => {
+        setSorts((current) => {
+            const at = current.findIndex((s) => s.key === key);
+            if (additive) {
+                if (at === -1)
+                    return [...current, { key, dir: "asc" }];
+                return current.map((s, i) => i === at ? { key, dir: s.dir === "asc" ? "desc" : "asc" } : s);
+            }
+            const primary = current[0];
+            if (primary?.key === key)
+                return [{ key, dir: primary.dir === "asc" ? "desc" : "asc" }];
+            return [{ key, dir: "asc" }];
+        });
+        setPage(0);
+    }, []);
+    const clearFilters = React.useCallback(() => {
+        setSearch("");
+        onClearFilters?.();
+    }, [setSearch, onClearFilters]);
+    return {
+        rows: state === "ready" ? pageRows : [],
+        state,
+        error,
+        retry: retry ?? (() => { }),
+        totalCount: loading || error ? null : sorted.length,
+        pageIndex,
+        hasNext: pageIndex < pages - 1,
+        hasPrev: pageIndex > 0,
+        next: () => setPage(Math.min(pageIndex + 1, pages - 1)),
+        prev: () => setPage(Math.max(pageIndex - 1, 0)),
+        pageSize,
+        pageSizes: pageSizes ?? PAGE_SIZES,
+        setPageSize,
+        search,
+        setSearch,
+        searchEnabled: Boolean(searchText),
+        isStale: false,
+        sort: sorts.length === 0 ? undefined : sorts.length === 1 ? sorts[0] : sorts,
+        toggleSort,
+        sortEnabled: Boolean(sortBy && Object.keys(sortBy).length > 0),
+        isFiltered,
+        clearFilters,
+    };
+}

package/dist/index.d.ts

@@ -10,17 +10,19 @@ export { MIN_NON_TEXT_CONTRAST, MIN_TEXT_CONTRAST, contrastRatio, luminance, } f
 export { CORNERS, defineProduct, type BrandAccent, type Corners, type Product, type ProductAccent, type ProductConfig, type ProductTheme, } from "./appearance/product.js";
 export { astroliftBrand, chatStudioBrand, cykickBrand, loadrBrand, workbenchBrand, zentinelleBrand, } from "./appearance/brands.js";
 export { accentContrast, appearanceFromServer, applyAppearance, clearAppearance, inkFor, isCustomAccent, modeFor, normalize, normalizePartial, parseCustomAccent, readAppearance, resolveAppearance, writeAppearance, type Appearance, type CustomAccent, type OrgAppearancePolicy, type ResolvedAppearance, } from "./appearance/appearance.js";
-export { appearanceScript, productStyles } from "./appearance/boot.js";
+export { appearanceScript, bootConfig, productStyles, type BootConfig } from "./appearance/boot.js";
+export { BRAND_ACCENT_KEY, brandStyleVars, brandStyles, htmlAttributes, resolveRuntimeBrand, withBrand, type ResolvedRuntimeBrand, type RuntimeBrand, } from "./appearance/runtime-brand.js";
 export { AppearanceScript, type AppearanceScriptProps } from "./appearance/AppearanceScript.js";
 export { AppearanceProvider, useAppearance, useDensity, useProduct, type AppearanceContextValue, type AppearanceProviderProps, } from "./appearance/AppearanceProvider.js";
 export { AppearancePicker, CustomAccentField, type CustomAccentFieldProps, } from "./appearance/AppearancePicker.js";
-export { activeFor, areaSwitcher, localizeNav, visibleNav, type CrumbSwitchOption, type NavActive, type NavArea, type NavFunction, type NavGroup, type NavIcon, type NavModel, } from "./nav/model.js";
+export { activeFor, areaSwitcher, localizeNav, visibleNav, type CrumbSwitchOption, type NavActive, type NavArea, type NavBadge, type NavFunction, type NavGroup, type NavIcon, type NavModel, } from "./nav/model.js";
 export { Nav, type NavProps } from "./nav/Nav.js";
 export { AppShell, type AppShellProps } from "./shell/AppShell.js";
 export { Sidebar, type SidebarProps } from "./shell/Sidebar.js";
-export { BrandMark, type BrandMarkProps } from "./shell/BrandMark.js";
+export { BrandMark, type BrandLogo, type BrandMarkProps } from "./shell/BrandMark.js";
 export { UserMenu, type UserMenuItem, type UserMenuProps } from "./shell/UserMenu.js";
 export { RailPanel, type RailPanelProps } from "./shell/RailPanel.js";
+export { railAttribute, railStyles, type RailBoot } from "./shell/rail-boot.js";
 export { RailTree, type RailTreeGroup, type RailTreeItem, type RailTreeProps, } from "./shell/RailTree.js";
 export { useRailState, useRailWidth } from "./shell/rail-state.js";
 export { PageFrame, type PageFrameProps } from "./page/PageFrame.js";
@@ -28,9 +30,14 @@ export { PageHeader, type PageHeaderProps } from "./page/PageHeader.js";
 export { Breadcrumbs, type BreadcrumbsProps, type Crumb } from "./page/Breadcrumbs.js";
 export { TabNav, type TabNavItem, type TabNavProps } from "./page/TabNav.js";
 export { Section, type SectionProps } from "./page/Section.js";
+export { Panel, type PanelProps } from "./page/Panel.js";
 export { DataTable, type DataTableProps } from "./data/DataTable.js";
 export { List, ListItem, type ListItemProps, type ListProps } from "./data/List.js";
 export { useRowSelection, type RowSelection } from "./data/use-row-selection.js";
+export { useLocalTable, type LocalTableOptions, type SortValue } from "./data/use-local-table.js";
+export { Stat, StatGrid, type StatProps } from "./data/Stat.js";
+export { Tag, TagList, type TagProps } from "./data/Tag.js";
+export { DefinitionList, type Definition, type DefinitionListProps, } from "./data/DefinitionList.js";
 export { DEFAULT_PAGE_SIZE, PAGE_SIZES, type Column, type EmptyStateSpec, type PageState, type SortDirection, type SortState, type TableController, } from "./data/types.js";
 export { StatusBadge, type StatusBadgeProps } from "./status/StatusBadge.js";
 export { StatusDot, type StatusDotProps } from "./status/StatusDot.js";
@@ -45,7 +52,41 @@ export { ConfirmDialog, type ConfirmDialogProps, type ConfirmReason, } from "./o
 export { Button, buttonVariants, type ButtonProps } from "./primitives/Button.js";
 export { Input } from "./primitives/Input.js";
 export { Checkbox } from "./primitives/Checkbox.js";
+export { Textarea } from "./primitives/Textarea.js";
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, type SelectOption, type SelectProps, } from "./primitives/Select.js";
+export { Switch, type SwitchProps } from "./primitives/Switch.js";
+export { Avatar, AvatarStack, initials, type AvatarProps, type AvatarSize, type AvatarStackPerson, type AvatarStackProps, type AvatarSurface, } from "./primitives/Avatar.js";
+export { Segmented, type SegmentedOption, type SegmentedProps } from "./primitives/Segmented.js";
+export { Field, type FieldControlProps, type FieldProps } from "./primitives/Field.js";
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "./primitives/DropdownMenu.js";
 export { Popover, PopoverAnchor, PopoverContent, PopoverHeader, PopoverTrigger, } from "./primitives/Popover.js";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./primitives/Tabs.js";
 export { Skeleton } from "./primitives/Skeleton.js";
+export type { WorkflowAction, WorkflowAvailability, WorkflowModule, WorkflowPermissions, WorkflowScope, WorkflowStatus, WorkflowSummary, } from "./workflow/model.js";
+export { WorkflowCard, WorkflowCardSkeleton, type WorkflowCardActions, type WorkflowCardProps, } from "./workflow/WorkflowCard.js";
+export { WorkflowQuestionCard, type WorkflowQuestionCardProps, } from "./workflow/WorkflowQuestionCard.js";
+export type { WorkflowQuestion, WorkflowQuestionField, WorkflowQuestionState, WorkflowQuestionAnswers, WorkflowQuestionSubmission, } from "./workflow/question.js";
+export { ANY_FILTER, DEFAULT_WORKFLOW_FILTERS, filterWorkflows, isFiltered, type WorkflowGalleryFilters, } from "./workflow/gallery.js";
+export { WorkflowGallery, type WorkflowGalleryProps, type WorkflowGalleryView, } from "./workflow/WorkflowGallery.js";
+export { ARTIFACT_TONE, GATE_TONE, RUN_STAGE_TONE, VERDICT_TONE, type Artifact, type ArtifactStatus, type Gate, type GateStatus, type ReviewComment, type ReviewDecision, type ReviewVerdict, type RunStage, type RunStageStatus, type RunValue, } from "./workflow/run.js";
+export { RunTimeline, type RunTimelineProps } from "./workflow/RunTimeline.js";
+export { GateBadge, type GateBadgeProps } from "./workflow/GateBadge.js";
+export { ArtifactCard, ArtifactList, type ArtifactCardProps, type ArtifactListProps, } from "./workflow/ArtifactCard.js";
+export { ReviewPanel, type ReviewPanelProps } from "./workflow/ReviewPanel.js";
+export { MediaReview, formatTimecode, type MediaAnchor, type MediaCaptionTrack, type MediaComment, type MediaRegion, type MediaReviewProps, } from "./workflow/MediaReview.js";
+export { DocumentReview, type DocumentAnnotation, type DocumentBlock, type DocumentPage, type DocumentReviewProps, type DocumentSegment, type DocumentSignOff, type SignOffStatus, } from "./workflow/DocumentReview.js";
+export { FormReview, type FormField, type FormFieldBox, type FormFieldStatus, type FormReviewProps, type FormSourcePage, } from "./workflow/FormReview.js";
+export { IN, LOOP_IN, LOOP_OUT, OUT, WORKFLOW_DEFINITION_VERSION, WORKFLOW_NODE_KINDS, WORKFLOW_SELECTORS, addNode, canConnect, createNode, dataTypes, downstream, edgeId, exitLabel, exitsOf, findFact, findGateKind, findPreset, freshId, inputsOf, isJudge, moveNode, operatorsFor, outputsOf, portOf, removeEdge, removeNode, startOf, typeAccepts, updateEdge, updateNode, upstream, withFlow, type WorkflowCase, type WorkflowCheckNode, type WorkflowClassifierNode, type WorkflowClassifierOption, type WorkflowCondition, type WorkflowConditionNode, type WorkflowConnectReason, type WorkflowConnectResult, type WorkflowConnection, type WorkflowDataType, type WorkflowDefinition, type WorkflowEdge, type WorkflowEvaluatorNode, type WorkflowFact, type WorkflowFactType, type WorkflowFanoutNode, type WorkflowFlow, type WorkflowGateField, type WorkflowGateKind, type WorkflowGateNode, type WorkflowGatePolicy, type WorkflowGotoNode, type WorkflowJoinNode, type WorkflowJudgeNode, type WorkflowModuleSpec, type WorkflowNode, type WorkflowNodeKind, type WorkflowNodeOf, type WorkflowNodeTemplate, type WorkflowOperator, type WorkflowOption, type WorkflowPort, type WorkflowPosition, type WorkflowRegistry, type WorkflowSelection, type WorkflowSelector, type WorkflowStepNode, type WorkflowStepPreset, type WorkflowSubflowNode, type WorkflowVariant, type WorkflowVariantsNode, } from "./workflow/definition.js";
+export { WORKFLOW_PROBLEM_CODES, blockingProblems, checkDefinition, definitionAvailability, nodeAvailability, type WorkflowProblem, type WorkflowProblemCode, type WorkflowProblemLevel, } from "./workflow/problems.js";
+export { WORKFLOW_PACKAGE_FORMAT, WORKFLOW_PACKAGE_VERSION, diffDefinitions, exportWorkflowPackage, previewWorkflowImport, readWorkflowDefinition, readWorkflowPackage, requirementsOf, sameDefinition, type WorkflowDefinitionDiff, type WorkflowDiffEdge, type WorkflowDiffItem, type WorkflowDisabledNode, type WorkflowFlowDiff, type WorkflowImportSummary, type WorkflowModuleGap, type WorkflowPackage, type WorkflowReadError, type WorkflowReadResult, type WorkflowRequirements, } from "./workflow/portable.js";
+export { NODE_HEADER, NODE_WIDTH, PORT_ROW, arrangeFlow, layoutFlow, nodeSize, portRows, ranksOf, regionsOf, type WorkflowRegion, } from "./workflow/layout.js";
+export { insertPaletteItem, paletteOf, type WorkflowPaletteGroup, type WorkflowPaletteItem, } from "./workflow/palette.js";
+export { READABLE_ZOOM, WorkflowCanvas, type WorkflowCanvasProps, } from "./workflow/canvas/WorkflowCanvas.js";
+export { WorkflowPalette, type WorkflowPaletteProps } from "./workflow/editor/WorkflowPalette.js";
+export { WorkflowProblems, problemTarget, type WorkflowProblemsProps, } from "./workflow/editor/WorkflowProblems.js";
+export { ConditionEditor, GatePolicyEditor, WorkflowInspector, type WorkflowInspectorProps, } from "./workflow/editor/WorkflowInspector.js";
+export { WorkflowJsonView, type WorkflowJsonViewProps, } from "./workflow/editor/WorkflowJsonView.js";
+export { documentStatus, type WorkflowDocumentStatus, type WorkflowRevision, } from "./workflow/workspace.js";
+export { WorkflowDiff, type WorkflowDiffProps } from "./workflow/editor/WorkflowDiff.js";
+export { WorkflowImportPreview, type WorkflowImportPreviewProps, } from "./workflow/editor/WorkflowImportPreview.js";
+export { WorkflowWorkspace, type WorkflowWorkspaceProps, } from "./workflow/editor/WorkflowWorkspace.js";

package/dist/index.js

@@ -13,7 +13,8 @@ export { MIN_NON_TEXT_CONTRAST, MIN_TEXT_CONTRAST, contrastRatio, luminance, } f
 export { CORNERS, defineProduct, } from "./appearance/product.js";
 export { astroliftBrand, chatStudioBrand, cykickBrand, loadrBrand, workbenchBrand, zentinelleBrand, } from "./appearance/brands.js";
 export { accentContrast, appearanceFromServer, applyAppearance, clearAppearance, inkFor, isCustomAccent, modeFor, normalize, normalizePartial, parseCustomAccent, readAppearance, resolveAppearance, writeAppearance, } from "./appearance/appearance.js";
-export { appearanceScript, productStyles } from "./appearance/boot.js";
+export { appearanceScript, bootConfig, productStyles } from "./appearance/boot.js";
+export { BRAND_ACCENT_KEY, brandStyleVars, brandStyles, htmlAttributes, resolveRuntimeBrand, withBrand, } from "./appearance/runtime-brand.js";
 export { AppearanceScript } from "./appearance/AppearanceScript.js";
 export { AppearanceProvider, useAppearance, useDensity, useProduct, } from "./appearance/AppearanceProvider.js";
 export { AppearancePicker, CustomAccentField, } from "./appearance/AppearancePicker.js";
@@ -26,6 +27,7 @@ export { Sidebar } from "./shell/Sidebar.js";
 export { BrandMark } from "./shell/BrandMark.js";
 export { UserMenu } from "./shell/UserMenu.js";
 export { RailPanel } from "./shell/RailPanel.js";
+export { railAttribute, railStyles } from "./shell/rail-boot.js";
 export { RailTree, } from "./shell/RailTree.js";
 export { useRailState, useRailWidth } from "./shell/rail-state.js";
 // Page
@@ -34,10 +36,15 @@ export { PageHeader } from "./page/PageHeader.js";
 export { Breadcrumbs } from "./page/Breadcrumbs.js";
 export { TabNav } from "./page/TabNav.js";
 export { Section } from "./page/Section.js";
+export { Panel } from "./page/Panel.js";
 // Data
 export { DataTable } from "./data/DataTable.js";
 export { List, ListItem } from "./data/List.js";
 export { useRowSelection } from "./data/use-row-selection.js";
+export { useLocalTable } from "./data/use-local-table.js";
+export { Stat, StatGrid } from "./data/Stat.js";
+export { Tag, TagList } from "./data/Tag.js";
+export { DefinitionList, } from "./data/DefinitionList.js";
 export { DEFAULT_PAGE_SIZE, PAGE_SIZES, } from "./data/types.js";
 // Status
 export { StatusBadge } from "./status/StatusBadge.js";
@@ -56,7 +63,39 @@ export { ConfirmDialog, } from "./overlays/ConfirmDialog.js";
 export { Button, buttonVariants } from "./primitives/Button.js";
 export { Input } from "./primitives/Input.js";
 export { Checkbox } from "./primitives/Checkbox.js";
+export { Textarea } from "./primitives/Textarea.js";
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, } from "./primitives/Select.js";
+export { Switch } from "./primitives/Switch.js";
+export { Avatar, AvatarStack, initials, } from "./primitives/Avatar.js";
+export { Segmented } from "./primitives/Segmented.js";
+export { Field } from "./primitives/Field.js";
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "./primitives/DropdownMenu.js";
 export { Popover, PopoverAnchor, PopoverContent, PopoverHeader, PopoverTrigger, } from "./primitives/Popover.js";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./primitives/Tabs.js";
 export { Skeleton } from "./primitives/Skeleton.js";
+export { WorkflowCard, WorkflowCardSkeleton, } from "./workflow/WorkflowCard.js";
+export { WorkflowQuestionCard, } from "./workflow/WorkflowQuestionCard.js";
+export { ANY_FILTER, DEFAULT_WORKFLOW_FILTERS, filterWorkflows, isFiltered, } from "./workflow/gallery.js";
+export { WorkflowGallery, } from "./workflow/WorkflowGallery.js";
+export { ARTIFACT_TONE, GATE_TONE, RUN_STAGE_TONE, VERDICT_TONE, } from "./workflow/run.js";
+export { RunTimeline } from "./workflow/RunTimeline.js";
+export { GateBadge } from "./workflow/GateBadge.js";
+export { ArtifactCard, ArtifactList, } from "./workflow/ArtifactCard.js";
+export { ReviewPanel } from "./workflow/ReviewPanel.js";
+export { MediaReview, formatTimecode, } from "./workflow/MediaReview.js";
+export { DocumentReview, } from "./workflow/DocumentReview.js";
+export { FormReview, } from "./workflow/FormReview.js";
+export { IN, LOOP_IN, LOOP_OUT, OUT, WORKFLOW_DEFINITION_VERSION, WORKFLOW_NODE_KINDS, WORKFLOW_SELECTORS, addNode, canConnect, createNode, dataTypes, downstream, edgeId, exitLabel, exitsOf, findFact, findGateKind, findPreset, freshId, inputsOf, isJudge, moveNode, operatorsFor, outputsOf, portOf, removeEdge, removeNode, startOf, typeAccepts, updateEdge, updateNode, upstream, withFlow, } from "./workflow/definition.js";
+export { WORKFLOW_PROBLEM_CODES, blockingProblems, checkDefinition, definitionAvailability, nodeAvailability, } from "./workflow/problems.js";
+export { WORKFLOW_PACKAGE_FORMAT, WORKFLOW_PACKAGE_VERSION, diffDefinitions, exportWorkflowPackage, previewWorkflowImport, readWorkflowDefinition, readWorkflowPackage, requirementsOf, sameDefinition, } from "./workflow/portable.js";
+export { NODE_HEADER, NODE_WIDTH, PORT_ROW, arrangeFlow, layoutFlow, nodeSize, portRows, ranksOf, regionsOf, } from "./workflow/layout.js";
+export { insertPaletteItem, paletteOf, } from "./workflow/palette.js";
+export { READABLE_ZOOM, WorkflowCanvas, } from "./workflow/canvas/WorkflowCanvas.js";
+export { WorkflowPalette } from "./workflow/editor/WorkflowPalette.js";
+export { WorkflowProblems, problemTarget, } from "./workflow/editor/WorkflowProblems.js";
+export { ConditionEditor, GatePolicyEditor, WorkflowInspector, } from "./workflow/editor/WorkflowInspector.js";
+export { WorkflowJsonView, } from "./workflow/editor/WorkflowJsonView.js";
+export { documentStatus, } from "./workflow/workspace.js";
+export { WorkflowDiff } from "./workflow/editor/WorkflowDiff.js";
+export { WorkflowImportPreview, } from "./workflow/editor/WorkflowImportPreview.js";
+export { WorkflowWorkspace, } from "./workflow/editor/WorkflowWorkspace.js";

package/dist/nav/Nav.d.ts

@@ -16,6 +16,7 @@ export interface NavProps {
  * is a heading that folds, over its groups and rows; a flat area (Home,
  * Overview) is just its rows. Collapsed, each area is an icon, and hovering,
  * focusing or pressing it opens its rows as a flyout. The current row is the
- * one lit row: an accent tint and a 2px accent edge.
+ * one lit row: a tint and a 2px edge in the sidebar's marker colour
+ * (`--sidebar-primary`, the accent unless a brand sets one).
  */
 export declare function Nav({ nav, active, collapsed, onNavigate, className }: NavProps): React.JSX.Element;

package/dist/nav/Nav.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon } from "lucide-react";
 import * as React from "react";
 import { cn } from "../lib/cn.js";
@@ -10,20 +10,33 @@ import { useUI } from "../provider/UIProvider.js";
  * is a heading that folds, over its groups and rows; a flat area (Home,
  * Overview) is just its rows. Collapsed, each area is an icon, and hovering,
  * focusing or pressing it opens its rows as a flyout. The current row is the
- * one lit row: an accent tint and a 2px accent edge.
+ * one lit row: a tint and a 2px edge in the sidebar's marker colour
+ * (`--sidebar-primary`, the accent unless a brand sets one).
  */
 export function Nav({ nav, active, collapsed = false, onNavigate, className }) {
     return (_jsx("div", { className: cn("flex flex-col", collapsed ? "items-center gap-1" : "gap-2", className), children: nav.map((area) => collapsed ? (_jsx(CollapsedArea, { area: area, active: active, onNavigate: onNavigate }, area.key)) : (_jsx(ExpandedArea, { area: area, active: active, onNavigate: onNavigate }, area.key))) }));
 }
-function FunctionLink({ fn, isActive, onNavigate, }) {
+/** A count past 99 reads "99+". */
+function badgeText(value) {
+    return typeof value === "number" && value > 99 ? "99+" : String(value);
+}
+/** The visible badge; hidden from the accessibility tree, which hears `label` instead. */
+function Badge({ badge, className }) {
+    return (_jsx("span", { "aria-hidden": true, className: cn("inline-flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full px-1 font-mono text-2xs leading-none font-medium tabular-nums", badge.tone === "attention"
+            ? "bg-sidebar-primary/25 text-sidebar-foreground ring-1 ring-sidebar-primary/70"
+            : "bg-sidebar-foreground/10 text-sidebar-foreground/80", className), children: badgeText(badge.value) }));
+}
+function FunctionLink({ fn, isActive, flyout, onNavigate, }) {
     const { Link } = useUI();
     const Icon = fn.icon;
     return (_jsxs(Link, { href: fn.href, onClick: onNavigate, "aria-current": isActive ? "page" : undefined, ...fn.attributes, className: cn("flex h-8 min-w-0 items-center gap-2 rounded-lg px-2 text-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", isActive
-            ? "bg-primary/15 font-medium text-sidebar-foreground shadow-[inset_2px_0_0_var(--primary)]"
-            : "text-sidebar-foreground/80 hover:bg-sidebar-accent/60 hover:text-sidebar-foreground"), children: [Icon && _jsx(Icon, { className: "size-4 shrink-0 opacity-80", "aria-hidden": true }), _jsx("span", { className: "truncate", children: fn.label })] }));
+            ? flyout
+                ? "bg-primary/15 font-medium text-sidebar-foreground shadow-[inset_2px_0_0_var(--primary)]"
+                : "bg-sidebar-primary/15 font-medium text-sidebar-foreground shadow-[inset_2px_0_0_var(--sidebar-primary)]"
+            : "text-sidebar-foreground/80 hover:bg-sidebar-accent/60 hover:text-sidebar-foreground"), children: [Icon && _jsx(Icon, { className: "size-4 shrink-0 opacity-80", "aria-hidden": true }), _jsx("span", { className: "truncate", children: fn.label }), (fn.badge || fn.trailing) && " ", (fn.badge || fn.trailing) && (_jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [fn.trailing, fn.badge && (_jsxs(_Fragment, { children: [" ", _jsx("span", { className: "sr-only", children: fn.badge.label }), _jsx(Badge, { badge: fn.badge })] }))] }))] }));
 }
-function Rows({ area, active, onNavigate, }) {
-    return (_jsx(_Fragment, { children: area.groups.map((group, i) => (_jsxs("div", { className: "flex flex-col gap-0.5", children: [group.label && (_jsx("div", { className: "px-2 pt-2 pb-1 text-2xs text-muted-foreground", children: group.label })), group.functions.map((fn) => (_jsx(FunctionLink, { fn: fn, isActive: active?.area === area.key && active.fn === fn.key, onNavigate: onNavigate }, fn.key)))] }, group.key ?? group.label ?? i))) }));
+function Rows({ area, active, flyout = false, onNavigate, }) {
+    return (_jsx(_Fragment, { children: area.groups.map((group, i) => (_jsxs("div", { className: "flex flex-col gap-0.5", children: [group.label && (_jsx("div", { className: cn("px-2 pt-2 pb-1 text-2xs", flyout ? "text-muted-foreground" : "text-sidebar-muted-foreground"), children: group.label })), group.functions.map((fn) => (_jsx(FunctionLink, { fn: fn, isActive: active?.area === area.key && active.fn === fn.key, flyout: flyout, onNavigate: onNavigate }, fn.key)))] }, group.key ?? group.label ?? i))) }));
 }
 function ExpandedArea({ area, active, onNavigate, }) {
     const [open, setOpen] = React.useState(true);
@@ -31,12 +44,12 @@ function ExpandedArea({ area, active, onNavigate, }) {
     if (area.flat) {
         return (_jsx("div", { className: "flex flex-col gap-0.5", children: _jsx(Rows, { area: area, active: active, onNavigate: onNavigate }) }));
     }
-    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("button", { type: "button", onClick: () => setOpen((o) => !o), "aria-expanded": open, "aria-controls": regionId, className: "flex h-7 w-full items-center justify-between rounded-lg px-2 text-2xs font-semibold tracking-wider text-muted-foreground uppercase hover:text-sidebar-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", children: [area.label, _jsx(ChevronDownIcon, { className: cn("size-3 transition-transform", !open && "-rotate-90"), "aria-hidden": true })] }), _jsx("div", { id: regionId, hidden: !open, className: "flex flex-col gap-0.5", children: _jsx(Rows, { area: area, active: active, onNavigate: onNavigate }) })] }));
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("button", { type: "button", onClick: () => setOpen((o) => !o), "aria-expanded": open, "aria-controls": regionId, className: "flex h-7 w-full items-center justify-between rounded-lg px-2 text-2xs font-semibold tracking-wider text-sidebar-muted-foreground uppercase hover:text-sidebar-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", children: [area.label, _jsx(ChevronDownIcon, { className: cn("size-3 transition-transform", !open && "-rotate-90"), "aria-hidden": true })] }), _jsx("div", { id: regionId, hidden: !open, className: "flex flex-col gap-0.5", children: _jsx(Rows, { area: area, active: active, onNavigate: onNavigate }) })] }));
 }
 /** How long the pointer may be away from a flyout before it closes. */
 const FLYOUT_GRACE_MS = 150;
 function CollapsedArea({ area, active, onNavigate, }) {
-    const { Link } = useUI();
+    const { Link, messages } = useUI();
     const [open, setOpen] = React.useState(false);
     const pointerOpened = React.useRef(false);
     const closeTimer = React.useRef(null);
@@ -52,12 +65,18 @@ function CollapsedArea({ area, active, onNavigate, }) {
                 clearTimeout(timer.current);
         };
     }, []);
-    const tile = (_jsx("span", { className: cn("flex size-8 items-center justify-center rounded-lg", isActive
-            ? "bg-primary/15 text-sidebar-foreground shadow-[inset_2px_0_0_var(--primary)]"
-            : "text-sidebar-foreground/80 hover:bg-sidebar-accent/60"), children: _jsx(Icon, { className: "size-4", "aria-hidden": true }) }));
+    const badged = area.groups.some((group) => group.functions.some((fn) => fn.badge));
+    const onlyBadge = only?.badge;
+    const tile = (_jsxs("span", { className: cn("relative flex size-8 items-center justify-center rounded-lg", isActive
+            ? "bg-sidebar-primary/15 text-sidebar-foreground shadow-[inset_2px_0_0_var(--sidebar-primary)]"
+            : "text-sidebar-foreground/80 hover:bg-sidebar-accent/60"), children: [_jsx(Icon, { className: "size-4", "aria-hidden": true }), onlyBadge ? (_jsx(Badge, { badge: onlyBadge, className: "absolute -top-1 -right-1.5 h-3.5 min-w-3.5 px-0.5" })) : (badged && (_jsx("span", { "aria-hidden": true, className: "absolute top-1 right-1 size-1.5 rounded-full bg-sidebar-primary ring-2 ring-sidebar" })))] }));
     // One row: the icon is that row's link, no flyout needed.
     if (only) {
-        return (_jsx(Link, { href: only.href, onClick: onNavigate, "aria-label": area.flat ? only.label : area.label, title: area.flat ? only.label : area.label, "aria-current": isActive ? "page" : undefined, ...only.attributes, className: "flex rounded-lg focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", children: tile }));
+        return (_jsx(Link, { href: only.href, onClick: onNavigate, "aria-label": onlyBadge
+                ? messages.nav.withBadge(area.flat ? only.label : area.label, onlyBadge.label)
+                : area.flat
+                    ? only.label
+                    : area.label, title: area.flat ? only.label : area.label, "aria-current": isActive ? "page" : undefined, ...only.attributes, className: "flex rounded-lg focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", children: tile }));
     }
     const cancelClose = () => {
         if (closeTimer.current)
@@ -72,7 +91,7 @@ function CollapsedArea({ area, active, onNavigate, }) {
             if (!next)
                 pointerOpened.current = false;
             setOpen(next);
-        }, children: [_jsx(PopoverTrigger, { "aria-label": area.label, title: area.label, className: "flex rounded-lg focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", onPointerEnter: (event) => {
+        }, children: [_jsx(PopoverTrigger, { "aria-label": badged ? messages.nav.areaWithBadges(area.label) : area.label, title: area.label, className: "flex rounded-lg focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", onPointerEnter: (event) => {
                     if (event.pointerType !== "mouse")
                         return;
                     cancelClose();
@@ -90,7 +109,7 @@ function CollapsedArea({ area, active, onNavigate, }) {
                 }, onPointerEnter: cancelClose, onPointerLeave: (event) => {
                     if (event.pointerType === "mouse")
                         scheduleClose();
-                }, children: [_jsx("div", { className: "px-2 pb-1 text-2xs font-semibold tracking-wider text-muted-foreground uppercase", children: area.label }), _jsx(Rows, { area: area, active: active, onNavigate: () => {
+                }, children: [_jsx("div", { className: "px-2 pb-1 text-2xs font-semibold tracking-wider text-muted-foreground uppercase", children: area.label }), _jsx(Rows, { area: area, active: active, flyout: true, onNavigate: () => {
                             setOpen(false);
                             onNavigate?.();
                         } })] })] }));

package/dist/nav/model.d.ts

@@ -12,6 +12,19 @@ export type NavIcon = React.ComponentType<{
     className?: string;
     "aria-hidden"?: boolean;
 }>;
+/**
+ * A count or a short word beside a row: unread items, things needing
+ * attention, "new". `label` is what a screen reader hears in place of the
+ * visible value ("3 unread"), so say what it counts.
+ */
+export interface NavBadge {
+    /** A count (shown as "99+" past 99) or a short word. */
+    value: number | string;
+    /** The accessible text: "3 unread", "2 need attention". */
+    label: string;
+    /** `attention` draws it in the sidebar's marker colour; `neutral` (the default) is quiet. */
+    tone?: "neutral" | "attention";
+}
 export interface NavFunction {
     key: string;
     label: string;
@@ -27,6 +40,14 @@ export interface NavFunction {
     also?: readonly string[];
     /** Extra attributes on the row's link, such as a tour anchor (`data-tour`). */
     attributes?: Readonly<Record<`data-${string}`, string>>;
+    /** A count or short word after the label, in expanded rows and the collapsed flyout; collapsed, the area's icon carries a mark. */
+    badge?: NavBadge;
+    /**
+     * Anything else after the label: presence avatars, a status dot. Inside
+     * the row's link, so nothing interactive; decorative unless it names
+     * itself. Not shown on the collapsed icon.
+     */
+    trailing?: React.ReactNode;
 }
 export interface NavGroup {
     key?: string;

package/dist/page/PageHeader.d.ts

@@ -3,6 +3,8 @@ import { type Crumb } from "./Breadcrumbs.js";
 import { type TabNavItem } from "./TabNav.js";
 export interface PageHeaderProps {
     crumbs?: readonly Crumb[];
+    /** A short line above the title: the kind of thing (a project, a run) or the section it sits in. */
+    eyebrow?: React.ReactNode;
     title: React.ReactNode;
     /** A status badge beside the title. */
     status?: React.ReactNode;
@@ -28,7 +30,7 @@ export interface PageHeaderProps {
 }
 /**
  * Every page's header, in three rows (Astrolift spec 44 §4.4): the
- * breadcrumb, the title row with its status, context and actions, and at
- * most one row of tabs. Pure.
+ * breadcrumb, the title row (an optional eyebrow over the title) with its
+ * status, context and actions, and at most one row of tabs. Pure.
  */
-export declare function PageHeader({ crumbs, title, status, context, description, primaryAction, menu, tabs, tabsLabel, tabsClassName, className, }: PageHeaderProps): React.JSX.Element;
+export declare function PageHeader({ crumbs, eyebrow, title, status, context, description, primaryAction, menu, tabs, tabsLabel, tabsClassName, className, }: PageHeaderProps): React.JSX.Element;

package/dist/page/PageHeader.js

@@ -5,9 +5,10 @@ import { Breadcrumbs } from "./Breadcrumbs.js";
 import { TabNav } from "./TabNav.js";
 /**
  * Every page's header, in three rows (Astrolift spec 44 §4.4): the
- * breadcrumb, the title row with its status, context and actions, and at
- * most one row of tabs. Pure.
+ * breadcrumb, the title row (an optional eyebrow over the title) with its
+ * status, context and actions, and at most one row of tabs. Pure.
  */
-export function PageHeader({ crumbs, title, status, context, description, primaryAction, menu, tabs, tabsLabel = "Page", tabsClassName, className, }) {
-    return (_jsxs("header", { "data-slot": "page-header", className: cn("flex min-w-0 flex-col gap-3", className), children: [crumbs && crumbs.length > 0 && _jsx(Breadcrumbs, { crumbs: crumbs }), _jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2", children: [_jsx("h1", { className: "min-w-0 truncate font-head text-xl font-semibold", children: title }), status, context && (_jsx("span", { className: "min-w-0 truncate text-sm text-muted-foreground", children: context })), (primaryAction || menu) && (_jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: [primaryAction, menu] }))] }), description && (_jsx("div", { className: "max-w-2xl text-sm [overflow-wrap:anywhere] text-muted-foreground", children: description })), tabs && tabs.length > 0 && (_jsx(TabNav, { tabs: tabs, label: tabsLabel, className: cn("-mx-3 md:-mx-6", tabsClassName) }))] }));
+export function PageHeader({ crumbs, eyebrow, title, status, context, description, primaryAction, menu, tabs, tabsLabel = "Page", tabsClassName, className, }) {
+    const heading = _jsx("h1", { className: "min-w-0 truncate font-head text-xl font-semibold", children: title });
+    return (_jsxs("header", { "data-slot": "page-header", className: cn("flex min-w-0 flex-col gap-3", className), children: [crumbs && crumbs.length > 0 && _jsx(Breadcrumbs, { crumbs: crumbs }), _jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2", children: [eyebrow ? (_jsxs("hgroup", { className: "flex min-w-0 flex-col", children: [_jsx("p", { className: "truncate font-mono text-2xs font-medium tracking-wider text-muted-foreground uppercase", children: eyebrow }), heading] })) : (heading), status, context && (_jsx("span", { className: "min-w-0 truncate text-sm text-muted-foreground", children: context })), (primaryAction || menu) && (_jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: [primaryAction, menu] }))] }), description && (_jsx("div", { className: "max-w-2xl text-sm [overflow-wrap:anywhere] text-muted-foreground", children: description })), tabs && tabs.length > 0 && (_jsx(TabNav, { tabs: tabs, label: tabsLabel, className: cn("-mx-3 md:-mx-6", tabsClassName) }))] }));
 }

package/dist/page/Panel.d.ts

@@ -0,0 +1,19 @@
+import type * as React from "react";
+export interface PanelProps extends Omit<React.ComponentProps<"div">, "title"> {
+    /** A short heading inside the box. */
+    title?: React.ReactNode;
+    /** A line over the title: what kind of thing the panel holds. */
+    eyebrow?: React.ReactNode;
+    /** Controls beside the title (a link, a small button). */
+    actions?: React.ReactNode;
+    /** For the document outline. Defaults to h3, under a page's h1 and a Section's h2. */
+    headingLevel?: "h2" | "h3" | "h4";
+    /** No padding around the body, for a table or a list that runs to the edges. */
+    flush?: boolean;
+}
+/**
+ * The bordered surface of `PageFrame > Section > Panel`: a card with an
+ * optional heading row, padded by the density (`--panel-pad`). The second
+ * container level, so it never holds a Section or another Panel.
+ */
+export declare function Panel({ title, eyebrow, actions, headingLevel, flush, className, children, ...props }: PanelProps): React.JSX.Element;

package/dist/page/Panel.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+/**
+ * The bordered surface of `PageFrame > Section > Panel`: a card with an
+ * optional heading row, padded by the density (`--panel-pad`). The second
+ * container level, so it never holds a Section or another Panel.
+ */
+export function Panel({ title, eyebrow, actions, headingLevel = "h3", flush = false, className, children, ...props }) {
+    const Heading = headingLevel;
+    const hasHeader = Boolean(title || eyebrow || actions);
+    return (_jsxs("div", { "data-slot": "panel", className: cn("flex min-w-0 flex-col overflow-hidden rounded-lg border bg-card text-card-foreground", className), ...props, children: [hasHeader && (_jsxs("div", { className: cn("flex min-w-0 items-start justify-between gap-3 px-(--panel-pad) pt-(--panel-pad)", flush && "border-b pb-3"), children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [eyebrow && (_jsx("p", { className: "truncate font-mono text-2xs font-medium tracking-wider text-muted-foreground uppercase", children: eyebrow })), title && (_jsx(Heading, { className: "text-sm font-medium [overflow-wrap:anywhere]", children: title }))] }), actions && _jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions })] })), _jsx("div", { className: cn("flex min-w-0 flex-col gap-3", !flush && "p-(--panel-pad)", !flush && hasHeader && "pt-3"), children: children })] }));
+}

package/dist/primitives/Avatar.d.ts

@@ -0,0 +1,37 @@
+/** Up to two initials from a name, upper case; "?" for a name with none. */
+export declare function initials(name: string): string;
+export type AvatarSize = "sm" | "md" | "lg";
+/** What the avatar's ring separates it from, in a stack. */
+export type AvatarSurface = "background" | "card" | "sidebar";
+export interface AvatarProps {
+    /** The person's name: the initials, and the accessible name unless `decorative`. */
+    name: string;
+    /** A picture; the initials show until it loads, and if it fails. */
+    src?: string;
+    size?: AvatarSize;
+    /** The name is already visible beside it: hide the avatar from assistive tech. */
+    decorative?: boolean;
+    className?: string;
+}
+/** A person: their picture, or their initials on a neutral disc. */
+export declare function Avatar({ name, src, size, decorative, className }: AvatarProps): import("react").JSX.Element;
+export interface AvatarStackPerson {
+    name: string;
+    src?: string;
+    /** Stable identity when names repeat. */
+    id?: string;
+}
+export interface AvatarStackProps {
+    people: readonly AvatarStackPerson[];
+    /** How many avatars show before "+n". Defaults to 3. */
+    max?: number;
+    size?: AvatarSize;
+    /** The surface behind the stack, for the ring between avatars. Defaults to the page background. */
+    surface?: AvatarSurface;
+    className?: string;
+}
+/**
+ * Several people, overlapping: who is here, who owns it. Read as one phrase
+ * ("Leo Mata, Ana Ruiz and 2 more"), from `messages.avatar.people`.
+ */
+export declare function AvatarStack({ people, max, size, surface, className, }: AvatarStackProps): import("react").JSX.Element | null;

package/dist/primitives/Avatar.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar as AvatarPrimitive } from "radix-ui";
+import { cn } from "../lib/cn.js";
+import { useUI } from "../provider/UIProvider.js";
+/** Up to two initials from a name, upper case; "?" for a name with none. */
+export function initials(name) {
+    return (name
+        .trim()
+        .split(/\s+/)
+        .map((part) => part[0])
+        .filter(Boolean)
+        .slice(0, 2)
+        .join("")
+        .toUpperCase() || "?");
+}
+const SIZE = {
+    sm: "size-5 text-2xs",
+    md: "size-7 text-xs",
+    lg: "size-9 text-sm",
+};
+const RING = {
+    background: "ring-2 ring-background",
+    card: "ring-2 ring-card",
+    sidebar: "ring-2 ring-sidebar",
+};
+/** A person: their picture, or their initials on a neutral disc. */
+export function Avatar({ name, src, size = "md", decorative = false, className }) {
+    return (_jsxs(AvatarPrimitive.Root, { "data-slot": "avatar", "data-size": size, role: decorative ? undefined : "img", "aria-label": decorative ? undefined : name, "aria-hidden": decorative || undefined, title: decorative ? undefined : name, className: cn("relative flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted font-mono font-medium text-foreground select-none", SIZE[size], className), children: [src && (_jsx(AvatarPrimitive.Image, { src: src, alt: "", className: "size-full rounded-full object-cover" })), _jsx(AvatarPrimitive.Fallback, { children: initials(name) })] }));
+}
+/**
+ * Several people, overlapping: who is here, who owns it. Read as one phrase
+ * ("Leo Mata, Ana Ruiz and 2 more"), from `messages.avatar.people`.
+ */
+export function AvatarStack({ people, max = 3, size = "md", surface = "background", className, }) {
+    const { messages } = useUI();
+    if (people.length === 0)
+        return null;
+    // "+1" would take the place of the one avatar it hides: show that one instead.
+    const shown = people.length > max + 1 ? people.slice(0, max) : people;
+    const more = people.length - shown.length;
+    return (_jsxs("div", { "data-slot": "avatar-stack", role: "img", "aria-label": messages.avatar.people(shown.map((p) => p.name), more), title: people.map((p) => p.name).join(", "), className: cn("flex min-w-0 items-center -space-x-1.5", className), children: [shown.map((person, i) => (_jsx(Avatar, { name: person.name, src: person.src, size: size, decorative: true, className: RING[surface] }, person.id ?? `${person.name}-${i}`))), more > 0 && (_jsxs("span", { "aria-hidden": true, className: cn("relative flex shrink-0 items-center justify-center rounded-full bg-secondary font-mono font-medium text-muted-foreground tabular-nums", SIZE[size], RING[surface]), children: ["+", more] }))] }));
+}