@object-ui/components 3.0.3 → 3.1.0

package/src/renderers/navigation/header-bar.tsx

@@ -8,7 +8,8 @@
 
 import React from 'react';
 import { ComponentRegistry } from '@object-ui/core';
-import type { HeaderBarSchema } from '@object-ui/types';
+import type { HeaderBarSchema, BreadcrumbItem as BreadcrumbItemType } from '@object-ui/types';
+import { resolveI18nLabel, SchemaRenderer } from '@object-ui/react';
 import {
   SidebarTrigger,
   Separator,
@@ -17,8 +18,45 @@ import {
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbSeparator,
-  BreadcrumbPage
+  BreadcrumbPage,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  Input,
 } from '../../ui';
+import { ChevronDown, Search } from 'lucide-react';
+
+function BreadcrumbLabel({ crumb, isLast }: { crumb: BreadcrumbItemType; isLast: boolean }) {
+  const label = resolveI18nLabel(crumb.label) ?? '';
+
+  if (crumb.siblings && crumb.siblings.length > 0) {
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger className="flex items-center gap-1">
+          {isLast ? (
+            <span className="font-semibold">{label}</span>
+          ) : (
+            <span>{label}</span>
+          )}
+          <ChevronDown className="h-3 w-3" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          {crumb.siblings.map((sibling, i) => (
+            <DropdownMenuItem key={i} asChild>
+              <a href={sibling.href}>{sibling.label}</a>
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  }
+
+  if (isLast) {
+    return <BreadcrumbPage>{label}</BreadcrumbPage>;
+  }
+  return <BreadcrumbLink href={crumb.href || '#'}>{label}</BreadcrumbLink>;
+}
 
 ComponentRegistry.register('header-bar', 
   ({ schema }: { schema: HeaderBarSchema }) => (
@@ -27,27 +65,48 @@ ComponentRegistry.register('header-bar',
       <Separator orientation="vertical" className="mr-2 h-4" />
       <Breadcrumb>
         <BreadcrumbList>
-          {schema.crumbs?.map((crumb: any, idx: number) => (
+          {schema.crumbs?.map((crumb: BreadcrumbItemType, idx: number) => (
             <React.Fragment key={idx}>
               <BreadcrumbItem>
-                {idx === schema.crumbs.length - 1 ? (
-                   <BreadcrumbPage>{crumb.label}</BreadcrumbPage>
-                ) : (
-                   <BreadcrumbLink href={crumb.href || '#'}>{crumb.label}</BreadcrumbLink>
-                )}
+                <BreadcrumbLabel crumb={crumb} isLast={idx === schema.crumbs!.length - 1} />
               </BreadcrumbItem>
-              {idx < schema.crumbs.length - 1 && <BreadcrumbSeparator />}
+              {idx < schema.crumbs!.length - 1 && <BreadcrumbSeparator />}
             </React.Fragment>
           ))}
         </BreadcrumbList>
       </Breadcrumb>
+
+      <div className="ml-auto flex items-center gap-2">
+        {schema.search?.enabled && (
+          <div className="relative">
+            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Input
+              type="search"
+              placeholder={schema.search.placeholder}
+              className="pl-8 w-[200px] lg:w-[300px]"
+            />
+            {schema.search.shortcut && (
+              <kbd className="pointer-events-none absolute right-2 top-2 hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
+                {schema.search.shortcut}
+              </kbd>
+            )}
+          </div>
+        )}
+        {schema.actions?.map((action, idx) => (
+          <SchemaRenderer key={idx} schema={action} />
+        ))}
+        {schema.rightContent && <SchemaRenderer schema={schema.rightContent} />}
+      </div>
     </header>
   ),
   {
     namespace: 'ui',
     label: 'Header Bar',
     inputs: [
-       { name: 'crumbs', type: 'array', label: 'Breadcrumbs' }
+       { name: 'crumbs', type: 'array', label: 'Breadcrumbs' },
+       { name: 'search', type: 'object', label: 'Search Configuration' },
+       { name: 'actions', type: 'array', label: 'Action Slots' },
+       { name: 'rightContent', type: 'object', label: 'Right Content' },
     ],
     defaultProps: {
       crumbs: [

package/src/stories/ConfigPanel.stories.tsx

@@ -0,0 +1,232 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ConfigPanelRenderer } from '../custom/config-panel-renderer';
+import { ConfigFieldRenderer } from '../custom/config-field-renderer';
+import { useConfigDraft } from '../hooks/use-config-draft';
+import type { ConfigPanelSchema, ConfigField } from '../types/config-panel';
+
+// ─── ConfigPanelRenderer Stories ─────────────────────────────────────────────
+
+const panelMeta = {
+  title: 'Config/ConfigPanelRenderer',
+  component: ConfigPanelRenderer,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ConfigPanelRenderer>;
+
+export default panelMeta;
+type Story = StoryObj<typeof panelMeta>;
+
+// Basic schema example
+const basicSchema: ConfigPanelSchema = {
+  breadcrumb: ['Settings', 'General'],
+  sections: [
+    {
+      key: 'basic',
+      title: 'Basic',
+      fields: [
+        { key: 'title', label: 'Title', type: 'input', placeholder: 'Enter title' },
+        { key: 'enabled', label: 'Enabled', type: 'switch', defaultValue: true },
+        {
+          key: 'mode',
+          label: 'Mode',
+          type: 'select',
+          options: [
+            { value: 'auto', label: 'Auto' },
+            { value: 'manual', label: 'Manual' },
+            { value: 'scheduled', label: 'Scheduled' },
+          ],
+          defaultValue: 'auto',
+        },
+      ],
+    },
+    {
+      key: 'appearance',
+      title: 'Appearance',
+      collapsible: true,
+      fields: [
+        { key: 'theme', label: 'Theme', type: 'select', options: [
+          { value: 'light', label: 'Light' },
+          { value: 'dark', label: 'Dark' },
+          { value: 'system', label: 'System' },
+        ], defaultValue: 'system' },
+        { key: 'accentColor', label: 'Accent color', type: 'color', defaultValue: '#3b82f6' },
+        { key: 'fontSize', label: 'Font size', type: 'slider', min: 10, max: 24, step: 1, defaultValue: 14 },
+      ],
+    },
+    {
+      key: 'advanced',
+      title: 'Advanced',
+      collapsible: true,
+      defaultCollapsed: true,
+      hint: 'These settings are for power users.',
+      fields: [
+        { key: 'debug', label: 'Debug mode', type: 'checkbox' },
+        { key: 'apiEndpoint', label: 'API endpoint', type: 'input', placeholder: 'https://...' },
+      ],
+    },
+  ],
+};
+
+function BasicPanelStory() {
+  const source = { title: 'My App', enabled: true, mode: 'auto', theme: 'system', accentColor: '#3b82f6', fontSize: 14, debug: false, apiEndpoint: '' };
+  const { draft, isDirty, updateField, discard } = useConfigDraft(source);
+  return (
+    <div style={{ position: 'relative', height: 600, width: 320, border: '1px solid #e5e7eb', borderRadius: 8, overflow: 'hidden' }}>
+      <ConfigPanelRenderer
+        open={true}
+        onClose={() => alert('Close clicked')}
+        schema={basicSchema}
+        draft={draft}
+        isDirty={isDirty}
+        onFieldChange={updateField}
+        onSave={() => alert('Saved: ' + JSON.stringify(draft, null, 2))}
+        onDiscard={discard}
+      />
+    </div>
+  );
+}
+
+export const Basic: Story = {
+  render: () => <BasicPanelStory />,
+};
+
+// Dashboard-like schema
+const dashboardSchema: ConfigPanelSchema = {
+  breadcrumb: ['Dashboard', 'Layout'],
+  sections: [
+    {
+      key: 'layout',
+      title: 'Layout',
+      fields: [
+        { key: 'columns', label: 'Columns', type: 'slider', min: 1, max: 12, step: 1, defaultValue: 3 },
+        { key: 'gap', label: 'Gap', type: 'slider', min: 0, max: 16, step: 1, defaultValue: 4 },
+        { key: 'rowHeight', label: 'Row height', type: 'input', defaultValue: '120', placeholder: 'px' },
+      ],
+    },
+    {
+      key: 'data',
+      title: 'Data',
+      collapsible: true,
+      fields: [
+        { key: 'refreshInterval', label: 'Refresh interval', type: 'select', options: [
+          { value: '0', label: 'Manual' },
+          { value: '30', label: '30s' },
+          { value: '60', label: '1 min' },
+          { value: '300', label: '5 min' },
+        ], defaultValue: '0' },
+        { key: 'autoRefresh', label: 'Auto-refresh', type: 'switch', defaultValue: false },
+      ],
+    },
+    {
+      key: 'appearance',
+      title: 'Appearance',
+      collapsible: true,
+      defaultCollapsed: true,
+      fields: [
+        { key: 'showTitle', label: 'Show title', type: 'switch', defaultValue: true },
+        { key: 'showDescription', label: 'Show description', type: 'switch', defaultValue: true },
+        { key: 'theme', label: 'Theme', type: 'select', options: [
+          { value: 'light', label: 'Light' },
+          { value: 'dark', label: 'Dark' },
+          { value: 'auto', label: 'Auto' },
+        ], defaultValue: 'auto' },
+      ],
+    },
+  ],
+};
+
+function DashboardPanelStory() {
+  const source = { columns: 3, gap: 4, rowHeight: '120', refreshInterval: '0', autoRefresh: false, showTitle: true, showDescription: true, theme: 'auto' };
+  const { draft, isDirty, updateField, discard } = useConfigDraft(source);
+  return (
+    <div style={{ position: 'relative', height: 600, width: 320, border: '1px solid #e5e7eb', borderRadius: 8, overflow: 'hidden' }}>
+      <ConfigPanelRenderer
+        open={true}
+        onClose={() => alert('Close')}
+        schema={dashboardSchema}
+        draft={draft}
+        isDirty={isDirty}
+        onFieldChange={updateField}
+        onSave={() => alert('Saved!')}
+        onDiscard={discard}
+      />
+    </div>
+  );
+}
+
+export const DashboardConfig: Story = {
+  render: () => <DashboardPanelStory />,
+};
+
+// Custom field escape hatch
+const customSchema: ConfigPanelSchema = {
+  breadcrumb: ['View', 'Config'],
+  sections: [
+    {
+      key: 'main',
+      title: 'General',
+      fields: [
+        { key: 'name', label: 'View name', type: 'input' },
+        {
+          key: 'rowHeight',
+          label: 'Row height',
+          type: 'custom',
+          render: (value, onChange) => (
+            <div style={{ display: 'flex', gap: 4, padding: '4px 0' }}>
+              {['compact', 'medium', 'tall'].map((h) => (
+                <button
+                  key={h}
+                  onClick={() => onChange(h)}
+                  style={{
+                    padding: '2px 8px',
+                    fontSize: 11,
+                    borderRadius: 4,
+                    border: value === h ? '2px solid #3b82f6' : '1px solid #d1d5db',
+                    background: value === h ? '#eff6ff' : 'transparent',
+                    cursor: 'pointer',
+                  }}
+                >
+                  {h}
+                </button>
+              ))}
+            </div>
+          ),
+        },
+      ],
+    },
+  ],
+};
+
+function CustomFieldStory() {
+  const source = { name: 'My Grid View', rowHeight: 'medium' };
+  const { draft, isDirty, updateField, discard } = useConfigDraft(source);
+  return (
+    <div style={{ position: 'relative', height: 400, width: 320, border: '1px solid #e5e7eb', borderRadius: 8, overflow: 'hidden' }}>
+      <ConfigPanelRenderer
+        open={true}
+        onClose={() => {}}
+        schema={customSchema}
+        draft={draft}
+        isDirty={isDirty}
+        onFieldChange={updateField}
+        onSave={() => alert('Saved!')}
+        onDiscard={discard}
+      />
+    </div>
+  );
+}
+
+export const CustomFieldEscapeHatch: Story = {
+  render: () => <CustomFieldStory />,
+};

package/src/types/config-panel.ts

@@ -0,0 +1,101 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Schema-driven config panel type definitions.
+ *
+ * Each concrete panel (View, Dashboard, Page…) provides a ConfigPanelSchema,
+ * and ConfigPanelRenderer auto-generates the UI.
+ */
+
+/** Supported control types for config fields */
+export type ControlType =
+  | 'input'
+  | 'switch'
+  | 'select'
+  | 'checkbox'
+  | 'slider'
+  | 'color'
+  | 'field-picker'
+  | 'filter'
+  | 'sort'
+  | 'icon-group'
+  | 'summary'
+  | 'custom';
+
+/** A single field within a config section */
+export interface ConfigField {
+  /** Field key in the draft object */
+  key: string;
+  /** Display label (may be an i18n key) */
+  label: string;
+  /** Control type determining which widget to render */
+  type: ControlType;
+  /** Default value for the field */
+  defaultValue?: any;
+  /** Select/icon-group options */
+  options?: Array<{ value: string; label: string; icon?: React.ReactNode }>;
+  /** Visibility predicate evaluated against the current draft */
+  visibleWhen?: (draft: Record<string, any>) => boolean;
+  /** Disabled predicate evaluated against the current draft */
+  disabledWhen?: (draft: Record<string, any>) => boolean;
+  /** Custom render function for type='custom' */
+  render?: (
+    value: any,
+    onChange: (v: any) => void,
+    draft: Record<string, any>,
+  ) => React.ReactNode;
+  /** Placeholder text for input/select controls */
+  placeholder?: string;
+  /** Help text displayed below the control */
+  helpText?: string;
+  /** Minimum value for slider */
+  min?: number;
+  /** Maximum value for slider */
+  max?: number;
+  /** Step value for slider */
+  step?: number;
+  /** Whether the field is disabled */
+  disabled?: boolean;
+  /** Field definitions for filter/sort sub-editors */
+  fields?: Array<{ value: string; label: string; type?: string; options?: Array<{ value: string; label: string }> }>;
+  /** Summary display text for type='summary' */
+  summaryText?: string;
+  /** Click handler for the summary gear/action button (type='summary') */
+  onSummaryClick?: () => void;
+}
+
+/** A group of related config fields */
+export interface ConfigSection {
+  /** Unique section key (used for collapse state tracking) */
+  key: string;
+  /** Section title (may be an i18n key) */
+  title: string;
+  /** Hint text displayed below the title */
+  hint?: string;
+  /** Icon displayed before the section title (e.g. a Lucide icon element) */
+  icon?: React.ReactNode;
+  /** Whether this section supports collapse/expand */
+  collapsible?: boolean;
+  /** Default collapsed state */
+  defaultCollapsed?: boolean;
+  /** Fields belonging to this section */
+  fields: ConfigField[];
+  /** Nested sub-sections for complex grouping */
+  subsections?: ConfigSection[];
+  /** Visibility predicate evaluated against the current draft */
+  visibleWhen?: (draft: Record<string, any>) => boolean;
+}
+
+/** Top-level schema describing an entire config panel */
+export interface ConfigPanelSchema {
+  /** Breadcrumb segments displayed in the panel header */
+  breadcrumb: string[];
+  /** Ordered list of sections */
+  sections: ConfigSection[];
+}

package/src/ui/dialog.tsx

@@ -46,14 +46,31 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        // Mobile-first: full-screen
+        "fixed inset-0 z-50 grid w-full bg-background p-4 shadow-lg duration-200",
+        "h-[100dvh]",
+        // Desktop (sm+): centered dialog with border + rounded corners
+        "sm:inset-auto sm:left-[50%] sm:top-[50%] sm:translate-x-[-50%] sm:translate-y-[-50%]",
+        "sm:max-w-lg sm:h-auto sm:max-h-[90vh] sm:rounded-lg sm:border sm:p-6",
+        // Animations
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
+        "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
         className
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
+      <DialogPrimitive.Close className={cn(
+        "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity",
+        "hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+        "disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+        // Mobile touch target ≥ 44×44px (WCAG 2.5.5)
+        "min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0 flex items-center justify-center",
+      )}>
+        <X className="h-5 w-5 sm:h-4 sm:w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>

package/src/ui/sheet.tsx

@@ -59,14 +59,17 @@ const sheetVariants = cva(
 
 interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
+    VariantProps<typeof sheetVariants> {
+  /** When true, the backdrop overlay is not rendered (useful for non-modal drawers) */
+  hideOverlay?: boolean;
+}
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   SheetContentProps
->(({ side = "right", className, children, ...props }, ref) => (
+>(({ side = "right", className, children, hideOverlay, ...props }, ref) => (
   <SheetPortal>
-    <SheetOverlay />
+    {!hideOverlay && <SheetOverlay />}
     <SheetPrimitive.Content
       ref={ref}
       className={cn(sheetVariants({ side }), className)}

package/src/ui/sidebar.tsx

@@ -39,6 +39,11 @@ const SIDEBAR_WIDTH = "16rem"
 const SIDEBAR_WIDTH_MOBILE = "18rem"
 const SIDEBAR_WIDTH_ICON = "3rem"
 const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+const SIDEBAR_WIDTH_STORAGE_KEY = "sidebar_width"
+const SIDEBAR_MIN_WIDTH = 200 // px
+const SIDEBAR_MAX_WIDTH = 480 // px
+const SIDEBAR_DEFAULT_WIDTH_PX = 256 // 16rem in px
+const SIDEBAR_CLICK_THRESHOLD_PX = 5
 
 type SidebarContextProps = {
   state: "expanded" | "collapsed"
@@ -48,6 +53,10 @@ type SidebarContextProps = {
   setOpenMobile: (open: boolean) => void
   isMobile: boolean
   toggleSidebar: () => void
+  /** Current sidebar width in pixels (only used when resizable) */
+  sidebarWidth: number | null
+  /** Update sidebar width (only used when resizable) */
+  setSidebarWidth: (width: number | null) => void
 }
 
 const SidebarContext = React.createContext<SidebarContextProps | null>(null)
@@ -84,6 +93,27 @@ const SidebarProvider = React.forwardRef<
     const isMobile = useIsMobile()
     const [openMobile, setOpenMobile] = React.useState(false)
 
+    // Resizable sidebar width state (persisted to localStorage)
+    const [sidebarWidth, setSidebarWidthState] = React.useState<number | null>(() => {
+      try {
+        const stored = localStorage.getItem(SIDEBAR_WIDTH_STORAGE_KEY)
+        if (!stored) return null
+        const value = Number(stored)
+        if (isNaN(value)) return null
+        return Math.max(SIDEBAR_MIN_WIDTH, Math.min(SIDEBAR_MAX_WIDTH, value))
+      } catch { return null }
+    })
+    const setSidebarWidth = React.useCallback((width: number | null) => {
+      setSidebarWidthState(width)
+      try {
+        if (width != null) {
+          localStorage.setItem(SIDEBAR_WIDTH_STORAGE_KEY, String(width))
+        } else {
+          localStorage.removeItem(SIDEBAR_WIDTH_STORAGE_KEY)
+        }
+      } catch { /* ignore */ }
+    }, [])
+
     // This is the internal state of the sidebar.
     // We use openProp and setOpenProp for control from outside the component.
     const [_open, _setOpen] = React.useState(defaultOpen)
@@ -139,8 +169,10 @@ const SidebarProvider = React.forwardRef<
         openMobile,
         setOpenMobile,
         toggleSidebar,
+        sidebarWidth,
+        setSidebarWidth,
       }),
-      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, sidebarWidth, setSidebarWidth]
     )
 
     return (
@@ -149,7 +181,7 @@ const SidebarProvider = React.forwardRef<
           <div
             style={
               {
-                "--sidebar-width": SIDEBAR_WIDTH,
+                "--sidebar-width": sidebarWidth ? `${sidebarWidth}px` : SIDEBAR_WIDTH,
                 "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
                 ...style,
               } as React.CSSProperties
@@ -307,7 +339,47 @@ const SidebarRail = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<"button">
 >(({ className, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar()
+  const { toggleSidebar, setSidebarWidth } = useSidebar()
+  const dragging = React.useRef(false)
+  const startX = React.useRef(0)
+  const startWidth = React.useRef(0)
+
+  const handlePointerDown = React.useCallback((e: React.PointerEvent) => {
+    // Only initiate resize on left mouse button
+    if (e.button !== 0) return
+    e.preventDefault()
+    dragging.current = true
+    startX.current = e.clientX
+
+    // Get the current sidebar width from computed CSS variable
+    const wrapper = (e.target as HTMLElement).closest('[style*="--sidebar-width"]') as HTMLElement | null
+    startWidth.current = wrapper
+      ? parseInt(getComputedStyle(wrapper).getPropertyValue('--sidebar-width')) || SIDEBAR_DEFAULT_WIDTH_PX
+      : SIDEBAR_DEFAULT_WIDTH_PX
+
+    const onPointerMove = (ev: PointerEvent) => {
+      if (!dragging.current) return
+      const delta = ev.clientX - startX.current
+      const newWidth = Math.max(SIDEBAR_MIN_WIDTH, Math.min(SIDEBAR_MAX_WIDTH, startWidth.current + delta))
+      setSidebarWidth(newWidth)
+    }
+
+    const onPointerUp = () => {
+      dragging.current = false
+      document.removeEventListener('pointermove', onPointerMove)
+      document.removeEventListener('pointerup', onPointerUp)
+    }
+
+    document.addEventListener('pointermove', onPointerMove)
+    document.addEventListener('pointerup', onPointerUp)
+  }, [setSidebarWidth])
+
+  const handleClick = React.useCallback((e: React.MouseEvent) => {
+    // Only toggle on click (not at end of drag)
+    if (Math.abs(e.clientX - startX.current) < SIDEBAR_CLICK_THRESHOLD_PX) {
+      toggleSidebar()
+    }
+  }, [toggleSidebar])
 
   return (
     <button
@@ -315,11 +387,13 @@ const SidebarRail = React.forwardRef<
       data-sidebar="rail"
       aria-label="Toggle Sidebar"
       tabIndex={-1}
-      onClick={toggleSidebar}
-      title="Toggle Sidebar"
+      onPointerDown={handlePointerDown}
+      onClick={handleClick}
+      onDoubleClick={() => setSidebarWidth(null)}
+      title="Drag to resize, click to toggle, double-click to reset"
       className={cn(
         "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
-        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+        "[[data-side=left]_&]:cursor-col-resize [[data-side=right]_&]:cursor-col-resize",
         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
         "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
         "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
@@ -340,7 +414,7 @@ const SidebarInset = React.forwardRef<
     <main
       ref={ref}
       className={cn(
-        "relative flex w-full flex-1 flex-col bg-background",
+        "relative flex min-w-0 w-full flex-1 flex-col bg-background overflow-hidden",
         "md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
         className
       )}
@@ -457,7 +531,7 @@ const SidebarGroupLabel = React.forwardRef<
       ref={ref}
       data-sidebar="group-label"
       className={cn(
-        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 border-t border-border/30 pt-3 mt-2 first:border-t-0 first:pt-0 first:mt-0",
         "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
         className
       )}
@@ -530,7 +604,17 @@ const SidebarMenuItem = React.forwardRef<
 SidebarMenuItem.displayName = "SidebarMenuItem"
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  [
+    "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding,color,background-color] duration-150",
+    "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground",
+    "disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50",
+    "data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground",
+    "data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground",
+    "group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+    // Active indicator bar (3px left accent)
+    "relative data-[active=true]:before:absolute data-[active=true]:before:left-0 data-[active=true]:before:top-1/2 data-[active=true]:before:-translate-y-1/2",
+    "data-[active=true]:before:h-4 data-[active=true]:before:w-[3px] data-[active=true]:before:rounded-full data-[active=true]:before:bg-primary",
+  ].join(" "),
   {
     variants: {
       variant: {