@mondrianai/runyourai-design-system 0.0.1 → 0.0.3

package/dist/index.d.mts

@@ -5,6 +5,8 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import * as _radix_ui_react_context from '@radix-ui/react-context';
+import { PaginationState, OnChangeFn, RowSelectionState } from '@tanstack/react-table';
+export { OnChangeFn, PaginationState, RowSelectionState, SortingState } from '@tanstack/react-table';
 
 declare const Accordion: React$1.ForwardRefExoticComponent<(Accordion$1.AccordionSingleProps | Accordion$1.AccordionMultipleProps) & React$1.RefAttributes<HTMLDivElement>>;
 declare const AccordionItem: React$1.ForwardRefExoticComponent<Omit<Accordion$1.AccordionItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
@@ -41,14 +43,11 @@ interface AvatarProps {
     src?: string;
     /** 이미지 alt 텍스트 */
     alt?: string;
+    /** 이미지 fallback으로 이니셜 표시. 미제공 시 User 아이콘 표시 */
+    username?: string;
     /**
-     * 이미지 없거나 로드 실패 시 표시할 이니셜 텍스트.
-     * square 아바타에서는 항상 표시.
-     */
-    fallback?: string;
-    /**
-     * circle (기본) — 원형, 사진 아바타
-     * square          — 모서리 둥근 사각형, 이니셜 아바타 (bg-gray-500 + 흰 글자)
+     * circle(기본): 원형, 사진 아바타
+     * square: 모서리 둥근 사각형, 이니셜 아바타 (bg-gray-500 + 흰 글자)
      */
     shape?: 'circle' | 'square';
     /** sm (24px) | md (32px, 기본) | lg (40px) */
@@ -58,16 +57,16 @@ interface AvatarProps {
 interface AvatarGroupItem {
     /** 고유 식별자 (key prop으로 사용) */
     id: string;
+    username?: string;
     src?: string;
     alt?: string;
-    fallback?: string;
 }
 interface AvatarGroupProps {
     avatars: AvatarGroupItem[];
     size?: AvatarSize;
     className?: string;
 }
-declare function Avatar({ src, alt, fallback, shape, size, className, }: AvatarProps): react_jsx_runtime.JSX.Element;
+declare function Avatar({ src, alt, username, shape, size, className, }: AvatarProps): react_jsx_runtime.JSX.Element;
 declare function AvatarGroup({ avatars, size, className }: AvatarGroupProps): react_jsx_runtime.JSX.Element;
 
 /**
@@ -96,14 +95,19 @@ interface BadgeProps {
 declare const BADGE_VARIANT_STYLES: Record<BadgeVariant, string>;
 declare function Badge({ text, variant, spin, iconName, className, }: BadgeProps): react_jsx_runtime.JSX.Element;
 
-declare function Breadcrumb({ className, ...props }: React__default.ComponentPropsWithoutRef<"nav">): react_jsx_runtime.JSX.Element;
-declare function BreadcrumbList({ className, ...props }: React__default.ComponentPropsWithoutRef<"ol">): react_jsx_runtime.JSX.Element;
-declare function BreadcrumbItem({ className, ...props }: React__default.ComponentPropsWithoutRef<"li">): react_jsx_runtime.JSX.Element;
-declare function BreadcrumbLink({ className, ...props }: React__default.ComponentPropsWithoutRef<"a">): react_jsx_runtime.JSX.Element;
-declare function BreadcrumbPage({ className, ...props }: React__default.ComponentPropsWithoutRef<"span">): react_jsx_runtime.JSX.Element;
-declare function BreadcrumbSeparator({ children, className, ...props }: React__default.ComponentPropsWithoutRef<"li">): react_jsx_runtime.JSX.Element;
-declare function BreadcrumbEllipsis({ className, ...props }: React__default.ComponentPropsWithoutRef<"span">): react_jsx_runtime.JSX.Element;
-declare function BreadcrumbDropdownItem({ children, className, ...props }: React__default.ComponentPropsWithoutRef<"button">): react_jsx_runtime.JSX.Element;
+interface BreadcrumbProps extends React__default.ComponentPropsWithoutRef<'nav'> {
+    items: {
+        label: string;
+        href?: string;
+    }[];
+    separator?: BreadcrumbSeparator;
+    collapse?: 'dropdown' | 'ellipsis';
+}
+declare function Breadcrumb({ items, separator, collapse, className, }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
+type BreadcrumbSeparator = 'slash' | 'chevron-right';
+declare function BreadcrumbSeparator({ iconName, className, ...props }: React__default.ComponentPropsWithoutRef<'li'> & {
+    iconName: 'slash' | 'chevron-right';
+}): react_jsx_runtime.JSX.Element;
 
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
@@ -156,6 +160,16 @@ interface CardProps {
 }
 declare function Card({ machineType, availability, machineName, machineInitial, tags, specs, onSelect, selectLabel, className, }: CardProps): react_jsx_runtime.JSX.Element;
 
+interface DataSectionProps {
+    /** 섹션 제목 */
+    title?: string;
+    children: React$1.ReactNode;
+    left?: React$1.ReactNode;
+    right?: React$1.ReactNode;
+    className?: string;
+}
+declare function DataSection({ title, left, right, className, children, }: DataSectionProps): react_jsx_runtime.JSX.Element;
+
 interface CheckboxProps extends React$1.ComponentPropsWithoutRef<typeof Checkbox$1.Root> {
     /** Optional label rendered to the right of the checkbox */
     label?: string;
@@ -356,7 +370,7 @@ interface UserMenuSection {
     label?: string;
     items: UserMenuSectionItem[];
 }
-interface NotificationItem$1 {
+interface NotificationItem {
     id: string;
     badge?: string;
     date?: string;
@@ -378,7 +392,7 @@ interface HeaderProps {
     onUpgrade?: () => void;
     userEmail?: string;
     userMenuSections?: UserMenuSection[];
-    notifications?: NotificationItem$1[];
+    notifications?: NotificationItem[];
     onViewAllNotifications?: () => void;
     hasNotification?: boolean;
     languages?: LanguageItem[];
@@ -404,6 +418,21 @@ interface IconProps extends React$1.SVGProps<SVGSVGElement> {
  */
 declare function Icon({ name, className, strokeWidth, ...props }: IconProps): react_jsx_runtime.JSX.Element | null;
 
+interface KbCardProps {
+    name: string;
+    size: string;
+    updatedAt: string;
+    connectedAgents: number | null;
+    icon?: React$1.ReactNode;
+    selectable?: boolean;
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    /** 카드 클릭 핸들러. selectable(편집 모드)일 때는 동작하지 않음. */
+    onClick?: () => void;
+    className?: string;
+}
+declare function KbCard({ name, size, updatedAt, connectedAgents, icon, selectable, checked, onCheckedChange, onClick, className, }: KbCardProps): react_jsx_runtime.JSX.Element;
+
 declare function MarkdownMessage({ content, isStreaming, footerMeta, className, }: {
     content: string;
     isStreaming?: boolean;
@@ -415,6 +444,51 @@ declare function MarkdownMessage({ content, isStreaming, footerMeta, className,
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 
+interface ModalProps {
+    id?: string;
+    /**
+     * 모달을 여는 트리거 — render prop 패턴.
+     * open 함수를 인자로 받아 원하는 요소에 직접 연결.
+     * ex) trigger={(open) => <Button onClick={open}>열기</Button>}
+     */
+    trigger?: (open: () => void) => React$1.ReactNode;
+    /**
+     * footer 버튼 렌더 방식
+     * confirm  — 취소 + default(검정) 확인 버튼
+     * danger   — 취소 + destructive(빨강) 확인 버튼
+     * dialog   — footer 없음 (children으로 모든 콘텐츠 처리)
+     */
+    variant?: 'confirm' | 'danger' | 'dialog';
+    /** 모달 제목 */
+    title: string;
+    /** 제목 아래 부제목 (선택) */
+    description?: string;
+    /** 우상단 X 닫기 버튼 표시 여부 */
+    showCloseButton?: boolean;
+    /** 모달 본문 */
+    children?: React$1.ReactNode;
+    /** 취소 버튼 레이블 (기본: "취소") */
+    cancelLabel?: string;
+    /** 확인 버튼 레이블 (기본: "확인") */
+    confirmLabel?: string;
+    /**
+     * 확인 버튼 콜백.
+     * Promise를 반환하면 resolve될 때까지 loading 상태를 내부에서 자동 처리하고
+     * 완료 후 모달을 닫음.
+     */
+    onConfirm?: () => void | Promise<void>;
+    /** 취소/닫기 시 콜백 (cancel 버튼, X 버튼, ESC, 오버레이 클릭) */
+    onCancel?: () => void;
+    /** 확인 버튼 비활성화 */
+    confirmDisabled?: boolean;
+    isLoading?: boolean;
+    /** 오버레이 클릭 시 닫기 (기본: true) */
+    closeOnOverlayClick?: boolean;
+    /** 모달 패널에 추가할 className */
+    className?: string;
+}
+declare function Modal({ id, trigger, variant, title, description, showCloseButton, children, cancelLabel, confirmLabel, onConfirm, onCancel, confirmDisabled, closeOnOverlayClick, className, isLoading, }: ModalProps): react_jsx_runtime.JSX.Element;
+
 declare const Menubar: React$1.ForwardRefExoticComponent<Omit<Menubar$1.MenubarProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const MenubarMenu: {
     (props: Menubar$1.MenubarMenuProps & {
@@ -467,6 +541,14 @@ interface SegmentedControlProps<T extends string> {
 }
 declare function SegmentedControl<T extends string>({ value, onChange, items, }: SegmentedControlProps<T>): react_jsx_runtime.JSX.Element;
 
+interface SearchInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type'> {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+}
+declare function SearchInput({ value, onChange, placeholder, className, ...props }: SearchInputProps): react_jsx_runtime.JSX.Element;
+
 interface SelectOption {
     /** Unique identifier for the option */
     value: string;
@@ -512,81 +594,66 @@ interface SheetProps {
 declare function Sheet({ open, onClose, title, description, children, footer }: SheetProps): react_jsx_runtime.JSX.Element;
 
 /**
- * 링크 렌더링 함수. next/link, react-router <Link> 등 소비 측 라우터에 맞게 주입한다.
- * 미지정 시 기본 <a> 태그로 렌더링된다.
+ * 링크 컴포넌트 타입. next/link의 Link, react-router의 Link 등을 그대로 전달할 수 있습니다.
+ * 미지정 시 기본 <a> 태그로 렌더링됩니다.
  */
-type RenderLinkFn = (props: {
+type SidebarLinkComponent = React$1.ComponentType<{
     href: string;
+    children: React$1.ReactNode;
     className?: string;
     style?: React$1.CSSProperties;
     onClick?: () => void;
-    children: React$1.ReactNode;
-}) => React$1.ReactNode;
-type SidebarNavItem = {
+}>;
+type SidebarSubMenuItem = {
+    id: string;
+    title: string;
     href: string;
-    label: string;
     icon: React$1.ReactNode;
-    isActive: boolean;
+    isActive?: boolean;
+    titleBadge?: string | number;
     onClick?: () => void;
-    /** true이면 이 항목 앞에 구분선을 렌더링합니다. */
-    dividerBefore?: boolean;
 };
-type SidebarTaskMenuItem = {
-    label: string;
-    icon?: React$1.ReactNode;
-    onSelect?: () => void;
-    variant?: 'default' | 'destructive';
-    /** true이면 이 항목 앞에 구분선(간격)을 렌더링합니다. */
-    separatorBefore?: boolean;
-};
-type SidebarTask = {
+type SidebarMainMenuItem = {
     id: string;
     title: string;
-    /** 클릭 시 이동할 경로. renderLink 또는 기본 <a>로 렌더링됩니다. */
     href: string;
-    icon?: React$1.ReactNode;
-    favorited?: boolean;
-};
-type SidebarUtilityLink = {
-    label: string;
     icon: React$1.ReactNode;
-    /** 외부 링크 URL. 없으면 button으로 렌더링됩니다. */
-    href?: string;
+    isActive?: boolean;
     onClick?: () => void;
+    onHover?: (e: React$1.MouseEvent<HTMLElement>) => void;
+    subMenus?: SidebarSubMenuItem[];
 };
-/** 하드코딩된 한국어 문자열을 외부에서 교체할 수 있는 레이블 모음 */
-type SidebarLabels = {
-    taskSectionTitle?: string;
-    taskSectionHide?: string;
-    taskSectionShow?: string;
-    taskEmptyMessage?: string;
-};
-interface NotificationItem {
+type SidebarUtilityItem = {
     id: string;
-    badge?: string;
-    date?: string;
-    title: string;
-    description: string;
-}
-declare function Sidebar({ className, logo, navRailItems, sectionTitle, navItems, tasks, activeTaskId, showTaskSection, hasNotification, notifications, onViewAllNotifications, utilityLinks, username, onRenameTask, onToggleFavorite, onDeleteTask, labels, renderLink, }: {
+    /**
+     * popover가 지정된 경우 icon·label·href·onClick은 무시됩니다.
+     * Sidebar는 단순 렌더링만 수행합니다.
+     */
+    popover?: React$1.ReactNode;
+    icon?: React$1.ReactNode;
+    label?: string;
+    href?: string;
+    onClick?: (e: React$1.MouseEvent<HTMLElement>) => void;
+    onHover?: (e: React$1.MouseEvent<HTMLElement>) => void;
+    notiBadge?: boolean | number;
+};
+declare function SidebarLink({ href, className, style, onClick, children, }: {
+    href: string;
     className?: string;
-    logo?: React$1.ReactNode;
-    navRailItems?: SidebarNavItem[];
-    sectionTitle?: string;
-    navItems: SidebarNavItem[];
-    tasks: SidebarTask[];
-    activeTaskId: string | null;
-    showTaskSection?: boolean;
-    hasNotification?: boolean;
-    notifications?: NotificationItem[];
-    onViewAllNotifications?: () => void;
-    utilityLinks?: SidebarUtilityLink[];
-    username?: string;
-    onRenameTask?: (id: string, newTitle: string) => void;
-    onToggleFavorite?: (id: string) => void;
-    onDeleteTask?: (id: string) => void;
-    labels?: SidebarLabels;
-    renderLink?: RenderLinkFn;
+    style?: React$1.CSSProperties;
+    onClick?: () => void;
+    children: React$1.ReactNode;
+}): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+declare function Sidebar({ logo, menus, avatar, utilities, panelTopContent, panelCenterContent, panelBottomContent, className, LinkComponent, }: {
+    logo: React$1.ReactNode;
+    menus: SidebarMainMenuItem[];
+    avatar: React$1.ReactNode;
+    utilities?: SidebarUtilityItem[];
+    panelTopContent?: React$1.ReactNode;
+    panelCenterContent?: React$1.ReactNode;
+    panelBottomContent?: React$1.ReactNode;
+    className?: string;
+    LinkComponent: SidebarLinkComponent;
 }): react_jsx_runtime.JSX.Element;
 
 declare const Slider: React$1.ForwardRefExoticComponent<Omit<Slider$1.SliderProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
@@ -617,6 +684,94 @@ interface SwitchFieldProps extends React__default.ComponentPropsWithoutRef<typeo
 }
 declare function SwitchField({ label, description, className, id, ...props }: SwitchFieldProps): react_jsx_runtime.JSX.Element;
 
+type SortDirection = 'asc' | 'desc' | null;
+interface TableColumn<T> {
+    key: string;
+    header: string;
+    sortable?: boolean;
+    /** 정렬 기준값 추출. sortable=true 시 필수 */
+    sortValue?: (row: T) => string | number;
+    /** 헤더·셀 text-align. 기본값 "left" */
+    align?: 'left' | 'center' | 'right';
+    cellClassName?: string;
+    headerClassName?: string;
+    /**
+     * true이면 셀 내용을 한 줄로 잘라내고 hover 시 tooltip으로 전체 내용을 표시.
+     * tooltip에 표시할 텍스트를 별도로 지정하려면 ellipsisTooltip을 함께 사용.
+     */
+    ellipsis?: boolean;
+    /** ellipsis=true 일 때 tooltip에 표시할 내용. 미제공 시 cell 렌더 결과를 그대로 사용. */
+    ellipsisTooltip?: (row: T) => React$1.ReactNode;
+    cell: (row: T) => React$1.ReactNode;
+}
+/**
+ * TanStack Table의 pagination 옵션을 그대로 노출.
+ * 상세 동작은 TanStack Table 공식 문서 참고:
+ * https://tanstack.com/table/latest/docs/api/features/pagination
+ */
+interface TablePaginationConfig extends Partial<Pick<PaginationState, 'pageSize' | 'pageIndex'>> {
+    onPaginationChange?: OnChangeFn<PaginationState>;
+    /** 서버사이드 페이지네이션 시 true로 설정 */
+    manualPagination?: boolean;
+    /** manualPagination=true 일 때 전체 페이지 수 */
+    pageCount?: number;
+    /** manualPagination=true 일 때 전체 행 수 (pageCount 대신 사용 가능) */
+    rowCount?: number;
+}
+interface TableSortingItem {
+    /** TableColumn.key 와 일치해야 함 */
+    key: TableColumn<never>['key'];
+    desc?: boolean;
+}
+interface TableProps<T> {
+    columns: TableColumn<T>[];
+    data: T[];
+    /**
+     * 각 행의 고유 키.
+     * - keyof T (예: "id") — T[key]를 string으로 변환해 사용
+     * - (row: T) => string — 함수로 직접 계산
+     */
+    rowKey: keyof T | ((row: T) => string);
+    /**
+     * 페이지네이션 설정. 미전달 시 페이지네이션 비활성화.
+     * TanStack Table pagination 옵션을 그대로 수용.
+     */
+    pagination?: TablePaginationConfig;
+    /**
+     * 초기 정렬 상태. 복수 컬럼 정렬 지원.
+     * 각 항목의 key는 TableColumn.key 와 일치해야 함.
+     */
+    defaultSorting?: TableSortingItem[];
+    /** 데이터 로딩 중 상태. true이면 tbody 대신 스피너를 표시 */
+    loading?: boolean;
+    /** true이면 각 행 앞에 체크박스가 추가되어 row multi-select 활성화 */
+    enableRowSelection?: boolean;
+    /** 외부에서 selection 상태를 제어할 때 사용 (controlled) */
+    rowSelection?: RowSelectionState;
+    /** selection 상태 변경 콜백 */
+    onRowSelectionChange?: OnChangeFn<RowSelectionState>;
+    /**
+     * 각 행 오른쪽 끝에 렌더링할 액션 영역.
+     * row 데이터를 받아 ReactNode를 반환하는 함수.
+     * 예: hover 시 나타나는 삭제·편집 버튼 등.
+     */
+    rowActions?: (row: T) => React$1.ReactNode;
+    /** 행 클릭 핸들러. enableRowSelection=true(편집 모드)일 때는 동작하지 않음. */
+    onRowClick?: (row: T) => void;
+    className?: string;
+}
+declare function SortIcon({ direction }: {
+    direction: SortDirection;
+}): react_jsx_runtime.JSX.Element;
+interface TablePaginationProps {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    className?: string;
+}
+declare function TablePagination({ currentPage, totalPages, onPageChange, className, }: TablePaginationProps): react_jsx_runtime.JSX.Element;
+declare function Table<T>({ columns, data, rowKey, pagination, defaultSorting, loading, enableRowSelection, rowSelection: rowSelectionProp, onRowSelectionChange, rowActions, onRowClick, className, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+
 declare const TooltipProvider: React$1.FC<Tooltip$1.TooltipProviderProps>;
 interface TooltipProps extends Pick<React$1.ComponentPropsWithoutRef<typeof Tooltip$1.Root>, 'open' | 'defaultOpen' | 'onOpenChange' | 'delayDuration'>, Omit<React$1.ComponentPropsWithoutRef<typeof Tooltip$1.Content>, 'children' | 'content'> {
     /** 툴팁 말풍선에 표시할 내용 */
@@ -738,6 +893,15 @@ declare function BoldIcon({ className }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 
+/**
+ * Book-open icon — SVG downloaded directly from Figma design system.
+ * Uses stroke="currentColor" for CSS color control.
+ * Source: Figma node 616-3399, stroke-width: 1.25
+ */
+declare function BookOpenIcon({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
 interface BookUpIconProps {
     className?: string;
 }
@@ -766,6 +930,15 @@ declare function CircleCheckFillIcon({ className }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 
+/**
+ * Circle-help icon — SVG downloaded directly from Figma design system.
+ * Uses stroke="currentColor" for CSS color control.
+ * Source: Figma node 616-3399, stroke-width: 1.25
+ */
+declare function CircleHelpIcon({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
 /**
  * Circle-outline icon — stroke-only circle.
  * SVG downloaded from Figma design system.
@@ -790,6 +963,15 @@ declare function CodeSquareIcon({ className }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 
+/**
+ * Credit icon — SVG downloaded directly from Figma design system.
+ * Uses stroke="currentColor" for CSS color control.
+ * Source: Figma node 616-3399, stroke-width: 1.25
+ */
+declare function CreditIcon({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
 declare function DownloadIcon({ className }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;
@@ -819,6 +1001,15 @@ declare function FolderAmberIcon({ className }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 
+/**
+ * Folder-closed icon — SVG downloaded directly from Figma design system.
+ * Uses stroke="currentColor" for CSS color control.
+ * Source: Figma node 616-3399, stroke-width: 1.02
+ */
+declare function FolderClosedIcon({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
 /**
  * Heading icon — SVG downloaded from Figma design system.
  * Source: Figma node (lucide/heading)
@@ -855,6 +1046,15 @@ declare function ItalicIcon({ className }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 
+/**
+ * Key-round icon — SVG downloaded directly from Figma design system.
+ * Uses stroke="currentColor" for CSS color control.
+ * Source: Figma node 616-3399, stroke-width: 1.02
+ */
+declare function KeyRoundIcon({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
 declare function LayersIcon({ className }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;
@@ -900,6 +1100,24 @@ declare function ListOrderedIcon({ className }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 
+/**
+ * Message-circle icon — SVG downloaded directly from Figma design system.
+ * Uses stroke="currentColor" for CSS color control.
+ * Source: Figma node 616-3399, stroke-width: 1.25
+ */
+declare function MessageCircleIcon({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * Messages-square icon — SVG downloaded directly from Figma design system.
+ * Uses stroke="currentColor" for CSS color control.
+ * Source: Figma node 616-3399, stroke-width: 1.25
+ */
+declare function MessagesSquareIcon({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
 declare function MyPageIcon({ className }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;
@@ -912,6 +1130,15 @@ declare function OutdentIcon({ className }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 
+/**
+ * Panel-left icon — SVG downloaded directly from Figma design system.
+ * Uses stroke="currentColor" for CSS color control.
+ * Source: Figma node 616-3399, stroke-width: 1.25
+ */
+declare function PanelLeftIcon({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
 interface PenLineIconProps {
     className?: string;
 }
@@ -934,6 +1161,14 @@ declare function PresentationIcon({ className }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 
+/**
+ * Shopping Bag icon — SVG from public/icons/shopping-bag.svg
+ * Uses stroke="currentColor" for CSS color control.
+ */
+declare function ShoppingBagIcon({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
 /**
  * Smile icon — SVG downloaded from Figma design system.
  * Source: public/icons/smile.svg
@@ -1007,30 +1242,4 @@ declare function WandSparklesIcon({ className }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 
-/**
- * Message-circle icon — SVG downloaded directly from Figma design system.
- * Uses stroke="currentColor" for CSS color control.
- * Source: Figma node 616-3399, stroke-width: 1.25
- */
-declare function MessageCircleIcon({ className }: {
-    className?: string;
-}): react_jsx_runtime.JSX.Element;
-
-/**
- * Messages-square icon — SVG downloaded directly from Figma design system.
- * Uses stroke="currentColor" for CSS color control.
- * Source: Figma node 616-3399, stroke-width: 1.25
- */
-declare function MessagesSquareIcon({ className }: {
-    className?: string;
-}): react_jsx_runtime.JSX.Element;
-
-/**
- * Shopping Bag icon — SVG from public/icons/shopping-bag.svg
- * Uses stroke="currentColor" for CSS color control.
- */
-declare function ShoppingBagIcon({ className }: {
-    className?: string;
-}): react_jsx_runtime.JSX.Element;
-
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AiAgentIcon, AiBuilderIcon, AiCloudIcon, AiDatacenterIcon, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AlignJustifyIcon, AlignLeftIcon, ArrowDownIcon, type AvailabilityStatus, Avatar, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarProps, BADGE_VARIANT_STYLES, Badge, type BadgeProps, type BadgeVariant, BlockquoteIcon, BoldIcon, BookUpIcon, Breadcrumb, BreadcrumbDropdownItem, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Card, type CardProps, type CardSpec, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxProps, ChevronsUpDownIcon, ChoiceCardGroup, type ChoiceCardGroupProps, ChoiceCardItem, type ChoiceCardItemProps, CircleCheckFillIcon, CircleOutlineIcon, ClaudeIcon, CodeIcon, CodeSquareIcon, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleRoot, CollapsibleTrigger, type CollapsibleWorkspace, Combobox, type ComboboxOption, type ComboboxProps, DeepSeekIcon, DownloadIcon, Field, FieldDivider, type FieldProps, FieldRow, type FieldRowProps, FieldSection, type FieldSectionProps, FileCodeIcon, FileSearchIcon, FolderAmberIcon, GeminiIcon, GoogleIcon, GroupedSelect, Header, type HeaderNavItem, type HeaderProps, HeadingIcon, ICON_NODES, Icon, type IconProps, ImageIcon, ImportIcon, IndentIcon, ItalicIcon, type LanguageItem, LayersIcon, LayoutGridIcon, LineChartIcon, LinkIcon, ListIcon, ListOrderedIcon, type MachineType, MarkdownMessage, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageCircleIcon, MessageFooter, type MessageFooterProps, MessagesSquareIcon, type ModelGroup, type ModelItem, MyPageIcon, type NavDropdownItem, type NotificationItem$1 as NotificationItem, NumberBadge, type NumberBadgeProps, OpenAiIcon, OutdentIcon, PenLineIcon, PencilLineIcon, PresentationIcon, Providers, type RenderLinkFn, RyaiLogoIcon, SegmentedControl, Select, type SelectGroup, type SelectOption, type SelectProps, Sheet, ShoppingBagIcon, Sidebar, type SidebarLabels, type SidebarNavItem, type SidebarTask, type SidebarTaskMenuItem, type SidebarUtilityLink, Slider, SmileIcon, SparklesIcon, SquareCheckIcon, SquareCheckOutlineIcon, StarIcon, Stepper, type StepperProps, type StepperStep, StrikethroughIcon, Switch, SwitchField, type SwitchFieldProps, TablePropertiesIcon, Tooltip, type TooltipProps, TooltipProvider, TooltipWithIcon, type TooltipWithIconProps, TrashIcon, UpstageIcon, type UserMenuSection, type UserMenuSectionItem, UserMessageBubble, WandSparklesIcon, buttonVariants };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AiAgentIcon, AiBuilderIcon, AiCloudIcon, AiDatacenterIcon, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AlignJustifyIcon, AlignLeftIcon, ArrowDownIcon, type AvailabilityStatus, Avatar, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarProps, type AvatarSize, BADGE_VARIANT_STYLES, Badge, type BadgeProps, type BadgeVariant, BlockquoteIcon, BoldIcon, BookOpenIcon, BookUpIcon, Breadcrumb, Button, type ButtonProps, Card, type CardProps, type CardSpec, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxProps, ChevronsUpDownIcon, ChoiceCardGroup, type ChoiceCardGroupProps, ChoiceCardItem, type ChoiceCardItemProps, CircleCheckFillIcon, CircleHelpIcon, CircleOutlineIcon, ClaudeIcon, CodeIcon, CodeSquareIcon, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleRoot, CollapsibleTrigger, type CollapsibleWorkspace, Combobox, type ComboboxOption, type ComboboxProps, CreditIcon, DataSection, type DataSectionProps, DeepSeekIcon, DownloadIcon, Field, FieldDivider, type FieldProps, FieldRow, type FieldRowProps, FieldSection, type FieldSectionProps, FileCodeIcon, FileSearchIcon, FolderAmberIcon, FolderClosedIcon, GeminiIcon, GoogleIcon, GroupedSelect, Header, type HeaderNavItem, type HeaderProps, HeadingIcon, ICON_NODES, Icon, type IconProps, ImageIcon, ImportIcon, IndentIcon, ItalicIcon, KbCard, type KbCardProps, KeyRoundIcon, type LanguageItem, LayersIcon, LayoutGridIcon, LineChartIcon, LinkIcon, ListIcon, ListOrderedIcon, type MachineType, MarkdownMessage, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageCircleIcon, MessageFooter, type MessageFooterProps, MessagesSquareIcon, Modal, type ModalProps, type ModelGroup, type ModelItem, MyPageIcon, type NavDropdownItem, type NotificationItem, NumberBadge, type NumberBadgeProps, OpenAiIcon, OutdentIcon, PanelLeftIcon, PenLineIcon, PencilLineIcon, PresentationIcon, Providers, RyaiLogoIcon, SearchInput, type SearchInputProps, SegmentedControl, Select, type SelectGroup, type SelectOption, type SelectProps, Sheet, ShoppingBagIcon, Sidebar, SidebarLink, type SidebarMainMenuItem, type SidebarSubMenuItem, type SidebarUtilityItem, Slider, SmileIcon, type SortDirection, SortIcon, SparklesIcon, SquareCheckIcon, SquareCheckOutlineIcon, StarIcon, Stepper, type StepperProps, type StepperStep, StrikethroughIcon, Switch, SwitchField, type SwitchFieldProps, Table, type TableColumn, TablePagination, type TablePaginationConfig, TablePropertiesIcon, type TableProps, type TableSortingItem, Tooltip, type TooltipProps, TooltipProvider, TooltipWithIcon, type TooltipWithIconProps, TrashIcon, UpstageIcon, type UserMenuSection, type UserMenuSectionItem, UserMessageBubble, WandSparklesIcon, buttonVariants };