npm - @caoscompanybr/merlin - Versions diffs - 3.5.0 - Mend

@caoscompanybr/merlin 3.5.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 (762) hide show

package/.merlin-core/skills/general/blkskrn/references/html-templates.md ADDED Viewed

@@ -0,0 +1,440 @@
+# HTML Templates — Standalone Slide Construction
+How to build self-contained HTML slide files for the local canvas system.
+---
+## Base Slide Structure
+Every slide follows this structure. The design system CSS is inlined directly.
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1440, height=810" />
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      :root {
+        --mc-bg-base: #06080f;
+        --mc-bg-surface: #0c1018;
+        --mc-bg-card: #111622;
+        --mc-bg-elevated: #182034;
+        --mc-text-primary: #f0f4f8;
+        --mc-text-secondary: #94a3b8;
+        --mc-text-tertiary: #64748b;
+        --mc-text-muted: #475569;
+        --mc-accent: #7dd3fc;
+        --mc-accent-dim: rgba(125, 211, 252, 0.12);
+        --mc-info: #a78bfa;
+        --mc-success: #34d399;
+        --mc-warning: #fbbf24;
+        --mc-danger: #f87171;
+        --mc-border: #1e293b;
+        --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
+        --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+      }
+      body {
+        background: var(--mc-bg-base);
+        font-family:
+          "Inter",
+          system-ui,
+          -apple-system,
+          sans-serif;
+        color: var(--mc-text-primary);
+        overflow: hidden;
+        width: 100vw;
+        height: 100vh;
+        -webkit-font-smoothing: antialiased;
+      }
+      /* Layout */
+      .slide {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        overflow: hidden;
+      }
+      .slide-pad {
+        padding: 56px 64px;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+      }
+      .center {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+      .split {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 32px;
+        flex: 1;
+      }
+      .grid-2 {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 16px;
+      }
+      .grid-3 {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 16px;
+      }
+      .grid-4 {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 16px;
+      }
+      .row {
+        display: flex;
+        gap: 16px;
+      }
+      /* Brand */
+      .brand-line {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 3px;
+        background: linear-gradient(
+          90deg,
+          #7dd3fc 0%,
+          #a78bfa 50%,
+          #7dd3fc 100%
+        );
+      }
+      .slide-num {
+        position: absolute;
+        bottom: 24px;
+        right: 32px;
+        font-size: 11px;
+        color: var(--mc-text-muted);
+        font-weight: 500;
+        font-family: "JetBrains Mono", monospace;
+      }
+      .slide-footer {
+        position: absolute;
+        bottom: 24px;
+        left: 64px;
+        font-size: 10px;
+        color: var(--mc-text-muted);
+      }
+      /* Typography */
+      .section-label {
+        font-size: 10px;
+        font-weight: 700;
+        letter-spacing: 0.15em;
+        text-transform: uppercase;
+        color: var(--mc-accent);
+        margin-bottom: 8px;
+      }
+      .slide-title {
+        font-size: 32px;
+        font-weight: 800;
+        letter-spacing: -0.02em;
+        margin-bottom: 6px;
+      }
+      .slide-subtitle {
+        font-size: 14px;
+        color: var(--mc-text-secondary);
+        margin-bottom: 32px;
+      }
+      .hero-title {
+        font-size: 52px;
+        font-weight: 800;
+        letter-spacing: -0.03em;
+      }
+      .text-gradient {
+        background: linear-gradient(
+          135deg,
+          #f0f4f8 0%,
+          #7dd3fc 60%,
+          #a78bfa 100%
+        );
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+      }
+      /* Cards */
+      .feat-card {
+        background: var(--mc-bg-card);
+        border: 1px solid var(--mc-border);
+        border-radius: 10px;
+        padding: 20px;
+      }
+      .feat-card-accent {
+        background: var(--mc-bg-card);
+        border: 1px solid var(--mc-border);
+        border-radius: 10px;
+        padding: 20px;
+        border-top: 2px solid var(--mc-accent);
+      }
+      .card-title {
+        font-size: 14px;
+        font-weight: 700;
+        margin-bottom: 6px;
+      }
+      .card-body {
+        font-size: 11px;
+        color: var(--mc-text-tertiary);
+        line-height: 1.5;
+      }
+      .stat-card {
+        background: var(--mc-bg-card);
+        border: 1px solid var(--mc-border);
+        border-radius: 8px;
+        padding: 16px;
+        text-align: center;
+      }
+      .stat-value {
+        font-size: 32px;
+        font-weight: 800;
+        color: var(--mc-accent);
+        font-variant-numeric: tabular-nums;
+      }
+      .stat-label {
+        font-size: 10px;
+        color: var(--mc-text-muted);
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        margin-top: 4px;
+      }
+      /* Badges */
+      .badge {
+        display: inline-flex;
+        padding: 4px 12px;
+        border-radius: 16px;
+        font-size: 11px;
+        font-weight: 600;
+      }
+      .badge-crystal {
+        background: rgba(125, 211, 252, 0.15);
+        color: #7dd3fc;
+        border: 1px solid rgba(125, 211, 252, 0.3);
+      }
+      .badge-violet {
+        background: rgba(167, 139, 250, 0.15);
+        color: #a78bfa;
+        border: 1px solid rgba(167, 139, 250, 0.3);
+      }
+      .badge-emerald {
+        background: rgba(52, 211, 153, 0.15);
+        color: #34d399;
+        border: 1px solid rgba(52, 211, 153, 0.3);
+      }
+      /* Animations */
+      .slide-up {
+        opacity: 0;
+        transform: translateY(24px);
+        animation: slideUp 0.4s var(--ease-enter) forwards;
+      }
+      @keyframes slideUp {
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        *,
+        *::before,
+        *::after {
+          animation-duration: 0.01ms !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="slide">
+      <div class="brand-line"></div>
+      <div class="slide-pad">
+        <!-- YOUR CONTENT HERE -->
+      </div>
+      <span class="slide-num">01 / 01</span>
+    </div>
+  </body>
+</html>
+```
+---
+## Minimal Slide (Copy-Paste Ready)
+**IMPORTANT:** Do NOT use this minimal boilerplate for production slides. Use the
+full `slide-base.html` template instead. This compact version is only for quick
+prototyping — it lacks ambient effects, animations, and full-screen utilities
+that are MANDATORY for production quality.
+For production slides, always:
+1. Copy `templates/slide-base.html` as your starting point
+2. Add ambient layers (orbs, grid-bg) inside `.slide`
+3. Add `slide-up` / `slide-up-stagger` to all content
+4. Use `flex:1;align-content:center` to fill the screen
+5. Use `animateCounter()` for any numbers
+```html
+<!-- PROTOTYPE ONLY — not for final presentations -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap");
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      :root {
+        --bg: #06080f;
+        --card: #111622;
+        --accent: #7dd3fc;
+        --info: #a78bfa;
+        --ok: #34d399;
+        --t1: #f0f4f8;
+        --t2: #94a3b8;
+        --t3: #64748b;
+        --bdr: #1e293b;
+        --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
+      }
+      body {
+        background: var(--bg);
+        font-family: Inter, system-ui, sans-serif;
+        color: var(--t1);
+        overflow: hidden;
+        width: 100vw;
+        height: 100vh;
+      }
+      .s {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        overflow: hidden;
+      }
+      .p {
+        padding: 56px 64px;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        z-index: 1;
+      }
+      .bl {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 3px;
+        background: linear-gradient(90deg, #7dd3fc, #a78bfa, #7dd3fc);
+        transform: scaleX(0);
+        transform-origin: left;
+        animation: sweep 1.2s var(--ease-enter) 0.2s forwards;
+      }
+      .gb {
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        background-image:
+          linear-gradient(rgba(125, 211, 252, 0.03) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(125, 211, 252, 0.03) 1px, transparent 1px);
+        background-size: 60px 60px;
+      }
+      .orb {
+        position: absolute;
+        border-radius: 50%;
+        pointer-events: none;
+        filter: blur(80px);
+        opacity: 0;
+        animation: orb 2s ease-out forwards;
+      }
+      .sn {
+        position: absolute;
+        bottom: 24px;
+        right: 32px;
+        font-size: 11px;
+        color: var(--t3);
+      }
+      .su {
+        opacity: 0;
+        transform: translateY(24px);
+        animation: su 0.4s var(--ease-enter) forwards;
+      }
+      @keyframes sweep {
+        to {
+          transform: scaleX(1);
+        }
+      }
+      @keyframes orb {
+        0% {
+          opacity: 0;
+          transform: scale(0.5);
+        }
+        100% {
+          opacity: 1;
+          transform: scale(1);
+        }
+      }
+      @keyframes su {
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="s">
+      <div class="bl"></div>
+      <div class="gb"></div>
+      <div
+        class="orb"
+        style="width:300px;height:300px;top:-80px;right:-60px;background:radial-gradient(circle,rgba(125,211,252,0.12),transparent 70%);"
+      ></div>
+      <div class="p">
+        <!-- CONTENT (use .su class for animations) -->
+      </div>
+      <span class="sn">01</span>
+    </div>
+  </body>
+</html>
+```
+---
+## Adapting for Project Themes
+When recreating a specific project's UI, override the root tokens:
+```css
+:root {
+  --mc-bg-base: #0a0a0a; /* from project's --surface */
+  --mc-bg-card: #1e1e1e; /* from project's --surface-overlay */
+  --mc-accent: #7dd3fc; /* from project's primary color */
+}
+```
+Read the target project's CSS files (`index.css`, `tailwind.config`, `globals.css`)
+to extract actual values.

package/.merlin-core/skills/general/blkskrn/references/presenter-template.md ADDED Viewed

@@ -0,0 +1,45 @@
+# Presenter Template — Reference
+The presenter is a self-contained HTML file that wraps all slides with
+keyboard navigation, fullscreen support, and navigation dots. It is
+generated automatically by `canvas-manager.js build`.
+## How It Works
+1. Each slide's HTML is extracted (the `<body>` inner content)
+2. Slides are wrapped as `<section class="slide-section">` elements
+3. Only the current slide is visible (`display: block`)
+4. Vanilla JS handles keyboard events and dot navigation
+5. The file is completely standalone — no servers, no network
+## Controls
+| Key                 | Action            |
+| ------------------- | ----------------- |
+| `→` / `↓` / `Space` | Next slide        |
+| `←` / `↑`           | Previous slide    |
+| `F`                 | Toggle fullscreen |
+| `Escape`            | Exit fullscreen   |
+| `Home`              | First slide       |
+| `End`               | Last slide        |
+Dots at the bottom are clickable for direct navigation.
+## Template Tokens
+The `presenter.html` template uses these tokens replaced at build time:
+| Token                | Replaced With                    |
+| -------------------- | -------------------------------- |
+| `{{CANVAS_NAME}}`    | Canvas name from canvas.json     |
+| `{{SLIDE_COUNT}}`    | Total number of slides           |
+| `{{SLIDES_CONTENT}}` | All slide sections concatenated  |
+| `{{DOTS_HTML}}`      | Navigation dot `<span>` elements |
+## Customization
+The presenter inherits the Merlin dark theme. To customize:
+- Background color: modify `--pres-bg` in the template
+- Dot colors: modify `--pres-dot` and `--pres-dot-active`
+- Transition speed: modify the CSS transition on `.slide-section`