@figspec/components - npm Package Compare versions

Comparing version 1.0.1 to 1.0.3

cjs/es2016/FigspecViewer/DistanceGuide.js

@@ -13,3 +13,3 @@ "use strict";
     }
-    return lit_1.svg `
+    return (0, lit_1.svg) `
     <line
@@ -24,3 +24,3 @@ class="distance-line"
     ${guide.bisector &&
-        lit_1.svg `
+        (0, lit_1.svg) `
         <line
@@ -32,3 +32,3 @@ class="distance-line"
           y2=${guide.bisector[1].y}
-          style=${style_map_js_1.styleMap({
+          style=${(0, style_map_js_1.styleMap)({
             strokeDasharray: `${4 * reverseScale}`,
@@ -48,3 +48,3 @@ })}
     }
-    const text = utils_1.round(Math.max(xLength, yLength)).toString(10);
+    const text = (0, utils_1.round)(Math.max(xLength, yLength)).toString(10);
     // Decreases font width because every text is a number (narrow).
@@ -73,3 +73,3 @@ // We can measure the correct width with getComputedTextLength method on
     const transformOrigin = xLength > yLength ? `${cx} ${y}` : `${x} ${cy}`;
-    return lit_1.svg `
+    return (0, lit_1.svg) `
     <g class="distance-tooltip">
@@ -103,7 +103,7 @@ <rect
 const guidesCache = new Map();
-exports.Guides = ({ node, distanceTo, reverseScale, fontSize, }) => {
+const Guides = ({ node, distanceTo, reverseScale, fontSize, }) => {
     const combinedId = node.id + "\n" + distanceTo.id;
     let guides = guidesCache.get(combinedId);
     if (!guides) {
-        guides = utils_1.getDistanceGuides(node.absoluteBoundingBox, distanceTo.absoluteBoundingBox);
+        guides = (0, utils_1.getDistanceGuides)(node.absoluteBoundingBox, distanceTo.absoluteBoundingBox);
         guidesCache.set(combinedId, guides);
@@ -116,3 +116,4 @@ }
 };
-exports.styles = lit_1.css `
+exports.Guides = Guides;
+exports.styles = (0, lit_1.css) `
   .distance-line {
@@ -119,0 +120,0 @@ shape-rendering: geometricPrecision;

cjs/es2016/FigspecViewer/ErrorMessage.js

@@ -5,3 +5,3 @@ "use strict";
 const lit_1 = require("lit");
-exports.ErrorMessage = ({ title, children }) => lit_1.html `
+const ErrorMessage = ({ title, children }) => (0, lit_1.html) `
   <div class="error-background">
@@ -16,3 +16,4 @@ <div class="error-container">
 `;
-exports.styles = lit_1.css `
+exports.ErrorMessage = ErrorMessage;
+exports.styles = (0, lit_1.css) `
   .error-background {
@@ -19,0 +20,0 @@ position: absolute;

cjs/es2016/FigspecViewer/FigspecFileViewer.d.ts

@@ -67,3 +67,3 @@ import type * as Figma from "figma-js";
     /** @private */
-    get error(): string | Error | import("lit-html").TemplateResult<1 | 2> | undefined;
+    get error(): string | Error | import("lit-html").TemplateResult<2 | 1> | undefined;
     static get styles(): import("lit").CSSResultArray;
@@ -70,0 +70,0 @@ render(): import("lit-html").TemplateResult<1>;

cjs/es2016/FigspecViewer/FigspecFileViewer.js

@@ -8,9 +8,8 @@ "use strict";
 };
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, privateMap) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to get private field on non-instance");
-    }
-    return privateMap.get(receiver);
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _selectFirstPage, _handlePageChange;
+var _FigspecFileViewer_selectFirstPage, _FigspecFileViewer_handlePageChange;
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -65,3 +64,3 @@ exports.FigspecFileViewer = void 0;
  */
-class FigspecFileViewer extends ViewerMixin_1.ViewerMixin(lit_1.LitElement) {
+class FigspecFileViewer extends (0, ViewerMixin_1.ViewerMixin)(lit_1.LitElement) {
     constructor() {
@@ -84,3 +83,3 @@ super(...arguments);
         this.selectedPage = null;
-        _selectFirstPage.set(this, () => {
+        _FigspecFileViewer_selectFirstPage.set(this, () => {
             var _a;
@@ -91,8 +90,10 @@ if (!this.documentNode) {
             }
-            this.selectedPage = (_a = this.documentNode.document.children.filter((c) => c.type === "CANVAS")[0]) !== null && _a !== void 0 ? _a : null;
+            this.selectedPage =
+                (_a = this.documentNode.document.children.filter((c) => c.type === "CANVAS")[0]) !== null && _a !== void 0 ? _a : null;
         });
-        _handlePageChange.set(this, (ev) => {
+        _FigspecFileViewer_handlePageChange.set(this, (ev) => {
             var _a, _b;
             const target = ev.currentTarget;
-            this.selectedPage = (_b = (_a = this.documentNode) === null || _a === void 0 ? void 0 : _a.document.children.find((c) => c.id === target.value)) !== null && _b !== void 0 ? _b : null;
+            this.selectedPage =
+                (_b = (_a = this.documentNode) === null || _a === void 0 ? void 0 : _a.document.children.find((c) => c.id === target.value)) !== null && _b !== void 0 ? _b : null;
             if (this.selectedPage) {
@@ -120,3 +121,3 @@ this.__updateTree(this.selectedPage);
                 title: "Parameter error",
-                children: lit_1.html `<span>
+                children: (0, lit_1.html) `<span>
           Both <code>document-node</code> and <code>rendered-images</code> are
@@ -132,4 +133,4 @@ required.
     static get styles() {
-        return utils_1.extendStyles(super.styles, [
-            lit_1.css `
+        return (0, utils_1.extendStyles)(super.styles, [
+            (0, lit_1.css) `
         :host {
@@ -184,6 +185,6 @@ --figspec-control-bg-default: #fcfcfc;
         var _a;
-        return lit_1.html `
+        return (0, lit_1.html) `
       <div class="controls">
-        <select @change=${__classPrivateFieldGet(this, _handlePageChange)}>
-          ${(_a = this.documentNode) === null || _a === void 0 ? void 0 : _a.document.children.map((c) => lit_1.html `<option value=${c.id}>${c.name}</option>`)}
+        <select @change=${__classPrivateFieldGet(this, _FigspecFileViewer_handlePageChange, "f")}>
+          ${(_a = this.documentNode) === null || _a === void 0 ? void 0 : _a.document.children.map((c) => (0, lit_1.html) `<option value=${c.id}>${c.name}</option>`)}
         </select>
@@ -205,3 +206,3 @@ </div>
         if (this.documentNode) {
-            __classPrivateFieldGet(this, _selectFirstPage).call(this);
+            __classPrivateFieldGet(this, _FigspecFileViewer_selectFirstPage, "f").call(this);
             if (this.selectedPage) {
@@ -216,3 +217,3 @@ this.__updateTree(this.selectedPage);
         if (changedProperties.has("documentNode")) {
-            __classPrivateFieldGet(this, _selectFirstPage).call(this);
+            __classPrivateFieldGet(this, _FigspecFileViewer_selectFirstPage, "f").call(this);
             if (this.selectedPage) {
@@ -228,5 +229,5 @@ this.__updateTree(this.selectedPage);
 }
-_selectFirstPage = new WeakMap(), _handlePageChange = new WeakMap();
+_FigspecFileViewer_selectFirstPage = new WeakMap(), _FigspecFileViewer_handlePageChange = new WeakMap();
 __decorate([
-    decorators_js_1.property({
+    (0, decorators_js_1.property)({
         type: Object,
@@ -237,3 +238,3 @@ attribute: "document-node",
 __decorate([
-    decorators_js_1.property({
+    (0, decorators_js_1.property)({
         type: Object,
@@ -240,0 +241,0 @@ attribute: "rendered-images",

cjs/es2016/FigspecViewer/FigspecFrameViewer.d.ts

@@ -69,3 +69,3 @@ import type * as Figma from "figma-js";
     /** @private */
-    get error(): string | Error | import("lit-html").TemplateResult<1 | 2> | undefined;
+    get error(): string | Error | import("lit-html").TemplateResult<2 | 1> | undefined;
     getMetadata(): {
@@ -72,0 +72,0 @@ fileName: string;

cjs/es2016/FigspecViewer/FigspecFrameViewer.js

@@ -56,3 +56,3 @@ "use strict";
  */
-class FigspecFrameViewer extends ViewerMixin_1.ViewerMixin(lit_1.LitElement) {
+class FigspecFrameViewer extends (0, ViewerMixin_1.ViewerMixin)(lit_1.LitElement) {
     constructor() {
@@ -103,3 +103,3 @@ super(...arguments);
                 title: "Parameter error",
-                children: lit_1.html `<span>
+                children: (0, lit_1.html) `<span>
           Both <code>nodes</code> and <code>rendered-image</code> are required.
@@ -112,3 +112,3 @@ </span>`,
                 title: "Parameter Error",
-                children: lit_1.html `
+                children: (0, lit_1.html) `
           <span> Document node is empty or does not have size. </span>
@@ -151,3 +151,3 @@ `,
 __decorate([
-    decorators_js_1.property({
+    (0, decorators_js_1.property)({
         type: Object,
@@ -157,3 +157,3 @@ })
 __decorate([
-    decorators_js_1.property({
+    (0, decorators_js_1.property)({
         type: String,
@@ -160,0 +160,0 @@ attribute: "rendered-image",

cjs/es2016/FigspecViewer/Footer/Footer.d.ts

@@ -6,2 +6,2 @@ export declare const styles: import("lit").CSSResult;
     fileName: string;
-} | undefined) => import("lit-html").TemplateResult<1> | null;
+}) => import("lit-html").TemplateResult<1> | null;

cjs/es2016/FigspecViewer/Footer/Footer.js

@@ -7,3 +7,3 @@ "use strict";
 const utils_1 = require("./utils");
-exports.styles = lit_1.css `
+exports.styles = (0, lit_1.css) `
   .figma-footer {
@@ -45,3 +45,3 @@ flex: 0;
 `;
-exports.Footer = (metadata) => {
+const Footer = (metadata) => {
     // Do not render in case there is no metadata or a link is not passed
@@ -55,3 +55,3 @@ if (!metadata ||
     const { link, timestamp, fileName } = metadata;
-    return lit_1.html `<a
+    return (0, lit_1.html) `<a
     class="figma-footer"
@@ -63,3 +63,3 @@ target="_blank"
   >
-    <span class="figma-footer--icon"> ${Icons_1.FigmaIcon()} </span>
+    <span class="figma-footer--icon"> ${(0, Icons_1.FigmaIcon)()} </span>
     <span class="figma-footer--title"> ${fileName} </span>
@@ -70,5 +70,6 @@ <span
     >
-      Edited ${utils_1.fromNow(timestamp)}
+      Edited ${(0, utils_1.fromNow)(timestamp)}
     </span>
   </a>`;
 };
+exports.Footer = Footer;

cjs/es2016/FigspecViewer/Footer/utils.js

@@ -33,3 +33,3 @@ "use strict";
  */
-exports.fromNow = (date, nowDate = Date.now(), rft = new Intl.RelativeTimeFormat(undefined, { numeric: "auto" })) => {
+const fromNow = (date, nowDate = Date.now(), rft = new Intl.RelativeTimeFormat(undefined, { numeric: "auto" })) => {
     const now = getTime(nowDate);
@@ -49,1 +49,2 @@ const diff = now - getTime(date);
 };
+exports.fromNow = fromNow;

cjs/es2016/FigspecViewer/Icons.js

@@ -5,3 +5,3 @@ "use strict";
 const lit_1 = require("lit");
-exports.CloseIcon = ({ onClick = () => { } }) => lit_1.svg `
+const CloseIcon = ({ onClick = () => { } }) => (0, lit_1.svg) `
   <svg @click=${onClick} title="close icon" width="14" height="14" viewBox="0 0 20 20" fill="none">
@@ -11,3 +11,4 @@ <path d="M1 19L19 1M19 19L1 1" stroke="#B3B3B3" stroke-width="2"/>
 `;
-exports.CopyIcon = ({ onClick = () => { } }) => lit_1.svg `
+exports.CloseIcon = CloseIcon;
+const CopyIcon = ({ onClick = () => { } }) => (0, lit_1.svg) `
   <svg @click=${onClick} title="copy icon" width="14" height="14" viewBox="0 0 30 30" fill="none">
@@ -17,3 +18,4 @@ <path d="M21 25.5C21 24.9477 20.5523 24.5 20 24.5C19.4477 24.5 19 24.9477 19 25.5H21ZM13 2H25V0H13V2ZM28 5V21H30V5H28ZM25 24H13V26H25V24ZM10 21V5H8V21H10ZM13 24C11.3431 24 10 22.6569 10 21H8C8 23.7614 10.2386 26 13 26V24ZM28 21C28 22.6569 26.6569 24 25 24V26C27.7614 26 30 23.7614 30 21H28ZM25 2C26.6569 2 28 3.34315 28 5H30C30 2.23858 27.7614 0 25 0V2ZM13 0C10.2386 0 8 2.23858 8 5H10C10 3.34315 11.3431 2 13 2V0ZM16.5 28H5V30H16.5V28ZM2 25V10H0V25H2ZM5 28C3.34315 28 2 26.6569 2 25H0C0 27.7614 2.23858 30 5 30V28ZM5 7H8V5H5V7ZM2 10C2 8.34315 3.34315 7 5 7V5C2.23858 5 0 7.23858 0 10H2ZM16.5 30C18.9853 30 21 27.9853 21 25.5H19C19 26.8807 17.8807 28 16.5 28V30Z" fill="#B3B3B3"/>
 `;
-exports.HorizontalPaddingIcon = () => lit_1.svg `
+exports.CopyIcon = CopyIcon;
+const HorizontalPaddingIcon = () => (0, lit_1.svg) `
   <svg title="horizontal padding" width="14" height="14" viewBox="0 0 29 28" fill="none">
@@ -25,3 +27,4 @@ <rect x="7" y="8" width="14" height="14" stroke="#B3B3B3" stroke-width="2"/>
 `;
-exports.VerticalPaddingIcon = () => lit_1.svg `
+exports.HorizontalPaddingIcon = HorizontalPaddingIcon;
+const VerticalPaddingIcon = () => (0, lit_1.svg) `
   <svg title="vertical padding" width="14" height="14" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -33,3 +36,4 @@ <rect x="8" y="21" width="14" height="14" transform="rotate(-90 8 21)" stroke="#B3B3B3" stroke-width="2"/>
 `;
-exports.FigmaIcon = () => lit_1.svg `
+exports.VerticalPaddingIcon = VerticalPaddingIcon;
+const FigmaIcon = () => (0, lit_1.svg) `
   <svg title="figma logo" width="11" height="16" viewBox="0 0 12 17" xmlns="http://www.w3.org/2000/svg">
@@ -45,1 +49,2 @@ <path
 `;
+exports.FigmaIcon = FigmaIcon;

cjs/es2016/FigspecViewer/InspectorView/InspectorView.js

@@ -19,3 +19,3 @@ "use strict";
 });
-exports.View = ({ node, onClose }) => {
+const View = ({ node, onClose }) => {
     if (!node) {
@@ -29,3 +29,3 @@ return null;
     const stopPropagation = (ev) => ev.stopPropagation();
-    return lit_1.html `
+    return (0, lit_1.html) `
     <div
@@ -42,3 +42,3 @@ class="inspector-view"
           <h4>${node.name}</h4>
-          ${Icons_1.CloseIcon({ onClick: onClose })}
+          ${(0, Icons_1.CloseIcon)({ onClick: onClose })}
         </div>
@@ -55,3 +55,3 @@ <div class="properties-overview">
           ${nodeStyles.fontPostScriptName
-        ? lit_1.html `<p class="inspector-property">
+        ? (0, lit_1.html) `<p class="inspector-property">
                 <span>Font:</span>
@@ -64,11 +64,11 @@ ${nodeStyles.fontPostScriptName}
       ${nodeStyles.hasPadding
-        ? lit_1.html `<div class="inspector-section">
+        ? (0, lit_1.html) `<div class="inspector-section">
             <h4>Layout</h4>
             ${nodeStyles.horizontalPadding &&
-            lit_1.html `<p class="inspector-property">
-              ${Icons_1.HorizontalPaddingIcon()} ${nodeStyles.horizontalPadding}
+            (0, lit_1.html) `<p class="inspector-property">
+              ${(0, Icons_1.HorizontalPaddingIcon)()} ${nodeStyles.horizontalPadding}
             </p>`}
             ${nodeStyles.verticalPadding &&
-            lit_1.html `<p class="inspector-property">
-              ${Icons_1.VerticalPaddingIcon()} ${nodeStyles.verticalPadding}
+            (0, lit_1.html) `<p class="inspector-property">
+              ${(0, Icons_1.VerticalPaddingIcon)()} ${nodeStyles.verticalPadding}
             </p>`}
@@ -78,6 +78,6 @@ </div>`
       ${node.characters
-        ? lit_1.html `<div class="inspector-section">
+        ? (0, lit_1.html) `<div class="inspector-section">
             <div class="title-section">
               <h4>Content</h4>
-              ${Icons_1.CopyIcon({ onClick: () => copy(node.characters) })}
+              ${(0, Icons_1.CopyIcon)({ onClick: () => copy(node.characters) })}
             </div>
@@ -89,13 +89,14 @@ <p class="node-content code-section selectable-content">
         : null}
-      ${exports.StylesSection(nodeStyles)}
+      ${(0, exports.StylesSection)(nodeStyles)}
     </div>
   `;
 };
-exports.StylesSection = (nodeStyles) => {
+exports.View = View;
+const StylesSection = (nodeStyles) => {
     const onClick = () => copy(nodeStyles.getStyleSheet());
     const styles = nodeStyles.getStyles();
-    return lit_1.html `<div class="inspector-section">
+    return (0, lit_1.html) `<div class="inspector-section">
     <div class="title-section style-section">
       <h4>CSS</h4>
-      ${Icons_1.CopyIcon({ onClick })}
+      ${(0, Icons_1.CopyIcon)({ onClick })}
     </div>
@@ -107,2 +108,3 @@ <div class="code-section selectable-content">
 };
+exports.StylesSection = StylesSection;
 const CSSProperty = (cssProperty) => {
@@ -117,3 +119,3 @@ const { property, value, color } = cssProperty;
         case "color":
-            coloredSquare = lit_1.html `<span
+            coloredSquare = (0, lit_1.html) `<span
         class="color-preview"
@@ -124,3 +126,3 @@ style="background-color: ${color}"
         case "background-image":
-            coloredSquare = lit_1.html `<span
+            coloredSquare = (0, lit_1.html) `<span
         class="color-preview"
@@ -131,7 +133,7 @@ style="background-image: ${value}"
     }
-    return lit_1.html `<div class="css-property" @click=${() => copy(utils_1.getStyleRule(cssProperty))}>
+    return (0, lit_1.html) `<div class="css-property" @click=${() => copy((0, utils_1.getStyleRule)(cssProperty))}>
     <span>${property}:</span>${coloredSquare}<span class="css-value">${value}</span>;</span>
   </div>`;
 };
-exports.styles = lit_1.css `
+exports.styles = (0, lit_1.css) `
   .inspector-view {
@@ -138,0 +140,0 @@ height: 100%;

cjs/es2016/FigspecViewer/InspectorView/utils.js

@@ -161,2 +161,3 @@ "use strict";
 };
-exports.getStyleRule = ({ property, value }) => `${property}: ${value};`;
+const getStyleRule = ({ property, value }) => `${property}: ${value};`;
+exports.getStyleRule = getStyleRule;

cjs/es2016/FigspecViewer/Node.js

@@ -7,3 +7,3 @@ "use strict";
 const utils_1 = require("./utils");
-exports.Outline = ({ node, selected = false, computedThickness, onClick, }) => {
+const Outline = ({ node, selected = false, computedThickness, onClick, }) => {
     const { x, y, width, height } = node.absoluteBoundingBox;
@@ -53,3 +53,3 @@ const radius = "cornerRadius" in node && node.cornerRadius
     ].join(" ");
-    return lit_1.svg `
+    return (0, lit_1.svg) `
     <path
@@ -66,3 +66,4 @@ class="guide"
 };
-exports.Tooltip = ({ nodeSize: { x, y, width, height }, offsetX, offsetY, reverseScale, }) => {
+exports.Outline = Outline;
+const Tooltip = ({ nodeSize: { x, y, width, height }, offsetX, offsetY, reverseScale, }) => {
     const tooltipStyle = {
@@ -73,9 +74,10 @@ top: `${offsetY + y + height}px`,
     };
-    return lit_1.html `
-    <div class="tooltip" style="${style_map_js_1.styleMap(tooltipStyle)}">
-      ${utils_1.round(width)} x ${utils_1.round(height)}
+    return (0, lit_1.html) `
+    <div class="tooltip" style="${(0, style_map_js_1.styleMap)(tooltipStyle)}">
+      ${(0, utils_1.round)(width)} x ${(0, utils_1.round)(height)}
     </div>
   `;
 };
-exports.styles = lit_1.css `
+exports.Tooltip = Tooltip;
+exports.styles = (0, lit_1.css) `
   .guide {
@@ -82,0 +84,0 @@ /*

cjs/es2016/FigspecViewer/NodeSelectableMixin.js

@@ -11,3 +11,3 @@ "use strict";
 const decorators_js_1 = require("lit/decorators.js");
-exports.NodeSelectableMixin = (superClass) => {
+const NodeSelectableMixin = (superClass) => {
     class NodeSelectable extends superClass {
@@ -30,3 +30,3 @@ constructor(...args) {
     __decorate([
-        decorators_js_1.property({
+        (0, decorators_js_1.property)({
             attribute: false,
@@ -37,1 +37,2 @@ })
 };
+exports.NodeSelectableMixin = NodeSelectableMixin;

cjs/es2016/FigspecViewer/PositionedMixin.js

@@ -8,14 +8,12 @@ "use strict";
 };
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, privateMap) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to get private field on non-instance");
-    }
-    return privateMap.get(receiver);
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, privateMap, value) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to set private field on non-instance");
-    }
-    privateMap.set(receiver, value);
-    return value;
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
@@ -26,5 +24,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const TouchGestureMixin_1 = require("./TouchGestureMixin");
-exports.PositionedMixin = (superClass) => {
-    var _isDragModeOn, _movePanel, _keyDown, _keyUp, _listenToKeyboardEvents;
-    class Positioned extends TouchGestureMixin_1.TouchGestureMixin(superClass) {
+const PositionedMixin = (superClass) => {
+    var _Positioned_isDragModeOn, _Positioned_movePanel, _Positioned_keyDown, _Positioned_keyUp, _Positioned_listenToKeyboardEvents;
+    class Positioned extends (0, TouchGestureMixin_1.TouchGestureMixin)(superClass) {
         constructor(...args) {
@@ -37,4 +35,4 @@ super(...args);
             this.panSpeed = 500;
-            _isDragModeOn.set(this, false);
-            _movePanel.set(this, (shiftX, shiftY) => {
+            _Positioned_isDragModeOn.set(this, false);
+            _Positioned_movePanel.set(this, (shiftX, shiftY) => {
                 this.panX += shiftX / this.scale / window.devicePixelRatio;
@@ -44,5 +42,5 @@ this.panY += shiftY / this.scale / window.devicePixelRatio;
             // Enable drag mode when holding the spacebar
-            _keyDown.set(this, (event) => {
-                if (event.code === "Space" && !__classPrivateFieldGet(this, _isDragModeOn)) {
-                    __classPrivateFieldSet(this, _isDragModeOn, true);
+            _Positioned_keyDown.set(this, (event) => {
+                if (event.code === "Space" && !__classPrivateFieldGet(this, _Positioned_isDragModeOn, "f")) {
+                    __classPrivateFieldSet(this, _Positioned_isDragModeOn, true, "f");
                     document.body.style.cursor = "grab";
@@ -52,11 +50,11 @@ }
             // Disable drag mode when space lets the spacebar go
-            _keyUp.set(this, (event) => {
-                if (event.code === "Space" && __classPrivateFieldGet(this, _isDragModeOn)) {
-                    __classPrivateFieldSet(this, _isDragModeOn, false);
+            _Positioned_keyUp.set(this, (event) => {
+                if (event.code === "Space" && __classPrivateFieldGet(this, _Positioned_isDragModeOn, "f")) {
+                    __classPrivateFieldSet(this, _Positioned_isDragModeOn, false, "f");
                     document.body.style.cursor = "auto";
                 }
             });
-            _listenToKeyboardEvents.set(this, () => {
-                document.addEventListener("keyup", __classPrivateFieldGet(this, _keyUp));
-                document.addEventListener("keydown", __classPrivateFieldGet(this, _keyDown));
+            _Positioned_listenToKeyboardEvents.set(this, () => {
+                document.addEventListener("keyup", __classPrivateFieldGet(this, _Positioned_keyUp, "f"));
+                document.addEventListener("keydown", __classPrivateFieldGet(this, _Positioned_keyDown, "f"));
             });
@@ -115,12 +113,12 @@ this.addEventListener("wheel", (ev) => {
                 // delta too.
-                __classPrivateFieldGet(this, _movePanel).call(this, ev.movementX, ev.movementY);
+                __classPrivateFieldGet(this, _Positioned_movePanel, "f").call(this, ev.movementX, ev.movementY);
             });
             // Listen to keyboard events to enable dragging when Space is pressed, just like in Figma
-            __classPrivateFieldGet(this, _listenToKeyboardEvents).call(this);
+            __classPrivateFieldGet(this, _Positioned_listenToKeyboardEvents, "f").call(this);
             /** @private */
             this.onmousedown = () => {
-                if (__classPrivateFieldGet(this, _isDragModeOn)) {
+                if (__classPrivateFieldGet(this, _Positioned_isDragModeOn, "f")) {
                     document.body.style.cursor = "grabbing";
                     this.onmousemove = ({ movementX, movementY }) => {
-                        __classPrivateFieldGet(this, _movePanel).call(this, movementX, movementY);
+                        __classPrivateFieldGet(this, _Positioned_movePanel, "f").call(this, movementX, movementY);
                     };
@@ -146,4 +144,4 @@ // cleanup unnecessary listeners when user stops dragging
         disconnectedCallback() {
-            document.removeEventListener("keyup", __classPrivateFieldGet(this, _keyUp));
-            document.removeEventListener("keydown", __classPrivateFieldGet(this, _keyDown));
+            document.removeEventListener("keyup", __classPrivateFieldGet(this, _Positioned_keyUp, "f"));
+            document.removeEventListener("keydown", __classPrivateFieldGet(this, _Positioned_keyDown, "f"));
             super.disconnectedCallback();
@@ -179,5 +177,5 @@ }
     }
-    _isDragModeOn = new WeakMap(), _movePanel = new WeakMap(), _keyDown = new WeakMap(), _keyUp = new WeakMap(), _listenToKeyboardEvents = new WeakMap();
+    _Positioned_isDragModeOn = new WeakMap(), _Positioned_movePanel = new WeakMap(), _Positioned_keyDown = new WeakMap(), _Positioned_keyUp = new WeakMap(), _Positioned_listenToKeyboardEvents = new WeakMap();
     __decorate([
-        decorators_js_1.property({
+        (0, decorators_js_1.property)({
             attribute: false,
@@ -187,3 +185,3 @@ })
     __decorate([
-        decorators_js_1.property({
+        (0, decorators_js_1.property)({
             attribute: false,
@@ -193,3 +191,3 @@ })
     __decorate([
-        decorators_js_1.property({
+        (0, decorators_js_1.property)({
             attribute: false,
@@ -199,3 +197,3 @@ })
     __decorate([
-        decorators_js_1.property({
+        (0, decorators_js_1.property)({
             type: Number,
@@ -206,3 +204,3 @@ attribute: "zoom-speed",
     __decorate([
-        decorators_js_1.property({
+        (0, decorators_js_1.property)({
             type: Number,
@@ -214,1 +212,2 @@ attribute: "pan-speed",
 };
+exports.PositionedMixin = PositionedMixin;

cjs/es2016/FigspecViewer/TouchGestureMixin.js

@@ -10,3 +10,3 @@ "use strict";
 }
-exports.TouchGestureMixin = (superClass) => class CTouchGesture extends superClass {
+const TouchGestureMixin = (superClass) => class CTouchGesture extends superClass {
     constructor(...args) {
@@ -73,1 +73,2 @@ super(...args);
 };
+exports.TouchGestureMixin = TouchGestureMixin;

cjs/es2016/FigspecViewer/ViewerMixin.js

@@ -8,14 +8,12 @@ "use strict";
 };
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, privateMap) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to get private field on non-instance");
-    }
-    return privateMap.get(receiver);
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, privateMap, value) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to set private field on non-instance");
-    }
-    privateMap.set(receiver, value);
-    return value;
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
@@ -35,5 +33,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const FigmaFooter = require("./Footer/Footer");
-exports.ViewerMixin = (superClass) => {
-    var _canvasSize, _effectMargins, _flattenedNodes, _handleNodeClick, _getNodeById;
-    class Viewer extends NodeSelectableMixin_1.NodeSelectableMixin(PositionedMixin_1.PositionedMixin(superClass)) {
+const ViewerMixin = (superClass) => {
+    var _Viewer_canvasSize, _Viewer_effectMargins, _Viewer_flattenedNodes, _Viewer_handleNodeClick, _Viewer_getNodeById;
+    class Viewer extends (0, NodeSelectableMixin_1.NodeSelectableMixin)((0, PositionedMixin_1.PositionedMixin)(superClass)) {
         constructor(...args) {
@@ -44,6 +42,6 @@ super(...args);
             // Cached values
-            _canvasSize.set(this, void 0);
-            _effectMargins.set(this, void 0);
-            _flattenedNodes.set(this, void 0);
-            _handleNodeClick.set(this, (node) => (ev) => {
+            _Viewer_canvasSize.set(this, void 0);
+            _Viewer_effectMargins.set(this, void 0);
+            _Viewer_flattenedNodes.set(this, void 0);
+            _Viewer_handleNodeClick.set(this, (node) => (ev) => {
                 ev.preventDefault();
@@ -53,5 +51,5 @@ ev.stopPropagation();
             });
-            _getNodeById.set(this, (id) => {
+            _Viewer_getNodeById.set(this, (id) => {
                 var _a, _b;
-                return (_b = (_a = __classPrivateFieldGet(this, _flattenedNodes)) === null || _a === void 0 ? void 0 : _a.find((n) => n.id === id)) !== null && _b !== void 0 ? _b : null;
+                return (_b = (_a = __classPrivateFieldGet(this, _Viewer_flattenedNodes, "f")) === null || _a === void 0 ? void 0 : _a.find((n) => n.id === id)) !== null && _b !== void 0 ? _b : null;
             });
@@ -62,4 +60,4 @@ }
             const styles = super.styles;
-            return utils_1.extendStyles(styles, [
-                lit_1.css `
+            return (0, utils_1.extendStyles)(styles, [
+                (0, lit_1.css) `
           :host {
@@ -162,3 +160,3 @@ --default-error-bg: #fff;
         get error() {
-            if (!__classPrivateFieldGet(this, _canvasSize) || !__classPrivateFieldGet(this, _flattenedNodes)) {
+            if (!__classPrivateFieldGet(this, _Viewer_canvasSize, "f") || !__classPrivateFieldGet(this, _Viewer_flattenedNodes, "f")) {
                 return ErrorMessage.ErrorMessage({
@@ -187,3 +185,3 @@ title: "Error",
             }
-            const canvasSize = __classPrivateFieldGet(this, _canvasSize);
+            const canvasSize = __classPrivateFieldGet(this, _Viewer_canvasSize, "f");
             const reverseScale = 1 / this.scale;
@@ -193,3 +191,3 @@ const guideThickness = `calc(var(--guide-thickness) * ${reverseScale})`;
             const computedGuideTooltipFontSize = parseFloat(getComputedStyle(this).getPropertyValue("--guide-tooltip-font-size"));
-            return lit_1.html `
+            return (0, lit_1.html) `
         <div class="spec-canvas-wrapper" @click=${this.deselectNode}>
@@ -207,12 +205,14 @@ <div
                 var _a;
-                const node = __classPrivateFieldGet(this, _getNodeById).call(this, nodeId);
+                const node = __classPrivateFieldGet(this, _Viewer_getNodeById, "f").call(this, nodeId);
                 if (!node ||
                     !("absoluteBoundingBox" in node) ||
-                    !((_a = __classPrivateFieldGet(this, _effectMargins)) === null || _a === void 0 ? void 0 : _a[node.id])) {
+                    !((_a = __classPrivateFieldGet(this, _Viewer_effectMargins, "f")) === null || _a === void 0 ? void 0 : _a[node.id])) {
                     return null;
                 }
-                const margin = __classPrivateFieldGet(this, _effectMargins)[node.id];
-                return lit_1.html `
-                <img class="rendered-image" src="${uri}"
-                style=${style_map_js_1.styleMap({
+                const margin = __classPrivateFieldGet(this, _Viewer_effectMargins, "f")[node.id];
+                return (0, lit_1.html) `
+                <img
+                  class="rendered-image"
+                  src="${uri}"
+                  style=${(0, style_map_js_1.styleMap)({
                     top: `${node.absoluteBoundingBox.y - canvasSize.y}px`,
@@ -230,4 +230,4 @@ left: `${node.absoluteBoundingBox.x - canvasSize.x}px`,
                         "px",
-                })}"
-                " />
+                })}
+                />
               `;
@@ -242,9 +242,9 @@ })}
                 })}
-            ${lit_1.svg `
+            ${(0, lit_1.svg) `
             <svg
               class="guides"
-              viewBox="0 0 5 5"
-              width="5"
-              height="5"
-              style=${style_map_js_1.styleMap({
+              viewBox="0 0 ${canvasSize.width} ${canvasSize.height}"
+              width=${canvasSize.width}
+              height=${canvasSize.height}
+              style=${(0, style_map_js_1.styleMap)({
                 left: `${-canvasSize.x}px`,
@@ -262,3 +262,3 @@ top: `${-canvasSize.y}px`,
 
-              ${__classPrivateFieldGet(this, _flattenedNodes).map((node) => {
+              ${__classPrivateFieldGet(this, _Viewer_flattenedNodes, "f").map((node) => {
                 var _a;
@@ -268,3 +268,3 @@ if (node.id === ((_a = this.selectedNode) === null || _a === void 0 ? void 0 : _a.id)) {
                 }
-                return lit_1.svg `
+                return (0, lit_1.svg) `
                   <g>
@@ -274,3 +274,3 @@ ${Node.Outline({
                     computedThickness: computedGuideThickness * reverseScale,
-                    onClick: __classPrivateFieldGet(this, _handleNodeClick).call(this, node),
+                    onClick: __classPrivateFieldGet(this, _Viewer_handleNodeClick, "f").call(this, node),
                 })}
@@ -317,4 +317,4 @@ ${this.selectedNode &&
             }
-            __classPrivateFieldSet(this, _canvasSize, node.type === "CANVAS" ? getCanvasSize(node) : node.absoluteBoundingBox);
-            __classPrivateFieldSet(this, _flattenedNodes, flattenNode(node));
+            __classPrivateFieldSet(this, _Viewer_canvasSize, node.type === "CANVAS" ? getCanvasSize(node) : node.absoluteBoundingBox, "f");
+            __classPrivateFieldSet(this, _Viewer_flattenedNodes, flattenNode(node), "f");
             // Since above properties aren't "attribute", their changes does not
@@ -329,5 +329,5 @@ // trigger an update. We need to manually request an update.
             const containers = Object.keys(this.__images)
-                .map(__classPrivateFieldGet(this, _getNodeById))
+                .map(__classPrivateFieldGet(this, _Viewer_getNodeById, "f"))
                 .filter((n) => !!n);
-            __classPrivateFieldSet(this, _effectMargins, containers.reduce((margin, node) => {
+            __classPrivateFieldSet(this, _Viewer_effectMargins, containers.reduce((margin, node) => {
                 if (!("absoluteBoundingBox" in node)) {
@@ -337,9 +337,9 @@ return margin;
                 return Object.assign(Object.assign({}, margin), { [node.id]: getEffectMargin(node, flattenNode(node)) });
-            }, {}));
+            }, {}), "f");
             this.requestUpdate();
         }
         resetZoom() {
-            if (__classPrivateFieldGet(this, _canvasSize)) {
+            if (__classPrivateFieldGet(this, _Viewer_canvasSize, "f")) {
                 // Set initial zoom level based on element size
-                const { width, height } = __classPrivateFieldGet(this, _canvasSize);
+                const { width, height } = __classPrivateFieldGet(this, _Viewer_canvasSize, "f");
                 const { width: elementWidth, height: elementHeight, } = this.getBoundingClientRect();
@@ -352,5 +352,5 @@ const wDiff = elementWidth / (width + this.zoomMargin * 2);
     }
-    _canvasSize = new WeakMap(), _effectMargins = new WeakMap(), _flattenedNodes = new WeakMap(), _handleNodeClick = new WeakMap(), _getNodeById = new WeakMap();
+    _Viewer_canvasSize = new WeakMap(), _Viewer_effectMargins = new WeakMap(), _Viewer_flattenedNodes = new WeakMap(), _Viewer_handleNodeClick = new WeakMap(), _Viewer_getNodeById = new WeakMap();
     __decorate([
-        decorators_js_1.property({
+        (0, decorators_js_1.property)({
             type: Number,
@@ -361,3 +361,3 @@ attribute: "zoom-margin",
     __decorate([
-        decorators_js_1.property({
+        (0, decorators_js_1.property)({
             type: String,
@@ -369,2 +369,3 @@ attribute: "link",
 };
+exports.ViewerMixin = ViewerMixin;
 function getCanvasSize(node) {
@@ -371,0 +372,0 @@ const left = [];

esm/es2015/FigspecViewer/FigspecFileViewer.d.ts

@@ -67,3 +67,3 @@ import type * as Figma from "figma-js";
     /** @private */
-    get error(): string | Error | import("lit-html").TemplateResult<1 | 2> | undefined;
+    get error(): string | Error | import("lit-html").TemplateResult<2 | 1> | undefined;
     static get styles(): import("lit").CSSResultArray;
@@ -70,0 +70,0 @@ render(): import("lit-html").TemplateResult<1>;

esm/es2015/FigspecViewer/FigspecFileViewer.js

@@ -7,9 +7,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, privateMap) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to get private field on non-instance");
-    }
-    return privateMap.get(receiver);
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _selectFirstPage, _handlePageChange;
+var _FigspecFileViewer_selectFirstPage, _FigspecFileViewer_handlePageChange;
 import { LitElement, css, html } from "lit";
@@ -80,3 +79,3 @@ import { property } from "lit/decorators.js";
         this.selectedPage = null;
-        _selectFirstPage.set(this, () => {
+        _FigspecFileViewer_selectFirstPage.set(this, () => {
             var _a;
@@ -87,8 +86,10 @@ if (!this.documentNode) {
             }
-            this.selectedPage = (_a = this.documentNode.document.children.filter((c) => c.type === "CANVAS")[0]) !== null && _a !== void 0 ? _a : null;
+            this.selectedPage =
+                (_a = this.documentNode.document.children.filter((c) => c.type === "CANVAS")[0]) !== null && _a !== void 0 ? _a : null;
         });
-        _handlePageChange.set(this, (ev) => {
+        _FigspecFileViewer_handlePageChange.set(this, (ev) => {
             var _a, _b;
             const target = ev.currentTarget;
-            this.selectedPage = (_b = (_a = this.documentNode) === null || _a === void 0 ? void 0 : _a.document.children.find((c) => c.id === target.value)) !== null && _b !== void 0 ? _b : null;
+            this.selectedPage =
+                (_b = (_a = this.documentNode) === null || _a === void 0 ? void 0 : _a.document.children.find((c) => c.id === target.value)) !== null && _b !== void 0 ? _b : null;
             if (this.selectedPage) {
@@ -180,3 +181,3 @@ this.__updateTree(this.selectedPage);
       <div class="controls">
-        <select @change=${__classPrivateFieldGet(this, _handlePageChange)}>
+        <select @change=${__classPrivateFieldGet(this, _FigspecFileViewer_handlePageChange, "f")}>
           ${(_a = this.documentNode) === null || _a === void 0 ? void 0 : _a.document.children.map((c) => html `<option value=${c.id}>${c.name}</option>`)}
@@ -199,3 +200,3 @@ </select>
         if (this.documentNode) {
-            __classPrivateFieldGet(this, _selectFirstPage).call(this);
+            __classPrivateFieldGet(this, _FigspecFileViewer_selectFirstPage, "f").call(this);
             if (this.selectedPage) {
@@ -210,3 +211,3 @@ this.__updateTree(this.selectedPage);
         if (changedProperties.has("documentNode")) {
-            __classPrivateFieldGet(this, _selectFirstPage).call(this);
+            __classPrivateFieldGet(this, _FigspecFileViewer_selectFirstPage, "f").call(this);
             if (this.selectedPage) {
@@ -222,3 +223,3 @@ this.__updateTree(this.selectedPage);
 }
-_selectFirstPage = new WeakMap(), _handlePageChange = new WeakMap();
+_FigspecFileViewer_selectFirstPage = new WeakMap(), _FigspecFileViewer_handlePageChange = new WeakMap();
 __decorate([
@@ -225,0 +226,0 @@ property({

esm/es2015/FigspecViewer/FigspecFrameViewer.d.ts

@@ -69,3 +69,3 @@ import type * as Figma from "figma-js";
     /** @private */
-    get error(): string | Error | import("lit-html").TemplateResult<1 | 2> | undefined;
+    get error(): string | Error | import("lit-html").TemplateResult<2 | 1> | undefined;
     getMetadata(): {
@@ -72,0 +72,0 @@ fileName: string;

esm/es2015/FigspecViewer/Footer/Footer.d.ts

@@ -6,2 +6,2 @@ export declare const styles: import("lit").CSSResult;
     fileName: string;
-} | undefined) => import("lit-html").TemplateResult<1> | null;
+}) => import("lit-html").TemplateResult<1> | null;

esm/es2015/FigspecViewer/PositionedMixin.js

@@ -7,14 +7,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, privateMap) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to get private field on non-instance");
-    }
-    return privateMap.get(receiver);
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, privateMap, value) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to set private field on non-instance");
-    }
-    privateMap.set(receiver, value);
-    return value;
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
@@ -24,3 +22,3 @@ import { property } from "lit/decorators.js";
 export const PositionedMixin = (superClass) => {
-    var _isDragModeOn, _movePanel, _keyDown, _keyUp, _listenToKeyboardEvents;
+    var _Positioned_isDragModeOn, _Positioned_movePanel, _Positioned_keyDown, _Positioned_keyUp, _Positioned_listenToKeyboardEvents;
     class Positioned extends TouchGestureMixin(superClass) {
@@ -34,4 +32,4 @@ constructor(...args) {
             this.panSpeed = 500;
-            _isDragModeOn.set(this, false);
-            _movePanel.set(this, (shiftX, shiftY) => {
+            _Positioned_isDragModeOn.set(this, false);
+            _Positioned_movePanel.set(this, (shiftX, shiftY) => {
                 this.panX += shiftX / this.scale / window.devicePixelRatio;
@@ -41,5 +39,5 @@ this.panY += shiftY / this.scale / window.devicePixelRatio;
             // Enable drag mode when holding the spacebar
-            _keyDown.set(this, (event) => {
-                if (event.code === "Space" && !__classPrivateFieldGet(this, _isDragModeOn)) {
-                    __classPrivateFieldSet(this, _isDragModeOn, true);
+            _Positioned_keyDown.set(this, (event) => {
+                if (event.code === "Space" && !__classPrivateFieldGet(this, _Positioned_isDragModeOn, "f")) {
+                    __classPrivateFieldSet(this, _Positioned_isDragModeOn, true, "f");
                     document.body.style.cursor = "grab";
@@ -49,11 +47,11 @@ }
             // Disable drag mode when space lets the spacebar go
-            _keyUp.set(this, (event) => {
-                if (event.code === "Space" && __classPrivateFieldGet(this, _isDragModeOn)) {
-                    __classPrivateFieldSet(this, _isDragModeOn, false);
+            _Positioned_keyUp.set(this, (event) => {
+                if (event.code === "Space" && __classPrivateFieldGet(this, _Positioned_isDragModeOn, "f")) {
+                    __classPrivateFieldSet(this, _Positioned_isDragModeOn, false, "f");
                     document.body.style.cursor = "auto";
                 }
             });
-            _listenToKeyboardEvents.set(this, () => {
-                document.addEventListener("keyup", __classPrivateFieldGet(this, _keyUp));
-                document.addEventListener("keydown", __classPrivateFieldGet(this, _keyDown));
+            _Positioned_listenToKeyboardEvents.set(this, () => {
+                document.addEventListener("keyup", __classPrivateFieldGet(this, _Positioned_keyUp, "f"));
+                document.addEventListener("keydown", __classPrivateFieldGet(this, _Positioned_keyDown, "f"));
             });
@@ -112,12 +110,12 @@ this.addEventListener("wheel", (ev) => {
                 // delta too.
-                __classPrivateFieldGet(this, _movePanel).call(this, ev.movementX, ev.movementY);
+                __classPrivateFieldGet(this, _Positioned_movePanel, "f").call(this, ev.movementX, ev.movementY);
             });
             // Listen to keyboard events to enable dragging when Space is pressed, just like in Figma
-            __classPrivateFieldGet(this, _listenToKeyboardEvents).call(this);
+            __classPrivateFieldGet(this, _Positioned_listenToKeyboardEvents, "f").call(this);
             /** @private */
             this.onmousedown = () => {
-                if (__classPrivateFieldGet(this, _isDragModeOn)) {
+                if (__classPrivateFieldGet(this, _Positioned_isDragModeOn, "f")) {
                     document.body.style.cursor = "grabbing";
                     this.onmousemove = ({ movementX, movementY }) => {
-                        __classPrivateFieldGet(this, _movePanel).call(this, movementX, movementY);
+                        __classPrivateFieldGet(this, _Positioned_movePanel, "f").call(this, movementX, movementY);
                     };
@@ -143,4 +141,4 @@ // cleanup unnecessary listeners when user stops dragging
         disconnectedCallback() {
-            document.removeEventListener("keyup", __classPrivateFieldGet(this, _keyUp));
-            document.removeEventListener("keydown", __classPrivateFieldGet(this, _keyDown));
+            document.removeEventListener("keyup", __classPrivateFieldGet(this, _Positioned_keyUp, "f"));
+            document.removeEventListener("keydown", __classPrivateFieldGet(this, _Positioned_keyDown, "f"));
             super.disconnectedCallback();
@@ -176,3 +174,3 @@ }
     }
-    _isDragModeOn = new WeakMap(), _movePanel = new WeakMap(), _keyDown = new WeakMap(), _keyUp = new WeakMap(), _listenToKeyboardEvents = new WeakMap();
+    _Positioned_isDragModeOn = new WeakMap(), _Positioned_movePanel = new WeakMap(), _Positioned_keyDown = new WeakMap(), _Positioned_keyUp = new WeakMap(), _Positioned_listenToKeyboardEvents = new WeakMap();
     __decorate([
@@ -179,0 +177,0 @@ property({

esm/es2015/FigspecViewer/ViewerMixin.js

@@ -7,14 +7,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, privateMap) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to get private field on non-instance");
-    }
-    return privateMap.get(receiver);
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, privateMap, value) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to set private field on non-instance");
-    }
-    privateMap.set(receiver, value);
-    return value;
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
@@ -33,3 +31,3 @@ import { css, html, svg } from "lit";
 export const ViewerMixin = (superClass) => {
-    var _canvasSize, _effectMargins, _flattenedNodes, _handleNodeClick, _getNodeById;
+    var _Viewer_canvasSize, _Viewer_effectMargins, _Viewer_flattenedNodes, _Viewer_handleNodeClick, _Viewer_getNodeById;
     class Viewer extends NodeSelectableMixin(PositionedMixin(superClass)) {
@@ -41,6 +39,6 @@ constructor(...args) {
             // Cached values
-            _canvasSize.set(this, void 0);
-            _effectMargins.set(this, void 0);
-            _flattenedNodes.set(this, void 0);
-            _handleNodeClick.set(this, (node) => (ev) => {
+            _Viewer_canvasSize.set(this, void 0);
+            _Viewer_effectMargins.set(this, void 0);
+            _Viewer_flattenedNodes.set(this, void 0);
+            _Viewer_handleNodeClick.set(this, (node) => (ev) => {
                 ev.preventDefault();
@@ -50,5 +48,5 @@ ev.stopPropagation();
             });
-            _getNodeById.set(this, (id) => {
+            _Viewer_getNodeById.set(this, (id) => {
                 var _a, _b;
-                return (_b = (_a = __classPrivateFieldGet(this, _flattenedNodes)) === null || _a === void 0 ? void 0 : _a.find((n) => n.id === id)) !== null && _b !== void 0 ? _b : null;
+                return (_b = (_a = __classPrivateFieldGet(this, _Viewer_flattenedNodes, "f")) === null || _a === void 0 ? void 0 : _a.find((n) => n.id === id)) !== null && _b !== void 0 ? _b : null;
             });
@@ -158,3 +156,3 @@ }
         get error() {
-            if (!__classPrivateFieldGet(this, _canvasSize) || !__classPrivateFieldGet(this, _flattenedNodes)) {
+            if (!__classPrivateFieldGet(this, _Viewer_canvasSize, "f") || !__classPrivateFieldGet(this, _Viewer_flattenedNodes, "f")) {
                 return ErrorMessage.ErrorMessage({
@@ -183,3 +181,3 @@ title: "Error",
             }
-            const canvasSize = __classPrivateFieldGet(this, _canvasSize);
+            const canvasSize = __classPrivateFieldGet(this, _Viewer_canvasSize, "f");
             const reverseScale = 1 / this.scale;
@@ -202,12 +200,14 @@ const guideThickness = `calc(var(--guide-thickness) * ${reverseScale})`;
                 var _a;
-                const node = __classPrivateFieldGet(this, _getNodeById).call(this, nodeId);
+                const node = __classPrivateFieldGet(this, _Viewer_getNodeById, "f").call(this, nodeId);
                 if (!node ||
                     !("absoluteBoundingBox" in node) ||
-                    !((_a = __classPrivateFieldGet(this, _effectMargins)) === null || _a === void 0 ? void 0 : _a[node.id])) {
+                    !((_a = __classPrivateFieldGet(this, _Viewer_effectMargins, "f")) === null || _a === void 0 ? void 0 : _a[node.id])) {
                     return null;
                 }
-                const margin = __classPrivateFieldGet(this, _effectMargins)[node.id];
+                const margin = __classPrivateFieldGet(this, _Viewer_effectMargins, "f")[node.id];
                 return html `
-                <img class="rendered-image" src="${uri}"
-                style=${styleMap({
+                <img
+                  class="rendered-image"
+                  src="${uri}"
+                  style=${styleMap({
                     top: `${node.absoluteBoundingBox.y - canvasSize.y}px`,
@@ -225,4 +225,4 @@ left: `${node.absoluteBoundingBox.x - canvasSize.x}px`,
                         "px",
-                })}"
-                " />
+                })}
+                />
               `;
@@ -240,5 +240,5 @@ })}
               class="guides"
-              viewBox="0 0 5 5"
-              width="5"
-              height="5"
+              viewBox="0 0 ${canvasSize.width} ${canvasSize.height}"
+              width=${canvasSize.width}
+              height=${canvasSize.height}
               style=${styleMap({
@@ -257,3 +257,3 @@ left: `${-canvasSize.x}px`,
 
-              ${__classPrivateFieldGet(this, _flattenedNodes).map((node) => {
+              ${__classPrivateFieldGet(this, _Viewer_flattenedNodes, "f").map((node) => {
                 var _a;
@@ -268,3 +268,3 @@ if (node.id === ((_a = this.selectedNode) === null || _a === void 0 ? void 0 : _a.id)) {
                     computedThickness: computedGuideThickness * reverseScale,
-                    onClick: __classPrivateFieldGet(this, _handleNodeClick).call(this, node),
+                    onClick: __classPrivateFieldGet(this, _Viewer_handleNodeClick, "f").call(this, node),
                 })}
@@ -311,4 +311,4 @@ ${this.selectedNode &&
             }
-            __classPrivateFieldSet(this, _canvasSize, node.type === "CANVAS" ? getCanvasSize(node) : node.absoluteBoundingBox);
-            __classPrivateFieldSet(this, _flattenedNodes, flattenNode(node));
+            __classPrivateFieldSet(this, _Viewer_canvasSize, node.type === "CANVAS" ? getCanvasSize(node) : node.absoluteBoundingBox, "f");
+            __classPrivateFieldSet(this, _Viewer_flattenedNodes, flattenNode(node), "f");
             // Since above properties aren't "attribute", their changes does not
@@ -323,5 +323,5 @@ // trigger an update. We need to manually request an update.
             const containers = Object.keys(this.__images)
-                .map(__classPrivateFieldGet(this, _getNodeById))
+                .map(__classPrivateFieldGet(this, _Viewer_getNodeById, "f"))
                 .filter((n) => !!n);
-            __classPrivateFieldSet(this, _effectMargins, containers.reduce((margin, node) => {
+            __classPrivateFieldSet(this, _Viewer_effectMargins, containers.reduce((margin, node) => {
                 if (!("absoluteBoundingBox" in node)) {
@@ -331,9 +331,9 @@ return margin;
                 return Object.assign(Object.assign({}, margin), { [node.id]: getEffectMargin(node, flattenNode(node)) });
-            }, {}));
+            }, {}), "f");
             this.requestUpdate();
         }
         resetZoom() {
-            if (__classPrivateFieldGet(this, _canvasSize)) {
+            if (__classPrivateFieldGet(this, _Viewer_canvasSize, "f")) {
                 // Set initial zoom level based on element size
-                const { width, height } = __classPrivateFieldGet(this, _canvasSize);
+                const { width, height } = __classPrivateFieldGet(this, _Viewer_canvasSize, "f");
                 const { width: elementWidth, height: elementHeight, } = this.getBoundingClientRect();
@@ -346,3 +346,3 @@ const wDiff = elementWidth / (width + this.zoomMargin * 2);
     }
-    _canvasSize = new WeakMap(), _effectMargins = new WeakMap(), _flattenedNodes = new WeakMap(), _handleNodeClick = new WeakMap(), _getNodeById = new WeakMap();
+    _Viewer_canvasSize = new WeakMap(), _Viewer_effectMargins = new WeakMap(), _Viewer_flattenedNodes = new WeakMap(), _Viewer_handleNodeClick = new WeakMap(), _Viewer_getNodeById = new WeakMap();
     __decorate([
@@ -349,0 +349,0 @@ property({

package.json

@@ -8,3 +8,3 @@ {
   ],
-  "version": "1.0.1",
+  "version": "1.0.3",
   "contributors": [
@@ -16,2 +16,6 @@ {
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pocka/figspec.git"
+  },
   "license": "MIT",
@@ -34,16 +38,13 @@ "module": "esm/es2015/index.js",
   "devDependencies": {
-    "@babel/core": "^7.11.6",
-    "@storybook/addon-actions": "^6.4.0",
-    "@storybook/addon-essentials": "^6.4.0",
-    "@storybook/addon-links": "^6.4.0",
-    "@storybook/web-components": "^6.4.0",
-    "@types/react": "^16.9.52",
-    "babel-loader": "^8.1.0",
+    "@picocss/pico": "^1.5.10",
+    "commander": "^6.1.0",
     "dotenv": "^8.2.0",
     "figma-js": "^1.13.0",
-    "react-is": "^16.13.1",
-    "ts-loader": "^8.0.5",
-    "typescript": "^4.0.3",
-    "web-component-analyzer": "^1.1.6",
-    "web-component-analyzer-loader": "^0.1.1"
+    "glob": "^10.3.2",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
+    "node-fetch": "^2.6.1",
+    "prettier": "^2.1.2",
+    "typescript": "^4.7.4",
+    "vite": "^4.4.2"
   },
@@ -53,8 +54,16 @@ "scripts": {
     "build:cjs": "tsc --outDir cjs/es2016 --target es2016 --module CommonJS",
-    "build:default": "yarn build:esm && yarn build:cjs",
-    "build": "yarn build:default",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "prepublishOnly": "yarn build"
-  }
+    "build": "yarn build:esm && yarn build:cjs",
+    "prepublishOnly": "yarn build",
+    "generate-static-figma-file": "node ./scripts/generateStaticFigmaFile/index.mjs",
+    "postinstallDev": "husky install",
+    "dev": "vite ./website",
+    "build:website": "vite build ./website"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,css,html,md,yml,json}": [
+      "prettier --write"
+    ]
+  },
+  "prettier": {},
+  "packageManager": "yarn@3.2.1"
 }

README.md

@@ -44,3 +44,3 @@ # @figspec/components
 
-To see examples and API docs, please check out [Storybook](https://figspec.netlify.app/?path=/docs/components-figspec-viewer--defaults).
+To see examples and API docs, please check out [docs site](https://figspec.netlify.app/).
 
@@ -65,1 +65,5 @@ NOTE: We don't provide bundled scripts yet. If you want to put the script in head tag, please build the files at your own.
 The bundled codes are emitted under `esm/es2015` and `cjs/es2016`.
+
+## Related packages
+
+- [`@figspec/react`](https://github.com/pocka/figspec-react) ... React bindings for this package.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

11

decreased by-21.43%

Number of lines in readme file

68

increased by6.25%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

190517

decreased by-34.55%

Number of package files

71

decreased by-25.26%

Lines of code

4868

decreased by-37.86%