domma-cms 0.44.0 → 0.45.0

package/admin/js/templates/action-editor.html

@@ -39,14 +39,14 @@
                     <div>
                         <label class="form-label">Target Collection <span style="color:var(--dm-danger,#f87171);">*</span></label>
                         <select id="action-collection" class="form-input">
-                            <option value="">— select collection —</option>
+                            <option value="">- select collection -</option>
                         </select>
                         <small class="text-muted">The collection this action operates on.</small>
                     </div>
                     <div>
                         <label class="form-label">Project</label>
                         <select id="action-project" class="form-input">
-                            <option value="">— none —</option>
+                            <option value="">- none -</option>
                         </select>
                         <small class="text-muted">Tag this action to a project for grouping.</small>
                     </div>
@@ -117,10 +117,10 @@
             <div class="card">
                 <div class="card-body" style="font-size:.8rem;color:var(--dm-text-muted,#888);">
                     <strong>Template variables:</strong>
-                    <code>{{entry.data.fieldName}}</code> — entry field value &nbsp;|&nbsp;
-                    <code>{{now}}</code> — current ISO timestamp &nbsp;|&nbsp;
-                    <code>{{user.name}}</code> — executing user's name &nbsp;|&nbsp;
-                    <code>{{env.CMS_PUBLIC_*}}</code> — public environment variables
+                    <code>{{entry.data.fieldName}}</code> - entry field value &nbsp;|&nbsp;
+                    <code>{{now}}</code> - current ISO timestamp &nbsp;|&nbsp;
+                    <code>{{user.name}}</code> - executing user's name &nbsp;|&nbsp;
+                    <code>{{env.CMS_PUBLIC_*}}</code> - public environment variables
                 </div>
             </div>
         </div>
@@ -153,8 +153,8 @@
                         <div>
                             <label class="form-label">Mode</label>
                             <select id="action-rowlevel-mode" class="form-input">
-                                <option value="owner">Owner — entry was created by the current user</option>
-                                <option value="field">Field Match — a field on the entry matches the user</option>
+                                <option value="owner">Owner - entry was created by the current user</option>
+                                <option value="field">Field Match - a field on the entry matches the user</option>
                             </select>
                         </div>
                         <div id="action-rowlevel-field-group" style="display:none;">

package/admin/js/templates/api-endpoint-editor.html

@@ -44,14 +44,14 @@
                             <div class="form-group">
                                 <label class="form-label" for="ep-mode">Mode</label>
                                 <select class="form-input" id="ep-mode">
-                                    <option value="list">List — array of entries</option>
-                                    <option value="single">Single — first match or 404</option>
+                                    <option value="list">List - array of entries</option>
+                                    <option value="single">Single - first match or 404</option>
                                 </select>
                             </div>
                         </div>
                         <label style="display:flex;align-items:center;gap:.5rem;cursor:pointer;margin-top:.5rem;padding-top:.75rem;border-top:1px solid rgba(127,127,127,.18);">
                             <input type="checkbox" id="ep-enabled" checked> <strong>Enabled</strong>
-                            <span class="text-muted" style="font-size:.85rem;">— disabled endpoints return 404</span>
+                            <span class="text-muted" style="font-size:.85rem;">- disabled endpoints return 404</span>
                         </label>
                     </div>
                 </div>
@@ -65,7 +65,7 @@
                     </div>
                     <div class="card-body">
                         <div id="ep-filter-rows"></div>
-                        <p class="text-muted" style="font-size:.8rem;margin:.5rem 0 0;">Values may use <code>{{params.name}}</code> (from a <code>:name</code> path segment, required) or <code>{{query.name}}</code> (optional — the filter is skipped when absent).</p>
+                        <p class="text-muted" style="font-size:.8rem;margin:.5rem 0 0;">Values may use <code>{{params.name}}</code> (from a <code>:name</code> path segment, required) or <code>{{query.name}}</code> (optional - the filter is skipped when absent).</p>
                         <div style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:.75rem;margin-top:1rem;">
                             <div class="form-group">
                                 <label class="form-label" for="ep-sort">Sort field</label>
@@ -92,7 +92,7 @@
                 <div class="card">
                     <div class="card-header"><h2>Response fields</h2></div>
                     <div class="card-body">
-                        <p class="text-muted" style="font-size:.85rem;margin:0 0 .5rem;">Tick fields to return only those — none ticked returns everything.</p>
+                        <p class="text-muted" style="font-size:.85rem;margin:0 0 .5rem;">Tick fields to return only those - none ticked returns everything.</p>
                         <div id="ep-fields-list" style="display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;"></div>
                     </div>
                 </div>
@@ -119,7 +119,7 @@
             <div class="form-group">
                 <label class="form-label" for="tryit-query">Extra query string (optional)</label>
                 <input type="text" class="form-input" id="tryit-query" placeholder="nation=France&status=published">
-                <p class="text-muted" style="font-size:.8rem;margin:.25rem 0 0;">Applied as extra filters <em>on top of</em> the definition's own filters (which always win). Only fields this endpoint returns can be filtered; operators work too — e.g. <code>title_contains=cup</code>. <code>page</code>, <code>limit</code>, <code>sort</code> and <code>order</code> control pagination/sort instead (<code>limit</code> is capped at the endpoint's own limit); <code>search</code> is reserved.</p>
+                <p class="text-muted" style="font-size:.8rem;margin:.25rem 0 0;">Applied as extra filters <em>on top of</em> the definition's own filters (which always win). Only fields this endpoint returns can be filtered; operators work too - e.g. <code>title_contains=cup</code>. <code>page</code>, <code>limit</code>, <code>sort</code> and <code>order</code> control pagination/sort instead (<code>limit</code> is capped at the endpoint's own limit); <code>search</code> is reserved.</p>
             </div>
             <button class="btn btn-primary" id="tryit-send" style="width:100%;"><span data-icon="play"></span> Send</button>
             <div id="tryit-result" style="display:none;margin-top:.75rem;">
@@ -131,7 +131,7 @@
 
                 <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem;">
                     <span class="form-label" style="margin:0;">Response</span>
-                    <span id="tryit-status" class="badge badge-secondary">—</span>
+                    <span id="tryit-status" class="badge badge-secondary">-</span>
                 </div>
                 <div id="tryit-headers-group">
                     <p class="text-muted" style="font-size:.78rem;margin:0 0 .2rem;text-transform:uppercase;letter-spacing:.03em;">Headers</p>

package/admin/js/templates/api-endpoints.html

@@ -4,7 +4,7 @@
         <a class="btn btn-primary" href="#/api-endpoints/new"><span data-icon="plus"></span> New endpoint</a>
     </div>
 </div>
-<p class="text-muted mb-4">Custom REST endpoints over collection data, served at <code>/api/x/&lt;project&gt;&lt;path&gt;</code>. Each endpoint binds a clean URL to a fixed collection query — definitions are data, never code.</p>
+<p class="text-muted mb-4">Custom REST endpoints over collection data, served at <code>/api/x/&lt;project&gt;&lt;path&gt;</code>. Each endpoint binds a clean URL to a fixed collection query - definitions are data, never code.</p>
 
 <div class="card">
     <div class="card-body">

package/admin/js/templates/api-reference.html

@@ -18,7 +18,7 @@
       </div>
 
       <p class="lead">
-        Pick an area below — each opens as its own page, and every area is listed under
+        Pick an area below - each opens as its own page, and every area is listed under
         <strong>Documentation → API Reference</strong> in the sidebar.
       </p>
 

package/admin/js/templates/block-editor.html

@@ -28,7 +28,7 @@
         <div class="mt-3">
             <label class="form-label">Project</label>
             <select id="block-project" class="form-input">
-                <option value="">— none —</option>
+                <option value="">- none -</option>
             </select>
             <small class="text-muted">Tag this block to a project for grouping.</small>
         </div>
@@ -91,7 +91,7 @@
             </div>
         </div>
 
-        <!-- Editor body — split pane -->
+        <!-- Editor body - split pane -->
         <div id="block-editor-body" class="editor-body editor-mode-split" style="min-height:460px;">
 
             <!-- Write pane -->
@@ -106,7 +106,7 @@
 
             <!-- Preview pane -->
             <div class="editor-pane editor-pane--preview" style="flex-direction:column;overflow:hidden;">
-                <!-- Sample data inputs — auto-populated by JS -->
+                <!-- Sample data inputs - auto-populated by JS -->
                 <div id="block-sample-data" style="
                     border-bottom:1px solid var(--dm-border,rgba(255,255,255,.08));
                     padding:.6rem .75rem;
@@ -139,7 +139,7 @@
             <code class="dm-code-inline" style="font-size:.9em;">@keyframes</code>,
             <code class="dm-code-inline" style="font-size:.9em;">@font-face</code>, and
             <code class="dm-code-inline" style="font-size:.9em;">@import</code>
-            cannot be scoped — use site-wide Custom CSS in Settings for those.
+            cannot be scoped - use site-wide Custom CSS in Settings for those.
         </p>
         <textarea id="block-css"
                   class="editor-textarea"
@@ -171,7 +171,7 @@ h2 { font-size: 1.5rem; }
             <tbody>
             <tr>
                 <td><code class="dm-code-inline">&#123;&#123;fieldName&#125;&#125;</code></td>
-                <td>Any entry field — e.g. <code class="dm-code-inline">&#123;&#123;title&#125;&#125;</code>, <code class="dm-code-inline">&#123;&#123;rating&#125;&#125;</code>,
+                <td>Any entry field - e.g. <code class="dm-code-inline">&#123;&#123;title&#125;&#125;</code>, <code class="dm-code-inline">&#123;&#123;rating&#125;&#125;</code>,
                     <code class="dm-code-inline">&#123;&#123;message&#125;&#125;</code></td>
             </tr>
             <tr>
@@ -209,7 +209,7 @@ h2 { font-size: 1.5rem; }
             <code class="dm-code-inline">mm</code> <code class="dm-code-inline">m</code>
             <code class="dm-code-inline">ss</code> <code class="dm-code-inline">s</code>
             <code class="dm-code-inline">A</code> <code class="dm-code-inline">a</code>
-            — any literal character that isn't one of these tokens passes through unchanged
+            - any literal character that isn't one of these tokens passes through unchanged
             (so <code class="dm-code-inline">DD/MM/YYYY</code>, <code class="dm-code-inline">HH:mm</code>,
             and <code class="dm-code-inline">dddd D MMMM YYYY</code> all work).
         </p>

package/admin/js/templates/collection-editor.html

@@ -57,7 +57,7 @@
                         <div class="col-6">
                             <label class="form-label">Project</label>
                             <select id="collection-project" class="form-input">
-                                <option value="">— none —</option>
+                                <option value="">- none -</option>
                             </select>
                             <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">Tag this collection to a project for grouping.</p>
                         </div>

package/admin/js/templates/component-editor.html

@@ -31,7 +31,7 @@
         <div class="mt-3">
             <label class="form-label">Project</label>
             <select id="component-project" class="form-input">
-                <option value="">— none —</option>
+                <option value="">- none -</option>
             </select>
             <small class="text-muted">Tag this component to a project for grouping.</small>
         </div>
@@ -43,7 +43,7 @@
     </div>
 </div>
 
-<!-- Editor body — tabs on the left, preview on the right -->
+<!-- Editor body - tabs on the left, preview on the right -->
 <div class="card card-collapsible editor-card mb-3">
     <div class="card-header">
         <h2>Source</h2>

package/admin/js/templates/dashboard/cache.html

@@ -8,12 +8,12 @@
 <div class="dash-cache-grid">
     <div class="dash-cache-stat">
         <div class="dash-cache-stat-label">Hit rate</div>
-        <div class="dash-cache-stat-value" data-field="hit-rate">—</div>
+        <div class="dash-cache-stat-value" data-field="hit-rate">-</div>
         <div class="dash-cache-stat-sub" data-field="hits-misses">no traffic yet</div>
     </div>
     <div class="dash-cache-stat">
         <div class="dash-cache-stat-label">Entries</div>
-        <div class="dash-cache-stat-value" data-field="size">—</div>
+        <div class="dash-cache-stat-value" data-field="size">-</div>
         <div class="dash-cache-stat-sub" data-field="size-bar"><span data-field="size-fill"></span></div>
     </div>
     <div class="dash-cache-stat">
@@ -24,7 +24,7 @@
     <div class="dash-cache-stat">
         <div class="dash-cache-stat-label">Last cleared</div>
         <div class="dash-cache-stat-value" data-field="last-cleared">never</div>
-        <div class="dash-cache-stat-sub" data-field="driver">driver: —</div>
+        <div class="dash-cache-stat-sub" data-field="driver">driver: -</div>
     </div>
 </div>
 <div class="dash-cache-actions">

package/admin/js/templates/dashboard/journeys.html

@@ -1,4 +1,4 @@
-<h3>User journeys — last 7 days</h3>
+<h3>User journeys - last 7 days</h3>
 <div class="dash-journey-grid">
     <div>
         <h4>Top entry pages</h4>
@@ -13,5 +13,5 @@
         <div data-field="paths"></div>
     </div>
 </div>
-<p class="dash-bounce">Bounce rate: <strong data-field="bounce">—</strong></p>
-<p class="dash-empty" hidden>No journey data yet — encourage some traffic and check back.</p>
+<p class="dash-bounce">Bounce rate: <strong data-field="bounce">-</strong></p>
+<p class="dash-empty" hidden>No journey data yet - encourage some traffic and check back.</p>

package/admin/js/templates/dashboard/kpi-strip.html

@@ -1,7 +1,7 @@
 <div class="dash-card dash-kpi">
     <span class="dash-kpi-icon" data-icon="trending-up"></span>
     <div>
-        <div class="dash-kpi-value" data-field="hits-today">—</div>
+        <div class="dash-kpi-value" data-field="hits-today">-</div>
         <div class="dash-kpi-label">Hits today</div>
         <div class="dash-kpi-delta" data-field="hits-delta"></div>
     </div>
@@ -9,14 +9,14 @@
 <div class="dash-card dash-kpi">
     <span class="dash-kpi-icon" data-icon="users"></span>
     <div>
-        <div class="dash-kpi-value" data-field="active-sessions">—</div>
+        <div class="dash-kpi-value" data-field="active-sessions">-</div>
         <div class="dash-kpi-label">Active sessions (5m)</div>
     </div>
 </div>
 <div class="dash-card dash-kpi">
     <span class="dash-kpi-icon" data-icon="inbox"></span>
     <div>
-        <div class="dash-kpi-value" data-field="submissions-week">—</div>
+        <div class="dash-kpi-value" data-field="submissions-week">-</div>
         <div class="dash-kpi-label">Submissions this week</div>
     </div>
 </div>

package/admin/js/templates/dashboard/top-pages.html

@@ -1,3 +1,3 @@
-<h3>Top pages — last 7 days</h3>
+<h3>Top pages - last 7 days</h3>
 <div data-field="rows"></div>
 <p class="dash-empty" hidden>No traffic recorded yet.</p>

package/admin/js/templates/dashboard/traffic-chart.html

@@ -1,3 +1,3 @@
-<h3>Traffic — last 30 days</h3>
+<h3>Traffic - last 30 days</h3>
 <div class="dash-chart-wrap"><canvas id="dash-traffic-canvas"></canvas></div>
 <p class="dash-empty" hidden>No traffic recorded yet.</p>

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

@@ -138,7 +138,7 @@
                   <h3><span class="method-badge method-post">POST</span><span class="endpoint-path">/api/actions/:slug/public</span>
                   </h3>
                   <p class="auth-note">Requires: JWT + role in <code>access.roles</code></p>
-                  <p>Execute an action publicly. Always requires a valid JWT — the role is checked against <code>access.roles</code>.
+                  <p>Execute an action publicly. Always requires a valid JWT - the role is checked against <code>access.roles</code>.
                       Request body and response shape are identical to the admin <code>/execute</code> endpoint.</p>
 
     </div>

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

@@ -156,7 +156,7 @@
                       </tr>
                       </tbody>
                   </table>
-                  <pre class="code-block"><code>// Response 201 — returns the created schema object
+                  <pre class="code-block"><code>// Response 201 - returns the created schema object
 
 // Error 409
 { "error": "A collection with that slug already exists" }</code></pre>
@@ -219,7 +219,7 @@
                       </tr>
                       <tr>
                           <td><code>search</code></td>
-                          <td>—</td>
+                          <td>-</td>
                           <td>Full-text search query</td>
                       </tr>
                       </tbody>
@@ -236,7 +236,7 @@
                   </h3>
                   <p class="auth-note">Requires Bearer token + <code>collections</code> permission.</p>
                   <p>Create a new entry. Data is validated against the collection schema.</p>
-                  <pre class="code-block"><code>// Response 201 — returns the created entry</code></pre>
+                  <pre class="code-block"><code>// Response 201 - returns the created entry</code></pre>
 
                   <h3><span class="method-badge method-put">PUT</span><span class="endpoint-path">/api/collections/:slug/entries/:id</span>
                   </h3>
@@ -280,7 +280,7 @@
                       </tr>
                       </tbody>
                   </table>
-                  <pre class="code-block"><code>// Response 200 — file download
+                  <pre class="code-block"><code>// Response 200 - file download
 // Content-Disposition: attachment; filename="blog-entries.json"</code></pre>
 
                   <h3><span class="method-badge method-post">POST</span><span class="endpoint-path">/api/collections/:slug/import</span>

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

@@ -159,7 +159,7 @@
                       </tr>
                       </tbody>
                   </table>
-                  <pre class="code-block"><code>// Response 201 — returns the created page object</code></pre>
+                  <pre class="code-block"><code>// Response 201 - returns the created page object</code></pre>
 
                   <h3><span class="method-badge method-put">PUT</span><span class="endpoint-path">/api/pages/*</span>
                   </h3>
@@ -191,7 +191,7 @@
                       </tr>
                       </tbody>
                   </table>
-                  <pre class="code-block"><code>// Response 200 — returns the updated page object
+                  <pre class="code-block"><code>// Response 200 - returns the updated page object
 
 // Error 404
 { "error": "Page not found" }

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

@@ -122,7 +122,7 @@
                   <h3><span class="method-badge method-get">GET</span><span class="endpoint-path">/api/plugins/admin-config</span>
                   </h3>
                   <p class="auth-note">Requires Bearer token (any role).</p>
-                  <p>Return the merged admin configuration for all enabled plugins — sidebar items, SPA routes, and view
+                  <p>Return the merged admin configuration for all enabled plugins - sidebar items, SPA routes, and view
                       entry points.</p>
                   <pre class="code-block"><code>// Response 200
 {

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

@@ -79,9 +79,9 @@
                   <h3><span class="method-badge method-put">PUT</span><span class="endpoint-path">/api/settings</span>
                   </h3>
                   <p class="auth-note">Requires Bearer token + <code>settings</code> permission.</p>
-                  <p>Replace the site settings object. Send the full merged object — partial updates overwrite the
+                  <p>Replace the site settings object. Send the full merged object - partial updates overwrite the
                       entire config.</p>
-                  <pre class="code-block"><code>// Request body — full site settings object
+                  <pre class="code-block"><code>// Request body - full site settings object
 { "siteName": "My Site", "adminTheme": "ocean-dark", ... }
 
 // Response 200

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

@@ -172,7 +172,7 @@
                       </tr>
                       </tbody>
                   </table>
-                  <pre class="code-block"><code>// Response 200 — returns the updated user object</code></pre>
+                  <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>

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

@@ -1,5 +1,5 @@
 <div class="view-header">
-  <h1><span data-icon="component"></span> Components — How-To</h1>
+  <h1><span data-icon="component"></span> Components - How-To</h1>
   <a href="#/components/new" class="btn btn-primary btn-sm"><span data-icon="plus"></span> New Component</a>
 </div>
 
@@ -28,7 +28,7 @@
           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>
-        <li><strong>Save</strong>. It compiles first — fix any reported errors and it lands on disk.</li>
+        <li><strong>Save</strong>. It compiles first - fix any reported errors and it lands on disk.</li>
       </ol>
 
       <hr>
@@ -49,7 +49,7 @@
 
       <h2>Add state and respond to a click</h2>
       <p>Render the markup with <code>data-action</code> hooks, then attach <strong>one</strong> delegated
-        listener to the shadow root in <code>onMount</code>. Mutate state with <code>this.set()</code> — the
+        listener to the shadow root in <code>onMount</code>. Mutate state with <code>this.set()</code> - the
         template re-renders automatically.</p>
       <pre class="code-block"><code>&lt;template&gt;
 &lt;div class="dm-counter"&gt;
@@ -153,7 +153,7 @@ onMount() { this.set({ count: this.props.initial }); }</code></pre>
       <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>
+          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>
       </ol>

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

@@ -1,5 +1,5 @@
 <div class="view-header">
-  <h1><span data-icon="component"></span> Components — Reference</h1>
+  <h1><span data-icon="component"></span> Components - Reference</h1>
   <a href="#/components" class="btn btn-ghost btn-sm"><span data-icon="component"></span> Manage Components</a>
 </div>
 
@@ -17,8 +17,8 @@
 
       <p class="lead">
         Components are small, reusable custom elements you author in one file and drop into any page.
-        Each one is a single <code>.dmc</code> file with up to four sections — <code>&lt;template&gt;</code>,
-        <code>&lt;props&gt;</code>, <code>&lt;script&gt;</code> and <code>&lt;style&gt;</code> — and the CMS
+        Each one is a single <code>.dmc</code> file with up to four sections - <code>&lt;template&gt;</code>,
+        <code>&lt;props&gt;</code>, <code>&lt;script&gt;</code> and <code>&lt;style&gt;</code> - and the CMS
         compiles it to a self-contained browser module that registers a
         <code>&lt;dm-<em>name</em>&gt;</code> custom element. No build step, no framework wiring.
       </p>
@@ -55,13 +55,13 @@ export default {};
 .dm-greeting { font-weight: 600; }
 &lt;/style&gt;</code></pre>
 
-      <p>Saving compiles the source <em>before</em> it is written to disk — a malformed component never
+      <p>Saving compiles the source <em>before</em> it is written to disk - a malformed component never
         reaches the filesystem. The compiler reports precise, per-block errors (see
         <a href="#/docs/components-rules">Rules</a> for every error code).</p>
 
       <hr>
 
-      <h2><code>&lt;template&gt;</code> — markup</h2>
+      <h2><code>&lt;template&gt;</code> - markup</h2>
 
       <p>Plain HTML plus a Handlebars-style expression syntax. Data comes from the component's
         <code>props</code> and reactive <code>data()</code> state. Supported syntax:</p>
@@ -92,7 +92,7 @@ export default {};
 
       <hr>
 
-      <h2><code>&lt;props&gt;</code> — typed inputs</h2>
+      <h2><code>&lt;props&gt;</code> - typed inputs</h2>
 
       <p>A JSON <strong>object</strong> (not an array). Each key is a prop name; each value declares a
         <code>type</code> and may add a <code>default</code> and a <code>label</code> (shown in the editor's
@@ -110,17 +110,17 @@ export default {};
 
       <p>Props are passed as HTML attributes where the value is always a string; the runtime coerces it to
         the declared type (so <code>step="2"</code> arrives as the number <code>2</code>). Read props inside
-        <code>onMount()</code> and methods via <code>this.props</code> — see the script API below.</p>
+        <code>onMount()</code> and methods via <code>this.props</code> - see the script API below.</p>
 
       <hr>
 
-      <h2><code>&lt;script&gt;</code> — behaviour</h2>
+      <h2><code>&lt;script&gt;</code> - behaviour</h2>
 
       <p>An ES module with a single <code>export default { … }</code> object describing the component. The
         export is the only requirement; every key inside it is optional.</p>
 
       <pre class="code-block"><code>export default {
-  // Reactive state. Called WITHOUT `this` — do not read props here.
+  // Reactive state. Called WITHOUT `this` - do not read props here.
   data() { return { count: 0 }; },
 
   // Methods are bound to the component context (`this`).
@@ -128,7 +128,7 @@ export default {};
     inc() { this.set({ count: this.data.count + this.props.step }); }
   },
 
-  // Lifecycle — bound to `this`; props and the element are available here.
+  // Lifecycle - bound to `this`; props and the element are available here.
   onMount()   { this.set({ count: this.props.initial }); },
   onUnmount() { /* clean up timers, listeners, etc. */ }
 };</code></pre>
@@ -138,10 +138,10 @@ export default {};
         <tr><th>Key</th><th>What it is</th></tr>
         </thead>
         <tbody>
-        <tr><td><code>data()</code></td><td>Returns the initial reactive state object. Called with no <code>this</code> binding — <strong>props are not available here</strong>; initialise from props in <code>onMount()</code>.</td></tr>
+        <tr><td><code>data()</code></td><td>Returns the initial reactive state object. Called with no <code>this</code> binding - <strong>props are not available here</strong>; initialise from props in <code>onMount()</code>.</td></tr>
         <tr><td><code>methods</code></td><td>Object of functions bound to the component context.</td></tr>
         <tr><td><code>onMount()</code></td><td>Lifecycle hook fired when the element is attached to the DOM. Props and the element node are available.</td></tr>
-        <tr><td><code>onUnmount()</code></td><td>Lifecycle hook fired when the element is removed — clear intervals/listeners here.</td></tr>
+        <tr><td><code>onUnmount()</code></td><td>Lifecycle hook fired when the element is removed - clear intervals/listeners here.</td></tr>
         </tbody>
       </table>
 
@@ -155,7 +155,7 @@ export default {};
         <tr><td><code>this.props</code></td><td>The (type-coerced) props the element was used with.</td></tr>
         <tr><td><code>this.data</code></td><td>The current reactive state snapshot.</td></tr>
         <tr><td><code>this.set({ … })</code></td><td>Patch reactive state; the template re-renders with the new values.</td></tr>
-        <tr><td><code>this.el</code></td><td>The custom-element DOM node. Its rendered markup lives in <code>this.el.shadowRoot</code> — attach event listeners there.</td></tr>
+        <tr><td><code>this.el</code></td><td>The custom-element DOM node. Its rendered markup lives in <code>this.el.shadowRoot</code> - attach event listeners there.</td></tr>
         </tbody>
       </table>
 
@@ -165,7 +165,7 @@ export default {};
 
       <hr>
 
-      <h2><code>&lt;style&gt;</code> — scoped CSS</h2>
+      <h2><code>&lt;style&gt;</code> - scoped CSS</h2>
 
       <p>Optional. CSS here is scoped to the component's shadow DOM, so selectors can't leak out and the
         page's styles can't leak in. By convention components prefix their root class with
@@ -231,7 +231,7 @@ 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 via the <code>registerComponent()</code> hook - 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>
@@ -239,14 +239,14 @@ export default {};
       <hr>
 
       <h2>The five seeded starter components</h2>
-      <p>Fresh installs ship with these (never overwritten if you've edited them) — open any in
+      <p>Fresh installs ship with these (never overwritten if you've edited them) - open any in
         <a href="#/components">Components</a> to read the full source:</p>
       <ul>
-        <li><code>counter</code> — state, methods and lifecycle in one small example</li>
-        <li><code>copy-button</code> — an async method using the clipboard API</li>
-        <li><code>reveal-panel</code> — conditional rendering plus a <code>&lt;slot&gt;</code></li>
-        <li><code>testimonial-card</code> — presentational only (empty <code>export default {}</code>)</li>
-        <li><code>countdown-timer</code> — an interval started in <code>onMount</code> and cleared in <code>onUnmount</code></li>
+        <li><code>counter</code> - state, methods and lifecycle in one small example</li>
+        <li><code>copy-button</code> - an async method using the clipboard API</li>
+        <li><code>reveal-panel</code> - conditional rendering plus a <code>&lt;slot&gt;</code></li>
+        <li><code>testimonial-card</code> - presentational only (empty <code>export default {}</code>)</li>
+        <li><code>countdown-timer</code> - an interval started in <code>onMount</code> and cleared in <code>onUnmount</code></li>
       </ul>
 
       <hr>