raft-ui 0.0.15 → 0.0.17

package/CHANGELOG.md

@@ -1,5 +1,6 @@
-## [0.0.15](https://github.com/botiverse/rui/compare/v0.0.14...v0.0.15) (2026-07-07)
+## [0.0.17](https://github.com/botiverse/rui/compare/v0.0.16...v0.0.17) (2026-07-08)
 
 ### Features
 
-- **select:** align source comparison parity ([eb03e29](https://github.com/botiverse/rui/commit/eb03e293e058d3a4a73c1dd83338096ad5810169))
+- **chat-shell:** add wip app shell parts ([de3c8f7](https://github.com/botiverse/rui/commit/de3c8f74297f87b3c2eec992aaa957d013072387))
+- **ui:** add optional font stylesheet ([03732a8](https://github.com/botiverse/rui/commit/03732a88b4b1524779de1b6b54fd1e95858422bb))

package/dist/fonts.css

@@ -0,0 +1,14 @@
+@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@300..700&family=Hanken+Grotesk:wght@300..700&family=Inter:wght@400;500;600;700&display=swap");
+
+:where(:root),
+[data-theme="brutal"] {
+  --heading-font: "Hanken Grotesk", system-ui, sans-serif;
+  --sans-font: "Hanken Grotesk", system-ui, sans-serif;
+  --mono-font: "Geist Mono", ui-monospace, monospace;
+}
+
+[data-theme="elegant"] {
+  --heading-font: "Inter", system-ui, sans-serif;
+  --sans-font: "Geist", system-ui, sans-serif;
+  --mono-font: "Geist Mono", ui-monospace, monospace;
+}

package/dist/index.mjs

@@ -2418,31 +2418,33 @@ const dropdownMenu = tv({
 		shortcut: ["ml-auto"],
 		itemCount: ["ml-auto inline-flex min-w-5 justify-center gap-0 px-1 tabular-nums"],
 		separator: ["border-t-2"],
-		indicator: ["pointer-events-none ml-auto flex size-3 shrink-0 items-center justify-center"]
+		indicator: ["pointer-events-none ml-auto flex size-3 shrink-0 items-center justify-center"],
+		radioLabel: []
 	},
 	variants: { theme: {
 		brutal: {
 			trigger: ["data-[popup-open]:translate-x-0 data-[popup-open]:translate-y-0", "data-[popup-open]:hover:translate-x-0 data-[popup-open]:hover:translate-y-0"],
 			content: ["border-2 border-black bg-white shadow-lg"],
 			item: [
-				"py-1.5 font-sans text-sm font-semibold leading-6 text-black hover:bg-brutal-yellow data-[highlighted]:bg-brutal-yellow",
+				"py-2 font-sans text-sm font-bold text-black hover:bg-soft-signal/30 data-[highlighted]:bg-soft-signal/30",
 				"data-[disabled]:pointer-events-none data-[disabled]:text-black/30",
-				"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-2 [&_svg_*]:stroke-2 [&_svg:not([class*='size-'])]:size-3.5"
+				"[&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:stroke-2 [&>svg_*]:stroke-2 [&>svg:not([class*='size-'])]:size-3.5"
 			],
 			radioItem: [
-				"h-9 overflow-hidden font-sans text-sm font-semibold leading-6 text-black",
+				"overflow-hidden py-2 font-sans text-sm font-bold leading-5 text-black",
 				"border-b border-black/10 last:border-b-0",
-				"hover:bg-brutal-yellow/30 data-[highlighted]:bg-brutal-yellow/30",
+				"hover:bg-soft-signal/30 data-[highlighted]:bg-soft-signal/30",
 				"data-[disabled]:pointer-events-none data-[disabled]:text-black/30",
-				"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-2 [&_svg_*]:stroke-2 [&_svg:not([class*='size-'])]:size-3.5"
+				"[&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:stroke-2 [&>svg_*]:stroke-2 [&>svg:not([class*='size-'])]:size-3.5"
 			],
+			radioLabel: ["min-w-0 flex-1 truncate"],
 			submenuTrigger: [
-				"py-1.5 font-sans text-sm font-semibold leading-6 text-black hover:bg-brutal-yellow data-[highlighted]:bg-brutal-yellow data-[popup-open]:bg-brutal-yellow",
+				"py-2 font-sans text-sm font-bold text-black hover:bg-soft-signal/30 data-[highlighted]:bg-soft-signal/30 data-[popup-open]:bg-soft-signal/30",
 				"data-[disabled]:pointer-events-none data-[disabled]:text-black/30",
-				"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-2 [&_svg_*]:stroke-2 [&_svg:not([class*='size-'])]:size-3.5"
+				"[&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:stroke-2 [&>svg_*]:stroke-2 [&>svg:not([class*='size-'])]:size-3.5"
 			],
 			label: ["border-b border-black px-3 py-2", "font-sans text-[10px] font-bold uppercase leading-none tracking-wide text-black/60"],
-			shortcut: ["font-sans text-sm font-semibold leading-6"],
+			shortcut: ["font-sans text-sm font-medium"],
 			itemCount: ["rounded border border-black bg-brutal-pink px-1 py-0.5", "font-sans text-[10px] leading-none font-bold text-white"],
 			separator: ["border-black"],
 			indicator: []
@@ -2484,6 +2486,7 @@ const dropdownMenu = tv({
 				"hover:[&>svg]:text-foreground-strong",
 				"data-[highlighted]:[&>svg]:text-foreground-strong"
 			],
+			radioLabel: ["min-w-0 flex-1 truncate"],
 			submenuTrigger: [
 				"gap-2.5 rounded-sm px-3 py-2 text-[13px] font-medium tracking-[-0.005em]",
 				"text-foreground-muted",
@@ -2645,17 +2648,30 @@ function DropdownMenuRadioGroup({ ...props }) {
 	});
 }
 function DropdownMenuRadioItem({ className, children, ...props }) {
-	const { radioItem, indicator } = dropdownMenu({ theme: useThemeFamily() });
+	const { radioItem, radioLabel, indicator } = dropdownMenu({ theme: useThemeFamily() });
 	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
 		"data-slot": "dropdown-menu-radio-item",
 		className: radioItem({ className }),
 		...props,
-		children: [children, /* @__PURE__ */ jsx("span", {
+		children: [renderRadioItemChildren(children, radioLabel()), /* @__PURE__ */ jsx("span", {
 			className: indicator(),
 			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(DropdownMenuCheckIcon, {}) })
 		})]
 	});
 }
+function renderRadioItemChildren(children, className) {
+	if (typeof children === "string" || typeof children === "number") return /* @__PURE__ */ jsx("span", {
+		"data-slot": "dropdown-menu-radio-item-label",
+		className,
+		children
+	});
+	if (Array.isArray(children) && children.every((child) => typeof child === "string")) return /* @__PURE__ */ jsx("span", {
+		"data-slot": "dropdown-menu-radio-item-label",
+		className,
+		children
+	});
+	return children;
+}
 function DropdownMenuRadioItemIndicator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Menu.RadioItemIndicator, {
 		"data-slot": "dropdown-menu-radio-item-indicator",

package/dist/styles.css

@@ -320,9 +320,9 @@
   --shadow-brutal: var(--theme-shadow-md);
   --shadow-brutal-lg: var(--theme-shadow-xl);
 
-  --font-heading: var(--heading-font);
-  --font-sans: var(--sans-font);
-  --font-mono: var(--mono-font);
+  --font-heading: var(--heading-font, system-ui, sans-serif);
+  --font-sans: var(--sans-font, system-ui, sans-serif);
+  --font-mono: var(--mono-font, ui-monospace, monospace);
 }
 
 :where(:root),
@@ -415,10 +415,6 @@
   --shadow-brutal-sm: 2px 2px 0px #141111;
   --shadow-brutal: 4px 4px 0px #141111;
   --shadow-brutal-lg: 6px 6px 0px #141111;
-
-  --heading-font: "Hanken Grotesk", system-ui, sans-serif;
-  --sans-font: "Hanken Grotesk", system-ui, sans-serif;
-  --mono-font: "Geist Mono", ui-monospace, monospace;
 }
 
 [data-theme="elegant"] {
@@ -518,10 +514,6 @@
     oklch(0.145 0.002 286.131 / 0.031) 0px 18px 24px -12px,
     oklch(0.145 0.002 286.131 / 0.039) 0px 12px 12px -6px,
     oklch(0.145 0.002 286.131 / 0.039) 0px 4px 6px -3px;
-
-  --heading-font: "Inter", system-ui, sans-serif;
-  --sans-font: "Geist", system-ui, sans-serif;
-  --mono-font: "Geist Mono", ui-monospace, monospace;
 }
 
 @media (prefers-color-scheme: dark) {

package/dist/wip.d.mts

@@ -4,6 +4,457 @@ import { useRender } from "@base-ui/react/use-render";
 import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
 
+//#region src/components/chat-shell/chat-shell.d.ts
+declare const chatShell: import("tailwind-variants/lite").TVReturnType<{
+  theme: {
+    brutal: {
+      root: string;
+      shellRail: string;
+      shellSidebar: string;
+      shellMain: string;
+      shellPanelStack: string;
+      mobileBar: string;
+      railHeader: string;
+      railFooter: string;
+      railItem: string[];
+      railItemBadge: string;
+      railItemIndicator: string;
+      sidebarHeader: string;
+      sidebarBody: string;
+      sidebarFooter: string;
+      panelStackItem: string;
+      resizeHandle: string;
+    };
+    elegant: {
+      root: string;
+      shellRail: string;
+      shellSidebar: string;
+      shellMain: string;
+      shellPanelStack: string;
+      mobileBar: string;
+      railHeader: string;
+      railFooter: string;
+      railItem: string[];
+      railItemBadge: string;
+      railItemIndicator: string;
+      sidebarHeader: string;
+      sidebarBody: string;
+      sidebarFooter: string;
+      panelStackItem: string;
+      resizeHandle: string;
+    };
+  };
+  presentation: {
+    desktop: {};
+    mobile: {
+      shellRail: string;
+      shellSidebar: string;
+      shellMain: string;
+      shellPanelStack: string;
+      mobileBar: string;
+    };
+  };
+  resizable: {
+    true: {
+      shellSidebar: string;
+      panelStackRoot: string;
+    };
+    false: {};
+  };
+  open: {
+    true: {};
+    false: {
+      panelStackItem: string;
+    };
+  };
+}, {
+  root: string[];
+  shellRail: string[];
+  shellSidebar: string[];
+  shellMain: string[];
+  shellPanelStack: string[];
+  mobileBar: string[];
+  railRoot: string[];
+  railHeader: string[];
+  railNav: string[];
+  railFooter: string[];
+  railItem: string[];
+  railItemIcon: string[];
+  railItemLabel: string[];
+  railItemBadge: string[];
+  railItemIndicator: string[];
+  sidebarRoot: string[];
+  sidebarHeader: string[];
+  sidebarBody: string[];
+  sidebarSection: string[];
+  sidebarList: string[];
+  sidebarFooter: string[];
+  panelStackRoot: string[];
+  panelStackItem: string[];
+  panelStackContent: string[];
+  resizeHandle: string[];
+}, undefined, {
+  theme: {
+    brutal: {
+      root: string;
+      shellRail: string;
+      shellSidebar: string;
+      shellMain: string;
+      shellPanelStack: string;
+      mobileBar: string;
+      railHeader: string;
+      railFooter: string;
+      railItem: string[];
+      railItemBadge: string;
+      railItemIndicator: string;
+      sidebarHeader: string;
+      sidebarBody: string;
+      sidebarFooter: string;
+      panelStackItem: string;
+      resizeHandle: string;
+    };
+    elegant: {
+      root: string;
+      shellRail: string;
+      shellSidebar: string;
+      shellMain: string;
+      shellPanelStack: string;
+      mobileBar: string;
+      railHeader: string;
+      railFooter: string;
+      railItem: string[];
+      railItemBadge: string;
+      railItemIndicator: string;
+      sidebarHeader: string;
+      sidebarBody: string;
+      sidebarFooter: string;
+      panelStackItem: string;
+      resizeHandle: string;
+    };
+  };
+  presentation: {
+    desktop: {};
+    mobile: {
+      shellRail: string;
+      shellSidebar: string;
+      shellMain: string;
+      shellPanelStack: string;
+      mobileBar: string;
+    };
+  };
+  resizable: {
+    true: {
+      shellSidebar: string;
+      panelStackRoot: string;
+    };
+    false: {};
+  };
+  open: {
+    true: {};
+    false: {
+      panelStackItem: string;
+    };
+  };
+}, {
+  root: string[];
+  shellRail: string[];
+  shellSidebar: string[];
+  shellMain: string[];
+  shellPanelStack: string[];
+  mobileBar: string[];
+  railRoot: string[];
+  railHeader: string[];
+  railNav: string[];
+  railFooter: string[];
+  railItem: string[];
+  railItemIcon: string[];
+  railItemLabel: string[];
+  railItemBadge: string[];
+  railItemIndicator: string[];
+  sidebarRoot: string[];
+  sidebarHeader: string[];
+  sidebarBody: string[];
+  sidebarSection: string[];
+  sidebarList: string[];
+  sidebarFooter: string[];
+  panelStackRoot: string[];
+  panelStackItem: string[];
+  panelStackContent: string[];
+  resizeHandle: string[];
+}, import("tailwind-variants/lite").TVReturnType<{
+  theme: {
+    brutal: {
+      root: string;
+      shellRail: string;
+      shellSidebar: string;
+      shellMain: string;
+      shellPanelStack: string;
+      mobileBar: string;
+      railHeader: string;
+      railFooter: string;
+      railItem: string[];
+      railItemBadge: string;
+      railItemIndicator: string;
+      sidebarHeader: string;
+      sidebarBody: string;
+      sidebarFooter: string;
+      panelStackItem: string;
+      resizeHandle: string;
+    };
+    elegant: {
+      root: string;
+      shellRail: string;
+      shellSidebar: string;
+      shellMain: string;
+      shellPanelStack: string;
+      mobileBar: string;
+      railHeader: string;
+      railFooter: string;
+      railItem: string[];
+      railItemBadge: string;
+      railItemIndicator: string;
+      sidebarHeader: string;
+      sidebarBody: string;
+      sidebarFooter: string;
+      panelStackItem: string;
+      resizeHandle: string;
+    };
+  };
+  presentation: {
+    desktop: {};
+    mobile: {
+      shellRail: string;
+      shellSidebar: string;
+      shellMain: string;
+      shellPanelStack: string;
+      mobileBar: string;
+    };
+  };
+  resizable: {
+    true: {
+      shellSidebar: string;
+      panelStackRoot: string;
+    };
+    false: {};
+  };
+  open: {
+    true: {};
+    false: {
+      panelStackItem: string;
+    };
+  };
+}, {
+  root: string[];
+  shellRail: string[];
+  shellSidebar: string[];
+  shellMain: string[];
+  shellPanelStack: string[];
+  mobileBar: string[];
+  railRoot: string[];
+  railHeader: string[];
+  railNav: string[];
+  railFooter: string[];
+  railItem: string[];
+  railItemIcon: string[];
+  railItemLabel: string[];
+  railItemBadge: string[];
+  railItemIndicator: string[];
+  sidebarRoot: string[];
+  sidebarHeader: string[];
+  sidebarBody: string[];
+  sidebarSection: string[];
+  sidebarList: string[];
+  sidebarFooter: string[];
+  panelStackRoot: string[];
+  panelStackItem: string[];
+  panelStackContent: string[];
+  resizeHandle: string[];
+}, undefined, unknown, unknown, undefined>>;
+type HiddenProp = {
+  hidden?: boolean;
+};
+type ChatShellVariantProps = Omit<VariantProps<typeof chatShell>, "theme">;
+type ChatShellRootProps = useRender.ComponentProps<"div"> & HiddenProp & Pick<ChatShellVariantProps, "presentation">;
+declare function ChatShellRoot({
+  presentation,
+  hidden,
+  className,
+  render,
+  ...props
+}: ChatShellRootProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+type ChatShellRailProps = useRender.ComponentProps<"aside"> & HiddenProp;
+declare function ChatShellRail({
+  hidden,
+  className,
+  render,
+  ...props
+}: ChatShellRailProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+type ChatShellSidebarProps = useRender.ComponentProps<"aside"> & HiddenProp & Pick<ChatShellVariantProps, "resizable">;
+declare function ChatShellSidebar({
+  hidden,
+  resizable,
+  className,
+  render,
+  ...props
+}: ChatShellSidebarProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+type ChatShellMainProps = useRender.ComponentProps<"main"> & HiddenProp;
+declare function ChatShellMain({
+  hidden,
+  className,
+  render,
+  ...props
+}: ChatShellMainProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+type ChatShellPanelStackProps = useRender.ComponentProps<"aside"> & HiddenProp & Pick<ChatShellVariantProps, "resizable">;
+declare function ChatShellPanelStack({
+  hidden,
+  resizable,
+  className,
+  render,
+  ...props
+}: ChatShellPanelStackProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+type ChatShellMobileBarProps = useRender.ComponentProps<"nav"> & HiddenProp;
+declare function ChatShellMobileBar({
+  hidden,
+  className,
+  render,
+  ...props
+}: ChatShellMobileBarProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+type ChatRailRootProps = useRender.ComponentProps<"div"> & {
+  value?: string;
+  onValueChange?: (value: string) => void;
+};
+declare function ChatRailRoot({
+  value,
+  onValueChange,
+  className,
+  render,
+  ...props
+}: ChatRailRootProps): import("react").JSX.Element;
+type ChatRailHeaderProps = useRender.ComponentProps<"div">;
+declare function ChatRailHeader({
+  className,
+  render,
+  ...props
+}: ChatRailHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type ChatRailNavProps = useRender.ComponentProps<"nav">;
+declare function ChatRailNav({
+  className,
+  render,
+  ...props
+}: ChatRailNavProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type ChatRailItemProps = Omit<useRender.ComponentProps<"button">, "value"> & {
+  value?: string;
+  selected?: boolean;
+  onSelect?: (value: string) => void;
+};
+declare function ChatRailItem({
+  value,
+  selected,
+  disabled,
+  onSelect,
+  onClick,
+  className,
+  render,
+  ...props
+}: ChatRailItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type ChatRailItemIconProps = useRender.ComponentProps<"span">;
+declare function ChatRailItemIcon({
+  className,
+  render,
+  ...props
+}: ChatRailItemIconProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type ChatRailItemLabelProps = useRender.ComponentProps<"span">;
+declare function ChatRailItemLabel({
+  className,
+  render,
+  ...props
+}: ChatRailItemLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type ChatRailItemBadgeProps = useRender.ComponentProps<"span">;
+declare function ChatRailItemBadge({
+  className,
+  render,
+  ...props
+}: ChatRailItemBadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type ChatRailItemIndicatorProps = useRender.ComponentProps<"span">;
+declare function ChatRailItemIndicator({
+  className,
+  render,
+  ...props
+}: ChatRailItemIndicatorProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type ChatRailFooterProps = useRender.ComponentProps<"div">;
+declare function ChatRailFooter({
+  className,
+  render,
+  ...props
+}: ChatRailFooterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type ChatSidebarRootProps = useRender.ComponentProps<"div">;
+declare function ChatSidebarRoot({
+  className,
+  render,
+  ...props
+}: ChatSidebarRootProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type ChatSidebarHeaderProps = useRender.ComponentProps<"div">;
+declare function ChatSidebarHeader({
+  className,
+  render,
+  ...props
+}: ChatSidebarHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type ChatSidebarBodyProps = useRender.ComponentProps<"div">;
+declare function ChatSidebarBody({
+  className,
+  render,
+  ...props
+}: ChatSidebarBodyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type ChatSidebarSectionProps = useRender.ComponentProps<"section">;
+declare function ChatSidebarSection({
+  className,
+  render,
+  ...props
+}: ChatSidebarSectionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type ChatSidebarListProps = useRender.ComponentProps<"div">;
+declare function ChatSidebarList({
+  className,
+  render,
+  ...props
+}: ChatSidebarListProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type ChatSidebarFooterProps = useRender.ComponentProps<"div">;
+declare function ChatSidebarFooter({
+  className,
+  render,
+  ...props
+}: ChatSidebarFooterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type ChatPanelStackRootProps = useRender.ComponentProps<"div"> & Pick<ChatShellVariantProps, "resizable">;
+declare function ChatPanelStackRoot({
+  resizable,
+  className,
+  render,
+  ...props
+}: ChatPanelStackRootProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type ChatPanelStackItemProps = useRender.ComponentProps<"section"> & Pick<ChatShellVariantProps, "open">;
+declare function ChatPanelStackItem({
+  open,
+  className,
+  render,
+  ...props
+}: ChatPanelStackItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type ChatPanelStackContentProps = useRender.ComponentProps<"div">;
+declare function ChatPanelStackContent({
+  className,
+  render,
+  ...props
+}: ChatPanelStackContentProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type ChatPanelResizeHandleProps = useRender.ComponentProps<"div"> & {
+  disabled?: boolean;
+  orientation?: "vertical" | "horizontal";
+};
+declare function ChatPanelResizeHandle({
+  disabled,
+  orientation,
+  className,
+  render,
+  ...props
+}: ChatPanelResizeHandleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
 //#region src/components/toggle-group/toggle-group.d.ts
 declare const toggleGroup: import("tailwind-variants/lite").TVReturnType<{
   theme: {
@@ -1432,4 +1883,4 @@ declare function MessageReactionPopoverSeparator({
   ...props
 }: MessageReactionPopoverSeparatorProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion
-export { ConversationPreviewCard, ConversationPreviewCardAction, type ConversationPreviewCardActionProps, ConversationPreviewCardAuthor, ConversationPreviewCardAuthorName, type ConversationPreviewCardAuthorNameProps, type ConversationPreviewCardAuthorProps, ConversationPreviewCardAuthorSubtitle, type ConversationPreviewCardAuthorSubtitleProps, ConversationPreviewCardChannel, type ConversationPreviewCardChannelProps, ConversationPreviewCardContent, type ConversationPreviewCardContentProps, ConversationPreviewCardFooter, type ConversationPreviewCardFooterProps, ConversationPreviewCardMeta, type ConversationPreviewCardMetaProps, ConversationPreviewCardPreview, ConversationPreviewCardPreviewAuthor, type ConversationPreviewCardPreviewAuthorProps, ConversationPreviewCardPreviewLeading, type ConversationPreviewCardPreviewLeadingProps, type ConversationPreviewCardPreviewProps, type ConversationPreviewCardProps, ConversationPreviewCardSecondaryPreview, type ConversationPreviewCardSecondaryPreviewProps, ConversationPreviewCardTimestamp, type ConversationPreviewCardTimestampProps, DescriptionAction, type DescriptionActionProps, DescriptionDetails, type DescriptionDetailsProps, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListProps, DescriptionTerm, type DescriptionTermProps, ListItem, ListItemActionGroup, type ListItemActionGroupProps, ListItemBody, type ListItemBodyProps, ListItemDescription, type ListItemDescriptionProps, ListItemIcon, type ListItemIconProps, ListItemMeta, type ListItemMetaProps, type ListItemProps, ListItemRow, type ListItemRowProps, ListItemTitle, type ListItemTitleProps, MESSAGE_QUICK_REACTIONS, MediaListItem, MediaListItemActionGroup, type MediaListItemActionGroupProps, MediaListItemAside, type MediaListItemAsideProps, MediaListItemBody, type MediaListItemBodyProps, type MediaListItemProps, MediaListItemSubtitle, type MediaListItemSubtitleProps, MediaListItemText, type MediaListItemTextProps, MediaListItemTitle, type MediaListItemTitleProps, MediaListItemVisual, type MediaListItemVisualProps, MessageAttachmentAction, type MessageAttachmentActionProps, MessageAttachmentBody, type MessageAttachmentBodyProps, MessageAttachmentCard, type MessageAttachmentCardProps, MessageAttachmentIcon, type MessageAttachmentIconProps, MessageAttachmentMeta, type MessageAttachmentMetaProps, MessageAttachmentTitle, type MessageAttachmentTitleProps, MessageImageGallery, MessageImageGalleryAction, type MessageImageGalleryActionProps, MessageImageGalleryItem, type MessageImageGalleryItemProps, MessageImageGalleryMedia, type MessageImageGalleryMediaProps, MessageImageGalleryOverlay, type MessageImageGalleryOverlayProps, type MessageImageGalleryProps, MessageImageGalleryRow, type MessageImageGalleryRowProps, MessageItem, MessageItemAttachments, type MessageItemAttachmentsProps, MessageItemAvatarSlot, type MessageItemAvatarSlotProps, MessageItemBadge, type MessageItemBadgeProps, type MessageItemBadgeTone, MessageItemBody, type MessageItemBodyProps, MessageItemContent, type MessageItemContentProps, MessageItemContinuationTime, type MessageItemContinuationTimeProps, MessageItemEmbedded, type MessageItemEmbeddedProps, MessageItemFooter, type MessageItemFooterProps, MessageItemGutter, type MessageItemGutterProps, MessageItemHeader, type MessageItemHeaderProps, MessageItemInlineStatus, type MessageItemInlineStatusProps, MessageItemMeta, type MessageItemMetaProps, MessageItemNotice, type MessageItemNoticeProps, type MessageItemProps, type MessageItemRowState, MessageItemSavedIndicator, type MessageItemSavedIndicatorProps, MessageItemSelectMark, type MessageItemSelectMarkProps, MessageItemSender, type MessageItemSenderProps, MessageItemSenderState, type MessageItemSenderStateProps, MessageItemTime, type MessageItemTimeProps, MessageItemToolbar, MessageItemToolbarButton, type MessageItemToolbarButtonProps, type MessageItemToolbarProps, MessageReactionChip, type MessageReactionChipProps, MessageReactionCount, type MessageReactionCountProps, MessageReactionGlyph, type MessageReactionGlyphProps, MessageReactionPicker, type MessageReactionPickerProps, MessageReactionPopover, MessageReactionPopoverName, type MessageReactionPopoverNameProps, MessageReactionPopoverNameText, type MessageReactionPopoverNameTextProps, MessageReactionPopoverNames, type MessageReactionPopoverNamesProps, type MessageReactionPopoverProps, MessageReactionPopoverSeparator, type MessageReactionPopoverSeparatorProps, MessageReactionQuickButton, type MessageReactionQuickButtonProps, MessageReactionQuickRow, type MessageReactionQuickRowProps, MessageVideoPreview, MessageVideoPreviewAction, type MessageVideoPreviewActionProps, MessageVideoPreviewFallback, type MessageVideoPreviewFallbackProps, MessageVideoPreviewFrame, type MessageVideoPreviewFrameProps, MessageVideoPreviewMedia, type MessageVideoPreviewMediaProps, type MessageVideoPreviewProps, PanelHeader, PanelHeaderActions, type PanelHeaderActionsProps, PanelHeaderContent, type PanelHeaderContentProps, PanelHeaderIcon, type PanelHeaderIconProps, type PanelHeaderProps, PanelHeaderSubtitle, type PanelHeaderSubtitleProps, PanelHeaderSuffix, type PanelHeaderSuffixProps, PanelHeaderTitle, type PanelHeaderTitleProps, PanelHeaderTitleRow, type PanelHeaderTitleRowProps, PanelHeaderVisual, type PanelHeaderVisualProps, PreviewShell, type PreviewShellProps, QuotedMessageCard, QuotedMessageCardAttachments, type QuotedMessageCardAttachmentsProps, QuotedMessageCardAuthor, QuotedMessageCardAuthorName, type QuotedMessageCardAuthorNameProps, type QuotedMessageCardAuthorProps, QuotedMessageCardAuthorSubtitle, type QuotedMessageCardAuthorSubtitleProps, QuotedMessageCardBody, type QuotedMessageCardBodyProps, QuotedMessageCardChannel, type QuotedMessageCardChannelProps, QuotedMessageCardContent, type QuotedMessageCardContentProps, QuotedMessageCardContentWrap, type QuotedMessageCardContentWrapProps, QuotedMessageCardHeader, type QuotedMessageCardHeaderProps, QuotedMessageCardMeta, type QuotedMessageCardMetaProps, type QuotedMessageCardProps, QuotedMessageCardSeparator, type QuotedMessageCardSeparatorProps, QuotedMessageCardTag, type QuotedMessageCardTagProps, QuotedMessageCardThread, type QuotedMessageCardThreadProps, QuotedMessageCardTimestamp, type QuotedMessageCardTimestampProps, QuotedMessageCardUnavailable, type QuotedMessageCardUnavailableProps, SectionHeader, SectionHeaderActions, type SectionHeaderActionsProps, SectionHeaderContent, type SectionHeaderContentProps, SectionHeaderCount, type SectionHeaderCountProps, SectionHeaderIcon, type SectionHeaderIconProps, type SectionHeaderProps, SectionHeaderTitle, type SectionHeaderTitleProps, SectionLabel, type SectionLabelProps, SystemMessageItem, SystemMessageItemContent, type SystemMessageItemContentProps, type SystemMessageItemProps, SystemMessageItemTime, type SystemMessageItemTimeProps, ToggleGroup, ToggleGroupCount, type ToggleGroupCountProps, ToggleGroupItem, type ToggleGroupItemProps, ToggleGroupLabel, type ToggleGroupLabelProps, type ToggleGroupProps };
+export { ChatPanelResizeHandle, type ChatPanelResizeHandleProps, ChatPanelStackContent, type ChatPanelStackContentProps, ChatPanelStackItem, type ChatPanelStackItemProps, ChatPanelStackRoot, type ChatPanelStackRootProps, ChatRailFooter, type ChatRailFooterProps, ChatRailHeader, type ChatRailHeaderProps, ChatRailItem, ChatRailItemBadge, type ChatRailItemBadgeProps, ChatRailItemIcon, type ChatRailItemIconProps, ChatRailItemIndicator, type ChatRailItemIndicatorProps, ChatRailItemLabel, type ChatRailItemLabelProps, type ChatRailItemProps, ChatRailNav, type ChatRailNavProps, ChatRailRoot, type ChatRailRootProps, ChatShellMain, type ChatShellMainProps, ChatShellMobileBar, type ChatShellMobileBarProps, ChatShellPanelStack, type ChatShellPanelStackProps, ChatShellRail, type ChatShellRailProps, ChatShellRoot, type ChatShellRootProps, ChatShellSidebar, type ChatShellSidebarProps, ChatSidebarBody, type ChatSidebarBodyProps, ChatSidebarFooter, type ChatSidebarFooterProps, ChatSidebarHeader, type ChatSidebarHeaderProps, ChatSidebarList, type ChatSidebarListProps, ChatSidebarRoot, type ChatSidebarRootProps, ChatSidebarSection, type ChatSidebarSectionProps, ConversationPreviewCard, ConversationPreviewCardAction, type ConversationPreviewCardActionProps, ConversationPreviewCardAuthor, ConversationPreviewCardAuthorName, type ConversationPreviewCardAuthorNameProps, type ConversationPreviewCardAuthorProps, ConversationPreviewCardAuthorSubtitle, type ConversationPreviewCardAuthorSubtitleProps, ConversationPreviewCardChannel, type ConversationPreviewCardChannelProps, ConversationPreviewCardContent, type ConversationPreviewCardContentProps, ConversationPreviewCardFooter, type ConversationPreviewCardFooterProps, ConversationPreviewCardMeta, type ConversationPreviewCardMetaProps, ConversationPreviewCardPreview, ConversationPreviewCardPreviewAuthor, type ConversationPreviewCardPreviewAuthorProps, ConversationPreviewCardPreviewLeading, type ConversationPreviewCardPreviewLeadingProps, type ConversationPreviewCardPreviewProps, type ConversationPreviewCardProps, ConversationPreviewCardSecondaryPreview, type ConversationPreviewCardSecondaryPreviewProps, ConversationPreviewCardTimestamp, type ConversationPreviewCardTimestampProps, DescriptionAction, type DescriptionActionProps, DescriptionDetails, type DescriptionDetailsProps, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListProps, DescriptionTerm, type DescriptionTermProps, ListItem, ListItemActionGroup, type ListItemActionGroupProps, ListItemBody, type ListItemBodyProps, ListItemDescription, type ListItemDescriptionProps, ListItemIcon, type ListItemIconProps, ListItemMeta, type ListItemMetaProps, type ListItemProps, ListItemRow, type ListItemRowProps, ListItemTitle, type ListItemTitleProps, MESSAGE_QUICK_REACTIONS, MediaListItem, MediaListItemActionGroup, type MediaListItemActionGroupProps, MediaListItemAside, type MediaListItemAsideProps, MediaListItemBody, type MediaListItemBodyProps, type MediaListItemProps, MediaListItemSubtitle, type MediaListItemSubtitleProps, MediaListItemText, type MediaListItemTextProps, MediaListItemTitle, type MediaListItemTitleProps, MediaListItemVisual, type MediaListItemVisualProps, MessageAttachmentAction, type MessageAttachmentActionProps, MessageAttachmentBody, type MessageAttachmentBodyProps, MessageAttachmentCard, type MessageAttachmentCardProps, MessageAttachmentIcon, type MessageAttachmentIconProps, MessageAttachmentMeta, type MessageAttachmentMetaProps, MessageAttachmentTitle, type MessageAttachmentTitleProps, MessageImageGallery, MessageImageGalleryAction, type MessageImageGalleryActionProps, MessageImageGalleryItem, type MessageImageGalleryItemProps, MessageImageGalleryMedia, type MessageImageGalleryMediaProps, MessageImageGalleryOverlay, type MessageImageGalleryOverlayProps, type MessageImageGalleryProps, MessageImageGalleryRow, type MessageImageGalleryRowProps, MessageItem, MessageItemAttachments, type MessageItemAttachmentsProps, MessageItemAvatarSlot, type MessageItemAvatarSlotProps, MessageItemBadge, type MessageItemBadgeProps, type MessageItemBadgeTone, MessageItemBody, type MessageItemBodyProps, MessageItemContent, type MessageItemContentProps, MessageItemContinuationTime, type MessageItemContinuationTimeProps, MessageItemEmbedded, type MessageItemEmbeddedProps, MessageItemFooter, type MessageItemFooterProps, MessageItemGutter, type MessageItemGutterProps, MessageItemHeader, type MessageItemHeaderProps, MessageItemInlineStatus, type MessageItemInlineStatusProps, MessageItemMeta, type MessageItemMetaProps, MessageItemNotice, type MessageItemNoticeProps, type MessageItemProps, type MessageItemRowState, MessageItemSavedIndicator, type MessageItemSavedIndicatorProps, MessageItemSelectMark, type MessageItemSelectMarkProps, MessageItemSender, type MessageItemSenderProps, MessageItemSenderState, type MessageItemSenderStateProps, MessageItemTime, type MessageItemTimeProps, MessageItemToolbar, MessageItemToolbarButton, type MessageItemToolbarButtonProps, type MessageItemToolbarProps, MessageReactionChip, type MessageReactionChipProps, MessageReactionCount, type MessageReactionCountProps, MessageReactionGlyph, type MessageReactionGlyphProps, MessageReactionPicker, type MessageReactionPickerProps, MessageReactionPopover, MessageReactionPopoverName, type MessageReactionPopoverNameProps, MessageReactionPopoverNameText, type MessageReactionPopoverNameTextProps, MessageReactionPopoverNames, type MessageReactionPopoverNamesProps, type MessageReactionPopoverProps, MessageReactionPopoverSeparator, type MessageReactionPopoverSeparatorProps, MessageReactionQuickButton, type MessageReactionQuickButtonProps, MessageReactionQuickRow, type MessageReactionQuickRowProps, MessageVideoPreview, MessageVideoPreviewAction, type MessageVideoPreviewActionProps, MessageVideoPreviewFallback, type MessageVideoPreviewFallbackProps, MessageVideoPreviewFrame, type MessageVideoPreviewFrameProps, MessageVideoPreviewMedia, type MessageVideoPreviewMediaProps, type MessageVideoPreviewProps, PanelHeader, PanelHeaderActions, type PanelHeaderActionsProps, PanelHeaderContent, type PanelHeaderContentProps, PanelHeaderIcon, type PanelHeaderIconProps, type PanelHeaderProps, PanelHeaderSubtitle, type PanelHeaderSubtitleProps, PanelHeaderSuffix, type PanelHeaderSuffixProps, PanelHeaderTitle, type PanelHeaderTitleProps, PanelHeaderTitleRow, type PanelHeaderTitleRowProps, PanelHeaderVisual, type PanelHeaderVisualProps, PreviewShell, type PreviewShellProps, QuotedMessageCard, QuotedMessageCardAttachments, type QuotedMessageCardAttachmentsProps, QuotedMessageCardAuthor, QuotedMessageCardAuthorName, type QuotedMessageCardAuthorNameProps, type QuotedMessageCardAuthorProps, QuotedMessageCardAuthorSubtitle, type QuotedMessageCardAuthorSubtitleProps, QuotedMessageCardBody, type QuotedMessageCardBodyProps, QuotedMessageCardChannel, type QuotedMessageCardChannelProps, QuotedMessageCardContent, type QuotedMessageCardContentProps, QuotedMessageCardContentWrap, type QuotedMessageCardContentWrapProps, QuotedMessageCardHeader, type QuotedMessageCardHeaderProps, QuotedMessageCardMeta, type QuotedMessageCardMetaProps, type QuotedMessageCardProps, QuotedMessageCardSeparator, type QuotedMessageCardSeparatorProps, QuotedMessageCardTag, type QuotedMessageCardTagProps, QuotedMessageCardThread, type QuotedMessageCardThreadProps, QuotedMessageCardTimestamp, type QuotedMessageCardTimestampProps, QuotedMessageCardUnavailable, type QuotedMessageCardUnavailableProps, SectionHeader, SectionHeaderActions, type SectionHeaderActionsProps, SectionHeaderContent, type SectionHeaderContentProps, SectionHeaderCount, type SectionHeaderCountProps, SectionHeaderIcon, type SectionHeaderIconProps, type SectionHeaderProps, SectionHeaderTitle, type SectionHeaderTitleProps, SectionLabel, type SectionLabelProps, SystemMessageItem, SystemMessageItemContent, type SystemMessageItemContentProps, type SystemMessageItemProps, SystemMessageItemTime, type SystemMessageItemTimeProps, ToggleGroup, ToggleGroupCount, type ToggleGroupCountProps, ToggleGroupItem, type ToggleGroupItemProps, ToggleGroupLabel, type ToggleGroupLabelProps, type ToggleGroupProps };

package/dist/wip.mjs

@@ -1,12 +1,460 @@
 import { cn } from "./cn.mjs";
 import { a as tv, n as useThemeFamily } from "./use-theme-Y_h1DKll.mjs";
 import { Check, MessageSquare } from "lucide-react";
+import { createContext, useContext, useMemo } from "react";
 import { Button } from "@base-ui/react/button";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
+//#region src/components/chat-shell/chat-shell.tsx
+const chatShell = tv({
+	slots: {
+		root: [
+			"flex min-h-0 w-full overflow-hidden",
+			"font-sans text-foreground",
+			"data-[presentation=mobile]:flex-col"
+		],
+		shellRail: ["hidden h-full shrink-0 select-none md:flex"],
+		shellSidebar: ["hidden min-h-0 shrink-0 flex-col md:flex"],
+		shellMain: ["flex min-h-0 min-w-0 flex-1 flex-col"],
+		shellPanelStack: ["hidden min-h-0 shrink-0 lg:flex"],
+		mobileBar: ["shrink-0 md:hidden"],
+		railRoot: ["flex h-full w-full flex-col items-center"],
+		railHeader: ["relative flex w-full shrink-0 items-center justify-center"],
+		railNav: ["flex min-h-0 flex-1 flex-col items-center gap-1.5 overflow-y-auto py-2"],
+		railFooter: ["flex w-full shrink-0 flex-col items-center justify-center gap-1.5"],
+		railItem: [
+			"relative inline-flex shrink-0 items-center justify-center",
+			"outline-none transition-colors",
+			"disabled:pointer-events-none disabled:opacity-45",
+			"[&_svg]:size-[18px] [&_svg]:shrink-0"
+		],
+		railItemIcon: ["relative inline-flex items-center justify-center"],
+		railItemLabel: ["sr-only"],
+		railItemBadge: ["absolute -right-1 -top-1 inline-flex min-w-4 items-center justify-center", "px-1 text-[10px] font-bold leading-4"],
+		railItemIndicator: ["pointer-events-none absolute -right-1 -top-1 size-2.5"],
+		sidebarRoot: ["flex h-full min-h-0 w-full flex-col"],
+		sidebarHeader: ["flex shrink-0 items-center gap-3"],
+		sidebarBody: ["min-h-0 flex-1 overflow-y-auto"],
+		sidebarSection: ["px-2"],
+		sidebarList: ["space-y-1"],
+		sidebarFooter: ["shrink-0"],
+		panelStackRoot: ["flex h-full min-h-0 w-full"],
+		panelStackItem: ["relative flex h-full min-h-0 shrink-0 flex-col"],
+		panelStackContent: ["min-h-0 flex-1 overflow-hidden"],
+		resizeHandle: ["absolute inset-y-0 left-0 z-10 w-2 -translate-x-1 cursor-col-resize select-none"]
+	},
+	variants: {
+		theme: {
+			brutal: {
+				root: "bg-brutal-cream text-black",
+				shellRail: "w-16 border-r-2 border-black bg-soft-signal",
+				shellSidebar: "w-72 border-r-2 border-black bg-brutal-cream",
+				shellMain: "bg-white",
+				shellPanelStack: "border-l-2 border-black bg-white",
+				mobileBar: "border-t-2 border-black bg-white text-black",
+				railHeader: "h-[62px] border-b-2 border-black [@media(max-height:600px)]:h-12",
+				railFooter: "min-h-[62px] pb-2 [@media(max-height:600px)]:min-h-12",
+				railItem: [
+					"size-10 border-2 border-transparent text-black",
+					"hover:border-black hover:bg-white",
+					"active:border-black active:bg-white active:shadow-xs",
+					"data-[selected=true]:border-black data-[selected=true]:bg-white data-[selected=true]:shadow-sm",
+					"[@media(max-height:600px)]:size-9"
+				],
+				railItemBadge: "border-2 border-black bg-brutal-pink text-black",
+				railItemIndicator: "border-2 border-black bg-brutal-red",
+				sidebarHeader: "min-h-[62px] border-b-2 border-black bg-brutal-cream px-3",
+				sidebarBody: "bg-brutal-cream py-2",
+				sidebarFooter: "border-t-2 border-black bg-brutal-cream p-3",
+				panelStackItem: "w-80 border-l-2 border-black bg-white first:border-l-0",
+				resizeHandle: "hover:bg-black/5"
+			},
+			elegant: {
+				root: "bg-layer-muted text-foreground",
+				shellRail: "w-16 border-r border-line-subtle bg-layer-panel",
+				shellSidebar: "w-72 border-r border-line-subtle bg-layer-panel",
+				shellMain: "bg-layer-panel",
+				shellPanelStack: "border-l border-line-subtle bg-layer-panel",
+				mobileBar: "border-t border-line-subtle bg-layer-panel text-foreground",
+				railHeader: "h-[62px] border-b border-line-subtle",
+				railFooter: "min-h-[62px] pb-2",
+				railItem: [
+					"size-10 rounded-md border border-transparent text-foreground-muted",
+					"hover:bg-layer-muted hover:text-foreground-strong",
+					"active:bg-layer-muted active:text-foreground-strong",
+					"focus-visible:ring-2 focus-visible:ring-line-focus",
+					"data-[selected=true]:border-line-subtle data-[selected=true]:bg-layer-muted data-[selected=true]:text-foreground-strong data-[selected=true]:shadow-xs"
+				],
+				railItemBadge: "rounded-full bg-accent-400 text-accent-950",
+				railItemIndicator: "rounded-full bg-danger-base",
+				sidebarHeader: "min-h-[62px] border-b border-line-subtle px-4",
+				sidebarBody: "bg-layer-panel py-2",
+				sidebarFooter: "border-t border-line-subtle p-3",
+				panelStackItem: "w-80 border-l border-line-subtle bg-layer-panel first:border-l-0",
+				resizeHandle: "hover:bg-layer-muted"
+			}
+		},
+		presentation: {
+			desktop: {},
+			mobile: {
+				shellRail: "hidden",
+				shellSidebar: "flex w-full flex-1 border-r-0 md:flex",
+				shellMain: "hidden",
+				shellPanelStack: "hidden",
+				mobileBar: "flex"
+			}
+		},
+		resizable: {
+			true: {
+				shellSidebar: "relative",
+				panelStackRoot: "relative"
+			},
+			false: {}
+		},
+		open: {
+			true: {},
+			false: { panelStackItem: "hidden" }
+		}
+	},
+	defaultVariants: {
+		presentation: "desktop",
+		resizable: false,
+		open: true
+	}
+});
+const ChatRailContext = createContext(null);
+function useChatRail() {
+	return useContext(ChatRailContext);
+}
+function ChatShellRoot({ presentation, hidden, className, render, ...props }) {
+	const { root } = chatShell({
+		theme: useThemeFamily(),
+		presentation
+	});
+	if (hidden) return null;
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-slot": "chat-shell-root",
+			"data-presentation": presentation ?? "desktop",
+			className: root({ className })
+		}, props)
+	});
+}
+function ChatShellRail({ hidden, className, render, ...props }) {
+	const { shellRail } = chatShell({ theme: useThemeFamily() });
+	if (hidden) return null;
+	return useRender({
+		defaultTagName: "aside",
+		render,
+		props: mergeProps({
+			"data-slot": "chat-shell-rail",
+			className: shellRail({ className })
+		}, props)
+	});
+}
+function ChatShellSidebar({ hidden, resizable, className, render, ...props }) {
+	const { shellSidebar } = chatShell({
+		theme: useThemeFamily(),
+		resizable
+	});
+	if (hidden) return null;
+	return useRender({
+		defaultTagName: "aside",
+		render,
+		props: mergeProps({
+			"data-slot": "chat-shell-sidebar",
+			"data-resizable": resizable ? "true" : void 0,
+			className: shellSidebar({ className })
+		}, props)
+	});
+}
+function ChatShellMain({ hidden, className, render, ...props }) {
+	const { shellMain } = chatShell({ theme: useThemeFamily() });
+	if (hidden) return null;
+	return useRender({
+		defaultTagName: "main",
+		render,
+		props: mergeProps({
+			"data-slot": "chat-shell-main",
+			className: shellMain({ className })
+		}, props)
+	});
+}
+function ChatShellPanelStack({ hidden, resizable, className, render, ...props }) {
+	const { shellPanelStack } = chatShell({
+		theme: useThemeFamily(),
+		resizable
+	});
+	if (hidden) return null;
+	return useRender({
+		defaultTagName: "aside",
+		render,
+		props: mergeProps({
+			"data-slot": "chat-shell-panel-stack",
+			"data-resizable": resizable ? "true" : void 0,
+			className: shellPanelStack({ className })
+		}, props)
+	});
+}
+function ChatShellMobileBar({ hidden, className, render, ...props }) {
+	const { mobileBar } = chatShell({ theme: useThemeFamily() });
+	if (hidden) return null;
+	return useRender({
+		defaultTagName: "nav",
+		render,
+		props: mergeProps({
+			"data-slot": "chat-shell-mobile-bar",
+			className: mobileBar({ className })
+		}, props)
+	});
+}
+function ChatRailRoot({ value, onValueChange, className, render, ...props }) {
+	const { railRoot } = chatShell();
+	const contextValue = useMemo(() => ({
+		value,
+		onValueChange
+	}), [value, onValueChange]);
+	const element = useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-slot": "chat-rail-root",
+			className: railRoot({ className })
+		}, props)
+	});
+	return /* @__PURE__ */ jsx(ChatRailContext.Provider, {
+		value: contextValue,
+		children: element
+	});
+}
+function ChatRailHeader({ className, render, ...props }) {
+	const { railHeader } = chatShell({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-slot": "chat-rail-header",
+			className: railHeader({ className })
+		}, props)
+	});
+}
+function ChatRailNav({ className, render, ...props }) {
+	const { railNav } = chatShell();
+	return useRender({
+		defaultTagName: "nav",
+		render,
+		props: mergeProps({
+			"data-slot": "chat-rail-nav",
+			className: railNav({ className })
+		}, props)
+	});
+}
+function ChatRailItem({ value, selected, disabled, onSelect, onClick, className, render, ...props }) {
+	const theme = useThemeFamily();
+	const context = useChatRail();
+	const isSelected = selected ?? (value !== void 0 && context?.value === value);
+	const { railItem } = chatShell({ theme });
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (event.defaultPrevented || disabled || value === void 0) return;
+		onSelect?.(value);
+		context?.onValueChange?.(value);
+	};
+	const defaultProps = {
+		type: "button",
+		disabled,
+		onClick: handleClick,
+		"aria-pressed": isSelected,
+		"data-slot": "chat-rail-item",
+		"data-selected": isSelected ? "true" : void 0,
+		"data-disabled": disabled ? "true" : void 0,
+		className: railItem({ className })
+	};
+	return useRender({
+		render: render ?? /* @__PURE__ */ jsx(Button, {}),
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ChatRailItemIcon({ className, render, ...props }) {
+	const { railItemIcon } = chatShell();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({
+			"data-slot": "chat-rail-item-icon",
+			className: railItemIcon({ className })
+		}, props)
+	});
+}
+function ChatRailItemLabel({ className, render, ...props }) {
+	const { railItemLabel } = chatShell();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({
+			"data-slot": "chat-rail-item-label",
+			className: railItemLabel({ className })
+		}, props)
+	});
+}
+function ChatRailItemBadge({ className, render, ...props }) {
+	const { railItemBadge } = chatShell({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({
+			"data-slot": "chat-rail-item-badge",
+			className: railItemBadge({ className })
+		}, props)
+	});
+}
+function ChatRailItemIndicator({ className, render, ...props }) {
+	const { railItemIndicator } = chatShell({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({
+			"data-slot": "chat-rail-item-indicator",
+			className: railItemIndicator({ className })
+		}, props)
+	});
+}
+function ChatRailFooter({ className, render, ...props }) {
+	const { railFooter } = chatShell({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-slot": "chat-rail-footer",
+			className: railFooter({ className })
+		}, props)
+	});
+}
+function ChatSidebarRoot({ className, render, ...props }) {
+	const { sidebarRoot } = chatShell();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-slot": "chat-sidebar-root",
+			className: sidebarRoot({ className })
+		}, props)
+	});
+}
+function ChatSidebarHeader({ className, render, ...props }) {
+	const { sidebarHeader } = chatShell({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-slot": "chat-sidebar-header",
+			className: sidebarHeader({ className })
+		}, props)
+	});
+}
+function ChatSidebarBody({ className, render, ...props }) {
+	const { sidebarBody } = chatShell({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-slot": "chat-sidebar-body",
+			className: sidebarBody({ className })
+		}, props)
+	});
+}
+function ChatSidebarSection({ className, render, ...props }) {
+	const { sidebarSection } = chatShell();
+	return useRender({
+		defaultTagName: "section",
+		render,
+		props: mergeProps({
+			"data-slot": "chat-sidebar-section",
+			className: sidebarSection({ className })
+		}, props)
+	});
+}
+function ChatSidebarList({ className, render, ...props }) {
+	const { sidebarList } = chatShell();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-slot": "chat-sidebar-list",
+			className: sidebarList({ className })
+		}, props)
+	});
+}
+function ChatSidebarFooter({ className, render, ...props }) {
+	const { sidebarFooter } = chatShell({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-slot": "chat-sidebar-footer",
+			className: sidebarFooter({ className })
+		}, props)
+	});
+}
+function ChatPanelStackRoot({ resizable, className, render, ...props }) {
+	const { panelStackRoot } = chatShell({ resizable });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-slot": "chat-panel-stack-root",
+			"data-resizable": resizable ? "true" : void 0,
+			className: panelStackRoot({ className })
+		}, props)
+	});
+}
+function ChatPanelStackItem({ open, className, render, ...props }) {
+	const { panelStackItem } = chatShell({
+		theme: useThemeFamily(),
+		open
+	});
+	return useRender({
+		defaultTagName: "section",
+		render,
+		props: mergeProps({
+			"data-slot": "chat-panel-stack-item",
+			"data-open": open === false ? "false" : "true",
+			className: panelStackItem({ className })
+		}, props)
+	});
+}
+function ChatPanelStackContent({ className, render, ...props }) {
+	const { panelStackContent } = chatShell();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-slot": "chat-panel-stack-content",
+			className: panelStackContent({ className })
+		}, props)
+	});
+}
+function ChatPanelResizeHandle({ disabled, orientation = "vertical", className, render, ...props }) {
+	const { resizeHandle } = chatShell({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			role: "separator",
+			"aria-orientation": orientation,
+			"aria-disabled": disabled,
+			"data-slot": "chat-panel-resize-handle",
+			"data-disabled": disabled ? "true" : void 0,
+			className: resizeHandle({ className })
+		}, props)
+	});
+}
+//#endregion
 //#region src/components/toggle-group/toggle-group.tsx
 const toggleGroup = tv({
 	slots: {
@@ -635,7 +1083,7 @@ function QuotedMessageCardThread({ className, render, children = "Thread", ...pr
 		render,
 		props: mergeProps({
 			className: thread({ className }),
-			children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MessageSquare, {}), children] })
+			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MessageSquare, {}), children] })
 		}, props),
 		state: { slot: "quoted-message-card-thread" }
 	});
@@ -1760,4 +2208,4 @@ function MessageReactionPopoverSeparator({ className, render, ...props }) {
 	});
 }
 //#endregion
-export { ConversationPreviewCard, ConversationPreviewCardAction, ConversationPreviewCardAuthor, ConversationPreviewCardAuthorName, ConversationPreviewCardAuthorSubtitle, ConversationPreviewCardChannel, ConversationPreviewCardContent, ConversationPreviewCardFooter, ConversationPreviewCardMeta, ConversationPreviewCardPreview, ConversationPreviewCardPreviewAuthor, ConversationPreviewCardPreviewLeading, ConversationPreviewCardSecondaryPreview, ConversationPreviewCardTimestamp, DescriptionAction, DescriptionDetails, DescriptionItem, DescriptionList, DescriptionTerm, ListItem, ListItemActionGroup, ListItemBody, ListItemDescription, ListItemIcon, ListItemMeta, ListItemRow, ListItemTitle, MESSAGE_QUICK_REACTIONS, MediaListItem, MediaListItemActionGroup, MediaListItemAside, MediaListItemBody, MediaListItemSubtitle, MediaListItemText, MediaListItemTitle, MediaListItemVisual, MessageAttachmentAction, MessageAttachmentBody, MessageAttachmentCard, MessageAttachmentIcon, MessageAttachmentMeta, MessageAttachmentTitle, MessageImageGallery, MessageImageGalleryAction, MessageImageGalleryItem, MessageImageGalleryMedia, MessageImageGalleryOverlay, MessageImageGalleryRow, MessageItem, MessageItemAttachments, MessageItemAvatarSlot, MessageItemBadge, MessageItemBody, MessageItemContent, MessageItemContinuationTime, MessageItemEmbedded, MessageItemFooter, MessageItemGutter, MessageItemHeader, MessageItemInlineStatus, MessageItemMeta, MessageItemNotice, MessageItemSavedIndicator, MessageItemSelectMark, MessageItemSender, MessageItemSenderState, MessageItemTime, MessageItemToolbar, MessageItemToolbarButton, MessageReactionChip, MessageReactionCount, MessageReactionGlyph, MessageReactionPicker, MessageReactionPopover, MessageReactionPopoverName, MessageReactionPopoverNameText, MessageReactionPopoverNames, MessageReactionPopoverSeparator, MessageReactionQuickButton, MessageReactionQuickRow, MessageVideoPreview, MessageVideoPreviewAction, MessageVideoPreviewFallback, MessageVideoPreviewFrame, MessageVideoPreviewMedia, PanelHeader, PanelHeaderActions, PanelHeaderContent, PanelHeaderIcon, PanelHeaderSubtitle, PanelHeaderSuffix, PanelHeaderTitle, PanelHeaderTitleRow, PanelHeaderVisual, PreviewShell, QuotedMessageCard, QuotedMessageCardAttachments, QuotedMessageCardAuthor, QuotedMessageCardAuthorName, QuotedMessageCardAuthorSubtitle, QuotedMessageCardBody, QuotedMessageCardChannel, QuotedMessageCardContent, QuotedMessageCardContentWrap, QuotedMessageCardHeader, QuotedMessageCardMeta, QuotedMessageCardSeparator, QuotedMessageCardTag, QuotedMessageCardThread, QuotedMessageCardTimestamp, QuotedMessageCardUnavailable, SectionHeader, SectionHeaderActions, SectionHeaderContent, SectionHeaderCount, SectionHeaderIcon, SectionHeaderTitle, SectionLabel, SystemMessageItem, SystemMessageItemContent, SystemMessageItemTime, ToggleGroup, ToggleGroupCount, ToggleGroupItem, ToggleGroupLabel };
+export { ChatPanelResizeHandle, ChatPanelStackContent, ChatPanelStackItem, ChatPanelStackRoot, ChatRailFooter, ChatRailHeader, ChatRailItem, ChatRailItemBadge, ChatRailItemIcon, ChatRailItemIndicator, ChatRailItemLabel, ChatRailNav, ChatRailRoot, ChatShellMain, ChatShellMobileBar, ChatShellPanelStack, ChatShellRail, ChatShellRoot, ChatShellSidebar, ChatSidebarBody, ChatSidebarFooter, ChatSidebarHeader, ChatSidebarList, ChatSidebarRoot, ChatSidebarSection, ConversationPreviewCard, ConversationPreviewCardAction, ConversationPreviewCardAuthor, ConversationPreviewCardAuthorName, ConversationPreviewCardAuthorSubtitle, ConversationPreviewCardChannel, ConversationPreviewCardContent, ConversationPreviewCardFooter, ConversationPreviewCardMeta, ConversationPreviewCardPreview, ConversationPreviewCardPreviewAuthor, ConversationPreviewCardPreviewLeading, ConversationPreviewCardSecondaryPreview, ConversationPreviewCardTimestamp, DescriptionAction, DescriptionDetails, DescriptionItem, DescriptionList, DescriptionTerm, ListItem, ListItemActionGroup, ListItemBody, ListItemDescription, ListItemIcon, ListItemMeta, ListItemRow, ListItemTitle, MESSAGE_QUICK_REACTIONS, MediaListItem, MediaListItemActionGroup, MediaListItemAside, MediaListItemBody, MediaListItemSubtitle, MediaListItemText, MediaListItemTitle, MediaListItemVisual, MessageAttachmentAction, MessageAttachmentBody, MessageAttachmentCard, MessageAttachmentIcon, MessageAttachmentMeta, MessageAttachmentTitle, MessageImageGallery, MessageImageGalleryAction, MessageImageGalleryItem, MessageImageGalleryMedia, MessageImageGalleryOverlay, MessageImageGalleryRow, MessageItem, MessageItemAttachments, MessageItemAvatarSlot, MessageItemBadge, MessageItemBody, MessageItemContent, MessageItemContinuationTime, MessageItemEmbedded, MessageItemFooter, MessageItemGutter, MessageItemHeader, MessageItemInlineStatus, MessageItemMeta, MessageItemNotice, MessageItemSavedIndicator, MessageItemSelectMark, MessageItemSender, MessageItemSenderState, MessageItemTime, MessageItemToolbar, MessageItemToolbarButton, MessageReactionChip, MessageReactionCount, MessageReactionGlyph, MessageReactionPicker, MessageReactionPopover, MessageReactionPopoverName, MessageReactionPopoverNameText, MessageReactionPopoverNames, MessageReactionPopoverSeparator, MessageReactionQuickButton, MessageReactionQuickRow, MessageVideoPreview, MessageVideoPreviewAction, MessageVideoPreviewFallback, MessageVideoPreviewFrame, MessageVideoPreviewMedia, PanelHeader, PanelHeaderActions, PanelHeaderContent, PanelHeaderIcon, PanelHeaderSubtitle, PanelHeaderSuffix, PanelHeaderTitle, PanelHeaderTitleRow, PanelHeaderVisual, PreviewShell, QuotedMessageCard, QuotedMessageCardAttachments, QuotedMessageCardAuthor, QuotedMessageCardAuthorName, QuotedMessageCardAuthorSubtitle, QuotedMessageCardBody, QuotedMessageCardChannel, QuotedMessageCardContent, QuotedMessageCardContentWrap, QuotedMessageCardHeader, QuotedMessageCardMeta, QuotedMessageCardSeparator, QuotedMessageCardTag, QuotedMessageCardThread, QuotedMessageCardTimestamp, QuotedMessageCardUnavailable, SectionHeader, SectionHeaderActions, SectionHeaderContent, SectionHeaderCount, SectionHeaderIcon, SectionHeaderTitle, SectionLabel, SystemMessageItem, SystemMessageItemContent, SystemMessageItemTime, ToggleGroup, ToggleGroupCount, ToggleGroupItem, ToggleGroupLabel };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "raft-ui",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "description": "React UI components for Raft.",
   "license": "MIT",
   "repository": {
@@ -26,6 +26,7 @@
       "types": "./dist/wip.d.mts",
       "default": "./dist/wip.mjs"
     },
+    "./fonts.css": "./dist/fonts.css",
     "./styles.css": "./dist/styles.css",
     "./package.json": "./package.json"
   },