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

package/dist/components/xplor-canvas-editor.js

@@ -0,0 +1,370 @@
+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;
+    } });
+}
+defineCustomElement$1();
+
+const XplorCanvasEditor = XplorCanvasEditor$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorCanvasEditor, defineCustomElement };
+//# sourceMappingURL=xplor-canvas-editor.js.map
+
+//# sourceMappingURL=xplor-canvas-editor.js.map

package/dist/components/xplor-canvas-editor.js.map

@@ -0,0 +1 @@
+{"file":"xplor-canvas-editor.js","mappings":"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","names":["XplorCanvasEditor","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-canvas-editor/xplor-canvas-editor.scss?tag=xplor-canvas-editor&encapsulation=scoped","src/components/xplor-canvas-editor/xplor-canvas-editor.tsx"],"sourcesContent":["@use '../../styles/colours.scss' as colours;\n@use '../../styles/spacing.scss' as spacing;\n@use '../../styles/mixins.scss' as mixins;\n\n// ---------------------------------------------------------------------------\n// CSS custom properties — all overridable by the consumer\n// ---------------------------------------------------------------------------\n\n:host {\n  display: block;\n\n  --canvas-bg: var(--color-surface, #ffffff);\n  --canvas-border: var(--color-gray-200, #{colours.$gray-200});\n  --canvas-border-radius: 0.75rem;\n  --canvas-toolbar-bg: var(--color-gray-50, #{colours.$gray-50});\n  --canvas-toolbar-border: var(--color-gray-200, #{colours.$gray-200});\n\n  --handle-size: 5;              // used as SVG r= attribute value (unitless)\n  --handle-fill: #ffffff;\n  --handle-stroke: var(--color-primary-500, #{colours.$primary-500});\n\n  --selection-color: var(--color-primary-500, #{colours.$primary-500});\n\n  --canvas-btn-size: 2rem;\n  --canvas-btn-color: var(--color-gray-600, #{colours.$gray-600});\n  --canvas-btn-active-bg: var(--color-primary-50, #{colours.$primary-50});\n  --canvas-btn-active-color: var(--color-primary-500, #{colours.$primary-500});\n  --canvas-btn-hover-bg: var(--color-gray-100, #{colours.$gray-100});\n  --canvas-btn-danger-color: var(--color-error-600, #{colours.$error-600});\n  --canvas-btn-danger-hover-bg: var(--color-error-50, #fef2f2);\n}\n\n// ---------------------------------------------------------------------------\n// Screen-reader-only utility\n// ---------------------------------------------------------------------------\n\n.xplor-canvas__sr-only {\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// ---------------------------------------------------------------------------\n// Outer wrapper\n// ---------------------------------------------------------------------------\n\n.xplor-canvas {\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  // Keyboard focus ring\n  &:focus-visible {\n    outline: 2px solid var(--selection-color);\n    outline-offset: 2px;\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Toolbar\n// ---------------------------------------------------------------------------\n\n.xplor-canvas__toolbar {\n  display: flex;\n  align-items: center;\n  gap: spacing.$spacing-4;\n  padding: spacing.$spacing-4 spacing.$spacing-8;\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 {\n  display: flex;\n  align-items: center;\n  gap: spacing.$spacing-4;\n}\n\n.xplor-canvas__toolbar-divider {\n  width: 1px;\n  height: 1.5rem;\n  background-color: var(--canvas-toolbar-border);\n  margin: 0 spacing.$spacing-4;\n  flex-shrink: 0;\n}\n\n.xplor-canvas__toolbar-btn {\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  svg {\n    pointer-events: none;\n  }\n\n  &:hover:not(:disabled) {\n    background-color: var(--canvas-btn-hover-bg);\n  }\n\n  &:focus-visible {\n    outline: 2px solid var(--selection-color);\n    outline-offset: 1px;\n  }\n\n  // Active / pressed tool\n  &--active {\n    background-color: var(--canvas-btn-active-bg);\n    color: var(--canvas-btn-active-color);\n  }\n\n  // Danger (delete selected — only when enabled)\n  &--danger {\n    color: var(--canvas-btn-danger-color);\n\n    &:hover:not(:disabled) {\n      background-color: var(--canvas-btn-danger-hover-bg);\n    }\n  }\n\n  // Disabled\n  &:disabled {\n    opacity: 0.35;\n    cursor: not-allowed;\n  }\n}\n\n// ---------------------------------------------------------------------------\n// SVG wrapper + canvas\n// ---------------------------------------------------------------------------\n\n.xplor-canvas__svg-wrapper {\n  overflow: auto;\n  flex: 1 1 auto;\n  line-height: 0; // remove inline-block gap\n}\n\n.xplor-canvas__svg {\n  display: block;\n  background-color: var(--canvas-bg);\n  user-select: none;\n  -webkit-user-select: none;\n\n  // Crosshair applied inline via style binding;\n  // default cursor is set here as a fallback\n  cursor: default;\n}\n\n// ---------------------------------------------------------------------------\n// Background rect (transparent hit area)\n// ---------------------------------------------------------------------------\n\n.xplor-canvas__bg {\n  fill: transparent;\n}\n\n// ---------------------------------------------------------------------------\n// Shapes\n// ---------------------------------------------------------------------------\n\n.xplor-canvas__shape {\n  transition: opacity 0.1s ease;\n\n  // Hover emphasis in select mode (selector applied via JS style prop too)\n  &:hover {\n    opacity: 0.85;\n  }\n\n  // Selected state — fill with a subtle tint; actual dashed outline is the overlay\n  &--selected {\n    opacity: 1;\n  }\n\n  // In-progress draft\n  &--draft {\n    pointer-events: none;\n    opacity: 0.7;\n    stroke-dasharray: 4, 3;\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Selection overlay (dashed border, pointer-events: none via inline style)\n// ---------------------------------------------------------------------------\n\n.xplor-canvas__selection-overlay {\n  // Appearance is set inline (stroke, stroke-dasharray) to keep SVG valid\n  pointer-events: none;\n}\n\n// ---------------------------------------------------------------------------\n// Resize handles\n// ---------------------------------------------------------------------------\n\n.xplor-canvas__handle {\n  fill: var(--handle-fill, #ffffff);\n  stroke: var(--handle-stroke, #{colours.$primary-500});\n  stroke-width: 2;\n  transition: fill 0.1s ease, transform 0.1s ease;\n\n  &:hover {\n    fill: var(--handle-stroke, #{colours.$primary-500});\n    transform-origin: center;\n    transform: scale(1.3);\n  }\n\n  &:focus-visible {\n    outline: 2px solid var(--selection-color);\n    outline-offset: 2px;\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Dark mode tokens\n// ---------------------------------------------------------------------------\n\n:host(.dark),\n.dark :host {\n  --canvas-bg: var(--color-surface-dark, #1e1e2e);\n  --canvas-border: var(--color-gray-700, #{colours.$gray-700});\n  --canvas-toolbar-bg: var(--color-gray-800, #{colours.$gray-800});\n  --canvas-toolbar-border: var(--color-gray-700, #{colours.$gray-700});\n  --canvas-btn-color: var(--color-gray-300, #{colours.$gray-300});\n  --canvas-btn-hover-bg: var(--color-gray-700, #{colours.$gray-700});\n  --canvas-btn-active-bg: rgba(33, 150, 243, 0.2);\n  --canvas-btn-active-color: var(--color-primary-300, #{colours.$primary-300});\n  --handle-fill: #1e1e2e;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Method,\n  Element,\n} from '@stencil/core';\n\n// ---------------------------------------------------------------------------\n// Shape interface\n// ---------------------------------------------------------------------------\n\nexport interface Shape {\n  id: string;\n  type: 'rect' | 'circle' | 'line';\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  fill: string;\n  stroke: string;\n}\n\nlet canvasIdCounter = 0;\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\n@Component({\n  tag: 'xplor-canvas-editor',\n  styleUrl: 'xplor-canvas-editor.scss',\n  scoped: true,\n})\nexport class XplorCanvasEditor {\n  // -------------------------------------------------------------------------\n  // Internal refs & IDs\n  // -------------------------------------------------------------------------\n\n  @Element() el: HTMLElement;\n\n  private readonly componentId = `xplor-canvas-${++canvasIdCounter}`;\n  private svgEl!: SVGSVGElement;\n\n  // Drawing state (non-reactive, no need to trigger re-render)\n  private isDrawing = false;\n  private drawStart: { x: number; y: number } | null = null;\n\n  // Resize state\n  private isResizing = false;\n  private resizeHandle: string | null = null;\n  private resizeStart: { x: number; y: number; shape: Shape } | null = null;\n\n  // -------------------------------------------------------------------------\n  // Props\n  // -------------------------------------------------------------------------\n\n  /** Width of the SVG canvas in pixels */\n  @Prop() width: number = 800;\n\n  /** Height of the SVG canvas in pixels */\n  @Prop() height: number = 500;\n\n  /**\n   * Initially active tool. The consumer can switch tool programmatically by\n   * updating this prop; the internal `activeTool` state takes over once the\n   * component mounts.\n   */\n  @Prop() tool: 'select' | 'rect' | 'circle' | 'line' = 'select';\n\n  // -------------------------------------------------------------------------\n  // State\n  // -------------------------------------------------------------------------\n\n  @State() private shapes: Shape[] = [];\n  @State() private selectedId: string | null = null;\n  @State() private activeTool: 'select' | 'rect' | 'circle' | 'line' = 'select';\n  @State() private draftShape: Shape | null = null;\n\n  // -------------------------------------------------------------------------\n  // Events\n  // -------------------------------------------------------------------------\n\n  /** Emitted when a new shape is committed to the canvas */\n  @Event() xplorShapeAdd: EventEmitter<Shape>;\n\n  /** Emitted when a shape is removed; payload is the shape id */\n  @Event() xplorShapeRemove: EventEmitter<string>;\n\n  /** Emitted when a shape's bounds are updated via resize */\n  @Event() xplorShapeChange: EventEmitter<Shape>;\n\n  // -------------------------------------------------------------------------\n  // Lifecycle\n  // -------------------------------------------------------------------------\n\n  componentWillLoad() {\n    this.activeTool = this.tool;\n  }\n\n  // -------------------------------------------------------------------------\n  // Public methods\n  // -------------------------------------------------------------------------\n\n  /** Removes all shapes and clears the selection */\n  @Method()\n  async clearAll(): Promise<void> {\n    this.shapes = [];\n    this.selectedId = null;\n  }\n\n  /** Returns a shallow copy of all current shapes */\n  @Method()\n  async getShapes(): Promise<Shape[]> {\n    return [...this.shapes];\n  }\n\n  // -------------------------------------------------------------------------\n  // Private: Utilities\n  // -------------------------------------------------------------------------\n\n  private generateId(): string {\n    return `shape-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\n  }\n\n  private getSvgPoint(event: MouseEvent): { x: number; y: number } {\n    const rect = this.svgEl.getBoundingClientRect();\n    return {\n      x: Math.max(0, Math.min(this.width, event.clientX - rect.left)),\n      y: Math.max(0, Math.min(this.height, event.clientY - rect.top)),\n    };\n  }\n\n  private setActiveTool(tool: 'select' | 'rect' | 'circle' | 'line') {\n    this.activeTool = tool;\n    this.draftShape = null;\n    this.isDrawing = false;\n  }\n\n  private deleteSelected() {\n    if (!this.selectedId) return;\n    const id = this.selectedId;\n    this.shapes = this.shapes.filter(s => s.id !== id);\n    this.selectedId = null;\n    this.xplorShapeRemove.emit(id);\n  }\n\n  // -------------------------------------------------------------------------\n  // Private: Drawing handlers (SVG events)\n  // -------------------------------------------------------------------------\n\n  private onSvgMouseDown = (event: MouseEvent) => {\n    // Only draw if target is the SVG itself or the background rect\n    const target = event.target as SVGElement;\n    const isBackground =\n      target === this.svgEl ||\n      target.classList.contains('xplor-canvas__bg');\n\n    if (this.activeTool === 'select') {\n      // Clicking background clears selection\n      if (isBackground) {\n        this.selectedId = null;\n      }\n      return;\n    }\n\n    if (!isBackground) return;\n\n    const point = this.getSvgPoint(event);\n    this.isDrawing = true;\n    this.drawStart = point;\n\n    this.draftShape = {\n      id: '__draft__',\n      type: this.activeTool as 'rect' | 'circle' | 'line',\n      x: point.x,\n      y: point.y,\n      width: 0,\n      height: 0,\n      fill: 'rgba(33, 150, 243, 0.15)',\n      stroke: '#2196f3',\n    };\n\n    event.preventDefault();\n  };\n\n  private onSvgMouseMove = (event: MouseEvent) => {\n    if (!this.isDrawing || !this.drawStart || !this.draftShape) return;\n\n    const point = this.getSvgPoint(event);\n    const x = Math.min(point.x, this.drawStart.x);\n    const y = Math.min(point.y, this.drawStart.y);\n    const width = Math.abs(point.x - this.drawStart.x);\n    const height = Math.abs(point.y - this.drawStart.y);\n\n    // Spread to a new object to trigger re-render\n    this.draftShape = { ...this.draftShape, x, y, width, height };\n  };\n\n  private onSvgMouseUp = (_event: MouseEvent) => {\n    if (!this.isDrawing || !this.draftShape) {\n      this.isDrawing = false;\n      return;\n    }\n\n    this.isDrawing = false;\n\n    // Discard draws smaller than 5 px in either dimension\n    if (this.draftShape.width < 5 || this.draftShape.height < 5) {\n      this.draftShape = null;\n      this.drawStart = null;\n      return;\n    }\n\n    const newShape: Shape = {\n      ...this.draftShape,\n      id: this.generateId(),\n      fill: 'rgba(33, 150, 243, 0.25)',\n      stroke: '#1976d2',\n    };\n\n    this.shapes = [...this.shapes, newShape];\n    this.draftShape = null;\n    this.drawStart = null;\n    this.xplorShapeAdd.emit(newShape);\n  };\n\n  private onShapeClick = (event: MouseEvent, shape: Shape) => {\n    if (this.activeTool !== 'select') return;\n    event.stopPropagation();\n    this.selectedId = shape.id;\n  };\n\n  // -------------------------------------------------------------------------\n  // Private: Resize handlers\n  // -------------------------------------------------------------------------\n\n  private onResizeHandleMouseDown = (event: MouseEvent, handleName: string) => {\n    event.stopPropagation();\n    event.preventDefault();\n\n    const selectedShape = this.shapes.find(s => s.id === this.selectedId);\n    if (!selectedShape) return;\n\n    const point = this.getSvgPoint(event);\n    this.isResizing = true;\n    this.resizeHandle = handleName;\n    this.resizeStart = { x: point.x, y: point.y, shape: { ...selectedShape } };\n\n    const onMouseMove = (e: MouseEvent) => this.onResizeMouseMove(e);\n    const onMouseUp = (e: MouseEvent) => {\n      this.onResizeMouseUp(e);\n      window.removeEventListener('mousemove', onMouseMove);\n      window.removeEventListener('mouseup', onMouseUp);\n    };\n\n    window.addEventListener('mousemove', onMouseMove);\n    window.addEventListener('mouseup', onMouseUp);\n  };\n\n  private onResizeMouseMove = (event: MouseEvent) => {\n    if (!this.isResizing || !this.resizeStart || !this.resizeHandle) return;\n\n    const point = this.getSvgPoint(event);\n    const dx = point.x - this.resizeStart.x;\n    const dy = point.y - this.resizeStart.y;\n    const orig = this.resizeStart.shape;\n    const MIN = 10;\n\n    let { x, y, width, height } = orig;\n\n    if (this.resizeHandle.includes('e')) {\n      width = Math.max(MIN, orig.width + dx);\n    }\n    if (this.resizeHandle.includes('w')) {\n      const newWidth = Math.max(MIN, orig.width - dx);\n      x = orig.x + (orig.width - newWidth);\n      width = newWidth;\n    }\n    if (this.resizeHandle.includes('s')) {\n      height = Math.max(MIN, orig.height + dy);\n    }\n    if (this.resizeHandle.includes('n')) {\n      const newHeight = Math.max(MIN, orig.height - dy);\n      y = orig.y + (orig.height - newHeight);\n      height = newHeight;\n    }\n\n    this.shapes = this.shapes.map(s =>\n      s.id === this.selectedId ? { ...s, x, y, width, height } : s,\n    );\n  };\n\n  private onResizeMouseUp = (_event: MouseEvent) => {\n    if (!this.isResizing) return;\n    this.isResizing = false;\n    this.resizeHandle = null;\n    this.resizeStart = null;\n\n    const updatedShape = this.shapes.find(s => s.id === this.selectedId);\n    if (updatedShape) {\n      this.xplorShapeChange.emit({ ...updatedShape });\n    }\n  };\n\n  // -------------------------------------------------------------------------\n  // Private: Keyboard handler (on the wrapper div)\n  // -------------------------------------------------------------------------\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Delete' || event.key === 'Backspace') {\n      event.preventDefault();\n      this.deleteSelected();\n    }\n  };\n\n  // -------------------------------------------------------------------------\n  // Private: SVG render helpers\n  // -------------------------------------------------------------------------\n\n  private renderShape(shape: Shape, isDraft = false) {\n    const isSelected = !isDraft && shape.id === this.selectedId;\n\n    const commonProps = {\n      class: {\n        'xplor-canvas__shape': true,\n        'xplor-canvas__shape--selected': isSelected,\n        'xplor-canvas__shape--draft': isDraft,\n      },\n      fill: shape.fill,\n      stroke: shape.stroke,\n      'stroke-width': '2',\n      style: {\n        cursor:\n          this.activeTool === 'select' && !isDraft ? 'pointer' : 'default',\n      },\n      onClick: !isDraft\n        ? (e: MouseEvent) => this.onShapeClick(e, shape)\n        : undefined,\n    };\n\n    if (shape.type === 'rect') {\n      return (\n        <rect\n          {...commonProps}\n          x={shape.x}\n          y={shape.y}\n          width={shape.width}\n          height={shape.height}\n          rx=\"2\"\n        />\n      );\n    }\n\n    if (shape.type === 'circle') {\n      return (\n        <ellipse\n          {...commonProps}\n          cx={shape.x + shape.width / 2}\n          cy={shape.y + shape.height / 2}\n          rx={shape.width / 2}\n          ry={shape.height / 2}\n        />\n      );\n    }\n\n    if (shape.type === 'line') {\n      return (\n        <line\n          {...commonProps}\n          x1={shape.x}\n          y1={shape.y}\n          x2={shape.x + shape.width}\n          y2={shape.y + shape.height}\n          fill=\"none\"\n        />\n      );\n    }\n\n    return null;\n  }\n\n  private renderSelectionOverlay(shape: Shape) {\n    const overlayProps = {\n      class: 'xplor-canvas__selection-overlay',\n      stroke: 'var(--selection-color, #2196f3)',\n      'stroke-dasharray': '5,3',\n      'stroke-width': '2',\n      fill: 'none',\n      style: { pointerEvents: 'none' as any },\n    };\n\n    if (shape.type === 'line') {\n      return (\n        <line\n          {...overlayProps}\n          x1={shape.x}\n          y1={shape.y}\n          x2={shape.x + shape.width}\n          y2={shape.y + shape.height}\n        />\n      );\n    }\n\n    if (shape.type === 'circle') {\n      return (\n        <ellipse\n          {...overlayProps}\n          cx={shape.x + shape.width / 2}\n          cy={shape.y + shape.height / 2}\n          rx={shape.width / 2}\n          ry={shape.height / 2}\n        />\n      );\n    }\n\n    // rect (default)\n    return (\n      <rect\n        {...overlayProps}\n        x={shape.x}\n        y={shape.y}\n        width={shape.width}\n        height={shape.height}\n        rx=\"2\"\n      />\n    );\n  }\n\n  private renderResizeHandles(shape: Shape) {\n    const { x, y, width, height } = shape;\n    const mx = x + width / 2;\n    const my = y + height / 2;\n\n    const handles: Array<{ name: string; cx: number; cy: number; cursor: string }> = [\n      { name: 'nw', cx: x,         cy: y,          cursor: 'nwse-resize' },\n      { name: 'n',  cx: mx,        cy: y,          cursor: 'ns-resize'   },\n      { name: 'ne', cx: x + width, cy: y,          cursor: 'nesw-resize' },\n      { name: 'e',  cx: x + width, cy: my,         cursor: 'ew-resize'   },\n      { name: 'se', cx: x + width, cy: y + height, cursor: 'nwse-resize' },\n      { name: 's',  cx: mx,        cy: y + height, cursor: 'ns-resize'   },\n      { name: 'sw', cx: x,         cy: y + height, cursor: 'nesw-resize' },\n      { name: 'w',  cx: x,         cy: my,         cursor: 'ew-resize'   },\n    ];\n\n    return handles.map(h => (\n      <circle\n        key={h.name}\n        class=\"xplor-canvas__handle\"\n        cx={h.cx}\n        cy={h.cy}\n        r=\"var(--handle-size, 5)\"\n        style={{ cursor: h.cursor }}\n        onMouseDown={(e: MouseEvent) => this.onResizeHandleMouseDown(e, h.name)}\n        aria-label={`Resize ${h.name.toUpperCase()} handle`}\n        role=\"button\"\n      />\n    ));\n  }\n\n  // -------------------------------------------------------------------------\n  // Private: Toolbar render\n  // -------------------------------------------------------------------------\n\n  private renderToolbar() {\n    const tools: Array<{\n      id: 'select' | 'rect' | 'circle' | 'line';\n      label: string;\n      icon: any;\n    }> = [\n      {\n        id: 'select',\n        label: 'Select tool',\n        icon: (\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path d=\"M4 0 L20 12 L12.5 14.5 L10 24 Z\" />\n          </svg>\n        ),\n      },\n      {\n        id: 'rect',\n        label: 'Rectangle tool',\n        icon: (\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n            <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"1\" />\n          </svg>\n        ),\n      },\n      {\n        id: 'circle',\n        label: 'Circle / Ellipse tool',\n        icon: (\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n            <ellipse cx=\"12\" cy=\"12\" rx=\"9\" ry=\"9\" />\n          </svg>\n        ),\n      },\n      {\n        id: 'line',\n        label: 'Line tool',\n        icon: (\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n            <line x1=\"3\" y1=\"21\" x2=\"21\" y2=\"3\" />\n          </svg>\n        ),\n      },\n    ];\n\n    return (\n      <div\n        class=\"xplor-canvas__toolbar\"\n        role=\"toolbar\"\n        aria-label=\"Canvas drawing tools\"\n        id={`${this.componentId}-toolbar`}\n      >\n        {/* Drawing tool buttons */}\n        <div class=\"xplor-canvas__toolbar-group\" role=\"group\" aria-label=\"Drawing tools\">\n          {tools.map(t => (\n            <button\n              type=\"button\"\n              key={t.id}\n              class={{\n                'xplor-canvas__toolbar-btn': true,\n                'xplor-canvas__toolbar-btn--active': this.activeTool === t.id,\n              }}\n              aria-label={t.label}\n              aria-pressed={String(this.activeTool === t.id)}\n              title={t.label}\n              onClick={() => this.setActiveTool(t.id)}\n            >\n              {t.icon}\n            </button>\n          ))}\n        </div>\n\n        <div class=\"xplor-canvas__toolbar-divider\" aria-hidden=\"true\" />\n\n        {/* Action buttons */}\n        <div class=\"xplor-canvas__toolbar-group\" role=\"group\" aria-label=\"Canvas actions\">\n          <button\n            type=\"button\"\n            class={{\n              'xplor-canvas__toolbar-btn': true,\n              'xplor-canvas__toolbar-btn--danger': !!this.selectedId,\n            }}\n            aria-label=\"Delete selected shape\"\n            title=\"Delete selected (Del)\"\n            disabled={!this.selectedId}\n            onClick={() => this.deleteSelected()}\n          >\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n              <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\" />\n            </svg>\n          </button>\n\n          <button\n            type=\"button\"\n            class=\"xplor-canvas__toolbar-btn\"\n            aria-label=\"Clear all shapes\"\n            title=\"Clear all\"\n            onClick={() => this.clearAll()}\n          >\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n              <path d=\"M5 13h14v-2H5v2zm-2 4h14v-2H3v2zM7 7v2h14V7H7z\" />\n              <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\" />\n            </svg>\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  // -------------------------------------------------------------------------\n  // Render\n  // -------------------------------------------------------------------------\n\n  render() {\n    const selectedShape = this.selectedId\n      ? this.shapes.find(s => s.id === this.selectedId)\n      : null;\n\n    const svgCursor =\n      this.activeTool !== 'select' ? 'crosshair' : 'default';\n\n    return (\n      <Host>\n        <div\n          class=\"xplor-canvas\"\n          role=\"application\"\n          aria-label=\"Canvas editor\"\n          aria-describedby={`${this.componentId}-desc`}\n          tabIndex={0}\n          onKeyDown={this.onKeyDown}\n        >\n          {/* Visually hidden description for screen readers */}\n          <span id={`${this.componentId}-desc`} class=\"xplor-canvas__sr-only\">\n            Interactive canvas editor. Use toolbar to select a drawing tool, then\n            click and drag on the canvas to draw shapes. Press Delete to remove a\n            selected shape.\n          </span>\n\n          {this.renderToolbar()}\n\n          <div class=\"xplor-canvas__svg-wrapper\">\n            <svg\n              ref={el => (this.svgEl = el as SVGSVGElement)}\n              class=\"xplor-canvas__svg\"\n              width={this.width}\n              height={this.height}\n              style={{ cursor: svgCursor }}\n              aria-label={`Drawing canvas, ${this.shapes.length} shape${this.shapes.length !== 1 ? 's' : ''}`}\n              role=\"img\"\n              onMouseDown={this.onSvgMouseDown}\n              onMouseMove={this.onSvgMouseMove}\n              onMouseUp={this.onSvgMouseUp}\n            >\n              {/* Transparent background rect — captures click/mousedown on empty area */}\n              <rect\n                class=\"xplor-canvas__bg\"\n                x=\"0\"\n                y=\"0\"\n                width={this.width}\n                height={this.height}\n                fill=\"transparent\"\n              />\n\n              {/* Committed shapes */}\n              {this.shapes.map(shape => this.renderShape(shape))}\n\n              {/* Selection overlay (dashed outline) */}\n              {selectedShape && this.renderSelectionOverlay(selectedShape)}\n\n              {/* Resize handles */}\n              {selectedShape &&\n                this.activeTool === 'select' &&\n                this.renderResizeHandles(selectedShape)}\n\n              {/* In-progress draft shape */}\n              {this.draftShape && this.renderShape(this.draftShape, true)}\n            </svg>\n          </div>\n\n          {/* Live region for screen reader announcements */}\n          <div\n            class=\"xplor-canvas__sr-only\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n          >\n            {this.shapes.length > 0\n              ? `Canvas contains ${this.shapes.length} shape${this.shapes.length !== 1 ? 's' : ''}.`\n              : 'Canvas is empty.'}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/xplor-chat-widget.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { d as defineCustomElement$3 } from './p-B5rS_jjI.js';
-import { d as defineCustomElement$2 } from './p-J41B2nOt.js';
+import { d as defineCustomElement$3 } from './p-DWaTb2EJ.js';
+import { d as defineCustomElement$2 } from './p-DroQBoSo.js';
 
 const xplorChatWidgetCss = "/* on mobile browsers, I set a width of 100% */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  /* html[data-theme='office'] {\n    --color-primary: rgb(219, 59, 3);\n    --color-secondary: rgb(0, 119, 107);\n    --color-buttons: #89da59;\n    --color-typography: #ff320e;\n  }\n\n  html {\n    --color-primary: #db3b03;\n    --color-primary-50: #db3b03;\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgb(0, 119, 107);\n    --color-tertiary: rgb(128, 104, 186);\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    /* Fallback */\n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    /* Fallback */\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 {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n/* on large screens, I use a different layout, so 600px are sufficient */\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce {\n    width: 600px !important;\n  }\n}\nh1 {\n  color: var(--color-primary);\n  /* Header/H1 */\n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; /* 116.667% */\n}\n\nh2 {\n  color: var(--grey-1100252525, #252525);\n  /* Header/H2 Bold */\n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; /* 118.75% */\n  letter-spacing: 0.25px;\n}\n\nh3 {\n  color: var(--grey-1100252525, #252525);\n  /* Header/H3 */\n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; /* 133.333% */\n}\n\n.overline {\n  color: var(--grey-1100252525, #252525);\n  /* Overline/Regular */\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; /* 133.333% */\n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol,\nul {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol li,\nul li {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list,\nul.mdc-list {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list li.mdc-list-item,\nul.mdc-list li.mdc-list-item {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label {\n  color: var(--Orange-900-Primary, #db3b03);\n  /* Caption 1/Regular */\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; /* 133.333% */\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 {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader {\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 {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded .mdc-text-field--outlined .mdc-notched-outline__notch {\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 .mdc-notched-outline__notch {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn {\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:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n:host {\n  display: block;\n}\n\n.container {\n  display: flex;\n  margin-top: 20px;\n}";
 
@@ -60,7 +60,7 @@ const XplorChatWidget$1 = /*@__PURE__*/ proxyCustomElement(class XplorChatWidget
         }
     }
     render() {
-        return (h(Host, { key: '19fe2c1cbe9c2f82779a3e9e6966db8e22988002' }, h("div", { key: 'b2d611ff824b3e4c9eff2c7eac45716219de2b96', id: "ai-text" }, this.textValue), h("div", { key: '96ca4702ebd751d3b6ab95a23ca1b762ef1be270', class: "container" }, h("xplor-dropdown", { key: '74a7468be12b73d97cf473cd7bb9bae99e62fa1b', options: this.languageOptions, selected: this.selectedLanguage, handleChange: this.handleChange }), h("xplor-button", { key: '4177a337e0295507422bee77f90a26ea6ed3b12b', text: "translate", mode: "pg", type: "primary", onClick: this.handleClick }))));
+        return (h(Host, { key: '5d2dcc41806f640f3dce9dea7aefe60877115b6c' }, h("div", { key: '3624422b51c11f58fa35249e91ab3a5a4ae70cd1', id: "ai-text" }, this.textValue), h("div", { key: 'ba23a8071db26f0695fbfc75a740b9e816c72eac', class: "container" }, h("xplor-dropdown", { key: 'b944f0a90ac707f98bc3ed75736823572d0f77e5', options: this.languageOptions, selected: this.selectedLanguage, handleChange: this.handleChange }), h("xplor-button", { key: 'e9d9b16969b7da1cb1160a7f6c9c77b932da8834', text: "translate", mode: "pg", type: "primary", onClick: this.handleClick }))));
     }
     get host() { return this; }
     static get style() { return xplorChatWidgetCss; }

package/dist/components/xplor-checkbox.js

@@ -81,7 +81,7 @@ const XplorCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class XplorCheckbox ext
         this.indeterminate = this.initialIndeterminate;
     }
     render() {
-        return (h("div", { key: '02d3efb24ac53caa742721720ec6d212eb159a55', class: "checkbox-wrapper" }, h("div", { key: '1d1024d0dfb9328d607919dad86bfa25def7bf35', class: this.getCheckboxClass(), onClick: this.handleClick, onMouseEnter: () => this.isHovered = true, onMouseLeave: () => this.isHovered = false, onMouseDown: () => this.isPressed = true, onMouseUp: () => this.isPressed = false, onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, tabIndex: this.disabled ? -1 : 0, role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : this.checked.toString(), "aria-disabled": this.disabled.toString(), "aria-labelledby": this.label ? this.labelId : undefined }, this.checked && (h("svg", { key: 'e5bd243560546d47bfc77d753df3020fb1abb417', class: "check-icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '19da038d854b218177b668da5b8e8c3489dd377d', d: "M13.3334 4L6.00002 11.3333L2.66669 8", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.indeterminate && (h("svg", { key: '069ce072241705fabb0a740271d7b6e6192e35a8', class: "indeterminate-icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'afc9851ff1e2ecb32cb7f0037c72844e8ae1a625', d: "M3.33331 8H12.6666", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), this.label && h("span", { key: '4fbc5b3bbf78fd53aa0ee5a65e1a3b1b76cbb114', class: "label", id: this.labelId }, this.label)));
+        return (h("div", { key: '1fe78163ff3fc8d337731e9765628f2dd48bbbb5', class: "checkbox-wrapper" }, h("div", { key: '0ed33fa8c645b4ddce726b991f40da8712758a71', class: this.getCheckboxClass(), onClick: this.handleClick, onMouseEnter: () => this.isHovered = true, onMouseLeave: () => this.isHovered = false, onMouseDown: () => this.isPressed = true, onMouseUp: () => this.isPressed = false, onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, tabIndex: this.disabled ? -1 : 0, role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : this.checked.toString(), "aria-disabled": this.disabled.toString(), "aria-labelledby": this.label ? this.labelId : undefined }, this.checked && (h("svg", { key: '75bd98168be72bf08998da1058aefe6fe9c46947', class: "check-icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'ddfb568863af95b55ca70df1ba3dd8be5a3d30cb', d: "M13.3334 4L6.00002 11.3333L2.66669 8", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.indeterminate && (h("svg", { key: '1eadbf511badc60a60a5419c010c0c9b09014e22', class: "indeterminate-icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'b654b703226b817484375a9b7d008feb44c8f592', d: "M3.33331 8H12.6666", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), this.label && h("span", { key: '1e53eb3e690f18f983d1cdded64fe9e8b557e5c8', class: "label", id: this.labelId }, this.label)));
     }
     static get watchers() { return {
         "initialChecked": ["watchCheckedProp"],