@xplor-education/core-stencil-components 3.1.2 → 3.1.3

package/components/xplor-badge-deleted.js

@@ -8,7 +8,7 @@ const XplorBadgeDeleted$1 = /*@__PURE__*/ proxyCustomElement(class XplorBadgeDel
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: 'df3f8b3c1375d524ab3d43973744d60c2abfaac5' }, h("span", { key: '61801350159e59fe22fd75ebe81d0c6601df3de7', class: "xplor-badge-deleted" }, "Deleted")));
+        return (h(Host, { key: '07d61ee7c210ada3c3eaf2b0c0c91bb6747d39e6' }, h("span", { key: '1535e3498d7e7b1d12438b835cb3da2efec112ff', class: "xplor-badge-deleted" }, "Deleted")));
     }
     static get style() { return xplorBadgeDeletedCss; }
 }, [2, "xplor-badge-deleted"]);

package/components/xplor-badge-expired.js

@@ -8,7 +8,7 @@ const XplorBadgeExpired$1 = /*@__PURE__*/ proxyCustomElement(class XplorBadgeExp
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: 'fed692675532969ab1353a505743baf529ee8267' }, h("span", { key: '780c2bf72f1b4d0f6dc2057ac1b4fc2c29e9b479', class: "xplor-badge-expired" }, "Expired")));
+        return (h(Host, { key: '28da2eebab84d7cb5ce6aa010d102c6b45b607d9' }, h("span", { key: '879d02cf4052f13e3e5324be091bea5fa0849300', class: "xplor-badge-expired" }, "Expired")));
     }
     static get style() { return xplorBadgeExpiredCss; }
 }, [2, "xplor-badge-expired"]);

package/components/xplor-badge-inactive.js

@@ -8,7 +8,7 @@ const XplorBadgeInactive$1 = /*@__PURE__*/ proxyCustomElement(class XplorBadgeIn
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: '91648179b68ae6aa6db61292bf53b27761b7e00a' }, h("span", { key: '08eab77d253bf84f767f78e0ee147147d7b999ef', class: "xplor-badge-inactive" }, "Inactive")));
+        return (h(Host, { key: 'f87a4a1d082c17102c5192ca1c064d636b13d803' }, h("span", { key: '75aa909657eedd5b91d90cf0b71a59215e13b2c8', class: "xplor-badge-inactive" }, "Inactive")));
     }
     static get style() { return xplorBadgeInactiveCss; }
 }, [2, "xplor-badge-inactive"]);

package/components/xplor-badge-recalled.js

@@ -8,7 +8,7 @@ const XplorBadgeRecalled$1 = /*@__PURE__*/ proxyCustomElement(class XplorBadgeRe
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: '9233d1e70a44d0b058b44f42afab990f4bdb851d' }, h("span", { key: 'be98dcedb815e3df2c68c94ba21b7084f55523a7', class: "xplor-badge-recalled" }, "Recalled")));
+        return (h(Host, { key: 'bf0879b3e61b3f732345c974185809bd78a57063' }, h("span", { key: 'f4cdf5ef2b1bf4910f0bbfc1bbefdee98ae09575', class: "xplor-badge-recalled" }, "Recalled")));
     }
     static get style() { return xplorBadgeRecalledCss; }
 }, [2, "xplor-badge-recalled"]);

package/components/xplor-badge-upcoming.js

@@ -8,7 +8,7 @@ const XplorBadgeUpcoming$1 = /*@__PURE__*/ proxyCustomElement(class XplorBadgeUp
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: '51078127992721291d5b557148239d657b050ad4' }, h("span", { key: 'cd95ea48dad3fb544df80a70318da7671b8700be', class: "xplor-badge-upcoming" }, "Upcoming")));
+        return (h(Host, { key: 'e670e6d49428aae18b3a0f97c39a10745cb5a039' }, h("span", { key: 'dfbd77ac03b9b4779758963e62504450040243b4', class: "xplor-badge-upcoming" }, "Upcoming")));
     }
     static get style() { return xplorBadgeUpcomingCss; }
 }, [2, "xplor-badge-upcoming"]);

package/components/xplor-badge-waitlist.js

@@ -8,7 +8,7 @@ const XplorBadgeWaitlist$1 = /*@__PURE__*/ proxyCustomElement(class XplorBadgeWa
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: '918d4113efa7e206ba15af2ccacdf11950640aaf' }, h("span", { key: '697713efbf0a9b86a6af4e7bf102f07a7ad2dd48', class: "xplor-badge-waitlist" }, "Waitlist")));
+        return (h(Host, { key: '150ff857e845f012a1fb6f8d04cf519b0e18c1dd' }, h("span", { key: '00ef3af174c37039b23603a9d47fd7e30cf497b3', class: "xplor-badge-waitlist" }, "Waitlist")));
     }
     static get style() { return xplorBadgeWaitlistCss; }
 }, [2, "xplor-badge-waitlist"]);

package/components/xplor-badge.js

@@ -116,7 +116,7 @@ const XplorBadge$1 = /*@__PURE__*/ proxyCustomElement(class XplorBadge extends H
         };
     }
     render() {
-        return (h(Host, { key: '4f0691b5233e85340519a7ead5f3f3508c35c307' }, h("span", { key: '1588d8d3a85def71d7e5b5f5883d36ca5a232141', class: this.computedClasses, style: this.cssVars }, h("slot", { key: '571aa32299b77b94351ef8a1b66e071fa318c2e5' }, this.text))));
+        return (h(Host, { key: '4aadb0c86d68133c04ad829d14095aa5c9dba36e' }, h("span", { key: 'f0f4b465265cf55da555ad25d2ea478e7e8d75c0', class: this.computedClasses, style: this.cssVars }, h("slot", { key: '3d6c7ab9d5b383b716c38adebf179d4a9d29ee82' }, this.text))));
     }
     static get style() { return xplorBadgeCss; }
 }, [6, "xplor-badge", {

package/components/xplor-btn-back-to-parent.js

@@ -43,7 +43,7 @@ const XplorBtnBackToParent$1 = /*@__PURE__*/ proxyCustomElement(class XplorBtnBa
         const buttonStyles = {
             '--btn-size': this.size,
         };
-        return (h(Host, { key: '0962b04ae634f044dd3e7c1eacf42b7d2c8e0f1e' }, h("button", { key: '82cb8fa3218a17784a0ab360d328b68f2c0e6e81', class: buttonClasses, style: buttonStyles, onClick: this.handleClick, "aria-label": this.ariaLabel }, h("span", { key: '784853baa5b013fc85a07054e446e6166eab7068', class: "xplor-btn-back-to-parent__icon" }, "\u2715"))));
+        return (h(Host, { key: '3423fa1064a5527c1313e5e74f01093fbfdf9a5c' }, h("button", { key: '362161229ce57836bb0bdcd3d6ce671669208d70', class: buttonClasses, style: buttonStyles, onClick: this.handleClick, "aria-label": this.ariaLabel }, h("span", { key: '223cc632ce76b936f6129e39a1602123c89e4fc1', class: "xplor-btn-back-to-parent__icon" }, "\u2715"))));
     }
     static get style() { return xplorBtnBackToParentCss; }
 }, [2, "xplor-btn-back-to-parent", {

package/components/xplor-btn-back.js

@@ -43,7 +43,7 @@ const XplorBtnBack$1 = /*@__PURE__*/ proxyCustomElement(class XplorBtnBack exten
             '--min-height': this.minHeight,
             '--gap': this.gap,
         };
-        return (h(Host, { key: '1fa9f6b770f01f2a384591293831a2fecb15b593' }, h("button", { key: '3d201c9b3ccb3176401b1c671237825231c78d39', class: buttonClasses, style: buttonStyles, disabled: this.disabled, onClick: this.handleClick }, h("span", { key: '2e92390e29ad2f0e9c5144f802d66544bd1f00c4', class: "xplor-btn-back__icon" }, "\u2039"), h("span", { key: 'e663a5e163007a0fc82162b6d9a2a8018cab8a76', class: "xplor-btn-back__text" }, h("slot", { key: '4bcd417f211ec014b8c861d309bf709048e34c8d' }, "Back")))));
+        return (h(Host, { key: '11a49ee4557580e42bf35430829f95d4744c23c3' }, h("button", { key: '52a8657c87b146ef5ecb0adf0388132a5bb2bf93', class: buttonClasses, style: buttonStyles, disabled: this.disabled, onClick: this.handleClick }, h("span", { key: '6c399ed83f9779a3b0f2e2162b0e05e186f2ba1b', class: "xplor-btn-back__icon" }, "\u2039"), h("span", { key: '05bc6d2cbbef85d33b6ed4225aa4fc45dc4cbe0f', class: "xplor-btn-back__text" }, h("slot", { key: '61800e333b89fb55fe4fe638ce055870fce0e4fd' }, "Back")))));
     }
     static get style() { return xplorBtnBackCss; }
 }, [6, "xplor-btn-back", {

package/components/xplor-btn-icon.js

@@ -44,7 +44,7 @@ const XplorBtnIcon$1 = /*@__PURE__*/ proxyCustomElement(class XplorBtnIcon exten
             '--btn-size': typeof this.size === 'number' ? `${this.size}px` : this.size,
             '--icon-size': typeof this.iconSize === 'number' ? `${this.iconSize}px` : this.iconSize,
         };
-        return (h(Host, { key: '9d87aab5e3af33201c71dffeab51a5a02cc61e98' }, h("button", { key: 'c30b8c4aa51a957c84e7fff3d72e01961dec911c', class: buttonClasses, style: buttonStyles, disabled: this.disabled, onClick: this.handleClick, "aria-label": this.ariaLabel }, h("span", { key: '99773527f599523638ce8463fe308826f01202cf', class: "xplor-btn-icon__content" }, h("slot", { key: '14e1356bcecd1d2b8768cddbaf257f49bf92e5a7' })))));
+        return (h(Host, { key: 'd4312cd0ef1b871a49fc252fdc913c3a089a2d33' }, h("button", { key: '5b9b112c5b1c70ea82c6c615c24403ce514753a0', class: buttonClasses, style: buttonStyles, disabled: this.disabled, onClick: this.handleClick, "aria-label": this.ariaLabel }, h("span", { key: '1736857fad944996c0ad380189edbf5e30c013f0', class: "xplor-btn-icon__content" }, h("slot", { key: '8bd0e864ae2469dfa4fe48c2bd4215a38f8db182' })))));
     }
     static get style() { return xplorBtnIconCss; }
 }, [6, "xplor-btn-icon", {

package/components/xplor-btn-toggle-group.js

@@ -16,7 +16,7 @@ const XplorBtnToggleGroup$1 = /*@__PURE__*/ proxyCustomElement(class XplorBtnTog
         this.density = 'default';
     }
     render() {
-        return (h(Host, { key: '587016261064869ff2b10cf04371963f57642221' }, h("div", { key: 'ee8813207ade2261011e699ce12010135a6d640b', class: "xplor-btn-toggle-group", role: "group" }, h("slot", { key: '3b4d82938d310ac8864a02425d97b822ba4b1d9d' }))));
+        return (h(Host, { key: '9f4c71cf767b466ed9116c30d3befde6d794122d' }, h("div", { key: '8004544207dce87f5eebbb56fa2829a17adcb5e6', class: "xplor-btn-toggle-group", role: "group" }, h("slot", { key: '3aa75d08de1bc105295b5204273c34697b46ef87' }))));
     }
     static get style() { return xplorBtnToggleGroupCss; }
 }, [6, "xplor-btn-toggle-group", {

package/components/xplor-btn-toggle-secondary.js

@@ -33,7 +33,7 @@ const XplorBtnToggleSecondary$1 = /*@__PURE__*/ proxyCustomElement(class XplorBt
             'xplor-btn-toggle-secondary--disabled': this.disabled,
             'xplor-btn-toggle-secondary--inactive-outlined': this.inactiveOutlined && !this.active,
         };
-        return (h(Host, { key: 'e82338d3bdbd2af08df290ee79359acb9e61dfae' }, h("button", { key: '137cf53e7b48676e86e3ed12a575e94792eab35c', class: buttonClasses, disabled: this.disabled, onClick: this.handleClick, "aria-pressed": this.active ? 'true' : 'false' }, h("slot", { key: 'bfacf098eb4692bc56faf88a4444b1c2213d3a3b' }))));
+        return (h(Host, { key: '52551538bd39aedb16ab80e6f7e82d922128df31' }, h("button", { key: '8d527b973bef5aebaf437cd962421572e0005c11', class: buttonClasses, disabled: this.disabled, onClick: this.handleClick, "aria-pressed": this.active ? 'true' : 'false' }, h("slot", { key: '1f8da5c88d120cd82b0e91a40fa76f6f5aaa006b' }))));
     }
     static get style() { return xplorBtnToggleSecondaryCss; }
 }, [6, "xplor-btn-toggle-secondary", {

package/components/xplor-btn-toggle.js

@@ -37,7 +37,7 @@ const XplorBtnToggle$1 = /*@__PURE__*/ proxyCustomElement(class XplorBtnToggle e
             'xplor-btn-toggle--disabled': this.disabled,
             'xplor-btn-toggle--inactive-outlined': this.inactiveOutlined && !this.active,
         };
-        return (h(Host, { key: '9434059f3e934707d2be2dbabe539ef6f06dbf66' }, h("button", { key: 'bbdc0032e4eb79951d06fb47e19ab76a842f0c46', class: buttonClasses, disabled: this.disabled, onClick: this.handleClick, "aria-pressed": this.active ? 'true' : 'false' }, h("slot", { key: 'c5944a5ce768ca5f1cafa5f33dcf72145c94b189' }))));
+        return (h(Host, { key: '0df89df461cff00e400c8519d01355e02944a09b' }, h("button", { key: '3b3ae840b9724bc999729e0596166c6247319d3d', class: buttonClasses, disabled: this.disabled, onClick: this.handleClick, "aria-pressed": this.active ? 'true' : 'false' }, h("slot", { key: '468875beb8d19c779c6c1f29b016e4d870f8c563' }))));
     }
     static get style() { return xplorBtnToggleCss; }
 }, [6, "xplor-btn-toggle", {

package/components/xplor-btn-tooltip.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { d as defineCustomElement$3 } from './p-Bs_ocvfe.js';
-import { d as defineCustomElement$2 } from './p-D4jVa8dE.js';
+import { d as defineCustomElement$3 } from './p-CyGsSa4H.js';
+import { d as defineCustomElement$2 } from './p-BQ6aLuGP.js';
 
 const xplorBtnTooltipCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-btn-tooltip {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-btn-tooltip {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-btn-tooltip {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-btn-tooltip {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-btn-tooltip {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-btn-tooltip {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-btn-tooltip, ul.sc-xplor-btn-tooltip {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-btn-tooltip li.sc-xplor-btn-tooltip, ul.sc-xplor-btn-tooltip li.sc-xplor-btn-tooltip {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-btn-tooltip, ul.mdc-list.sc-xplor-btn-tooltip {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-btn-tooltip li.mdc-list-item.sc-xplor-btn-tooltip, ul.mdc-list.sc-xplor-btn-tooltip li.mdc-list-item.sc-xplor-btn-tooltip {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-btn-tooltip {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-btn-tooltip {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-btn-tooltip {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-btn-tooltip {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-btn-tooltip .mdc-text-field--outlined.sc-xplor-btn-tooltip .mdc-notched-outline__notch.sc-xplor-btn-tooltip {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-btn-tooltip .mdc-notched-outline__notch.sc-xplor-btn-tooltip {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-btn-tooltip .mdc-notched-outline.sc-xplor-btn-tooltip .mdc-notched-outline__notch.sc-xplor-btn-tooltip {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-btn-tooltip {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-btn-tooltip:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-btn-tooltip {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-btn-tooltip-h {\n  display: inline-block;\n}";
 
@@ -13,7 +13,7 @@ const XplorBtnTooltip$1 = /*@__PURE__*/ proxyCustomElement(class XplorBtnTooltip
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '252d295aa8fa8f6f404727baef30d00dbcac17b8' }, h("xplor-tooltip", { key: 'cba71a8dd339f47b16f4a161a341895ca70e22b0', position: this.tooltipPosition, content: this.tooltipText, trigger: "hover", arrow: true, disabled: this.disabled }, h("xplor-button", { key: '31c167ffa852074e94a2cac255ab10b86ad041ef', slot: "trigger", text: this.text, type: this.type, mode: this.mode, "icon-position": this.iconPosition }, h("slot", { key: 'aef011d1873e4f81237f88d651f5bfb7c0fb2569' })))));
+        return (h(Host, { key: '6d43dae5717d346c8a9ffa210f79bd9d74d8d6a9' }, h("xplor-tooltip", { key: 'a5dd7d12066e3fb08334463cc7410d5cdde5158b', position: this.tooltipPosition, content: this.tooltipText, trigger: "hover", arrow: true, disabled: this.disabled }, h("xplor-button", { key: '83e0ac08cfafeeadd25c23e682af15faa2cc81de', slot: "trigger", text: this.text, type: this.type, mode: this.mode, "icon-position": this.iconPosition }, h("slot", { key: 'e994ce16062426a41f67d92dfb0be8f54acceff1' })))));
     }
     static get style() { return xplorBtnTooltipCss; }
 }, [6, "xplor-btn-tooltip", {

package/components/xplor-button.js

@@ -1,4 +1,4 @@
-import { X as XplorButton$1, d as defineCustomElement$1 } from './p-Bs_ocvfe.js';
+import { X as XplorButton$1, d as defineCustomElement$1 } from './p-CyGsSa4H.js';
 
 const XplorButton = XplorButton$1;
 const defineCustomElement = defineCustomElement$1;

package/components/xplor-canvas-editor.d.ts

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

package/components/xplor-canvas-editor.js

@@ -0,0 +1,369 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+
+const xplorCanvasEditorCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-canvas-editor {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-canvas-editor {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-canvas-editor {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-canvas-editor {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-canvas-editor {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-canvas-editor {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-canvas-editor, ul.sc-xplor-canvas-editor {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-canvas-editor li.sc-xplor-canvas-editor, ul.sc-xplor-canvas-editor li.sc-xplor-canvas-editor {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-canvas-editor, ul.mdc-list.sc-xplor-canvas-editor {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-canvas-editor li.mdc-list-item.sc-xplor-canvas-editor, ul.mdc-list.sc-xplor-canvas-editor li.mdc-list-item.sc-xplor-canvas-editor {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-canvas-editor {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-canvas-editor {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-canvas-editor {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-canvas-editor {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-canvas-editor .mdc-text-field--outlined.sc-xplor-canvas-editor .mdc-notched-outline__notch.sc-xplor-canvas-editor {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-canvas-editor .mdc-notched-outline__notch.sc-xplor-canvas-editor {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-canvas-editor .mdc-notched-outline.sc-xplor-canvas-editor .mdc-notched-outline__notch.sc-xplor-canvas-editor {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-canvas-editor {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-canvas-editor:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-canvas-editor {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.margin-128.sc-xplor-canvas-editor {\n  margin: 8rem;\n}\n\n.margin-t-128.sc-xplor-canvas-editor {\n  margin-top: 8rem;\n}\n\n.margin-r-128.sc-xplor-canvas-editor {\n  margin-right: 8rem;\n}\n\n.margin-b-128.sc-xplor-canvas-editor {\n  margin-bottom: 8rem;\n}\n\n.margin-l-128.sc-xplor-canvas-editor {\n  margin-left: 8rem;\n}\n\n.margin-x-128.sc-xplor-canvas-editor {\n  margin-left: 8rem;\n  margin-right: 8rem;\n}\n\n.margin-y-128.sc-xplor-canvas-editor {\n  margin-top: 8rem;\n  margin-bottom: 8rem;\n}\n\n.margin-80.sc-xplor-canvas-editor {\n  margin: 5rem;\n}\n\n.margin-t-80.sc-xplor-canvas-editor {\n  margin-top: 5rem;\n}\n\n.margin-r-80.sc-xplor-canvas-editor {\n  margin-right: 5rem;\n}\n\n.margin-b-80.sc-xplor-canvas-editor {\n  margin-bottom: 5rem;\n}\n\n.margin-l-80.sc-xplor-canvas-editor {\n  margin-left: 5rem;\n}\n\n.margin-x-80.sc-xplor-canvas-editor {\n  margin-left: 5rem;\n  margin-right: 5rem;\n}\n\n.margin-y-80.sc-xplor-canvas-editor {\n  margin-top: 5rem;\n  margin-bottom: 5rem;\n}\n\n.margin-64.sc-xplor-canvas-editor {\n  margin: 4rem;\n}\n\n.margin-t-64.sc-xplor-canvas-editor {\n  margin-top: 4rem;\n}\n\n.margin-r-64.sc-xplor-canvas-editor {\n  margin-right: 4rem;\n}\n\n.margin-b-64.sc-xplor-canvas-editor {\n  margin-bottom: 4rem;\n}\n\n.margin-l-64.sc-xplor-canvas-editor {\n  margin-left: 4rem;\n}\n\n.margin-x-64.sc-xplor-canvas-editor {\n  margin-left: 4rem;\n  margin-right: 4rem;\n}\n\n.margin-y-64.sc-xplor-canvas-editor {\n  margin-top: 4rem;\n  margin-bottom: 4rem;\n}\n\n.margin-56.sc-xplor-canvas-editor {\n  margin: 3.5rem;\n}\n\n.margin-t-56.sc-xplor-canvas-editor {\n  margin-top: 3.5rem;\n}\n\n.margin-r-56.sc-xplor-canvas-editor {\n  margin-right: 3.5rem;\n}\n\n.margin-b-56.sc-xplor-canvas-editor {\n  margin-bottom: 3.5rem;\n}\n\n.margin-l-56.sc-xplor-canvas-editor {\n  margin-left: 3.5rem;\n}\n\n.margin-x-56.sc-xplor-canvas-editor {\n  margin-left: 3.5rem;\n  margin-right: 3.5rem;\n}\n\n.margin-y-56.sc-xplor-canvas-editor {\n  margin-top: 3.5rem;\n  margin-bottom: 3.5rem;\n}\n\n.margin-48.sc-xplor-canvas-editor {\n  margin: 3rem;\n}\n\n.margin-t-48.sc-xplor-canvas-editor {\n  margin-top: 3rem;\n}\n\n.margin-r-48.sc-xplor-canvas-editor {\n  margin-right: 3rem;\n}\n\n.margin-b-48.sc-xplor-canvas-editor {\n  margin-bottom: 3rem;\n}\n\n.margin-l-48.sc-xplor-canvas-editor {\n  margin-left: 3rem;\n}\n\n.margin-x-48.sc-xplor-canvas-editor {\n  margin-left: 3rem;\n  margin-right: 3rem;\n}\n\n.margin-y-48.sc-xplor-canvas-editor {\n  margin-top: 3rem;\n  margin-bottom: 3rem;\n}\n\n.margin-40.sc-xplor-canvas-editor {\n  margin: 2.5rem;\n}\n\n.margin-t-40.sc-xplor-canvas-editor {\n  margin-top: 2.5rem;\n}\n\n.margin-r-40.sc-xplor-canvas-editor {\n  margin-right: 2.5rem;\n}\n\n.margin-b-40.sc-xplor-canvas-editor {\n  margin-bottom: 2.5rem;\n}\n\n.margin-l-40.sc-xplor-canvas-editor {\n  margin-left: 2.5rem;\n}\n\n.margin-x-40.sc-xplor-canvas-editor {\n  margin-left: 2.5rem;\n  margin-right: 2.5rem;\n}\n\n.margin-y-40.sc-xplor-canvas-editor {\n  margin-top: 2.5rem;\n  margin-bottom: 2.5rem;\n}\n\n.margin-32.sc-xplor-canvas-editor {\n  margin: 2rem;\n}\n\n.margin-t-32.sc-xplor-canvas-editor {\n  margin-top: 2rem;\n}\n\n.margin-r-32.sc-xplor-canvas-editor {\n  margin-right: 2rem;\n}\n\n.margin-b-32.sc-xplor-canvas-editor {\n  margin-bottom: 2rem;\n}\n\n.margin-l-32.sc-xplor-canvas-editor {\n  margin-left: 2rem;\n}\n\n.margin-x-32.sc-xplor-canvas-editor {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n\n.margin-y-32.sc-xplor-canvas-editor {\n  margin-top: 2rem;\n  margin-bottom: 2rem;\n}\n\n.margin-24.sc-xplor-canvas-editor {\n  margin: 1.5rem;\n}\n\n.margin-t-24.sc-xplor-canvas-editor {\n  margin-top: 1.5rem;\n}\n\n.margin-r-24.sc-xplor-canvas-editor {\n  margin-right: 1.5rem;\n}\n\n.margin-b-24.sc-xplor-canvas-editor {\n  margin-bottom: 1.5rem;\n}\n\n.margin-l-24.sc-xplor-canvas-editor {\n  margin-left: 1.5rem;\n}\n\n.margin-x-24.sc-xplor-canvas-editor {\n  margin-left: 1.5rem;\n  margin-right: 1.5rem;\n}\n\n.margin-y-24.sc-xplor-canvas-editor {\n  margin-top: 1.5rem;\n  margin-bottom: 1.5rem;\n}\n\n.margin-20.sc-xplor-canvas-editor {\n  margin: 1.25rem;\n}\n\n.margin-t-20.sc-xplor-canvas-editor {\n  margin-top: 1.25rem;\n}\n\n.margin-r-20.sc-xplor-canvas-editor {\n  margin-right: 1.25rem;\n}\n\n.margin-b-20.sc-xplor-canvas-editor {\n  margin-bottom: 1.25rem;\n}\n\n.margin-l-20.sc-xplor-canvas-editor {\n  margin-left: 1.25rem;\n}\n\n.margin-x-20.sc-xplor-canvas-editor {\n  margin-left: 1.25rem;\n  margin-right: 1.25rem;\n}\n\n.margin-y-20.sc-xplor-canvas-editor {\n  margin-top: 1.25rem;\n  margin-bottom: 1.25rem;\n}\n\n.margin-16.sc-xplor-canvas-editor {\n  margin: 1rem;\n}\n\n.margin-t-16.sc-xplor-canvas-editor {\n  margin-top: 1rem;\n}\n\n.margin-r-16.sc-xplor-canvas-editor {\n  margin-right: 1rem;\n}\n\n.margin-b-16.sc-xplor-canvas-editor {\n  margin-bottom: 1rem;\n}\n\n.margin-l-16.sc-xplor-canvas-editor {\n  margin-left: 1rem;\n}\n\n.margin-x-16.sc-xplor-canvas-editor {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n\n.margin-y-16.sc-xplor-canvas-editor {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n\n.margin-12.sc-xplor-canvas-editor {\n  margin: 0.75rem;\n}\n\n.margin-t-12.sc-xplor-canvas-editor {\n  margin-top: 0.75rem;\n}\n\n.margin-r-12.sc-xplor-canvas-editor {\n  margin-right: 0.75rem;\n}\n\n.margin-b-12.sc-xplor-canvas-editor {\n  margin-bottom: 0.75rem;\n}\n\n.margin-l-12.sc-xplor-canvas-editor {\n  margin-left: 0.75rem;\n}\n\n.margin-x-12.sc-xplor-canvas-editor {\n  margin-left: 0.75rem;\n  margin-right: 0.75rem;\n}\n\n.margin-y-12.sc-xplor-canvas-editor {\n  margin-top: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n\n.margin-8.sc-xplor-canvas-editor {\n  margin: 0.5rem;\n}\n\n.margin-t-8.sc-xplor-canvas-editor {\n  margin-top: 0.5rem;\n}\n\n.margin-r-8.sc-xplor-canvas-editor {\n  margin-right: 0.5rem;\n}\n\n.margin-b-8.sc-xplor-canvas-editor {\n  margin-bottom: 0.5rem;\n}\n\n.margin-l-8.sc-xplor-canvas-editor {\n  margin-left: 0.5rem;\n}\n\n.margin-x-8.sc-xplor-canvas-editor {\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n}\n\n.margin-y-8.sc-xplor-canvas-editor {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n\n.margin-4.sc-xplor-canvas-editor {\n  margin: 0.25rem;\n}\n\n.margin-t-4.sc-xplor-canvas-editor {\n  margin-top: 0.25rem;\n}\n\n.margin-r-4.sc-xplor-canvas-editor {\n  margin-right: 0.25rem;\n}\n\n.margin-b-4.sc-xplor-canvas-editor {\n  margin-bottom: 0.25rem;\n}\n\n.margin-l-4.sc-xplor-canvas-editor {\n  margin-left: 0.25rem;\n}\n\n.margin-x-4.sc-xplor-canvas-editor {\n  margin-left: 0.25rem;\n  margin-right: 0.25rem;\n}\n\n.margin-y-4.sc-xplor-canvas-editor {\n  margin-top: 0.25rem;\n  margin-bottom: 0.25rem;\n}\n\n.padding-128.sc-xplor-canvas-editor {\n  padding: 8rem;\n}\n\n.padding-t-128.sc-xplor-canvas-editor {\n  padding-top: 8rem;\n}\n\n.padding-r-128.sc-xplor-canvas-editor {\n  padding-right: 8rem;\n}\n\n.padding-b-128.sc-xplor-canvas-editor {\n  padding-bottom: 8rem;\n}\n\n.padding-l-128.sc-xplor-canvas-editor {\n  padding-left: 8rem;\n}\n\n.padding-x-128.sc-xplor-canvas-editor {\n  padding-left: 8rem;\n  padding-right: 8rem;\n}\n\n.padding-y-128.sc-xplor-canvas-editor {\n  padding-top: 8rem;\n  padding-bottom: 8rem;\n}\n\n.padding-80.sc-xplor-canvas-editor {\n  padding: 5rem;\n}\n\n.padding-t-80.sc-xplor-canvas-editor {\n  padding-top: 5rem;\n}\n\n.padding-r-80.sc-xplor-canvas-editor {\n  padding-right: 5rem;\n}\n\n.padding-b-80.sc-xplor-canvas-editor {\n  padding-bottom: 5rem;\n}\n\n.padding-l-80.sc-xplor-canvas-editor {\n  padding-left: 5rem;\n}\n\n.padding-x-80.sc-xplor-canvas-editor {\n  padding-left: 5rem;\n  padding-right: 5rem;\n}\n\n.padding-y-80.sc-xplor-canvas-editor {\n  padding-top: 5rem;\n  padding-bottom: 5rem;\n}\n\n.padding-64.sc-xplor-canvas-editor {\n  padding: 4rem;\n}\n\n.padding-t-64.sc-xplor-canvas-editor {\n  padding-top: 4rem;\n}\n\n.padding-r-64.sc-xplor-canvas-editor {\n  padding-right: 4rem;\n}\n\n.padding-b-64.sc-xplor-canvas-editor {\n  padding-bottom: 4rem;\n}\n\n.padding-l-64.sc-xplor-canvas-editor {\n  padding-left: 4rem;\n}\n\n.padding-x-64.sc-xplor-canvas-editor {\n  padding-left: 4rem;\n  padding-right: 4rem;\n}\n\n.padding-y-64.sc-xplor-canvas-editor {\n  padding-top: 4rem;\n  padding-bottom: 4rem;\n}\n\n.padding-56.sc-xplor-canvas-editor {\n  padding: 3.5rem;\n}\n\n.padding-t-56.sc-xplor-canvas-editor {\n  padding-top: 3.5rem;\n}\n\n.padding-r-56.sc-xplor-canvas-editor {\n  padding-right: 3.5rem;\n}\n\n.padding-b-56.sc-xplor-canvas-editor {\n  padding-bottom: 3.5rem;\n}\n\n.padding-l-56.sc-xplor-canvas-editor {\n  padding-left: 3.5rem;\n}\n\n.padding-x-56.sc-xplor-canvas-editor {\n  padding-left: 3.5rem;\n  padding-right: 3.5rem;\n}\n\n.padding-y-56.sc-xplor-canvas-editor {\n  padding-top: 3.5rem;\n  padding-bottom: 3.5rem;\n}\n\n.padding-48.sc-xplor-canvas-editor {\n  padding: 3rem;\n}\n\n.padding-t-48.sc-xplor-canvas-editor {\n  padding-top: 3rem;\n}\n\n.padding-r-48.sc-xplor-canvas-editor {\n  padding-right: 3rem;\n}\n\n.padding-b-48.sc-xplor-canvas-editor {\n  padding-bottom: 3rem;\n}\n\n.padding-l-48.sc-xplor-canvas-editor {\n  padding-left: 3rem;\n}\n\n.padding-x-48.sc-xplor-canvas-editor {\n  padding-left: 3rem;\n  padding-right: 3rem;\n}\n\n.padding-y-48.sc-xplor-canvas-editor {\n  padding-top: 3rem;\n  padding-bottom: 3rem;\n}\n\n.padding-40.sc-xplor-canvas-editor {\n  padding: 2.5rem;\n}\n\n.padding-t-40.sc-xplor-canvas-editor {\n  padding-top: 2.5rem;\n}\n\n.padding-r-40.sc-xplor-canvas-editor {\n  padding-right: 2.5rem;\n}\n\n.padding-b-40.sc-xplor-canvas-editor {\n  padding-bottom: 2.5rem;\n}\n\n.padding-l-40.sc-xplor-canvas-editor {\n  padding-left: 2.5rem;\n}\n\n.padding-x-40.sc-xplor-canvas-editor {\n  padding-left: 2.5rem;\n  padding-right: 2.5rem;\n}\n\n.padding-y-40.sc-xplor-canvas-editor {\n  padding-top: 2.5rem;\n  padding-bottom: 2.5rem;\n}\n\n.padding-32.sc-xplor-canvas-editor {\n  padding: 2rem;\n}\n\n.padding-t-32.sc-xplor-canvas-editor {\n  padding-top: 2rem;\n}\n\n.padding-r-32.sc-xplor-canvas-editor {\n  padding-right: 2rem;\n}\n\n.padding-b-32.sc-xplor-canvas-editor {\n  padding-bottom: 2rem;\n}\n\n.padding-l-32.sc-xplor-canvas-editor {\n  padding-left: 2rem;\n}\n\n.padding-x-32.sc-xplor-canvas-editor {\n  padding-left: 2rem;\n  padding-right: 2rem;\n}\n\n.padding-y-32.sc-xplor-canvas-editor {\n  padding-top: 2rem;\n  padding-bottom: 2rem;\n}\n\n.padding-24.sc-xplor-canvas-editor {\n  padding: 1.5rem;\n}\n\n.padding-t-24.sc-xplor-canvas-editor {\n  padding-top: 1.5rem;\n}\n\n.padding-r-24.sc-xplor-canvas-editor {\n  padding-right: 1.5rem;\n}\n\n.padding-b-24.sc-xplor-canvas-editor {\n  padding-bottom: 1.5rem;\n}\n\n.padding-l-24.sc-xplor-canvas-editor {\n  padding-left: 1.5rem;\n}\n\n.padding-x-24.sc-xplor-canvas-editor {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n}\n\n.padding-y-24.sc-xplor-canvas-editor {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n\n.padding-20.sc-xplor-canvas-editor {\n  padding: 1.25rem;\n}\n\n.padding-t-20.sc-xplor-canvas-editor {\n  padding-top: 1.25rem;\n}\n\n.padding-r-20.sc-xplor-canvas-editor {\n  padding-right: 1.25rem;\n}\n\n.padding-b-20.sc-xplor-canvas-editor {\n  padding-bottom: 1.25rem;\n}\n\n.padding-l-20.sc-xplor-canvas-editor {\n  padding-left: 1.25rem;\n}\n\n.padding-x-20.sc-xplor-canvas-editor {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n\n.padding-y-20.sc-xplor-canvas-editor {\n  padding-top: 1.25rem;\n  padding-bottom: 1.25rem;\n}\n\n.padding-16.sc-xplor-canvas-editor {\n  padding: 1rem;\n}\n\n.padding-t-16.sc-xplor-canvas-editor {\n  padding-top: 1rem;\n}\n\n.padding-r-16.sc-xplor-canvas-editor {\n  padding-right: 1rem;\n}\n\n.padding-b-16.sc-xplor-canvas-editor {\n  padding-bottom: 1rem;\n}\n\n.padding-l-16.sc-xplor-canvas-editor {\n  padding-left: 1rem;\n}\n\n.padding-x-16.sc-xplor-canvas-editor {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.padding-y-16.sc-xplor-canvas-editor {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n\n.padding-12.sc-xplor-canvas-editor {\n  padding: 0.75rem;\n}\n\n.padding-t-12.sc-xplor-canvas-editor {\n  padding-top: 0.75rem;\n}\n\n.padding-r-12.sc-xplor-canvas-editor {\n  padding-right: 0.75rem;\n}\n\n.padding-b-12.sc-xplor-canvas-editor {\n  padding-bottom: 0.75rem;\n}\n\n.padding-l-12.sc-xplor-canvas-editor {\n  padding-left: 0.75rem;\n}\n\n.padding-x-12.sc-xplor-canvas-editor {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n\n.padding-y-12.sc-xplor-canvas-editor {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n\n.padding-8.sc-xplor-canvas-editor {\n  padding: 0.5rem;\n}\n\n.padding-t-8.sc-xplor-canvas-editor {\n  padding-top: 0.5rem;\n}\n\n.padding-r-8.sc-xplor-canvas-editor {\n  padding-right: 0.5rem;\n}\n\n.padding-b-8.sc-xplor-canvas-editor {\n  padding-bottom: 0.5rem;\n}\n\n.padding-l-8.sc-xplor-canvas-editor {\n  padding-left: 0.5rem;\n}\n\n.padding-x-8.sc-xplor-canvas-editor {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.padding-y-8.sc-xplor-canvas-editor {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.padding-4.sc-xplor-canvas-editor {\n  padding: 0.25rem;\n}\n\n.padding-t-4.sc-xplor-canvas-editor {\n  padding-top: 0.25rem;\n}\n\n.padding-r-4.sc-xplor-canvas-editor {\n  padding-right: 0.25rem;\n}\n\n.padding-b-4.sc-xplor-canvas-editor {\n  padding-bottom: 0.25rem;\n}\n\n.padding-l-4.sc-xplor-canvas-editor {\n  padding-left: 0.25rem;\n}\n\n.padding-x-4.sc-xplor-canvas-editor {\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n}\n\n.padding-y-4.sc-xplor-canvas-editor {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n\n.sc-xplor-canvas-editor-h {\n  display: block;\n  --canvas-bg: var(--color-surface, #ffffff);\n  --canvas-border: var(--color-gray-200, #eeeeee);\n  --canvas-border-radius: 0.75rem;\n  --canvas-toolbar-bg: var(--color-gray-50, #fafafa);\n  --canvas-toolbar-border: var(--color-gray-200, #eeeeee);\n  --handle-size: 5;\n  --handle-fill: #ffffff;\n  --handle-stroke: var(--color-primary-500, var(--color-primary-500, #2196f3));\n  --selection-color: var(--color-primary-500, var(--color-primary-500, #2196f3));\n  --canvas-btn-size: 2rem;\n  --canvas-btn-color: var(--color-gray-600, #757575);\n  --canvas-btn-active-bg: var(--color-primary-50, var(--color-primary-50, #e3f2fd));\n  --canvas-btn-active-color: var(--color-primary-500, var(--color-primary-500, #2196f3));\n  --canvas-btn-hover-bg: var(--color-gray-100, #f5f5f5);\n  --canvas-btn-danger-color: var(--color-error-600, var(--color-error-600, #e53935));\n  --canvas-btn-danger-hover-bg: var(--color-error-50, #fef2f2);\n}\n\n.xplor-canvas__sr-only.sc-xplor-canvas-editor {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.xplor-canvas.sc-xplor-canvas-editor {\n  display: inline-flex;\n  flex-direction: column;\n  border: 1px solid var(--canvas-border);\n  border-radius: var(--canvas-border-radius);\n  background-color: var(--canvas-bg);\n  overflow: hidden;\n  outline: none;\n  position: relative;\n}\n.xplor-canvas.sc-xplor-canvas-editor:focus-visible {\n  outline: 2px solid var(--selection-color);\n  outline-offset: 2px;\n}\n\n.xplor-canvas__toolbar.sc-xplor-canvas-editor {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  padding: 0.25rem 0.5rem;\n  background-color: var(--canvas-toolbar-bg);\n  border-bottom: 1px solid var(--canvas-toolbar-border);\n  flex-shrink: 0;\n}\n\n.xplor-canvas__toolbar-group.sc-xplor-canvas-editor {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.xplor-canvas__toolbar-divider.sc-xplor-canvas-editor {\n  width: 1px;\n  height: 1.5rem;\n  background-color: var(--canvas-toolbar-border);\n  margin: 0 0.25rem;\n  flex-shrink: 0;\n}\n\n.xplor-canvas__toolbar-btn.sc-xplor-canvas-editor {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--canvas-btn-size);\n  height: var(--canvas-btn-size);\n  border: none;\n  border-radius: 0.375rem;\n  background: transparent;\n  color: var(--canvas-btn-color);\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease;\n  padding: 0;\n  flex-shrink: 0;\n}\n.xplor-canvas__toolbar-btn.sc-xplor-canvas-editor svg.sc-xplor-canvas-editor {\n  pointer-events: none;\n}\n.xplor-canvas__toolbar-btn.sc-xplor-canvas-editor:hover:not(:disabled) {\n  background-color: var(--canvas-btn-hover-bg);\n}\n.xplor-canvas__toolbar-btn.sc-xplor-canvas-editor:focus-visible {\n  outline: 2px solid var(--selection-color);\n  outline-offset: 1px;\n}\n.xplor-canvas__toolbar-btn--active.sc-xplor-canvas-editor {\n  background-color: var(--canvas-btn-active-bg);\n  color: var(--canvas-btn-active-color);\n}\n.xplor-canvas__toolbar-btn--danger.sc-xplor-canvas-editor {\n  color: var(--canvas-btn-danger-color);\n}\n.xplor-canvas__toolbar-btn--danger.sc-xplor-canvas-editor:hover:not(:disabled) {\n  background-color: var(--canvas-btn-danger-hover-bg);\n}\n.xplor-canvas__toolbar-btn.sc-xplor-canvas-editor:disabled {\n  opacity: 0.35;\n  cursor: not-allowed;\n}\n\n.xplor-canvas__svg-wrapper.sc-xplor-canvas-editor {\n  overflow: auto;\n  flex: 1 1 auto;\n  line-height: 0;\n}\n\n.xplor-canvas__svg.sc-xplor-canvas-editor {\n  display: block;\n  background-color: var(--canvas-bg);\n  user-select: none;\n  -webkit-user-select: none;\n  cursor: default;\n}\n\n.xplor-canvas__bg.sc-xplor-canvas-editor {\n  fill: transparent;\n}\n\n.xplor-canvas__shape.sc-xplor-canvas-editor {\n  transition: opacity 0.1s ease;\n}\n.xplor-canvas__shape.sc-xplor-canvas-editor:hover {\n  opacity: 0.85;\n}\n.xplor-canvas__shape--selected.sc-xplor-canvas-editor {\n  opacity: 1;\n}\n.xplor-canvas__shape--draft.sc-xplor-canvas-editor {\n  pointer-events: none;\n  opacity: 0.7;\n  stroke-dasharray: 4, 3;\n}\n\n.xplor-canvas__selection-overlay.sc-xplor-canvas-editor {\n  pointer-events: none;\n}\n\n.xplor-canvas__handle.sc-xplor-canvas-editor {\n  fill: var(--handle-fill, #ffffff);\n  stroke: var(--handle-stroke, var(--color-primary-500, #2196f3));\n  stroke-width: 2;\n  transition: fill 0.1s ease, transform 0.1s ease;\n}\n.xplor-canvas__handle.sc-xplor-canvas-editor:hover {\n  fill: var(--handle-stroke, var(--color-primary-500, #2196f3));\n  transform-origin: center;\n  transform: scale(1.3);\n}\n.xplor-canvas__handle.sc-xplor-canvas-editor:focus-visible {\n  outline: 2px solid var(--selection-color);\n  outline-offset: 2px;\n}\n\n.dark.sc-xplor-canvas-editor-h, .dark .sc-xplor-canvas-editor-h {\n  --canvas-bg: var(--color-surface-dark, #1e1e2e);\n  --canvas-border: var(--color-gray-700, #616161);\n  --canvas-toolbar-bg: var(--color-gray-800, #424242);\n  --canvas-toolbar-border: var(--color-gray-700, #616161);\n  --canvas-btn-color: var(--color-gray-300, #e0e0e0);\n  --canvas-btn-hover-bg: var(--color-gray-700, #616161);\n  --canvas-btn-active-bg: rgba(33, 150, 243, 0.2);\n  --canvas-btn-active-color: var(--color-primary-300, var(--color-primary-300, #64b5f6));\n  --handle-fill: #1e1e2e;\n}";
+
+let canvasIdCounter = 0;
+const XplorCanvasEditor$1 = /*@__PURE__*/ proxyCustomElement(class XplorCanvasEditor extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.xplorShapeAdd = createEvent(this, "xplorShapeAdd");
+        this.xplorShapeRemove = createEvent(this, "xplorShapeRemove");
+        this.xplorShapeChange = createEvent(this, "xplorShapeChange");
+        this.componentId = `xplor-canvas-${++canvasIdCounter}`;
+        // Drawing state (non-reactive, no need to trigger re-render)
+        this.isDrawing = false;
+        this.drawStart = null;
+        // Resize state
+        this.isResizing = false;
+        this.resizeHandle = null;
+        this.resizeStart = null;
+        // -------------------------------------------------------------------------
+        // Props
+        // -------------------------------------------------------------------------
+        /** Width of the SVG canvas in pixels */
+        this.width = 800;
+        /** Height of the SVG canvas in pixels */
+        this.height = 500;
+        /**
+         * Initially active tool. The consumer can switch tool programmatically by
+         * updating this prop; the internal `activeTool` state takes over once the
+         * component mounts.
+         */
+        this.tool = 'select';
+        // -------------------------------------------------------------------------
+        // State
+        // -------------------------------------------------------------------------
+        this.shapes = [];
+        this.selectedId = null;
+        this.activeTool = 'select';
+        this.draftShape = null;
+        // -------------------------------------------------------------------------
+        // Private: Drawing handlers (SVG events)
+        // -------------------------------------------------------------------------
+        this.onSvgMouseDown = (event) => {
+            // Only draw if target is the SVG itself or the background rect
+            const target = event.target;
+            const isBackground = target === this.svgEl ||
+                target.classList.contains('xplor-canvas__bg');
+            if (this.activeTool === 'select') {
+                // Clicking background clears selection
+                if (isBackground) {
+                    this.selectedId = null;
+                }
+                return;
+            }
+            if (!isBackground)
+                return;
+            const point = this.getSvgPoint(event);
+            this.isDrawing = true;
+            this.drawStart = point;
+            this.draftShape = {
+                id: '__draft__',
+                type: this.activeTool,
+                x: point.x,
+                y: point.y,
+                width: 0,
+                height: 0,
+                fill: 'rgba(33, 150, 243, 0.15)',
+                stroke: '#2196f3',
+            };
+            event.preventDefault();
+        };
+        this.onSvgMouseMove = (event) => {
+            if (!this.isDrawing || !this.drawStart || !this.draftShape)
+                return;
+            const point = this.getSvgPoint(event);
+            const x = Math.min(point.x, this.drawStart.x);
+            const y = Math.min(point.y, this.drawStart.y);
+            const width = Math.abs(point.x - this.drawStart.x);
+            const height = Math.abs(point.y - this.drawStart.y);
+            // Spread to a new object to trigger re-render
+            this.draftShape = Object.assign(Object.assign({}, this.draftShape), { x, y, width, height });
+        };
+        this.onSvgMouseUp = (_event) => {
+            if (!this.isDrawing || !this.draftShape) {
+                this.isDrawing = false;
+                return;
+            }
+            this.isDrawing = false;
+            // Discard draws smaller than 5 px in either dimension
+            if (this.draftShape.width < 5 || this.draftShape.height < 5) {
+                this.draftShape = null;
+                this.drawStart = null;
+                return;
+            }
+            const newShape = Object.assign(Object.assign({}, this.draftShape), { id: this.generateId(), fill: 'rgba(33, 150, 243, 0.25)', stroke: '#1976d2' });
+            this.shapes = [...this.shapes, newShape];
+            this.draftShape = null;
+            this.drawStart = null;
+            this.xplorShapeAdd.emit(newShape);
+        };
+        this.onShapeClick = (event, shape) => {
+            if (this.activeTool !== 'select')
+                return;
+            event.stopPropagation();
+            this.selectedId = shape.id;
+        };
+        // -------------------------------------------------------------------------
+        // Private: Resize handlers
+        // -------------------------------------------------------------------------
+        this.onResizeHandleMouseDown = (event, handleName) => {
+            event.stopPropagation();
+            event.preventDefault();
+            const selectedShape = this.shapes.find(s => s.id === this.selectedId);
+            if (!selectedShape)
+                return;
+            const point = this.getSvgPoint(event);
+            this.isResizing = true;
+            this.resizeHandle = handleName;
+            this.resizeStart = { x: point.x, y: point.y, shape: Object.assign({}, selectedShape) };
+            const onMouseMove = (e) => this.onResizeMouseMove(e);
+            const onMouseUp = (e) => {
+                this.onResizeMouseUp(e);
+                window.removeEventListener('mousemove', onMouseMove);
+                window.removeEventListener('mouseup', onMouseUp);
+            };
+            window.addEventListener('mousemove', onMouseMove);
+            window.addEventListener('mouseup', onMouseUp);
+        };
+        this.onResizeMouseMove = (event) => {
+            if (!this.isResizing || !this.resizeStart || !this.resizeHandle)
+                return;
+            const point = this.getSvgPoint(event);
+            const dx = point.x - this.resizeStart.x;
+            const dy = point.y - this.resizeStart.y;
+            const orig = this.resizeStart.shape;
+            const MIN = 10;
+            let { x, y, width, height } = orig;
+            if (this.resizeHandle.includes('e')) {
+                width = Math.max(MIN, orig.width + dx);
+            }
+            if (this.resizeHandle.includes('w')) {
+                const newWidth = Math.max(MIN, orig.width - dx);
+                x = orig.x + (orig.width - newWidth);
+                width = newWidth;
+            }
+            if (this.resizeHandle.includes('s')) {
+                height = Math.max(MIN, orig.height + dy);
+            }
+            if (this.resizeHandle.includes('n')) {
+                const newHeight = Math.max(MIN, orig.height - dy);
+                y = orig.y + (orig.height - newHeight);
+                height = newHeight;
+            }
+            this.shapes = this.shapes.map(s => s.id === this.selectedId ? Object.assign(Object.assign({}, s), { x, y, width, height }) : s);
+        };
+        this.onResizeMouseUp = (_event) => {
+            if (!this.isResizing)
+                return;
+            this.isResizing = false;
+            this.resizeHandle = null;
+            this.resizeStart = null;
+            const updatedShape = this.shapes.find(s => s.id === this.selectedId);
+            if (updatedShape) {
+                this.xplorShapeChange.emit(Object.assign({}, updatedShape));
+            }
+        };
+        // -------------------------------------------------------------------------
+        // Private: Keyboard handler (on the wrapper div)
+        // -------------------------------------------------------------------------
+        this.onKeyDown = (event) => {
+            if (event.key === 'Delete' || event.key === 'Backspace') {
+                event.preventDefault();
+                this.deleteSelected();
+            }
+        };
+    }
+    // -------------------------------------------------------------------------
+    // Lifecycle
+    // -------------------------------------------------------------------------
+    componentWillLoad() {
+        this.activeTool = this.tool;
+    }
+    // -------------------------------------------------------------------------
+    // Public methods
+    // -------------------------------------------------------------------------
+    /** Removes all shapes and clears the selection */
+    async clearAll() {
+        this.shapes = [];
+        this.selectedId = null;
+    }
+    /** Returns a shallow copy of all current shapes */
+    async getShapes() {
+        return [...this.shapes];
+    }
+    // -------------------------------------------------------------------------
+    // Private: Utilities
+    // -------------------------------------------------------------------------
+    generateId() {
+        return `shape-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+    }
+    getSvgPoint(event) {
+        const rect = this.svgEl.getBoundingClientRect();
+        return {
+            x: Math.max(0, Math.min(this.width, event.clientX - rect.left)),
+            y: Math.max(0, Math.min(this.height, event.clientY - rect.top)),
+        };
+    }
+    setActiveTool(tool) {
+        this.activeTool = tool;
+        this.draftShape = null;
+        this.isDrawing = false;
+    }
+    deleteSelected() {
+        if (!this.selectedId)
+            return;
+        const id = this.selectedId;
+        this.shapes = this.shapes.filter(s => s.id !== id);
+        this.selectedId = null;
+        this.xplorShapeRemove.emit(id);
+    }
+    // -------------------------------------------------------------------------
+    // Private: SVG render helpers
+    // -------------------------------------------------------------------------
+    renderShape(shape, isDraft = false) {
+        const isSelected = !isDraft && shape.id === this.selectedId;
+        const commonProps = {
+            class: {
+                'xplor-canvas__shape': true,
+                'xplor-canvas__shape--selected': isSelected,
+                'xplor-canvas__shape--draft': isDraft,
+            },
+            fill: shape.fill,
+            stroke: shape.stroke,
+            'stroke-width': '2',
+            style: {
+                cursor: this.activeTool === 'select' && !isDraft ? 'pointer' : 'default',
+            },
+            onClick: !isDraft
+                ? (e) => this.onShapeClick(e, shape)
+                : undefined,
+        };
+        if (shape.type === 'rect') {
+            return (h("rect", Object.assign({}, commonProps, { x: shape.x, y: shape.y, width: shape.width, height: shape.height, rx: "2" })));
+        }
+        if (shape.type === 'circle') {
+            return (h("ellipse", Object.assign({}, commonProps, { cx: shape.x + shape.width / 2, cy: shape.y + shape.height / 2, rx: shape.width / 2, ry: shape.height / 2 })));
+        }
+        if (shape.type === 'line') {
+            return (h("line", Object.assign({}, commonProps, { x1: shape.x, y1: shape.y, x2: shape.x + shape.width, y2: shape.y + shape.height, fill: "none" })));
+        }
+        return null;
+    }
+    renderSelectionOverlay(shape) {
+        const overlayProps = {
+            class: 'xplor-canvas__selection-overlay',
+            stroke: 'var(--selection-color, #2196f3)',
+            'stroke-dasharray': '5,3',
+            'stroke-width': '2',
+            fill: 'none',
+            style: { pointerEvents: 'none' },
+        };
+        if (shape.type === 'line') {
+            return (h("line", Object.assign({}, overlayProps, { x1: shape.x, y1: shape.y, x2: shape.x + shape.width, y2: shape.y + shape.height })));
+        }
+        if (shape.type === 'circle') {
+            return (h("ellipse", Object.assign({}, overlayProps, { cx: shape.x + shape.width / 2, cy: shape.y + shape.height / 2, rx: shape.width / 2, ry: shape.height / 2 })));
+        }
+        // rect (default)
+        return (h("rect", Object.assign({}, overlayProps, { x: shape.x, y: shape.y, width: shape.width, height: shape.height, rx: "2" })));
+    }
+    renderResizeHandles(shape) {
+        const { x, y, width, height } = shape;
+        const mx = x + width / 2;
+        const my = y + height / 2;
+        const handles = [
+            { name: 'nw', cx: x, cy: y, cursor: 'nwse-resize' },
+            { name: 'n', cx: mx, cy: y, cursor: 'ns-resize' },
+            { name: 'ne', cx: x + width, cy: y, cursor: 'nesw-resize' },
+            { name: 'e', cx: x + width, cy: my, cursor: 'ew-resize' },
+            { name: 'se', cx: x + width, cy: y + height, cursor: 'nwse-resize' },
+            { name: 's', cx: mx, cy: y + height, cursor: 'ns-resize' },
+            { name: 'sw', cx: x, cy: y + height, cursor: 'nesw-resize' },
+            { name: 'w', cx: x, cy: my, cursor: 'ew-resize' },
+        ];
+        return handles.map(h => (h("circle", { key: h.name, class: "xplor-canvas__handle", cx: h.cx, cy: h.cy, r: "var(--handle-size, 5)", style: { cursor: h.cursor }, onMouseDown: (e) => this.onResizeHandleMouseDown(e, h.name), "aria-label": `Resize ${h.name.toUpperCase()} handle`, role: "button" })));
+    }
+    // -------------------------------------------------------------------------
+    // Private: Toolbar render
+    // -------------------------------------------------------------------------
+    renderToolbar() {
+        const tools = [
+            {
+                id: 'select',
+                label: 'Select tool',
+                icon: (h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, h("path", { d: "M4 0 L20 12 L12.5 14.5 L10 24 Z" }))),
+            },
+            {
+                id: 'rect',
+                label: 'Rectangle tool',
+                icon: (h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "aria-hidden": "true" }, h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "1" }))),
+            },
+            {
+                id: 'circle',
+                label: 'Circle / Ellipse tool',
+                icon: (h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "aria-hidden": "true" }, h("ellipse", { cx: "12", cy: "12", rx: "9", ry: "9" }))),
+            },
+            {
+                id: 'line',
+                label: 'Line tool',
+                icon: (h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "aria-hidden": "true" }, h("line", { x1: "3", y1: "21", x2: "21", y2: "3" }))),
+            },
+        ];
+        return (h("div", { class: "xplor-canvas__toolbar", role: "toolbar", "aria-label": "Canvas drawing tools", id: `${this.componentId}-toolbar` }, h("div", { class: "xplor-canvas__toolbar-group", role: "group", "aria-label": "Drawing tools" }, tools.map(t => (h("button", { type: "button", key: t.id, class: {
+                'xplor-canvas__toolbar-btn': true,
+                'xplor-canvas__toolbar-btn--active': this.activeTool === t.id,
+            }, "aria-label": t.label, "aria-pressed": String(this.activeTool === t.id), title: t.label, onClick: () => this.setActiveTool(t.id) }, t.icon)))), h("div", { class: "xplor-canvas__toolbar-divider", "aria-hidden": "true" }), h("div", { class: "xplor-canvas__toolbar-group", role: "group", "aria-label": "Canvas actions" }, h("button", { type: "button", class: {
+                'xplor-canvas__toolbar-btn': true,
+                'xplor-canvas__toolbar-btn--danger': !!this.selectedId,
+            }, "aria-label": "Delete selected shape", title: "Delete selected (Del)", disabled: !this.selectedId, onClick: () => this.deleteSelected() }, h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, h("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" }))), h("button", { type: "button", class: "xplor-canvas__toolbar-btn", "aria-label": "Clear all shapes", title: "Clear all", onClick: () => this.clearAll() }, h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, h("path", { d: "M5 13h14v-2H5v2zm-2 4h14v-2H3v2zM7 7v2h14V7H7z" }), h("path", { d: "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" }))))));
+    }
+    // -------------------------------------------------------------------------
+    // Render
+    // -------------------------------------------------------------------------
+    render() {
+        const selectedShape = this.selectedId
+            ? this.shapes.find(s => s.id === this.selectedId)
+            : null;
+        const svgCursor = this.activeTool !== 'select' ? 'crosshair' : 'default';
+        return (h(Host, { key: '14f6878d3a4a6de64d1862ab998f2acdf00004d5' }, h("div", { key: '62a4fff983faeea8884d30df8a3bc3e39e6931a6', class: "xplor-canvas", role: "application", "aria-label": "Canvas editor", "aria-describedby": `${this.componentId}-desc`, tabIndex: 0, onKeyDown: this.onKeyDown }, h("span", { key: 'cb962f76307036784990f491e9b55f38baa0b660', id: `${this.componentId}-desc`, class: "xplor-canvas__sr-only" }, "Interactive canvas editor. Use toolbar to select a drawing tool, then click and drag on the canvas to draw shapes. Press Delete to remove a selected shape."), this.renderToolbar(), h("div", { key: 'e46429cfb82d2804ad97f474469e307d4cedc61a', class: "xplor-canvas__svg-wrapper" }, h("svg", { key: '01f59f5ad95af1854ce8883b79fbcb382b8c910f', ref: el => (this.svgEl = el), class: "xplor-canvas__svg", width: this.width, height: this.height, style: { cursor: svgCursor }, "aria-label": `Drawing canvas, ${this.shapes.length} shape${this.shapes.length !== 1 ? 's' : ''}`, role: "img", onMouseDown: this.onSvgMouseDown, onMouseMove: this.onSvgMouseMove, onMouseUp: this.onSvgMouseUp }, h("rect", { key: '831a519b540b5dd36c15edec85ad67bcb6d1dc03', class: "xplor-canvas__bg", x: "0", y: "0", width: this.width, height: this.height, fill: "transparent" }), this.shapes.map(shape => this.renderShape(shape)), selectedShape && this.renderSelectionOverlay(selectedShape), selectedShape &&
+            this.activeTool === 'select' &&
+            this.renderResizeHandles(selectedShape), this.draftShape && this.renderShape(this.draftShape, true))), h("div", { key: '5758ccf14f88614a1732085e287bad7f29ea0030', class: "xplor-canvas__sr-only", "aria-live": "polite", "aria-atomic": "true" }, this.shapes.length > 0
+            ? `Canvas contains ${this.shapes.length} shape${this.shapes.length !== 1 ? 's' : ''}.`
+            : 'Canvas is empty.'))));
+    }
+    get el() { return this; }
+    static get style() { return xplorCanvasEditorCss; }
+}, [2, "xplor-canvas-editor", {
+        "width": [2],
+        "height": [2],
+        "tool": [1],
+        "shapes": [32],
+        "selectedId": [32],
+        "activeTool": [32],
+        "draftShape": [32],
+        "clearAll": [64],
+        "getShapes": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-canvas-editor"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-canvas-editor":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorCanvasEditor$1);
+            }
+            break;
+    } });
+}
+
+const XplorCanvasEditor = XplorCanvasEditor$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorCanvasEditor, defineCustomElement };
+//# sourceMappingURL=xplor-canvas-editor.js.map
+
+//# sourceMappingURL=xplor-canvas-editor.js.map