blue-chestnut-solar-expert 0.0.54 → 0.0.56

package/dist/collection/components/map-draw/polygon-information.js

@@ -0,0 +1,204 @@
+import { h } from "@stencil/core";
+import { getLanguageStrings } from "../../utils/lang/general";
+import { state } from "../../store";
+import { azimuthToCardinal } from "../../utils/utils";
+export class PolygonInformation {
+    currentPolygon;
+    numberOfPanels;
+    handleAzimuthChange;
+    handlePitchChange;
+    calculateSolarPanels;
+    markAsFlatRoof;
+    currentTool;
+    render() {
+        const t = getLanguageStrings(state.settings.language);
+        // console.log(this.currentPolygon);
+        return (h("div", { key: 'ea12d974f8928984d3ef4138bdd516dec317c5b0', class: "flex gap-4 flex-row justify-center items-center w-full rounded-4xl pb-2", style: {
+                border: "1px solid var(--color-border)",
+            } }, h("div", { key: 'dd5c55a781b771779783e1e90c5918089d668de9', class: "w-full bg-primary rounded-4xl p-3 text-secondary" }, h("h3", { key: 'beb6358d3ec077a11163f377829182f0d21a115d', class: "text-lg font-semibold mb-4 text-center" }, t.mapDraw.information), h("polygon-buttons", { key: '1d866d933593dbd31b385a1aeb2b384144b1aa10', calculateSolarPanels: this.calculateSolarPanels, markAsFlatRoof: this.markAsFlatRoof, currentTool: this.currentTool }), this.currentPolygon?.area
+            ? (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
+                ?.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.numberOfPanels ?? 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
+                    ?.azimuth ?? 0 }), "(", azimuthToCardinal(this.currentPolygon.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
+                    ?.azimuth ?? 0, onInput: (e) => {
+                    this.handleAzimuthChange(e);
+                } }))), 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
+                    ?.pitch ?? 0 }), "\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
+                    ?.pitch ?? 0, onInput: (e) => {
+                    this.handlePitchChange(e);
+                } })))))
+            : (h("p", { class: "text-text-secondary text-center" }, t.mapDraw.noPolygonSelected)))));
+    }
+    static get is() { return "polygon-information"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../output.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../output.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "currentPolygon": {
+                "type": "unknown",
+                "attribute": "current-polygon",
+                "mutable": false,
+                "complexType": {
+                    "original": "Polygon",
+                    "resolved": "Polygon",
+                    "references": {
+                        "Polygon": {
+                            "location": "import",
+                            "path": "harmonia-types",
+                            "id": "../../../harmonia/packages/harmonia-types/dist/index.d.ts::Polygon"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "numberOfPanels": {
+                "type": "number",
+                "attribute": "number-of-panels",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | undefined",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "handleAzimuthChange": {
+                "type": "unknown",
+                "attribute": "handle-azimuth-change",
+                "mutable": false,
+                "complexType": {
+                    "original": "(event: Event) => void",
+                    "resolved": "(event: Event) => void",
+                    "references": {
+                        "Event": {
+                            "location": "global",
+                            "id": "global::Event"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "handlePitchChange": {
+                "type": "unknown",
+                "attribute": "handle-pitch-change",
+                "mutable": false,
+                "complexType": {
+                    "original": "(event: Event) => void",
+                    "resolved": "(event: Event) => void",
+                    "references": {
+                        "Event": {
+                            "location": "global",
+                            "id": "global::Event"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "calculateSolarPanels": {
+                "type": "unknown",
+                "attribute": "calculate-solar-panels",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "markAsFlatRoof": {
+                "type": "unknown",
+                "attribute": "mark-as-flat-roof",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "currentTool": {
+                "type": "string",
+                "attribute": "current-tool",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=polygon-information.js.map

package/dist/collection/components/map-draw/polygon-information.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"polygon-information.js","sourceRoot":"","sources":["../../../src/components/map-draw/polygon-information.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\nimport { Polygon } from \"harmonia-types\";\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    numberOfPanels: number | 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    @Prop()\r\n    markAsFlatRoof: () => void;\r\n    @Prop()\r\n    currentTool: string;\r\n\r\n    render() {\r\n        const t = getLanguageStrings(state.settings.language);\r\n        // console.log(this.currentPolygon);\r\n\r\n        return (\r\n            <div\r\n                class=\"flex gap-4 flex-row justify-center items-center w-full rounded-4xl pb-2\"\r\n                style={{\r\n                    border: \"1px solid var(--color-border)\",\r\n                }}\r\n            >\r\n                <div class=\"w-full bg-primary rounded-4xl p-3 text-secondary\">\r\n                    <h3 class=\"text-lg font-semibold mb-4 text-center\">\r\n                        {t.mapDraw.information}\r\n                    </h3>\r\n                    <polygon-buttons\r\n                        calculateSolarPanels={this.calculateSolarPanels}\r\n                        markAsFlatRoof={this.markAsFlatRoof}\r\n                        currentTool={this.currentTool}\r\n                    />\r\n                    {this.currentPolygon?.area\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\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.numberOfPanels ?? 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                                                ?.azimuth ?? 0}\r\n                                        />\r\n                                        ({azimuthToCardinal(\r\n                                            this.currentPolygon.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                                                ?.azimuth ?? 0}\r\n                                            onInput={(e) => {\r\n                                                this.handleAzimuthChange(e);\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                                                ?.pitch ?? 0}\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                                                ?.pitch ?? 0}\r\n                                            onInput={(e) => {\r\n                                                this.handlePitchChange(e);\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"]}

package/dist/collection/components/map-draw/tool-box.js

@@ -0,0 +1,108 @@
+import { h } from "@stencil/core";
+import { getLanguageStrings } from "../../utils/lang/general";
+import { state } from "../../store";
+import { tools, undoTool } from "../../utils/render/tools";
+export class ToolBox {
+    currentTool;
+    undoCallback;
+    onToolSelect;
+    render() {
+        const t = getLanguageStrings(state.settings.language);
+        const undoToolStrings = t.mapDraw.tools[undoTool.name];
+        return (h("div", { key: '8e967f7d9c64bb3144fb452fafc507e46e4943d1', class: "flex gap-1 sm:gap-4 rounded-4xl bg-primary pt-3 pl-3 pr-3 flex-wrap justify-center w-full text-xs" }, tools.map((tool) => {
+            const toolStrings = t.mapDraw.tools[tool.name];
+            return (h("button", { class: `px-3 py-2 rounded-4xl transition-colors duration-200 ${this.currentTool.name === tool.name
+                    ? "bg-secondary hover:bg-secondary/80"
+                    : "bg-primary hover:bg-muted"}`, style: {
+                    color: this.currentTool.name === tool.name
+                        ? "var(--color-secondary-foreground)"
+                        : "var(--color-primary-foreground)",
+                    border: "1px solid var(--color-border)",
+                }, "aria-label": toolStrings.ariaLabel, title: toolStrings.explanation, onClick: () => this.onToolSelect(tool) }, h("div", { class: "flex items-center gap-1 flex-col" }, h("icon-selector", { name: tool.icon }), h("span", null, toolStrings.name))));
+        }), h("button", { key: 'ef4c27258c2cfa29ad937319c8260f885d94b234', class: `px-3 py-2 rounded-4xl transition-colors duration-200 bg-primary hover:bg-muted text-primary-foreground focus:border-2 focus:border-secondary`, style: {
+                border: "1px solid var(--color-border)",
+            }, "aria-label": undoToolStrings.ariaLabel, title: undoToolStrings.explanation, onClick: () => this.undoCallback() }, h("div", { key: '37d59dc02ab0a8f61a9ef983030756a56dc2c8dc', class: "flex items-center gap-1 flex-col" }, h("undo-icon", { key: 'a4a581a73623722219ecf944bf9eda8613a31944' }), h("span", { key: 'df5e5aeca411a468f4024037d8cc27c7038c3dae' }, undoToolStrings.name)))));
+    }
+    static get is() { return "tool-box"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../output.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../output.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "currentTool": {
+                "type": "unknown",
+                "attribute": "current-tool",
+                "mutable": false,
+                "complexType": {
+                    "original": "Tool",
+                    "resolved": "Tool",
+                    "references": {
+                        "Tool": {
+                            "location": "import",
+                            "path": "../../utils/render/tools",
+                            "id": "src/utils/render/tools.ts::Tool"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "undoCallback": {
+                "type": "unknown",
+                "attribute": "undo-callback",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "onToolSelect": {
+                "type": "unknown",
+                "attribute": "on-tool-select",
+                "mutable": false,
+                "complexType": {
+                    "original": "(tool: Tool) => void",
+                    "resolved": "(tool: Tool) => void",
+                    "references": {
+                        "Tool": {
+                            "location": "import",
+                            "path": "../../utils/render/tools",
+                            "id": "src/utils/render/tools.ts::Tool"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=tool-box.js.map

package/dist/collection/components/map-draw/tool-box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-box.js","sourceRoot":"","sources":["../../../src/components/map-draw/tool-box.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAO3D,MAAM,OAAO,OAAO;IAEhB,WAAW,CAAO;IAElB,YAAY,CAAa;IAEzB,YAAY,CAAuB;IAEnC,MAAM;QACF,MAAM,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACtD,MAAM,eAAe,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEvD,OAAO,CACH,4DAAK,KAAK,EAAC,mGAAmG;YACzG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gBAChB,MAAM,WAAW,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC/C,OAAO,CACH,cACI,KAAK,EAAE,wDACH,IAAI,CAAC,WAAW,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI;wBAC/B,CAAC,CAAC,oCAAoC;wBACtC,CAAC,CAAC,2BACV,EAAE,EACF,KAAK,EAAE;wBACH,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI;4BACtC,CAAC,CAAC,mCAAmC;4BACrC,CAAC,CAAC,iCAAiC;wBACvC,MAAM,EAAE,+BAA+B;qBAC1C,gBACW,WAAW,CAAC,SAAS,EACjC,KAAK,EAAE,WAAW,CAAC,WAAW,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;oBAEtC,WAAK,KAAK,EAAC,kCAAkC;wBACzC,qBAAe,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;wBAClC,gBAAO,WAAW,CAAC,IAAI,CAAQ,CAC7B,CACD,CACZ,CAAC;YACN,CAAC,CAAC;YACF,+DACI,KAAK,EAAE,8IAA8I,EACrJ,KAAK,EAAE;oBACH,MAAM,EAAE,+BAA+B;iBAC1C,gBACW,eAAe,CAAC,SAAS,EACrC,KAAK,EAAE,eAAe,CAAC,WAAW,EAClC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;gBAElC,4DAAK,KAAK,EAAC,kCAAkC;oBACzC,mEAAa;oBACb,+DAAO,eAAe,CAAC,IAAI,CAAQ,CACjC,CACD,CACP,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\nimport { Tool } from \"../../utils/render/tools\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { state } from \"../../store\";\r\nimport { tools, undoTool } from \"../../utils/render/tools\";\r\n\r\n@Component({\r\n    tag: \"tool-box\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class ToolBox {\r\n    @Prop()\r\n    currentTool: Tool;\r\n    @Prop()\r\n    undoCallback: () => void;\r\n    @Prop()\r\n    onToolSelect: (tool: Tool) => void;\r\n\r\n    render() {\r\n        const t = getLanguageStrings(state.settings.language);\r\n        const undoToolStrings = t.mapDraw.tools[undoTool.name];\r\n\r\n        return (\r\n            <div class=\"flex gap-1 sm:gap-4 rounded-4xl bg-primary pt-3 pl-3 pr-3 flex-wrap justify-center w-full text-xs\">\r\n                {tools.map((tool) => {\r\n                    const toolStrings = t.mapDraw.tools[tool.name];\r\n                    return (\r\n                        <button\r\n                            class={`px-3 py-2 rounded-4xl transition-colors duration-200 ${\r\n                                this.currentTool.name === tool.name\r\n                                    ? \"bg-secondary hover:bg-secondary/80\"\r\n                                    : \"bg-primary hover:bg-muted\"\r\n                            }`}\r\n                            style={{\r\n                                color: this.currentTool.name === tool.name\r\n                                    ? \"var(--color-secondary-foreground)\"\r\n                                    : \"var(--color-primary-foreground)\",\r\n                                border: \"1px solid var(--color-border)\",\r\n                            }}\r\n                            aria-label={toolStrings.ariaLabel}\r\n                            title={toolStrings.explanation}\r\n                            onClick={() => this.onToolSelect(tool)}\r\n                        >\r\n                            <div class=\"flex items-center gap-1 flex-col\">\r\n                                <icon-selector name={tool.icon} />\r\n                                <span>{toolStrings.name}</span>\r\n                            </div>\r\n                        </button>\r\n                    );\r\n                })}\r\n                <button\r\n                    class={`px-3 py-2 rounded-4xl transition-colors duration-200 bg-primary hover:bg-muted text-primary-foreground focus:border-2 focus:border-secondary`}\r\n                    style={{\r\n                        border: \"1px solid var(--color-border)\",\r\n                    }}\r\n                    aria-label={undoToolStrings.ariaLabel}\r\n                    title={undoToolStrings.explanation}\r\n                    onClick={() => this.undoCallback()}\r\n                >\r\n                    <div class=\"flex items-center gap-1 flex-col\">\r\n                        <undo-icon />\r\n                        <span>{undoToolStrings.name}</span>\r\n                    </div>\r\n                </button>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/dist/collection/components/map-draw/tutorial-component.js

@@ -0,0 +1,118 @@
+import { h } from "@stencil/core";
+import { getLanguageStrings } from "../../utils/lang/general";
+import { state } from "../../store";
+export class TutorialComponent {
+    onClose;
+    title;
+    description;
+    videoSource;
+    handleCloseTutorial = () => {
+        if (this.onClose) {
+            this.onClose();
+        }
+    };
+    render() {
+        const t = getLanguageStrings(state.settings.language);
+        // Use provided props or fall back to default values
+        const tutorialTitle = this.title || t.mapDraw.tutorial.title;
+        const tutorialDescription = this.description ||
+            t.mapDraw.tutorial.description;
+        const videoSrc = this.videoSource || "/assets/videos/tutorial1.mp4";
+        return (h("div", { key: '643a38ae57803cd738f5f464865bbec10921342b', class: "fixed inset-0 z-50 flex items-center justify-center p-4" }, h("div", { key: '1ad50622d2eb1e2c424f83419d25598981ec01c8', class: "absolute inset-0", style: {
+                backgroundColor: "rgba(0, 0, 0, 0.5)",
+            } }), h("div", { key: '10fe5b27d17f5ec1fc28e511e0b877581257fd00', class: "relative z-10 w-full max-w-2xl max-h-full overflow-y-auto" }, h("div", { key: 'db270c472ef606242ae62682b4b2d249172674bc', class: "flex flex-col gap-4 bg-primary rounded-4xl p-6" }, h("div", { key: '6462e61e1321d3b95b034cfbbd6eceb28959b963', class: "w-full text-center space-y-4" }, h("h2", { key: 'a791ba0ffec5eb1939009302eca9e5422d0c4416', class: "text-2xl font-bold text-secondary" }, tutorialTitle), h("p", { key: '755ed2d0833e846b2b9b4670a9f5e5ec1be6ff4f', class: "text-text-secondary" }, tutorialDescription)), h("div", { key: '89f8c0c7153b01c9791c5eb0370adca0879d3aeb', class: "flex items-start justify-center bg-primary rounded-4xl" }, h("div", { key: '2ec0595cbefdb0b848dec1435d2ee5f3036ad979', class: "relative flex items-center justify-center rounded-4xl bg-secondary overflow-hidden w-64 h-64" }, h("video", { key: '2322bae4f2748420738c5ddaee1fabf47be63d27', class: "w-full h-full object-contain rounded-4xl pointer-events-none", autoplay: true, muted: true, loop: true, playsinline: true, style: {
+                aspectRatio: "1/1",
+            } }, h("source", { key: '2702618ed0bee274b48f1888ac4ba2b04575db7d', src: videoSrc, type: "video/mp4" }), "Your browser does not support the video tag."))), h("div", { key: '61a438be7abd35566ebc9ad4ea97d575789bf32f', class: "w-full flex justify-center" }, h("button", { key: '139055174d1bb51a87da48787fd218526de872e1', onClick: this.handleCloseTutorial, class: "px-6 py-3 bg-tertiary text-white rounded-lg font-medium hover:bg-tertiary/80 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-tertiary focus:ring-offset-0" }, t.mapDraw.tutorial.understood))))));
+    }
+    static get is() { return "tutorial-component"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../output.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../output.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "onClose": {
+                "type": "unknown",
+                "attribute": "on-close",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "title": {
+                "type": "string",
+                "attribute": "title",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "description": {
+                "type": "string",
+                "attribute": "description",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "videoSource": {
+                "type": "string",
+                "attribute": "video-source",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=tutorial-component.js.map

package/dist/collection/components/map-draw/tutorial-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tutorial-component.js","sourceRoot":"","sources":["../../../src/components/map-draw/tutorial-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAOpC,MAAM,OAAO,iBAAiB;IAE1B,OAAO,CAAa;IAEpB,KAAK,CAAU;IAEf,WAAW,CAAU;IAErB,WAAW,CAAU;IAEb,mBAAmB,GAAG,GAAG,EAAE;QAC/B,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACf,IAAI,CAAC,OAAO,EAAE,CAAC;QACnB,CAAC;IACL,CAAC,CAAC;IAEF,MAAM;QACF,MAAM,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAEtD,oDAAoD;QACpD,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC;QAC7D,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW;YACxC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC;QACnC,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,IAAI,8BAA8B,CAAC;QAEpE,OAAO,CACH,4DAAK,KAAK,EAAC,yDAAyD;YAEhE,4DACI,KAAK,EAAC,kBAAkB,EACxB,KAAK,EAAE;oBACH,eAAe,EAAE,oBAAoB;iBACxC,GACH;YAGF,4DAAK,KAAK,EAAC,2DAA2D;gBAClE,4DAAK,KAAK,EAAC,gDAAgD;oBAEvD,4DAAK,KAAK,EAAC,8BAA8B;wBACrC,2DAAI,KAAK,EAAC,mCAAmC,IACxC,aAAa,CACb;wBACL,0DAAG,KAAK,EAAC,qBAAqB,IACzB,mBAAmB,CACpB,CACF;oBAGN,4DAAK,KAAK,EAAC,wDAAwD;wBAC/D,4DAAK,KAAK,EAAC,8FAA8F;4BACrG,8DACI,KAAK,EAAC,8DAA8D,EACpE,QAAQ,QACR,KAAK,QACL,IAAI,QACJ,WAAW,QACX,KAAK,EAAE;oCACH,WAAW,EAAE,KAAK;iCACrB;gCAED,+DACI,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,WAAW,GAClB;+EAEE,CACN,CACJ;oBAGN,4DAAK,KAAK,EAAC,4BAA4B;wBACnC,+DACI,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjC,KAAK,EAAC,qLAAqL,IAE1L,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,UAAU,CACzB,CACP,CACJ,CACJ,CACJ,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { state } from \"../../store\";\r\n\r\n@Component({\r\n    tag: \"tutorial-component\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class TutorialComponent {\r\n    @Prop()\r\n    onClose: () => void;\r\n    @Prop()\r\n    title?: string;\r\n    @Prop()\r\n    description?: string;\r\n    @Prop()\r\n    videoSource?: string;\r\n\r\n    private handleCloseTutorial = () => {\r\n        if (this.onClose) {\r\n            this.onClose();\r\n        }\r\n    };\r\n\r\n    render() {\r\n        const t = getLanguageStrings(state.settings.language);\r\n\r\n        // Use provided props or fall back to default values\r\n        const tutorialTitle = this.title || t.mapDraw.tutorial.title;\r\n        const tutorialDescription = this.description ||\r\n            t.mapDraw.tutorial.description;\r\n        const videoSrc = this.videoSource || \"/assets/videos/tutorial1.mp4\";\r\n\r\n        return (\r\n            <div class=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\r\n                {/* Backdrop */}\r\n                <div\r\n                    class=\"absolute inset-0\"\r\n                    style={{\r\n                        backgroundColor: \"rgba(0, 0, 0, 0.5)\",\r\n                    }}\r\n                />\r\n\r\n                {/* Scrollable content container */}\r\n                <div class=\"relative z-10 w-full max-w-2xl max-h-full overflow-y-auto\">\r\n                    <div class=\"flex flex-col gap-4 bg-primary rounded-4xl p-6\">\r\n                        {/* Title and Description */}\r\n                        <div class=\"w-full text-center space-y-4\">\r\n                            <h2 class=\"text-2xl font-bold text-secondary\">\r\n                                {tutorialTitle}\r\n                            </h2>\r\n                            <p class=\"text-text-secondary\">\r\n                                {tutorialDescription}\r\n                            </p>\r\n                        </div>\r\n\r\n                        {/* Tutorial Video Container */}\r\n                        <div class=\"flex items-start justify-center bg-primary rounded-4xl\">\r\n                            <div class=\"relative flex items-center justify-center rounded-4xl bg-secondary overflow-hidden w-64 h-64\">\r\n                                <video\r\n                                    class=\"w-full h-full object-contain rounded-4xl pointer-events-none\"\r\n                                    autoplay\r\n                                    muted\r\n                                    loop\r\n                                    playsinline\r\n                                    style={{\r\n                                        aspectRatio: \"1/1\",\r\n                                    }}\r\n                                >\r\n                                    <source\r\n                                        src={videoSrc}\r\n                                        type=\"video/mp4\"\r\n                                    />\r\n                                    Your browser does not support the video tag.\r\n                                </video>\r\n                            </div>\r\n                        </div>\r\n\r\n                        {/* Close Button */}\r\n                        <div class=\"w-full flex justify-center\">\r\n                            <button\r\n                                onClick={this.handleCloseTutorial}\r\n                                class=\"px-6 py-3 bg-tertiary text-white rounded-lg font-medium hover:bg-tertiary/80 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-tertiary focus:ring-offset-0\"\r\n                            >\r\n                                {t.mapDraw.tutorial.understood}\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/dist/collection/components/settings/settings.js

@@ -0,0 +1,127 @@
+import { h } from "@stencil/core";
+import { state } from "../../store";
+import { getLanguageStrings } from "../../utils/lang/general";
+export class SettingsModal {
+    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: '86e2e853f3ae4fc186e301f088fa2f51ed21eb96', class: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" }, h("div", { key: 'ecbc4afefad160dd8817d0fc236398d50307fd5f', class: "bg-primary rounded-4xl p-6 w-full max-w-md" }, h("div", { key: '26db379fce6ea21297ef5637378cb8d45e65c632', class: "flex justify-between items-center mb-6" }, h("h2", { key: 'edffc0b3e2e5bd2b63a939a5e7bd859ee6544565', class: "text-xl font-semibold" }, "Settings"), h("button", { key: '1ec7763b94b8cab41086f56fcd3436cdb09d4100', class: "p-2 hover:bg-hover rounded-full transition-colors", onClick: this.handleClose }, h("svg", { key: 'a2b4082236931c900c39dafc638d4eead0545f31', 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: '8f5a732d61e4858f14c598cba60eb0e9503b6154', x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { key: 'bc1f1e063fe710bb386952c01fc7248d1480583c', x1: "6", y1: "6", x2: "18", y2: "18" })))), h("div", { key: '22202217c1a00baf20781dc6a55ef534b0d54248', class: "space-y-4" }, h("div", { key: '0d900965d565e5339513885777faa16778d16fba' }, h("h3", { key: 'df440a1e1cc685bc7034c12abe22ab58631dc39b', class: "text-sm font-medium text-text-muted mb-1" }, "Debug Information"), h("p", { key: '1b2490b4fe7ab72f1ce00129972c8b2a1c68e98a', class: "text-sm text-text-muted mb-1" }, "state: ", JSON.stringify(state, null, 2)), h("p", { key: '02f856480ed33470efbe5a8315dbca9b5a7a77fa', class: "text-sm text-text-muted mb-1" }, navigator.userAgent), h("p", { key: '7c54fd31d753d17ec97a62d71743efe04a89adb3', class: "text-sm text-text-muted mb-1" }, navigator.userAgent.indexOf("Safari")), h("p", { key: '593a28bae68b1ee15f3f86e744a12e984ca02a37', class: "text-sm text-text-muted mb-1" }, "maxTouchPoints: ", navigator.maxTouchPoints), h("p", { key: '896bfdcae3012911e364718aaeb7a91edd367ad3', class: "text-sm text-text-muted mb-1" }, "iPhone: ", navigator.userAgent.indexOf("iPhone")), h("p", { key: '37633d9ec6303d386745742f50b9f583e966ebf6', class: "text-sm text-text-muted mb-1" }, "Mac OS: ", navigator.userAgent.indexOf("Mac OS"))), h("div", { key: '4d007f8d19fe1b3b95f80b92850fbfd6db55d656' }, h("label", { key: '1b2447f96a44ba2d1d8d0184a09a9b77106e0679', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.language), h("select", { key: '64dc07edfff00c017bb10c01b7940f3413a111d6', class: "w-full bg-muted rounded-4xl p-2", onInput: (e) => this.handleInputChange("language", e.target
+                .value) }, h("option", { key: '13e54cf9f9b27ca9bf9b9ab01ca7ee9b91887d75', value: "en", selected: this.tempSettings.language ===
+                "en" }, "English"), h("option", { key: 'abccf307e6c730659a2d68bbf8432ad7dad7a9d9', value: "es", selected: this.tempSettings.language ===
+                "es" }, "Espa\u00F1ol"), h("option", { key: '0f6e16122daace282c5ef3426ecc5875a323c9a4', value: "de", selected: this.tempSettings.language ===
+                "de" }, "Deutsch"))), h("div", { key: '33a2256b3b6000dbace5ce05baf5f535a7a3de9c' }, h("label", { key: 'b22ffcb5bd477c8298d34b2a905475d5c5aadaba', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.rowSpacing), h("input", { key: '91672a7397a83f11f3711d1ab8f52e5626b8e09f', 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: 'deee24a2c07fbdf4a852ba5566087a11242ee1b9' }, h("label", { key: '5384d7f0877af2b94b21f610628a410fec60d017', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.columnSpacing), h("input", { key: '17be549e097c08ae9bde1bc4f00154963b71ea33', 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: '026f0919812b1a45d8daba4aa71730c4b171d8a1' }, h("label", { key: '912d5ac6b6b188b29864d85af180044d551efc36', class: "block text-sm font-medium text-text-muted mb-1" }, t.settings.borderInset), h("input", { key: '8d6970dc513500a524b4fc0e825c55f51f8a47ee', 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: 'ecd39b394ee608569a097305a85a197da04f41b9', class: "flex justify-end gap-4 mt-6" }, h("button", { key: '3b696ab9a2120619bd0f6b34f0c0baa9807b6a0d', class: "px-4 py-2 bg-surface rounded-4xl hover:bg-surface-hover transition-colors", onClick: this.handleClose }, "Cancel"), h("button", { key: '1c74e08866a5888acd29abd31a07149a58e41e1b', class: "px-4 py-2 bg-secondary text-muted rounded-4xl hover:bg-text-secondary transition-colors", onClick: this.handleSave }, "Save Changes")))));
+    }
+    static get is() { return "settings-modal"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../output.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../output.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "settings": {
+                "type": "unknown",
+                "attribute": "settings",
+                "mutable": false,
+                "complexType": {
+                    "original": "Settings",
+                    "resolved": "Settings",
+                    "references": {
+                        "Settings": {
+                            "location": "import",
+                            "path": "../../store",
+                            "id": "src/store.ts::Settings"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "tempSettings": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "close",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "save",
+                "name": "save",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Settings",
+                    "resolved": "Settings",
+                    "references": {
+                        "Settings": {
+                            "location": "import",
+                            "path": "../../store",
+                            "id": "src/store.ts::Settings"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=settings.js.map