@vvedantb/ui 0.5.3 → 0.6.0

package/shell/src/SidebarPanel.tsx

@@ -1,19 +1,19 @@
-import type { ReactNode } from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import { IconX } from "@tabler/icons-react";
-import { Button } from "../../src/ui/button";
+import { Button, type ButtonProps } from "../../src/ui/button";
 import { cn } from "../../src/utils/cn";
-import { panelCloseButtonClass } from "./app-shell-classes";
-import { SidebarHeader } from "./SidebarHeader";
+import { panelCloseButtonClass, sidebarHeaderRowClass } from "./app-shell-classes";
+import { useOptionalSidebar } from "./SidebarChrome";
 
 export type SidebarPanelProps = {
   title: string;
-  /** Rendered in the header, before the close button. */
+  /** Legacy (still supported): rendered in the header, before the close button. Compose `Sidebar.PanelActions`. */
   headerTrailing?: ReactNode;
-  /** When set, a close button follows `headerTrailing`. Pass it on the mobile drawer only. */
+  /** Legacy (still supported): when set, a close button follows `headerTrailing`. Pass it on the mobile drawer only. */
   onClose?: () => void;
-  /** Close button label. Default `"Close navigation"`. */
+  /** Legacy (still supported): close button label. Default `"Close navigation"`. */
   closeLabel?: string;
-  /** Merged onto the close button. */
+  /** Legacy (still supported): merged onto the close button. */
   closeButtonClassName?: string;
   /** Desktop: hides the panel (`md:hidden`) and leaves the rail. */
   collapsed?: boolean;
@@ -22,50 +22,112 @@ export type SidebarPanelProps = {
   children?: ReactNode;
 };
 
-/** Sidebar panel column beside the rail: a `SidebarHeader` and the app's body. */
+/** Sidebar panel column beside the rail: a header and the app's body. Composed from `Sidebar.Panel` parts. */
 export function SidebarPanel({
   title,
   headerTrailing,
   onClose,
-  closeLabel = "Close navigation",
+  closeLabel,
   closeButtonClassName,
   collapsed = false,
   className,
   children,
 }: SidebarPanelProps) {
-  const trailing =
-    headerTrailing || onClose ? (
-      <>
-        {headerTrailing}
-        {onClose ? (
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon-sm"
-            onClick={onClose}
-            aria-label={closeLabel}
-            className={cn(panelCloseButtonClass, closeButtonClassName)}
-          >
-            <IconX className="h-4 w-4" />
-          </Button>
+  return (
+    <Panel collapsed={collapsed} panelHidden={false} className={className}>
+      <PanelHeader>
+        <PanelTitle>{title}</PanelTitle>
+        {headerTrailing || onClose ? (
+          <PanelActions>
+            {headerTrailing}
+            {onClose ? (
+              <PanelClose onClick={onClose} label={closeLabel} className={closeButtonClassName} />
+            ) : null}
+          </PanelActions>
         ) : null}
-      </>
-    ) : null;
+      </PanelHeader>
+      {children}
+    </Panel>
+  );
+}
 
+export type SidebarPanelRootProps = ComponentPropsWithoutRef<"div"> & {
+  /** Desktop: hides the panel (`md:hidden`). Default the `Sidebar.Root` `collapsed`, else `false`. */
+  collapsed?: boolean;
+  /** Renders nothing. Default the `Sidebar.Root` `panelHidden`, else `false`. */
+  panelHidden?: boolean;
+};
+
+/** Panel column `<div>` beside the rail. */
+export function Panel({ collapsed, panelHidden, className, ...props }: SidebarPanelRootProps) {
+  const sidebar = useOptionalSidebar();
+  if (panelHidden ?? sidebar?.panelHidden ?? false) return null;
   return (
     <div
+      {...props}
       className={cn(
         // No border-r: the main content card floats beside this panel, so a
         // right edge line reads as a hard divider.
         "relative flex h-full min-w-0 flex-1 flex-col overflow-hidden bg-background",
-        collapsed && "md:hidden",
+        (collapsed ?? sidebar?.collapsed ?? false) && "md:hidden",
         className,
       )}
-    >
-      <div className="px-2 pt-3">
-        <SidebarHeader title={title} trailing={trailing} />
-      </div>
-      {children}
+    />
+  );
+}
+
+export type SidebarPanelHeaderProps = ComponentPropsWithoutRef<"div">;
+
+/** Padded header row of the panel. Holds `PanelTitle` and `PanelActions`. `className` goes to the outer padding `<div>`. */
+export function PanelHeader({ className, children, ...props }: SidebarPanelHeaderProps) {
+  return (
+    <div {...props} className={cn("px-2 pt-3", className)}>
+      <div className={sidebarHeaderRowClass}>{children}</div>
     </div>
   );
 }
+
+export type SidebarPanelTitleProps = ComponentPropsWithoutRef<"h2">;
+
+/** Panel title `<h2>`, truncated. */
+export function PanelTitle({ className, ...props }: SidebarPanelTitleProps) {
+  return (
+    <h2
+      {...props}
+      className={cn(
+        "min-w-0 flex-1 truncate text-left text-base font-semibold leading-none tracking-tight text-foreground",
+        className,
+      )}
+    />
+  );
+}
+
+export type SidebarPanelActionsProps = ComponentPropsWithoutRef<"div">;
+
+/** Trailing actions in the panel header. */
+export function PanelActions({ className, ...props }: SidebarPanelActionsProps) {
+  return <div {...props} className={cn("flex items-center justify-end gap-0.5", className)} />;
+}
+
+export type SidebarPanelCloseProps = ButtonProps & {
+  /** `aria-label`. Default `"Close navigation"`. */
+  label?: string;
+};
+
+/** Ghost close button. Without `onClick` it closes the `Sidebar.Root` drawer. */
+export function PanelClose({ label = "Close navigation", onClick, className, children, ...props }: SidebarPanelCloseProps) {
+  const sidebar = useOptionalSidebar();
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon-sm"
+      {...props}
+      onClick={onClick ?? (() => sidebar?.onMobileOpenChange(false))}
+      aria-label={label}
+      className={cn(panelCloseButtonClass, className)}
+    >
+      {children ?? <IconX className="h-4 w-4" />}
+    </Button>
+  );
+}

package/shell/src/SidebarRail.tsx

@@ -28,7 +28,13 @@ export type SidebarRailProps = Omit<ComponentPropsWithoutRef<"div">, "children"
   footerClassName?: string;
 };
 
-/** Icon rail column. Width reads `--app-shell-rail-width`; override with `className`. Other props go to the root `<div>`. */
+/**
+ * Icon rail column. Width reads `--app-shell-rail-width`; override with `className`. Other props go to the root `<div>`.
+ *
+ * Legacy (still supported): the `top`, `footer`, `bodyAsChild`, `tabs` and
+ * `*ClassName` props. Compose `Sidebar.Rail`, `.RailHeader`, `.RailBody` and
+ * `.RailFooter` instead.
+ */
 export function SidebarRail({
   top,
   children,
@@ -42,11 +48,24 @@ export function SidebarRail({
   footerClassName,
   ...props
 }: SidebarRailProps) {
-  const Body = bodyAsChild ? Slot : "div";
-  const bodyClass = cn(
-    "flex w-full flex-1 flex-col items-center gap-1.5 overflow-y-auto py-2",
-    bodyClassName,
+  return (
+    <Rail {...props} showDivider={showDivider} className={className}>
+      {top == null ? null : <RailHeader className={topClassName}>{top}</RailHeader>}
+      <RailBody asChild={bodyAsChild} tabs={tabs} className={bodyClassName}>
+        {children}
+      </RailBody>
+      {footer == null ? null : <RailFooter className={footerClassName}>{footer}</RailFooter>}
+    </Rail>
   );
+}
+
+export type SidebarRailRootProps = ComponentPropsWithoutRef<"div"> & {
+  /** Adds a right border between the rail and the panel. Default `false`. */
+  showDivider?: boolean;
+};
+
+/** Rail column `<div>`. Width reads `--app-shell-rail-width`. */
+export function Rail({ showDivider = false, className, ...props }: SidebarRailRootProps) {
   return (
     <div
       {...props}
@@ -55,29 +74,43 @@ export function SidebarRail({
         showDivider && "border-r border-separator",
         className,
       )}
-    >
-      {top == null ? null : (
-        <div className={cn("flex w-full flex-col items-center gap-1.5 px-0 pt-3", topClassName)}>
-          {top}
-        </div>
-      )}
-      {tabs ? (
-        <TabsPrimitive.List asChild={bodyAsChild} className={bodyClass}>
-          {children}
-        </TabsPrimitive.List>
-      ) : (
-        <Body className={bodyClass}>{children}</Body>
-      )}
-      {footer == null ? null : (
-        <div className={cn("flex w-full flex-col items-center gap-1.5 py-3", footerClassName)}>
-          {footer}
-        </div>
-      )}
-    </div>
+    />
   );
 }
 
-export type RailTileProps = Omit<ComponentPropsWithoutRef<"button">, "children"> & {
+export type SidebarRailHeaderProps = ComponentPropsWithoutRef<"div">;
+
+/** Block pinned at the top of the rail, above the scroll body. */
+export function RailHeader({ className, ...props }: SidebarRailHeaderProps) {
+  return <div {...props} className={cn("flex w-full flex-col items-center gap-1.5 px-0 pt-3", className)} />;
+}
+
+export type SidebarRailBodyProps = ComponentPropsWithoutRef<"div"> & {
+  /** Render the body as its single child element (for example a `<nav>`), with the body classes merged. */
+  asChild?: boolean;
+  /**
+   * Render a Radix tabs list (arrow-key roving focus). Use it inside a Tabs
+   * root with `orientation="vertical"` and give each item a `tabValue`.
+   */
+  tabs?: boolean;
+};
+
+/** Scroll body of the rail. */
+export function RailBody({ asChild = false, tabs = false, className, ...props }: SidebarRailBodyProps) {
+  const bodyClass = cn("flex w-full flex-1 flex-col items-center gap-1.5 overflow-y-auto py-2", className);
+  if (tabs) return <TabsPrimitive.List {...props} asChild={asChild} className={bodyClass} />;
+  const Body = asChild ? Slot : "div";
+  return <Body {...props} className={bodyClass} />;
+}
+
+export type SidebarRailFooterProps = ComponentPropsWithoutRef<"div">;
+
+/** Block pinned at the bottom of the rail. */
+export function RailFooter({ className, ...props }: SidebarRailFooterProps) {
+  return <div {...props} className={cn("flex w-full flex-col items-center gap-1.5 py-3", className)} />;
+}
+
+export type SidebarRailItemProps = Omit<ComponentPropsWithoutRef<"button">, "children"> & {
   /** `aria-label`, and the tooltip unless `tooltip` is set. */
   label: string;
   /** Active state. With `asChild`, also sets `aria-current="page"`. */
@@ -99,7 +132,7 @@ export type RailTileProps = Omit<ComponentPropsWithoutRef<"button">, "children">
 };
 
 /** Rail tile with a right-side tooltip. Renders a native `<button>`, its child with `asChild`, or a tabs trigger with `tabValue`. */
-export function RailTile({
+export function RailItem({
   label,
   active = false,
   tooltip,
@@ -110,7 +143,7 @@ export function RailTile({
   className,
   children,
   ...props
-}: RailTileProps) {
+}: SidebarRailItemProps) {
   return (
     <SidebarIconTooltip label={tooltip ?? label} enabled={showTooltip}>
       {tabValue !== undefined ? (
@@ -148,8 +181,21 @@ export function RailTile({
   );
 }
 
+export type RailTileProps = SidebarRailItemProps;
+
+/** Legacy name of `Sidebar.RailItem`. */
+export const RailTile = RailItem;
+
+export type SidebarRailSeparatorProps = ComponentPropsWithoutRef<"div">;
+
+/** Short horizontal rule between rail items. */
+export function RailSeparator({ className, ...props }: SidebarRailSeparatorProps) {
+  return <div {...props} className={cn("h-px w-8 bg-separator", className)} aria-hidden />;
+}
+
 export type RailDividerProps = { className?: string };
 
+/** Legacy name of `Sidebar.RailSeparator`. */
 export function RailDivider({ className }: RailDividerProps) {
-  return <div className={cn("h-px w-8 bg-separator", className)} aria-hidden />;
+  return <RailSeparator className={className} />;
 }

package/shell/src/SignOutDialog.tsx

@@ -1,13 +1,5 @@
-import { IconAlertTriangle, IconLoader2 } from "@tabler/icons-react";
-import { Button } from "../../src/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "../../src/ui/dialog";
+import { IconAlertTriangle } from "@tabler/icons-react";
+import { ConfirmDialog } from "../../src/ui/confirm-dialog";
 import { cn } from "../../src/utils/cn";
 import { signOutCancelClass, signOutDescriptionClass } from "./app-shell-classes";
 
@@ -22,13 +14,13 @@ export type SignOutDialogProps = {
   description?: string;
   /** Merged onto the dialog content after `sm:max-w-sm`. */
   contentClassName?: string;
-  /** Dialog title and confirm button label. Default `"Sign out"`. */
+  /** Legacy (still supported): dialog title and confirm button label. Default `"Sign out"`. */
   title?: string;
-  /** Default `"Sign out of your account?"`. */
+  /** Legacy (still supported): default `"Sign out of your account?"`. */
   question?: string;
 };
 
-/** Sign-out confirmation. The app owns the state and the sign-out call. */
+/** Sign-out confirmation. The app owns the state and the sign-out call. Composed from `ConfirmDialog` parts. */
 export function SignOutDialog({
   open,
   onOpenChange,
@@ -40,21 +32,15 @@ export function SignOutDialog({
   question = "Sign out of your account?",
 }: SignOutDialogProps) {
   return (
-    <Dialog
-      open={open}
-      onOpenChange={(next) => {
-        if (!next && pending) return;
-        onOpenChange(next);
-      }}
-    >
-      <DialogContent className={cn("sm:max-w-sm", contentClassName)}>
-        <DialogHeader>
-          <DialogTitle className="text-foreground">{title}</DialogTitle>
-          <DialogDescription className="sr-only">
+    <ConfirmDialog.Root open={open} onOpenChange={onOpenChange} alert={false} pending={pending}>
+      <ConfirmDialog.Content className={cn("sm:max-w-sm", contentClassName)}>
+        <ConfirmDialog.Header>
+          <ConfirmDialog.Title className="text-foreground">{title}</ConfirmDialog.Title>
+          <ConfirmDialog.Description className="sr-only">
             Confirm signing out of your account
-          </DialogDescription>
-        </DialogHeader>
-        <div className="flex items-start gap-3 py-4">
+          </ConfirmDialog.Description>
+        </ConfirmDialog.Header>
+        <ConfirmDialog.Body className="flex items-start gap-3 py-4">
           <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-danger/10">
             <IconAlertTriangle size={20} className="text-danger" />
           </div>
@@ -62,32 +48,19 @@ export function SignOutDialog({
             <p className="text-foreground">{question}</p>
             {description ? <p className={signOutDescriptionClass}>{description}</p> : null}
           </div>
-        </div>
-        <DialogFooter>
-          <Button
-            variant="ghost"
-            onClick={() => onOpenChange(false)}
-            disabled={pending}
-            className={signOutCancelClass}
-          >
-            Cancel
-          </Button>
-          <Button
+        </ConfirmDialog.Body>
+        <ConfirmDialog.Footer>
+          <ConfirmDialog.Cancel className={signOutCancelClass} />
+          <ConfirmDialog.Action
             onClick={() => void onConfirm()}
-            disabled={pending}
+            pendingLabel="Signing out..."
+            spinnerSize={16}
             className="bg-danger text-danger-foreground"
           >
-            {pending ? (
-              <>
-                <IconLoader2 size={16} className="animate-spin" />
-                Signing out...
-              </>
-            ) : (
-              title
-            )}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+            {title}
+          </ConfirmDialog.Action>
+        </ConfirmDialog.Footer>
+      </ConfirmDialog.Content>
+    </ConfirmDialog.Root>
   );
 }

package/shell/src/app-shell-classes.ts

@@ -33,6 +33,9 @@ export function sidebarNavRowClass(isIconOnly: boolean): string {
   return cn(isIconOnly ? "justify-center px-0 py-1.5" : "gap-3 px-3 py-1.5");
 }
 
+/** Sidebar header row: the panel title and its trailing actions. */
+export const sidebarHeaderRowClass = "flex h-11 items-center gap-1 pl-3 pr-1";
+
 export const mobileMenuButtonClass = "-ml-1 h-11 w-11 shrink-0 rounded-lg text-muted hover:bg-surface-tertiary/50 hover:text-foreground"; // check-tokens-allow: text-muted
 
 export const panelCloseButtonClass = "rounded-lg text-muted hover:bg-surface-tertiary/50 hover:text-foreground"; // check-tokens-allow: text-muted
@@ -42,3 +45,6 @@ export const accountEmailClass = "block truncate text-xs font-normal text-muted"
 export const signOutDescriptionClass = "mt-1 text-sm text-muted"; // check-tokens-allow: text-muted
 
 export const signOutCancelClass = "text-muted"; // check-tokens-allow: text-muted
+
+/** Label of the type-to-confirm field (`ConfirmDialog.Field`). */
+export const confirmFieldLabelClass = "text-sm text-muted"; // check-tokens-allow: text-muted

package/shell/src/index.ts

@@ -11,9 +11,17 @@ export type {
   SessionsHoverCardSurface,
 } from "./SessionsHoverCard.js";
 export { AppShell } from "./AppShell.js";
-export type { AppShellProps } from "./AppShell.js";
+export type {
+  AppShellContentProps,
+  AppShellMainProps,
+  AppShellProps,
+  AppShellRootProps,
+  AppShellSkipLinkProps,
+} from "./AppShell.js";
 export { AppSidebar } from "./AppSidebar.js";
 export type { AppSidebarProps } from "./AppSidebar.js";
+// Composable sidebar parts (`Sidebar.Root`, `Sidebar.Rail`, ...) and their prop types.
+export * from "./Sidebar.js";
 export { SidebarRail, RailTile, RailDivider } from "./SidebarRail.js";
 export type { SidebarRailProps, RailTileProps, RailDividerProps } from "./SidebarRail.js";
 export { SidebarResizeHandle, useAppShellResize } from "./SidebarResize.js";

package/src/composer/input-area/InputAreaEditor.tsx

@@ -30,16 +30,33 @@ const CHIPS_HOST_CLASS = "contents empty:hidden [&>*]:mr-1.5";
 
 const ZERO_WIDTH_SPACE = "\u200b";
 
-/** Reads the plain text of the editor. Skips the chips host. */
+/**
+ * A value of "\n" is an empty draft: Shift+Enter on an empty editor, or a
+ * stray line holder that apps stored before 0.5.4. Mirrors `isComposerCompact`.
+ */
+function isEmptyDraft(value: string): boolean {
+  return value === "" || value === "\n";
+}
+
+/**
+ * Reads the plain text of the editor. Skips the chips host. Under `pre-wrap` a
+ * single trailing "\n" renders no line, so Chromium ends the text with an extra
+ * "\n" that only holds the last line open. That holder, or a trailing `<br>`,
+ * is dropped once.
+ */
 export function extractEditorText(root: HTMLElement): string {
   let out = "";
+  let heldByBr = false;
   const walk = (node: Node, isRoot: boolean) => {
     node.childNodes.forEach((child, index) => {
       if (child instanceof HTMLElement) {
         if (child.hasAttribute(CHIPS_HOST_ATTR)) return;
         if (child.tagName === "BR") {
           // A trailing <br> only holds the line open.
-          if (isRoot && index === node.childNodes.length - 1) return;
+          if (isRoot && index === node.childNodes.length - 1) {
+            heldByBr = true;
+            return;
+          }
           out += "\n";
           return;
         }
@@ -57,7 +74,29 @@ export function extractEditorText(root: HTMLElement): string {
     });
   };
   walk(root, true);
-  return out;
+  return !heldByBr && out.endsWith("\n") ? out.slice(0, -1) : out;
+}
+
+/** The DOM text for a value: a trailing "\n" gets its line holder. */
+function editorTextFor(value: string): string {
+  return value.endsWith("\n") ? `${value}\n` : value;
+}
+
+/** Every editor node except the chips host: the anchor, text and line breaks. */
+function textNodes(root: HTMLElement): ChildNode[] {
+  return Array.from(root.childNodes).filter(
+    (child) => !(child instanceof HTMLElement && child.hasAttribute(CHIPS_HOST_ATTR)),
+  );
+}
+
+/**
+ * True when the DOM shows `shown`. An empty draft must be the bare U+200B
+ * anchor: a stray "\n" or `<br>` reads as "" but pushes the placeholder down.
+ */
+function editorShows(root: HTMLElement, shown: string): boolean {
+  if (shown !== "") return extractEditorText(root) === shown;
+  const [only, ...rest] = textNodes(root);
+  return rest.length === 0 && only instanceof Text && only.data === ZERO_WIDTH_SPACE;
 }
 
 function chipsHost(root: HTMLElement): HTMLElement | null {
@@ -96,11 +135,14 @@ function setSelection(
   window.getSelection()?.setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
 }
 
-/** End of the text: the last text node, or the end of the editor after a line break. */
+/**
+ * End of the text: the last text node before its trailing line holder, or the
+ * end of the editor after a line break.
+ */
 function textEnd(root: HTMLElement): [Node, number] {
   ensureCaretAnchor(root);
   const last = root.lastChild;
-  if (last instanceof Text) return [last, last.length];
+  if (last instanceof Text) return [last, last.data.endsWith("\n") ? last.length - 1 : last.length];
   return [root, root.childNodes.length];
 }
 
@@ -276,13 +318,10 @@ export function InputAreaEditor({
   useLayoutEffect(() => {
     const root = rootRef.current;
     if (!root || composingRef.current) return;
-    if (extractEditorText(root) !== value) {
-      Array.from(root.childNodes).forEach((child) => {
-        if (!(child instanceof HTMLElement && child.hasAttribute(CHIPS_HOST_ATTR))) {
-          root.removeChild(child);
-        }
-      });
-      root.appendChild(document.createTextNode(ZERO_WIDTH_SPACE + value));
+    const shown = isEmptyDraft(value) ? "" : value;
+    if (!editorShows(root, shown)) {
+      textNodes(root).forEach((child) => root.removeChild(child));
+      root.appendChild(document.createTextNode(ZERO_WIDTH_SPACE + editorTextFor(shown)));
       if (document.activeElement === root) placeCaretAtEnd(root);
     }
     ensureCaretAnchor(root);
@@ -361,7 +400,7 @@ export function InputAreaEditor({
         aria-multiline
         {...ariaProps}
         role="combobox"
-        data-empty={value === "" ? "" : undefined}
+        data-empty={isEmptyDraft(value) ? "" : undefined}
         data-placeholder={placeholder}
         data-suggestion={suggestion || undefined}
         className={cn(INLINE_EDITOR_CLASS, className)}

package/src/index.ts

@@ -123,9 +123,17 @@ export type {
 // App shell: sidebar and main page layout. Widths come from the
 // `--app-shell-*` CSS variables that `AppShell` sets.
 export { AppShell } from "../shell/src/AppShell";
-export type { AppShellProps } from "../shell/src/AppShell";
+export type {
+  AppShellContentProps,
+  AppShellMainProps,
+  AppShellProps,
+  AppShellRootProps,
+  AppShellSkipLinkProps,
+} from "../shell/src/AppShell";
 export { AppSidebar } from "../shell/src/AppSidebar";
 export type { AppSidebarProps } from "../shell/src/AppSidebar";
+// Composable sidebar parts (`Sidebar.Root`, `Sidebar.Rail`, ...) and their prop types.
+export * from "../shell/src/Sidebar";
 export { SidebarRail, RailTile, RailDivider } from "../shell/src/SidebarRail";
 export type { SidebarRailProps, RailTileProps, RailDividerProps } from "../shell/src/SidebarRail";
 export { SidebarResizeHandle, useAppShellResize } from "../shell/src/SidebarResize";