npm - @open-agent-toolkit/cli - Versions diffs - 0.2.5 → 0.2.6 - Mend

@open-agent-toolkit/cli 0.2.5 → 0.2.6

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

package/assets/skills/explainer-kit/scripts/validate.mjs ADDED Viewed

@@ -0,0 +1,59 @@
+#!/usr/bin/env node
+import { readFile } from 'node:fs/promises';
+import { pathToFileURL } from 'node:url';
+import { validateContract } from './lib/contracts.mjs';
+export async function runValidationCli(
+  argv = process.argv.slice(2),
+  io = console,
+) {
+  const [kind, inputPath] = argv;
+  if (!kind || !inputPath) {
+    const result = {
+      valid: false,
+      errors: [
+        {
+          path: '$',
+          code: 'usage',
+          message: 'Usage: validate.mjs <contract-kind> <json-path>',
+        },
+      ],
+    };
+    io.log(JSON.stringify(result, null, 2));
+    return 1;
+  }
+  try {
+    const value = JSON.parse(await readFile(inputPath, 'utf8'));
+    const result = validateContract(kind, value);
+    io.log(JSON.stringify(result, null, 2));
+    return result.valid ? 0 : 1;
+  } catch (error) {
+    io.log(
+      JSON.stringify(
+        {
+          valid: false,
+          errors: [
+            {
+              path: '$',
+              code: 'input',
+              message: error instanceof Error ? error.message : String(error),
+            },
+          ],
+        },
+        null,
+        2,
+      ),
+    );
+    return 1;
+  }
+}
+if (
+  process.argv[1] &&
+  pathToFileURL(process.argv[1]).href === import.meta.url
+) {
+  process.exitCode = await runValidationCli();
+}

package/assets/skills/explainer-kit/templates/deck-shell.html ADDED Viewed

@@ -0,0 +1,233 @@
+<!doctype html>
+<!--
+  Neutral production shell. Worked content: ../examples/
+  TEMPLATE CONTRACT: THEME_CSS, TITLE, DESCRIPTION, SLIDES
+  SLIDES contains semantic section.slide elements with escaped content.
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{{TITLE}}</title>
+    <meta name="description" content="{{DESCRIPTION}}" />
+    <script>
+      document.documentElement.classList.add('js');
+    </script>
+    <style>
+      :root {
+        --canvas: hsl(210 20% 98%);
+        --panel: hsl(0 0% 100%);
+        --border: hsl(210 14% 80%);
+        --ink: hsl(215 24% 16%);
+        --muted: hsl(215 12% 38%);
+        --accent: hsl(215 28% 32%);
+        --sans: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+        --serif: ui-serif, Georgia, serif;
+        --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
+        {{THEME_CSS}}
+      }
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        min-height: 100%;
+      }
+      body {
+        background: var(--canvas);
+        color: var(--ink);
+        font-family: var(--sans);
+      }
+      .deck {
+        display: flex;
+        width: 100%;
+        height: 100dvh;
+        overflow-x: auto;
+        overflow-y: hidden;
+        scroll-snap-type: x mandatory;
+        scroll-behavior: smooth;
+        overscroll-behavior-x: contain;
+      }
+      .slide {
+        flex: 0 0 100%;
+        width: 100%;
+        min-width: 0;
+        height: 100dvh;
+        overflow: hidden;
+        scroll-snap-align: start;
+        scroll-snap-stop: always;
+        display: grid;
+        place-items: center;
+        padding: clamp(2rem, 7vw, 7rem);
+        border-inline-end: 1px solid var(--border);
+      }
+      .slide__content {
+        width: min(100%, 72rem);
+        max-width: 100%;
+        max-height: 100%;
+        min-width: 0;
+        overflow-x: auto;
+        overflow-y: auto;
+        overflow-wrap: anywhere;
+        padding: 0.25rem;
+      }
+      .slide h1,
+      .slide h2 {
+        max-width: 24ch;
+        font-family: var(--serif);
+        font-size: clamp(2rem, 6vw, 4.5rem);
+        line-height: 1.08;
+        margin-block: 0 1rem;
+        text-wrap: balance;
+      }
+      .slide p,
+      .slide li {
+        max-width: 52ch;
+        font-size: clamp(1rem, 2.2vw, 1.45rem);
+        line-height: 1.5;
+      }
+      .table-scroll,
+      pre {
+        max-width: 100%;
+        overflow-x: auto;
+      }
+      .deck-controls {
+        position: fixed;
+        z-index: 3;
+        inset: auto 1rem 1rem auto;
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+        border: 1px solid var(--border);
+        border-radius: 999px;
+        background: var(--panel);
+        padding: 0.35rem;
+        font: 0.75rem var(--mono);
+      }
+      .deck-controls button {
+        border: 0;
+        border-radius: 50%;
+        background: transparent;
+        color: var(--ink);
+        min-width: 2rem;
+        min-height: 2rem;
+        cursor: pointer;
+      }
+      .deck-controls button:focus-visible {
+        outline: 2px solid var(--accent);
+        outline-offset: 2px;
+      }
+      html:not(.js) .deck {
+        display: block;
+        height: auto;
+        overflow: visible;
+        scroll-snap-type: none;
+      }
+      html:not(.js) .slide {
+        min-height: auto;
+        height: auto;
+        overflow: visible;
+        border-block-end: 1px solid var(--border);
+      }
+      html:not(.js) .slide__content {
+        max-height: none;
+        overflow-x: auto;
+        overflow-y: visible;
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .deck {
+          scroll-behavior: auto;
+        }
+      }
+      @media print {
+        .deck {
+          display: block;
+          width: auto;
+          height: auto;
+          overflow: visible;
+          scroll-snap-type: none;
+        }
+        .slide {
+          display: block;
+          width: auto;
+          height: auto;
+          min-height: auto;
+          overflow: visible;
+          break-after: page;
+          border: 0;
+          padding: 2rem 0;
+        }
+        .slide__content {
+          width: auto;
+          max-height: none;
+          overflow: visible;
+        }
+        .deck-controls {
+          display: none;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <noscript>
+      <p>This deck remains available below as a readable vertical document.</p>
+    </noscript>
+    <main class="deck" aria-label="{{TITLE}}">{{SLIDES}}</main>
+    <nav class="deck-controls" aria-label="Slide navigation">
+      <button type="button" data-direction="-1" aria-label="Previous slide">
+        ←
+      </button>
+      <span id="deck-counter" aria-live="polite"></span>
+      <button type="button" data-direction="1" aria-label="Next slide">
+        →
+      </button>
+    </nav>
+    <script>
+      (() => {
+        const deck = document.querySelector('.deck');
+        const slides = [...document.querySelectorAll('.slide')];
+        const counter = document.querySelector('#deck-counter');
+        let current = 0;
+        const update = (index) => {
+          current = Math.max(0, Math.min(slides.length - 1, index));
+          counter.textContent = `${current + 1} / ${slides.length}`;
+        };
+        const go = (index) => {
+          update(index);
+          slides[current]?.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+            inline: 'start',
+          });
+        };
+        document.querySelectorAll('[data-direction]').forEach((button) => {
+          button.addEventListener('click', () =>
+            go(current + Number(button.dataset.direction)),
+          );
+        });
+        addEventListener('keydown', (event) => {
+          if (event.target.closest('input, textarea, [contenteditable]'))
+            return;
+          if (['ArrowRight', 'ArrowDown'].includes(event.key)) {
+            event.preventDefault();
+            go(current + 1);
+          } else if (['ArrowLeft', 'ArrowUp'].includes(event.key)) {
+            event.preventDefault();
+            go(current - 1);
+          }
+        });
+        const observer = new IntersectionObserver(
+          (entries) => {
+            const visible = entries.find((entry) => entry.isIntersecting);
+            if (visible) update(slides.indexOf(visible.target));
+          },
+          { root: deck, threshold: 0.6 },
+        );
+        slides.forEach((slide) => observer.observe(slide));
+        update(0);
+      })();
+    </script>
+  </body>
+</html>

package/assets/skills/explainer-kit/templates/diagram-shell.html ADDED Viewed

@@ -0,0 +1,219 @@
+<!doctype html>
+<!--
+  Neutral production shell. Worked content: ../examples/
+  TEMPLATE CONTRACT: THEME_CSS, TITLE, DESCRIPTION, DIAGRAM, LEGEND
+  DIAGRAM contains validated inline SVG children; external diagram runtimes are not allowed.
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{{TITLE}}</title>
+    <meta name="description" content="{{DESCRIPTION}}" />
+    <style>
+      :root {
+        --canvas: hsl(210 20% 98%);
+        --panel: hsl(0 0% 100%);
+        --border: hsl(210 14% 80%);
+        --ink: hsl(215 24% 16%);
+        --muted: hsl(215 12% 38%);
+        --accent: hsl(215 28% 32%);
+        --sans: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+        --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
+        {{THEME_CSS}}
+      }
+      * {
+        box-sizing: border-box;
+      }
+      body {
+        min-height: 100vh;
+        margin: 0;
+        padding: clamp(1rem, 4vw, 3rem);
+        background: var(--canvas);
+        color: var(--ink);
+        font-family: var(--sans);
+      }
+      main {
+        max-width: 80rem;
+        margin: auto;
+      }
+      header {
+        max-width: 55rem;
+        margin-block-end: 1.5rem;
+      }
+      h1 {
+        margin-block: 0 0.4rem;
+        font-size: clamp(2rem, 5vw, 3.5rem);
+        line-height: 1.1;
+        text-wrap: balance;
+      }
+      header p,
+      .diagram-hint {
+        color: var(--muted);
+      }
+      .diagram-shell {
+        position: relative;
+        min-width: 0;
+      }
+      .diagram-hint {
+        font: 0.75rem/1.4 var(--mono);
+      }
+      .diagram-viewport {
+        position: relative;
+        width: 100%;
+        min-height: min(65vh, 40rem);
+        overflow: auto;
+        border: 1px solid var(--border);
+        border-radius: 0.75rem;
+        background: var(--panel);
+        cursor: grab;
+      }
+      .diagram-viewport.is-panning {
+        cursor: grabbing;
+        user-select: none;
+      }
+      .diagram-canvas {
+        display: block;
+        width: 100%;
+        min-width: 42rem;
+        height: auto;
+        transform-origin: top left;
+      }
+      .diagram-canvas text {
+        fill: var(--ink);
+        font-family: var(--sans);
+      }
+      .diagram-canvas .node {
+        fill: var(--panel);
+        stroke: var(--accent);
+      }
+      .diagram-canvas .edge {
+        fill: none;
+        stroke: var(--muted);
+      }
+      .zoom-controls {
+        position: absolute;
+        z-index: 2;
+        inset: 0.6rem 0.6rem auto auto;
+        display: flex;
+        gap: 0.25rem;
+        padding: 0.25rem;
+        border: 1px solid var(--border);
+        border-radius: 0.5rem;
+        background: var(--panel);
+      }
+      .zoom-controls button {
+        min-width: 2rem;
+        min-height: 2rem;
+        border: 0;
+        background: transparent;
+        color: var(--ink);
+        cursor: pointer;
+      }
+      .legend {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1rem;
+        margin-block-start: 1rem;
+        color: var(--muted);
+        font: 0.8rem/1.5 var(--mono);
+      }
+      @media (max-width: 45rem) {
+        .diagram-canvas {
+          min-width: 34rem;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <header>
+        <h1 id="diagram-title">{{TITLE}}</h1>
+        <p id="diagram-description">{{DESCRIPTION}}</p>
+      </header>
+      <section class="diagram-shell" aria-labelledby="diagram-title">
+        <p class="diagram-hint">
+          Use the controls or Ctrl/Command + wheel to zoom; drag to pan.
+        </p>
+        <div class="zoom-controls" aria-label="Diagram zoom">
+          <button type="button" data-zoom="in" aria-label="Zoom in">+</button>
+          <button type="button" data-zoom="out" aria-label="Zoom out">−</button>
+          <button type="button" data-zoom="reset" aria-label="Reset zoom">
+            ↺
+          </button>
+        </div>
+        <div class="diagram-viewport">
+          <svg
+            class="diagram-canvas"
+            viewBox="0 0 1200 720"
+            role="img"
+            aria-labelledby="diagram-title diagram-description"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            {{DIAGRAM}}
+          </svg>
+        </div>
+        <div class="legend" aria-label="Diagram legend">{{LEGEND}}</div>
+      </section>
+    </main>
+    <script>
+      (() => {
+        const viewport = document.querySelector('.diagram-viewport');
+        const canvas = document.querySelector('.diagram-canvas');
+        let zoom = 1;
+        let dragging = false;
+        let originX = 0;
+        let originY = 0;
+        let scrollX = 0;
+        let scrollY = 0;
+        const apply = () => {
+          canvas.style.transform = `scale(${zoom})`;
+        };
+        document.querySelectorAll('[data-zoom]').forEach((button) => {
+          button.addEventListener('click', () => {
+            const action = button.dataset.zoom;
+            zoom =
+              action === 'reset'
+                ? 1
+                : Math.min(
+                    3,
+                    Math.max(0.5, zoom * (action === 'in' ? 1.2 : 0.8)),
+                  );
+            apply();
+          });
+        });
+        viewport.addEventListener(
+          'wheel',
+          (event) => {
+            if (!event.ctrlKey && !event.metaKey) return;
+            event.preventDefault();
+            zoom = Math.min(
+              3,
+              Math.max(0.5, zoom * (event.deltaY < 0 ? 1.1 : 0.9)),
+            );
+            apply();
+          },
+          { passive: false },
+        );
+        viewport.addEventListener('pointerdown', (event) => {
+          dragging = true;
+          originX = event.clientX;
+          originY = event.clientY;
+          scrollX = viewport.scrollLeft;
+          scrollY = viewport.scrollTop;
+          viewport.classList.add('is-panning');
+          viewport.setPointerCapture(event.pointerId);
+        });
+        viewport.addEventListener('pointermove', (event) => {
+          if (!dragging) return;
+          viewport.scrollLeft = scrollX - (event.clientX - originX);
+          viewport.scrollTop = scrollY - (event.clientY - originY);
+        });
+        viewport.addEventListener('pointerup', () => {
+          dragging = false;
+          viewport.classList.remove('is-panning');
+        });
+      })();
+    </script>
+  </body>
+</html>