vuedit-image-editor 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts
CHANGED
|
@@ -42,6 +42,35 @@ declare type __VLS_WithDefaults<P, D> = {
|
|
|
42
42
|
}> : P[K];
|
|
43
43
|
};
|
|
44
44
|
|
|
45
|
+
declare function AnnotatePlugin(): EditorPlugin;
|
|
46
|
+
export { AnnotatePlugin }
|
|
47
|
+
export { AnnotatePlugin as TextPlugin }
|
|
48
|
+
|
|
49
|
+
/** Shared base properties for all annotation types */
|
|
50
|
+
export declare interface AnnotationBase {
|
|
51
|
+
id: string;
|
|
52
|
+
/** Normalized 0-1 X position */
|
|
53
|
+
x: number;
|
|
54
|
+
/** Normalized 0-1 Y position */
|
|
55
|
+
y: number;
|
|
56
|
+
/** Normalized 0-1 width (bounding box) */
|
|
57
|
+
width: number;
|
|
58
|
+
/** Normalized 0-1 height (bounding box) */
|
|
59
|
+
height: number;
|
|
60
|
+
/** Rotation in radians */
|
|
61
|
+
rotation: number;
|
|
62
|
+
/** Stroke color RGBA, each 0-1 */
|
|
63
|
+
strokeColor: [number, number, number, number];
|
|
64
|
+
/** Stroke width, normalized relative to image size */
|
|
65
|
+
strokeWidth: number;
|
|
66
|
+
/** Opacity 0-1 */
|
|
67
|
+
opacity: number;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
export declare type AnnotationInstance = TextAnnotation;
|
|
71
|
+
|
|
72
|
+
export declare type AnnotationType = 'text';
|
|
73
|
+
|
|
45
74
|
/**
|
|
46
75
|
* Apply clarity (local contrast / unsharp mask) to ImageData in-place.
|
|
47
76
|
* strength: -0.25 to 0.25, base 0. Positive sharpens, negative softens.
|
|
@@ -99,8 +128,10 @@ export declare class CanvasRenderer {
|
|
|
99
128
|
setSource(image: HTMLImageElement | null): void;
|
|
100
129
|
/** Resize canvas to match container (handles DPR) */
|
|
101
130
|
resize(width: number, height: number): void;
|
|
102
|
-
/** Request a render on the next animation frame */
|
|
103
|
-
requestRender(): void;
|
|
131
|
+
/** Request a render on the next animation frame, or immediately if `immediate` is true */
|
|
132
|
+
requestRender(immediate?: boolean): void;
|
|
133
|
+
/** Render synchronously (cancels pending RAF). Used during drag for zero-lag updates. */
|
|
134
|
+
private renderNow;
|
|
104
135
|
/** Callback called after each render with context for plugin drawing */
|
|
105
136
|
afterRender: ((ctx: CanvasRenderingContext2D, state: ImageState, imageRect: {
|
|
106
137
|
x: number;
|
|
@@ -262,10 +293,10 @@ export declare interface EditorEngine {
|
|
|
262
293
|
revert: () => void;
|
|
263
294
|
/** Set zoom level */
|
|
264
295
|
setZoom: (level: number) => void;
|
|
265
|
-
/** Request a re-render of the canvas */
|
|
266
|
-
requestRender: () => void;
|
|
296
|
+
/** Request a re-render of the canvas. Pass `true` for zero-lag immediate render during drag. */
|
|
297
|
+
requestRender: (immediate?: boolean) => void;
|
|
267
298
|
/** Render callback — set by EditorCanvas */
|
|
268
|
-
onRender: Ref<(() => void) | null>;
|
|
299
|
+
onRender: Ref<((immediate?: boolean) => void) | null>;
|
|
269
300
|
/** Temporary viewport pan during crop drag (pixels) */
|
|
270
301
|
cropDragPan: Ref<{
|
|
271
302
|
x: number;
|
|
@@ -390,6 +421,15 @@ export declare const en: {
|
|
|
390
421
|
loadError: string;
|
|
391
422
|
processing: string;
|
|
392
423
|
cropApply: string;
|
|
424
|
+
text: string;
|
|
425
|
+
fillColor: string;
|
|
426
|
+
fontSize: string;
|
|
427
|
+
fontFamily: string;
|
|
428
|
+
bold: string;
|
|
429
|
+
italic: string;
|
|
430
|
+
textAlign: string;
|
|
431
|
+
delete: string;
|
|
432
|
+
opacity: string;
|
|
393
433
|
unsavedChanges: string;
|
|
394
434
|
confirm: string;
|
|
395
435
|
};
|
|
@@ -556,6 +596,7 @@ export declare interface ImageState {
|
|
|
556
596
|
finetune: FinetuneState;
|
|
557
597
|
filter: FilterState;
|
|
558
598
|
stickers: StickerInstance[];
|
|
599
|
+
annotations: AnnotationInstance[];
|
|
559
600
|
frame: FrameState;
|
|
560
601
|
resize: ResizeState;
|
|
561
602
|
backgroundColor: [number, number, number, number];
|
|
@@ -654,6 +695,24 @@ export declare function StickerPlugin(): EditorPlugin;
|
|
|
654
695
|
/** Temperature adjustment matrix. v: -0.25 to 0.25 (positive = warmer, negative = cooler) */
|
|
655
696
|
export declare function temperatureMatrix(v: number): number[];
|
|
656
697
|
|
|
698
|
+
export declare interface TextAnnotation extends AnnotationBase {
|
|
699
|
+
type: 'text';
|
|
700
|
+
/** The text content */
|
|
701
|
+
text: string;
|
|
702
|
+
/** Font size, normalized relative to image height */
|
|
703
|
+
fontSize: number;
|
|
704
|
+
/** Font family name */
|
|
705
|
+
fontFamily: string;
|
|
706
|
+
/** Font weight */
|
|
707
|
+
fontWeight: 'normal' | 'bold';
|
|
708
|
+
/** Font style */
|
|
709
|
+
fontStyle: 'normal' | 'italic';
|
|
710
|
+
/** Text fill color RGBA, each 0-1 */
|
|
711
|
+
fillColor: [number, number, number, number];
|
|
712
|
+
/** Text alignment */
|
|
713
|
+
textAlign: 'left' | 'center' | 'right';
|
|
714
|
+
}
|
|
715
|
+
|
|
657
716
|
export declare function useEditor(): EditorEngine;
|
|
658
717
|
|
|
659
718
|
declare interface ViewportTransform {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.vie-editor{--vie-bg: #F7F7F8;--vie-bg-secondary: #FFFFFF;--vie-surface: #F5FBFF;--vie-fg: #0D1B2A;--vie-fg-dim: rgba(13, 27, 42, .6);--vie-fg-muted: rgba(65, 90, 119, .5);--vie-border: #DBDFE9;--vie-accent: #1B4965;--vie-accent-hover: #153A52;--vie-danger: #F3164E;--vie-overlay: rgba(0, 0, 0, .4);--vie-font: "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--vie-font-size: 14px;--vie-font-size-sm: 12px;--vie-radius: 4px;--vie-radius-lg: 8px;--vie-gap: 8px;--vie-padding: 12px;--vie-toolbar-height: 48px;--vie-tab-bar-height: 56px;--vie-control-panel-height: auto;--vie-control-panel-max-height: 180px;--vie-transition: .15s ease;font-family:var(--vie-font);font-size:var(--vie-font-size);color:var(--vie-fg);line-height:1.4;box-sizing:border-box}.vie-editor.vie-theme-dark{--vie-bg: #1B263B;--vie-bg-secondary: #0D1B2A;--vie-surface: rgba(255, 255, 255, .08);--vie-fg: #FFFFFF;--vie-fg-dim: rgba(255, 255, 255, .6);--vie-fg-muted: rgba(255, 255, 255, .35);--vie-border: rgba(255, 255, 255, .12);--vie-overlay: rgba(0, 0, 0, .7)}.vie-editor *,.vie-editor *:before,.vie-editor *:after{box-sizing:border-box;margin:0;padding:0}.vie-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:var(--vie-overlay);padding:16px}.vie-modal-container{width:100%;height:100%;max-width:1100px;max-height:800px;border-radius:var(--vie-radius-lg);overflow:hidden;box-shadow:0 25px 50px -12px #00000040}.vie-modal-enter-active,.vie-modal-leave-active{transition:opacity .2s ease,transform .2s ease}.vie-modal-enter-from,.vie-modal-leave-to{opacity:0}.vie-modal-enter-from .vie-modal-container,.vie-modal-leave-to .vie-modal-container{transform:scale(.95)}.vie-shell{display:flex;flex-direction:column;width:100%;height:100%;background:var(--vie-bg);position:relative;overflow:hidden}.vie-toolbar{display:flex;align-items:center;justify-content:space-between;height:var(--vie-toolbar-height);padding:0 var(--vie-padding);background:var(--vie-bg-secondary);border-bottom:1px solid var(--vie-border);flex-shrink:0}.vie-toolbar-group{display:flex;align-items:center;gap:4px}.vie-zoom-label{font-size:12px;color:var(--vie-fg-dim);min-width:40px;text-align:center;font-variant-numeric:tabular-nums;background:none;border:none;cursor:pointer;padding:4px 6px;border-radius:var(--vie-radius, 6px);font-family:inherit;transition:color .15s ease,background .15s ease}.vie-zoom-label:hover{color:var(--vie-fg);background:var(--vie-surface, rgba(255, 255, 255, .1))}.vie-canvas-wrapper{flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--vie-bg)}.vie-canvas-wrapper--grab{cursor:grab}.vie-canvas-wrapper--grabbing{cursor:grabbing}.vie-canvas{display:block;will-change:transform}.vie-canvas-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.vie-canvas-overlay--interactive{pointer-events:auto}.vie-canvas-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--vie-fg-dim);font-size:14px}.vie-spinner{width:24px;height:24px;border:2px solid var(--vie-border);border-top-color:var(--vie-accent);border-radius:50%;animation:vie-spin .6s linear infinite;margin-inline-end:8px}@keyframes vie-spin{to{transform:rotate(360deg)}}.vie-control-panel{position:relative;z-index:5;min-height:60px;max-height:var(--vie-control-panel-max-height);overflow:visible;padding:var(--vie-padding);background:var(--vie-bg-secondary);border-top:1px solid var(--vie-border);flex-shrink:0}.vie-control-panel::-webkit-scrollbar{width:4px}.vie-control-panel::-webkit-scrollbar-thumb{background:var(--vie-fg-muted);border-radius:2px}.vie-tab-bar{display:flex;align-items:center;justify-content:center;height:var(--vie-tab-bar-height);gap:2px;padding:0 var(--vie-padding);background:var(--vie-bg-secondary);border-top:1px solid var(--vie-border);flex-shrink:0}.vie-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 14px;border-radius:var(--vie-radius);cursor:pointer;color:var(--vie-fg-dim);background:transparent;border:none;font-family:var(--vie-font);font-size:var(--vie-font-size-sm);transition:color var(--vie-transition),background var(--vie-transition);min-width:56px}.vie-tab:hover{color:var(--vie-fg);background:var(--vie-surface)}.vie-tab--active{color:var(--vie-accent);background:var(--vie-surface)}.vie-tab__icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center}.vie-tab__icon svg{width:100%;height:100%}.vie-tab__label{white-space:nowrap}.vie-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--vie-radius);border:none;background:transparent;color:var(--vie-fg-dim);cursor:pointer;transition:color var(--vie-transition),background var(--vie-transition);padding:0;font-family:var(--vie-font)}.vie-icon-btn:hover{color:var(--vie-fg);background:var(--vie-surface)}.vie-icon-btn:disabled{opacity:.3;cursor:not-allowed}.vie-icon-btn:disabled:hover{background:transparent;color:var(--vie-fg-dim)}.vie-icon-btn svg{width:18px;height:18px}.vie-icon-btn--accent{background:var(--vie-accent);color:#fff;padding:0 14px;width:auto;font-size:var(--vie-font-size);font-weight:500;gap:6px}.vie-icon-btn--accent:hover{background:var(--vie-accent-hover);color:#fff}.vie-slider{display:flex;align-items:center;gap:12px;padding:4px 0}.vie-slider__label{font-size:var(--vie-font-size);color:var(--vie-fg-dim);min-width:80px;white-space:nowrap}.vie-slider__track-wrapper{flex:1;position:relative;height:28px;display:flex;align-items:center;cursor:pointer}.vie-slider__track{width:100%;height:4px;background:var(--vie-surface);border-radius:2px;position:relative;overflow:visible}.vie-slider__fill{position:absolute;height:100%;background:var(--vie-accent);border-radius:2px;pointer-events:none;transition:left 60ms ease-out,width 60ms ease-out}.vie-slider__base-mark{position:absolute;top:-3px;width:2px;height:10px;background:var(--vie-fg-muted);border-radius:1px;transform:translate(-50%);pointer-events:none;z-index:1}.vie-slider__tick{position:absolute;top:-1px;width:1px;height:6px;background:var(--vie-fg-muted);transform:translate(-50%);pointer-events:none;opacity:.4}.vie-slider__thumb{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0000004d,0 0 0 1px #0000000f;transform:translate(-50%,-50%);cursor:grab;pointer-events:none;transition:left 60ms ease-out,transform .15s ease,box-shadow .15s ease;display:flex;align-items:center;justify-content:center;z-index:2}.vie-slider__thumb-dot{width:6px;height:6px;border-radius:50%;background:var(--vie-accent);transition:transform .15s ease}.vie-slider__track-wrapper:hover .vie-slider__thumb,.vie-slider__track-wrapper:focus-visible .vie-slider__thumb{transform:translate(-50%,-50%) scale(1.15);box-shadow:0 2px 8px #0000004d,0 0 0 1px #0000000f}.vie-slider--dragging .vie-slider__thumb{cursor:grabbing;transform:translate(-50%,-50%) scale(1.2);box-shadow:0 2px 8px #00000059,0 0 0 2px var(--vie-accent)}.vie-slider__tooltip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);padding:2px 6px;background:var(--vie-bg);color:var(--vie-fg);font-size:10px;font-variant-numeric:tabular-nums;border-radius:4px;white-space:nowrap;pointer-events:none;box-shadow:0 2px 6px #0000001a;border:1px solid var(--vie-border)}.vie-slider__value{font-size:var(--vie-font-size-sm);color:var(--vie-fg-muted);min-width:40px;text-align:end;font-variant-numeric:tabular-nums}.vie-dropdown{position:relative;display:inline-flex}.vie-dropdown__trigger{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--vie-radius);border:1px solid var(--vie-border);background:var(--vie-surface);color:var(--vie-fg);font-family:var(--vie-font);font-size:var(--vie-font-size);cursor:pointer;transition:border-color var(--vie-transition)}.vie-dropdown__trigger:hover{border-color:var(--vie-fg-muted)}.vie-dropdown__chevron{width:12px;height:12px;opacity:.5}.vie-dropdown__menu{position:absolute;bottom:calc(100% + 4px);inset-inline-start:0;min-width:160px;background:var(--vie-bg-secondary);border:1px solid var(--vie-border);border-radius:var(--vie-radius);box-shadow:0 8px 24px #0000001f;z-index:10;padding:4px;max-height:240px;overflow-y:auto}.vie-dropdown__item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:4px;cursor:pointer;font-size:var(--vie-font-size);color:var(--vie-fg);background:transparent;border:none;width:100%;text-align:start;font-family:var(--vie-font);transition:background var(--vie-transition)}.vie-dropdown__item:hover{background:var(--vie-surface)}.vie-dropdown__item--active{color:var(--vie-accent)}.vie-crop-overlay{position:absolute;top:0;right:0;bottom:0;left:0;touch-action:none}.vie-crop-overlay--dragging{cursor:grabbing}.vie-crop-overlay--dragging *{cursor:grabbing!important}.vie-crop-mask{fill:#0000008c}.vie-crop-border{stroke:#fffc;stroke-width:1;fill:none}.vie-crop-grid line{stroke:#ffffff40;stroke-width:.5}.vie-crop-handle{fill:#fff;stroke:none;cursor:pointer}.vie-crop-handle--n,.vie-crop-handle--s{cursor:ns-resize}.vie-crop-handle--e,.vie-crop-handle--w{cursor:ew-resize}.vie-crop-handle--nw,.vie-crop-handle--se{cursor:nwse-resize}.vie-crop-handle--ne,.vie-crop-handle--sw{cursor:nesw-resize}.vie-crop-move{cursor:grab;fill:transparent}.vie-crop-confirm-pill{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:14px;border:none;background:#000000a6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-family:var(--vie-font);font-size:11px;font-weight:500;cursor:pointer;pointer-events:auto;box-shadow:0 2px 8px #0000004d,0 0 0 1px #ffffff1a inset;animation:vie-crop-pill-in .2s ease-out;white-space:nowrap;transition:background .15s ease,transform .15s ease}.vie-crop-confirm-pill:hover{background:#000c;transform:scale(1.04)}@keyframes vie-crop-pill-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.vie-crop-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.vie-crop-controls__section{display:flex;align-items:center;gap:6px}.vie-crop-controls__divider{width:1px;height:24px;background:var(--vie-border);margin:0 4px}.vie-crop-controls__rotation{flex:1;min-width:200px}.vie-shell--horizontal{flex-direction:row}.vie-shell--horizontal .vie-tab-bar{flex-direction:column;width:var(--vie-tab-bar-height);height:auto;border-top:none;border-inline-end:1px solid var(--vie-border);padding:var(--vie-padding) 0}.vie-shell--horizontal .vie-main{display:flex;flex-direction:column;flex:1;min-width:0}[dir=rtl] .vie-editor,.vie-editor[dir=rtl]{direction:rtl}[dir=rtl] .vie-crop-handle--nw,[dir=rtl] .vie-crop-handle--se{cursor:nesw-resize}[dir=rtl] .vie-crop-handle--ne,[dir=rtl] .vie-crop-handle--sw{cursor:nwse-resize}[dir=rtl] .vie-crop-handle--w,[dir=rtl] .vie-crop-handle--e{cursor:ew-resize}.vie-finetune-controls{display:flex;flex-direction:column;gap:2px;max-height:200px;overflow-y:auto;padding-inline-end:4px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.vie-filter-controls{display:flex;flex-direction:column;gap:12px}.vie-filter-strip{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 6px;scrollbar-width:thin;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.vie-filter-strip::-webkit-scrollbar{height:4px}.vie-filter-strip::-webkit-scrollbar-thumb{background:var(--vie-fg-muted);border-radius:2px}.vie-filter-thumb{display:flex;flex-direction:column;align-items:center;gap:6px;background:transparent;border:2px solid transparent;border-radius:var(--vie-radius-lg, 8px);cursor:pointer;padding:5px;min-width:84px;transition:border-color var(--vie-transition),background var(--vie-transition),transform .15s ease;color:var(--vie-fg-dim);font-family:var(--vie-font)}.vie-filter-thumb:hover{border-color:var(--vie-fg-muted);background:#00000008;transform:translateY(-1px)}.vie-filter-thumb--active{border-color:var(--vie-accent);color:var(--vie-accent);background:#1b49650f}.vie-filter-thumb__canvas{width:68px;height:68px;border-radius:4px;background:var(--vie-surface);box-shadow:0 1px 3px #00000014;transition:box-shadow .15s ease}.vie-filter-thumb:hover .vie-filter-thumb__canvas{box-shadow:0 2px 8px #0000001f}.vie-filter-thumb--active .vie-filter-thumb__canvas{box-shadow:0 0 0 1px var(--vie-accent),0 2px 8px #1b496533}.vie-filter-thumb__label{font-size:var(--vie-font-size-sm);white-space:nowrap;font-weight:500}.vie-theme-dark .vie-filter-thumb:hover{background:#ffffff08}.vie-theme-dark .vie-filter-thumb--active{background:#1b496526}.vie-sticker-controls{display:flex;flex-direction:column;gap:8px}.vie-sticker-tabs{display:flex;gap:4px}.vie-sticker-tab{padding:4px 12px;border-radius:var(--vie-radius);border:1px solid var(--vie-border);background:transparent;color:var(--vie-fg-dim);cursor:pointer;font-family:var(--vie-font);font-size:var(--vie-font-size);transition:all var(--vie-transition)}.vie-sticker-tab:hover{color:var(--vie-fg);background:var(--vie-surface)}.vie-sticker-tab--active{background:var(--vie-surface);color:var(--vie-accent);border-color:var(--vie-accent)}.vie-sticker-tab--delete{color:var(--vie-danger);border-color:var(--vie-danger);margin-inline-start:auto}.vie-sticker-tab--delete:hover{background:#f3164e26}.vie-sticker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:4px;max-height:120px;overflow-y:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.vie-sticker-item{display:flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:24px;border-radius:var(--vie-radius);border:1px solid transparent;background:transparent;cursor:pointer;transition:all var(--vie-transition)}.vie-sticker-item:hover{background:var(--vie-surface);border-color:var(--vie-border);transform:scale(1.15)}.vie-frame-controls{display:flex;flex-direction:column;gap:12px}.vie-frame-strip{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.vie-frame-style{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 10px;border-radius:var(--vie-radius);border:2px solid transparent;background:transparent;color:var(--vie-fg-dim);cursor:pointer;font-family:var(--vie-font);font-size:var(--vie-font-size-sm);transition:all var(--vie-transition);white-space:nowrap}.vie-frame-style:hover{border-color:var(--vie-fg-muted);color:var(--vie-fg)}.vie-frame-style--active{border-color:var(--vie-accent);color:var(--vie-accent)}.vie-frame-colors{display:flex;align-items:center;gap:12px}.vie-frame-colors__label{font-size:var(--vie-font-size);color:var(--vie-fg-dim);white-space:nowrap}.vie-frame-colors__swatches{display:flex;gap:6px}.vie-frame-color-swatch{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:border-color var(--vie-transition),transform var(--vie-transition);box-shadow:0 0 0 1px var(--vie-border)}.vie-frame-color-swatch:hover{transform:scale(1.15)}.vie-frame-color-swatch--active{border-color:var(--vie-accent)}.vie-fill-controls{display:flex;flex-direction:column;gap:12px}.vie-fill-strip{display:flex;gap:8px;overflow-x:auto;padding:4px 0;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.vie-fill-swatch{flex-shrink:0;width:40px;height:40px;border-radius:var(--vie-radius);border:3px solid transparent;cursor:pointer;transition:border-color var(--vie-transition),transform var(--vie-transition);box-shadow:0 0 0 1px var(--vie-border)}.vie-fill-swatch:hover{transform:scale(1.1)}.vie-fill-swatch--active{border-color:var(--vie-accent)}.vie-fill-swatch--transparent{background-image:linear-gradient(45deg,#808080 25%,transparent 25%),linear-gradient(-45deg,#808080 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#808080 75%),linear-gradient(-45deg,transparent 75%,#808080 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0}.vie-sticker-overlay{position:absolute;top:0;right:0;bottom:0;left:0;outline:none}.vie-sticker-hitarea{cursor:pointer;stroke-width:2}.vie-sticker-hitarea:hover{stroke:#1b496566;fill:#1b49650d}.vie-sticker-selection{fill:none;stroke:var(--vie-accent);stroke-width:1.5;stroke-dasharray:4;pointer-events:none}.vie-sticker-handle{fill:#fff;stroke:var(--vie-accent);stroke-width:1.5;cursor:nwse-resize;rx:2}.vie-sticker-handle[data-handle=ne],.vie-sticker-handle[data-handle=sw]{cursor:nesw-resize}.vie-sticker-rotate-line{stroke:var(--vie-accent);stroke-width:1;pointer-events:none}.vie-sticker-rotate-handle{fill:#fff;stroke:var(--vie-accent);stroke-width:1.5;cursor:grab}.vie-sticker-rotate-handle:active{cursor:grabbing}.vie-resize-controls{display:flex;flex-direction:column;gap:12px}.vie-resize-title{text-align:center;font-size:var(--vie-font-size);font-weight:500;color:var(--vie-fg);margin:0 0 12px}.vie-resize-hint{text-align:center;font-size:var(--vie-font-size-sm);color:var(--vie-fg-dim);margin:8px 0 0}.vie-resize-dimensions{display:flex;align-items:flex-end;gap:8px}.vie-resize-input{display:flex;flex-direction:column;gap:4px}.vie-resize-input__label{font-size:var(--vie-font-size-sm);color:var(--vie-fg-dim)}.vie-resize-input__field-wrapper{position:relative;display:flex;align-items:center}.vie-resize-input__field{width:100px;padding:6px 28px 6px 8px;border-radius:var(--vie-radius);border:1px solid var(--vie-border);background:var(--vie-surface);color:var(--vie-fg);font-family:var(--vie-font);font-size:var(--vie-font-size);font-variant-numeric:tabular-nums;outline:none;transition:border-color var(--vie-transition);-moz-appearance:textfield}.vie-resize-input__field::-webkit-inner-spin-button,.vie-resize-input__field::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.vie-resize-input__field:focus{border-color:var(--vie-accent)}.vie-resize-input__unit{position:absolute;inset-inline-end:8px;color:var(--vie-fg-muted);font-size:var(--vie-font-size-sm);pointer-events:none}.vie-resize-lock{display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin-bottom:2px;border-radius:var(--vie-radius);border:1px solid var(--vie-border);background:transparent;color:var(--vie-fg-dim);cursor:pointer;transition:all var(--vie-transition)}.vie-resize-lock:hover{color:var(--vie-fg);background:var(--vie-surface)}.vie-resize-lock--active{color:var(--vie-accent);border-color:var(--vie-accent)}.vie-resize-lock:active{transform:scale(.9)}.vie-panel-enter-active,.vie-panel-leave-active{transition:opacity .12s ease}.vie-panel-enter-from,.vie-panel-leave-to{opacity:0}.vie-dropdown-enter-active,.vie-dropdown-leave-active{transition:opacity .1s ease,transform .1s ease}.vie-dropdown-enter-from,.vie-dropdown-leave-to{opacity:0;transform:translateY(4px)}
|
|
1
|
+
.vie-editor{--vie-bg: #F7F7F8;--vie-bg-secondary: #FFFFFF;--vie-surface: #F5FBFF;--vie-fg: #0D1B2A;--vie-fg-dim: rgba(13, 27, 42, .6);--vie-fg-muted: rgba(65, 90, 119, .5);--vie-border: #DBDFE9;--vie-accent: #1B4965;--vie-accent-hover: #153A52;--vie-danger: #F3164E;--vie-overlay: rgba(0, 0, 0, .4);--vie-font: "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--vie-font-size: 14px;--vie-font-size-sm: 12px;--vie-radius: 4px;--vie-radius-lg: 8px;--vie-gap: 8px;--vie-padding: 12px;--vie-toolbar-height: 48px;--vie-tab-bar-height: 56px;--vie-control-panel-height: auto;--vie-control-panel-max-height: 180px;--vie-transition: .15s ease;font-family:var(--vie-font);font-size:var(--vie-font-size);color:var(--vie-fg);line-height:1.4;box-sizing:border-box}.vie-editor.vie-theme-dark{--vie-bg: #1B263B;--vie-bg-secondary: #0D1B2A;--vie-surface: rgba(255, 255, 255, .08);--vie-fg: #FFFFFF;--vie-fg-dim: rgba(255, 255, 255, .6);--vie-fg-muted: rgba(255, 255, 255, .35);--vie-border: rgba(255, 255, 255, .12);--vie-overlay: rgba(0, 0, 0, .7)}.vie-editor *,.vie-editor *:before,.vie-editor *:after{box-sizing:border-box;margin:0;padding:0}.vie-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:var(--vie-overlay);padding:16px}.vie-modal-container{width:100%;height:100%;max-width:1100px;max-height:800px;border-radius:var(--vie-radius-lg);overflow:hidden;box-shadow:0 25px 50px -12px #00000040}.vie-modal-enter-active,.vie-modal-leave-active{transition:opacity .2s ease,transform .2s ease}.vie-modal-enter-from,.vie-modal-leave-to{opacity:0}.vie-modal-enter-from .vie-modal-container,.vie-modal-leave-to .vie-modal-container{transform:scale(.95)}.vie-shell{display:flex;flex-direction:column;width:100%;height:100%;background:var(--vie-bg);position:relative;overflow:hidden}.vie-toolbar{display:flex;align-items:center;justify-content:space-between;height:var(--vie-toolbar-height);padding:0 var(--vie-padding);background:var(--vie-bg-secondary);border-bottom:1px solid var(--vie-border);flex-shrink:0}.vie-toolbar-group{display:flex;align-items:center;gap:4px}.vie-zoom-label{font-size:12px;color:var(--vie-fg-dim);min-width:40px;text-align:center;font-variant-numeric:tabular-nums;background:none;border:none;cursor:pointer;padding:4px 6px;border-radius:var(--vie-radius, 6px);font-family:inherit;transition:color .15s ease,background .15s ease}.vie-zoom-label:hover{color:var(--vie-fg);background:var(--vie-surface, rgba(255, 255, 255, .1))}.vie-canvas-wrapper{flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--vie-bg)}.vie-canvas-wrapper--grab{cursor:grab}.vie-canvas-wrapper--grabbing{cursor:grabbing}.vie-canvas{display:block;will-change:transform}.vie-canvas-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.vie-canvas-overlay--interactive{pointer-events:auto}.vie-canvas-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--vie-fg-dim);font-size:14px}.vie-spinner{width:24px;height:24px;border:2px solid var(--vie-border);border-top-color:var(--vie-accent);border-radius:50%;animation:vie-spin .6s linear infinite;margin-inline-end:8px}@keyframes vie-spin{to{transform:rotate(360deg)}}.vie-control-panel{position:relative;z-index:5;min-height:60px;max-height:var(--vie-control-panel-max-height);overflow:visible;padding:var(--vie-padding);background:var(--vie-bg-secondary);border-top:1px solid var(--vie-border);flex-shrink:0}.vie-control-panel::-webkit-scrollbar{width:4px}.vie-control-panel::-webkit-scrollbar-thumb{background:var(--vie-fg-muted);border-radius:2px}.vie-tab-bar{display:flex;align-items:center;justify-content:center;height:var(--vie-tab-bar-height);gap:2px;padding:0 var(--vie-padding);background:var(--vie-bg-secondary);border-top:1px solid var(--vie-border);flex-shrink:0}.vie-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 14px;border-radius:var(--vie-radius);cursor:pointer;color:var(--vie-fg-dim);background:transparent;border:none;font-family:var(--vie-font);font-size:var(--vie-font-size-sm);transition:color var(--vie-transition),background var(--vie-transition);min-width:56px}.vie-tab:hover{color:var(--vie-fg);background:var(--vie-surface)}.vie-tab--active{color:var(--vie-accent);background:var(--vie-surface)}.vie-tab__icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center}.vie-tab__icon svg{width:100%;height:100%}.vie-tab__label{white-space:nowrap}.vie-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--vie-radius);border:none;background:transparent;color:var(--vie-fg-dim);cursor:pointer;transition:color var(--vie-transition),background var(--vie-transition);padding:0;font-family:var(--vie-font)}.vie-icon-btn:hover{color:var(--vie-fg);background:var(--vie-surface)}.vie-icon-btn:disabled{opacity:.3;cursor:not-allowed}.vie-icon-btn:disabled:hover{background:transparent;color:var(--vie-fg-dim)}.vie-icon-btn svg{width:18px;height:18px}.vie-icon-btn--accent{background:var(--vie-accent);color:#fff;padding:0 14px;width:auto;font-size:var(--vie-font-size);font-weight:500;gap:6px}.vie-icon-btn--accent:hover{background:var(--vie-accent-hover);color:#fff}.vie-slider{display:flex;align-items:center;gap:12px;padding:4px 0}.vie-slider__label{font-size:var(--vie-font-size);color:var(--vie-fg-dim);min-width:80px;white-space:nowrap}.vie-slider__track-wrapper{flex:1;position:relative;height:28px;display:flex;align-items:center;cursor:pointer}.vie-slider__track{width:100%;height:4px;background:var(--vie-surface);border-radius:2px;position:relative;overflow:visible}.vie-slider__fill{position:absolute;height:100%;background:var(--vie-accent);border-radius:2px;pointer-events:none;transition:inset-inline-start 60ms ease-out,inset-inline-end 60ms ease-out}.vie-slider__base-mark{position:absolute;top:-3px;width:2px;height:10px;background:var(--vie-fg-muted);border-radius:1px;transform:translate(-50%);pointer-events:none;z-index:1}.vie-slider__tick{position:absolute;top:-1px;width:1px;height:6px;background:var(--vie-fg-muted);transform:translate(-50%);pointer-events:none;opacity:.4}.vie-slider__thumb{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0000004d,0 0 0 1px #0000000f;transform:translate(-50%,-50%);cursor:grab;pointer-events:none;transition:inset-inline-start 60ms ease-out,transform .15s ease,box-shadow .15s ease;display:flex;align-items:center;justify-content:center;z-index:2}.vie-slider__thumb-dot{width:6px;height:6px;border-radius:50%;background:var(--vie-accent);transition:transform .15s ease}.vie-slider__track-wrapper:hover .vie-slider__thumb,.vie-slider__track-wrapper:focus-visible .vie-slider__thumb{transform:translate(-50%,-50%) scale(1.15);box-shadow:0 2px 8px #0000004d,0 0 0 1px #0000000f}.vie-slider--dragging .vie-slider__thumb{cursor:grabbing;transform:translate(-50%,-50%) scale(1.2);box-shadow:0 2px 8px #00000059,0 0 0 2px var(--vie-accent)}.vie-slider__tooltip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);padding:2px 6px;background:var(--vie-bg);color:var(--vie-fg);font-size:10px;font-variant-numeric:tabular-nums;border-radius:4px;white-space:nowrap;pointer-events:none;box-shadow:0 2px 6px #0000001a;border:1px solid var(--vie-border)}.vie-slider__value{font-size:var(--vie-font-size-sm);color:var(--vie-fg-muted);min-width:40px;text-align:end;font-variant-numeric:tabular-nums}.vie-dropdown{position:relative;display:inline-flex}.vie-dropdown__trigger{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--vie-radius);border:1px solid var(--vie-border);background:var(--vie-surface);color:var(--vie-fg);font-family:var(--vie-font);font-size:var(--vie-font-size);cursor:pointer;transition:border-color var(--vie-transition)}.vie-dropdown__trigger:hover{border-color:var(--vie-fg-muted)}.vie-dropdown__chevron{width:12px;height:12px;opacity:.5}.vie-dropdown__menu{position:absolute;bottom:calc(100% + 4px);inset-inline-start:0;min-width:160px;background:var(--vie-bg-secondary);border:1px solid var(--vie-border);border-radius:var(--vie-radius);box-shadow:0 8px 24px #0000001f;z-index:10;padding:4px;max-height:240px;overflow-y:auto}.vie-dropdown__item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:4px;cursor:pointer;font-size:var(--vie-font-size);color:var(--vie-fg);background:transparent;border:none;width:100%;text-align:start;font-family:var(--vie-font);transition:background var(--vie-transition)}.vie-dropdown__item:hover{background:var(--vie-surface)}.vie-dropdown__item--active{color:var(--vie-accent)}.vie-crop-overlay{position:absolute;top:0;right:0;bottom:0;left:0;touch-action:none}.vie-crop-overlay--dragging{cursor:grabbing}.vie-crop-overlay--dragging *{cursor:grabbing!important}.vie-crop-mask{fill:#0000008c}.vie-crop-border{stroke:#fffc;stroke-width:1;fill:none}.vie-crop-grid line{stroke:#ffffff40;stroke-width:.5}.vie-crop-handle{fill:#fff;stroke:none;cursor:pointer}.vie-crop-handle--n,.vie-crop-handle--s{cursor:ns-resize}.vie-crop-handle--e,.vie-crop-handle--w{cursor:ew-resize}.vie-crop-handle--nw,.vie-crop-handle--se{cursor:nwse-resize}.vie-crop-handle--ne,.vie-crop-handle--sw{cursor:nesw-resize}.vie-crop-move{cursor:grab;fill:transparent}.vie-crop-confirm-pill{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:14px;border:none;background:#000000a6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-family:var(--vie-font);font-size:11px;font-weight:500;cursor:pointer;pointer-events:auto;box-shadow:0 2px 8px #0000004d,0 0 0 1px #ffffff1a inset;animation:vie-crop-pill-in .2s ease-out;white-space:nowrap;transition:background .15s ease,transform .15s ease}.vie-crop-confirm-pill:hover{background:#000c;transform:scale(1.04)}@keyframes vie-crop-pill-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.vie-crop-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.vie-crop-controls__section{display:flex;align-items:center;gap:6px}.vie-crop-controls__divider{width:1px;height:24px;background:var(--vie-border);margin:0 4px}.vie-crop-controls__rotation{flex:1;min-width:200px}.vie-shell--horizontal{flex-direction:row}.vie-shell--horizontal .vie-tab-bar{flex-direction:column;width:var(--vie-tab-bar-height);height:auto;border-top:none;border-inline-end:1px solid var(--vie-border);padding:var(--vie-padding) 0}.vie-shell--horizontal .vie-main{display:flex;flex-direction:column;flex:1;min-width:0}[dir=rtl] .vie-editor,.vie-editor[dir=rtl]{direction:rtl}[dir=rtl] .vie-crop-handle--nw,[dir=rtl] .vie-crop-handle--se{cursor:nesw-resize}[dir=rtl] .vie-crop-handle--ne,[dir=rtl] .vie-crop-handle--sw{cursor:nwse-resize}[dir=rtl] .vie-crop-handle--w,[dir=rtl] .vie-crop-handle--e{cursor:ew-resize}[dir=rtl] .vie-slider__base-mark,[dir=rtl] .vie-slider__tick{transform:translate(50%)}[dir=rtl] .vie-slider__thumb{transform:translate(50%,-50%)}[dir=rtl] .vie-slider__track-wrapper:hover .vie-slider__thumb,[dir=rtl] .vie-slider__track-wrapper:focus-visible .vie-slider__thumb{transform:translate(50%,-50%) scale(1.15)}[dir=rtl] .vie-slider--dragging .vie-slider__thumb{transform:translate(50%,-50%) scale(1.2)}[dir=rtl] .vie-slider__tooltip{left:auto;right:50%;transform:translate(50%)}.vie-finetune-controls{display:flex;flex-direction:column;gap:2px;max-height:200px;overflow-y:auto;padding-inline-end:4px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.vie-filter-controls{display:flex;flex-direction:column;gap:12px}.vie-filter-strip{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 6px;scrollbar-width:thin;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.vie-filter-strip::-webkit-scrollbar{height:4px}.vie-filter-strip::-webkit-scrollbar-thumb{background:var(--vie-fg-muted);border-radius:2px}.vie-filter-thumb{display:flex;flex-direction:column;align-items:center;gap:6px;background:transparent;border:2px solid transparent;border-radius:var(--vie-radius-lg, 8px);cursor:pointer;padding:5px;min-width:84px;transition:border-color var(--vie-transition),background var(--vie-transition),transform .15s ease;color:var(--vie-fg-dim);font-family:var(--vie-font)}.vie-filter-thumb:hover{border-color:var(--vie-fg-muted);background:#00000008;transform:translateY(-1px)}.vie-filter-thumb--active{border-color:var(--vie-accent);color:var(--vie-accent);background:#1b49650f}.vie-filter-thumb__canvas{width:68px;height:68px;border-radius:4px;background:var(--vie-surface);box-shadow:0 1px 3px #00000014;transition:box-shadow .15s ease}.vie-filter-thumb:hover .vie-filter-thumb__canvas{box-shadow:0 2px 8px #0000001f}.vie-filter-thumb--active .vie-filter-thumb__canvas{box-shadow:0 0 0 1px var(--vie-accent),0 2px 8px #1b496533}.vie-filter-thumb__label{font-size:var(--vie-font-size-sm);white-space:nowrap;font-weight:500}.vie-theme-dark .vie-filter-thumb:hover{background:#ffffff08}.vie-theme-dark .vie-filter-thumb--active{background:#1b496526}.vie-sticker-controls{display:flex;flex-direction:column;gap:8px}.vie-sticker-tabs{display:flex;gap:4px}.vie-sticker-tab{padding:4px 12px;border-radius:var(--vie-radius);border:1px solid var(--vie-border);background:transparent;color:var(--vie-fg-dim);cursor:pointer;font-family:var(--vie-font);font-size:var(--vie-font-size);transition:all var(--vie-transition)}.vie-sticker-tab:hover{color:var(--vie-fg);background:var(--vie-surface)}.vie-sticker-tab--active{background:var(--vie-surface);color:var(--vie-accent);border-color:var(--vie-accent)}.vie-sticker-tab--delete{color:var(--vie-danger);border-color:var(--vie-danger);margin-inline-start:auto}.vie-sticker-tab--delete:hover{background:#f3164e26}.vie-sticker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:4px;max-height:120px;overflow-y:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.vie-sticker-item{display:flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:24px;border-radius:var(--vie-radius);border:1px solid transparent;background:transparent;cursor:pointer;transition:all var(--vie-transition)}.vie-sticker-item:hover{background:var(--vie-surface);border-color:var(--vie-border);transform:scale(1.15)}.vie-frame-controls{display:flex;flex-direction:column;gap:12px}.vie-frame-strip{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.vie-frame-style{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 10px;border-radius:var(--vie-radius);border:2px solid transparent;background:transparent;color:var(--vie-fg-dim);cursor:pointer;font-family:var(--vie-font);font-size:var(--vie-font-size-sm);transition:all var(--vie-transition);white-space:nowrap}.vie-frame-style:hover{border-color:var(--vie-fg-muted);color:var(--vie-fg)}.vie-frame-style--active{border-color:var(--vie-accent);color:var(--vie-accent)}.vie-frame-colors{display:flex;align-items:center;gap:12px}.vie-frame-colors__label{font-size:var(--vie-font-size);color:var(--vie-fg-dim);white-space:nowrap}.vie-frame-colors__swatches{display:flex;gap:6px}.vie-frame-color-swatch{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:border-color var(--vie-transition),transform var(--vie-transition);box-shadow:0 0 0 1px var(--vie-border)}.vie-frame-color-swatch:hover{transform:scale(1.15)}.vie-frame-color-swatch--active{border-color:var(--vie-accent)}.vie-fill-controls{display:flex;flex-direction:column;gap:12px}.vie-fill-strip{display:flex;gap:8px;overflow-x:auto;padding:4px 0;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.vie-fill-swatch{flex-shrink:0;width:40px;height:40px;border-radius:var(--vie-radius);border:3px solid transparent;cursor:pointer;transition:border-color var(--vie-transition),transform var(--vie-transition);box-shadow:0 0 0 1px var(--vie-border)}.vie-fill-swatch:hover{transform:scale(1.1)}.vie-fill-swatch--active{border-color:var(--vie-accent)}.vie-fill-swatch--transparent{background-image:linear-gradient(45deg,#808080 25%,transparent 25%),linear-gradient(-45deg,#808080 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#808080 75%),linear-gradient(-45deg,transparent 75%,#808080 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0}.vie-sticker-overlay{position:absolute;top:0;right:0;bottom:0;left:0;outline:none}.vie-sticker-hitarea{cursor:pointer;stroke-width:2}.vie-sticker-hitarea:hover{stroke:#1b496566;fill:#1b49650d}.vie-sticker-selection{fill:none;stroke:var(--vie-accent);stroke-width:1.5;stroke-dasharray:4;pointer-events:none}.vie-sticker-handle{fill:#fff;stroke:var(--vie-accent);stroke-width:1.5;cursor:nwse-resize;rx:2}.vie-sticker-handle[data-handle=ne],.vie-sticker-handle[data-handle=sw]{cursor:nesw-resize}.vie-sticker-rotate-line{stroke:var(--vie-accent);stroke-width:1;pointer-events:none}.vie-sticker-rotate-handle{fill:#fff;stroke:var(--vie-accent);stroke-width:1.5;cursor:grab}.vie-sticker-rotate-handle:active{cursor:grabbing}.vie-resize-controls{display:flex;flex-direction:column;gap:12px}.vie-resize-title{text-align:center;font-size:var(--vie-font-size);font-weight:500;color:var(--vie-fg);margin:0 0 12px}.vie-resize-hint{text-align:center;font-size:var(--vie-font-size-sm);color:var(--vie-fg-dim);margin:8px 0 0}.vie-resize-dimensions{display:flex;align-items:flex-end;gap:8px}.vie-resize-input{display:flex;flex-direction:column;gap:4px}.vie-resize-input__label{font-size:var(--vie-font-size-sm);color:var(--vie-fg-dim)}.vie-resize-input__field-wrapper{position:relative;display:flex;align-items:center}.vie-resize-input__field{width:100px;padding-block:6px;padding-inline-start:8px;padding-inline-end:28px;border-radius:var(--vie-radius);border:1px solid var(--vie-border);background:var(--vie-surface);color:var(--vie-fg);font-family:var(--vie-font);font-size:var(--vie-font-size);font-variant-numeric:tabular-nums;outline:none;transition:border-color var(--vie-transition);-moz-appearance:textfield}.vie-resize-input__field::-webkit-inner-spin-button,.vie-resize-input__field::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.vie-resize-input__field:focus{border-color:var(--vie-accent)}.vie-resize-input__unit{position:absolute;inset-inline-end:8px;color:var(--vie-fg-muted);font-size:var(--vie-font-size-sm);pointer-events:none}.vie-resize-lock{display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin-bottom:2px;border-radius:var(--vie-radius);border:1px solid var(--vie-border);background:transparent;color:var(--vie-fg-dim);cursor:pointer;transition:all var(--vie-transition)}.vie-resize-lock:hover{color:var(--vie-fg);background:var(--vie-surface)}.vie-resize-lock--active{color:var(--vie-accent);border-color:var(--vie-accent)}.vie-resize-lock:active{transform:scale(.9)}.vie-annotate-controls{display:flex;flex-direction:column;gap:8px;padding:0 var(--vie-padding)}.vie-annotate-toolbar{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}.vie-annotate-tool{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--vie-border);border-radius:var(--vie-radius);background:var(--vie-bg-secondary);color:var(--vie-fg);cursor:pointer;transition:all var(--vie-transition);padding:6px}.vie-annotate-tool svg{width:18px;height:18px}.vie-annotate-tool:hover{background:var(--vie-surface);border-color:var(--vie-accent)}.vie-annotate-tool--active{background:var(--vie-accent);color:#fff;border-color:var(--vie-accent)}.vie-annotate-tool--delete{color:var(--vie-danger);border-color:var(--vie-danger);margin-inline-start:auto}.vie-annotate-tool--delete:hover{background:var(--vie-danger);color:#fff}.vie-annotate-props{display:flex;flex-direction:column;gap:6px}.vie-annotate-prop-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.vie-annotate-prop-label{font-size:var(--vie-font-size-sm);color:var(--vie-fg-dim);min-width:70px}.vie-annotate-color-picker{display:flex;gap:4px;flex-wrap:wrap}.vie-annotate-color-swatch{width:24px;height:24px;border-radius:50%;border:2px solid var(--vie-border);cursor:pointer;transition:all var(--vie-transition);padding:0}.vie-annotate-color-swatch:hover{transform:scale(1.15)}.vie-annotate-color-swatch--active{outline:2px solid var(--vie-accent);outline-offset:2px}.vie-annotate-color-swatch--transparent{background:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}.vie-annotate-font-buttons{display:flex;gap:4px}.vie-annotate-font-btn{padding:4px 10px;border:1px solid var(--vie-border);border-radius:var(--vie-radius);background:var(--vie-bg-secondary);color:var(--vie-fg);font-size:var(--vie-font-size-sm);cursor:pointer;transition:all var(--vie-transition)}.vie-annotate-font-btn:hover{border-color:var(--vie-accent)}.vie-annotate-font-btn--active{background:var(--vie-accent);color:#fff;border-color:var(--vie-accent)}.vie-annotate-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--vie-border);border-radius:var(--vie-radius);background:var(--vie-bg-secondary);color:var(--vie-fg);font-size:14px;cursor:pointer;transition:all var(--vie-transition)}.vie-annotate-toggle:hover{border-color:var(--vie-accent)}.vie-annotate-toggle--active{background:var(--vie-accent);color:#fff;border-color:var(--vie-accent)}.vie-annotate-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:all;cursor:text;outline:none}.vie-annotate-hitarea{cursor:move}.vie-annotate-selection{fill:none;stroke:var(--vie-accent);stroke-width:1.5;stroke-dasharray:4 3;pointer-events:none}.vie-annotate-handle{fill:#fff;stroke:var(--vie-accent);stroke-width:1.5;cursor:nwse-resize}.vie-annotate-rotate-handle{fill:#fff;stroke:var(--vie-accent);stroke-width:1.5;cursor:grab}.vie-annotate-rotate-line{stroke:var(--vie-accent);stroke-width:1;stroke-dasharray:3 2;pointer-events:none}.vie-annotate-text-input{width:100%;height:100%;border:1.5px dashed var(--vie-accent);background:#00000040;padding:4px 6px;resize:none;outline:none;box-sizing:border-box;line-height:1.2;overflow:hidden}.vie-panel-enter-active,.vie-panel-leave-active{transition:opacity .12s ease}.vie-panel-enter-from,.vie-panel-leave-to{opacity:0}.vie-dropdown-enter-active,.vie-dropdown-leave-active{transition:opacity .1s ease,transform .1s ease}.vie-dropdown-enter-from,.vie-dropdown-leave-to{opacity:0;transform:translateY(4px)}
|