npm - @slycode/slycode - Versions diffs - 0.1.19 → 0.2.0 - Mend

@slycode/slycode 0.1.19 → 0.2.0

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

package/dist/store/skills/interactive-explainer/assets/base_template.html DELETED Viewed

@@ -1,780 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{TITLE}} - Interactive Explainer</title>
-    <!-- Core Libraries -->
-    <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
-    <script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
-    <script src="https://d3js.org/d3.v7.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
-    <!-- Code Highlighting -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-typescript.min.js"></script>
-    <!-- Icons -->
-    <script src="https://unpkg.com/lucide@latest"></script>
-    <style>
-        /* ========== CSS Variables ========== */
-        :root {
-            --primary: #00d4ff;
-            --primary-dim: #00a3c7;
-            --secondary: #ff6b6b;
-            --accent: #4ecdc4;
-            --warning: #f7dc6f;
-            --success: #2ecc71;
-            --background: #0a0a0f;
-            --surface: #1a1a2e;
-            --surface-light: #252542;
-            --text: #e0e0e0;
-            --text-dim: #888888;
-            --border: #333355;
-            --glow: rgba(0, 212, 255, 0.3);
-            --font-main: 'Segoe UI', system-ui, sans-serif;
-            --font-mono: 'Fira Code', 'Consolas', monospace;
-            --transition: 0.3s ease;
-            --radius: 8px;
-            --radius-lg: 12px;
-        }
-        /* ========== Reset & Base ========== */
-        *, *::before, *::after {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
-        }
-        html {
-            scroll-behavior: smooth;
-        }
-        body {
-            font-family: var(--font-main);
-            background: var(--background);
-            color: var(--text);
-            line-height: 1.6;
-            min-height: 100vh;
-        }
-        /* ========== Layout ========== */
-        .app-container {
-            display: flex;
-            flex-direction: column;
-            min-height: 100vh;
-        }
-        /* ========== Navigation ========== */
-        .nav-header {
-            position: sticky;
-            top: 0;
-            z-index: 100;
-            background: linear-gradient(180deg, var(--surface) 0%, rgba(26, 26, 46, 0.95) 100%);
-            border-bottom: 1px solid var(--border);
-            backdrop-filter: blur(10px);
-        }
-        .nav-content {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 1rem 2rem;
-            max-width: 1400px;
-            margin: 0 auto;
-        }
-        .nav-title {
-            font-size: 1.25rem;
-            font-weight: 600;
-            color: var(--primary);
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-        .nav-sections {
-            display: flex;
-            gap: 0.5rem;
-        }
-        .nav-btn {
-            padding: 0.5rem 1rem;
-            background: transparent;
-            border: 1px solid transparent;
-            color: var(--text-dim);
-            border-radius: var(--radius);
-            cursor: pointer;
-            transition: var(--transition);
-            font-size: 0.875rem;
-        }
-        .nav-btn:hover {
-            color: var(--text);
-            background: var(--surface-light);
-        }
-        .nav-btn.active {
-            color: var(--primary);
-            border-color: var(--primary);
-            background: rgba(0, 212, 255, 0.1);
-        }
-        .nav-controls {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-        }
-        .btn-nav {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            padding: 0.5rem 1rem;
-            background: var(--surface-light);
-            border: 1px solid var(--border);
-            color: var(--text);
-            border-radius: var(--radius);
-            cursor: pointer;
-            transition: var(--transition);
-        }
-        .btn-nav:hover:not(:disabled) {
-            background: var(--primary);
-            color: var(--background);
-            border-color: var(--primary);
-        }
-        .btn-nav:disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-        }
-        .section-counter {
-            color: var(--text-dim);
-            font-size: 0.875rem;
-            min-width: 60px;
-            text-align: center;
-        }
-        /* ========== Main Content ========== */
-        .main-content {
-            flex: 1;
-            padding: 2rem;
-            max-width: 1400px;
-            margin: 0 auto;
-            width: 100%;
-        }
-        /* ========== Sections ========== */
-        .section {
-            display: none;
-            animation: fadeIn 0.5s ease;
-        }
-        .section.active {
-            display: block;
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        .section-header {
-            margin-bottom: 2rem;
-        }
-        .section-title {
-            font-size: 2rem;
-            font-weight: 700;
-            color: var(--text);
-            margin-bottom: 0.5rem;
-        }
-        .section-subtitle {
-            font-size: 1.125rem;
-            color: var(--text-dim);
-        }
-        /* ========== Visualization Containers ========== */
-        .viz-container {
-            background: var(--surface);
-            border: 1px solid var(--border);
-            border-radius: var(--radius-lg);
-            padding: 1.5rem;
-            margin-bottom: 2rem;
-        }
-        .viz-full {
-            height: 500px;
-            position: relative;
-        }
-        .viz-split {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 1.5rem;
-        }
-        .viz-with-sidebar {
-            display: grid;
-            grid-template-columns: 1fr 300px;
-            gap: 1.5rem;
-        }
-        /* ========== Cards ========== */
-        .card {
-            background: var(--surface);
-            border: 1px solid var(--border);
-            border-radius: var(--radius);
-            padding: 1.5rem;
-            transition: var(--transition);
-        }
-        .card:hover {
-            border-color: var(--primary);
-            box-shadow: 0 0 20px var(--glow);
-        }
-        .card-title {
-            font-size: 1.125rem;
-            font-weight: 600;
-            margin-bottom: 0.5rem;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-        .card-title i {
-            color: var(--primary);
-        }
-        .card-content {
-            color: var(--text-dim);
-            font-size: 0.9375rem;
-        }
-        /* ========== Grid Layouts ========== */
-        .grid-2 {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 1.5rem;
-        }
-        .grid-3 {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 1.5rem;
-        }
-        .grid-4 {
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 1rem;
-        }
-        /* ========== Code Blocks ========== */
-        .code-block {
-            background: #1e1e1e;
-            border-radius: var(--radius);
-            overflow: hidden;
-            margin: 1rem 0;
-        }
-        .code-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 0.5rem 1rem;
-            background: #2d2d2d;
-            border-bottom: 1px solid #404040;
-        }
-        .code-filename {
-            font-family: var(--font-mono);
-            font-size: 0.8125rem;
-            color: var(--text-dim);
-        }
-        .code-copy {
-            background: transparent;
-            border: none;
-            color: var(--text-dim);
-            cursor: pointer;
-            padding: 0.25rem 0.5rem;
-            border-radius: 4px;
-            transition: var(--transition);
-        }
-        .code-copy:hover {
-            color: var(--primary);
-            background: rgba(0, 212, 255, 0.1);
-        }
-        .code-block pre {
-            margin: 0;
-            padding: 1rem;
-            overflow-x: auto;
-        }
-        .code-block code {
-            font-family: var(--font-mono);
-            font-size: 0.875rem;
-        }
-        /* ========== Tables ========== */
-        .data-table {
-            width: 100%;
-            border-collapse: collapse;
-            margin: 1rem 0;
-        }
-        .data-table th,
-        .data-table td {
-            padding: 0.75rem 1rem;
-            text-align: left;
-            border-bottom: 1px solid var(--border);
-        }
-        .data-table th {
-            background: var(--surface-light);
-            font-weight: 600;
-            color: var(--primary);
-        }
-        .data-table tr:hover td {
-            background: rgba(0, 212, 255, 0.05);
-        }
-        /* ========== Badges & Tags ========== */
-        .badge {
-            display: inline-flex;
-            align-items: center;
-            padding: 0.25rem 0.75rem;
-            border-radius: 100px;
-            font-size: 0.75rem;
-            font-weight: 500;
-        }
-        .badge-primary {
-            background: rgba(0, 212, 255, 0.2);
-            color: var(--primary);
-        }
-        .badge-secondary {
-            background: rgba(255, 107, 107, 0.2);
-            color: var(--secondary);
-        }
-        .badge-accent {
-            background: rgba(78, 205, 196, 0.2);
-            color: var(--accent);
-        }
-        /* ========== Lists ========== */
-        .feature-list {
-            list-style: none;
-        }
-        .feature-list li {
-            padding: 0.75rem 0;
-            border-bottom: 1px solid var(--border);
-            display: flex;
-            align-items: flex-start;
-            gap: 0.75rem;
-        }
-        .feature-list li:last-child {
-            border-bottom: none;
-        }
-        .feature-list i {
-            color: var(--accent);
-            margin-top: 0.25rem;
-        }
-        /* ========== Detail Panel (Sidebar) ========== */
-        .detail-panel {
-            position: fixed;
-            right: -400px;
-            top: 0;
-            width: 400px;
-            height: 100vh;
-            background: var(--surface);
-            border-left: 1px solid var(--border);
-            transition: right 0.3s ease;
-            z-index: 200;
-            overflow-y: auto;
-        }
-        .detail-panel.open {
-            right: 0;
-        }
-        .panel-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 1.5rem;
-            border-bottom: 1px solid var(--border);
-            position: sticky;
-            top: 0;
-            background: var(--surface);
-        }
-        .panel-title {
-            font-size: 1.25rem;
-            font-weight: 600;
-        }
-        .panel-close {
-            background: transparent;
-            border: none;
-            color: var(--text-dim);
-            font-size: 1.5rem;
-            cursor: pointer;
-            padding: 0.25rem;
-            line-height: 1;
-        }
-        .panel-close:hover {
-            color: var(--secondary);
-        }
-        .panel-content {
-            padding: 1.5rem;
-        }
-        /* ========== Mermaid Diagrams ========== */
-        .mermaid {
-            background: transparent;
-        }
-        /* Container for scaled mermaid diagrams */
-        .mermaid-container {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding: 4rem 2rem;
-            min-height: 250px;
-        }
-        .mermaid-container .mermaid {
-            transform: scale(2.5);
-            transform-origin: center center;
-        }
-        /* Make arrows/edges more visible */
-        .mermaid-container .mermaid .flowchart-link {
-            stroke-width: 3px !important;
-        }
-        .mermaid-container .mermaid path.path {
-            stroke-width: 3px !important;
-        }
-        /* ========== vis.js Network ========== */
-        .network-container {
-            width: 100%;
-            height: 100%;
-            background: var(--background);
-            border-radius: var(--radius);
-        }
-        /* ========== Progress Indicator ========== */
-        .progress-bar {
-            height: 4px;
-            background: var(--surface-light);
-            border-radius: 2px;
-            overflow: hidden;
-            margin-top: 0.5rem;
-        }
-        .progress-fill {
-            height: 100%;
-            background: linear-gradient(90deg, var(--primary), var(--accent));
-            transition: width 0.3s ease;
-        }
-        /* ========== Tooltips ========== */
-        .tooltip {
-            position: absolute;
-            background: var(--surface);
-            border: 1px solid var(--border);
-            border-radius: var(--radius);
-            padding: 0.75rem 1rem;
-            font-size: 0.875rem;
-            max-width: 300px;
-            z-index: 1000;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-            pointer-events: none;
-        }
-        /* ========== Animations ========== */
-        .pulse {
-            animation: pulse 2s infinite;
-        }
-        @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.5; }
-        }
-        .glow {
-            box-shadow: 0 0 20px var(--glow);
-        }
-        /* ========== Responsive ========== */
-        @media (max-width: 1024px) {
-            .viz-with-sidebar {
-                grid-template-columns: 1fr;
-            }
-            .grid-3 {
-                grid-template-columns: repeat(2, 1fr);
-            }
-            .grid-4 {
-                grid-template-columns: repeat(2, 1fr);
-            }
-        }
-        @media (max-width: 768px) {
-            .nav-content {
-                flex-direction: column;
-                gap: 1rem;
-            }
-            .nav-sections {
-                flex-wrap: wrap;
-                justify-content: center;
-            }
-            .grid-2, .grid-3, .grid-4 {
-                grid-template-columns: 1fr;
-            }
-            .viz-full {
-                height: 350px;
-            }
-            .viz-split {
-                grid-template-columns: 1fr;
-            }
-            .detail-panel {
-                width: 100%;
-                right: -100%;
-            }
-        }
-        /* ========== Print Styles ========== */
-        @media print {
-            .nav-header, .nav-controls {
-                display: none;
-            }
-            .section {
-                display: block !important;
-                page-break-inside: avoid;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div class="app-container">
-        <!-- Navigation Header -->
-        <header class="nav-header">
-            <div class="nav-content">
-                <div class="nav-title">
-                    <i data-lucide="book-open"></i>
-                    <span>{{TITLE}}</span>
-                </div>
-                <nav class="nav-sections" id="navSections">
-                    <!-- Populated by JavaScript -->
-                </nav>
-                <div class="nav-controls">
-                    <button class="btn-nav" id="btnPrev" disabled>
-                        <i data-lucide="chevron-left"></i>
-                        Previous
-                    </button>
-                    <span class="section-counter" id="sectionCounter">1 / 1</span>
-                    <button class="btn-nav" id="btnNext">
-                        Next
-                        <i data-lucide="chevron-right"></i>
-                    </button>
-                </div>
-            </div>
-            <div class="progress-bar">
-                <div class="progress-fill" id="progressFill" style="width: 0%"></div>
-            </div>
-        </header>
-        <!-- Main Content Area -->
-        <main class="main-content">
-            <!-- SECTIONS GO HERE -->
-            {{SECTIONS}}
-        </main>
-        <!-- Detail Panel (Sidebar) -->
-        <aside class="detail-panel" id="detailPanel">
-            <div class="panel-header">
-                <h3 class="panel-title" id="panelTitle">Details</h3>
-                <button class="panel-close" id="panelClose">&times;</button>
-            </div>
-            <div class="panel-content" id="panelContent">
-                <!-- Dynamic content -->
-            </div>
-        </aside>
-    </div>
-    <script>
-        // ========== Initialize Libraries ==========
-        // IMPORTANT: startOnLoad must be false because sections are hidden (display:none)
-        // Mermaid cannot render into hidden elements - we manually trigger rendering
-        mermaid.initialize({
-            startOnLoad: false,
-            theme: 'dark',
-            themeVariables: {
-                primaryColor: '#00d4ff',
-                primaryTextColor: '#e0e0e0',
-                primaryBorderColor: '#333355',
-                lineColor: '#888888',
-                secondaryColor: '#1a1a2e',
-                tertiaryColor: '#252542'
-            }
-        });
-        lucide.createIcons();
-        // ========== Section Navigation ==========
-        const sections = document.querySelectorAll('.section');
-        const navSections = document.getElementById('navSections');
-        const btnPrev = document.getElementById('btnPrev');
-        const btnNext = document.getElementById('btnNext');
-        const sectionCounter = document.getElementById('sectionCounter');
-        const progressFill = document.getElementById('progressFill');
-        let currentSection = 0;
-        // Build navigation buttons
-        sections.forEach((section, index) => {
-            const title = section.dataset.title || `Section ${index + 1}`;
-            const btn = document.createElement('button');
-            btn.className = 'nav-btn' + (index === 0 ? ' active' : '');
-            btn.textContent = title;
-            btn.dataset.section = index;
-            btn.addEventListener('click', () => goToSection(index));
-            navSections.appendChild(btn);
-        });
-        function goToSection(index) {
-            if (index < 0 || index >= sections.length) return;
-            // Update sections
-            sections.forEach((s, i) => s.classList.toggle('active', i === index));
-            // Update nav buttons
-            document.querySelectorAll('.nav-btn').forEach((btn, i) => {
-                btn.classList.toggle('active', i === index);
-            });
-            // Update controls
-            currentSection = index;
-            btnPrev.disabled = index === 0;
-            btnNext.disabled = index === sections.length - 1;
-            sectionCounter.textContent = `${index + 1} / ${sections.length}`;
-            progressFill.style.width = `${((index + 1) / sections.length) * 100}%`;
-            // Scroll to top
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-            // Re-render mermaid diagrams in the newly visible section
-            // Mermaid can't render into hidden elements, so we render when section becomes visible
-            const activeSection = sections[index];
-            const mermaidDivs = activeSection.querySelectorAll('.mermaid');
-            mermaidDivs.forEach(el => {
-                if (el.querySelector('svg')) return; // Already rendered
-                const code = el.textContent;
-                el.innerHTML = code;
-                mermaid.run({ nodes: [el] });
-            });
-        }
-        btnPrev.addEventListener('click', () => goToSection(currentSection - 1));
-        btnNext.addEventListener('click', () => goToSection(currentSection + 1));
-        // Keyboard navigation
-        document.addEventListener('keydown', (e) => {
-            if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
-                goToSection(currentSection + 1);
-            } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
-                goToSection(currentSection - 1);
-            }
-        });
-        // ========== Detail Panel ==========
-        const detailPanel = document.getElementById('detailPanel');
-        const panelTitle = document.getElementById('panelTitle');
-        const panelContent = document.getElementById('panelContent');
-        const panelClose = document.getElementById('panelClose');
-        function showDetail(title, content) {
-            panelTitle.textContent = title;
-            panelContent.innerHTML = content;
-            detailPanel.classList.add('open');
-            lucide.createIcons();
-        }
-        function hideDetail() {
-            detailPanel.classList.remove('open');
-        }
-        panelClose.addEventListener('click', hideDetail);
-        // Close panel on escape
-        document.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape') hideDetail();
-        });
-        // Close panel on click outside
-        document.addEventListener('click', (e) => {
-            if (detailPanel.classList.contains('open') &&
-                !detailPanel.contains(e.target) &&
-                !e.target.closest('[data-detail]')) {
-                hideDetail();
-            }
-        });
-        // ========== Code Copy Functionality ==========
-        document.querySelectorAll('.code-copy').forEach(btn => {
-            btn.addEventListener('click', () => {
-                const code = btn.closest('.code-block').querySelector('code').textContent;
-                navigator.clipboard.writeText(code).then(() => {
-                    const originalText = btn.textContent;
-                    btn.textContent = 'Copied!';
-                    setTimeout(() => btn.textContent = originalText, 2000);
-                });
-            });
-        });
-        // ========== Initialize First Section ==========
-        goToSection(0);
-        // ========== Custom Initialization (for specific visualizations) ==========
-        // Add your visualization initialization code here
-        // Example: initNetwork(), initChart(), etc.
-    </script>
-</body>
-</html>