Tilo15
/
Statum


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394
							<!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;
    }

    .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>

      <!--
        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. -->
  <script src="/statum.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>