From 564568a9855e1aad6449dff6da252040e2703688 Mon Sep 17 00:00:00 2001
From: jhweir <james@weco.io>
Date: Sat, 1 Aug 2026 17:32:49 +0100
Subject: [PATCH 01/12] feat(primitives): we-video plays a MediaStream, not
 just a src
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Binding live media to a <video> means assigning `srcObject`, which is a DOM
property with no attribute form — lit-html cannot express it in a template, so
it is assigned in `updated()` once the element exists.

Put here rather than in a framework component on purpose. A primitive is where
WE keeps imperative DOM work so every framework gets it once, and this is what
lets a feature module show live video while shipping nothing but schema
fragments.

`playsinline` comes along because iOS Safari forces any playing video
fullscreen without it, which would make a call tile unusable there.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../3-primitives/src/primitives/video.ts      | 34 +++++++++++++++++--
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/packages/design-system/3-primitives/src/primitives/video.ts b/packages/design-system/3-primitives/src/primitives/video.ts
index 4360ad66..3338221d 100644
--- a/packages/design-system/3-primitives/src/primitives/video.ts
+++ b/packages/design-system/3-primitives/src/primitives/video.ts
@@ -1,5 +1,5 @@
-import { css, html, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { css, html, nothing, type PropertyValues } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { LayoutVisualElement } from '../shared/design-system-element';
@@ -27,16 +27,44 @@ export default class Video extends LayoutVisualElement {
   @property({ type: Boolean }) autoplay = false;
   @property({ type: Boolean }) loop = false;
   @property({ type: Boolean }) muted = false;
+  /** Play inline rather than taking over the screen. Required on iOS Safari, which otherwise forces
+   *  any playing video fullscreen — which would make a call tile unusable there. */
+  @property({ type: Boolean }) playsinline = false;
+
+  /**
+   * A live `MediaStream` to play, instead of `src`.
+   *
+   * `attribute: false` because a stream is an object, not a string — it can only ever be set as a
+   * property. That is the whole reason this lives here rather than in a framework component: binding
+   * a stream to a `<video>` means assigning `srcObject`, which is imperative, and a Lit primitive is
+   * where WE puts imperative DOM work so every framework gets it for free. A feature module that
+   * needs to show live video can therefore stay pure schema fragments.
+   */
+  @property({ attribute: false }) stream?: MediaStream | null;
+
+  @query('video') private videoEl?: HTMLVideoElement;
+
+  /**
+   * Assign after render, not in `render()`. `srcObject` is a DOM property with no attribute form, so
+   * lit-html cannot express it in the template — and the element only exists once the first render
+   * has committed.
+   */
+  protected updated(changed: PropertyValues) {
+    if (changed.has('stream') && this.videoEl) {
+      this.videoEl.srcObject = this.stream ?? null;
+    }
+  }
 
   render() {
     return html`<video
-      src=${this.src}
+      src=${ifDefined(this.stream ? undefined : this.src || undefined)}
       poster=${ifDefined(this.poster)}
       preload=${this.preload}
       ?controls=${this.controls}
       ?autoplay=${this.autoplay}
       ?loop=${this.loop}
       ?muted=${this.muted}
+      ?playsinline=${this.playsinline}
     >
       <slot>${nothing}</slot>
     </video>`;

From 05d225d9afe0af3f65e2900d406d05216f9ff5d1 Mon Sep 17 00:00:00 2001
From: jhweir <james@weco.io>
Date: Sat, 1 Aug 2026 17:32:57 +0100
Subject: [PATCH 02/12] feat(schema-shared): lend module stores the ports, not
 just reactivity
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`ModuleStoreDeps` held `signal` alone, which is enough for a module that only
*holds* state — the notes panel's open flag. A module that **reconciles**
against something the host owns needs more, and the call module needs all of it:
`effect` to notice a peer joining a roster, `ephemeral` to signal, `presence` to
know who is in the call, `dataset`/`datasetUri` to scope it.

Every addition is a neutral port already declared in this package, never a host
object. That is the line that stops the bag becoming a back door: a module
receiving `EphemeralPort` works on any backend implementing one, whereas a
module receiving `adamStore` would be an AD4M module wearing a neutral type.

`datasetUri` is separate from `dataset` because `DatasetHandle` is deliberately
opaque — a module cannot derive a global uri from it without peeking at backend
internals, and it needs one whenever peers must compare an id.

`presence` is narrowed to activities: saying "I am in this call" and reading the
roster are legitimate; setting another agent's availability is not.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 packages/schema-system/shared/src/module.ts | 72 ++++++++++++++++++++-
 1 file changed, 70 insertions(+), 2 deletions(-)

diff --git a/packages/schema-system/shared/src/module.ts b/packages/schema-system/shared/src/module.ts
index 39832e66..ed252f16 100644
--- a/packages/schema-system/shared/src/module.ts
+++ b/packages/schema-system/shared/src/module.ts
@@ -21,6 +21,9 @@
  * just components that never update. A module with no framework imports cannot have that problem.
  * Fragments-first is what makes dynamic loading tractable later.
  */
+import type { DatasetHandle } from './dataSource';
+import type { EphemeralPort } from './ephemeral';
+import type { Activity, Peer } from './presence';
 import type { SchemaNode } from './types';
 
 /**
@@ -125,12 +128,77 @@ export interface ModuleDefinition {
 }
 
 /**
- * The reactivity a host lends a module's store, so the module needn't import a framework.
- * Mirrors the `memo` injection that makes `@we/schema-shared` framework-neutral.
+ * What a host lends a module's store, so the module needn't import a framework *or* a backend.
+ *
+ * Every field is a neutral port already declared in this package — never a host object. That is the
+ * line that keeps the bag from becoming a back door: a module receiving `EphemeralPort` can signal on
+ * any backend that implements one, whereas a module receiving `adamStore` would be an AD4M module
+ * wearing a neutral type.
+ *
+ * Everything past `signal` is optional, and a module must degrade rather than throw when a port is
+ * absent — a host may legitimately have no transport (a personal space has no neighbourhood) or no
+ * presence.
  */
 export interface ModuleStoreDeps {
   /** Returns a `[read, write]` pair — Solid's `createSignal` shape, which every framework can supply. */
   signal: <T>(initial: T) => [() => T, (next: T) => void];
+
+  /**
+   * Re-run `fn` when anything it reads changes — `createEffect` in Solid, `watchEffect` in Vue.
+   *
+   * The other half of the minimal reactive kit. `signal` alone is enough for a module that only
+   * *holds* state (a panel's open flag); a module that must **reconcile** against something the host
+   * owns needs to observe it. The call mesh has to notice a peer joining the roster; polling for that
+   * would be both laggy and a busy loop.
+   */
+  effect?: (fn: () => void) => void;
+
+  /**
+   * The dataset the module is currently scoped to, read reactively. `null` outside a space.
+   *
+   * A function rather than a value because the host re-scopes on navigation, and a module that
+   * captured the dataset once would keep signalling into the space the user left.
+   */
+  dataset?: () => DatasetHandle | null;
+
+  /**
+   * The current dataset's **global** uri — the same value presence puts in `Focus.datasetUri`.
+   *
+   * Supplied separately because {@link DatasetHandle} is deliberately opaque, so a module cannot
+   * derive it without peeking at backend internals. It is needed whenever a module must name the
+   * dataset in something peers will compare: a call id built from a *local* handle id would differ on
+   * every agent, so each would join a call only they can see.
+   */
+  datasetUri?: () => string | null;
+
+  /** This agent's id in the host's identity scheme (a DID on AD4M). `null` before login. */
+  selfId?: () => string | null;
+
+  /**
+   * Peer-to-peer transport for modules that coordinate between agents rather than store data.
+   *
+   * The same port instance the host uses for presence, so scope refcounting works and a module joins
+   * the existing per-dataset subscription instead of opening a second one.
+   */
+  ephemeral?: EphemeralPort;
+
+  /**
+   * Presence, for modules that publish what this agent is doing or read who else is doing it.
+   *
+   * Narrowed to activities on purpose. A module has a legitimate need to say "I am in this call" and
+   * to read the roster; it has no business setting another agent's availability or driving the
+   * heartbeat, so those stay with the host.
+   */
+  presence?: ModulePresenceAccess;
+}
+
+/** The slice of presence a feature module may touch. */
+export interface ModulePresenceAccess {
+  /** Peers in the current dataset, liveness-derived. */
+  peers: () => Peer[];
+  /** Publish an activity of this agent's own. */
+  setActivity: (activity: Activity) => void;
+  clearActivity: (type: string, id?: string) => void;
 }
 
 /** Identity function that exists for inference and for a greppable declaration site. */

From f88b1f89c0d17e08d6c86c3a22024c8286702af1 Mon Sep 17 00:00:00 2001
From: jhweir <james@weco.io>
Date: Sat, 1 Aug 2026 17:33:11 +0100
Subject: [PATCH 03/12] =?UTF-8?q?feat(modules):=20call=20=E2=80=94=20mesh?=
 =?UTF-8?q?=20WebRTC=20over=20the=20ephemeral=20port?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The third module, and the first to test that a module can reach the ephemeral
port at all. Notes proved a module can own durable entities; the globe proved it
can carry a heavyweight framework component. Neither sent a byte to a peer.

Membership is presence's job, not the wire's. There is no join or leave message:
the mesh reconciles against the presence roster, so a peer that appears gets a
connection and one that disappears has its connection torn down. A message-based
roster breaks on exactly the cases calls hit most — closed laptop, killed tab,
network partition — each leaving a participant who never sent `leave` and a tile
frozen forever. Presence expires on TTL, so a dead peer leaves on its own. The
consequence: drop every message on this channel and the call fails to connect
while the roster stays correct, which is the right way round.

Both peers see each other join at slightly different moments and both fire
`negotiationneeded`, so offers collide. Perfect negotiation resolves it, with the
polite/impolite roles decided by comparing ids — deterministic, no round trip,
the same lower-id-wins trick the tab coordinator uses.

Screen share replaces the outbound video track rather than adding a second one,
so the swap needs no renegotiation and cannot half-apply across peers. Receivers
learn a screen is a screen from `MediaSettings` on the roster, which presence was
already publishing — no extra protocol message, nothing to keep in sync. The cost
is that camera and screen cannot both be sent; simultaneous needs a second
transceiver and a way to label tracks, which is a protocol addition worth making
against a real complaint.

`coalesce: false` on the channel, emphatically: a dropped presence heartbeat
costs nothing because the next carries the same state, but a dropped SDP offer is
simply lost and that peer never connects.

Ships as schema fragments only — no `frameworks`, no `backends`, no framework
import — because `we-video` now takes a MediaStream.

28 tests: two agents negotiating in one process over `InMemoryBus`, including
glare, roster teardown, traffic for another call in the same space, and offers
from an agent the roster does not include.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 packages/modules/call/package.json      |  37 ++
 packages/modules/call/src/index.ts      | 353 +++++++++++++
 packages/modules/call/src/media.test.ts | 214 ++++++++
 packages/modules/call/src/media.ts      | 194 +++++++
 packages/modules/call/src/mesh.test.ts  | 307 +++++++++++
 packages/modules/call/src/mesh.ts       | 314 +++++++++++
 packages/modules/call/src/protocol.ts   | 112 ++++
 packages/modules/call/src/store.ts      | 300 +++++++++++
 packages/modules/call/src/test-setup.ts |  30 ++
 packages/modules/call/tsconfig.json     |  11 +
 packages/modules/call/tsup.config.ts    |  13 +
 packages/modules/call/vitest.config.ts  |   8 +
 pnpm-lock.yaml                          | 657 ++++++++++++++++++++++++
 13 files changed, 2550 insertions(+)
 create mode 100644 packages/modules/call/package.json
 create mode 100644 packages/modules/call/src/index.ts
 create mode 100644 packages/modules/call/src/media.test.ts
 create mode 100644 packages/modules/call/src/media.ts
 create mode 100644 packages/modules/call/src/mesh.test.ts
 create mode 100644 packages/modules/call/src/mesh.ts
 create mode 100644 packages/modules/call/src/protocol.ts
 create mode 100644 packages/modules/call/src/store.ts
 create mode 100644 packages/modules/call/src/test-setup.ts
 create mode 100644 packages/modules/call/tsconfig.json
 create mode 100644 packages/modules/call/tsup.config.ts
 create mode 100644 packages/modules/call/vitest.config.ts

diff --git a/packages/modules/call/package.json b/packages/modules/call/package.json
new file mode 100644
index 00000000..335ee158
--- /dev/null
+++ b/packages/modules/call/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "@we/module-call",
+  "version": "0.1.0",
+  "description": "Call feature module — mesh WebRTC audio, video and screen share over the ephemeral port",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build:steps": "tsup",
+    "build": "we-build",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "@we/schema-shared": "workspace:*"
+  },
+  "devDependencies": {
+    "@we/cli": "workspace:*",
+    "@we/schema-shared": "workspace:*",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.3",
+    "vitest": "^1.0.0"
+  }
+}
diff --git a/packages/modules/call/src/index.ts b/packages/modules/call/src/index.ts
new file mode 100644
index 00000000..9cabfae2
--- /dev/null
+++ b/packages/modules/call/src/index.ts
@@ -0,0 +1,353 @@
+/**
+ * The Call feature module — mesh WebRTC audio, video and screen share.
+ *
+ * The third module, and the one that tests what the first two could not: that a module can reach the
+ * **ephemeral port**. Notes proved a module can own durable entities; the globe proved a module can
+ * carry a heavyweight framework component. Neither sent a byte to another agent.
+ *
+ * ## Still fragments-only
+ *
+ * The surprise of this build. A call seemed certain to need a framework component — live video means
+ * assigning `srcObject` to a `<video>`, which is imperative and cannot be expressed as data.
+ *
+ * It does not, because that imperative step belongs one layer down: `we-video` gained a `stream`
+ * property, and a Lit primitive is precisely where WE puts imperative DOM work so that every
+ * framework gets it once. So the most demanding module in the codebase declares no `frameworks` and
+ * imports no framework — which means it is the strongest evidence so far that the fragments-first
+ * contract is real rather than aspirational.
+ *
+ * ## What it does not do
+ *
+ * - **No TURN server.** Peers behind symmetric NAT will not connect. TURN is infrastructure someone
+ *   has to run, so it is a deployment decision rather than a module one.
+ * - **No SFU.** Mesh only, so roughly four to six participants — see `mesh.ts`.
+ * - **No camera *and* screen at once.** Sharing replaces the camera track — see `media.ts`.
+ */
+import { defineModule, type ModuleStoreDeps, type SchemaNode } from '@we/schema-shared';
+
+import { createCallStore } from './store';
+
+export { createCallMesh, type CallMesh, type SignallingChannel } from './mesh';
+export { createMediaController, type MediaController, type MediaState } from './media';
+export { anchoredCallId, CALL_PROTOCOL_VERSION, parseCallMessage, spaceCallId } from './protocol';
+export { createCallStore, type CallTile } from './store';
+
+/** One participant's video, or their avatar when there is nothing to show. */
+const tile: SchemaNode = {
+  type: 'Column',
+  props: {
+    position: 'relative',
+    bg: 'neutral-900',
+    r: '400',
+    overflow: 'hidden',
+    minWidth: '160px',
+    flex: '1',
+    ax: 'center',
+    ay: 'center',
+  },
+  children: [
+    {
+      type: '$if',
+      props: {
+        // A tile with no stream yet is normal for the first second or two of a join, and a peer with
+        // their camera off never gets one at all. Both show the avatar rather than a black rectangle.
+        condition: { $and: ['$tile.stream', { $or: ['$tile.videoEnabled', '$tile.isScreen'] }] },
+        then: {
+          type: 'we-video',
+          props: {
+            stream: '$tile.stream',
+            autoplay: true,
+            playsinline: true,
+            // Never hear yourself. The self tile plays the same microphone the mesh is sending, and
+            // unmuted it is an immediate feedback loop.
+            muted: '$tile.isSelf',
+            width: '100%',
+            height: '100%',
+            // A desktop cropped to fill a camera-shaped tile is unreadable — `contain` letterboxes it
+            // instead. Driven by the roster, because only the sender knows which it is sending.
+            fit: { $if: { condition: '$tile.isScreen', then: 'contain', else: 'cover' } },
+          },
+        },
+        else: {
+          type: 'we-avatar',
+          props: { image: '$tile.avatar', initials: '$tile.name', size: 'lg' },
+        },
+      },
+    },
+    {
+      type: 'Row',
+      props: { position: 'absolute', bottom: '200', left: '200', gap: '100', ay: 'center' },
+      children: [
+        {
+          type: '$if',
+          props: {
+            condition: { $not: '$tile.audioEnabled' },
+            then: {
+              type: 'we-badge',
+              props: { variant: 'neutral', size: 'xs' },
+              children: [{ type: 'we-icon', props: { name: 'microphone-slash' } }],
+            },
+          },
+        },
+        {
+          type: '$if',
+          props: {
+            condition: '$tile.isScreen',
+            then: {
+              type: 'we-badge',
+              props: { variant: 'primary', size: 'xs' },
+              children: [{ type: 'we-icon', props: { name: 'monitor' } }],
+            },
+          },
+        },
+        {
+          // Reconnecting is worth saying out loud — silence looks identical to a frozen call.
+          type: '$if',
+          props: {
+            condition: { $in: ['$tile.connection', ['connecting', 'disconnected', 'failed']] },
+            then: {
+              type: 'we-badge',
+              props: { variant: 'warning', size: 'xs' },
+              children: ['$tile.connection'],
+            },
+          },
+        },
+      ],
+    },
+  ],
+};
+
+/** The expanded stage — every participant, above the bar. */
+const stage: SchemaNode = {
+  type: '$if',
+  props: {
+    condition: { $and: [{ $store: 'modules.call.active' }, { $store: 'modules.call.expanded' }] },
+    then: {
+      type: 'Grid',
+      props: {
+        position: 'fixed',
+        bottom: '900',
+        left: '400',
+        right: '400',
+        height: '40vh',
+        minChildWidth: '220px',
+        gap: '300',
+        p: '300',
+        bg: 'neutral-1000',
+        r: '500',
+        shadow: 'xl',
+        zIndex: 'sticky',
+      },
+      children: [{ type: '$each', props: { items: { $store: 'modules.call.tiles' }, as: 'tile' }, children: [tile] }],
+    },
+  },
+};
+
+/** A toggle button whose icon and tone follow the state it toggles. */
+function mediaToggle(opts: { on: string; off: string; enabled: string; action: string; danger?: boolean }): SchemaNode {
+  return {
+    type: 'we-button',
+    props: {
+      size: 'sm',
+      variant: { $if: { condition: { $store: opts.enabled }, then: 'secondary', else: 'ghost' } },
+      onClick: { $action: opts.action },
+    },
+    children: [
+      {
+        type: 'we-icon',
+        props: { name: { $if: { condition: { $store: opts.enabled }, then: opts.on, else: opts.off } } },
+      },
+    ],
+  };
+}
+
+/** The bar, in its two states: a call is running and you are not in it, or you are. */
+const bar: SchemaNode = {
+  type: '$if',
+  props: {
+    condition: { $store: 'modules.call.active' },
+
+    // ── Not in a call ────────────────────────────────────────────────────────
+    // Only shown when somebody else is, so an empty space carries no chrome at all. Starting a call
+    // from nothing belongs on a deliberate affordance, not on persistent furniture.
+    else: {
+      type: '$if',
+      props: {
+        condition: { $count: { items: { $store: 'modules.call.ongoing' } } },
+        then: {
+          type: 'Row',
+          props: {
+            position: 'fixed',
+            bottom: '400',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            bg: 'neutral-0',
+            border: '1px solid neutral-200',
+            r: 'pill',
+            shadow: 'lg',
+            py: '200',
+            px: '300',
+            gap: '300',
+            ay: 'center',
+            zIndex: 'sticky',
+          },
+          children: [
+            {
+              type: 'AvatarStack',
+              props: { avatars: { $store: 'modules.call.ongoing' }, size: 'xs', max: 4 },
+            },
+            {
+              type: 'we-text',
+              props: { variant: 'label' },
+              children: [
+                { type: 'we-number', props: { value: { $count: { items: { $store: 'modules.call.ongoing' } } } } },
+                ' in a call',
+              ],
+            },
+            {
+              type: 'we-button',
+              props: { size: 'sm', onClick: { $action: 'modules.call.joinSpaceCall' } },
+              children: ['Join'],
+            },
+          ],
+        },
+      },
+    },
+
+    // ── In a call ────────────────────────────────────────────────────────────
+    then: {
+      type: 'Row',
+      props: {
+        position: 'fixed',
+        bottom: '400',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        bg: 'neutral-0',
+        border: '1px solid neutral-200',
+        r: 'pill',
+        shadow: 'lg',
+        py: '200',
+        px: '300',
+        gap: '200',
+        ay: 'center',
+        zIndex: 'sticky',
+      },
+      children: [
+        mediaToggle({
+          on: 'microphone',
+          off: 'microphone-slash',
+          enabled: 'modules.call.media.audioEnabled',
+          action: 'modules.call.toggleAudio',
+        }),
+        mediaToggle({
+          on: 'video-camera',
+          off: 'video-camera-slash',
+          enabled: 'modules.call.media.videoEnabled',
+          action: 'modules.call.toggleVideo',
+        }),
+        mediaToggle({
+          on: 'monitor',
+          off: 'monitor',
+          enabled: 'modules.call.media.screenShareEnabled',
+          action: 'modules.call.toggleScreenShare',
+        }),
+        { type: 'we-divider', props: { orientation: 'vertical', height: '20px' } },
+        {
+          type: 'we-button',
+          props: { size: 'sm', variant: 'ghost', onClick: { $action: 'modules.call.toggleStage' } },
+          children: [
+            {
+              type: 'we-icon',
+              props: {
+                name: { $if: { condition: { $store: 'modules.call.expanded' }, then: 'caret-down', else: 'caret-up' } },
+              },
+            },
+            {
+              type: 'we-number',
+              props: { value: { $count: { items: { $store: 'modules.call.tiles' } } } },
+            },
+          ],
+        },
+        {
+          type: 'we-button',
+          props: { size: 'sm', variant: 'danger', onClick: { $action: 'modules.call.leave' } },
+          children: [{ type: 'we-icon', props: { name: 'phone-x' } }],
+        },
+      ],
+    },
+  },
+};
+
+/** Whatever went wrong, said out loud. A call that silently fails to start is indistinguishable from
+ *  one nobody has joined. */
+const problem: SchemaNode = {
+  type: '$if',
+  props: {
+    condition: { $store: 'modules.call.problem' },
+    then: {
+      type: 'Row',
+      props: {
+        position: 'fixed',
+        bottom: '400',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        zIndex: 'sticky',
+        maxWidth: '420px',
+      },
+      children: [
+        {
+          type: 'we-alert',
+          props: { variant: 'warning', dismissible: true, onClose: { $action: 'modules.call.dismissProblem' } },
+          children: [{ $store: 'modules.call.problem' }],
+        },
+      ],
+    },
+  },
+};
+
+/**
+ * Start a call about a particular thing — "the call on this post".
+ *
+ * Exported as a named schema so a template places it where it makes sense (a post's action row, a
+ * kanban card's menu), because only the template knows what a node *is*. `$node.id` is supplied by
+ * whatever `$each` context it is dropped into.
+ */
+const anchoredCallButton: SchemaNode = {
+  type: 'we-button',
+  props: {
+    variant: 'ghost',
+    size: 'sm',
+    onClick: { $action: 'modules.call.joinAnchoredCall', args: ['$node.id'] },
+  },
+  children: [{ type: 'we-icon', props: { name: 'phone-call' } }],
+};
+
+/** A bare "start a call here" trigger, for templates that want one in their own chrome. */
+const startCallButton: SchemaNode = {
+  type: 'we-button',
+  props: { variant: 'ghost', size: 'sm', onClick: { $action: 'modules.call.joinSpaceCall' } },
+  children: [{ type: 'we-icon', props: { name: 'phone-call' } }],
+};
+
+export const callModule = defineModule({
+  id: 'call',
+  name: 'Calls',
+  description: 'Audio, video and screen share with the people in a space.',
+  icon: 'phone-call',
+
+  // Displayed at install, never scored. These three are the whole reason a user should think twice
+  // before installing a call module from a stranger.
+  capabilities: ['microphone', 'camera', 'screen-share', 'slot:dock-bottom'],
+
+  // No `backends`: signalling goes through the ephemeral port, so this runs on anything that
+  // implements one. No `frameworks`: every piece of UI here is a fragment.
+
+  schemas: { anchoredCallButton, startCallButton, tile },
+  slots: [
+    { anchor: 'dock-bottom', node: bar, order: 100 },
+    { anchor: 'dock-bottom', node: stage, order: 90 },
+    { anchor: 'dock-bottom', node: problem, order: 80 },
+  ],
+
+  createStore: (deps: ModuleStoreDeps) => createCallStore(deps),
+});
diff --git a/packages/modules/call/src/media.test.ts b/packages/modules/call/src/media.test.ts
new file mode 100644
index 00000000..44bd3e00
--- /dev/null
+++ b/packages/modules/call/src/media.test.ts
@@ -0,0 +1,214 @@
+/**
+ * The media controller's state machine.
+ *
+ * Worth testing on its own because screen share is the one place where two pieces of state disagree
+ * on purpose: while sharing, `videoEnabled` is false even though video is being sent. Getting that
+ * wrong produces the bug where stopping a share leaves the camera off with the button saying it is on.
+ */
+import { describe, expect, it, vi } from 'vitest';
+
+import { createMediaController, type MediaDeviceAccess, type MediaState } from './media';
+
+function fakeTrack(kind: 'audio' | 'video') {
+  const listeners: Record<string, (() => void)[]> = {};
+  return {
+    kind,
+    enabled: true,
+    stopped: false,
+    stop() {
+      this.stopped = true;
+    },
+    addEventListener(event: string, cb: () => void) {
+      (listeners[event] ??= []).push(cb);
+    },
+    /** Test helper: the browser's own "Stop sharing" bar ends the track this way. */
+    end() {
+      for (const cb of listeners.ended ?? []) cb();
+    },
+  };
+}
+
+function fakeStream(tracks: ReturnType<typeof fakeTrack>[]) {
+  return {
+    getTracks: () => tracks,
+    getAudioTracks: () => tracks.filter((t) => t.kind === 'audio'),
+    getVideoTracks: () => tracks.filter((t) => t.kind === 'video'),
+  } as unknown as MediaStream;
+}
+
+function setup(overrides: Partial<MediaDeviceAccess> = {}) {
+  const mic = fakeTrack('audio');
+  const camera = fakeTrack('video');
+  const screen = fakeTrack('video');
+
+  const devices: MediaDeviceAccess = {
+    getUserMedia: vi.fn(async () => fakeStream([mic, camera])),
+    getDisplayMedia: vi.fn(async () => fakeStream([screen])),
+    ...overrides,
+  };
+
+  const tracks: [string, unknown][] = [];
+  const states: MediaState[] = [];
+  const errors: string[] = [];
+
+  const controller = createMediaController({
+    devices,
+    onTrackChanged: (kind, track) => tracks.push([kind, track]),
+    onStateChanged: (state) => states.push(state),
+    onError: (context) => errors.push(context),
+  });
+
+  return { controller, devices, mic, camera, screen, tracks, states, errors };
+}
+
+/** The track the mesh would currently be sending for a kind. */
+const sent = (tracks: [string, unknown][], kind: string) =>
+  [...tracks].reverse().find(([k]) => k === kind)?.[1] ?? null;
+
+describe('media controller', () => {
+  it('publishes mic and camera once started', async () => {
+    const { controller, mic, camera, tracks } = setup();
+    await controller.start();
+
+    expect(sent(tracks, 'audio')).toBe(mic);
+    expect(sent(tracks, 'video')).toBe(camera);
+    expect(controller.state()).toEqual({ audioEnabled: true, videoEnabled: true, screenShareEnabled: false });
+  });
+
+  it('mutes by disabling the track, keeping the sender in place', async () => {
+    const { controller, mic, tracks } = setup();
+    await controller.start();
+    const before = tracks.length;
+
+    controller.setAudioEnabled(false);
+
+    expect(mic.enabled).toBe(false);
+    // No new outbound track: swapping one would force a renegotiation on every unmute.
+    expect(tracks).toHaveLength(before);
+    expect(controller.state().audioEnabled).toBe(false);
+  });
+
+  it('falls back to audio-only when the camera is refused', async () => {
+    const mic = fakeTrack('audio');
+    let call = 0;
+    const { controller, errors, tracks } = setup({
+      getUserMedia: vi.fn(async () => {
+        if (call++ === 0) throw new Error('NotAllowedError');
+        return fakeStream([mic]);
+      }),
+    });
+
+    await controller.start();
+
+    // A refused camera must not stop the call — audio-only is a valid way to be in one.
+    expect(errors).toContain('acquiring camera and microphone');
+    expect(sent(tracks, 'audio')).toBe(mic);
+    expect(controller.state().videoEnabled).toBe(false);
+  });
+
+  it('reports nothing usable when even the microphone is refused', async () => {
+    const { controller, errors } = setup({
+      getUserMedia: vi.fn(async () => {
+        throw new Error('NotAllowedError');
+      }),
+    });
+
+    await controller.start();
+
+    expect(errors).toEqual(['acquiring camera and microphone', 'acquiring microphone']);
+    expect(controller.localStream()).toBeNull();
+  });
+
+  describe('screen share', () => {
+    it('replaces the outbound video track and flags the state', async () => {
+      const { controller, screen, tracks } = setup();
+      await controller.start();
+
+      await controller.startScreenShare();
+
+      expect(sent(tracks, 'video')).toBe(screen);
+      // videoEnabled false while screenShareEnabled true is the deliberate disagreement: the camera
+      // is genuinely not what is being sent, and the roster is what tells peers to render `contain`.
+      expect(controller.state()).toEqual({ audioEnabled: true, videoEnabled: false, screenShareEnabled: true });
+    });
+
+    it('restores the camera to what it was before the share', async () => {
+      const { controller, camera, tracks } = setup();
+      await controller.start();
+
+      await controller.startScreenShare();
+      controller.stopScreenShare();
+
+      expect(sent(tracks, 'video')).toBe(camera);
+      expect(camera.enabled).toBe(true);
+      expect(controller.state().videoEnabled).toBe(true);
+    });
+
+    it('leaves the camera off if it was off before the share', async () => {
+      const { controller, camera } = setup();
+      await controller.start();
+      controller.setVideoEnabled(false);
+
+      await controller.startScreenShare();
+      controller.stopScreenShare();
+
+      // Turning the camera on because a share ended would put someone on screen who chose not to be.
+      expect(camera.enabled).toBe(false);
+      expect(controller.state().videoEnabled).toBe(false);
+    });
+
+    it("notices the browser's own Stop sharing button", async () => {
+      const { controller, screen, camera, tracks } = setup();
+      await controller.start();
+      await controller.startScreenShare();
+
+      // Ended out-of-band — the controller is never told directly.
+      screen.end();
+
+      expect(controller.state().screenShareEnabled).toBe(false);
+      expect(sent(tracks, 'video')).toBe(camera);
+    });
+
+    it('remembers a camera toggle made while sharing', async () => {
+      const { controller, camera, screen, tracks } = setup();
+      await controller.start();
+      await controller.startScreenShare();
+
+      // The camera button still works while sharing; it just does not take effect yet.
+      controller.setVideoEnabled(true);
+      expect(sent(tracks, 'video')).toBe(screen);
+
+      controller.stopScreenShare();
+      expect(camera.enabled).toBe(true);
+    });
+
+    it('survives a cancelled picker without changing state', async () => {
+      const { controller, errors, camera, tracks } = setup({
+        getDisplayMedia: vi.fn(async () => {
+          throw new Error('NotAllowedError');
+        }),
+      });
+      await controller.start();
+
+      await controller.startScreenShare();
+
+      expect(errors).toContain('starting screen share');
+      expect(controller.state().screenShareEnabled).toBe(false);
+      expect(sent(tracks, 'video')).toBe(camera);
+    });
+  });
+
+  it('releases every device on stop, so the camera light goes out', async () => {
+    const { controller, mic, camera, screen, tracks } = setup();
+    await controller.start();
+    await controller.startScreenShare();
+
+    controller.stop();
+
+    expect(mic.stopped).toBe(true);
+    expect(camera.stopped).toBe(true);
+    expect(screen.stopped).toBe(true);
+    expect(sent(tracks, 'audio')).toBeNull();
+    expect(sent(tracks, 'video')).toBeNull();
+  });
+});
diff --git a/packages/modules/call/src/media.ts b/packages/modules/call/src/media.ts
new file mode 100644
index 00000000..236f3585
--- /dev/null
+++ b/packages/modules/call/src/media.ts
@@ -0,0 +1,194 @@
+/**
+ * Local media — the microphone, the camera, and the screen.
+ *
+ * Split from the mesh because they fail differently and independently. Media fails *locally* and
+ * loudly: a denied permission, a camera another app has already claimed. Signalling fails *between*
+ * peers. Tangling them produces the bug where one peer's refused camera prompt tears down everyone's
+ * audio.
+ *
+ * ## How screen share is modelled — and its one real limitation
+ *
+ * Sharing **replaces** the outbound video track rather than adding a second one. `replaceTrack` does
+ * not renegotiate, so the swap is instant and cannot half-apply across peers.
+ *
+ * A receiver still needs to know a screen is a screen — a 16:9 desktop cropped to fill a square
+ * camera tile is unreadable. That information is already travelling: presence publishes
+ * `MediaSettings` on the call activity, so `screenShareEnabled` on the *roster* tells every peer how
+ * to render the tile, with no extra protocol message and nothing to keep in sync.
+ *
+ * The limitation this buys: **you cannot send camera and screen at once.** Sharing turns the camera
+ * off, and stopping the share turns it back on if it was on before. Simultaneous camera-plus-screen
+ * needs a second transceiver *and* a way to tell the receiver which track is which — a real protocol
+ * addition, not a tweak, and one worth making against a real complaint rather than speculatively.
+ *
+ * ## Mute is `enabled`, not a track swap
+ *
+ * Muting sets `track.enabled = false`, which keeps the sender in place and sends silence. Stopping
+ * the track instead would free the device — the camera light would go out, which is arguably better
+ * privacy — but it forces a renegotiation on every unmute and re-prompts on some platforms. Presence
+ * carries the muted state as `MediaSettings`, so peers render a muted badge from the roster rather
+ * than trying to infer it from the media.
+ */
+
+/** The browser APIs this controller needs, injected so tests need no browser. */
+export interface MediaDeviceAccess {
+  getUserMedia: (constraints: MediaStreamConstraints) => Promise<MediaStream>;
+  getDisplayMedia: (constraints?: DisplayMediaStreamOptions) => Promise<MediaStream>;
+}
+
+export interface MediaState {
+  audioEnabled: boolean;
+  videoEnabled: boolean;
+  screenShareEnabled: boolean;
+}
+
+export interface MediaControllerOptions {
+  devices?: MediaDeviceAccess;
+  /** Called whenever the track a kind should be sending changes. The mesh subscribes to this. */
+  onTrackChanged?: (kind: 'audio' | 'video', track: MediaStreamTrack | null) => void;
+  /** Called when enabled-flags change, so presence can republish `MediaSettings`. */
+  onStateChanged?: (state: MediaState) => void;
+  onError?: (context: string, error: unknown) => void;
+}
+
+export interface MediaController {
+  /** This agent's own camera/mic stream, for the self-view tile. */
+  localStream(): MediaStream | null;
+  /** What the self-view should actually show — the screen while sharing. */
+  displayStream(): MediaStream | null;
+  state(): MediaState;
+  /** Acquire mic and camera. Safe to call repeatedly; only the first acquires. */
+  start(constraints?: MediaStreamConstraints): Promise<void>;
+  setAudioEnabled(enabled: boolean): void;
+  setVideoEnabled(enabled: boolean): void;
+  startScreenShare(): Promise<void>;
+  stopScreenShare(): void;
+  /** Release every device. The camera light must go out when the call ends. */
+  stop(): void;
+}
+
+const DEFAULT_CONSTRAINTS: MediaStreamConstraints = {
+  audio: { echoCancellation: true, noiseSuppression: true },
+  video: { width: { ideal: 1280 }, height: { ideal: 720 } },
+};
+
+export function createMediaController(options: MediaControllerOptions = {}): MediaController {
+  const devices: MediaDeviceAccess = options.devices ?? {
+    getUserMedia: (c) => navigator.mediaDevices.getUserMedia(c),
+    getDisplayMedia: (c) => navigator.mediaDevices.getDisplayMedia(c),
+  };
+
+  let stream: MediaStream | null = null;
+  let screenStream: MediaStream | null = null;
+  /** Whether the camera was on before sharing started, so stopping restores what the user had. */
+  let videoBeforeShare = false;
+
+  const state: MediaState = { audioEnabled: true, videoEnabled: true, screenShareEnabled: false };
+
+  const emitState = () => options.onStateChanged?.({ ...state });
+
+  const cameraTrack = () => stream?.getVideoTracks()[0] ?? null;
+  const screenTrack = () => screenStream?.getVideoTracks()[0] ?? null;
+
+  /** The video track the mesh should be sending right now: the screen while sharing, else the camera. */
+  const publishVideo = () =>
+    options.onTrackChanged?.('video', state.screenShareEnabled ? screenTrack() : cameraTrack());
+
+  function stopScreenShare() {
+    if (!screenStream) return;
+    for (const track of screenStream.getTracks()) track.stop();
+    screenStream = null;
+    state.screenShareEnabled = false;
+    // Restore whatever the camera was doing before, rather than assuming it should come back on.
+    state.videoEnabled = videoBeforeShare;
+    const camera = cameraTrack();
+    if (camera) camera.enabled = videoBeforeShare;
+    publishVideo();
+    emitState();
+  }
+
+  return {
+    localStream: () => stream,
+    displayStream: () => screenStream ?? stream,
+    state: () => ({ ...state }),
+
+    async start(constraints = DEFAULT_CONSTRAINTS) {
+      if (stream) return;
+      try {
+        stream = await devices.getUserMedia(constraints);
+      } catch (error) {
+        // A refused or missing camera must not stop the call — audio-only is a valid way to be in
+        // one. Retry audio alone before giving up entirely.
+        options.onError?.('acquiring camera and microphone', error);
+        try {
+          stream = await devices.getUserMedia({ audio: constraints.audio ?? true });
+          state.videoEnabled = false;
+        } catch (audioError) {
+          options.onError?.('acquiring microphone', audioError);
+          return;
+        }
+      }
+
+      for (const track of stream.getAudioTracks()) track.enabled = state.audioEnabled;
+      for (const track of stream.getVideoTracks()) track.enabled = state.videoEnabled;
+
+      options.onTrackChanged?.('audio', stream.getAudioTracks()[0] ?? null);
+      publishVideo();
+      emitState();
+    },
+
+    setAudioEnabled(enabled) {
+      state.audioEnabled = enabled;
+      for (const track of stream?.getAudioTracks() ?? []) track.enabled = enabled;
+      emitState();
+    },
+
+    setVideoEnabled(enabled) {
+      state.videoEnabled = enabled;
+      // While sharing, the camera is not what is being sent — remember the preference and apply it
+      // when the share stops, rather than silently doing nothing.
+      videoBeforeShare = enabled;
+      if (!state.screenShareEnabled) {
+        const camera = cameraTrack();
+        if (camera) camera.enabled = enabled;
+      }
+      emitState();
+    },
+
+    async startScreenShare() {
+      if (state.screenShareEnabled) return;
+      try {
+        screenStream = await devices.getDisplayMedia({ video: true });
+      } catch (error) {
+        // Cancelling the picker lands here and is not an error worth surfacing loudly.
+        options.onError?.('starting screen share', error);
+        return;
+      }
+
+      videoBeforeShare = state.videoEnabled;
+      state.screenShareEnabled = true;
+      state.videoEnabled = false;
+
+      // The browser's own "Stop sharing" bar ends the track without telling us. Without this the UI
+      // would keep claiming to share a screen that is no longer being captured.
+      const track = screenTrack();
+      track?.addEventListener('ended', () => stopScreenShare());
+
+      publishVideo();
+      emitState();
+    },
+
+    stopScreenShare,
+
+    stop() {
+      for (const track of stream?.getTracks() ?? []) track.stop();
+      for (const track of screenStream?.getTracks() ?? []) track.stop();
+      stream = null;
+      screenStream = null;
+      state.screenShareEnabled = false;
+      options.onTrackChanged?.('audio', null);
+      options.onTrackChanged?.('video', null);
+      emitState();
+    },
+  };
+}
diff --git a/packages/modules/call/src/mesh.test.ts b/packages/modules/call/src/mesh.test.ts
new file mode 100644
index 00000000..f5075975
--- /dev/null
+++ b/packages/modules/call/src/mesh.test.ts
@@ -0,0 +1,307 @@
+/**
+ * Two agents negotiating in one process.
+ *
+ * The mesh is the part of this module that cannot be checked by looking at it: perfect negotiation is
+ * a protocol between two peers whose bugs (glare, a lost candidate, a connection that never tears
+ * down) only appear when both sides run. `InMemoryBus` — the ephemeral port's second implementation,
+ * which exists precisely so the port is not defined by one backend — makes that a unit test rather
+ * than a two-laptop manual check.
+ *
+ * The `RTCPeerConnection` fake is deliberately thin: it models signalling state and the callbacks the
+ * mesh drives, and nothing about actual media. What is under test is the negotiation, not the browser.
+ */
+import { createInMemoryEphemeralPort, InMemoryBus } from '@we/schema-shared';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { createCallMesh } from './mesh';
+import { CALL_PROTOCOL_VERSION, parseCallMessage, spaceCallId } from './protocol';
+
+// ── A fake RTCPeerConnection ────────────────────────────────────────────────
+
+class FakePeerConnection {
+  signalingState: RTCSignalingState = 'stable';
+  connectionState: RTCPeerConnectionState = 'new';
+  localDescription: RTCSessionDescriptionInit | null = null;
+  remoteDescription: RTCSessionDescriptionInit | null = null;
+
+  onnegotiationneeded: (() => void) | null = null;
+  onicecandidate: ((e: { candidate: { toJSON(): RTCIceCandidateInit } | null }) => void) | null = null;
+  ontrack: ((e: { track: unknown }) => void) | null = null;
+  onconnectionstatechange: (() => void) | null = null;
+
+  senders: { track: MediaStreamTrack | null; replaceTrack(t: MediaStreamTrack | null): Promise<void> }[] = [];
+  addedTracks: unknown[] = [];
+  closed = false;
+
+  addTrack(track: MediaStreamTrack) {
+    this.addedTracks.push(track);
+    const sender = {
+      track: track as MediaStreamTrack | null,
+      async replaceTrack(next: MediaStreamTrack | null) {
+        sender.track = next;
+      },
+    };
+    this.senders.push(sender);
+    // Adding a sender is what fires renegotiation in a real connection.
+    queueMicrotask(() => this.onnegotiationneeded?.());
+    return sender;
+  }
+
+  getSenders() {
+    return this.senders;
+  }
+
+  async setLocalDescription(description?: RTCSessionDescriptionInit) {
+    // Mirrors the browser: with no argument it picks offer or answer from the signaling state.
+    const type = description?.type ?? (this.signalingState === 'have-remote-offer' ? 'answer' : 'offer');
+    this.localDescription = { type: type as RTCSdpType, sdp: `${type}-sdp` };
+    this.signalingState = type === 'offer' ? 'have-local-offer' : 'stable';
+  }
+
+  async setRemoteDescription(description: RTCSessionDescriptionInit) {
+    this.remoteDescription = description;
+    this.signalingState = description.type === 'offer' ? 'have-remote-offer' : 'stable';
+  }
+
+  candidates: RTCIceCandidateInit[] = [];
+  async addIceCandidate(candidate: RTCIceCandidateInit) {
+    if (this.signalingState === 'stable' && !this.remoteDescription) {
+      throw new Error('no remote description');
+    }
+    this.candidates.push(candidate);
+  }
+
+  close() {
+    this.closed = true;
+  }
+
+  /** Test helper: pretend ICE produced a candidate. */
+  emitCandidate(candidate: RTCIceCandidateInit) {
+    this.onicecandidate?.({ candidate: { toJSON: () => candidate } });
+  }
+}
+
+function makeMesh(bus: InMemoryBus, dataset: object, selfId: string, callId: string) {
+  const port = createInMemoryEphemeralPort(bus, selfId);
+  const scope = port(dataset);
+  if (!scope) throw new Error('expected a scope');
+
+  const connections: FakePeerConnection[] = [];
+  const streams: Map<string, MediaStream>[] = [];
+  const errors: { context: string; error: unknown }[] = [];
+
+  const mesh = createCallMesh({
+    callId,
+    selfId,
+    channel: scope.channel('rtc', { coalesce: false }),
+    createPeerConnection: () => {
+      const pc = new FakePeerConnection();
+      connections.push(pc);
+      return pc as unknown as RTCPeerConnection;
+    },
+    onRemoteStreamsChanged: (s) => streams.push(s),
+    onError: (context, error) => errors.push({ context, error }),
+  });
+
+  return { mesh, connections, streams, errors };
+}
+
+/** Let queued microtasks and promise chains settle. */
+const settle = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+// ── Tests ───────────────────────────────────────────────────────────────────
+
+describe('call mesh', () => {
+  let bus: InMemoryBus;
+  const dataset = { id: 'space-1' };
+  const callId = spaceCallId('neighbourhood://abc');
+
+  beforeEach(() => {
+    bus = new InMemoryBus();
+  });
+
+  it('connects two peers, with exactly one surviving offer', async () => {
+    const alice = makeMesh(bus, dataset, 'did:alice', callId);
+    const bob = makeMesh(bus, dataset, 'did:bob', callId);
+
+    // Presence says both are in the call. Note neither sent a join message — see protocol.ts.
+    alice.mesh.setRoster(['did:alice', 'did:bob']);
+    bob.mesh.setRoster(['did:alice', 'did:bob']);
+    await settle();
+
+    expect(alice.connections).toHaveLength(1);
+    expect(bob.connections).toHaveLength(1);
+
+    // Nothing has been sent yet — no tracks, so nothing fired negotiationneeded.
+    await alice.mesh.setOutboundTrack('audio', { kind: 'audio' } as MediaStreamTrack);
+    await settle();
+    await settle();
+
+    // Alice offered; Bob answered; both ended stable rather than stuck mid-negotiation.
+    expect(bob.connections[0].remoteDescription?.type).toBe('offer');
+    expect(alice.connections[0].remoteDescription?.type).toBe('answer');
+    expect(alice.connections[0].signalingState).toBe('stable');
+    expect(bob.connections[0].signalingState).toBe('stable');
+    expect(alice.errors).toEqual([]);
+    expect(bob.errors).toEqual([]);
+  });
+
+  it('survives glare: both peers offering at once still converges', async () => {
+    const alice = makeMesh(bus, dataset, 'did:alice', callId);
+    const bob = makeMesh(bus, dataset, 'did:bob', callId);
+
+    alice.mesh.setRoster(['did:alice', 'did:bob']);
+    bob.mesh.setRoster(['did:alice', 'did:bob']);
+    await settle();
+
+    // Both add a track in the same tick — the collision perfect negotiation exists to resolve.
+    await Promise.all([
+      alice.mesh.setOutboundTrack('audio', { kind: 'audio' } as MediaStreamTrack),
+      bob.mesh.setOutboundTrack('audio', { kind: 'audio' } as MediaStreamTrack),
+    ]);
+    await settle();
+    await settle();
+    await settle();
+
+    // 'did:bob' > 'did:alice', so Bob is polite and yields. Both must end stable: the failure this
+    // guards is the symmetric one where each ignores the other and neither ever connects.
+    expect(alice.connections[0].signalingState).toBe('stable');
+    expect(bob.connections[0].signalingState).toBe('stable');
+    expect(alice.errors).toEqual([]);
+    expect(bob.errors).toEqual([]);
+  });
+
+  it('tears down a connection when presence drops the peer from the roster', async () => {
+    const alice = makeMesh(bus, dataset, 'did:alice', callId);
+    makeMesh(bus, dataset, 'did:bob', callId);
+
+    alice.mesh.setRoster(['did:alice', 'did:bob']);
+    await settle();
+    expect(alice.connections[0].closed).toBe(false);
+
+    // Bob's laptop closed. Presence evicts him on TTL; no 'leave' message is ever sent.
+    alice.mesh.setRoster(['did:alice']);
+    expect(alice.connections[0].closed).toBe(true);
+    expect(alice.mesh.remoteStreams().size).toBe(0);
+  });
+
+  it('ignores signalling from an agent the roster does not include', async () => {
+    const alice = makeMesh(bus, dataset, 'did:alice', callId);
+    alice.mesh.setRoster(['did:alice']);
+
+    // A stranger offers out of the blue. Without the roster check this would open a connection.
+    bus.deliver(bus.keyFor(dataset), 'rtc', 'did:mallory', {
+      v: CALL_PROTOCOL_VERSION,
+      call: callId,
+      to: 'did:alice',
+      kind: 'description',
+      description: { type: 'offer', sdp: 'x' },
+    });
+    await settle();
+
+    expect(alice.connections).toHaveLength(0);
+    expect(alice.errors).toEqual([]);
+  });
+
+  it('ignores traffic for a different call in the same space', async () => {
+    const alice = makeMesh(bus, dataset, 'did:alice', callId);
+    const other = spaceCallId('neighbourhood://other');
+    alice.mesh.setRoster(['did:alice', 'did:bob']);
+    await settle();
+
+    const before = alice.connections[0].remoteDescription;
+    bus.deliver(bus.keyFor(dataset), 'rtc', 'did:bob', {
+      v: CALL_PROTOCOL_VERSION,
+      call: other,
+      to: 'did:alice',
+      kind: 'description',
+      description: { type: 'offer', sdp: 'wrong-call' },
+    });
+    await settle();
+
+    // Two calls in one space share a channel, so without the id check a renegotiation in the
+    // anchored call would be applied to the space call's connection.
+    expect(alice.connections[0].remoteDescription).toBe(before);
+  });
+
+  it('replaces rather than re-adds when an outbound track changes', async () => {
+    const alice = makeMesh(bus, dataset, 'did:alice', callId);
+    alice.mesh.setRoster(['did:alice', 'did:bob']);
+    await settle();
+
+    const camera = { kind: 'video' } as MediaStreamTrack;
+    const screen = { kind: 'video' } as MediaStreamTrack;
+
+    await alice.mesh.setOutboundTrack('video', camera);
+    await alice.mesh.setOutboundTrack('video', screen);
+
+    // One sender, swapped — this is what makes camera↔screen instant and renegotiation-free.
+    expect(alice.connections[0].addedTracks).toEqual([camera]);
+    expect(alice.connections[0].getSenders()).toHaveLength(1);
+    expect(alice.connections[0].getSenders()[0].track).toBe(screen);
+  });
+
+  it('sends a peer joining mid-call the media already being sent', async () => {
+    const alice = makeMesh(bus, dataset, 'did:alice', callId);
+    alice.mesh.setRoster(['did:alice']);
+    const track = { kind: 'audio' } as MediaStreamTrack;
+    await alice.mesh.setOutboundTrack('audio', track);
+
+    // Bob arrives after Alice's mic was already on.
+    alice.mesh.setRoster(['did:alice', 'did:bob']);
+    await settle();
+
+    expect(alice.connections[0].addedTracks).toEqual([track]);
+  });
+
+  it('stops negotiating once closed', async () => {
+    const alice = makeMesh(bus, dataset, 'did:alice', callId);
+    alice.mesh.setRoster(['did:alice', 'did:bob']);
+    await settle();
+
+    alice.mesh.close();
+    expect(alice.connections[0].closed).toBe(true);
+
+    bus.deliver(bus.keyFor(dataset), 'rtc', 'did:bob', {
+      v: CALL_PROTOCOL_VERSION,
+      call: callId,
+      to: 'did:alice',
+      kind: 'description',
+      description: { type: 'offer', sdp: 'late' },
+    });
+    await settle();
+
+    expect(alice.errors).toEqual([]);
+  });
+});
+
+describe('protocol parsing', () => {
+  const good = {
+    v: CALL_PROTOCOL_VERSION,
+    call: 'space:x',
+    kind: 'description' as const,
+    description: { type: 'offer' as const, sdp: 'v=0' },
+  };
+
+  it('accepts a well-formed description', () => {
+    expect(parseCallMessage(good)).toEqual(good);
+  });
+
+  it.each([
+    ['a mismatched version', { ...good, v: 99 }],
+    ['a missing call id', { ...good, call: '' }],
+    ['an unknown kind', { ...good, kind: 'chat' }],
+    ['a non-object description', { ...good, description: 'offer' }],
+    ['an invalid sdp type', { ...good, description: { type: 'nonsense', sdp: 'x' } }],
+    ['a null payload', null],
+    ['a string payload', 'offer'],
+  ])('rejects %s', (_label, payload) => {
+    expect(parseCallMessage(payload)).toBeNull();
+  });
+
+  it('derives the same space call id on every peer', () => {
+    // The whole point: no round trip is needed to agree on it, which would be circular.
+    expect(spaceCallId('neighbourhood://abc')).toBe(spaceCallId('neighbourhood://abc'));
+    expect(spaceCallId('neighbourhood://abc')).not.toBe(spaceCallId('neighbourhood://def'));
+  });
+});
diff --git a/packages/modules/call/src/mesh.ts b/packages/modules/call/src/mesh.ts
new file mode 100644
index 00000000..849946b2
--- /dev/null
+++ b/packages/modules/call/src/mesh.ts
@@ -0,0 +1,314 @@
+/**
+ * The peer-connection mesh — one `RTCPeerConnection` per remote participant.
+ *
+ * ## Mesh, not SFU
+ *
+ * Every participant connects to every other, so N participants means N−1 connections each and each
+ * peer uploads its video N−1 times. That ceiling is real — roughly four to six before upstream
+ * bandwidth becomes the limit — and it is the honest choice here, because an SFU is a *server*, and a
+ * local-first app that quietly requires one has stopped being local-first. The alternative is not
+ * "mesh but scalable", it is "someone must run infrastructure".
+ *
+ * ## Membership comes from presence; this file only negotiates
+ *
+ * {@link CallMesh.setRoster} is called with whoever presence says is in the call. Connections are
+ * reconciled against it: appear → connect, disappear → tear down. There is no join or leave message,
+ * because a peer that crashes never sends one. See `protocol.ts`.
+ *
+ * ## Perfect negotiation
+ *
+ * Both peers see each other join at slightly different moments, both add tracks, and both fire
+ * `negotiationneeded` — so offers collide. The mesh implements the standard *perfect negotiation*
+ * pattern: each pair has a **polite** peer and an **impolite** one, decided by comparing ids, which is
+ * deterministic and needs no agreement round-trip (the same lower-id-wins trick the tab coordinator
+ * uses to break leader ties). On collision the impolite peer ignores the incoming offer and the polite
+ * peer rolls back its own. Exactly one offer survives.
+ *
+ * This is also what makes mid-call renegotiation safe, which matters because screen share and
+ * reconnects both trigger it.
+ *
+ * ## Why it types against the DOM's WebRTC classes
+ *
+ * `RTCPeerConnection` and `MediaStream` are W3C interfaces, not a framework — a host that lacks them
+ * has no WebRTC at all, so abstracting over them would buy nothing. The *constructor* is injected all
+ * the same, so tests can drive the whole negotiation with a fake and no browser.
+ */
+import { CALL_PROTOCOL_VERSION, type CallBody, type CallMessage, parseCallMessage } from './protocol';
+
+/** Structurally an `EphemeralChannel`, restated so this module is testable with a fake and carries no
+ *  import-time dependency on the port. */
+export interface SignallingChannel {
+  publish(payload: unknown, to?: { agentId?: string }): void;
+  onMessage(cb: (from: string, payload: unknown) => void): () => void;
+}
+
+export interface CallMeshOptions {
+  /** Which call this mesh serves. A space can host several at once. */
+  callId: string;
+  selfId: string;
+  channel: SignallingChannel;
+  /**
+   * Injected so tests can supply a fake. Defaults to the browser's, with public STUN — no TURN, so
+   * peers behind symmetric NAT will fail to connect. Configurable rather than solved: a TURN server
+   * is infrastructure someone has to run, which is a deployment decision, not a module one.
+   */
+  createPeerConnection?: () => RTCPeerConnection;
+  /** Fired whenever the set of remote streams changes — a peer joined, left, or started sending. */
+  onRemoteStreamsChanged?: (streams: Map<string, MediaStream>) => void;
+  onPeerStateChanged?: (peerId: string, state: RTCPeerConnectionState) => void;
+  /** Reported rather than thrown: one peer failing to negotiate must not take down the call. */
+  onError?: (context: string, error: unknown) => void;
+}
+
+export interface CallMesh {
+  /** Reconcile connections against who presence says is in the call. Excludes this agent. */
+  setRoster(peerIds: string[]): void;
+  /**
+   * Set what this agent sends on a track kind. `null` stops sending that kind.
+   *
+   * Replaces the track on the existing sender where there is one, which is what makes camera↔screen
+   * swapping free: `replaceTrack` does not renegotiate, so the switch is instant and cannot fail
+   * half-way for one peer and not another.
+   */
+  setOutboundTrack(kind: 'audio' | 'video', track: MediaStreamTrack | null): Promise<void>;
+  remoteStreams(): Map<string, MediaStream>;
+  peerStates(): Map<string, RTCPeerConnectionState>;
+  close(): void;
+}
+
+const DEFAULT_ICE_SERVERS: RTCIceServer[] = [{ urls: ['stun:stun.l.google.com:19302'] }];
+
+interface PeerSlot {
+  pc: RTCPeerConnection;
+  /** Decided by id comparison — symmetric, so the two peers always disagree, which is the point. */
+  polite: boolean;
+  makingOffer: boolean;
+  ignoreOffer: boolean;
+  stream: MediaStream;
+}
+
+export function createCallMesh(options: CallMeshOptions): CallMesh {
+  const { callId, selfId, channel } = options;
+  const createPeerConnection =
+    options.createPeerConnection ?? (() => new RTCPeerConnection({ iceServers: DEFAULT_ICE_SERVERS }));
+
+  const slots = new Map<string, PeerSlot>();
+  const states = new Map<string, RTCPeerConnectionState>();
+  const outbound = new Map<'audio' | 'video', MediaStreamTrack | null>();
+  /** One stream for all of this agent's outbound tracks, so a remote peer receives mic and camera
+   *  grouped as one stream rather than two unrelated ones it would have to correlate itself. */
+  const outboundStream = new MediaStream();
+  let closed = false;
+
+  const fail = (context: string, error: unknown) => options.onError?.(context, error);
+
+  const emitStreams = () => {
+    const streams = new Map<string, MediaStream>();
+    for (const [peerId, slot] of slots) streams.set(peerId, slot.stream);
+    options.onRemoteStreamsChanged?.(streams);
+  };
+
+  /**
+   * Addressed twice, on purpose.
+   *
+   * `to` on the publish lets a backend with **native** unicast actually send to one peer. The
+   * recipient is *also* in the payload because `unicast: 'emulated'` means the transport fans out and
+   * filters on receipt — and on a fanout-only transport it would not filter at all, so a third peer
+   * would apply an offer meant for someone else and negotiate a connection nobody asked for. The
+   * duplicated field costs a few bytes and makes the mesh correct on every transport tier.
+   *
+   * It is addressing, never privacy: on an emulated transport every peer still receives the bytes.
+   */
+  const send = (to: string, message: CallBody) => {
+    channel.publish({ v: CALL_PROTOCOL_VERSION, call: callId, to, ...message }, { agentId: to });
+  };
+
+  function connect(peerId: string): PeerSlot {
+    const existing = slots.get(peerId);
+    if (existing) return existing;
+
+    const pc = createPeerConnection();
+    const slot: PeerSlot = {
+      pc,
+      // Comparing ids gives each pair exactly one polite side without a round trip.
+      polite: selfId > peerId,
+      makingOffer: false,
+      ignoreOffer: false,
+      stream: new MediaStream(),
+    };
+    slots.set(peerId, slot);
+
+    pc.onnegotiationneeded = async () => {
+      try {
+        slot.makingOffer = true;
+        // No argument: the browser picks offer or answer from the signaling state, which is what
+        // makes the rolled-back case recover on its own.
+        await pc.setLocalDescription();
+        if (pc.localDescription) send(peerId, { kind: 'description', description: pc.localDescription });
+      } catch (error) {
+        fail(`negotiating with ${peerId}`, error);
+      } finally {
+        slot.makingOffer = false;
+      }
+    };
+
+    pc.onicecandidate = ({ candidate }) => {
+      if (candidate) send(peerId, { kind: 'ice', candidate: candidate.toJSON() });
+    };
+
+    pc.ontrack = ({ track }) => {
+      slot.stream.addTrack(track);
+      // A replaced track (camera → screen) arrives as a new track and the old one ends. Without this
+      // the tile would accumulate dead tracks and keep rendering the first one.
+      track.addEventListener('ended', () => {
+        slot.stream.removeTrack(track);
+        emitStreams();
+      });
+      emitStreams();
+    };
+
+    pc.onconnectionstatechange = () => {
+      states.set(peerId, pc.connectionState);
+      options.onPeerStateChanged?.(peerId, pc.connectionState);
+    };
+
+    // Send whatever we are already sending. A peer joining mid-call must receive our media without
+    // waiting for us to toggle something.
+    for (const [, track] of outbound) {
+      if (!track) continue;
+      try {
+        pc.addTrack(track, outboundStream);
+      } catch (error) {
+        fail(`adding track for ${peerId}`, error);
+      }
+    }
+
+    return slot;
+  }
+
+  function disconnect(peerId: string) {
+    const slot = slots.get(peerId);
+    if (!slot) return;
+    slot.pc.onnegotiationneeded = null;
+    slot.pc.onicecandidate = null;
+    slot.pc.ontrack = null;
+    slot.pc.onconnectionstatechange = null;
+    try {
+      slot.pc.close();
+    } catch (error) {
+      fail(`closing connection to ${peerId}`, error);
+    }
+    slots.delete(peerId);
+    states.delete(peerId);
+  }
+
+  const unsubscribe = channel.onMessage((from, payload) => {
+    if (closed || from === selfId) return;
+
+    const message = parseCallMessage(payload);
+    if (!message || message.call !== callId) return;
+
+    // See `send` — the recipient is carried in the payload so a fanout-only transport cannot cause a
+    // bystander to negotiate.
+    const to = (payload as { to?: unknown }).to;
+    if (typeof to === 'string' && to !== selfId) return;
+
+    // Only negotiate with peers the roster put in the call. Without this, anyone on the channel could
+    // open a connection by sending an offer.
+    const slot = slots.get(from);
+    if (!slot) return;
+
+    void handle(from, slot, message);
+  });
+
+  async function handle(peerId: string, slot: PeerSlot, message: CallMessage) {
+    try {
+      if (message.kind === 'description') {
+        const { description } = message;
+        const collision = description.type === 'offer' && (slot.makingOffer || slot.pc.signalingState !== 'stable');
+
+        // The impolite peer wins a collision by ignoring the other's offer; the polite peer yields,
+        // and `setRemoteDescription` performs the implicit rollback that lets it accept.
+        slot.ignoreOffer = !slot.polite && collision;
+        if (slot.ignoreOffer) return;
+
+        await slot.pc.setRemoteDescription(description);
+        if (description.type === 'offer') {
+          await slot.pc.setLocalDescription();
+          if (slot.pc.localDescription) {
+            send(peerId, { kind: 'description', description: slot.pc.localDescription });
+          }
+        }
+        return;
+      }
+
+      try {
+        await slot.pc.addIceCandidate(message.candidate);
+      } catch (error) {
+        // Candidates for an offer we deliberately ignored will fail, and that is expected — the
+        // connection they belong to was never established. Anything else is real.
+        if (!slot.ignoreOffer) throw error;
+      }
+    } catch (error) {
+      fail(`handling ${message.kind} from ${peerId}`, error);
+    }
+  }
+
+  return {
+    setRoster(peerIds) {
+      if (closed) return;
+      const wanted = new Set(peerIds.filter((id) => id !== selfId));
+
+      for (const peerId of slots.keys()) {
+        if (!wanted.has(peerId)) disconnect(peerId);
+      }
+      for (const peerId of wanted) {
+        if (!slots.has(peerId)) connect(peerId);
+      }
+      emitStreams();
+    },
+
+    async setOutboundTrack(kind, track) {
+      const previous = outbound.get(kind);
+      outbound.set(kind, track);
+      if (previous) outboundStream.removeTrack(previous);
+      if (track) outboundStream.addTrack(track);
+      if (closed) return;
+
+      await Promise.all(
+        [...slots.entries()].map(async ([peerId, slot]) => {
+          try {
+            const sender = slot.pc.getSenders().find((s) => s.track?.kind === kind);
+            if (sender) {
+              // Does not renegotiate — this is why camera↔screen switching is instant.
+              await sender.replaceTrack(track);
+            } else if (track) {
+              // First track of this kind: adding a sender *does* fire `negotiationneeded`, which
+              // perfect negotiation above resolves.
+              slot.pc.addTrack(track, new MediaStream([track]));
+            }
+          } catch (error) {
+            fail(`setting ${kind} track for ${peerId}`, error);
+          }
+        }),
+      );
+    },
+
+    remoteStreams() {
+      const streams = new Map<string, MediaStream>();
+      for (const [peerId, slot] of slots) streams.set(peerId, slot.stream);
+      return streams;
+    },
+
+    peerStates() {
+      return new Map(states);
+    },
+
+    close() {
+      closed = true;
+      unsubscribe();
+      for (const peerId of [...slots.keys()]) disconnect(peerId);
+      emitStreams();
+    },
+  };
+}
diff --git a/packages/modules/call/src/protocol.ts b/packages/modules/call/src/protocol.ts
new file mode 100644
index 00000000..3284a21d
--- /dev/null
+++ b/packages/modules/call/src/protocol.ts
@@ -0,0 +1,112 @@
+/**
+ * The call module's wire protocol — the WebRTC handshake, and nothing else.
+ *
+ * ## What is deliberately absent: membership
+ *
+ * There is no `join`, no `leave`, and no roster message. Who is in a call is already expressed by
+ * presence, as an activity:
+ *
+ * ```ts
+ * { type: 'call'; id: string; anchor?: Focus; media?: MediaSettings }
+ * ```
+ *
+ * The mesh reconciles against that roster: a peer that appears gets a connection, a peer that
+ * disappears has its connection torn down. This is not a shortcut — it is the only version that
+ * survives contact with reality. A message-based roster breaks on exactly the cases calls hit most:
+ * a closed laptop, a killed tab, a network partition. Each leaves a participant who never sent
+ * `leave`, and the call shows a frozen tile forever. Presence expires on TTL, so a dead peer leaves
+ * on its own, and its activities go with it.
+ *
+ * The consequence worth internalising: **this channel is not authoritative about anything.** Drop
+ * every message on it and the call fails to connect but the roster stays correct. That is the right
+ * way round.
+ *
+ * ## Versioning
+ *
+ * `v` is checked on receipt and mismatches are dropped, as in presence. A peer running a newer
+ * protocol should fail to connect visibly rather than half-negotiate into a broken session.
+ */
+
+export const CALL_PROTOCOL_VERSION = 1;
+
+/**
+ * A signalling message.
+ *
+ * `call` scopes every message to one call id, because a space can host several at once (the
+ * space-wide call, plus a call anchored to a particular node). Without it a renegotiation in one
+ * call would be applied to the peer connection of another.
+ *
+ * SDP travels as the plain `{ type, sdp }` init object rather than a class instance — it has to
+ * survive JSON serialisation across the transport, and `RTCSessionDescription` does not.
+ */
+export type CallMessage = CallEnvelope & CallBody;
+
+/** What every message carries regardless of kind. */
+export interface CallEnvelope {
+  v: number;
+  call: string;
+}
+
+/**
+ * The kind-specific half, split out so it can be named on its own.
+ *
+ * `Omit<CallMessage, 'v' | 'call'>` would not do: `Omit` on a union collapses it to the properties
+ * they share, losing the discriminant and with it the narrowing that makes handling each kind safe.
+ */
+export type CallBody =
+  { kind: 'description'; description: RTCSessionDescriptionInit } | { kind: 'ice'; candidate: RTCIceCandidateInit };
+
+/**
+ * Narrow an untrusted payload off the transport.
+ *
+ * Everything arriving here was published by another agent, so it is shape-checked before use. The
+ * sender id is supplied by the transport rather than the payload — a self-reported `from` would be
+ * trivially spoofable, and `EphemeralCapabilities.authenticatedSender` is what says whether even the
+ * transport's version can be trusted.
+ */
+export function parseCallMessage(payload: unknown): CallMessage | null {
+  if (typeof payload !== 'object' || payload === null) return null;
+  const msg = payload as Partial<CallMessage>;
+
+  if (msg.v !== CALL_PROTOCOL_VERSION) return null;
+  if (typeof msg.call !== 'string' || !msg.call) return null;
+
+  if (msg.kind === 'description') {
+    const description = (msg as { description?: unknown }).description;
+    if (typeof description !== 'object' || description === null) return null;
+    const { type, sdp } = description as RTCSessionDescriptionInit;
+    if (type !== 'offer' && type !== 'answer' && type !== 'pranswer' && type !== 'rollback') return null;
+    if (sdp !== undefined && typeof sdp !== 'string') return null;
+    return { v: msg.v, call: msg.call, kind: 'description', description: { type, sdp } };
+  }
+
+  if (msg.kind === 'ice') {
+    const candidate = (msg as { candidate?: unknown }).candidate;
+    if (typeof candidate !== 'object' || candidate === null) return null;
+    return { v: msg.v, call: msg.call, kind: 'ice', candidate: candidate as RTCIceCandidateInit };
+  }
+
+  return null;
+}
+
+/**
+ * The id of the space-wide call in a dataset.
+ *
+ * Derived rather than generated, so every peer computes the same id without having to agree on one
+ * first — the chicken-and-egg a generated id would create (you cannot signal to agree on the channel
+ * you would signal over).
+ */
+export function spaceCallId(datasetUri: string): string {
+  return `space:${datasetUri}`;
+}
+
+/**
+ * The id of a call anchored to a particular node — "the call on this post".
+ *
+ * Same derivation, same reason. Anchoring is what lets several calls coexist in one space, which
+ * `callRosters()` already groups for free because presence models activities as a list rather than a
+ * single value.
+ */
+export function anchoredCallId(datasetUri: string, nodeId: string): string {
+  return `node:${datasetUri}:${nodeId}`;
+}
diff --git a/packages/modules/call/src/store.ts b/packages/modules/call/src/store.ts
new file mode 100644
index 00000000..5f1725b1
--- /dev/null
+++ b/packages/modules/call/src/store.ts
@@ -0,0 +1,300 @@
+/**
+ * The call store — what a template can read and drive.
+ *
+ * Written against `ModuleStoreDeps` alone: `signal` and `effect` for reactivity, `ephemeral` for
+ * transport, `presence` for membership, `dataset`/`selfId` for scope. It imports no framework and no
+ * backend, which is what lets the whole module ship as schema fragments.
+ *
+ * ## The shape of the thing
+ *
+ * Three collaborators, each ignorant of the others' failure modes:
+ *
+ * - **presence** owns *who is in the call* (an activity, expiring on TTL)
+ * - **the mesh** owns *connections to them* (reconciled against that roster)
+ * - **the media controller** owns *this agent's devices*
+ *
+ * This file is the only place they meet, and the meeting is deliberately one-directional: presence
+ * drives the mesh, and media drives what the mesh sends. Nothing flows back — the mesh never tells
+ * presence who is in the call, because a connection failing is not the same as a peer leaving.
+ */
+import type { Focus, MediaSettings, ModuleStoreDeps, Peer } from '@we/schema-shared';
+import { activitiesOfType, planEphemeral } from '@we/schema-shared';
+
+import { createMediaController, type MediaController } from './media';
+import { type CallMesh, createCallMesh } from './mesh';
+import { anchoredCallId, spaceCallId } from './protocol';
+
+/**
+ * One participant, flattened for a template.
+ *
+ * Flattened rather than nested so a fragment can reach everything with a plain `$tile.stream` —
+ * the same reason `PresentAgent` flattens `tone` onto the peer.
+ */
+export interface CallTile {
+  id: string;
+  did: string;
+  name?: string;
+  avatar?: string;
+  /** `null` until that peer's media arrives, which is normal for the first second or two. */
+  stream: MediaStream | null;
+  isSelf: boolean;
+  /** Render `contain` rather than `cover` — a cropped desktop is unreadable. From the roster. */
+  isScreen: boolean;
+  audioEnabled: boolean;
+  videoEnabled: boolean;
+  /** `undefined` for the self tile, which has no connection to itself. */
+  connection?: RTCPeerConnectionState;
+}
+
+export interface CallStoreDeps extends ModuleStoreDeps {
+  /** Overridable for tests; defaults to the browser's WebRTC and media APIs. */
+  createPeerConnection?: () => RTCPeerConnection;
+}
+
+export function createCallStore(deps: CallStoreDeps) {
+  const { signal, effect, dataset, datasetUri, selfId, ephemeral, presence } = deps;
+
+  const [callId, setCallId] = signal<string | null>(null);
+  const [tiles, setTiles] = signal<CallTile[]>([]);
+  const [expanded, setExpanded] = signal(false);
+  const [media, setMedia] = signal<MediaSettings>({
+    audioEnabled: true,
+    videoEnabled: true,
+    screenShareEnabled: false,
+  });
+  /** Surfaced rather than logged: "the call cannot start here" is something the user must see. */
+  const [problem, setProblem] = signal<string | null>(null);
+
+  let mesh: CallMesh | null = null;
+  let controller: MediaController | null = null;
+  let remoteStreams = new Map<string, MediaStream>();
+  let peerStates = new Map<string, RTCPeerConnectionState>();
+
+  const roster = (): Peer[] => {
+    const id = callId();
+    if (!id || !presence) return [];
+    return activitiesOfType(presence.peers(), 'call')
+      .filter(({ activity }) => activity.id === id)
+      .map(({ peer }) => peer);
+  };
+
+  /**
+   * Rebuild the tile list from the three sources.
+   *
+   * Driven by the roster, not by the connections: a peer who has joined but not yet negotiated gets a
+   * tile with a null stream. Driving it from connections instead would make joiners invisible until
+   * their media arrived, which reads as a broken call during the very seconds it is working.
+   */
+  function rebuildTiles() {
+    const id = callId();
+    const me = selfId?.() ?? null;
+    if (!id) {
+      setTiles([]);
+      return;
+    }
+
+    const next: CallTile[] = [];
+
+    if (me) {
+      const state = controller?.state();
+      next.push({
+        id: me,
+        did: me,
+        stream: controller?.displayStream() ?? null,
+        isSelf: true,
+        isScreen: state?.screenShareEnabled ?? false,
+        audioEnabled: state?.audioEnabled ?? false,
+        videoEnabled: state?.videoEnabled ?? false,
+      });
+    }
+
+    for (const { peer, activity } of activitiesOfType(presence?.peers() ?? [], 'call')) {
+      if (activity.id !== id || peer.agentId === me) continue;
+      const settings = activity.media;
+      next.push({
+        id: peer.agentId,
+        did: peer.agentId,
+        stream: remoteStreams.get(peer.agentId) ?? null,
+        isSelf: false,
+        // Read from the roster, never inferred from the track — the sender is the only one who knows
+        // whether the video it is sending is a camera or a desktop.
+        isScreen: settings?.screenShareEnabled ?? false,
+        audioEnabled: settings?.audioEnabled ?? true,
+        videoEnabled: settings?.videoEnabled ?? true,
+        connection: peerStates.get(peer.agentId),
+      });
+    }
+
+    setTiles(next);
+  }
+
+  /** Republish the call activity so peers see mute/camera/screen changes. */
+  function publishActivity(anchor?: Focus) {
+    const id = callId();
+    if (!id || !presence) return;
+    presence.setActivity({ type: 'call', id, media: media(), ...(anchor ? { anchor } : {}) });
+  }
+
+  function teardown() {
+    const id = callId();
+    mesh?.close();
+    mesh = null;
+    controller?.stop();
+    controller = null;
+    remoteStreams = new Map();
+    peerStates = new Map();
+    if (id) presence?.clearActivity('call', id);
+    setCallId(null);
+    setExpanded(false);
+    setTiles([]);
+  }
+
+  async function join(id: string, anchor?: Focus) {
+    if (callId() === id) return;
+    if (callId()) teardown();
+
+    setProblem(null);
+
+    const handle = dataset?.() ?? null;
+    const me = selfId?.() ?? null;
+    if (!handle || !me) {
+      setProblem('A call needs a space and a signed-in agent.');
+      return;
+    }
+    if (!ephemeral || !presence) {
+      setProblem('This host has no transport for calls.');
+      return;
+    }
+
+    const scope = ephemeral(handle);
+    if (!scope) {
+      // A personal space has no neighbourhood — there is nobody to call. Say so rather than
+      // presenting controls that will never connect.
+      setProblem('Calls need a shared space. This one is personal.');
+      return;
+    }
+
+    // Refuse loudly rather than half-working, the same discipline as `planQuery`. A transport with
+    // `unicast: 'none'` would deliver every offer to everyone, and each bystander would negotiate a
+    // connection nobody asked for.
+    //
+    // `confidential` is deliberately *not* requested. It would be the honest flag — an SDP offer
+    // names your host candidates — but demanding native unicast would refuse to run on AD4M, whose
+    // addressing is emulated. The trade is stated rather than hidden: on an emulated transport,
+    // everyone in the space can see the handshake, and the media itself is still DTLS-encrypted
+    // end-to-end regardless.
+    const plan = planEphemeral({ consumer: 'call', unicast: 'emulated' }, scope.capabilities);
+    if (!plan.runnable) {
+      setProblem(plan.gaps.map((gap) => gap.note).join(' '));
+      return;
+    }
+
+    setCallId(id);
+
+    // coalesce: false, emphatically. Presence heartbeats are last-write-wins so a dropped one costs
+    // nothing; an SDP offer dropped because the previous send was slow is simply lost, and that peer
+    // never connects.
+    const channel = scope.channel('rtc', { coalesce: false });
+
+    mesh = createCallMesh({
+      callId: id,
+      selfId: me,
+      channel,
+      createPeerConnection: deps.createPeerConnection,
+      onRemoteStreamsChanged: (streams) => {
+        remoteStreams = streams;
+        rebuildTiles();
+      },
+      onPeerStateChanged: (peerId, state) => {
+        peerStates.set(peerId, state);
+        rebuildTiles();
+      },
+      onError: (context, error) => console.error(`call: ${context}`, error),
+    });
+
+    controller = createMediaController({
+      onTrackChanged: (kind, track) => void mesh?.setOutboundTrack(kind, track),
+      onStateChanged: (state) => {
+        setMedia({ ...state });
+        publishActivity(anchor);
+        rebuildTiles();
+      },
+      onError: (context, error) => console.error(`call: ${context}`, error),
+    });
+
+    // Announce before acquiring devices: joining should be visible to peers immediately, and the
+    // permission prompt can take as long as the user takes.
+    publishActivity(anchor);
+    rebuildTiles();
+
+    await controller.start();
+  }
+
+  // Reconcile the mesh against the roster. This is the whole membership mechanism — see mesh.ts.
+  effect?.(() => {
+    const peers = roster();
+    if (!mesh) return;
+    mesh.setRoster(peers.map((peer) => peer.agentId));
+    rebuildTiles();
+  });
+
+  // Leaving the space leaves the call. Staying connected to a call in a space you have navigated out
+  // of is a surprise, and the transport scope is torn down under us anyway.
+  effect?.(() => {
+    const handle = dataset?.();
+    if (!handle && callId()) teardown();
+  });
+
+  return {
+    // ── State ────────────────────────────────────────────────────────────────
+    callId,
+    tiles,
+    expanded,
+    media,
+    problem,
+    /** True when this agent is in a call — the call bar's visibility condition. */
+    active: () => callId() !== null,
+    /** Everyone in the space-wide call, whether or not this agent has joined — so the bar can offer
+     *  "3 in a call · Join" rather than only appearing once you are already in one. */
+    ongoing: () => {
+      const uri = datasetUri?.() ?? null;
+      if (!uri || !presence) return [];
+      const id = spaceCallId(uri);
+      return activitiesOfType(presence.peers(), 'call')
+        .filter(({ activity }) => activity.id === id)
+        .map(({ peer }) => peer);
+    },
+
+    // ── Actions ──────────────────────────────────────────────────────────────
+    joinSpaceCall: () => {
+      const uri = datasetUri?.() ?? null;
+      if (!uri) {
+        setProblem('A call needs a space.');
+        return;
+      }
+      void join(spaceCallId(uri));
+    },
+
+    /** "Call on this post" — a second call in the same space, which `callRosters` groups for free. */
+    joinAnchoredCall: (nodeId: string) => {
+      const uri = datasetUri?.() ?? null;
+      if (!uri || !nodeId) {
+        setProblem('A call needs a space and something to anchor to.');
+        return;
+      }
+      void join(anchoredCallId(uri, nodeId), { datasetUri: uri, nodeId });
+    },
+
+    leave: teardown,
+
+    toggleAudio: () => controller?.setAudioEnabled(!media().audioEnabled),
+    toggleVideo: () => controller?.setVideoEnabled(!media().videoEnabled),
+    toggleScreenShare: () => {
+      if (media().screenShareEnabled) controller?.stopScreenShare();
+      else void controller?.startScreenShare();
+    },
+    toggleStage: () => setExpanded(!expanded()),
+    closeStage: () => setExpanded(false),
+    dismissProblem: () => setProblem(null),
+  };
+}
diff --git a/packages/modules/call/src/test-setup.ts b/packages/modules/call/src/test-setup.ts
new file mode 100644
index 00000000..536d9abe
--- /dev/null
+++ b/packages/modules/call/src/test-setup.ts
@@ -0,0 +1,30 @@
+/**
+ * `MediaStream` for a Node test run.
+ *
+ * The mesh groups its outbound tracks into one stream and collects each peer's inbound tracks into
+ * another, so it constructs `MediaStream` even when no media exists. That is a browser global with no
+ * Node equivalent and none in jsdom either.
+ *
+ * Stubbed here rather than injected as a factory: the mesh's use of it is real behaviour worth
+ * keeping honest in the signature, and a `createMediaStream` option would exist purely for tests.
+ */
+class FakeMediaStream {
+  #tracks: unknown[];
+  constructor(tracks: unknown[] = []) {
+    this.#tracks = [...tracks];
+  }
+  getTracks() {
+    return [...this.#tracks];
+  }
+  addTrack(track: unknown) {
+    if (!this.#tracks.includes(track)) this.#tracks.push(track);
+  }
+  removeTrack(track: unknown) {
+    const i = this.#tracks.indexOf(track);
+    if (i !== -1) this.#tracks.splice(i, 1);
+  }
+}
+
+if (!(globalThis as { MediaStream?: unknown }).MediaStream) {
+  (globalThis as { MediaStream?: unknown }).MediaStream = FakeMediaStream;
+}
diff --git a/packages/modules/call/tsconfig.json b/packages/modules/call/tsconfig.json
new file mode 100644
index 00000000..e5758777
--- /dev/null
+++ b/packages/modules/call/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    // The mesh drives RTCPeerConnection and MediaStream, so it needs the browser lib even though
+    // nothing here touches the DOM directly.
+    "lib": ["ES2022", "DOM"]
+  },
+  "include": ["src/**/*"]
+}
diff --git a/packages/modules/call/tsup.config.ts b/packages/modules/call/tsup.config.ts
new file mode 100644
index 00000000..8ae9f1ac
--- /dev/null
+++ b/packages/modules/call/tsup.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['esm'],
+  dts: true,
+  sourcemap: true,
+  clean: true,
+  target: 'es2022',
+  splitting: false,
+  treeshake: true,
+  external: ['@we/schema-shared'],
+});
diff --git a/packages/modules/call/vitest.config.ts b/packages/modules/call/vitest.config.ts
new file mode 100644
index 00000000..ceee92ca
--- /dev/null
+++ b/packages/modules/call/vitest.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'node',
+    setupFiles: ['./src/test-setup.ts'],
+  },
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1feb63a8..999f4dc8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -444,6 +444,9 @@ importers:
       '@we/models':
         specifier: workspace:*
         version: link:../models
+      '@we/module-call':
+        specifier: workspace:*
+        version: link:../modules/call
       '@we/module-globe':
         specifier: workspace:*
         version: link:../modules/globe
@@ -865,6 +868,24 @@ importers:
         specifier: ^8.5.1
         version: 8.5.1(postcss@8.5.16)(tsx@4.23.0)(typescript@5.9.3)(yaml@2.9.0)
 
+  packages/modules/call:
+    devDependencies:
+      '@we/cli':
+        specifier: workspace:*
+        version: link:../../cli
+      '@we/schema-shared':
+        specifier: workspace:*
+        version: link:../../schema-system/shared
+      tsup:
+        specifier: ^8.0.0
+        version: 8.5.1(postcss@8.5.16)(tsx@4.23.0)(typescript@5.9.3)(yaml@2.9.0)
+      typescript:
+        specifier: ^5.3.3
+        version: 5.9.3
+      vitest:
+        specifier: ^1.0.0
+        version: 1.6.1(@types/node@24.13.2)(happy-dom@20.10.6)(jsdom@27.4.0)(sass@1.101.0)
+
   packages/modules/globe:
     dependencies:
       '@we/cesium-layers':
@@ -1342,6 +1363,12 @@ packages:
     resolution: {integrity: sha512-fKpv9kg4SPmt+hY7SVBnIYULE9QJl8L3sCfcBsnqbJwwBwAeTLokJ9TRt9y7bK0JAzIW2y78TVVjvnQEms/yyA==}
     engines: {node: '>=16.4'}
 
+  '@esbuild/aix-ppc64@0.21.5':
+    resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [aix]
+
   '@esbuild/aix-ppc64@0.24.2':
     resolution: {integrity: sha512-thpVCb/rhxE/BnMLQ7GReQLLN8q9qbHmI55F4489/ByVg2aQaQ6kbcLb6FHkocZzQhxc4gx0sCk0tJkKBFzDhA==}
     engines: {node: '>=18'}
@@ -1366,6 +1393,12 @@ packages:
     cpu: [ppc64]
     os: [aix]
 
+  '@esbuild/android-arm64@0.21.5':
+    resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+
   '@esbuild/android-arm64@0.24.2':
     resolution: {integrity: sha512-cNLgeqCqV8WxfcTIOeL4OAtSmL8JjcN6m09XIgro1Wi7cF4t/THaWEa7eL5CMoMBdjoHOTh/vwTO/o2TRXIyzg==}
     engines: {node: '>=18'}
@@ -1390,6 +1423,12 @@ packages:
     cpu: [arm64]
     os: [android]
 
+  '@esbuild/android-arm@0.21.5':
+    resolution: {integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+
   '@esbuild/android-arm@0.24.2':
     resolution: {integrity: sha512-tmwl4hJkCfNHwFB3nBa8z1Uy3ypZpxqxfTQOcHX+xRByyYgunVbZ9MzUUfb0RxaHIMnbHagwAxuTL+tnNM+1/Q==}
     engines: {node: '>=18'}
@@ -1414,6 +1453,12 @@ packages:
     cpu: [arm]
     os: [android]
 
+  '@esbuild/android-x64@0.21.5':
+    resolution: {integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+
   '@esbuild/android-x64@0.24.2':
     resolution: {integrity: sha512-B6Q0YQDqMx9D7rvIcsXfmJfvUYLoP722bgfBlO5cGvNVb5V/+Y7nhBE3mHV9OpxBf4eAS2S68KZztiPaWq4XYw==}
     engines: {node: '>=18'}
@@ -1438,6 +1483,12 @@ packages:
     cpu: [x64]
     os: [android]
 
+  '@esbuild/darwin-arm64@0.21.5':
+    resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+
   '@esbuild/darwin-arm64@0.24.2':
     resolution: {integrity: sha512-kj3AnYWc+CekmZnS5IPu9D+HWtUI49hbnyqk0FLEJDbzCIQt7hg7ucF1SQAilhtYpIujfaHr6O0UHlzzSPdOeA==}
     engines: {node: '>=18'}
@@ -1462,6 +1513,12 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
+  '@esbuild/darwin-x64@0.21.5':
+    resolution: {integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+
   '@esbuild/darwin-x64@0.24.2':
     resolution: {integrity: sha512-WeSrmwwHaPkNR5H3yYfowhZcbriGqooyu3zI/3GGpF8AyUdsrrP0X6KumITGA9WOyiJavnGZUwPGvxvwfWPHIA==}
     engines: {node: '>=18'}
@@ -1486,6 +1543,12 @@ packages:
     cpu: [x64]
     os: [darwin]
 
+  '@esbuild/freebsd-arm64@0.21.5':
+    resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+
   '@esbuild/freebsd-arm64@0.24.2':
     resolution: {integrity: sha512-UN8HXjtJ0k/Mj6a9+5u6+2eZ2ERD7Edt1Q9IZiB5UZAIdPnVKDoG7mdTVGhHJIeEml60JteamR3qhsr1r8gXvg==}
     engines: {node: '>=18'}
@@ -1510,6 +1573,12 @@ packages:
     cpu: [arm64]
     os: [freebsd]
 
+  '@esbuild/freebsd-x64@0.21.5':
+    resolution: {integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+
   '@esbuild/freebsd-x64@0.24.2':
     resolution: {integrity: sha512-TvW7wE/89PYW+IevEJXZ5sF6gJRDY/14hyIGFXdIucxCsbRmLUcjseQu1SyTko+2idmCw94TgyaEZi9HUSOe3Q==}
     engines: {node: '>=18'}
@@ -1534,6 +1603,12 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
+  '@esbuild/linux-arm64@0.21.5':
+    resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+
   '@esbuild/linux-arm64@0.24.2':
     resolution: {integrity: sha512-7HnAD6074BW43YvvUmE/35Id9/NB7BeX5EoNkK9obndmZBUk8xmJJeU7DwmUeN7tkysslb2eSl6CTrYz6oEMQg==}
     engines: {node: '>=18'}
@@ -1558,6 +1633,12 @@ packages:
     cpu: [arm64]
     os: [linux]
 
+  '@esbuild/linux-arm@0.21.5':
+    resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+
   '@esbuild/linux-arm@0.24.2':
     resolution: {integrity: sha512-n0WRM/gWIdU29J57hJyUdIsk0WarGd6To0s+Y+LwvlC55wt+GT/OgkwoXCXvIue1i1sSNWblHEig00GBWiJgfA==}
     engines: {node: '>=18'}
@@ -1582,6 +1663,12 @@ packages:
     cpu: [arm]
     os: [linux]
 
+  '@esbuild/linux-ia32@0.21.5':
+    resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+
   '@esbuild/linux-ia32@0.24.2':
     resolution: {integrity: sha512-sfv0tGPQhcZOgTKO3oBE9xpHuUqguHvSo4jl+wjnKwFpapx+vUDcawbwPNuBIAYdRAvIDBfZVvXprIj3HA+Ugw==}
     engines: {node: '>=18'}
@@ -1606,6 +1693,12 @@ packages:
     cpu: [ia32]
     os: [linux]
 
+  '@esbuild/linux-loong64@0.21.5':
+    resolution: {integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+
   '@esbuild/linux-loong64@0.24.2':
     resolution: {integrity: sha512-CN9AZr8kEndGooS35ntToZLTQLHEjtVB5n7dl8ZcTZMonJ7CCfStrYhrzF97eAecqVbVJ7APOEe18RPI4KLhwQ==}
     engines: {node: '>=18'}
@@ -1630,6 +1723,12 @@ packages:
     cpu: [loong64]
     os: [linux]
 
+  '@esbuild/linux-mips64el@0.21.5':
+    resolution: {integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+
   '@esbuild/linux-mips64el@0.24.2':
     resolution: {integrity: sha512-iMkk7qr/wl3exJATwkISxI7kTcmHKE+BlymIAbHO8xanq/TjHaaVThFF6ipWzPHryoFsesNQJPE/3wFJw4+huw==}
     engines: {node: '>=18'}
@@ -1654,6 +1753,12 @@ packages:
     cpu: [mips64el]
     os: [linux]
 
+  '@esbuild/linux-ppc64@0.21.5':
+    resolution: {integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+
   '@esbuild/linux-ppc64@0.24.2':
     resolution: {integrity: sha512-shsVrgCZ57Vr2L8mm39kO5PPIb+843FStGt7sGGoqiiWYconSxwTiuswC1VJZLCjNiMLAMh34jg4VSEQb+iEbw==}
     engines: {node: '>=18'}
@@ -1678,6 +1783,12 @@ packages:
     cpu: [ppc64]
     os: [linux]
 
+  '@esbuild/linux-riscv64@0.21.5':
+    resolution: {integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+
   '@esbuild/linux-riscv64@0.24.2':
     resolution: {integrity: sha512-4eSFWnU9Hhd68fW16GD0TINewo1L6dRrB+oLNNbYyMUAeOD2yCK5KXGK1GH4qD/kT+bTEXjsyTCiJGHPZ3eM9Q==}
     engines: {node: '>=18'}
@@ -1702,6 +1813,12 @@ packages:
     cpu: [riscv64]
     os: [linux]
 
+  '@esbuild/linux-s390x@0.21.5':
+    resolution: {integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+
   '@esbuild/linux-s390x@0.24.2':
     resolution: {integrity: sha512-S0Bh0A53b0YHL2XEXC20bHLuGMOhFDO6GN4b3YjRLK//Ep3ql3erpNcPlEFed93hsQAjAQDNsvcK+hV90FubSw==}
     engines: {node: '>=18'}
@@ -1726,6 +1843,12 @@ packages:
     cpu: [s390x]
     os: [linux]
 
+  '@esbuild/linux-x64@0.21.5':
+    resolution: {integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+
   '@esbuild/linux-x64@0.24.2':
     resolution: {integrity: sha512-8Qi4nQcCTbLnK9WoMjdC9NiTG6/E38RNICU6sUNqK0QFxCYgoARqVqxdFmWkdonVsvGqWhmm7MO0jyTqLqwj0Q==}
     engines: {node: '>=18'}
@@ -1774,6 +1897,12 @@ packages:
     cpu: [arm64]
     os: [netbsd]
 
+  '@esbuild/netbsd-x64@0.21.5':
+    resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+
   '@esbuild/netbsd-x64@0.24.2':
     resolution: {integrity: sha512-VefFaQUc4FMmJuAxmIHgUmfNiLXY438XrL4GDNV1Y1H/RW3qow68xTwjZKfj/+Plp9NANmzbH5R40Meudu8mmw==}
     engines: {node: '>=18'}
@@ -1822,6 +1951,12 @@ packages:
     cpu: [arm64]
     os: [openbsd]
 
+  '@esbuild/openbsd-x64@0.21.5':
+    resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+
   '@esbuild/openbsd-x64@0.24.2':
     resolution: {integrity: sha512-+iDS6zpNM6EnJyWv0bMGLWSWeXGN/HTaF/LXHXHwejGsVi+ooqDfMCCTerNFxEkM3wYVcExkeGXNqshc9iMaOA==}
     engines: {node: '>=18'}
@@ -1864,6 +1999,12 @@ packages:
     cpu: [arm64]
     os: [openharmony]
 
+  '@esbuild/sunos-x64@0.21.5':
+    resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+
   '@esbuild/sunos-x64@0.24.2':
     resolution: {integrity: sha512-hTdsW27jcktEvpwNHJU4ZwWFGkz2zRJUz8pvddmXPtXDzVKTTINmlmga3ZzwcuMpUvLw7JkLy9QLKyGpD2Yxig==}
     engines: {node: '>=18'}
@@ -1888,6 +2029,12 @@ packages:
     cpu: [x64]
     os: [sunos]
 
+  '@esbuild/win32-arm64@0.21.5':
+    resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+
   '@esbuild/win32-arm64@0.24.2':
     resolution: {integrity: sha512-LihEQ2BBKVFLOC9ZItT9iFprsE9tqjDjnbulhHoFxYQtQfai7qfluVODIYxt1PgdoyQkz23+01rzwNwYfutxUQ==}
     engines: {node: '>=18'}
@@ -1912,6 +2059,12 @@ packages:
     cpu: [arm64]
     os: [win32]
 
+  '@esbuild/win32-ia32@0.21.5':
+    resolution: {integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+
   '@esbuild/win32-ia32@0.24.2':
     resolution: {integrity: sha512-q+iGUwfs8tncmFC9pcnD5IvRHAzmbwQ3GPS5/ceCyHdjXubwQWI12MKWSNSMYLJMq23/IUCvJMS76PDqXe1fxA==}
     engines: {node: '>=18'}
@@ -1936,6 +2089,12 @@ packages:
     cpu: [ia32]
     os: [win32]
 
+  '@esbuild/win32-x64@0.21.5':
+    resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+
   '@esbuild/win32-x64@0.24.2':
     resolution: {integrity: sha512-7VTgWzgMGvup6aSqDPLiW5zHaxYJGTO4OokMjIlrCtf+VpEL+cXKtCvg723iguPYI5oaUNdS+/V7OU2gvXVWEg==}
     engines: {node: '>=18'}
@@ -2079,6 +2238,10 @@ packages:
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
 
+  '@jest/schemas@29.6.3':
+    resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
@@ -2457,6 +2620,9 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@sinclair/typebox@0.27.12':
+    resolution: {integrity: sha512-hhyNJ+nbR6ZR7pToHvllEFun9TL0sbL+tk/ON75lo+Xas054uez98qRbsuNt7MBCyZKK4+8Yli/OAGZhmfBZ/g==}
+
   '@sindresorhus/is@4.6.0':
     resolution: {integrity: sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==}
     engines: {node: '>=10'}
@@ -2910,6 +3076,9 @@ packages:
       '@vitest/browser':
         optional: true
 
+  '@vitest/expect@1.6.1':
+    resolution: {integrity: sha512-jXL+9+ZNIJKruofqXuuTClf44eSpcHlgj3CiuNihUF3Ioujtmc0zIa3UJOW5RjDK1YLBJZnWBlPuqhYycLioog==}
+
   '@vitest/expect@4.1.10':
     resolution: {integrity: sha512-YsCn+qAk1GWjQOWFEsEcL2gNQ0zmVmQu3T03qP6UyjhtmdtwtbuI+DASn/7iQB3HGTXkdBwGddzxPlmiql5vlA==}
 
@@ -2927,15 +3096,27 @@ packages:
   '@vitest/pretty-format@4.1.10':
     resolution: {integrity: sha512-W1HsjSH4MXQ9YfmmhLAoIYf1HRfekQCGngeIgcei6MP5QQGWUe0gkopdZQaVCFO+JDJMrAJGwa5pRpNpvy4P8Q==}
 
+  '@vitest/runner@1.6.1':
+    resolution: {integrity: sha512-3nSnYXkVkf3mXFfE7vVyPmi3Sazhb/2cfZGGs0JRzFsPFvAMBEcrweV1V1GsrstdXeKCTXlJbvnQwGWgEIHmOA==}
+
   '@vitest/runner@4.1.10':
     resolution: {integrity: sha512-IKI6kpIH+LmpROplyLwBBaCfMgOZOMsygVa6BARD6ahA04VRuJSa6OaVG7kRvSEMD870Vd91rSSw0eegtWyLGg==}
 
+  '@vitest/snapshot@1.6.1':
+    resolution: {integrity: sha512-WvidQuWAzU2p95u8GAKlRMqMyN1yOJkGHnx3M1PL9Raf7AQ1kwLKg04ADlCa3+OXUZE7BceOhVZiuWAbzCKcUQ==}
+
   '@vitest/snapshot@4.1.10':
     resolution: {integrity: sha512-xRkfOT1qpTAi/Ti4Y1LtfRc3kEuqxGw59eN2jN9pRWMtS/XDevekhcFSqvQqjUNGksfjMJu3Y+oJ+4Ypn2OaJw==}
 
+  '@vitest/spy@1.6.1':
+    resolution: {integrity: sha512-MGcMmpGkZebsMZhbQKkAf9CX5zGvjkBTqf8Zx3ApYWXr3wG+QvEu2eXWfnIIWYSJExIp4V9FCKDEeygzkYrXMw==}
+
   '@vitest/spy@4.1.10':
     resolution: {integrity: sha512-PLf/Ugvoq5wO/b4rwYCR1h2PSIdXz7wnkQFMiUpLdtM7l6pqVFcQIBEHyT1+l+cj7mNwAfZHzqXqDyjvOuwbDw==}
 
+  '@vitest/utils@1.6.1':
+    resolution: {integrity: sha512-jOrrUvXM4Av9ZWiG1EajNto0u96kWAhJ1LmPmJhXXQx/32MecEKd10pOLYgS2BQx1TgkGhloPU1ArDW2vvaY6g==}
+
   '@vitest/utils@4.1.10':
     resolution: {integrity: sha512-fy9am/HWxbaGt/Sawrp90vt6Y6jQwf1RX77cz3uwoJwJVMli/e1IEwRPnMNJ7vKfPTwo0diXifkpPvwH9v7nGA==}
 
@@ -2982,6 +3163,10 @@ packages:
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
+  acorn-walk@8.3.5:
+    resolution: {integrity: sha512-HEHNfbars9v4pgpW6SO1KSPkfoS0xVOM/9UzkJltjlsHZmJasxg8aXkuZa7SMf8vKGIBhpUsPluQSqhJFCqebw==}
+    engines: {node: '>=0.4.0'}
+
   acorn@8.17.0:
     resolution: {integrity: sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg==}
     engines: {node: '>=0.4.0'}
@@ -3093,6 +3278,9 @@ packages:
     resolution: {integrity: sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==}
     engines: {node: '>=0.8'}
 
+  assertion-error@1.1.0:
+    resolution: {integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==}
+
   assertion-error@2.0.1:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
@@ -3297,6 +3485,10 @@ packages:
     resolution: {integrity: sha512-EHz61NBp/2UPYE4iWCZ+YK9Jcb0d2hzRfqkj4DRaUM3cJmA9hE2FTmcPPZ2iL7w+W0YUScI0gc9XeSTXlPIQtA==}
     engines: {node: '>=22.0.0'}
 
+  chai@4.5.0:
+    resolution: {integrity: sha512-RITGBfijLkBddZvnn8jdqoTypxvqbOLYQkGGxXzeFjVHvudaPw0HNFD9x928/eUwYWd2dPCugVqspGALTZZQKw==}
+    engines: {node: '>=4'}
+
   chai@6.2.2:
     resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
     engines: {node: '>=18'}
@@ -3305,6 +3497,9 @@ packages:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
+  check-error@1.0.3:
+    resolution: {integrity: sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==}
+
   chokidar@3.5.2:
     resolution: {integrity: sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==}
     engines: {node: '>= 8.10.0'}
@@ -3562,6 +3757,10 @@ packages:
     resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
     engines: {node: '>=10'}
 
+  deep-eql@4.1.4:
+    resolution: {integrity: sha512-SUwdGfqdKOwxCPeVYjwSyRpJ7Z+fhpwIAtmCUdZIWZ/YP5R9WAsyuSgpLVDi9bjWoN2LXHNss/dk3urXtdQxGg==}
+    engines: {node: '>=6'}
+
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
@@ -3614,6 +3813,10 @@ packages:
   detect-node@2.1.0:
     resolution: {integrity: sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==}
 
+  diff-sequences@29.6.3:
+    resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
   dir-compare@4.2.0:
     resolution: {integrity: sha512-2xMCmOoMrdQIPHdsTawECdNPwlVFB9zGcz3kuhmBO6U3oU+UQjsue0i8ayLKpgBcm+hcXPMVSGUN9d+pvJ6+VQ==}
 
@@ -3785,6 +3988,11 @@ packages:
     peerDependencies:
       esbuild: '>=0.12 <1'
 
+  esbuild@0.21.5:
+    resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
+    engines: {node: '>=12'}
+    hasBin: true
+
   esbuild@0.24.2:
     resolution: {integrity: sha512-+9egpBW8I3CD5XPe0n6BfT5fxLzxrlDzqydF3aviG+9ni1lDC/OvMHcxqEFV0+LANZG5R1bFMWfUrjVsdwxJvA==}
     engines: {node: '>=18'}
@@ -3927,6 +4135,10 @@ packages:
     resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
     engines: {node: '>= 0.6'}
 
+  execa@8.0.1:
+    resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
+    engines: {node: '>=16.17'}
+
   expect-type@1.4.0:
     resolution: {integrity: sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==}
     engines: {node: '>=12.0.0'}
@@ -4123,6 +4335,9 @@ packages:
     resolution: {integrity: sha512-QRbvDIbx6YklUe6RxeTeleMR0yv3cYH6PsPZHcnVn7xv7zO1BHN8r0XETu8n6Ye3Q+ahtSarc3WgtNWmehIBfA==}
     engines: {node: '>=18'}
 
+  get-func-name@2.0.2:
+    resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==}
+
   get-intrinsic@1.3.0:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
@@ -4139,6 +4354,10 @@ packages:
     resolution: {integrity: sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==}
     engines: {node: '>=8'}
 
+  get-stream@8.0.1:
+    resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
+    engines: {node: '>=16'}
+
   glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -4331,6 +4550,10 @@ packages:
     resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
     engines: {node: '>= 14'}
 
+  human-signals@5.0.0:
+    resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
+    engines: {node: '>=16.17.0'}
+
   humanize-ms@1.2.1:
     resolution: {integrity: sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==}
 
@@ -4474,6 +4697,10 @@ packages:
     resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
     engines: {node: '>= 0.4'}
 
+  is-stream@3.0.0:
+    resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   is-typed-array@1.1.15:
     resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
     engines: {node: '>= 0.4'}
@@ -4554,6 +4781,9 @@ packages:
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
+  js-tokens@9.0.1:
+    resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
+
   js-yaml@4.3.0:
     resolution: {integrity: sha512-1td788aAnnZ5qs7V2QIRl1owjtYpbKt749Y3xauqQgwIIGF/xXWz1wMTEBx5O3LK3lXLVuqXPdPxj2BoFHaW9Q==}
     hasBin: true
@@ -4698,6 +4928,10 @@ packages:
     resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  local-pkg@0.5.1:
+    resolution: {integrity: sha512-9rrA30MRRP3gBD3HTGnC6cDFpaE1kVDWxWgqWJUN0RvDNAo+Nz/9GxB+nHOH0ifbVFy0hSA1V6vFDvnx54lTEQ==}
+    engines: {node: '>=14'}
+
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -4743,6 +4977,9 @@ packages:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
 
+  loupe@2.3.7:
+    resolution: {integrity: sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==}
+
   lowercase-keys@2.0.0:
     resolution: {integrity: sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==}
     engines: {node: '>=8'}
@@ -4827,6 +5064,9 @@ packages:
     resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
     engines: {node: '>=18'}
 
+  merge-stream@2.0.0:
+    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
+
   merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
@@ -4874,6 +5114,10 @@ packages:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
 
+  mimic-fn@4.0.0:
+    resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
+    engines: {node: '>=12'}
+
   mimic-response@1.0.1:
     resolution: {integrity: sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==}
     engines: {node: '>=4'}
@@ -5007,6 +5251,10 @@ packages:
   nosleep.js@0.12.0:
     resolution: {integrity: sha512-9d1HbpKLh3sdWlhXMhU6MMH+wQzKkrgfRkYV0EBdvt99YJfj0ilCJrWRDYG2130Tm4GXbEoTCx5b34JSaP+HhA==}
 
+  npm-run-path@5.3.0:
+    resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   npmlog@6.0.2:
     resolution: {integrity: sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
@@ -5039,6 +5287,10 @@ packages:
     resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
     engines: {node: '>=6'}
 
+  onetime@6.0.0:
+    resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
+    engines: {node: '>=12'}
+
   open@8.4.2:
     resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
     engines: {node: '>=12'}
@@ -5062,6 +5314,10 @@ packages:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
 
+  p-limit@5.0.0:
+    resolution: {integrity: sha512-/Eaoq+QyLSiXQ4lyYV23f14mZRQcXnxfHrN0vCai+ak9G0pp9iEQukIIZq5NccEvwRB8PUnZT0KsOoDCINS1qQ==}
+    engines: {node: '>=18'}
+
   p-locate@5.0.0:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
@@ -5120,6 +5376,10 @@ packages:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
 
+  path-key@4.0.0:
+    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
+    engines: {node: '>=12'}
+
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
@@ -5138,9 +5398,15 @@ packages:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
 
+  pathe@1.1.2:
+    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
+
   pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
+  pathval@1.1.1:
+    resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==}
+
   pe-library@0.4.1:
     resolution: {integrity: sha512-eRWB5LBz7PpDu4PUlwT0PhnQfTQJlDDdPa35urV4Osrm0t0AqQFGn+UIkU3klZvwJ8KPO3VbBFsXquA6p6kqZw==}
     engines: {node: '>=12', npm: '>=6'}
@@ -5273,6 +5539,10 @@ packages:
     resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
 
+  pretty-format@29.7.0:
+    resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+
   pretty-hrtime@1.0.3:
     resolution: {integrity: sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==}
     engines: {node: '>= 0.8'}
@@ -5379,6 +5649,9 @@ packages:
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
+  react-is@18.3.1:
+    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
+
   react-refresh@0.18.0:
     resolution: {integrity: sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==}
     engines: {node: '>=0.10.0'}
@@ -5733,6 +6006,9 @@ packages:
     resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
     engines: {node: '>= 0.8'}
 
+  std-env@3.10.0:
+    resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==}
+
   std-env@4.1.0:
     resolution: {integrity: sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==}
 
@@ -5771,10 +6047,17 @@ packages:
     resolution: {integrity: sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==}
     engines: {node: '>=12'}
 
+  strip-final-newline@3.0.0:
+    resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
+    engines: {node: '>=12'}
+
   strip-json-comments@3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
+  strip-literal@2.1.1:
+    resolution: {integrity: sha512-631UJ6O00eNGfMiWG78ck80dfBab8X6IVFB51jZK5Icd7XAs60Z5y7QdSd/wGIklnWvRbUNloVzhOKKmutxQ6Q==}
+
   style-mod@4.1.3:
     resolution: {integrity: sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==}
 
@@ -5880,10 +6163,18 @@ packages:
     resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
     engines: {node: '>=12.0.0'}
 
+  tinypool@0.8.4:
+    resolution: {integrity: sha512-i11VH5gS6IFeLY3gMBQ00/MmLncVP7JLXOw1vlgkytLmJK7QnEr7NXf0LBdxfmNPAeyetukOk0bOYrJrFGjYJQ==}
+    engines: {node: '>=14.0.0'}
+
   tinyrainbow@3.1.0:
     resolution: {integrity: sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==}
     engines: {node: '>=14.0.0'}
 
+  tinyspy@2.2.1:
+    resolution: {integrity: sha512-KYad6Vy5VDWV4GH3fjpseMQ/XU2BhIYP7Vzd0LG44qRWm/Yt2WCOTicFdvmgo6gWaqooMQCawTtILVQJupKu7A==}
+    engines: {node: '>=14.0.0'}
+
   tldts-core@7.4.6:
     resolution: {integrity: sha512-TkQNGJIhlEphpHCjKodMTSe23egUZr/g+flI2qkLgiJ/maAzSgXypSLRTNH3nCmqgayEmtcJBiLcfODSAr1xoA==}
 
@@ -5976,6 +6267,10 @@ packages:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
 
+  type-detect@4.1.0:
+    resolution: {integrity: sha512-Acylog8/luQ8L7il+geoSxhEkazvkslg7PSNKOX59mbB9cOveP5aq9h74Y7YU8yDpJwetzQQrfIwtf4Wp4LKcw==}
+    engines: {node: '>=4'}
+
   type-fest@0.13.1:
     resolution: {integrity: sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==}
     engines: {node: '>=10'}
@@ -6088,6 +6383,11 @@ packages:
     resolution: {integrity: sha512-veufcmxri4e3XSrT0xwfUR7kguIkaxBeosDg00yDWhk49wdwkSUrvvsm7nc75e1PUyvIeZj6nS8VQRYz2/S4Xg==}
     engines: {node: '>=0.6.0'}
 
+  vite-node@1.6.1:
+    resolution: {integrity: sha512-YAXkfvGtuTzwWbDSACdJSg4A4DZiAqckWe90Zapc/sEX3XvHcw1NdurM/6od8J207tSDqNbSsgdCacBgvJKFuA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+
   vite-plugin-cesium@1.2.23:
     resolution: {integrity: sha512-x9A8ZCEoegceXg/E+LnxKr0XBsI9CR4cgYWQ2Dd3cUEYwKcTnHQ3kBfpol7BUcGtgQnQos/mtVrRmuVQBXFjHw==}
     peerDependencies:
@@ -6110,6 +6410,37 @@ packages:
     peerDependencies:
       vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
 
+  vite@5.4.21:
+    resolution: {integrity: sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || >=20.0.0
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      sass-embedded: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+
   vite@6.4.3:
     resolution: {integrity: sha512-NTKlcQjlAK7MlQoyb6LgaqHc8sso/pVyUJYWMws3jg21uTJw/LddqIFPcPqP6PzpgbIcZyKI85sFE4HBrQDA8A==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
@@ -6198,6 +6529,31 @@ packages:
       vite:
         optional: true
 
+  vitest@1.6.1:
+    resolution: {integrity: sha512-Ljb1cnSJSivGN0LqXd/zmDbWEM0RNNg2t1QW/XUhYl/qPqyu7CsqeWtqQXHVaJsecLPuDoak2oJcZN2QoRIOag==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@types/node': ^18.0.0 || >=20.0.0
+      '@vitest/browser': 1.6.1
+      '@vitest/ui': 1.6.1
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+
   vitest@4.1.10:
     resolution: {integrity: sha512-R9jUTe5S4Qb0HCd4TNqpC7oGcrMssMRGXLW80ubjWsW9VH5GF8y1Y0SFLY9AbqSk6nt0PnOx4H4WNJYZ13GUPw==}
     engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
@@ -6378,6 +6734,10 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
+  yocto-queue@1.2.2:
+    resolution: {integrity: sha512-4LCcse/U2MHZ63HAJVE+v71o7yOdIe4cZ70Wpf8D/IyjDKYQLV5GD46B+hSTjJsvV5PztjvHoU580EftxjDZFQ==}
+    engines: {node: '>=12.20'}
+
   zen-observable-ts@1.2.5:
     resolution: {integrity: sha512-QZWQekv6iB72Naeake9hS1KxHlotfRpe+WGNbNx5/ta+R3DNjVO2bswf63gXlWDcs+EMd7XY8HfVQyP1X6T4Zg==}
 
@@ -6924,6 +7284,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@esbuild/aix-ppc64@0.21.5':
+    optional: true
+
   '@esbuild/aix-ppc64@0.24.2':
     optional: true
 
@@ -6936,6 +7299,9 @@ snapshots:
   '@esbuild/aix-ppc64@0.28.1':
     optional: true
 
+  '@esbuild/android-arm64@0.21.5':
+    optional: true
+
   '@esbuild/android-arm64@0.24.2':
     optional: true
 
@@ -6948,6 +7314,9 @@ snapshots:
   '@esbuild/android-arm64@0.28.1':
     optional: true
 
+  '@esbuild/android-arm@0.21.5':
+    optional: true
+
   '@esbuild/android-arm@0.24.2':
     optional: true
 
@@ -6960,6 +7329,9 @@ snapshots:
   '@esbuild/android-arm@0.28.1':
     optional: true
 
+  '@esbuild/android-x64@0.21.5':
+    optional: true
+
   '@esbuild/android-x64@0.24.2':
     optional: true
 
@@ -6972,6 +7344,9 @@ snapshots:
   '@esbuild/android-x64@0.28.1':
     optional: true
 
+  '@esbuild/darwin-arm64@0.21.5':
+    optional: true
+
   '@esbuild/darwin-arm64@0.24.2':
     optional: true
 
@@ -6984,6 +7359,9 @@ snapshots:
   '@esbuild/darwin-arm64@0.28.1':
     optional: true
 
+  '@esbuild/darwin-x64@0.21.5':
+    optional: true
+
   '@esbuild/darwin-x64@0.24.2':
     optional: true
 
@@ -6996,6 +7374,9 @@ snapshots:
   '@esbuild/darwin-x64@0.28.1':
     optional: true
 
+  '@esbuild/freebsd-arm64@0.21.5':
+    optional: true
+
   '@esbuild/freebsd-arm64@0.24.2':
     optional: true
 
@@ -7008,6 +7389,9 @@ snapshots:
   '@esbuild/freebsd-arm64@0.28.1':
     optional: true
 
+  '@esbuild/freebsd-x64@0.21.5':
+    optional: true
+
   '@esbuild/freebsd-x64@0.24.2':
     optional: true
 
@@ -7020,6 +7404,9 @@ snapshots:
   '@esbuild/freebsd-x64@0.28.1':
     optional: true
 
+  '@esbuild/linux-arm64@0.21.5':
+    optional: true
+
   '@esbuild/linux-arm64@0.24.2':
     optional: true
 
@@ -7032,6 +7419,9 @@ snapshots:
   '@esbuild/linux-arm64@0.28.1':
     optional: true
 
+  '@esbuild/linux-arm@0.21.5':
+    optional: true
+
   '@esbuild/linux-arm@0.24.2':
     optional: true
 
@@ -7044,6 +7434,9 @@ snapshots:
   '@esbuild/linux-arm@0.28.1':
     optional: true
 
+  '@esbuild/linux-ia32@0.21.5':
+    optional: true
+
   '@esbuild/linux-ia32@0.24.2':
     optional: true
 
@@ -7056,6 +7449,9 @@ snapshots:
   '@esbuild/linux-ia32@0.28.1':
     optional: true
 
+  '@esbuild/linux-loong64@0.21.5':
+    optional: true
+
   '@esbuild/linux-loong64@0.24.2':
     optional: true
 
@@ -7068,6 +7464,9 @@ snapshots:
   '@esbuild/linux-loong64@0.28.1':
     optional: true
 
+  '@esbuild/linux-mips64el@0.21.5':
+    optional: true
+
   '@esbuild/linux-mips64el@0.24.2':
     optional: true
 
@@ -7080,6 +7479,9 @@ snapshots:
   '@esbuild/linux-mips64el@0.28.1':
     optional: true
 
+  '@esbuild/linux-ppc64@0.21.5':
+    optional: true
+
   '@esbuild/linux-ppc64@0.24.2':
     optional: true
 
@@ -7092,6 +7494,9 @@ snapshots:
   '@esbuild/linux-ppc64@0.28.1':
     optional: true
 
+  '@esbuild/linux-riscv64@0.21.5':
+    optional: true
+
   '@esbuild/linux-riscv64@0.24.2':
     optional: true
 
@@ -7104,6 +7509,9 @@ snapshots:
   '@esbuild/linux-riscv64@0.28.1':
     optional: true
 
+  '@esbuild/linux-s390x@0.21.5':
+    optional: true
+
   '@esbuild/linux-s390x@0.24.2':
     optional: true
 
@@ -7116,6 +7524,9 @@ snapshots:
   '@esbuild/linux-s390x@0.28.1':
     optional: true
 
+  '@esbuild/linux-x64@0.21.5':
+    optional: true
+
   '@esbuild/linux-x64@0.24.2':
     optional: true
 
@@ -7140,6 +7551,9 @@ snapshots:
   '@esbuild/netbsd-arm64@0.28.1':
     optional: true
 
+  '@esbuild/netbsd-x64@0.21.5':
+    optional: true
+
   '@esbuild/netbsd-x64@0.24.2':
     optional: true
 
@@ -7164,6 +7578,9 @@ snapshots:
   '@esbuild/openbsd-arm64@0.28.1':
     optional: true
 
+  '@esbuild/openbsd-x64@0.21.5':
+    optional: true
+
   '@esbuild/openbsd-x64@0.24.2':
     optional: true
 
@@ -7185,6 +7602,9 @@ snapshots:
   '@esbuild/openharmony-arm64@0.28.1':
     optional: true
 
+  '@esbuild/sunos-x64@0.21.5':
+    optional: true
+
   '@esbuild/sunos-x64@0.24.2':
     optional: true
 
@@ -7197,6 +7617,9 @@ snapshots:
   '@esbuild/sunos-x64@0.28.1':
     optional: true
 
+  '@esbuild/win32-arm64@0.21.5':
+    optional: true
+
   '@esbuild/win32-arm64@0.24.2':
     optional: true
 
@@ -7209,6 +7632,9 @@ snapshots:
   '@esbuild/win32-arm64@0.28.1':
     optional: true
 
+  '@esbuild/win32-ia32@0.21.5':
+    optional: true
+
   '@esbuild/win32-ia32@0.24.2':
     optional: true
 
@@ -7221,6 +7647,9 @@ snapshots:
   '@esbuild/win32-ia32@0.28.1':
     optional: true
 
+  '@esbuild/win32-x64@0.21.5':
+    optional: true
+
   '@esbuild/win32-x64@0.24.2':
     optional: true
 
@@ -7359,6 +7788,10 @@ snapshots:
       wrap-ansi: 8.1.0
       wrap-ansi-cjs: wrap-ansi@7.0.0
 
+  '@jest/schemas@29.6.3':
+    dependencies:
+      '@sinclair/typebox': 0.27.12
+
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -7725,6 +8158,8 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.62.2':
     optional: true
 
+  '@sinclair/typebox@0.27.12': {}
+
   '@sindresorhus/is@4.6.0': {}
 
   '@solidjs/router@0.15.4(solid-js@1.9.14)':
@@ -8258,6 +8693,12 @@ snapshots:
       tinyrainbow: 3.1.0
       vitest: 4.1.10(@types/node@24.13.2)(@vitest/coverage-v8@4.1.10)(happy-dom@20.10.6)(jsdom@27.4.0)(vite@6.4.3(@types/node@24.13.2)(sass@1.101.0)(tsx@4.23.0)(yaml@2.9.0))
 
+  '@vitest/expect@1.6.1':
+    dependencies:
+      '@vitest/spy': 1.6.1
+      '@vitest/utils': 1.6.1
+      chai: 4.5.0
+
   '@vitest/expect@4.1.10':
     dependencies:
       '@standard-schema/spec': 1.1.0
@@ -8295,11 +8736,23 @@ snapshots:
     dependencies:
       tinyrainbow: 3.1.0
 
+  '@vitest/runner@1.6.1':
+    dependencies:
+      '@vitest/utils': 1.6.1
+      p-limit: 5.0.0
+      pathe: 1.1.2
+
   '@vitest/runner@4.1.10':
     dependencies:
       '@vitest/utils': 4.1.10
       pathe: 2.0.3
 
+  '@vitest/snapshot@1.6.1':
+    dependencies:
+      magic-string: 0.30.21
+      pathe: 1.1.2
+      pretty-format: 29.7.0
+
   '@vitest/snapshot@4.1.10':
     dependencies:
       '@vitest/pretty-format': 4.1.10
@@ -8307,8 +8760,19 @@ snapshots:
       magic-string: 0.30.21
       pathe: 2.0.3
 
+  '@vitest/spy@1.6.1':
+    dependencies:
+      tinyspy: 2.2.1
+
   '@vitest/spy@4.1.10': {}
 
+  '@vitest/utils@1.6.1':
+    dependencies:
+      diff-sequences: 29.6.3
+      estree-walker: 3.0.3
+      loupe: 2.3.7
+      pretty-format: 29.7.0
+
   '@vitest/utils@4.1.10':
     dependencies:
       '@vitest/pretty-format': 4.1.10
@@ -8352,6 +8816,10 @@ snapshots:
     dependencies:
       acorn: 8.17.0
 
+  acorn-walk@8.3.5:
+    dependencies:
+      acorn: 8.17.0
+
   acorn@8.17.0: {}
 
   agent-base@6.0.2:
@@ -8508,6 +8976,8 @@ snapshots:
   assert-plus@1.0.0:
     optional: true
 
+  assertion-error@1.1.0: {}
+
   assertion-error@2.0.1: {}
 
   ast-types@0.16.1:
@@ -8768,6 +9238,16 @@ snapshots:
       '@cesium/widgets': 16.1.0
       protobufjs: 8.7.0
 
+  chai@4.5.0:
+    dependencies:
+      assertion-error: 1.1.0
+      check-error: 1.0.3
+      deep-eql: 4.1.4
+      get-func-name: 2.0.2
+      loupe: 2.3.7
+      pathval: 1.1.1
+      type-detect: 4.1.0
+
   chai@6.2.2: {}
 
   chalk@4.1.2:
@@ -8775,6 +9255,10 @@ snapshots:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  check-error@1.0.3:
+    dependencies:
+      get-func-name: 2.0.2
+
   chokidar@3.5.2:
     dependencies:
       anymatch: 3.1.3
@@ -9015,6 +9499,10 @@ snapshots:
     dependencies:
       mimic-response: 3.1.0
 
+  deep-eql@4.1.4:
+    dependencies:
+      type-detect: 4.1.0
+
   deep-is@0.1.4: {}
 
   defaults@1.0.4:
@@ -9055,6 +9543,8 @@ snapshots:
   detect-node@2.1.0:
     optional: true
 
+  diff-sequences@29.6.3: {}
+
   dir-compare@4.2.0:
     dependencies:
       minimatch: 3.1.5
@@ -9263,6 +9753,32 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  esbuild@0.21.5:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.21.5
+      '@esbuild/android-arm': 0.21.5
+      '@esbuild/android-arm64': 0.21.5
+      '@esbuild/android-x64': 0.21.5
+      '@esbuild/darwin-arm64': 0.21.5
+      '@esbuild/darwin-x64': 0.21.5
+      '@esbuild/freebsd-arm64': 0.21.5
+      '@esbuild/freebsd-x64': 0.21.5
+      '@esbuild/linux-arm': 0.21.5
+      '@esbuild/linux-arm64': 0.21.5
+      '@esbuild/linux-ia32': 0.21.5
+      '@esbuild/linux-loong64': 0.21.5
+      '@esbuild/linux-mips64el': 0.21.5
+      '@esbuild/linux-ppc64': 0.21.5
+      '@esbuild/linux-riscv64': 0.21.5
+      '@esbuild/linux-s390x': 0.21.5
+      '@esbuild/linux-x64': 0.21.5
+      '@esbuild/netbsd-x64': 0.21.5
+      '@esbuild/openbsd-x64': 0.21.5
+      '@esbuild/sunos-x64': 0.21.5
+      '@esbuild/win32-arm64': 0.21.5
+      '@esbuild/win32-ia32': 0.21.5
+      '@esbuild/win32-x64': 0.21.5
+
   esbuild@0.24.2:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.24.2
@@ -9504,6 +10020,18 @@ snapshots:
 
   etag@1.8.1: {}
 
+  execa@8.0.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      get-stream: 8.0.1
+      human-signals: 5.0.0
+      is-stream: 3.0.0
+      merge-stream: 2.0.0
+      npm-run-path: 5.3.0
+      onetime: 6.0.0
+      signal-exit: 4.1.0
+      strip-final-newline: 3.0.0
+
   expect-type@1.4.0: {}
 
   exponential-backoff@3.1.3: {}
@@ -9734,6 +10262,8 @@ snapshots:
 
   get-east-asian-width@1.6.0: {}
 
+  get-func-name@2.0.2: {}
+
   get-intrinsic@1.3.0:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -9758,6 +10288,8 @@ snapshots:
     dependencies:
       pump: 3.0.4
 
+  get-stream@8.0.1: {}
+
   glob-parent@5.1.2:
     dependencies:
       is-glob: 4.0.3
@@ -10000,6 +10532,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  human-signals@5.0.0: {}
+
   humanize-ms@1.2.1:
     dependencies:
       ms: 2.1.3
@@ -10116,6 +10650,8 @@ snapshots:
       has-tostringtag: 1.0.2
       hasown: 2.0.4
 
+  is-stream@3.0.0: {}
+
   is-typed-array@1.1.15:
     dependencies:
       which-typed-array: 1.1.22
@@ -10189,6 +10725,8 @@ snapshots:
 
   js-tokens@4.0.0: {}
 
+  js-tokens@9.0.1: {}
+
   js-yaml@4.3.0:
     dependencies:
       argparse: 2.0.1
@@ -10361,6 +10899,11 @@ snapshots:
 
   load-tsconfig@0.2.5: {}
 
+  local-pkg@0.5.1:
+    dependencies:
+      mlly: 1.8.2
+      pkg-types: 1.3.1
+
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
@@ -10396,6 +10939,10 @@ snapshots:
     dependencies:
       js-tokens: 4.0.0
 
+  loupe@2.3.7:
+    dependencies:
+      get-func-name: 2.0.2
+
   lowercase-keys@2.0.0: {}
 
   lru-cache@10.4.3: {}
@@ -10483,6 +11030,8 @@ snapshots:
 
   merge-descriptors@2.0.0: {}
 
+  merge-stream@2.0.0: {}
+
   merge2@1.4.1: {}
 
   mersenne-twister@1.1.0: {}
@@ -10514,6 +11063,8 @@ snapshots:
 
   mimic-fn@2.1.0: {}
 
+  mimic-fn@4.0.0: {}
+
   mimic-response@1.0.1: {}
 
   mimic-response@3.1.0: {}
@@ -10643,6 +11194,10 @@ snapshots:
 
   nosleep.js@0.12.0: {}
 
+  npm-run-path@5.3.0:
+    dependencies:
+      path-key: 4.0.0
+
   npmlog@6.0.2:
     dependencies:
       are-we-there-yet: 3.0.1
@@ -10671,6 +11226,10 @@ snapshots:
     dependencies:
       mimic-fn: 2.1.0
 
+  onetime@6.0.0:
+    dependencies:
+      mimic-fn: 4.0.0
+
   open@8.4.2:
     dependencies:
       define-lazy-prop: 2.0.0
@@ -10711,6 +11270,10 @@ snapshots:
     dependencies:
       yocto-queue: 0.1.0
 
+  p-limit@5.0.0:
+    dependencies:
+      yocto-queue: 1.2.2
+
   p-locate@5.0.0:
     dependencies:
       p-limit: 3.1.0
@@ -10761,6 +11324,8 @@ snapshots:
 
   path-key@3.1.1: {}
 
+  path-key@4.0.0: {}
+
   path-parse@1.0.7: {}
 
   path-scurry@1.11.1:
@@ -10777,8 +11342,12 @@ snapshots:
 
   path-type@4.0.0: {}
 
+  pathe@1.1.2: {}
+
   pathe@2.0.3: {}
 
+  pathval@1.1.1: {}
+
   pe-library@0.4.1: {}
 
   pend@1.2.0: {}
@@ -10894,6 +11463,12 @@ snapshots:
       ansi-styles: 5.2.0
       react-is: 17.0.2
 
+  pretty-format@29.7.0:
+    dependencies:
+      '@jest/schemas': 29.6.3
+      ansi-styles: 5.2.0
+      react-is: 18.3.1
+
   pretty-hrtime@1.0.3: {}
 
   prismjs@1.30.0: {}
@@ -10984,6 +11559,8 @@ snapshots:
 
   react-is@17.0.2: {}
 
+  react-is@18.3.1: {}
+
   react-refresh@0.18.0: {}
 
   react@18.3.1:
@@ -11408,6 +11985,8 @@ snapshots:
 
   statuses@2.0.2: {}
 
+  std-env@3.10.0: {}
+
   std-env@4.1.0: {}
 
   storybook@8.4.6(prettier@3.9.4):
@@ -11454,8 +12033,14 @@ snapshots:
     dependencies:
       ansi-regex: 6.2.2
 
+  strip-final-newline@3.0.0: {}
+
   strip-json-comments@3.1.1: {}
 
+  strip-literal@2.1.1:
+    dependencies:
+      js-tokens: 9.0.1
+
   style-mod@4.1.3: {}
 
   stylelint-config-recommended@17.0.0(stylelint@16.26.1(typescript@5.9.3)):
@@ -11608,8 +12193,12 @@ snapshots:
       fdir: 6.5.0(picomatch@4.0.5)
       picomatch: 4.0.5
 
+  tinypool@0.8.4: {}
+
   tinyrainbow@3.1.0: {}
 
+  tinyspy@2.2.1: {}
+
   tldts-core@7.4.6: {}
 
   tldts@7.4.6:
@@ -11703,6 +12292,8 @@ snapshots:
     dependencies:
       prelude-ls: 1.2.1
 
+  type-detect@4.1.0: {}
+
   type-fest@0.13.1:
     optional: true
 
@@ -11800,6 +12391,24 @@ snapshots:
       extsprintf: 1.4.1
     optional: true
 
+  vite-node@1.6.1(@types/node@24.13.2)(sass@1.101.0):
+    dependencies:
+      cac: 6.7.14
+      debug: 4.4.3
+      pathe: 1.1.2
+      picocolors: 1.1.1
+      vite: 5.4.21(@types/node@24.13.2)(sass@1.101.0)
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+
   vite-plugin-cesium@1.2.23(cesium@1.143.0)(rollup@4.62.2)(vite@7.3.6(@types/node@24.13.2)(sass@1.101.0)(tsx@4.23.0)(yaml@2.9.0)):
     dependencies:
       cesium: 1.143.0
@@ -11858,6 +12467,16 @@ snapshots:
       tinyglobby: 0.2.17
       vite: 6.4.3(@types/node@22.20.0)(sass@1.101.0)(tsx@4.23.0)(yaml@2.9.0)
 
+  vite@5.4.21(@types/node@24.13.2)(sass@1.101.0):
+    dependencies:
+      esbuild: 0.21.5
+      postcss: 8.5.16
+      rollup: 4.62.2
+    optionalDependencies:
+      '@types/node': 24.13.2
+      fsevents: 2.3.3
+      sass: 1.101.0
+
   vite@6.4.3(@types/node@22.20.0)(sass@1.101.0)(tsx@4.23.0)(yaml@2.9.0):
     dependencies:
       esbuild: 0.25.12
@@ -11930,6 +12549,42 @@ snapshots:
     optionalDependencies:
       vite: 7.3.6(@types/node@24.13.2)(sass@1.101.0)(tsx@4.23.0)(yaml@2.9.0)
 
+  vitest@1.6.1(@types/node@24.13.2)(happy-dom@20.10.6)(jsdom@27.4.0)(sass@1.101.0):
+    dependencies:
+      '@vitest/expect': 1.6.1
+      '@vitest/runner': 1.6.1
+      '@vitest/snapshot': 1.6.1
+      '@vitest/spy': 1.6.1
+      '@vitest/utils': 1.6.1
+      acorn-walk: 8.3.5
+      chai: 4.5.0
+      debug: 4.4.3
+      execa: 8.0.1
+      local-pkg: 0.5.1
+      magic-string: 0.30.21
+      pathe: 1.1.2
+      picocolors: 1.1.1
+      std-env: 3.10.0
+      strip-literal: 2.1.1
+      tinybench: 2.9.0
+      tinypool: 0.8.4
+      vite: 5.4.21(@types/node@24.13.2)(sass@1.101.0)
+      vite-node: 1.6.1(@types/node@24.13.2)(sass@1.101.0)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 24.13.2
+      happy-dom: 20.10.6
+      jsdom: 27.4.0
+    transitivePeerDependencies:
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+
   vitest@4.1.10(@types/node@22.20.0)(@vitest/coverage-v8@4.1.10)(happy-dom@20.10.6)(jsdom@27.4.0)(vite@7.3.6(@types/node@22.20.0)(sass@1.101.0)(tsx@4.23.0)(yaml@2.9.0)):
     dependencies:
       '@vitest/expect': 4.1.10
@@ -12153,6 +12808,8 @@ snapshots:
 
   yocto-queue@0.1.0: {}
 
+  yocto-queue@1.2.2: {}
+
   zen-observable-ts@1.2.5:
     dependencies:
       zen-observable: 0.8.15

From e72b0613277f6b6b4282f8f720456cc0ae66694c Mon Sep 17 00:00:00 2001
From: jhweir <james@weco.io>
Date: Sat, 1 Aug 2026 17:33:20 +0100
Subject: [PATCH 04/12] feat(app-framework): bind host ports to module stores,
 late
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Modules register in `PlatformProvider`, which sits above `StoreProvider` — the
launcher template must be in the registry before the stores render, so
registration cannot wait. But every port a module wants lives in a store that
does not exist at that moment.

Rather than reorder the tree, the deps handed to a module store are stable
objects whose methods dereference at call time. A module holds `deps.presence`
forever; what it points at is filled in when `PresenceStoreProvider` mounts.
Every accessor answers safely before then — `peers()` is empty, `ephemeral()` is
null — which is the same degrade-don't-throw contract the ports already require
for a personal space with no neighbourhood.

Activating modules after the stores mount was the alternative, and was rejected
because it splits registration into two phases with different capabilities, and
"which phase am I in" is the kind of implicit state the last round of seam bugs
came from.

`AdamStore` publishes the dataset, its global uri and the transport;
`PresenceStore` publishes the roster and activity setters. Published rather than
imported, so a module never reaches into a store.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../src/frameworks/solid/stores/AdamStore.tsx | 13 +++
 .../frameworks/solid/stores/PresenceStore.tsx | 12 +++
 .../src/shared/platform/context.tsx           | 14 +++-
 .../shared/registries/moduleHostServices.ts   | 81 +++++++++++++++++++
 4 files changed, 116 insertions(+), 4 deletions(-)
 create mode 100644 packages/app-framework/src/shared/registries/moduleHostServices.ts

diff --git a/packages/app-framework/src/frameworks/solid/stores/AdamStore.tsx b/packages/app-framework/src/frameworks/solid/stores/AdamStore.tsx
index a685050a..e0a667c9 100644
--- a/packages/app-framework/src/frameworks/solid/stores/AdamStore.tsx
+++ b/packages/app-framework/src/frameworks/solid/stores/AdamStore.tsx
@@ -11,6 +11,7 @@ import {
 import { buildModelClasses, buildModelManifest, getForeignShacl } from '@shared/perspectiveHelpers';
 import { usePlatform } from '@shared/platform';
 import { registerDynamicModels } from '@shared/registries/modelRegistry';
+import { provideModuleHostServices } from '@shared/registries/moduleHostServices';
 import {
   deduplicateSpaceSdna,
   installModuleSdna,
@@ -191,6 +192,18 @@ export function AdamStoreProvider(props: ParentProps) {
   const currentPerspectiveSharedUrl = createMemo<string | undefined>(
     () => currentPerspective()?.sharedUrl ?? undefined,
   );
+  // Lend feature modules the neutral ports this store owns. Published rather than imported so a
+  // module never reaches into `adamStore` — what it receives is `EphemeralPort` and a dataset
+  // accessor, both of which any backend could satisfy. See moduleHostServices.ts.
+  provideModuleHostServices({
+    dataset: () => currentPerspective() ?? null,
+    // The *global* uri, never `perspective.uuid` — a uuid is local per-agent, so a call id derived
+    // from one would differ on every peer and each would join a call only they can see.
+    datasetUri: () => currentPerspective()?.sharedUrl ?? null,
+    selfId: () => me()?.did ?? null,
+    ephemeral: ephemeralPort,
+  });
+
   // CID-only form (neighbourhood:// stripped) for comparing against Space.url,
   // which stores only the CID to avoid URI resolution in the AD4M triple store.
   const currentPerspectiveSharedCid = createMemo<string | undefined>(
diff --git a/packages/app-framework/src/frameworks/solid/stores/PresenceStore.tsx b/packages/app-framework/src/frameworks/solid/stores/PresenceStore.tsx
index 90792f39..d80557fb 100644
--- a/packages/app-framework/src/frameworks/solid/stores/PresenceStore.tsx
+++ b/packages/app-framework/src/frameworks/solid/stores/PresenceStore.tsx
@@ -34,6 +34,7 @@
  * re-hydrates every peer profile on every heartbeat — an N-peer `Promise.all` every five seconds.
  */
 import type { AgentProfileSummary } from '@shared/agentHelpers';
+import { provideModuleHostServices } from '@shared/registries/moduleHostServices';
 import { createTabCoordinator } from '@shared/tabCoordinator';
 import { useAdamStore } from '@solid/stores/AdamStore';
 import { useRouteStore } from '@solid/stores/RouteStore';
@@ -223,6 +224,17 @@ export function PresenceStoreProvider(props: ParentProps) {
 
   const calls = createMemo(() => callRosters(online()) as Map<string, PresentAgent[]>);
 
+  // Lend feature modules the activity slice of presence. Narrowed deliberately: a module has a
+  // legitimate need to say "I am in this call" and to read who else is, but no business setting
+  // another agent's availability or driving the heartbeat. See moduleHostServices.ts.
+  provideModuleHostServices({
+    presence: {
+      peers: () => rawPeers(),
+      setActivity: (activity) => source?.setActivity(activity),
+      clearActivity: (type, id) => source?.clearActivity(type, id),
+    },
+  });
+
   const store: PresenceStore = {
     peers,
     online,
diff --git a/packages/app-framework/src/shared/platform/context.tsx b/packages/app-framework/src/shared/platform/context.tsx
index abb54012..8dc274c3 100644
--- a/packages/app-framework/src/shared/platform/context.tsx
+++ b/packages/app-framework/src/shared/platform/context.tsx
@@ -1,7 +1,8 @@
 import { componentRegistry } from '@solid/registries/componentRegistry';
-import { createContext, createSignal, ParentComponent, useContext } from 'solid-js';
+import { createContext, createEffect, createSignal, ParentComponent, useContext } from 'solid-js';
 
 import { initializeIntegrations } from '../initializeIntegrations';
+import { createModuleStoreDeps } from '../registries/moduleHostServices';
 import { PlatformAdapter } from './types';
 
 const PlatformContext = createContext<PlatformAdapter>();
@@ -13,9 +14,14 @@ export const PlatformProvider: ParentComponent<{ adapter: PlatformAdapter }> = (
   // stays framework-neutral.
   initializeIntegrations(props.adapter, {
     components: { CesiumGlobe: componentRegistry.CesiumGlobe },
-    // Reactivity lent to module stores. Solid's createSignal already has the [read, write] shape the
-    // port asks for, so a module store gets reactivity without importing a framework.
-    storeDeps: { signal: <T,>(initial: T) => createSignal(initial) as [() => T, (next: T) => void] },
+    // Reactivity lent to module stores. Solid's primitives already have the shapes the port asks
+    // for, so a module store gets reactivity without importing a framework. The remaining deps
+    // (transport, presence, the current dataset) are bound late — the stores that own them mount
+    // below this provider. See moduleHostServices.ts.
+    storeDeps: createModuleStoreDeps({
+      signal: <T,>(initial: T) => createSignal(initial) as [() => T, (next: T) => void],
+      effect: (fn) => createEffect(fn),
+    }),
   });
 
   return <PlatformContext.Provider value={props.adapter}>{props.children}</PlatformContext.Provider>;
diff --git a/packages/app-framework/src/shared/registries/moduleHostServices.ts b/packages/app-framework/src/shared/registries/moduleHostServices.ts
new file mode 100644
index 00000000..57da2efe
--- /dev/null
+++ b/packages/app-framework/src/shared/registries/moduleHostServices.ts
@@ -0,0 +1,81 @@
+/**
+ * The host services a module store may borrow, bound late.
+ *
+ * ## Why this exists at all
+ *
+ * Modules are registered in `PlatformProvider`, which sits *above* `StoreProvider` — the launcher
+ * template has to be in the registry before the stores render, so registration cannot wait. But the
+ * ports a module wants (transport, presence, the current dataset) all live in stores that do not
+ * exist yet at that moment.
+ *
+ * Rather than reorder the tree, the deps handed to a module store are **stable objects whose methods
+ * dereference at call time**. A module holds `deps.presence` forever; what it points at is filled in
+ * when `PresenceStoreProvider` mounts. Every accessor answers safely before then — `peers()` returns
+ * an empty array, `ephemeral()` returns `null` — which is the same degrade-don't-throw contract the
+ * ports already require for a personal space with no neighbourhood.
+ *
+ * The alternative — activating modules after the stores mount — was rejected because it splits
+ * registration into two phases with different capabilities, and "which phase am I in" is exactly the
+ * kind of implicit state the last round of seam bugs came from.
+ */
+import type { Activity, DatasetHandle, EphemeralPort, ModuleStoreDeps, Peer } from '@we/schema-shared';
+
+/** What a store publishes here once it is live. All optional: a host need not provide any of it. */
+export interface ModuleHostServices {
+  dataset?: () => DatasetHandle | null;
+  datasetUri?: () => string | null;
+  selfId?: () => string | null;
+  ephemeral?: EphemeralPort;
+  presence?: {
+    peers: () => Peer[];
+    setActivity: (activity: Activity) => void;
+    clearActivity: (type: string, id?: string) => void;
+  };
+}
+
+const services: ModuleHostServices = {};
+
+/**
+ * Publish a slice of host services to registered modules.
+ *
+ * Merges rather than replaces, because the slices arrive from different stores at different times —
+ * `AdamStore` has the dataset and the transport, `PresenceStore` has the roster.
+ */
+export function provideModuleHostServices(slice: ModuleHostServices): void {
+  Object.assign(services, slice);
+}
+
+/** Test seam: drop everything between cases so one test's bindings cannot leak into the next. */
+export function resetModuleHostServices(): void {
+  for (const key of Object.keys(services)) delete services[key as keyof ModuleHostServices];
+}
+
+/**
+ * Build the deps bag handed to every module store.
+ *
+ * `signal` and `effect` come from the framework, because only the host knows which one it is running.
+ * Everything else reads through the late-bound registry above.
+ */
+export function createModuleStoreDeps(framework: {
+  signal: <T>(initial: T) => [() => T, (next: T) => void];
+  effect: (fn: () => void) => void;
+}): ModuleStoreDeps {
+  return {
+    signal: framework.signal,
+    effect: framework.effect,
+
+    dataset: () => services.dataset?.() ?? null,
+    datasetUri: () => services.datasetUri?.() ?? null,
+    selfId: () => services.selfId?.() ?? null,
+
+    // A stable function that forwards, so a module capturing `deps.ephemeral` at construction still
+    // reaches the real port once one exists.
+    ephemeral: (handle) => services.ephemeral?.(handle) ?? null,
+
+    presence: {
+      peers: () => services.presence?.peers() ?? [],
+      setActivity: (activity) => services.presence?.setActivity(activity),
+      clearActivity: (type, id) => services.presence?.clearActivity(type, id),
+    },
+  };
+}

From 3c6107e282d59d1c3bab109fc32ef4cff4791e61 Mon Sep 17 00:00:00 2001
From: jhweir <james@weco.io>
Date: Sat, 1 Aug 2026 17:33:29 +0100
Subject: [PATCH 05/12] feat(app-framework): a space decides which modules it
 runs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The live debt from #98: every registered module's chrome appeared in every
space, with no way for a community to turn one off.

Gating is a schema condition wrapped around each module's slot node, not a filter
over the registry. It needs no reactivity plumbing — `$if` already re-evaluates
when the store changes, whereas `slotRegistry` is a plain Map that would have to
become reactive — and it composes, so the module's own visibility rules still
apply underneath and a module never learns it is being gated.

An unset `Space.enabledModules` means "not decided", never "none". A space
created before this field existed falls back to the registered set and keeps
exactly the chrome it has today; treating empty as "none" would silently strip
every existing space the moment this shipped. Toggling writes the resolved list
rather than a diff, so the first toggle pins what was on by fallback.

Known gap: a space created before this build has the old SHACL shape stored in
its perspective, and shapes are only installed when a class is absent entirely
(`hasSubjectClassLink`), so adding a property to an existing model does not
re-register — there is no shape-migration path yet. The write is caught and
logged; such a space keeps the fallback and loses nothing.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .cursor/rules/we-schema.mdc                   |  8 +-
 .github/copilot-instructions.md               |  8 +-
 CLAUDE.md                                     |  8 +-
 packages/ai-context/context.json              | 18 ++++-
 packages/ai-context/src/contextData.ts        |  6 +-
 packages/ai-context/src/fragments/stores.ts   | 14 ++++
 packages/ai-context/src/schemaContext.ts      |  2 +-
 .../frameworks/solid/stores/SpaceStore.tsx    | 71 +++++++++++++++++
 .../src/shared/registries/moduleRegistry.ts   | 24 +++++-
 .../shared/schemas/shell/Settings.schema.ts   | 78 +++++++++++++++++++
 packages/models/src/entities/Space.ts         | 14 ++++
 11 files changed, 240 insertions(+), 11 deletions(-)

diff --git a/.cursor/rules/we-schema.mdc b/.cursor/rules/we-schema.mdc
index 72ecf264..66512742 100644
--- a/.cursor/rules/we-schema.mdc
+++ b/.cursor/rules/we-schema.mdc
@@ -829,8 +829,8 @@ when `relative` is enabled.
 @we/widgets:
 - CesiumGlobe — 3D globe widget using CesiumJS with a modular layer system.
 Layers are injected via factory functions (planet surface + background).
-Requires a layer factory registry mapping string names to factory functions.
-Not schema-renderable — used directly in application code.
+Registered in the app's component registry, which injects `layerFactoryRegistry` — so templates
+place it as `CesiumGlobe` without supplying that prop themselves.
   Props: ionAccessToken?: string, planetLayers?: LayerConfig<unknown>[], backgroundLayers?: LayerConfig<unknown>[], layerFactoryRegistry: Record<string, LayerFactory<any>>
 - CollapsibleSidebar
   Props: header?: JSX.Element, footer?: JSX.Element, items: CollapsibleSidebarItem[], footerItems?: CollapsibleSidebarItem[], side?: "left" | "right", position?: "static" | "absolute" | "fixed", zIndex?: number, collapsedWidth?: string, expandedWidth?: string, defaultExpanded?: boolean, expandOnHover?: boolean, transitionDuration?: number, bg?: string, border?: string, padding?: string, gap?: string, centerItems?: boolean, itemColor?: string, itemColorHover?: string, itemColorActive?: string, itemBg?: string, itemBgHover?: string, itemBgActive?: string, itemPadding?: string, itemGap?: string, badgeBg?: string, badgeColor?: string, iconSize?: IconSize, onItemClick?: ((item: CollapsibleSidebarItem) => void), onExpandedChange?: ((expanded: boolean) => void)
@@ -1191,6 +1191,7 @@ Space extends WeNode:
   - coverImage: string [we://thumbnail]
   - defaultTemplateId: string [we://default_template_id]
   - defaultThemeId: string [we://default_theme_id]
+  - enabledModules: string [we://enabled_modules]
   Relations:
   - location: HasOne [we://location]
 
@@ -1368,6 +1369,8 @@ SpaceStore:
   - foreignSpacePrefill: { name, description, avatar } | null — detected from a foreign app's own model (e.g. Flux's Community) for prefilling the "Initialize as WE space" gate; null once the perspective is a WE space or no recognized foreign model is found
   - signalTypes: array of SignalType objects (community-created reaction/vote types)
   - signalTypesBySlug: Record<slug, SignalType> — computed map; access via { $store: "spaceStore.signalTypesBySlug.<slug>" }; use .id for the UUID
+  - enabledModules: string[] — ids of the feature modules this space has turned on. An unset value means "not decided", not "none": it falls back to every registered module, so spaces predating the setting keep the chrome they had
+  - moduleSettings: { id, name, description, icon, enabled }[] — every registered module paired with whether this space has it on; the shape the settings list renders
 - Actions:
   - createPost(editorState: unknown): creates a new post
   - updatePost(postId: string, editorState: unknown): reconciles an edited post against its existing blocks — updates/reuses blocks whose id survived the edit, creates new ones, deletes ones no longer present
@@ -1376,6 +1379,7 @@ SpaceStore:
   - createSignalType(config: Partial<SignalType>): creates a new signal type in the community; slug auto-derived from name if blank
   - upsertSignal(nodeId: string, signalTypeId: string, value: number): adds or updates a signal on a node; value=0 deletes it
   - navigateToSpace(spaceId: string, view?: string): navigates to a space — accepts a perspective UUID or a neighbourhood CID (sharedUrl without the neighbourhood:// prefix); pre-loads space templates before switching so the template and data arrive together
+  - setModuleEnabled(moduleId: string, enabled: boolean): turns a feature module on or off for the current space; writes the resolved list, so the first toggle also pins whatever was on by fallback
 
 AiStore:
 - State:
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index 72ecf264..66512742 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -829,8 +829,8 @@ when `relative` is enabled.
 @we/widgets:
 - CesiumGlobe — 3D globe widget using CesiumJS with a modular layer system.
 Layers are injected via factory functions (planet surface + background).
-Requires a layer factory registry mapping string names to factory functions.
-Not schema-renderable — used directly in application code.
+Registered in the app's component registry, which injects `layerFactoryRegistry` — so templates
+place it as `CesiumGlobe` without supplying that prop themselves.
   Props: ionAccessToken?: string, planetLayers?: LayerConfig<unknown>[], backgroundLayers?: LayerConfig<unknown>[], layerFactoryRegistry: Record<string, LayerFactory<any>>
 - CollapsibleSidebar
   Props: header?: JSX.Element, footer?: JSX.Element, items: CollapsibleSidebarItem[], footerItems?: CollapsibleSidebarItem[], side?: "left" | "right", position?: "static" | "absolute" | "fixed", zIndex?: number, collapsedWidth?: string, expandedWidth?: string, defaultExpanded?: boolean, expandOnHover?: boolean, transitionDuration?: number, bg?: string, border?: string, padding?: string, gap?: string, centerItems?: boolean, itemColor?: string, itemColorHover?: string, itemColorActive?: string, itemBg?: string, itemBgHover?: string, itemBgActive?: string, itemPadding?: string, itemGap?: string, badgeBg?: string, badgeColor?: string, iconSize?: IconSize, onItemClick?: ((item: CollapsibleSidebarItem) => void), onExpandedChange?: ((expanded: boolean) => void)
@@ -1191,6 +1191,7 @@ Space extends WeNode:
   - coverImage: string [we://thumbnail]
   - defaultTemplateId: string [we://default_template_id]
   - defaultThemeId: string [we://default_theme_id]
+  - enabledModules: string [we://enabled_modules]
   Relations:
   - location: HasOne [we://location]
 
@@ -1368,6 +1369,8 @@ SpaceStore:
   - foreignSpacePrefill: { name, description, avatar } | null — detected from a foreign app's own model (e.g. Flux's Community) for prefilling the "Initialize as WE space" gate; null once the perspective is a WE space or no recognized foreign model is found
   - signalTypes: array of SignalType objects (community-created reaction/vote types)
   - signalTypesBySlug: Record<slug, SignalType> — computed map; access via { $store: "spaceStore.signalTypesBySlug.<slug>" }; use .id for the UUID
+  - enabledModules: string[] — ids of the feature modules this space has turned on. An unset value means "not decided", not "none": it falls back to every registered module, so spaces predating the setting keep the chrome they had
+  - moduleSettings: { id, name, description, icon, enabled }[] — every registered module paired with whether this space has it on; the shape the settings list renders
 - Actions:
   - createPost(editorState: unknown): creates a new post
   - updatePost(postId: string, editorState: unknown): reconciles an edited post against its existing blocks — updates/reuses blocks whose id survived the edit, creates new ones, deletes ones no longer present
@@ -1376,6 +1379,7 @@ SpaceStore:
   - createSignalType(config: Partial<SignalType>): creates a new signal type in the community; slug auto-derived from name if blank
   - upsertSignal(nodeId: string, signalTypeId: string, value: number): adds or updates a signal on a node; value=0 deletes it
   - navigateToSpace(spaceId: string, view?: string): navigates to a space — accepts a perspective UUID or a neighbourhood CID (sharedUrl without the neighbourhood:// prefix); pre-loads space templates before switching so the template and data arrive together
+  - setModuleEnabled(moduleId: string, enabled: boolean): turns a feature module on or off for the current space; writes the resolved list, so the first toggle also pins whatever was on by fallback
 
 AiStore:
 - State:
diff --git a/CLAUDE.md b/CLAUDE.md
index 72ecf264..66512742 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -829,8 +829,8 @@ when `relative` is enabled.
 @we/widgets:
 - CesiumGlobe — 3D globe widget using CesiumJS with a modular layer system.
 Layers are injected via factory functions (planet surface + background).
-Requires a layer factory registry mapping string names to factory functions.
-Not schema-renderable — used directly in application code.
+Registered in the app's component registry, which injects `layerFactoryRegistry` — so templates
+place it as `CesiumGlobe` without supplying that prop themselves.
   Props: ionAccessToken?: string, planetLayers?: LayerConfig<unknown>[], backgroundLayers?: LayerConfig<unknown>[], layerFactoryRegistry: Record<string, LayerFactory<any>>
 - CollapsibleSidebar
   Props: header?: JSX.Element, footer?: JSX.Element, items: CollapsibleSidebarItem[], footerItems?: CollapsibleSidebarItem[], side?: "left" | "right", position?: "static" | "absolute" | "fixed", zIndex?: number, collapsedWidth?: string, expandedWidth?: string, defaultExpanded?: boolean, expandOnHover?: boolean, transitionDuration?: number, bg?: string, border?: string, padding?: string, gap?: string, centerItems?: boolean, itemColor?: string, itemColorHover?: string, itemColorActive?: string, itemBg?: string, itemBgHover?: string, itemBgActive?: string, itemPadding?: string, itemGap?: string, badgeBg?: string, badgeColor?: string, iconSize?: IconSize, onItemClick?: ((item: CollapsibleSidebarItem) => void), onExpandedChange?: ((expanded: boolean) => void)
@@ -1191,6 +1191,7 @@ Space extends WeNode:
   - coverImage: string [we://thumbnail]
   - defaultTemplateId: string [we://default_template_id]
   - defaultThemeId: string [we://default_theme_id]
+  - enabledModules: string [we://enabled_modules]
   Relations:
   - location: HasOne [we://location]
 
@@ -1368,6 +1369,8 @@ SpaceStore:
   - foreignSpacePrefill: { name, description, avatar } | null — detected from a foreign app's own model (e.g. Flux's Community) for prefilling the "Initialize as WE space" gate; null once the perspective is a WE space or no recognized foreign model is found
   - signalTypes: array of SignalType objects (community-created reaction/vote types)
   - signalTypesBySlug: Record<slug, SignalType> — computed map; access via { $store: "spaceStore.signalTypesBySlug.<slug>" }; use .id for the UUID
+  - enabledModules: string[] — ids of the feature modules this space has turned on. An unset value means "not decided", not "none": it falls back to every registered module, so spaces predating the setting keep the chrome they had
+  - moduleSettings: { id, name, description, icon, enabled }[] — every registered module paired with whether this space has it on; the shape the settings list renders
 - Actions:
   - createPost(editorState: unknown): creates a new post
   - updatePost(postId: string, editorState: unknown): reconciles an edited post against its existing blocks — updates/reuses blocks whose id survived the edit, creates new ones, deletes ones no longer present
@@ -1376,6 +1379,7 @@ SpaceStore:
   - createSignalType(config: Partial<SignalType>): creates a new signal type in the community; slug auto-derived from name if blank
   - upsertSignal(nodeId: string, signalTypeId: string, value: number): adds or updates a signal on a node; value=0 deletes it
   - navigateToSpace(spaceId: string, view?: string): navigates to a space — accepts a perspective UUID or a neighbourhood CID (sharedUrl without the neighbourhood:// prefix); pre-loads space templates before switching so the template and data arrive together
+  - setModuleEnabled(moduleId: string, enabled: boolean): turns a feature module on or off for the current space; writes the resolved list, so the first toggle also pins whatever was on by fallback
 
 AiStore:
 - State:
diff --git a/packages/ai-context/context.json b/packages/ai-context/context.json
index 07a55fae..91a17a1a 100644
--- a/packages/ai-context/context.json
+++ b/packages/ai-context/context.json
@@ -3620,7 +3620,7 @@
     },
     {
       "name": "CesiumGlobe",
-      "description": "3D globe widget using CesiumJS with a modular layer system.\nLayers are injected via factory functions (planet surface + background).\nRequires a layer factory registry mapping string names to factory functions.\nNot schema-renderable — used directly in application code.",
+      "description": "3D globe widget using CesiumJS with a modular layer system.\nLayers are injected via factory functions (planet surface + background).\nRegistered in the app's component registry, which injects `layerFactoryRegistry` — so templates\nplace it as `CesiumGlobe` without supplying that prop themselves.",
       "props": [
         {
           "name": "ionAccessToken",
@@ -4662,6 +4662,12 @@
           "type": "string",
           "predicate": "we://default_theme_id",
           "required": false
+        },
+        {
+          "name": "enabledModules",
+          "type": "string",
+          "predicate": "we://enabled_modules",
+          "required": false
         }
       ],
       "relations": [
@@ -5536,6 +5542,13 @@
         },
         "signalTypesBySlug": {
           "type": "object"
+        },
+        "enabledModules": {
+          "type": "array"
+        },
+        "moduleSettings": {
+          "type": "array",
+          "properties": ["id", "name", "description", "icon", "enabled"]
         }
       },
       "actions": [
@@ -5545,7 +5558,8 @@
         "updateSpaceImage",
         "createSignalType",
         "upsertSignal",
-        "navigateToSpace"
+        "navigateToSpace",
+        "setModuleEnabled"
       ]
     },
     {
diff --git a/packages/ai-context/src/contextData.ts b/packages/ai-context/src/contextData.ts
index 74c42ba9..b7cb3029 100644
--- a/packages/ai-context/src/contextData.ts
+++ b/packages/ai-context/src/contextData.ts
@@ -1342,7 +1342,7 @@ export const contextData: ContextData = {
     {
       name: 'CesiumGlobe',
       description:
-        '3D globe widget using CesiumJS with a modular layer system.\nLayers are injected via factory functions (planet surface + background).\nRequires a layer factory registry mapping string names to factory functions.\nNot schema-renderable — used directly in application code.',
+        "3D globe widget using CesiumJS with a modular layer system.\nLayers are injected via factory functions (planet surface + background).\nRegistered in the app's component registry, which injects `layerFactoryRegistry` — so templates\nplace it as `CesiumGlobe` without supplying that prop themselves.",
       props: [
         { name: 'ionAccessToken', type: 'string', optional: true },
         { name: 'planetLayers', type: 'LayerConfig<unknown>[]', optional: true },
@@ -1705,6 +1705,7 @@ export const contextData: ContextData = {
         { name: 'coverImage', type: 'string', predicate: 'we://thumbnail', required: false },
         { name: 'defaultTemplateId', type: 'string', predicate: 'we://default_template_id', required: false },
         { name: 'defaultThemeId', type: 'string', predicate: 'we://default_theme_id', required: false },
+        { name: 'enabledModules', type: 'string', predicate: 'we://enabled_modules', required: false },
       ],
       relations: [{ name: 'location', kind: 'HasOne', predicate: 'we://location' }],
     },
@@ -2139,6 +2140,8 @@ export const contextData: ContextData = {
           ],
         },
         signalTypesBySlug: { type: 'object' },
+        enabledModules: { type: 'array' },
+        moduleSettings: { type: 'array', properties: ['id', 'name', 'description', 'icon', 'enabled'] },
       },
       actions: [
         'createPost',
@@ -2148,6 +2151,7 @@ export const contextData: ContextData = {
         'createSignalType',
         'upsertSignal',
         'navigateToSpace',
+        'setModuleEnabled',
       ],
     },
     {
diff --git a/packages/ai-context/src/fragments/stores.ts b/packages/ai-context/src/fragments/stores.ts
index d5a2cf8c..e55d0a17 100644
--- a/packages/ai-context/src/fragments/stores.ts
+++ b/packages/ai-context/src/fragments/stores.ts
@@ -145,6 +145,13 @@ export const storeEntries: StoreEntry[] = [
       signalTypesBySlug: {
         type: 'object',
       },
+      enabledModules: {
+        type: 'array',
+      },
+      moduleSettings: {
+        type: 'array',
+        properties: ['id', 'name', 'description', 'icon', 'enabled'],
+      },
     },
     actions: [
       'createPost',
@@ -154,6 +161,7 @@ export const storeEntries: StoreEntry[] = [
       'createSignalType',
       'upsertSignal',
       'navigateToSpace',
+      'setModuleEnabled',
     ],
   },
   {
@@ -355,6 +363,10 @@ function generateStoresText(entries: StoreEntry[]): string {
         signalTypes: 'array of SignalType objects (community-created reaction/vote types)',
         signalTypesBySlug:
           'Record<slug, SignalType> — computed map; access via { $store: "spaceStore.signalTypesBySlug.<slug>" }; use .id for the UUID',
+        enabledModules:
+          'string[] — ids of the feature modules this space has turned on. An unset value means "not decided", not "none": it falls back to every registered module, so spaces predating the setting keep the chrome they had',
+        moduleSettings:
+          '{ id, name, description, icon, enabled }[] — every registered module paired with whether this space has it on; the shape the settings list renders',
       },
       actions: {
         createPost: '(editorState: unknown): creates a new post',
@@ -369,6 +381,8 @@ function generateStoresText(entries: StoreEntry[]): string {
           '(nodeId: string, signalTypeId: string, value: number): adds or updates a signal on a node; value=0 deletes it',
         navigateToSpace:
           '(spaceId: string, view?: string): navigates to a space — accepts a perspective UUID or a neighbourhood CID (sharedUrl without the neighbourhood:// prefix); pre-loads space templates before switching so the template and data arrive together',
+        setModuleEnabled:
+          '(moduleId: string, enabled: boolean): turns a feature module on or off for the current space; writes the resolved list, so the first toggle also pins whatever was on by fallback',
       },
     },
     aiStore: {
diff --git a/packages/ai-context/src/schemaContext.ts b/packages/ai-context/src/schemaContext.ts
index af8cf3be..1bf0235f 100644
--- a/packages/ai-context/src/schemaContext.ts
+++ b/packages/ai-context/src/schemaContext.ts
@@ -1,4 +1,4 @@
 // AUTO-GENERATED by packages/ai-context/src/generate.ts
 // Do not edit manually. Run: pnpm --filter @we/ai-context generate-context
 
-export const schemaContext = "## Schema Structure\n\nA schema is a tree of nodes. Each node can have:\n- type: The component to render (string, e.g. \"we-button\", \"Column\")\n- props: An object of props for the component\n- children: An array of child nodes (or strings for text), or token objects like { $store: '...' } or { $concat: [...] }.\n- slots: Named slots for advanced composition (optional)\n- slot: The name of the slot this node should be rendered into (optional)\n- routes: For routing components, an array of nestable route objects (optional)\n- styles: Raw CSS escape hatch — Record<string, string | number> applied as inline styles on a **wrapper div** that surrounds the component. Use only for CSS that must live on a wrapper: filter, clip-path, backdrop-filter, mix-blend-mode. When present the wrapper participates in layout (no display:contents), so CSS effects apply correctly. **Important:** this is NOT the same as props.styles. If you want to apply custom CSS to a Column, Row, or Grid's own element (e.g. a background image), put it in props.styles instead — node-level styles go on a wrapper div around the component and will be hidden behind the component's own background.\n\nExample node:\n{\n  \"type\": \"we-button\",\n  \"props\": {\n    \"onClick\": { \"$action\": \"routeStore.navigate\", \"args\": [\"/home\"] }\n  },\n  \"children\": [\n    { \"type\": \"we-icon\", \"props\": { \"name\": \"house\" } },\n    { \"type\": \"we-text\", \"props\": { \"size\": \"600\" }, \"children\": [\"Home\"] }\n  ]\n}\n\n## Prop-level Dynamic Logic & Expressions\n\nSpecial tokens in props enable dynamic, reactive, or computed behavior.\n\nStore reference:\n{ \"$store\": \"storeName.property.path\" }\nResolves a value from a named store, supporting nested paths.\n\nAction/event:\n{ \"$action\": \"storeName.method\", \"args\": [...] }\nCalls a method on a store, optionally with arguments (which can themselves be tokens).\nSupports async lifecycle callbacks — fired after the store method's Promise resolves/rejects:\n  onSuccess: [...actions]  — fired on resolve; '$result' (and '$result.<path>') in args refers to the resolved value\n  onError: [...actions]    — fired on reject; '$result.message' etc. refers to the error object\n  onFinally: [...actions]  — fired regardless of outcome\nNon-promise (synchronous) methods are unaffected — lifecycle keys are ignored.\nExample — close modal after async submission:\n{ \"$action\": \"adamStore.createSpace\", \"args\": [...], \"onSuccess\": [{ \"$setLocal\": \"modalOpen\", \"value\": false }] }\nExample — navigate to newly created item:\n{ \"$action\": \"adamStore.createSpace\", \"args\": [...], \"onSuccess\": [{ \"$setLocal\": \"modalOpen\", \"value\": false }, { \"$action\": \"routeStore.navigate\", \"args\": [{ \"$concat\": [\"/space/\", \"$result.uuid\"] }] }] }\n\nModel mutations via $action (use these for creating/updating/deleting model instances):\nmodel.create — creates a model instance in the current perspective (default) or a specified one:\n{ \"$action\": \"model.create\", \"args\": [\"ModelName\", { \"field\": \"value\" }, { \"perspective\": \"adamStore.rootPerspective\" }] }\nThe third argument is an options object. Omit it to use the current space perspective.\n\nmodel.update — updates a model instance:\n{ \"$action\": \"model.update\", \"args\": [\"ModelName\", \"$item.id\", { \"field\": \"newValue\" }] }\nTo target a non-current perspective: { \"$action\": \"model.update\", \"args\": [\"ModelName\", \"$item.id\", { \"field\": \"value\" }, { \"perspective\": \"adamStore.rootPerspective\" }] }\n\nmodel.delete — deletes a model instance:\n{ \"$action\": \"model.delete\", \"args\": [\"ModelName\", \"$item.id\"] }\n\nUse perspective: 'adamStore.rootPerspective' for we-root models (AgentSettings, ChatSession, etc.).\nUse the default (no perspective) for space-scoped models (Space, Signal, etc.).\n\nConditional logic:\n{ \"$if\": { \"condition\": ..., \"then\": ..., \"else\": ... } }\nEvaluates condition; if truthy, returns then, else returns else.\n\nMap/iterate:\n{ \"$map\": { \"items\": { \"$store\": \"templateStore.templates\" }, \"select\": { ... } } }\nIterates over an array, mapping each item to a new object using the select mapping.\n\nPick:\n{ \"$pick\": { \"from\": { \"$store\": \"userStore.profile\" }, \"props\": [\"name\", \"email\"] } }\nPicks specific properties from an object.\n\nConcat (string building):\n{ \"$concat\": [\"part1\", \"$context.value\", \"part2\"] }\nJoins multiple parts into a single string.\n\nContext references:\nStrings starting with \"$\" followed by a context key resolve to context values.\nExample: \"$space.name\" resolves to the name property of the space context variable.\nDot paths supported: \"$item.profile.avatar\".\n\nEquality / inequality checks:\n{ \"$eq\": [a, b] } — strict equality\n{ \"$ne\": [a, b] } — strict inequality\n\nNumeric comparisons:\n{ \"$lt\": [a, b] } — a < b (less than)\n{ \"$gt\": [a, b] } — a > b (greater than)\nExample: { \"$gt\": [{ \"$count\": { \"items\": { \"$store\": \"listStore.items\" } } }, 0] }\n\nSet membership:\n{ \"$in\": [value, array] } — true if array contains value (false if second operand is not an array)\nExample: { \"$in\": [{ \"$store\": \"spaceStore.uuid\" }, { \"$store\": \"adamStore.systemPerspectiveUuids\" }] }\nExample: { \"$in\": [\"$item.role\", [\"admin\", \"moderator\"]] }\n\nBoolean logic:\n{ \"$and\": [a, b, ...] } — all truthy\n{ \"$or\": [a, b, ...] } — any truthy\n{ \"$not\": a } — negation\n\nArray operators:\n{ \"$filter\": { \"items\": <array>, \"where\": { \"field\": \"value\", ... } } }\nFilters an array to items where all where conditions match. Mirrors the $query where operator set:\n\n  { \"field\": \"value\" }                                   — strict equality\n  { \"field\": { \"not\": \"value\" } }                        — inequality; array form excludes multiple values\n  { \"field\": { \"contains\": \"text\" } }                    — case-insensitive substring match (strings only)\n  { \"field\": { \"exists\": true } }                        — non-null / non-undefined presence check\n  { \"field\": { \"exists\": false } }                       — null or undefined check\n\nWhere values (including those inside operator objects) are resolved through the prop system,\nso $store, $local, and context refs like { \"$local\": \"searchText\" } all work.\n\n$query-only logical combinators (OR / AND / NOT) — NOT supported in $filter, only in $query's where:\n  { \"OR\": [ { \"field\": \"value\" }, { \"field2\": \"value2\" } ] }   — matches if ANY branch matches\n  { \"AND\": [ { ... }, { ... } ] }                              — matches if ALL branches match (sibling keys at the\n                                                                  same level are already implicitly ANDed — use AND\n                                                                  to group a set of conditions alongside an OR/NOT)\n  { \"NOT\": { \"field\": \"value\" } }                              — matches if the branch does NOT match\nBranches are full where-clause objects (can contain multiple fields, and can nest OR/AND/NOT inside each other).\nSibling keys alongside OR/AND/NOT at the same level are implicitly ANDed with it.\nExample — case-insensitive search across two fields:\n{\n  \"$query\": {\n    \"entity\": \"Space\",\n    \"where\": {\n      \"OR\": [\n        { \"name\": { \"contains\": { \"$local\": \"searchText\" } } },\n        { \"description\": { \"contains\": { \"$local\": \"searchText\" } } }\n      ]\n    }\n  }\n}\nNote: using OR/AND/NOT disables the SPARQL-level sort/pagination pushdown (see count-projection and\nrelation-property ordering below) — those orderings silently stop working if combined with OR/AND/NOT in the\nsame query's where clause, because the fallback sort runs before the projection/relation data is attached.\n\nExamples:\n{ \"$filter\": { \"items\": { \"$store\": \"spaceStore.members\" }, \"where\": { \"role\": \"admin\" } } }\n{ \"$filter\": { \"items\": { \"$store\": \"spaceStore.members\" }, \"where\": { \"location\": { \"exists\": true }, \"handle\": { \"contains\": { \"$local\": \"searchText\" } } } } }\n\n{ \"$count\": { \"items\": <array> } }\nReturns the length of an array.\nExample: { \"badge\": { \"$count\": { \"items\": { \"$store\": \"notificationStore.unread\" } } } }\n\n{ \"$find\": { \"items\": <array>, \"where\"?: { ... }, \"select\"?: \"fieldName\" } }\nFinds the first matching item. where is optional (returns first item if omitted). select plucks a single field.\nExample: { \"$find\": { \"items\": { \"$store\": \"spaceStore.members\" }, \"where\": { \"id\": \"$item.creatorId\" }, \"select\": \"name\" } }\n\n{ \"$plural\": { \"count\": <number>, \"one\": \"singular\", \"other\": \"plural\" } }\nReturns \"one\" when count === 1, otherwise \"other\". Use in children arrays for count-noun labels.\ncount is resolved through the prop system — any numeric expression ($count, $store, context ref) works.\nExample: { \"$plural\": { \"count\": { \"$count\": { \"items\": { \"$store\": \"spaceStore.members\" } } }, \"one\": \"Member\", \"other\": \"Members\" } }\nCompose with we-number for a full \"N Members\" display:\n  we-number (value: { \"$count\": ... }, shorten: true) + we-text (children: [{ \"$plural\": { \"count\": { \"$count\": ... }, \"one\": \"Member\", \"other\": \"Members\" } }])\n\nQuery (data retrieval):\n{ \"$query\": { \"entity\": \"ModelName\", \"where\": { \"field\": \"value\" }, \"limit\": 10, \"order\": { \"field\": \"asc\" } } }\nQueries the current dataset for entity instances. Always returns an array.\nOptions: entity (required), where, order, limit, offset, include, scope, dataset, subscribe.\nsubscribe defaults to true — reactive live updates. Set subscribe: false to do a one-time fetch.\nBy default $query targets the current dataset ($currentDataset). Use dataset to query a different dataset —\nrequired when reading entities from an external app (e.g. Flux) that is open as a WE space:\n{ \"$query\": { \"entity\": \"Channel\", \"dataset\": \"$currentDataset\" } }\n\nBackend-neutral identity & dataset refs — prefer these over adamStore.* store paths inside $query and conditions:\n- $currentDataset — the currently active dataset (an AD4M perspective, in the AD4M backend). Use as a dataset value.\n- $me — the current agent's identity object. Use $me.did for their DID (ownership checks, author filters, e.g. { \"$eq\": [\"$post.author\", \"$me.did\"] }); $me.handle / $me.avatar for profile fields once loaded.\n\nEager-loading relations with include (most common relational pattern):\ninclude hydrates related model instances in the same query — no extra fetches needed.\nRelation names come from the HasMany relations listed for each model in externalModels.\n\nSimple include — hydrate all related instances:\n{ \"$query\": { \"entity\": \"Channel\", \"include\": { \"conversations\": true } } }\nEach item in the result will have a conversations array of hydrated Conversation objects.\n\nSub-query include — filter, sort, or limit the related records:\n{ \"$query\": { \"entity\": \"Channel\", \"include\": { \"conversations\": { \"order\": { \"createdAt\": \"desc\" }, \"limit\": 10 } } } }\n\nNested include — hydrate relations of relations:\n{ \"$query\": { \"entity\": \"Channel\", \"include\": { \"conversations\": { \"include\": { \"messages\": true } } } } }\nNesting can go as deep as needed. Each level adds one batched fetch (not N+1).\n\nCount projection — add a derived numeric field:\n{ \"$query\": { \"entity\": \"Post\", \"include\": { \"$likeCount\": { \"from\": \"likes\", \"count\": true } } } }\nThe $-prefixed key becomes a new field on each result item (e.g. item.$likeCount = 42).\n\nSorting by a count projection — order can reference a $-prefixed count key directly, sorting by the aggregate:\n{\n  \"$query\": {\n    \"entity\": \"Post\",\n    \"limit\": 20,\n    \"order\": { \"$likeCount\": \"desc\" },\n    \"include\": { \"$likeCount\": { \"from\": \"likes\", \"count\": true } }\n  }\n}\nRequirements: only a single order key is supported when it targets a projection (mixing it with a second sort key falls back\nto a plain property sort), and the query must also specify limit or offset — without one the count isn't computed yet at\nsort time and the order silently has no effect. Always pair count-projection ordering with a limit.\nCombine with $if for a user-togglable sort field (e.g. \"newest\" vs \"most liked\"):\n{\n  \"order\": {\n    \"$if\": {\n      \"condition\": { \"$eq\": [{ \"$local\": \"sortField\" }, \"likes\"] },\n      \"then\": { \"$likeCount\": { \"$local\": \"sortDirection\" } },\n      \"else\": { \"createdAt\": { \"$local\": \"sortDirection\" } }\n    }\n  }\n}\n\nSorting by a related model property — order can reference a dotted \"relation.property\" path for a HasOne/HasMany\nrelation declared on the model, sorting by a scalar property on the related instance:\n{\n  \"$query\": {\n    \"entity\": \"Space\",\n    \"limit\": 20,\n    \"order\": { \"location.country\": \"asc\" },\n    \"include\": { \"location\": true }\n  }\n}\nSame requirements as count-projection ordering above: only a single order key, and pair with limit/offset — without\none the relation data isn't attached yet at sort time and the order silently has no effect. include isn't required\nfor the sort itself (the relation is resolved from the model's declared shape), but you'll usually want it anyway to\nread the field in the UI (e.g. \"$space.location.country\").\nCombine with $if the same way as count-projection ordering to let the user toggle between sort fields.\n\nSingle-item projection — add a derived field that resolves to one instance or null:\n{ \"$query\": { \"entity\": \"Post\", \"include\": { \"$myLike\": { \"from\": \"likes\", \"where\": { \"author\": \"$me.did\" }, \"limit\": 1 } } } }\nWith limit: 1 the field unwraps to T | null instead of an array.\n\ninclude only works with typed relations — ones where the target model class is known.\nFor WE models this is always the case. For external models, check the externalModels listing:\nrelations marked \"→ ModelName\" are typed (safe for include); relations marked \"parent query only\"\nare untyped and will crash at runtime if used with include — use a scope drill-down instead.\n\nRelational queries — fetch a parent record's children (drill-down navigation):\n{ \"$query\": { \"entity\": \"Conversation\", \"scope\": { \"anchor\": \"Channel\", \"via\": \"conversations\", \"anchorId\": \"$channel.id\" } } }\nscope.anchor is the parent entity type; scope.via is its relation whose targets are this query's entity (the\nHasMany relation listed for that entity in externalModels); scope.anchorId is the parent record's id (typically\nfrom a $each context variable or a route segment). The adapter resolves the relation to a backend handle —\nno protocol details live in the template.\nUse this pattern when navigating to a detail route and loading only that record's children.\nFor external-app datasets, always add dataset: \"$currentDataset\".\n\nLocal state (scoped ephemeral state):\nDeclare on any node: \"$localState\": { \"name\": { \"type\": \"string\", \"initial\": \"\" } }\nSupported types: \"string\", \"boolean\", \"number\", \"function\", \"object\".\nRead:  { \"$local\": \"name\" } — returns the signal value (reactive).\n       { \"$local\": \"name.nested.path\" } — dot-notation reads into object-typed fields (reactive).\nWrite: { \"$setLocal\": \"name\", \"from\": \"$event.target.value\" } — event handler that updates the signal.\n       { \"$setLocal\": \"name\", \"value\": \"literal\" } — sets to a literal value (string, number, boolean, null, object).\n       { \"$setLocal\": \"name\", \"merge\": { \"field\": \"$event.detail\" } } — shallow-merges fields into an object-typed signal. Values are resolved as event paths (e.g. \"$event.detail\") or passed as literals. Use for partial updates to object state.\nToggle: { \"$toggleLocal\": \"fieldName\" } — toggles a boolean field (equivalent to setting it to !current). Use for show/hide, open/close, expand/collapse patterns.\nCall function: { \"$callLocal\": \"fieldName\" } — event handler that calls the function stored in a function-typed local field.\n  Used when a child component needs to trigger a callback passed in via $localState.\n  The field must be declared as type: 'function' and set via $setLocal.\n  Example: { \"onClick\": { \"$callLocal\": \"onConfirm\" } }\nState is created on mount and destroyed on unmount. Nested $localState declarations merge, inner fields shadow outer.\n$local values can be used in $action args: { \"$action\": \"store.method\", \"args\": [{ \"$local\": \"name\" }] }\n\nObject-typed local state (consolidating related scalar fields):\nWhen several related fields share a common condition on their initial values (e.g. all null/empty when a store value is absent), prefer a single \"object\" field seeded from the store, then read sub-fields with dot-notation and write with merge.\nExample — location object (replaces 5 separate scalar fields with $if guards):\n  \"$localState\": { \"location\": { \"type\": \"object\", \"initial\": { \"$store\": \"spaceStore.currentSpace.location\" } } }\n  Read:  { \"$local\": \"location.latitude\" }, { \"$local\": \"location.city\" }\n  Write (picker confirm): { \"$setLocal\": \"location\", \"from\": \"$event.detail\" }\n  Write (partial edit):   { \"$setLocal\": \"location\", \"merge\": { \"city\": \"$event.detail\" } }\n  Write (clear):          { \"$setLocal\": \"location\", \"value\": null }\n  Condition (has location): { \"$local\": \"location\" }\nUse \"object\" whenever you would otherwise write 3+ related scalar fields each needing $if on their initial value.\n\nHoisted query state ($queries):\nDeclare on any node to run reactive subscriptions at the node root and expose results in $local.\nSolves two problems: avoids N duplicate subscriptions inside $each loops, and makes query results available for $if conditions.\n\"$queries\": { \"signalTypes\": { \"entity\": \"SignalType\", \"subscribe\": true } }\nResults are injected into $local as read-only reactive arrays, accessible via { \"$local\": \"signalTypes\" }.\nQuery options are identical to $each's $query prop (entity, where, order, limit, include, dataset, subscribe).\n$queries and $localState share the same $local namespace — avoid duplicate names across both.\n$setLocal will warn and no-op on $queries entries (they are read-only).\nUse with $count + $gt for conditional visibility:\n{ \"condition\": { \"$gt\": [{ \"$count\": { \"items\": { \"$local\": \"signalTypes\" } } }, 0] } }\nExample:\n{\n  \"$queries\": { \"signalTypes\": { \"entity\": \"SignalType\", \"subscribe\": true } },\n  \"type\": \"Column\",\n  \"children\": [\n    {\n      \"type\": \"$each\",\n      \"props\": { \"items\": { \"$local\": \"signalTypes\" }, \"as\": \"sig\" },\n      \"children\": [...]\n    }\n  ]\n}\n\nBoolean toggle pattern (show/hide comments, expand/collapse sections, etc.):\n{\n  \"$localState\": { \"showComments\": { \"type\": \"boolean\", \"initial\": false } },\n  \"children\": [\n    {\n      \"type\": \"we-button\",\n      \"props\": {\n        \"variant\": \"ghost\",\n        \"onClick\": { \"$toggleLocal\": \"showComments\" }\n      },\n      \"children\": [{ \"type\": \"we-icon\", \"props\": { \"name\": \"chat-circle\" } }]\n    },\n    {\n      \"type\": \"$if\",\n      \"props\": {\n        \"condition\": { \"$local\": \"showComments\" },\n        \"then\": { \"type\": \"Column\", \"children\": [{ \"type\": \"we-text\", \"children\": [\"Comments visible\"] }] }\n      }\n    }\n  ]\n}\n\nForm validation (extends $localState):\nDeclare validation rules on fields:\n\"$localState\": {\n  \"email\": {\n    \"type\": \"string\",\n    \"initial\": \"\",\n    \"validate\": [\n      { \"rule\": \"required\", \"message\": \"Email is required\" },\n      { \"rule\": \"pattern\", \"value\": \"^[^@]+@[^@]+$\", \"message\": \"Invalid email\" }\n    ]\n  }\n}\n\nBuilt-in rules: required, minLength (value: N), maxLength (value: N), min (value: N), max (value: N), pattern (value: regex string), match (field: otherFieldName). All accept optional \"message\" override.\n\nRead tokens:\n{ \"$error\": \"fieldName\" } — first validation error message (only shown after field is touched), or \"\".\n{ \"$valid\": \"fieldName\" } — true if all rules pass (regardless of touched state).\n{ \"$touched\": \"fieldName\" } — true after the field has been blurred/touched.\n{ \"$formValid\": \"$scope\" } — true if ALL validated fields in the current $localState scope pass.\n\nAction tokens:\n{ \"$touch\": \"fieldName\" } — marks a single field as touched (use in onBlur).\n{ \"$touch\": \"$all\" } — marks all fields in scope as touched (use before submit guard).\n{ \"$resetLocal\": \"$scope\" } — resets all fields to initial values and clears touched state.\n\nHandler arrays (compose multiple actions on one event):\n{ \"onClick\": [{ \"$touch\": \"$all\" }, { \"$if\": { \"condition\": { \"$formValid\": \"$scope\" }, \"then\": { \"$action\": \"store.submit\", \"onSuccess\": [{ \"$setLocal\": \"modalOpen\", \"value\": false }] } } }] }\nArray entries execute sequentially. Non-function entries (e.g. $if with false condition) are skipped.\nPrefer onSuccess over a bare $setLocal before the $action — the bare form closes the modal immediately (losing the loading spinner); onSuccess waits for the Promise to resolve.\n\nTypical form pattern:\n{\n  \"$localState\": { \"name\": { \"type\": \"string\", \"initial\": \"\", \"validate\": [{ \"rule\": \"required\" }] } },\n  \"children\": [\n    {\n      \"type\": \"we-form-field\",\n      \"props\": { \"label\": \"Name\", \"error\": { \"$error\": \"name\" } },\n      \"children\": [{\n        \"type\": \"we-input\",\n        \"props\": {\n          \"value\": { \"$local\": \"name\" },\n          \"onInput\": { \"$setLocal\": \"name\", \"from\": \"$event.detail\" },\n          \"onBlur\": { \"$touch\": \"name\" }\n        }\n      }]\n    },\n    {\n      \"type\": \"we-button\",\n      \"props\": {\n        \"disabled\": { \"$not\": { \"$formValid\": \"$scope\" } },\n        \"onClick\": [\n          { \"$touch\": \"$all\" },\n          { \"$if\": { \"condition\": { \"$formValid\": \"$scope\" }, \"then\": { \"$action\": \"store.save\", \"args\": [{ \"$local\": \"name\" }], \"onSuccess\": [{ \"$setLocal\": \"submitDone\", \"value\": true }] } } }\n        ]\n      },\n      \"children\": [\"Submit\"]\n    }\n  ]\n}\n\n## Block-level Dynamic Structures\n\nBlock-level structures use \"type\" starting with \"$\" for dynamic rendering of schema nodes.\n\nEach loop:\n{ \"type\": \"$each\", \"props\": { \"items\": { \"$store\": \"storeName.arrayProperty\" }, \"as\": \"itemName\" }, \"children\": [ ... ] }\nRenders children once for each item. The \"as\" name becomes a context key. Defaults to \"item\" — omit \"as\" unless you need a different name.\n\nConditional rendering:\n{ \"type\": \"$if\", \"props\": { \"condition\": ..., \"then\": { ... }, \"else\": { ... } } }\nRenders \"then\" node if condition is truthy, else renders \"else\" node.\nSupports enterTransition / exitTransition for CSS animations when the node mounts/unmounts.\nTransitionConfig = TransitionEffect | TransitionEffect[]\nTransitionEffect = { type: 'fade'|'slide'|'scale'|'pulse', duration?: ms, easing?: string, delay?: ms, direction?: 'left'|'right'|'up'|'down', distance?: string }\nfade controls opacity only; slide/scale control transform only. pulse is a persistent looping animation (not a one-shot transition) — starts once entered, stops on exit; direction/distance don't apply (default duration 1200ms, easing 'ease-in-out'). Compose fade/slide/scale together in an array; pulse is typically used alone.\nExample: enterTransition: [{ type: 'fade', duration: 300 }, { type: 'slide', direction: 'up', distance: '40px', duration: 400 }]\nExample (pulse): enterTransition: { type: 'pulse', duration: 1500 }\n\nViewport / mount animation (child always in DOM):\n{ \"type\": \"$animate\", \"props\": { \"scrollReveal\"?: true | number, \"scrollLeave\"?: true | number, \"scrollPast\"?: string, \"enterTransition\"?: TransitionConfig, \"exitTransition\"?: TransitionConfig }, \"children\": [<node>] }\nThe child is always mounted. fade/slide/scale are CSS transitions (opacity/transform); pulse is a real CSS @keyframes loop — use this for scroll-reveal effects.\nDo NOT use $animate when the child should be absent from the DOM. Use $if for conditional DOM presence.\nscrollReveal: true fires enterTransition when the element enters the viewport.\nscrollReveal: -100 fires 100px before the element would enter (negative = earlier reveal).\nscrollLeave fires exitTransition when the element leaves the viewport.\nscrollPast: \"element-id\" observes a sentinel element (by DOM id) instead of the $animate element itself.\n  enterTransition fires when the sentinel leaves the viewport (user scrolled past it).\n  exitTransition fires when the sentinel returns (user scrolled back up).\n  Use this for sticky headers: place a zero-height sentinel div at the bottom of the non-sticky header section,\n  then wrap the mini-profile in $animate with scrollPast pointing to that sentinel's id.\n  scrollPast is mutually exclusive with scrollReveal/scrollLeave.\nWithout any scroll trigger, the enterTransition runs once on mount.\nOnly one child node is supported.\nExample (scroll-reveal):\n{\n  \"type\": \"$animate\",\n  \"props\": {\n    \"scrollReveal\": -100,\n    \"enterTransition\": [\n      { \"type\": \"fade\", \"duration\": 600, \"easing\": \"ease-in-out\" },\n      { \"type\": \"slide\", \"direction\": \"left\", \"distance\": \"200px\", \"duration\": 1000, \"easing\": \"ease-in-out\" }\n    ]\n  },\n  \"children\": [{ \"type\": \"SomeCard\", \"children\": [] }]\n}\nExample (sticky header mini-profile):\nPlace a sentinel at the bottom of the header, reference it in the sticky nav:\n{ \"type\": \"div\", \"props\": { \"id\": \"header-sentinel\" }, \"styles\": { \"height\": \"0px\", \"pointerEvents\": \"none\" } }\n{\n  \"type\": \"$animate\",\n  \"props\": {\n    \"scrollPast\": \"header-sentinel\",\n    \"enterTransition\": { \"type\": \"fade\", \"duration\": 250 },\n    \"exitTransition\": { \"type\": \"fade\", \"duration\": 200 }\n  },\n  \"children\": [{ \"type\": \"Row\", \"props\": { \"ay\": \"center\", \"gap\": \"300\" }, \"children\": [\n    { \"type\": \"we-avatar\", \"props\": { \"image\": \"$space.avatar\", \"size\": \"sm\" } },\n    { \"type\": \"we-text\", \"props\": { \"fontWeight\": \"600\" }, \"children\": [\"$space.name\"] }\n  ]}]\n}\n\nSingle model item (load one record, render children with it in context):\n{\n  \"type\": \"$single\",\n  \"props\": {\n    \"item\": { \"$query\": { \"entity\": \"ModelName\", \"params\": { ... }, \"subscribe\": true } },\n    \"as\": \"profile\"   // context key for children — default: 'item'\n  },\n  \"children\": [{ \"type\": \"we-text\", \"children\": [\"$profile.username\"] }]\n}\nRenders nothing until a matching record is found. Like $each but for a single result.\nquery options (entity, params, include, dataset, subscribe) work identically to $query.\n\nRoute outlet:\n{ \"type\": \"$routes\" }\nIndicates where nested routes should render within a layout.\n\n---\n\n## Component Registry\n\nMost @we/primitives also accept Design System Props (see next section for details and exceptions).\n\n@we/primitives:\n- we-alert (DesignSystemElement)\n  Props: variant: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' = 'primary', dismissible: boolean = false\n- we-audio (LayoutVisualElement)\n  Props: src: string = '', controls: boolean = false, preload: 'none' | 'metadata' | 'auto' = 'metadata', autoplay: boolean = false, loop: boolean = false, muted: boolean = false\n- we-avatar (LayoutVisualElement)\n  Props: image: string = '', hash: string = '', selected: boolean = false, online: boolean = false, initials: string = '', icon: string = '', size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | '{css-length}' | undefined, clickable: boolean = false\n- we-badge (DesignSystemElement)\n  Props: variant: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' = 'neutral', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-blockquote (DesignSystemElement)\n- we-button (DesignSystemElement)\n  Props: variant: 'primary' | 'secondary' | 'ghost' | 'danger' | 'outline' = 'primary', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md', text?: string | undefined, href?: string | undefined, disabled: boolean = false, loading: boolean = false, gradient: boolean = false, square: boolean = false\n- we-checkbox (DesignSystemElement)\n  Props: checked: boolean = false, disabled: boolean = false, name: string = '', value: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-code (DesignSystemElement)\n  Props: block: boolean = false\n- we-color-picker (DesignSystemElement)\n  Props: value: string = '#000000', disabled: boolean = false, name: string = '', palette: array = [ '#000000', '#434343', '#666666', '#999999', '#b7b7b7', '#cccccc', '#d9d9d9', '#ffffff', '#980000', '#ff0000', '#ff9900', '#ffff00', '#00ff00', '#00ffff', '#4a86e8', '#0000ff', '#9900ff', '#ff00ff', '#e6b8af', '#f4cccc', '#fce5cd', '#fff2cc', '#d9ead3', '#d0e0e3', '#c9daf8', '#cfe2f3', '#d9d2e9', '#ead1dc', ]\n- we-date-picker (DesignSystemElement)\n  Props: value: string = '', placeholder: string = 'Select date', disabled: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-divider (LayoutElement)\n  Props: orientation: 'horizontal' | 'vertical' = 'horizontal', variant: 'solid' | 'dashed' | 'dotted' = 'solid', color?: string | undefined, thickness?: string | undefined\n- we-drawer (OverlayElement)\n  Props: hideclosebutton: boolean = false, close: () => void\n- we-file-upload (DesignSystemElement)\n  Props: accept: string = '', multiple: boolean = false, disabled: boolean = false, name: string = ''\n- we-form-field (DesignSystemElement)\n  Props: label: string = '', description: string = '', error: string = '', required: boolean = false, size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-html (DesignSystemElement) — Renders a raw HTML string safely via DOMPurify sanitization.\n\nUse this instead of `we-text` when content is stored as HTML (e.g. rich-text\neditor output such as Flux messages). The `content` prop accepts any HTML\nfragment; it is sanitized before rendering so XSS payloads are stripped.\n  Props: content: string = ''\n- we-icon (LayoutElement)\n  Props: name: string = '', color: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '{css-length}' = '', weight: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone' = 'regular', gradient: string = ''\n- we-icon-picker (DesignSystemElement)\n  Props: value: string = '', disabled: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md', placeholder: string = 'Pick icon'\n- we-iframe (LayoutVisualElement)\n  Props: src: string = '', title: string = 'Embedded content', allow: string = '', sandbox?: string | undefined\n- we-image (LayoutVisualElement)\n  Props: src: string | File = '', alt: string = '', fit: '' | 'cover' | 'contain' | 'fill' | 'none' | 'scale-down' = '', loading: 'eager' | 'lazy' = 'eager', gradient: string = '', objectPosition: string = ''\n- we-input (DesignSystemElement)\n  Props: value: string = '', max: string = '', min: string = '', maxlength: unknown = Infinity, minlength: number = 0, pattern: string = '', name: string = '', step: string = '', placeholder: string = '', autocomplete: string = '', autofocus: boolean = false, disabled: boolean = false, required: boolean = false, readonly: boolean = false, type: string = 'text', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-link (DesignSystemElement)\n  Props: href: string = '', target: string = '', rel: string = '', download: string = '', disabled: boolean = false\n- we-location-picker (DesignSystemElement)\n  Props: latitude?: number | undefined, longitude?: number | undefined, placeholder: string = 'Set location…', disabled: boolean = false, reverseGeocode: boolean = true\n- we-markdown (DesignSystemElement)\n  Props: content: string = '', markdownGap: string = ''\n- we-menu (DesignSystemElement) — Vertical list container for menu items inside a popover.\nNot a standalone selector — wrap in we-popover for dropdown behavior.\n- we-menu-group (LayoutElement)\n  Props: collapsible: boolean = false, open: boolean = false, title: string = ''\n- we-menu-item (DesignSystemElement) — Single actionable item inside a we-menu.\nSupports selected, active, and danger states.\n  Props: selected: boolean = false, active: boolean = false, variant: 'default' | 'danger' = 'default', label: unknown, value: unknown\n- we-modal (OverlayElement)\n  Props: hideclosebutton: boolean = false, close: () => void\n- we-number (DesignSystemElement) — Displays a number, optionally abbreviated (1 200 → 1.2K, 1 500 000 → 1.5M).\n  Props: value: number = 0, shorten: boolean = false, precision: number = 1, locale: string = 'en', formattedValue: string\n- we-number-input (DesignSystemElement)\n  Props: value: number = 0, min: number = -Infinity, max: unknown = Infinity, step: number = 1, disabled: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-pagination (DesignSystemElement)\n  Props: page: number = 1, total: number = 1, siblings: number = 1, size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-popover (LayoutElement) — Low-level floating panel anchored to a trigger element.\nUse DropdownMenu component for dropdown menus.\n  Props: open: boolean = false, placement: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' = 'bottom', popoverElement: HTMLElement, triggerElement: HTMLElement\n- we-progress-bar (DesignSystemElement)\n  Props: value: number = 0, max: number = 100, variant: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' = 'primary', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-radio (DesignSystemElement)\n  Props: checked: boolean = false, disabled: boolean = false, name: string = '', value: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-scroll-area (DesignSystemElement)\n  Props: maxHeight: string = '', maxWidth: string = ''\n- we-select (DesignSystemElement)\n  Props: options: SelectOption[] = [], value: string = '', placeholder: string = '', disabled: boolean = false, searchable: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-select (DesignSystemElement) — Pick a single value from a list of options. Custom-rendered dropdown.\nUse for form fields, settings, filters. Set searchable=true for type-to-filter.\n  Props: options: SelectOption[] = [], value: string = '', placeholder: string = '', disabled: boolean = false, searchable: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-skeleton (DesignSystemElement)\n  Props: width: string = '100%', height: string = '20px', animation: 'pulse' | 'wave' = 'pulse'\n- we-slider (DesignSystemElement)\n  Props: value: number = 0, min: number = 0, max: number = 100, step: number = 1, disabled: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md', showValue: boolean = false\n- we-sortable (DesignSystemElement) — Drag-to-reorder container primitive.\n\nUsage: wrap a list of elements that each have a `data-we-id` attribute.\nFires a `we-reorder` CustomEvent<string[]> on drop with the new ordered\narray of IDs.\n  Props: direction: 'vertical' | 'horizontal' = 'vertical', gap: string = ''\n- we-spinner (LayoutElement)\n  Props: size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | (string & {}) = 'md', color: string = ''\n- we-switch (DesignSystemElement)\n  Props: checked: boolean = false, disabled: boolean = false, name: string = '', value: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md', labelOff: string = '', labelOn: string = ''\n- we-tab (DesignSystemElement)\n  Props: key: string = '', selected: boolean = false, label?: string | undefined, selectedProps?: Partial<DesignSystemProps> | undefined\n- we-tabs (DesignSystemElement)\n  Props: selectedKey: string = ''\n- we-tag (DesignSystemElement)\n  Props: variant: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' = 'neutral', dismissible: boolean = false\n- we-text (DesignSystemElement)\n  Props: text?: string | undefined, variant: '' | 'body' | 'label' | 'footnote' | 'subheading' | 'ingress' | 'heading-sm' | 'heading-md' | 'heading-lg' | 'heading-xl' = '', tag: 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'small' | 'b' | 'i' | 'label' | 'div' = 'span', inline: boolean = false, uppercase: boolean = false, italic: boolean = false, truncate: boolean = false, gradient: string = ''\n- we-textarea (DesignSystemElement)\n  Props: value: string = '', name: string = '', placeholder: string = '', rows: number = 3, maxlength: unknown = Infinity, minlength: number = 0, disabled: boolean = false, required: boolean = false, readonly: boolean = false, resize: 'none' | 'vertical' | 'horizontal' | 'both' = 'vertical', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-timestamp (DesignSystemElement) — Displays a formatted or relative timestamp that self-updates each minute\nwhen `relative` is enabled.\n  Props: value: string = '', relative: boolean = false, locale: string = 'en', dateStyle: Intl.DateTimeFormatOptions['dateStyle'] | null = null, timeStyle: Intl.DateTimeFormatOptions['timeStyle'] | null = null, weekday: Intl.DateTimeFormatOptions['weekday'] | null = null, year: Intl.DateTimeFormatOptions['year'] | null = null, month: Intl.DateTimeFormatOptions['month'] | null = null, day: Intl.DateTimeFormatOptions['day'] | null = null, hour: Intl.DateTimeFormatOptions['hour'] | null = null, minute: Intl.DateTimeFormatOptions['minute'] | null = null, second: Intl.DateTimeFormatOptions['second'] | null = null, timeZone: string | null = null, hourCycle: Intl.DateTimeFormatOptions['hourCycle'] | null = null, formattedTime: string\n- we-tooltip (LayoutElement)\n  Props: open: boolean = false, title: string = '', placement: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' = 'top', tooltipEl: HTMLElement, triggerEl: HTMLElement, arrowEl: HTMLElement\n- we-video (LayoutVisualElement)\n  Props: src: string = '', poster?: string | undefined, controls: boolean = false, preload: 'none' | 'metadata' | 'auto' = 'metadata', autoplay: boolean = false, loop: boolean = false, muted: boolean = false\n\n@we/components:\n- AudioDisplay\n  Props: title: string | undefined, artist: string | undefined, audioUrl: string | undefined, duration: number | undefined, albumArt: string | undefined\n- AudioInput\n  Props: title: string | undefined, artist: string | undefined, audioUrl: string | FileData | undefined, duration: number | undefined, albumArt: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- BlockComposer (DesignSystemElement)\n  Props: editorState?: any, perspective?: PerspectiveProxy | null, onSave?: ((json: SerializedBlockNode) => void), onReady?: ((api: { save: () => void; }) => void)\n- BlockPlaceholder\n  Props: icon: string, label: string, hint?: string, accept?: string, onFileDrop?: ((file: File) => void), onClick?: (() => void)\n- BlockRenderer (DesignSystemElement)\n  Props: editorState?: any, perspective?: PerspectiveProxy | null, rootClass?: string\n- BlockToolbar\n  Props: placement?: BlockToolbarPlacement, children: JSX.Element, stopPropagation?: boolean\n- CalloutDisplay\n  Props: text: string | undefined, variant: string | undefined, icon: string | undefined\n- CalloutInput\n  Props: text: string | undefined, variant: string | undefined, icon: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- CodeDisplay\n  Props: code: string | undefined, language: string | undefined, title: string | undefined\n- CodeInput\n  Props: code: string | undefined, language: string | undefined, title: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- CollectionDisplay\n  Props: layout?: string, columnCount?: number, gap?: string, childEditorState?: any\n- CollectionInput\n  Props: nodeKey: string, layout?: string, columnCount?: number, gap?: string, childEditorState?: any, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- DividerDisplay\n  Props: style: \"solid\" | \"dashed\" | \"dotted\" | undefined\n- DividerInput\n  Props: style: DividerVariant | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- EmbedDisplay\n  Props: url: string | undefined, target: string | undefined, targetType: string | undefined, displayMode: string | undefined\n- EmbedInput\n  Props: url: string | undefined, target: string | undefined, targetType: string | undefined, displayMode: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- EventDisplay\n  Props: title: string | undefined, description: string | undefined, startDate: string | undefined, endDate: string | undefined, location: string | undefined, allDay: boolean | undefined\n- EventInput\n  Props: title: string | undefined, description: string | undefined, startDate: string | undefined, endDate: string | undefined, location: string | undefined, allDay: boolean | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- FileDisplay\n  Props: title: string | undefined, name: string | undefined, url: string | undefined, mimeType: string | undefined, size: number | undefined\n- FileInput\n  Props: title: string | undefined, name: string | undefined, url: string | FileData | undefined, mimeType: string | undefined, size: number | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- ImageDisplay\n  Props: src: string | undefined, altText: string | undefined, width: number | undefined, height: number | undefined\n- ImageInput\n  Props: src: string | FileData | undefined, altText: string | undefined, width: number | undefined, height: number | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- LinkDisplay\n  Props: url: string | undefined, title: string | undefined, description: string | undefined, thumbnail: string | undefined\n- LinkInput\n  Props: url: string | undefined, title: string | undefined, description: string | undefined, thumbnail: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- LocationDisplay\n  Props: name: string | undefined, latitude: number | undefined, longitude: number | undefined, address: string | undefined\n- LocationInput\n  Props: name: string | undefined, latitude: number | undefined, longitude: number | undefined, address: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- TagDisplay\n  Props: name: string | undefined, color: string | undefined\n- TagInput\n  Props: name: string | undefined, color: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- TaskDisplay\n  Props: title: string | undefined, description: string | undefined, status: string | undefined, priority: string | undefined, dueDate: string | undefined, assignee: string | undefined\n- TaskInput\n  Props: title: string | undefined, description: string | undefined, status: string | undefined, priority: string | undefined, dueDate: string | undefined, assignee: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- VideoDisplay\n  Props: url: string | undefined, title: string | undefined, thumbnail: string | undefined, provider: string | undefined, width: number | undefined\n- VideoInput\n  Props: url: string | undefined, title: string | undefined, thumbnail: string | undefined, provider: string | undefined, width: number | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- Accordion\n  Props: children?: JSX.Element, renderContent?: ((item: AccordionItem, index: number) => JSX.Element), onChange?: ((openItems: string[]) => void), items?: AccordionItem[], multiple?: boolean, styles?: Record<string, string | number>\n- AudioVisualiser\n  Props: src: string | undefined, bars?: number, height?: number, color?: string, activeColor?: string\n- AvatarStack\n  Props: avatars: AvatarInfo[], max?: number, size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxs\" | \"xxl\", overlap?: number, ring?: string, styles?: Record<string, string | number>\n- Breadcrumbs\n  Props: onNavigate?: ((item: BreadcrumbItem, index: number) => void), items?: BreadcrumbItem[], separator?: string, styles?: Record<string, string | number>\n- Calendar\n  Props: onSelect?: ((date: string) => void), value?: string, events?: CalendarEvent[], styles?: Record<string, string | number>\n- Card (DesignSystemElement)\n- CircleButton\n  Props: label: string, icon?: string, image?: string, onClick?: (() => void), class?: string, styles?: Record<string, string | number>\n- CodeEditor\n  Props: code: string, language?: CodeEditorLanguage, readOnly?: boolean, onChange?: ((code: string) => void), onSave?: ((code: string) => void), styles?: Record<string, string | number>\n- CollapsedContent\n  Props: collapsed: boolean, onExpandClick?: (() => void), showToggle?: boolean, icon?: string, maxHeight?: string, fadeColor?: string, children?: JSX.Element, class?: string, styles?: Record<string, string | number>\n- Column (DesignSystemElement)\n- Combobox (DesignSystemElement)\n  Props: options: string[] | ComboboxOption[], value?: string, placeholder?: string, size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\", onChange?: ((value: string) => void)\n- DropdownMenu — Flexible dropdown menu for actions, toggles, and grouped items. Use for context menus, settings panels, layer controls, and command palettes.\n  Props: class?: string, styles?: Record<string, string | number>, placement?: Placement, triggerLabel?: string, triggerIcon?: string, items: SolidDropdownMenuEntry[]\n- EditableImage (DesignSystemElement)\n  Props: src?: string, alt?: string, fit?: \"fill\" | \"cover\" | \"contain\" | \"none\" | \"scale-down\", placeholderIcon?: string, onImageChange?: ((file: File) => void), class?: string, aspect?: number, maxSize?: number\n- FlipCard\n  Props: front?: JSX.Element, back?: JSX.Element, width?: string, height?: string, flipOnHover?: boolean, flipDuration?: string, wobbleOnHover?: boolean, wobbleDegree?: number, class?: string, styles?: Record<string, string | number>\n- Grid (DesignSystemElement)\n  Props: template?: string, columns?: number, minChildWidth?: string\n- IconLabelButton\n  Props: icon: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<string>, label: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<string>, selected?: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<boolean | undefined>, iconWeight?: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<IconWeight | undefined>, onClick?: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<(() => void) | undefined>, class?: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<string | undefined>, styles?: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<Record<string, string | number> | undefined>\n- ImageCrop\n  Props: src: string, fileName?: string, aspect?: number, maxSize?: number, outputType?: string, quality?: number, onReady?: ((ref: ImageCropRef) => void)\n- ImageLightbox\n  Props: srcs: string[], initialIndex: number, onClose: () => void\n- List\n  Props: children?: JSX.Element, renderItem?: ((item: ListItem, index: number) => JSX.Element), items?: ListItem[], ordered?: boolean, gap?: string, styles?: Record<string, string | number>\n- PostCard\n  Props: creator?: { name: string; avatar: string; }, title: string, text: string, class?: string, styles?: Record<string, string | number>\n- RerenderLog\n  Props: location: string\n- Row (DesignSystemElement)\n- Search (DesignSystemElement)\n  Props: placeholder?: string, value?: string, onSearch?: ((value: string) => void), debounce?: number\n- Select (DesignSystemElement)\n  Props: options: SelectOption[], value?: string, placeholder?: string, searchable?: boolean, label?: string, size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\", onChange?: ((value: string) => void)\n- SignalControl\n  Props: signalType: SignalTypeData, signals?: SignalData[], myDid?: string, onSignal?: ((value: number) => void), disabled?: boolean, preview?: boolean, class?: string, styles?: Record<string, string | number>\n- Stepper\n  Props: onStepClick?: ((index: number) => void), steps?: StepperStep[], activeStep?: number, orientation?: \"horizontal\" | \"vertical\", styles?: Record<string, string | number>\n- Table\n  Props: renderCell?: ((row: Record<string, unknown>, column: TableColumn, index: number) => JSX.Element), columns: TableColumn[], rows: Record<string, unknown>[], striped?: boolean, bordered?: boolean, styles?: Record<string, string | number>\n- Timeline\n  Props: children?: JSX.Element, renderItem?: ((item: TimelineItem, index: number) => JSX.Element), items?: TimelineItem[], styles?: Record<string, string | number>\n- ToastContainer\n  Props: position?: \"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\" | \"top-center\" | \"bottom-center\", styles?: Record<string, string | number>\n\n@we/widgets:\n- CesiumGlobe — 3D globe widget using CesiumJS with a modular layer system.\nLayers are injected via factory functions (planet surface + background).\nRequires a layer factory registry mapping string names to factory functions.\nNot schema-renderable — used directly in application code.\n  Props: ionAccessToken?: string, planetLayers?: LayerConfig<unknown>[], backgroundLayers?: LayerConfig<unknown>[], layerFactoryRegistry: Record<string, LayerFactory<any>>\n- CollapsibleSidebar\n  Props: header?: JSX.Element, footer?: JSX.Element, items: CollapsibleSidebarItem[], footerItems?: CollapsibleSidebarItem[], side?: \"left\" | \"right\", position?: \"static\" | \"absolute\" | \"fixed\", zIndex?: number, collapsedWidth?: string, expandedWidth?: string, defaultExpanded?: boolean, expandOnHover?: boolean, transitionDuration?: number, bg?: string, border?: string, padding?: string, gap?: string, centerItems?: boolean, itemColor?: string, itemColorHover?: string, itemColorActive?: string, itemBg?: string, itemBgHover?: string, itemBgActive?: string, itemPadding?: string, itemGap?: string, badgeBg?: string, badgeColor?: string, iconSize?: IconSize, onItemClick?: ((item: CollapsibleSidebarItem) => void), onExpandedChange?: ((expanded: boolean) => void)\n- GraphWidget — 2D force-directed graph visualization using D3-force layout and Canvas rendering.\nDisplays typed nodes (user, space, post) and edges (follows, member-of, etc.)\nwith configurable styling, layout forces, and interaction handlers.\n  Props: data: GraphData, width?: string | number, height?: string | number, nodeStyle?: NodeStyleConfig, edgeStyle?: EdgeStyleConfig, layout?: LayoutConfig, interactions?: InteractionConfig\n- SpaceSidebarWidget\n  Props: name: string, description?: string, class?: string, style?: Record<string, string | number>\n\n---\n\n## Design System Props\n\nMost @we/primitives inherit **all** layers below. Props use design token values — not raw CSS.\n\n### Token Value Reference\n\n| Token Type | Valid Values |\n|---|---|\n| SpaceValue | \"0\", \"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\", \"1000\" (or CSS length e.g. \"16px\") |\n| ColorValue | \"{hue}-{shade}\" where hue = neutral, primary, success, warning, danger and shade = 0, 25, 50, 75, 100, 200–900, 1000. Also \"white\", \"black\". (or CSS color) |\n| RadiusValue | \"0\", \"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\", \"pill\", \"full\" (or CSS length) |\n| ShadowValue | \"sm\", \"md\", \"lg\", \"xl\" |\n| FontSizeValue | \"base\", \"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\", \"1000\" (or CSS length) |\n| FontFamilyValue | \"base\" (or CSS font-family) |\n| LineHeightValue | \"none\", \"tight\", \"snug\", \"normal\", \"relaxed\", \"loose\" (or CSS value) |\n| LetterSpacingValue | \"tighter\", \"tight\", \"normal\", \"wide\", \"wider\", \"widest\" (or CSS value) |\n| FontWeightValue | Named tokens: \"regular\" (400), \"medium\" (500), \"semibold\" (600), \"bold\" (700). Numeric: \"100\"–\"900\". CSS pass-through: \"light\", \"normal\", \"bolder\". |\n\n**Layout-only primitives** — these accept only Layout props (not Visual, Flex, Typography, or State):\nwe-divider, we-icon, we-menu-group, we-popover, we-spinner, we-tooltip\n\n### Layout\n\n| Prop | Type | Description |\n|------|------|-------------|\n| width | string | Element width |\n| height | string | Element height |\n| minWidth | string | Minimum width |\n| minHeight | string | Minimum height |\n| maxWidth | string | Maximum width |\n| maxHeight | string | Maximum height |\n| position | \"relative\" \\| \"absolute\" \\| \"fixed\" \\| \"sticky\" | CSS position |\n| top | string | Top offset |\n| right | string | Right offset |\n| bottom | string | Bottom offset |\n| left | string | Left offset |\n| zIndex | number | Stack order |\n| display | \"flex\" \\| \"block\" \\| \"inline\" \\| \"inline-block\" \\| \"grid\" \\| \"inline-flex\" | Display mode |\n| flex | string | Flex shorthand (e.g. \"1\", \"0 0 auto\", \"none\") — controls grow/shrink/basis |\n| alignSelf | string | Override parent cross-axis alignment for this child |\n| overflow | \"hidden\" \\| \"auto\" | Overflow behavior |\n| m | SpaceValue | Margin (all sides) |\n| mx | SpaceValue | Margin left + right |\n| my | SpaceValue | Margin top + bottom |\n| mt | SpaceValue | Margin top |\n| mr | SpaceValue | Margin right |\n| mb | SpaceValue | Margin bottom |\n| ml | SpaceValue | Margin left |\n\n### Visual\n\n| Prop | Type | Description |\n|------|------|-------------|\n| bg | ColorValue | Background color (token) |\n| bgImage | string | Background image URL — sets background-image, defaults background-size to cover, background-position to center, background-repeat to no-repeat |\n| bgFit | \"cover\" \\| \"contain\" | Background image sizing (default: \"cover\") — only meaningful with bgImage |\n| bgPosition | string | Background image position (default: \"center\", e.g. \"top\", \"50% 20%\") — only meaningful with bgImage |\n| bgImageOpacity | number | Fades bgImage only (0–1), independent of the element's own content/opacity — only meaningful with bgImage |\n| bgImageTint | ColorValue | Color bgImage fades toward as bgImageOpacity decreases (default: the element's own `bg`, or neutral-0) — only meaningful with bgImageOpacity |\n| color | ColorValue | Text/foreground color (token) |\n| opacity | number | Opacity (0–1) |\n| border | string | Border shorthand (e.g. \"1px solid neutral-200\" — color tokens are resolved) |\n| borderColor | ColorValue | Border color (token, e.g. \"neutral-200\", \"primary-500\") |\n| borderTop | string | Top border shorthand (color tokens resolved) |\n| borderRight | string | Right border shorthand (color tokens resolved) |\n| borderBottom | string | Bottom border shorthand (color tokens resolved) |\n| borderLeft | string | Left border shorthand (color tokens resolved) |\n| borderWidth | string | Border width (raw CSS, e.g. \"1px\", \"2px 0\") |\n| shadow | \"sm\" \\| \"md\" \\| \"lg\" \\| \"xl\" | Shadow token |\n| cursor | \"pointer\" \\| \"default\" \\| \"text\" \\| \"not-allowed\" | Cursor style |\n| pointerEvents | \"none\" \\| \"auto\" | Pointer events |\n| transform | string | CSS transform |\n| transition | string | CSS transition |\n| r | RadiusValue | Border radius (all corners) |\n| rt | RadiusValue | Border radius top |\n| rb | RadiusValue | Border radius bottom |\n| rl | RadiusValue | Border radius left |\n| rr | RadiusValue | Border radius right |\n| rtl | RadiusValue | Border radius top-left |\n| rtr | RadiusValue | Border radius top-right |\n| rbr | RadiusValue | Border radius bottom-right |\n| rbl | RadiusValue | Border radius bottom-left |\n\n### Flex (Container)\n\n| Prop | Type | Description |\n|------|------|-------------|\n| direction | \"row\" \\| \"row-reverse\" \\| \"column\" \\| \"column-reverse\" | Flex direction |\n| ax | \"start\" \\| \"center\" \\| \"end\" \\| \"between\" \\| \"around\" \\| \"even\" \\| \"stretch\" | Main-axis alignment |\n| ay | \"start\" \\| \"center\" \\| \"end\" \\| \"between\" \\| \"around\" \\| \"even\" \\| \"stretch\" | Cross-axis alignment |\n| wrap | boolean | Enable flex wrap |\n| gap | SpaceValue | Gap between children (token) |\n| p | SpaceValue | Padding (all sides) |\n| px | SpaceValue | Padding left + right |\n| py | SpaceValue | Padding top + bottom |\n| pt | SpaceValue | Padding top |\n| pr | SpaceValue | Padding right |\n| pb | SpaceValue | Padding bottom |\n| pl | SpaceValue | Padding left |\n\n### Typography\n\n| Prop | Type | Description |\n|------|------|-------------|\n| textAlign | \"left\" \\| \"center\" \\| \"right\" \\| \"justify\" | Text alignment |\n| fontFamily | \"base\" \\| {css-font-family} | Font family token |\n| fontWeight | \"regular\" \\| \"medium\" \\| \"semibold\" \\| \"bold\" (named tokens) or \"100\"–\"900\" (numeric) or \"light\" \\| \"normal\" \\| \"bolder\" (CSS pass-through) | Font weight |\n| fontSize | \"base\" \\| \"100\"–\"1000\" \\| {css-length} | Font size token |\n| lineHeight | \"none\" \\| \"tight\" \\| \"snug\" \\| \"normal\" \\| \"relaxed\" \\| \"loose\" | Line height token |\n| letterSpacing | \"tighter\" \\| \"tight\" \\| \"normal\" \\| \"wide\" \\| \"wider\" \\| \"widest\" | Letter spacing token |\n| textDecoration | \"underline\" \\| \"line-through\" \\| \"overline\" \\| \"none\" | Text decoration |\n| textTransform | \"uppercase\" \\| \"lowercase\" \\| \"capitalize\" \\| \"none\" | Text transform |\n\n**Typography defaults:** fontSize and fontWeight have **no built-in defaults** — omitting them inherits from parent elements (browser default is ~16px / normal weight). Do not set fontSize or fontWeight unless you need a non-default value. For example, `fontSize: '300'` (16px) and `fontWeight: '500'` (normal) are the inherited defaults — omit them.\n\n`we-text` variants (set via the `variant` prop) bundle typography presets. Always pair with a semantic `tag` prop for correct HTML structure:\nbody (300, tag: p/span), label (200 + medium, tag: span), footnote (100, tag: span), subheading (400 + medium, tag: h5/p), ingress (400 + lineHeight 1.6, tag: p), heading-sm (500 + bold, tag: h4), heading-md (600 + bold, tag: h3), heading-lg (700 + bold, tag: h2), heading-xl (800 + bold, tag: h1).\nVariants set size and weight only — color is always inherited or set explicitly. For muted footnote text add `color=\"neutral-400\"` explicitly.\n\n### State\n\n| Prop | Type | Description |\n|------|------|-------------|\n| hoverProps | Partial\\<DesignSystemProps\\> | Styles on :hover |\n| activeProps | Partial\\<DesignSystemProps\\> | Styles on :active |\n| focusProps | Partial\\<DesignSystemProps\\> | Styles on :focus |\n| disabledProps | Partial\\<DesignSystemProps\\> | Styles when disabled |\n\n### Additional\n\n| Prop | Type | Description |\n|------|------|-------------|\n| styles | Record\\<string, string \\| number\\> | Inline CSS applied directly to the component's own element (raw CSS values allowed). For Column, Row, Grid — use this when you need CSS the DS props don't cover. **Do not confuse with node-level styles** (see Schema Structure) which applies to a wrapper div, not the component. |\n| onClick | ActionToken | Event handler (see dynamic logic) |\n\n---\n\n## Design Tokens\n\nUse design tokens for spacing, color, radius, etc. Do not use raw CSS values unless using the styles prop.\n\nanimation.transition: '0', '100', '200', '300', '400', '500'\n\navatarSize: 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'\n\nborder.color: 'base', 'strong'\n\ncolor.base: 'white', 'black'\n\ncolor.config: 'multiplier', 'subtractor', 'saturation', 'neutralSaturation'\n\ncolor.hues: 'neutral', 'primary', 'success', 'warning', 'danger'\n\ncolor.lightness: '0', '25', '50', '75', '100', '200', '300', '400', '500', '600', '700', '800', '900', '1000'\n\ncomponent.scrollbar: 'width', 'backgroundImage', 'background', 'cornerBackground', 'thumbBoxShadow', 'thumbBorderRadius', 'thumbBackground'\n\ncomponentHeight: 'xs', 'sm', 'md', 'lg', 'xl'\n\neffect.depth: '100', '200', '300', '400', '500', 'none'\n\nfont.family: 'base', 'mozilla', 'boldonse'\n\nfont.letterSpacing: 'tighter', 'tight', 'normal', 'wide', 'wider', 'widest'\n\nfont.lineHeight: 'none', 'tight', 'snug', 'normal', 'relaxed', 'loose'\n\nfont.size: '100', '200', '300', '400', '500', '600', '700', '800', '900', '1000', 'base'\n\nfont.weight: '100', '200', '300', '400', '500', '600', '700', '800', '900', 'regular', 'medium', 'semibold', 'bold'\n\nlayout: 'xs', 'sm', 'md', 'lg'\n\nradius: '0', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'pill', 'full'\n\nshadow: 'sm', 'md', 'lg', 'xl'\n\nsize: 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'\n\nspace: '0', '100', '200', '300', '400', '500', '600', '700', '800', '900', '1000'\n\nzIndex: 'dropdown', 'sticky', 'modal', 'popover', 'toast', 'tooltip'\n\n---\n\n## Block & Entity Models\n\nAvailable data models for $query and store data:\n\nAgentSettings extends Ad4mModel:\n  Fields:\n  - currentTemplateId: string = 'default' [we://current_template]\n  - defaultTemplateId: string = 'default' [we://default_template]\n  - currentThemeId: string = 'default' [we://current_theme]\n  - defaultThemeId: string = 'default' [we://default_theme]\n  - claudeApiKey: string [we://claude_api_key]\n  - perspectiveOrder: string [we://perspective_order]\n  - globalSpaceJoined: boolean = false [we://global_space_joined]\n  - globalSpaceUrl: string [we://global_space_url]\n  - useSpaceTemplate: boolean = true [we://use_space_template]\n  Relations:\n  - installedTemplates: HasMany → Template [we://installed_template]\n  - installedThemes: HasMany → Theme [we://installed_theme]\n  - spaceTemplatePreferences: HasMany → SpaceTemplatePreference [we://space_template_preference]\n\nAudioBlock extends WeNode:\n  Fields:\n  - title: string (required) [we://title]\n  - artist: string [we://artist]\n  - audioUrl: string (required) [we://audio_url]\n  - duration: number [we://duration]\n  - albumArt: string [we://album_art]\n  - version: number [we://version]\n\nCalloutBlock extends WeNode:\n  Fields:\n  - text: string [we://text]\n  - variant: string = info [we://variant]\n  - icon: string [we://icon]\n  - version: number [we://version]\n\nChatMessage extends WeNode:\n  Fields:\n  - role: string [we://role]\n  - content: string [we://content]\n\nChatSession extends WeNode:\n  Fields:\n  - name: string [we://name]\n  - templateId: string [we://template_id]\n  Relations:\n  - messages: HasMany → ChatMessage [we://chat_message]\n\nCodeBlock extends WeNode:\n  Fields:\n  - code: string (required) [we://code]\n  - language: string [we://language]\n  - title: string [we://title]\n  - version: number [we://version]\n\nCollectionBlock extends WeNode:\n  Fields:\n  - editorState: string = null [we://editor_state]\n  - type: string [we://type]\n  - display: string [we://display]\n  - direction: string [we://direction]\n  - format: string [we://format]\n  - indent: number [we://indent]\n  - columns: number [we://columns]\n  - gap: string [we://gap]\n  - version: number [we://version]\n  - textContent: string [we://text_content]\n  Relations:\n  - children: HasMany [we://children]\n\nDividerBlock extends WeNode:\n  Fields:\n  - style: string = solid [we://style]\n  - version: number [we://version]\n\nEmbedBlock extends WeNode:\n  Fields:\n  - url: string [we://url]\n  - target: string [we://target]\n  - targetType: string [we://target_type]\n  - displayMode: string = card [we://display_mode]\n  - version: number [we://version]\n\nEventBlock extends WeNode:\n  Fields:\n  - title: string (required) [we://title]\n  - description: string [we://description]\n  - startDate: string (required) [we://start_date]\n  - endDate: string [we://end_date]\n  - location: string [we://location]\n  - allDay: boolean = false [we://all_day]\n  - version: number [we://version]\n\nFileBlock extends WeNode:\n  Fields:\n  - title: string [we://title]\n  - name: string (required) [we://name]\n  - url: string (required) [we://url]\n  - mimeType: string [we://mime_type]\n  - size: number [we://size]\n  - version: number [we://version]\n\nImageBlock extends WeNode:\n  Fields:\n  - src: string (required) [we://src]\n  - altText: string [we://altText]\n  - width: number [we://width]\n  - height: number [we://height]\n  - version: number [we://version]\n\nLinkBlock extends WeNode:\n  Fields:\n  - url: string (required) [we://url]\n  - title: string [we://title]\n  - description: string [we://description]\n  - thumbnail: string [we://thumbnail]\n  - version: number [we://version]\n\nLocationBlock extends WeNode:\n  Fields:\n  - name: string [we://name]\n  - latitude: number (required) [we://latitude]\n  - longitude: number (required) [we://longitude]\n  - address: string [we://address]\n  - city: string [we://city]\n  - countryCode: string [we://country_code]\n  - country: string [we://country]\n  - version: number [we://version]\n\nSignal extends Ad4mModel:\n  Fields:\n  - signalTypeId: string [we://signal_type_id]\n  - value: number [we://value]\n\nSignalType extends WeNode:\n  Fields:\n  - name: string [we://name]\n  - slug: string [we://slug]\n  - description: string [we://description]\n  - icon: string [we://icon]\n  - iconSecondary: string [we://icon_secondary]\n  - step: number = 1 [we://step]\n  - rangeMin: number [we://range_min]\n  - rangeMax: number = 1 [we://range_max]\n  - mode: SignalMode = 'toggle' [we://mode]\n  - aggregate: SignalAggregate = 'count' [we://aggregate]\n  - semantic: SignalSemantic = 'custom' [we://semantic]\n  - allowChange: boolean = true [we://allow_change]\n  - valueType: string = 'numeric' [we://signal_value_type]\n  - schemaVersion: number = 1 [we://schema_version]\n\nSpace extends WeNode:\n  Fields:\n  - uuid: string [we://uuid]\n  - url: string [we://url]\n  - name: string (required) [we://name]\n  - description: string (required) [we://description]\n  - access: string = 'personal' [we://access]\n  - discovery: string = 'hidden' [we://discovery]\n  - avatar: string [we://image]\n  - coverImage: string [we://thumbnail]\n  - defaultTemplateId: string [we://default_template_id]\n  - defaultThemeId: string [we://default_theme_id]\n  Relations:\n  - location: HasOne [we://location]\n\nSpaceTemplatePreference extends WeNode:\n  Fields:\n  - spaceUrl: string [we://space_url]\n  - preference: string [we://preference]\n\nTagBlock extends WeNode:\n  Fields:\n  - name: string (required) [we://name]\n  - color: string [we://color]\n  - version: number [we://version]\n\nTaskBlock extends WeNode:\n  Fields:\n  - title: string (required) [we://title]\n  - description: string [we://description]\n  - status: string = todo [we://status]\n  - priority: string = medium [we://priority]\n  - dueDate: string [we://due_date]\n  - assignee: string [we://assignee]\n  - version: number [we://version]\n\nTemplate extends WeNode:\n  Fields:\n  - name: string [we://name]\n  - description: string [we://description]\n  - icon: string [we://icon]\n  - origin: string [we://origin]\n  - version: number = 1 [we://version]\n  - slug: string [we://slug]\n  - schema: string = null [we://template_schema]\n  - themeId: string [we://theme_id]\n  Relations:\n  - screenshots: HasMany → ImageBlock [we://screenshot]\n\nTextBlock extends WeNode:\n  Fields:\n  - type: string [we://type]\n  - direction: string [we://direction]\n  - format: string [we://format]\n  - indent: number [we://indent]\n  - textFormat: number [we://textFormat]\n  - textStyle: string [we://textStyle]\n  - listType: string [we://listType]\n  - start: number [we://start]\n  - tag: string [we://tag]\n  - text: string [we://text]\n  - version: number [we://version]\n\nTheme extends WeNode:\n  Fields:\n  - name: string [we://name]\n  - description: string [we://description]\n  - icon: string [we://icon]\n  - origin: string [we://origin]\n  - slug: string [we://slug]\n  - version: number = 1 [we://version]\n  - css: string = null [we://stylesheet]\n  - overrides: string = null [we://token_overrides]\n  Relations:\n  - screenshots: HasMany → ImageBlock [we://screenshot]\n\nVideoBlock extends WeNode:\n  Fields:\n  - title: string [we://title]\n  - url: string (required) [we://url]\n  - duration: number [we://duration]\n  - thumbnail: string [we://thumbnail]\n  - provider: string [we://provider]\n  - version: number [we://version]\n\nWeNode extends Ad4mModel:\n  Relations:\n  - comments: HasMany [we://comment]\n  - signals: HasMany → Signal [we://signal]\n\n---\n\n## Stores\n\nStores provide state (readable values) and actions (methods) for dynamic logic in schemas.\nAccess state with $store and call actions with $action.\nFor ephemeral/form state, use $localState/$local/$setLocal instead of stores (see Dynamic Logic).\n\nAdamStore:\n- State:\n  - adamClient: Ad4mClient | undefined\n  - me: Agent | undefined\n  - allPerspectives: array of PerspectiveProxy objects (all AD4M perspectives)\n  - currentPerspective: PerspectiveProxy | null (the perspective currently being viewed)\n  - currentPerspectiveModels: ModelManifestEntry[] (non-WE SHACL models from the current perspective; injected as externalModels into AI messages)\n  - isWeSpace: boolean — true once the current perspective is confirmed to have WE's Space SDNA installed (false for a joined-but-foreign perspective, e.g. one synced in from Flux)\n  - personalSpaces: array of Space objects (local/personal spaces; all Space fields)\n  - sharedSpaces: array of Space objects (shared/neighbourhood spaces; all Space fields)\n  - bootState: string\n  - passwordError: string | undefined\n  - loginLoading: boolean\n  - creatingSpace: boolean (true while a new space is being created)\n  - agents: AgentProfileSummary[] — cache of all fetched agent profiles (did, firstName, lastName, handle, bio, avatar, coverImage, location)\n  - ownAgent: AgentProfileSummary | undefined — reactive accessor for the current user's own profile (derived from agents cache)\n  - orderedSidebarItems: array of sidebar items in user-defined order (uuid, name, avatar, spaceId) — personal + shared spaces merged\n- Actions:\n  - navigate(to: string, options?): navigates to a route\n  - addNewSpace(space: Space): adds a new space\n  - createSpace(name: string, description: string, shared: boolean, imageFile?: File): creates a new space with full setup\n  - initializeAsWeSpace(name: string, description: string, avatarValue?: File | string | null): installs WE's Space SDNA into the current, already-joined, foreign-native perspective (e.g. one synced in from Flux) and creates a Space entity in place — access is always 'shared' since the perspective is already a published neighbourhood\n  - switchPerspective(uuid: string): switches to a perspective by UUID, registers its SHACL models as dynamic model classes, and populates currentPerspectiveModels\n  - removePerspective(uuid: string): removes a perspective by UUID\n  - reorderPerspectives(newOrder: string[]): reorders the sidebar items by UUID array\n  - login(password: string): logs in the agent with password\n  - logout(): locks the agent and returns to login screen\n  - fetchAgent(did: string): fetches and caches an agent's profile from their public AD4M perspective\n  - updateOwnProfile(fields: { firstName?, lastName?, handle?, bio? }): updates own profile text fields and publishes to public perspective\n  - updateProfileImage(field: \"avatar\" | \"coverImage\", imageFile: File): uploads image to FILE_STORAGE_LANGUAGE and publishes expression URL to public perspective\n  - updateAgentLocation(update: { latitude?, longitude?, city?, country?, countryCode? }): merges location update into cache and publishes to public perspective\n  - cleanupSpaceSdna(uuid?: string): one-time remediation for a perspective that accumulated duplicate SDNA installs (e.g. from before joinSpace checked for existing SDNA before installing) — removes the redundant duplicate link copies. Defaults to the current perspective. Returns a display-ready summary string naming how many links were removed and the DIDs that authored them (your own DID annotated with \"(you)\"), or an empty string if nothing needed cleaning up\n\nRouteStore:\n- State:\n  - currentPath: string (the current route path)\n  - segments: string[] (currentPath split by \"/\", e.g. [\"/foo/bar\"] → [\"foo\", \"bar\"])\n- Actions:\n  - navigate(to: string, options?): navigates to a route\n\nThemeStore:\n- State:\n  - builtInThemes: array of ThemeData objects — built-in registry themes (origin: \"built-in\", always available)\n  - installedThemes: array of ThemeData objects — user-installed themes from root perspective (origin: \"custom\" | \"marketplace\")\n  - spaceThemes: array of ThemeData objects — themes stored in the current space perspective (origin: \"custom\")\n  - allThemes: array of ThemeData objects — union of builtInThemes + visible installedThemes + spaceThemes (hidden themes filtered out)\n  - currentThemeId: string — id of the currently active theme\n  - currentTheme: ThemeData — the currently active theme object (id, name, icon, origin)\n  - defaultThemeId: string — id of the user's preferred default theme (used for bootscreen, shell, and future space-override). Persisted to AgentSettings.defaultThemeId\n  - themeManagementList: ThemeManagementItem[] — flat list of all themes (built-in + all custom) with management metadata (id, name, icon, isBuiltIn, isInstalled, isDefault)\n- Actions:\n  - setCurrentTheme(themeId: string): sets and persists the active theme\n  - setDefaultTheme(themeId: string): sets the preferred default theme (persists to AgentSettings.defaultThemeId)\n  - toggleThemeInstalled(themeId: string): toggles a custom theme visible/hidden in pickers; does not delete the theme\n  - installFromMarketplace(marketplaceThemeId: string): installs a marketplace theme into installedThemes\n  - uninstallTheme(themeId: string): removes an installed theme (deletes the model)\n  - deleteTheme(themeId: string): permanently deletes a custom theme\n\nTemplateStore:\n- State:\n  - personalTemplates: array of TemplateSchema objects — core templates plus user's installed custom templates (excludes space templates)\n  - spaceTemplates: array of TemplateSchema objects — templates loaded from the current space perspective\n  - builtInTemplates: array of TemplateSchema objects — built-in system templates (always available)\n  - myTemplates: array of TemplateSchema objects — user's installed custom templates only (excludes built-in and space templates)\n  - allTemplates: array of TemplateSchema objects — union of built-in + personal + space templates\n  - shellTemplates: array of TemplateSchema objects (static system pages: profile, settings, tests)\n  - currentTemplate: TemplateSchema (the active template)\n  - operationLoading: unknown\n  - activeShellView: string | null (id of the currently open shell overlay: 'profile' | 'settings' | 'schema-tests' | 'landing-page' | null)\n  - templateManagementList: TemplateManagementItem[] — flat list of all templates with management metadata (id, name, icon, description, isBuiltIn, isInstalled, isDefault)\n  - switcherGroups: TemplateSwitcherGroup[] — pre-grouped flat items for the template switcher UI; each group has { label: string, items: { id, name, icon }[] }. Groups: \"Space templates\", \"My templates\", \"Built-in\". Use $filter where: { name: { contains: ... } } for search since items have a flat name field.\n- Actions:\n  - updateTemplate(newTemplate: TemplateSchema): updates the current template\n  - switchTemplate(newTemplateId: string): switches to another template\n  - removeTemplate(): removes the current template\n  - saveTemplate(name: string): saves the current template\n  - toggleInstalled(): unknown\n  - setDefaultTemplate(): unknown\n  - deleteTemplate(): unknown\n  - openShellView(id: string): opens a shell overlay by id ('profile' | 'settings' | 'schema-tests' | 'landing-page')\n  - closeShellView(): closes the currently open shell overlay\n\nSpaceStore:\n- State:\n  - memberDids: string[] — DIDs of all members in the current space (includes own DID)\n  - members: AgentProfileSummary[] — cached profiles for all memberDids\n  - spaceDefaultTemplateId: string — the current space's default template ID (empty string when no space is active)\n  - currentSpace: Space | null — the current space model (all Space fields: uuid, url, name, description, access, discovery, avatar, coverImage, defaultTemplateId, defaultThemeId, location, plus id/author/createdAt)\n  - foreignSpacePrefill: { name, description, avatar } | null — detected from a foreign app's own model (e.g. Flux's Community) for prefilling the \"Initialize as WE space\" gate; null once the perspective is a WE space or no recognized foreign model is found\n  - signalTypes: array of SignalType objects (community-created reaction/vote types)\n  - signalTypesBySlug: Record<slug, SignalType> — computed map; access via { $store: \"spaceStore.signalTypesBySlug.<slug>\" }; use .id for the UUID\n- Actions:\n  - createPost(editorState: unknown): creates a new post\n  - updatePost(postId: string, editorState: unknown): reconciles an edited post against its existing blocks — updates/reuses blocks whose id survived the edit, creates new ones, deletes ones no longer present\n  - deletePost(postId: string): permanently deletes a post and all of its contained blocks (recursive, atomic)\n  - updateSpaceImage(field: \"avatar\" | \"coverImage\", imageFile: File): uploads and sets the space avatar or cover image\n  - createSignalType(config: Partial<SignalType>): creates a new signal type in the community; slug auto-derived from name if blank\n  - upsertSignal(nodeId: string, signalTypeId: string, value: number): adds or updates a signal on a node; value=0 deletes it\n  - navigateToSpace(spaceId: string, view?: string): navigates to a space — accepts a perspective UUID or a neighbourhood CID (sharedUrl without the neighbourhood:// prefix); pre-loads space templates before switching so the template and data arrive together\n\nAiStore:\n- State:\n  - models: array of Model objects\n  - tasks: array of AITask objects\n  - isOpen: unknown\n  - messages: unknown\n  - isStreaming: unknown\n  - streamingContent: unknown\n  - apiKeyConfigured: unknown\n  - templateName: unknown\n  - templateIcon: unknown\n  - isReadOnly: unknown\n  - hasPendingChanges: unknown\n  - pickerOpen: unknown\n  - pickerAction: unknown\n  - pickerDefaultName: unknown\n  - pickerDefaultIcon: unknown\n  - pickerShowDestination: unknown\n  - sessions: unknown\n  - activeSessionId: unknown\n  - panelMode: unknown\n  - schemaJson: unknown\n  - operationLoading: unknown\n  - canUndo: boolean (true when there are schema edits that can be undone)\n  - canRedo: boolean (true when there are undone schema edits that can be redone)\n- Actions:\n  - handleSchemaPrompt(prompt: string): generates a schema from a prompt\n  - sendMessage(): unknown\n  - close(): unknown\n  - toggle(): toggles the AI chat panel open/closed\n  - setApiKey(): unknown\n  - startFork(): unknown\n  - startFresh(): unknown\n  - confirmPicker(): unknown\n  - cancelPicker(): unknown\n  - newChat(): unknown\n  - switchSession(): unknown\n  - deleteSession(): unknown\n  - setPanelMode(): unknown\n  - onSchemaEdit(): unknown\n  - undo(): undoes the last schema edit\n  - redo(): redoes the last undone schema edit\n\nAppStore:\n- State:\n  - apps: RegisteredApp[] — list of registered external apps (id, name, image)\n  - appsWithWe: unknown\n  - activeAppId: string | null — id of the currently active app, or null if none\n- Actions:\n  - activateApp(id: string): activates an app and switches to its view\n  - deactivateApp(): deactivates the current app and returns to the template view\n\n---\n\n## Store Usage Patterns\n\nReading state:\n{ \"$store\": \"storeName.property\" }\nExample: { \"$store\": \"routeStore.currentPath\" }\n\nCalling actions:\n{ \"$action\": \"storeName.method\", \"args\": [...] }\nExample: { \"$action\": \"routeStore.navigate\", \"args\": [\"/home\"] }\n\nIterating over store data:\n{\n  \"type\": \"$each\",\n  \"props\": { \"items\": { \"$store\": \"adamStore.personalSpaces\" }, \"as\": \"space\" },\n  \"children\": [\n    {\n      \"type\": \"CircleButton\",\n      \"props\": {\n        \"label\": \"$space.name\",\n        \"onClick\": { \"$action\": \"routeStore.navigate\", \"args\": [{ \"$concat\": [\"/space/\", \"$space.uuid\"] }] }\n      }\n    }\n  ]\n}\n\nConditional rendering from store:\n{\n  \"type\": \"$if\",\n  \"props\": {\n    \"condition\": { \"$eq\": [{ \"$store\": \"routeStore.currentPath\" }, \"/\"] },\n    \"then\": { \"type\": \"we-text\", \"children\": [\"Home\"] },\n    \"else\": { \"type\": \"we-text\", \"children\": [\"Not home\"] }\n  }\n}\n\nDeriving options from store:\n{\n  \"$map\": {\n    \"items\": { \"$store\": \"templateStore.templates\" },\n    \"select\": { \"name\": \"$item.meta.name\", \"icon\": \"$item.meta.icon\" }\n  }\n}\n\nQuerying model data:\n{\n  \"$query\": { \"entity\": \"TaskBlock\", \"where\": { \"status\": \"todo\" } }\n}\n\nEager-loading relations with include (most common relational pattern):\nWhen you need related data displayed alongside a list, use include to hydrate relations in one query.\n\nExample — Channel list with conversation count and latest conversation:\n{\n  \"type\": \"$each\",\n  \"props\": {\n    \"items\": {\n      \"$query\": {\n        \"entity\": \"Channel\",\n        \"dataset\": \"$currentDataset\",\n        \"include\": {\n          \"$conversationCount\": { \"from\": \"conversations\", \"count\": true },\n          \"$latestConversation\": { \"from\": \"conversations\", \"order\": { \"createdAt\": \"desc\" }, \"limit\": 1 }\n        }\n      }\n    },\n    \"as\": \"channel\"\n  },\n  \"children\": [{\n    \"type\": \"Row\",\n    \"children\": [\n      { \"type\": \"we-text\", \"children\": [\"$channel.name\"] },\n      { \"type\": \"we-text\", \"children\": [\"$channel.$conversationCount\"] }\n    ]\n  }]\n}\n\nExample — Nested include (Conversations with their messages):\n{\n  \"$query\": {\n    \"entity\": \"Conversation\",\n    \"dataset\": \"$currentDataset\",\n    \"include\": {\n      \"messages\": {\n        \"order\": { \"createdAt\": \"desc\" },\n        \"limit\": 20\n      }\n    }\n  }\n}\nEach conversation in the result has a messages array of hydrated Message instances.\nNesting works to any depth: \"include\": { \"messages\": { \"include\": { \"reactions\": true } } }\n\nRelational drill-down (master-detail navigation across entity relations):\nUse routes + a $query `scope` when you navigate to a detail route and need only that record's children.\nscope.anchor is the parent entity type; scope.via is its HasMany relation (see externalModels) whose targets\nare the query's entity; scope.anchorId is the parent record's id. The adapter resolves the relation to a\nbackend handle, so no protocol details live in the template.\nrouteStore.segments.N extracts the Nth dynamic path segment (segments splits currentPath by \"/\").\n\nExample — Channel list → Conversation list:\n{\n  \"routes\": [\n    {\n      \"path\": \"/\",\n      \"type\": \"Column\",\n      \"props\": { \"gap\": \"300\", \"p\": \"400\" },\n      \"children\": [{\n        \"type\": \"$each\",\n        \"props\": {\n          \"items\": { \"$query\": { \"entity\": \"Channel\", \"dataset\": \"$currentDataset\" } },\n          \"as\": \"channel\"\n        },\n        \"children\": [{\n          \"type\": \"we-button\",\n          \"props\": {\n            \"variant\": \"ghost\",\n            \"onClick\": { \"$action\": \"routeStore.navigate\", \"args\": [{ \"$concat\": [\"/channels/\", \"$channel.id\"] }] }\n          },\n          \"children\": [\"$channel.name\"]\n        }]\n      }]\n    },\n    {\n      \"path\": \"/channels/:channelId\",\n      \"type\": \"Column\",\n      \"props\": { \"gap\": \"300\", \"p\": \"400\" },\n      \"children\": [{\n        \"type\": \"$each\",\n        \"props\": {\n          \"items\": {\n            \"$query\": {\n              \"entity\": \"Conversation\",\n              \"scope\": { \"anchor\": \"Channel\", \"via\": \"conversations\", \"anchorId\": { \"$store\": \"routeStore.segments.1\" } },\n              \"dataset\": \"$currentDataset\"\n            }\n          },\n          \"as\": \"convo\"\n        },\n        \"children\": [{\n          \"type\": \"we-text\",\n          \"children\": [\"$convo.conversationName\"]\n        }]\n      }]\n    }\n  ]\n}\nNotes:\n- Use include when you need related data displayed inline (e.g. a post with its comments, a channel with its conversation count).\n- Use a scope drill-down when you're on a detail route and want only children belonging to the current record.\n- dataset must point to the dataset that holds the data. For external apps (e.g. Flux) opened as a WE space, use \"$currentDataset\".\n- The relation name (in include, or scope.via) is the HasMany field name on the parent entity.\n\nLocal state (form with validation):\n{\n  \"type\": \"Column\",\n  \"$localState\": {\n    \"name\": {\n      \"type\": \"string\",\n      \"initial\": \"\",\n      \"validate\": [{ \"rule\": \"required\" }, { \"rule\": \"minLength\", \"value\": 2 }]\n    },\n    \"loading\": { \"type\": \"boolean\", \"initial\": false }\n  },\n  \"children\": [\n    {\n      \"type\": \"we-form-field\",\n      \"props\": { \"label\": \"Name\", \"error\": { \"$error\": \"name\" } },\n      \"children\": [{\n        \"type\": \"we-input\",\n        \"props\": {\n          \"value\": { \"$local\": \"name\" },\n          \"onInput\": { \"$setLocal\": \"name\", \"from\": \"$event.detail\" },\n          \"onBlur\": { \"$touch\": \"name\" }\n        }\n      }]\n    },\n    {\n      \"type\": \"we-button\",\n      \"props\": {\n        \"text\": \"Submit\",\n        \"loading\": { \"$local\": \"loading\" },\n        \"disabled\": { \"$not\": { \"$formValid\": \"$scope\" } },\n        \"onClick\": [\n          { \"$touch\": \"$all\" },\n          { \"$if\": { \"condition\": { \"$formValid\": \"$scope\" }, \"then\": { \"$action\": \"myStore.submit\", \"args\": [{ \"$local\": \"name\" }] } } }\n        ]\n      }\n    }\n  ]\n}\n\nRepeating lists with $each:\nALWAYS use $each for lists of similar items — never duplicate the same node structure.\nWrite the template once; $each renders it for each item.\n\nUse literal arrays for fixed/sample data:\n{\n  \"type\": \"$each\",\n  \"props\": {\n    \"items\": [\n      { \"title\": \"First Post\", \"text\": \"Hello world.\", \"author\": \"Alice\" },\n      { \"title\": \"Second Post\", \"text\": \"Another update.\", \"author\": \"Bob\" }\n    ],\n    \"as\": \"post\"\n  },\n  \"children\": [\n    {\n      \"type\": \"Column\",\n      \"props\": { \"bg\": \"neutral-0\", \"r\": \"400\", \"border\": \"1px solid neutral-200\", \"p\": \"400\", \"gap\": \"300\" },\n      \"children\": [\n        {\n          \"type\": \"Row\",\n          \"props\": { \"gap\": \"300\", \"ay\": \"center\" },\n          \"children\": [\n            { \"type\": \"we-avatar\", \"props\": { \"initials\": \"$post.author\", \"size\": \"sm\" } },\n            { \"type\": \"we-text\", \"props\": { \"variant\": \"label\" }, \"children\": [\"$post.author\"] }\n          ]\n        },\n        { \"type\": \"we-text\", \"props\": { \"variant\": \"heading-sm\" }, \"children\": [\"$post.title\"] },\n        { \"type\": \"we-text\", \"children\": [\"$post.text\"] }\n      ]\n    }\n  ]\n}\n\nUse $query or $store for dynamic data (more common in production):\n{ \"type\": \"$each\", \"props\": { \"items\": { \"$query\": { \"entity\": \"TextBlock\" } }, \"as\": \"post\" }, \"children\": [...] }\n{ \"type\": \"$each\", \"props\": { \"items\": { \"$store\": \"spaceStore.posts\" }, \"as\": \"post\" }, \"children\": [...] }\n\nPer-item customization inside $each:\nTo style or highlight specific items, add a data flag to those items and use $if on the flag inside the template. Do NOT use $eq: [\"$index\", N] comparisons — they are fragile, repetitive, and break when items are reordered.\nExample: add \"highlighted\": true to one item's data, then use $if on \"$post.highlighted\" in the template:\n{ \"type\": \"$if\", \"props\": { \"condition\": \"$post.highlighted\", \"then\": { \"type\": \"we-badge\", \"props\": { \"variant\": \"primary\" }, \"children\": [\"Featured\"] } } }\nFor conditional props (e.g. different bg on highlighted items):\n{ \"bg\": { \"$if\": { \"condition\": \"$post.highlighted\", \"then\": \"primary-50\", \"else\": \"neutral-0\" } } }\n\nBoolean toggle (show/hide, expand/collapse):\n{\n  \"type\": \"Column\",\n  \"$localState\": { \"showDetails\": { \"type\": \"boolean\", \"initial\": false } },\n  \"children\": [\n    { \"type\": \"we-button\", \"props\": { \"variant\": \"ghost\", \"onClick\": { \"$toggleLocal\": \"showDetails\" } }, \"children\": [\"Toggle Details\"] },\n    { \"type\": \"$if\", \"props\": { \"condition\": { \"$local\": \"showDetails\" }, \"then\": { \"type\": \"we-text\", \"children\": [\"Details content here\"] } } }\n  ]\n}\n\nSignal types (community-specific reactions/votes):\nSignal types are created per-community by the user. Never hardcode signal type UUIDs in schemas.\nInstead reference them by slug through spaceStore.signalTypesBySlug.\n\nALWAYS ask the user: \"What slug should I use? (e.g. 'like', 'upvote', 'star')\"\nThen use that slug in the pattern below.\n\nPattern — live wired SignalControl (inside a $each over a model with $query include):\n{\n  \"type\": \"$each\",\n  \"props\": {\n    \"items\": {\n      \"$query\": {\n        \"entity\": \"MyBlock\",\n        \"include\": {\n          \"$totalLikeCount\": {\n            \"from\": \"signals\",\n            \"where\": { \"signalTypeId\": { \"$store\": \"spaceStore.signalTypesBySlug.like.id\" } },\n            \"count\": true\n          },\n          \"$myLikeSignal\": {\n            \"from\": \"signals\",\n            \"where\": {\n              \"signalTypeId\": { \"$store\": \"spaceStore.signalTypesBySlug.like.id\" },\n              \"author\": \"$me.did\"\n            },\n            \"limit\": 1\n          }\n        }\n      }\n    },\n    \"as\": \"item\"\n  },\n  \"children\": [\n    {\n      \"type\": \"$if\",\n      \"props\": {\n        \"condition\": { \"$store\": \"spaceStore.signalTypesBySlug.like\" },\n        \"then\": {\n          \"type\": \"SignalControl\",\n          \"props\": {\n            \"signalType\": { \"$store\": \"spaceStore.signalTypesBySlug.like\" },\n            \"myValue\": \"$item.$myLikeSignal.value\",\n            \"aggregate\": \"$item.$totalLikeCount\",\n            \"onSignal\": {\n              \"$action\": \"spaceStore.upsertSignal\",\n              \"args\": [\"$item.id\", { \"$store\": \"spaceStore.signalTypesBySlug.like.id\" }, \"$arg\"]\n            }\n          }\n        }\n      }\n    }\n  ]\n}\n\nNotes:\n- The $if guard hides SignalControl if the community hasn't created a signal type with that slug.\n- Replace \"like\" with the user's slug throughout (in $store paths and args).\n- $query include adds $totalLikeCount and $myLikeSignal as computed properties on each item.\n- signalType prop accepts the full SignalType object (provides icon, mode, range to the UI component).\n\nPreview / mockup mode (static, no store wiring):\n{\n  \"type\": \"SignalControl\",\n  \"props\": {\n    \"preview\": true,\n    \"signalType\": { \"icon\": \"❤️\", \"mode\": \"toggle\", \"rangeMin\": 0, \"rangeMax\": 1 }\n  }\n}\nUse preview: true when sketching a layout without real data. Remove it (and add the full wiring above) when going live.\n\n---\n\n## Routing Structure\n\nDefine nested routes using the \"routes\" array at the root node of the schema.\nEach route object describes a path and the UI node to render when that path is active.\nRoutes can be nested to support sub-pages and layouts.\n\nRoute objects follow the same structure as schema nodes, with an additional \"path\" property.\n\n- The \"routes\" array MUST be placed on the ROOT template node (or on a route node for nested routing). The router only reads routes from these positions — placing routes on an arbitrary child node means the router will never find them and nothing will render.\n- Use \"path: '*'\" or \"path: '/*'\" for catch-all/not-found routes.\n- Use \":paramName\" for dynamic route parameters (e.g. \"/space/:spaceId\").\n- Use nested \"routes\" arrays for sub-pages and layouts.\n- Use { \"type\": \"$routes\" } in children to indicate where nested routes should render. The $routes outlet can be deeply nested — only the routes array placement matters.\n- EVERY { \"type\": \"$routes\" } outlet MUST have a \"routes\" array defined on the same node or an ancestor node. A $routes outlet without a routes array is invalid and will fail validation.\n- NEVER duplicate a route path — every route in the same \"routes\" array MUST have a unique path.\n- When using tabs, each tab's key and navigate path MUST have a matching route. Ensure a 1:1 correspondence between tabs and routes.\n\n### Tabs + Routing\n\nIMPORTANT: we-tabs only manages visual selection — clicking a tab does NOT navigate automatically.\nEach we-tab MUST have an onClick with { \"$action\": \"routeStore.navigate\" } to trigger route changes.\nBind we-tabs selectedKey to the matching route segment so the active tab stays in sync.\n(Alternatively, a single onChange on we-tabs can replace per-tab onClick — see onChange pattern below.)\n\nRecommended pattern — header above tabs (routes on ROOT, $routes outlet nested inside):\n{\n  \"type\": \"Column\",\n  \"routes\": [\n    { \"path\": \"/\", \"type\": \"we-text\", \"children\": [\"Select a tab\"] },\n    { \"path\": \"/posts\", \"type\": \"Column\", \"children\": [{ \"type\": \"we-text\", \"children\": [\"Posts content\"] }] },\n    { \"path\": \"/articles\", \"type\": \"Column\", \"children\": [{ \"type\": \"we-text\", \"children\": [\"Articles content\"] }] }\n  ],\n  \"children\": [\n    { \"type\": \"Row\", \"props\": { \"p\": \"300\", \"ax\": \"between\" }, \"children\": [\n      { \"type\": \"we-text\", \"props\": { \"variant\": \"heading-lg\" }, \"children\": [\"My App\"] }\n    ]},\n    {\n      \"type\": \"we-tabs\",\n      \"props\": { \"selectedKey\": { \"$store\": \"routeStore.segments.0\" } },\n      \"children\": [\n        { \"type\": \"we-tab\", \"props\": { \"key\": \"posts\", \"label\": \"Posts\", \"onClick\": { \"$action\": \"routeStore.navigate\", \"args\": [\"/posts\"] } } },\n        { \"type\": \"we-tab\", \"props\": { \"key\": \"articles\", \"label\": \"Articles\", \"onClick\": { \"$action\": \"routeStore.navigate\", \"args\": [\"/articles\"] } } }\n      ]\n    },\n    { \"type\": \"$routes\" }\n  ]\n}\nNote: \"routes\" is on the root Column, NOT on a child. The $routes outlet is a child — that's fine. Only the routes array placement matters.\n\nWRONG — two common mistakes that produce empty tabs (validator will catch both):\n{\n  // MISTAKE 1: routes defined on an inner child node, not the root.\n  // The router never inspects children for routes arrays — this routes array is invisible.\n  \"type\": \"Column\",\n  \"children\": [\n    { \"type\": \"we-tabs\", \"children\": [\"...tabs...\"] },\n    {\n      \"type\": \"Column\",\n      \"routes\": [                          // ← WRONG: router never reads this\n        { \"path\": \"/posts\", \"type\": \"Column\", \"children\": [\"...\"] }\n      ],\n      \"children\": [{ \"type\": \"$routes\" }]  // ← outlet here does nothing without a live routes array\n    }\n  ]\n}\n\n{\n  // MISTAKE 2: using { type: \"$routes\" } as a route entry's component type.\n  // $routes is an outlet slot marker — as a leaf route entry it has no children injected,\n  // so it returns null. Every tab navigates to a route that renders nothing.\n  \"type\": \"Column\",\n  \"routes\": [\n    { \"path\": \"/posts\", \"type\": \"$routes\" }  // ← WRONG: renders null, use a real component\n  ],\n  \"children\": [{ \"type\": \"$routes\" }]\n}\n\nAlternative: single onChange on we-tabs (fires with $event.detail.value = selected key):\n{ \"onChange\": { \"$action\": \"routeStore.navigate\", \"args\": [{ \"$concat\": [\"/\", \"$arg.detail.value\"] }] } }\nThis replaces all per-tab onClick handlers but requires $concat to build the path.\n\nNested routing example:\n{\n  \"routes\": [\n    { \"path\": \"*\", \"type\": \"Column\", \"props\": { \"ax\": \"center\", \"p\": \"500\" }, \"children\": [{ \"type\": \"we-text\", \"children\": [\"Page not found\"] }] },\n    { \"path\": \"/\", \"type\": \"Column\", \"props\": { \"ax\": \"center\", \"p\": \"500\" }, \"children\": [{ \"type\": \"we-text\", \"children\": [\"Home page\"] }] },\n    {\n      \"path\": \"/space/:spaceId\",\n      \"type\": \"Row\",\n      \"children\": [{ \"type\": \"$routes\" }],\n      \"routes\": [\n        { \"path\": \"/*\", \"type\": \"we-text\", \"children\": [\"Space page not found\"] },\n        { \"path\": \"/\", \"type\": \"we-text\", \"children\": [\"About sub-page\"] },\n        { \"path\": \"/posts\", \"type\": \"Column\", \"children\": [{ \"type\": \"$routes\" }],\n          \"routes\": [\n            { \"path\": \"/*\", \"type\": \"we-text\", \"children\": [\"Post not found\"] },\n            { \"path\": \"/\", \"type\": \"we-text\", \"children\": [\"No posts selected\"] },\n            { \"path\": \"/1\", \"type\": \"we-text\", \"children\": [\"Post 1 page\"] }\n          ]\n        }\n      ]\n    }\n  ]\n}\n\n---\n\n## Rules & Best Practices\n\n- Always use the correct prop names and value types for each component.\n- Never use null as a value in any children array. Only use valid schema nodes or strings.\n- Each item in a children array must be either a valid schema node object or a string.\n- Use design tokens for spacing, color, radius, etc. (do not use raw CSS except in styles).\n- Use the styles prop for custom inline CSS (e.g., { \"width\": \"100px\" }).\n- Use hoverProps for hover state overrides, activeProps for pressed state, focusProps for focus state. Supported on @we/primitives (we-text, we-button, etc.) and layout components (Column, Row).\n- Use dynamic logic tokens ($store, $if, $action, etc.) for reactivity and conditional behavior.\n- Nest components using children or slots as needed.\n- For routes, use the routes array with path and child nodes.\n- Do not invent new components or props — use only those listed in the component registry.\n- Do not set props to their default/inherited values — omit them. fontSize and fontWeight inherit from parents (~16px / normal), so only set them when you need a different value.\n- Omit empty `props` and `children` — both are optional. Do not write `props: {}` or `children: []`.\n- Do not use `as const` on schema node `type` fields — `SchemaNode.type` is `string`, so it is never needed.\n- For icon-only buttons, nest a `we-icon` child inside `we-button` rather than using a `text` prop with a Unicode character. **Omit the `size` prop on `we-icon` when nesting inside sized primitives** (`we-button`, `we-input`, `we-badge`, `we-textarea`) — these components auto-size nested icons via `--we-context-icon-size` (xs→12px, sm→16px, md→24px, lg→32px, xl→40px). Only set an explicit icon `size` if you need to override the automatic sizing. Example: `{ type: 'we-button', props: { variant: 'ghost', size: 'sm' }, children: [{ type: 'we-icon', props: { name: 'x' } }] }`.\n- NEVER pass a bare number like \"16\" as a size or dimension prop — it is not valid CSS. Always check the component's declared prop type: if it's a string union, use one of the listed values; if it accepts arbitrary strings, include a CSS unit (e.g. \"16px\", \"2rem\").\n- For interactive list items and selectable options, use `we-button` with variant switching (e.g., `secondary` when selected, `ghost` when not) instead of manually styling `Row` with cursor, bg, and onClick. Buttons provide hover, focus, and active states for free.\n- For card-like layouts, compose from `Column` with DS props (bg, r, border, p, gap). This gives full control over spacing and appearance.\n- When rendering lists of similar items (posts, cards, users, etc.), ALWAYS use `$each` with a single template child — never duplicate the same node structure multiple times. Use literal arrays in `items` for static data, or `$store`/`$query` for dynamic data.\n\n### Icon Names (Phosphor Icons)\n\nwe-icon uses **Phosphor Icons** (v2.1). Do NOT use Heroicons, Material, or FontAwesome names.\nPhosphor names are lowercase-kebab-case. The `weight` prop controls style: \"regular\" (default), \"bold\", \"fill\", \"light\", \"thin\", \"duotone\".\n\nCommon Phosphor icon names (use these, NOT Heroicons equivalents):\n- Navigation: house, arrow-left, arrow-right, caret-left, caret-right, caret-down, caret-up, arrows-clockwise\n- Actions: plus, minus, x, check, pencil-simple, trash, copy, download, upload, share, link, magnifying-glass, funnel, sliders-horizontal\n- Communication: chat-circle, chat-dots, envelope-simple, paper-plane-tilt, bell, megaphone\n- Social: heart, thumbs-up, thumbs-down, star, share-network, users, user, user-plus\n- Media: image, camera, play, pause, stop, microphone, speaker-high, video-camera\n- Files: file, file-text, folder, folder-open, clipboard-text, note\n- UI: list, squares-four, gear, dots-three, dots-three-vertical, warning, info, question, check-circle, x-circle, eye, eye-slash\n- Misc: lightning, rocket, globe, map-pin, calendar, clock, tag, bookmark, flag, lock, shield-check\n\nWRONG icon names (Heroicons/Material — do NOT use):\n- \"chat-bubble-left\" → use \"chat-circle\"\n- \"chevron-right\" → use \"caret-right\"\n- \"cog\" / \"settings\" → use \"gear\"\n- \"trash-can\" → use \"trash\"\n- \"magnifying-glass-circle\" → use \"magnifying-glass\"\n- \"home\" → use \"house\"\n- \"favorite\" → use \"heart\"\n- \"delete\" → use \"trash\"\n- \"search\" → use \"magnifying-glass\"\n- \"close\" → use \"x\"\n- \"menu\" → use \"list\"\n- All schemas must be valid JSON with property names and string values in double quotes.\n- The meta property at the root is required: { \"meta\": { \"name\": \"...\", \"description\": \"...\", \"icon\": \"...\" } }\n- Always set `bg: 'neutral-50'` on root-level schema nodes (templates, pages). This ensures proper background in all themes — without it, dark mode renders white backgrounds.\n\nMost @we/primitives inherit all Design System Props documented above (layout, visual, flex, typography, state).\nSome layout-only primitives (we-avatar, we-icon, we-image, we-spinner, etc.) only accept Layout props — see the Design System Props section for the full list.\n\nNative HTML elements (lowercase tags render directly without registry entries):\n- Layout: div, section, article, aside, main, nav, header, footer\n- Text: p, span, h1-h6, pre, code, blockquote\n- Lists: ul, ol, li\n- Forms: form, input, button, label, select, textarea\n- Media: img, video, audio, canvas, figure, figcaption\n- Other: a, table, tr, td, th, details, summary, dialog\n\n## Schema Validation\n\nRun `we-validate-schemas` (or `node packages/schema-system/shared/dist/cli/we-validate-schemas.js`) from the monorepo root to validate all `.schema.ts` files.\nFor a specific file: `we-validate-schemas packages/app-framework/src/shared/schemas/MyTemplate.schema.ts`\n\nAfter creating or modifying a `.schema.ts` file, always run validation to catch:\n- Unknown component types (typos, missing registry entries)\n- Invalid or misspelled props (with \"did you mean?\" suggestions)\n- Prop type mismatches (e.g., number where string expected)\n- Missing required `meta` field on root TemplateSchema nodes\n- `$routes` outlet without a `routes` array on an ancestor\n- Orphan `$local` / `$setLocal` references without a `$localState` ancestor\n- DS layer consistency (mixing props from layers the component doesn't support)";
+export const schemaContext = "## Schema Structure\n\nA schema is a tree of nodes. Each node can have:\n- type: The component to render (string, e.g. \"we-button\", \"Column\")\n- props: An object of props for the component\n- children: An array of child nodes (or strings for text), or token objects like { $store: '...' } or { $concat: [...] }.\n- slots: Named slots for advanced composition (optional)\n- slot: The name of the slot this node should be rendered into (optional)\n- routes: For routing components, an array of nestable route objects (optional)\n- styles: Raw CSS escape hatch — Record<string, string | number> applied as inline styles on a **wrapper div** that surrounds the component. Use only for CSS that must live on a wrapper: filter, clip-path, backdrop-filter, mix-blend-mode. When present the wrapper participates in layout (no display:contents), so CSS effects apply correctly. **Important:** this is NOT the same as props.styles. If you want to apply custom CSS to a Column, Row, or Grid's own element (e.g. a background image), put it in props.styles instead — node-level styles go on a wrapper div around the component and will be hidden behind the component's own background.\n\nExample node:\n{\n  \"type\": \"we-button\",\n  \"props\": {\n    \"onClick\": { \"$action\": \"routeStore.navigate\", \"args\": [\"/home\"] }\n  },\n  \"children\": [\n    { \"type\": \"we-icon\", \"props\": { \"name\": \"house\" } },\n    { \"type\": \"we-text\", \"props\": { \"size\": \"600\" }, \"children\": [\"Home\"] }\n  ]\n}\n\n## Prop-level Dynamic Logic & Expressions\n\nSpecial tokens in props enable dynamic, reactive, or computed behavior.\n\nStore reference:\n{ \"$store\": \"storeName.property.path\" }\nResolves a value from a named store, supporting nested paths.\n\nAction/event:\n{ \"$action\": \"storeName.method\", \"args\": [...] }\nCalls a method on a store, optionally with arguments (which can themselves be tokens).\nSupports async lifecycle callbacks — fired after the store method's Promise resolves/rejects:\n  onSuccess: [...actions]  — fired on resolve; '$result' (and '$result.<path>') in args refers to the resolved value\n  onError: [...actions]    — fired on reject; '$result.message' etc. refers to the error object\n  onFinally: [...actions]  — fired regardless of outcome\nNon-promise (synchronous) methods are unaffected — lifecycle keys are ignored.\nExample — close modal after async submission:\n{ \"$action\": \"adamStore.createSpace\", \"args\": [...], \"onSuccess\": [{ \"$setLocal\": \"modalOpen\", \"value\": false }] }\nExample — navigate to newly created item:\n{ \"$action\": \"adamStore.createSpace\", \"args\": [...], \"onSuccess\": [{ \"$setLocal\": \"modalOpen\", \"value\": false }, { \"$action\": \"routeStore.navigate\", \"args\": [{ \"$concat\": [\"/space/\", \"$result.uuid\"] }] }] }\n\nModel mutations via $action (use these for creating/updating/deleting model instances):\nmodel.create — creates a model instance in the current perspective (default) or a specified one:\n{ \"$action\": \"model.create\", \"args\": [\"ModelName\", { \"field\": \"value\" }, { \"perspective\": \"adamStore.rootPerspective\" }] }\nThe third argument is an options object. Omit it to use the current space perspective.\n\nmodel.update — updates a model instance:\n{ \"$action\": \"model.update\", \"args\": [\"ModelName\", \"$item.id\", { \"field\": \"newValue\" }] }\nTo target a non-current perspective: { \"$action\": \"model.update\", \"args\": [\"ModelName\", \"$item.id\", { \"field\": \"value\" }, { \"perspective\": \"adamStore.rootPerspective\" }] }\n\nmodel.delete — deletes a model instance:\n{ \"$action\": \"model.delete\", \"args\": [\"ModelName\", \"$item.id\"] }\n\nUse perspective: 'adamStore.rootPerspective' for we-root models (AgentSettings, ChatSession, etc.).\nUse the default (no perspective) for space-scoped models (Space, Signal, etc.).\n\nConditional logic:\n{ \"$if\": { \"condition\": ..., \"then\": ..., \"else\": ... } }\nEvaluates condition; if truthy, returns then, else returns else.\n\nMap/iterate:\n{ \"$map\": { \"items\": { \"$store\": \"templateStore.templates\" }, \"select\": { ... } } }\nIterates over an array, mapping each item to a new object using the select mapping.\n\nPick:\n{ \"$pick\": { \"from\": { \"$store\": \"userStore.profile\" }, \"props\": [\"name\", \"email\"] } }\nPicks specific properties from an object.\n\nConcat (string building):\n{ \"$concat\": [\"part1\", \"$context.value\", \"part2\"] }\nJoins multiple parts into a single string.\n\nContext references:\nStrings starting with \"$\" followed by a context key resolve to context values.\nExample: \"$space.name\" resolves to the name property of the space context variable.\nDot paths supported: \"$item.profile.avatar\".\n\nEquality / inequality checks:\n{ \"$eq\": [a, b] } — strict equality\n{ \"$ne\": [a, b] } — strict inequality\n\nNumeric comparisons:\n{ \"$lt\": [a, b] } — a < b (less than)\n{ \"$gt\": [a, b] } — a > b (greater than)\nExample: { \"$gt\": [{ \"$count\": { \"items\": { \"$store\": \"listStore.items\" } } }, 0] }\n\nSet membership:\n{ \"$in\": [value, array] } — true if array contains value (false if second operand is not an array)\nExample: { \"$in\": [{ \"$store\": \"spaceStore.uuid\" }, { \"$store\": \"adamStore.systemPerspectiveUuids\" }] }\nExample: { \"$in\": [\"$item.role\", [\"admin\", \"moderator\"]] }\n\nBoolean logic:\n{ \"$and\": [a, b, ...] } — all truthy\n{ \"$or\": [a, b, ...] } — any truthy\n{ \"$not\": a } — negation\n\nArray operators:\n{ \"$filter\": { \"items\": <array>, \"where\": { \"field\": \"value\", ... } } }\nFilters an array to items where all where conditions match. Mirrors the $query where operator set:\n\n  { \"field\": \"value\" }                                   — strict equality\n  { \"field\": { \"not\": \"value\" } }                        — inequality; array form excludes multiple values\n  { \"field\": { \"contains\": \"text\" } }                    — case-insensitive substring match (strings only)\n  { \"field\": { \"exists\": true } }                        — non-null / non-undefined presence check\n  { \"field\": { \"exists\": false } }                       — null or undefined check\n\nWhere values (including those inside operator objects) are resolved through the prop system,\nso $store, $local, and context refs like { \"$local\": \"searchText\" } all work.\n\n$query-only logical combinators (OR / AND / NOT) — NOT supported in $filter, only in $query's where:\n  { \"OR\": [ { \"field\": \"value\" }, { \"field2\": \"value2\" } ] }   — matches if ANY branch matches\n  { \"AND\": [ { ... }, { ... } ] }                              — matches if ALL branches match (sibling keys at the\n                                                                  same level are already implicitly ANDed — use AND\n                                                                  to group a set of conditions alongside an OR/NOT)\n  { \"NOT\": { \"field\": \"value\" } }                              — matches if the branch does NOT match\nBranches are full where-clause objects (can contain multiple fields, and can nest OR/AND/NOT inside each other).\nSibling keys alongside OR/AND/NOT at the same level are implicitly ANDed with it.\nExample — case-insensitive search across two fields:\n{\n  \"$query\": {\n    \"entity\": \"Space\",\n    \"where\": {\n      \"OR\": [\n        { \"name\": { \"contains\": { \"$local\": \"searchText\" } } },\n        { \"description\": { \"contains\": { \"$local\": \"searchText\" } } }\n      ]\n    }\n  }\n}\nNote: using OR/AND/NOT disables the SPARQL-level sort/pagination pushdown (see count-projection and\nrelation-property ordering below) — those orderings silently stop working if combined with OR/AND/NOT in the\nsame query's where clause, because the fallback sort runs before the projection/relation data is attached.\n\nExamples:\n{ \"$filter\": { \"items\": { \"$store\": \"spaceStore.members\" }, \"where\": { \"role\": \"admin\" } } }\n{ \"$filter\": { \"items\": { \"$store\": \"spaceStore.members\" }, \"where\": { \"location\": { \"exists\": true }, \"handle\": { \"contains\": { \"$local\": \"searchText\" } } } } }\n\n{ \"$count\": { \"items\": <array> } }\nReturns the length of an array.\nExample: { \"badge\": { \"$count\": { \"items\": { \"$store\": \"notificationStore.unread\" } } } }\n\n{ \"$find\": { \"items\": <array>, \"where\"?: { ... }, \"select\"?: \"fieldName\" } }\nFinds the first matching item. where is optional (returns first item if omitted). select plucks a single field.\nExample: { \"$find\": { \"items\": { \"$store\": \"spaceStore.members\" }, \"where\": { \"id\": \"$item.creatorId\" }, \"select\": \"name\" } }\n\n{ \"$plural\": { \"count\": <number>, \"one\": \"singular\", \"other\": \"plural\" } }\nReturns \"one\" when count === 1, otherwise \"other\". Use in children arrays for count-noun labels.\ncount is resolved through the prop system — any numeric expression ($count, $store, context ref) works.\nExample: { \"$plural\": { \"count\": { \"$count\": { \"items\": { \"$store\": \"spaceStore.members\" } } }, \"one\": \"Member\", \"other\": \"Members\" } }\nCompose with we-number for a full \"N Members\" display:\n  we-number (value: { \"$count\": ... }, shorten: true) + we-text (children: [{ \"$plural\": { \"count\": { \"$count\": ... }, \"one\": \"Member\", \"other\": \"Members\" } }])\n\nQuery (data retrieval):\n{ \"$query\": { \"entity\": \"ModelName\", \"where\": { \"field\": \"value\" }, \"limit\": 10, \"order\": { \"field\": \"asc\" } } }\nQueries the current dataset for entity instances. Always returns an array.\nOptions: entity (required), where, order, limit, offset, include, scope, dataset, subscribe.\nsubscribe defaults to true — reactive live updates. Set subscribe: false to do a one-time fetch.\nBy default $query targets the current dataset ($currentDataset). Use dataset to query a different dataset —\nrequired when reading entities from an external app (e.g. Flux) that is open as a WE space:\n{ \"$query\": { \"entity\": \"Channel\", \"dataset\": \"$currentDataset\" } }\n\nBackend-neutral identity & dataset refs — prefer these over adamStore.* store paths inside $query and conditions:\n- $currentDataset — the currently active dataset (an AD4M perspective, in the AD4M backend). Use as a dataset value.\n- $me — the current agent's identity object. Use $me.did for their DID (ownership checks, author filters, e.g. { \"$eq\": [\"$post.author\", \"$me.did\"] }); $me.handle / $me.avatar for profile fields once loaded.\n\nEager-loading relations with include (most common relational pattern):\ninclude hydrates related model instances in the same query — no extra fetches needed.\nRelation names come from the HasMany relations listed for each model in externalModels.\n\nSimple include — hydrate all related instances:\n{ \"$query\": { \"entity\": \"Channel\", \"include\": { \"conversations\": true } } }\nEach item in the result will have a conversations array of hydrated Conversation objects.\n\nSub-query include — filter, sort, or limit the related records:\n{ \"$query\": { \"entity\": \"Channel\", \"include\": { \"conversations\": { \"order\": { \"createdAt\": \"desc\" }, \"limit\": 10 } } } }\n\nNested include — hydrate relations of relations:\n{ \"$query\": { \"entity\": \"Channel\", \"include\": { \"conversations\": { \"include\": { \"messages\": true } } } } }\nNesting can go as deep as needed. Each level adds one batched fetch (not N+1).\n\nCount projection — add a derived numeric field:\n{ \"$query\": { \"entity\": \"Post\", \"include\": { \"$likeCount\": { \"from\": \"likes\", \"count\": true } } } }\nThe $-prefixed key becomes a new field on each result item (e.g. item.$likeCount = 42).\n\nSorting by a count projection — order can reference a $-prefixed count key directly, sorting by the aggregate:\n{\n  \"$query\": {\n    \"entity\": \"Post\",\n    \"limit\": 20,\n    \"order\": { \"$likeCount\": \"desc\" },\n    \"include\": { \"$likeCount\": { \"from\": \"likes\", \"count\": true } }\n  }\n}\nRequirements: only a single order key is supported when it targets a projection (mixing it with a second sort key falls back\nto a plain property sort), and the query must also specify limit or offset — without one the count isn't computed yet at\nsort time and the order silently has no effect. Always pair count-projection ordering with a limit.\nCombine with $if for a user-togglable sort field (e.g. \"newest\" vs \"most liked\"):\n{\n  \"order\": {\n    \"$if\": {\n      \"condition\": { \"$eq\": [{ \"$local\": \"sortField\" }, \"likes\"] },\n      \"then\": { \"$likeCount\": { \"$local\": \"sortDirection\" } },\n      \"else\": { \"createdAt\": { \"$local\": \"sortDirection\" } }\n    }\n  }\n}\n\nSorting by a related model property — order can reference a dotted \"relation.property\" path for a HasOne/HasMany\nrelation declared on the model, sorting by a scalar property on the related instance:\n{\n  \"$query\": {\n    \"entity\": \"Space\",\n    \"limit\": 20,\n    \"order\": { \"location.country\": \"asc\" },\n    \"include\": { \"location\": true }\n  }\n}\nSame requirements as count-projection ordering above: only a single order key, and pair with limit/offset — without\none the relation data isn't attached yet at sort time and the order silently has no effect. include isn't required\nfor the sort itself (the relation is resolved from the model's declared shape), but you'll usually want it anyway to\nread the field in the UI (e.g. \"$space.location.country\").\nCombine with $if the same way as count-projection ordering to let the user toggle between sort fields.\n\nSingle-item projection — add a derived field that resolves to one instance or null:\n{ \"$query\": { \"entity\": \"Post\", \"include\": { \"$myLike\": { \"from\": \"likes\", \"where\": { \"author\": \"$me.did\" }, \"limit\": 1 } } } }\nWith limit: 1 the field unwraps to T | null instead of an array.\n\ninclude only works with typed relations — ones where the target model class is known.\nFor WE models this is always the case. For external models, check the externalModels listing:\nrelations marked \"→ ModelName\" are typed (safe for include); relations marked \"parent query only\"\nare untyped and will crash at runtime if used with include — use a scope drill-down instead.\n\nRelational queries — fetch a parent record's children (drill-down navigation):\n{ \"$query\": { \"entity\": \"Conversation\", \"scope\": { \"anchor\": \"Channel\", \"via\": \"conversations\", \"anchorId\": \"$channel.id\" } } }\nscope.anchor is the parent entity type; scope.via is its relation whose targets are this query's entity (the\nHasMany relation listed for that entity in externalModels); scope.anchorId is the parent record's id (typically\nfrom a $each context variable or a route segment). The adapter resolves the relation to a backend handle —\nno protocol details live in the template.\nUse this pattern when navigating to a detail route and loading only that record's children.\nFor external-app datasets, always add dataset: \"$currentDataset\".\n\nLocal state (scoped ephemeral state):\nDeclare on any node: \"$localState\": { \"name\": { \"type\": \"string\", \"initial\": \"\" } }\nSupported types: \"string\", \"boolean\", \"number\", \"function\", \"object\".\nRead:  { \"$local\": \"name\" } — returns the signal value (reactive).\n       { \"$local\": \"name.nested.path\" } — dot-notation reads into object-typed fields (reactive).\nWrite: { \"$setLocal\": \"name\", \"from\": \"$event.target.value\" } — event handler that updates the signal.\n       { \"$setLocal\": \"name\", \"value\": \"literal\" } — sets to a literal value (string, number, boolean, null, object).\n       { \"$setLocal\": \"name\", \"merge\": { \"field\": \"$event.detail\" } } — shallow-merges fields into an object-typed signal. Values are resolved as event paths (e.g. \"$event.detail\") or passed as literals. Use for partial updates to object state.\nToggle: { \"$toggleLocal\": \"fieldName\" } — toggles a boolean field (equivalent to setting it to !current). Use for show/hide, open/close, expand/collapse patterns.\nCall function: { \"$callLocal\": \"fieldName\" } — event handler that calls the function stored in a function-typed local field.\n  Used when a child component needs to trigger a callback passed in via $localState.\n  The field must be declared as type: 'function' and set via $setLocal.\n  Example: { \"onClick\": { \"$callLocal\": \"onConfirm\" } }\nState is created on mount and destroyed on unmount. Nested $localState declarations merge, inner fields shadow outer.\n$local values can be used in $action args: { \"$action\": \"store.method\", \"args\": [{ \"$local\": \"name\" }] }\n\nObject-typed local state (consolidating related scalar fields):\nWhen several related fields share a common condition on their initial values (e.g. all null/empty when a store value is absent), prefer a single \"object\" field seeded from the store, then read sub-fields with dot-notation and write with merge.\nExample — location object (replaces 5 separate scalar fields with $if guards):\n  \"$localState\": { \"location\": { \"type\": \"object\", \"initial\": { \"$store\": \"spaceStore.currentSpace.location\" } } }\n  Read:  { \"$local\": \"location.latitude\" }, { \"$local\": \"location.city\" }\n  Write (picker confirm): { \"$setLocal\": \"location\", \"from\": \"$event.detail\" }\n  Write (partial edit):   { \"$setLocal\": \"location\", \"merge\": { \"city\": \"$event.detail\" } }\n  Write (clear):          { \"$setLocal\": \"location\", \"value\": null }\n  Condition (has location): { \"$local\": \"location\" }\nUse \"object\" whenever you would otherwise write 3+ related scalar fields each needing $if on their initial value.\n\nHoisted query state ($queries):\nDeclare on any node to run reactive subscriptions at the node root and expose results in $local.\nSolves two problems: avoids N duplicate subscriptions inside $each loops, and makes query results available for $if conditions.\n\"$queries\": { \"signalTypes\": { \"entity\": \"SignalType\", \"subscribe\": true } }\nResults are injected into $local as read-only reactive arrays, accessible via { \"$local\": \"signalTypes\" }.\nQuery options are identical to $each's $query prop (entity, where, order, limit, include, dataset, subscribe).\n$queries and $localState share the same $local namespace — avoid duplicate names across both.\n$setLocal will warn and no-op on $queries entries (they are read-only).\nUse with $count + $gt for conditional visibility:\n{ \"condition\": { \"$gt\": [{ \"$count\": { \"items\": { \"$local\": \"signalTypes\" } } }, 0] } }\nExample:\n{\n  \"$queries\": { \"signalTypes\": { \"entity\": \"SignalType\", \"subscribe\": true } },\n  \"type\": \"Column\",\n  \"children\": [\n    {\n      \"type\": \"$each\",\n      \"props\": { \"items\": { \"$local\": \"signalTypes\" }, \"as\": \"sig\" },\n      \"children\": [...]\n    }\n  ]\n}\n\nBoolean toggle pattern (show/hide comments, expand/collapse sections, etc.):\n{\n  \"$localState\": { \"showComments\": { \"type\": \"boolean\", \"initial\": false } },\n  \"children\": [\n    {\n      \"type\": \"we-button\",\n      \"props\": {\n        \"variant\": \"ghost\",\n        \"onClick\": { \"$toggleLocal\": \"showComments\" }\n      },\n      \"children\": [{ \"type\": \"we-icon\", \"props\": { \"name\": \"chat-circle\" } }]\n    },\n    {\n      \"type\": \"$if\",\n      \"props\": {\n        \"condition\": { \"$local\": \"showComments\" },\n        \"then\": { \"type\": \"Column\", \"children\": [{ \"type\": \"we-text\", \"children\": [\"Comments visible\"] }] }\n      }\n    }\n  ]\n}\n\nForm validation (extends $localState):\nDeclare validation rules on fields:\n\"$localState\": {\n  \"email\": {\n    \"type\": \"string\",\n    \"initial\": \"\",\n    \"validate\": [\n      { \"rule\": \"required\", \"message\": \"Email is required\" },\n      { \"rule\": \"pattern\", \"value\": \"^[^@]+@[^@]+$\", \"message\": \"Invalid email\" }\n    ]\n  }\n}\n\nBuilt-in rules: required, minLength (value: N), maxLength (value: N), min (value: N), max (value: N), pattern (value: regex string), match (field: otherFieldName). All accept optional \"message\" override.\n\nRead tokens:\n{ \"$error\": \"fieldName\" } — first validation error message (only shown after field is touched), or \"\".\n{ \"$valid\": \"fieldName\" } — true if all rules pass (regardless of touched state).\n{ \"$touched\": \"fieldName\" } — true after the field has been blurred/touched.\n{ \"$formValid\": \"$scope\" } — true if ALL validated fields in the current $localState scope pass.\n\nAction tokens:\n{ \"$touch\": \"fieldName\" } — marks a single field as touched (use in onBlur).\n{ \"$touch\": \"$all\" } — marks all fields in scope as touched (use before submit guard).\n{ \"$resetLocal\": \"$scope\" } — resets all fields to initial values and clears touched state.\n\nHandler arrays (compose multiple actions on one event):\n{ \"onClick\": [{ \"$touch\": \"$all\" }, { \"$if\": { \"condition\": { \"$formValid\": \"$scope\" }, \"then\": { \"$action\": \"store.submit\", \"onSuccess\": [{ \"$setLocal\": \"modalOpen\", \"value\": false }] } } }] }\nArray entries execute sequentially. Non-function entries (e.g. $if with false condition) are skipped.\nPrefer onSuccess over a bare $setLocal before the $action — the bare form closes the modal immediately (losing the loading spinner); onSuccess waits for the Promise to resolve.\n\nTypical form pattern:\n{\n  \"$localState\": { \"name\": { \"type\": \"string\", \"initial\": \"\", \"validate\": [{ \"rule\": \"required\" }] } },\n  \"children\": [\n    {\n      \"type\": \"we-form-field\",\n      \"props\": { \"label\": \"Name\", \"error\": { \"$error\": \"name\" } },\n      \"children\": [{\n        \"type\": \"we-input\",\n        \"props\": {\n          \"value\": { \"$local\": \"name\" },\n          \"onInput\": { \"$setLocal\": \"name\", \"from\": \"$event.detail\" },\n          \"onBlur\": { \"$touch\": \"name\" }\n        }\n      }]\n    },\n    {\n      \"type\": \"we-button\",\n      \"props\": {\n        \"disabled\": { \"$not\": { \"$formValid\": \"$scope\" } },\n        \"onClick\": [\n          { \"$touch\": \"$all\" },\n          { \"$if\": { \"condition\": { \"$formValid\": \"$scope\" }, \"then\": { \"$action\": \"store.save\", \"args\": [{ \"$local\": \"name\" }], \"onSuccess\": [{ \"$setLocal\": \"submitDone\", \"value\": true }] } } }\n        ]\n      },\n      \"children\": [\"Submit\"]\n    }\n  ]\n}\n\n## Block-level Dynamic Structures\n\nBlock-level structures use \"type\" starting with \"$\" for dynamic rendering of schema nodes.\n\nEach loop:\n{ \"type\": \"$each\", \"props\": { \"items\": { \"$store\": \"storeName.arrayProperty\" }, \"as\": \"itemName\" }, \"children\": [ ... ] }\nRenders children once for each item. The \"as\" name becomes a context key. Defaults to \"item\" — omit \"as\" unless you need a different name.\n\nConditional rendering:\n{ \"type\": \"$if\", \"props\": { \"condition\": ..., \"then\": { ... }, \"else\": { ... } } }\nRenders \"then\" node if condition is truthy, else renders \"else\" node.\nSupports enterTransition / exitTransition for CSS animations when the node mounts/unmounts.\nTransitionConfig = TransitionEffect | TransitionEffect[]\nTransitionEffect = { type: 'fade'|'slide'|'scale'|'pulse', duration?: ms, easing?: string, delay?: ms, direction?: 'left'|'right'|'up'|'down', distance?: string }\nfade controls opacity only; slide/scale control transform only. pulse is a persistent looping animation (not a one-shot transition) — starts once entered, stops on exit; direction/distance don't apply (default duration 1200ms, easing 'ease-in-out'). Compose fade/slide/scale together in an array; pulse is typically used alone.\nExample: enterTransition: [{ type: 'fade', duration: 300 }, { type: 'slide', direction: 'up', distance: '40px', duration: 400 }]\nExample (pulse): enterTransition: { type: 'pulse', duration: 1500 }\n\nViewport / mount animation (child always in DOM):\n{ \"type\": \"$animate\", \"props\": { \"scrollReveal\"?: true | number, \"scrollLeave\"?: true | number, \"scrollPast\"?: string, \"enterTransition\"?: TransitionConfig, \"exitTransition\"?: TransitionConfig }, \"children\": [<node>] }\nThe child is always mounted. fade/slide/scale are CSS transitions (opacity/transform); pulse is a real CSS @keyframes loop — use this for scroll-reveal effects.\nDo NOT use $animate when the child should be absent from the DOM. Use $if for conditional DOM presence.\nscrollReveal: true fires enterTransition when the element enters the viewport.\nscrollReveal: -100 fires 100px before the element would enter (negative = earlier reveal).\nscrollLeave fires exitTransition when the element leaves the viewport.\nscrollPast: \"element-id\" observes a sentinel element (by DOM id) instead of the $animate element itself.\n  enterTransition fires when the sentinel leaves the viewport (user scrolled past it).\n  exitTransition fires when the sentinel returns (user scrolled back up).\n  Use this for sticky headers: place a zero-height sentinel div at the bottom of the non-sticky header section,\n  then wrap the mini-profile in $animate with scrollPast pointing to that sentinel's id.\n  scrollPast is mutually exclusive with scrollReveal/scrollLeave.\nWithout any scroll trigger, the enterTransition runs once on mount.\nOnly one child node is supported.\nExample (scroll-reveal):\n{\n  \"type\": \"$animate\",\n  \"props\": {\n    \"scrollReveal\": -100,\n    \"enterTransition\": [\n      { \"type\": \"fade\", \"duration\": 600, \"easing\": \"ease-in-out\" },\n      { \"type\": \"slide\", \"direction\": \"left\", \"distance\": \"200px\", \"duration\": 1000, \"easing\": \"ease-in-out\" }\n    ]\n  },\n  \"children\": [{ \"type\": \"SomeCard\", \"children\": [] }]\n}\nExample (sticky header mini-profile):\nPlace a sentinel at the bottom of the header, reference it in the sticky nav:\n{ \"type\": \"div\", \"props\": { \"id\": \"header-sentinel\" }, \"styles\": { \"height\": \"0px\", \"pointerEvents\": \"none\" } }\n{\n  \"type\": \"$animate\",\n  \"props\": {\n    \"scrollPast\": \"header-sentinel\",\n    \"enterTransition\": { \"type\": \"fade\", \"duration\": 250 },\n    \"exitTransition\": { \"type\": \"fade\", \"duration\": 200 }\n  },\n  \"children\": [{ \"type\": \"Row\", \"props\": { \"ay\": \"center\", \"gap\": \"300\" }, \"children\": [\n    { \"type\": \"we-avatar\", \"props\": { \"image\": \"$space.avatar\", \"size\": \"sm\" } },\n    { \"type\": \"we-text\", \"props\": { \"fontWeight\": \"600\" }, \"children\": [\"$space.name\"] }\n  ]}]\n}\n\nSingle model item (load one record, render children with it in context):\n{\n  \"type\": \"$single\",\n  \"props\": {\n    \"item\": { \"$query\": { \"entity\": \"ModelName\", \"params\": { ... }, \"subscribe\": true } },\n    \"as\": \"profile\"   // context key for children — default: 'item'\n  },\n  \"children\": [{ \"type\": \"we-text\", \"children\": [\"$profile.username\"] }]\n}\nRenders nothing until a matching record is found. Like $each but for a single result.\nquery options (entity, params, include, dataset, subscribe) work identically to $query.\n\nRoute outlet:\n{ \"type\": \"$routes\" }\nIndicates where nested routes should render within a layout.\n\n---\n\n## Component Registry\n\nMost @we/primitives also accept Design System Props (see next section for details and exceptions).\n\n@we/primitives:\n- we-alert (DesignSystemElement)\n  Props: variant: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' = 'primary', dismissible: boolean = false\n- we-audio (LayoutVisualElement)\n  Props: src: string = '', controls: boolean = false, preload: 'none' | 'metadata' | 'auto' = 'metadata', autoplay: boolean = false, loop: boolean = false, muted: boolean = false\n- we-avatar (LayoutVisualElement)\n  Props: image: string = '', hash: string = '', selected: boolean = false, online: boolean = false, initials: string = '', icon: string = '', size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | '{css-length}' | undefined, clickable: boolean = false\n- we-badge (DesignSystemElement)\n  Props: variant: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' = 'neutral', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-blockquote (DesignSystemElement)\n- we-button (DesignSystemElement)\n  Props: variant: 'primary' | 'secondary' | 'ghost' | 'danger' | 'outline' = 'primary', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md', text?: string | undefined, href?: string | undefined, disabled: boolean = false, loading: boolean = false, gradient: boolean = false, square: boolean = false\n- we-checkbox (DesignSystemElement)\n  Props: checked: boolean = false, disabled: boolean = false, name: string = '', value: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-code (DesignSystemElement)\n  Props: block: boolean = false\n- we-color-picker (DesignSystemElement)\n  Props: value: string = '#000000', disabled: boolean = false, name: string = '', palette: array = [ '#000000', '#434343', '#666666', '#999999', '#b7b7b7', '#cccccc', '#d9d9d9', '#ffffff', '#980000', '#ff0000', '#ff9900', '#ffff00', '#00ff00', '#00ffff', '#4a86e8', '#0000ff', '#9900ff', '#ff00ff', '#e6b8af', '#f4cccc', '#fce5cd', '#fff2cc', '#d9ead3', '#d0e0e3', '#c9daf8', '#cfe2f3', '#d9d2e9', '#ead1dc', ]\n- we-date-picker (DesignSystemElement)\n  Props: value: string = '', placeholder: string = 'Select date', disabled: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-divider (LayoutElement)\n  Props: orientation: 'horizontal' | 'vertical' = 'horizontal', variant: 'solid' | 'dashed' | 'dotted' = 'solid', color?: string | undefined, thickness?: string | undefined\n- we-drawer (OverlayElement)\n  Props: hideclosebutton: boolean = false, close: () => void\n- we-file-upload (DesignSystemElement)\n  Props: accept: string = '', multiple: boolean = false, disabled: boolean = false, name: string = ''\n- we-form-field (DesignSystemElement)\n  Props: label: string = '', description: string = '', error: string = '', required: boolean = false, size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-html (DesignSystemElement) — Renders a raw HTML string safely via DOMPurify sanitization.\n\nUse this instead of `we-text` when content is stored as HTML (e.g. rich-text\neditor output such as Flux messages). The `content` prop accepts any HTML\nfragment; it is sanitized before rendering so XSS payloads are stripped.\n  Props: content: string = ''\n- we-icon (LayoutElement)\n  Props: name: string = '', color: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '{css-length}' = '', weight: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone' = 'regular', gradient: string = ''\n- we-icon-picker (DesignSystemElement)\n  Props: value: string = '', disabled: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md', placeholder: string = 'Pick icon'\n- we-iframe (LayoutVisualElement)\n  Props: src: string = '', title: string = 'Embedded content', allow: string = '', sandbox?: string | undefined\n- we-image (LayoutVisualElement)\n  Props: src: string | File = '', alt: string = '', fit: '' | 'cover' | 'contain' | 'fill' | 'none' | 'scale-down' = '', loading: 'eager' | 'lazy' = 'eager', gradient: string = '', objectPosition: string = ''\n- we-input (DesignSystemElement)\n  Props: value: string = '', max: string = '', min: string = '', maxlength: unknown = Infinity, minlength: number = 0, pattern: string = '', name: string = '', step: string = '', placeholder: string = '', autocomplete: string = '', autofocus: boolean = false, disabled: boolean = false, required: boolean = false, readonly: boolean = false, type: string = 'text', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-link (DesignSystemElement)\n  Props: href: string = '', target: string = '', rel: string = '', download: string = '', disabled: boolean = false\n- we-location-picker (DesignSystemElement)\n  Props: latitude?: number | undefined, longitude?: number | undefined, placeholder: string = 'Set location…', disabled: boolean = false, reverseGeocode: boolean = true\n- we-markdown (DesignSystemElement)\n  Props: content: string = '', markdownGap: string = ''\n- we-menu (DesignSystemElement) — Vertical list container for menu items inside a popover.\nNot a standalone selector — wrap in we-popover for dropdown behavior.\n- we-menu-group (LayoutElement)\n  Props: collapsible: boolean = false, open: boolean = false, title: string = ''\n- we-menu-item (DesignSystemElement) — Single actionable item inside a we-menu.\nSupports selected, active, and danger states.\n  Props: selected: boolean = false, active: boolean = false, variant: 'default' | 'danger' = 'default', label: unknown, value: unknown\n- we-modal (OverlayElement)\n  Props: hideclosebutton: boolean = false, close: () => void\n- we-number (DesignSystemElement) — Displays a number, optionally abbreviated (1 200 → 1.2K, 1 500 000 → 1.5M).\n  Props: value: number = 0, shorten: boolean = false, precision: number = 1, locale: string = 'en', formattedValue: string\n- we-number-input (DesignSystemElement)\n  Props: value: number = 0, min: number = -Infinity, max: unknown = Infinity, step: number = 1, disabled: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-pagination (DesignSystemElement)\n  Props: page: number = 1, total: number = 1, siblings: number = 1, size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-popover (LayoutElement) — Low-level floating panel anchored to a trigger element.\nUse DropdownMenu component for dropdown menus.\n  Props: open: boolean = false, placement: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' = 'bottom', popoverElement: HTMLElement, triggerElement: HTMLElement\n- we-progress-bar (DesignSystemElement)\n  Props: value: number = 0, max: number = 100, variant: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' = 'primary', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-radio (DesignSystemElement)\n  Props: checked: boolean = false, disabled: boolean = false, name: string = '', value: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-scroll-area (DesignSystemElement)\n  Props: maxHeight: string = '', maxWidth: string = ''\n- we-select (DesignSystemElement)\n  Props: options: SelectOption[] = [], value: string = '', placeholder: string = '', disabled: boolean = false, searchable: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-select (DesignSystemElement) — Pick a single value from a list of options. Custom-rendered dropdown.\nUse for form fields, settings, filters. Set searchable=true for type-to-filter.\n  Props: options: SelectOption[] = [], value: string = '', placeholder: string = '', disabled: boolean = false, searchable: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-skeleton (DesignSystemElement)\n  Props: width: string = '100%', height: string = '20px', animation: 'pulse' | 'wave' = 'pulse'\n- we-slider (DesignSystemElement)\n  Props: value: number = 0, min: number = 0, max: number = 100, step: number = 1, disabled: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md', showValue: boolean = false\n- we-sortable (DesignSystemElement) — Drag-to-reorder container primitive.\n\nUsage: wrap a list of elements that each have a `data-we-id` attribute.\nFires a `we-reorder` CustomEvent<string[]> on drop with the new ordered\narray of IDs.\n  Props: direction: 'vertical' | 'horizontal' = 'vertical', gap: string = ''\n- we-spinner (LayoutElement)\n  Props: size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | (string & {}) = 'md', color: string = ''\n- we-switch (DesignSystemElement)\n  Props: checked: boolean = false, disabled: boolean = false, name: string = '', value: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md', labelOff: string = '', labelOn: string = ''\n- we-tab (DesignSystemElement)\n  Props: key: string = '', selected: boolean = false, label?: string | undefined, selectedProps?: Partial<DesignSystemProps> | undefined\n- we-tabs (DesignSystemElement)\n  Props: selectedKey: string = ''\n- we-tag (DesignSystemElement)\n  Props: variant: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' = 'neutral', dismissible: boolean = false\n- we-text (DesignSystemElement)\n  Props: text?: string | undefined, variant: '' | 'body' | 'label' | 'footnote' | 'subheading' | 'ingress' | 'heading-sm' | 'heading-md' | 'heading-lg' | 'heading-xl' = '', tag: 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'small' | 'b' | 'i' | 'label' | 'div' = 'span', inline: boolean = false, uppercase: boolean = false, italic: boolean = false, truncate: boolean = false, gradient: string = ''\n- we-textarea (DesignSystemElement)\n  Props: value: string = '', name: string = '', placeholder: string = '', rows: number = 3, maxlength: unknown = Infinity, minlength: number = 0, disabled: boolean = false, required: boolean = false, readonly: boolean = false, resize: 'none' | 'vertical' | 'horizontal' | 'both' = 'vertical', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-timestamp (DesignSystemElement) — Displays a formatted or relative timestamp that self-updates each minute\nwhen `relative` is enabled.\n  Props: value: string = '', relative: boolean = false, locale: string = 'en', dateStyle: Intl.DateTimeFormatOptions['dateStyle'] | null = null, timeStyle: Intl.DateTimeFormatOptions['timeStyle'] | null = null, weekday: Intl.DateTimeFormatOptions['weekday'] | null = null, year: Intl.DateTimeFormatOptions['year'] | null = null, month: Intl.DateTimeFormatOptions['month'] | null = null, day: Intl.DateTimeFormatOptions['day'] | null = null, hour: Intl.DateTimeFormatOptions['hour'] | null = null, minute: Intl.DateTimeFormatOptions['minute'] | null = null, second: Intl.DateTimeFormatOptions['second'] | null = null, timeZone: string | null = null, hourCycle: Intl.DateTimeFormatOptions['hourCycle'] | null = null, formattedTime: string\n- we-tooltip (LayoutElement)\n  Props: open: boolean = false, title: string = '', placement: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' = 'top', tooltipEl: HTMLElement, triggerEl: HTMLElement, arrowEl: HTMLElement\n- we-video (LayoutVisualElement)\n  Props: src: string = '', poster?: string | undefined, controls: boolean = false, preload: 'none' | 'metadata' | 'auto' = 'metadata', autoplay: boolean = false, loop: boolean = false, muted: boolean = false\n\n@we/components:\n- AudioDisplay\n  Props: title: string | undefined, artist: string | undefined, audioUrl: string | undefined, duration: number | undefined, albumArt: string | undefined\n- AudioInput\n  Props: title: string | undefined, artist: string | undefined, audioUrl: string | FileData | undefined, duration: number | undefined, albumArt: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- BlockComposer (DesignSystemElement)\n  Props: editorState?: any, perspective?: PerspectiveProxy | null, onSave?: ((json: SerializedBlockNode) => void), onReady?: ((api: { save: () => void; }) => void)\n- BlockPlaceholder\n  Props: icon: string, label: string, hint?: string, accept?: string, onFileDrop?: ((file: File) => void), onClick?: (() => void)\n- BlockRenderer (DesignSystemElement)\n  Props: editorState?: any, perspective?: PerspectiveProxy | null, rootClass?: string\n- BlockToolbar\n  Props: placement?: BlockToolbarPlacement, children: JSX.Element, stopPropagation?: boolean\n- CalloutDisplay\n  Props: text: string | undefined, variant: string | undefined, icon: string | undefined\n- CalloutInput\n  Props: text: string | undefined, variant: string | undefined, icon: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- CodeDisplay\n  Props: code: string | undefined, language: string | undefined, title: string | undefined\n- CodeInput\n  Props: code: string | undefined, language: string | undefined, title: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- CollectionDisplay\n  Props: layout?: string, columnCount?: number, gap?: string, childEditorState?: any\n- CollectionInput\n  Props: nodeKey: string, layout?: string, columnCount?: number, gap?: string, childEditorState?: any, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- DividerDisplay\n  Props: style: \"solid\" | \"dashed\" | \"dotted\" | undefined\n- DividerInput\n  Props: style: DividerVariant | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- EmbedDisplay\n  Props: url: string | undefined, target: string | undefined, targetType: string | undefined, displayMode: string | undefined\n- EmbedInput\n  Props: url: string | undefined, target: string | undefined, targetType: string | undefined, displayMode: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- EventDisplay\n  Props: title: string | undefined, description: string | undefined, startDate: string | undefined, endDate: string | undefined, location: string | undefined, allDay: boolean | undefined\n- EventInput\n  Props: title: string | undefined, description: string | undefined, startDate: string | undefined, endDate: string | undefined, location: string | undefined, allDay: boolean | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- FileDisplay\n  Props: title: string | undefined, name: string | undefined, url: string | undefined, mimeType: string | undefined, size: number | undefined\n- FileInput\n  Props: title: string | undefined, name: string | undefined, url: string | FileData | undefined, mimeType: string | undefined, size: number | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- ImageDisplay\n  Props: src: string | undefined, altText: string | undefined, width: number | undefined, height: number | undefined\n- ImageInput\n  Props: src: string | FileData | undefined, altText: string | undefined, width: number | undefined, height: number | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- LinkDisplay\n  Props: url: string | undefined, title: string | undefined, description: string | undefined, thumbnail: string | undefined\n- LinkInput\n  Props: url: string | undefined, title: string | undefined, description: string | undefined, thumbnail: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- LocationDisplay\n  Props: name: string | undefined, latitude: number | undefined, longitude: number | undefined, address: string | undefined\n- LocationInput\n  Props: name: string | undefined, latitude: number | undefined, longitude: number | undefined, address: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- TagDisplay\n  Props: name: string | undefined, color: string | undefined\n- TagInput\n  Props: name: string | undefined, color: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- TaskDisplay\n  Props: title: string | undefined, description: string | undefined, status: string | undefined, priority: string | undefined, dueDate: string | undefined, assignee: string | undefined\n- TaskInput\n  Props: title: string | undefined, description: string | undefined, status: string | undefined, priority: string | undefined, dueDate: string | undefined, assignee: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- VideoDisplay\n  Props: url: string | undefined, title: string | undefined, thumbnail: string | undefined, provider: string | undefined, width: number | undefined\n- VideoInput\n  Props: url: string | undefined, title: string | undefined, thumbnail: string | undefined, provider: string | undefined, width: number | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- Accordion\n  Props: children?: JSX.Element, renderContent?: ((item: AccordionItem, index: number) => JSX.Element), onChange?: ((openItems: string[]) => void), items?: AccordionItem[], multiple?: boolean, styles?: Record<string, string | number>\n- AudioVisualiser\n  Props: src: string | undefined, bars?: number, height?: number, color?: string, activeColor?: string\n- AvatarStack\n  Props: avatars: AvatarInfo[], max?: number, size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxs\" | \"xxl\", overlap?: number, ring?: string, styles?: Record<string, string | number>\n- Breadcrumbs\n  Props: onNavigate?: ((item: BreadcrumbItem, index: number) => void), items?: BreadcrumbItem[], separator?: string, styles?: Record<string, string | number>\n- Calendar\n  Props: onSelect?: ((date: string) => void), value?: string, events?: CalendarEvent[], styles?: Record<string, string | number>\n- Card (DesignSystemElement)\n- CircleButton\n  Props: label: string, icon?: string, image?: string, onClick?: (() => void), class?: string, styles?: Record<string, string | number>\n- CodeEditor\n  Props: code: string, language?: CodeEditorLanguage, readOnly?: boolean, onChange?: ((code: string) => void), onSave?: ((code: string) => void), styles?: Record<string, string | number>\n- CollapsedContent\n  Props: collapsed: boolean, onExpandClick?: (() => void), showToggle?: boolean, icon?: string, maxHeight?: string, fadeColor?: string, children?: JSX.Element, class?: string, styles?: Record<string, string | number>\n- Column (DesignSystemElement)\n- Combobox (DesignSystemElement)\n  Props: options: string[] | ComboboxOption[], value?: string, placeholder?: string, size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\", onChange?: ((value: string) => void)\n- DropdownMenu — Flexible dropdown menu for actions, toggles, and grouped items. Use for context menus, settings panels, layer controls, and command palettes.\n  Props: class?: string, styles?: Record<string, string | number>, placement?: Placement, triggerLabel?: string, triggerIcon?: string, items: SolidDropdownMenuEntry[]\n- EditableImage (DesignSystemElement)\n  Props: src?: string, alt?: string, fit?: \"fill\" | \"cover\" | \"contain\" | \"none\" | \"scale-down\", placeholderIcon?: string, onImageChange?: ((file: File) => void), class?: string, aspect?: number, maxSize?: number\n- FlipCard\n  Props: front?: JSX.Element, back?: JSX.Element, width?: string, height?: string, flipOnHover?: boolean, flipDuration?: string, wobbleOnHover?: boolean, wobbleDegree?: number, class?: string, styles?: Record<string, string | number>\n- Grid (DesignSystemElement)\n  Props: template?: string, columns?: number, minChildWidth?: string\n- IconLabelButton\n  Props: icon: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<string>, label: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<string>, selected?: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<boolean | undefined>, iconWeight?: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<IconWeight | undefined>, onClick?: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<(() => void) | undefined>, class?: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<string | undefined>, styles?: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<Record<string, string | number> | undefined>\n- ImageCrop\n  Props: src: string, fileName?: string, aspect?: number, maxSize?: number, outputType?: string, quality?: number, onReady?: ((ref: ImageCropRef) => void)\n- ImageLightbox\n  Props: srcs: string[], initialIndex: number, onClose: () => void\n- List\n  Props: children?: JSX.Element, renderItem?: ((item: ListItem, index: number) => JSX.Element), items?: ListItem[], ordered?: boolean, gap?: string, styles?: Record<string, string | number>\n- PostCard\n  Props: creator?: { name: string; avatar: string; }, title: string, text: string, class?: string, styles?: Record<string, string | number>\n- RerenderLog\n  Props: location: string\n- Row (DesignSystemElement)\n- Search (DesignSystemElement)\n  Props: placeholder?: string, value?: string, onSearch?: ((value: string) => void), debounce?: number\n- Select (DesignSystemElement)\n  Props: options: SelectOption[], value?: string, placeholder?: string, searchable?: boolean, label?: string, size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\", onChange?: ((value: string) => void)\n- SignalControl\n  Props: signalType: SignalTypeData, signals?: SignalData[], myDid?: string, onSignal?: ((value: number) => void), disabled?: boolean, preview?: boolean, class?: string, styles?: Record<string, string | number>\n- Stepper\n  Props: onStepClick?: ((index: number) => void), steps?: StepperStep[], activeStep?: number, orientation?: \"horizontal\" | \"vertical\", styles?: Record<string, string | number>\n- Table\n  Props: renderCell?: ((row: Record<string, unknown>, column: TableColumn, index: number) => JSX.Element), columns: TableColumn[], rows: Record<string, unknown>[], striped?: boolean, bordered?: boolean, styles?: Record<string, string | number>\n- Timeline\n  Props: children?: JSX.Element, renderItem?: ((item: TimelineItem, index: number) => JSX.Element), items?: TimelineItem[], styles?: Record<string, string | number>\n- ToastContainer\n  Props: position?: \"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\" | \"top-center\" | \"bottom-center\", styles?: Record<string, string | number>\n\n@we/widgets:\n- CesiumGlobe — 3D globe widget using CesiumJS with a modular layer system.\nLayers are injected via factory functions (planet surface + background).\nRegistered in the app's component registry, which injects `layerFactoryRegistry` — so templates\nplace it as `CesiumGlobe` without supplying that prop themselves.\n  Props: ionAccessToken?: string, planetLayers?: LayerConfig<unknown>[], backgroundLayers?: LayerConfig<unknown>[], layerFactoryRegistry: Record<string, LayerFactory<any>>\n- CollapsibleSidebar\n  Props: header?: JSX.Element, footer?: JSX.Element, items: CollapsibleSidebarItem[], footerItems?: CollapsibleSidebarItem[], side?: \"left\" | \"right\", position?: \"static\" | \"absolute\" | \"fixed\", zIndex?: number, collapsedWidth?: string, expandedWidth?: string, defaultExpanded?: boolean, expandOnHover?: boolean, transitionDuration?: number, bg?: string, border?: string, padding?: string, gap?: string, centerItems?: boolean, itemColor?: string, itemColorHover?: string, itemColorActive?: string, itemBg?: string, itemBgHover?: string, itemBgActive?: string, itemPadding?: string, itemGap?: string, badgeBg?: string, badgeColor?: string, iconSize?: IconSize, onItemClick?: ((item: CollapsibleSidebarItem) => void), onExpandedChange?: ((expanded: boolean) => void)\n- GraphWidget — 2D force-directed graph visualization using D3-force layout and Canvas rendering.\nDisplays typed nodes (user, space, post) and edges (follows, member-of, etc.)\nwith configurable styling, layout forces, and interaction handlers.\n  Props: data: GraphData, width?: string | number, height?: string | number, nodeStyle?: NodeStyleConfig, edgeStyle?: EdgeStyleConfig, layout?: LayoutConfig, interactions?: InteractionConfig\n- SpaceSidebarWidget\n  Props: name: string, description?: string, class?: string, style?: Record<string, string | number>\n\n---\n\n## Design System Props\n\nMost @we/primitives inherit **all** layers below. Props use design token values — not raw CSS.\n\n### Token Value Reference\n\n| Token Type | Valid Values |\n|---|---|\n| SpaceValue | \"0\", \"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\", \"1000\" (or CSS length e.g. \"16px\") |\n| ColorValue | \"{hue}-{shade}\" where hue = neutral, primary, success, warning, danger and shade = 0, 25, 50, 75, 100, 200–900, 1000. Also \"white\", \"black\". (or CSS color) |\n| RadiusValue | \"0\", \"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\", \"pill\", \"full\" (or CSS length) |\n| ShadowValue | \"sm\", \"md\", \"lg\", \"xl\" |\n| FontSizeValue | \"base\", \"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\", \"1000\" (or CSS length) |\n| FontFamilyValue | \"base\" (or CSS font-family) |\n| LineHeightValue | \"none\", \"tight\", \"snug\", \"normal\", \"relaxed\", \"loose\" (or CSS value) |\n| LetterSpacingValue | \"tighter\", \"tight\", \"normal\", \"wide\", \"wider\", \"widest\" (or CSS value) |\n| FontWeightValue | Named tokens: \"regular\" (400), \"medium\" (500), \"semibold\" (600), \"bold\" (700). Numeric: \"100\"–\"900\". CSS pass-through: \"light\", \"normal\", \"bolder\". |\n\n**Layout-only primitives** — these accept only Layout props (not Visual, Flex, Typography, or State):\nwe-divider, we-icon, we-menu-group, we-popover, we-spinner, we-tooltip\n\n### Layout\n\n| Prop | Type | Description |\n|------|------|-------------|\n| width | string | Element width |\n| height | string | Element height |\n| minWidth | string | Minimum width |\n| minHeight | string | Minimum height |\n| maxWidth | string | Maximum width |\n| maxHeight | string | Maximum height |\n| position | \"relative\" \\| \"absolute\" \\| \"fixed\" \\| \"sticky\" | CSS position |\n| top | string | Top offset |\n| right | string | Right offset |\n| bottom | string | Bottom offset |\n| left | string | Left offset |\n| zIndex | number | Stack order |\n| display | \"flex\" \\| \"block\" \\| \"inline\" \\| \"inline-block\" \\| \"grid\" \\| \"inline-flex\" | Display mode |\n| flex | string | Flex shorthand (e.g. \"1\", \"0 0 auto\", \"none\") — controls grow/shrink/basis |\n| alignSelf | string | Override parent cross-axis alignment for this child |\n| overflow | \"hidden\" \\| \"auto\" | Overflow behavior |\n| m | SpaceValue | Margin (all sides) |\n| mx | SpaceValue | Margin left + right |\n| my | SpaceValue | Margin top + bottom |\n| mt | SpaceValue | Margin top |\n| mr | SpaceValue | Margin right |\n| mb | SpaceValue | Margin bottom |\n| ml | SpaceValue | Margin left |\n\n### Visual\n\n| Prop | Type | Description |\n|------|------|-------------|\n| bg | ColorValue | Background color (token) |\n| bgImage | string | Background image URL — sets background-image, defaults background-size to cover, background-position to center, background-repeat to no-repeat |\n| bgFit | \"cover\" \\| \"contain\" | Background image sizing (default: \"cover\") — only meaningful with bgImage |\n| bgPosition | string | Background image position (default: \"center\", e.g. \"top\", \"50% 20%\") — only meaningful with bgImage |\n| bgImageOpacity | number | Fades bgImage only (0–1), independent of the element's own content/opacity — only meaningful with bgImage |\n| bgImageTint | ColorValue | Color bgImage fades toward as bgImageOpacity decreases (default: the element's own `bg`, or neutral-0) — only meaningful with bgImageOpacity |\n| color | ColorValue | Text/foreground color (token) |\n| opacity | number | Opacity (0–1) |\n| border | string | Border shorthand (e.g. \"1px solid neutral-200\" — color tokens are resolved) |\n| borderColor | ColorValue | Border color (token, e.g. \"neutral-200\", \"primary-500\") |\n| borderTop | string | Top border shorthand (color tokens resolved) |\n| borderRight | string | Right border shorthand (color tokens resolved) |\n| borderBottom | string | Bottom border shorthand (color tokens resolved) |\n| borderLeft | string | Left border shorthand (color tokens resolved) |\n| borderWidth | string | Border width (raw CSS, e.g. \"1px\", \"2px 0\") |\n| shadow | \"sm\" \\| \"md\" \\| \"lg\" \\| \"xl\" | Shadow token |\n| cursor | \"pointer\" \\| \"default\" \\| \"text\" \\| \"not-allowed\" | Cursor style |\n| pointerEvents | \"none\" \\| \"auto\" | Pointer events |\n| transform | string | CSS transform |\n| transition | string | CSS transition |\n| r | RadiusValue | Border radius (all corners) |\n| rt | RadiusValue | Border radius top |\n| rb | RadiusValue | Border radius bottom |\n| rl | RadiusValue | Border radius left |\n| rr | RadiusValue | Border radius right |\n| rtl | RadiusValue | Border radius top-left |\n| rtr | RadiusValue | Border radius top-right |\n| rbr | RadiusValue | Border radius bottom-right |\n| rbl | RadiusValue | Border radius bottom-left |\n\n### Flex (Container)\n\n| Prop | Type | Description |\n|------|------|-------------|\n| direction | \"row\" \\| \"row-reverse\" \\| \"column\" \\| \"column-reverse\" | Flex direction |\n| ax | \"start\" \\| \"center\" \\| \"end\" \\| \"between\" \\| \"around\" \\| \"even\" \\| \"stretch\" | Main-axis alignment |\n| ay | \"start\" \\| \"center\" \\| \"end\" \\| \"between\" \\| \"around\" \\| \"even\" \\| \"stretch\" | Cross-axis alignment |\n| wrap | boolean | Enable flex wrap |\n| gap | SpaceValue | Gap between children (token) |\n| p | SpaceValue | Padding (all sides) |\n| px | SpaceValue | Padding left + right |\n| py | SpaceValue | Padding top + bottom |\n| pt | SpaceValue | Padding top |\n| pr | SpaceValue | Padding right |\n| pb | SpaceValue | Padding bottom |\n| pl | SpaceValue | Padding left |\n\n### Typography\n\n| Prop | Type | Description |\n|------|------|-------------|\n| textAlign | \"left\" \\| \"center\" \\| \"right\" \\| \"justify\" | Text alignment |\n| fontFamily | \"base\" \\| {css-font-family} | Font family token |\n| fontWeight | \"regular\" \\| \"medium\" \\| \"semibold\" \\| \"bold\" (named tokens) or \"100\"–\"900\" (numeric) or \"light\" \\| \"normal\" \\| \"bolder\" (CSS pass-through) | Font weight |\n| fontSize | \"base\" \\| \"100\"–\"1000\" \\| {css-length} | Font size token |\n| lineHeight | \"none\" \\| \"tight\" \\| \"snug\" \\| \"normal\" \\| \"relaxed\" \\| \"loose\" | Line height token |\n| letterSpacing | \"tighter\" \\| \"tight\" \\| \"normal\" \\| \"wide\" \\| \"wider\" \\| \"widest\" | Letter spacing token |\n| textDecoration | \"underline\" \\| \"line-through\" \\| \"overline\" \\| \"none\" | Text decoration |\n| textTransform | \"uppercase\" \\| \"lowercase\" \\| \"capitalize\" \\| \"none\" | Text transform |\n\n**Typography defaults:** fontSize and fontWeight have **no built-in defaults** — omitting them inherits from parent elements (browser default is ~16px / normal weight). Do not set fontSize or fontWeight unless you need a non-default value. For example, `fontSize: '300'` (16px) and `fontWeight: '500'` (normal) are the inherited defaults — omit them.\n\n`we-text` variants (set via the `variant` prop) bundle typography presets. Always pair with a semantic `tag` prop for correct HTML structure:\nbody (300, tag: p/span), label (200 + medium, tag: span), footnote (100, tag: span), subheading (400 + medium, tag: h5/p), ingress (400 + lineHeight 1.6, tag: p), heading-sm (500 + bold, tag: h4), heading-md (600 + bold, tag: h3), heading-lg (700 + bold, tag: h2), heading-xl (800 + bold, tag: h1).\nVariants set size and weight only — color is always inherited or set explicitly. For muted footnote text add `color=\"neutral-400\"` explicitly.\n\n### State\n\n| Prop | Type | Description |\n|------|------|-------------|\n| hoverProps | Partial\\<DesignSystemProps\\> | Styles on :hover |\n| activeProps | Partial\\<DesignSystemProps\\> | Styles on :active |\n| focusProps | Partial\\<DesignSystemProps\\> | Styles on :focus |\n| disabledProps | Partial\\<DesignSystemProps\\> | Styles when disabled |\n\n### Additional\n\n| Prop | Type | Description |\n|------|------|-------------|\n| styles | Record\\<string, string \\| number\\> | Inline CSS applied directly to the component's own element (raw CSS values allowed). For Column, Row, Grid — use this when you need CSS the DS props don't cover. **Do not confuse with node-level styles** (see Schema Structure) which applies to a wrapper div, not the component. |\n| onClick | ActionToken | Event handler (see dynamic logic) |\n\n---\n\n## Design Tokens\n\nUse design tokens for spacing, color, radius, etc. Do not use raw CSS values unless using the styles prop.\n\nanimation.transition: '0', '100', '200', '300', '400', '500'\n\navatarSize: 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'\n\nborder.color: 'base', 'strong'\n\ncolor.base: 'white', 'black'\n\ncolor.config: 'multiplier', 'subtractor', 'saturation', 'neutralSaturation'\n\ncolor.hues: 'neutral', 'primary', 'success', 'warning', 'danger'\n\ncolor.lightness: '0', '25', '50', '75', '100', '200', '300', '400', '500', '600', '700', '800', '900', '1000'\n\ncomponent.scrollbar: 'width', 'backgroundImage', 'background', 'cornerBackground', 'thumbBoxShadow', 'thumbBorderRadius', 'thumbBackground'\n\ncomponentHeight: 'xs', 'sm', 'md', 'lg', 'xl'\n\neffect.depth: '100', '200', '300', '400', '500', 'none'\n\nfont.family: 'base', 'mozilla', 'boldonse'\n\nfont.letterSpacing: 'tighter', 'tight', 'normal', 'wide', 'wider', 'widest'\n\nfont.lineHeight: 'none', 'tight', 'snug', 'normal', 'relaxed', 'loose'\n\nfont.size: '100', '200', '300', '400', '500', '600', '700', '800', '900', '1000', 'base'\n\nfont.weight: '100', '200', '300', '400', '500', '600', '700', '800', '900', 'regular', 'medium', 'semibold', 'bold'\n\nlayout: 'xs', 'sm', 'md', 'lg'\n\nradius: '0', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'pill', 'full'\n\nshadow: 'sm', 'md', 'lg', 'xl'\n\nsize: 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'\n\nspace: '0', '100', '200', '300', '400', '500', '600', '700', '800', '900', '1000'\n\nzIndex: 'dropdown', 'sticky', 'modal', 'popover', 'toast', 'tooltip'\n\n---\n\n## Block & Entity Models\n\nAvailable data models for $query and store data:\n\nAgentSettings extends Ad4mModel:\n  Fields:\n  - currentTemplateId: string = 'default' [we://current_template]\n  - defaultTemplateId: string = 'default' [we://default_template]\n  - currentThemeId: string = 'default' [we://current_theme]\n  - defaultThemeId: string = 'default' [we://default_theme]\n  - claudeApiKey: string [we://claude_api_key]\n  - perspectiveOrder: string [we://perspective_order]\n  - globalSpaceJoined: boolean = false [we://global_space_joined]\n  - globalSpaceUrl: string [we://global_space_url]\n  - useSpaceTemplate: boolean = true [we://use_space_template]\n  Relations:\n  - installedTemplates: HasMany → Template [we://installed_template]\n  - installedThemes: HasMany → Theme [we://installed_theme]\n  - spaceTemplatePreferences: HasMany → SpaceTemplatePreference [we://space_template_preference]\n\nAudioBlock extends WeNode:\n  Fields:\n  - title: string (required) [we://title]\n  - artist: string [we://artist]\n  - audioUrl: string (required) [we://audio_url]\n  - duration: number [we://duration]\n  - albumArt: string [we://album_art]\n  - version: number [we://version]\n\nCalloutBlock extends WeNode:\n  Fields:\n  - text: string [we://text]\n  - variant: string = info [we://variant]\n  - icon: string [we://icon]\n  - version: number [we://version]\n\nChatMessage extends WeNode:\n  Fields:\n  - role: string [we://role]\n  - content: string [we://content]\n\nChatSession extends WeNode:\n  Fields:\n  - name: string [we://name]\n  - templateId: string [we://template_id]\n  Relations:\n  - messages: HasMany → ChatMessage [we://chat_message]\n\nCodeBlock extends WeNode:\n  Fields:\n  - code: string (required) [we://code]\n  - language: string [we://language]\n  - title: string [we://title]\n  - version: number [we://version]\n\nCollectionBlock extends WeNode:\n  Fields:\n  - editorState: string = null [we://editor_state]\n  - type: string [we://type]\n  - display: string [we://display]\n  - direction: string [we://direction]\n  - format: string [we://format]\n  - indent: number [we://indent]\n  - columns: number [we://columns]\n  - gap: string [we://gap]\n  - version: number [we://version]\n  - textContent: string [we://text_content]\n  Relations:\n  - children: HasMany [we://children]\n\nDividerBlock extends WeNode:\n  Fields:\n  - style: string = solid [we://style]\n  - version: number [we://version]\n\nEmbedBlock extends WeNode:\n  Fields:\n  - url: string [we://url]\n  - target: string [we://target]\n  - targetType: string [we://target_type]\n  - displayMode: string = card [we://display_mode]\n  - version: number [we://version]\n\nEventBlock extends WeNode:\n  Fields:\n  - title: string (required) [we://title]\n  - description: string [we://description]\n  - startDate: string (required) [we://start_date]\n  - endDate: string [we://end_date]\n  - location: string [we://location]\n  - allDay: boolean = false [we://all_day]\n  - version: number [we://version]\n\nFileBlock extends WeNode:\n  Fields:\n  - title: string [we://title]\n  - name: string (required) [we://name]\n  - url: string (required) [we://url]\n  - mimeType: string [we://mime_type]\n  - size: number [we://size]\n  - version: number [we://version]\n\nImageBlock extends WeNode:\n  Fields:\n  - src: string (required) [we://src]\n  - altText: string [we://altText]\n  - width: number [we://width]\n  - height: number [we://height]\n  - version: number [we://version]\n\nLinkBlock extends WeNode:\n  Fields:\n  - url: string (required) [we://url]\n  - title: string [we://title]\n  - description: string [we://description]\n  - thumbnail: string [we://thumbnail]\n  - version: number [we://version]\n\nLocationBlock extends WeNode:\n  Fields:\n  - name: string [we://name]\n  - latitude: number (required) [we://latitude]\n  - longitude: number (required) [we://longitude]\n  - address: string [we://address]\n  - city: string [we://city]\n  - countryCode: string [we://country_code]\n  - country: string [we://country]\n  - version: number [we://version]\n\nSignal extends Ad4mModel:\n  Fields:\n  - signalTypeId: string [we://signal_type_id]\n  - value: number [we://value]\n\nSignalType extends WeNode:\n  Fields:\n  - name: string [we://name]\n  - slug: string [we://slug]\n  - description: string [we://description]\n  - icon: string [we://icon]\n  - iconSecondary: string [we://icon_secondary]\n  - step: number = 1 [we://step]\n  - rangeMin: number [we://range_min]\n  - rangeMax: number = 1 [we://range_max]\n  - mode: SignalMode = 'toggle' [we://mode]\n  - aggregate: SignalAggregate = 'count' [we://aggregate]\n  - semantic: SignalSemantic = 'custom' [we://semantic]\n  - allowChange: boolean = true [we://allow_change]\n  - valueType: string = 'numeric' [we://signal_value_type]\n  - schemaVersion: number = 1 [we://schema_version]\n\nSpace extends WeNode:\n  Fields:\n  - uuid: string [we://uuid]\n  - url: string [we://url]\n  - name: string (required) [we://name]\n  - description: string (required) [we://description]\n  - access: string = 'personal' [we://access]\n  - discovery: string = 'hidden' [we://discovery]\n  - avatar: string [we://image]\n  - coverImage: string [we://thumbnail]\n  - defaultTemplateId: string [we://default_template_id]\n  - defaultThemeId: string [we://default_theme_id]\n  - enabledModules: string [we://enabled_modules]\n  Relations:\n  - location: HasOne [we://location]\n\nSpaceTemplatePreference extends WeNode:\n  Fields:\n  - spaceUrl: string [we://space_url]\n  - preference: string [we://preference]\n\nTagBlock extends WeNode:\n  Fields:\n  - name: string (required) [we://name]\n  - color: string [we://color]\n  - version: number [we://version]\n\nTaskBlock extends WeNode:\n  Fields:\n  - title: string (required) [we://title]\n  - description: string [we://description]\n  - status: string = todo [we://status]\n  - priority: string = medium [we://priority]\n  - dueDate: string [we://due_date]\n  - assignee: string [we://assignee]\n  - version: number [we://version]\n\nTemplate extends WeNode:\n  Fields:\n  - name: string [we://name]\n  - description: string [we://description]\n  - icon: string [we://icon]\n  - origin: string [we://origin]\n  - version: number = 1 [we://version]\n  - slug: string [we://slug]\n  - schema: string = null [we://template_schema]\n  - themeId: string [we://theme_id]\n  Relations:\n  - screenshots: HasMany → ImageBlock [we://screenshot]\n\nTextBlock extends WeNode:\n  Fields:\n  - type: string [we://type]\n  - direction: string [we://direction]\n  - format: string [we://format]\n  - indent: number [we://indent]\n  - textFormat: number [we://textFormat]\n  - textStyle: string [we://textStyle]\n  - listType: string [we://listType]\n  - start: number [we://start]\n  - tag: string [we://tag]\n  - text: string [we://text]\n  - version: number [we://version]\n\nTheme extends WeNode:\n  Fields:\n  - name: string [we://name]\n  - description: string [we://description]\n  - icon: string [we://icon]\n  - origin: string [we://origin]\n  - slug: string [we://slug]\n  - version: number = 1 [we://version]\n  - css: string = null [we://stylesheet]\n  - overrides: string = null [we://token_overrides]\n  Relations:\n  - screenshots: HasMany → ImageBlock [we://screenshot]\n\nVideoBlock extends WeNode:\n  Fields:\n  - title: string [we://title]\n  - url: string (required) [we://url]\n  - duration: number [we://duration]\n  - thumbnail: string [we://thumbnail]\n  - provider: string [we://provider]\n  - version: number [we://version]\n\nWeNode extends Ad4mModel:\n  Relations:\n  - comments: HasMany [we://comment]\n  - signals: HasMany → Signal [we://signal]\n\n---\n\n## Stores\n\nStores provide state (readable values) and actions (methods) for dynamic logic in schemas.\nAccess state with $store and call actions with $action.\nFor ephemeral/form state, use $localState/$local/$setLocal instead of stores (see Dynamic Logic).\n\nAdamStore:\n- State:\n  - adamClient: Ad4mClient | undefined\n  - me: Agent | undefined\n  - allPerspectives: array of PerspectiveProxy objects (all AD4M perspectives)\n  - currentPerspective: PerspectiveProxy | null (the perspective currently being viewed)\n  - currentPerspectiveModels: ModelManifestEntry[] (non-WE SHACL models from the current perspective; injected as externalModels into AI messages)\n  - isWeSpace: boolean — true once the current perspective is confirmed to have WE's Space SDNA installed (false for a joined-but-foreign perspective, e.g. one synced in from Flux)\n  - personalSpaces: array of Space objects (local/personal spaces; all Space fields)\n  - sharedSpaces: array of Space objects (shared/neighbourhood spaces; all Space fields)\n  - bootState: string\n  - passwordError: string | undefined\n  - loginLoading: boolean\n  - creatingSpace: boolean (true while a new space is being created)\n  - agents: AgentProfileSummary[] — cache of all fetched agent profiles (did, firstName, lastName, handle, bio, avatar, coverImage, location)\n  - ownAgent: AgentProfileSummary | undefined — reactive accessor for the current user's own profile (derived from agents cache)\n  - orderedSidebarItems: array of sidebar items in user-defined order (uuid, name, avatar, spaceId) — personal + shared spaces merged\n- Actions:\n  - navigate(to: string, options?): navigates to a route\n  - addNewSpace(space: Space): adds a new space\n  - createSpace(name: string, description: string, shared: boolean, imageFile?: File): creates a new space with full setup\n  - initializeAsWeSpace(name: string, description: string, avatarValue?: File | string | null): installs WE's Space SDNA into the current, already-joined, foreign-native perspective (e.g. one synced in from Flux) and creates a Space entity in place — access is always 'shared' since the perspective is already a published neighbourhood\n  - switchPerspective(uuid: string): switches to a perspective by UUID, registers its SHACL models as dynamic model classes, and populates currentPerspectiveModels\n  - removePerspective(uuid: string): removes a perspective by UUID\n  - reorderPerspectives(newOrder: string[]): reorders the sidebar items by UUID array\n  - login(password: string): logs in the agent with password\n  - logout(): locks the agent and returns to login screen\n  - fetchAgent(did: string): fetches and caches an agent's profile from their public AD4M perspective\n  - updateOwnProfile(fields: { firstName?, lastName?, handle?, bio? }): updates own profile text fields and publishes to public perspective\n  - updateProfileImage(field: \"avatar\" | \"coverImage\", imageFile: File): uploads image to FILE_STORAGE_LANGUAGE and publishes expression URL to public perspective\n  - updateAgentLocation(update: { latitude?, longitude?, city?, country?, countryCode? }): merges location update into cache and publishes to public perspective\n  - cleanupSpaceSdna(uuid?: string): one-time remediation for a perspective that accumulated duplicate SDNA installs (e.g. from before joinSpace checked for existing SDNA before installing) — removes the redundant duplicate link copies. Defaults to the current perspective. Returns a display-ready summary string naming how many links were removed and the DIDs that authored them (your own DID annotated with \"(you)\"), or an empty string if nothing needed cleaning up\n\nRouteStore:\n- State:\n  - currentPath: string (the current route path)\n  - segments: string[] (currentPath split by \"/\", e.g. [\"/foo/bar\"] → [\"foo\", \"bar\"])\n- Actions:\n  - navigate(to: string, options?): navigates to a route\n\nThemeStore:\n- State:\n  - builtInThemes: array of ThemeData objects — built-in registry themes (origin: \"built-in\", always available)\n  - installedThemes: array of ThemeData objects — user-installed themes from root perspective (origin: \"custom\" | \"marketplace\")\n  - spaceThemes: array of ThemeData objects — themes stored in the current space perspective (origin: \"custom\")\n  - allThemes: array of ThemeData objects — union of builtInThemes + visible installedThemes + spaceThemes (hidden themes filtered out)\n  - currentThemeId: string — id of the currently active theme\n  - currentTheme: ThemeData — the currently active theme object (id, name, icon, origin)\n  - defaultThemeId: string — id of the user's preferred default theme (used for bootscreen, shell, and future space-override). Persisted to AgentSettings.defaultThemeId\n  - themeManagementList: ThemeManagementItem[] — flat list of all themes (built-in + all custom) with management metadata (id, name, icon, isBuiltIn, isInstalled, isDefault)\n- Actions:\n  - setCurrentTheme(themeId: string): sets and persists the active theme\n  - setDefaultTheme(themeId: string): sets the preferred default theme (persists to AgentSettings.defaultThemeId)\n  - toggleThemeInstalled(themeId: string): toggles a custom theme visible/hidden in pickers; does not delete the theme\n  - installFromMarketplace(marketplaceThemeId: string): installs a marketplace theme into installedThemes\n  - uninstallTheme(themeId: string): removes an installed theme (deletes the model)\n  - deleteTheme(themeId: string): permanently deletes a custom theme\n\nTemplateStore:\n- State:\n  - personalTemplates: array of TemplateSchema objects — core templates plus user's installed custom templates (excludes space templates)\n  - spaceTemplates: array of TemplateSchema objects — templates loaded from the current space perspective\n  - builtInTemplates: array of TemplateSchema objects — built-in system templates (always available)\n  - myTemplates: array of TemplateSchema objects — user's installed custom templates only (excludes built-in and space templates)\n  - allTemplates: array of TemplateSchema objects — union of built-in + personal + space templates\n  - shellTemplates: array of TemplateSchema objects (static system pages: profile, settings, tests)\n  - currentTemplate: TemplateSchema (the active template)\n  - operationLoading: unknown\n  - activeShellView: string | null (id of the currently open shell overlay: 'profile' | 'settings' | 'schema-tests' | 'landing-page' | null)\n  - templateManagementList: TemplateManagementItem[] — flat list of all templates with management metadata (id, name, icon, description, isBuiltIn, isInstalled, isDefault)\n  - switcherGroups: TemplateSwitcherGroup[] — pre-grouped flat items for the template switcher UI; each group has { label: string, items: { id, name, icon }[] }. Groups: \"Space templates\", \"My templates\", \"Built-in\". Use $filter where: { name: { contains: ... } } for search since items have a flat name field.\n- Actions:\n  - updateTemplate(newTemplate: TemplateSchema): updates the current template\n  - switchTemplate(newTemplateId: string): switches to another template\n  - removeTemplate(): removes the current template\n  - saveTemplate(name: string): saves the current template\n  - toggleInstalled(): unknown\n  - setDefaultTemplate(): unknown\n  - deleteTemplate(): unknown\n  - openShellView(id: string): opens a shell overlay by id ('profile' | 'settings' | 'schema-tests' | 'landing-page')\n  - closeShellView(): closes the currently open shell overlay\n\nSpaceStore:\n- State:\n  - memberDids: string[] — DIDs of all members in the current space (includes own DID)\n  - members: AgentProfileSummary[] — cached profiles for all memberDids\n  - spaceDefaultTemplateId: string — the current space's default template ID (empty string when no space is active)\n  - currentSpace: Space | null — the current space model (all Space fields: uuid, url, name, description, access, discovery, avatar, coverImage, defaultTemplateId, defaultThemeId, location, plus id/author/createdAt)\n  - foreignSpacePrefill: { name, description, avatar } | null — detected from a foreign app's own model (e.g. Flux's Community) for prefilling the \"Initialize as WE space\" gate; null once the perspective is a WE space or no recognized foreign model is found\n  - signalTypes: array of SignalType objects (community-created reaction/vote types)\n  - signalTypesBySlug: Record<slug, SignalType> — computed map; access via { $store: \"spaceStore.signalTypesBySlug.<slug>\" }; use .id for the UUID\n  - enabledModules: string[] — ids of the feature modules this space has turned on. An unset value means \"not decided\", not \"none\": it falls back to every registered module, so spaces predating the setting keep the chrome they had\n  - moduleSettings: { id, name, description, icon, enabled }[] — every registered module paired with whether this space has it on; the shape the settings list renders\n- Actions:\n  - createPost(editorState: unknown): creates a new post\n  - updatePost(postId: string, editorState: unknown): reconciles an edited post against its existing blocks — updates/reuses blocks whose id survived the edit, creates new ones, deletes ones no longer present\n  - deletePost(postId: string): permanently deletes a post and all of its contained blocks (recursive, atomic)\n  - updateSpaceImage(field: \"avatar\" | \"coverImage\", imageFile: File): uploads and sets the space avatar or cover image\n  - createSignalType(config: Partial<SignalType>): creates a new signal type in the community; slug auto-derived from name if blank\n  - upsertSignal(nodeId: string, signalTypeId: string, value: number): adds or updates a signal on a node; value=0 deletes it\n  - navigateToSpace(spaceId: string, view?: string): navigates to a space — accepts a perspective UUID or a neighbourhood CID (sharedUrl without the neighbourhood:// prefix); pre-loads space templates before switching so the template and data arrive together\n  - setModuleEnabled(moduleId: string, enabled: boolean): turns a feature module on or off for the current space; writes the resolved list, so the first toggle also pins whatever was on by fallback\n\nAiStore:\n- State:\n  - models: array of Model objects\n  - tasks: array of AITask objects\n  - isOpen: unknown\n  - messages: unknown\n  - isStreaming: unknown\n  - streamingContent: unknown\n  - apiKeyConfigured: unknown\n  - templateName: unknown\n  - templateIcon: unknown\n  - isReadOnly: unknown\n  - hasPendingChanges: unknown\n  - pickerOpen: unknown\n  - pickerAction: unknown\n  - pickerDefaultName: unknown\n  - pickerDefaultIcon: unknown\n  - pickerShowDestination: unknown\n  - sessions: unknown\n  - activeSessionId: unknown\n  - panelMode: unknown\n  - schemaJson: unknown\n  - operationLoading: unknown\n  - canUndo: boolean (true when there are schema edits that can be undone)\n  - canRedo: boolean (true when there are undone schema edits that can be redone)\n- Actions:\n  - handleSchemaPrompt(prompt: string): generates a schema from a prompt\n  - sendMessage(): unknown\n  - close(): unknown\n  - toggle(): toggles the AI chat panel open/closed\n  - setApiKey(): unknown\n  - startFork(): unknown\n  - startFresh(): unknown\n  - confirmPicker(): unknown\n  - cancelPicker(): unknown\n  - newChat(): unknown\n  - switchSession(): unknown\n  - deleteSession(): unknown\n  - setPanelMode(): unknown\n  - onSchemaEdit(): unknown\n  - undo(): undoes the last schema edit\n  - redo(): redoes the last undone schema edit\n\nAppStore:\n- State:\n  - apps: RegisteredApp[] — list of registered external apps (id, name, image)\n  - appsWithWe: unknown\n  - activeAppId: string | null — id of the currently active app, or null if none\n- Actions:\n  - activateApp(id: string): activates an app and switches to its view\n  - deactivateApp(): deactivates the current app and returns to the template view\n\n---\n\n## Store Usage Patterns\n\nReading state:\n{ \"$store\": \"storeName.property\" }\nExample: { \"$store\": \"routeStore.currentPath\" }\n\nCalling actions:\n{ \"$action\": \"storeName.method\", \"args\": [...] }\nExample: { \"$action\": \"routeStore.navigate\", \"args\": [\"/home\"] }\n\nIterating over store data:\n{\n  \"type\": \"$each\",\n  \"props\": { \"items\": { \"$store\": \"adamStore.personalSpaces\" }, \"as\": \"space\" },\n  \"children\": [\n    {\n      \"type\": \"CircleButton\",\n      \"props\": {\n        \"label\": \"$space.name\",\n        \"onClick\": { \"$action\": \"routeStore.navigate\", \"args\": [{ \"$concat\": [\"/space/\", \"$space.uuid\"] }] }\n      }\n    }\n  ]\n}\n\nConditional rendering from store:\n{\n  \"type\": \"$if\",\n  \"props\": {\n    \"condition\": { \"$eq\": [{ \"$store\": \"routeStore.currentPath\" }, \"/\"] },\n    \"then\": { \"type\": \"we-text\", \"children\": [\"Home\"] },\n    \"else\": { \"type\": \"we-text\", \"children\": [\"Not home\"] }\n  }\n}\n\nDeriving options from store:\n{\n  \"$map\": {\n    \"items\": { \"$store\": \"templateStore.templates\" },\n    \"select\": { \"name\": \"$item.meta.name\", \"icon\": \"$item.meta.icon\" }\n  }\n}\n\nQuerying model data:\n{\n  \"$query\": { \"entity\": \"TaskBlock\", \"where\": { \"status\": \"todo\" } }\n}\n\nEager-loading relations with include (most common relational pattern):\nWhen you need related data displayed alongside a list, use include to hydrate relations in one query.\n\nExample — Channel list with conversation count and latest conversation:\n{\n  \"type\": \"$each\",\n  \"props\": {\n    \"items\": {\n      \"$query\": {\n        \"entity\": \"Channel\",\n        \"dataset\": \"$currentDataset\",\n        \"include\": {\n          \"$conversationCount\": { \"from\": \"conversations\", \"count\": true },\n          \"$latestConversation\": { \"from\": \"conversations\", \"order\": { \"createdAt\": \"desc\" }, \"limit\": 1 }\n        }\n      }\n    },\n    \"as\": \"channel\"\n  },\n  \"children\": [{\n    \"type\": \"Row\",\n    \"children\": [\n      { \"type\": \"we-text\", \"children\": [\"$channel.name\"] },\n      { \"type\": \"we-text\", \"children\": [\"$channel.$conversationCount\"] }\n    ]\n  }]\n}\n\nExample — Nested include (Conversations with their messages):\n{\n  \"$query\": {\n    \"entity\": \"Conversation\",\n    \"dataset\": \"$currentDataset\",\n    \"include\": {\n      \"messages\": {\n        \"order\": { \"createdAt\": \"desc\" },\n        \"limit\": 20\n      }\n    }\n  }\n}\nEach conversation in the result has a messages array of hydrated Message instances.\nNesting works to any depth: \"include\": { \"messages\": { \"include\": { \"reactions\": true } } }\n\nRelational drill-down (master-detail navigation across entity relations):\nUse routes + a $query `scope` when you navigate to a detail route and need only that record's children.\nscope.anchor is the parent entity type; scope.via is its HasMany relation (see externalModels) whose targets\nare the query's entity; scope.anchorId is the parent record's id. The adapter resolves the relation to a\nbackend handle, so no protocol details live in the template.\nrouteStore.segments.N extracts the Nth dynamic path segment (segments splits currentPath by \"/\").\n\nExample — Channel list → Conversation list:\n{\n  \"routes\": [\n    {\n      \"path\": \"/\",\n      \"type\": \"Column\",\n      \"props\": { \"gap\": \"300\", \"p\": \"400\" },\n      \"children\": [{\n        \"type\": \"$each\",\n        \"props\": {\n          \"items\": { \"$query\": { \"entity\": \"Channel\", \"dataset\": \"$currentDataset\" } },\n          \"as\": \"channel\"\n        },\n        \"children\": [{\n          \"type\": \"we-button\",\n          \"props\": {\n            \"variant\": \"ghost\",\n            \"onClick\": { \"$action\": \"routeStore.navigate\", \"args\": [{ \"$concat\": [\"/channels/\", \"$channel.id\"] }] }\n          },\n          \"children\": [\"$channel.name\"]\n        }]\n      }]\n    },\n    {\n      \"path\": \"/channels/:channelId\",\n      \"type\": \"Column\",\n      \"props\": { \"gap\": \"300\", \"p\": \"400\" },\n      \"children\": [{\n        \"type\": \"$each\",\n        \"props\": {\n          \"items\": {\n            \"$query\": {\n              \"entity\": \"Conversation\",\n              \"scope\": { \"anchor\": \"Channel\", \"via\": \"conversations\", \"anchorId\": { \"$store\": \"routeStore.segments.1\" } },\n              \"dataset\": \"$currentDataset\"\n            }\n          },\n          \"as\": \"convo\"\n        },\n        \"children\": [{\n          \"type\": \"we-text\",\n          \"children\": [\"$convo.conversationName\"]\n        }]\n      }]\n    }\n  ]\n}\nNotes:\n- Use include when you need related data displayed inline (e.g. a post with its comments, a channel with its conversation count).\n- Use a scope drill-down when you're on a detail route and want only children belonging to the current record.\n- dataset must point to the dataset that holds the data. For external apps (e.g. Flux) opened as a WE space, use \"$currentDataset\".\n- The relation name (in include, or scope.via) is the HasMany field name on the parent entity.\n\nLocal state (form with validation):\n{\n  \"type\": \"Column\",\n  \"$localState\": {\n    \"name\": {\n      \"type\": \"string\",\n      \"initial\": \"\",\n      \"validate\": [{ \"rule\": \"required\" }, { \"rule\": \"minLength\", \"value\": 2 }]\n    },\n    \"loading\": { \"type\": \"boolean\", \"initial\": false }\n  },\n  \"children\": [\n    {\n      \"type\": \"we-form-field\",\n      \"props\": { \"label\": \"Name\", \"error\": { \"$error\": \"name\" } },\n      \"children\": [{\n        \"type\": \"we-input\",\n        \"props\": {\n          \"value\": { \"$local\": \"name\" },\n          \"onInput\": { \"$setLocal\": \"name\", \"from\": \"$event.detail\" },\n          \"onBlur\": { \"$touch\": \"name\" }\n        }\n      }]\n    },\n    {\n      \"type\": \"we-button\",\n      \"props\": {\n        \"text\": \"Submit\",\n        \"loading\": { \"$local\": \"loading\" },\n        \"disabled\": { \"$not\": { \"$formValid\": \"$scope\" } },\n        \"onClick\": [\n          { \"$touch\": \"$all\" },\n          { \"$if\": { \"condition\": { \"$formValid\": \"$scope\" }, \"then\": { \"$action\": \"myStore.submit\", \"args\": [{ \"$local\": \"name\" }] } } }\n        ]\n      }\n    }\n  ]\n}\n\nRepeating lists with $each:\nALWAYS use $each for lists of similar items — never duplicate the same node structure.\nWrite the template once; $each renders it for each item.\n\nUse literal arrays for fixed/sample data:\n{\n  \"type\": \"$each\",\n  \"props\": {\n    \"items\": [\n      { \"title\": \"First Post\", \"text\": \"Hello world.\", \"author\": \"Alice\" },\n      { \"title\": \"Second Post\", \"text\": \"Another update.\", \"author\": \"Bob\" }\n    ],\n    \"as\": \"post\"\n  },\n  \"children\": [\n    {\n      \"type\": \"Column\",\n      \"props\": { \"bg\": \"neutral-0\", \"r\": \"400\", \"border\": \"1px solid neutral-200\", \"p\": \"400\", \"gap\": \"300\" },\n      \"children\": [\n        {\n          \"type\": \"Row\",\n          \"props\": { \"gap\": \"300\", \"ay\": \"center\" },\n          \"children\": [\n            { \"type\": \"we-avatar\", \"props\": { \"initials\": \"$post.author\", \"size\": \"sm\" } },\n            { \"type\": \"we-text\", \"props\": { \"variant\": \"label\" }, \"children\": [\"$post.author\"] }\n          ]\n        },\n        { \"type\": \"we-text\", \"props\": { \"variant\": \"heading-sm\" }, \"children\": [\"$post.title\"] },\n        { \"type\": \"we-text\", \"children\": [\"$post.text\"] }\n      ]\n    }\n  ]\n}\n\nUse $query or $store for dynamic data (more common in production):\n{ \"type\": \"$each\", \"props\": { \"items\": { \"$query\": { \"entity\": \"TextBlock\" } }, \"as\": \"post\" }, \"children\": [...] }\n{ \"type\": \"$each\", \"props\": { \"items\": { \"$store\": \"spaceStore.posts\" }, \"as\": \"post\" }, \"children\": [...] }\n\nPer-item customization inside $each:\nTo style or highlight specific items, add a data flag to those items and use $if on the flag inside the template. Do NOT use $eq: [\"$index\", N] comparisons — they are fragile, repetitive, and break when items are reordered.\nExample: add \"highlighted\": true to one item's data, then use $if on \"$post.highlighted\" in the template:\n{ \"type\": \"$if\", \"props\": { \"condition\": \"$post.highlighted\", \"then\": { \"type\": \"we-badge\", \"props\": { \"variant\": \"primary\" }, \"children\": [\"Featured\"] } } }\nFor conditional props (e.g. different bg on highlighted items):\n{ \"bg\": { \"$if\": { \"condition\": \"$post.highlighted\", \"then\": \"primary-50\", \"else\": \"neutral-0\" } } }\n\nBoolean toggle (show/hide, expand/collapse):\n{\n  \"type\": \"Column\",\n  \"$localState\": { \"showDetails\": { \"type\": \"boolean\", \"initial\": false } },\n  \"children\": [\n    { \"type\": \"we-button\", \"props\": { \"variant\": \"ghost\", \"onClick\": { \"$toggleLocal\": \"showDetails\" } }, \"children\": [\"Toggle Details\"] },\n    { \"type\": \"$if\", \"props\": { \"condition\": { \"$local\": \"showDetails\" }, \"then\": { \"type\": \"we-text\", \"children\": [\"Details content here\"] } } }\n  ]\n}\n\nSignal types (community-specific reactions/votes):\nSignal types are created per-community by the user. Never hardcode signal type UUIDs in schemas.\nInstead reference them by slug through spaceStore.signalTypesBySlug.\n\nALWAYS ask the user: \"What slug should I use? (e.g. 'like', 'upvote', 'star')\"\nThen use that slug in the pattern below.\n\nPattern — live wired SignalControl (inside a $each over a model with $query include):\n{\n  \"type\": \"$each\",\n  \"props\": {\n    \"items\": {\n      \"$query\": {\n        \"entity\": \"MyBlock\",\n        \"include\": {\n          \"$totalLikeCount\": {\n            \"from\": \"signals\",\n            \"where\": { \"signalTypeId\": { \"$store\": \"spaceStore.signalTypesBySlug.like.id\" } },\n            \"count\": true\n          },\n          \"$myLikeSignal\": {\n            \"from\": \"signals\",\n            \"where\": {\n              \"signalTypeId\": { \"$store\": \"spaceStore.signalTypesBySlug.like.id\" },\n              \"author\": \"$me.did\"\n            },\n            \"limit\": 1\n          }\n        }\n      }\n    },\n    \"as\": \"item\"\n  },\n  \"children\": [\n    {\n      \"type\": \"$if\",\n      \"props\": {\n        \"condition\": { \"$store\": \"spaceStore.signalTypesBySlug.like\" },\n        \"then\": {\n          \"type\": \"SignalControl\",\n          \"props\": {\n            \"signalType\": { \"$store\": \"spaceStore.signalTypesBySlug.like\" },\n            \"myValue\": \"$item.$myLikeSignal.value\",\n            \"aggregate\": \"$item.$totalLikeCount\",\n            \"onSignal\": {\n              \"$action\": \"spaceStore.upsertSignal\",\n              \"args\": [\"$item.id\", { \"$store\": \"spaceStore.signalTypesBySlug.like.id\" }, \"$arg\"]\n            }\n          }\n        }\n      }\n    }\n  ]\n}\n\nNotes:\n- The $if guard hides SignalControl if the community hasn't created a signal type with that slug.\n- Replace \"like\" with the user's slug throughout (in $store paths and args).\n- $query include adds $totalLikeCount and $myLikeSignal as computed properties on each item.\n- signalType prop accepts the full SignalType object (provides icon, mode, range to the UI component).\n\nPreview / mockup mode (static, no store wiring):\n{\n  \"type\": \"SignalControl\",\n  \"props\": {\n    \"preview\": true,\n    \"signalType\": { \"icon\": \"❤️\", \"mode\": \"toggle\", \"rangeMin\": 0, \"rangeMax\": 1 }\n  }\n}\nUse preview: true when sketching a layout without real data. Remove it (and add the full wiring above) when going live.\n\n---\n\n## Routing Structure\n\nDefine nested routes using the \"routes\" array at the root node of the schema.\nEach route object describes a path and the UI node to render when that path is active.\nRoutes can be nested to support sub-pages and layouts.\n\nRoute objects follow the same structure as schema nodes, with an additional \"path\" property.\n\n- The \"routes\" array MUST be placed on the ROOT template node (or on a route node for nested routing). The router only reads routes from these positions — placing routes on an arbitrary child node means the router will never find them and nothing will render.\n- Use \"path: '*'\" or \"path: '/*'\" for catch-all/not-found routes.\n- Use \":paramName\" for dynamic route parameters (e.g. \"/space/:spaceId\").\n- Use nested \"routes\" arrays for sub-pages and layouts.\n- Use { \"type\": \"$routes\" } in children to indicate where nested routes should render. The $routes outlet can be deeply nested — only the routes array placement matters.\n- EVERY { \"type\": \"$routes\" } outlet MUST have a \"routes\" array defined on the same node or an ancestor node. A $routes outlet without a routes array is invalid and will fail validation.\n- NEVER duplicate a route path — every route in the same \"routes\" array MUST have a unique path.\n- When using tabs, each tab's key and navigate path MUST have a matching route. Ensure a 1:1 correspondence between tabs and routes.\n\n### Tabs + Routing\n\nIMPORTANT: we-tabs only manages visual selection — clicking a tab does NOT navigate automatically.\nEach we-tab MUST have an onClick with { \"$action\": \"routeStore.navigate\" } to trigger route changes.\nBind we-tabs selectedKey to the matching route segment so the active tab stays in sync.\n(Alternatively, a single onChange on we-tabs can replace per-tab onClick — see onChange pattern below.)\n\nRecommended pattern — header above tabs (routes on ROOT, $routes outlet nested inside):\n{\n  \"type\": \"Column\",\n  \"routes\": [\n    { \"path\": \"/\", \"type\": \"we-text\", \"children\": [\"Select a tab\"] },\n    { \"path\": \"/posts\", \"type\": \"Column\", \"children\": [{ \"type\": \"we-text\", \"children\": [\"Posts content\"] }] },\n    { \"path\": \"/articles\", \"type\": \"Column\", \"children\": [{ \"type\": \"we-text\", \"children\": [\"Articles content\"] }] }\n  ],\n  \"children\": [\n    { \"type\": \"Row\", \"props\": { \"p\": \"300\", \"ax\": \"between\" }, \"children\": [\n      { \"type\": \"we-text\", \"props\": { \"variant\": \"heading-lg\" }, \"children\": [\"My App\"] }\n    ]},\n    {\n      \"type\": \"we-tabs\",\n      \"props\": { \"selectedKey\": { \"$store\": \"routeStore.segments.0\" } },\n      \"children\": [\n        { \"type\": \"we-tab\", \"props\": { \"key\": \"posts\", \"label\": \"Posts\", \"onClick\": { \"$action\": \"routeStore.navigate\", \"args\": [\"/posts\"] } } },\n        { \"type\": \"we-tab\", \"props\": { \"key\": \"articles\", \"label\": \"Articles\", \"onClick\": { \"$action\": \"routeStore.navigate\", \"args\": [\"/articles\"] } } }\n      ]\n    },\n    { \"type\": \"$routes\" }\n  ]\n}\nNote: \"routes\" is on the root Column, NOT on a child. The $routes outlet is a child — that's fine. Only the routes array placement matters.\n\nWRONG — two common mistakes that produce empty tabs (validator will catch both):\n{\n  // MISTAKE 1: routes defined on an inner child node, not the root.\n  // The router never inspects children for routes arrays — this routes array is invisible.\n  \"type\": \"Column\",\n  \"children\": [\n    { \"type\": \"we-tabs\", \"children\": [\"...tabs...\"] },\n    {\n      \"type\": \"Column\",\n      \"routes\": [                          // ← WRONG: router never reads this\n        { \"path\": \"/posts\", \"type\": \"Column\", \"children\": [\"...\"] }\n      ],\n      \"children\": [{ \"type\": \"$routes\" }]  // ← outlet here does nothing without a live routes array\n    }\n  ]\n}\n\n{\n  // MISTAKE 2: using { type: \"$routes\" } as a route entry's component type.\n  // $routes is an outlet slot marker — as a leaf route entry it has no children injected,\n  // so it returns null. Every tab navigates to a route that renders nothing.\n  \"type\": \"Column\",\n  \"routes\": [\n    { \"path\": \"/posts\", \"type\": \"$routes\" }  // ← WRONG: renders null, use a real component\n  ],\n  \"children\": [{ \"type\": \"$routes\" }]\n}\n\nAlternative: single onChange on we-tabs (fires with $event.detail.value = selected key):\n{ \"onChange\": { \"$action\": \"routeStore.navigate\", \"args\": [{ \"$concat\": [\"/\", \"$arg.detail.value\"] }] } }\nThis replaces all per-tab onClick handlers but requires $concat to build the path.\n\nNested routing example:\n{\n  \"routes\": [\n    { \"path\": \"*\", \"type\": \"Column\", \"props\": { \"ax\": \"center\", \"p\": \"500\" }, \"children\": [{ \"type\": \"we-text\", \"children\": [\"Page not found\"] }] },\n    { \"path\": \"/\", \"type\": \"Column\", \"props\": { \"ax\": \"center\", \"p\": \"500\" }, \"children\": [{ \"type\": \"we-text\", \"children\": [\"Home page\"] }] },\n    {\n      \"path\": \"/space/:spaceId\",\n      \"type\": \"Row\",\n      \"children\": [{ \"type\": \"$routes\" }],\n      \"routes\": [\n        { \"path\": \"/*\", \"type\": \"we-text\", \"children\": [\"Space page not found\"] },\n        { \"path\": \"/\", \"type\": \"we-text\", \"children\": [\"About sub-page\"] },\n        { \"path\": \"/posts\", \"type\": \"Column\", \"children\": [{ \"type\": \"$routes\" }],\n          \"routes\": [\n            { \"path\": \"/*\", \"type\": \"we-text\", \"children\": [\"Post not found\"] },\n            { \"path\": \"/\", \"type\": \"we-text\", \"children\": [\"No posts selected\"] },\n            { \"path\": \"/1\", \"type\": \"we-text\", \"children\": [\"Post 1 page\"] }\n          ]\n        }\n      ]\n    }\n  ]\n}\n\n---\n\n## Rules & Best Practices\n\n- Always use the correct prop names and value types for each component.\n- Never use null as a value in any children array. Only use valid schema nodes or strings.\n- Each item in a children array must be either a valid schema node object or a string.\n- Use design tokens for spacing, color, radius, etc. (do not use raw CSS except in styles).\n- Use the styles prop for custom inline CSS (e.g., { \"width\": \"100px\" }).\n- Use hoverProps for hover state overrides, activeProps for pressed state, focusProps for focus state. Supported on @we/primitives (we-text, we-button, etc.) and layout components (Column, Row).\n- Use dynamic logic tokens ($store, $if, $action, etc.) for reactivity and conditional behavior.\n- Nest components using children or slots as needed.\n- For routes, use the routes array with path and child nodes.\n- Do not invent new components or props — use only those listed in the component registry.\n- Do not set props to their default/inherited values — omit them. fontSize and fontWeight inherit from parents (~16px / normal), so only set them when you need a different value.\n- Omit empty `props` and `children` — both are optional. Do not write `props: {}` or `children: []`.\n- Do not use `as const` on schema node `type` fields — `SchemaNode.type` is `string`, so it is never needed.\n- For icon-only buttons, nest a `we-icon` child inside `we-button` rather than using a `text` prop with a Unicode character. **Omit the `size` prop on `we-icon` when nesting inside sized primitives** (`we-button`, `we-input`, `we-badge`, `we-textarea`) — these components auto-size nested icons via `--we-context-icon-size` (xs→12px, sm→16px, md→24px, lg→32px, xl→40px). Only set an explicit icon `size` if you need to override the automatic sizing. Example: `{ type: 'we-button', props: { variant: 'ghost', size: 'sm' }, children: [{ type: 'we-icon', props: { name: 'x' } }] }`.\n- NEVER pass a bare number like \"16\" as a size or dimension prop — it is not valid CSS. Always check the component's declared prop type: if it's a string union, use one of the listed values; if it accepts arbitrary strings, include a CSS unit (e.g. \"16px\", \"2rem\").\n- For interactive list items and selectable options, use `we-button` with variant switching (e.g., `secondary` when selected, `ghost` when not) instead of manually styling `Row` with cursor, bg, and onClick. Buttons provide hover, focus, and active states for free.\n- For card-like layouts, compose from `Column` with DS props (bg, r, border, p, gap). This gives full control over spacing and appearance.\n- When rendering lists of similar items (posts, cards, users, etc.), ALWAYS use `$each` with a single template child — never duplicate the same node structure multiple times. Use literal arrays in `items` for static data, or `$store`/`$query` for dynamic data.\n\n### Icon Names (Phosphor Icons)\n\nwe-icon uses **Phosphor Icons** (v2.1). Do NOT use Heroicons, Material, or FontAwesome names.\nPhosphor names are lowercase-kebab-case. The `weight` prop controls style: \"regular\" (default), \"bold\", \"fill\", \"light\", \"thin\", \"duotone\".\n\nCommon Phosphor icon names (use these, NOT Heroicons equivalents):\n- Navigation: house, arrow-left, arrow-right, caret-left, caret-right, caret-down, caret-up, arrows-clockwise\n- Actions: plus, minus, x, check, pencil-simple, trash, copy, download, upload, share, link, magnifying-glass, funnel, sliders-horizontal\n- Communication: chat-circle, chat-dots, envelope-simple, paper-plane-tilt, bell, megaphone\n- Social: heart, thumbs-up, thumbs-down, star, share-network, users, user, user-plus\n- Media: image, camera, play, pause, stop, microphone, speaker-high, video-camera\n- Files: file, file-text, folder, folder-open, clipboard-text, note\n- UI: list, squares-four, gear, dots-three, dots-three-vertical, warning, info, question, check-circle, x-circle, eye, eye-slash\n- Misc: lightning, rocket, globe, map-pin, calendar, clock, tag, bookmark, flag, lock, shield-check\n\nWRONG icon names (Heroicons/Material — do NOT use):\n- \"chat-bubble-left\" → use \"chat-circle\"\n- \"chevron-right\" → use \"caret-right\"\n- \"cog\" / \"settings\" → use \"gear\"\n- \"trash-can\" → use \"trash\"\n- \"magnifying-glass-circle\" → use \"magnifying-glass\"\n- \"home\" → use \"house\"\n- \"favorite\" → use \"heart\"\n- \"delete\" → use \"trash\"\n- \"search\" → use \"magnifying-glass\"\n- \"close\" → use \"x\"\n- \"menu\" → use \"list\"\n- All schemas must be valid JSON with property names and string values in double quotes.\n- The meta property at the root is required: { \"meta\": { \"name\": \"...\", \"description\": \"...\", \"icon\": \"...\" } }\n- Always set `bg: 'neutral-50'` on root-level schema nodes (templates, pages). This ensures proper background in all themes — without it, dark mode renders white backgrounds.\n\nMost @we/primitives inherit all Design System Props documented above (layout, visual, flex, typography, state).\nSome layout-only primitives (we-avatar, we-icon, we-image, we-spinner, etc.) only accept Layout props — see the Design System Props section for the full list.\n\nNative HTML elements (lowercase tags render directly without registry entries):\n- Layout: div, section, article, aside, main, nav, header, footer\n- Text: p, span, h1-h6, pre, code, blockquote\n- Lists: ul, ol, li\n- Forms: form, input, button, label, select, textarea\n- Media: img, video, audio, canvas, figure, figcaption\n- Other: a, table, tr, td, th, details, summary, dialog\n\n## Schema Validation\n\nRun `we-validate-schemas` (or `node packages/schema-system/shared/dist/cli/we-validate-schemas.js`) from the monorepo root to validate all `.schema.ts` files.\nFor a specific file: `we-validate-schemas packages/app-framework/src/shared/schemas/MyTemplate.schema.ts`\n\nAfter creating or modifying a `.schema.ts` file, always run validation to catch:\n- Unknown component types (typos, missing registry entries)\n- Invalid or misspelled props (with \"did you mean?\" suggestions)\n- Prop type mismatches (e.g., number where string expected)\n- Missing required `meta` field on root TemplateSchema nodes\n- `$routes` outlet without a `routes` array on an ancestor\n- Orphan `$local` / `$setLocal` references without a `$localState` ancestor\n- DS layer consistency (mixing props from layers the component doesn't support)";
diff --git a/packages/app-framework/src/frameworks/solid/stores/SpaceStore.tsx b/packages/app-framework/src/frameworks/solid/stores/SpaceStore.tsx
index de24a972..75732b33 100644
--- a/packages/app-framework/src/frameworks/solid/stores/SpaceStore.tsx
+++ b/packages/app-framework/src/frameworks/solid/stores/SpaceStore.tsx
@@ -1,6 +1,7 @@
 import { parseLit } from '@coasys/ad4m';
 import type { AgentProfileSummary } from '@shared/agentHelpers';
 import { getModelForPerspective, registerModel } from '@shared/registries/modelRegistry';
+import { moduleRegistry } from '@shared/registries/moduleRegistry';
 import { ensureModelRegistered, SPACE_MODELS } from '@shared/sdnaModels';
 import { type LocationData, removeSpaceFromParent, spaceSelfWhere, syncSpaceToParent } from '@shared/syncHelpers';
 import { deriveSlug } from '@shared/utils';
@@ -48,6 +49,11 @@ export interface SpaceStore {
    * for prefilling the "Initialize as WE space" gate. Null once the perspective is a WE space,
    * or if no recognized foreign model is found. */
   foreignSpacePrefill: Accessor<{ name: string; description: string; avatar: string | null } | null>;
+  /** Feature modules turned on for this space. Falls back to everything the seed activated when the
+   *  space has never decided, so spaces that predate the setting keep the chrome they had. */
+  enabledModules: Accessor<string[]>;
+  /** Registered modules paired with whether this space has them on — the settings list. */
+  moduleSettings: Accessor<{ id: string; name: string; description: string; icon: string; enabled: boolean }[]>;
 
   // Actions
   createPost: (json: unknown) => Promise<void>;
@@ -57,6 +63,7 @@ export interface SpaceStore {
   updateSpaceMeta: (updates: SpaceMetaUpdate) => Promise<void>;
   setSpaceDefaultTemplate: (templateId: string) => Promise<void>;
   setSpaceDefaultTheme: (themeId: string) => Promise<void>;
+  setModuleEnabled: (moduleId: string, enabled: boolean) => Promise<void>;
   createSignalType: (config: Partial<SignalType>) => Promise<void>;
   upsertSignal: (nodeId: string, signalTypeId: string, value: number) => Promise<void>;
   navigateToSpace: (spaceId: string, view?: string) => Promise<void>;
@@ -309,6 +316,67 @@ export function SpaceStoreProvider(props: ParentProps) {
 
   const [currentSpace, setCurrentSpace] = createSignal<Space | null>(null);
 
+  /**
+   * Which modules this space has on.
+   *
+   * An unset field means "not decided", never "none" — see `Space.enabledModules`. Falling back to
+   * the registered set is what stops this shipping as a silent regression that strips every existing
+   * space of its chrome.
+   */
+  const enabledModules = createMemo<string[]>(() => {
+    const raw = currentSpace()?.enabledModules;
+    if (raw) {
+      try {
+        const parsed = JSON.parse(raw);
+        if (Array.isArray(parsed)) return parsed.filter((id): id is string => typeof id === 'string');
+      } catch {
+        // A malformed value is a corrupt setting, not a decision to disable everything.
+        console.warn('space.enabledModules is not valid JSON; falling back to the registered set');
+      }
+    }
+    return moduleRegistry.all().map((entry) => entry.definition.id);
+  });
+
+  const moduleSettings = createMemo(() => {
+    const on = new Set(enabledModules());
+    return moduleRegistry.all().map(({ definition }) => ({
+      id: definition.id,
+      name: definition.name,
+      description: definition.description ?? '',
+      icon: definition.icon ?? 'puzzle-piece',
+      enabled: on.has(definition.id),
+    }));
+  });
+
+  async function setModuleEnabled(moduleId: string, enabled: boolean) {
+    const space = currentSpace();
+    if (!space) return;
+    const next = new Set(enabledModules());
+    if (enabled) next.add(moduleId);
+    else next.delete(moduleId);
+    // Writes the resolved list, not a diff — so the first toggle also pins everything that was on by
+    // fallback, and a module added to the seed later doesn't silently appear in a space that had
+    // already made a decision.
+    space.enabledModules = JSON.stringify([...next]);
+    try {
+      await space.save();
+      setCurrentSpace(space);
+    } catch (error) {
+      // A space created before this field existed has the old SHACL shape stored in its perspective,
+      // and `we://enabled_modules` is not in it. Shapes are only installed when a class is absent
+      // entirely (`hasSubjectClassLink`), so adding a property to an existing model does not
+      // re-register — there is no shape-migration path yet.
+      //
+      // Reported rather than swallowed, and harmless either way: `enabledModules` falls back to the
+      // registered set, so such a space keeps exactly the chrome it has today.
+      console.warn(
+        `could not persist enabledModules for this space — it predates the field and its stored ` +
+          `SHACL shape has no "we://enabled_modules" property`,
+        error,
+      );
+    }
+  }
+
   // Subscribe to current space data reactively whenever the perspective changes.
   // include: { location: true } so AboutRoute can access location without a separate query.
   createEffect(() => {
@@ -494,6 +562,8 @@ export function SpaceStoreProvider(props: ParentProps) {
     spaceDefaultTemplateId,
     spaceDefaultThemeId,
     currentSpace,
+    enabledModules,
+    moduleSettings,
     foreignSpacePrefill,
 
     // Actions
@@ -504,6 +574,7 @@ export function SpaceStoreProvider(props: ParentProps) {
     updateSpaceMeta,
     setSpaceDefaultTemplate,
     setSpaceDefaultTheme,
+    setModuleEnabled,
     createSignalType,
     upsertSignal,
     navigateToSpace,
diff --git a/packages/app-framework/src/shared/registries/moduleRegistry.ts b/packages/app-framework/src/shared/registries/moduleRegistry.ts
index 95806fa7..0b0fda71 100644
--- a/packages/app-framework/src/shared/registries/moduleRegistry.ts
+++ b/packages/app-framework/src/shared/registries/moduleRegistry.ts
@@ -23,7 +23,7 @@
  * registers. That is exactly what makes `{ $if: { condition: { $store: 'modules.notes' } } }` the
  * supported way for a template to depend on an optional module.
  */
-import type { ModuleDefinition, ModuleStoreDeps } from '@we/schema-shared';
+import type { ModuleDefinition, ModuleStoreDeps, SchemaNode } from '@we/schema-shared';
 import { checkModuleCompatibility } from '@we/schema-shared';
 
 import { type ModelClass, registerModel, unregisterModel } from './modelRegistry';
@@ -37,6 +37,27 @@ export interface RegisteredModule {
 
 const modules = new Map<string, RegisteredModule>();
 
+/**
+ * Wrap a module's chrome so it only renders where the community has the module turned on.
+ *
+ * Done as a schema condition rather than by filtering the registry, for two reasons. It needs no
+ * reactivity plumbing in the host — `$if` already re-evaluates when the store changes, whereas
+ * `slotRegistry` is a plain `Map` that would have to become reactive. And it composes: the module's
+ * own visibility conditions still apply underneath, so a module never has to know it is being gated.
+ *
+ * `spaceStore.enabledModules` resolves to the seed's module list when a space has not decided, which
+ * is what keeps existing spaces rendering the chrome they already had. See `Space.enabledModules`.
+ */
+function gateOnSpace(moduleId: string, node: SchemaNode): SchemaNode {
+  return {
+    type: '$if',
+    props: {
+      condition: { $in: [moduleId, { $store: 'spaceStore.enabledModules' }] },
+      then: node,
+    },
+  };
+}
+
 /**
  * The `modules.<id>.*` namespace handed to the renderer's stores bag.
  *
@@ -92,6 +113,7 @@ export const moduleRegistry = {
     for (const [index, slot] of (definition.slots ?? []).entries()) {
       slotRegistry.register({
         ...slot,
+        node: gateOnSpace(definition.id, slot.node),
         // Namespaced, and indexed so one module can contribute more than one piece of chrome.
         id: `${definition.id}:${index}`,
       });
diff --git a/packages/app-framework/src/shared/schemas/shell/Settings.schema.ts b/packages/app-framework/src/shared/schemas/shell/Settings.schema.ts
index 474b2949..82560da4 100644
--- a/packages/app-framework/src/shared/schemas/shell/Settings.schema.ts
+++ b/packages/app-framework/src/shared/schemas/shell/Settings.schema.ts
@@ -519,6 +519,84 @@ export const settingsTemplate: TemplateSchema = {
           ],
         },
 
+        // Modules — which feature modules this space has turned on.
+        // Only offered inside a space: enablement is per-space, so there is nothing to decide from
+        // the launcher.
+        {
+          type: '$if',
+          props: {
+            condition: { $store: 'adamStore.currentPerspective' },
+            then: {
+              type: 'Column',
+              props: { gap: '300' },
+              children: [
+                {
+                  type: 'Row',
+                  props: { gap: '200', ay: 'center' },
+                  children: [
+                    { type: 'we-icon', props: { name: 'puzzle-piece', size: '20px' } },
+                    { type: 'we-text', props: { variant: 'heading-sm' }, children: ['Modules'] },
+                  ],
+                },
+                {
+                  type: 'we-text',
+                  props: { variant: 'footnote', color: 'neutral-400' },
+                  children: ['Feature modules available in this space.'],
+                },
+                {
+                  type: '$each',
+                  props: { items: { $store: 'spaceStore.moduleSettings' }, as: 'mod' },
+                  children: [
+                    {
+                      type: 'Row',
+                      props: {
+                        ay: 'center',
+                        ax: 'between',
+                        gap: '300',
+                        p: '300',
+                        bg: 'neutral-0',
+                        r: '300',
+                        border: '1px solid neutral-200',
+                      },
+                      children: [
+                        {
+                          type: 'Row',
+                          props: { gap: '300', ay: 'center' },
+                          children: [
+                            { type: 'we-icon', props: { name: '$mod.icon', size: '20px' } },
+                            {
+                              type: 'Column',
+                              props: { gap: '100' },
+                              children: [
+                                { type: 'we-text', props: { variant: 'label' }, children: ['$mod.name'] },
+                                {
+                                  type: 'we-text',
+                                  props: { variant: 'footnote', color: 'neutral-400' },
+                                  children: ['$mod.description'],
+                                },
+                              ],
+                            },
+                          ],
+                        },
+                        {
+                          type: 'we-switch',
+                          props: {
+                            checked: '$mod.enabled',
+                            onChange: {
+                              $action: 'spaceStore.setModuleEnabled',
+                              args: ['$mod.id', '$event.detail'],
+                            },
+                          },
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+          },
+        },
+
         // Shared Spaces
         {
           type: 'Column',
diff --git a/packages/models/src/entities/Space.ts b/packages/models/src/entities/Space.ts
index d353f1ec..347ffcf2 100644
--- a/packages/models/src/entities/Space.ts
+++ b/packages/models/src/entities/Space.ts
@@ -39,6 +39,20 @@ export class Space extends WeNode {
   @Property({ through: 'we://default_theme_id' })
   defaultThemeId: string = '';
 
+  /**
+   * Which feature modules this community has turned on, as a JSON array of module ids.
+   *
+   * **Empty means "not decided", not "none".** A space created before this field existed, or by an
+   * agent who never opened the setting, must keep rendering the chrome it always had — so an unset
+   * value falls back to the modules the deployment's seed activated. Treating empty as "none" would
+   * silently strip existing spaces of every module the moment this shipped.
+   *
+   * A JSON string rather than a relation because the values are ids from the seed, not entities in
+   * the perspective — the same shape `AgentSettings.perspectiveOrder` uses for an ordered id list.
+   */
+  @Property({ through: 'we://enabled_modules' })
+  enabledModules: string = '';
+
   @HasOne(() => LocationBlock, { through: 'we://location' })
   location?: LocationBlock;
 }

From a903e45983e244eea922f57437c1c18d12853e66 Mon Sep 17 00:00:00 2001
From: jhweir <james@weco.io>
Date: Sat, 1 Aug 2026 17:33:36 +0100
Subject: [PATCH 06/12] feat(app-framework): activate the call module from the
 seed
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bundled alongside globe and notes, and declared in `we-seed.json`. Takes nothing
from the host — like notes, and more surprisingly, since live video looked
certain to need a framework component until `we-video` grew a `stream` property.

Tests cover the host side: that the module registers and docks, that it declares
the capabilities a user should think twice about, that it constructs without any
ports at all and degrades to a message rather than throwing, and that the
per-space gate wraps module chrome while leaving core chrome alone.

The notes test needed unwrapping for the gate — a consequence worth pinning,
since every module's registered node is now one `$if` deeper than the module
wrote it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 packages/app-framework/package.json           |  17 +--
 .../src/shared/registries/bundledModules.ts   |   4 +
 .../app-framework/tests/callModule.test.ts    | 128 ++++++++++++++++++
 .../tests/moduleRegistry.test.ts              |   2 +-
 .../app-framework/tests/notesModule.test.ts   |   9 +-
 we-seed.json                                  |   3 +-
 6 files changed, 152 insertions(+), 11 deletions(-)
 create mode 100644 packages/app-framework/tests/callModule.test.ts

diff --git a/packages/app-framework/package.json b/packages/app-framework/package.json
index 0a90ac9f..8bba0601 100644
--- a/packages/app-framework/package.json
+++ b/packages/app-framework/package.json
@@ -34,27 +34,28 @@
     }
   },
   "dependencies": {
+    "@coasys/ad4m": "0.11.0",
+    "@solidjs/router": "^0.15.3",
     "@we/ai-context": "workspace:*",
+    "@we/block-shared": "workspace:*",
+    "@we/block-solid": "workspace:*",
     "@we/components": "workspace:*",
     "@we/design-types": "workspace:*",
     "@we/design-utils": "workspace:*",
-    "@we/primitives": "workspace:*",
     "@we/models": "workspace:*",
+    "@we/module-call": "workspace:*",
+    "@we/module-globe": "workspace:*",
+    "@we/module-notes": "workspace:*",
+    "@we/primitives": "workspace:*",
     "@we/schema-shared": "workspace:*",
     "@we/schema-solid": "workspace:*",
     "@we/themes": "workspace:*",
     "@we/tokens": "workspace:*",
     "@we/widgets": "workspace:*",
-    "@we/block-shared": "workspace:*",
-    "@we/block-solid": "workspace:*",
-    "@coasys/ad4m": "0.11.0",
-    "@solidjs/router": "^0.15.3",
     "gsap": "^3.13.0",
     "solid-js": "^1.9.5",
     "three": "^0.176.0",
-    "zod": "^4.1.11",
-    "@we/module-globe": "workspace:*",
-    "@we/module-notes": "workspace:*"
+    "zod": "^4.1.11"
   },
   "devDependencies": {
     "@types/node": "^22.10.2",
diff --git a/packages/app-framework/src/shared/registries/bundledModules.ts b/packages/app-framework/src/shared/registries/bundledModules.ts
index df7d5f81..22b240a6 100644
--- a/packages/app-framework/src/shared/registries/bundledModules.ts
+++ b/packages/app-framework/src/shared/registries/bundledModules.ts
@@ -9,6 +9,7 @@
  *
  * Adding a module here plus an id in `we-seed.json` is the whole install story for now.
  */
+import { callModule } from '@we/module-call';
 import { createGlobeModule } from '@we/module-globe';
 import { notesModule } from '@we/module-notes';
 import type { ModuleDefinition, ModuleStoreDeps } from '@we/schema-shared';
@@ -35,6 +36,9 @@ export const bundledModules: Record<string, BundledModuleFactory> = {
   // Takes nothing from the host: every piece of its UI is a schema fragment, so it imports no
   // framework at all.
   notes: () => notesModule,
+  // Nor does the call module, which is the more surprising of the two — live video needs `srcObject`
+  // assigned imperatively, but that belongs to the `we-video` primitive, so the module stays data.
+  call: () => callModule,
 };
 
 export interface ModuleActivation {
diff --git a/packages/app-framework/tests/callModule.test.ts b/packages/app-framework/tests/callModule.test.ts
new file mode 100644
index 00000000..188afe16
--- /dev/null
+++ b/packages/app-framework/tests/callModule.test.ts
@@ -0,0 +1,128 @@
+/**
+ * The call module's contributions, and the per-space gate now wrapping every module's chrome.
+ *
+ * The mesh and the media controller are tested in `@we/module-call` itself, against a fake
+ * `RTCPeerConnection` and the in-memory bus. What is checked here is the *host* side: that the module
+ * registers, that its chrome is gated on the space's enabled set, and that it declares the coupling
+ * it actually has.
+ */
+import { callModule } from '@we/module-call';
+import { checkModuleCompatibility } from '@we/schema-shared';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { moduleRegistry, moduleStores } from '../src/shared/registries/moduleRegistry';
+import { registerCoreSlots, slotRegistry } from '../src/shared/registries/slotRegistry';
+
+const host = { backend: 'ad4m', framework: 'solid' };
+const storeDeps = {
+  signal: <T>(initial: T): [() => T, (next: T) => void] => {
+    let value = initial;
+    return [() => value, (next: T) => (value = next)];
+  },
+  effect: (fn: () => void) => fn(),
+};
+
+beforeEach(() => {
+  for (const entry of slotRegistry.ordered()) slotRegistry.remove(entry.id);
+  for (const { definition } of moduleRegistry.all()) moduleRegistry.unregister(definition.id);
+  registerCoreSlots();
+});
+
+describe('call module — declared coupling', () => {
+  it('declares neither a backend nor a framework', () => {
+    // The point of the module. Signalling goes through the ephemeral port, so any backend
+    // implementing one will do; every piece of UI is a fragment, so any renderer will do. The
+    // imperative part — binding a MediaStream to a <video> — lives in the `we-video` primitive.
+    expect(callModule.backends).toBeUndefined();
+    expect(callModule.frameworks).toBeUndefined();
+    expect(callModule.components).toBeUndefined();
+  });
+
+  it('runs on a host with a different backend and framework', () => {
+    expect(checkModuleCompatibility(callModule, { backend: 'nextgraph', framework: 'react' })).toEqual({
+      compatible: true,
+      problems: [],
+    });
+  });
+
+  it('declares the capabilities a user should think twice about', () => {
+    // Declared, never enforced — they exist to be shown at install. A call module is the clearest
+    // case for why that matters.
+    expect(callModule.capabilities).toContain('microphone');
+    expect(callModule.capabilities).toContain('camera');
+    expect(callModule.capabilities).toContain('screen-share');
+  });
+
+  it('owns no durable entities', () => {
+    // A call is entirely ephemeral: membership is a presence activity that expires on TTL, and
+    // signalling is transport. Nothing is worth writing down, so nothing is.
+    expect(callModule.models).toBeUndefined();
+  });
+});
+
+describe('call module — contributions', () => {
+  it('registers a store and docks its chrome at the bottom', () => {
+    const result = moduleRegistry.register(callModule, host, storeDeps);
+    expect(result.registered).toBe(true);
+
+    expect(moduleStores.call).toBeDefined();
+    expect(slotRegistry.get('call:0')?.anchor).toBe('dock-bottom');
+  });
+
+  it('exposes a launcher a template can place on any node', () => {
+    moduleRegistry.register(callModule, host, storeDeps);
+    // Anchored calls need a per-node trigger, and only a template knows what a node is.
+    expect(moduleRegistry.schemas()['call.anchoredCallButton']).toBeDefined();
+    expect(moduleRegistry.schemas()['call.startCallButton']).toBeDefined();
+  });
+
+  it('degrades to a problem message rather than throwing without any ports', () => {
+    // `ModuleStoreDeps` past `signal` is all optional, so a host with no transport must still be
+    // able to construct the store — the module simply cannot do anything.
+    moduleRegistry.register(callModule, host, { signal: storeDeps.signal });
+    const store = moduleStores.call as { active: () => boolean; joinSpaceCall: () => void };
+
+    expect(store.active()).toBe(false);
+    expect(() => store.joinSpaceCall()).not.toThrow();
+  });
+});
+
+describe('per-space module gate', () => {
+  it('wraps module chrome in a condition on the space enabled set', () => {
+    moduleRegistry.register(callModule, host, storeDeps);
+    const node = slotRegistry.get('call:0')?.node as {
+      type?: string;
+      props?: { condition?: unknown; then?: unknown };
+    };
+
+    expect(node.type).toBe('$if');
+    expect(node.props?.condition).toEqual({ $in: ['call', { $store: 'spaceStore.enabledModules' }] });
+    // The module's own node survives underneath, so gating composes with whatever visibility rules
+    // the module already had rather than replacing them.
+    expect(node.props?.then).toBeDefined();
+  });
+
+  it('leaves core chrome ungated', () => {
+    // The sidebar and boot screen are the host's, not a module's — a space cannot switch them off.
+    //
+    // Asserted on the *condition*, not on the node type: the sidebar's own node is already an `$if`
+    // (it hides itself on the boot screen), so "is it an $if" would pass whether or not it had been
+    // gated. Every core slot is checked, because the gate is applied per registration and a partial
+    // application is exactly the bug worth catching.
+    for (const id of ['core:sidebar', 'core:bootScreen', 'core:templateEditor']) {
+      const node = slotRegistry.get(id)?.node as { props?: { condition?: unknown } };
+      expect(node.props?.condition).not.toEqual({ $in: [expect.anything(), { $store: 'spaceStore.enabledModules' }] });
+    }
+  });
+
+  it('removes every gated slot on unregister', () => {
+    moduleRegistry.register(callModule, host, storeDeps);
+    expect(slotRegistry.get('call:0')).toBeDefined();
+
+    moduleRegistry.unregister('call');
+
+    expect(slotRegistry.get('call:0')).toBeUndefined();
+    expect(slotRegistry.get('call:1')).toBeUndefined();
+    expect(slotRegistry.get('call:2')).toBeUndefined();
+  });
+});
diff --git a/packages/app-framework/tests/moduleRegistry.test.ts b/packages/app-framework/tests/moduleRegistry.test.ts
index a2240f29..4788f19e 100644
--- a/packages/app-framework/tests/moduleRegistry.test.ts
+++ b/packages/app-framework/tests/moduleRegistry.test.ts
@@ -19,7 +19,7 @@ const host = { backend: 'ad4m', framework: 'solid' };
  * module store requires Solid to exist.
  */
 const storeDeps = {
-  signal: <T,>(initial: T): [() => T, (next: T) => void] => {
+  signal: <T>(initial: T): [() => T, (next: T) => void] => {
     let value = initial;
     return [() => value, (next: T) => (value = next)];
   },
diff --git a/packages/app-framework/tests/notesModule.test.ts b/packages/app-framework/tests/notesModule.test.ts
index 967c2417..c148ebe5 100644
--- a/packages/app-framework/tests/notesModule.test.ts
+++ b/packages/app-framework/tests/notesModule.test.ts
@@ -21,6 +21,12 @@ const storeDeps = {
   },
 };
 
+/** Strip the `$if` on `spaceStore.enabledModules` that `moduleRegistry` wraps module chrome in. */
+function unwrapGate(node: unknown): unknown {
+  const n = node as { type?: string; props?: { then?: unknown } } | undefined;
+  return n?.type === '$if' && n.props?.then ? n.props.then : node;
+}
+
 beforeEach(() => {
   for (const entry of slotRegistry.ordered()) slotRegistry.remove(entry.id);
   for (const { definition } of moduleRegistry.all()) moduleRegistry.unregister(definition.id);
@@ -65,7 +71,8 @@ describe('notes module — contributions', () => {
     // placed — so it registered successfully and was invisible. Chrome gated on state nothing can
     // change is not chrome, so the slot renders a launcher in the closed case.
     moduleRegistry.register(notesModule, host, storeDeps);
-    const node = slotRegistry.get('notes:0')?.node as { props?: { else?: unknown } };
+    // Unwrap the per-space enablement gate the registry wraps every module slot in.
+    const node = unwrapGate(slotRegistry.get('notes:0')?.node) as { props?: { else?: unknown } };
     expect(node.props?.else).toBeDefined();
   });
 
diff --git a/we-seed.json b/we-seed.json
index 62f487e7..f9dd39b7 100644
--- a/we-seed.json
+++ b/we-seed.json
@@ -10,7 +10,8 @@
   },
   "modules": [
     "globe",
-    "notes"
+    "notes",
+    "call"
   ],
   "ad4m": {
     "dataPath": "~/.we-native-app",

From b7bbbed88d6d2a63eacdc6755f69eb682ecb7f27 Mon Sep 17 00:00:00 2001
From: jhweir <james@weco.io>
Date: Sat, 1 Aug 2026 19:31:40 +0100
Subject: [PATCH 07/12] fix(modules): give the call bar a way to start the
 first call
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The bar rendered only when somebody was already in a call, so nobody could ever
be the first — the same shape as the notes module shipping installed, registered
and invisible one PR ago. The reasoning that produced it was even the same:
starting a call felt like it belonged on a deliberate affordance rather than
persistent furniture, which is true right up until no affordance exists.

Gated on a new `canCall`, which is false in a personal space. There is no
neighbourhood there and so nobody to call; offering the button and explaining the
failure afterwards would be worse than not offering it, because the answer never
changes.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../app-framework/tests/callModule.test.ts    | 11 ++++++
 packages/modules/call/src/index.ts            | 37 ++++++++++++++++++-
 packages/modules/call/src/store.ts            |  9 +++++
 3 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/packages/app-framework/tests/callModule.test.ts b/packages/app-framework/tests/callModule.test.ts
index 188afe16..13c99ae9 100644
--- a/packages/app-framework/tests/callModule.test.ts
+++ b/packages/app-framework/tests/callModule.test.ts
@@ -69,6 +69,17 @@ describe('call module — contributions', () => {
     expect(slotRegistry.get('call:0')?.anchor).toBe('dock-bottom');
   });
 
+  it('is reachable without any template cooperating', () => {
+    // The same bug the notes module shipped one PR ago: chrome that only renders once somebody is
+    // already using the feature leaves no way to start using it. The bar's not-in-a-call branch has
+    // to offer "Start call" when nobody is in one, or the first participant can never exist.
+    moduleRegistry.register(callModule, host, storeDeps);
+    const gate = slotRegistry.get('call:0')?.node as { props?: { then?: unknown } };
+    const bar = gate.props?.then as { props?: { else?: { props?: { else?: unknown } } } };
+
+    expect(bar.props?.else?.props?.else).toBeDefined();
+  });
+
   it('exposes a launcher a template can place on any node', () => {
     moduleRegistry.register(callModule, host, storeDeps);
     // Anchored calls need a per-node trigger, and only a template knows what a node is.
diff --git a/packages/modules/call/src/index.ts b/packages/modules/call/src/index.ts
index 9cabfae2..6dc8c3e0 100644
--- a/packages/modules/call/src/index.ts
+++ b/packages/modules/call/src/index.ts
@@ -168,12 +168,45 @@ const bar: SchemaNode = {
     condition: { $store: 'modules.call.active' },
 
     // ── Not in a call ────────────────────────────────────────────────────────
-    // Only shown when somebody else is, so an empty space carries no chrome at all. Starting a call
-    // from nothing belongs on a deliberate affordance, not on persistent furniture.
+    // Two sub-cases: somebody else is in a call (join it), or nobody is (start one).
+    //
+    // The second case was very nearly omitted, on the reasoning that starting a call belongs on a
+    // deliberate affordance rather than persistent furniture — which shipped the notes module
+    // installed, registered and invisible one PR ago. `startCallButton` is exported for templates
+    // that want the trigger somewhere of their own choosing; this is the fallback that guarantees
+    // the module is usable without one.
     else: {
       type: '$if',
       props: {
         condition: { $count: { items: { $store: 'modules.call.ongoing' } } },
+
+        // Nobody in a call yet. Only offered in a shared space — a personal space has no
+        // neighbourhood, so there is nobody to call and the answer would never change.
+        else: {
+          type: '$if',
+          props: {
+            condition: { $store: 'modules.call.canCall' },
+            then: {
+              type: 'we-button',
+              props: {
+                variant: 'secondary',
+                size: 'sm',
+                position: 'fixed',
+                bottom: '400',
+                right: '400',
+                r: 'pill',
+                shadow: 'lg',
+                zIndex: 'sticky',
+                onClick: { $action: 'modules.call.joinSpaceCall' },
+              },
+              children: [
+                { type: 'we-icon', props: { name: 'phone-call' } },
+                { type: 'we-text', props: { variant: 'label' }, children: ['Start call'] },
+              ],
+            },
+          },
+        },
+
         then: {
           type: 'Row',
           props: {
diff --git a/packages/modules/call/src/store.ts b/packages/modules/call/src/store.ts
index 5f1725b1..f98e17ac 100644
--- a/packages/modules/call/src/store.ts
+++ b/packages/modules/call/src/store.ts
@@ -254,6 +254,15 @@ export function createCallStore(deps: CallStoreDeps) {
     problem,
     /** True when this agent is in a call — the call bar's visibility condition. */
     active: () => callId() !== null,
+
+    /**
+     * True where a call could actually be started.
+     *
+     * A personal space has no neighbourhood and therefore no transport, so there is nobody to call.
+     * Offering the button anyway and explaining the failure afterwards is worse than not offering it:
+     * the answer never changes, so it is not a failure, it is a property of the space.
+     */
+    canCall: () => (datasetUri?.() ?? null) !== null,
     /** Everyone in the space-wide call, whether or not this agent has joined — so the bar can offer
      *  "3 in a call · Join" rather than only appearing once you are already in one. */
     ongoing: () => {

From 1cfd193643167d6d6e30db86db91b9eb8b9e6af3 Mon Sep 17 00:00:00 2001
From: jhweir <james@weco.io>
Date: Sat, 1 Aug 2026 19:34:06 +0100
Subject: [PATCH 08/12] chore(ai-context): regenerate for we-video's stream and
 playsinline

Ran after the primitives CEM rebuild, which is what surfaces new props into the
component registry docs. The earlier regeneration in this branch ran before it,
so it only captured the store additions.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .cursor/rules/we-schema.mdc              |  2 +-
 .github/copilot-instructions.md          |  2 +-
 CLAUDE.md                                |  2 +-
 packages/ai-context/context.json         | 11 +++++++++++
 packages/ai-context/src/contextData.ts   |  2 ++
 packages/ai-context/src/schemaContext.ts |  2 +-
 6 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/.cursor/rules/we-schema.mdc b/.cursor/rules/we-schema.mdc
index 66512742..f1e8b2d9 100644
--- a/.cursor/rules/we-schema.mdc
+++ b/.cursor/rules/we-schema.mdc
@@ -703,7 +703,7 @@ when `relative` is enabled.
 - we-tooltip (LayoutElement)
   Props: open: boolean = false, title: string = '', placement: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' = 'top', tooltipEl: HTMLElement, triggerEl: HTMLElement, arrowEl: HTMLElement
 - we-video (LayoutVisualElement)
-  Props: src: string = '', poster?: string | undefined, controls: boolean = false, preload: 'none' | 'metadata' | 'auto' = 'metadata', autoplay: boolean = false, loop: boolean = false, muted: boolean = false
+  Props: src: string = '', poster?: string | undefined, controls: boolean = false, preload: 'none' | 'metadata' | 'auto' = 'metadata', autoplay: boolean = false, loop: boolean = false, muted: boolean = false, playsinline: boolean = false, stream?: MediaStream | null | undefined
 
 @we/components:
 - AudioDisplay
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index 66512742..f1e8b2d9 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -703,7 +703,7 @@ when `relative` is enabled.
 - we-tooltip (LayoutElement)
   Props: open: boolean = false, title: string = '', placement: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' = 'top', tooltipEl: HTMLElement, triggerEl: HTMLElement, arrowEl: HTMLElement
 - we-video (LayoutVisualElement)
-  Props: src: string = '', poster?: string | undefined, controls: boolean = false, preload: 'none' | 'metadata' | 'auto' = 'metadata', autoplay: boolean = false, loop: boolean = false, muted: boolean = false
+  Props: src: string = '', poster?: string | undefined, controls: boolean = false, preload: 'none' | 'metadata' | 'auto' = 'metadata', autoplay: boolean = false, loop: boolean = false, muted: boolean = false, playsinline: boolean = false, stream?: MediaStream | null | undefined
 
 @we/components:
 - AudioDisplay
diff --git a/CLAUDE.md b/CLAUDE.md
index 66512742..f1e8b2d9 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -703,7 +703,7 @@ when `relative` is enabled.
 - we-tooltip (LayoutElement)
   Props: open: boolean = false, title: string = '', placement: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' = 'top', tooltipEl: HTMLElement, triggerEl: HTMLElement, arrowEl: HTMLElement
 - we-video (LayoutVisualElement)
-  Props: src: string = '', poster?: string | undefined, controls: boolean = false, preload: 'none' | 'metadata' | 'auto' = 'metadata', autoplay: boolean = false, loop: boolean = false, muted: boolean = false
+  Props: src: string = '', poster?: string | undefined, controls: boolean = false, preload: 'none' | 'metadata' | 'auto' = 'metadata', autoplay: boolean = false, loop: boolean = false, muted: boolean = false, playsinline: boolean = false, stream?: MediaStream | null | undefined
 
 @we/components:
 - AudioDisplay
diff --git a/packages/ai-context/context.json b/packages/ai-context/context.json
index 91a17a1a..678ed54c 100644
--- a/packages/ai-context/context.json
+++ b/packages/ai-context/context.json
@@ -1739,6 +1739,17 @@
           "type": "boolean",
           "optional": false,
           "default": "false"
+        },
+        {
+          "name": "playsinline",
+          "type": "boolean",
+          "optional": false,
+          "default": "false"
+        },
+        {
+          "name": "stream",
+          "type": "MediaStream | null | undefined",
+          "optional": true
         }
       ]
     }
diff --git a/packages/ai-context/src/contextData.ts b/packages/ai-context/src/contextData.ts
index b7cb3029..8e2d5c4e 100644
--- a/packages/ai-context/src/contextData.ts
+++ b/packages/ai-context/src/contextData.ts
@@ -647,6 +647,8 @@ export const contextData: ContextData = {
         { name: 'autoplay', type: 'boolean', optional: false, default: 'false' },
         { name: 'loop', type: 'boolean', optional: false, default: 'false' },
         { name: 'muted', type: 'boolean', optional: false, default: 'false' },
+        { name: 'playsinline', type: 'boolean', optional: false, default: 'false' },
+        { name: 'stream', type: 'MediaStream | null | undefined', optional: true },
       ],
     },
   ],
diff --git a/packages/ai-context/src/schemaContext.ts b/packages/ai-context/src/schemaContext.ts
index 1bf0235f..d44a1612 100644
--- a/packages/ai-context/src/schemaContext.ts
+++ b/packages/ai-context/src/schemaContext.ts
@@ -1,4 +1,4 @@
 // AUTO-GENERATED by packages/ai-context/src/generate.ts
 // Do not edit manually. Run: pnpm --filter @we/ai-context generate-context
 
-export const schemaContext = "## Schema Structure\n\nA schema is a tree of nodes. Each node can have:\n- type: The component to render (string, e.g. \"we-button\", \"Column\")\n- props: An object of props for the component\n- children: An array of child nodes (or strings for text), or token objects like { $store: '...' } or { $concat: [...] }.\n- slots: Named slots for advanced composition (optional)\n- slot: The name of the slot this node should be rendered into (optional)\n- routes: For routing components, an array of nestable route objects (optional)\n- styles: Raw CSS escape hatch — Record<string, string | number> applied as inline styles on a **wrapper div** that surrounds the component. Use only for CSS that must live on a wrapper: filter, clip-path, backdrop-filter, mix-blend-mode. When present the wrapper participates in layout (no display:contents), so CSS effects apply correctly. **Important:** this is NOT the same as props.styles. If you want to apply custom CSS to a Column, Row, or Grid's own element (e.g. a background image), put it in props.styles instead — node-level styles go on a wrapper div around the component and will be hidden behind the component's own background.\n\nExample node:\n{\n  \"type\": \"we-button\",\n  \"props\": {\n    \"onClick\": { \"$action\": \"routeStore.navigate\", \"args\": [\"/home\"] }\n  },\n  \"children\": [\n    { \"type\": \"we-icon\", \"props\": { \"name\": \"house\" } },\n    { \"type\": \"we-text\", \"props\": { \"size\": \"600\" }, \"children\": [\"Home\"] }\n  ]\n}\n\n## Prop-level Dynamic Logic & Expressions\n\nSpecial tokens in props enable dynamic, reactive, or computed behavior.\n\nStore reference:\n{ \"$store\": \"storeName.property.path\" }\nResolves a value from a named store, supporting nested paths.\n\nAction/event:\n{ \"$action\": \"storeName.method\", \"args\": [...] }\nCalls a method on a store, optionally with arguments (which can themselves be tokens).\nSupports async lifecycle callbacks — fired after the store method's Promise resolves/rejects:\n  onSuccess: [...actions]  — fired on resolve; '$result' (and '$result.<path>') in args refers to the resolved value\n  onError: [...actions]    — fired on reject; '$result.message' etc. refers to the error object\n  onFinally: [...actions]  — fired regardless of outcome\nNon-promise (synchronous) methods are unaffected — lifecycle keys are ignored.\nExample — close modal after async submission:\n{ \"$action\": \"adamStore.createSpace\", \"args\": [...], \"onSuccess\": [{ \"$setLocal\": \"modalOpen\", \"value\": false }] }\nExample — navigate to newly created item:\n{ \"$action\": \"adamStore.createSpace\", \"args\": [...], \"onSuccess\": [{ \"$setLocal\": \"modalOpen\", \"value\": false }, { \"$action\": \"routeStore.navigate\", \"args\": [{ \"$concat\": [\"/space/\", \"$result.uuid\"] }] }] }\n\nModel mutations via $action (use these for creating/updating/deleting model instances):\nmodel.create — creates a model instance in the current perspective (default) or a specified one:\n{ \"$action\": \"model.create\", \"args\": [\"ModelName\", { \"field\": \"value\" }, { \"perspective\": \"adamStore.rootPerspective\" }] }\nThe third argument is an options object. Omit it to use the current space perspective.\n\nmodel.update — updates a model instance:\n{ \"$action\": \"model.update\", \"args\": [\"ModelName\", \"$item.id\", { \"field\": \"newValue\" }] }\nTo target a non-current perspective: { \"$action\": \"model.update\", \"args\": [\"ModelName\", \"$item.id\", { \"field\": \"value\" }, { \"perspective\": \"adamStore.rootPerspective\" }] }\n\nmodel.delete — deletes a model instance:\n{ \"$action\": \"model.delete\", \"args\": [\"ModelName\", \"$item.id\"] }\n\nUse perspective: 'adamStore.rootPerspective' for we-root models (AgentSettings, ChatSession, etc.).\nUse the default (no perspective) for space-scoped models (Space, Signal, etc.).\n\nConditional logic:\n{ \"$if\": { \"condition\": ..., \"then\": ..., \"else\": ... } }\nEvaluates condition; if truthy, returns then, else returns else.\n\nMap/iterate:\n{ \"$map\": { \"items\": { \"$store\": \"templateStore.templates\" }, \"select\": { ... } } }\nIterates over an array, mapping each item to a new object using the select mapping.\n\nPick:\n{ \"$pick\": { \"from\": { \"$store\": \"userStore.profile\" }, \"props\": [\"name\", \"email\"] } }\nPicks specific properties from an object.\n\nConcat (string building):\n{ \"$concat\": [\"part1\", \"$context.value\", \"part2\"] }\nJoins multiple parts into a single string.\n\nContext references:\nStrings starting with \"$\" followed by a context key resolve to context values.\nExample: \"$space.name\" resolves to the name property of the space context variable.\nDot paths supported: \"$item.profile.avatar\".\n\nEquality / inequality checks:\n{ \"$eq\": [a, b] } — strict equality\n{ \"$ne\": [a, b] } — strict inequality\n\nNumeric comparisons:\n{ \"$lt\": [a, b] } — a < b (less than)\n{ \"$gt\": [a, b] } — a > b (greater than)\nExample: { \"$gt\": [{ \"$count\": { \"items\": { \"$store\": \"listStore.items\" } } }, 0] }\n\nSet membership:\n{ \"$in\": [value, array] } — true if array contains value (false if second operand is not an array)\nExample: { \"$in\": [{ \"$store\": \"spaceStore.uuid\" }, { \"$store\": \"adamStore.systemPerspectiveUuids\" }] }\nExample: { \"$in\": [\"$item.role\", [\"admin\", \"moderator\"]] }\n\nBoolean logic:\n{ \"$and\": [a, b, ...] } — all truthy\n{ \"$or\": [a, b, ...] } — any truthy\n{ \"$not\": a } — negation\n\nArray operators:\n{ \"$filter\": { \"items\": <array>, \"where\": { \"field\": \"value\", ... } } }\nFilters an array to items where all where conditions match. Mirrors the $query where operator set:\n\n  { \"field\": \"value\" }                                   — strict equality\n  { \"field\": { \"not\": \"value\" } }                        — inequality; array form excludes multiple values\n  { \"field\": { \"contains\": \"text\" } }                    — case-insensitive substring match (strings only)\n  { \"field\": { \"exists\": true } }                        — non-null / non-undefined presence check\n  { \"field\": { \"exists\": false } }                       — null or undefined check\n\nWhere values (including those inside operator objects) are resolved through the prop system,\nso $store, $local, and context refs like { \"$local\": \"searchText\" } all work.\n\n$query-only logical combinators (OR / AND / NOT) — NOT supported in $filter, only in $query's where:\n  { \"OR\": [ { \"field\": \"value\" }, { \"field2\": \"value2\" } ] }   — matches if ANY branch matches\n  { \"AND\": [ { ... }, { ... } ] }                              — matches if ALL branches match (sibling keys at the\n                                                                  same level are already implicitly ANDed — use AND\n                                                                  to group a set of conditions alongside an OR/NOT)\n  { \"NOT\": { \"field\": \"value\" } }                              — matches if the branch does NOT match\nBranches are full where-clause objects (can contain multiple fields, and can nest OR/AND/NOT inside each other).\nSibling keys alongside OR/AND/NOT at the same level are implicitly ANDed with it.\nExample — case-insensitive search across two fields:\n{\n  \"$query\": {\n    \"entity\": \"Space\",\n    \"where\": {\n      \"OR\": [\n        { \"name\": { \"contains\": { \"$local\": \"searchText\" } } },\n        { \"description\": { \"contains\": { \"$local\": \"searchText\" } } }\n      ]\n    }\n  }\n}\nNote: using OR/AND/NOT disables the SPARQL-level sort/pagination pushdown (see count-projection and\nrelation-property ordering below) — those orderings silently stop working if combined with OR/AND/NOT in the\nsame query's where clause, because the fallback sort runs before the projection/relation data is attached.\n\nExamples:\n{ \"$filter\": { \"items\": { \"$store\": \"spaceStore.members\" }, \"where\": { \"role\": \"admin\" } } }\n{ \"$filter\": { \"items\": { \"$store\": \"spaceStore.members\" }, \"where\": { \"location\": { \"exists\": true }, \"handle\": { \"contains\": { \"$local\": \"searchText\" } } } } }\n\n{ \"$count\": { \"items\": <array> } }\nReturns the length of an array.\nExample: { \"badge\": { \"$count\": { \"items\": { \"$store\": \"notificationStore.unread\" } } } }\n\n{ \"$find\": { \"items\": <array>, \"where\"?: { ... }, \"select\"?: \"fieldName\" } }\nFinds the first matching item. where is optional (returns first item if omitted). select plucks a single field.\nExample: { \"$find\": { \"items\": { \"$store\": \"spaceStore.members\" }, \"where\": { \"id\": \"$item.creatorId\" }, \"select\": \"name\" } }\n\n{ \"$plural\": { \"count\": <number>, \"one\": \"singular\", \"other\": \"plural\" } }\nReturns \"one\" when count === 1, otherwise \"other\". Use in children arrays for count-noun labels.\ncount is resolved through the prop system — any numeric expression ($count, $store, context ref) works.\nExample: { \"$plural\": { \"count\": { \"$count\": { \"items\": { \"$store\": \"spaceStore.members\" } } }, \"one\": \"Member\", \"other\": \"Members\" } }\nCompose with we-number for a full \"N Members\" display:\n  we-number (value: { \"$count\": ... }, shorten: true) + we-text (children: [{ \"$plural\": { \"count\": { \"$count\": ... }, \"one\": \"Member\", \"other\": \"Members\" } }])\n\nQuery (data retrieval):\n{ \"$query\": { \"entity\": \"ModelName\", \"where\": { \"field\": \"value\" }, \"limit\": 10, \"order\": { \"field\": \"asc\" } } }\nQueries the current dataset for entity instances. Always returns an array.\nOptions: entity (required), where, order, limit, offset, include, scope, dataset, subscribe.\nsubscribe defaults to true — reactive live updates. Set subscribe: false to do a one-time fetch.\nBy default $query targets the current dataset ($currentDataset). Use dataset to query a different dataset —\nrequired when reading entities from an external app (e.g. Flux) that is open as a WE space:\n{ \"$query\": { \"entity\": \"Channel\", \"dataset\": \"$currentDataset\" } }\n\nBackend-neutral identity & dataset refs — prefer these over adamStore.* store paths inside $query and conditions:\n- $currentDataset — the currently active dataset (an AD4M perspective, in the AD4M backend). Use as a dataset value.\n- $me — the current agent's identity object. Use $me.did for their DID (ownership checks, author filters, e.g. { \"$eq\": [\"$post.author\", \"$me.did\"] }); $me.handle / $me.avatar for profile fields once loaded.\n\nEager-loading relations with include (most common relational pattern):\ninclude hydrates related model instances in the same query — no extra fetches needed.\nRelation names come from the HasMany relations listed for each model in externalModels.\n\nSimple include — hydrate all related instances:\n{ \"$query\": { \"entity\": \"Channel\", \"include\": { \"conversations\": true } } }\nEach item in the result will have a conversations array of hydrated Conversation objects.\n\nSub-query include — filter, sort, or limit the related records:\n{ \"$query\": { \"entity\": \"Channel\", \"include\": { \"conversations\": { \"order\": { \"createdAt\": \"desc\" }, \"limit\": 10 } } } }\n\nNested include — hydrate relations of relations:\n{ \"$query\": { \"entity\": \"Channel\", \"include\": { \"conversations\": { \"include\": { \"messages\": true } } } } }\nNesting can go as deep as needed. Each level adds one batched fetch (not N+1).\n\nCount projection — add a derived numeric field:\n{ \"$query\": { \"entity\": \"Post\", \"include\": { \"$likeCount\": { \"from\": \"likes\", \"count\": true } } } }\nThe $-prefixed key becomes a new field on each result item (e.g. item.$likeCount = 42).\n\nSorting by a count projection — order can reference a $-prefixed count key directly, sorting by the aggregate:\n{\n  \"$query\": {\n    \"entity\": \"Post\",\n    \"limit\": 20,\n    \"order\": { \"$likeCount\": \"desc\" },\n    \"include\": { \"$likeCount\": { \"from\": \"likes\", \"count\": true } }\n  }\n}\nRequirements: only a single order key is supported when it targets a projection (mixing it with a second sort key falls back\nto a plain property sort), and the query must also specify limit or offset — without one the count isn't computed yet at\nsort time and the order silently has no effect. Always pair count-projection ordering with a limit.\nCombine with $if for a user-togglable sort field (e.g. \"newest\" vs \"most liked\"):\n{\n  \"order\": {\n    \"$if\": {\n      \"condition\": { \"$eq\": [{ \"$local\": \"sortField\" }, \"likes\"] },\n      \"then\": { \"$likeCount\": { \"$local\": \"sortDirection\" } },\n      \"else\": { \"createdAt\": { \"$local\": \"sortDirection\" } }\n    }\n  }\n}\n\nSorting by a related model property — order can reference a dotted \"relation.property\" path for a HasOne/HasMany\nrelation declared on the model, sorting by a scalar property on the related instance:\n{\n  \"$query\": {\n    \"entity\": \"Space\",\n    \"limit\": 20,\n    \"order\": { \"location.country\": \"asc\" },\n    \"include\": { \"location\": true }\n  }\n}\nSame requirements as count-projection ordering above: only a single order key, and pair with limit/offset — without\none the relation data isn't attached yet at sort time and the order silently has no effect. include isn't required\nfor the sort itself (the relation is resolved from the model's declared shape), but you'll usually want it anyway to\nread the field in the UI (e.g. \"$space.location.country\").\nCombine with $if the same way as count-projection ordering to let the user toggle between sort fields.\n\nSingle-item projection — add a derived field that resolves to one instance or null:\n{ \"$query\": { \"entity\": \"Post\", \"include\": { \"$myLike\": { \"from\": \"likes\", \"where\": { \"author\": \"$me.did\" }, \"limit\": 1 } } } }\nWith limit: 1 the field unwraps to T | null instead of an array.\n\ninclude only works with typed relations — ones where the target model class is known.\nFor WE models this is always the case. For external models, check the externalModels listing:\nrelations marked \"→ ModelName\" are typed (safe for include); relations marked \"parent query only\"\nare untyped and will crash at runtime if used with include — use a scope drill-down instead.\n\nRelational queries — fetch a parent record's children (drill-down navigation):\n{ \"$query\": { \"entity\": \"Conversation\", \"scope\": { \"anchor\": \"Channel\", \"via\": \"conversations\", \"anchorId\": \"$channel.id\" } } }\nscope.anchor is the parent entity type; scope.via is its relation whose targets are this query's entity (the\nHasMany relation listed for that entity in externalModels); scope.anchorId is the parent record's id (typically\nfrom a $each context variable or a route segment). The adapter resolves the relation to a backend handle —\nno protocol details live in the template.\nUse this pattern when navigating to a detail route and loading only that record's children.\nFor external-app datasets, always add dataset: \"$currentDataset\".\n\nLocal state (scoped ephemeral state):\nDeclare on any node: \"$localState\": { \"name\": { \"type\": \"string\", \"initial\": \"\" } }\nSupported types: \"string\", \"boolean\", \"number\", \"function\", \"object\".\nRead:  { \"$local\": \"name\" } — returns the signal value (reactive).\n       { \"$local\": \"name.nested.path\" } — dot-notation reads into object-typed fields (reactive).\nWrite: { \"$setLocal\": \"name\", \"from\": \"$event.target.value\" } — event handler that updates the signal.\n       { \"$setLocal\": \"name\", \"value\": \"literal\" } — sets to a literal value (string, number, boolean, null, object).\n       { \"$setLocal\": \"name\", \"merge\": { \"field\": \"$event.detail\" } } — shallow-merges fields into an object-typed signal. Values are resolved as event paths (e.g. \"$event.detail\") or passed as literals. Use for partial updates to object state.\nToggle: { \"$toggleLocal\": \"fieldName\" } — toggles a boolean field (equivalent to setting it to !current). Use for show/hide, open/close, expand/collapse patterns.\nCall function: { \"$callLocal\": \"fieldName\" } — event handler that calls the function stored in a function-typed local field.\n  Used when a child component needs to trigger a callback passed in via $localState.\n  The field must be declared as type: 'function' and set via $setLocal.\n  Example: { \"onClick\": { \"$callLocal\": \"onConfirm\" } }\nState is created on mount and destroyed on unmount. Nested $localState declarations merge, inner fields shadow outer.\n$local values can be used in $action args: { \"$action\": \"store.method\", \"args\": [{ \"$local\": \"name\" }] }\n\nObject-typed local state (consolidating related scalar fields):\nWhen several related fields share a common condition on their initial values (e.g. all null/empty when a store value is absent), prefer a single \"object\" field seeded from the store, then read sub-fields with dot-notation and write with merge.\nExample — location object (replaces 5 separate scalar fields with $if guards):\n  \"$localState\": { \"location\": { \"type\": \"object\", \"initial\": { \"$store\": \"spaceStore.currentSpace.location\" } } }\n  Read:  { \"$local\": \"location.latitude\" }, { \"$local\": \"location.city\" }\n  Write (picker confirm): { \"$setLocal\": \"location\", \"from\": \"$event.detail\" }\n  Write (partial edit):   { \"$setLocal\": \"location\", \"merge\": { \"city\": \"$event.detail\" } }\n  Write (clear):          { \"$setLocal\": \"location\", \"value\": null }\n  Condition (has location): { \"$local\": \"location\" }\nUse \"object\" whenever you would otherwise write 3+ related scalar fields each needing $if on their initial value.\n\nHoisted query state ($queries):\nDeclare on any node to run reactive subscriptions at the node root and expose results in $local.\nSolves two problems: avoids N duplicate subscriptions inside $each loops, and makes query results available for $if conditions.\n\"$queries\": { \"signalTypes\": { \"entity\": \"SignalType\", \"subscribe\": true } }\nResults are injected into $local as read-only reactive arrays, accessible via { \"$local\": \"signalTypes\" }.\nQuery options are identical to $each's $query prop (entity, where, order, limit, include, dataset, subscribe).\n$queries and $localState share the same $local namespace — avoid duplicate names across both.\n$setLocal will warn and no-op on $queries entries (they are read-only).\nUse with $count + $gt for conditional visibility:\n{ \"condition\": { \"$gt\": [{ \"$count\": { \"items\": { \"$local\": \"signalTypes\" } } }, 0] } }\nExample:\n{\n  \"$queries\": { \"signalTypes\": { \"entity\": \"SignalType\", \"subscribe\": true } },\n  \"type\": \"Column\",\n  \"children\": [\n    {\n      \"type\": \"$each\",\n      \"props\": { \"items\": { \"$local\": \"signalTypes\" }, \"as\": \"sig\" },\n      \"children\": [...]\n    }\n  ]\n}\n\nBoolean toggle pattern (show/hide comments, expand/collapse sections, etc.):\n{\n  \"$localState\": { \"showComments\": { \"type\": \"boolean\", \"initial\": false } },\n  \"children\": [\n    {\n      \"type\": \"we-button\",\n      \"props\": {\n        \"variant\": \"ghost\",\n        \"onClick\": { \"$toggleLocal\": \"showComments\" }\n      },\n      \"children\": [{ \"type\": \"we-icon\", \"props\": { \"name\": \"chat-circle\" } }]\n    },\n    {\n      \"type\": \"$if\",\n      \"props\": {\n        \"condition\": { \"$local\": \"showComments\" },\n        \"then\": { \"type\": \"Column\", \"children\": [{ \"type\": \"we-text\", \"children\": [\"Comments visible\"] }] }\n      }\n    }\n  ]\n}\n\nForm validation (extends $localState):\nDeclare validation rules on fields:\n\"$localState\": {\n  \"email\": {\n    \"type\": \"string\",\n    \"initial\": \"\",\n    \"validate\": [\n      { \"rule\": \"required\", \"message\": \"Email is required\" },\n      { \"rule\": \"pattern\", \"value\": \"^[^@]+@[^@]+$\", \"message\": \"Invalid email\" }\n    ]\n  }\n}\n\nBuilt-in rules: required, minLength (value: N), maxLength (value: N), min (value: N), max (value: N), pattern (value: regex string), match (field: otherFieldName). All accept optional \"message\" override.\n\nRead tokens:\n{ \"$error\": \"fieldName\" } — first validation error message (only shown after field is touched), or \"\".\n{ \"$valid\": \"fieldName\" } — true if all rules pass (regardless of touched state).\n{ \"$touched\": \"fieldName\" } — true after the field has been blurred/touched.\n{ \"$formValid\": \"$scope\" } — true if ALL validated fields in the current $localState scope pass.\n\nAction tokens:\n{ \"$touch\": \"fieldName\" } — marks a single field as touched (use in onBlur).\n{ \"$touch\": \"$all\" } — marks all fields in scope as touched (use before submit guard).\n{ \"$resetLocal\": \"$scope\" } — resets all fields to initial values and clears touched state.\n\nHandler arrays (compose multiple actions on one event):\n{ \"onClick\": [{ \"$touch\": \"$all\" }, { \"$if\": { \"condition\": { \"$formValid\": \"$scope\" }, \"then\": { \"$action\": \"store.submit\", \"onSuccess\": [{ \"$setLocal\": \"modalOpen\", \"value\": false }] } } }] }\nArray entries execute sequentially. Non-function entries (e.g. $if with false condition) are skipped.\nPrefer onSuccess over a bare $setLocal before the $action — the bare form closes the modal immediately (losing the loading spinner); onSuccess waits for the Promise to resolve.\n\nTypical form pattern:\n{\n  \"$localState\": { \"name\": { \"type\": \"string\", \"initial\": \"\", \"validate\": [{ \"rule\": \"required\" }] } },\n  \"children\": [\n    {\n      \"type\": \"we-form-field\",\n      \"props\": { \"label\": \"Name\", \"error\": { \"$error\": \"name\" } },\n      \"children\": [{\n        \"type\": \"we-input\",\n        \"props\": {\n          \"value\": { \"$local\": \"name\" },\n          \"onInput\": { \"$setLocal\": \"name\", \"from\": \"$event.detail\" },\n          \"onBlur\": { \"$touch\": \"name\" }\n        }\n      }]\n    },\n    {\n      \"type\": \"we-button\",\n      \"props\": {\n        \"disabled\": { \"$not\": { \"$formValid\": \"$scope\" } },\n        \"onClick\": [\n          { \"$touch\": \"$all\" },\n          { \"$if\": { \"condition\": { \"$formValid\": \"$scope\" }, \"then\": { \"$action\": \"store.save\", \"args\": [{ \"$local\": \"name\" }], \"onSuccess\": [{ \"$setLocal\": \"submitDone\", \"value\": true }] } } }\n        ]\n      },\n      \"children\": [\"Submit\"]\n    }\n  ]\n}\n\n## Block-level Dynamic Structures\n\nBlock-level structures use \"type\" starting with \"$\" for dynamic rendering of schema nodes.\n\nEach loop:\n{ \"type\": \"$each\", \"props\": { \"items\": { \"$store\": \"storeName.arrayProperty\" }, \"as\": \"itemName\" }, \"children\": [ ... ] }\nRenders children once for each item. The \"as\" name becomes a context key. Defaults to \"item\" — omit \"as\" unless you need a different name.\n\nConditional rendering:\n{ \"type\": \"$if\", \"props\": { \"condition\": ..., \"then\": { ... }, \"else\": { ... } } }\nRenders \"then\" node if condition is truthy, else renders \"else\" node.\nSupports enterTransition / exitTransition for CSS animations when the node mounts/unmounts.\nTransitionConfig = TransitionEffect | TransitionEffect[]\nTransitionEffect = { type: 'fade'|'slide'|'scale'|'pulse', duration?: ms, easing?: string, delay?: ms, direction?: 'left'|'right'|'up'|'down', distance?: string }\nfade controls opacity only; slide/scale control transform only. pulse is a persistent looping animation (not a one-shot transition) — starts once entered, stops on exit; direction/distance don't apply (default duration 1200ms, easing 'ease-in-out'). Compose fade/slide/scale together in an array; pulse is typically used alone.\nExample: enterTransition: [{ type: 'fade', duration: 300 }, { type: 'slide', direction: 'up', distance: '40px', duration: 400 }]\nExample (pulse): enterTransition: { type: 'pulse', duration: 1500 }\n\nViewport / mount animation (child always in DOM):\n{ \"type\": \"$animate\", \"props\": { \"scrollReveal\"?: true | number, \"scrollLeave\"?: true | number, \"scrollPast\"?: string, \"enterTransition\"?: TransitionConfig, \"exitTransition\"?: TransitionConfig }, \"children\": [<node>] }\nThe child is always mounted. fade/slide/scale are CSS transitions (opacity/transform); pulse is a real CSS @keyframes loop — use this for scroll-reveal effects.\nDo NOT use $animate when the child should be absent from the DOM. Use $if for conditional DOM presence.\nscrollReveal: true fires enterTransition when the element enters the viewport.\nscrollReveal: -100 fires 100px before the element would enter (negative = earlier reveal).\nscrollLeave fires exitTransition when the element leaves the viewport.\nscrollPast: \"element-id\" observes a sentinel element (by DOM id) instead of the $animate element itself.\n  enterTransition fires when the sentinel leaves the viewport (user scrolled past it).\n  exitTransition fires when the sentinel returns (user scrolled back up).\n  Use this for sticky headers: place a zero-height sentinel div at the bottom of the non-sticky header section,\n  then wrap the mini-profile in $animate with scrollPast pointing to that sentinel's id.\n  scrollPast is mutually exclusive with scrollReveal/scrollLeave.\nWithout any scroll trigger, the enterTransition runs once on mount.\nOnly one child node is supported.\nExample (scroll-reveal):\n{\n  \"type\": \"$animate\",\n  \"props\": {\n    \"scrollReveal\": -100,\n    \"enterTransition\": [\n      { \"type\": \"fade\", \"duration\": 600, \"easing\": \"ease-in-out\" },\n      { \"type\": \"slide\", \"direction\": \"left\", \"distance\": \"200px\", \"duration\": 1000, \"easing\": \"ease-in-out\" }\n    ]\n  },\n  \"children\": [{ \"type\": \"SomeCard\", \"children\": [] }]\n}\nExample (sticky header mini-profile):\nPlace a sentinel at the bottom of the header, reference it in the sticky nav:\n{ \"type\": \"div\", \"props\": { \"id\": \"header-sentinel\" }, \"styles\": { \"height\": \"0px\", \"pointerEvents\": \"none\" } }\n{\n  \"type\": \"$animate\",\n  \"props\": {\n    \"scrollPast\": \"header-sentinel\",\n    \"enterTransition\": { \"type\": \"fade\", \"duration\": 250 },\n    \"exitTransition\": { \"type\": \"fade\", \"duration\": 200 }\n  },\n  \"children\": [{ \"type\": \"Row\", \"props\": { \"ay\": \"center\", \"gap\": \"300\" }, \"children\": [\n    { \"type\": \"we-avatar\", \"props\": { \"image\": \"$space.avatar\", \"size\": \"sm\" } },\n    { \"type\": \"we-text\", \"props\": { \"fontWeight\": \"600\" }, \"children\": [\"$space.name\"] }\n  ]}]\n}\n\nSingle model item (load one record, render children with it in context):\n{\n  \"type\": \"$single\",\n  \"props\": {\n    \"item\": { \"$query\": { \"entity\": \"ModelName\", \"params\": { ... }, \"subscribe\": true } },\n    \"as\": \"profile\"   // context key for children — default: 'item'\n  },\n  \"children\": [{ \"type\": \"we-text\", \"children\": [\"$profile.username\"] }]\n}\nRenders nothing until a matching record is found. Like $each but for a single result.\nquery options (entity, params, include, dataset, subscribe) work identically to $query.\n\nRoute outlet:\n{ \"type\": \"$routes\" }\nIndicates where nested routes should render within a layout.\n\n---\n\n## Component Registry\n\nMost @we/primitives also accept Design System Props (see next section for details and exceptions).\n\n@we/primitives:\n- we-alert (DesignSystemElement)\n  Props: variant: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' = 'primary', dismissible: boolean = false\n- we-audio (LayoutVisualElement)\n  Props: src: string = '', controls: boolean = false, preload: 'none' | 'metadata' | 'auto' = 'metadata', autoplay: boolean = false, loop: boolean = false, muted: boolean = false\n- we-avatar (LayoutVisualElement)\n  Props: image: string = '', hash: string = '', selected: boolean = false, online: boolean = false, initials: string = '', icon: string = '', size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | '{css-length}' | undefined, clickable: boolean = false\n- we-badge (DesignSystemElement)\n  Props: variant: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' = 'neutral', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-blockquote (DesignSystemElement)\n- we-button (DesignSystemElement)\n  Props: variant: 'primary' | 'secondary' | 'ghost' | 'danger' | 'outline' = 'primary', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md', text?: string | undefined, href?: string | undefined, disabled: boolean = false, loading: boolean = false, gradient: boolean = false, square: boolean = false\n- we-checkbox (DesignSystemElement)\n  Props: checked: boolean = false, disabled: boolean = false, name: string = '', value: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-code (DesignSystemElement)\n  Props: block: boolean = false\n- we-color-picker (DesignSystemElement)\n  Props: value: string = '#000000', disabled: boolean = false, name: string = '', palette: array = [ '#000000', '#434343', '#666666', '#999999', '#b7b7b7', '#cccccc', '#d9d9d9', '#ffffff', '#980000', '#ff0000', '#ff9900', '#ffff00', '#00ff00', '#00ffff', '#4a86e8', '#0000ff', '#9900ff', '#ff00ff', '#e6b8af', '#f4cccc', '#fce5cd', '#fff2cc', '#d9ead3', '#d0e0e3', '#c9daf8', '#cfe2f3', '#d9d2e9', '#ead1dc', ]\n- we-date-picker (DesignSystemElement)\n  Props: value: string = '', placeholder: string = 'Select date', disabled: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-divider (LayoutElement)\n  Props: orientation: 'horizontal' | 'vertical' = 'horizontal', variant: 'solid' | 'dashed' | 'dotted' = 'solid', color?: string | undefined, thickness?: string | undefined\n- we-drawer (OverlayElement)\n  Props: hideclosebutton: boolean = false, close: () => void\n- we-file-upload (DesignSystemElement)\n  Props: accept: string = '', multiple: boolean = false, disabled: boolean = false, name: string = ''\n- we-form-field (DesignSystemElement)\n  Props: label: string = '', description: string = '', error: string = '', required: boolean = false, size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-html (DesignSystemElement) — Renders a raw HTML string safely via DOMPurify sanitization.\n\nUse this instead of `we-text` when content is stored as HTML (e.g. rich-text\neditor output such as Flux messages). The `content` prop accepts any HTML\nfragment; it is sanitized before rendering so XSS payloads are stripped.\n  Props: content: string = ''\n- we-icon (LayoutElement)\n  Props: name: string = '', color: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '{css-length}' = '', weight: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone' = 'regular', gradient: string = ''\n- we-icon-picker (DesignSystemElement)\n  Props: value: string = '', disabled: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md', placeholder: string = 'Pick icon'\n- we-iframe (LayoutVisualElement)\n  Props: src: string = '', title: string = 'Embedded content', allow: string = '', sandbox?: string | undefined\n- we-image (LayoutVisualElement)\n  Props: src: string | File = '', alt: string = '', fit: '' | 'cover' | 'contain' | 'fill' | 'none' | 'scale-down' = '', loading: 'eager' | 'lazy' = 'eager', gradient: string = '', objectPosition: string = ''\n- we-input (DesignSystemElement)\n  Props: value: string = '', max: string = '', min: string = '', maxlength: unknown = Infinity, minlength: number = 0, pattern: string = '', name: string = '', step: string = '', placeholder: string = '', autocomplete: string = '', autofocus: boolean = false, disabled: boolean = false, required: boolean = false, readonly: boolean = false, type: string = 'text', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-link (DesignSystemElement)\n  Props: href: string = '', target: string = '', rel: string = '', download: string = '', disabled: boolean = false\n- we-location-picker (DesignSystemElement)\n  Props: latitude?: number | undefined, longitude?: number | undefined, placeholder: string = 'Set location…', disabled: boolean = false, reverseGeocode: boolean = true\n- we-markdown (DesignSystemElement)\n  Props: content: string = '', markdownGap: string = ''\n- we-menu (DesignSystemElement) — Vertical list container for menu items inside a popover.\nNot a standalone selector — wrap in we-popover for dropdown behavior.\n- we-menu-group (LayoutElement)\n  Props: collapsible: boolean = false, open: boolean = false, title: string = ''\n- we-menu-item (DesignSystemElement) — Single actionable item inside a we-menu.\nSupports selected, active, and danger states.\n  Props: selected: boolean = false, active: boolean = false, variant: 'default' | 'danger' = 'default', label: unknown, value: unknown\n- we-modal (OverlayElement)\n  Props: hideclosebutton: boolean = false, close: () => void\n- we-number (DesignSystemElement) — Displays a number, optionally abbreviated (1 200 → 1.2K, 1 500 000 → 1.5M).\n  Props: value: number = 0, shorten: boolean = false, precision: number = 1, locale: string = 'en', formattedValue: string\n- we-number-input (DesignSystemElement)\n  Props: value: number = 0, min: number = -Infinity, max: unknown = Infinity, step: number = 1, disabled: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-pagination (DesignSystemElement)\n  Props: page: number = 1, total: number = 1, siblings: number = 1, size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-popover (LayoutElement) — Low-level floating panel anchored to a trigger element.\nUse DropdownMenu component for dropdown menus.\n  Props: open: boolean = false, placement: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' = 'bottom', popoverElement: HTMLElement, triggerElement: HTMLElement\n- we-progress-bar (DesignSystemElement)\n  Props: value: number = 0, max: number = 100, variant: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' = 'primary', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-radio (DesignSystemElement)\n  Props: checked: boolean = false, disabled: boolean = false, name: string = '', value: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-scroll-area (DesignSystemElement)\n  Props: maxHeight: string = '', maxWidth: string = ''\n- we-select (DesignSystemElement)\n  Props: options: SelectOption[] = [], value: string = '', placeholder: string = '', disabled: boolean = false, searchable: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-select (DesignSystemElement) — Pick a single value from a list of options. Custom-rendered dropdown.\nUse for form fields, settings, filters. Set searchable=true for type-to-filter.\n  Props: options: SelectOption[] = [], value: string = '', placeholder: string = '', disabled: boolean = false, searchable: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-skeleton (DesignSystemElement)\n  Props: width: string = '100%', height: string = '20px', animation: 'pulse' | 'wave' = 'pulse'\n- we-slider (DesignSystemElement)\n  Props: value: number = 0, min: number = 0, max: number = 100, step: number = 1, disabled: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md', showValue: boolean = false\n- we-sortable (DesignSystemElement) — Drag-to-reorder container primitive.\n\nUsage: wrap a list of elements that each have a `data-we-id` attribute.\nFires a `we-reorder` CustomEvent<string[]> on drop with the new ordered\narray of IDs.\n  Props: direction: 'vertical' | 'horizontal' = 'vertical', gap: string = ''\n- we-spinner (LayoutElement)\n  Props: size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | (string & {}) = 'md', color: string = ''\n- we-switch (DesignSystemElement)\n  Props: checked: boolean = false, disabled: boolean = false, name: string = '', value: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md', labelOff: string = '', labelOn: string = ''\n- we-tab (DesignSystemElement)\n  Props: key: string = '', selected: boolean = false, label?: string | undefined, selectedProps?: Partial<DesignSystemProps> | undefined\n- we-tabs (DesignSystemElement)\n  Props: selectedKey: string = ''\n- we-tag (DesignSystemElement)\n  Props: variant: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' = 'neutral', dismissible: boolean = false\n- we-text (DesignSystemElement)\n  Props: text?: string | undefined, variant: '' | 'body' | 'label' | 'footnote' | 'subheading' | 'ingress' | 'heading-sm' | 'heading-md' | 'heading-lg' | 'heading-xl' = '', tag: 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'small' | 'b' | 'i' | 'label' | 'div' = 'span', inline: boolean = false, uppercase: boolean = false, italic: boolean = false, truncate: boolean = false, gradient: string = ''\n- we-textarea (DesignSystemElement)\n  Props: value: string = '', name: string = '', placeholder: string = '', rows: number = 3, maxlength: unknown = Infinity, minlength: number = 0, disabled: boolean = false, required: boolean = false, readonly: boolean = false, resize: 'none' | 'vertical' | 'horizontal' | 'both' = 'vertical', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-timestamp (DesignSystemElement) — Displays a formatted or relative timestamp that self-updates each minute\nwhen `relative` is enabled.\n  Props: value: string = '', relative: boolean = false, locale: string = 'en', dateStyle: Intl.DateTimeFormatOptions['dateStyle'] | null = null, timeStyle: Intl.DateTimeFormatOptions['timeStyle'] | null = null, weekday: Intl.DateTimeFormatOptions['weekday'] | null = null, year: Intl.DateTimeFormatOptions['year'] | null = null, month: Intl.DateTimeFormatOptions['month'] | null = null, day: Intl.DateTimeFormatOptions['day'] | null = null, hour: Intl.DateTimeFormatOptions['hour'] | null = null, minute: Intl.DateTimeFormatOptions['minute'] | null = null, second: Intl.DateTimeFormatOptions['second'] | null = null, timeZone: string | null = null, hourCycle: Intl.DateTimeFormatOptions['hourCycle'] | null = null, formattedTime: string\n- we-tooltip (LayoutElement)\n  Props: open: boolean = false, title: string = '', placement: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' = 'top', tooltipEl: HTMLElement, triggerEl: HTMLElement, arrowEl: HTMLElement\n- we-video (LayoutVisualElement)\n  Props: src: string = '', poster?: string | undefined, controls: boolean = false, preload: 'none' | 'metadata' | 'auto' = 'metadata', autoplay: boolean = false, loop: boolean = false, muted: boolean = false\n\n@we/components:\n- AudioDisplay\n  Props: title: string | undefined, artist: string | undefined, audioUrl: string | undefined, duration: number | undefined, albumArt: string | undefined\n- AudioInput\n  Props: title: string | undefined, artist: string | undefined, audioUrl: string | FileData | undefined, duration: number | undefined, albumArt: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- BlockComposer (DesignSystemElement)\n  Props: editorState?: any, perspective?: PerspectiveProxy | null, onSave?: ((json: SerializedBlockNode) => void), onReady?: ((api: { save: () => void; }) => void)\n- BlockPlaceholder\n  Props: icon: string, label: string, hint?: string, accept?: string, onFileDrop?: ((file: File) => void), onClick?: (() => void)\n- BlockRenderer (DesignSystemElement)\n  Props: editorState?: any, perspective?: PerspectiveProxy | null, rootClass?: string\n- BlockToolbar\n  Props: placement?: BlockToolbarPlacement, children: JSX.Element, stopPropagation?: boolean\n- CalloutDisplay\n  Props: text: string | undefined, variant: string | undefined, icon: string | undefined\n- CalloutInput\n  Props: text: string | undefined, variant: string | undefined, icon: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- CodeDisplay\n  Props: code: string | undefined, language: string | undefined, title: string | undefined\n- CodeInput\n  Props: code: string | undefined, language: string | undefined, title: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- CollectionDisplay\n  Props: layout?: string, columnCount?: number, gap?: string, childEditorState?: any\n- CollectionInput\n  Props: nodeKey: string, layout?: string, columnCount?: number, gap?: string, childEditorState?: any, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- DividerDisplay\n  Props: style: \"solid\" | \"dashed\" | \"dotted\" | undefined\n- DividerInput\n  Props: style: DividerVariant | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- EmbedDisplay\n  Props: url: string | undefined, target: string | undefined, targetType: string | undefined, displayMode: string | undefined\n- EmbedInput\n  Props: url: string | undefined, target: string | undefined, targetType: string | undefined, displayMode: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- EventDisplay\n  Props: title: string | undefined, description: string | undefined, startDate: string | undefined, endDate: string | undefined, location: string | undefined, allDay: boolean | undefined\n- EventInput\n  Props: title: string | undefined, description: string | undefined, startDate: string | undefined, endDate: string | undefined, location: string | undefined, allDay: boolean | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- FileDisplay\n  Props: title: string | undefined, name: string | undefined, url: string | undefined, mimeType: string | undefined, size: number | undefined\n- FileInput\n  Props: title: string | undefined, name: string | undefined, url: string | FileData | undefined, mimeType: string | undefined, size: number | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- ImageDisplay\n  Props: src: string | undefined, altText: string | undefined, width: number | undefined, height: number | undefined\n- ImageInput\n  Props: src: string | FileData | undefined, altText: string | undefined, width: number | undefined, height: number | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- LinkDisplay\n  Props: url: string | undefined, title: string | undefined, description: string | undefined, thumbnail: string | undefined\n- LinkInput\n  Props: url: string | undefined, title: string | undefined, description: string | undefined, thumbnail: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- LocationDisplay\n  Props: name: string | undefined, latitude: number | undefined, longitude: number | undefined, address: string | undefined\n- LocationInput\n  Props: name: string | undefined, latitude: number | undefined, longitude: number | undefined, address: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- TagDisplay\n  Props: name: string | undefined, color: string | undefined\n- TagInput\n  Props: name: string | undefined, color: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- TaskDisplay\n  Props: title: string | undefined, description: string | undefined, status: string | undefined, priority: string | undefined, dueDate: string | undefined, assignee: string | undefined\n- TaskInput\n  Props: title: string | undefined, description: string | undefined, status: string | undefined, priority: string | undefined, dueDate: string | undefined, assignee: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- VideoDisplay\n  Props: url: string | undefined, title: string | undefined, thumbnail: string | undefined, provider: string | undefined, width: number | undefined\n- VideoInput\n  Props: url: string | undefined, title: string | undefined, thumbnail: string | undefined, provider: string | undefined, width: number | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- Accordion\n  Props: children?: JSX.Element, renderContent?: ((item: AccordionItem, index: number) => JSX.Element), onChange?: ((openItems: string[]) => void), items?: AccordionItem[], multiple?: boolean, styles?: Record<string, string | number>\n- AudioVisualiser\n  Props: src: string | undefined, bars?: number, height?: number, color?: string, activeColor?: string\n- AvatarStack\n  Props: avatars: AvatarInfo[], max?: number, size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxs\" | \"xxl\", overlap?: number, ring?: string, styles?: Record<string, string | number>\n- Breadcrumbs\n  Props: onNavigate?: ((item: BreadcrumbItem, index: number) => void), items?: BreadcrumbItem[], separator?: string, styles?: Record<string, string | number>\n- Calendar\n  Props: onSelect?: ((date: string) => void), value?: string, events?: CalendarEvent[], styles?: Record<string, string | number>\n- Card (DesignSystemElement)\n- CircleButton\n  Props: label: string, icon?: string, image?: string, onClick?: (() => void), class?: string, styles?: Record<string, string | number>\n- CodeEditor\n  Props: code: string, language?: CodeEditorLanguage, readOnly?: boolean, onChange?: ((code: string) => void), onSave?: ((code: string) => void), styles?: Record<string, string | number>\n- CollapsedContent\n  Props: collapsed: boolean, onExpandClick?: (() => void), showToggle?: boolean, icon?: string, maxHeight?: string, fadeColor?: string, children?: JSX.Element, class?: string, styles?: Record<string, string | number>\n- Column (DesignSystemElement)\n- Combobox (DesignSystemElement)\n  Props: options: string[] | ComboboxOption[], value?: string, placeholder?: string, size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\", onChange?: ((value: string) => void)\n- DropdownMenu — Flexible dropdown menu for actions, toggles, and grouped items. Use for context menus, settings panels, layer controls, and command palettes.\n  Props: class?: string, styles?: Record<string, string | number>, placement?: Placement, triggerLabel?: string, triggerIcon?: string, items: SolidDropdownMenuEntry[]\n- EditableImage (DesignSystemElement)\n  Props: src?: string, alt?: string, fit?: \"fill\" | \"cover\" | \"contain\" | \"none\" | \"scale-down\", placeholderIcon?: string, onImageChange?: ((file: File) => void), class?: string, aspect?: number, maxSize?: number\n- FlipCard\n  Props: front?: JSX.Element, back?: JSX.Element, width?: string, height?: string, flipOnHover?: boolean, flipDuration?: string, wobbleOnHover?: boolean, wobbleDegree?: number, class?: string, styles?: Record<string, string | number>\n- Grid (DesignSystemElement)\n  Props: template?: string, columns?: number, minChildWidth?: string\n- IconLabelButton\n  Props: icon: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<string>, label: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<string>, selected?: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<boolean | undefined>, iconWeight?: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<IconWeight | undefined>, onClick?: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<(() => void) | undefined>, class?: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<string | undefined>, styles?: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<Record<string, string | number> | undefined>\n- ImageCrop\n  Props: src: string, fileName?: string, aspect?: number, maxSize?: number, outputType?: string, quality?: number, onReady?: ((ref: ImageCropRef) => void)\n- ImageLightbox\n  Props: srcs: string[], initialIndex: number, onClose: () => void\n- List\n  Props: children?: JSX.Element, renderItem?: ((item: ListItem, index: number) => JSX.Element), items?: ListItem[], ordered?: boolean, gap?: string, styles?: Record<string, string | number>\n- PostCard\n  Props: creator?: { name: string; avatar: string; }, title: string, text: string, class?: string, styles?: Record<string, string | number>\n- RerenderLog\n  Props: location: string\n- Row (DesignSystemElement)\n- Search (DesignSystemElement)\n  Props: placeholder?: string, value?: string, onSearch?: ((value: string) => void), debounce?: number\n- Select (DesignSystemElement)\n  Props: options: SelectOption[], value?: string, placeholder?: string, searchable?: boolean, label?: string, size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\", onChange?: ((value: string) => void)\n- SignalControl\n  Props: signalType: SignalTypeData, signals?: SignalData[], myDid?: string, onSignal?: ((value: number) => void), disabled?: boolean, preview?: boolean, class?: string, styles?: Record<string, string | number>\n- Stepper\n  Props: onStepClick?: ((index: number) => void), steps?: StepperStep[], activeStep?: number, orientation?: \"horizontal\" | \"vertical\", styles?: Record<string, string | number>\n- Table\n  Props: renderCell?: ((row: Record<string, unknown>, column: TableColumn, index: number) => JSX.Element), columns: TableColumn[], rows: Record<string, unknown>[], striped?: boolean, bordered?: boolean, styles?: Record<string, string | number>\n- Timeline\n  Props: children?: JSX.Element, renderItem?: ((item: TimelineItem, index: number) => JSX.Element), items?: TimelineItem[], styles?: Record<string, string | number>\n- ToastContainer\n  Props: position?: \"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\" | \"top-center\" | \"bottom-center\", styles?: Record<string, string | number>\n\n@we/widgets:\n- CesiumGlobe — 3D globe widget using CesiumJS with a modular layer system.\nLayers are injected via factory functions (planet surface + background).\nRegistered in the app's component registry, which injects `layerFactoryRegistry` — so templates\nplace it as `CesiumGlobe` without supplying that prop themselves.\n  Props: ionAccessToken?: string, planetLayers?: LayerConfig<unknown>[], backgroundLayers?: LayerConfig<unknown>[], layerFactoryRegistry: Record<string, LayerFactory<any>>\n- CollapsibleSidebar\n  Props: header?: JSX.Element, footer?: JSX.Element, items: CollapsibleSidebarItem[], footerItems?: CollapsibleSidebarItem[], side?: \"left\" | \"right\", position?: \"static\" | \"absolute\" | \"fixed\", zIndex?: number, collapsedWidth?: string, expandedWidth?: string, defaultExpanded?: boolean, expandOnHover?: boolean, transitionDuration?: number, bg?: string, border?: string, padding?: string, gap?: string, centerItems?: boolean, itemColor?: string, itemColorHover?: string, itemColorActive?: string, itemBg?: string, itemBgHover?: string, itemBgActive?: string, itemPadding?: string, itemGap?: string, badgeBg?: string, badgeColor?: string, iconSize?: IconSize, onItemClick?: ((item: CollapsibleSidebarItem) => void), onExpandedChange?: ((expanded: boolean) => void)\n- GraphWidget — 2D force-directed graph visualization using D3-force layout and Canvas rendering.\nDisplays typed nodes (user, space, post) and edges (follows, member-of, etc.)\nwith configurable styling, layout forces, and interaction handlers.\n  Props: data: GraphData, width?: string | number, height?: string | number, nodeStyle?: NodeStyleConfig, edgeStyle?: EdgeStyleConfig, layout?: LayoutConfig, interactions?: InteractionConfig\n- SpaceSidebarWidget\n  Props: name: string, description?: string, class?: string, style?: Record<string, string | number>\n\n---\n\n## Design System Props\n\nMost @we/primitives inherit **all** layers below. Props use design token values — not raw CSS.\n\n### Token Value Reference\n\n| Token Type | Valid Values |\n|---|---|\n| SpaceValue | \"0\", \"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\", \"1000\" (or CSS length e.g. \"16px\") |\n| ColorValue | \"{hue}-{shade}\" where hue = neutral, primary, success, warning, danger and shade = 0, 25, 50, 75, 100, 200–900, 1000. Also \"white\", \"black\". (or CSS color) |\n| RadiusValue | \"0\", \"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\", \"pill\", \"full\" (or CSS length) |\n| ShadowValue | \"sm\", \"md\", \"lg\", \"xl\" |\n| FontSizeValue | \"base\", \"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\", \"1000\" (or CSS length) |\n| FontFamilyValue | \"base\" (or CSS font-family) |\n| LineHeightValue | \"none\", \"tight\", \"snug\", \"normal\", \"relaxed\", \"loose\" (or CSS value) |\n| LetterSpacingValue | \"tighter\", \"tight\", \"normal\", \"wide\", \"wider\", \"widest\" (or CSS value) |\n| FontWeightValue | Named tokens: \"regular\" (400), \"medium\" (500), \"semibold\" (600), \"bold\" (700). Numeric: \"100\"–\"900\". CSS pass-through: \"light\", \"normal\", \"bolder\". |\n\n**Layout-only primitives** — these accept only Layout props (not Visual, Flex, Typography, or State):\nwe-divider, we-icon, we-menu-group, we-popover, we-spinner, we-tooltip\n\n### Layout\n\n| Prop | Type | Description |\n|------|------|-------------|\n| width | string | Element width |\n| height | string | Element height |\n| minWidth | string | Minimum width |\n| minHeight | string | Minimum height |\n| maxWidth | string | Maximum width |\n| maxHeight | string | Maximum height |\n| position | \"relative\" \\| \"absolute\" \\| \"fixed\" \\| \"sticky\" | CSS position |\n| top | string | Top offset |\n| right | string | Right offset |\n| bottom | string | Bottom offset |\n| left | string | Left offset |\n| zIndex | number | Stack order |\n| display | \"flex\" \\| \"block\" \\| \"inline\" \\| \"inline-block\" \\| \"grid\" \\| \"inline-flex\" | Display mode |\n| flex | string | Flex shorthand (e.g. \"1\", \"0 0 auto\", \"none\") — controls grow/shrink/basis |\n| alignSelf | string | Override parent cross-axis alignment for this child |\n| overflow | \"hidden\" \\| \"auto\" | Overflow behavior |\n| m | SpaceValue | Margin (all sides) |\n| mx | SpaceValue | Margin left + right |\n| my | SpaceValue | Margin top + bottom |\n| mt | SpaceValue | Margin top |\n| mr | SpaceValue | Margin right |\n| mb | SpaceValue | Margin bottom |\n| ml | SpaceValue | Margin left |\n\n### Visual\n\n| Prop | Type | Description |\n|------|------|-------------|\n| bg | ColorValue | Background color (token) |\n| bgImage | string | Background image URL — sets background-image, defaults background-size to cover, background-position to center, background-repeat to no-repeat |\n| bgFit | \"cover\" \\| \"contain\" | Background image sizing (default: \"cover\") — only meaningful with bgImage |\n| bgPosition | string | Background image position (default: \"center\", e.g. \"top\", \"50% 20%\") — only meaningful with bgImage |\n| bgImageOpacity | number | Fades bgImage only (0–1), independent of the element's own content/opacity — only meaningful with bgImage |\n| bgImageTint | ColorValue | Color bgImage fades toward as bgImageOpacity decreases (default: the element's own `bg`, or neutral-0) — only meaningful with bgImageOpacity |\n| color | ColorValue | Text/foreground color (token) |\n| opacity | number | Opacity (0–1) |\n| border | string | Border shorthand (e.g. \"1px solid neutral-200\" — color tokens are resolved) |\n| borderColor | ColorValue | Border color (token, e.g. \"neutral-200\", \"primary-500\") |\n| borderTop | string | Top border shorthand (color tokens resolved) |\n| borderRight | string | Right border shorthand (color tokens resolved) |\n| borderBottom | string | Bottom border shorthand (color tokens resolved) |\n| borderLeft | string | Left border shorthand (color tokens resolved) |\n| borderWidth | string | Border width (raw CSS, e.g. \"1px\", \"2px 0\") |\n| shadow | \"sm\" \\| \"md\" \\| \"lg\" \\| \"xl\" | Shadow token |\n| cursor | \"pointer\" \\| \"default\" \\| \"text\" \\| \"not-allowed\" | Cursor style |\n| pointerEvents | \"none\" \\| \"auto\" | Pointer events |\n| transform | string | CSS transform |\n| transition | string | CSS transition |\n| r | RadiusValue | Border radius (all corners) |\n| rt | RadiusValue | Border radius top |\n| rb | RadiusValue | Border radius bottom |\n| rl | RadiusValue | Border radius left |\n| rr | RadiusValue | Border radius right |\n| rtl | RadiusValue | Border radius top-left |\n| rtr | RadiusValue | Border radius top-right |\n| rbr | RadiusValue | Border radius bottom-right |\n| rbl | RadiusValue | Border radius bottom-left |\n\n### Flex (Container)\n\n| Prop | Type | Description |\n|------|------|-------------|\n| direction | \"row\" \\| \"row-reverse\" \\| \"column\" \\| \"column-reverse\" | Flex direction |\n| ax | \"start\" \\| \"center\" \\| \"end\" \\| \"between\" \\| \"around\" \\| \"even\" \\| \"stretch\" | Main-axis alignment |\n| ay | \"start\" \\| \"center\" \\| \"end\" \\| \"between\" \\| \"around\" \\| \"even\" \\| \"stretch\" | Cross-axis alignment |\n| wrap | boolean | Enable flex wrap |\n| gap | SpaceValue | Gap between children (token) |\n| p | SpaceValue | Padding (all sides) |\n| px | SpaceValue | Padding left + right |\n| py | SpaceValue | Padding top + bottom |\n| pt | SpaceValue | Padding top |\n| pr | SpaceValue | Padding right |\n| pb | SpaceValue | Padding bottom |\n| pl | SpaceValue | Padding left |\n\n### Typography\n\n| Prop | Type | Description |\n|------|------|-------------|\n| textAlign | \"left\" \\| \"center\" \\| \"right\" \\| \"justify\" | Text alignment |\n| fontFamily | \"base\" \\| {css-font-family} | Font family token |\n| fontWeight | \"regular\" \\| \"medium\" \\| \"semibold\" \\| \"bold\" (named tokens) or \"100\"–\"900\" (numeric) or \"light\" \\| \"normal\" \\| \"bolder\" (CSS pass-through) | Font weight |\n| fontSize | \"base\" \\| \"100\"–\"1000\" \\| {css-length} | Font size token |\n| lineHeight | \"none\" \\| \"tight\" \\| \"snug\" \\| \"normal\" \\| \"relaxed\" \\| \"loose\" | Line height token |\n| letterSpacing | \"tighter\" \\| \"tight\" \\| \"normal\" \\| \"wide\" \\| \"wider\" \\| \"widest\" | Letter spacing token |\n| textDecoration | \"underline\" \\| \"line-through\" \\| \"overline\" \\| \"none\" | Text decoration |\n| textTransform | \"uppercase\" \\| \"lowercase\" \\| \"capitalize\" \\| \"none\" | Text transform |\n\n**Typography defaults:** fontSize and fontWeight have **no built-in defaults** — omitting them inherits from parent elements (browser default is ~16px / normal weight). Do not set fontSize or fontWeight unless you need a non-default value. For example, `fontSize: '300'` (16px) and `fontWeight: '500'` (normal) are the inherited defaults — omit them.\n\n`we-text` variants (set via the `variant` prop) bundle typography presets. Always pair with a semantic `tag` prop for correct HTML structure:\nbody (300, tag: p/span), label (200 + medium, tag: span), footnote (100, tag: span), subheading (400 + medium, tag: h5/p), ingress (400 + lineHeight 1.6, tag: p), heading-sm (500 + bold, tag: h4), heading-md (600 + bold, tag: h3), heading-lg (700 + bold, tag: h2), heading-xl (800 + bold, tag: h1).\nVariants set size and weight only — color is always inherited or set explicitly. For muted footnote text add `color=\"neutral-400\"` explicitly.\n\n### State\n\n| Prop | Type | Description |\n|------|------|-------------|\n| hoverProps | Partial\\<DesignSystemProps\\> | Styles on :hover |\n| activeProps | Partial\\<DesignSystemProps\\> | Styles on :active |\n| focusProps | Partial\\<DesignSystemProps\\> | Styles on :focus |\n| disabledProps | Partial\\<DesignSystemProps\\> | Styles when disabled |\n\n### Additional\n\n| Prop | Type | Description |\n|------|------|-------------|\n| styles | Record\\<string, string \\| number\\> | Inline CSS applied directly to the component's own element (raw CSS values allowed). For Column, Row, Grid — use this when you need CSS the DS props don't cover. **Do not confuse with node-level styles** (see Schema Structure) which applies to a wrapper div, not the component. |\n| onClick | ActionToken | Event handler (see dynamic logic) |\n\n---\n\n## Design Tokens\n\nUse design tokens for spacing, color, radius, etc. Do not use raw CSS values unless using the styles prop.\n\nanimation.transition: '0', '100', '200', '300', '400', '500'\n\navatarSize: 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'\n\nborder.color: 'base', 'strong'\n\ncolor.base: 'white', 'black'\n\ncolor.config: 'multiplier', 'subtractor', 'saturation', 'neutralSaturation'\n\ncolor.hues: 'neutral', 'primary', 'success', 'warning', 'danger'\n\ncolor.lightness: '0', '25', '50', '75', '100', '200', '300', '400', '500', '600', '700', '800', '900', '1000'\n\ncomponent.scrollbar: 'width', 'backgroundImage', 'background', 'cornerBackground', 'thumbBoxShadow', 'thumbBorderRadius', 'thumbBackground'\n\ncomponentHeight: 'xs', 'sm', 'md', 'lg', 'xl'\n\neffect.depth: '100', '200', '300', '400', '500', 'none'\n\nfont.family: 'base', 'mozilla', 'boldonse'\n\nfont.letterSpacing: 'tighter', 'tight', 'normal', 'wide', 'wider', 'widest'\n\nfont.lineHeight: 'none', 'tight', 'snug', 'normal', 'relaxed', 'loose'\n\nfont.size: '100', '200', '300', '400', '500', '600', '700', '800', '900', '1000', 'base'\n\nfont.weight: '100', '200', '300', '400', '500', '600', '700', '800', '900', 'regular', 'medium', 'semibold', 'bold'\n\nlayout: 'xs', 'sm', 'md', 'lg'\n\nradius: '0', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'pill', 'full'\n\nshadow: 'sm', 'md', 'lg', 'xl'\n\nsize: 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'\n\nspace: '0', '100', '200', '300', '400', '500', '600', '700', '800', '900', '1000'\n\nzIndex: 'dropdown', 'sticky', 'modal', 'popover', 'toast', 'tooltip'\n\n---\n\n## Block & Entity Models\n\nAvailable data models for $query and store data:\n\nAgentSettings extends Ad4mModel:\n  Fields:\n  - currentTemplateId: string = 'default' [we://current_template]\n  - defaultTemplateId: string = 'default' [we://default_template]\n  - currentThemeId: string = 'default' [we://current_theme]\n  - defaultThemeId: string = 'default' [we://default_theme]\n  - claudeApiKey: string [we://claude_api_key]\n  - perspectiveOrder: string [we://perspective_order]\n  - globalSpaceJoined: boolean = false [we://global_space_joined]\n  - globalSpaceUrl: string [we://global_space_url]\n  - useSpaceTemplate: boolean = true [we://use_space_template]\n  Relations:\n  - installedTemplates: HasMany → Template [we://installed_template]\n  - installedThemes: HasMany → Theme [we://installed_theme]\n  - spaceTemplatePreferences: HasMany → SpaceTemplatePreference [we://space_template_preference]\n\nAudioBlock extends WeNode:\n  Fields:\n  - title: string (required) [we://title]\n  - artist: string [we://artist]\n  - audioUrl: string (required) [we://audio_url]\n  - duration: number [we://duration]\n  - albumArt: string [we://album_art]\n  - version: number [we://version]\n\nCalloutBlock extends WeNode:\n  Fields:\n  - text: string [we://text]\n  - variant: string = info [we://variant]\n  - icon: string [we://icon]\n  - version: number [we://version]\n\nChatMessage extends WeNode:\n  Fields:\n  - role: string [we://role]\n  - content: string [we://content]\n\nChatSession extends WeNode:\n  Fields:\n  - name: string [we://name]\n  - templateId: string [we://template_id]\n  Relations:\n  - messages: HasMany → ChatMessage [we://chat_message]\n\nCodeBlock extends WeNode:\n  Fields:\n  - code: string (required) [we://code]\n  - language: string [we://language]\n  - title: string [we://title]\n  - version: number [we://version]\n\nCollectionBlock extends WeNode:\n  Fields:\n  - editorState: string = null [we://editor_state]\n  - type: string [we://type]\n  - display: string [we://display]\n  - direction: string [we://direction]\n  - format: string [we://format]\n  - indent: number [we://indent]\n  - columns: number [we://columns]\n  - gap: string [we://gap]\n  - version: number [we://version]\n  - textContent: string [we://text_content]\n  Relations:\n  - children: HasMany [we://children]\n\nDividerBlock extends WeNode:\n  Fields:\n  - style: string = solid [we://style]\n  - version: number [we://version]\n\nEmbedBlock extends WeNode:\n  Fields:\n  - url: string [we://url]\n  - target: string [we://target]\n  - targetType: string [we://target_type]\n  - displayMode: string = card [we://display_mode]\n  - version: number [we://version]\n\nEventBlock extends WeNode:\n  Fields:\n  - title: string (required) [we://title]\n  - description: string [we://description]\n  - startDate: string (required) [we://start_date]\n  - endDate: string [we://end_date]\n  - location: string [we://location]\n  - allDay: boolean = false [we://all_day]\n  - version: number [we://version]\n\nFileBlock extends WeNode:\n  Fields:\n  - title: string [we://title]\n  - name: string (required) [we://name]\n  - url: string (required) [we://url]\n  - mimeType: string [we://mime_type]\n  - size: number [we://size]\n  - version: number [we://version]\n\nImageBlock extends WeNode:\n  Fields:\n  - src: string (required) [we://src]\n  - altText: string [we://altText]\n  - width: number [we://width]\n  - height: number [we://height]\n  - version: number [we://version]\n\nLinkBlock extends WeNode:\n  Fields:\n  - url: string (required) [we://url]\n  - title: string [we://title]\n  - description: string [we://description]\n  - thumbnail: string [we://thumbnail]\n  - version: number [we://version]\n\nLocationBlock extends WeNode:\n  Fields:\n  - name: string [we://name]\n  - latitude: number (required) [we://latitude]\n  - longitude: number (required) [we://longitude]\n  - address: string [we://address]\n  - city: string [we://city]\n  - countryCode: string [we://country_code]\n  - country: string [we://country]\n  - version: number [we://version]\n\nSignal extends Ad4mModel:\n  Fields:\n  - signalTypeId: string [we://signal_type_id]\n  - value: number [we://value]\n\nSignalType extends WeNode:\n  Fields:\n  - name: string [we://name]\n  - slug: string [we://slug]\n  - description: string [we://description]\n  - icon: string [we://icon]\n  - iconSecondary: string [we://icon_secondary]\n  - step: number = 1 [we://step]\n  - rangeMin: number [we://range_min]\n  - rangeMax: number = 1 [we://range_max]\n  - mode: SignalMode = 'toggle' [we://mode]\n  - aggregate: SignalAggregate = 'count' [we://aggregate]\n  - semantic: SignalSemantic = 'custom' [we://semantic]\n  - allowChange: boolean = true [we://allow_change]\n  - valueType: string = 'numeric' [we://signal_value_type]\n  - schemaVersion: number = 1 [we://schema_version]\n\nSpace extends WeNode:\n  Fields:\n  - uuid: string [we://uuid]\n  - url: string [we://url]\n  - name: string (required) [we://name]\n  - description: string (required) [we://description]\n  - access: string = 'personal' [we://access]\n  - discovery: string = 'hidden' [we://discovery]\n  - avatar: string [we://image]\n  - coverImage: string [we://thumbnail]\n  - defaultTemplateId: string [we://default_template_id]\n  - defaultThemeId: string [we://default_theme_id]\n  - enabledModules: string [we://enabled_modules]\n  Relations:\n  - location: HasOne [we://location]\n\nSpaceTemplatePreference extends WeNode:\n  Fields:\n  - spaceUrl: string [we://space_url]\n  - preference: string [we://preference]\n\nTagBlock extends WeNode:\n  Fields:\n  - name: string (required) [we://name]\n  - color: string [we://color]\n  - version: number [we://version]\n\nTaskBlock extends WeNode:\n  Fields:\n  - title: string (required) [we://title]\n  - description: string [we://description]\n  - status: string = todo [we://status]\n  - priority: string = medium [we://priority]\n  - dueDate: string [we://due_date]\n  - assignee: string [we://assignee]\n  - version: number [we://version]\n\nTemplate extends WeNode:\n  Fields:\n  - name: string [we://name]\n  - description: string [we://description]\n  - icon: string [we://icon]\n  - origin: string [we://origin]\n  - version: number = 1 [we://version]\n  - slug: string [we://slug]\n  - schema: string = null [we://template_schema]\n  - themeId: string [we://theme_id]\n  Relations:\n  - screenshots: HasMany → ImageBlock [we://screenshot]\n\nTextBlock extends WeNode:\n  Fields:\n  - type: string [we://type]\n  - direction: string [we://direction]\n  - format: string [we://format]\n  - indent: number [we://indent]\n  - textFormat: number [we://textFormat]\n  - textStyle: string [we://textStyle]\n  - listType: string [we://listType]\n  - start: number [we://start]\n  - tag: string [we://tag]\n  - text: string [we://text]\n  - version: number [we://version]\n\nTheme extends WeNode:\n  Fields:\n  - name: string [we://name]\n  - description: string [we://description]\n  - icon: string [we://icon]\n  - origin: string [we://origin]\n  - slug: string [we://slug]\n  - version: number = 1 [we://version]\n  - css: string = null [we://stylesheet]\n  - overrides: string = null [we://token_overrides]\n  Relations:\n  - screenshots: HasMany → ImageBlock [we://screenshot]\n\nVideoBlock extends WeNode:\n  Fields:\n  - title: string [we://title]\n  - url: string (required) [we://url]\n  - duration: number [we://duration]\n  - thumbnail: string [we://thumbnail]\n  - provider: string [we://provider]\n  - version: number [we://version]\n\nWeNode extends Ad4mModel:\n  Relations:\n  - comments: HasMany [we://comment]\n  - signals: HasMany → Signal [we://signal]\n\n---\n\n## Stores\n\nStores provide state (readable values) and actions (methods) for dynamic logic in schemas.\nAccess state with $store and call actions with $action.\nFor ephemeral/form state, use $localState/$local/$setLocal instead of stores (see Dynamic Logic).\n\nAdamStore:\n- State:\n  - adamClient: Ad4mClient | undefined\n  - me: Agent | undefined\n  - allPerspectives: array of PerspectiveProxy objects (all AD4M perspectives)\n  - currentPerspective: PerspectiveProxy | null (the perspective currently being viewed)\n  - currentPerspectiveModels: ModelManifestEntry[] (non-WE SHACL models from the current perspective; injected as externalModels into AI messages)\n  - isWeSpace: boolean — true once the current perspective is confirmed to have WE's Space SDNA installed (false for a joined-but-foreign perspective, e.g. one synced in from Flux)\n  - personalSpaces: array of Space objects (local/personal spaces; all Space fields)\n  - sharedSpaces: array of Space objects (shared/neighbourhood spaces; all Space fields)\n  - bootState: string\n  - passwordError: string | undefined\n  - loginLoading: boolean\n  - creatingSpace: boolean (true while a new space is being created)\n  - agents: AgentProfileSummary[] — cache of all fetched agent profiles (did, firstName, lastName, handle, bio, avatar, coverImage, location)\n  - ownAgent: AgentProfileSummary | undefined — reactive accessor for the current user's own profile (derived from agents cache)\n  - orderedSidebarItems: array of sidebar items in user-defined order (uuid, name, avatar, spaceId) — personal + shared spaces merged\n- Actions:\n  - navigate(to: string, options?): navigates to a route\n  - addNewSpace(space: Space): adds a new space\n  - createSpace(name: string, description: string, shared: boolean, imageFile?: File): creates a new space with full setup\n  - initializeAsWeSpace(name: string, description: string, avatarValue?: File | string | null): installs WE's Space SDNA into the current, already-joined, foreign-native perspective (e.g. one synced in from Flux) and creates a Space entity in place — access is always 'shared' since the perspective is already a published neighbourhood\n  - switchPerspective(uuid: string): switches to a perspective by UUID, registers its SHACL models as dynamic model classes, and populates currentPerspectiveModels\n  - removePerspective(uuid: string): removes a perspective by UUID\n  - reorderPerspectives(newOrder: string[]): reorders the sidebar items by UUID array\n  - login(password: string): logs in the agent with password\n  - logout(): locks the agent and returns to login screen\n  - fetchAgent(did: string): fetches and caches an agent's profile from their public AD4M perspective\n  - updateOwnProfile(fields: { firstName?, lastName?, handle?, bio? }): updates own profile text fields and publishes to public perspective\n  - updateProfileImage(field: \"avatar\" | \"coverImage\", imageFile: File): uploads image to FILE_STORAGE_LANGUAGE and publishes expression URL to public perspective\n  - updateAgentLocation(update: { latitude?, longitude?, city?, country?, countryCode? }): merges location update into cache and publishes to public perspective\n  - cleanupSpaceSdna(uuid?: string): one-time remediation for a perspective that accumulated duplicate SDNA installs (e.g. from before joinSpace checked for existing SDNA before installing) — removes the redundant duplicate link copies. Defaults to the current perspective. Returns a display-ready summary string naming how many links were removed and the DIDs that authored them (your own DID annotated with \"(you)\"), or an empty string if nothing needed cleaning up\n\nRouteStore:\n- State:\n  - currentPath: string (the current route path)\n  - segments: string[] (currentPath split by \"/\", e.g. [\"/foo/bar\"] → [\"foo\", \"bar\"])\n- Actions:\n  - navigate(to: string, options?): navigates to a route\n\nThemeStore:\n- State:\n  - builtInThemes: array of ThemeData objects — built-in registry themes (origin: \"built-in\", always available)\n  - installedThemes: array of ThemeData objects — user-installed themes from root perspective (origin: \"custom\" | \"marketplace\")\n  - spaceThemes: array of ThemeData objects — themes stored in the current space perspective (origin: \"custom\")\n  - allThemes: array of ThemeData objects — union of builtInThemes + visible installedThemes + spaceThemes (hidden themes filtered out)\n  - currentThemeId: string — id of the currently active theme\n  - currentTheme: ThemeData — the currently active theme object (id, name, icon, origin)\n  - defaultThemeId: string — id of the user's preferred default theme (used for bootscreen, shell, and future space-override). Persisted to AgentSettings.defaultThemeId\n  - themeManagementList: ThemeManagementItem[] — flat list of all themes (built-in + all custom) with management metadata (id, name, icon, isBuiltIn, isInstalled, isDefault)\n- Actions:\n  - setCurrentTheme(themeId: string): sets and persists the active theme\n  - setDefaultTheme(themeId: string): sets the preferred default theme (persists to AgentSettings.defaultThemeId)\n  - toggleThemeInstalled(themeId: string): toggles a custom theme visible/hidden in pickers; does not delete the theme\n  - installFromMarketplace(marketplaceThemeId: string): installs a marketplace theme into installedThemes\n  - uninstallTheme(themeId: string): removes an installed theme (deletes the model)\n  - deleteTheme(themeId: string): permanently deletes a custom theme\n\nTemplateStore:\n- State:\n  - personalTemplates: array of TemplateSchema objects — core templates plus user's installed custom templates (excludes space templates)\n  - spaceTemplates: array of TemplateSchema objects — templates loaded from the current space perspective\n  - builtInTemplates: array of TemplateSchema objects — built-in system templates (always available)\n  - myTemplates: array of TemplateSchema objects — user's installed custom templates only (excludes built-in and space templates)\n  - allTemplates: array of TemplateSchema objects — union of built-in + personal + space templates\n  - shellTemplates: array of TemplateSchema objects (static system pages: profile, settings, tests)\n  - currentTemplate: TemplateSchema (the active template)\n  - operationLoading: unknown\n  - activeShellView: string | null (id of the currently open shell overlay: 'profile' | 'settings' | 'schema-tests' | 'landing-page' | null)\n  - templateManagementList: TemplateManagementItem[] — flat list of all templates with management metadata (id, name, icon, description, isBuiltIn, isInstalled, isDefault)\n  - switcherGroups: TemplateSwitcherGroup[] — pre-grouped flat items for the template switcher UI; each group has { label: string, items: { id, name, icon }[] }. Groups: \"Space templates\", \"My templates\", \"Built-in\". Use $filter where: { name: { contains: ... } } for search since items have a flat name field.\n- Actions:\n  - updateTemplate(newTemplate: TemplateSchema): updates the current template\n  - switchTemplate(newTemplateId: string): switches to another template\n  - removeTemplate(): removes the current template\n  - saveTemplate(name: string): saves the current template\n  - toggleInstalled(): unknown\n  - setDefaultTemplate(): unknown\n  - deleteTemplate(): unknown\n  - openShellView(id: string): opens a shell overlay by id ('profile' | 'settings' | 'schema-tests' | 'landing-page')\n  - closeShellView(): closes the currently open shell overlay\n\nSpaceStore:\n- State:\n  - memberDids: string[] — DIDs of all members in the current space (includes own DID)\n  - members: AgentProfileSummary[] — cached profiles for all memberDids\n  - spaceDefaultTemplateId: string — the current space's default template ID (empty string when no space is active)\n  - currentSpace: Space | null — the current space model (all Space fields: uuid, url, name, description, access, discovery, avatar, coverImage, defaultTemplateId, defaultThemeId, location, plus id/author/createdAt)\n  - foreignSpacePrefill: { name, description, avatar } | null — detected from a foreign app's own model (e.g. Flux's Community) for prefilling the \"Initialize as WE space\" gate; null once the perspective is a WE space or no recognized foreign model is found\n  - signalTypes: array of SignalType objects (community-created reaction/vote types)\n  - signalTypesBySlug: Record<slug, SignalType> — computed map; access via { $store: \"spaceStore.signalTypesBySlug.<slug>\" }; use .id for the UUID\n  - enabledModules: string[] — ids of the feature modules this space has turned on. An unset value means \"not decided\", not \"none\": it falls back to every registered module, so spaces predating the setting keep the chrome they had\n  - moduleSettings: { id, name, description, icon, enabled }[] — every registered module paired with whether this space has it on; the shape the settings list renders\n- Actions:\n  - createPost(editorState: unknown): creates a new post\n  - updatePost(postId: string, editorState: unknown): reconciles an edited post against its existing blocks — updates/reuses blocks whose id survived the edit, creates new ones, deletes ones no longer present\n  - deletePost(postId: string): permanently deletes a post and all of its contained blocks (recursive, atomic)\n  - updateSpaceImage(field: \"avatar\" | \"coverImage\", imageFile: File): uploads and sets the space avatar or cover image\n  - createSignalType(config: Partial<SignalType>): creates a new signal type in the community; slug auto-derived from name if blank\n  - upsertSignal(nodeId: string, signalTypeId: string, value: number): adds or updates a signal on a node; value=0 deletes it\n  - navigateToSpace(spaceId: string, view?: string): navigates to a space — accepts a perspective UUID or a neighbourhood CID (sharedUrl without the neighbourhood:// prefix); pre-loads space templates before switching so the template and data arrive together\n  - setModuleEnabled(moduleId: string, enabled: boolean): turns a feature module on or off for the current space; writes the resolved list, so the first toggle also pins whatever was on by fallback\n\nAiStore:\n- State:\n  - models: array of Model objects\n  - tasks: array of AITask objects\n  - isOpen: unknown\n  - messages: unknown\n  - isStreaming: unknown\n  - streamingContent: unknown\n  - apiKeyConfigured: unknown\n  - templateName: unknown\n  - templateIcon: unknown\n  - isReadOnly: unknown\n  - hasPendingChanges: unknown\n  - pickerOpen: unknown\n  - pickerAction: unknown\n  - pickerDefaultName: unknown\n  - pickerDefaultIcon: unknown\n  - pickerShowDestination: unknown\n  - sessions: unknown\n  - activeSessionId: unknown\n  - panelMode: unknown\n  - schemaJson: unknown\n  - operationLoading: unknown\n  - canUndo: boolean (true when there are schema edits that can be undone)\n  - canRedo: boolean (true when there are undone schema edits that can be redone)\n- Actions:\n  - handleSchemaPrompt(prompt: string): generates a schema from a prompt\n  - sendMessage(): unknown\n  - close(): unknown\n  - toggle(): toggles the AI chat panel open/closed\n  - setApiKey(): unknown\n  - startFork(): unknown\n  - startFresh(): unknown\n  - confirmPicker(): unknown\n  - cancelPicker(): unknown\n  - newChat(): unknown\n  - switchSession(): unknown\n  - deleteSession(): unknown\n  - setPanelMode(): unknown\n  - onSchemaEdit(): unknown\n  - undo(): undoes the last schema edit\n  - redo(): redoes the last undone schema edit\n\nAppStore:\n- State:\n  - apps: RegisteredApp[] — list of registered external apps (id, name, image)\n  - appsWithWe: unknown\n  - activeAppId: string | null — id of the currently active app, or null if none\n- Actions:\n  - activateApp(id: string): activates an app and switches to its view\n  - deactivateApp(): deactivates the current app and returns to the template view\n\n---\n\n## Store Usage Patterns\n\nReading state:\n{ \"$store\": \"storeName.property\" }\nExample: { \"$store\": \"routeStore.currentPath\" }\n\nCalling actions:\n{ \"$action\": \"storeName.method\", \"args\": [...] }\nExample: { \"$action\": \"routeStore.navigate\", \"args\": [\"/home\"] }\n\nIterating over store data:\n{\n  \"type\": \"$each\",\n  \"props\": { \"items\": { \"$store\": \"adamStore.personalSpaces\" }, \"as\": \"space\" },\n  \"children\": [\n    {\n      \"type\": \"CircleButton\",\n      \"props\": {\n        \"label\": \"$space.name\",\n        \"onClick\": { \"$action\": \"routeStore.navigate\", \"args\": [{ \"$concat\": [\"/space/\", \"$space.uuid\"] }] }\n      }\n    }\n  ]\n}\n\nConditional rendering from store:\n{\n  \"type\": \"$if\",\n  \"props\": {\n    \"condition\": { \"$eq\": [{ \"$store\": \"routeStore.currentPath\" }, \"/\"] },\n    \"then\": { \"type\": \"we-text\", \"children\": [\"Home\"] },\n    \"else\": { \"type\": \"we-text\", \"children\": [\"Not home\"] }\n  }\n}\n\nDeriving options from store:\n{\n  \"$map\": {\n    \"items\": { \"$store\": \"templateStore.templates\" },\n    \"select\": { \"name\": \"$item.meta.name\", \"icon\": \"$item.meta.icon\" }\n  }\n}\n\nQuerying model data:\n{\n  \"$query\": { \"entity\": \"TaskBlock\", \"where\": { \"status\": \"todo\" } }\n}\n\nEager-loading relations with include (most common relational pattern):\nWhen you need related data displayed alongside a list, use include to hydrate relations in one query.\n\nExample — Channel list with conversation count and latest conversation:\n{\n  \"type\": \"$each\",\n  \"props\": {\n    \"items\": {\n      \"$query\": {\n        \"entity\": \"Channel\",\n        \"dataset\": \"$currentDataset\",\n        \"include\": {\n          \"$conversationCount\": { \"from\": \"conversations\", \"count\": true },\n          \"$latestConversation\": { \"from\": \"conversations\", \"order\": { \"createdAt\": \"desc\" }, \"limit\": 1 }\n        }\n      }\n    },\n    \"as\": \"channel\"\n  },\n  \"children\": [{\n    \"type\": \"Row\",\n    \"children\": [\n      { \"type\": \"we-text\", \"children\": [\"$channel.name\"] },\n      { \"type\": \"we-text\", \"children\": [\"$channel.$conversationCount\"] }\n    ]\n  }]\n}\n\nExample — Nested include (Conversations with their messages):\n{\n  \"$query\": {\n    \"entity\": \"Conversation\",\n    \"dataset\": \"$currentDataset\",\n    \"include\": {\n      \"messages\": {\n        \"order\": { \"createdAt\": \"desc\" },\n        \"limit\": 20\n      }\n    }\n  }\n}\nEach conversation in the result has a messages array of hydrated Message instances.\nNesting works to any depth: \"include\": { \"messages\": { \"include\": { \"reactions\": true } } }\n\nRelational drill-down (master-detail navigation across entity relations):\nUse routes + a $query `scope` when you navigate to a detail route and need only that record's children.\nscope.anchor is the parent entity type; scope.via is its HasMany relation (see externalModels) whose targets\nare the query's entity; scope.anchorId is the parent record's id. The adapter resolves the relation to a\nbackend handle, so no protocol details live in the template.\nrouteStore.segments.N extracts the Nth dynamic path segment (segments splits currentPath by \"/\").\n\nExample — Channel list → Conversation list:\n{\n  \"routes\": [\n    {\n      \"path\": \"/\",\n      \"type\": \"Column\",\n      \"props\": { \"gap\": \"300\", \"p\": \"400\" },\n      \"children\": [{\n        \"type\": \"$each\",\n        \"props\": {\n          \"items\": { \"$query\": { \"entity\": \"Channel\", \"dataset\": \"$currentDataset\" } },\n          \"as\": \"channel\"\n        },\n        \"children\": [{\n          \"type\": \"we-button\",\n          \"props\": {\n            \"variant\": \"ghost\",\n            \"onClick\": { \"$action\": \"routeStore.navigate\", \"args\": [{ \"$concat\": [\"/channels/\", \"$channel.id\"] }] }\n          },\n          \"children\": [\"$channel.name\"]\n        }]\n      }]\n    },\n    {\n      \"path\": \"/channels/:channelId\",\n      \"type\": \"Column\",\n      \"props\": { \"gap\": \"300\", \"p\": \"400\" },\n      \"children\": [{\n        \"type\": \"$each\",\n        \"props\": {\n          \"items\": {\n            \"$query\": {\n              \"entity\": \"Conversation\",\n              \"scope\": { \"anchor\": \"Channel\", \"via\": \"conversations\", \"anchorId\": { \"$store\": \"routeStore.segments.1\" } },\n              \"dataset\": \"$currentDataset\"\n            }\n          },\n          \"as\": \"convo\"\n        },\n        \"children\": [{\n          \"type\": \"we-text\",\n          \"children\": [\"$convo.conversationName\"]\n        }]\n      }]\n    }\n  ]\n}\nNotes:\n- Use include when you need related data displayed inline (e.g. a post with its comments, a channel with its conversation count).\n- Use a scope drill-down when you're on a detail route and want only children belonging to the current record.\n- dataset must point to the dataset that holds the data. For external apps (e.g. Flux) opened as a WE space, use \"$currentDataset\".\n- The relation name (in include, or scope.via) is the HasMany field name on the parent entity.\n\nLocal state (form with validation):\n{\n  \"type\": \"Column\",\n  \"$localState\": {\n    \"name\": {\n      \"type\": \"string\",\n      \"initial\": \"\",\n      \"validate\": [{ \"rule\": \"required\" }, { \"rule\": \"minLength\", \"value\": 2 }]\n    },\n    \"loading\": { \"type\": \"boolean\", \"initial\": false }\n  },\n  \"children\": [\n    {\n      \"type\": \"we-form-field\",\n      \"props\": { \"label\": \"Name\", \"error\": { \"$error\": \"name\" } },\n      \"children\": [{\n        \"type\": \"we-input\",\n        \"props\": {\n          \"value\": { \"$local\": \"name\" },\n          \"onInput\": { \"$setLocal\": \"name\", \"from\": \"$event.detail\" },\n          \"onBlur\": { \"$touch\": \"name\" }\n        }\n      }]\n    },\n    {\n      \"type\": \"we-button\",\n      \"props\": {\n        \"text\": \"Submit\",\n        \"loading\": { \"$local\": \"loading\" },\n        \"disabled\": { \"$not\": { \"$formValid\": \"$scope\" } },\n        \"onClick\": [\n          { \"$touch\": \"$all\" },\n          { \"$if\": { \"condition\": { \"$formValid\": \"$scope\" }, \"then\": { \"$action\": \"myStore.submit\", \"args\": [{ \"$local\": \"name\" }] } } }\n        ]\n      }\n    }\n  ]\n}\n\nRepeating lists with $each:\nALWAYS use $each for lists of similar items — never duplicate the same node structure.\nWrite the template once; $each renders it for each item.\n\nUse literal arrays for fixed/sample data:\n{\n  \"type\": \"$each\",\n  \"props\": {\n    \"items\": [\n      { \"title\": \"First Post\", \"text\": \"Hello world.\", \"author\": \"Alice\" },\n      { \"title\": \"Second Post\", \"text\": \"Another update.\", \"author\": \"Bob\" }\n    ],\n    \"as\": \"post\"\n  },\n  \"children\": [\n    {\n      \"type\": \"Column\",\n      \"props\": { \"bg\": \"neutral-0\", \"r\": \"400\", \"border\": \"1px solid neutral-200\", \"p\": \"400\", \"gap\": \"300\" },\n      \"children\": [\n        {\n          \"type\": \"Row\",\n          \"props\": { \"gap\": \"300\", \"ay\": \"center\" },\n          \"children\": [\n            { \"type\": \"we-avatar\", \"props\": { \"initials\": \"$post.author\", \"size\": \"sm\" } },\n            { \"type\": \"we-text\", \"props\": { \"variant\": \"label\" }, \"children\": [\"$post.author\"] }\n          ]\n        },\n        { \"type\": \"we-text\", \"props\": { \"variant\": \"heading-sm\" }, \"children\": [\"$post.title\"] },\n        { \"type\": \"we-text\", \"children\": [\"$post.text\"] }\n      ]\n    }\n  ]\n}\n\nUse $query or $store for dynamic data (more common in production):\n{ \"type\": \"$each\", \"props\": { \"items\": { \"$query\": { \"entity\": \"TextBlock\" } }, \"as\": \"post\" }, \"children\": [...] }\n{ \"type\": \"$each\", \"props\": { \"items\": { \"$store\": \"spaceStore.posts\" }, \"as\": \"post\" }, \"children\": [...] }\n\nPer-item customization inside $each:\nTo style or highlight specific items, add a data flag to those items and use $if on the flag inside the template. Do NOT use $eq: [\"$index\", N] comparisons — they are fragile, repetitive, and break when items are reordered.\nExample: add \"highlighted\": true to one item's data, then use $if on \"$post.highlighted\" in the template:\n{ \"type\": \"$if\", \"props\": { \"condition\": \"$post.highlighted\", \"then\": { \"type\": \"we-badge\", \"props\": { \"variant\": \"primary\" }, \"children\": [\"Featured\"] } } }\nFor conditional props (e.g. different bg on highlighted items):\n{ \"bg\": { \"$if\": { \"condition\": \"$post.highlighted\", \"then\": \"primary-50\", \"else\": \"neutral-0\" } } }\n\nBoolean toggle (show/hide, expand/collapse):\n{\n  \"type\": \"Column\",\n  \"$localState\": { \"showDetails\": { \"type\": \"boolean\", \"initial\": false } },\n  \"children\": [\n    { \"type\": \"we-button\", \"props\": { \"variant\": \"ghost\", \"onClick\": { \"$toggleLocal\": \"showDetails\" } }, \"children\": [\"Toggle Details\"] },\n    { \"type\": \"$if\", \"props\": { \"condition\": { \"$local\": \"showDetails\" }, \"then\": { \"type\": \"we-text\", \"children\": [\"Details content here\"] } } }\n  ]\n}\n\nSignal types (community-specific reactions/votes):\nSignal types are created per-community by the user. Never hardcode signal type UUIDs in schemas.\nInstead reference them by slug through spaceStore.signalTypesBySlug.\n\nALWAYS ask the user: \"What slug should I use? (e.g. 'like', 'upvote', 'star')\"\nThen use that slug in the pattern below.\n\nPattern — live wired SignalControl (inside a $each over a model with $query include):\n{\n  \"type\": \"$each\",\n  \"props\": {\n    \"items\": {\n      \"$query\": {\n        \"entity\": \"MyBlock\",\n        \"include\": {\n          \"$totalLikeCount\": {\n            \"from\": \"signals\",\n            \"where\": { \"signalTypeId\": { \"$store\": \"spaceStore.signalTypesBySlug.like.id\" } },\n            \"count\": true\n          },\n          \"$myLikeSignal\": {\n            \"from\": \"signals\",\n            \"where\": {\n              \"signalTypeId\": { \"$store\": \"spaceStore.signalTypesBySlug.like.id\" },\n              \"author\": \"$me.did\"\n            },\n            \"limit\": 1\n          }\n        }\n      }\n    },\n    \"as\": \"item\"\n  },\n  \"children\": [\n    {\n      \"type\": \"$if\",\n      \"props\": {\n        \"condition\": { \"$store\": \"spaceStore.signalTypesBySlug.like\" },\n        \"then\": {\n          \"type\": \"SignalControl\",\n          \"props\": {\n            \"signalType\": { \"$store\": \"spaceStore.signalTypesBySlug.like\" },\n            \"myValue\": \"$item.$myLikeSignal.value\",\n            \"aggregate\": \"$item.$totalLikeCount\",\n            \"onSignal\": {\n              \"$action\": \"spaceStore.upsertSignal\",\n              \"args\": [\"$item.id\", { \"$store\": \"spaceStore.signalTypesBySlug.like.id\" }, \"$arg\"]\n            }\n          }\n        }\n      }\n    }\n  ]\n}\n\nNotes:\n- The $if guard hides SignalControl if the community hasn't created a signal type with that slug.\n- Replace \"like\" with the user's slug throughout (in $store paths and args).\n- $query include adds $totalLikeCount and $myLikeSignal as computed properties on each item.\n- signalType prop accepts the full SignalType object (provides icon, mode, range to the UI component).\n\nPreview / mockup mode (static, no store wiring):\n{\n  \"type\": \"SignalControl\",\n  \"props\": {\n    \"preview\": true,\n    \"signalType\": { \"icon\": \"❤️\", \"mode\": \"toggle\", \"rangeMin\": 0, \"rangeMax\": 1 }\n  }\n}\nUse preview: true when sketching a layout without real data. Remove it (and add the full wiring above) when going live.\n\n---\n\n## Routing Structure\n\nDefine nested routes using the \"routes\" array at the root node of the schema.\nEach route object describes a path and the UI node to render when that path is active.\nRoutes can be nested to support sub-pages and layouts.\n\nRoute objects follow the same structure as schema nodes, with an additional \"path\" property.\n\n- The \"routes\" array MUST be placed on the ROOT template node (or on a route node for nested routing). The router only reads routes from these positions — placing routes on an arbitrary child node means the router will never find them and nothing will render.\n- Use \"path: '*'\" or \"path: '/*'\" for catch-all/not-found routes.\n- Use \":paramName\" for dynamic route parameters (e.g. \"/space/:spaceId\").\n- Use nested \"routes\" arrays for sub-pages and layouts.\n- Use { \"type\": \"$routes\" } in children to indicate where nested routes should render. The $routes outlet can be deeply nested — only the routes array placement matters.\n- EVERY { \"type\": \"$routes\" } outlet MUST have a \"routes\" array defined on the same node or an ancestor node. A $routes outlet without a routes array is invalid and will fail validation.\n- NEVER duplicate a route path — every route in the same \"routes\" array MUST have a unique path.\n- When using tabs, each tab's key and navigate path MUST have a matching route. Ensure a 1:1 correspondence between tabs and routes.\n\n### Tabs + Routing\n\nIMPORTANT: we-tabs only manages visual selection — clicking a tab does NOT navigate automatically.\nEach we-tab MUST have an onClick with { \"$action\": \"routeStore.navigate\" } to trigger route changes.\nBind we-tabs selectedKey to the matching route segment so the active tab stays in sync.\n(Alternatively, a single onChange on we-tabs can replace per-tab onClick — see onChange pattern below.)\n\nRecommended pattern — header above tabs (routes on ROOT, $routes outlet nested inside):\n{\n  \"type\": \"Column\",\n  \"routes\": [\n    { \"path\": \"/\", \"type\": \"we-text\", \"children\": [\"Select a tab\"] },\n    { \"path\": \"/posts\", \"type\": \"Column\", \"children\": [{ \"type\": \"we-text\", \"children\": [\"Posts content\"] }] },\n    { \"path\": \"/articles\", \"type\": \"Column\", \"children\": [{ \"type\": \"we-text\", \"children\": [\"Articles content\"] }] }\n  ],\n  \"children\": [\n    { \"type\": \"Row\", \"props\": { \"p\": \"300\", \"ax\": \"between\" }, \"children\": [\n      { \"type\": \"we-text\", \"props\": { \"variant\": \"heading-lg\" }, \"children\": [\"My App\"] }\n    ]},\n    {\n      \"type\": \"we-tabs\",\n      \"props\": { \"selectedKey\": { \"$store\": \"routeStore.segments.0\" } },\n      \"children\": [\n        { \"type\": \"we-tab\", \"props\": { \"key\": \"posts\", \"label\": \"Posts\", \"onClick\": { \"$action\": \"routeStore.navigate\", \"args\": [\"/posts\"] } } },\n        { \"type\": \"we-tab\", \"props\": { \"key\": \"articles\", \"label\": \"Articles\", \"onClick\": { \"$action\": \"routeStore.navigate\", \"args\": [\"/articles\"] } } }\n      ]\n    },\n    { \"type\": \"$routes\" }\n  ]\n}\nNote: \"routes\" is on the root Column, NOT on a child. The $routes outlet is a child — that's fine. Only the routes array placement matters.\n\nWRONG — two common mistakes that produce empty tabs (validator will catch both):\n{\n  // MISTAKE 1: routes defined on an inner child node, not the root.\n  // The router never inspects children for routes arrays — this routes array is invisible.\n  \"type\": \"Column\",\n  \"children\": [\n    { \"type\": \"we-tabs\", \"children\": [\"...tabs...\"] },\n    {\n      \"type\": \"Column\",\n      \"routes\": [                          // ← WRONG: router never reads this\n        { \"path\": \"/posts\", \"type\": \"Column\", \"children\": [\"...\"] }\n      ],\n      \"children\": [{ \"type\": \"$routes\" }]  // ← outlet here does nothing without a live routes array\n    }\n  ]\n}\n\n{\n  // MISTAKE 2: using { type: \"$routes\" } as a route entry's component type.\n  // $routes is an outlet slot marker — as a leaf route entry it has no children injected,\n  // so it returns null. Every tab navigates to a route that renders nothing.\n  \"type\": \"Column\",\n  \"routes\": [\n    { \"path\": \"/posts\", \"type\": \"$routes\" }  // ← WRONG: renders null, use a real component\n  ],\n  \"children\": [{ \"type\": \"$routes\" }]\n}\n\nAlternative: single onChange on we-tabs (fires with $event.detail.value = selected key):\n{ \"onChange\": { \"$action\": \"routeStore.navigate\", \"args\": [{ \"$concat\": [\"/\", \"$arg.detail.value\"] }] } }\nThis replaces all per-tab onClick handlers but requires $concat to build the path.\n\nNested routing example:\n{\n  \"routes\": [\n    { \"path\": \"*\", \"type\": \"Column\", \"props\": { \"ax\": \"center\", \"p\": \"500\" }, \"children\": [{ \"type\": \"we-text\", \"children\": [\"Page not found\"] }] },\n    { \"path\": \"/\", \"type\": \"Column\", \"props\": { \"ax\": \"center\", \"p\": \"500\" }, \"children\": [{ \"type\": \"we-text\", \"children\": [\"Home page\"] }] },\n    {\n      \"path\": \"/space/:spaceId\",\n      \"type\": \"Row\",\n      \"children\": [{ \"type\": \"$routes\" }],\n      \"routes\": [\n        { \"path\": \"/*\", \"type\": \"we-text\", \"children\": [\"Space page not found\"] },\n        { \"path\": \"/\", \"type\": \"we-text\", \"children\": [\"About sub-page\"] },\n        { \"path\": \"/posts\", \"type\": \"Column\", \"children\": [{ \"type\": \"$routes\" }],\n          \"routes\": [\n            { \"path\": \"/*\", \"type\": \"we-text\", \"children\": [\"Post not found\"] },\n            { \"path\": \"/\", \"type\": \"we-text\", \"children\": [\"No posts selected\"] },\n            { \"path\": \"/1\", \"type\": \"we-text\", \"children\": [\"Post 1 page\"] }\n          ]\n        }\n      ]\n    }\n  ]\n}\n\n---\n\n## Rules & Best Practices\n\n- Always use the correct prop names and value types for each component.\n- Never use null as a value in any children array. Only use valid schema nodes or strings.\n- Each item in a children array must be either a valid schema node object or a string.\n- Use design tokens for spacing, color, radius, etc. (do not use raw CSS except in styles).\n- Use the styles prop for custom inline CSS (e.g., { \"width\": \"100px\" }).\n- Use hoverProps for hover state overrides, activeProps for pressed state, focusProps for focus state. Supported on @we/primitives (we-text, we-button, etc.) and layout components (Column, Row).\n- Use dynamic logic tokens ($store, $if, $action, etc.) for reactivity and conditional behavior.\n- Nest components using children or slots as needed.\n- For routes, use the routes array with path and child nodes.\n- Do not invent new components or props — use only those listed in the component registry.\n- Do not set props to their default/inherited values — omit them. fontSize and fontWeight inherit from parents (~16px / normal), so only set them when you need a different value.\n- Omit empty `props` and `children` — both are optional. Do not write `props: {}` or `children: []`.\n- Do not use `as const` on schema node `type` fields — `SchemaNode.type` is `string`, so it is never needed.\n- For icon-only buttons, nest a `we-icon` child inside `we-button` rather than using a `text` prop with a Unicode character. **Omit the `size` prop on `we-icon` when nesting inside sized primitives** (`we-button`, `we-input`, `we-badge`, `we-textarea`) — these components auto-size nested icons via `--we-context-icon-size` (xs→12px, sm→16px, md→24px, lg→32px, xl→40px). Only set an explicit icon `size` if you need to override the automatic sizing. Example: `{ type: 'we-button', props: { variant: 'ghost', size: 'sm' }, children: [{ type: 'we-icon', props: { name: 'x' } }] }`.\n- NEVER pass a bare number like \"16\" as a size or dimension prop — it is not valid CSS. Always check the component's declared prop type: if it's a string union, use one of the listed values; if it accepts arbitrary strings, include a CSS unit (e.g. \"16px\", \"2rem\").\n- For interactive list items and selectable options, use `we-button` with variant switching (e.g., `secondary` when selected, `ghost` when not) instead of manually styling `Row` with cursor, bg, and onClick. Buttons provide hover, focus, and active states for free.\n- For card-like layouts, compose from `Column` with DS props (bg, r, border, p, gap). This gives full control over spacing and appearance.\n- When rendering lists of similar items (posts, cards, users, etc.), ALWAYS use `$each` with a single template child — never duplicate the same node structure multiple times. Use literal arrays in `items` for static data, or `$store`/`$query` for dynamic data.\n\n### Icon Names (Phosphor Icons)\n\nwe-icon uses **Phosphor Icons** (v2.1). Do NOT use Heroicons, Material, or FontAwesome names.\nPhosphor names are lowercase-kebab-case. The `weight` prop controls style: \"regular\" (default), \"bold\", \"fill\", \"light\", \"thin\", \"duotone\".\n\nCommon Phosphor icon names (use these, NOT Heroicons equivalents):\n- Navigation: house, arrow-left, arrow-right, caret-left, caret-right, caret-down, caret-up, arrows-clockwise\n- Actions: plus, minus, x, check, pencil-simple, trash, copy, download, upload, share, link, magnifying-glass, funnel, sliders-horizontal\n- Communication: chat-circle, chat-dots, envelope-simple, paper-plane-tilt, bell, megaphone\n- Social: heart, thumbs-up, thumbs-down, star, share-network, users, user, user-plus\n- Media: image, camera, play, pause, stop, microphone, speaker-high, video-camera\n- Files: file, file-text, folder, folder-open, clipboard-text, note\n- UI: list, squares-four, gear, dots-three, dots-three-vertical, warning, info, question, check-circle, x-circle, eye, eye-slash\n- Misc: lightning, rocket, globe, map-pin, calendar, clock, tag, bookmark, flag, lock, shield-check\n\nWRONG icon names (Heroicons/Material — do NOT use):\n- \"chat-bubble-left\" → use \"chat-circle\"\n- \"chevron-right\" → use \"caret-right\"\n- \"cog\" / \"settings\" → use \"gear\"\n- \"trash-can\" → use \"trash\"\n- \"magnifying-glass-circle\" → use \"magnifying-glass\"\n- \"home\" → use \"house\"\n- \"favorite\" → use \"heart\"\n- \"delete\" → use \"trash\"\n- \"search\" → use \"magnifying-glass\"\n- \"close\" → use \"x\"\n- \"menu\" → use \"list\"\n- All schemas must be valid JSON with property names and string values in double quotes.\n- The meta property at the root is required: { \"meta\": { \"name\": \"...\", \"description\": \"...\", \"icon\": \"...\" } }\n- Always set `bg: 'neutral-50'` on root-level schema nodes (templates, pages). This ensures proper background in all themes — without it, dark mode renders white backgrounds.\n\nMost @we/primitives inherit all Design System Props documented above (layout, visual, flex, typography, state).\nSome layout-only primitives (we-avatar, we-icon, we-image, we-spinner, etc.) only accept Layout props — see the Design System Props section for the full list.\n\nNative HTML elements (lowercase tags render directly without registry entries):\n- Layout: div, section, article, aside, main, nav, header, footer\n- Text: p, span, h1-h6, pre, code, blockquote\n- Lists: ul, ol, li\n- Forms: form, input, button, label, select, textarea\n- Media: img, video, audio, canvas, figure, figcaption\n- Other: a, table, tr, td, th, details, summary, dialog\n\n## Schema Validation\n\nRun `we-validate-schemas` (or `node packages/schema-system/shared/dist/cli/we-validate-schemas.js`) from the monorepo root to validate all `.schema.ts` files.\nFor a specific file: `we-validate-schemas packages/app-framework/src/shared/schemas/MyTemplate.schema.ts`\n\nAfter creating or modifying a `.schema.ts` file, always run validation to catch:\n- Unknown component types (typos, missing registry entries)\n- Invalid or misspelled props (with \"did you mean?\" suggestions)\n- Prop type mismatches (e.g., number where string expected)\n- Missing required `meta` field on root TemplateSchema nodes\n- `$routes` outlet without a `routes` array on an ancestor\n- Orphan `$local` / `$setLocal` references without a `$localState` ancestor\n- DS layer consistency (mixing props from layers the component doesn't support)";
+export const schemaContext = "## Schema Structure\n\nA schema is a tree of nodes. Each node can have:\n- type: The component to render (string, e.g. \"we-button\", \"Column\")\n- props: An object of props for the component\n- children: An array of child nodes (or strings for text), or token objects like { $store: '...' } or { $concat: [...] }.\n- slots: Named slots for advanced composition (optional)\n- slot: The name of the slot this node should be rendered into (optional)\n- routes: For routing components, an array of nestable route objects (optional)\n- styles: Raw CSS escape hatch — Record<string, string | number> applied as inline styles on a **wrapper div** that surrounds the component. Use only for CSS that must live on a wrapper: filter, clip-path, backdrop-filter, mix-blend-mode. When present the wrapper participates in layout (no display:contents), so CSS effects apply correctly. **Important:** this is NOT the same as props.styles. If you want to apply custom CSS to a Column, Row, or Grid's own element (e.g. a background image), put it in props.styles instead — node-level styles go on a wrapper div around the component and will be hidden behind the component's own background.\n\nExample node:\n{\n  \"type\": \"we-button\",\n  \"props\": {\n    \"onClick\": { \"$action\": \"routeStore.navigate\", \"args\": [\"/home\"] }\n  },\n  \"children\": [\n    { \"type\": \"we-icon\", \"props\": { \"name\": \"house\" } },\n    { \"type\": \"we-text\", \"props\": { \"size\": \"600\" }, \"children\": [\"Home\"] }\n  ]\n}\n\n## Prop-level Dynamic Logic & Expressions\n\nSpecial tokens in props enable dynamic, reactive, or computed behavior.\n\nStore reference:\n{ \"$store\": \"storeName.property.path\" }\nResolves a value from a named store, supporting nested paths.\n\nAction/event:\n{ \"$action\": \"storeName.method\", \"args\": [...] }\nCalls a method on a store, optionally with arguments (which can themselves be tokens).\nSupports async lifecycle callbacks — fired after the store method's Promise resolves/rejects:\n  onSuccess: [...actions]  — fired on resolve; '$result' (and '$result.<path>') in args refers to the resolved value\n  onError: [...actions]    — fired on reject; '$result.message' etc. refers to the error object\n  onFinally: [...actions]  — fired regardless of outcome\nNon-promise (synchronous) methods are unaffected — lifecycle keys are ignored.\nExample — close modal after async submission:\n{ \"$action\": \"adamStore.createSpace\", \"args\": [...], \"onSuccess\": [{ \"$setLocal\": \"modalOpen\", \"value\": false }] }\nExample — navigate to newly created item:\n{ \"$action\": \"adamStore.createSpace\", \"args\": [...], \"onSuccess\": [{ \"$setLocal\": \"modalOpen\", \"value\": false }, { \"$action\": \"routeStore.navigate\", \"args\": [{ \"$concat\": [\"/space/\", \"$result.uuid\"] }] }] }\n\nModel mutations via $action (use these for creating/updating/deleting model instances):\nmodel.create — creates a model instance in the current perspective (default) or a specified one:\n{ \"$action\": \"model.create\", \"args\": [\"ModelName\", { \"field\": \"value\" }, { \"perspective\": \"adamStore.rootPerspective\" }] }\nThe third argument is an options object. Omit it to use the current space perspective.\n\nmodel.update — updates a model instance:\n{ \"$action\": \"model.update\", \"args\": [\"ModelName\", \"$item.id\", { \"field\": \"newValue\" }] }\nTo target a non-current perspective: { \"$action\": \"model.update\", \"args\": [\"ModelName\", \"$item.id\", { \"field\": \"value\" }, { \"perspective\": \"adamStore.rootPerspective\" }] }\n\nmodel.delete — deletes a model instance:\n{ \"$action\": \"model.delete\", \"args\": [\"ModelName\", \"$item.id\"] }\n\nUse perspective: 'adamStore.rootPerspective' for we-root models (AgentSettings, ChatSession, etc.).\nUse the default (no perspective) for space-scoped models (Space, Signal, etc.).\n\nConditional logic:\n{ \"$if\": { \"condition\": ..., \"then\": ..., \"else\": ... } }\nEvaluates condition; if truthy, returns then, else returns else.\n\nMap/iterate:\n{ \"$map\": { \"items\": { \"$store\": \"templateStore.templates\" }, \"select\": { ... } } }\nIterates over an array, mapping each item to a new object using the select mapping.\n\nPick:\n{ \"$pick\": { \"from\": { \"$store\": \"userStore.profile\" }, \"props\": [\"name\", \"email\"] } }\nPicks specific properties from an object.\n\nConcat (string building):\n{ \"$concat\": [\"part1\", \"$context.value\", \"part2\"] }\nJoins multiple parts into a single string.\n\nContext references:\nStrings starting with \"$\" followed by a context key resolve to context values.\nExample: \"$space.name\" resolves to the name property of the space context variable.\nDot paths supported: \"$item.profile.avatar\".\n\nEquality / inequality checks:\n{ \"$eq\": [a, b] } — strict equality\n{ \"$ne\": [a, b] } — strict inequality\n\nNumeric comparisons:\n{ \"$lt\": [a, b] } — a < b (less than)\n{ \"$gt\": [a, b] } — a > b (greater than)\nExample: { \"$gt\": [{ \"$count\": { \"items\": { \"$store\": \"listStore.items\" } } }, 0] }\n\nSet membership:\n{ \"$in\": [value, array] } — true if array contains value (false if second operand is not an array)\nExample: { \"$in\": [{ \"$store\": \"spaceStore.uuid\" }, { \"$store\": \"adamStore.systemPerspectiveUuids\" }] }\nExample: { \"$in\": [\"$item.role\", [\"admin\", \"moderator\"]] }\n\nBoolean logic:\n{ \"$and\": [a, b, ...] } — all truthy\n{ \"$or\": [a, b, ...] } — any truthy\n{ \"$not\": a } — negation\n\nArray operators:\n{ \"$filter\": { \"items\": <array>, \"where\": { \"field\": \"value\", ... } } }\nFilters an array to items where all where conditions match. Mirrors the $query where operator set:\n\n  { \"field\": \"value\" }                                   — strict equality\n  { \"field\": { \"not\": \"value\" } }                        — inequality; array form excludes multiple values\n  { \"field\": { \"contains\": \"text\" } }                    — case-insensitive substring match (strings only)\n  { \"field\": { \"exists\": true } }                        — non-null / non-undefined presence check\n  { \"field\": { \"exists\": false } }                       — null or undefined check\n\nWhere values (including those inside operator objects) are resolved through the prop system,\nso $store, $local, and context refs like { \"$local\": \"searchText\" } all work.\n\n$query-only logical combinators (OR / AND / NOT) — NOT supported in $filter, only in $query's where:\n  { \"OR\": [ { \"field\": \"value\" }, { \"field2\": \"value2\" } ] }   — matches if ANY branch matches\n  { \"AND\": [ { ... }, { ... } ] }                              — matches if ALL branches match (sibling keys at the\n                                                                  same level are already implicitly ANDed — use AND\n                                                                  to group a set of conditions alongside an OR/NOT)\n  { \"NOT\": { \"field\": \"value\" } }                              — matches if the branch does NOT match\nBranches are full where-clause objects (can contain multiple fields, and can nest OR/AND/NOT inside each other).\nSibling keys alongside OR/AND/NOT at the same level are implicitly ANDed with it.\nExample — case-insensitive search across two fields:\n{\n  \"$query\": {\n    \"entity\": \"Space\",\n    \"where\": {\n      \"OR\": [\n        { \"name\": { \"contains\": { \"$local\": \"searchText\" } } },\n        { \"description\": { \"contains\": { \"$local\": \"searchText\" } } }\n      ]\n    }\n  }\n}\nNote: using OR/AND/NOT disables the SPARQL-level sort/pagination pushdown (see count-projection and\nrelation-property ordering below) — those orderings silently stop working if combined with OR/AND/NOT in the\nsame query's where clause, because the fallback sort runs before the projection/relation data is attached.\n\nExamples:\n{ \"$filter\": { \"items\": { \"$store\": \"spaceStore.members\" }, \"where\": { \"role\": \"admin\" } } }\n{ \"$filter\": { \"items\": { \"$store\": \"spaceStore.members\" }, \"where\": { \"location\": { \"exists\": true }, \"handle\": { \"contains\": { \"$local\": \"searchText\" } } } } }\n\n{ \"$count\": { \"items\": <array> } }\nReturns the length of an array.\nExample: { \"badge\": { \"$count\": { \"items\": { \"$store\": \"notificationStore.unread\" } } } }\n\n{ \"$find\": { \"items\": <array>, \"where\"?: { ... }, \"select\"?: \"fieldName\" } }\nFinds the first matching item. where is optional (returns first item if omitted). select plucks a single field.\nExample: { \"$find\": { \"items\": { \"$store\": \"spaceStore.members\" }, \"where\": { \"id\": \"$item.creatorId\" }, \"select\": \"name\" } }\n\n{ \"$plural\": { \"count\": <number>, \"one\": \"singular\", \"other\": \"plural\" } }\nReturns \"one\" when count === 1, otherwise \"other\". Use in children arrays for count-noun labels.\ncount is resolved through the prop system — any numeric expression ($count, $store, context ref) works.\nExample: { \"$plural\": { \"count\": { \"$count\": { \"items\": { \"$store\": \"spaceStore.members\" } } }, \"one\": \"Member\", \"other\": \"Members\" } }\nCompose with we-number for a full \"N Members\" display:\n  we-number (value: { \"$count\": ... }, shorten: true) + we-text (children: [{ \"$plural\": { \"count\": { \"$count\": ... }, \"one\": \"Member\", \"other\": \"Members\" } }])\n\nQuery (data retrieval):\n{ \"$query\": { \"entity\": \"ModelName\", \"where\": { \"field\": \"value\" }, \"limit\": 10, \"order\": { \"field\": \"asc\" } } }\nQueries the current dataset for entity instances. Always returns an array.\nOptions: entity (required), where, order, limit, offset, include, scope, dataset, subscribe.\nsubscribe defaults to true — reactive live updates. Set subscribe: false to do a one-time fetch.\nBy default $query targets the current dataset ($currentDataset). Use dataset to query a different dataset —\nrequired when reading entities from an external app (e.g. Flux) that is open as a WE space:\n{ \"$query\": { \"entity\": \"Channel\", \"dataset\": \"$currentDataset\" } }\n\nBackend-neutral identity & dataset refs — prefer these over adamStore.* store paths inside $query and conditions:\n- $currentDataset — the currently active dataset (an AD4M perspective, in the AD4M backend). Use as a dataset value.\n- $me — the current agent's identity object. Use $me.did for their DID (ownership checks, author filters, e.g. { \"$eq\": [\"$post.author\", \"$me.did\"] }); $me.handle / $me.avatar for profile fields once loaded.\n\nEager-loading relations with include (most common relational pattern):\ninclude hydrates related model instances in the same query — no extra fetches needed.\nRelation names come from the HasMany relations listed for each model in externalModels.\n\nSimple include — hydrate all related instances:\n{ \"$query\": { \"entity\": \"Channel\", \"include\": { \"conversations\": true } } }\nEach item in the result will have a conversations array of hydrated Conversation objects.\n\nSub-query include — filter, sort, or limit the related records:\n{ \"$query\": { \"entity\": \"Channel\", \"include\": { \"conversations\": { \"order\": { \"createdAt\": \"desc\" }, \"limit\": 10 } } } }\n\nNested include — hydrate relations of relations:\n{ \"$query\": { \"entity\": \"Channel\", \"include\": { \"conversations\": { \"include\": { \"messages\": true } } } } }\nNesting can go as deep as needed. Each level adds one batched fetch (not N+1).\n\nCount projection — add a derived numeric field:\n{ \"$query\": { \"entity\": \"Post\", \"include\": { \"$likeCount\": { \"from\": \"likes\", \"count\": true } } } }\nThe $-prefixed key becomes a new field on each result item (e.g. item.$likeCount = 42).\n\nSorting by a count projection — order can reference a $-prefixed count key directly, sorting by the aggregate:\n{\n  \"$query\": {\n    \"entity\": \"Post\",\n    \"limit\": 20,\n    \"order\": { \"$likeCount\": \"desc\" },\n    \"include\": { \"$likeCount\": { \"from\": \"likes\", \"count\": true } }\n  }\n}\nRequirements: only a single order key is supported when it targets a projection (mixing it with a second sort key falls back\nto a plain property sort), and the query must also specify limit or offset — without one the count isn't computed yet at\nsort time and the order silently has no effect. Always pair count-projection ordering with a limit.\nCombine with $if for a user-togglable sort field (e.g. \"newest\" vs \"most liked\"):\n{\n  \"order\": {\n    \"$if\": {\n      \"condition\": { \"$eq\": [{ \"$local\": \"sortField\" }, \"likes\"] },\n      \"then\": { \"$likeCount\": { \"$local\": \"sortDirection\" } },\n      \"else\": { \"createdAt\": { \"$local\": \"sortDirection\" } }\n    }\n  }\n}\n\nSorting by a related model property — order can reference a dotted \"relation.property\" path for a HasOne/HasMany\nrelation declared on the model, sorting by a scalar property on the related instance:\n{\n  \"$query\": {\n    \"entity\": \"Space\",\n    \"limit\": 20,\n    \"order\": { \"location.country\": \"asc\" },\n    \"include\": { \"location\": true }\n  }\n}\nSame requirements as count-projection ordering above: only a single order key, and pair with limit/offset — without\none the relation data isn't attached yet at sort time and the order silently has no effect. include isn't required\nfor the sort itself (the relation is resolved from the model's declared shape), but you'll usually want it anyway to\nread the field in the UI (e.g. \"$space.location.country\").\nCombine with $if the same way as count-projection ordering to let the user toggle between sort fields.\n\nSingle-item projection — add a derived field that resolves to one instance or null:\n{ \"$query\": { \"entity\": \"Post\", \"include\": { \"$myLike\": { \"from\": \"likes\", \"where\": { \"author\": \"$me.did\" }, \"limit\": 1 } } } }\nWith limit: 1 the field unwraps to T | null instead of an array.\n\ninclude only works with typed relations — ones where the target model class is known.\nFor WE models this is always the case. For external models, check the externalModels listing:\nrelations marked \"→ ModelName\" are typed (safe for include); relations marked \"parent query only\"\nare untyped and will crash at runtime if used with include — use a scope drill-down instead.\n\nRelational queries — fetch a parent record's children (drill-down navigation):\n{ \"$query\": { \"entity\": \"Conversation\", \"scope\": { \"anchor\": \"Channel\", \"via\": \"conversations\", \"anchorId\": \"$channel.id\" } } }\nscope.anchor is the parent entity type; scope.via is its relation whose targets are this query's entity (the\nHasMany relation listed for that entity in externalModels); scope.anchorId is the parent record's id (typically\nfrom a $each context variable or a route segment). The adapter resolves the relation to a backend handle —\nno protocol details live in the template.\nUse this pattern when navigating to a detail route and loading only that record's children.\nFor external-app datasets, always add dataset: \"$currentDataset\".\n\nLocal state (scoped ephemeral state):\nDeclare on any node: \"$localState\": { \"name\": { \"type\": \"string\", \"initial\": \"\" } }\nSupported types: \"string\", \"boolean\", \"number\", \"function\", \"object\".\nRead:  { \"$local\": \"name\" } — returns the signal value (reactive).\n       { \"$local\": \"name.nested.path\" } — dot-notation reads into object-typed fields (reactive).\nWrite: { \"$setLocal\": \"name\", \"from\": \"$event.target.value\" } — event handler that updates the signal.\n       { \"$setLocal\": \"name\", \"value\": \"literal\" } — sets to a literal value (string, number, boolean, null, object).\n       { \"$setLocal\": \"name\", \"merge\": { \"field\": \"$event.detail\" } } — shallow-merges fields into an object-typed signal. Values are resolved as event paths (e.g. \"$event.detail\") or passed as literals. Use for partial updates to object state.\nToggle: { \"$toggleLocal\": \"fieldName\" } — toggles a boolean field (equivalent to setting it to !current). Use for show/hide, open/close, expand/collapse patterns.\nCall function: { \"$callLocal\": \"fieldName\" } — event handler that calls the function stored in a function-typed local field.\n  Used when a child component needs to trigger a callback passed in via $localState.\n  The field must be declared as type: 'function' and set via $setLocal.\n  Example: { \"onClick\": { \"$callLocal\": \"onConfirm\" } }\nState is created on mount and destroyed on unmount. Nested $localState declarations merge, inner fields shadow outer.\n$local values can be used in $action args: { \"$action\": \"store.method\", \"args\": [{ \"$local\": \"name\" }] }\n\nObject-typed local state (consolidating related scalar fields):\nWhen several related fields share a common condition on their initial values (e.g. all null/empty when a store value is absent), prefer a single \"object\" field seeded from the store, then read sub-fields with dot-notation and write with merge.\nExample — location object (replaces 5 separate scalar fields with $if guards):\n  \"$localState\": { \"location\": { \"type\": \"object\", \"initial\": { \"$store\": \"spaceStore.currentSpace.location\" } } }\n  Read:  { \"$local\": \"location.latitude\" }, { \"$local\": \"location.city\" }\n  Write (picker confirm): { \"$setLocal\": \"location\", \"from\": \"$event.detail\" }\n  Write (partial edit):   { \"$setLocal\": \"location\", \"merge\": { \"city\": \"$event.detail\" } }\n  Write (clear):          { \"$setLocal\": \"location\", \"value\": null }\n  Condition (has location): { \"$local\": \"location\" }\nUse \"object\" whenever you would otherwise write 3+ related scalar fields each needing $if on their initial value.\n\nHoisted query state ($queries):\nDeclare on any node to run reactive subscriptions at the node root and expose results in $local.\nSolves two problems: avoids N duplicate subscriptions inside $each loops, and makes query results available for $if conditions.\n\"$queries\": { \"signalTypes\": { \"entity\": \"SignalType\", \"subscribe\": true } }\nResults are injected into $local as read-only reactive arrays, accessible via { \"$local\": \"signalTypes\" }.\nQuery options are identical to $each's $query prop (entity, where, order, limit, include, dataset, subscribe).\n$queries and $localState share the same $local namespace — avoid duplicate names across both.\n$setLocal will warn and no-op on $queries entries (they are read-only).\nUse with $count + $gt for conditional visibility:\n{ \"condition\": { \"$gt\": [{ \"$count\": { \"items\": { \"$local\": \"signalTypes\" } } }, 0] } }\nExample:\n{\n  \"$queries\": { \"signalTypes\": { \"entity\": \"SignalType\", \"subscribe\": true } },\n  \"type\": \"Column\",\n  \"children\": [\n    {\n      \"type\": \"$each\",\n      \"props\": { \"items\": { \"$local\": \"signalTypes\" }, \"as\": \"sig\" },\n      \"children\": [...]\n    }\n  ]\n}\n\nBoolean toggle pattern (show/hide comments, expand/collapse sections, etc.):\n{\n  \"$localState\": { \"showComments\": { \"type\": \"boolean\", \"initial\": false } },\n  \"children\": [\n    {\n      \"type\": \"we-button\",\n      \"props\": {\n        \"variant\": \"ghost\",\n        \"onClick\": { \"$toggleLocal\": \"showComments\" }\n      },\n      \"children\": [{ \"type\": \"we-icon\", \"props\": { \"name\": \"chat-circle\" } }]\n    },\n    {\n      \"type\": \"$if\",\n      \"props\": {\n        \"condition\": { \"$local\": \"showComments\" },\n        \"then\": { \"type\": \"Column\", \"children\": [{ \"type\": \"we-text\", \"children\": [\"Comments visible\"] }] }\n      }\n    }\n  ]\n}\n\nForm validation (extends $localState):\nDeclare validation rules on fields:\n\"$localState\": {\n  \"email\": {\n    \"type\": \"string\",\n    \"initial\": \"\",\n    \"validate\": [\n      { \"rule\": \"required\", \"message\": \"Email is required\" },\n      { \"rule\": \"pattern\", \"value\": \"^[^@]+@[^@]+$\", \"message\": \"Invalid email\" }\n    ]\n  }\n}\n\nBuilt-in rules: required, minLength (value: N), maxLength (value: N), min (value: N), max (value: N), pattern (value: regex string), match (field: otherFieldName). All accept optional \"message\" override.\n\nRead tokens:\n{ \"$error\": \"fieldName\" } — first validation error message (only shown after field is touched), or \"\".\n{ \"$valid\": \"fieldName\" } — true if all rules pass (regardless of touched state).\n{ \"$touched\": \"fieldName\" } — true after the field has been blurred/touched.\n{ \"$formValid\": \"$scope\" } — true if ALL validated fields in the current $localState scope pass.\n\nAction tokens:\n{ \"$touch\": \"fieldName\" } — marks a single field as touched (use in onBlur).\n{ \"$touch\": \"$all\" } — marks all fields in scope as touched (use before submit guard).\n{ \"$resetLocal\": \"$scope\" } — resets all fields to initial values and clears touched state.\n\nHandler arrays (compose multiple actions on one event):\n{ \"onClick\": [{ \"$touch\": \"$all\" }, { \"$if\": { \"condition\": { \"$formValid\": \"$scope\" }, \"then\": { \"$action\": \"store.submit\", \"onSuccess\": [{ \"$setLocal\": \"modalOpen\", \"value\": false }] } } }] }\nArray entries execute sequentially. Non-function entries (e.g. $if with false condition) are skipped.\nPrefer onSuccess over a bare $setLocal before the $action — the bare form closes the modal immediately (losing the loading spinner); onSuccess waits for the Promise to resolve.\n\nTypical form pattern:\n{\n  \"$localState\": { \"name\": { \"type\": \"string\", \"initial\": \"\", \"validate\": [{ \"rule\": \"required\" }] } },\n  \"children\": [\n    {\n      \"type\": \"we-form-field\",\n      \"props\": { \"label\": \"Name\", \"error\": { \"$error\": \"name\" } },\n      \"children\": [{\n        \"type\": \"we-input\",\n        \"props\": {\n          \"value\": { \"$local\": \"name\" },\n          \"onInput\": { \"$setLocal\": \"name\", \"from\": \"$event.detail\" },\n          \"onBlur\": { \"$touch\": \"name\" }\n        }\n      }]\n    },\n    {\n      \"type\": \"we-button\",\n      \"props\": {\n        \"disabled\": { \"$not\": { \"$formValid\": \"$scope\" } },\n        \"onClick\": [\n          { \"$touch\": \"$all\" },\n          { \"$if\": { \"condition\": { \"$formValid\": \"$scope\" }, \"then\": { \"$action\": \"store.save\", \"args\": [{ \"$local\": \"name\" }], \"onSuccess\": [{ \"$setLocal\": \"submitDone\", \"value\": true }] } } }\n        ]\n      },\n      \"children\": [\"Submit\"]\n    }\n  ]\n}\n\n## Block-level Dynamic Structures\n\nBlock-level structures use \"type\" starting with \"$\" for dynamic rendering of schema nodes.\n\nEach loop:\n{ \"type\": \"$each\", \"props\": { \"items\": { \"$store\": \"storeName.arrayProperty\" }, \"as\": \"itemName\" }, \"children\": [ ... ] }\nRenders children once for each item. The \"as\" name becomes a context key. Defaults to \"item\" — omit \"as\" unless you need a different name.\n\nConditional rendering:\n{ \"type\": \"$if\", \"props\": { \"condition\": ..., \"then\": { ... }, \"else\": { ... } } }\nRenders \"then\" node if condition is truthy, else renders \"else\" node.\nSupports enterTransition / exitTransition for CSS animations when the node mounts/unmounts.\nTransitionConfig = TransitionEffect | TransitionEffect[]\nTransitionEffect = { type: 'fade'|'slide'|'scale'|'pulse', duration?: ms, easing?: string, delay?: ms, direction?: 'left'|'right'|'up'|'down', distance?: string }\nfade controls opacity only; slide/scale control transform only. pulse is a persistent looping animation (not a one-shot transition) — starts once entered, stops on exit; direction/distance don't apply (default duration 1200ms, easing 'ease-in-out'). Compose fade/slide/scale together in an array; pulse is typically used alone.\nExample: enterTransition: [{ type: 'fade', duration: 300 }, { type: 'slide', direction: 'up', distance: '40px', duration: 400 }]\nExample (pulse): enterTransition: { type: 'pulse', duration: 1500 }\n\nViewport / mount animation (child always in DOM):\n{ \"type\": \"$animate\", \"props\": { \"scrollReveal\"?: true | number, \"scrollLeave\"?: true | number, \"scrollPast\"?: string, \"enterTransition\"?: TransitionConfig, \"exitTransition\"?: TransitionConfig }, \"children\": [<node>] }\nThe child is always mounted. fade/slide/scale are CSS transitions (opacity/transform); pulse is a real CSS @keyframes loop — use this for scroll-reveal effects.\nDo NOT use $animate when the child should be absent from the DOM. Use $if for conditional DOM presence.\nscrollReveal: true fires enterTransition when the element enters the viewport.\nscrollReveal: -100 fires 100px before the element would enter (negative = earlier reveal).\nscrollLeave fires exitTransition when the element leaves the viewport.\nscrollPast: \"element-id\" observes a sentinel element (by DOM id) instead of the $animate element itself.\n  enterTransition fires when the sentinel leaves the viewport (user scrolled past it).\n  exitTransition fires when the sentinel returns (user scrolled back up).\n  Use this for sticky headers: place a zero-height sentinel div at the bottom of the non-sticky header section,\n  then wrap the mini-profile in $animate with scrollPast pointing to that sentinel's id.\n  scrollPast is mutually exclusive with scrollReveal/scrollLeave.\nWithout any scroll trigger, the enterTransition runs once on mount.\nOnly one child node is supported.\nExample (scroll-reveal):\n{\n  \"type\": \"$animate\",\n  \"props\": {\n    \"scrollReveal\": -100,\n    \"enterTransition\": [\n      { \"type\": \"fade\", \"duration\": 600, \"easing\": \"ease-in-out\" },\n      { \"type\": \"slide\", \"direction\": \"left\", \"distance\": \"200px\", \"duration\": 1000, \"easing\": \"ease-in-out\" }\n    ]\n  },\n  \"children\": [{ \"type\": \"SomeCard\", \"children\": [] }]\n}\nExample (sticky header mini-profile):\nPlace a sentinel at the bottom of the header, reference it in the sticky nav:\n{ \"type\": \"div\", \"props\": { \"id\": \"header-sentinel\" }, \"styles\": { \"height\": \"0px\", \"pointerEvents\": \"none\" } }\n{\n  \"type\": \"$animate\",\n  \"props\": {\n    \"scrollPast\": \"header-sentinel\",\n    \"enterTransition\": { \"type\": \"fade\", \"duration\": 250 },\n    \"exitTransition\": { \"type\": \"fade\", \"duration\": 200 }\n  },\n  \"children\": [{ \"type\": \"Row\", \"props\": { \"ay\": \"center\", \"gap\": \"300\" }, \"children\": [\n    { \"type\": \"we-avatar\", \"props\": { \"image\": \"$space.avatar\", \"size\": \"sm\" } },\n    { \"type\": \"we-text\", \"props\": { \"fontWeight\": \"600\" }, \"children\": [\"$space.name\"] }\n  ]}]\n}\n\nSingle model item (load one record, render children with it in context):\n{\n  \"type\": \"$single\",\n  \"props\": {\n    \"item\": { \"$query\": { \"entity\": \"ModelName\", \"params\": { ... }, \"subscribe\": true } },\n    \"as\": \"profile\"   // context key for children — default: 'item'\n  },\n  \"children\": [{ \"type\": \"we-text\", \"children\": [\"$profile.username\"] }]\n}\nRenders nothing until a matching record is found. Like $each but for a single result.\nquery options (entity, params, include, dataset, subscribe) work identically to $query.\n\nRoute outlet:\n{ \"type\": \"$routes\" }\nIndicates where nested routes should render within a layout.\n\n---\n\n## Component Registry\n\nMost @we/primitives also accept Design System Props (see next section for details and exceptions).\n\n@we/primitives:\n- we-alert (DesignSystemElement)\n  Props: variant: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' = 'primary', dismissible: boolean = false\n- we-audio (LayoutVisualElement)\n  Props: src: string = '', controls: boolean = false, preload: 'none' | 'metadata' | 'auto' = 'metadata', autoplay: boolean = false, loop: boolean = false, muted: boolean = false\n- we-avatar (LayoutVisualElement)\n  Props: image: string = '', hash: string = '', selected: boolean = false, online: boolean = false, initials: string = '', icon: string = '', size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | '{css-length}' | undefined, clickable: boolean = false\n- we-badge (DesignSystemElement)\n  Props: variant: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' = 'neutral', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-blockquote (DesignSystemElement)\n- we-button (DesignSystemElement)\n  Props: variant: 'primary' | 'secondary' | 'ghost' | 'danger' | 'outline' = 'primary', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md', text?: string | undefined, href?: string | undefined, disabled: boolean = false, loading: boolean = false, gradient: boolean = false, square: boolean = false\n- we-checkbox (DesignSystemElement)\n  Props: checked: boolean = false, disabled: boolean = false, name: string = '', value: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-code (DesignSystemElement)\n  Props: block: boolean = false\n- we-color-picker (DesignSystemElement)\n  Props: value: string = '#000000', disabled: boolean = false, name: string = '', palette: array = [ '#000000', '#434343', '#666666', '#999999', '#b7b7b7', '#cccccc', '#d9d9d9', '#ffffff', '#980000', '#ff0000', '#ff9900', '#ffff00', '#00ff00', '#00ffff', '#4a86e8', '#0000ff', '#9900ff', '#ff00ff', '#e6b8af', '#f4cccc', '#fce5cd', '#fff2cc', '#d9ead3', '#d0e0e3', '#c9daf8', '#cfe2f3', '#d9d2e9', '#ead1dc', ]\n- we-date-picker (DesignSystemElement)\n  Props: value: string = '', placeholder: string = 'Select date', disabled: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-divider (LayoutElement)\n  Props: orientation: 'horizontal' | 'vertical' = 'horizontal', variant: 'solid' | 'dashed' | 'dotted' = 'solid', color?: string | undefined, thickness?: string | undefined\n- we-drawer (OverlayElement)\n  Props: hideclosebutton: boolean = false, close: () => void\n- we-file-upload (DesignSystemElement)\n  Props: accept: string = '', multiple: boolean = false, disabled: boolean = false, name: string = ''\n- we-form-field (DesignSystemElement)\n  Props: label: string = '', description: string = '', error: string = '', required: boolean = false, size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-html (DesignSystemElement) — Renders a raw HTML string safely via DOMPurify sanitization.\n\nUse this instead of `we-text` when content is stored as HTML (e.g. rich-text\neditor output such as Flux messages). The `content` prop accepts any HTML\nfragment; it is sanitized before rendering so XSS payloads are stripped.\n  Props: content: string = ''\n- we-icon (LayoutElement)\n  Props: name: string = '', color: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '{css-length}' = '', weight: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone' = 'regular', gradient: string = ''\n- we-icon-picker (DesignSystemElement)\n  Props: value: string = '', disabled: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md', placeholder: string = 'Pick icon'\n- we-iframe (LayoutVisualElement)\n  Props: src: string = '', title: string = 'Embedded content', allow: string = '', sandbox?: string | undefined\n- we-image (LayoutVisualElement)\n  Props: src: string | File = '', alt: string = '', fit: '' | 'cover' | 'contain' | 'fill' | 'none' | 'scale-down' = '', loading: 'eager' | 'lazy' = 'eager', gradient: string = '', objectPosition: string = ''\n- we-input (DesignSystemElement)\n  Props: value: string = '', max: string = '', min: string = '', maxlength: unknown = Infinity, minlength: number = 0, pattern: string = '', name: string = '', step: string = '', placeholder: string = '', autocomplete: string = '', autofocus: boolean = false, disabled: boolean = false, required: boolean = false, readonly: boolean = false, type: string = 'text', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-link (DesignSystemElement)\n  Props: href: string = '', target: string = '', rel: string = '', download: string = '', disabled: boolean = false\n- we-location-picker (DesignSystemElement)\n  Props: latitude?: number | undefined, longitude?: number | undefined, placeholder: string = 'Set location…', disabled: boolean = false, reverseGeocode: boolean = true\n- we-markdown (DesignSystemElement)\n  Props: content: string = '', markdownGap: string = ''\n- we-menu (DesignSystemElement) — Vertical list container for menu items inside a popover.\nNot a standalone selector — wrap in we-popover for dropdown behavior.\n- we-menu-group (LayoutElement)\n  Props: collapsible: boolean = false, open: boolean = false, title: string = ''\n- we-menu-item (DesignSystemElement) — Single actionable item inside a we-menu.\nSupports selected, active, and danger states.\n  Props: selected: boolean = false, active: boolean = false, variant: 'default' | 'danger' = 'default', label: unknown, value: unknown\n- we-modal (OverlayElement)\n  Props: hideclosebutton: boolean = false, close: () => void\n- we-number (DesignSystemElement) — Displays a number, optionally abbreviated (1 200 → 1.2K, 1 500 000 → 1.5M).\n  Props: value: number = 0, shorten: boolean = false, precision: number = 1, locale: string = 'en', formattedValue: string\n- we-number-input (DesignSystemElement)\n  Props: value: number = 0, min: number = -Infinity, max: unknown = Infinity, step: number = 1, disabled: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-pagination (DesignSystemElement)\n  Props: page: number = 1, total: number = 1, siblings: number = 1, size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-popover (LayoutElement) — Low-level floating panel anchored to a trigger element.\nUse DropdownMenu component for dropdown menus.\n  Props: open: boolean = false, placement: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' = 'bottom', popoverElement: HTMLElement, triggerElement: HTMLElement\n- we-progress-bar (DesignSystemElement)\n  Props: value: number = 0, max: number = 100, variant: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' = 'primary', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-radio (DesignSystemElement)\n  Props: checked: boolean = false, disabled: boolean = false, name: string = '', value: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-scroll-area (DesignSystemElement)\n  Props: maxHeight: string = '', maxWidth: string = ''\n- we-select (DesignSystemElement)\n  Props: options: SelectOption[] = [], value: string = '', placeholder: string = '', disabled: boolean = false, searchable: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-select (DesignSystemElement) — Pick a single value from a list of options. Custom-rendered dropdown.\nUse for form fields, settings, filters. Set searchable=true for type-to-filter.\n  Props: options: SelectOption[] = [], value: string = '', placeholder: string = '', disabled: boolean = false, searchable: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-skeleton (DesignSystemElement)\n  Props: width: string = '100%', height: string = '20px', animation: 'pulse' | 'wave' = 'pulse'\n- we-slider (DesignSystemElement)\n  Props: value: number = 0, min: number = 0, max: number = 100, step: number = 1, disabled: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md', showValue: boolean = false\n- we-sortable (DesignSystemElement) — Drag-to-reorder container primitive.\n\nUsage: wrap a list of elements that each have a `data-we-id` attribute.\nFires a `we-reorder` CustomEvent<string[]> on drop with the new ordered\narray of IDs.\n  Props: direction: 'vertical' | 'horizontal' = 'vertical', gap: string = ''\n- we-spinner (LayoutElement)\n  Props: size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | (string & {}) = 'md', color: string = ''\n- we-switch (DesignSystemElement)\n  Props: checked: boolean = false, disabled: boolean = false, name: string = '', value: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md', labelOff: string = '', labelOn: string = ''\n- we-tab (DesignSystemElement)\n  Props: key: string = '', selected: boolean = false, label?: string | undefined, selectedProps?: Partial<DesignSystemProps> | undefined\n- we-tabs (DesignSystemElement)\n  Props: selectedKey: string = ''\n- we-tag (DesignSystemElement)\n  Props: variant: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' = 'neutral', dismissible: boolean = false\n- we-text (DesignSystemElement)\n  Props: text?: string | undefined, variant: '' | 'body' | 'label' | 'footnote' | 'subheading' | 'ingress' | 'heading-sm' | 'heading-md' | 'heading-lg' | 'heading-xl' = '', tag: 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'small' | 'b' | 'i' | 'label' | 'div' = 'span', inline: boolean = false, uppercase: boolean = false, italic: boolean = false, truncate: boolean = false, gradient: string = ''\n- we-textarea (DesignSystemElement)\n  Props: value: string = '', name: string = '', placeholder: string = '', rows: number = 3, maxlength: unknown = Infinity, minlength: number = 0, disabled: boolean = false, required: boolean = false, readonly: boolean = false, resize: 'none' | 'vertical' | 'horizontal' | 'both' = 'vertical', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-timestamp (DesignSystemElement) — Displays a formatted or relative timestamp that self-updates each minute\nwhen `relative` is enabled.\n  Props: value: string = '', relative: boolean = false, locale: string = 'en', dateStyle: Intl.DateTimeFormatOptions['dateStyle'] | null = null, timeStyle: Intl.DateTimeFormatOptions['timeStyle'] | null = null, weekday: Intl.DateTimeFormatOptions['weekday'] | null = null, year: Intl.DateTimeFormatOptions['year'] | null = null, month: Intl.DateTimeFormatOptions['month'] | null = null, day: Intl.DateTimeFormatOptions['day'] | null = null, hour: Intl.DateTimeFormatOptions['hour'] | null = null, minute: Intl.DateTimeFormatOptions['minute'] | null = null, second: Intl.DateTimeFormatOptions['second'] | null = null, timeZone: string | null = null, hourCycle: Intl.DateTimeFormatOptions['hourCycle'] | null = null, formattedTime: string\n- we-tooltip (LayoutElement)\n  Props: open: boolean = false, title: string = '', placement: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' = 'top', tooltipEl: HTMLElement, triggerEl: HTMLElement, arrowEl: HTMLElement\n- we-video (LayoutVisualElement)\n  Props: src: string = '', poster?: string | undefined, controls: boolean = false, preload: 'none' | 'metadata' | 'auto' = 'metadata', autoplay: boolean = false, loop: boolean = false, muted: boolean = false, playsinline: boolean = false, stream?: MediaStream | null | undefined\n\n@we/components:\n- AudioDisplay\n  Props: title: string | undefined, artist: string | undefined, audioUrl: string | undefined, duration: number | undefined, albumArt: string | undefined\n- AudioInput\n  Props: title: string | undefined, artist: string | undefined, audioUrl: string | FileData | undefined, duration: number | undefined, albumArt: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- BlockComposer (DesignSystemElement)\n  Props: editorState?: any, perspective?: PerspectiveProxy | null, onSave?: ((json: SerializedBlockNode) => void), onReady?: ((api: { save: () => void; }) => void)\n- BlockPlaceholder\n  Props: icon: string, label: string, hint?: string, accept?: string, onFileDrop?: ((file: File) => void), onClick?: (() => void)\n- BlockRenderer (DesignSystemElement)\n  Props: editorState?: any, perspective?: PerspectiveProxy | null, rootClass?: string\n- BlockToolbar\n  Props: placement?: BlockToolbarPlacement, children: JSX.Element, stopPropagation?: boolean\n- CalloutDisplay\n  Props: text: string | undefined, variant: string | undefined, icon: string | undefined\n- CalloutInput\n  Props: text: string | undefined, variant: string | undefined, icon: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- CodeDisplay\n  Props: code: string | undefined, language: string | undefined, title: string | undefined\n- CodeInput\n  Props: code: string | undefined, language: string | undefined, title: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- CollectionDisplay\n  Props: layout?: string, columnCount?: number, gap?: string, childEditorState?: any\n- CollectionInput\n  Props: nodeKey: string, layout?: string, columnCount?: number, gap?: string, childEditorState?: any, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- DividerDisplay\n  Props: style: \"solid\" | \"dashed\" | \"dotted\" | undefined\n- DividerInput\n  Props: style: DividerVariant | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- EmbedDisplay\n  Props: url: string | undefined, target: string | undefined, targetType: string | undefined, displayMode: string | undefined\n- EmbedInput\n  Props: url: string | undefined, target: string | undefined, targetType: string | undefined, displayMode: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- EventDisplay\n  Props: title: string | undefined, description: string | undefined, startDate: string | undefined, endDate: string | undefined, location: string | undefined, allDay: boolean | undefined\n- EventInput\n  Props: title: string | undefined, description: string | undefined, startDate: string | undefined, endDate: string | undefined, location: string | undefined, allDay: boolean | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- FileDisplay\n  Props: title: string | undefined, name: string | undefined, url: string | undefined, mimeType: string | undefined, size: number | undefined\n- FileInput\n  Props: title: string | undefined, name: string | undefined, url: string | FileData | undefined, mimeType: string | undefined, size: number | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- ImageDisplay\n  Props: src: string | undefined, altText: string | undefined, width: number | undefined, height: number | undefined\n- ImageInput\n  Props: src: string | FileData | undefined, altText: string | undefined, width: number | undefined, height: number | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- LinkDisplay\n  Props: url: string | undefined, title: string | undefined, description: string | undefined, thumbnail: string | undefined\n- LinkInput\n  Props: url: string | undefined, title: string | undefined, description: string | undefined, thumbnail: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- LocationDisplay\n  Props: name: string | undefined, latitude: number | undefined, longitude: number | undefined, address: string | undefined\n- LocationInput\n  Props: name: string | undefined, latitude: number | undefined, longitude: number | undefined, address: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- TagDisplay\n  Props: name: string | undefined, color: string | undefined\n- TagInput\n  Props: name: string | undefined, color: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- TaskDisplay\n  Props: title: string | undefined, description: string | undefined, status: string | undefined, priority: string | undefined, dueDate: string | undefined, assignee: string | undefined\n- TaskInput\n  Props: title: string | undefined, description: string | undefined, status: string | undefined, priority: string | undefined, dueDate: string | undefined, assignee: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- VideoDisplay\n  Props: url: string | undefined, title: string | undefined, thumbnail: string | undefined, provider: string | undefined, width: number | undefined\n- VideoInput\n  Props: url: string | undefined, title: string | undefined, thumbnail: string | undefined, provider: string | undefined, width: number | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- Accordion\n  Props: children?: JSX.Element, renderContent?: ((item: AccordionItem, index: number) => JSX.Element), onChange?: ((openItems: string[]) => void), items?: AccordionItem[], multiple?: boolean, styles?: Record<string, string | number>\n- AudioVisualiser\n  Props: src: string | undefined, bars?: number, height?: number, color?: string, activeColor?: string\n- AvatarStack\n  Props: avatars: AvatarInfo[], max?: number, size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxs\" | \"xxl\", overlap?: number, ring?: string, styles?: Record<string, string | number>\n- Breadcrumbs\n  Props: onNavigate?: ((item: BreadcrumbItem, index: number) => void), items?: BreadcrumbItem[], separator?: string, styles?: Record<string, string | number>\n- Calendar\n  Props: onSelect?: ((date: string) => void), value?: string, events?: CalendarEvent[], styles?: Record<string, string | number>\n- Card (DesignSystemElement)\n- CircleButton\n  Props: label: string, icon?: string, image?: string, onClick?: (() => void), class?: string, styles?: Record<string, string | number>\n- CodeEditor\n  Props: code: string, language?: CodeEditorLanguage, readOnly?: boolean, onChange?: ((code: string) => void), onSave?: ((code: string) => void), styles?: Record<string, string | number>\n- CollapsedContent\n  Props: collapsed: boolean, onExpandClick?: (() => void), showToggle?: boolean, icon?: string, maxHeight?: string, fadeColor?: string, children?: JSX.Element, class?: string, styles?: Record<string, string | number>\n- Column (DesignSystemElement)\n- Combobox (DesignSystemElement)\n  Props: options: string[] | ComboboxOption[], value?: string, placeholder?: string, size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\", onChange?: ((value: string) => void)\n- DropdownMenu — Flexible dropdown menu for actions, toggles, and grouped items. Use for context menus, settings panels, layer controls, and command palettes.\n  Props: class?: string, styles?: Record<string, string | number>, placement?: Placement, triggerLabel?: string, triggerIcon?: string, items: SolidDropdownMenuEntry[]\n- EditableImage (DesignSystemElement)\n  Props: src?: string, alt?: string, fit?: \"fill\" | \"cover\" | \"contain\" | \"none\" | \"scale-down\", placeholderIcon?: string, onImageChange?: ((file: File) => void), class?: string, aspect?: number, maxSize?: number\n- FlipCard\n  Props: front?: JSX.Element, back?: JSX.Element, width?: string, height?: string, flipOnHover?: boolean, flipDuration?: string, wobbleOnHover?: boolean, wobbleDegree?: number, class?: string, styles?: Record<string, string | number>\n- Grid (DesignSystemElement)\n  Props: template?: string, columns?: number, minChildWidth?: string\n- IconLabelButton\n  Props: icon: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<string>, label: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<string>, selected?: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<boolean | undefined>, iconWeight?: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<IconWeight | undefined>, onClick?: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<(() => void) | undefined>, class?: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<string | undefined>, styles?: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<Record<string, string | number> | undefined>\n- ImageCrop\n  Props: src: string, fileName?: string, aspect?: number, maxSize?: number, outputType?: string, quality?: number, onReady?: ((ref: ImageCropRef) => void)\n- ImageLightbox\n  Props: srcs: string[], initialIndex: number, onClose: () => void\n- List\n  Props: children?: JSX.Element, renderItem?: ((item: ListItem, index: number) => JSX.Element), items?: ListItem[], ordered?: boolean, gap?: string, styles?: Record<string, string | number>\n- PostCard\n  Props: creator?: { name: string; avatar: string; }, title: string, text: string, class?: string, styles?: Record<string, string | number>\n- RerenderLog\n  Props: location: string\n- Row (DesignSystemElement)\n- Search (DesignSystemElement)\n  Props: placeholder?: string, value?: string, onSearch?: ((value: string) => void), debounce?: number\n- Select (DesignSystemElement)\n  Props: options: SelectOption[], value?: string, placeholder?: string, searchable?: boolean, label?: string, size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\", onChange?: ((value: string) => void)\n- SignalControl\n  Props: signalType: SignalTypeData, signals?: SignalData[], myDid?: string, onSignal?: ((value: number) => void), disabled?: boolean, preview?: boolean, class?: string, styles?: Record<string, string | number>\n- Stepper\n  Props: onStepClick?: ((index: number) => void), steps?: StepperStep[], activeStep?: number, orientation?: \"horizontal\" | \"vertical\", styles?: Record<string, string | number>\n- Table\n  Props: renderCell?: ((row: Record<string, unknown>, column: TableColumn, index: number) => JSX.Element), columns: TableColumn[], rows: Record<string, unknown>[], striped?: boolean, bordered?: boolean, styles?: Record<string, string | number>\n- Timeline\n  Props: children?: JSX.Element, renderItem?: ((item: TimelineItem, index: number) => JSX.Element), items?: TimelineItem[], styles?: Record<string, string | number>\n- ToastContainer\n  Props: position?: \"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\" | \"top-center\" | \"bottom-center\", styles?: Record<string, string | number>\n\n@we/widgets:\n- CesiumGlobe — 3D globe widget using CesiumJS with a modular layer system.\nLayers are injected via factory functions (planet surface + background).\nRegistered in the app's component registry, which injects `layerFactoryRegistry` — so templates\nplace it as `CesiumGlobe` without supplying that prop themselves.\n  Props: ionAccessToken?: string, planetLayers?: LayerConfig<unknown>[], backgroundLayers?: LayerConfig<unknown>[], layerFactoryRegistry: Record<string, LayerFactory<any>>\n- CollapsibleSidebar\n  Props: header?: JSX.Element, footer?: JSX.Element, items: CollapsibleSidebarItem[], footerItems?: CollapsibleSidebarItem[], side?: \"left\" | \"right\", position?: \"static\" | \"absolute\" | \"fixed\", zIndex?: number, collapsedWidth?: string, expandedWidth?: string, defaultExpanded?: boolean, expandOnHover?: boolean, transitionDuration?: number, bg?: string, border?: string, padding?: string, gap?: string, centerItems?: boolean, itemColor?: string, itemColorHover?: string, itemColorActive?: string, itemBg?: string, itemBgHover?: string, itemBgActive?: string, itemPadding?: string, itemGap?: string, badgeBg?: string, badgeColor?: string, iconSize?: IconSize, onItemClick?: ((item: CollapsibleSidebarItem) => void), onExpandedChange?: ((expanded: boolean) => void)\n- GraphWidget — 2D force-directed graph visualization using D3-force layout and Canvas rendering.\nDisplays typed nodes (user, space, post) and edges (follows, member-of, etc.)\nwith configurable styling, layout forces, and interaction handlers.\n  Props: data: GraphData, width?: string | number, height?: string | number, nodeStyle?: NodeStyleConfig, edgeStyle?: EdgeStyleConfig, layout?: LayoutConfig, interactions?: InteractionConfig\n- SpaceSidebarWidget\n  Props: name: string, description?: string, class?: string, style?: Record<string, string | number>\n\n---\n\n## Design System Props\n\nMost @we/primitives inherit **all** layers below. Props use design token values — not raw CSS.\n\n### Token Value Reference\n\n| Token Type | Valid Values |\n|---|---|\n| SpaceValue | \"0\", \"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\", \"1000\" (or CSS length e.g. \"16px\") |\n| ColorValue | \"{hue}-{shade}\" where hue = neutral, primary, success, warning, danger and shade = 0, 25, 50, 75, 100, 200–900, 1000. Also \"white\", \"black\". (or CSS color) |\n| RadiusValue | \"0\", \"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\", \"pill\", \"full\" (or CSS length) |\n| ShadowValue | \"sm\", \"md\", \"lg\", \"xl\" |\n| FontSizeValue | \"base\", \"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\", \"1000\" (or CSS length) |\n| FontFamilyValue | \"base\" (or CSS font-family) |\n| LineHeightValue | \"none\", \"tight\", \"snug\", \"normal\", \"relaxed\", \"loose\" (or CSS value) |\n| LetterSpacingValue | \"tighter\", \"tight\", \"normal\", \"wide\", \"wider\", \"widest\" (or CSS value) |\n| FontWeightValue | Named tokens: \"regular\" (400), \"medium\" (500), \"semibold\" (600), \"bold\" (700). Numeric: \"100\"–\"900\". CSS pass-through: \"light\", \"normal\", \"bolder\". |\n\n**Layout-only primitives** — these accept only Layout props (not Visual, Flex, Typography, or State):\nwe-divider, we-icon, we-menu-group, we-popover, we-spinner, we-tooltip\n\n### Layout\n\n| Prop | Type | Description |\n|------|------|-------------|\n| width | string | Element width |\n| height | string | Element height |\n| minWidth | string | Minimum width |\n| minHeight | string | Minimum height |\n| maxWidth | string | Maximum width |\n| maxHeight | string | Maximum height |\n| position | \"relative\" \\| \"absolute\" \\| \"fixed\" \\| \"sticky\" | CSS position |\n| top | string | Top offset |\n| right | string | Right offset |\n| bottom | string | Bottom offset |\n| left | string | Left offset |\n| zIndex | number | Stack order |\n| display | \"flex\" \\| \"block\" \\| \"inline\" \\| \"inline-block\" \\| \"grid\" \\| \"inline-flex\" | Display mode |\n| flex | string | Flex shorthand (e.g. \"1\", \"0 0 auto\", \"none\") — controls grow/shrink/basis |\n| alignSelf | string | Override parent cross-axis alignment for this child |\n| overflow | \"hidden\" \\| \"auto\" | Overflow behavior |\n| m | SpaceValue | Margin (all sides) |\n| mx | SpaceValue | Margin left + right |\n| my | SpaceValue | Margin top + bottom |\n| mt | SpaceValue | Margin top |\n| mr | SpaceValue | Margin right |\n| mb | SpaceValue | Margin bottom |\n| ml | SpaceValue | Margin left |\n\n### Visual\n\n| Prop | Type | Description |\n|------|------|-------------|\n| bg | ColorValue | Background color (token) |\n| bgImage | string | Background image URL — sets background-image, defaults background-size to cover, background-position to center, background-repeat to no-repeat |\n| bgFit | \"cover\" \\| \"contain\" | Background image sizing (default: \"cover\") — only meaningful with bgImage |\n| bgPosition | string | Background image position (default: \"center\", e.g. \"top\", \"50% 20%\") — only meaningful with bgImage |\n| bgImageOpacity | number | Fades bgImage only (0–1), independent of the element's own content/opacity — only meaningful with bgImage |\n| bgImageTint | ColorValue | Color bgImage fades toward as bgImageOpacity decreases (default: the element's own `bg`, or neutral-0) — only meaningful with bgImageOpacity |\n| color | ColorValue | Text/foreground color (token) |\n| opacity | number | Opacity (0–1) |\n| border | string | Border shorthand (e.g. \"1px solid neutral-200\" — color tokens are resolved) |\n| borderColor | ColorValue | Border color (token, e.g. \"neutral-200\", \"primary-500\") |\n| borderTop | string | Top border shorthand (color tokens resolved) |\n| borderRight | string | Right border shorthand (color tokens resolved) |\n| borderBottom | string | Bottom border shorthand (color tokens resolved) |\n| borderLeft | string | Left border shorthand (color tokens resolved) |\n| borderWidth | string | Border width (raw CSS, e.g. \"1px\", \"2px 0\") |\n| shadow | \"sm\" \\| \"md\" \\| \"lg\" \\| \"xl\" | Shadow token |\n| cursor | \"pointer\" \\| \"default\" \\| \"text\" \\| \"not-allowed\" | Cursor style |\n| pointerEvents | \"none\" \\| \"auto\" | Pointer events |\n| transform | string | CSS transform |\n| transition | string | CSS transition |\n| r | RadiusValue | Border radius (all corners) |\n| rt | RadiusValue | Border radius top |\n| rb | RadiusValue | Border radius bottom |\n| rl | RadiusValue | Border radius left |\n| rr | RadiusValue | Border radius right |\n| rtl | RadiusValue | Border radius top-left |\n| rtr | RadiusValue | Border radius top-right |\n| rbr | RadiusValue | Border radius bottom-right |\n| rbl | RadiusValue | Border radius bottom-left |\n\n### Flex (Container)\n\n| Prop | Type | Description |\n|------|------|-------------|\n| direction | \"row\" \\| \"row-reverse\" \\| \"column\" \\| \"column-reverse\" | Flex direction |\n| ax | \"start\" \\| \"center\" \\| \"end\" \\| \"between\" \\| \"around\" \\| \"even\" \\| \"stretch\" | Main-axis alignment |\n| ay | \"start\" \\| \"center\" \\| \"end\" \\| \"between\" \\| \"around\" \\| \"even\" \\| \"stretch\" | Cross-axis alignment |\n| wrap | boolean | Enable flex wrap |\n| gap | SpaceValue | Gap between children (token) |\n| p | SpaceValue | Padding (all sides) |\n| px | SpaceValue | Padding left + right |\n| py | SpaceValue | Padding top + bottom |\n| pt | SpaceValue | Padding top |\n| pr | SpaceValue | Padding right |\n| pb | SpaceValue | Padding bottom |\n| pl | SpaceValue | Padding left |\n\n### Typography\n\n| Prop | Type | Description |\n|------|------|-------------|\n| textAlign | \"left\" \\| \"center\" \\| \"right\" \\| \"justify\" | Text alignment |\n| fontFamily | \"base\" \\| {css-font-family} | Font family token |\n| fontWeight | \"regular\" \\| \"medium\" \\| \"semibold\" \\| \"bold\" (named tokens) or \"100\"–\"900\" (numeric) or \"light\" \\| \"normal\" \\| \"bolder\" (CSS pass-through) | Font weight |\n| fontSize | \"base\" \\| \"100\"–\"1000\" \\| {css-length} | Font size token |\n| lineHeight | \"none\" \\| \"tight\" \\| \"snug\" \\| \"normal\" \\| \"relaxed\" \\| \"loose\" | Line height token |\n| letterSpacing | \"tighter\" \\| \"tight\" \\| \"normal\" \\| \"wide\" \\| \"wider\" \\| \"widest\" | Letter spacing token |\n| textDecoration | \"underline\" \\| \"line-through\" \\| \"overline\" \\| \"none\" | Text decoration |\n| textTransform | \"uppercase\" \\| \"lowercase\" \\| \"capitalize\" \\| \"none\" | Text transform |\n\n**Typography defaults:** fontSize and fontWeight have **no built-in defaults** — omitting them inherits from parent elements (browser default is ~16px / normal weight). Do not set fontSize or fontWeight unless you need a non-default value. For example, `fontSize: '300'` (16px) and `fontWeight: '500'` (normal) are the inherited defaults — omit them.\n\n`we-text` variants (set via the `variant` prop) bundle typography presets. Always pair with a semantic `tag` prop for correct HTML structure:\nbody (300, tag: p/span), label (200 + medium, tag: span), footnote (100, tag: span), subheading (400 + medium, tag: h5/p), ingress (400 + lineHeight 1.6, tag: p), heading-sm (500 + bold, tag: h4), heading-md (600 + bold, tag: h3), heading-lg (700 + bold, tag: h2), heading-xl (800 + bold, tag: h1).\nVariants set size and weight only — color is always inherited or set explicitly. For muted footnote text add `color=\"neutral-400\"` explicitly.\n\n### State\n\n| Prop | Type | Description |\n|------|------|-------------|\n| hoverProps | Partial\\<DesignSystemProps\\> | Styles on :hover |\n| activeProps | Partial\\<DesignSystemProps\\> | Styles on :active |\n| focusProps | Partial\\<DesignSystemProps\\> | Styles on :focus |\n| disabledProps | Partial\\<DesignSystemProps\\> | Styles when disabled |\n\n### Additional\n\n| Prop | Type | Description |\n|------|------|-------------|\n| styles | Record\\<string, string \\| number\\> | Inline CSS applied directly to the component's own element (raw CSS values allowed). For Column, Row, Grid — use this when you need CSS the DS props don't cover. **Do not confuse with node-level styles** (see Schema Structure) which applies to a wrapper div, not the component. |\n| onClick | ActionToken | Event handler (see dynamic logic) |\n\n---\n\n## Design Tokens\n\nUse design tokens for spacing, color, radius, etc. Do not use raw CSS values unless using the styles prop.\n\nanimation.transition: '0', '100', '200', '300', '400', '500'\n\navatarSize: 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'\n\nborder.color: 'base', 'strong'\n\ncolor.base: 'white', 'black'\n\ncolor.config: 'multiplier', 'subtractor', 'saturation', 'neutralSaturation'\n\ncolor.hues: 'neutral', 'primary', 'success', 'warning', 'danger'\n\ncolor.lightness: '0', '25', '50', '75', '100', '200', '300', '400', '500', '600', '700', '800', '900', '1000'\n\ncomponent.scrollbar: 'width', 'backgroundImage', 'background', 'cornerBackground', 'thumbBoxShadow', 'thumbBorderRadius', 'thumbBackground'\n\ncomponentHeight: 'xs', 'sm', 'md', 'lg', 'xl'\n\neffect.depth: '100', '200', '300', '400', '500', 'none'\n\nfont.family: 'base', 'mozilla', 'boldonse'\n\nfont.letterSpacing: 'tighter', 'tight', 'normal', 'wide', 'wider', 'widest'\n\nfont.lineHeight: 'none', 'tight', 'snug', 'normal', 'relaxed', 'loose'\n\nfont.size: '100', '200', '300', '400', '500', '600', '700', '800', '900', '1000', 'base'\n\nfont.weight: '100', '200', '300', '400', '500', '600', '700', '800', '900', 'regular', 'medium', 'semibold', 'bold'\n\nlayout: 'xs', 'sm', 'md', 'lg'\n\nradius: '0', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'pill', 'full'\n\nshadow: 'sm', 'md', 'lg', 'xl'\n\nsize: 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'\n\nspace: '0', '100', '200', '300', '400', '500', '600', '700', '800', '900', '1000'\n\nzIndex: 'dropdown', 'sticky', 'modal', 'popover', 'toast', 'tooltip'\n\n---\n\n## Block & Entity Models\n\nAvailable data models for $query and store data:\n\nAgentSettings extends Ad4mModel:\n  Fields:\n  - currentTemplateId: string = 'default' [we://current_template]\n  - defaultTemplateId: string = 'default' [we://default_template]\n  - currentThemeId: string = 'default' [we://current_theme]\n  - defaultThemeId: string = 'default' [we://default_theme]\n  - claudeApiKey: string [we://claude_api_key]\n  - perspectiveOrder: string [we://perspective_order]\n  - globalSpaceJoined: boolean = false [we://global_space_joined]\n  - globalSpaceUrl: string [we://global_space_url]\n  - useSpaceTemplate: boolean = true [we://use_space_template]\n  Relations:\n  - installedTemplates: HasMany → Template [we://installed_template]\n  - installedThemes: HasMany → Theme [we://installed_theme]\n  - spaceTemplatePreferences: HasMany → SpaceTemplatePreference [we://space_template_preference]\n\nAudioBlock extends WeNode:\n  Fields:\n  - title: string (required) [we://title]\n  - artist: string [we://artist]\n  - audioUrl: string (required) [we://audio_url]\n  - duration: number [we://duration]\n  - albumArt: string [we://album_art]\n  - version: number [we://version]\n\nCalloutBlock extends WeNode:\n  Fields:\n  - text: string [we://text]\n  - variant: string = info [we://variant]\n  - icon: string [we://icon]\n  - version: number [we://version]\n\nChatMessage extends WeNode:\n  Fields:\n  - role: string [we://role]\n  - content: string [we://content]\n\nChatSession extends WeNode:\n  Fields:\n  - name: string [we://name]\n  - templateId: string [we://template_id]\n  Relations:\n  - messages: HasMany → ChatMessage [we://chat_message]\n\nCodeBlock extends WeNode:\n  Fields:\n  - code: string (required) [we://code]\n  - language: string [we://language]\n  - title: string [we://title]\n  - version: number [we://version]\n\nCollectionBlock extends WeNode:\n  Fields:\n  - editorState: string = null [we://editor_state]\n  - type: string [we://type]\n  - display: string [we://display]\n  - direction: string [we://direction]\n  - format: string [we://format]\n  - indent: number [we://indent]\n  - columns: number [we://columns]\n  - gap: string [we://gap]\n  - version: number [we://version]\n  - textContent: string [we://text_content]\n  Relations:\n  - children: HasMany [we://children]\n\nDividerBlock extends WeNode:\n  Fields:\n  - style: string = solid [we://style]\n  - version: number [we://version]\n\nEmbedBlock extends WeNode:\n  Fields:\n  - url: string [we://url]\n  - target: string [we://target]\n  - targetType: string [we://target_type]\n  - displayMode: string = card [we://display_mode]\n  - version: number [we://version]\n\nEventBlock extends WeNode:\n  Fields:\n  - title: string (required) [we://title]\n  - description: string [we://description]\n  - startDate: string (required) [we://start_date]\n  - endDate: string [we://end_date]\n  - location: string [we://location]\n  - allDay: boolean = false [we://all_day]\n  - version: number [we://version]\n\nFileBlock extends WeNode:\n  Fields:\n  - title: string [we://title]\n  - name: string (required) [we://name]\n  - url: string (required) [we://url]\n  - mimeType: string [we://mime_type]\n  - size: number [we://size]\n  - version: number [we://version]\n\nImageBlock extends WeNode:\n  Fields:\n  - src: string (required) [we://src]\n  - altText: string [we://altText]\n  - width: number [we://width]\n  - height: number [we://height]\n  - version: number [we://version]\n\nLinkBlock extends WeNode:\n  Fields:\n  - url: string (required) [we://url]\n  - title: string [we://title]\n  - description: string [we://description]\n  - thumbnail: string [we://thumbnail]\n  - version: number [we://version]\n\nLocationBlock extends WeNode:\n  Fields:\n  - name: string [we://name]\n  - latitude: number (required) [we://latitude]\n  - longitude: number (required) [we://longitude]\n  - address: string [we://address]\n  - city: string [we://city]\n  - countryCode: string [we://country_code]\n  - country: string [we://country]\n  - version: number [we://version]\n\nSignal extends Ad4mModel:\n  Fields:\n  - signalTypeId: string [we://signal_type_id]\n  - value: number [we://value]\n\nSignalType extends WeNode:\n  Fields:\n  - name: string [we://name]\n  - slug: string [we://slug]\n  - description: string [we://description]\n  - icon: string [we://icon]\n  - iconSecondary: string [we://icon_secondary]\n  - step: number = 1 [we://step]\n  - rangeMin: number [we://range_min]\n  - rangeMax: number = 1 [we://range_max]\n  - mode: SignalMode = 'toggle' [we://mode]\n  - aggregate: SignalAggregate = 'count' [we://aggregate]\n  - semantic: SignalSemantic = 'custom' [we://semantic]\n  - allowChange: boolean = true [we://allow_change]\n  - valueType: string = 'numeric' [we://signal_value_type]\n  - schemaVersion: number = 1 [we://schema_version]\n\nSpace extends WeNode:\n  Fields:\n  - uuid: string [we://uuid]\n  - url: string [we://url]\n  - name: string (required) [we://name]\n  - description: string (required) [we://description]\n  - access: string = 'personal' [we://access]\n  - discovery: string = 'hidden' [we://discovery]\n  - avatar: string [we://image]\n  - coverImage: string [we://thumbnail]\n  - defaultTemplateId: string [we://default_template_id]\n  - defaultThemeId: string [we://default_theme_id]\n  - enabledModules: string [we://enabled_modules]\n  Relations:\n  - location: HasOne [we://location]\n\nSpaceTemplatePreference extends WeNode:\n  Fields:\n  - spaceUrl: string [we://space_url]\n  - preference: string [we://preference]\n\nTagBlock extends WeNode:\n  Fields:\n  - name: string (required) [we://name]\n  - color: string [we://color]\n  - version: number [we://version]\n\nTaskBlock extends WeNode:\n  Fields:\n  - title: string (required) [we://title]\n  - description: string [we://description]\n  - status: string = todo [we://status]\n  - priority: string = medium [we://priority]\n  - dueDate: string [we://due_date]\n  - assignee: string [we://assignee]\n  - version: number [we://version]\n\nTemplate extends WeNode:\n  Fields:\n  - name: string [we://name]\n  - description: string [we://description]\n  - icon: string [we://icon]\n  - origin: string [we://origin]\n  - version: number = 1 [we://version]\n  - slug: string [we://slug]\n  - schema: string = null [we://template_schema]\n  - themeId: string [we://theme_id]\n  Relations:\n  - screenshots: HasMany → ImageBlock [we://screenshot]\n\nTextBlock extends WeNode:\n  Fields:\n  - type: string [we://type]\n  - direction: string [we://direction]\n  - format: string [we://format]\n  - indent: number [we://indent]\n  - textFormat: number [we://textFormat]\n  - textStyle: string [we://textStyle]\n  - listType: string [we://listType]\n  - start: number [we://start]\n  - tag: string [we://tag]\n  - text: string [we://text]\n  - version: number [we://version]\n\nTheme extends WeNode:\n  Fields:\n  - name: string [we://name]\n  - description: string [we://description]\n  - icon: string [we://icon]\n  - origin: string [we://origin]\n  - slug: string [we://slug]\n  - version: number = 1 [we://version]\n  - css: string = null [we://stylesheet]\n  - overrides: string = null [we://token_overrides]\n  Relations:\n  - screenshots: HasMany → ImageBlock [we://screenshot]\n\nVideoBlock extends WeNode:\n  Fields:\n  - title: string [we://title]\n  - url: string (required) [we://url]\n  - duration: number [we://duration]\n  - thumbnail: string [we://thumbnail]\n  - provider: string [we://provider]\n  - version: number [we://version]\n\nWeNode extends Ad4mModel:\n  Relations:\n  - comments: HasMany [we://comment]\n  - signals: HasMany → Signal [we://signal]\n\n---\n\n## Stores\n\nStores provide state (readable values) and actions (methods) for dynamic logic in schemas.\nAccess state with $store and call actions with $action.\nFor ephemeral/form state, use $localState/$local/$setLocal instead of stores (see Dynamic Logic).\n\nAdamStore:\n- State:\n  - adamClient: Ad4mClient | undefined\n  - me: Agent | undefined\n  - allPerspectives: array of PerspectiveProxy objects (all AD4M perspectives)\n  - currentPerspective: PerspectiveProxy | null (the perspective currently being viewed)\n  - currentPerspectiveModels: ModelManifestEntry[] (non-WE SHACL models from the current perspective; injected as externalModels into AI messages)\n  - isWeSpace: boolean — true once the current perspective is confirmed to have WE's Space SDNA installed (false for a joined-but-foreign perspective, e.g. one synced in from Flux)\n  - personalSpaces: array of Space objects (local/personal spaces; all Space fields)\n  - sharedSpaces: array of Space objects (shared/neighbourhood spaces; all Space fields)\n  - bootState: string\n  - passwordError: string | undefined\n  - loginLoading: boolean\n  - creatingSpace: boolean (true while a new space is being created)\n  - agents: AgentProfileSummary[] — cache of all fetched agent profiles (did, firstName, lastName, handle, bio, avatar, coverImage, location)\n  - ownAgent: AgentProfileSummary | undefined — reactive accessor for the current user's own profile (derived from agents cache)\n  - orderedSidebarItems: array of sidebar items in user-defined order (uuid, name, avatar, spaceId) — personal + shared spaces merged\n- Actions:\n  - navigate(to: string, options?): navigates to a route\n  - addNewSpace(space: Space): adds a new space\n  - createSpace(name: string, description: string, shared: boolean, imageFile?: File): creates a new space with full setup\n  - initializeAsWeSpace(name: string, description: string, avatarValue?: File | string | null): installs WE's Space SDNA into the current, already-joined, foreign-native perspective (e.g. one synced in from Flux) and creates a Space entity in place — access is always 'shared' since the perspective is already a published neighbourhood\n  - switchPerspective(uuid: string): switches to a perspective by UUID, registers its SHACL models as dynamic model classes, and populates currentPerspectiveModels\n  - removePerspective(uuid: string): removes a perspective by UUID\n  - reorderPerspectives(newOrder: string[]): reorders the sidebar items by UUID array\n  - login(password: string): logs in the agent with password\n  - logout(): locks the agent and returns to login screen\n  - fetchAgent(did: string): fetches and caches an agent's profile from their public AD4M perspective\n  - updateOwnProfile(fields: { firstName?, lastName?, handle?, bio? }): updates own profile text fields and publishes to public perspective\n  - updateProfileImage(field: \"avatar\" | \"coverImage\", imageFile: File): uploads image to FILE_STORAGE_LANGUAGE and publishes expression URL to public perspective\n  - updateAgentLocation(update: { latitude?, longitude?, city?, country?, countryCode? }): merges location update into cache and publishes to public perspective\n  - cleanupSpaceSdna(uuid?: string): one-time remediation for a perspective that accumulated duplicate SDNA installs (e.g. from before joinSpace checked for existing SDNA before installing) — removes the redundant duplicate link copies. Defaults to the current perspective. Returns a display-ready summary string naming how many links were removed and the DIDs that authored them (your own DID annotated with \"(you)\"), or an empty string if nothing needed cleaning up\n\nRouteStore:\n- State:\n  - currentPath: string (the current route path)\n  - segments: string[] (currentPath split by \"/\", e.g. [\"/foo/bar\"] → [\"foo\", \"bar\"])\n- Actions:\n  - navigate(to: string, options?): navigates to a route\n\nThemeStore:\n- State:\n  - builtInThemes: array of ThemeData objects — built-in registry themes (origin: \"built-in\", always available)\n  - installedThemes: array of ThemeData objects — user-installed themes from root perspective (origin: \"custom\" | \"marketplace\")\n  - spaceThemes: array of ThemeData objects — themes stored in the current space perspective (origin: \"custom\")\n  - allThemes: array of ThemeData objects — union of builtInThemes + visible installedThemes + spaceThemes (hidden themes filtered out)\n  - currentThemeId: string — id of the currently active theme\n  - currentTheme: ThemeData — the currently active theme object (id, name, icon, origin)\n  - defaultThemeId: string — id of the user's preferred default theme (used for bootscreen, shell, and future space-override). Persisted to AgentSettings.defaultThemeId\n  - themeManagementList: ThemeManagementItem[] — flat list of all themes (built-in + all custom) with management metadata (id, name, icon, isBuiltIn, isInstalled, isDefault)\n- Actions:\n  - setCurrentTheme(themeId: string): sets and persists the active theme\n  - setDefaultTheme(themeId: string): sets the preferred default theme (persists to AgentSettings.defaultThemeId)\n  - toggleThemeInstalled(themeId: string): toggles a custom theme visible/hidden in pickers; does not delete the theme\n  - installFromMarketplace(marketplaceThemeId: string): installs a marketplace theme into installedThemes\n  - uninstallTheme(themeId: string): removes an installed theme (deletes the model)\n  - deleteTheme(themeId: string): permanently deletes a custom theme\n\nTemplateStore:\n- State:\n  - personalTemplates: array of TemplateSchema objects — core templates plus user's installed custom templates (excludes space templates)\n  - spaceTemplates: array of TemplateSchema objects — templates loaded from the current space perspective\n  - builtInTemplates: array of TemplateSchema objects — built-in system templates (always available)\n  - myTemplates: array of TemplateSchema objects — user's installed custom templates only (excludes built-in and space templates)\n  - allTemplates: array of TemplateSchema objects — union of built-in + personal + space templates\n  - shellTemplates: array of TemplateSchema objects (static system pages: profile, settings, tests)\n  - currentTemplate: TemplateSchema (the active template)\n  - operationLoading: unknown\n  - activeShellView: string | null (id of the currently open shell overlay: 'profile' | 'settings' | 'schema-tests' | 'landing-page' | null)\n  - templateManagementList: TemplateManagementItem[] — flat list of all templates with management metadata (id, name, icon, description, isBuiltIn, isInstalled, isDefault)\n  - switcherGroups: TemplateSwitcherGroup[] — pre-grouped flat items for the template switcher UI; each group has { label: string, items: { id, name, icon }[] }. Groups: \"Space templates\", \"My templates\", \"Built-in\". Use $filter where: { name: { contains: ... } } for search since items have a flat name field.\n- Actions:\n  - updateTemplate(newTemplate: TemplateSchema): updates the current template\n  - switchTemplate(newTemplateId: string): switches to another template\n  - removeTemplate(): removes the current template\n  - saveTemplate(name: string): saves the current template\n  - toggleInstalled(): unknown\n  - setDefaultTemplate(): unknown\n  - deleteTemplate(): unknown\n  - openShellView(id: string): opens a shell overlay by id ('profile' | 'settings' | 'schema-tests' | 'landing-page')\n  - closeShellView(): closes the currently open shell overlay\n\nSpaceStore:\n- State:\n  - memberDids: string[] — DIDs of all members in the current space (includes own DID)\n  - members: AgentProfileSummary[] — cached profiles for all memberDids\n  - spaceDefaultTemplateId: string — the current space's default template ID (empty string when no space is active)\n  - currentSpace: Space | null — the current space model (all Space fields: uuid, url, name, description, access, discovery, avatar, coverImage, defaultTemplateId, defaultThemeId, location, plus id/author/createdAt)\n  - foreignSpacePrefill: { name, description, avatar } | null — detected from a foreign app's own model (e.g. Flux's Community) for prefilling the \"Initialize as WE space\" gate; null once the perspective is a WE space or no recognized foreign model is found\n  - signalTypes: array of SignalType objects (community-created reaction/vote types)\n  - signalTypesBySlug: Record<slug, SignalType> — computed map; access via { $store: \"spaceStore.signalTypesBySlug.<slug>\" }; use .id for the UUID\n  - enabledModules: string[] — ids of the feature modules this space has turned on. An unset value means \"not decided\", not \"none\": it falls back to every registered module, so spaces predating the setting keep the chrome they had\n  - moduleSettings: { id, name, description, icon, enabled }[] — every registered module paired with whether this space has it on; the shape the settings list renders\n- Actions:\n  - createPost(editorState: unknown): creates a new post\n  - updatePost(postId: string, editorState: unknown): reconciles an edited post against its existing blocks — updates/reuses blocks whose id survived the edit, creates new ones, deletes ones no longer present\n  - deletePost(postId: string): permanently deletes a post and all of its contained blocks (recursive, atomic)\n  - updateSpaceImage(field: \"avatar\" | \"coverImage\", imageFile: File): uploads and sets the space avatar or cover image\n  - createSignalType(config: Partial<SignalType>): creates a new signal type in the community; slug auto-derived from name if blank\n  - upsertSignal(nodeId: string, signalTypeId: string, value: number): adds or updates a signal on a node; value=0 deletes it\n  - navigateToSpace(spaceId: string, view?: string): navigates to a space — accepts a perspective UUID or a neighbourhood CID (sharedUrl without the neighbourhood:// prefix); pre-loads space templates before switching so the template and data arrive together\n  - setModuleEnabled(moduleId: string, enabled: boolean): turns a feature module on or off for the current space; writes the resolved list, so the first toggle also pins whatever was on by fallback\n\nAiStore:\n- State:\n  - models: array of Model objects\n  - tasks: array of AITask objects\n  - isOpen: unknown\n  - messages: unknown\n  - isStreaming: unknown\n  - streamingContent: unknown\n  - apiKeyConfigured: unknown\n  - templateName: unknown\n  - templateIcon: unknown\n  - isReadOnly: unknown\n  - hasPendingChanges: unknown\n  - pickerOpen: unknown\n  - pickerAction: unknown\n  - pickerDefaultName: unknown\n  - pickerDefaultIcon: unknown\n  - pickerShowDestination: unknown\n  - sessions: unknown\n  - activeSessionId: unknown\n  - panelMode: unknown\n  - schemaJson: unknown\n  - operationLoading: unknown\n  - canUndo: boolean (true when there are schema edits that can be undone)\n  - canRedo: boolean (true when there are undone schema edits that can be redone)\n- Actions:\n  - handleSchemaPrompt(prompt: string): generates a schema from a prompt\n  - sendMessage(): unknown\n  - close(): unknown\n  - toggle(): toggles the AI chat panel open/closed\n  - setApiKey(): unknown\n  - startFork(): unknown\n  - startFresh(): unknown\n  - confirmPicker(): unknown\n  - cancelPicker(): unknown\n  - newChat(): unknown\n  - switchSession(): unknown\n  - deleteSession(): unknown\n  - setPanelMode(): unknown\n  - onSchemaEdit(): unknown\n  - undo(): undoes the last schema edit\n  - redo(): redoes the last undone schema edit\n\nAppStore:\n- State:\n  - apps: RegisteredApp[] — list of registered external apps (id, name, image)\n  - appsWithWe: unknown\n  - activeAppId: string | null — id of the currently active app, or null if none\n- Actions:\n  - activateApp(id: string): activates an app and switches to its view\n  - deactivateApp(): deactivates the current app and returns to the template view\n\n---\n\n## Store Usage Patterns\n\nReading state:\n{ \"$store\": \"storeName.property\" }\nExample: { \"$store\": \"routeStore.currentPath\" }\n\nCalling actions:\n{ \"$action\": \"storeName.method\", \"args\": [...] }\nExample: { \"$action\": \"routeStore.navigate\", \"args\": [\"/home\"] }\n\nIterating over store data:\n{\n  \"type\": \"$each\",\n  \"props\": { \"items\": { \"$store\": \"adamStore.personalSpaces\" }, \"as\": \"space\" },\n  \"children\": [\n    {\n      \"type\": \"CircleButton\",\n      \"props\": {\n        \"label\": \"$space.name\",\n        \"onClick\": { \"$action\": \"routeStore.navigate\", \"args\": [{ \"$concat\": [\"/space/\", \"$space.uuid\"] }] }\n      }\n    }\n  ]\n}\n\nConditional rendering from store:\n{\n  \"type\": \"$if\",\n  \"props\": {\n    \"condition\": { \"$eq\": [{ \"$store\": \"routeStore.currentPath\" }, \"/\"] },\n    \"then\": { \"type\": \"we-text\", \"children\": [\"Home\"] },\n    \"else\": { \"type\": \"we-text\", \"children\": [\"Not home\"] }\n  }\n}\n\nDeriving options from store:\n{\n  \"$map\": {\n    \"items\": { \"$store\": \"templateStore.templates\" },\n    \"select\": { \"name\": \"$item.meta.name\", \"icon\": \"$item.meta.icon\" }\n  }\n}\n\nQuerying model data:\n{\n  \"$query\": { \"entity\": \"TaskBlock\", \"where\": { \"status\": \"todo\" } }\n}\n\nEager-loading relations with include (most common relational pattern):\nWhen you need related data displayed alongside a list, use include to hydrate relations in one query.\n\nExample — Channel list with conversation count and latest conversation:\n{\n  \"type\": \"$each\",\n  \"props\": {\n    \"items\": {\n      \"$query\": {\n        \"entity\": \"Channel\",\n        \"dataset\": \"$currentDataset\",\n        \"include\": {\n          \"$conversationCount\": { \"from\": \"conversations\", \"count\": true },\n          \"$latestConversation\": { \"from\": \"conversations\", \"order\": { \"createdAt\": \"desc\" }, \"limit\": 1 }\n        }\n      }\n    },\n    \"as\": \"channel\"\n  },\n  \"children\": [{\n    \"type\": \"Row\",\n    \"children\": [\n      { \"type\": \"we-text\", \"children\": [\"$channel.name\"] },\n      { \"type\": \"we-text\", \"children\": [\"$channel.$conversationCount\"] }\n    ]\n  }]\n}\n\nExample — Nested include (Conversations with their messages):\n{\n  \"$query\": {\n    \"entity\": \"Conversation\",\n    \"dataset\": \"$currentDataset\",\n    \"include\": {\n      \"messages\": {\n        \"order\": { \"createdAt\": \"desc\" },\n        \"limit\": 20\n      }\n    }\n  }\n}\nEach conversation in the result has a messages array of hydrated Message instances.\nNesting works to any depth: \"include\": { \"messages\": { \"include\": { \"reactions\": true } } }\n\nRelational drill-down (master-detail navigation across entity relations):\nUse routes + a $query `scope` when you navigate to a detail route and need only that record's children.\nscope.anchor is the parent entity type; scope.via is its HasMany relation (see externalModels) whose targets\nare the query's entity; scope.anchorId is the parent record's id. The adapter resolves the relation to a\nbackend handle, so no protocol details live in the template.\nrouteStore.segments.N extracts the Nth dynamic path segment (segments splits currentPath by \"/\").\n\nExample — Channel list → Conversation list:\n{\n  \"routes\": [\n    {\n      \"path\": \"/\",\n      \"type\": \"Column\",\n      \"props\": { \"gap\": \"300\", \"p\": \"400\" },\n      \"children\": [{\n        \"type\": \"$each\",\n        \"props\": {\n          \"items\": { \"$query\": { \"entity\": \"Channel\", \"dataset\": \"$currentDataset\" } },\n          \"as\": \"channel\"\n        },\n        \"children\": [{\n          \"type\": \"we-button\",\n          \"props\": {\n            \"variant\": \"ghost\",\n            \"onClick\": { \"$action\": \"routeStore.navigate\", \"args\": [{ \"$concat\": [\"/channels/\", \"$channel.id\"] }] }\n          },\n          \"children\": [\"$channel.name\"]\n        }]\n      }]\n    },\n    {\n      \"path\": \"/channels/:channelId\",\n      \"type\": \"Column\",\n      \"props\": { \"gap\": \"300\", \"p\": \"400\" },\n      \"children\": [{\n        \"type\": \"$each\",\n        \"props\": {\n          \"items\": {\n            \"$query\": {\n              \"entity\": \"Conversation\",\n              \"scope\": { \"anchor\": \"Channel\", \"via\": \"conversations\", \"anchorId\": { \"$store\": \"routeStore.segments.1\" } },\n              \"dataset\": \"$currentDataset\"\n            }\n          },\n          \"as\": \"convo\"\n        },\n        \"children\": [{\n          \"type\": \"we-text\",\n          \"children\": [\"$convo.conversationName\"]\n        }]\n      }]\n    }\n  ]\n}\nNotes:\n- Use include when you need related data displayed inline (e.g. a post with its comments, a channel with its conversation count).\n- Use a scope drill-down when you're on a detail route and want only children belonging to the current record.\n- dataset must point to the dataset that holds the data. For external apps (e.g. Flux) opened as a WE space, use \"$currentDataset\".\n- The relation name (in include, or scope.via) is the HasMany field name on the parent entity.\n\nLocal state (form with validation):\n{\n  \"type\": \"Column\",\n  \"$localState\": {\n    \"name\": {\n      \"type\": \"string\",\n      \"initial\": \"\",\n      \"validate\": [{ \"rule\": \"required\" }, { \"rule\": \"minLength\", \"value\": 2 }]\n    },\n    \"loading\": { \"type\": \"boolean\", \"initial\": false }\n  },\n  \"children\": [\n    {\n      \"type\": \"we-form-field\",\n      \"props\": { \"label\": \"Name\", \"error\": { \"$error\": \"name\" } },\n      \"children\": [{\n        \"type\": \"we-input\",\n        \"props\": {\n          \"value\": { \"$local\": \"name\" },\n          \"onInput\": { \"$setLocal\": \"name\", \"from\": \"$event.detail\" },\n          \"onBlur\": { \"$touch\": \"name\" }\n        }\n      }]\n    },\n    {\n      \"type\": \"we-button\",\n      \"props\": {\n        \"text\": \"Submit\",\n        \"loading\": { \"$local\": \"loading\" },\n        \"disabled\": { \"$not\": { \"$formValid\": \"$scope\" } },\n        \"onClick\": [\n          { \"$touch\": \"$all\" },\n          { \"$if\": { \"condition\": { \"$formValid\": \"$scope\" }, \"then\": { \"$action\": \"myStore.submit\", \"args\": [{ \"$local\": \"name\" }] } } }\n        ]\n      }\n    }\n  ]\n}\n\nRepeating lists with $each:\nALWAYS use $each for lists of similar items — never duplicate the same node structure.\nWrite the template once; $each renders it for each item.\n\nUse literal arrays for fixed/sample data:\n{\n  \"type\": \"$each\",\n  \"props\": {\n    \"items\": [\n      { \"title\": \"First Post\", \"text\": \"Hello world.\", \"author\": \"Alice\" },\n      { \"title\": \"Second Post\", \"text\": \"Another update.\", \"author\": \"Bob\" }\n    ],\n    \"as\": \"post\"\n  },\n  \"children\": [\n    {\n      \"type\": \"Column\",\n      \"props\": { \"bg\": \"neutral-0\", \"r\": \"400\", \"border\": \"1px solid neutral-200\", \"p\": \"400\", \"gap\": \"300\" },\n      \"children\": [\n        {\n          \"type\": \"Row\",\n          \"props\": { \"gap\": \"300\", \"ay\": \"center\" },\n          \"children\": [\n            { \"type\": \"we-avatar\", \"props\": { \"initials\": \"$post.author\", \"size\": \"sm\" } },\n            { \"type\": \"we-text\", \"props\": { \"variant\": \"label\" }, \"children\": [\"$post.author\"] }\n          ]\n        },\n        { \"type\": \"we-text\", \"props\": { \"variant\": \"heading-sm\" }, \"children\": [\"$post.title\"] },\n        { \"type\": \"we-text\", \"children\": [\"$post.text\"] }\n      ]\n    }\n  ]\n}\n\nUse $query or $store for dynamic data (more common in production):\n{ \"type\": \"$each\", \"props\": { \"items\": { \"$query\": { \"entity\": \"TextBlock\" } }, \"as\": \"post\" }, \"children\": [...] }\n{ \"type\": \"$each\", \"props\": { \"items\": { \"$store\": \"spaceStore.posts\" }, \"as\": \"post\" }, \"children\": [...] }\n\nPer-item customization inside $each:\nTo style or highlight specific items, add a data flag to those items and use $if on the flag inside the template. Do NOT use $eq: [\"$index\", N] comparisons — they are fragile, repetitive, and break when items are reordered.\nExample: add \"highlighted\": true to one item's data, then use $if on \"$post.highlighted\" in the template:\n{ \"type\": \"$if\", \"props\": { \"condition\": \"$post.highlighted\", \"then\": { \"type\": \"we-badge\", \"props\": { \"variant\": \"primary\" }, \"children\": [\"Featured\"] } } }\nFor conditional props (e.g. different bg on highlighted items):\n{ \"bg\": { \"$if\": { \"condition\": \"$post.highlighted\", \"then\": \"primary-50\", \"else\": \"neutral-0\" } } }\n\nBoolean toggle (show/hide, expand/collapse):\n{\n  \"type\": \"Column\",\n  \"$localState\": { \"showDetails\": { \"type\": \"boolean\", \"initial\": false } },\n  \"children\": [\n    { \"type\": \"we-button\", \"props\": { \"variant\": \"ghost\", \"onClick\": { \"$toggleLocal\": \"showDetails\" } }, \"children\": [\"Toggle Details\"] },\n    { \"type\": \"$if\", \"props\": { \"condition\": { \"$local\": \"showDetails\" }, \"then\": { \"type\": \"we-text\", \"children\": [\"Details content here\"] } } }\n  ]\n}\n\nSignal types (community-specific reactions/votes):\nSignal types are created per-community by the user. Never hardcode signal type UUIDs in schemas.\nInstead reference them by slug through spaceStore.signalTypesBySlug.\n\nALWAYS ask the user: \"What slug should I use? (e.g. 'like', 'upvote', 'star')\"\nThen use that slug in the pattern below.\n\nPattern — live wired SignalControl (inside a $each over a model with $query include):\n{\n  \"type\": \"$each\",\n  \"props\": {\n    \"items\": {\n      \"$query\": {\n        \"entity\": \"MyBlock\",\n        \"include\": {\n          \"$totalLikeCount\": {\n            \"from\": \"signals\",\n            \"where\": { \"signalTypeId\": { \"$store\": \"spaceStore.signalTypesBySlug.like.id\" } },\n            \"count\": true\n          },\n          \"$myLikeSignal\": {\n            \"from\": \"signals\",\n            \"where\": {\n              \"signalTypeId\": { \"$store\": \"spaceStore.signalTypesBySlug.like.id\" },\n              \"author\": \"$me.did\"\n            },\n            \"limit\": 1\n          }\n        }\n      }\n    },\n    \"as\": \"item\"\n  },\n  \"children\": [\n    {\n      \"type\": \"$if\",\n      \"props\": {\n        \"condition\": { \"$store\": \"spaceStore.signalTypesBySlug.like\" },\n        \"then\": {\n          \"type\": \"SignalControl\",\n          \"props\": {\n            \"signalType\": { \"$store\": \"spaceStore.signalTypesBySlug.like\" },\n            \"myValue\": \"$item.$myLikeSignal.value\",\n            \"aggregate\": \"$item.$totalLikeCount\",\n            \"onSignal\": {\n              \"$action\": \"spaceStore.upsertSignal\",\n              \"args\": [\"$item.id\", { \"$store\": \"spaceStore.signalTypesBySlug.like.id\" }, \"$arg\"]\n            }\n          }\n        }\n      }\n    }\n  ]\n}\n\nNotes:\n- The $if guard hides SignalControl if the community hasn't created a signal type with that slug.\n- Replace \"like\" with the user's slug throughout (in $store paths and args).\n- $query include adds $totalLikeCount and $myLikeSignal as computed properties on each item.\n- signalType prop accepts the full SignalType object (provides icon, mode, range to the UI component).\n\nPreview / mockup mode (static, no store wiring):\n{\n  \"type\": \"SignalControl\",\n  \"props\": {\n    \"preview\": true,\n    \"signalType\": { \"icon\": \"❤️\", \"mode\": \"toggle\", \"rangeMin\": 0, \"rangeMax\": 1 }\n  }\n}\nUse preview: true when sketching a layout without real data. Remove it (and add the full wiring above) when going live.\n\n---\n\n## Routing Structure\n\nDefine nested routes using the \"routes\" array at the root node of the schema.\nEach route object describes a path and the UI node to render when that path is active.\nRoutes can be nested to support sub-pages and layouts.\n\nRoute objects follow the same structure as schema nodes, with an additional \"path\" property.\n\n- The \"routes\" array MUST be placed on the ROOT template node (or on a route node for nested routing). The router only reads routes from these positions — placing routes on an arbitrary child node means the router will never find them and nothing will render.\n- Use \"path: '*'\" or \"path: '/*'\" for catch-all/not-found routes.\n- Use \":paramName\" for dynamic route parameters (e.g. \"/space/:spaceId\").\n- Use nested \"routes\" arrays for sub-pages and layouts.\n- Use { \"type\": \"$routes\" } in children to indicate where nested routes should render. The $routes outlet can be deeply nested — only the routes array placement matters.\n- EVERY { \"type\": \"$routes\" } outlet MUST have a \"routes\" array defined on the same node or an ancestor node. A $routes outlet without a routes array is invalid and will fail validation.\n- NEVER duplicate a route path — every route in the same \"routes\" array MUST have a unique path.\n- When using tabs, each tab's key and navigate path MUST have a matching route. Ensure a 1:1 correspondence between tabs and routes.\n\n### Tabs + Routing\n\nIMPORTANT: we-tabs only manages visual selection — clicking a tab does NOT navigate automatically.\nEach we-tab MUST have an onClick with { \"$action\": \"routeStore.navigate\" } to trigger route changes.\nBind we-tabs selectedKey to the matching route segment so the active tab stays in sync.\n(Alternatively, a single onChange on we-tabs can replace per-tab onClick — see onChange pattern below.)\n\nRecommended pattern — header above tabs (routes on ROOT, $routes outlet nested inside):\n{\n  \"type\": \"Column\",\n  \"routes\": [\n    { \"path\": \"/\", \"type\": \"we-text\", \"children\": [\"Select a tab\"] },\n    { \"path\": \"/posts\", \"type\": \"Column\", \"children\": [{ \"type\": \"we-text\", \"children\": [\"Posts content\"] }] },\n    { \"path\": \"/articles\", \"type\": \"Column\", \"children\": [{ \"type\": \"we-text\", \"children\": [\"Articles content\"] }] }\n  ],\n  \"children\": [\n    { \"type\": \"Row\", \"props\": { \"p\": \"300\", \"ax\": \"between\" }, \"children\": [\n      { \"type\": \"we-text\", \"props\": { \"variant\": \"heading-lg\" }, \"children\": [\"My App\"] }\n    ]},\n    {\n      \"type\": \"we-tabs\",\n      \"props\": { \"selectedKey\": { \"$store\": \"routeStore.segments.0\" } },\n      \"children\": [\n        { \"type\": \"we-tab\", \"props\": { \"key\": \"posts\", \"label\": \"Posts\", \"onClick\": { \"$action\": \"routeStore.navigate\", \"args\": [\"/posts\"] } } },\n        { \"type\": \"we-tab\", \"props\": { \"key\": \"articles\", \"label\": \"Articles\", \"onClick\": { \"$action\": \"routeStore.navigate\", \"args\": [\"/articles\"] } } }\n      ]\n    },\n    { \"type\": \"$routes\" }\n  ]\n}\nNote: \"routes\" is on the root Column, NOT on a child. The $routes outlet is a child — that's fine. Only the routes array placement matters.\n\nWRONG — two common mistakes that produce empty tabs (validator will catch both):\n{\n  // MISTAKE 1: routes defined on an inner child node, not the root.\n  // The router never inspects children for routes arrays — this routes array is invisible.\n  \"type\": \"Column\",\n  \"children\": [\n    { \"type\": \"we-tabs\", \"children\": [\"...tabs...\"] },\n    {\n      \"type\": \"Column\",\n      \"routes\": [                          // ← WRONG: router never reads this\n        { \"path\": \"/posts\", \"type\": \"Column\", \"children\": [\"...\"] }\n      ],\n      \"children\": [{ \"type\": \"$routes\" }]  // ← outlet here does nothing without a live routes array\n    }\n  ]\n}\n\n{\n  // MISTAKE 2: using { type: \"$routes\" } as a route entry's component type.\n  // $routes is an outlet slot marker — as a leaf route entry it has no children injected,\n  // so it returns null. Every tab navigates to a route that renders nothing.\n  \"type\": \"Column\",\n  \"routes\": [\n    { \"path\": \"/posts\", \"type\": \"$routes\" }  // ← WRONG: renders null, use a real component\n  ],\n  \"children\": [{ \"type\": \"$routes\" }]\n}\n\nAlternative: single onChange on we-tabs (fires with $event.detail.value = selected key):\n{ \"onChange\": { \"$action\": \"routeStore.navigate\", \"args\": [{ \"$concat\": [\"/\", \"$arg.detail.value\"] }] } }\nThis replaces all per-tab onClick handlers but requires $concat to build the path.\n\nNested routing example:\n{\n  \"routes\": [\n    { \"path\": \"*\", \"type\": \"Column\", \"props\": { \"ax\": \"center\", \"p\": \"500\" }, \"children\": [{ \"type\": \"we-text\", \"children\": [\"Page not found\"] }] },\n    { \"path\": \"/\", \"type\": \"Column\", \"props\": { \"ax\": \"center\", \"p\": \"500\" }, \"children\": [{ \"type\": \"we-text\", \"children\": [\"Home page\"] }] },\n    {\n      \"path\": \"/space/:spaceId\",\n      \"type\": \"Row\",\n      \"children\": [{ \"type\": \"$routes\" }],\n      \"routes\": [\n        { \"path\": \"/*\", \"type\": \"we-text\", \"children\": [\"Space page not found\"] },\n        { \"path\": \"/\", \"type\": \"we-text\", \"children\": [\"About sub-page\"] },\n        { \"path\": \"/posts\", \"type\": \"Column\", \"children\": [{ \"type\": \"$routes\" }],\n          \"routes\": [\n            { \"path\": \"/*\", \"type\": \"we-text\", \"children\": [\"Post not found\"] },\n            { \"path\": \"/\", \"type\": \"we-text\", \"children\": [\"No posts selected\"] },\n            { \"path\": \"/1\", \"type\": \"we-text\", \"children\": [\"Post 1 page\"] }\n          ]\n        }\n      ]\n    }\n  ]\n}\n\n---\n\n## Rules & Best Practices\n\n- Always use the correct prop names and value types for each component.\n- Never use null as a value in any children array. Only use valid schema nodes or strings.\n- Each item in a children array must be either a valid schema node object or a string.\n- Use design tokens for spacing, color, radius, etc. (do not use raw CSS except in styles).\n- Use the styles prop for custom inline CSS (e.g., { \"width\": \"100px\" }).\n- Use hoverProps for hover state overrides, activeProps for pressed state, focusProps for focus state. Supported on @we/primitives (we-text, we-button, etc.) and layout components (Column, Row).\n- Use dynamic logic tokens ($store, $if, $action, etc.) for reactivity and conditional behavior.\n- Nest components using children or slots as needed.\n- For routes, use the routes array with path and child nodes.\n- Do not invent new components or props — use only those listed in the component registry.\n- Do not set props to their default/inherited values — omit them. fontSize and fontWeight inherit from parents (~16px / normal), so only set them when you need a different value.\n- Omit empty `props` and `children` — both are optional. Do not write `props: {}` or `children: []`.\n- Do not use `as const` on schema node `type` fields — `SchemaNode.type` is `string`, so it is never needed.\n- For icon-only buttons, nest a `we-icon` child inside `we-button` rather than using a `text` prop with a Unicode character. **Omit the `size` prop on `we-icon` when nesting inside sized primitives** (`we-button`, `we-input`, `we-badge`, `we-textarea`) — these components auto-size nested icons via `--we-context-icon-size` (xs→12px, sm→16px, md→24px, lg→32px, xl→40px). Only set an explicit icon `size` if you need to override the automatic sizing. Example: `{ type: 'we-button', props: { variant: 'ghost', size: 'sm' }, children: [{ type: 'we-icon', props: { name: 'x' } }] }`.\n- NEVER pass a bare number like \"16\" as a size or dimension prop — it is not valid CSS. Always check the component's declared prop type: if it's a string union, use one of the listed values; if it accepts arbitrary strings, include a CSS unit (e.g. \"16px\", \"2rem\").\n- For interactive list items and selectable options, use `we-button` with variant switching (e.g., `secondary` when selected, `ghost` when not) instead of manually styling `Row` with cursor, bg, and onClick. Buttons provide hover, focus, and active states for free.\n- For card-like layouts, compose from `Column` with DS props (bg, r, border, p, gap). This gives full control over spacing and appearance.\n- When rendering lists of similar items (posts, cards, users, etc.), ALWAYS use `$each` with a single template child — never duplicate the same node structure multiple times. Use literal arrays in `items` for static data, or `$store`/`$query` for dynamic data.\n\n### Icon Names (Phosphor Icons)\n\nwe-icon uses **Phosphor Icons** (v2.1). Do NOT use Heroicons, Material, or FontAwesome names.\nPhosphor names are lowercase-kebab-case. The `weight` prop controls style: \"regular\" (default), \"bold\", \"fill\", \"light\", \"thin\", \"duotone\".\n\nCommon Phosphor icon names (use these, NOT Heroicons equivalents):\n- Navigation: house, arrow-left, arrow-right, caret-left, caret-right, caret-down, caret-up, arrows-clockwise\n- Actions: plus, minus, x, check, pencil-simple, trash, copy, download, upload, share, link, magnifying-glass, funnel, sliders-horizontal\n- Communication: chat-circle, chat-dots, envelope-simple, paper-plane-tilt, bell, megaphone\n- Social: heart, thumbs-up, thumbs-down, star, share-network, users, user, user-plus\n- Media: image, camera, play, pause, stop, microphone, speaker-high, video-camera\n- Files: file, file-text, folder, folder-open, clipboard-text, note\n- UI: list, squares-four, gear, dots-three, dots-three-vertical, warning, info, question, check-circle, x-circle, eye, eye-slash\n- Misc: lightning, rocket, globe, map-pin, calendar, clock, tag, bookmark, flag, lock, shield-check\n\nWRONG icon names (Heroicons/Material — do NOT use):\n- \"chat-bubble-left\" → use \"chat-circle\"\n- \"chevron-right\" → use \"caret-right\"\n- \"cog\" / \"settings\" → use \"gear\"\n- \"trash-can\" → use \"trash\"\n- \"magnifying-glass-circle\" → use \"magnifying-glass\"\n- \"home\" → use \"house\"\n- \"favorite\" → use \"heart\"\n- \"delete\" → use \"trash\"\n- \"search\" → use \"magnifying-glass\"\n- \"close\" → use \"x\"\n- \"menu\" → use \"list\"\n- All schemas must be valid JSON with property names and string values in double quotes.\n- The meta property at the root is required: { \"meta\": { \"name\": \"...\", \"description\": \"...\", \"icon\": \"...\" } }\n- Always set `bg: 'neutral-50'` on root-level schema nodes (templates, pages). This ensures proper background in all themes — without it, dark mode renders white backgrounds.\n\nMost @we/primitives inherit all Design System Props documented above (layout, visual, flex, typography, state).\nSome layout-only primitives (we-avatar, we-icon, we-image, we-spinner, etc.) only accept Layout props — see the Design System Props section for the full list.\n\nNative HTML elements (lowercase tags render directly without registry entries):\n- Layout: div, section, article, aside, main, nav, header, footer\n- Text: p, span, h1-h6, pre, code, blockquote\n- Lists: ul, ol, li\n- Forms: form, input, button, label, select, textarea\n- Media: img, video, audio, canvas, figure, figcaption\n- Other: a, table, tr, td, th, details, summary, dialog\n\n## Schema Validation\n\nRun `we-validate-schemas` (or `node packages/schema-system/shared/dist/cli/we-validate-schemas.js`) from the monorepo root to validate all `.schema.ts` files.\nFor a specific file: `we-validate-schemas packages/app-framework/src/shared/schemas/MyTemplate.schema.ts`\n\nAfter creating or modifying a `.schema.ts` file, always run validation to catch:\n- Unknown component types (typos, missing registry entries)\n- Invalid or misspelled props (with \"did you mean?\" suggestions)\n- Prop type mismatches (e.g., number where string expected)\n- Missing required `meta` field on root TemplateSchema nodes\n- `$routes` outlet without a `routes` array on an ancestor\n- Orphan `$local` / `$setLocal` references without a `$localState` ancestor\n- DS layer consistency (mixing props from layers the component doesn't support)";

From 83eb47c970834f97651db2eff07361ce493e265d Mon Sep 17 00:00:00 2001
From: jhweir <james@weco.io>
Date: Sat, 1 Aug 2026 19:48:30 +0100
Subject: [PATCH 09/12] fix(modules): one module rail, and a stage that renders
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three separate bugs, all visible on first use.

**The stage flickered.** `$each` renders through Solid's `<For>`, which is keyed
by reference, and `rebuildTiles()` minted fresh objects on every call — so every
heartbeat, connection-state change and mute toggle remounted every row, and a
remounted row means a new `<video>` that drops and re-attaches `srcObject`. Tiles
are now reused when nothing about a participant changed. The codebase hit this
same failure with `$query` results, where AD4M's prototype `id` getter defeated
`reconcile({ key: 'id' })`.

**The stage was white with a wide empty band.** `Grid`'s `minChildWidth` compiles
to `repeat(auto-fill, …)`, which keeps empty tracks, so one participant drew one
small tile and a lot of nothing; it is a wrapping `Row` of flex items now. And
`neutral-1000` is not "always dark" — dark themes set `multiplier: -1`, inverting
the neutral scale, so the darkest token in the light theme is the lightest in the
dark one. Surfaces have to use the same low-numbered tokens as the rest of the app.

**The call button rendered in the top-left corner.** `top`/`right`/`bottom`/`left`
are raw pass-through specs, not `SpaceValue`, so `bottom: '400'` emitted invalid
CSS and `position: fixed` fell back to the static position. All offsets are real
lengths now.

Behind the second point, the actual design fix: notes and calls had each invented
their own floating launcher in a different corner, and a third module would have
made three. A module now *declares* `launcher: { icon, label, action }` and the
host renders them into one rail on the right edge — a module knows what its
launcher means, only the host can stop launchers colliding. `availableWhen` keeps
the call tab out of personal spaces, where there is nobody to call and the answer
would never change.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .cursor/rules/we-schema.mdc                   |  2 +
 .github/copilot-instructions.md               |  2 +
 CLAUDE.md                                     |  2 +
 packages/ai-context/context.json              |  7 +-
 packages/ai-context/src/contextData.ts        |  2 +
 packages/ai-context/src/fragments/stores.ts   |  9 ++
 packages/ai-context/src/schemaContext.ts      |  2 +-
 .../frameworks/solid/stores/SpaceStore.tsx    | 55 ++++++++++-
 .../src/shared/registries/slotRegistry.ts     |  4 +
 .../shared/schemas/shell/ModuleRail.schema.ts | 89 ++++++++++++++++++
 .../app-framework/tests/callModule.test.ts    | 22 ++++-
 .../tests/moduleRegistry.test.ts              | 14 ++-
 .../app-framework/tests/notesModule.test.ts   | 24 ++---
 packages/modules/call/src/index.ts            | 91 +++++++++----------
 packages/modules/call/src/store.ts            | 84 ++++++++++++-----
 packages/modules/notes/src/index.ts           | 46 ++++------
 packages/schema-system/shared/src/module.ts   | 40 ++++++++
 17 files changed, 374 insertions(+), 121 deletions(-)
 create mode 100644 packages/app-framework/src/shared/schemas/shell/ModuleRail.schema.ts

diff --git a/.cursor/rules/we-schema.mdc b/.cursor/rules/we-schema.mdc
index f1e8b2d9..08e1c25d 100644
--- a/.cursor/rules/we-schema.mdc
+++ b/.cursor/rules/we-schema.mdc
@@ -1371,6 +1371,7 @@ SpaceStore:
   - signalTypesBySlug: Record<slug, SignalType> — computed map; access via { $store: "spaceStore.signalTypesBySlug.<slug>" }; use .id for the UUID
   - enabledModules: string[] — ids of the feature modules this space has turned on. An unset value means "not decided", not "none": it falls back to every registered module, so spaces predating the setting keep the chrome they had
   - moduleSettings: { id, name, description, icon, enabled }[] — every registered module paired with whether this space has it on; the shape the settings list renders
+  - moduleLaunchers: { id, icon, label, active }[] — launchers for the modules enabled here and available in this space; what the host module rail renders. Pair with { $action: "spaceStore.launchModule", args: ["$mod.id"] }
 - Actions:
   - createPost(editorState: unknown): creates a new post
   - updatePost(postId: string, editorState: unknown): reconciles an edited post against its existing blocks — updates/reuses blocks whose id survived the edit, creates new ones, deletes ones no longer present
@@ -1380,6 +1381,7 @@ SpaceStore:
   - upsertSignal(nodeId: string, signalTypeId: string, value: number): adds or updates a signal on a node; value=0 deletes it
   - navigateToSpace(spaceId: string, view?: string): navigates to a space — accepts a perspective UUID or a neighbourhood CID (sharedUrl without the neighbourhood:// prefix); pre-loads space templates before switching so the template and data arrive together
   - setModuleEnabled(moduleId: string, enabled: boolean): turns a feature module on or off for the current space; writes the resolved list, so the first toggle also pins whatever was on by fallback
+  - launchModule(moduleId: string): invokes that module's declared launcher action. Takes an id rather than a path because $action resolves a literal string, so a rail iterating over modules cannot build modules.<id>.<method> itself
 
 AiStore:
 - State:
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index f1e8b2d9..08e1c25d 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -1371,6 +1371,7 @@ SpaceStore:
   - signalTypesBySlug: Record<slug, SignalType> — computed map; access via { $store: "spaceStore.signalTypesBySlug.<slug>" }; use .id for the UUID
   - enabledModules: string[] — ids of the feature modules this space has turned on. An unset value means "not decided", not "none": it falls back to every registered module, so spaces predating the setting keep the chrome they had
   - moduleSettings: { id, name, description, icon, enabled }[] — every registered module paired with whether this space has it on; the shape the settings list renders
+  - moduleLaunchers: { id, icon, label, active }[] — launchers for the modules enabled here and available in this space; what the host module rail renders. Pair with { $action: "spaceStore.launchModule", args: ["$mod.id"] }
 - Actions:
   - createPost(editorState: unknown): creates a new post
   - updatePost(postId: string, editorState: unknown): reconciles an edited post against its existing blocks — updates/reuses blocks whose id survived the edit, creates new ones, deletes ones no longer present
@@ -1380,6 +1381,7 @@ SpaceStore:
   - upsertSignal(nodeId: string, signalTypeId: string, value: number): adds or updates a signal on a node; value=0 deletes it
   - navigateToSpace(spaceId: string, view?: string): navigates to a space — accepts a perspective UUID or a neighbourhood CID (sharedUrl without the neighbourhood:// prefix); pre-loads space templates before switching so the template and data arrive together
   - setModuleEnabled(moduleId: string, enabled: boolean): turns a feature module on or off for the current space; writes the resolved list, so the first toggle also pins whatever was on by fallback
+  - launchModule(moduleId: string): invokes that module's declared launcher action. Takes an id rather than a path because $action resolves a literal string, so a rail iterating over modules cannot build modules.<id>.<method> itself
 
 AiStore:
 - State:
diff --git a/CLAUDE.md b/CLAUDE.md
index f1e8b2d9..08e1c25d 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1371,6 +1371,7 @@ SpaceStore:
   - signalTypesBySlug: Record<slug, SignalType> — computed map; access via { $store: "spaceStore.signalTypesBySlug.<slug>" }; use .id for the UUID
   - enabledModules: string[] — ids of the feature modules this space has turned on. An unset value means "not decided", not "none": it falls back to every registered module, so spaces predating the setting keep the chrome they had
   - moduleSettings: { id, name, description, icon, enabled }[] — every registered module paired with whether this space has it on; the shape the settings list renders
+  - moduleLaunchers: { id, icon, label, active }[] — launchers for the modules enabled here and available in this space; what the host module rail renders. Pair with { $action: "spaceStore.launchModule", args: ["$mod.id"] }
 - Actions:
   - createPost(editorState: unknown): creates a new post
   - updatePost(postId: string, editorState: unknown): reconciles an edited post against its existing blocks — updates/reuses blocks whose id survived the edit, creates new ones, deletes ones no longer present
@@ -1380,6 +1381,7 @@ SpaceStore:
   - upsertSignal(nodeId: string, signalTypeId: string, value: number): adds or updates a signal on a node; value=0 deletes it
   - navigateToSpace(spaceId: string, view?: string): navigates to a space — accepts a perspective UUID or a neighbourhood CID (sharedUrl without the neighbourhood:// prefix); pre-loads space templates before switching so the template and data arrive together
   - setModuleEnabled(moduleId: string, enabled: boolean): turns a feature module on or off for the current space; writes the resolved list, so the first toggle also pins whatever was on by fallback
+  - launchModule(moduleId: string): invokes that module's declared launcher action. Takes an id rather than a path because $action resolves a literal string, so a rail iterating over modules cannot build modules.<id>.<method> itself
 
 AiStore:
 - State:
diff --git a/packages/ai-context/context.json b/packages/ai-context/context.json
index 678ed54c..db40ee95 100644
--- a/packages/ai-context/context.json
+++ b/packages/ai-context/context.json
@@ -5560,6 +5560,10 @@
         "moduleSettings": {
           "type": "array",
           "properties": ["id", "name", "description", "icon", "enabled"]
+        },
+        "moduleLaunchers": {
+          "type": "array",
+          "properties": ["id", "icon", "label", "active"]
         }
       },
       "actions": [
@@ -5570,7 +5574,8 @@
         "createSignalType",
         "upsertSignal",
         "navigateToSpace",
-        "setModuleEnabled"
+        "setModuleEnabled",
+        "launchModule"
       ]
     },
     {
diff --git a/packages/ai-context/src/contextData.ts b/packages/ai-context/src/contextData.ts
index 8e2d5c4e..8a5f44bc 100644
--- a/packages/ai-context/src/contextData.ts
+++ b/packages/ai-context/src/contextData.ts
@@ -2144,6 +2144,7 @@ export const contextData: ContextData = {
         signalTypesBySlug: { type: 'object' },
         enabledModules: { type: 'array' },
         moduleSettings: { type: 'array', properties: ['id', 'name', 'description', 'icon', 'enabled'] },
+        moduleLaunchers: { type: 'array', properties: ['id', 'icon', 'label', 'active'] },
       },
       actions: [
         'createPost',
@@ -2154,6 +2155,7 @@ export const contextData: ContextData = {
         'upsertSignal',
         'navigateToSpace',
         'setModuleEnabled',
+        'launchModule',
       ],
     },
     {
diff --git a/packages/ai-context/src/fragments/stores.ts b/packages/ai-context/src/fragments/stores.ts
index e55d0a17..c97b413c 100644
--- a/packages/ai-context/src/fragments/stores.ts
+++ b/packages/ai-context/src/fragments/stores.ts
@@ -152,6 +152,10 @@ export const storeEntries: StoreEntry[] = [
         type: 'array',
         properties: ['id', 'name', 'description', 'icon', 'enabled'],
       },
+      moduleLaunchers: {
+        type: 'array',
+        properties: ['id', 'icon', 'label', 'active'],
+      },
     },
     actions: [
       'createPost',
@@ -162,6 +166,7 @@ export const storeEntries: StoreEntry[] = [
       'upsertSignal',
       'navigateToSpace',
       'setModuleEnabled',
+      'launchModule',
     ],
   },
   {
@@ -367,6 +372,8 @@ function generateStoresText(entries: StoreEntry[]): string {
           'string[] — ids of the feature modules this space has turned on. An unset value means "not decided", not "none": it falls back to every registered module, so spaces predating the setting keep the chrome they had',
         moduleSettings:
           '{ id, name, description, icon, enabled }[] — every registered module paired with whether this space has it on; the shape the settings list renders',
+        moduleLaunchers:
+          '{ id, icon, label, active }[] — launchers for the modules enabled here and available in this space; what the host module rail renders. Pair with { $action: "spaceStore.launchModule", args: ["$mod.id"] }',
       },
       actions: {
         createPost: '(editorState: unknown): creates a new post',
@@ -383,6 +390,8 @@ function generateStoresText(entries: StoreEntry[]): string {
           '(spaceId: string, view?: string): navigates to a space — accepts a perspective UUID or a neighbourhood CID (sharedUrl without the neighbourhood:// prefix); pre-loads space templates before switching so the template and data arrive together',
         setModuleEnabled:
           '(moduleId: string, enabled: boolean): turns a feature module on or off for the current space; writes the resolved list, so the first toggle also pins whatever was on by fallback',
+        launchModule:
+          "(moduleId: string): invokes that module's declared launcher action. Takes an id rather than a path because $action resolves a literal string, so a rail iterating over modules cannot build modules.<id>.<method> itself",
       },
     },
     aiStore: {
diff --git a/packages/ai-context/src/schemaContext.ts b/packages/ai-context/src/schemaContext.ts
index d44a1612..80961d07 100644
--- a/packages/ai-context/src/schemaContext.ts
+++ b/packages/ai-context/src/schemaContext.ts
@@ -1,4 +1,4 @@
 // AUTO-GENERATED by packages/ai-context/src/generate.ts
 // Do not edit manually. Run: pnpm --filter @we/ai-context generate-context
 
-export const schemaContext = "## Schema Structure\n\nA schema is a tree of nodes. Each node can have:\n- type: The component to render (string, e.g. \"we-button\", \"Column\")\n- props: An object of props for the component\n- children: An array of child nodes (or strings for text), or token objects like { $store: '...' } or { $concat: [...] }.\n- slots: Named slots for advanced composition (optional)\n- slot: The name of the slot this node should be rendered into (optional)\n- routes: For routing components, an array of nestable route objects (optional)\n- styles: Raw CSS escape hatch — Record<string, string | number> applied as inline styles on a **wrapper div** that surrounds the component. Use only for CSS that must live on a wrapper: filter, clip-path, backdrop-filter, mix-blend-mode. When present the wrapper participates in layout (no display:contents), so CSS effects apply correctly. **Important:** this is NOT the same as props.styles. If you want to apply custom CSS to a Column, Row, or Grid's own element (e.g. a background image), put it in props.styles instead — node-level styles go on a wrapper div around the component and will be hidden behind the component's own background.\n\nExample node:\n{\n  \"type\": \"we-button\",\n  \"props\": {\n    \"onClick\": { \"$action\": \"routeStore.navigate\", \"args\": [\"/home\"] }\n  },\n  \"children\": [\n    { \"type\": \"we-icon\", \"props\": { \"name\": \"house\" } },\n    { \"type\": \"we-text\", \"props\": { \"size\": \"600\" }, \"children\": [\"Home\"] }\n  ]\n}\n\n## Prop-level Dynamic Logic & Expressions\n\nSpecial tokens in props enable dynamic, reactive, or computed behavior.\n\nStore reference:\n{ \"$store\": \"storeName.property.path\" }\nResolves a value from a named store, supporting nested paths.\n\nAction/event:\n{ \"$action\": \"storeName.method\", \"args\": [...] }\nCalls a method on a store, optionally with arguments (which can themselves be tokens).\nSupports async lifecycle callbacks — fired after the store method's Promise resolves/rejects:\n  onSuccess: [...actions]  — fired on resolve; '$result' (and '$result.<path>') in args refers to the resolved value\n  onError: [...actions]    — fired on reject; '$result.message' etc. refers to the error object\n  onFinally: [...actions]  — fired regardless of outcome\nNon-promise (synchronous) methods are unaffected — lifecycle keys are ignored.\nExample — close modal after async submission:\n{ \"$action\": \"adamStore.createSpace\", \"args\": [...], \"onSuccess\": [{ \"$setLocal\": \"modalOpen\", \"value\": false }] }\nExample — navigate to newly created item:\n{ \"$action\": \"adamStore.createSpace\", \"args\": [...], \"onSuccess\": [{ \"$setLocal\": \"modalOpen\", \"value\": false }, { \"$action\": \"routeStore.navigate\", \"args\": [{ \"$concat\": [\"/space/\", \"$result.uuid\"] }] }] }\n\nModel mutations via $action (use these for creating/updating/deleting model instances):\nmodel.create — creates a model instance in the current perspective (default) or a specified one:\n{ \"$action\": \"model.create\", \"args\": [\"ModelName\", { \"field\": \"value\" }, { \"perspective\": \"adamStore.rootPerspective\" }] }\nThe third argument is an options object. Omit it to use the current space perspective.\n\nmodel.update — updates a model instance:\n{ \"$action\": \"model.update\", \"args\": [\"ModelName\", \"$item.id\", { \"field\": \"newValue\" }] }\nTo target a non-current perspective: { \"$action\": \"model.update\", \"args\": [\"ModelName\", \"$item.id\", { \"field\": \"value\" }, { \"perspective\": \"adamStore.rootPerspective\" }] }\n\nmodel.delete — deletes a model instance:\n{ \"$action\": \"model.delete\", \"args\": [\"ModelName\", \"$item.id\"] }\n\nUse perspective: 'adamStore.rootPerspective' for we-root models (AgentSettings, ChatSession, etc.).\nUse the default (no perspective) for space-scoped models (Space, Signal, etc.).\n\nConditional logic:\n{ \"$if\": { \"condition\": ..., \"then\": ..., \"else\": ... } }\nEvaluates condition; if truthy, returns then, else returns else.\n\nMap/iterate:\n{ \"$map\": { \"items\": { \"$store\": \"templateStore.templates\" }, \"select\": { ... } } }\nIterates over an array, mapping each item to a new object using the select mapping.\n\nPick:\n{ \"$pick\": { \"from\": { \"$store\": \"userStore.profile\" }, \"props\": [\"name\", \"email\"] } }\nPicks specific properties from an object.\n\nConcat (string building):\n{ \"$concat\": [\"part1\", \"$context.value\", \"part2\"] }\nJoins multiple parts into a single string.\n\nContext references:\nStrings starting with \"$\" followed by a context key resolve to context values.\nExample: \"$space.name\" resolves to the name property of the space context variable.\nDot paths supported: \"$item.profile.avatar\".\n\nEquality / inequality checks:\n{ \"$eq\": [a, b] } — strict equality\n{ \"$ne\": [a, b] } — strict inequality\n\nNumeric comparisons:\n{ \"$lt\": [a, b] } — a < b (less than)\n{ \"$gt\": [a, b] } — a > b (greater than)\nExample: { \"$gt\": [{ \"$count\": { \"items\": { \"$store\": \"listStore.items\" } } }, 0] }\n\nSet membership:\n{ \"$in\": [value, array] } — true if array contains value (false if second operand is not an array)\nExample: { \"$in\": [{ \"$store\": \"spaceStore.uuid\" }, { \"$store\": \"adamStore.systemPerspectiveUuids\" }] }\nExample: { \"$in\": [\"$item.role\", [\"admin\", \"moderator\"]] }\n\nBoolean logic:\n{ \"$and\": [a, b, ...] } — all truthy\n{ \"$or\": [a, b, ...] } — any truthy\n{ \"$not\": a } — negation\n\nArray operators:\n{ \"$filter\": { \"items\": <array>, \"where\": { \"field\": \"value\", ... } } }\nFilters an array to items where all where conditions match. Mirrors the $query where operator set:\n\n  { \"field\": \"value\" }                                   — strict equality\n  { \"field\": { \"not\": \"value\" } }                        — inequality; array form excludes multiple values\n  { \"field\": { \"contains\": \"text\" } }                    — case-insensitive substring match (strings only)\n  { \"field\": { \"exists\": true } }                        — non-null / non-undefined presence check\n  { \"field\": { \"exists\": false } }                       — null or undefined check\n\nWhere values (including those inside operator objects) are resolved through the prop system,\nso $store, $local, and context refs like { \"$local\": \"searchText\" } all work.\n\n$query-only logical combinators (OR / AND / NOT) — NOT supported in $filter, only in $query's where:\n  { \"OR\": [ { \"field\": \"value\" }, { \"field2\": \"value2\" } ] }   — matches if ANY branch matches\n  { \"AND\": [ { ... }, { ... } ] }                              — matches if ALL branches match (sibling keys at the\n                                                                  same level are already implicitly ANDed — use AND\n                                                                  to group a set of conditions alongside an OR/NOT)\n  { \"NOT\": { \"field\": \"value\" } }                              — matches if the branch does NOT match\nBranches are full where-clause objects (can contain multiple fields, and can nest OR/AND/NOT inside each other).\nSibling keys alongside OR/AND/NOT at the same level are implicitly ANDed with it.\nExample — case-insensitive search across two fields:\n{\n  \"$query\": {\n    \"entity\": \"Space\",\n    \"where\": {\n      \"OR\": [\n        { \"name\": { \"contains\": { \"$local\": \"searchText\" } } },\n        { \"description\": { \"contains\": { \"$local\": \"searchText\" } } }\n      ]\n    }\n  }\n}\nNote: using OR/AND/NOT disables the SPARQL-level sort/pagination pushdown (see count-projection and\nrelation-property ordering below) — those orderings silently stop working if combined with OR/AND/NOT in the\nsame query's where clause, because the fallback sort runs before the projection/relation data is attached.\n\nExamples:\n{ \"$filter\": { \"items\": { \"$store\": \"spaceStore.members\" }, \"where\": { \"role\": \"admin\" } } }\n{ \"$filter\": { \"items\": { \"$store\": \"spaceStore.members\" }, \"where\": { \"location\": { \"exists\": true }, \"handle\": { \"contains\": { \"$local\": \"searchText\" } } } } }\n\n{ \"$count\": { \"items\": <array> } }\nReturns the length of an array.\nExample: { \"badge\": { \"$count\": { \"items\": { \"$store\": \"notificationStore.unread\" } } } }\n\n{ \"$find\": { \"items\": <array>, \"where\"?: { ... }, \"select\"?: \"fieldName\" } }\nFinds the first matching item. where is optional (returns first item if omitted). select plucks a single field.\nExample: { \"$find\": { \"items\": { \"$store\": \"spaceStore.members\" }, \"where\": { \"id\": \"$item.creatorId\" }, \"select\": \"name\" } }\n\n{ \"$plural\": { \"count\": <number>, \"one\": \"singular\", \"other\": \"plural\" } }\nReturns \"one\" when count === 1, otherwise \"other\". Use in children arrays for count-noun labels.\ncount is resolved through the prop system — any numeric expression ($count, $store, context ref) works.\nExample: { \"$plural\": { \"count\": { \"$count\": { \"items\": { \"$store\": \"spaceStore.members\" } } }, \"one\": \"Member\", \"other\": \"Members\" } }\nCompose with we-number for a full \"N Members\" display:\n  we-number (value: { \"$count\": ... }, shorten: true) + we-text (children: [{ \"$plural\": { \"count\": { \"$count\": ... }, \"one\": \"Member\", \"other\": \"Members\" } }])\n\nQuery (data retrieval):\n{ \"$query\": { \"entity\": \"ModelName\", \"where\": { \"field\": \"value\" }, \"limit\": 10, \"order\": { \"field\": \"asc\" } } }\nQueries the current dataset for entity instances. Always returns an array.\nOptions: entity (required), where, order, limit, offset, include, scope, dataset, subscribe.\nsubscribe defaults to true — reactive live updates. Set subscribe: false to do a one-time fetch.\nBy default $query targets the current dataset ($currentDataset). Use dataset to query a different dataset —\nrequired when reading entities from an external app (e.g. Flux) that is open as a WE space:\n{ \"$query\": { \"entity\": \"Channel\", \"dataset\": \"$currentDataset\" } }\n\nBackend-neutral identity & dataset refs — prefer these over adamStore.* store paths inside $query and conditions:\n- $currentDataset — the currently active dataset (an AD4M perspective, in the AD4M backend). Use as a dataset value.\n- $me — the current agent's identity object. Use $me.did for their DID (ownership checks, author filters, e.g. { \"$eq\": [\"$post.author\", \"$me.did\"] }); $me.handle / $me.avatar for profile fields once loaded.\n\nEager-loading relations with include (most common relational pattern):\ninclude hydrates related model instances in the same query — no extra fetches needed.\nRelation names come from the HasMany relations listed for each model in externalModels.\n\nSimple include — hydrate all related instances:\n{ \"$query\": { \"entity\": \"Channel\", \"include\": { \"conversations\": true } } }\nEach item in the result will have a conversations array of hydrated Conversation objects.\n\nSub-query include — filter, sort, or limit the related records:\n{ \"$query\": { \"entity\": \"Channel\", \"include\": { \"conversations\": { \"order\": { \"createdAt\": \"desc\" }, \"limit\": 10 } } } }\n\nNested include — hydrate relations of relations:\n{ \"$query\": { \"entity\": \"Channel\", \"include\": { \"conversations\": { \"include\": { \"messages\": true } } } } }\nNesting can go as deep as needed. Each level adds one batched fetch (not N+1).\n\nCount projection — add a derived numeric field:\n{ \"$query\": { \"entity\": \"Post\", \"include\": { \"$likeCount\": { \"from\": \"likes\", \"count\": true } } } }\nThe $-prefixed key becomes a new field on each result item (e.g. item.$likeCount = 42).\n\nSorting by a count projection — order can reference a $-prefixed count key directly, sorting by the aggregate:\n{\n  \"$query\": {\n    \"entity\": \"Post\",\n    \"limit\": 20,\n    \"order\": { \"$likeCount\": \"desc\" },\n    \"include\": { \"$likeCount\": { \"from\": \"likes\", \"count\": true } }\n  }\n}\nRequirements: only a single order key is supported when it targets a projection (mixing it with a second sort key falls back\nto a plain property sort), and the query must also specify limit or offset — without one the count isn't computed yet at\nsort time and the order silently has no effect. Always pair count-projection ordering with a limit.\nCombine with $if for a user-togglable sort field (e.g. \"newest\" vs \"most liked\"):\n{\n  \"order\": {\n    \"$if\": {\n      \"condition\": { \"$eq\": [{ \"$local\": \"sortField\" }, \"likes\"] },\n      \"then\": { \"$likeCount\": { \"$local\": \"sortDirection\" } },\n      \"else\": { \"createdAt\": { \"$local\": \"sortDirection\" } }\n    }\n  }\n}\n\nSorting by a related model property — order can reference a dotted \"relation.property\" path for a HasOne/HasMany\nrelation declared on the model, sorting by a scalar property on the related instance:\n{\n  \"$query\": {\n    \"entity\": \"Space\",\n    \"limit\": 20,\n    \"order\": { \"location.country\": \"asc\" },\n    \"include\": { \"location\": true }\n  }\n}\nSame requirements as count-projection ordering above: only a single order key, and pair with limit/offset — without\none the relation data isn't attached yet at sort time and the order silently has no effect. include isn't required\nfor the sort itself (the relation is resolved from the model's declared shape), but you'll usually want it anyway to\nread the field in the UI (e.g. \"$space.location.country\").\nCombine with $if the same way as count-projection ordering to let the user toggle between sort fields.\n\nSingle-item projection — add a derived field that resolves to one instance or null:\n{ \"$query\": { \"entity\": \"Post\", \"include\": { \"$myLike\": { \"from\": \"likes\", \"where\": { \"author\": \"$me.did\" }, \"limit\": 1 } } } }\nWith limit: 1 the field unwraps to T | null instead of an array.\n\ninclude only works with typed relations — ones where the target model class is known.\nFor WE models this is always the case. For external models, check the externalModels listing:\nrelations marked \"→ ModelName\" are typed (safe for include); relations marked \"parent query only\"\nare untyped and will crash at runtime if used with include — use a scope drill-down instead.\n\nRelational queries — fetch a parent record's children (drill-down navigation):\n{ \"$query\": { \"entity\": \"Conversation\", \"scope\": { \"anchor\": \"Channel\", \"via\": \"conversations\", \"anchorId\": \"$channel.id\" } } }\nscope.anchor is the parent entity type; scope.via is its relation whose targets are this query's entity (the\nHasMany relation listed for that entity in externalModels); scope.anchorId is the parent record's id (typically\nfrom a $each context variable or a route segment). The adapter resolves the relation to a backend handle —\nno protocol details live in the template.\nUse this pattern when navigating to a detail route and loading only that record's children.\nFor external-app datasets, always add dataset: \"$currentDataset\".\n\nLocal state (scoped ephemeral state):\nDeclare on any node: \"$localState\": { \"name\": { \"type\": \"string\", \"initial\": \"\" } }\nSupported types: \"string\", \"boolean\", \"number\", \"function\", \"object\".\nRead:  { \"$local\": \"name\" } — returns the signal value (reactive).\n       { \"$local\": \"name.nested.path\" } — dot-notation reads into object-typed fields (reactive).\nWrite: { \"$setLocal\": \"name\", \"from\": \"$event.target.value\" } — event handler that updates the signal.\n       { \"$setLocal\": \"name\", \"value\": \"literal\" } — sets to a literal value (string, number, boolean, null, object).\n       { \"$setLocal\": \"name\", \"merge\": { \"field\": \"$event.detail\" } } — shallow-merges fields into an object-typed signal. Values are resolved as event paths (e.g. \"$event.detail\") or passed as literals. Use for partial updates to object state.\nToggle: { \"$toggleLocal\": \"fieldName\" } — toggles a boolean field (equivalent to setting it to !current). Use for show/hide, open/close, expand/collapse patterns.\nCall function: { \"$callLocal\": \"fieldName\" } — event handler that calls the function stored in a function-typed local field.\n  Used when a child component needs to trigger a callback passed in via $localState.\n  The field must be declared as type: 'function' and set via $setLocal.\n  Example: { \"onClick\": { \"$callLocal\": \"onConfirm\" } }\nState is created on mount and destroyed on unmount. Nested $localState declarations merge, inner fields shadow outer.\n$local values can be used in $action args: { \"$action\": \"store.method\", \"args\": [{ \"$local\": \"name\" }] }\n\nObject-typed local state (consolidating related scalar fields):\nWhen several related fields share a common condition on their initial values (e.g. all null/empty when a store value is absent), prefer a single \"object\" field seeded from the store, then read sub-fields with dot-notation and write with merge.\nExample — location object (replaces 5 separate scalar fields with $if guards):\n  \"$localState\": { \"location\": { \"type\": \"object\", \"initial\": { \"$store\": \"spaceStore.currentSpace.location\" } } }\n  Read:  { \"$local\": \"location.latitude\" }, { \"$local\": \"location.city\" }\n  Write (picker confirm): { \"$setLocal\": \"location\", \"from\": \"$event.detail\" }\n  Write (partial edit):   { \"$setLocal\": \"location\", \"merge\": { \"city\": \"$event.detail\" } }\n  Write (clear):          { \"$setLocal\": \"location\", \"value\": null }\n  Condition (has location): { \"$local\": \"location\" }\nUse \"object\" whenever you would otherwise write 3+ related scalar fields each needing $if on their initial value.\n\nHoisted query state ($queries):\nDeclare on any node to run reactive subscriptions at the node root and expose results in $local.\nSolves two problems: avoids N duplicate subscriptions inside $each loops, and makes query results available for $if conditions.\n\"$queries\": { \"signalTypes\": { \"entity\": \"SignalType\", \"subscribe\": true } }\nResults are injected into $local as read-only reactive arrays, accessible via { \"$local\": \"signalTypes\" }.\nQuery options are identical to $each's $query prop (entity, where, order, limit, include, dataset, subscribe).\n$queries and $localState share the same $local namespace — avoid duplicate names across both.\n$setLocal will warn and no-op on $queries entries (they are read-only).\nUse with $count + $gt for conditional visibility:\n{ \"condition\": { \"$gt\": [{ \"$count\": { \"items\": { \"$local\": \"signalTypes\" } } }, 0] } }\nExample:\n{\n  \"$queries\": { \"signalTypes\": { \"entity\": \"SignalType\", \"subscribe\": true } },\n  \"type\": \"Column\",\n  \"children\": [\n    {\n      \"type\": \"$each\",\n      \"props\": { \"items\": { \"$local\": \"signalTypes\" }, \"as\": \"sig\" },\n      \"children\": [...]\n    }\n  ]\n}\n\nBoolean toggle pattern (show/hide comments, expand/collapse sections, etc.):\n{\n  \"$localState\": { \"showComments\": { \"type\": \"boolean\", \"initial\": false } },\n  \"children\": [\n    {\n      \"type\": \"we-button\",\n      \"props\": {\n        \"variant\": \"ghost\",\n        \"onClick\": { \"$toggleLocal\": \"showComments\" }\n      },\n      \"children\": [{ \"type\": \"we-icon\", \"props\": { \"name\": \"chat-circle\" } }]\n    },\n    {\n      \"type\": \"$if\",\n      \"props\": {\n        \"condition\": { \"$local\": \"showComments\" },\n        \"then\": { \"type\": \"Column\", \"children\": [{ \"type\": \"we-text\", \"children\": [\"Comments visible\"] }] }\n      }\n    }\n  ]\n}\n\nForm validation (extends $localState):\nDeclare validation rules on fields:\n\"$localState\": {\n  \"email\": {\n    \"type\": \"string\",\n    \"initial\": \"\",\n    \"validate\": [\n      { \"rule\": \"required\", \"message\": \"Email is required\" },\n      { \"rule\": \"pattern\", \"value\": \"^[^@]+@[^@]+$\", \"message\": \"Invalid email\" }\n    ]\n  }\n}\n\nBuilt-in rules: required, minLength (value: N), maxLength (value: N), min (value: N), max (value: N), pattern (value: regex string), match (field: otherFieldName). All accept optional \"message\" override.\n\nRead tokens:\n{ \"$error\": \"fieldName\" } — first validation error message (only shown after field is touched), or \"\".\n{ \"$valid\": \"fieldName\" } — true if all rules pass (regardless of touched state).\n{ \"$touched\": \"fieldName\" } — true after the field has been blurred/touched.\n{ \"$formValid\": \"$scope\" } — true if ALL validated fields in the current $localState scope pass.\n\nAction tokens:\n{ \"$touch\": \"fieldName\" } — marks a single field as touched (use in onBlur).\n{ \"$touch\": \"$all\" } — marks all fields in scope as touched (use before submit guard).\n{ \"$resetLocal\": \"$scope\" } — resets all fields to initial values and clears touched state.\n\nHandler arrays (compose multiple actions on one event):\n{ \"onClick\": [{ \"$touch\": \"$all\" }, { \"$if\": { \"condition\": { \"$formValid\": \"$scope\" }, \"then\": { \"$action\": \"store.submit\", \"onSuccess\": [{ \"$setLocal\": \"modalOpen\", \"value\": false }] } } }] }\nArray entries execute sequentially. Non-function entries (e.g. $if with false condition) are skipped.\nPrefer onSuccess over a bare $setLocal before the $action — the bare form closes the modal immediately (losing the loading spinner); onSuccess waits for the Promise to resolve.\n\nTypical form pattern:\n{\n  \"$localState\": { \"name\": { \"type\": \"string\", \"initial\": \"\", \"validate\": [{ \"rule\": \"required\" }] } },\n  \"children\": [\n    {\n      \"type\": \"we-form-field\",\n      \"props\": { \"label\": \"Name\", \"error\": { \"$error\": \"name\" } },\n      \"children\": [{\n        \"type\": \"we-input\",\n        \"props\": {\n          \"value\": { \"$local\": \"name\" },\n          \"onInput\": { \"$setLocal\": \"name\", \"from\": \"$event.detail\" },\n          \"onBlur\": { \"$touch\": \"name\" }\n        }\n      }]\n    },\n    {\n      \"type\": \"we-button\",\n      \"props\": {\n        \"disabled\": { \"$not\": { \"$formValid\": \"$scope\" } },\n        \"onClick\": [\n          { \"$touch\": \"$all\" },\n          { \"$if\": { \"condition\": { \"$formValid\": \"$scope\" }, \"then\": { \"$action\": \"store.save\", \"args\": [{ \"$local\": \"name\" }], \"onSuccess\": [{ \"$setLocal\": \"submitDone\", \"value\": true }] } } }\n        ]\n      },\n      \"children\": [\"Submit\"]\n    }\n  ]\n}\n\n## Block-level Dynamic Structures\n\nBlock-level structures use \"type\" starting with \"$\" for dynamic rendering of schema nodes.\n\nEach loop:\n{ \"type\": \"$each\", \"props\": { \"items\": { \"$store\": \"storeName.arrayProperty\" }, \"as\": \"itemName\" }, \"children\": [ ... ] }\nRenders children once for each item. The \"as\" name becomes a context key. Defaults to \"item\" — omit \"as\" unless you need a different name.\n\nConditional rendering:\n{ \"type\": \"$if\", \"props\": { \"condition\": ..., \"then\": { ... }, \"else\": { ... } } }\nRenders \"then\" node if condition is truthy, else renders \"else\" node.\nSupports enterTransition / exitTransition for CSS animations when the node mounts/unmounts.\nTransitionConfig = TransitionEffect | TransitionEffect[]\nTransitionEffect = { type: 'fade'|'slide'|'scale'|'pulse', duration?: ms, easing?: string, delay?: ms, direction?: 'left'|'right'|'up'|'down', distance?: string }\nfade controls opacity only; slide/scale control transform only. pulse is a persistent looping animation (not a one-shot transition) — starts once entered, stops on exit; direction/distance don't apply (default duration 1200ms, easing 'ease-in-out'). Compose fade/slide/scale together in an array; pulse is typically used alone.\nExample: enterTransition: [{ type: 'fade', duration: 300 }, { type: 'slide', direction: 'up', distance: '40px', duration: 400 }]\nExample (pulse): enterTransition: { type: 'pulse', duration: 1500 }\n\nViewport / mount animation (child always in DOM):\n{ \"type\": \"$animate\", \"props\": { \"scrollReveal\"?: true | number, \"scrollLeave\"?: true | number, \"scrollPast\"?: string, \"enterTransition\"?: TransitionConfig, \"exitTransition\"?: TransitionConfig }, \"children\": [<node>] }\nThe child is always mounted. fade/slide/scale are CSS transitions (opacity/transform); pulse is a real CSS @keyframes loop — use this for scroll-reveal effects.\nDo NOT use $animate when the child should be absent from the DOM. Use $if for conditional DOM presence.\nscrollReveal: true fires enterTransition when the element enters the viewport.\nscrollReveal: -100 fires 100px before the element would enter (negative = earlier reveal).\nscrollLeave fires exitTransition when the element leaves the viewport.\nscrollPast: \"element-id\" observes a sentinel element (by DOM id) instead of the $animate element itself.\n  enterTransition fires when the sentinel leaves the viewport (user scrolled past it).\n  exitTransition fires when the sentinel returns (user scrolled back up).\n  Use this for sticky headers: place a zero-height sentinel div at the bottom of the non-sticky header section,\n  then wrap the mini-profile in $animate with scrollPast pointing to that sentinel's id.\n  scrollPast is mutually exclusive with scrollReveal/scrollLeave.\nWithout any scroll trigger, the enterTransition runs once on mount.\nOnly one child node is supported.\nExample (scroll-reveal):\n{\n  \"type\": \"$animate\",\n  \"props\": {\n    \"scrollReveal\": -100,\n    \"enterTransition\": [\n      { \"type\": \"fade\", \"duration\": 600, \"easing\": \"ease-in-out\" },\n      { \"type\": \"slide\", \"direction\": \"left\", \"distance\": \"200px\", \"duration\": 1000, \"easing\": \"ease-in-out\" }\n    ]\n  },\n  \"children\": [{ \"type\": \"SomeCard\", \"children\": [] }]\n}\nExample (sticky header mini-profile):\nPlace a sentinel at the bottom of the header, reference it in the sticky nav:\n{ \"type\": \"div\", \"props\": { \"id\": \"header-sentinel\" }, \"styles\": { \"height\": \"0px\", \"pointerEvents\": \"none\" } }\n{\n  \"type\": \"$animate\",\n  \"props\": {\n    \"scrollPast\": \"header-sentinel\",\n    \"enterTransition\": { \"type\": \"fade\", \"duration\": 250 },\n    \"exitTransition\": { \"type\": \"fade\", \"duration\": 200 }\n  },\n  \"children\": [{ \"type\": \"Row\", \"props\": { \"ay\": \"center\", \"gap\": \"300\" }, \"children\": [\n    { \"type\": \"we-avatar\", \"props\": { \"image\": \"$space.avatar\", \"size\": \"sm\" } },\n    { \"type\": \"we-text\", \"props\": { \"fontWeight\": \"600\" }, \"children\": [\"$space.name\"] }\n  ]}]\n}\n\nSingle model item (load one record, render children with it in context):\n{\n  \"type\": \"$single\",\n  \"props\": {\n    \"item\": { \"$query\": { \"entity\": \"ModelName\", \"params\": { ... }, \"subscribe\": true } },\n    \"as\": \"profile\"   // context key for children — default: 'item'\n  },\n  \"children\": [{ \"type\": \"we-text\", \"children\": [\"$profile.username\"] }]\n}\nRenders nothing until a matching record is found. Like $each but for a single result.\nquery options (entity, params, include, dataset, subscribe) work identically to $query.\n\nRoute outlet:\n{ \"type\": \"$routes\" }\nIndicates where nested routes should render within a layout.\n\n---\n\n## Component Registry\n\nMost @we/primitives also accept Design System Props (see next section for details and exceptions).\n\n@we/primitives:\n- we-alert (DesignSystemElement)\n  Props: variant: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' = 'primary', dismissible: boolean = false\n- we-audio (LayoutVisualElement)\n  Props: src: string = '', controls: boolean = false, preload: 'none' | 'metadata' | 'auto' = 'metadata', autoplay: boolean = false, loop: boolean = false, muted: boolean = false\n- we-avatar (LayoutVisualElement)\n  Props: image: string = '', hash: string = '', selected: boolean = false, online: boolean = false, initials: string = '', icon: string = '', size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | '{css-length}' | undefined, clickable: boolean = false\n- we-badge (DesignSystemElement)\n  Props: variant: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' = 'neutral', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-blockquote (DesignSystemElement)\n- we-button (DesignSystemElement)\n  Props: variant: 'primary' | 'secondary' | 'ghost' | 'danger' | 'outline' = 'primary', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md', text?: string | undefined, href?: string | undefined, disabled: boolean = false, loading: boolean = false, gradient: boolean = false, square: boolean = false\n- we-checkbox (DesignSystemElement)\n  Props: checked: boolean = false, disabled: boolean = false, name: string = '', value: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-code (DesignSystemElement)\n  Props: block: boolean = false\n- we-color-picker (DesignSystemElement)\n  Props: value: string = '#000000', disabled: boolean = false, name: string = '', palette: array = [ '#000000', '#434343', '#666666', '#999999', '#b7b7b7', '#cccccc', '#d9d9d9', '#ffffff', '#980000', '#ff0000', '#ff9900', '#ffff00', '#00ff00', '#00ffff', '#4a86e8', '#0000ff', '#9900ff', '#ff00ff', '#e6b8af', '#f4cccc', '#fce5cd', '#fff2cc', '#d9ead3', '#d0e0e3', '#c9daf8', '#cfe2f3', '#d9d2e9', '#ead1dc', ]\n- we-date-picker (DesignSystemElement)\n  Props: value: string = '', placeholder: string = 'Select date', disabled: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-divider (LayoutElement)\n  Props: orientation: 'horizontal' | 'vertical' = 'horizontal', variant: 'solid' | 'dashed' | 'dotted' = 'solid', color?: string | undefined, thickness?: string | undefined\n- we-drawer (OverlayElement)\n  Props: hideclosebutton: boolean = false, close: () => void\n- we-file-upload (DesignSystemElement)\n  Props: accept: string = '', multiple: boolean = false, disabled: boolean = false, name: string = ''\n- we-form-field (DesignSystemElement)\n  Props: label: string = '', description: string = '', error: string = '', required: boolean = false, size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-html (DesignSystemElement) — Renders a raw HTML string safely via DOMPurify sanitization.\n\nUse this instead of `we-text` when content is stored as HTML (e.g. rich-text\neditor output such as Flux messages). The `content` prop accepts any HTML\nfragment; it is sanitized before rendering so XSS payloads are stripped.\n  Props: content: string = ''\n- we-icon (LayoutElement)\n  Props: name: string = '', color: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '{css-length}' = '', weight: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone' = 'regular', gradient: string = ''\n- we-icon-picker (DesignSystemElement)\n  Props: value: string = '', disabled: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md', placeholder: string = 'Pick icon'\n- we-iframe (LayoutVisualElement)\n  Props: src: string = '', title: string = 'Embedded content', allow: string = '', sandbox?: string | undefined\n- we-image (LayoutVisualElement)\n  Props: src: string | File = '', alt: string = '', fit: '' | 'cover' | 'contain' | 'fill' | 'none' | 'scale-down' = '', loading: 'eager' | 'lazy' = 'eager', gradient: string = '', objectPosition: string = ''\n- we-input (DesignSystemElement)\n  Props: value: string = '', max: string = '', min: string = '', maxlength: unknown = Infinity, minlength: number = 0, pattern: string = '', name: string = '', step: string = '', placeholder: string = '', autocomplete: string = '', autofocus: boolean = false, disabled: boolean = false, required: boolean = false, readonly: boolean = false, type: string = 'text', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-link (DesignSystemElement)\n  Props: href: string = '', target: string = '', rel: string = '', download: string = '', disabled: boolean = false\n- we-location-picker (DesignSystemElement)\n  Props: latitude?: number | undefined, longitude?: number | undefined, placeholder: string = 'Set location…', disabled: boolean = false, reverseGeocode: boolean = true\n- we-markdown (DesignSystemElement)\n  Props: content: string = '', markdownGap: string = ''\n- we-menu (DesignSystemElement) — Vertical list container for menu items inside a popover.\nNot a standalone selector — wrap in we-popover for dropdown behavior.\n- we-menu-group (LayoutElement)\n  Props: collapsible: boolean = false, open: boolean = false, title: string = ''\n- we-menu-item (DesignSystemElement) — Single actionable item inside a we-menu.\nSupports selected, active, and danger states.\n  Props: selected: boolean = false, active: boolean = false, variant: 'default' | 'danger' = 'default', label: unknown, value: unknown\n- we-modal (OverlayElement)\n  Props: hideclosebutton: boolean = false, close: () => void\n- we-number (DesignSystemElement) — Displays a number, optionally abbreviated (1 200 → 1.2K, 1 500 000 → 1.5M).\n  Props: value: number = 0, shorten: boolean = false, precision: number = 1, locale: string = 'en', formattedValue: string\n- we-number-input (DesignSystemElement)\n  Props: value: number = 0, min: number = -Infinity, max: unknown = Infinity, step: number = 1, disabled: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-pagination (DesignSystemElement)\n  Props: page: number = 1, total: number = 1, siblings: number = 1, size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-popover (LayoutElement) — Low-level floating panel anchored to a trigger element.\nUse DropdownMenu component for dropdown menus.\n  Props: open: boolean = false, placement: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' = 'bottom', popoverElement: HTMLElement, triggerElement: HTMLElement\n- we-progress-bar (DesignSystemElement)\n  Props: value: number = 0, max: number = 100, variant: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' = 'primary', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-radio (DesignSystemElement)\n  Props: checked: boolean = false, disabled: boolean = false, name: string = '', value: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-scroll-area (DesignSystemElement)\n  Props: maxHeight: string = '', maxWidth: string = ''\n- we-select (DesignSystemElement)\n  Props: options: SelectOption[] = [], value: string = '', placeholder: string = '', disabled: boolean = false, searchable: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-select (DesignSystemElement) — Pick a single value from a list of options. Custom-rendered dropdown.\nUse for form fields, settings, filters. Set searchable=true for type-to-filter.\n  Props: options: SelectOption[] = [], value: string = '', placeholder: string = '', disabled: boolean = false, searchable: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-skeleton (DesignSystemElement)\n  Props: width: string = '100%', height: string = '20px', animation: 'pulse' | 'wave' = 'pulse'\n- we-slider (DesignSystemElement)\n  Props: value: number = 0, min: number = 0, max: number = 100, step: number = 1, disabled: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md', showValue: boolean = false\n- we-sortable (DesignSystemElement) — Drag-to-reorder container primitive.\n\nUsage: wrap a list of elements that each have a `data-we-id` attribute.\nFires a `we-reorder` CustomEvent<string[]> on drop with the new ordered\narray of IDs.\n  Props: direction: 'vertical' | 'horizontal' = 'vertical', gap: string = ''\n- we-spinner (LayoutElement)\n  Props: size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | (string & {}) = 'md', color: string = ''\n- we-switch (DesignSystemElement)\n  Props: checked: boolean = false, disabled: boolean = false, name: string = '', value: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md', labelOff: string = '', labelOn: string = ''\n- we-tab (DesignSystemElement)\n  Props: key: string = '', selected: boolean = false, label?: string | undefined, selectedProps?: Partial<DesignSystemProps> | undefined\n- we-tabs (DesignSystemElement)\n  Props: selectedKey: string = ''\n- we-tag (DesignSystemElement)\n  Props: variant: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' = 'neutral', dismissible: boolean = false\n- we-text (DesignSystemElement)\n  Props: text?: string | undefined, variant: '' | 'body' | 'label' | 'footnote' | 'subheading' | 'ingress' | 'heading-sm' | 'heading-md' | 'heading-lg' | 'heading-xl' = '', tag: 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'small' | 'b' | 'i' | 'label' | 'div' = 'span', inline: boolean = false, uppercase: boolean = false, italic: boolean = false, truncate: boolean = false, gradient: string = ''\n- we-textarea (DesignSystemElement)\n  Props: value: string = '', name: string = '', placeholder: string = '', rows: number = 3, maxlength: unknown = Infinity, minlength: number = 0, disabled: boolean = false, required: boolean = false, readonly: boolean = false, resize: 'none' | 'vertical' | 'horizontal' | 'both' = 'vertical', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-timestamp (DesignSystemElement) — Displays a formatted or relative timestamp that self-updates each minute\nwhen `relative` is enabled.\n  Props: value: string = '', relative: boolean = false, locale: string = 'en', dateStyle: Intl.DateTimeFormatOptions['dateStyle'] | null = null, timeStyle: Intl.DateTimeFormatOptions['timeStyle'] | null = null, weekday: Intl.DateTimeFormatOptions['weekday'] | null = null, year: Intl.DateTimeFormatOptions['year'] | null = null, month: Intl.DateTimeFormatOptions['month'] | null = null, day: Intl.DateTimeFormatOptions['day'] | null = null, hour: Intl.DateTimeFormatOptions['hour'] | null = null, minute: Intl.DateTimeFormatOptions['minute'] | null = null, second: Intl.DateTimeFormatOptions['second'] | null = null, timeZone: string | null = null, hourCycle: Intl.DateTimeFormatOptions['hourCycle'] | null = null, formattedTime: string\n- we-tooltip (LayoutElement)\n  Props: open: boolean = false, title: string = '', placement: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' = 'top', tooltipEl: HTMLElement, triggerEl: HTMLElement, arrowEl: HTMLElement\n- we-video (LayoutVisualElement)\n  Props: src: string = '', poster?: string | undefined, controls: boolean = false, preload: 'none' | 'metadata' | 'auto' = 'metadata', autoplay: boolean = false, loop: boolean = false, muted: boolean = false, playsinline: boolean = false, stream?: MediaStream | null | undefined\n\n@we/components:\n- AudioDisplay\n  Props: title: string | undefined, artist: string | undefined, audioUrl: string | undefined, duration: number | undefined, albumArt: string | undefined\n- AudioInput\n  Props: title: string | undefined, artist: string | undefined, audioUrl: string | FileData | undefined, duration: number | undefined, albumArt: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- BlockComposer (DesignSystemElement)\n  Props: editorState?: any, perspective?: PerspectiveProxy | null, onSave?: ((json: SerializedBlockNode) => void), onReady?: ((api: { save: () => void; }) => void)\n- BlockPlaceholder\n  Props: icon: string, label: string, hint?: string, accept?: string, onFileDrop?: ((file: File) => void), onClick?: (() => void)\n- BlockRenderer (DesignSystemElement)\n  Props: editorState?: any, perspective?: PerspectiveProxy | null, rootClass?: string\n- BlockToolbar\n  Props: placement?: BlockToolbarPlacement, children: JSX.Element, stopPropagation?: boolean\n- CalloutDisplay\n  Props: text: string | undefined, variant: string | undefined, icon: string | undefined\n- CalloutInput\n  Props: text: string | undefined, variant: string | undefined, icon: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- CodeDisplay\n  Props: code: string | undefined, language: string | undefined, title: string | undefined\n- CodeInput\n  Props: code: string | undefined, language: string | undefined, title: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- CollectionDisplay\n  Props: layout?: string, columnCount?: number, gap?: string, childEditorState?: any\n- CollectionInput\n  Props: nodeKey: string, layout?: string, columnCount?: number, gap?: string, childEditorState?: any, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- DividerDisplay\n  Props: style: \"solid\" | \"dashed\" | \"dotted\" | undefined\n- DividerInput\n  Props: style: DividerVariant | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- EmbedDisplay\n  Props: url: string | undefined, target: string | undefined, targetType: string | undefined, displayMode: string | undefined\n- EmbedInput\n  Props: url: string | undefined, target: string | undefined, targetType: string | undefined, displayMode: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- EventDisplay\n  Props: title: string | undefined, description: string | undefined, startDate: string | undefined, endDate: string | undefined, location: string | undefined, allDay: boolean | undefined\n- EventInput\n  Props: title: string | undefined, description: string | undefined, startDate: string | undefined, endDate: string | undefined, location: string | undefined, allDay: boolean | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- FileDisplay\n  Props: title: string | undefined, name: string | undefined, url: string | undefined, mimeType: string | undefined, size: number | undefined\n- FileInput\n  Props: title: string | undefined, name: string | undefined, url: string | FileData | undefined, mimeType: string | undefined, size: number | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- ImageDisplay\n  Props: src: string | undefined, altText: string | undefined, width: number | undefined, height: number | undefined\n- ImageInput\n  Props: src: string | FileData | undefined, altText: string | undefined, width: number | undefined, height: number | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- LinkDisplay\n  Props: url: string | undefined, title: string | undefined, description: string | undefined, thumbnail: string | undefined\n- LinkInput\n  Props: url: string | undefined, title: string | undefined, description: string | undefined, thumbnail: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- LocationDisplay\n  Props: name: string | undefined, latitude: number | undefined, longitude: number | undefined, address: string | undefined\n- LocationInput\n  Props: name: string | undefined, latitude: number | undefined, longitude: number | undefined, address: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- TagDisplay\n  Props: name: string | undefined, color: string | undefined\n- TagInput\n  Props: name: string | undefined, color: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- TaskDisplay\n  Props: title: string | undefined, description: string | undefined, status: string | undefined, priority: string | undefined, dueDate: string | undefined, assignee: string | undefined\n- TaskInput\n  Props: title: string | undefined, description: string | undefined, status: string | undefined, priority: string | undefined, dueDate: string | undefined, assignee: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- VideoDisplay\n  Props: url: string | undefined, title: string | undefined, thumbnail: string | undefined, provider: string | undefined, width: number | undefined\n- VideoInput\n  Props: url: string | undefined, title: string | undefined, thumbnail: string | undefined, provider: string | undefined, width: number | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- Accordion\n  Props: children?: JSX.Element, renderContent?: ((item: AccordionItem, index: number) => JSX.Element), onChange?: ((openItems: string[]) => void), items?: AccordionItem[], multiple?: boolean, styles?: Record<string, string | number>\n- AudioVisualiser\n  Props: src: string | undefined, bars?: number, height?: number, color?: string, activeColor?: string\n- AvatarStack\n  Props: avatars: AvatarInfo[], max?: number, size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxs\" | \"xxl\", overlap?: number, ring?: string, styles?: Record<string, string | number>\n- Breadcrumbs\n  Props: onNavigate?: ((item: BreadcrumbItem, index: number) => void), items?: BreadcrumbItem[], separator?: string, styles?: Record<string, string | number>\n- Calendar\n  Props: onSelect?: ((date: string) => void), value?: string, events?: CalendarEvent[], styles?: Record<string, string | number>\n- Card (DesignSystemElement)\n- CircleButton\n  Props: label: string, icon?: string, image?: string, onClick?: (() => void), class?: string, styles?: Record<string, string | number>\n- CodeEditor\n  Props: code: string, language?: CodeEditorLanguage, readOnly?: boolean, onChange?: ((code: string) => void), onSave?: ((code: string) => void), styles?: Record<string, string | number>\n- CollapsedContent\n  Props: collapsed: boolean, onExpandClick?: (() => void), showToggle?: boolean, icon?: string, maxHeight?: string, fadeColor?: string, children?: JSX.Element, class?: string, styles?: Record<string, string | number>\n- Column (DesignSystemElement)\n- Combobox (DesignSystemElement)\n  Props: options: string[] | ComboboxOption[], value?: string, placeholder?: string, size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\", onChange?: ((value: string) => void)\n- DropdownMenu — Flexible dropdown menu for actions, toggles, and grouped items. Use for context menus, settings panels, layer controls, and command palettes.\n  Props: class?: string, styles?: Record<string, string | number>, placement?: Placement, triggerLabel?: string, triggerIcon?: string, items: SolidDropdownMenuEntry[]\n- EditableImage (DesignSystemElement)\n  Props: src?: string, alt?: string, fit?: \"fill\" | \"cover\" | \"contain\" | \"none\" | \"scale-down\", placeholderIcon?: string, onImageChange?: ((file: File) => void), class?: string, aspect?: number, maxSize?: number\n- FlipCard\n  Props: front?: JSX.Element, back?: JSX.Element, width?: string, height?: string, flipOnHover?: boolean, flipDuration?: string, wobbleOnHover?: boolean, wobbleDegree?: number, class?: string, styles?: Record<string, string | number>\n- Grid (DesignSystemElement)\n  Props: template?: string, columns?: number, minChildWidth?: string\n- IconLabelButton\n  Props: icon: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<string>, label: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<string>, selected?: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<boolean | undefined>, iconWeight?: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<IconWeight | undefined>, onClick?: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<(() => void) | undefined>, class?: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<string | undefined>, styles?: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<Record<string, string | number> | undefined>\n- ImageCrop\n  Props: src: string, fileName?: string, aspect?: number, maxSize?: number, outputType?: string, quality?: number, onReady?: ((ref: ImageCropRef) => void)\n- ImageLightbox\n  Props: srcs: string[], initialIndex: number, onClose: () => void\n- List\n  Props: children?: JSX.Element, renderItem?: ((item: ListItem, index: number) => JSX.Element), items?: ListItem[], ordered?: boolean, gap?: string, styles?: Record<string, string | number>\n- PostCard\n  Props: creator?: { name: string; avatar: string; }, title: string, text: string, class?: string, styles?: Record<string, string | number>\n- RerenderLog\n  Props: location: string\n- Row (DesignSystemElement)\n- Search (DesignSystemElement)\n  Props: placeholder?: string, value?: string, onSearch?: ((value: string) => void), debounce?: number\n- Select (DesignSystemElement)\n  Props: options: SelectOption[], value?: string, placeholder?: string, searchable?: boolean, label?: string, size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\", onChange?: ((value: string) => void)\n- SignalControl\n  Props: signalType: SignalTypeData, signals?: SignalData[], myDid?: string, onSignal?: ((value: number) => void), disabled?: boolean, preview?: boolean, class?: string, styles?: Record<string, string | number>\n- Stepper\n  Props: onStepClick?: ((index: number) => void), steps?: StepperStep[], activeStep?: number, orientation?: \"horizontal\" | \"vertical\", styles?: Record<string, string | number>\n- Table\n  Props: renderCell?: ((row: Record<string, unknown>, column: TableColumn, index: number) => JSX.Element), columns: TableColumn[], rows: Record<string, unknown>[], striped?: boolean, bordered?: boolean, styles?: Record<string, string | number>\n- Timeline\n  Props: children?: JSX.Element, renderItem?: ((item: TimelineItem, index: number) => JSX.Element), items?: TimelineItem[], styles?: Record<string, string | number>\n- ToastContainer\n  Props: position?: \"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\" | \"top-center\" | \"bottom-center\", styles?: Record<string, string | number>\n\n@we/widgets:\n- CesiumGlobe — 3D globe widget using CesiumJS with a modular layer system.\nLayers are injected via factory functions (planet surface + background).\nRegistered in the app's component registry, which injects `layerFactoryRegistry` — so templates\nplace it as `CesiumGlobe` without supplying that prop themselves.\n  Props: ionAccessToken?: string, planetLayers?: LayerConfig<unknown>[], backgroundLayers?: LayerConfig<unknown>[], layerFactoryRegistry: Record<string, LayerFactory<any>>\n- CollapsibleSidebar\n  Props: header?: JSX.Element, footer?: JSX.Element, items: CollapsibleSidebarItem[], footerItems?: CollapsibleSidebarItem[], side?: \"left\" | \"right\", position?: \"static\" | \"absolute\" | \"fixed\", zIndex?: number, collapsedWidth?: string, expandedWidth?: string, defaultExpanded?: boolean, expandOnHover?: boolean, transitionDuration?: number, bg?: string, border?: string, padding?: string, gap?: string, centerItems?: boolean, itemColor?: string, itemColorHover?: string, itemColorActive?: string, itemBg?: string, itemBgHover?: string, itemBgActive?: string, itemPadding?: string, itemGap?: string, badgeBg?: string, badgeColor?: string, iconSize?: IconSize, onItemClick?: ((item: CollapsibleSidebarItem) => void), onExpandedChange?: ((expanded: boolean) => void)\n- GraphWidget — 2D force-directed graph visualization using D3-force layout and Canvas rendering.\nDisplays typed nodes (user, space, post) and edges (follows, member-of, etc.)\nwith configurable styling, layout forces, and interaction handlers.\n  Props: data: GraphData, width?: string | number, height?: string | number, nodeStyle?: NodeStyleConfig, edgeStyle?: EdgeStyleConfig, layout?: LayoutConfig, interactions?: InteractionConfig\n- SpaceSidebarWidget\n  Props: name: string, description?: string, class?: string, style?: Record<string, string | number>\n\n---\n\n## Design System Props\n\nMost @we/primitives inherit **all** layers below. Props use design token values — not raw CSS.\n\n### Token Value Reference\n\n| Token Type | Valid Values |\n|---|---|\n| SpaceValue | \"0\", \"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\", \"1000\" (or CSS length e.g. \"16px\") |\n| ColorValue | \"{hue}-{shade}\" where hue = neutral, primary, success, warning, danger and shade = 0, 25, 50, 75, 100, 200–900, 1000. Also \"white\", \"black\". (or CSS color) |\n| RadiusValue | \"0\", \"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\", \"pill\", \"full\" (or CSS length) |\n| ShadowValue | \"sm\", \"md\", \"lg\", \"xl\" |\n| FontSizeValue | \"base\", \"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\", \"1000\" (or CSS length) |\n| FontFamilyValue | \"base\" (or CSS font-family) |\n| LineHeightValue | \"none\", \"tight\", \"snug\", \"normal\", \"relaxed\", \"loose\" (or CSS value) |\n| LetterSpacingValue | \"tighter\", \"tight\", \"normal\", \"wide\", \"wider\", \"widest\" (or CSS value) |\n| FontWeightValue | Named tokens: \"regular\" (400), \"medium\" (500), \"semibold\" (600), \"bold\" (700). Numeric: \"100\"–\"900\". CSS pass-through: \"light\", \"normal\", \"bolder\". |\n\n**Layout-only primitives** — these accept only Layout props (not Visual, Flex, Typography, or State):\nwe-divider, we-icon, we-menu-group, we-popover, we-spinner, we-tooltip\n\n### Layout\n\n| Prop | Type | Description |\n|------|------|-------------|\n| width | string | Element width |\n| height | string | Element height |\n| minWidth | string | Minimum width |\n| minHeight | string | Minimum height |\n| maxWidth | string | Maximum width |\n| maxHeight | string | Maximum height |\n| position | \"relative\" \\| \"absolute\" \\| \"fixed\" \\| \"sticky\" | CSS position |\n| top | string | Top offset |\n| right | string | Right offset |\n| bottom | string | Bottom offset |\n| left | string | Left offset |\n| zIndex | number | Stack order |\n| display | \"flex\" \\| \"block\" \\| \"inline\" \\| \"inline-block\" \\| \"grid\" \\| \"inline-flex\" | Display mode |\n| flex | string | Flex shorthand (e.g. \"1\", \"0 0 auto\", \"none\") — controls grow/shrink/basis |\n| alignSelf | string | Override parent cross-axis alignment for this child |\n| overflow | \"hidden\" \\| \"auto\" | Overflow behavior |\n| m | SpaceValue | Margin (all sides) |\n| mx | SpaceValue | Margin left + right |\n| my | SpaceValue | Margin top + bottom |\n| mt | SpaceValue | Margin top |\n| mr | SpaceValue | Margin right |\n| mb | SpaceValue | Margin bottom |\n| ml | SpaceValue | Margin left |\n\n### Visual\n\n| Prop | Type | Description |\n|------|------|-------------|\n| bg | ColorValue | Background color (token) |\n| bgImage | string | Background image URL — sets background-image, defaults background-size to cover, background-position to center, background-repeat to no-repeat |\n| bgFit | \"cover\" \\| \"contain\" | Background image sizing (default: \"cover\") — only meaningful with bgImage |\n| bgPosition | string | Background image position (default: \"center\", e.g. \"top\", \"50% 20%\") — only meaningful with bgImage |\n| bgImageOpacity | number | Fades bgImage only (0–1), independent of the element's own content/opacity — only meaningful with bgImage |\n| bgImageTint | ColorValue | Color bgImage fades toward as bgImageOpacity decreases (default: the element's own `bg`, or neutral-0) — only meaningful with bgImageOpacity |\n| color | ColorValue | Text/foreground color (token) |\n| opacity | number | Opacity (0–1) |\n| border | string | Border shorthand (e.g. \"1px solid neutral-200\" — color tokens are resolved) |\n| borderColor | ColorValue | Border color (token, e.g. \"neutral-200\", \"primary-500\") |\n| borderTop | string | Top border shorthand (color tokens resolved) |\n| borderRight | string | Right border shorthand (color tokens resolved) |\n| borderBottom | string | Bottom border shorthand (color tokens resolved) |\n| borderLeft | string | Left border shorthand (color tokens resolved) |\n| borderWidth | string | Border width (raw CSS, e.g. \"1px\", \"2px 0\") |\n| shadow | \"sm\" \\| \"md\" \\| \"lg\" \\| \"xl\" | Shadow token |\n| cursor | \"pointer\" \\| \"default\" \\| \"text\" \\| \"not-allowed\" | Cursor style |\n| pointerEvents | \"none\" \\| \"auto\" | Pointer events |\n| transform | string | CSS transform |\n| transition | string | CSS transition |\n| r | RadiusValue | Border radius (all corners) |\n| rt | RadiusValue | Border radius top |\n| rb | RadiusValue | Border radius bottom |\n| rl | RadiusValue | Border radius left |\n| rr | RadiusValue | Border radius right |\n| rtl | RadiusValue | Border radius top-left |\n| rtr | RadiusValue | Border radius top-right |\n| rbr | RadiusValue | Border radius bottom-right |\n| rbl | RadiusValue | Border radius bottom-left |\n\n### Flex (Container)\n\n| Prop | Type | Description |\n|------|------|-------------|\n| direction | \"row\" \\| \"row-reverse\" \\| \"column\" \\| \"column-reverse\" | Flex direction |\n| ax | \"start\" \\| \"center\" \\| \"end\" \\| \"between\" \\| \"around\" \\| \"even\" \\| \"stretch\" | Main-axis alignment |\n| ay | \"start\" \\| \"center\" \\| \"end\" \\| \"between\" \\| \"around\" \\| \"even\" \\| \"stretch\" | Cross-axis alignment |\n| wrap | boolean | Enable flex wrap |\n| gap | SpaceValue | Gap between children (token) |\n| p | SpaceValue | Padding (all sides) |\n| px | SpaceValue | Padding left + right |\n| py | SpaceValue | Padding top + bottom |\n| pt | SpaceValue | Padding top |\n| pr | SpaceValue | Padding right |\n| pb | SpaceValue | Padding bottom |\n| pl | SpaceValue | Padding left |\n\n### Typography\n\n| Prop | Type | Description |\n|------|------|-------------|\n| textAlign | \"left\" \\| \"center\" \\| \"right\" \\| \"justify\" | Text alignment |\n| fontFamily | \"base\" \\| {css-font-family} | Font family token |\n| fontWeight | \"regular\" \\| \"medium\" \\| \"semibold\" \\| \"bold\" (named tokens) or \"100\"–\"900\" (numeric) or \"light\" \\| \"normal\" \\| \"bolder\" (CSS pass-through) | Font weight |\n| fontSize | \"base\" \\| \"100\"–\"1000\" \\| {css-length} | Font size token |\n| lineHeight | \"none\" \\| \"tight\" \\| \"snug\" \\| \"normal\" \\| \"relaxed\" \\| \"loose\" | Line height token |\n| letterSpacing | \"tighter\" \\| \"tight\" \\| \"normal\" \\| \"wide\" \\| \"wider\" \\| \"widest\" | Letter spacing token |\n| textDecoration | \"underline\" \\| \"line-through\" \\| \"overline\" \\| \"none\" | Text decoration |\n| textTransform | \"uppercase\" \\| \"lowercase\" \\| \"capitalize\" \\| \"none\" | Text transform |\n\n**Typography defaults:** fontSize and fontWeight have **no built-in defaults** — omitting them inherits from parent elements (browser default is ~16px / normal weight). Do not set fontSize or fontWeight unless you need a non-default value. For example, `fontSize: '300'` (16px) and `fontWeight: '500'` (normal) are the inherited defaults — omit them.\n\n`we-text` variants (set via the `variant` prop) bundle typography presets. Always pair with a semantic `tag` prop for correct HTML structure:\nbody (300, tag: p/span), label (200 + medium, tag: span), footnote (100, tag: span), subheading (400 + medium, tag: h5/p), ingress (400 + lineHeight 1.6, tag: p), heading-sm (500 + bold, tag: h4), heading-md (600 + bold, tag: h3), heading-lg (700 + bold, tag: h2), heading-xl (800 + bold, tag: h1).\nVariants set size and weight only — color is always inherited or set explicitly. For muted footnote text add `color=\"neutral-400\"` explicitly.\n\n### State\n\n| Prop | Type | Description |\n|------|------|-------------|\n| hoverProps | Partial\\<DesignSystemProps\\> | Styles on :hover |\n| activeProps | Partial\\<DesignSystemProps\\> | Styles on :active |\n| focusProps | Partial\\<DesignSystemProps\\> | Styles on :focus |\n| disabledProps | Partial\\<DesignSystemProps\\> | Styles when disabled |\n\n### Additional\n\n| Prop | Type | Description |\n|------|------|-------------|\n| styles | Record\\<string, string \\| number\\> | Inline CSS applied directly to the component's own element (raw CSS values allowed). For Column, Row, Grid — use this when you need CSS the DS props don't cover. **Do not confuse with node-level styles** (see Schema Structure) which applies to a wrapper div, not the component. |\n| onClick | ActionToken | Event handler (see dynamic logic) |\n\n---\n\n## Design Tokens\n\nUse design tokens for spacing, color, radius, etc. Do not use raw CSS values unless using the styles prop.\n\nanimation.transition: '0', '100', '200', '300', '400', '500'\n\navatarSize: 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'\n\nborder.color: 'base', 'strong'\n\ncolor.base: 'white', 'black'\n\ncolor.config: 'multiplier', 'subtractor', 'saturation', 'neutralSaturation'\n\ncolor.hues: 'neutral', 'primary', 'success', 'warning', 'danger'\n\ncolor.lightness: '0', '25', '50', '75', '100', '200', '300', '400', '500', '600', '700', '800', '900', '1000'\n\ncomponent.scrollbar: 'width', 'backgroundImage', 'background', 'cornerBackground', 'thumbBoxShadow', 'thumbBorderRadius', 'thumbBackground'\n\ncomponentHeight: 'xs', 'sm', 'md', 'lg', 'xl'\n\neffect.depth: '100', '200', '300', '400', '500', 'none'\n\nfont.family: 'base', 'mozilla', 'boldonse'\n\nfont.letterSpacing: 'tighter', 'tight', 'normal', 'wide', 'wider', 'widest'\n\nfont.lineHeight: 'none', 'tight', 'snug', 'normal', 'relaxed', 'loose'\n\nfont.size: '100', '200', '300', '400', '500', '600', '700', '800', '900', '1000', 'base'\n\nfont.weight: '100', '200', '300', '400', '500', '600', '700', '800', '900', 'regular', 'medium', 'semibold', 'bold'\n\nlayout: 'xs', 'sm', 'md', 'lg'\n\nradius: '0', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'pill', 'full'\n\nshadow: 'sm', 'md', 'lg', 'xl'\n\nsize: 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'\n\nspace: '0', '100', '200', '300', '400', '500', '600', '700', '800', '900', '1000'\n\nzIndex: 'dropdown', 'sticky', 'modal', 'popover', 'toast', 'tooltip'\n\n---\n\n## Block & Entity Models\n\nAvailable data models for $query and store data:\n\nAgentSettings extends Ad4mModel:\n  Fields:\n  - currentTemplateId: string = 'default' [we://current_template]\n  - defaultTemplateId: string = 'default' [we://default_template]\n  - currentThemeId: string = 'default' [we://current_theme]\n  - defaultThemeId: string = 'default' [we://default_theme]\n  - claudeApiKey: string [we://claude_api_key]\n  - perspectiveOrder: string [we://perspective_order]\n  - globalSpaceJoined: boolean = false [we://global_space_joined]\n  - globalSpaceUrl: string [we://global_space_url]\n  - useSpaceTemplate: boolean = true [we://use_space_template]\n  Relations:\n  - installedTemplates: HasMany → Template [we://installed_template]\n  - installedThemes: HasMany → Theme [we://installed_theme]\n  - spaceTemplatePreferences: HasMany → SpaceTemplatePreference [we://space_template_preference]\n\nAudioBlock extends WeNode:\n  Fields:\n  - title: string (required) [we://title]\n  - artist: string [we://artist]\n  - audioUrl: string (required) [we://audio_url]\n  - duration: number [we://duration]\n  - albumArt: string [we://album_art]\n  - version: number [we://version]\n\nCalloutBlock extends WeNode:\n  Fields:\n  - text: string [we://text]\n  - variant: string = info [we://variant]\n  - icon: string [we://icon]\n  - version: number [we://version]\n\nChatMessage extends WeNode:\n  Fields:\n  - role: string [we://role]\n  - content: string [we://content]\n\nChatSession extends WeNode:\n  Fields:\n  - name: string [we://name]\n  - templateId: string [we://template_id]\n  Relations:\n  - messages: HasMany → ChatMessage [we://chat_message]\n\nCodeBlock extends WeNode:\n  Fields:\n  - code: string (required) [we://code]\n  - language: string [we://language]\n  - title: string [we://title]\n  - version: number [we://version]\n\nCollectionBlock extends WeNode:\n  Fields:\n  - editorState: string = null [we://editor_state]\n  - type: string [we://type]\n  - display: string [we://display]\n  - direction: string [we://direction]\n  - format: string [we://format]\n  - indent: number [we://indent]\n  - columns: number [we://columns]\n  - gap: string [we://gap]\n  - version: number [we://version]\n  - textContent: string [we://text_content]\n  Relations:\n  - children: HasMany [we://children]\n\nDividerBlock extends WeNode:\n  Fields:\n  - style: string = solid [we://style]\n  - version: number [we://version]\n\nEmbedBlock extends WeNode:\n  Fields:\n  - url: string [we://url]\n  - target: string [we://target]\n  - targetType: string [we://target_type]\n  - displayMode: string = card [we://display_mode]\n  - version: number [we://version]\n\nEventBlock extends WeNode:\n  Fields:\n  - title: string (required) [we://title]\n  - description: string [we://description]\n  - startDate: string (required) [we://start_date]\n  - endDate: string [we://end_date]\n  - location: string [we://location]\n  - allDay: boolean = false [we://all_day]\n  - version: number [we://version]\n\nFileBlock extends WeNode:\n  Fields:\n  - title: string [we://title]\n  - name: string (required) [we://name]\n  - url: string (required) [we://url]\n  - mimeType: string [we://mime_type]\n  - size: number [we://size]\n  - version: number [we://version]\n\nImageBlock extends WeNode:\n  Fields:\n  - src: string (required) [we://src]\n  - altText: string [we://altText]\n  - width: number [we://width]\n  - height: number [we://height]\n  - version: number [we://version]\n\nLinkBlock extends WeNode:\n  Fields:\n  - url: string (required) [we://url]\n  - title: string [we://title]\n  - description: string [we://description]\n  - thumbnail: string [we://thumbnail]\n  - version: number [we://version]\n\nLocationBlock extends WeNode:\n  Fields:\n  - name: string [we://name]\n  - latitude: number (required) [we://latitude]\n  - longitude: number (required) [we://longitude]\n  - address: string [we://address]\n  - city: string [we://city]\n  - countryCode: string [we://country_code]\n  - country: string [we://country]\n  - version: number [we://version]\n\nSignal extends Ad4mModel:\n  Fields:\n  - signalTypeId: string [we://signal_type_id]\n  - value: number [we://value]\n\nSignalType extends WeNode:\n  Fields:\n  - name: string [we://name]\n  - slug: string [we://slug]\n  - description: string [we://description]\n  - icon: string [we://icon]\n  - iconSecondary: string [we://icon_secondary]\n  - step: number = 1 [we://step]\n  - rangeMin: number [we://range_min]\n  - rangeMax: number = 1 [we://range_max]\n  - mode: SignalMode = 'toggle' [we://mode]\n  - aggregate: SignalAggregate = 'count' [we://aggregate]\n  - semantic: SignalSemantic = 'custom' [we://semantic]\n  - allowChange: boolean = true [we://allow_change]\n  - valueType: string = 'numeric' [we://signal_value_type]\n  - schemaVersion: number = 1 [we://schema_version]\n\nSpace extends WeNode:\n  Fields:\n  - uuid: string [we://uuid]\n  - url: string [we://url]\n  - name: string (required) [we://name]\n  - description: string (required) [we://description]\n  - access: string = 'personal' [we://access]\n  - discovery: string = 'hidden' [we://discovery]\n  - avatar: string [we://image]\n  - coverImage: string [we://thumbnail]\n  - defaultTemplateId: string [we://default_template_id]\n  - defaultThemeId: string [we://default_theme_id]\n  - enabledModules: string [we://enabled_modules]\n  Relations:\n  - location: HasOne [we://location]\n\nSpaceTemplatePreference extends WeNode:\n  Fields:\n  - spaceUrl: string [we://space_url]\n  - preference: string [we://preference]\n\nTagBlock extends WeNode:\n  Fields:\n  - name: string (required) [we://name]\n  - color: string [we://color]\n  - version: number [we://version]\n\nTaskBlock extends WeNode:\n  Fields:\n  - title: string (required) [we://title]\n  - description: string [we://description]\n  - status: string = todo [we://status]\n  - priority: string = medium [we://priority]\n  - dueDate: string [we://due_date]\n  - assignee: string [we://assignee]\n  - version: number [we://version]\n\nTemplate extends WeNode:\n  Fields:\n  - name: string [we://name]\n  - description: string [we://description]\n  - icon: string [we://icon]\n  - origin: string [we://origin]\n  - version: number = 1 [we://version]\n  - slug: string [we://slug]\n  - schema: string = null [we://template_schema]\n  - themeId: string [we://theme_id]\n  Relations:\n  - screenshots: HasMany → ImageBlock [we://screenshot]\n\nTextBlock extends WeNode:\n  Fields:\n  - type: string [we://type]\n  - direction: string [we://direction]\n  - format: string [we://format]\n  - indent: number [we://indent]\n  - textFormat: number [we://textFormat]\n  - textStyle: string [we://textStyle]\n  - listType: string [we://listType]\n  - start: number [we://start]\n  - tag: string [we://tag]\n  - text: string [we://text]\n  - version: number [we://version]\n\nTheme extends WeNode:\n  Fields:\n  - name: string [we://name]\n  - description: string [we://description]\n  - icon: string [we://icon]\n  - origin: string [we://origin]\n  - slug: string [we://slug]\n  - version: number = 1 [we://version]\n  - css: string = null [we://stylesheet]\n  - overrides: string = null [we://token_overrides]\n  Relations:\n  - screenshots: HasMany → ImageBlock [we://screenshot]\n\nVideoBlock extends WeNode:\n  Fields:\n  - title: string [we://title]\n  - url: string (required) [we://url]\n  - duration: number [we://duration]\n  - thumbnail: string [we://thumbnail]\n  - provider: string [we://provider]\n  - version: number [we://version]\n\nWeNode extends Ad4mModel:\n  Relations:\n  - comments: HasMany [we://comment]\n  - signals: HasMany → Signal [we://signal]\n\n---\n\n## Stores\n\nStores provide state (readable values) and actions (methods) for dynamic logic in schemas.\nAccess state with $store and call actions with $action.\nFor ephemeral/form state, use $localState/$local/$setLocal instead of stores (see Dynamic Logic).\n\nAdamStore:\n- State:\n  - adamClient: Ad4mClient | undefined\n  - me: Agent | undefined\n  - allPerspectives: array of PerspectiveProxy objects (all AD4M perspectives)\n  - currentPerspective: PerspectiveProxy | null (the perspective currently being viewed)\n  - currentPerspectiveModels: ModelManifestEntry[] (non-WE SHACL models from the current perspective; injected as externalModels into AI messages)\n  - isWeSpace: boolean — true once the current perspective is confirmed to have WE's Space SDNA installed (false for a joined-but-foreign perspective, e.g. one synced in from Flux)\n  - personalSpaces: array of Space objects (local/personal spaces; all Space fields)\n  - sharedSpaces: array of Space objects (shared/neighbourhood spaces; all Space fields)\n  - bootState: string\n  - passwordError: string | undefined\n  - loginLoading: boolean\n  - creatingSpace: boolean (true while a new space is being created)\n  - agents: AgentProfileSummary[] — cache of all fetched agent profiles (did, firstName, lastName, handle, bio, avatar, coverImage, location)\n  - ownAgent: AgentProfileSummary | undefined — reactive accessor for the current user's own profile (derived from agents cache)\n  - orderedSidebarItems: array of sidebar items in user-defined order (uuid, name, avatar, spaceId) — personal + shared spaces merged\n- Actions:\n  - navigate(to: string, options?): navigates to a route\n  - addNewSpace(space: Space): adds a new space\n  - createSpace(name: string, description: string, shared: boolean, imageFile?: File): creates a new space with full setup\n  - initializeAsWeSpace(name: string, description: string, avatarValue?: File | string | null): installs WE's Space SDNA into the current, already-joined, foreign-native perspective (e.g. one synced in from Flux) and creates a Space entity in place — access is always 'shared' since the perspective is already a published neighbourhood\n  - switchPerspective(uuid: string): switches to a perspective by UUID, registers its SHACL models as dynamic model classes, and populates currentPerspectiveModels\n  - removePerspective(uuid: string): removes a perspective by UUID\n  - reorderPerspectives(newOrder: string[]): reorders the sidebar items by UUID array\n  - login(password: string): logs in the agent with password\n  - logout(): locks the agent and returns to login screen\n  - fetchAgent(did: string): fetches and caches an agent's profile from their public AD4M perspective\n  - updateOwnProfile(fields: { firstName?, lastName?, handle?, bio? }): updates own profile text fields and publishes to public perspective\n  - updateProfileImage(field: \"avatar\" | \"coverImage\", imageFile: File): uploads image to FILE_STORAGE_LANGUAGE and publishes expression URL to public perspective\n  - updateAgentLocation(update: { latitude?, longitude?, city?, country?, countryCode? }): merges location update into cache and publishes to public perspective\n  - cleanupSpaceSdna(uuid?: string): one-time remediation for a perspective that accumulated duplicate SDNA installs (e.g. from before joinSpace checked for existing SDNA before installing) — removes the redundant duplicate link copies. Defaults to the current perspective. Returns a display-ready summary string naming how many links were removed and the DIDs that authored them (your own DID annotated with \"(you)\"), or an empty string if nothing needed cleaning up\n\nRouteStore:\n- State:\n  - currentPath: string (the current route path)\n  - segments: string[] (currentPath split by \"/\", e.g. [\"/foo/bar\"] → [\"foo\", \"bar\"])\n- Actions:\n  - navigate(to: string, options?): navigates to a route\n\nThemeStore:\n- State:\n  - builtInThemes: array of ThemeData objects — built-in registry themes (origin: \"built-in\", always available)\n  - installedThemes: array of ThemeData objects — user-installed themes from root perspective (origin: \"custom\" | \"marketplace\")\n  - spaceThemes: array of ThemeData objects — themes stored in the current space perspective (origin: \"custom\")\n  - allThemes: array of ThemeData objects — union of builtInThemes + visible installedThemes + spaceThemes (hidden themes filtered out)\n  - currentThemeId: string — id of the currently active theme\n  - currentTheme: ThemeData — the currently active theme object (id, name, icon, origin)\n  - defaultThemeId: string — id of the user's preferred default theme (used for bootscreen, shell, and future space-override). Persisted to AgentSettings.defaultThemeId\n  - themeManagementList: ThemeManagementItem[] — flat list of all themes (built-in + all custom) with management metadata (id, name, icon, isBuiltIn, isInstalled, isDefault)\n- Actions:\n  - setCurrentTheme(themeId: string): sets and persists the active theme\n  - setDefaultTheme(themeId: string): sets the preferred default theme (persists to AgentSettings.defaultThemeId)\n  - toggleThemeInstalled(themeId: string): toggles a custom theme visible/hidden in pickers; does not delete the theme\n  - installFromMarketplace(marketplaceThemeId: string): installs a marketplace theme into installedThemes\n  - uninstallTheme(themeId: string): removes an installed theme (deletes the model)\n  - deleteTheme(themeId: string): permanently deletes a custom theme\n\nTemplateStore:\n- State:\n  - personalTemplates: array of TemplateSchema objects — core templates plus user's installed custom templates (excludes space templates)\n  - spaceTemplates: array of TemplateSchema objects — templates loaded from the current space perspective\n  - builtInTemplates: array of TemplateSchema objects — built-in system templates (always available)\n  - myTemplates: array of TemplateSchema objects — user's installed custom templates only (excludes built-in and space templates)\n  - allTemplates: array of TemplateSchema objects — union of built-in + personal + space templates\n  - shellTemplates: array of TemplateSchema objects (static system pages: profile, settings, tests)\n  - currentTemplate: TemplateSchema (the active template)\n  - operationLoading: unknown\n  - activeShellView: string | null (id of the currently open shell overlay: 'profile' | 'settings' | 'schema-tests' | 'landing-page' | null)\n  - templateManagementList: TemplateManagementItem[] — flat list of all templates with management metadata (id, name, icon, description, isBuiltIn, isInstalled, isDefault)\n  - switcherGroups: TemplateSwitcherGroup[] — pre-grouped flat items for the template switcher UI; each group has { label: string, items: { id, name, icon }[] }. Groups: \"Space templates\", \"My templates\", \"Built-in\". Use $filter where: { name: { contains: ... } } for search since items have a flat name field.\n- Actions:\n  - updateTemplate(newTemplate: TemplateSchema): updates the current template\n  - switchTemplate(newTemplateId: string): switches to another template\n  - removeTemplate(): removes the current template\n  - saveTemplate(name: string): saves the current template\n  - toggleInstalled(): unknown\n  - setDefaultTemplate(): unknown\n  - deleteTemplate(): unknown\n  - openShellView(id: string): opens a shell overlay by id ('profile' | 'settings' | 'schema-tests' | 'landing-page')\n  - closeShellView(): closes the currently open shell overlay\n\nSpaceStore:\n- State:\n  - memberDids: string[] — DIDs of all members in the current space (includes own DID)\n  - members: AgentProfileSummary[] — cached profiles for all memberDids\n  - spaceDefaultTemplateId: string — the current space's default template ID (empty string when no space is active)\n  - currentSpace: Space | null — the current space model (all Space fields: uuid, url, name, description, access, discovery, avatar, coverImage, defaultTemplateId, defaultThemeId, location, plus id/author/createdAt)\n  - foreignSpacePrefill: { name, description, avatar } | null — detected from a foreign app's own model (e.g. Flux's Community) for prefilling the \"Initialize as WE space\" gate; null once the perspective is a WE space or no recognized foreign model is found\n  - signalTypes: array of SignalType objects (community-created reaction/vote types)\n  - signalTypesBySlug: Record<slug, SignalType> — computed map; access via { $store: \"spaceStore.signalTypesBySlug.<slug>\" }; use .id for the UUID\n  - enabledModules: string[] — ids of the feature modules this space has turned on. An unset value means \"not decided\", not \"none\": it falls back to every registered module, so spaces predating the setting keep the chrome they had\n  - moduleSettings: { id, name, description, icon, enabled }[] — every registered module paired with whether this space has it on; the shape the settings list renders\n- Actions:\n  - createPost(editorState: unknown): creates a new post\n  - updatePost(postId: string, editorState: unknown): reconciles an edited post against its existing blocks — updates/reuses blocks whose id survived the edit, creates new ones, deletes ones no longer present\n  - deletePost(postId: string): permanently deletes a post and all of its contained blocks (recursive, atomic)\n  - updateSpaceImage(field: \"avatar\" | \"coverImage\", imageFile: File): uploads and sets the space avatar or cover image\n  - createSignalType(config: Partial<SignalType>): creates a new signal type in the community; slug auto-derived from name if blank\n  - upsertSignal(nodeId: string, signalTypeId: string, value: number): adds or updates a signal on a node; value=0 deletes it\n  - navigateToSpace(spaceId: string, view?: string): navigates to a space — accepts a perspective UUID or a neighbourhood CID (sharedUrl without the neighbourhood:// prefix); pre-loads space templates before switching so the template and data arrive together\n  - setModuleEnabled(moduleId: string, enabled: boolean): turns a feature module on or off for the current space; writes the resolved list, so the first toggle also pins whatever was on by fallback\n\nAiStore:\n- State:\n  - models: array of Model objects\n  - tasks: array of AITask objects\n  - isOpen: unknown\n  - messages: unknown\n  - isStreaming: unknown\n  - streamingContent: unknown\n  - apiKeyConfigured: unknown\n  - templateName: unknown\n  - templateIcon: unknown\n  - isReadOnly: unknown\n  - hasPendingChanges: unknown\n  - pickerOpen: unknown\n  - pickerAction: unknown\n  - pickerDefaultName: unknown\n  - pickerDefaultIcon: unknown\n  - pickerShowDestination: unknown\n  - sessions: unknown\n  - activeSessionId: unknown\n  - panelMode: unknown\n  - schemaJson: unknown\n  - operationLoading: unknown\n  - canUndo: boolean (true when there are schema edits that can be undone)\n  - canRedo: boolean (true when there are undone schema edits that can be redone)\n- Actions:\n  - handleSchemaPrompt(prompt: string): generates a schema from a prompt\n  - sendMessage(): unknown\n  - close(): unknown\n  - toggle(): toggles the AI chat panel open/closed\n  - setApiKey(): unknown\n  - startFork(): unknown\n  - startFresh(): unknown\n  - confirmPicker(): unknown\n  - cancelPicker(): unknown\n  - newChat(): unknown\n  - switchSession(): unknown\n  - deleteSession(): unknown\n  - setPanelMode(): unknown\n  - onSchemaEdit(): unknown\n  - undo(): undoes the last schema edit\n  - redo(): redoes the last undone schema edit\n\nAppStore:\n- State:\n  - apps: RegisteredApp[] — list of registered external apps (id, name, image)\n  - appsWithWe: unknown\n  - activeAppId: string | null — id of the currently active app, or null if none\n- Actions:\n  - activateApp(id: string): activates an app and switches to its view\n  - deactivateApp(): deactivates the current app and returns to the template view\n\n---\n\n## Store Usage Patterns\n\nReading state:\n{ \"$store\": \"storeName.property\" }\nExample: { \"$store\": \"routeStore.currentPath\" }\n\nCalling actions:\n{ \"$action\": \"storeName.method\", \"args\": [...] }\nExample: { \"$action\": \"routeStore.navigate\", \"args\": [\"/home\"] }\n\nIterating over store data:\n{\n  \"type\": \"$each\",\n  \"props\": { \"items\": { \"$store\": \"adamStore.personalSpaces\" }, \"as\": \"space\" },\n  \"children\": [\n    {\n      \"type\": \"CircleButton\",\n      \"props\": {\n        \"label\": \"$space.name\",\n        \"onClick\": { \"$action\": \"routeStore.navigate\", \"args\": [{ \"$concat\": [\"/space/\", \"$space.uuid\"] }] }\n      }\n    }\n  ]\n}\n\nConditional rendering from store:\n{\n  \"type\": \"$if\",\n  \"props\": {\n    \"condition\": { \"$eq\": [{ \"$store\": \"routeStore.currentPath\" }, \"/\"] },\n    \"then\": { \"type\": \"we-text\", \"children\": [\"Home\"] },\n    \"else\": { \"type\": \"we-text\", \"children\": [\"Not home\"] }\n  }\n}\n\nDeriving options from store:\n{\n  \"$map\": {\n    \"items\": { \"$store\": \"templateStore.templates\" },\n    \"select\": { \"name\": \"$item.meta.name\", \"icon\": \"$item.meta.icon\" }\n  }\n}\n\nQuerying model data:\n{\n  \"$query\": { \"entity\": \"TaskBlock\", \"where\": { \"status\": \"todo\" } }\n}\n\nEager-loading relations with include (most common relational pattern):\nWhen you need related data displayed alongside a list, use include to hydrate relations in one query.\n\nExample — Channel list with conversation count and latest conversation:\n{\n  \"type\": \"$each\",\n  \"props\": {\n    \"items\": {\n      \"$query\": {\n        \"entity\": \"Channel\",\n        \"dataset\": \"$currentDataset\",\n        \"include\": {\n          \"$conversationCount\": { \"from\": \"conversations\", \"count\": true },\n          \"$latestConversation\": { \"from\": \"conversations\", \"order\": { \"createdAt\": \"desc\" }, \"limit\": 1 }\n        }\n      }\n    },\n    \"as\": \"channel\"\n  },\n  \"children\": [{\n    \"type\": \"Row\",\n    \"children\": [\n      { \"type\": \"we-text\", \"children\": [\"$channel.name\"] },\n      { \"type\": \"we-text\", \"children\": [\"$channel.$conversationCount\"] }\n    ]\n  }]\n}\n\nExample — Nested include (Conversations with their messages):\n{\n  \"$query\": {\n    \"entity\": \"Conversation\",\n    \"dataset\": \"$currentDataset\",\n    \"include\": {\n      \"messages\": {\n        \"order\": { \"createdAt\": \"desc\" },\n        \"limit\": 20\n      }\n    }\n  }\n}\nEach conversation in the result has a messages array of hydrated Message instances.\nNesting works to any depth: \"include\": { \"messages\": { \"include\": { \"reactions\": true } } }\n\nRelational drill-down (master-detail navigation across entity relations):\nUse routes + a $query `scope` when you navigate to a detail route and need only that record's children.\nscope.anchor is the parent entity type; scope.via is its HasMany relation (see externalModels) whose targets\nare the query's entity; scope.anchorId is the parent record's id. The adapter resolves the relation to a\nbackend handle, so no protocol details live in the template.\nrouteStore.segments.N extracts the Nth dynamic path segment (segments splits currentPath by \"/\").\n\nExample — Channel list → Conversation list:\n{\n  \"routes\": [\n    {\n      \"path\": \"/\",\n      \"type\": \"Column\",\n      \"props\": { \"gap\": \"300\", \"p\": \"400\" },\n      \"children\": [{\n        \"type\": \"$each\",\n        \"props\": {\n          \"items\": { \"$query\": { \"entity\": \"Channel\", \"dataset\": \"$currentDataset\" } },\n          \"as\": \"channel\"\n        },\n        \"children\": [{\n          \"type\": \"we-button\",\n          \"props\": {\n            \"variant\": \"ghost\",\n            \"onClick\": { \"$action\": \"routeStore.navigate\", \"args\": [{ \"$concat\": [\"/channels/\", \"$channel.id\"] }] }\n          },\n          \"children\": [\"$channel.name\"]\n        }]\n      }]\n    },\n    {\n      \"path\": \"/channels/:channelId\",\n      \"type\": \"Column\",\n      \"props\": { \"gap\": \"300\", \"p\": \"400\" },\n      \"children\": [{\n        \"type\": \"$each\",\n        \"props\": {\n          \"items\": {\n            \"$query\": {\n              \"entity\": \"Conversation\",\n              \"scope\": { \"anchor\": \"Channel\", \"via\": \"conversations\", \"anchorId\": { \"$store\": \"routeStore.segments.1\" } },\n              \"dataset\": \"$currentDataset\"\n            }\n          },\n          \"as\": \"convo\"\n        },\n        \"children\": [{\n          \"type\": \"we-text\",\n          \"children\": [\"$convo.conversationName\"]\n        }]\n      }]\n    }\n  ]\n}\nNotes:\n- Use include when you need related data displayed inline (e.g. a post with its comments, a channel with its conversation count).\n- Use a scope drill-down when you're on a detail route and want only children belonging to the current record.\n- dataset must point to the dataset that holds the data. For external apps (e.g. Flux) opened as a WE space, use \"$currentDataset\".\n- The relation name (in include, or scope.via) is the HasMany field name on the parent entity.\n\nLocal state (form with validation):\n{\n  \"type\": \"Column\",\n  \"$localState\": {\n    \"name\": {\n      \"type\": \"string\",\n      \"initial\": \"\",\n      \"validate\": [{ \"rule\": \"required\" }, { \"rule\": \"minLength\", \"value\": 2 }]\n    },\n    \"loading\": { \"type\": \"boolean\", \"initial\": false }\n  },\n  \"children\": [\n    {\n      \"type\": \"we-form-field\",\n      \"props\": { \"label\": \"Name\", \"error\": { \"$error\": \"name\" } },\n      \"children\": [{\n        \"type\": \"we-input\",\n        \"props\": {\n          \"value\": { \"$local\": \"name\" },\n          \"onInput\": { \"$setLocal\": \"name\", \"from\": \"$event.detail\" },\n          \"onBlur\": { \"$touch\": \"name\" }\n        }\n      }]\n    },\n    {\n      \"type\": \"we-button\",\n      \"props\": {\n        \"text\": \"Submit\",\n        \"loading\": { \"$local\": \"loading\" },\n        \"disabled\": { \"$not\": { \"$formValid\": \"$scope\" } },\n        \"onClick\": [\n          { \"$touch\": \"$all\" },\n          { \"$if\": { \"condition\": { \"$formValid\": \"$scope\" }, \"then\": { \"$action\": \"myStore.submit\", \"args\": [{ \"$local\": \"name\" }] } } }\n        ]\n      }\n    }\n  ]\n}\n\nRepeating lists with $each:\nALWAYS use $each for lists of similar items — never duplicate the same node structure.\nWrite the template once; $each renders it for each item.\n\nUse literal arrays for fixed/sample data:\n{\n  \"type\": \"$each\",\n  \"props\": {\n    \"items\": [\n      { \"title\": \"First Post\", \"text\": \"Hello world.\", \"author\": \"Alice\" },\n      { \"title\": \"Second Post\", \"text\": \"Another update.\", \"author\": \"Bob\" }\n    ],\n    \"as\": \"post\"\n  },\n  \"children\": [\n    {\n      \"type\": \"Column\",\n      \"props\": { \"bg\": \"neutral-0\", \"r\": \"400\", \"border\": \"1px solid neutral-200\", \"p\": \"400\", \"gap\": \"300\" },\n      \"children\": [\n        {\n          \"type\": \"Row\",\n          \"props\": { \"gap\": \"300\", \"ay\": \"center\" },\n          \"children\": [\n            { \"type\": \"we-avatar\", \"props\": { \"initials\": \"$post.author\", \"size\": \"sm\" } },\n            { \"type\": \"we-text\", \"props\": { \"variant\": \"label\" }, \"children\": [\"$post.author\"] }\n          ]\n        },\n        { \"type\": \"we-text\", \"props\": { \"variant\": \"heading-sm\" }, \"children\": [\"$post.title\"] },\n        { \"type\": \"we-text\", \"children\": [\"$post.text\"] }\n      ]\n    }\n  ]\n}\n\nUse $query or $store for dynamic data (more common in production):\n{ \"type\": \"$each\", \"props\": { \"items\": { \"$query\": { \"entity\": \"TextBlock\" } }, \"as\": \"post\" }, \"children\": [...] }\n{ \"type\": \"$each\", \"props\": { \"items\": { \"$store\": \"spaceStore.posts\" }, \"as\": \"post\" }, \"children\": [...] }\n\nPer-item customization inside $each:\nTo style or highlight specific items, add a data flag to those items and use $if on the flag inside the template. Do NOT use $eq: [\"$index\", N] comparisons — they are fragile, repetitive, and break when items are reordered.\nExample: add \"highlighted\": true to one item's data, then use $if on \"$post.highlighted\" in the template:\n{ \"type\": \"$if\", \"props\": { \"condition\": \"$post.highlighted\", \"then\": { \"type\": \"we-badge\", \"props\": { \"variant\": \"primary\" }, \"children\": [\"Featured\"] } } }\nFor conditional props (e.g. different bg on highlighted items):\n{ \"bg\": { \"$if\": { \"condition\": \"$post.highlighted\", \"then\": \"primary-50\", \"else\": \"neutral-0\" } } }\n\nBoolean toggle (show/hide, expand/collapse):\n{\n  \"type\": \"Column\",\n  \"$localState\": { \"showDetails\": { \"type\": \"boolean\", \"initial\": false } },\n  \"children\": [\n    { \"type\": \"we-button\", \"props\": { \"variant\": \"ghost\", \"onClick\": { \"$toggleLocal\": \"showDetails\" } }, \"children\": [\"Toggle Details\"] },\n    { \"type\": \"$if\", \"props\": { \"condition\": { \"$local\": \"showDetails\" }, \"then\": { \"type\": \"we-text\", \"children\": [\"Details content here\"] } } }\n  ]\n}\n\nSignal types (community-specific reactions/votes):\nSignal types are created per-community by the user. Never hardcode signal type UUIDs in schemas.\nInstead reference them by slug through spaceStore.signalTypesBySlug.\n\nALWAYS ask the user: \"What slug should I use? (e.g. 'like', 'upvote', 'star')\"\nThen use that slug in the pattern below.\n\nPattern — live wired SignalControl (inside a $each over a model with $query include):\n{\n  \"type\": \"$each\",\n  \"props\": {\n    \"items\": {\n      \"$query\": {\n        \"entity\": \"MyBlock\",\n        \"include\": {\n          \"$totalLikeCount\": {\n            \"from\": \"signals\",\n            \"where\": { \"signalTypeId\": { \"$store\": \"spaceStore.signalTypesBySlug.like.id\" } },\n            \"count\": true\n          },\n          \"$myLikeSignal\": {\n            \"from\": \"signals\",\n            \"where\": {\n              \"signalTypeId\": { \"$store\": \"spaceStore.signalTypesBySlug.like.id\" },\n              \"author\": \"$me.did\"\n            },\n            \"limit\": 1\n          }\n        }\n      }\n    },\n    \"as\": \"item\"\n  },\n  \"children\": [\n    {\n      \"type\": \"$if\",\n      \"props\": {\n        \"condition\": { \"$store\": \"spaceStore.signalTypesBySlug.like\" },\n        \"then\": {\n          \"type\": \"SignalControl\",\n          \"props\": {\n            \"signalType\": { \"$store\": \"spaceStore.signalTypesBySlug.like\" },\n            \"myValue\": \"$item.$myLikeSignal.value\",\n            \"aggregate\": \"$item.$totalLikeCount\",\n            \"onSignal\": {\n              \"$action\": \"spaceStore.upsertSignal\",\n              \"args\": [\"$item.id\", { \"$store\": \"spaceStore.signalTypesBySlug.like.id\" }, \"$arg\"]\n            }\n          }\n        }\n      }\n    }\n  ]\n}\n\nNotes:\n- The $if guard hides SignalControl if the community hasn't created a signal type with that slug.\n- Replace \"like\" with the user's slug throughout (in $store paths and args).\n- $query include adds $totalLikeCount and $myLikeSignal as computed properties on each item.\n- signalType prop accepts the full SignalType object (provides icon, mode, range to the UI component).\n\nPreview / mockup mode (static, no store wiring):\n{\n  \"type\": \"SignalControl\",\n  \"props\": {\n    \"preview\": true,\n    \"signalType\": { \"icon\": \"❤️\", \"mode\": \"toggle\", \"rangeMin\": 0, \"rangeMax\": 1 }\n  }\n}\nUse preview: true when sketching a layout without real data. Remove it (and add the full wiring above) when going live.\n\n---\n\n## Routing Structure\n\nDefine nested routes using the \"routes\" array at the root node of the schema.\nEach route object describes a path and the UI node to render when that path is active.\nRoutes can be nested to support sub-pages and layouts.\n\nRoute objects follow the same structure as schema nodes, with an additional \"path\" property.\n\n- The \"routes\" array MUST be placed on the ROOT template node (or on a route node for nested routing). The router only reads routes from these positions — placing routes on an arbitrary child node means the router will never find them and nothing will render.\n- Use \"path: '*'\" or \"path: '/*'\" for catch-all/not-found routes.\n- Use \":paramName\" for dynamic route parameters (e.g. \"/space/:spaceId\").\n- Use nested \"routes\" arrays for sub-pages and layouts.\n- Use { \"type\": \"$routes\" } in children to indicate where nested routes should render. The $routes outlet can be deeply nested — only the routes array placement matters.\n- EVERY { \"type\": \"$routes\" } outlet MUST have a \"routes\" array defined on the same node or an ancestor node. A $routes outlet without a routes array is invalid and will fail validation.\n- NEVER duplicate a route path — every route in the same \"routes\" array MUST have a unique path.\n- When using tabs, each tab's key and navigate path MUST have a matching route. Ensure a 1:1 correspondence between tabs and routes.\n\n### Tabs + Routing\n\nIMPORTANT: we-tabs only manages visual selection — clicking a tab does NOT navigate automatically.\nEach we-tab MUST have an onClick with { \"$action\": \"routeStore.navigate\" } to trigger route changes.\nBind we-tabs selectedKey to the matching route segment so the active tab stays in sync.\n(Alternatively, a single onChange on we-tabs can replace per-tab onClick — see onChange pattern below.)\n\nRecommended pattern — header above tabs (routes on ROOT, $routes outlet nested inside):\n{\n  \"type\": \"Column\",\n  \"routes\": [\n    { \"path\": \"/\", \"type\": \"we-text\", \"children\": [\"Select a tab\"] },\n    { \"path\": \"/posts\", \"type\": \"Column\", \"children\": [{ \"type\": \"we-text\", \"children\": [\"Posts content\"] }] },\n    { \"path\": \"/articles\", \"type\": \"Column\", \"children\": [{ \"type\": \"we-text\", \"children\": [\"Articles content\"] }] }\n  ],\n  \"children\": [\n    { \"type\": \"Row\", \"props\": { \"p\": \"300\", \"ax\": \"between\" }, \"children\": [\n      { \"type\": \"we-text\", \"props\": { \"variant\": \"heading-lg\" }, \"children\": [\"My App\"] }\n    ]},\n    {\n      \"type\": \"we-tabs\",\n      \"props\": { \"selectedKey\": { \"$store\": \"routeStore.segments.0\" } },\n      \"children\": [\n        { \"type\": \"we-tab\", \"props\": { \"key\": \"posts\", \"label\": \"Posts\", \"onClick\": { \"$action\": \"routeStore.navigate\", \"args\": [\"/posts\"] } } },\n        { \"type\": \"we-tab\", \"props\": { \"key\": \"articles\", \"label\": \"Articles\", \"onClick\": { \"$action\": \"routeStore.navigate\", \"args\": [\"/articles\"] } } }\n      ]\n    },\n    { \"type\": \"$routes\" }\n  ]\n}\nNote: \"routes\" is on the root Column, NOT on a child. The $routes outlet is a child — that's fine. Only the routes array placement matters.\n\nWRONG — two common mistakes that produce empty tabs (validator will catch both):\n{\n  // MISTAKE 1: routes defined on an inner child node, not the root.\n  // The router never inspects children for routes arrays — this routes array is invisible.\n  \"type\": \"Column\",\n  \"children\": [\n    { \"type\": \"we-tabs\", \"children\": [\"...tabs...\"] },\n    {\n      \"type\": \"Column\",\n      \"routes\": [                          // ← WRONG: router never reads this\n        { \"path\": \"/posts\", \"type\": \"Column\", \"children\": [\"...\"] }\n      ],\n      \"children\": [{ \"type\": \"$routes\" }]  // ← outlet here does nothing without a live routes array\n    }\n  ]\n}\n\n{\n  // MISTAKE 2: using { type: \"$routes\" } as a route entry's component type.\n  // $routes is an outlet slot marker — as a leaf route entry it has no children injected,\n  // so it returns null. Every tab navigates to a route that renders nothing.\n  \"type\": \"Column\",\n  \"routes\": [\n    { \"path\": \"/posts\", \"type\": \"$routes\" }  // ← WRONG: renders null, use a real component\n  ],\n  \"children\": [{ \"type\": \"$routes\" }]\n}\n\nAlternative: single onChange on we-tabs (fires with $event.detail.value = selected key):\n{ \"onChange\": { \"$action\": \"routeStore.navigate\", \"args\": [{ \"$concat\": [\"/\", \"$arg.detail.value\"] }] } }\nThis replaces all per-tab onClick handlers but requires $concat to build the path.\n\nNested routing example:\n{\n  \"routes\": [\n    { \"path\": \"*\", \"type\": \"Column\", \"props\": { \"ax\": \"center\", \"p\": \"500\" }, \"children\": [{ \"type\": \"we-text\", \"children\": [\"Page not found\"] }] },\n    { \"path\": \"/\", \"type\": \"Column\", \"props\": { \"ax\": \"center\", \"p\": \"500\" }, \"children\": [{ \"type\": \"we-text\", \"children\": [\"Home page\"] }] },\n    {\n      \"path\": \"/space/:spaceId\",\n      \"type\": \"Row\",\n      \"children\": [{ \"type\": \"$routes\" }],\n      \"routes\": [\n        { \"path\": \"/*\", \"type\": \"we-text\", \"children\": [\"Space page not found\"] },\n        { \"path\": \"/\", \"type\": \"we-text\", \"children\": [\"About sub-page\"] },\n        { \"path\": \"/posts\", \"type\": \"Column\", \"children\": [{ \"type\": \"$routes\" }],\n          \"routes\": [\n            { \"path\": \"/*\", \"type\": \"we-text\", \"children\": [\"Post not found\"] },\n            { \"path\": \"/\", \"type\": \"we-text\", \"children\": [\"No posts selected\"] },\n            { \"path\": \"/1\", \"type\": \"we-text\", \"children\": [\"Post 1 page\"] }\n          ]\n        }\n      ]\n    }\n  ]\n}\n\n---\n\n## Rules & Best Practices\n\n- Always use the correct prop names and value types for each component.\n- Never use null as a value in any children array. Only use valid schema nodes or strings.\n- Each item in a children array must be either a valid schema node object or a string.\n- Use design tokens for spacing, color, radius, etc. (do not use raw CSS except in styles).\n- Use the styles prop for custom inline CSS (e.g., { \"width\": \"100px\" }).\n- Use hoverProps for hover state overrides, activeProps for pressed state, focusProps for focus state. Supported on @we/primitives (we-text, we-button, etc.) and layout components (Column, Row).\n- Use dynamic logic tokens ($store, $if, $action, etc.) for reactivity and conditional behavior.\n- Nest components using children or slots as needed.\n- For routes, use the routes array with path and child nodes.\n- Do not invent new components or props — use only those listed in the component registry.\n- Do not set props to their default/inherited values — omit them. fontSize and fontWeight inherit from parents (~16px / normal), so only set them when you need a different value.\n- Omit empty `props` and `children` — both are optional. Do not write `props: {}` or `children: []`.\n- Do not use `as const` on schema node `type` fields — `SchemaNode.type` is `string`, so it is never needed.\n- For icon-only buttons, nest a `we-icon` child inside `we-button` rather than using a `text` prop with a Unicode character. **Omit the `size` prop on `we-icon` when nesting inside sized primitives** (`we-button`, `we-input`, `we-badge`, `we-textarea`) — these components auto-size nested icons via `--we-context-icon-size` (xs→12px, sm→16px, md→24px, lg→32px, xl→40px). Only set an explicit icon `size` if you need to override the automatic sizing. Example: `{ type: 'we-button', props: { variant: 'ghost', size: 'sm' }, children: [{ type: 'we-icon', props: { name: 'x' } }] }`.\n- NEVER pass a bare number like \"16\" as a size or dimension prop — it is not valid CSS. Always check the component's declared prop type: if it's a string union, use one of the listed values; if it accepts arbitrary strings, include a CSS unit (e.g. \"16px\", \"2rem\").\n- For interactive list items and selectable options, use `we-button` with variant switching (e.g., `secondary` when selected, `ghost` when not) instead of manually styling `Row` with cursor, bg, and onClick. Buttons provide hover, focus, and active states for free.\n- For card-like layouts, compose from `Column` with DS props (bg, r, border, p, gap). This gives full control over spacing and appearance.\n- When rendering lists of similar items (posts, cards, users, etc.), ALWAYS use `$each` with a single template child — never duplicate the same node structure multiple times. Use literal arrays in `items` for static data, or `$store`/`$query` for dynamic data.\n\n### Icon Names (Phosphor Icons)\n\nwe-icon uses **Phosphor Icons** (v2.1). Do NOT use Heroicons, Material, or FontAwesome names.\nPhosphor names are lowercase-kebab-case. The `weight` prop controls style: \"regular\" (default), \"bold\", \"fill\", \"light\", \"thin\", \"duotone\".\n\nCommon Phosphor icon names (use these, NOT Heroicons equivalents):\n- Navigation: house, arrow-left, arrow-right, caret-left, caret-right, caret-down, caret-up, arrows-clockwise\n- Actions: plus, minus, x, check, pencil-simple, trash, copy, download, upload, share, link, magnifying-glass, funnel, sliders-horizontal\n- Communication: chat-circle, chat-dots, envelope-simple, paper-plane-tilt, bell, megaphone\n- Social: heart, thumbs-up, thumbs-down, star, share-network, users, user, user-plus\n- Media: image, camera, play, pause, stop, microphone, speaker-high, video-camera\n- Files: file, file-text, folder, folder-open, clipboard-text, note\n- UI: list, squares-four, gear, dots-three, dots-three-vertical, warning, info, question, check-circle, x-circle, eye, eye-slash\n- Misc: lightning, rocket, globe, map-pin, calendar, clock, tag, bookmark, flag, lock, shield-check\n\nWRONG icon names (Heroicons/Material — do NOT use):\n- \"chat-bubble-left\" → use \"chat-circle\"\n- \"chevron-right\" → use \"caret-right\"\n- \"cog\" / \"settings\" → use \"gear\"\n- \"trash-can\" → use \"trash\"\n- \"magnifying-glass-circle\" → use \"magnifying-glass\"\n- \"home\" → use \"house\"\n- \"favorite\" → use \"heart\"\n- \"delete\" → use \"trash\"\n- \"search\" → use \"magnifying-glass\"\n- \"close\" → use \"x\"\n- \"menu\" → use \"list\"\n- All schemas must be valid JSON with property names and string values in double quotes.\n- The meta property at the root is required: { \"meta\": { \"name\": \"...\", \"description\": \"...\", \"icon\": \"...\" } }\n- Always set `bg: 'neutral-50'` on root-level schema nodes (templates, pages). This ensures proper background in all themes — without it, dark mode renders white backgrounds.\n\nMost @we/primitives inherit all Design System Props documented above (layout, visual, flex, typography, state).\nSome layout-only primitives (we-avatar, we-icon, we-image, we-spinner, etc.) only accept Layout props — see the Design System Props section for the full list.\n\nNative HTML elements (lowercase tags render directly without registry entries):\n- Layout: div, section, article, aside, main, nav, header, footer\n- Text: p, span, h1-h6, pre, code, blockquote\n- Lists: ul, ol, li\n- Forms: form, input, button, label, select, textarea\n- Media: img, video, audio, canvas, figure, figcaption\n- Other: a, table, tr, td, th, details, summary, dialog\n\n## Schema Validation\n\nRun `we-validate-schemas` (or `node packages/schema-system/shared/dist/cli/we-validate-schemas.js`) from the monorepo root to validate all `.schema.ts` files.\nFor a specific file: `we-validate-schemas packages/app-framework/src/shared/schemas/MyTemplate.schema.ts`\n\nAfter creating or modifying a `.schema.ts` file, always run validation to catch:\n- Unknown component types (typos, missing registry entries)\n- Invalid or misspelled props (with \"did you mean?\" suggestions)\n- Prop type mismatches (e.g., number where string expected)\n- Missing required `meta` field on root TemplateSchema nodes\n- `$routes` outlet without a `routes` array on an ancestor\n- Orphan `$local` / `$setLocal` references without a `$localState` ancestor\n- DS layer consistency (mixing props from layers the component doesn't support)";
+export const schemaContext = "## Schema Structure\n\nA schema is a tree of nodes. Each node can have:\n- type: The component to render (string, e.g. \"we-button\", \"Column\")\n- props: An object of props for the component\n- children: An array of child nodes (or strings for text), or token objects like { $store: '...' } or { $concat: [...] }.\n- slots: Named slots for advanced composition (optional)\n- slot: The name of the slot this node should be rendered into (optional)\n- routes: For routing components, an array of nestable route objects (optional)\n- styles: Raw CSS escape hatch — Record<string, string | number> applied as inline styles on a **wrapper div** that surrounds the component. Use only for CSS that must live on a wrapper: filter, clip-path, backdrop-filter, mix-blend-mode. When present the wrapper participates in layout (no display:contents), so CSS effects apply correctly. **Important:** this is NOT the same as props.styles. If you want to apply custom CSS to a Column, Row, or Grid's own element (e.g. a background image), put it in props.styles instead — node-level styles go on a wrapper div around the component and will be hidden behind the component's own background.\n\nExample node:\n{\n  \"type\": \"we-button\",\n  \"props\": {\n    \"onClick\": { \"$action\": \"routeStore.navigate\", \"args\": [\"/home\"] }\n  },\n  \"children\": [\n    { \"type\": \"we-icon\", \"props\": { \"name\": \"house\" } },\n    { \"type\": \"we-text\", \"props\": { \"size\": \"600\" }, \"children\": [\"Home\"] }\n  ]\n}\n\n## Prop-level Dynamic Logic & Expressions\n\nSpecial tokens in props enable dynamic, reactive, or computed behavior.\n\nStore reference:\n{ \"$store\": \"storeName.property.path\" }\nResolves a value from a named store, supporting nested paths.\n\nAction/event:\n{ \"$action\": \"storeName.method\", \"args\": [...] }\nCalls a method on a store, optionally with arguments (which can themselves be tokens).\nSupports async lifecycle callbacks — fired after the store method's Promise resolves/rejects:\n  onSuccess: [...actions]  — fired on resolve; '$result' (and '$result.<path>') in args refers to the resolved value\n  onError: [...actions]    — fired on reject; '$result.message' etc. refers to the error object\n  onFinally: [...actions]  — fired regardless of outcome\nNon-promise (synchronous) methods are unaffected — lifecycle keys are ignored.\nExample — close modal after async submission:\n{ \"$action\": \"adamStore.createSpace\", \"args\": [...], \"onSuccess\": [{ \"$setLocal\": \"modalOpen\", \"value\": false }] }\nExample — navigate to newly created item:\n{ \"$action\": \"adamStore.createSpace\", \"args\": [...], \"onSuccess\": [{ \"$setLocal\": \"modalOpen\", \"value\": false }, { \"$action\": \"routeStore.navigate\", \"args\": [{ \"$concat\": [\"/space/\", \"$result.uuid\"] }] }] }\n\nModel mutations via $action (use these for creating/updating/deleting model instances):\nmodel.create — creates a model instance in the current perspective (default) or a specified one:\n{ \"$action\": \"model.create\", \"args\": [\"ModelName\", { \"field\": \"value\" }, { \"perspective\": \"adamStore.rootPerspective\" }] }\nThe third argument is an options object. Omit it to use the current space perspective.\n\nmodel.update — updates a model instance:\n{ \"$action\": \"model.update\", \"args\": [\"ModelName\", \"$item.id\", { \"field\": \"newValue\" }] }\nTo target a non-current perspective: { \"$action\": \"model.update\", \"args\": [\"ModelName\", \"$item.id\", { \"field\": \"value\" }, { \"perspective\": \"adamStore.rootPerspective\" }] }\n\nmodel.delete — deletes a model instance:\n{ \"$action\": \"model.delete\", \"args\": [\"ModelName\", \"$item.id\"] }\n\nUse perspective: 'adamStore.rootPerspective' for we-root models (AgentSettings, ChatSession, etc.).\nUse the default (no perspective) for space-scoped models (Space, Signal, etc.).\n\nConditional logic:\n{ \"$if\": { \"condition\": ..., \"then\": ..., \"else\": ... } }\nEvaluates condition; if truthy, returns then, else returns else.\n\nMap/iterate:\n{ \"$map\": { \"items\": { \"$store\": \"templateStore.templates\" }, \"select\": { ... } } }\nIterates over an array, mapping each item to a new object using the select mapping.\n\nPick:\n{ \"$pick\": { \"from\": { \"$store\": \"userStore.profile\" }, \"props\": [\"name\", \"email\"] } }\nPicks specific properties from an object.\n\nConcat (string building):\n{ \"$concat\": [\"part1\", \"$context.value\", \"part2\"] }\nJoins multiple parts into a single string.\n\nContext references:\nStrings starting with \"$\" followed by a context key resolve to context values.\nExample: \"$space.name\" resolves to the name property of the space context variable.\nDot paths supported: \"$item.profile.avatar\".\n\nEquality / inequality checks:\n{ \"$eq\": [a, b] } — strict equality\n{ \"$ne\": [a, b] } — strict inequality\n\nNumeric comparisons:\n{ \"$lt\": [a, b] } — a < b (less than)\n{ \"$gt\": [a, b] } — a > b (greater than)\nExample: { \"$gt\": [{ \"$count\": { \"items\": { \"$store\": \"listStore.items\" } } }, 0] }\n\nSet membership:\n{ \"$in\": [value, array] } — true if array contains value (false if second operand is not an array)\nExample: { \"$in\": [{ \"$store\": \"spaceStore.uuid\" }, { \"$store\": \"adamStore.systemPerspectiveUuids\" }] }\nExample: { \"$in\": [\"$item.role\", [\"admin\", \"moderator\"]] }\n\nBoolean logic:\n{ \"$and\": [a, b, ...] } — all truthy\n{ \"$or\": [a, b, ...] } — any truthy\n{ \"$not\": a } — negation\n\nArray operators:\n{ \"$filter\": { \"items\": <array>, \"where\": { \"field\": \"value\", ... } } }\nFilters an array to items where all where conditions match. Mirrors the $query where operator set:\n\n  { \"field\": \"value\" }                                   — strict equality\n  { \"field\": { \"not\": \"value\" } }                        — inequality; array form excludes multiple values\n  { \"field\": { \"contains\": \"text\" } }                    — case-insensitive substring match (strings only)\n  { \"field\": { \"exists\": true } }                        — non-null / non-undefined presence check\n  { \"field\": { \"exists\": false } }                       — null or undefined check\n\nWhere values (including those inside operator objects) are resolved through the prop system,\nso $store, $local, and context refs like { \"$local\": \"searchText\" } all work.\n\n$query-only logical combinators (OR / AND / NOT) — NOT supported in $filter, only in $query's where:\n  { \"OR\": [ { \"field\": \"value\" }, { \"field2\": \"value2\" } ] }   — matches if ANY branch matches\n  { \"AND\": [ { ... }, { ... } ] }                              — matches if ALL branches match (sibling keys at the\n                                                                  same level are already implicitly ANDed — use AND\n                                                                  to group a set of conditions alongside an OR/NOT)\n  { \"NOT\": { \"field\": \"value\" } }                              — matches if the branch does NOT match\nBranches are full where-clause objects (can contain multiple fields, and can nest OR/AND/NOT inside each other).\nSibling keys alongside OR/AND/NOT at the same level are implicitly ANDed with it.\nExample — case-insensitive search across two fields:\n{\n  \"$query\": {\n    \"entity\": \"Space\",\n    \"where\": {\n      \"OR\": [\n        { \"name\": { \"contains\": { \"$local\": \"searchText\" } } },\n        { \"description\": { \"contains\": { \"$local\": \"searchText\" } } }\n      ]\n    }\n  }\n}\nNote: using OR/AND/NOT disables the SPARQL-level sort/pagination pushdown (see count-projection and\nrelation-property ordering below) — those orderings silently stop working if combined with OR/AND/NOT in the\nsame query's where clause, because the fallback sort runs before the projection/relation data is attached.\n\nExamples:\n{ \"$filter\": { \"items\": { \"$store\": \"spaceStore.members\" }, \"where\": { \"role\": \"admin\" } } }\n{ \"$filter\": { \"items\": { \"$store\": \"spaceStore.members\" }, \"where\": { \"location\": { \"exists\": true }, \"handle\": { \"contains\": { \"$local\": \"searchText\" } } } } }\n\n{ \"$count\": { \"items\": <array> } }\nReturns the length of an array.\nExample: { \"badge\": { \"$count\": { \"items\": { \"$store\": \"notificationStore.unread\" } } } }\n\n{ \"$find\": { \"items\": <array>, \"where\"?: { ... }, \"select\"?: \"fieldName\" } }\nFinds the first matching item. where is optional (returns first item if omitted). select plucks a single field.\nExample: { \"$find\": { \"items\": { \"$store\": \"spaceStore.members\" }, \"where\": { \"id\": \"$item.creatorId\" }, \"select\": \"name\" } }\n\n{ \"$plural\": { \"count\": <number>, \"one\": \"singular\", \"other\": \"plural\" } }\nReturns \"one\" when count === 1, otherwise \"other\". Use in children arrays for count-noun labels.\ncount is resolved through the prop system — any numeric expression ($count, $store, context ref) works.\nExample: { \"$plural\": { \"count\": { \"$count\": { \"items\": { \"$store\": \"spaceStore.members\" } } }, \"one\": \"Member\", \"other\": \"Members\" } }\nCompose with we-number for a full \"N Members\" display:\n  we-number (value: { \"$count\": ... }, shorten: true) + we-text (children: [{ \"$plural\": { \"count\": { \"$count\": ... }, \"one\": \"Member\", \"other\": \"Members\" } }])\n\nQuery (data retrieval):\n{ \"$query\": { \"entity\": \"ModelName\", \"where\": { \"field\": \"value\" }, \"limit\": 10, \"order\": { \"field\": \"asc\" } } }\nQueries the current dataset for entity instances. Always returns an array.\nOptions: entity (required), where, order, limit, offset, include, scope, dataset, subscribe.\nsubscribe defaults to true — reactive live updates. Set subscribe: false to do a one-time fetch.\nBy default $query targets the current dataset ($currentDataset). Use dataset to query a different dataset —\nrequired when reading entities from an external app (e.g. Flux) that is open as a WE space:\n{ \"$query\": { \"entity\": \"Channel\", \"dataset\": \"$currentDataset\" } }\n\nBackend-neutral identity & dataset refs — prefer these over adamStore.* store paths inside $query and conditions:\n- $currentDataset — the currently active dataset (an AD4M perspective, in the AD4M backend). Use as a dataset value.\n- $me — the current agent's identity object. Use $me.did for their DID (ownership checks, author filters, e.g. { \"$eq\": [\"$post.author\", \"$me.did\"] }); $me.handle / $me.avatar for profile fields once loaded.\n\nEager-loading relations with include (most common relational pattern):\ninclude hydrates related model instances in the same query — no extra fetches needed.\nRelation names come from the HasMany relations listed for each model in externalModels.\n\nSimple include — hydrate all related instances:\n{ \"$query\": { \"entity\": \"Channel\", \"include\": { \"conversations\": true } } }\nEach item in the result will have a conversations array of hydrated Conversation objects.\n\nSub-query include — filter, sort, or limit the related records:\n{ \"$query\": { \"entity\": \"Channel\", \"include\": { \"conversations\": { \"order\": { \"createdAt\": \"desc\" }, \"limit\": 10 } } } }\n\nNested include — hydrate relations of relations:\n{ \"$query\": { \"entity\": \"Channel\", \"include\": { \"conversations\": { \"include\": { \"messages\": true } } } } }\nNesting can go as deep as needed. Each level adds one batched fetch (not N+1).\n\nCount projection — add a derived numeric field:\n{ \"$query\": { \"entity\": \"Post\", \"include\": { \"$likeCount\": { \"from\": \"likes\", \"count\": true } } } }\nThe $-prefixed key becomes a new field on each result item (e.g. item.$likeCount = 42).\n\nSorting by a count projection — order can reference a $-prefixed count key directly, sorting by the aggregate:\n{\n  \"$query\": {\n    \"entity\": \"Post\",\n    \"limit\": 20,\n    \"order\": { \"$likeCount\": \"desc\" },\n    \"include\": { \"$likeCount\": { \"from\": \"likes\", \"count\": true } }\n  }\n}\nRequirements: only a single order key is supported when it targets a projection (mixing it with a second sort key falls back\nto a plain property sort), and the query must also specify limit or offset — without one the count isn't computed yet at\nsort time and the order silently has no effect. Always pair count-projection ordering with a limit.\nCombine with $if for a user-togglable sort field (e.g. \"newest\" vs \"most liked\"):\n{\n  \"order\": {\n    \"$if\": {\n      \"condition\": { \"$eq\": [{ \"$local\": \"sortField\" }, \"likes\"] },\n      \"then\": { \"$likeCount\": { \"$local\": \"sortDirection\" } },\n      \"else\": { \"createdAt\": { \"$local\": \"sortDirection\" } }\n    }\n  }\n}\n\nSorting by a related model property — order can reference a dotted \"relation.property\" path for a HasOne/HasMany\nrelation declared on the model, sorting by a scalar property on the related instance:\n{\n  \"$query\": {\n    \"entity\": \"Space\",\n    \"limit\": 20,\n    \"order\": { \"location.country\": \"asc\" },\n    \"include\": { \"location\": true }\n  }\n}\nSame requirements as count-projection ordering above: only a single order key, and pair with limit/offset — without\none the relation data isn't attached yet at sort time and the order silently has no effect. include isn't required\nfor the sort itself (the relation is resolved from the model's declared shape), but you'll usually want it anyway to\nread the field in the UI (e.g. \"$space.location.country\").\nCombine with $if the same way as count-projection ordering to let the user toggle between sort fields.\n\nSingle-item projection — add a derived field that resolves to one instance or null:\n{ \"$query\": { \"entity\": \"Post\", \"include\": { \"$myLike\": { \"from\": \"likes\", \"where\": { \"author\": \"$me.did\" }, \"limit\": 1 } } } }\nWith limit: 1 the field unwraps to T | null instead of an array.\n\ninclude only works with typed relations — ones where the target model class is known.\nFor WE models this is always the case. For external models, check the externalModels listing:\nrelations marked \"→ ModelName\" are typed (safe for include); relations marked \"parent query only\"\nare untyped and will crash at runtime if used with include — use a scope drill-down instead.\n\nRelational queries — fetch a parent record's children (drill-down navigation):\n{ \"$query\": { \"entity\": \"Conversation\", \"scope\": { \"anchor\": \"Channel\", \"via\": \"conversations\", \"anchorId\": \"$channel.id\" } } }\nscope.anchor is the parent entity type; scope.via is its relation whose targets are this query's entity (the\nHasMany relation listed for that entity in externalModels); scope.anchorId is the parent record's id (typically\nfrom a $each context variable or a route segment). The adapter resolves the relation to a backend handle —\nno protocol details live in the template.\nUse this pattern when navigating to a detail route and loading only that record's children.\nFor external-app datasets, always add dataset: \"$currentDataset\".\n\nLocal state (scoped ephemeral state):\nDeclare on any node: \"$localState\": { \"name\": { \"type\": \"string\", \"initial\": \"\" } }\nSupported types: \"string\", \"boolean\", \"number\", \"function\", \"object\".\nRead:  { \"$local\": \"name\" } — returns the signal value (reactive).\n       { \"$local\": \"name.nested.path\" } — dot-notation reads into object-typed fields (reactive).\nWrite: { \"$setLocal\": \"name\", \"from\": \"$event.target.value\" } — event handler that updates the signal.\n       { \"$setLocal\": \"name\", \"value\": \"literal\" } — sets to a literal value (string, number, boolean, null, object).\n       { \"$setLocal\": \"name\", \"merge\": { \"field\": \"$event.detail\" } } — shallow-merges fields into an object-typed signal. Values are resolved as event paths (e.g. \"$event.detail\") or passed as literals. Use for partial updates to object state.\nToggle: { \"$toggleLocal\": \"fieldName\" } — toggles a boolean field (equivalent to setting it to !current). Use for show/hide, open/close, expand/collapse patterns.\nCall function: { \"$callLocal\": \"fieldName\" } — event handler that calls the function stored in a function-typed local field.\n  Used when a child component needs to trigger a callback passed in via $localState.\n  The field must be declared as type: 'function' and set via $setLocal.\n  Example: { \"onClick\": { \"$callLocal\": \"onConfirm\" } }\nState is created on mount and destroyed on unmount. Nested $localState declarations merge, inner fields shadow outer.\n$local values can be used in $action args: { \"$action\": \"store.method\", \"args\": [{ \"$local\": \"name\" }] }\n\nObject-typed local state (consolidating related scalar fields):\nWhen several related fields share a common condition on their initial values (e.g. all null/empty when a store value is absent), prefer a single \"object\" field seeded from the store, then read sub-fields with dot-notation and write with merge.\nExample — location object (replaces 5 separate scalar fields with $if guards):\n  \"$localState\": { \"location\": { \"type\": \"object\", \"initial\": { \"$store\": \"spaceStore.currentSpace.location\" } } }\n  Read:  { \"$local\": \"location.latitude\" }, { \"$local\": \"location.city\" }\n  Write (picker confirm): { \"$setLocal\": \"location\", \"from\": \"$event.detail\" }\n  Write (partial edit):   { \"$setLocal\": \"location\", \"merge\": { \"city\": \"$event.detail\" } }\n  Write (clear):          { \"$setLocal\": \"location\", \"value\": null }\n  Condition (has location): { \"$local\": \"location\" }\nUse \"object\" whenever you would otherwise write 3+ related scalar fields each needing $if on their initial value.\n\nHoisted query state ($queries):\nDeclare on any node to run reactive subscriptions at the node root and expose results in $local.\nSolves two problems: avoids N duplicate subscriptions inside $each loops, and makes query results available for $if conditions.\n\"$queries\": { \"signalTypes\": { \"entity\": \"SignalType\", \"subscribe\": true } }\nResults are injected into $local as read-only reactive arrays, accessible via { \"$local\": \"signalTypes\" }.\nQuery options are identical to $each's $query prop (entity, where, order, limit, include, dataset, subscribe).\n$queries and $localState share the same $local namespace — avoid duplicate names across both.\n$setLocal will warn and no-op on $queries entries (they are read-only).\nUse with $count + $gt for conditional visibility:\n{ \"condition\": { \"$gt\": [{ \"$count\": { \"items\": { \"$local\": \"signalTypes\" } } }, 0] } }\nExample:\n{\n  \"$queries\": { \"signalTypes\": { \"entity\": \"SignalType\", \"subscribe\": true } },\n  \"type\": \"Column\",\n  \"children\": [\n    {\n      \"type\": \"$each\",\n      \"props\": { \"items\": { \"$local\": \"signalTypes\" }, \"as\": \"sig\" },\n      \"children\": [...]\n    }\n  ]\n}\n\nBoolean toggle pattern (show/hide comments, expand/collapse sections, etc.):\n{\n  \"$localState\": { \"showComments\": { \"type\": \"boolean\", \"initial\": false } },\n  \"children\": [\n    {\n      \"type\": \"we-button\",\n      \"props\": {\n        \"variant\": \"ghost\",\n        \"onClick\": { \"$toggleLocal\": \"showComments\" }\n      },\n      \"children\": [{ \"type\": \"we-icon\", \"props\": { \"name\": \"chat-circle\" } }]\n    },\n    {\n      \"type\": \"$if\",\n      \"props\": {\n        \"condition\": { \"$local\": \"showComments\" },\n        \"then\": { \"type\": \"Column\", \"children\": [{ \"type\": \"we-text\", \"children\": [\"Comments visible\"] }] }\n      }\n    }\n  ]\n}\n\nForm validation (extends $localState):\nDeclare validation rules on fields:\n\"$localState\": {\n  \"email\": {\n    \"type\": \"string\",\n    \"initial\": \"\",\n    \"validate\": [\n      { \"rule\": \"required\", \"message\": \"Email is required\" },\n      { \"rule\": \"pattern\", \"value\": \"^[^@]+@[^@]+$\", \"message\": \"Invalid email\" }\n    ]\n  }\n}\n\nBuilt-in rules: required, minLength (value: N), maxLength (value: N), min (value: N), max (value: N), pattern (value: regex string), match (field: otherFieldName). All accept optional \"message\" override.\n\nRead tokens:\n{ \"$error\": \"fieldName\" } — first validation error message (only shown after field is touched), or \"\".\n{ \"$valid\": \"fieldName\" } — true if all rules pass (regardless of touched state).\n{ \"$touched\": \"fieldName\" } — true after the field has been blurred/touched.\n{ \"$formValid\": \"$scope\" } — true if ALL validated fields in the current $localState scope pass.\n\nAction tokens:\n{ \"$touch\": \"fieldName\" } — marks a single field as touched (use in onBlur).\n{ \"$touch\": \"$all\" } — marks all fields in scope as touched (use before submit guard).\n{ \"$resetLocal\": \"$scope\" } — resets all fields to initial values and clears touched state.\n\nHandler arrays (compose multiple actions on one event):\n{ \"onClick\": [{ \"$touch\": \"$all\" }, { \"$if\": { \"condition\": { \"$formValid\": \"$scope\" }, \"then\": { \"$action\": \"store.submit\", \"onSuccess\": [{ \"$setLocal\": \"modalOpen\", \"value\": false }] } } }] }\nArray entries execute sequentially. Non-function entries (e.g. $if with false condition) are skipped.\nPrefer onSuccess over a bare $setLocal before the $action — the bare form closes the modal immediately (losing the loading spinner); onSuccess waits for the Promise to resolve.\n\nTypical form pattern:\n{\n  \"$localState\": { \"name\": { \"type\": \"string\", \"initial\": \"\", \"validate\": [{ \"rule\": \"required\" }] } },\n  \"children\": [\n    {\n      \"type\": \"we-form-field\",\n      \"props\": { \"label\": \"Name\", \"error\": { \"$error\": \"name\" } },\n      \"children\": [{\n        \"type\": \"we-input\",\n        \"props\": {\n          \"value\": { \"$local\": \"name\" },\n          \"onInput\": { \"$setLocal\": \"name\", \"from\": \"$event.detail\" },\n          \"onBlur\": { \"$touch\": \"name\" }\n        }\n      }]\n    },\n    {\n      \"type\": \"we-button\",\n      \"props\": {\n        \"disabled\": { \"$not\": { \"$formValid\": \"$scope\" } },\n        \"onClick\": [\n          { \"$touch\": \"$all\" },\n          { \"$if\": { \"condition\": { \"$formValid\": \"$scope\" }, \"then\": { \"$action\": \"store.save\", \"args\": [{ \"$local\": \"name\" }], \"onSuccess\": [{ \"$setLocal\": \"submitDone\", \"value\": true }] } } }\n        ]\n      },\n      \"children\": [\"Submit\"]\n    }\n  ]\n}\n\n## Block-level Dynamic Structures\n\nBlock-level structures use \"type\" starting with \"$\" for dynamic rendering of schema nodes.\n\nEach loop:\n{ \"type\": \"$each\", \"props\": { \"items\": { \"$store\": \"storeName.arrayProperty\" }, \"as\": \"itemName\" }, \"children\": [ ... ] }\nRenders children once for each item. The \"as\" name becomes a context key. Defaults to \"item\" — omit \"as\" unless you need a different name.\n\nConditional rendering:\n{ \"type\": \"$if\", \"props\": { \"condition\": ..., \"then\": { ... }, \"else\": { ... } } }\nRenders \"then\" node if condition is truthy, else renders \"else\" node.\nSupports enterTransition / exitTransition for CSS animations when the node mounts/unmounts.\nTransitionConfig = TransitionEffect | TransitionEffect[]\nTransitionEffect = { type: 'fade'|'slide'|'scale'|'pulse', duration?: ms, easing?: string, delay?: ms, direction?: 'left'|'right'|'up'|'down', distance?: string }\nfade controls opacity only; slide/scale control transform only. pulse is a persistent looping animation (not a one-shot transition) — starts once entered, stops on exit; direction/distance don't apply (default duration 1200ms, easing 'ease-in-out'). Compose fade/slide/scale together in an array; pulse is typically used alone.\nExample: enterTransition: [{ type: 'fade', duration: 300 }, { type: 'slide', direction: 'up', distance: '40px', duration: 400 }]\nExample (pulse): enterTransition: { type: 'pulse', duration: 1500 }\n\nViewport / mount animation (child always in DOM):\n{ \"type\": \"$animate\", \"props\": { \"scrollReveal\"?: true | number, \"scrollLeave\"?: true | number, \"scrollPast\"?: string, \"enterTransition\"?: TransitionConfig, \"exitTransition\"?: TransitionConfig }, \"children\": [<node>] }\nThe child is always mounted. fade/slide/scale are CSS transitions (opacity/transform); pulse is a real CSS @keyframes loop — use this for scroll-reveal effects.\nDo NOT use $animate when the child should be absent from the DOM. Use $if for conditional DOM presence.\nscrollReveal: true fires enterTransition when the element enters the viewport.\nscrollReveal: -100 fires 100px before the element would enter (negative = earlier reveal).\nscrollLeave fires exitTransition when the element leaves the viewport.\nscrollPast: \"element-id\" observes a sentinel element (by DOM id) instead of the $animate element itself.\n  enterTransition fires when the sentinel leaves the viewport (user scrolled past it).\n  exitTransition fires when the sentinel returns (user scrolled back up).\n  Use this for sticky headers: place a zero-height sentinel div at the bottom of the non-sticky header section,\n  then wrap the mini-profile in $animate with scrollPast pointing to that sentinel's id.\n  scrollPast is mutually exclusive with scrollReveal/scrollLeave.\nWithout any scroll trigger, the enterTransition runs once on mount.\nOnly one child node is supported.\nExample (scroll-reveal):\n{\n  \"type\": \"$animate\",\n  \"props\": {\n    \"scrollReveal\": -100,\n    \"enterTransition\": [\n      { \"type\": \"fade\", \"duration\": 600, \"easing\": \"ease-in-out\" },\n      { \"type\": \"slide\", \"direction\": \"left\", \"distance\": \"200px\", \"duration\": 1000, \"easing\": \"ease-in-out\" }\n    ]\n  },\n  \"children\": [{ \"type\": \"SomeCard\", \"children\": [] }]\n}\nExample (sticky header mini-profile):\nPlace a sentinel at the bottom of the header, reference it in the sticky nav:\n{ \"type\": \"div\", \"props\": { \"id\": \"header-sentinel\" }, \"styles\": { \"height\": \"0px\", \"pointerEvents\": \"none\" } }\n{\n  \"type\": \"$animate\",\n  \"props\": {\n    \"scrollPast\": \"header-sentinel\",\n    \"enterTransition\": { \"type\": \"fade\", \"duration\": 250 },\n    \"exitTransition\": { \"type\": \"fade\", \"duration\": 200 }\n  },\n  \"children\": [{ \"type\": \"Row\", \"props\": { \"ay\": \"center\", \"gap\": \"300\" }, \"children\": [\n    { \"type\": \"we-avatar\", \"props\": { \"image\": \"$space.avatar\", \"size\": \"sm\" } },\n    { \"type\": \"we-text\", \"props\": { \"fontWeight\": \"600\" }, \"children\": [\"$space.name\"] }\n  ]}]\n}\n\nSingle model item (load one record, render children with it in context):\n{\n  \"type\": \"$single\",\n  \"props\": {\n    \"item\": { \"$query\": { \"entity\": \"ModelName\", \"params\": { ... }, \"subscribe\": true } },\n    \"as\": \"profile\"   // context key for children — default: 'item'\n  },\n  \"children\": [{ \"type\": \"we-text\", \"children\": [\"$profile.username\"] }]\n}\nRenders nothing until a matching record is found. Like $each but for a single result.\nquery options (entity, params, include, dataset, subscribe) work identically to $query.\n\nRoute outlet:\n{ \"type\": \"$routes\" }\nIndicates where nested routes should render within a layout.\n\n---\n\n## Component Registry\n\nMost @we/primitives also accept Design System Props (see next section for details and exceptions).\n\n@we/primitives:\n- we-alert (DesignSystemElement)\n  Props: variant: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' = 'primary', dismissible: boolean = false\n- we-audio (LayoutVisualElement)\n  Props: src: string = '', controls: boolean = false, preload: 'none' | 'metadata' | 'auto' = 'metadata', autoplay: boolean = false, loop: boolean = false, muted: boolean = false\n- we-avatar (LayoutVisualElement)\n  Props: image: string = '', hash: string = '', selected: boolean = false, online: boolean = false, initials: string = '', icon: string = '', size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | '{css-length}' | undefined, clickable: boolean = false\n- we-badge (DesignSystemElement)\n  Props: variant: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' = 'neutral', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-blockquote (DesignSystemElement)\n- we-button (DesignSystemElement)\n  Props: variant: 'primary' | 'secondary' | 'ghost' | 'danger' | 'outline' = 'primary', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md', text?: string | undefined, href?: string | undefined, disabled: boolean = false, loading: boolean = false, gradient: boolean = false, square: boolean = false\n- we-checkbox (DesignSystemElement)\n  Props: checked: boolean = false, disabled: boolean = false, name: string = '', value: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-code (DesignSystemElement)\n  Props: block: boolean = false\n- we-color-picker (DesignSystemElement)\n  Props: value: string = '#000000', disabled: boolean = false, name: string = '', palette: array = [ '#000000', '#434343', '#666666', '#999999', '#b7b7b7', '#cccccc', '#d9d9d9', '#ffffff', '#980000', '#ff0000', '#ff9900', '#ffff00', '#00ff00', '#00ffff', '#4a86e8', '#0000ff', '#9900ff', '#ff00ff', '#e6b8af', '#f4cccc', '#fce5cd', '#fff2cc', '#d9ead3', '#d0e0e3', '#c9daf8', '#cfe2f3', '#d9d2e9', '#ead1dc', ]\n- we-date-picker (DesignSystemElement)\n  Props: value: string = '', placeholder: string = 'Select date', disabled: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-divider (LayoutElement)\n  Props: orientation: 'horizontal' | 'vertical' = 'horizontal', variant: 'solid' | 'dashed' | 'dotted' = 'solid', color?: string | undefined, thickness?: string | undefined\n- we-drawer (OverlayElement)\n  Props: hideclosebutton: boolean = false, close: () => void\n- we-file-upload (DesignSystemElement)\n  Props: accept: string = '', multiple: boolean = false, disabled: boolean = false, name: string = ''\n- we-form-field (DesignSystemElement)\n  Props: label: string = '', description: string = '', error: string = '', required: boolean = false, size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-html (DesignSystemElement) — Renders a raw HTML string safely via DOMPurify sanitization.\n\nUse this instead of `we-text` when content is stored as HTML (e.g. rich-text\neditor output such as Flux messages). The `content` prop accepts any HTML\nfragment; it is sanitized before rendering so XSS payloads are stripped.\n  Props: content: string = ''\n- we-icon (LayoutElement)\n  Props: name: string = '', color: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '{css-length}' = '', weight: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone' = 'regular', gradient: string = ''\n- we-icon-picker (DesignSystemElement)\n  Props: value: string = '', disabled: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md', placeholder: string = 'Pick icon'\n- we-iframe (LayoutVisualElement)\n  Props: src: string = '', title: string = 'Embedded content', allow: string = '', sandbox?: string | undefined\n- we-image (LayoutVisualElement)\n  Props: src: string | File = '', alt: string = '', fit: '' | 'cover' | 'contain' | 'fill' | 'none' | 'scale-down' = '', loading: 'eager' | 'lazy' = 'eager', gradient: string = '', objectPosition: string = ''\n- we-input (DesignSystemElement)\n  Props: value: string = '', max: string = '', min: string = '', maxlength: unknown = Infinity, minlength: number = 0, pattern: string = '', name: string = '', step: string = '', placeholder: string = '', autocomplete: string = '', autofocus: boolean = false, disabled: boolean = false, required: boolean = false, readonly: boolean = false, type: string = 'text', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-link (DesignSystemElement)\n  Props: href: string = '', target: string = '', rel: string = '', download: string = '', disabled: boolean = false\n- we-location-picker (DesignSystemElement)\n  Props: latitude?: number | undefined, longitude?: number | undefined, placeholder: string = 'Set location…', disabled: boolean = false, reverseGeocode: boolean = true\n- we-markdown (DesignSystemElement)\n  Props: content: string = '', markdownGap: string = ''\n- we-menu (DesignSystemElement) — Vertical list container for menu items inside a popover.\nNot a standalone selector — wrap in we-popover for dropdown behavior.\n- we-menu-group (LayoutElement)\n  Props: collapsible: boolean = false, open: boolean = false, title: string = ''\n- we-menu-item (DesignSystemElement) — Single actionable item inside a we-menu.\nSupports selected, active, and danger states.\n  Props: selected: boolean = false, active: boolean = false, variant: 'default' | 'danger' = 'default', label: unknown, value: unknown\n- we-modal (OverlayElement)\n  Props: hideclosebutton: boolean = false, close: () => void\n- we-number (DesignSystemElement) — Displays a number, optionally abbreviated (1 200 → 1.2K, 1 500 000 → 1.5M).\n  Props: value: number = 0, shorten: boolean = false, precision: number = 1, locale: string = 'en', formattedValue: string\n- we-number-input (DesignSystemElement)\n  Props: value: number = 0, min: number = -Infinity, max: unknown = Infinity, step: number = 1, disabled: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-pagination (DesignSystemElement)\n  Props: page: number = 1, total: number = 1, siblings: number = 1, size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-popover (LayoutElement) — Low-level floating panel anchored to a trigger element.\nUse DropdownMenu component for dropdown menus.\n  Props: open: boolean = false, placement: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' = 'bottom', popoverElement: HTMLElement, triggerElement: HTMLElement\n- we-progress-bar (DesignSystemElement)\n  Props: value: number = 0, max: number = 100, variant: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' = 'primary', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-radio (DesignSystemElement)\n  Props: checked: boolean = false, disabled: boolean = false, name: string = '', value: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-scroll-area (DesignSystemElement)\n  Props: maxHeight: string = '', maxWidth: string = ''\n- we-select (DesignSystemElement)\n  Props: options: SelectOption[] = [], value: string = '', placeholder: string = '', disabled: boolean = false, searchable: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-select (DesignSystemElement) — Pick a single value from a list of options. Custom-rendered dropdown.\nUse for form fields, settings, filters. Set searchable=true for type-to-filter.\n  Props: options: SelectOption[] = [], value: string = '', placeholder: string = '', disabled: boolean = false, searchable: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-skeleton (DesignSystemElement)\n  Props: width: string = '100%', height: string = '20px', animation: 'pulse' | 'wave' = 'pulse'\n- we-slider (DesignSystemElement)\n  Props: value: number = 0, min: number = 0, max: number = 100, step: number = 1, disabled: boolean = false, name: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md', showValue: boolean = false\n- we-sortable (DesignSystemElement) — Drag-to-reorder container primitive.\n\nUsage: wrap a list of elements that each have a `data-we-id` attribute.\nFires a `we-reorder` CustomEvent<string[]> on drop with the new ordered\narray of IDs.\n  Props: direction: 'vertical' | 'horizontal' = 'vertical', gap: string = ''\n- we-spinner (LayoutElement)\n  Props: size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | (string & {}) = 'md', color: string = ''\n- we-switch (DesignSystemElement)\n  Props: checked: boolean = false, disabled: boolean = false, name: string = '', value: string = '', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md', labelOff: string = '', labelOn: string = ''\n- we-tab (DesignSystemElement)\n  Props: key: string = '', selected: boolean = false, label?: string | undefined, selectedProps?: Partial<DesignSystemProps> | undefined\n- we-tabs (DesignSystemElement)\n  Props: selectedKey: string = ''\n- we-tag (DesignSystemElement)\n  Props: variant: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' = 'neutral', dismissible: boolean = false\n- we-text (DesignSystemElement)\n  Props: text?: string | undefined, variant: '' | 'body' | 'label' | 'footnote' | 'subheading' | 'ingress' | 'heading-sm' | 'heading-md' | 'heading-lg' | 'heading-xl' = '', tag: 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'small' | 'b' | 'i' | 'label' | 'div' = 'span', inline: boolean = false, uppercase: boolean = false, italic: boolean = false, truncate: boolean = false, gradient: string = ''\n- we-textarea (DesignSystemElement)\n  Props: value: string = '', name: string = '', placeholder: string = '', rows: number = 3, maxlength: unknown = Infinity, minlength: number = 0, disabled: boolean = false, required: boolean = false, readonly: boolean = false, resize: 'none' | 'vertical' | 'horizontal' | 'both' = 'vertical', size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'\n- we-timestamp (DesignSystemElement) — Displays a formatted or relative timestamp that self-updates each minute\nwhen `relative` is enabled.\n  Props: value: string = '', relative: boolean = false, locale: string = 'en', dateStyle: Intl.DateTimeFormatOptions['dateStyle'] | null = null, timeStyle: Intl.DateTimeFormatOptions['timeStyle'] | null = null, weekday: Intl.DateTimeFormatOptions['weekday'] | null = null, year: Intl.DateTimeFormatOptions['year'] | null = null, month: Intl.DateTimeFormatOptions['month'] | null = null, day: Intl.DateTimeFormatOptions['day'] | null = null, hour: Intl.DateTimeFormatOptions['hour'] | null = null, minute: Intl.DateTimeFormatOptions['minute'] | null = null, second: Intl.DateTimeFormatOptions['second'] | null = null, timeZone: string | null = null, hourCycle: Intl.DateTimeFormatOptions['hourCycle'] | null = null, formattedTime: string\n- we-tooltip (LayoutElement)\n  Props: open: boolean = false, title: string = '', placement: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' = 'top', tooltipEl: HTMLElement, triggerEl: HTMLElement, arrowEl: HTMLElement\n- we-video (LayoutVisualElement)\n  Props: src: string = '', poster?: string | undefined, controls: boolean = false, preload: 'none' | 'metadata' | 'auto' = 'metadata', autoplay: boolean = false, loop: boolean = false, muted: boolean = false, playsinline: boolean = false, stream?: MediaStream | null | undefined\n\n@we/components:\n- AudioDisplay\n  Props: title: string | undefined, artist: string | undefined, audioUrl: string | undefined, duration: number | undefined, albumArt: string | undefined\n- AudioInput\n  Props: title: string | undefined, artist: string | undefined, audioUrl: string | FileData | undefined, duration: number | undefined, albumArt: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- BlockComposer (DesignSystemElement)\n  Props: editorState?: any, perspective?: PerspectiveProxy | null, onSave?: ((json: SerializedBlockNode) => void), onReady?: ((api: { save: () => void; }) => void)\n- BlockPlaceholder\n  Props: icon: string, label: string, hint?: string, accept?: string, onFileDrop?: ((file: File) => void), onClick?: (() => void)\n- BlockRenderer (DesignSystemElement)\n  Props: editorState?: any, perspective?: PerspectiveProxy | null, rootClass?: string\n- BlockToolbar\n  Props: placement?: BlockToolbarPlacement, children: JSX.Element, stopPropagation?: boolean\n- CalloutDisplay\n  Props: text: string | undefined, variant: string | undefined, icon: string | undefined\n- CalloutInput\n  Props: text: string | undefined, variant: string | undefined, icon: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- CodeDisplay\n  Props: code: string | undefined, language: string | undefined, title: string | undefined\n- CodeInput\n  Props: code: string | undefined, language: string | undefined, title: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- CollectionDisplay\n  Props: layout?: string, columnCount?: number, gap?: string, childEditorState?: any\n- CollectionInput\n  Props: nodeKey: string, layout?: string, columnCount?: number, gap?: string, childEditorState?: any, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- DividerDisplay\n  Props: style: \"solid\" | \"dashed\" | \"dotted\" | undefined\n- DividerInput\n  Props: style: DividerVariant | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- EmbedDisplay\n  Props: url: string | undefined, target: string | undefined, targetType: string | undefined, displayMode: string | undefined\n- EmbedInput\n  Props: url: string | undefined, target: string | undefined, targetType: string | undefined, displayMode: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- EventDisplay\n  Props: title: string | undefined, description: string | undefined, startDate: string | undefined, endDate: string | undefined, location: string | undefined, allDay: boolean | undefined\n- EventInput\n  Props: title: string | undefined, description: string | undefined, startDate: string | undefined, endDate: string | undefined, location: string | undefined, allDay: boolean | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- FileDisplay\n  Props: title: string | undefined, name: string | undefined, url: string | undefined, mimeType: string | undefined, size: number | undefined\n- FileInput\n  Props: title: string | undefined, name: string | undefined, url: string | FileData | undefined, mimeType: string | undefined, size: number | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- ImageDisplay\n  Props: src: string | undefined, altText: string | undefined, width: number | undefined, height: number | undefined\n- ImageInput\n  Props: src: string | FileData | undefined, altText: string | undefined, width: number | undefined, height: number | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- LinkDisplay\n  Props: url: string | undefined, title: string | undefined, description: string | undefined, thumbnail: string | undefined\n- LinkInput\n  Props: url: string | undefined, title: string | undefined, description: string | undefined, thumbnail: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- LocationDisplay\n  Props: name: string | undefined, latitude: number | undefined, longitude: number | undefined, address: string | undefined\n- LocationInput\n  Props: name: string | undefined, latitude: number | undefined, longitude: number | undefined, address: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- TagDisplay\n  Props: name: string | undefined, color: string | undefined\n- TagInput\n  Props: name: string | undefined, color: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- TaskDisplay\n  Props: title: string | undefined, description: string | undefined, status: string | undefined, priority: string | undefined, dueDate: string | undefined, assignee: string | undefined\n- TaskInput\n  Props: title: string | undefined, description: string | undefined, status: string | undefined, priority: string | undefined, dueDate: string | undefined, assignee: string | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- VideoDisplay\n  Props: url: string | undefined, title: string | undefined, thumbnail: string | undefined, provider: string | undefined, width: number | undefined\n- VideoInput\n  Props: url: string | undefined, title: string | undefined, thumbnail: string | undefined, provider: string | undefined, width: number | undefined, onChange: (property: string, value: unknown) => void, isSelected: () => boolean\n- Accordion\n  Props: children?: JSX.Element, renderContent?: ((item: AccordionItem, index: number) => JSX.Element), onChange?: ((openItems: string[]) => void), items?: AccordionItem[], multiple?: boolean, styles?: Record<string, string | number>\n- AudioVisualiser\n  Props: src: string | undefined, bars?: number, height?: number, color?: string, activeColor?: string\n- AvatarStack\n  Props: avatars: AvatarInfo[], max?: number, size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxs\" | \"xxl\", overlap?: number, ring?: string, styles?: Record<string, string | number>\n- Breadcrumbs\n  Props: onNavigate?: ((item: BreadcrumbItem, index: number) => void), items?: BreadcrumbItem[], separator?: string, styles?: Record<string, string | number>\n- Calendar\n  Props: onSelect?: ((date: string) => void), value?: string, events?: CalendarEvent[], styles?: Record<string, string | number>\n- Card (DesignSystemElement)\n- CircleButton\n  Props: label: string, icon?: string, image?: string, onClick?: (() => void), class?: string, styles?: Record<string, string | number>\n- CodeEditor\n  Props: code: string, language?: CodeEditorLanguage, readOnly?: boolean, onChange?: ((code: string) => void), onSave?: ((code: string) => void), styles?: Record<string, string | number>\n- CollapsedContent\n  Props: collapsed: boolean, onExpandClick?: (() => void), showToggle?: boolean, icon?: string, maxHeight?: string, fadeColor?: string, children?: JSX.Element, class?: string, styles?: Record<string, string | number>\n- Column (DesignSystemElement)\n- Combobox (DesignSystemElement)\n  Props: options: string[] | ComboboxOption[], value?: string, placeholder?: string, size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\", onChange?: ((value: string) => void)\n- DropdownMenu — Flexible dropdown menu for actions, toggles, and grouped items. Use for context menus, settings panels, layer controls, and command palettes.\n  Props: class?: string, styles?: Record<string, string | number>, placement?: Placement, triggerLabel?: string, triggerIcon?: string, items: SolidDropdownMenuEntry[]\n- EditableImage (DesignSystemElement)\n  Props: src?: string, alt?: string, fit?: \"fill\" | \"cover\" | \"contain\" | \"none\" | \"scale-down\", placeholderIcon?: string, onImageChange?: ((file: File) => void), class?: string, aspect?: number, maxSize?: number\n- FlipCard\n  Props: front?: JSX.Element, back?: JSX.Element, width?: string, height?: string, flipOnHover?: boolean, flipDuration?: string, wobbleOnHover?: boolean, wobbleDegree?: number, class?: string, styles?: Record<string, string | number>\n- Grid (DesignSystemElement)\n  Props: template?: string, columns?: number, minChildWidth?: string\n- IconLabelButton\n  Props: icon: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<string>, label: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<string>, selected?: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<boolean | undefined>, iconWeight?: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<IconWeight | undefined>, onClick?: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<(() => void) | undefined>, class?: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<string | undefined>, styles?: import(\"/home/james/Desktop/Coding/we/packages/design-system/utils/dist/solid\").MaybeAccessor<Record<string, string | number> | undefined>\n- ImageCrop\n  Props: src: string, fileName?: string, aspect?: number, maxSize?: number, outputType?: string, quality?: number, onReady?: ((ref: ImageCropRef) => void)\n- ImageLightbox\n  Props: srcs: string[], initialIndex: number, onClose: () => void\n- List\n  Props: children?: JSX.Element, renderItem?: ((item: ListItem, index: number) => JSX.Element), items?: ListItem[], ordered?: boolean, gap?: string, styles?: Record<string, string | number>\n- PostCard\n  Props: creator?: { name: string; avatar: string; }, title: string, text: string, class?: string, styles?: Record<string, string | number>\n- RerenderLog\n  Props: location: string\n- Row (DesignSystemElement)\n- Search (DesignSystemElement)\n  Props: placeholder?: string, value?: string, onSearch?: ((value: string) => void), debounce?: number\n- Select (DesignSystemElement)\n  Props: options: SelectOption[], value?: string, placeholder?: string, searchable?: boolean, label?: string, size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\", onChange?: ((value: string) => void)\n- SignalControl\n  Props: signalType: SignalTypeData, signals?: SignalData[], myDid?: string, onSignal?: ((value: number) => void), disabled?: boolean, preview?: boolean, class?: string, styles?: Record<string, string | number>\n- Stepper\n  Props: onStepClick?: ((index: number) => void), steps?: StepperStep[], activeStep?: number, orientation?: \"horizontal\" | \"vertical\", styles?: Record<string, string | number>\n- Table\n  Props: renderCell?: ((row: Record<string, unknown>, column: TableColumn, index: number) => JSX.Element), columns: TableColumn[], rows: Record<string, unknown>[], striped?: boolean, bordered?: boolean, styles?: Record<string, string | number>\n- Timeline\n  Props: children?: JSX.Element, renderItem?: ((item: TimelineItem, index: number) => JSX.Element), items?: TimelineItem[], styles?: Record<string, string | number>\n- ToastContainer\n  Props: position?: \"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\" | \"top-center\" | \"bottom-center\", styles?: Record<string, string | number>\n\n@we/widgets:\n- CesiumGlobe — 3D globe widget using CesiumJS with a modular layer system.\nLayers are injected via factory functions (planet surface + background).\nRegistered in the app's component registry, which injects `layerFactoryRegistry` — so templates\nplace it as `CesiumGlobe` without supplying that prop themselves.\n  Props: ionAccessToken?: string, planetLayers?: LayerConfig<unknown>[], backgroundLayers?: LayerConfig<unknown>[], layerFactoryRegistry: Record<string, LayerFactory<any>>\n- CollapsibleSidebar\n  Props: header?: JSX.Element, footer?: JSX.Element, items: CollapsibleSidebarItem[], footerItems?: CollapsibleSidebarItem[], side?: \"left\" | \"right\", position?: \"static\" | \"absolute\" | \"fixed\", zIndex?: number, collapsedWidth?: string, expandedWidth?: string, defaultExpanded?: boolean, expandOnHover?: boolean, transitionDuration?: number, bg?: string, border?: string, padding?: string, gap?: string, centerItems?: boolean, itemColor?: string, itemColorHover?: string, itemColorActive?: string, itemBg?: string, itemBgHover?: string, itemBgActive?: string, itemPadding?: string, itemGap?: string, badgeBg?: string, badgeColor?: string, iconSize?: IconSize, onItemClick?: ((item: CollapsibleSidebarItem) => void), onExpandedChange?: ((expanded: boolean) => void)\n- GraphWidget — 2D force-directed graph visualization using D3-force layout and Canvas rendering.\nDisplays typed nodes (user, space, post) and edges (follows, member-of, etc.)\nwith configurable styling, layout forces, and interaction handlers.\n  Props: data: GraphData, width?: string | number, height?: string | number, nodeStyle?: NodeStyleConfig, edgeStyle?: EdgeStyleConfig, layout?: LayoutConfig, interactions?: InteractionConfig\n- SpaceSidebarWidget\n  Props: name: string, description?: string, class?: string, style?: Record<string, string | number>\n\n---\n\n## Design System Props\n\nMost @we/primitives inherit **all** layers below. Props use design token values — not raw CSS.\n\n### Token Value Reference\n\n| Token Type | Valid Values |\n|---|---|\n| SpaceValue | \"0\", \"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\", \"1000\" (or CSS length e.g. \"16px\") |\n| ColorValue | \"{hue}-{shade}\" where hue = neutral, primary, success, warning, danger and shade = 0, 25, 50, 75, 100, 200–900, 1000. Also \"white\", \"black\". (or CSS color) |\n| RadiusValue | \"0\", \"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\", \"pill\", \"full\" (or CSS length) |\n| ShadowValue | \"sm\", \"md\", \"lg\", \"xl\" |\n| FontSizeValue | \"base\", \"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\", \"1000\" (or CSS length) |\n| FontFamilyValue | \"base\" (or CSS font-family) |\n| LineHeightValue | \"none\", \"tight\", \"snug\", \"normal\", \"relaxed\", \"loose\" (or CSS value) |\n| LetterSpacingValue | \"tighter\", \"tight\", \"normal\", \"wide\", \"wider\", \"widest\" (or CSS value) |\n| FontWeightValue | Named tokens: \"regular\" (400), \"medium\" (500), \"semibold\" (600), \"bold\" (700). Numeric: \"100\"–\"900\". CSS pass-through: \"light\", \"normal\", \"bolder\". |\n\n**Layout-only primitives** — these accept only Layout props (not Visual, Flex, Typography, or State):\nwe-divider, we-icon, we-menu-group, we-popover, we-spinner, we-tooltip\n\n### Layout\n\n| Prop | Type | Description |\n|------|------|-------------|\n| width | string | Element width |\n| height | string | Element height |\n| minWidth | string | Minimum width |\n| minHeight | string | Minimum height |\n| maxWidth | string | Maximum width |\n| maxHeight | string | Maximum height |\n| position | \"relative\" \\| \"absolute\" \\| \"fixed\" \\| \"sticky\" | CSS position |\n| top | string | Top offset |\n| right | string | Right offset |\n| bottom | string | Bottom offset |\n| left | string | Left offset |\n| zIndex | number | Stack order |\n| display | \"flex\" \\| \"block\" \\| \"inline\" \\| \"inline-block\" \\| \"grid\" \\| \"inline-flex\" | Display mode |\n| flex | string | Flex shorthand (e.g. \"1\", \"0 0 auto\", \"none\") — controls grow/shrink/basis |\n| alignSelf | string | Override parent cross-axis alignment for this child |\n| overflow | \"hidden\" \\| \"auto\" | Overflow behavior |\n| m | SpaceValue | Margin (all sides) |\n| mx | SpaceValue | Margin left + right |\n| my | SpaceValue | Margin top + bottom |\n| mt | SpaceValue | Margin top |\n| mr | SpaceValue | Margin right |\n| mb | SpaceValue | Margin bottom |\n| ml | SpaceValue | Margin left |\n\n### Visual\n\n| Prop | Type | Description |\n|------|------|-------------|\n| bg | ColorValue | Background color (token) |\n| bgImage | string | Background image URL — sets background-image, defaults background-size to cover, background-position to center, background-repeat to no-repeat |\n| bgFit | \"cover\" \\| \"contain\" | Background image sizing (default: \"cover\") — only meaningful with bgImage |\n| bgPosition | string | Background image position (default: \"center\", e.g. \"top\", \"50% 20%\") — only meaningful with bgImage |\n| bgImageOpacity | number | Fades bgImage only (0–1), independent of the element's own content/opacity — only meaningful with bgImage |\n| bgImageTint | ColorValue | Color bgImage fades toward as bgImageOpacity decreases (default: the element's own `bg`, or neutral-0) — only meaningful with bgImageOpacity |\n| color | ColorValue | Text/foreground color (token) |\n| opacity | number | Opacity (0–1) |\n| border | string | Border shorthand (e.g. \"1px solid neutral-200\" — color tokens are resolved) |\n| borderColor | ColorValue | Border color (token, e.g. \"neutral-200\", \"primary-500\") |\n| borderTop | string | Top border shorthand (color tokens resolved) |\n| borderRight | string | Right border shorthand (color tokens resolved) |\n| borderBottom | string | Bottom border shorthand (color tokens resolved) |\n| borderLeft | string | Left border shorthand (color tokens resolved) |\n| borderWidth | string | Border width (raw CSS, e.g. \"1px\", \"2px 0\") |\n| shadow | \"sm\" \\| \"md\" \\| \"lg\" \\| \"xl\" | Shadow token |\n| cursor | \"pointer\" \\| \"default\" \\| \"text\" \\| \"not-allowed\" | Cursor style |\n| pointerEvents | \"none\" \\| \"auto\" | Pointer events |\n| transform | string | CSS transform |\n| transition | string | CSS transition |\n| r | RadiusValue | Border radius (all corners) |\n| rt | RadiusValue | Border radius top |\n| rb | RadiusValue | Border radius bottom |\n| rl | RadiusValue | Border radius left |\n| rr | RadiusValue | Border radius right |\n| rtl | RadiusValue | Border radius top-left |\n| rtr | RadiusValue | Border radius top-right |\n| rbr | RadiusValue | Border radius bottom-right |\n| rbl | RadiusValue | Border radius bottom-left |\n\n### Flex (Container)\n\n| Prop | Type | Description |\n|------|------|-------------|\n| direction | \"row\" \\| \"row-reverse\" \\| \"column\" \\| \"column-reverse\" | Flex direction |\n| ax | \"start\" \\| \"center\" \\| \"end\" \\| \"between\" \\| \"around\" \\| \"even\" \\| \"stretch\" | Main-axis alignment |\n| ay | \"start\" \\| \"center\" \\| \"end\" \\| \"between\" \\| \"around\" \\| \"even\" \\| \"stretch\" | Cross-axis alignment |\n| wrap | boolean | Enable flex wrap |\n| gap | SpaceValue | Gap between children (token) |\n| p | SpaceValue | Padding (all sides) |\n| px | SpaceValue | Padding left + right |\n| py | SpaceValue | Padding top + bottom |\n| pt | SpaceValue | Padding top |\n| pr | SpaceValue | Padding right |\n| pb | SpaceValue | Padding bottom |\n| pl | SpaceValue | Padding left |\n\n### Typography\n\n| Prop | Type | Description |\n|------|------|-------------|\n| textAlign | \"left\" \\| \"center\" \\| \"right\" \\| \"justify\" | Text alignment |\n| fontFamily | \"base\" \\| {css-font-family} | Font family token |\n| fontWeight | \"regular\" \\| \"medium\" \\| \"semibold\" \\| \"bold\" (named tokens) or \"100\"–\"900\" (numeric) or \"light\" \\| \"normal\" \\| \"bolder\" (CSS pass-through) | Font weight |\n| fontSize | \"base\" \\| \"100\"–\"1000\" \\| {css-length} | Font size token |\n| lineHeight | \"none\" \\| \"tight\" \\| \"snug\" \\| \"normal\" \\| \"relaxed\" \\| \"loose\" | Line height token |\n| letterSpacing | \"tighter\" \\| \"tight\" \\| \"normal\" \\| \"wide\" \\| \"wider\" \\| \"widest\" | Letter spacing token |\n| textDecoration | \"underline\" \\| \"line-through\" \\| \"overline\" \\| \"none\" | Text decoration |\n| textTransform | \"uppercase\" \\| \"lowercase\" \\| \"capitalize\" \\| \"none\" | Text transform |\n\n**Typography defaults:** fontSize and fontWeight have **no built-in defaults** — omitting them inherits from parent elements (browser default is ~16px / normal weight). Do not set fontSize or fontWeight unless you need a non-default value. For example, `fontSize: '300'` (16px) and `fontWeight: '500'` (normal) are the inherited defaults — omit them.\n\n`we-text` variants (set via the `variant` prop) bundle typography presets. Always pair with a semantic `tag` prop for correct HTML structure:\nbody (300, tag: p/span), label (200 + medium, tag: span), footnote (100, tag: span), subheading (400 + medium, tag: h5/p), ingress (400 + lineHeight 1.6, tag: p), heading-sm (500 + bold, tag: h4), heading-md (600 + bold, tag: h3), heading-lg (700 + bold, tag: h2), heading-xl (800 + bold, tag: h1).\nVariants set size and weight only — color is always inherited or set explicitly. For muted footnote text add `color=\"neutral-400\"` explicitly.\n\n### State\n\n| Prop | Type | Description |\n|------|------|-------------|\n| hoverProps | Partial\\<DesignSystemProps\\> | Styles on :hover |\n| activeProps | Partial\\<DesignSystemProps\\> | Styles on :active |\n| focusProps | Partial\\<DesignSystemProps\\> | Styles on :focus |\n| disabledProps | Partial\\<DesignSystemProps\\> | Styles when disabled |\n\n### Additional\n\n| Prop | Type | Description |\n|------|------|-------------|\n| styles | Record\\<string, string \\| number\\> | Inline CSS applied directly to the component's own element (raw CSS values allowed). For Column, Row, Grid — use this when you need CSS the DS props don't cover. **Do not confuse with node-level styles** (see Schema Structure) which applies to a wrapper div, not the component. |\n| onClick | ActionToken | Event handler (see dynamic logic) |\n\n---\n\n## Design Tokens\n\nUse design tokens for spacing, color, radius, etc. Do not use raw CSS values unless using the styles prop.\n\nanimation.transition: '0', '100', '200', '300', '400', '500'\n\navatarSize: 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'\n\nborder.color: 'base', 'strong'\n\ncolor.base: 'white', 'black'\n\ncolor.config: 'multiplier', 'subtractor', 'saturation', 'neutralSaturation'\n\ncolor.hues: 'neutral', 'primary', 'success', 'warning', 'danger'\n\ncolor.lightness: '0', '25', '50', '75', '100', '200', '300', '400', '500', '600', '700', '800', '900', '1000'\n\ncomponent.scrollbar: 'width', 'backgroundImage', 'background', 'cornerBackground', 'thumbBoxShadow', 'thumbBorderRadius', 'thumbBackground'\n\ncomponentHeight: 'xs', 'sm', 'md', 'lg', 'xl'\n\neffect.depth: '100', '200', '300', '400', '500', 'none'\n\nfont.family: 'base', 'mozilla', 'boldonse'\n\nfont.letterSpacing: 'tighter', 'tight', 'normal', 'wide', 'wider', 'widest'\n\nfont.lineHeight: 'none', 'tight', 'snug', 'normal', 'relaxed', 'loose'\n\nfont.size: '100', '200', '300', '400', '500', '600', '700', '800', '900', '1000', 'base'\n\nfont.weight: '100', '200', '300', '400', '500', '600', '700', '800', '900', 'regular', 'medium', 'semibold', 'bold'\n\nlayout: 'xs', 'sm', 'md', 'lg'\n\nradius: '0', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'pill', 'full'\n\nshadow: 'sm', 'md', 'lg', 'xl'\n\nsize: 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'\n\nspace: '0', '100', '200', '300', '400', '500', '600', '700', '800', '900', '1000'\n\nzIndex: 'dropdown', 'sticky', 'modal', 'popover', 'toast', 'tooltip'\n\n---\n\n## Block & Entity Models\n\nAvailable data models for $query and store data:\n\nAgentSettings extends Ad4mModel:\n  Fields:\n  - currentTemplateId: string = 'default' [we://current_template]\n  - defaultTemplateId: string = 'default' [we://default_template]\n  - currentThemeId: string = 'default' [we://current_theme]\n  - defaultThemeId: string = 'default' [we://default_theme]\n  - claudeApiKey: string [we://claude_api_key]\n  - perspectiveOrder: string [we://perspective_order]\n  - globalSpaceJoined: boolean = false [we://global_space_joined]\n  - globalSpaceUrl: string [we://global_space_url]\n  - useSpaceTemplate: boolean = true [we://use_space_template]\n  Relations:\n  - installedTemplates: HasMany → Template [we://installed_template]\n  - installedThemes: HasMany → Theme [we://installed_theme]\n  - spaceTemplatePreferences: HasMany → SpaceTemplatePreference [we://space_template_preference]\n\nAudioBlock extends WeNode:\n  Fields:\n  - title: string (required) [we://title]\n  - artist: string [we://artist]\n  - audioUrl: string (required) [we://audio_url]\n  - duration: number [we://duration]\n  - albumArt: string [we://album_art]\n  - version: number [we://version]\n\nCalloutBlock extends WeNode:\n  Fields:\n  - text: string [we://text]\n  - variant: string = info [we://variant]\n  - icon: string [we://icon]\n  - version: number [we://version]\n\nChatMessage extends WeNode:\n  Fields:\n  - role: string [we://role]\n  - content: string [we://content]\n\nChatSession extends WeNode:\n  Fields:\n  - name: string [we://name]\n  - templateId: string [we://template_id]\n  Relations:\n  - messages: HasMany → ChatMessage [we://chat_message]\n\nCodeBlock extends WeNode:\n  Fields:\n  - code: string (required) [we://code]\n  - language: string [we://language]\n  - title: string [we://title]\n  - version: number [we://version]\n\nCollectionBlock extends WeNode:\n  Fields:\n  - editorState: string = null [we://editor_state]\n  - type: string [we://type]\n  - display: string [we://display]\n  - direction: string [we://direction]\n  - format: string [we://format]\n  - indent: number [we://indent]\n  - columns: number [we://columns]\n  - gap: string [we://gap]\n  - version: number [we://version]\n  - textContent: string [we://text_content]\n  Relations:\n  - children: HasMany [we://children]\n\nDividerBlock extends WeNode:\n  Fields:\n  - style: string = solid [we://style]\n  - version: number [we://version]\n\nEmbedBlock extends WeNode:\n  Fields:\n  - url: string [we://url]\n  - target: string [we://target]\n  - targetType: string [we://target_type]\n  - displayMode: string = card [we://display_mode]\n  - version: number [we://version]\n\nEventBlock extends WeNode:\n  Fields:\n  - title: string (required) [we://title]\n  - description: string [we://description]\n  - startDate: string (required) [we://start_date]\n  - endDate: string [we://end_date]\n  - location: string [we://location]\n  - allDay: boolean = false [we://all_day]\n  - version: number [we://version]\n\nFileBlock extends WeNode:\n  Fields:\n  - title: string [we://title]\n  - name: string (required) [we://name]\n  - url: string (required) [we://url]\n  - mimeType: string [we://mime_type]\n  - size: number [we://size]\n  - version: number [we://version]\n\nImageBlock extends WeNode:\n  Fields:\n  - src: string (required) [we://src]\n  - altText: string [we://altText]\n  - width: number [we://width]\n  - height: number [we://height]\n  - version: number [we://version]\n\nLinkBlock extends WeNode:\n  Fields:\n  - url: string (required) [we://url]\n  - title: string [we://title]\n  - description: string [we://description]\n  - thumbnail: string [we://thumbnail]\n  - version: number [we://version]\n\nLocationBlock extends WeNode:\n  Fields:\n  - name: string [we://name]\n  - latitude: number (required) [we://latitude]\n  - longitude: number (required) [we://longitude]\n  - address: string [we://address]\n  - city: string [we://city]\n  - countryCode: string [we://country_code]\n  - country: string [we://country]\n  - version: number [we://version]\n\nSignal extends Ad4mModel:\n  Fields:\n  - signalTypeId: string [we://signal_type_id]\n  - value: number [we://value]\n\nSignalType extends WeNode:\n  Fields:\n  - name: string [we://name]\n  - slug: string [we://slug]\n  - description: string [we://description]\n  - icon: string [we://icon]\n  - iconSecondary: string [we://icon_secondary]\n  - step: number = 1 [we://step]\n  - rangeMin: number [we://range_min]\n  - rangeMax: number = 1 [we://range_max]\n  - mode: SignalMode = 'toggle' [we://mode]\n  - aggregate: SignalAggregate = 'count' [we://aggregate]\n  - semantic: SignalSemantic = 'custom' [we://semantic]\n  - allowChange: boolean = true [we://allow_change]\n  - valueType: string = 'numeric' [we://signal_value_type]\n  - schemaVersion: number = 1 [we://schema_version]\n\nSpace extends WeNode:\n  Fields:\n  - uuid: string [we://uuid]\n  - url: string [we://url]\n  - name: string (required) [we://name]\n  - description: string (required) [we://description]\n  - access: string = 'personal' [we://access]\n  - discovery: string = 'hidden' [we://discovery]\n  - avatar: string [we://image]\n  - coverImage: string [we://thumbnail]\n  - defaultTemplateId: string [we://default_template_id]\n  - defaultThemeId: string [we://default_theme_id]\n  - enabledModules: string [we://enabled_modules]\n  Relations:\n  - location: HasOne [we://location]\n\nSpaceTemplatePreference extends WeNode:\n  Fields:\n  - spaceUrl: string [we://space_url]\n  - preference: string [we://preference]\n\nTagBlock extends WeNode:\n  Fields:\n  - name: string (required) [we://name]\n  - color: string [we://color]\n  - version: number [we://version]\n\nTaskBlock extends WeNode:\n  Fields:\n  - title: string (required) [we://title]\n  - description: string [we://description]\n  - status: string = todo [we://status]\n  - priority: string = medium [we://priority]\n  - dueDate: string [we://due_date]\n  - assignee: string [we://assignee]\n  - version: number [we://version]\n\nTemplate extends WeNode:\n  Fields:\n  - name: string [we://name]\n  - description: string [we://description]\n  - icon: string [we://icon]\n  - origin: string [we://origin]\n  - version: number = 1 [we://version]\n  - slug: string [we://slug]\n  - schema: string = null [we://template_schema]\n  - themeId: string [we://theme_id]\n  Relations:\n  - screenshots: HasMany → ImageBlock [we://screenshot]\n\nTextBlock extends WeNode:\n  Fields:\n  - type: string [we://type]\n  - direction: string [we://direction]\n  - format: string [we://format]\n  - indent: number [we://indent]\n  - textFormat: number [we://textFormat]\n  - textStyle: string [we://textStyle]\n  - listType: string [we://listType]\n  - start: number [we://start]\n  - tag: string [we://tag]\n  - text: string [we://text]\n  - version: number [we://version]\n\nTheme extends WeNode:\n  Fields:\n  - name: string [we://name]\n  - description: string [we://description]\n  - icon: string [we://icon]\n  - origin: string [we://origin]\n  - slug: string [we://slug]\n  - version: number = 1 [we://version]\n  - css: string = null [we://stylesheet]\n  - overrides: string = null [we://token_overrides]\n  Relations:\n  - screenshots: HasMany → ImageBlock [we://screenshot]\n\nVideoBlock extends WeNode:\n  Fields:\n  - title: string [we://title]\n  - url: string (required) [we://url]\n  - duration: number [we://duration]\n  - thumbnail: string [we://thumbnail]\n  - provider: string [we://provider]\n  - version: number [we://version]\n\nWeNode extends Ad4mModel:\n  Relations:\n  - comments: HasMany [we://comment]\n  - signals: HasMany → Signal [we://signal]\n\n---\n\n## Stores\n\nStores provide state (readable values) and actions (methods) for dynamic logic in schemas.\nAccess state with $store and call actions with $action.\nFor ephemeral/form state, use $localState/$local/$setLocal instead of stores (see Dynamic Logic).\n\nAdamStore:\n- State:\n  - adamClient: Ad4mClient | undefined\n  - me: Agent | undefined\n  - allPerspectives: array of PerspectiveProxy objects (all AD4M perspectives)\n  - currentPerspective: PerspectiveProxy | null (the perspective currently being viewed)\n  - currentPerspectiveModels: ModelManifestEntry[] (non-WE SHACL models from the current perspective; injected as externalModels into AI messages)\n  - isWeSpace: boolean — true once the current perspective is confirmed to have WE's Space SDNA installed (false for a joined-but-foreign perspective, e.g. one synced in from Flux)\n  - personalSpaces: array of Space objects (local/personal spaces; all Space fields)\n  - sharedSpaces: array of Space objects (shared/neighbourhood spaces; all Space fields)\n  - bootState: string\n  - passwordError: string | undefined\n  - loginLoading: boolean\n  - creatingSpace: boolean (true while a new space is being created)\n  - agents: AgentProfileSummary[] — cache of all fetched agent profiles (did, firstName, lastName, handle, bio, avatar, coverImage, location)\n  - ownAgent: AgentProfileSummary | undefined — reactive accessor for the current user's own profile (derived from agents cache)\n  - orderedSidebarItems: array of sidebar items in user-defined order (uuid, name, avatar, spaceId) — personal + shared spaces merged\n- Actions:\n  - navigate(to: string, options?): navigates to a route\n  - addNewSpace(space: Space): adds a new space\n  - createSpace(name: string, description: string, shared: boolean, imageFile?: File): creates a new space with full setup\n  - initializeAsWeSpace(name: string, description: string, avatarValue?: File | string | null): installs WE's Space SDNA into the current, already-joined, foreign-native perspective (e.g. one synced in from Flux) and creates a Space entity in place — access is always 'shared' since the perspective is already a published neighbourhood\n  - switchPerspective(uuid: string): switches to a perspective by UUID, registers its SHACL models as dynamic model classes, and populates currentPerspectiveModels\n  - removePerspective(uuid: string): removes a perspective by UUID\n  - reorderPerspectives(newOrder: string[]): reorders the sidebar items by UUID array\n  - login(password: string): logs in the agent with password\n  - logout(): locks the agent and returns to login screen\n  - fetchAgent(did: string): fetches and caches an agent's profile from their public AD4M perspective\n  - updateOwnProfile(fields: { firstName?, lastName?, handle?, bio? }): updates own profile text fields and publishes to public perspective\n  - updateProfileImage(field: \"avatar\" | \"coverImage\", imageFile: File): uploads image to FILE_STORAGE_LANGUAGE and publishes expression URL to public perspective\n  - updateAgentLocation(update: { latitude?, longitude?, city?, country?, countryCode? }): merges location update into cache and publishes to public perspective\n  - cleanupSpaceSdna(uuid?: string): one-time remediation for a perspective that accumulated duplicate SDNA installs (e.g. from before joinSpace checked for existing SDNA before installing) — removes the redundant duplicate link copies. Defaults to the current perspective. Returns a display-ready summary string naming how many links were removed and the DIDs that authored them (your own DID annotated with \"(you)\"), or an empty string if nothing needed cleaning up\n\nRouteStore:\n- State:\n  - currentPath: string (the current route path)\n  - segments: string[] (currentPath split by \"/\", e.g. [\"/foo/bar\"] → [\"foo\", \"bar\"])\n- Actions:\n  - navigate(to: string, options?): navigates to a route\n\nThemeStore:\n- State:\n  - builtInThemes: array of ThemeData objects — built-in registry themes (origin: \"built-in\", always available)\n  - installedThemes: array of ThemeData objects — user-installed themes from root perspective (origin: \"custom\" | \"marketplace\")\n  - spaceThemes: array of ThemeData objects — themes stored in the current space perspective (origin: \"custom\")\n  - allThemes: array of ThemeData objects — union of builtInThemes + visible installedThemes + spaceThemes (hidden themes filtered out)\n  - currentThemeId: string — id of the currently active theme\n  - currentTheme: ThemeData — the currently active theme object (id, name, icon, origin)\n  - defaultThemeId: string — id of the user's preferred default theme (used for bootscreen, shell, and future space-override). Persisted to AgentSettings.defaultThemeId\n  - themeManagementList: ThemeManagementItem[] — flat list of all themes (built-in + all custom) with management metadata (id, name, icon, isBuiltIn, isInstalled, isDefault)\n- Actions:\n  - setCurrentTheme(themeId: string): sets and persists the active theme\n  - setDefaultTheme(themeId: string): sets the preferred default theme (persists to AgentSettings.defaultThemeId)\n  - toggleThemeInstalled(themeId: string): toggles a custom theme visible/hidden in pickers; does not delete the theme\n  - installFromMarketplace(marketplaceThemeId: string): installs a marketplace theme into installedThemes\n  - uninstallTheme(themeId: string): removes an installed theme (deletes the model)\n  - deleteTheme(themeId: string): permanently deletes a custom theme\n\nTemplateStore:\n- State:\n  - personalTemplates: array of TemplateSchema objects — core templates plus user's installed custom templates (excludes space templates)\n  - spaceTemplates: array of TemplateSchema objects — templates loaded from the current space perspective\n  - builtInTemplates: array of TemplateSchema objects — built-in system templates (always available)\n  - myTemplates: array of TemplateSchema objects — user's installed custom templates only (excludes built-in and space templates)\n  - allTemplates: array of TemplateSchema objects — union of built-in + personal + space templates\n  - shellTemplates: array of TemplateSchema objects (static system pages: profile, settings, tests)\n  - currentTemplate: TemplateSchema (the active template)\n  - operationLoading: unknown\n  - activeShellView: string | null (id of the currently open shell overlay: 'profile' | 'settings' | 'schema-tests' | 'landing-page' | null)\n  - templateManagementList: TemplateManagementItem[] — flat list of all templates with management metadata (id, name, icon, description, isBuiltIn, isInstalled, isDefault)\n  - switcherGroups: TemplateSwitcherGroup[] — pre-grouped flat items for the template switcher UI; each group has { label: string, items: { id, name, icon }[] }. Groups: \"Space templates\", \"My templates\", \"Built-in\". Use $filter where: { name: { contains: ... } } for search since items have a flat name field.\n- Actions:\n  - updateTemplate(newTemplate: TemplateSchema): updates the current template\n  - switchTemplate(newTemplateId: string): switches to another template\n  - removeTemplate(): removes the current template\n  - saveTemplate(name: string): saves the current template\n  - toggleInstalled(): unknown\n  - setDefaultTemplate(): unknown\n  - deleteTemplate(): unknown\n  - openShellView(id: string): opens a shell overlay by id ('profile' | 'settings' | 'schema-tests' | 'landing-page')\n  - closeShellView(): closes the currently open shell overlay\n\nSpaceStore:\n- State:\n  - memberDids: string[] — DIDs of all members in the current space (includes own DID)\n  - members: AgentProfileSummary[] — cached profiles for all memberDids\n  - spaceDefaultTemplateId: string — the current space's default template ID (empty string when no space is active)\n  - currentSpace: Space | null — the current space model (all Space fields: uuid, url, name, description, access, discovery, avatar, coverImage, defaultTemplateId, defaultThemeId, location, plus id/author/createdAt)\n  - foreignSpacePrefill: { name, description, avatar } | null — detected from a foreign app's own model (e.g. Flux's Community) for prefilling the \"Initialize as WE space\" gate; null once the perspective is a WE space or no recognized foreign model is found\n  - signalTypes: array of SignalType objects (community-created reaction/vote types)\n  - signalTypesBySlug: Record<slug, SignalType> — computed map; access via { $store: \"spaceStore.signalTypesBySlug.<slug>\" }; use .id for the UUID\n  - enabledModules: string[] — ids of the feature modules this space has turned on. An unset value means \"not decided\", not \"none\": it falls back to every registered module, so spaces predating the setting keep the chrome they had\n  - moduleSettings: { id, name, description, icon, enabled }[] — every registered module paired with whether this space has it on; the shape the settings list renders\n  - moduleLaunchers: { id, icon, label, active }[] — launchers for the modules enabled here and available in this space; what the host module rail renders. Pair with { $action: \"spaceStore.launchModule\", args: [\"$mod.id\"] }\n- Actions:\n  - createPost(editorState: unknown): creates a new post\n  - updatePost(postId: string, editorState: unknown): reconciles an edited post against its existing blocks — updates/reuses blocks whose id survived the edit, creates new ones, deletes ones no longer present\n  - deletePost(postId: string): permanently deletes a post and all of its contained blocks (recursive, atomic)\n  - updateSpaceImage(field: \"avatar\" | \"coverImage\", imageFile: File): uploads and sets the space avatar or cover image\n  - createSignalType(config: Partial<SignalType>): creates a new signal type in the community; slug auto-derived from name if blank\n  - upsertSignal(nodeId: string, signalTypeId: string, value: number): adds or updates a signal on a node; value=0 deletes it\n  - navigateToSpace(spaceId: string, view?: string): navigates to a space — accepts a perspective UUID or a neighbourhood CID (sharedUrl without the neighbourhood:// prefix); pre-loads space templates before switching so the template and data arrive together\n  - setModuleEnabled(moduleId: string, enabled: boolean): turns a feature module on or off for the current space; writes the resolved list, so the first toggle also pins whatever was on by fallback\n  - launchModule(moduleId: string): invokes that module's declared launcher action. Takes an id rather than a path because $action resolves a literal string, so a rail iterating over modules cannot build modules.<id>.<method> itself\n\nAiStore:\n- State:\n  - models: array of Model objects\n  - tasks: array of AITask objects\n  - isOpen: unknown\n  - messages: unknown\n  - isStreaming: unknown\n  - streamingContent: unknown\n  - apiKeyConfigured: unknown\n  - templateName: unknown\n  - templateIcon: unknown\n  - isReadOnly: unknown\n  - hasPendingChanges: unknown\n  - pickerOpen: unknown\n  - pickerAction: unknown\n  - pickerDefaultName: unknown\n  - pickerDefaultIcon: unknown\n  - pickerShowDestination: unknown\n  - sessions: unknown\n  - activeSessionId: unknown\n  - panelMode: unknown\n  - schemaJson: unknown\n  - operationLoading: unknown\n  - canUndo: boolean (true when there are schema edits that can be undone)\n  - canRedo: boolean (true when there are undone schema edits that can be redone)\n- Actions:\n  - handleSchemaPrompt(prompt: string): generates a schema from a prompt\n  - sendMessage(): unknown\n  - close(): unknown\n  - toggle(): toggles the AI chat panel open/closed\n  - setApiKey(): unknown\n  - startFork(): unknown\n  - startFresh(): unknown\n  - confirmPicker(): unknown\n  - cancelPicker(): unknown\n  - newChat(): unknown\n  - switchSession(): unknown\n  - deleteSession(): unknown\n  - setPanelMode(): unknown\n  - onSchemaEdit(): unknown\n  - undo(): undoes the last schema edit\n  - redo(): redoes the last undone schema edit\n\nAppStore:\n- State:\n  - apps: RegisteredApp[] — list of registered external apps (id, name, image)\n  - appsWithWe: unknown\n  - activeAppId: string | null — id of the currently active app, or null if none\n- Actions:\n  - activateApp(id: string): activates an app and switches to its view\n  - deactivateApp(): deactivates the current app and returns to the template view\n\n---\n\n## Store Usage Patterns\n\nReading state:\n{ \"$store\": \"storeName.property\" }\nExample: { \"$store\": \"routeStore.currentPath\" }\n\nCalling actions:\n{ \"$action\": \"storeName.method\", \"args\": [...] }\nExample: { \"$action\": \"routeStore.navigate\", \"args\": [\"/home\"] }\n\nIterating over store data:\n{\n  \"type\": \"$each\",\n  \"props\": { \"items\": { \"$store\": \"adamStore.personalSpaces\" }, \"as\": \"space\" },\n  \"children\": [\n    {\n      \"type\": \"CircleButton\",\n      \"props\": {\n        \"label\": \"$space.name\",\n        \"onClick\": { \"$action\": \"routeStore.navigate\", \"args\": [{ \"$concat\": [\"/space/\", \"$space.uuid\"] }] }\n      }\n    }\n  ]\n}\n\nConditional rendering from store:\n{\n  \"type\": \"$if\",\n  \"props\": {\n    \"condition\": { \"$eq\": [{ \"$store\": \"routeStore.currentPath\" }, \"/\"] },\n    \"then\": { \"type\": \"we-text\", \"children\": [\"Home\"] },\n    \"else\": { \"type\": \"we-text\", \"children\": [\"Not home\"] }\n  }\n}\n\nDeriving options from store:\n{\n  \"$map\": {\n    \"items\": { \"$store\": \"templateStore.templates\" },\n    \"select\": { \"name\": \"$item.meta.name\", \"icon\": \"$item.meta.icon\" }\n  }\n}\n\nQuerying model data:\n{\n  \"$query\": { \"entity\": \"TaskBlock\", \"where\": { \"status\": \"todo\" } }\n}\n\nEager-loading relations with include (most common relational pattern):\nWhen you need related data displayed alongside a list, use include to hydrate relations in one query.\n\nExample — Channel list with conversation count and latest conversation:\n{\n  \"type\": \"$each\",\n  \"props\": {\n    \"items\": {\n      \"$query\": {\n        \"entity\": \"Channel\",\n        \"dataset\": \"$currentDataset\",\n        \"include\": {\n          \"$conversationCount\": { \"from\": \"conversations\", \"count\": true },\n          \"$latestConversation\": { \"from\": \"conversations\", \"order\": { \"createdAt\": \"desc\" }, \"limit\": 1 }\n        }\n      }\n    },\n    \"as\": \"channel\"\n  },\n  \"children\": [{\n    \"type\": \"Row\",\n    \"children\": [\n      { \"type\": \"we-text\", \"children\": [\"$channel.name\"] },\n      { \"type\": \"we-text\", \"children\": [\"$channel.$conversationCount\"] }\n    ]\n  }]\n}\n\nExample — Nested include (Conversations with their messages):\n{\n  \"$query\": {\n    \"entity\": \"Conversation\",\n    \"dataset\": \"$currentDataset\",\n    \"include\": {\n      \"messages\": {\n        \"order\": { \"createdAt\": \"desc\" },\n        \"limit\": 20\n      }\n    }\n  }\n}\nEach conversation in the result has a messages array of hydrated Message instances.\nNesting works to any depth: \"include\": { \"messages\": { \"include\": { \"reactions\": true } } }\n\nRelational drill-down (master-detail navigation across entity relations):\nUse routes + a $query `scope` when you navigate to a detail route and need only that record's children.\nscope.anchor is the parent entity type; scope.via is its HasMany relation (see externalModels) whose targets\nare the query's entity; scope.anchorId is the parent record's id. The adapter resolves the relation to a\nbackend handle, so no protocol details live in the template.\nrouteStore.segments.N extracts the Nth dynamic path segment (segments splits currentPath by \"/\").\n\nExample — Channel list → Conversation list:\n{\n  \"routes\": [\n    {\n      \"path\": \"/\",\n      \"type\": \"Column\",\n      \"props\": { \"gap\": \"300\", \"p\": \"400\" },\n      \"children\": [{\n        \"type\": \"$each\",\n        \"props\": {\n          \"items\": { \"$query\": { \"entity\": \"Channel\", \"dataset\": \"$currentDataset\" } },\n          \"as\": \"channel\"\n        },\n        \"children\": [{\n          \"type\": \"we-button\",\n          \"props\": {\n            \"variant\": \"ghost\",\n            \"onClick\": { \"$action\": \"routeStore.navigate\", \"args\": [{ \"$concat\": [\"/channels/\", \"$channel.id\"] }] }\n          },\n          \"children\": [\"$channel.name\"]\n        }]\n      }]\n    },\n    {\n      \"path\": \"/channels/:channelId\",\n      \"type\": \"Column\",\n      \"props\": { \"gap\": \"300\", \"p\": \"400\" },\n      \"children\": [{\n        \"type\": \"$each\",\n        \"props\": {\n          \"items\": {\n            \"$query\": {\n              \"entity\": \"Conversation\",\n              \"scope\": { \"anchor\": \"Channel\", \"via\": \"conversations\", \"anchorId\": { \"$store\": \"routeStore.segments.1\" } },\n              \"dataset\": \"$currentDataset\"\n            }\n          },\n          \"as\": \"convo\"\n        },\n        \"children\": [{\n          \"type\": \"we-text\",\n          \"children\": [\"$convo.conversationName\"]\n        }]\n      }]\n    }\n  ]\n}\nNotes:\n- Use include when you need related data displayed inline (e.g. a post with its comments, a channel with its conversation count).\n- Use a scope drill-down when you're on a detail route and want only children belonging to the current record.\n- dataset must point to the dataset that holds the data. For external apps (e.g. Flux) opened as a WE space, use \"$currentDataset\".\n- The relation name (in include, or scope.via) is the HasMany field name on the parent entity.\n\nLocal state (form with validation):\n{\n  \"type\": \"Column\",\n  \"$localState\": {\n    \"name\": {\n      \"type\": \"string\",\n      \"initial\": \"\",\n      \"validate\": [{ \"rule\": \"required\" }, { \"rule\": \"minLength\", \"value\": 2 }]\n    },\n    \"loading\": { \"type\": \"boolean\", \"initial\": false }\n  },\n  \"children\": [\n    {\n      \"type\": \"we-form-field\",\n      \"props\": { \"label\": \"Name\", \"error\": { \"$error\": \"name\" } },\n      \"children\": [{\n        \"type\": \"we-input\",\n        \"props\": {\n          \"value\": { \"$local\": \"name\" },\n          \"onInput\": { \"$setLocal\": \"name\", \"from\": \"$event.detail\" },\n          \"onBlur\": { \"$touch\": \"name\" }\n        }\n      }]\n    },\n    {\n      \"type\": \"we-button\",\n      \"props\": {\n        \"text\": \"Submit\",\n        \"loading\": { \"$local\": \"loading\" },\n        \"disabled\": { \"$not\": { \"$formValid\": \"$scope\" } },\n        \"onClick\": [\n          { \"$touch\": \"$all\" },\n          { \"$if\": { \"condition\": { \"$formValid\": \"$scope\" }, \"then\": { \"$action\": \"myStore.submit\", \"args\": [{ \"$local\": \"name\" }] } } }\n        ]\n      }\n    }\n  ]\n}\n\nRepeating lists with $each:\nALWAYS use $each for lists of similar items — never duplicate the same node structure.\nWrite the template once; $each renders it for each item.\n\nUse literal arrays for fixed/sample data:\n{\n  \"type\": \"$each\",\n  \"props\": {\n    \"items\": [\n      { \"title\": \"First Post\", \"text\": \"Hello world.\", \"author\": \"Alice\" },\n      { \"title\": \"Second Post\", \"text\": \"Another update.\", \"author\": \"Bob\" }\n    ],\n    \"as\": \"post\"\n  },\n  \"children\": [\n    {\n      \"type\": \"Column\",\n      \"props\": { \"bg\": \"neutral-0\", \"r\": \"400\", \"border\": \"1px solid neutral-200\", \"p\": \"400\", \"gap\": \"300\" },\n      \"children\": [\n        {\n          \"type\": \"Row\",\n          \"props\": { \"gap\": \"300\", \"ay\": \"center\" },\n          \"children\": [\n            { \"type\": \"we-avatar\", \"props\": { \"initials\": \"$post.author\", \"size\": \"sm\" } },\n            { \"type\": \"we-text\", \"props\": { \"variant\": \"label\" }, \"children\": [\"$post.author\"] }\n          ]\n        },\n        { \"type\": \"we-text\", \"props\": { \"variant\": \"heading-sm\" }, \"children\": [\"$post.title\"] },\n        { \"type\": \"we-text\", \"children\": [\"$post.text\"] }\n      ]\n    }\n  ]\n}\n\nUse $query or $store for dynamic data (more common in production):\n{ \"type\": \"$each\", \"props\": { \"items\": { \"$query\": { \"entity\": \"TextBlock\" } }, \"as\": \"post\" }, \"children\": [...] }\n{ \"type\": \"$each\", \"props\": { \"items\": { \"$store\": \"spaceStore.posts\" }, \"as\": \"post\" }, \"children\": [...] }\n\nPer-item customization inside $each:\nTo style or highlight specific items, add a data flag to those items and use $if on the flag inside the template. Do NOT use $eq: [\"$index\", N] comparisons — they are fragile, repetitive, and break when items are reordered.\nExample: add \"highlighted\": true to one item's data, then use $if on \"$post.highlighted\" in the template:\n{ \"type\": \"$if\", \"props\": { \"condition\": \"$post.highlighted\", \"then\": { \"type\": \"we-badge\", \"props\": { \"variant\": \"primary\" }, \"children\": [\"Featured\"] } } }\nFor conditional props (e.g. different bg on highlighted items):\n{ \"bg\": { \"$if\": { \"condition\": \"$post.highlighted\", \"then\": \"primary-50\", \"else\": \"neutral-0\" } } }\n\nBoolean toggle (show/hide, expand/collapse):\n{\n  \"type\": \"Column\",\n  \"$localState\": { \"showDetails\": { \"type\": \"boolean\", \"initial\": false } },\n  \"children\": [\n    { \"type\": \"we-button\", \"props\": { \"variant\": \"ghost\", \"onClick\": { \"$toggleLocal\": \"showDetails\" } }, \"children\": [\"Toggle Details\"] },\n    { \"type\": \"$if\", \"props\": { \"condition\": { \"$local\": \"showDetails\" }, \"then\": { \"type\": \"we-text\", \"children\": [\"Details content here\"] } } }\n  ]\n}\n\nSignal types (community-specific reactions/votes):\nSignal types are created per-community by the user. Never hardcode signal type UUIDs in schemas.\nInstead reference them by slug through spaceStore.signalTypesBySlug.\n\nALWAYS ask the user: \"What slug should I use? (e.g. 'like', 'upvote', 'star')\"\nThen use that slug in the pattern below.\n\nPattern — live wired SignalControl (inside a $each over a model with $query include):\n{\n  \"type\": \"$each\",\n  \"props\": {\n    \"items\": {\n      \"$query\": {\n        \"entity\": \"MyBlock\",\n        \"include\": {\n          \"$totalLikeCount\": {\n            \"from\": \"signals\",\n            \"where\": { \"signalTypeId\": { \"$store\": \"spaceStore.signalTypesBySlug.like.id\" } },\n            \"count\": true\n          },\n          \"$myLikeSignal\": {\n            \"from\": \"signals\",\n            \"where\": {\n              \"signalTypeId\": { \"$store\": \"spaceStore.signalTypesBySlug.like.id\" },\n              \"author\": \"$me.did\"\n            },\n            \"limit\": 1\n          }\n        }\n      }\n    },\n    \"as\": \"item\"\n  },\n  \"children\": [\n    {\n      \"type\": \"$if\",\n      \"props\": {\n        \"condition\": { \"$store\": \"spaceStore.signalTypesBySlug.like\" },\n        \"then\": {\n          \"type\": \"SignalControl\",\n          \"props\": {\n            \"signalType\": { \"$store\": \"spaceStore.signalTypesBySlug.like\" },\n            \"myValue\": \"$item.$myLikeSignal.value\",\n            \"aggregate\": \"$item.$totalLikeCount\",\n            \"onSignal\": {\n              \"$action\": \"spaceStore.upsertSignal\",\n              \"args\": [\"$item.id\", { \"$store\": \"spaceStore.signalTypesBySlug.like.id\" }, \"$arg\"]\n            }\n          }\n        }\n      }\n    }\n  ]\n}\n\nNotes:\n- The $if guard hides SignalControl if the community hasn't created a signal type with that slug.\n- Replace \"like\" with the user's slug throughout (in $store paths and args).\n- $query include adds $totalLikeCount and $myLikeSignal as computed properties on each item.\n- signalType prop accepts the full SignalType object (provides icon, mode, range to the UI component).\n\nPreview / mockup mode (static, no store wiring):\n{\n  \"type\": \"SignalControl\",\n  \"props\": {\n    \"preview\": true,\n    \"signalType\": { \"icon\": \"❤️\", \"mode\": \"toggle\", \"rangeMin\": 0, \"rangeMax\": 1 }\n  }\n}\nUse preview: true when sketching a layout without real data. Remove it (and add the full wiring above) when going live.\n\n---\n\n## Routing Structure\n\nDefine nested routes using the \"routes\" array at the root node of the schema.\nEach route object describes a path and the UI node to render when that path is active.\nRoutes can be nested to support sub-pages and layouts.\n\nRoute objects follow the same structure as schema nodes, with an additional \"path\" property.\n\n- The \"routes\" array MUST be placed on the ROOT template node (or on a route node for nested routing). The router only reads routes from these positions — placing routes on an arbitrary child node means the router will never find them and nothing will render.\n- Use \"path: '*'\" or \"path: '/*'\" for catch-all/not-found routes.\n- Use \":paramName\" for dynamic route parameters (e.g. \"/space/:spaceId\").\n- Use nested \"routes\" arrays for sub-pages and layouts.\n- Use { \"type\": \"$routes\" } in children to indicate where nested routes should render. The $routes outlet can be deeply nested — only the routes array placement matters.\n- EVERY { \"type\": \"$routes\" } outlet MUST have a \"routes\" array defined on the same node or an ancestor node. A $routes outlet without a routes array is invalid and will fail validation.\n- NEVER duplicate a route path — every route in the same \"routes\" array MUST have a unique path.\n- When using tabs, each tab's key and navigate path MUST have a matching route. Ensure a 1:1 correspondence between tabs and routes.\n\n### Tabs + Routing\n\nIMPORTANT: we-tabs only manages visual selection — clicking a tab does NOT navigate automatically.\nEach we-tab MUST have an onClick with { \"$action\": \"routeStore.navigate\" } to trigger route changes.\nBind we-tabs selectedKey to the matching route segment so the active tab stays in sync.\n(Alternatively, a single onChange on we-tabs can replace per-tab onClick — see onChange pattern below.)\n\nRecommended pattern — header above tabs (routes on ROOT, $routes outlet nested inside):\n{\n  \"type\": \"Column\",\n  \"routes\": [\n    { \"path\": \"/\", \"type\": \"we-text\", \"children\": [\"Select a tab\"] },\n    { \"path\": \"/posts\", \"type\": \"Column\", \"children\": [{ \"type\": \"we-text\", \"children\": [\"Posts content\"] }] },\n    { \"path\": \"/articles\", \"type\": \"Column\", \"children\": [{ \"type\": \"we-text\", \"children\": [\"Articles content\"] }] }\n  ],\n  \"children\": [\n    { \"type\": \"Row\", \"props\": { \"p\": \"300\", \"ax\": \"between\" }, \"children\": [\n      { \"type\": \"we-text\", \"props\": { \"variant\": \"heading-lg\" }, \"children\": [\"My App\"] }\n    ]},\n    {\n      \"type\": \"we-tabs\",\n      \"props\": { \"selectedKey\": { \"$store\": \"routeStore.segments.0\" } },\n      \"children\": [\n        { \"type\": \"we-tab\", \"props\": { \"key\": \"posts\", \"label\": \"Posts\", \"onClick\": { \"$action\": \"routeStore.navigate\", \"args\": [\"/posts\"] } } },\n        { \"type\": \"we-tab\", \"props\": { \"key\": \"articles\", \"label\": \"Articles\", \"onClick\": { \"$action\": \"routeStore.navigate\", \"args\": [\"/articles\"] } } }\n      ]\n    },\n    { \"type\": \"$routes\" }\n  ]\n}\nNote: \"routes\" is on the root Column, NOT on a child. The $routes outlet is a child — that's fine. Only the routes array placement matters.\n\nWRONG — two common mistakes that produce empty tabs (validator will catch both):\n{\n  // MISTAKE 1: routes defined on an inner child node, not the root.\n  // The router never inspects children for routes arrays — this routes array is invisible.\n  \"type\": \"Column\",\n  \"children\": [\n    { \"type\": \"we-tabs\", \"children\": [\"...tabs...\"] },\n    {\n      \"type\": \"Column\",\n      \"routes\": [                          // ← WRONG: router never reads this\n        { \"path\": \"/posts\", \"type\": \"Column\", \"children\": [\"...\"] }\n      ],\n      \"children\": [{ \"type\": \"$routes\" }]  // ← outlet here does nothing without a live routes array\n    }\n  ]\n}\n\n{\n  // MISTAKE 2: using { type: \"$routes\" } as a route entry's component type.\n  // $routes is an outlet slot marker — as a leaf route entry it has no children injected,\n  // so it returns null. Every tab navigates to a route that renders nothing.\n  \"type\": \"Column\",\n  \"routes\": [\n    { \"path\": \"/posts\", \"type\": \"$routes\" }  // ← WRONG: renders null, use a real component\n  ],\n  \"children\": [{ \"type\": \"$routes\" }]\n}\n\nAlternative: single onChange on we-tabs (fires with $event.detail.value = selected key):\n{ \"onChange\": { \"$action\": \"routeStore.navigate\", \"args\": [{ \"$concat\": [\"/\", \"$arg.detail.value\"] }] } }\nThis replaces all per-tab onClick handlers but requires $concat to build the path.\n\nNested routing example:\n{\n  \"routes\": [\n    { \"path\": \"*\", \"type\": \"Column\", \"props\": { \"ax\": \"center\", \"p\": \"500\" }, \"children\": [{ \"type\": \"we-text\", \"children\": [\"Page not found\"] }] },\n    { \"path\": \"/\", \"type\": \"Column\", \"props\": { \"ax\": \"center\", \"p\": \"500\" }, \"children\": [{ \"type\": \"we-text\", \"children\": [\"Home page\"] }] },\n    {\n      \"path\": \"/space/:spaceId\",\n      \"type\": \"Row\",\n      \"children\": [{ \"type\": \"$routes\" }],\n      \"routes\": [\n        { \"path\": \"/*\", \"type\": \"we-text\", \"children\": [\"Space page not found\"] },\n        { \"path\": \"/\", \"type\": \"we-text\", \"children\": [\"About sub-page\"] },\n        { \"path\": \"/posts\", \"type\": \"Column\", \"children\": [{ \"type\": \"$routes\" }],\n          \"routes\": [\n            { \"path\": \"/*\", \"type\": \"we-text\", \"children\": [\"Post not found\"] },\n            { \"path\": \"/\", \"type\": \"we-text\", \"children\": [\"No posts selected\"] },\n            { \"path\": \"/1\", \"type\": \"we-text\", \"children\": [\"Post 1 page\"] }\n          ]\n        }\n      ]\n    }\n  ]\n}\n\n---\n\n## Rules & Best Practices\n\n- Always use the correct prop names and value types for each component.\n- Never use null as a value in any children array. Only use valid schema nodes or strings.\n- Each item in a children array must be either a valid schema node object or a string.\n- Use design tokens for spacing, color, radius, etc. (do not use raw CSS except in styles).\n- Use the styles prop for custom inline CSS (e.g., { \"width\": \"100px\" }).\n- Use hoverProps for hover state overrides, activeProps for pressed state, focusProps for focus state. Supported on @we/primitives (we-text, we-button, etc.) and layout components (Column, Row).\n- Use dynamic logic tokens ($store, $if, $action, etc.) for reactivity and conditional behavior.\n- Nest components using children or slots as needed.\n- For routes, use the routes array with path and child nodes.\n- Do not invent new components or props — use only those listed in the component registry.\n- Do not set props to their default/inherited values — omit them. fontSize and fontWeight inherit from parents (~16px / normal), so only set them when you need a different value.\n- Omit empty `props` and `children` — both are optional. Do not write `props: {}` or `children: []`.\n- Do not use `as const` on schema node `type` fields — `SchemaNode.type` is `string`, so it is never needed.\n- For icon-only buttons, nest a `we-icon` child inside `we-button` rather than using a `text` prop with a Unicode character. **Omit the `size` prop on `we-icon` when nesting inside sized primitives** (`we-button`, `we-input`, `we-badge`, `we-textarea`) — these components auto-size nested icons via `--we-context-icon-size` (xs→12px, sm→16px, md→24px, lg→32px, xl→40px). Only set an explicit icon `size` if you need to override the automatic sizing. Example: `{ type: 'we-button', props: { variant: 'ghost', size: 'sm' }, children: [{ type: 'we-icon', props: { name: 'x' } }] }`.\n- NEVER pass a bare number like \"16\" as a size or dimension prop — it is not valid CSS. Always check the component's declared prop type: if it's a string union, use one of the listed values; if it accepts arbitrary strings, include a CSS unit (e.g. \"16px\", \"2rem\").\n- For interactive list items and selectable options, use `we-button` with variant switching (e.g., `secondary` when selected, `ghost` when not) instead of manually styling `Row` with cursor, bg, and onClick. Buttons provide hover, focus, and active states for free.\n- For card-like layouts, compose from `Column` with DS props (bg, r, border, p, gap). This gives full control over spacing and appearance.\n- When rendering lists of similar items (posts, cards, users, etc.), ALWAYS use `$each` with a single template child — never duplicate the same node structure multiple times. Use literal arrays in `items` for static data, or `$store`/`$query` for dynamic data.\n\n### Icon Names (Phosphor Icons)\n\nwe-icon uses **Phosphor Icons** (v2.1). Do NOT use Heroicons, Material, or FontAwesome names.\nPhosphor names are lowercase-kebab-case. The `weight` prop controls style: \"regular\" (default), \"bold\", \"fill\", \"light\", \"thin\", \"duotone\".\n\nCommon Phosphor icon names (use these, NOT Heroicons equivalents):\n- Navigation: house, arrow-left, arrow-right, caret-left, caret-right, caret-down, caret-up, arrows-clockwise\n- Actions: plus, minus, x, check, pencil-simple, trash, copy, download, upload, share, link, magnifying-glass, funnel, sliders-horizontal\n- Communication: chat-circle, chat-dots, envelope-simple, paper-plane-tilt, bell, megaphone\n- Social: heart, thumbs-up, thumbs-down, star, share-network, users, user, user-plus\n- Media: image, camera, play, pause, stop, microphone, speaker-high, video-camera\n- Files: file, file-text, folder, folder-open, clipboard-text, note\n- UI: list, squares-four, gear, dots-three, dots-three-vertical, warning, info, question, check-circle, x-circle, eye, eye-slash\n- Misc: lightning, rocket, globe, map-pin, calendar, clock, tag, bookmark, flag, lock, shield-check\n\nWRONG icon names (Heroicons/Material — do NOT use):\n- \"chat-bubble-left\" → use \"chat-circle\"\n- \"chevron-right\" → use \"caret-right\"\n- \"cog\" / \"settings\" → use \"gear\"\n- \"trash-can\" → use \"trash\"\n- \"magnifying-glass-circle\" → use \"magnifying-glass\"\n- \"home\" → use \"house\"\n- \"favorite\" → use \"heart\"\n- \"delete\" → use \"trash\"\n- \"search\" → use \"magnifying-glass\"\n- \"close\" → use \"x\"\n- \"menu\" → use \"list\"\n- All schemas must be valid JSON with property names and string values in double quotes.\n- The meta property at the root is required: { \"meta\": { \"name\": \"...\", \"description\": \"...\", \"icon\": \"...\" } }\n- Always set `bg: 'neutral-50'` on root-level schema nodes (templates, pages). This ensures proper background in all themes — without it, dark mode renders white backgrounds.\n\nMost @we/primitives inherit all Design System Props documented above (layout, visual, flex, typography, state).\nSome layout-only primitives (we-avatar, we-icon, we-image, we-spinner, etc.) only accept Layout props — see the Design System Props section for the full list.\n\nNative HTML elements (lowercase tags render directly without registry entries):\n- Layout: div, section, article, aside, main, nav, header, footer\n- Text: p, span, h1-h6, pre, code, blockquote\n- Lists: ul, ol, li\n- Forms: form, input, button, label, select, textarea\n- Media: img, video, audio, canvas, figure, figcaption\n- Other: a, table, tr, td, th, details, summary, dialog\n\n## Schema Validation\n\nRun `we-validate-schemas` (or `node packages/schema-system/shared/dist/cli/we-validate-schemas.js`) from the monorepo root to validate all `.schema.ts` files.\nFor a specific file: `we-validate-schemas packages/app-framework/src/shared/schemas/MyTemplate.schema.ts`\n\nAfter creating or modifying a `.schema.ts` file, always run validation to catch:\n- Unknown component types (typos, missing registry entries)\n- Invalid or misspelled props (with \"did you mean?\" suggestions)\n- Prop type mismatches (e.g., number where string expected)\n- Missing required `meta` field on root TemplateSchema nodes\n- `$routes` outlet without a `routes` array on an ancestor\n- Orphan `$local` / `$setLocal` references without a `$localState` ancestor\n- DS layer consistency (mixing props from layers the component doesn't support)";
diff --git a/packages/app-framework/src/frameworks/solid/stores/SpaceStore.tsx b/packages/app-framework/src/frameworks/solid/stores/SpaceStore.tsx
index 75732b33..1b4af44e 100644
--- a/packages/app-framework/src/frameworks/solid/stores/SpaceStore.tsx
+++ b/packages/app-framework/src/frameworks/solid/stores/SpaceStore.tsx
@@ -1,7 +1,7 @@
 import { parseLit } from '@coasys/ad4m';
 import type { AgentProfileSummary } from '@shared/agentHelpers';
 import { getModelForPerspective, registerModel } from '@shared/registries/modelRegistry';
-import { moduleRegistry } from '@shared/registries/moduleRegistry';
+import { moduleRegistry, moduleStores } from '@shared/registries/moduleRegistry';
 import { ensureModelRegistered, SPACE_MODELS } from '@shared/sdnaModels';
 import { type LocationData, removeSpaceFromParent, spaceSelfWhere, syncSpaceToParent } from '@shared/syncHelpers';
 import { deriveSlug } from '@shared/utils';
@@ -54,6 +54,8 @@ export interface SpaceStore {
   enabledModules: Accessor<string[]>;
   /** Registered modules paired with whether this space has them on — the settings list. */
   moduleSettings: Accessor<{ id: string; name: string; description: string; icon: string; enabled: boolean }[]>;
+  /** Launchers for the modules enabled here — what the module rail renders. */
+  moduleLaunchers: Accessor<{ id: string; icon: string; label: string; active: boolean }[]>;
 
   // Actions
   createPost: (json: unknown) => Promise<void>;
@@ -64,6 +66,7 @@ export interface SpaceStore {
   setSpaceDefaultTemplate: (templateId: string) => Promise<void>;
   setSpaceDefaultTheme: (themeId: string) => Promise<void>;
   setModuleEnabled: (moduleId: string, enabled: boolean) => Promise<void>;
+  launchModule: (moduleId: string) => void;
   createSignalType: (config: Partial<SignalType>) => Promise<void>;
   upsertSignal: (nodeId: string, signalTypeId: string, value: number) => Promise<void>;
   navigateToSpace: (spaceId: string, view?: string) => Promise<void>;
@@ -348,6 +351,54 @@ export function SpaceStoreProvider(props: ParentProps) {
     }));
   });
 
+  /**
+   * What the module rail renders: one entry per enabled module that declares a launcher.
+   *
+   * Reads `moduleStores` so `active` tracks the module's own state — the notes tab highlights while
+   * its panel is open. A module with no `activeWhen` (a call, which starts rather than toggles) is
+   * simply never highlighted.
+   */
+  /** Read a boolean off a module's own store, unwrapping the accessor a module store exposes. */
+  const read = (moduleId: string, key: string | undefined, fallback: boolean): boolean => {
+    if (!key) return fallback;
+    const value = (moduleStores[moduleId] as Record<string, unknown> | undefined)?.[key];
+    return typeof value === 'function' ? Boolean((value as () => unknown)()) : Boolean(value);
+  };
+
+  const moduleLaunchers = createMemo(() => {
+    const on = new Set(enabledModules());
+    return moduleRegistry
+      .all()
+      .filter(({ definition }) => definition.launcher && on.has(definition.id))
+      .filter(({ definition }) => read(definition.id, definition.launcher!.availableWhen, true))
+      .map(({ definition }) => {
+        const launcher = definition.launcher!;
+        return {
+          id: definition.id,
+          icon: launcher.icon,
+          label: launcher.label,
+          active: read(definition.id, launcher.activeWhen, false),
+        };
+      });
+  });
+
+  /**
+   * Invoke a module's launcher.
+   *
+   * Here rather than in the schema because `$action` resolves a *literal* path, so a rail iterating
+   * over modules cannot build `modules.<id>.<method>` per entry. The rail passes the id instead and
+   * this dereferences it.
+   */
+  function launchModule(moduleId: string) {
+    const definition = moduleRegistry.get(moduleId)?.definition;
+    const action = definition?.launcher?.action;
+    if (!action) return;
+    const store = moduleStores[moduleId] as Record<string, unknown> | undefined;
+    const fn = store?.[action];
+    if (typeof fn === 'function') (fn as () => void)();
+    else console.warn(`module "${moduleId}" declares launcher action "${action}" but its store has no such method`);
+  }
+
   async function setModuleEnabled(moduleId: string, enabled: boolean) {
     const space = currentSpace();
     if (!space) return;
@@ -564,6 +615,7 @@ export function SpaceStoreProvider(props: ParentProps) {
     currentSpace,
     enabledModules,
     moduleSettings,
+    moduleLaunchers,
     foreignSpacePrefill,
 
     // Actions
@@ -575,6 +627,7 @@ export function SpaceStoreProvider(props: ParentProps) {
     setSpaceDefaultTemplate,
     setSpaceDefaultTheme,
     setModuleEnabled,
+    launchModule,
     createSignalType,
     upsertSignal,
     navigateToSpace,
diff --git a/packages/app-framework/src/shared/registries/slotRegistry.ts b/packages/app-framework/src/shared/registries/slotRegistry.ts
index 9f38453e..e9036760 100644
--- a/packages/app-framework/src/shared/registries/slotRegistry.ts
+++ b/packages/app-framework/src/shared/registries/slotRegistry.ts
@@ -28,6 +28,7 @@
 import type { SchemaNode, SlotAnchor, SlotContribution } from '@we/schema-shared';
 
 import { bootScreen } from '../schemas/shell/BootScreen.schema';
+import { moduleRail } from '../schemas/shell/ModuleRail.schema';
 import { sidebar } from '../schemas/shell/Sidebar.schema';
 import { templateEditor } from '../schemas/shell/TemplateEditor.schema';
 
@@ -100,6 +101,9 @@ export function registerCoreSlots(): void {
   slotRegistry.register({ id: 'core:bootScreen', anchor: 'overlay', node: bootScreen, order: 0 });
   slotRegistry.register({ id: 'core:sidebar', anchor: 'dock-left', node: sidebar, order: 0 });
   slotRegistry.register({ id: 'core:templateEditor', anchor: 'dock-right', node: templateEditor, order: 0 });
+  // The one place feature modules are opened from. Core rather than a module contribution, because
+  // only the host can stop launchers colliding — see ModuleRail.schema.ts.
+  slotRegistry.register({ id: 'core:moduleRail', anchor: 'dock-right', node: moduleRail, order: 10 });
 }
 
 registerCoreSlots();
diff --git a/packages/app-framework/src/shared/schemas/shell/ModuleRail.schema.ts b/packages/app-framework/src/shared/schemas/shell/ModuleRail.schema.ts
new file mode 100644
index 00000000..4a4eca2e
--- /dev/null
+++ b/packages/app-framework/src/shared/schemas/shell/ModuleRail.schema.ts
@@ -0,0 +1,89 @@
+/**
+ * The module rail — one place every feature module is opened from.
+ *
+ * ## Why the host owns this
+ *
+ * The first two modules to need an entry point each invented their own: notes put a tab at the right
+ * edge, calls put a pill in a corner. Both worked in isolation and looked like an accident together,
+ * and a third module would have made it three. A module knows what its launcher *means*; only the
+ * host knows where launchers go and can keep them from colliding.
+ *
+ * So a module declares `launcher: { icon, label, action }` and contributes no chrome for it. This
+ * renders them all, in registration order with the same id tiebreak the slot registry uses, so the
+ * rail cannot reshuffle depending on which module loaded first.
+ *
+ * ## Why the right edge
+ *
+ * It is the emptiest edge in WE's layout: the sidebar owns the left, the header owns the top, and the
+ * call bar owns the bottom centre. Docked module panels open beside it (`right: 48px`), so the rail
+ * stays reachable while a panel is open rather than being covered by it.
+ *
+ * ## Only inside a space
+ *
+ * Module enablement is per-space, so outside one there is nothing to list — and `moduleLaunchers`
+ * would be showing whatever the last space happened to enable.
+ */
+import type { SchemaNode } from '@we/schema-shared';
+
+/** The width every docked module panel should clear. Exported so panels stay in step with the rail. */
+export const MODULE_RAIL_WIDTH = '48px';
+
+export const moduleRail: SchemaNode = {
+  type: '$if',
+  props: {
+    condition: { $store: 'adamStore.currentPerspective' },
+    then: {
+      type: '$if',
+      props: {
+        // No modules enabled here means no rail at all, rather than an empty strip of chrome.
+        condition: { $count: { items: { $store: 'spaceStore.moduleLaunchers' } } },
+        then: {
+          type: 'Column',
+          props: {
+            position: 'fixed',
+            right: '0px',
+            top: '96px',
+            width: MODULE_RAIL_WIDTH,
+            gap: '100',
+            p: '100',
+            ay: 'center',
+            bg: 'neutral-0',
+            border: '1px solid neutral-200',
+            rtl: '400',
+            rbl: '400',
+            shadow: 'md',
+            zIndex: 'sticky',
+          },
+          children: [
+            {
+              type: '$each',
+              props: { items: { $store: 'spaceStore.moduleLaunchers' }, as: 'mod' },
+              children: [
+                {
+                  type: 'we-tooltip',
+                  props: { title: '$mod.label', placement: 'left' },
+                  children: [
+                    {
+                      type: 'we-button',
+                      props: {
+                        size: 'sm',
+                        square: true,
+                        // Highlighted while the module reports itself open, which is what makes the
+                        // rail read as a set of tabs rather than a row of buttons.
+                        variant: { $if: { condition: '$mod.active', then: 'secondary', else: 'ghost' } },
+                        // The id is passed rather than a path: `$action` resolves a literal string, so
+                        // a rail iterating over modules cannot build `modules.<id>.<method>` itself.
+                        onClick: { $action: 'spaceStore.launchModule', args: ['$mod.id'] },
+                      },
+                      children: [{ type: 'we-icon', props: { name: '$mod.icon' } }],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      },
+    },
+  },
+};
diff --git a/packages/app-framework/tests/callModule.test.ts b/packages/app-framework/tests/callModule.test.ts
index 13c99ae9..d16ad439 100644
--- a/packages/app-framework/tests/callModule.test.ts
+++ b/packages/app-framework/tests/callModule.test.ts
@@ -71,13 +71,25 @@ describe('call module — contributions', () => {
 
   it('is reachable without any template cooperating', () => {
     // The same bug the notes module shipped one PR ago: chrome that only renders once somebody is
-    // already using the feature leaves no way to start using it. The bar's not-in-a-call branch has
-    // to offer "Start call" when nobody is in one, or the first participant can never exist.
+    // already using the feature leaves no way to start using it. Both modules first solved it by
+    // drawing their own floating button, in different corners — so the entry point is now declared
+    // and the host's rail draws it.
+    expect(callModule.launcher).toEqual({
+      icon: 'phone-call',
+      label: 'Start call',
+      action: 'joinSpaceCall',
+      availableWhen: 'canCall',
+    });
+  });
+
+  it('names a launcher action its own store actually has', () => {
+    // The declaration is a string, so nothing but a test connects it to the method. Getting it wrong
+    // would produce a rail tab that silently does nothing — the `$action` depth bug again, one layer up.
     moduleRegistry.register(callModule, host, storeDeps);
-    const gate = slotRegistry.get('call:0')?.node as { props?: { then?: unknown } };
-    const bar = gate.props?.then as { props?: { else?: { props?: { else?: unknown } } } };
+    const store = moduleStores.call as Record<string, unknown>;
 
-    expect(bar.props?.else?.props?.else).toBeDefined();
+    expect(typeof store[callModule.launcher!.action]).toBe('function');
+    expect(typeof store[callModule.launcher!.availableWhen!]).toBe('function');
   });
 
   it('exposes a launcher a template can place on any node', () => {
diff --git a/packages/app-framework/tests/moduleRegistry.test.ts b/packages/app-framework/tests/moduleRegistry.test.ts
index 4788f19e..977ffa8e 100644
--- a/packages/app-framework/tests/moduleRegistry.test.ts
+++ b/packages/app-framework/tests/moduleRegistry.test.ts
@@ -38,9 +38,18 @@ function mod(overrides: Partial<ModuleDefinition> = {}): ModuleDefinition {
 beforeEach(reset);
 
 describe('slotRegistry — faithful generalisation of shellRegistry', () => {
-  it('renders the three host slots in the order the old hardcoded array produced', () => {
+  it('renders the original three host slots in the order the old hardcoded array produced', () => {
     // Was: [shellRegistry.bootScreen, shellRegistry.sidebar, shellRegistry.templateEditor]
-    expect(slotRegistry.ordered().map((e) => e.id)).toEqual(['core:bootScreen', 'core:sidebar', 'core:templateEditor']);
+    //
+    // `core:moduleRail` was added afterwards and sorts last, so the original three keep their exact
+    // relative order — which is the property this test exists to protect. Asserted as a prefix rather
+    // than the whole list so adding host chrome stays possible without weakening it.
+    expect(
+      slotRegistry
+        .ordered()
+        .map((e) => e.id)
+        .slice(0, 3),
+    ).toEqual(['core:bootScreen', 'core:sidebar', 'core:templateEditor']);
   });
 
   it('keeps host chrome first when a module contributes to a later anchor', () => {
@@ -49,6 +58,7 @@ describe('slotRegistry — faithful generalisation of shellRegistry', () => {
       'core:bootScreen',
       'core:sidebar',
       'core:templateEditor',
+      'core:moduleRail',
       'call',
     ]);
   });
diff --git a/packages/app-framework/tests/notesModule.test.ts b/packages/app-framework/tests/notesModule.test.ts
index c148ebe5..4d1748d7 100644
--- a/packages/app-framework/tests/notesModule.test.ts
+++ b/packages/app-framework/tests/notesModule.test.ts
@@ -21,12 +21,6 @@ const storeDeps = {
   },
 };
 
-/** Strip the `$if` on `spaceStore.enabledModules` that `moduleRegistry` wraps module chrome in. */
-function unwrapGate(node: unknown): unknown {
-  const n = node as { type?: string; props?: { then?: unknown } } | undefined;
-  return n?.type === '$if' && n.props?.then ? n.props.then : node;
-}
-
 beforeEach(() => {
   for (const entry of slotRegistry.ordered()) slotRegistry.remove(entry.id);
   for (const { definition } of moduleRegistry.all()) moduleRegistry.unregister(definition.id);
@@ -68,12 +62,20 @@ describe('notes module — contributions', () => {
 
   it('is reachable without any template cooperating', () => {
     // The module shipped once with only the expanded panel plus a `toggleButton` fragment nothing
-    // placed — so it registered successfully and was invisible. Chrome gated on state nothing can
-    // change is not chrome, so the slot renders a launcher in the closed case.
+    // placed — so it registered successfully and was invisible. It first grew its own launcher tab;
+    // when the call module needed the same thing and drew it somewhere else, the entry point became
+    // a declaration the host's module rail renders.
+    expect(notesModule.launcher).toEqual({ icon: 'note', label: 'Notes', action: 'toggle', activeWhen: 'open' });
+  });
+
+  it('names launcher members its own store actually has', () => {
+    // The declaration is a string, so nothing but a test connects it to the store. A typo would give
+    // a rail tab that silently does nothing.
     moduleRegistry.register(notesModule, host, storeDeps);
-    // Unwrap the per-space enablement gate the registry wraps every module slot in.
-    const node = unwrapGate(slotRegistry.get('notes:0')?.node) as { props?: { else?: unknown } };
-    expect(node.props?.else).toBeDefined();
+    const store = moduleStores.notes as Record<string, unknown>;
+
+    expect(typeof store[notesModule.launcher!.action]).toBe('function');
+    expect(typeof store[notesModule.launcher!.activeWhen!]).toBe('function');
   });
 
   it('keeps panel state in the store, not node-local state', () => {
diff --git a/packages/modules/call/src/index.ts b/packages/modules/call/src/index.ts
index 6dc8c3e0..b21f530e 100644
--- a/packages/modules/call/src/index.ts
+++ b/packages/modules/call/src/index.ts
@@ -37,11 +37,14 @@ const tile: SchemaNode = {
   type: 'Column',
   props: {
     position: 'relative',
-    bg: 'neutral-900',
+    // Low-numbered, so it stays a recessed surface under both themes — see the note on `stage`.
+    bg: 'neutral-100',
     r: '400',
     overflow: 'hidden',
-    minWidth: '160px',
-    flex: '1',
+    // Grow to share the row, but never below a size where a face is unreadable.
+    flex: '1 1 240px',
+    minWidth: '200px',
+    height: '180px',
     ax: 'center',
     ay: 'center',
   },
@@ -117,25 +120,41 @@ const tile: SchemaNode = {
   ],
 };
 
-/** The expanded stage — every participant, above the bar. */
+/**
+ * The expanded stage — every participant, above the bar.
+ *
+ * A `Row` that wraps, not a `Grid`. `Grid`'s `minChildWidth` compiles to
+ * `repeat(auto-fill, minmax(…, 1fr))`, and `auto-fill` keeps empty tracks — so a one-person call drew
+ * a small tile on the left and a wide band of nothing to its right. Wrapping flex items with
+ * `flex: 1 1 240px` grow to fill the row instead, at every participant count.
+ *
+ * Colours are theme-relative, and that matters more than it looks. Dark themes invert the neutral
+ * scale (`multiplier: -1`), so `neutral-1000` is black in the light theme and near-white in the dark
+ * one — which is exactly how this shipped as a white stage. There is no "always dark" neutral; a
+ * surface that must follow the theme has to use the same low-numbered tokens as the rest of the app.
+ */
 const stage: SchemaNode = {
   type: '$if',
   props: {
     condition: { $and: [{ $store: 'modules.call.active' }, { $store: 'modules.call.expanded' }] },
     then: {
-      type: 'Grid',
+      type: 'Row',
       props: {
         position: 'fixed',
-        bottom: '900',
-        left: '400',
-        right: '400',
-        height: '40vh',
-        minChildWidth: '220px',
+        bottom: '80px',
+        left: '16px',
+        right: '16px',
+        maxHeight: '46vh',
+        wrap: true,
         gap: '300',
         p: '300',
-        bg: 'neutral-1000',
+        ax: 'center',
+        ay: 'center',
+        bg: 'neutral-0',
+        border: '1px solid neutral-200',
         r: '500',
         shadow: 'xl',
+        overflow: 'auto',
         zIndex: 'sticky',
       },
       children: [{ type: '$each', props: { items: { $store: 'modules.call.tiles' }, as: 'tile' }, children: [tile] }],
@@ -168,50 +187,18 @@ const bar: SchemaNode = {
     condition: { $store: 'modules.call.active' },
 
     // ── Not in a call ────────────────────────────────────────────────────────
-    // Two sub-cases: somebody else is in a call (join it), or nobody is (start one).
-    //
-    // The second case was very nearly omitted, on the reasoning that starting a call belongs on a
-    // deliberate affordance rather than persistent furniture — which shipped the notes module
-    // installed, registered and invisible one PR ago. `startCallButton` is exported for templates
-    // that want the trigger somewhere of their own choosing; this is the fallback that guarantees
-    // the module is usable without one.
+    // Shown only when somebody else is in one, offering to join. *Starting* a call is the module
+    // rail's job now — it was a floating pill here, which is what made the launcher inconsistency
+    // visible in the first place.
     else: {
       type: '$if',
       props: {
         condition: { $count: { items: { $store: 'modules.call.ongoing' } } },
-
-        // Nobody in a call yet. Only offered in a shared space — a personal space has no
-        // neighbourhood, so there is nobody to call and the answer would never change.
-        else: {
-          type: '$if',
-          props: {
-            condition: { $store: 'modules.call.canCall' },
-            then: {
-              type: 'we-button',
-              props: {
-                variant: 'secondary',
-                size: 'sm',
-                position: 'fixed',
-                bottom: '400',
-                right: '400',
-                r: 'pill',
-                shadow: 'lg',
-                zIndex: 'sticky',
-                onClick: { $action: 'modules.call.joinSpaceCall' },
-              },
-              children: [
-                { type: 'we-icon', props: { name: 'phone-call' } },
-                { type: 'we-text', props: { variant: 'label' }, children: ['Start call'] },
-              ],
-            },
-          },
-        },
-
         then: {
           type: 'Row',
           props: {
             position: 'fixed',
-            bottom: '400',
+            bottom: '16px',
             left: '50%',
             transform: 'translateX(-50%)',
             bg: 'neutral-0',
@@ -252,7 +239,7 @@ const bar: SchemaNode = {
       type: 'Row',
       props: {
         position: 'fixed',
-        bottom: '400',
+        bottom: '16px',
         left: '50%',
         transform: 'translateX(-50%)',
         bg: 'neutral-0',
@@ -321,7 +308,7 @@ const problem: SchemaNode = {
       type: 'Row',
       props: {
         position: 'fixed',
-        bottom: '400',
+        bottom: '16px',
         left: '50%',
         transform: 'translateX(-50%)',
         zIndex: 'sticky',
@@ -376,6 +363,12 @@ export const callModule = defineModule({
   // implements one. No `frameworks`: every piece of UI here is a fragment.
 
   schemas: { anchoredCallButton, startCallButton, tile },
+
+  // Drawn by the host's module rail. No `activeWhen`: this starts a call rather than toggling a
+  // panel, and once you are in one the call bar is the thing that shows it — a highlighted rail tab
+  // as well would be saying it twice.
+  launcher: { icon: 'phone-call', label: 'Start call', action: 'joinSpaceCall', availableWhen: 'canCall' },
+
   slots: [
     { anchor: 'dock-bottom', node: bar, order: 100 },
     { anchor: 'dock-bottom', node: stage, order: 90 },
diff --git a/packages/modules/call/src/store.ts b/packages/modules/call/src/store.ts
index f98e17ac..7d508cdf 100644
--- a/packages/modules/call/src/store.ts
+++ b/packages/modules/call/src/store.ts
@@ -70,6 +70,21 @@ export function createCallStore(deps: CallStoreDeps) {
   let remoteStreams = new Map<string, MediaStream>();
   let peerStates = new Map<string, RTCPeerConnectionState>();
 
+  /**
+   * The previous tile object per participant, reused when nothing about them changed.
+   *
+   * `$each` renders through Solid's `<For>`, which is **keyed by reference**. Rebuilding the tile
+   * list produces fresh objects, so every row unmounts and remounts — and a remounted row means a
+   * brand-new `<video>` element, which drops `srcObject` and re-attaches it. That is the flicker:
+   * every heartbeat, every connection-state change and every mute toggle tore down and rebuilt every
+   * video in the call.
+   *
+   * The codebase already hit this exact failure with `$query` results, where AD4M's prototype `id`
+   * getter defeated `reconcile({ key: 'id' })` — see the note in `SchemaRenderer`. Same cause, same
+   * symptom, and the fix is the same: keep identity stable across updates that change nothing.
+   */
+  const tileCache = new Map<string, CallTile>();
+
   const roster = (): Peer[] => {
     const id = callId();
     if (!id || !presence) return [];
@@ -85,10 +100,29 @@ export function createCallStore(deps: CallStoreDeps) {
    * tile with a null stream. Driving it from connections instead would make joiners invisible until
    * their media arrived, which reads as a broken call during the very seconds it is working.
    */
+  /** Reuse the previous object for a participant when every field still matches. */
+  function stabilise(tile: CallTile): CallTile {
+    const previous = tileCache.get(tile.id);
+    if (
+      previous &&
+      previous.stream === tile.stream &&
+      previous.isSelf === tile.isSelf &&
+      previous.isScreen === tile.isScreen &&
+      previous.audioEnabled === tile.audioEnabled &&
+      previous.videoEnabled === tile.videoEnabled &&
+      previous.connection === tile.connection
+    ) {
+      return previous;
+    }
+    tileCache.set(tile.id, tile);
+    return tile;
+  }
+
   function rebuildTiles() {
     const id = callId();
     const me = selfId?.() ?? null;
     if (!id) {
+      tileCache.clear();
       setTiles([]);
       return;
     }
@@ -97,34 +131,42 @@ export function createCallStore(deps: CallStoreDeps) {
 
     if (me) {
       const state = controller?.state();
-      next.push({
-        id: me,
-        did: me,
-        stream: controller?.displayStream() ?? null,
-        isSelf: true,
-        isScreen: state?.screenShareEnabled ?? false,
-        audioEnabled: state?.audioEnabled ?? false,
-        videoEnabled: state?.videoEnabled ?? false,
-      });
+      next.push(
+        stabilise({
+          id: me,
+          did: me,
+          stream: controller?.displayStream() ?? null,
+          isSelf: true,
+          isScreen: state?.screenShareEnabled ?? false,
+          audioEnabled: state?.audioEnabled ?? false,
+          videoEnabled: state?.videoEnabled ?? false,
+        }),
+      );
     }
 
     for (const { peer, activity } of activitiesOfType(presence?.peers() ?? [], 'call')) {
       if (activity.id !== id || peer.agentId === me) continue;
       const settings = activity.media;
-      next.push({
-        id: peer.agentId,
-        did: peer.agentId,
-        stream: remoteStreams.get(peer.agentId) ?? null,
-        isSelf: false,
-        // Read from the roster, never inferred from the track — the sender is the only one who knows
-        // whether the video it is sending is a camera or a desktop.
-        isScreen: settings?.screenShareEnabled ?? false,
-        audioEnabled: settings?.audioEnabled ?? true,
-        videoEnabled: settings?.videoEnabled ?? true,
-        connection: peerStates.get(peer.agentId),
-      });
+      next.push(
+        stabilise({
+          id: peer.agentId,
+          did: peer.agentId,
+          stream: remoteStreams.get(peer.agentId) ?? null,
+          isSelf: false,
+          // Read from the roster, never inferred from the track — the sender is the only one who
+          // knows whether the video it is sending is a camera or a desktop.
+          isScreen: settings?.screenShareEnabled ?? false,
+          audioEnabled: settings?.audioEnabled ?? true,
+          videoEnabled: settings?.videoEnabled ?? true,
+          connection: peerStates.get(peer.agentId),
+        }),
+      );
     }
 
+    // Drop anyone who left, so the cache cannot grow across a long-lived session.
+    const present = new Set(next.map((tile) => tile.id));
+    for (const key of [...tileCache.keys()]) if (!present.has(key)) tileCache.delete(key);
+
     setTiles(next);
   }
 
diff --git a/packages/modules/notes/src/index.ts b/packages/modules/notes/src/index.ts
index b4af2a9e..aaaa2268 100644
--- a/packages/modules/notes/src/index.ts
+++ b/packages/modules/notes/src/index.ts
@@ -32,33 +32,18 @@ import { Note, NOTE_PREDICATES } from './Note';
 
 export { Note, NOTE_PREDICATES };
 
-/** Collapsed state — a launcher tab, so the module is reachable without any template cooperating. */
-const launcher: SchemaNode = {
-  type: 'we-button',
-  props: {
-    variant: 'secondary',
-    size: 'sm',
-    position: 'fixed',
-    right: '0',
-    top: '120px',
-    zIndex: 'sticky',
-    rtr: '0',
-    rbr: '0',
-    onClick: { $action: 'modules.notes.toggle' },
-  },
-  children: [{ type: 'we-icon', props: { name: 'note' } }],
-};
-
 /**
- * The docked panel, with its own launcher.
+ * The docked panel.
  *
- * A module has to be reachable on its own. Shipping only the expanded panel plus a `toggleButton`
- * fragment left no entry point at all until some template chose to place that fragment — so the
- * module was installed, registered and invisible. Chrome that gates itself on state nothing can
- * change is not chrome.
+ * A module has to be reachable on its own — shipping only the expanded panel plus a `toggleButton`
+ * fragment left no entry point until some template placed it, so the module was installed, registered
+ * and invisible. That was first fixed with a launcher tab this module drew itself, at the right edge.
+ * The call module then needed the same thing and put it somewhere else, which is how a per-module
+ * launcher became visibly the wrong shape.
  *
- * `toggleButton` is still exported for templates that want the trigger somewhere of their own
- * choosing; this is the fallback that guarantees the module is usable without one.
+ * It is now declared (`launcher` below) and drawn by the host's module rail, so every module is opened
+ * the same way. `toggleButton` is still exported for templates that want the trigger somewhere of
+ * their own choosing.
  */
 const panel: SchemaNode = {
   type: '$if',
@@ -72,16 +57,13 @@ const panel: SchemaNode = {
     // for its space — and it arrives with the marketplace, alongside consent. Until then a module's
     // chrome appears in every space, which is fine while modules are first-party and bundled.
     condition: { $and: [{ $store: 'adamStore.currentPerspective' }, { $store: 'modules.notes.open' }] },
-    else: {
-      type: '$if',
-      props: { condition: { $store: 'adamStore.currentPerspective' }, then: launcher },
-    },
     then: {
       type: 'Column',
       props: {
         position: 'fixed',
-        top: '0',
-        right: '0',
+        top: '0px',
+        // Beside the module rail, not under it — the rail has to stay reachable while a panel is open.
+        right: '48px',
         width: '320px',
         height: '100%',
         bg: 'neutral-0',
@@ -199,6 +181,10 @@ export const notesModule = defineModule({
   schemas: { toggleButton },
   slots: [{ anchor: 'dock-right', node: panel, order: 100 }],
 
+  // Drawn by the host's module rail rather than by this module, so every module is opened the same
+  // way. `activeWhen` is what makes the rail tab highlight while the panel is open.
+  launcher: { icon: 'note', label: 'Notes', action: 'toggle', activeWhen: 'open' },
+
   createStore: ({ signal }: ModuleStoreDeps) => {
     const [open, setOpen] = signal(false);
     return {
diff --git a/packages/schema-system/shared/src/module.ts b/packages/schema-system/shared/src/module.ts
index ed252f16..f55af6f8 100644
--- a/packages/schema-system/shared/src/module.ts
+++ b/packages/schema-system/shared/src/module.ts
@@ -99,6 +99,16 @@ export interface ModuleDefinition {
   /** Persistent chrome. Rendered by the host outside the router, so it survives navigation. */
   slots?: SlotContribution[];
 
+  /**
+   * How this module is opened, rendered by the host into one shared rail.
+   *
+   * Declared rather than contributed as chrome, because the first two modules to need an entry point
+   * each invented their own floating button in a different corner, and a third would have made three.
+   * A module knows what its launcher *means*; only the host knows where launchers go, and it is the
+   * host that has to keep them from colliding.
+   */
+  launcher?: ModuleLauncher;
+
   /**
    * Durable entity types this module owns, installed by the host into the relevant dataset.
    *
@@ -192,6 +202,36 @@ export interface ModuleStoreDeps {
   presence?: ModulePresenceAccess;
 }
 
+/** A module's entry point in the host's module rail. */
+export interface ModuleLauncher {
+  /** Icon name, resolved by the host's icon set. */
+  icon: string;
+  /** Shown on hover, and read by assistive tech — the rail itself is icon-only. */
+  label: string;
+  /**
+   * The method on this module's own store to call, named without the `modules.<id>.` prefix.
+   *
+   * A bare method name rather than a full `$action` path because the host invokes it: `$action` takes
+   * a literal string, so a rail iterating over modules could not build one per entry.
+   */
+  action: string;
+  /**
+   * A store key the host reads to show the launcher as active. Optional — a module whose launcher
+   * starts something (a call) rather than toggling something (a panel) has no such state.
+   */
+  activeWhen?: string;
+
+  /**
+   * A store key the host reads to decide whether to offer the launcher at all. Omit to always offer.
+   *
+   * For the case where a module is correctly enabled but cannot work *here*: calls need a
+   * neighbourhood, so in a personal space there is nobody to call. Offering the button and explaining
+   * the failure afterwards is worse than not offering it, because the answer never changes — it is a
+   * property of the space, not a failure.
+   */
+  availableWhen?: string;
+}
+
 /** The slice of presence a feature module may touch. */
 export interface ModulePresenceAccess {
   /** Peers in the current dataset, liveness-derived. */

From 939082fc23755d9f4e545dcdf435670af7eb3343 Mon Sep 17 00:00:00 2001
From: jhweir <james@weco.io>
Date: Sat, 1 Aug 2026 21:00:57 +0100
Subject: [PATCH 10/12] fix(modules): stop a mute from blanking the video, and
 let tiles fill the stage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**The mute flash.** The earlier fix kept tile objects stable only when *nothing*
changed, which meant a mute still minted a new object — and `$each` renders
through a reference-keyed `<For>`, so the row remounted and its `<video>` was
rebuilt, dropping and re-attaching `srcObject`.

Identity and volatile state are now separate. A tile carries `id`/`did`/`isSelf`/
`stream` and changes only when one of those does, both of which genuinely need a
remount. Flags live in `tileStates` and a fragment reaches them with `$find` over
a `$store`, which resolves inside the renderer's prop memo — so reading the signal
registers a dependency and the badge updates while the row stays put.

Context refs cannot do this: the dispatcher walks them with a plain `current?.[p]`
and never invokes accessors, so a signal on the tile would resolve to the function
itself. `$store` is the only reactive path into a row.

**The 240px cap** was a hardcoded `height` on the tile. Tiles now stretch
(`ay: 'stretch'` plus `alignSelf`), so they take the stage's full height.

**Back to the top.** The stage was at the top originally only because `bottom:
'900'` is not a CSS length and the offset was dropped — but that accident read
better, so it is now deliberate, offset to clear the module rail.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../app-framework/tests/callModule.test.ts    | 18 +++++
 packages/modules/call/src/index.ts            | 63 +++++++++++-----
 packages/modules/call/src/store.ts            | 73 +++++++++++--------
 3 files changed, 107 insertions(+), 47 deletions(-)

diff --git a/packages/app-framework/tests/callModule.test.ts b/packages/app-framework/tests/callModule.test.ts
index d16ad439..7ba1a22d 100644
--- a/packages/app-framework/tests/callModule.test.ts
+++ b/packages/app-framework/tests/callModule.test.ts
@@ -92,6 +92,24 @@ describe('call module — contributions', () => {
     expect(typeof store[callModule.launcher!.availableWhen!]).toBe('function');
   });
 
+  it('keeps volatile state off the tile, so a mute cannot remount the video', () => {
+    // `$each` renders through a reference-keyed `<For>`, so any change to a tile object remounts that
+    // row — and a remounted row builds a new `<video>`, dropping and re-attaching `srcObject`. Muting
+    // your microphone blanked your own video.
+    //
+    // Volatile flags are therefore looked up with `$find` over `modules.call.tileStates` rather than
+    // read off `$tile`. Asserted on the serialised fragment because nothing else would catch someone
+    // reasonably "simplifying" a `$find` back into a context ref.
+    const tile = JSON.stringify(moduleRegistry.schemas()['call.tile'] ?? callModule.schemas?.tile);
+
+    for (const volatile of ['audioEnabled', 'videoEnabled', 'isScreen', 'connection']) {
+      expect(tile).not.toContain(`$tile.${volatile}`);
+      expect(tile).toContain(`"select":"${volatile}"`);
+    }
+    // Identity and stream stay on the tile: both genuinely require a remount when they change.
+    expect(tile).toContain('$tile.stream');
+  });
+
   it('exposes a launcher a template can place on any node', () => {
     moduleRegistry.register(callModule, host, storeDeps);
     // Anchored calls need a per-node trigger, and only a template knows what a node is.
diff --git a/packages/modules/call/src/index.ts b/packages/modules/call/src/index.ts
index b21f530e..19310d8a 100644
--- a/packages/modules/call/src/index.ts
+++ b/packages/modules/call/src/index.ts
@@ -32,6 +32,20 @@ export { createMediaController, type MediaController, type MediaState } from './
 export { anchoredCallId, CALL_PROTOCOL_VERSION, parseCallMessage, spaceCallId } from './protocol';
 export { createCallStore, type CallTile } from './store';
 
+/**
+ * A participant's volatile flag, looked up rather than read off the tile.
+ *
+ * The tile object carries only identity and stream, because `$each` renders through a
+ * reference-keyed `<For>` and any change to the item remounts the row — taking the `<video>` with it.
+ * Muting your microphone blanked your own video for exactly that reason.
+ *
+ * `$find` over a `$store` resolves inside the renderer's prop memo, so reading the signal registers a
+ * dependency and the prop updates on its own. The row never remounts; only the badge changes.
+ */
+const stateOf = (field: string) => ({
+  $find: { items: { $store: 'modules.call.tileStates' }, where: { id: '$tile.id' }, select: field },
+});
+
 /** One participant's video, or their avatar when there is nothing to show. */
 const tile: SchemaNode = {
   type: 'Column',
@@ -41,10 +55,12 @@ const tile: SchemaNode = {
     bg: 'neutral-100',
     r: '400',
     overflow: 'hidden',
-    // Grow to share the row, but never below a size where a face is unreadable.
-    flex: '1 1 240px',
-    minWidth: '200px',
-    height: '180px',
+    // Grow to share the row, and stretch to the stage's full height rather than being capped at a
+    // fixed one — a hardcoded height was what made the video small regardless of available space.
+    flex: '1 1 280px',
+    minWidth: '220px',
+    minHeight: '160px',
+    alignSelf: 'stretch',
     ax: 'center',
     ay: 'center',
   },
@@ -54,7 +70,7 @@ const tile: SchemaNode = {
       props: {
         // A tile with no stream yet is normal for the first second or two of a join, and a peer with
         // their camera off never gets one at all. Both show the avatar rather than a black rectangle.
-        condition: { $and: ['$tile.stream', { $or: ['$tile.videoEnabled', '$tile.isScreen'] }] },
+        condition: { $and: ['$tile.stream', { $or: [stateOf('videoEnabled'), stateOf('isScreen')] }] },
         then: {
           type: 'we-video',
           props: {
@@ -68,12 +84,15 @@ const tile: SchemaNode = {
             height: '100%',
             // A desktop cropped to fill a camera-shaped tile is unreadable — `contain` letterboxes it
             // instead. Driven by the roster, because only the sender knows which it is sending.
-            fit: { $if: { condition: '$tile.isScreen', then: 'contain', else: 'cover' } },
+            fit: { $if: { condition: stateOf('isScreen'), then: 'contain', else: 'cover' } },
           },
         },
         else: {
+          // `hash` gives every participant a distinct generated avatar from their DID. Profiles are
+          // not reachable from here — presence carries `agentId` only, and joining it to a profile is
+          // the host's job — so this is what there is until an identities port is lent to modules.
           type: 'we-avatar',
-          props: { image: '$tile.avatar', initials: '$tile.name', size: 'lg' },
+          props: { image: '$tile.avatar', hash: '$tile.did', initials: '$tile.name', size: 'lg' },
         },
       },
     },
@@ -84,7 +103,7 @@ const tile: SchemaNode = {
         {
           type: '$if',
           props: {
-            condition: { $not: '$tile.audioEnabled' },
+            condition: { $not: stateOf('audioEnabled') },
             then: {
               type: 'we-badge',
               props: { variant: 'neutral', size: 'xs' },
@@ -95,7 +114,7 @@ const tile: SchemaNode = {
         {
           type: '$if',
           props: {
-            condition: '$tile.isScreen',
+            condition: stateOf('isScreen'),
             then: {
               type: 'we-badge',
               props: { variant: 'primary', size: 'xs' },
@@ -107,11 +126,11 @@ const tile: SchemaNode = {
           // Reconnecting is worth saying out loud — silence looks identical to a frozen call.
           type: '$if',
           props: {
-            condition: { $in: ['$tile.connection', ['connecting', 'disconnected', 'failed']] },
+            condition: { $in: [stateOf('connection'), ['connecting', 'disconnected', 'failed']] },
             then: {
               type: 'we-badge',
               props: { variant: 'warning', size: 'xs' },
-              children: ['$tile.connection'],
+              children: [stateOf('connection')],
             },
           },
         },
@@ -121,12 +140,18 @@ const tile: SchemaNode = {
 };
 
 /**
- * The expanded stage — every participant, above the bar.
+ * The expanded stage — every participant, at the top of the screen.
+ *
+ * **Top, not bottom.** It first appeared at the top by accident: `bottom: '900'` is not a CSS length,
+ * so the offset was dropped and `position: fixed` fell back to the static position. That accident read
+ * better than the deliberate version — video belongs where your eyes already are, and the controls
+ * belong out of the way — so it is now the actual layout.
  *
  * A `Row` that wraps, not a `Grid`. `Grid`'s `minChildWidth` compiles to
  * `repeat(auto-fill, minmax(…, 1fr))`, and `auto-fill` keeps empty tracks — so a one-person call drew
- * a small tile on the left and a wide band of nothing to its right. Wrapping flex items with
- * `flex: 1 1 240px` grow to fill the row instead, at every participant count.
+ * a small tile on the left and a wide band of nothing to its right. Wrapping flex items grow to fill
+ * the row instead, at every participant count, and `ay: stretch` lets them take the stage's full
+ * height rather than a hardcoded one.
  *
  * Colours are theme-relative, and that matters more than it looks. Dark themes invert the neutral
  * scale (`multiplier: -1`), so `neutral-1000` is black in the light theme and near-white in the dark
@@ -141,15 +166,17 @@ const stage: SchemaNode = {
       type: 'Row',
       props: {
         position: 'fixed',
-        bottom: '80px',
+        top: '72px',
         left: '16px',
-        right: '16px',
-        maxHeight: '46vh',
+        // Clears the module rail on the right edge, which is 48px wide plus a margin.
+        right: '72px',
+        height: '38vh',
         wrap: true,
         gap: '300',
         p: '300',
         ax: 'center',
-        ay: 'center',
+        // Stretch, so a tile fills the stage's height instead of sitting at a fixed size in the middle.
+        ay: 'stretch',
         bg: 'neutral-0',
         border: '1px solid neutral-200',
         r: '500',
diff --git a/packages/modules/call/src/store.ts b/packages/modules/call/src/store.ts
index 7d508cdf..ec73fe48 100644
--- a/packages/modules/call/src/store.ts
+++ b/packages/modules/call/src/store.ts
@@ -38,6 +38,22 @@ export interface CallTile {
   /** `null` until that peer's media arrives, which is normal for the first second or two. */
   stream: MediaStream | null;
   isSelf: boolean;
+}
+
+/**
+ * A participant's *volatile* state, deliberately kept out of {@link CallTile}.
+ *
+ * This split is not tidiness, it is the fix for a visible bug. `$each` renders through Solid's
+ * `<For>`, which is keyed by reference, so any change to a tile object remounts that row — and a
+ * remounted row builds a new `<video>`, which drops and re-attaches `srcObject`. With mute state on
+ * the tile, muting your microphone blanked your own video.
+ *
+ * So the tile carries only what identifies a participant and their stream, and changes rarely. Their
+ * flags live here and a fragment reaches them with `$find` over `modules.call.tileStates` — which
+ * resolves inside the renderer's prop memo, so it stays reactive while the row itself never remounts.
+ */
+export interface CallTileState {
+  id: string;
   /** Render `contain` rather than `cover` — a cropped desktop is unreadable. From the roster. */
   isScreen: boolean;
   audioEnabled: boolean;
@@ -56,6 +72,7 @@ export function createCallStore(deps: CallStoreDeps) {
 
   const [callId, setCallId] = signal<string | null>(null);
   const [tiles, setTiles] = signal<CallTile[]>([]);
+  const [tileStates, setTileStates] = signal<CallTileState[]>([]);
   const [expanded, setExpanded] = signal(false);
   const [media, setMedia] = signal<MediaSettings>({
     audioEnabled: true,
@@ -100,20 +117,15 @@ export function createCallStore(deps: CallStoreDeps) {
    * tile with a null stream. Driving it from connections instead would make joiners invisible until
    * their media arrived, which reads as a broken call during the very seconds it is working.
    */
-  /** Reuse the previous object for a participant when every field still matches. */
+  /**
+   * Reuse the previous object for a participant unless their identity or stream changed.
+   *
+   * Only two fields can force a remount now, and both genuinely require one: a different person, or a
+   * different `MediaStream` to attach.
+   */
   function stabilise(tile: CallTile): CallTile {
     const previous = tileCache.get(tile.id);
-    if (
-      previous &&
-      previous.stream === tile.stream &&
-      previous.isSelf === tile.isSelf &&
-      previous.isScreen === tile.isScreen &&
-      previous.audioEnabled === tile.audioEnabled &&
-      previous.videoEnabled === tile.videoEnabled &&
-      previous.connection === tile.connection
-    ) {
-      return previous;
-    }
+    if (previous && previous.stream === tile.stream && previous.isSelf === tile.isSelf) return previous;
     tileCache.set(tile.id, tile);
     return tile;
   }
@@ -124,24 +136,22 @@ export function createCallStore(deps: CallStoreDeps) {
     if (!id) {
       tileCache.clear();
       setTiles([]);
+      setTileStates([]);
       return;
     }
 
     const next: CallTile[] = [];
+    const states: CallTileState[] = [];
 
     if (me) {
       const state = controller?.state();
-      next.push(
-        stabilise({
-          id: me,
-          did: me,
-          stream: controller?.displayStream() ?? null,
-          isSelf: true,
-          isScreen: state?.screenShareEnabled ?? false,
-          audioEnabled: state?.audioEnabled ?? false,
-          videoEnabled: state?.videoEnabled ?? false,
-        }),
-      );
+      next.push(stabilise({ id: me, did: me, stream: controller?.displayStream() ?? null, isSelf: true }));
+      states.push({
+        id: me,
+        isScreen: state?.screenShareEnabled ?? false,
+        audioEnabled: state?.audioEnabled ?? false,
+        videoEnabled: state?.videoEnabled ?? false,
+      });
     }
 
     for (const { peer, activity } of activitiesOfType(presence?.peers() ?? [], 'call')) {
@@ -153,14 +163,17 @@ export function createCallStore(deps: CallStoreDeps) {
           did: peer.agentId,
           stream: remoteStreams.get(peer.agentId) ?? null,
           isSelf: false,
-          // Read from the roster, never inferred from the track — the sender is the only one who
-          // knows whether the video it is sending is a camera or a desktop.
-          isScreen: settings?.screenShareEnabled ?? false,
-          audioEnabled: settings?.audioEnabled ?? true,
-          videoEnabled: settings?.videoEnabled ?? true,
-          connection: peerStates.get(peer.agentId),
         }),
       );
+      states.push({
+        id: peer.agentId,
+        // Read from the roster, never inferred from the track — the sender is the only one who knows
+        // whether the video it is sending is a camera or a desktop.
+        isScreen: settings?.screenShareEnabled ?? false,
+        audioEnabled: settings?.audioEnabled ?? true,
+        videoEnabled: settings?.videoEnabled ?? true,
+        connection: peerStates.get(peer.agentId),
+      });
     }
 
     // Drop anyone who left, so the cache cannot grow across a long-lived session.
@@ -168,6 +181,7 @@ export function createCallStore(deps: CallStoreDeps) {
     for (const key of [...tileCache.keys()]) if (!present.has(key)) tileCache.delete(key);
 
     setTiles(next);
+    setTileStates(states);
   }
 
   /** Republish the call activity so peers see mute/camera/screen changes. */
@@ -291,6 +305,7 @@ export function createCallStore(deps: CallStoreDeps) {
     // ── State ────────────────────────────────────────────────────────────────
     callId,
     tiles,
+    tileStates,
     expanded,
     media,
     problem,

From 5faef2f83e3b1f0333e68b5740f4796c45e334f2 Mon Sep 17 00:00:00 2001
From: jhweir <james@weco.io>
Date: Sat, 1 Aug 2026 21:02:34 +0100
Subject: [PATCH 11/12] fix(modules): put the call controls at the top, with
 the video under them
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Corrects the previous commit, which moved the stage to the top but left the
controls docked at the bottom — so the two halves of the call sat at opposite
ends of the screen.

Both are at the top now, controls above video. That is where the bar appeared
originally, though only because `bottom: '400'` is not a CSS length: the offset
was dropped and `position: fixed` fell back to the static position. The accident
read better than the design, so it is now the design — a call you are in belongs
where your eyes already are, rather than competing with whatever the space puts
along its bottom edge.

The two offsets are named constants because the stage's is derived from the
bar's. They have to stay stacked, and a bare `128px` in one place and `72px` in
another records no relationship at all.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 packages/modules/call/src/index.ts | 32 ++++++++++++++++++++----------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/packages/modules/call/src/index.ts b/packages/modules/call/src/index.ts
index 19310d8a..0fa51869 100644
--- a/packages/modules/call/src/index.ts
+++ b/packages/modules/call/src/index.ts
@@ -32,6 +32,22 @@ export { createMediaController, type MediaController, type MediaState } from './
 export { anchoredCallId, CALL_PROTOCOL_VERSION, parseCallMessage, spaceCallId } from './protocol';
 export { createCallStore, type CallTile } from './store';
 
+/**
+ * Where the call's chrome sits.
+ *
+ * Both at the top, controls above video. That is not where this started: the bar was docked at the
+ * bottom and only *appeared* at the top because `bottom: '400'` is not a CSS length, so the offset was
+ * dropped and `position: fixed` fell back to the static position. The accident read better than the
+ * design, so it is now the design — a call you are in should be visible where your eyes already are,
+ * not competing with whatever the space puts along the bottom.
+ *
+ * Named rather than inlined because the stage's offset is *derived* from the bar's: the two must stay
+ * stacked, and a bare `128px` in one file and `72px` in another is a relationship nothing records.
+ */
+const CALL_BAR_TOP = '72px';
+/** Bar top + its height + a gap. Keeps the stage tucked directly under the controls. */
+const STAGE_TOP = '128px';
+
 /**
  * A participant's volatile flag, looked up rather than read off the tile.
  *
@@ -140,12 +156,7 @@ const tile: SchemaNode = {
 };
 
 /**
- * The expanded stage — every participant, at the top of the screen.
- *
- * **Top, not bottom.** It first appeared at the top by accident: `bottom: '900'` is not a CSS length,
- * so the offset was dropped and `position: fixed` fell back to the static position. That accident read
- * better than the deliberate version — video belongs where your eyes already are, and the controls
- * belong out of the way — so it is now the actual layout.
+ * The expanded stage — every participant, directly under the controls.
  *
  * A `Row` that wraps, not a `Grid`. `Grid`'s `minChildWidth` compiles to
  * `repeat(auto-fill, minmax(…, 1fr))`, and `auto-fill` keeps empty tracks — so a one-person call drew
@@ -166,7 +177,8 @@ const stage: SchemaNode = {
       type: 'Row',
       props: {
         position: 'fixed',
-        top: '72px',
+        // Directly under the control bar — see CALL_BAR_TOP.
+        top: STAGE_TOP,
         left: '16px',
         // Clears the module rail on the right edge, which is 48px wide plus a margin.
         right: '72px',
@@ -225,7 +237,7 @@ const bar: SchemaNode = {
           type: 'Row',
           props: {
             position: 'fixed',
-            bottom: '16px',
+            top: CALL_BAR_TOP,
             left: '50%',
             transform: 'translateX(-50%)',
             bg: 'neutral-0',
@@ -266,7 +278,7 @@ const bar: SchemaNode = {
       type: 'Row',
       props: {
         position: 'fixed',
-        bottom: '16px',
+        top: CALL_BAR_TOP,
         left: '50%',
         transform: 'translateX(-50%)',
         bg: 'neutral-0',
@@ -335,7 +347,7 @@ const problem: SchemaNode = {
       type: 'Row',
       props: {
         position: 'fixed',
-        bottom: '16px',
+        top: CALL_BAR_TOP,
         left: '50%',
         transform: 'translateX(-50%)',
         zIndex: 'sticky',

From 61d7c37ce30e66ebe82a62eed3c1b126cdfb984b Mon Sep 17 00:00:00 2001
From: jhweir <james@weco.io>
Date: Sat, 1 Aug 2026 21:09:28 +0100
Subject: [PATCH 12/12] style(modules): tuck the call controls against the top
 edge

72px was an unexamined guess at clearing the header. The bar floats over the
content anyway, so it does not need the clearance.

The stage offset is derived rather than guessed alongside it: the bar is 50px
tall (a 32px sm button, py 200 top and bottom, plus 1px borders), so 10 + 50 + 12
puts the video 72px down. The arithmetic is in the comment because the two
constants have to move together.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 packages/modules/call/src/index.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/modules/call/src/index.ts b/packages/modules/call/src/index.ts
index 0fa51869..a7667861 100644
--- a/packages/modules/call/src/index.ts
+++ b/packages/modules/call/src/index.ts
@@ -44,9 +44,15 @@ export { createCallStore, type CallTile } from './store';
  * Named rather than inlined because the stage's offset is *derived* from the bar's: the two must stay
  * stacked, and a bare `128px` in one file and `72px` in another is a relationship nothing records.
  */
-const CALL_BAR_TOP = '72px';
-/** Bar top + its height + a gap. Keeps the stage tucked directly under the controls. */
-const STAGE_TOP = '128px';
+const CALL_BAR_TOP = '10px';
+/**
+ * Bar top + bar height + a gap, so the stage sits tucked directly under the controls.
+ *
+ * The bar is 50px tall: a 32px `sm` button, plus `py: '200'` (8px) top and bottom, plus its 1px
+ * borders. 10 + 50 + 12 = 72. Written out because the two constants have to move together, and the
+ * next person to nudge the bar needs to know what the second number is made of.
+ */
+const STAGE_TOP = '72px';
 
 /**
  * A participant's volatile flag, looked up rather than read off the tile.