blue-chestnut-solar-expert 0.0.22 → 0.0.23

package/dist/components/p-m5YlFZMR.js

@@ -0,0 +1,148 @@
+import { p as proxyCustomElement, H, h } from './index.js';
+import { g as getLanguageStrings, s as state } from './p-DlAht76f.js';
+
+function calculatePolygonArea(points) {
+    let area = 0;
+    for (let i = 0; i < points.length; i++) {
+        const j = (i + 1) % points.length;
+        area += points[i].x * points[j].y;
+        area -= points[j].x * points[i].y;
+    }
+    return Math.abs(area / 2);
+}
+function azimuthToCardinal(azimuth) {
+    // Convert angle to cardinal direction
+    if (azimuth >= 337.5 || azimuth < 22.5)
+        return "North";
+    if (azimuth >= 22.5 && azimuth < 67.5)
+        return "Northeast";
+    if (azimuth >= 67.5 && azimuth < 112.5)
+        return "East";
+    if (azimuth >= 112.5 && azimuth < 157.5)
+        return "Southeast";
+    if (azimuth >= 157.5 && azimuth < 202.5)
+        return "South";
+    if (azimuth >= 202.5 && azimuth < 247.5)
+        return "Southwest";
+    if (azimuth >= 247.5 && azimuth < 292.5)
+        return "West";
+    return "Northwest";
+}
+function latLngToPixel(bounds, canvas, latLng) {
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        throw new Error('Canvas context not found');
+    }
+    const latToPixel = (lat) => {
+        return canvas.height * (1 - (lat - bounds.south) / (bounds.north - bounds.south));
+    };
+    const lngToPixel = (lng) => {
+        return canvas.width * (lng - bounds.west) / (bounds.east - bounds.west);
+    };
+    return {
+        x: lngToPixel(latLng.longitude),
+        y: latToPixel(latLng.latitude),
+    };
+}
+function getPixelInMeters(rgbTiff) {
+    const latDiff = rgbTiff.bounds.north - rgbTiff.bounds.south;
+    // const lngDiff = rgbTiff.bounds.east - rgbTiff.bounds.west;
+    // const pixelWidth = rgbTiff.width;
+    const pixelHeight = rgbTiff.height;
+    const pixelInMeters = latDiff * 111320 / pixelHeight;
+    // const latAvg = (rgbTiff.bounds.north + rgbTiff.bounds.south) / 2;
+    // const pixelInMetersLng = lngDiff * 111320 * Math.cos(latAvg * Math.PI / 180) / pixelWidth;
+    return pixelInMeters;
+}
+
+const outputCss = "/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-800: oklch(27.8% 0.033 256.848);\n    --color-black: #000;\n    --spacing: 0.25rem;\n    --container-md: 28rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-lg: 0.5rem;\n    --radius-4xl: 2rem;\n    --animate-spin: spin 1s linear infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n    --color-primary: hsl(41 51% 90%);\n    --color-primary-foreground: hsl(0 0% 0%);\n    --color-secondary: hsl(28 100% 8%);\n    --color-secondary-foreground: hsl(0 0% 100%);\n    --color-tertiary: hsl(28 100% 29%);\n    --color-tertiary-foreground: hsl(0 0% 100%);\n    --color-muted: hsl(0 0% 100%);\n    --color-muted-foreground: hsl(0 0% 0%);\n    --color-error: hsl(0 100% 50%);\n    --color-error-foreground: hsl(0 0% 100%);\n    --color-surface: hsl(0 0% 88%);\n    --color-surface-hover: hsl(0 0% 82%);\n    --color-surface-active: hsl(0 0% 64%);\n    --color-text-muted: hsl(0 0% 45%);\n    --color-text-secondary: hsl(0 0% 55%);\n    --color-text-placeholder: hsl(0 0% 73%);\n    --color-border: hsl(0 0% 82%);\n    --color-border-light: hsl(0 0% 93%);\n    --color-success: hsl(142 76% 36%);\n    --color-info: hsl(221 83% 53%);\n    --color-hover: hsl(0 0% 88%);\n    --color-hover-dark: hsl(28 100% 8%);\n    --color-overlay: rgba(0, 0, 0, 0.24);\n    --color-tooltip: hsl(0 0% 13%);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-3 {\n    left: calc(var(--spacing) * 3);\n  }\n  .z-20 {\n    z-index: 20;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .m-auto {\n    margin: auto;\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mt-6 {\n    margin-top: calc(var(--spacing) * 6);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-48 {\n    height: calc(var(--spacing) * 48);\n  }\n  .h-\\[400px\\] {\n    height: 400px;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-64 {\n    width: calc(var(--spacing) * 64);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-3 {\n    flex: 3;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-help {\n    cursor: help;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .grid-rows-2 {\n    grid-template-rows: repeat(2, minmax(0, 1fr));\n  }\n  .grid-rows-3 {\n    grid-template-rows: repeat(3, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-4xl {\n    border-radius: var(--radius-4xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-t-2 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 2px;\n  }\n  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-border {\n    border-color: var(--color-border);\n  }\n  .border-error {\n    border-color: var(--color-error);\n  }\n  .border-gray-300 {\n    border-color: var(--color-gray-300);\n  }\n  .border-secondary {\n    border-color: var(--color-secondary);\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-gray-800 {\n    background-color: var(--color-gray-800);\n  }\n  .bg-muted {\n    background-color: var(--color-muted);\n  }\n  .bg-overlay {\n    background-color: var(--color-overlay);\n  }\n  .bg-primary {\n    background-color: var(--color-primary);\n  }\n  .bg-secondary {\n    background-color: var(--color-secondary);\n  }\n  .bg-surface {\n    background-color: var(--color-surface);\n  }\n  .bg-surface-active {\n    background-color: var(--color-surface-active);\n  }\n  .bg-text-secondary {\n    background-color: var(--color-text-secondary);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .pt-2 {\n    padding-top: calc(var(--spacing) * 2);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pt-7 {\n    padding-top: calc(var(--spacing) * 7);\n  }\n  .pr-4 {\n    padding-right: calc(var(--spacing) * 4);\n  }\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .pl-4 {\n    padding-left: calc(var(--spacing) * 4);\n  }\n  .pl-10 {\n    padding-left: calc(var(--spacing) * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-error {\n    color: var(--color-error);\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-muted {\n    color: var(--color-muted);\n  }\n  .text-muted-foreground {\n    color: var(--color-muted-foreground);\n  }\n  .text-primary-foreground {\n    color: var(--color-primary-foreground);\n  }\n  .text-secondary {\n    color: var(--color-secondary);\n  }\n  .text-secondary-foreground {\n    color: var(--color-secondary-foreground);\n  }\n  .text-success {\n    color: var(--color-success);\n  }\n  .text-text-muted {\n    color: var(--color-text-muted);\n  }\n  .text-text-placeholder {\n    color: var(--color-text-placeholder);\n  }\n  .text-text-secondary {\n    color: var(--color-text-secondary);\n  }\n  .accent-tertiary {\n    accent-color: var(--color-tertiary);\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .group-hover\\:opacity-100 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .hover\\:bg-hover {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-hover);\n      }\n    }\n  }\n  .hover\\:bg-hover-dark {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-hover-dark);\n      }\n    }\n  }\n  .hover\\:bg-muted {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-muted);\n      }\n    }\n  }\n  .hover\\:bg-overlay {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-overlay);\n      }\n    }\n  }\n  .hover\\:bg-secondary {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-secondary);\n      }\n    }\n  }\n  .hover\\:bg-secondary\\/80 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, hsl(28 100% 8%) 80%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-surface-hover {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-surface-hover);\n      }\n    }\n  }\n  .hover\\:bg-tertiary {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-tertiary);\n      }\n    }\n  }\n  .hover\\:bg-text-secondary {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-text-secondary);\n      }\n    }\n  }\n  .hover\\:text-muted {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-muted);\n      }\n    }\n  }\n  .focus\\:border-transparent {\n    &:focus {\n      border-color: transparent;\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-info {\n    &:focus {\n      --tw-ring-color: var(--color-info);\n    }\n  }\n  .focus\\:ring-secondary {\n    &:focus {\n      --tw-ring-color: var(--color-secondary);\n    }\n  }\n  .focus\\:ring-tertiary {\n    &:focus {\n      --tw-ring-color: var(--color-tertiary);\n    }\n  }\n  .focus\\:ring-offset-0 {\n    &:focus {\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .lg\\:gap-4 {\n    @media (width >= 64rem) {\n      gap: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:rounded-full {\n    &::-webkit-slider-runnable-track {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:bg-black\\/25 {\n    &::-webkit-slider-runnable-track {\n      background-color: color-mix(in srgb, #000 25%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-black) 25%, transparent);\n      }\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      height: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      width: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none {\n    &::-webkit-slider-thumb {\n      appearance: none;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full {\n    &::-webkit-slider-thumb {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-muted {\n    &::-webkit-slider-thumb {\n      background-color: var(--color-muted);\n    }\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-duration: initial;\n    }\n  }\n}\n";
+
+const PolygonInformation = /*@__PURE__*/ proxyCustomElement(class PolygonInformation extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    currentPolygon;
+    positionedPanels;
+    handleAzimuthChange;
+    handlePitchChange;
+    calculateSolarPanels;
+    render() {
+        const t = getLanguageStrings(state.settings.language);
+        return (h("div", { key: 'e7d612eebc40e57e1fb4f2828f052e71dd41cecd', class: "flex gap-4 flex-row justify-center items-center w-full" }, h("div", { key: '257fd1d17428e53c4ea334b7d7a51c5d4dbaed17', class: "w-full bg-primary rounded-4xl p-4 text-secondary" }, h("h3", { key: 'b7fdad47b78b1634f1abe941fa2e74b339a4c2f7', class: "text-lg font-semibold mb-4 text-center" }, t.mapDraw.information), this.currentPolygon?.details
+            ? (h("div", { class: "space-y-4" }, h("div", null, h("div", { class: "grid grid-cols-2 gap-2" }, h("div", null, h("h4", { class: "text-sm font-medium text-text-muted" }, t.mapDraw.area), h("p", { class: "text-lg" }, this.currentPolygon.details
+                ?.area
+                .toFixed(2), " m\u00B2")), h("div", null, h("div", null, h("h4", { class: "text-sm font-medium text-text-muted" }, t.mapDraw.panels), h("p", { class: "text-lg" }, this.positionedPanels
+                ?.length ?? 0))))), h("div", null, h("h4", { class: "text-sm font-medium text-text-muted" }, t.mapDraw.azimuth), h("div", { class: "flex gap-2 flex-row justify-start bg-muted rounded-4xl p-2" }, h("input", { class: "text-lg w-full", onKeyDown: (e) => {
+                    if (e.key === "Enter") {
+                        this.handleAzimuthChange(e);
+                        e.target
+                            .blur();
+                    }
+                }, value: this.currentPolygon
+                    .details
+                    ?.azimuth }), "(", azimuthToCardinal(this.currentPolygon.details
+                ?.azimuth), ")"), !state.isIOS && (h("input", { type: "range", min: "0", max: "360", class: "input-slider w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-muted", value: this.currentPolygon
+                    .details?.azimuth, onInput: (e) => {
+                    const target = e
+                        .target;
+                    const azimuth = parseFloat(target.value);
+                    this.currentPolygon.details
+                        .azimuth = azimuth;
+                    if (this.currentPolygon
+                        .type ===
+                        "roof" &&
+                        this.positionedPanels) {
+                        this.calculateSolarPanels();
+                    }
+                } }))), h("div", null, h("h4", { class: "text-sm font-medium text-text-muted pl-2" }, t.mapDraw.pitch), h("div", { class: "flex gap-2 flex-row justify-start bg-muted rounded-4xl p-2" }, h("input", { class: "text-lg w-full", onKeyDown: (e) => {
+                    if (e.key === "Enter") {
+                        this.handlePitchChange(e);
+                        e.target
+                            .blur();
+                    }
+                }, value: this.currentPolygon
+                    .details
+                    ?.pitch }), "\u00B0"), !state.isIOS && (h("input", { type: "range", min: "0", max: "90", class: "input-slider w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-muted", value: this.currentPolygon
+                    .details?.pitch, onInput: (e) => {
+                    const target = e
+                        .target;
+                    const pitch = parseFloat(target.value);
+                    this.currentPolygon.details
+                        .pitch = pitch;
+                    if (this.currentPolygon
+                        .type ===
+                        "roof" &&
+                        this.positionedPanels) {
+                        this.calculateSolarPanels();
+                    }
+                } })))))
+            : (h("p", { class: "text-text-secondary text-center" }, t.mapDraw.noPolygonSelected)))));
+    }
+    static get style() { return outputCss; }
+}, [0, "polygon-information", {
+        "currentPolygon": [8, "current-polygon"],
+        "positionedPanels": [16, "positioned-panels"],
+        "handleAzimuthChange": [16, "handle-azimuth-change"],
+        "handlePitchChange": [16, "handle-pitch-change"],
+        "calculateSolarPanels": [16, "calculate-solar-panels"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["polygon-information"];
+    components.forEach(tagName => { switch (tagName) {
+        case "polygon-information":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PolygonInformation);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { PolygonInformation as P, calculatePolygonArea as c, defineCustomElement as d, getPixelInMeters as g, latLngToPixel as l };
+//# sourceMappingURL=p-m5YlFZMR.js.map
+
+//# sourceMappingURL=p-m5YlFZMR.js.map

package/dist/components/p-m5YlFZMR.js.map

@@ -0,0 +1 @@
+{"file":"p-m5YlFZMR.js","mappings":";;;AAGM,SAAU,oBAAoB,CAAC,MAAe,EAAA;IAClD,IAAI,IAAI,GAAG,CAAC;AACZ,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACpC,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,MAAM,CAAC,MAAM;AACjC,QAAA,IAAI,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACjC,QAAA,IAAI,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;;IAErC,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC;AAC3B;AAEM,SAAU,iBAAiB,CAAC,OAAe,EAAA;;AAE/C,IAAA,IAAI,OAAO,IAAI,KAAK,IAAI,OAAO,GAAG,IAAI;AAAE,QAAA,OAAO,OAAO;AACtD,IAAA,IAAI,OAAO,IAAI,IAAI,IAAI,OAAO,GAAG,IAAI;AAAE,QAAA,OAAO,WAAW;AACzD,IAAA,IAAI,OAAO,IAAI,IAAI,IAAI,OAAO,GAAG,KAAK;AAAE,QAAA,OAAO,MAAM;AACrD,IAAA,IAAI,OAAO,IAAI,KAAK,IAAI,OAAO,GAAG,KAAK;AAAE,QAAA,OAAO,WAAW;AAC3D,IAAA,IAAI,OAAO,IAAI,KAAK,IAAI,OAAO,GAAG,KAAK;AAAE,QAAA,OAAO,OAAO;AACvD,IAAA,IAAI,OAAO,IAAI,KAAK,IAAI,OAAO,GAAG,KAAK;AAAE,QAAA,OAAO,WAAW;AAC3D,IAAA,IAAI,OAAO,IAAI,KAAK,IAAI,OAAO,GAAG,KAAK;AAAE,QAAA,OAAO,MAAM;AACtD,IAAA,OAAO,WAAW;AACpB;SAkDgB,aAAa,CAAC,MAAc,EAAE,MAAyB,EAAE,MAAc,EAAA;IACrF,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC;IACnC,IAAI,CAAC,GAAG,EAAE;AACR,QAAA,MAAM,IAAI,KAAK,CAAC,0BAA0B,CAAC;;AAE7C,IAAA,MAAM,UAAU,GAAG,CAAC,GAAW,KAAI;QACjC,OAAO,MAAM,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,MAAM,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;AACnF,KAAC;AAED,IAAA,MAAM,UAAU,GAAG,CAAC,GAAW,KAAI;QACjC,OAAO,MAAM,CAAC,KAAK,IAAI,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;AACzE,KAAC;IAED,OAAO;AACL,QAAA,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC;AAC/B,QAAA,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,QAAQ,CAAC;KAC/B;AACH;AAEM,SAAU,gBAAgB,CAAC,OAAgB,EAAA;AAC/C,IAAA,MAAM,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,KAAK;;;AAG3D,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM;AAClC,IAAA,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,WAAW;;;AAGpD,IAAA,OAAO,aAAa;AACtB;;ACrGA,MAAM,SAAS,GAAG,s3tBAAs3tB;;MCW33tB,kBAAkB,iBAAAA,kBAAA,CAAA,MAAA,kBAAA,SAAAC,CAAA,CAAA;;;;;AAE3B,IAAA,cAAc;AAEd,IAAA,gBAAgB;AAEhB,IAAA,mBAAmB;AAEnB,IAAA,iBAAiB;AAEjB,IAAA,oBAAoB;IAEpB,MAAM,GAAA;QACF,MAAM,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC;QAErD,QACI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,wDAAwD,EAAA,EAC/D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kDAAkD,EAAA,EACzD,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wCAAwC,EAAA,EAC7C,CAAC,CAAC,OAAO,CAAC,WAAW,CACrB,EACJ,IAAI,CAAC,cAAc,EAAE;AAClB,eACI,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EAClB,CAAA,CAAA,KAAA,EAAA,IAAA,EACI,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EAC/B,CAAA,CAAA,KAAA,EAAA,IAAA,EACI,CAAI,CAAA,IAAA,EAAA,EAAA,KAAK,EAAC,qCAAqC,EAAA,EAC1C,CAAC,CAAC,OAAO,CAAC,IAAI,CACd,EACL,CAAG,CAAA,GAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EACb,IAAI,CAAC,cAAc,CAAC;AACjB,kBAAE;iBACD,OAAO,CAAC,CAAC,CAAC,aACf,CACF,EACN,CAAA,CAAA,KAAA,EAAA,IAAA,EACI,CAAA,CAAA,KAAA,EAAA,IAAA,EACI,CAAI,CAAA,IAAA,EAAA,EAAA,KAAK,EAAC,qCAAqC,EAAA,EAC1C,CAAC,CAAC,OAAO,CAAC,MAAM,CAChB,EACL,CAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,SAAS,EACb,EAAA,IAAI,CAAC;kBACA,MAAM,IAAI,CAAC,CACjB,CACF,CACJ,CACJ,CACJ,EACN,CAAA,CAAA,KAAA,EAAA,IAAA,EACI,CAAI,CAAA,IAAA,EAAA,EAAA,KAAK,EAAC,qCAAqC,EAAA,EAC1C,CAAC,CAAC,OAAO,CAAC,OAAO,CACjB,EACL,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,4DAA4D,EAAA,EACnE,CACI,CAAA,OAAA,EAAA,EAAA,KAAK,EAAC,gBAAgB,EACtB,SAAS,EAAE,CAAC,CAAC,KAAI;AACb,oBAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;AACnB,wBAAA,IAAI,CAAC,mBAAmB,CACpB,CAAC,CACJ;AACA,wBAAA,CAAC,CAAC;AACE,6BAAA,IAAI,EAAE;;AAEnB,iBAAC,EACD,KAAK,EAAE,IAAI,CAAC;qBACP;AACD,sBAAE,OAAO,EACf,CAAA,OACA,iBAAiB,CACf,IAAI,CAAC,cAAc,CAAC;AAChB,kBAAE,OAAO,CAChB,EACC,GAAA,CAAA,EACL,CAAC,KAAK,CAAC,KAAK,KACT,CACI,CAAA,OAAA,EAAA,EAAA,IAAI,EAAC,OAAO,EACZ,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,KAAK,EACT,KAAK,EAAC,uWAAuW,EAC7W,KAAK,EAAE,IAAI,CAAC;qBACP,OAAO,EAAE,OAAO,EACrB,OAAO,EAAE,CAAC,CAAC,KAAI;oBACX,MAAM,MAAM,GAAG;AACV,yBAAA,MAA0B;oBAC/B,MAAM,OAAO,GAAG,UAAU,CACtB,MAAM,CAAC,KAAK,CACf;oBACD,IAAI,CAAC,cAAc,CAAC;yBACf,OAAO,GAAG,OAAO;oBACtB,IACI,IAAI,CAAC;yBACI,IAAI;wBACT,MAAM;wBACV,IAAI,CAAC,gBAAgB,EACvB;wBACE,IAAI,CAAC,oBAAoB,EAAE;;iBAElC,EAAA,CACH,CACL,CACC,EACN,CAAA,CAAA,KAAA,EAAA,IAAA,EACI,CAAI,CAAA,IAAA,EAAA,EAAA,KAAK,EAAC,0CAA0C,EAAA,EAC/C,CAAC,CAAC,OAAO,CAAC,KAAK,CACf,EACL,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,4DAA4D,EAAA,EACnE,CACI,CAAA,OAAA,EAAA,EAAA,KAAK,EAAC,gBAAgB,EACtB,SAAS,EAAE,CAAC,CAAC,KAAI;AACb,oBAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;AACnB,wBAAA,IAAI,CAAC,iBAAiB,CAClB,CAAC,CACJ;AACA,wBAAA,CAAC,CAAC;AACE,6BAAA,IAAI,EAAE;;AAEnB,iBAAC,EACD,KAAK,EAAE,IAAI,CAAC;qBACP;AACD,sBAAE,KAAK,EACb,CAAA,EAEA,QAAA,CAAA,EACL,CAAC,KAAK,CAAC,KAAK,KACT,CACI,CAAA,OAAA,EAAA,EAAA,IAAI,EAAC,OAAO,EACZ,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,IAAI,EACR,KAAK,EAAC,uWAAuW,EAC7W,KAAK,EAAE,IAAI,CAAC;qBACP,OAAO,EAAE,KAAK,EACnB,OAAO,EAAE,CAAC,CAAC,KAAI;oBACX,MAAM,MAAM,GAAG;AACV,yBAAA,MAA0B;oBAC/B,MAAM,KAAK,GAAG,UAAU,CACpB,MAAM,CAAC,KAAK,CACf;oBACD,IAAI,CAAC,cAAc,CAAC;yBACf,KAAK,GAAG,KAAK;oBAClB,IACI,IAAI,CAAC;yBACI,IAAI;wBACT,MAAM;wBACV,IAAI,CAAC,gBAAgB,EACvB;wBACE,IAAI,CAAC,oBAAoB,EAAE;;AAEnC,iBAAC,EACH,CAAA,CACL,CACC,CACJ;eAGN,CAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,iCAAiC,EACrC,EAAA,CAAC,CAAC,OAAO,CAAC,iBAAiB,CAC5B,CACP,CACH,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/utils/utils.ts","src/output.css?tag=polygon-information","src/components/map-draw/polygon-information.tsx"],"sourcesContent":["import { Point } from \"../types/shapes\";\r\nimport { Bounds, GeoTiff, LatLng } from \"./solar\";\r\n\r\nexport function calculatePolygonArea(points: Point[]): number {\r\n  let area = 0;\r\n  for (let i = 0; i < points.length; i++) {\r\n      const j = (i + 1) % points.length;\r\n      area += points[i].x * points[j].y;\r\n      area -= points[j].x * points[i].y;\r\n  }\r\n  return Math.abs(area / 2);\r\n};\r\n\r\nexport function azimuthToCardinal(azimuth: number): string {\r\n  // Convert angle to cardinal direction\r\n  if (azimuth >= 337.5 || azimuth < 22.5) return \"North\";\r\n  if (azimuth >= 22.5 && azimuth < 67.5) return \"Northeast\";\r\n  if (azimuth >= 67.5 && azimuth < 112.5) return \"East\";\r\n  if (azimuth >= 112.5 && azimuth < 157.5) return \"Southeast\";\r\n  if (azimuth >= 157.5 && azimuth < 202.5) return \"South\";\r\n  if (azimuth >= 202.5 && azimuth < 247.5) return \"Southwest\";\r\n  if (azimuth >= 247.5 && azimuth < 292.5) return \"West\";\r\n  return \"Northwest\";\r\n}\r\n\r\nexport function calculatePolygonOrientation(points: Point[]): number {\r\n  if (points.length < 3) return 0;\r\n\r\n  // Calculate the average direction of the polygon\r\n  let totalAngle = 0;\r\n  for (let i = 0; i < points.length; i++) {\r\n      const j = (i + 1) % points.length;\r\n      const angle = Math.atan2(\r\n          points[j].y - points[i].y,\r\n          points[j].x - points[i].x,\r\n      );\r\n      totalAngle += angle;\r\n  }\r\n\r\n  const avgAngle = (totalAngle / points.length) * (180 / Math.PI);\r\n  const normalizedAngle = (avgAngle + 360) % 360;\r\n  return normalizedAngle;\r\n};\r\n\r\nexport function calculatePolygonAngle(points: Point[]): number {\r\n  if (points.length < 3) return 0;\r\n\r\n  // Calculate the average angle of the polygon\r\n  let totalAngle = 0;\r\n  for (let i = 0; i < points.length; i++) {\r\n      const j = (i + 1) % points.length;\r\n      const k = (i + 2) % points.length;\r\n\r\n      const v1 = {\r\n          x: points[j].x - points[i].x,\r\n          y: points[j].y - points[i].y,\r\n      };\r\n      const v2 = {\r\n          x: points[k].x - points[j].x,\r\n          y: points[k].y - points[j].y,\r\n      };\r\n\r\n      const dot = v1.x * v2.x + v1.y * v2.y;\r\n      const mag1 = Math.sqrt(v1.x * v1.x + v1.y * v1.y);\r\n      const mag2 = Math.sqrt(v2.x * v2.x + v2.y * v2.y);\r\n\r\n      const angle = Math.acos(dot / (mag1 * mag2));\r\n      totalAngle += angle;\r\n  }\r\n\r\n  return (totalAngle / points.length) * (180 / Math.PI);\r\n};\r\n\r\nexport function latLngToPixel(bounds: Bounds, canvas: HTMLCanvasElement, latLng: LatLng): Point {\r\n  const ctx = canvas.getContext('2d');\r\n  if (!ctx) {\r\n    throw new Error('Canvas context not found');\r\n  }\r\n  const latToPixel = (lat: number) => {\r\n    return canvas.height * (1 - (lat - bounds.south) / (bounds.north - bounds.south));\r\n  };\r\n      \r\n  const lngToPixel = (lng: number) => {\r\n    return canvas.width * (lng - bounds.west) / (bounds.east - bounds.west);\r\n  };\r\n\r\n  return {\r\n    x: lngToPixel(latLng.longitude),\r\n    y: latToPixel(latLng.latitude),\r\n  };\r\n}\r\n\r\nexport function getPixelInMeters(rgbTiff: GeoTiff): number {\r\n  const latDiff = rgbTiff.bounds.north - rgbTiff.bounds.south;\r\n  // const lngDiff = rgbTiff.bounds.east - rgbTiff.bounds.west;\r\n  // const pixelWidth = rgbTiff.width;\r\n  const pixelHeight = rgbTiff.height;\r\n  const pixelInMeters = latDiff * 111320 / pixelHeight;\r\n  // const latAvg = (rgbTiff.bounds.north + rgbTiff.bounds.south) / 2;\r\n  // const pixelInMetersLng = lngDiff * 111320 * Math.cos(latAvg * Math.PI / 180) / pixelWidth;\r\n  return pixelInMeters\r\n}","/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-800: oklch(27.8% 0.033 256.848);\n    --color-black: #000;\n    --spacing: 0.25rem;\n    --container-md: 28rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-lg: 0.5rem;\n    --radius-4xl: 2rem;\n    --animate-spin: spin 1s linear infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n    --color-primary: hsl(41 51% 90%);\n    --color-primary-foreground: hsl(0 0% 0%);\n    --color-secondary: hsl(28 100% 8%);\n    --color-secondary-foreground: hsl(0 0% 100%);\n    --color-tertiary: hsl(28 100% 29%);\n    --color-tertiary-foreground: hsl(0 0% 100%);\n    --color-muted: hsl(0 0% 100%);\n    --color-muted-foreground: hsl(0 0% 0%);\n    --color-error: hsl(0 100% 50%);\n    --color-error-foreground: hsl(0 0% 100%);\n    --color-surface: hsl(0 0% 88%);\n    --color-surface-hover: hsl(0 0% 82%);\n    --color-surface-active: hsl(0 0% 64%);\n    --color-text-muted: hsl(0 0% 45%);\n    --color-text-secondary: hsl(0 0% 55%);\n    --color-text-placeholder: hsl(0 0% 73%);\n    --color-border: hsl(0 0% 82%);\n    --color-border-light: hsl(0 0% 93%);\n    --color-success: hsl(142 76% 36%);\n    --color-info: hsl(221 83% 53%);\n    --color-hover: hsl(0 0% 88%);\n    --color-hover-dark: hsl(28 100% 8%);\n    --color-overlay: rgba(0, 0, 0, 0.24);\n    --color-tooltip: hsl(0 0% 13%);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-3 {\n    left: calc(var(--spacing) * 3);\n  }\n  .z-20 {\n    z-index: 20;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .m-auto {\n    margin: auto;\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mt-6 {\n    margin-top: calc(var(--spacing) * 6);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-48 {\n    height: calc(var(--spacing) * 48);\n  }\n  .h-\\[400px\\] {\n    height: 400px;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-64 {\n    width: calc(var(--spacing) * 64);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-3 {\n    flex: 3;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-help {\n    cursor: help;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .grid-rows-2 {\n    grid-template-rows: repeat(2, minmax(0, 1fr));\n  }\n  .grid-rows-3 {\n    grid-template-rows: repeat(3, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-4xl {\n    border-radius: var(--radius-4xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-t-2 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 2px;\n  }\n  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-border {\n    border-color: var(--color-border);\n  }\n  .border-error {\n    border-color: var(--color-error);\n  }\n  .border-gray-300 {\n    border-color: var(--color-gray-300);\n  }\n  .border-secondary {\n    border-color: var(--color-secondary);\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-gray-800 {\n    background-color: var(--color-gray-800);\n  }\n  .bg-muted {\n    background-color: var(--color-muted);\n  }\n  .bg-overlay {\n    background-color: var(--color-overlay);\n  }\n  .bg-primary {\n    background-color: var(--color-primary);\n  }\n  .bg-secondary {\n    background-color: var(--color-secondary);\n  }\n  .bg-surface {\n    background-color: var(--color-surface);\n  }\n  .bg-surface-active {\n    background-color: var(--color-surface-active);\n  }\n  .bg-text-secondary {\n    background-color: var(--color-text-secondary);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .pt-2 {\n    padding-top: calc(var(--spacing) * 2);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pt-7 {\n    padding-top: calc(var(--spacing) * 7);\n  }\n  .pr-4 {\n    padding-right: calc(var(--spacing) * 4);\n  }\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .pl-4 {\n    padding-left: calc(var(--spacing) * 4);\n  }\n  .pl-10 {\n    padding-left: calc(var(--spacing) * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-error {\n    color: var(--color-error);\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-muted {\n    color: var(--color-muted);\n  }\n  .text-muted-foreground {\n    color: var(--color-muted-foreground);\n  }\n  .text-primary-foreground {\n    color: var(--color-primary-foreground);\n  }\n  .text-secondary {\n    color: var(--color-secondary);\n  }\n  .text-secondary-foreground {\n    color: var(--color-secondary-foreground);\n  }\n  .text-success {\n    color: var(--color-success);\n  }\n  .text-text-muted {\n    color: var(--color-text-muted);\n  }\n  .text-text-placeholder {\n    color: var(--color-text-placeholder);\n  }\n  .text-text-secondary {\n    color: var(--color-text-secondary);\n  }\n  .accent-tertiary {\n    accent-color: var(--color-tertiary);\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .group-hover\\:opacity-100 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .hover\\:bg-hover {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-hover);\n      }\n    }\n  }\n  .hover\\:bg-hover-dark {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-hover-dark);\n      }\n    }\n  }\n  .hover\\:bg-muted {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-muted);\n      }\n    }\n  }\n  .hover\\:bg-overlay {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-overlay);\n      }\n    }\n  }\n  .hover\\:bg-secondary {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-secondary);\n      }\n    }\n  }\n  .hover\\:bg-secondary\\/80 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, hsl(28 100% 8%) 80%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-surface-hover {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-surface-hover);\n      }\n    }\n  }\n  .hover\\:bg-tertiary {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-tertiary);\n      }\n    }\n  }\n  .hover\\:bg-text-secondary {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-text-secondary);\n      }\n    }\n  }\n  .hover\\:text-muted {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-muted);\n      }\n    }\n  }\n  .focus\\:border-transparent {\n    &:focus {\n      border-color: transparent;\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-info {\n    &:focus {\n      --tw-ring-color: var(--color-info);\n    }\n  }\n  .focus\\:ring-secondary {\n    &:focus {\n      --tw-ring-color: var(--color-secondary);\n    }\n  }\n  .focus\\:ring-tertiary {\n    &:focus {\n      --tw-ring-color: var(--color-tertiary);\n    }\n  }\n  .focus\\:ring-offset-0 {\n    &:focus {\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .lg\\:gap-4 {\n    @media (width >= 64rem) {\n      gap: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:rounded-full {\n    &::-webkit-slider-runnable-track {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:bg-black\\/25 {\n    &::-webkit-slider-runnable-track {\n      background-color: color-mix(in srgb, #000 25%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-black) 25%, transparent);\n      }\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      height: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      width: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none {\n    &::-webkit-slider-thumb {\n      appearance: none;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full {\n    &::-webkit-slider-thumb {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-muted {\n    &::-webkit-slider-thumb {\n      background-color: var(--color-muted);\n    }\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-duration: initial;\n    }\n  }\n}\n","import { Component, h, Prop } from \"@stencil/core\";\r\nimport { Polygon, SolarPanelSystemPart } from \"../../components\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { state } from \"../../store\";\r\nimport { azimuthToCardinal } from \"../../utils/utils\";\r\n\r\n@Component({\r\n    tag: \"polygon-information\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class PolygonInformation {\r\n    @Prop()\r\n    currentPolygon: Polygon;\r\n    @Prop()\r\n    positionedPanels: SolarPanelSystemPart[] | undefined;\r\n    @Prop()\r\n    handleAzimuthChange: (event: Event) => void;\r\n    @Prop()\r\n    handlePitchChange: (event: Event) => void;\r\n    @Prop()\r\n    calculateSolarPanels: () => void;\r\n\r\n    render() {\r\n        const t = getLanguageStrings(state.settings.language);\r\n\r\n        return (\r\n            <div class=\"flex gap-4 flex-row justify-center items-center w-full\">\r\n                <div class=\"w-full bg-primary rounded-4xl p-4 text-secondary\">\r\n                    <h3 class=\"text-lg font-semibold mb-4 text-center\">\r\n                        {t.mapDraw.information}\r\n                    </h3>\r\n                    {this.currentPolygon?.details\r\n                        ? (\r\n                            <div class=\"space-y-4\">\r\n                                <div>\r\n                                    <div class=\"grid grid-cols-2 gap-2\">\r\n                                        <div>\r\n                                            <h4 class=\"text-sm font-medium text-text-muted\">\r\n                                                {t.mapDraw.area}\r\n                                            </h4>\r\n                                            <p class=\"text-lg\">\r\n                                                {this.currentPolygon.details\r\n                                                    ?.area\r\n                                                    .toFixed(2)} m²\r\n                                            </p>\r\n                                        </div>\r\n                                        <div>\r\n                                            <div>\r\n                                                <h4 class=\"text-sm font-medium text-text-muted\">\r\n                                                    {t.mapDraw.panels}\r\n                                                </h4>\r\n                                                <p class=\"text-lg\">\r\n                                                    {this.positionedPanels\r\n                                                        ?.length ?? 0}\r\n                                                </p>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div>\r\n                                    <h4 class=\"text-sm font-medium text-text-muted\">\r\n                                        {t.mapDraw.azimuth}\r\n                                    </h4>\r\n                                    <div class=\"flex gap-2 flex-row justify-start bg-muted rounded-4xl p-2\">\r\n                                        <input\r\n                                            class=\"text-lg w-full\"\r\n                                            onKeyDown={(e) => {\r\n                                                if (e.key === \"Enter\") {\r\n                                                    this.handleAzimuthChange(\r\n                                                        e,\r\n                                                    );\r\n                                                    (e.target as HTMLInputElement)\r\n                                                        .blur();\r\n                                                }\r\n                                            }}\r\n                                            value={this.currentPolygon\r\n                                                .details\r\n                                                ?.azimuth}\r\n                                        />\r\n                                        ({azimuthToCardinal(\r\n                                            this.currentPolygon.details\r\n                                                ?.azimuth,\r\n                                        )})\r\n                                    </div>\r\n                                    {!state.isIOS && (\r\n                                        <input\r\n                                            type=\"range\"\r\n                                            min=\"0\"\r\n                                            max=\"360\"\r\n                                            class=\"input-slider w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-muted\"\r\n                                            value={this.currentPolygon\r\n                                                .details?.azimuth}\r\n                                            onInput={(e) => {\r\n                                                const target = e\r\n                                                    .target as HTMLInputElement;\r\n                                                const azimuth = parseFloat(\r\n                                                    target.value,\r\n                                                );\r\n                                                this.currentPolygon.details\r\n                                                    .azimuth = azimuth;\r\n                                                if (\r\n                                                    this.currentPolygon\r\n                                                            .type ===\r\n                                                        \"roof\" &&\r\n                                                    this.positionedPanels\r\n                                                ) {\r\n                                                    this.calculateSolarPanels();\r\n                                                }\r\n                                            }}\r\n                                        />\r\n                                    )}\r\n                                </div>\r\n                                <div>\r\n                                    <h4 class=\"text-sm font-medium text-text-muted pl-2\">\r\n                                        {t.mapDraw.pitch}\r\n                                    </h4>\r\n                                    <div class=\"flex gap-2 flex-row justify-start bg-muted rounded-4xl p-2\">\r\n                                        <input\r\n                                            class=\"text-lg w-full\"\r\n                                            onKeyDown={(e) => {\r\n                                                if (e.key === \"Enter\") {\r\n                                                    this.handlePitchChange(\r\n                                                        e,\r\n                                                    );\r\n                                                    (e.target as HTMLInputElement)\r\n                                                        .blur();\r\n                                                }\r\n                                            }}\r\n                                            value={this.currentPolygon\r\n                                                .details\r\n                                                ?.pitch}\r\n                                        />\r\n                                        °\r\n                                    </div>\r\n                                    {!state.isIOS && (\r\n                                        <input\r\n                                            type=\"range\"\r\n                                            min=\"0\"\r\n                                            max=\"90\"\r\n                                            class=\"input-slider w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-muted\"\r\n                                            value={this.currentPolygon\r\n                                                .details?.pitch}\r\n                                            onInput={(e) => {\r\n                                                const target = e\r\n                                                    .target as HTMLInputElement;\r\n                                                const pitch = parseFloat(\r\n                                                    target.value,\r\n                                                );\r\n                                                this.currentPolygon.details\r\n                                                    .pitch = pitch;\r\n                                                if (\r\n                                                    this.currentPolygon\r\n                                                            .type ===\r\n                                                        \"roof\" &&\r\n                                                    this.positionedPanels\r\n                                                ) {\r\n                                                    this.calculateSolarPanels();\r\n                                                }\r\n                                            }}\r\n                                        />\r\n                                    )}\r\n                                </div>\r\n                            </div>\r\n                        )\r\n                        : (\r\n                            <p class=\"text-text-secondary text-center\">\r\n                                {t.mapDraw.noPolygonSelected}\r\n                            </p>\r\n                        )}\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"],"version":3}

package/dist/components/p-rhCvDg4h.js

@@ -0,0 +1,38 @@
+import { p as proxyCustomElement, H, h } from './index.js';
+
+const outputCss = "/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-800: oklch(27.8% 0.033 256.848);\n    --color-black: #000;\n    --spacing: 0.25rem;\n    --container-md: 28rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-lg: 0.5rem;\n    --radius-4xl: 2rem;\n    --animate-spin: spin 1s linear infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n    --color-primary: hsl(41 51% 90%);\n    --color-primary-foreground: hsl(0 0% 0%);\n    --color-secondary: hsl(28 100% 8%);\n    --color-secondary-foreground: hsl(0 0% 100%);\n    --color-tertiary: hsl(28 100% 29%);\n    --color-tertiary-foreground: hsl(0 0% 100%);\n    --color-muted: hsl(0 0% 100%);\n    --color-muted-foreground: hsl(0 0% 0%);\n    --color-error: hsl(0 100% 50%);\n    --color-error-foreground: hsl(0 0% 100%);\n    --color-surface: hsl(0 0% 88%);\n    --color-surface-hover: hsl(0 0% 82%);\n    --color-surface-active: hsl(0 0% 64%);\n    --color-text-muted: hsl(0 0% 45%);\n    --color-text-secondary: hsl(0 0% 55%);\n    --color-text-placeholder: hsl(0 0% 73%);\n    --color-border: hsl(0 0% 82%);\n    --color-border-light: hsl(0 0% 93%);\n    --color-success: hsl(142 76% 36%);\n    --color-info: hsl(221 83% 53%);\n    --color-hover: hsl(0 0% 88%);\n    --color-hover-dark: hsl(28 100% 8%);\n    --color-overlay: rgba(0, 0, 0, 0.24);\n    --color-tooltip: hsl(0 0% 13%);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-3 {\n    left: calc(var(--spacing) * 3);\n  }\n  .z-20 {\n    z-index: 20;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .m-auto {\n    margin: auto;\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mt-6 {\n    margin-top: calc(var(--spacing) * 6);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-48 {\n    height: calc(var(--spacing) * 48);\n  }\n  .h-\\[400px\\] {\n    height: 400px;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-64 {\n    width: calc(var(--spacing) * 64);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-3 {\n    flex: 3;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-help {\n    cursor: help;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .grid-rows-2 {\n    grid-template-rows: repeat(2, minmax(0, 1fr));\n  }\n  .grid-rows-3 {\n    grid-template-rows: repeat(3, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-4xl {\n    border-radius: var(--radius-4xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-t-2 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 2px;\n  }\n  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-border {\n    border-color: var(--color-border);\n  }\n  .border-error {\n    border-color: var(--color-error);\n  }\n  .border-gray-300 {\n    border-color: var(--color-gray-300);\n  }\n  .border-secondary {\n    border-color: var(--color-secondary);\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-gray-800 {\n    background-color: var(--color-gray-800);\n  }\n  .bg-muted {\n    background-color: var(--color-muted);\n  }\n  .bg-overlay {\n    background-color: var(--color-overlay);\n  }\n  .bg-primary {\n    background-color: var(--color-primary);\n  }\n  .bg-secondary {\n    background-color: var(--color-secondary);\n  }\n  .bg-surface {\n    background-color: var(--color-surface);\n  }\n  .bg-surface-active {\n    background-color: var(--color-surface-active);\n  }\n  .bg-text-secondary {\n    background-color: var(--color-text-secondary);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .pt-2 {\n    padding-top: calc(var(--spacing) * 2);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pt-7 {\n    padding-top: calc(var(--spacing) * 7);\n  }\n  .pr-4 {\n    padding-right: calc(var(--spacing) * 4);\n  }\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .pl-4 {\n    padding-left: calc(var(--spacing) * 4);\n  }\n  .pl-10 {\n    padding-left: calc(var(--spacing) * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-error {\n    color: var(--color-error);\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-muted {\n    color: var(--color-muted);\n  }\n  .text-muted-foreground {\n    color: var(--color-muted-foreground);\n  }\n  .text-primary-foreground {\n    color: var(--color-primary-foreground);\n  }\n  .text-secondary {\n    color: var(--color-secondary);\n  }\n  .text-secondary-foreground {\n    color: var(--color-secondary-foreground);\n  }\n  .text-success {\n    color: var(--color-success);\n  }\n  .text-text-muted {\n    color: var(--color-text-muted);\n  }\n  .text-text-placeholder {\n    color: var(--color-text-placeholder);\n  }\n  .text-text-secondary {\n    color: var(--color-text-secondary);\n  }\n  .accent-tertiary {\n    accent-color: var(--color-tertiary);\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .group-hover\\:opacity-100 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .hover\\:bg-hover {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-hover);\n      }\n    }\n  }\n  .hover\\:bg-hover-dark {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-hover-dark);\n      }\n    }\n  }\n  .hover\\:bg-muted {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-muted);\n      }\n    }\n  }\n  .hover\\:bg-overlay {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-overlay);\n      }\n    }\n  }\n  .hover\\:bg-secondary {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-secondary);\n      }\n    }\n  }\n  .hover\\:bg-secondary\\/80 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, hsl(28 100% 8%) 80%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-surface-hover {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-surface-hover);\n      }\n    }\n  }\n  .hover\\:bg-tertiary {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-tertiary);\n      }\n    }\n  }\n  .hover\\:bg-text-secondary {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-text-secondary);\n      }\n    }\n  }\n  .hover\\:text-muted {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-muted);\n      }\n    }\n  }\n  .focus\\:border-transparent {\n    &:focus {\n      border-color: transparent;\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-info {\n    &:focus {\n      --tw-ring-color: var(--color-info);\n    }\n  }\n  .focus\\:ring-secondary {\n    &:focus {\n      --tw-ring-color: var(--color-secondary);\n    }\n  }\n  .focus\\:ring-tertiary {\n    &:focus {\n      --tw-ring-color: var(--color-tertiary);\n    }\n  }\n  .focus\\:ring-offset-0 {\n    &:focus {\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .lg\\:gap-4 {\n    @media (width >= 64rem) {\n      gap: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:rounded-full {\n    &::-webkit-slider-runnable-track {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:bg-black\\/25 {\n    &::-webkit-slider-runnable-track {\n      background-color: color-mix(in srgb, #000 25%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-black) 25%, transparent);\n      }\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      height: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      width: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none {\n    &::-webkit-slider-thumb {\n      appearance: none;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full {\n    &::-webkit-slider-thumb {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-muted {\n    &::-webkit-slider-thumb {\n      background-color: var(--color-muted);\n    }\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-duration: initial;\n    }\n  }\n}\n";
+
+const EraserIcon = /*@__PURE__*/ proxyCustomElement(class EraserIcon extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    inline = false;
+    size = 20;
+    render() {
+        return (h("svg", { key: '9964ec99abf01cff9d69f7053c2be77ed8f9d5a6', xmlns: "http://www.w3.org/2000/svg", width: this.size, height: this.size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: `lucide lucide-eraser-icon lucide-eraser ${this.inline ? "inline-block" : ""}` }, h("path", { key: 'f23eda2928dff9ff6f0cc839a2293ef9e2e6e5b4', d: "m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21" }), h("path", { key: '61acbe3b9006644100c2af4305b7e84a074cc9e0', d: "M22 21H7" }), h("path", { key: 'aa4a5a9109e17245013dc4889b4251dc409859d2', d: "m5 11 9 9" })));
+    }
+    static get style() { return outputCss; }
+}, [0, "eraser-icon", {
+        "inline": [4],
+        "size": [2]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eraser-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eraser-icon":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EraserIcon);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { EraserIcon as E, defineCustomElement as d };
+//# sourceMappingURL=p-rhCvDg4h.js.map
+
+//# sourceMappingURL=p-rhCvDg4h.js.map

package/dist/components/p-rhCvDg4h.js.map

@@ -0,0 +1 @@
+{"file":"p-rhCvDg4h.js","mappings":";;AAAA,MAAM,SAAS,GAAG,s3tBAAs3tB;;MCO33tB,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;;;;;IAEnB,MAAM,GAAY,KAAK;IAEvB,IAAI,GAAW,EAAE;IAEjB,MAAM,GAAA;QACF,QACI,4DACI,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,MAAM,EAAE,IAAI,CAAC,IAAI,EACjB,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACR,cAAA,EAAA,GAAG,oBACD,OAAO,EAAA,iBAAA,EACN,OAAO,EACvB,KAAK,EAAE,CACH,wCAAA,EAAA,IAAI,CAAC,MAAM,GAAG,cAAc,GAAG,EACnC,CAAE,CAAA,EAAA,EAEF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAC,EAAC,sFAAsF,EAAG,CAAA,EACjG,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAC,EAAC,UAAU,EAAG,CAAA,EACrB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,WAAW,EAAG,CAAA,CACpB;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/output.css?tag=eraser-icon","src/components/icons/eraser.tsx"],"sourcesContent":["/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-800: oklch(27.8% 0.033 256.848);\n    --color-black: #000;\n    --spacing: 0.25rem;\n    --container-md: 28rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-lg: 0.5rem;\n    --radius-4xl: 2rem;\n    --animate-spin: spin 1s linear infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n    --color-primary: hsl(41 51% 90%);\n    --color-primary-foreground: hsl(0 0% 0%);\n    --color-secondary: hsl(28 100% 8%);\n    --color-secondary-foreground: hsl(0 0% 100%);\n    --color-tertiary: hsl(28 100% 29%);\n    --color-tertiary-foreground: hsl(0 0% 100%);\n    --color-muted: hsl(0 0% 100%);\n    --color-muted-foreground: hsl(0 0% 0%);\n    --color-error: hsl(0 100% 50%);\n    --color-error-foreground: hsl(0 0% 100%);\n    --color-surface: hsl(0 0% 88%);\n    --color-surface-hover: hsl(0 0% 82%);\n    --color-surface-active: hsl(0 0% 64%);\n    --color-text-muted: hsl(0 0% 45%);\n    --color-text-secondary: hsl(0 0% 55%);\n    --color-text-placeholder: hsl(0 0% 73%);\n    --color-border: hsl(0 0% 82%);\n    --color-border-light: hsl(0 0% 93%);\n    --color-success: hsl(142 76% 36%);\n    --color-info: hsl(221 83% 53%);\n    --color-hover: hsl(0 0% 88%);\n    --color-hover-dark: hsl(28 100% 8%);\n    --color-overlay: rgba(0, 0, 0, 0.24);\n    --color-tooltip: hsl(0 0% 13%);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-3 {\n    left: calc(var(--spacing) * 3);\n  }\n  .z-20 {\n    z-index: 20;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .m-auto {\n    margin: auto;\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mt-6 {\n    margin-top: calc(var(--spacing) * 6);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-48 {\n    height: calc(var(--spacing) * 48);\n  }\n  .h-\\[400px\\] {\n    height: 400px;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-64 {\n    width: calc(var(--spacing) * 64);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-3 {\n    flex: 3;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-help {\n    cursor: help;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .grid-rows-2 {\n    grid-template-rows: repeat(2, minmax(0, 1fr));\n  }\n  .grid-rows-3 {\n    grid-template-rows: repeat(3, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-4xl {\n    border-radius: var(--radius-4xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-t-2 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 2px;\n  }\n  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-border {\n    border-color: var(--color-border);\n  }\n  .border-error {\n    border-color: var(--color-error);\n  }\n  .border-gray-300 {\n    border-color: var(--color-gray-300);\n  }\n  .border-secondary {\n    border-color: var(--color-secondary);\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-gray-800 {\n    background-color: var(--color-gray-800);\n  }\n  .bg-muted {\n    background-color: var(--color-muted);\n  }\n  .bg-overlay {\n    background-color: var(--color-overlay);\n  }\n  .bg-primary {\n    background-color: var(--color-primary);\n  }\n  .bg-secondary {\n    background-color: var(--color-secondary);\n  }\n  .bg-surface {\n    background-color: var(--color-surface);\n  }\n  .bg-surface-active {\n    background-color: var(--color-surface-active);\n  }\n  .bg-text-secondary {\n    background-color: var(--color-text-secondary);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .pt-2 {\n    padding-top: calc(var(--spacing) * 2);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pt-7 {\n    padding-top: calc(var(--spacing) * 7);\n  }\n  .pr-4 {\n    padding-right: calc(var(--spacing) * 4);\n  }\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .pl-4 {\n    padding-left: calc(var(--spacing) * 4);\n  }\n  .pl-10 {\n    padding-left: calc(var(--spacing) * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-error {\n    color: var(--color-error);\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-muted {\n    color: var(--color-muted);\n  }\n  .text-muted-foreground {\n    color: var(--color-muted-foreground);\n  }\n  .text-primary-foreground {\n    color: var(--color-primary-foreground);\n  }\n  .text-secondary {\n    color: var(--color-secondary);\n  }\n  .text-secondary-foreground {\n    color: var(--color-secondary-foreground);\n  }\n  .text-success {\n    color: var(--color-success);\n  }\n  .text-text-muted {\n    color: var(--color-text-muted);\n  }\n  .text-text-placeholder {\n    color: var(--color-text-placeholder);\n  }\n  .text-text-secondary {\n    color: var(--color-text-secondary);\n  }\n  .accent-tertiary {\n    accent-color: var(--color-tertiary);\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .group-hover\\:opacity-100 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .hover\\:bg-hover {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-hover);\n      }\n    }\n  }\n  .hover\\:bg-hover-dark {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-hover-dark);\n      }\n    }\n  }\n  .hover\\:bg-muted {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-muted);\n      }\n    }\n  }\n  .hover\\:bg-overlay {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-overlay);\n      }\n    }\n  }\n  .hover\\:bg-secondary {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-secondary);\n      }\n    }\n  }\n  .hover\\:bg-secondary\\/80 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, hsl(28 100% 8%) 80%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-surface-hover {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-surface-hover);\n      }\n    }\n  }\n  .hover\\:bg-tertiary {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-tertiary);\n      }\n    }\n  }\n  .hover\\:bg-text-secondary {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-text-secondary);\n      }\n    }\n  }\n  .hover\\:text-muted {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-muted);\n      }\n    }\n  }\n  .focus\\:border-transparent {\n    &:focus {\n      border-color: transparent;\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-info {\n    &:focus {\n      --tw-ring-color: var(--color-info);\n    }\n  }\n  .focus\\:ring-secondary {\n    &:focus {\n      --tw-ring-color: var(--color-secondary);\n    }\n  }\n  .focus\\:ring-tertiary {\n    &:focus {\n      --tw-ring-color: var(--color-tertiary);\n    }\n  }\n  .focus\\:ring-offset-0 {\n    &:focus {\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .lg\\:gap-4 {\n    @media (width >= 64rem) {\n      gap: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:rounded-full {\n    &::-webkit-slider-runnable-track {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:bg-black\\/25 {\n    &::-webkit-slider-runnable-track {\n      background-color: color-mix(in srgb, #000 25%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-black) 25%, transparent);\n      }\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      height: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      width: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none {\n    &::-webkit-slider-thumb {\n      appearance: none;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full {\n    &::-webkit-slider-thumb {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-muted {\n    &::-webkit-slider-thumb {\n      background-color: var(--color-muted);\n    }\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-duration: initial;\n    }\n  }\n}\n","import { Component, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: \"eraser-icon\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class EraserIcon {\r\n    @Prop()\r\n    inline: boolean = false;\r\n    @Prop()\r\n    size: number = 20;\r\n\r\n    render() {\r\n        return (\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width={this.size}\r\n                height={this.size}\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"none\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                class={`lucide lucide-eraser-icon lucide-eraser ${\r\n                    this.inline ? \"inline-block\" : \"\"\r\n                }`}\r\n            >\r\n                <path d=\"m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21\" />\r\n                <path d=\"M22 21H7\" />\r\n                <path d=\"m5 11 9 9\" />\r\n            </svg>\r\n        );\r\n    }\r\n}\r\n"],"version":3}

package/dist/components/p-tY_1hcaO.js

@@ -0,0 +1,74 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
+import { g as getLanguageStrings, s as state } from './p-DlAht76f.js';
+
+const outputCss = "/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-800: oklch(27.8% 0.033 256.848);\n    --color-black: #000;\n    --spacing: 0.25rem;\n    --container-md: 28rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-lg: 0.5rem;\n    --radius-4xl: 2rem;\n    --animate-spin: spin 1s linear infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n    --color-primary: hsl(41 51% 90%);\n    --color-primary-foreground: hsl(0 0% 0%);\n    --color-secondary: hsl(28 100% 8%);\n    --color-secondary-foreground: hsl(0 0% 100%);\n    --color-tertiary: hsl(28 100% 29%);\n    --color-tertiary-foreground: hsl(0 0% 100%);\n    --color-muted: hsl(0 0% 100%);\n    --color-muted-foreground: hsl(0 0% 0%);\n    --color-error: hsl(0 100% 50%);\n    --color-error-foreground: hsl(0 0% 100%);\n    --color-surface: hsl(0 0% 88%);\n    --color-surface-hover: hsl(0 0% 82%);\n    --color-surface-active: hsl(0 0% 64%);\n    --color-text-muted: hsl(0 0% 45%);\n    --color-text-secondary: hsl(0 0% 55%);\n    --color-text-placeholder: hsl(0 0% 73%);\n    --color-border: hsl(0 0% 82%);\n    --color-border-light: hsl(0 0% 93%);\n    --color-success: hsl(142 76% 36%);\n    --color-info: hsl(221 83% 53%);\n    --color-hover: hsl(0 0% 88%);\n    --color-hover-dark: hsl(28 100% 8%);\n    --color-overlay: rgba(0, 0, 0, 0.24);\n    --color-tooltip: hsl(0 0% 13%);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-3 {\n    left: calc(var(--spacing) * 3);\n  }\n  .z-20 {\n    z-index: 20;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .m-auto {\n    margin: auto;\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mt-6 {\n    margin-top: calc(var(--spacing) * 6);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-48 {\n    height: calc(var(--spacing) * 48);\n  }\n  .h-\\[400px\\] {\n    height: 400px;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-64 {\n    width: calc(var(--spacing) * 64);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-3 {\n    flex: 3;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-help {\n    cursor: help;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .grid-rows-2 {\n    grid-template-rows: repeat(2, minmax(0, 1fr));\n  }\n  .grid-rows-3 {\n    grid-template-rows: repeat(3, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-4xl {\n    border-radius: var(--radius-4xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-t-2 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 2px;\n  }\n  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-border {\n    border-color: var(--color-border);\n  }\n  .border-error {\n    border-color: var(--color-error);\n  }\n  .border-gray-300 {\n    border-color: var(--color-gray-300);\n  }\n  .border-secondary {\n    border-color: var(--color-secondary);\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-gray-800 {\n    background-color: var(--color-gray-800);\n  }\n  .bg-muted {\n    background-color: var(--color-muted);\n  }\n  .bg-overlay {\n    background-color: var(--color-overlay);\n  }\n  .bg-primary {\n    background-color: var(--color-primary);\n  }\n  .bg-secondary {\n    background-color: var(--color-secondary);\n  }\n  .bg-surface {\n    background-color: var(--color-surface);\n  }\n  .bg-surface-active {\n    background-color: var(--color-surface-active);\n  }\n  .bg-text-secondary {\n    background-color: var(--color-text-secondary);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .pt-2 {\n    padding-top: calc(var(--spacing) * 2);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pt-7 {\n    padding-top: calc(var(--spacing) * 7);\n  }\n  .pr-4 {\n    padding-right: calc(var(--spacing) * 4);\n  }\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .pl-4 {\n    padding-left: calc(var(--spacing) * 4);\n  }\n  .pl-10 {\n    padding-left: calc(var(--spacing) * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-error {\n    color: var(--color-error);\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-muted {\n    color: var(--color-muted);\n  }\n  .text-muted-foreground {\n    color: var(--color-muted-foreground);\n  }\n  .text-primary-foreground {\n    color: var(--color-primary-foreground);\n  }\n  .text-secondary {\n    color: var(--color-secondary);\n  }\n  .text-secondary-foreground {\n    color: var(--color-secondary-foreground);\n  }\n  .text-success {\n    color: var(--color-success);\n  }\n  .text-text-muted {\n    color: var(--color-text-muted);\n  }\n  .text-text-placeholder {\n    color: var(--color-text-placeholder);\n  }\n  .text-text-secondary {\n    color: var(--color-text-secondary);\n  }\n  .accent-tertiary {\n    accent-color: var(--color-tertiary);\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .group-hover\\:opacity-100 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .hover\\:bg-hover {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-hover);\n      }\n    }\n  }\n  .hover\\:bg-hover-dark {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-hover-dark);\n      }\n    }\n  }\n  .hover\\:bg-muted {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-muted);\n      }\n    }\n  }\n  .hover\\:bg-overlay {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-overlay);\n      }\n    }\n  }\n  .hover\\:bg-secondary {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-secondary);\n      }\n    }\n  }\n  .hover\\:bg-secondary\\/80 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, hsl(28 100% 8%) 80%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-surface-hover {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-surface-hover);\n      }\n    }\n  }\n  .hover\\:bg-tertiary {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-tertiary);\n      }\n    }\n  }\n  .hover\\:bg-text-secondary {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-text-secondary);\n      }\n    }\n  }\n  .hover\\:text-muted {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-muted);\n      }\n    }\n  }\n  .focus\\:border-transparent {\n    &:focus {\n      border-color: transparent;\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-info {\n    &:focus {\n      --tw-ring-color: var(--color-info);\n    }\n  }\n  .focus\\:ring-secondary {\n    &:focus {\n      --tw-ring-color: var(--color-secondary);\n    }\n  }\n  .focus\\:ring-tertiary {\n    &:focus {\n      --tw-ring-color: var(--color-tertiary);\n    }\n  }\n  .focus\\:ring-offset-0 {\n    &:focus {\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .lg\\:gap-4 {\n    @media (width >= 64rem) {\n      gap: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:rounded-full {\n    &::-webkit-slider-runnable-track {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:bg-black\\/25 {\n    &::-webkit-slider-runnable-track {\n      background-color: color-mix(in srgb, #000 25%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-black) 25%, transparent);\n      }\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      height: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      width: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none {\n    &::-webkit-slider-thumb {\n      appearance: none;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full {\n    &::-webkit-slider-thumb {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-muted {\n    &::-webkit-slider-thumb {\n      background-color: var(--color-muted);\n    }\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-duration: initial;\n    }\n  }\n}\n";
+
+const SettingsModal = /*@__PURE__*/ proxyCustomElement(class SettingsModal extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.close = createEvent(this, "close");
+        this.save = createEvent(this, "save");
+    }
+    settings;
+    tempSettings;
+    close;
+    save;
+    componentWillLoad() {
+        this.tempSettings = { ...this.settings };
+    }
+    handleClose = () => {
+        if (JSON.stringify(this.tempSettings) !== JSON.stringify(this.settings)) {
+            if (confirm("Are you sure you want to close without saving your changes?")) {
+                this.close.emit();
+            }
+        }
+        else {
+            this.close.emit();
+        }
+    };
+    handleSave = () => {
+        this.save.emit(this.tempSettings);
+        this.close.emit();
+    };
+    handleInputChange = (key, value) => {
+        this.tempSettings = {
+            ...this.tempSettings,
+            [key]: value,
+        };
+    };
+    render() {
+        const t = getLanguageStrings(state.settings.language);
+        return (h("div", { key: '69815a7efeb8f52a5d3422b06dc212a50b9f405b', class: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" }, h("div", { key: 'ed368ae8d0d6d2946c5a4ecc559f018521e1bce8', class: "bg-primary rounded-4xl p-6 w-full max-w-md" }, h("div", { key: 'f51088beb4d8445503fa08c3dd2a2b8c886f79ce', class: "flex justify-between items-center mb-6" }, h("h2", { key: 'a9bcb7b893961bbf2032c1b8a110624ec3a95e65', class: "text-xl font-semibold" }, "Settings"), h("button", { key: '47d4dc1cc0789485da95218becfc921ae5db177c', class: "p-2 hover:bg-hover rounded-full transition-colors", onClick: this.handleClose }, h("svg", { key: '42923fdd6d5c96ceee98bdddca2e7e6bda42dcfa', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("line", { key: '751c5243b5b785a21131b02a3142c6d46e0cffeb', x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { key: 'e26bd2a1b20aa718ced6183130e962c9dbd159b9', x1: "6", y1: "6", x2: "18", y2: "18" })))), h("div", { key: '560be61d72a1a98eea4d2788d49eee7a3107470d', class: "space-y-4" }, h("div", { key: '2e6422d175602e7a53eb3d629c37c47980c08da1' }, h("label", { key: '56a2f53ae26c3e7d90519b85f3466604ea46b469', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.language), h("select", { key: 'ab444c024a2dfefd46ba6fb09878e75d52db9478', class: "w-full bg-muted rounded-4xl p-2", onInput: (e) => this.handleInputChange("language", e.target
+                .value) }, h("option", { key: 'eb6b88689002c9f379af1c157f19fc123dbe7b4f', value: "en", selected: this.tempSettings.language ===
+                "en" }, "English"), h("option", { key: '2203e1615212fdf96463185e9a06df2f65898dc4', value: "es", selected: this.tempSettings.language ===
+                "es" }, "Espa\u00F1ol"), h("option", { key: 'ec91327e0070e0045079f63476aab7ea90da43ee', value: "de", selected: this.tempSettings.language ===
+                "de" }, "Deutsch"))), h("div", { key: 'ff8d7f227f166862303f666bea321d13b50e79c8' }, h("label", { key: '778fefd538acc3601d8733e8b10e08c7f749cfb2', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.rowSpacing), h("input", { key: 'ebd39dcc7fbb5bb6e806b6482fe5a22730dcc31d', type: "number", class: "w-full bg-muted rounded-4xl p-2", value: this.tempSettings.rowSpacing, onInput: (e) => this.handleInputChange("rowSpacing", parseFloat(e.target
+                .value)) })), h("div", { key: '0f770fa12c399fb1282a95cdaa873d3c4c4591f8' }, h("label", { key: 'bcfdb9dc84393770c93a982e34e38198f2cb59df', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.columnSpacing), h("input", { key: '574dc95db00f9c1725004e6c074e537f1ba51b60', type: "number", class: "w-full bg-muted rounded-4xl p-2", value: this.tempSettings.columnSpacing, onInput: (e) => this.handleInputChange("columnSpacing", parseFloat(e.target
+                .value)) })), h("div", { key: '286a6121aace1b97724bf7c88975a172f0fe1a68' }, h("label", { key: '96b65a6ce1591e0188544db161e018ce90f151e2', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.borderInset), h("input", { key: '264728330a50df7b3ba02a568ff683dce895b2b3', type: "number", class: "w-full bg-muted rounded-4xl p-2", value: this.tempSettings.borderInset, onInput: (e) => this.handleInputChange("borderInset", parseFloat(e.target
+                .value)) }))), h("div", { key: 'd73a232b24082a9c0bef75612184c71f52c59139', class: "flex justify-end gap-4 mt-6" }, h("button", { key: '981039537b08be95b180cc6672725f6b2a5c9281', class: "px-4 py-2 bg-surface rounded-4xl hover:bg-surface-hover transition-colors", onClick: this.handleClose }, "Cancel"), h("button", { key: '7f30b8e87d03e4ab2afe77c0579052993b57d3d3', class: "px-4 py-2 bg-secondary text-muted rounded-4xl hover:bg-text-secondary transition-colors", onClick: this.handleSave }, "Save Changes")))));
+    }
+    static get style() { return outputCss; }
+}, [0, "settings-modal", {
+        "settings": [16],
+        "tempSettings": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["settings-modal"];
+    components.forEach(tagName => { switch (tagName) {
+        case "settings-modal":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SettingsModal);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SettingsModal as S, defineCustomElement as d };
+//# sourceMappingURL=p-tY_1hcaO.js.map
+
+//# sourceMappingURL=p-tY_1hcaO.js.map