npm - @bendyline/gilde - Versions diffs - 0.1.21 → 0.1.22 - Mend

@bendyline/gilde 0.1.21 → 0.1.22

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 (47) hide show

package/data/project-types/so/social-feed/versions/1.0.0/pages/dashboard/index.html ADDED Viewed

@@ -0,0 +1,754 @@
+<!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>Social feed pipeline</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 2rem;
+      }
+      main { max-width: 1080px; margin: 0 auto; }
+      h1 {
+        font-family: Georgia, 'PT Serif', 'Times New Roman', serif;
+        font-size: 1.4rem;
+        font-weight: 600;
+        margin: 0 0 0.15rem;
+        overflow-wrap: anywhere;
+      }
+      .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; }
+      .sub { color: var(--muted); margin: 0 0 1rem; font-size: 0.9rem; }
+      .hint { color: var(--muted); font-size: 0.8rem; margin: 0 0 0.9rem; }
+      .key {
+        font: inherit;
+        font-size: 0.8rem;
+        padding: 0.25rem 0.55rem;
+        border: 1px solid var(--track);
+        border-radius: 6px;
+        background: var(--card);
+        color: var(--ink);
+        cursor: pointer;
+      }
+      .key:hover { border-color: var(--muted); }
+      .key[aria-pressed='true'] {
+        border-color: var(--accent);
+        color: var(--accent);
+        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
+      }
+      .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;
+      }
+      .board-wrap { overflow-x: auto; padding-bottom: 0.25rem; }
+      .board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(168px, 1fr); gap: 0.6rem; min-width: 900px; }
+      .col { min-width: 0; }
+      .col h2 {
+        font-size: 0.72rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--muted);
+        margin: 0 0 0.4rem;
+        font-weight: 600;
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+      }
+      .col h2 .count { color: var(--ink); }
+      .card {
+        display: block;
+        width: 100%;
+        text-align: left;
+        font: inherit;
+        color: var(--ink);
+        background: var(--card);
+        border: 1px solid var(--track);
+        border-radius: 6px;
+        padding: 0.5rem 0.6rem;
+        margin-bottom: 0.45rem;
+        font-size: 0.85rem;
+        cursor: pointer;
+      }
+      .card:hover { border-color: var(--muted); }
+      .card .ti { display: block; font-weight: 600; overflow-wrap: anywhere; }
+      .card .ft { margin-top: 0.3rem; display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: 0.72rem; }
+      .chip {
+        display: inline-block;
+        border: 1px solid var(--track);
+        border-radius: 4px;
+        padding: 0 0.3rem;
+        font-size: 0.7rem;
+        line-height: 1.4;
+        color: var(--muted);
+      }
+      .chip.tag { border-style: dashed; }
+      .chip.st-draft, .chip.st-scheduled { color: var(--accent); border-color: var(--accent); }
+      .chip.st-in-review { color: var(--warn); border-color: var(--warn); }
+      .chip.st-approved, .chip.st-published { color: var(--good); border-color: var(--good); }
+      .board-empty {
+        background: var(--card);
+        border: 1px dashed var(--track);
+        border-radius: 10px;
+        padding: 0.85rem 1.25rem;
+        text-align: center;
+        color: var(--muted);
+        margin-bottom: 0.75rem;
+      }
+      .foot { color: var(--muted); font-size: 0.72rem; margin-top: 1rem; }
+      .drawer {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: min(430px, 94vw);
+        background: var(--card);
+        border-left: 1px solid var(--track);
+        box-shadow: -6px 0 18px rgba(0, 0, 0, 0.08);
+        padding: 1rem 1.1rem 1.5rem;
+        overflow-y: auto;
+        z-index: 10;
+      }
+      .drawer[hidden] { display: none; }
+      .drawer .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
+      .drawer h2 {
+        font-family: Georgia, 'PT Serif', 'Times New Roman', serif;
+        font-size: 1.1rem;
+        font-weight: 600;
+        margin: 0 0 0.2rem;
+        overflow-wrap: anywhere;
+      }
+      .drawer h3 {
+        font-size: 0.72rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--muted);
+        margin: 1rem 0 0.35rem;
+        font-weight: 600;
+      }
+      .drawer .meta { color: var(--muted); font-size: 0.8rem; }
+      .drawer .body-text { white-space: pre-wrap; font-size: 0.88rem; overflow-wrap: anywhere; }
+      .drawer .moves { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.35rem; }
+      .drawer .error { color: var(--warn); font-size: 0.8rem; margin: 0.4rem 0 0; }
+      .variant {
+        border: 1px solid var(--track);
+        border-radius: 6px;
+        padding: 0.45rem 0.6rem;
+        margin-bottom: 0.45rem;
+        font-size: 0.83rem;
+      }
+      .variant .vh { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.25rem; }
+      .variant .vh .name { font-weight: 600; }
+      .variant .vb { white-space: pre-wrap; color: var(--ink); overflow-wrap: anywhere; }
+      .variant a { color: var(--accent); }
+      .empty { color: var(--muted); font-style: italic; }
+      .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); }
+      @media (max-width: 860px) {
+        .board { grid-auto-flow: row; grid-auto-columns: unset; grid-template-columns: 1fr; min-width: 0; }
+      }
+    </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 board stays live, but moving posts happens in the app's Output pane.
+      </p>
+      <div class="head">
+        <div>
+          <h1 id="title">Social feed</h1>
+          <p class="sub" id="sub">Loading the pipeline…</p>
+        </div>
+        <button type="button" class="key" id="toggle-archived" aria-pressed="false">Show archived</button>
+      </div>
+      <p class="hint" id="corpus-hint" hidden>
+        Connected feeds are syncing — reception reports read from the project's artifacts.
+      </p>
+      <div class="board-empty" id="board-empty" hidden>
+        No posts yet — ask your Omroeper to draft the first one.
+      </div>
+      <div class="board-wrap"><div class="board" id="board"></div></div>
+      <p class="foot" id="mode-line"></p>
+    </main>
+    <aside class="drawer" id="drawer" hidden>
+      <div class="top">
+        <div>
+          <h2 id="d-title"></h2>
+          <p class="meta" id="d-meta"></p>
+        </div>
+        <button type="button" class="key" id="d-close">Close</button>
+      </div>
+      <h3>Move to</h3>
+      <div class="moves" id="d-moves"></div>
+      <p class="error" id="d-error" hidden></p>
+      <h3>Post</h3>
+      <div class="body-text" id="d-body"></div>
+      <h3>Variants</h3>
+      <div id="d-variants"></div>
+      <h3>Media</h3>
+      <p class="meta" id="d-media"></p>
+    </aside>
+    <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';
+        var STAGES = ['idea', 'draft', 'in-review', 'approved', 'scheduled', 'published'];
+        var DAY = 24 * 60 * 60 * 1000;
+        function legalNext(from) {
+          if (from === 'archived') return [];
+          var at = STAGES.indexOf(from);
+          var next = at >= 0 && at < STAGES.length - 1 ? [STAGES[at + 1]] : [];
+          return next.concat(['archived']);
+        }
+        // ── demo dataset (used only when the page opens as a raw file) ──
+        function demoPost(daysAgo, slug, title, status, platforms, extra) {
+          var created = new Date(Date.now() - daysAgo * DAY).toISOString().slice(0, 10);
+          var post = {
+            id: created + '-' + slug,
+            title: title,
+            status: status,
+            platforms: platforms,
+            created: created,
+            body: extra.body || 'A note from the workshop.',
+            variants: extra.variants || {},
+            media: extra.media || [],
+          };
+          if (extra.scheduledFor) post.scheduledFor = extra.scheduledFor;
+          if (extra.campaign) post.campaign = extra.campaign;
+          if (extra.tags) post.tags = extra.tags;
+          return post;
+        }
+        var demoPosts = [
+          demoPost(0, 'field-notes-from-the-bindery', 'Field notes from the bindery', 'idea', ['bluesky', 'x'], {
+            body: 'Rough notion: a short thread on what the bindery bench looks like on a Tuesday. Honest tools, honest mess.',
+          }),
+          demoPost(1, 'introducing-the-autumn-catalog', 'Introducing the autumn catalog', 'draft', ['bluesky', 'x'], {
+            campaign: 'autumn-launch',
+            body: 'The autumn catalog is nearly sewn. This post introduces the three new editions and the paper they live on.',
+            variants: {
+              bluesky: { charCount: 182, body: 'The autumn catalog is at the bench: three new editions, one very stubborn marbled endpaper. First look on Thursday.' },
+            },
+          }),
+          demoPost(2, 'how-we-choose-paper', 'How we choose paper', 'in-review', ['bluesky'], {
+            tags: ['craft', 'paper'],
+            body: 'A short piece on choosing paper by ear as much as by hand — what a good sheet sounds like when it turns.',
+            variants: {
+              bluesky: { charCount: 236, body: 'You can hear a good sheet before you feel it. A note on choosing paper by ear, from the person who turns every page twice.' },
+            },
+          }),
+          demoPost(4, 'meet-the-press-vandercook-4', 'Meet the press: Vandercook No. 4', 'approved', ['bluesky', 'x'], {
+            tags: ['workshop'],
+            body: 'Portrait of the shop’s Vandercook No. 4 — sixty years old, still square, still the fussiest colleague we have.',
+            variants: {
+              bluesky: { charCount: 204, body: 'Meet the Vandercook No. 4. Sixty years old, perfectly square, entirely unimpressed by deadlines. The shop runs on her mood.' },
+              x: { charCount: 168, body: 'Sixty years old, perfectly square, unimpressed by deadlines. Meet the press the whole shop answers to.' },
+            },
+          }),
+          demoPost(6, 'autumn-catalog-first-look', 'Autumn catalog — first look', 'scheduled', ['bluesky', 'x'], {
+            campaign: 'autumn-launch',
+            scheduledFor: new Date(Date.now() + 2 * DAY).toISOString().slice(0, 10),
+            body: 'The first spread from the autumn catalog, photographed on the bench it was made at.',
+            variants: {
+              bluesky: { charCount: 148, body: 'First look at the autumn catalog — three editions, sewn by hand, photographed where they were made.' },
+              x: { charCount: 121, body: 'Autumn catalog, first look. Three editions, sewn by hand. Thursday.' },
+            },
+          }),
+          demoPost(9, 'a-morning-at-the-bench', 'A morning at the bench', 'published', ['bluesky', 'x'], {
+            body: 'What 7am looks like in the shop: coffee, bone folders, and the day’s first imposition.',
+            variants: {
+              bluesky: { charCount: 158, publishedAt: new Date(Date.now() - 8 * DAY).toISOString(), permalink: 'https://bsky.app/profile/demo/post/3kexample', body: '7am in the shop: coffee going cold, bone folders warming up. The day’s first imposition, in pictures.' },
+              x: { charCount: 132, publishedAt: new Date(Date.now() - 8 * DAY).toISOString(), permalink: 'https://x.com/demo/status/1234567890', body: '7am: coffee cold, bone folders warm, first imposition on the stone.' },
+            },
+          }),
+          demoPost(20, 'old-workshop-hours', 'Workshop hours update (superseded)', 'archived', ['bluesky'], {
+            body: 'Superseded hours announcement, kept for the record.',
+          }),
+        ];
+        function demoFind(id) {
+          for (var i = 0; i < demoPosts.length; i += 1) {
+            if (demoPosts[i].id === id) return demoPosts[i];
+          }
+          return null;
+        }
+        function demoIndex() {
+          return {
+            version: 1,
+            posts: demoPosts.map(function (post) {
+              var entry = {
+                id: post.id,
+                title: post.title,
+                status: post.status,
+                platforms: post.platforms,
+                created: post.created,
+              };
+              if (post.scheduledFor) entry.scheduledFor = post.scheduledFor;
+              if (post.campaign) entry.campaign = post.campaign;
+              return entry;
+            }),
+          };
+        }
+        makeDemoGezel({
+          page: {
+            entry: 'dashboard/index.html',
+            typeName: 'Social Feed',
+            params: {
+              brand: 'Juniper Press',
+              cadence: '3 posts a week',
+              voice: 'Warm, plain, and a little inky.',
+            },
+          },
+          tools: {
+            page_set_status: function (input) {
+              var post = demoFind(input && input.id);
+              if (!post) throw new Error("No post '" + (input && input.id) + "' in the demo board.");
+              var to = input.status;
+              if (post.status !== to && legalNext(post.status).indexOf(to) < 0) {
+                var next = legalNext(post.status);
+                throw new Error(
+                  "Cannot move '" + post.id + "' from " + post.status + ' to ' + to +
+                  ' — posts move one stage at a time.' +
+                  (next.length ? ' Legal next: ' + next.join(', ') + '.' : " '" + post.status + "' is final.")
+                );
+              }
+              post.status = to;
+              return { id: post.id, status: post.status, summary: 'Moved.' };
+            },
+            page_get_post: function (input) {
+              var post = demoFind(input && input.id);
+              if (!post) throw new Error("No post '" + (input && input.id) + "' in the demo board.");
+              return { id: post.id, status: post.status, post: post, summary: post.title };
+            },
+          },
+          data: {
+            'posts/index.json': function () { return demoIndex(); },
+            data: function () {
+              return [{ name: 'bluesky-posts', kind: 'dir', size: 0, mtime: new Date().toISOString() }];
+            },
+          },
+        });
+        // ── one code path from here: window.gezel exists in every mode ──
+        var demoMode = gezel.page.mode === 'demo';
+        var browserMode = gezel.page.mode === 'browser';
+        var params = gezel.page.params || {};
+        var showArchived = false;
+        var openPostId = null;
+        var lastIndex = { posts: [] };
+        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;
+        function esc(value) {
+          return String(value).replace(/[&<>"]/g, function (ch) {
+            return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[ch];
+          });
+        }
+        function el(id) { return document.getElementById(id); }
+        var brand = typeof params.brand === 'string' && params.brand ? params.brand : gezel.page.typeName;
+        el('title').textContent = brand;
+        el('mode-line').textContent = 'mode: ' + gezel.page.mode;
+        document.title = brand + ' — social feed pipeline';
+        function parseFront(text) {
+          var lines = String(text).split(/\r?\n/);
+          if ((lines[0] || '').trim() !== '---') return { fields: {}, body: String(text) };
+          var fields = {};
+          for (var i = 1; i < lines.length; i += 1) {
+            if (lines[i].trim() === '---') {
+              return { fields: fields, body: lines.slice(i + 1).join('\n').replace(/^\n/, '') };
+            }
+            var sep = lines[i].indexOf(':');
+            if (sep <= 0) continue;
+            var key = lines[i].slice(0, sep).trim();
+            var raw = lines[i].slice(sep + 1).trim();
+            if (raw.charAt(0) === '[' && raw.charAt(raw.length - 1) === ']') {
+              fields[key] = raw.slice(1, -1).split(',').map(function (part) { return part.trim(); }).filter(Boolean);
+            } else {
+              fields[key] = raw;
+            }
+          }
+          return { fields: {}, body: String(text) };
+        }
+        function renderBoard(index) {
+          lastIndex = index && Array.isArray(index.posts) ? index : { posts: [] };
+          var posts = lastIndex.posts;
+          var live = posts.filter(function (post) { return post.status !== 'archived'; });
+          var published = posts.filter(function (post) { return post.status === 'published'; }).length;
+          var cadence = typeof params.cadence === 'string' && params.cadence ? params.cadence : '';
+          el('sub').textContent =
+            (cadence ? 'Aiming for ' + cadence + ' · ' : '') +
+            live.length + ' post' + (live.length === 1 ? '' : 's') + ' in flight · ' + published + ' published';
+          el('board-empty').hidden = posts.length > 0;
+          var columns = showArchived ? STAGES.concat(['archived']) : STAGES;
+          el('board').innerHTML = columns
+            .map(function (stage) {
+              var here = posts.filter(function (post) { return post.status === stage; });
+              var cards = here
+                .map(function (post) {
+                  var chips = (post.platforms || [])
+                    .map(function (platform) { return '<span class="chip">' + esc(platform) + '</span>'; })
+                    .join('');
+                  if (post.campaign) chips += '<span class="chip tag">' + esc(post.campaign) + '</span>';
+                  var when = post.status === 'scheduled' && post.scheduledFor ? 'for ' + esc(String(post.scheduledFor).slice(0, 10)) : esc(String(post.created || '').slice(0, 10));
+                  return (
+                    '<button type="button" class="card" data-post="' + esc(post.id) + '">' +
+                    '<span class="ti">' + esc(post.title || post.id) + '</span>' +
+                    '<span class="ft">' + chips + '<span>' + when + '</span></span>' +
+                    '</button>'
+                  );
+                })
+                .join('');
+              return (
+                '<div class="col"><h2><span>' + esc(stage) + '</span><span class="count">' + here.length + '</span></h2>' +
+                cards +
+                '</div>'
+              );
+            })
+            .join('');
+        }
+        function loadBoard() {
+          return gezel.data
+            .read('posts/index.json')
+            .then(function (index) { renderBoard(index); })
+            .catch(function () { renderBoard({ posts: [] }); });
+        }
+        function setDrawerError(message) {
+          var node = el('d-error');
+          node.textContent = message || '';
+          node.hidden = !message;
+        }
+        function renderDrawer(post) {
+          el('drawer').hidden = false;
+          el('d-title').textContent = post.title || post.id;
+          var meta = [post.status, 'created ' + String(post.created || '').slice(0, 10)];
+          if (post.scheduledFor) meta.push('scheduled for ' + String(post.scheduledFor).slice(0, 10));
+          if (post.campaign) meta.push('campaign: ' + post.campaign);
+          el('d-meta').textContent = meta.join(' · ');
+          el('d-body').textContent = post.body || '(no body yet)';
+          var moves = legalNext(post.status);
+          el('d-moves').innerHTML =
+            moves.length === 0
+              ? '<span class="empty">' + esc(post.status) + ' is the end of the line.</span>'
+              : moves
+                  .map(function (stage) {
+                    return '<button type="button" class="key" data-move="' + esc(stage) + '">' + esc(stage) + '</button>';
+                  })
+                  .join('');
+          if (browserMode && moves.length > 0) {
+            el('d-moves').innerHTML = '<span class="empty">Open the Output pane in the app to move this post.</span>';
+          }
+          var variants = post.variants || {};
+          var names = Object.keys(variants);
+          el('d-variants').innerHTML =
+            names.length === 0
+              ? '<p class="meta empty">No platform variants drafted yet.</p>'
+              : names
+                  .map(function (name) {
+                    var variant = variants[name] || {};
+                    var head = '<span class="name">' + esc(name) + '</span>' +
+                      '<span class="chip">' + esc(String(variant.charCount || 0)) + ' chars</span>';
+                    if (variant.publishedAt) head += '<span class="chip st-published">live</span>';
+                    if (variant.permalink) {
+                      head += '<a href="' + esc(variant.permalink) + '" rel="noreferrer">permalink</a>';
+                    }
+                    return '<div class="variant"><div class="vh">' + head + '</div>' +
+                      '<div class="vb">' + esc(variant.body || '') + '</div></div>';
+                  })
+                  .join('');
+          var media = post.media || [];
+          el('d-media').textContent = media.length === 0 ? 'No media attached.' : media.join(', ');
+        }
+        function fallbackDetail(id) {
+          return gezel.data.read('posts/' + id + '/post.md').then(function (raw) {
+            var parsed = parseFront(raw);
+            var post = { id: id };
+            Object.keys(parsed.fields).forEach(function (key) { post[key] = parsed.fields[key]; });
+            post.status = String(parsed.fields.status || 'idea');
+            post.platforms = [].concat(parsed.fields.platforms || []);
+            post.body = parsed.body.trim();
+            post.variants = {};
+            post.media = [];
+            return gezel.data
+              .list('posts/' + id + '/variants')
+              .catch(function () { return []; })
+              .then(function (entries) {
+                var files = entries.filter(function (entry) { return entry.kind !== 'dir' && /\.md$/.test(entry.name); });
+                return Promise.all(
+                  files.map(function (entry) {
+                    return gezel.data
+                      .read('posts/' + id + '/variants/' + entry.name)
+                      .then(function (variantRaw) {
+                        var variantDoc = parseFront(variantRaw);
+                        var body = variantDoc.body.trim();
+                        var variant = { charCount: Number(variantDoc.fields.charCount) || body.length, body: body };
+                        ['publishedAt', 'permalink', 'postId', 'corpusRef'].forEach(function (key) {
+                          if (variantDoc.fields[key]) variant[key] = String(variantDoc.fields[key]);
+                        });
+                        post.variants[entry.name.replace(/\.md$/, '')] = variant;
+                      })
+                      .catch(function () {});
+                  }),
+                );
+              })
+              .then(function () {
+                return gezel.data.list('posts/' + id + '/media').catch(function () { return []; });
+              })
+              .then(function (entries) {
+                post.media = entries
+                  .filter(function (entry) { return entry.kind !== 'dir'; })
+                  .map(function (entry) { return entry.name; });
+                return post;
+              });
+          });
+        }
+        function openPost(id) {
+          openPostId = id;
+          setDrawerError('');
+          gezel.tools
+            .invoke('page_get_post', { id: id })
+            .then(function (result) {
+              if (openPostId === id) renderDrawer(result.output.post || result.output);
+            })
+            .catch(function (err) {
+              if (err && err.code === 'unavailable') {
+                fallbackDetail(id)
+                  .then(function (post) { if (openPostId === id) renderDrawer(post); })
+                  .catch(function () {
+                    if (openPostId !== id) return;
+                    el('drawer').hidden = false;
+                    el('d-title').textContent = id;
+                    setDrawerError('Could not load this post right now.');
+                  });
+                return;
+              }
+              el('drawer').hidden = false;
+              el('d-title').textContent = id;
+              setDrawerError(err && err.message ? err.message : 'Could not load this post right now.');
+            });
+        }
+        function closeDrawer() {
+          openPostId = null;
+          el('drawer').hidden = true;
+        }
+        function movePost(id, status) {
+          setDrawerError('');
+          gezel.tools
+            .invoke('page_set_status', { id: id, status: status })
+            .then(function () {
+              loadBoard();
+              if (openPostId === id) openPost(id);
+            })
+            .catch(function (err) {
+              setDrawerError(err && err.message ? err.message : 'The move was refused.');
+            });
+        }
+        el('board').addEventListener('click', function (event) {
+          var card = event.target.closest('[data-post]');
+          if (card) openPost(card.getAttribute('data-post'));
+        });
+        el('d-moves').addEventListener('click', function (event) {
+          var key = event.target.closest('[data-move]');
+          if (key && openPostId) movePost(openPostId, key.getAttribute('data-move'));
+        });
+        el('d-close').addEventListener('click', closeDrawer);
+        document.addEventListener('keydown', function (event) {
+          if (event.key === 'Escape') closeDrawer();
+        });
+        el('toggle-archived').addEventListener('click', function () {
+          showArchived = !showArchived;
+          this.setAttribute('aria-pressed', showArchived ? 'true' : 'false');
+          renderBoard(lastIndex);
+        });
+        gezel.data
+          .list('data', { source: 'artifacts' })
+          .then(function (entries) {
+            if (entries && entries.length > 0) el('corpus-hint').hidden = false;
+          })
+          .catch(function () {});
+        loadBoard();
+        gezel.data.watch('posts/index.json', function () { loadBoard(); });
+      })();
+    </script>
+  </body>
+</html>