kritzel-stencil 0.4.24 → 0.4.26

package/dist/collection/components/core/kritzel-awareness-cursors/kritzel-awareness-cursors.css

@@ -1,115 +1,115 @@
-:host {
-  display: block;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.awareness-cursor {
-  position: absolute;
-  top: 0;
-  left: 0;
-  transition: transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,
-              opacity 300ms ease;
-  will-change: transform;
-}
-
-.awareness-cursor.stale {
-  opacity: 0;
-}
-
-.awareness-cursor.tracking-object {
-  transition-duration: 0ms;
-}
-
-.cursor-arrow {
-  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
-}
-
-.cursor-label {
-  position: absolute;
-  left: 16px;
-  top: 16px;
-  white-space: nowrap;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  font-size: var(--kritzel-awareness-cursor-label-font-size, 12px);
-  color: var(--kritzel-awareness-cursor-label-text-color, #ffffff);
-  padding: 2px 8px;
-  border-radius: 4px;
-  line-height: 1.4;
-  font-weight: 500;
-  pointer-events: none;
-  user-select: none;
-}
-
-.edge-indicator {
-  position: absolute;
-  top: -12px;
-  left: -12px;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,
-              opacity 300ms ease;
-  will-change: transform;
-  pointer-events: auto;
-  user-select: none;
-  cursor: pointer;
-}
-
-.edge-indicator.stale {
-  opacity: 0;
-}
-
-.edge-indicator.tracking-object {
-  transition-duration: 0ms;
-}
-
-.edge-arrow {
-  position: absolute;
-  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
-  transition: opacity 300ms ease;
-}
-
-.edge-arrow.stale {
-  opacity: 0;
-}
-
-.edge-label {
-  position: absolute;
-  white-space: nowrap;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  font-size: var(--kritzel-awareness-cursor-label-font-size, 12px);
-  color: var(--kritzel-awareness-cursor-label-text-color, #ffffff);
-  padding: 2px 8px;
-  border-radius: 4px;
-  line-height: 1.4;
-  font-weight: 500;
-  pointer-events: none;
-  opacity: 0;
-  transform-origin: center;
-  transition: opacity 150ms ease;
-}
-
-.edge-indicator:hover .edge-label {
-  opacity: 1;
-}
-
-.remote-selection-box {
-  position: absolute;
-  top: 0;
-  left: 0;
-  border-width: 2px;
-  border-style: solid;
-  pointer-events: none;
-  will-change: transform, width, height;
-  transition: transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,
-              width var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,
-              height var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out;
-}
+:host {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.awareness-cursor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,
+              opacity 300ms ease;
+  will-change: transform;
+}
+
+.awareness-cursor.stale {
+  opacity: 0;
+}
+
+.awareness-cursor.tracking-object {
+  transition-duration: 0ms;
+}
+
+.cursor-arrow {
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
+}
+
+.cursor-label {
+  position: absolute;
+  left: 16px;
+  top: 16px;
+  white-space: nowrap;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: var(--kritzel-awareness-cursor-label-font-size, 12px);
+  color: var(--kritzel-awareness-cursor-label-text-color, #ffffff);
+  padding: 2px 8px;
+  border-radius: 4px;
+  line-height: 1.4;
+  font-weight: 500;
+  pointer-events: none;
+  user-select: none;
+}
+
+.edge-indicator {
+  position: absolute;
+  top: -12px;
+  left: -12px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,
+              opacity 300ms ease;
+  will-change: transform;
+  pointer-events: auto;
+  user-select: none;
+  cursor: pointer;
+}
+
+.edge-indicator.stale {
+  opacity: 0;
+}
+
+.edge-indicator.tracking-object {
+  transition-duration: 0ms;
+}
+
+.edge-arrow {
+  position: absolute;
+  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
+  transition: opacity 300ms ease;
+}
+
+.edge-arrow.stale {
+  opacity: 0;
+}
+
+.edge-label {
+  position: absolute;
+  white-space: nowrap;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: var(--kritzel-awareness-cursor-label-font-size, 12px);
+  color: var(--kritzel-awareness-cursor-label-text-color, #ffffff);
+  padding: 2px 8px;
+  border-radius: 4px;
+  line-height: 1.4;
+  font-weight: 500;
+  pointer-events: none;
+  opacity: 0;
+  transform-origin: center;
+  transition: opacity 150ms ease;
+}
+
+.edge-indicator:hover .edge-label {
+  opacity: 1;
+}
+
+.remote-selection-box {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-width: 2px;
+  border-style: solid;
+  pointer-events: none;
+  will-change: transform, width, height;
+  transition: transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,
+              width var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,
+              height var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out;
+}

package/dist/collection/components/core/kritzel-awareness-cursors/kritzel-awareness-cursors.js

@@ -210,7 +210,7 @@ export class KritzelAwarenessCursors {
         void _ty;
         void this.objectVersion;
         const cursors = Array.from(this.remoteCursors.values());
-        return (h(Host, { key: 'b157f337127f7e5852acc0d6a246fa42e944a501' }, cursors.map(remoteCursor => {
+        return (h(Host, { key: '9be6694250bafe011be27301d1c7a53fc7957657' }, cursors.map(remoteCursor => {
             if (!remoteCursor.cursor)
                 return null;
             // When a remote user is actively drawing, derive cursor position from

package/dist/collection/components/core/kritzel-cursor-trail/kritzel-cursor-trail.css

@@ -1,10 +1,10 @@
-:host {
-  display: block;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  pointer-events: none;
-  z-index: 9000;
-}
+:host {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+  z-index: 9000;
+}

package/dist/collection/components/core/kritzel-cursor-trail/kritzel-cursor-trail.js

@@ -63,7 +63,7 @@ export class KritzelCursorTrail {
         }
     }
     render() {
-        return (h(Host, { key: 'cf2cf1c689bdc8ea393a7ea8f32698cfcdb0e375' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: 'df38c45537217982f7fb9513b954f3b0fa27acea', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
+        return (h(Host, { key: 'b427550b19a3e172cb25d05e34635121b82a61c5' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: '9685b563497e110f36c0feffbfde04ebeb38024b', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
                 position: 'absolute',
                 left: '0',
                 top: '0',

package/dist/collection/components/core/kritzel-editor/kritzel-editor.css

@@ -1,161 +1,161 @@
-kritzel-editor{
-  display: flex;
-  margin: 0;
-  position: relative;
-  container-type: inline-size;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  touch-action: manipulation;
-  user-select: none;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  text-align: start;
-  line-height: normal;
-}
-
-.editor-content {
-  position: absolute;
-  inset: 0;
-}
-
-.editor-content > kritzel-engine {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-}
-
-kritzel-controls {
-  position: absolute;
-  z-index: 1;
-  left: 0;
-  right: 0;
-  margin-inline: auto;
-  width: max-content;
-  max-width: calc(100% - 16px);
-  bottom: var(--kritzel-editor-controls-bottom, 14px);
-  transition: transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out);
-}
-
-kritzel-controls.keyboard-open {
-  transform: var(--kritzel-editor-controls-transform, translateY(300%));
-}
-
-.top-left-buttons {
-  position: absolute;
-  z-index: 1;
-  top: var(--kritzel-editor-top-left-buttons-top, 14px);
-  left: var(--kritzel-editor-top-left-buttons-left, 14px);
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-}
-
-.top-center-notification-layer {
-  position: absolute;
-  top: var(--kritzel-editor-top-center-notification-top, 14px);
-  left: 0;
-  right: 0;
-  z-index: var(--kritzel-editor-top-center-notification-z-index, 10001);
-  display: flex;
-  justify-content: center;
-  pointer-events: none;
-}
-
-.top-center-notification-container {
-  width: min(90vw, 420px);
-  pointer-events: auto;
-  animation: kritzel-notification-slide-in var(--kritzel-editor-notification-animation-duration, 220ms)
-    var(--kritzel-editor-notification-animation-easing, cubic-bezier(0.22, 1, 0.36, 1));
-}
-
-.top-center-notification-container.is-dismissing {
-  animation: kritzel-notification-fade-out var(--kritzel-editor-notification-dismiss-animation-duration, 180ms)
-    var(--kritzel-editor-notification-dismiss-animation-easing, ease-in) forwards;
-}
-
-@keyframes kritzel-notification-slide-in {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes kritzel-notification-fade-out {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  to {
-    opacity: 0;
-    transform: translateY(-6px);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .top-center-notification-container {
-    animation: none;
-  }
-}
-
-.top-right-buttons {
-  position: absolute;
-  z-index: 1;
-  top: var(--kritzel-editor-top-right-buttons-top, 14px);
-  right: var(--kritzel-editor-top-right-buttons-right, 14px);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.bottom-left-buttons {
-  position: absolute;
-  z-index: 1;
-  left: var(--kritzel-editor-top-left-buttons-left, 14px);
-  bottom: var(--kritzel-editor-controls-bottom, 14px);
-  display: flex;
-  align-items: flex-end;
-}
-
-/* Hide the zoom panel when the editor container is narrow. */
-@container (max-width: 767px) {
-  .bottom-left-buttons {
-    display: none;
-  }
-}
-
-.top-right-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 50px;
-  height: 50px;
-  padding: 0;
-  border: var(--kritzel-split-button-border, 1px solid #ebebeb);
-  border-radius: var(--kritzel-split-button-border-radius, 12px);
-  background-color: var(--kritzel-split-button-background-color, #ffffff);
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  box-shadow: var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
-  transition: background-color 150ms ease;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.top-right-button:hover {
-  background-color: #f5f5f5;
-}
-
-.top-right-button:active {
-  background-color: #ebebeb;
+kritzel-editor{
+  display: flex;
+  margin: 0;
+  position: relative;
+  container-type: inline-size;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  touch-action: manipulation;
+  user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-align: start;
+  line-height: normal;
+}
+
+.editor-content {
+  position: absolute;
+  inset: 0;
+}
+
+.editor-content > kritzel-engine {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+}
+
+kritzel-controls {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  right: 0;
+  margin-inline: auto;
+  width: max-content;
+  max-width: calc(100% - 16px);
+  bottom: var(--kritzel-editor-controls-bottom, 14px);
+  transition: transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out);
+}
+
+kritzel-controls.keyboard-open {
+  transform: var(--kritzel-editor-controls-transform, translateY(300%));
+}
+
+.top-left-buttons {
+  position: absolute;
+  z-index: 1;
+  top: var(--kritzel-editor-top-left-buttons-top, 14px);
+  left: var(--kritzel-editor-top-left-buttons-left, 14px);
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.top-center-notification-layer {
+  position: absolute;
+  top: var(--kritzel-editor-top-center-notification-top, 14px);
+  left: 0;
+  right: 0;
+  z-index: var(--kritzel-editor-top-center-notification-z-index, 10001);
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.top-center-notification-container {
+  width: min(90vw, 420px);
+  pointer-events: auto;
+  animation: kritzel-notification-slide-in var(--kritzel-editor-notification-animation-duration, 220ms)
+    var(--kritzel-editor-notification-animation-easing, cubic-bezier(0.22, 1, 0.36, 1));
+}
+
+.top-center-notification-container.is-dismissing {
+  animation: kritzel-notification-fade-out var(--kritzel-editor-notification-dismiss-animation-duration, 180ms)
+    var(--kritzel-editor-notification-dismiss-animation-easing, ease-in) forwards;
+}
+
+@keyframes kritzel-notification-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes kritzel-notification-fade-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .top-center-notification-container {
+    animation: none;
+  }
+}
+
+.top-right-buttons {
+  position: absolute;
+  z-index: 1;
+  top: var(--kritzel-editor-top-right-buttons-top, 14px);
+  right: var(--kritzel-editor-top-right-buttons-right, 14px);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.bottom-left-buttons {
+  position: absolute;
+  z-index: 1;
+  left: var(--kritzel-editor-top-left-buttons-left, 14px);
+  bottom: var(--kritzel-editor-controls-bottom, 14px);
+  display: flex;
+  align-items: flex-end;
+}
+
+/* Hide the zoom panel when the editor container is narrow. */
+@container (max-width: 767px) {
+  .bottom-left-buttons {
+    display: none;
+  }
+}
+
+.top-right-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  height: 50px;
+  padding: 0;
+  border: var(--kritzel-split-button-border, 1px solid #ebebeb);
+  border-radius: var(--kritzel-split-button-border-radius, 12px);
+  background-color: var(--kritzel-split-button-background-color, #ffffff);
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  box-shadow: var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
+  transition: background-color 150ms ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.top-right-button:hover {
+  background-color: #f5f5f5;
+}
+
+.top-right-button:active {
+  background-color: #ebebeb;
 }