npm - @wsxjs/wsx-base-components - Versions diffs - 0.0.5 - Mend

@wsxjs/wsx-base-components 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/LICENSE +21 -0
package/README.md +204 -0
package/dist/index.cjs +6 -0
package/dist/index.js +1085 -0
package/package.json +57 -0
package/src/ColorPicker.css +188 -0
package/src/ColorPicker.wsx +416 -0
package/src/ColorPickerUtils.ts +116 -0
package/src/ReactiveCounter.css +304 -0
package/src/ReactiveCounter.wsx +244 -0
package/src/SimpleReactiveDemo.wsx +58 -0
package/src/SvgDemo.wsx +241 -0
package/src/SvgIcon.wsx +88 -0
package/src/ThemeSwitcher.css +91 -0
package/src/ThemeSwitcher.wsx +97 -0
package/src/XyButton.css +257 -0
package/src/XyButton.wsx +356 -0
package/src/XyButtonGroup.css +30 -0
package/src/XyButtonGroup.wsx +124 -0
package/src/index.ts +17 -0
package/src/jsx-inject.ts +2 -0
package/src/types/wsx.d.ts +6 -0

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2024 WSX Framework Contributors
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,204 @@
+# @wsxjs/wsx-base-components
+现代化的 Web Components 基础组件库，基于 WSX Framework 构建。
+## 🚀 快速开始
+### 安装
+```bash
+npm install @wsxjs/wsx-base-components
+```
+### 使用
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <script type="module">
+        import { XyButton } from '@wsxjs/wsx-base-components';
+    </script>
+</head>
+<body>
+    <xy-button variant="primary">Hello World</xy-button>
+</body>
+</html>
+```
+## 🎨 组件
+### XyButton - 现代按钮组件
+一个完全重新设计的现代化按钮组件，具有语义化设计、无障碍访问和响应式布局。
+#### 特性
+- **6种变体** - Primary, Secondary, Outline, Ghost, Danger, Link
+- **3种尺寸** - Small, Medium, Large
+- **完整状态** - Normal, Hover, Active, Disabled, Loading
+- **图标支持** - 左侧/右侧图标，SVG动画加载器
+- **布局选项** - Block, Rounded
+- **无障碍访问** - 键盘导航，ARIA支持
+- **响应式设计** - 移动端适配，高对比度模式
+#### 使用示例
+```html
+<!-- 基础用法 -->
+<xy-button variant="primary">Primary Button</xy-button>
+<xy-button variant="secondary">Secondary Button</xy-button>
+<xy-button variant="danger">Delete</xy-button>
+<!-- 图标按钮 -->
+<xy-button icon="🚀" variant="primary">Launch</xy-button>
+<xy-button icon="→" icon-position="right" variant="primary">Next</xy-button>
+<!-- 状态按钮 -->
+<xy-button loading variant="primary">Loading...</xy-button>
+<xy-button disabled variant="primary">Disabled</xy-button>
+<!-- 布局按钮 -->
+<xy-button block variant="primary">Full Width</xy-button>
+<xy-button rounded variant="primary">Rounded</xy-button>
+```
+#### API
+| 属性 | 类型 | 默认值 | 描述 |
+|------|------|--------|------|
+| `variant` | `string` | `"primary"` | 按钮变体：primary, secondary, outline, ghost, danger, link |
+| `size` | `string` | `"md"` | 按钮尺寸：sm, md, lg |
+| `disabled` | `boolean` | `false` | 是否禁用 |
+| `loading` | `boolean` | `false` | 是否显示加载状态 |
+| `icon` | `string` | `null` | 图标内容 |
+| `icon-position` | `string` | `"left"` | 图标位置：left, right |
+| `block` | `boolean` | `false` | 是否块级布局 |
+| `rounded` | `boolean` | `false` | 是否圆角样式 |
+| `href` | `string` | `null` | 链接地址（作为链接使用） |
+| `target` | `string` | `"_blank"` | 链接目标 |
+| `type` | `string` | `"button"` | 按钮类型：button, submit, reset |
+#### 事件
+```javascript
+// 监听点击事件
+button.addEventListener('xy-button-click', (event) => {
+    console.log('Button clicked:', event.detail);
+    // event.detail 包含：variant, size, disabled, loading
+});
+```
+## 🛠️ 开发
+### 安装依赖
+```bash
+pnpm install
+```
+### 构建
+```bash
+npm run build
+```
+### 开发模式
+```bash
+npm run dev
+```
+### 启动演示服务器
+```bash
+# 构建并启动演示服务器
+npm run demo
+# 或者直接启动静态服务器
+npm run start
+```
+访问 http://localhost:3000 查看演示页面。
+### 可用的脚本
+- `npm run build` - 构建生产版本
+- `npm run dev` - 开发模式（监听文件变化）
+- `npm run serve` - 启动预览服务器
+- `npm run demo` - 构建并启动演示服务器
+- `npm run start` - 启动静态文件服务器
+- `npm run clean` - 清理构建文件
+- `npm run typecheck` - TypeScript 类型检查
+- `npm run lint` - ESLint 检查
+- `npm run lint:fix` - ESLint 自动修复
+## 🎯 主题定制
+所有样式都通过 CSS 自定义属性控制：
+```css
+:host {
+    /* 颜色系统 */
+    --xy-button-primary-bg: #3b82f6;
+    --xy-button-primary-hover-bg: #2563eb;
+    --xy-button-primary-color: #ffffff;
+    /* 尺寸系统 */
+    --xy-button-sm-padding: 0.5rem 0.75rem;
+    --xy-button-md-padding: 0.75rem 1rem;
+    --xy-button-lg-padding: 1rem 1.5rem;
+    /* 视觉效果 */
+    --xy-button-border-radius: 0.5rem;
+    --xy-button-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+    --xy-button-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+```
+### 深色主题
+```css
+[data-theme="dark"] {
+    --xy-button-primary-bg: #1e40af;
+    --xy-button-secondary-bg: #374151;
+    --xy-button-outline-border: #4b5563;
+}
+```
+## ♿ 无障碍访问
+组件完全支持无障碍访问：
+- **键盘导航** - 支持 Enter 和 Space 键激活
+- **ARIA 属性** - 完整的屏幕阅读器支持
+- **焦点管理** - 清晰的焦点指示器
+- **语义化标签** - 正确的 HTML 结构
+## 📱 响应式设计
+- **移动端适配** - 自动调整尺寸和间距
+- **高对比度模式** - 支持用户偏好设置
+- **减少动画** - 尊重用户的可访问性偏好
+- **打印样式** - 完整的打印支持
+## 🌐 浏览器支持
+- Chrome 67+
+- Firefox 63+
+- Safari 11.1+
+- Edge 79+
+## 📄 许可证
+MIT License
+## 🤝 贡献
+欢迎提交 Issue 和 Pull Request！
+## 📚 相关链接
+- [WSX Framework](https://github.com/wsxjs/wsxjs)
+- [设计文档](./docs/modern-xybutton-design.md)
+- [在线演示](http://localhost:3000)

package/dist/index.cjs ADDED Viewed

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("@wsxjs/wsx-core"),Ut=':host{position:relative;display:inline-flex;padding:.25em .625em;box-sizing:border-box;vertical-align:middle;line-height:1.8;overflow:hidden;align-items:center;justify-content:center;font-size:14px;color:var(--fontColor, #333);border-radius:var(--borderRadius, .25em);background:var(--fontColor, #333);transition:background .3s,box-shadow .3s,border-color .3s,color .3s}:host([size="xxxs"]){padding:.03125em .0625em;font-size:6px;line-height:1;min-width:10px;min-height:8px;border-radius:1px}:host([size="xxs"]){padding:.0625em .125em;font-size:8px;line-height:1.1;min-width:14px;min-height:12px;border-radius:2px}:host([size="xs"]){padding:.125em .25em;font-size:10px;line-height:1.2;min-width:18px;min-height:16px;border-radius:3px}:host([size="sm"]){padding:.25em .5em;font-size:12px;line-height:1.4;min-width:24px;min-height:20px;border-radius:4px}:host([size="md"]){padding:.375em .75em;font-size:14px;line-height:1.5;min-width:32px;min-height:28px;border-radius:6px}:host([size="lg"]){padding:.5em 1em;font-size:14px;line-height:1.6;min-width:40px;min-height:32px;border-radius:6px}:host([size="xl"]){padding:.625em 1.25em;font-size:16px;line-height:1.6;min-width:48px;min-height:40px;border-radius:8px}:host([shape="circle"]){border-radius:50%}:host([disabled]),:host([loading]){pointer-events:none;opacity:.6}:host([block]){display:flex}:host([disabled]:not([variant])){background:#0000001a}:host([disabled]) .btn,:host([loading]) .btn{cursor:not-allowed;pointer-events:all}:host(:not([variant="primary"]):not([variant="danger"]):not([disabled]):hover),:host(:not([variant="primary"]):not([variant="danger"]):focus-within),:host([variant="flat"][focus]){color:var(--themeColor, #42b983);border-color:var(--themeColor, #42b983)}:host(:not([variant="primary"]):not([variant="danger"])) .btn:after{background-image:radial-gradient(circle,var(--themeColor, #42b983) 10%,transparent 10.01%)}:host([variant="primary"]){color:#fff;background:var(--themeBackground, var(--themeColor, #42b983))}:host([variant="danger"]){color:#fff;background:var(--themeBackground, var(--dangerColor, #ff7875))}:host([variant="dashed"]){border-style:dashed}:host([variant="flat"]),:host([variant="primary"]),:host([variant="danger"]){border:0;padding:calc(.25em + 1px) calc(.625em + 1px)}:host([variant="flat"]) .btn:before{content:"";position:absolute;background:var(--themeColor, #42b983);pointer-events:none;left:0;right:0;top:0;bottom:0;opacity:0;transition:.3s}:host([variant="flat"]:not([disabled]):hover) .btn:before{opacity:.1}:host(:not([disabled]):hover){z-index:1}:host([variant="flat"]:focus-within) .btn:before,:host([variant="flat"][focus]) .btn:before{opacity:.2}.btn{background:none;outline:0;border:0;position:absolute;left:0;top:0;width:100%;height:100%;padding:0;-webkit-user-select:none;user-select:none;cursor:unset}.loading{margin-right:.35em}::-moz-focus-inner{border:0}.btn:before{content:"";display:block;position:absolute;width:100%;height:100%;left:0;top:0;transition:.2s;background:#fff;opacity:0}:host(:not([disabled]):active) .btn:before{opacity:.2}.btn:after{content:"";display:block;position:absolute;width:100%;height:100%;left:var(--x, 0);top:var(--y, 0);pointer-events:none;background-image:radial-gradient(circle,#fff 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:translate(-50%,-50%) scale(10);opacity:0;transition:transform .3s,opacity .8s}.btn:not([disabled]):active:after{transform:translate(-50%,-50%) scale(0);opacity:.3;transition:0s}.icon{margin-right:.35em;transition:none}:host(:empty) .icon{margin:auto}:host(:empty){padding:.65em}:host([type="flat"]:empty),:host([type="primary"]:empty){padding:calc(.65em + 1px)}::slotted(.icon){transition:none}:host([href]){cursor:pointer}';var Qt=Object.create,F=Object.defineProperty,Zt=Object.getOwnPropertyDescriptor,Z=(e,t)=>(t=Symbol[e])?t:Symbol.for("Symbol."+e),tt=e=>{throw TypeError(e)},et=(e,t,o)=>t in e?F(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,te=(e,t)=>F(e,"name",{value:t,configurable:!0}),ee=e=>[,,,Qt((e==null?void 0:e[Z("metadata")])??null)],oe=["class","method","getter","setter","accessor","field","value","get","set"],ot=e=>e!==void 0&&typeof e!="function"?tt("Function expected"):e,re=(e,t,o,s,r)=>({kind:oe[e],name:t,metadata:s,addInitializer:n=>o._?tt("Already initialized"):r.push(ot(n||null))}),ie=(e,t)=>et(t,Z("metadata"),e[3]),se=(e,t,o,s)=>{for(var r=0,n=e[t>>1],a=n&&n.length;r<a;r++)n[r].call(o);return s},ne=(e,t,o,s,r,n)=>{var a,h,u,l=t&7,p=!1,m=0,g=e[m]||(e[m]=[]),c=l&&(r=r.prototype,l<5&&(l>3||!p)&&Zt(r,o));te(r,o);for(var d=s.length-1;d>=0;d--)u=re(l,o,h={},e[3],g),a=(0,s[d])(r,u),h._=1,ot(a)&&(r=a);return ie(e,r),c&&F(r,o,c),p?l^4?n:c:r},b=(e,t,o)=>et(e,typeof t!="symbol"?t+"":t,o),rt,R,it;rt=[i.autoRegister({tagName:"xy-button"})];class k extends(it=i.WebComponent){constructor(t={}){super({styles:Ut,styleName:"xy-button",...t}),b(this,"disabled",!1),b(this,"loading",!1),b(this,"toggle",!1),b(this,"checked",!1),b(this,"icon",null),b(this,"href",null),b(this,"type",null),b(this,"target","_blank"),b(this,"rel",null),b(this,"download",null),b(this,"variant","flat"),b(this,"size","md"),b(this,"btnElement"),b(this,"iconElement"),b(this,"loadingElement"),b(this,"handleMouseDown",o=>{if(this.disabled)return;const s=this.getBoundingClientRect(),r=o.clientX-s.left,n=o.clientY-s.top;this.style.setProperty("--x",`${r}px`),this.style.setProperty("--y",`${n}px`)}),b(this,"handleKeyDown",o=>{(o.code==="Enter"||o.code==="Space")&&o.stopPropagation()}),b(this,"handleClick",()=>{this.toggle&&!this.disabled&&(this.checked=!this.checked,this.checked?this.setAttr("checked",""):this.removeAttr("checked"))}),this.disabled=t.disabled||!1,this.loading=t.loading||!1,this.toggle=t.toggle||!1,this.checked=t.checked||!1,this.icon=t.icon||null,this.href=t.href||null,this.type=t.type||null,this.target=t.target||"_blank",this.rel=t.rel||null,this.download=t.download||null,this.variant=t.variant||"flat",this.size=t.size||"md"}static get observedAttributes(){return["disabled","icon","loading","href","type","target","rel","download","toggle","checked","variant","shape","block","size"]}render(){const t=!!this.href,o=i.jsx("a",{href:this.href,target:this.target,rel:this.rel||void 0,download:this.download||void 0,className:"btn",onMouseDown:this.handleMouseDown,onKeyDown:this.handleKeyDown,ref:r=>{this.btnElement=r}},this.renderContent()),s=i.jsx("button",{type:this.type||"button",disabled:this.disabled,className:"btn",onMouseDown:this.handleMouseDown,onKeyDown:this.handleKeyDown,ref:r=>{this.btnElement=r}},this.renderContent());return i.jsx("div",{className:"xy-button-container"},t?o:s)}renderContent(){const t=[];return this.loading&&t.push(i.jsx("div",{className:"loading",ref:o=>{this.loadingElement=o}},"Loading...")),!this.loading&&this.icon&&this.icon!=="null"&&t.push(i.jsx("div",{className:"icon","data-icon":this.icon,ref:o=>{this.iconElement=o}},this.icon)),t.push(i.jsx("slot",null)),t}onConnected(){this.addEventListener("click",this.handleClick)}onDisconnected(){this.removeEventListener("click",this.handleClick)}onAttributeChanged(t,o,s){switch(t){case"disabled":this.disabled=s!==null,this.updateButtonState();break;case"loading":this.loading=s!==null,this.updateButtonState(),this.rerender();break;case"icon":this.icon=s,this.rerender();break;case"href":this.href=s,this.rerender();break;case"type":this.type=s,this.updateButtonState();break;case"target":this.target=s||"_blank";break;case"rel":this.rel=s;break;case"download":this.download=s;break;case"toggle":this.toggle=s!==null;break;case"checked":this.checked=s!==null;break;case"variant":this.variant=s||"flat";break;case"size":this.size=s||"md";break}}updateButtonState(){this.btnElement&&(this.disabled||this.loading?(this.btnElement.setAttribute("disabled","disabled"),this.href&&this.btnElement instanceof HTMLAnchorElement&&this.btnElement.removeAttribute("href")):(this.btnElement.removeAttribute("disabled"),this.href&&this.btnElement instanceof HTMLAnchorElement&&(this.btnElement.href=this.href)),this.type&&this.btnElement instanceof HTMLButtonElement&&(this.btnElement.type=this.type))}focus(){var t;(t=this.btnElement)==null||t.focus()}get isDisabled(){return this.disabled}set isDisabled(t){t?this.setAttr("disabled",""):this.removeAttr("disabled")}get isLoading(){return this.loading}set isLoading(t){t?this.setAttr("loading",""):this.removeAttr("loading")}get isChecked(){return this.checked}set isChecked(t){t?this.setAttr("checked",""):this.removeAttr("checked")}get buttonIcon(){return this.icon}set buttonIcon(t){t?this.setAttr("icon",t):this.removeAttr("icon")}}R=ee(it);k=ne(R,0,"XyButton",rt,k);se(R,1,k);const ae=':host{display:inline-flex}::slotted(xy-button:not(:first-of-type):not(:last-of-type)){border-radius:0}::slotted(xy-button){margin:0!important}::slotted(xy-button:not(:first-of-type)){margin-left:-1px!important}::slotted(xy-button[type]:not([type="dashed"]):not(:first-of-type)){margin-left:1px!important}::slotted(xy-button:first-of-type){border-top-right-radius:0;border-bottom-right-radius:0}::slotted(xy-button:last-of-type){border-top-left-radius:0;border-bottom-left-radius:0}';var le=Object.create,B=Object.defineProperty,ce=Object.getOwnPropertyDescriptor,st=(e,t)=>(t=Symbol[e])?t:Symbol.for("Symbol."+e),nt=e=>{throw TypeError(e)},at=(e,t,o)=>t in e?B(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,de=(e,t)=>B(e,"name",{value:t,configurable:!0}),he=e=>[,,,le((e==null?void 0:e[st("metadata")])??null)],ue=["class","method","getter","setter","accessor","field","value","get","set"],lt=e=>e!==void 0&&typeof e!="function"?nt("Function expected"):e,pe=(e,t,o,s,r)=>({kind:ue[e],name:t,metadata:s,addInitializer:n=>o._?nt("Already initialized"):r.push(lt(n||null))}),me=(e,t)=>at(t,st("metadata"),e[3]),be=(e,t,o,s)=>{for(var r=0,n=e[t>>1],a=n&&n.length;r<a;r++)n[r].call(o);return s},ge=(e,t,o,s,r,n)=>{var a,h,u,l=t&7,p=!1,m=0,g=e[m]||(e[m]=[]),c=l&&(r=r.prototype,l<5&&(l>3||!p)&&ce(r,o));de(r,o);for(var d=s.length-1;d>=0;d--)u=pe(l,o,h={},e[3],g),a=(0,s[d])(r,u),h._=1,lt(a)&&(r=a);return me(e,r),c&&B(r,o,c),p?l^4?n:c:r},fe=(e,t,o)=>at(e,t+"",o),ct,M,dt;ct=[i.autoRegister({tagName:"xy-button-group"})];class w extends(dt=i.WebComponent){constructor(t={}){super({styles:ae,styleName:"xy-button-group",...t}),fe(this,"disabled",!1),this.disabled=t.disabled||!1}static get observedAttributes(){return["disabled"]}render(){return i.jsx("div",{class:"button-group-container"},i.jsx("slot",null))}onAttributeChanged(t,o,s){switch(t){case"disabled":this.disabled=s!==null,this.updateChildrenDisabledState();break}}onConnected(){this.updateChildrenDisabledState()}updateChildrenDisabledState(){if(!this.disabled)return;this.querySelectorAll("xy-button").forEach(o=>{this.disabled?o.setAttribute("disabled",""):o.removeAttribute("disabled")})}get isDisabled(){return this.disabled}set isDisabled(t){t?this.setAttr("disabled",""):this.removeAttr("disabled")}getButtons(){return this.querySelectorAll("xy-button")}enableAll(){this.getButtons().forEach(o=>{o.removeAttribute("disabled")})}disableAll(){this.getButtons().forEach(o=>{o.setAttribute("disabled","")})}}M=he(dt);w=ge(M,0,"XyButtonGroup",ct,w);be(M,1,w);const ve='.color-section{display:inline-block;position:relative}.color-popover{display:inline-block;position:relative;overflow:visible}.color-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:1px solid #e1e5e9;border-radius:3px;background:var(--theme-color, #000);color:transparent;cursor:pointer;transition:all .2s ease;box-sizing:border-box}.color-btn:hover:not(.disabled){border-color:#3f51b5;box-shadow:0 2px 8px #3f51b54d}.color-btn.disabled{opacity:.5;cursor:not-allowed}.color-indicator{font-size:12px;line-height:1;-webkit-user-select:none;user-select:none}.color-panel{position:absolute;top:100%;left:0;z-index:10000;background:#fff;border:1px solid #e1e5e9;border-radius:6px;box-shadow:0 4px 20px #00000026;padding:8px;margin-top:4px;box-sizing:border-box;transform-origin:top left;animation:colorPanelShow .2s ease-out}@keyframes colorPanelShow{0%{opacity:0;transform:scale(.9) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}.color-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;min-width:160px}.color-cube{width:20px;height:20px;border:1px solid #e1e5e9;border-radius:3px;cursor:pointer;transition:all .2s ease;box-sizing:border-box;background-color:var(--cube-color, #000)}.color-cube:hover{border-color:#3f51b5;transform:scale(1.1);box-shadow:0 2px 8px #3f51b566;z-index:1}.color-cube:active{transform:scale(.95)}.color-cube.custom-picker{background:linear-gradient(45deg,red,#ff8000,#ff0,#80ff00 42%,#0f0 57%,#00ff80,#0ff 85%,#0080ff);position:relative}.color-cube.custom-picker:after{content:"+";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700;text-shadow:0 0 2px rgba(0,0,0,.8);pointer-events:none}:host([disabled]) .color-btn{opacity:.5;cursor:not-allowed}:host([open]) .color-panel{display:block}:host(:not([open])) .color-panel{display:none}@media (max-width: 768px){.color-panel{position:fixed;top:auto;left:50%;bottom:10px;transform:translate(-50%);width:90vw;max-width:300px}.color-grid{grid-template-columns:repeat(8,1fr);gap:6px}.color-cube{width:24px;height:24px}}@media (prefers-color-scheme: dark){.color-panel{background:#2d2d2d;border-color:#404040;color:#fff}.color-btn,.color-cube{border-color:#404040}}',P="editor-js-text-color-cache";function xe(e){return e.startsWith("var(")&&e.endsWith(")")}function _e(e){return e.slice(4,-1).trim()}function ye(e){return getComputedStyle(document.documentElement).getPropertyValue(e).trim()||e}function y(e){if(xe(e)){const t=_e(e);return ye(t)}return e}function ht(e,t){return sessionStorage.setItem(`${P}-${t}`,JSON.stringify(e)),e}function ut(e,t){sessionStorage.setItem(`${P}-${t}-custom`,JSON.stringify(e))}function pt(e){const t=sessionStorage.getItem(`${P}-${e}-custom`);return t?JSON.parse(t):null}function mt(e,t){let o=null;return(...s)=>{o||(o=setTimeout(()=>{e(...s),o=null},t))}}function Ce(e,t){const o=sessionStorage.getItem(`${P}-${t}`);return o?JSON.parse(o):e}const ke="ce-inline-toolbar__dropdown",we="ce-conversion-toolbar--showed";var $e=Object.create,L=Object.defineProperty,Se=Object.getOwnPropertyDescriptor,bt=(e,t)=>(t=Symbol[e])?t:Symbol.for("Symbol."+e),gt=e=>{throw TypeError(e)},ft=(e,t,o)=>t in e?L(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,je=(e,t)=>L(e,"name",{value:t,configurable:!0}),ze=e=>[,,,$e((e==null?void 0:e[bt("metadata")])??null)],Ee=["class","method","getter","setter","accessor","field","value","get","set"],vt=e=>e!==void 0&&typeof e!="function"?gt("Function expected"):e,Ae=(e,t,o,s,r)=>({kind:Ee[e],name:t,metadata:s,addInitializer:n=>o._?gt("Already initialized"):r.push(vt(n||null))}),Pe=(e,t)=>ft(t,bt("metadata"),e[3]),De=(e,t,o,s)=>{for(var r=0,n=e[t>>1],a=n&&n.length;r<a;r++)n[r].call(o);return s},Te=(e,t,o,s,r,n)=>{var a,h,u,l=t&7,p=!1,m=0,g=e[m]||(e[m]=[]),c=l&&(r=r.prototype,l<5&&(l>3||!p)&&Se(r,o));je(r,o);for(var d=s.length-1;d>=0;d--)u=Ae(l,o,h={},e[3],g),a=(0,s[d])(r,u),h._=1,vt(a)&&(r=a);return Pe(e,r),c&&L(r,o,c),p?l^4?n:c:r},f=(e,t,o)=>ft(e,typeof t!="symbol"?t+"":t,o),xt,N,_t;const _=i.createLogger("ColorPicker"),Oe=["#ff1300","#EC7878","#9C27B0","#673AB7","#3F51B5","#0070FF","#03A9F4","#00BCD4","#4CAF50","#8BC34A","#CDDC39","#FFE500","#FFBF00","#FF9800","#795548","#9E9E9E","#5A5A5A","#FFF"];xt=[i.autoRegister({tagName:"color-picker"})];class $ extends(_t=i.WebComponent){constructor(t={}){super({styles:ve,styleName:"base-color-picker",...t}),f(this,"colorCollections"),f(this,"onColorPicked"),f(this,"hasCustomPicker"),f(this,"defaultColor"),f(this,"pluginType"),f(this,"disabled"),f(this,"selectedColor"),f(this,"customColor"),f(this,"isOpen"),f(this,"colorBtn"),f(this,"colorPanel"),f(this,"handleButtonClick",o=>{o.stopPropagation(),this.togglePanel()}),f(this,"handlePanelClick",o=>{o.stopPropagation()}),f(this,"handleColorSelect",o=>{var r;const s=y(o);this.setSelectedColor(s),this.closePanel(),ht(s,this.pluginType),(r=this.onColorPicked)==null||r.call(this,s),this.dispatchEvent(new CustomEvent("colorchange",{detail:{color:s},bubbles:!0,composed:!0})),_.debug("Color selected",{color:s})}),f(this,"handleCustomPickerClick",()=>{const o=document.createElement("input");o.type="color",o.value=this.customColor,o.style.cssText=`
+            position: fixed;
+            left: -9999px;
+            opacity: 0;
+            pointer-events: none;
+        `;const s=mt(r=>{var h;const n=r.target,a=y(n.value);this.setSelectedColor(a),this.setCustomColor(a),document.body.removeChild(o),(h=this.onColorPicked)==null||h.call(this,a),this.dispatchEvent(new CustomEvent("colorchange",{detail:{color:a},bubbles:!0,composed:!0})),_.debug("Custom color selected",{color:a})},30);o.addEventListener("input",s),document.body.appendChild(o),requestAnimationFrame(()=>{o.focus(),o.click()})}),f(this,"handleDocumentClick",o=>{this.isOpen&&!this.contains(o.target)&&this.closePanel()}),this.colorCollections=t.colorCollections||Oe,this.onColorPicked=t.onColorPicked,this.hasCustomPicker=t.hasCustomPicker||!1,this.pluginType=t.pluginType||"text",this.disabled=t.disabled||!1,this.defaultColor=y(t.defaultColor||this.colorCollections[0]),this.selectedColor=this.defaultColor,this.customColor=pt(this.pluginType)||"",this.isOpen=!1,_.debug("ColorPicker initialized",{colorCollections:this.colorCollections.length,hasCustomPicker:this.hasCustomPicker,pluginType:this.pluginType})}static get observedAttributes(){return["disabled","selected-color","open"]}render(){const t=this.renderColorButton(),o=this.isOpen?this.renderColorPanel():null;return i.jsx("section",{class:"color-section"},i.jsx("div",{class:"color-popover"},t,o))}renderColorButton(){return i.jsx("xy-button",{type:"button",class:`color-btn ${this.disabled?"disabled":""}`,style:`--theme-color: ${this.selectedColor}`,disabled:this.disabled,onClick:this.handleButtonClick,ref:t=>{this.colorBtn=t}},i.jsx("span",{class:"color-indicator"},"_"))}renderColorPanel(){return i.jsx("div",{class:"color-panel",onClick:this.handlePanelClick,ref:t=>{this.colorPanel=t}},i.jsx("div",{class:"color-grid"},this.hasCustomPicker?this.renderCustomPicker():null,this.renderColorButtons()))}renderCustomPicker(){return i.jsx("xy-button",{type:"button",class:"color-cube custom-picker",style:{backgroundColor:this.customColor},onClick:this.handleCustomPickerClick,title:"自定义颜色"})}renderColorButtons(){return this.colorCollections.map(t=>i.jsx("xy-button",{key:t,type:"button",class:"color-cube",style:`background-color: ${t}`,"data-color":t,title:t,onClick:()=>this.handleColorSelect(t)}))}togglePanel(){this.setOpen(!this.isOpen)}closePanel(){this.setOpen(!1)}setSelectedColor(t){this.selectedColor=t,this.setAttr("selected-color",t),this.updateColorButton()}setCustomColor(t){this.customColor=t,ut(t,this.pluginType)}setOpen(t){this.isOpen=t,t?this.setAttr("open",""):this.removeAttr("open"),this.rerender()}updateColorButton(){this.colorBtn&&this.colorBtn.style.setProperty("--theme-color",this.selectedColor)}onConnected(){document.addEventListener("click",this.handleDocumentClick),_.info("ColorPicker connected to DOM")}onDisconnected(){document.removeEventListener("click",this.handleDocumentClick),_.info("ColorPicker disconnected from DOM")}onAttributeChanged(t,o,s){switch(t){case"disabled":this.disabled=s!==null,this.rerender();break;case"selected-color":s&&s!==this.selectedColor&&(this.selectedColor=s,this.updateColorButton());break;case"open":this.isOpen=s!==null;break}}getSelectedColor(){return this.selectedColor}setColor(t){this.setSelectedColor(y(t))}focus(){var t;(t=this.colorBtn)==null||t.focus()}}N=ze(_t);$=Te(N,0,"ColorPicker",xt,$);De(N,1,$);const Ie=".reactive-counter{max-width:500px;margin:20px auto;padding:24px;border-radius:12px;box-shadow:0 4px 12px #0000001a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;transition:all .3s ease}.theme-light{background:#fff;color:#333;border:1px solid #e1e5e9}.theme-dark{background:#1a1a1a;color:#fff;border:1px solid #333333}.theme-blue{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:1px solid #5a67d8}.header{text-align:center;margin-bottom:24px}.header h3{margin:0 0 8px;font-size:24px;font-weight:600}.subtitle{margin:0;opacity:.8;font-size:14px}.counter-display{text-align:center;margin-bottom:32px}.count-value{font-size:48px;font-weight:700;line-height:1;margin-bottom:8px;font-variant-numeric:tabular-nums}.step-info{font-size:14px;opacity:.7}.controls{display:flex;gap:12px;justify-content:center;margin-bottom:24px;flex-wrap:wrap}.btn{padding:10px 20px;border:none;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:60px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:#4299e1;color:#fff}.btn-primary:hover:not(:disabled){background:#3182ce;transform:translateY(-1px)}.btn-secondary{background:#718096;color:#fff}.btn-secondary:hover:not(:disabled){background:#4a5568;transform:translateY(-1px)}.btn-warning{background:#ed8936;color:#fff}.btn-warning:hover:not(:disabled){background:#dd6b20;transform:translateY(-1px)}.btn-success{background:#48bb78;color:#fff}.btn-success:hover:not(:disabled){background:#38a169;transform:translateY(-1px)}.btn-danger{background:#f56565;color:#fff}.btn-danger:hover:not(:disabled){background:#e53e3e;transform:translateY(-1px)}.btn-sm{padding:6px 12px;font-size:14px;min-width:auto}.step-controls,.auto-controls,.theme-controls,.message-controls{margin-bottom:20px;text-align:center}.step-controls label{display:flex;align-items:center;justify-content:center;gap:12px;font-size:14px}.step-controls input[type=range]{flex:0 0 150px}.step-controls span{font-weight:700;min-width:20px}.theme-controls select,.message-controls input{padding:8px 12px;border:1px solid #cbd5e0;border-radius:6px;font-size:14px;margin-left:8px}.theme-dark .theme-controls select,.theme-dark .message-controls input{background:#2d3748;border-color:#4a5568;color:#fff}.theme-blue .theme-controls select,.theme-blue .message-controls input{background:#ffffff1a;border-color:#fff3;color:#fff}.message-controls input{width:250px;max-width:100%}.history{margin-top:24px;padding:16px;background:#0000000d;border-radius:8px}.theme-dark .history{background:#ffffff0d}.theme-blue .history{background:#ffffff1a}.history h4{margin:0 0 12px;font-size:16px}.history-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.history-item{padding:4px 8px;background:#4299e11a;border:1px solid rgba(66,153,225,.2);border-radius:4px;font-size:12px;font-weight:500}.debug-info{margin-top:24px;font-size:12px}.debug-info details{border:1px solid #e2e8f0;border-radius:6px;padding:8px}.theme-dark .debug-info details{border-color:#4a5568}.theme-blue .debug-info details{border-color:#fff3}.debug-info summary{cursor:pointer;font-weight:500;margin-bottom:8px}.debug-info pre{margin:0;padding:8px;background:#0000000d;border-radius:4px;overflow-x:auto;font-size:11px;line-height:1.4}.theme-dark .debug-info pre{background:#ffffff0d}.theme-blue .debug-info pre{background:#ffffff1a}@media (max-width: 600px){.reactive-counter{margin:10px;padding:16px}.count-value{font-size:36px}.controls{flex-direction:column;align-items:center}.btn{width:200px}.step-controls label{flex-direction:column;gap:8px}.message-controls input{width:100%}}";var Fe=Object.create,H=Object.defineProperty,Re=Object.getOwnPropertyDescriptor,yt=(e,t)=>(t=Symbol[e])?t:Symbol.for("Symbol."+e),Ct=e=>{throw TypeError(e)},kt=(e,t,o)=>t in e?H(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,Be=(e,t)=>H(e,"name",{value:t,configurable:!0}),Me=e=>[,,,Fe((e==null?void 0:e[yt("metadata")])??null)],Le=["class","method","getter","setter","accessor","field","value","get","set"],wt=e=>e!==void 0&&typeof e!="function"?Ct("Function expected"):e,Ne=(e,t,o,s,r)=>({kind:Le[e],name:t,metadata:s,addInitializer:n=>o._?Ct("Already initialized"):r.push(wt(n||null))}),He=(e,t)=>kt(t,yt("metadata"),e[3]),We=(e,t,o,s)=>{for(var r=0,n=e[t>>1],a=n&&n.length;r<a;r++)n[r].call(o);return s},Ge=(e,t,o,s,r,n)=>{var a,h,u,l=t&7,p=!1,m=0,g=e[m]||(e[m]=[]),c=l&&(r=r.prototype,l<5&&(l>3||!p)&&Re(r,o));Be(r,o);for(var d=s.length-1;d>=0;d--)u=Ne(l,o,h={},e[3],g),a=(0,s[d])(r,u),h._=1,wt(a)&&(r=a);return He(e,r),c&&H(r,o,c),p?l^4?n:c:r},v=(e,t,o)=>kt(e,typeof t!="symbol"?t+"":t,o),$t,W,St;const D=i.createLogger("ReactiveCounter");$t=[i.autoRegister({tagName:"reactive-counter"})];class S extends(St=i.ReactiveWebComponent){constructor(){super({styles:Ie,debug:!0}),v(this,"state",this.reactive({count:0,step:1,message:"Hello WSX Reactive!",isRunning:!1})),v(this,"themeState",this.useState("theme","light")),v(this,"historyState",this.useState("history",[])),v(this,"getTheme",this.themeState[0]),v(this,"setTheme",this.themeState[1]),v(this,"getHistory",this.historyState[0]),v(this,"setHistory",this.historyState[1]),v(this,"increment",()=>{this.state.count+=this.state.step,this.addToHistory(this.state.count)}),v(this,"decrement",()=>{this.state.count-=this.state.step,this.addToHistory(this.state.count)}),v(this,"reset",()=>{this.state.count=0,this.addToHistory(0)}),v(this,"handleStepChange",t=>{const o=t.target;this.state.step=parseInt(o.value)}),v(this,"handleThemeChange",t=>{const o=t.target;this.setTheme(o.value)}),v(this,"handleMessageChange",t=>{const o=t.target;this.state.message=o.value}),v(this,"toggleAutoIncrement",()=>{this.state.isRunning=!this.state.isRunning,this.state.isRunning&&this.startAutoIncrement()}),v(this,"clearHistory",()=>{this.setHistory([])}),D.info("ReactiveCounter initialized")}render(){const t=this.getTheme(),o=this.getHistory();return i.jsx("div",{class:`reactive-counter theme-${t}`},i.jsx("div",{class:"header"},i.jsx("h3",null,"🔄 Reactive Counter"),i.jsx("p",{class:"subtitle"},this.state.message)),i.jsx("div",{class:"counter-display"},i.jsx("div",{class:"count-value"},this.state.count),i.jsx("div",{class:"step-info"},"Step: ",this.state.step)),i.jsx("div",{class:"controls"},i.jsx("button",{class:"btn btn-primary",onClick:this.increment,disabled:this.state.isRunning},"+",this.state.step),i.jsx("button",{class:"btn btn-secondary",onClick:this.decrement,disabled:this.state.isRunning},"-",this.state.step),i.jsx("button",{class:"btn btn-warning",onClick:this.reset,disabled:this.state.isRunning},"Reset")),i.jsx("div",{class:"step-controls"},i.jsx("label",null,"Step Size:",i.jsx("input",{type:"range",min:"1",max:"10",value:this.state.step,onInput:this.handleStepChange}),i.jsx("span",null,this.state.step))),i.jsx("div",{class:"auto-controls"},i.jsx("button",{class:`btn ${this.state.isRunning?"btn-danger":"btn-success"}`,onClick:this.toggleAutoIncrement},this.state.isRunning?"Stop":"Start"," Auto Increment")),i.jsx("div",{class:"theme-controls"},i.jsx("label",null,"Theme:",i.jsx("select",{value:t,onChange:this.handleThemeChange},i.jsx("option",{value:"light"},"Light"),i.jsx("option",{value:"dark"},"Dark"),i.jsx("option",{value:"blue"},"Blue")))),i.jsx("div",{class:"message-controls"},i.jsx("input",{type:"text",value:this.state.message,onInput:this.handleMessageChange,placeholder:"Enter a message..."})),o.length>0&&i.jsx("div",{class:"history"},i.jsx("h4",null,"History (last 10):"),i.jsx("div",{class:"history-list"},o.slice(-10).map((s,r)=>i.jsx("span",{key:r,class:"history-item"},s))),i.jsx("button",{class:"btn btn-sm",onClick:this.clearHistory},"Clear History")),i.jsx("div",{class:"debug-info"},i.jsx("details",null,i.jsx("summary",null,"Debug Info"),i.jsx("pre",null,JSON.stringify({state:this.state,theme:this.getTheme(),historyLength:this.getHistory().length,stateSnapshot:this.getStateSnapshot()},null,2)))))}startAutoIncrement(){const t=setInterval(()=>{if(!this.state.isRunning){clearInterval(t);return}this.increment(),this.state.count%5===0&&(this.state.message=`Count reached ${this.state.count}!`)},200)}addToHistory(t){const o=this.getHistory();this.setHistory([...o,t])}onConnected(){D.info("ReactiveCounter connected to DOM"),setTimeout(()=>{this.state.message="Ready to count! 🚀"},500)}onDisconnected(){D.info("ReactiveCounter disconnected from DOM"),this.state.isRunning=!1}}W=Me(St);S=Ge(W,0,"ReactiveCounter",$t,S);We(W,1,S);const Xe=":host{display:block}.theme-switcher-container{position:relative;display:flex;align-items:center}.theme-switcher-btn{width:var(--theme-switcher-width, 2.5rem);height:var(--theme-switcher-height, 2.5rem);padding:var(--theme-switcher-padding, .5rem);border-radius:var(--theme-switcher-border-radius, 8px);background:var(--theme-switcher-bg, #dc2626);border:var(--theme-switcher-border, none);color:var(--theme-switcher-color, white);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--theme-switcher-transition, .3s ease);box-shadow:var(--theme-switcher-shadow, 0 4px 15px rgba(220, 38, 38, .4));font-weight:var(--theme-switcher-font-weight, 600);font-family:var(--theme-switcher-font-family, inherit)}.theme-switcher-btn:hover{background:var(--theme-switcher-hover-bg, #b91c1c);transform:var(--theme-switcher-hover-transform, translateY(-2px));box-shadow:var(--theme-switcher-hover-shadow, 0 8px 25px rgba(220, 38, 38, .5))}.theme-switcher-btn:active{transform:var(--theme-switcher-active-transform, translateY(0))}.theme-switcher-icon{font-size:var(--theme-switcher-icon-size, 1rem);line-height:1;transition:transform var(--theme-switcher-icon-transition, .3s ease)}.theme-switcher-btn:hover .theme-switcher-icon{transform:var(--theme-switcher-icon-hover-transform, rotate(360deg))}.theme-switcher-btn[data-theme=light]{background:var(--theme-switcher-light-bg, #dc2626);color:var(--theme-switcher-light-color, white)}.theme-switcher-btn[data-theme=light]:hover{background:var(--theme-switcher-light-hover-bg, #b91c1c)}.theme-switcher-btn[data-theme=dark]{background:var(--theme-switcher-dark-bg, #dc2626);color:var(--theme-switcher-dark-color, white)}.theme-switcher-btn[data-theme=dark]:hover{background:var(--theme-switcher-dark-hover-bg, #b91c1c)}.theme-switcher-btn[data-theme=auto]{background:var(--theme-switcher-auto-bg, linear-gradient(135deg, #dc2626, #b91c1c));color:var(--theme-switcher-auto-color, white)}.theme-switcher-btn[data-theme=auto]:hover{background:var(--theme-switcher-auto-hover-bg, linear-gradient(135deg, #b91c1c, #991b1b))}@media (max-width: 768px){.theme-switcher-btn{width:var(--theme-switcher-mobile-width, 2rem);height:var(--theme-switcher-mobile-height, 2rem)}.theme-switcher-icon{font-size:var(--theme-switcher-mobile-icon-size, .9rem)}}";var Ye=Object.create,G=Object.defineProperty,qe=Object.getOwnPropertyDescriptor,jt=(e,t)=>(t=Symbol[e])?t:Symbol.for("Symbol."+e),zt=e=>{throw TypeError(e)},Et=(e,t,o)=>t in e?G(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,Je=(e,t)=>G(e,"name",{value:t,configurable:!0}),Ke=e=>[,,,Ye((e==null?void 0:e[jt("metadata")])??null)],Ve=["class","method","getter","setter","accessor","field","value","get","set"],At=e=>e!==void 0&&typeof e!="function"?zt("Function expected"):e,Ue=(e,t,o,s,r)=>({kind:Ve[e],name:t,metadata:s,addInitializer:n=>o._?zt("Already initialized"):r.push(At(n||null))}),Qe=(e,t)=>Et(t,jt("metadata"),e[3]),Ze=(e,t,o,s)=>{for(var r=0,n=e[t>>1],a=n&&n.length;r<a;r++)n[r].call(o);return s},to=(e,t,o,s,r,n)=>{var a,h,u,l=t&7,p=!1,m=0,g=e[m]||(e[m]=[]),c=l&&(r=r.prototype,l<5&&(l>3||!p)&&qe(r,o));Je(r,o);for(var d=s.length-1;d>=0;d--)u=Ue(l,o,h={},e[3],g),a=(0,s[d])(r,u),h._=1,At(a)&&(r=a);return Qe(e,r),c&&G(r,o,c),p?l^4?n:c:r},Q=(e,t,o)=>Et(e,typeof t!="symbol"?t+"":t,o),Pt,X,Dt;Pt=[i.autoRegister({tagName:"theme-switcher"})];class j extends(Dt=i.WebComponent){constructor(){super({styles:Xe,styleName:"theme-switcher"}),Q(this,"currentTheme","auto"),Q(this,"toggleTheme",()=>{const t=["auto","light","dark"],s=(t.indexOf(this.currentTheme)+1)%t.length;this.setTheme(t[s])}),this.initTheme()}render(){return i.jsx("div",{class:"theme-switcher-container"},i.jsx("button",{class:"theme-switcher-btn","data-theme":this.currentTheme,onClick:this.toggleTheme,title:`当前主题: ${this.getThemeLabel()}`},i.jsx("span",{class:"theme-switcher-icon"},this.getThemeIcon())))}getThemeIcon(){const o=document.documentElement.classList.contains("dark");return this.currentTheme==="auto"?o?"🌙":"☀️":this.currentTheme==="light"?"☀️":"🌙"}getThemeLabel(){return{light:"浅色",dark:"深色",auto:"自动"}[this.currentTheme]}setTheme(t){this.currentTheme=t;const o=document.documentElement;t==="auto"?(o.removeAttribute("class"),this.checkSystemTheme()):o.className=t,localStorage.setItem("wsx-theme",t),this.rerender()}checkSystemTheme(){const t=window.matchMedia("(prefers-color-scheme: dark)").matches;document.documentElement.className=t?"dark":""}initTheme(){const t=localStorage.getItem("wsx-theme")||"auto";this.setTheme(t),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",o=>{this.currentTheme==="auto"&&(document.documentElement.className=o.matches?"dark":"")})}}X=Ke(Dt);j=to(X,0,"ThemeSwitcher",Pt,j);Ze(X,1,j);var eo=Object.create,Y=Object.defineProperty,oo=Object.getOwnPropertyDescriptor,Tt=(e,t)=>(t=Symbol[e])?t:Symbol.for("Symbol."+e),Ot=e=>{throw TypeError(e)},It=(e,t,o)=>t in e?Y(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,ro=(e,t)=>Y(e,"name",{value:t,configurable:!0}),io=e=>[,,,eo((e==null?void 0:e[Tt("metadata")])??null)],so=["class","method","getter","setter","accessor","field","value","get","set"],Ft=e=>e!==void 0&&typeof e!="function"?Ot("Function expected"):e,no=(e,t,o,s,r)=>({kind:so[e],name:t,metadata:s,addInitializer:n=>o._?Ot("Already initialized"):r.push(Ft(n||null))}),ao=(e,t)=>It(t,Tt("metadata"),e[3]),lo=(e,t,o,s)=>{for(var r=0,n=e[t>>1],a=n&&n.length;r<a;r++)n[r].call(o);return s},co=(e,t,o,s,r,n)=>{var a,h,u,l=t&7,p=!1,m=0,g=e[m]||(e[m]=[]),c=l&&(r=r.prototype,l<5&&(l>3||!p)&&oo(r,o));ro(r,o);for(var d=s.length-1;d>=0;d--)u=no(l,o,h={},e[3],g),a=(0,s[d])(r,u),h._=1,Ft(a)&&(r=a);return ao(e,r),c&&Y(r,o,c),p?l^4?n:c:r},T=(e,t,o)=>It(e,typeof t!="symbol"?t+"":t,o),Rt,q,Bt;const O=i.createLogger("SvgIcon");Rt=[i.autoRegister({tagName:"svg-icon"})];class z extends(Bt=i.WebComponent){constructor(){super(),T(this,"handleClick",t=>{O.debug("SVG icon clicked",{name:this.getAttribute("name")}),this.dispatchEvent(new CustomEvent("icon-click",{detail:{name:this.getAttribute("name"),originalEvent:t},bubbles:!0}))}),T(this,"handleMouseEnter",t=>{const o=t.target;o.style.transform="scale(1.1)"}),T(this,"handleMouseLeave",t=>{const o=t.target;o.style.transform="scale(1)"}),O.info("SvgIcon component initialized")}render(){const t=this.getAttribute("size")||"24",o=this.getAttribute("color")||"currentColor",s=this.getAttribute("name")||"star",r={star:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",heart:"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z",check:"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z",close:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z",github:"M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22",play:"M8 5v14l11-7z",settings:"M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"},n=r[s]||r.star;return i.jsx("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:o,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"svg-icon",onClick:this.handleClick,style:"cursor: pointer; transition: transform 0.2s ease; display: inline-block;",onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},i.jsx("path",{d:n,fill:o}))}static get observedAttributes(){return["name","size","color"]}onAttributeChanged(t,o,s){O.debug(`Attribute ${t} changed from ${o} to ${s}`),this.connected&&this.rerender()}}q=io(Bt);z=co(q,0,"SvgIcon",Rt,z);lo(q,1,z);var ho=Object.create,J=Object.defineProperty,uo=Object.getOwnPropertyDescriptor,Mt=(e,t)=>(t=Symbol[e])?t:Symbol.for("Symbol."+e),Lt=e=>{throw TypeError(e)},Nt=(e,t,o)=>t in e?J(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,po=(e,t)=>J(e,"name",{value:t,configurable:!0}),mo=e=>[,,,ho((e==null?void 0:e[Mt("metadata")])??null)],bo=["class","method","getter","setter","accessor","field","value","get","set"],Ht=e=>e!==void 0&&typeof e!="function"?Lt("Function expected"):e,go=(e,t,o,s,r)=>({kind:bo[e],name:t,metadata:s,addInitializer:n=>o._?Lt("Already initialized"):r.push(Ht(n||null))}),fo=(e,t)=>Nt(t,Mt("metadata"),e[3]),vo=(e,t,o,s)=>{for(var r=0,n=e[t>>1],a=n&&n.length;r<a;r++)n[r].call(o);return s},xo=(e,t,o,s,r,n)=>{var a,h,u,l=t&7,p=!1,m=0,g=e[m]||(e[m]=[]),c=l&&(r=r.prototype,l<5&&(l>3||!p)&&uo(r,o));po(r,o);for(var d=s.length-1;d>=0;d--)u=go(l,o,h={},e[3],g),a=(0,s[d])(r,u),h._=1,Ht(a)&&(r=a);return fo(e,r),c&&J(r,o,c),p?l^4?n:c:r},x=(e,t,o)=>Nt(e,typeof t!="symbol"?t+"":t,o),Wt,K,Gt;const C=i.createLogger("SvgDemo");Wt=[i.autoRegister({tagName:"svg-demo"})];class E extends(Gt=i.WebComponent){constructor(){super(),x(this,"animationId",null),x(this,"rotationAngle",0),x(this,"showTooltip",(t,o)=>{t.target.setAttribute("fill","#e74c3c"),C.debug(`Tooltip value: ${o}`)}),x(this,"hideTooltip",t=>{t.target.setAttribute("fill","#3498db")}),x(this,"startAnimation",()=>{if(this.animationId)return;const t=()=>{this.rotationAngle+=2,this.rotationAngle>=360&&(this.rotationAngle=0),this.rerender(),this.animationId=requestAnimationFrame(t)};this.animationId=requestAnimationFrame(t)}),x(this,"stopAnimation",()=>{this.animationId&&(cancelAnimationFrame(this.animationId),this.animationId=null)}),C.info("SvgDemo component initialized")}render(){return i.jsx("div",{style:"padding: 20px; background: #f5f5f5; border-radius: 8px; margin: 10px 0;"},i.jsx("h3",{style:"margin-top: 0; color: #333;"},"SVG Showcase"),i.jsx("div",{style:"margin-bottom: 20px;"},i.jsx("h4",{style:"margin: 10px 0; color: #666;"},"Basic Shapes"),i.jsx("svg",{width:"300",height:"100",style:"border: 1px solid #ddd; background: white;"},i.jsx("circle",{cx:"50",cy:"50",r:"30",fill:"#e74c3c",stroke:"#c0392b",strokeWidth:"2"}),i.jsx("rect",{x:"100",y:"20",width:"60",height:"60",fill:"#3498db",stroke:"#2980b9",strokeWidth:"2",rx:"5"}),i.jsx("polygon",{points:"200,20 230,80 170,80",fill:"#2ecc71",stroke:"#27ae60",strokeWidth:"2"}),i.jsx("line",{x1:"250",y1:"20",x2:"290",y2:"80",stroke:"#9b59b6",strokeWidth:"3",strokeLinecap:"round"}))),i.jsx("div",{style:"margin-bottom: 20px;"},i.jsx("h4",{style:"margin: 10px 0; color: #666;"},"Gradients & Effects"),i.jsx("svg",{width:"300",height:"100",style:"border: 1px solid #ddd; background: white;"},i.jsx("defs",null,i.jsx("linearGradient",{id:"blueGradient",x1:"0%",y1:"0%",x2:"100%",y2:"0%"},i.jsx("stop",{offset:"0%",stopColor:"#3498db"}),i.jsx("stop",{offset:"100%",stopColor:"#9b59b6"})),i.jsx("radialGradient",{id:"redGradient",cx:"50%",cy:"50%",r:"50%"},i.jsx("stop",{offset:"0%",stopColor:"#e74c3c"}),i.jsx("stop",{offset:"100%",stopColor:"#c0392b"}))),i.jsx("rect",{x:"20",y:"20",width:"120",height:"60",fill:"url(#blueGradient)",rx:"10"}),i.jsx("circle",{cx:"200",cy:"50",r:"35",fill:"url(#redGradient)"}))),i.jsx("div",{style:"margin-bottom: 20px;"},i.jsx("h4",{style:"margin: 10px 0; color: #666;"},"Animation"),i.jsx("svg",{width:"300",height:"100",style:"border: 1px solid #ddd; background: white;"},i.jsx("g",{transform:`translate(150, 50) rotate(${this.rotationAngle})`},i.jsx("polygon",{points:"-30,0 0,-40 30,0 0,40",fill:"#f39c12",stroke:"#e67e22",strokeWidth:"2"}),i.jsx("circle",{cx:"0",cy:"0",r:"8",fill:"#2c3e50"}))),i.jsx("div",{style:"margin-top: 10px;"},i.jsx("button",{onClick:this.startAnimation,style:"margin-right: 10px; padding: 5px 10px;"},"Start Animation"),i.jsx("button",{onClick:this.stopAnimation,style:"padding: 5px 10px;"},"Stop Animation"))),i.jsx("div",{style:"margin-bottom: 20px;"},i.jsx("h4",{style:"margin: 10px 0; color: #666;"},"Interactive Chart"),this.renderChart()),i.jsx("div",null,i.jsx("h4",{style:"margin: 10px 0; color: #666;"},"Icon Components"),i.jsx("div",{style:"display: flex; gap: 15px; align-items: center;"},i.jsx("svg-icon",{name:"star",size:"32",color:"#f39c12"}),i.jsx("svg-icon",{name:"heart",size:"32",color:"#e74c3c"}),i.jsx("svg-icon",{name:"check",size:"32",color:"#27ae60"}),i.jsx("svg-icon",{name:"github",size:"32",color:"#333"}),i.jsx("svg-icon",{name:"play",size:"32",color:"#3498db"}),i.jsx("svg-icon",{name:"settings",size:"32",color:"#9b59b6"}))))}renderChart(){const t=[30,80,45,60,20,90,55],o=Math.max(...t),s=30,r=40,n=120,a=t.length*r+40;return i.jsx("svg",{width:a,height:n+40,style:"border: 1px solid #ddd; background: white;"},t.map((h,u)=>{const l=h/o*n,p=u*r+20,m=n-l+20;return i.jsx("g",{key:u},i.jsx("rect",{x:p,y:m,width:s,height:l,fill:"#3498db",stroke:"#2980b9",strokeWidth:"1",onMouseEnter:g=>this.showTooltip(g,h),onMouseLeave:this.hideTooltip,style:"cursor: pointer; transition: fill 0.2s;"}),i.jsx("text",{x:p+s/2,y:n+35,textAnchor:"middle",fontSize:"12",fill:"#666"},u+1))}))}onConnected(){C.info("SvgDemo connected to DOM")}onDisconnected(){C.info("SvgDemo disconnected from DOM"),this.stopAnimation()}}K=mo(Gt);E=xo(K,0,"SvgDemo",Wt,E);vo(K,1,E);var _o=Object.create,V=Object.defineProperty,yo=Object.getOwnPropertyDescriptor,Xt=(e,t)=>(t=Symbol[e])?t:Symbol.for("Symbol."+e),Yt=e=>{throw TypeError(e)},qt=(e,t,o)=>t in e?V(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,Co=(e,t)=>V(e,"name",{value:t,configurable:!0}),ko=e=>[,,,_o((e==null?void 0:e[Xt("metadata")])??null)],wo=["class","method","getter","setter","accessor","field","value","get","set"],Jt=e=>e!==void 0&&typeof e!="function"?Yt("Function expected"):e,$o=(e,t,o,s,r)=>({kind:wo[e],name:t,metadata:s,addInitializer:n=>o._?Yt("Already initialized"):r.push(Jt(n||null))}),So=(e,t)=>qt(t,Xt("metadata"),e[3]),jo=(e,t,o,s)=>{for(var r=0,n=e[t>>1],a=n&&n.length;r<a;r++)n[r].call(o);return s},zo=(e,t,o,s,r,n)=>{var a,h,u,l=t&7,p=!1,m=0,g=e[m]||(e[m]=[]),c=l&&(r=r.prototype,l<5&&(l>3||!p)&&yo(r,o));Co(r,o);for(var d=s.length-1;d>=0;d--)u=$o(l,o,h={},e[3],g),a=(0,s[d])(r,u),h._=1,Jt(a)&&(r=a);return So(e,r),c&&V(r,o,c),p?l^4?n:c:r},I=(e,t,o)=>qt(e,typeof t!="symbol"?t+"":t,o),Kt,U,Vt;const Eo=i.createLogger("SimpleReactiveDemo");Kt=[i.autoRegister({tagName:"simple-reactive-demo"})];class A extends(Vt=i.ReactiveWebComponent){constructor(){super(),I(this,"state",this.reactive({count:0,message:"Click the button!"})),I(this,"increment",()=>{this.state.count++,this.state.message=`Clicked ${this.state.count} time${this.state.count===1?"":"s"}!`}),I(this,"reset",()=>{this.state.count=0,this.state.message="Reset! Click again!"}),Eo.info("SimpleReactiveDemo initialized")}render(){return i.jsx("div",{style:"padding: 20px; border: 1px solid #ccc; border-radius: 8px; margin: 20px;"},i.jsx("h3",null,"📱 Simple Reactive Demo"),i.jsx("p",null,this.state.message),i.jsx("div",{style:"font-size: 24px; margin: 16px 0;"},"Count: ",i.jsx("strong",null,this.state.count)),i.jsx("div",null,i.jsx("button",{onClick:this.increment,style:"margin-right: 8px; padding: 8px 16px;"},"+ Increment"),i.jsx("button",{onClick:this.reset,style:"padding: 8px 16px;"},"🔄 Reset")),i.jsx("div",{style:"margin-top: 16px; font-size: 12px; color: #666;"},"💡 State changes automatically trigger re-renders!"))}}U=ko(Vt);A=zo(U,0,"SimpleReactiveDemo",Kt,A);jo(U,1,A);exports.CONVERTER_BTN=ke;exports.CONVERTER_PANEL=we;exports.ColorPicker=$;exports.ReactiveCounter=S;exports.SimpleReactiveDemo=A;exports.SvgDemo=E;exports.SvgIcon=z;exports.ThemeSwitcher=j;exports.XyButton=k;exports.XyButtonGroup=w;exports.getCustomColorCache=pt;exports.getDefaultColorCache=Ce;exports.handleCSSVariables=y;exports.setCustomColorCache=ut;exports.setDefaultColorCache=ht;exports.throttle=mt;