npm - @launchsecure/launch-kit - Versions diffs - 0.0.25 → 0.0.26 - Mend

@launchsecure/launch-kit 0.0.25 → 0.0.26

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

package/dist/server/council-entry.js CHANGED Viewed

File without changes

package/dist/server/deck-mcp-entry.js CHANGED Viewed

@@ -892,6 +892,277 @@ var init_contract_generator = __esm({
   }
 });
+// src/server/rich-html-render.ts
+function renderRichHtml(opts) {
+  const theme = opts.theme ?? "light";
+  const title = escapeHtml(opts.title ?? "LaunchDeck");
+  if (opts.framework === "wired") {
+    return renderWired(opts.content, theme, title);
+  }
+  if (opts.framework === "reveal") {
+    return renderReveal(opts.content, theme, title);
+  }
+  return opts.content;
+}
+function themeResolverScript(initial) {
+  return `<script>
+(function () {
+  function applyTheme(t) {
+    if (t !== 'light' && t !== 'dark') return;
+    var prev = document.documentElement.dataset.theme;
+    document.documentElement.dataset.theme = t;
+    if (prev !== t) {
+      document.dispatchEvent(new CustomEvent('deck-theme', { detail: t }));
+    }
+  }
+  // 1) initial preference: URL > prefers-color-scheme (standalone) > baked-in default
+  var url = new URL(window.location.href);
+  var fromUrl = url.searchParams.get('theme');
+  if (fromUrl === 'light' || fromUrl === 'dark') {
+    applyTheme(fromUrl);
+  } else if (window.parent === window) {
+    var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    applyTheme(prefersDark ? 'dark' : 'light');
+  } else {
+    applyTheme(${JSON.stringify(initial)});
+  }
+  // 2) live updates from parent deck
+  window.addEventListener('message', function (e) {
+    if (e.data && e.data.type === 'deck-theme') applyTheme(e.data.theme);
+  });
+  // 3) tell parent we are ready so it can push the current theme back
+  if (window.parent !== window) {
+    window.parent.postMessage({ type: 'deck-iframe-ready' }, '*');
+  }
+})();
+</script>`;
+}
+function renderWired(body, initialTheme, title) {
+  const LIGHT = { bg: "#ffffff", fg: "#18181b", accent: "#7c3aed", cardBg: "#ffffff" };
+  const DARK = { bg: "#0e0e10", fg: "#e4e4e7", accent: "#a78bfa", cardBg: "#1a1a1d" };
+  const wiredVarsBlock = (vars) => `
+    --wired-card-background-fill: ${vars.cardBg};
+    --wired-button-color: ${vars.fg};
+    --wired-combo-popup-bg: ${vars.cardBg};
+    --wired-progress-color: ${vars.accent};
+    --wired-progress-label-background: ${vars.cardBg};
+    --wired-progress-label-color: ${vars.fg};
+  `;
+  return `<!DOCTYPE html>
+<html lang="en" data-theme="${initialTheme}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${title}</title>
+<script type="module" src="${WIRED_CDN}"></script>
+<link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&family=DM+Sans:wght@400;600;700&display=swap" rel="stylesheet">
+<style>
+  *, *::before, *::after { box-sizing: border-box; }
+  html, body {
+    margin: 0;
+    min-height: 100%;
+    font-family: 'Gloria Hallelujah', 'DM Sans', system-ui, sans-serif;
+    background: var(--page-bg);
+    color: var(--page-fg);
+    transition: background 0.15s, color 0.15s;
+  }
+  body { padding: 24px; }
+  h1, h2, h3, h4 { font-family: 'Gloria Hallelujah', cursive; margin: 0.5em 0; color: var(--page-fg); }
+  a { color: var(--page-accent); }
+  .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
+  .col { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
+  .card { padding: 16px; }
+  /* Light theme */
+  :root[data-theme="light"] {
+    --page-bg: ${LIGHT.bg};
+    --page-fg: ${LIGHT.fg};
+    --page-accent: ${LIGHT.accent};
+    ${wiredVarsBlock(LIGHT)}
+  }
+  /* Dark theme */
+  :root[data-theme="dark"] {
+    --page-bg: ${DARK.bg};
+    --page-fg: ${DARK.fg};
+    --page-accent: ${DARK.accent};
+    ${wiredVarsBlock(DARK)}
+  }
+  /* Hosts: text color inherits via component "color: inherit" rules.
+     Transparent background lets the page bg show through where the
+     rough.js rectangle leaves space. */
+  wired-button, wired-card, wired-checkbox, wired-radio, wired-toggle,
+  wired-input, wired-textarea, wired-search-input, wired-combo, wired-item,
+  wired-listbox, wired-link, wired-tabs, wired-tab, wired-fab,
+  wired-icon-button, wired-divider, wired-progress, wired-slider,
+  wired-calendar, wired-dialog {
+    color: var(--page-fg);
+    background: transparent;
+  }
+</style>
+</head>
+<body>
+${body}
+${themeResolverScript(initialTheme)}
+<script type="module">
+  // wired-input / wired-textarea / wired-search-input render their native
+  // <input>/<textarea> INSIDE shadow DOM. Outer CSS cannot reach those, and
+  // the native control has appearance:auto which the UA repaints over any
+  // "background: transparent" rule. We must set inline styles directly on
+  // the inner element with !important.
+  //
+  // We register one applier per theme. Re-runs when theme changes or new
+  // nodes are added so the page reacts live to the deck sun/moon toggle.
+  const FG = { light: ${JSON.stringify(LIGHT.fg)}, dark: ${JSON.stringify(DARK.fg)} };
+  const TAGS = ['wired-input', 'wired-textarea', 'wired-search-input'];
+  const DARK_PROPS = [
+    'appearance', '-webkit-appearance',
+    'background', 'background-color',
+    'color', '-webkit-text-fill-color', 'caret-color',
+    'border', 'outline',
+  ];
+  function applyDark(node) {
+    const s = node.style;
+    s.setProperty('appearance', 'none', 'important');
+    s.setProperty('-webkit-appearance', 'none', 'important');
+    s.setProperty('background', 'transparent', 'important');
+    s.setProperty('background-color', 'transparent', 'important');
+    s.setProperty('color', FG.dark, 'important');
+    s.setProperty('-webkit-text-fill-color', FG.dark, 'important');
+    s.setProperty('caret-color', FG.dark, 'important');
+    s.setProperty('border', 'none', 'important');
+    s.setProperty('outline', 'none', 'important');
+  }
+  function applyLight(node) {
+    DARK_PROPS.forEach((p) => node.style.removeProperty(p));
+  }
+  function placeholderStyle(host, theme) {
+    const existing = host.shadowRoot.querySelector('style[data-deck-theme]');
+    if (existing) existing.remove();
+    if (theme !== 'dark') return;
+    const style = document.createElement('style');
+    style.dataset.deckTheme = '1';
+    style.textContent =
+      '::placeholder{color:' + FG.dark + '99 !important;' +
+      '-webkit-text-fill-color:' + FG.dark + '99 !important;}';
+    host.shadowRoot.appendChild(style);
+  }
+  function sweepOnce() {
+    const theme = document.documentElement.dataset.theme;
+    for (const tag of TAGS) {
+      for (const host of document.querySelectorAll(tag)) {
+        if (!host.shadowRoot) continue;
+        const inner = host.shadowRoot.querySelector('input, textarea');
+        if (!inner) continue;
+        if (theme === 'dark') applyDark(inner);
+        else applyLight(inner);
+        placeholderStyle(host, theme);
+      }
+    }
+  }
+  // Initial + late-upgrade catch (CDN script loads async).
+  sweepOnce();
+  let elapsed = 0;
+  function tick() {
+    sweepOnce();
+    elapsed += 100;
+    if (elapsed < 3000) setTimeout(tick, 100);
+  }
+  setTimeout(tick, 100);
+  // Re-sweep on theme change.
+  document.addEventListener('deck-theme', sweepOnce);
+  // Re-sweep when new nodes are added.
+  new MutationObserver(sweepOnce).observe(document.body, { subtree: true, childList: true });
+  // whenDefined fires when each tag is registered \u2014 allSettled-style, never hangs.
+  TAGS.forEach((tag) => {
+    customElements.whenDefined(tag).then(sweepOnce).catch(() => {});
+  });
+</script>
+</body>
+</html>`;
+}
+function renderReveal(content, initialTheme, title) {
+  const slides = content.includes("<section") ? content : content.split(/\n\s*---\s*\n/).map((md) => `<section data-markdown><textarea data-template>
+${md.trim()}
+</textarea></section>`).join("\n");
+  return `<!DOCTYPE html>
+<html lang="en" data-theme="${initialTheme}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${title}</title>
+<link rel="stylesheet" href="${REVEAL_CSS}">
+<link id="reveal-theme-light" rel="stylesheet" href="${REVEAL_THEME("light")}" ${initialTheme === "dark" ? "disabled" : ""}>
+<link id="reveal-theme-dark"  rel="stylesheet" href="${REVEAL_THEME("dark")}"  ${initialTheme === "dark" ? "" : "disabled"}>
+<style>
+  html, body { margin: 0; height: 100%; }
+  .reveal .slides { text-align: left; }
+  .reveal .slides section { padding: 0 32px; }
+</style>
+</head>
+<body>
+<div class="reveal">
+  <div class="slides">
+${slides}
+  </div>
+</div>
+<script src="${REVEAL_JS}"></script>
+<script src="${REVEAL_MD}"></script>
+<script src="${REVEAL_HL}"></script>
+<script src="${REVEAL_NOTES}"></script>
+<script>
+  Reveal.initialize({
+    hash: true,
+    slideNumber: 'c/t',
+    controls: true,
+    progress: true,
+    transition: 'slide',
+    plugins: [RevealMarkdown, RevealHighlight, RevealNotes],
+  });
+  // React to theme changes: flip which stylesheet is enabled.
+  function syncRevealTheme() {
+    var dark = document.documentElement.dataset.theme === 'dark';
+    var lightLink = document.getElementById('reveal-theme-light');
+    var darkLink  = document.getElementById('reveal-theme-dark');
+    if (lightLink) lightLink.disabled = dark;
+    if (darkLink)  darkLink.disabled  = !dark;
+  }
+  document.addEventListener('deck-theme', syncRevealTheme);
+  syncRevealTheme();
+</script>
+${themeResolverScript(initialTheme)}
+</body>
+</html>`;
+}
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function slugify(label) {
+  return label.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "block";
+}
+var WIRED_CDN, REVEAL_VER, REVEAL_CSS, REVEAL_THEME, REVEAL_JS, REVEAL_MD, REVEAL_HL, REVEAL_NOTES;
+var init_rich_html_render = __esm({
+  "src/server/rich-html-render.ts"() {
+    "use strict";
+    WIRED_CDN = "https://unpkg.com/wired-elements?module";
+    REVEAL_VER = "5.1.0";
+    REVEAL_CSS = `https://cdn.jsdelivr.net/npm/reveal.js@${REVEAL_VER}/dist/reveal.css`;
+    REVEAL_THEME = (t) => `https://cdn.jsdelivr.net/npm/reveal.js@${REVEAL_VER}/dist/theme/${t === "dark" ? "black" : "white"}.css`;
+    REVEAL_JS = `https://cdn.jsdelivr.net/npm/reveal.js@${REVEAL_VER}/dist/reveal.js`;
+    REVEAL_MD = `https://cdn.jsdelivr.net/npm/reveal.js@${REVEAL_VER}/plugin/markdown/markdown.js`;
+    REVEAL_HL = `https://cdn.jsdelivr.net/npm/reveal.js@${REVEAL_VER}/plugin/highlight/highlight.js`;
+    REVEAL_NOTES = `https://cdn.jsdelivr.net/npm/reveal.js@${REVEAL_VER}/plugin/notes/notes.js`;
+  }
+});
 // src/server/deck-serve.ts
 var deck_serve_exports = {};
 __export(deck_serve_exports, {
@@ -1067,6 +1338,29 @@ async function startDeckServer(opts = {}) {
               console.error("Failed to generate blast radius HTML:", err);
             }
           }
+          if (block.type === "rich-html" && block.content) {
+            try {
+              const html = renderRichHtml({
+                framework: block.framework ?? "raw",
+                content: block.content,
+                theme: block.theme,
+                title: block.label
+              });
+              const sessionEncoded = encodeURIComponent(body.session);
+              const baseUrl = `/deck-files/${sessionEncoded}`;
+              const filename = `${slugify(block.label)}.html`;
+              const dir = import_node_path3.default.join(cwd, ".launchsecure", "deck-files", body.session);
+              import_node_fs3.default.mkdirSync(dir, { recursive: true });
+              import_node_fs3.default.writeFileSync(import_node_path3.default.join(dir, filename), html);
+              block.type = "iframe";
+              block.src = `${baseUrl}/${filename}`;
+              delete block.content;
+              delete block.framework;
+              delete block.theme;
+            } catch (err) {
+              console.error("Failed to generate rich-html:", err);
+            }
+          }
         }
         broadcastToClients({
           type: "session",
@@ -1280,6 +1574,7 @@ var init_deck_serve = __esm({
     init_deck_config();
     init_blast_radius_render();
     init_contract_generator();
+    init_rich_html_render();
     DEFAULT_PORT = 52829;
     MAX_PORT_SCAN = 3;
     MIME_TYPES = {
@@ -1381,6 +1676,29 @@ async function handleTool(name, args) {
             return text(JSON.stringify({ error: `Failed to generate blast radius HTML: ${err}` }));
           }
         }
+        if (block.type === "rich-html" && block.content) {
+          try {
+            const html = renderRichHtml({
+              framework: block.framework ?? "raw",
+              content: block.content,
+              theme: block.theme,
+              title: block.label
+            });
+            const sessionEncoded = encodeURIComponent(session);
+            const baseUrl = `/deck-files/${sessionEncoded}`;
+            const filename = `${slugify(block.label)}.html`;
+            const dir = (0, import_node_path4.join)(projectRoot, ".launchsecure", "deck-files", session);
+            import_node_fs4.default.mkdirSync(dir, { recursive: true });
+            import_node_fs4.default.writeFileSync((0, import_node_path4.join)(dir, filename), html);
+            block.type = "iframe";
+            block.src = `${baseUrl}/${filename}`;
+            delete block.content;
+            delete block.framework;
+            delete block.theme;
+          } catch (err) {
+            return text(JSON.stringify({ error: `Failed to generate rich-html: ${err}` }));
+          }
+        }
       }
       try {
         await httpPost(`${lock.url}/api/deck`, { session, mode, blocks, prompt });
@@ -1643,6 +1961,7 @@ var init_deck_mcp = __esm({
     init_deck_config();
     init_blast_radius_render();
     init_contract_generator();
+    init_rich_html_render();
     SERVER_INFO = {
       name: "launch-deck",
       version: "0.0.3"
@@ -1650,7 +1969,7 @@ var init_deck_mcp = __esm({
     TOOLS = [
       {
         name: "deck",
-        description: 'Push visual blocks (HTML, Mermaid diagrams, options, markdown) to the LaunchDeck browser.\n\nEach call creates a named session tab in the browser. Tabs accumulate \u2014 previous sessions are preserved.\n\nModes:\n- "show": Display content and return immediately. Terminal confirms delivery. No user feedback.\n- "feedback": Display content with an input bar for the user to respond. Returns immediately with session info. Call `await_feedback` with the same session ID to block until the user responds.\n\nBlock types:\n- html: Raw HTML/CSS (rendered in a sandboxed iframe)\n- mermaid: Mermaid diagram DSL (flowchart, sequence, ERD, etc.)\n- markdown: Rendered markdown text\n- options: Selection cards \u2014 user picks one or more\n- blast-radius: Interactive D3 radial graph for blast radius analysis. Requires `manifest` field.\n\nAfter calling this tool, the user should check the LaunchDeck browser tab to view content.',
+        description: 'Push visual blocks (HTML, Mermaid diagrams, options, markdown) to the LaunchDeck browser.\n\nEach call creates a named session tab in the browser. Tabs accumulate \u2014 previous sessions are preserved.\n\nModes:\n- "show": Display content and return immediately. Terminal confirms delivery. No user feedback.\n- "feedback": Display content with an input bar for the user to respond. Returns immediately with session info. Call `await_feedback` with the same session ID to block until the user responds.\n\nBlock types:\n- html: Raw HTML/CSS (sandboxed iframe \u2014 NO scripts). Use for static markup only.\n- mermaid: Mermaid diagram DSL (flowchart, sequence, ERD, etc.)\n- markdown: Rendered markdown text\n- options: Selection cards \u2014 user picks one or more\n- blast-radius: Interactive D3 radial graph for blast radius analysis. Requires `manifest` field.\n- rich-html: Self-contained HTML page with FULL JS support (events, animations, CDN scripts). Specify `framework` and `content`:\n    \u2022 framework: "wired" \u2014 wireframe UI via wired-elements (https://wiredjs.com). `content` is body HTML using <wired-button>, <wired-input>, <wired-card>, <wired-checkbox>, <wired-combo>, <wired-slider>, <wired-tabs>/<wired-tab>, etc. Hand-drawn aesthetic. Loads CDN automatically.\n    \u2022 framework: "reveal" \u2014 slide presentation via reveal.js (https://revealjs.com). `content` is markdown slides joined by `\\n---\\n` (recommended) OR raw <section>\u2026</section> HTML. Arrow keys navigate. Supports code highlighting and speaker notes. Loads CDN automatically.\n    \u2022 framework: "raw" \u2014 `content` is a complete <!DOCTYPE html> document (caller controls everything).\n    Optional `theme: "light" | "dark"` sets the INITIAL preference. The deck\'s sun/moon toggle overrides live \u2014 content reacts in place. Usually omit it; only set when the AI has a specific reason (e.g. mockup that only makes sense in one mode). Standalone downloads fall back to OS prefers-color-scheme.\n\nAfter calling this tool, the user should check the LaunchDeck browser tab to view content.',
         inputSchema: {
           type: "object",
           properties: {
@@ -1669,9 +1988,19 @@ var init_deck_mcp = __esm({
               items: {
                 type: "object",
                 properties: {
-                  type: { type: "string", enum: ["html", "mermaid", "options", "markdown", "blast-radius"] },
+                  type: { type: "string", enum: ["html", "mermaid", "options", "markdown", "blast-radius", "rich-html"] },
                   label: { type: "string", description: "Label for this block (shown as sub-tab if multiple blocks)" },
-                  content: { type: "string", description: "Content string (HTML, Mermaid DSL, Markdown)" },
+                  content: { type: "string", description: "Content string (HTML, Mermaid DSL, Markdown, or rich-html body)" },
+                  framework: {
+                    type: "string",
+                    enum: ["wired", "reveal", "raw"],
+                    description: "For rich-html only: which framework to wrap content with."
+                  },
+                  theme: {
+                    type: "string",
+                    enum: ["light", "dark"],
+                    description: "For rich-html only: theme for the generated page."
+                  },
                   manifest: {
                     type: "object",
                     description: 'For blast-radius type: BlastRadiusManifest object. Generates an interactive D3 radial graph.\n\nRequired fields:\n- mode: "structural" (file-level, rings = hops) or "feature" (rings = modify/create/ripple)\n- title: string \u2014 shown in header (e.g. "lib/permissions/types.ts" or "Channels for Comms")\n- layers: array of { id, name, icon, color } \u2014 defines the project layers (e.g. db/api/ui). icon = Lucide icon name, color = hex fill color\n- rings: array of { id, name, color } \u2014 defines concentric rings. For structural: [{id:"hop1",name:"Direct",color:"#f97316"},{id:"hop2",name:"Indirect",color:"#eab308"}]. For feature: [{id:"modify",name:"Modify",color:"#f97316"},{id:"create",name:"Create",color:"#22c55e"},{id:"ripple",name:"Ripple",color:"#eab308"}]\n- center: { name, description } \u2014 the center node label and tooltip\n- nodes: array of { id, name, layer, ring, path?, reason?, type? } \u2014 layer refs layers[].id, ring refs rings[].id\n- edges: array of { source, target } \u2014 source/target are node ids, use "center" for edges from the center node\n\nOptional: subtitle (shown above title)\n\nExample layers: [{id:"db",name:"Database",icon:"database",color:"#172554"},{id:"api",name:"API",icon:"server",color:"#1e3a5f"},{id:"ui",name:"UI",icon:"layout-dashboard",color:"#0c4a6e"}]'