kritzel-stencil 0.0.140 → 0.0.141

package/dist/components/{p-bC64Ng59.js → p-ByAzDzS5.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-BYanlgdq.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-C9hrbrUN.js';
 import { K as KritzelMouseButton } from './p-D8W6LE-c.js';
 
 const kritzelCursorTrailCss = ":host{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:9000}";
@@ -114,6 +114,6 @@ function defineCustomElement() {
 }
 
 export { KritzelCursorTrail as K, defineCustomElement as d };
-//# sourceMappingURL=p-bC64Ng59.js.map
+//# sourceMappingURL=p-ByAzDzS5.js.map
 
-//# sourceMappingURL=p-bC64Ng59.js.map
+//# sourceMappingURL=p-ByAzDzS5.js.map

package/dist/components/{p-bC64Ng59.js.map → p-ByAzDzS5.js.map}

@@ -1 +1 @@
-{"file":"p-bC64Ng59.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/core/kritzel-cursor-trail/kritzel-cursor-trail.css?tag=kritzel-cursor-trail&encapsulation=shadow","src/components/core/kritzel-cursor-trail/kritzel-cursor-trail.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100vw;\r\n  height: 100vh;\r\n  pointer-events: none;\r\n  z-index: 9000;\r\n}\r\n","import { Component, Host, Listen, Prop, State, h } from '@stencil/core';\r\nimport { KritzelMouseButton } from '../../../enums/event-button.enum';\r\nimport { KritzelCore } from '../../../classes/core/core.class';\r\n\r\n@Component({\r\n  tag: 'kritzel-cursor-trail',\r\n  styleUrl: 'kritzel-cursor-trail.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelCursorTrail {\r\n  @Prop() core: KritzelCore;\r\n\r\n  @State() cursorTrailPoints: Array<{ x: number; y: number; timestamp: number }> = [];\r\n  @State() isLeftButtonDown: boolean = false;\r\n\r\n  @Listen('pointerdown', { target: 'window', passive: true })\r\n  handleMouseDown(ev: PointerEvent) {\r\n    if (ev.pointerType === 'mouse') {\r\n      if (ev.button === KritzelMouseButton.Left) {\r\n        this.isLeftButtonDown = true;\r\n        this.cursorTrailPoints = [];\r\n      }\r\n    }\r\n\r\n    if (ev.pointerType === 'touch') {\r\n      if (this.core.store.state.pointers.size === 1) {\r\n        this.isLeftButtonDown = true;\r\n        this.cursorTrailPoints = [];\r\n      }\r\n    }\r\n  }\r\n\r\n  @Listen('pointermove', { target: 'window', passive: true })\r\n  handlePointerMove(ev: PointerEvent) {\r\n    if (!this.isLeftButtonDown) {\r\n      return;\r\n    }\r\n    const newPoint = { x: ev.clientX, y: ev.clientY, timestamp: Date.now() };\r\n    const updatedTrail = [newPoint, ...this.cursorTrailPoints];\r\n    if (updatedTrail.length > this.MAX_TRAIL_POINTS) {\r\n      this.cursorTrailPoints = updatedTrail.slice(0, this.MAX_TRAIL_POINTS);\r\n    } else {\r\n      this.cursorTrailPoints = updatedTrail;\r\n    }\r\n  }\r\n\r\n  @Listen('pointerup', { target: 'window', passive: true })\r\n  handlePointerUp(ev: PointerEvent) {\r\n    if (ev.pointerType === 'mouse') {\r\n      if (ev.button === KritzelMouseButton.Left) {\r\n        this.isLeftButtonDown = false;\r\n        this.cursorTrailPoints = [];\r\n      }\r\n    }\r\n\r\n    if (ev.pointerType === 'touch') {\r\n      if (this.core.store.state.pointers.size === 0) {\r\n        this.isLeftButtonDown = false;\r\n        this.cursorTrailPoints = [];\r\n      }\r\n    }\r\n  }\r\n\r\n  private trailCleanupIntervalId: number;\r\n\r\n  private readonly TRAIL_DURATION_MS = 100;\r\n\r\n  private readonly MAX_TRAIL_POINTS = 50;\r\n\r\n  componentDidLoad() {\r\n    this.trailCleanupIntervalId = window.setInterval(() => {\r\n      const now = Date.now();\r\n      const newTrailPoints = this.cursorTrailPoints.filter(p => now - p.timestamp < this.TRAIL_DURATION_MS);\r\n      if (newTrailPoints.length !== this.cursorTrailPoints.length) {\r\n        this.cursorTrailPoints = newTrailPoints;\r\n      }\r\n    }, 50);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    if (this.trailCleanupIntervalId) {\r\n      window.clearInterval(this.trailCleanupIntervalId);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        {this.cursorTrailPoints.length > 1 && (\r\n          <svg\r\n            class=\"cursor-trail-svg\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            style={{\r\n              position: 'absolute',\r\n              left: '0',\r\n              top: '0',\r\n              width: '100%',\r\n              height: '100%',\r\n              pointerEvents: 'none',\r\n              opacity: 'var(--kritzel-cursor-trail-opacity, 0.6)',\r\n              zIndex: '9000',\r\n            }}\r\n          >\r\n            {this.cursorTrailPoints.slice(1).map((point, index) => {\r\n              const prevPoint = this.cursorTrailPoints[index];\r\n              const now = Date.now();\r\n              const age = now - point.timestamp;\r\n              const progress = Math.max(0, Math.min(1, age / this.TRAIL_DURATION_MS));\r\n\r\n              if (progress >= 1) return null;\r\n\r\n              const baseStrokeWidth = Math.max(2, 15 * (1 - progress));\r\n\r\n              return (\r\n                <line\r\n                  key={`trail-segment-${point.timestamp}`}\r\n                  x1={prevPoint.x.toString()}\r\n                  y1={prevPoint.y.toString()}\r\n                  x2={point.x.toString()}\r\n                  y2={point.y.toString()}\r\n                  stroke=\"var(--kritzel-cursor-trail-color, rgb(228, 228, 228))\"\r\n                  stroke-width={baseStrokeWidth.toString()}\r\n                  stroke-linecap=\"round\"\r\n                />\r\n              );\r\n            })}\r\n          </svg>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-ByAzDzS5.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/core/kritzel-cursor-trail/kritzel-cursor-trail.css?tag=kritzel-cursor-trail&encapsulation=shadow","src/components/core/kritzel-cursor-trail/kritzel-cursor-trail.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100vw;\r\n  height: 100vh;\r\n  pointer-events: none;\r\n  z-index: 9000;\r\n}\r\n","import { Component, Host, Listen, Prop, State, h } from '@stencil/core';\r\nimport { KritzelMouseButton } from '../../../enums/event-button.enum';\r\nimport { KritzelCore } from '../../../classes/core/core.class';\r\n\r\n@Component({\r\n  tag: 'kritzel-cursor-trail',\r\n  styleUrl: 'kritzel-cursor-trail.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelCursorTrail {\r\n  @Prop() core: KritzelCore;\r\n\r\n  @State() cursorTrailPoints: Array<{ x: number; y: number; timestamp: number }> = [];\r\n  @State() isLeftButtonDown: boolean = false;\r\n\r\n  @Listen('pointerdown', { target: 'window', passive: true })\r\n  handleMouseDown(ev: PointerEvent) {\r\n    if (ev.pointerType === 'mouse') {\r\n      if (ev.button === KritzelMouseButton.Left) {\r\n        this.isLeftButtonDown = true;\r\n        this.cursorTrailPoints = [];\r\n      }\r\n    }\r\n\r\n    if (ev.pointerType === 'touch') {\r\n      if (this.core.store.state.pointers.size === 1) {\r\n        this.isLeftButtonDown = true;\r\n        this.cursorTrailPoints = [];\r\n      }\r\n    }\r\n  }\r\n\r\n  @Listen('pointermove', { target: 'window', passive: true })\r\n  handlePointerMove(ev: PointerEvent) {\r\n    if (!this.isLeftButtonDown) {\r\n      return;\r\n    }\r\n    const newPoint = { x: ev.clientX, y: ev.clientY, timestamp: Date.now() };\r\n    const updatedTrail = [newPoint, ...this.cursorTrailPoints];\r\n    if (updatedTrail.length > this.MAX_TRAIL_POINTS) {\r\n      this.cursorTrailPoints = updatedTrail.slice(0, this.MAX_TRAIL_POINTS);\r\n    } else {\r\n      this.cursorTrailPoints = updatedTrail;\r\n    }\r\n  }\r\n\r\n  @Listen('pointerup', { target: 'window', passive: true })\r\n  handlePointerUp(ev: PointerEvent) {\r\n    if (ev.pointerType === 'mouse') {\r\n      if (ev.button === KritzelMouseButton.Left) {\r\n        this.isLeftButtonDown = false;\r\n        this.cursorTrailPoints = [];\r\n      }\r\n    }\r\n\r\n    if (ev.pointerType === 'touch') {\r\n      if (this.core.store.state.pointers.size === 0) {\r\n        this.isLeftButtonDown = false;\r\n        this.cursorTrailPoints = [];\r\n      }\r\n    }\r\n  }\r\n\r\n  private trailCleanupIntervalId: number;\r\n\r\n  private readonly TRAIL_DURATION_MS = 100;\r\n\r\n  private readonly MAX_TRAIL_POINTS = 50;\r\n\r\n  componentDidLoad() {\r\n    this.trailCleanupIntervalId = window.setInterval(() => {\r\n      const now = Date.now();\r\n      const newTrailPoints = this.cursorTrailPoints.filter(p => now - p.timestamp < this.TRAIL_DURATION_MS);\r\n      if (newTrailPoints.length !== this.cursorTrailPoints.length) {\r\n        this.cursorTrailPoints = newTrailPoints;\r\n      }\r\n    }, 50);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    if (this.trailCleanupIntervalId) {\r\n      window.clearInterval(this.trailCleanupIntervalId);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        {this.cursorTrailPoints.length > 1 && (\r\n          <svg\r\n            class=\"cursor-trail-svg\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            style={{\r\n              position: 'absolute',\r\n              left: '0',\r\n              top: '0',\r\n              width: '100%',\r\n              height: '100%',\r\n              pointerEvents: 'none',\r\n              opacity: 'var(--kritzel-cursor-trail-opacity, 0.6)',\r\n              zIndex: '9000',\r\n            }}\r\n          >\r\n            {this.cursorTrailPoints.slice(1).map((point, index) => {\r\n              const prevPoint = this.cursorTrailPoints[index];\r\n              const now = Date.now();\r\n              const age = now - point.timestamp;\r\n              const progress = Math.max(0, Math.min(1, age / this.TRAIL_DURATION_MS));\r\n\r\n              if (progress >= 1) return null;\r\n\r\n              const baseStrokeWidth = Math.max(2, 15 * (1 - progress));\r\n\r\n              return (\r\n                <line\r\n                  key={`trail-segment-${point.timestamp}`}\r\n                  x1={prevPoint.x.toString()}\r\n                  y1={prevPoint.y.toString()}\r\n                  x2={point.x.toString()}\r\n                  y2={point.y.toString()}\r\n                  stroke=\"var(--kritzel-cursor-trail-color, rgb(228, 228, 228))\"\r\n                  stroke-width={baseStrokeWidth.toString()}\r\n                  stroke-linecap=\"round\"\r\n                />\r\n              );\r\n            })}\r\n          </svg>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-CE_sOMS2.js → p-BycHaC-9.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BYanlgdq.js';
-import { d as defineCustomElement$1 } from './p-C7UWRUAy.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-C9hrbrUN.js';
+import { d as defineCustomElement$1 } from './p-CGb-8cK4.js';
 
 const kritzelFontSizeCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:4px;cursor:pointer;border:2px solid transparent;box-sizing:border-box;border-radius:50%}.size-container:hover{background-color:var(--kritzel-font-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-font-size-selected-background-color, #e0e0e0)}";
 
@@ -52,6 +52,6 @@ function defineCustomElement() {
 }
 
 export { KritzelFontSize as K, defineCustomElement as d };
-//# sourceMappingURL=p-CE_sOMS2.js.map
+//# sourceMappingURL=p-BycHaC-9.js.map
 
-//# sourceMappingURL=p-CE_sOMS2.js.map
+//# sourceMappingURL=p-BycHaC-9.js.map

package/dist/components/{p-CE_sOMS2.js.map → p-BycHaC-9.js.map}

@@ -1 +1 @@
-{"file":"p-CE_sOMS2.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,4hBAA4hB;;MCO1iB,eAAe,iBAAAA,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;;;;;;;;;AAClB,IAAA,KAAK,GAAa,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;IACxB,YAAY,GAAkB,IAAI;IAEnD,UAAU,GAAW,OAAO;AAE3B,IAAA,UAAU;AAEX,IAAA,eAAe,CAAC,IAAY,EAAA;AAClC,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI;AACxB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;;IAG5B,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EACF,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAClB,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE;AACL,gBAAA,gBAAgB,EAAE,IAAI;AACtB,gBAAA,UAAU,EAAE,IAAI,CAAC,YAAY,KAAK,IAAI;AACvC,aAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAA,EAEzC,CAAA,CAAA,cAAA,EAAA,EAAc,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,GAAiB,CAClE,CACP,CAAC,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-font-size/kritzel-font-size.css?tag=kritzel-font-size&encapsulation=shadow","src/components/shared/kritzel-font-size/kritzel-font-size.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  gap: 8px;\r\n  padding: 8px;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.size-container {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 4px;\r\n  cursor: pointer;\r\n  border: 2px solid transparent;\r\n  box-sizing: border-box;\r\n  border-radius: 50%;\r\n}\r\n\r\n.size-container:hover {\r\n  background-color: var(--kritzel-font-size-hover-background-color, #ebebeb);\r\n}\r\n\r\n.size-container.selected {\r\n  border-color: var(--kritzel-selection-border-color, #007AFF);\r\n  background-color: var(--kritzel-font-size-selected-background-color, #e0e0e0);\r\n}\r\n\r\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kritzel-font-size',\r\n  styleUrl: 'kritzel-font-size.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelFontSize {\r\n  @Prop() sizes: number[] = [8, 10, 12, 16, 20, 24];\r\n  @Prop({ mutable: true }) selectedSize: number | null = null;\r\n\r\n  @Prop() fontFamily: string = 'Arial';\r\n\r\n  @Event() sizeChange: EventEmitter<number>;\r\n\r\n  private handleSizeClick(size: number) {\r\n    this.selectedSize = size;\r\n    this.sizeChange.emit(size);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        {this.sizes.map(size => (\r\n          <div\r\n            class={{\r\n              'size-container': true,\r\n              'selected': this.selectedSize === size,\r\n            }}\r\n            onClick={() => this.handleSizeClick(size)}\r\n          >\r\n            <kritzel-font fontFamily={this.fontFamily} size={size}></kritzel-font>\r\n          </div>\r\n        ))}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-BycHaC-9.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,4hBAA4hB;;MCO1iB,eAAe,iBAAAA,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;;;;;;;;;AAClB,IAAA,KAAK,GAAa,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;IACxB,YAAY,GAAkB,IAAI;IAEnD,UAAU,GAAW,OAAO;AAE3B,IAAA,UAAU;AAEX,IAAA,eAAe,CAAC,IAAY,EAAA;AAClC,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI;AACxB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;;IAG5B,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EACF,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAClB,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE;AACL,gBAAA,gBAAgB,EAAE,IAAI;AACtB,gBAAA,UAAU,EAAE,IAAI,CAAC,YAAY,KAAK,IAAI;AACvC,aAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAA,EAEzC,CAAA,CAAA,cAAA,EAAA,EAAc,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,GAAiB,CAClE,CACP,CAAC,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-font-size/kritzel-font-size.css?tag=kritzel-font-size&encapsulation=shadow","src/components/shared/kritzel-font-size/kritzel-font-size.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  gap: 8px;\r\n  padding: 8px;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.size-container {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 4px;\r\n  cursor: pointer;\r\n  border: 2px solid transparent;\r\n  box-sizing: border-box;\r\n  border-radius: 50%;\r\n}\r\n\r\n.size-container:hover {\r\n  background-color: var(--kritzel-font-size-hover-background-color, #ebebeb);\r\n}\r\n\r\n.size-container.selected {\r\n  border-color: var(--kritzel-selection-border-color, #007AFF);\r\n  background-color: var(--kritzel-font-size-selected-background-color, #e0e0e0);\r\n}\r\n\r\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kritzel-font-size',\r\n  styleUrl: 'kritzel-font-size.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelFontSize {\r\n  @Prop() sizes: number[] = [8, 10, 12, 16, 20, 24];\r\n  @Prop({ mutable: true }) selectedSize: number | null = null;\r\n\r\n  @Prop() fontFamily: string = 'Arial';\r\n\r\n  @Event() sizeChange: EventEmitter<number>;\r\n\r\n  private handleSizeClick(size: number) {\r\n    this.selectedSize = size;\r\n    this.sizeChange.emit(size);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        {this.sizes.map(size => (\r\n          <div\r\n            class={{\r\n              'size-container': true,\r\n              'selected': this.selectedSize === size,\r\n            }}\r\n            onClick={() => this.handleSizeClick(size)}\r\n          >\r\n            <kritzel-font fontFamily={this.fontFamily} size={size}></kritzel-font>\r\n          </div>\r\n        ))}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-BV5iL9W6.js → p-C4nj29RW.js}

@@ -1,12 +1,12 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BYanlgdq.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-C9hrbrUN.js';
 import { K as KritzelMouseButton } from './p-D8W6LE-c.js';
-import { e as KritzelBaseObject, f as KritzelBaseCommand, g as KritzelBaseTool, h as KritzelEventHelper, c as KritzelTextTool, b as KritzelBrushTool, K as KritzelText, a as KritzelPath, A as AddObjectCommand, i as KritzelToolRegistry, U as UpdateObjectCommand, d as KritzelKeyboardHelper } from './p-C5sTCwe3.js';
+import { e as KritzelBaseObject, f as KritzelBaseCommand, g as KritzelBaseTool, h as KritzelEventHelper, c as KritzelTextTool, b as KritzelBrushTool, K as KritzelText, a as KritzelPath, A as AddObjectCommand, i as KritzelToolRegistry, U as UpdateObjectCommand, d as KritzelKeyboardHelper } from './p-BuDVaqTF.js';
 import { K as KritzelWorkspace } from './p-YqK8ch2R.js';
-import { K as KritzelContextMenu, d as defineCustomElement$3 } from './p-C-ozL_Es.js';
+import { K as KritzelContextMenu, d as defineCustomElement$3 } from './p-DqsgZIHC.js';
 import { O as ObjectHelper } from './p-B0kd2rUI.js';
 import { K as KritzelDevicesHelper } from './p-l10It7Nm.js';
-import { d as defineCustomElement$2 } from './p-bC64Ng59.js';
-import { d as defineCustomElement$1 } from './p-sq9jgfX0.js';
+import { d as defineCustomElement$2 } from './p-ByAzDzS5.js';
+import { d as defineCustomElement$1 } from './p-D27d2rKT.js';
 
 class KritzelImage extends KritzelBaseObject {
     __class__ = 'KritzelImage';
@@ -1714,8 +1714,8 @@ class KritzelKeyHandler extends KritzelBaseHandler {
         },
         { key: 'v', ctrl: true, condition: c => !!c.store.state.copiedObjects && !c.store.state.activeText, action: c => c.paste() },
         // Text editing
-        { key: 'a', ctrl: true, condition: c => !!c.store.state.activeText, action: c => c.store.state.activeText.selectAll() },
-        { key: 'v', ctrl: true, condition: c => !!c.store.state.activeText, action: c => c.store.state.activeText.insertFromClipboard() },
+        // { key: 'a', ctrl: true, condition: c => !!c.store.state.activeText, action: c => c.store.state.activeText.selectAll() },
+        // { key: 'v', ctrl: true, condition: c => !!c.store.state.activeText, action: c => c.store.state.activeText.insertFromClipboard() },
         // Object layering
         { key: '+', ctrl: true, condition: c => !!c.store.state.selectionGroup, action: c => c.bringForward() },
         { key: '-', ctrl: true, condition: c => !!c.store.state.selectionGroup, action: c => c.sendBackward() },
@@ -2674,8 +2674,15 @@ class KritzelCore {
         this.rerender();
     }
     resetActiveText() {
-        if (this._store.state.activeText && this._store.state.activeText.value === ' ') {
-            this.deleteObject(this._store.state.activeText.id, true);
+        if (this._store.state.activeText) {
+            if (this._store.state.activeText.isEmpty) {
+                console.log('Deleting empty text object', this._store.state.activeText.id);
+                this.deleteObject(this._store.state.activeText.id, true);
+            }
+            else {
+                console.log('Saving active text object before resetting', this._store.state.activeText.id);
+                this._store.state.activeText.save();
+            }
         }
         this._store.state.activeText = null;
     }
@@ -2732,7 +2739,7 @@ class KritzelCore {
     }
 }
 
-const kritzelEngineCss = ":host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}textarea{all:unset;box-sizing:border-box;outline:none !important;border:none !important;overflow:visible}.resize-handle-overlay.top-left,.resize-handle-overlay.bottom-right{cursor:nwse-resize}.resize-handle-overlay.top-right,.resize-handle-overlay.bottom-left{cursor:nesw-resize}.rotation-handle-overlay{cursor:grab}";
+const kritzelEngineCss = ":host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.ProseMirror{outline:none}p{margin:0;padding:0}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}.resize-handle-overlay.top-left,.resize-handle-overlay.bottom-right{cursor:nwse-resize}.resize-handle-overlay.top-right,.resize-handle-overlay.bottom-left{cursor:nesw-resize}.rotation-handle-overlay{cursor:grab}.PlaygroundEditorTheme__quote{margin:0;margin-left:20px;margin-bottom:10px;font-size:15px;color:rgb(101, 103, 107);border-left-color:rgb(206, 208, 212);border-left-width:4px;border-left-style:solid;padding-left:16px}";
 
 const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine extends H {
     get host() { return this; }
@@ -3042,9 +3049,9 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
         const baseHandleSize = parseFloat(baseHandleSizePx);
         const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
-        const viewportCenterX = (this.core.store.state.viewportWidth / 2) + this.core.store.state.translateX;
-        const viewportCenterY = (this.core.store.state.viewportHeight / 2) + this.core.store.state.translateY;
-        return (h(Host, { key: 'e14b9b0d5ece944a28dbdfd55cd15d3889d344ca' }, h("div", { key: '5bb0cf225392a46c81ccc3fc9cecf08ccf5451dd', class: "debug-panel", style: { display: this.core.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '49c54b5c2cf67a3bf98319a87cc6bf43738e260a' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: 'c094fbdee828a5699901e5ba09981fdd2970533a' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '0b260c50045a2dc90f5131bdec5007c5260f435f' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: '36ac3660b4dbc902cc6ec4c042f63b03a8b5f38e' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '4d74e2b8b8df35a8f2423e8210662d614e98c9f3' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '2c583b35f9b975191bd30f5bcc44a847d442a75b' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: 'b8f4de7566c250e637f7fb161ee5d4afcf55a862' }, "Scale: ", this.core.store.state?.scale), h("div", { key: '615063733b8a598d24c090397cbda94196f77861' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '66f5d805c6a824bccef568b137a4674007050a1e' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '91f0313f2cfbc7f123be53d8611d0e5f3cfadfae' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: '944af3ec28b0e7dcf4696477adbd3182d2371196' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '82cfb1b949a3612f786a2d41074286996c9b18e7' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '743ced0847a98b34c404216e888fc24445e291d5' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '56f7de0f7eb99ee11f4e9c30f14b961c6498415a' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '41c55a52a4a3cb1a04e0bb0249e7095a57c52f78' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: 'f02fbeae6e0e0cb9aca887314f4a5753712373fa' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '1ff7b7f138a51c5cc16894483c908f7bde31be40' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '25b4a1c609dc968e70636fcf73d330996a137342' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: 'd9de8d6553664633a0462130ee71fbbb80984ff4' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: '3f7d3604c3da89fc3c98fb4704474d41773a51fa' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: 'e32a4265b7ca234766e4ceb5d98c7898917423ef' }, "SelectedObjects: ", this.core.store.state.selectionGroup?.objects.length || 0), h("div", { key: 'c0d4bd0aab851c1ab4c1b1d2fd99db7397538dcd' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")")), h("div", { key: '47cdf9bd5ae9e88ac39376852b4fcf8ebbf44626', id: "origin", class: "origin", style: {
+        const viewportCenterX = this.core.store.state.viewportWidth / 2 + this.core.store.state.translateX;
+        const viewportCenterY = this.core.store.state.viewportHeight / 2 + this.core.store.state.translateY;
+        return (h(Host, { key: 'caabd1ecbf2faccdf7fa50d087a8957df4dd1039' }, h("div", { key: 'd757e7133ed9dd190c17c383fb716f760f2b3906', class: "debug-panel", style: { display: this.core.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '00ced12dd956b6eecff7ac80429c0fd05cc7d1c3' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '771f3269627fbe1ef962027f017cf6bdec7bcf8f' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '0e49a60afdfb776a61f46b53bd6488786778bf77' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: 'e0438479bc9e950ef2cbe88ed0aa0b8ec1888890' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '41d7261ed6b893a97fefb4bb6b199ffea51bd5fe' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '7b6470008968eeebc5097252b3b9e3d172fd5d22' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: '4012ebdc3234ee2775021b38f385dfa0917736cb' }, "Scale: ", this.core.store.state?.scale), h("div", { key: '964d26a0ff4ff93dfa1cc928330c4fbdb0ec9b3d' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: 'cd68a81778d3e0f83f9453cd813538b2223541e8' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '2ea80f3b4216a5e3d727c6c94d8b1782fbde80eb' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: '02966d69182e95a8e91d5252f3dcfc19237caafd' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '85c06265f3af2b793d1827a40bb74b8837690ce3' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '1a2847a815fabc37cae3b7659844975df0c79a81' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: 'd1482aa165ed6b430ec0e640971c47e233103e87' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '3534e455918183d822374edbc80b621939100bd1' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '7b061a4b08956660ee305316eea2e1d13d66d5de' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '61998d0f4ffc65f5bb155dfe434a3a07667ca5ee' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: 'bdaeb0af59e844351eb46caf7bbe7e246174ccfe' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: '47518514eb67c486583ee61e6747104b4720924a' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: '9b2ef1c30ecb09bc7df7f765e099f87ea836d697' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '72a65218942809918fb5fa1978af83f9442c3ed8' }, "SelectedObjects: ", this.core.store.state.selectionGroup?.objects.length || 0), h("div", { key: '1f2ad6b79f28306becd7e83f21ca877c7d15941d' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")")), h("div", { key: 'ae8afa17ce2a1c0a06a3579091d6f1616fe9b9a7', id: "origin", class: "origin", style: {
                 transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
             } }, this.core.store.state.objectsMap.allObjects()?.map(object => {
             return (h("div", { key: object.id, style: {
@@ -3082,22 +3089,16 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                     height: '100%',
                     userSelect: 'none',
                     pointerEvents: 'none',
-                }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("textarea", { ref: el => (el ? object.mount(el) : object.unmount()), value: object.value, onKeyDown: event => object.handleKeyDown(event), onInput: event => object.handleInput(event), rows: object.rows, style: {
-                    width: '100%',
-                    height: '100%',
-                    color: object.fontColor,
-                    fontSize: object.fontSize?.toString() + 'px',
-                    fontFamily: object.fontFamily,
-                    border: 'none',
-                    outline: 'none',
-                    resize: 'none',
-                    overflow: 'hidden',
-                    display: 'block',
-                    padding: '1px',
-                    whiteSpace: 'nowrap',
-                    pointerEvents: object.isReadonly ? 'none' : 'auto',
-                    cursor: object.isReadonly ? 'default' : 'text',
-                    caretColor: object.isReadonly ? 'transparent' : 'auto',
+                }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("div", { ref: el => (el ? object.mount(el) : object.unmount()), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
+                    minWidth: object.initialWidth + 'px',
+                    minHeight: object.initialHeight + 'px',
+                    maxWidth: '500px',
+                    height: 'auto',
+                    width: 'max-content',
+                    transformOrigin: 'top left',
+                    transform: `scale(${object.scaleFactor})`,
+                    backgroundColor: object.backgroundColor,
+                    overflow: 'visible'
                 } })), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", { ref: el => (el ? object.mount(el) : object.unmount()), style: {
                     width: '100%',
                     height: '100%',
@@ -3163,7 +3164,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                 transform: this.core.store.state.currentPath?.transformationMatrix,
                 transformOrigin: 'top left',
                 overflow: 'visible',
-            }, viewBox: this.core.store.state.currentPath?.viewBox }, h("path", { key: '318e360ef363dd90e613e2bc35233d6b045fe6df', d: this.core.store.state.currentPath?.d, fill: this.core.store.state.currentPath?.fill, stroke: this.core.store.state.currentPath?.stroke }))), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '455cd5c01932246ef318e83934b7869edd063a99', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.state.selectionGroup?.objects || [], style: {
+            }, viewBox: this.core.store.state.currentPath?.viewBox }, h("path", { key: '9428a1401021b38b8b811fd68af9e24d53301c08', d: this.core.store.state.currentPath?.d, fill: this.core.store.state.currentPath?.fill, stroke: this.core.store.state.currentPath?.stroke }))), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '1ccc963df66e4210886717644503be6304c6c99f', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.state.selectionGroup?.objects || [], style: {
                 position: 'fixed',
                 left: `${this.core.store.state.contextMenuX}px`,
                 top: `${this.core.store.state.contextMenuY}px`,
@@ -3174,7 +3175,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                     y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
                 }, this.core.store.state.selectionGroup?.objects);
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: 'a70d8765402f0938e9df4c1cc2f8c9a13dfa4445', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: '9b51e52c76f21be679491c21d1921d389d6619fc', core: this.core })));
     }
     static get watchers() { return {
         "workspace": ["onWorkspaceChange"],
@@ -3184,9 +3185,9 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     static get style() { return kritzelEngineCss; }
 }, [257, "kritzel-engine", {
         "workspace": [16],
-        "activeTool": [16, "active-tool"],
-        "globalContextMenuItems": [16, "global-context-menu-items"],
-        "objectContextMenuItems": [16, "object-context-menu-items"],
+        "activeTool": [16],
+        "globalContextMenuItems": [16],
+        "objectContextMenuItems": [16],
         "scaleMax": [1026, "scale-max"],
         "scaleMin": [1026, "scale-min"],
         "forceUpdate": [32],
@@ -3254,6 +3255,6 @@ function defineCustomElement() {
 }
 
 export { ABSOLUTE_SCALE_MAX as A, KritzelImage as K, KritzelEraserTool as a, KritzelImageTool as b, KritzelSelectionTool as c, KritzelEngine as d, defineCustomElement as e, ABSOLUTE_SCALE_MIN as f };
-//# sourceMappingURL=p-BV5iL9W6.js.map
+//# sourceMappingURL=p-C4nj29RW.js.map
 
-//# sourceMappingURL=p-BV5iL9W6.js.map
+//# sourceMappingURL=p-C4nj29RW.js.map