Kando svelte

[SimHacker]

Svelte 5 pie menu implementation aligned with Kando (data, theme, and code compatible)

Goal: Build a Svelte 5/SvelteKit implementation of Kando’s pie menu that reuses (and where practical, copies verbatim) Kando’s code, APIs, schemas, algorithms, and contracts, while preserving attribution and licenses. Keep naming and structure aligned so both projects stay in sync; use Svelte 5 only as the packaging/rendering layer. No editor in Svelte initially—design menus/themes in Kando and import them into Svelte apps (e.g., Micropolis) seamlessly. Eventually add a SvelteKit editor.

High-level requirements

• Load and render Kando menu JSONs and Kando menu themes (theme.json5 + theme.css) as-is.
• Reproduce Kando’s geometry and interaction (angles, wedges, connectors, selection chain, hover/drag/click semantics) so the same data yields the same UX.
• Keep engine concerns (geometry, input, state) separate from skinning (theme layers + CSS custom properties) and from app wiring (SvelteKit-specific loading and routes).
• Svelte 5 features: use runes ($state/$derived/$effect) for local state/derivations, pass snippets for theme layer templating, and provide small, composable components.

Proof of Concept Milestone

This PR includes a directory of notes about the design and implementation plan in notes/kando-svelte.md, and two SvelteKit apps: a library kando-svelte and a demo kando-svelte-demo.

They do not actually implement pie menus yet, but they load the settings.5json and menus.json5 files, and print them on the web page.

The kando-svelte library includes a default theme and null audio theme, but more themes and menus can be added by users of the library like the demo.

The goal is to directly use as much of Kando's code and data as possible, and possibly refactor kando code to make it more reusable and platform agnostic, so the svelte implementation can share as much code and contracts as possible.

[Schneegans]

Thank you so much for the initiative! I have send you an e-mail (actually two by now). Did you receive them?

[SimHacker]

Your original reply disappeared into a black hole, but fortunately I received your second reply, thanks for persevering!

Do you think a monorepo + pnpm would be a good way to go?

I think I should slice this big hairy pr up into smaller more focused branches and issues+prs.

1. initialize monorepo and set up pnpm and module exports
2. implement mouse button trigger support on mac platform (more to come)
3. implement svelte kando wrapper and demo

[SimHacker]

Here is a design document proposing an extension to support mouse button and gamepad triggers.

https://github.com/kando-menu/kando/blob/2ee2c2609658ea990cfef88f72c620c8c1894c55/kando-svelte/notes/button-trigger-support.md

[SimHacker]

This is about generating Web Components with Svelte:

https://github.com/kando-menu/kando/blob/2ee2c2609658ea990cfef88f72c620c8c1894c55/kando-svelte/notes/kando-web-component.md

[SimHacker]

Monorepofication and pnpmping out. #1169