dolphincss 1.3.0 → 1.3.2

package/bin/dolphin.js

@@ -0,0 +1,453 @@
+#!/usr/bin/env node
+import fs from 'fs';
+import path from 'path';
+import chokidar from 'chokidar';
+import axios from 'axios';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+function indentHtmlOrJsx(htmlStr, initialIndent = 8) {
+  const lines = htmlStr.split('\n');
+  let currentIndent = initialIndent;
+  const indentStep = 2; // 2 spaces
+  
+  const formattedLines = lines.map(line => {
+    const trimmed = line.trim();
+    if (!trimmed) return '';
+    
+    // Count tags
+    const openCount = (trimmed.match(/<[a-zA-Z0-9-]+(?:\s|>)/gi) || []).length;
+    const closeCount = (trimmed.match(/<\/[a-zA-Z0-9-]+>/gi) || []).length;
+    const selfCloseCount = (trimmed.match(/\/>/g) || []).length;
+    
+    const netChange = (openCount - selfCloseCount) - closeCount;
+    
+    // If the line starts with a closing tag, adjust its indent before printing
+    let lineIndent = currentIndent;
+    if (trimmed.startsWith('</') || trimmed.startsWith('}')) {
+      lineIndent = Math.max(initialIndent, currentIndent - indentStep);
+    }
+    
+    const spaces = ' '.repeat(lineIndent);
+    const result = spaces + trimmed;
+    
+    // Apply net depth change for the next lines
+    currentIndent = Math.max(initialIndent, currentIndent + netChange * indentStep);
+    
+    return result;
+  });
+  
+  return formattedLines.filter(Boolean).join('\n');
+}
+
+console.log('🐬 Dolphin CLI [Full-Cloud] Started');
+console.log('====================================');
+
+const projectRoot = process.cwd();
+const dolphinConfigPath = path.join(projectRoot, 'dolphin.config.json');
+const templatesDir = path.join(__dirname, '../templates');
+
+// Global variables to hold remote data
+let remoteMarkerMap = {}; 
+let remoteBaseUrl = '';
+const fetchingMarkers = new Set(); // Fetch हुँदै गरेका मार्करहरू ट्र्याक गर्न
+
+let templateRegistry = {};
+
+function loadLocalMarkers() {
+  let localMarkersPath = path.join(__dirname, '../config/markers.json');
+  if (!fs.existsSync(localMarkersPath)) {
+    localMarkersPath = path.join(__dirname, '../marker.json');
+  }
+
+  if (fs.existsSync(localMarkersPath)) {
+    const localMarkers = JSON.parse(fs.readFileSync(localMarkersPath, 'utf8'));
+    let loadedCount = 0;
+    
+    for (const [marker, data] of Object.entries(localMarkers)) {
+      const templateFile = typeof data === 'string' ? data : data.templateFile;
+      let fullTemplatePath = path.join(templatesDir, templateFile);
+      if (!fs.existsSync(fullTemplatePath)) {
+        fullTemplatePath = path.join(__dirname, '../core-templates', templateFile);
+      }
+
+      if (fs.existsSync(fullTemplatePath)) {
+        templateRegistry[marker] = {
+          content: fs.readFileSync(fullTemplatePath, 'utf8'),
+          addClasses: data.addClasses || '',
+          isJsxTemplate: templateFile.endsWith('.jsx') || templateFile.endsWith('.tsx')
+        };
+        loadedCount++;
+      }
+    }
+    
+    console.log(`📂 Successfully loaded ${loadedCount} local markers.`);
+    return localMarkers;
+  }
+  return {};
+}
+
+// Helper to fetch content from URL
+async function fetchRemote(url) {
+  try {
+    const response = await axios.get(url);
+    if (response.status === 404) {
+       throw new Error(`File not found (404) at: ${url}`);
+    }
+    return typeof response.data === 'string' ? response.data : JSON.stringify(response.data);
+  } catch (err) {
+    if (err.response && err.response.status === 404) {
+      throw new Error(`Server returned 404 for: ${url}. Please check if the file exists in your GitHub repo.`);
+    }
+    throw new Error(`Failed to fetch ${url}: ${err.message}`);
+  }
+}
+
+function setupVSCodeIntelliSense(markers) {
+  try {
+    const vscodeDir = path.join(projectRoot, '.vscode');
+    if (!fs.existsSync(vscodeDir)) {
+      fs.mkdirSync(vscodeDir);
+    }
+
+    // 1. Clean up old Snippets if they exist (user no longer wants code snippets)
+    const snippetsPath = path.join(vscodeDir, 'dolphin.code-snippets');
+    if (fs.existsSync(snippetsPath)) {
+      fs.unlinkSync(snippetsPath);
+    }
+
+    // 2. Generate Custom HTML Data (This provides the CSS class name suggestions)
+    const customData = {
+      version: 1.1,
+      tags: Object.keys(markers).map(marker => ({
+        name: marker,
+        description: `Dolphin CLI Component`
+      })),
+      globalAttributes: [
+        { name: "class", valueSet: "dolphin-classes" },
+        { name: "className", valueSet: "dolphin-classes" }
+      ],
+      valueSets: [
+        {
+          name: "dolphin-classes",
+          values: Object.keys(markers).map(marker => {
+            const data = markers[marker];
+            const templateFile = typeof data === 'string' ? data : data.templateFile;
+            return {
+              name: marker,
+              description: `Dolphin CLI Component (${templateFile})`
+            };
+          })
+        }
+      ]
+    };
+    fs.writeFileSync(path.join(vscodeDir, 'dolphin-tags.json'), JSON.stringify(customData, null, 2));
+
+    // 3. Update settings.json
+    const settingsPath = path.join(vscodeDir, 'settings.json');
+    let settings = {};
+    if (fs.existsSync(settingsPath)) {
+      try {
+        settings = JSON.parse(fs.readFileSync(settingsPath, 'utf8'));
+      } catch (e) {}
+    }
+    
+    if (!settings['html.customData']) {
+      settings['html.customData'] = [];
+    }
+    
+    if (!settings['html.customData'].includes("./.vscode/dolphin-tags.json")) {
+      settings['html.customData'].push("./.vscode/dolphin-tags.json");
+      fs.writeFileSync(settingsPath, JSON.stringify(settings, null, 2));
+    }
+    
+    console.log('✨ VS Code IntelliSense (Auto-Suggest) configured!');
+  } catch (error) {
+    console.log(`⚠️ Could not setup VS Code IntelliSense: ${error.message}`);
+  }
+}
+
+async function init() {
+  let remoteUrl = '';
+  
+  // 1. Load config
+  if (fs.existsSync(dolphinConfigPath)) {
+    try {
+      const userConfig = JSON.parse(fs.readFileSync(dolphinConfigPath, 'utf8'));
+      let rawUrl = userConfig.remoteUrl;
+
+      // GitHub URL Normalization: ब्राउजरको लिङ्कलाई RAW लिङ्कमा बदल्ने
+      if (rawUrl && rawUrl.includes('github.com') && rawUrl.includes('/blob/')) {
+        rawUrl = rawUrl.replace('github.com', 'raw.githubusercontent.com').replace('/blob/', '/');
+      }
+
+      remoteUrl = rawUrl;
+    } catch (e) {
+      console.error('❌ Error parsing dolphin.config.json');
+    }
+  }
+
+  if (!remoteUrl) {
+    remoteUrl = 'https://raw.githubusercontent.com/Phuyalshankar/dolphincss-template/main/config/markers.json';
+    console.log(`📄 No remoteUrl in dolphin.config.json. Defaulting to official remote repository: ${remoteUrl}`);
+  }
+
+  // Remote Sync with Retry
+  const maxRetries = 5;
+  let retryCount = 0;
+
+  async function sync() {
+    try {
+      const cacheBustUrl = `${remoteUrl}?t=${Date.now()}`;
+      console.log(`🌐 Syncing markers from: ${cacheBustUrl}`);
+      const markersData = await fetchRemote(cacheBustUrl);
+      remoteMarkerMap = JSON.parse(markersData);
+      
+      // remoteUrl is .../config/markers.json, so we need to go up two levels to get the base URL
+      const configDirUrl = remoteUrl.substring(0, remoteUrl.lastIndexOf('/')); // .../config
+      remoteBaseUrl = configDirUrl.substring(0, configDirUrl.lastIndexOf('/')); // .../main
+
+      console.log(`✅ Remote markers metadata loaded (${Object.keys(remoteMarkerMap).length} items).`);
+      console.log(`🚀 On-demand fetching active. (Markers will be downloaded when used)`);
+
+      setupVSCodeIntelliSense(remoteMarkerMap);
+      processFile(path.join(projectRoot, 'src/App.jsx'));
+      startWatcher();
+    } catch (error) {
+      console.error(`❌ Sync Error: ${error.message}`);
+      
+      if (retryCount >= maxRetries) {
+        console.log('⚠️ Falling back to local mode after maximum retries...');
+        const localMarkers = loadLocalMarkers();
+        setupVSCodeIntelliSense(localMarkers);
+        startWatcher();
+        return;
+      }
+
+      retryCount++;
+      console.log(`🔄 Retrying in 5 seconds... (Attempt ${retryCount})`);
+      setTimeout(sync, 5000);
+    }
+  }
+
+  sync();
+}
+
+async function processFile(filePath) {
+  console.log(`🔍 processFile triggered for: ${filePath}`);
+  if (filePath.includes('templates' + path.sep) || filePath.includes('bin' + path.sep) || filePath.includes('node_modules')) return;
+
+  const ext = path.extname(filePath).toLowerCase();
+  const isReact = ['.jsx', '.tsx', '.js', '.ts'].includes(ext);
+
+  try {
+    let content = fs.readFileSync(filePath, 'utf8');
+    let modified = false;
+
+    const classAttrName = isReact ? 'className' : 'class';
+
+    // On-demand fetching: यदि कोडमा 'd-' मार्कर भेटियो भने मात्र डाउनलोड गर्ने
+    const possibleMarkers = content.match(/dolphin-[a-zA-Z0-9-]+/g);
+    if (possibleMarkers) {
+      for (const markerClass of possibleMarkers) {
+        // सेफ्टी चेक: रिमोट लिस्ट लोड नभएको अवस्थामा
+        if (!remoteMarkerMap || Object.keys(remoteMarkerMap).length === 0) {
+          continue;
+        }
+
+        // Check if the marker is already in the registry or currently being fetched
+        if (!templateRegistry[markerClass] && remoteMarkerMap[markerClass] && !fetchingMarkers.has(markerClass)) {
+          fetchingMarkers.add(markerClass); // Mark as fetching
+
+          try {
+            const data = remoteMarkerMap[markerClass];
+            const templateFile = typeof data === 'string' ? data : data.templateFile;
+              const localTemplatePath = path.join(__dirname, '../core-templates', templateFile);
+              let templateContent = '';
+              if (fs.existsSync(localTemplatePath)) {
+                console.log('🏠 Loaded core template locally: ' + markerClass);
+                templateContent = fs.readFileSync(localTemplatePath, 'utf8');
+              } else {
+                const templateUrl = `${remoteBaseUrl}/templates/${templateFile}?t=${Date.now()}`;
+                console.log('🌐 Fetching template for: ' + markerClass + ' from ' + templateUrl + '...');
+                templateContent = await fetchRemote(templateUrl);
+              }
+            if (templateContent) {
+              templateContent = templateContent.replace(/>\s*</g, '>\n<');
+              templateContent = indentHtmlOrJsx(templateContent, 8);
+            }
+            templateRegistry[markerClass] = {
+              content: templateContent,
+              addClasses: data.addClasses || '',
+              isJsxTemplate: templateFile.endsWith('.jsx') || templateFile.endsWith('.tsx')
+            };
+            console.log(`✅ Fetched and registered ${markerClass}`);
+          } catch (error) {
+            console.error(`   ❌ Failed to fetch template for ${markerClass}: ${error.message}`);
+          } finally {
+            fetchingMarkers.delete(markerClass); // Always remove from fetching set
+          }
+        } else {
+            console.log(`Skipping fetch for ${markerClass}: InRegistry=${!!templateRegistry[markerClass]} InRemote=${!!remoteMarkerMap[markerClass]} Fetching=${fetchingMarkers.has(markerClass)}`);
+        }
+      }
+    }
+
+    const markerKeys = Object.keys(templateRegistry);
+    if (markerKeys.length === 0) return;
+    // Improved regex: flexible for attribute order, quotes, spaces, and captures opening tag
+    const regex = new RegExp(
+      `(<([a-z0-9-]+)\\s+[^>]*${classAttrName}=\\s*["']([^"']*?\\s)?(dolphin-[a-zA-Z0-9-]+)(\\s[^"']*?)?["'][^>]*>)`,
+      'gi'
+    );
+
+    let found = true;
+    while (found) {
+      found = false;
+      regex.lastIndex = 0;
+      let match;
+
+      while ((match = regex.exec(content)) !== null) {
+        const fullOpeningTag = match[1];
+        const tagName = match[2];
+        const beforeClasses = match[3];
+        const markerClass = match[4];
+        const afterClasses = match[5];
+
+        if (!templateRegistry[markerClass]) {
+          continue;
+        }
+
+        // Find matching closing tag
+        let depth = 1;
+        const startIndex = match.index + fullOpeningTag.length;
+        const tagPattern = new RegExp(`</?${tagName}(?:\\s|>|/)`, 'gi');
+        tagPattern.lastIndex = startIndex;
+        
+        let closingTagIndex = -1;
+        let tagMatch;
+        while ((tagMatch = tagPattern.exec(content)) !== null) {
+          const isClosing = tagMatch[0].startsWith('</');
+          if (!isClosing) {
+            const tagEnd = content.indexOf('>', tagMatch.index);
+            if (tagEnd !== -1 && content[tagEnd - 1] === '/') {
+              continue;
+            }
+            depth++;
+          } else {
+            depth--;
+          }
+          if (depth === 0) {
+            closingTagIndex = tagMatch.index;
+            break;
+          }
+        }
+
+        if (closingTagIndex !== -1) {
+          const innerContent = content.substring(startIndex, closingTagIndex);
+          const closingTagMatch = content.substring(closingTagIndex).match(new RegExp(`^</${tagName}\\s*>`, 'i'));
+          const closingTag = closingTagMatch ? closingTagMatch[0] : `</${tagName}>`;
+          
+          modified = true;
+          console.log(`✨ Expanding component: ${markerClass} in ${path.basename(filePath)}`);
+          const templateData = templateRegistry[markerClass];
+
+          const classParts = (beforeClasses || '') + (afterClasses || '');
+          let allClasses = classParts.trim().split(/\s+/).filter(Boolean);
+          allClasses = allClasses.filter(c => c !== markerClass && c !== '');
+
+          if (templateData.addClasses) {
+            const addCls = templateData.addClasses.trim().split(/\s+/).filter(Boolean);
+            allClasses = [...new Set([...allClasses, ...addCls])];
+          }
+
+          const newClassAttr = allClasses.length > 0 ? ` ${classAttrName}="${allClasses.join(' ')}"` : '';
+          
+          let newOpeningTag = fullOpeningTag.replace(new RegExp(`\\s*${classAttrName}=["'][^"']*["']`, 'i'), newClassAttr ? `${newClassAttr}` : '');
+          newOpeningTag = newOpeningTag.replace(/\s+(?:class|className)=["']\s*["']/i, '');
+
+          let finalTemplate = templateData.content;
+          
+          if (isReact) {
+            if (!templateData.isJsxTemplate) {
+              finalTemplate = finalTemplate
+                .replace(/class=/g, 'className=')
+                .replace(/for=/g, 'htmlFor=')
+                .replace(/tabindex=/g, 'tabIndex=')
+                .replace(/onclick=/g, 'onClick=')
+                .replace(/stroke-linecap=/g, 'strokeLinecap=')
+                .replace(/stroke-linejoin=/g, 'strokeLinejoin=')
+                .replace(/stroke-width=/g, 'strokeWidth=')
+                .replace(/fill-rule=/g, 'fillRule=')
+                .replace(/clip-rule=/g, 'clipRule=')
+                .replace(/<!--([\s\S]*?)-->/g, '{/*$1*/}')
+                .replace(/stop-color=/g, 'stopColor=')
+                .replace(/style="([^"]*)"/g, (_, s) => {
+                  const obj = s.split(';').filter(Boolean).map(p => {
+                    const [k, v] = p.split(':').map(x => x.trim());
+                    if (!k) return '';
+                    const camel = k.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+                    return `${camel}: '${v}'`;
+                  }).filter(Boolean).join(', ');
+                  return `style={{${obj}}}`;
+                })
+                .replace(/<(input|img|br|hr|meta|link)\b([^>]*?)>/gi, (m, t, a) => {
+                    if (a.trim().endsWith('/')) return m;
+                    return `<${t}${a} />`;
+                });
+            }
+          } else {
+              finalTemplate = finalTemplate.replace(/className=/g, 'class=');
+          }
+
+          if (finalTemplate.includes('{/* INNER */}')) {
+            finalTemplate = finalTemplate.replace('{/* INNER */}', innerContent.trim());
+          }
+
+          const fullMatchString = content.substring(match.index, closingTagIndex + closingTag.length);
+          if (templateData.isJsxTemplate && finalTemplate.includes('export default') && content.trim() === fullMatchString.trim()) {
+             content = finalTemplate;
+             console.log(`✨ Generated FULL file component: ${markerClass} in ${path.basename(filePath)}`);
+             found = false;
+             modified = true;
+             break;
+          }
+
+          const expanded = `${newOpeningTag}\n${finalTemplate}\n${closingTag}`;
+          content = content.substring(0, match.index) + expanded + content.substring(closingTagIndex + closingTag.length);
+          found = true;
+          break;
+        }
+      }
+    }
+
+    if (modified) {
+      fs.writeFileSync(filePath, content);
+      console.log(`✅ Updated ${path.basename(filePath)}`);
+    }
+  } catch (error) {
+    console.log(`⚠️ Error processing ${filePath}: ${error.message}`);
+  }
+}
+
+function startWatcher() {
+  const watcher = chokidar.watch(['./src/**/*.{js,jsx,ts,tsx,html}', './*.html'], {
+    ignored: /(node_modules|\.git|templates|bin)/,
+    persistent: true,
+    ignoreInitial: false,
+    awaitWriteFinish: { stabilityThreshold: 400, pollInterval: 100 },
+  });
+
+  watcher.on('add', filePath => processFile(filePath)).on('change', filePath => processFile(filePath));
+  console.log('👁️  Watching for markers...');
+}
+
+init();
+
+process.on('SIGINT', () => {
+  console.log('\n👋 Dolphin CLI stopped');
+  process.exit(0);
+});
+

package/bin/watcher.js

@@ -0,0 +1,121 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const path = require('path');
+const chokidar = require('chokidar');
+
+console.log('🐬 Dolphin Auto Watcher Started (Improved Regex)');
+console.log('===============================================');
+
+// ====== IMPORTANT: Separate package root and watch directory ======
+const packageRoot = path.resolve(__dirname, '..');  // Package को root (config/templates यहाँबाट लिन्छ)
+const watchDir = process.cwd();                     // User's current project directory watch गर्छ
+
+const configPath = path.join(packageRoot, 'config', 'markers.json');
+const templatesDir = path.join(packageRoot, 'templates');
+
+if (!fs.existsSync(configPath)) {
+  console.error('❌ config/markers.json not found in package!');
+  process.exit(1);
+}
+
+const markersConfig = JSON.parse(fs.readFileSync(configPath, 'utf8'));
+console.log(`📋 Loaded ${Object.keys(markersConfig).length} markers`);
+
+// Load templates
+const templates = {};
+for (const [marker, cfg] of Object.entries(markersConfig)) {
+  const templatePath = path.join(templatesDir, cfg.templateFile);
+  if (fs.existsSync(templatePath)) {
+    templates[marker] = {
+      content: fs.readFileSync(templatePath, 'utf8').trim(),
+      addClasses: cfg.addClasses || ''
+    };
+  } else {
+    console.warn(`⚠️ Template not found: ${cfg.templateFile}`);
+    templates[marker] = { 
+      content: `<div class="error">Template ${cfg.templateFile} missing</div>`, 
+      addClasses: '' 
+    };
+  }
+}
+
+function processFile(filePath) {
+  const ext = path.extname(filePath).toLowerCase();
+  if (!['.js', '.jsx', '.ts', '.tsx', '.html'].includes(ext)) return;
+
+  const isHTML = ext === '.html';
+  const classAttrName = isHTML ? 'class' : 'className';
+
+  try {
+    let content = fs.readFileSync(filePath, 'utf8');
+    let originalContent = content;
+    let modified = false;
+
+    // Improved regex: flexible for attribute order, quotes, spaces
+    const regex = new RegExp(
+      `(<div\\s+[^>]*${classAttrName}=\\s*["']([^"']*\\s*)?(d-[a-zA-Z0-9-]+)(\\s*[^"']*)?["'][^>]*>)([\\s\\S]*?)(</div>)`,
+      'gi'
+    );
+
+    content = content.replace(regex, (fullMatch, openingTag, beforeClasses, marker, afterClasses, innerContent, closingTag) => {
+      if (!templates[marker]) return fullMatch;
+
+      modified = true;
+      const templateData = templates[marker];
+
+      // Collect all classes except the marker
+      const classParts = (beforeClasses || '') + (afterClasses || '');
+      let allClasses = classParts.trim().split(/\s+/).filter(Boolean);
+      allClasses = allClasses.filter(c => c !== marker && c !== '');
+
+      // Add configured extra classes
+      if (templateData.addClasses) {
+        const addCls = templateData.addClasses.trim().split(/\s+/).filter(Boolean);
+        allClasses = [...new Set([...allClasses, ...addCls])];
+      }
+
+      // New class attribute
+      const newClassAttr = allClasses.length > 0 
+        ? ` ${classAttrName}="${allClasses.join(' ')}"` 
+        : '';
+
+      // Prepare inner template
+      let newInner = templateData.content;
+      if (isHTML) {
+        newInner = newInner.replace(/className=/g, 'class=');
+      }
+
+      // Inject INNER content
+      newInner = newInner.replace('{/* INNER */}', innerContent.trim());
+
+      // Return new structure
+      return `<div${newClassAttr}>${newInner}\n</div>`;
+    });
+
+    if (modified && content !== originalContent) {
+      fs.writeFileSync(filePath, content);
+      console.log(`✅ Successfully generated in: ${path.relative(watchDir, filePath)}`);
+    }
+  } catch (error) {
+    console.error(`❌ Error in ${path.relative(watchDir, filePath)}: ${error.message}`);
+  }
+}
+
+// Watcher
+const watcher = chokidar.watch('**/*.{js,jsx,ts,tsx,html}', {
+  cwd: watchDir,
+  ignored: /(node_modules|\.git|bin|config|templates|dist|build)/,
+  persistent: true,
+  ignoreInitial: false,
+  awaitWriteFinish: { stabilityThreshold: 300, pollInterval: 100 }
+});
+
+watcher
+  .on('add', processFile)
+  .on('change', processFile)
+  .on('ready', () => console.log('👁️ Watching for changes in your project... Save file to generate!'));
+
+process.on('SIGINT', () => {
+  console.log('\n👋 Dolphin Watcher stopped.');
+  process.exit(0);
+});

package/core-templates/dolphin-button.html

@@ -0,0 +1,19 @@
+<div className="flex flex-col gap-8 p-8 fx-crystal">
+  <div className="flex flex-wrap gap-4 items-center">
+    <button className="filled primary px-6 py-2 glow hover:-translate-y-1">Primary Filled</button>
+    <button className="filled secondary px-6 py-2 glow hover:-translate-y-1">Secondary</button>
+    <button className="outlined success px-6 py-2 glow hover:-translate-y-1">Success Outlined</button>
+    <button className="plain danger px-6 py-2 hover:bg-danger/10">Danger Plain</button>
+  </div>
+  
+  <div className="flex flex-wrap gap-6 items-center">
+    <button className="filled info px-8 py-3 rounded-xl glow pulse font-bold">Pulsing Glow</button>
+    <button className="filled warning px-8 py-3 rounded-xl glow wave font-bold text-black">Wave Glow</button>
+  </div>
+  
+  <div className="flex flex-wrap gap-4 items-center">
+    <button className="circle sm filled primary"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14M5 12h14"/></svg></button>
+    <button className="circle md outlined secondary"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14M5 12h14"/></svg></button>
+    <button className="circle lg fx-aurora glow wave"><svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12l5 5L20 7"/></svg></button>
+  </div>
+</div>

package/core-templates/dolphin-card.html

@@ -0,0 +1 @@
+<div className="glass card p-6 border border-white/20 rounded-2xl max-w-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 relative overflow-hidden" style={{ backdropFilter: 'blur(20px)' }}> <div className="absolute top-0 right-0 w-32 h-32 bg-primary-500/20 rounded-full blur-2xl"></div> <div className="flex-left gap-4 mb-4 relative z-10"> <div className="w-16 h-16 rounded-full border-2 border-primary-400 overflow-hidden shadow-lg p-0.5"> <img src="https://i.pravatar.cc/150?img=11" alt="Profile" className="w-full h-full rounded-full object-cover" /> </div> <div> <h3 className="text-xl font-bold text-white m-0">Alex Developer</h3> <p className="text-primary-300 text-sm font-medium">Software Engineer</p> </div> </div> <p className="text-white/70 text-sm leading-relaxed mb-6 relative z-10"> Passionate about building magical user experiences and world-class design systems using DolphinCSS. </p> <div className="flex-between relative z-10"> <div className="flex gap-2"> <span className="px-3 py-1 rounded-full bg-white/10 text-xs font-medium text-white/90">React</span> <span className="px-3 py-1 rounded-full bg-white/10 text-xs font-medium text-white/90">Tailwind</span> </div> <button className="circle filled primary-500 text-white p-2 hover:shadow-lg hover:scale-110 transition-all flex-center"> <ChevronRight size={16} /> </button> </div> </div>

package/core-templates/dolphin-form-standard.html

@@ -0,0 +1 @@
+<div className="card p-6 lg:p-10 border border-border rounded-2xl bg-surface-alt shadow-lg"> <h3 className="text-2xl font-bold text-text mb-2">Welcome Back</h3> <p className="text-text-muted text-sm mb-8">Please enter your details to sign in.</p> <form className="flex-col-left w-full gap-8"> <div className="w-full mt-2"> <div className="standardlabel w-full"> <input type="email" id="email-std" className="standardlabel-input lg w-full text-text placeholder:text-transparent bg-transparent" placeholder=" " /> <label htmlFor="email-std" className="standardlabel-label text-text-muted font-medium bg-transparent! left-0! px-0!">Email Address</label> </div> </div> <div className="w-full"> <div className="standardlabel w-full"> <input type="password" id="password-std" className="standardlabel-input lg w-full text-text placeholder:text-transparent bg-transparent" placeholder=" " /> <label htmlFor="password-std" className="standardlabel-label text-text-muted font-medium bg-transparent! left-0! px-0!">Password</label> </div> </div> <div className="flex-between w-full"> <label className="radio-item flex-left gap-2 cursor-pointer"> <input type="checkbox" className="accent-primary-500 w-4 h-4 rounded border-border" /> <span className="text-sm font-medium text-text-muted">Remember me</span> </label> <a href="#" className="text-sm font-bold text-primary-500 hover:underline">Forgot password?</a> </div> <button type="button" className="filled primary-500 w-full py-3.5 rounded-xl text-white font-bold hover:shadow-xl hover:-translate-y-0.5 transition-all mt-2 glow"> Sign In </button> </form> </div>

package/core-templates/dolphin-modal.html

@@ -0,0 +1,5 @@
+{/* Shadcn-like Accessible Modal (React/JSX Compatible) */}
+{/* To use this modal with React state: 1. Add a state: const [isOpen, setIsOpen] = useState(false) 2. Conditionally render the modal-container based on `isOpen` 3. Attach `onClick={() => setIsOpen(false)}` to the backdrop and close buttons
+*/}
+<div className="modal-container" role="dialog" aria-modal="true" aria-labelledby="modal-title" aria-describedby="modal-desc"> <div className="modal-wrapper"> {/* The backdrop */} <div className="absolute inset-0 bg-surface-dark/60 backdrop-blur-sm cursor-pointer" aria-hidden="true"></div> {/* The Modal Panel */} <div className="modal-panel md glass bg-surface/80 border-border/50 flex flex-col max-h-[90vh]"> <div className="modal-header"> <h3 id="modal-title">Edit Profile</h3> <button aria-label="Close modal">✕</button> </div> <div className="modal-body overflow-y-auto flex-1" id="modal-desc"> <p className="mb-4">Make changes to your profile here. Click save when you're done.</p> <div className="dolphin-form-standard mb-3"> <label htmlFor="name">Name</label> <input type="text" id="name" placeholder="John Doe" /> </div> <div className="dolphin-form-standard"> <label htmlFor="username">Username</label> <input type="text" id="username" placeholder="@johndoe" /> </div> </div> <div className="modal-footer"> <button className="outlined plain py-2 px-4 rounded-lg">Cancel</button> <button className="filled primary py-2 px-4 rounded-lg glow">Save Changes</button> </div> </div> </div>
+</div>

package/core-templates/dolphin-navbar.html

@@ -0,0 +1 @@
+<nav className="glass w-full py-4 px-6 md:px-8 border-b border-white/10 flex-between sticky top-0 z-50 shadow-sm" style={{ backdropFilter: 'blur(24px)' }}> <div className="flex-left gap-2 cursor-pointer"> <div className="circle sm filled primary-500 text-white font-bold flex-center glow">🐬</div> <span className="text-xl font-bold text-white tracking-tight">Dolphin</span> </div> <div className="hidden md:flex gap-6"> <a href="#" className="text-white/80 hover:text-white font-medium transition-colors">Home</a> <a href="#" className="text-white/80 hover:text-white font-medium transition-colors">Features</a> <a href="#" className="text-white/80 hover:text-white font-medium transition-colors">Pricing</a> <a href="#" className="text-white/80 hover:text-white font-medium transition-colors">Docs</a> </div> <div className="flex-right gap-3"> <button className="hidden md:block outlined plain py-2 px-4 rounded-lg font-medium text-sm">Log In</button> <button className="filled primary-600 text-white py-2 px-4 rounded-lg font-medium text-sm hover:shadow-lg transition-all glow">Sign Up</button> </div> </nav>