@k3000/ce 0.1.0 → 0.2.1

package/console/components/g-icon.mjs

@@ -0,0 +1,82 @@
+import { useAttr, useRef } from "../../ce.mjs";
+
+export const innerHTML = `
+<svg ref="svg" class="{{classStr}}" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path ref="path" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
+</svg>
+<div class="{{hasDot ? '' : 'hidden'}} absolute top-0 right-0 transform translate-x-[20%] -translate-y-[20%] flex h-2.5 w-2.5">
+    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
+    <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-red-500 border-[1.5px] border-white dark:border-gray-800"></span>
+</div>
+<div class="{{badge ? '' : 'hidden'}} absolute top-0 right-0 transform translate-x-[30%] -translate-y-[30%] flex items-center justify-center z-10">
+    <span class="relative inline-flex rounded-full bg-red-500 text-white text-[10px] items-center justify-center px-1 min-w-[16px] h-[16px] border-[1.5px] border-white dark:border-gray-800 font-medium whitespace-nowrap leading-none shadow-sm">{{badge}}</span>
+</div>
+`
+
+// Icon paths mapped by name
+const icons = {
+    system: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z',
+    system_inner: 'M15 12a3 3 0 11-6 0 3 3 0 016 0z', // Need to add multiple paths if needed, here we simplify or append
+    user: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z',
+    role: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.956 11.956 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z',
+    menu: 'M4 6h16M4 12h16M4 18h16',
+    tools: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z', // Combining paths for simplicity for now
+    search: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z',
+    button: 'M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z',
+    home: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6',
+    edit: 'M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z',
+    delete: 'M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16',
+    add: 'M12 4v16m8-8H4',
+    check: 'M5 13l4 4L19 7',
+    close: 'M6 18L18 6M6 6l12 12',
+    info: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+    warning: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',
+    view: 'M15 12a3 3 0 11-6 0 3 3 0 016 0zM2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z',
+    logout: 'M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1',
+    upload: 'M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12',
+    download: 'M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4',
+    refresh: 'M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15'
+}
+
+export default class extends HTMLElement {
+    // name = ''
+    classStr = ''
+    size = ''
+    color = ''
+    hasDot = false
+    badge = ''
+
+    constructor() {
+        super()
+        this.style.display = 'inline-flex'
+        this.style.alignItems = 'center'
+        this.style.justifyContent = 'center'
+        this.style.position = 'relative'
+
+        const attr = useAttr(this)
+        this.name = this.name || attr.name || ''
+        this.size = attr.size || ''
+        this.color = attr.color || ''
+        this.badge = attr.badge || ''
+        this.hasDot = !this.badge && attr.dot !== undefined && attr.dot !== 'false'
+        this.classStr = attr.class || (this.size ? '' : 'w-5 h-5')
+    }
+
+    ready() {
+        const { path, svg } = useRef(this)
+
+        if (this.size) {
+            svg.style.width = this.size
+            svg.style.height = this.size
+        }
+        if (this.color) {
+            svg.style.color = this.color
+        }
+
+        if (this.name && icons[this.name]) {
+            path.setAttribute('d', icons[this.name])
+        } else {
+            path.setAttribute('d', 'M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z') // default info icon
+        }
+    }
+}

package/console/components/g-image.mjs

@@ -0,0 +1,127 @@
+import { useAttr, bind, useRef } from "../../ce.mjs";
+
+const htmlStr = `
+<div class="relative overflow-hidden inline-flex items-center justify-center {{wrapClass}} {{isLoading ? 'bg-white/20 dark:bg-gray-800/20 animate-pulse' : 'bg-white/10 dark:bg-gray-800/10'}} transition-colors" style="{{wrapStyle}}">
+    <!-- Image -->
+    <img ref="img" src="{{src}}" alt="{{alt}}" class="w-full h-full object-{{fit}} {{isLoaded ? 'opacity-100' : 'opacity-0'}} transition-opacity duration-300 {{imgClass}}" style="{{imgStyle}}" {{lazy ? 'loading="lazy"' : ''}} />
+    
+    <!-- Loading State -->
+    <div class="absolute inset-0 flex flex-col items-center justify-center text-gray-400 dark:text-gray-500 {{isLoading ? '' : 'hidden'}} bg-white/40 dark:bg-gray-800/40 backdrop-blur-sm">
+        <slot name="loading">
+            <svg class="w-6 h-6 animate-spin text-blue-500/70" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+        </slot>
+    </div>
+
+    <!-- Error State -->
+    <div class="absolute inset-0 flex flex-col items-center justify-center text-gray-400 dark:text-gray-500 {{isError ? '' : 'hidden'}} bg-white/40 dark:bg-gray-800/40 backdrop-blur-sm">
+        <slot name="error">
+            <g-icon name="view" class="w-6 h-6 mb-1 opacity-50"></g-icon>
+            <span class="text-[10px] sm:text-xs">加载失败</span>
+        </slot>
+    </div>
+</div>
+`
+
+export default class extends HTMLElement {
+    src = ''
+    alt = ''
+    fit = 'cover' // 'fill', 'contain', 'cover', 'none', 'scale-down'
+    position = '' // 'top', 'bottom', 'center', 'left', 'right', or string coords
+    lazy = false
+    wrapClass = ''
+    wrapStyle = ''
+    imgClass = ''
+    imgStyle = ''
+    width = ''
+    height = ''
+
+    isLoaded = false
+    isError = false
+    isLoading = true
+
+    constructor() {
+        super()
+        this.style.display = 'inline-block'
+        const attr = useAttr(this)
+
+        this.src = attr.src || ''
+        this.alt = attr.alt || ''
+        this.fit = attr.fit || 'cover'
+        this.position = attr.position || ''
+        this.lazy = attr.lazy !== undefined && attr.lazy !== 'false'
+        this.width = attr.width || ''
+        this.height = attr.height || ''
+
+        let baseClass = attr.class || ''
+
+        // If neither width/height nor explicit class dimensions are provided, default to a sensible size
+        if (!this.width && !this.height && !baseClass.includes('w-') && !baseClass.includes('h-')) {
+            baseClass += ' w-24 h-24 sm:w-32 sm:h-32'
+        }
+
+        if (this.width) this.wrapStyle += `width: ${this.width}; `
+        if (this.height) this.wrapStyle += `height: ${this.height}; `
+
+        if (this.position) this.imgStyle += `object-position: ${this.position}; `
+
+        // Handling shapes
+        if (attr.round === 'true') {
+            baseClass += ' rounded-full'
+        } else if (attr.radius) {
+            baseClass += ` rounded-[${attr.radius}]`
+        } else if (!baseClass.includes('rounded')) {
+            baseClass += ' rounded-2xl' // Default glass rounded corner
+        }
+
+        // Add glass border
+        this.wrapClass = baseClass + ' backdrop-blur-md border border-white/60 dark:border-white/10 shadow-[inner_0_1px_1px_rgba(255,255,255,0.8),0_4px_12px_rgba(0,0,0,0.05)] dark:shadow-[inner_0_1px_1px_rgba(255,255,255,0.1),0_4px_12px_rgba(0,0,0,0.2)]'
+
+        // Pass some specific classes directly to img if needed based on shape constraints
+        if (baseClass.includes('rounded-full')) {
+            this.imgClass = 'rounded-full'
+        } else if (baseClass.includes('rounded-2xl')) {
+            this.imgClass = 'rounded-2xl'
+        } else if (attr.radius) {
+            this.imgClass = `rounded-[${attr.radius}]`
+        }
+
+        if (!this.src) {
+            this.isLoading = false
+            this.isError = true
+        }
+    }
+
+    ready() {
+        const nodes = bind(htmlStr).create(this)
+        this.appendChild(nodes)
+
+        const { img } = useRef(this)
+
+        if (this.src) {
+            // Check if image is already cached/loaded completely
+            if (img.complete && img.naturalHeight !== 0) {
+                this.setLoaded()
+            } else {
+                img.onload = () => this.setLoaded()
+                img.onerror = () => this.setError()
+            }
+        }
+    }
+
+    setLoaded() {
+        this.isLoading = false
+        this.isLoaded = true
+        this.isError = false
+        if (this.update) this.update()
+    }
+
+    setError() {
+        this.isLoading = false
+        this.isLoaded = false
+        this.isError = true
+        if (this.update) this.update()
+    }
+}

package/console/components/g-popup.mjs

@@ -0,0 +1,130 @@
+import { useAttr, bind } from "../../ce.mjs";
+import {useWatch} from "../../index.mjs";
+
+let zIndex = 2000
+
+export const innerHTML = `
+<div class="fixed inset-0 flex {{wrapClass}} transition-all duration-300 {{visible ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}}" style="z-index: {{zIndex}};">
+    <!-- Overlay -->
+    <div class="absolute inset-0 bg-black/40 backdrop-blur-sm {{overlay !== 'false' ? '' : 'hidden'}}" onclick="{{onOverlayClick}}"></div>
+    
+    <!-- Content pane -->
+    <div class="relative bg-white/80 dark:bg-gray-800/80 backdrop-blur-2xl shadow-2xl transition-all duration-300 {{contentClass}} {{visible ? visibleClass : hiddenClass}}" onclick="event.stopPropagation()">
+        <slot></slot>
+    </div>
+</div>
+`
+
+export default class extends HTMLElement {
+    visible = false
+    position = 'center'
+    overlay = 'true'
+    closeOnClickOverlay = 'true'
+    round = 'false'
+    zIndex = 2000
+
+    wrapClass = 'items-center justify-center p-4'
+    contentClass = 'rounded-2xl max-w-full max-h-full overflow-y-auto'
+    visibleClass = 'opacity-100 scale-100 translate-y-0 translate-x-0'
+    hiddenClass = 'opacity-0 scale-95'
+
+    constructor() {
+        super()
+        this.style.display = 'contents'
+        const attr = useAttr(this)
+
+        this.position = attr.position || 'center'
+        this.overlay = attr.overlay || 'true'
+        this.closeOnClickOverlay = attr['close-on-click-overlay'] || 'true'
+        this.round = attr.round || 'false'
+
+        this._initClasses()
+
+        const watch = useWatch(this)
+
+        watch({
+            status: (status, value) => {
+
+                if (status === value) return
+
+                if (status) {
+
+                    this.open()
+
+                } else {
+
+                    this.close()
+                }
+            }
+        })
+    }
+
+    ready() {
+    }
+
+    _initClasses() {
+        const isRound = this.round === 'true'
+        switch (this.position) {
+            case 'bottom':
+                this.wrapClass = 'items-end justify-center'
+                this.contentClass = `w-full max-h-[90vh] overflow-y-auto ${isRound ? 'rounded-t-3xl' : ''}`
+                this.visibleClass = 'translate-y-0 opacity-100'
+                this.hiddenClass = 'translate-y-full opacity-0'
+                break
+            case 'top':
+                this.wrapClass = 'items-start justify-center'
+                this.contentClass = `w-full max-h-[90vh] overflow-y-auto ${isRound ? 'rounded-b-3xl' : ''}`
+                this.visibleClass = 'translate-y-0 opacity-100'
+                this.hiddenClass = '-translate-y-full opacity-0'
+                break
+            case 'left':
+                this.wrapClass = 'items-center justify-start'
+                this.contentClass = `h-full max-w-[90vw] overflow-y-auto ${isRound ? 'rounded-r-3xl' : ''}`
+                this.visibleClass = 'translate-x-0 opacity-100'
+                this.hiddenClass = '-translate-x-full opacity-0'
+                break
+            case 'right':
+                this.wrapClass = 'items-center justify-end'
+                this.contentClass = `h-full max-w-[90vw] overflow-y-auto ${isRound ? 'rounded-l-3xl' : ''}`
+                this.visibleClass = 'translate-x-0 opacity-100'
+                this.hiddenClass = 'translate-x-full opacity-0'
+                break
+            case 'center':
+            default:
+                this.wrapClass = 'items-center justify-center p-4' // safe area
+                this.contentClass = `max-w-[90vw] max-h-[90vh] overflow-y-auto ${isRound ? 'rounded-3xl' : ''}`
+                this.visibleClass = 'opacity-100 scale-100'
+                this.hiddenClass = 'opacity-0 scale-95'
+                break
+        }
+    }
+
+    open() {
+        this.zIndex = zIndex++
+        this.visible = true
+        if (this.update) this.update()
+        if (this.onopen) this.onopen()
+
+        // Prevent body scroll
+        document.body.style.overflow = 'hidden'
+    }
+
+    close() {
+        this.visible = false
+        if (this.update) this.update()
+        if (this.onclose) this.onclose()
+
+        setTimeout(() => {
+            const hasOpenPopups = Array.from(document.querySelectorAll('g-popup')).some(p => p.visible)
+            if (!hasOpenPopups) {
+                document.body.style.overflow = ''
+            }
+        }, 300)
+    }
+
+    onOverlayClick() {
+        if (this.closeOnClickOverlay === 'true') {
+            this.close()
+        }
+    }
+}

package/console/components/g-row.mjs

@@ -0,0 +1,120 @@
+import { useAttr } from "../../ce.mjs";
+
+export default class extends HTMLElement {
+    constructor() {
+        super()
+        this.style.display = 'flex'
+        this.style.flexWrap = 'wrap'
+        this.style.width = '100%'
+        this.style.boxSizing = 'border-box'
+
+        const attr = useAttr(this)
+
+        const justify = attr.justify || 'start'
+        const align = attr.align || 'top'
+        const gutter = attr.gutter || '0'
+        const classStr = attr.class || ''
+
+        // Map justify to flexbox
+        const justifyMap = {
+            'start': 'flex-start',
+            'end': 'flex-end',
+            'center': 'center',
+            'space-around': 'space-around',
+            'space-between': 'space-between'
+        }
+        this.style.justifyContent = justifyMap[justify] || 'flex-start'
+
+        // Map align to flexbox
+        const alignMap = {
+            'top': 'flex-start',
+            'middle': 'center',
+            'bottom': 'flex-end'
+        }
+        this.style.alignItems = alignMap[align] || 'flex-start'
+
+        // Handle gutter logic via context
+        // Gutter can be "20" or "[20, 30]"
+        let gutterX = 0
+        let gutterY = 0
+
+        if (gutter) {
+            if (gutter.startsWith('[')) {
+                try {
+                    const parsed = JSON.parse(gutter)
+                    if (Array.isArray(parsed) && parsed.length >= 2) {
+                        gutterX = Number(parsed[0])
+                        gutterY = Number(parsed[1])
+                    }
+                } catch (e) { }
+            } else {
+                gutterX = Number(gutter)
+            }
+        }
+
+        if (gutterX || gutterY) {
+            const mx = gutterX ? `-${gutterX / 2}px` : '0'
+            const my = gutterY ? `-${gutterY / 2}px` : '0'
+
+            // Apply negative margins to row host
+            this.style.marginLeft = mx
+            this.style.marginRight = mx
+            this.style.marginTop = my
+            this.style.marginBottom = my
+
+            // Create a mutation observer to pass gutter context to children <g-col> dynamically or initially
+            this.xPadding = gutterX ? `${gutterX / 2}px` : '0'
+            this.yPadding = gutterY ? `${gutterY / 2}px` : '0'
+        }
+
+        if (classStr) {
+            this.className = this.className ? this.className + ' ' + classStr : classStr
+        }
+
+        // Listen to children additions since standard Web Components don't easily do React-style context down effortlessly unless via MutationObserver or passing via DOM
+        this._setupObserver()
+    }
+
+    _setupObserver() {
+        this._observer = new MutationObserver((mutations) => {
+            if (!this.xPadding && !this.yPadding) return;
+
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'childList') {
+                    mutation.addedNodes.forEach(node => {
+                        this._applyGutterToChild(node)
+                    })
+                }
+            })
+        })
+    }
+
+    _applyGutterToChild(node) {
+        if (node.tagName === 'G-COL') {
+            if (this.xPadding) {
+                node.style.paddingLeft = this.xPadding
+                node.style.paddingRight = this.xPadding
+            }
+            if (this.yPadding) {
+                node.style.paddingTop = this.yPadding
+                node.style.paddingBottom = this.yPadding
+            }
+        }
+    }
+
+    connectedCallback() {
+        if (this._observer) {
+            this._observer.observe(this, { childList: true, subtree: false })
+        }
+        // Initially apply to existing children
+        if (this.xPadding || this.yPadding) {
+            Array.from(this.children).forEach(child => this._applyGutterToChild(child))
+        }
+    }
+
+    disconnectedCallback() {
+        if (this._observer) {
+            this._observer.disconnect()
+        }
+    }
+}

package/console/components/g-space.mjs

@@ -0,0 +1,21 @@
+import {useAttr} from "../../index.mjs";
+
+export const shadowRoot = `
+<style>
+div {
+    display: flex;
+    gap: {{gap || '8px'}};
+    flex-direction: {{direction}}
+}
+</style>
+<div>
+<slot></slot>
+</div>
+`
+
+export default class extends HTMLElement {
+    constructor() {
+        super()
+        Object.assign(this, useAttr(this))
+    }
+}

package/console/components/g-toast.mjs

@@ -0,0 +1,116 @@
+import { useAttr } from "../../ce.mjs";
+
+let zIndex = 5000
+
+export const innerHTML = `
+  <div class="toast-container fixed top-[45%] left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center gap-3 pointer-events-none" style="z-index: {{zIndex}};">
+      <slot></slot>
+  </div>
+`
+
+export default class extends HTMLElement {
+    constructor() {
+        super()
+        // this.style.display = 'contents'
+        this.zIndex = zIndex;
+    }
+
+    ready() {
+        // Expose to window globally
+        window.$toast = {
+            show: (msg, type = 'text', duration = 2000) => this.show(msg, type, duration),
+            success: (msg, duration = 2000) => this.show(msg, 'success', duration),
+            error: (msg, duration = 2000) => this.show(msg, 'error', duration),
+            warning: (msg, duration = 2000) => this.show(msg, 'warning', duration),
+            loading: (msg, duration = 0) => this.show(msg, 'loading', duration),
+            hide: () => this.hideAll()
+        }
+    }
+
+    show(msg, type = 'text', duration = 2000) {
+        let container = this.querySelector('.toast-container') || this.firstElementChild;
+        if (!container) return;
+
+        const item = document.createElement('div');
+
+        let iconHtml = '';
+        if (type === 'success') {
+            iconHtml = '<svg class="w-5 h-5 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>';
+        } else if (type === 'error') {
+            iconHtml = '<svg class="w-5 h-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>';
+        } else if (type === 'warning') {
+            iconHtml = '<svg class="w-5 h-5 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>';
+        } else if (type === 'loading') {
+            iconHtml = `<svg class="w-5 h-5 text-blue-400 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>`;
+        }
+
+        item.className = 'bg-gray-800/90 dark:bg-gray-200/90 text-white dark:text-gray-900 px-5 py-3 rounded-xl shadow-2xl backdrop-blur-md flex items-center gap-3 pointer-events-auto transition-all duration-300 transform scale-95 opacity-0 max-w-[80vw] !m-0 !mt-0 !mb-0 overflow-hidden';
+
+        // Starts with 0 height so the container shifts smoothly
+        item.style.maxHeight = '0px';
+        item.style.paddingTop = '0px';
+        item.style.paddingBottom = '0px';
+        item.style.opacity = '0';
+
+        item.innerHTML = `
+            ${iconHtml}
+            <span class="text-sm font-medium whitespace-pre-wrap break-words inline-block">${msg}</span>
+        `;
+
+        container.appendChild(item);
+
+        // Animate in
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                item.classList.remove('scale-95');
+                item.classList.add('scale-100');
+                item.style.maxHeight = '150px'; // sufficiently large value
+                item.style.paddingTop = '';
+                item.style.paddingBottom = '';
+                item.style.opacity = '1';
+            });
+        });
+
+        if (duration > 0) {
+            setTimeout(() => {
+                this._removeItem(item);
+            }, duration);
+        }
+
+        return () => this._removeItem(item);
+    }
+
+    _removeItem(item) {
+        if (!item.parentNode) return;
+        item.classList.remove('scale-100');
+        item.classList.add('scale-75');
+        item.style.opacity = '0';
+
+        setTimeout(() => {
+            if (!item.parentNode) return;
+
+            // 固定当前高度以便开始过渡动画
+            item.style.height = item.offsetHeight + 'px';
+            item.style.overflow = 'hidden';
+            item.offsetHeight; // 强制重绘
+
+            // 收缩高度和边距
+            item.style.height = '0px';
+            item.style.paddingTop = '0px';
+            item.style.paddingBottom = '0px';
+            item.style.marginTop = '0px';
+            item.style.marginBottom = '0px';
+
+            setTimeout(() => {
+                if (item.parentNode) item.parentNode.removeChild(item);
+            }, 300);
+        }, 150);
+    }
+
+    hideAll() {
+        const container = this.querySelector('.toast-container') || this.firstElementChild;
+        if (container) {
+            Array.from(container.children).forEach(item => this._removeItem(item));
+        }
+    }
+}