@drunkcoding/agents-and-skills 0.0.44 → 0.0.46

package/plugins/html-effectiveness/templates/19-editor-feature-flags.html.tmpl

@@ -1,627 +0,0 @@
-<!--
-template: 19-editor-feature-flags
-upstream: 19-editor-feature-flags.html
-slots:
-  title: string  # replaces first <h1> innerHTML
--->
-<div class="wrap">
-
-  <header>
-    <div class="eyebrow">Acme / editor / feature-flags</div>
-    <h1>{{title}}</h1>
-    <p class="sub">A form-based editor for the production feature-flag config.
-      Toggle flags, fix dependency warnings as they surface, then copy out
-      only the lines that changed.</p>
-  </header>
-
-  <div class="layout">
-    <div class="banner" id="banner">
-      <span class="glyph">&#9888;</span>
-      <span id="bannerText">1 flag is enabled without its prerequisite</span>
-    </div>
-
-    <div class="form-col" id="formCol"><!-- groups injected --></div>
-
-    <aside class="sidebar">
-      <div>
-        <div class="side-label">Pending changes</div>
-        <div class="side-count" id="sideCount">0 changed</div>
-      </div>
-      <pre class="diff" id="diff"><span class="empty">// no changes yet</span></pre>
-      <div class="btn-stack">
-        <button class="btn primary" id="copyDiff" disabled>Copy diff</button>
-        <button class="btn ghost" id="copyJson">Copy full JSON</button>
-        <button class="btn ghost" id="reset">Reset</button>
-      </div>
-    </aside>
-  </div>
-
-</div>
-
-<style>
-* { box-sizing: border-box; }
-.wrap {
-    max-width: 1080px;
-    margin: 0 auto;
-    padding: 48px 32px 64px;
-  }
-/* ---------- header ---------- */
-  header { margin-bottom: 28px; }
-.eyebrow {
-    font-family: var(--mono);
-    font-size: 11px;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    color: var(--gray-500);
-  }
-h1 {
-    font-family: var(--serif);
-    font-weight: 500;
-    font-size: 30px;
-    letter-spacing: -0.01em;
-    margin: 6px 0 4px;
-  }
-.sub {
-    color: var(--gray-500);
-    max-width: 600px;
-  }
-/* ---------- layout ---------- */
-  .layout {
-    display: grid;
-    grid-template-columns: 1fr 320px;
-    gap: 24px;
-    align-items: start;
-  }
-@media (max-width: 880px) {
-    .layout { grid-template-columns: 1fr; }
-    .sidebar { position: static !important; }
-  }
-/* ---------- warning banner ---------- */
-  .banner {
-    grid-column: 1 / -1;
-    display: none;
-    align-items: baseline;
-    gap: 8px;
-    padding: 10px 14px;
-    border: 1.5px solid #E8C2AE;
-    background: #F8E9E0;
-    color: var(--clay-d);
-    border-radius: 10px;
-    font-size: 13px;
-  }
-.banner.show { display: flex; }
-.banner .glyph { font-size: 13px; line-height: 1; transform: translateY(1px); }
-/* ---------- groups / panels ---------- */
-  .form-col { display: flex; flex-direction: column; gap: 16px; }
-.group {
-    background: var(--white);
-    border: 1.5px solid var(--gray-200);
-    border-radius: 12px;
-    overflow: hidden;
-  }
-.group-head {
-    font-family: var(--mono);
-    font-size: 11px;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    color: var(--gray-500);
-    padding: 12px 18px 11px;
-    border-bottom: 1.5px solid var(--gray-50);
-    display: flex;
-    justify-content: space-between;
-    gap: 12px;
-  }
-.group-head .name { color: var(--gray-800); }
-.group-head .meta { letter-spacing: 0.04em; }
-/* ---------- flag rows ---------- */
-  .flag {
-    display: flex;
-    align-items: flex-start;
-    gap: 16px;
-    padding: 14px 18px;
-    border-bottom: 1px solid var(--gray-50);
-    border-left: 3px solid transparent;
-    transition: border-left-color 140ms ease, background 140ms ease;
-  }
-.flag:last-child { border-bottom: none; }
-.flag.warn {
-    border-left-color: var(--clay);
-    background: #FBF3EE;
-  }
-.flag-info { flex: 1; min-width: 0; }
-.flag-key {
-    font-family: var(--mono);
-    font-size: 13px;
-    color: var(--gray-800);
-    display: flex;
-    align-items: center;
-    gap: 7px;
-    flex-wrap: wrap;
-  }
-.dot {
-    display: none;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: var(--clay);
-    flex: none;
-  }
-.flag.changed .dot { display: inline-block; }
-.rollout {
-    font-family: var(--mono);
-    font-size: 10px;
-    letter-spacing: 0.03em;
-    color: var(--gray-500);
-    background: var(--gray-50);
-    border: 1px solid var(--gray-200);
-    border-radius: 999px;
-    padding: 1px 7px 2px;
-  }
-.flag-desc {
-    color: var(--gray-500);
-    font-size: 12.5px;
-    margin-top: 2px;
-  }
-.req-chip {
-    display: inline-flex;
-    align-items: baseline;
-    gap: 5px;
-    margin-top: 7px;
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--gray-500);
-    background: var(--gray-50);
-    border: 1px solid var(--gray-200);
-    border-radius: 999px;
-    padding: 2px 9px 3px;
-  }
-.req-chip .warn-glyph { display: none; }
-.flag.warn .req-chip {
-    color: var(--clay-d);
-    background: #F8E1D5;
-    border-color: #E8C2AE;
-  }
-.flag.warn .req-chip .warn-glyph { display: inline; }
-/* ---------- toggle switch ---------- */
-  .toggle {
-    position: relative;
-    flex: none;
-    width: 38px;
-    height: 22px;
-    margin-top: 1px;
-  }
-.toggle input {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    opacity: 0;
-    cursor: pointer;
-  }
-.toggle .track {
-    position: absolute;
-    inset: 0;
-    background: var(--gray-200);
-    border-radius: 999px;
-    transition: background 160ms ease;
-    pointer-events: none;
-  }
-.toggle .track::after {
-    content: "";
-    position: absolute;
-    top: 3px;
-    left: 3px;
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    background: var(--white);
-    box-shadow: 0 1px 2px rgba(20,20,19,0.18);
-    transition: transform 160ms ease;
-  }
-.toggle input:checked + .track { background: var(--olive); }
-.toggle input:checked + .track::after { transform: translateX(16px); }
-.toggle input:focus-visible + .track {
-    outline: 2px solid var(--slate);
-    outline-offset: 2px;
-  }
-/* ---------- sidebar ---------- */
-  .sidebar {
-    position: sticky;
-    top: 24px;
-    background: var(--white);
-    border: 1.5px solid var(--gray-200);
-    border-radius: 12px;
-    padding: 18px;
-    display: flex;
-    flex-direction: column;
-    gap: 14px;
-  }
-.side-label {
-    font-family: var(--mono);
-    font-size: 11px;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    color: var(--gray-500);
-  }
-.side-count {
-    font-family: var(--serif);
-    font-weight: 500;
-    font-size: 19px;
-    letter-spacing: -0.01em;
-  }
-.side-count .warn-n { color: var(--clay-d); }
-.side-count .sep { color: var(--gray-200); margin: 0 4px; }
-.diff {
-    margin: 0;
-    font-family: var(--mono);
-    font-size: 12px;
-    line-height: 1.7;
-    background: var(--gray-50);
-    border: 1px solid var(--gray-200);
-    border-radius: 8px;
-    padding: 12px 14px;
-    overflow-x: auto;
-    max-height: 320px;
-    overflow-y: auto;
-    white-space: pre;
-  }
-.diff .minus { color: var(--gray-500); }
-.diff .plus { color: var(--olive); }
-.diff .empty { color: var(--gray-500); }
-.btn {
-    display: block;
-    width: 100%;
-    border: none;
-    border-radius: 999px;
-    font-family: var(--mono);
-    font-size: 12px;
-    padding: 9px 16px;
-    cursor: pointer;
-    text-align: center;
-    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
-  }
-.btn.primary {
-    background: var(--slate);
-    color: var(--ivory);
-  }
-.btn.primary:hover:not(:disabled) { background: var(--gray-800); }
-.btn.primary:disabled {
-    background: var(--gray-200);
-    color: var(--gray-500);
-    cursor: not-allowed;
-  }
-.btn.primary.copied { background: var(--olive); }
-.btn.ghost {
-    background: transparent;
-    color: var(--gray-800);
-    border: 1.5px solid var(--gray-200);
-  }
-.btn.ghost:hover { border-color: var(--gray-500); }
-.btn.ghost.copied { border-color: var(--olive); color: var(--olive); }
-.btn-stack { display: flex; flex-direction: column; gap: 8px; }
-</style>
-
-<script>
-"use strict";
-
-// ---------------------------------------------------------------------------
-// data — the production flag set, as it exists right now
-// ---------------------------------------------------------------------------
-
-const GROUPS = [
-  {
-    id: "onboarding",
-    label: "Onboarding",
-    flags: [
-      { key: "onboarding.checklist_v2",
-        desc: "New three-step setup checklist replacing the modal tour.",
-        on: true },
-      { key: "onboarding.invite_nudge",
-        desc: "Nudge owners to invite teammates after creating their first project.",
-        on: true },
-      { key: "onboarding.workspace_templates",
-        desc: "Offer prebuilt workspace templates during signup.",
-        on: false, requires: "onboarding.checklist_v2" },
-      { key: "onboarding.skip_email_verify",
-        desc: "Let SSO-domain users in before email verification completes.",
-        on: false }
-    ]
-  },
-  {
-    id: "sync",
-    label: "Sync engine",
-    flags: [
-      { key: "sync.delta_compression",
-        desc: "Send field-level deltas instead of full document snapshots.",
-        on: true },
-      { key: "sync.offline_queue_v2",
-        desc: "Persist offline edits to IndexedDB and replay on reconnect.",
-        on: false, requires: "sync.delta_compression" },
-      { key: "sync.presence_cursors",
-        desc: "Show live collaborator cursors in board and doc views.",
-        on: true },
-      { key: "sync.conflict_banner",
-        desc: "Surface a merge banner instead of silently last-write-wins.",
-        on: false, requires: "sync.offline_queue_v2" },
-      { key: "sync.binary_ws_frames",
-        desc: "Switch the realtime channel to binary WebSocket frames.",
-        on: false, rollout: 10 }
-    ]
-  },
-  {
-    id: "billing",
-    label: "Billing",
-    flags: [
-      { key: "billing.usage_meter",
-        desc: "Show per-seat usage meter on the workspace billing page.",
-        on: false },
-      { key: "billing.annual_discount_banner",
-        desc: "Promote the annual-plan discount in the upgrade flow.",
-        on: true },
-      { key: "billing.proration_preview",
-        desc: "Preview the prorated charge before confirming a plan change.",
-        on: false, requires: "billing.usage_meter" },
-      { key: "billing.dunning_emails_v3",
-        desc: "Use the rewritten dunning sequence with a 14-day grace window.",
-        on: true, rollout: 25 }
-    ]
-  },
-  {
-    id: "internal",
-    label: "Internal",
-    flags: [
-      { key: "internal.shadow_traffic",
-        desc: "Mirror 1% of API traffic to the staging cluster for diffing.",
-        on: false },
-      { key: "internal.query_tracing",
-        desc: "Attach OpenTelemetry spans to every Postgres query.",
-        on: true },
-      { key: "internal.kill_switch_ui",
-        desc: "Expose the emergency kill-switch panel in the admin console.",
-        on: true, requires: "internal.query_tracing" }
-    ]
-  }
-];
-
-// flat lookup, plus a frozen copy of initial state
-const FLAGS = {};
-const INITIAL = {};
-GROUPS.forEach(g => g.flags.forEach(f => {
-  FLAGS[f.key] = f;
-  INITIAL[f.key] = f.on;
-}));
-
-// ---------------------------------------------------------------------------
-// render the form once; state lives in the checkboxes
-// ---------------------------------------------------------------------------
-
-const formCol   = document.getElementById("formCol");
-const banner    = document.getElementById("banner");
-const bannerTxt = document.getElementById("bannerText");
-const sideCount = document.getElementById("sideCount");
-const diffEl    = document.getElementById("diff");
-const copyDiffBtn = document.getElementById("copyDiff");
-const copyJsonBtn = document.getElementById("copyJson");
-const resetBtn    = document.getElementById("reset");
-
-function esc(s) {
-  return String(s).replace(/[&<>"]/g, c =>
-    ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]));
-}
-
-function buildForm() {
-  formCol.innerHTML = "";
-  for (const g of GROUPS) {
-    const panel = document.createElement("section");
-    panel.className = "group";
-    panel.dataset.group = g.id;
-
-    const head = document.createElement("div");
-    head.className = "group-head";
-    head.innerHTML =
-      '<span class="name">' + esc(g.label) + '</span>' +
-      '<span class="meta" data-meta></span>';
-    panel.appendChild(head);
-
-    for (const f of g.flags) {
-      const row = document.createElement("div");
-      row.className = "flag";
-      row.dataset.key = f.key;
-
-      const rolloutBadge = (typeof f.rollout === "number")
-        ? '<span class="rollout">' + f.rollout + '%</span>'
-        : "";
-
-      const reqChip = f.requires
-        ? '<div class="req-chip"><span class="warn-glyph">&#9888;</span>' +
-          '<span>requires ' + esc(f.requires) + '</span></div>'
-        : "";
-
-      row.innerHTML =
-        '<label class="toggle">' +
-          '<input type="checkbox" data-key="' + esc(f.key) + '"' +
-            (f.on ? " checked" : "") +
-            ' aria-label="' + esc(f.key) + '">' +
-          '<span class="track"></span>' +
-        '</label>' +
-        '<div class="flag-info">' +
-          '<div class="flag-key"><span class="dot"></span>' +
-            '<span>' + esc(f.key) + '</span>' + rolloutBadge +
-          '</div>' +
-          '<div class="flag-desc">' + esc(f.desc) + '</div>' +
-          reqChip +
-        '</div>';
-
-      panel.appendChild(row);
-    }
-    formCol.appendChild(panel);
-  }
-}
-
-// ---------------------------------------------------------------------------
-// state helpers
-// ---------------------------------------------------------------------------
-
-function currentState() {
-  const state = {};
-  formCol.querySelectorAll("input[type=checkbox]").forEach(cb => {
-    state[cb.dataset.key] = cb.checked;
-  });
-  return state;
-}
-
-function computeDiff(state) {
-  const lines = [];
-  for (const g of GROUPS) {
-    for (const f of g.flags) {
-      if (state[f.key] !== INITIAL[f.key]) {
-        lines.push({ key: f.key, from: INITIAL[f.key], to: state[f.key] });
-      }
-    }
-  }
-  return lines;
-}
-
-function diffText(lines) {
-  return lines.map(l =>
-    '- "' + l.key + '": ' + l.from + '\n' +
-    '+ "' + l.key + '": ' + l.to
-  ).join("\n");
-}
-
-function fullJson(state) {
-  // grouped, ordered, pretty-printed — what you'd actually paste into the file
-  let out = "{\n";
-  GROUPS.forEach((g, gi) => {
-    g.flags.forEach((f, fi) => {
-      const last = gi === GROUPS.length - 1 && fi === g.flags.length - 1;
-      out += '  "' + f.key + '": ' + state[f.key] + (last ? "" : ",") + "\n";
-    });
-  });
-  out += "}";
-  return out;
-}
-
-// ---------------------------------------------------------------------------
-// the live update pass
-// ---------------------------------------------------------------------------
-
-function update() {
-  const state = currentState();
-  let warnCount = 0;
-
-  // per-row decorations
-  for (const g of GROUPS) {
-    let onCount = 0;
-    for (const f of g.flags) {
-      const row = formCol.querySelector('.flag[data-key="' + CSS.escape(f.key) + '"]');
-      const on = state[f.key];
-      if (on) onCount++;
-
-      const changed = on !== INITIAL[f.key];
-      row.classList.toggle("changed", changed);
-
-      let warn = false;
-      if (f.requires && on && !state[f.requires]) warn = true;
-      row.classList.toggle("warn", warn);
-      if (warn) warnCount++;
-    }
-    const meta = formCol.querySelector(
-      '.group[data-group="' + g.id + '"] [data-meta]');
-    meta.textContent = g.flags.length + " flags, " + onCount + " on";
-  }
-
-  // diff + sidebar
-  const lines = computeDiff(state);
-  if (lines.length === 0) {
-    diffEl.innerHTML = '<span class="empty">// no changes yet</span>';
-    copyDiffBtn.disabled = true;
-  } else {
-    diffEl.innerHTML = lines.map(l =>
-      '<span class="minus">- "' + esc(l.key) + '": ' + l.from + '</span>\n' +
-      '<span class="plus">+ "' + esc(l.key) + '": ' + l.to + '</span>'
-    ).join("\n");
-    copyDiffBtn.disabled = false;
-  }
-
-  sideCount.innerHTML =
-    lines.length + " changed" +
-    '<span class="sep">&middot;</span>' +
-    '<span class="' + (warnCount ? "warn-n" : "") + '">' +
-      warnCount + " warning" + (warnCount === 1 ? "" : "s") +
-    "</span>";
-
-  // banner
-  if (warnCount > 0) {
-    bannerTxt.textContent =
-      warnCount === 1
-        ? "1 flag is enabled without its prerequisite"
-        : warnCount + " flags are enabled without their prerequisites";
-    banner.classList.add("show");
-  } else {
-    banner.classList.remove("show");
-  }
-}
-
-// ---------------------------------------------------------------------------
-// clipboard + buttons
-// ---------------------------------------------------------------------------
-
-function flash(btn, label) {
-  const orig = btn.textContent;
-  btn.textContent = label;
-  btn.classList.add("copied");
-  btn.disabled = true;
-  setTimeout(() => {
-    btn.textContent = orig;
-    btn.classList.remove("copied");
-    btn.disabled = false;
-    update(); // restore disabled state on copyDiff if needed
-  }, 1200);
-}
-
-function writeClipboard(text) {
-  if (navigator.clipboard && navigator.clipboard.writeText) {
-    return navigator.clipboard.writeText(text);
-  }
-  // fallback for file:// contexts without clipboard permission
-  const ta = document.createElement("textarea");
-  ta.value = text;
-  ta.style.position = "fixed";
-  ta.style.left = "-9999px";
-  document.body.appendChild(ta);
-  ta.select();
-  try { document.execCommand("copy"); } catch (e) { /* ignore */ }
-  document.body.removeChild(ta);
-  return Promise.resolve();
-}
-
-copyDiffBtn.addEventListener("click", () => {
-  const lines = computeDiff(currentState());
-  if (!lines.length) return;
-  writeClipboard(diffText(lines)).then(() => flash(copyDiffBtn, "Copied ✓"));
-});
-
-copyJsonBtn.addEventListener("click", () => {
-  writeClipboard(fullJson(currentState())).then(() => flash(copyJsonBtn, "Copied ✓"));
-});
-
-resetBtn.addEventListener("click", () => {
-  formCol.querySelectorAll("input[type=checkbox]").forEach(cb => {
-    cb.checked = INITIAL[cb.dataset.key];
-  });
-  update();
-});
-
-formCol.addEventListener("change", e => {
-  if (e.target.matches("input[type=checkbox]")) update();
-});
-
-// ---------------------------------------------------------------------------
-// boot
-// ---------------------------------------------------------------------------
-
-buildForm();
-update();
-</script>