ComposeWindow

Attio's own note compose-window chrome (measured live, read-only), not a new visual recipe: it reuses Dialog's exact measured frosted-glass panel (bgOverlayFrost 60% + blur(15px), elevation.modal's 3-layer shadow, 16px outer radius). What's different from Dialog is the header (a breadcrumb plus minimize/pin/close, not a title plus close) and two extra pieces of state Dialog has no concept of — minimized and pinned. Not modal: the page behind stays visibly interactive, and Dialog's own transparent backdrop is reused (the blur alone does the separation).

Every open/minimized/pinned bit is controlled — ComposeWindow has no router dependency, so a consumer syncs it to a URL itself, the way Attio's own note window is addressable (?id=…&modal=note).

Installation

npm install @crisp-ui-kit/crisp

Props

Compose the body with ComposeWindowBody.

Notes

• minimized hides the panel rather than unmounting it — measured live: minimizing an existing note produces no bar, tray, dock, or badge anywhere on screen (the first version of this file guessed a Gmail-style dock; re-measured, there is none). The subtree stays mounted at visibility: hidden; opacity: 0, so crisp renders no restore affordance of its own — reopening is the consumer's own UI, driven by minimized/onMinimizedChange the same way open already works.
• pinned is the one directly-supported behavior that matches its name: while pinned, clicking outside the window doesn't close it (Zag's closeOnInteractOutside, off while pinned). Attio's own multi-instance stacking/docking when pinned wasn't exercised, so nothing here repositions the window.
• width (default 968, Attio's own measured note-window width) matches Dialog's own width knob — content width in px, clamped to 90vw.
• breadcrumb is the header's leading area, typically a link to whatever record the window is attached to — rendered as-is, unstyled beyond spacing.