tip-loop-builder.js

(function () {
  const form = document.querySelector("[data-tiploop-builder]");
  const output = document.querySelector("[data-markdown-output]");
  const status = document.querySelector("[data-status]");
  const copyButton = document.querySelector("[data-copy-markdown]");
  const downloadButton = document.querySelector("[data-download-markdown]");
  const clearButton = document.querySelector("[data-clear-form]");

  if (!form || !output) return;

  const typeLabels = {
    "material-offer": "Material Offer",
    "repair-candidate": "Repair Candidate",
    "stream-note": "Material Stream Note",
    "partner-pathway": "Partner Pathway",
    "pilot-question": "Pilot Question",
    "learning-boundary": "Learning Boundary Note",
    "other": "Other"
  };

  const detailPrompts = {
    "material-offer": "What material or useful object is in play?",
    "repair-candidate": "What repairable thing is in play?",
    "stream-note": "What material stream is worth understanding?",
    "partner-pathway": "Which partner, processor or steward pathway is in play?",
    "pilot-question": "What pilot question is in play?",
    "learning-boundary": "What boundary, uncertainty or skill gap is in play?",
    "other": "What kind of record wants to exist here?"
  };

  function value(name) {
    const element = form.elements[name];
    return element ? String(element.value || "").trim() : "";
  }

  function lines(text) {
    return String(text || "")
      .split(/\r?\n/)
      .map((line) => line.trim())
      .filter(Boolean);
  }

  function slugify(text) {
    return String(text || "tip-loop-record")
      .toLowerCase()
      .replace(/&/g, "and")
      .replace(/[^a-z0-9]+/g, "-")
      .replace(/^-+|-+$/g, "") || "tip-loop-record";
  }

  function today() {
    return new Date().toLocaleDateString("en-AU", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric"
    });
  }

  function yaml(text) {
    return '"' + String(text || "TODO").replace(/\\/g, "\\\\").replace(/"/g, '\\"') + '"';
  }

  function bulletList(text) {
    const items = lines(text);
    if (!items.length) return "- TODO";
    return items.map((item) => "- " + item).join("\n");
  }

  function section(title, body) {
    return ["## " + title, "", body || "TODO", ""].join("\n");
  }

  function buildMarkdown() {
    const type = value("record_type") || "material-offer";
    const title = value("title") || typeLabels[type] || "Tip Loop Record";
    return [
      "---",
      "schema: straddie_tip_loop_record.v0",
      "status: draft_for_human_review",
      "source_site: straddie_tip_loop_lab",
      "md_ai_reference: how_to_use_md_with_ai",
      "record_type: " + yaml(type),
      "record_label: " + yaml(typeLabels[type] || type),
      "visibility_lane: " + yaml(value("visibility") || "private_owner_context"),
      "title: " + yaml(title),
      "material_stream: " + yaml(value("stream")),
      "place_or_reach: " + yaml(value("place")),
      "reviewer_or_steward: " + yaml(value("reviewer")),
      "prepared_date: " + yaml(today()),
      "---",
      "",
      "# " + title,
      "",
      "This file is a portable Markdown context packet for Straddie Tip Loop Lab. It is designed so a person, crew or community group can take useful material context into the AI tool they choose, then keep reviewing, editing, refusing, forking or developing the idea with human agency.",
      "",
      "## Record Frame",
      "",
      "- Type: " + (typeLabels[type] || type),
      "- Visibility lane: " + (value("visibility") || "private_owner_context"),
      "- Material stream: " + (value("stream") || "TODO"),
      "- Place or reach: " + (value("place") || "TODO"),
      "",
      section("What It Is", value("details")),
      section("Known Facts", value("quantity")),
      section("Local Value Or Agency", value("local_use")),
      section("Skills, Tools Or Helpers Needed", bulletList(value("needs"))),
      section("Source Trail", bulletList(value("sources"))),
      section("Pathway Changers", bulletList(value("handling"))),
      section("Owner Choice Or Consent", value("permission")),
      section("Useful AI Output", value("ai_output") || "Help develop one useful next output from this context while preserving owner choice, uncertainty and local judgement."),
      section("Unresolved Questions", bulletList(value("questions"))),
      section("Hold-Back Notes", bulletList(value("private_notes"))),
      section("Reviewer Or Steward", value("reviewer")),
      "## How This File Could Be Used With AI",
      "",
      "- Keep a private copy as the owner-controlled context file.",
      "- Remove anything private, uncertain or not ready for the chosen AI tool.",
      "- Ask the AI for the useful output named above, then compare its answer with the source trail and local judgement.",
      "- Save useful outputs, corrections and better questions back into a later Markdown version.",
      "",
      "## Public Boundary",
      "",
      "- A record is not permission to take, collect, salvage, repair, dismantle, sell, publish, store or transport anything.",
      "- Personal contact details, access details, owner data, unclear instructions and unreviewed claims belong outside public files.",
      "- Electrical, battery, glass, chemical, biological, lifting, machinery, road-access and waste-law questions invite the right human review and the reason why.",
      "",
      "## Linked Public Pages",
      "",
      "- Tip Loop Lab: https://auraofintelligence.github.io/straddie-tip-loop-lab/",
      "- How to Use Markdown with AI: https://auraofintelligence.github.io/how-to-use-md-with-ai/",
      "- Maker-space seed page: https://auraofintelligence.github.io/straddie-makerspace-lab/tip-loop.html",
      "- Straddie Maker-Space Lab: https://auraofintelligence.github.io/straddie-makerspace-lab/",
      "- Stradbroke Grants Lab: https://auraofintelligence.github.io/stradbroke-grants-lab/",
      ""
    ].join("\n");
  }

  function updateDetailLabel() {
    const type = value("record_type") || "material-offer";
    const label = form.querySelector("[data-detail-label]");
    if (!label) return;
    const textNode = [...label.childNodes].find((node) => node.nodeType === Node.TEXT_NODE);
    if (textNode) textNode.textContent = detailPrompts[type] + " ";
  }

  function saveState() {
    const state = {};
    [...form.elements].forEach((element) => {
      if (element.name) state[element.name] = element.value;
    });
    sessionStorage.setItem("straddieTipLoopBuilder", JSON.stringify(state));
  }

  function restoreState() {
    try {
      const state = JSON.parse(sessionStorage.getItem("straddieTipLoopBuilder") || "{}");
      Object.keys(state).forEach((name) => {
        if (form.elements[name]) form.elements[name].value = state[name];
      });
    } catch (error) {
      // Ignore broken session state and rebuild from the empty form.
    }
  }

  function setStatus(message) {
    if (!status) return;
    status.textContent = message;
    window.clearTimeout(setStatus.timer);
    setStatus.timer = window.setTimeout(() => {
      status.textContent = "";
    }, 2600);
  }

  function updateOutput() {
    updateDetailLabel();
    output.value = buildMarkdown();
    saveState();
  }

  form.addEventListener("input", updateOutput);
  form.addEventListener("change", updateOutput);
  form.addEventListener("submit", (event) => {
    event.preventDefault();
    updateOutput();
    setStatus("Markdown updated.");
  });

  copyButton.addEventListener("click", async () => {
    updateOutput();
    try {
      await navigator.clipboard.writeText(output.value);
      setStatus("Markdown copied.");
    } catch (error) {
      output.select();
      document.execCommand("copy");
      setStatus("Markdown selected and copied.");
    }
  });

  downloadButton.addEventListener("click", () => {
    updateOutput();
    const fileName = slugify(value("record_type") + "-" + value("title")) + ".md";
    const blob = new Blob([output.value], { type: "text/markdown;charset=utf-8" });
    const link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    link.download = fileName;
    document.body.append(link);
    link.click();
    link.remove();
    window.setTimeout(() => URL.revokeObjectURL(link.href), 0);
    setStatus(fileName + " ready.");
  });

  clearButton.addEventListener("click", () => {
    sessionStorage.removeItem("straddieTipLoopBuilder");
    form.reset();
    updateOutput();
    setStatus("Cleared.");
  });

  restoreState();
  updateOutput();
})();