galath 1.0.4 → 1.0.5

package/playground/chapters/10-components.xml

@@ -1,152 +0,0 @@
-<!--
-  chapters/10-components.xml
-
-  Components: <component name="..." tag="..."> compiles into a real
-  Custom Element. Props become signals via attributes; <style> is auto-
-  scoped; <on:mount>/<on:unmount> let components run setup/teardown.
-
-  This chapter defines a tiny <x-counter-pair> component inline and uses
-  it twice on the page.
--->
-<galath xmlns:bind="urn:galath:bind" xmlns:on="urn:galath:on" xmlns:use="urn:galath:use" xmlns:drag="urn:galath:drag" xmlns:drop="urn:galath:drop" xmlns:class="urn:galath:class">
-  <!--
-    A reusable counter component scoped to this chapter. Has props:
-       label  - the heading.
-       step   - how much each tick adds.
-    And a private `count` signal.
-
-    The <style> block is automatically prefixed so its rules only apply
-    inside instances of this component.
-  -->
-  <component name="counter-pair" tag="x-counter-pair" label="Counter" step="1">
-    <style>
-      .panel { border: 1px dashed rgba(255,255,255,.2); border-radius: .5rem; padding: 1rem; }
-      .panel:hover { border-color: rgba(13, 202, 240, .5); }
-      .number { font-size: 2rem; font-weight: 600; }
-    </style>
-
-    <model>
-      <signal name="count" value="0" />
-    </model>
-
-    <controller>
-      <action name="up"><set signal="count" value="count + Number(step)" /></action>
-      <action name="down"><set signal="count" value="count - Number(step)" /></action>
-      <action name="reset"><set signal="count" value="0" /></action>
-    </controller>
-
-    <view>
-      <div class="panel">
-        <div class="d-flex align-items-center justify-content-between mb-2">
-          <strong>{label}</strong>
-          <small class="text-secondary">step: {step}</small>
-        </div>
-        <div class="number text-info">{count}</div>
-        <div class="d-flex gap-2 mt-2">
-          <button class="btn btn-sm btn-info" on:click="#up">+ {step}</button>
-          <button class="btn btn-sm btn-outline-light" on:click="#down">- {step}</button>
-          <button class="btn btn-sm btn-outline-secondary" on:click="#reset">reset</button>
-        </div>
-      </div>
-    </view>
-  </component>
-
-  <component name="chapter-components" tag="x-chapter-components">
-    <model>
-      <signal name="snippet"><![CDATA[<component name="counter-pair" tag="x-counter-pair" label="Counter" step="1">
-  <style>
-    .panel { border: 1px dashed rgba(255,255,255,.2); padding: 1rem; }
-  </style>
-
-  <model>
-    <signal name="count" value="0" />
-  </model>
-
-  <controller>
-    <action name="up">
-      <set signal="count" value="count + Number(step)" />
-    </action>
-  </controller>
-
-  <view>
-    <div class="panel">
-      <strong>{label}</strong>
-      <div>{count}</div>
-      <button on:click="#up">+ {step}</button>
-    </div>
-  </view>
-</component>
-
-<!-- Use it: -->
-<x-counter-pair label="Visitors" step="1" />
-<x-counter-pair label="Score" step="10" />]]></signal>
-    </model>
-
-    <view>
-      <div class="px-4 py-5">
-        <x-chapter-heading icon="bi-boxes" title="Components"
-          subtitle="Compile your own custom elements with props, scoped style, and lifecycle hooks." />
-
-        <div class="row g-4 mb-4">
-          <div class="col-lg-6">
-            <div class="card xes-card h-100">
-              <div class="card-body">
-                <h2 class="h5"><i class="bi bi-journal-text me-2 text-info"></i>How it works</h2>
-                <p class="text-secondary">
-                  Every <code>&lt;component&gt;</code> registers a Custom Element with the browser.
-                  Once registered, it's just HTML - you can use it anywhere, even inside other
-                  Galath views.
-                </p>
-                <ul class="text-secondary">
-                  <li><strong>Props</strong> are attributes on the component definition. Their
-                      default value is the attribute value. The runtime maps them to signals of
-                      the same name in the component's scope.</li>
-                  <li><strong>Scoped style</strong>: a <code>&lt;style&gt;</code> block at the top
-                      of the component is rewritten so its rules only match inside that
-                      component's root.</li>
-                  <li><strong>Lifecycle</strong>: <code>&lt;on:mount&gt;</code> runs after
-                      connect; <code>&lt;on:unmount&gt;</code> runs before disconnect. Both
-                      accept the same operation vocabulary as commands and actions.</li>
-                </ul>
-                <p class="text-secondary mb-0">
-                  The two counter panels below are the same component with different props - one
-                  source of truth, two independent instances.
-                </p>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-6">
-            <div class="card xes-card h-100">
-              <div class="card-header bg-transparent d-flex justify-content-between align-items-center">
-                <strong><i class="bi bi-code-slash me-2"></i>Source</strong>
-                <div class="btn-group btn-group-sm" role="group"><button class="btn btn-outline-info" on:click="window.galathRunSnippet(snippet)" title="Open this snippet in a new tab"><i class="bi bi-play-fill me-1"></i>Run</button><button class="btn btn-outline-info" use:copy="snippet" title="Copy to clipboard"><i class="bi bi-clipboard me-1"></i>Copy</button></div>
-              </div>
-              <div class="card-body p-0">
-                <pre class="xes-code rounded p-3 mb-0"><code><text value="snippet" /></code></pre>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="card xes-card">
-          <div class="card-header bg-transparent">
-            <strong><i class="bi bi-play-circle me-2"></i>Live demo</strong>
-          </div>
-          <div class="card-body">
-            <div class="row g-3">
-              <div class="col-md-4">
-                <x-counter-pair label="Visitors" step="1" />
-              </div>
-              <div class="col-md-4">
-                <x-counter-pair label="Score" step="10" />
-              </div>
-              <div class="col-md-4">
-                <x-counter-pair label="Temperature" step="5" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </view>
-  </component>
-</galath>

package/playground/chapters/11-imports.xml

@@ -1,108 +0,0 @@
-<!--
-  chapters/11-imports.xml
-
-  <import src="..."> - the modularity primitive. Galath's answer to ES
-  modules. Every chapter you've seen in this playground is a separate
-  XML file, imported into index.html.
--->
-<galath xmlns:bind="urn:galath:bind" xmlns:on="urn:galath:on" xmlns:use="urn:galath:use" xmlns:drag="urn:galath:drag" xmlns:drop="urn:galath:drop" xmlns:class="urn:galath:class">
-  <component name="chapter-imports" tag="x-chapter-imports">
-    <model>
-      <signal name="snippetEntry"><![CDATA[<!-- index.html, inside the embedded <galath> source -->
-<galath xmlns:bind="urn:galath:bind" xmlns:on="urn:galath:on" xmlns:use="urn:galath:use" xmlns:drag="urn:galath:drag" xmlns:drop="urn:galath:drop" xmlns:class="urn:galath:class">
-  <import src="./playground/components/chapter-shell.xml" />
-  <import src="./playground/chapters/01-welcome.xml" />
-  <import src="./playground/chapters/02-signals.xml" />
-  <!-- ...one line per chapter... -->
-  <import src="./playground/app.xml" />
-
-  <application name="playground">
-    <x-playground />
-  </application>
-</galath>]]></signal>
-
-      <signal name="snippetChild"><![CDATA[<!-- playground/chapters/01-welcome.xml -->
-<galath xmlns:bind="urn:galath:bind" xmlns:on="urn:galath:on" xmlns:use="urn:galath:use" xmlns:drag="urn:galath:drag" xmlns:drop="urn:galath:drop" xmlns:class="urn:galath:class">
-  <component name="chapter-welcome" tag="x-chapter-welcome">
-    <view>
-      <h1>Welcome</h1>
-    </view>
-  </component>
-</galath>]]></signal>
-    </model>
-
-    <view>
-      <div class="px-4 py-5">
-        <x-chapter-heading icon="bi-arrow-down-up" title="Imports"
-          subtitle="Split a Galath app across files. The same way ES modules split a JS app." />
-
-        <div class="row g-4 mb-4">
-          <div class="col-lg-6">
-            <div class="card xes-card h-100">
-              <div class="card-body">
-                <h2 class="h5"><i class="bi bi-journal-text me-2 text-info"></i>How it works</h2>
-                <p class="text-secondary">
-                  An <code>&lt;import src="./path/to/file.xml"/&gt;</code> element is replaced at
-                  boot time by the children of the imported file's root. The import is fetched
-                  asynchronously, the result is cached by URL, and nested imports inside the
-                  imported file are resolved relative to that file's URL.
-                </p>
-                <p class="text-secondary">
-                  The fetched file's root can be:
-                </p>
-                <ul class="text-secondary">
-                  <li><code>&lt;galath&gt;</code> or <code>&lt;fragment&gt;</code> - splices in
-                      its <em>children</em>. Use this when one file ships several components.</li>
-                  <li>Anything else - splices in the root element itself. Use this when one file
-                      is one component.</li>
-                </ul>
-                <p class="text-secondary mb-0">
-                  Cycles are detected by URL and broken silently. If a fetch fails, a
-                  <code>&lt;parseerror&gt;</code> element appears in place so you can spot the
-                  problem.
-                </p>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-6">
-            <div class="card xes-card h-100">
-              <div class="card-header bg-transparent">
-                <strong><i class="bi bi-house me-2"></i>Entry document</strong>
-              </div>
-              <div class="card-body p-0">
-                <pre class="xes-code rounded p-3 mb-0"><code><text value="snippetEntry" /></code></pre>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="card xes-card mb-4">
-          <div class="card-header bg-transparent">
-            <strong><i class="bi bi-file-earmark-code me-2"></i>One imported chapter</strong>
-          </div>
-          <div class="card-body p-0">
-            <pre class="xes-code rounded p-3 mb-0"><code><text value="snippetChild" /></code></pre>
-          </div>
-        </div>
-
-        <div class="card xes-card">
-          <div class="card-header bg-transparent">
-            <strong><i class="bi bi-lightbulb me-2"></i>You're already inside one</strong>
-          </div>
-          <div class="card-body">
-            <p class="text-secondary mb-2">
-              Every chapter you've clicked through is a separate <code>.xml</code> file under
-              <code>./playground/chapters/</code>. The shared chapter heading is in
-              <code>./playground/components/</code>. Open <code>index.html</code> to see how it
-              all wires together - it's a small file because the work is delegated to imports.
-            </p>
-            <p class="text-secondary mb-0">
-              Rule of thumb: when an XML file gets long enough that you start scrolling to find
-              things, break it into imports. Same heuristic as JS modules.
-            </p>
-          </div>
-        </div>
-      </div>
-    </view>
-  </component>
-</galath>

package/playground/chapters/12-expressions.xml

@@ -1,161 +0,0 @@
-<!--
-  chapters/12-expressions.xml
-
-  Documents the expression language: where expressions run, what names are
-  in scope, path shortcuts, and how JavaScript's type rules apply.
--->
-<galath xmlns:bind="urn:galath:bind" xmlns:on="urn:galath:on" xmlns:use="urn:galath:use" xmlns:drag="urn:galath:drag" xmlns:drop="urn:galath:drop" xmlns:class="urn:galath:class">
-  <component name="chapter-expressions" tag="x-chapter-expressions">
-    <model>
-      <signal name="count" value="10" />
-      <signal name="step"  value="10" />
-      <signal name="name"  value="Galath" />
-
-      <signal name="snippet"><![CDATA[<model>
-  <signal name="count" value="10" />
-  <signal name="step"  value="10" />
-</model>
-
-<view>
-  <input type="number" bind:value="step" />
-
-  <!-- Inline event code gets signals and helpers in scope. -->
-  <button on:click="set('count', count + step)">+</button>
-
-  <!-- test/value attributes are JavaScript expressions. -->
-  <if test="count >= 20">large enough</if>
-  <text value="count + step" />
-</view>]]></signal>
-    </model>
-
-    <view>
-      <div class="px-4 py-5">
-        <x-chapter-heading icon="bi-braces" title="Expressions"
-          subtitle="JavaScript expressions with signals, XML paths, locals, and helpers in scope." />
-
-        <div class="row g-4 mb-4">
-          <div class="col-lg-6">
-            <div class="card xes-card h-100">
-              <div class="card-body">
-                <h2 class="h5"><i class="bi bi-journal-text me-2 text-info"></i>How it works</h2>
-                <p class="text-secondary">
-                  Galath evaluates expressions as JavaScript against a scoped context. Every
-                  signal is available by name, repeat locals are available as both
-                  <code>item</code> and <code>$item</code>, and event handlers receive
-                  <code>$event</code>.
-                </p>
-                <p class="text-secondary">
-                  Simple names and XML paths are resolved directly. A bare <code>count</code>
-                  reads a signal, while <code>$ch/@title</code> or <code>/chapters/chapter</code>
-                  reads the instance tree. Once you use operators like <code>+</code>,
-                  <code>&gt;=</code>, or <code>?</code>, normal JavaScript rules apply.
-                </p>
-                <p class="text-secondary mb-0">
-                  Values from <code>&lt;signal value="10"/&gt;</code> and XML instance
-                  attributes are coerced into primitives. Bound number and range inputs also
-                  write numbers back to signals, so arithmetic stays arithmetic.
-                </p>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-6">
-            <div class="card xes-card h-100">
-              <div class="card-header bg-transparent d-flex justify-content-between align-items-center">
-                <strong><i class="bi bi-code-slash me-2"></i>Source</strong>
-                <div class="btn-group btn-group-sm" role="group"><button class="btn btn-outline-info" on:click="window.galathRunSnippet(snippet)" title="Open this snippet in a new tab"><i class="bi bi-play-fill me-1"></i>Run</button><button class="btn btn-outline-info" use:copy="snippet" title="Copy to clipboard"><i class="bi bi-clipboard me-1"></i>Copy</button></div>
-              </div>
-              <div class="card-body p-0">
-                <pre class="xes-code rounded p-3 mb-0"><code><text value="snippet" /></code></pre>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="card xes-card mb-4">
-          <div class="card-header bg-transparent">
-            <strong><i class="bi bi-calculator me-2"></i>Live demo</strong>
-          </div>
-          <div class="card-body">
-            <div class="row g-3 align-items-end mb-4">
-              <div class="col-md-4">
-                <label class="form-label">Count</label>
-                <input class="form-control" type="number" bind:value="count" />
-              </div>
-              <div class="col-md-4">
-                <label class="form-label">Step</label>
-                <input class="form-control" type="number" bind:value="step" />
-              </div>
-              <div class="col-md-4 d-flex gap-2">
-                <button class="btn btn-info flex-grow-1" on:click="set('count', count + step)">
-                  <i class="bi bi-plus-circle me-1"></i>Add
-                </button>
-                <button class="btn btn-outline-light flex-grow-1" on:click="set('count', 10)">
-                  Reset
-                </button>
-              </div>
-            </div>
-
-            <div class="row g-3">
-              <div class="col-lg-6">
-                <div class="xes-pill rounded p-3 h-100">
-                  <div class="xes-tiny text-secondary mb-1">Expression</div>
-                  <code>count + step</code>
-                  <div class="display-6 mt-2">{count + step}</div>
-                  <small class="text-secondary">
-                    count is <code>{typeof count}</code>, step is <code>{typeof step}</code>.
-                  </small>
-                </div>
-              </div>
-              <div class="col-lg-6">
-                <div class="xes-pill rounded p-3 h-100">
-                  <div class="xes-tiny text-secondary mb-1">String expression</div>
-                  <div class="input-group mb-2">
-                    <span class="input-group-text">name</span>
-                    <input class="form-control" bind:value="name" />
-                  </div>
-                  <code>name + ' docs'</code>
-                  <div class="h4 mb-0 mt-2">{name + ' docs'}</div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="row g-4">
-          <div class="col-lg-6">
-            <div class="card xes-card h-100">
-              <div class="card-header bg-transparent">
-                <strong><i class="bi bi-diagram-2 me-2"></i>Where expressions run</strong>
-              </div>
-              <div class="card-body">
-                <ul class="text-secondary mb-0">
-                  <li><code>{name}</code> in text or attributes interpolates a value.</li>
-                  <li><code>&lt;text value="count + step"/&gt;</code> renders escaped text.</li>
-                  <li><code>&lt;if test="count &gt;= 20"&gt;</code> switches view branches.</li>
-                  <li><code>on:click="set('count', count + step)"</code> runs event code.</li>
-                  <li><code>&lt;set signal="count" value="count + step"/&gt;</code> updates state from controllers.</li>
-                </ul>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-6">
-            <div class="card xes-card h-100">
-              <div class="card-header bg-transparent">
-                <strong><i class="bi bi-box-arrow-in-right me-2"></i>What is in scope</strong>
-              </div>
-              <div class="card-body">
-                <ul class="text-secondary mb-0">
-                  <li>Signals: <code>count</code>, <code>step</code>, <code>name</code>.</li>
-                  <li>Repeat locals: <code>item</code>, <code>$item</code>, and <code>index</code>.</li>
-                  <li>Events: <code>$event</code> inside <code>on:*</code> handlers.</li>
-                  <li>Helpers: <code>set</code>, <code>valueOf</code>, <code>select</code>, <code>uid</code>, <code>attr</code>, <code>deleteNode</code>, <code>setNode</code>.</li>
-                  <li>XML paths: <code>/root/item</code>, <code>$item/@name</code>, and <code>$item/text()</code>.</li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </view>
-  </component>
-</galath>

package/playground/chapters/13-paths.xml

@@ -1,197 +0,0 @@
-<!--
-  chapters/13-paths.xml
-
-  Documents Galath's deliberately small instance-tree path grammar.
--->
-<galath xmlns:bind="urn:galath:bind" xmlns:on="urn:galath:on" xmlns:use="urn:galath:use" xmlns:drag="urn:galath:drag" xmlns:drop="urn:galath:drop" xmlns:class="urn:galath:class">
-  <component name="chapter-paths" tag="x-chapter-paths">
-    <model>
-      <instance>
-        <todos>
-          <todo id="a" text="Draft the path chapter" done="true">first todo text</todo>
-          <todo id="b" text="Test wildcard selectors" done="false">second todo text</todo>
-          <note id="n1" text="Wildcard also matches this note">note text</note>
-        </todos>
-        <projects>
-          <project id="docs">
-            <task id="a" text="Nested task" />
-          </project>
-        </projects>
-      </instance>
-
-      <signal name="snippet"><![CDATA[<repeat ref="/todos/todo" as="todo">
-  <text value="$todo/@text" />
-</repeat>
-
-<text value="/todos/todo[@id=a]/@text" />
-<text value="/todos/todo[2]/text()" />
-<repeat ref="/todos/*" as="item">
-  <text value="$item/@id" />
-</repeat>]]></signal>
-    </model>
-
-    <view>
-      <div class="px-4 py-5">
-        <x-chapter-heading icon="bi-signpost-split" title="Paths"
-          subtitle="A small, predictable path grammar for reading and writing XML instance data." />
-
-        <div class="row g-4 mb-4">
-          <div class="col-lg-6">
-            <div class="card xes-card h-100">
-              <div class="card-body">
-                <h2 class="h5"><i class="bi bi-journal-text me-2 text-info"></i>How it works</h2>
-                <p class="text-secondary">
-                  Galath paths address the component's XML instance tree. They look like a
-                  small subset of XPath, but they are intentionally simpler: walk direct
-                  children with <code>/</code>, filter one step with an attribute predicate,
-                  read attributes with <code>@</code>, read direct text with
-                  <code>text()</code>, and use <code>*</code> for a single wildcard step.
-                </p>
-                <p class="text-secondary mb-0">
-                  Paths show up in <code>repeat ref</code>, <code>items source</code>,
-                  <code>bind:value</code>, <code>setvalue ref</code>, <code>delete ref</code>,
-                  <code>listener observer</code>, <code>valueOf(path)</code>, and
-                  <code>&lt;text value="path"/&gt;</code>.
-                </p>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-6">
-            <div class="card xes-card h-100">
-              <div class="card-header bg-transparent d-flex justify-content-between align-items-center">
-                <strong><i class="bi bi-code-slash me-2"></i>Source</strong>
-                <button class="btn btn-sm btn-outline-info" use:copy="snippet"><i class="bi bi-clipboard me-1"></i>Copy</button>
-              </div>
-              <div class="card-body p-0">
-                <pre class="xes-code rounded p-3 mb-0"><code><text value="snippet" /></code></pre>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="card xes-card mb-4">
-          <div class="card-header bg-transparent">
-            <strong><i class="bi bi-list-check me-2"></i>Cheat sheet</strong>
-          </div>
-          <div class="card-body">
-            <div class="table-responsive">
-              <table class="table table-dark table-sm align-middle mb-0">
-                <thead>
-                  <tr>
-                    <th>Path</th>
-                    <th>Meaning</th>
-                    <th>Result in this chapter</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <td><code>/foo/bar</code></td>
-                    <td>Direct child steps from the instance root.</td>
-                    <td><code>/todos/todo</code>: {select('/todos/todo').length} todo nodes</td>
-                  </tr>
-                  <tr>
-                    <td><code>/foo/bar[@id=x]</code></td>
-                    <td>Attribute equality predicate on one step.</td>
-                    <td><code>/todos/todo[@id=a]</code>: {valueOf('/todos/todo[@id=a]/@text')}</td>
-                  </tr>
-                  <tr>
-                    <td><code>/foo/bar[n]</code></td>
-                    <td>1-based index after matching the step.</td>
-                    <td><code>/todos/todo[2]</code>: {valueOf('/todos/todo[2]/@text')}</td>
-                  </tr>
-                  <tr>
-                    <td><code>$todo/@text</code></td>
-                    <td>Attribute from a repeat-local node.</td>
-                    <td>
-                      <repeat ref="/todos/todo" as="todo">
-                        <span class="badge text-bg-secondary me-1"><text value="$todo/@text" /></span>
-                      </repeat>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td><code>/foo/text()</code> via the <code>/text()</code> suffix</td>
-                    <td>Direct text value of the first matching node.</td>
-                    <td><code>/todos/todo/text()</code>: {valueOf('/todos/todo/text()')}</td>
-                  </tr>
-                  <tr>
-                    <td><code>*</code></td>
-                    <td>Wildcard for one child step.</td>
-                    <td><code>/todos/*</code>: {select('/todos/*').length} children under <code>todos</code></td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-
-        <div class="row g-4 mb-4">
-          <div class="col-lg-6">
-            <div class="card xes-card h-100">
-              <div class="card-header bg-transparent">
-                <strong><i class="bi bi-braces me-2"></i>Grammar</strong>
-              </div>
-              <div class="card-body">
-                <pre class="xes-code rounded p-3 mb-0"><code>path        = absolute | local
-absolute    = "/" step ("/" step)*
-local       = "$" name ("/" step)*
-step        = name | "*"
-step        = step "[@attr=value]"
-step        = step "[n]"
-value-path  = path "/@attr"
-value-path  = path "/text()"</code></pre>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-6">
-            <div class="card xes-card h-100">
-              <div class="card-header bg-transparent">
-                <strong><i class="bi bi-tree me-2"></i>Sample instance</strong>
-              </div>
-              <div class="card-body">
-                <pre class="xes-code rounded p-3 mb-0"><code>&lt;todos&gt;
-  &lt;todo id="a" text="Draft the path chapter"&gt;first todo text&lt;/todo&gt;
-  &lt;todo id="b" text="Test wildcard selectors"&gt;second todo text&lt;/todo&gt;
-  &lt;note id="n1" text="Wildcard also matches this note"&gt;note text&lt;/note&gt;
-&lt;/todos&gt;</code></pre>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="card xes-card">
-          <div class="card-header bg-transparent">
-            <strong><i class="bi bi-slash-circle me-2"></i>Unsupported on purpose</strong>
-          </div>
-          <div class="card-body">
-            <div class="row g-3">
-              <div class="col-md-6 col-xl-3">
-                <div class="xes-pill rounded p-3 h-100">
-                  <code>//todo</code>
-                  <p class="text-secondary mb-0 mt-2">No descendant search. Write the explicit child path.</p>
-                </div>
-              </div>
-              <div class="col-md-6 col-xl-3">
-                <div class="xes-pill rounded p-3 h-100">
-                  <code>/todos/todo[last()]</code>
-                  <p class="text-secondary mb-0 mt-2">No function calls beyond trailing <code>text()</code>.</p>
-                </div>
-              </div>
-              <div class="col-md-6 col-xl-3">
-                <div class="xes-pill rounded p-3 h-100">
-                  <code>/projects/project[task/@id=a]</code>
-                  <p class="text-secondary mb-0 mt-2">No multi-step predicates inside brackets.</p>
-                </div>
-              </div>
-              <div class="col-md-6 col-xl-3">
-                <div class="xes-pill rounded p-3 h-100">
-                  <code>/todos/todo[@id=a and @done=true]</code>
-                  <p class="text-secondary mb-0 mt-2">No boolean predicate expressions. Use a computed signal or controller code.</p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </view>
-  </component>
-</galath>

package/playground/components/chapter-shell.xml

@@ -1,29 +0,0 @@
-<!--
-  components/chapter-shell.xml
-
-  A small heading component used by every chapter. We deliberately keep
-  this minimal - chapters render their own docs / demo / code cards
-  inline because their content differs in length and structure.
-
-  Usage:
-
-      <x-chapter-heading
-         icon="bi-broadcast"
-         title="Signals"
-         subtitle="Reactive cells that drive the rest of the system." />
--->
-<galath xmlns:bind="urn:galath:bind" xmlns:on="urn:galath:on" xmlns:use="urn:galath:use" xmlns:drag="urn:galath:drag" xmlns:drop="urn:galath:drop" xmlns:class="urn:galath:class">
-  <component name="chapter-heading" tag="x-chapter-heading"
-             icon="bi-bookmark"
-             title="Chapter"
-             subtitle="">
-    <view>
-      <div class="d-flex align-items-center gap-2 mb-1">
-        <i class="bi {icon} text-info fs-4"></i>
-        <span class="badge text-bg-info-subtle text-info-emphasis">Chapter</span>
-      </div>
-      <h1 class="display-6 fw-semibold mb-2">{title}</h1>
-      <p class="lead text-secondary mb-4">{subtitle}</p>
-    </view>
-  </component>
-</galath>