unspaghettit 0.2.0 → 0.4.0

package/build/server/chunks/{_page.svelte-BKKCa9H5.js.map → _page.svelte-Uioz8hsG.js.map}

@@ -1 +1 @@
-{"version":3,"file":"_page.svelte-BKKCa9H5.js","sources":["../../../.svelte-kit/adapter-node/entries/pages/tutorial/_page.svelte.js"],"sourcesContent":["import { G as attr, l as derived, o as attr_class, q as escape_html, u as ensure_array_like } from \"../../../chunks/index-server.js\";\nimport \"../../../chunks/TagPalette.js\";\nimport \"../../../chunks/browserContainer.js\";\nimport \"../../../chunks/navigation.js\";\nimport \"../../../chunks/tourStore.svelte.js\";\nimport \"../../../chunks/featuresStore.svelte.js\";\nimport \"../../../chunks/NameMatch.js\";\nimport \"../../../chunks/featureStore.svelte.js\";\n//#region src/features/tutorial/presentation/components/TutorialSection.svelte\nfunction TutorialSection($$renderer, $$props) {\n\tlet { id, title, children } = $$props;\n\t$$renderer.push(`<section${attr(\"id\", id)} class=\"scroll-mt-24 space-y-3 border-b border-hairline pb-8 last:border-b-0\"><h2 class=\"text-xl font-semibold tracking-tight\"><a${attr(\"href\", `#${id}`)} class=\"text-slate-950 hover:text-brand-700\">${escape_html(title)}</a></h2> <div class=\"space-y-3 text-sm leading-7 text-slate-700\">`);\n\tchildren($$renderer);\n\t$$renderer.push(`<!----></div></section>`);\n}\n//#endregion\n//#region src/features/tutorial/presentation/components/CodeBlock.svelte\nfunction CodeBlock($$renderer, $$props) {\n\tlet { code, language = \"text\" } = $$props;\n\t$$renderer.push(`<pre class=\"mono overflow-x-auto rounded-lg border border-slate-800 bg-slate-950 p-4 text-[12px] leading-relaxed text-slate-100\"${attr(\"data-lang\", language)}><code>${escape_html(code)}</code></pre>`);\n}\n//#endregion\n//#region src/features/tutorial/presentation/components/Callout.svelte\nfunction Callout($$renderer, $$props) {\n\tlet { tone = \"info\", title, children } = $$props;\n\tconst cls = derived(() => tone === \"warning\" ? \"bg-amber-50 border-amber-200 text-amber-900\" : tone === \"success\" ? \"bg-emerald-50 border-emerald-200 text-emerald-900\" : \"bg-brand-50 border-brand-200 text-brand-900\");\n\t$$renderer.push(`<div${attr_class(`rounded-md border p-3 text-sm ${cls()}`)}>`);\n\tif (title) {\n\t\t$$renderer.push(\"<!--[0-->\");\n\t\t$$renderer.push(`<p class=\"mb-1 font-semibold\">${escape_html(title)}</p>`);\n\t} else $$renderer.push(\"<!--[-1-->\");\n\t$$renderer.push(`<!--]--> <div class=\"leading-6\">`);\n\tchildren($$renderer);\n\t$$renderer.push(`<!----></div></div>`);\n}\n//#endregion\n//#region src/routes/tutorial/+page.svelte\nfunction _page($$renderer, $$props) {\n\t$$renderer.component(($$renderer) => {\n\t\tconst sections = [\n\t\t\t{\n\t\t\t\tid: \"why\",\n\t\t\t\ttitle: \"1. Why executable specs\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"model\",\n\t\t\t\ttitle: \"2. The core model\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"concepts\",\n\t\t\t\ttitle: \"3. Concept by concept\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"walkthrough\",\n\t\t\t\ttitle: \"4. Walkthrough: eShop project\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"simulator\",\n\t\t\t\ttitle: \"5. Running the simulator\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"maturity\",\n\t\t\t\ttitle: \"6. Reading the maturity score\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"editor\",\n\t\t\t\ttitle: \"7. Editing in the app\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"build\",\n\t\t\t\ttitle: \"8. Build your own feature\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"queue\",\n\t\t\t\ttitle: \"9. Implementation queue\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"backup\",\n\t\t\t\ttitle: \"10. Backup & share with .unspa\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"mcp\",\n\t\t\t\ttitle: \"11. Connect AI agents with MCP\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"collab\",\n\t\t\t\ttitle: \"12. Multi-user & identity\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"security\",\n\t\t\t\ttitle: \"13. Hosting on a network\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"next\",\n\t\t\t\ttitle: \"14. Where to go next\"\n\t\t\t}\n\t\t];\n\t\tlet busyLoadingSamples = false;\n\t\t$$renderer.push(`<div class=\"mx-auto grid max-w-7xl grid-cols-12 gap-8 px-4 py-8 sm:px-6 svelte-116uhib\"><aside class=\"col-span-12 lg:col-span-3 svelte-116uhib\"><nav class=\"sticky top-24 space-y-1 rounded-lg border border-hairline bg-white p-3 text-sm svelte-116uhib\"><p class=\"px-2 pb-2 text-xs font-medium uppercase tracking-wide text-slate-500 svelte-116uhib\">Tutorial</p> <!--[-->`);\n\t\tconst each_array = ensure_array_like(sections);\n\t\tfor (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {\n\t\t\tlet s = each_array[$$index];\n\t\t\t$$renderer.push(`<a${attr(\"href\", `#${s.id}`)} class=\"block rounded-md px-2 py-1.5 text-slate-700 hover:bg-slate-50 hover:text-slate-950 svelte-116uhib\">${escape_html(s.title)}</a>`);\n\t\t}\n\t\t$$renderer.push(`<!--]--> <div class=\"mt-4 space-y-2 border-t border-hairline pt-4 svelte-116uhib\"><button type=\"button\" class=\"sample-cta relative w-full overflow-hidden rounded-md px-3 py-2 text-xs font-medium text-white shadow-sm shadow-slate-950/10 transition disabled:cursor-wait disabled:opacity-70 svelte-116uhib\"${attr(\"disabled\", busyLoadingSamples, true)}><span class=\"relative z-10 svelte-116uhib\">${escape_html(\"Load sample project\")}</span></button> <button type=\"button\" class=\"w-full rounded-md border border-brand-300 bg-brand-50 px-3 py-2 text-xs font-semibold text-brand-800 transition hover:bg-brand-100 svelte-116uhib\" title=\"Side panel walks you through creating your first feature\">→ Run interactive tutorial</button> <a href=\"/features\" class=\"block w-full rounded-md bg-slate-900 px-3 py-2 text-center text-xs font-medium text-white svelte-116uhib\">Back to features</a></div></nav></aside> <article class=\"col-span-12 space-y-12 lg:col-span-9 svelte-116uhib\"><header class=\"border-b border-slate-200 pb-8 svelte-116uhib\"><div class=\"max-w-3xl svelte-116uhib\"><p class=\"text-xs font-semibold uppercase tracking-wide text-brand-700 svelte-116uhib\">Tutorial</p> <h1 class=\"mt-2 text-4xl font-semibold tracking-tight text-slate-950 svelte-116uhib\">Modeling software as executable behavior</h1> <p class=\"mt-3 text-base leading-7 text-slate-600 svelte-116uhib\">Unspaghettit is a tool for describing what software <em class=\"svelte-116uhib\">does</em>, not\n          what it <em class=\"svelte-116uhib\">looks like</em>. This guide walks you through the model, the\n          simulator, the maturity score, the manual editor, and the MCP server.</p> <p class=\"mt-2 text-xs text-slate-500 svelte-116uhib\">An open-source project by <a href=\"https://lyriks.io\" class=\"text-brand-700 hover:underline svelte-116uhib\" rel=\"noopener\">Lyriks.io</a>.</p></div> <div class=\"mt-6 svelte-116uhib\">`);\n\t\tCallout($$renderer, {\n\t\t\ttone: \"info\",\n\t\t\ttitle: \"Tip\",\n\t\t\tchildren: ($$renderer) => {\n\t\t\t\t$$renderer.push(`<!---->Click <span class=\"mono svelte-116uhib\">Load sample project</span> on the left to make\n          sure the seeded eShop example is available.`);\n\t\t\t},\n\t\t\t$$slots: { default: true }\n\t\t});\n\t\t$$renderer.push(`<!----></div></header> `);\n\t\t{\n\t\t\tfunction children($$renderer) {\n\t\t\t\t$$renderer.push(`<p class=\"svelte-116uhib\">AI coding workflows go sideways fast. Specs drift. Prompts pile up.\n          Generated systems lose coherence. The reason is almost always the\n          same: humans and LLMs share <strong class=\"svelte-116uhib\">prose</strong>, markdown specs, giant prompts, chat history,\n          scattered README fragments, and prose has no runtime. Nothing executes\n          it, nothing validates it, nothing breaks loudly when it goes stale.</p> <p class=\"svelte-116uhib\">Unspaghettit turns that prose into an <strong class=\"svelte-116uhib\">executable specification</strong>. The specification describes observable behavior: anything a user,\n          system, or AI can do is an <em class=\"svelte-116uhib\">action</em>; anything true right now is <em class=\"svelte-116uhib\">state</em>; anything\n          that gates an action is a <em class=\"svelte-116uhib\">rule</em>; anything that follows from\n          running an action is an <em class=\"svelte-116uhib\">effect</em> or an <em class=\"svelte-116uhib\">event</em>.</p> <p class=\"svelte-116uhib\">A few names appear throughout the app: <strong class=\"svelte-116uhib\">Unspaghettit</strong> is the product, <strong class=\"svelte-116uhib\">behavior</strong> is what you model, <strong class=\"svelte-116uhib\">spec</strong> is the executable contract, <strong class=\"svelte-116uhib\">MCP</strong> is how your AI agent reads and edits it.</p> <p class=\"svelte-116uhib\">The vocabulary is small enough to hold in head and rigid enough to\n          execute. Specs stop being documentation you re-explain in every\n          prompt; they become a contract you can simulate, score, and break\n          loudly.</p>`);\n\t\t\t}\n\t\t\tTutorialSection($$renderer, {\n\t\t\t\tid: \"why\",\n\t\t\t\ttitle: \"1. Why executable specs\",\n\t\t\t\tchildren,\n\t\t\t\t$$slots: { default: true }\n\t\t\t});\n\t\t}\n\t\t$$renderer.push(`<!----> `);\n\t\t{\n\t\t\tfunction children($$renderer) {\n\t\t\t\t$$renderer.push(`<p class=\"svelte-116uhib\">The hierarchy fits on one line:</p> `);\n\t\t\t\tCodeBlock($$renderer, {\n\t\t\t\t\tlanguage: \"text\",\n\t\t\t\t\tcode: `Domain → Project → Feature → Surface → Action → State / Rule / Effect`\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!----> <p class=\"svelte-116uhib\">A <strong class=\"svelte-116uhib\">Project</strong> is the umbrella for one product or\n          codebase. It groups many <strong class=\"svelte-116uhib\">Features</strong>. A Feature is one coherent slice of behavior\n          (a flow, a screen, a capability) sized so an LLM can hold the whole\n          thing in head: ~1–15 surfaces, ~30–100 actions. A Feature is <em class=\"svelte-116uhib\">not</em> a whole product. Inside a Feature, the rest of the vocabulary\n          lives here:</p> `);\n\t\t\t\tCodeBlock($$renderer, {\n\t\t\t\t\tlanguage: \"text\",\n\t\t\t\t\tcode: `Feature\n|-- Resource                  (external or local system/data boundary)\n|-- Entity                    (domain schema mapped to state/resource fields)\n|-- Event                     (registered signal + optional payload schema)\n+-- Surface\n    |-- StateDefinition       (typed dynamic state, optionally shared)\n    |-- Action\n    |   |-- Parameter         (input, default, validations, state binding)\n    |   |-- RequiredState     (state the action depends on)\n    |   |-- Rule              (condition -> effect)\n    |   |-- Effect            (success outcome)\n    |   |-- OnBlockedEffect   (fallback when blocked)\n    |   |-- Invariant         (must hold post-run)\n    |   |-- EmittedEvent      (declared signal)\n    |   +-- Scenario          (simulator example + expected result)\n    |-- Rule                  (cross-cutting surface gate)\n    |-- Invariant             (cross-cutting check)\n    +-- Transition            (declared link to another surface)`\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!----> <p class=\"svelte-116uhib\">That is the whole behavior graph. The manual editor and MCP tools both\n          read and write these same entities.</p>`);\n\t\t\t}\n\t\t\tTutorialSection($$renderer, {\n\t\t\t\tid: \"model\",\n\t\t\t\ttitle: \"2. The core model\",\n\t\t\t\tchildren,\n\t\t\t\t$$slots: { default: true }\n\t\t\t});\n\t\t}\n\t\t$$renderer.push(`<!----> `);\n\t\t{\n\t\t\tfunction children($$renderer) {\n\t\t\t\t$$renderer.push(`<h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Feature</h3> <p class=\"svelte-116uhib\">One coherent slice of behavior inside a Project. A flow, a screen, a\n          capability. Sized so an LLM can hold the whole thing in head: roughly\n          1–15 surfaces and 30–100 actions. A Feature is <em class=\"svelte-116uhib\">not</em> a whole product.\n          \"Add filter to search results\" is one Feature; \"Spotify clone\" is a Project\n          that holds many Features. A Feature contains surfaces plus global resources,\n          entity definitions, registered events, personas, and implementation context.</p> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Resources and Entities</h3> <p class=\"svelte-116uhib\">Resources document the systems your behavior touches: databases, HTTP\n          APIs, object storage, queues, browser storage, caches, or local files.\n          Entity definitions describe domain objects and map fields back to\n          state paths or resources. These are editable from the top-level <strong class=\"svelte-116uhib\">Resources</strong> and <strong class=\"svelte-116uhib\">Entities</strong> tabs. Example: the eShop sample has a <span class=\"mono svelte-116uhib\">Cart store</span> resource and a <span class=\"mono svelte-116uhib\">Cart</span> entity with <span class=\"mono svelte-116uhib\">lineItems</span> and <span class=\"mono svelte-116uhib\">subtotal</span> fields.</p> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Surface</h3> <p class=\"svelte-116uhib\">A surface is the only fundamental container. It can represent a\n          screen, a canvas, a terminal, a board, a workflow, a command palette,\n          a map, a dialog area, an API playground, or anything else. Surfaces\n          hold state and actions and link to other surfaces via transitions.\n          Example: <span class=\"mono svelte-116uhib\">Cart &amp; checkout</span> contains the <span class=\"mono svelte-116uhib\">Cart</span>, <span class=\"mono svelte-116uhib\">Address book</span>, and <span class=\"mono svelte-116uhib\">Checkout</span> surfaces.</p> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Action</h3> <p class=\"svelte-116uhib\">What the user or system can do: <span class=\"mono svelte-116uhib\">Add to cart</span>, <span class=\"mono svelte-116uhib\">Place order</span>, <span class=\"mono svelte-116uhib\">Search products</span>, <span class=\"mono svelte-116uhib\">Cancel order</span>. An action has parameters,\n          rules, default effects, on-block effects, invariants, required state,\n          emitted events, and scenarios. Example: <span class=\"mono svelte-116uhib\">Checkout -> Place order</span> blocks until <span class=\"mono svelte-116uhib\">checkout.step</span> is <span class=\"mono svelte-116uhib\">review</span>.</p> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">State</h3> <p class=\"svelte-116uhib\">Typed, dot-notation key/value pairs that vary at runtime. Examples: <span class=\"mono svelte-116uhib\">cart.itemCount</span>, <span class=\"mono svelte-116uhib\">user.authenticated</span>, <span class=\"mono svelte-116uhib\">product.stock</span>. Allowed types: string,\n          number, boolean, enum, object, array. State definitions can include\n          descriptions, enum values, typed defaults, and <span class=\"mono svelte-116uhib\">sharedWith</span> links so another surface can see\n          the same path. Example: <span class=\"mono svelte-116uhib\">cart.lineItems</span> is an array of cart rows, and <span class=\"mono svelte-116uhib\">cart.subtotal</span> is stored in cents.</p> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Rule</h3> <p class=\"svelte-116uhib\">A deterministic <em class=\"svelte-116uhib\">IF condition THEN effect</em> pair. Each rule\n          belongs to a category (business, security, permissions, validation,\n          ux_feedback, async, billing_quota, …) which makes the model auditable.\n          Rules at surface level apply to every action on that surface; rules at\n          action level apply only there. The right side of a condition can be a\n          literal, another state path, or an expression JSON AST for param/state\n          arithmetic. Example: <span class=\"mono svelte-116uhib\">Place order</span> has a rule\n          that blocks when <span class=\"mono svelte-116uhib\">checkout.step != \"review\"</span>.</p> `);\n\t\t\t\tCodeBlock($$renderer, {\n\t\t\t\t\tlanguage: \"text\",\n\t\t\t\t\tcode: `IF cart.itemCount == 0\nTHEN block_action \"Your cart is empty\"\n\nIF user.authenticated == false\nTHEN block_action \"Sign in to continue to checkout.\"\n\nIF cart.subtotal > 3499\nTHEN show_message \"You qualify for free shipping.\"`\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!----> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Effect</h3> <p class=\"svelte-116uhib\">The outcome of a rule (when its condition matches) or of an action's\n          success path. The six effect types are:</p> <ul class=\"ml-5 list-disc space-y-1 svelte-116uhib\"><li class=\"svelte-116uhib\"><span class=\"mono svelte-116uhib\">set_state</span>. Write to a state path</li> <li class=\"svelte-116uhib\"><span class=\"mono svelte-116uhib\">show_message</span>. Surface text to the user</li> <li class=\"svelte-116uhib\"><span class=\"mono svelte-116uhib\">emit_event</span>. Emit a product-level signal</li> <li class=\"svelte-116uhib\"><span class=\"mono svelte-116uhib\">block_action</span>. Refuse the action</li> <li class=\"svelte-116uhib\"><span class=\"mono svelte-116uhib\">allow_action</span>. Explicit allow (audit)</li> <li class=\"svelte-116uhib\"><span class=\"mono svelte-116uhib\">transition_surface</span>. Navigate to another\n            surface</li></ul> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Event</h3> <p class=\"svelte-116uhib\">A semantic, product-level signal. Not a UI event. Use lowercase\n          dot-separated names: <span class=\"mono svelte-116uhib\">order.placed</span>, <span class=\"mono svelte-116uhib\">cart.item.added</span>, <span class=\"mono svelte-116uhib\">checkout.address.confirmed</span>. Register events\n          in the top-level <strong class=\"svelte-116uhib\">Events</strong> tab so you can document payload fields, then\n          reference those names from <span class=\"mono svelte-116uhib\">emit_event</span> effects and action <span class=\"mono svelte-116uhib\">emittedEvents</span>.</p> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Invariant</h3> <p class=\"svelte-116uhib\">A condition that must always hold after an action runs. Examples: <span class=\"mono svelte-116uhib\">cart.itemCount >= 0</span>, <span class=\"mono svelte-116uhib\">order.amount > 0</span>. Violations turn a\n          successful run into a blocked one. The simulator surfaces them so you\n          spot inconsistent rules. Example: the cart subtotal must not become\n          negative unless a specific admin action explicitly bypasses that\n          invariant.</p> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Scenario</h3> <p class=\"svelte-116uhib\">A saved simulator case for one action. A scenario can pre-fill state\n          and parameter values, declare whether the run should succeed or block,\n          and assert expected post-run state. Use scenarios to turn examples\n          into regression checks. Example: a saved <span class=\"mono svelte-116uhib\">Place order</span> scenario asserts that <span class=\"mono svelte-116uhib\">order.amount</span> becomes <span class=\"mono svelte-116uhib\">cart.subtotal + cart.shipping</span>.</p>`);\n\t\t\t}\n\t\t\tTutorialSection($$renderer, {\n\t\t\t\tid: \"concepts\",\n\t\t\t\ttitle: \"3. Concept by concept\",\n\t\t\t\tchildren,\n\t\t\t\t$$slots: { default: true }\n\t\t\t});\n\t\t}\n\t\t$$renderer.push(`<!----> `);\n\t\t{\n\t\t\tfunction children($$renderer) {\n\t\t\t\t$$renderer.push(`<p class=\"svelte-116uhib\">The <strong class=\"svelte-116uhib\">eShop</strong> sample is a working e-commerce model you can\n          simulate end-to-end. A buyer signs up, browses, reviews a product, fills\n          a cart, checks out, and watches the order ship. No UI code involved. Every\n          block, every event, every state change is right there in the simulator,\n          in front of you.</p> <p class=\"svelte-116uhib\">It's split into four features so each one stays small enough to hold\n          in head:</p> `);\n\t\t\t\t{\n\t\t\t\t\tfunction children($$renderer) {\n\t\t\t\t\t\t$$renderer.push(`<ol class=\"ml-5 list-decimal space-y-1 svelte-116uhib\"><li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">Account &amp; auth</strong>. Signing up, signing in,\n                verifying an email. Locks out repeated failures, caps\n                verification retries, blocks duplicate accounts.</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">Catalog &amp; reviews</strong>. Searching the catalog,\n                opening a product, posting and filtering reviews. Stops\n                profanity and link spam in reviews, gates age-restricted\n                products to 18+ buyers.</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">Cart &amp; checkout</strong>. Cart updates, coupons,\n                addresses, payment, place order. Refuses empty carts, refuses\n                checkout from unverified accounts, prices the order from the\n                line items, and gives store admins a back-door subtotal\n                override.</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">Order fulfillment</strong>. The post-purchase lifecycle:\n                preparing, shipped, out for delivery, delivered. Cancellation is\n                allowed before shipping. Signature is required on delivery\n                confirmation.</li></ol>`);\n\t\t\t\t\t}\n\t\t\t\t\tCallout($$renderer, {\n\t\t\t\t\t\ttone: \"info\",\n\t\t\t\t\t\ttitle: \"What you get\",\n\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t$$slots: { default: true }\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\t$$renderer.push(`<!----> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Loading the sample</h3> <p class=\"svelte-116uhib\">Click <span class=\"mono svelte-116uhib\">Load sample project</span> on the left. The\n          four features and the project are created, ready to open. They're\n          plain JSON copied from <span class=\"mono svelte-116uhib\">samples/</span> into <span class=\"mono svelte-116uhib\">unspa/</span>, so your edits stay yours.</p> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Three simulator checks</h3> <p class=\"svelte-116uhib\">Open the named feature, select the named surface, pick the action, set\n          the listed values, and click <span class=\"mono svelte-116uhib\">Run action</span>.\n          These are quick checks, not hidden UI interactions.</p> <ol class=\"ml-5 list-decimal space-y-3 svelte-116uhib\"><li class=\"svelte-116uhib\">Open <strong class=\"svelte-116uhib\">Catalog &amp; reviews</strong> -> <strong class=\"svelte-116uhib\">Product details</strong> -> <span class=\"mono svelte-116uhib\">Submit review</span>. In the parameter panel, set <span class=\"mono svelte-116uhib\">rating = 5</span> and run: the simulator records a positive badge. Set <span class=\"mono svelte-116uhib\">rating = 1</span> and run again: it records a critical\n            badge. The decision lives in the model, not in code.</li> <li class=\"svelte-116uhib\">Open <strong class=\"svelte-116uhib\">Cart &amp; checkout</strong> -> <strong class=\"svelte-116uhib\">Cart</strong> -> <span class=\"mono svelte-116uhib\">Recalculate subtotal</span>. Run once and watch <span class=\"mono svelte-116uhib\">cart.subtotal</span> match the sum of <span class=\"mono svelte-116uhib\">cart.lineItems[*].amount</span>. Then edit a line\n            item amount in the state panel and rerun: the total follows the line\n            items, with no glue code in between.</li> <li class=\"svelte-116uhib\">Open <strong class=\"svelte-116uhib\">Cart &amp; checkout</strong> -> <strong class=\"svelte-116uhib\">Checkout</strong> -> <span class=\"mono svelte-116uhib\">Override subtotal (admin)</span>. A regular\n            customer cannot make the subtotal negative; an admin can. The\n            simulator shows exactly which rule lets the admin through, and which\n            check would have blocked anyone else.</li></ol> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Features that talk to each other</h3> <p class=\"svelte-116uhib\">Place an order in <em class=\"svelte-116uhib\">Cart &amp; checkout</em>. The <em class=\"svelte-116uhib\">Order fulfillment</em> feature notices, creates the tracking record, and starts the lifecycle.\n          You don't wire that up. The features just compose, through the events they\n          emit and subscribe to. That's the whole point of splitting into LLM-sized\n          features: each one stays small, and the simulator handles the seams between\n          them.</p> `);\n\t\t\t\tCallout($$renderer, {\n\t\t\t\t\ttone: \"success\",\n\t\t\t\t\ttitle: \"Why this matters\",\n\t\t\t\t\tchildren: ($$renderer) => {\n\t\t\t\t\t\t$$renderer.push(`<!---->You can describe a full e-commerce buying flow, end to end, and have\n          it actually run. Without writing a UI, without writing business logic,\n          without writing tests that lie about what happened. The model itself\n          is the contract. The simulator is the proof.`);\n\t\t\t\t\t},\n\t\t\t\t\t$$slots: { default: true }\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!---->`);\n\t\t\t}\n\t\t\tTutorialSection($$renderer, {\n\t\t\t\tid: \"walkthrough\",\n\t\t\t\ttitle: \"4. Walkthrough: eShop project\",\n\t\t\t\tchildren,\n\t\t\t\t$$slots: { default: true }\n\t\t\t});\n\t\t}\n\t\t$$renderer.push(`<!----> `);\n\t\t{\n\t\t\tfunction children($$renderer) {\n\t\t\t\t$$renderer.push(`<p class=\"svelte-116uhib\">The right-side <strong class=\"svelte-116uhib\">Simulator</strong> panel runs your model deterministically.\n          No AI, no guessing. Just rule evaluation and effect application.</p> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Quick test on the Checkout surface</h3> <ol class=\"ml-5 list-decimal space-y-2 svelte-116uhib\"><li class=\"svelte-116uhib\">Open <strong class=\"svelte-116uhib\">E-commerce. Full customer journey</strong> and select <strong class=\"svelte-116uhib\">7. Checkout</strong>.</li> <li class=\"svelte-116uhib\">Pick the <span class=\"mono svelte-116uhib\">Place order</span> action.</li> <li class=\"svelte-116uhib\">Click <span class=\"mono svelte-116uhib\">Run action</span>. With the default state (<span class=\"mono svelte-116uhib\">checkout.step = \"address\"</span>) you'll see <strong class=\"svelte-116uhib\">blocked</strong> with the reason <em class=\"svelte-116uhib\">\"Complete the previous steps first.\"</em></li> <li class=\"svelte-116uhib\">Change <span class=\"mono svelte-116uhib\">checkout.step</span> to <span class=\"mono svelte-116uhib\">review</span> and set <span class=\"mono svelte-116uhib\">payment.method</span> to <span class=\"mono svelte-116uhib\">card</span>, then run again. The action succeeds,\n            emits <span class=\"mono svelte-116uhib\">order.placed</span>, and proposes a transition to\n            the <strong class=\"svelte-116uhib\">Order tracking</strong> surface.</li> <li class=\"svelte-116uhib\">Try setting <span class=\"mono svelte-116uhib\">order.amount</span> to <span class=\"mono svelte-116uhib\">200000</span> (= $2,000). The compliance rule blocks the order.</li> <li class=\"svelte-116uhib\">Toggle <span class=\"mono svelte-116uhib\">user.emailVerified</span> to <span class=\"mono svelte-116uhib\">false</span>. The surface-level rule blocks every\n            action before they even evaluate. That's cross-cutting at work.</li></ol> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Walking the full journey</h3> <p class=\"svelte-116uhib\">To replay the entire customer flow surface by surface, run these\n          actions in order. Each one with its default state:</p> `);\n\t\t\t\tCodeBlock($$renderer, {\n\t\t\t\t\tlanguage: \"text\",\n\t\t\t\t\tcode: `1. Sign up        → Create account\n   • Toggle form.termsAccepted = true first, otherwise blocked.\n\n2. Email verify   → Verify email (with default state: code matches)\n\n3. Catalog        → Add to cart (twice if you want, stock allows it)\n                  → Go to cart\n\n4. Cart           → Apply coupon (subtotal already > $15)\n                  • Set user.authenticated = true and\n                    user.emailVerified = true\n                  → Proceed to checkout\n\n5. Address book   → Add shipping address\n                  → Continue to checkout\n\n6. Checkout       → Confirm shipping address\n                  → Select payment method\n                  → Place order\n\n7. Order tracking → Mark as shipped (system)\n                  → Mark as out for delivery (carrier)\n                  → Confirm delivery\n                    • Set delivery.signatureCollected = true to clear the gate.`\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!----> `);\n\t\t\t\tCallout($$renderer, {\n\t\t\t\t\ttone: \"success\",\n\t\t\t\t\ttitle: \"What just happened\",\n\t\t\t\t\tchildren: ($$renderer) => {\n\t\t\t\t\t\t$$renderer.push(`<!---->You designed and validated a complete Amazon-like buying feature.\n          Onboarding, security, billing-quota, validation, audit, fraud,\n          fulfillment, signature on delivery. By clicking through one panel. The\n          simulator surfaced every rule that fired, every event that emitted,\n          and every state transition that resulted.`);\n\t\t\t\t\t},\n\t\t\t\t\t$$slots: { default: true }\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!----> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Result anatomy</h3> <p class=\"svelte-116uhib\">Every simulation returns a deterministic record:</p> <ul class=\"ml-5 list-disc space-y-1 svelte-116uhib\"><li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">status</strong>: <span class=\"mono svelte-116uhib\">success</span> | <span class=\"mono svelte-116uhib\">blocked</span> | <span class=\"mono svelte-116uhib\">failed</span></li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">parameterErrors</strong>: failed validation</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">evaluatedRules</strong>: every rule looked at, with origin\n            (surface/action) and whether it matched</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">appliedEffects</strong>: what actually ran</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">messages</strong>: user-visible text</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">emittedEvents</strong>: signals fired</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">previousState</strong> / <strong class=\"svelte-116uhib\">nextState</strong>: full\n            state diff</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">invariantViolations</strong>: anything that must-hold but\n            doesn't</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">transition</strong>: target surface, if the action navigated</li></ul>`);\n\t\t\t}\n\t\t\tTutorialSection($$renderer, {\n\t\t\t\tid: \"simulator\",\n\t\t\t\ttitle: \"5. Running the simulator\",\n\t\t\t\tchildren,\n\t\t\t\t$$slots: { default: true }\n\t\t\t});\n\t\t}\n\t\t$$renderer.push(`<!----> `);\n\t\t{\n\t\t\tfunction children($$renderer) {\n\t\t\t\t$$renderer.push(`<p class=\"svelte-116uhib\">Switch the right panel to the <strong class=\"svelte-116uhib\">Maturity</strong> tab. Unspaghettit\n          scores your model procedurally. No AI involved. By checking that:</p> <ul class=\"ml-5 list-disc space-y-1 svelte-116uhib\"><li class=\"svelte-116uhib\">Every feature has a name and at least one surface.</li> <li class=\"svelte-116uhib\">Every surface has at least one action and some state to react to.</li> <li class=\"svelte-116uhib\">Every action has an intent, an effect or rule, and some emitted\n            events.</li> <li class=\"svelte-116uhib\">Every <strong class=\"svelte-116uhib\">mutating</strong> action has a security/permission/compliance\n            rule.</li> <li class=\"svelte-116uhib\">Every action with parameters has a validation rule.</li></ul> <p class=\"svelte-116uhib\">Issues are split into <span class=\"mono svelte-116uhib\">critical</span> (the model is\n          incomplete) and <span class=\"mono svelte-116uhib\">recommended</span> (worth fixing but not blocking).\n          Use it as a design checklist, not as a grade.</p> `);\n\t\t\t\tCallout($$renderer, {\n\t\t\t\t\ttone: \"info\",\n\t\t\t\t\ttitle: \"Want to see a non-100% score?\",\n\t\t\t\t\tchildren: ($$renderer) => {\n\t\t\t\t\t\t$$renderer.push(`<!---->The bundled eShop project is intentionally complete, so it starts as a\n          clean reference model. To see the maturity checker complain, create a\n          tiny test feature with one empty surface and one action without\n          effects, rules, or scenarios. The score will drop and the panel will\n          list exactly what is missing.`);\n\t\t\t\t\t},\n\t\t\t\t\t$$slots: { default: true }\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!---->`);\n\t\t\t}\n\t\t\tTutorialSection($$renderer, {\n\t\t\t\tid: \"maturity\",\n\t\t\t\ttitle: \"6. Reading the maturity score\",\n\t\t\t\tchildren,\n\t\t\t\t$$slots: { default: true }\n\t\t\t});\n\t\t}\n\t\t$$renderer.push(`<!----> `);\n\t\t{\n\t\t\tfunction children($$renderer) {\n\t\t\t\t$$renderer.push(`<p class=\"svelte-116uhib\">The feature editor is split into top-level tabs and surface-level\n          tabs. Anything the MCP can add or update should have a visible manual\n          editor here too.</p> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Top-level tabs</h3> <ul class=\"ml-5 list-disc space-y-1 svelte-116uhib\"><li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">Build</strong>: surfaces, state, actions, rules, invariants,\n            scenarios.</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">Resources</strong>: databases, APIs, queues, files, storage,\n            compliance metadata.</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">Entities</strong>: domain schemas and field mappings.</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">Events</strong>: event registry plus payload schema fields.</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">Transitions</strong>: declared links between surfaces.</li></ul> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Surface tabs</h3> <p class=\"svelte-116uhib\">Inside <strong class=\"svelte-116uhib\">Build</strong>, select a surface and use the middle\n          panel. The <strong class=\"svelte-116uhib\">State</strong> tab edits typed defaults, descriptions, enum\n          values, and cross-surface sharing. The <strong class=\"svelte-116uhib\">Actions</strong> tab edits\n          parameters, required states, emitted events, rules, success effects, block\n          effects, invariants, and scenarios. Surface rules and invariants live in\n          their own tabs because they apply to every action on the surface.</p> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Advanced values</h3> <p class=\"svelte-116uhib\">Rule condition right-hand sides and <span class=\"mono svelte-116uhib\">set_state</span> effect values have Literal, State, and JSON modes. Use State for state-vs-state\n          comparisons. Use JSON for the full MCP expression AST, such as param references\n          or arithmetic.</p> `);\n\t\t\t\tCodeBlock($$renderer, {\n\t\t\t\t\tlanguage: \"json\",\n\t\t\t\t\tcode: `{\n  \"kind\": \"add\",\n  \"left\": { \"kind\": \"state\", \"path\": \"cart.itemCount\" },\n  \"right\": { \"kind\": \"literal\", \"value\": 1 }\n}`\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!----> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Tagging projects and features</h3> <p class=\"svelte-116uhib\">Every project card and feature card has a <span class=\"mono svelte-116uhib\">+ Tag</span> chip that appears on hover. A tag is a <span class=\"mono svelte-116uhib\">{type, value}</span> pair: <span class=\"mono svelte-116uhib\">Team: Growth</span>, <span class=\"mono svelte-116uhib\">Domain: Commerce</span>, <span class=\"mono svelte-116uhib\">Status: WIP</span>. Tags don't change behavior;\n          they're cross-cutting metadata that lets you filter the list along\n          axes the Project → Feature hierarchy doesn't capture.</p> <p class=\"svelte-116uhib\">Click <span class=\"mono svelte-116uhib\">+ Tag</span>, pick or type a type (existing\n          types auto-suggest), enter a value, and confirm. The pill row above\n          the project list filters by tag. Tags dedupe case-insensitively, so\n          re-adding the same tag is a safe no-op.</p> `);\n\t\t\t\tCallout($$renderer, {\n\t\t\t\t\ttone: \"info\",\n\t\t\t\t\ttitle: \"Dashboard-MCP parity\",\n\t\t\t\t\tchildren: ($$renderer) => {\n\t\t\t\t\t\t$$renderer.push(`<!---->Anything the dashboard can do, the MCP can do too, with the same\n          atomicity. Adding a tag from a card calls the same path as <span class=\"mono svelte-116uhib\">add_project_tag</span> / <span class=\"mono svelte-116uhib\">add_feature_tag</span>. If you load a spec made by\n          an agent, you should be able to find every entity in the app:\n          resources, entities, events, payloads, shared state, scenarios,\n          transitions, rules, effects, invariants, parameters, required states,\n          emitted events, and tags.`);\n\t\t\t\t\t},\n\t\t\t\t\t$$slots: { default: true }\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!---->`);\n\t\t\t}\n\t\t\tTutorialSection($$renderer, {\n\t\t\t\tid: \"editor\",\n\t\t\t\ttitle: \"7. Editing in the app\",\n\t\t\t\tchildren,\n\t\t\t\t$$slots: { default: true }\n\t\t\t});\n\t\t}\n\t\t$$renderer.push(`<!----> `);\n\t\t{\n\t\t\tfunction children($$renderer) {\n\t\t\t\t$$renderer.push(`<p class=\"svelte-116uhib\">Try modeling a small CLI or workflow next. <strong class=\"svelte-116uhib\">Pick one slice</strong>, not a whole product. \"Authenticate a CLI\", \"Approve a refund\",\n          \"Schedule a backup\". If your description sounds like a whole app,\n          split it first and pick the one slice you want to model now. A\n          reliable recipe:</p> <ol class=\"ml-5 list-decimal space-y-2 svelte-116uhib\"><li class=\"svelte-116uhib\">Write a one-line description of the feature. Avoid UI words\n            (\"dashboard\", \"form\"). Use behavior words (\"manage subscriptions\",\n            \"approve refunds\").</li> <li class=\"svelte-116uhib\">List the <strong class=\"svelte-116uhib\">actions</strong> the user/system can perform. Each action\n            is a verb in user vocabulary.</li> <li class=\"svelte-116uhib\">Group actions into <strong class=\"svelte-116uhib\">surfaces</strong>. A surface is wherever\n            those actions live in context. Not necessarily a screen.</li> <li class=\"svelte-116uhib\">For each surface, list the <strong class=\"svelte-116uhib\">state</strong> it depends on. State\n            is anything that could change the outcome. Share state across surfaces\n            when the same path is meaningful in both places.</li> <li class=\"svelte-116uhib\">For each action, write the <strong class=\"svelte-116uhib\">rules</strong> that block it. Use\n            real categories. They make the model auditable.</li> <li class=\"svelte-116uhib\">Add <strong class=\"svelte-116uhib\">default effects</strong> describing the success path: state\n            changes, messages, events, transitions.</li> <li class=\"svelte-116uhib\">Register <strong class=\"svelte-116uhib\">events</strong> and payload schemas, then declare which\n            events each action emits.</li> <li class=\"svelte-116uhib\">Add <strong class=\"svelte-116uhib\">invariants</strong> for things that must always be true after\n            the action runs.</li> <li class=\"svelte-116uhib\">Add <strong class=\"svelte-116uhib\">scenarios</strong> for the happy path and important blocked\n            paths.</li> <li class=\"svelte-116uhib\">Run the simulator. Iterate until both edge cases and the happy path\n            behave.</li></ol> `);\n\t\t\t\t{\n\t\t\t\t\tfunction children($$renderer) {\n\t\t\t\t\t\t$$renderer.push(`<ul class=\"ml-4 list-disc space-y-1 svelte-116uhib\"><li class=\"svelte-116uhib\">Describing UI (\"the button changes color\") instead of behavior\n                (\"the <span class=\"mono svelte-116uhib\">order.placed</span> event fires\").</li> <li class=\"svelte-116uhib\">Putting validation logic inside default effects. Use a <span class=\"mono svelte-116uhib\">validation</span> rule so the failure path is explicit and named.</li> <li class=\"svelte-116uhib\">Inventing event names per action. Pick a small dictionary (5–20\n                events) that other surfaces can react to.</li></ul>`);\n\t\t\t\t\t}\n\t\t\t\t\tCallout($$renderer, {\n\t\t\t\t\t\ttone: \"warning\",\n\t\t\t\t\t\ttitle: \"Common mistakes\",\n\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t$$slots: { default: true }\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\t$$renderer.push(`<!---->`);\n\t\t\t}\n\t\t\tTutorialSection($$renderer, {\n\t\t\t\tid: \"build\",\n\t\t\t\ttitle: \"8. Build your own feature\",\n\t\t\t\tchildren,\n\t\t\t\t$$slots: { default: true }\n\t\t\t});\n\t\t}\n\t\t$$renderer.push(`<!----> `);\n\t\t{\n\t\t\tfunction children($$renderer) {\n\t\t\t\t$$renderer.push(`<p class=\"svelte-116uhib\">Every project has an <strong class=\"svelte-116uhib\">Implementation Queue</strong> tab: an ordered\n          \"implement next\" list of Features, Surfaces, or Actions you (or the LLM)\n          plan to build. The point: a dev can say \"implement the next thing in the\n          queue\" and the LLM picks it up via the MCP without you naming the entity.</p> <ul class=\"list-disc space-y-1 pl-5 svelte-116uhib\"><li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">Add to queue</strong> hover affordance appears on every Feature\n            card, every Surface header, and every Action row when the cursor is over\n            them. This keeps the design minimal first.</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">Drag to reorder</strong> on the Queue tab. Order persists to\n            disk via the project file.</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">Auto-prune</strong>: items disappear from the live list as <span class=\"mono svelte-116uhib\">.unspa.json</span> flips their behavioral-index entry to <span class=\"mono svelte-116uhib\">implemented</span>. The raw queue stays on disk;\n            only the live view filters.</li></ul> `);\n\t\t\t\t{\n\t\t\t\t\tfunction children($$renderer) {\n\t\t\t\t\t\t$$renderer.push(`<ul class=\"list-disc space-y-1 pl-5 svelte-116uhib\"><li class=\"svelte-116uhib\"><span class=\"mono svelte-116uhib\">enqueue</span>: add a feature/surface/action.</li> <li class=\"svelte-116uhib\"><span class=\"mono svelte-116uhib\">dequeue</span>: remove by queue item id.</li> <li class=\"svelte-116uhib\"><span class=\"mono svelte-116uhib\">reorder_queue</span>: drag-and-drop equivalent.</li> <li class=\"svelte-116uhib\"><span class=\"mono svelte-116uhib\">list_queue</span>: full live list with done-state.</li> <li class=\"svelte-116uhib\"><span class=\"mono svelte-116uhib\">get_next_queued</span>: peek the next live item\n                (drives \"implement next\").</li> <li class=\"svelte-116uhib\"><span class=\"mono svelte-116uhib\">set_queue_target</span>: pin a per-item goal —\n                how far to take it (maturity %, implementation %, and/or \"report\n                it's in the code\"). Returned on <span class=\"mono svelte-116uhib\">list_queue</span> / <span class=\"mono svelte-116uhib\">get_next_queued</span> as a plain-language\n                goal line.</li></ul>`);\n\t\t\t\t\t}\n\t\t\t\t\tCallout($$renderer, {\n\t\t\t\t\t\ttone: \"info\",\n\t\t\t\t\t\ttitle: \"MCP tools\",\n\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t$$slots: { default: true }\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\t$$renderer.push(`<!---->`);\n\t\t\t}\n\t\t\tTutorialSection($$renderer, {\n\t\t\t\tid: \"queue\",\n\t\t\t\ttitle: \"9. Implementation queue\",\n\t\t\t\tchildren,\n\t\t\t\t$$slots: { default: true }\n\t\t\t});\n\t\t}\n\t\t$$renderer.push(`<!----> `);\n\t\t{\n\t\t\tfunction children($$renderer) {\n\t\t\t\t$$renderer.push(`<p class=\"svelte-116uhib\">The project page header has an <strong class=\"svelte-116uhib\">Export .unspa</strong> button. It\n          bundles the project + every attached feature + every implementation-status\n          sidecar into a single encrypted file:</p> <ul class=\"list-disc space-y-1 pl-5 svelte-116uhib\"><li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">AES-GCM-256</strong> with a key derived from a passphrase\n            via <strong class=\"svelte-116uhib\">PBKDF2-SHA256, 600 000 iterations</strong> (OWASP 2023 minimum).</li> <li class=\"svelte-116uhib\">The passphrase <strong class=\"svelte-116uhib\">never leaves the browser</strong>.</li> <li class=\"svelte-116uhib\">The envelope carries <strong class=\"svelte-116uhib\">no identifier of contents</strong>: no\n            project name, no metadata. A third party holding the file learns only\n            that it's an Unspaghettit bundle.</li> <li class=\"svelte-116uhib\">Wrong passphrase + tampered ciphertext both fail at AES-GCM's\n            auth-tag check and never decrypt to garbage.</li></ul> <p class=\"svelte-116uhib\">Restore via the <strong class=\"svelte-116uhib\">Import .unspa</strong> button on the projects index.\n          Useful for transferring a project between machines, archiving a milestone,\n          or sharing with a teammate over an insecure channel.</p> `);\n\t\t\t\t{\n\t\t\t\t\tfunction children($$renderer) {\n\t\t\t\t\t\t$$renderer.push(`<p class=\"svelte-116uhib\">A 12-character random passphrase is well outside brute-force range\n              at 600k iterations. A 6-character dictionary word is not. Pick\n              accordingly.</p>`);\n\t\t\t\t\t}\n\t\t\t\t\tCallout($$renderer, {\n\t\t\t\t\t\ttone: \"warning\",\n\t\t\t\t\t\ttitle: \"Passphrase strength is on you\",\n\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t$$slots: { default: true }\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\t$$renderer.push(`<!---->`);\n\t\t\t}\n\t\t\tTutorialSection($$renderer, {\n\t\t\t\tid: \"backup\",\n\t\t\t\ttitle: \"10. Backup & share with .unspa\",\n\t\t\t\tchildren,\n\t\t\t\t$$slots: { default: true }\n\t\t\t});\n\t\t}\n\t\t$$renderer.push(`<!----> `);\n\t\t{\n\t\t\tfunction children($$renderer) {\n\t\t\t\t$$renderer.push(`<p class=\"svelte-116uhib\">Unspaghettit also ships a local MCP server so agents can inspect and\n          simulate your behavior models without scraping the UI. It runs over <span class=\"mono svelte-116uhib\">stdio</span>, which means each client starts it as a local child process.</p> `);\n\t\t\t\t{\n\t\t\t\t\tfunction children($$renderer) {\n\t\t\t\t\t\t$$renderer.push(`<!---->The server exposes read, write, validation, simulation, maturity,\n            scenario, implementation-audit, resource, entity, event, transition,\n            persona, state, surface, action, rule, effect, and invariant tools.\n            Use focused reads like <span class=\"mono svelte-116uhib\">get_action</span>, bulk edits through <span class=\"mono svelte-116uhib\">apply_batch</span>, dry validation with <span class=\"mono svelte-116uhib\">apply_batch dryRun:true</span>, behavior checks\n            with <span class=\"mono svelte-116uhib\">dry_run_simulate</span> and <span class=\"mono svelte-116uhib\">run_all_scenarios</span>, and quality checks with <span class=\"mono svelte-116uhib\">score_feature</span>. Diagnostics go to stderr so\n            stdout stays reserved for the MCP JSON-RPC stream.`);\n\t\t\t\t\t}\n\t\t\t\t\tCallout($$renderer, {\n\t\t\t\t\t\ttone: \"info\",\n\t\t\t\t\t\ttitle: \"What the server exposes\",\n\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t$$slots: { default: true }\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\t$$renderer.push(`<!----> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Prerequisites</h3> <ol class=\"ml-5 list-decimal space-y-2 svelte-116uhib\"><li class=\"svelte-116uhib\">Install dependencies once with <span class=\"mono svelte-116uhib\">npm install</span>.</li> <li class=\"svelte-116uhib\">Keep exported snapshots in the repo's <span class=\"mono svelte-116uhib\">unspa/</span> folder. The MCP server discovers this folder automatically when it\n            starts from the project root.</li> <li class=\"svelte-116uhib\">Smoke test the server from the repo root with <span class=\"mono svelte-116uhib\">npm run mcp</span>. It should print a <span class=\"mono svelte-116uhib\">[unspa-mcp] snapshots:</span> line and then wait for\n            an MCP client.</li></ol> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Agent authoring workflow</h3> <ol class=\"ml-5 list-decimal space-y-2 svelte-116uhib\"><li class=\"svelte-116uhib\">Read narrowly first: <span class=\"mono svelte-116uhib\">get_feature</span> for the\n            index, then <span class=\"mono svelte-116uhib\">get_action</span> for the area you are\n            changing.</li> <li class=\"svelte-116uhib\">Draft multi-entity edits with <span class=\"mono svelte-116uhib\">apply_batch</span>.\n            Batch-created refs work across surfaces, transitions, effects, and <span class=\"mono svelte-116uhib\">sharedWith</span>.</li> <li class=\"svelte-116uhib\">Run <span class=\"mono svelte-116uhib\">apply_batch</span> with <span class=\"mono svelte-116uhib\">dryRun:true</span> before saving risky edits.</li> <li class=\"svelte-116uhib\">Run <span class=\"mono svelte-116uhib\">dry_run_simulate</span> for one action or <span class=\"mono svelte-116uhib\">run_all_scenarios</span> for saved examples.</li> <li class=\"svelte-116uhib\">Run <span class=\"mono svelte-116uhib\">score_feature</span>, then open the app and\n            verify the generated spec is manually editable.</li> <li class=\"svelte-116uhib\">Tag projects and features the same way the dashboard would: <span class=\"mono svelte-116uhib\">add_project_tag</span> / <span class=\"mono svelte-116uhib\">remove_project_tag</span> for projects, <span class=\"mono svelte-116uhib\">add_feature_tag</span> / <span class=\"mono svelte-116uhib\">remove_feature_tag</span> for features. Each is\n            atomic and idempotent. For bulk replacement, pass <span class=\"mono svelte-116uhib\">tags: [...]</span> to <span class=\"mono svelte-116uhib\">create_project</span> / <span class=\"mono svelte-116uhib\">update_project</span> / <span class=\"mono svelte-116uhib\">create_feature</span> / <span class=\"mono svelte-116uhib\">update_feature</span>.</li></ol> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">VS Code / GitHub Copilot</h3> <p class=\"svelte-116uhib\">Create <span class=\"mono svelte-116uhib\">.vscode/mcp.json</span> in this repo, or\n          open it if it already exists. VS Code reads this MCP config file and\n          lets Copilot Agent mode start the server. The MCP servers live under\n          the top-level <span class=\"mono svelte-116uhib\">servers</span> key.</p> `);\n\t\t\t\tCodeBlock($$renderer, {\n\t\t\t\t\tlanguage: \"json\",\n\t\t\t\t\tcode: `{\n  \"servers\": {\n    \"unspa\": {\n      \"command\": \"npm.cmd\",\n      \"args\": [\"run\", \"mcp\"],\n      \"cwd\": \"\\${workspaceFolder}\"\n    }\n  }\n}`\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!----> <p class=\"svelte-116uhib\">Then run <span class=\"mono svelte-116uhib\">MCP: List Servers</span> from the Command\n          Palette, select <span class=\"mono svelte-116uhib\">unspa</span>, start it, and trust the local MCP\n          server when prompted.</p> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Codex</h3> <p class=\"svelte-116uhib\">Codex stores MCP servers in <span class=\"mono svelte-116uhib\">~/.codex/config.toml</span>. Open the file, keep any existing model or project settings, and add\n          this block at the end. Adapt the path if your checkout lives somewhere\n          else.</p> `);\n\t\t\t\tCodeBlock($$renderer, {\n\t\t\t\t\tlanguage: \"toml\",\n\t\t\t\t\tcode: `[mcp_servers.unspa]\ncommand = \"npm.cmd\"\nargs = [\"run\", \"mcp\"]\ncwd = \"<your-unspaghettit-clone>\"\nenabled = true\nstartup_timeout_sec = 30\ntool_timeout_sec = 120`\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!----> <p class=\"svelte-116uhib\">Restart Codex, then run <span class=\"mono svelte-116uhib\">/mcp</span> or <span class=\"mono svelte-116uhib\">codex mcp list</span> to confirm that <span class=\"mono svelte-116uhib\">unspa</span> is available.</p> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Claude Desktop</h3> <p class=\"svelte-116uhib\">In Claude Desktop, open <span class=\"mono svelte-116uhib\">Settings -> Developer -> Edit Config</span>. On Windows this edits <span class=\"mono svelte-116uhib\">%APPDATA%\\\\Claude\\\\claude_desktop_config.json</span> or, for the Microsoft Store build, a path under <span class=\"mono svelte-116uhib\">AppData\\\\Local\\\\Packages\\\\Claude_...\\\\LocalCache\\\\Roaming\\\\Claude</span>. If the file already contains <span class=\"mono svelte-116uhib\">preferences</span>,\n          do not replace it. Add <span class=\"mono svelte-116uhib\">mcpServers</span> as another\n          top-level key next to <span class=\"mono svelte-116uhib\">preferences</span>, then fully restart Claude\n          Desktop.</p> `);\n\t\t\t\t{\n\t\t\t\t\tfunction children($$renderer) {\n\t\t\t\t\t\t$$renderer.push(`<!---->The normal Claude Desktop chat reads <span class=\"mono svelte-116uhib\">mcpServers</span> from <span class=\"mono svelte-116uhib\">claude_desktop_config.json</span>. Claude\n            Desktop's local coding agent can also use Claude Code-style project\n            config, so this repo includes a root-level <span class=\"mono svelte-116uhib\">.mcp.json</span>. If Claude answers by searching\n            the MCP registry instead of calling <span class=\"mono svelte-116uhib\">unspa</span>,\n            the local server was not loaded in that session.`);\n\t\t\t\t\t}\n\t\t\t\t\tCallout($$renderer, {\n\t\t\t\t\t\ttone: \"warning\",\n\t\t\t\t\t\ttitle: \"Claude Desktop chat vs local agent mode\",\n\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t$$slots: { default: true }\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\t$$renderer.push(`<!----> `);\n\t\t\t\tCodeBlock($$renderer, {\n\t\t\t\t\tlanguage: \"json\",\n\t\t\t\t\tcode: `{\n  \"preferences\": {\n    \"localAgentModeTrustedFolders\": [\n      \"<your-unspaghettit-clone>\"\n    ],\n    \"...\": \"keep your existing Claude settings here\"\n  },\n  \"mcpServers\": {\n    \"unspa\": {\n      \"type\": \"stdio\",\n      \"command\": \"cmd\",\n      \"args\": [\"/c\", \"npm.cmd\", \"run\", \"mcp\"],\n      \"cwd\": \"<your-unspaghettit-clone>\"\n    }\n  }\n}`\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!----> <p class=\"svelte-116uhib\">For example, if your file currently starts with only <span class=\"mono svelte-116uhib\">\"preferences\"</span>, the result should look like\n          this shape:</p> `);\n\t\t\t\tCodeBlock($$renderer, {\n\t\t\t\t\tlanguage: \"json\",\n\t\t\t\t\tcode: `{\n  \"preferences\": {\n    \"localAgentModeTrustedFolders\": [\n      \"C:\\\\\\\\path\\\\\\\\to\\\\\\\\your\\\\\\\\project\"\n    ],\n    \"coworkScheduledTasksEnabled\": true,\n    \"ccdScheduledTasksEnabled\": true,\n    \"sidebarMode\": \"task\",\n    \"coworkWebSearchEnabled\": true,\n    \"epitaxyPrefs\": {\n      \"starred-local-code-sessions\": [],\n      \"starred-cowork-spaces\": [],\n      \"starred-session-groups\": [],\n      \"dframe-local-slice\": {\n        \"pinnedOrder\": [],\n        \"customGroupAssignments\": {},\n        \"customGroupOrder\": {}\n      }\n    }\n  },\n  \"mcpServers\": {\n    \"unspa\": {\n      \"type\": \"stdio\",\n      \"command\": \"cmd\",\n      \"args\": [\"/c\", \"npm.cmd\", \"run\", \"mcp\"],\n      \"cwd\": \"<your-unspaghettit-clone>\"\n    }\n  }\n}`\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!----> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Claude Code</h3> <p class=\"svelte-116uhib\">Claude Code is configured separately from Claude Desktop. For\n          team-friendly setup, commit a <span class=\"mono svelte-116uhib\">.mcp.json</span> file\n          at the project root:</p> `);\n\t\t\t\tCodeBlock($$renderer, {\n\t\t\t\t\tlanguage: \"json\",\n\t\t\t\t\tcode: `{\n  \"mcpServers\": {\n    \"unspa\": {\n      \"type\": \"stdio\",\n      \"command\": \"cmd\",\n      \"args\": [\"/c\", \"npm.cmd\", \"run\", \"mcp\"],\n      \"env\": {}\n    }\n  }\n}`\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!----> <p class=\"svelte-116uhib\">When Claude Code or Claude Desktop local agent mode opens this\n          project, approve the project MCP server if prompted. If you prefer a\n          private user-level install instead, run this from any terminal:</p> `);\n\t\t\t\tCodeBlock($$renderer, {\n\t\t\t\t\tlanguage: \"powershell\",\n\t\t\t\t\tcode: `claude mcp add-json unspa '{ \"type\": \"stdio\", \"command\": \"cmd\", \"args\": [\"/c\", \"npm.cmd\", \"run\", \"mcp\"], \"cwd\": \"<your-unspaghettit-clone>\" }'\nclaude mcp list`\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!----> `);\n\t\t\t\t{\n\t\t\t\t\tfunction children($$renderer) {\n\t\t\t\t\t\t$$renderer.push(`<!---->If Claude Code is already running in your repo, you can ask it to do\n            the setup for you: `);\n\t\t\t\t\t\tCodeBlock($$renderer, {\n\t\t\t\t\t\t\tlanguage: \"text\",\n\t\t\t\t\t\t\tcode: `Install Unspaghettit in this repo. Run unspa init, register the MCP server for Claude Code, keep the generated CLAUDE.md/AGENTS.md guidance, then verify the unspa MCP tools are available.`\n\t\t\t\t\t\t});\n\t\t\t\t\t\t$$renderer.push(`<!----> After it finishes, restart Claude Code if the MCP server list does not\n            refresh automatically.`);\n\t\t\t\t\t}\n\t\t\t\t\tCallout($$renderer, {\n\t\t\t\t\t\ttone: \"info\",\n\t\t\t\t\t\ttitle: \"Fast path with Claude Code\",\n\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t$$slots: { default: true }\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\t$$renderer.push(`<!----> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Generic MCP clients</h3> <p class=\"svelte-116uhib\">Any stdio-compatible MCP client needs the same launcher: command <span class=\"mono svelte-116uhib\">npm.cmd</span>, args <span class=\"mono svelte-116uhib\">[\"run\", \"mcp\"]</span>, and working directory set to\n          the repo root. If a client does not support <span class=\"mono svelte-116uhib\">cwd</span>, launch it from this directory or pass\n          an explicit snapshots folder:</p> `);\n\t\t\t\tCodeBlock($$renderer, {\n\t\t\t\t\tlanguage: \"json\",\n\t\t\t\t\tcode: `{\n  \"command\": \"npm.cmd\",\n  \"args\": [\n    \"run\",\n    \"mcp\",\n    \"--\",\n    \"--snapshots\",\n    \"<your-unspaghettit-clone>/unspa\"\n  ]\n}`\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!---->`);\n\t\t\t}\n\t\t\tTutorialSection($$renderer, {\n\t\t\t\tid: \"mcp\",\n\t\t\t\ttitle: \"11. Connect AI agents with MCP\",\n\t\t\t\tchildren,\n\t\t\t\t$$slots: { default: true }\n\t\t\t});\n\t\t}\n\t\t$$renderer.push(`<!----> `);\n\t\t{\n\t\t\tfunction children($$renderer) {\n\t\t\t\t$$renderer.push(`<p class=\"svelte-116uhib\">Multiple humans + AI agents can edit the same runtime live. The\n          dashboard's Yjs WebSocket layer makes every change land in every open\n          tab without a refresh, and an activity toast carries the breadcrumb (<span class=\"mono svelte-116uhib\">Project › Feature › Surface › Action</span>) + a <strong class=\"svelte-116uhib\">View</strong> button to jump there.</p> <p class=\"svelte-116uhib\">Click the round avatar in the header to set your <strong class=\"svelte-116uhib\">display name</strong>. Every history entry you create is tagged with it and stored only in\n          this browser's localStorage, never sent off-machine. First visit\n          prompts once; the avatar dropdown is the explicit way to change or\n          reset later.</p> <p class=\"svelte-116uhib\">MCP-driven changes carry an <strong class=\"svelte-116uhib\">AI · for &lt;your-name></strong> label: the AI badge stays purple (clear AI/human distinction), and the\n          human name is the supporting attribution. The dashboard server resolves\n          \"who's currently here\" from the connected WebSocket clients and tags entries\n          accordingly.</p> `);\n\t\t\t\t{\n\t\t\t\t\tfunction children($$renderer) {\n\t\t\t\t\t\t$$renderer.push(`<!---->The avatar dropdown also exposes a <strong class=\"svelte-116uhib\">Reset local data</strong> option (red, with a danger confirm). It wipes <span class=\"mono svelte-116uhib\">localStorage</span> + <span class=\"mono svelte-116uhib\">sessionStorage</span> and reloads. Server-side project\n            data is untouched.`);\n\t\t\t\t\t}\n\t\t\t\t\tCallout($$renderer, {\n\t\t\t\t\t\ttone: \"info\",\n\t\t\t\t\t\ttitle: \"Reset local data\",\n\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t$$slots: { default: true }\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\t$$renderer.push(`<!---->`);\n\t\t\t}\n\t\t\tTutorialSection($$renderer, {\n\t\t\t\tid: \"collab\",\n\t\t\t\ttitle: \"12. Multi-user & identity\",\n\t\t\t\tchildren,\n\t\t\t\t$$slots: { default: true }\n\t\t\t});\n\t\t}\n\t\t$$renderer.push(`<!----> `);\n\t\t{\n\t\t\tfunction children($$renderer) {\n\t\t\t\t$$renderer.push(`<p class=\"svelte-116uhib\">Default install is <strong class=\"svelte-116uhib\">loopback-only</strong> with no auth. The\n          dashboard binds <span class=\"mono svelte-116uhib\">127.0.0.1:3000</span> and only your\n          machine can reach it. That's the right stance for solo dev on a trusted\n          workstation; the user is the trust boundary.</p> <p class=\"svelte-116uhib\">To <strong class=\"svelte-116uhib\">share with teammates on a trusted network</strong> (home wifi,\n          office VLAN, Tailscale subnet), opt into the LAN-share tier:</p> `);\n\t\t\t\tCodeBlock($$renderer, {\n\t\t\t\t\tlanguage: \"bash\",\n\t\t\t\t\tcode: `# Generate a strong token (any random string works):\nTOKEN=$(node -e \"console.log(crypto.randomBytes(24).toString('base64url'))\")\n\n# Set on both the dashboard env AND every MCP server that talks to it:\nexport UNSPA_AUTH_TOKEN=$TOKEN\n# Optional but recommended: lock cross-site browser requests\nexport UNSPA_ALLOWED_ORIGIN=http://192.168.1.10:3000\n\nunspa dashboard --host 0.0.0.0`\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!----> <p class=\"svelte-116uhib\">What it covers: anyone who knows the token can read/write every\n          feature; anyone who doesn't gets <span class=\"mono svelte-116uhib\">401</span>. A\n          malicious page in another browser tab can't drive writes against the\n          dashboard (origin check).</p> <p class=\"svelte-116uhib\">What it does <strong class=\"svelte-116uhib\">not</strong> cover: SSO, RBAC, per-user permissions,\n          HTTPS termination, audit-trail hardening, encryption at rest. Front the\n          dashboard with a reverse proxy (Caddy, Tailscale Serve, cloudflared with\n          Access) for HTTPS + extra auth layers.</p> `);\n\t\t\t\t{\n\t\t\t\t\tfunction children($$renderer) {\n\t\t\t\t\t\t$$renderer.push(`<!---->The OSS install is built for trusted networks. Public exposure\n            requires the enterprise tier (SSO + RBAC + audit, separately\n            distributed).`);\n\t\t\t\t\t}\n\t\t\t\t\tCallout($$renderer, {\n\t\t\t\t\t\ttone: \"warning\",\n\t\t\t\t\t\ttitle: \"Do not expose 0.0.0.0:3000 to the public internet\",\n\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t$$slots: { default: true }\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\t$$renderer.push(`<!----> <p class=\"text-sm text-slate-600 svelte-116uhib\">Full threat model + mitigations in <a href=\"https://github.com/lyriks-io/unspaghettit/blob/main/SECURITY.md\" class=\"text-brand-700 hover:underline svelte-116uhib\">SECURITY.md</a>.</p>`);\n\t\t\t}\n\t\t\tTutorialSection($$renderer, {\n\t\t\t\tid: \"security\",\n\t\t\t\ttitle: \"13. Hosting on a network\",\n\t\t\t\tchildren,\n\t\t\t\t$$slots: { default: true }\n\t\t\t});\n\t\t}\n\t\t$$renderer.push(`<!----> `);\n\t\t{\n\t\t\tfunction children($$renderer) {\n\t\t\t\t$$renderer.push(`<ul class=\"ml-5 list-disc space-y-1 svelte-116uhib\"><li class=\"svelte-116uhib\">Open the <a href=\"/features\" class=\"text-brand-700 underline svelte-116uhib\">features list</a> and remix the e-commerce sample. Try modeling a returns/refunds surface.</li> <li class=\"svelte-116uhib\">Try modeling a non-UI product: a CLI for project scaffolding, an LLM\n            agent that handles support tickets, or an internal approval\n            workflow.</li> <li class=\"svelte-116uhib\">Watch the <strong class=\"svelte-116uhib\">Maturity</strong> panel turn green as you tighten the\n            model. The score is a direct readout of how much of the behavior you've\n            explicitly named.</li></ul> `);\n\t\t\t\t{\n\t\t\t\t\tfunction children($$renderer) {\n\t\t\t\t\t\t$$renderer.push(`<!---->Unspaghettit is free and stays local-first. The roadmap tracks the\n            app's own behavior: deeper simulator coverage, sharper maturity\n            checks, more MCP tools, smoother authoring. If something blocks how\n            you model your product, open an issue. What ships next is shaped by\n            what the community runs into.`);\n\t\t\t\t\t}\n\t\t\t\t\tCallout($$renderer, {\n\t\t\t\t\t\ttone: \"info\",\n\t\t\t\t\t\ttitle: \"Where this goes next\",\n\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t$$slots: { default: true }\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\t$$renderer.push(`<!---->`);\n\t\t\t}\n\t\t\tTutorialSection($$renderer, {\n\t\t\t\tid: \"next\",\n\t\t\t\ttitle: \"14. Where to go next\",\n\t\t\t\tchildren,\n\t\t\t\t$$slots: { default: true }\n\t\t\t});\n\t\t}\n\t\t$$renderer.push(`<!----></article></div>`);\n\t});\n}\n//#endregion\nexport { _page as default };\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"_page.svelte-Uioz8hsG.js","sources":["../../../.svelte-kit/adapter-node/entries/pages/tutorial/_page.svelte.js"],"sourcesContent":["import { G as attr, l as derived, o as attr_class, q as escape_html, u as ensure_array_like } from \"../../../chunks/index-server.js\";\nimport \"../../../chunks/TagPalette.js\";\nimport \"../../../chunks/browserContainer.js\";\nimport \"../../../chunks/navigation.js\";\nimport \"../../../chunks/tourStore.svelte.js\";\nimport \"../../../chunks/featuresStore.svelte.js\";\nimport \"../../../chunks/NameMatch.js\";\nimport \"../../../chunks/featureStore.svelte.js\";\n//#region src/features/tutorial/presentation/components/TutorialSection.svelte\nfunction TutorialSection($$renderer, $$props) {\n\tlet { id, title, children } = $$props;\n\t$$renderer.push(`<section${attr(\"id\", id)} class=\"scroll-mt-24 space-y-3 border-b border-hairline pb-8 last:border-b-0\"><h2 class=\"text-xl font-semibold tracking-tight\"><a${attr(\"href\", `#${id}`)} class=\"text-slate-950 hover:text-brand-700\">${escape_html(title)}</a></h2> <div class=\"space-y-3 text-sm leading-7 text-slate-700\">`);\n\tchildren($$renderer);\n\t$$renderer.push(`<!----></div></section>`);\n}\n//#endregion\n//#region src/features/tutorial/presentation/components/CodeBlock.svelte\nfunction CodeBlock($$renderer, $$props) {\n\tlet { code, language = \"text\" } = $$props;\n\t$$renderer.push(`<pre class=\"mono overflow-x-auto rounded-lg border border-[#1e293b] bg-[#020617] p-4 text-[12px] leading-relaxed text-[#eaeef4]\"${attr(\"data-lang\", language)}><code>${escape_html(code)}</code></pre>`);\n}\n//#endregion\n//#region src/features/tutorial/presentation/components/Callout.svelte\nfunction Callout($$renderer, $$props) {\n\tlet { tone = \"info\", title, children } = $$props;\n\tconst cls = derived(() => tone === \"warning\" ? \"bg-amber-50 border-amber-200 text-amber-900\" : tone === \"success\" ? \"bg-emerald-50 border-emerald-200 text-emerald-900\" : \"bg-brand-50 border-brand-200 text-brand-900\");\n\t$$renderer.push(`<div${attr_class(`rounded-md border p-3 text-sm ${cls()}`)}>`);\n\tif (title) {\n\t\t$$renderer.push(\"<!--[0-->\");\n\t\t$$renderer.push(`<p class=\"mb-1 font-semibold\">${escape_html(title)}</p>`);\n\t} else $$renderer.push(\"<!--[-1-->\");\n\t$$renderer.push(`<!--]--> <div class=\"leading-6\">`);\n\tchildren($$renderer);\n\t$$renderer.push(`<!----></div></div>`);\n}\n//#endregion\n//#region src/routes/tutorial/+page.svelte\nfunction _page($$renderer, $$props) {\n\t$$renderer.component(($$renderer) => {\n\t\tconst sections = [\n\t\t\t{\n\t\t\t\tid: \"why\",\n\t\t\t\ttitle: \"1. Why executable specs\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"model\",\n\t\t\t\ttitle: \"2. The core model\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"concepts\",\n\t\t\t\ttitle: \"3. Concept by concept\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"walkthrough\",\n\t\t\t\ttitle: \"4. Walkthrough: eShop project\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"simulator\",\n\t\t\t\ttitle: \"5. Running the simulator\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"maturity\",\n\t\t\t\ttitle: \"6. Reading the maturity score\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"editor\",\n\t\t\t\ttitle: \"7. Editing in the app\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"build\",\n\t\t\t\ttitle: \"8. Build your own feature\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"queue\",\n\t\t\t\ttitle: \"9. Implementation queue\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"backup\",\n\t\t\t\ttitle: \"10. Backup & share with .unspa\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"mcp\",\n\t\t\t\ttitle: \"11. Connect AI agents with MCP\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"collab\",\n\t\t\t\ttitle: \"12. Multi-user & identity\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"security\",\n\t\t\t\ttitle: \"13. Hosting on a network\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"next\",\n\t\t\t\ttitle: \"14. Where to go next\"\n\t\t\t}\n\t\t];\n\t\tlet busyLoadingSamples = false;\n\t\t$$renderer.push(`<div class=\"mx-auto grid max-w-7xl grid-cols-12 gap-8 px-4 py-8 sm:px-6 svelte-116uhib\"><aside class=\"col-span-12 lg:col-span-3 svelte-116uhib\"><nav class=\"sticky top-24 space-y-1 rounded-lg border border-hairline bg-white p-3 text-sm svelte-116uhib\"><p class=\"px-2 pb-2 text-xs font-medium uppercase tracking-wide text-slate-500 svelte-116uhib\">Tutorial</p> <!--[-->`);\n\t\tconst each_array = ensure_array_like(sections);\n\t\tfor (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {\n\t\t\tlet s = each_array[$$index];\n\t\t\t$$renderer.push(`<a${attr(\"href\", `#${s.id}`)} class=\"block rounded-md px-2 py-1.5 text-slate-700 hover:bg-slate-50 hover:text-slate-950 svelte-116uhib\">${escape_html(s.title)}</a>`);\n\t\t}\n\t\t$$renderer.push(`<!--]--> <div class=\"mt-4 space-y-2 border-t border-hairline pt-4 svelte-116uhib\"><button type=\"button\" class=\"sample-cta relative w-full overflow-hidden rounded-md px-3 py-2 text-xs font-medium text-white shadow-sm shadow-slate-950/10 transition disabled:cursor-wait disabled:opacity-70 svelte-116uhib\"${attr(\"disabled\", busyLoadingSamples, true)}><span class=\"relative z-10 svelte-116uhib\">${escape_html(\"Load sample project\")}</span></button> <button type=\"button\" class=\"w-full rounded-md border border-brand-300 bg-brand-50 px-3 py-2 text-xs font-semibold text-brand-800 transition hover:bg-brand-100 svelte-116uhib\" title=\"Side panel walks you through creating your first feature\">→ Run interactive tutorial</button> <a href=\"/features\" class=\"block w-full rounded-md bg-slate-900 px-3 py-2 text-center text-xs font-medium text-white svelte-116uhib\">Back to features</a></div></nav></aside> <article class=\"col-span-12 space-y-12 lg:col-span-9 svelte-116uhib\"><header class=\"border-b border-slate-200 pb-8 svelte-116uhib\"><div class=\"max-w-3xl svelte-116uhib\"><p class=\"text-xs font-semibold uppercase tracking-wide text-brand-700 svelte-116uhib\">Tutorial</p> <h1 class=\"mt-2 text-4xl font-semibold tracking-tight text-slate-950 svelte-116uhib\">Modeling software as executable behavior</h1> <p class=\"mt-3 text-base leading-7 text-slate-600 svelte-116uhib\">Unspaghettit is a tool for describing what software <em class=\"svelte-116uhib\">does</em>, not\n          what it <em class=\"svelte-116uhib\">looks like</em>. This guide walks you through the model, the\n          simulator, the maturity score, the manual editor, and the MCP server.</p> <p class=\"mt-2 text-xs text-slate-500 svelte-116uhib\">An open-source project by <a href=\"https://lyriks.io\" class=\"text-brand-700 hover:underline svelte-116uhib\" rel=\"noopener\">Lyriks.io</a>.</p></div> <div class=\"mt-6 svelte-116uhib\">`);\n\t\tCallout($$renderer, {\n\t\t\ttone: \"info\",\n\t\t\ttitle: \"Tip\",\n\t\t\tchildren: ($$renderer) => {\n\t\t\t\t$$renderer.push(`<!---->Click <span class=\"mono svelte-116uhib\">Load sample project</span> on the left to make\n          sure the seeded eShop example is available.`);\n\t\t\t},\n\t\t\t$$slots: { default: true }\n\t\t});\n\t\t$$renderer.push(`<!----></div></header> `);\n\t\t{\n\t\t\tfunction children($$renderer) {\n\t\t\t\t$$renderer.push(`<p class=\"svelte-116uhib\">AI coding workflows go sideways fast. Specs drift. Prompts pile up.\n          Generated systems lose coherence. The reason is almost always the\n          same: humans and LLMs share <strong class=\"svelte-116uhib\">prose</strong>, markdown specs, giant prompts, chat history,\n          scattered README fragments, and prose has no runtime. Nothing executes\n          it, nothing validates it, nothing breaks loudly when it goes stale.</p> <p class=\"svelte-116uhib\">Unspaghettit turns that prose into an <strong class=\"svelte-116uhib\">executable specification</strong>. The specification describes observable behavior: anything a user,\n          system, or AI can do is an <em class=\"svelte-116uhib\">action</em>; anything true right now is <em class=\"svelte-116uhib\">state</em>; anything\n          that gates an action is a <em class=\"svelte-116uhib\">rule</em>; anything that follows from\n          running an action is an <em class=\"svelte-116uhib\">effect</em> or an <em class=\"svelte-116uhib\">event</em>.</p> <p class=\"svelte-116uhib\">A few names appear throughout the app: <strong class=\"svelte-116uhib\">Unspaghettit</strong> is the product, <strong class=\"svelte-116uhib\">behavior</strong> is what you model, <strong class=\"svelte-116uhib\">spec</strong> is the executable contract, <strong class=\"svelte-116uhib\">MCP</strong> is how your AI agent reads and edits it.</p> <p class=\"svelte-116uhib\">The vocabulary is small enough to hold in head and rigid enough to\n          execute. Specs stop being documentation you re-explain in every\n          prompt; they become a contract you can simulate, score, and break\n          loudly.</p>`);\n\t\t\t}\n\t\t\tTutorialSection($$renderer, {\n\t\t\t\tid: \"why\",\n\t\t\t\ttitle: \"1. Why executable specs\",\n\t\t\t\tchildren,\n\t\t\t\t$$slots: { default: true }\n\t\t\t});\n\t\t}\n\t\t$$renderer.push(`<!----> `);\n\t\t{\n\t\t\tfunction children($$renderer) {\n\t\t\t\t$$renderer.push(`<p class=\"svelte-116uhib\">The hierarchy fits on one line:</p> `);\n\t\t\t\tCodeBlock($$renderer, {\n\t\t\t\t\tlanguage: \"text\",\n\t\t\t\t\tcode: `Domain → Project → Feature → Surface → Action → State / Rule / Effect`\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!----> <p class=\"svelte-116uhib\">A <strong class=\"svelte-116uhib\">Project</strong> is the umbrella for one product or\n          codebase. It groups many <strong class=\"svelte-116uhib\">Features</strong>. A Feature is one coherent slice of behavior\n          (a flow, a screen, a capability) sized so an LLM can hold the whole\n          thing in head: ~1–15 surfaces, ~30–100 actions. A Feature is <em class=\"svelte-116uhib\">not</em> a whole product. Inside a Feature, the rest of the vocabulary\n          lives here:</p> `);\n\t\t\t\tCodeBlock($$renderer, {\n\t\t\t\t\tlanguage: \"text\",\n\t\t\t\t\tcode: `Feature\n|-- Resource                  (external or local system/data boundary)\n|-- Entity                    (domain schema mapped to state/resource fields)\n|-- Event                     (registered signal + optional payload schema)\n+-- Surface\n    |-- StateDefinition       (typed dynamic state, optionally shared)\n    |-- Action\n    |   |-- Parameter         (input, default, validations, state binding)\n    |   |-- RequiredState     (state the action depends on)\n    |   |-- Rule              (condition -> effect)\n    |   |-- Effect            (success outcome)\n    |   |-- OnBlockedEffect   (fallback when blocked)\n    |   |-- Invariant         (must hold post-run)\n    |   |-- EmittedEvent      (declared signal)\n    |   +-- Scenario          (simulator example + expected result)\n    |-- Rule                  (cross-cutting surface gate)\n    |-- Invariant             (cross-cutting check)\n    +-- Transition            (declared link to another surface)`\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!----> <p class=\"svelte-116uhib\">That is the whole behavior graph. The manual editor and MCP tools both\n          read and write these same entities.</p>`);\n\t\t\t}\n\t\t\tTutorialSection($$renderer, {\n\t\t\t\tid: \"model\",\n\t\t\t\ttitle: \"2. The core model\",\n\t\t\t\tchildren,\n\t\t\t\t$$slots: { default: true }\n\t\t\t});\n\t\t}\n\t\t$$renderer.push(`<!----> `);\n\t\t{\n\t\t\tfunction children($$renderer) {\n\t\t\t\t$$renderer.push(`<h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Feature</h3> <p class=\"svelte-116uhib\">One coherent slice of behavior inside a Project. A flow, a screen, a\n          capability. Sized so an LLM can hold the whole thing in head: roughly\n          1–15 surfaces and 30–100 actions. A Feature is <em class=\"svelte-116uhib\">not</em> a whole product.\n          \"Add filter to search results\" is one Feature; \"Spotify clone\" is a Project\n          that holds many Features. A Feature contains surfaces plus global resources,\n          entity definitions, registered events, personas, and implementation context.</p> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Resources and Entities</h3> <p class=\"svelte-116uhib\">Resources document the systems your behavior touches: databases, HTTP\n          APIs, object storage, queues, browser storage, caches, or local files.\n          Entity definitions describe domain objects and map fields back to\n          state paths or resources. These are editable from the top-level <strong class=\"svelte-116uhib\">Resources</strong> and <strong class=\"svelte-116uhib\">Entities</strong> tabs. Example: the eShop sample has a <span class=\"mono svelte-116uhib\">Cart store</span> resource and a <span class=\"mono svelte-116uhib\">Cart</span> entity with <span class=\"mono svelte-116uhib\">lineItems</span> and <span class=\"mono svelte-116uhib\">subtotal</span> fields.</p> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Surface</h3> <p class=\"svelte-116uhib\">A surface is the only fundamental container. It can represent a\n          screen, a canvas, a terminal, a board, a workflow, a command palette,\n          a map, a dialog area, an API playground, or anything else. Surfaces\n          hold state and actions and link to other surfaces via transitions.\n          Example: <span class=\"mono svelte-116uhib\">Cart &amp; checkout</span> contains the <span class=\"mono svelte-116uhib\">Cart</span>, <span class=\"mono svelte-116uhib\">Address book</span>, and <span class=\"mono svelte-116uhib\">Checkout</span> surfaces.</p> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Action</h3> <p class=\"svelte-116uhib\">What the user or system can do: <span class=\"mono svelte-116uhib\">Add to cart</span>, <span class=\"mono svelte-116uhib\">Place order</span>, <span class=\"mono svelte-116uhib\">Search products</span>, <span class=\"mono svelte-116uhib\">Cancel order</span>. An action has parameters,\n          rules, default effects, on-block effects, invariants, required state,\n          emitted events, and scenarios. Example: <span class=\"mono svelte-116uhib\">Checkout -> Place order</span> blocks until <span class=\"mono svelte-116uhib\">checkout.step</span> is <span class=\"mono svelte-116uhib\">review</span>.</p> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">State</h3> <p class=\"svelte-116uhib\">Typed, dot-notation key/value pairs that vary at runtime. Examples: <span class=\"mono svelte-116uhib\">cart.itemCount</span>, <span class=\"mono svelte-116uhib\">user.authenticated</span>, <span class=\"mono svelte-116uhib\">product.stock</span>. Allowed types: string,\n          number, boolean, enum, object, array. State definitions can include\n          descriptions, enum values, typed defaults, and <span class=\"mono svelte-116uhib\">sharedWith</span> links so another surface can see\n          the same path. Example: <span class=\"mono svelte-116uhib\">cart.lineItems</span> is an array of cart rows, and <span class=\"mono svelte-116uhib\">cart.subtotal</span> is stored in cents.</p> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Rule</h3> <p class=\"svelte-116uhib\">A deterministic <em class=\"svelte-116uhib\">IF condition THEN effect</em> pair. Each rule\n          belongs to a category (business, security, permissions, validation,\n          ux_feedback, async, billing_quota, …) which makes the model auditable.\n          Rules at surface level apply to every action on that surface; rules at\n          action level apply only there. The right side of a condition can be a\n          literal, another state path, or an expression JSON AST for param/state\n          arithmetic. Example: <span class=\"mono svelte-116uhib\">Place order</span> has a rule\n          that blocks when <span class=\"mono svelte-116uhib\">checkout.step != \"review\"</span>.</p> `);\n\t\t\t\tCodeBlock($$renderer, {\n\t\t\t\t\tlanguage: \"text\",\n\t\t\t\t\tcode: `IF cart.itemCount == 0\nTHEN block_action \"Your cart is empty\"\n\nIF user.authenticated == false\nTHEN block_action \"Sign in to continue to checkout.\"\n\nIF cart.subtotal > 3499\nTHEN show_message \"You qualify for free shipping.\"`\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!----> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Effect</h3> <p class=\"svelte-116uhib\">The outcome of a rule (when its condition matches) or of an action's\n          success path. The six effect types are:</p> <ul class=\"ml-5 list-disc space-y-1 svelte-116uhib\"><li class=\"svelte-116uhib\"><span class=\"mono svelte-116uhib\">set_state</span>. Write to a state path</li> <li class=\"svelte-116uhib\"><span class=\"mono svelte-116uhib\">show_message</span>. Surface text to the user</li> <li class=\"svelte-116uhib\"><span class=\"mono svelte-116uhib\">emit_event</span>. Emit a product-level signal</li> <li class=\"svelte-116uhib\"><span class=\"mono svelte-116uhib\">block_action</span>. Refuse the action</li> <li class=\"svelte-116uhib\"><span class=\"mono svelte-116uhib\">allow_action</span>. Explicit allow (audit)</li> <li class=\"svelte-116uhib\"><span class=\"mono svelte-116uhib\">transition_surface</span>. Navigate to another\n            surface</li></ul> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Event</h3> <p class=\"svelte-116uhib\">A semantic, product-level signal. Not a UI event. Use lowercase\n          dot-separated names: <span class=\"mono svelte-116uhib\">order.placed</span>, <span class=\"mono svelte-116uhib\">cart.item.added</span>, <span class=\"mono svelte-116uhib\">checkout.address.confirmed</span>. Register events\n          in the top-level <strong class=\"svelte-116uhib\">Events</strong> tab so you can document payload fields, then\n          reference those names from <span class=\"mono svelte-116uhib\">emit_event</span> effects and action <span class=\"mono svelte-116uhib\">emittedEvents</span>.</p> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Invariant</h3> <p class=\"svelte-116uhib\">A condition that must always hold after an action runs. Examples: <span class=\"mono svelte-116uhib\">cart.itemCount >= 0</span>, <span class=\"mono svelte-116uhib\">order.amount > 0</span>. Violations turn a\n          successful run into a blocked one. The simulator surfaces them so you\n          spot inconsistent rules. Example: the cart subtotal must not become\n          negative unless a specific admin action explicitly bypasses that\n          invariant.</p> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Scenario</h3> <p class=\"svelte-116uhib\">A saved simulator case for one action. A scenario can pre-fill state\n          and parameter values, declare whether the run should succeed or block,\n          and assert expected post-run state. Use scenarios to turn examples\n          into regression checks. Example: a saved <span class=\"mono svelte-116uhib\">Place order</span> scenario asserts that <span class=\"mono svelte-116uhib\">order.amount</span> becomes <span class=\"mono svelte-116uhib\">cart.subtotal + cart.shipping</span>.</p>`);\n\t\t\t}\n\t\t\tTutorialSection($$renderer, {\n\t\t\t\tid: \"concepts\",\n\t\t\t\ttitle: \"3. Concept by concept\",\n\t\t\t\tchildren,\n\t\t\t\t$$slots: { default: true }\n\t\t\t});\n\t\t}\n\t\t$$renderer.push(`<!----> `);\n\t\t{\n\t\t\tfunction children($$renderer) {\n\t\t\t\t$$renderer.push(`<p class=\"svelte-116uhib\">The <strong class=\"svelte-116uhib\">eShop</strong> sample is a working e-commerce model you can\n          simulate end-to-end. A buyer signs up, browses, reviews a product, fills\n          a cart, checks out, and watches the order ship. No UI code involved. Every\n          block, every event, every state change is right there in the simulator,\n          in front of you.</p> <p class=\"svelte-116uhib\">It's split into four features so each one stays small enough to hold\n          in head:</p> `);\n\t\t\t\t{\n\t\t\t\t\tfunction children($$renderer) {\n\t\t\t\t\t\t$$renderer.push(`<ol class=\"ml-5 list-decimal space-y-1 svelte-116uhib\"><li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">Account &amp; auth</strong>. Signing up, signing in,\n                verifying an email. Locks out repeated failures, caps\n                verification retries, blocks duplicate accounts.</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">Catalog &amp; reviews</strong>. Searching the catalog,\n                opening a product, posting and filtering reviews. Stops\n                profanity and link spam in reviews, gates age-restricted\n                products to 18+ buyers.</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">Cart &amp; checkout</strong>. Cart updates, coupons,\n                addresses, payment, place order. Refuses empty carts, refuses\n                checkout from unverified accounts, prices the order from the\n                line items, and gives store admins a back-door subtotal\n                override.</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">Order fulfillment</strong>. The post-purchase lifecycle:\n                preparing, shipped, out for delivery, delivered. Cancellation is\n                allowed before shipping. Signature is required on delivery\n                confirmation.</li></ol>`);\n\t\t\t\t\t}\n\t\t\t\t\tCallout($$renderer, {\n\t\t\t\t\t\ttone: \"info\",\n\t\t\t\t\t\ttitle: \"What you get\",\n\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t$$slots: { default: true }\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\t$$renderer.push(`<!----> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Loading the sample</h3> <p class=\"svelte-116uhib\">Click <span class=\"mono svelte-116uhib\">Load sample project</span> on the left. The\n          four features and the project are created, ready to open. They're\n          plain JSON copied from <span class=\"mono svelte-116uhib\">samples/</span> into <span class=\"mono svelte-116uhib\">unspa/</span>, so your edits stay yours.</p> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Three simulator checks</h3> <p class=\"svelte-116uhib\">Open the named feature, select the named surface, pick the action, set\n          the listed values, and click <span class=\"mono svelte-116uhib\">Run action</span>.\n          These are quick checks, not hidden UI interactions.</p> <ol class=\"ml-5 list-decimal space-y-3 svelte-116uhib\"><li class=\"svelte-116uhib\">Open <strong class=\"svelte-116uhib\">Catalog &amp; reviews</strong> -> <strong class=\"svelte-116uhib\">Product details</strong> -> <span class=\"mono svelte-116uhib\">Submit review</span>. In the parameter panel, set <span class=\"mono svelte-116uhib\">rating = 5</span> and run: the simulator records a positive badge. Set <span class=\"mono svelte-116uhib\">rating = 1</span> and run again: it records a critical\n            badge. The decision lives in the model, not in code.</li> <li class=\"svelte-116uhib\">Open <strong class=\"svelte-116uhib\">Cart &amp; checkout</strong> -> <strong class=\"svelte-116uhib\">Cart</strong> -> <span class=\"mono svelte-116uhib\">Recalculate subtotal</span>. Run once and watch <span class=\"mono svelte-116uhib\">cart.subtotal</span> match the sum of <span class=\"mono svelte-116uhib\">cart.lineItems[*].amount</span>. Then edit a line\n            item amount in the state panel and rerun: the total follows the line\n            items, with no glue code in between.</li> <li class=\"svelte-116uhib\">Open <strong class=\"svelte-116uhib\">Cart &amp; checkout</strong> -> <strong class=\"svelte-116uhib\">Checkout</strong> -> <span class=\"mono svelte-116uhib\">Override subtotal (admin)</span>. A regular\n            customer cannot make the subtotal negative; an admin can. The\n            simulator shows exactly which rule lets the admin through, and which\n            check would have blocked anyone else.</li></ol> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Features that talk to each other</h3> <p class=\"svelte-116uhib\">Place an order in <em class=\"svelte-116uhib\">Cart &amp; checkout</em>. The <em class=\"svelte-116uhib\">Order fulfillment</em> feature notices, creates the tracking record, and starts the lifecycle.\n          You don't wire that up. The features just compose, through the events they\n          emit and subscribe to. That's the whole point of splitting into LLM-sized\n          features: each one stays small, and the simulator handles the seams between\n          them.</p> `);\n\t\t\t\tCallout($$renderer, {\n\t\t\t\t\ttone: \"success\",\n\t\t\t\t\ttitle: \"Why this matters\",\n\t\t\t\t\tchildren: ($$renderer) => {\n\t\t\t\t\t\t$$renderer.push(`<!---->You can describe a full e-commerce buying flow, end to end, and have\n          it actually run. Without writing a UI, without writing business logic,\n          without writing tests that lie about what happened. The model itself\n          is the contract. The simulator is the proof.`);\n\t\t\t\t\t},\n\t\t\t\t\t$$slots: { default: true }\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!---->`);\n\t\t\t}\n\t\t\tTutorialSection($$renderer, {\n\t\t\t\tid: \"walkthrough\",\n\t\t\t\ttitle: \"4. Walkthrough: eShop project\",\n\t\t\t\tchildren,\n\t\t\t\t$$slots: { default: true }\n\t\t\t});\n\t\t}\n\t\t$$renderer.push(`<!----> `);\n\t\t{\n\t\t\tfunction children($$renderer) {\n\t\t\t\t$$renderer.push(`<p class=\"svelte-116uhib\">The right-side <strong class=\"svelte-116uhib\">Simulator</strong> panel runs your model deterministically.\n          No AI, no guessing. Just rule evaluation and effect application.</p> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Quick test on the Checkout surface</h3> <ol class=\"ml-5 list-decimal space-y-2 svelte-116uhib\"><li class=\"svelte-116uhib\">Open <strong class=\"svelte-116uhib\">E-commerce. Full customer journey</strong> and select <strong class=\"svelte-116uhib\">7. Checkout</strong>.</li> <li class=\"svelte-116uhib\">Pick the <span class=\"mono svelte-116uhib\">Place order</span> action.</li> <li class=\"svelte-116uhib\">Click <span class=\"mono svelte-116uhib\">Run action</span>. With the default state (<span class=\"mono svelte-116uhib\">checkout.step = \"address\"</span>) you'll see <strong class=\"svelte-116uhib\">blocked</strong> with the reason <em class=\"svelte-116uhib\">\"Complete the previous steps first.\"</em></li> <li class=\"svelte-116uhib\">Change <span class=\"mono svelte-116uhib\">checkout.step</span> to <span class=\"mono svelte-116uhib\">review</span> and set <span class=\"mono svelte-116uhib\">payment.method</span> to <span class=\"mono svelte-116uhib\">card</span>, then run again. The action succeeds,\n            emits <span class=\"mono svelte-116uhib\">order.placed</span>, and proposes a transition to\n            the <strong class=\"svelte-116uhib\">Order tracking</strong> surface.</li> <li class=\"svelte-116uhib\">Try setting <span class=\"mono svelte-116uhib\">order.amount</span> to <span class=\"mono svelte-116uhib\">200000</span> (= $2,000). The compliance rule blocks the order.</li> <li class=\"svelte-116uhib\">Toggle <span class=\"mono svelte-116uhib\">user.emailVerified</span> to <span class=\"mono svelte-116uhib\">false</span>. The surface-level rule blocks every\n            action before they even evaluate. That's cross-cutting at work.</li></ol> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Walking the full journey</h3> <p class=\"svelte-116uhib\">To replay the entire customer flow surface by surface, run these\n          actions in order. Each one with its default state:</p> `);\n\t\t\t\tCodeBlock($$renderer, {\n\t\t\t\t\tlanguage: \"text\",\n\t\t\t\t\tcode: `1. Sign up        → Create account\n   • Toggle form.termsAccepted = true first, otherwise blocked.\n\n2. Email verify   → Verify email (with default state: code matches)\n\n3. Catalog        → Add to cart (twice if you want, stock allows it)\n                  → Go to cart\n\n4. Cart           → Apply coupon (subtotal already > $15)\n                  • Set user.authenticated = true and\n                    user.emailVerified = true\n                  → Proceed to checkout\n\n5. Address book   → Add shipping address\n                  → Continue to checkout\n\n6. Checkout       → Confirm shipping address\n                  → Select payment method\n                  → Place order\n\n7. Order tracking → Mark as shipped (system)\n                  → Mark as out for delivery (carrier)\n                  → Confirm delivery\n                    • Set delivery.signatureCollected = true to clear the gate.`\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!----> `);\n\t\t\t\tCallout($$renderer, {\n\t\t\t\t\ttone: \"success\",\n\t\t\t\t\ttitle: \"What just happened\",\n\t\t\t\t\tchildren: ($$renderer) => {\n\t\t\t\t\t\t$$renderer.push(`<!---->You designed and validated a complete Amazon-like buying feature.\n          Onboarding, security, billing-quota, validation, audit, fraud,\n          fulfillment, signature on delivery. By clicking through one panel. The\n          simulator surfaced every rule that fired, every event that emitted,\n          and every state transition that resulted.`);\n\t\t\t\t\t},\n\t\t\t\t\t$$slots: { default: true }\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!----> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Result anatomy</h3> <p class=\"svelte-116uhib\">Every simulation returns a deterministic record:</p> <ul class=\"ml-5 list-disc space-y-1 svelte-116uhib\"><li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">status</strong>: <span class=\"mono svelte-116uhib\">success</span> | <span class=\"mono svelte-116uhib\">blocked</span> | <span class=\"mono svelte-116uhib\">failed</span></li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">parameterErrors</strong>: failed validation</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">evaluatedRules</strong>: every rule looked at, with origin\n            (surface/action) and whether it matched</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">appliedEffects</strong>: what actually ran</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">messages</strong>: user-visible text</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">emittedEvents</strong>: signals fired</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">previousState</strong> / <strong class=\"svelte-116uhib\">nextState</strong>: full\n            state diff</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">invariantViolations</strong>: anything that must-hold but\n            doesn't</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">transition</strong>: target surface, if the action navigated</li></ul>`);\n\t\t\t}\n\t\t\tTutorialSection($$renderer, {\n\t\t\t\tid: \"simulator\",\n\t\t\t\ttitle: \"5. Running the simulator\",\n\t\t\t\tchildren,\n\t\t\t\t$$slots: { default: true }\n\t\t\t});\n\t\t}\n\t\t$$renderer.push(`<!----> `);\n\t\t{\n\t\t\tfunction children($$renderer) {\n\t\t\t\t$$renderer.push(`<p class=\"svelte-116uhib\">Switch the right panel to the <strong class=\"svelte-116uhib\">Maturity</strong> tab. Unspaghettit\n          scores your model procedurally. No AI involved. By checking that:</p> <ul class=\"ml-5 list-disc space-y-1 svelte-116uhib\"><li class=\"svelte-116uhib\">Every feature has a name and at least one surface.</li> <li class=\"svelte-116uhib\">Every surface has at least one action and some state to react to.</li> <li class=\"svelte-116uhib\">Every action has an intent, an effect or rule, and some emitted\n            events.</li> <li class=\"svelte-116uhib\">Every <strong class=\"svelte-116uhib\">mutating</strong> action has a security/permission/compliance\n            rule.</li> <li class=\"svelte-116uhib\">Every action with parameters has a validation rule.</li></ul> <p class=\"svelte-116uhib\">Issues are split into <span class=\"mono svelte-116uhib\">critical</span> (the model is\n          incomplete) and <span class=\"mono svelte-116uhib\">recommended</span> (worth fixing but not blocking).\n          Use it as a design checklist, not as a grade.</p> `);\n\t\t\t\tCallout($$renderer, {\n\t\t\t\t\ttone: \"info\",\n\t\t\t\t\ttitle: \"Want to see a non-100% score?\",\n\t\t\t\t\tchildren: ($$renderer) => {\n\t\t\t\t\t\t$$renderer.push(`<!---->The bundled eShop project is intentionally complete, so it starts as a\n          clean reference model. To see the maturity checker complain, create a\n          tiny test feature with one empty surface and one action without\n          effects, rules, or scenarios. The score will drop and the panel will\n          list exactly what is missing.`);\n\t\t\t\t\t},\n\t\t\t\t\t$$slots: { default: true }\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!---->`);\n\t\t\t}\n\t\t\tTutorialSection($$renderer, {\n\t\t\t\tid: \"maturity\",\n\t\t\t\ttitle: \"6. Reading the maturity score\",\n\t\t\t\tchildren,\n\t\t\t\t$$slots: { default: true }\n\t\t\t});\n\t\t}\n\t\t$$renderer.push(`<!----> `);\n\t\t{\n\t\t\tfunction children($$renderer) {\n\t\t\t\t$$renderer.push(`<p class=\"svelte-116uhib\">The feature editor is split into top-level tabs and surface-level\n          tabs. Anything the MCP can add or update should have a visible manual\n          editor here too.</p> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Top-level tabs</h3> <ul class=\"ml-5 list-disc space-y-1 svelte-116uhib\"><li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">Build</strong>: surfaces, state, actions, rules, invariants,\n            scenarios.</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">Resources</strong>: databases, APIs, queues, files, storage,\n            compliance metadata.</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">Entities</strong>: domain schemas and field mappings.</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">Events</strong>: event registry plus payload schema fields.</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">Transitions</strong>: declared links between surfaces.</li></ul> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Surface tabs</h3> <p class=\"svelte-116uhib\">Inside <strong class=\"svelte-116uhib\">Build</strong>, select a surface and use the middle\n          panel. The <strong class=\"svelte-116uhib\">State</strong> tab edits typed defaults, descriptions, enum\n          values, and cross-surface sharing. The <strong class=\"svelte-116uhib\">Actions</strong> tab edits\n          parameters, required states, emitted events, rules, success effects, block\n          effects, invariants, and scenarios. Surface rules and invariants live in\n          their own tabs because they apply to every action on the surface.</p> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Advanced values</h3> <p class=\"svelte-116uhib\">Rule condition right-hand sides and <span class=\"mono svelte-116uhib\">set_state</span> effect values have Literal, State, and JSON modes. Use State for state-vs-state\n          comparisons. Use JSON for the full MCP expression AST, such as param references\n          or arithmetic.</p> `);\n\t\t\t\tCodeBlock($$renderer, {\n\t\t\t\t\tlanguage: \"json\",\n\t\t\t\t\tcode: `{\n  \"kind\": \"add\",\n  \"left\": { \"kind\": \"state\", \"path\": \"cart.itemCount\" },\n  \"right\": { \"kind\": \"literal\", \"value\": 1 }\n}`\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!----> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Tagging projects and features</h3> <p class=\"svelte-116uhib\">Every project card and feature card has a <span class=\"mono svelte-116uhib\">+ Tag</span> chip that appears on hover. A tag is a <span class=\"mono svelte-116uhib\">{type, value}</span> pair: <span class=\"mono svelte-116uhib\">Team: Growth</span>, <span class=\"mono svelte-116uhib\">Domain: Commerce</span>, <span class=\"mono svelte-116uhib\">Status: WIP</span>. Tags don't change behavior;\n          they're cross-cutting metadata that lets you filter the list along\n          axes the Project → Feature hierarchy doesn't capture.</p> <p class=\"svelte-116uhib\">Click <span class=\"mono svelte-116uhib\">+ Tag</span>, pick or type a type (existing\n          types auto-suggest), enter a value, and confirm. The pill row above\n          the project list filters by tag. Tags dedupe case-insensitively, so\n          re-adding the same tag is a safe no-op.</p> `);\n\t\t\t\tCallout($$renderer, {\n\t\t\t\t\ttone: \"info\",\n\t\t\t\t\ttitle: \"Dashboard-MCP parity\",\n\t\t\t\t\tchildren: ($$renderer) => {\n\t\t\t\t\t\t$$renderer.push(`<!---->Anything the dashboard can do, the MCP can do too, with the same\n          atomicity. Adding a tag from a card calls the same path as <span class=\"mono svelte-116uhib\">add_project_tag</span> / <span class=\"mono svelte-116uhib\">add_feature_tag</span>. If you load a spec made by\n          an agent, you should be able to find every entity in the app:\n          resources, entities, events, payloads, shared state, scenarios,\n          transitions, rules, effects, invariants, parameters, required states,\n          emitted events, and tags.`);\n\t\t\t\t\t},\n\t\t\t\t\t$$slots: { default: true }\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!---->`);\n\t\t\t}\n\t\t\tTutorialSection($$renderer, {\n\t\t\t\tid: \"editor\",\n\t\t\t\ttitle: \"7. Editing in the app\",\n\t\t\t\tchildren,\n\t\t\t\t$$slots: { default: true }\n\t\t\t});\n\t\t}\n\t\t$$renderer.push(`<!----> `);\n\t\t{\n\t\t\tfunction children($$renderer) {\n\t\t\t\t$$renderer.push(`<p class=\"svelte-116uhib\">Try modeling a small CLI or workflow next. <strong class=\"svelte-116uhib\">Pick one slice</strong>, not a whole product. \"Authenticate a CLI\", \"Approve a refund\",\n          \"Schedule a backup\". If your description sounds like a whole app,\n          split it first and pick the one slice you want to model now. A\n          reliable recipe:</p> <ol class=\"ml-5 list-decimal space-y-2 svelte-116uhib\"><li class=\"svelte-116uhib\">Write a one-line description of the feature. Avoid UI words\n            (\"dashboard\", \"form\"). Use behavior words (\"manage subscriptions\",\n            \"approve refunds\").</li> <li class=\"svelte-116uhib\">List the <strong class=\"svelte-116uhib\">actions</strong> the user/system can perform. Each action\n            is a verb in user vocabulary.</li> <li class=\"svelte-116uhib\">Group actions into <strong class=\"svelte-116uhib\">surfaces</strong>. A surface is wherever\n            those actions live in context. Not necessarily a screen.</li> <li class=\"svelte-116uhib\">For each surface, list the <strong class=\"svelte-116uhib\">state</strong> it depends on. State\n            is anything that could change the outcome. Share state across surfaces\n            when the same path is meaningful in both places.</li> <li class=\"svelte-116uhib\">For each action, write the <strong class=\"svelte-116uhib\">rules</strong> that block it. Use\n            real categories. They make the model auditable.</li> <li class=\"svelte-116uhib\">Add <strong class=\"svelte-116uhib\">default effects</strong> describing the success path: state\n            changes, messages, events, transitions.</li> <li class=\"svelte-116uhib\">Register <strong class=\"svelte-116uhib\">events</strong> and payload schemas, then declare which\n            events each action emits.</li> <li class=\"svelte-116uhib\">Add <strong class=\"svelte-116uhib\">invariants</strong> for things that must always be true after\n            the action runs.</li> <li class=\"svelte-116uhib\">Add <strong class=\"svelte-116uhib\">scenarios</strong> for the happy path and important blocked\n            paths.</li> <li class=\"svelte-116uhib\">Run the simulator. Iterate until both edge cases and the happy path\n            behave.</li></ol> `);\n\t\t\t\t{\n\t\t\t\t\tfunction children($$renderer) {\n\t\t\t\t\t\t$$renderer.push(`<ul class=\"ml-4 list-disc space-y-1 svelte-116uhib\"><li class=\"svelte-116uhib\">Describing UI (\"the button changes color\") instead of behavior\n                (\"the <span class=\"mono svelte-116uhib\">order.placed</span> event fires\").</li> <li class=\"svelte-116uhib\">Putting validation logic inside default effects. Use a <span class=\"mono svelte-116uhib\">validation</span> rule so the failure path is explicit and named.</li> <li class=\"svelte-116uhib\">Inventing event names per action. Pick a small dictionary (5–20\n                events) that other surfaces can react to.</li></ul>`);\n\t\t\t\t\t}\n\t\t\t\t\tCallout($$renderer, {\n\t\t\t\t\t\ttone: \"warning\",\n\t\t\t\t\t\ttitle: \"Common mistakes\",\n\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t$$slots: { default: true }\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\t$$renderer.push(`<!---->`);\n\t\t\t}\n\t\t\tTutorialSection($$renderer, {\n\t\t\t\tid: \"build\",\n\t\t\t\ttitle: \"8. Build your own feature\",\n\t\t\t\tchildren,\n\t\t\t\t$$slots: { default: true }\n\t\t\t});\n\t\t}\n\t\t$$renderer.push(`<!----> `);\n\t\t{\n\t\t\tfunction children($$renderer) {\n\t\t\t\t$$renderer.push(`<p class=\"svelte-116uhib\">The <strong class=\"svelte-116uhib\">Implementation Queue</strong> rides along in a floating panel\n          pinned to the bottom-right corner, visible from every page — an ordered\n          \"implement next\" list of Features, Surfaces, or Actions you (or the LLM)\n          plan to build. The point: a dev can say \"implement the next thing in the\n          queue\" and the LLM picks it up via the MCP without you naming the entity.</p> <ul class=\"list-disc space-y-1 pl-5 svelte-116uhib\"><li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">Add to queue</strong> hover affordance appears on every Feature\n            card, every Surface header, and every Action row when the cursor is over\n            them. This keeps the design minimal first.</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">Drag to reorder</strong> in the corner panel. Order persists to\n            disk via the project file.</li> <li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">Auto-prune</strong>: items disappear from the live list as <span class=\"mono svelte-116uhib\">.unspa.json</span> flips their behavioral-index entry to <span class=\"mono svelte-116uhib\">implemented</span>. The raw queue stays on disk;\n            only the live view filters.</li></ul> `);\n\t\t\t\t{\n\t\t\t\t\tfunction children($$renderer) {\n\t\t\t\t\t\t$$renderer.push(`<ul class=\"list-disc space-y-1 pl-5 svelte-116uhib\"><li class=\"svelte-116uhib\"><span class=\"mono svelte-116uhib\">enqueue</span>: add a feature/surface/action.</li> <li class=\"svelte-116uhib\"><span class=\"mono svelte-116uhib\">dequeue</span>: remove by queue item id.</li> <li class=\"svelte-116uhib\"><span class=\"mono svelte-116uhib\">reorder_queue</span>: drag-and-drop equivalent.</li> <li class=\"svelte-116uhib\"><span class=\"mono svelte-116uhib\">list_queue</span>: full live list with done-state.</li> <li class=\"svelte-116uhib\"><span class=\"mono svelte-116uhib\">get_next_queued</span>: peek the next live item\n                (drives \"implement next\").</li> <li class=\"svelte-116uhib\"><span class=\"mono svelte-116uhib\">set_queue_target</span>: pin a per-item goal —\n                how far to take it (maturity %, implementation %, and/or \"report\n                it's in the code\"). Returned on <span class=\"mono svelte-116uhib\">list_queue</span> / <span class=\"mono svelte-116uhib\">get_next_queued</span> as a plain-language\n                goal line.</li></ul>`);\n\t\t\t\t\t}\n\t\t\t\t\tCallout($$renderer, {\n\t\t\t\t\t\ttone: \"info\",\n\t\t\t\t\t\ttitle: \"MCP tools\",\n\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t$$slots: { default: true }\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\t$$renderer.push(`<!---->`);\n\t\t\t}\n\t\t\tTutorialSection($$renderer, {\n\t\t\t\tid: \"queue\",\n\t\t\t\ttitle: \"9. Implementation queue\",\n\t\t\t\tchildren,\n\t\t\t\t$$slots: { default: true }\n\t\t\t});\n\t\t}\n\t\t$$renderer.push(`<!----> `);\n\t\t{\n\t\t\tfunction children($$renderer) {\n\t\t\t\t$$renderer.push(`<p class=\"svelte-116uhib\">The project page header has an <strong class=\"svelte-116uhib\">Export .unspa</strong> button. It\n          bundles the project + every attached feature + every implementation-status\n          sidecar into a single encrypted file:</p> <ul class=\"list-disc space-y-1 pl-5 svelte-116uhib\"><li class=\"svelte-116uhib\"><strong class=\"svelte-116uhib\">AES-GCM-256</strong> with a key derived from a passphrase\n            via <strong class=\"svelte-116uhib\">PBKDF2-SHA256, 600 000 iterations</strong> (OWASP 2023 minimum).</li> <li class=\"svelte-116uhib\">The passphrase <strong class=\"svelte-116uhib\">never leaves the browser</strong>.</li> <li class=\"svelte-116uhib\">The envelope carries <strong class=\"svelte-116uhib\">no identifier of contents</strong>: no\n            project name, no metadata. A third party holding the file learns only\n            that it's an Unspaghettit bundle.</li> <li class=\"svelte-116uhib\">Wrong passphrase + tampered ciphertext both fail at AES-GCM's\n            auth-tag check and never decrypt to garbage.</li></ul> <p class=\"svelte-116uhib\">Restore via the <strong class=\"svelte-116uhib\">Import .unspa</strong> button on the projects index.\n          Useful for transferring a project between machines, archiving a milestone,\n          or sharing with a teammate over an insecure channel.</p> `);\n\t\t\t\t{\n\t\t\t\t\tfunction children($$renderer) {\n\t\t\t\t\t\t$$renderer.push(`<p class=\"svelte-116uhib\">A 12-character random passphrase is well outside brute-force range\n              at 600k iterations. A 6-character dictionary word is not. Pick\n              accordingly.</p>`);\n\t\t\t\t\t}\n\t\t\t\t\tCallout($$renderer, {\n\t\t\t\t\t\ttone: \"warning\",\n\t\t\t\t\t\ttitle: \"Passphrase strength is on you\",\n\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t$$slots: { default: true }\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\t$$renderer.push(`<!---->`);\n\t\t\t}\n\t\t\tTutorialSection($$renderer, {\n\t\t\t\tid: \"backup\",\n\t\t\t\ttitle: \"10. Backup & share with .unspa\",\n\t\t\t\tchildren,\n\t\t\t\t$$slots: { default: true }\n\t\t\t});\n\t\t}\n\t\t$$renderer.push(`<!----> `);\n\t\t{\n\t\t\tfunction children($$renderer) {\n\t\t\t\t$$renderer.push(`<p class=\"svelte-116uhib\">Unspaghettit also ships a local MCP server so agents can inspect and\n          simulate your behavior models without scraping the UI. It runs over <span class=\"mono svelte-116uhib\">stdio</span>, which means each client starts it as a local child process.</p> `);\n\t\t\t\t{\n\t\t\t\t\tfunction children($$renderer) {\n\t\t\t\t\t\t$$renderer.push(`<!---->The server exposes read, write, validation, simulation, maturity,\n            scenario, implementation-audit, resource, entity, event, transition,\n            persona, state, surface, action, rule, effect, and invariant tools.\n            Use focused reads like <span class=\"mono svelte-116uhib\">get_action</span>, bulk edits through <span class=\"mono svelte-116uhib\">apply_batch</span>, dry validation with <span class=\"mono svelte-116uhib\">apply_batch dryRun:true</span>, behavior checks\n            with <span class=\"mono svelte-116uhib\">dry_run_simulate</span> and <span class=\"mono svelte-116uhib\">run_all_scenarios</span>, and quality checks with <span class=\"mono svelte-116uhib\">score_feature</span>. Diagnostics go to stderr so\n            stdout stays reserved for the MCP JSON-RPC stream.`);\n\t\t\t\t\t}\n\t\t\t\t\tCallout($$renderer, {\n\t\t\t\t\t\ttone: \"info\",\n\t\t\t\t\t\ttitle: \"What the server exposes\",\n\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t$$slots: { default: true }\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\t$$renderer.push(`<!----> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Prerequisites</h3> <ol class=\"ml-5 list-decimal space-y-2 svelte-116uhib\"><li class=\"svelte-116uhib\">Install dependencies once with <span class=\"mono svelte-116uhib\">npm install</span>.</li> <li class=\"svelte-116uhib\">Keep exported snapshots in the repo's <span class=\"mono svelte-116uhib\">unspa/</span> folder. The MCP server discovers this folder automatically when it\n            starts from the project root.</li> <li class=\"svelte-116uhib\">Smoke test the server from the repo root with <span class=\"mono svelte-116uhib\">npm run mcp</span>. It should print a <span class=\"mono svelte-116uhib\">[unspa-mcp] snapshots:</span> line and then wait for\n            an MCP client.</li></ol> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Agent authoring workflow</h3> <ol class=\"ml-5 list-decimal space-y-2 svelte-116uhib\"><li class=\"svelte-116uhib\">Read narrowly first: <span class=\"mono svelte-116uhib\">get_feature</span> for the\n            index, then <span class=\"mono svelte-116uhib\">get_action</span> for the area you are\n            changing.</li> <li class=\"svelte-116uhib\">Draft multi-entity edits with <span class=\"mono svelte-116uhib\">apply_batch</span>.\n            Batch-created refs work across surfaces, transitions, effects, and <span class=\"mono svelte-116uhib\">sharedWith</span>.</li> <li class=\"svelte-116uhib\">Run <span class=\"mono svelte-116uhib\">apply_batch</span> with <span class=\"mono svelte-116uhib\">dryRun:true</span> before saving risky edits.</li> <li class=\"svelte-116uhib\">Run <span class=\"mono svelte-116uhib\">dry_run_simulate</span> for one action or <span class=\"mono svelte-116uhib\">run_all_scenarios</span> for saved examples.</li> <li class=\"svelte-116uhib\">Run <span class=\"mono svelte-116uhib\">score_feature</span>, then open the app and\n            verify the generated spec is manually editable.</li> <li class=\"svelte-116uhib\">Tag projects and features the same way the dashboard would: <span class=\"mono svelte-116uhib\">add_project_tag</span> / <span class=\"mono svelte-116uhib\">remove_project_tag</span> for projects, <span class=\"mono svelte-116uhib\">add_feature_tag</span> / <span class=\"mono svelte-116uhib\">remove_feature_tag</span> for features. Each is\n            atomic and idempotent. For bulk replacement, pass <span class=\"mono svelte-116uhib\">tags: [...]</span> to <span class=\"mono svelte-116uhib\">create_project</span> / <span class=\"mono svelte-116uhib\">update_project</span> / <span class=\"mono svelte-116uhib\">create_feature</span> / <span class=\"mono svelte-116uhib\">update_feature</span>.</li></ol> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">VS Code / GitHub Copilot</h3> <p class=\"svelte-116uhib\">Create <span class=\"mono svelte-116uhib\">.vscode/mcp.json</span> in this repo, or\n          open it if it already exists. VS Code reads this MCP config file and\n          lets Copilot Agent mode start the server. The MCP servers live under\n          the top-level <span class=\"mono svelte-116uhib\">servers</span> key.</p> `);\n\t\t\t\tCodeBlock($$renderer, {\n\t\t\t\t\tlanguage: \"json\",\n\t\t\t\t\tcode: `{\n  \"servers\": {\n    \"unspa\": {\n      \"command\": \"npm.cmd\",\n      \"args\": [\"run\", \"mcp\"],\n      \"cwd\": \"\\${workspaceFolder}\"\n    }\n  }\n}`\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!----> <p class=\"svelte-116uhib\">Then run <span class=\"mono svelte-116uhib\">MCP: List Servers</span> from the Command\n          Palette, select <span class=\"mono svelte-116uhib\">unspa</span>, start it, and trust the local MCP\n          server when prompted.</p> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Codex</h3> <p class=\"svelte-116uhib\">Codex stores MCP servers in <span class=\"mono svelte-116uhib\">~/.codex/config.toml</span>. Open the file, keep any existing model or project settings, and add\n          this block at the end. Adapt the path if your checkout lives somewhere\n          else.</p> `);\n\t\t\t\tCodeBlock($$renderer, {\n\t\t\t\t\tlanguage: \"toml\",\n\t\t\t\t\tcode: `[mcp_servers.unspa]\ncommand = \"npm.cmd\"\nargs = [\"run\", \"mcp\"]\ncwd = \"<your-unspaghettit-clone>\"\nenabled = true\nstartup_timeout_sec = 30\ntool_timeout_sec = 120`\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!----> <p class=\"svelte-116uhib\">Restart Codex, then run <span class=\"mono svelte-116uhib\">/mcp</span> or <span class=\"mono svelte-116uhib\">codex mcp list</span> to confirm that <span class=\"mono svelte-116uhib\">unspa</span> is available.</p> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Claude Desktop</h3> <p class=\"svelte-116uhib\">In Claude Desktop, open <span class=\"mono svelte-116uhib\">Settings -> Developer -> Edit Config</span>. On Windows this edits <span class=\"mono svelte-116uhib\">%APPDATA%\\\\Claude\\\\claude_desktop_config.json</span> or, for the Microsoft Store build, a path under <span class=\"mono svelte-116uhib\">AppData\\\\Local\\\\Packages\\\\Claude_...\\\\LocalCache\\\\Roaming\\\\Claude</span>. If the file already contains <span class=\"mono svelte-116uhib\">preferences</span>,\n          do not replace it. Add <span class=\"mono svelte-116uhib\">mcpServers</span> as another\n          top-level key next to <span class=\"mono svelte-116uhib\">preferences</span>, then fully restart Claude\n          Desktop.</p> `);\n\t\t\t\t{\n\t\t\t\t\tfunction children($$renderer) {\n\t\t\t\t\t\t$$renderer.push(`<!---->The normal Claude Desktop chat reads <span class=\"mono svelte-116uhib\">mcpServers</span> from <span class=\"mono svelte-116uhib\">claude_desktop_config.json</span>. Claude\n            Desktop's local coding agent can also use Claude Code-style project\n            config, so this repo includes a root-level <span class=\"mono svelte-116uhib\">.mcp.json</span>. If Claude answers by searching\n            the MCP registry instead of calling <span class=\"mono svelte-116uhib\">unspa</span>,\n            the local server was not loaded in that session.`);\n\t\t\t\t\t}\n\t\t\t\t\tCallout($$renderer, {\n\t\t\t\t\t\ttone: \"warning\",\n\t\t\t\t\t\ttitle: \"Claude Desktop chat vs local agent mode\",\n\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t$$slots: { default: true }\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\t$$renderer.push(`<!----> `);\n\t\t\t\tCodeBlock($$renderer, {\n\t\t\t\t\tlanguage: \"json\",\n\t\t\t\t\tcode: `{\n  \"preferences\": {\n    \"localAgentModeTrustedFolders\": [\n      \"<your-unspaghettit-clone>\"\n    ],\n    \"...\": \"keep your existing Claude settings here\"\n  },\n  \"mcpServers\": {\n    \"unspa\": {\n      \"type\": \"stdio\",\n      \"command\": \"cmd\",\n      \"args\": [\"/c\", \"npm.cmd\", \"run\", \"mcp\"],\n      \"cwd\": \"<your-unspaghettit-clone>\"\n    }\n  }\n}`\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!----> <p class=\"svelte-116uhib\">For example, if your file currently starts with only <span class=\"mono svelte-116uhib\">\"preferences\"</span>, the result should look like\n          this shape:</p> `);\n\t\t\t\tCodeBlock($$renderer, {\n\t\t\t\t\tlanguage: \"json\",\n\t\t\t\t\tcode: `{\n  \"preferences\": {\n    \"localAgentModeTrustedFolders\": [\n      \"C:\\\\\\\\path\\\\\\\\to\\\\\\\\your\\\\\\\\project\"\n    ],\n    \"coworkScheduledTasksEnabled\": true,\n    \"ccdScheduledTasksEnabled\": true,\n    \"sidebarMode\": \"task\",\n    \"coworkWebSearchEnabled\": true,\n    \"epitaxyPrefs\": {\n      \"starred-local-code-sessions\": [],\n      \"starred-cowork-spaces\": [],\n      \"starred-session-groups\": [],\n      \"dframe-local-slice\": {\n        \"pinnedOrder\": [],\n        \"customGroupAssignments\": {},\n        \"customGroupOrder\": {}\n      }\n    }\n  },\n  \"mcpServers\": {\n    \"unspa\": {\n      \"type\": \"stdio\",\n      \"command\": \"cmd\",\n      \"args\": [\"/c\", \"npm.cmd\", \"run\", \"mcp\"],\n      \"cwd\": \"<your-unspaghettit-clone>\"\n    }\n  }\n}`\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!----> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Claude Code</h3> <p class=\"svelte-116uhib\">Claude Code is configured separately from Claude Desktop. For\n          team-friendly setup, commit a <span class=\"mono svelte-116uhib\">.mcp.json</span> file\n          at the project root:</p> `);\n\t\t\t\tCodeBlock($$renderer, {\n\t\t\t\t\tlanguage: \"json\",\n\t\t\t\t\tcode: `{\n  \"mcpServers\": {\n    \"unspa\": {\n      \"type\": \"stdio\",\n      \"command\": \"cmd\",\n      \"args\": [\"/c\", \"npm.cmd\", \"run\", \"mcp\"],\n      \"env\": {}\n    }\n  }\n}`\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!----> <p class=\"svelte-116uhib\">When Claude Code or Claude Desktop local agent mode opens this\n          project, approve the project MCP server if prompted. If you prefer a\n          private user-level install instead, run this from any terminal:</p> `);\n\t\t\t\tCodeBlock($$renderer, {\n\t\t\t\t\tlanguage: \"powershell\",\n\t\t\t\t\tcode: `claude mcp add-json unspa '{ \"type\": \"stdio\", \"command\": \"cmd\", \"args\": [\"/c\", \"npm.cmd\", \"run\", \"mcp\"], \"cwd\": \"<your-unspaghettit-clone>\" }'\nclaude mcp list`\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!----> `);\n\t\t\t\t{\n\t\t\t\t\tfunction children($$renderer) {\n\t\t\t\t\t\t$$renderer.push(`<!---->If Claude Code is already running in your repo, you can ask it to do\n            the setup for you: `);\n\t\t\t\t\t\tCodeBlock($$renderer, {\n\t\t\t\t\t\t\tlanguage: \"text\",\n\t\t\t\t\t\t\tcode: `Install Unspaghettit in this repo. Run unspa init, register the MCP server for Claude Code, keep the generated CLAUDE.md/AGENTS.md guidance, then verify the unspa MCP tools are available.`\n\t\t\t\t\t\t});\n\t\t\t\t\t\t$$renderer.push(`<!----> After it finishes, restart Claude Code if the MCP server list does not\n            refresh automatically.`);\n\t\t\t\t\t}\n\t\t\t\t\tCallout($$renderer, {\n\t\t\t\t\t\ttone: \"info\",\n\t\t\t\t\t\ttitle: \"Fast path with Claude Code\",\n\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t$$slots: { default: true }\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\t$$renderer.push(`<!----> <h3 class=\"font-semibold text-neutral-900 svelte-116uhib\">Generic MCP clients</h3> <p class=\"svelte-116uhib\">Any stdio-compatible MCP client needs the same launcher: command <span class=\"mono svelte-116uhib\">npm.cmd</span>, args <span class=\"mono svelte-116uhib\">[\"run\", \"mcp\"]</span>, and working directory set to\n          the repo root. If a client does not support <span class=\"mono svelte-116uhib\">cwd</span>, launch it from this directory or pass\n          an explicit snapshots folder:</p> `);\n\t\t\t\tCodeBlock($$renderer, {\n\t\t\t\t\tlanguage: \"json\",\n\t\t\t\t\tcode: `{\n  \"command\": \"npm.cmd\",\n  \"args\": [\n    \"run\",\n    \"mcp\",\n    \"--\",\n    \"--snapshots\",\n    \"<your-unspaghettit-clone>/unspa\"\n  ]\n}`\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!---->`);\n\t\t\t}\n\t\t\tTutorialSection($$renderer, {\n\t\t\t\tid: \"mcp\",\n\t\t\t\ttitle: \"11. Connect AI agents with MCP\",\n\t\t\t\tchildren,\n\t\t\t\t$$slots: { default: true }\n\t\t\t});\n\t\t}\n\t\t$$renderer.push(`<!----> `);\n\t\t{\n\t\t\tfunction children($$renderer) {\n\t\t\t\t$$renderer.push(`<p class=\"svelte-116uhib\">Multiple humans + AI agents can edit the same runtime live. The\n          dashboard's Yjs WebSocket layer makes every change land in every open\n          tab without a refresh, and an activity toast carries the breadcrumb (<span class=\"mono svelte-116uhib\">Project › Feature › Surface › Action</span>) + a <strong class=\"svelte-116uhib\">View</strong> button to jump there.</p> <p class=\"svelte-116uhib\">Click the round avatar in the header to set your <strong class=\"svelte-116uhib\">display name</strong>. Every history entry you create is tagged with it and stored only in\n          this browser's localStorage, never sent off-machine. First visit\n          prompts once; the avatar dropdown is the explicit way to change or\n          reset later.</p> <p class=\"svelte-116uhib\">MCP-driven changes carry an <strong class=\"svelte-116uhib\">AI · for &lt;your-name></strong> label: the AI badge stays purple (clear AI/human distinction), and the\n          human name is the supporting attribution. The dashboard server resolves\n          \"who's currently here\" from the connected WebSocket clients and tags entries\n          accordingly.</p> `);\n\t\t\t\t{\n\t\t\t\t\tfunction children($$renderer) {\n\t\t\t\t\t\t$$renderer.push(`<!---->The avatar dropdown also exposes a <strong class=\"svelte-116uhib\">Reset local data</strong> option (red, with a danger confirm). It wipes <span class=\"mono svelte-116uhib\">localStorage</span> + <span class=\"mono svelte-116uhib\">sessionStorage</span> and reloads. Server-side project\n            data is untouched.`);\n\t\t\t\t\t}\n\t\t\t\t\tCallout($$renderer, {\n\t\t\t\t\t\ttone: \"info\",\n\t\t\t\t\t\ttitle: \"Reset local data\",\n\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t$$slots: { default: true }\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\t$$renderer.push(`<!---->`);\n\t\t\t}\n\t\t\tTutorialSection($$renderer, {\n\t\t\t\tid: \"collab\",\n\t\t\t\ttitle: \"12. Multi-user & identity\",\n\t\t\t\tchildren,\n\t\t\t\t$$slots: { default: true }\n\t\t\t});\n\t\t}\n\t\t$$renderer.push(`<!----> `);\n\t\t{\n\t\t\tfunction children($$renderer) {\n\t\t\t\t$$renderer.push(`<p class=\"svelte-116uhib\">Default install is <strong class=\"svelte-116uhib\">loopback-only</strong> with no auth. The\n          dashboard binds <span class=\"mono svelte-116uhib\">127.0.0.1:3000</span> and only your\n          machine can reach it. That's the right stance for solo dev on a trusted\n          workstation; the user is the trust boundary.</p> <p class=\"svelte-116uhib\">To <strong class=\"svelte-116uhib\">share with teammates on a trusted network</strong> (home wifi,\n          office VLAN, Tailscale subnet), opt into the LAN-share tier:</p> `);\n\t\t\t\tCodeBlock($$renderer, {\n\t\t\t\t\tlanguage: \"bash\",\n\t\t\t\t\tcode: `# Generate a strong token (any random string works):\nTOKEN=$(node -e \"console.log(crypto.randomBytes(24).toString('base64url'))\")\n\n# Set on both the dashboard env AND every MCP server that talks to it:\nexport UNSPA_AUTH_TOKEN=$TOKEN\n# Optional but recommended: lock cross-site browser requests\nexport UNSPA_ALLOWED_ORIGIN=http://192.168.1.10:3000\n\nunspa dashboard --host 0.0.0.0`\n\t\t\t\t});\n\t\t\t\t$$renderer.push(`<!----> <p class=\"svelte-116uhib\">What it covers: anyone who knows the token can read/write every\n          feature; anyone who doesn't gets <span class=\"mono svelte-116uhib\">401</span>. A\n          malicious page in another browser tab can't drive writes against the\n          dashboard (origin check).</p> <p class=\"svelte-116uhib\">What it does <strong class=\"svelte-116uhib\">not</strong> cover: SSO, RBAC, per-user permissions,\n          HTTPS termination, audit-trail hardening, encryption at rest. Front the\n          dashboard with a reverse proxy (Caddy, Tailscale Serve, cloudflared with\n          Access) for HTTPS + extra auth layers.</p> `);\n\t\t\t\t{\n\t\t\t\t\tfunction children($$renderer) {\n\t\t\t\t\t\t$$renderer.push(`<!---->The OSS install is built for trusted networks. Public exposure\n            requires the enterprise tier (SSO + RBAC + audit, separately\n            distributed).`);\n\t\t\t\t\t}\n\t\t\t\t\tCallout($$renderer, {\n\t\t\t\t\t\ttone: \"warning\",\n\t\t\t\t\t\ttitle: \"Do not expose 0.0.0.0:3000 to the public internet\",\n\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t$$slots: { default: true }\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\t$$renderer.push(`<!----> <p class=\"text-sm text-slate-600 svelte-116uhib\">Full threat model + mitigations in <a href=\"https://github.com/lyriks-io/unspaghettit/blob/main/SECURITY.md\" class=\"text-brand-700 hover:underline svelte-116uhib\">SECURITY.md</a>.</p>`);\n\t\t\t}\n\t\t\tTutorialSection($$renderer, {\n\t\t\t\tid: \"security\",\n\t\t\t\ttitle: \"13. Hosting on a network\",\n\t\t\t\tchildren,\n\t\t\t\t$$slots: { default: true }\n\t\t\t});\n\t\t}\n\t\t$$renderer.push(`<!----> `);\n\t\t{\n\t\t\tfunction children($$renderer) {\n\t\t\t\t$$renderer.push(`<ul class=\"ml-5 list-disc space-y-1 svelte-116uhib\"><li class=\"svelte-116uhib\">Open the <a href=\"/features\" class=\"text-brand-700 underline svelte-116uhib\">features list</a> and remix the e-commerce sample. Try modeling a returns/refunds surface.</li> <li class=\"svelte-116uhib\">Try modeling a non-UI product: a CLI for project scaffolding, an LLM\n            agent that handles support tickets, or an internal approval\n            workflow.</li> <li class=\"svelte-116uhib\">Watch the <strong class=\"svelte-116uhib\">Maturity</strong> panel turn green as you tighten the\n            model. The score is a direct readout of how much of the behavior you've\n            explicitly named.</li></ul> `);\n\t\t\t\t{\n\t\t\t\t\tfunction children($$renderer) {\n\t\t\t\t\t\t$$renderer.push(`<!---->Unspaghettit is free and stays local-first. The roadmap tracks the\n            app's own behavior: deeper simulator coverage, sharper maturity\n            checks, more MCP tools, smoother authoring. If something blocks how\n            you model your product, open an issue. What ships next is shaped by\n            what the community runs into.`);\n\t\t\t\t\t}\n\t\t\t\t\tCallout($$renderer, {\n\t\t\t\t\t\ttone: \"info\",\n\t\t\t\t\t\ttitle: \"Where this goes next\",\n\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t$$slots: { default: true }\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\t$$renderer.push(`<!---->`);\n\t\t\t}\n\t\t\tTutorialSection($$renderer, {\n\t\t\t\tid: \"next\",\n\t\t\t\ttitle: \"14. Where to go next\",\n\t\t\t\tchildren,\n\t\t\t\t$$slots: { default: true }\n\t\t\t});\n\t\t}\n\t\t$$renderer.push(`<!----></article></div>`);\n\t});\n}\n//#endregion\nexport { _page as default };\n"],"names":[],"mappings":"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"}