@vibesdotdev/applets 0.0.0-stage → 1.0.0-rc.2

package/dist/vite.js

@@ -0,0 +1,28 @@
+import { getRuntimePath } from '@vibesdotdev/paths';
+import { APPLET_PROJECT_ROOT } from "./local-project.js";
+/** Normal Vite aliases; the kernel supplies the consumer's actual workspace. */
+export async function createAppletViteConfig(runtime, options) {
+    const paths = await getRuntimePath(runtime);
+    const workspace = await runtime.context('runtime/workspace-path');
+    const projects = paths.join(workspace, APPLET_PROJECT_ROOT);
+    const stylesheets = new Set();
+    return {
+        resolve: { alias: { $applets: projects } },
+        define: { __VIBES_APPLET_WORKSPACE_ROOT__: JSON.stringify(workspace) },
+        plugins: [{
+                name: 'vibes:applet-tailwind-sources',
+                enforce: 'pre',
+                configResolved(config) {
+                    for (const file of options.stylesheets)
+                        stylesheets.add(paths.resolve(config.root, file));
+                },
+                transform: {
+                    order: 'pre',
+                    handler(source, id) {
+                        return stylesheets.has(id.split('?')[0]) ? `${source}\n@source ${JSON.stringify(projects)};\n` : null;
+                    }
+                }
+            }]
+    };
+}
+//# sourceMappingURL=vite.js.map

package/dist/vite.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite.js","sourceRoot":"","sources":["../src/vite.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAEzD,gFAAgF;AAChF,MAAM,CAAC,KAAK,UAAU,sBAAsB,CAAC,OAAqB,EAAE,OAA2C;IAC9G,MAAM,KAAK,GAAG,MAAM,cAAc,CAAC,OAAO,CAAC,CAAC;IAC5C,MAAM,SAAS,GAAG,MAAM,OAAO,CAAC,OAAO,CAAS,wBAAwB,CAAC,CAAC;IAC1E,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE,mBAAmB,CAAC,CAAC;IAC5D,MAAM,WAAW,GAAG,IAAI,GAAG,EAAU,CAAC;IACtC,OAAO;QACN,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE;QAC1C,MAAM,EAAE,EAAE,+BAA+B,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,EAAE;QACtE,OAAO,EAAE,CAAC;gBACT,IAAI,EAAE,+BAA+B;gBACrC,OAAO,EAAE,KAAc;gBACvB,cAAc,CAAC,MAAwB;oBACtC,KAAK,MAAM,IAAI,IAAI,OAAO,CAAC,WAAW;wBAAE,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;gBAC3F,CAAC;gBACD,SAAS,EAAE;oBACV,KAAK,EAAE,KAAc;oBACrB,OAAO,CAAC,MAAc,EAAE,EAAU;wBACjC,OAAO,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAE,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,aAAa,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;oBACxG,CAAC;iBACD;aACD,CAAC;KACF,CAAC;AACH,CAAC"}

package/package.json

@@ -1,6 +1,266 @@
 {
   "name": "@vibesdotdev/applets",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0-rc.2",
+  "dependencies": {
+    "@vibesdotdev/auth": "^1.0.0-rc.2",
+    "@vibesdotdev/filesystem": "^1.0.0-rc.2",
+    "@vibesdotdev/infra-core": "^1.0.0-rc.3",
+    "@vibesdotdev/logging": "^1.0.0-rc.3",
+    "@vibesdotdev/shared": "^1.0.0-rc.4",
+    "@vibesdotdev/docs-contracts": "^1.0.0-rc.4",
+    "@vibesdotdev/os": "^1.0.0-rc.2",
+    "@vibesdotdev/paths": "^1.0.0-rc.3",
+    "@vibesdotdev/kernel": "^1.0.0-rc.5",
+    "@vibesdotdev/storage": "^1.0.0-rc.2",
+    "@vibesdotdev/tools": "^1.0.0-rc.3",
+    "zod": "^4.6.7"
+  },
+  "peerDependencies": {
+    "@vibesdotdev/kit": "^1.0.0-rc.2",
+    "@vibesdotdev/cli": "^1.0.0-rc.2",
+    "svelte": "^5.57.2",
+    "@vibesdotdev/kernel-rpc": "^1.0.0-rc.2",
+    "@vibesdotdev/runnable": "^1.0.0-rc.0",
+    "@vibesdotdev/surface-sveltekit": "^1.0.0-rc.2"
+  },
+  "main": "./dist/index.js",
+  "exports": {
+    "./svelte/styles.css": {
+      "style": "./dist/svelte/styles.css",
+      "bun": "./dist/svelte/styles.css",
+      "default": "./dist/svelte/styles.css"
+    },
+    ".": {
+      "bun": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./host/local": {
+      "bun": "./dist/host/local-host.contract.js",
+      "types": "./dist/host/local-host.contract.d.ts",
+      "import": "./dist/host/local-host.contract.js",
+      "default": "./dist/host/local-host.contract.js"
+    },
+    "./host/local/plugin": {
+      "bun": "./dist/host/local-host.plugin.js",
+      "types": "./dist/host/local-host.plugin.d.ts",
+      "import": "./dist/host/local-host.plugin.js",
+      "default": "./dist/host/local-host.plugin.js"
+    },
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "node": {
+        "bun": "./dist/vite.js",
+        "import": "./dist/vite.js",
+        "default": "./dist/vite.js"
+      }
+    },
+    "./schemas": {
+      "bun": "./dist/schemas/index.js",
+      "types": "./dist/schemas/index.d.ts",
+      "import": "./dist/schemas/index.js",
+      "default": "./dist/schemas/index.js"
+    },
+    "./client": {
+      "bun": "./dist/client/index.js",
+      "types": "./dist/client/index.d.ts",
+      "import": "./dist/client/index.js",
+      "default": "./dist/client/index.js"
+    },
+    "./storage": {
+      "bun": "./dist/storage/index.js",
+      "types": "./dist/storage/index.d.ts",
+      "import": "./dist/storage/index.js",
+      "default": "./dist/storage/index.js"
+    },
+    "./plugin": {
+      "bun": "./dist/applets.plugin.js",
+      "types": "./dist/applets.plugin.d.ts",
+      "import": "./dist/applets.plugin.js",
+      "default": "./dist/applets.plugin.js"
+    },
+    "./tools": {
+      "bun": "./dist/tools/index.js",
+      "types": "./dist/tools/index.d.ts",
+      "import": "./dist/tools/index.js",
+      "default": "./dist/tools/index.js"
+    },
+    "./tools/applet.impl": {
+      "bun": "./dist/tools/applet.impl.js",
+      "types": "./dist/tools/applet.impl.d.ts",
+      "import": "./dist/tools/applet.impl.js",
+      "default": "./dist/tools/applet.impl.js"
+    },
+    "./component-ref": {
+      "bun": "./dist/component-ref.js",
+      "types": "./dist/component-ref.d.ts",
+      "import": "./dist/component-ref.js",
+      "default": "./dist/component-ref.js"
+    },
+    "./browser-runtime": {
+      "bun": "./dist/browser-runtime.js",
+      "types": "./dist/browser-runtime.d.ts",
+      "import": "./dist/browser-runtime.js",
+      "default": "./dist/browser-runtime.js"
+    },
+    "./cli": {
+      "bun": "./dist/cli/index.js",
+      "types": "./dist/cli/index.d.ts",
+      "import": "./dist/cli/index.js",
+      "default": "./dist/cli/index.js"
+    },
+    "./cli/plugin": {
+      "bun": "./dist/cli/plugin.js",
+      "types": "./dist/cli/plugin.d.ts",
+      "import": "./dist/cli/plugin.js",
+      "default": "./dist/cli/plugin.js"
+    },
+    "./svelte": {
+      "bun": "./dist/svelte/index.js",
+      "types": "./dist/svelte/index.d.ts",
+      "svelte": "./dist/svelte/index.js",
+      "import": "./dist/svelte/index.js",
+      "default": "./dist/svelte/index.js"
+    },
+    "./svelte/AppletCanvas.svelte": {
+      "bun": "./dist/svelte/components/AppletCanvas.svelte",
+      "types": "./dist/svelte/components/AppletCanvas.svelte.d.ts",
+      "svelte": "./dist/svelte/components/AppletCanvas.svelte",
+      "default": "./dist/svelte/components/AppletCanvas.svelte"
+    },
+    "./svelte/AppletConsent.svelte": {
+      "bun": "./dist/svelte/components/AppletConsent.svelte",
+      "types": "./dist/svelte/components/AppletConsent.svelte.d.ts",
+      "svelte": "./dist/svelte/components/AppletConsent.svelte",
+      "default": "./dist/svelte/components/AppletConsent.svelte"
+    },
+    "./svelte/state": {
+      "bun": "./dist/svelte/state.svelte.js",
+      "types": "./dist/svelte/state.svelte.d.ts",
+      "import": "./dist/svelte/state.svelte.js",
+      "default": "./dist/svelte/state.svelte.js"
+    },
+    "./svelte/plugin": {
+      "bun": "./dist/svelte/applets-svelte.plugin.js",
+      "types": "./dist/svelte/applets-svelte.plugin.d.ts",
+      "import": "./dist/svelte/applets-svelte.plugin.js",
+      "default": "./dist/svelte/applets-svelte.plugin.js"
+    },
+    "./svelte/tool-widgets": {
+      "bun": "./dist/svelte/tool-widgets/index.js",
+      "types": "./dist/svelte/tool-widgets/index.d.ts",
+      "svelte": "./dist/svelte/tool-widgets/index.js",
+      "import": "./dist/svelte/tool-widgets/index.js",
+      "default": "./dist/svelte/tool-widgets/index.js"
+    },
+    "./messages": {
+      "types": "./dist/schemas/applet-messages.d.ts",
+      "bun": "./dist/schemas/applet-messages.js",
+      "import": "./dist/schemas/applet-messages.js",
+      "default": "./dist/schemas/applet-messages.js"
+    },
+    "./consumer.plugin": {
+      "bun": "./dist/applets.consumer.plugin.js",
+      "types": "./dist/applets.consumer.plugin.d.ts",
+      "import": "./dist/applets.consumer.plugin.js",
+      "default": "./dist/applets.consumer.plugin.js"
+    },
+    "./cloud.plugin": {
+      "bun": "./dist/applets.cloud.plugin.js",
+      "types": "./dist/applets.cloud.plugin.d.ts",
+      "import": "./dist/applets.cloud.plugin.js",
+      "default": "./dist/applets.cloud.plugin.js"
+    },
+    "./svelte/runnable": {
+      "bun": "./dist/svelte/runnable-source.js",
+      "types": "./dist/svelte/runnable-source.d.ts",
+      "import": "./dist/svelte/runnable-source.js",
+      "default": "./dist/svelte/runnable-source.js"
+    },
+    "./svelte/RunnableTracker.svelte": {
+      "bun": "./dist/svelte/components/RunnableTracker.svelte",
+      "types": "./dist/svelte/components/RunnableTracker.svelte.d.ts",
+      "svelte": "./dist/svelte/components/RunnableTracker.svelte",
+      "default": "./dist/svelte/components/RunnableTracker.svelte"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "templates"
+  ],
+  "scripts": {
+    "lint": "node ../node_modules/@vibesdotdev/internal-oxlint-toolchain/ratchet.mjs .",
+    "build": "rm -rf dist && ${BUN:-bun} --bun tsc -p tsconfig.build.json && ${BUN:-bun} --bun svelte-package --input ./src/svelte --output ./dist/svelte --tsconfig ./tsconfig.svelte.json",
+    "check": "${BUN:-bun} --bun tsc -p tsconfig.json && ${BUN:-bun} --bun svelte-check --tsconfig ./tsconfig.svelte.check.json",
+    "test": "bun test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "ssh://git@git.vibes.dev/vibesdotdev/framework.git",
+    "directory": "applets"
+  },
+  "publishConfig": {
+    "registry": "https://packages.vibes.dev",
+    "access": "public"
+  },
+  "vibes": {
+    "visibility": "public",
+    "registry": {
+      "repositoryId": "4b1374d4-6830-4bfd-98e3-de66416368a8",
+      "directory": "applets"
+    },
+    "publishLoadRuntime": "bun",
+    "publishProofProfiles": [
+      {
+        "id": "applets/svelte",
+        "requiredOptionalPeers": [
+          "@vibesdotdev/kit",
+          "@vibesdotdev/runnable",
+          "@vibesdotdev/surface-sveltekit",
+          "svelte"
+        ],
+        "importSpecifiers": [
+          "@vibesdotdev/applets/svelte"
+        ],
+        "surfaceProof": "sveltekit"
+      }
+    ],
+    "handedRuntimeLogging": true,
+    "featureFamilyProjections": [
+      {
+        "feature": "applets",
+        "role": "svelte",
+        "subpath": "svelte"
+      }
+    ]
+  },
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "license": "MIT",
+  "peerDependenciesMeta": {
+    "@vibesdotdev/cli": {
+      "optional": true
+    },
+    "@vibesdotdev/kit": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "@vibesdotdev/runnable": {
+      "optional": true
+    },
+    "@vibesdotdev/surface-sveltekit": {
+      "optional": true
+    }
+  },
+  "gitHead": "51230ebdad54bc405014633f435b499fa2a06b89",
+  "_vibes_source": {
+    "repo": "ssh://git@git.vibes.dev/vibesdotdev/framework.git",
+    "sha": "51230ebdad54bc405014633f435b499fa2a06b89",
+    "workspaceDigest": "sha256:6597c7f4da64120e37c161db0209da9c2e422d4bf3bd0a39ba98f20008a6e302"
+  }
+}

package/templates/applet-tour/Applet.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	interface Step { title: string; body: string; url?: string }
+	let steps: Step[] = [
+		{
+			title: 'FileViewer',
+			body: 'Tabbed view/edit for handed files. Tabs, line numbers, dirty dots, edit mode. The host hands it {type:"files"} — here it shows its embedded demo. Built from the .vibes/applets/file-viewer template.',
+			url: '/applet/file-viewer/'
+		},
+		{
+			title: 'FileDiffViewer',
+			body: 'Unified and split diff with +/− stats. The LCS diff core is a self-contained module (diff.ts) — served as a second file, which is why serve transpiles TS sources.',
+			url: '/applet/file-diff-viewer/'
+		},
+		{
+			title: 'StorageViewer',
+			body: 'Directory tree for drives (consumer or cloud). v1 renders handed trees; the composition edge pins the manifest so a storage-backed host can feed it real browse results.',
+			url: '/applet/storage-viewer/'
+		},
+		{
+			title: 'vibes applet serve',
+			body: 'The verb that makes all of this local: author in .vibes/applets/{id}/, validate with build, view with serve. 127.0.0.1 only, compile-at-serve, no cloud. PR #119 in framework.'
+		},
+		{
+			title: 'Next: the review loop',
+			body: 'These viewers exist to review work with eyes on files — diffs of real changes, docs read head-to-toe. Approval states (pending/approved/discarded) ride the existing schema bones. That is the next build.'
+		}
+	];
+	let i = 0;
+	let done = false;
+
+	function receive(event: MessageEvent) {
+		const data = event.data;
+		if (data && data.type === 'tour' && Array.isArray(data.steps)) {
+			const valid = data.steps.filter(
+				(s): s is Step => typeof s?.title === 'string' && typeof s?.body === 'string'
+			);
+			if (valid.length > 0) { steps = valid; i = 0; done = false; }
+		}
+	}
+	onMount(() => {
+		window.addEventListener('message', receive);
+		return () => window.removeEventListener('message', receive);
+	});
+
+	$: step = steps[i];
+	function next() { if (i < steps.length - 1) i++; else done = true; }
+	function back() { if (i > 0) i--; }
+	function restart() { i = 0; done = false; }
+</script>
+
+<style>
+	:host, .root { display: block; min-height: 100%; font: 14px/1.6 ui-sans-serif, -apple-system, sans-serif; background: #0d1117; color: #e6edf3; }
+	.root { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
+	.card { max-width: 480px; background: #161b22; border: 1px solid #30363d; border-radius: 12px; padding: 24px 28px; }
+	.kicker { font-size: 11px; letter-spacing: 0.08em; color: #388bfd; text-transform: uppercase; font-weight: 700; margin-bottom: 8px; }
+	h2 { margin: 0 0 10px; font-size: 20px; }
+	.body { color: #c9d1d9; margin-bottom: 18px; }
+	.url { display: inline-block; margin-bottom: 14px; font: 12px ui-monospace, Menlo, monospace; color: #79c0ff; background: #0d1117; border: 1px solid #30363d; border-radius: 6px; padding: 4px 10px; text-decoration: none; }
+	.dots { display: flex; gap: 6px; margin-bottom: 16px; }
+	.dot { width: 8px; height: 8px; border-radius: 50%; background: #30363d; cursor: pointer; }
+	.dot.on { background: #388bfd; }
+	.actions { display: flex; justify-content: space-between; align-items: center; }
+	button, .primary { background: #21262d; color: #e6edf3; border: 1px solid #30363d; border-radius: 6px; padding: 6px 14px; cursor: pointer; font: inherit; }
+	.primary { background: #1f6feb; border-color: #1f6feb; }
+	button:disabled { opacity: 0.4; cursor: default; }
+	.final { text-align: center; }
+	.final .big { font-size: 28px; margin-bottom: 8px; }
+</style>
+
+<div class="root">
+	{#if done}
+		<div class="card final">
+			<div class="big">✓</div>
+			<h2>Tour complete</h2>
+			<p class="body">{steps.length} steps · the whole suite ran on your hardware.</p>
+			<button class="primary" onclick={restart}>Restart</button>
+		</div>
+	{:else if step}
+		<div class="card">
+			<div class="kicker">Step {i + 1} of {steps.length}</div>
+			<h2>{step.title}</h2>
+			{#if step.url}<a class="url" href={step.url} target="_blank" rel="noopener">{step.url} ↗</a>{/if}
+			<p class="body">{step.body}</p>
+			<div class="dots">
+				{#each steps as _, n (n)}<div class="dot" class:on={n === i} onclick={() => (i = n)}></div>{/each}
+			</div>
+			<div class="actions">
+				<button onclick={back} disabled={i === 0}>Back</button>
+			<button class="primary" onclick={next}>{i === steps.length - 1 ? 'Finish' : 'Next'}</button>
+			</div>
+		</div>
+	{/if}
+</div>

package/templates/applet-tour/applet.descriptor.ts

@@ -0,0 +1,15 @@
+/**
+ * Tour applet — authoring descriptor (not published).
+ *
+ * Template #4 of the 2026-08-23 applet effort. Walks a viewer through the
+ * local applet suite: steps reference the served applets (127.0.0.1 ports),
+ * each step can open its target. Receives {type:'tour', steps} to override
+ * the built-in default tour.
+ */
+export default {
+	id: 'applet-tour',
+	title: 'Applet Tour',
+	description: 'Guided walkthrough of the local applet suite.',
+	entry: 'Applet.svelte',
+	contributes: {}
+};

package/templates/assembly-field/Applet.svelte

@@ -0,0 +1,242 @@
+<script lang="ts">
+	// The webgl subpath, not the /svelte barrel: the barrel re-exports
+	// SvelteKit-bound components ($app/*), which cannot load outside SvelteKit.
+	import { AssemblyField, type TargetId } from '@vibesdotdev/kit/components/webgl';
+	import { onMount } from 'svelte';
+
+	import type { AppletSvelteRuntimeProps } from '@vibesdotdev/applets/browser-runtime';
+	import { settingsSchema, type Settings } from './schemas/settings.ts';
+	import { createAssemblySettings } from './settings.ts';
+
+	let { vibes }: AppletSvelteRuntimeProps = $props();
+
+	const all: TargetId[] = ['flower', 'logo', 'temple', 'rose', 'mindmap'];
+	const labels = {
+		flower: 'Flower of life',
+		logo: 'The mark',
+		temple: 'Temple',
+		rose: 'Rose',
+		mindmap: 'Mind map'
+	} as const satisfies Record<TargetId, string>;
+
+	let settings = $state(settingsSchema.parse({}));
+	let hydrated = $state(false);
+	let failure = $state<string | null>(null);
+	let editor: ReturnType<typeof createAssemblySettings> | undefined;
+
+	function showFailure(cause: Error) {
+		failure = cause.message;
+		throw cause;
+	}
+
+	onMount(() => {
+		editor = createAssemblySettings(vibes, value => { settings = value; });
+		void editor.ready.then(() => { hydrated = true; }, showFailure);
+	});
+
+	function change(patch: Partial<Settings>) {
+		void editor?.update(patch).catch(showFailure);
+	}
+
+	let current = $state<TargetId>('flower');
+	let generation = $state(0);
+	let field = $state<{ show: (id: TargetId) => void } | null>(null);
+	let stage = $state<HTMLDivElement | null>(null);
+
+	function rebuild() {
+		generation += 1;
+	}
+
+	function reset() {
+		void editor?.reset().then(rebuild, showFailure);
+	}
+
+	/** Save the current frame as a PNG. The GL canvas keeps no back buffer, so
+	 *  the capture happens right after a fresh frame is drawn. */
+	function saveFrame() {
+		const canvas = stage?.querySelector('canvas');
+		if (!canvas) return;
+		requestAnimationFrame(() => {
+			canvas.toBlob((blob) => {
+				if (!blob) return;
+				const url = URL.createObjectURL(blob);
+				const a = document.createElement('a');
+				a.href = url;
+				a.download = `assembly-field-${current}-${Date.now()}.png`;
+				a.click();
+				setTimeout(() => URL.revokeObjectURL(url), 1000);
+			}, 'image/png');
+		});
+	}
+</script>
+
+<!-- The stage is the brand's dark world regardless of the host theme; the
+     kit's `.dark` tokens give the field its luminous signal colour. -->
+<div class="stage dark" bind:this={stage}>
+	{#if hydrated}
+	{#key generation}
+		<AssemblyField
+			bind:this={field}
+			targets={all}
+			count={settings.count}
+			hold={settings.hold}
+			morph={settings.morph}
+			autoRotate={settings.autoRotate}
+			pointSize={settings.pointSize}
+			sweep={settings.sweep}
+			interactive={settings.interactive}
+			onTarget={(id) => (current = id)}
+		/>
+	{/key}
+	{/if}
+
+	{#if settings.headline}
+		<div class="headline" aria-hidden="true">
+			<h1>It assembles. <em>You decide.</em></h1>
+		</div>
+	{/if}
+
+	<aside class="panel">
+		<p class="eyebrow">Assembly field · {labels[current]}</p>
+		<div class="row targets">
+			{#each all as id}
+				<button type="button" class:active={current === id} onclick={() => field?.show(id)}>{labels[id]}</button>
+			{/each}
+		</div>
+		<label>Points <span>{settings.count.toLocaleString()}</span><input type="range" min="4000" max="120000" step="2000" disabled={!hydrated} bind:value={() => settings.count, value => change({ count: value })} onchange={rebuild} /></label>
+		<label>Assembly <span>{settings.morph}s</span><input type="range" min="2" max="20" step="1" disabled={!hydrated} bind:value={() => settings.morph, value => change({ morph: value })} onchange={rebuild} /></label>
+		<label>Hold <span>{settings.hold}s</span><input type="range" min="3" max="40" step="1" disabled={!hydrated} bind:value={() => settings.hold, value => change({ hold: value })} onchange={rebuild} /></label>
+		<label>Orbit <span>{settings.autoRotate.toFixed(2)}</span><input type="range" min="0" max="0.4" step="0.01" disabled={!hydrated} bind:value={() => settings.autoRotate, value => change({ autoRotate: value })} onchange={rebuild} /></label>
+		<label>Point size <span>{settings.pointSize.toFixed(1)}</span><input type="range" min="1" max="4" step="0.1" disabled={!hydrated} bind:value={() => settings.pointSize, value => change({ pointSize: value })} onchange={rebuild} /></label>
+		<div class="row">
+			<label class="check"><input type="checkbox" disabled={!hydrated} bind:checked={() => settings.sweep, value => change({ sweep: value })} onchange={rebuild} /> Scan sweep</label>
+			<label class="check"><input type="checkbox" disabled={!hydrated} bind:checked={() => settings.interactive, value => change({ interactive: value })} onchange={rebuild} /> Pointer &amp; drag</label>
+			<label class="check"><input type="checkbox" disabled={!hydrated} bind:checked={() => settings.headline, value => change({ headline: value })} /> Headline</label>
+		</div>
+		<div class="row actions">
+			<button type="button" onclick={saveFrame}>Save frame</button>
+			<button type="button" disabled={!hydrated} onclick={reset}>Reset</button>
+		</div>
+		{#if failure}<p role="alert">{failure}</p>{/if}
+		{#if !hydrated && !failure}<p role="status">Loading settings…</p>{/if}
+		<p class="hint">Drag to orbit. Move the pointer to push the parts. Settings are saved through this applet. Reduced motion holds the assembled state.</p>
+	</aside>
+</div>
+
+<style>
+	.stage {
+		position: relative;
+		width: 100%;
+		min-height: 100vh;
+		background: #07110d;
+		color: #f2f5f0;
+		overflow: hidden;
+		font-family:
+			'Figtree',
+			ui-sans-serif,
+			system-ui,
+			sans-serif;
+	}
+	.headline {
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 16%;
+		text-align: center;
+		pointer-events: none;
+	}
+	.headline h1 {
+		margin: 0;
+		font:
+			400 clamp(40px, 7vw, 92px) / 1 'EB Garamond',
+			Garamond,
+			Georgia,
+			serif;
+		letter-spacing: -0.01em;
+	}
+	.headline em {
+		font-style: italic;
+		color: #5ee8a1;
+	}
+	.panel {
+		position: absolute;
+		left: 16px;
+		bottom: 16px;
+		width: min(340px, calc(100% - 32px));
+		padding: 14px 16px 12px;
+		border: 1px solid #1f2e27;
+		border-radius: 12px;
+		background: rgba(14, 26, 21, 0.72);
+		backdrop-filter: blur(10px);
+		display: grid;
+		gap: 8px;
+		font-size: 12px;
+	}
+	.eyebrow {
+		margin: 0 0 2px;
+		font-family: ui-monospace, Menlo, monospace;
+		font-size: 10px;
+		letter-spacing: 0.16em;
+		text-transform: uppercase;
+		color: #5ee8a1;
+	}
+	.row {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 6px;
+	}
+	.targets button {
+		appearance: none;
+		border: 1px solid #1f2e27;
+		background: transparent;
+		color: #a3b5aa;
+		border-radius: 999px;
+		padding: 4px 10px;
+		font: inherit;
+		cursor: pointer;
+	}
+	.targets button.active {
+		border-color: #5ee8a1;
+		color: #5ee8a1;
+	}
+	.targets button:focus-visible,
+	.actions button:focus-visible {
+		outline: 2px solid #b9915a;
+		outline-offset: 2px;
+	}
+	.actions button {
+		appearance: none;
+		border: 1px solid #1f2e27;
+		background: rgba(94, 232, 161, 0.08);
+		color: #f2f5f0;
+		border-radius: 6px;
+		padding: 5px 10px;
+		font: inherit;
+		cursor: pointer;
+	}
+	label {
+		display: grid;
+		grid-template-columns: 1fr auto;
+		gap: 2px 8px;
+		color: #a3b5aa;
+	}
+	label span {
+		font-family: ui-monospace, Menlo, monospace;
+		color: #f2f5f0;
+	}
+	label input[type='range'] {
+		grid-column: 1 / -1;
+		width: 100%;
+		accent-color: #5ee8a1;
+	}
+	label.check {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		accent-color: #5ee8a1;
+	}
+	.hint {
+		margin: 2px 0 0;
+		color: #6f8478;
+	}
+</style>

package/templates/assembly-field/applet.descriptor.ts

@@ -0,0 +1,7 @@
+export default {
+	id: 'assembly-field',
+	title: 'Assembly Field',
+	description: 'A WebGL point cloud that assembles the flower of life, the mark, a temple, a figure, and a mind map — the brand motif, with controls to iterate on it.',
+	entry: 'Applet.svelte',
+	contributes: {}
+};