@actuate-media/cms-admin 0.72.2 → 0.73.0

package/src/__tests__/components/resizable-aside.test.tsx

@@ -0,0 +1,130 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import {
+  InspectorExpandButton,
+  ResizableAside,
+  SECTION_INSPECTOR_DEFAULT_WIDTH,
+  SECTION_INSPECTOR_MIN_WIDTH,
+  SECTION_INSPECTOR_WIDTH_KEY,
+  computeInspectorMaxWidth,
+  computeInspectorOverlayWidth,
+  readSectionInspectorWidth,
+} from '../../components/ui/ResizableAside.js'
+
+const storage = new Map<string, string>()
+vi.stubGlobal('localStorage', {
+  getItem: (key: string) => storage.get(key) ?? null,
+  setItem: (key: string, value: string) => void storage.set(key, String(value)),
+  removeItem: (key: string) => void storage.delete(key),
+  clear: () => storage.clear(),
+})
+
+vi.stubGlobal(
+  'ResizeObserver',
+  class {
+    constructor(private callback: ResizeObserverCallback) {}
+    observe(target: Element) {
+      const width =
+        target instanceof HTMLElement
+          ? Number.parseFloat(target.style.width) || target.clientWidth || 900
+          : 900
+      this.callback([{ contentRect: { width, height: 600 } } as ResizeObserverEntry], this)
+    }
+    unobserve() {}
+    disconnect() {}
+  },
+)
+
+afterEach(() => {
+  storage.clear()
+})
+
+describe('inspector width helpers', () => {
+  it('caps inline max width to the container minus a canvas peek', () => {
+    expect(computeInspectorMaxWidth(1200)).toBe(640)
+    expect(computeInspectorMaxWidth(500)).toBe(404)
+    expect(computeInspectorMaxWidth(200)).toBe(SECTION_INSPECTOR_MIN_WIDTH)
+  })
+
+  it('computes overlay width for narrow editor rows', () => {
+    expect(computeInspectorOverlayWidth(375)).toBe(343)
+    expect(computeInspectorOverlayWidth(768)).toBe(480)
+  })
+})
+
+describe('ResizableAside', () => {
+  it('renders a vertical resize separator with keyboard support', () => {
+    render(
+      <div style={{ width: 900 }}>
+        <ResizableAside aria-label="Section editor">
+          <p>Inspector content</p>
+        </ResizableAside>
+      </div>,
+    )
+
+    expect(screen.getByText('Inspector content')).toBeTruthy()
+    const separator = screen.getByRole('separator', { name: 'Resize inspector panel' })
+    expect(separator.getAttribute('aria-orientation')).toBe('vertical')
+    expect(separator.getAttribute('aria-valuemin')).toBe(String(SECTION_INSPECTOR_MIN_WIDTH))
+  })
+
+  it('widens when dragging the separator left', () => {
+    render(
+      <div style={{ width: 900 }}>
+        <ResizableAside aria-label="Section editor">
+          <p>Inspector content</p>
+        </ResizableAside>
+      </div>,
+    )
+
+    const aside = screen.getByLabelText('Section editor')
+    const separator = screen.getByRole('separator', { name: 'Resize inspector panel' })
+
+    expect(aside.style.width).toBe(`${SECTION_INSPECTOR_DEFAULT_WIDTH}px`)
+
+    fireEvent.pointerDown(separator, { clientX: 900, button: 0, pointerId: 1 })
+    fireEvent.pointerMove(separator, { clientX: 860, pointerId: 1 })
+    expect(aside.style.width).toBe(`${SECTION_INSPECTOR_DEFAULT_WIDTH + 40}px`)
+
+    fireEvent.pointerUp(separator, { pointerId: 1 })
+    expect(localStorage.getItem(SECTION_INSPECTOR_WIDTH_KEY)).toBe(
+      String(SECTION_INSPECTOR_DEFAULT_WIDTH + 40),
+    )
+  })
+
+  it('nudges width with arrow keys and persists', () => {
+    render(
+      <div style={{ width: 900 }}>
+        <ResizableAside aria-label="Section editor">
+          <p>Inspector content</p>
+        </ResizableAside>
+      </div>,
+    )
+
+    const aside = screen.getByLabelText('Section editor')
+    const separator = screen.getByRole('separator', { name: 'Resize inspector panel' })
+
+    separator.focus()
+    fireEvent.keyDown(separator, { key: 'ArrowLeft' })
+    expect(aside.style.width).toBe(`${SECTION_INSPECTOR_DEFAULT_WIDTH + 16}px`)
+    expect(readSectionInspectorWidth()).toBe(SECTION_INSPECTOR_DEFAULT_WIDTH + 16)
+  })
+
+  it('expands to overlay width on narrow containers', () => {
+    render(
+      <div style={{ width: 375 }}>
+        <ResizableAside aria-label="Section editor">
+          <InspectorExpandButton />
+          <p>Inspector content</p>
+        </ResizableAside>
+      </div>,
+    )
+
+    const aside = screen.getByLabelText('Section editor')
+    fireEvent.click(screen.getByRole('button', { name: 'Expand inspector panel' }))
+
+    expect(aside.getAttribute('data-overlay')).toBe('')
+    expect(aside.style.width).toBe(`${computeInspectorOverlayWidth(375)}px`)
+  })
+})

package/src/__tests__/components/toggle.test.tsx

@@ -0,0 +1,17 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import { Toggle } from '../../components/ui/Toggle.js'
+
+afterEach(cleanup)
+
+describe('Toggle', () => {
+  it('positions the thumb with design-system absolute offsets', () => {
+    render(<Toggle checked={false} onCheckedChange={() => {}} aria-label="Test toggle" />)
+    const thumb = screen.getByRole('switch').querySelector('span')
+    expect(thumb?.className).toContain('absolute')
+    expect(thumb?.className).toContain('top-[2.5px]')
+    expect(thumb?.className).toContain('left-[2.5px]')
+    expect(thumb?.className).toContain('data-[state=checked]:left-[19.5px]')
+  })
+})

package/src/__tests__/views/post-fields-modal.render.test.tsx

@@ -21,6 +21,17 @@ vi.mock('../../fields/RichTextField.js', () => ({
   RichTextField: () => <div data-testid="rich-text" />,
 }))
 
+vi.mock('../../lib/coauthor-client.js', () => ({
+  coauthorText: vi.fn(async () => ({
+    ok: true,
+    result: { action: 'compress', text: 'AI excerpt' },
+  })),
+}))
+
+vi.mock('../../lib/seo-service.js', () => ({
+  generateSeoField: vi.fn(async () => ({ text: 'AI SEO title' })),
+}))
+
 const { PostFieldsModal } = await import('../../views/post-editor/PostFieldsModal.js')
 type ModalProps = Parameters<typeof PostFieldsModal>[0]
 
@@ -123,4 +134,47 @@ describe('PostFieldsModal', () => {
       expect.objectContaining({ category: 'tutorials', tags: ['AI', 'CMS'] }),
     )
   })
+
+  it('derives slug from title until the slug field is edited', () => {
+    render(
+      <PostFieldsModal
+        open
+        post={basePost({ title: '', slug: '' })}
+        canEdit
+        onClose={() => {}}
+        onSave={() => {}}
+      />,
+    )
+    fireEvent.change(screen.getByLabelText(/^Title/), { target: { value: 'Hello World' } })
+    expect((screen.getByLabelText(/^Slug/) as HTMLInputElement).value).toBe('hello-world')
+    fireEvent.change(screen.getByLabelText(/^Slug/), { target: { value: 'custom-slug' } })
+    fireEvent.change(screen.getByLabelText(/^Title/), { target: { value: 'Changed Title' } })
+    expect((screen.getByLabelText(/^Slug/) as HTMLInputElement).value).toBe('custom-slug')
+  })
+
+  it('exposes AI generate controls for excerpt and SEO fields', () => {
+    render(<PostFieldsModal open post={basePost()} canEdit onClose={() => {}} onSave={() => {}} />)
+    expect(screen.getByRole('button', { name: 'Generate excerpt from content' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Generate SEO title from content' })).toBeTruthy()
+    expect(
+      screen.getByRole('button', { name: 'Generate SEO description from content' }),
+    ).toBeTruthy()
+  })
+
+  it('prompts before discarding when Cancel is clicked with unsaved edits', () => {
+    const onClose = vi.fn()
+    render(<PostFieldsModal open post={basePost()} canEdit onClose={onClose} onSave={() => {}} />)
+    fireEvent.change(screen.getByLabelText(/^Title/), { target: { value: 'Changed title' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+    expect(onClose).not.toHaveBeenCalled()
+    expect(screen.getByRole('dialog', { name: 'Discard unsaved changes?' })).toBeTruthy()
+  })
+
+  it('closes without prompting when nothing changed', () => {
+    const onClose = vi.fn()
+    render(<PostFieldsModal open post={basePost()} canEdit onClose={onClose} onSave={() => {}} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+    expect(onClose).toHaveBeenCalledTimes(1)
+    expect(screen.queryByRole('dialog', { name: 'Discard unsaved changes?' })).toBeNull()
+  })
 })

package/src/components/MediaPickerModal.tsx

@@ -129,10 +129,14 @@ export function MediaPickerModal({
   return (
     <Dialog.Root open={open} onOpenChange={(next) => !next && onClose()}>
       <Dialog.Portal container={adminPortalContainer()}>
-        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/40" />
+        {/*
+          z-70 so this picker stacks above the z-60 form modals that embed it
+          (PostFieldsModal featured image, TipTap insert image, etc.).
+        */}
+        <Dialog.Overlay className="fixed inset-0 z-70 bg-black/40" />
         <Dialog.Content
           aria-describedby={undefined}
-          className="bg-card text-card-foreground border-border fixed top-1/2 left-1/2 z-50 mx-4 flex max-h-[80vh] w-[calc(100%-2rem)] max-w-2xl -translate-x-1/2 -translate-y-1/2 flex-col rounded-xl border shadow-2xl focus:outline-none"
+          className="bg-card text-card-foreground border-border fixed top-1/2 left-1/2 z-70 mx-4 flex max-h-[80vh] w-[calc(100%-2rem)] max-w-2xl -translate-x-1/2 -translate-y-1/2 flex-col rounded-xl border shadow-2xl focus:outline-none"
         >
           <div className="border-border flex items-center justify-between border-b px-4 py-3">
             <Dialog.Title className="text-foreground text-lg font-medium">

package/src/components/TagInput.tsx

@@ -35,7 +35,7 @@ interface FieldValuesResponse {
 }
 
 const INPUT =
-  'border-input bg-input-background text-foreground focus-visible:ring-ring w-full rounded-md border px-2.5 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none'
+  'border-border bg-input-background text-foreground focus-visible:ring-ring w-full rounded-md border px-2.5 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none'
 
 export function TagInput({
   id,

package/src/components/ui/Modal.tsx

@@ -5,12 +5,23 @@ import { X } from 'lucide-react'
 import { type ReactNode, type RefObject } from 'react'
 import { adminPortalContainer } from '../../lib/portal-container.js'
 
+const MODAL_SIZE_CLASS = {
+  md: 'max-w-lg',
+  lg: 'max-w-3xl',
+  /** Wide form dialogs (post/page field editors) — body scrolls inside the shell. */
+  xl: 'flex max-h-[min(92vh,880px)] max-w-5xl flex-col',
+} as const
+
+export type ModalSize = keyof typeof MODAL_SIZE_CLASS
+
 export interface ModalProps {
   open: boolean
   onClose: () => void
   title: string
   children: ReactNode
   actions?: ReactNode
+  /** Dialog width preset. Defaults to `md` (512px). */
+  size?: ModalSize
   /**
    * Accessible description for the dialog, announced after the title. Optional —
    * omit when the body content is self-explanatory.
@@ -22,6 +33,12 @@ export interface ModalProps {
    * form dialogs where the user should land in the first input.
    */
   initialFocusRef?: RefObject<HTMLElement | null>
+  /**
+   * When set, overlay click, Escape, and the header X invoke this instead of
+   * closing immediately — use to confirm before discarding unsaved edits.
+   * The dialog stays open until the parent calls `onClose()`.
+   */
+  onDismiss?: () => void
 }
 
 /**
@@ -41,15 +58,39 @@ export function Modal({
   title,
   children,
   actions,
+  size = 'md',
   description,
   initialFocusRef,
+  onDismiss,
 }: ModalProps) {
+  const scrollBody = size === 'xl'
+
+  function handleDismissAttempt() {
+    if (onDismiss) onDismiss()
+    else onClose()
+  }
+
   return (
-    <Dialog.Root open={open} onOpenChange={(next) => !next && onClose()}>
+    <Dialog.Root
+      open={open}
+      onOpenChange={(next) => {
+        if (!next) handleDismissAttempt()
+      }}
+    >
       <Dialog.Portal container={adminPortalContainer()}>
         <Dialog.Overlay className="fixed inset-0 z-60 bg-black/50" />
         <Dialog.Content
-          className="bg-card text-card-foreground border-border fixed top-1/2 left-1/2 z-60 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl focus:outline-none"
+          className={`bg-card text-card-foreground border-border fixed top-1/2 left-1/2 z-60 w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl focus:outline-none ${MODAL_SIZE_CLASS[size]}`}
+          onInteractOutside={(event) => {
+            if (!onDismiss) return
+            event.preventDefault()
+            handleDismissAttempt()
+          }}
+          onEscapeKeyDown={(event) => {
+            if (!onDismiss) return
+            event.preventDefault()
+            handleDismissAttempt()
+          }}
           onOpenAutoFocus={
             initialFocusRef
               ? (event) => {
@@ -78,7 +119,9 @@ export function Modal({
               {description}
             </Dialog.Description>
           )}
-          <div className="px-6 py-4">{children}</div>
+          <div className={scrollBody ? 'min-h-0 flex-1 overflow-y-auto px-6 py-4' : 'px-6 py-4'}>
+            {children}
+          </div>
           {actions && (
             <div className="border-border flex justify-end gap-2 border-t px-6 py-4">{actions}</div>
           )}

package/src/components/ui/ResizableAside.tsx

@@ -0,0 +1,317 @@
+'use client'
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  type ComponentPropsWithoutRef,
+  type KeyboardEvent,
+  type PointerEvent,
+  type ReactNode,
+} from 'react'
+import { Maximize2, Minimize2 } from 'lucide-react'
+
+export const SECTION_INSPECTOR_WIDTH_KEY = 'actuate:section-inspector-width'
+export const SECTION_INSPECTOR_DEFAULT_WIDTH = 320
+export const SECTION_INSPECTOR_MIN_WIDTH = 280
+export const SECTION_INSPECTOR_MAX_WIDTH = 640
+export const SECTION_INSPECTOR_MIN_CANVAS_WIDTH = 96
+/** Below this editor-row width the expand action uses an overlay panel. */
+export const SECTION_INSPECTOR_OVERLAY_BREAKPOINT = 768
+export const SECTION_INSPECTOR_OVERLAY_MAX_WIDTH = 480
+
+function clampWidth(width: number, max = SECTION_INSPECTOR_MAX_WIDTH): number {
+  return Math.min(max, Math.max(SECTION_INSPECTOR_MIN_WIDTH, width))
+}
+
+/** Max inline width given the surrounding editor row. */
+export function computeInspectorMaxWidth(containerWidth: number): number {
+  if (!Number.isFinite(containerWidth) || containerWidth <= 0) {
+    return SECTION_INSPECTOR_MAX_WIDTH
+  }
+  const containerCap = Math.max(
+    SECTION_INSPECTOR_MIN_WIDTH,
+    containerWidth - SECTION_INSPECTOR_MIN_CANVAS_WIDTH,
+  )
+  return Math.min(SECTION_INSPECTOR_MAX_WIDTH, containerCap)
+}
+
+/** Width when expanded as an overlay on tablet/mobile. */
+export function computeInspectorOverlayWidth(containerWidth: number): number {
+  if (!Number.isFinite(containerWidth) || containerWidth <= 0) {
+    return SECTION_INSPECTOR_OVERLAY_MAX_WIDTH
+  }
+  return Math.min(
+    SECTION_INSPECTOR_OVERLAY_MAX_WIDTH,
+    Math.max(SECTION_INSPECTOR_MIN_WIDTH, containerWidth - 32),
+  )
+}
+
+export function readSectionInspectorWidth(): number {
+  if (typeof window === 'undefined') return SECTION_INSPECTOR_DEFAULT_WIDTH
+  try {
+    const raw = localStorage.getItem(SECTION_INSPECTOR_WIDTH_KEY)
+    if (!raw) return SECTION_INSPECTOR_DEFAULT_WIDTH
+    const parsed = Number.parseInt(raw, 10)
+    if (!Number.isFinite(parsed)) return SECTION_INSPECTOR_DEFAULT_WIDTH
+    return clampWidth(parsed)
+  } catch {
+    return SECTION_INSPECTOR_DEFAULT_WIDTH
+  }
+}
+
+function persistSectionInspectorWidth(width: number, max = SECTION_INSPECTOR_MAX_WIDTH): void {
+  try {
+    localStorage.setItem(SECTION_INSPECTOR_WIDTH_KEY, String(clampWidth(width, max)))
+  } catch {
+    // Storage may be unavailable in private mode.
+  }
+}
+
+interface InspectorResizeContextValue {
+  width: number
+  maxWidth: number
+  isExpanded: boolean
+  canExpand: boolean
+  toggleExpanded: () => void
+}
+
+const InspectorResizeContext = createContext<InspectorResizeContextValue | null>(null)
+
+export function useInspectorResize(): InspectorResizeContextValue | null {
+  return useContext(InspectorResizeContext)
+}
+
+interface ResizableAsideProps extends ComponentPropsWithoutRef<'aside'> {
+  children: ReactNode
+}
+
+/**
+ * Right-hand editor shell with a draggable left edge. Used by the page/post
+ * section inspector and post header panel (default 320px, persisted in
+ * localStorage). On tablet/mobile the handle uses a 44px touch target and
+ * the header expand button can grow the panel to an overlay width.
+ */
+export function ResizableAside({ children, className, style, ...props }: ResizableAsideProps) {
+  const asideRef = useRef<HTMLElement>(null)
+  const [width, setWidth] = useState(SECTION_INSPECTOR_DEFAULT_WIDTH)
+  const [containerWidth, setContainerWidth] = useState(0)
+  const [isExpanded, setIsExpanded] = useState(false)
+  const [dragging, setDragging] = useState(false)
+  const widthRef = useRef(width)
+  const compactWidthRef = useRef(SECTION_INSPECTOR_DEFAULT_WIDTH)
+  const dragRef = useRef<{ startX: number; startWidth: number } | null>(null)
+
+  const inlineMax = computeInspectorMaxWidth(containerWidth)
+  const overlayMax = computeInspectorOverlayWidth(containerWidth)
+  const useOverlay =
+    containerWidth > 0 && containerWidth < SECTION_INSPECTOR_OVERLAY_BREAKPOINT && isExpanded
+  const effectiveMax = useOverlay ? overlayMax : inlineMax
+
+  useEffect(() => {
+    setWidth(readSectionInspectorWidth())
+  }, [])
+
+  useEffect(() => {
+    widthRef.current = width
+  }, [width])
+
+  useEffect(() => {
+    const parent = asideRef.current?.parentElement
+    if (!parent) return
+
+    const update = (nextWidth: number) => {
+      setContainerWidth(nextWidth)
+    }
+
+    update(parent.getBoundingClientRect().width)
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0]
+      if (!entry) return
+      update(entry.contentRect.width)
+    })
+    observer.observe(parent)
+    return () => observer.disconnect()
+  }, [])
+
+  useEffect(() => {
+    setWidth((current) => clampWidth(current, effectiveMax))
+  }, [effectiveMax])
+
+  const endDrag = useCallback(() => {
+    dragRef.current = null
+    setDragging(false)
+    document.body.style.cursor = ''
+    document.body.style.userSelect = ''
+    persistSectionInspectorWidth(widthRef.current, inlineMax)
+    if (widthRef.current < effectiveMax - 24) {
+      setIsExpanded(false)
+    }
+  }, [effectiveMax, inlineMax])
+
+  const onPointerDown = useCallback((event: PointerEvent<HTMLDivElement>) => {
+    if (event.button !== 0) return
+    dragRef.current = { startX: event.clientX, startWidth: widthRef.current }
+    setDragging(true)
+    event.currentTarget.setPointerCapture(event.pointerId)
+    document.body.style.cursor = 'col-resize'
+    document.body.style.userSelect = 'none'
+  }, [])
+
+  const onPointerMove = useCallback(
+    (event: PointerEvent<HTMLDivElement>) => {
+      if (!dragRef.current) return
+      const delta = dragRef.current.startX - event.clientX
+      setWidth(clampWidth(dragRef.current.startWidth + delta, effectiveMax))
+    },
+    [effectiveMax],
+  )
+
+  const onPointerUp = useCallback(
+    (event: PointerEvent<HTMLDivElement>) => {
+      if (!dragRef.current) return
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId)
+      }
+      endDrag()
+    },
+    [endDrag],
+  )
+
+  const nudgeWidth = useCallback(
+    (delta: number) => {
+      setWidth((current) => {
+        const next = clampWidth(current + delta, effectiveMax)
+        persistSectionInspectorWidth(next, inlineMax)
+        if (next < effectiveMax - 24) setIsExpanded(false)
+        return next
+      })
+    },
+    [effectiveMax, inlineMax],
+  )
+
+  const onKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault()
+        nudgeWidth(16)
+      } else if (event.key === 'ArrowRight') {
+        event.preventDefault()
+        nudgeWidth(-16)
+      } else if (event.key === 'Home') {
+        event.preventDefault()
+        setIsExpanded(false)
+        setWidth(SECTION_INSPECTOR_MIN_WIDTH)
+        persistSectionInspectorWidth(SECTION_INSPECTOR_MIN_WIDTH, inlineMax)
+      } else if (event.key === 'End') {
+        event.preventDefault()
+        setWidth(effectiveMax)
+        persistSectionInspectorWidth(effectiveMax, inlineMax)
+        setIsExpanded(effectiveMax >= inlineMax - 8)
+      }
+    },
+    [effectiveMax, inlineMax, nudgeWidth],
+  )
+
+  const toggleExpanded = useCallback(() => {
+    if (isExpanded) {
+      const restored = clampWidth(compactWidthRef.current, inlineMax)
+      setIsExpanded(false)
+      setWidth(restored)
+      persistSectionInspectorWidth(restored, inlineMax)
+      return
+    }
+
+    compactWidthRef.current = widthRef.current
+    const target =
+      containerWidth > 0 && containerWidth < SECTION_INSPECTOR_OVERLAY_BREAKPOINT
+        ? overlayMax
+        : inlineMax
+    setIsExpanded(true)
+    setWidth(target)
+    persistSectionInspectorWidth(target, inlineMax)
+  }, [containerWidth, inlineMax, isExpanded, overlayMax])
+
+  useEffect(() => {
+    return () => {
+      if (dragRef.current) endDrag()
+    }
+  }, [endDrag])
+
+  const canExpand =
+    !isExpanded &&
+    (containerWidth > 0 && containerWidth < SECTION_INSPECTOR_OVERLAY_BREAKPOINT
+      ? overlayMax > width + 8
+      : inlineMax > width + 8)
+
+  return (
+    <InspectorResizeContext.Provider
+      value={{ width, maxWidth: effectiveMax, isExpanded, canExpand, toggleExpanded }}
+    >
+      <aside
+        {...props}
+        ref={asideRef}
+        data-overlay={useOverlay ? '' : undefined}
+        className={`relative shrink-0 ${useOverlay ? 'absolute top-0 right-0 bottom-0 z-20 shadow-lg' : ''} ${className ?? ''}`}
+        style={{ width, ...style }}
+      >
+        <div
+          role="separator"
+          aria-orientation="vertical"
+          aria-label="Resize inspector panel"
+          aria-valuemin={SECTION_INSPECTOR_MIN_WIDTH}
+          aria-valuemax={effectiveMax}
+          aria-valuenow={width}
+          tabIndex={0}
+          data-dragging={dragging ? '' : undefined}
+          onPointerDown={onPointerDown}
+          onPointerMove={onPointerMove}
+          onPointerUp={onPointerUp}
+          onPointerCancel={onPointerUp}
+          onKeyDown={onKeyDown}
+          className="group absolute inset-y-0 -left-5 z-10 flex w-11 -translate-x-1/2 cursor-col-resize touch-none focus-visible:outline-none md:-left-1 md:w-3 md:translate-x-0"
+        >
+          <div
+            className={`mx-auto h-full w-px motion-safe:transition-colors md:mx-0 ${
+              dragging
+                ? 'bg-primary'
+                : 'bg-border group-hover:bg-primary/50 group-focus-visible:bg-primary/50'
+            }`}
+          />
+        </div>
+        {children}
+      </aside>
+    </InspectorResizeContext.Provider>
+  )
+}
+
+const EXPAND_BUTTON_CLASS =
+  'text-muted-foreground hover:text-foreground hover:bg-accent flex h-9 w-9 items-center justify-center rounded-md transition-colors focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none md:h-7 md:w-7'
+
+/** One-tap expand/collapse for tablet and mobile inspector panels. */
+export function InspectorExpandButton({ className }: { className?: string }) {
+  const ctx = useInspectorResize()
+  if (!ctx) return null
+
+  const { isExpanded, canExpand, toggleExpanded } = ctx
+  if (!canExpand && !isExpanded) return null
+
+  return (
+    <button
+      type="button"
+      onClick={toggleExpanded}
+      aria-label={isExpanded ? 'Collapse inspector panel' : 'Expand inspector panel'}
+      aria-pressed={isExpanded}
+      className={className ?? EXPAND_BUTTON_CLASS}
+    >
+      {isExpanded ? (
+        <Minimize2 className="h-4 w-4" aria-hidden />
+      ) : (
+        <Maximize2 className="h-4 w-4" aria-hidden />
+      )}
+    </button>
+  )
+}

package/src/components/ui/Toggle.tsx

@@ -4,7 +4,7 @@ import * as Switch from '@radix-ui/react-switch'
 import { cv, type VariantProps } from '../../lib/cv.js'
 
 const toggleTrack = cv(
-  'relative inline-flex shrink-0 cursor-pointer rounded-[var(--r-pill)] transition-colors duration-[var(--motion-base)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+  'relative inline-block shrink-0 cursor-pointer rounded-[var(--r-pill)] border-0 p-0 transition-colors duration-[var(--motion-base)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
   {
     variants: {
       variant: {
@@ -26,11 +26,12 @@ const toggleTrack = cv(
 )
 
 const toggleThumb = cv(
-  'pointer-events-none block rounded-full bg-[var(--toggle-thumb)] shadow-[0_1px_3px_rgba(0,0,0,0.2)] transition-transform duration-[var(--motion-base)]',
+  'pointer-events-none absolute top-[2.5px] left-[2.5px] block rounded-full bg-[var(--toggle-thumb)] shadow-[0_1px_3px_rgba(0,0,0,0.2)] transition-[left] duration-[var(--motion-base)] data-[state=checked]:left-[19.5px]',
   {
     variants: {
       size: {
-        md: 'h-4 w-4 translate-x-0.5 data-[state=checked]:translate-x-[17.5px]',
+        /** Matches `.tog-thumb` in the design system handoff (16×16). */
+        md: 'h-4 w-4',
       },
     },
     defaultVariants: {