@jolly-pixel/ui 1.0.1 → 2.0.0

package/dist/icon/Icon.js

@@ -21,22 +21,22 @@ const kWarned = new Set();
  * unlabeled icons are decorative.
  */
 let Icon = class Icon extends LitElement {
-    static styles = css `
-    :host {
-      display: inline-flex;
-      flex: 0 0 auto;
-      align-items: center;
-      justify-content: center;
-      width: var(--jolly-icon-size, 16px);
-      height: var(--jolly-icon-size, 16px);
-      color: inherit;
-    }
-
-    svg {
-      display: block;
-      width: 100%;
-      height: 100%;
-    }
+    static styles = css `
+    :host {
+      display: inline-flex;
+      flex: 0 0 auto;
+      align-items: center;
+      justify-content: center;
+      width: var(--jolly-icon-size, 16px);
+      height: var(--jolly-icon-size, 16px);
+      color: inherit;
+    }
+
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
   `;
     constructor() {
         super();
@@ -50,14 +50,14 @@ let Icon = class Icon extends LitElement {
             return nothing;
         }
         const decorative = this.label === "";
-        return html `
-      <svg
-        viewBox="0 0 24 24"
-        fill="none"
-        role=${decorative ? "presentation" : "img"}
-        aria-hidden=${decorative ? "true" : nothing}
-        aria-label=${decorative ? nothing : this.label}
-      >${svg `${glyph}`}</svg>
+        return html `
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        role=${decorative ? "presentation" : "img"}
+        aria-hidden=${decorative ? "true" : nothing}
+        aria-label=${decorative ? nothing : this.label}
+      >${svg `${glyph}`}</svg>
     `;
     }
     /**

package/dist/icon/builtins.js

@@ -5,145 +5,145 @@ import { registerIcon } from "./registry.js";
 /**
  * Registers built-in chrome glyphs on the shared 24px grid.
  */
-registerIcon("chevron", svg `
-  <path
-    d="M8.5 5.5 16 12l-7.5 6.5"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2.25"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
+registerIcon("chevron", svg `
+  <path
+    d="M8.5 5.5 16 12l-7.5 6.5"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.25"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
 `);
-registerIcon("close", svg `
-  <path
-    d="M6 6l12 12M18 6 6 18"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2.25"
-    stroke-linecap="round"
-  />
+registerIcon("close", svg `
+  <path
+    d="M6 6l12 12M18 6 6 18"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.25"
+    stroke-linecap="round"
+  />
 `);
-registerIcon("plus", svg `
-  <path
-    d="M12 5v14M5 12h14"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2.25"
-    stroke-linecap="round"
-  />
+registerIcon("plus", svg `
+  <path
+    d="M12 5v14M5 12h14"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.25"
+    stroke-linecap="round"
+  />
 `);
 // Circular reset arrow.
-registerIcon("revert", svg `
-  <path
-    d="M3 12a9 9 0 1 0 3-6.7L3 8"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2.25"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-  <path
-    d="M3 3v5h5"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2.25"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
+registerIcon("revert", svg `
+  <path
+    d="M3 12a9 9 0 1 0 3-6.7L3 8"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.25"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M3 3v5h5"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.25"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
 `);
 // Horizontal drag affordance.
-registerIcon("drag", svg `
-  <path
-    d="M3 12h18"
-    stroke="currentColor"
-    stroke-width="2.25"
-    stroke-linecap="round"
-  />
-  <path
-    d="M6.5 8.5 3 12l3.5 3.5M17.5 8.5 21 12l-3.5 3.5"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2.25"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
+registerIcon("drag", svg `
+  <path
+    d="M3 12h18"
+    stroke="currentColor"
+    stroke-width="2.25"
+    stroke-linecap="round"
+  />
+  <path
+    d="M6.5 8.5 3 12l3.5 3.5M17.5 8.5 21 12l-3.5 3.5"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.25"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
 `);
-registerIcon("lock", svg `
-  <rect
-    x="4.5"
-    y="10.5"
-    width="15"
-    height="10"
-    rx="2"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2.25"
-    stroke-linejoin="round"
-  />
-  <path
-    d="M8 10.5V7.5a4 4 0 0 1 8 0v3"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2.25"
-    stroke-linecap="round"
-  />
+registerIcon("lock", svg `
+  <rect
+    x="4.5"
+    y="10.5"
+    width="15"
+    height="10"
+    rx="2"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.25"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M8 10.5V7.5a4 4 0 0 1 8 0v3"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.25"
+    stroke-linecap="round"
+  />
 `);
-registerIcon("eye", svg `
-  <path
-    d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2.25"
-    stroke-linejoin="round"
-    stroke-linecap="round"
-  />
-  <circle cx="12" cy="12" r="2.6" fill="none" stroke="currentColor" stroke-width="2.25" />
+registerIcon("eye", svg `
+  <path
+    d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.25"
+    stroke-linejoin="round"
+    stroke-linecap="round"
+  />
+  <circle cx="12" cy="12" r="2.6" fill="none" stroke="currentColor" stroke-width="2.25" />
 `);
-registerIcon("search", svg `
-  <circle cx="10.5" cy="10.5" r="6" fill="none" stroke="currentColor" stroke-width="2.25" />
-  <path
-    d="m15 15 4.5 4.5"
-    stroke="currentColor"
-    stroke-width="2.25"
-    stroke-linecap="round"
-  />
+registerIcon("search", svg `
+  <circle cx="10.5" cy="10.5" r="6" fill="none" stroke="currentColor" stroke-width="2.25" />
+  <path
+    d="m15 15 4.5 4.5"
+    stroke="currentColor"
+    stroke-width="2.25"
+    stroke-linecap="round"
+  />
 `);
-registerIcon("check", svg `
-  <path
-    d="m5 12.5 4.5 4.5L19 7"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2.25"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
+registerIcon("check", svg `
+  <path
+    d="m5 12.5 4.5 4.5L19 7"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.25"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
 `);
 // Description indicator.
-registerIcon("info", svg `
-  <circle cx="12" cy="12" r="9" fill="currentColor" />
-  <path
-    d="M12 10.5v6"
-    fill="none"
-    stroke="var(--jolly-surface, Canvas)"
-    stroke-width="2.5"
-    stroke-linecap="round"
-  />
-  <circle cx="12" cy="7.5" r="1.35" fill="var(--jolly-surface, Canvas)" />
+registerIcon("info", svg `
+  <circle cx="12" cy="12" r="9" fill="currentColor" />
+  <path
+    d="M12 10.5v6"
+    fill="none"
+    stroke="var(--jolly-surface, Canvas)"
+    stroke-width="2.5"
+    stroke-linecap="round"
+  />
+  <circle cx="12" cy="7.5" r="1.35" fill="var(--jolly-surface, Canvas)" />
 `);
 // Error indicator.
-registerIcon("warning", svg `
-  <path
-    d="M12 4.25 21.5 20.5h-19Z"
-    fill="currentColor"
-  />
-  <path
-    d="M12 9.75v4.75"
-    fill="none"
-    stroke="var(--jolly-surface, Canvas)"
-    stroke-width="2.5"
-    stroke-linecap="round"
-  />
-  <circle cx="12" cy="17.4" r="1.35" fill="var(--jolly-surface, Canvas)" />
+registerIcon("warning", svg `
+  <path
+    d="M12 4.25 21.5 20.5h-19Z"
+    fill="currentColor"
+  />
+  <path
+    d="M12 9.75v4.75"
+    fill="none"
+    stroke="var(--jolly-surface, Canvas)"
+    stroke-width="2.5"
+    stroke-linecap="round"
+  />
+  <circle cx="12" cy="17.4" r="1.35" fill="var(--jolly-surface, Canvas)" />
 `);
 //# sourceMappingURL=builtins.js.map

package/dist/interaction/drag/DragSession.js

@@ -262,12 +262,12 @@ function movesNothing(zone, index) {
  * Lazily installs the document-level cursor lock used during a drag.
  */
 function ensureSessionStyles() {
-    ensureDocumentStyles("jolly-drag-session-styles", `
-    html.${kDraggingClass},
-    html.${kDraggingClass} * {
-      cursor: grabbing !important;
-      user-select: none !important;
-    }
+    ensureDocumentStyles("jolly-drag-session-styles", `
+    html.${kDraggingClass},
+    html.${kDraggingClass} * {
+      cursor: grabbing !important;
+      user-select: none !important;
+    }
   `);
 }
 //# sourceMappingURL=DragSession.js.map

package/dist/interaction/scrub/ScrubController.js

@@ -55,12 +55,12 @@ export class ScrubController {
         target.addEventListener("pointermove", this.#onPointerMove);
         target.addEventListener("pointerup", this.#onPointerUp);
         target.addEventListener("pointercancel", this.#onPointerUp);
-        ensureDocumentStyles("jolly-drag-styles", `
-      html.jolly-scrub-dragging,
-      html.jolly-scrub-dragging * {
-        cursor: ew-resize !important;
-        user-select: none !important;
-      }
+        ensureDocumentStyles("jolly-drag-styles", `
+      html.jolly-scrub-dragging,
+      html.jolly-scrub-dragging * {
+        cursor: ew-resize !important;
+        user-select: none !important;
+      }
     `);
         document.documentElement.classList.add(kDraggingClass);
         const { top, height } = target.getBoundingClientRect();

package/dist/math/AxisController.js

@@ -44,28 +44,28 @@ export class AxisController {
         const value = this.#options.value();
         const displayed = this.#draft ?? (value === undefined ? "" : formatNumber(value, this.#options.step()));
         const showMixed = this.#draft === null && value === undefined;
-        return html `
-      <span
-        class="axis-box"
-        data-axis=${key}
-        style=${colorVar ? `--jolly-axis-color: var(${colorVar})` : nothing}
-      >
-        <span class="axis-tag" aria-hidden="true">${label}</span>
-        <span class="scrub-handle" aria-hidden="true"></span>
-        <input
-          type="text"
-          inputmode="decimal"
-          aria-label=${this.#options.ariaLabel()}
-          .value=${displayed}
-          placeholder=${showMixed ? MIXED_PLACEHOLDER : ""}
-          ?disabled=${this.#options.disabled()}
-          ?readonly=${!this.#options.editable()}
-          aria-invalid=${this.#error === null ? nothing : "true"}
-          @input=${this.#onInput}
-          @keydown=${this.#onKeyDown}
-          @blur=${this.#onBlur}
-        >
-      </span>
+        return html `
+      <span
+        class="axis-box"
+        data-axis=${key}
+        style=${colorVar ? `--jolly-axis-color: var(${colorVar})` : nothing}
+      >
+        <span class="axis-tag" aria-hidden="true">${label}</span>
+        <span class="scrub-handle" aria-hidden="true"></span>
+        <input
+          type="text"
+          inputmode="decimal"
+          aria-label=${this.#options.ariaLabel()}
+          .value=${displayed}
+          placeholder=${showMixed ? MIXED_PLACEHOLDER : ""}
+          ?disabled=${this.#options.disabled()}
+          ?readonly=${!this.#options.editable()}
+          aria-invalid=${this.#error === null ? nothing : "true"}
+          @input=${this.#onInput}
+          @keydown=${this.#onKeyDown}
+          @blur=${this.#onBlur}
+        >
+      </span>
     `;
     }
     #onInput = (event) => {

package/dist/math/Point2d.js

@@ -50,20 +50,20 @@ let Point2d = class Point2d extends JollyField {
     renderValue() {
         const point = this.#point;
         const label = this.label === "" ? "Point" : this.label;
-        return html `
-      <div
-        class="pad"
-        role="slider"
-        aria-label=${label}
+        return html `
+      <div
+        class="pad"
+        role="slider"
+        aria-label=${label}
         aria-valuetext=${point === undefined
             ? "Mixed"
-            : `${formatNumber(point.x, this.step)}, ${formatNumber(point.y, this.step)}`}
-        tabindex=${this.editable ? "0" : "-1"}
-        style="--jolly-pad-x:${point ? this.#ratio(point.x) : 0.5}; --jolly-pad-y:${point ? this.#ratio(point.y) : 0.5}"
-        ?data-mixed=${point === undefined}
-        @pointerdown=${this.#onPointerDown}
-        @keydown=${this.#onKeyDown}
-      ><span class="handle" ?hidden=${point === undefined}></span></div>
+            : `${formatNumber(point.x, this.step)}, ${formatNumber(point.y, this.step)}`}
+        tabindex=${this.editable ? "0" : "-1"}
+        style="--jolly-pad-x:${point ? this.#ratio(point.x) : 0.5}; --jolly-pad-y:${point ? this.#ratio(point.y) : 0.5}"
+        ?data-mixed=${point === undefined}
+        @pointerdown=${this.#onPointerDown}
+        @keydown=${this.#onKeyDown}
+      ><span class="handle" ?hidden=${point === undefined}></span></div>
     `;
     }
     get #point() {

package/dist/math/Point2d.styles.js

@@ -2,54 +2,54 @@
 import { css } from "lit";
 // Import Internal Dependencies
 import { fillTransition } from "../theme/styles/mixins.js";
-export const point2dStyles = css `
-  .pad {
-    position: relative;
-    width: 64px;
-    height: 64px;
-    border-radius: var(--jolly-radius-sm, 2px);
-    background: var(--jolly-control-bg, transparent);
-    cursor: crosshair;
-    touch-action: none;
-    ${fillTransition}
-  }
-
-  .pad:hover {
-    background: var(--jolly-control-bg-hover);
-  }
-
-  .pad:focus-visible {
-    background: var(--jolly-control-bg-focus);
-    outline: none;
-  }
-
-  :host([invalid]) .pad {
-    background: var(--jolly-invalid-bg);
-  }
-
-  :host([readonly]) .pad {
-    background: var(--jolly-control-bg-muted);
-  }
-
-  .pad[data-mixed] {
-    opacity: 0.35;
-  }
-
-  .handle {
-    position: absolute;
-    top: calc(var(--jolly-pad-y, 0.5) * 100%);
-    left: calc(var(--jolly-pad-x, 0.5) * 100%);
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: var(--jolly-field-active-color);
-    box-shadow: 0 0 0 1px var(--jolly-surface);
-    pointer-events: none;
-    transform: translate(-50%, -50%);
-  }
-
-  .handle[hidden] {
-    display: none;
-  }
+export const point2dStyles = css `
+  .pad {
+    position: relative;
+    width: 64px;
+    height: 64px;
+    border-radius: var(--jolly-radius-sm, 2px);
+    background: var(--jolly-control-bg, transparent);
+    cursor: crosshair;
+    touch-action: none;
+    ${fillTransition}
+  }
+
+  .pad:hover {
+    background: var(--jolly-control-bg-hover);
+  }
+
+  .pad:focus-visible {
+    background: var(--jolly-control-bg-focus);
+    outline: none;
+  }
+
+  :host([invalid]) .pad {
+    background: var(--jolly-invalid-bg);
+  }
+
+  :host([readonly]) .pad {
+    background: var(--jolly-control-bg-muted);
+  }
+
+  .pad[data-mixed] {
+    opacity: 0.35;
+  }
+
+  .handle {
+    position: absolute;
+    top: calc(var(--jolly-pad-y, 0.5) * 100%);
+    left: calc(var(--jolly-pad-x, 0.5) * 100%);
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--jolly-field-active-color);
+    box-shadow: 0 0 0 1px var(--jolly-surface);
+    pointer-events: none;
+    transform: translate(-50%, -50%);
+  }
+
+  .handle[hidden] {
+    display: none;
+  }
 `;
 //# sourceMappingURL=Point2d.styles.js.map

package/dist/math/Quaternion.js

@@ -58,10 +58,10 @@ let Quaternion = class Quaternion extends JollyField {
         return quatEquals(a, b);
     }
     renderValue() {
-        return html `
-      <div class="axes">
-        ${kAxisKeys.map((axis) => this.#controllerFor(axis).render())}
-      </div>
+        return html `
+      <div class="axes">
+        ${kAxisKeys.map((axis) => this.#controllerFor(axis).render())}
+      </div>
     `;
     }
     #controllerFor(axis) {

package/dist/math/Transform.js

@@ -75,46 +75,46 @@ let Transform = class Transform extends LitElement {
         const position = this.state.position ?? kEmptySubState;
         const rotation = this.state.rotation ?? kEmptySubState;
         const scale = this.state.scale ?? kEmptySubState;
-        return html `
-      <jolly-vector3
-        label=${this.positionLabel}
-        label-position=${this.labelPosition}
-        .value=${this.value.position}
-        .default=${this.default?.position}
-        .lockedBy=${position.lockedBy ?? null}
-        .peers=${position.peers ?? []}
-        .error=${position.error ?? null}
-        ?disabled=${position.disabled ?? false}
-        ?readonly=${position.readonly ?? false}
-        @jolly-input=${(event) => this.#relay("position", event, true)}
-        @jolly-change=${(event) => this.#relay("position", event, false)}
-      ></jolly-vector3>
-      <jolly-quaternion
-        label=${this.rotationLabel}
-        label-position=${this.labelPosition}
-        .value=${this.value.rotation}
-        .default=${this.default?.rotation}
-        .lockedBy=${rotation.lockedBy ?? null}
-        .peers=${rotation.peers ?? []}
-        .error=${rotation.error ?? null}
-        ?disabled=${rotation.disabled ?? false}
-        ?readonly=${rotation.readonly ?? false}
-        @jolly-input=${(event) => this.#relay("rotation", event, true)}
-        @jolly-change=${(event) => this.#relay("rotation", event, false)}
-      ></jolly-quaternion>
-      <jolly-vector3
-        label=${this.scaleLabel}
-        label-position=${this.labelPosition}
-        .value=${this.value.scale}
-        .default=${this.default?.scale}
-        .lockedBy=${scale.lockedBy ?? null}
-        .peers=${scale.peers ?? []}
-        .error=${scale.error ?? null}
-        ?disabled=${scale.disabled ?? false}
-        ?readonly=${scale.readonly ?? false}
-        @jolly-input=${(event) => this.#relay("scale", event, true)}
-        @jolly-change=${(event) => this.#relay("scale", event, false)}
-      ></jolly-vector3>
+        return html `
+      <jolly-vector3
+        label=${this.positionLabel}
+        label-position=${this.labelPosition}
+        .value=${this.value.position}
+        .default=${this.default?.position}
+        .lockedBy=${position.lockedBy ?? null}
+        .peers=${position.peers ?? []}
+        .error=${position.error ?? null}
+        ?disabled=${position.disabled ?? false}
+        ?readonly=${position.readonly ?? false}
+        @jolly-input=${(event) => this.#relay("position", event, true)}
+        @jolly-change=${(event) => this.#relay("position", event, false)}
+      ></jolly-vector3>
+      <jolly-quaternion
+        label=${this.rotationLabel}
+        label-position=${this.labelPosition}
+        .value=${this.value.rotation}
+        .default=${this.default?.rotation}
+        .lockedBy=${rotation.lockedBy ?? null}
+        .peers=${rotation.peers ?? []}
+        .error=${rotation.error ?? null}
+        ?disabled=${rotation.disabled ?? false}
+        ?readonly=${rotation.readonly ?? false}
+        @jolly-input=${(event) => this.#relay("rotation", event, true)}
+        @jolly-change=${(event) => this.#relay("rotation", event, false)}
+      ></jolly-quaternion>
+      <jolly-vector3
+        label=${this.scaleLabel}
+        label-position=${this.labelPosition}
+        .value=${this.value.scale}
+        .default=${this.default?.scale}
+        .lockedBy=${scale.lockedBy ?? null}
+        .peers=${scale.peers ?? []}
+        .error=${scale.error ?? null}
+        ?disabled=${scale.disabled ?? false}
+        ?readonly=${scale.readonly ?? false}
+        @jolly-input=${(event) => this.#relay("scale", event, true)}
+        @jolly-change=${(event) => this.#relay("scale", event, false)}
+      ></jolly-vector3>
     `;
     }
     /** Merges a sub-field commit into the complete TransformValue. */