@stll/ui 0.6.0 → 0.7.0

package/README.md

@@ -20,6 +20,7 @@ so a bundler keeps only what is imported:
 
 ```tsx
 import { Button } from "@stll/ui/button";
+import { ApplicationShell } from "@stll/ui/application-shell";
 import { Dialog, DialogPopup } from "@stll/ui/dialog";
 import { Inspector, InspectorDock } from "@stll/ui/inspector";
 import { cn } from "@stll/ui/utils";
@@ -29,6 +30,25 @@ One flat subpath per module: `@stll/ui/<name>` for components, hooks, and
 helpers alike. `@stll/ui` re-exports all of them under one specifier for
 convenience; the subpaths are the real surface, and in-repo code uses those.
 
+## Application shell
+
+`ApplicationShell` keeps the navigation, page chrome and content, and an
+optional inline-end inspector as sibling columns. Pass the host application's
+surfaces as slots; route state, navigation behavior, and inspector behavior
+remain in the host.
+
+```tsx
+import { ApplicationShell } from "@stll/ui/application-shell";
+
+<ApplicationShell
+  header={<PageHeader />}
+  inspector={<InspectorDock />}
+  sidebar={<Navigation />}
+>
+  <Page />
+</ApplicationShell>;
+```
+
 ### Deprecated grouped subpaths
 
 `@stll/ui/components/<name>`, `@stll/ui/hooks/<name>`, and

package/dist/components/application-shell.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+//#region src/components/application-shell.d.ts
+type ApplicationShellProps = {
+  /**
+   * The application navigation surface. It stays a direct sibling of the
+   * content column so sidebar implementations can reserve their own width.
+   */
+  sidebar: ReactNode;
+  /** The route chrome rendered above the application content. */
+  header?: ReactNode | undefined;
+  /** An optional dock or rail at the inline-end edge. */
+  inspector?: ReactNode | undefined;
+  /** The active route or page content. */
+  children: ReactNode;
+  className?: string | undefined;
+  mainClassName?: string | undefined;
+};
+/**
+ * The three-column application frame: navigation, page chrome and content,
+ * then an optional inline-end inspector. Product navigation, route state, and
+ * inspector behaviour stay in the host; this primitive only owns the layout
+ * relationship that lets those surfaces share a viewport without nesting one
+ * inside another.
+ */
+declare const ApplicationShell: ({ children, className, header, inspector, mainClassName, sidebar }: ApplicationShellProps) => import("react").JSX.Element;
+//#endregion
+export { ApplicationShell, type ApplicationShellProps };

package/dist/components/application-shell.js

@@ -0,0 +1,25 @@
+import { cn } from "../lib/utils.js";
+import { jsxs } from "react/jsx-runtime";
+//#region src/components/application-shell.tsx
+/**
+* The three-column application frame: navigation, page chrome and content,
+* then an optional inline-end inspector. Product navigation, route state, and
+* inspector behaviour stay in the host; this primitive only owns the layout
+* relationship that lets those surfaces share a viewport without nesting one
+* inside another.
+*/
+const ApplicationShell = ({ children, className, header, inspector, mainClassName, sidebar }) => /* @__PURE__ */ jsxs("div", {
+	className: cn("flex min-h-svh w-full", className),
+	"data-slot": "application-shell",
+	children: [
+		sidebar,
+		/* @__PURE__ */ jsxs("main", {
+			className: cn("bg-background relative flex w-full flex-1 flex-col overflow-hidden", "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2", mainClassName),
+			"data-slot": "application-shell-main",
+			children: [header, children]
+		}),
+		inspector
+	]
+});
+//#endregion
+export { ApplicationShell };

package/dist/components/button-variants.d.ts

@@ -10,8 +10,8 @@
  */
 declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
 declare const buttonVariants: (props?: ({
-  size?: "sm" | "default" | "lg" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "xl" | "xs" | null | undefined;
-  variant?: "link" | "default" | "destructive" | "destructive-outline" | "ghost" | "outline" | "secondary" | null | undefined;
+  size?: "xs" | "sm" | "icon" | "default" | "lg" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "xl" | null | undefined;
+  variant?: "destructive" | "outline" | "link" | "default" | "destructive-outline" | "ghost" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 export { buttonAccessibleDisabledClass, buttonVariants };

package/dist/components/input-group.d.ts

@@ -5,7 +5,7 @@ import * as React$1 from "react";
 //#region src/components/input-group.d.ts
 declare const InputGroup: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-  align?: "inline-end" | "inline-start" | "block-start" | "block-end" | null | undefined;
+  align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const InputGroupAddon: ({ className, align, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) => React$1.JSX.Element;
 declare const InputGroupText: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import "./calendar/index.js";
 import { Accordion, AccordionContent as AccordionPanel, AccordionItem, AccordionTrigger } from "./components/accordion.js";
 import { OVERLAY_LAYER_CLASS_NAMES, OverlayLayer } from "./lib/overlay-layer.js";
 import { AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogContent as AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport } from "./components/alert-dialog.js";
+import { ApplicationShell, ApplicationShellProps } from "./components/application-shell.js";
 import { Avatar, AvatarFallback, AvatarImage } from "./components/avatar.js";
 import { BidiDirection, BidiText, BidiTextProps, UserText } from "./components/bidi-text.js";
 import { DiscordLogoIcon, GitHubLogoIcon } from "./components/brand-icons.js";
@@ -72,6 +73,14 @@ import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, RegisterKanbanBoardAutoScrollOptions,
 import { ColorVariants, OptionColor, emptyColor, optionColors, resolveOptionColor } from "./lib/option-color.js";
 import { KanbanBuiltInGroup, KanbanGroup, KanbanGroupOption, KanbanGrouping, KanbanSchema, ResolveKanbanGroupingParams, getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./kanban/grouping.js";
 import "./kanban/index.js";
+import { getInitials } from "./lib/initials.js";
 import { cn, composeRefs } from "./lib/utils.js";
 import { getFirstWeekday, getLocaleWeekInfo, getWeekendDays } from "./lib/week.js";
-export { Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AnchoredToastProvider, Avatar, AvatarFallback, AvatarImage, type BidiDirection, BidiText, type BidiTextProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CalendarCell, type CalendarDateRange, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, Checkbox, ColorPicker, ColorPickerContent, type ColorPickerContentProps, type ColorPickerProps, type ColorPreset, ColorVariants, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut, DEFAULT_PRESETS, DataTable, type DataTableAriaSort, type DataTableColumn, type DataTableProps, type DataTableRowAction, DatePickerPopover, type DatePickerPopoverProps, DestructiveActionConfirmation, DestructiveConfirmDialog, type DestructiveConfirmDialogProps, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DirectionalIcon, DiscordLogoIcon, Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, GitHubLogoIcon, HexColorPicker, type HexColorPickerProps, PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTitle, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, type KanbanBuiltInGroup, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanDirection, KanbanDragHandle, type KanbanDragHandleProps, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanHorizontalEdge, type KanbanSchema, type KanbanSortableBindings, KanbanSortableBoard, type KanbanSortableBoardProps, KanbanSortableColumns, type KanbanSortableColumnsProps, KanbanSortableList, type KanbanSortableListProps, Label, MenuPreviewLayout, OVERLAY_LAYER_CLASS_NAMES, OptionColor, OutlineItem, OutlineRail, OutlineRailProps, OverlayLayer, PROPERTY_ROW_GRID, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupingParams, ResourceCalendar, type ResourceCalendarColumn, type ResourceCalendarEntry, type ResourceCalendarEntryTone, type ResourceCalendarLaneLayout, type ResourceCalendarLanePlacement, type ResourceCalendarPlacement, type ResourceCalendarResource, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, ScrollToTopProps, SecretInput, type SecretInputProps, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, type SheetSide, SheetTitle, SheetTrigger, Skeleton, type SortDirection, SortableHead, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, Table, TableBody, TableCaption, TableCell, type TableColumnCapabilities, type TableColumnDescriptor, TableFooter, TableHead, TableHeader, TableRow, type TableSchema, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, type TextareaProps, type ToastPosition, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, type UseKanbanSortableOptions, UserText, assertConsecutiveCalendarDates, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, layoutResourceCalendarEntries, nextCalendarDate, optionColors, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanSortable, useKanbanSortableSensors, useLatest, useViewportWidth, visibleColumnIds };
+import { ReviewAuthorAvatar, UNKNOWN_AUTHOR_LABEL } from "./review/review-author-avatar.js";
+import { ReviewCommentAuthor, ReviewCommentCard } from "./review/review-comment-card.js";
+import { ReviewDecisionActions, ReviewDecisionSize, ReviewDecisionState } from "./review/review-decision-actions.js";
+import { ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffSegment, ReviewDiffSegmentType, ReviewDiffText, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, reviewDiffSegmentKeys } from "./review/review-diff-text.js";
+import { ReviewOutOfDateNotice, ReviewOutOfDateReason, ReviewOutOfDateTone } from "./review/review-out-of-date-notice.js";
+import { ReviewStatusBadge, ReviewStatusSize, ReviewStatusTone, ReviewStatusVariant } from "./review/review-status-badge.js";
+import { ReviewSeverityDot, ReviewSeverityLevel, ReviewStatusDot, reviewSeverityTone } from "./review/review-severity-dot.js";
+export { Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AnchoredToastProvider, ApplicationShell, type ApplicationShellProps, Avatar, AvatarFallback, AvatarImage, type BidiDirection, BidiText, type BidiTextProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CalendarCell, type CalendarDateRange, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, Checkbox, ColorPicker, ColorPickerContent, type ColorPickerContentProps, type ColorPickerProps, type ColorPreset, ColorVariants, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut, DEFAULT_PRESETS, DataTable, type DataTableAriaSort, type DataTableColumn, type DataTableProps, type DataTableRowAction, DatePickerPopover, type DatePickerPopoverProps, DestructiveActionConfirmation, DestructiveConfirmDialog, type DestructiveConfirmDialogProps, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DirectionalIcon, DiscordLogoIcon, Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, GitHubLogoIcon, HexColorPicker, type HexColorPickerProps, PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTitle, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, type KanbanBuiltInGroup, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanDirection, KanbanDragHandle, type KanbanDragHandleProps, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanHorizontalEdge, type KanbanSchema, type KanbanSortableBindings, KanbanSortableBoard, type KanbanSortableBoardProps, KanbanSortableColumns, type KanbanSortableColumnsProps, KanbanSortableList, type KanbanSortableListProps, Label, MenuPreviewLayout, OVERLAY_LAYER_CLASS_NAMES, OptionColor, OutlineItem, OutlineRail, OutlineRailProps, OverlayLayer, PROPERTY_ROW_GRID, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupingParams, ResourceCalendar, type ResourceCalendarColumn, type ResourceCalendarEntry, type ResourceCalendarEntryTone, type ResourceCalendarLaneLayout, type ResourceCalendarLanePlacement, type ResourceCalendarPlacement, type ResourceCalendarResource, ReviewAuthorAvatar, ReviewCommentAuthor, ReviewCommentCard, ReviewDecisionActions, ReviewDecisionSize, ReviewDecisionState, ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffSegment, ReviewDiffSegmentType, ReviewDiffText, ReviewOutOfDateNotice, ReviewOutOfDateReason, ReviewOutOfDateTone, ReviewSeverityDot, ReviewSeverityLevel, ReviewStatusBadge, ReviewStatusDot, ReviewStatusSize, ReviewStatusTone, ReviewStatusVariant, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, ScrollToTopProps, SecretInput, type SecretInputProps, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, type SheetSide, SheetTitle, SheetTrigger, Skeleton, type SortDirection, SortableHead, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, Table, TableBody, TableCaption, TableCell, type TableColumnCapabilities, type TableColumnDescriptor, TableFooter, TableHead, TableHeader, TableRow, type TableSchema, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, type TextareaProps, type ToastPosition, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, UNKNOWN_AUTHOR_LABEL, type UseKanbanSortableOptions, UserText, assertConsecutiveCalendarDates, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getInitials, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, layoutResourceCalendarEntries, nextCalendarDate, optionColors, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, reviewDiffSegmentKeys, reviewSeverityTone, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanSortable, useKanbanSortableSensors, useLatest, useViewportWidth, visibleColumnIds };

package/dist/index.js

@@ -3,6 +3,7 @@ import { Accordion, AccordionContent as AccordionPanel, AccordionItem, Accordion
 import { OVERLAY_LAYER_CLASS_NAMES } from "./lib/overlay-layer.js";
 import { Tooltip, TooltipContent as TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger } from "./components/tooltip.js";
 import { AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogContent as AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport } from "./components/alert-dialog.js";
+import { ApplicationShell } from "./components/application-shell.js";
 import { Avatar, AvatarFallback, AvatarImage } from "./components/avatar.js";
 import { BidiText, UserText } from "./components/bidi-text.js";
 import { DiscordLogoIcon, GitHubLogoIcon } from "./components/brand-icons.js";
@@ -69,5 +70,13 @@ import { KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, K
 import { KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, getKanbanHorizontalEdge } from "./kanban/sortable-edge.js";
 import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./kanban/drag-interactions.js";
 import { getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./kanban/grouping.js";
+import { getInitials } from "./lib/initials.js";
 import { emptyColor, optionColors, resolveOptionColor } from "./lib/option-color.js";
-export { Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AnchoredToastProvider, Avatar, AvatarFallback, AvatarImage, BidiText, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CalendarCell, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, Checkbox, ColorPicker, ColorPickerContent, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut, DEFAULT_PRESETS, DataTable, DatePickerPopover, DestructiveActionConfirmation, DestructiveConfirmDialog, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DirectionalIcon, DiscordLogoIcon, Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, GitHubLogoIcon, HexColorPicker, PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTitle, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KanbanCardShell, KanbanColumnHeader, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, Label, MenuPreviewLayout, OVERLAY_LAYER_CLASS_NAMES, OutlineRail, PROPERTY_ROW_GRID, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, ResourceCalendar, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, SecretInput, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, SheetTitle, SheetTrigger, Skeleton, SortableHead, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, UserText, assertConsecutiveCalendarDates, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, layoutResourceCalendarEntries, nextCalendarDate, optionColors, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanSortable, useKanbanSortableSensors, useLatest, useViewportWidth, visibleColumnIds };
+import { ReviewAuthorAvatar, UNKNOWN_AUTHOR_LABEL } from "./review/review-author-avatar.js";
+import { ReviewCommentCard } from "./review/review-comment-card.js";
+import { ReviewDecisionActions } from "./review/review-decision-actions.js";
+import { ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffText, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, reviewDiffSegmentKeys } from "./review/review-diff-text.js";
+import { ReviewOutOfDateNotice } from "./review/review-out-of-date-notice.js";
+import { ReviewSeverityDot, ReviewStatusDot, reviewSeverityTone } from "./review/review-severity-dot.js";
+import { ReviewStatusBadge } from "./review/review-status-badge.js";
+export { Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AnchoredToastProvider, ApplicationShell, Avatar, AvatarFallback, AvatarImage, BidiText, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CalendarCell, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, Checkbox, ColorPicker, ColorPickerContent, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut, DEFAULT_PRESETS, DataTable, DatePickerPopover, DestructiveActionConfirmation, DestructiveConfirmDialog, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DirectionalIcon, DiscordLogoIcon, Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, GitHubLogoIcon, HexColorPicker, PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTitle, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KanbanCardShell, KanbanColumnHeader, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, Label, MenuPreviewLayout, OVERLAY_LAYER_CLASS_NAMES, OutlineRail, PROPERTY_ROW_GRID, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, ResourceCalendar, ReviewAuthorAvatar, ReviewCommentCard, ReviewDecisionActions, ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffText, ReviewOutOfDateNotice, ReviewSeverityDot, ReviewStatusBadge, ReviewStatusDot, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, SecretInput, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, SheetTitle, SheetTrigger, Skeleton, SortableHead, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, UNKNOWN_AUTHOR_LABEL, UserText, assertConsecutiveCalendarDates, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getInitials, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, layoutResourceCalendarEntries, nextCalendarDate, optionColors, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, reviewDiffSegmentKeys, reviewSeverityTone, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanSortable, useKanbanSortableSensors, useLatest, useViewportWidth, visibleColumnIds };

package/dist/lib/initials.d.ts

@@ -0,0 +1,16 @@
+//#region src/lib/initials.d.ts
+/**
+ * Extract up to two uppercase initials from a display name.
+ *
+ * Behaviour:
+ * - Multi-word: first letter of each of the first two words.
+ *   "Eva Schmidt" → "ES", "Jan van Houten" → "JV"
+ * - Single-word (Latin): first two characters.
+ *   "John" → "JO"
+ * - CJK / no-space scripts: first two characters.
+ *   "王小明" → "王小"
+ * - Null / empty: "?"
+ */
+declare const getInitials: (name: string | null) => string;
+//#endregion
+export { getInitials };

package/dist/lib/initials.js

@@ -0,0 +1,27 @@
+//#region src/lib/initials.ts
+/**
+* Extract up to two uppercase initials from a display name.
+*
+* Behaviour:
+* - Multi-word: first letter of each of the first two words.
+*   "Eva Schmidt" → "ES", "Jan van Houten" → "JV"
+* - Single-word (Latin): first two characters.
+*   "John" → "JO"
+* - CJK / no-space scripts: first two characters.
+*   "王小明" → "王小"
+* - Null / empty: "?"
+*/
+const getInitials = (name) => {
+	if (!name) return "?";
+	const trimmed = name.trim();
+	if (trimmed.length === 0) return "?";
+	const parts = trimmed.split(/\s+/u);
+	if (parts.length >= 2) {
+		const a = parts.at(0) ?? "";
+		const b = parts.at(1) ?? "";
+		return `${a.at(0) ?? ""}${b.at(0) ?? ""}`.toUpperCase();
+	}
+	return trimmed.slice(0, 2).toUpperCase();
+};
+//#endregion
+export { getInitials };

package/dist/review/review-author-avatar.d.ts

@@ -0,0 +1,23 @@
+import { Avatar } from "../components/avatar.js";
+import { ComponentProps } from "react";
+//#region src/review/review-author-avatar.d.ts
+/**
+ * Shown when an author has neither a name nor anything to fall back on. This
+ * package carries no catalogs, so a localized host passes `fallbackLabel`;
+ * the constant is exported so every surface that needs the same placeholder
+ * outside an avatar reads it from here rather than minting its own.
+ */
+declare const UNKNOWN_AUTHOR_LABEL = "Unknown user";
+type ReviewAuthorAvatarProps = Omit<ComponentProps<typeof Avatar>, "children" | "className"> & {
+  image?: string | null | undefined;
+  name?: string | null;
+  deleted?: boolean | undefined;
+  fallbackLabel?: string;
+  className?: string | undefined;
+  fallbackClassName?: string | undefined;
+};
+/** The author's face on any review surface: image when there is one, initials
+ *  otherwise, dimmed once the account is gone. */
+declare const ReviewAuthorAvatar: ({ deleted, image, name, fallbackLabel, className, fallbackClassName, ...avatarProps }: ReviewAuthorAvatarProps) => import("react").JSX.Element;
+//#endregion
+export { ReviewAuthorAvatar, UNKNOWN_AUTHOR_LABEL };

package/dist/review/review-author-avatar.js

@@ -0,0 +1,30 @@
+import { cn } from "../lib/utils.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../components/avatar.js";
+import { getInitials } from "../lib/initials.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/review/review-author-avatar.tsx
+/**
+* Shown when an author has neither a name nor anything to fall back on. This
+* package carries no catalogs, so a localized host passes `fallbackLabel`;
+* the constant is exported so every surface that needs the same placeholder
+* outside an avatar reads it from here rather than minting its own.
+*/
+const UNKNOWN_AUTHOR_LABEL = "Unknown user";
+/** The author's face on any review surface: image when there is one, initials
+*  otherwise, dimmed once the account is gone. */
+const ReviewAuthorAvatar = ({ deleted = false, image, name, fallbackLabel = UNKNOWN_AUTHOR_LABEL, className, fallbackClassName, ...avatarProps }) => {
+	const displayName = name?.trim() || fallbackLabel;
+	return /* @__PURE__ */ jsxs(Avatar, {
+		...avatarProps,
+		className: cn(className, deleted && "opacity-60 grayscale"),
+		children: [image ? /* @__PURE__ */ jsx(AvatarImage, {
+			alt: displayName,
+			src: image
+		}) : null, /* @__PURE__ */ jsx(AvatarFallback, {
+			className: cn(fallbackClassName, deleted && "bg-muted text-muted-foreground"),
+			children: getInitials(name ?? null)
+		})]
+	});
+};
+//#endregion
+export { ReviewAuthorAvatar, UNKNOWN_AUTHOR_LABEL };

package/dist/review/review-comment-card.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from "react";
+//#region src/review/review-comment-card.d.ts
+type ReviewCommentAuthor = {
+  name: string | null;
+  image?: string | null | undefined;
+  deleted?: boolean | undefined;
+};
+type ReviewCommentCardProps = {
+  author: ReviewCommentAuthor;
+  /** Machine-readable instant for `<time>`; ISO string or Date. */
+  timestamp: string | Date;
+  /** The same instant, already formatted by the host's locale formatter. */
+  formattedTime: string;
+  body: ReactNode;
+  /** The text the comment was written against, when it is worth echoing. */
+  anchorText?: string | undefined;
+  /** The comment is anchored to text the document has since moved past. */
+  isStale?: boolean | undefined;
+  staleLabel?: string | undefined;
+  resolved?: boolean | undefined;
+  onToggleResolved?: (() => void) | undefined;
+  resolveLabel?: string | undefined;
+  reopenLabel?: string | undefined;
+  canDelete?: boolean | undefined;
+  onDelete?: (() => void) | undefined;
+  deleteLabel?: string | undefined;
+  className?: string;
+};
+/** One comment on a reviewed surface: who wrote it, when, what it says, what
+ *  it points at, and the two things a reader can do to it. */
+declare const ReviewCommentCard: ({ author, timestamp, formattedTime, body, anchorText, isStale, staleLabel, resolved, onToggleResolved, resolveLabel, reopenLabel, canDelete, onDelete, deleteLabel, className }: ReviewCommentCardProps) => import("react").JSX.Element;
+//#endregion
+export { ReviewCommentAuthor, ReviewCommentCard };

package/dist/review/review-comment-card.js

@@ -0,0 +1,76 @@
+import { cn } from "../lib/utils.js";
+import { BidiText } from "../components/bidi-text.js";
+import { Button } from "../components/button.js";
+import { ReviewAuthorAvatar } from "./review-author-avatar.js";
+import { CheckIcon, RotateCcwIcon, Trash2Icon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/review/review-comment-card.tsx
+/** One comment on a reviewed surface: who wrote it, when, what it says, what
+*  it points at, and the two things a reader can do to it. */
+const ReviewCommentCard = ({ author, timestamp, formattedTime, body, anchorText, isStale = false, staleLabel, resolved = false, onToggleResolved, resolveLabel, reopenLabel, canDelete = false, onDelete, deleteLabel, className }) => /* @__PURE__ */ jsxs("article", {
+	className: cn("flex items-start gap-2 px-3 py-2", resolved && "opacity-60", className),
+	"data-slot": "review-comment-card",
+	children: [
+		/* @__PURE__ */ jsx(ReviewAuthorAvatar, {
+			className: "mt-0.5 size-5 shrink-0 text-[9px]",
+			deleted: author.deleted,
+			image: author.image,
+			name: author.name
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [
+				/* @__PURE__ */ jsxs("p", {
+					className: "text-muted-foreground flex min-w-0 items-baseline gap-1.5 text-[11px]",
+					children: [/* @__PURE__ */ jsx(BidiText, {
+						as: "span",
+						className: "text-foreground-strong-muted truncate font-medium",
+						children: author.name
+					}), /* @__PURE__ */ jsx("time", {
+						className: "shrink-0 tabular-nums",
+						dateTime: toIsoInstant(timestamp),
+						children: formattedTime
+					})]
+				}),
+				/* @__PURE__ */ jsx(BidiText, {
+					as: "div",
+					className: "text-foreground text-xs wrap-anywhere",
+					children: body
+				}),
+				anchorText === void 0 || anchorText === "" ? null : /* @__PURE__ */ jsx(BidiText, {
+					as: "p",
+					className: "text-muted-foreground mt-0.5 truncate text-[11px] italic",
+					children: anchorText
+				}),
+				isStale && staleLabel !== void 0 ? /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground mt-0.5 text-[11px]",
+					children: staleLabel
+				}) : null
+			]
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex shrink-0 items-center gap-0.5",
+			children: [onToggleResolved === void 0 ? null : /* @__PURE__ */ jsx(Button, {
+				"aria-label": resolved ? reopenLabel : resolveLabel,
+				onClick: onToggleResolved,
+				size: "icon-xs",
+				variant: "ghost",
+				children: resolved ? /* @__PURE__ */ jsx(RotateCcwIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {})
+			}), canDelete && onDelete !== void 0 ? /* @__PURE__ */ jsx(Button, {
+				"aria-label": deleteLabel,
+				onClick: onDelete,
+				size: "icon-xs",
+				variant: "ghost",
+				children: /* @__PURE__ */ jsx(Trash2Icon, {})
+			}) : null]
+		})
+	]
+});
+/** `<time dateTime>` wants a machine-readable instant. An unparseable date
+*  yields no attribute rather than throwing on `toISOString`. */
+const toIsoInstant = (timestamp) => {
+	if (typeof timestamp === "string") return timestamp;
+	return Number.isNaN(timestamp.getTime()) ? void 0 : timestamp.toISOString();
+};
+//#endregion
+export { ReviewCommentCard };

package/dist/review/review-decision-actions.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from "react";
+//#region src/review/review-decision-actions.d.ts
+/**
+ * Where a reviewable item stands. Undecided items offer accept/reject;
+ * decided ones offer the way back (revert the applied change, or reopen the
+ * decision). `applying` is undecided but in flight: the same pair, inert,
+ * so the row does not resize while the write lands.
+ */
+type ReviewDecisionState = "pending" | "accepted" | "rejected" | "dismissed" | "applying";
+type ReviewDecisionSize = "xs" | "sm";
+type ReviewDecisionActionsProps = {
+  state: ReviewDecisionState;
+  onAccept?: (() => void) | undefined;
+  onReject?: (() => void) | undefined;
+  onRevert?: (() => void) | undefined;
+  onReopen?: (() => void) | undefined;
+  size?: ReviewDecisionSize;
+  /** Labels are supplied by the host: this package carries no catalogs. */
+  acceptLabel?: ReactNode;
+  rejectLabel?: ReactNode;
+  revertLabel?: ReactNode;
+  /** Accessible name for the icon-only reopen control. */
+  reopenLabel?: string | undefined;
+  acceptTooltip?: ReactNode;
+  rejectTooltip?: ReactNode;
+  disabled?: boolean;
+  className?: string;
+};
+/** Accept / reject / revert / reopen, in one shape, for every review surface. */
+declare const ReviewDecisionActions: ({ state, onAccept, onReject, onRevert, onReopen, size, acceptLabel, rejectLabel, revertLabel, reopenLabel, acceptTooltip, rejectTooltip, disabled, className }: ReviewDecisionActionsProps) => import("react").JSX.Element | null;
+//#endregion
+export { ReviewDecisionActions, ReviewDecisionSize, ReviewDecisionState };

package/dist/review/review-decision-actions.js

@@ -0,0 +1,74 @@
+import { cn } from "../lib/utils.js";
+import { Button } from "../components/button.js";
+import { CheckIcon, RotateCcwIcon, XIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/review/review-decision-actions.tsx
+/** Accept / reject / revert / reopen, in one shape, for every review surface. */
+const ReviewDecisionActions = ({ state, onAccept, onReject, onRevert, onReopen, size = "sm", acceptLabel, rejectLabel, revertLabel, reopenLabel, acceptTooltip, rejectTooltip, disabled = false, className }) => {
+	const controls = renderControls({
+		acceptLabel,
+		acceptTooltip,
+		disabled,
+		onAccept,
+		onReject,
+		onReopen,
+		onRevert,
+		rejectLabel,
+		rejectTooltip,
+		reopenLabel,
+		revertLabel,
+		size,
+		state
+	});
+	if (controls === null) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center gap-1.5", className),
+		"data-slot": "review-decision-actions",
+		children: controls
+	});
+};
+const renderControls = ({ acceptLabel, acceptTooltip, disabled, onAccept, onReject, onReopen, onRevert, rejectLabel, rejectTooltip, reopenLabel, revertLabel, size, state }) => {
+	switch (state) {
+		case "pending":
+		case "applying": {
+			const inert = disabled || state === "applying";
+			return /* @__PURE__ */ jsxs(Fragment, { children: [onAccept === void 0 ? null : /* @__PURE__ */ jsxs(Button, {
+				disabled: inert,
+				onClick: onAccept,
+				size,
+				tooltip: acceptTooltip,
+				variant: "default",
+				children: [/* @__PURE__ */ jsx(CheckIcon, {}), acceptLabel]
+			}), onReject === void 0 ? null : /* @__PURE__ */ jsxs(Button, {
+				disabled: inert,
+				onClick: onReject,
+				size,
+				tooltip: rejectTooltip,
+				variant: "outline",
+				children: [/* @__PURE__ */ jsx(XIcon, {}), rejectLabel]
+			})] });
+		}
+		case "accepted":
+		case "rejected":
+		case "dismissed":
+			if (onRevert === void 0 && onReopen === void 0) return null;
+			return /* @__PURE__ */ jsxs(Fragment, { children: [onRevert === void 0 ? null : /* @__PURE__ */ jsx(Button, {
+				className: "text-muted-foreground hover:text-foreground",
+				disabled,
+				onClick: onRevert,
+				size,
+				variant: "ghost",
+				children: revertLabel
+			}), onReopen === void 0 ? null : /* @__PURE__ */ jsx(Button, {
+				"aria-label": reopenLabel,
+				disabled,
+				onClick: onReopen,
+				size: size === "xs" ? "icon-xs" : "icon-sm",
+				variant: "ghost",
+				children: /* @__PURE__ */ jsx(RotateCcwIcon, {})
+			})] });
+		default: return null;
+	}
+};
+//#endregion
+export { ReviewDecisionActions };

package/dist/review/review-diff-text.d.ts

@@ -0,0 +1,33 @@
+import { CSSProperties, ReactNode } from "react";
+//#region src/review/review-diff-text.d.ts
+declare const TRACKED_DELETION_STYLE: CSSProperties;
+declare const TRACKED_INSERTION_STYLE: CSSProperties;
+type ReviewDiffSegmentType = "equal" | "insert" | "delete";
+type ReviewDiffSegment = {
+  type: ReviewDiffSegmentType;
+  text: string;
+};
+type ReviewDiffProps = {
+  className?: string;
+  children: ReactNode;
+};
+/** Inserted text, wherever it is shown. */
+declare const ReviewDiffInsertion: ({ className, children }: ReviewDiffProps) => import("react").JSX.Element;
+/** Deleted text, wherever it is shown. */
+declare const ReviewDiffDeletion: ({ className, children }: ReviewDiffProps) => import("react").JSX.Element;
+type ReviewDiffTextProps = {
+  segments: readonly ReviewDiffSegment[];
+  className?: string;
+};
+/** A word-level diff rendered inline, in the product's one track-changes
+ *  language. */
+declare const ReviewDiffText: ({ segments, className }: ReviewDiffTextProps) => import("react").JSX.Element;
+/**
+ * A stable render key per segment. Type and text alone repeat inside a single
+ * diff (the same word deleted twice), so each repetition carries its
+ * occurrence count; the result is stable across renders of the same diff and
+ * never falls back to the array index.
+ */
+declare const reviewDiffSegmentKeys: (segments: readonly ReviewDiffSegment[]) => string[];
+//#endregion
+export { ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffSegment, ReviewDiffSegmentType, ReviewDiffText, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, reviewDiffSegmentKeys };

package/dist/review/review-diff-text.js

@@ -0,0 +1,67 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/review/review-diff-text.tsx
+const TRACKED_DELETION_STYLE = {
+	color: "color-mix(in oklch, var(--destructive) 35%, var(--muted-foreground))",
+	textDecorationLine: "line-through",
+	textDecorationThickness: "1px",
+	textDecorationColor: "color-mix(in oklch, var(--destructive) 30%, var(--muted-foreground))"
+};
+const TRACKED_INSERTION_STYLE = {
+	borderRadius: "3px",
+	padding: "0 2px",
+	backgroundColor: "color-mix(in oklch, var(--success) 14%, transparent)",
+	boxShadow: "inset 0 0 0 1px color-mix(in oklch, var(--success) 28%, transparent)",
+	textDecorationLine: "none",
+	boxDecorationBreak: "clone",
+	WebkitBoxDecorationBreak: "clone"
+};
+/** Inserted text, wherever it is shown. */
+const ReviewDiffInsertion = ({ className, children }) => /* @__PURE__ */ jsx("ins", {
+	className,
+	style: TRACKED_INSERTION_STYLE,
+	children
+});
+/** Deleted text, wherever it is shown. */
+const ReviewDiffDeletion = ({ className, children }) => /* @__PURE__ */ jsx("del", {
+	className,
+	style: TRACKED_DELETION_STYLE,
+	children
+});
+/** A word-level diff rendered inline, in the product's one track-changes
+*  language. */
+const ReviewDiffText = ({ segments, className }) => {
+	const keys = reviewDiffSegmentKeys(segments);
+	return /* @__PURE__ */ jsx("span", {
+		className: cn(className),
+		"data-slot": "review-diff-text",
+		children: segments.map((segment, index) => /* @__PURE__ */ jsx(ReviewDiffSegmentSpan, { segment }, keys[index]))
+	});
+};
+/**
+* A stable render key per segment. Type and text alone repeat inside a single
+* diff (the same word deleted twice), so each repetition carries its
+* occurrence count; the result is stable across renders of the same diff and
+* never falls back to the array index.
+*/
+const reviewDiffSegmentKeys = (segments) => {
+	const seen = /* @__PURE__ */ new Map();
+	return segments.map((segment) => {
+		const base = `${segment.type}-${segment.text}`;
+		const occurrence = seen.get(base) ?? 0;
+		seen.set(base, occurrence + 1);
+		return `${base}-${occurrence}`;
+	});
+};
+const ReviewDiffSegmentSpan = ({ segment }) => {
+	switch (segment.type) {
+		case "insert": return /* @__PURE__ */ jsx(ReviewDiffInsertion, { children: segment.text });
+		case "delete": return /* @__PURE__ */ jsx(ReviewDiffDeletion, { children: segment.text });
+		case "equal": return /* @__PURE__ */ jsx("span", { children: segment.text });
+		default:
+			segment.type;
+			return null;
+	}
+};
+//#endregion
+export { ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffText, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, reviewDiffSegmentKeys };

package/dist/review/review-out-of-date-notice.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+//#region src/review/review-out-of-date-notice.d.ts
+type ReviewOutOfDateTone = "warning" | "muted";
+/**
+ * One reason a review has fallen behind. Carries its own key so the list is
+ * never rendered by array index: reasons come and go independently (the
+ * document changed, the playbook moved on, the source was deleted) and each
+ * one has a stable identity at its call site.
+ */
+type ReviewOutOfDateReason = {
+  id: string;
+  label: ReactNode;
+};
+type ReviewOutOfDateNoticeProps = {
+  reasons: readonly ReviewOutOfDateReason[];
+  actionLabel?: ReactNode;
+  onAction?: (() => void) | undefined;
+  tone?: ReviewOutOfDateTone;
+  className?: string;
+};
+/**
+ * What a review no longer reflects. Every applicable reason is listed
+ * together: they are different reasons to run again, and a reviewer working
+ * through findings should see each one rather than the first.
+ */
+declare const ReviewOutOfDateNotice: ({ reasons, actionLabel, onAction, tone, className }: ReviewOutOfDateNoticeProps) => import("react").JSX.Element | null;
+//#endregion
+export { ReviewOutOfDateNotice, ReviewOutOfDateReason, ReviewOutOfDateTone };

package/dist/review/review-out-of-date-notice.js

@@ -0,0 +1,32 @@
+import { cn } from "../lib/utils.js";
+import { Button } from "../components/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/review/review-out-of-date-notice.tsx
+/**
+* What a review no longer reflects. Every applicable reason is listed
+* together: they are different reasons to run again, and a reviewer working
+* through findings should see each one rather than the first.
+*/
+const ReviewOutOfDateNotice = ({ reasons, actionLabel, onAction, tone = "warning", className }) => {
+	if (reasons.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("mb-2 rounded-lg border px-3 py-2", TONE_CLASS[tone], className),
+		"data-slot": "review-out-of-date-notice",
+		children: [/* @__PURE__ */ jsx("ul", {
+			className: "space-y-1 text-xs",
+			children: reasons.map((reason) => /* @__PURE__ */ jsx("li", { children: reason.label }, reason.id))
+		}), onAction === void 0 ? null : /* @__PURE__ */ jsx(Button, {
+			className: "mt-2",
+			onClick: onAction,
+			size: "xs",
+			variant: "outline",
+			children: actionLabel
+		})]
+	});
+};
+const TONE_CLASS = {
+	warning: "border-warning/30 bg-warning/10 text-warning-foreground",
+	muted: "border-border bg-muted/50 text-muted-foreground"
+};
+//#endregion
+export { ReviewOutOfDateNotice };

package/dist/review/review-severity-dot.d.ts

@@ -0,0 +1,27 @@
+import { ReviewStatusTone } from "./review-status-badge.js";
+//#region src/review/review-severity-dot.d.ts
+/**
+ * How bad a finding is, on the one scale every review surface reports against.
+ * Vocabularies that stop short of five levels (a playbook's blocker/high/
+ * medium/low, a suggestion's high/medium/low/unspecified) map onto this at
+ * their call site rather than growing a palette of their own.
+ */
+type ReviewSeverityLevel = "critical" | "high" | "medium" | "low" | "none";
+type ReviewSeverityDotProps = {
+  level: ReviewSeverityLevel;
+  className?: string | undefined;
+};
+/** The dot that precedes a severity label, and the one place a severity level
+ *  turns into a colour. */
+declare const ReviewSeverityDot: ({ level, className }: ReviewSeverityDotProps) => import("react").JSX.Element;
+type ReviewStatusDotProps = {
+  tone: ReviewStatusTone;
+  className?: string | undefined;
+};
+/** The same dot keyed by tone, for vocabularies that are not severities
+ *  (verdicts, directed impact, comparison assessments). */
+declare const ReviewStatusDot: ({ tone, className }: ReviewStatusDotProps) => import("react").JSX.Element;
+/** The tone a severity level carries, so a badge and its dot cannot disagree. */
+declare const reviewSeverityTone: (level: ReviewSeverityLevel) => ReviewStatusTone;
+//#endregion
+export { ReviewSeverityDot, ReviewSeverityLevel, ReviewStatusDot, reviewSeverityTone };

package/dist/review/review-severity-dot.js

@@ -0,0 +1,35 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/review/review-severity-dot.tsx
+/** The dot that precedes a severity label, and the one place a severity level
+*  turns into a colour. */
+const ReviewSeverityDot = ({ level, className }) => /* @__PURE__ */ jsx(ReviewStatusDot, {
+	className,
+	tone: SEVERITY_TONE[level]
+});
+/** The same dot keyed by tone, for vocabularies that are not severities
+*  (verdicts, directed impact, comparison assessments). */
+const ReviewStatusDot = ({ tone, className }) => /* @__PURE__ */ jsx("span", {
+	"aria-hidden": "true",
+	className: cn(REVIEW_STATUS_DOT_BASE_CLASS, TONE_DOT_CLASS[tone], className),
+	"data-slot": "review-status-dot"
+});
+/** The tone a severity level carries, so a badge and its dot cannot disagree. */
+const reviewSeverityTone = (level) => SEVERITY_TONE[level];
+const REVIEW_STATUS_DOT_BASE_CLASS = "size-1.5 shrink-0 rounded-full";
+const SEVERITY_TONE = {
+	critical: "destructive",
+	high: "destructive",
+	medium: "warning",
+	low: "neutral",
+	none: "success"
+};
+const TONE_DOT_CLASS = {
+	neutral: "bg-muted-foreground",
+	success: "bg-success",
+	warning: "bg-warning",
+	destructive: "bg-destructive",
+	highlight: "bg-highlight-foreground"
+};
+//#endregion
+export { ReviewSeverityDot, ReviewStatusDot, reviewSeverityTone };

package/dist/review/review-status-badge.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+//#region src/review/review-status-badge.d.ts
+/**
+ * The semantic weight of a review status, independent of the words a surface
+ * uses for it. Playbook verdicts, overall risk, proposal states, suggestion
+ * decisions and approval states each map their own vocabulary onto one tone,
+ * so "this is fine" reads as the same green everywhere and a reviewer never
+ * has to relearn a palette when moving between panels.
+ */
+type ReviewStatusTone = "neutral" | "success" | "warning" | "destructive" | "highlight";
+type ReviewStatusVariant = "solid" | "outline" | "strong";
+type ReviewStatusSize = "xs" | "sm";
+type ReviewStatusBadgeProps = {
+  tone: ReviewStatusTone;
+  /** Outlined by default. `solid` adds a tonal wash for a status that has to
+   *  carry more weight than its neighbours (an overall risk, an approval);
+   *  `strong` fills it outright, reserved for the one state on a surface that
+   *  must escalate past every other badge beside it. */
+  variant?: ReviewStatusVariant;
+  size?: ReviewStatusSize;
+  /** Leading glyph, typically a `<ReviewSeverityDot />`. */
+  icon?: ReactNode;
+  className?: string;
+  children: ReactNode;
+};
+/** One status pill for every review surface: one radius, one padding scale,
+ *  one tone vocabulary. */
+declare const ReviewStatusBadge: ({ tone, variant, size, icon, className, children }: ReviewStatusBadgeProps) => import("react").JSX.Element;
+//#endregion
+export { ReviewStatusBadge, ReviewStatusSize, ReviewStatusTone, ReviewStatusVariant };

package/dist/review/review-status-badge.js

@@ -0,0 +1,45 @@
+import { cn } from "../lib/utils.js";
+import { jsxs } from "react/jsx-runtime";
+//#region src/review/review-status-badge.tsx
+/** One status pill for every review surface: one radius, one padding scale,
+*  one tone vocabulary. */
+const ReviewStatusBadge = ({ tone, variant = "outline", size = "xs", icon, className, children }) => /* @__PURE__ */ jsxs("span", {
+	className: cn(REVIEW_STATUS_BADGE_BASE_CLASS, SIZE_CLASS[size], VARIANT_CLASS[variant], TONE_CLASS[variant][tone], className),
+	"data-slot": "review-status-badge",
+	children: [icon, children]
+});
+const REVIEW_STATUS_BADGE_BASE_CLASS = "inline-flex shrink-0 items-center rounded-full border font-medium whitespace-nowrap";
+const SIZE_CLASS = {
+	xs: "gap-1 px-1.5 py-0.5 text-[11px]",
+	sm: "gap-1.5 px-2 py-0.5 text-xs"
+};
+const TONE_CLASS = {
+	outline: {
+		neutral: "border-border text-muted-foreground",
+		success: "border-success/30 text-success",
+		warning: "border-warning/30 text-warning-foreground",
+		destructive: "border-destructive/30 text-destructive",
+		highlight: "border-highlight text-highlight-foreground"
+	},
+	solid: {
+		neutral: "border-transparent bg-muted text-muted-foreground",
+		success: "border-transparent bg-success/12 text-success",
+		warning: "border-transparent bg-warning/12 text-warning-foreground",
+		destructive: "border-transparent bg-destructive/12 text-destructive",
+		highlight: "border-transparent bg-highlight/50 text-highlight-foreground"
+	},
+	strong: {
+		neutral: "border-transparent bg-muted-foreground text-background",
+		success: "border-transparent bg-success text-success-foreground",
+		warning: "border-transparent bg-warning text-warning-foreground",
+		destructive: "border-transparent bg-destructive text-destructive-foreground",
+		highlight: "border-transparent bg-highlight text-highlight-foreground"
+	}
+};
+const VARIANT_CLASS = {
+	outline: "",
+	solid: "",
+	strong: "[&_[data-slot=review-status-dot]]:bg-current"
+};
+//#endregion
+export { ReviewStatusBadge };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Stella's design system: bidi-aware React primitives built on Base UI, the dockable inspector pane, and the Tailwind v4 theme they are styled with.",
   "keywords": [
     "base-ui",
@@ -41,6 +41,10 @@
       "types": "./dist/components/alert-dialog.d.ts",
       "import": "./dist/components/alert-dialog.js"
     },
+    "./application-shell": {
+      "types": "./dist/components/application-shell.d.ts",
+      "import": "./dist/components/application-shell.js"
+    },
     "./avatar": {
       "types": "./dist/components/avatar.d.ts",
       "import": "./dist/components/avatar.js"
@@ -133,6 +137,10 @@
       "types": "./dist/components/input-group.d.ts",
       "import": "./dist/components/input-group.js"
     },
+    "./initials": {
+      "types": "./dist/lib/initials.d.ts",
+      "import": "./dist/lib/initials.js"
+    },
     "./input-otp": {
       "types": "./dist/components/input-otp.d.ts",
       "import": "./dist/components/input-otp.js"
@@ -173,6 +181,34 @@
       "types": "./dist/components/preview-pane.d.ts",
       "import": "./dist/components/preview-pane.js"
     },
+    "./review-author-avatar": {
+      "types": "./dist/review/review-author-avatar.d.ts",
+      "import": "./dist/review/review-author-avatar.js"
+    },
+    "./review-comment-card": {
+      "types": "./dist/review/review-comment-card.d.ts",
+      "import": "./dist/review/review-comment-card.js"
+    },
+    "./review-decision-actions": {
+      "types": "./dist/review/review-decision-actions.d.ts",
+      "import": "./dist/review/review-decision-actions.js"
+    },
+    "./review-diff-text": {
+      "types": "./dist/review/review-diff-text.d.ts",
+      "import": "./dist/review/review-diff-text.js"
+    },
+    "./review-out-of-date-notice": {
+      "types": "./dist/review/review-out-of-date-notice.d.ts",
+      "import": "./dist/review/review-out-of-date-notice.js"
+    },
+    "./review-severity-dot": {
+      "types": "./dist/review/review-severity-dot.d.ts",
+      "import": "./dist/review/review-severity-dot.js"
+    },
+    "./review-status-badge": {
+      "types": "./dist/review/review-status-badge.d.ts",
+      "import": "./dist/review/review-status-badge.js"
+    },
     "./scroll-area": {
       "types": "./dist/components/scroll-area.d.ts",
       "import": "./dist/components/scroll-area.js"
@@ -282,6 +318,10 @@
       "types": "./dist/components/alert-dialog.d.ts",
       "import": "./dist/components/alert-dialog.js"
     },
+    "./components/application-shell": {
+      "types": "./dist/components/application-shell.d.ts",
+      "import": "./dist/components/application-shell.js"
+    },
     "./components/avatar": {
       "types": "./dist/components/avatar.d.ts",
       "import": "./dist/components/avatar.js"