npm - @veolab/discoverylab - Versions diffs - 1.4.2 → 1.4.4 - Mend

@veolab/discoverylab 1.4.2 → 1.4.4

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

package/dist/{setup-O6WQQAGP.js → setup-6JJYKKBS.js} RENAMED Viewed

@@ -4,11 +4,11 @@ import {
   setupInstallTool,
   setupStatusTool,
   setupTools
-} from "./chunk-RCY26WEK.js";
+} from "./chunk-CUBQRT5L.js";
 import "./chunk-XKX6NBHF.js";
 import "./chunk-6EGBXRDK.js";
-import "./chunk-XAMA3JJG.js";
-import "./chunk-4VNS5WPM.js";
+import "./chunk-YYOK2RF7.js";
+import "./chunk-R5U7XKVJ.js";
 export {
   setupCheckTool,
   setupInitTool,

package/dist/{tools-FVVWKEGC.js → tools-Q7OZO732.js} RENAMED Viewed

@@ -107,25 +107,25 @@ import {
   uiStatusTool,
   uiTools,
   videoInfoTool
-} from "./chunk-YNLUOZSZ.js";
-import "./chunk-QMUEC6B5.js";
+} from "./chunk-HB3YPWF3.js";
+import "./chunk-PMCXEA7J.js";
 import {
   setupCheckTool,
   setupInitTool,
   setupStatusTool,
   setupTools
-} from "./chunk-RCY26WEK.js";
+} from "./chunk-CUBQRT5L.js";
 import "./chunk-XKX6NBHF.js";
-import "./chunk-34KRJWZL.js";
-import "./chunk-DKAX5RCX.js";
-import "./chunk-DGXAP477.js";
+import "./chunk-34GGYFXX.js";
+import "./chunk-7R5YNOXE.js";
+import "./chunk-3ERJNXYM.js";
 import "./chunk-LB3RNE3O.js";
-import "./chunk-EU63HPKT.js";
+import "./chunk-GRU332L4.js";
 import "./chunk-6EGBXRDK.js";
 import "./chunk-SLNJEF32.js";
-import "./chunk-XAMA3JJG.js";
+import "./chunk-YYOK2RF7.js";
 import "./chunk-XFVDP332.js";
-import "./chunk-4VNS5WPM.js";
+import "./chunk-R5U7XKVJ.js";
 export {
   analyzeScreenshotTool,
   analyzeTools,

package/dist/visualizations/app-flow-map.html ADDED Viewed

@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>App Flow Map</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    background: #1a1a2e;
+    color: #e0e0e0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    min-height: 100vh;
+    padding: 32px;
+    overflow-x: hidden;
+  }
+  .map { max-width: 900px; margin: 0 auto; }
+  .map-header {
+    text-align: center; margin-bottom: 36px;
+    opacity: 0; animation: fadeIn 0.6s 0.1s forwards;
+  }
+  .map-header h1 { font-size: 24px; font-weight: 700; color: #fff; }
+  .map-header p { font-size: 13px; color: rgba(255,255,255,0.45); margin-top: 6px; }
+  @keyframes fadeIn { to { opacity: 1; } }
+  @keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
+  /* Phase blocks */
+  .phase {
+    border-radius: 16px;
+    padding: 20px;
+    margin-bottom: 0;
+    opacity: 0;
+    animation: slideUp 0.5s forwards;
+    position: relative;
+  }
+  .phase-title { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 4px; }
+  .phase-desc { font-size: 12px; opacity: 0.6; margin-bottom: 14px; }
+  /* Phase color themes */
+  .phase-0 { background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.25); }
+  .phase-0 .phase-title { color: #86efac; }
+  .phase-1 { background: rgba(99, 102, 241, 0.12); border: 1px solid rgba(99, 102, 241, 0.25); }
+  .phase-1 .phase-title { color: #a5b4fc; }
+  .phase-2 { background: rgba(234, 179, 8, 0.12); border: 1px solid rgba(234, 179, 8, 0.25); }
+  .phase-2 .phase-title { color: #fde047; }
+  .phase-3 { background: rgba(236, 72, 153, 0.12); border: 1px solid rgba(236, 72, 153, 0.25); }
+  .phase-3 .phase-title { color: #f9a8d4; }
+  .phase-4 { background: rgba(14, 165, 233, 0.12); border: 1px solid rgba(14, 165, 233, 0.25); }
+  .phase-4 .phase-title { color: #7dd3fc; }
+  /* Screen cards inside phases */
+  .phase-screens {
+    display: flex; gap: 10px; overflow-x: auto; padding: 4px 0;
+  }
+  .screen-card {
+    flex-shrink: 0;
+    background: rgba(255,255,255,0.06);
+    border: 1px solid rgba(255,255,255,0.1);
+    border-radius: 10px;
+    padding: 8px;
+    min-width: 130px;
+    max-width: 160px;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .screen-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
+  }
+  .screen-card-img {
+    width: 100%; height: 180px;
+    border-radius: 6px; overflow: hidden;
+    background: #000; margin-bottom: 6px;
+  }
+  .screen-card-img img { width: 100%; height: 100%; object-fit: contain; }
+  .screen-card-label { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.85); }
+  .screen-card-detail { font-size: 10px; color: rgba(255,255,255,0.4); margin-top: 2px; }
+  /* Arrow connector between phases */
+  .arrow-connector {
+    display: flex; align-items: center; justify-content: center;
+    height: 40px;
+    opacity: 0; animation: fadeIn 0.3s forwards;
+  }
+  .arrow-connector svg {
+    stroke: rgba(255,255,255,0.2); fill: none; stroke-width: 2;
+  }
+  /* Insight callout */
+  .insight {
+    margin-top: 6px; padding: 8px 12px;
+    background: rgba(255,255,255,0.04);
+    border-left: 3px solid rgba(255,255,255,0.15);
+    border-radius: 0 8px 8px 0;
+    font-size: 11px; color: rgba(255,255,255,0.55);
+    line-height: 1.5;
+  }
+  .footer {
+    text-align: center; margin-top: 32px;
+    font-size: 10px; color: rgba(255,255,255,0.2);
+  }
+  .model-label {
+    position: fixed; bottom: 10px; right: 14px;
+    font-size: 9px; color: rgba(255,255,255,0.2);
+    background: rgba(0,0,0,0.3);
+    padding: 2px 8px; border-radius: 4px;
+  }
+</style>
+</head>
+<body>
+<div class="map">
+  <div class="map-header">
+    <h1 id="mapTitle">App Flow Map</h1>
+    <p id="mapSubtitle"></p>
+  </div>
+  <div id="mapContent"></div>
+  <div class="footer" id="mapFooter">Generated by DiscoveryLab</div>
+  <div class="model-label" id="modelLabel"></div>
+</div>
+<script>
+  const DATA = window.__VISUALIZATION_DATA__ || {};
+  const phases = DATA.phases || [];
+  if (DATA.title) document.getElementById('mapTitle').textContent = DATA.title;
+  if (DATA.subtitle) document.getElementById('mapSubtitle').textContent = DATA.subtitle;
+  if (DATA.providerName) document.getElementById('modelLabel').textContent = DATA.providerName;
+  const container = document.getElementById('mapContent');
+  let animDelay = 0.3;
+  phases.forEach((phase, phaseIdx) => {
+    // Arrow between phases
+    if (phaseIdx > 0) {
+      const arrow = document.createElement('div');
+      arrow.className = 'arrow-connector';
+      arrow.style.animationDelay = animDelay + 's';
+      arrow.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 5v14M5 12l7 7 7-7" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+      container.appendChild(arrow);
+      animDelay += 0.15;
+    }
+    const phaseEl = document.createElement('div');
+    phaseEl.className = `phase phase-${phaseIdx % 5}`;
+    phaseEl.style.animationDelay = animDelay + 's';
+    let html = `
+      <div class="phase-title">${phase.title || 'Phase ' + (phaseIdx + 1)}</div>
+      <div class="phase-desc">${phase.description || ''}</div>
+    `;
+    // Screen cards
+    if (phase.screens && phase.screens.length > 0) {
+      html += '<div class="phase-screens">';
+      phase.screens.forEach(screen => {
+        html += `
+          <div class="screen-card">
+            ${screen.imageUrl ? `<div class="screen-card-img"><img src="${screen.imageUrl}" alt="" loading="lazy"></div>` : ''}
+            <div class="screen-card-label">${screen.label || ''}</div>
+            ${screen.detail ? `<div class="screen-card-detail">${screen.detail}</div>` : ''}
+          </div>
+        `;
+      });
+      html += '</div>';
+    }
+    // Insight
+    if (phase.insight) {
+      html += `<div class="insight">${phase.insight}</div>`;
+    }
+    phaseEl.innerHTML = html;
+    container.appendChild(phaseEl);
+    animDelay += 0.3;
+  });
+</script>
+</body>
+</html>

package/dist/visualizations/device-showcase.html ADDED Viewed

@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Device Showcase</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    background: linear-gradient(135deg, #0c0c1d, #1e1e3f, #0c0c1d);
+    color: #fff;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    min-height: 100vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  .header { text-align: center; margin-bottom: 32px; z-index: 10; }
+  .header h1 { font-size: 28px; font-weight: 700; }
+  .header p { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 4px; }
+  .carousel-wrapper {
+    perspective: 1200px;
+    width: 100%;
+    max-width: 800px;
+    height: 500px;
+    position: relative;
+  }
+  .carousel {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    transform-style: preserve-3d;
+    animation: spin 20s linear infinite;
+    animation-play-state: running;
+  }
+  .carousel:hover { animation-play-state: paused; }
+  @keyframes spin { to { transform: rotateY(360deg); } }
+  .device {
+    position: absolute;
+    width: 200px;
+    left: 50%;
+    top: 50%;
+    margin-left: -100px;
+    margin-top: -200px;
+    transform-style: preserve-3d;
+    transition: transform 0.5s, box-shadow 0.5s;
+  }
+  .device-frame {
+    background: #111;
+    border-radius: 24px;
+    padding: 8px;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
+    border: 1px solid rgba(255,255,255,0.08);
+  }
+  .device-screen {
+    border-radius: 16px;
+    overflow: hidden;
+    background: #000;
+  }
+  .device-screen img {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+  .device-label {
+    text-align: center;
+    font-size: 11px;
+    color: rgba(255,255,255,0.5);
+    margin-top: 12px;
+  }
+  .glow {
+    position: absolute;
+    width: 300px; height: 300px;
+    background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 70%);
+    top: 50%; left: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+  }
+  .footer {
+    position: fixed; bottom: 16px;
+    font-size: 11px; color: rgba(255,255,255,0.25);
+  }
+  .nav-dots {
+    display: flex; gap: 8px; margin-top: 24px; z-index: 10;
+  }
+  .nav-dot {
+    width: 8px; height: 8px; border-radius: 50%;
+    background: rgba(255,255,255,0.2);
+    cursor: pointer;
+    transition: background 0.3s;
+  }
+  .nav-dot.active { background: #6366f1; }
+</style>
+</head>
+<body>
+<div class="header">
+  <h1 id="vizTitle">Device Showcase</h1>
+  <p id="vizSubtitle"></p>
+</div>
+<div class="carousel-wrapper">
+  <div class="glow"></div>
+  <div class="carousel" id="carousel"></div>
+</div>
+<div class="nav-dots" id="navDots"></div>
+<div class="footer" id="vizFooter">Generated by DiscoveryLab</div>
+<script>
+  const DATA = window.__VISUALIZATION_DATA__ || {};
+  const screens = DATA.screens || [];
+  if (DATA.title) document.getElementById('vizTitle').textContent = DATA.title;
+  if (DATA.subtitle) document.getElementById('vizSubtitle').textContent = DATA.subtitle;
+  const carousel = document.getElementById('carousel');
+  const dotsContainer = document.getElementById('navDots');
+  const n = screens.length || 1;
+  const angleStep = 360 / n;
+  const radius = Math.max(250, n * 60);
+  screens.forEach((screen, i) => {
+    const angle = angleStep * i;
+    const device = document.createElement('div');
+    device.className = 'device';
+    device.style.transform = `rotateY(${angle}deg) translateZ(${radius}px)`;
+    device.innerHTML = `
+      <div class="device-frame">
+        <div class="device-screen">
+          <img src="${screen.imageUrl}" alt="Screen ${i + 1}" loading="lazy">
+        </div>
+      </div>
+      <div class="device-label">${screen.label || `Screen ${i + 1}`}</div>
+    `;
+    carousel.appendChild(device);
+    const dot = document.createElement('div');
+    dot.className = `nav-dot ${i === 0 ? 'active' : ''}`;
+    dot.addEventListener('click', () => {
+      carousel.style.animation = 'none';
+      carousel.offsetHeight; // reflow
+      carousel.style.transform = `rotateY(${-angle}deg)`;
+      carousel.style.transition = 'transform 0.8s ease';
+      dotsContainer.querySelectorAll('.nav-dot').forEach(d => d.classList.remove('active'));
+      dot.classList.add('active');
+    });
+    dotsContainer.appendChild(dot);
+  });
+</script>
+</body>
+</html>

package/dist/visualizations/flow-diagram.html ADDED Viewed

@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Flow Diagram</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    background: linear-gradient(160deg, #0f0f23, #1a1a3e);
+    color: #fff;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+  .container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 24px;
+    max-width: 100%;
+    overflow: hidden;
+  }
+  .header { text-align: center; margin-bottom: 20px; flex-shrink: 0; }
+  .header h1 { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
+  .header p { font-size: 13px; color: rgba(255,255,255,0.5); }
+  .flow {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 0;
+    padding: 10px 0;
+    min-height: 0;
+  }
+  .flow.vertical {
+    flex-direction: column;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .step {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-shrink: 1;
+    min-width: 0;
+    max-width: 220px;
+    opacity: 0;
+    transform: translateY(20px);
+    animation: fadeInUp 0.5s forwards;
+    /* delay set dynamically via JS for correct sequential order */
+  }
+  @keyframes fadeInUp {
+    to { opacity: 1; transform: translateY(0); }
+  }
+  .step-badge {
+    width: 28px; height: 28px; border-radius: 50%;
+    background: #6366f1; color: #fff;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 12px; font-weight: 700;
+    margin-bottom: 8px;
+    box-shadow: 0 3px 10px rgba(99,102,241,0.4);
+    flex-shrink: 0;
+  }
+  .step-screenshot {
+    width: 100%;
+    max-height: 55vh;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
+    border: 1px solid rgba(255,255,255,0.1);
+    transition: transform 0.3s, box-shadow 0.3s;
+    flex-shrink: 1;
+  }
+  .step-screenshot:hover {
+    transform: scale(1.03);
+    box-shadow: 0 10px 30px rgba(99,102,241,0.25);
+  }
+  .step-screenshot img {
+    width: 100%;
+    height: auto;
+    display: block;
+    max-height: 55vh;
+    object-fit: contain;
+  }
+  .step-label {
+    font-size: 11px;
+    color: rgba(255,255,255,0.7);
+    margin-top: 8px;
+    text-align: center;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+  .arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    padding: 0 4px;
+    opacity: 0;
+    animation: fadeInArrow 0.3s forwards;
+    /* delay set dynamically via JS */
+  }
+  @keyframes fadeInArrow { to { opacity: 1; } }
+  .arrow svg {
+    width: 20px; height: 20px;
+    stroke: rgba(255,255,255,0.35);
+    fill: none;
+    stroke-width: 2;
+  }
+  .flow.vertical .arrow { transform: rotate(90deg); }
+  .footer {
+    text-align: center;
+    padding: 12px;
+    font-size: 10px;
+    color: rgba(255,255,255,0.25);
+    flex-shrink: 0;
+  }
+</style>
+</head>
+<body>
+<div class="container">
+  <div class="header">
+    <h1 id="vizTitle">App Flow</h1>
+    <p id="vizSubtitle"></p>
+  </div>
+  <div class="flow" id="flowContainer"></div>
+  <div class="footer" id="vizFooter">Generated by DiscoveryLab</div>
+</div>
+<script>
+  const DATA = window.__VISUALIZATION_DATA__ || {};
+  const steps = DATA.steps || [];
+  const direction = DATA.direction || 'horizontal';
+  const count = steps.length;
+  if (DATA.title) document.getElementById('vizTitle').textContent = DATA.title;
+  if (DATA.subtitle) document.getElementById('vizSubtitle').textContent = DATA.subtitle;
+  const container = document.getElementById('flowContainer');
+  if (direction === 'vertical') container.classList.add('vertical');
+  // Auto-size steps based on count and viewport
+  const maxStepWidth = Math.min(220, Math.floor((window.innerWidth - 80 - (count - 1) * 28) / count));
+  // Sequential animation: step1 → arrow1 → step2 → arrow2 → step3 ...
+  const baseDelay = 0.2; // seconds
+  const stepDuration = 0.3; // time between each element appearing
+  steps.forEach((step, i) => {
+    const elementIndex = i * 2; // step0=0, arrow0=1, step1=2, arrow1=3, step2=4...
+    if (i > 0) {
+      const arrowIndex = (i * 2) - 1;
+      const arrow = document.createElement('div');
+      arrow.className = 'arrow';
+      arrow.style.animationDelay = (baseDelay + arrowIndex * stepDuration) + 's';
+      arrow.innerHTML = '<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+      container.appendChild(arrow);
+    }
+    const el = document.createElement('div');
+    el.className = 'step';
+    el.style.maxWidth = maxStepWidth + 'px';
+    el.style.animationDelay = (baseDelay + elementIndex * stepDuration) + 's';
+    el.innerHTML = `
+      <div class="step-badge">${step.number || i + 1}</div>
+      <div class="step-screenshot">
+        <img src="${step.imageUrl}" alt="Step ${i + 1}">
+      </div>
+      <div class="step-label">${step.label || ''}</div>
+    `;
+    container.appendChild(el);
+  });
+</script>
+</body>
+</html>