@stonedeck/core 0.7.2 → 0.7.5

package/src/themes/default_v2.yaml

@@ -0,0 +1,58 @@
+name: "Default Theme V2"
+tokens:
+  colors:
+    primary: "#FFFFFF"
+    secondary: "#F0F0F0"
+    accent: "#007BFF"
+    surface: "#FFFFFF"
+    text: "#000000"
+    heading: "#000000"
+    muted: "#666666"
+    
+    # Variant colors
+    kind1_bg: "#E8F4F8"
+    kind2_bg: "#FFF5E6"
+    kind3_bg_start: "#1a2a6c"
+    kind3_bg_mid: "#b21f1f"
+    kind3_bg_end: "#fdbb2d"
+
+  fonts:
+    heading: "Inter"
+    body: "Roboto"
+    mono: "Courier New"
+    serif: "Merriweather"
+    slab: "Roboto Slab"
+
+defaults:
+  background:
+    type: "color"
+    value: "surface"
+  color: "text"
+  font_family: "body"
+  font_size: 18
+  content_align:
+    horizontal: "left"
+    vertical: "top"
+
+variants:
+  kind_1:
+    background:
+      type: "color"
+      value: "kind1_bg"
+    font_family: "slab"
+    color: "accent"
+  
+  kind_2:
+    background:
+      type: "color"
+      value: "kind2_bg"
+    font_family: "serif"
+    color: "text"
+
+  kind_3:
+    background:
+      type: "gradient"
+      colors: ["kind3_bg_start", "kind3_bg_mid", "kind3_bg_end"]
+      direction: "135deg"
+    font_family: "heading"
+    color: "primary" # Light text for dark gradient

package/src/themes/minimalista_v2.yaml

@@ -0,0 +1,56 @@
+name: "Minimalista V2"
+tokens:
+  colors:
+    primary: "#000000"
+    secondary: "#ffffff"
+    accent: "#000000"
+    surface: "#ffffff"
+    text: "#333333"
+    heading: "#000000"
+    muted: "#555555"
+    
+    # Variants
+    kind1_bg: "#F9F9F9" # Nearly white
+    kind2_bg: "#EFEFEF" # Light grey
+
+  fonts:
+    heading: "Helvetica-Bold"
+    body: "Helvetica"
+    mono: "Courier New"
+    thin: "Helvetica-Light"
+
+defaults:
+  background:
+    type: "color"
+    value: "surface"
+  color: "text"
+  font_family: "body"
+  font_size: 24
+  content_align:
+    horizontal: "left"
+    vertical: "top"
+
+variants:
+  kind_1:
+    background:
+      type: "color"
+      value: "kind1_bg"
+    color: "primary"
+    font_family: "thin" # Ultra clean
+
+  kind_2:
+    background:
+      type: "color"
+      value: "kind2_bg"
+    color: "text"
+    font_align: "center" # Centered minimalism
+    content_align:
+      horizontal: "center"
+      vertical: "middle"
+
+  kind_3:
+    background:
+      type: "color"
+      value: "surface"
+    color: "accent"
+    font_family: "heading" # Bold statement

package/src/themes/moderno_v2.yaml

@@ -0,0 +1,56 @@
+name: "Moderno V2"
+tokens:
+  colors:
+    primary: "#2c3e50"
+    secondary: "#ecf0f1"
+    accent: "#3498db"
+    surface: "#f5f7fa"
+    text: "#34495e"
+    heading: "#2c3e50"
+    muted: "#7f8c8d"
+    quote_bg: "#e1f5fe"
+
+    # Variants
+    kind1_bg: "#FFFFFF"
+    kind2_bg_start: "#f5f7fa"
+    kind2_bg_end: "#c3cfe2"
+
+  fonts:
+    heading: "Helvetica-Bold"
+    body: "Helvetica"
+    mono: "Courier New"
+    futura: "Futura"
+
+defaults:
+  background:
+    type: "color"
+    value: "surface"
+  color: "text"
+  font_family: "body"
+  font_size: 20
+  content_align:
+    horizontal: "left"
+    vertical: "top"
+
+variants:
+  kind_1:
+    background:
+      type: "color"
+      value: "kind1_bg"
+    color: "accent"
+    font_family: "futura"
+
+  kind_2:
+    background:
+      type: "gradient"
+      colors: ["kind2_bg_start", "kind2_bg_end"]
+      direction: "135deg"
+    color: "primary"
+    font_family: "body"
+
+  kind_3:
+    background:
+      type: "color"
+      value: "primary" # Dark modern
+    color: "secondary" # Light text
+    font_family: "heading"

package/src/themes/tech_blue.yaml

@@ -0,0 +1,56 @@
+name: "Tech Blue"
+tokens:
+  colors:
+    primary: "#0056b3" # Standard Tech Blue
+    secondary: "#e3f2fd" # Light Blue background
+    accent: "#00c6ff" # Cyan accent
+    surface: "#ffffff"
+    text: "#2c3e50" # Dark Blue-Grey text
+    heading: "#0d47a1" # Deep Blue heading
+    muted: "#90a4ae"
+    
+    # Variant Specifics
+    kind2_bg: "#0d47a1" # Deep Blue for dark mode
+    kind2_text: "#e3f2fd"
+    kind3_bg_start: "#00c6ff"
+    kind3_bg_end: "#0072ff"
+
+  fonts:
+    heading: "Inter"
+    body: "Roboto"
+    mono: "Fira Code"
+    display: "Montserrat"
+
+defaults:
+  background:
+    type: "color"
+    value: "surface"
+  color: "text"
+  font_family: "body"
+  font_size: 20
+  content_align:
+    horizontal: "left"
+    vertical: "top"
+
+variants:
+  kind_1:
+    background:
+      type: "color"
+      value: "secondary"
+    color: "heading"
+    font_family: "display" # Modern Tech feel
+
+  kind_2:
+    background:
+      type: "color"
+      value: "kind2_bg"
+    color: "kind2_text"
+    font_family: "heading"
+
+  kind_3:
+    background:
+      type: "gradient"
+      colors: ["kind3_bg_start", "kind3_bg_end"]
+      direction: "135deg"
+    color: "surface"
+    font_family: "display"

package/test/verify_clipping.html

@@ -0,0 +1,338 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Verification Clipping</title>
+    <style>
+        :root {
+            --canvas-width: 720pt;
+            --canvas-height: 405pt;
+            --accent-color: #3b82f6;
+            --scale-factor: 1;
+        }
+
+        html, body { height: 100%; }
+
+        body { 
+            margin: 0; 
+            padding: 0; 
+            background-color: #1a1a1a; 
+            min-height: 100vh;
+            display: flex; 
+            flex-direction: column; 
+            align-items: center;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            transition: background-color 0.3s;
+            overflow-x: hidden;
+        }
+        
+        /* Presentation Mode */
+        body.presenting {
+            background-color: black;
+            overflow: hidden;
+        }
+
+        #presentation-container {
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            padding: 20px 0;
+            box-sizing: border-box;
+        }
+        
+        body.presenting #presentation-container {
+            padding: 0;
+        }
+
+        .slides-inner {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            align-items: center;
+            width: 100%;
+        }
+
+        body.presenting .slides-inner {
+            gap: 0;
+            width: auto;
+            height: 100%;
+            justify-content: center;
+        }
+        
+        .slide-wrapper {
+            position: relative;
+            width: var(--canvas-width);
+            height: var(--canvas-height);
+            transform-origin: top left;
+            transform: scale(var(--scale-factor));
+            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+            background-color: white;
+            overflow: hidden;
+            flex-shrink: 0;
+        }
+
+        body.presenting .slide-wrapper {
+            box-shadow: none;
+            display: none; /* Hide inactive */
+            /* Do NOT override transform or width/height. Keep them logical 720x405 and let scale work. */
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform-origin: center center;
+            transform: translate(-50%, -50%) scale(var(--scale-factor));
+        }
+
+        body.presenting .slide-wrapper.active {
+            display: block;
+        }
+
+        .slide {
+            position: absolute;
+            top: 0; 
+            left: 0;
+            width: 100%;
+            height: 100%;
+            box-sizing: border-box;
+            background-color: white; 
+            overflow: hidden;
+        }
+        
+        /* Slots */
+        .slot { 
+            position: absolute; 
+            display: flex; 
+            flex-direction: column; 
+            overflow: hidden; 
+            box-sizing: border-box;
+        }
+        .slot-title { font-weight: bold; }
+        
+        h1 { font-size: 1.6em; margin-bottom: 0.1em; margin-top: 0; line-height: 1.1; }
+        h2 { font-size: 1.3em; margin-bottom: 0.15em; margin-top: 0; line-height: 1.2; }
+        h3 { font-size: 1.1em; margin-bottom: 0.1em; margin-top: 0; line-height: 1.2; }
+        
+        ul { padding-left: 1.1em; margin: 0; list-style-type: disc; }
+        li { margin-bottom: 0.15em; line-height: 1.25; }
+        li::marker { color: var(--accent-color); }
+        
+        table { border-collapse: collapse; width: 100%; margin-top: 0.4em; }
+        td, th { border: 1pt solid #ccc; padding: 3pt 5pt; text-align: left; }
+        th { background: rgba(0,0,0,0.05); font-weight: bold; }
+        
+        img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; margin: auto; flex-shrink: 0; }
+        
+        .markdown-line { margin-bottom: 2pt; line-height: 1.35; }
+        p { margin: 0 0 3pt 0; }
+
+        /* Navigation */
+        #nav-bar {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(0, 0, 0, 0.8);
+            color: white;
+            padding: 10px 20px;
+            border-radius: 30px;
+            display: flex;
+            gap: 15px;
+            align-items: center;
+            z-index: 1000;
+            backdrop-filter: blur(10px);
+            opacity: 1;
+            transition: opacity 0.3s;
+        }
+
+        body.presenting #nav-bar {
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        body.presenting #nav-bar:hover {
+            opacity: 1;
+            pointer-events: auto;
+        }
+        
+        button {
+            background: transparent;
+            border: 1px solid rgba(255,255,255,0.3);
+            color: white;
+            padding: 5px 12px;
+            border-radius: 15px;
+            cursor: pointer;
+            font-size: 14px;
+        }
+        button:hover { background: var(--accent-color); border-color: var(--accent-color); }
+        
+        #slide-index { min-width: 60px; text-align: center; }
+
+        @media print {
+            @page {
+                size: 720pt 405pt;
+                margin: 0;
+            }
+            body { 
+                background: white; 
+                display: block; 
+                overflow: visible;
+                -webkit-print-color-adjust: exact;
+                print-color-adjust: exact;
+            }
+            #nav-bar { 
+                display: none !important; 
+            }
+            #presentation-container {
+                padding: 0 !important;
+                display: block !important;
+            }
+            .slides-inner {
+                display: block !important;
+                gap: 0 !important;
+            }
+            .slide-wrapper { 
+                display: block !important;
+                margin: 0 !important; 
+                padding: 0 !important;
+                box-shadow: none !important; 
+                page-break-after: always !important; 
+                break-after: page !important;
+                transform: none !important; 
+                width: 720pt !important; 
+                height: 405pt !important;
+                position: relative !important;
+                left: 0 !important;
+                top: 0 !important;
+                overflow: hidden !important;
+            }
+            .slide {
+                position: absolute !important;
+                width: 100% !important;
+                height: 100% !important;
+            }
+        }
+    </style>
+</head>
+<body id="body">
+    <div id="presentation-container">
+        <div class="slides-inner">
+            
+                <div class="slide-wrapper active" id="wrapper-0">
+                    <div class="slide" id="slide-0" style="background: #E8F4F8; color: #007BFF; font-family: Roboto Slab;">
+                        
+            <div class="slot" style="left: 50pt; top: 120pt; width: 620pt; height: 100pt; font-size: 18pt; line-height: normal; text-align: left; justify-content: flex-start; ">
+                <h1>Orquestrador de Leitura</h1>
+            </div>
+        
+            <div class="slot" style="left: 50pt; top: 230pt; width: 620pt; height: 125pt; font-size: 18pt; line-height: normal; text-align: left; justify-content: flex-start; ">
+                <h2>Arquitetura de Contrato Único e Inteligência de</h2>
+            </div>
+        
+                    </div>
+                </div>
+            
+        </div>
+    </div>
+
+    <div id="nav-bar">
+        <button onclick="togglePresent()">Present</button>
+        <button onclick="prevSlide()">Prev</button>
+        <span id="slide-index">1 / 1</span>
+        <button onclick="nextSlide()">Next</button>
+        <button onclick="toggleFS()">FS</button>
+    </div>
+
+    <script>
+        const totalSlides = 1;
+        const body = document.getElementById('body');
+        const wrappers = document.querySelectorAll('.slide-wrapper');
+        const indexSpan = document.getElementById('slide-index');
+        let currentIdx = 0;
+
+        function resize() {
+            const baseWidth = 960; 
+            const baseHeight = 540;
+            const isPresenting = body.classList.contains('presenting');
+            
+            const winW = window.innerWidth || document.documentElement.clientWidth || 1024;
+            const winH = window.innerHeight || document.documentElement.clientHeight || 768;
+            
+            const targetWidth = isPresenting ? winW : winW * 0.95;
+            const targetHeight = isPresenting ? winH : winH * 0.9;
+            
+            let scale = Math.min(targetWidth / baseWidth, targetHeight / baseHeight);
+            
+            if (!isPresenting) {
+                scale = Math.min(scale, 1);
+            }
+            if (scale <= 0.01) scale = 1;
+
+            document.documentElement.style.setProperty('--scale-factor', scale);
+            
+            wrappers.forEach(w => {
+                if (isPresenting) {
+                    w.style.height = ''; // Reset to CSS default (var(--canvas-height)) for proper aspect ratio scaling
+                } else {
+                    w.style.height = (baseHeight * scale) + 'px';
+                }
+            });
+        }
+
+        window.addEventListener('resize', resize);
+        window.addEventListener('DOMContentLoaded', resize);
+        window.addEventListener('load', resize);
+        resize();
+
+        function updateUI() {
+            indexSpan.innerText = (currentIdx + 1) + ' / ' + totalSlides;
+            wrappers.forEach((w, i) => {
+                w.classList.toggle('active', i === currentIdx);
+            });
+            
+            if (!body.classList.contains('presenting')) {
+                wrappers[currentIdx].scrollIntoView({ behavior: 'auto', block: 'center' });
+            }
+        }
+
+        function nextSlide() {
+            if (currentIdx < totalSlides - 1) {
+                currentIdx++;
+                updateUI();
+            }
+        }
+
+        function prevSlide() {
+            if (currentIdx > 0) {
+                currentIdx--;
+                updateUI();
+            }
+        }
+
+        function togglePresent() {
+            body.classList.toggle('presenting');
+            setTimeout(() => { resize(); updateUI(); }, 50);
+        }
+
+        function toggleFS() {
+            if (!document.fullscreenElement) {
+                body.requestFullscreen().catch(e => console.warn(e));
+            } else {
+                document.exitFullscreen();
+            }
+        }
+
+        window.addEventListener('keydown', (e) => {
+            if (['ArrowRight', ' ', 'PageDown', 'Enter'].includes(e.key)) { e.preventDefault(); nextSlide(); }
+            if (['ArrowLeft', 'PageUp', 'Backspace'].includes(e.key)) { e.preventDefault(); prevSlide(); }
+            if (e.key === 'p') togglePresent();
+            if (e.key === 'f') toggleFS();
+            if (e.key === 'Escape' && body.classList.contains('presenting')) togglePresent();
+        });
+    </script>
+    
+</body>
+</html>

package/test/verify_clipping.md

@@ -0,0 +1,14 @@
+---
+StoneDeck: true
+title: "Verification Clipping"
+theme: "../src/themes/default_v2.yaml"
+---
+
+:::slide
+---
+layout: title
+---
+# Orquestrador de Leitura
+*-*
+## Arquitetura de Contrato Único e Inteligência de
+:::

package/test/verify_theme.ts

@@ -0,0 +1,24 @@
+
+import { processStoneDeck } from '../src/processor.js';
+import * as fs from 'fs';
+import * as path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const mdPath = path.join(__dirname, 'verify_variants.md');
+const content = fs.readFileSync(mdPath, 'utf-8');
+
+const ir = processStoneDeck(content, mdPath);
+
+console.log("Manifesto Theme:", ir.manifesto.theme);
+
+ir.slides.forEach((slide, index) => {
+    console.log(`\n--- Slide ${index + 1} ---`);
+    console.log(`Variant Request: ${slide.variant}`);
+    // Check specific style properties we expect to change
+    const bg = slide.style.background;
+    console.log(`Background Value:`, bg?.value || bg);
+    console.log(`Font Family:`, slide.style.font_family);
+});

package/test/verify_theme_runner.js

@@ -0,0 +1,34 @@
+
+import { processStoneDeck } from '../dist/processor.js';
+import * as fs from 'fs';
+import * as path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const mdPath = path.join(__dirname, 'verify_clipping.md');
+const content = fs.readFileSync(mdPath, 'utf-8');
+
+const ir = processStoneDeck(content, mdPath);
+
+console.log("Manifesto Theme:", ir.manifesto.theme);
+
+ir.slides.forEach((slide, index) => {
+    console.log(`\n--- Slide ${index + 1} ---`);
+    console.log(`Layout: ${slide.layout_id}`);
+
+    // Check specific style properties we expect to change
+    const bg = slide.style.background;
+    console.log(`Background Value:`, bg ? (bg.value || bg) : 'undefined');
+    console.log(`Font Family:`, slide.style.font_family);
+
+    if (slide.warnings && slide.warnings.length > 0) {
+        console.log("WARNINGS:");
+        slide.warnings.forEach(w => console.log(`  - ${w}`));
+    } else {
+        console.log("No warnings.");
+    }
+
+
+});