@lateralus-ai/shipping-ui 1.4.15 → 2.0.0-dev.0

package/src/patterns/Sidebar/SidebarShell.tsx

@@ -0,0 +1,32 @@
+import { type ReactNode } from "react";
+import { cn } from "../../utils/cn";
+
+export type SidebarShellProps = {
+  sidebar: ReactNode;
+  children: ReactNode;
+  /** Pixels subtracted from viewport height (e.g. app banner). */
+  bannerOffset?: number;
+  className?: string;
+  mainClassName?: string;
+};
+
+/** Viewport-height app shell: sidebar stays put, main scrolls independently. */
+export const SidebarShell = ({
+  sidebar,
+  children,
+  bannerOffset = 0,
+  className,
+  mainClassName,
+}: SidebarShellProps) => (
+  <div
+    className={cn("flex overflow-hidden bg-background-primary", className)}
+    style={{
+      height: bannerOffset > 0 ? `calc(100dvh - ${bannerOffset}px)` : "100dvh",
+    }}
+  >
+    {sidebar}
+    <main className={cn("min-h-0 min-w-0 flex-1 overflow-auto", mainClassName)}>
+      {children}
+    </main>
+  </div>
+);

package/src/patterns/Sidebar/Switcher.tsx

@@ -0,0 +1,116 @@
+import { Logo } from "../../primitives";
+import { cn } from "../../utils/cn";
+
+export type Chief = "technical" | "compliance";
+
+export type SwitcherProps = {
+  chief: Chief;
+  expanded?: boolean;
+  onChiefChange?: (chief: Chief) => void;
+  className?: string;
+};
+
+const chiefLabels: Record<Chief, string> = {
+  technical: "Technical",
+  compliance: "Compliance",
+};
+
+const SwitcherTab = ({
+  tabChief,
+  active,
+  onSelect,
+}: {
+  tabChief: Chief;
+  active: boolean;
+  onSelect?: (chief: Chief) => void;
+}) => {
+  const tabClassName = cn(
+    "box-border flex h-[34px] flex-1 items-center gap-[2px] rounded-[4px] py-2 pl-[14px] pr-4",
+    active
+      ? "bg-background-primary text-display-on-light-primary shadow-[0_1px_1px_rgba(0,0,0,0.06)]"
+      : "text-display-on-light-quaternary",
+    onSelect && !active && "cursor-pointer hover:text-display-on-light-secondary",
+  );
+
+  const content = (
+    <>
+      <div
+        className={cn(
+          "flex size-[18px] shrink-0 items-center justify-center rounded-full",
+          active && "bg-background-primary",
+        )}
+      >
+        <Logo chief={tabChief} muted={!active} className="size-[18px]" />
+      </div>
+      <span
+        className={cn(
+          "truncate text-[11px] uppercase leading-4 tracking-normal",
+          active ? "text-display-on-light-primary" : "text-display-on-light-quaternary",
+        )}
+      >
+        {chiefLabels[tabChief]}
+      </span>
+    </>
+  );
+
+  if (!onSelect) {
+    return (
+      <div className={tabClassName} data-active={active}>
+        {content}
+      </div>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      className={tabClassName}
+      data-active={active}
+      aria-pressed={active}
+      aria-label={`Switch to ${chiefLabels[tabChief]}`}
+      disabled={active}
+      onClick={() => onSelect(tabChief)}
+    >
+      {content}
+    </button>
+  );
+};
+
+export const Switcher = ({
+  chief,
+  expanded = true,
+  onChiefChange,
+  className,
+}: SwitcherProps) => {
+  if (!expanded) {
+    return (
+      <div
+        className={cn(
+          "flex h-8 w-10 shrink-0 items-center justify-center self-center rounded-control",
+          className,
+        )}
+        data-expanded={expanded}
+        data-chief={chief}
+        aria-label={`Switch chief: ${chiefLabels[chief]}`}
+      >
+        <Logo chief={chief} className="size-6 shrink-0" />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "box-border flex h-11 w-full gap-1 rounded-control bg-background-secondary p-[5px] shadow-[inset_0_0_0_1px_theme(colors.divider.primary)]",
+        className,
+      )}
+      data-expanded={expanded}
+      data-chief={chief}
+      role="group"
+      aria-label="Chief switcher"
+    >
+      <SwitcherTab tabChief="technical" active={chief === "technical"} onSelect={onChiefChange} />
+      <SwitcherTab tabChief="compliance" active={chief === "compliance"} onSelect={onChiefChange} />
+    </div>
+  );
+};

package/src/patterns/Sidebar/assets/logo-compliance-mark.png

@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Logo">
+<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="var(--fill-0, #262420)"/>
+</g>
+</svg>

package/src/patterns/Sidebar/assets/logo-compliance-mask.png

@@ -0,0 +1,13 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Mask" clip-path="url(#clip0_0_4)">
+<g id="icon-compliance.svg">
+<path id="Vector" d="M8.30333 5.84667L5.18333 14.2917H6.33833V14.2883C6.34 14.2883 6.34167 14.29 6.34167 14.29L8.90667 11.7267H9.06667L11.6283 14.2917H12.8233L9.71667 5.84667H8.305H8.30333ZM9.215 10.4433H8.75667L7.15167 12.0483L8.89 7.25167H9.10167L10.825 12.055L9.21667 10.4433H9.215Z" fill="var(--fill-0, #232323)"/>
+<path id="Vector_2" d="M8.98833 4.85833C9.87167 4.85833 10.6817 5.23 11.3117 5.84667H12.7967C11.925 4.54667 10.5433 3.70667 8.98833 3.70667C7.43333 3.70667 6.05167 4.54667 5.18 5.84667H6.665C7.29333 5.23 8.105 4.85833 8.98833 4.85833Z" fill="var(--fill-0, #232323)"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_0_4">
+<rect width="18" height="18" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/patterns/Sidebar/assets/logo-compliance.svg

@@ -0,0 +1,17 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="18" height="18" fill="#F5F5F5"/>
+<g id="Core">
+<path d="M-330 -683C-330 -694.046 -321.046 -703 -310 -703H382C393.046 -703 402 -694.046 402 -683V927C402 938.046 393.046 947 382 947H-310C-321.046 947 -330 938.046 -330 927V-683Z" fill="#FDFDFC"/>
+<g id="Content">
+<g id="Avatar">
+<rect x="-273.5" y="-30.5" width="619" height="79" rx="4.5" stroke="#9747FF" stroke-dasharray="10 5"/>
+<g id="Chief=Technical, Size=18">
+<path d="M0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9Z" fill="#FDFDFC"/>
+<g id="Logo">
+<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="#262420"/>
+</g>
+</g>
+</g>
+</g>
+</g>
+</svg>

package/src/patterns/Sidebar/assets/logo-technical-avatar.svg

@@ -0,0 +1,17 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="18" height="18" fill="#F5F5F5"/>
+<g id="Core">
+<path d="M-330 -683C-330 -694.046 -321.046 -703 -310 -703H382C393.046 -703 402 -694.046 402 -683V927C402 938.046 393.046 947 382 947H-310C-321.046 947 -330 938.046 -330 927V-683Z" fill="#FDFDFC"/>
+<g id="Content">
+<g id="Avatar">
+<rect x="-273.5" y="-30.5" width="619" height="79" rx="4.5" stroke="#9747FF" stroke-dasharray="10 5"/>
+<g id="Chief=Technical, Size=18">
+<path d="M0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9Z" fill="#FDFDFC"/>
+<g id="Logo">
+<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="#262420"/>
+</g>
+</g>
+</g>
+</g>
+</g>
+</svg>

package/src/patterns/Sidebar/assets/logo-technical-mark.png

@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Logo">
+<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="var(--fill-0, #262420)"/>
+</g>
+</svg>

package/src/patterns/Sidebar/assets/logo-technical.svg

@@ -0,0 +1,16 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="18" height="18" fill="#F5F5F5"/>
+<g id="Core">
+<path d="M-330 -683C-330 -694.046 -321.046 -703 -310 -703H382C393.046 -703 402 -694.046 402 -683V927C402 938.046 393.046 947 382 947H-310C-321.046 947 -330 938.046 -330 927V-683Z" fill="white"/>
+<g id="Content">
+<g id="Avatar">
+<rect x="-273.5" y="-30.5" width="619" height="79" rx="4.5" stroke="#9747FF" stroke-dasharray="10 5"/>
+<g id="Chief=Technical, Size=18">
+<g id="Logo">
+<path id="Glyph" d="M9.89258 5.62793L13.2041 14.625H11.9316L9.20117 11.8926H9.03223L6.29785 14.623C6.29785 14.623 6.29573 14.6211 6.29395 14.6211V14.625H5.0625L8.38867 5.62793H9.89258ZM9.01172 7.12305L7.16016 12.2334L8.87109 10.5234H9.36133L11.0762 12.2402L9.23828 7.12305H9.01172ZM12.6904 3.375V4.64355H5.61328V3.375H12.6904Z" fill="#262420"/>
+</g>
+</g>
+</g>
+</g>
+</g>
+</svg>

package/src/patterns/Sidebar/constants.ts

@@ -0,0 +1,2 @@
+export const SIDEBAR_EXPANDED_WIDTH = 280;
+export const SIDEBAR_COLLAPSED_WIDTH = 56;

package/src/patterns/Sidebar/figma-assets.ts

@@ -0,0 +1,4 @@
+import accountAvatar from "./assets/account-avatar.jpg";
+import accountAvatar24 from "./assets/account-avatar-24.jpg";
+
+export { accountAvatar, accountAvatar24 };

package/src/patterns/Sidebar/figma-demo-content.ts

@@ -0,0 +1,30 @@
+export type FigmaActivityIcon = "status" | "statusClosed" | "chat" | "chatPro";
+
+export const FIGMA_ACTIVITY_ENTRIES = [
+  { id: "1", label: "Winch Slipping Under Load", href: "#chat-1", count: 1, icon: "status" as const },
+  { id: "2", label: "Excessive Vibration Propeller Shaft", href: "#chat-2", icon: "chatPro" as const },
+  { id: "3", label: "Winch Slipping Under Load", href: "#chat-3", icon: "chat" as const },
+  { id: "4", label: "Freshwater Pressure Drop Causes", href: "#chat-4", icon: "chat" as const },
+  { id: "5", label: "Excessive Vibration Propeller Shaft", href: "#chat-5", icon: "status" as const },
+  { id: "6", label: "Freshwater Pressure Drop Causes", href: "#chat-6", icon: "statusClosed" as const },
+  { id: "7", label: "Rust Prevention On Deck Fittings", href: "#chat-7", icon: "chatPro" as const },
+  { id: "8", label: "Persistent Engine Room Oil Leak", href: "#chat-8", icon: "chat" as const },
+] as const;
+
+export const FIGMA_SHIP_ENTRIES = [
+  { id: "1", name: "The Coral Explorer", href: "#ship-1", count: 3 },
+  { id: "2", name: "Silver Wave", href: "#ship-2", count: 1 },
+  { id: "3", name: "Ocean Voyager", href: "#ship-3" },
+  { id: "4", name: "Albatross Wind", href: "#ship-4" },
+] as const;
+
+export const FIGMA_ACCOUNT_NAME = "Panos Tsamoudakis";
+
+export const FIGMA_SECTION_LABEL = "Name";
+export const FIGMA_HEADING_LABEL = "Label";
+export const FIGMA_ENTRY_LABEL = "New chat";
+
+export const DEMO_SIDEBAR_ENTRY_MENU_ITEMS = [
+  { id: "example-1", label: "Example one", onSelect: () => undefined },
+  { id: "example-2", label: "Example two", onSelect: () => undefined },
+] as const;

package/src/patterns/Sidebar/figma-sidebar-nav.ts

@@ -0,0 +1,79 @@
+import type { Chief } from "./Switcher";
+
+export type FigmaNavItemId =
+  | "search"
+  | "workflows"
+  | "analytics"
+  | "forms"
+  | "ships"
+  | "defectReports"
+  | "tasks"
+  | "knowledge"
+  | "activity";
+
+export type FigmaCollapsedNavItem = {
+  id: FigmaNavItemId;
+  unread?: boolean;
+};
+
+export type FigmaSidebarNavConfig = {
+  expandedItems: FigmaNavItemId[];
+  collapsedItems: FigmaCollapsedNavItem[];
+};
+
+const technicalExpanded: FigmaNavItemId[] = [
+  "search",
+  "workflows",
+  "analytics",
+  "ships",
+  "defectReports",
+  "knowledge",
+  "activity",
+];
+
+const complianceExpanded: FigmaNavItemId[] = [
+  "search",
+  "workflows",
+  "forms",
+  "ships",
+  "tasks",
+  "knowledge",
+  "analytics",
+  "activity",
+];
+
+const technicalCollapsed: FigmaCollapsedNavItem[] = [
+  { id: "search" },
+  { id: "workflows" },
+  { id: "analytics" },
+  { id: "ships", unread: true },
+  { id: "defectReports" },
+  { id: "activity", unread: true },
+];
+
+const complianceCollapsed: FigmaCollapsedNavItem[] = [
+  { id: "search" },
+  { id: "workflows", unread: true },
+  { id: "ships" },
+  { id: "tasks" },
+  { id: "knowledge" },
+  { id: "analytics" },
+  { id: "activity", unread: true },
+];
+
+export const FIGMA_NAV_LABELS: Record<FigmaNavItemId, string> = {
+  search: "Search",
+  workflows: "Workflows",
+  analytics: "Analytics",
+  forms: "Forms",
+  ships: "Ships",
+  defectReports: "Defect Reports",
+  tasks: "Tasks",
+  knowledge: "Knowledge",
+  activity: "Activity",
+};
+
+export const getFigmaSidebarNav = (chief: Chief): FigmaSidebarNavConfig => ({
+  expandedItems: chief === "compliance" ? complianceExpanded : technicalExpanded,
+  collapsedItems: chief === "compliance" ? complianceCollapsed : technicalCollapsed,
+});

package/src/patterns/Sidebar/index.ts

@@ -0,0 +1,13 @@
+export { Account, type AccountMenuItem, type AccountProps } from "./Account";
+export { ActivityNavGroup, Activity, type ActivityNavGroupProps, type ActivityProps } from "./ActivityNavGroup";
+export { CollapsibleNavGroup, Ships, type CollapsibleNavGroupProps, type Ship, type ShipsProps } from "./CollapsibleNavGroup";
+export { SIDEBAR_COLLAPSED_WIDTH, SIDEBAR_EXPANDED_WIDTH } from "./constants";
+export { Entry, SidebarEntry, type EntryProps, type EntryState, type SidebarEntryMenuItem, type SidebarEntryProps, type SidebarEntryState } from "./SidebarEntry";
+export { Heading, SidebarHeading, type HeadingProps, type SidebarHeadingProps } from "./SidebarHeading";
+export { Indicator, type IndicatorProps } from "./Indicator";
+export { NewChat, type NewChatProps } from "./NewChat";
+export { Section, SidebarLink, type SectionProps, type SectionState, type SidebarLinkProps, type SidebarLinkState } from "./SidebarLink";
+export { SidebarAction, type SidebarActionProps } from "./SidebarAction";
+export { Sidebar, type SidebarProps } from "./Sidebar";
+export { SidebarShell, type SidebarShellProps } from "./SidebarShell";
+export { Switcher, type Chief, type SwitcherProps } from "./Switcher";

package/src/patterns/Sidebar/sidebar-styles.ts

@@ -0,0 +1,101 @@
+import { cn } from "../../utils/cn";
+
+/** Figma sidebar surfaces use translucent grey overlays, not solid background-hover tokens. */
+export const sidebarSurfaceHover = "bg-[rgba(38,36,32,0.04)]";
+export const sidebarSurfaceSelected = "bg-[rgba(38,36,32,0.08)]";
+
+/** 8px between top-level sidebar blocks (Figma Top gap). */
+export const sidebarBlockGap = "gap-2";
+
+/** 4px between entries inside a group (Activity, Ships). */
+export const sidebarGroupGap = "gap-1";
+
+/** Section row shell — 36px total (Figma Section symbols). */
+export const sidebarSectionShell =
+  "box-border flex h-9 w-full items-center rounded-control p-2";
+
+/** Taller section row — 40px (New chat, Ships header). */
+export const sidebarSectionShellTall =
+  "box-border flex h-10 w-full items-center rounded-control p-2";
+
+/** Collapsed icon-only section — Figma Section/Collapsed On: w-full, p-2, 16px icon. */
+export const sidebarSectionShellCollapsed =
+  "relative box-border flex w-full flex-col items-center justify-center rounded-control p-2";
+
+/** Figma Indicator overlay — 24×24 anchored top-left of icon content. */
+export const sidebarUnreadOverlay =
+  "pointer-events-none absolute left-0 top-0 size-6";
+
+/** Figma unread dot — ~6px, top-right of the 24px indicator overlay. */
+export const sidebarUnreadDot =
+  "absolute right-0 top-0 size-1.5 rounded-full bg-[#802c20]";
+
+export const sidebarSectionContent = "flex w-full min-w-0 items-center gap-2 pl-1";
+
+export const sidebarSectionIconClass = "shrink-0 [&>svg]:size-4";
+
+export const sidebarSectionLabelClass =
+  "min-w-0 flex-1 truncate text-caption-2 tracking-[0.01em]";
+
+/** Figma sidebar icon buttons — transparent idle, grey hover (no white fill). */
+export const sidebarQuaternaryIconButton =
+  "bg-transparent text-action-quaternary-on-idle hover:bg-[rgba(38,36,32,0.04)] hover:text-action-quaternary-on-hover disabled:bg-transparent disabled:opacity-50";
+
+/** Scrollable nav region — thin thumb flush to the right edge (matches shipping-ai). */
+export const sidebarScrollRegion =
+  "sidebar-scroll flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto";
+
+/** Nav row — grey hover surface (Section, Entry, collapsed + expanded). */
+export const sidebarRowInteractiveHover =
+  "transition-colors hover:bg-[rgba(38,36,32,0.04)] hover:text-display-on-light-primary";
+
+/** @deprecated Use sidebarRowInteractiveHover */
+export const sidebarCollapsedRowHover = sidebarRowInteractiveHover;
+
+/** New chat — primary blue hover (Figma New chat Hover variant). */
+export const sidebarNewChatInteractiveHover =
+  "group/newchat transition-colors hover:bg-action-primary-hover hover:text-action-primary-on-hover";
+
+export const sidebarNewChatIconHover =
+  "group-hover/newchat:text-action-primary-on-hover";
+
+export const sidebarLinkIdle = "text-display-on-light-secondary";
+
+export const sidebarLinkHover =
+  cn(sidebarSurfaceHover, "text-display-on-light-primary");
+
+export const sidebarLinkActive =
+  cn(sidebarSurfaceSelected, "text-display-on-light-primary");
+
+export const sidebarEntryIdle = "text-display-on-light-secondary";
+export const sidebarEntryHover = cn(sidebarSurfaceHover, "text-display-on-light-primary");
+export const sidebarEntrySelected = cn(sidebarSurfaceSelected, "text-display-on-light-primary");
+
+/** Entry row — Figma min-h-[36px] px-[8px] py-[6px]. */
+export const sidebarEntryShell =
+  "box-border flex h-9 w-full items-center gap-1 rounded-control px-2 py-1.5";
+
+export const sidebarRowPadding = "px-2 py-1.5";
+export const sidebarRowMinHeight = "min-h-9";
+export const sidebarRowRadius = "rounded-control";
+
+export const sidebarRowClass = (className?: string) =>
+  cn(
+    "group/row relative flex w-full items-center gap-1",
+    sidebarRowPadding,
+    sidebarRowMinHeight,
+    sidebarRowRadius,
+    className,
+  );
+
+export const sidebarAnchorClass = (className?: string) =>
+  cn(
+    "flex min-w-0 flex-1 items-center gap-2 truncate text-left text-caption-2 transition-colors",
+    className,
+  );
+
+export const sidebarSectionAnchorClass = (className?: string) =>
+  cn(
+    "flex min-w-0 flex-1 items-center gap-2 truncate text-left text-caption-2 transition-colors",
+    className,
+  );

package/src/patterns/Skeleton/Skeleton.tsx

@@ -0,0 +1,57 @@
+import { cn } from "../../utils/cn";
+
+export type SkeletonVariant = "content" | "search";
+
+export type SkeletonProps = {
+  variant?: SkeletonVariant;
+  className?: string;
+};
+
+const ContentSkeleton = () => (
+  <div className="flex flex-col gap-4 p-4" aria-hidden>
+    <div className="flex items-center gap-3">
+      <div className="size-8 animate-pulse rounded-full bg-grey-200" />
+      <div className="flex flex-1 flex-col gap-2">
+        <div className="h-4 w-1/3 animate-pulse rounded bg-grey-200" />
+        <div className="h-3 w-1/4 animate-pulse rounded bg-grey-100" />
+      </div>
+    </div>
+    <div className="flex flex-col gap-2">
+      <div className="h-4 w-full animate-pulse rounded bg-grey-200" />
+      <div className="h-4 w-5/6 animate-pulse rounded bg-grey-200" />
+      <div className="h-4 w-2/3 animate-pulse rounded bg-grey-100" />
+    </div>
+    <div className="h-24 animate-pulse rounded-control bg-grey-100" />
+  </div>
+);
+
+const SearchSkeleton = () => (
+  <div className="flex flex-col gap-3 p-4" aria-hidden>
+    <div className="h-10 animate-pulse rounded-control bg-grey-200" />
+    <div className="flex gap-2">
+      <div className="h-7 w-16 animate-pulse rounded-full bg-grey-100" />
+      <div className="h-7 w-20 animate-pulse rounded-full bg-grey-100" />
+      <div className="h-7 w-14 animate-pulse rounded-full bg-grey-100" />
+    </div>
+    {Array.from({ length: 4 }).map((_, index) => (
+      <div key={index} className="flex items-center gap-3 py-1">
+        <div className="size-5 animate-pulse rounded bg-grey-200" />
+        <div className="flex flex-1 flex-col gap-1.5">
+          <div className="h-3.5 w-3/4 animate-pulse rounded bg-grey-200" />
+          <div className="h-3 w-1/2 animate-pulse rounded bg-grey-100" />
+        </div>
+      </div>
+    ))}
+  </div>
+);
+
+export const Skeleton = ({ variant = "content", className }: SkeletonProps) => (
+  <div
+    className={cn("rounded-control bg-background-primary", className)}
+    role="status"
+    aria-label="Loading"
+    data-variant={variant}
+  >
+    {variant === "content" ? <ContentSkeleton /> : <SearchSkeleton />}
+  </div>
+);

package/src/patterns/Skeleton/index.ts

@@ -0,0 +1 @@
+export { Skeleton, type SkeletonProps, type SkeletonVariant } from "./Skeleton";

package/src/patterns/index.ts

@@ -0,0 +1,5 @@
+export * from "./Sidebar";
+export * from "./Chat";
+export * from "./Modal";
+export * from "./Search";
+export * from "./Skeleton";

package/src/primitives/Avatar.tsx

@@ -0,0 +1,71 @@
+import { cn } from "../utils/cn";
+
+type ChiefType = "technical" | "compliance" | "initials";
+type AvatarSize = 32 | 24 | 18 | 16;
+
+export type AvatarProps = {
+  chief: ChiefType;
+  size?: AvatarSize;
+  initials?: string;
+  className?: string;
+};
+
+const sizeStyles: Record<AvatarSize, string> = {
+  32: "size-8 text-caption-2-em",
+  24: "size-6 text-footnote-em",
+  18: "size-[18px] text-[10px] font-medium leading-none",
+  16: "size-4 text-[9px] font-medium leading-none",
+};
+
+const chiefStyles: Record<ChiefType, string> = {
+  technical: "bg-blue-100 text-blue-700",
+  compliance: "bg-green-100 text-green-700",
+  initials: "bg-grey-200 text-display-on-light-secondary",
+};
+
+const TechnicalIcon = ({ size }: { size: AvatarSize }) => {
+  const iconSize = size >= 24 ? 12 : 8;
+
+  return (
+    <svg width={iconSize} height={iconSize} viewBox="0 0 12 12" fill="none" aria-hidden>
+      <path
+        d="M6 1.5v9M3.5 4h5M3.5 8h5"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+};
+
+const ComplianceIcon = ({ size }: { size: AvatarSize }) => {
+  const iconSize = size >= 24 ? 12 : 8;
+
+  return (
+    <svg width={iconSize} height={iconSize} viewBox="0 0 12 12" fill="none" aria-hidden>
+      <path
+        d="M3 6l2 2 4-4"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export const Avatar = ({ chief, size = 32, initials, className }: AvatarProps) => (
+  <span
+    className={cn(
+      "inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full",
+      sizeStyles[size],
+      chiefStyles[chief],
+      className,
+    )}
+    aria-hidden={chief !== "initials"}
+  >
+    {chief === "technical" && <TechnicalIcon size={size} />}
+    {chief === "compliance" && <ComplianceIcon size={size} />}
+    {chief === "initials" && (initials?.slice(0, 2).toUpperCase() ?? "AC")}
+  </span>
+);

package/src/primitives/Badge.tsx

@@ -0,0 +1,34 @@
+import { type ReactNode } from "react";
+import { cn } from "../utils/cn";
+
+type BadgeColor = "blue" | "green" | "red" | "orange" | "purple" | "grey";
+type BadgeType = "label" | "icon";
+
+export type BadgeProps = {
+  color: BadgeColor;
+  type?: BadgeType;
+  children: ReactNode;
+  className?: string;
+};
+
+const colorStyles: Record<BadgeColor, string> = {
+  blue: "bg-meta-blue text-meta-on-blue",
+  green: "bg-meta-green text-meta-on-green",
+  red: "bg-meta-red text-meta-on-red",
+  orange: "bg-meta-orange text-meta-on-orange",
+  purple: "bg-meta-purple text-meta-on-purple",
+  grey: "bg-grey-100 text-display-on-light-secondary",
+};
+
+export const Badge = ({ color, type = "label", children, className }: BadgeProps) => (
+  <span
+    className={cn(
+      "inline-flex shrink-0 items-center justify-center text-footnote-em",
+      type === "label" ? "rounded-control px-2 py-0.5" : "size-6 rounded-full",
+      colorStyles[color],
+      className,
+    )}
+  >
+    {children}
+  </span>
+);