clou-lang 0.3.6 → 0.4.0

package/playground/clou-browser.js

@@ -60,6 +60,17 @@ const TokenType = {
   CODE: 'CODE',
   SLIDER: 'SLIDER',
   SUBMIT: 'SUBMIT',
+  COUNTDOWN: 'COUNTDOWN',
+  TYPING: 'TYPING',
+  CAROUSEL: 'CAROUSEL',
+  EMBED: 'EMBED',
+  BADGE: 'BADGE',
+  AVATAR: 'AVATAR',
+  STARS: 'STARS',
+  SEARCH: 'SEARCH',
+  TOAST: 'TOAST',
+  TOOLTIP: 'TOOLTIP',
+  DARKMODE: 'DARKMODE',
 
   // Keywords - Actions
   SHOW: 'SHOW',
@@ -147,6 +158,9 @@ const TokenType = {
   FUNCTION: 'FUNCTION',
   CALL: 'CALL',
   RETURN: 'RETURN',
+  RANDOM: 'RANDOM',
+  FETCH: 'FETCH',
+  MENU: 'MENU',
   LPAREN: 'LPAREN',
   RPAREN: 'RPAREN',
   COMMA: 'COMMA',
@@ -202,6 +216,17 @@ const KEYWORDS = {
   'code': TokenType.CODE,
   'slider': TokenType.SLIDER,
   'submit': TokenType.SUBMIT,
+  'countdown': TokenType.COUNTDOWN,
+  'typing': TokenType.TYPING,
+  'carousel': TokenType.CAROUSEL,
+  'embed': TokenType.EMBED,
+  'badge': TokenType.BADGE,
+  'avatar': TokenType.AVATAR,
+  'stars': TokenType.STARS,
+  'search': TokenType.SEARCH,
+  'toast': TokenType.TOAST,
+  'tooltip': TokenType.TOOLTIP,
+  'darkmode': TokenType.DARKMODE,
   'show': TokenType.SHOW,
   'message': TokenType.MESSAGE,
   'hide': TokenType.HIDE,
@@ -281,6 +306,9 @@ const KEYWORDS = {
   'function': TokenType.FUNCTION,
   'call': TokenType.CALL,
   'return': TokenType.RETURN,
+  'random': TokenType.RANDOM,
+  'fetch': TokenType.FETCH,
+  'menu': TokenType.MENU,
   'import': TokenType.IMPORT,
   'at': TokenType.AT,
   'to': TokenType.TO,
@@ -1149,6 +1177,17 @@ class Parser {
       case TokenType.CODE: return this.parseCode();
       case TokenType.SLIDER: return this.parseSlider();
       case TokenType.SUBMIT: return this.parseSubmit();
+      case TokenType.COUNTDOWN: return this.parseCountdown();
+      case TokenType.TYPING: return this.parseTyping();
+      case TokenType.CAROUSEL: return this.parseCarousel();
+      case TokenType.EMBED: return this.parseEmbed();
+      case TokenType.BADGE: return this.parseBadge();
+      case TokenType.AVATAR: return this.parseAvatar();
+      case TokenType.STARS: return this.parseStars();
+      case TokenType.SEARCH: return this.parseSearch();
+      case TokenType.TOAST: return this.parseToast();
+      case TokenType.TOOLTIP: return this.parseTooltip();
+      case TokenType.DARKMODE: return this.parseDarkmode();
       case TokenType.SET: return this.parseSetVariable();
       case TokenType.USE: return this.parseUse();
       case TokenType.REPEAT: return this.parseRepeat();
@@ -1667,6 +1706,117 @@ class Parser {
     return { type: 'Submit', label };
   }
 
+  // countdown "2026-12-31"  OR  countdown "2026-12-31" "Event Name"
+  parseCountdown() {
+    this.expect(TokenType.COUNTDOWN);
+    const date = this.expect(TokenType.STRING).value;
+    let label = null;
+    if (this.peek() && this.peek().type === TokenType.STRING) {
+      label = this.advance().value;
+    }
+    return { type: 'Countdown', date, label };
+  }
+
+  // typing "Hello World"
+  parseTyping() {
+    this.expect(TokenType.TYPING);
+    const value = this.expect(TokenType.STRING).value;
+    return { type: 'Typing', value };
+  }
+
+  // carousel:
+  parseCarousel() {
+    this.expect(TokenType.CAROUSEL);
+    const node = { type: 'Carousel', children: [] };
+
+    if (this.peek() && this.peek().type === TokenType.COLON) {
+      this.advance();
+      this.skipNewlines();
+      node.children = this.parseBlock();
+    }
+
+    return node;
+  }
+
+  // embed "url"
+  parseEmbed() {
+    this.expect(TokenType.EMBED);
+    const url = this.expect(TokenType.STRING).value;
+    return { type: 'Embed', url };
+  }
+
+  // badge "text"
+  parseBadge() {
+    this.expect(TokenType.BADGE);
+    const value = this.expect(TokenType.STRING).value;
+    const node = { type: 'Badge', value, children: [] };
+
+    if (this.peek() && this.peek().type === TokenType.COLON) {
+      this.advance();
+      this.skipNewlines();
+      node.children = this.parseBlock();
+    }
+
+    return node;
+  }
+
+  // avatar "url"
+  parseAvatar() {
+    this.expect(TokenType.AVATAR);
+    const src = this.expect(TokenType.STRING).value;
+    const node = { type: 'Avatar', src, children: [] };
+
+    if (this.peek() && this.peek().type === TokenType.COLON) {
+      this.advance();
+      this.skipNewlines();
+      node.children = this.parseBlock();
+    }
+
+    return node;
+  }
+
+  // stars 4  OR  stars 4 "Rating"
+  parseStars() {
+    this.expect(TokenType.STARS);
+    const value = this.expect(TokenType.NUMBER).value;
+    let label = null;
+    if (this.peek() && this.peek().type === TokenType.STRING) {
+      label = this.advance().value;
+    }
+    return { type: 'Stars', value: parseInt(value, 10), label };
+  }
+
+  // search "placeholder"
+  parseSearch() {
+    this.expect(TokenType.SEARCH);
+    const placeholder = this.expect(TokenType.STRING).value;
+    return { type: 'Search', placeholder };
+  }
+
+  // toast "message" (as action inside button)
+  parseToast() {
+    this.expect(TokenType.TOAST);
+    const value = this.expect(TokenType.STRING).value;
+    return { type: 'Toast', value };
+  }
+
+  // tooltip "text" "hover text"
+  parseTooltip() {
+    this.expect(TokenType.TOOLTIP);
+    const text = this.expect(TokenType.STRING).value;
+    let tip = '';
+    if (this.peek() && this.peek().type === TokenType.STRING) {
+      tip = this.advance().value;
+    }
+    return { type: 'Tooltip', text, tip };
+  }
+
+  // darkmode
+  parseDarkmode() {
+    this.expect(TokenType.DARKMODE);
+    return { type: 'Darkmode' };
+  }
+
   // button "text":
   parseButton() {
     this.expect(TokenType.BUTTON);
@@ -2070,6 +2220,14 @@ class Compiler {
     this.hasAccordion = false;
     this.hasProgress = false;
     this.hasSlider = false;
+    this.hasCountdown = false;
+    this.hasTyping = false;
+    this.hasCarousel = false;
+    this.hasToast = false;
+    this.hasSearch = false;
+    this.hasTooltip = false;
+    this.hasDarkmode = false;
+    this.hasStars = false;
     this.hoverStyles = [];
     this.variables = {};
     this.templates = {};
@@ -2133,6 +2291,14 @@ class Compiler {
     const accordionCSS = this.hasAccordion ? this.buildAccordionCSS() : '';
     const progressCSS = this.hasProgress ? this.buildProgressCSS() : '';
     const sliderCSS = this.hasSlider ? this.buildSliderCSS() : '';
+    const countdownCSS = this.hasCountdown ? this.buildCountdownCSS() : '';
+    const typingCSS = this.hasTyping ? this.buildTypingCSS() : '';
+    const carouselCSS = this.hasCarousel ? this.buildCarouselCSS() : '';
+    const toastCSS = this.hasToast ? this.buildToastCSS() : '';
+    const searchCSS = this.hasSearch ? this.buildSearchCSS() : '';
+    const tooltipCSS = this.hasTooltip ? this.buildTooltipCSS() : '';
+    const darkmodeCSS = this.hasDarkmode ? this.buildDarkmodeCSS() : '';
+    const starsCSS = this.hasStars ? this.buildStarsCSS() : '';
     const hoverCSS = this.hoverStyles.join('\n');
     const themeCSS = this.activeTheme ? `\n  /* Theme: ${this.activeTheme.name} */\n${generateThemeCSS(this.activeTheme)}` : '';
 
@@ -2393,7 +2559,7 @@ class Compiler {
     opacity: 0.7;
     border-top: 1px solid rgba(128,128,128,0.2);
   }
-${navbarCSS}${modalCSS}${tabsCSS}${accordionCSS}${progressCSS}${sliderCSS}${animationCSS}${hoverCSS}${themeCSS}
+${navbarCSS}${modalCSS}${tabsCSS}${accordionCSS}${progressCSS}${sliderCSS}${countdownCSS}${typingCSS}${carouselCSS}${toastCSS}${searchCSS}${tooltipCSS}${darkmodeCSS}${starsCSS}${animationCSS}${hoverCSS}${themeCSS}
   </style>
 </head>
 <body>
@@ -2542,6 +2708,92 @@ ${scripts}
 `;
   }
 
+  buildCountdownCSS() {
+    const accent = this.buttonColorCSS || '#4A90D9';
+    return `
+  .clou-countdown { display: flex; gap: 16px; justify-content: center; margin: 16px 0; flex-wrap: wrap; }
+  .clou-countdown-label { width: 100%; text-align: center; font-size: 14px; opacity: 0.8; margin-bottom: 8px; }
+  .clou-countdown-unit { display: flex; flex-direction: column; align-items: center; padding: 16px 20px; background: rgba(128,128,128,0.1); border-radius: 12px; min-width: 80px; }
+  .clou-countdown-num { font-size: 2em; font-weight: 700; color: ${accent}; }
+  .clou-countdown-text { font-size: 12px; opacity: 0.7; text-transform: uppercase; letter-spacing: 1px; }
+`;
+  }
+
+  buildTypingCSS() {
+    return `
+  .clou-typing { overflow: hidden; border-right: 3px solid currentColor; white-space: nowrap; margin: 16px 0; font-size: 1.5em; font-weight: 600; animation: clou-typing-text 3s steps(40) 1s forwards, clou-typing-cursor 0.75s step-end infinite; width: 0; }
+  @keyframes clou-typing-text { from { width: 0; } to { width: 100%; } }
+  @keyframes clou-typing-cursor { 50% { border-color: transparent; } }
+`;
+  }
+
+  buildCarouselCSS() {
+    const accent = this.buttonColorCSS || '#4A90D9';
+    return `
+  .clou-carousel { position: relative; overflow: hidden; border-radius: 12px; margin: 16px 0; }
+  .clou-carousel-track { display: flex; transition: transform 0.5s ease; }
+  .clou-carousel-slide { min-width: 100%; }
+  .clou-carousel-slide img { width: 100%; height: auto; display: block; }
+  .clou-carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: white; border: none; padding: 12px 16px; cursor: pointer; font-size: 18px; border-radius: 50%; z-index: 10; transition: background 0.2s; }
+  .clou-carousel-btn:hover { background: ${accent}; transform: translateY(-50%) scale(1.05); box-shadow: none; }
+  .clou-carousel-prev { left: 12px; }
+  .clou-carousel-next { right: 12px; }
+  .clou-carousel-dots { display: flex; justify-content: center; gap: 8px; padding: 12px 0; }
+  .clou-carousel-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(128,128,128,0.4); border: none; cursor: pointer; padding: 0; transition: background 0.2s; }
+  .clou-carousel-dot:hover { transform: none; box-shadow: none; }
+  .clou-carousel-dot.active { background: ${accent}; }
+`;
+  }
+
+  buildToastCSS() {
+    return `
+  .clou-toast-container { position: fixed; top: 20px; right: 20px; z-index: 99999; display: flex; flex-direction: column; gap: 8px; }
+  .clou-toast { padding: 14px 24px; background: #333; color: white; border-radius: 8px; font-size: 15px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); animation: clou-toast-in 0.3s ease, clou-toast-out 0.3s ease 2.7s forwards; }
+  @keyframes clou-toast-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
+  @keyframes clou-toast-out { from { opacity: 1; } to { opacity: 0; transform: translateX(40px); } }
+`;
+  }
+
+  buildSearchCSS() {
+    const accent = this.buttonColorCSS || '#4A90D9';
+    return `
+  .clou-search { position: relative; margin: 12px 0; max-width: 500px; }
+  .clou-search input { width: 100%; padding: 14px 20px 14px 48px; font-size: 16px; border: 2px solid rgba(128,128,128,0.2); border-radius: 50px; outline: none; background: rgba(255,255,255,0.1); color: inherit; transition: border-color 0.2s, box-shadow 0.2s; }
+  .clou-search input:focus { border-color: ${accent}; box-shadow: 0 0 0 3px ${accent}33; }
+  .clou-search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 18px; opacity: 0.5; pointer-events: none; }
+`;
+  }
+
+  buildTooltipCSS() {
+    return `
+  .clou-tooltip { position: relative; display: inline-block; cursor: help; border-bottom: 1px dotted currentColor; }
+  .clou-tooltip-text { visibility: hidden; background: #333; color: white; text-align: center; padding: 8px 14px; border-radius: 6px; font-size: 13px; position: absolute; z-index: 1000; bottom: 125%; left: 50%; transform: translateX(-50%); white-space: nowrap; opacity: 0; transition: opacity 0.2s; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
+  .clou-tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #333 transparent transparent transparent; }
+  .clou-tooltip:hover .clou-tooltip-text { visibility: visible; opacity: 1; }
+`;
+  }
+
+  buildDarkmodeCSS() {
+    return `
+  .clou-darkmode-toggle { position: fixed; top: 16px; right: 16px; z-index: 9999; width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(128,128,128,0.3); background: rgba(128,128,128,0.1); backdrop-filter: blur(8px); cursor: pointer; font-size: 22px; display: flex; align-items: center; justify-content: center; transition: background 0.3s, transform 0.2s; padding: 0; }
+  .clou-darkmode-toggle:hover { background: rgba(128,128,128,0.2); transform: scale(1.1); box-shadow: none; }
+  body.clou-light { background: #ffffff !important; color: #333333 !important; }
+  body.clou-light .clou-card { background: rgba(0,0,0,0.05); }
+  body.clou-light .clou-navbar { background: rgba(255,255,255,0.8); }
+  body.clou-light input, body.clou-light textarea { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.15); color: #333; }
+`;
+  }
+
+  buildStarsCSS() {
+    return `
+  .clou-stars { display: inline-flex; gap: 4px; margin: 8px 0; align-items: center; }
+  .clou-star { font-size: 1.4em; }
+  .clou-star.filled { color: #FFD700; }
+  .clou-star.empty { color: rgba(128,128,128,0.3); }
+  .clou-stars-label { margin-left: 8px; font-size: 14px; opacity: 0.7; }
+`;
+  }
+
   buildAnimationCSS() {
     let css = '';
 
@@ -2596,6 +2848,52 @@ ${scripts}
 `;
     }
 
+    if (this.animations.has('pulse')) {
+      css += `
+  @keyframes clou-pulse {
+    0%, 100% { transform: scale(1); opacity: 1; }
+    50% { transform: scale(1.05); opacity: 0.8; }
+  }
+  .clou-animate-pulse { animation: clou-pulse 2s ease infinite; }
+`;
+    }
+
+    if (this.animations.has('shake')) {
+      css += `
+  @keyframes clou-shake {
+    0%, 100% { transform: translateX(0); }
+    20% { transform: translateX(-8px); }
+    40% { transform: translateX(8px); }
+    60% { transform: translateX(-4px); }
+    80% { transform: translateX(4px); }
+  }
+  .clou-animate-shake { animation: clou-shake 0.6s ease; }
+`;
+    }
+
+    if (this.animations.has('float')) {
+      css += `
+  @keyframes clou-float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+  }
+  .clou-animate-float { animation: clou-float 3s ease-in-out infinite; }
+`;
+    }
+
+    if (this.animations.has('typewrite')) {
+      css += `
+  @keyframes clou-typewrite {
+    from { width: 0; }
+    to { width: 100%; }
+  }
+  @keyframes clou-blink {
+    50% { border-color: transparent; }
+  }
+  .clou-animate-typewrite { overflow: hidden; white-space: nowrap; border-right: 3px solid currentColor; animation: clou-typewrite 3s steps(40) forwards, clou-blink 0.75s step-end infinite; }
+`;
+    }
+
     return css;
   }
 
@@ -2889,6 +3187,137 @@ ${scripts}
       case 'Submit':
         return `  <button type="submit">${this.escapeHtml(this.interpolate(node.label))}</button>`;
 
+      case 'Countdown': {
+        this.hasCountdown = true;
+        const cdId = this.uid();
+        const label = node.label ? `<div class="clou-countdown-label">${this.escapeHtml(this.interpolate(node.label))}</div>` : '';
+        this.scripts.push(
+          `(function() {\n` +
+          `  var target = new Date(${JSON.stringify(node.date)}).getTime();\n` +
+          `  var el = document.getElementById('${cdId}');\n` +
+          `  function update() {\n` +
+          `    var now = Date.now();\n` +
+          `    var diff = Math.max(0, target - now);\n` +
+          `    var d = Math.floor(diff / 86400000);\n` +
+          `    var h = Math.floor((diff % 86400000) / 3600000);\n` +
+          `    var m = Math.floor((diff % 3600000) / 60000);\n` +
+          `    var s = Math.floor((diff % 60000) / 1000);\n` +
+          `    el.querySelector('.cd-d').textContent = d;\n` +
+          `    el.querySelector('.cd-h').textContent = h;\n` +
+          `    el.querySelector('.cd-m').textContent = m;\n` +
+          `    el.querySelector('.cd-s').textContent = s;\n` +
+          `    if (diff > 0) setTimeout(update, 1000);\n` +
+          `  }\n` +
+          `  update();\n` +
+          `})();`
+        );
+        return `  <div class="clou-countdown" id="${cdId}">\n    ${label}\n    <div class="clou-countdown-unit"><span class="clou-countdown-num cd-d">0</span><span class="clou-countdown-text">Days</span></div>\n    <div class="clou-countdown-unit"><span class="clou-countdown-num cd-h">0</span><span class="clou-countdown-text">Hours</span></div>\n    <div class="clou-countdown-unit"><span class="clou-countdown-num cd-m">0</span><span class="clou-countdown-text">Min</span></div>\n    <div class="clou-countdown-unit"><span class="clou-countdown-num cd-s">0</span><span class="clou-countdown-text">Sec</span></div>\n  </div>`;
+      }
+
+      case 'Typing': {
+        this.hasTyping = true;
+        return `  <div class="clou-typing">${this.escapeHtml(this.interpolate(node.value))}</div>`;
+      }
+
+      case 'Carousel': {
+        this.hasCarousel = true;
+        const carId = this.uid();
+        const slides = (node.children || []).filter(c => c.type === 'Image' || c.type === 'Card');
+        let slidesHtml = '';
+        slides.forEach((slide, i) => {
+          slidesHtml += `\n      <div class="clou-carousel-slide">${this.compileNode(slide)}</div>`;
+        });
+        let dotsHtml = '';
+        slides.forEach((_, i) => {
+          dotsHtml += `<button class="clou-carousel-dot${i === 0 ? ' active' : ''}" data-idx="${i}"></button>`;
+        });
+        this.scripts.push(
+          `(function() {\n` +
+          `  var el = document.getElementById('${carId}');\n` +
+          `  var track = el.querySelector('.clou-carousel-track');\n` +
+          `  var dots = el.querySelectorAll('.clou-carousel-dot');\n` +
+          `  var total = ${slides.length};\n` +
+          `  var idx = 0;\n` +
+          `  function go(n) { idx = (n + total) % total; track.style.transform = 'translateX(-' + (idx * 100) + '%)'; dots.forEach(function(d,i) { d.classList.toggle('active', i === idx); }); }\n` +
+          `  el.querySelector('.clou-carousel-prev').onclick = function() { go(idx - 1); };\n` +
+          `  el.querySelector('.clou-carousel-next').onclick = function() { go(idx + 1); };\n` +
+          `  dots.forEach(function(d) { d.onclick = function() { go(parseInt(d.dataset.idx)); }; });\n` +
+          `})();`
+        );
+        return `  <div class="clou-carousel" id="${carId}">\n    <div class="clou-carousel-track">${slidesHtml}\n    </div>\n    <button class="clou-carousel-btn clou-carousel-prev">&#10094;</button>\n    <button class="clou-carousel-btn clou-carousel-next">&#10095;</button>\n    <div class="clou-carousel-dots">${dotsHtml}</div>\n  </div>`;
+      }
+
+      case 'Embed': {
+        const url = this.interpolate(node.url);
+        // Convert YouTube watch URLs to embed
+        let embedUrl = url;
+        if (url.includes('youtube.com/watch')) {
+          const vid = url.split('v=')[1];
+          if (vid) embedUrl = 'https://www.youtube.com/embed/' + vid.split('&')[0];
+        } else if (url.includes('youtu.be/')) {
+          embedUrl = 'https://www.youtube.com/embed/' + url.split('youtu.be/')[1];
+        }
+        return `  <iframe src="${this.escapeHtml(embedUrl)}" style="width: 100%; height: 400px; border: none; border-radius: 12px; margin: 12px 0;" allowfullscreen></iframe>`;
+      }
+
+      case 'Badge': {
+        const style = this.extractInlineStyles(node.children || []);
+        const accent = this.buttonColorCSS || '#4A90D9';
+        const styleStr = style ? style + '; ' : '';
+        return `  <span style="${styleStr}display: inline-block; padding: 4px 12px; font-size: 12px; font-weight: 600; border-radius: 20px; background: ${accent}; color: white; text-transform: uppercase; letter-spacing: 0.5px;">${this.escapeHtml(this.interpolate(node.value))}</span>`;
+      }
+
+      case 'Avatar': {
+        const style = this.extractInlineStyles(node.children || []);
+        const styleStr = style ? style + '; ' : '';
+        return `  <img src="${this.escapeHtml(this.interpolate(node.src))}" alt="avatar" style="${styleStr}width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin: 8px 0;">`;
+      }
+
+      case 'Stars': {
+        this.hasStars = true;
+        const count = Math.min(Math.max(node.value, 0), 5);
+        let starsHtml = '';
+        for (let i = 0; i < 5; i++) {
+          starsHtml += `<span class="clou-star ${i < count ? 'filled' : 'empty'}">${i < count ? '\u2605' : '\u2606'}</span>`;
+        }
+        const label = node.label ? `<span class="clou-stars-label">${this.escapeHtml(this.interpolate(node.label))}</span>` : '';
+        return `  <div class="clou-stars">${starsHtml}${label}</div>`;
+      }
+
+      case 'Search': {
+        this.hasSearch = true;
+        const id = this.uid();
+        return `  <div class="clou-search">\n    <span class="clou-search-icon">\u{1F50D}</span>\n    <input id="${id}" type="text" placeholder="${this.escapeHtml(this.interpolate(node.placeholder))}">\n  </div>`;
+      }
+
+      case 'Toast': {
+        // Toast as action (inside button)
+        this.hasToast = true;
+        return '';
+      }
+
+      case 'Tooltip': {
+        this.hasTooltip = true;
+        return `  <span class="clou-tooltip">${this.escapeHtml(this.interpolate(node.text))}<span class="clou-tooltip-text">${this.escapeHtml(this.interpolate(node.tip))}</span></span>`;
+      }
+
+      case 'Darkmode': {
+        this.hasDarkmode = true;
+        const dmId = this.uid();
+        this.scripts.push(
+          `(function() {\n` +
+          `  var btn = document.getElementById('${dmId}');\n` +
+          `  var isDark = true;\n` +
+          `  btn.onclick = function() {\n` +
+          `    isDark = !isDark;\n` +
+          `    document.body.classList.toggle('clou-light', !isDark);\n` +
+          `    btn.textContent = isDark ? '\\u263E' : '\\u2600';\n` +
+          `  };\n` +
+          `})();`
+        );
+        return `  <button class="clou-darkmode-toggle" id="${dmId}">\u263E</button>`;
+      }
+
       case 'Icon':
         return `  <span class="clou-icon">${node.value}</span>`;
 
@@ -2995,6 +3424,9 @@ ${scripts}
         return `document.getElementById(${JSON.stringify(node.target)} + '-overlay').classList.remove('active');`;
       case 'GoTo':
         return `window.location.href = ${JSON.stringify(node.url)};`;
+      case 'Toast':
+        this.hasToast = true;
+        return `(function() { var c = document.querySelector('.clou-toast-container'); if (!c) { c = document.createElement('div'); c.className = 'clou-toast-container'; document.body.appendChild(c); } var t = document.createElement('div'); t.className = 'clou-toast'; t.textContent = ${JSON.stringify(this.interpolate(node.value))}; c.appendChild(t); setTimeout(function() { t.remove(); }, 3000); })();`;
       default:
         return '';
     }
@@ -3041,7 +3473,7 @@ ${scripts}
   }
 
   isAction(node) {
-    return ['ShowMessage', 'Show', 'Hide', 'Toggle', 'GoTo', 'Open', 'Close'].includes(node.type);
+    return ['ShowMessage', 'Show', 'Hide', 'Toggle', 'GoTo', 'Open', 'Close', 'Toast'].includes(node.type);
   }
 
   // Filter only action nodes

package/playground/index.html

@@ -228,7 +228,7 @@ body {
 <body>
 
 <div class="header">
-  <div class="logo">Clou Playground <span>v0.2</span></div>
+  <div class="logo">Clou Playground <span>v0.4</span></div>
   <div class="header-actions">
     <select class="theme-select" id="themeSelect">
       <option value="">No Theme</option>
@@ -252,7 +252,7 @@ body {
   <div class="resize-handle" id="resizeHandle"></div>
   <div class="preview-panel">
     <div class="panel-header">Preview</div>
-    <iframe id="preview" sandbox="allow-scripts allow-modals"></iframe>
+    <iframe id="preview" sandbox="allow-scripts allow-modals allow-same-origin"></iframe>
   </div>
 </div>
 
@@ -660,11 +660,8 @@ page "{name}'s Portfolio":
       const result = Clou.buildClou(source);
       lastHtml = result.html;
 
-      // Write to iframe
-      const doc = preview.contentDocument || preview.contentWindow.document;
-      doc.open();
-      doc.write(lastHtml);
-      doc.close();
+      // Write to iframe using srcdoc (avoids cross-origin issues)
+      preview.srcdoc = lastHtml;
 
       status.textContent = 'Compiled';
       status.className = 'status status-ok';