@humain/ui 2.2.2 → 2.2.3

package/dist/components/templates/AppShell/AppShell.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { APP_SIDEBAR_COLLAPSED_WIDTH, APP_SIDEBAR_EXPANDED_WIDTH } from '../AppSidebar/AppSidebar.constants';
 import { AppShellContent } from './AppShellContent.js';
 import { AppShellPanel, type AppShellPanelProps } from './AppShellPanel.js';
 export interface AppShellProps extends React.ComponentProps<'div'> {
@@ -45,7 +46,8 @@ declare namespace AppShellRoot {
 }
 export interface AppShellSidebarProps extends React.ComponentProps<'div'> {
     /**
-     * Explicit width override — bypasses auto-detection.
+     * Explicit width override — bypasses auto-detection. Manual widths are
+     * protected by AppSidebar's canonical collapsed width to prevent clipping.
      * When omitted, the sidebar auto-sizes based on the child
      * SidebarProvider's expanded/collapsed state.
      */
@@ -97,4 +99,4 @@ declare const AppShell: typeof AppShellRoot & {
 };
 export type { AppShellContentProps } from './AppShellContent.js';
 export type { AppShellPanelProps } from './AppShellPanel.js';
-export { AppShell, AppShellContent, AppShellHeader, AppShellPanel, AppShellRoot, AppShellSidebar, appShellBackgrounds, };
+export { APP_SIDEBAR_COLLAPSED_WIDTH, APP_SIDEBAR_EXPANDED_WIDTH, AppShell, AppShellContent, AppShellHeader, AppShellPanel, AppShellRoot, AppShellSidebar, appShellBackgrounds, };

package/dist/components/templates/AppShell/index.d.ts

@@ -1,4 +1,4 @@
 export type { AppShellContentProps, AppShellHeaderProps, AppShellPanelProps, AppShellProps, AppShellSidebarProps, } from './AppShell.js';
-export { AppShell, AppShellContent, AppShellHeader, AppShellPanel, AppShellRoot, AppShellSidebar, appShellBackgrounds, } from './AppShell.js';
+export { APP_SIDEBAR_COLLAPSED_WIDTH, APP_SIDEBAR_EXPANDED_WIDTH, AppShell, AppShellContent, AppShellHeader, AppShellPanel, AppShellRoot, AppShellSidebar, appShellBackgrounds, } from './AppShell.js';
 export type { AppShellContextValue, PanelExpansionInfo, PanelLayoutInfo, PanelPosition, } from './AppShellContext.js';
 export { PanelExpansionContext, PanelIndexContext, PanelLayoutContext, useAppShell, usePanelExpansion, } from './AppShellContext.js';

package/dist/components/templates/AppSidebar/AppSidebar.constants.d.ts

@@ -0,0 +1,4 @@
+/** Canonical expanded width shared by AppSidebar and AppShell.Sidebar. */
+export declare const APP_SIDEBAR_EXPANDED_WIDTH = "280px";
+/** Canonical collapsed width shared by AppSidebar and AppShell.Sidebar. */
+export declare const APP_SIDEBAR_COLLAPSED_WIDTH = "116px";

package/dist/components/templates/AppSidebar/AppSidebar.d.ts

@@ -235,5 +235,6 @@ export declare const AppSidebar: typeof AppSidebarRoot & {
     Skeleton: typeof AppSidebarSkeleton;
 };
 export { MOBILE_BREAKPOINT, useIsMobile } from '../../../hooks/use-mobile.js';
+export { APP_SIDEBAR_COLLAPSED_WIDTH, APP_SIDEBAR_EXPANDED_WIDTH, } from './AppSidebar.constants';
 export type { AppSidebarAccountProps as AccountProps, AppSidebarChatItemProps as ChatItemProps, AppSidebarChatListProps as ChatListProps, AppSidebarChatListSkeletonProps as ChatListSkeletonProps, AppSidebarNavItemProps as NavItemProps, AppSidebarNavProps as NavProps, AppSidebarNavSectionProps as NavSectionProps, AppSidebarNavSkeletonProps as NavSkeletonProps, AppSidebarNavSubProps as NavSubProps, AppSidebarSkeletonProps as SkeletonProps, AppSidebarSlotProps as SlotProps, };
 export { chatItemVariants, navItemVariants, Sidebar, SidebarAccountSkeleton, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarNavSkeleton, SidebarProvider, SidebarTrigger, useSidebar, };

package/dist/index.js

@@ -139,21 +139,22 @@ import { Popover as PopoverCompound, PopoverDescription, PopoverHeader, PopoverP
 import { Sheet, SheetBackdrop as Backdrop$3, SheetBody as Body$1, SheetClose as Close$2, SheetDescription as Description$3, SheetDivider as Divider, SheetFooter as Footer$3, SheetHeader as Header$3, SheetPopup as Popup$4, SheetPortal as Portal$4, SheetRoot as Root$4, SheetSection as Section, SheetTitle as Title$3, SheetTrigger as Trigger$4, SheetViewport as Viewport$3 } from "./index212.js";
 import { MOBILE_BREAKPOINT, useIsMobile } from "./index215.js";
 import { Sidebar as SidebarCompound, SidebarAccountSkeleton, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarNavSkeleton, SidebarProvider, SidebarTrigger, useSidebar } from "./index216.js";
-import { PanelExpansionContext, PanelIndexContext, PanelLayoutContext, useAppShell, usePanelExpansion } from "./index217.js";
-import { AppShellContent } from "./index218.js";
-import { AppShellPanel } from "./index220.js";
-import { AppShell, AppShellHeader, AppShellRoot, AppShellSidebar, appShellBackgrounds } from "./index222.js";
-import { AppShellCard } from "./index223.js";
-import { AppSidebar, chatItemVariants, navItemVariants } from "./index224.js";
-import { PageBackground } from "./index225.js";
-import { AuthAsidePanel, AuthPageLayout, renderActionElement } from "./index226.js";
-import { NavAccountMenu, NavAccountMenuAccount, NavAccountMenuContent, NavAccountMenuFooter, NavAccountMenuHeader, NavAccountMenuItem, NavAccountMenuSection, NavAccountMenuSeparator, NavAccountMenuThemeSwitch, NavAccountMenuTrigger, navAccountMenuTriggerVariants as triggerVariants } from "./index227.js";
-import { ForgotPasswordPage } from "./index229.js";
-import { LoginPage } from "./index230.js";
-import { RegisterPage } from "./index231.js";
-import { ResetPasswordPage } from "./index232.js";
-import { TwoFactorAuthenticationPage } from "./index233.js";
-import { VerifyEmail as VerifyEmailPage } from "./index234.js";
-import { formatInteractionForLLM } from "./index235.js";
-import { useInteractionHandler } from "./index236.js";
-export { AIAsciiDiagram, AIChart, AIClarificationCard, AICodeBlock, AICodeBlockContent, AICodeBlockHeader, AIComponent, AIContainerCompound as AIContainer, AIContainerContext, AIContextIndicator, AIEmptyState, AIEmptyStateActions, AIEmptyStateDescription, AIEmptyStateIcon, AIEmptyStateRoot, AIEmptyStateSuggestionGrid, AIEmptyStateTitle, AIFeedbackBar, AIFeedbackIcons, AIForm, AIInput, AIInputActionBar, AIInputActions, AIInputAttachButton, AIInputFilePreview, AIInputLeadingIcon, AIInputRoot, AIInputSendButton, AIInputTextArea, AIInteractionContext, AIInteractionProvider, AILoadingDots, AIMermaidDiagram, AIMessage, AIMessageActions, AIMessageAttachmentPreview, AIMessageAttachments, AIMessageAvatar, AIMessageBubble, AIMessageContent, AIMessageCopyButton, AIMessageHeader, AIMessageListButton, AIMessageReactions, AIMessageRoot, AIMessageThumbsDown, AIMessageThumbsUp, AIMessageTypingIndicator, AIPromptSuggestion, AIPromptSuggestionCard, AIPromptSuggestionList, AIPulseText, AIQuickActions, AIReasoningBlock, AIReasoningContent, AIReasoningTrigger, AIResponseStream, AIScrollAnchor, AIScrollButton, AISelect, AISource, AISourceContent, AISourceList, AISourceTrigger, StepIcon as AIStepIcon, AIStepItem, AISteps, AISystemMessage, AISystemMessageBanner, AITable, AITextShimmer, AIThinkingBar, AIThinkingLoader, AIToolCall, AIToolCallHeader, AIToolCallList, AIToolRun, AITypingIndicator, AITypingText, AccordionCompound as Accordion, AccordionCardNamespace as AccordionCard, AccordionCardContent, AccordionCardEdit, AccordionCardHeader, AccordionCardTitle, AccordionCardTrigger, AccordionContent, AccordionItem, AccordionTrigger, ActionButton, ActivityFeed, ActivityFeedItem, AdvancedRating, Alert, AlertDescription, AlertDialog, Action as AlertDialogAction, Backdrop as AlertDialogBackdrop, Cancel as AlertDialogCancel, Description as AlertDialogDescription, Footer as AlertDialogFooter, Header as AlertDialogHeader, Media as AlertDialogMedia, Popup as AlertDialogPopup, Portal as AlertDialogPortal, Root as AlertDialogRoot, Title as AlertDialogTitle, Trigger as AlertDialogTrigger, Viewport as AlertDialogViewport, AlertTitle, AppShell, AppShellCard, AppShellContent, AppShellHeader, AppShellPanel, AppShellRoot, AppShellSidebar, AppSidebar, AreaChart, AuthAsidePanel, AuthPageLayout, Autocomplete, Avatar, AvatarGroup, Badge, BadgeDot, BarChart, BrandIcon, BreadcrumbCompound as Breadcrumb, BreadcrumbEllipsis, BreadcrumbHomeLink, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarActions, CalendarContent, CalendarHeader, CalendarNavigation, CalendarSearch, CalendarTitle, CalendarViewSwitcher, Card, Carousel, CarouselNav, CarouselVisual, ChartCard, ChartLegend, Checkbox, CheckboxGroup, ClearButton, CodeSnippet, Collapsible, CollapsibleContent, CollapsibleTrigger, ComboboxContent, ComboboxGroup, ComboboxHeader, ComboboxItem, ComboboxMenu, ComboboxRoot, ComboboxSeparator, ComboboxShortcut, ComboboxTrigger, CommandMenu, CommandMenuFooter, CommandMenuGroupHeader, CommandMenuItem, CommandMenuPanel, CommandShortcutBadge, CompactActionButton, ContextMenu, CheckboxItem as ContextMenuCheckboxItem, Group as ContextMenuGroup, Item as ContextMenuItem, Label as ContextMenuLabel, Popup$1 as ContextMenuPopup, Portal$1 as ContextMenuPortal, RadioGroup as ContextMenuRadioGroup, RadioItem as ContextMenuRadioItem, Root$1 as ContextMenuRoot, Separator as ContextMenuSeparator, Shortcut as ContextMenuShortcut, Sub as ContextMenuSub, SubPopup as ContextMenuSubPopup, SubTrigger as ContextMenuSubTrigger, Trigger$1 as ContextMenuTrigger, CountdownTimer, DEFAULT_CHART_COLORS, DEFAULT_DONUT_COLORS, DEFAULT_PIE_COLORS, DataTable, DataTableActionsCell, DataTableAvatarCell, DataTableBadgesCell, DataTableCell, DataTableCellRoot, DataTableProgressCell, DataTableRatingCell, DataTableSparklineCell, DataTableSwitchCell, DataTableTextCell, DataTableToolbar, DataTableTrendCell, DateFilterButton, DatePicker, DateRangeFilterButton, DateRangePicker, Dialog, Action$1 as DialogAction, Backdrop$1 as DialogBackdrop, Body as DialogBody, Cancel$1 as DialogCancel, Close as DialogClose, Description$1 as DialogDescription, Footer$1 as DialogFooter, Header$1 as DialogHeader, HeaderContent as DialogHeaderContent, Icon as DialogIcon, Popup$2 as DialogPopup, Portal$2 as DialogPortal, Root$2 as DialogRoot, Title$1 as DialogTitle, Trigger$2 as DialogTrigger, Viewport$1 as DialogViewport, DisplayValue, DonutChart, Dot, DotCircleSpinner, Drawer, Backdrop$2 as DrawerBackdrop, Close$1 as DrawerClose, Description$2 as DrawerDescription, Footer$2 as DrawerFooter, Handle as DrawerHandle, Header$2 as DrawerHeader, Popup$3 as DrawerPopup, Portal$3 as DrawerPortal, Root$3 as DrawerRoot, Title$2 as DrawerTitle, Trigger$3 as DrawerTrigger, Viewport$2 as DrawerViewport, DropdownMenu, EmptyState, EmptyStateBackgroundPattern, EmptyStateIllustration, FadeText, FeaturedIcon, FeedbackButton, Field, FieldBottom, FieldBottomRight, FieldControl, FieldDescription, FieldError, FieldLabel, FieldTop, FieldTopRight, Fieldset, FileInput, FileTypeIcon, FileUpload, FileUploadArea, FileUploadItem, FooterNavIcon, FooterNavText, ForgotPasswordPage, Form, GroupingControls, History, HistoryValue, HorizontalBarChart, HoverCardCompound as HoverCard, HoverCardPopup, HoverCardTrigger, ICONS, InlineCTA, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item$1 as Item, KIND_TO_FILE, Kbd, KbdGroup, LineChart, LineSimpleSpinner, LineSpinner, LoadingIndicator, LoginPage, MAC_KEYS, MOBILE_BREAKPOINT, MetricCard, MetricChange, MetricItem, MetricMiniChart, NavAccountMenu, NavAccountMenuAccount, NavAccountMenuContent, NavAccountMenuFooter, NavAccountMenuHeader, NavAccountMenuItem, NavAccountMenuSection, NavAccountMenuSeparator, NavAccountMenuThemeSwitch, NavAccountMenuTrigger, NotificationPanel, NotificationPanelItem, NotificationSection, NumberInput, PageBackground, PageHeader, Pagination, PaginationDots, PanelExpansionContext, PanelIndexContext, PanelLayoutContext, PieChart, PopoverCompound as Popover, PopoverDescription, PopoverHeader, PopoverPopup, PopoverRoot, PopoverTitle, PopoverTrigger, Progress, RadarChart, RadialChart, RadioGroup$1 as RadioGroup, Rating, RegisterPage, ResetPasswordPage, ResizableHandle, ResizablePanel, ResizablePanelGroup, RichTextarea, RichTextareaToolbar, SIZE_MAP, ScrollArea, ScrollBar, SectionHeader, Select, SelectCompound, SelectGroup, SelectGroupLabel, SelectItem, SelectPopup, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectTriggerIcon, SelectValue, Separator$1 as Separator, Sheet, Backdrop$3 as SheetBackdrop, Body$1 as SheetBody, Close$2 as SheetClose, Description$3 as SheetDescription, Divider as SheetDivider, Footer$3 as SheetFooter, Header$3 as SheetHeader, Popup$4 as SheetPopup, Portal$4 as SheetPortal, Root$4 as SheetRoot, Section as SheetSection, Title$3 as SheetTitle, Trigger$4 as SheetTrigger, Viewport$3 as SheetViewport, Shortcut$1 as Shortcut, SidebarCompound as Sidebar, SidebarAccountSkeleton, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarNavSkeleton, SidebarProvider, SidebarTrigger, Skeleton, Slider, SliderBase, SonnerItem, SortableHeader, SourceFavicon, SparklineChart, StatusIcon, StepsCompound as Steps, StepsItem, StepsSubtext, SubmitButton, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, TabsTriggerWithCount, Textarea, ThemeProvider, ThemeScript, ThinkingIndicator, TimePicker, ToastContent, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToolCallSection, ToolbarButton, ToolbarDivider, TooltipCompound as Tooltip, TooltipAvatar, TooltipBadge, TooltipContent, TooltipIcon, TooltipImage, TooltipPopup, TooltipProvider, TooltipRoot, TooltipSubtitle, TooltipTitle, TooltipTrigger, TwoFactorAuthenticationPage, TypewriterText, VerifyEmailPage as VerifyEmail, VerifyEmailPage, WIN_KEYS, WorkflowAddNode, WorkflowCircleNode, WorkflowComment, WorkflowConnection, WorkflowNode, WorkflowPort, activityFeedVariants, activityItemVariants, stepIconVariants as aiStepIconVariants, stepItemVariants as aiStepItemVariants, stepsContainerVariants as aiStepsContainerVariants, alertVariants, analyzePaste, appShellBackgrounds, areaChartVariants, arrowVariants, asciiDiagramVariants, asciiToSvg, badgeVariants, bannerVariants, barChartVariants, breadcrumbItemVariants, buttonVariants, chatItemVariants, cn, codeBlockVariants, codeSnippetVariants, comboboxContentVariants, comboboxTriggerVariants, contentVariants, createSelectColumn, dataTableCellVariants, dataTableHeaderCellVariants, dataTableRowVariants, dataTableVariants, defaultFooterHints, detectPasteKind, footerVariants as dialogFooterVariants, headerVariants as dialogHeaderVariants, iconVariants as dialogIconVariants, popupVariants as dialogPopupVariants, donutChartVariants, extensionColors, feedbackBarVariants, feedbackButtonVariants, fileInputSizeClasses, fileUploadAreaVariants, fileUploadItemVariants, formatInteractionForLLM, getThemeScript, historyEventCategoryConfig, historyHeaderActionConfig, horizontalBarChartVariants, indicatorVariants, inlineCTAVariants, sizeClasses as inputSizeClasses, stateClasses as inputStateClasses, inputVariants, isAsciiDiagram, itemVariants, kbdGroupVariants, kbdVariants, lineChartVariants, lineNumberVariants, loadingIndicatorVariants, loadingTextVariants, looksLikeAsciiDiagram, looksLikeSimpleAscii, mapKindToFile, messageBubbleVariants, messageVariants, metricCardVariants, metricChangeVariants, metricItemVariants, metricMiniChartVariants, triggerVariants as navAccountMenuTriggerVariants, navItemVariants, notificationDotVariants, notificationPanelVariants, pageHeaderVariants, paginationDotIndicatorVariants, paginationDotsVariants, pieChartVariants, progressVariants, promptSuggestionVariants, radarChartVariants, radialChartVariants, reasoningBlockVariants, renderActionElement, sanitizeKey, scrollButtonVariants, segmentVariants, shimmerPresets, shouldConvertPaste, sonnerToast, sourceVariants, statusIconVariants, stepConnectorVariants, stepIndicatorVariants, stepLabelVariants, stepSubtextVariants, systemMessageIconVariants, systemMessageVariants, tabsListVariants, tabsTriggerVariants, textShimmerVariants, toast, toggleVariants, toolCallVariants, tooltipVariants, tryAsciiToSvg, useAIInputContext, useAIInteraction, useAIMessageContext, useAccordionCard, useAppShell, useCalendarContext, useDataTable, useDropZone, useFieldContextOptional, useFieldControlProps, useInteractionHandler, useIsMobile, usePanelExpansion, useScrollToBottom, useSidebar, useTextStream, useTheme, useThemeOptional, validateAIToolRunSnapshot };
+import { APP_SIDEBAR_COLLAPSED_WIDTH, APP_SIDEBAR_EXPANDED_WIDTH } from "./index217.js";
+import { PanelExpansionContext, PanelIndexContext, PanelLayoutContext, useAppShell, usePanelExpansion } from "./index218.js";
+import { AppShellContent } from "./index219.js";
+import { AppShellPanel } from "./index221.js";
+import { AppShell, AppShellHeader, AppShellRoot, AppShellSidebar, appShellBackgrounds } from "./index223.js";
+import { AppShellCard } from "./index224.js";
+import { AppSidebar, chatItemVariants, navItemVariants } from "./index225.js";
+import { PageBackground } from "./index226.js";
+import { AuthAsidePanel, AuthPageLayout, renderActionElement } from "./index227.js";
+import { NavAccountMenu, NavAccountMenuAccount, NavAccountMenuContent, NavAccountMenuFooter, NavAccountMenuHeader, NavAccountMenuItem, NavAccountMenuSection, NavAccountMenuSeparator, NavAccountMenuThemeSwitch, NavAccountMenuTrigger, navAccountMenuTriggerVariants as triggerVariants } from "./index228.js";
+import { ForgotPasswordPage } from "./index230.js";
+import { LoginPage } from "./index231.js";
+import { RegisterPage } from "./index232.js";
+import { ResetPasswordPage } from "./index233.js";
+import { TwoFactorAuthenticationPage } from "./index234.js";
+import { VerifyEmail as VerifyEmailPage } from "./index235.js";
+import { formatInteractionForLLM } from "./index236.js";
+import { useInteractionHandler } from "./index237.js";
+export { AIAsciiDiagram, AIChart, AIClarificationCard, AICodeBlock, AICodeBlockContent, AICodeBlockHeader, AIComponent, AIContainerCompound as AIContainer, AIContainerContext, AIContextIndicator, AIEmptyState, AIEmptyStateActions, AIEmptyStateDescription, AIEmptyStateIcon, AIEmptyStateRoot, AIEmptyStateSuggestionGrid, AIEmptyStateTitle, AIFeedbackBar, AIFeedbackIcons, AIForm, AIInput, AIInputActionBar, AIInputActions, AIInputAttachButton, AIInputFilePreview, AIInputLeadingIcon, AIInputRoot, AIInputSendButton, AIInputTextArea, AIInteractionContext, AIInteractionProvider, AILoadingDots, AIMermaidDiagram, AIMessage, AIMessageActions, AIMessageAttachmentPreview, AIMessageAttachments, AIMessageAvatar, AIMessageBubble, AIMessageContent, AIMessageCopyButton, AIMessageHeader, AIMessageListButton, AIMessageReactions, AIMessageRoot, AIMessageThumbsDown, AIMessageThumbsUp, AIMessageTypingIndicator, AIPromptSuggestion, AIPromptSuggestionCard, AIPromptSuggestionList, AIPulseText, AIQuickActions, AIReasoningBlock, AIReasoningContent, AIReasoningTrigger, AIResponseStream, AIScrollAnchor, AIScrollButton, AISelect, AISource, AISourceContent, AISourceList, AISourceTrigger, StepIcon as AIStepIcon, AIStepItem, AISteps, AISystemMessage, AISystemMessageBanner, AITable, AITextShimmer, AIThinkingBar, AIThinkingLoader, AIToolCall, AIToolCallHeader, AIToolCallList, AIToolRun, AITypingIndicator, AITypingText, APP_SIDEBAR_COLLAPSED_WIDTH, APP_SIDEBAR_EXPANDED_WIDTH, AccordionCompound as Accordion, AccordionCardNamespace as AccordionCard, AccordionCardContent, AccordionCardEdit, AccordionCardHeader, AccordionCardTitle, AccordionCardTrigger, AccordionContent, AccordionItem, AccordionTrigger, ActionButton, ActivityFeed, ActivityFeedItem, AdvancedRating, Alert, AlertDescription, AlertDialog, Action as AlertDialogAction, Backdrop as AlertDialogBackdrop, Cancel as AlertDialogCancel, Description as AlertDialogDescription, Footer as AlertDialogFooter, Header as AlertDialogHeader, Media as AlertDialogMedia, Popup as AlertDialogPopup, Portal as AlertDialogPortal, Root as AlertDialogRoot, Title as AlertDialogTitle, Trigger as AlertDialogTrigger, Viewport as AlertDialogViewport, AlertTitle, AppShell, AppShellCard, AppShellContent, AppShellHeader, AppShellPanel, AppShellRoot, AppShellSidebar, AppSidebar, AreaChart, AuthAsidePanel, AuthPageLayout, Autocomplete, Avatar, AvatarGroup, Badge, BadgeDot, BarChart, BrandIcon, BreadcrumbCompound as Breadcrumb, BreadcrumbEllipsis, BreadcrumbHomeLink, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarActions, CalendarContent, CalendarHeader, CalendarNavigation, CalendarSearch, CalendarTitle, CalendarViewSwitcher, Card, Carousel, CarouselNav, CarouselVisual, ChartCard, ChartLegend, Checkbox, CheckboxGroup, ClearButton, CodeSnippet, Collapsible, CollapsibleContent, CollapsibleTrigger, ComboboxContent, ComboboxGroup, ComboboxHeader, ComboboxItem, ComboboxMenu, ComboboxRoot, ComboboxSeparator, ComboboxShortcut, ComboboxTrigger, CommandMenu, CommandMenuFooter, CommandMenuGroupHeader, CommandMenuItem, CommandMenuPanel, CommandShortcutBadge, CompactActionButton, ContextMenu, CheckboxItem as ContextMenuCheckboxItem, Group as ContextMenuGroup, Item as ContextMenuItem, Label as ContextMenuLabel, Popup$1 as ContextMenuPopup, Portal$1 as ContextMenuPortal, RadioGroup as ContextMenuRadioGroup, RadioItem as ContextMenuRadioItem, Root$1 as ContextMenuRoot, Separator as ContextMenuSeparator, Shortcut as ContextMenuShortcut, Sub as ContextMenuSub, SubPopup as ContextMenuSubPopup, SubTrigger as ContextMenuSubTrigger, Trigger$1 as ContextMenuTrigger, CountdownTimer, DEFAULT_CHART_COLORS, DEFAULT_DONUT_COLORS, DEFAULT_PIE_COLORS, DataTable, DataTableActionsCell, DataTableAvatarCell, DataTableBadgesCell, DataTableCell, DataTableCellRoot, DataTableProgressCell, DataTableRatingCell, DataTableSparklineCell, DataTableSwitchCell, DataTableTextCell, DataTableToolbar, DataTableTrendCell, DateFilterButton, DatePicker, DateRangeFilterButton, DateRangePicker, Dialog, Action$1 as DialogAction, Backdrop$1 as DialogBackdrop, Body as DialogBody, Cancel$1 as DialogCancel, Close as DialogClose, Description$1 as DialogDescription, Footer$1 as DialogFooter, Header$1 as DialogHeader, HeaderContent as DialogHeaderContent, Icon as DialogIcon, Popup$2 as DialogPopup, Portal$2 as DialogPortal, Root$2 as DialogRoot, Title$1 as DialogTitle, Trigger$2 as DialogTrigger, Viewport$1 as DialogViewport, DisplayValue, DonutChart, Dot, DotCircleSpinner, Drawer, Backdrop$2 as DrawerBackdrop, Close$1 as DrawerClose, Description$2 as DrawerDescription, Footer$2 as DrawerFooter, Handle as DrawerHandle, Header$2 as DrawerHeader, Popup$3 as DrawerPopup, Portal$3 as DrawerPortal, Root$3 as DrawerRoot, Title$2 as DrawerTitle, Trigger$3 as DrawerTrigger, Viewport$2 as DrawerViewport, DropdownMenu, EmptyState, EmptyStateBackgroundPattern, EmptyStateIllustration, FadeText, FeaturedIcon, FeedbackButton, Field, FieldBottom, FieldBottomRight, FieldControl, FieldDescription, FieldError, FieldLabel, FieldTop, FieldTopRight, Fieldset, FileInput, FileTypeIcon, FileUpload, FileUploadArea, FileUploadItem, FooterNavIcon, FooterNavText, ForgotPasswordPage, Form, GroupingControls, History, HistoryValue, HorizontalBarChart, HoverCardCompound as HoverCard, HoverCardPopup, HoverCardTrigger, ICONS, InlineCTA, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item$1 as Item, KIND_TO_FILE, Kbd, KbdGroup, LineChart, LineSimpleSpinner, LineSpinner, LoadingIndicator, LoginPage, MAC_KEYS, MOBILE_BREAKPOINT, MetricCard, MetricChange, MetricItem, MetricMiniChart, NavAccountMenu, NavAccountMenuAccount, NavAccountMenuContent, NavAccountMenuFooter, NavAccountMenuHeader, NavAccountMenuItem, NavAccountMenuSection, NavAccountMenuSeparator, NavAccountMenuThemeSwitch, NavAccountMenuTrigger, NotificationPanel, NotificationPanelItem, NotificationSection, NumberInput, PageBackground, PageHeader, Pagination, PaginationDots, PanelExpansionContext, PanelIndexContext, PanelLayoutContext, PieChart, PopoverCompound as Popover, PopoverDescription, PopoverHeader, PopoverPopup, PopoverRoot, PopoverTitle, PopoverTrigger, Progress, RadarChart, RadialChart, RadioGroup$1 as RadioGroup, Rating, RegisterPage, ResetPasswordPage, ResizableHandle, ResizablePanel, ResizablePanelGroup, RichTextarea, RichTextareaToolbar, SIZE_MAP, ScrollArea, ScrollBar, SectionHeader, Select, SelectCompound, SelectGroup, SelectGroupLabel, SelectItem, SelectPopup, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectTriggerIcon, SelectValue, Separator$1 as Separator, Sheet, Backdrop$3 as SheetBackdrop, Body$1 as SheetBody, Close$2 as SheetClose, Description$3 as SheetDescription, Divider as SheetDivider, Footer$3 as SheetFooter, Header$3 as SheetHeader, Popup$4 as SheetPopup, Portal$4 as SheetPortal, Root$4 as SheetRoot, Section as SheetSection, Title$3 as SheetTitle, Trigger$4 as SheetTrigger, Viewport$3 as SheetViewport, Shortcut$1 as Shortcut, SidebarCompound as Sidebar, SidebarAccountSkeleton, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarNavSkeleton, SidebarProvider, SidebarTrigger, Skeleton, Slider, SliderBase, SonnerItem, SortableHeader, SourceFavicon, SparklineChart, StatusIcon, StepsCompound as Steps, StepsItem, StepsSubtext, SubmitButton, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, TabsTriggerWithCount, Textarea, ThemeProvider, ThemeScript, ThinkingIndicator, TimePicker, ToastContent, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToolCallSection, ToolbarButton, ToolbarDivider, TooltipCompound as Tooltip, TooltipAvatar, TooltipBadge, TooltipContent, TooltipIcon, TooltipImage, TooltipPopup, TooltipProvider, TooltipRoot, TooltipSubtitle, TooltipTitle, TooltipTrigger, TwoFactorAuthenticationPage, TypewriterText, VerifyEmailPage as VerifyEmail, VerifyEmailPage, WIN_KEYS, WorkflowAddNode, WorkflowCircleNode, WorkflowComment, WorkflowConnection, WorkflowNode, WorkflowPort, activityFeedVariants, activityItemVariants, stepIconVariants as aiStepIconVariants, stepItemVariants as aiStepItemVariants, stepsContainerVariants as aiStepsContainerVariants, alertVariants, analyzePaste, appShellBackgrounds, areaChartVariants, arrowVariants, asciiDiagramVariants, asciiToSvg, badgeVariants, bannerVariants, barChartVariants, breadcrumbItemVariants, buttonVariants, chatItemVariants, cn, codeBlockVariants, codeSnippetVariants, comboboxContentVariants, comboboxTriggerVariants, contentVariants, createSelectColumn, dataTableCellVariants, dataTableHeaderCellVariants, dataTableRowVariants, dataTableVariants, defaultFooterHints, detectPasteKind, footerVariants as dialogFooterVariants, headerVariants as dialogHeaderVariants, iconVariants as dialogIconVariants, popupVariants as dialogPopupVariants, donutChartVariants, extensionColors, feedbackBarVariants, feedbackButtonVariants, fileInputSizeClasses, fileUploadAreaVariants, fileUploadItemVariants, formatInteractionForLLM, getThemeScript, historyEventCategoryConfig, historyHeaderActionConfig, horizontalBarChartVariants, indicatorVariants, inlineCTAVariants, sizeClasses as inputSizeClasses, stateClasses as inputStateClasses, inputVariants, isAsciiDiagram, itemVariants, kbdGroupVariants, kbdVariants, lineChartVariants, lineNumberVariants, loadingIndicatorVariants, loadingTextVariants, looksLikeAsciiDiagram, looksLikeSimpleAscii, mapKindToFile, messageBubbleVariants, messageVariants, metricCardVariants, metricChangeVariants, metricItemVariants, metricMiniChartVariants, triggerVariants as navAccountMenuTriggerVariants, navItemVariants, notificationDotVariants, notificationPanelVariants, pageHeaderVariants, paginationDotIndicatorVariants, paginationDotsVariants, pieChartVariants, progressVariants, promptSuggestionVariants, radarChartVariants, radialChartVariants, reasoningBlockVariants, renderActionElement, sanitizeKey, scrollButtonVariants, segmentVariants, shimmerPresets, shouldConvertPaste, sonnerToast, sourceVariants, statusIconVariants, stepConnectorVariants, stepIndicatorVariants, stepLabelVariants, stepSubtextVariants, systemMessageIconVariants, systemMessageVariants, tabsListVariants, tabsTriggerVariants, textShimmerVariants, toast, toggleVariants, toolCallVariants, tooltipVariants, tryAsciiToSvg, useAIInputContext, useAIInteraction, useAIMessageContext, useAccordionCard, useAppShell, useCalendarContext, useDataTable, useDropZone, useFieldContextOptional, useFieldControlProps, useInteractionHandler, useIsMobile, usePanelExpansion, useScrollToBottom, useSidebar, useTextStream, useTheme, useThemeOptional, validateAIToolRunSnapshot };

package/dist/index217.js

@@ -1,27 +1,9 @@
-import * as React$1 from "react";
-//#region src/components/templates/AppShell/AppShellContext.ts
-var AppShellContext = React$1.createContext(null);
-/**
-* Read AppShell layout context. Returns null when used outside AppShell.Root.
-*/
-function useAppShell() {
-	return React$1.useContext(AppShellContext);
-}
-var AppShellProvider = AppShellContext.Provider;
-/**
-* Internal context for passing the panel index from Panel to Content.
-* Content reads this to determine its position in connected mode.
-*/
-var PanelIndexContext = React$1.createContext(0);
-var PanelLayoutContext = React$1.createContext({
-	visible: true,
-	isMobile: false
-});
-var PanelExpansionContext = React$1.createContext(null);
-function usePanelExpansion() {
-	return React$1.useContext(PanelExpansionContext);
-}
+//#region src/components/templates/AppSidebar/AppSidebar.constants.ts
+/** Canonical expanded width shared by AppSidebar and AppShell.Sidebar. */
+var APP_SIDEBAR_EXPANDED_WIDTH = "280px";
+/** Canonical collapsed width shared by AppSidebar and AppShell.Sidebar. */
+var APP_SIDEBAR_COLLAPSED_WIDTH = "116px";
 //#endregion
-export { AppShellContext, AppShellProvider, PanelExpansionContext, PanelIndexContext, PanelLayoutContext, useAppShell, usePanelExpansion };
+export { APP_SIDEBAR_COLLAPSED_WIDTH, APP_SIDEBAR_EXPANDED_WIDTH };
 
 //# sourceMappingURL=index217.js.map

package/dist/index217.js.map

@@ -1 +1 @@
-{"version":3,"file":"index217.js","names":[],"sources":["../src/components/templates/AppShell/AppShellContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type PanelPosition = 'only' | 'first' | 'last';\n\nexport interface AppShellContextValue {\n  /** Whether the shell is in connected (joined-edge) mode */\n  connected: boolean;\n  /** Number of visible Panel children */\n  panelCount: number;\n  /** Get the position of a panel by its index among visible panels */\n  getPanelPosition: (index: number) => PanelPosition;\n}\n\nconst AppShellContext = React.createContext<AppShellContextValue | null>(null);\n\n/**\n * Read AppShell layout context. Returns null when used outside AppShell.Root.\n */\nfunction useAppShell(): AppShellContextValue | null {\n  return React.useContext(AppShellContext);\n}\n\nconst AppShellProvider = AppShellContext.Provider;\n\n/**\n * Internal context for passing the panel index from Panel to Content.\n * Content reads this to determine its position in connected mode.\n */\nconst PanelIndexContext = React.createContext<number>(0);\n\n/**\n * Per-panel layout state provided by Root. Replaces cloneElement style injection.\n * Panel reads this to self-manage visibility, mobile sizing, and ARIA attributes.\n */\nexport interface PanelLayoutInfo {\n  /** Whether this panel is visible (false = hidden overflow panel or non-expanded sibling) */\n  visible: boolean;\n  /** How hidden desktop panels should leave layout. Animated keeps the flex item in-flow briefly. */\n  collapseMode?: 'animated' | 'removed';\n  /** Whether we're in mobile viewport */\n  isMobile: boolean;\n  /** ARIA tab ID for tabpanel association (set when mobile tab bar is active) */\n  tabId?: string;\n  /** ARIA panel ID for tabpanel role (set when mobile tab bar is active) */\n  panelId?: string;\n  /** Whether Root owns panel sizing, such as through ResizablePanel */\n  sizeManagedByRoot?: boolean;\n  /** Root-owned expansion override */\n  expanded?: boolean;\n  /** Root-owned expansion change callback */\n  onExpandedChange?: (expanded: boolean) => void;\n}\n\nconst PanelLayoutContext = React.createContext<PanelLayoutInfo>({\n  visible: true,\n  isMobile: false,\n});\n\nexport interface PanelExpansionInfo {\n  expanded: boolean;\n  onExpandedChange?: (expanded: boolean) => void;\n}\n\nconst PanelExpansionContext = React.createContext<PanelExpansionInfo | null>(\n  null,\n);\n\nfunction usePanelExpansion(): PanelExpansionInfo | null {\n  return React.useContext(PanelExpansionContext);\n}\n\nexport {\n  AppShellContext,\n  AppShellProvider,\n  PanelExpansionContext,\n  PanelIndexContext,\n  PanelLayoutContext,\n  useAppShell,\n  usePanelExpansion,\n};\n"],"mappings":";;AAaA,IAAM,kBAAkB,QAAM,cAA2C,IAAI;;;;AAK7E,SAAS,cAA2C;CAClD,OAAO,QAAM,WAAW,eAAe;AACzC;AAEA,IAAM,mBAAmB,gBAAgB;;;;;AAMzC,IAAM,oBAAoB,QAAM,cAAsB,CAAC;AAyBvD,IAAM,qBAAqB,QAAM,cAA+B;CAC9D,SAAS;CACT,UAAU;AACZ,CAAC;AAOD,IAAM,wBAAwB,QAAM,cAClC,IACF;AAEA,SAAS,oBAA+C;CACtD,OAAO,QAAM,WAAW,qBAAqB;AAC/C"}
+{"version":3,"file":"index217.js","names":[],"sources":["../src/components/templates/AppSidebar/AppSidebar.constants.ts"],"sourcesContent":["/** Canonical expanded width shared by AppSidebar and AppShell.Sidebar. */\nexport const APP_SIDEBAR_EXPANDED_WIDTH = '280px';\n\n/** Canonical collapsed width shared by AppSidebar and AppShell.Sidebar. */\nexport const APP_SIDEBAR_COLLAPSED_WIDTH = '116px';\n"],"mappings":";;AACA,IAAa,6BAA6B;;AAG1C,IAAa,8BAA8B"}

package/dist/index218.js

@@ -1,30 +1,27 @@
-"use client";
-import { cn } from "./index2.js";
-import { PanelIndexContext, useAppShell } from "./index217.js";
 import * as React$1 from "react";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/templates/AppShell/AppShellContent.tsx
+//#region src/components/templates/AppShell/AppShellContext.ts
+var AppShellContext = React$1.createContext(null);
 /**
-* Card wrapper providing Figma-designed visual treatment for panel content.
-* Solid background, shadow-sm elevation, rounded corners, subtle border.
-*
-* In connected mode, reads AppShellContext + PanelIndexContext to adapt
-* border-radius based on panel position (first/last/only).
+* Read AppShell layout context. Returns null when used outside AppShell.Root.
 */
-function AppShellContent({ className, children, ...props }) {
-	const context = useAppShell();
-	const connected = context?.connected ?? false;
-	const panelIndex = React$1.useContext(PanelIndexContext);
-	const position = connected && context ? context.getPanelPosition(panelIndex) : null;
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "app-shell-content",
-		className: cn("flex flex-col h-full min-h-0 overflow-clip", "bg-background dark:bg-surface-1", "border border-border", "shadow-sm", !connected && "rounded-2xl", connected && position === "only" && "rounded-2xl", connected && position === "first" && ["rounded-ss-2xl rounded-es-2xl", "rounded-se-none rounded-ee-none"], connected && position === "last" && ["rounded-ss-none rounded-es-none", "rounded-se-2xl rounded-ee-2xl"], className),
-		...props,
-		children
-	});
+function useAppShell() {
+	return React$1.useContext(AppShellContext);
+}
+var AppShellProvider = AppShellContext.Provider;
+/**
+* Internal context for passing the panel index from Panel to Content.
+* Content reads this to determine its position in connected mode.
+*/
+var PanelIndexContext = React$1.createContext(0);
+var PanelLayoutContext = React$1.createContext({
+	visible: true,
+	isMobile: false
+});
+var PanelExpansionContext = React$1.createContext(null);
+function usePanelExpansion() {
+	return React$1.useContext(PanelExpansionContext);
 }
-AppShellContent.displayName = "AppShell.Content";
 //#endregion
-export { AppShellContent };
+export { AppShellContext, AppShellProvider, PanelExpansionContext, PanelIndexContext, PanelLayoutContext, useAppShell, usePanelExpansion };
 
 //# sourceMappingURL=index218.js.map

package/dist/index218.js.map

@@ -1 +1 @@
-{"version":3,"file":"index218.js","names":[],"sources":["../src/components/templates/AppShell/AppShellContent.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\nimport { PanelIndexContext, useAppShell } from './AppShellContext';\n\nexport interface AppShellContentProps extends React.ComponentProps<'div'> {}\n\n/**\n * Card wrapper providing Figma-designed visual treatment for panel content.\n * Solid background, shadow-sm elevation, rounded corners, subtle border.\n *\n * In connected mode, reads AppShellContext + PanelIndexContext to adapt\n * border-radius based on panel position (first/last/only).\n */\nfunction AppShellContent({\n  className,\n  children,\n  ...props\n}: AppShellContentProps) {\n  const context = useAppShell();\n  const connected = context?.connected ?? false;\n\n  // Read panel index from PanelIndexContext (set by Root via provider)\n  const panelIndex = React.useContext(PanelIndexContext);\n  const position =\n    connected && context ? context.getPanelPosition(panelIndex) : null;\n\n  return (\n    <div\n      data-slot=\"app-shell-content\"\n      className={cn(\n        // Core layout\n        'flex flex-col h-full min-h-0 overflow-clip',\n        // Figma card styles\n        'bg-background dark:bg-surface-1',\n        'border border-border',\n        'shadow-sm',\n        // Border radius: connected mode adapts per position\n        !connected && 'rounded-2xl',\n        connected && position === 'only' && 'rounded-2xl',\n        connected &&\n          position === 'first' && [\n            'rounded-ss-2xl rounded-es-2xl',\n            'rounded-se-none rounded-ee-none',\n          ],\n        connected &&\n          position === 'last' && [\n            'rounded-ss-none rounded-es-none',\n            'rounded-se-2xl rounded-ee-2xl',\n          ],\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nAppShellContent.displayName = 'AppShell.Content';\n\nexport { AppShellContent };\n"],"mappings":";;;;;;;;;;;;;AAeA,SAAS,gBAAgB,EACvB,WACA,UACA,GAAG,SACoB;CACvB,MAAM,UAAU,YAAY;CAC5B,MAAM,YAAY,SAAS,aAAa;CAGxC,MAAM,aAAa,QAAM,WAAW,iBAAiB;CACrD,MAAM,WACJ,aAAa,UAAU,QAAQ,iBAAiB,UAAU,IAAI;CAEhE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAET,8CAEA,mCACA,wBACA,aAEA,CAAC,aAAa,eACd,aAAa,aAAa,UAAU,eACpC,aACE,aAAa,WAAW,CACtB,iCACA,iCACF,GACF,aACE,aAAa,UAAU,CACrB,mCACA,+BACF,GACF,SACF;EACA,GAAI;EAEH;CACE,CAAA;AAET;AAEA,gBAAgB,cAAc"}
+{"version":3,"file":"index218.js","names":[],"sources":["../src/components/templates/AppShell/AppShellContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type PanelPosition = 'only' | 'first' | 'last';\n\nexport interface AppShellContextValue {\n  /** Whether the shell is in connected (joined-edge) mode */\n  connected: boolean;\n  /** Number of visible Panel children */\n  panelCount: number;\n  /** Get the position of a panel by its index among visible panels */\n  getPanelPosition: (index: number) => PanelPosition;\n}\n\nconst AppShellContext = React.createContext<AppShellContextValue | null>(null);\n\n/**\n * Read AppShell layout context. Returns null when used outside AppShell.Root.\n */\nfunction useAppShell(): AppShellContextValue | null {\n  return React.useContext(AppShellContext);\n}\n\nconst AppShellProvider = AppShellContext.Provider;\n\n/**\n * Internal context for passing the panel index from Panel to Content.\n * Content reads this to determine its position in connected mode.\n */\nconst PanelIndexContext = React.createContext<number>(0);\n\n/**\n * Per-panel layout state provided by Root. Replaces cloneElement style injection.\n * Panel reads this to self-manage visibility, mobile sizing, and ARIA attributes.\n */\nexport interface PanelLayoutInfo {\n  /** Whether this panel is visible (false = hidden overflow panel or non-expanded sibling) */\n  visible: boolean;\n  /** How hidden desktop panels should leave layout. Animated keeps the flex item in-flow briefly. */\n  collapseMode?: 'animated' | 'removed';\n  /** Whether we're in mobile viewport */\n  isMobile: boolean;\n  /** ARIA tab ID for tabpanel association (set when mobile tab bar is active) */\n  tabId?: string;\n  /** ARIA panel ID for tabpanel role (set when mobile tab bar is active) */\n  panelId?: string;\n  /** Whether Root owns panel sizing, such as through ResizablePanel */\n  sizeManagedByRoot?: boolean;\n  /** Root-owned expansion override */\n  expanded?: boolean;\n  /** Root-owned expansion change callback */\n  onExpandedChange?: (expanded: boolean) => void;\n}\n\nconst PanelLayoutContext = React.createContext<PanelLayoutInfo>({\n  visible: true,\n  isMobile: false,\n});\n\nexport interface PanelExpansionInfo {\n  expanded: boolean;\n  onExpandedChange?: (expanded: boolean) => void;\n}\n\nconst PanelExpansionContext = React.createContext<PanelExpansionInfo | null>(\n  null,\n);\n\nfunction usePanelExpansion(): PanelExpansionInfo | null {\n  return React.useContext(PanelExpansionContext);\n}\n\nexport {\n  AppShellContext,\n  AppShellProvider,\n  PanelExpansionContext,\n  PanelIndexContext,\n  PanelLayoutContext,\n  useAppShell,\n  usePanelExpansion,\n};\n"],"mappings":";;AAaA,IAAM,kBAAkB,QAAM,cAA2C,IAAI;;;;AAK7E,SAAS,cAA2C;CAClD,OAAO,QAAM,WAAW,eAAe;AACzC;AAEA,IAAM,mBAAmB,gBAAgB;;;;;AAMzC,IAAM,oBAAoB,QAAM,cAAsB,CAAC;AAyBvD,IAAM,qBAAqB,QAAM,cAA+B;CAC9D,SAAS;CACT,UAAU;AACZ,CAAC;AAOD,IAAM,wBAAwB,QAAM,cAClC,IACF;AAEA,SAAS,oBAA+C;CACtD,OAAO,QAAM,WAAW,qBAAqB;AAC/C"}

package/dist/index219.js

@@ -1,105 +1,30 @@
 "use client";
 import { cn } from "./index2.js";
-import { Menu } from "lucide-react";
+import { PanelIndexContext, useAppShell } from "./index218.js";
 import * as React$1 from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/templates/AppShell/AppShellMobileTabBar.tsx
-function getMobileTabKey(panel, fallbackLabel) {
-	return panel.key ?? panel.label ?? fallbackLabel;
-}
+import { jsx } from "react/jsx-runtime";
+//#region src/components/templates/AppShell/AppShellContent.tsx
 /**
-* Internal mobile tab bar for switching between panels on small viewports.
-* Implements the ARIA Tabs pattern with roving tabIndex and arrow key navigation.
-* Renders only when there are 2+ panels.
+* Card wrapper providing Figma-designed visual treatment for panel content.
+* Solid background, shadow-sm elevation, rounded corners, subtle border.
+*
+* In connected mode, reads AppShellContext + PanelIndexContext to adapt
+* border-radius based on panel position (first/last/only).
 */
-function AppShellMobileTabBar({ panels, activeIndex, onActiveChange, onSidebarOpen, baseId }) {
-	const tabListRef = React$1.useRef(null);
-	const handleKeyDown = React$1.useCallback((e) => {
-		let nextIndex = null;
-		switch (e.key) {
-			case "ArrowRight":
-				nextIndex = (activeIndex + 1) % panels.length;
-				break;
-			case "ArrowLeft":
-				nextIndex = (activeIndex - 1 + panels.length) % panels.length;
-				break;
-			case "Home":
-				nextIndex = 0;
-				break;
-			case "End":
-				nextIndex = panels.length - 1;
-				break;
-			default: return;
-		}
-		e.preventDefault();
-		onActiveChange(nextIndex);
-		const tabList = tabListRef.current;
-		if (tabList) tabList.querySelectorAll("[role=\"tab\"]")[nextIndex]?.focus();
-	}, [
-		activeIndex,
-		panels.length,
-		onActiveChange
-	]);
-	const [indicator, setIndicator] = React$1.useState(null);
-	React$1.useEffect(() => {
-		const tabList = tabListRef.current;
-		if (!tabList || panels.length <= 1) return;
-		const activeBtn = tabList.querySelectorAll("[role=\"tab\"]")[activeIndex];
-		if (!activeBtn) return;
-		const left = activeBtn.offsetLeft;
-		const width = activeBtn.offsetWidth;
-		setIndicator((prev) => prev && prev.left === left && prev.width === width ? prev : {
-			left,
-			width
-		});
-	}, [activeIndex, panels.length]);
-	const sidebarTrigger = onSidebarOpen ? /* @__PURE__ */ jsx("button", {
-		type: "button",
-		onClick: onSidebarOpen,
-		className: cn("flex min-h-11 min-w-11 items-center justify-center rounded-lg", "text-secondary-foreground hover:bg-accent", "active:scale-[0.95]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "transition-colors motion-reduce:transition-none"),
-		"aria-label": "Open sidebar",
-		children: /* @__PURE__ */ jsx(Menu, { className: "size-5" })
-	}) : null;
-	if (panels.length <= 1) return sidebarTrigger ? /* @__PURE__ */ jsx("div", {
-		"data-slot": "app-shell-mobile-tab-bar",
-		className: "flex h-12 shrink-0 items-center px-3",
-		children: sidebarTrigger
-	}) : null;
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "app-shell-mobile-tab-bar",
-		className: "flex h-12 shrink-0 items-center gap-1 px-3",
-		children: [sidebarTrigger, /* @__PURE__ */ jsxs("div", {
-			ref: tabListRef,
-			role: "tablist",
-			className: "relative flex gap-1",
-			onKeyDown: handleKeyDown,
-			children: [indicator && /* @__PURE__ */ jsx("div", {
-				className: cn("absolute top-1/2 -translate-y-1/2 h-9 rounded-lg bg-accent", "transition-[left,width] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)]", "motion-reduce:transition-none"),
-				style: {
-					left: indicator.left,
-					width: indicator.width
-				},
-				"aria-hidden": "true"
-			}), panels.map((panel, panelPosition) => {
-				const label = panel.label || `Panel ${panelPosition + 1}`;
-				const isActive = panelPosition === activeIndex;
-				return /* @__PURE__ */ jsx("button", {
-					id: baseId ? `${baseId}-tab-${panelPosition}` : void 0,
-					type: "button",
-					role: "tab",
-					"aria-selected": isActive,
-					"aria-controls": baseId ? `${baseId}-tabpanel-${panelPosition}` : void 0,
-					tabIndex: isActive ? 0 : -1,
-					onClick: () => onActiveChange(panelPosition),
-					className: cn("relative z-10 rounded-lg px-3 min-h-9 text-sm font-medium", "transition-colors duration-150 motion-reduce:transition-none", "active:scale-[0.97]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", isActive ? "text-foreground" : "text-secondary-foreground hover:text-foreground"),
-					children: label
-				}, getMobileTabKey(panel, label));
-			})]
-		})]
+function AppShellContent({ className, children, ...props }) {
+	const context = useAppShell();
+	const connected = context?.connected ?? false;
+	const panelIndex = React$1.useContext(PanelIndexContext);
+	const position = connected && context ? context.getPanelPosition(panelIndex) : null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "app-shell-content",
+		className: cn("flex flex-col h-full min-h-0 overflow-clip", "bg-background dark:bg-surface-1", "border border-border", "shadow-sm", !connected && "rounded-2xl", connected && position === "only" && "rounded-2xl", connected && position === "first" && ["rounded-ss-2xl rounded-es-2xl", "rounded-se-none rounded-ee-none"], connected && position === "last" && ["rounded-ss-none rounded-es-none", "rounded-se-2xl rounded-ee-2xl"], className),
+		...props,
+		children
 	});
 }
-AppShellMobileTabBar.displayName = "AppShellMobileTabBar";
+AppShellContent.displayName = "AppShell.Content";
 //#endregion
-export { AppShellMobileTabBar };
+export { AppShellContent };
 
 //# sourceMappingURL=index219.js.map

package/dist/index219.js.map

@@ -1 +1 @@
-{"version":3,"file":"index219.js","names":[],"sources":["../src/components/templates/AppShell/AppShellMobileTabBar.tsx"],"sourcesContent":["'use client';\n\nimport { Menu } from 'lucide-react';\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface MobileTabBarPanel {\n  key?: React.Key;\n  label?: string;\n}\n\nexport interface AppShellMobileTabBarProps {\n  panels: MobileTabBarPanel[];\n  activeIndex: number;\n  onActiveChange: (index: number) => void;\n  onSidebarOpen?: () => void;\n  /** Base ID for generating ARIA tab/panel IDs */\n  baseId?: string;\n}\n\nfunction getMobileTabKey(\n  panel: MobileTabBarPanel,\n  fallbackLabel: string,\n): React.Key {\n  return panel.key ?? panel.label ?? fallbackLabel;\n}\n\n/**\n * Internal mobile tab bar for switching between panels on small viewports.\n * Implements the ARIA Tabs pattern with roving tabIndex and arrow key navigation.\n * Renders only when there are 2+ panels.\n */\nfunction AppShellMobileTabBar({\n  panels,\n  activeIndex,\n  onActiveChange,\n  onSidebarOpen,\n  baseId,\n}: AppShellMobileTabBarProps) {\n  const tabListRef = React.useRef<HTMLDivElement>(null);\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      let nextIndex: number | null = null;\n\n      switch (e.key) {\n        case 'ArrowRight':\n          nextIndex = (activeIndex + 1) % panels.length;\n          break;\n        case 'ArrowLeft':\n          nextIndex = (activeIndex - 1 + panels.length) % panels.length;\n          break;\n        case 'Home':\n          nextIndex = 0;\n          break;\n        case 'End':\n          nextIndex = panels.length - 1;\n          break;\n        default:\n          return;\n      }\n\n      e.preventDefault();\n      onActiveChange(nextIndex);\n\n      // Move focus to the newly active tab\n      const tabList = tabListRef.current;\n      if (tabList) {\n        const buttons =\n          tabList.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]');\n        buttons[nextIndex]?.focus();\n      }\n    },\n    [activeIndex, panels.length, onActiveChange],\n  );\n\n  // Sliding pill indicator — measure active tab position\n  const [indicator, setIndicator] = React.useState<{\n    left: number;\n    width: number;\n  } | null>(null);\n\n  React.useEffect(() => {\n    const tabList = tabListRef.current;\n    if (!tabList || panels.length <= 1) return;\n    const buttons = tabList.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]');\n    const activeBtn = buttons[activeIndex];\n    if (!activeBtn) return;\n    const left = activeBtn.offsetLeft;\n    const width = activeBtn.offsetWidth;\n    setIndicator((prev) =>\n      prev && prev.left === left && prev.width === width\n        ? prev\n        : { left, width },\n    );\n  }, [activeIndex, panels.length]);\n\n  const sidebarTrigger = onSidebarOpen ? (\n    <button\n      type=\"button\"\n      onClick={onSidebarOpen}\n      className={cn(\n        'flex min-h-11 min-w-11 items-center justify-center rounded-lg',\n        'text-secondary-foreground hover:bg-accent',\n        'active:scale-[0.95]',\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n        'transition-colors motion-reduce:transition-none',\n      )}\n      aria-label=\"Open sidebar\"\n    >\n      <Menu className=\"size-5\" />\n    </button>\n  ) : null;\n\n  if (panels.length <= 1) {\n    return sidebarTrigger ? (\n      <div\n        data-slot=\"app-shell-mobile-tab-bar\"\n        className=\"flex h-12 shrink-0 items-center px-3\"\n      >\n        {sidebarTrigger}\n      </div>\n    ) : null;\n  }\n\n  return (\n    <div\n      data-slot=\"app-shell-mobile-tab-bar\"\n      className=\"flex h-12 shrink-0 items-center gap-1 px-3\"\n    >\n      {sidebarTrigger}\n      <div\n        ref={tabListRef}\n        role=\"tablist\"\n        className=\"relative flex gap-1\"\n        onKeyDown={handleKeyDown}\n      >\n        {/* Sliding pill indicator */}\n        {indicator && (\n          <div\n            className={cn(\n              'absolute top-1/2 -translate-y-1/2 h-9 rounded-lg bg-accent',\n              'transition-[left,width] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)]',\n              'motion-reduce:transition-none',\n            )}\n            style={{ left: indicator.left, width: indicator.width }}\n            aria-hidden=\"true\"\n          />\n        )}\n        {panels.map((panel, panelPosition) => {\n          const label = panel.label || `Panel ${panelPosition + 1}`;\n          const isActive = panelPosition === activeIndex;\n          const tabId = baseId ? `${baseId}-tab-${panelPosition}` : undefined;\n          const panelId = baseId\n            ? `${baseId}-tabpanel-${panelPosition}`\n            : undefined;\n          return (\n            <button\n              key={getMobileTabKey(panel, label)}\n              id={tabId}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={isActive}\n              aria-controls={panelId}\n              tabIndex={isActive ? 0 : -1}\n              onClick={() => onActiveChange(panelPosition)}\n              className={cn(\n                'relative z-10 rounded-lg px-3 min-h-9 text-sm font-medium',\n                'transition-colors duration-150 motion-reduce:transition-none',\n                'active:scale-[0.97]',\n                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n                isActive\n                  ? 'text-foreground'\n                  : 'text-secondary-foreground hover:text-foreground',\n              )}\n            >\n              {label}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nAppShellMobileTabBar.displayName = 'AppShellMobileTabBar';\n\nexport { AppShellMobileTabBar };\n"],"mappings":";;;;;;AAoBA,SAAS,gBACP,OACA,eACW;CACX,OAAO,MAAM,OAAO,MAAM,SAAS;AACrC;;;;;;AAOA,SAAS,qBAAqB,EAC5B,QACA,aACA,gBACA,eACA,UAC4B;CAC5B,MAAM,aAAa,QAAM,OAAuB,IAAI;CAEpD,MAAM,gBAAgB,QAAM,aACzB,MAA2B;EAC1B,IAAI,YAA2B;EAE/B,QAAQ,EAAE,KAAV;GACE,KAAK;IACH,aAAa,cAAc,KAAK,OAAO;IACvC;GACF,KAAK;IACH,aAAa,cAAc,IAAI,OAAO,UAAU,OAAO;IACvD;GACF,KAAK;IACH,YAAY;IACZ;GACF,KAAK;IACH,YAAY,OAAO,SAAS;IAC5B;GACF,SACE;EACJ;EAEA,EAAE,eAAe;EACjB,eAAe,SAAS;EAGxB,MAAM,UAAU,WAAW;EAC3B,IAAI,SAGF,QADU,iBAAoC,gBAC9C,CAAA,CAAQ,UAAU,EAAE,MAAM;CAE9B,GACA;EAAC;EAAa,OAAO;EAAQ;CAAc,CAC7C;CAGA,MAAM,CAAC,WAAW,gBAAgB,QAAM,SAG9B,IAAI;CAEd,QAAM,gBAAgB;EACpB,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,WAAW,OAAO,UAAU,GAAG;EAEpC,MAAM,YADU,QAAQ,iBAAoC,gBAC1C,CAAA,CAAQ;EAC1B,IAAI,CAAC,WAAW;EAChB,MAAM,OAAO,UAAU;EACvB,MAAM,QAAQ,UAAU;EACxB,cAAc,SACZ,QAAQ,KAAK,SAAS,QAAQ,KAAK,UAAU,QACzC,OACA;GAAE;GAAM;EAAM,CACpB;CACF,GAAG,CAAC,aAAa,OAAO,MAAM,CAAC;CAE/B,MAAM,iBAAiB,gBACrB,oBAAC,UAAD;EACE,MAAK;EACL,SAAS;EACT,WAAW,GACT,iEACA,6CACA,uBACA,2EACA,iDACF;EACA,cAAW;YAEX,oBAAC,MAAD,EAAM,WAAU,SAAU,CAAA;CACpB,CAAA,IACN;CAEJ,IAAI,OAAO,UAAU,GACnB,OAAO,iBACL,oBAAC,OAAD;EACE,aAAU;EACV,WAAU;YAET;CACE,CAAA,IACH;CAGN,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAU;YAFZ,CAIG,gBACD,qBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,WAAU;GACV,WAAW;aAJb,CAOG,aACC,oBAAC,OAAD;IACE,WAAW,GACT,8DACA,0EACA,+BACF;IACA,OAAO;KAAE,MAAM,UAAU;KAAM,OAAO,UAAU;IAAM;IACtD,eAAY;GACb,CAAA,GAEF,OAAO,KAAK,OAAO,kBAAkB;IACpC,MAAM,QAAQ,MAAM,SAAS,SAAS,gBAAgB;IACtD,MAAM,WAAW,kBAAkB;IAKnC,OACE,oBAAC,UAAD;KAEE,IAPU,SAAS,GAAG,OAAO,OAAO,kBAAkB,KAAA;KAQtD,MAAK;KACL,MAAK;KACL,iBAAe;KACf,iBAVY,SACZ,GAAG,OAAO,YAAY,kBACtB,KAAA;KASA,UAAU,WAAW,IAAI;KACzB,eAAe,eAAe,aAAa;KAC3C,WAAW,GACT,6DACA,gEACA,uBACA,2EACA,WACI,oBACA,iDACN;eAEC;IACK,GAnBD,gBAAgB,OAAO,KAAK,CAmB3B;GAEZ,CAAC,CACE;IACF;;AAET;AAEA,qBAAqB,cAAc"}
+{"version":3,"file":"index219.js","names":[],"sources":["../src/components/templates/AppShell/AppShellContent.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\nimport { PanelIndexContext, useAppShell } from './AppShellContext';\n\nexport interface AppShellContentProps extends React.ComponentProps<'div'> {}\n\n/**\n * Card wrapper providing Figma-designed visual treatment for panel content.\n * Solid background, shadow-sm elevation, rounded corners, subtle border.\n *\n * In connected mode, reads AppShellContext + PanelIndexContext to adapt\n * border-radius based on panel position (first/last/only).\n */\nfunction AppShellContent({\n  className,\n  children,\n  ...props\n}: AppShellContentProps) {\n  const context = useAppShell();\n  const connected = context?.connected ?? false;\n\n  // Read panel index from PanelIndexContext (set by Root via provider)\n  const panelIndex = React.useContext(PanelIndexContext);\n  const position =\n    connected && context ? context.getPanelPosition(panelIndex) : null;\n\n  return (\n    <div\n      data-slot=\"app-shell-content\"\n      className={cn(\n        // Core layout\n        'flex flex-col h-full min-h-0 overflow-clip',\n        // Figma card styles\n        'bg-background dark:bg-surface-1',\n        'border border-border',\n        'shadow-sm',\n        // Border radius: connected mode adapts per position\n        !connected && 'rounded-2xl',\n        connected && position === 'only' && 'rounded-2xl',\n        connected &&\n          position === 'first' && [\n            'rounded-ss-2xl rounded-es-2xl',\n            'rounded-se-none rounded-ee-none',\n          ],\n        connected &&\n          position === 'last' && [\n            'rounded-ss-none rounded-es-none',\n            'rounded-se-2xl rounded-ee-2xl',\n          ],\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nAppShellContent.displayName = 'AppShell.Content';\n\nexport { AppShellContent };\n"],"mappings":";;;;;;;;;;;;;AAeA,SAAS,gBAAgB,EACvB,WACA,UACA,GAAG,SACoB;CACvB,MAAM,UAAU,YAAY;CAC5B,MAAM,YAAY,SAAS,aAAa;CAGxC,MAAM,aAAa,QAAM,WAAW,iBAAiB;CACrD,MAAM,WACJ,aAAa,UAAU,QAAQ,iBAAiB,UAAU,IAAI;CAEhE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAET,8CAEA,mCACA,wBACA,aAEA,CAAC,aAAa,eACd,aAAa,aAAa,UAAU,eACpC,aACE,aAAa,WAAW,CACtB,iCACA,iCACF,GACF,aACE,aAAa,UAAU,CACrB,mCACA,+BACF,GACF,SACF;EACA,GAAI;EAEH;CACE,CAAA;AAET;AAEA,gBAAgB,cAAc"}