npm - claude-dev-env - Versions diffs - 1.83.0 → 1.84.0 - Mend

claude-dev-env 1.83.0 → 1.84.0

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

package/skills/doc-gist/references/examples/19-editor-feature-flags.html DELETED Viewed

@@ -1,663 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
-<title>Birchline — flags.production.json</title>
-<style>
-  :root {
-    --ivory: #FAF9F5;
-    --slate: #141413;
-    --clay: #D97757;
-    --clay-d: #B85C3E;
-    --oat: #E3DACC;
-    --olive: #788C5D;
-    --gray-50: #F0EEE6;
-    --gray-200: #D1CFC5;
-    --gray-500: #87867F;
-    --gray-800: #3D3D3A;
-    --white: #ffffff;
-    --serif: ui-serif, Georgia, "Times New Roman", serif;
-    --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
-    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
-  }
-  * { box-sizing: border-box; }
-  html, body {
-    margin: 0;
-    background: var(--ivory);
-    color: var(--slate);
-    font-family: var(--sans);
-    font-size: 14px;
-    line-height: 1.5;
-  }
-  .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>
-</head>
-<body>
-<div class="wrap">
-  <header>
-    <div class="eyebrow">Birchline / editor / feature-flags</div>
-    <h1>flags.production.json</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>
-<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>
-</body>
-</html>