Dial-style button dock

component:

• filepath: /quartz/components/DialDock.tsx
• type: QuartzComponent
• rendering: build-time ONLY Preact function that renders static HTML strings and does NOT mount on the client layout_integration:
• file: /quartz.layout.ts
• export: sharedPageComponents
• placement: footer
• rationale: minimize dom thrashing during micromorph spa body replacements dom_and_styling:
• encapsulation: static css property returning component styles
• positioning: fixed bottom corner
• z_index: strictly above page content and below quartz search popovers
• layout: flex or radial calculations accessibility:
• parent_toggle:
  • aria_haspopup: menu
  • aria_expanded: dynamically bound to state
• child_items:
  • tabindex: disabled when dock is collapsed
• keyboard_events: - escape_key: collapse menu listener button_implementations:
• iconography: built-in lucide icon set
• global_search:
  • icon: Search
  • action: programmatically click existing .search node to leverage built-in modal
• dark_mode:
  • icon: Moon or Sun
  • action: toggle document.documentElement.dataset.theme and dispatch themechange
• read_mode:
  • icon: Book
  • action: dispatch custom readermodechange event
• chat:
  • icon: MessageCircle
• fullscreen: - icon: Maximize spa_lifecycle:
• entrypoint: static afterDOMLoaded string property providing client-side interactivity by concatenating plain JS strings
• event_binding:
  • document_event: wrapped entirely in document.addEventListener("nav", (e) => { ... }) for micromorph routing
  • dom_listeners: attaching event listeners to DOM nodes inside the nav event
  • memory_management: use window.addCleanup(() => ...) to remove all attached DOM listeners and prevent memory leaks during micromorph SPA routing
• state_persistence:
  • storage: sessionStorage.setItem("dialDockState", state)
  • restoration: parsed during nav events to maintain visual continuity across navigation