@vvedantb/ui 0.5.0 → 0.5.2

package/README.md

@@ -208,11 +208,13 @@ import { ConfirmDialog, SlideOverPanel, ToolbarSearchInput } from "@vvedantb/ui"
 <ToolbarSearchInput value={query} onChange={setQuery} />
 
 <ConfirmDialog size="sm" open={open} onOpenChange={setOpen} title="Delete item?" variant="destructive" onConfirm={remove} />
+
+<ConfirmDialog size="md" open={open} onOpenChange={setOpen} title="Delete item?" description="This cannot be undone." confirmLabel="Delete" variant="destructive" onConfirm={remove} />
 ```
 
 - `SlideOverPanel`: a right-side panel, absolutely positioned inside its nearest positioned parent. It is not a portal or dialog. It slides in with a spring and is hidden below `md`. Only the close button closes it (no Escape, no outside click). `width` is `"w-96"` (default) or `"w-80"`. `closeLabel` defaults to `"Close panel"`. `className` merges last.
 - `ToolbarSearchInput`: a compact `h-8` search field for toolbars, with a search icon and a clear button. The clear button stays mounted and is hidden while the value is blank. Clearing calls `onChange("")` and does not move focus. Defaults: `placeholder="Search..."`, `label="Search"` (the `aria-label`), `clearLabel="Clear search"`. The ref goes to the `<input>`.
-- `ConfirmDialog` `size`: `"default"` keeps the alert dialog. `"sm"` renders a compact, dismissible dialog (outside click, Escape and the close button close it) with small Cancel and confirm buttons. Cancel calls `onCancel` and then `onOpenChange(false)`. Confirm calls `onConfirm` only, so the caller closes it.
+- `ConfirmDialog` `size`: `"default"` keeps the alert dialog. `"sm"` renders a compact, dismissible dialog (outside click, Escape and the close button close it) with small Cancel and confirm buttons. Cancel calls `onCancel` and then `onOpenChange(false)`. Confirm calls `onConfirm` only, so the caller closes it. `"md"` (0.5.2) is dismissible like `"sm"`, with the title in a header (`pb-4`), the description in its own section (`py-6`) and a footer (`pt-4`) with default-size buttons. It has the same Cancel and confirm behaviour as `"sm"`.
 
 ## Buttons, menus and fields (0.4.4)
 
@@ -248,7 +250,7 @@ import {
 - `SelectField`: a labelled single select built from `Select`. Children are `SelectItem`s. An empty `value` shows the placeholder. `id` goes to the trigger and the label points at it. `className` merges onto the trigger.
 - Motion: `springTransition`, `springFastTransition` and `fadeUpSpring` presets. `FadePresence` takes optional `variants` (`hidden`, `show`, `exit`); omitted, it keeps its opacity fade. `PanelTransition` wraps children in React `ViewTransition` with `default="none"` and `enter`/`exit` classes (`vt-panel-in`, `vt-panel-out` by default). It needs a React build that exports `ViewTransition`, and the app supplies the `::view-transition-*` CSS.
 
-## App shell (0.5.0)
+## App shell (0.5.0 to 0.5.2)
 
 A sidebar and main page layout, extracted from existing app markup. It is router-free: pass your own links (with `asChild`), state and media query result. Tooltips need a `TooltipProvider` above the shell.
 
@@ -289,15 +291,95 @@ import {
 
 - Widths: `AppShell` sets `--app-shell-rail-width` (default `4rem`), `--app-shell-sidebar-width` (rail plus panel, default `20rem`) and `--app-shell-mobile-header-height` (default `calc(3.5rem + env(safe-area-inset-top, 0px))`) as inline style. Change them with `railWidth`, `sidebarWidth` and `mobileHeaderHeight`. The other pieces read these variables. Outside `AppShell`, set the variables yourself or pass a width class with `className`.
 - `AppShell`: `sidebar`, `children`, `panelHidden` (main offsets by the rail width instead of the sidebar width), `skipLinkLabel` (`"Skip to main content"`), `mainId` (`"main-content"`), `className`, `mainClassName`, `contentClassName`.
-- `AppSidebar`: `rail`, `panel` (not rendered while `panelHidden`), `collapsed`, `panelHidden`, `isDesktop`, `mobileOpen`, `onMobileOpenChange`, `id` (default from `useId`), `asideProps` (`data-*` attributes for the `<aside>`), `className`, `mobileTitle`, `mobileMenuIcon` (`(open) => node`, default a menu icon), `mobileMenuLabel` (`"Open navigation menu"`), `closeLabel` (`"Close navigation"`). Swipe left or Escape closes the drawer. The drawer is `inert` while closed on mobile, and closes when `isDesktop` becomes `true`. Close it on route change in the app.
+- `AppSidebar`: `rail`, `panel` (not rendered while `panelHidden`), `collapsed`, `panelHidden`, `isDesktop`, `mobileOpen`, `onMobileOpenChange`, `id` (default from `useId`), `asideProps` (`data-*` attributes for the `<aside>`), `className`, `mobileTitle`, `mobileHeaderActions` (0.5.2; trailing actions such as icon buttons, in place of the end spacer), `mobileMenuIcon` (`(open) => node`, default a menu icon), `mobileMenuLabel` (`"Open navigation menu"`), `closeLabel` (`"Close navigation"`). Swipe left or Escape closes the drawer. The drawer is `inert` while closed on mobile, and closes when `isDesktop` becomes `true`. Close it on route change in the app.
 - `SidebarRail`: `top`, `children` (scroll body), `footer`, `showDivider`, `bodyAsChild` (the single child, for example a tabs list, becomes the body), `className`, `topClassName`, `bodyClassName`, `footerClassName`. Other HTML attributes (`id`, `data-*`, `aria-*`) go to the root `<div>`. The top and footer wrappers render only when their slot is set.
 - `RailTile`: `label` (`aria-label` and tooltip), `active`, `tooltip`, `showTooltip` (default `true`), `badge` (inside the tile, after the children; style it with `railBadgeClass`), `asChild`, `className`. Without `asChild` it is a ghost `Button`; other props go to it. With `asChild` the child (for example a router link) gets the tile classes and `aria-current="page"` when active.
 - `RailDivider`, `SidebarIconTooltip` (`label`, `enabled`, `side` `"right"`, `sideOffset` 8).
 - `SidebarPanel`: `title`, `headerTrailing`, `onClose` (adds the close button; pass it on the mobile drawer only), `closeLabel`, `closeButtonClassName`, `collapsed` (`md:hidden`), `className`, `children`.
-- `SidebarAccountMenu`: `name`, `email` (two-line label when set), `stackedLabel` (two-line layout even without `email`, default `false`), `imageUrl` (initials without it), `align` (`"center"`), `side` (`"right"`), `sideOffset` (8), `collisionPadding`, `contentClassName`, `children` (menu items). `SidebarAccountMenuPlaceholder` is the tile-sized loading box.
+- `SidebarAccountMenu`: `name`, `email` (two-line label when set), `stackedLabel` (two-line layout even without `email`, default `false`), `imageUrl` (initials without it), `align` (`"center"`), `side` (`"right"`), `sideOffset` (8), `collisionPadding`, `contentClassName`, `children` (menu items). 0.5.2 adds `badge` (unread dot beside the trigger, in a `relative` wrapper around the menu, so the trigger's dimming and press scale skip it: `true` shows it, `false` fades it out, omitted renders no wrapper and no dot), `triggerProps` (spread onto the trigger `Button` after the defaults; `className` merges last) and `contentProps` (spread onto `DropdownMenuContent`, for example `fitViewport` or `aria-label`; no `className`, use `contentClassName`). `SidebarAccountMenuPlaceholder` is the tile-sized loading box.
 - `SignOutDialog`: `open`, `onOpenChange` (not called with `false` while `pending`), `pending`, `onConfirm`, `description`, `contentClassName`, `title` (`"Sign out"`), `question` (`"Sign out of your account?"`).
 - Class helpers: `railTileClass`, `railTileStateClass(active)`, `railBadgeClass`, `sidebarNavRowClass(isIconOnly)`, `sidebarNavLinkTextClass(isActive)`, `sidebarSectionLabelClass`.
 
+### Header actions and account badge (0.5.2)
+
+All opt-in. Without these props the header keeps its end spacer and the account trigger has no dot.
+
+```tsx
+<AppSidebar
+  /* … */
+  mobileHeaderActions={
+    <>
+      <Button size="icon" variant="ghost" aria-label="Search"><IconSearch size={20} /></Button>
+      <Button size="icon" variant="ghost" aria-label="New item"><IconPlus size={20} /></Button>
+    </>
+  }
+/>
+
+<SidebarAccountMenu
+  name={name}
+  badge={hasUnread}
+  triggerProps={{ "aria-label": hasUnread ? `Account menu for ${name}, unread updates` : `Account menu for ${name}` }}
+  contentProps={{ fitViewport: true, "aria-label": "Account" }}
+>
+  <DropdownMenuItem>Settings</DropdownMenuItem>
+</SidebarAccountMenu>
+```
+
+The dot is `aria-hidden`, so say it in the trigger label when it matters, as above.
+
+### Resizable panel (0.5.1)
+
+Pass `resizable` to `AppShell`. Widths are panel px, rail excluded. Without it nothing changes.
+
+```tsx
+<AppShell
+  resizable={{ storageKey: "sidebar-width", defaultWidth: 256, minWidth: 200, maxWidth: 480 }}
+  sidebar={<AppSidebar /* as above */ />}
+>
+  {page}
+</AppShell>
+```
+
+- `resizable`: `storageKey`, `defaultWidth`, `minWidth`, `maxWidth`, `label` (default `"Resize sidebar"`). The shell reads the stored width (a JSON number in `localStorage`) on mount, ignores invalid values, clamps it to the bounds and writes each change. Server and hydration renders use `defaultWidth`. `--app-shell-sidebar-width` becomes `calc(<railWidth> + <width>px)` and `sidebarWidth` is ignored. While resizing, the main margin and `<aside>` width transitions are off.
+- `AppSidebar` adds the handle to the `<aside>` right edge on desktop while the panel shows (not `collapsed`, not `panelHidden`). The mobile drawer has none.
+- `SidebarResizeHandle` (`className`): the handle, for custom layouts. Place it in a positioned parent. Dragging past the bounds rubber-bands and springs back on release. ArrowLeft and ArrowRight step 16px. Double-click resets to `defaultWidth`. It renders nothing outside a resizable `AppShell`.
+- `useAppShellResize()`: `{ width, setWidth, isResizing, minWidth, maxWidth, defaultWidth }`, or `null` outside a resizable `AppShell`. `setWidth` takes a number or an updater.
+
+```tsx
+function PanelWidth() {
+  const resize = useAppShellResize();
+  return resize ? <span>{Math.round(resize.width)}px</span> : null;
+}
+```
+
+### Rail tabs (0.5.1)
+
+`SidebarRail tabs` renders the body as a Radix tabs list (arrow-key roving focus, same classes). Wrap the sidebar in a Tabs root with `orientation="vertical"` (the package `Tabs` works). `RailTile tabValue` renders a tabs trigger: tile classes, the children, the label as sr-only text instead of `aria-label`, then the badge. `active` drives the state classes and other props (for example `aria-expanded`) go to the trigger. `asChild` is ignored with `tabValue`. Without `tabs` and `tabValue` the rail renders as before.
+
+```tsx
+<Tabs value={tab} onValueChange={setTab} orientation="vertical">
+  <AppSidebar
+    /* … */
+    rail={
+      <SidebarRail tabs>
+        <RailTile tabValue="files" label="Files" active={tab === "files"} aria-expanded={tab === "files" ? !collapsed : undefined}>
+          <IconFiles size={22} />
+        </RailTile>
+        <RailTile tabValue="search" label="Search" active={tab === "search"}>
+          <IconSearch size={22} />
+        </RailTile>
+      </SidebarRail>
+    }
+    panel={
+      <>
+        <TabsContent value="files">{files}</TabsContent>
+        <TabsContent value="search">{search}</TabsContent>
+      </>
+    }
+  />
+</Tabs>
+```
+
 ## Toaster
 
 ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: one JavaScript entry (primitives, shell pieces, app helpers, native tokens), design-token CSS, shared Tailwind v4 CSS and a Tailwind preset.",
   "type": "module",

package/shell/src/AppShell.tsx

@@ -1,5 +1,10 @@
 import type { CSSProperties, ReactNode } from "react";
 import { cn } from "../../src/utils/cn";
+import {
+  SidebarResizeProvider,
+  useSidebarResizeState,
+  type SidebarResizeOptions,
+} from "./SidebarResize";
 
 export type AppShellProps = {
   /** Rendered between the skip link and `<main>`, usually an `AppSidebar`. */
@@ -13,8 +18,14 @@ export type AppShellProps = {
   panelHidden?: boolean;
   /** Sets `--app-shell-rail-width`. Default `"4rem"`. */
   railWidth?: string;
-  /** Sets `--app-shell-sidebar-width` (rail plus panel). Default `"20rem"`. */
+  /** Sets `--app-shell-sidebar-width` (rail plus panel). Default `"20rem"`. Ignored with `resizable`. */
   sidebarWidth?: string;
+  /**
+   * Opt-in resizable panel. The shell owns the persisted panel width, sets
+   * `--app-shell-sidebar-width` to `calc(<railWidth> + <width>px)` and shares
+   * the state with `AppSidebar`, `SidebarResizeHandle` and `useAppShellResize`.
+   */
+  resizable?: SidebarResizeOptions;
   /** Sets `--app-shell-mobile-header-height`. Default `"calc(3.5rem + env(safe-area-inset-top, 0px))"`. */
   mobileHeaderHeight?: string;
   /** Default `"Skip to main content"`. */
@@ -36,6 +47,7 @@ export function AppShell({
   panelHidden = false,
   railWidth = "4rem",
   sidebarWidth = "20rem",
+  resizable,
   mobileHeaderHeight = "calc(3.5rem + env(safe-area-inset-top, 0px))",
   skipLinkLabel = "Skip to main content",
   mainId = "main-content",
@@ -43,41 +55,45 @@ export function AppShell({
   mainClassName,
   contentClassName,
 }: AppShellProps) {
+  const resize = useSidebarResizeState(resizable);
   const style: ShellVars = {
     "--app-shell-rail-width": railWidth,
-    "--app-shell-sidebar-width": sidebarWidth,
+    "--app-shell-sidebar-width": resize ? `calc(${railWidth} + ${resize.width}px)` : sidebarWidth,
     "--app-shell-mobile-header-height": mobileHeaderHeight,
   };
   return (
-    <div className={cn("relative h-dvh overflow-hidden bg-background", className)} style={style}>
-      <a
-        href={`#${mainId}`}
-        className="sr-only focus:absolute focus:left-3 focus:top-[max(0.75rem,env(safe-area-inset-top))] focus:z-[100] focus:block focus:rounded-lg focus:bg-surface-secondary focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
-      >
-        {skipLinkLabel}
-      </a>
-      {sidebar}
-      <main
-        id={mainId}
-        tabIndex={-1}
-        className={cn(
-          "relative z-10 flex h-full min-h-0 outline-none md:p-2",
-          panelHidden
-            ? "md:ml-[var(--app-shell-rail-width)]"
-            : "md:ml-[var(--app-shell-sidebar-width)]",
-          "md:transition-[margin-left] md:[transition-duration:280ms] md:[transition-timing-function:cubic-bezier(0.22,1,0.36,1)]",
-          mainClassName,
-        )}
-      >
-        <div
+    <SidebarResizeProvider value={resize}>
+      <div className={cn("relative h-dvh overflow-hidden bg-background", className)} style={style}>
+        <a
+          href={`#${mainId}`}
+          className="sr-only focus:absolute focus:left-3 focus:top-[max(0.75rem,env(safe-area-inset-top))] focus:z-[100] focus:block focus:rounded-lg focus:bg-surface-secondary focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+        >
+          {skipLinkLabel}
+        </a>
+        {sidebar}
+        <main
+          id={mainId}
+          tabIndex={-1}
           className={cn(
-            "flex min-h-0 flex-1 flex-col overflow-hidden bg-surface pt-[var(--app-shell-mobile-header-height)] md:rounded-lg md:pt-0",
-            contentClassName,
+            "relative z-10 flex h-full min-h-0 outline-none md:p-2",
+            panelHidden
+              ? "md:ml-[var(--app-shell-rail-width)]"
+              : "md:ml-[var(--app-shell-sidebar-width)]",
+            !resize?.isResizing &&
+              "md:transition-[margin-left] md:[transition-duration:280ms] md:[transition-timing-function:cubic-bezier(0.22,1,0.36,1)]",
+            mainClassName,
           )}
         >
-          {children}
-        </div>
-      </main>
-    </div>
+          <div
+            className={cn(
+              "flex min-h-0 flex-1 flex-col overflow-hidden bg-surface pt-[var(--app-shell-mobile-header-height)] md:rounded-lg md:pt-0",
+              contentClassName,
+            )}
+          >
+            {children}
+          </div>
+        </main>
+      </div>
+    </SidebarResizeProvider>
   );
 }

package/shell/src/AppSidebar.tsx

@@ -5,6 +5,7 @@ import { Button } from "../../src/ui/button";
 import { motionEase, motionTiming } from "../../src/motion/presets";
 import { cn } from "../../src/utils/cn";
 import { mobileMenuButtonClass } from "./app-shell-classes";
+import { SidebarResizeHandle, useSidebarResizeContext } from "./SidebarResize";
 
 export type AppSidebarProps = {
   /** Icon rail, usually a `SidebarRail`. */
@@ -28,6 +29,8 @@ export type AppSidebarProps = {
   className?: string;
   /** Centred in the mobile header when truthy. */
   mobileTitle?: ReactNode;
+  /** Trailing actions in the mobile header, for example icon buttons. Replaces the end spacer. */
+  mobileHeaderActions?: ReactNode;
   /** Menu button icon. Default a 20px menu icon. */
   mobileMenuIcon?: (open: boolean) => ReactNode;
   /** Default `"Open navigation menu"`. */
@@ -41,7 +44,8 @@ const defaultMobileMenuIcon = () => <IconMenu2 size={20} />;
 /**
  * Sidebar chrome: the mobile header, the drawer backdrop and the `<aside>`
  * (fixed on desktop, a swipe-to-close drawer below it). Reads the
- * `--app-shell-*` width variables set by `AppShell`.
+ * `--app-shell-*` width variables set by `AppShell`. Inside a resizable
+ * `AppShell` it adds the resize handle while the panel shows on desktop.
  */
 export function AppSidebar({
   rail,
@@ -55,6 +59,7 @@ export function AppSidebar({
   asideProps,
   className,
   mobileTitle,
+  mobileHeaderActions,
   mobileMenuIcon = defaultMobileMenuIcon,
   mobileMenuLabel = "Open navigation menu",
   closeLabel = "Close navigation",
@@ -62,6 +67,8 @@ export function AppSidebar({
   const autoId = useId();
   const drawerId = id ?? autoId;
   const layout = isDesktop ? "desktop" : "drawer";
+  const resize = useSidebarResizeContext();
+  const showResizeHandle = resize !== null && isDesktop && !collapsed && !panelHidden;
 
   // Reaching the desktop breakpoint closes the drawer, so it does not reopen
   // on the way back down. Runs on breakpoint change only.
@@ -110,7 +117,13 @@ export function AppSidebar({
             {mobileTitle}
           </h1>
         ) : null}
-        <div className="ml-auto h-11 w-11 shrink-0" aria-hidden="true" />
+        {mobileHeaderActions ? (
+          <div data-app-sidebar-mobile-actions="" className="ml-auto flex shrink-0 items-center gap-2">
+            {mobileHeaderActions}
+          </div>
+        ) : (
+          <div className="ml-auto h-11 w-11 shrink-0" aria-hidden="true" />
+        )}
       </header>
 
       <AnimatePresence initial={false}>
@@ -142,7 +155,8 @@ export function AppSidebar({
           collapsed || panelHidden
             ? "md:w-[var(--app-shell-rail-width)]"
             : "md:w-[var(--app-shell-sidebar-width)]",
-          "md:transition-[width] md:[transition-duration:280ms] md:[transition-timing-function:cubic-bezier(0.22,1,0.36,1)]",
+          !resize?.isResizing &&
+            "md:transition-[width] md:[transition-duration:280ms] md:[transition-timing-function:cubic-bezier(0.22,1,0.36,1)]",
           className,
         )}
         initial={false}
@@ -156,6 +170,7 @@ export function AppSidebar({
       >
         {rail}
         {panelHidden ? null : panel}
+        {showResizeHandle ? <SidebarResizeHandle /> : null}
       </motion.aside>
     </>
   );

package/shell/src/SidebarAccountMenu.tsx

@@ -30,6 +30,19 @@ export type SidebarAccountMenuProps = {
   collisionPadding?: ContentProps["collisionPadding"];
   /** Merged onto the menu content after `w-56`. */
   contentClassName?: string;
+  /**
+   * Unread dot over the trigger's top-right corner, a sibling of the trigger in
+   * a `relative` wrapper. `true` shows it, `false` keeps it mounted at zero
+   * opacity so it fades out. Omitted: no wrapper and no dot.
+   */
+  badge?: boolean;
+  /** Spread onto the trigger `Button` after the defaults (overrides `title`, `aria-label`, …). `className` merges last. */
+  triggerProps?: Omit<ComponentPropsWithoutRef<typeof Button>, "children" | "asChild">;
+  /** Spread onto `DropdownMenuContent`, for example `fitViewport` or `aria-label`. Use `contentClassName` for classes. */
+  contentProps?: Omit<
+    ContentProps,
+    "children" | "className" | "align" | "side" | "sideOffset" | "collisionPadding"
+  >;
   /** Menu items after the label and separator. */
   children?: ReactNode;
 };
@@ -73,9 +86,12 @@ export function SidebarAccountMenu({
   sideOffset = 8,
   collisionPadding,
   contentClassName,
+  badge,
+  triggerProps,
+  contentProps,
   children,
 }: SidebarAccountMenuProps) {
-  return (
+  const menu = (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button
@@ -83,12 +99,19 @@ export function SidebarAccountMenu({
           variant="ghost"
           title={name}
           aria-label={`Account menu for ${name}`}
-          className={cn(railTileClass, "h-11 w-11 p-0", railTileStateClass(false))}
+          {...triggerProps}
+          className={cn(
+            railTileClass,
+            "h-11 w-11 p-0",
+            railTileStateClass(false),
+            triggerProps?.className,
+          )}
         >
           <AccountAvatar src={imageUrl} name={name} className="h-7 w-7" />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent
+        {...contentProps}
         align={align}
         side={side}
         sideOffset={sideOffset}
@@ -111,6 +134,21 @@ export function SidebarAccountMenu({
       </DropdownMenuContent>
     </DropdownMenu>
   );
+  if (badge === undefined) return menu;
+  // Sibling of the trigger, so its opacity and press scale do not reach the dot.
+  return (
+    <div className="relative">
+      {menu}
+      <span
+        aria-hidden="true"
+        data-account-badge=""
+        className={cn(
+          "pointer-events-none absolute right-0 top-0 h-2.5 w-2.5 rounded-full border-2 border-background bg-danger transition-opacity duration-150 ease-out",
+          badge ? "opacity-100" : "opacity-0",
+        )}
+      />
+    </div>
+  );
 }
 
 export type SidebarAccountMenuPlaceholderProps = { className?: string };

package/shell/src/SidebarRail.tsx

@@ -1,5 +1,6 @@
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import { Slot, Slottable } from "@radix-ui/react-slot";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { Button } from "../../src/ui/button";
 import { cn } from "../../src/utils/cn";
 import { railTileClass, railTileStateClass } from "./app-shell-classes";
@@ -16,6 +17,12 @@ export type SidebarRailProps = Omit<ComponentPropsWithoutRef<"div">, "children"
   showDivider?: boolean;
   /** Render the body as its single child element (for example a tabs list), with the body classes merged. */
   bodyAsChild?: boolean;
+  /**
+   * Render the body as a Radix tabs list (arrow-key roving focus). Use it
+   * inside a Tabs root with `orientation="vertical"` and give each `RailTile`
+   * a `tabValue`. Default `false`.
+   */
+  tabs?: boolean;
   className?: string;
   topClassName?: string;
   bodyClassName?: string;
@@ -29,6 +36,7 @@ export function SidebarRail({
   footer,
   showDivider = false,
   bodyAsChild = false,
+  tabs = false,
   className,
   topClassName,
   bodyClassName,
@@ -36,6 +44,10 @@ export function SidebarRail({
   ...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 (
     <div
       {...props}
@@ -50,14 +62,13 @@ export function SidebarRail({
           {top}
         </div>
       )}
-      <Body
-        className={cn(
-          "flex w-full flex-1 flex-col items-center gap-1.5 overflow-y-auto py-2",
-          bodyClassName,
-        )}
-      >
-        {children}
-      </Body>
+      {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}
@@ -80,10 +91,15 @@ export type RailTileProps = Omit<ComponentPropsWithoutRef<"button">, "children">
   badge?: ReactNode;
   /** Render the single child element (for example a router link) as the tile. */
   asChild?: boolean;
+  /**
+   * Render a Radix tabs trigger for this value (inside a `SidebarRail tabs`).
+   * The label is sr-only text instead of `aria-label`; `asChild` is ignored.
+   */
+  tabValue?: string;
   children: ReactNode;
 };
 
-/** Rail tile with a right-side tooltip. Renders a ghost `Button`, or its child with `asChild`. */
+/** Rail tile with a right-side tooltip. Renders a ghost `Button`, its child with `asChild`, or a tabs trigger with `tabValue`. */
 export function RailTile({
   label,
   active = false,
@@ -91,13 +107,24 @@ export function RailTile({
   showTooltip = true,
   badge,
   asChild = false,
+  tabValue,
   className,
   children,
   ...props
 }: RailTileProps) {
   return (
     <SidebarIconTooltip label={tooltip ?? label} enabled={showTooltip}>
-      {asChild ? (
+      {tabValue !== undefined ? (
+        <TabsPrimitive.Trigger
+          {...props}
+          value={tabValue}
+          className={cn(railTileClass, "group relative", railTileStateClass(active), className)}
+        >
+          {children}
+          <span className="sr-only">{label}</span>
+          {badge}
+        </TabsPrimitive.Trigger>
+      ) : asChild ? (
         <Slot
           {...props}
           aria-label={label}

package/shell/src/SidebarResize.tsx

@@ -0,0 +1,257 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  type KeyboardEvent,
+  type PointerEvent,
+} from "react";
+import { animate } from "motion";
+import { cn } from "../../src/utils/cn";
+
+/** Opt-in resizable sidebar panel. Widths are panel px, rail excluded. */
+export type SidebarResizeOptions = {
+  /** `localStorage` key for the panel width (a JSON number). */
+  storageKey: string;
+  defaultWidth: number;
+  minWidth: number;
+  maxWidth: number;
+  /** Handle `aria-label`. Default `"Resize sidebar"`. */
+  label?: string;
+};
+
+type WidthUpdate = number | ((width: number) => number);
+type Animation = ReturnType<typeof animate>;
+
+type SidebarResizeState = {
+  width: number;
+  setWidth: (update: WidthUpdate) => void;
+  isResizing: boolean;
+  minWidth: number;
+  maxWidth: number;
+  defaultWidth: number;
+  label: string;
+  /** Latest width, readable between renders (pointer moves can outpace them). */
+  currentWidth: () => number;
+  stopAnimation: () => void;
+  startResizing: () => void;
+  settleToClamp: (velocity: number) => void;
+};
+
+const SidebarResizeContext = createContext<SidebarResizeState | null>(null);
+export const SidebarResizeProvider = SidebarResizeContext.Provider;
+
+const KEYBOARD_STEP = 16;
+
+function rubberband(overshoot: number, dimension: number, constant = 0.55): number {
+  return (overshoot * dimension * constant) / (dimension + constant * Math.abs(overshoot));
+}
+
+type Sample = { x: number; t: number };
+
+function releaseVelocity(samples: Sample[]): number {
+  if (samples.length < 2) return 0;
+  const newest = samples[samples.length - 1];
+  const oldest = samples[0];
+  if (!newest || !oldest) return 0;
+  const dt = newest.t - oldest.t;
+  if (dt <= 0) return 0;
+  return ((newest.x - oldest.x) / dt) * 1000;
+}
+
+function readStoredWidth(storageKey: string | undefined): number | null {
+  if (storageKey === undefined || typeof window === "undefined") return null;
+  try {
+    const raw = window.localStorage.getItem(storageKey);
+    if (raw === null || raw.trim() === "") return null;
+    // A JSON number parses the same with Number(); anything else is NaN.
+    const value = Number(raw);
+    return Number.isFinite(value) ? value : null;
+  } catch {
+    return null;
+  }
+}
+
+function writeStoredWidth(storageKey: string, width: number) {
+  try {
+    window.localStorage.setItem(storageKey, JSON.stringify(width));
+  } catch {
+    // Storage full or blocked: keep the in-memory width.
+  }
+}
+
+const subscribeNever = () => () => {};
+const serverSnapshot = () => null;
+
+/**
+ * Width and resize state for `AppShell`. Returns `null` without options. The
+ * stored width is read through `useSyncExternalStore` (the server snapshot is
+ * `null`, so SSR and hydration render `defaultWidth`); later writes go to
+ * local state and storage.
+ */
+export function useSidebarResizeState(
+  options: SidebarResizeOptions | undefined,
+): SidebarResizeState | null {
+  const storageKey = options?.storageKey;
+  const stored = useSyncExternalStore(subscribeNever, () => readStoredWidth(storageKey), serverSnapshot);
+  const [override, setOverride] = useState<number | null>(null);
+  const [isResizing, setIsResizing] = useState(false);
+  const widthRef = useRef<number | null>(null);
+  const animRef = useRef<Animation | null>(null);
+
+  useEffect(() => () => animRef.current?.stop(), []);
+
+  if (!options) return null;
+  const { defaultWidth, minWidth, maxWidth } = options;
+  const clampWidth = (width: number) => Math.min(maxWidth, Math.max(minWidth, width));
+  const width = override ?? (stored === null ? defaultWidth : clampWidth(stored));
+  const currentWidth = () => widthRef.current ?? width;
+
+  const setWidth = (update: WidthUpdate) => {
+    const next = typeof update === "function" ? update(currentWidth()) : update;
+    widthRef.current = next;
+    setOverride(next);
+    writeStoredWidth(options.storageKey, next);
+  };
+
+  const stopAnimation = () => animRef.current?.stop();
+
+  const settleToClamp = (velocity: number) => {
+    const from = currentWidth();
+    const to = clampWidth(from);
+    setIsResizing(false);
+    if (from === to) return;
+    animRef.current?.stop();
+    animRef.current = animate(from, to, {
+      type: "spring",
+      bounce: 0.2,
+      duration: 0.35,
+      velocity,
+      onUpdate: (value) => setWidth(value),
+    });
+  };
+
+  return {
+    width,
+    setWidth,
+    isResizing,
+    minWidth,
+    maxWidth,
+    defaultWidth,
+    label: options.label ?? "Resize sidebar",
+    currentWidth,
+    stopAnimation,
+    startResizing: () => setIsResizing(true),
+    settleToClamp,
+  };
+}
+
+export function useSidebarResizeContext(): SidebarResizeState | null {
+  return useContext(SidebarResizeContext);
+}
+
+export type AppShellResize = {
+  /** Panel width in px (rail excluded). Can sit past the bounds mid-drag. */
+  width: number;
+  setWidth: (update: WidthUpdate) => void;
+  isResizing: boolean;
+  minWidth: number;
+  maxWidth: number;
+  defaultWidth: number;
+};
+
+/** Panel width and resize state of the nearest resizable `AppShell`, or `null`. */
+export function useAppShellResize(): AppShellResize | null {
+  const resize = useContext(SidebarResizeContext);
+  if (!resize) return null;
+  const { width, setWidth, isResizing, minWidth, maxWidth, defaultWidth } = resize;
+  return { width, setWidth, isResizing, minWidth, maxWidth, defaultWidth };
+}
+
+export type SidebarResizeHandleProps = { className?: string };
+
+/**
+ * Vertical separator on the right edge of its positioned parent. Drag past the
+ * bounds rubber-bands and springs back on release; arrow keys step 16px;
+ * double-click resets. Renders nothing outside a resizable `AppShell`.
+ */
+export function SidebarResizeHandle({ className }: SidebarResizeHandleProps) {
+  const resize = useContext(SidebarResizeContext);
+  const samplesRef = useRef<Sample[]>([]);
+  if (!resize) return null;
+  const { width, setWidth, isResizing, minWidth, maxWidth, defaultWidth } = resize;
+  const clampWidth = (value: number) => Math.min(maxWidth, Math.max(minWidth, value));
+  const softWidth = (value: number) => {
+    if (value < minWidth) return minWidth - rubberband(minWidth - value, minWidth);
+    if (value > maxWidth) return maxWidth + rubberband(value - maxWidth, maxWidth);
+    return value;
+  };
+
+  const handlePointerDown = (event: PointerEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    resize.stopAnimation();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    samplesRef.current = [{ x: resize.currentWidth(), t: performance.now() }];
+    resize.startResizing();
+  };
+
+  const handlePointerMove = (event: PointerEvent<HTMLDivElement>) => {
+    if (!isResizing) return;
+    const next = softWidth(resize.currentWidth() + event.movementX);
+    const now = performance.now();
+    const samples = samplesRef.current;
+    samples.push({ x: next, t: now });
+    while (samples.length > 5 || now - (samples[0]?.t ?? now) > 80) samples.shift();
+    setWidth(next);
+  };
+
+  const handlePointerUp = (event: PointerEvent<HTMLDivElement>) => {
+    event.currentTarget.releasePointerCapture(event.pointerId);
+    resize.settleToClamp(releaseVelocity(samplesRef.current));
+    samplesRef.current = [];
+  };
+
+  const handlePointerCancel = (event: PointerEvent<HTMLDivElement>) => {
+    event.currentTarget.releasePointerCapture(event.pointerId);
+    resize.settleToClamp(0);
+    samplesRef.current = [];
+  };
+
+  const handleDoubleClick = () => {
+    resize.stopAnimation();
+    setWidth(defaultWidth);
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+    event.preventDefault();
+    resize.stopAnimation();
+    const step = event.key === "ArrowLeft" ? -KEYBOARD_STEP : KEYBOARD_STEP;
+    setWidth((current) => clampWidth(current + step));
+  };
+
+  return (
+    <div
+      role="separator"
+      aria-orientation="vertical"
+      aria-label={resize.label}
+      aria-valuenow={clampWidth(width)}
+      aria-valuemin={minWidth}
+      aria-valuemax={maxWidth}
+      tabIndex={0}
+      className={cn(
+        "absolute inset-y-0 right-0 z-50 h-full w-1.5 cursor-col-resize outline-hidden transition-[background-color] hover:bg-default focus-visible:bg-default",
+        isResizing && "bg-default",
+        className,
+      )}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      onPointerCancel={handlePointerCancel}
+      onDoubleClick={handleDoubleClick}
+      onKeyDown={handleKeyDown}
+    />
+  );
+}

package/shell/src/index.ts

@@ -16,6 +16,12 @@ export { AppSidebar } from "./AppSidebar.js";
 export type { AppSidebarProps } from "./AppSidebar.js";
 export { SidebarRail, RailTile, RailDivider } from "./SidebarRail.js";
 export type { SidebarRailProps, RailTileProps, RailDividerProps } from "./SidebarRail.js";
+export { SidebarResizeHandle, useAppShellResize } from "./SidebarResize.js";
+export type {
+  AppShellResize,
+  SidebarResizeHandleProps,
+  SidebarResizeOptions,
+} from "./SidebarResize.js";
 export { SidebarIconTooltip } from "./SidebarIconTooltip.js";
 export type { SidebarIconTooltipProps } from "./SidebarIconTooltip.js";
 export { SidebarPanel } from "./SidebarPanel.js";

package/src/index.ts

@@ -128,6 +128,12 @@ export { AppSidebar } from "../shell/src/AppSidebar";
 export type { AppSidebarProps } from "../shell/src/AppSidebar";
 export { SidebarRail, RailTile, RailDivider } from "../shell/src/SidebarRail";
 export type { SidebarRailProps, RailTileProps, RailDividerProps } from "../shell/src/SidebarRail";
+export { SidebarResizeHandle, useAppShellResize } from "../shell/src/SidebarResize";
+export type {
+  AppShellResize,
+  SidebarResizeHandleProps,
+  SidebarResizeOptions,
+} from "../shell/src/SidebarResize";
 export { SidebarIconTooltip } from "../shell/src/SidebarIconTooltip";
 export type { SidebarIconTooltipProps } from "../shell/src/SidebarIconTooltip";
 export { SidebarPanel } from "../shell/src/SidebarPanel";

package/src/ui/confirm-dialog.tsx

@@ -10,7 +10,14 @@ import {
   AlertDialogTitle,
 } from "./alert-dialog";
 import { Button } from "./button";
-import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./dialog";
 
 export type ConfirmDialogProps = React.ComponentProps<typeof AlertDialog> & {
   title: React.ReactNode;
@@ -25,8 +32,10 @@ export type ConfirmDialogProps = React.ComponentProps<typeof AlertDialog> & {
    * `"default"`: blocking alert dialog that closes on either button.
    * `"sm"`: compact dismissible dialog (outside click, Escape and the close
    * button close it). Confirm does not close it; the caller controls `open`.
+   * `"md"`: dismissible dialog like `"sm"`, with a header, description and
+   * footer in separate sections and default-size buttons.
    */
-  size?: "default" | "sm";
+  size?: "default" | "sm" | "md";
 };
 
 function ConfirmDialog({
@@ -78,6 +87,36 @@ function ConfirmDialog({
     );
   }
 
+  if (size === "md") {
+    return (
+      <Dialog {...props}>
+        {children}
+        <DialogContent className="sm:max-w-96">
+          <DialogHeader className="pb-4">
+            <DialogTitle>{title}</DialogTitle>
+          </DialogHeader>
+          {description != null ? (
+            <DialogDescription className="py-6 text-muted-foreground">{description}</DialogDescription>
+          ) : null}
+          <DialogFooter className="pt-4">
+            <Button
+              variant="ghost"
+              onClick={() => {
+                onCancel?.();
+                props.onOpenChange?.(false);
+              }}
+            >
+              {cancelLabel}
+            </Button>
+            <Button variant={variant} disabled={confirmDisabled} onClick={onConfirm}>
+              {confirmLabel}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
   return (
     <AlertDialog {...props}>
       {children}