@nice2dev/ui-graphics 1.3.15 → 1.3.17

package/dist/esm/vector/VectorEditor.js

@@ -1,120 +1,295 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { NiceButton, NiceAppShell, NiceModal, NiceTextArea } from '@nice2dev/ui';
-import { NiceIcon } from '@nice2dev/ui-core';
-import { useRef, useState, useCallback, useEffect } from 'react';
-import { EditorAskDialog } from '../core/editorAsk.js';
-import { useNiceTranslation } from '../core/i18n.js';
-import { useVectorEditor } from './useVectorEditor.js';
-import { frameToTransform, sampleAnimation } from './vectorAnimation.js';
-import styles from './VectorEditor.module.css.js';
-import VectorEditorMenuBar from './VectorEditorMenuBar.js';
-import VectorEditorRightPanel from './VectorEditorRightPanel.js';
-import { ShapeRenderer } from './VectorEditorShapeRenderer.js';
-import VectorEditorStatusBar from './VectorEditorStatusBar.js';
-import { TOOLS } from './vectorEditorTypes.js';
-import { shapesToIconSnippet } from './vectorIconExport.js';
-import { iconComponentToShapes } from './vectorIconImport.js';
-
-const NiceVectorEditor = ({ width: artW = 512, height: artH = 512, className, onSaveToLibrary, library, initialIcon, iconCategory, onExportIconSnippet, }) => {
-    const api = useVectorEditor({ artW, artH, onSaveToLibrary });
-    const { t } = useNiceTranslation();
-    const seededIcon = useRef(null);
-    const [snippetOpen, setSnippetOpen] = useState(false);
-    const [snippetText, setSnippetText] = useState('');
-    const exportSnippet = useCallback(() => {
-        var _a;
-        const name = (initialIcon === null || initialIcon === void 0 ? void 0 : initialIcon.name) || 'Custom';
-        const snippet = shapesToIconSnippet(api.shapes, {
-            iconName: name,
-            // `wireframe` is derived from `solid`, never authored as its own layer in
-            // `createIcon({ paths })` — a snippet must therefore land in `solid`.
-            variant: (initialIcon === null || initialIcon === void 0 ? void 0 : initialIcon.variant) === 'wireframe' ? 'solid' : ((_a = initialIcon === null || initialIcon === void 0 ? void 0 : initialIcon.variant) !== null && _a !== void 0 ? _a : 'solid'),
-            artW,
-            artH,
-        });
-        setSnippetText(snippet);
-        setSnippetOpen(true);
-        if (typeof navigator !== 'undefined' && navigator.clipboard) {
-            navigator.clipboard.writeText(snippet).catch(() => { });
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { NiceButton, NiceAppShell, NiceModal, NiceTextArea } from "@nice2dev/ui";
+import { NiceIcon } from "@nice2dev/ui-core";
+import { useRef, useState, useCallback, useEffect } from "react";
+import { EditorAskDialog } from "../core/editorAsk.js";
+import { useNiceTranslation } from "../core/i18n.js";
+import { useVectorEditor } from "./useVectorEditor.js";
+import { frameToTransform, sampleAnimation } from "./vectorAnimation.js";
+import styles from "./VectorEditor.module.css.js";
+import VectorEditorMenuBar from "./VectorEditorMenuBar.js";
+import VectorEditorRightPanel from "./VectorEditorRightPanel.js";
+import { ShapeRenderer } from "./VectorEditorShapeRenderer.js";
+import VectorEditorStatusBar from "./VectorEditorStatusBar.js";
+import { TOOLS } from "./vectorEditorTypes.js";
+import { shapesToIconSnippet } from "./vectorIconExport.js";
+import { iconComponentToShapes } from "./vectorIconImport.js";
+const NiceVectorEditor = ({
+  width: artW = 512,
+  height: artH = 512,
+  className,
+  onSaveToLibrary,
+  library,
+  initialIcon,
+  iconCategory,
+  onExportIconSnippet
+}) => {
+  const api = useVectorEditor({ artW, artH, onSaveToLibrary });
+  const { t } = useNiceTranslation();
+  const seededIcon = useRef(null);
+  const [snippetOpen, setSnippetOpen] = useState(false);
+  const [snippetText, setSnippetText] = useState("");
+  const exportSnippet = useCallback(() => {
+    const name = initialIcon?.name || "Custom";
+    const snippet = shapesToIconSnippet(api.shapes, {
+      iconName: name,
+      // `wireframe` is derived from `solid`, never authored as its own layer in
+      // `createIcon({ paths })` — a snippet must therefore land in `solid`.
+      variant: initialIcon?.variant === "wireframe" ? "solid" : initialIcon?.variant ?? "solid",
+      artW,
+      artH
+    });
+    setSnippetText(snippet);
+    setSnippetOpen(true);
+    if (typeof navigator !== "undefined" && navigator.clipboard) {
+      navigator.clipboard.writeText(snippet).catch(() => {
+      });
+    }
+    onExportIconSnippet?.(snippet, name, iconCategory);
+  }, [api.shapes, artW, artH, initialIcon, iconCategory, onExportIconSnippet]);
+  useEffect(() => {
+    if (!initialIcon) {
+      return;
+    }
+    const key = initialIcon.name;
+    if (seededIcon.current === key) {
+      return;
+    }
+    seededIcon.current = key;
+    const shapes2 = iconComponentToShapes(initialIcon.Component, {
+      artW,
+      artH,
+      iconProps: {
+        variant: initialIcon.variant ?? "solid",
+        ...initialIcon.iconProps ?? {}
+      }
+    });
+    if (shapes2.length > 0) {
+      api.setShapes(shapes2);
+      api.snap(shapes2);
+    }
+  }, [initialIcon, artW, artH, api]);
+  const {
+    shapes,
+    selId,
+    tool,
+    zoom,
+    px,
+    py,
+    dlgSvg,
+    svgText,
+    gridSize,
+    boxRef,
+    fInp,
+    animations,
+    previewTime,
+    isPlaying,
+    onDown,
+    onMove,
+    onUp,
+    onWheel,
+    onDblClick,
+    openFile,
+    switchTool,
+    importSVGString,
+    setDlgSvg,
+    setSvgText
+  } = api;
+  const toolRail = /* @__PURE__ */ jsx("div", { className: styles.toolbar, children: TOOLS.map((t2) => /* @__PURE__ */ jsx(
+    NiceButton,
+    {
+      className: `${styles.toolBtn} ${tool === t2.id ? styles.toolBtnActive : ""}`,
+      onClick: () => switchTool(t2.id),
+      "aria-label": `${t2.label} (${t2.key})`,
+      variant: tool === t2.id ? "primary" : "ghost",
+      size: "sm",
+      children: /* @__PURE__ */ jsx(NiceIcon, { name: t2.icon, size: "sm" })
+    },
+    t2.id
+  )) });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(EditorAskDialog, { ask: api.pendingAsk }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fInp,
+        type: "file",
+        accept: ".svg",
+        style: { display: "none" },
+        onChange: (e) => {
+          const f = e.target.files?.[0];
+          if (f) {
+            openFile(f);
+          }
+          e.target.value = "";
         }
-        onExportIconSnippet === null || onExportIconSnippet === void 0 ? void 0 : onExportIconSnippet(snippet, name, iconCategory);
-    }, [api.shapes, artW, artH, initialIcon, iconCategory, onExportIconSnippet]);
-    useEffect(() => {
-        var _a, _b;
-        if (!initialIcon) {
-            return;
-        }
-        const key = initialIcon.name;
-        if (seededIcon.current === key) {
-            return;
-        }
-        seededIcon.current = key;
-        const shapes = iconComponentToShapes(initialIcon.Component, {
-            artW,
-            artH,
-            iconProps: {
-                variant: (_a = initialIcon.variant) !== null && _a !== void 0 ? _a : 'solid',
-                ...((_b = initialIcon.iconProps) !== null && _b !== void 0 ? _b : {}),
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NiceAppShell,
+      {
+        className,
+        flush: true,
+        menubar: /* @__PURE__ */ jsx(
+          VectorEditorMenuBar,
+          {
+            api,
+            hasOnSaveToLibrary: !!onSaveToLibrary,
+            onExportIconSnippet: initialIcon || onExportIconSnippet ? exportSnippet : void 0
+          }
+        ),
+        sidebar: toolRail,
+        rightSidebar: /* @__PURE__ */ jsx(VectorEditorRightPanel, { api, library, artW, artH }),
+        rightSidebarWidth: 320,
+        statusBar: /* @__PURE__ */ jsx(VectorEditorStatusBar, { api, artW, artH }),
+        children: /* @__PURE__ */ jsx("div", { ref: boxRef, className: styles.canvasContainer, children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            viewBox: `0 0 ${artW} ${artH}`,
+            onMouseDown: onDown,
+            onMouseMove: onMove,
+            onMouseUp: onUp,
+            onMouseLeave: () => {
             },
-        });
-        if (shapes.length > 0) {
-            api.setShapes(shapes);
-            api.snap(shapes);
-        }
-    }, [initialIcon, artW, artH, api]);
-    const { shapes, selId, tool, zoom, px, py, dlgSvg, svgText, gridSize, boxRef, fInp, animations, previewTime, isPlaying, onDown, onMove, onUp, onWheel, onDblClick, openFile, switchTool, importSVGString, setDlgSvg, setSvgText, } = api;
-    const toolRail = (jsx("div", { className: styles.toolbar, children: TOOLS.map((t) => (jsx(NiceButton, { className: `${styles.toolBtn} ${tool === t.id ? styles.toolBtnActive : ''}`, onClick: () => switchTool(t.id), "aria-label": `${t.label} (${t.key})`, variant: tool === t.id ? 'primary' : 'ghost', size: "sm", children: jsx(NiceIcon, { name: t.icon, size: "sm" }) }, t.id))) }));
-    return (jsxs(Fragment, { children: [jsx(EditorAskDialog, { ask: api.pendingAsk }), jsx("input", { ref: fInp, type: "file", accept: ".svg", style: { display: 'none' }, onChange: (e) => {
-                    var _a;
-                    const f = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
-                    if (f) {
-                        openFile(f);
+            onDoubleClick: onDblClick,
+            onWheel,
+            onContextMenu: (e) => e.preventDefault(),
+            style: {
+              transform: `translate(${px}px, ${py}px) scale(${zoom})`,
+              transformOrigin: "center center",
+              cursor: tool === "pointer" ? "default" : "crosshair"
+            },
+            children: [
+              /* @__PURE__ */ jsx("rect", { x: 0, y: 0, width: artW, height: artH, fill: "#ffffff" }),
+              zoom >= 2 && /* @__PURE__ */ jsxs("g", { opacity: 0.08, children: [
+                Array.from({ length: Math.floor(artW / gridSize) + 1 }, (_, i) => /* @__PURE__ */ jsx(
+                  "line",
+                  {
+                    x1: i * gridSize,
+                    y1: 0,
+                    x2: i * gridSize,
+                    y2: artH,
+                    stroke: "#000000",
+                    strokeWidth: 1 / zoom
+                  },
+                  `gx${i}`
+                )),
+                Array.from({ length: Math.floor(artH / gridSize) + 1 }, (_, i) => /* @__PURE__ */ jsx(
+                  "line",
+                  {
+                    x1: 0,
+                    y1: i * gridSize,
+                    x2: artW,
+                    y2: i * gridSize,
+                    stroke: "#000000",
+                    strokeWidth: 1 / zoom
+                  },
+                  `gy${i}`
+                ))
+              ] }),
+              !isPlaying && selId && (() => {
+                const ghostShape = shapes.find((x) => x.id === selId);
+                const ghostAnim = ghostShape ? animations[ghostShape.id] : void 0;
+                if (!ghostShape || !ghostAnim || ghostAnim.keyframes.length === 0) {
+                  return null;
+                }
+                const gcx = ghostShape.x + ghostShape.w / 2;
+                const gcy = ghostShape.y + ghostShape.h / 2;
+                return /* @__PURE__ */ jsx("g", { opacity: 0.25, style: { pointerEvents: "none" }, children: ghostAnim.keyframes.map((k, i) => {
+                  const tr = frameToTransform(sampleAnimation(ghostAnim, k.t), gcx, gcy);
+                  return /* @__PURE__ */ jsx("g", { transform: tr, children: /* @__PURE__ */ jsx(ShapeRenderer, { shape: ghostShape, selected: false, zoom }) }, `ghost-${i}`);
+                }) });
+              })(),
+              shapes.map((s) => {
+                const anim = animations[s.id];
+                let previewTr = "";
+                if (anim) {
+                  const dur = Math.max(1, anim.duration);
+                  const raw = previewTime % dur / dur;
+                  let t2 = raw;
+                  if (anim.direction === "alternate") {
+                    const cycle = Math.floor(previewTime / dur);
+                    if (cycle % 2 === 1) {
+                      t2 = 1 - raw;
                     }
-                    e.target.value = '';
-                } }), jsx(NiceAppShell, { className: className, flush: true, menubar: jsx(VectorEditorMenuBar, { api: api, hasOnSaveToLibrary: !!onSaveToLibrary, onExportIconSnippet: initialIcon || onExportIconSnippet ? exportSnippet : undefined }), sidebar: toolRail, rightSidebar: jsx(VectorEditorRightPanel, { api: api, library: library, artW: artW, artH: artH }), rightSidebarWidth: 320, statusBar: jsx(VectorEditorStatusBar, { api: api, artW: artW, artH: artH }), children: jsx("div", { ref: boxRef, className: styles.canvasContainer, children: jsxs("svg", { viewBox: `0 0 ${artW} ${artH}`, onMouseDown: onDown, onMouseMove: onMove, onMouseUp: onUp, onMouseLeave: () => {
-                            /* handled internally via refs */
-                        }, onDoubleClick: onDblClick, onWheel: onWheel, onContextMenu: (e) => e.preventDefault(), style: {
-                            transform: `translate(${px}px, ${py}px) scale(${zoom})`,
-                            transformOrigin: 'center center',
-                            cursor: tool === 'pointer' ? 'default' : 'crosshair',
-                        }, children: [jsx("rect", { x: 0, y: 0, width: artW, height: artH, fill: "#ffffff" }), zoom >= 2 && (jsxs("g", { opacity: 0.08, children: [Array.from({ length: Math.floor(artW / gridSize) + 1 }, (_, i) => (jsx("line", { x1: i * gridSize, y1: 0, x2: i * gridSize, y2: artH, stroke: "#000000", strokeWidth: 1 / zoom }, `gx${i}`))), Array.from({ length: Math.floor(artH / gridSize) + 1 }, (_, i) => (jsx("line", { x1: 0, y1: i * gridSize, x2: artW, y2: i * gridSize, stroke: "#000000", strokeWidth: 1 / zoom }, `gy${i}`)))] })), !isPlaying &&
-                                selId &&
-                                (() => {
-                                    const ghostShape = shapes.find((x) => x.id === selId);
-                                    const ghostAnim = ghostShape ? animations[ghostShape.id] : undefined;
-                                    if (!ghostShape || !ghostAnim || ghostAnim.keyframes.length === 0) {
-                                        return null;
-                                    }
-                                    const gcx = ghostShape.x + ghostShape.w / 2;
-                                    const gcy = ghostShape.y + ghostShape.h / 2;
-                                    return (jsx("g", { opacity: 0.25, style: { pointerEvents: 'none' }, children: ghostAnim.keyframes.map((k, i) => {
-                                            const tr = frameToTransform(sampleAnimation(ghostAnim, k.t), gcx, gcy);
-                                            return (jsx("g", { transform: tr, children: jsx(ShapeRenderer, { shape: ghostShape, selected: false, zoom: zoom }) }, `ghost-${i}`));
-                                        }) }));
-                                })(), shapes.map((s) => {
-                                const anim = animations[s.id];
-                                let previewTr = '';
-                                if (anim) {
-                                    const dur = Math.max(1, anim.duration);
-                                    const raw = (previewTime % dur) / dur;
-                                    let t = raw;
-                                    if (anim.direction === 'alternate') {
-                                        const cycle = Math.floor(previewTime / dur);
-                                        if (cycle % 2 === 1) {
-                                            t = 1 - raw;
-                                        }
-                                    }
-                                    const cx = s.x + s.w / 2;
-                                    const cy = s.y + s.h / 2;
-                                    previewTr = frameToTransform(sampleAnimation(anim, t), cx, cy);
-                                }
-                                const node = (jsx(ShapeRenderer, { shape: s, selected: s.id === selId, zoom: zoom }, s.id));
-                                return previewTr ? (jsx("g", { transform: previewTr, children: node }, s.id)) : (node);
-                            })] }) }) }), jsxs(NiceModal, { open: dlgSvg, onClose: () => setDlgSvg(false), title: t('vectorEditor.pasteSvg', 'Paste SVG'), children: [jsx("label", { children: t('vectorEditor.pasteSvgSourceCodeBelow', 'Paste SVG source code below:') }), jsx(NiceTextArea, { value: svgText, onChange: (val) => setSvgText(val), placeholder: t('vectorEditor.svgXmlnsHttpWwwW3', '<svg xmlns="http://www.w3.org/2000/svg" ...>') }), jsxs("div", { className: styles.dialogActions, children: [jsx(NiceButton, { variant: "ghost", onClick: () => setDlgSvg(false), children: t('vectorEditor.cancel', 'Cancel') }), jsx(NiceButton, { variant: "primary", onClick: () => importSVGString(svgText), children: t('vectorEditor.import', 'Import') })] })] }), jsxs(NiceModal, { open: snippetOpen, onClose: () => setSnippetOpen(false), title: t('vectorEditor.snippet.title', 'Icon snippet copied to clipboard'), children: [jsxs("p", { style: { marginTop: 0 }, children: [t('vectorEditor.snippet.pasteHint', 'Paste into'), ' ', jsxs("code", { children: ["packages/icons/src/icons/", iconCategory ? `${iconCategory.toLowerCase()}` : '<category>', ".tsx"] }), ":"] }), jsx(NiceTextArea, { value: snippetText, onChange: (val) => setSnippetText(val), rows: 16 }), jsxs("div", { className: styles.dialogActions, children: [jsx(NiceButton, { variant: "primary", onClick: () => {
-                                    if (typeof navigator !== 'undefined' && navigator.clipboard) {
-                                        navigator.clipboard.writeText(snippetText).catch(() => { });
-                                    }
-                                }, children: t('vectorEditor.snippet.copyAgain', 'Copy again') }), jsx(NiceButton, { variant: "ghost", onClick: () => setSnippetOpen(false), children: t('vectorEditor.snippet.close', 'Close') })] })] })] }));
+                  }
+                  const cx = s.x + s.w / 2;
+                  const cy = s.y + s.h / 2;
+                  previewTr = frameToTransform(sampleAnimation(anim, t2), cx, cy);
+                }
+                const node = /* @__PURE__ */ jsx(ShapeRenderer, { shape: s, selected: s.id === selId, zoom }, s.id);
+                return previewTr ? /* @__PURE__ */ jsx("g", { transform: previewTr, children: node }, s.id) : node;
+              })
+            ]
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      NiceModal,
+      {
+        open: dlgSvg,
+        onClose: () => setDlgSvg(false),
+        title: t("vectorEditor.pasteSvg", "Paste SVG"),
+        children: [
+          /* @__PURE__ */ jsx("label", { children: t("vectorEditor.pasteSvgSourceCodeBelow", "Paste SVG source code below:") }),
+          /* @__PURE__ */ jsx(
+            NiceTextArea,
+            {
+              value: svgText,
+              onChange: (val) => setSvgText(val),
+              placeholder: t(
+                "vectorEditor.svgXmlnsHttpWwwW3",
+                '<svg xmlns="http://www.w3.org/2000/svg" ...>'
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: styles.dialogActions, children: [
+            /* @__PURE__ */ jsx(NiceButton, { variant: "ghost", onClick: () => setDlgSvg(false), children: t("vectorEditor.cancel", "Cancel") }),
+            /* @__PURE__ */ jsx(NiceButton, { variant: "primary", onClick: () => importSVGString(svgText), children: t("vectorEditor.import", "Import") })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      NiceModal,
+      {
+        open: snippetOpen,
+        onClose: () => setSnippetOpen(false),
+        title: t("vectorEditor.snippet.title", "Icon snippet copied to clipboard"),
+        children: [
+          /* @__PURE__ */ jsxs("p", { style: { marginTop: 0 }, children: [
+            t("vectorEditor.snippet.pasteHint", "Paste into"),
+            " ",
+            /* @__PURE__ */ jsxs("code", { children: [
+              "packages/icons/src/icons/",
+              iconCategory ? `${iconCategory.toLowerCase()}` : "<category>",
+              ".tsx"
+            ] }),
+            ":"
+          ] }),
+          /* @__PURE__ */ jsx(NiceTextArea, { value: snippetText, onChange: (val) => setSnippetText(val), rows: 16 }),
+          /* @__PURE__ */ jsxs("div", { className: styles.dialogActions, children: [
+            /* @__PURE__ */ jsx(
+              NiceButton,
+              {
+                variant: "primary",
+                onClick: () => {
+                  if (typeof navigator !== "undefined" && navigator.clipboard) {
+                    navigator.clipboard.writeText(snippetText).catch(() => {
+                    });
+                  }
+                },
+                children: t("vectorEditor.snippet.copyAgain", "Copy again")
+              }
+            ),
+            /* @__PURE__ */ jsx(NiceButton, { variant: "ghost", onClick: () => setSnippetOpen(false), children: t("vectorEditor.snippet.close", "Close") })
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  NiceVectorEditor
 };
-
-export { NiceVectorEditor };

package/dist/esm/vector/VectorEditor.module.css.js

@@ -1,3 +1,86 @@
-var styles = {"menuBar":"VectorEditor-module_menuBar__o25XM","menuBtn":"VectorEditor-module_menuBtn__aP4vp","menuBtnActive":"VectorEditor-module_menuBtnActive__G4hDv","menuSep":"VectorEditor-module_menuSep__3-kTv","menuLabel":"VectorEditor-module_menuLabel__Bsm0e","toolbar":"VectorEditor-module_toolbar__fakYL","toolBtn":"VectorEditor-module_toolBtn__Zh7D3","toolBtnActive":"VectorEditor-module_toolBtnActive__0xZlr","canvasContainer":"VectorEditor-module_canvasContainer__hOUAx","rightPanel":"VectorEditor-module_rightPanel__3hzcS","rightPanelTabBody":"VectorEditor-module_rightPanelTabBody__QrkgO","libraryGrid":"VectorEditor-module_libraryGrid__utboD","libraryCell":"VectorEditor-module_libraryCell__WyOra","layerRow":"VectorEditor-module_layerRow__6dibJ","layerRowActive":"VectorEditor-module_layerRowActive__Dqt0V","layerRowLocked":"VectorEditor-module_layerRowLocked__ubct0","layerNameInput":"VectorEditor-module_layerNameInput__OtX-d","layerIconBtn":"VectorEditor-module_layerIconBtn__bchqi","panelSection":"VectorEditor-module_panelSection__uteDQ","panelTitle":"VectorEditor-module_panelTitle__WBUxr","shapeIcon":"VectorEditor-module_shapeIcon__M4j6X","propRow":"VectorEditor-module_propRow__Alc4S","propLabel":"VectorEditor-module_propLabel__J0lxK","propInput":"VectorEditor-module_propInput__3my2d","propColorSwatch":"VectorEditor-module_propColorSwatch__JL97Z","statusBar":"VectorEditor-module_statusBar__jMwan","dialogActions":"VectorEditor-module_dialogActions__0Sy4X"};
-
-export { styles as default };
+const menuBar = "_menuBar_1vkbh_31";
+const menuBtn = "_menuBtn_1vkbh_51";
+const menuBtnActive = "_menuBtnActive_1vkbh_83";
+const menuSep = "_menuSep_1vkbh_93";
+const menuLabel = "_menuLabel_1vkbh_105";
+const toolbar = "_toolbar_1vkbh_127";
+const toolBtn = "_toolBtn_1vkbh_147";
+const toolBtnActive = "_toolBtnActive_1vkbh_183";
+const canvasContainer = "_canvasContainer_1vkbh_207";
+const rightPanel = "_rightPanel_1vkbh_247";
+const rightPanelTabBody = "_rightPanelTabBody_1vkbh_265";
+const libraryGrid = "_libraryGrid_1vkbh_275";
+const libraryCell = "_libraryCell_1vkbh_287";
+const layerRow = "_layerRow_1vkbh_327";
+const layerRowActive = "_layerRowActive_1vkbh_351";
+const layerRowLocked = "_layerRowLocked_1vkbh_359";
+const layerNameInput = "_layerNameInput_1vkbh_365";
+const layerIconBtn = "_layerIconBtn_1vkbh_389";
+const panelSection = "_panelSection_1vkbh_413";
+const panelTitle = "_panelTitle_1vkbh_421";
+const shapeIcon = "_shapeIcon_1vkbh_501";
+const propRow = "_propRow_1vkbh_527";
+const propLabel = "_propLabel_1vkbh_539";
+const propInput = "_propInput_1vkbh_549";
+const propColorSwatch = "_propColorSwatch_1vkbh_567";
+const statusBar = "_statusBar_1vkbh_603";
+const dialogActions = "_dialogActions_1vkbh_721";
+const styles = {
+  menuBar,
+  menuBtn,
+  menuBtnActive,
+  menuSep,
+  menuLabel,
+  toolbar,
+  toolBtn,
+  toolBtnActive,
+  canvasContainer,
+  rightPanel,
+  rightPanelTabBody,
+  libraryGrid,
+  libraryCell,
+  layerRow,
+  layerRowActive,
+  layerRowLocked,
+  layerNameInput,
+  layerIconBtn,
+  panelSection,
+  panelTitle,
+  shapeIcon,
+  propRow,
+  propLabel,
+  propInput,
+  propColorSwatch,
+  statusBar,
+  dialogActions
+};
+export {
+  canvasContainer,
+  styles as default,
+  dialogActions,
+  layerIconBtn,
+  layerNameInput,
+  layerRow,
+  layerRowActive,
+  layerRowLocked,
+  libraryCell,
+  libraryGrid,
+  menuBar,
+  menuBtn,
+  menuBtnActive,
+  menuLabel,
+  menuSep,
+  panelSection,
+  panelTitle,
+  propColorSwatch,
+  propInput,
+  propLabel,
+  propRow,
+  rightPanel,
+  rightPanelTabBody,
+  shapeIcon,
+  statusBar,
+  toolBtn,
+  toolBtnActive,
+  toolbar
+};