Statum/frontend-demo/index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Statum Demo</title>
  <style>
    :root {
      --bg: #f6f7f9;
      --card: #fff;
      --line: #e3e6ea;
      --accent: #3a6ea5;
      --muted: #6b7280;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: system-ui, Segoe UI, Roboto, sans-serif;
      background: var(--bg);
      color: #1f2933;
      line-height: 1.5;
    }

    header {
      background: var(--accent);
      color: #fff;
      padding: 1rem 1.5rem;
      display: flex;
      align-items: baseline;
      gap: 1rem;
      flex-wrap: wrap;
    }

    header h1 {
      margin: 0;
      font-size: 1.25rem;
    }

    header .role {
      margin-left: auto;
      opacity: .9;
    }

    main {
      max-width: 900px;
      margin: 0 auto;
      padding: 1.5rem;
    }

    section {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 1rem 1.25rem;
      margin-bottom: 1.25rem;
    }

    h2 {
      margin-top: 0;
      font-size: 1.05rem;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    button {
      font: inherit;
      padding: .35rem .8rem;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: #fff;
      cursor: pointer;
    }

    button:hover {
      border-color: var(--accent);
    }

    button:disabled {
      opacity: .55;
      cursor: progress;
    }

    /* stm-class targets */
    .high {
      color: #b00020;
      font-weight: 700;
    }

    .featured {
      border-color: #f0a500;
      box-shadow: 0 0 0 2px #f0a50033;
    }

    .out {
      opacity: .5;
    }

    /* stm-busy-class */
    .busy {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }

    /* stm-on-error */
    .error {
      border-color: #b00020;
      background: #fde8ea;
    }

    .ok {
      background: #e6f4ea;
      border: 1px solid #b7deca;
      padding: .5rem .75rem;
      border-radius: 6px;
    }

    /* stm-markdown output */
    .md {
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: .75rem 1rem;
      background: #fbfcfd;
    }

    .md pre {
      background: #eef2f7;
      border-radius: 6px;
      padding: .5rem .75rem;
      overflow-x: auto;
    }

    .md code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: .9em;
    }

    .md > :first-child {
      margin-top: 0;
    }

    .md > :last-child {
      margin-bottom: 0;
    }

    .counter {
      display: inline-flex;
      align-items: center;
      gap: .75rem;
    }

    .counter .value {
      min-width: 2.5ch;
      text-align: center;
      font-size: 1.5rem;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 1rem;
    }

    .card {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: .75rem;
    }

    .card h3 {
      margin: 0 0 .25rem;
    }

    .price {
      color: var(--muted);
    }

    .pill {
      display: inline-block;
      font-size: .75rem;
      padding: .1rem .5rem;
      border-radius: 999px;
      background: #eef2f7;
      color: var(--muted);
    }

    .pill.stock {
      background: #e6f4ea;
      color: #1e7e34;
    }

    .pill.soldout {
      background: #fde8ea;
      color: #b00020;
    }

    ul.lines {
      padding-left: 1.1rem;
    }

    .muted {
      color: var(--muted);
    }

    /* Toasts rendered by the custom onNotifyHandler/onErrorHandler overrides. */
    #toasts {
      position: fixed;
      right: 1rem;
      bottom: 1rem;
      display: flex;
      flex-direction: column;
      gap: .5rem;
      z-index: 50;
      max-width: 22rem;
    }

    .toast {
      background: var(--card);
      border: 1px solid var(--line);
      border-left: 4px solid var(--accent);
      border-radius: 6px;
      padding: .5rem .75rem;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
      font-size: .9rem;
      transition: opacity .4s ease;
    }

    .toast.success { border-left-color: #1e7e34; }
    .toast.error   { border-left-color: #b00020; }
    .toast.info    { border-left-color: var(--accent); }
    .toast.hide    { opacity: 0; }
  </style>
</head>

<!--
  Body-level overrides (optional): stm-entrypoint / stm-slots point the library
  at this server's endpoints. They default to /_statum/entrypoint and
  /_statum/slots, so they are shown here only to demonstrate the overrides.
-->
<body stm-entrypoint="/_statum/entrypoint" stm-slots="/_statum/slots">

  <header>
    <h1>Statum Demo</h1>
    <!-- stm-text -->
    <span>Role: <span stm-text="user.name">Guest</span></span>
    <span class="role">
      <!-- stm-if / stm-else-if / stm-else chain -->
      <span stm-if="user.role === 'admin'">administrator tools enabled</span>
      <span stm-else-if="user.role === 'member'">member tools</span>
      <span stm-else>read-only guest</span>
    </span>
    <button stm-action="user.toggleAction">Toggle role</button>
  </header>

  <main>
    <!-- stm-preloader is shown until the entrypoint resolves; stm-content after. -->
    <div stm-preloader>Loading application state…</div>

    <!--
      stm-content is pre-hidden in the HTML so the un-bound template never
      flashes before the script runs; statum removes `hidden` once ready.
    -->
    <div stm-content hidden>
      <!--
        Intentional leftover: this pstm-* markup should have been resolved
        during server-side pre-rendering. The library logs a single console
        warning about it on load to demonstrate that detection.
      -->
      <div pstm-component="header" hidden aria-hidden="true"></div>
      <!-- Counter: stm-text, stm-class.x, stm-if, stm-action, stm-data-*, stm-attribute, stm-disabled -->
      <section>
        <h2>Counter <span class="muted">(stm-text · stm-class · stm-if · stm-data · stm-attribute · stm-disabled)</span></h2>
        <div class="counter">
          <!-- stm-disabled disables the element + descendants when the predicate is true -->
          <button stm-action="counter.decrement" stm-disabled="counter.value &lt;= 0">−</button>
          <!-- stm-class.high toggles when value > 5; stm-attribute.data-value sets a data-* attr -->
          <span class="value" stm-text="counter.value" stm-class.high="counter.value > 5" stm-attribute.data-value="counter.value">0</span>
          <button stm-action="counter.increment">+</button>
          <button stm-action="counter.reset">Reset</button>
          <!-- stm-data-amount sends a literal value with the request -->
          <button stm-action="counter.add" stm-data-amount="5">+5</button>
          <!-- stm-attribute.checked toggles a boolean attribute from a boolean result -->
          <label class="pill"><input type="checkbox" stm-attribute.checked="counter.high"> high flag</label>
        </div>
        <!-- stm-if on a derived boolean -->
        <p stm-if="counter.high">That is a high number!</p>
      </section>

      <!-- Products: stm-for-..-in, stm-key, stm-class, stm-if/else, stm-action, stm-busy-class -->
      <section>
        <h2>Products <span class="muted">(stm-for · stm-key · stm-class · stm-action · stm-busy-class)</span></h2>
        <div class="grid">
          <div class="card"
               stm-for-product-in="products.items"
               stm-key="product.id"
               stm-class.featured="product.featured"
               stm-class.out="!product.inStock">
            <h3 stm-text="product.name">Product</h3>
            <div class="price">$<span stm-text="product.price">0</span></div>
            <p>
              <span class="pill stock" stm-if="product.inStock">In stock</span>
              <span class="pill soldout" stm-else>Sold out</span>
              <span class="pill" stm-if="product.featured">featured</span>
            </p>
            <!--
              Per-item context (the product id) is baked into the action's
              `private` field server-side, so no stm-data expression is needed.
              stm-busy-class applies while the request is in flight.
            -->
            <button stm-action="product.addToCartAction"
                    stm-busy-class="busy"
                    stm-data-confirm="true">Add to cart</button>
          </div>
        </div>
      </section>

      <!-- Cart: stm-text, stm-if/else, nested stm-for, and the always-send slot -->
      <section>
        <h2>Cart <span class="muted">(stm-text · stm-if/else · nested stm-for)</span></h2>
        <p stm-if="cart.empty">Your cart is empty.</p>
        <div stm-else>
          <p><strong>Items:</strong> <span stm-text="cart.count">0</span>
             &nbsp; <strong>Total:</strong> $<span stm-text="cart.total">0</span></p>
          <ul class="lines">
            <!-- nested loop inside an stm-else branch -->
            <li stm-for-line-in="cart.items" stm-key="line.id">
              <span stm-text="line.name"></span> ×
              <span stm-text="line.qty"></span>
              ($<span stm-text="line.price"></span>)
            </li>
          </ul>
          <button stm-action="cart.checkoutAction" stm-disabled="cart.empty">Checkout</button>
          <button stm-action="cart.clearAction">Clear cart</button>
        </div>
      </section>

      <!-- Notice: stm-html, and an error directive to demonstrate stm-on-error -->
      <section>
        <h2>Notice <span class="muted">(stm-html · stm-on-error)</span></h2>
        <!-- stm-html renders server-provided HTML content -->
        <div stm-html="notice.html">No notice set.</div>
        <p>
          <button stm-action="notice.setAction">Set HTML notice</button>
          <!-- stm-on-error applies these classes when the action fails -->
          <button stm-action="notice.failAction" stm-on-error="error">Trigger error</button>
        </p>
      </section>

      <!--
        Markdown: stm-markdown renders the state value as CommonMark. The
        sample deliberately contains the cases the engine is regression-tested
        for: emphasis spanning a line wrap, soft line breaks (no new paragraph),
        a wrapped bullet item, a fenced code block, reference + autolinks, and
        raw HTML / javascript: URLs that must come out inert.
      -->
      <section>
        <h2>Markdown <span class="muted">(stm-markdown · CommonMark, source HTML escaped)</span></h2>
        <div class="md" stm-markdown="markdown.body">Rendering markdown…</div>
      </section>

      <!--
        Profile: stm-prefill writes state into control PROPERTIES (never
        attributes), covering the whole control matrix: text input, select,
        checkbox (checked), and a radio group (every member carries the same
        expression; the one whose value matches is checked). Controls the user
        has edited are dirty and skipped until the form resets.
        stm-clear-on-success resets this form when its own stm-action succeeds
        (the reset also un-dirties the controls, so the fresh prefill below can
        re-apply), and stm-on-success marks the submit button for the duration
        of the next attempt — the success classes mirror stm-on-error (a
        failure clears them and applies the error classes instead).
        The stm-text line echoes the saved state back.
      -->
      <section>
        <h2>Profile <span class="muted">(stm-prefill · dirty tracking · stm-clear-on-success · stm-on-success)</span></h2>
        <form stm-action="profile.saveAction" stm-clear-on-success>
          <p>
            <label>Name <input type="text" name="name" stm-prefill="profile.name"></label>
          </p>
          <p>
            <label>Theme
              <select name="theme" stm-prefill="profile.theme">
                <option value="light">Light</option>
                <option value="dark">Dark</option>
                <option value="auto">Auto</option>
              </select>
            </label>
          </p>
          <p>
            <label><input type="checkbox" name="news" value="1" stm-prefill="profile.news"> Email me news</label>
          </p>
          <p>
            Digest:
            <label><input type="radio" name="cadence" value="daily" stm-prefill="profile.cadence"> Daily</label>
            <label><input type="radio" name="cadence" value="weekly" stm-prefill="profile.cadence"> Weekly</label>
            <label><input type="radio" name="cadence" value="never" stm-prefill="profile.cadence"> Never</label>
          </p>
          <p><button type="submit" stm-on-success="ok" stm-on-error="error">Save profile</button></p>
        </form>
        <p class="muted">
          Saved:
          <span stm-text="profile.name">…</span>
          · theme <span stm-text="profile.theme">…</span>
          · news <span stm-text="profile.news ? 'on' : 'off'">…</span>
          · digest <span stm-text="profile.cadence">…</span>
        </p>
        <!--
          stm-clear-on-error: the mirror of stm-clear-on-success. This form's
          action always fails, so submitting it resets the form to its
          defaults (and un-dirties it). A declined confirm would NOT clear —
          decline is cancellation, not error — but this button has no
          stm-confirm; try it with the DevTools confirm-cancelled case.
        -->
        <form stm-action="profile.failAction" stm-clear-on-error>
          <p>
            <label>Nickname <input type="text" name="nick" value="untyped"></label>
          </p>
          <p><button type="submit" stm-on-error="error">Try a failing save</button></p>
        </form>
      </section>

      <!--
        Live channel: subscribe/unsubscribe directives drive a realtime
        Server-Sent Events connection; broadcasting pushes a `set` to every
        subscribed tab and also returns a `notify` directive. stm-def-{name}-as
        defines a local variable for this element and its descendants.
        Open a second tab and broadcast to see the update arrive live.
      -->
      <section>
        <h2>Live channel <span class="muted">(subscribe · realtime · notify · stm-def)</span></h2>
        <div stm-def-stamp-as="live.at ? 'last updated ' + live.at : ''">
          <p>
            <strong stm-text="live.text">…</strong>
            <span class="muted" stm-text="stamp"></span>
          </p>
          <form stm-action="live.sendAction">
            <input type="text" name="msg" placeholder="Broadcast to every open tab" style="min-width:260px">
            <button type="submit">Broadcast</button>
          </form>
          <p class="muted">
            <button stm-action="live.muteAction">Stop live updates</button>
            <button stm-action="live.resumeAction">Resume live updates</button>
          </p>
        </div>
      </section>

      <section>
        <h2>Session <span class="muted">(stm-confirm)</span></h2>
        <p>
          <!-- stm-confirm shows a confirm() dialog before the action runs. -->
          <button stm-action="user.resetAllAction" stm-confirm="Reset all session state?">Reset everything</button>
        </p>
      </section>
    </div>
  </main>

  <!-- Container for the toast notifications rendered by the handlers below. -->
  <div id="toasts"></div>

  <!-- The library auto-initialises on DOMContentLoaded. Four modules, in load
       order: core first (it installs the seams the later modules register
       into), then document, markdown, forms. -->
  <script src="/statum-core.js"></script>
  <script src="/statum-document.js"></script>
  <script src="/statum-markdown.js"></script>
  <script>
    // Override the default UI handlers so `notify` directives (and errors)
    // render as styled toasts instead of using the browser's native alert().
    // These run before DOMContentLoaded fires, so they are in place before the
    // entrypoint is processed.
    statum.onNotifyHandler = function (kind, message) {
      toast((kind ? '[' + kind + '] ' : '') + (message || ''), kind || 'info');
    };
    statum.onErrorHandler = function (err, element) {
      toast('Error: ' + (err && err.message ? err.message : 'something went wrong'), 'error');
      return true; // keep the default behaviour (stm-on-error classes + rejection)
    };

    function toast(msg, kind) {
      var box = document.getElementById('toasts');
      if (!box) return;
      var el = document.createElement('div');
      el.className = 'toast ' + kind;
      el.textContent = msg;
      box.appendChild(el);
      setTimeout(function () {
        el.classList.add('hide');
        setTimeout(function () { el.remove(); }, 400);
      }, 3500);
    }
  </script>
</body>

</html>