@vvedantb/ui 0.4.4 → 0.5.1

package/shell/src/SidebarIconTooltip.tsx

@@ -0,0 +1,34 @@
+import type { ReactElement } from "react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../src/ui/tooltip";
+
+export type SidebarIconTooltipProps = {
+  label: string;
+  enabled: boolean;
+  children: ReactElement;
+  /** Default `"right"`. */
+  side?: "top" | "right" | "bottom" | "left";
+  /** Default `8`. */
+  sideOffset?: number;
+};
+
+// radix tooltip for icon-only sidebar rail — skipped when labels are visible
+export function SidebarIconTooltip({
+  label,
+  enabled,
+  children,
+  side = "right",
+  sideOffset = 8,
+}: SidebarIconTooltipProps) {
+  if (!enabled) {
+    return children;
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{children}</TooltipTrigger>
+      <TooltipContent side={side} sideOffset={sideOffset}>
+        {label}
+      </TooltipContent>
+    </Tooltip>
+  );
+}

package/shell/src/SidebarPanel.tsx

@@ -0,0 +1,71 @@
+import type { ReactNode } from "react";
+import { IconX } from "@tabler/icons-react";
+import { Button } from "../../src/ui/button";
+import { cn } from "../../src/utils/cn";
+import { panelCloseButtonClass } from "./app-shell-classes";
+import { SidebarHeader } from "./SidebarHeader";
+
+export type SidebarPanelProps = {
+  title: string;
+  /** Rendered in the header, before the close button. */
+  headerTrailing?: ReactNode;
+  /** When set, a close button follows `headerTrailing`. Pass it on the mobile drawer only. */
+  onClose?: () => void;
+  /** Close button label. Default `"Close navigation"`. */
+  closeLabel?: string;
+  /** Merged onto the close button. */
+  closeButtonClassName?: string;
+  /** Desktop: hides the panel (`md:hidden`) and leaves the rail. */
+  collapsed?: boolean;
+  className?: string;
+  /** Panel body: nav, footer and so on. */
+  children?: ReactNode;
+};
+
+/** Sidebar panel column beside the rail: a `SidebarHeader` and the app's body. */
+export function SidebarPanel({
+  title,
+  headerTrailing,
+  onClose,
+  closeLabel = "Close navigation",
+  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>
+        ) : null}
+      </>
+    ) : null;
+
+  return (
+    <div
+      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",
+        className,
+      )}
+    >
+      <div className="px-2 pt-3">
+        <SidebarHeader title={title} trailing={trailing} />
+      </div>
+      {children}
+    </div>
+  );
+}

package/shell/src/SidebarRail.tsx

@@ -0,0 +1,157 @@
+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";
+import { SidebarIconTooltip } from "./SidebarIconTooltip";
+
+export type SidebarRailProps = Omit<ComponentPropsWithoutRef<"div">, "children" | "className"> & {
+  /** Pinned at the top, above the scroll body. */
+  top?: ReactNode;
+  /** Scroll body. */
+  children?: ReactNode;
+  /** Pinned at the bottom. */
+  footer?: ReactNode;
+  /** Adds a right border between the rail and the panel. Default `false`. */
+  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;
+  footerClassName?: string;
+};
+
+/** Icon rail column. Width reads `--app-shell-rail-width`; override with `className`. Other props go to the root `<div>`. */
+export function SidebarRail({
+  top,
+  children,
+  footer,
+  showDivider = false,
+  bodyAsChild = false,
+  tabs = false,
+  className,
+  topClassName,
+  bodyClassName,
+  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 (
+    <div
+      {...props}
+      className={cn(
+        "flex h-full w-[var(--app-shell-rail-width)] shrink-0 flex-col items-center bg-background",
+        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"> & {
+  /** `aria-label`, and the tooltip unless `tooltip` is set. */
+  label: string;
+  /** Active state. With `asChild`, also sets `aria-current="page"`. */
+  active?: boolean;
+  /** Tooltip text. Default `label`. */
+  tooltip?: string;
+  /** Default `true`. */
+  showTooltip?: boolean;
+  /** Rendered after the children, inside the tile (for example a count with `railBadgeClass`). */
+  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`, its child with `asChild`, or a tabs trigger with `tabValue`. */
+export function RailTile({
+  label,
+  active = false,
+  tooltip,
+  showTooltip = true,
+  badge,
+  asChild = false,
+  tabValue,
+  className,
+  children,
+  ...props
+}: RailTileProps) {
+  return (
+    <SidebarIconTooltip label={tooltip ?? label} enabled={showTooltip}>
+      {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}
+          aria-current={active ? "page" : undefined}
+          className={cn(railTileClass, "group", railTileStateClass(active), className)}
+        >
+          <Slottable>{children}</Slottable>
+          {badge}
+        </Slot>
+      ) : (
+        <Button
+          type="button"
+          variant="ghost"
+          {...props}
+          aria-label={label}
+          className={cn(railTileClass, "group h-11 w-11 p-0", railTileStateClass(active), className)}
+        >
+          {children}
+          {badge}
+        </Button>
+      )}
+    </SidebarIconTooltip>
+  );
+}
+
+export type RailDividerProps = { className?: string };
+
+export function RailDivider({ className }: RailDividerProps) {
+  return <div className={cn("h-px w-8 bg-separator", className)} aria-hidden />;
+}

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/SignOutDialog.tsx

@@ -0,0 +1,93 @@
+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 { cn } from "../../src/utils/cn";
+import { signOutCancelClass, signOutDescriptionClass } from "./app-shell-classes";
+
+export type SignOutDialogProps = {
+  open: boolean;
+  /** Not called with `false` while `pending`, so the dialog stays open during sign-out. */
+  onOpenChange: (open: boolean) => void;
+  /** Disables both buttons and shows "Signing out...". */
+  pending: boolean;
+  onConfirm: () => void | Promise<void>;
+  /** Second line under the question. */
+  description?: string;
+  /** Merged onto the dialog content after `sm:max-w-sm`. */
+  contentClassName?: string;
+  /** Dialog title and confirm button label. Default `"Sign out"`. */
+  title?: string;
+  /** Default `"Sign out of your account?"`. */
+  question?: string;
+};
+
+/** Sign-out confirmation. The app owns the state and the sign-out call. */
+export function SignOutDialog({
+  open,
+  onOpenChange,
+  pending,
+  onConfirm,
+  description,
+  contentClassName,
+  title = "Sign out",
+  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">
+            Confirm signing out of your account
+          </DialogDescription>
+        </DialogHeader>
+        <div 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>
+          <div>
+            <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
+            onClick={() => void onConfirm()}
+            disabled={pending}
+            className="bg-danger text-danger-foreground"
+          >
+            {pending ? (
+              <>
+                <IconLoader2 size={16} className="animate-spin" />
+                Signing out...
+              </>
+            ) : (
+              title
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,44 @@
+import { cn } from "../../src/utils/cn";
+
+// Class strings for the app shell, copied from existing app markup so an app
+// that moves to these components renders the same classes. The bare muted and
+// accent colour names match that markup and are allow-listed for check:tokens
+// on the marked lines only.
+
+/** Rail tile: size-11, rounded-lg, press scale. */
+export const railTileClass =
+  "relative flex size-11 items-center justify-center rounded-lg border active:scale-[0.96] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring";
+
+const railTileActiveClass = "border-transparent bg-surface-tertiary text-foreground";
+const railTileIdleClass = "border-transparent text-muted opacity-75 hover:bg-surface-tertiary/50 hover:opacity-100 hover:text-foreground"; // check-tokens-allow: text-muted
+
+export function railTileStateClass(active: boolean): string {
+  return active ? railTileActiveClass : railTileIdleClass;
+}
+
+/** Count badge pinned to the bottom-right of a rail tile. */
+export const railBadgeClass = "absolute -bottom-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-accent px-1 text-[10px] font-semibold leading-none text-accent-foreground"; // check-tokens-allow: accent
+
+/** Static section label, sentence case, padded to match nav rows. */
+export const sidebarSectionLabelClass =
+  "sidebar-section-label px-3 py-1 text-[11px] font-medium tracking-[-0.01em]";
+
+/** Nav link text: muted until active. */
+export function sidebarNavLinkTextClass(isActive: boolean): string {
+  return cn(isActive ? "text-foreground" : "text-muted hover:text-foreground"); // check-tokens-allow: text-muted
+}
+
+/** Padding for main sidebar nav rows. */
+export function sidebarNavRowClass(isIconOnly: boolean): string {
+  return cn(isIconOnly ? "justify-center px-0 py-1.5" : "gap-3 px-3 py-1.5");
+}
+
+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
+
+export const accountEmailClass = "block truncate text-xs font-normal text-muted"; // check-tokens-allow: 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

package/shell/src/index.ts

@@ -10,3 +10,34 @@ export type {
   SessionsHoverCardProps,
   SessionsHoverCardSurface,
 } from "./SessionsHoverCard.js";
+export { AppShell } from "./AppShell.js";
+export type { AppShellProps } from "./AppShell.js";
+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";
+export type { SidebarPanelProps } from "./SidebarPanel.js";
+export { SidebarAccountMenu, SidebarAccountMenuPlaceholder } from "./SidebarAccountMenu.js";
+export type {
+  SidebarAccountMenuProps,
+  SidebarAccountMenuPlaceholderProps,
+} from "./SidebarAccountMenu.js";
+export { SignOutDialog } from "./SignOutDialog.js";
+export type { SignOutDialogProps } from "./SignOutDialog.js";
+export {
+  railBadgeClass,
+  railTileClass,
+  railTileStateClass,
+  sidebarNavLinkTextClass,
+  sidebarNavRowClass,
+  sidebarSectionLabelClass,
+} from "./app-shell-classes.js";