galath 1.0.3 → 1.0.5

package/playground/chapters/06-commands.xml

@@ -1,144 +0,0 @@
-<!--
-  chapters/06-commands.xml
-
-  XUL-style commandsets. A <command> bundles a name, an enabled
-  predicate, and a list of operations. Buttons attach to commands via
-  command="name" and pick up their enabled state automatically.
--->
-<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-commands" tag="x-chapter-commands">
-    <model>
-      <instance>
-        <draft text="" />
-        <items>
-          <item id="i1" text="Bread" />
-          <item id="i2" text="Apples" />
-        </items>
-      </instance>
-
-      <signal name="snippet"><![CDATA[<commandset>
-  <command name="addItem"
-           shortcut="ctrl+enter"
-           enabled="valueOf('/draft/@text').trim().length > 0">
-    <insert ref="/items">
-      <item id="{uid()}" text="{valueOf('/draft/@text')}" />
-    </insert>
-    <setvalue ref="/draft/@text" value="''" />
-  </command>
-
-  <command name="clearAll"
-           shortcut="ctrl+shift+x"
-           enabled="select('/items/item').length > 0">
-    <delete ref="/items/item" />
-  </command>
-</commandset>
-
-<button command="addItem">Add (Ctrl+Enter)</button>
-<button command="clearAll">Clear all (Ctrl+Shift+X)</button>]]></signal>
-    </model>
-
-    <commandset>
-      <command name="addItem"
-               shortcut="ctrl+enter"
-               enabled="valueOf('/draft/@text').trim().length > 0">
-        <insert ref="/items">
-          <item id="{uid()}" text="{valueOf('/draft/@text')}" />
-        </insert>
-        <setvalue ref="/draft/@text" value="''" />
-      </command>
-
-      <command name="clearAll"
-               shortcut="ctrl+shift+x"
-               enabled="select('/items/item').length > 0">
-        <delete ref="/items/item" />
-      </command>
-    </commandset>
-
-    <view>
-      <div class="px-4 py-5">
-        <x-chapter-heading icon="bi-command" title="Commands"
-          subtitle="Centralize operations and let buttons inherit their enabled/disabled state." />
-
-        <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">
-                  A <code>&lt;commandset&gt;</code> declares named commands. Each
-                  <code>&lt;command&gt;</code> has:
-                </p>
-                <ul class="text-secondary">
-                  <li><strong>name</strong> - referenced by <code>command="..."</code>.</li>
-                  <li><strong>enabled</strong> (optional) - an expression. Buttons are auto-disabled when it is falsy.</li>
-                  <li><strong>shortcut</strong> (optional) - a keybinding like
-                      <code>ctrl+s</code> or <code>ctrl+shift+x</code>. The runtime installs a
-                      global keydown listener; modifier-bearing shortcuts work even while a
-                      form field has focus.</li>
-                  <li>A body of operations: <code>&lt;set&gt;</code>, <code>&lt;setvalue&gt;</code>,
-                      <code>&lt;insert&gt;</code>, <code>&lt;delete&gt;</code>, <code>&lt;call&gt;</code>,
-                      <code>&lt;eval&gt;</code>, <code>&lt;log&gt;</code>, <code>&lt;fetch&gt;</code>.</li>
-                </ul>
-                <p class="text-secondary mb-0">
-                  Why bother? Three reasons: re-use (one command, many buttons / menu items), one
-                  source of enabled/disabled truth, and a clean separation between intent ("add
-                  item") and visual layout.
-                </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="input-group mb-3">
-              <span class="input-group-text"><i class="bi bi-pencil-square"></i></span>
-              <input class="form-control" placeholder="Type something to add (or hit Ctrl+Enter)..." bind:value="/draft/@text" />
-              <button class="btn btn-info" command="addItem">
-                <i class="bi bi-plus-circle me-1"></i>Add <kbd class="ms-1">Ctrl+Enter</kbd>
-              </button>
-              <button class="btn btn-outline-light" command="clearAll">
-                <i class="bi bi-trash me-1"></i>Clear <kbd class="ms-1">Ctrl+Shift+X</kbd>
-              </button>
-            </div>
-
-            <p class="text-secondary xes-tiny">
-              Notice how <strong>Add</strong> stays disabled until you type something, and
-              <strong>Clear all</strong> stays disabled when the list is empty - both with no
-              hand-written disabled logic. The shortcuts run the same commands, so they
-              also respect those <code>enabled</code> predicates.
-            </p>
-
-            <ul class="list-group">
-              <repeat ref="/items/item" as="it">
-                <li class="list-group-item d-flex align-items-center justify-content-between">
-                  <span><text value="$it/@text" /></span>
-                  <button class="btn btn-sm btn-outline-danger" on:click="deleteNode($it)">
-                    <i class="bi bi-x-lg"></i>
-                  </button>
-                </li>
-              </repeat>
-              <if test="select('/items/item').length === 0">
-                <li class="list-group-item text-secondary text-center">No items yet.</li>
-              </if>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </view>
-  </component>
-</galath>

package/playground/chapters/07-controller.xml

@@ -1,115 +0,0 @@
-<!--
-  chapters/07-controller.xml
-
-  FXML-style controllers. Named actions live in <controller> and are
-  invoked from the view via on:click="#actionName" or from <listener
-  handler="#actionName">. They are also reachable from <call action="..."/>
-  so commands can compose with controllers.
--->
-<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-controller" tag="x-chapter-controller">
-    <model>
-      <signal name="message" value="Click a button to see what controllers do." />
-      <signal name="counter" value="0" />
-      <signal name="snippet"><![CDATA[<controller>
-  <action name="greet">
-    <set signal="message" value="'Hello, ' + ($event.target.dataset.name || 'world') + '!'" />
-  </action>
-
-  <action name="bump">
-    <set signal="counter" value="counter + 1" />
-    <call action="greet" />
-  </action>
-</controller>
-
-<button data-name="Ada" on:click="#greet">Greet Ada</button>
-<button on:click="#bump">Bump &amp; greet</button>]]></signal>
-    </model>
-
-    <controller>
-      <action name="greet">
-        <set signal="message" value="'Hello, ' + ($event.currentTarget.dataset.name || 'world') + '!'" />
-      </action>
-
-      <action name="bump">
-        <set signal="counter" value="counter + 1" />
-        <call action="greet" />
-      </action>
-
-      <action name="reset">
-        <set signal="counter" value="0" />
-        <set signal="message" value="'Reset.'" />
-      </action>
-    </controller>
-
-    <view>
-      <div class="px-4 py-5">
-        <x-chapter-heading icon="bi-person-gear" title="Controllers"
-          subtitle="Named actions in one place. The view calls them by name." />
-
-        <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">
-                  A <code>&lt;controller&gt;</code> contains <code>&lt;action&gt;</code>s -
-                  named procedures of operations. Anywhere a handler is expected
-                  (<code>on:click</code>, <code>&lt;listener handler="..."&gt;</code>,
-                  <code>&lt;call&gt;</code>) you can reference one with <code>#actionName</code>.
-                </p>
-                <p class="text-secondary">
-                  The same operation vocabulary is shared with
-                  <code>&lt;commandset&gt;</code>: <code>&lt;set&gt;</code>,
-                  <code>&lt;setvalue&gt;</code>, <code>&lt;insert&gt;</code>,
-                  <code>&lt;delete&gt;</code>, <code>&lt;call&gt;</code>, <code>&lt;log&gt;</code>,
-                  <code>&lt;eval&gt;</code>.
-                </p>
-                <p class="text-secondary mb-0">
-                  Inside an action, <code>$event</code> is the originating DOM event (when
-                  there was one). Read <code>$event.currentTarget.dataset.X</code> to pass small
-                  data from the markup without a separate signal per button.
-                </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="d-flex gap-2 flex-wrap mb-3">
-              <button class="btn btn-info" data-name="Ada"   on:click="#greet">Greet Ada</button>
-              <button class="btn btn-info" data-name="Linus" on:click="#greet">Greet Linus</button>
-              <button class="btn btn-info" data-name="Grace" on:click="#greet">Greet Grace</button>
-              <button class="btn btn-outline-light" on:click="#bump">Bump &amp; greet</button>
-              <button class="btn btn-outline-secondary" on:click="#reset">Reset</button>
-            </div>
-
-            <div class="alert alert-info">
-              <i class="bi bi-chat-quote me-1"></i>
-              <strong>Message:</strong> {message}
-            </div>
-
-            <div class="text-secondary xes-tiny">
-              Counter: <span class="badge text-bg-secondary">{counter}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </view>
-  </component>
-</galath>

package/playground/chapters/08-events.xml

@@ -1,126 +0,0 @@
-<!--
-  chapters/08-events.xml
-
-  XML Events: declarative listeners on the data tree, separate from DOM
-  events. Useful for cross-cutting concerns like logging, undo stacks,
-  or syncing to a server.
--->
-<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-events" tag="x-chapter-events">
-    <model>
-      <signal name="log" value="" />
-
-      <instance>
-        <project name="Galath">
-          <task id="t1" title="Write the runtime" done="true" />
-          <task id="t2" title="Write the playground" done="false" />
-        </project>
-      </instance>
-
-      <signal name="snippet"><![CDATA[<listeners>
-  <listener event="xforms-insert"        observer="/project" handler="#log" />
-  <listener event="xforms-delete"        observer="/project" handler="#log" />
-  <listener event="xforms-value-changed" observer="/project" handler="#log" />
-</listeners>
-
-<controller>
-  <action name="log">
-    <set signal="log" value="$event.type + ' at ' + $event.path + '\n' + log" />
-  </action>
-</controller>]]></signal>
-    </model>
-
-    <controller>
-      <action name="log">
-        <set signal="log" value="$event.type + ' at ' + $event.path + '\n' + log" />
-      </action>
-      <action name="addTask">
-        <insert ref="/project">
-          <task id="{uid()}" title="New task" done="false" />
-        </insert>
-      </action>
-      <action name="clearLog">
-        <set signal="log" value="''" />
-      </action>
-    </controller>
-
-    <listeners>
-      <listener event="xforms-insert"        observer="/project" handler="#log" />
-      <listener event="xforms-delete"        observer="/project" handler="#log" />
-      <listener event="xforms-value-changed" observer="/project" handler="#log" />
-    </listeners>
-
-    <view>
-      <div class="px-4 py-5">
-        <x-chapter-heading icon="bi-broadcast-pin" title="XML Events"
-          subtitle="Listen to data-tree mutations the same way DOM events work, but for state." />
-
-        <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">
-                  Three event types fire on every instance-tree mutation:
-                </p>
-                <ul class="text-secondary">
-                  <li><code>xforms-insert</code> - a node was added.</li>
-                  <li><code>xforms-delete</code> - a node was removed.</li>
-                  <li><code>xforms-value-changed</code> - an attribute or text was updated.</li>
-                </ul>
-                <p class="text-secondary">
-                  The <code>observer="/path"</code> attribute filters by path prefix, so you can
-                  listen to only the part of the tree you care about. <code>$event</code> exposes
-                  <code>type</code>, <code>path</code>, <code>node</code>, <code>parent</code>,
-                  and the attribute fields.
-                </p>
-                <p class="text-secondary mb-0">
-                  Use these for logging, undo, persistence, or any side effect that should fire on
-                  data change.
-                </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="d-flex gap-2 flex-wrap mb-3">
-              <button class="btn btn-info" on:click="#addTask"><i class="bi bi-plus-circle me-1"></i>Add task</button>
-              <button class="btn btn-outline-light" on:click="#clearLog"><i class="bi bi-eraser me-1"></i>Clear log</button>
-            </div>
-
-            <ul class="list-group mb-3">
-              <repeat ref="/project/task" as="t">
-                <li class="list-group-item d-flex align-items-center gap-2">
-                  <input class="form-check-input m-0" type="checkbox" bind:checked="$t/@done" />
-                  <input class="form-control form-control-sm flex-grow-1" bind:value="$t/@title" />
-                  <button class="btn btn-sm btn-outline-danger" on:click="deleteNode($t)">
-                    <i class="bi bi-x-lg"></i>
-                  </button>
-                </li>
-              </repeat>
-            </ul>
-
-            <label class="form-label">Live event log</label>
-            <textarea class="form-control font-monospace" rows="6" bind:value="log"></textarea>
-          </div>
-        </div>
-      </div>
-    </view>
-  </component>
-</galath>

package/playground/chapters/09-behaviors.xml

@@ -1,210 +0,0 @@
-<!--
-  chapters/09-behaviors.xml
-
-  Attached behaviors: tiny disposable extensions to a single element. The
-  built-ins are use:copy, use:focus, use:autosize, plus the drag/drop
-  pair.
--->
-<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-behaviors" tag="x-chapter-behaviors">
-    <model>
-      <instance>
-        <cards>
-          <card id="c1" text="Drag me" color="info" />
-          <card id="c2" text="Or me"   color="success" />
-          <card id="c3" text="Reorder by dropping onto another card" color="warning" />
-        </cards>
-      </instance>
-
-      <signal name="memo" value="Type something then click Copy." />
-
-      <signal name="snippet"><![CDATA[<button use:copy="memo">Copy</button>
-
-<textarea use:autosize bind:value="notes"></textarea>
-
-<input use:focus="open" />
-
-<div drag:source="$card"
-     drop:target="$card"
-     drop:command="reorder">
-  ...
-</div>
-
-<commandset>
-  <command name="reorder">
-    <eval>
-      $source.remove();
-      $target.parent.insertBefore($source, $target);
-    </eval>
-  </command>
-</commandset>]]></signal>
-    </model>
-
-    <commandset>
-      <command name="reorder">
-        <eval>
-          if ($source &amp;&amp; $target &amp;&amp; $source !== $target) {
-            $source.remove();
-            $target.parent.insertBefore($source, $target);
-          }
-        </eval>
-      </command>
-    </commandset>
-
-    <!--
-      Build your own behavior. We register `use:tilt` here at chapter
-      mount time. Real apps would register inside their own feature
-      plugin; this is the same API. The behavior receives the live DOM
-      element and returns a Disposable so the runtime can clean it up
-      on the next render.
-    -->
-    <on:mount>
-      <eval>
-        const lang = window.galath;
-        if (lang &amp;&amp; !lang.behaviors.has('tilt')) {
-          lang.behaviors.set('tilt', (element) => {
-            const onEnter = () => {
-              const angle = (Math.random() * 6 - 3).toFixed(2);
-              element.style.transition = 'transform .15s ease';
-              element.style.transform = `rotate(${angle}deg) scale(1.04)`;
-            };
-            const onLeave = () => { element.style.transform = ''; };
-            element.addEventListener('mouseenter', onEnter);
-            element.addEventListener('mouseleave', onLeave);
-            return new lang.Disposable(() => {
-              element.removeEventListener('mouseenter', onEnter);
-              element.removeEventListener('mouseleave', onLeave);
-              element.style.transform = '';
-            });
-          });
-        }
-      </eval>
-    </on:mount>
-
-    <view>
-      <div class="px-4 py-5">
-        <x-chapter-heading icon="bi-puzzle" title="Behaviors"
-          subtitle="use:* attaches small reusable extensions; drag:* / drop:* compose into drag-and-drop." />
-
-        <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">
-                  A behavior is a function attached to a single element. It returns a
-                  <code>Disposable</code> so it cleans up on the next render. Built-ins:
-                </p>
-                <ul class="text-secondary">
-                  <li><code>use:copy="signalOrPath"</code> - click to copy.</li>
-                  <li><code>use:focus="expr"</code> - focus when truthy.</li>
-                  <li><code>use:autosize</code> - growing textarea.</li>
-                  <li><code>drag:source="$x"</code> + <code>drop:target="$y"</code> +
-                      <code>drop:command="cmd"</code> - run a command with
-                      <code>$source</code>/<code>$target</code> in scope on drop.</li>
-                </ul>
-                <p class="text-secondary mb-0">
-                  Add your own with <code>language.behaviors.set('name', fn)</code> in a feature
-                  plugin. Each function receives <code>(element, value, instance, local)</code>
-                  and returns a Disposable.
-                </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-clipboard me-2"></i>use:copy</strong>
-          </div>
-          <div class="card-body">
-            <div class="input-group">
-              <input class="form-control" bind:value="memo" />
-              <button class="btn btn-info" use:copy="memo">
-                <i class="bi bi-clipboard me-1"></i>Copy
-              </button>
-            </div>
-            <small class="text-secondary">Click Copy; the button briefly turns green and the value lands in your clipboard.</small>
-          </div>
-        </div>
-
-        <div class="card xes-card mb-4">
-          <div class="card-header bg-transparent">
-            <strong><i class="bi bi-tools me-2"></i>Build your own behavior</strong>
-          </div>
-          <div class="card-body">
-            <p class="text-secondary">
-              A behavior is just a function with the signature
-              <code>(element, value, instance, local) =&gt; Disposable</code>. Register it
-              once with <code>language.behaviors.set('name', fn)</code>; from then on,
-              any view can use it via <code>use:name="..."</code>. The runtime collects
-              the returned Disposable on the active render scope, so it is detached on
-              the next render or unmount automatically.
-            </p>
-            <pre class="xes-code rounded p-3"><code>language.behaviors.set('tilt', (element) =&gt; {
-  const onEnter = () =&gt; { element.style.transform = `rotate(${(Math.random() * 6 - 3)}deg)`; };
-  const onLeave = () =&gt; { element.style.transform = ''; };
-  element.addEventListener('mouseenter', onEnter);
-  element.addEventListener('mouseleave', onLeave);
-  return new language.Disposable(() =&gt; {
-    element.removeEventListener('mouseenter', onEnter);
-    element.removeEventListener('mouseleave', onLeave);
-  });
-});
-
-&lt;!-- and then anywhere in a view: --&gt;
-&lt;button use:tilt&gt;Hover me&lt;/button&gt;</code></pre>
-            <div class="d-flex gap-2 flex-wrap mt-2">
-              <button class="btn btn-info" use:tilt="">Hover me</button>
-              <button class="btn btn-outline-info" use:tilt="">Or me</button>
-              <button class="btn btn-outline-warning" use:tilt="">Behavior in action</button>
-            </div>
-            <small class="text-secondary mt-3 d-block">
-              All three buttons share the same behavior; each gets its own listener pair
-              and its own Disposable cleanup.
-            </small>
-          </div>
-        </div>
-
-        <div class="card xes-card">
-          <div class="card-header bg-transparent">
-            <strong><i class="bi bi-arrows-move me-2"></i>Drag &amp; drop</strong>
-          </div>
-          <div class="card-body">
-            <div class="row g-3">
-              <repeat ref="/cards/card" as="card">
-                <div class="col-md-4">
-                  <div class="card text-bg-{$card/@color}"
-                       drag:source="$card"
-                       drop:target="$card"
-                       drop:command="reorder"
-                       style="cursor: grab;">
-                    <div class="card-body">
-                      <i class="bi bi-grip-vertical me-2"></i>
-                      <strong><text value="$card/@text" /></strong>
-                    </div>
-                  </div>
-                </div>
-              </repeat>
-            </div>
-            <small class="text-secondary mt-3 d-block">
-              Drag a card onto another to reorder. The drag is wired by attaching three attributes
-              and writing a single command - no event handlers in JS.
-            </small>
-          </div>
-        </div>
-      </div>
-    </view>
-  </component>
-</galath>