@siena-ai/design-system 0.0.14 → 0.0.16

package/dist/globals.css

@@ -176,6 +176,20 @@
   --sidebar-border: #E8E4DF;
   --sidebar-ring: #9B4DAF;
 
+  /* ─────────────────────────────────────────────────────────────
+     INBOX PANELS — 3-panel responsive layout
+     ───────────────────────────────────────────────────────────── */
+
+  /* Panel widths - right panel wider for more context */
+  --inbox-list-width: 280px;        /* Conversation list needs less space */
+  --inbox-list-rail-width: 56px;
+  --inbox-context-width: 360px;     /* Context panel needs more space */
+  --inbox-context-rail-width: 56px;
+  --inbox-center-min-width: 480px;  /* Protect conversation readability */
+
+  /* Panel transitions */
+  --inbox-panel-transition: 200ms ease-out;
+
   /* ─────────────────────────────────────────────────────────────
      CHAT TOKENS — Siena Chat System
      ───────────────────────────────────────────────────────────── */
@@ -404,6 +418,13 @@
     transform: translateY(-2px);
   }
 
+  /* Vertical text for collapsed panels */
+  .writing-mode-vertical {
+    writing-mode: vertical-rl;
+    text-orientation: mixed;
+    transform: rotate(180deg);
+  }
+
   /* Container max-widths */
   .container-tight {
     @apply max-w-3xl mx-auto px-6;
@@ -432,6 +453,76 @@
     @apply outline-none ring-2 ring-offset-2 ring-offset-background ring-primary/50;
   }
 
+  /* ============================================================
+   * STATE BORDER UTILITIES
+   * Semantic classes for interactive element states.
+   * Use these instead of raw border-primary for consistency.
+   *
+   * Change the design here → updates everywhere automatically.
+   * ============================================================ */
+
+  /* SELECTED — User actively chose this option (OptionCard, template picker) */
+  .state-selected {
+    @apply border-primary bg-primary/5;
+  }
+
+  /* ACTIVE FILTER — A filter/toggle is currently applied (softer than selected) */
+  .state-active-filter {
+    @apply border-primary/50 bg-primary/5;
+  }
+
+  /* EXPANDED — Collapsible content is open (NOT an action, just state) */
+  .state-expanded {
+    @apply border-muted-foreground/30;
+  }
+
+  /* ─────────────────────────────────────────────────────────────
+   * CARD HOVER UTILITY
+   *
+   * ONE pattern for clickable cards: subtle purple border + shadow lift.
+   * Use `state-hover-card` on any card that triggers an action (opens
+   * sheet, navigates, expands content).
+   *
+   * ONE RULE: Interactive card = state-hover-card
+   * "Interactive" = clicking the card triggers something (expand, modal, navigate)
+   *
+   * DO NOT USE when:
+   * - Card is display-only (info card with interactive buttons INSIDE)
+   * - Card border communicates status (green = pass, red = error)
+   * ───────────────────────────────────────────────────────────── */
+
+  /* CARD HOVER — Purple border + shadow lift + cursor for interactive cards */
+  .state-hover-card {
+    @apply hover:border-primary/50 transition-all cursor-pointer;
+  }
+  .state-hover-card:hover {
+    box-shadow:
+      0 1px 2px hsl(var(--shadow-color) / 0.04),
+      0 2px 4px hsl(var(--shadow-color) / 0.04),
+      0 4px 8px hsl(var(--shadow-color) / 0.04);
+  }
+
+  /* Aliases for backward compatibility — all resolve to same effect */
+  .state-hover-card-subtle {
+    @apply hover:border-primary/50 transition-all;
+  }
+  .state-hover-card-subtle:hover {
+    box-shadow:
+      0 1px 2px hsl(var(--shadow-color) / 0.04),
+      0 2px 4px hsl(var(--shadow-color) / 0.04),
+      0 4px 8px hsl(var(--shadow-color) / 0.04);
+  }
+
+  .state-hover-interactive {
+    @apply hover:border-primary/50 transition-all;
+  }
+  .state-hover-interactive:hover {
+    box-shadow:
+      0 1px 2px hsl(var(--shadow-color) / 0.04),
+      0 2px 4px hsl(var(--shadow-color) / 0.04),
+      0 4px 8px hsl(var(--shadow-color) / 0.04);
+  }
+
   /* ─────────────────────────────────────────────────────────────
      CHAT UTILITIES
      ───────────────────────────────────────────────────────────── */
@@ -530,6 +621,136 @@
   animation: chat-thinking-shimmer 2s ease-in-out infinite;
 }
 
+/* ═══════════════════════════════════════════════════════════════
+   PRESENTATION ANIMATIONS
+   Understated, elegant transitions - no aggressive movement
+   Inspired by Apple Keynote's refined approach
+   ═══════════════════════════════════════════════════════════════ */
+
+/* Simple fade in - the primary transition */
+@keyframes slide-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slide-fade-in-reverse {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Subtle upward fade for content elements */
+@keyframes slide-fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Very gentle scale for cards */
+@keyframes slide-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Stat counter animation - subtle rise */
+@keyframes stat-enter {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Legacy classes for backward compatibility */
+@keyframes slide-enter {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slide-enter-reverse {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@layer utilities {
+  /* Primary slide transitions - DISABLED (instant) */
+  .animate-slide-fade-in {
+    opacity: 1;
+  }
+
+  .animate-slide-fade-in-reverse {
+    opacity: 1;
+  }
+
+  /* Content element animations - DISABLED (instant) */
+  .animate-slide-fade-up {
+    opacity: 1;
+  }
+
+  .animate-slide-scale-in {
+    opacity: 1;
+  }
+
+  .animate-stat-enter {
+    opacity: 1;
+  }
+
+  /* Legacy support - DISABLED (instant) */
+  .animate-slide-enter {
+    opacity: 1;
+  }
+
+  .animate-slide-enter-reverse {
+    opacity: 1;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   SIENA ENGAGED INDICATOR
+   - Text color: .siena-shimmer (solid terracotta for Siena name)
+   - Avatar ring: .siena-engaged-ring (simple border for left menu)
+   ═══════════════════════════════════════════════════════════════ */
+
+/* Siena text - solid terracotta (for main conversation) */
+.siena-shimmer {
+  color: var(--siena-terracotta);
+}
+
+/* Siena engaged avatar ring - simple 1px terracotta border (for left menu) */
+.siena-engaged-ring {
+  border-radius: 9999px;
+  box-shadow: 0 0 0 1px var(--siena-terracotta);
+}
+
 /* ═══════════════════════════════════════════════════════════════
    COMPONENT OVERRIDES
    ═══════════════════════════════════════════════════════════════ */
@@ -672,6 +893,46 @@
   .link-underline:hover::after {
     @apply w-full;
   }
+
+  /* ─────────────────────────────────────────────────────────────
+     CUSTOM SCROLLBAR — Refined, subtle, system-wide
+     Matches the Radix ScrollArea aesthetic but for native scrolling.
+     ───────────────────────────────────────────────────────────── */
+
+  /* Webkit browsers (Chrome, Safari, Edge) */
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 9999px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--muted-foreground);
+  }
+
+  /* Hide scrollbar buttons/arrows */
+  ::-webkit-scrollbar-button {
+    display: none;
+  }
+
+  /* Corner when both scrollbars present */
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  /* Firefox */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border) transparent;
+  }
 }
 
 /* ═══════════════════════════════════════════════════════════════
@@ -703,11 +964,13 @@
     margin-bottom: 0.5em;
   }
 
+  /* Links - use foreground color, not purple (preserve purple for CTAs) */
   .prose-siena a {
-    @apply text-primary underline underline-offset-4;
+    @apply text-foreground underline underline-offset-4 decoration-muted-foreground/50;
+    transition: color 150ms, text-decoration-color 150ms;
   }
   .prose-siena a:hover {
-    color: var(--siena-bougainvillea-dark);
+    @apply text-foreground decoration-foreground;
   }
 
   .prose-siena ul,

package/dist/index.d.ts

@@ -306,7 +306,10 @@ declare namespace SearchableSelect {
     var displayName: string;
 }
 
-declare function Slider({ className, defaultValue, value, min, max, ...props }: React$1.ComponentProps<typeof SliderPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare const sliderVariants: (props?: ({
+    color?: "default" | "success" | "warning" | "muted" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Slider({ className, defaultValue, value, min, max, color, ...props }: React$1.ComponentProps<typeof SliderPrimitive.Root> & VariantProps<typeof sliderVariants>): react_jsx_runtime.JSX.Element;
 
 declare function Switch({ className, ...props }: React$1.ComponentProps<typeof SwitchPrimitive.Root>): react_jsx_runtime.JSX.Element;
 
@@ -498,10 +501,16 @@ declare function PaginationContent({ className, ...props }: React$1.ComponentPro
 declare function PaginationItem({ ...props }: React$1.ComponentProps<"li">): react_jsx_runtime.JSX.Element;
 type PaginationLinkProps = {
     isActive?: boolean;
-} & Pick<React$1.ComponentProps<typeof Button>, "size"> & React$1.ComponentProps<"a">;
-declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): react_jsx_runtime.JSX.Element;
-declare function PaginationPrevious({ className, ...props }: React$1.ComponentProps<typeof PaginationLink>): react_jsx_runtime.JSX.Element;
-declare function PaginationNext({ className, ...props }: React$1.ComponentProps<typeof PaginationLink>): react_jsx_runtime.JSX.Element;
+    /** Render as button instead of anchor (for client-side pagination) */
+    asButton?: boolean;
+} & Pick<React$1.ComponentProps<typeof Button>, "size"> & React$1.ComponentProps<"a"> & Pick<React$1.ComponentProps<"button">, "onClick" | "disabled">;
+declare function PaginationLink({ className, isActive, asButton, size, onClick, disabled, ...props }: PaginationLinkProps): react_jsx_runtime.JSX.Element;
+declare function PaginationPrevious({ className, showLabel, ...props }: React$1.ComponentProps<typeof PaginationLink> & {
+    showLabel?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function PaginationNext({ className, showLabel, ...props }: React$1.ComponentProps<typeof PaginationLink> & {
+    showLabel?: boolean;
+}): react_jsx_runtime.JSX.Element;
 declare function PaginationEllipsis({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
 
 declare const tabsListVariants: (props?: ({
@@ -636,8 +645,9 @@ declare function SheetDescription({ className, ...props }: React$1.ComponentProp
 declare function TooltipProvider({ delayDuration, ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Provider>): react_jsx_runtime.JSX.Element;
 declare function Tooltip({ ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Root>): react_jsx_runtime.JSX.Element;
 declare function TooltipTrigger({ ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
-declare function TooltipContent({ className, sideOffset, children, container, ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Content> & {
+declare function TooltipContent({ className, sideOffset, children, container, showArrow, ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Content> & {
     container?: HTMLElement | null;
+    showArrow?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
 declare function Command({ className, ...props }: React$1.ComponentProps<typeof Command$1>): react_jsx_runtime.JSX.Element;
@@ -753,9 +763,16 @@ declare const ChannelIcons: {
     readonly gorgias: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
     readonly intercom: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
     readonly shopify: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly yotpo: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly klaviyo: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly recharge: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly attentive: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly loop: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly api: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly siena: ({ className }: IconProps) => react_jsx_runtime.JSX.Element;
 };
 type ChannelType = keyof typeof ChannelIcons;
-declare function getChannelIcon(channel: ChannelType): (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element);
+declare function getChannelIcon(channel: ChannelType): (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element) | (({ className }: IconProps) => react_jsx_runtime.JSX.Element);
 
 type SidebarContextProps = {
     state: "expanded" | "collapsed";
@@ -1008,6 +1025,36 @@ interface Message {
     status?: "sending" | "sent" | "error";
     /** Rich content to render after the text (charts, etc.) */
     afterContent?: React$1.ReactNode;
+    /** Sender name (for inbox variant) */
+    senderName?: string;
+    /** Sender avatar URL (for inbox variant) */
+    senderAvatar?: string;
+    /** Sender email (for inbox variant tooltip) */
+    senderEmail?: string;
+    /** Channel type (for inbox variant) */
+    channel?: MessageChannel;
+    /** AI persona name (for inbox variant) */
+    personaName?: string;
+    /** AI persona emoji (for inbox variant, e.g., "🌿") */
+    personaEmoji?: string;
+    /** Mode badge text (for inbox variant) */
+    modeBadge?: string;
+    /** Link to open original message (for tooltip) */
+    messageLink?: string;
+}
+/** Channel type for inbox variant */
+type MessageChannel = "instagram" | "facebook" | "tiktok" | "email" | "sms" | "phone" | "chat" | "comment";
+/** Brand identity per channel - scalable "To" field for tooltips */
+interface BrandIdentity {
+    email?: string;
+    instagram?: string;
+    facebook?: string;
+    tiktok?: string;
+    sms?: string;
+    phone?: string;
+    chat?: string;
+    comment?: string;
+    default: string;
 }
 interface MessageBubbleProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /** Message role */
@@ -1044,10 +1091,40 @@ interface MessageBubbleProps extends React$1.HTMLAttributes<HTMLDivElement> {
     onFeedback?: (type: "up" | "down") => void;
     /** Current feedback state */
     feedbackState?: "up" | "down" | null;
-    /** Visual variant: compact (wrapped bubble) or full (full-width, no bubble wrapper) */
-    variant?: "compact" | "full";
+    /** Visual variant: compact (wrapped bubble), full (full-width), or inbox (clean social-style) */
+    variant?: "compact" | "full" | "inbox";
+    /** Sender name (for inbox variant) */
+    senderName?: string;
+    /** Sender avatar URL (for inbox variant) */
+    senderAvatar?: string;
+    /** Channel type (for inbox variant) */
+    channel?: MessageChannel;
+    /** AI persona name (for inbox variant, assistant messages) */
+    personaName?: string;
+    /** AI persona emoji (for inbox variant, e.g., "🌿") - replaces Sparkles icon */
+    personaEmoji?: string;
+    /** Show mode badge (e.g., "Conversational Mode") */
+    modeBadge?: string;
+    /** Sender email (for inbox variant tooltip) */
+    senderEmail?: string;
+    /** Link to open original message (for tooltip) */
+    messageLink?: string;
+    /** Custom content to render in the header row (e.g., intent badges) */
+    headerContent?: React$1.ReactNode;
+    /** Whether this is an internal note (channel-agnostic, no channel icon, "Added by" instead of "Responded by") */
+    isInternalNote?: boolean;
+    /**
+     * Brand identity for customer message "To" field in tooltips.
+     * Can be a simple string (e.g., "@kitschbeauty") for backward compatibility,
+     * or a BrandIdentity object for channel-specific identities:
+     * - email: "support@siena.cx"
+     * - instagram: "@sienabrand"
+     * - sms: "+1 (800) 123-4567"
+     * etc.
+     */
+    brandIdentity?: BrandIdentity | string;
 }
-declare function MessageBubble({ role, content, timestamp, status, attachments, streaming, showAvatar, userInitial, afterContent, onCopy, onEdit, onSaveEdit, onCancelEdit, isEditing, onRegenerate, onFeedback, feedbackState, variant, className, ...props }: MessageBubbleProps): react_jsx_runtime.JSX.Element;
+declare function MessageBubble({ role, content, timestamp, status, attachments, streaming, showAvatar, userInitial, afterContent, onCopy, onEdit, onSaveEdit, onCancelEdit, isEditing, onRegenerate, onFeedback, feedbackState, variant, senderName, senderAvatar, senderEmail, channel, personaName, personaEmoji, modeBadge, messageLink, headerContent, isInternalNote, brandIdentity, className, ...props }: MessageBubbleProps): react_jsx_runtime.JSX.Element;
 
 interface ToolCallBlockProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /** Tool/function name */
@@ -1155,7 +1232,11 @@ interface ChatMessageListProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /** Height of the container */
     height?: string | number;
     /** Message bubble variant */
-    messageVariant?: "compact" | "full";
+    messageVariant?: "compact" | "full" | "inbox";
+    /** Default persona name for AI messages (for inbox variant) */
+    defaultPersonaName?: string;
+    /** Default persona emoji for AI messages (for inbox variant) */
+    defaultPersonaEmoji?: string;
     /** Show avatars - can be boolean or object { user?: boolean, ai?: boolean } */
     showAvatars?: boolean | {
         user?: boolean;
@@ -1164,14 +1245,16 @@ interface ChatMessageListProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /** User avatar fallback (initials) - only applies to user messages */
     userInitial?: string;
 }
-declare function ChatMessageList({ messages, loading, typing, onScrollTop, welcomeMessage, emptyState, onCopyMessage, onEditMessage, onSaveEdit, onCancelEdit, onRegenerateMessage, onFeedback, streamingMessageId, editingMessageId, feedbackStates, height, messageVariant, showAvatars, userInitial, className, ...props }: ChatMessageListProps): react_jsx_runtime.JSX.Element;
+declare function ChatMessageList({ messages, loading, typing, onScrollTop, welcomeMessage, emptyState, onCopyMessage, onEditMessage, onSaveEdit, onCancelEdit, onRegenerateMessage, onFeedback, streamingMessageId, editingMessageId, feedbackStates, height, messageVariant, showAvatars, userInitial, defaultPersonaName, defaultPersonaEmoji, className, ...props }: ChatMessageListProps): react_jsx_runtime.JSX.Element;
 
 /** Context header displayed inside the input container */
 interface ChatInputContext {
     /** Label text (e.g., "Replying to @sarah") */
     label: string;
     /** Color variant */
-    variant?: "sage" | "blue" | "muted";
+    variant?: "sage" | "blue" | "muted" | "ochre";
+    /** Optional icon to display before label (e.g., channel icon) */
+    icon?: React$1.ReactNode;
     /** Dismiss callback - shows ✕ button when provided */
     onDismiss?: () => void;
     /** Optional actions on the right (e.g., "Send DM instead" button) */
@@ -1248,6 +1331,80 @@ interface ChatInputProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "o
 }
 declare function ChatInput({ value, onChange, onSend, onAttach, placeholder, disabled, loading, maxLength, showCount, attachments, onRemoveAttachment, onVoiceTranscript, showVoice, voiceSlot, isTranscripting, submitShortcut, maxRows, minRows, showAttachButton, onAttachClick, showSendButton, footerContent, leftSlot, rightSlot, enableDragDrop, context, className, ...props }: ChatInputProps): react_jsx_runtime.JSX.Element;
 
+type Channel$1 = "dm" | "comment" | "email" | "sms" | "phone";
+type Platform$1 = "instagram" | "facebook" | "tiktok" | "twitter" | "email" | "sms";
+
+/** The mode of the input - determines context bar styling and behavior */
+type InputMode = "public" | "dm" | "internal";
+/** Context for what we're replying to - determines the context bar content */
+type InputContext = {
+    type: "post";
+    platform: Platform$1;
+} | {
+    type: "user";
+    handle: string;
+    platform: Platform$1;
+} | {
+    type: "channel";
+    channel: Channel$1;
+    platform: Platform$1;
+    customerName: string;
+} | {
+    type: "dm";
+    handle: string;
+    platform: Platform$1;
+} | {
+    type: "internal";
+};
+/** The logged-in user (for agent attribution on replies) */
+interface CurrentUser {
+    id: string;
+    name: string;
+    avatar?: string;
+}
+
+interface UnifiedInputProps {
+    /** The logged-in user (for agent attribution) */
+    currentUser: CurrentUser;
+    /** Current input context - determines labels, icons, and available actions */
+    context: InputContext;
+    /** Which modes are available (default: ["public"]) */
+    availableModes?: InputMode[];
+    /** Callback when mode changes (e.g., from public to dm via action button) */
+    onModeChange?: (mode: InputMode) => void;
+    /** Callback when context X is clicked (dismisses current context). Falls back to onModeChange("public") if not provided. */
+    onContextDismiss?: () => void;
+    /** Callback when message is sent - includes the mode */
+    onSendMessage: (content: string, mode: InputMode) => void;
+    /** Callback for file attachments */
+    onAttach?: (files: File[]) => void;
+    /** Current attachments */
+    attachments?: Attachment$1[];
+    /** Remove attachment callback */
+    onRemoveAttachment?: (id: string) => void;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Loading state */
+    loading?: boolean;
+    className?: string;
+}
+declare function UnifiedInput({ currentUser, context, availableModes, onModeChange, onContextDismiss, onSendMessage, onAttach, attachments, onRemoveAttachment, disabled, loading, className, }: UnifiedInputProps): react_jsx_runtime.JSX.Element;
+
+interface InputPlusMenuProps {
+    /** Which modes are available in this context */
+    availableModes: InputMode[];
+    /** Current active mode */
+    currentMode: InputMode;
+    /** Callback when mode changes */
+    onModeChange: (mode: InputMode) => void;
+    /** Callback when Attach file is selected */
+    onAttach?: () => void;
+    /** Disabled state */
+    disabled?: boolean;
+    className?: string;
+}
+declare function InputPlusMenu({ availableModes, currentMode, onModeChange, onAttach, disabled, className, }: InputPlusMenuProps): react_jsx_runtime.JSX.Element | null;
+
 interface Persona {
     id: string;
     name: string;
@@ -2370,6 +2527,37 @@ interface ContextCardGridProps {
  */
 declare function ContextCardGrid({ children, className }: ContextCardGridProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * RelatedLinks - Display external links with auto-detected icons
+ *
+ * Supports any URL - automatically detects the service from the domain
+ * and shows the appropriate icon. Falls back to generic ExternalLink icon.
+ *
+ * Icons are imported from the design system (@/components/ui/service-icons)
+ *
+ * Used in: Priorities OS (sheet and full page views)
+ */
+interface ExternalLinkItem {
+    url: string;
+    label?: string;
+}
+interface RelatedLinksProps {
+    links: ExternalLinkItem[];
+    className?: string;
+    /** Compact mode for inline display (e.g., in initiative rows) */
+    compact?: boolean;
+}
+/**
+ * RelatedLinks - Display a list of external links with auto-detected icons
+ */
+declare function RelatedLinks({ links, className, compact }: RelatedLinksProps): react_jsx_runtime.JSX.Element | null;
+/**
+ * Single link display - for use in initiative rows
+ */
+declare function LinkButton({ url, label, className }: ExternalLinkItem & {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
 interface HeroProps {
     label?: string;
     title: string;
@@ -2451,6 +2639,6 @@ declare function PortalContainerProvider({ container, children, }: {
 }): react_jsx_runtime.JSX.Element;
 declare function usePortalContainer(): HTMLElement | null;
 
-declare const VERSION = "4.7.0";
+declare const VERSION = "6.3.0";
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, type Account, AccountPicker, type AccountPickerProps, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ApiKeyDisplay, AppLayout, AppSidebar, AspectRatio, type Attachment$1 as Attachment, AttachmentLightbox, type AttachmentLightboxProps, AttachmentMenu, type AttachmentMenuProps, AttachmentPreview, type AttachmentPreviewProps, Avatar, type AvatarColor, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, CTASection, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CategoryFilterChips, type ChangeItem, ChangelogSheet, type Channel, ChannelIcons, ChartCard, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, ChatAvatar, type ChatAvatarProps, ChatHeader, type ChatHeaderProps, ChatInput, type ChatInputContext, type ChatInputProps, ChatMessageList, type ChatMessageListProps, ChatPanel, type ChatPanelProps, ChatSidebar, type ChatSidebarProps, ChatWidget, type ChatWidgetProps, ChatWindow, type ChatWindowProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextCard, ContextCardGrid, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type Conversation, type ConversationActions, type ConversationChannel, type ConversationStatus, CustomerSheet, DataTable, DataTableColumnHeader, type DatePreset, DateRangePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DocumentHeader, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmailIcon, EmojiPicker, EmptyState, FacebookIcon, FeatureGrid, FilterBar, type FilterChip, FilterDropdown, type FilterOption, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GorgiasIcon, HelpMenu, type HelpMenuItem, Hero, HoverCard, HoverCardContent, HoverCardTrigger, IconSelect, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, InsightReport, type InsightReportData, InstagramIcon, IntegrationCard, type IntegrationType, IntercomIcon, Kbd, Label, LinkedInIcon, LiveChatIcon, LogoCloud, MarkdownRenderer, type MarkdownRendererProps, type MemberRole, type MemberStatus, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, type Message, MessageActions, type MessageActionsProps, MessageBubble, type MessageBubbleProps, MessengerIcon, type Model, ModelSelector, type ModelSelectorProps, type NavItem, NavMain, type NavSection, type NavSubItem, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, type PageBreadcrumbItem, PageHeader, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasswordInput, PersonSheet, type Persona, PhoneIcon, PlaceholderLogo, type Platform, type Playbook, PlaygroundInput, type PlaygroundInputProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalContainerProvider, PriorityBadge, PriorityChangelogBanner, PriorityChangelogSheet, type PriorityLevel, ProductBadge, ProductCard, type ProductTag, Progress, RadioGroup, RadioGroupItem, type Recommendation, type Release, type ReleaseHighlight, type Report, ReportCard, ResizableHandle, ResizablePanel, ResizablePanelGroup, ReviewsIcon, ScrollArea, ScrollBar, SearchInput, type SearchInputProps, SearchableSelect, type SearchableSelectOption, type SearchableSelectProps, SectionHeader, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ShareDialog, type ShareDialogProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, ShopifyIcon, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, SlackIcon, Slider, SmsIcon, Spinner, StatCard, StreamingText, type StreamingTextProps, SuggestionChips, type SuggestionChipsProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, type TeamMember, TeamMemberList, Textarea, type TextareaProps, ThemeToggle, TikTokIcon, Toaster, Toggle, ToggleGroup, ToggleGroupItem, type Tool, type ToolCall, ToolCallBlock, type ToolCallBlockProps, type ToolProvider, ToolsPanelContent, type ToolsPanelContentProps, ToolsPopover, type ToolsPopoverProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TrendBadge, type TrendData, type TrendSection, TwitterIcon, TypingIndicator, type TypingIndicatorProps, UnsavedChangesBar, type UserData, UserMenu, type UserMenuItem, VERSION, VoiceInput, type VoiceInputProps, WhatsAppIcon, type Workspace, WorkspaceSelector, YouTubeIcon, ZendeskIcon, badgeVariants, buttonVariants, cn, defaultModels, defaultPlaybooks, formatShortDate, getChannelIcon, getReleaseTitle, inputVariants, navigationMenuTriggerStyle, productConfig, sampleReleases, textareaVariants, toggleVariants, useFormField, useIsMobile, usePortalContainer, useSidebar };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, type Account, AccountPicker, type AccountPickerProps, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ApiKeyDisplay, AppLayout, AppSidebar, AspectRatio, type Attachment$1 as Attachment, AttachmentLightbox, type AttachmentLightboxProps, AttachmentMenu, type AttachmentMenuProps, AttachmentPreview, type AttachmentPreviewProps, Avatar, type AvatarColor, AvatarFallback, AvatarImage, Badge, type BadgeProps, type BrandIdentity, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, CTASection, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CategoryFilterChips, type ChangeItem, ChangelogSheet, type Channel, ChannelIcons, ChartCard, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, ChatAvatar, type ChatAvatarProps, ChatHeader, type ChatHeaderProps, ChatInput, type ChatInputContext, type ChatInputProps, ChatMessageList, type ChatMessageListProps, ChatPanel, type ChatPanelProps, ChatSidebar, type ChatSidebarProps, ChatWidget, type ChatWidgetProps, ChatWindow, type ChatWindowProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextCard, ContextCardGrid, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type Conversation, type ConversationActions, type ConversationChannel, type ConversationStatus, type CurrentUser, CustomerSheet, DataTable, DataTableColumnHeader, type DatePreset, DateRangePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DocumentHeader, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmailIcon, EmojiPicker, EmptyState, type ExternalLinkItem, FacebookIcon, FeatureGrid, FilterBar, type FilterChip, FilterDropdown, type FilterOption, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GorgiasIcon, HelpMenu, type HelpMenuItem, Hero, HoverCard, HoverCardContent, HoverCardTrigger, IconSelect, Input, type InputContext, type InputMode, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputPlusMenu, type InputProps, InsightReport, type InsightReportData, InstagramIcon, IntegrationCard, type IntegrationType, IntercomIcon, Kbd, Label, LinkButton, LinkedInIcon, LiveChatIcon, LogoCloud, MarkdownRenderer, type MarkdownRendererProps, type MemberRole, type MemberStatus, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, type Message, MessageActions, type MessageActionsProps, MessageBubble, type MessageBubbleProps, type MessageChannel, MessengerIcon, type Model, ModelSelector, type ModelSelectorProps, type NavItem, NavMain, type NavSection, type NavSubItem, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, type PageBreadcrumbItem, PageHeader, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasswordInput, PersonSheet, type Persona, PhoneIcon, PlaceholderLogo, type Platform, type Playbook, PlaygroundInput, type PlaygroundInputProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalContainerProvider, PriorityBadge, PriorityChangelogBanner, PriorityChangelogSheet, type PriorityLevel, ProductBadge, ProductCard, type ProductTag, Progress, RadioGroup, RadioGroupItem, type Recommendation, RelatedLinks, type Release, type ReleaseHighlight, type Report, ReportCard, ResizableHandle, ResizablePanel, ResizablePanelGroup, ReviewsIcon, ScrollArea, ScrollBar, SearchInput, type SearchInputProps, SearchableSelect, type SearchableSelectOption, type SearchableSelectProps, SectionHeader, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ShareDialog, type ShareDialogProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, ShopifyIcon, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, SlackIcon, Slider, SmsIcon, Spinner, StatCard, StreamingText, type StreamingTextProps, SuggestionChips, type SuggestionChipsProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, type TeamMember, TeamMemberList, Textarea, type TextareaProps, ThemeToggle, TikTokIcon, Toaster, Toggle, ToggleGroup, ToggleGroupItem, type Tool, type ToolCall, ToolCallBlock, type ToolCallBlockProps, type ToolProvider, ToolsPanelContent, type ToolsPanelContentProps, ToolsPopover, type ToolsPopoverProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TrendBadge, type TrendData, type TrendSection, TwitterIcon, TypingIndicator, type TypingIndicatorProps, UnifiedInput, UnsavedChangesBar, type UserData, UserMenu, type UserMenuItem, VERSION, VoiceInput, type VoiceInputProps, WhatsAppIcon, type Workspace, WorkspaceSelector, YouTubeIcon, ZendeskIcon, badgeVariants, buttonVariants, cn, defaultModels, defaultPlaybooks, formatShortDate, getChannelIcon, getReleaseTitle, inputVariants, navigationMenuTriggerStyle, productConfig, sampleReleases, textareaVariants, toggleVariants, useFormField, useIsMobile, usePortalContainer, useSidebar };