huibo-ui 0.3.0

package/dist/components/hb-form.js

@@ -0,0 +1,96 @@
+import { p as proxyCustomElement, H, h } from './p-1407a5e8.js';
+
+const formCss = "/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;tab-size:4;-webkit-tap-highlight-color:transparent}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex;padding-block:0}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.inline{display:inline}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}} /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;:host{display:block}.hb-form{display:flex;flex-direction:column;gap:var(--hb-spacing-md)}.hb-form--inline{flex-flow:wrap;gap:var(--hb-spacing-sm)var(--hb-spacing-lg)}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}";
+const HbFormStyle0 = formCss;
+
+const Form = /*@__PURE__*/ proxyCustomElement(class Form extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    get el() { return this; }
+    /** 表单数据对象 */
+    model = {};
+    /** 表单验证规则 */
+    rules = {};
+    /** 标签位置 */
+    labelPosition = 'right';
+    /** 标签宽度 */
+    labelWidth = '80px';
+    /** 是否行内表单 */
+    inline = false;
+    /** 表单尺寸 */
+    size = 'default';
+    /** 是否禁用 */
+    disabled = false;
+    fields = [];
+    fieldRegistry = new Map();
+    // 用 componentWillLoad 而非 componentDidLoad 注册监听器：
+    // Stencil 生命周期里子组件(FormItem)的 componentDidLoad 先于父组件(Form)触发，
+    // 若在 componentDidLoad 才挂监听，会错过子项派发的 hbFormFieldRegister，
+    // 导致 fieldRegistry 为空、validate() 永远返回 true（真实浏览器里复现，mock-doc 被 waitForChanges 掩盖）。
+    componentWillLoad() {
+        this.el.addEventListener('hbFormFieldRegister', ((e) => {
+            const { prop, validate, resetValue, getValue } = e.detail;
+            this.fieldRegistry.set(prop, { prop, validate, resetValue, getValue });
+        }));
+    }
+    /**
+     * 验证整个表单
+     * @returns 是否验证通过
+     */
+    validate = async () => {
+        const results = await Promise.all(Array.from(this.fieldRegistry.values()).map(async (field) => {
+            const errors = await field.validate();
+            return errors.length === 0;
+        }));
+        return results.every(Boolean);
+    };
+    /**
+     * 重置表单
+     */
+    resetFields = () => {
+        this.fieldRegistry.forEach((field) => field.resetValue());
+    };
+    render() {
+        return (h("form", { key: '233f774fd2e6a7331ce01d7b729c3a77dd5793a9', class: {
+                'hb-form': true,
+                [`hb-form--label-${this.labelPosition}`]: true,
+                'hb-form--inline': this.inline,
+            }, onSubmit: (e) => e.preventDefault(), novalidate: true }, h("slot", { key: '99055d1a239483acc153523aeb218ad420bd9610' })));
+    }
+    static get style() { return HbFormStyle0; }
+}, [1, "hb-form", {
+        "model": [16],
+        "rules": [16],
+        "labelPosition": [1, "label-position"],
+        "labelWidth": [1, "label-width"],
+        "inline": [4],
+        "size": [1],
+        "disabled": [4],
+        "validate": [16],
+        "resetFields": [16],
+        "fields": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hb-form"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hb-form":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Form);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const HbForm = Form;
+const defineCustomElement = defineCustomElement$1;
+
+export { HbForm, defineCustomElement };
+
+//# sourceMappingURL=hb-form.js.map

package/dist/components/hb-form.js.map

@@ -0,0 +1 @@
+{"file":"hb-form.js","mappings":";;AAAA,MAAM,OAAO,GAAG,0yLAA0yL,CAAC;AAC3zL,qBAAe,OAAO;;MCiBT,IAAI;;;;;;;;IAIP,KAAK,GAAwB,EAAE,CAAC;;IAGhC,KAAK,GAA0B,EAAE,CAAC;;IAGlC,aAAa,GAA6B,OAAO,CAAC;;IAGlD,UAAU,GAAW,MAAM,CAAC;;IAG5B,MAAM,GAAY,KAAK,CAAC;;IAGxB,IAAI,GAAkC,SAAS,CAAC;;IAGhD,QAAQ,GAAY,KAAK,CAAC;IAEzB,MAAM,GAA4B,EAAE,CAAC;IAEtC,aAAa,GAAG,IAAI,GAAG,EAAiC,CAAC;;;;;IAMjE,iBAAiB;QACf,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,qBAAqB,GAAG,CAAC,CAAc;YAC9D,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;YAC1D,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC;SACxE,EAAmB,CAAC;KACtB;;;;;IAMO,QAAQ,GAAG;QACjB,MAAM,OAAO,GAAG,MAAM,OAAO,CAAC,GAAG,CAC/B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,OAAO,KAAK;YACtD,MAAM,MAAM,GAAG,MAAM,KAAK,CAAC,QAAQ,EAAE,CAAC;YACtC,OAAO,MAAM,CAAC,MAAM,KAAK,CAAC,CAAC;SAC5B,CAAC,CACH,CAAC;QACF,OAAO,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;KAC/B,CAAC;;;;IAKM,WAAW,GAAG;QACpB,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC;KAC3D,CAAC;IAEF,MAAM;QACJ,QACE,6DACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,CAAC,kBAAkB,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI;gBAC9C,iBAAiB,EAAE,IAAI,CAAC,MAAM;aAC/B,EACD,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,cAAc,EAAE,EACnC,UAAU,UAEV,8DAAQ,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/Form/form.css?tag=hb-form&encapsulation=shadow","src/components/Form/Form.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hb-form {\n  display: flex;\n  flex-direction: column;\n  gap: var(--hb-spacing-md);\n}\n\n.hb-form--inline {\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: var(--hb-spacing-sm) var(--hb-spacing-lg);\n}\n","import { Component, h, Prop, State, Element } from '@stencil/core';\n\ninterface FormFieldRegistration {\n  prop: string;\n  validate: () => Promise<string[]>;\n  resetValue: () => void;\n  getValue: () => any;\n}\n\n/**\n * Form 表单组件\n * 由输入框、选择器、单选框、多选框等控件组成，配合表单校验\n */\n@Component({\n  tag: 'hb-form',\n  styleUrl: 'form.css',\n  shadow: true,\n})\nexport class Form {\n  @Element() el: HTMLElement;\n\n  /** 表单数据对象 */\n  @Prop() model: Record<string, any> = {};\n\n  /** 表单验证规则 */\n  @Prop() rules: Record<string, any[]> = {};\n\n  /** 标签位置 */\n  @Prop() labelPosition: 'left' | 'right' | 'top' = 'right';\n\n  /** 标签宽度 */\n  @Prop() labelWidth: string = '80px';\n\n  /** 是否行内表单 */\n  @Prop() inline: boolean = false;\n\n  /** 表单尺寸 */\n  @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n  /** 是否禁用 */\n  @Prop() disabled: boolean = false;\n\n  @State() fields: FormFieldRegistration[] = [];\n\n  private fieldRegistry = new Map<string, FormFieldRegistration>();\n\n  // 用 componentWillLoad 而非 componentDidLoad 注册监听器：\n  // Stencil 生命周期里子组件(FormItem)的 componentDidLoad 先于父组件(Form)触发，\n  // 若在 componentDidLoad 才挂监听，会错过子项派发的 hbFormFieldRegister，\n  // 导致 fieldRegistry 为空、validate() 永远返回 true（真实浏览器里复现，mock-doc 被 waitForChanges 掩盖）。\n  componentWillLoad() {\n    this.el.addEventListener('hbFormFieldRegister', ((e: CustomEvent) => {\n      const { prop, validate, resetValue, getValue } = e.detail;\n      this.fieldRegistry.set(prop, { prop, validate, resetValue, getValue });\n    }) as EventListener);\n  }\n\n  /**\n   * 验证整个表单\n   * @returns 是否验证通过\n   */\n  @Prop() validate = async (): Promise<boolean> => {\n    const results = await Promise.all(\n      Array.from(this.fieldRegistry.values()).map(async (field) => {\n        const errors = await field.validate();\n        return errors.length === 0;\n      })\n    );\n    return results.every(Boolean);\n  };\n\n  /**\n   * 重置表单\n   */\n  @Prop() resetFields = (): void => {\n    this.fieldRegistry.forEach((field) => field.resetValue());\n  };\n\n  render() {\n    return (\n      <form\n        class={{\n          'hb-form': true,\n          [`hb-form--label-${this.labelPosition}`]: true,\n          'hb-form--inline': this.inline,\n        }}\n        onSubmit={(e) => e.preventDefault()}\n        novalidate\n      >\n        <slot />\n      </form>\n    );\n  }\n}\n"],"version":3}

package/dist/components/hb-header.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface HbHeader extends Components.HbHeader, HTMLElement {}
+export const HbHeader: {
+    prototype: HbHeader;
+    new (): HbHeader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/hb-header.js

@@ -0,0 +1,47 @@
+import { p as proxyCustomElement, H, h } from './p-1407a5e8.js';
+
+const headerCss = "/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;tab-size:4;-webkit-tap-highlight-color:transparent}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex;padding-block:0}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}} /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;:host{--hb-header-height:60px;--hb-header-padding:0 20px;--hb-header-bg-color:var(--hb-color-white,#fff);display:block}.hb-header{background-color:var(--hb-header-bg-color);box-sizing:border-box;flex-shrink:0;height:var(--hb-header-height);padding:var(--hb-header-padding)}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}";
+const HbHeaderStyle0 = headerCss;
+
+const Header = /*@__PURE__*/ proxyCustomElement(class Header extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    /**
+     * 高度
+     */
+    height;
+    render() {
+        const style = {};
+        if (this.height) {
+            style.height = this.height;
+        }
+        return (h("header", { key: '86042705286a6d135858982b34cdb19da71b6744', class: "hb-header", style: style }, h("slot", { key: '96d5152e19c88d4cbc4c30bc136b27b6b8388331' })));
+    }
+    static get style() { return HbHeaderStyle0; }
+}, [1, "hb-header", {
+        "height": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hb-header"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hb-header":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Header);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const HbHeader = Header;
+const defineCustomElement = defineCustomElement$1;
+
+export { HbHeader, defineCustomElement };
+
+//# sourceMappingURL=hb-header.js.map

package/dist/components/hb-header.js.map

@@ -0,0 +1 @@
+{"file":"hb-header.js","mappings":";;AAAA,MAAM,SAAS,GAAG,83LAA83L,CAAC;AACj5L,uBAAe,SAAS;;MCUX,MAAM;;;;;;;;;IAIT,MAAM,CAAU;IAExB,MAAM;QACJ,MAAM,KAAK,GAAQ,EAAE,CAAC;QACtB,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;SAC5B;QAED,QACE,+DAAQ,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,KAAK,IACpC,8DAAa,CACN,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/Container/header.css?tag=hb-header&encapsulation=shadow","src/components/Container/Header.tsx"],"sourcesContent":[":host {\n  display: block;\n  --hb-header-height: 60px;\n  --hb-header-padding: 0 20px;\n  --hb-header-bg-color: var(--hb-color-white, #ffffff);\n}\n\n.hb-header {\n  height: var(--hb-header-height);\n  padding: var(--hb-header-padding);\n  box-sizing: border-box;\n  flex-shrink: 0;\n  background-color: var(--hb-header-bg-color);\n}\n\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Container Header 组件\n * 顶部容器\n */\n@Component({\n  tag: 'hb-header',\n  styleUrl: 'header.css',\n  shadow: true,\n})\nexport class Header {\n  /**\n   * 高度\n   */\n  @Prop() height?: string;\n\n  render() {\n    const style: any = {};\n    if (this.height) {\n      style.height = this.height;\n    }\n\n    return (\n      <header class=\"hb-header\" style={style}>\n        <slot></slot>\n      </header>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/hb-icon.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface HbIcon extends Components.HbIcon, HTMLElement {}
+export const HbIcon: {
+    prototype: HbIcon;
+    new (): HbIcon;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/hb-icon.js

@@ -0,0 +1,96 @@
+import { p as proxyCustomElement, H, h } from './p-1407a5e8.js';
+
+const iconCss = "/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;tab-size:4;-webkit-tap-highlight-color:transparent}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex;padding-block:0}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}} /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;:host{align-items:center;display:inline-flex;justify-content:center;line-height:0;vertical-align:middle}.hb-icon{color:inherit;display:inline-block;flex-shrink:0;font-size:inherit;height:1em;width:1em}.hb-icon--spin{animation:hb-icon-spin 1s linear infinite}.hb-icon--placeholder{align-items:center;background-color:var(--hb-color-fill-tertiary);border-radius:var(--hb-border-radius-xs);color:var(--hb-color-text-tertiary);display:inline-flex;font-size:var(--hb-font-size-xs);justify-content:center;line-height:1;overflow:hidden;padding:0 2px;word-break:break-all}@keyframes hb-icon-spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}";
+const HbIconStyle0 = iconCss;
+
+/**
+ * 内置常用图标 SVG path 映射表（24x24 viewBox，stroke/fill 由 currentColor 继承）
+ * 设计参照 Ant Design / Element Plus 常用后台图标。
+ */
+const ICON_PATHS = {
+    edit: 'M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z',
+    delete: 'M6 7h12v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm3-3h6l1 2H8l1-2zM4 6h16v2H4V6z',
+    plus: 'M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z',
+    search: 'M10 4a6 6 0 1 0 3.9 10.5l4.3 4.3 1.4-1.4-4.3-4.3A6 6 0 0 0 10 4zm0 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8z',
+    refresh: 'M12 5V2L8 6l4 4V7a5 5 0 1 1-5 5H5a7 7 0 1 0 7-7z',
+    check: 'M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z',
+    close: 'M6 6l12 12M18 6L6 18',
+    'arrow-up': 'M12 5l7 7h-4v7h-6v-7H5z',
+    'arrow-down': 'M12 19l-7-7h4V5h6v7h4z',
+    'arrow-left': 'M5 12l7-7v4h7v6h-7v4z',
+    'arrow-right': 'M19 12l-7 7v-4H5V9h7V5z',
+    eye: 'M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6a2 2 0 1 0 0 4 2 2 0 0 0 0-4z',
+    setting: 'M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm9 4a8.9 8.9 0 0 0-.2-2l2-1.5-2-3.5-2.4 1a8 8 0 0 0-3.4-2L14.5 1h-5l-.3 2.5a8 8 0 0 0-3.4 2l-2.4-1-2 3.5L3.4 10a8.9 8.9 0 0 0 0 4l-2 1.5 2 3.5 2.4-1a8 8 0 0 0 3.4 2l.3 2.5h5l.3-2.5a8 8 0 0 0 3.4-2l2.4 1 2-3.5-2-1.5c.1-.6.2-1.3.2-2z',
+    user: 'M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-5 0-9 2.5-9 6v2h18v-2c0-3.5-4-6-9-6z',
+    bell: 'M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V11a6 6 0 0 0-5-5.9V4a1 1 0 0 0-2 0v1.1A6 6 0 0 0 6 11v5l-2 2v1h16v-1l-2-2z',
+    menu: 'M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z',
+    home: 'M12 3l9 8h-3v9h-4v-6H10v6H6v-9H3z',
+    upload: 'M9 16h6v-6h4l-7-7-7 7h4v6zm-4 2h14v2H5v-2z',
+    download: 'M9 4h6v8h4l-7 7-7-7h4V4zm-4 14h14v2H5v-2z',
+    info: 'M11 7h2v2h-2V7zm0 4h2v6h-2v-6zm1-9a10 10 0 1 0 0 20 10 10 0 0 0 0-20z',
+    warning: 'M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z',
+};
+const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    /** 图标名（查 ICON_PATHS 映射表） */
+    name = '';
+    /** 尺寸（number 视为 px，string 直接作为 width/height） */
+    size = '1em';
+    /** 颜色（默认继承 currentColor） */
+    color = 'inherit';
+    /** 是否旋转动画 */
+    spin = false;
+    normalizeSize() {
+        if (typeof this.size === 'number') {
+            return `${this.size}px`;
+        }
+        return this.size;
+    }
+    render() {
+        const dimension = this.normalizeSize();
+        const path = ICON_PATHS[this.name];
+        const svgStyle = {
+            width: dimension,
+            height: dimension,
+            color: this.color,
+        };
+        if (path) {
+            // close / arrow 等使用 stroke 描边；info/warning/eye 等使用 fill 填充
+            const strokeBased = this.name === 'close' || this.name.startsWith('arrow-');
+            return (h("svg", { class: { 'hb-icon': true, 'hb-icon--spin': this.spin }, viewBox: "0 0 24 24", style: svgStyle, fill: strokeBased ? 'none' : 'currentColor', stroke: strokeBased ? 'currentColor' : 'none', "stroke-width": strokeBased ? 2 : 0, "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: path })));
+        }
+        // 未知 name：渲染占位方块 + title 文本
+        return (h("span", { class: { 'hb-icon': true, 'hb-icon--spin': this.spin, 'hb-icon--placeholder': true }, style: svgStyle, role: "img", "aria-label": this.name }, this.name || ''));
+    }
+    static get style() { return HbIconStyle0; }
+}, [1, "hb-icon", {
+        "name": [1],
+        "size": [8],
+        "color": [1],
+        "spin": [4]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hb-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hb-icon":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Icon);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const HbIcon = Icon;
+const defineCustomElement = defineCustomElement$1;
+
+export { HbIcon, defineCustomElement };
+
+//# sourceMappingURL=hb-icon.js.map

package/dist/components/hb-icon.js.map

@@ -0,0 +1 @@
+{"file":"hb-icon.js","mappings":";;AAAA,MAAM,OAAO,GAAG,4uMAA4uM,CAAC;AAC7vM,qBAAe,OAAO;;ACCtB;;;;AAIA,MAAM,UAAU,GAA2B;IACzC,IAAI,EACF,yIAAyI;IAC3I,MAAM,EACJ,4EAA4E;IAC9E,IAAI,EAAE,oCAAoC;IAC1C,MAAM,EACJ,mGAAmG;IACrG,OAAO,EACL,kDAAkD;IACpD,KAAK,EAAE,iDAAiD;IACxD,KAAK,EAAE,sBAAsB;IAC7B,UAAU,EAAE,yBAAyB;IACrC,YAAY,EAAE,wBAAwB;IACtC,YAAY,EAAE,uBAAuB;IACrC,aAAa,EAAE,yBAAyB;IACxC,GAAG,EAAE,sHAAsH;IAC3H,OAAO,EACL,2QAA2Q;IAC7Q,IAAI,EAAE,iFAAiF;IACvF,IAAI,EAAE,uHAAuH;IAC7H,IAAI,EAAE,8CAA8C;IACpD,IAAI,EAAE,mCAAmC;IACzC,MAAM,EACJ,4CAA4C;IAC9C,QAAQ,EACN,2CAA2C;IAC7C,IAAI,EAAE,uEAAuE;IAC7E,OAAO,EACL,oDAAoD;CACvD,CAAC;MAYW,IAAI;;;;;;;IAEP,IAAI,GAAW,EAAE,CAAC;;IAGlB,IAAI,GAAoB,KAAK,CAAC;;IAG9B,KAAK,GAAW,SAAS,CAAC;;IAG1B,IAAI,GAAY,KAAK,CAAC;IAEtB,aAAa;QACnB,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;YACjC,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;SACzB;QACD,OAAO,IAAI,CAAC,IAAI,CAAC;KAClB;IAED,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QACvC,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEnC,MAAM,QAAQ,GAAG;YACf,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,SAAS;YACjB,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC;QAEF,IAAI,IAAI,EAAE;;YAER,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;YAC5E,QACE,WACE,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,eAAe,EAAE,IAAI,CAAC,IAAI,EAAE,EACtD,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,QAAQ,EACf,IAAI,EAAE,WAAW,GAAG,MAAM,GAAG,cAAc,EAC3C,MAAM,EAAE,WAAW,GAAG,cAAc,GAAG,MAAM,kBAC/B,WAAW,GAAG,CAAC,GAAG,CAAC,oBAClB,OAAO,qBACN,OAAO,iBACX,MAAM,IAElB,YAAM,CAAC,EAAE,IAAI,GAAI,CACb,EACN;SACH;;QAGD,QACE,YACE,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,eAAe,EAAE,IAAI,CAAC,IAAI,EAAE,sBAAsB,EAAE,IAAI,EAAE,EACpF,KAAK,EAAE,QAAQ,EACf,IAAI,EAAC,KAAK,gBACE,IAAI,CAAC,IAAI,IAEpB,IAAI,CAAC,IAAI,IAAI,EAAE,CACX,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/Icon/icon.css?tag=hb-icon&encapsulation=shadow","src/components/Icon/Icon.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 0;\n  vertical-align: middle;\n}\n\n.hb-icon {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  font-size: inherit;\n  color: inherit;\n  flex-shrink: 0;\n}\n\n.hb-icon--spin {\n  animation: hb-icon-spin 1s linear infinite;\n}\n\n.hb-icon--placeholder {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--hb-font-size-xs);\n  color: var(--hb-color-text-tertiary);\n  background-color: var(--hb-color-fill-tertiary);\n  border-radius: var(--hb-border-radius-xs);\n  line-height: 1;\n  overflow: hidden;\n  word-break: break-all;\n  padding: 0 2px;\n}\n\n@keyframes hb-icon-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * 内置常用图标 SVG path 映射表（24x24 viewBox，stroke/fill 由 currentColor 继承）\n * 设计参照 Ant Design / Element Plus 常用后台图标。\n */\nconst ICON_PATHS: Record<string, string> = {\n  edit:\n    'M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z',\n  delete:\n    'M6 7h12v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm3-3h6l1 2H8l1-2zM4 6h16v2H4V6z',\n  plus: 'M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z',\n  search:\n    'M10 4a6 6 0 1 0 3.9 10.5l4.3 4.3 1.4-1.4-4.3-4.3A6 6 0 0 0 10 4zm0 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8z',\n  refresh:\n    'M12 5V2L8 6l4 4V7a5 5 0 1 1-5 5H5a7 7 0 1 0 7-7z',\n  check: 'M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z',\n  close: 'M6 6l12 12M18 6L6 18',\n  'arrow-up': 'M12 5l7 7h-4v7h-6v-7H5z',\n  'arrow-down': 'M12 19l-7-7h4V5h6v7h4z',\n  'arrow-left': 'M5 12l7-7v4h7v6h-7v4z',\n  'arrow-right': 'M19 12l-7 7v-4H5V9h7V5z',\n  eye: 'M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6a2 2 0 1 0 0 4 2 2 0 0 0 0-4z',\n  setting:\n    'M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm9 4a8.9 8.9 0 0 0-.2-2l2-1.5-2-3.5-2.4 1a8 8 0 0 0-3.4-2L14.5 1h-5l-.3 2.5a8 8 0 0 0-3.4 2l-2.4-1-2 3.5L3.4 10a8.9 8.9 0 0 0 0 4l-2 1.5 2 3.5 2.4-1a8 8 0 0 0 3.4 2l.3 2.5h5l.3-2.5a8 8 0 0 0 3.4-2l2.4 1 2-3.5-2-1.5c.1-.6.2-1.3.2-2z',\n  user: 'M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-5 0-9 2.5-9 6v2h18v-2c0-3.5-4-6-9-6z',\n  bell: 'M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V11a6 6 0 0 0-5-5.9V4a1 1 0 0 0-2 0v1.1A6 6 0 0 0 6 11v5l-2 2v1h16v-1l-2-2z',\n  menu: 'M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z',\n  home: 'M12 3l9 8h-3v9h-4v-6H10v6H6v-9H3z',\n  upload:\n    'M9 16h6v-6h4l-7-7-7 7h4v6zm-4 2h14v2H5v-2z',\n  download:\n    'M9 4h6v8h4l-7 7-7-7h4V4zm-4 14h14v2H5v-2z',\n  info: 'M11 7h2v2h-2V7zm0 4h2v6h-2v-6zm1-9a10 10 0 1 0 0 20 10 10 0 0 0 0-20z',\n  warning:\n    'M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z',\n};\n\n/**\n * Icon 图标组件\n * 内置常用后台图标，替换项目内散落的 emoji 图标。\n * 通过 name 查表渲染对应 SVG，未知 name 渲染占位。\n */\n@Component({\n  tag: 'hb-icon',\n  styleUrl: 'icon.css',\n  shadow: true,\n})\nexport class Icon {\n  /** 图标名（查 ICON_PATHS 映射表） */\n  @Prop() name: string = '';\n\n  /** 尺寸（number 视为 px，string 直接作为 width/height） */\n  @Prop() size: number | string = '1em';\n\n  /** 颜色（默认继承 currentColor） */\n  @Prop() color: string = 'inherit';\n\n  /** 是否旋转动画 */\n  @Prop() spin: boolean = false;\n\n  private normalizeSize(): string {\n    if (typeof this.size === 'number') {\n      return `${this.size}px`;\n    }\n    return this.size;\n  }\n\n  render() {\n    const dimension = this.normalizeSize();\n    const path = ICON_PATHS[this.name];\n\n    const svgStyle = {\n      width: dimension,\n      height: dimension,\n      color: this.color,\n    };\n\n    if (path) {\n      // close / arrow 等使用 stroke 描边；info/warning/eye 等使用 fill 填充\n      const strokeBased = this.name === 'close' || this.name.startsWith('arrow-');\n      return (\n        <svg\n          class={{ 'hb-icon': true, 'hb-icon--spin': this.spin }}\n          viewBox=\"0 0 24 24\"\n          style={svgStyle}\n          fill={strokeBased ? 'none' : 'currentColor'}\n          stroke={strokeBased ? 'currentColor' : 'none'}\n          stroke-width={strokeBased ? 2 : 0}\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d={path} />\n        </svg>\n      );\n    }\n\n    // 未知 name：渲染占位方块 + title 文本\n    return (\n      <span\n        class={{ 'hb-icon': true, 'hb-icon--spin': this.spin, 'hb-icon--placeholder': true }}\n        style={svgStyle}\n        role=\"img\"\n        aria-label={this.name}\n      >\n        {this.name || ''}\n      </span>\n    );\n  }\n}\n"],"version":3}

package/dist/components/hb-image-preview.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface HbImagePreview extends Components.HbImagePreview, HTMLElement {}
+export const HbImagePreview: {
+    prototype: HbImagePreview;
+    new (): HbImagePreview;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/hb-image-preview.js

@@ -0,0 +1,207 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-1407a5e8.js';
+
+const imagePreviewCss = "/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;tab-size:4;-webkit-tap-highlight-color:transparent}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex;padding-block:0}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}} /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;:host{display:contents}.hb-image-preview{background-color:var(--hb-color-bg-mask,#00000080);inset:0;position:fixed;z-index:var(--hb-z-index-modal-mask,2000)}.hb-image-preview,.hb-image-preview__wrapper{align-items:center;display:flex;justify-content:center}.hb-image-preview__img,.hb-image-preview__wrapper{max-height:90vh;max-width:90vw}.hb-image-preview__img{object-fit:contain;pointer-events:none;transition:transform .2s;-webkit-user-select:none;user-select:none}.hb-image-preview__btn{align-items:center;background-color:#0006;border:none;border-radius:50%;color:var(--hb-color-text-inverse,#fff);cursor:pointer;display:flex;font-size:28px;height:44px;justify-content:center;line-height:1;position:absolute;top:50%;transform:translateY(-50%);transition:background-color var(--hb-transition-duration,.2s)ease;width:44px}.hb-image-preview__btn:hover{background-color:#0009}.hb-image-preview__btn--prev{left:24px}.hb-image-preview__btn--next{right:24px}.hb-image-preview__toolbar{align-items:center;background-color:#00000080;border-radius:var(--hb-border-radius-base,4px);bottom:32px;color:var(--hb-color-text-inverse,#fff);display:flex;gap:4px;left:50%;padding:8px 12px;position:absolute;transform:translate(-50%)}.hb-image-preview__tool{background:0 0;border:none;border-radius:var(--hb-border-radius-sm,2px);color:var(--hb-color-text-inverse,#fff);cursor:pointer;font-size:16px;height:32px;min-width:32px;padding:0 8px;transition:background-color var(--hb-transition-duration,.2s)ease}.hb-image-preview__tool:hover{background-color:#ffffff26}.hb-image-preview__tool-label{display:inline-flex;font-size:13px;min-width:48px;padding:0 4px}.hb-image-preview__close,.hb-image-preview__tool-label{align-items:center;color:var(--hb-color-text-inverse,#fff);justify-content:center}.hb-image-preview__close{background-color:#0006;border:none;border-radius:50%;cursor:pointer;display:flex;font-size:28px;height:40px;line-height:1;position:absolute;right:24px;top:24px;transition:background-color var(--hb-transition-duration,.2s)ease;width:40px}.hb-image-preview__close:hover{background-color:#0009}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}";
+const HbImagePreviewStyle0 = imagePreviewCss;
+
+const ImagePreview = /*@__PURE__*/ proxyCustomElement(class ImagePreview extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.hbClose = createEvent(this, "hbClose", 7);
+        this.hbChange = createEvent(this, "hbChange", 7);
+    }
+    get el() { return this; }
+    /** 是否显示预览（受控，可双向） */
+    modelValue = false;
+    /** 单图源（srcList 为空时使用） */
+    src = '';
+    /** 多图源列表 */
+    srcList = [];
+    /** 多图当前索引 */
+    current = 0;
+    /** 单次缩放步长 */
+    zoomStep = 0.2;
+    /** 最小缩放比例 */
+    minZoom = 0.5;
+    /** 最大缩放比例 */
+    maxZoom = 3;
+    /** 关闭事件 */
+    hbClose;
+    /** 切换事件，detail 为 { src, index } */
+    hbChange;
+    /** 当前缩放比例 */
+    zoom = 1;
+    /** 当前旋转角度 */
+    rotate = 0;
+    keyDownHandler = (e) => {
+        if (!this.modelValue)
+            return;
+        if (e.key === 'Escape') {
+            this.close();
+        }
+        else if (e.key === 'ArrowLeft') {
+            this.prev();
+        }
+        else if (e.key === 'ArrowRight') {
+            this.next();
+        }
+    };
+    handleVisibleChange(newVal) {
+        if (newVal) {
+            // 打开时重置缩放与旋转
+            this.zoom = 1;
+            this.rotate = 0;
+            document.addEventListener('keydown', this.keyDownHandler);
+        }
+        else {
+            document.removeEventListener('keydown', this.keyDownHandler);
+        }
+    }
+    handleCurrentChange() {
+        // 切换图片时重置变换
+        this.zoom = 1;
+        this.rotate = 0;
+    }
+    componentDidLoad() {
+        if (this.modelValue) {
+            document.addEventListener('keydown', this.keyDownHandler);
+        }
+    }
+    disconnectedCallback() {
+        document.removeEventListener('keydown', this.keyDownHandler);
+    }
+    /** 实际可切换的图片列表 */
+    get imageList() {
+        if (this.srcList && this.srcList.length > 0) {
+            return this.srcList;
+        }
+        return this.src ? [this.src] : [];
+    }
+    get currentIndex() {
+        const list = this.imageList;
+        if (list.length === 0)
+            return 0;
+        if (this.current < 0)
+            return 0;
+        if (this.current >= list.length)
+            return list.length - 1;
+        return this.current;
+    }
+    get currentSrc() {
+        const list = this.imageList;
+        if (list.length === 0)
+            return '';
+        return list[this.currentIndex] || '';
+    }
+    get isMulti() {
+        return this.imageList.length > 1;
+    }
+    close = () => {
+        this.modelValue = false;
+        this.hbClose.emit();
+    };
+    emitChange() {
+        this.hbChange.emit({ src: this.currentSrc, index: this.currentIndex });
+    }
+    next = () => {
+        const list = this.imageList;
+        if (list.length <= 1)
+            return;
+        this.current = (this.currentIndex + 1) % list.length;
+        this.emitChange();
+    };
+    prev = () => {
+        const list = this.imageList;
+        if (list.length <= 1)
+            return;
+        this.current = (this.currentIndex - 1 + list.length) % list.length;
+        this.emitChange();
+    };
+    zoomIn = () => {
+        const next = Math.min(this.zoom + this.zoomStep, this.maxZoom);
+        this.zoom = Math.round(next * 100) / 100;
+    };
+    zoomOut = () => {
+        const next = Math.max(this.zoom - this.zoomStep, this.minZoom);
+        this.zoom = Math.round(next * 100) / 100;
+    };
+    handleReset = () => {
+        this.zoom = 1;
+        this.rotate = 0;
+    };
+    handleRotateLeft = () => {
+        this.rotate = this.rotate - 90;
+    };
+    handleRotateRight = () => {
+        this.rotate = this.rotate + 90;
+    };
+    /** 滚轮缩放 */
+    handleWheel = (e) => {
+        // TODO: 平滑缩放 + 图片中心锚点；当前实现为基础步长缩放
+        e.preventDefault();
+        if (e.deltaY < 0) {
+            this.zoomIn();
+        }
+        else {
+            this.zoomOut();
+        }
+    };
+    /** 点击遮罩空白处关闭 */
+    handleOverlayClick = (e) => {
+        if (e.target === e.currentTarget) {
+            this.close();
+        }
+    };
+    stopAndClose = (e) => {
+        e.stopPropagation();
+        this.close();
+    };
+    render() {
+        if (!this.modelValue)
+            return null;
+        const imgStyle = {
+            transform: `scale(${this.zoom}) rotate(${this.rotate}deg)`,
+        };
+        return (h("div", { class: "hb-image-preview", onClick: this.handleOverlayClick }, h("div", { class: "hb-image-preview__wrapper" }, h("img", { class: "hb-image-preview__img", src: this.currentSrc, alt: "", style: imgStyle, onWheel: this.handleWheel })), this.isMulti && (h("button", { type: "button", class: "hb-image-preview__btn hb-image-preview__btn--prev", onClick: this.prev, "aria-label": "\u4E0A\u4E00\u5F20" }, "\u2039")), this.isMulti && (h("button", { type: "button", class: "hb-image-preview__btn hb-image-preview__btn--next", onClick: this.next, "aria-label": "\u4E0B\u4E00\u5F20" }, "\u203A")), h("div", { class: "hb-image-preview__toolbar", onClick: (e) => e.stopPropagation() }, h("button", { type: "button", class: "hb-image-preview__tool", onClick: this.zoomOut, "aria-label": "\u7F29\u5C0F" }, "\uFF0D"), h("span", { class: "hb-image-preview__tool-label" }, Math.round(this.zoom * 100), "%"), h("button", { type: "button", class: "hb-image-preview__tool", onClick: this.zoomIn, "aria-label": "\u653E\u5927" }, "\uFF0B"), h("button", { type: "button", class: "hb-image-preview__tool", onClick: this.handleRotateLeft, "aria-label": "\u5DE6\u65CB" }, "\u21BA"), h("button", { type: "button", class: "hb-image-preview__tool", onClick: this.handleRotateRight, "aria-label": "\u53F3\u65CB" }, "\u21BB"), h("button", { type: "button", class: "hb-image-preview__tool", onClick: this.handleReset, "aria-label": "\u91CD\u7F6E" }, "\u27F2"), h("button", { type: "button", class: "hb-image-preview__tool", onClick: this.stopAndClose, "aria-label": "\u5173\u95ED" }, "\u2715")), h("button", { type: "button", class: "hb-image-preview__close", onClick: this.stopAndClose, "aria-label": "\u5173\u95ED" }, "\u00D7")));
+    }
+    static get watchers() { return {
+        "modelValue": ["handleVisibleChange"],
+        "current": ["handleCurrentChange"]
+    }; }
+    static get style() { return HbImagePreviewStyle0; }
+}, [1, "hb-image-preview", {
+        "modelValue": [1028, "model-value"],
+        "src": [1],
+        "srcList": [16],
+        "current": [1026],
+        "zoomStep": [2, "zoom-step"],
+        "minZoom": [2, "min-zoom"],
+        "maxZoom": [2, "max-zoom"],
+        "zoom": [32],
+        "rotate": [32]
+    }, undefined, {
+        "modelValue": ["handleVisibleChange"],
+        "current": ["handleCurrentChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hb-image-preview"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hb-image-preview":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ImagePreview);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const HbImagePreview = ImagePreview;
+const defineCustomElement = defineCustomElement$1;
+
+export { HbImagePreview, defineCustomElement };
+
+//# sourceMappingURL=hb-image-preview.js.map

package/dist/components/hb-image-preview.js.map

@@ -0,0 +1 @@
+{"file":"hb-image-preview.js","mappings":";;AAAA,MAAM,eAAe,GAAG,unQAAunQ,CAAC;AAChpQ,6BAAe,eAAe;;MCejB,YAAY;;;;;;;;;;IAIE,UAAU,GAAY,KAAK,CAAC;;IAG7C,GAAG,GAAW,EAAE,CAAC;;IAGjB,OAAO,GAAa,EAAE,CAAC;;IAGN,OAAO,GAAW,CAAC,CAAC;;IAGrC,QAAQ,GAAW,GAAG,CAAC;;IAGvB,OAAO,GAAW,GAAG,CAAC;;IAGtB,OAAO,GAAW,CAAC,CAAC;;IAGnB,OAAO,CAAqB;;IAG5B,QAAQ,CAAyC;;IAGjD,IAAI,GAAW,CAAC,CAAC;;IAGjB,MAAM,GAAW,CAAC,CAAC;IAEpB,cAAc,GAAG,CAAC,CAAgB;QACxC,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO;QAC7B,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;YACtB,IAAI,CAAC,KAAK,EAAE,CAAC;SACd;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE;YAChC,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,EAAE;YACjC,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;KACF,CAAC;IAGF,mBAAmB,CAAC,MAAe;QACjC,IAAI,MAAM,EAAE;;YAEV,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;YACd,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;YAChB,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;SAC3D;aAAM;YACL,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;SAC9D;KACF;IAGD,mBAAmB;;QAEjB,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;QACd,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;KACjB;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;SAC3D;KACF;IAED,oBAAoB;QAClB,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;KAC9D;;IAGD,IAAY,SAAS;QACnB,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;YAC3C,OAAO,IAAI,CAAC,OAAO,CAAC;SACrB;QACD,OAAO,IAAI,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;KACnC;IAED,IAAY,YAAY;QACtB,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC;QAC5B,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,CAAC,CAAC;QAChC,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC;YAAE,OAAO,CAAC,CAAC;QAC/B,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QACxD,OAAO,IAAI,CAAC,OAAO,CAAC;KACrB;IAED,IAAY,UAAU;QACpB,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC;QAC5B,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,EAAE,CAAC;QACjC,OAAO,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KACtC;IAED,IAAY,OAAO;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;KAClC;IAEO,KAAK,GAAG;QACd,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QACxB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;KACrB,CAAC;IAEM,UAAU;QAChB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;KACxE;IAEO,IAAI,GAAG;QACb,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC;QAC5B,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC;YAAE,OAAO;QAC7B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC;QACrD,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB,CAAC;IAEM,IAAI,GAAG;QACb,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC;QAC5B,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC;YAAE,OAAO;QAC7B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC;QACnE,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB,CAAC;IAEM,MAAM,GAAG;QACf,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAC/D,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;KAC1C,CAAC;IAEM,OAAO,GAAG;QAChB,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAC/D,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;KAC1C,CAAC;IAEM,WAAW,GAAG;QACpB,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;QACd,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;KACjB,CAAC;IAEM,gBAAgB,GAAG;QACzB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;KAChC,CAAC;IAEM,iBAAiB,GAAG;QAC1B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;KAChC,CAAC;;IAGM,WAAW,GAAG,CAAC,CAAa;;QAElC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;YAChB,IAAI,CAAC,MAAM,EAAE,CAAC;SACf;aAAM;YACL,IAAI,CAAC,OAAO,EAAE,CAAC;SAChB;KACF,CAAC;;IAGM,kBAAkB,GAAG,CAAC,CAAa;QACzC,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa,EAAE;YAChC,IAAI,CAAC,KAAK,EAAE,CAAC;SACd;KACF,CAAC;IAEM,YAAY,GAAG,CAAC,CAAa;QACnC,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,KAAK,EAAE,CAAC;KACd,CAAC;IAEF,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO,IAAI,CAAC;QAElC,MAAM,QAAQ,GAAG;YACf,SAAS,EAAE,SAAS,IAAI,CAAC,IAAI,YAAY,IAAI,CAAC,MAAM,MAAM;SAC3D,CAAC;QAEF,QACE,WAAK,KAAK,EAAC,kBAAkB,EAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,IAC5D,WAAK,KAAK,EAAC,2BAA2B,IACpC,WACE,KAAK,EAAC,uBAAuB,EAC7B,GAAG,EAAE,IAAI,CAAC,UAAU,EACpB,GAAG,EAAC,EAAE,EACN,KAAK,EAAE,QAAQ,EACf,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACE,EAEL,IAAI,CAAC,OAAO,KACX,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,mDAAmD,EACzD,OAAO,EAAE,IAAI,CAAC,IAAI,gBACP,oBAAK,aAGT,CACV,EACA,IAAI,CAAC,OAAO,KACX,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,mDAAmD,EACzD,OAAO,EAAE,IAAI,CAAC,IAAI,gBACP,oBAAK,aAGT,CACV,EAED,WAAK,KAAK,EAAC,2BAA2B,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,eAAe,EAAE,IACxE,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,wBAAwB,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,gBAAa,cAAI,aAElF,EACT,YAAM,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC,MAAS,EAChF,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,wBAAwB,EAAC,OAAO,EAAE,IAAI,CAAC,MAAM,gBAAa,cAAI,aAEjF,EACT,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,wBAAwB,EAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,gBAAa,cAAI,aAE3F,EACT,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,wBAAwB,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,gBAAa,cAAI,aAE5F,EACT,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,wBAAwB,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,gBAAa,cAAI,aAEtF,EACT,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,wBAAwB,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,gBAAa,cAAI,aAEvF,CACL,EAEN,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,yBAAyB,EAC/B,OAAO,EAAE,IAAI,CAAC,YAAY,gBACf,cAAI,aAGR,CACL,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ImagePreview/image-preview.css?tag=hb-image-preview&encapsulation=shadow","src/components/ImagePreview/ImagePreview.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.hb-image-preview {\n  position: fixed;\n  inset: 0;\n  z-index: var(--hb-z-index-modal-mask, 2000);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--hb-color-bg-mask, rgba(0, 0, 0, 0.5));\n}\n\n.hb-image-preview__wrapper {\n  max-width: 90vw;\n  max-height: 90vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.hb-image-preview__img {\n  max-width: 90vw;\n  max-height: 90vh;\n  object-fit: contain;\n  user-select: none;\n  transition: transform 0.2s ease;\n  pointer-events: none;\n}\n\n.hb-image-preview__btn {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 44px;\n  height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: 50%;\n  background-color: rgba(0, 0, 0, 0.4);\n  color: var(--hb-color-text-inverse, #ffffff);\n  font-size: 28px;\n  line-height: 1;\n  cursor: pointer;\n  transition: background-color var(--hb-transition-duration, 0.2s) ease;\n}\n\n.hb-image-preview__btn:hover {\n  background-color: rgba(0, 0, 0, 0.6);\n}\n\n.hb-image-preview__btn--prev {\n  left: 24px;\n}\n\n.hb-image-preview__btn--next {\n  right: 24px;\n}\n\n.hb-image-preview__toolbar {\n  position: absolute;\n  bottom: 32px;\n  left: 50%;\n  transform: translateX(-50%);\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 8px 12px;\n  border-radius: var(--hb-border-radius-base, 4px);\n  background-color: rgba(0, 0, 0, 0.5);\n  color: var(--hb-color-text-inverse, #ffffff);\n}\n\n.hb-image-preview__tool {\n  min-width: 32px;\n  height: 32px;\n  padding: 0 8px;\n  border: none;\n  border-radius: var(--hb-border-radius-sm, 2px);\n  background: transparent;\n  color: var(--hb-color-text-inverse, #ffffff);\n  font-size: 16px;\n  cursor: pointer;\n  transition: background-color var(--hb-transition-duration, 0.2s) ease;\n}\n\n.hb-image-preview__tool:hover {\n  background-color: rgba(255, 255, 255, 0.15);\n}\n\n.hb-image-preview__tool-label {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 48px;\n  padding: 0 4px;\n  font-size: 13px;\n  color: var(--hb-color-text-inverse, #ffffff);\n}\n\n.hb-image-preview__close {\n  position: absolute;\n  top: 24px;\n  right: 24px;\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: 50%;\n  background-color: rgba(0, 0, 0, 0.4);\n  color: var(--hb-color-text-inverse, #ffffff);\n  font-size: 28px;\n  line-height: 1;\n  cursor: pointer;\n  transition: background-color var(--hb-transition-duration, 0.2s) ease;\n}\n\n.hb-image-preview__close:hover {\n  background-color: rgba(0, 0, 0, 0.6);\n}\n","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\n\nexport interface ImagePreviewChangeDetail {\n  src: string;\n  index: number;\n}\n\n/**\n * ImagePreview 图片预览组件\n * 点击图片后展示大图，支持缩放、旋转、多图切换\n */\n@Component({\n  tag: 'hb-image-preview',\n  styleUrl: 'image-preview.css',\n  shadow: true,\n})\nexport class ImagePreview {\n  @Element() el: HTMLElement;\n\n  /** 是否显示预览（受控，可双向） */\n  @Prop({ mutable: true }) modelValue: boolean = false;\n\n  /** 单图源（srcList 为空时使用） */\n  @Prop() src: string = '';\n\n  /** 多图源列表 */\n  @Prop() srcList: string[] = [];\n\n  /** 多图当前索引 */\n  @Prop({ mutable: true }) current: number = 0;\n\n  /** 单次缩放步长 */\n  @Prop() zoomStep: number = 0.2;\n\n  /** 最小缩放比例 */\n  @Prop() minZoom: number = 0.5;\n\n  /** 最大缩放比例 */\n  @Prop() maxZoom: number = 3;\n\n  /** 关闭事件 */\n  @Event() hbClose: EventEmitter<void>;\n\n  /** 切换事件，detail 为 { src, index } */\n  @Event() hbChange: EventEmitter<ImagePreviewChangeDetail>;\n\n  /** 当前缩放比例 */\n  @State() zoom: number = 1;\n\n  /** 当前旋转角度 */\n  @State() rotate: number = 0;\n\n  private keyDownHandler = (e: KeyboardEvent) => {\n    if (!this.modelValue) return;\n    if (e.key === 'Escape') {\n      this.close();\n    } else if (e.key === 'ArrowLeft') {\n      this.prev();\n    } else if (e.key === 'ArrowRight') {\n      this.next();\n    }\n  };\n\n  @Watch('modelValue')\n  handleVisibleChange(newVal: boolean) {\n    if (newVal) {\n      // 打开时重置缩放与旋转\n      this.zoom = 1;\n      this.rotate = 0;\n      document.addEventListener('keydown', this.keyDownHandler);\n    } else {\n      document.removeEventListener('keydown', this.keyDownHandler);\n    }\n  }\n\n  @Watch('current')\n  handleCurrentChange() {\n    // 切换图片时重置变换\n    this.zoom = 1;\n    this.rotate = 0;\n  }\n\n  componentDidLoad() {\n    if (this.modelValue) {\n      document.addEventListener('keydown', this.keyDownHandler);\n    }\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('keydown', this.keyDownHandler);\n  }\n\n  /** 实际可切换的图片列表 */\n  private get imageList(): string[] {\n    if (this.srcList && this.srcList.length > 0) {\n      return this.srcList;\n    }\n    return this.src ? [this.src] : [];\n  }\n\n  private get currentIndex(): number {\n    const list = this.imageList;\n    if (list.length === 0) return 0;\n    if (this.current < 0) return 0;\n    if (this.current >= list.length) return list.length - 1;\n    return this.current;\n  }\n\n  private get currentSrc(): string {\n    const list = this.imageList;\n    if (list.length === 0) return '';\n    return list[this.currentIndex] || '';\n  }\n\n  private get isMulti(): boolean {\n    return this.imageList.length > 1;\n  }\n\n  private close = () => {\n    this.modelValue = false;\n    this.hbClose.emit();\n  };\n\n  private emitChange() {\n    this.hbChange.emit({ src: this.currentSrc, index: this.currentIndex });\n  }\n\n  private next = () => {\n    const list = this.imageList;\n    if (list.length <= 1) return;\n    this.current = (this.currentIndex + 1) % list.length;\n    this.emitChange();\n  };\n\n  private prev = () => {\n    const list = this.imageList;\n    if (list.length <= 1) return;\n    this.current = (this.currentIndex - 1 + list.length) % list.length;\n    this.emitChange();\n  };\n\n  private zoomIn = () => {\n    const next = Math.min(this.zoom + this.zoomStep, this.maxZoom);\n    this.zoom = Math.round(next * 100) / 100;\n  };\n\n  private zoomOut = () => {\n    const next = Math.max(this.zoom - this.zoomStep, this.minZoom);\n    this.zoom = Math.round(next * 100) / 100;\n  };\n\n  private handleReset = () => {\n    this.zoom = 1;\n    this.rotate = 0;\n  };\n\n  private handleRotateLeft = () => {\n    this.rotate = this.rotate - 90;\n  };\n\n  private handleRotateRight = () => {\n    this.rotate = this.rotate + 90;\n  };\n\n  /** 滚轮缩放 */\n  private handleWheel = (e: WheelEvent) => {\n    // TODO: 平滑缩放 + 图片中心锚点；当前实现为基础步长缩放\n    e.preventDefault();\n    if (e.deltaY < 0) {\n      this.zoomIn();\n    } else {\n      this.zoomOut();\n    }\n  };\n\n  /** 点击遮罩空白处关闭 */\n  private handleOverlayClick = (e: MouseEvent) => {\n    if (e.target === e.currentTarget) {\n      this.close();\n    }\n  };\n\n  private stopAndClose = (e: MouseEvent) => {\n    e.stopPropagation();\n    this.close();\n  };\n\n  render() {\n    if (!this.modelValue) return null;\n\n    const imgStyle = {\n      transform: `scale(${this.zoom}) rotate(${this.rotate}deg)`,\n    };\n\n    return (\n      <div class=\"hb-image-preview\" onClick={this.handleOverlayClick}>\n        <div class=\"hb-image-preview__wrapper\">\n          <img\n            class=\"hb-image-preview__img\"\n            src={this.currentSrc}\n            alt=\"\"\n            style={imgStyle}\n            onWheel={this.handleWheel}\n          />\n        </div>\n\n        {this.isMulti && (\n          <button\n            type=\"button\"\n            class=\"hb-image-preview__btn hb-image-preview__btn--prev\"\n            onClick={this.prev}\n            aria-label=\"上一张\"\n          >\n            ‹\n          </button>\n        )}\n        {this.isMulti && (\n          <button\n            type=\"button\"\n            class=\"hb-image-preview__btn hb-image-preview__btn--next\"\n            onClick={this.next}\n            aria-label=\"下一张\"\n          >\n            ›\n          </button>\n        )}\n\n        <div class=\"hb-image-preview__toolbar\" onClick={(e) => e.stopPropagation()}>\n          <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.zoomOut} aria-label=\"缩小\">\n            －\n          </button>\n          <span class=\"hb-image-preview__tool-label\">{Math.round(this.zoom * 100)}%</span>\n          <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.zoomIn} aria-label=\"放大\">\n            ＋\n          </button>\n          <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.handleRotateLeft} aria-label=\"左旋\">\n            ↺\n          </button>\n          <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.handleRotateRight} aria-label=\"右旋\">\n            ↻\n          </button>\n          <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.handleReset} aria-label=\"重置\">\n            ⟲\n          </button>\n          <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.stopAndClose} aria-label=\"关闭\">\n            ✕\n          </button>\n        </div>\n\n        <button\n          type=\"button\"\n          class=\"hb-image-preview__close\"\n          onClick={this.stopAndClose}\n          aria-label=\"关闭\"\n        >\n          ×\n        </button>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/hb-image.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface HbImage extends Components.HbImage, HTMLElement {}
+export const HbImage: {
+    prototype: HbImage;
+    new (): HbImage;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;