npm - @framv/canvas - Versions diffs - 0.1.0 - Mend

@framv/canvas 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/dist/bundle.esm.js ADDED Viewed

@@ -0,0 +1,160 @@
+// src/element.ts
+var STYLES = `
+  :host {
+    display: block;
+    position: relative;
+    overflow: hidden;
+    background: #1a1a2e;
+    cursor: grab;
+    user-select: none;
+    font-family: system-ui, sans-serif;
+  }
+  :host(.framv-grabbing) { cursor: grabbing; }
+  .framv-canvas-stage {
+    position: absolute;
+    top: 0; left: 0;
+    transform-origin: 0 0;
+    will-change: transform;
+  }
+  .framv-canvas-stage > * {
+    position: absolute;
+  }
+  .framv-canvas-badge {
+    position: absolute; top: 8px; left: 8px;
+    background: rgba(0,0,0,0.5); color: rgba(255,255,255,0.7);
+    padding: 3px 8px; border-radius: 4px;
+    font: 10px system-ui; z-index: 10;
+    pointer-events: none;
+  }
+`;
+var FramvCanvasElement = class extends HTMLElement {
+  static observedAttributes = ["scale"];
+  _stage;
+  _shadow;
+  _scale = 1;
+  _tx = 0;
+  _ty = 0;
+  _panning = false;
+  _lastX = 0;
+  _lastY = 0;
+  _minScale = 0.1;
+  _maxScale = 5;
+  constructor() {
+    super();
+    this._shadow = this.attachShadow({ mode: "open" });
+  }
+  get width() {
+    return parseInt(this.getAttribute("width") ?? "3000");
+  }
+  get height() {
+    return parseInt(this.getAttribute("height") ?? "2000");
+  }
+  connectedCallback() {
+    const s = parseFloat(this.getAttribute("scale") ?? "1");
+    this._scale = Math.min(Math.max(s, this._minScale), this._maxScale);
+    const containerW = this.clientWidth || 800;
+    const containerH = this.clientHeight || 600;
+    this._tx = (containerW - this.width * this._scale) / 2;
+    this._ty = (containerH - this.height * this._scale) / 2;
+    this._shadow.innerHTML = `
+      <style>${STYLES}</style>
+      <div class="framv-canvas-badge">${Math.round(this._scale * 100)}%</div>
+      <div class="framv-canvas-stage" style="width:${this.width}px;height:${this.height}px">
+        <slot></slot>
+      </div>
+    `;
+    this._stage = this._shadow.querySelector(".framv-canvas-stage");
+    this._updateTransform();
+    this.addEventListener(
+      "wheel",
+      (e) => {
+        e.preventDefault();
+        const rect = this.getBoundingClientRect();
+        const px = e.clientX - rect.left;
+        const py = e.clientY - rect.top;
+        const delta = -e.deltaY * 1e-3;
+        const newScale = Math.min(Math.max(this._scale * (1 + delta), this._minScale), this._maxScale);
+        const worldX = (px - this._tx) / this._scale;
+        const worldY = (py - this._ty) / this._scale;
+        this._tx = px - worldX * newScale;
+        this._ty = py - worldY * newScale;
+        this._scale = newScale;
+        this._updateTransform();
+        this._updateBadge();
+      },
+      { passive: false }
+    );
+    this.addEventListener("pointerdown", (e) => {
+      if (e.target instanceof HTMLElement && e.target.closest("button, a, input, select, textarea, [contenteditable]")) return;
+      this._panning = true;
+      this._lastX = e.clientX;
+      this._lastY = e.clientY;
+      this.classList.add("framv-grabbing");
+      this.setPointerCapture(e.pointerId);
+    });
+    this.addEventListener("pointermove", (e) => {
+      if (!this._panning) return;
+      const dx = e.clientX - this._lastX;
+      const dy = e.clientY - this._lastY;
+      this._tx += dx;
+      this._ty += dy;
+      this._lastX = e.clientX;
+      this._lastY = e.clientY;
+      this._updateTransform();
+    });
+    this.addEventListener("pointerup", () => {
+      this._panning = false;
+      this.classList.remove("framv-grabbing");
+    });
+    this.addEventListener("pointerleave", () => {
+      if (this._panning) {
+        this._panning = false;
+        this.classList.remove("framv-grabbing");
+      }
+    });
+  }
+  attributeChangedCallback(name, _old, value) {
+    if (name === "scale" && this._stage) {
+      const s = parseFloat(value);
+      if (!isNaN(s)) {
+        this._scale = Math.min(Math.max(s, this._minScale), this._maxScale);
+        this._updateTransform();
+        this._updateBadge();
+      }
+    }
+  }
+  /** Pan to center a specific position. */
+  centerAt(x, y) {
+    const containerW = this.clientWidth || 800;
+    const containerH = this.clientHeight || 600;
+    this._tx = containerW / 2 - x * this._scale;
+    this._ty = containerH / 2 - y * this._scale;
+    this._updateTransform();
+  }
+  /** Reset to initial centered view. */
+  reset() {
+    this._scale = 1;
+    const containerW = this.clientWidth || 800;
+    const containerH = this.clientHeight || 600;
+    this._tx = (containerW - this.width) / 2;
+    this._ty = (containerH - this.height) / 2;
+    this._updateTransform();
+    this._updateBadge();
+  }
+  get scale() {
+    return this._scale;
+  }
+  _updateTransform() {
+    this._stage.style.transform = `translate(${this._tx}px, ${this._ty}px) scale(${this._scale})`;
+  }
+  _updateBadge() {
+    const badge = this._shadow.querySelector(".framv-canvas-badge");
+    if (badge) badge.textContent = `${Math.round(this._scale * 100)}%`;
+  }
+};
+if (!customElements.get("framv-canvas")) {
+  customElements.define("framv-canvas", FramvCanvasElement);
+}
+export {
+  FramvCanvasElement
+};

package/dist/bundle.iife.js ADDED Viewed

@@ -0,0 +1,185 @@
+"use strict";
+var FramvCanvas = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+  // src/cdn.ts
+  var cdn_exports = {};
+  __export(cdn_exports, {
+    FramvCanvasElement: () => FramvCanvasElement
+  });
+  // src/element.ts
+  var STYLES = `
+  :host {
+    display: block;
+    position: relative;
+    overflow: hidden;
+    background: #1a1a2e;
+    cursor: grab;
+    user-select: none;
+    font-family: system-ui, sans-serif;
+  }
+  :host(.framv-grabbing) { cursor: grabbing; }
+  .framv-canvas-stage {
+    position: absolute;
+    top: 0; left: 0;
+    transform-origin: 0 0;
+    will-change: transform;
+  }
+  .framv-canvas-stage > * {
+    position: absolute;
+  }
+  .framv-canvas-badge {
+    position: absolute; top: 8px; left: 8px;
+    background: rgba(0,0,0,0.5); color: rgba(255,255,255,0.7);
+    padding: 3px 8px; border-radius: 4px;
+    font: 10px system-ui; z-index: 10;
+    pointer-events: none;
+  }
+`;
+  var FramvCanvasElement = class extends HTMLElement {
+    static observedAttributes = ["scale"];
+    _stage;
+    _shadow;
+    _scale = 1;
+    _tx = 0;
+    _ty = 0;
+    _panning = false;
+    _lastX = 0;
+    _lastY = 0;
+    _minScale = 0.1;
+    _maxScale = 5;
+    constructor() {
+      super();
+      this._shadow = this.attachShadow({ mode: "open" });
+    }
+    get width() {
+      return parseInt(this.getAttribute("width") ?? "3000");
+    }
+    get height() {
+      return parseInt(this.getAttribute("height") ?? "2000");
+    }
+    connectedCallback() {
+      const s = parseFloat(this.getAttribute("scale") ?? "1");
+      this._scale = Math.min(Math.max(s, this._minScale), this._maxScale);
+      const containerW = this.clientWidth || 800;
+      const containerH = this.clientHeight || 600;
+      this._tx = (containerW - this.width * this._scale) / 2;
+      this._ty = (containerH - this.height * this._scale) / 2;
+      this._shadow.innerHTML = `
+      <style>${STYLES}</style>
+      <div class="framv-canvas-badge">${Math.round(this._scale * 100)}%</div>
+      <div class="framv-canvas-stage" style="width:${this.width}px;height:${this.height}px">
+        <slot></slot>
+      </div>
+    `;
+      this._stage = this._shadow.querySelector(".framv-canvas-stage");
+      this._updateTransform();
+      this.addEventListener(
+        "wheel",
+        (e) => {
+          e.preventDefault();
+          const rect = this.getBoundingClientRect();
+          const px = e.clientX - rect.left;
+          const py = e.clientY - rect.top;
+          const delta = -e.deltaY * 1e-3;
+          const newScale = Math.min(Math.max(this._scale * (1 + delta), this._minScale), this._maxScale);
+          const worldX = (px - this._tx) / this._scale;
+          const worldY = (py - this._ty) / this._scale;
+          this._tx = px - worldX * newScale;
+          this._ty = py - worldY * newScale;
+          this._scale = newScale;
+          this._updateTransform();
+          this._updateBadge();
+        },
+        { passive: false }
+      );
+      this.addEventListener("pointerdown", (e) => {
+        if (e.target instanceof HTMLElement && e.target.closest("button, a, input, select, textarea, [contenteditable]")) return;
+        this._panning = true;
+        this._lastX = e.clientX;
+        this._lastY = e.clientY;
+        this.classList.add("framv-grabbing");
+        this.setPointerCapture(e.pointerId);
+      });
+      this.addEventListener("pointermove", (e) => {
+        if (!this._panning) return;
+        const dx = e.clientX - this._lastX;
+        const dy = e.clientY - this._lastY;
+        this._tx += dx;
+        this._ty += dy;
+        this._lastX = e.clientX;
+        this._lastY = e.clientY;
+        this._updateTransform();
+      });
+      this.addEventListener("pointerup", () => {
+        this._panning = false;
+        this.classList.remove("framv-grabbing");
+      });
+      this.addEventListener("pointerleave", () => {
+        if (this._panning) {
+          this._panning = false;
+          this.classList.remove("framv-grabbing");
+        }
+      });
+    }
+    attributeChangedCallback(name, _old, value) {
+      if (name === "scale" && this._stage) {
+        const s = parseFloat(value);
+        if (!isNaN(s)) {
+          this._scale = Math.min(Math.max(s, this._minScale), this._maxScale);
+          this._updateTransform();
+          this._updateBadge();
+        }
+      }
+    }
+    /** Pan to center a specific position. */
+    centerAt(x, y) {
+      const containerW = this.clientWidth || 800;
+      const containerH = this.clientHeight || 600;
+      this._tx = containerW / 2 - x * this._scale;
+      this._ty = containerH / 2 - y * this._scale;
+      this._updateTransform();
+    }
+    /** Reset to initial centered view. */
+    reset() {
+      this._scale = 1;
+      const containerW = this.clientWidth || 800;
+      const containerH = this.clientHeight || 600;
+      this._tx = (containerW - this.width) / 2;
+      this._ty = (containerH - this.height) / 2;
+      this._updateTransform();
+      this._updateBadge();
+    }
+    get scale() {
+      return this._scale;
+    }
+    _updateTransform() {
+      this._stage.style.transform = `translate(${this._tx}px, ${this._ty}px) scale(${this._scale})`;
+    }
+    _updateBadge() {
+      const badge = this._shadow.querySelector(".framv-canvas-badge");
+      if (badge) badge.textContent = `${Math.round(this._scale * 100)}%`;
+    }
+  };
+  if (!customElements.get("framv-canvas")) {
+    customElements.define("framv-canvas", FramvCanvasElement);
+  }
+  return __toCommonJS(cdn_exports);
+})();

package/dist/cdn.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import "./element.js";
+export { FramvCanvasElement } from "./element.js";
+//# sourceMappingURL=cdn.d.ts.map

package/dist/cdn.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"cdn.d.ts","sourceRoot":"","sources":["../src/cdn.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC"}

package/dist/cdn.js ADDED Viewed

@@ -0,0 +1,3 @@
+import "./element.js";
+export { FramvCanvasElement } from "./element.js";
+//# sourceMappingURL=cdn.js.map

package/dist/cdn.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"cdn.js","sourceRoot":"","sources":["../src/cdn.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC"}

package/dist/element.d.ts ADDED Viewed

@@ -0,0 +1,54 @@
+/**
+ * `<framv-canvas>` — infinite canvas for positioning elements.
+ *
+ * Children are absolutely positioned via `left`, `top` CSS properties.
+ * Use `data-x` and `data-y` attributes to set position.
+ *
+ * Interactions:
+ *   - Drag empty space to pan
+ *   - Ctrl+wheel or pinch to zoom
+ *   - Click children normally (events pass through)
+ *
+ * Attributes:
+ *   width   — canvas logical width (default: 3000)
+ *   height  — canvas logical height (default: 2000)
+ *   scale   — initial zoom level (default: 1)
+ *
+ * @example
+ * ```html
+ * <framv-canvas style="width:100%;height:500px">
+ *   <div style="left:100px;top:80px;width:200px;background:#ff79c6;padding:16px;border-radius:8px;color:white">
+ *     Box at (100, 80)
+ *   </div>
+ *   <div style="left:500px;top:200px;background:#50fa7b;padding:12px;border-radius:4px">
+ *     Another box
+ *   </div>
+ * </framv-canvas>
+ * ```
+ */
+export declare class FramvCanvasElement extends HTMLElement {
+    static observedAttributes: string[];
+    private _stage;
+    private _shadow;
+    private _scale;
+    private _tx;
+    private _ty;
+    private _panning;
+    private _lastX;
+    private _lastY;
+    private _minScale;
+    private _maxScale;
+    constructor();
+    get width(): number;
+    get height(): number;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string, value: string): void;
+    /** Pan to center a specific position. */
+    centerAt(x: number, y: number): void;
+    /** Reset to initial centered view. */
+    reset(): void;
+    get scale(): number;
+    private _updateTransform;
+    private _updateBadge;
+}
+//# sourceMappingURL=element.d.ts.map

package/dist/element.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"element.d.ts","sourceRoot":"","sources":["../src/element.ts"],"names":[],"mappings":"AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAAa,kBAAmB,SAAQ,WAAW;IACjD,MAAM,CAAC,kBAAkB,WAAa;IAEtC,OAAO,CAAC,MAAM,CAAkB;IAChC,OAAO,CAAC,OAAO,CAAa;IAC5B,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,GAAG,CAAK;IAChB,OAAO,CAAC,GAAG,CAAK;IAChB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,SAAS,CAAO;IACxB,OAAO,CAAC,SAAS,CAAK;;IAOtB,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED,iBAAiB,IAAI,IAAI;IAgFzB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAWzE,yCAAyC;IACzC,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI;IAQpC,sCAAsC;IACtC,KAAK,IAAI,IAAI;IAUb,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,YAAY;CAIrB"}

package/dist/element.js ADDED Viewed

@@ -0,0 +1,188 @@
+const STYLES = `
+  :host {
+    display: block;
+    position: relative;
+    overflow: hidden;
+    background: #1a1a2e;
+    cursor: grab;
+    user-select: none;
+    font-family: system-ui, sans-serif;
+  }
+  :host(.framv-grabbing) { cursor: grabbing; }
+  .framv-canvas-stage {
+    position: absolute;
+    top: 0; left: 0;
+    transform-origin: 0 0;
+    will-change: transform;
+  }
+  .framv-canvas-stage > * {
+    position: absolute;
+  }
+  .framv-canvas-badge {
+    position: absolute; top: 8px; left: 8px;
+    background: rgba(0,0,0,0.5); color: rgba(255,255,255,0.7);
+    padding: 3px 8px; border-radius: 4px;
+    font: 10px system-ui; z-index: 10;
+    pointer-events: none;
+  }
+`;
+/**
+ * `<framv-canvas>` — infinite canvas for positioning elements.
+ *
+ * Children are absolutely positioned via `left`, `top` CSS properties.
+ * Use `data-x` and `data-y` attributes to set position.
+ *
+ * Interactions:
+ *   - Drag empty space to pan
+ *   - Ctrl+wheel or pinch to zoom
+ *   - Click children normally (events pass through)
+ *
+ * Attributes:
+ *   width   — canvas logical width (default: 3000)
+ *   height  — canvas logical height (default: 2000)
+ *   scale   — initial zoom level (default: 1)
+ *
+ * @example
+ * ```html
+ * <framv-canvas style="width:100%;height:500px">
+ *   <div style="left:100px;top:80px;width:200px;background:#ff79c6;padding:16px;border-radius:8px;color:white">
+ *     Box at (100, 80)
+ *   </div>
+ *   <div style="left:500px;top:200px;background:#50fa7b;padding:12px;border-radius:4px">
+ *     Another box
+ *   </div>
+ * </framv-canvas>
+ * ```
+ */
+export class FramvCanvasElement extends HTMLElement {
+    static observedAttributes = ["scale"];
+    _stage;
+    _shadow;
+    _scale = 1;
+    _tx = 0;
+    _ty = 0;
+    _panning = false;
+    _lastX = 0;
+    _lastY = 0;
+    _minScale = 0.1;
+    _maxScale = 5;
+    constructor() {
+        super();
+        this._shadow = this.attachShadow({ mode: "open" });
+    }
+    get width() {
+        return parseInt(this.getAttribute("width") ?? "3000");
+    }
+    get height() {
+        return parseInt(this.getAttribute("height") ?? "2000");
+    }
+    connectedCallback() {
+        const s = parseFloat(this.getAttribute("scale") ?? "1");
+        this._scale = Math.min(Math.max(s, this._minScale), this._maxScale);
+        // Center the view initially
+        const containerW = this.clientWidth || 800;
+        const containerH = this.clientHeight || 600;
+        this._tx = (containerW - this.width * this._scale) / 2;
+        this._ty = (containerH - this.height * this._scale) / 2;
+        this._shadow.innerHTML = `
+      <style>${STYLES}</style>
+      <div class="framv-canvas-badge">${Math.round(this._scale * 100)}%</div>
+      <div class="framv-canvas-stage" style="width:${this.width}px;height:${this.height}px">
+        <slot></slot>
+      </div>
+    `;
+        this._stage = this._shadow.querySelector(".framv-canvas-stage");
+        this._updateTransform();
+        // Mouse wheel zoom (Ctrl + wheel or just wheel)
+        this.addEventListener("wheel", (e) => {
+            e.preventDefault();
+            const rect = this.getBoundingClientRect();
+            const px = e.clientX - rect.left;
+            const py = e.clientY - rect.top;
+            const delta = -e.deltaY * 0.001;
+            const newScale = Math.min(Math.max(this._scale * (1 + delta), this._minScale), this._maxScale);
+            // Pointer-aware zoom
+            const worldX = (px - this._tx) / this._scale;
+            const worldY = (py - this._ty) / this._scale;
+            this._tx = px - worldX * newScale;
+            this._ty = py - worldY * newScale;
+            this._scale = newScale;
+            this._updateTransform();
+            this._updateBadge();
+        }, { passive: false });
+        // Pointer drag to pan
+        this.addEventListener("pointerdown", (e) => {
+            if (e.target instanceof HTMLElement && e.target.closest("button, a, input, select, textarea, [contenteditable]"))
+                return;
+            this._panning = true;
+            this._lastX = e.clientX;
+            this._lastY = e.clientY;
+            this.classList.add("framv-grabbing");
+            this.setPointerCapture(e.pointerId);
+        });
+        this.addEventListener("pointermove", (e) => {
+            if (!this._panning)
+                return;
+            const dx = e.clientX - this._lastX;
+            const dy = e.clientY - this._lastY;
+            this._tx += dx;
+            this._ty += dy;
+            this._lastX = e.clientX;
+            this._lastY = e.clientY;
+            this._updateTransform();
+        });
+        this.addEventListener("pointerup", () => {
+            this._panning = false;
+            this.classList.remove("framv-grabbing");
+        });
+        this.addEventListener("pointerleave", () => {
+            if (this._panning) {
+                this._panning = false;
+                this.classList.remove("framv-grabbing");
+            }
+        });
+    }
+    attributeChangedCallback(name, _old, value) {
+        if (name === "scale" && this._stage) {
+            const s = parseFloat(value);
+            if (!isNaN(s)) {
+                this._scale = Math.min(Math.max(s, this._minScale), this._maxScale);
+                this._updateTransform();
+                this._updateBadge();
+            }
+        }
+    }
+    /** Pan to center a specific position. */
+    centerAt(x, y) {
+        const containerW = this.clientWidth || 800;
+        const containerH = this.clientHeight || 600;
+        this._tx = containerW / 2 - x * this._scale;
+        this._ty = containerH / 2 - y * this._scale;
+        this._updateTransform();
+    }
+    /** Reset to initial centered view. */
+    reset() {
+        this._scale = 1;
+        const containerW = this.clientWidth || 800;
+        const containerH = this.clientHeight || 600;
+        this._tx = (containerW - this.width) / 2;
+        this._ty = (containerH - this.height) / 2;
+        this._updateTransform();
+        this._updateBadge();
+    }
+    get scale() {
+        return this._scale;
+    }
+    _updateTransform() {
+        this._stage.style.transform = `translate(${this._tx}px, ${this._ty}px) scale(${this._scale})`;
+    }
+    _updateBadge() {
+        const badge = this._shadow.querySelector(".framv-canvas-badge");
+        if (badge)
+            badge.textContent = `${Math.round(this._scale * 100)}%`;
+    }
+}
+if (!customElements.get("framv-canvas")) {
+    customElements.define("framv-canvas", FramvCanvasElement);
+}
+//# sourceMappingURL=element.js.map

package/dist/element.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"element.js","sourceRoot":"","sources":["../src/element.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { FramvCanvasElement } from "./element.js";
2	+ //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC"}

package/dist/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { FramvCanvasElement } from "./element.js";
2	+ //# sourceMappingURL=index.js.map

package/dist/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC"}

package/package.json ADDED Viewed

@@ -0,0 +1,38 @@
+{
+  "name": "@framv/canvas",
+  "version": "0.1.0",
+  "private": false,
+  "description": "Infinite canvas component for framv — position elements with zoom and pan",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc -b && npm run bundle",
+    "prepublishOnly": "npm run build",
+    "bundle": "esbuild src/index.ts --bundle --format=esm --outfile=dist/bundle.esm.js && esbuild src/cdn.ts --bundle --format=iife --global-name=FramvCanvas --outfile=dist/bundle.iife.js"
+  },
+  "devDependencies": {
+    "esbuild": "^0.27.2",
+    "typescript": "^5.9.3"
+  },
+  "author": "Mens Reversa",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mensreversa/framv.git",
+    "directory": "packages/canvas"
+  },
+  "bugs": {
+    "url": "https://github.com/mensreversa/framv/issues"
+  }
+}