[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_263":264,"_265":266},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_198":-5,"_20":199,"_22":200,"_201":202,"_203":204,"_26":205,"_24":206,"_207":-5,"_208":-5,"_209":67,"_210":211,"_212":63,"_213":-5,"_214":-5,"_215":216},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","dinavinter","name","gallary","branchName","main","version","path","xstate-viewer/index.tsx","project",{"_33":144,"_13":14,"_47":145,"_146":-5,"_147":67,"_148":149,"_150":149,"_151":152,"_153":-5,"_154":155,"_156":129,"_157":63,"_158":-5,"_159":-5,"_160":84,"_161":162,"_163":-5,"_164":-5,"_165":-5,"_166":-5,"_167":168,"_169":168,"_170":171,"_172":171,"_173":171,"_174":168,"_175":168,"_176":177,"_178":179,"_180":181,"_182":67},"tree",[54,55,56,57],"file",{"_33":34,"_35":36,"_37":38,"_13":39,"_40":41,"_42":43,"_17":44,"_45":46,"_47":48,"_49":50,"_51":-5,"_18":52},"contents",[],"upstream","pull","ahead","behind","envVars","id","f926d46a-6c5a-462e-8469-399de6561477","branchId","89dd9e90-891f-45a2-aa18-f3512f064f79","fileId","a179c950-7e1d-11f1-affc-1607ee4eb77e","index.tsx","content","/** @jsxImportSource npm:hono/jsx */\nimport { streamSSE } from \"npm:hono/streaming\";\nimport { createActor, type AnyStateMachine } from \"npm:xstate\";\nimport * as Y from \"https://esm.sh/yjs@13.6.31?target=esnext\";\nimport { changes, sharedDoc, yjs } from \"../hono.yjs.tsx\";\n\ntype StateDefinition = {\n id: string;\n events: string[];\n};\n\ntype StoredInstance = {\n id: string;\n element: Y.XmlElement;\n snapshot?: Record;\n state?: string;\n context?: Record;\n error?: string;\n};\n\nconst MachineBoard = ({ states, instances, base }: { states: StateDefinition[]; instances: StoredInstance[]; base: string }) => (\n

\n {states.map((state) => (\n

State

{state.id}

\n \n {instances.filter((instance) => instance.state === state.id).length} pins\n \n

\n {state.events.map((event) => {event})}\n {!state.events.length && Final state}\n

\n {instances.filter((instance) => instance.state === state.id).map((instance) => (\n \n {instance.id}\n \n ))}\n

\n ))}\n {instances.filter((instance) => instance.error).map((instance) => (\n

Migration required

{instance.id}

{instance.error}

\n ))}\n

\n);\n\nconst Cursor = ({ instance, state, context, events, base }: { instance: string; state: unknown; context: Record; events: string[]; base: string }) => (\n \n);\n\nconst handler = yjs.createApp();\n\nhandler.use(\"/:definition/*\", async (c, next) => {\n const definition = c.req.param(\"definition\");\n if (!/^[a-z0-9-]+$/i.test(definition)) return c.text(\"Invalid machine definition.\", 400);\n try {\n const module = await import(`./machines/${definition}.ts`);\n const machine = module.default as AnyStateMachine | undefined;\n if (!machine || typeof machine.getInitialSnapshot !== \"function\") return c.text(\"Machine module must default-export an XState machine.\", 422);\n const fragment = sharedDoc().getXmlFragment(`xstate-machine:${definition}`);\n const definitionElement = new Y.XmlElement(\"machine\");\n definitionElement.setAttribute(\"id\", machine.id);\n definitionElement.setAttribute(\"initial\", String(machine.config.initial ?? \"\"));\n for (const [stateId, stateConfig] of Object.entries(machine.config.states ?? {})) {\n const stateElement = new Y.XmlElement(\"state\");\n stateElement.setAttribute(\"id\", stateId);\n for (const event of Object.keys((stateConfig as { on?: Record }).on ?? {})) {\n const eventElement = new Y.XmlElement(\"event\");\n eventElement.setAttribute(\"type\", event);\n stateElement.push([eventElement]);\n }\n definitionElement.push([stateElement]);\n }\n const currentDefinition = fragment.toArray().find((node): node is Y.XmlElement => node instanceof Y.XmlElement && node.nodeName === \"machine\");\n if (!currentDefinition || currentDefinition.toString() !== definitionElement.toString()) {\n fragment.doc?.transact(() => {\n if (currentDefinition) fragment.delete(fragment.toArray().indexOf(currentDefinition), 1);\n fragment.insert(0, [definitionElement]);\n }, \"xstate-definition-sync\");\n }\n c.set(\"machine\" as never, machine as never);\n c.set(\"fragment\" as never, fragment as never);\n await next();\n } catch {\n return c.text(`Machine definition ${definition} was not found.`, 404);\n }\n});\n\nhandler.get(\"/:definition\", (c) => {\n const definition = c.req.param(\"definition\");\n const machine = c.get(\"machine\" as never) as AnyStateMachine;\n const fragment = c.get(\"fragment\" as never) as Y.XmlFragment;\n const states: StateDefinition[] = fragment.toArray().find((node): node is Y.XmlElement => node instanceof Y.XmlElement && node.nodeName === \"machine\")?.toArray().filter((node): node is Y.XmlElement => node instanceof Y.XmlElement && node.nodeName === \"state\").map((state) => ({ id: state.getAttribute(\"id\") ?? \"\", events: state.toArray().filter((node): node is Y.XmlElement => node instanceof Y.XmlElement && node.nodeName === \"event\").map((event) => event.getAttribute(\"type\") ?? \"\") })) ?? [];\n const instances: StoredInstance[] = fragment.toArray().filter((node): node is Y.XmlElement => node instanceof Y.XmlElement && node.nodeName === \"instance\").map((element) => {\n const id = element.getAttribute(\"id\") ?? \"\";\n try {\n const snapshot = JSON.parse(element.getAttribute(\"snapshot\") ?? \"{}\") as Record;\n createActor(machine, { snapshot: snapshot as never }).start().stop();\n return { id, element, snapshot, state: typeof snapshot.value === \"string\" ? snapshot.value : JSON.stringify(snapshot.value), context: (snapshot.context ?? {}) as Record };\n } catch { return { id, element, error: \"The saved snapshot cannot be restored by the current TypeScript machine.\" }; }\n });\n const base = `/xstate-viewer/${encodeURIComponent(definition)}`;\n return c.render(\n

TypeScript XState machine

{machine.id}

Definition mirrored to Y.XmlFragment · snapshots persisted generically

\n \n

,\n );\n});\n\nhandler.get(\"/:definition/view\", (c) => {\n const fragment = c.get(\"fragment\" as never) as Y.XmlFragment;\n const definition = c.req.param(\"definition\");\n const machineElement = fragment.toArray().find((node): node is Y.XmlElement => node instanceof Y.XmlElement && node.nodeName === \"machine\");\n const states: StateDefinition[] = machineElement?.toArray().filter((node): node is Y.XmlElement => node instanceof Y.XmlElement && node.nodeName === \"state\").map((state) => ({ id: state.getAttribute(\"id\") ?? \"\", events: state.toArray().filter((node): node is Y.XmlElement => node instanceof Y.XmlElement && node.nodeName === \"event\").map((event) => event.getAttribute(\"type\") ?? \"\") })) ?? [];\n const instances: StoredInstance[] = fragment.toArray().filter((node): node is Y.XmlElement => node instanceof Y.XmlElement && node.nodeName === \"instance\").map((element) => { try { const snapshot = JSON.parse(element.getAttribute(\"snapshot\") ?? \"{}\"); return { id: element.getAttribute(\"id\") ?? \"\", element, snapshot, state: typeof snapshot.value === \"string\" ? snapshot.value : JSON.stringify(snapshot.value), context: snapshot.context ?? {} }; } catch { return { id: element.getAttribute(\"id\") ?? \"\", element, error: \"Invalid persisted snapshot.\" }; } });\n return c.render();\n});\n\nhandler.post(\"/:definition/instances\", async (c) => {\n const machine = c.get(\"machine\" as never) as AnyStateMachine;\n const fragment = c.get(\"fragment\" as never) as Y.XmlFragment;\n const body = await c.req.parseBody();\n const id = String(body.instance ?? \"\").trim();\n if (!id) return c.text(\"Instance ID is required.\", 400);\n if (fragment.toArray().some((node) => node instanceof Y.XmlElement && node.nodeName === \"instance\" && node.getAttribute(\"id\") === id)) return c.text(`Instance ${id} already exists.`, 409);\n const input = Object.fromEntries(Object.entries(body).filter(([key, value]) => key !== \"instance\" && String(value).length));\n const actor = createActor(machine, { input });\n actor.start();\n const persisted = actor.getPersistedSnapshot();\n actor.stop();\n const element = new Y.XmlElement(\"instance\");\n element.setAttribute(\"id\", id);\n element.setAttribute(\"snapshot\", JSON.stringify(persisted));\n fragment.doc?.transact(() => fragment.push([element]), \"xstate-create-instance\");\n c.header(\"HX-Trigger\", JSON.stringify({ \"xstate-instance-changed\": { instance: id } }));\n return c.redirect(`/xstate-viewer/${encodeURIComponent(c.req.param(\"definition\"))}/view`, 303);\n});\n\nhandler.get(\"/:definition/:instance/cursor\", (c) => {\n const machine = c.get(\"machine\" as never) as AnyStateMachine;\n const fragment = c.get(\"fragment\" as never) as Y.XmlFragment;\n const id = c.req.param(\"instance\");\n const element = fragment.toArray().find((node): node is Y.XmlElement => node instanceof Y.XmlElement && node.nodeName === \"instance\" && node.getAttribute(\"id\") === id);\n if (!element) return c.text(\"Instance not found.\", 404);\n try {\n const actor = createActor(machine, { snapshot: JSON.parse(element.getAttribute(\"snapshot\") ?? \"{}\") as never });\n actor.start();\n const snapshot = actor.getSnapshot();\n const events = [...new Set(snapshot._nodes.flatMap((node) => node.ownEvents.map(String)))];\n actor.stop();\n return c.render(} events={events} base={`/xstate-viewer/${encodeURIComponent(c.req.param(\"definition\"))}`} />);\n } catch { return c.text(\"This snapshot requires migration before it can be restored.\", 409); }\n});\n\nhandler.post(\"/:definition/:instance\", async (c) => {\n const machine = c.get(\"machine\" as never) as AnyStateMachine;\n const fragment = c.get(\"fragment\" as never) as Y.XmlFragment;\n const id = c.req.param(\"instance\");\n const element = fragment.toArray().find((node): node is Y.XmlElement => node instanceof Y.XmlElement && node.nodeName === \"instance\" && node.getAttribute(\"id\") === id);\n if (!element) return c.text(\"Instance not found.\", 404);\n try {\n const body = await c.req.parseBody();\n const type = String(body.event ?? \"\");\n const actor = createActor(machine, { snapshot: JSON.parse(element.getAttribute(\"snapshot\") ?? \"{}\") as never });\n actor.start();\n actor.send({ type, ...Object.fromEntries(Object.entries(body).filter(([key]) => key !== \"event\")) });\n const persisted = actor.getPersistedSnapshot();\n actor.stop();\n fragment.doc?.transact(() => element.setAttribute(\"snapshot\", JSON.stringify(persisted)), \"xstate-send-event\");\n c.header(\"HX-Trigger\", JSON.stringify({ \"xstate-instance-changed\": { instance: id } }));\n return c.redirect(`/xstate-viewer/${encodeURIComponent(c.req.param(\"definition\"))}/${encodeURIComponent(id)}/cursor`, 303);\n } catch { return c.text(\"The event could not be applied to this actor snapshot.\", 409); }\n});\n\nhandler.get(\"/:definition/stream\", (c) => {\n const fragment = c.get(\"fragment\" as never) as Y.XmlFragment;\n return streamSSE(c, async (stream) => {\n for await (const _ of changes(fragment, c.req.raw.signal)) await stream.writeSSE({ event: \"xstate-machine-changed\", data: \"{}\" });\n });\n});\n\nexport { handler };\n\nexport default yjs.createApp().get(\"/\", (c) => c.redirect(\"/demo\")).route(\"/\", handler).fetch;\n","fileType","http",2,"parentId","a15fb290-7e1d-11f1-9a99-1607ee4eb77e","createdAt",["D",1783883806610],"branchVersion",23,"label",[53,39],"xstate-viewer",{"_33":109,"_13":110,"_37":111,"_45":-5,"_35":36,"_49":44,"_62":63,"_47":112,"_17":84,"_42":85,"_40":-5,"_66":67,"_51":-5,"_68":113,"_18":114},{"_33":81,"_13":53,"_37":46,"_45":-5,"_35":36,"_49":82,"_62":63,"_47":83,"_17":84,"_42":85,"_40":-5,"_66":67,"_51":-5,"_68":86,"_18":87},{"_33":71,"_13":72,"_37":73,"_45":-5,"_35":36,"_49":74,"_62":63,"_47":75,"_17":76,"_42":77,"_40":78,"_66":67,"_51":-5,"_68":79,"_18":80},{"_33":58,"_13":59,"_37":60,"_45":-5,"_35":36,"_49":61,"_62":63,"_47":64,"_17":44,"_42":43,"_40":65,"_66":67,"_51":-5,"_68":69,"_18":70},"f3e32ae2-18a0-427c-b331-72383b9de763","main.tsx","56976634-7b90-11f1-87f2-1607ee4eb77e",18,"latest",true,["D",1783880115316],"/** @jsxImportSource npm:hono/jsx */\nimport { yjs } from \"./hono.yjs.tsx\";\nimport { handler as toggle } from \"./toggle/index.tsx\";\nimport { handler as xstateViewer } from \"./xstate-viewer/index.tsx\";\n\n/**\n * The gallery router — the val's HTTP entry point.\n *\n * Built from the shared factory (`yjs.createApp()` → cors + base document\n * renderer), it composes each component handler at its own path. Every handler\n * pins its own component key, so `toggle` is reached at `/toggle/:instance`\n * here, while the SAME handler is also deployable standalone from\n * `toggle/index.tsx`'s default export — identical state keys either way.\n *\n * Add more components by dropping a folder next to `toggle/` and mounting its\n * handler here with another `.route(\"/\", handler)`.\n */\nconst app = yjs\n .createApp()\n .get(\"/\", (c) =>\n c.render(\n

Component Gallery

\n Headless Hono SSR components with htmx + Yjs sync. Each component is a\n self-contained handler, composed here and deployable standalone.\n

\n \n

,\n ),\n )\n .route(\"/toggle\", toggle)\n .route(\"/xstate-viewer\", xstateViewer);\n\nexport default app.fetch;\n","deleted",false,"children",[],[59],"bc52ea86-bb21-4b55-9867-3fe8fe620351","hono.yjs.tsx","8d922a5c-7b90-11f1-9d4f-1607ee4eb77e",19,["D",1783880115345],6,"script","/** @jsxImportSource npm:hono/jsx */\nimport type { Context } from \"npm:hono\";\nimport { cors } from \"npm:hono/cors\";\nimport { createFactory } from \"npm:hono/factory\";\nimport { jsxRenderer } from \"npm:hono/jsx-renderer\";\nimport { basePath } from \"npm:hono/route\";\nimport * as Y from \"https://esm.sh/yjs@13.6.31?target=esnext\";\nimport { connectYjs } from \"https://esm.town/v/dinavinter/doc\";\n\n/** Shared Hono factory and Yjs utilities for SSR components. */\n\n/** Request state injected by `state(component)`. */\nexport type YjsEnv = {\n Variables: {\n doc: Y.Doc;\n map: Y.Map;\n waitForState: (want: boolean, timeoutMs?: number) => Promise;\n };\n};\n\nfunction waitForState(\n map: Y.Map,\n want: boolean,\n timeoutMs: number,\n signal: AbortSignal,\n): Promise {\n const current = () => map.get(\"value\") === true;\n if (current() === want) return Promise.resolve();\n\n return new Promise((resolve) => {\n const finish = () => {\n map.unobserve(observer);\n clearTimeout(timer);\n signal.removeEventListener(\"abort\", onAbort);\n resolve();\n };\n const observer = () => {\n if (current() === want) finish();\n };\n const onAbort = () => finish();\n const timer = setTimeout(finish, timeoutMs);\n\n map.observe(observer);\n signal.addEventListener(\"abort\", onAbort);\n });\n}\n\n/** One lazily connected process-wide document, keyed `component:instance`. */\nlet doc: Y.Doc | undefined;\nexport function sharedDoc(): Y.Doc {\n if (!doc) doc = connectYjs(new Y.Doc({ guid: \"components\" })) as unknown as Y.Doc;\n return doc;\n}\nfunction mapFor(component: string, instance: string): Y.Map {\n return sharedDoc().getMap(`${component}:${instance}`);\n}\n\nconst isHx = (c: { req: { header: (name: string) => string | undefined } }) =>\n c.req.header(\"HX-Request\") === \"true\";\n\nexport const renderer = jsxRenderer(\n ({ children }, c) => {\n if (isHx(c)) return <>{children};\n return (\n \n \n \n \n Component Gallery\n \n \n \n \n \n {children}\n \n );\n },\n (c) => ({ stream: true, docType: !isHx(c) }),\n);\n\n/** Configured app factory shared by standalone and composed components. */\nexport const yjs = createFactory({\n initApp(app) {\n app.use(\"/*\", cors());\n app.get(\"*\", renderer);\n },\n});\n\n/** Per-instance Yjs middleware with a stable component key. */\nexport const state = (component: string) =>\n yjs.createMiddleware(async (c, next) => {\n const instance = c.req.param(\"instance\")!;\n const map = mapFor(component, instance);\n\n c.set(\"doc\", doc!);\n c.set(\"map\", map);\n c.set(\"waitForState\", (want, timeoutMs = 30_000) =>\n waitForState(map, want, timeoutMs, c.req.raw.signal)\n );\n await next();\n });\n\n/** Mount-aware URL of the current component instance. */\nexport const instancePath = (c: Context) =>\n `${basePath(c).replace(/\\/$/, \"\")}/${c.req.param(\"instance\")!}`;\n\n/** Stream real Y.Map changes until the request is aborted. */\nexport async function* changes(\n type: Y.AbstractType,\n signal: AbortSignal,\n): AsyncGenerator {\n const queued: string[] = [];\n let wake: (() => void) | undefined;\n const observer = (event: Y.YEvent) => {\n const keys = \"keysChanged\" in event\n ? [...(event.keysChanged as Set)]\n : [\"change\"];\n queued.push(...keys.map(String));\n wake?.();\n wake = undefined;\n };\n type.observe(observer);\n try {\n while (!signal.aborted) {\n if (!queued.length) await new Promise((resolve) => {\n wake = resolve;\n signal.addEventListener(\"abort\", () => resolve(), { once: true });\n });\n while (queued.length) yield queued.shift()!;\n }\n } finally {\n type.unobserve(observer);\n }\n}\n",[],[72],"4366f974-524f-40e5-9a13-155e0b10c28c",16,["D",1783880115111],0,"directory",[88,89],[53],{"_33":93,"_13":94,"_37":95,"_45":46,"_35":36,"_49":96,"_62":63,"_47":97,"_17":84,"_42":85,"_40":-5,"_66":67,"_51":-5,"_68":98,"_18":99},{"_33":34,"_13":39,"_37":38,"_45":46,"_35":36,"_49":50,"_62":63,"_47":90,"_17":44,"_42":43,"_40":41,"_66":67,"_51":-5,"_68":91,"_18":92},["D",1783883806610],[],[53,39],"5b34a320-570a-42cc-801d-daceeee18715","machines","39957470-7e26-11f1-9772-1607ee4eb77e",21,["D",1783883806507],[100],[53,94],{"_33":101,"_13":102,"_37":103,"_45":95,"_35":36,"_49":104,"_62":63,"_47":105,"_17":84,"_42":77,"_40":106,"_66":67,"_51":-5,"_68":107,"_18":108},"4a279837-0e56-4cc4-9dd5-bdc9a33fba4c","demo.ts","39a082de-7e26-11f1-92d5-1607ee4eb77e",22,["D",1783883806577],"import { assign, setup } from \"npm:xstate\";\n\ntype Context = {\n owner: string;\n count: number;\n value?: string;\n};\n\ntype Event =\n | { type: \"START\"; owner?: string; value?: string }\n | { type: \"FINISH\" }\n | { type: \"RESET\" };\n\nexport default setup({\n types: {\n context: {} as Context,\n events: {} as Event,\n },\n}).createMachine({\n id: \"demo\",\n initial: \"idle\",\n context: ({ input }) => ({\n owner: String((input as Record | undefined)?.owner ?? \"\"),\n count: 0,\n }),\n states: {\n idle: {\n on: {\n START: {\n target: \"running\",\n actions: assign(({ context, event }) => ({\n owner: event.owner ?? context.owner,\n value: event.value ?? context.value,\n })),\n },\n },\n },\n running: {\n on: {\n FINISH: {\n target: \"complete\",\n actions: assign({ count: ({ context }) => context.count + 1 }),\n },\n },\n },\n complete: {\n on: {\n RESET: \"idle\",\n },\n },\n },\n});\n",[],[53,94,102],"1c2f5d02-c60b-40f9-a913-8f20aa8f27f8","toggle","677b21a2-7b90-11f1-9d92-1607ee4eb77e",["D",1783599556675],[115,116,117],[110],{"_33":136,"_13":137,"_37":138,"_45":111,"_35":36,"_49":139,"_62":63,"_47":140,"_17":44,"_42":24,"_40":141,"_66":67,"_51":-5,"_68":142,"_18":143},{"_33":128,"_13":39,"_37":129,"_45":111,"_35":36,"_49":130,"_62":63,"_47":131,"_17":132,"_42":43,"_40":133,"_66":67,"_51":110,"_68":134,"_18":135},{"_33":118,"_13":119,"_37":120,"_45":111,"_35":36,"_49":121,"_62":63,"_47":122,"_17":123,"_42":43,"_40":124,"_66":67,"_51":125,"_68":126,"_18":127},"7bd75a63-5ec9-4f98-a08e-05c978e0ae42","toggle.meta.tsx","33f304d4-7e2f-11f1-a31d-1607ee4eb77e",43,["D",1783917659495],13,"/** @jsxImportSource npm:hono/jsx */\nimport { sharedDoc, yjs } from \"../hono.yjs.tsx\";\n\n/** Machine-readable contract for the routes implemented in `index.tsx`. */\nexport const toggleMeta = {\n component: \"toggle\",\n summary: \"A small Hono + htmx toggle whose boolean value is shared through Yjs.\",\n mount: \"/toggle\",\n state: {\n key: \"toggle:\",\n map: {\n value: \"boolean\",\n },\n },\n behavior: [\n \"The instance route keeps one SSE connection alive and loads the current button fragment.\",\n \"Posting /on or /off writes the requested boolean and swaps only the button.\",\n \"A Yjs value change emits an SSE event named on or off so other clients load the matching fragment.\",\n ],\n routes: [\n { method: \"GET\", path: \"/\", description: \"Render the component metadata UI.\" },\n { method: \"GET\", path: \"/list\", description: \"Render autocomplete options from existing Yjs instances.\" },\n { method: \"GET\", path: \"/:instance\", description: \"Persistent htmx and SSE wrapper.\" },\n { method: \"GET\", path: \"/:instance/on\", description: \"Wait for true, then render the ON button.\" },\n { method: \"POST\", path: \"/:instance/on\", description: \"Set true and render the ON button.\" },\n { method: \"GET\", path: \"/:instance/off\", description: \"Wait for false, then render the OFF button.\" },\n { method: \"POST\", path: \"/:instance/off\", description: \"Set false and render the OFF button.\" },\n { method: \"GET\", path: \"/:instance/stream\", description: \"Emit named on/off SSE events after value changes.\" },\n { method: \"GET\", path: \"/:instance/inspect\", description: \"Return the shared CRDT document as JSON.\" },\n ],\n exports: {\n handler: \"Composable Hono app for app.route('/toggle', handler).\",\n default: \"Standalone fetch handler; / renders the metadata UI.\",\n },\n} as const;\n\nconst instances = () =>\n [...sharedDoc().share.keys()]\n .filter((key) => key.startsWith(`${toggleMeta.component}:`))\n .map((key) => key.slice(toggleMeta.component.length + 1))\n .filter((instance) => instance && !instance.includes(\":\"))\n .sort();\n\nexport const handler = yjs\n .createApp()\n .get(\"/\", (c) => {\n const mount = new URL(c.req.url).pathname.replace(/\\/$/, \"\");\n return c.render();\n })\n .get(\"/list\", (c) =>\n c.render(\n \n {instances().map((instance) => )}\n ,\n ),\n );\n\nexport function ToggleMeta({ mount }: { mount: string }) {\n return (\n

Component contract

{toggleMeta.component}

{toggleMeta.summary}

\n\n

Shared state

\n \n {toggleMeta.state.key} → {\"{ value: boolean }\"}\n \n

\n\n

Routes

\n Choose an existing Yjs instance\n

\n
\n {route.method} {route.path}\n
{route.description}
\n
\n {hasInstance && route.method === \"GET\" && (\n \n Instance\n \n \n Open\n \n \n )}\n

\n );\n}\n","toggle-meta",[],[110,119],"1fcb4831-b955-4035-8a07-747df640ba51","b1d7da38-7b90-11f1-af08-1607ee4eb77e",45,["D",1783917659512],10,"/** @jsxImportSource npm:hono/jsx */\nimport { streamSSE } from \"npm:hono/streaming\";\nimport { changes, instancePath, state, yjs } from \"../hono.yjs.tsx\";\nimport { handler as meta } from \"./toggle.meta.tsx\";\n\n/**\n * Embeddable Hono + htmx toggle backed by a shared Yjs document.\n *\n * `GET /:instance` renders the persistent SSE/styling wrapper and loads the\n * current button from `/on` or `/off`. Each button posts the opposite state and\n * carries a hidden listener for the opposite named SSE event. Both paths replace\n * only the button with `outerHTML`, so the wrapper and SSE connection persist.\n *\n * `state(\"toggle\")` keys each map as `toggle:`, while\n * `instancePath(c)` keeps generated URLs valid when this app is mounted at `/`\n * standalone or composed under `/toggle`.\n */\n\n\n/* -------------------------------- routes ------------------------------- */\n\nconst handler = yjs.createApp();\nconst toggleState = state(\"toggle\");\n\n// The component metadata module owns the default UI.\nhandler.route(\"/\", meta);\n\nhandler.use(\"/:instance\", toggleState);\nhandler.use(\"/:instance/*\", toggleState);\n\n// Persistent SSE/styling wrapper. The loaded button remains its direct child,\n// so the shared `*:` styles do not need to be repeated by the state routes.\nhandler.get(\"/:instance\", (c) => {\n const base = instancePath(c);\n const on = c.get(\"map\").get(\"value\") === true;\n return c.render(\n \n

,\n );\n});\n\n// ON button: POST switches off; its nested listener handles remote `off` events.\nhandler.on([\"GET\", \"POST\"], \"/:instance/on\", async (c) => {\n const base = instancePath(c);\n const { map, waitForState } = c.var;\n if (c.req.method === \"POST\") {\n map.set(\"value\", true);\n } else {\n await waitForState(true, Number(c.req.query(\"timeout\")) || 30_000);\n }\n return c.render(\n \n \n \n \n \n \n \n ON\n Click to turn off\n \n \n ,\n );\n});\n\n// OFF button: POST switches on; its nested listener handles remote `on` events.\nhandler.on([\"GET\", \"POST\"], \"/:instance/off\", async (c) => {\n const base = instancePath(c);\n const { map, waitForState } = c.var;\n if (c.req.method === \"POST\") {\n map.set(\"value\", false);\n } else {\n await waitForState(false, Number(c.req.query(\"timeout\")) || 30_000);\n }\n return c.render(\n \n \n \n \n \n \n \n OFF\n Click to turn on\n \n \n ,\n );\n});\n\n// Emit the new state as both the SSE event name and data on each real change.\nhandler.get(\"/:instance/stream\", (c) => {\n const { map } = c.var;\n return streamSSE(c, async (stream) => {\n for await (const _ of changes(map, c.req.raw.signal)) {\n const state = map.get(\"value\") ? \"on\" : \"off\";\n await stream.writeSSE({ event: state, data: state });\n }\n });\n});\n\n// Debug: inspect the whole CRDT state (all instances of this component).\nhandler.get(\"/:instance/inspect\", (c) => c.json(c.var.doc.toJSON()));\n\n/* ------------------------------- exports ------------------------------- */\n\n// Composable route app: `app.route(\"/toggle\", handler)`.\nexport { handler };\n\n// Standalone fetch handler; the component root renders the metadata UI.\nexport default yjs.createApp().route(\"/\", handler).fetch;\n",[],[110,39],"6c508f6b-6f11-4d67-b2bb-6abfc09fea13","README.md","33fc0bf6-7e2f-11f1-934b-1607ee4eb77e",44,["D",1783917659521],"# Toggle\n\nA small composable Hono + htmx component backed by shared Yjs state. Each instance owns one boolean at `toggle:.value` and stays synchronized across clients through named Server-Sent Events.\n\n## Files\n\n| File | Purpose |\n| --- | --- |\n| `index.tsx` | Toggle routes, rendered button fragments, Yjs mutations, SSE synchronization, and exports. |\n| `toggle.meta.tsx` | Machine-readable contract plus the handler and metadata UI mounted at the component root. |\n| `README.md` | Usage and endpoint reference. |\n| `template.tsx` | Parked fragment/template experiment; it is not mounted by `index.tsx`. |\n\n## How it works\n\n1. `GET /` renders the component metadata UI with interactive GET routes.\n2. `GET /list` reads existing `toggle:*` maps from Yjs and returns their instance names as autocomplete options; it never seeds instances.\n3. Choosing an instance on a parameterized GET route uses htmx path parameters to open that example.\n4. `GET /:instance` renders a persistent wrapper with one SSE connection.\n5. The wrapper loads either `/:instance/on` or `/:instance/off` based on the current Yjs value.\n6. Clicking the button posts the opposite route, which writes `value` and swaps only the button with `outerHTML`.\n7. Every real `value` change emits an SSE event named `on` or `off`, updating other connected buttons.\n\nNo transition logic or client-side state store is required.\n\n## Routes\n\nThe paths below are relative to the component mount point. In the combined gallery, the handler is mounted at `/toggle`.\n\n| Route | Behavior |\n| --- | --- |\n| `GET /` | Render the metadata UI with route controls. |\n| `GET /list` | Return a datalist populated from existing Yjs toggle instances. |\n| `GET /:instance` | Render the persistent htmx/SSE wrapper. |\n| `GET /:instance/on` | Wait until the value is `true`, then render the ON button. Optional `?timeout=ms`; default is 30 seconds. |\n| `POST /:instance/on` | Set the value to `true` and render the ON button. |\n| `GET /:instance/off` | Wait until the value is `false`, then render the OFF button. Optional `?timeout=ms`; default is 30 seconds. |\n| `POST /:instance/off` | Set the value to `false` and render the OFF button. |\n| `GET /:instance/stream` | Stream named `on` and `off` events when `value` changes. |\n| `GET /:instance/inspect` | Return the shared Yjs document as JSON for debugging. |\n\n## Composition\n\n```ts\nimport { handler as toggle } from \"./components/toggle\";\n\napp.route(\"/toggle\", toggle);\n```\n\nOpen `/toggle` for the component contract, or navigate directly to an instance such as `/toggle/job1`.\n\n## Standalone export\n\nThe default export is a fetch handler. Its root renders the same metadata UI.\n\n```ts\nimport toggle from \"./components/toggle\";\n\nexport default toggle;\n```\n\n## Dependencies\n\nThe parent Yjs factory provides:\n\n- `state(\"toggle\")` middleware for the instance map and long-poll helper.\n- `instancePath(c)` for mount-safe URLs.\n- `changes(map, signal)` for Yjs change observation.\n- The shared JSX renderer, htmx, SSE extension, Iconify, and Tailwind browser runtime.\n",[],[110,137],"50c582a3-a1a6-4c6c-8677-8613bbc316ef",["D",1783599528265],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Component gallery: headless Hono SSR + htmx + Yjs","imageUrl","userId","6d45e71e-9df4-45e8-82ab-e09c45bfc5a1","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","b636164b-34c9-4e0c-9d39-dd3dc6f25436","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_197":193},"org",{"_11":12,"_191":-5,"_192":193,"_154":155,"_194":195,"_196":67},"branch",{"_17":130,"_13":16,"_33":36,"_183":144,"_184":-5,"_185":-5,"_186":-5,"_187":-5,"_188":-5,"_189":14,"_190":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycVgxSUNRd1V1VDlqTnNmYUh6MDA0VW1ldlMifQ","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":144,"_13":14,"_47":259,"_146":-5,"_147":67,"_148":149,"_150":149,"_151":152,"_153":-5,"_154":155,"_156":129,"_157":63,"_158":-5,"_159":-5,"_160":84,"_161":162,"_163":-5,"_164":-5,"_165":-5,"_166":-5,"_167":168,"_169":168,"_170":171,"_172":171,"_173":171,"_174":168,"_175":168,"_176":260,"_178":261,"_180":262,"_182":67},[229,233,237,238],"files",[229,230,231,232,233,234,235,236,237,238],"counts",{"_219":84,"_220":221,"_222":84,"_32":223,"_224":225},[],{"_33":34,"_35":36,"_37":38,"_13":39,"_40":41,"_42":43,"_17":44,"_45":46,"_47":217,"_49":50,"_51":-5,"_18":218},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1783883806610],[53,39],"pulls","branches",1,"forks",{"_226":221,"_228":84},"connections",{"_226":84,"_227":84},"count","unfilledCount","emptyCount",{"_33":109,"_13":110,"_37":111,"_45":-5,"_35":36,"_49":44,"_62":63,"_47":112,"_17":84,"_42":85,"_40":-5,"_66":67,"_51":-5,"_68":257,"_18":258},{"_33":136,"_13":137,"_37":138,"_45":111,"_35":36,"_49":139,"_62":63,"_47":140,"_17":44,"_42":24,"_40":141,"_66":67,"_51":-5,"_68":255,"_18":256},{"_33":128,"_13":39,"_37":129,"_45":111,"_35":36,"_49":130,"_62":63,"_47":131,"_17":132,"_42":43,"_40":133,"_66":67,"_51":110,"_68":253,"_18":254},{"_33":118,"_13":119,"_37":120,"_45":111,"_35":36,"_49":121,"_62":63,"_47":122,"_17":123,"_42":43,"_40":124,"_66":67,"_51":125,"_68":251,"_18":252},{"_33":81,"_13":53,"_37":46,"_45":-5,"_35":36,"_49":82,"_62":63,"_47":83,"_17":84,"_42":85,"_40":-5,"_66":67,"_51":-5,"_68":249,"_18":250},{"_33":93,"_13":94,"_37":95,"_45":46,"_35":36,"_49":96,"_62":63,"_47":97,"_17":84,"_42":85,"_40":-5,"_66":67,"_51":-5,"_68":247,"_18":248},{"_33":101,"_13":102,"_37":103,"_45":95,"_35":36,"_49":104,"_62":63,"_47":105,"_17":84,"_42":77,"_40":106,"_66":67,"_51":-5,"_68":245,"_18":246},{"_33":34,"_13":39,"_37":38,"_45":46,"_35":36,"_49":50,"_62":63,"_47":90,"_17":44,"_42":43,"_40":41,"_66":67,"_51":-5,"_68":243,"_18":244},{"_33":71,"_13":72,"_37":73,"_45":-5,"_35":36,"_49":74,"_62":63,"_47":75,"_17":76,"_42":77,"_40":78,"_66":67,"_51":-5,"_68":241,"_18":242},{"_33":58,"_13":59,"_37":60,"_45":-5,"_35":36,"_49":61,"_62":63,"_47":64,"_17":44,"_42":43,"_40":65,"_66":67,"_51":-5,"_68":239,"_18":240},[],[59],[],[72],[],[53,39],[],[53,94,102],[235],[53,94],[234,236],[53],[],[110,119],[],[110,39],[],[110,137],[230,231,232],[110],["D",1783599528265],{"_11":12,"_197":193},{"_11":12,"_191":-5,"_192":193,"_154":155,"_194":195,"_196":67},{"_17":130,"_13":16,"_33":36,"_183":144,"_184":-5,"_185":-5,"_186":-5,"_187":-5,"_188":-5,"_189":14,"_190":12},"ctx",{"_176":-5,"_214":296,"_297":298,"_299":300,"_301":67,"_302":67,"_303":67,"_304":63,"_305":-5,"_306":-7,"_307":-7,"_308":84,"_309":67,"_310":67,"_311":-5,"_312":67,"_313":67,"_314":67,"_315":-5},"ENV",{"_267":268,"_269":270,"_271":16,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]