How francominelli11/keistars works
KeiStars is a browser-only commemorative star-map poster designer. A visitor enters the editor, sets a place and local date/time, chooses a theme, text, colors and print size, then previews and exports a PNG or print-ready PDF; designs can be autosaved locally or shared in a URL fragment. The graph covers the documented landing, place search, celestial rendering, poster composition and export stages. Some component wiring is supported by the SOURCE INDEX or README rather than sampled implementation, so uncertain connections are omitted.
Main entry points: PosterStage.tsx Poster stage · ControlPanel.tsx Control panel · App.tsx Editor shell · posterRender.ts Canvas composition
Components 29
Site and entry
- Route dispatch
src/main.tsx - Commercial landing
src/pages/Landing.tsx
Design editor
- Editor shell
src/App.tsx - Control panel
src/components/ControlPanel.tsx - Place search
src/components/LocationSection.tsx - Date and time
src/components/MomentSection.tsx - Poster text
src/components/CopySection.tsx - Sky options
src/components/SkySection.tsx - Themes and colors
src/lib/themes.ts - Poster state
src/state/poster.ts - City search hook
src/hooks/useCitySearch.ts
Celestial map
- Celestial map hook
src/hooks/useCelestialMap.ts - Map configuration
src/lib/celestialConfig.ts - Celestial map runtime
src/lib/celestialMap.ts - Engine loader
src/lib/celestialLoader.ts
Poster output
- Poster stage
src/components/PosterStage.tsx - Poster preview
src/components/PreviewModal.tsx - Poster layout
src/lib/posterLayout.ts - Canvas composition
src/lib/posterRender.ts - Print sizes
src/lib/posterSizes.ts - PNG export
src/lib/exportPoster.ts - PDF export
src/lib/exportPosterPdf.ts - Poster fonts
src/lib/fonts.ts
Persistence and services
- Place geocoding
src/lib/nominatim.ts - Save and share
src/lib/storage.ts
Other components
- Visitor
- Geocoding services
- Browser storage
- Share URL fragment
Connections 37
- Visitor → Route dispatch: opens site
README.md - Route dispatch → Commercial landing: routes to
src/main.tsx - Route dispatch → Editor shell: lazy loads
README.md - Visitor → Editor shell: designs poster
README.md - Editor shell → Control panel: renders
src/App.tsx - Editor shell → Poster stage: renders
src/App.tsx - Control panel → Place search: renders
src/components/ControlPanel.tsx - Control panel → Date and time: renders
src/components/ControlPanel.tsx - Control panel → Poster text: renders
src/components/ControlPanel.tsx - Control panel → Sky options: renders
src/components/ControlPanel.tsx - Control panel → Poster state: updates
src/components/ControlPanel.tsx - Place search → City search hook: searches with
- City search hook → Place geocoding: calls
src/hooks/useCitySearch.ts - Place geocoding → Geocoding services: queries Nominatim and Photon
README.md - Editor shell → Poster state: creates actions
src/App.tsx - Editor shell → Save and share: loads and saves
src/App.tsx - Save and share → Poster state: hydrates
src/lib/storage.ts - Save and share → Browser storage: persists design
- Save and share → Share URL fragment: encodes state
src/lib/storage.ts - Poster stage → Celestial map hook: uses
src/components/PosterStage.tsx - Celestial map hook → Map configuration: computes geometry
src/hooks/useCelestialMap.ts - Celestial map hook → Celestial map runtime: initializes and updates
src/hooks/useCelestialMap.ts - Celestial map runtime → Engine loader: loads engine
src/lib/celestialMap.ts - Map configuration → Themes and colors: builds theme style
src/lib/celestialConfig.ts - Poster stage → Poster preview: opens
src/components/PosterStage.tsx - Poster stage → PNG export: exports PNG
src/components/PosterStage.tsx - Poster stage → PDF export: exports PDF
src/components/PosterStage.tsx - Poster stage → Canvas composition: renders poster
src/components/PosterStage.tsx - Poster preview → Canvas composition: renders preview
src/components/PreviewModal.tsx - Canvas composition → Poster layout: gets geometry
src/lib/posterRender.ts - Canvas composition → Poster fonts: uses font specs
src/lib/posterRender.ts - PNG export → Canvas composition: composes canvas
src/lib/exportPoster.ts - PDF export → Canvas composition: composes canvas
src/lib/exportPosterPdf.ts - PNG export → Print sizes: uses dimensions
src/lib/exportPoster.ts - PDF export → Print sizes: uses print dimensions
src/lib/exportPosterPdf.ts - Poster stage → Print sizes: selects print format
src/components/PosterStage.tsx - Poster stage → Themes and colors: selects theme