๐Ÿฌ DolphinCSS

A Modern UI Library for React + TailwindCSS

Component generation, global utilities, and dynamic styling

--- DolphinCSS combines component generation with utility-first CSS. It provides TailwindCSS-style utilities with Bootstrap-like semantic classes, plus a Vite plugin for automatic component code generation. ## โšก Core Features ### 1. ๐Ÿช„ Automatic Component Generation Generate component code directly in your files without CLI commands. The Vite plugin detects marker classes and replaces them with full implementation: ```jsx // Write this:
// Save file (Ctrl+S) // Plugin generates:
{/* Customizable component code */}
``` ### 2. ๐ŸŒ Semantic Utility Classes Semantic classes that combine multiple utilities for common patterns: ```jsx // Standard approach // DolphinCSS approach ``` ### 3. ๐Ÿงฉ Composable Classes Classes designed to work together without conflicts: ```jsx
``` ### 4. ๐ŸŽฌ Built-in Animations Animation utilities included without additional libraries: - **Continuous:** `float`, `spin-slow`, `pulse`, `bounce`, `shimmer`, `gradient-flow`, `neon-flicker` - **Hover:** `hover-pulse`, `hover-jelly`, `hover-glow`, `hover-ripple` - **Entrance:** `fade-in`, `slide-up`, `zoom-in`, `rotate-3d` - **Controls:** `delay-200`, `duration-500` ```jsx ``` --- ## โš™๏ธ Installation & Setup 1. **Install via npm:** ```bash npm install tailwindcss @tailwindcss/vite dolphincss lucide-react ``` *(Note: `lucide-react` is required because the generated magic components use these beautiful icons by default.)* 2. **Add the Plugins:** (In `vite.config.js`) ```javascript import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import tailwindcss from '@tailwindcss/vite' import dolphincssPlugin from 'dolphincss/vite-plugin' export default defineConfig({ plugins: [react(), tailwindcss(), dolphincssPlugin()] }) ``` 3. **Import Styles:** (In your main `main.jsx` or `index.css`) ```javascript import 'dolphincss/dolphin-css.css'; ``` ### ๐Ÿง  VS Code IntelliSense โ€” Auto Extension Install via Marker DolphinCSS IntelliSense can be **automatically installed** into VS Code using a single magic marker โ€” no marketplace search, no manual download needed. #### โœจ How it works Just add the `vscode-init` marker anywhere in your JSX/TSX component and **save the file**: ```jsx // In any component file (e.g., App.jsx) export default function App() { return (
{/* ๐Ÿฌ Add this ONE line โ€” remove it after first run */}
{/* rest of your app */}
) } ``` When the Vite dev server (`npm run dev`) detects this marker, it automatically: 1. ๐Ÿ“ฅ **Downloads** the DolphinCSS IntelliSense extension (`.vsix`) directly from GitHub 2. โšก **Installs** it into VS Code via `code --install-extension` 3. ๐Ÿ—‚๏ธ **Creates** `.vscode/dolphin-tags.json` with **1,269 CSS class suggestions** 4. โš™๏ธ **Updates** `.vscode/settings.json` with `html.customData` for HTML autocomplete 5. ๐Ÿ“Œ **Adds** extension recommendation to `.vscode/extensions.json` 6. ๐Ÿ—‘๏ธ **Removes** the `vscode-init` class from your file automatically Then simply **reload your VS Code window**: ``` Ctrl + Shift + P โ†’ "Reload Window" ``` After reload, you'll get: - โœ… **1,269 DolphinCSS class suggestions** in `className=""` / `class=""` - โœ… **51 `dolphin-*` marker suggestions** when you type `dolphin-` - โœ… Works in **JSX, TSX, HTML, Vue, Svelte, Astro** files #### ๐Ÿ”ง Manual Install (Alternative) If auto-install didn't work (e.g., `code` CLI not in PATH), install manually: **Option A โ€” VS Code Marketplace:** Search `DolphinCSS IntelliSense` in the Extensions panel (`Ctrl+Shift+X`). **Option B โ€” Direct VSIX download:** ```bash # Download and install the extension from GitHub Releases curl -L -o dolphincss-intellisense.vsix https://github.com/Phuyalshankar/dolphincss-vscode-/releases/download/v0.1.0/dolphincss-intellisense-0.1.0.vsix code --install-extension dolphincss-intellisense.vsix ``` #### ๐Ÿงน Cleanup When you no longer need the VS Code helpers, remove them cleanly: ```bash npx dolphin-cleanup ``` - Removes only DolphinCSS files from `.vscode/` - Removes the `html.customData` entry from `.vscode/settings.json` - Keeps your own VS Code settings and other `.vscode` files untouched --- ## ๐Ÿ›œ Offline & CDN Usage For static HTML pages or offline projects, you can use the minified files directly without npm/Node.js setup. ### 1. CDN Links (jsDelivr) Include these links directly in your HTML for zero-install setup: * **CSS (Global Styles & Animations):** ```html ``` * **JS (Vanilla Utility Builder):** ```html ``` ### ๐Ÿ“ฅ Direct File Downloads (One-Click) Click the buttons below to download the latest files directly:
๐Ÿ“ฅ Download dolphin-css.css ๐Ÿ“ฅ Download ub-vanilla.js
*(For Markdown/GitHub compatibility, you can also use these badges:)* [![Download Dolphin CSS](https://img.shields.io/badge/Download-Dolphin_CSS-0ea5e9?style=for-the-badge&logo=css3)](https://cdn.jsdelivr.net/npm/dolphincss@latest/dolphin-css.css) [![Download Utility Builder JS](https://img.shields.io/badge/Download-Utility_Builder_JS-a855f7?style=for-the-badge&logo=javascript)](https://cdn.jsdelivr.net/npm/dolphincss@latest/src/ub-vanilla.js) ### 2. Download Commands (For Offline Usage) Run these commands in your project folder to download the files locally: #### Using `curl`: ```bash # Download CSS curl -o dolphin-css.min.css https://cdn.jsdelivr.net/npm/dolphincss@latest/dolphin-css.css # Download Vanilla Utility Builder JS curl -o ub-vanilla.min.js https://cdn.jsdelivr.net/npm/dolphincss@latest/src/ub-vanilla.js ``` #### Using `wget`: ```bash # Download CSS wget -O dolphin-css.min.css https://cdn.jsdelivr.net/npm/dolphincss@latest/dolphin-css.css # Download Vanilla Utility Builder JS wget -O ub-vanilla.min.js https://cdn.jsdelivr.net/npm/dolphincss@latest/src/ub-vanilla.js ``` ### 3. How to Setup & Use Locally (Offline) #### A. Static HTML Setup Once you have downloaded `dolphin-css.min.css` and `ub-vanilla.min.js`, link them locally in your `index.html` file: ```html
``` #### B. Offline Component Injection When working offline (without an internet connection), component injection still works seamlessly: * **Using Vite Plugin (React/Vue/etc.):** The `vite-plugin-dolphincss` automatically loads templates locally from the `node_modules/dolphincss/core-templates/` directory. No internet connection is needed to parse and expand markers like `
`. * **Using CLI Watcher (Plain HTML/Other projects):** Start the watcher offline: ```bash npx dolphincss-template # OR node node_modules/dolphincss/bin/dolphin.js ``` The watcher will attempt to sync with the remote repository. After failing to connect, it will automatically fallback to **Local Mode**. It will watch your files and expand markers (e.g. `dolphin-card` to full HTML/JSX) using the offline templates stored locally in your package. #### C. Zero-Install / CDN Component Injection (Online) If you are using DolphinCSS via CDN links and do not want to install `dolphincss` locally in your project, you can still use the magic component generator: 1. Include the jsDelivr CDN links in your static HTML file. 2. Put any magic marker class (e.g., `
`) in your HTML code. 3. Start the watcher directly from npm without installing the package: ```bash npx dolphin-template # OR (if package is not installed) npx --package=dolphincss dolphin-template ``` 4. Save your HTML file. The watcher will dynamically fetch the component templates from GitHub and inject them directly into your local file! --- ## ๐Ÿง  Dynamic Runtime Styling Engine (`dolphincss/ub`) The `ub` (Utility Builder) engine generates OKLCH color shades and dynamic styles at runtime with browser-native performance. Suitable for IoT dashboards, analytics, real-time data visualization, and applications requiring dynamic styling based on runtime values. ### ๐ŸŽฏ Universal `map()` Function Maps any input range to the 0-255 scale system used by DolphinCSS: ```javascript import { ub, map } from 'dolphincss/ub'; // Color mapping map(temp, 0, 50, 'red') // โ†’ 'red-142' // Multi-color gradients map(battery, 0, 100, ['red', 'orange', 'green']) // Dimensions map(500, 0, 1000, 'w') // โ†’ 'w-128' โ†’ 512px // Spacing map(20, 0, 40, 'p') // โ†’ 'p-128' โ†’ 512px // Effects map(50, 0, 100, 'opacity') // โ†’ 'opacity-128' โ†’ 50% ``` #### Example: IoT Sensor Dashboard ```jsx function SensorDashboard({ sensors }) { return (
๐ŸŒก๏ธ {sensors.temp}ยฐC
๐Ÿ”‹ {sensors.battery}%
); } ``` #### Example: Dynamic Charts ```jsx function BarChart({ data }) { const maxValue = Math.max(...data.map(d => d.value)); return (
{data.map((item, i) => (
))}
); } ``` ### Technical Details **Performance:** * Pre-generating all 256 shades ร— 9 colors with variants would create 400,000+ CSS classes (40MB+) * Runtime generation keeps core CSS at 319KB while providing access to all shades on-demand * LRU caching: 2,000 class entries, 500 color combinations * Cache performance: 0.001ms hits, 0.1ms misses, 85-95% hit rate * Uses Constructable Stylesheets API for native browser rendering **Features:** * Dynamic OKLCH color generation (0-255 scale) * Automatic text contrast calculation * Multi-color gradient support with auto-distribution * Custom color stops * Works with standard CSS properties (width, height, padding, margin, opacity, scale) * Compatible with responsive variants (`lg:`) and pseudo-states (`hover:`) * TypeScript definitions included ### โš™๏ธ How to Import ```javascript import { // Core ub, debugUB, clearUBCache, oklch, // Spacing p, pt, pb, pl, pr, m, mt, mb, ml, mr, w, h, scale, // Border / Shadow / Rounded / Opacity border, borderT, borderR, borderB, borderL, borderX, borderY, rounded, shadow, opacity, // Color helpers bg, text, // Gradient helpers gradient, gradientAngle, gradientVertical, gradientHorizontal, gradientRadial, gradientTriple, // Layout helpers grid, autoGrid, autoLayout, span, row, // Animation helpers animate, widthAnim, heightAnim, paddingAnim, marginAnim, bgAnim, opacityAnim, roundedAnim, scaleAnim, infiniteAnim, clickAnim, bgFill, // Shorthand objects btn, input, card, // IoT data mapping map, } from 'dolphincss/ub'; ``` ### ๐ŸŽฏ Universal `map()` Function API The `map()` function provides a unified interface for mapping any value range to the 0-255 scale system: ```typescript // Function signature map(value: number, min: number, max: number, config?: string | string[] | ColorStop[]): string | number // Examples map(50, 0, 100) // โ†’ 128 (raw normalized value) map(28, 0, 50, 'red') // โ†’ 'red-142' map(75, 0, 100, ['red', 'orange', 'green']) // โ†’ 'green-191' map(500, 0, 1000, 'w') // โ†’ 'w-128' map(20, 0, 40, 'p') // โ†’ 'p-128' map(50, 0, 100, 'opacity') // โ†’ 'opacity-128' ``` **Supported Properties:** - **Colors**: Any color name (`red`, `blue`, `green`, `purple`, `orange`, `pink`, `teal`, `amber`, `gray`) - **Dimensions**: `w`, `h`, `width`, `height` - **Spacing**: `p`, `pt`, `pb`, `pl`, `pr`, `m`, `mt`, `mb`, `ml`, `mr`, `gap` - **Effects**: `opacity`, `scale`, `border` **Multi-Color Gradients:** ```javascript // 2 colors map(value, 0, 100, ['red', 'green']) // 3+ colors (auto-distributed) map(value, 0, 100, ['blue', 'purple', 'pink', 'red']) // Custom stops map(value, 0, 100, [ { at: 0, color: 'blue' }, { at: 128, color: 'purple' }, { at: 255, color: 'red' } ]) ``` ### ๐Ÿช„ Core Features #### 1. Dynamic OKLCH Shading (0-255 Scale) Generate arbitrary, dynamically computed color shades and gradients on the fly: ```jsx // 128 starts a medium red, 255 ends a very dark blue
I am a mathematically perfect gradient!
// You can feed it dynamic states or sliders:
Volume Level: {Math.round((volumeLevel/255)*100)}%
``` #### 2. Auto-Inversion Text Contrast You never have to manually adjust text color when background colors change. The `ub` engine dynamically parses the OKLCH lightness (L) and average hue (H) of the background, and automatically applies high-contrast light or dark text color (`oklch(...) !important`) to guarantee perfect readability! #### 3. Ultra-Fast LRU Class Caching The engine includes a double-layer LRU Cache (caches compiled color codes and class list parses). If a class (even a standard static CSS class like `transition-all` or `p-4`) is evaluated again, the engine returns it instantly in **O(1) time** with **0ms latency**, preventing redundant browser style recalculations and regex parses. #### 4. Dynamic Transitions & Animations Define dynamically timed transitions in JSX: ```jsx // Fills background color from left to red-128 in 500ms className={ub("card bg-fill-left-red-128-500ms")} ``` #### 5. Dynamic Sizing with Custom CSS Units You are no longer limited to pixel-based sizes like `w-4` (16px). You can now supply arbitrary values with custom CSS units (like `%`, `px`, `rem`, `em`, `vh`, `vw`) directly in your utility classes: - `w-58%` โž” generates `width: 58% !important;` - `w-12.5rem` โž” generates `width: 12.5rem !important;` - `h-50vh` โž” generates `height: 50vh !important;` This eliminates the need for inline style mapping like `style={{ width: `${val}%` }}`! #### 6. Smart Fallback Background Shading For IoT and quick data mappings, you can omit the `bg-` prefix when utilizing color shades. The engine automatically fallbacks to background shading if a raw color shade is provided: - `ub(map.heat(load, 0, 100))` โž” outputs `ub-xxxx` which applies `background: oklch(...) !important;` - `ub("red-128")` โž” defaults to background styling for `"bg-red-128"`. #### 7. Self-Healing Connection (Vite HMR Safety) Modern dev servers with Hot Module Replacement (HMR) can dynamically refresh components and clear `document.adoptedStyleSheets`. The `ub` engine has built-in connection checking that automatically detects stylesheet disconnection and re-attaches itself instantly to keep real-time UI values active and styled correctly. --- ## ๐Ÿ“– Complete `ub` Class Syntax Reference ### ๐ŸŽจ Colors ``` bg-{color}-{shade} โ†’ background color (e.g. bg-blue-128) bg-{color}-{shade}/{opacity} โ†’ with opacity (e.g. bg-blue-128/50) text-{color}-{shade} โ†’ text color (e.g. text-red-200) border-{color}-{shade} โ†’ border color (e.g. border-green-100) ``` Colors: `red` `blue` `green` `purple` `orange` `pink` `teal` `amber` `gray` Shade: `0โ€“255` (0 = lightest, 255 = darkest) ### ๐Ÿ“ Spacing ``` p-{n} pt-{n} pb-{n} pl-{n} pr-{n} โ†’ padding (n ร— 4px) m-{n} mt-{n} mb-{n} ml-{n} mr-{n} โ†’ margin (n ร— 4px) w-{n} h-{n} โ†’ size (n ร— 4px) scale-{n} โ†’ CSS scale transform opacity-{n} โ†’ opacity 0โ€“100 ``` ### ๐Ÿ”ฒ Border, Shadow, Rounded ``` border โ†’ 1px solid border border-{n} โ†’ n px border border-t-{n} border-b-{n} border-l-{n} border-r-{n} โ†’ single side border-x-{n} border-y-{n} โ†’ horizontal / vertical rounded-{n} โ†’ border-radius (e.g. rounded-2) rounded-full โ†’ border-radius: 9999px shadow-{1โ€“10} โ†’ box-shadow scale ``` ### ๐Ÿ“ฆ Flexbox / Grid ``` flex-center flex-between flex-left flex-right flex-around flex-evenly flex-start flex-end flex-stretch flexcol-center flexcol-between flexcol-left flexcol-right grid-{cols}x{rows}-{gap} โ†’ explicit grid auto-grid-{minWidth}-{gap} โ†’ auto-fit grid auto-layout-{row|col|wrap}-{align}-{gap} span-{n} โ†’ grid-column: span n row-{n} โ†’ grid-row: span n full โ†’ grid-column: 1 / -1 ``` ### ๐ŸŒˆ Gradients ``` gradient-{c1}-{s1}-{c2}-{s2} โ†’ 135deg gradient gradient-{angle}deg-{c1}-{s1}-{c2}-{s2} โ†’ custom angle gradient-vert-{c1}-{s1}-{c2}-{s2} โ†’ top to bottom gradient-horiz-{c1}-{s1}-{c2}-{s2} โ†’ left to right gradient-radial-{c1}-{s1}-{c2}-{s2} โ†’ radial gradient-{c1}-{s1}-{c2}-{s2}-{c3}-{s3} โ†’ 3-color gradient ``` ### ๐Ÿƒ Component Shorthands ```jsx // Buttons className={ub(btn.primary)} // โ†’ "btn btn-primary" className={ub(btn.danger)} // โ†’ "btn btn-danger" className={ub(btn.ghost)} // โ†’ "btn btn-ghost" className={ub(btn.glow)} // โ†’ "btn btn-glow" // Also: btn.sm btn.md btn.lg btn.secondary btn.success btn.warning btn.outline // Inputs className={ub(input.base)} // โ†’ "input" className={ub(input.error)} // โ†’ "input input-error" // Also: input.sm input.md input.lg input.success // Cards className={ub(card.glass)} // โ†’ "card card-glass" className={ub(card.hover)} // โ†’ "card card-hover" className={ub(card.click)} // โ†’ "card card-click card-hover" ``` ### ๐ŸŽฌ Animations ``` // Property animation (from โ†’ to in Nms) {prop}-{from}-{to}-{N}ms โ†’ one-shot {prop}-{from}-{to}-{N}ms-infinite โ†’ loops forever hover:{prop}-{from}-{to}-{N}ms โ†’ triggers on hover click:{prop}-{from}-{to}-{N}ms โ†’ triggers on click // Examples: w-10-50-300ms โ†’ width 40px โ†’ 200px in 300ms scale-50-110-200ms โ†’ scale 0.5 โ†’ 1.1 in 200ms opacity-0-100-400ms โ†’ fade in p-2-8-250ms โ†’ padding grow rounded-2-full-300ms โ†’ pill animation // Background fill sweep bg-fill-left-red-128-500ms โ†’ fills red from left in 500ms bg-fill-right-blue-200-800ms โ†’ fills blue from right in 800ms bg-fill-top-green-100-600ms bg-fill-bottom-purple-150-400ms // Color animation (bg or text) bg-blue-50-200-500ms โ†’ bg transitions shade 50โ†’200 in 500ms bg-red-100-255-1000ms-infinite โ†’ loops forever text-green-128-255-300ms โ†’ text color animates ``` ### ๐ŸŽฏ Variants (Prefix Modifiers) ``` hover:{class} โ†’ applies on hover (e.g. hover:scale-110) active:{class} โ†’ applies on active focus:{class} โ†’ applies on focus // Responsive breakpoints sm:{class} โ†’ min-width: 640px md:{class} โ†’ min-width: 768px lg:{class} โ†’ min-width: 1024px xl:{class} โ†’ min-width: 1280px 2xl:{class} โ†’ min-width: 1536px // Combine prefix + class lg:flex-center hover:bg-blue-200 sm:p-2 lg:p-8 ``` ### ๐Ÿ”ง Helper Functions (JS API) ```jsx import { bg, text, gradient, gradientVertical, gradientHorizontal, gradientRadial, gradientAngle, gradientTriple, widthAnim, heightAnim, bgAnim, scaleAnim, opacityAnim, roundedAnim, infiniteAnim } from 'dolphincss/ub'; // Color helpers bg('blue', 128) // โ†’ "bg-blue-128" bg('red', 200, 50) // โ†’ "bg-red-200/50" (with opacity) text('green', 100) // โ†’ "text-green-100" // Gradient helpers gradient('blue', 100, 'purple', 200) // โ†’ "gradient-blue-100-purple-200" gradientVertical('red', 128, 'orange', 200) // โ†’ "gradient-vert-red-128-orange-200" gradientHorizontal('teal', 100, 'blue', 200) // โ†’ "gradient-horiz-teal-100-blue-200" gradientRadial('pink', 100, 'purple', 200) // โ†’ "gradient-radial-pink-100-purple-200" gradientAngle(45, 'blue', 100, 'green', 200) // โ†’ "gradient-45deg-blue-100-green-200" gradientTriple('red',100,'blue',150,'purple',200) // โ†’ 3-stop gradient // Animation helpers widthAnim(10, 50, 300) // โ†’ "w-10-50-300ms" heightAnim(20, 80, 500) // โ†’ "h-20-80-500ms" scaleAnim(50, 110, 200) // โ†’ "scale-50-110-200ms" opacityAnim(0, 100, 400) // โ†’ "opacity-0-100-400ms" roundedAnim(2, 16, 300) // โ†’ "rounded-2-16-300ms" bgAnim('blue', 50, 'blue', 200, 500) // โ†’ "bg-blue-50-blue-200-500ms" infiniteAnim('scale', 90, 110, 1000) // โ†’ loops forever ``` ### ๐Ÿ› ๏ธ Debug & Cache ```jsx import { debugUB, clearUBCache } from 'dolphincss/ub'; console.log(debugUB()); // โ†’ { classCache: 42, styleCount: 38, totalRequests: 150, // cacheHits: 108, totalSegmentRequests: 210, version: 'v19.0.3' } clearUBCache(); // Flush all cached styles (useful after theme change) ``` --- ## ๐Ÿš€ Available Magic Components Type any of these magic markers in your `.jsx` or `.tsx` file, hit save, and watch the code generate instantly: - `
` (Beautiful Floating Label Form) - `
` (Minimalist Standard Label Form) - `
` (Responsive Data Table) - `
` (Notification Toast) - `
` (Native HTML Dialog Modal) - `
` (Button Variants Showcase) - `
` (Glassmorphic Profile Card) - `
` (Responsive Product/Car Grid) - `
` (Sleek Navigation Bar) - `
` (Modern Header/Navbar) - `
` (Premium Footer Section) - `
` (Modern Alert Box) - `
` (Status Badges) - `
` (Stunning Landing Page Hero) - `
` (Premium Pricing Tables) - `
` (Vertical Activity Timeline) - `
` (Modern Messaging Interface) - `
` (Interactive Image Slider) - `
` (Drag & Drop File Upload) - `
` (Interactive 5-Star Rating) - `
` (Progress Stepper) - `
` (Page Navigation Controls) - `
` (Off-canvas Glass Sidebar) - `
` (Navigation Trail) ## ๐ŸŽญ The Power of Variants (fx-*) DolphinCSS ships with world-class, pre-built global variants. Instead of writing 15 Tailwind utility classes to create a glassmorphism effect, just use one class! ### ๐ŸŒŸ Premium Effects Combine these on any div, card, or container: - fx-glass (Classic Frosted Glass) - fx-crystal (Ultra-clear Crystal Border) - fx-neon (Cyberpunk Neon Glow) - fx-holo (Holographic Matrix) - fx-flare (Solar Flare Gradient) - fx-cyber (Cyberpunk Aesthetic) - fx-nebula (Galactic Nebula Depth) - fx-metal (Liquid Mercury) - fx-aurora (Frosted Aurora) - fx-float (Quantum Float on Hover) ### ๐Ÿ”ฅ Advanced Glows & Animations Bring your UI to life instantly: - glow (Standard Hover Glow) - glow pulse (Continuous Pulsing Glow) - glow wave (Ocean Wave Animation) ### ๐ŸŽจ Global Colors & Buttons Propagate theme colors cleanly: ```jsx {/* Perfect Circle Icons */} ``` --- ## ๐ŸŒ Auto-Push Marker & Sync Engine (Cloud UI Bank) DolphinCSS includes a revolutionary **Bi-directional Cloud Sync Engine** that lets you register, update, inject, and delete custom components directly from your code workspace, with absolute framework portability (React, Svelte, Vue, PHP, HTML, Django). ### โš™๏ธ Setup configuration (`dolphin.config.json`) Create a `dolphin.config.json` file in your project root to authenticate with the Cloud UI Bank: ```json { "pushUrl": "http://localhost:3000/api/templates/push", "secretKey": "dolphin-admin-2025", "username": "john_dev", "author": "John Shrestha" } ``` * **First-time setup**: Use the global secret key (`dolphin-admin-2025`). The server will automatically register your username profile, generate a unique developer-specific API token, and the plugin/watcher will **auto-save** it back into your `dolphin.config.json` under `"secretKey"`! --- ### ๐Ÿ› ๏ธ Advanced Code Markers (State Actions) Simply write these CSS classes on your container tags and press **Save (Ctrl + S)**. The dev server / watcher handles the synchronization instantly: #### 1. ๐Ÿ“ค Publish / Create (`dolphin-push--[name]--[variant]`) Uploads the local component code and metadata to the Cloud UI Bank. ```html

Card Title

Content...

``` * *On Save:* Pushes component markup and renames class to `dolphin-pushed--my-card--glass`. #### 2. ๐Ÿ”„ Update / Replace (`dolphin-put--` or `dolphin-patch--`) Performs updates to component settings and code on the server. ```html

Card Title (Updated)

Content...

``` * *On Save:* Syncs modifications to the DB and renames class to `dolphin-patched--my-card--glass`. #### 3. ๐Ÿ“ฅ Pull / Inject (`dolphin-inject--[name]--[variant]`) Downloads the template markup from the server database and embeds it directly inside your local tag. ```html
``` * *On Save:* Inserts the formatted markup and renames class to `dolphin-injected--my-card--glass`. #### 4. ๐Ÿ—‘๏ธ Delete (`dolphin-delete--[name]--[variant]`) Deletes the component from the cloud database. ```html
...
``` * *On Save:* Removes the remote component and renames class to `dolphin-deleted--my-card--glass`. --- ### ๐Ÿ‘จโ€๐Ÿ’ป Developer Dashboard (`/dashboard`) Log in to the Web Portal Dashboard using your username and credentials to manage your creations visually: * **Live Iframe Preview**: Inspect how your templates render in an isolated, dark-themed ocean HSL glassmorphism environment. * **PrismJS Code Viewer**: Read and copy raw component code with a single click. * **Component CRUD**: Edit metadata, category, version, privacy toggle (`isPublic`), and premium tier (`isPremium`). * **Developer API Token**: Copy your personal API token from the sidebar to authorize other local workspaces. --- **Built with โค๏ธ in Nepal.** Ready for the future of UI development.