[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_207":208,"_209":210},"routes/_app.x.$handle.$name",{"_97":96,"_32":45,"_105":87,"_27":106,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":-5,"_118":-5,"_119":25,"_120":121,"_122":59,"_123":-5,"_124":-5,"_125":126},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":25},"version",18,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","56976634-7b90-11f1-87f2-1607ee4eb77e","name","fileType","http","content","/** @jsxImportSource npm:hono/jsx */\nimport { yjs } from \"./hono.yjs.tsx\";\nimport { handler as toggle } from \"./toggle/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\nexport default app.fetch;\n","/** @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","createdAt",["D",1783880115316],"branchVersion","branchId","89dd9e90-891f-45a2-aa18-f3512f064f79","id","50c582a3-a1a6-4c6c-8677-8613bbc316ef","gallary",["D",1783599528265],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Component gallery: headless Hono SSR + htmx + Yjs","imageUrl","6d45e71e-9df4-45e8-82ab-e09c45bfc5a1","pinnedFileId","b1d7da38-7b90-11f1-af08-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","b636164b-34c9-4e0c-9d39-dd3dc6f25436","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_97":96,"_104":100},"org",{"_97":96,"_98":-5,"_99":100,"_18":55,"_101":102,"_103":25},"branch",{"_13":86,"_32":87,"_43":42,"_88":44,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":45,"_95":96},"isOwned",45,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","dinavinter","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycVgxSUNRd1V1VDlqTnNmYUh6MDA0VW1ldlMifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":203,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":204,"_81":205,"_83":206,"_85":25},"tree",[170,172,174,175],"files",[170,171,172,173,174,175],"counts",{"_159":63,"_160":161,"_162":63,"_163":164,"_165":166},"contents",[127,128,129,130],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":154,"_32":155,"_30":156,"_132":-5,"_41":42,"_40":135,"_133":59,"_38":157,"_13":63,"_33":152,"_35":-5,"_24":25,"_136":-5,"_27":158},{"_43":147,"_32":148,"_30":149,"_132":-5,"_41":42,"_40":150,"_133":59,"_38":151,"_13":63,"_33":152,"_35":-5,"_24":25,"_136":-5,"_27":153},{"_43":138,"_32":139,"_30":140,"_132":-5,"_41":42,"_40":141,"_133":25,"_38":142,"_13":143,"_33":144,"_35":145,"_24":25,"_136":-5,"_27":146},{"_43":131,"_32":28,"_30":31,"_132":-5,"_41":42,"_40":14,"_133":59,"_38":134,"_13":135,"_33":34,"_35":37,"_24":25,"_136":-5,"_27":137},"f3e32ae2-18a0-427c-b331-72383b9de763","parentId","latest",["D",1783880115316],2,"label",[28],"5d12a550-462e-4214-afc0-acd1c227ca77","hono.yjs.tsx","8d922a5c-7b90-11f1-9d4f-1607ee4eb77e",14,["D",1783871309613],5,"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.20?target=esnext\";\nimport { connectYjs } from \"https://esm.town/v/dinavinter/doc\";\nimport { yMapIterate } from \"https://esm.sh/@cxai/stream/yjs\";\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;\nfunction mapFor(component: string, instance: string): Y.Map {\n if (!doc) doc = connectYjs(new Y.Doc({ guid: \"components\" })) as Y.Doc;\n return doc.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 map: Y.Map,\n signal: AbortSignal,\n): AsyncGenerator {\n const iterator = yMapIterate(map);\n signal.addEventListener(\"abort\", () => void iterator.return?.(undefined as never));\n\n for await (const [key] of iterator) {\n if (signal.aborted) return;\n yield String(key);\n }\n}\n",[139],"4366f974-524f-40e5-9a13-155e0b10c28c","xstate-viewer","a15fb290-7e1d-11f1-9a99-1607ee4eb77e",16,["D",1783880115111],"directory",[148],"1c2f5d02-c60b-40f9-a913-8f20aa8f27f8","toggle","677b21a2-7b90-11f1-9d92-1607ee4eb77e",["D",1783599556675],[155],"pulls","branches",1,"forks","envVars",{"_167":161,"_169":63},"connections",{"_167":63,"_168":63},"count","unfilledCount","emptyCount",{"_43":154,"_32":155,"_30":156,"_132":-5,"_41":42,"_40":135,"_133":59,"_38":200,"_13":63,"_33":152,"_35":-5,"_24":25,"_136":-5,"_177":201,"_27":202},{"_43":194,"_32":184,"_30":57,"_132":156,"_41":42,"_40":195,"_133":25,"_38":196,"_13":143,"_33":34,"_35":197,"_24":25,"_136":155,"_177":198,"_27":199},{"_43":147,"_32":148,"_30":149,"_132":-5,"_41":42,"_40":150,"_133":59,"_38":191,"_13":63,"_33":152,"_35":-5,"_24":25,"_136":-5,"_177":192,"_27":193},{"_43":183,"_32":184,"_30":185,"_132":149,"_41":42,"_40":186,"_133":25,"_38":187,"_13":63,"_33":144,"_35":188,"_24":25,"_136":-5,"_177":189,"_27":190},{"_43":138,"_32":139,"_30":140,"_132":-5,"_41":42,"_40":141,"_133":25,"_38":180,"_13":143,"_33":144,"_35":145,"_24":25,"_136":-5,"_177":181,"_27":182},{"_43":131,"_32":28,"_30":31,"_132":-5,"_41":42,"_40":14,"_133":59,"_38":176,"_13":135,"_33":34,"_35":37,"_24":25,"_136":-5,"_177":178,"_27":179},["D",1783880115316],"children",[],[28],["D",1783871309613],[],[139],"99ec142f-871a-44b2-8784-3f1891945240","index.tsx","a179c950-7e1d-11f1-affc-1607ee4eb77e",17,["D",1783880115318],"/** @jsxImportSource npm:hono/jsx */\nimport { streamSSE } from \"npm:hono/streaming\";\nimport { assign, createActor, createMachine, type AnyEventObject } 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\nexport type MachineState = {\n id: string;\n element: Y.XmlElement;\n transitions: Array<{ event: string; target: string; actions: string[] }>;\n instances: Y.XmlElement[];\n};\n\nexport type MachineModel = {\n id: string;\n initial: string;\n element: Y.XmlElement;\n states: MachineState[];\n};\n\nexport const actionRegistry = {\n assignPayload: assign(({ context, event }) => ({\n ...context,\n ...Object.fromEntries(Object.entries(event).filter(([key]) => key !== \"type\")),\n })),\n incrementCount: assign(({ context }) => ({\n ...context,\n count: Number((context as Record).count ?? 0) + 1,\n })),\n decrementCount: assign(({ context }) => ({\n ...context,\n count: Number((context as Record).count ?? 0) - 1,\n })),\n};\n\nfunction MachineBoard({ model, base }: { model: MachineModel; base: string }) {\n return (\n

\n {model.states.map((state, index) => (\n \n

\n \n State {String(index + 1).padStart(2, \"0\")}\n \n

{state.id}

\n \n {state.instances.length} pins\n \n

\n\n

\n {state.instances.length ? (\n state.instances.map((instance) => {\n const id = instance.getAttribute(\"id\")!;\n return (\n \n \n {id}\n \n );\n })\n ) : (\n

No active instances

\n )}\n

\n\n \n

\n ))}\n \n );\n}\n\nfunction Cursor({ instance, state, context, transitions, base }: { instance: string; state: string; context: Record; transitions: MachineState[\"transitions\"]; base: string }) {\n return (\n

Instance cursor

{instance}

\n \n {state}\n \n

{key}: {JSON.stringify(value)}

Available events

\n {transitions.map((transition) => (\n \n \n \n \n \n ))}\n {!transitions.length &&

No events from this state.

}\n

\n );\n}\n\nconst handler = yjs.createApp();\n\nhandler.get(\"/:definition\", (c) => {\n const definition = c.req.param(\"definition\");\n const fragment = sharedDoc().getXmlFragment(`xstate-machine:${definition}`);\n if (!fragment.length) {\n const machine = new Y.XmlElement(\"machine\");\n machine.setAttribute(\"id\", definition);\n machine.setAttribute(\"initial\", \"idle\");\n const idle = new Y.XmlElement(\"state\");\n idle.setAttribute(\"id\", \"idle\");\n const start = new Y.XmlElement(\"transition\");\n start.setAttribute(\"event\", \"START\");\n start.setAttribute(\"target\", \"running\");\n start.setAttribute(\"actions\", \"assignPayload\");\n idle.push([start]);\n const running = new Y.XmlElement(\"state\");\n running.setAttribute(\"id\", \"running\");\n const finish = new Y.XmlElement(\"transition\");\n finish.setAttribute(\"event\", \"FINISH\");\n finish.setAttribute(\"target\", \"complete\");\n finish.setAttribute(\"actions\", \"incrementCount\");\n running.push([finish]);\n const complete = new Y.XmlElement(\"state\");\n complete.setAttribute(\"id\", \"complete\");\n const reset = new Y.XmlElement(\"transition\");\n reset.setAttribute(\"event\", \"RESET\");\n reset.setAttribute(\"target\", \"idle\");\n complete.push([reset]);\n machine.push([idle, running, complete]);\n fragment.push([machine]);\n }\n const machine = fragment.toArray().find((node): node is Y.XmlElement => node instanceof Y.XmlElement && node.nodeName === \"machine\");\n if (!machine) return c.text(\"Definition has no machine element.\", 422);\n const states: MachineState[] = machine.toArray().filter((node): node is Y.XmlElement => node instanceof Y.XmlElement && node.nodeName === \"state\").map((state) => ({\n id: state.getAttribute(\"id\") ?? \"\",\n element: state,\n transitions: state.toArray().filter((node): node is Y.XmlElement => node instanceof Y.XmlElement && node.nodeName === \"transition\").map((transition) => ({ event: transition.getAttribute(\"event\") ?? \"\", target: transition.getAttribute(\"target\") ?? \"\", actions: (transition.getAttribute(\"actions\") ?? \"\").split(\",\").map((action) => action.trim()).filter(Boolean) })),\n instances: state.toArray().filter((node): node is Y.XmlElement => node instanceof Y.XmlElement && node.nodeName === \"instance\"),\n }));\n const model: MachineModel = { id: machine.getAttribute(\"id\") ?? definition, initial: machine.getAttribute(\"initial\") ?? states[0]?.id ?? \"\", element: machine, states };\n const base = `/xstate-viewer/${encodeURIComponent(definition)}`;\n return c.render(\n

Y.XmlFragment machine

{model.id}

Definition {definition} · initial {model.initial}

\n \n \n \n \n \n \n

\n\n \n \n

,\n );\n});\n\nhandler.get(\"/:definition/view\", (c) => {\n const definition = c.req.param(\"definition\");\n const fragment = sharedDoc().getXmlFragment(`xstate-machine:${definition}`);\n const machine = fragment.toArray().find((node): node is Y.XmlElement => node instanceof Y.XmlElement && node.nodeName === \"machine\");\n if (!machine) return c.text(\"Definition has no machine element.\", 422);\n const states: MachineState[] = machine.toArray().filter((node): node is Y.XmlElement => node instanceof Y.XmlElement && node.nodeName === \"state\").map((state) => ({\n id: state.getAttribute(\"id\") ?? \"\", element: state,\n transitions: state.toArray().filter((node): node is Y.XmlElement => node instanceof Y.XmlElement && node.nodeName === \"transition\").map((transition) => ({ event: transition.getAttribute(\"event\") ?? \"\", target: transition.getAttribute(\"target\") ?? \"\", actions: (transition.getAttribute(\"actions\") ?? \"\").split(\",\").map((action) => action.trim()).filter(Boolean) })),\n instances: state.toArray().filter((node): node is Y.XmlElement => node instanceof Y.XmlElement && node.nodeName === \"instance\"),\n }));\n const model: MachineModel = { id: machine.getAttribute(\"id\") ?? definition, initial: machine.getAttribute(\"initial\") ?? states[0]?.id ?? \"\", element: machine, states };\n return c.render();\n});\n\nhandler.post(\"/:definition/instances\", async (c) => {\n try {\n const body = await c.req.parseBody();\n const id = String(body.instance ?? \"\").trim();\n const context = Object.fromEntries(\n Object.entries(body).filter(([key, value]) => key !== \"instance\" && String(value).length),\n );\n const definition = c.req.param(\"definition\");\n const fragment = sharedDoc().getXmlFragment(`xstate-machine:${definition}`);\n const machine = fragment.toArray().find((node): node is Y.XmlElement => node instanceof Y.XmlElement && node.nodeName === \"machine\");\n if (!machine || !id) return c.text(\"Machine and instance ID are required.\", 400);\n const states = machine.toArray().filter((node): node is Y.XmlElement => node instanceof Y.XmlElement && node.nodeName === \"state\");\n if (states.some((state) => state.toArray().some((node) => node instanceof Y.XmlElement && node.nodeName === \"instance\" && node.getAttribute(\"id\") === id))) return c.text(`Instance ${id} already exists.`, 409);\n const initial = states.find((state) => state.getAttribute(\"id\") === machine.getAttribute(\"initial\"));\n if (!initial) return c.text(\"Initial state does not exist.\", 422);\n const instance = new Y.XmlElement(\"instance\");\n instance.setAttribute(\"id\", id);\n for (const [key, value] of Object.entries(context)) instance.setAttribute(key, typeof value === \"string\" ? value : JSON.stringify(value));\n fragment.doc?.transact(() => initial.push([instance]), \"xstate-create-instance\");\n c.header(\"HX-Trigger\", JSON.stringify({ \"xstate-instance-changed\": { definition, instance: id } }));\n return c.redirect(`/xstate-viewer/${encodeURIComponent(definition)}/view`, 303);\n } catch (error) {\n return c.text(error instanceof Error ? error.message : \"Unable to create instance.\", 400);\n }\n});\n\nhandler.get(\"/:definition/:instance/cursor\", (c) => {\n const definition = c.req.param(\"definition\");\n const instanceId = c.req.param(\"instance\");\n const fragment = sharedDoc().getXmlFragment(`xstate-machine:${definition}`);\n const machine = fragment.toArray().find((node): node is Y.XmlElement => node instanceof Y.XmlElement && node.nodeName === \"machine\");\n const states = machine?.toArray().filter((node): node is Y.XmlElement => node instanceof Y.XmlElement && node.nodeName === \"state\") ?? [];\n const state = states.find((candidate) => candidate.toArray().some((node) => node instanceof Y.XmlElement && node.nodeName === \"instance\" && node.getAttribute(\"id\") === instanceId));\n const instance = state?.toArray().find((node): node is Y.XmlElement => node instanceof Y.XmlElement && node.nodeName === \"instance\" && node.getAttribute(\"id\") === instanceId);\n if (!state || !instance) return c.text(\"Instance not found.\", 404);\n const context = Object.fromEntries(Object.entries(instance.getAttributes()).filter(([key]) => key !== \"id\").map(([key, value]) => { try { return [key, JSON.parse(String(value))]; } catch { return [key, value]; } }));\n const transitions = state.toArray().filter((node): node is Y.XmlElement => node instanceof Y.XmlElement && node.nodeName === \"transition\").map((transition) => ({ event: transition.getAttribute(\"event\") ?? \"\", target: transition.getAttribute(\"target\") ?? \"\", actions: (transition.getAttribute(\"actions\") ?? \"\").split(\",\").map((action) => action.trim()).filter(Boolean) }));\n return c.render();\n});\n\nhandler.post(\"/:definition/:instance\", async (c) => {\n try {\n const body = await c.req.parseBody();\n const event = String(body.event ?? \"\");\n const payload = Object.fromEntries(\n Object.entries(body).filter(([key, value]) => key !== \"event\" && String(value).length),\n );\n const definition = c.req.param(\"definition\");\n const instance = c.req.param(\"instance\");\n const fragment = sharedDoc().getXmlFragment(`xstate-machine:${definition}`);\n const machineElement = fragment.toArray().find((node): node is Y.XmlElement => node instanceof Y.XmlElement && node.nodeName === \"machine\");\n if (!machineElement) return c.text(\"Definition has no machine element.\", 422);\n const states: MachineState[] = machineElement.toArray().filter((node): node is Y.XmlElement => node instanceof Y.XmlElement && node.nodeName === \"state\").map((state) => ({\n id: state.getAttribute(\"id\") ?? \"\", element: state,\n transitions: state.toArray().filter((node): node is Y.XmlElement => node instanceof Y.XmlElement && node.nodeName === \"transition\").map((transition) => ({ event: transition.getAttribute(\"event\") ?? \"\", target: transition.getAttribute(\"target\") ?? \"\", actions: (transition.getAttribute(\"actions\") ?? \"\").split(\",\").map((action) => action.trim()).filter(Boolean) })),\n instances: state.toArray().filter((node): node is Y.XmlElement => node instanceof Y.XmlElement && node.nodeName === \"instance\"),\n }));\n const source = states.find((state) => state.instances.some((candidate) => candidate.getAttribute(\"id\") === instance));\n const instanceElement = source?.instances.find((candidate) => candidate.getAttribute(\"id\") === instance);\n if (!source || !instanceElement) return c.text(`Instance ${instance} does not exist.`, 404);\n const transition = source.transitions.find((candidate) => candidate.event === event);\n if (!transition) return c.text(`Event ${event} is not valid from ${source.id}.`, 409);\n const unknownAction = transition.actions.find((action) => !(action in actionRegistry));\n if (unknownAction) return c.text(`Unknown action: ${unknownAction}`, 422);\n const target = states.find((state) => state.id === transition.target);\n if (!target) return c.text(`Transition target ${transition.target} does not exist.`, 422);\n const context = Object.fromEntries(Object.entries(instanceElement.getAttributes()).filter(([key]) => key !== \"id\").map(([key, value]) => { try { return [key, JSON.parse(String(value))]; } catch { return [key, value]; } }));\n const runtimeMachine = createMachine({\n id: machineElement.getAttribute(\"id\") ?? definition,\n initial: machineElement.getAttribute(\"initial\") ?? states[0]?.id,\n context: {} as Record,\n states: Object.fromEntries(states.map((state) => [state.id, { on: Object.fromEntries(state.transitions.map((item) => [item.event, { target: item.target, actions: item.actions }])) }])),\n }).provide({ actions: actionRegistry as never });\n const actor = createActor(runtimeMachine, { snapshot: { status: \"active\", value: source.id, context, children: {}, historyValue: {}, output: undefined, error: undefined } as never });\n actor.start();\n actor.send({ type: event, ...payload } as AnyEventObject);\n const snapshot = actor.getSnapshot();\n actor.stop();\n const nextTarget = states.find((state) => state.id === snapshot.value);\n if (!nextTarget) return c.text(\"Transition produced an unknown state.\", 422);\n const replacement = new Y.XmlElement(\"instance\");\n replacement.setAttribute(\"id\", instance);\n for (const [key, value] of Object.entries(snapshot.context)) if (value !== undefined) replacement.setAttribute(key, typeof value === \"string\" ? value : JSON.stringify(value));\n fragment.doc?.transact(() => {\n source.element.delete(source.element.toArray().indexOf(instanceElement), 1);\n nextTarget.element.push([replacement]);\n }, \"xstate-transition\");\n c.header(\"HX-Trigger\", JSON.stringify({ \"xstate-instance-changed\": { definition, instance } }));\n return c.redirect(`/xstate-viewer/${encodeURIComponent(definition)}/${encodeURIComponent(instance)}/cursor`, 303);\n } catch (error) {\n return c.text(error instanceof Error ? error.message : \"Unable to apply event.\", 400);\n }\n});\n\nhandler.get(\"/:definition/stream\", (c) => {\n const fragment = sharedDoc().getXmlFragment(`xstate-machine:${c.req.param(\"definition\")}`);\n return streamSSE(c, async (stream) => {\n for await (const _ of changes(fragment, c.req.raw.signal)) {\n await stream.writeSSE({ event: \"xstate-machine-changed\", data: \"{}\" });\n }\n });\n});\n\n/* ------------------------------- exports ------------------------------- */\n\n// Composable route app: `app.route(\"/xstate-viewer\", handler)`.\nexport { handler };\n\n// Standalone fetch handler with a default machine definition.\nexport default yjs\n .createApp()\n .get(\"/\", (c) => c.redirect(\"/demo\"))\n .route(\"/\", handler).fetch;\n",[],[148,184],["D",1783880115111],[173],[148],"c2c6d0f5-9eaf-407f-8199-c78beb94d890",15,["D",1783871309615],"/** @jsxImportSource npm:hono/jsx */\nimport { streamSSE } from \"npm:hono/streaming\";\nimport { changes, instancePath, state, yjs } from \"../hono.yjs.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\nconst handler = yjs.createApp();\nconst toggleState = state(\"toggle\");\nhandler.use(\"/:instance\", toggleState);\nhandler.use(\"/:instance/*\", toggleState);\n\nhandler.get(\"/:instance\", (c) => {\n const base = instancePath(c);\n const on = c.get(\"map\").get(\"value\") === true;\n\n return c.render(\n \n

,\n );\n});\n\nhandler.on([\"GET\", \"POST\"], \"/:instance/on\", async (c) => {\n const base = instancePath(c);\n const { map, waitForState } = c.var;\n\n if (c.req.method === \"POST\") map.set(\"value\", true);\n else 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\nhandler.on([\"GET\", \"POST\"], \"/:instance/off\", async (c) => {\n const base = instancePath(c);\n const { map, waitForState } = c.var;\n\n if (c.req.method === \"POST\") map.set(\"value\", false);\n else 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\nhandler.get(\"/:instance/stream\", (c) =>\n streamSSE(c, async (stream) => {\n const { map } = c.var;\n for await (const key of changes(map, c.req.raw.signal)) {\n if (key !== \"value\") continue;\n const next = map.get(\"value\") === true ? \"on\" : \"off\";\n await stream.writeSSE({ event: next, data: next });\n }\n })\n);\n\nhandler.get(\"/:instance/inspect\", (c) =>\n c.json({\n component: \"toggle\",\n instance: c.req.param(\"instance\"),\n state: c.get(\"map\").toJSON(),\n })\n);\n\nexport { handler };\n\nconst app = yjs.createApp();\napp.get(\"/\", (c) => c.redirect(\"/job1\"));\napp.route(\"/\", handler);\nexport default app.fetch;\n",[],[155,184],["D",1783599556675],[171],[155],["D",1783599528265],{"_97":96,"_104":100},{"_97":96,"_98":-5,"_99":100,"_18":55,"_101":102,"_103":25},{"_13":86,"_32":87,"_43":42,"_88":44,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":45,"_95":96},"ctx",{"_79":-5,"_124":240,"_241":242,"_243":244,"_245":25,"_246":25,"_247":25,"_248":59,"_249":-5,"_250":-7,"_251":-7,"_252":63,"_253":25,"_254":25,"_255":-5,"_256":25,"_257":25,"_258":25,"_259":-5},"ENV",{"_211":212,"_213":214,"_215":87,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239},"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"]

Diff · v18