Skip to content

@dashforge/tw: add <Drawer position resize> primitive (G-12) #108

Description

@kensaadi

Symptom

@dashforge/tw@1.1.1 ships <Dialog>, <Popover>, and <Menu> overlays but no <Drawer> primitive. The floating side-panel pattern (right-side Inspector, left/bottom tool drawers, mobile bottom sheets) is the primary layout for editor apps, DevTools, admin panels, and IDE-style shells — and there is no first-party way to build it.

Discovered while

Refactoring the Blueprint Builder V2 shell to use @dashforge/tw. Filed in Blueprint's dogfood report as G-12 (severity: blocker for editor UX).

Workaround applied in Blueprint

Wrapped a <Card> inside the AppShell footer slot with conditional render + custom flex — visually acceptable, but no resize handle, no proper focus trap, no aria-modal semantics, no consistent width persistence across sessions.

Acceptance

  • <Drawer position="right" | "left" | "bottom" | "top"> primitive shipped in @dashforge/tw
  • resize prop with drag handle on the free edge (persists width/height in a key-scoped storage entry, opt-out via prop)
  • Focus trap + aria-modal + Esc close (with disableEscapeKeyDown opt-out)
  • open + onOpenChange controlled interface consistent with <Dialog>
  • Slot API for header / body / footer (compatible with the Option C slotProps pattern in [1.2.0] Component Defaults System — theme.components + slotProps (Option C) #60)
  • MDX docs page in dashforge-docs-lab with live playground (position + resize + focus behaviors)

Related

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestpackage:twAffects @dashforge/tw package

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions