@brainfish-ai/components 0.35.20 → 0.36.0

package/dist/esm/index.js

@@ -1,6 +1,94 @@
-import './global.css';/* empty css                      */export{BrainfishColors}from"./colors.js";export{C as ChatSearch,a as ChatSearchProvider,N as NextBestActionType,R as ResolvedConversationFooter,u as useChatSearch,b as useIsChatSearchDirty,v as validateUrlString}from"./chunks/ChatSearch.Crh0QjPs.js";export{C as ContextPillBadge,a as Conversation,b as ConversationActions,c as ConversationInput,d as ConversationMessageAssistant,e as ConversationMessageUser,f as ConversationMessages,g as ConversationProvider,h as ConversationStatus,i as ConversationSuggestions,j as getConversationStatusLabel,u as useConversation}from"./chunks/Conversation.CWR55agZ.js";export{C as CodeBlock,F as FormattedMessage,M as MemoizedReactMarkdown,Z as ZoomableImage,a as addPopupWidgetUtm,b as addUtmParameters}from"./chunks/FormattedMessage.DXVhkV-z.js";export{MermaidDiagram}from"./chunks/MermaidDiagram.PRgXQ5Yh.js";export{Accordion,AccordionContent,AccordionItem,AccordionTrigger}from"./components/ui/accordion.js";export{AlertDialog,AlertDialogAction,AlertDialogCancel,AlertDialogContent,AlertDialogDescription,AlertDialogFooter,AlertDialogHeader,AlertDialogOverlay,AlertDialogPortal,AlertDialogTitle,AlertDialogTrigger}from"./components/ui/alert-dialog.js";export{Alert,AlertAction,AlertContent,AlertDescription,AlertTitle}from"./components/ui/alert.js";export{Avatar,AvatarBadge,AvatarFallback,AvatarGroup,AvatarGroupCount,AvatarImage}from"./components/ui/avatar.js";export{Badge,badgeVariants}from"./components/ui/badge.js";export{ButtonGroup,ButtonGroupSeparator,ButtonGroupText,buttonGroupVariants}from"./components/ui/button-group.js";export{B as Button,b as buttonVariants}from"./chunks/button.DXe2tRBO.js";export{Calendar}from"./components/ui/calendar.js";export{Card,CardContent,CardDescription,CardFooter,CardHeader,CardTitle}from"./components/ui/card.js";export{Collapsible,CollapsibleContent,CollapsibleTrigger}from"./components/ui/collapsible.js";export{Command,CommandDialog,CommandEmpty,CommandGroup,CommandInput,CommandItem,CommandList,CommandSeparator,CommandShortcut}from"./components/ui/command.js";export{Dialog,DialogClose,DialogContent,DialogDescription,DialogFooter,DialogHeader,DialogOverlay,DialogPortal,DialogTitle,DialogTrigger}from"./components/ui/dialog.js";export{DivButton,divButtonVariants}from"./components/ui/div-button.js";import{DropdownMenu as o,DropdownMenuTrigger as t,DropdownMenuContent as r,DropdownMenuItem as n}from"./components/ui/dropdown-menu.js";export{DropdownMenuCheckboxItem,DropdownMenuGroup,DropdownMenuLabel,DropdownMenuPortal,DropdownMenuRadioGroup,DropdownMenuRadioItem,DropdownMenuSeparator,DropdownMenuShortcut,DropdownMenuSub,DropdownMenuSubContent,DropdownMenuSubTrigger}from"./components/ui/dropdown-menu.js";export{Icon,MemoizedIcon}from"./components/ui/icon.js";export{Input}from"./components/ui/input.js";export{Item,ItemActions,ItemContent,ItemDescription,ItemFooter,ItemGroup,ItemHeader,ItemMedia,ItemSeparator,ItemTitle}from"./components/ui/item.js";export{Label}from"./components/ui/label.js";export{Popover,PopoverAnchor,PopoverContent,PopoverTrigger}from"./components/ui/popover.js";export{Progress}from"./components/ui/progress.js";export{RadioGroup,RadioGroupItem}from"./components/ui/radio-group.js";export{ResizableHandle,ResizablePanel,ResizablePanelGroup}from"./components/ui/resizable.js";export{R as Ripple,a as RippleStatus,S as SweepText}from"./chunks/ripple-status.BiOlScXz.js";export{ScrollArea,ScrollBar}from"./components/ui/scroll-area.js";export{Select,SelectContent,SelectGroup,SelectItem,SelectLabel,SelectSeparator,SelectTrigger,SelectValue}from"./components/ui/select.js";export{Separator}from"./components/ui/separator.js";export{Sheet,SheetClose,SheetContent,SheetDescription,SheetFooter,SheetHeader,SheetOverlay,SheetPortal,SheetTitle,SheetTrigger}from"./components/ui/sheet.js";export{Spinner}from"./components/ui/spinner.js";export{Switch}from"./components/ui/switch.js";export{Tabs,TabsContent,TabsList,TabsTrigger}from"./components/ui/tabs.js";export{Table,TableBody,TableCaption,TableCell,TableFooter,TableHead,TableHeader,TableRow}from"./components/ui/table.js";export{Textarea}from"./components/ui/textarea.js";export{Tooltip,TooltipContent,TooltipProvider,TooltipTrigger}from"./components/ui/tooltip.js";export{C as Combobox}from"./chunks/combobox.Ccfe3IGO.js";export{D as DataTable}from"./chunks/data-table.Dn7VQJFo.js";export{D as DatePicker}from"./chunks/date-picker.GRONonNX.js";export{F as FileUpload,a as FileUploadStatus,f as formatFileSize}from"./chunks/file-upload-status.znDE1kUC.js";export{F as Filter,a as Filters,O as Operator}from"./chunks/filters.CZJ31Eqj.js";export{F as FontPicker,a as FontPickerItem,c as clearFontCache,g as getCachedFonts,l as loadFont,s as setCachedFonts,u as useFontOptions}from"./chunks/font-picker.DrA0q0TI.js";export{I as InputWithTags}from"./chunks/input-with-tags.4LvQIIuq.js";export{L as Logo}from"./chunks/logo.DtwFGMBj.js";export{C as ChatLogo}from"./chunks/chat-logo.F_m9SJrM.js";export{A as AILogo,a as AILogoPaths}from"./chunks/ai-logo.Bh2bhNcG.js";export{S as SimpleSelect}from"./chunks/simpleSelect.C1KHuEVe.js";export{T as Trend,a as TrendValue}from"./chunks/trend-value.lSWHqdkm.js";export{T as TwoLevelCombobox}from"./chunks/two-level-combobox.CQUmvlq6.js";export{F as FullLayout,a as FullLayoutHeader,b as FullLayoutLeftSidebar,c as FullLayoutNavStateContext,d as FullLayoutProvider,e as FullLayoutRightSidebar,u as useFullLayoutContext,f as useRightSidebar}from"./chunks/header-pane.D40kbO-a.js";export{H as HEADER_NAV_HEIGHT,a as HeaderNav}from"./chunks/header-nav.BQXr30-S.js";export{S as Sidebar,u as useSidebar}from"./chunks/sidebar.CM8HDZg0.js";export{MicrosoftTeamsLogo}from"./logos/microsoft-teams-logo.js";export{SlackLogo}from"./logos/slack-logo.js";export{MicrosoftLogo}from"./logos/microsoft-logo.js";export{R as ReviewList,a as ReviewListItem,b as ReviewsSelectionProvider,S as SuggestionCard,u as useReviewsSelection}from"./chunks/suggestion-card.PPUwB3ML.js";import{ChartBar as p,CreditCard as m}from"@phosphor-icons/react";import*as x from"react";import{c as k}from"./chunks/utils.DtKoarLP.js";function w({percentage:e,label:a="Queries",status:s,onViewPlan:i,onViewBilling:l}){/* @__PURE__ */
-return x.createElement(o,null,/* @__PURE__ */x.createElement(t,{asChild:!0},/* @__PURE__ */x.createElement("button",{type:"button",className:k("flex items-center gap-1.5 rounded border bg-surface py-1 pl-2 pr-2.5","text-xs font-normal text-dark-900 cursor-pointer","hover:bg-dark-200 active:bg-dark-400","focus-visible:outline-none","transition-colors",{"border-yellow-500/50":"warning"===s,"border-red-500/50":"reached"===s}),"aria-label":`${a} usage: ${e}%`},
-/* @__PURE__ */x.createElement("span",{className:k("h-2 w-2 shrink-0 rounded-full",{"bg-yellow-500":"warning"===s,"bg-red-500":"reached"===s}),"aria-hidden":"true"}),
-/* @__PURE__ */x.createElement("span",{className:"whitespace-nowrap"},e,"% of ",a," used"),
-/* @__PURE__ */x.createElement("span",{className:"opacity-60 whitespace-nowrap"},"View plan"))),/* @__PURE__ */x.createElement(r,{align:"end",className:"w-52"},/* @__PURE__ */x.createElement(n,{onClick:i,className:"flex items-center gap-2"},/* @__PURE__ */x.createElement(p,{size:16,"aria-hidden":"true"}),"View plan"),/* @__PURE__ */x.createElement(n,{onClick:l,className:"flex items-center gap-2"},/* @__PURE__ */x.createElement(m,{size:16,"aria-hidden":"true"}),"View billing settings")))}export{o as DropdownMenu,r as DropdownMenuContent,n as DropdownMenuItem,t as DropdownMenuTrigger,w as UsageIndicatorPill};
-//# sourceMappingURL=index.js.map
+export { BrainfishColors } from './colors.js';
+export { default as ChatSearch } from './components/chat-search/ChatSearch.js';
+export { ResolvedConversationFooter } from './components/chat-search/ResolvedConversationFooter.js';
+export { NextBestActionType, validateUrlString } from './components/chat-search/types.js';
+export { ChatSearchProvider, useChatSearch } from './components/chat-search/ChatSearchContext.js';
+export { useIsChatSearchDirty } from './components/chat-search/hooks/useIsChatSearchDirty.js';
+export { Conversation } from './components/conversation/Conversation.js';
+export { ConversationMessages } from './components/conversation/ConversationMessages.js';
+export { ConversationMessageAssistant } from './components/conversation/ConversationMessageAssistant.js';
+export { ConversationMessageUser } from './components/conversation/ConversationMessageUser.js';
+export { ConversationInput } from './components/conversation/ConversationInput.js';
+export { ConversationSuggestions } from './components/conversation/ConversationSuggestions.js';
+export { ConversationActions } from './components/conversation/ConversationActions.js';
+export { ConversationStatus } from './components/conversation/ConversationStatus.js';
+export { getConversationStatusLabel } from './components/conversation/status.js';
+export { ContextPillBadge } from './components/conversation/ContextPillBadge.js';
+export { ConversationProvider, useConversation } from './components/conversation/ConversationContext.js';
+export { CodeBlock } from './components/markdown/CodeBlock.js';
+export { FormattedMessage } from './components/markdown/FormattedMessage.js';
+export { MemoizedReactMarkdown } from './components/markdown/MemoizedReactMarkdown.js';
+export { MermaidDiagram } from './components/markdown/MermaidDiagram.js';
+export { ZoomableImage } from './components/markdown/ZoomableImage.js';
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './components/ui/accordion.js';
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from './components/ui/alert-dialog.js';
+export { Alert, AlertAction, AlertContent, AlertDescription, AlertTitle } from './components/ui/alert.js';
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from './components/ui/avatar.js';
+export { Badge, badgeVariants } from './components/ui/badge.js';
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants } from './components/ui/button-group.js';
+export { Button, buttonVariants } from './components/ui/button.js';
+export { Calendar } from './components/ui/calendar.js';
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './components/ui/card.js';
+export { Collapsible, CollapsibleContent, CollapsibleTrigger } from './components/ui/collapsible.js';
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from './components/ui/command.js';
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './components/ui/dialog.js';
+export { DivButton, divButtonVariants } from './components/ui/div-button.js';
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './components/ui/dropdown-menu.js';
+export { Icon, MemoizedIcon } from './components/ui/icon.js';
+export { Input } from './components/ui/input.js';
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle } from './components/ui/item.js';
+export { Label } from './components/ui/label.js';
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from './components/ui/popover.js';
+export { Progress } from './components/ui/progress.js';
+export { RadioGroup, RadioGroupItem } from './components/ui/radio-group.js';
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup } from './components/ui/resizable.js';
+export { RippleStatus } from './components/ui/ripple-status.js';
+export { Ripple } from './components/ui/ripple.js';
+export { ScrollArea, ScrollBar } from './components/ui/scroll-area.js';
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from './components/ui/select.js';
+export { Separator } from './components/ui/separator.js';
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger } from './components/ui/sheet.js';
+export { Spinner } from './components/ui/spinner.js';
+export { SweepText } from './components/ui/sweep-text.js';
+export { Switch } from './components/ui/switch.js';
+export { Tabs, TabsContent, TabsList, TabsTrigger } from './components/ui/tabs.js';
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from './components/ui/table.js';
+export { Textarea } from './components/ui/textarea.js';
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './components/ui/tooltip.js';
+export { Combobox } from './components/combobox/combobox.js';
+export { DataTable } from './components/data-table/data-table.js';
+export { DatePicker } from './components/date-picker/date-picker.js';
+export { FileUpload } from './components/file-upload/file-upload.js';
+export { FileUploadStatus } from './components/file-upload/file-upload-status.js';
+export { formatFileSize } from './components/file-upload/utils.js';
+export { Filter } from './components/filter/filter.js';
+export { Filters } from './components/filter/filters.js';
+export { Operator } from './components/filter/types.js';
+export { FontPicker } from './components/font-picker/font-picker.js';
+export { FontPickerItem } from './components/font-picker/font-picker-item.js';
+export { clearFontCache, getCachedFonts, loadFont, setCachedFonts } from './components/font-picker/font-utils.js';
+export { useFontOptions } from './components/font-picker/use-font-options.js';
+export { InputWithTags } from './components/input-with-tags/input-with-tags.js';
+export { Logo } from './components/logo/logo.js';
+export { ChatLogo } from './components/logo/chat-logo.js';
+export { AILogo, AILogoPaths } from './components/logo/ai-logo.js';
+export { SimpleSelect } from './components/select/simpleSelect.js';
+export { Trend, TrendValue } from './components/trend-value/trend-value.js';
+export { TwoLevelCombobox } from './components/two-level-combobox/two-level-combobox.js';
+export { default as FullLayout } from './layouts/full-layout/layout.js';
+export { FullLayoutNavStateContext, FullLayoutProvider, useFullLayoutContext, useRightSidebar } from './layouts/full-layout/context.js';
+export { FullLayoutHeader } from './layouts/full-layout/header-pane.js';
+export { FullLayoutLeftSidebar } from './layouts/full-layout/left-sidebar-pane.js';
+export { FullLayoutRightSidebar } from './layouts/full-layout/right-sidebar-pane.js';
+export { HEADER_NAV_HEIGHT, HeaderNav } from './layouts/header-nav/header-nav.js';
+export { Sidebar } from './layouts/sidebar/sidebar.js';
+export { useSidebar } from './layouts/sidebar/context.js';
+export { addPopupWidgetUtm, addUtmParameters } from './lib/addUtmParams.js';
+export { MicrosoftTeamsLogo } from './logos/microsoft-teams-logo.js';
+export { SlackLogo } from './logos/slack-logo.js';
+export { MicrosoftLogo } from './logos/microsoft-logo.js';
+export { ReviewList } from './scenes/knowledge-review/review-list/review-list.js';
+export { ReviewListItem } from './scenes/knowledge-review/review-list/review-list-item.js';
+export { ReviewsSelectionProvider, useReviewsSelection } from './scenes/knowledge-review/context.js';
+export { SuggestionCard } from './scenes/knowledge-review/suggestion-card/suggestion-card.js';
+export { UsageIndicatorPill } from './components/usage-indicator-pill/usage-indicator-pill.js';

package/dist/esm/layouts/full-layout/blurry-blob.js

@@ -0,0 +1,21 @@
+import React__default from 'react';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils.js';
+
+const blurryBlob = cva("blurry-blob", {
+  variants: {
+    variant: {
+      topLeft: "",
+      bottomRight: "!top-auto !left-auto !-bottom-[10%] !right-0 rotate-180"
+    }
+  },
+  defaultVariants: {
+    variant: "topLeft"
+  }
+});
+const GooFilter = () => /* @__PURE__ */ React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "fixed top-0 left-0 w-0 h-0" }, /* @__PURE__ */ React__default.createElement("defs", null, /* @__PURE__ */ React__default.createElement("filter", { id: "goo" }, /* @__PURE__ */ React__default.createElement("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "10", result: "blur" }), /* @__PURE__ */ React__default.createElement("feColorMatrix", { in: "blur", mode: "matrix", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8", result: "goo" }), /* @__PURE__ */ React__default.createElement("feBlend", { in: "SourceGraphic", in2: "goo" }))));
+const BlurryBlob = ({ className, variant }) => {
+  return /* @__PURE__ */ React__default.createElement("div", { className: cn(blurryBlob({ variant }), className) }, /* @__PURE__ */ React__default.createElement("div", { className: "gradients-container" }, /* @__PURE__ */ React__default.createElement("div", { className: "g1" }), /* @__PURE__ */ React__default.createElement("div", { className: "g2" }), /* @__PURE__ */ React__default.createElement("div", { className: "g3" }), /* @__PURE__ */ React__default.createElement("div", { className: "g4" })));
+};
+
+export { GooFilter, BlurryBlob as default };

package/dist/esm/layouts/full-layout/components/body.js

@@ -0,0 +1,8 @@
+import React__default from 'react';
+
+function Body({ children }) {
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children);
+}
+Body.displayName = "FullLayout.Body";
+
+export { Body };

package/dist/esm/layouts/full-layout/components/header.js

@@ -0,0 +1,28 @@
+import React__default from 'react';
+import { HeaderNav } from '../../header-nav/header-nav.js';
+import { useFullLayoutContext } from '../context.js';
+
+function Header(props) {
+  const { onBrainfishNativeClick, ...rest } = props;
+  const ctx = useFullLayoutContext();
+  if (!ctx) return null;
+  const handleNativeClick = () => {
+    ctx.toggleRightSidebar();
+    onBrainfishNativeClick?.();
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    HeaderNav,
+    {
+      ...rest,
+      showSidebarToggle: !ctx.disableLeftSideNav,
+      isSideNavOpen: ctx.isSideNavOpen,
+      isRightSidebarOpen: ctx.isRightSidebarOpen,
+      onSideNavigationToggle: ctx.toggleSidebar,
+      onBrainfishNativeClick: handleNativeClick,
+      sidebarToggleRef: ctx.sidebarToggleRef
+    }
+  );
+}
+Header.displayName = "FullLayout.Header";
+
+export { Header };

package/dist/esm/layouts/full-layout/components/left-sidebar.js

@@ -0,0 +1,33 @@
+import React__default, { useContext } from 'react';
+import { useFullLayoutContext, FullLayoutNavStateContext } from '../context.js';
+import { FullLayoutLeftSidebar } from '../left-sidebar-pane.js';
+
+function LeftSidebar(props) {
+  const ctx = useFullLayoutContext();
+  const navState = useContext(FullLayoutNavStateContext);
+  if (!ctx) return null;
+  if (ctx.disableLeftSideNav) return null;
+  const sidebarProps = navState != null ? {
+    ...props,
+    appNavActiveId: navState.appNavActiveId ?? props.appNavActiveId,
+    sectionNavActiveId: navState.sectionNavActiveId ?? props.sectionNavActiveId,
+    activeArticleId: navState.activeArticleId ?? props.activeArticleId
+  } : props;
+  return /* @__PURE__ */ React__default.createElement(
+    FullLayoutLeftSidebar,
+    {
+      ref: ctx.sideNavRef,
+      open: ctx.isSideNavOpen,
+      widthPx: ctx.leftNavWidth,
+      onResizeStart: ctx.handleResizeStart,
+      onResizeKeyDown: ctx.handleResizeKeyDown,
+      ariaValuenow: ctx.ariaValuenow,
+      ariaValuemin: ctx.ariaValuemin,
+      ariaValuemax: ctx.ariaValuemax,
+      sidebarProps
+    }
+  );
+}
+LeftSidebar.displayName = "FullLayout.LeftSidebar";
+
+export { LeftSidebar };

package/dist/esm/layouts/full-layout/components/main-area.js

@@ -0,0 +1,8 @@
+import React__default from 'react';
+
+function MainArea({ children }) {
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children);
+}
+MainArea.displayName = "FullLayout.MainArea";
+
+export { MainArea };

package/dist/esm/layouts/full-layout/components/main.js

@@ -0,0 +1,23 @@
+import React__default from 'react';
+import { useFullLayoutContext } from '../context.js';
+import { Item } from '../../../components/ui/item.js';
+import { cn } from '../../../lib/utils.js';
+
+function Main({ children, className }) {
+  const ctx = useFullLayoutContext();
+  const mainIsScrollContainer = ctx?.disableMainScrollArea ?? false;
+  return /* @__PURE__ */ React__default.createElement(
+    Item,
+    {
+      className: cn(
+        "p-0",
+        mainIsScrollContainer && "h-[calc(100dvh-var(--header-nav-height))] md:h-[calc(100dvh-var(--header-nav-height)-1rem)] min-h-0 overflow-y-auto p-4 md:p-8",
+        className
+      )
+    },
+    children
+  );
+}
+Main.displayName = "FullLayout.Main";
+
+export { Main };

package/dist/esm/layouts/full-layout/components/right-sidebar.js

@@ -0,0 +1,21 @@
+import React__default from 'react';
+import { useFullLayoutContext } from '../context.js';
+import { FullLayoutRightSidebar } from '../right-sidebar-pane.js';
+
+function RightSidebar({ children, scrollable }) {
+  const ctx = useFullLayoutContext();
+  if (!ctx) return null;
+  return /* @__PURE__ */ React__default.createElement(
+    FullLayoutRightSidebar,
+    {
+      ref: ctx.rightSidebarRef,
+      open: ctx.isRightSidebarOpen,
+      scrollable,
+      className: "top-[var(--header-nav-height)]"
+    },
+    children
+  );
+}
+RightSidebar.displayName = "FullLayout.RightSidebar";
+
+export { RightSidebar };

package/dist/esm/layouts/full-layout/context.js

@@ -0,0 +1,24 @@
+import React__default from 'react';
+
+const FullLayoutNavStateContext = React__default.createContext(null);
+const FullLayoutContext = React__default.createContext(null);
+function FullLayoutProvider({ value, children }) {
+  return /* @__PURE__ */ React__default.createElement(FullLayoutContext.Provider, { value }, children);
+}
+function useFullLayoutContext() {
+  return React__default.useContext(FullLayoutContext);
+}
+function useRightSidebar() {
+  const ctx = React__default.useContext(FullLayoutContext);
+  if (!ctx) {
+    throw new Error("useRightSidebar must be used within a <FullLayout> component.");
+  }
+  return {
+    isOpen: ctx.isRightSidebarOpen,
+    open: ctx.openRightSidebar,
+    close: ctx.closeRightSidebar,
+    toggle: ctx.toggleRightSidebar
+  };
+}
+
+export { FullLayoutNavStateContext, FullLayoutProvider, useFullLayoutContext, useRightSidebar };

package/dist/esm/layouts/full-layout/header-pane.js

@@ -0,0 +1,49 @@
+import React__default from 'react';
+import { cn } from '../../lib/utils.js';
+
+const FullLayoutHeader = React__default.forwardRef(
+  ({ onOpenLeft, onOpenRight, className, children, ...props }, ref) => {
+    return /* @__PURE__ */ React__default.createElement(
+      "header",
+      {
+        ref,
+        "data-slot": "full-layout-header",
+        className: cn("h-16 bg-white shadow-md flex items-center px-4 shrink-0 sticky top-0 z-20", className),
+        ...props
+      },
+      onOpenLeft != null && /* @__PURE__ */ React__default.createElement(
+        "button",
+        {
+          "data-slot": "full-layout-header-trigger-left",
+          type: "button",
+          onClick: onOpenLeft,
+          className: "p-2 hover:bg-gray-100 rounded-lg transition-colors mr-4 lg:hidden",
+          "aria-label": "Toggle menu"
+        },
+        /* @__PURE__ */ React__default.createElement("svg", { className: "size-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React__default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }))
+      ),
+      /* @__PURE__ */ React__default.createElement("div", { "data-slot": "full-layout-header-center", className: "flex-1 min-w-0" }, children),
+      onOpenRight != null && /* @__PURE__ */ React__default.createElement("div", { "data-slot": "full-layout-header-trigger-right", className: "ml-auto" }, /* @__PURE__ */ React__default.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: onOpenRight,
+          className: "p-2 hover:bg-gray-100 rounded-lg transition-colors",
+          "aria-label": "Toggle chat"
+        },
+        /* @__PURE__ */ React__default.createElement("svg", { className: "size-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React__default.createElement(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"
+          }
+        ))
+      ))
+    );
+  }
+);
+FullLayoutHeader.displayName = "FullLayoutHeader";
+
+export { FullLayoutHeader };

package/dist/esm/layouts/full-layout/layout.js

@@ -0,0 +1,305 @@
+import React__default, { useState, useMemo, useRef, useEffect, useCallback, isValidElement } from 'react';
+import { useMediaQuery } from 'usehooks-ts';
+import { FullLayoutProvider } from './context.js';
+import { HEADER_NAV_HEIGHT } from '../header-nav/header-nav.js';
+import BlurryBlob, { GooFilter } from './blurry-blob.js';
+import { ScrollArea } from '../../components/ui/scroll-area.js';
+import { FeatureFlagProvider } from '../../lib/feature-flags.js';
+import { cn } from '../../lib/utils.js';
+import { RightSidebar } from './components/right-sidebar.js';
+import { Main } from './components/main.js';
+import { LeftSidebar } from './components/left-sidebar.js';
+import { Header } from './components/header.js';
+import { Body } from './components/body.js';
+import { MainArea } from './components/main-area.js';
+
+const MIN_SIDENAV_WIDTH = 260;
+const CLOSE_SIDENAV_THRESHOLD = MIN_SIDENAV_WIDTH - 32;
+const MAX_SIDENAV_WIDTH = 600;
+const RIGHT_SIDEBAR_WIDTH = 384;
+function extractSlots(children, refs) {
+  const out = {};
+  const arr = React__default.Children.toArray(children);
+  for (const key of Object.keys(refs)) {
+    const match = arr.find((c) => isValidElement(c) && c.type === refs[key]);
+    out[key] = match ?? null;
+  }
+  return out;
+}
+function FullLayoutRoot({
+  children,
+  disableLeftSideNav = false,
+  disableMainScrollArea = false,
+  className,
+  forceRightSidebarOpen = false
+}) {
+  const [isSideNavOpen, setIsSideNavOpen] = useState(() => typeof window !== "undefined" && window.innerWidth > 767);
+  const [isRightSidebarOpen, setIsRightSidebarOpen] = useState(forceRightSidebarOpen);
+  const [isResizing, setIsResizing] = useState(false);
+  const [gridWidth, setGridWidth] = useState(() => typeof window !== "undefined" ? window.innerWidth : 0);
+  const newMinNavWidth = useMemo(
+    () => gridWidth > 0 ? Math.max(MIN_SIDENAV_WIDTH, Math.min(MAX_SIDENAV_WIDTH, Math.round(gridWidth * 0.18))) : MIN_SIDENAV_WIDTH,
+    [gridWidth]
+  );
+  const [leftNavWidth, setLeftNavWidth] = useState(newMinNavWidth);
+  const sideNavRef = useRef(null);
+  const rightSidebarRef = useRef(null);
+  const sidebarToggleRef = useRef(null);
+  const gridRef = useRef(null);
+  const prevSideNavOpenRef = useRef(isSideNavOpen);
+  const resizeAcRef = useRef(null);
+  const isMobile = useMediaQuery("(max-width: 767px)");
+  const isWideDesktop = useMediaQuery("(min-width: 1280px)");
+  useEffect(() => {
+    if (!document.body.querySelector(".sbdocs")) {
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, []);
+  useEffect(() => {
+    const el = gridRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(([entry]) => {
+      setGridWidth(entry.contentRect.width);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const closeOtherSidebar = useCallback(
+    (opening) => {
+      if (isWideDesktop) return;
+      if (opening === "left") setIsRightSidebarOpen(false);
+      else setIsSideNavOpen(false);
+    },
+    [isWideDesktop]
+  );
+  const showSidenav = useCallback(() => {
+    closeOtherSidebar("left");
+    setIsSideNavOpen(true);
+    setLeftNavWidth(newMinNavWidth);
+    sideNavRef.current?.focus();
+  }, [closeOtherSidebar, newMinNavWidth]);
+  const toggleSidebar = useCallback(() => {
+    closeOtherSidebar("left");
+    setIsSideNavOpen((prev) => !prev);
+  }, [closeOtherSidebar]);
+  const openRightSidebar = useCallback(() => {
+    closeOtherSidebar("right");
+    setIsRightSidebarOpen(true);
+  }, [closeOtherSidebar]);
+  const closeRightSidebar = useCallback(() => {
+    setIsRightSidebarOpen(false);
+  }, []);
+  const toggleRightSidebar = useCallback(() => {
+    if (forceRightSidebarOpen) return;
+    closeOtherSidebar("right");
+    setIsRightSidebarOpen((prev) => !prev);
+  }, [closeOtherSidebar, forceRightSidebarOpen]);
+  const applyLeftNavWidth = useCallback(
+    (newWidth) => {
+      if (newWidth < CLOSE_SIDENAV_THRESHOLD) {
+        setLeftNavWidth(newMinNavWidth);
+        setIsSideNavOpen(false);
+        return true;
+      } else {
+        setLeftNavWidth(Math.min(MAX_SIDENAV_WIDTH, newWidth));
+        return false;
+      }
+    },
+    [newMinNavWidth]
+  );
+  const handleResizeStart = useCallback((e) => {
+    e.preventDefault();
+    resizeAcRef.current = new AbortController();
+    setIsResizing(true);
+  }, []);
+  const endResize = useCallback(() => {
+    setIsResizing(false);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  }, []);
+  const handleMouseMove = useCallback(
+    (e) => {
+      if (!isResizing) return;
+      if (applyLeftNavWidth(e.clientX)) {
+        endResize();
+      }
+    },
+    [isResizing, applyLeftNavWidth, endResize]
+  );
+  const handleMouseUp = useCallback(() => endResize(), [endResize]);
+  const setInert = useCallback((el, open) => {
+    if (!el) return;
+    if (open) el.removeAttribute("inert");
+    else el.setAttribute("inert", "");
+  }, []);
+  useEffect(() => {
+    setInert(sideNavRef.current, isSideNavOpen);
+    setInert(rightSidebarRef.current, isRightSidebarOpen);
+  }, [isSideNavOpen, isRightSidebarOpen]);
+  useEffect(() => {
+    if (!isResizing || !resizeAcRef.current) return;
+    const { signal } = resizeAcRef.current;
+    document.body.style.cursor = "ew-resize";
+    document.body.style.userSelect = "none";
+    document.addEventListener("mousemove", handleMouseMove, { signal });
+    document.addEventListener("mouseup", handleMouseUp, { signal });
+    window.addEventListener("mouseup", handleMouseUp, { signal });
+    setInert(sideNavRef.current, false);
+    return () => {
+      resizeAcRef.current?.abort();
+      resizeAcRef.current = null;
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+      setInert(sideNavRef.current, true);
+    };
+  }, [isResizing]);
+  const handleResizeKeyDown = useCallback(
+    (e) => {
+      const step = 16;
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        applyLeftNavWidth(leftNavWidth - step);
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        applyLeftNavWidth(Math.min(MAX_SIDENAV_WIDTH, leftNavWidth + step));
+      }
+    },
+    [leftNavWidth, applyLeftNavWidth]
+  );
+  const leftCol = disableLeftSideNav ? 0 : isSideNavOpen ? isMobile ? gridWidth : leftNavWidth : 0;
+  const rightCol = isMobile ? 0 : isRightSidebarOpen ? RIGHT_SIDEBAR_WIDTH : 0;
+  useEffect(() => {
+    setIsSideNavOpen(isMobile ? false : true);
+  }, [isMobile]);
+  useEffect(() => {
+    if (prevSideNavOpenRef.current && !isSideNavOpen) {
+      sidebarToggleRef.current?.focus();
+    }
+    prevSideNavOpenRef.current = isSideNavOpen;
+  }, [isSideNavOpen]);
+  const ariaRange = MAX_SIDENAV_WIDTH - newMinNavWidth;
+  const ariaValuenow = ariaRange === 0 ? 100 : Math.round((leftNavWidth - newMinNavWidth) / ariaRange * 100);
+  const layoutContextValue = useMemo(
+    () => ({
+      isSideNavOpen,
+      isRightSidebarOpen,
+      toggleSidebar,
+      openRightSidebar,
+      closeRightSidebar,
+      toggleRightSidebar,
+      showSidenav,
+      disableLeftSideNav: disableLeftSideNav ?? false,
+      leftNavWidth,
+      isMobile,
+      sideNavRef,
+      rightSidebarRef,
+      sidebarToggleRef,
+      handleResizeStart,
+      handleResizeKeyDown,
+      ariaValuenow,
+      ariaValuemin: 0,
+      ariaValuemax: 100,
+      disableMainScrollArea
+    }),
+    [
+      isSideNavOpen,
+      isRightSidebarOpen,
+      toggleSidebar,
+      openRightSidebar,
+      closeRightSidebar,
+      toggleRightSidebar,
+      showSidenav,
+      leftNavWidth,
+      isMobile,
+      disableLeftSideNav,
+      disableMainScrollArea,
+      handleResizeStart,
+      handleResizeKeyDown,
+      ariaValuenow
+    ]
+  );
+  const { MainArea: mainArea, RightSidebar: rightSidebar } = extractSlots(children, {
+    MainArea: MainArea,
+    RightSidebar: RightSidebar
+  });
+  const mainAreaChildren = isValidElement(mainArea) ? mainArea.props.children : null;
+  const { Header: header, Body: body } = extractSlots(mainAreaChildren ?? null, {
+    Header: Header,
+    Body: Body
+  });
+  const bodyChildren = isValidElement(body) ? body.props.children : null;
+  const { LeftSidebar: leftSidebar, Main: main } = extractSlots(bodyChildren ?? null, {
+    LeftSidebar: LeftSidebar,
+    Main: Main
+  });
+  const hasRightSidebar = rightSidebar != null;
+  const mainPanelClasses = "md:shadow-[2px_4px_12px_0_rgba(0,0,0,0.14)] md:dark:shadow-[2px_4px_12px_0_rgba(255,255,255,0.14)] md:rounded-lg";
+  return /* @__PURE__ */ React__default.createElement(FullLayoutProvider, { value: layoutContextValue }, /* @__PURE__ */ React__default.createElement(GooFilter, null), /* @__PURE__ */ React__default.createElement(BlurryBlob, { variant: "topLeft" }), /* @__PURE__ */ React__default.createElement(BlurryBlob, { variant: "bottomRight" }), /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      className: cn(
+        "min-h-screen w-screen bg-background grid transition-[grid-template-columns] duration-300 ease-in-out",
+        className
+      ),
+      style: {
+        gridTemplateColumns: hasRightSidebar ? "minmax(0, 1fr) var(--right-col)" : "minmax(0, 1fr)",
+        ["--right-col"]: hasRightSidebar ? `${rightCol}px` : "0px",
+        ["--header-nav-height"]: `${HEADER_NAV_HEIGHT}px`
+      }
+    },
+    /* @__PURE__ */ React__default.createElement("div", { className: "min-w-0 grid grid-rows-[auto_1fr]" }, header, /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        ref: gridRef,
+        "data-sidenav-state": isSideNavOpen ? "open" : "closed",
+        "data-right-sidebar-state": isRightSidebarOpen ? "open" : "closed",
+        className: cn(
+          "group/sidenav group/rightsidebar min-h-0 min-w-0 grid transition-[grid-template-columns] ease-linear"
+        ),
+        style: {
+          gridTemplateColumns: `var(--left-col) minmax(0, 1fr)`,
+          ["--left-col"]: `${leftCol}px`
+        }
+      },
+      disableLeftSideNav ? /* @__PURE__ */ React__default.createElement("div", { className: "w-0" }) : leftSidebar,
+      /* @__PURE__ */ React__default.createElement("div", { className: cn("relative md:mr-4", { "md:mx-4": !isSideNavOpen || disableLeftSideNav }) }, disableMainScrollArea ? /* @__PURE__ */ React__default.createElement("div", { className: cn("bg-surface", mainPanelClasses) }, /* @__PURE__ */ React__default.createElement("main", { className: "min-w-0 relative" }, main)) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+        ScrollArea,
+        {
+          className: cn(
+            "bg-surface h-[calc(100dvh-var(--header-nav-height))] md:h-[calc(100dvh-var(--header-nav-height)-1rem)]",
+            mainPanelClasses
+          )
+        },
+        /* @__PURE__ */ React__default.createElement("div", { className: "min-h-full" }, /* @__PURE__ */ React__default.createElement("main", { className: cn("min-w-0 overflow-visible relative p-4 md:p-8") }, main))
+      ), /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          "aria-hidden": true,
+          className: "main-scroll-fade pointer-events-none sticky bottom-4 left-0 right-0 h-16 bg-gradient-to-t from-surface to-transparent md:rounded-b-lg"
+        }
+      )))
+    )),
+    hasRightSidebar ? rightSidebar : null
+  ));
+}
+function fullLayoutRootPropsAreEqual(prev, next) {
+  return prev.children === next.children && prev.className === next.className && prev.disableLeftSideNav === next.disableLeftSideNav && prev.disableMainScrollArea === next.disableMainScrollArea;
+}
+const FullLayoutRootMemo = React__default.memo(FullLayoutRoot, fullLayoutRootPropsAreEqual);
+function FullLayoutWithFlags(props) {
+  const { featureFlags, ...layoutProps } = props;
+  return /* @__PURE__ */ React__default.createElement(FeatureFlagProvider, { flags: featureFlags }, /* @__PURE__ */ React__default.createElement(FullLayoutRootMemo, { ...layoutProps }));
+}
+const FullLayout = Object.assign(FullLayoutWithFlags, {
+  MainArea: MainArea,
+  Body: Body,
+  Header: Header,
+  LeftSidebar: LeftSidebar,
+  Main: Main,
+  RightSidebar: RightSidebar
+});
+
+export { FullLayout as default };