npm - galath - Versions diffs - 1.0.2 - Mend

galath 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (55) hide show

package/AGENTS.md +1 -0
package/README.md +206 -0
package/TODO.md +140 -0
package/index.html +188 -0
package/logo.jpg +0 -0
package/logo.svg +96 -0
package/package.json +32 -0
package/packages/galath/package.json +28 -0
package/packages/galath/src/behavior.js +193 -0
package/packages/galath/src/binding.js +247 -0
package/packages/galath/src/boot.js +52 -0
package/packages/galath/src/command.js +117 -0
package/packages/galath/src/component.js +505 -0
package/packages/galath/src/controller.js +181 -0
package/packages/galath/src/core.js +190 -0
package/packages/galath/src/imports.js +132 -0
package/packages/galath/src/index.js +38 -0
package/packages/galath/src/instance-model.js +343 -0
package/packages/galath/src/morph.js +237 -0
package/packages/galath/src/rendering.js +556 -0
package/packages/galath/src/signals.js +215 -0
package/packages/galath/src/templates.js +24 -0
package/packages/galath/src/xml-events.js +53 -0
package/packages/galath-css/css/bootstrap-icons.min.css +5 -0
package/packages/galath-css/css/bootstrap.min.css +6 -0
package/packages/galath-css/css/fonts/bootstrap-icons.json +2077 -0
package/packages/galath-css/css/fonts/bootstrap-icons.woff +0 -0
package/packages/galath-css/css/fonts/bootstrap-icons.woff2 +0 -0
package/packages/galath-css/js/bootstrap.bundle.min.js +7 -0
package/packages/galath-css/package.json +13 -0
package/playground/app.xml +214 -0
package/playground/chapters/01-welcome.xml +94 -0
package/playground/chapters/02-signals.xml +166 -0
package/playground/chapters/03-instance.xml +130 -0
package/playground/chapters/04-bindings.xml +156 -0
package/playground/chapters/05-lists.xml +138 -0
package/playground/chapters/06-commands.xml +144 -0
package/playground/chapters/07-controller.xml +115 -0
package/playground/chapters/08-events.xml +126 -0
package/playground/chapters/09-behaviors.xml +210 -0
package/playground/chapters/10-components.xml +152 -0
package/playground/chapters/11-imports.xml +108 -0
package/playground/chapters/12-expressions.xml +161 -0
package/playground/chapters/13-paths.xml +197 -0
package/playground/components/chapter-shell.xml +29 -0
package/playground/components/highlighter.js +111 -0
package/playground/components/run-snippet.js +120 -0
package/public/basic/bootstrap-icons.min.css +5 -0
package/public/basic/bootstrap.bundle.min.js +7 -0
package/public/basic/bootstrap.min.css +6 -0
package/public/basic/fonts/bootstrap-icons.json +2077 -0
package/public/basic/fonts/bootstrap-icons.woff +0 -0
package/public/basic/fonts/bootstrap-icons.woff2 +0 -0
package/public/basic/theme.css +209 -0
package/seed.html +321 -0

package/public/basic/fonts/bootstrap-icons.woff ADDED Viewed

Binary file

package/public/basic/fonts/bootstrap-icons.woff2 ADDED Viewed

Binary file

package/public/basic/theme.css ADDED Viewed

@@ -0,0 +1,209 @@
+.text-wrap-balance { text-wrap: balance; }
+/*
+  Cinematic Dark Bootstrap Theme — Nested CSS Version
+  For premium product pages, editorial landing pages, and night-fog marketing sites.
+  Drop this after Bootstrap, then use: <html data-bs-theme="dark">.
+  Mood: narrow dark fog band, warm luminous typography, Solarized-adjacent accents.
+  This version uses native CSS nesting. It is meant to make the theme read as one
+  dark-mode scope instead of many repeated [data-bs-theme="dark"] selectors.
+*/
+[data-bs-theme="dark"] {
+  color-scheme: dark;
+  /* Core canvas */
+  --bs-body-color: #d7d8d1;
+  --bs-body-color-rgb: 215, 216, 209;
+  --bs-body-bg: #0b1014;
+  --bs-body-bg-rgb: 11, 16, 20;
+  --bs-emphasis-color: #fff6df;
+  --bs-emphasis-color-rgb: 255, 246, 223;
+  /* Muted text and layered fog surfaces */
+  --bs-secondary-color: rgba(215, 216, 209, 0.72);
+  --bs-secondary-color-rgb: 215, 216, 209;
+  --bs-secondary-bg: #111922;
+  --bs-secondary-bg-rgb: 17, 25, 34;
+  --bs-tertiary-color: rgba(215, 216, 209, 0.52);
+  --bs-tertiary-color-rgb: 215, 216, 209;
+  --bs-tertiary-bg: #172129;
+  --bs-tertiary-bg-rgb: 23, 33, 41;
+  /* Brand color system: Solarized-inspired, darker, cinematic, less synthetic. */
+  --bs-primary: #2aa198;
+  --bs-primary-rgb: 42, 161, 152;
+  --bs-secondary: #586e75;
+  --bs-secondary-rgb: 88, 110, 117;
+  --bs-success: #859900;
+  --bs-success-rgb: 133, 153, 0;
+  --bs-info: #268bd2;
+  --bs-info-rgb: 38, 139, 210;
+  --bs-warning: #b58900;
+  --bs-warning-rgb: 181, 137, 0;
+  --bs-danger: #dc322f;
+  --bs-danger-rgb: 220, 50, 47;
+  --bs-light: #eee8d5;
+  --bs-light-rgb: 238, 232, 213;
+  --bs-dark: #071014;
+  --bs-dark-rgb: 7, 16, 20;
+  /* Text emphasis: luminous but not neon. */
+  --bs-primary-text-emphasis: #65d1c9;
+  --bs-secondary-text-emphasis: #a4b2b7;
+  --bs-success-text-emphasis: #c4d65a;
+  --bs-info-text-emphasis: #7fc7f0;
+  --bs-warning-text-emphasis: #e8c766;
+  --bs-danger-text-emphasis: #f28b85;
+  --bs-light-text-emphasis: #fff6df;
+  --bs-dark-text-emphasis: #c4cdc9;
+  /* Subtle backgrounds: quiet color shadows, useful for badges, alerts, cards. */
+  --bs-primary-bg-subtle: #092e33;
+  --bs-secondary-bg-subtle: #151c22;
+  --bs-success-bg-subtle: #202800;
+  --bs-info-bg-subtle: #0a2638;
+  --bs-warning-bg-subtle: #2c2305;
+  --bs-danger-bg-subtle: #321010;
+  --bs-light-bg-subtle: #202a30;
+  --bs-dark-bg-subtle: #070b0e;
+  /* Borders: smoky, mineral, slightly chromatic. */
+  --bs-primary-border-subtle: #176c70;
+  --bs-secondary-border-subtle: #33434b;
+  --bs-success-border-subtle: #566400;
+  --bs-info-border-subtle: #185c83;
+  --bs-warning-border-subtle: #735a09;
+  --bs-danger-border-subtle: #7c211f;
+  --bs-light-border-subtle: #425058;
+  --bs-dark-border-subtle: #1c252c;
+  --bs-heading-color: #fff1cf;
+  --bs-link-color: #65d1c9;
+  --bs-link-hover-color: #8fe4dd;
+  --bs-link-color-rgb: 101, 209, 201;
+  --bs-link-hover-color-rgb: 143, 228, 221;
+  --bs-code-color: #d97aa6;
+  --bs-highlight-color: #fff6df;
+  --bs-highlight-bg: #4a3605;
+  --bs-border-color: #2b3941;
+  --bs-border-color-translucent: rgba(238, 232, 213, 0.14);
+  --bs-form-valid-color: #c4d65a;
+  --bs-form-valid-border-color: #6f8200;
+  --bs-form-invalid-color: #f28b85;
+  --bs-form-invalid-border-color: #9c2926;
+  /* Component affordances used by Bootstrap 5.3+ */
+  --bs-primary-bg-subtle-rgb: 9, 46, 51;
+  --bs-secondary-bg-subtle-rgb: 21, 28, 34;
+  --bs-success-bg-subtle-rgb: 32, 40, 0;
+  --bs-info-bg-subtle-rgb: 10, 38, 56;
+  --bs-warning-bg-subtle-rgb: 44, 35, 5;
+  --bs-danger-bg-subtle-rgb: 50, 16, 16;
+  /* Opinionated marketing/page tokens; optional, but useful in custom sections. */
+  --theme-canvas: #0b1014;
+  --theme-canvas-deep: #070b0e;
+  --theme-surface-1: #101821;
+  --theme-surface-2: #141e26;
+  --theme-surface-3: #1a252d;
+  --theme-fog: rgba(238, 232, 213, 0.08);
+  --theme-fog-strong: rgba(238, 232, 213, 0.14);
+  --theme-gold: #b58900;
+  --theme-cyan: #2aa198;
+  --theme-blue: #268bd2;
+  --theme-magenta: #d33682;
+  --theme-violet: #6c71c4;
+  --theme-red: #dc322f;
+  --theme-green: #859900;
+  --theme-hero-gradient:
+    radial-gradient(circle at 18% 8%, rgba(42, 161, 152, 0.22), transparent 34%),
+    radial-gradient(circle at 82% 18%, rgba(108, 113, 196, 0.18), transparent 30%),
+    radial-gradient(circle at 58% 82%, rgba(181, 137, 0, 0.12), transparent 36%),
+    linear-gradient(180deg, #0b1014 0%, #101821 48%, #070b0e 100%);
+  --theme-panel-gradient:
+    linear-gradient(180deg, rgba(255, 246, 223, 0.055), rgba(255, 246, 223, 0.018));
+  --theme-edge-light: rgba(255, 246, 223, 0.16);
+  --theme-edge-dark: rgba(0, 0, 0, 0.42);
+  --theme-shadow-soft: 0 24px 80px rgba(0, 0, 0, 0.42);
+  --theme-shadow-premium: 0 32px 120px rgba(0, 0, 0, 0.54), inset 0 1px 0 rgba(255, 246, 223, 0.08);
+  /* Optional polish for common Bootstrap surfaces on product/marketing pages. */
+  & body {
+    background:
+      radial-gradient(circle at 12% -8%, rgba(42, 161, 152, 0.16), transparent 28rem),
+      radial-gradient(circle at 84% 0%, rgba(108, 113, 196, 0.13), transparent 26rem),
+      var(--bs-body-bg);
+      background-repeat: no-repeat;
+      background-attachment: fixed;
+  }
+  & .card,
+  & .modal-content,
+  & .dropdown-menu,
+  & .offcanvas,
+  & .list-group-item {
+    background-color: var(--theme-surface-1);
+    background-image: var(--theme-panel-gradient);
+    border-color: var(--bs-border-color-translucent);
+    box-shadow: var(--theme-shadow-soft);
+  }
+  & .navbar,
+  & .bg-body-tertiary {
+    background-color: rgba(16, 24, 33, 0.82) !important;
+    /* backdrop-filter: blur(18px) saturate(122%); */
+    border-color: var(--bs-border-color-translucent);
+  }
+  & .btn-primary {
+    --bs-btn-color: #041113;
+    --bs-btn-bg: #65d1c9;
+    --bs-btn-border-color: #65d1c9;
+    --bs-btn-hover-color: #031012;
+    --bs-btn-hover-bg: #8fe4dd;
+    --bs-btn-hover-border-color: #8fe4dd;
+    --bs-btn-focus-shadow-rgb: 101, 209, 201;
+    --bs-btn-active-color: #031012;
+    --bs-btn-active-bg: #51beb6;
+    --bs-btn-active-border-color: #51beb6;
+    --bs-btn-disabled-color: #0b1014;
+    --bs-btn-disabled-bg: rgba(101, 209, 201, 0.45);
+    --bs-btn-disabled-border-color: rgba(101, 209, 201, 0.25);
+  }
+  & .btn-outline-primary {
+    --bs-btn-color: #65d1c9;
+    --bs-btn-border-color: rgba(101, 209, 201, 0.48);
+    --bs-btn-hover-color: #041113;
+    --bs-btn-hover-bg: #65d1c9;
+    --bs-btn-hover-border-color: #65d1c9;
+    --bs-btn-focus-shadow-rgb: 101, 209, 201;
+    --bs-btn-active-color: #041113;
+    --bs-btn-active-bg: #51beb6;
+    --bs-btn-active-border-color: #51beb6;
+  }
+  & .form-control,
+  & .form-select {
+    background-color: #0e151c;
+    border-color: #2e414a;
+    color: var(--bs-body-color);
+    &:focus {
+      background-color: #101922;
+      border-color: #65d1c9;
+      box-shadow: 0 0 0 0.25rem rgba(101, 209, 201, 0.16);
+    }
+  }
+  & ::selection {
+    color: #fff6df;
+    background: rgba(42, 161, 152, 0.42);
+  }
+}

package/seed.html ADDED Viewed

@@ -0,0 +1,321 @@
+<!doctype html>
+<!--
+  seed.html
+  =========
+  A self-contained reference example for the Galath language. It demonstrates
+  every major feature in one page so a new author can read top-to-bottom and
+  see how the pieces fit:
+    * components with model + view + commandset + controller + listeners
+    * XML instance trees, signals, computed values
+    * bind:, on:, use:, drag:, drop: directives
+    * datatemplates and <items>
+    * routed XML events
+    * scoped <style>
+  The runtime lives in packages/galath. We pull it in via a native browser
+  import map so there is no build step. To run this file locally:
+      npx serve .
+      # or
+      python3 -m http.server 8080
+  Then open http://localhost:8080/seed.html
+-->
+<html lang="en" data-bs-theme="dark">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Galath Strong Core - Reference Demo</title>
+  <!-- Local Bootstrap so the demo works offline. -->
+  <link href="./node_modules/galath-css/css/bootstrap.min.css" rel="stylesheet">
+  <link href="./node_modules/galath-css/css/bootstrap-icons.min.css" rel="stylesheet">
+  <!--
+    The import map lets `import 'galath'` resolve to our local source. No
+    bundler, no transpiler. The mapped path goes through the symlink at
+    node_modules/galath -> packages/galath.
+  -->
+  <script type="importmap">
+    {
+      "imports": {
+        "galath": "./node_modules/galath/src/index.js",
+        "galath/boot": "./node_modules/galath/src/boot.js"
+      }
+    }
+  </script>
+  <style>
+    /* These styles are page-level (the demo's chrome). Component-level
+       styles live inside the <component>'s own <style> block - see how the
+       feature-badge component's accent color is scoped, below. */
+    :root {
+      --xes-shell: #06101f;
+      --xes-line: rgba(255, 255, 255, .12);
+      --xes-card: rgba(255, 255, 255, .045);
+      --xes-card-2: rgba(255, 255, 255, .022);
+    }
+    body {
+      min-height: 100vh;
+      background:
+        radial-gradient(circle at top left, rgba(13, 202, 240, .14), transparent 34rem),
+        radial-gradient(circle at top right, rgba(255, 193, 7, .08), transparent 28rem),
+        linear-gradient(180deg, #040812, var(--xes-shell));
+    }
+    .xes-shell { min-height: 100vh; }
+    .xes-hero  { border-bottom: 1px solid var(--xes-line); background: linear-gradient(180deg, rgba(255,255,255,.05), transparent); }
+    .xes-card  { background: linear-gradient(180deg, var(--xes-card), var(--xes-card-2)); border: 1px solid var(--xes-line); box-shadow: 0 1rem 3rem rgba(0,0,0,.22); }
+    .xes-code  { max-height: 24rem; overflow: auto; font-size: .825rem; background: rgba(0,0,0,.34); border: 1px solid var(--xes-line); }
+    .xes-nav-link { width: 100%; text-align: left; color: var(--bs-body-color); background: transparent; border: 0; }
+    .xes-nav-link:hover { background-color: rgba(255,255,255,.07); }
+    .xes-nav-link.active { background-color: rgba(13,202,240,.16); box-shadow: inset 3px 0 0 var(--bs-info); color: var(--bs-info-text-emphasis); }
+    .xes-pill   { border: 1px solid var(--xes-line); background-color: rgba(255,255,255,.045); }
+    .xes-tiny   { font-size: .78rem; }
+    .xes-drop-hint { outline: 1px dashed rgba(13, 202, 240, .35); outline-offset: .35rem; }
+    .xes-dragging  { opacity: .55; }
+  </style>
+</head>
+<body>
+  <div id="mount"></div>
+  <!--
+    The Galath source lives in a script tag with a non-JS MIME type. The
+    browser does not execute it; we read its textContent at boot time.
+    Embedding the source as a <script> avoids escaping issues that you'd
+    hit with putting it inside a JS string.
+  -->
+  <script type="application/xml" id="galath-source">
+    <galath version="1.0"
+            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 tiny presentational component. It accepts `icon`, `label`, and
+        `tone` props and renders a Bootstrap pill. `<style>` content is
+        auto-scoped to instances of this tag.
+      -->
+      <component name="feature-badge" tag="x-feature-badge" icon="bi-cpu" label="Feature" tone="info">
+        <style>
+          .badge { transition: transform .12s ease; }
+          .badge:hover { transform: translateY(-1px); }
+        </style>
+        <view>
+          <span class="badge rounded-pill xes-pill text-body-emphasis me-1 mb-1">
+            <i class="bi {icon} me-1"></i>{label}
+          </span>
+        </view>
+      </component>
+      <!--
+        The main app component. Holds an instance tree of todos plus a few
+        signals for UI state. Demonstrates: signals, computed, instance
+        tree, bindings, repeaters, items + datatemplate, commands,
+        controllers, listeners, behaviors, drag/drop.
+      -->
+      <component name="docs-app" tag="x-docs-app" title="Galath Strong Core">
+        <model>
+          <signal name="activeSection" value="model" />
+          <signal name="eventLog" value="" />
+          <signal name="noteText" value="Actions are controller-owned. Views stay declarative." />
+          <!--
+            The instance tree IS the application's state. Attributes are
+            reactive cells; mutations emit `xforms-*` events.
+          -->
+          <instance>
+            <draft text="Write a stronger XML app language" />
+            <todos>
+              <todo id="t1" text="Model data as XML instance nodes" done="true" />
+              <todo id="t2" text="Bind controls to paths" done="false" />
+              <todo id="t3" text="Render nodes with DataTemplate" done="false" />
+            </todos>
+          </instance>
+          <!--
+            <computed> is a derived signal. It re-evaluates whenever its
+            `from` source changes. We pin it to the tree's version counter
+            (any tree change) by referencing a magical `eventLog` signal
+            via `from` - see the engine's <computed> setup for the rule.
+          -->
+          <computed name="todoCount" from="eventLog">
+            <expression>select('/todos/todo').length</expression>
+          </computed>
+        </model>
+        <!-- Reusable view fragment. Used below by <items>. -->
+        <datatemplate name="todo-card" for="todo">
+          <div class="col-md-6 col-xl-4">
+            <div class="card xes-card h-100" drag:source="$todo" drop:target="$todo" drop:command="moveTodoBefore">
+              <div class="card-body">
+                <div class="d-flex gap-2 align-items-start">
+                  <input class="form-check-input mt-1" type="checkbox" bind:checked="$todo/@done" />
+                  <div class="flex-grow-1">
+                    <div class="fw-semibold"><text value="$todo/@text" /></div>
+                    <div class="text-secondary xes-tiny">id: <text value="$todo/@id" /></div>
+                  </div>
+                  <button class="btn btn-sm btn-outline-danger" on:click="deleteNode($todo)" title="Delete">
+                    <i class="bi bi-x-lg"></i>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </datatemplate>
+        <!--
+          Centralized commands. Each one declares optional `enabled` logic
+          re-evaluated as part of every render so buttons disable
+          automatically.
+        -->
+        <commandset>
+          <command name="addTodo" enabled="valueOf('/draft/@text').trim().length > 0">
+            <insert ref="/todos">
+              <todo id="{uid()}" text="{valueOf('/draft/@text')}" done="false" />
+            </insert>
+            <setvalue ref="/draft/@text" value="'New XML task'" />
+          </command>
+          <command name="deleteDone" enabled="select('/todos/todo[@done=true]').length > 0">
+            <delete ref="/todos/todo[@done=true]" />
+          </command>
+          <command name="clearLog" enabled="eventLog.length > 0">
+            <set signal="eventLog" value="''" />
+          </command>
+          <!--
+            moveTodoBefore is bound to drop:command. It receives `$source`
+            and `$target` in scope - both are XNodes.
+          -->
+          <command name="moveTodoBefore">
+            <eval>
+              if ($source &amp;&amp; $target &amp;&amp; $source !== $target) {
+                $source.remove();
+                $target.parent.insertBefore($source, $target);
+              }
+            </eval>
+          </command>
+        </commandset>
+        <!-- Named actions. Views invoke them with `#actionName`. -->
+        <controller>
+          <action name="logTreeEvent">
+            <set signal="eventLog" value="$event.type + ' at ' + $event.path + '\n' + eventLog" />
+          </action>
+          <action name="markAllDone">
+            <setvalue ref="/todos/todo/@done" value="true" />
+          </action>
+        </controller>
+        <!--
+          Routed XML events: the controller can react to data-tree
+          mutations declaratively. `observer` filters by path prefix.
+        -->
+        <listeners>
+          <listener event="xforms-insert"        observer="/todos" handler="#logTreeEvent" />
+          <listener event="xforms-delete"        observer="/todos" handler="#logTreeEvent" />
+          <listener event="xforms-value-changed" observer="/todos" handler="#logTreeEvent" />
+        </listeners>
+        <view>
+          <main class="xes-shell">
+            <section class="xes-hero py-5">
+              <div class="container-xxl">
+                <div class="row align-items-center g-4">
+                  <div class="col-lg-8">
+                    <div class="d-flex gap-2 flex-wrap mb-3">
+                      <x-feature-badge icon="bi-database" label="XForms" />
+                      <x-feature-badge icon="bi-ui-checks-grid" label="XAML" />
+                      <x-feature-badge icon="bi-command" label="XUL" />
+                      <x-feature-badge icon="bi-person-gear" label="FXML" />
+                      <x-feature-badge icon="bi-puzzle" label="Behaviors" />
+                    </div>
+                    <h1 class="display-5 fw-semibold mb-3">{title}</h1>
+                    <p class="lead text-secondary mb-4">
+                      Galath: a stronger XML language for the web. XML instance data, path
+                      bindings, repeaters, templates, commandsets, controllers, routed events,
+                      attached behaviors, scoped signals, and surgical DOM rendering.
+                    </p>
+                    <div class="d-flex gap-2 flex-wrap">
+                      <a class="btn btn-info" href="./index.html">
+                        <i class="bi bi-play-circle me-1"></i>Open the Playground
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </section>
+            <section class="container-xxl py-4">
+              <div class="row g-4">
+                <div class="col-lg-12">
+                  <div class="card xes-card">
+                    <div class="card-header bg-transparent d-flex justify-content-between align-items-center">
+                      <strong><i class="bi bi-window-stack me-2"></i>Live XML instance demo</strong>
+                      <span class="badge text-bg-info"><text value="todoCount" /> XML nodes</span>
+                    </div>
+                    <div class="card-body">
+                      <div class="row g-3 mb-4">
+                        <div class="col-lg-7">
+                          <label class="form-label">Draft todo bound to <code>/draft/@text</code></label>
+                          <div class="input-group">
+                            <span class="input-group-text"><i class="bi bi-pencil-square"></i></span>
+                            <input class="form-control" bind:value="/draft/@text" />
+                            <button class="btn btn-info" command="addTodo">
+                              <i class="bi bi-plus-circle me-1"></i>Insert
+                            </button>
+                          </div>
+                        </div>
+                        <div class="col-lg-5 d-flex align-items-end gap-2 flex-wrap">
+                          <button class="btn btn-outline-light" command="deleteDone"><i class="bi bi-trash me-1"></i>Delete done</button>
+                          <button class="btn btn-outline-light" on:click="#markAllDone"><i class="bi bi-check2-all me-1"></i>Mark all done</button>
+                          <button class="btn btn-outline-secondary" command="clearLog"><i class="bi bi-eraser me-1"></i>Clear log</button>
+                        </div>
+                      </div>
+                      <div class="row g-3 mb-4">
+                        <items source="/todos/todo" as="todo" template="todo-card" />
+                      </div>
+                      <label class="form-label">Event log</label>
+                      <textarea class="form-control font-monospace" rows="5" bind:value="eventLog"></textarea>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </section>
+          </main>
+        </view>
+      </component>
+      <!-- The application is the page-level entry. -->
+      <application name="demo">
+        <x-docs-app title="Galath Strong Core"></x-docs-app>
+      </application>
+    </galath>
+  </script>
+  <!--
+    Boot: read the source from the script tag, hand it to galath, and let
+    the runtime register components and mount the app. Async because
+    `<import>` can fetch additional XML at startup.
+  -->
+  <script type="module">
+    import { boot } from 'galath/boot';
+    const language = await boot({
+      source: document.getElementById('galath-source').textContent,
+      mount: document.getElementById('mount'),
+    });
+    // Expose for console exploration in dev tools.
+    window.galath = language;
+  </script>
+</body>
+</html>