@bendyline/gilde 0.1.92 → 0.1.94

package/data/project-types/fl/flashcards/versions/1.1.2/pages/review/index.html

@@ -0,0 +1,477 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="gezel-demo" content="standalone" />
+    <title>Flashcards</title>
+    <style>
+      :root {
+        color-scheme: light dark;
+        --bg: #faf7f2;
+        --card: #fff;
+        --ink: #2b2620;
+        --muted: #7a7166;
+        --accent: #b5651d;
+        --track: #ece5da;
+        --good: #4a7c59;
+        --warn: #a4552e;
+      }
+      :root[data-theme='dark'] {
+        --bg: #1c1a17;
+        --card: #262320;
+        --ink: #efe9e0;
+        --muted: #a59a8c;
+        --accent: #e0894a;
+        --track: #3a352f;
+        --good: #7fae8d;
+        --warn: #d98a63;
+      }
+      @media (prefers-color-scheme: dark) {
+        :root:not([data-theme='light']) {
+          --bg: #1c1a17;
+          --card: #262320;
+          --ink: #efe9e0;
+          --muted: #a59a8c;
+          --accent: #e0894a;
+          --track: #3a352f;
+          --good: #7fae8d;
+          --warn: #d98a63;
+        }
+      }
+      * { box-sizing: border-box; }
+      body {
+        margin: 0;
+        font: 15px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+        background: var(--bg);
+        color: var(--ink);
+        padding: 1.5rem 1.25rem;
+      }
+      main { max-width: 560px; margin: 0 auto; }
+      h1 {
+        font-family: Georgia, 'PT Serif', 'Times New Roman', serif;
+        font-size: 1.35rem;
+        font-weight: 600;
+        margin: 0 0 0.15rem;
+      }
+      .sub { color: var(--muted); font-size: 0.9rem; margin: 0 0 1rem; }
+      .dots { display: flex; gap: 0.3rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
+      .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--track); }
+      .dot.done-good { background: var(--good); }
+      .dot.done-miss { background: var(--warn); }
+      .dot.current { background: var(--accent); }
+      .flashcard {
+        background: var(--card);
+        border: 1px solid var(--track);
+        border-radius: 10px;
+        min-height: 200px;
+        display: grid;
+        place-items: center;
+        text-align: center;
+        padding: 1.5rem;
+        font-size: 1.15rem;
+        cursor: pointer;
+        user-select: none;
+      }
+      .flashcard .face-label {
+        display: block;
+        font-size: 0.7rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--muted);
+        margin-bottom: 0.6rem;
+      }
+      .actions { display: flex; gap: 0.6rem; margin-top: 0.85rem; justify-content: center; }
+      .actions button {
+        border: 1px solid var(--track);
+        background: var(--card);
+        color: var(--ink);
+        border-radius: 6px;
+        padding: 0.45rem 1.1rem;
+        min-height: 44px;
+        font: inherit;
+        cursor: pointer;
+      }
+      .actions button.got { border-color: var(--good); color: var(--good); }
+      .actions button.miss { border-color: var(--warn); color: var(--warn); }
+      .actions button:disabled { opacity: 0.5; cursor: default; }
+      .empty, .done {
+        background: var(--card);
+        border: 1px dashed var(--track);
+        border-radius: 10px;
+        padding: 1.5rem;
+        text-align: center;
+        color: var(--muted);
+      }
+      .banner {
+        border: 1px solid var(--accent);
+        border-radius: 6px;
+        padding: 0.45rem 0.7rem;
+        font-size: 0.85rem;
+        margin-bottom: 0.75rem;
+        display: none;
+      }
+      .banner.show { display: block; }
+      .hint { font-size: 0.78rem; color: var(--muted); text-align: center; margin-top: 0.5rem; }
+      .note {
+        margin: 0 0 0.85rem;
+        padding: 0.5rem 0.65rem;
+        border: 1px solid var(--track);
+        border-radius: 6px;
+        background: var(--card);
+        color: var(--muted);
+        font-size: 0.8rem;
+      }
+      .demo-banner {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.75rem;
+        margin: 0 0 0.85rem;
+        padding: 0.5rem 0.65rem;
+        border: 1px solid var(--accent);
+        border-radius: 6px;
+        background: color-mix(in srgb, var(--card) 88%, var(--accent));
+        color: var(--ink);
+        font-size: 0.8rem;
+      }
+      .demo-banner[hidden] { display: none; }
+      .demo-banner strong { font-weight: 700; }
+      .demo-reset {
+        flex: none;
+        padding: 0.25rem 0.5rem;
+        border: 1px solid var(--accent);
+        border-radius: 6px;
+        background: var(--card);
+        color: var(--ink);
+        cursor: pointer;
+        font: inherit;
+      }
+      .demo-reset:hover { border-color: var(--ink); }
+    </style>
+  </head>
+  <body>
+    <main>
+      <div class="demo-banner" data-gezel-demo-banner hidden>
+        <span><strong>Demo mode</strong> — sample data stays in this page.</span>
+        <button type="button" class="demo-reset" onclick="location.reload()">Reset demo</button>
+      </div>
+      <p class="note" id="browser-note" hidden>
+        Viewing from a browser tab — the deck stays live, but reviews happen in the app's Output pane.
+      </p>
+      <div class="banner" id="banner"></div>
+      <h1 id="title">Flashcards</h1>
+      <p class="sub" id="sub">Loading the deck…</p>
+      <div class="dots" id="dots"></div>
+      <div id="stage"></div>
+      <p class="hint" id="hint"></p>
+    </main>
+    <script>
+/* gezel-page-demo-stub v1 */
+/*
+ * The canonical demo stub for Gezel type pages. MIT License.
+ *
+ * Paste this file's bytes verbatim into a <script> block ahead of the
+ * page's own code, then call makeDemoGezel({ page, tools, data }) with the
+ * page's demo handlers. Served by Gezel, the real window.gezel is already
+ * injected and the stub steps aside; opened as a raw file (the live demos
+ * on gezelgilde.com), it installs a window.gezel whose tools and data are
+ * the page-supplied handler maps — one code path in every mode. `tools`
+ * and `data` map a tool name / declared read path to a function; data
+ * handlers back read() and list(), and url() returns the handler's value
+ * or passes a data: URI through. See docs/page-authoring.md.
+ */
+(function () {
+  'use strict';
+  window.makeDemoGezel = function (opts) {
+    if (window.gezel) return window.gezel;
+    var page = (opts && opts.page) || {};
+    var tools = (opts && opts.tools) || {};
+    var data = (opts && opts.data) || {};
+    var themeListeners = [];
+    var media = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
+    var ui = {
+      theme: { mode: media && media.matches ? 'dark' : 'light' },
+      onTheme: function (cb) {
+        themeListeners.push(cb);
+        return function () {
+          var at = themeListeners.indexOf(cb);
+          if (at >= 0) themeListeners.splice(at, 1);
+        };
+      },
+    };
+    if (media && media.addEventListener) {
+      media.addEventListener('change', function (ev) {
+        ui.theme = { mode: ev.matches ? 'dark' : 'light' };
+        themeListeners.slice().forEach(function (cb) { cb(ui.theme); });
+      });
+    }
+    function fail(code, message) {
+      var err = new Error(message);
+      err.code = code;
+      return Promise.reject(err);
+    }
+    function run(map, key, arg) {
+      if (!Object.prototype.hasOwnProperty.call(map, key)) return null;
+      return Promise.resolve().then(function () { return map[key](arg); });
+    }
+    window.gezel = {
+      page: {
+        api: 1,
+        projectId: 'demo',
+        source: 'type',
+        entry: page.entry || 'index.html',
+        typeName: page.typeName || 'demo',
+        params: page.params || {},
+        mode: 'demo',
+      },
+      tools: {
+        list: function () { return Promise.resolve(Object.keys(tools)); },
+        invoke: function (name, input) {
+          var call = run(tools, name, input || {});
+          if (!call) return fail('not-allowed', "The demo does not handle the tool '" + name + "'.");
+          return call.then(function (output) { return { output: output }; });
+        },
+      },
+      data: {
+        read: function (path, o) {
+          return run(data, path, o || {}) || fail('not-allowed', "The demo has no data for '" + path + "'.");
+        },
+        list: function (path, o) {
+          return run(data, path, o || {}) || Promise.resolve([]);
+        },
+        watch: function () { return function () {}; },
+        url: function (path) {
+          if (Object.prototype.hasOwnProperty.call(data, path)) return String(data[path]({}));
+          return typeof path === 'string' && path.indexOf('data:') === 0 ? path : '';
+        },
+      },
+      ui: ui,
+      refresh: function () {},
+    };
+    return window.gezel;
+  };
+})();
+    </script>
+    <script>
+      (function () {
+        'use strict';
+
+        // ── demo deck (used only when the page opens as a raw file) ──
+        var demoDeck = {
+          subject: 'Dutch for a market morning',
+          cards: [
+            { id: 'card-1', front: 'Hoeveel kost dit?', back: 'How much does this cost?' },
+            { id: 'card-2', front: 'een bos bloemen', back: 'a bunch of flowers' },
+            { id: 'card-3', front: 'Mag ik pinnen?', back: 'Can I pay by card?' },
+            { id: 'card-4', front: 'Dat is alles, dank u.', back: 'That is all, thank you.' },
+          ],
+          dueCardIds: ['card-1', 'card-2', 'card-3', 'card-4'],
+        };
+        function demoCard(id) {
+          return demoDeck.cards.find(function (c) { return c.id === id; }) || null;
+        }
+
+        makeDemoGezel({
+          page: { entry: 'review/index.html', typeName: 'Flashcards' },
+          tools: {
+            record_review: function (input) {
+              var card = demoCard(input && input.cardId);
+              if (!card) throw new Error("No card '" + (input && input.cardId) + "' in the demo deck.");
+              // The demo deck stays due so the session can be replayed;
+              // Reset demo restores everything else.
+              return { summary: card.id + ' marked ' + input.verdict + '.' };
+            },
+            finish_session: function (input) {
+              var reviewed = (input && input.reviewed) || 0;
+              var missed = ((input && input.missedIds) || []).length;
+              return { summary: 'Reviewed ' + reviewed + ' card(s): ' + (reviewed - missed) + ' got it, ' + missed + ' missed.' };
+            },
+          },
+          data: {
+            'deck.json': function () { return demoDeck; },
+          },
+        });
+
+        // ── one code path from here: window.gezel exists in every mode ──
+        var demoMode = gezel.page.mode === 'demo';
+        var browserMode = gezel.page.mode === 'browser';
+
+        function applyTheme(mode) {
+          document.documentElement.setAttribute('data-theme', mode === 'dark' ? 'dark' : 'light');
+        }
+        applyTheme(gezel.ui.theme.mode);
+        gezel.ui.onTheme(function (theme) { applyTheme(theme.mode); });
+
+        if (demoMode) document.querySelector('[data-gezel-demo-banner]').hidden = false;
+        if (browserMode) document.getElementById('browser-note').hidden = false;
+
+        var deck = null;
+        // The session queue is snapshotted from dueCardIds at start so a
+        // background change never reshuffles cards mid-session.
+        var queue = null;
+        var idx = 0;
+        var flipped = false;
+        var results = [];
+        var busy = false;
+
+        function esc(s) {
+          return String(s).replace(/[&<>"]/g, function (c) {
+            return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c];
+          });
+        }
+        function setBanner(text) {
+          var el = document.getElementById('banner');
+          el.textContent = text || '';
+          el.className = text ? 'banner show' : 'banner';
+        }
+        function invokeErrorText(err) {
+          if (err && err.code === 'unavailable') {
+            return "Reviews happen in the app's Output pane — this browser tab stays view-only.";
+          }
+          return String(err && err.message ? err.message : err);
+        }
+        function cardById(id) {
+          return (deck.cards || []).find(function (c) { return c.id === id; }) || null;
+        }
+
+        function render() {
+          var stage = document.getElementById('stage');
+          var dots = document.getElementById('dots');
+          var hint = document.getElementById('hint');
+          if (!deck) return;
+          if (deck.subject) document.getElementById('title').textContent = 'Flashcards: ' + deck.subject;
+
+          if (!deck.cards || deck.cards.length === 0) {
+            document.getElementById('sub').textContent = 'The deck is empty.';
+            dots.innerHTML = '';
+            hint.textContent = '';
+            stage.innerHTML =
+              '<div class="empty">No cards yet — ask your Studiemaat to write the first ones.</div>';
+            return;
+          }
+
+          if (queue === null || (idx >= queue.length && queue.length === 0)) {
+            document.getElementById('sub').textContent =
+              deck.dueCardIds.length > 0
+                ? deck.dueCardIds.length + ' card(s) due.'
+                : 'Nothing due right now.';
+            dots.innerHTML = '';
+            hint.textContent = '';
+            stage.innerHTML =
+              deck.dueCardIds.length > 0
+                ? '<div class="actions"><button type="button" id="start">Start review (' + deck.dueCardIds.length + ')</button></div>'
+                : '<div class="done">All caught up — nothing due. Your Studiemaat can always add more.</div>';
+            var startBtn = document.getElementById('start');
+            if (startBtn) startBtn.addEventListener('click', startSession);
+            return;
+          }
+
+          if (idx >= queue.length) {
+            var missed = results.filter(function (r) { return r.verdict === 'missed'; }).length;
+            document.getElementById('sub').textContent =
+              'Session done: ' + (results.length - missed) + ' got it, ' + missed + ' missed.';
+            hint.textContent = '';
+            stage.innerHTML = '<div class="done">Nice work — your Studiemaat has the recap.</div>';
+            return;
+          }
+
+          var card = cardById(queue[idx]);
+          if (!card) {
+            idx += 1;
+            render();
+            return;
+          }
+          document.getElementById('sub').textContent = 'Card ' + (idx + 1) + ' of ' + queue.length;
+          dots.innerHTML = queue
+            .map(function (id, i) {
+              if (i === idx) return '<span class="dot current"></span>';
+              var r = results[i];
+              if (!r) return '<span class="dot"></span>';
+              return '<span class="dot ' + (r.verdict === 'missed' ? 'done-miss' : 'done-good') + '"></span>';
+            })
+            .join('');
+          stage.innerHTML =
+            '<div class="flashcard" id="card"><div><span class="face-label">' +
+            (flipped ? 'Back' : 'Front') + '</span>' + esc(flipped ? card.back : card.front) +
+            '</div></div>' +
+            (flipped
+              ? '<div class="actions">' +
+                '<button type="button" class="got" id="got"' + (busy ? ' disabled' : '') + '>Got it</button>' +
+                '<button type="button" class="miss" id="miss"' + (busy ? ' disabled' : '') + '>Missed</button>' +
+                '</div>'
+              : '');
+          hint.textContent = flipped ? '' : 'Tap the card to reveal the answer.';
+          document.getElementById('card').addEventListener('click', function () {
+            if (!flipped) {
+              flipped = true;
+              render();
+            }
+          });
+          if (flipped) {
+            document.getElementById('got').addEventListener('click', function () { grade('got-it'); });
+            document.getElementById('miss').addEventListener('click', function () { grade('missed'); });
+          }
+        }
+
+        function startSession() {
+          queue = deck.dueCardIds.slice();
+          idx = 0;
+          flipped = false;
+          results = [];
+          render();
+        }
+
+        function grade(verdict) {
+          if (busy) return;
+          busy = true;
+          render();
+          var cardId = queue[idx];
+          gezel.tools
+            .invoke('record_review', { cardId: cardId, verdict: verdict })
+            .then(function () {
+              busy = false;
+              results[idx] = { cardId: cardId, verdict: verdict };
+              idx += 1;
+              flipped = false;
+              if (idx >= queue.length) return finishSession();
+              render();
+            })
+            .catch(function (err) {
+              busy = false;
+              setBanner(invokeErrorText(err));
+              render();
+            });
+        }
+
+        function finishSession() {
+          var missedIds = results
+            .filter(function (r) { return r.verdict === 'missed'; })
+            .map(function (r) { return r.cardId; });
+          return gezel.tools
+            .invoke('finish_session', { reviewed: results.length, missedIds: missedIds })
+            .catch(function () {})
+            .then(function () {
+              render();
+              return loadDeck();
+            });
+        }
+
+        function loadDeck() {
+          return gezel.data
+            .read('deck.json')
+            .then(function (next) {
+              deck = next;
+              // Only re-render outside an active session — mid-session the
+              // snapshot queue drives the UI.
+              if (queue === null || idx >= queue.length) render();
+            })
+            .catch(function () {});
+        }
+
+        loadDeck();
+        gezel.data.watch('deck.json', function () { loadDeck(); });
+      })();
+    </script>
+  </body>
+</html>

package/data/project-types/fl/flashcards/versions/1.2.0/about.md

@@ -0,0 +1,8 @@
+A spaced-repetition practice bench for **{{subject}}**.
+
+Your Studiemaat writes the cards — ask for them in chat, or let them propose
+cards when a weak spot shows. You review in the **Output** tab: flip the card,
+mark it got-it or missed, and the deck's schedule decides when each card comes
+back (daily, every three days, weekly, as you prove them).
+
+After each session your Studiemaat checks in on how it went.

package/data/project-types/fl/flashcards/versions/1.2.0/deck.json

@@ -0,0 +1,7 @@
+{
+  "version": 1,
+  "subject": "{{subject}}",
+  "cards": [],
+  "dueCardIds": [],
+  "updatedAt": "2026-07-18T00:00:00.000Z"
+}