@8btc/whiteboard 0.0.17 → 0.0.19-beta.0

package/dist/index.umd.js

@@ -1,3574 +0,0 @@
-(function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react"), require("konva"), require("mitt"), require("uuid"), require("@radix-ui/react-slot"), require("class-variance-authority"), require("clsx"), require("tailwind-merge"), require("lucide-react")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react", "konva", "mitt", "uuid", "@radix-ui/react-slot", "class-variance-authority", "clsx", "tailwind-merge", "lucide-react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.konvaWhiteboard = {}, global.jsxRuntime, global.React, global.Konva, global.mitt, global.uuid, global.ReactSlot, global.ClassVarianceAuthority, global.clsx, global.tailwindMerge, global.LucideReact));
-})(this, (function(exports2, jsxRuntime, react, Konva, mitt, uuid, reactSlot, classVarianceAuthority, clsx, tailwindMerge, lucideReact) {
-  "use strict";var __defProp = Object.defineProperty;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-
-  var _core, _stage, _viewport, _handleWheel, _handlePointerDown, _handlePointerMove, _handlePointerUp, _handleDragStart, _handleDragMove, _handleDragEnd, _CanvasStage_instances, setupEventListeners_fn, _core2, _transformer, _handleTransformStart, _handleTransform, _handleTransformEnd, _handleDragStart2, _handleDragMove2, _handleDragEnd2, _CanvasTransformer_instances, setupEventListeners_fn2, _toolTypeChangeHandler, _RectNode_instances, setupEventHandlers_fn, _ImageNode_instances, loadImage_fn, _toolTypeChangeHandler2, setupEventHandlers_fn2, syncImageMarkers_fn, syncImageMarkersToState_fn, _rect, _markerGroup, _circle, _text, _handleViewportChange, _handleNodesSelected, _ImageMarkerNode_instances, changeVisulStyle_fn, setupEventHandlers_fn3, _canvasStage, _mainLayer, _canvasTransformer, _draftNode, _container, _handleKeyDown, _CanvasCore_instances, setupKeyboardEvents_fn;
-  var __vite_style__ = document.createElement("style");
-  __vite_style__.textContent = `/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
-@layer properties {
-  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-    *, :before, :after, ::backdrop {
-      --tw-translate-x: 0;
-      --tw-translate-y: 0;
-      --tw-translate-z: 0;
-      --tw-rotate-x: initial;
-      --tw-rotate-y: initial;
-      --tw-rotate-z: initial;
-      --tw-skew-x: initial;
-      --tw-skew-y: initial;
-      --tw-border-style: solid;
-      --tw-font-weight: initial;
-      --tw-shadow: 0 0 #0000;
-      --tw-shadow-color: initial;
-      --tw-shadow-alpha: 100%;
-      --tw-inset-shadow: 0 0 #0000;
-      --tw-inset-shadow-color: initial;
-      --tw-inset-shadow-alpha: 100%;
-      --tw-ring-color: initial;
-      --tw-ring-shadow: 0 0 #0000;
-      --tw-inset-ring-color: initial;
-      --tw-inset-ring-shadow: 0 0 #0000;
-      --tw-ring-inset: initial;
-      --tw-ring-offset-width: 0px;
-      --tw-ring-offset-color: #fff;
-      --tw-ring-offset-shadow: 0 0 #0000;
-      --tw-outline-style: solid;
-      --tw-animation-delay: 0s;
-      --tw-animation-direction: normal;
-      --tw-animation-duration: initial;
-      --tw-animation-fill-mode: none;
-      --tw-animation-iteration-count: 1;
-      --tw-enter-blur: 0;
-      --tw-enter-opacity: 1;
-      --tw-enter-rotate: 0;
-      --tw-enter-scale: 1;
-      --tw-enter-translate-x: 0;
-      --tw-enter-translate-y: 0;
-      --tw-exit-blur: 0;
-      --tw-exit-opacity: 1;
-      --tw-exit-rotate: 0;
-      --tw-exit-scale: 1;
-      --tw-exit-translate-x: 0;
-      --tw-exit-translate-y: 0;
-    }
-  }
-}
-
-@layer theme {
-  :root, :host {
-    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-    --color-red-500: oklch(63.7% .237 25.331);
-    --color-red-600: oklch(57.7% .245 27.325);
-    --color-orange-500: oklch(70.5% .213 47.604);
-    --color-orange-600: oklch(64.6% .222 41.116);
-    --color-green-500: oklch(72.3% .219 149.579);
-    --color-green-600: oklch(62.7% .194 149.214);
-    --color-cyan-500: oklch(71.5% .143 215.221);
-    --color-cyan-600: oklch(60.9% .126 221.723);
-    --color-cyan-700: oklch(52% .105 223.128);
-    --color-blue-500: oklch(62.3% .214 259.815);
-    --color-blue-600: oklch(54.6% .245 262.881);
-    --color-indigo-500: oklch(58.5% .233 277.117);
-    --color-indigo-600: oklch(51.1% .262 276.966);
-    --color-purple-500: oklch(62.7% .265 303.9);
-    --color-purple-600: oklch(55.8% .288 302.321);
-    --color-gray-50: oklch(98.5% .002 247.839);
-    --color-gray-100: oklch(96.7% .003 264.542);
-    --color-gray-200: oklch(92.8% .006 264.531);
-    --color-gray-400: oklch(70.7% .022 261.325);
-    --color-gray-600: oklch(44.6% .03 256.802);
-    --color-gray-700: oklch(37.3% .034 259.733);
-    --color-gray-800: oklch(27.8% .033 256.848);
-    --color-white: #fff;
-    --spacing: .25rem;
-    --container-xs: 20rem;
-    --text-xs: .75rem;
-    --text-xs--line-height: calc(1 / .75);
-    --text-sm: .875rem;
-    --text-sm--line-height: calc(1.25 / .875);
-    --font-weight-medium: 500;
-    --font-weight-bold: 700;
-    --default-transition-duration: .15s;
-    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-    --default-font-family: var(--font-sans);
-    --default-mono-font-family: var(--font-mono);
-  }
-}
-
-@layer base {
-  *, :after, :before, ::backdrop {
-    box-sizing: border-box;
-    border: 0 solid;
-    margin: 0;
-    padding: 0;
-  }
-
-  ::file-selector-button {
-    box-sizing: border-box;
-    border: 0 solid;
-    margin: 0;
-    padding: 0;
-  }
-
-  html, :host {
-    -webkit-text-size-adjust: 100%;
-    tab-size: 4;
-    line-height: 1.5;
-    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
-    font-feature-settings: var(--default-font-feature-settings, normal);
-    font-variation-settings: var(--default-font-variation-settings, normal);
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  hr {
-    height: 0;
-    color: inherit;
-    border-top-width: 1px;
-  }
-
-  abbr:where([title]) {
-    -webkit-text-decoration: underline dotted;
-    text-decoration: underline dotted;
-  }
-
-  h1, h2, h3, h4, h5, h6 {
-    font-size: inherit;
-    font-weight: inherit;
-  }
-
-  a {
-    color: inherit;
-    -webkit-text-decoration: inherit;
-    -webkit-text-decoration: inherit;
-    -webkit-text-decoration: inherit;
-    text-decoration: inherit;
-  }
-
-  b, strong {
-    font-weight: bolder;
-  }
-
-  code, kbd, samp, pre {
-    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
-    font-feature-settings: var(--default-mono-font-feature-settings, normal);
-    font-variation-settings: var(--default-mono-font-variation-settings, normal);
-    font-size: 1em;
-  }
-
-  small {
-    font-size: 80%;
-  }
-
-  sub, sup {
-    vertical-align: baseline;
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-  }
-
-  sub {
-    bottom: -.25em;
-  }
-
-  sup {
-    top: -.5em;
-  }
-
-  table {
-    text-indent: 0;
-    border-color: inherit;
-    border-collapse: collapse;
-  }
-
-  :-moz-focusring {
-    outline: auto;
-  }
-
-  progress {
-    vertical-align: baseline;
-  }
-
-  summary {
-    display: list-item;
-  }
-
-  ol, ul, menu {
-    list-style: none;
-  }
-
-  img, svg, video, canvas, audio, iframe, embed, object {
-    vertical-align: middle;
-    display: block;
-  }
-
-  img, video {
-    max-width: 100%;
-    height: auto;
-  }
-
-  button, input, select, optgroup, textarea {
-    font: inherit;
-    font-feature-settings: inherit;
-    font-variation-settings: inherit;
-    letter-spacing: inherit;
-    color: inherit;
-    opacity: 1;
-    background-color: #0000;
-    border-radius: 0;
-  }
-
-  ::file-selector-button {
-    font: inherit;
-    font-feature-settings: inherit;
-    font-variation-settings: inherit;
-    letter-spacing: inherit;
-    color: inherit;
-    opacity: 1;
-    background-color: #0000;
-    border-radius: 0;
-  }
-
-  :where(select:is([multiple], [size])) optgroup {
-    font-weight: bolder;
-  }
-
-  :where(select:is([multiple], [size])) optgroup option {
-    padding-inline-start: 20px;
-  }
-
-  ::file-selector-button {
-    margin-inline-end: 4px;
-  }
-
-  ::placeholder {
-    opacity: 1;
-  }
-
-  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
-    ::placeholder {
-      color: currentColor;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      ::placeholder {
-        color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-  }
-
-  textarea {
-    resize: vertical;
-  }
-
-  ::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-
-  ::-webkit-date-and-time-value {
-    min-height: 1lh;
-    text-align: inherit;
-  }
-
-  ::-webkit-datetime-edit {
-    display: inline-flex;
-  }
-
-  ::-webkit-datetime-edit-fields-wrapper {
-    padding: 0;
-  }
-
-  ::-webkit-datetime-edit {
-    padding-block: 0;
-  }
-
-  ::-webkit-datetime-edit-year-field {
-    padding-block: 0;
-  }
-
-  ::-webkit-datetime-edit-month-field {
-    padding-block: 0;
-  }
-
-  ::-webkit-datetime-edit-day-field {
-    padding-block: 0;
-  }
-
-  ::-webkit-datetime-edit-hour-field {
-    padding-block: 0;
-  }
-
-  ::-webkit-datetime-edit-minute-field {
-    padding-block: 0;
-  }
-
-  ::-webkit-datetime-edit-second-field {
-    padding-block: 0;
-  }
-
-  ::-webkit-datetime-edit-millisecond-field {
-    padding-block: 0;
-  }
-
-  ::-webkit-datetime-edit-meridiem-field {
-    padding-block: 0;
-  }
-
-  ::-webkit-calendar-picker-indicator {
-    line-height: 1;
-  }
-
-  :-moz-ui-invalid {
-    box-shadow: none;
-  }
-
-  button, input:where([type="button"], [type="reset"], [type="submit"]) {
-    appearance: button;
-  }
-
-  ::file-selector-button {
-    appearance: button;
-  }
-
-  ::-webkit-inner-spin-button {
-    height: auto;
-  }
-
-  ::-webkit-outer-spin-button {
-    height: auto;
-  }
-
-  [hidden]:where(:not([hidden="until-found"])) {
-    display: none !important;
-  }
-
-  * {
-    border-color: var(--border);
-    outline-color: var(--ring);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    * {
-      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
-    }
-  }
-
-  body {
-    background-color: var(--background);
-    color: var(--foreground);
-  }
-}
-
-@layer components;
-
-@layer utilities {
-  .pointer-events-auto {
-    pointer-events: auto;
-  }
-
-  .visible {
-    visibility: visible;
-  }
-
-  .absolute {
-    position: absolute;
-  }
-
-  .relative {
-    position: relative;
-  }
-
-  .top-0 {
-    top: calc(var(--spacing) * 0);
-  }
-
-  .top-4 {
-    top: calc(var(--spacing) * 4);
-  }
-
-  .right-4 {
-    right: calc(var(--spacing) * 4);
-  }
-
-  .bottom-4 {
-    bottom: calc(var(--spacing) * 4);
-  }
-
-  .left-0 {
-    left: calc(var(--spacing) * 0);
-  }
-
-  .left-4 {
-    left: calc(var(--spacing) * 4);
-  }
-
-  .z-10 {
-    z-index: 10;
-  }
-
-  .z-20 {
-    z-index: 20;
-  }
-
-  .z-50 {
-    z-index: 50;
-  }
-
-  .container {
-    width: 100%;
-  }
-
-  @media (min-width: 40rem) {
-    .container {
-      max-width: 40rem;
-    }
-  }
-
-  @media (min-width: 48rem) {
-    .container {
-      max-width: 48rem;
-    }
-  }
-
-  @media (min-width: 64rem) {
-    .container {
-      max-width: 64rem;
-    }
-  }
-
-  @media (min-width: 80rem) {
-    .container {
-      max-width: 80rem;
-    }
-  }
-
-  @media (min-width: 96rem) {
-    .container {
-      max-width: 96rem;
-    }
-  }
-
-  .mt-2 {
-    margin-top: calc(var(--spacing) * 2);
-  }
-
-  .mt-4 {
-    margin-top: calc(var(--spacing) * 4);
-  }
-
-  .mb-2 {
-    margin-bottom: calc(var(--spacing) * 2);
-  }
-
-  .mb-3 {
-    margin-bottom: calc(var(--spacing) * 3);
-  }
-
-  .mb-4 {
-    margin-bottom: calc(var(--spacing) * 4);
-  }
-
-  .mb-6 {
-    margin-bottom: calc(var(--spacing) * 6);
-  }
-
-  .flex {
-    display: flex;
-  }
-
-  .grid {
-    display: grid;
-  }
-
-  .inline-flex {
-    display: inline-flex;
-  }
-
-  .size-8 {
-    width: calc(var(--spacing) * 8);
-    height: calc(var(--spacing) * 8);
-  }
-
-  .size-9 {
-    width: calc(var(--spacing) * 9);
-    height: calc(var(--spacing) * 9);
-  }
-
-  .size-10 {
-    width: calc(var(--spacing) * 10);
-    height: calc(var(--spacing) * 10);
-  }
-
-  .size-full {
-    width: 100%;
-    height: 100%;
-  }
-
-  .h-8 {
-    height: calc(var(--spacing) * 8);
-  }
-
-  .h-9 {
-    height: calc(var(--spacing) * 9);
-  }
-
-  .h-10 {
-    height: calc(var(--spacing) * 10);
-  }
-
-  .h-\\[500px\\] {
-    height: 500px;
-  }
-
-  .h-full {
-    height: 100%;
-  }
-
-  .max-h-40 {
-    max-height: calc(var(--spacing) * 40);
-  }
-
-  .w-\\[700px\\] {
-    width: 700px;
-  }
-
-  .w-full {
-    width: 100%;
-  }
-
-  .max-w-xs {
-    max-width: var(--container-xs);
-  }
-
-  .min-w-16 {
-    min-width: calc(var(--spacing) * 16);
-  }
-
-  .shrink-0 {
-    flex-shrink: 0;
-  }
-
-  .-translate-x-1\\/2 {
-    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-
-  .transform {
-    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
-  }
-
-  .touch-none {
-    touch-action: none;
-  }
-
-  .grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .flex-col {
-    flex-direction: column;
-  }
-
-  .items-center {
-    align-items: center;
-  }
-
-  .justify-center {
-    justify-content: center;
-  }
-
-  .gap-1\\.5 {
-    gap: calc(var(--spacing) * 1.5);
-  }
-
-  .gap-2 {
-    gap: calc(var(--spacing) * 2);
-  }
-
-  .overflow-auto {
-    overflow: auto;
-  }
-
-  .rounded {
-    border-radius: .25rem;
-  }
-
-  .rounded-lg {
-    border-radius: var(--radius);
-  }
-
-  .rounded-md {
-    border-radius: calc(var(--radius)  - 2px);
-  }
-
-  .border {
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-  }
-
-  .border-t {
-    border-top-style: var(--tw-border-style);
-    border-top-width: 1px;
-  }
-
-  .bg-background {
-    background-color: var(--background);
-  }
-
-  .bg-blue-500 {
-    background-color: var(--color-blue-500);
-  }
-
-  .bg-cyan-500 {
-    background-color: var(--color-cyan-500);
-  }
-
-  .bg-cyan-600 {
-    background-color: var(--color-cyan-600);
-  }
-
-  .bg-destructive {
-    background-color: var(--destructive);
-  }
-
-  .bg-gray-50 {
-    background-color: var(--color-gray-50);
-  }
-
-  .bg-gray-100 {
-    background-color: var(--color-gray-100);
-  }
-
-  .bg-green-500 {
-    background-color: var(--color-green-500);
-  }
-
-  .bg-indigo-500 {
-    background-color: var(--color-indigo-500);
-  }
-
-  .bg-orange-500 {
-    background-color: var(--color-orange-500);
-  }
-
-  .bg-primary {
-    background-color: var(--primary);
-  }
-
-  .bg-purple-500 {
-    background-color: var(--color-purple-500);
-  }
-
-  .bg-red-500 {
-    background-color: var(--color-red-500);
-  }
-
-  .bg-secondary {
-    background-color: var(--secondary);
-  }
-
-  .bg-white {
-    background-color: var(--color-white);
-  }
-
-  .p-2 {
-    padding: calc(var(--spacing) * 2);
-  }
-
-  .p-4 {
-    padding: calc(var(--spacing) * 4);
-  }
-
-  .px-3 {
-    padding-inline: calc(var(--spacing) * 3);
-  }
-
-  .px-4 {
-    padding-inline: calc(var(--spacing) * 4);
-  }
-
-  .px-6 {
-    padding-inline: calc(var(--spacing) * 6);
-  }
-
-  .py-2 {
-    padding-block: calc(var(--spacing) * 2);
-  }
-
-  .pt-4 {
-    padding-top: calc(var(--spacing) * 4);
-  }
-
-  .text-sm {
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-  }
-
-  .text-xs {
-    font-size: var(--text-xs);
-    line-height: var(--tw-leading, var(--text-xs--line-height));
-  }
-
-  .font-bold {
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
-  }
-
-  .font-medium {
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium);
-  }
-
-  .whitespace-nowrap {
-    white-space: nowrap;
-  }
-
-  .whitespace-pre-wrap {
-    white-space: pre-wrap;
-  }
-
-  .text-gray-400 {
-    color: var(--color-gray-400);
-  }
-
-  .text-gray-600 {
-    color: var(--color-gray-600);
-  }
-
-  .text-gray-700 {
-    color: var(--color-gray-700);
-  }
-
-  .text-gray-800 {
-    color: var(--color-gray-800);
-  }
-
-  .text-primary {
-    color: var(--primary);
-  }
-
-  .text-primary-foreground {
-    color: var(--primary-foreground);
-  }
-
-  .text-secondary-foreground {
-    color: var(--secondary-foreground);
-  }
-
-  .text-white {
-    color: var(--color-white);
-  }
-
-  .underline-offset-4 {
-    text-underline-offset: 4px;
-  }
-
-  .shadow-lg {
-    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-
-  .shadow-xs {
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-
-  .outline {
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
-  }
-
-  .transition-all {
-    transition-property: all;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-
-  .outline-none {
-    --tw-outline-style: none;
-    outline-style: none;
-  }
-
-  @media (hover: hover) {
-    .hover\\:bg-accent:hover {
-      background-color: var(--accent);
-    }
-
-    .hover\\:bg-blue-600:hover {
-      background-color: var(--color-blue-600);
-    }
-
-    .hover\\:bg-cyan-600:hover {
-      background-color: var(--color-cyan-600);
-    }
-
-    .hover\\:bg-cyan-700:hover {
-      background-color: var(--color-cyan-700);
-    }
-
-    .hover\\:bg-destructive\\/90:hover {
-      background-color: var(--destructive);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\\:bg-destructive\\/90:hover {
-        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
-      }
-    }
-
-    .hover\\:bg-gray-200:hover {
-      background-color: var(--color-gray-200);
-    }
-
-    .hover\\:bg-green-600:hover {
-      background-color: var(--color-green-600);
-    }
-
-    .hover\\:bg-indigo-600:hover {
-      background-color: var(--color-indigo-600);
-    }
-
-    .hover\\:bg-orange-600:hover {
-      background-color: var(--color-orange-600);
-    }
-
-    .hover\\:bg-primary\\/90:hover {
-      background-color: var(--primary);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\\:bg-primary\\/90:hover {
-        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
-      }
-    }
-
-    .hover\\:bg-purple-600:hover {
-      background-color: var(--color-purple-600);
-    }
-
-    .hover\\:bg-red-600:hover {
-      background-color: var(--color-red-600);
-    }
-
-    .hover\\:bg-secondary\\/80:hover {
-      background-color: var(--secondary);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\\:bg-secondary\\/80:hover {
-        background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
-      }
-    }
-
-    .hover\\:text-accent-foreground:hover {
-      color: var(--accent-foreground);
-    }
-
-    .hover\\:underline:hover {
-      text-decoration-line: underline;
-    }
-  }
-
-  .focus-visible\\:border-ring:focus-visible {
-    border-color: var(--ring);
-  }
-
-  .focus-visible\\:ring-\\[3px\\]:focus-visible {
-    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-
-  .focus-visible\\:ring-destructive\\/20:focus-visible {
-    --tw-ring-color: var(--destructive);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .focus-visible\\:ring-destructive\\/20:focus-visible {
-      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
-    }
-  }
-
-  .focus-visible\\:ring-ring\\/50:focus-visible {
-    --tw-ring-color: var(--ring);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .focus-visible\\:ring-ring\\/50:focus-visible {
-      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
-    }
-  }
-
-  .disabled\\:pointer-events-none:disabled {
-    pointer-events: none;
-  }
-
-  .disabled\\:cursor-not-allowed:disabled {
-    cursor: not-allowed;
-  }
-
-  .disabled\\:opacity-50:disabled {
-    opacity: .5;
-  }
-
-  .has-\\[\\>svg\\]\\:px-2\\.5:has( > svg) {
-    padding-inline: calc(var(--spacing) * 2.5);
-  }
-
-  .has-\\[\\>svg\\]\\:px-3:has( > svg) {
-    padding-inline: calc(var(--spacing) * 3);
-  }
-
-  .has-\\[\\>svg\\]\\:px-4:has( > svg) {
-    padding-inline: calc(var(--spacing) * 4);
-  }
-
-  .aria-invalid\\:border-destructive[aria-invalid="true"] {
-    border-color: var(--destructive);
-  }
-
-  .aria-invalid\\:ring-destructive\\/20[aria-invalid="true"] {
-    --tw-ring-color: var(--destructive);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .aria-invalid\\:ring-destructive\\/20[aria-invalid="true"] {
-      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
-    }
-  }
-
-  .dark\\:border-input:is(.dark *) {
-    border-color: var(--input);
-  }
-
-  .dark\\:bg-destructive\\/60:is(.dark *) {
-    background-color: var(--destructive);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\\:bg-destructive\\/60:is(.dark *) {
-      background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
-    }
-  }
-
-  .dark\\:bg-input\\/30:is(.dark *) {
-    background-color: var(--input);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\\:bg-input\\/30:is(.dark *) {
-      background-color: color-mix(in oklab, var(--input) 30%, transparent);
-    }
-  }
-
-  @media (hover: hover) {
-    .dark\\:hover\\:bg-accent\\/50:is(.dark *):hover {
-      background-color: var(--accent);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .dark\\:hover\\:bg-accent\\/50:is(.dark *):hover {
-        background-color: color-mix(in oklab, var(--accent) 50%, transparent);
-      }
-    }
-
-    .dark\\:hover\\:bg-input\\/50:is(.dark *):hover {
-      background-color: var(--input);
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .dark\\:hover\\:bg-input\\/50:is(.dark *):hover {
-        background-color: color-mix(in oklab, var(--input) 50%, transparent);
-      }
-    }
-  }
-
-  .dark\\:focus-visible\\:ring-destructive\\/40:is(.dark *):focus-visible {
-    --tw-ring-color: var(--destructive);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\\:focus-visible\\:ring-destructive\\/40:is(.dark *):focus-visible {
-      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
-    }
-  }
-
-  .dark\\:aria-invalid\\:ring-destructive\\/40:is(.dark *)[aria-invalid="true"] {
-    --tw-ring-color: var(--destructive);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\\:aria-invalid\\:ring-destructive\\/40:is(.dark *)[aria-invalid="true"] {
-      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
-    }
-  }
-
-  .\\[\\&_svg\\]\\:pointer-events-none svg {
-    pointer-events: none;
-  }
-
-  .\\[\\&_svg\\]\\:shrink-0 svg {
-    flex-shrink: 0;
-  }
-
-  .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 svg:not([class*="size-"]) {
-    width: calc(var(--spacing) * 4);
-    height: calc(var(--spacing) * 4);
-  }
-}
-
-@property --tw-animation-delay {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0s;
-}
-
-@property --tw-animation-direction {
-  syntax: "*";
-  inherits: false;
-  initial-value: normal;
-}
-
-@property --tw-animation-duration {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-animation-fill-mode {
-  syntax: "*";
-  inherits: false;
-  initial-value: none;
-}
-
-@property --tw-animation-iteration-count {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-
-@property --tw-enter-blur {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-
-@property --tw-enter-opacity {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-
-@property --tw-enter-rotate {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-
-@property --tw-enter-scale {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-
-@property --tw-enter-translate-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-
-@property --tw-enter-translate-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-
-@property --tw-exit-blur {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-
-@property --tw-exit-opacity {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-
-@property --tw-exit-rotate {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-
-@property --tw-exit-scale {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-
-@property --tw-exit-translate-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-
-@property --tw-exit-translate-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-
-:root {
-  --radius: .625rem;
-  --background: oklch(100% 0 0);
-  --foreground: oklch(14.5% 0 0);
-  --card: oklch(100% 0 0);
-  --card-foreground: oklch(14.5% 0 0);
-  --popover: oklch(100% 0 0);
-  --popover-foreground: oklch(14.5% 0 0);
-  --primary: oklch(20.5% 0 0);
-  --primary-foreground: oklch(98.5% 0 0);
-  --secondary: oklch(97% 0 0);
-  --secondary-foreground: oklch(20.5% 0 0);
-  --muted: oklch(97% 0 0);
-  --muted-foreground: oklch(55.6% 0 0);
-  --accent: oklch(97% 0 0);
-  --accent-foreground: oklch(20.5% 0 0);
-  --destructive: oklch(57.7% .245 27.325);
-  --border: oklch(92.2% 0 0);
-  --input: oklch(92.2% 0 0);
-  --ring: oklch(70.8% 0 0);
-  --chart-1: oklch(64.6% .222 41.116);
-  --chart-2: oklch(60% .118 184.704);
-  --chart-3: oklch(39.8% .07 227.392);
-  --chart-4: oklch(82.8% .189 84.429);
-  --chart-5: oklch(76.9% .188 70.08);
-  --sidebar: oklch(98.5% 0 0);
-  --sidebar-foreground: oklch(14.5% 0 0);
-  --sidebar-primary: oklch(20.5% 0 0);
-  --sidebar-primary-foreground: oklch(98.5% 0 0);
-  --sidebar-accent: oklch(97% 0 0);
-  --sidebar-accent-foreground: oklch(20.5% 0 0);
-  --sidebar-border: oklch(92.2% 0 0);
-  --sidebar-ring: oklch(70.8% 0 0);
-}
-
-.dark {
-  --background: oklch(14.5% 0 0);
-  --foreground: oklch(98.5% 0 0);
-  --card: oklch(20.5% 0 0);
-  --card-foreground: oklch(98.5% 0 0);
-  --popover: oklch(20.5% 0 0);
-  --popover-foreground: oklch(98.5% 0 0);
-  --primary: oklch(92.2% 0 0);
-  --primary-foreground: oklch(20.5% 0 0);
-  --secondary: oklch(26.9% 0 0);
-  --secondary-foreground: oklch(98.5% 0 0);
-  --muted: oklch(26.9% 0 0);
-  --muted-foreground: oklch(70.8% 0 0);
-  --accent: oklch(26.9% 0 0);
-  --accent-foreground: oklch(98.5% 0 0);
-  --destructive: oklch(70.4% .191 22.216);
-  --border: oklch(100% 0 0 / .1);
-  --input: oklch(100% 0 0 / .15);
-  --ring: oklch(55.6% 0 0);
-  --chart-1: oklch(48.8% .243 264.376);
-  --chart-2: oklch(69.6% .17 162.48);
-  --chart-3: oklch(76.9% .188 70.08);
-  --chart-4: oklch(62.7% .265 303.9);
-  --chart-5: oklch(64.5% .246 16.439);
-  --sidebar: oklch(20.5% 0 0);
-  --sidebar-foreground: oklch(98.5% 0 0);
-  --sidebar-primary: oklch(48.8% .243 264.376);
-  --sidebar-primary-foreground: oklch(98.5% 0 0);
-  --sidebar-accent: oklch(26.9% 0 0);
-  --sidebar-accent-foreground: oklch(98.5% 0 0);
-  --sidebar-border: oklch(100% 0 0 / .1);
-  --sidebar-ring: oklch(55.6% 0 0);
-}
-
-@property --tw-translate-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-
-@property --tw-translate-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-
-@property --tw-translate-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-
-@property --tw-rotate-x {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-rotate-y {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-rotate-z {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-skew-x {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-skew-y {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-
-@property --tw-shadow-color {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-
-@property --tw-inset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-
-@property --tw-inset-shadow-color {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-inset-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-
-@property --tw-ring-color {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-
-@property --tw-inset-ring-color {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-inset-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-
-@property --tw-ring-inset {
-  syntax: "*";
-  inherits: false
-}
-
-@property --tw-ring-offset-width {
-  syntax: "<length>";
-  inherits: false;
-  initial-value: 0;
-}
-
-@property --tw-ring-offset-color {
-  syntax: "*";
-  inherits: false;
-  initial-value: #fff;
-}
-
-@property --tw-ring-offset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-/*$vite$:1*/`;
-  document.head.appendChild(__vite_style__);
-  class CanvasStage {
-    constructor(core, config) {
-      __privateAdd(this, _CanvasStage_instances);
-      __privateAdd(this, _core);
-      __privateAdd(this, _stage);
-      __privateAdd(this, _viewport, { x: 0, y: 0, scale: 1 });
-      /**
-       * 处理滚轮缩放和平移
-       */
-      __privateAdd(this, _handleWheel, (e) => {
-        e.evt.preventDefault();
-        const stage = __privateGet(this, _stage);
-        const pointer = stage.getPointerPosition();
-        if (!pointer) return;
-        if (e.evt.ctrlKey) {
-          const oldScale = __privateGet(this, _viewport).scale;
-          const mousePointTo = {
-            x: (pointer.x - __privateGet(this, _viewport).x) / oldScale,
-            y: (pointer.y - __privateGet(this, _viewport).y) / oldScale
-          };
-          const scaleBy = 1.01;
-          const direction = e.evt.deltaY > 0 ? -1 : 1;
-          const steps = Math.min(Math.abs(e.evt.deltaY), 10);
-          let newScale = oldScale;
-          for (let i = 0; i < steps; i++) {
-            newScale = direction > 0 ? newScale * scaleBy : newScale / scaleBy;
-          }
-          const scale = Math.max(0.1, Math.min(5, newScale));
-          const newPos = {
-            x: pointer.x - mousePointTo.x * scale,
-            y: pointer.y - mousePointTo.y * scale
-          };
-          __privateGet(this, _core).updateViewport({ x: newPos.x, y: newPos.y, scale });
-        } else {
-          const deltaX = e.evt.shiftKey ? e.evt.deltaY : e.evt.deltaX;
-          const deltaY = e.evt.shiftKey ? 0 : e.evt.deltaY;
-          __privateGet(this, _core).updateViewport({
-            x: __privateGet(this, _viewport).x - deltaX,
-            y: __privateGet(this, _viewport).y - deltaY
-          });
-        }
-      });
-      __privateAdd(this, _handlePointerDown, (event) => {
-        const toolType = __privateGet(this, _core).getState().toolType;
-        if (event.evt.button !== 0 || toolType === "hand") {
-          return;
-        }
-        const clickedOnEmpty = event.target === __privateGet(this, _stage);
-        const pointerPos = __privateGet(this, _stage).getRelativePointerPosition();
-        if (toolType === "select" && !clickedOnEmpty) {
-          const nodeId = event.target.id();
-          if (nodeId) {
-            __privateGet(this, _core).selectNode(nodeId, event.evt.shiftKey);
-          }
-          return;
-        }
-        if (toolType === "rectangle" && pointerPos) {
-          __privateGet(this, _core).createDraftNode(toolType, pointerPos);
-        }
-        if (toolType === "image-marker" && pointerPos) {
-          const imageShape = __privateGet(this, _core).findImageAtPosition(pointerPos);
-          if (imageShape) {
-            const width = imageShape.width();
-            const height = imageShape.height();
-            if (width && height) {
-              const imageBounds = {
-                x: imageShape.x(),
-                y: imageShape.y(),
-                width,
-                height
-              };
-              __privateGet(this, _core).createDraftNode(toolType, pointerPos, {
-                parent: imageShape.id(),
-                bounds: imageBounds,
-                startPosition: pointerPos
-              });
-            }
-          }
-        }
-        __privateGet(this, _core).selectNode();
-      });
-      __privateAdd(this, _handlePointerMove, () => {
-        const toolType = __privateGet(this, _core).getState().toolType;
-        if (toolType === "hand") {
-          return;
-        }
-        const pointerPos = __privateGet(this, _stage).getRelativePointerPosition();
-        if ((toolType === "rectangle" || toolType === "image-marker") && pointerPos) {
-          __privateGet(this, _core).updateDraftNode(pointerPos);
-        }
-      });
-      __privateAdd(this, _handlePointerUp, () => {
-        const toolType = __privateGet(this, _core).getState().toolType;
-        if (toolType === "hand") {
-          return;
-        }
-        if (toolType === "rectangle" || toolType === "image-marker") {
-          __privateGet(this, _core).finalizeDraftNode();
-        }
-      });
-      __privateAdd(this, _handleDragStart, (event) => {
-        if (event.target !== __privateGet(this, _stage)) {
-          return;
-        }
-        const toolType = __privateGet(this, _core).getState().toolType;
-        if (toolType === "hand") {
-          this.setCursor("grabbing");
-        } else if (toolType === "select") {
-          this.setCursor("all-scroll");
-        }
-      });
-      __privateAdd(this, _handleDragMove, (event) => {
-        if (event.target !== __privateGet(this, _stage)) {
-          return;
-        }
-        __privateGet(this, _core).updateViewport({
-          x: __privateGet(this, _stage).x(),
-          y: __privateGet(this, _stage).y()
-        });
-      });
-      __privateAdd(this, _handleDragEnd, (event) => {
-        if (event.target !== __privateGet(this, _stage)) {
-          return;
-        }
-        __privateGet(this, _core).updateViewport({
-          x: __privateGet(this, _stage).x(),
-          y: __privateGet(this, _stage).y()
-        });
-        this.resetCursor();
-      });
-      __privateSet(this, _core, core);
-      __privateSet(this, _stage, new Konva.Stage({
-        container: config.container,
-        width: config.width,
-        height: config.height,
-        x: 0,
-        y: 0,
-        scaleX: 1,
-        scaleY: 1,
-        draggable: config.draggable ?? false,
-        className: config.className
-      }));
-      __privateMethod(this, _CanvasStage_instances, setupEventListeners_fn).call(this);
-    }
-    /**
-     * 获取原生 Konva.Stage 实例
-     */
-    getStage() {
-      return __privateGet(this, _stage);
-    }
-    /**
-     * 获取当前视口状态
-     */
-    getViewport() {
-      return { ...__privateGet(this, _viewport) };
-    }
-    /**
-     * 设置视口（包括位置、缩放和尺寸）
-     */
-    setViewport(viewport) {
-      const newViewport = { ...__privateGet(this, _viewport), ...viewport };
-      __privateSet(this, _viewport, newViewport);
-      if (viewport.x !== void 0) {
-        __privateGet(this, _stage).x(viewport.x);
-      }
-      if (viewport.y !== void 0) {
-        __privateGet(this, _stage).y(viewport.y);
-      }
-      if (viewport.scale !== void 0) {
-        __privateGet(this, _stage).scaleX(viewport.scale);
-        __privateGet(this, _stage).scaleY(viewport.scale);
-      }
-      if (viewport.width !== void 0) {
-        __privateGet(this, _stage).width(viewport.width);
-      }
-      if (viewport.height !== void 0) {
-        __privateGet(this, _stage).height(viewport.height);
-      }
-    }
-    /**
-     * 设置是否可拖拽
-     */
-    setDraggable(draggable) {
-      __privateGet(this, _stage).draggable(draggable);
-    }
-    /**
-     * 设置光标样式
-     */
-    setCursor(cursor) {
-      const container = __privateGet(this, _stage).container();
-      container.style.cursor = cursor;
-    }
-    /**
-     * 重置光标样式
-     */
-    resetCursor() {
-      const container = __privateGet(this, _stage).container();
-      const toolType = __privateGet(this, _core).getState().toolType;
-      if (toolType === "hand") {
-        container.style.cursor = "grab";
-        return;
-      }
-      container.style.cursor = "default";
-    }
-    /**
-     * 销毁 Stage
-     */
-    destroy() {
-      __privateGet(this, _stage).destroy();
-    }
-  }
-  _core = new WeakMap();
-  _stage = new WeakMap();
-  _viewport = new WeakMap();
-  _handleWheel = new WeakMap();
-  _handlePointerDown = new WeakMap();
-  _handlePointerMove = new WeakMap();
-  _handlePointerUp = new WeakMap();
-  _handleDragStart = new WeakMap();
-  _handleDragMove = new WeakMap();
-  _handleDragEnd = new WeakMap();
-  _CanvasStage_instances = new WeakSet();
-  /**
-   * 设置事件监听器
-   */
-  setupEventListeners_fn = function() {
-    __privateGet(this, _stage).on("wheel", __privateGet(this, _handleWheel));
-    __privateGet(this, _stage).on("pointerdown", __privateGet(this, _handlePointerDown));
-    __privateGet(this, _stage).on("pointermove", __privateGet(this, _handlePointerMove));
-    __privateGet(this, _stage).on("pointerup", __privateGet(this, _handlePointerUp));
-    __privateGet(this, _stage).on("dragstart", __privateGet(this, _handleDragStart));
-    __privateGet(this, _stage).on("dragmove", __privateGet(this, _handleDragMove));
-    __privateGet(this, _stage).on("dragend", __privateGet(this, _handleDragEnd));
-  };
-  class CanvasTransformer {
-    constructor(core, config) {
-      __privateAdd(this, _CanvasTransformer_instances);
-      __privateAdd(this, _core2);
-      __privateAdd(this, _transformer);
-      /**
-       * 处理 transformstart 事件
-       */
-      __privateAdd(this, _handleTransformStart, () => {
-        this.emitPositionChange();
-      });
-      /**
-       * 处理 transform 事件
-       */
-      __privateAdd(this, _handleTransform, () => {
-        this.emitPositionChange();
-      });
-      /**
-       * 处理 transformend 事件
-       */
-      __privateAdd(this, _handleTransformEnd, () => {
-        this.emitPositionChange();
-      });
-      /**
-       * 处理 dragstart 事件
-       */
-      __privateAdd(this, _handleDragStart2, () => {
-        this.emitPositionChange();
-      });
-      /**
-       * 处理 dragmove 事件
-       */
-      __privateAdd(this, _handleDragMove2, () => {
-        this.emitPositionChange();
-      });
-      /**
-       * 处理 dragend 事件
-       */
-      __privateAdd(this, _handleDragEnd2, () => {
-        this.emitPositionChange();
-      });
-      __privateSet(this, _core2, core);
-      __privateSet(this, _transformer, new Konva.Transformer({
-        rotateEnabled: config?.rotateEnabled ?? true,
-        ignoreStroke: config?.ignoreStroke ?? true,
-        anchorSize: config?.anchorSize ?? 8,
-        borderDash: config?.borderDash ?? [4, 4],
-        anchorCornerRadius: config?.anchorCornerRadius ?? 4,
-        padding: config?.padding ?? 6
-      }));
-      __privateMethod(this, _CanvasTransformer_instances, setupEventListeners_fn2).call(this);
-    }
-    /**
-     * 获取原生 Konva.Transformer 实例
-     */
-    getTransformer() {
-      return __privateGet(this, _transformer);
-    }
-    /**
-     * 获取 Transformer 的位置信息
-     */
-    getPosition() {
-      const nodes = __privateGet(this, _transformer).nodes();
-      if (nodes.length === 0) {
-        return null;
-      }
-      const box = __privateGet(this, _transformer).getClientRect();
-      return {
-        x: box.x,
-        y: box.y,
-        width: box.width,
-        height: box.height,
-        rotation: __privateGet(this, _transformer).rotation()
-      };
-    }
-    /**
-     * 设置要变换的节点
-     */
-    setNodes(nodes) {
-      if (nodes.length === 0) {
-        this.clearNodes();
-        return;
-      }
-      __privateGet(this, _transformer).nodes(nodes);
-      __privateGet(this, _transformer).moveToTop();
-      this.emitPositionChange();
-    }
-    /**
-     * 获取当前变换的节点
-     */
-    getNodes() {
-      return __privateGet(this, _transformer).nodes();
-    }
-    /**
-     * 清除所有节点
-     */
-    clearNodes() {
-      __privateGet(this, _transformer).nodes([]);
-      __privateGet(this, _transformer).moveToBottom();
-      this.emitPositionChange();
-    }
-    /**
-     * emit Transformer 位置
-     */
-    emitPositionChange() {
-      const position = this.getPosition();
-      __privateGet(this, _core2).emitEvent("transformer:positionChange", position);
-    }
-    /**
-     * 销毁 Transformer
-     */
-    destroy() {
-      __privateGet(this, _transformer).destroy();
-    }
-  }
-  _core2 = new WeakMap();
-  _transformer = new WeakMap();
-  _handleTransformStart = new WeakMap();
-  _handleTransform = new WeakMap();
-  _handleTransformEnd = new WeakMap();
-  _handleDragStart2 = new WeakMap();
-  _handleDragMove2 = new WeakMap();
-  _handleDragEnd2 = new WeakMap();
-  _CanvasTransformer_instances = new WeakSet();
-  /**
-   * 设置事件监听器
-   */
-  setupEventListeners_fn2 = function() {
-    __privateGet(this, _transformer).on("transformstart", __privateGet(this, _handleTransformStart));
-    __privateGet(this, _transformer).on("transform", __privateGet(this, _handleTransform));
-    __privateGet(this, _transformer).on("transformend", __privateGet(this, _handleTransformEnd));
-    __privateGet(this, _transformer).on("dragstart", __privateGet(this, _handleDragStart2));
-    __privateGet(this, _transformer).on("dragmove", __privateGet(this, _handleDragMove2));
-    __privateGet(this, _transformer).on("dragend", __privateGet(this, _handleDragEnd2));
-  };
-  class CanvasState {
-    constructor(initialState) {
-      __publicField(this, "_past", []);
-      __publicField(this, "_present");
-      __publicField(this, "_future", []);
-      __publicField(this, "_emitter");
-      this._present = initialState;
-      this._emitter = mitt();
-    }
-    /**
-     * 获取当前状态
-     */
-    getState() {
-      return { ...this._present };
-    }
-    /**
-     * 获取完整历史状态
-     */
-    getHistory() {
-      return {
-        past: [...this._past],
-        present: { ...this._present },
-        future: [...this._future]
-      };
-    }
-    /**
-     * 是否可以撤销
-     */
-    canUndo() {
-      return this._past.length > 0;
-    }
-    /**
-     * 是否可以重做
-     */
-    canRedo() {
-      return this._future.length > 0;
-    }
-    /**
-     * 订阅状态事件
-     */
-    on(event, handler) {
-      this._emitter.on(event, handler);
-    }
-    /**
-     * 取消订阅状态事件
-     */
-    off(event, handler) {
-      this._emitter.off(event, handler);
-    }
-    /**
-     * 发送事件
-     */
-    emit(event, data) {
-      this._emitter.emit(event, data);
-    }
-    /**
-     * 撤销操作
-     */
-    undo() {
-      if (this._past.length === 0) return;
-      const previous = this._past[this._past.length - 1];
-      const newPast = this._past.slice(0, this._past.length - 1);
-      this._past = newPast;
-      this._future = [this._present, ...this._future];
-      this._present = previous;
-      this._syncState(previous);
-      this._emitter.emit("state:undo", previous);
-      this._emitter.emit("state:change", previous);
-    }
-    /**
-     * 重做操作
-     */
-    redo() {
-      if (this._future.length === 0) return;
-      const next = this._future[0];
-      const newFuture = this._future.slice(1);
-      this._past = [...this._past, this._present];
-      this._future = newFuture;
-      this._present = next;
-      this._syncState(next);
-      this._emitter.emit("state:redo", next);
-      this._emitter.emit("state:change", next);
-    }
-    /**
-     * 重置历史记录
-     */
-    resetHistory() {
-      this._past = [];
-      this._future = [];
-      this._emitter.emit("state:reset", this._present);
-      this._emitter.emit("state:change", this._present);
-    }
-    /**
-     * 更新状态
-     * @param partial - 部分状态更新
-     * @param addToHistory - 是否添加到历史记录
-     */
-    _updateState(partial, addToHistory = true) {
-      const newState = { ...this._present, ...partial };
-      if (addToHistory) {
-        this._past = [...this._past, this._present];
-        this._future = [];
-      }
-      this._present = newState;
-      this._emitter.emit("state:change", newState);
-    }
-    /**
-     * 同步状态到外部系统（由子类实现）
-     * @param _state - 要同步的状态
-     */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    _syncState(_state) {
-    }
-    /**
-     * 清理资源
-     */
-    _dispose() {
-      this._emitter.all.clear();
-    }
-  }
-  const NODE_NAMES = {
-    nodeRoot: "nodeRoot_intrinsic",
-    selectable: "selectable_intrinsic",
-    rect: "rect_intrinsic",
-    image: "image_intrinsic",
-    imageMarker: "image_marker_intrinsic"
-  };
-  const RECT = {
-    CORNER_RADIUS: 6,
-    MIN_SIZE: 10
-  };
-  const IMAGE = {
-    MIN_SIZE: 10
-  };
-  class BaseCanvasNode {
-    constructor(core, node, isDraft = false) {
-      __publicField(this, "core");
-      __publicField(this, "node");
-      __publicField(this, "element");
-      __publicField(this, "isDraft");
-      this.core = core;
-      this.node = node;
-      this.isDraft = isDraft;
-      this.element = this.createElement();
-    }
-    /**
-     * 获取 Konva 元素
-     */
-    getElement() {
-      return this.element;
-    }
-    /**
-     * 获取节点数据
-     */
-    getNode() {
-      return this.node;
-    }
-  }
-  function getRectSize(rect) {
-    return {
-      width: Math.max(RECT.MIN_SIZE, rect.width() * rect.scaleX()),
-      height: Math.max(RECT.MIN_SIZE, rect.height() * rect.scaleY())
-    };
-  }
-  class RectNode extends BaseCanvasNode {
-    constructor(core, node, isDraft = false) {
-      super(core, node, isDraft);
-      __privateAdd(this, _RectNode_instances);
-      __privateAdd(this, _toolTypeChangeHandler, (toolType) => {
-        const isSelect = toolType === "select";
-        this.element.listening(isSelect);
-      });
-      __privateMethod(this, _RectNode_instances, setupEventHandlers_fn).call(this, this.getElement());
-    }
-    createElement() {
-      const width = Math.max(
-        this.node.props.width ?? RECT.MIN_SIZE,
-        RECT.MIN_SIZE
-      );
-      const height = Math.max(
-        this.node.props.height ?? RECT.MIN_SIZE,
-        RECT.MIN_SIZE
-      );
-      const config = {
-        id: this.node.id,
-        ...this.node.props,
-        ...this.node.style,
-        width,
-        height,
-        cornerRadius: RECT.CORNER_RADIUS,
-        name: `${NODE_NAMES.nodeRoot} ${NODE_NAMES.selectable} ${NODE_NAMES.rect}`,
-        draggable: true,
-        stroke: "black",
-        strokeWidth: 2
-      };
-      const rect = new Konva.Rect(config);
-      rect.setAttrs({
-        width,
-        height
-      });
-      return rect;
-    }
-    /**
-     * 获取 Konva.Rect 实例
-     */
-    getElement() {
-      return this.element;
-    }
-    /**
-     * 更新节点数据
-     */
-    updateNode(node) {
-      this.node = {
-        ...this.node,
-        ...node,
-        props: {
-          ...this.node.props,
-          ...node.props
-        },
-        style: {
-          ...this.node.style,
-          ...node.style
-        }
-      };
-      const rect = this.getElement();
-      rect.x(this.node.props.x);
-      rect.y(this.node.props.y);
-      const width = Math.max(
-        this.node.props.width ?? RECT.MIN_SIZE,
-        RECT.MIN_SIZE
-      );
-      const height = Math.max(
-        this.node.props.height ?? RECT.MIN_SIZE,
-        RECT.MIN_SIZE
-      );
-      rect.width(width);
-      rect.height(height);
-    }
-    /**
-     * 销毁
-     */
-    destroy() {
-      this.core.off("toolType:change", __privateGet(this, _toolTypeChangeHandler));
-      this.element.destroy();
-    }
-  }
-  _toolTypeChangeHandler = new WeakMap();
-  _RectNode_instances = new WeakSet();
-  /**
-   * 设置事件处理器
-   */
-  setupEventHandlers_fn = function(rect) {
-    const element = rect;
-    this.core.on("toolType:change", __privateGet(this, _toolTypeChangeHandler));
-    element.on("transform", (event) => {
-      const rect2 = event.target;
-      const { width, height } = getRectSize(rect2);
-      rect2.scale({ x: 1, y: 1 });
-      rect2.width(width);
-      rect2.height(height);
-    });
-    element.on("transformend", (event) => {
-      const rect2 = event.target;
-      const { width, height } = getRectSize(rect2);
-      const newProps = {
-        ...this.node.props,
-        x: rect2.x(),
-        y: rect2.y(),
-        width,
-        height,
-        rotation: rect2.rotation()
-      };
-      this.node.props = newProps;
-      this.core._syncNodeFromElement(this.node.id, {
-        props: newProps
-      });
-    });
-    element.on("dragend", (event) => {
-      const rect2 = event.target;
-      const newProps = {
-        ...this.node.props,
-        x: rect2.x(),
-        y: rect2.y()
-      };
-      this.node.props = newProps;
-      this.core._syncNodeFromElement(this.node.id, {
-        props: newProps
-      });
-    });
-  };
-  class ImageNode extends BaseCanvasNode {
-    constructor(core, node, isDraft = false) {
-      super(core, node, isDraft);
-      __privateAdd(this, _ImageNode_instances);
-      __privateAdd(this, _toolTypeChangeHandler2, (toolType) => {
-        const isSelect = toolType === "select";
-        this.element.listening(isSelect);
-      });
-      __privateMethod(this, _ImageNode_instances, loadImage_fn).call(this);
-      __privateMethod(this, _ImageNode_instances, setupEventHandlers_fn2).call(this, this.getElement());
-    }
-    createElement() {
-      const width = this.node.props.width || IMAGE.MIN_SIZE;
-      const height = this.node.props.height || IMAGE.MIN_SIZE;
-      const placeholder = document.createElement("canvas");
-      placeholder.width = width;
-      placeholder.height = height;
-      const img = new Konva.Image({
-        id: this.node.id,
-        x: this.node.props.x,
-        y: this.node.props.y,
-        width,
-        height,
-        rotation: this.node.props.rotation || 0,
-        name: `${NODE_NAMES.nodeRoot} ${NODE_NAMES.selectable} ${NODE_NAMES.image}`,
-        draggable: true,
-        image: placeholder
-      });
-      return img;
-    }
-    /**
-     * 获取 Konva.Image 实例
-     */
-    getElement() {
-      return this.element;
-    }
-    /**
-     * 更新节点数据
-     */
-    updateNode(node) {
-      this.node = {
-        ...this.node,
-        ...node,
-        props: {
-          ...this.node.props,
-          ...node.props
-        },
-        style: {
-          ...this.node.style,
-          ...node.style
-        },
-        meta: {
-          ...this.node.meta,
-          ...node.meta
-        }
-      };
-      const img = this.getElement();
-      img.x(this.node.props.x);
-      img.y(this.node.props.y);
-      if (this.node.props.width && this.node.props.height) {
-        const width = Math.max(this.node.props.width, IMAGE.MIN_SIZE);
-        const height = Math.max(this.node.props.height, IMAGE.MIN_SIZE);
-        img.width(width);
-        img.height(height);
-      }
-      if (this.node.props.rotation !== void 0) {
-        img.rotation(this.node.props.rotation);
-      }
-      if (node.meta?.imageUrl && node.meta.imageUrl !== this.node.meta.imageUrl) {
-        __privateMethod(this, _ImageNode_instances, loadImage_fn).call(this);
-      }
-    }
-    /**
-     * 销毁
-     */
-    destroy() {
-      this.core.off("toolType:change", __privateGet(this, _toolTypeChangeHandler2));
-      this.element.destroy();
-    }
-  }
-  _ImageNode_instances = new WeakSet();
-  /**
-   * 加载图片
-   */
-  loadImage_fn = function() {
-    const imageUrl = this.node.meta.imageUrl;
-    if (!imageUrl) {
-      console.warn("Image URL is missing");
-      return;
-    }
-    const img = new window.Image();
-    img.crossOrigin = "anonymous";
-    img.src = imageUrl;
-    img.onload = () => {
-      this.getElement().image(img);
-      const width = this.node.props.width ?? img.width;
-      const height = this.node.props.height ?? img.height;
-      this.getElement().width(Math.max(width, IMAGE.MIN_SIZE));
-      this.getElement().height(Math.max(height, IMAGE.MIN_SIZE));
-    };
-    img.onerror = () => {
-      console.error("Failed to load image:", imageUrl);
-    };
-  };
-  _toolTypeChangeHandler2 = new WeakMap();
-  /**
-   * 设置事件处理器
-   */
-  setupEventHandlers_fn2 = function(img) {
-    this.core.on("toolType:change", __privateGet(this, _toolTypeChangeHandler2));
-    img.on("transform", (event) => {
-      const img2 = event.target;
-      const width = Math.max(IMAGE.MIN_SIZE, img2.width() * img2.scaleX());
-      const height = Math.max(IMAGE.MIN_SIZE, img2.height() * img2.scaleY());
-      img2.scale({ x: 1, y: 1 });
-      img2.width(width);
-      img2.height(height);
-      __privateMethod(this, _ImageNode_instances, syncImageMarkers_fn).call(this);
-    });
-    img.on("transformend", (event) => {
-      const img2 = event.target;
-      const newProps = {
-        ...this.node.props,
-        x: img2.x(),
-        y: img2.y(),
-        width: img2.width(),
-        height: img2.height(),
-        rotation: img2.rotation()
-      };
-      this.node.props = newProps;
-      this.core._syncNodeFromElement(this.node.id, {
-        props: newProps
-      });
-      __privateMethod(this, _ImageNode_instances, syncImageMarkersToState_fn).call(this);
-    });
-    img.on("dragmove", () => {
-      __privateMethod(this, _ImageNode_instances, syncImageMarkers_fn).call(this);
-    });
-    img.on("dragend", (event) => {
-      const img2 = event.target;
-      const newProps = {
-        ...this.node.props,
-        x: img2.x(),
-        y: img2.y()
-      };
-      this.node.props = newProps;
-      this.core._syncNodeFromElement(this.node.id, {
-        props: newProps
-      });
-      __privateMethod(this, _ImageNode_instances, syncImageMarkersToState_fn).call(this);
-    });
-  };
-  /**
-   * 同步 image-marker 节点的位置（实时更新 Konva 元素）
-   */
-  syncImageMarkers_fn = function() {
-    const img = this.getElement();
-    const layer = img.getLayer();
-    if (!layer) return;
-    const imgX = img.x();
-    const imgY = img.y();
-    const imgWidth = img.width();
-    const imgHeight = img.height();
-    const imageMarkerElements = layer.find(
-      (node) => node.hasName(this.node.id)
-    );
-    const nodes = this.core.getState().nodes || [];
-    imageMarkerElements.forEach((nodeElement) => {
-      const nodeData = nodes.find((n) => n.id === nodeElement.id());
-      if (nodeData?.type === "image-marker" && nodeData.meta.relativePosition) {
-        const { start, end } = nodeData.meta.relativePosition;
-        const startX = imgX + start.percentX / 100 * imgWidth;
-        const startY = imgY + start.percentY / 100 * imgHeight;
-        const endX = imgX + end.percentX / 100 * imgWidth;
-        const endY = imgY + end.percentY / 100 * imgHeight;
-        const newX = Math.min(startX, endX);
-        const newY = Math.min(startY, endY);
-        const newWidth = Math.abs(endX - startX);
-        const newHeight = Math.abs(endY - startY);
-        nodeElement.position({ x: newX, y: newY });
-        nodeElement.setAttrs({ width: newWidth, height: newHeight });
-        const children = nodeElement.getChildren();
-        children.forEach((child) => {
-          if (child.getClassName() === "Rect") {
-            child.setAttrs({ width: newWidth, height: newHeight });
-          } else if (child.getClassName() === "Group") {
-            child.setAttrs({ x: newWidth, y: newHeight });
-          }
-        });
-      }
-    });
-  };
-  /**
-   * 同步 image-marker 节点到状态
-   */
-  syncImageMarkersToState_fn = function() {
-    const img = this.getElement();
-    const layer = img.getLayer();
-    if (!layer) return;
-    const imageMarkerElements = layer.find(
-      (node) => node.hasName(this.node.id)
-    );
-    imageMarkerElements.forEach((nodeElement) => {
-      this.core._syncNodeFromElement(nodeElement.id(), {
-        props: {
-          x: nodeElement.x(),
-          y: nodeElement.y(),
-          width: nodeElement.width(),
-          height: nodeElement.height()
-        }
-      });
-    });
-  };
-  class ImageMarkerNode extends BaseCanvasNode {
-    constructor(core, node, isDraft = false) {
-      super(core, node, isDraft);
-      __privateAdd(this, _ImageMarkerNode_instances);
-      __privateAdd(this, _rect);
-      __privateAdd(this, _markerGroup);
-      __privateAdd(this, _circle);
-      __privateAdd(this, _text);
-      __privateAdd(this, _handleViewportChange);
-      __privateAdd(this, _handleNodesSelected);
-      const group = this.getElement();
-      __privateSet(this, _rect, group.findOne(".rect"));
-      __privateSet(this, _markerGroup, group.findOne(".marker-group"));
-      __privateSet(this, _circle, __privateGet(this, _markerGroup).findOne("Circle"));
-      __privateSet(this, _text, __privateGet(this, _markerGroup).findOne("Text"));
-      __privateMethod(this, _ImageMarkerNode_instances, setupEventHandlers_fn3).call(this);
-      __privateSet(this, _handleViewportChange, () => {
-        __privateMethod(this, _ImageMarkerNode_instances, changeVisulStyle_fn).call(this);
-      });
-      this.core.on("viewport:scale:change", __privateGet(this, _handleViewportChange));
-      __privateSet(this, _handleNodesSelected, (selectedIds) => {
-        const isSelected = selectedIds.includes(this.node.id);
-        this.setFocusState(isSelected);
-      });
-      this.core.on("nodes:selected", __privateGet(this, _handleNodesSelected));
-    }
-    createElement() {
-      const width = Math.max(
-        this.node.props.width ?? RECT.MIN_SIZE,
-        RECT.MIN_SIZE
-      );
-      const height = Math.max(
-        this.node.props.height ?? RECT.MIN_SIZE,
-        RECT.MIN_SIZE
-      );
-      const group = new Konva.Group({
-        id: this.node.id,
-        name: `${NODE_NAMES.nodeRoot} ${NODE_NAMES.imageMarker} ${this.node.meta.parent}`,
-        x: this.node.props.x,
-        y: this.node.props.y,
-        width,
-        height
-      });
-      const stageScale = this.core.getStageScale();
-      const rectStrokeWidth = 2 / stageScale;
-      const rectDash = [5 / stageScale, 5 / stageScale];
-      const rectCornerRadius = RECT.CORNER_RADIUS / stageScale;
-      const rect = new Konva.Rect({
-        name: "rect",
-        x: 0,
-        y: 0,
-        width,
-        height,
-        stroke: "#3B82F6",
-        strokeWidth: rectStrokeWidth,
-        dash: rectDash,
-        fill: "transparent",
-        cornerRadius: rectCornerRadius,
-        listening: false
-      });
-      const markerGroup = new Konva.Group({
-        name: "marker-group",
-        x: width,
-        y: height,
-        visible: this.isDraft ? false : true
-      });
-      const radius = 14 / stageScale;
-      const strokeWidth = 3 / stageScale;
-      const fontSize = 16 / stageScale;
-      const circle = new Konva.Circle({
-        radius,
-        fill: "#3B82F6",
-        stroke: "white",
-        strokeWidth
-      });
-      const text = new Konva.Text({
-        x: -radius,
-        y: -radius,
-        width: radius * 2,
-        height: radius * 2,
-        text: String(this.node.meta.markerNumber || ""),
-        align: "center",
-        verticalAlign: "middle",
-        fontSize,
-        fill: "white"
-      });
-      markerGroup.add(circle);
-      markerGroup.add(text);
-      group.add(rect);
-      group.add(markerGroup);
-      return group;
-    }
-    /**
-     * 获取 Konva.Group 实例
-     */
-    getElement() {
-      return this.element;
-    }
-    /**
-     * 更新节点数据
-     */
-    updateNode(node) {
-      this.node = {
-        ...this.node,
-        ...node,
-        props: {
-          ...this.node.props,
-          ...node.props
-        },
-        style: {
-          ...this.node.style,
-          ...node.style
-        },
-        meta: {
-          ...this.node.meta,
-          ...node.meta
-        }
-      };
-      const group = this.getElement();
-      group.x(this.node.props.x);
-      group.y(this.node.props.y);
-      const width = Math.max(
-        this.node.props.width ?? RECT.MIN_SIZE,
-        RECT.MIN_SIZE
-      );
-      const height = Math.max(
-        this.node.props.height ?? RECT.MIN_SIZE,
-        RECT.MIN_SIZE
-      );
-      group.width(width);
-      group.height(height);
-      __privateGet(this, _rect).width(width);
-      __privateGet(this, _rect).height(height);
-      __privateGet(this, _markerGroup).x(width);
-      __privateGet(this, _markerGroup).y(height);
-      if (node.style?.color) {
-        __privateGet(this, _rect).stroke(node.style.color);
-      }
-      if (node.meta?.markerNumber !== void 0) {
-        __privateGet(this, _text).text(String(node.meta.markerNumber));
-      }
-    }
-    /**
-     * 销毁
-     */
-    destroy() {
-      this.core.off("viewport:scale:change", __privateGet(this, _handleViewportChange));
-      this.core.off("nodes:selected", __privateGet(this, _handleNodesSelected));
-      this.element.destroy();
-    }
-    /**
-     * 更新焦点状态（hover 或 selected）
-     */
-    setFocusState(isFocus) {
-      const stageScale = this.core.getStageScale();
-      const strokeWidth = isFocus ? 4 / stageScale : 3 / stageScale;
-      const scale = isFocus ? 1.2 : 1;
-      __privateGet(this, _rect).strokeWidth(strokeWidth);
-      __privateGet(this, _circle).strokeWidth(strokeWidth);
-      __privateGet(this, _markerGroup).scaleX(scale);
-      __privateGet(this, _markerGroup).scaleY(scale);
-    }
-  }
-  _rect = new WeakMap();
-  _markerGroup = new WeakMap();
-  _circle = new WeakMap();
-  _text = new WeakMap();
-  _handleViewportChange = new WeakMap();
-  _handleNodesSelected = new WeakMap();
-  _ImageMarkerNode_instances = new WeakSet();
-  /**
-   * 更新标记点的缩放以保持视觉大小不变
-   */
-  changeVisulStyle_fn = function() {
-    const stageScale = this.core.getStageScale();
-    const radius = 14 / stageScale;
-    const strokeWidth = 3 / stageScale;
-    const fontSize = 16 / stageScale;
-    const rectStrokeWidth = 3 / stageScale;
-    const rectDash = [5 / stageScale, 5 / stageScale];
-    const rectCornerRadius = RECT.CORNER_RADIUS / stageScale;
-    __privateGet(this, _rect).strokeWidth(rectStrokeWidth);
-    __privateGet(this, _rect).dash(rectDash);
-    __privateGet(this, _rect).cornerRadius(rectCornerRadius);
-    __privateGet(this, _circle).radius(radius);
-    __privateGet(this, _circle).strokeWidth(strokeWidth);
-    __privateGet(this, _text).x(-radius);
-    __privateGet(this, _text).y(-radius);
-    __privateGet(this, _text).width(radius * 2);
-    __privateGet(this, _text).height(radius * 2);
-    __privateGet(this, _text).fontSize(fontSize);
-  };
-  /**
-   * 设置事件处理器
-   */
-  setupEventHandlers_fn3 = function() {
-    __privateGet(this, _markerGroup).on("pointerover", () => {
-      this.setFocusState(true);
-      this.core.setCursor("pointer");
-    });
-    __privateGet(this, _markerGroup).on("pointerout", () => {
-      const selectedIds = this.core.getState().selectedNodeIds || [];
-      const isSelected = selectedIds.includes(this.node.id);
-      this.setFocusState(isSelected);
-      this.core.resetCursor();
-    });
-    __privateGet(this, _markerGroup).on("pointerdown", () => {
-      this.core.selectNode(this.node.id);
-    });
-    __privateGet(this, _markerGroup).on("transform", () => {
-      console.log("image marker group on transform called");
-    });
-  };
-  function createCanvasNodeByType(core, type, config, isDraft = false) {
-    switch (type) {
-      case "rectangle":
-        return new RectNode(core, config, isDraft);
-      case "image":
-        return new ImageNode(core, config, isDraft);
-      case "image-marker":
-        return new ImageMarkerNode(core, config, isDraft);
-      default:
-        return null;
-    }
-  }
-  function clamp(value, range) {
-    return Math.min(Math.max(value, range[0]), range[1]);
-  }
-  const createNodeByType = (type, position, style, meta) => {
-    const baseNode = {
-      type,
-      id: uuid.v4(),
-      text: null,
-      style: {
-        opacity: 1,
-        line: "solid",
-        color: "black",
-        size: "medium",
-        animated: false
-      },
-      props: {
-        x: position.x,
-        y: position.y,
-        rotation: 0,
-        visible: true
-      },
-      meta: {
-        ...meta,
-        startPoint: position
-      }
-    };
-    if (type === "image-marker") {
-      return {
-        ...baseNode,
-        style: {
-          ...baseNode.style,
-          color: "#3B82F6"
-        }
-      };
-    }
-    return baseNode;
-  };
-  function updateNodeByType(node, position) {
-    let finalPosition = position;
-    if (node.type === "image-marker" && node.meta.bounds) {
-      const bounds = node.meta.bounds;
-      finalPosition = {
-        x: clamp(position.x, [bounds.x, bounds.x + bounds.width]),
-        y: clamp(position.y, [bounds.y, bounds.y + bounds.height])
-      };
-    }
-    if (node.type === "rectangle" || node.type === "image-marker") {
-      const startPoint = node.meta.startPoint ?? {
-        x: node.props.x,
-        y: node.props.y
-      };
-      const [p1, p2] = normalizePoints(startPoint, finalPosition);
-      return {
-        ...node,
-        props: {
-          ...node.props,
-          x: p1.x,
-          y: p1.y,
-          width: Math.max(p2.x - p1.x, RECT.MIN_SIZE),
-          height: Math.max(p2.y - p1.y, RECT.MIN_SIZE)
-        },
-        meta: {
-          ...node.meta,
-          // 保存初始起点，以便后续更新使用
-          startPoint
-        }
-      };
-    }
-    return node;
-  }
-  function normalizePoints(p1, p2) {
-    let p1x = p1.x, p1y = p1.y, p2x = p2.x, p2y = p2.y, d;
-    if (p1x > p2x) {
-      d = Math.abs(p1x - p2x);
-      p1x = p2x;
-      p2x = p1x + d;
-    }
-    if (p1y > p2y) {
-      d = Math.abs(p1y - p2y);
-      p1y = p2y;
-      p2y = p1y + d;
-    }
-    return [
-      { x: p1x, y: p1y },
-      { x: p2x, y: p2y }
-    ];
-  }
-  class CanvasCore extends CanvasState {
-    constructor(el) {
-      super({
-        viewport: {
-          x: 0,
-          y: 0,
-          width: el.clientWidth,
-          height: el.clientHeight,
-          scale: 1
-        },
-        toolType: "select",
-        nodes: []
-      });
-      __privateAdd(this, _CanvasCore_instances);
-      __privateAdd(this, _canvasStage);
-      __privateAdd(this, _mainLayer);
-      __privateAdd(this, _canvasTransformer);
-      __privateAdd(this, _draftNode, null);
-      __privateAdd(this, _container);
-      __privateAdd(this, _handleKeyDown, (e) => {
-        if (e.key === "Delete" || e.key === "Backspace") {
-          e.preventDefault();
-          this.deleteSelectedNodes();
-        }
-      });
-      __privateSet(this, _container, el);
-      __privateSet(this, _canvasStage, new CanvasStage(this, {
-        container: el,
-        width: el.clientWidth,
-        height: el.clientHeight,
-        draggable: false,
-        className: "touch-none"
-      }));
-      __privateSet(this, _mainLayer, new Konva.Layer());
-      __privateSet(this, _canvasTransformer, new CanvasTransformer(this));
-      __privateGet(this, _canvasStage).getStage().add(__privateGet(this, _mainLayer));
-      __privateGet(this, _mainLayer).add(__privateGet(this, _canvasTransformer).getTransformer());
-      this.updateViewport(this.getState().viewport, false);
-      __privateMethod(this, _CanvasCore_instances, setupKeyboardEvents_fn).call(this);
-    }
-    /**
-     * 获取 CanvasStage 实例
-     */
-    getCanvasStage() {
-      return __privateGet(this, _canvasStage);
-    }
-    /**
-     * 获取 CanvasTransformer 实例
-     */
-    getCanvasTransformer() {
-      return __privateGet(this, _canvasTransformer);
-    }
-    /**
-     * 发射事件（供内部类使用）
-     */
-    emitEvent(event, data) {
-      this.emit(event, data);
-    }
-    /**
-     * 获取 Konva.Stage 实例
-     */
-    getStage() {
-      return __privateGet(this, _canvasStage).getStage();
-    }
-    /**
-     * 获取 Stage 容器元素
-     */
-    getContainer() {
-      return __privateGet(this, _canvasStage).getStage().container();
-    }
-    /**
-     * 获取主图层
-     */
-    getMainLayer() {
-      return __privateGet(this, _mainLayer);
-    }
-    /**
-     * 获取当前工具类型
-     */
-    getToolType() {
-      return this.getState().toolType;
-    }
-    /**
-     * 设置当前工具类型（内部使用）
-     */
-    setToolType(type) {
-      this.selectNode();
-      this._updateState(
-        {
-          toolType: type
-        },
-        false
-      );
-      this.emit("toolType:change", type);
-      if (type === "hand") {
-        __privateGet(this, _canvasStage).setDraggable(true);
-        __privateGet(this, _canvasStage).setCursor("grab");
-      } else {
-        __privateGet(this, _canvasStage).setDraggable(false);
-        __privateGet(this, _canvasStage).resetCursor();
-      }
-    }
-    /**
-     * 设置是否可拖拽（内部使用）
-     */
-    setDraggable(draggable) {
-      __privateGet(this, _canvasStage).setDraggable(draggable);
-    }
-    /**
-     * 设置光标
-     * @internal 仅供内部使用
-     */
-    setCursor(cursor) {
-      __privateGet(this, _canvasStage).setCursor(cursor);
-    }
-    /**
-     * 重置光标
-     * @internal 仅供内部使用
-     */
-    resetCursor() {
-      __privateGet(this, _canvasStage).resetCursor();
-    }
-    /**
-     * 获取当前 Stage 缩放比例
-     */
-    getStageScale() {
-      return __privateGet(this, _canvasStage).getStage().scaleX();
-    }
-    /**
-     * 更新视口位置
-     * @internal 仅供内部使用，外部请使用 CanvasApi
-     */
-    updateViewport(viewport, addToHistory = false) {
-      __privateGet(this, _canvasStage).setViewport(viewport);
-      const oldViewport = this.getState().viewport;
-      const newViewport = {
-        ...oldViewport,
-        ...viewport
-      };
-      this._updateState(
-        {
-          viewport: newViewport
-        },
-        addToHistory
-      );
-      this.emit("viewport:change", newViewport);
-      if (oldViewport.scale !== newViewport.scale) {
-        this.emit("viewport:scale:change", newViewport.scale);
-      }
-      __privateGet(this, _canvasTransformer).emitPositionChange();
-    }
-    createNodes(nodes) {
-      const canvasNodes = nodes.map((node) => createCanvasNodeByType(this, node.type, node, false)).filter((node) => node !== null);
-      canvasNodes.forEach((node) => {
-        __privateGet(this, _mainLayer).add(node.getElement());
-      });
-      const newNodes = [...this.getState().nodes || [], ...nodes];
-      this._updateState(
-        {
-          nodes: newNodes
-        },
-        true
-      );
-      this.emit("nodes:created", nodes);
-    }
-    /**
-     * 创建图片标注节点（内部使用）
-     */
-    createImageMarkerNode(parentImageId, startPosition, endPosition, imageBounds) {
-      const nodes = this.getState().nodes || [];
-      let maxMarkerNumber = 0;
-      nodes.forEach((node) => {
-        if (node.type === "image-marker" && node.meta.parent === parentImageId && typeof node.meta.markerNumber === "number") {
-          maxMarkerNumber = Math.max(maxMarkerNumber, node.meta.markerNumber);
-        }
-      });
-      const startPercentX = (startPosition.x - imageBounds.x) / imageBounds.width * 100;
-      const startPercentY = (startPosition.y - imageBounds.y) / imageBounds.height * 100;
-      const endPercentX = (endPosition.x - imageBounds.x) / imageBounds.width * 100;
-      const endPercentY = (endPosition.y - imageBounds.y) / imageBounds.height * 100;
-      const x = Math.min(startPosition.x, endPosition.x);
-      const y = Math.min(startPosition.y, endPosition.y);
-      const width = Math.abs(endPosition.x - startPosition.x);
-      const height = Math.abs(endPosition.y - startPosition.y);
-      const markerNode = {
-        id: uuid.v4(),
-        type: "image-marker",
-        props: {
-          x,
-          y,
-          width,
-          height,
-          rotation: 0,
-          visible: true
-        },
-        style: {
-          color: "#3B82F6",
-          line: "dashed",
-          size: "medium",
-          opacity: 1
-        },
-        meta: {
-          parent: parentImageId,
-          markerNumber: maxMarkerNumber + 1,
-          relativePosition: {
-            start: {
-              percentX: Math.max(0, Math.min(100, startPercentX)),
-              percentY: Math.max(0, Math.min(100, startPercentY))
-            },
-            end: {
-              percentX: Math.max(0, Math.min(100, endPercentX)),
-              percentY: Math.max(0, Math.min(100, endPercentY))
-            }
-          }
-        }
-      };
-      this.createNodes([markerNode]);
-    }
-    /**
-     * 在指定位置查找图片节点
-     * @internal 仅供内部使用
-     */
-    findImageAtPosition(position) {
-      const layer = __privateGet(this, _mainLayer);
-      const shapes = layer.getChildren();
-      const filteredShapes = shapes.filter(
-        (shape) => !shape.name().includes("imageMarker")
-      );
-      const sortedShapes = filteredShapes.slice().sort((a, b) => b.zIndex() - a.zIndex());
-      for (const shape of sortedShapes) {
-        const x = shape.x();
-        const y = shape.y();
-        const width = shape.width();
-        const height = shape.height();
-        if (position.x >= x && position.x <= x + width && position.y >= y && position.y <= y + height) {
-          if (shape.getClassName() === "Image") {
-            return shape;
-          }
-          return null;
-        }
-      }
-      return null;
-    }
-    /**
-     * @internal 仅供内部使用
-     */
-    createDraftNode(type, position, meta) {
-      if (__privateGet(this, _draftNode)) {
-        __privateGet(this, _draftNode).destroy();
-      }
-      const node = createNodeByType(type, position, void 0, meta);
-      __privateSet(this, _draftNode, createCanvasNodeByType(this, type, node, true));
-      if (!__privateGet(this, _draftNode)) return;
-      __privateGet(this, _mainLayer).add(__privateGet(this, _draftNode).getElement());
-    }
-    /**
-     * @internal 仅供内部使用
-     */
-    updateDraftNode(position) {
-      if (!__privateGet(this, _draftNode)) return;
-      const node = __privateGet(this, _draftNode).getNode();
-      const updatedNode = updateNodeByType(node, position);
-      __privateGet(this, _draftNode).updateNode(updatedNode);
-    }
-    /**
-     * @internal 仅供内部使用
-     */
-    finalizeDraftNode() {
-      if (!__privateGet(this, _draftNode)) return;
-      const id = uuid.v4();
-      const draftNode = __privateGet(this, _draftNode).getNode();
-      if (draftNode.type === "image-marker" && draftNode.meta.parent) {
-        const bounds = draftNode.meta.bounds;
-        const startPosition = draftNode.meta.startPosition;
-        const endPosition = {
-          x: draftNode.props.x + (draftNode.props.width || 0),
-          y: draftNode.props.y + (draftNode.props.height || 0)
-        };
-        const nodes = this.getState().nodes || [];
-        let maxMarkerNumber = 0;
-        nodes.forEach((node3) => {
-          if (node3.type === "image-marker" && node3.meta.parent === draftNode.meta.parent && typeof node3.meta.markerNumber === "number") {
-            maxMarkerNumber = Math.max(maxMarkerNumber, node3.meta.markerNumber);
-          }
-        });
-        const startPercentX = (startPosition.x - bounds.x) / bounds.width * 100;
-        const startPercentY = (startPosition.y - bounds.y) / bounds.height * 100;
-        const endPercentX = (endPosition.x - bounds.x) / bounds.width * 100;
-        const endPercentY = (endPosition.y - bounds.y) / bounds.height * 100;
-        const node2 = {
-          ...draftNode,
-          props: {
-            ...draftNode.props
-          },
-          style: {
-            ...draftNode.style
-          },
-          meta: {
-            parent: draftNode.meta.parent,
-            markerNumber: maxMarkerNumber + 1,
-            relativePosition: {
-              start: {
-                percentX: Math.max(0, Math.min(100, startPercentX)),
-                percentY: Math.max(0, Math.min(100, startPercentY))
-              },
-              end: {
-                percentX: Math.max(0, Math.min(100, endPercentX)),
-                percentY: Math.max(0, Math.min(100, endPercentY))
-              }
-            }
-          },
-          id,
-          type: "image-marker"
-        };
-        this.createNodes([node2]);
-        __privateGet(this, _draftNode).destroy();
-        __privateSet(this, _draftNode, null);
-        this.setToolType("select");
-        return;
-      }
-      const node = {
-        ...draftNode,
-        props: {
-          ...draftNode.props
-        },
-        style: {
-          ...draftNode.style
-        },
-        meta: {
-          ...draftNode.meta
-        },
-        id
-      };
-      this.createNodes([node]);
-      __privateGet(this, _draftNode).destroy();
-      __privateSet(this, _draftNode, null);
-      this.setToolType("select");
-    }
-    /**
-     * 选择节点
-     * @internal 仅供内部使用，外部请使用 CanvasApi
-     */
-    selectNode(nodeId, multiSelect = false) {
-      const curSelectedNodeIds = this.getState().selectedNodeIds ?? [];
-      let selectedNodeIds = [];
-      if (nodeId) {
-        if (multiSelect && curSelectedNodeIds.length > 0) {
-          selectedNodeIds = [...curSelectedNodeIds, nodeId];
-        } else {
-          selectedNodeIds = [nodeId];
-        }
-      } else if (curSelectedNodeIds.length === 0) {
-        return;
-      }
-      if (selectedNodeIds.length === 0) {
-        __privateGet(this, _canvasTransformer).clearNodes();
-      } else {
-        const nodes = this.getStage().find(`.${NODE_NAMES.selectable}`).filter((node) => selectedNodeIds.includes(node.id()));
-        __privateGet(this, _canvasTransformer).setNodes(nodes);
-      }
-      this._updateState({ selectedNodeIds }, false);
-      this.emit("nodes:selected", selectedNodeIds);
-    }
-    /**
-     * 删除指定的节点（内部使用）
-     * 如果删除的是 image 节点，会同步删除所有关联的 image-marker
-     * @internal 仅供内部使用，外部请使用 CanvasApi
-     * @param nodeIds - 要删除的节点 ID 数组
-     * @returns 被删除的节点数据数组
-     */
-    deleteNodes(nodeIds) {
-      if (nodeIds.length === 0) return [];
-      const nodes = this.getState().nodes || [];
-      const idsToDelete = new Set(nodeIds);
-      nodeIds.forEach((id) => {
-        const node = nodes.find((n) => n.id === id);
-        if (node?.type === "image") {
-          nodes.forEach((n) => {
-            if (n.type === "image-marker" && n.meta.parent === id) {
-              idsToDelete.add(n.id);
-            }
-          });
-        }
-      });
-      const deletedNodes = nodes.filter((n) => idsToDelete.has(n.id));
-      idsToDelete.forEach((id) => {
-        const shape = this.getStage().findOne(`#${id}`);
-        if (shape) {
-          shape.destroy();
-        }
-      });
-      const newNodes = nodes.filter((n) => !idsToDelete.has(n.id));
-      __privateGet(this, _canvasTransformer).clearNodes();
-      this._updateState(
-        {
-          nodes: newNodes,
-          selectedNodeIds: []
-        },
-        true
-      );
-      this.emit("nodes:deleted", deletedNodes);
-      return deletedNodes;
-    }
-    /**
-     * 删除选中的节点（内部使用）
-     * @internal 仅供内部使用，外部请使用 CanvasApi
-     */
-    deleteSelectedNodes() {
-      const selectedNodeIds = this.getState().selectedNodeIds || [];
-      if (selectedNodeIds.length === 0) return;
-      this.deleteNodes(selectedNodeIds);
-    }
-    /**
-     * 销毁 canvas
-     */
-    dispose() {
-      __privateGet(this, _container).removeEventListener("keydown", __privateGet(this, _handleKeyDown));
-      this.getCanvasTransformer().destroy();
-      this.getMainLayer().destroy();
-      this.getCanvasStage().destroy();
-      this._dispose();
-    }
-    /**
-     * 从元素同步节点数据（供节点类内部使用）
-     */
-    _syncNodeFromElement(nodeId, updates) {
-      const nodes = this.getState().nodes || [];
-      const nodeIndex = nodes.findIndex((n) => n.id === nodeId);
-      if (nodeIndex === -1) return;
-      const updatedNode = {
-        ...nodes[nodeIndex],
-        ...updates,
-        props: {
-          ...nodes[nodeIndex].props,
-          ...updates.props
-        },
-        style: {
-          ...nodes[nodeIndex].style,
-          ...updates.style
-        },
-        meta: {
-          ...nodes[nodeIndex].meta,
-          ...updates.meta
-        }
-      };
-      const newNodes = [...nodes];
-      newNodes[nodeIndex] = updatedNode;
-      this._updateState(
-        {
-          nodes: newNodes
-        },
-        true
-      );
-    }
-    /**
-     * 实现父类的状态同步方法
-     * 当 undo/redo 时被调用
-     */
-    _syncState(state) {
-      __privateGet(this, _canvasStage).setViewport({
-        x: state.viewport.x,
-        y: state.viewport.y,
-        scale: state.viewport.scale,
-        width: state.viewport.width,
-        height: state.viewport.height
-      });
-    }
-  }
-  _canvasStage = new WeakMap();
-  _mainLayer = new WeakMap();
-  _canvasTransformer = new WeakMap();
-  _draftNode = new WeakMap();
-  _container = new WeakMap();
-  _handleKeyDown = new WeakMap();
-  _CanvasCore_instances = new WeakSet();
-  /**
-   * 设置键盘事件监听
-   */
-  setupKeyboardEvents_fn = function() {
-    __privateGet(this, _container).tabIndex = 0;
-    __privateGet(this, _container).addEventListener("keydown", __privateGet(this, _handleKeyDown));
-  };
-  class CanvasApi extends CanvasCore {
-    /**
-     * 获取所有可用的工具类型
-     */
-    getAvailableTools() {
-      return ["select", "hand", "rectangle", "image-marker"];
-    }
-    /**
-     * 设置当前工具类型
-     */
-    setToolType(type) {
-      super.setToolType(type);
-    }
-    /**
-     * 手动创建多个节点
-     * 如果你不知道自己在干什么，请使用更高层的封装方法，如 createImageNode
-     */
-    createNodes(nodes) {
-      super.createNodes(nodes);
-    }
-    /**
-     * 根据 ID 获取节点
-     */
-    getNodeById(id) {
-      const nodes = this.getState().nodes || [];
-      const node = nodes.find((n) => n.id === id);
-      return node || null;
-    }
-    /**
-     * 更新视口位置
-     */
-    updateViewport(viewport, addToHistory = false) {
-      super.updateViewport(viewport, addToHistory);
-    }
-    /**
-     * 创建图片节点
-     */
-    createImageNode(imageUrl, position) {
-      const pos = position ?? { x: 100, y: 100 };
-      const imageNode = {
-        id: uuid.v4(),
-        type: "image",
-        props: {
-          x: pos.x,
-          y: pos.y,
-          width: void 0,
-          height: void 0,
-          rotation: 0,
-          visible: true
-        },
-        style: {
-          color: "#000000",
-          line: "solid",
-          size: "medium",
-          opacity: 1
-        },
-        meta: {
-          imageUrl
-        }
-      };
-      this.createNodes([imageNode]);
-    }
-    /**
-     * 导出全部图形为图片
-     * @param options - 导出配置
-     * @returns DataURL 格式的图片数据
-     */
-    exportAsImage(options) {
-      const stage = this.getStage();
-      const transformer = this.getCanvasTransformer().getTransformer();
-      const transformerVisible = transformer.visible();
-      transformer.visible(false);
-      try {
-        return stage.toDataURL({
-          pixelRatio: options?.pixelRatio ?? 2,
-          mimeType: options?.mimeType ?? "image/png",
-          quality: options?.quality ?? 1
-        });
-      } finally {
-        transformer.visible(transformerVisible);
-      }
-    }
-    /**
-     * 导出当前选区为图片
-     * @param options - 导出配置
-     * @returns DataURL 格式的图片数据，如果没有选区则返回 null
-     */
-    exportSelectionAsImage(options) {
-      const selectedNodeIds = this.getState().selectedNodeIds || [];
-      if (selectedNodeIds.length === 0) {
-        console.warn("No selection to export");
-        return null;
-      }
-      const padding = options?.padding ?? 0;
-      const tempGroup = new Konva.Group();
-      selectedNodeIds.forEach((id) => {
-        const shape = this.getStage().findOne(`#${id}`);
-        if (shape) {
-          const clone = shape.clone();
-          tempGroup.add(clone);
-        }
-      });
-      const box = tempGroup.getClientRect();
-      const dataURL = tempGroup.toDataURL({
-        x: box.x - padding,
-        y: box.y - padding,
-        width: box.width + padding * 2,
-        height: box.height + padding * 2,
-        pixelRatio: options?.pixelRatio ?? 2,
-        mimeType: options?.mimeType ?? "image/png",
-        quality: options?.quality ?? 1
-      });
-      tempGroup.destroy();
-      return dataURL;
-    }
-    /**
-     * 导出带有标注的图片节点为图片
-     * @param id - 图片节点 ID
-     * @returns DataURL 格式的图片数据，如果节点或者 marker 不存在则返回 null
-     */
-    exportImageWithMarker(id, options) {
-      const imageShape = this.getStage().findOne(`#${id}`);
-      if (!imageShape) {
-        console.warn("Image shape not found on stage");
-        return null;
-      }
-      const nodes = this.getState().nodes || [];
-      const markerNodes = nodes.filter(
-        (n) => n.type === "image-marker" && n.meta.parent === id
-      );
-      if (markerNodes.length === 0) {
-        console.warn("No image-marker nodes found for the given image ID");
-        return null;
-      }
-      const tempGroup = new Konva.Group();
-      const imageClone = imageShape.clone();
-      tempGroup.add(imageClone);
-      markerNodes.forEach((markerNode) => {
-        const markerShape = this.getStage().findOne(`#${markerNode.id}`);
-        if (markerShape) {
-          const markerClone = markerShape.clone();
-          const rect = markerClone.findOne(".rect");
-          const markerGroup = markerClone.findOne(".marker-group");
-          if (rect) {
-            rect.strokeWidth(3);
-            rect.dash([5, 5]);
-            rect.cornerRadius(6);
-          }
-          if (markerGroup) {
-            const circle = markerGroup.findOne("Circle");
-            const text = markerGroup.findOne("Text");
-            if (circle) {
-              circle.radius(14);
-              circle.strokeWidth(3);
-            }
-            if (text) {
-              const radius = 14;
-              text.x(-radius);
-              text.y(-radius);
-              text.width(radius * 2);
-              text.height(radius * 2);
-              text.fontSize(16);
-            }
-          }
-          tempGroup.add(markerClone);
-        }
-      });
-      const box = tempGroup.getClientRect();
-      console.log("Exporting image with markers, bounding box:", box);
-      const dataURL = tempGroup.toDataURL({
-        x: box.x,
-        y: box.y,
-        width: box.width,
-        height: box.height,
-        pixelRatio: options?.pixelRatio ?? 2,
-        mimeType: options?.mimeType ?? "image/png",
-        quality: options?.quality ?? 1
-      });
-      tempGroup.destroy();
-      return dataURL;
-    }
-    /**
-     * 删除当前选中的节点
-     * 如果删除的是 image 节点，会同步删除所有关联的 image-marker
-     */
-    deleteSelectedNodes() {
-      const selectedNodeIds = this.getState().selectedNodeIds || [];
-      this.deleteNodes(selectedNodeIds);
-    }
-    /**
-     * 删除指定的节点
-     * 如果删除的是 image 节点，会同步删除所有关联的 image-marker
-     * @param nodeIds - 要删除的节点 ID 数组
-     * @returns 被删除的节点数据数组
-     */
-    deleteNodes(nodeIds) {
-      return super.deleteNodes(nodeIds);
-    }
-    /**
-     * 将节点移动到最上层
-     */
-    moveNodesToTop(nodeIds) {
-      if (nodeIds.length === 0) return;
-      nodeIds.forEach((id) => {
-        const shape = this.getStage().findOne(`#${id}`);
-        if (shape) {
-          shape.moveToTop();
-        }
-      });
-    }
-    /**
-     * 将节点移动到最下层
-     */
-    moveNodesToBottom(nodeIds) {
-      if (nodeIds.length === 0) return;
-      nodeIds.forEach((id) => {
-        const shape = this.getStage().findOne(`#${id}`);
-        if (shape) {
-          shape.moveToBottom();
-        }
-      });
-    }
-    /**
-     * 滚动到内容区域
-     * - 如果提供了 nodeIds，将指定的节点居中显示
-     * - 如果没有提供 nodeIds 但有选中的节点，将选中节点居中显示
-     * - 如果没有选中节点，将所有内容居中显示
-     * @param options - 配置选项
-     * @param options.padding - 内容周围的留白，默认 50px
-     * @param options.scale - 是否自动调整缩放以适应内容，默认 false
-     * @param options.nodeIds - 要滚动到的节点 ID 数组
-     */
-    scrollToContent(options) {
-      const nodes = this.getState().nodes || [];
-      if (nodes.length === 0) return;
-      const padding = options?.padding ?? 50;
-      const shouldScale = options?.scale === true;
-      const targetNodeIds = options?.nodeIds;
-      let minX = Infinity;
-      let minY = Infinity;
-      let maxX = -Infinity;
-      let maxY = -Infinity;
-      const mainLayer = this.getMainLayer();
-      const selectedNodeIds = this.getState().selectedNodeIds || [];
-      const hasTargetIds = targetNodeIds && targetNodeIds.length > 0;
-      const hasSelection = !hasTargetIds && selectedNodeIds.length > 0;
-      const idsToShow = hasTargetIds ? targetNodeIds : hasSelection ? selectedNodeIds : null;
-      mainLayer.children.forEach((child) => {
-        if (child.visible() && child.getClassName() !== "Transformer" && child.hasName(NODE_NAMES.selectable)) {
-          if (idsToShow) {
-            const id = child.id();
-            if (!idsToShow.includes(id)) return;
-          }
-          const attrs = child.getAttrs();
-          const x2 = attrs.x || 0;
-          const y2 = attrs.y || 0;
-          const width = attrs.width || 0;
-          const height = attrs.height || 0;
-          const rotation = attrs.rotation || 0;
-          if (rotation) {
-            const box = child.getClientRect({ skipTransform: false });
-            const stage = this.getStage();
-            const currentScale = stage.scaleX();
-            const currentX = stage.x();
-            const currentY = stage.y();
-            const worldMinX = (box.x - currentX) / currentScale;
-            const worldMinY = (box.y - currentY) / currentScale;
-            const worldMaxX = (box.x + box.width - currentX) / currentScale;
-            const worldMaxY = (box.y + box.height - currentY) / currentScale;
-            minX = Math.min(minX, worldMinX);
-            minY = Math.min(minY, worldMinY);
-            maxX = Math.max(maxX, worldMaxX);
-            maxY = Math.max(maxY, worldMaxY);
-          } else {
-            minX = Math.min(minX, x2);
-            minY = Math.min(minY, y2);
-            maxX = Math.max(maxX, x2 + width);
-            maxY = Math.max(maxY, y2 + height);
-          }
-        }
-      });
-      if (minX === Infinity || minY === Infinity) return;
-      const contentWidth = maxX - minX;
-      const contentHeight = maxY - minY;
-      const contentCenterX = minX + contentWidth / 2;
-      const contentCenterY = minY + contentHeight / 2;
-      const viewport = this.getState().viewport;
-      let newScale = viewport.scale;
-      if (shouldScale) {
-        const scaleX = (viewport.width - padding * 2) / contentWidth;
-        const scaleY = (viewport.height - padding * 2) / contentHeight;
-        newScale = Math.min(scaleX, scaleY, 1);
-      }
-      const x = viewport.width / 2 - contentCenterX * newScale;
-      const y = viewport.height / 2 - contentCenterY * newScale;
-      this.updateViewport({ x, y, scale: newScale }, true);
-    }
-  }
-  function modulate(value, rangeA, rangeB, clamp2 = false) {
-    const [fromLow, fromHigh] = rangeA;
-    const [v0, v1] = rangeB;
-    const result = v0 + (value - fromLow) / (fromHigh - fromLow) * (v1 - v0);
-    return clamp2 ? v0 < v1 ? Math.max(Math.min(result, v1), v0) : Math.max(Math.min(result, v0), v1) : result;
-  }
-  const gridSteps = [
-    {
-      min: -1,
-      mid: 0.15,
-      step: 64
-    },
-    {
-      min: 0.05,
-      mid: 0.375,
-      step: 16
-    },
-    {
-      min: 0.15,
-      mid: 1,
-      step: 4
-    },
-    {
-      min: 0.7,
-      mid: 2.5,
-      step: 1
-    }
-  ];
-  function GridBackground({
-    viewportX,
-    viewportY,
-    scale,
-    size = 20,
-    showGrid = true
-  }) {
-    const x = viewportX / scale;
-    const y = viewportY / scale;
-    const z = scale;
-    if (!showGrid) {
-      return null;
-    }
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "svg",
-      {
-        className: "canvas-grid w-full h-full absolute top-0 left-0",
-        version: "1.1",
-        xmlns: "http://www.w3.org/2000/svg",
-        "aria-hidden": "true",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("defs", { children: gridSteps.map(({ min, mid, step }, i) => {
-            const s = step * size * z;
-            const xo = 0.5 + x * z;
-            const yo = 0.5 + y * z;
-            const gxo = xo > 0 ? xo % s : s + xo % s;
-            const gyo = yo > 0 ? yo % s : s + yo % s;
-            const opacity = z < mid ? modulate(z, [min, mid], [0, 1]) : 1;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              "pattern",
-              {
-                id: `grid_${step}`,
-                width: s,
-                height: s,
-                patternUnits: "userSpaceOnUse",
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "circle",
-                  {
-                    className: "tl-grid-dot",
-                    cx: gxo,
-                    cy: gyo,
-                    r: 1,
-                    opacity
-                  }
-                )
-              },
-              i
-            );
-          }) }),
-          gridSteps.map(({ step }, i) => /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "100%", height: "100%", fill: `url(#grid_${step})` }, i))
-        ]
-      }
-    );
-  }
-  function cn(...inputs) {
-    return tailwindMerge.twMerge(clsx.clsx(inputs));
-  }
-  const buttonVariants = classVarianceAuthority.cva(
-    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-    {
-      variants: {
-        variant: {
-          default: "bg-primary text-primary-foreground hover:bg-primary/90",
-          destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-          outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-          secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-          ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-          link: "text-primary underline-offset-4 hover:underline"
-        },
-        size: {
-          default: "h-9 px-4 py-2 has-[>svg]:px-3",
-          sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-          lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-          icon: "size-9",
-          "icon-sm": "size-8",
-          "icon-lg": "size-10"
-        }
-      },
-      defaultVariants: {
-        variant: "default",
-        size: "default"
-      }
-    }
-  );
-  function Button({
-    className,
-    variant = "default",
-    size = "default",
-    asChild = false,
-    ...props
-  }) {
-    const Comp = asChild ? reactSlot.Slot : "button";
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Comp,
-      {
-        "data-slot": "button",
-        "data-variant": variant,
-        "data-size": size,
-        className: cn(buttonVariants({ variant, size, className })),
-        ...props
-      }
-    );
-  }
-  function ZoomPanel({ api }) {
-    const [viewport, setViewport] = react.useState(api.getState().viewport);
-    react.useEffect(() => {
-      api.on("viewport:change", (newViewport) => {
-        setViewport(newViewport);
-      });
-    }, [setViewport, api]);
-    const updateScale = (scale) => {
-      const halfWidth = viewport.width / 2;
-      const halfHeight = viewport.height / 2;
-      const worldCenterX = (halfWidth - viewport.x) / viewport.scale;
-      const worldCenterY = (halfHeight - viewport.y) / viewport.scale;
-      const x = halfWidth - worldCenterX * scale;
-      const y = halfHeight - worldCenterY * scale;
-      api.updateViewport({ x, y, scale });
-    };
-    const handleZoomIn = () => {
-      const scale = Math.min(viewport.scale * 1.2, 5);
-      updateScale(scale);
-    };
-    const handleZoomOut = () => {
-      const scale = Math.max(viewport.scale / 1.2, 0.1);
-      updateScale(scale);
-    };
-    const handleReset = () => {
-      updateScale(1);
-    };
-    const percent = Math.round(viewport.scale * 100);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zoom-panel flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          size: "sm",
-          variant: "secondary",
-          onClick: handleZoomOut,
-          title: "缩小",
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, {})
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        Button,
-        {
-          size: "sm",
-          variant: "secondary",
-          onClick: handleReset,
-          title: `${percent}%`,
-          className: "min-w-16",
-          children: [
-            percent,
-            "%"
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          size: "sm",
-          variant: "secondary",
-          onClick: handleZoomIn,
-          title: "放大",
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, {})
-        }
-      )
-    ] });
-  }
-  function HistoryPanel({ api }) {
-    const [canUndo, setCanUndo] = react.useState(api.canUndo());
-    const [canRedo, setCanRedo] = react.useState(api.canRedo());
-    react.useEffect(() => {
-      const handleStateChange = () => {
-        setCanUndo(api.canUndo());
-        setCanRedo(api.canRedo());
-      };
-      api.on("state:change", handleStateChange);
-      return () => {
-        api.off("state:change", handleStateChange);
-      };
-    }, [api]);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "history-panel flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          size: "sm",
-          variant: "secondary",
-          disabled: !canUndo,
-          onClick: () => api.undo(),
-          title: "撤销",
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Undo2, {})
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          size: "sm",
-          variant: "secondary",
-          disabled: !canRedo,
-          onClick: () => api.redo(),
-          title: "重做",
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Redo2, {})
-        }
-      )
-    ] });
-  }
-  function PureCanvas({ setApi }) {
-    const containerRef = react.useRef(null);
-    const [_api, _setApi] = react.useState(null);
-    const [viewport, setViewport] = react.useState({ x: 0, y: 0, scale: 1 });
-    react.useEffect(() => {
-      if (!containerRef.current) return;
-      const core = new CanvasApi(containerRef.current);
-      _setApi(core);
-      setApi?.(core);
-      core.on("viewport:change", (newViewport) => {
-        setViewport(newViewport);
-      });
-      return () => {
-        core.dispose();
-      };
-    }, [setApi]);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pure-canvas relative size-full", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        GridBackground,
-        {
-          viewportX: viewport.x,
-          viewportY: viewport.y,
-          scale: viewport.scale
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "size-full" }),
-      _api && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "history-panel-wrapper absolute bottom-4 left-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(HistoryPanel, { api: _api }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zoom-panel-wrapper absolute bottom-4 right-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(ZoomPanel, { api: _api }) })
-      ] })
-    ] });
-  }
-  exports2.CanvasApi = CanvasApi;
-  exports2.NODE_NAMES = NODE_NAMES;
-  exports2.PureCanvas = PureCanvas;
-  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
-}));