@braincrew-lab/langchain-canvas 0.1.9 → 0.1.11

package/dist/index.d.ts

@@ -374,7 +374,7 @@ interface ChatMessage {
 interface IframeCommand {
     artifactId: string;
     /** style · structure (duplicate/delete/move/insert/insert_html) · group/ungroup · set_src · set_slide_style · clear. */
-    type: "set_style" | "style_persist" | "commit" | "clear" | "set_src" | "set_slide_style" | "duplicate" | "delete" | "move_up" | "move_down" | "insert" | "insert_html" | "group" | "ungroup";
+    type: "set_style" | "style_persist" | "commit" | "clear" | "set_src" | "set_slide_style" | "scroll_to" | "duplicate" | "delete" | "move_up" | "move_down" | "insert" | "insert_html" | "group" | "ungroup";
     /** Target element (omitted for document-level inserts with no selection). */
     cid?: string;
     /** Members to wrap for `group`. */
@@ -383,6 +383,8 @@ interface IframeCommand {
     value?: string;
     /** Style map to apply to the slide root for `set_slide_style` (e.g. background, color). */
     style?: Record<string, string>;
+    /** Heading index to scroll into view for `scroll_to`. */
+    index?: number;
     /** Tag/block to insert for `insert` (e.g. "h2", "p", "button", "img", "hr", "section"). */
     block?: string;
     /** HTML fragment to insert for `insert_html` (a built-in section template). */

package/dist/index.js

@@ -180,7 +180,7 @@ var INSPECTOR_SCRIPT = `
     fmtBar.className = "lcx-fmt";
     fmtBar.style.left = Math.max(4, r.left) + "px";
     fmtBar.style.top = Math.max(4, r.top - 40) + "px";
-    var specs = [["<b>B</b>", "bold"], ["<i>I</i>", "italic"], ["<u>U</u>", "underline"], ["\\uD83D\\uDD17", "createLink"]];
+    var specs = [["<b>B</b>", "bold"], ["<i>I</i>", "italic"], ["<u>U</u>", "underline"], ["&bull;", "insertUnorderedList"], ["1.", "insertOrderedList"], ["\\uD83D\\uDD17", "createLink"]];
     for (var i = 0; i < specs.length; i++) {
       (function (spec) {
         var btn = document.createElement("button");
@@ -568,6 +568,11 @@ var INSPECTOR_SCRIPT = `
       var d = e.data;
       if (!d || d.source !== MARK) return;
       if (d.type === "clear") { clearSelected(); return; }
+      if (d.type === "scroll_to") {
+        var hs = document.querySelectorAll("h1,h2,h3,h4,h5,h6");
+        if (hs[d.index]) hs[d.index].scrollIntoView({ behavior: "smooth", block: "start" });
+        return;
+      }
       if (d.type === "set_style") { var el = byCid(d.cid); if (el) el.style[d.prop] = d.value; return; }
       if (d.type === "style_persist") { var elp = byCid(d.cid); if (elp) { elp.style[d.prop] = d.value; emitEdit(elp); } return; }
       if (d.type === "set_slide_style") {
@@ -1527,8 +1532,97 @@ var TEMPLATES = {
   <p style="margin:0 0 22px;opacity:.9">Join thousands of teams already building with us.</p>
   <a href="#" style="display:inline-block;padding:12px 24px;background:#fff;color:#4338ca;border-radius:10px;text-decoration:none;font-weight:700">Sign up</a>
 </section>`
+  },
+  navbar: {
+    label: "Nav bar",
+    html: `<nav style="display:flex;align-items:center;justify-content:space-between;padding:18px 32px;background:#0b1020;color:#e6e8ef;border-bottom:1px solid #232a44">
+  <strong style="font-size:18px;letter-spacing:-.01em">Brand</strong>
+  <div style="display:flex;gap:26px;align-items:center;font-size:15px">
+    <a href="#" style="color:#c7cddb;text-decoration:none">Product</a>
+    <a href="#" style="color:#c7cddb;text-decoration:none">Pricing</a>
+    <a href="#" style="color:#c7cddb;text-decoration:none">Docs</a>
+    <a href="#" style="padding:9px 18px;background:#6366f1;color:#fff;border-radius:9px;text-decoration:none;font-weight:600">Sign in</a>
+  </div>
+</nav>`
+  },
+  pricing: {
+    label: "Pricing",
+    html: `<section style="padding:56px 24px;background:#0b1020;color:#e6e8ef">
+  <div style="max-width:960px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px">
+    <div style="background:#151a2e;border:1px solid #232a44;border-radius:16px;padding:28px"><h3 style="margin:0 0 6px">Starter</h3><p style="font-size:34px;font-weight:800;margin:0 0 4px">$0<span style="font-size:15px;font-weight:400;color:#9aa4b2">/mo</span></p><ul style="margin:16px 0 0;padding-left:1.1em;color:#9aa4b2;line-height:1.9"><li>1 project</li><li>Community support</li></ul></div>
+    <div style="background:#1b2140;border:1px solid #3a44f1;border-radius:16px;padding:28px"><h3 style="margin:0 0 6px">Pro</h3><p style="font-size:34px;font-weight:800;margin:0 0 4px">$29<span style="font-size:15px;font-weight:400;color:#9aa4b2">/mo</span></p><ul style="margin:16px 0 0;padding-left:1.1em;color:#c7cddb;line-height:1.9"><li>Unlimited projects</li><li>Priority support</li></ul></div>
+    <div style="background:#151a2e;border:1px solid #232a44;border-radius:16px;padding:28px"><h3 style="margin:0 0 6px">Team</h3><p style="font-size:34px;font-weight:800;margin:0 0 4px">$99<span style="font-size:15px;font-weight:400;color:#9aa4b2">/mo</span></p><ul style="margin:16px 0 0;padding-left:1.1em;color:#9aa4b2;line-height:1.9"><li>SSO &amp; roles</li><li>SLA</li></ul></div>
+  </div>
+</section>`
+  },
+  stats: {
+    label: "Stats",
+    html: `<section style="padding:56px 24px;background:#0b1020;color:#e6e8ef">
+  <div style="max-width:900px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px;text-align:center">
+    <div><div style="font-size:44px;font-weight:800">12k+</div><div style="color:#9aa4b2">Customers</div></div>
+    <div><div style="font-size:44px;font-weight:800">99.9%</div><div style="color:#9aa4b2">Uptime</div></div>
+    <div><div style="font-size:44px;font-weight:800">4.9/5</div><div style="color:#9aa4b2">Rating</div></div>
+  </div>
+</section>`
+  },
+  testimonial: {
+    label: "Testimonial",
+    html: `<section style="padding:64px 24px;background:#151a2e;color:#e6e8ef;text-align:center">
+  <p style="max-width:640px;margin:0 auto 20px;font-size:24px;line-height:1.5;font-weight:600">\u201CThis is the tool our team didn't know it was missing. Shipped a landing page in an afternoon.\u201D</p>
+  <p style="margin:0;color:#9aa4b2">Jordan Lee \xB7 Head of Product, Acme</p>
+</section>`
+  },
+  faq: {
+    label: "FAQ",
+    html: `<section style="padding:56px 24px;background:#0b1020;color:#e6e8ef">
+  <div style="max-width:720px;margin:0 auto">
+    <h2 style="margin:0 0 24px;font-size:26px">Frequently asked</h2>
+    <div style="border-top:1px solid #232a44;padding:18px 0"><h4 style="margin:0 0 6px">Is there a free plan?</h4><p style="margin:0;color:#9aa4b2">Yes \u2014 the Starter plan is free forever.</p></div>
+    <div style="border-top:1px solid #232a44;padding:18px 0"><h4 style="margin:0 0 6px">Can I cancel anytime?</h4><p style="margin:0;color:#9aa4b2">Absolutely, no questions asked.</p></div>
+  </div>
+</section>`
+  },
+  gallery: {
+    label: "Gallery",
+    html: `<section style="padding:40px 24px;background:#0b1020">
+  <div style="max-width:960px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px">
+    <img src="https://placehold.co/400x300/1b2140/9aa4b2?text=1" alt="" style="width:100%;border-radius:12px;display:block" />
+    <img src="https://placehold.co/400x300/1b2140/9aa4b2?text=2" alt="" style="width:100%;border-radius:12px;display:block" />
+    <img src="https://placehold.co/400x300/1b2140/9aa4b2?text=3" alt="" style="width:100%;border-radius:12px;display:block" />
+  </div>
+</section>`
+  },
+  contact: {
+    label: "Contact form",
+    html: `<section style="padding:56px 24px;background:#151a2e;color:#e6e8ef">
+  <form style="max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:12px">
+    <h2 style="margin:0 0 6px;font-size:24px">Get in touch</h2>
+    <input placeholder="Your name" style="padding:12px 14px;border-radius:10px;border:1px solid #232a44;background:#0b1020;color:#e6e8ef" />
+    <input placeholder="Email" style="padding:12px 14px;border-radius:10px;border:1px solid #232a44;background:#0b1020;color:#e6e8ef" />
+    <textarea placeholder="Message" rows="4" style="padding:12px 14px;border-radius:10px;border:1px solid #232a44;background:#0b1020;color:#e6e8ef"></textarea>
+    <button style="padding:12px;background:#6366f1;color:#fff;border:0;border-radius:10px;font-weight:700;cursor:pointer">Send</button>
+  </form>
+</section>`
+  },
+  footer: {
+    label: "Footer",
+    html: `<footer style="padding:40px 32px;background:#080b16;color:#9aa4b2;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;border-top:1px solid #232a44">
+  <div><strong style="color:#e6e8ef;font-size:16px">Brand</strong><p style="margin:8px 0 0;max-width:260px;font-size:14px">Build faster with confidence.</p></div>
+  <div style="display:flex;gap:48px;font-size:14px">
+    <div style="display:flex;flex-direction:column;gap:8px"><a href="#" style="color:#9aa4b2;text-decoration:none">Product</a><a href="#" style="color:#9aa4b2;text-decoration:none">Pricing</a></div>
+    <div style="display:flex;flex-direction:column;gap:8px"><a href="#" style="color:#9aa4b2;text-decoration:none">About</a><a href="#" style="color:#9aa4b2;text-decoration:none">Contact</a></div>
+  </div>
+</footer>`
   }
 };
+function pageDoc(title, sections) {
+  return `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>${title}</title></head><body style="margin:0;font-family:'Segoe UI',system-ui,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;background:#0b1020;color:#e6e8ef">${sections.join("\n")}</body></html>`;
+}
+var STARTERS = {
+  landing: { label: "Landing page", build: () => pageDoc("Landing", [TEMPLATES.navbar.html, TEMPLATES.hero.html, TEMPLATES.features.html, TEMPLATES.pricing.html, TEMPLATES.cta.html, TEMPLATES.footer.html]) },
+  saas: { label: "SaaS", build: () => pageDoc("SaaS", [TEMPLATES.navbar.html, TEMPLATES.hero.html, TEMPLATES.stats.html, TEMPLATES.features.html, TEMPLATES.testimonial.html, TEMPLATES.faq.html, TEMPLATES.cta.html, TEMPLATES.footer.html]) },
+  portfolio: { label: "Portfolio", build: () => pageDoc("Portfolio", [TEMPLATES.navbar.html, TEMPLATES.hero.html, TEMPLATES.gallery.html, TEMPLATES.contact.html, TEMPLATES.footer.html]) }
+};
 var SLIDE_TEMPLATES = {
   title: {
     label: "Title",
@@ -1628,6 +1722,27 @@ var SLIDE_FONTS = {
   rounded: { label: "Rounded", stack: "'Trebuchet MS', 'Segoe UI', 'Apple SD Gothic Neo', sans-serif" },
   condensed: { label: "Condensed", stack: "'Arial Narrow', 'Helvetica Neue', 'Apple SD Gothic Neo', sans-serif" }
 };
+function checkA11y(html) {
+  if (typeof DOMParser === "undefined") return [];
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  const issues = [];
+  const count = (sel, keep) => Array.from(doc.querySelectorAll(sel)).filter(keep).length;
+  const imgs = count("img", (el) => !el.getAttribute("alt"));
+  if (imgs) issues.push(`${imgs} image${imgs > 1 ? "s" : ""} missing alt text`);
+  const links = count("a", (el) => !el.textContent?.trim() && !el.getAttribute("aria-label"));
+  if (links) issues.push(`${links} link${links > 1 ? "s" : ""} with no text or aria-label`);
+  const btns = count("button", (el) => !el.textContent?.trim() && !el.getAttribute("aria-label"));
+  if (btns) issues.push(`${btns} button${btns > 1 ? "s" : ""} with no accessible label`);
+  const fields = count("input, textarea, select", (el) => {
+    const id = el.getAttribute("id");
+    const labelled = id && doc.querySelector(`label[for="${CSS.escape(id)}"]`);
+    return !labelled && !el.getAttribute("aria-label") && !el.getAttribute("placeholder");
+  });
+  if (fields) issues.push(`${fields} form field${fields > 1 ? "s" : ""} with no label`);
+  if (!doc.documentElement.getAttribute("lang")) issues.push("Missing a <html lang> attribute");
+  if (!doc.querySelector("h1")) issues.push("No <h1> \u2014 every page needs one top-level heading");
+  return issues;
+}
 var SLIDE_W = 1280;
 var SCROLL_FIX = "<style>html,body{overflow:auto!important;height:auto!important;min-height:100%!important}</style>";
 function withScrollableBody(html) {
@@ -1667,6 +1782,7 @@ function HtmlRenderer({ artifact: artifact2 }) {
   const iframeCommand = useCanvasStore((s) => s.iframeCommand);
   const [device, setDevice] = useState("desktop");
   const [mode, setMode] = useState("design");
+  const [a11y, setA11y] = useState(null);
   const lastSelfHtml = useRef(null);
   const srcDocRef = useRef("");
   const isFixedSlide = Boolean(artifact2.meta?.ratio);
@@ -1679,6 +1795,14 @@ function HtmlRenderer({ artifact: artifact2 }) {
   }, [artifact2.data.html, mode, isFixedSlide]);
   const selected = selections.filter((s) => s.artifactId === artifact2.id);
   const single = selected.length === 1 ? selected[0] : null;
+  const outline = useMemo(() => {
+    if (typeof DOMParser === "undefined") return [];
+    const doc = new DOMParser().parseFromString(artifact2.data.html, "text/html");
+    return Array.from(doc.querySelectorAll("h1,h2,h3,h4,h5,h6")).map((h) => ({
+      level: Number(h.tagName[1]),
+      text: (h.textContent ?? "").trim().slice(0, 48) || "(untitled)"
+    }));
+  }, [artifact2.data.html]);
   useEffect(() => {
     function onMessage(event) {
       if (event.source !== iframeRef.current?.contentWindow) return;
@@ -1763,23 +1887,60 @@ function HtmlRenderer({ artifact: artifact2 }) {
         ] }),
         /* @__PURE__ */ jsx("span", { className: "cv-html-bar__label", children: "Add" }),
         (ratio ? BLOCKS.filter((b) => SLIDE_BLOCK_TAGS.has(b.tag)) : BLOCKS).map((b) => /* @__PURE__ */ jsx("button", { className: "cv-html-add", onClick: () => command("insert", { block: b.tag }), children: b.label }, b.tag)),
-        !ratio && /* @__PURE__ */ jsxs(
-          "select",
-          {
-            className: "cv-html-tpl",
-            value: "",
-            title: "Insert a section template",
-            onChange: (e) => {
-              const t = TEMPLATES[e.target.value];
-              if (t) sendIframeCommand({ artifactId: artifact2.id, type: "insert_html", cid: single?.cid, html: t.html });
-              e.currentTarget.value = "";
-            },
-            children: [
-              /* @__PURE__ */ jsx("option", { value: "", children: "Section\u2026" }),
-              Object.entries(TEMPLATES).map(([k, v]) => /* @__PURE__ */ jsx("option", { value: k, children: v.label }, k))
-            ]
-          }
-        ),
+        !ratio && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              className: "cv-html-tpl",
+              value: "",
+              title: "Start from a full page template (replaces the page)",
+              onChange: (e) => {
+                const s = STARTERS[e.target.value];
+                if (s) applyEvent({ type: "canvas.patch", id: artifact2.id, patch: { html: s.build() } });
+                e.currentTarget.value = "";
+              },
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: "Page\u2026" }),
+                Object.entries(STARTERS).map(([k, v]) => /* @__PURE__ */ jsx("option", { value: k, children: v.label }, k))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              className: "cv-html-tpl",
+              value: "",
+              title: "Insert a section template",
+              onChange: (e) => {
+                const t = TEMPLATES[e.target.value];
+                if (t) sendIframeCommand({ artifactId: artifact2.id, type: "insert_html", cid: single?.cid, html: t.html });
+                e.currentTarget.value = "";
+              },
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: "Section\u2026" }),
+                Object.entries(TEMPLATES).map(([k, v]) => /* @__PURE__ */ jsx("option", { value: k, children: v.label }, k))
+              ]
+            }
+          ),
+          outline.length > 0 && /* @__PURE__ */ jsxs(
+            "select",
+            {
+              className: "cv-html-tpl",
+              value: "",
+              title: "Jump to a heading",
+              onChange: (e) => {
+                const idx = Number(e.target.value);
+                if (!Number.isNaN(idx)) sendIframeCommand({ artifactId: artifact2.id, type: "scroll_to", index: idx });
+                e.currentTarget.value = "";
+              },
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: "Outline\u2026" }),
+                outline.map((h, i) => /* @__PURE__ */ jsx("option", { value: i, children: "\xA0".repeat((h.level - 1) * 2) + h.text }, i))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("button", { className: "cv-html-add", title: "Accessibility check", onClick: () => setA11y(checkA11y(artifact2.data.html)), children: "\u267F Check" })
+        ] }),
         ratio && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs(
             "select",
@@ -1898,6 +2059,18 @@ function HtmlRenderer({ artifact: artifact2 }) {
         /* @__PURE__ */ jsx("button", { className: mode === "code" ? "is-on" : "", onClick: () => setMode("code"), children: "Code" })
       ] })
     ] }),
+    a11y !== null && /* @__PURE__ */ jsxs("div", { className: "cv-a11y", role: "status", children: [
+      /* @__PURE__ */ jsx("button", { className: "cv-a11y__close", onClick: () => setA11y(null), "aria-label": "Dismiss", children: "\xD7" }),
+      a11y.length === 0 ? /* @__PURE__ */ jsx("span", { className: "cv-a11y__ok", children: "\u267F No accessibility issues found" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("b", { children: [
+          "\u267F ",
+          a11y.length,
+          " accessibility issue",
+          a11y.length > 1 ? "s" : ""
+        ] }),
+        /* @__PURE__ */ jsx("ul", { children: a11y.map((m, i) => /* @__PURE__ */ jsx("li", { children: m }, i)) })
+      ] })
+    ] }),
     mode === "design" ? /* @__PURE__ */ jsx("div", { className: `cv-html-stage${ratio ? " cv-html-stage--slide" : ""}`, ref: stageRef, children: ratio ? (
       // Scaled slide: the iframe lays out at its full design size, then a
       // transform shrinks it to fit; a sized wrapper reserves the scaled box
@@ -2231,6 +2404,30 @@ function ExportMenu({ artifact: artifact2, getRenderedHtml }) {
     }
     setOpen(false);
   };
+  const openInTab = () => {
+    const html = artifact2.type === "html" ? artifact2.data.html : artifact2.type === "slides" ? slidesToPrintHtml(artifact2.data, artifact2.title) : (() => {
+      const h = getRenderedHtml();
+      return h == null ? null : toStandaloneHtml(artifact2.title, h);
+    })();
+    if (html == null) return;
+    const url = URL.createObjectURL(new Blob([html], { type: "text/html" }));
+    window.open(url, "_blank", "noopener");
+    setTimeout(() => URL.revokeObjectURL(url), 1e4);
+    setOpen(false);
+  };
+  const [copied, setCopied] = useState(false);
+  const copyHtml = async () => {
+    const html = artifact2.type === "html" ? artifact2.data.html : getRenderedHtml();
+    if (html == null) return;
+    try {
+      await navigator.clipboard.writeText(
+        artifact2.type === "html" ? html : toStandaloneHtml(artifact2.title, html)
+      );
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1400);
+    } catch {
+    }
+  };
   return /* @__PURE__ */ jsxs("div", { className: "cv-export", children: [
     /* @__PURE__ */ jsx(
       "button",
@@ -2245,6 +2442,8 @@ function ExportMenu({ artifact: artifact2, getRenderedHtml }) {
     open && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("div", { className: "cv-export__scrim", onClick: () => setOpen(false) }),
       /* @__PURE__ */ jsxs("div", { className: "cv-export__menu", role: "menu", children: [
+        /* @__PURE__ */ jsx("button", { role: "menuitem", onClick: openInTab, children: "Open in new tab \u2197" }),
+        /* @__PURE__ */ jsx("button", { role: "menuitem", onClick: copyHtml, children: copied ? "Copied \u2713" : "Copy HTML" }),
         /* @__PURE__ */ jsxs("button", { role: "menuitem", onClick: exportHtml, children: [
           "HTML ",
           /* @__PURE__ */ jsx("span", { className: "cv-export__ext", children: ".html" })

package/dist/styles.css

@@ -761,6 +761,17 @@
 /* --- html renderer (base substrate) ------------------------------------------- */
 
 .cv-html-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 10px; }
+.cv-a11y {
+  position: relative; flex: none; padding: 12px 34px 12px 16px;
+  border: 1px solid var(--cv-border); border-radius: 10px; background: var(--cv-surface);
+  font-size: 13px; color: var(--cv-text);
+}
+.cv-a11y ul { margin: 8px 0 0; padding-left: 18px; color: var(--cv-muted); line-height: 1.7; }
+.cv-a11y__ok { color: var(--cv-good, #1f9d6b); font-weight: 600; }
+.cv-a11y__close {
+  position: absolute; top: 6px; right: 8px; border: 0; background: transparent;
+  color: var(--cv-muted); font-size: 18px; cursor: pointer; line-height: 1;
+}
 .cv-html-bar {
   display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
   padding: 7px 9px; border: 1px solid var(--cv-border); border-radius: 9px; background: var(--cv-surface);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@braincrew-lab/langchain-canvas",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "A live canvas for LangChain agents — stream documents, charts, and rich artifacts into a React panel.",
   "license": "MIT",
   "type": "module",