domma-cms 0.92.1 → 0.94.0

package/admin/js/templates/docs/api-users.html

@@ -69,118 +69,85 @@
   <div class="col-12">
     <div class="docs-body">
 
-<p>Role hierarchy governs which users can manage other users: you can only create, edit, delete or reset
-                      the password of a user whose role is less senior (a higher level number) than your own - an
-                      Admin cannot manage a Super Admin. Self-deletion is always blocked.</p>
-
-                  <h3><span class="method-badge method-get">GET</span><span class="endpoint-path">/api/users</span></h3>
-                  <p class="auth-note">Requires Bearer token + <code>users</code> read permission (Super Admin and Admin by default).</p>
-                  <p>Return all users. Passwords are stripped from the response.</p>
-                  <pre class="code-block"><code>// Response 200
-[ { "id": "uuid", "name": "Alice", "email": "alice@example.com", "role": "admin", "isActive": true } ]</code></pre>
-
-                  <h3><span class="method-badge method-get">GET</span><span class="endpoint-path">/api/users/:id</span>
-                  </h3>
-                  <p class="auth-note">Requires Bearer token. Accessible to the user themselves, or a user with <code>users</code>
-                      permission.</p>
-                  <p>Return a single user by ID.</p>
-                  <pre class="code-block"><code>// Response 200
-{ "id": "uuid", "name": "Alice", "email": "alice@example.com", "role": "admin", "isActive": true }
-
+<p>Users are managed with the <code>users</code> permission (Super Admin and Admin by default; each action -
+    read, create, update, delete - can be granted on its own in the role editor). The role ladder decides whom you
+    may manage: you can only create, edit, delete or reset the password of a user whose role is less senior (a higher
+    level number) than your own, so an Admin cannot manage a Super Admin or another Admin. You can always edit your
+    own account, but not raise your own role, and you cannot delete it. Passwords are never returned.</p>
+
+<h3><span class="method-badge method-get">GET</span><span class="endpoint-path">/api/users</span></h3>
+<p class="auth-note">Requires Bearer token + <code>users</code> read permission.</p>
+<p>Every user you may see (a user confined to some projects sees the users of those projects), each with their
+    profile fields.</p>
+<pre class="code-block"><code>// Response 200
+[ { "id": "uuid", "name": "Alice", "email": "alice@example.com", "role": "admin", "additionalRoles": [],
+    "isActive": true, "lastLogin": "...", "profile": {} } ]</code></pre>
+
+<h3><span class="method-badge method-get">GET</span><span class="endpoint-path">/api/users/:id</span></h3>
+<p class="auth-note">Requires Bearer token. The user themselves, or a role with <code>users</code> read permission.</p>
+<p>A single user, with their profile.</p>
+<pre class="code-block"><code>// Response 200
+{ "id": "uuid", "name": "Alice", "email": "alice@example.com", "role": "admin", "isActive": true, "profile": {} }
 // Error 404
 { "error": "User not found" }</code></pre>
 
-                  <h3><span class="method-badge method-post">POST</span><span class="endpoint-path">/api/users</span>
-                  </h3>
-                  <p class="auth-note">Requires Bearer token + <code>users</code> permission.</p>
-                  <p>Create a new user. The actor cannot assign a role higher than their own level.</p>
-                  <table class="table table-sm">
-                      <thead>
-                      <tr>
-                          <th>Field</th>
-                          <th>Type</th>
-                          <th>Description</th>
-                      </tr>
-                      </thead>
-                      <tbody>
-                      <tr>
-                          <td><code>name</code></td>
-                          <td>string</td>
-                          <td>Display name</td>
-                      </tr>
-                      <tr>
-                          <td><code>email</code></td>
-                          <td>string</td>
-                          <td>Unique email address</td>
-                      </tr>
-                      <tr>
-                          <td><code>password</code></td>
-                          <td>string</td>
-                          <td>Minimum 8 characters</td>
-                      </tr>
-                      <tr>
-                          <td><code>role</code></td>
-                          <td>string</td>
-                          <td>Optional. Defaults to <code>user</code>.</td>
-                      </tr>
-                      </tbody>
-                  </table>
-                  <pre class="code-block"><code>// Response 201
+<h3><span class="method-badge method-post">POST</span><span class="endpoint-path">/api/users</span></h3>
+<p class="auth-note">Requires Bearer token + <code>users</code> create permission.</p>
+<p>Create a user. You can only give roles (primary and additional) less senior than your own.</p>
+<table class="table table-sm">
+    <thead><tr><th>Field</th><th>Type</th><th>Description</th></tr></thead>
+    <tbody>
+    <tr><td><code>name</code></td><td>string</td><td>Display name</td></tr>
+    <tr><td><code>email</code></td><td>string</td><td>Unique email address</td></tr>
+    <tr><td><code>password</code></td><td>string</td><td>At least 8 characters, plus any rules a plugin such as
+        Security adds</td></tr>
+    <tr><td><code>role</code></td><td>string</td><td>Optional. Defaults to <code>user</code>.</td></tr>
+    <tr><td><code>additionalRoles</code></td><td>array</td><td>Optional. More roles; a permission check passes if
+        any role grants it.</td></tr>
+    <tr><td><code>projects</code></td><td>array</td><td>Optional. Project slugs the user is confined to.</td></tr>
+    <tr><td><code>isActive</code></td><td>boolean</td><td>Optional. Defaults to <code>true</code>.</td></tr>
+    <tr><td><code>profile</code></td><td>object</td><td>Optional. Profile field values.</td></tr>
+    </tbody>
+</table>
+<pre class="code-block"><code>// Response 201
 { "id": "uuid", "name": "Bob", "email": "bob@example.com", "role": "user", "isActive": true }
-
-// Error 409
-{ "error": "Email already in use" }</code></pre>
-
-                  <h3><span class="method-badge method-put">PUT</span><span class="endpoint-path">/api/users/:id</span>
-                  </h3>
-                  <p class="auth-note">Requires Bearer token + <code>users</code> permission.</p>
-                  <p>Update a user's details. You cannot edit a user as senior as or more senior than yourself (other
-                      than yourself). Role escalation beyond the actor's own level is blocked.</p>
-                  <table class="table table-sm">
-                      <thead>
-                      <tr>
-                          <th>Field</th>
-                          <th>Type</th>
-                          <th>Description</th>
-                      </tr>
-                      </thead>
-                      <tbody>
-                      <tr>
-                          <td><code>name</code></td>
-                          <td>string</td>
-                          <td>New display name</td>
-                      </tr>
-                      <tr>
-                          <td><code>email</code></td>
-                          <td>string</td>
-                          <td>New email address</td>
-                      </tr>
-                      <tr>
-                          <td><code>password</code></td>
-                          <td>string</td>
-                          <td>New password (min 8 chars)</td>
-                      </tr>
-                      <tr>
-                          <td><code>role</code></td>
-                          <td>string</td>
-                          <td>New role</td>
-                      </tr>
-                      <tr>
-                          <td><code>isActive</code></td>
-                          <td>boolean</td>
-                          <td>Enable or disable the account</td>
-                      </tr>
-                      </tbody>
-                  </table>
-                  <pre class="code-block"><code>// Response 200 - returns the updated user object</code></pre>
-
-                  <h3><span class="method-badge method-delete">DELETE</span><span
-                          class="endpoint-path">/api/users/:id</span></h3>
-                  <p class="auth-note">Requires Bearer token + <code>users</code> permission.</p>
-                  <p>Delete a user. Cannot delete your own account or a user with a higher role level.</p>
-                  <pre class="code-block"><code>// Response 200
+// Error 403
+{ "error": "You cannot create a user with that role" }
+// Error 409 - the email is already in use</code></pre>
+
+<h3><span class="method-badge method-put">PUT</span><span class="endpoint-path">/api/users/:id</span></h3>
+<p class="auth-note">Requires Bearer token + <code>users</code> update permission.</p>
+<p>Update a user. Send only the fields to change: <code>name</code>, <code>email</code>, <code>password</code>,
+    <code>role</code>, <code>additionalRoles</code>, <code>projects</code>, <code>isActive</code>,
+    <code>profile</code>. A new password, or switching an account off, ends that user's sessions.</p>
+<pre class="code-block"><code>// Response 200 - the updated user, with profile
+// Error 403
+{ "error": "You cannot edit a user with that role" }</code></pre>
+
+<h3><span class="method-badge method-post">POST</span><span class="endpoint-path">/api/users/:id/password-reset</span></h3>
+<p class="auth-note">Requires Bearer token + <code>users</code> update permission. Not for your own account.</p>
+<p>Start a password reset for someone else: email them a link (the default), or with
+    <code>{"via": "link"}</code> get the link back to pass on yourself - for a site without email. The account must
+    be active and less senior than yours.</p>
+<pre class="code-block"><code>// Request body (optional)
+{ "via": "email" }   // or "link"
+// Response 200
+{ "sent": true, "expiresAt": "...", "expiresIn": "1 hour" }
+{ "link": "https://example.com/admin/#/reset-password?token=...", "expiresAt": "...", "expiresIn": "1 hour" }
+// Error 409 - INACTIVE, NO_SMTP (copy the link instead) or NO_ORIGIN (set the Site URL)
+{ "error": "...", "code": "NO_SMTP" }</code></pre>
+
+<h3><span class="method-badge method-delete">DELETE</span><span class="endpoint-path">/api/users/:id/password-reset</span></h3>
+<p class="auth-note">Requires Bearer token + <code>users</code> update permission.</p>
+<p>Withdraw an open reset link, so it no longer works.</p>
+<pre class="code-block"><code>// Response 200
+{ "ok": true }</code></pre>
+
+<h3><span class="method-badge method-delete">DELETE</span><span class="endpoint-path">/api/users/:id</span></h3>
+<p class="auth-note">Requires Bearer token + <code>users</code> delete permission.</p>
+<p>Delete a user. You cannot delete your own account or anyone as senior as you.</p>
+<pre class="code-block"><code>// Response 200
 { "success": true }
-
 // Error 403
 { "error": "You cannot delete your own account" }</code></pre>
 

package/admin/js/templates/docs/api-views.html

@@ -69,27 +69,31 @@
   <div class="col-12">
     <div class="docs-body">
 
-<p>Views work on every storage adapter - no MongoDB connection is needed. All admin endpoints require
-                      authentication and the <code>views</code> permission. View configs are stored as JSON files in
-                      <code>content/views/&lt;slug&gt;.json</code>.</p>
-
-                  <h3 style="margin-top:16px;font-size:15px;text-transform:uppercase;letter-spacing:.5px;opacity:.6">
-                      Admin Endpoints</h3>
-
-                  <h3><span class="method-badge method-get">GET</span><span class="endpoint-path">/api/views</span></h3>
-                  <p class="auth-note">Requires: <code>views</code> permission</p>
-                  <p>List all view configs, sorted by creation date descending.</p>
-
-                  <h3><span class="method-badge method-post">POST</span><span class="endpoint-path">/api/views</span>
-                  </h3>
-                  <p class="auth-note">Requires: <code>views</code> permission</p>
-                  <p>Create a new view config. Returns <code>201</code> on success.</p>
-                  <pre class="code-block"><code>{
-  "title": "Active Premium Users",
-  "slug": "active-premium-users",
+<p>Views work on every storage adapter - no MongoDB connection is needed: a view over a MongoDB collection runs a
+    native aggregation, and one over a file collection runs the built-in pipeline evaluator. View configs are JSON
+    files in <code>content/views/&lt;slug&gt;.json</code>. The admin endpoints need the <code>views</code> permission
+    for the action named (read, create, update, delete).</p>
+
+<h3 style="margin-top:16px;font-size:15px;text-transform:uppercase;letter-spacing:.5px;opacity:.6">
+    Admin Endpoints</h3>
+
+<h3><span class="method-badge method-get">GET</span><span class="endpoint-path">/api/views</span></h3>
+<p class="auth-note">Requires: <code>views</code> read permission</p>
+<p>Every view you may see, newest first.</p>
+
+<h3><span class="method-badge method-post">POST</span><span class="endpoint-path">/api/views</span></h3>
+<p class="auth-note">Requires: <code>views</code> create permission</p>
+<p>Create a view. Answers <code>201</code>. Pipeline stages may be <code>$match</code>, <code>$lookup</code>,
+    <code>$sort</code>, <code>$project</code>, <code>$unwind</code>, <code>$addFields</code>, <code>$group</code>,
+    <code>$count</code>, <code>$skip</code> and <code>$limit</code>; <code>$out</code>, <code>$merge</code>,
+    <code>$function</code>, <code>$accumulator</code> and <code>$graphLookup</code> are refused. Field paths are
+    document paths such as <code>data.status</code> or <code>meta.createdAt</code>.</p>
+<pre class="code-block"><code>{
+  "title": "Active Members",
+  "slug": "active-members",
   "connection": "default",
   "pipeline": {
-    "source": "users",
+    "source": "members",
     "stages": [
       { "type": "$match",   "config": { "data.status": "active" } },
       { "type": "$sort",    "config": { "meta.createdAt": -1 } },
@@ -97,46 +101,56 @@
     ]
   },
   "display": { "mode": "table", "columns": [ { "key": "data.name", "label": "Name" } ], "pageSize": 25 },
-  "access": { "roles": ["admin", "manager"], "public": false }
+  "access": { "roles": ["admin"], "public": false, "rowLevel": null }
 }</code></pre>
 
-                  <h3><span class="method-badge method-get">GET</span><span
-                          class="endpoint-path">/api/views/:slug</span></h3>
-                  <p class="auth-note">Requires: <code>views</code> permission</p>
-                  <p>Return a single view config by slug.</p>
-
-                  <h3><span class="method-badge method-put">PUT</span><span
-                          class="endpoint-path">/api/views/:slug</span></h3>
-                  <p class="auth-note">Requires: <code>views</code> permission</p>
-                  <p>Update a view config. Accepts the same body shape as POST; all fields are optional.</p>
-
-                  <h3><span class="method-badge method-delete">DELETE</span><span
-                          class="endpoint-path">/api/views/:slug</span></h3>
-                  <p class="auth-note">Requires: <code>views</code> permission</p>
-                  <p>Delete a view config.</p>
-
-                  <h3><span class="method-badge method-get">GET</span><span class="endpoint-path">/api/views/:slug/execute</span>
-                  </h3>
-                  <p class="auth-note">Requires: <code>views</code> permission</p>
-                  <p>Execute the view's aggregation pipeline and return paginated results. Query params:
-                      <code>page</code> (default 1), <code>limit</code> (default 25).</p>
-                  <pre class="code-block"><code>// Response
-{ "results": [ ... ], "total": 142, "page": 1, "limit": 25 }</code></pre>
+<h3><span class="method-badge method-get">GET</span><span class="endpoint-path">/api/views/:slug</span></h3>
+<p class="auth-note">Requires: <code>views</code> read permission</p>
+<p>One view config.</p>
+
+<h3><span class="method-badge method-put">PUT</span><span class="endpoint-path">/api/views/:slug</span></h3>
+<p class="auth-note">Requires: <code>views</code> update permission</p>
+<p>Update a view. The same body as POST; every field is optional.</p>
 
-                  <h3><span class="method-badge method-get">GET</span><span class="endpoint-path">/api/views/collection/:slug</span>
-                  </h3>
-                  <p class="auth-note">Requires: <code>views</code> permission</p>
-                  <p>List all view configs whose <code>pipeline.source</code> matches the given collection slug.</p>
+<h3><span class="method-badge method-delete">DELETE</span><span class="endpoint-path">/api/views/:slug</span></h3>
+<p class="auth-note">Requires: <code>views</code> delete permission</p>
+<p>Delete a view.</p>
 
-                  <h3 style="margin-top:24px;font-size:15px;text-transform:uppercase;letter-spacing:.5px;opacity:.6">
-                      Public Endpoint</h3>
+<h3><span class="method-badge method-get">GET</span><span class="endpoint-path">/api/views/:slug/execute</span></h3>
+<p class="auth-note">Requires: <code>views</code> read permission</p>
+<p>Run the view and return a page of results. Query params: <code>page</code> (default 1), <code>limit</code>
+    (default 25).</p>
+<pre class="code-block"><code>// Response
+{ "results": [ ... ], "total": 142, "page": 1, "limit": 25 }</code></pre>
 
-                  <h3><span class="method-badge method-get">GET</span><span class="endpoint-path">/api/views/:slug/public</span>
-                  </h3>
-                  <p class="auth-note">Access level: per view <code>access</code> config</p>
-                  <p>Execute the view publicly. If <code>access.public</code> is <code>false</code>, a valid JWT and a
-                      role listed in <code>access.roles</code> (or a more privileged one) is required; with no roles
-                      listed, only the admin tier (role levels 0 and 1) may read it.</p>
+<h3><span class="method-badge method-post">POST</span><span class="endpoint-path">/api/views/_preview</span></h3>
+<p class="auth-note">Requires: <code>views</code> update permission</p>
+<p>Run an unsaved pipeline (the view editor's Results tab) and return up to 50 rows.</p>
+<pre class="code-block"><code>// Request body
+{ "source": "members", "connection": "default", "stages": [ ... ], "limit": 10 }</code></pre>
+
+<h3><span class="method-badge method-get">GET</span><span class="endpoint-path">/api/views/collection/:slug</span></h3>
+<p class="auth-note">Requires: <code>views</code> read permission</p>
+<p>The views whose <code>pipeline.source</code> is the given collection.</p>
+
+<h3 style="margin-top:24px;font-size:15px;text-transform:uppercase;letter-spacing:.5px;opacity:.6">
+    Public Endpoint</h3>
+
+<h3><span class="method-badge method-get">GET</span><span class="endpoint-path">/api/views/:slug/public</span></h3>
+<p class="auth-note">Access level: per view <code>access</code> config</p>
+<p>Run the view for a visitor. This is the same decision <code>[view]</code> on a page makes:</p>
+<ul>
+    <li><code>access.public: true</code> - anyone.</li>
+    <li>Otherwise a signed-in user holding any role in <code>access.roles</code>, or a more senior one (the page
+        visibility ladder; <code>=role</code> means that role exactly). A role name the site does not have admits
+        only the level-0 role.</li>
+    <li>No roles listed - the admin tier (role levels 0 and 1).</li>
+</ul>
+<p>A row-level rule (<code>access.rowLevel</code>: <code>owner</code>, <code>field</code> or <code>reference</code>)
+    is applied as the viewer, so each person sees only their rows and the totals count only those; an anonymous
+    visitor gets no rows. Refused: 401 when not signed in, 403 otherwise.</p>
+<pre class="code-block"><code>// Response
+{ "results": [ ... ], "total": 12, "page": 1, "limit": 25 }</code></pre>
 
     </div>
   </div>

package/admin/js/templates/docs/components-howto.html

@@ -23,11 +23,12 @@
 
       <h2>Create a component</h2>
       <ol>
-        <li>Open <a href="#/components">Data → Components</a> → <strong>New Component</strong>.</li>
+        <li>Open <a href="#/components">Data &gt; Components</a> and click <strong>New component</strong> in the
+          banner.</li>
         <li>Name it in lowercase-with-hyphens (e.g. <code>price-tag</code>). The name is permanent and
           becomes the tag <code>&lt;dm-price-tag&gt;</code>.</li>
         <li>Fill the <code>&lt;template&gt;</code>, <code>&lt;props&gt;</code> and <code>&lt;script&gt;</code>
-          tabs (the editor watches the live preview as you type).</li>
+          tabs, and <code>&lt;style&gt;</code> if you want one (the live preview updates as you type).</li>
         <li><strong>Save</strong>. It compiles first - fix any reported errors and it lands on disk.</li>
       </ol>
 
@@ -35,7 +36,7 @@
 
       <h2>Render a value</h2>
       <p>Interpolate a prop or state value with double braces:</p>
-      <pre class="code-block"><code>&lt;template&gt;&lt;span class="dm-price"&gt;{{currency}}{{amount}}&lt;/span&gt;&lt;/template&gt;
+      <pre class="code-block"><code>&lt;template&gt;&lt;span class="dm-price"&gt;&#123;&#123;currency&#125;&#125;&#123;&#123;amount&#125;&#125;&lt;/span&gt;&lt;/template&gt;
 &lt;props&gt;
 {
   "currency": { "type": "string", "default": "£" },
@@ -53,7 +54,7 @@
         template re-renders automatically.</p>
       <pre class="code-block"><code>&lt;template&gt;
 &lt;div class="dm-counter"&gt;
-  &lt;strong&gt;{{count}}&lt;/strong&gt;
+  &lt;strong&gt;&#123;&#123;count&#125;&#125;&lt;/strong&gt;
   &lt;button data-action="inc"&gt;+&lt;/button&gt;
 &lt;/div&gt;
 &lt;/template&gt;
@@ -83,15 +84,15 @@ onMount() { this.set({ count: this.props.initial }); }</code></pre>
       <hr>
 
       <h2>Show something conditionally</h2>
-      <pre class="code-block"><code>{{#if showReset}}&lt;button data-action="reset"&gt;Reset&lt;/button&gt;{{/if}}
-{{#unless soldOut}}&lt;button&gt;Buy&lt;/button&gt;{{/unless}}</code></pre>
+      <pre class="code-block"><code>&#123;&#123;#if showReset&#125;&#125;&lt;button data-action="reset"&gt;Reset&lt;/button&gt;&#123;&#123;/if&#125;&#125;
+&#123;&#123;#unless soldOut&#125;&#125;&lt;button&gt;Buy&lt;/button&gt;&#123;&#123;/unless&#125;&#125;</code></pre>
 
       <hr>
 
       <h2>Loop over a list</h2>
-      <p>Pass an array prop (attribute value is JSON) and iterate with <code>{{#each}}</code>:</p>
+      <p>Pass an array prop (attribute value is JSON) and iterate with <code>&#123;&#123;#each&#125;&#125;</code>:</p>
       <pre class="code-block"><code>&lt;template&gt;
-&lt;ul&gt;{{#each items}}&lt;li&gt;{{@index}}. {{.}}&lt;/li&gt;{{/each}}&lt;/ul&gt;
+&lt;ul&gt;&#123;&#123;#each items&#125;&#125;&lt;li&gt;&#123;&#123;@index&#125;&#125;. &#123;&#123;.&#125;&#125;&lt;/li&gt;&#123;&#123;/each&#125;&#125;&lt;/ul&gt;
 &lt;/template&gt;
 &lt;props&gt;{ "items": { "type": "array", "default": [] } }&lt;/props&gt;
 &lt;script&gt;export default {};&lt;/script&gt;</code></pre>
@@ -109,7 +110,8 @@ onMount() { this.set({ count: this.props.initial }); }</code></pre>
 
       <h2>Fetch data from the API</h2>
       <p>Domma's HTTP helper <code>H</code> is available inside the script. Fetch in <code>onMount</code> and
-        push results into state:</p>
+        push results into state. <code>/api/v1/&lt;slug&gt;</code> answers only if the collection's API read
+        access allows the visitor (collection editor, <strong>API &amp; Export</strong> tab):</p>
       <pre class="code-block"><code>export default {
   data() { return { entries: [] }; },
   async onMount() {
@@ -126,7 +128,7 @@ onMount() { this.set({ count: this.props.initial }); }</code></pre>
       <pre class="code-block"><code>export default {
   data() { return { now: '' }; },
   _timer: null,
-  methods: { tick() { this.set({ now: new Date().toLocaleTimeString() }); } },
+  methods: { tick() { this.set({ now: new Date().toTimeString().slice(0, 8) }); } },  // HH:mm:ss
   onMount()   { this.tick(); this._timer = setInterval(() =&gt; this.tick(), 1000); },
   onUnmount() { if (this._timer) clearInterval(this._timer); }
 };</code></pre>
@@ -145,24 +147,25 @@ onMount() { this.set({ count: this.props.initial }); }</code></pre>
       <h2>Use it on a page</h2>
       <p>Either form works and auto-loads the component's module:</p>
       <pre class="code-block"><code>[component name="counter" step="2" /]
-
 &lt;dm-counter step="2"&gt;&lt;/dm-counter&gt;</code></pre>
 
       <hr>
 
       <h2>Move a component between sites</h2>
       <ol>
-        <li>On <a href="#/components">Components</a>, click <span data-icon="download"></span> Export on the
-          row - you'll download <code>name.dmcomponent.json</code>.</li>
-        <li>On the other site, click <strong>Import</strong> and pick that file. On a name clash you'll be
-          asked to confirm an overwrite.</li>
+        <li>On <a href="#/components">Components</a>, right-click the row (or use its menu) and choose
+          <span data-icon="download"></span> <strong>Export .dmcomponent.json</strong> - you'll download
+          <code>name.dmcomponent.json</code>. The editor has the same Export in its banner.</li>
+        <li>On the other site, click <strong>Import</strong> in the Components banner and pick that file. On a
+          name clash you'll be asked to confirm an overwrite.</li>
       </ol>
 
       <hr>
 
       <h2>File it under a project</h2>
-      <p>In the editor, set the <strong>Project</strong> dropdown. That writes <code>meta.project</code> to
-        the sidecar so the component shows under that project's filtered list and is scoped accordingly.</p>
+      <p>In the editor, set the <strong>Project</strong> dropdown. That writes <code>project</code> to the
+        component's <code>.meta.json</code> sidecar, so it shows in that project's Components list
+        (<code>#/projects/&lt;slug&gt;/components</code>).</p>
 
       <hr>
       <p class="text-muted" style="font-size:.9rem;">

package/admin/js/templates/docs/components-reference.html

@@ -38,19 +38,16 @@
         Block order does not matter.</p>
 
       <pre class="code-block"><code>&lt;template&gt;
-&lt;div class="dm-greeting"&gt;Hello, {{name}}!&lt;/div&gt;
+&lt;div class="dm-greeting"&gt;Hello, &#123;&#123;name&#125;&#125;!&lt;/div&gt;
 &lt;/template&gt;
-
 &lt;props&gt;
 {
   "name": { "type": "string", "default": "world", "label": "Name to greet" }
 }
 &lt;/props&gt;
-
 &lt;script&gt;
 export default {};
 &lt;/script&gt;
-
 &lt;style&gt;
 .dm-greeting { font-weight: 600; }
 &lt;/style&gt;</code></pre>
@@ -71,22 +68,22 @@ export default {};
         <tr><th>Syntax</th><th>Purpose</th></tr>
         </thead>
         <tbody>
-        <tr><td><code>{{ value }}</code></td><td>Interpolate a prop or state value (HTML-escaped).</td></tr>
-        <tr><td><code>{{#if cond}}…{{/if}}</code></td><td>Render the block only when <code>cond</code> is truthy.</td></tr>
-        <tr><td><code>{{#unless cond}}…{{/unless}}</code></td><td>Render the block only when <code>cond</code> is falsy.</td></tr>
-        <tr><td><code>{{#each list}}…{{/each}}</code></td><td>Repeat the block for each item. Inside, <code>{{.}}</code> is the item (for primitives), <code>{{@index}}</code>, <code>{{@first}}</code> and <code>{{@last}}</code> are available; object items expose their own keys.</td></tr>
-        <tr><td><code>{{#with obj}}…{{/with}}</code></td><td>Scope the block to an object's keys.</td></tr>
+        <tr><td><code>&#123;&#123; value &#125;&#125;</code></td><td>Interpolate a prop or state value (HTML-escaped).</td></tr>
+        <tr><td><code>&#123;&#123;#if cond&#125;&#125;…&#123;&#123;/if&#125;&#125;</code></td><td>Render the block only when <code>cond</code> is truthy.</td></tr>
+        <tr><td><code>&#123;&#123;#unless cond&#125;&#125;…&#123;&#123;/unless&#125;&#125;</code></td><td>Render the block only when <code>cond</code> is falsy.</td></tr>
+        <tr><td><code>&#123;&#123;#each list&#125;&#125;…&#123;&#123;/each&#125;&#125;</code></td><td>Repeat the block for each item. Inside, <code>&#123;&#123;.&#125;&#125;</code> is the item (for primitives), <code>&#123;&#123;@index&#125;&#125;</code>, <code>&#123;&#123;@first&#125;&#125;</code> and <code>&#123;&#123;@last&#125;&#125;</code> are available; object items expose their own keys.</td></tr>
+        <tr><td><code>&#123;&#123;#with obj&#125;&#125;…&#123;&#123;/with&#125;&#125;</code></td><td>Scope the block to an object's keys.</td></tr>
         <tr><td><code>&lt;slot&gt;&lt;/slot&gt;</code></td><td>Project the light-DOM content placed between the element's tags.</td></tr>
         </tbody>
       </table>
 
       <pre class="code-block"><code>&lt;template&gt;
 &lt;ul class="dm-list"&gt;
-  {{#each items}}
-    &lt;li class="{{#if @first}}first{{/if}}"&gt;{{@index}}. {{.}}&lt;/li&gt;
-  {{/each}}
+  &#123;&#123;#each items&#125;&#125;
+    &lt;li class="&#123;&#123;#if @first&#125;&#125;first&#123;&#123;/if&#125;&#125;"&gt;&#123;&#123;@index&#125;&#125;. &#123;&#123;.&#125;&#125;&lt;/li&gt;
+  &#123;&#123;/each&#125;&#125;
 &lt;/ul&gt;
-{{#if title}}&lt;h4&gt;{{title}}&lt;/h4&gt;{{/if}}
+&#123;&#123;#if title&#125;&#125;&lt;h4&gt;&#123;&#123;title&#125;&#125;&lt;/h4&gt;&#123;&#123;/if&#125;&#125;
 &lt;slot&gt;&lt;/slot&gt;
 &lt;/template&gt;</code></pre>
 
@@ -122,12 +119,10 @@ export default {};
       <pre class="code-block"><code>export default {
   // Reactive state. Called WITHOUT `this` - do not read props here.
   data() { return { count: 0 }; },
-
   // Methods are bound to the component context (`this`).
   methods: {
     inc() { this.set({ count: this.data.count + this.props.step }); }
   },
-
   // Lifecycle - bound to `this`; props and the element are available here.
   onMount()   { this.set({ count: this.props.initial }); },
   onUnmount() { /* clean up timers, listeners, etc. */ }
@@ -215,6 +210,7 @@ export default {};
         </thead>
         <tbody>
         <tr><td><code>GET /api/components</code></td><td>read</td><td>List components with metadata + parsed props.</td></tr>
+        <tr><td><code>GET /api/components/_count</code></td><td>read</td><td>The count shown on the sidebar badge.</td></tr>
         <tr><td><code>GET /api/components/:name</code></td><td>read</td><td>Raw <code>.dmc</code> source + parsed props.</td></tr>
         <tr><td><code>GET /api/components/:name.js</code></td><td>public</td><td>Compiled browser module (what pages load).</td></tr>
         <tr><td><code>POST /api/components/compile</code></td><td>update</td><td>Transient compile for the live preview (nothing written).</td></tr>
@@ -231,7 +227,8 @@ export default {};
 
       <h3>Bundled &amp; plugin components</h3>
       <p>The <code>bundled</code> flag marks a component as part of fresh-install seed data. Plugins may
-        also contribute components via the <code>registerComponent()</code> hook - these appear in the list
+        also contribute components with <code>options.hooks.registerComponent({name, source})</code> in their
+        <code>plugin.js</code> - these appear in the list
         with a <span class="badge badge-secondary">plugin</span> badge, are served from memory, and are
         <strong>read-only</strong> from the admin (you can't edit or delete them, and you can't save a
         component whose name a plugin already owns).</p>

package/admin/js/templates/docs/components-rules.html

@@ -77,9 +77,10 @@
 
       <div class="alert alert-warning">
         <strong>2. Boolean coercion is string-based.</strong> Attribute values are strings. A boolean prop
-        is true only for the string <code>"true"</code>; <code>showReset="false"</code> is still a non-empty
-        string and coerces to <code>true</code>. To switch a boolean off, set it to <code>"true"</code> or
-        omit the attribute entirely.
+        is false only for the string <code>"false"</code> (or when the attribute is left out and the default is
+        false). A bare attribute (<code>show-reset</code>), <code>"true"</code> and any other value, including
+        <code>"no"</code> and <code>"0"</code>, coerce to <code>true</code>. To switch a boolean off, write
+        <code>"false"</code> or omit the attribute.
       </div>
 
       <div class="alert alert-warning">
@@ -109,8 +110,8 @@
 
       <h2>Plugin-owned components are read-only</h2>
       <ul>
-        <li>Components contributed by a plugin show a <span class="badge badge-secondary">plugin</span>
-          badge, are served from memory, and <strong>cannot be edited or deleted</strong> from the admin
+        <li>Components contributed by a plugin (through <code>options.hooks.registerComponent({name, source})</code>
+          in its <code>plugin.js</code>) show a <span class="badge badge-secondary">plugin</span> badge, are served from memory, and <strong>cannot be edited or deleted</strong> from the admin
           (attempting it returns <code>PLUGIN_OWNED</code>).</li>
         <li>You also can't save a disk component whose name a plugin already owns - pick a different name.</li>
       </ul>
@@ -130,7 +131,7 @@
 
       <h2>Rendering &amp; safety notes</h2>
       <ul>
-        <li><code>{{ }}</code> interpolation is HTML-escaped, so prop values can't inject markup.</li>
+        <li><code>&#123;&#123; &#125;&#125;</code> interpolation is HTML-escaped, so prop values can't inject markup.</li>
         <li>The markdown sanitiser keeps a live allowlist of <code>dm-*</code> tags, refreshed whenever you
           save or delete a component - a component you just created is immediately usable in page content.
           <code>on*</code> handler attributes and <code>javascript:</code> URLs are still stripped globally.</li>