Dialogs

Modal / popover dialogs opened from the toolbar — color picker, font picker, icon picker, image crop, layers, design vars. Lives in packages/sdk/src/chrome/toolbar/dialogs/.

State for each dialog is held in Jotai-style atoms (dialogAtoms.ts) — open state + anchor rect / payload — so the trigger button can be unmounted by the time the dialog renders. Dialogs read the rect at click time and feed it into AnchoredPopover via anchorRect.

Key files

dialogAtoms.ts — atoms for every dialog's open/anchor state
Dialog.tsx — generic modal primitive
LeftSidebarDialog.tsx — variant docked to the left

Color

ColorPickerDialog.tsx — full picker (hex, rgba, eyedropper, palette)
ColorPickerSidebarDialog.tsx — sidebar-docked variant
colorPickerConstants.ts, useColorPickerState.ts

Fonts

FontFamilyDialog.tsx — searchable Google Fonts picker, weight selector, preview
FontPanel.tsx — inline toolbar font list
Curated rails + API-less fallback: PageHubConfig.curatedGoogleFontFamilies — see host-configuration.md. Defaults live in curatedGoogleFontFamilies.ts; runtime helpers in googleFonts.ts.

Icons

IconDialog/IconPickerPanel.tsx — full panel
IconDialog/IconPickerPopover.tsx — popover variant
IconDialog/components/, hooks/, utils/ — search, filtering, set tabs

Images

ImageCropModal.tsx + ImageCrop/ — crop / aspect / replace UI

Layers

Layers/ + LayersDialog.tsx — pop-out layer tree (also embedded in SidebarLayersPanel)
See sidebar.md for the docked variant

Design / system

DesignVarDialog.tsx — pick a CSS-var token (palette / styleGuide)
PatternDialog.tsx — bg pattern picker
TooltipDialog.tsx — edit a tooltip's content

Icons (loader)

ClientIconLoader.tsx, IconLoader.tsx — lazy-load react-icons sets

Pattern

Every dialog follows: Open atom + anchor rect atom + AnchoredPopover with anchorRect. This keeps the trigger lightweight (just sets atoms on click) and lets the dialog mount in a portal at .pagehub-sdk-root.

overlays — AnchoredPopover primitive
editor-popover-pattern.md