@nice2dev/ui-graphics 1.3.15 → 1.3.16

package/dist/esm/vector/VectorEditorRightPanel.js

@@ -1,378 +1,1103 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { NiceButton, NiceColorPicker, NiceTextInput, NiceSelect, NiceSlider, NiceNumberInput, NiceTabs } from '@nice2dev/ui';
-import { clickOnActivationKey, NiceIcon } from '@nice2dev/ui-core';
-import React, { useState } from 'react';
-import { useNiceTranslation } from '../core/i18n.js';
-import { ANIMATION_PRESETS, animationToCSSKeyframes, animationToCSSRule } from './vectorAnimation.js';
-import styles from './VectorEditor.module.css.js';
-import { FONTS } from './vectorEditorTypes.js';
-import { PRESET_GRADIENTS, gradientToCSS, gradientId, cloneGradient } from './vectorGradients.js';
-import { iconComponentToShapes } from './vectorIconImport.js';
-
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { NiceButton, NiceColorPicker, NiceTextInput, NiceSelect, NiceSlider, NiceNumberInput, NiceTabs } from "@nice2dev/ui";
+import { clickOnActivationKey, NiceIcon } from "@nice2dev/ui-core";
+import React, { useState } from "react";
+import { useNiceTranslation } from "../core/i18n.js";
+import { ANIMATION_PRESETS, animationToCSSKeyframes, animationToCSSRule } from "./vectorAnimation.js";
+import styles from "./VectorEditor.module.css.js";
+import { FONTS } from "./vectorEditorTypes.js";
+import { PRESET_GRADIENTS, gradientToCSS, gradientId, cloneGradient } from "./vectorGradients.js";
+import { iconComponentToShapes } from "./vectorIconImport.js";
 const VectorEditorRightPanel$1 = ({ api, library, artW = 512, artH = 512 }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    const { t } = useNiceTranslation();
-    const { tool, selId, selShape, shapes, fillCol, strokeCol, strokeW, shapeOpacity, cornerRadius, polygonSides, starPoints2, starInnerRatio, fontSize, fontFamily, snapGrid, gridSize, setFillCol, setStrokeCol, setStrokeW, setShapeOpacity, setCornerRadius, setPolygonSides, setStarPoints2, setStarInnerRatio, setFontSize, setFontFamily, setGridSize, updateSel, setSelId, setTool, setShapes, snap, animations, isPlaying, setShapeAnimation, setIsPlaying, setPreviewTime, } = api;
-    // Gradient editing state
-    const [fillMode, setFillMode] = useState('solid');
-    const [selectedGradient, setSelectedGradient] = useState(null);
-    const [showGradientEditor, setShowGradientEditor] = useState(false);
-    // Library: insert the next picked icon as a small top-right corner badge
-    // (ports the badge/overlay feature from the retired NiceIconEditor).
-    const [asBadge, setAsBadge] = useState(false);
-    const applyGradient = (gradient) => {
-        const newGrad = { ...cloneGradient(gradient), id: gradientId() };
-        setSelectedGradient(newGrad);
-        // Store gradient in shape as serialized reference
-        updateSel({
-            fill: `url(#${newGrad.id})`,
-            // Store gradient data as custom property (will be used in SVG export)
-        });
-    };
-    const propertiesContent = (jsxs("div", { className: styles.rightPanelTabBody, children: [jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsx("span", { children: t('vectorEditor.properties.appearance', 'Appearance') }) }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('vectorEditor.properties.fill', 'Fill') }), jsxs("div", { style: { display: 'flex', gap: 4 }, children: [jsx(NiceButton, { className: `${styles.menuBtn} ${fillMode === 'solid' ? styles.menuBtnActive : ''}`, style: { padding: '2px 6px', fontSize: 10 }, variant: fillMode === 'solid' ? 'primary' : 'ghost', size: "sm", onClick: () => setFillMode('solid'), children: t('vectorEditor.properties.solid', 'Solid') }), jsx(NiceButton, { className: `${styles.menuBtn} ${fillMode === 'gradient' ? styles.menuBtnActive : ''}`, style: { padding: '2px 6px', fontSize: 10 }, variant: fillMode === 'gradient' ? 'primary' : 'ghost', size: "sm", onClick: () => setFillMode('gradient'), children: t('vectorEditor.properties.gradient', 'Gradient') })] })] }), fillMode === 'solid' ? (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel }), jsx("div", { className: styles.propColorSwatch, style: { background: fillCol }, children: jsx(NiceColorPicker, { value: fillCol, showInput: false, showRandom: false, onChange: (c) => {
-                                        setFillCol(c);
-                                        updateSel({ fill: c });
-                                    } }) }), jsx(NiceTextInput, { className: styles.propInput, value: (selShape === null || selShape === void 0 ? void 0 : selShape.fill) || fillCol, onChange: (val) => {
-                                    setFillCol(val);
-                                    updateSel({ fill: val });
-                                } })] })) : (jsxs(Fragment, { children: [jsx("div", { className: styles.propRow, style: { flexWrap: 'wrap', gap: 4 }, children: PRESET_GRADIENTS.map((grad, i) => (jsx("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, style: {
-                                        width: 24,
-                                        height: 24,
-                                        borderRadius: 4,
-                                        background: gradientToCSS(grad),
-                                        cursor: 'pointer',
-                                        border: (selectedGradient === null || selectedGradient === void 0 ? void 0 : selectedGradient.id) === grad.id
-                                            ? '2px solid var(--nice-bg, #FFF)'
-                                            : '1px solid var(--nice-border-color, #444)',
-                                    }, onClick: () => applyGradient(grad), title: t('vectorEditor.gradient', '{type} gradient').replace('{type}', String(grad.type)) }, i))) }), jsx("div", { className: styles.propRow, children: jsxs(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", style: { width: '100%', fontSize: 10 }, onClick: () => setShowGradientEditor(!showGradientEditor), children: [jsx(NiceIcon, { name: showGradientEditor ? 'chevron-down' : 'chevron-right', size: 14 }), ' ', showGradientEditor
-                                            ? t('vectorEditor.properties.hideEditor', 'Hide Editor')
-                                            : t('vectorEditor.properties.editGradient', 'Edit Gradient')] }) }), showGradientEditor && selectedGradient && (jsxs("div", { style: {
-                                    padding: 4,
-                                    background: 'var(--nice-bg-secondary, #252525)',
-                                    borderRadius: 4,
-                                    margin: '4px 0',
-                                }, children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('vectorEditor.properties.type', 'Type') }), jsx(NiceSelect, { className: styles.propInput, value: selectedGradient.type, onChange: (val) => {
-                                                    const type = val;
-                                                    let newGrad;
-                                                    if (type === 'linear') {
-                                                        newGrad = {
-                                                            type: 'linear',
-                                                            id: gradientId(),
-                                                            angle: 0,
-                                                            stops: selectedGradient.stops,
-                                                        };
-                                                    }
-                                                    else {
-                                                        newGrad = {
-                                                            type: 'radial',
-                                                            id: gradientId(),
-                                                            cx: 0.5,
-                                                            cy: 0.5,
-                                                            r: 0.7,
-                                                            stops: selectedGradient.stops,
-                                                        };
-                                                    }
-                                                    setSelectedGradient(newGrad);
-                                                    updateSel({ fill: `url(#${newGrad.id})` });
-                                                }, options: [
-                                                    { value: 'linear', label: t('vectorEditor.properties.linear', 'Linear') },
-                                                    { value: 'radial', label: t('vectorEditor.properties.radial', 'Radial') },
-                                                ] })] }), selectedGradient.type === 'linear' && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('vectorEditor.properties.angle', 'Angle') }), jsx(NiceSlider, { className: styles.propInput, min: 0, max: 360, value: selectedGradient.angle, onChange: (val) => {
-                                                    const newGrad = {
-                                                        ...selectedGradient,
-                                                        id: gradientId(),
-                                                        angle: val,
-                                                    };
-                                                    setSelectedGradient(newGrad);
-                                                    updateSel({ fill: `url(#${newGrad.id})` });
-                                                } }), jsxs("span", { style: { fontSize: 10, minWidth: 28 }, children: [selectedGradient.angle, "\u00B0"] })] })), selectedGradient.type === 'radial' && (jsxs(Fragment, { children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('vectorEditor.properties.cx', 'CX') }), jsx(NiceSlider, { className: styles.propInput, min: 0, max: 100, value: selectedGradient.cx * 100, onChange: (val) => {
-                                                            const newGrad = {
-                                                                ...selectedGradient,
-                                                                id: gradientId(),
-                                                                cx: val / 100,
-                                                            };
-                                                            setSelectedGradient(newGrad);
-                                                            updateSel({ fill: `url(#${newGrad.id})` });
-                                                        } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('vectorEditor.properties.cy', 'CY') }), jsx(NiceSlider, { className: styles.propInput, min: 0, max: 100, value: selectedGradient.cy * 100, onChange: (val) => {
-                                                            const newGrad = {
-                                                                ...selectedGradient,
-                                                                id: gradientId(),
-                                                                cy: val / 100,
-                                                            };
-                                                            setSelectedGradient(newGrad);
-                                                            updateSel({ fill: `url(#${newGrad.id})` });
-                                                        } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('vectorEditor.properties.r', 'R') }), jsx(NiceSlider, { className: styles.propInput, min: 10, max: 100, value: selectedGradient.r * 100, onChange: (val) => {
-                                                            const newGrad = {
-                                                                ...selectedGradient,
-                                                                id: gradientId(),
-                                                                r: val / 100,
-                                                            };
-                                                            setSelectedGradient(newGrad);
-                                                            updateSel({ fill: `url(#${newGrad.id})` });
-                                                        } })] })] })), jsx("div", { style: { fontSize: 10, color: 'var(--nice-text-secondary, #888)', marginTop: 4 }, children: t('vectorEditor.properties.colorStops', 'Color Stops:') }), selectedGradient.stops.map((stop, i) => (jsxs("div", { className: styles.propRow, children: [jsx(NiceColorPicker, { value: stop.color, showInput: false, showRandom: false, style: { width: 24, height: 20 }, onChange: (color) => {
-                                                    const newStops = [...selectedGradient.stops];
-                                                    newStops[i] = { ...newStops[i], color };
-                                                    const newGrad = { ...selectedGradient, id: gradientId(), stops: newStops };
-                                                    setSelectedGradient(newGrad);
-                                                    updateSel({ fill: `url(#${newGrad.id})` });
-                                                } }), jsx(NiceSlider, { min: 0, max: 100, value: stop.offset * 100, style: { flex: 1 }, onChange: (val) => {
-                                                    const newStops = [...selectedGradient.stops];
-                                                    newStops[i] = { ...newStops[i], offset: val / 100 };
-                                                    newStops.sort((a, b) => a.offset - b.offset);
-                                                    const newGrad = { ...selectedGradient, id: gradientId(), stops: newStops };
-                                                    setSelectedGradient(newGrad);
-                                                    updateSel({ fill: `url(#${newGrad.id})` });
-                                                } }), jsxs("span", { style: { fontSize: 9, minWidth: 24 }, children: [Math.round(stop.offset * 100), "%"] })] }, i))), jsxs("div", { className: styles.propRow, style: { gap: 4 }, children: [jsx(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", style: { fontSize: 10, flex: 1 }, onClick: () => {
-                                                    const newStops = [
-                                                        ...selectedGradient.stops,
-                                                        { offset: 0.5, color: 'var(--nice-text-secondary, #888888)' },
-                                                    ];
-                                                    newStops.sort((a, b) => a.offset - b.offset);
-                                                    const newGrad = { ...selectedGradient, id: gradientId(), stops: newStops };
-                                                    setSelectedGradient(newGrad);
-                                                    updateSel({ fill: `url(#${newGrad.id})` });
-                                                }, children: t('vectorEditor.properties.addStop', '+ Add Stop') }), jsx(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", style: { fontSize: 10, flex: 1 }, disabled: selectedGradient.stops.length <= 2, onClick: () => {
-                                                    if (selectedGradient.stops.length <= 2) {
-                                                        return;
-                                                    }
-                                                    const newStops = selectedGradient.stops.slice(0, -1);
-                                                    const newGrad = { ...selectedGradient, id: gradientId(), stops: newStops };
-                                                    setSelectedGradient(newGrad);
-                                                    updateSel({ fill: `url(#${newGrad.id})` });
-                                                }, children: t('vectorEditor.properties.removeStop', '- Remove') })] })] }))] })), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('vectorEditor.properties.stroke', 'Stroke') }), jsx("div", { className: styles.propColorSwatch, style: { background: strokeCol }, children: jsx(NiceColorPicker, { value: strokeCol, showInput: false, showRandom: false, onChange: (c) => {
-                                        setStrokeCol(c);
-                                        updateSel({ stroke: c });
-                                    } }) }), jsx(NiceTextInput, { className: styles.propInput, value: (selShape === null || selShape === void 0 ? void 0 : selShape.stroke) || strokeCol, onChange: (val) => {
-                                    setStrokeCol(val);
-                                    updateSel({ stroke: val });
-                                } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('vectorEditor.properties.width', 'Width') }), jsx(NiceNumberInput, { className: styles.propInput, min: 0, max: 100, value: (_a = selShape === null || selShape === void 0 ? void 0 : selShape.strokeWidth) !== null && _a !== void 0 ? _a : strokeW, onChange: (val) => {
-                                    const v = val !== null && val !== void 0 ? val : 0;
-                                    setStrokeW(v);
-                                    updateSel({ strokeWidth: v });
-                                } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('vectorEditor.properties.opacity', 'Opacity') }), jsx(NiceSlider, { className: styles.propInput, min: 0, max: 1, step: 0.01, value: (_b = selShape === null || selShape === void 0 ? void 0 : selShape.opacity) !== null && _b !== void 0 ? _b : shapeOpacity, onChange: (val) => {
-                                    setShapeOpacity(val);
-                                    updateSel({ opacity: val });
-                                } }), jsxs("span", { style: { fontSize: 10, minWidth: 28 }, children: [Math.round(((_c = selShape === null || selShape === void 0 ? void 0 : selShape.opacity) !== null && _c !== void 0 ? _c : shapeOpacity) * 100), "%"] })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('vectorEditor.properties.rotation', 'Rotation') }), jsx(NiceNumberInput, { className: styles.propInput, min: -360, max: 360, value: (_d = selShape === null || selShape === void 0 ? void 0 : selShape.rotation) !== null && _d !== void 0 ? _d : 0, onChange: (val) => updateSel({ rotation: val !== null && val !== void 0 ? val : 0 }) }), jsx("span", { style: { fontSize: 10 }, children: "\u00B0" })] })] }), jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsx("span", { children: t('vectorEditor.properties.toolOptions', 'Tool Options') }) }), (tool === 'roundrect' || (selShape === null || selShape === void 0 ? void 0 : selShape.type) === 'roundrect') && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('vectorEditor.properties.radius', 'Radius') }), jsx(NiceNumberInput, { className: styles.propInput, min: 0, max: 200, value: (_e = selShape === null || selShape === void 0 ? void 0 : selShape.rx) !== null && _e !== void 0 ? _e : cornerRadius, onChange: (val) => {
-                                    const v = val !== null && val !== void 0 ? val : 0;
-                                    setCornerRadius(v);
-                                    updateSel({ rx: v });
-                                } })] })), (tool === 'polygon' || (selShape === null || selShape === void 0 ? void 0 : selShape.type) === 'polygon') && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('vectorEditor.properties.sides', 'Sides') }), jsx(NiceNumberInput, { className: styles.propInput, min: 3, max: 32, value: (_f = selShape === null || selShape === void 0 ? void 0 : selShape.sides) !== null && _f !== void 0 ? _f : polygonSides, onChange: (val) => {
-                                    const v = val !== null && val !== void 0 ? val : 3;
-                                    setPolygonSides(v);
-                                    updateSel({ sides: v });
-                                } })] })), (tool === 'star' || (selShape === null || selShape === void 0 ? void 0 : selShape.type) === 'star') && (jsxs(Fragment, { children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('vectorEditor.properties.points', 'Points') }), jsx(NiceNumberInput, { className: styles.propInput, min: 3, max: 32, value: (_g = selShape === null || selShape === void 0 ? void 0 : selShape.sides) !== null && _g !== void 0 ? _g : starPoints2, onChange: (val) => {
-                                            const v = val !== null && val !== void 0 ? val : 3;
-                                            setStarPoints2(v);
-                                            updateSel({ sides: v });
-                                        } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('vectorEditor.properties.innerR', 'Inner R') }), jsx(NiceSlider, { className: styles.propInput, min: 0.1, max: 0.9, step: 0.05, value: (_h = selShape === null || selShape === void 0 ? void 0 : selShape.innerRadius) !== null && _h !== void 0 ? _h : starInnerRatio, onChange: (val) => {
-                                            setStarInnerRatio(val);
-                                            updateSel({ innerRadius: val });
-                                        } }), jsxs("span", { style: { fontSize: 10 }, children: [Math.round(((_j = selShape === null || selShape === void 0 ? void 0 : selShape.innerRadius) !== null && _j !== void 0 ? _j : starInnerRatio) * 100), "%"] })] })] })), (tool === 'text' || (selShape === null || selShape === void 0 ? void 0 : selShape.type) === 'text') && (jsxs(Fragment, { children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('vectorEditor.properties.size', 'Size') }), jsx(NiceNumberInput, { className: styles.propInput, min: 8, max: 200, value: (_k = selShape === null || selShape === void 0 ? void 0 : selShape.fontSize) !== null && _k !== void 0 ? _k : fontSize, onChange: (val) => {
-                                            const v = val !== null && val !== void 0 ? val : 12;
-                                            setFontSize(v);
-                                            updateSel({ fontSize: v });
-                                        } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('vectorEditor.properties.font', 'Font') }), jsx(NiceSelect, { className: styles.propInput, value: (_l = selShape === null || selShape === void 0 ? void 0 : selShape.fontFamily) !== null && _l !== void 0 ? _l : fontFamily, onChange: (val) => {
-                                            setFontFamily(val);
-                                            updateSel({ fontFamily: val });
-                                        }, options: FONTS.map((f) => ({ value: f, label: f })) })] })] })), snapGrid && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('vectorEditor.properties.grid', 'Grid') }), jsx(NiceNumberInput, { className: styles.propInput, min: 4, max: 128, value: gridSize, onChange: (val) => setGridSize(val !== null && val !== void 0 ? val : 8) })] }))] }), selShape && (jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsx("span", { children: t('vectorEditor.properties.transform', 'Transform') }) }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('vectorEditor.properties.x', 'X') }), jsx(NiceNumberInput, { className: styles.propInput, value: Math.round(selShape.x), onChange: (val) => updateSel({ x: val !== null && val !== void 0 ? val : 0 }) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('vectorEditor.properties.y', 'Y') }), jsx(NiceNumberInput, { className: styles.propInput, value: Math.round(selShape.y), onChange: (val) => updateSel({ y: val !== null && val !== void 0 ? val : 0 }) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('vectorEditor.properties.w', 'W') }), jsx(NiceNumberInput, { className: styles.propInput, value: Math.round(selShape.w), onChange: (val) => updateSel({ w: val !== null && val !== void 0 ? val : 0 }) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('vectorEditor.properties.h', 'H') }), jsx(NiceNumberInput, { className: styles.propInput, value: Math.round(selShape.h), onChange: (val) => updateSel({ h: val !== null && val !== void 0 ? val : 0 }) })] })] }))] }));
-    // Insert an icon as editable shapes. `badge` scales it down and pins it to the
-    // top-right corner (the former NiceIconEditor "badge/overlay" feature).
-    const insertIcon = (Icon, badge) => {
-        var _a, _b;
-        if (badge) {
-            const box = Math.round(Math.min(artW, artH) * 0.42);
-            const made = iconComponentToShapes(Icon, { artW: box, artH: box, margin: 4 });
-            if (made.length === 0) {
-                return;
+  const { t } = useNiceTranslation();
+  const {
+    tool,
+    selId,
+    selShape,
+    shapes,
+    fillCol,
+    strokeCol,
+    strokeW,
+    shapeOpacity,
+    cornerRadius,
+    polygonSides,
+    starPoints2,
+    starInnerRatio,
+    fontSize,
+    fontFamily,
+    snapGrid,
+    gridSize,
+    setFillCol,
+    setStrokeCol,
+    setStrokeW,
+    setShapeOpacity,
+    setCornerRadius,
+    setPolygonSides,
+    setStarPoints2,
+    setStarInnerRatio,
+    setFontSize,
+    setFontFamily,
+    setGridSize,
+    updateSel,
+    setSelId,
+    setTool,
+    setShapes,
+    snap,
+    animations,
+    isPlaying,
+    setShapeAnimation,
+    setIsPlaying,
+    setPreviewTime
+  } = api;
+  const [fillMode, setFillMode] = useState("solid");
+  const [selectedGradient, setSelectedGradient] = useState(null);
+  const [showGradientEditor, setShowGradientEditor] = useState(false);
+  const [asBadge, setAsBadge] = useState(false);
+  const applyGradient = (gradient) => {
+    const newGrad = { ...cloneGradient(gradient), id: gradientId() };
+    setSelectedGradient(newGrad);
+    updateSel({
+      fill: `url(#${newGrad.id})`
+      // Store gradient data as custom property (will be used in SVG export)
+    });
+  };
+  const propertiesContent = /* @__PURE__ */ jsxs("div", { className: styles.rightPanelTabBody, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.panelSection, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.panelTitle, children: /* @__PURE__ */ jsx("span", { children: t("vectorEditor.properties.appearance", "Appearance") }) }),
+      /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("vectorEditor.properties.fill", "Fill") }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 4 }, children: [
+          /* @__PURE__ */ jsx(
+            NiceButton,
+            {
+              className: `${styles.menuBtn} ${fillMode === "solid" ? styles.menuBtnActive : ""}`,
+              style: { padding: "2px 6px", fontSize: 10 },
+              variant: fillMode === "solid" ? "primary" : "ghost",
+              size: "sm",
+              onClick: () => setFillMode("solid"),
+              children: t("vectorEditor.properties.solid", "Solid")
             }
-            const dx = artW - box;
-            const offset = made.map((s) => ({
-                ...s,
-                x: s.x + dx,
-                ...(s.x2 != null ? { x2: s.x2 + dx } : {}),
-                ...(s.points ? { points: s.points.map((p) => ({ ...p, x: p.x + dx })) } : {}),
-            }));
-            const next = [...shapes, ...offset];
-            setShapes(next);
-            snap(next);
-            if ((_a = offset[0]) === null || _a === void 0 ? void 0 : _a.id) {
-                setSelId(offset[0].id);
+          ),
+          /* @__PURE__ */ jsx(
+            NiceButton,
+            {
+              className: `${styles.menuBtn} ${fillMode === "gradient" ? styles.menuBtnActive : ""}`,
+              style: { padding: "2px 6px", fontSize: 10 },
+              variant: fillMode === "gradient" ? "primary" : "ghost",
+              size: "sm",
+              onClick: () => setFillMode("gradient"),
+              children: t("vectorEditor.properties.gradient", "Gradient")
             }
-            setTool('pointer');
-            return;
-        }
-        const inserted = iconComponentToShapes(Icon, { artW, artH });
-        if (inserted.length === 0) {
-            return;
-        }
-        const next = [...shapes, ...inserted];
-        setShapes(next);
-        snap(next);
-        if ((_b = inserted[0]) === null || _b === void 0 ? void 0 : _b.id) {
-            setSelId(inserted[0].id);
-        }
-        setTool('pointer');
-    };
-    const reorderShape = (id, dir) => {
-        const idx = shapes.findIndex((s) => s.id === id);
-        if (idx < 0) {
-            return;
-        }
-        const next = shapes.slice();
-        const target = idx + dir;
-        if (target < 0 || target >= next.length) {
-            return;
-        }
-        [next[idx], next[target]] = [next[target], next[idx]];
-        setShapes(next);
-        snap(next);
-    };
-    const layersContent = (jsx("div", { className: styles.rightPanelTabBody, children: jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsxs("span", { children: [t('vectorEditor.layers.title', 'Layers'), " (", shapes.length, ")"] }) }), [...shapes].reverse().map((s, revIdx) => {
-                    var _a;
-                    const realIdx = shapes.length - 1 - revIdx;
-                    const active = s.id === selId;
-                    return (jsxs("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: `${styles.layerRow} ${active ? styles.layerRowActive : ''} ${s.locked ? styles.layerRowLocked : ''}`, onClick: () => {
-                            setSelId(s.id);
-                            setTool('pointer');
-                        }, children: [jsx("button", { type: "button", className: styles.layerIconBtn, title: s.hidden
-                                    ? t('vectorEditor.layers.show', 'Show')
-                                    : t('vectorEditor.layers.hide', 'Hide'), onClick: (e) => {
-                                    e.stopPropagation();
-                                    const next = shapes.map((x) => (x.id === s.id ? { ...x, hidden: !x.hidden } : x));
-                                    setShapes(next);
-                                    snap(next);
-                                }, children: jsx(NiceIcon, { name: s.hidden ? 'eye-off' : 'eye', size: 14 }) }), jsx("button", { type: "button", className: styles.layerIconBtn, title: s.locked
-                                    ? t('vectorEditor.layers.unlock', 'Unlock')
-                                    : t('vectorEditor.layers.lock', 'Lock'), onClick: (e) => {
-                                    e.stopPropagation();
-                                    const next = shapes.map((x) => (x.id === s.id ? { ...x, locked: !x.locked } : x));
-                                    setShapes(next);
-                                    snap(next);
-                                }, children: jsx(NiceIcon, { name: "lock", size: 14, style: { opacity: s.locked ? 1 : 0.4 } }) }), jsx("span", { className: styles.shapeIcon, children: jsx(NiceIcon, { name: s.type === 'rect' || s.type === 'roundrect'
-                                        ? 'square'
-                                        : s.type === 'ellipse'
-                                            ? 'circle'
-                                            : s.type === 'line'
-                                                ? 'line'
-                                                : s.type === 'arrow'
-                                                    ? 'arrow-right'
-                                                    : s.type === 'polygon'
-                                                        ? 'hexagon'
-                                                        : s.type === 'star'
-                                                            ? 'star'
-                                                            : s.type === 'polyline'
-                                                                ? 'pen'
-                                                                : s.type === 'path'
-                                                                    ? 'wand'
-                                                                    : 'type', size: 14 }) }), jsx("input", { className: styles.layerNameInput, value: (_a = s.name) !== null && _a !== void 0 ? _a : s.type, disabled: s.locked, onClick: (e) => e.stopPropagation(), onChange: (e) => {
-                                    const v = e.target.value;
-                                    const next = shapes.map((x) => (x.id === s.id ? { ...x, name: v } : x));
-                                    setShapes(next);
-                                }, onBlur: () => snap(shapes) }), jsx("button", { type: "button", className: styles.layerIconBtn, title: t('vectorEditor.layers.moveUp', 'Move up'), onClick: (e) => {
-                                    e.stopPropagation();
-                                    reorderShape(s.id, 1);
-                                }, disabled: realIdx === shapes.length - 1, children: jsx(NiceIcon, { name: "arrow-up", size: 14 }) }), jsx("button", { type: "button", className: styles.layerIconBtn, title: t('vectorEditor.layers.moveDown', 'Move down'), onClick: (e) => {
-                                    e.stopPropagation();
-                                    reorderShape(s.id, -1);
-                                }, disabled: realIdx === 0, children: jsx(NiceIcon, { name: "arrow-down", size: 14 }) })] }, s.id));
-                }), shapes.length === 0 && (jsx("div", { style: { color: 'var(--nice-text-secondary)', fontSize: 11, padding: 4 }, children: t('vectorEditor.layers.empty', 'No layers yet. Use the tools to draw, or insert from the Library tab.') }))] }) }));
-    const libraryContent = (jsx("div", { className: styles.rightPanelTabBody, children: library && library.length > 0 ? (jsxs(Fragment, { children: [jsx("div", { className: styles.propRow, style: { padding: '4px 0' }, children: jsxs(NiceButton, { className: `${styles.menuBtn} ${asBadge ? styles.menuBtnActive : ''}`, variant: asBadge ? 'primary' : 'ghost', size: "sm", style: { width: '100%', fontSize: 11 }, onClick: () => setAsBadge((v) => !v), "aria-pressed": asBadge, children: [asBadge && jsx(NiceIcon, { name: "plus", size: 14 }), ' ', asBadge
-                                ? t('vectorEditor.library.insertAsBadgeOn', 'Inserting as corner badge')
-                                : t('vectorEditor.library.insertAsBadge', 'Insert as corner badge')] }) }), jsx("div", { className: styles.libraryGrid, children: library.map((entry) => {
-                        const Icon = entry.Component;
-                        return (jsxs("button", { type: "button", className: styles.libraryCell, title: entry.name, onClick: () => insertIcon(Icon, asBadge), children: [jsx("div", { style: {
-                                        width: 28,
-                                        height: 28,
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                    }, children: jsx(Icon, { size: "md" }) }), jsx("span", { children: entry.name })] }, entry.name));
-                    }) })] })) : (jsx("div", { style: { color: 'var(--nice-text-secondary)', fontSize: 11, padding: 12 }, children: t('vectorEditor.library.passProp', 'Pass a library prop to NiceVectorEditor to populate this tab with insertable icons.') })) }));
-    const selAnim = selId ? animations[selId] : undefined;
-    const animationCount = Object.keys(animations).length;
-    const timelineContent = (jsxs("div", { className: styles.rightPanelTabBody, children: [jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsx("span", { children: t('vectorEditor.timeline.animationTitle', 'Animation') }) }), !selId ? (jsx("div", { style: { color: 'var(--nice-text-secondary)', fontSize: 11, padding: 4 }, children: t('vectorEditor.timeline.attachHint', 'Select a shape to attach an animation.') })) : (jsxs(Fragment, { children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('vectorEditor.timeline.preset', 'Preset') }), jsx("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 4 }, children: Object.keys(ANIMATION_PRESETS).map((key) => (jsx(NiceButton, { variant: "ghost", size: "sm", onClick: () => setShapeAnimation(selId, ANIMATION_PRESETS[key]), children: key }, key))) })] }), selAnim && (jsxs(Fragment, { children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('vectorEditor.timeline.duration', 'Duration (ms)') }), jsx(NiceNumberInput, { value: selAnim.duration, min: 100, max: 10000, step: 100, onChange: (v) => setShapeAnimation(selId, {
-                                                    ...selAnim,
-                                                    duration: Number(v) || selAnim.duration,
-                                                }) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('vectorEditor.timeline.repeat', 'Repeat') }), jsx(NiceSelect, { value: selAnim.repeat === 'infinite' ? 'infinite' : String(selAnim.repeat), onChange: (v) => setShapeAnimation(selId, {
-                                                    ...selAnim,
-                                                    repeat: v === 'infinite' ? 'infinite' : Number(v),
-                                                }), options: [
-                                                    { value: 'infinite', label: 'infinite' },
-                                                    { value: '1', label: '1x' },
-                                                    { value: '2', label: '2x' },
-                                                    { value: '3', label: '3x' },
-                                                    { value: '5', label: '5x' },
-                                                ] })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: t('vectorEditor.timeline.direction', 'Direction') }), jsx(NiceSelect, { value: selAnim.direction, onChange: (v) => setShapeAnimation(selId, {
-                                                    ...selAnim,
-                                                    direction: v,
-                                                }), options: [
-                                                    { value: 'normal', label: 'normal' },
-                                                    { value: 'alternate', label: 'alternate' },
-                                                ] })] }), jsx("div", { className: styles.propRow, children: jsx(NiceButton, { variant: "ghost", size: "sm", onClick: () => setShapeAnimation(selId, null), children: t('vectorEditor.timeline.remove', 'Remove animation') }) }), jsx("div", { className: styles.panelTitle, style: { marginTop: 8 }, children: jsx("span", { children: t('vectorEditor.timeline.keyframes', 'Keyframes') }) }), selAnim.keyframes.map((k, i) => (jsxs("div", { className: styles.propRow, style: { flexDirection: 'column', alignItems: 'stretch', gap: 2 }, children: [jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: [jsx("span", { className: styles.propLabel, style: { minWidth: 24 }, children: t('vectorEditor.timeline.tLabel', 't') }), jsx(NiceSlider, { value: k.t, min: 0, max: 1, step: 0.01, onChange: (v) => {
-                                                            const nextKfs = selAnim.keyframes.map((kf, j) => j === i ? { ...kf, t: Number(v) } : kf);
-                                                            nextKfs.sort((a, b) => a.t - b.t);
-                                                            setShapeAnimation(selId, { ...selAnim, keyframes: nextKfs });
-                                                        } }), jsx(NiceButton, { variant: "ghost", size: "sm", disabled: selAnim.keyframes.length <= 2, onClick: () => {
-                                                            const nextKfs = selAnim.keyframes.filter((_, j) => j !== i);
-                                                            setShapeAnimation(selId, { ...selAnim, keyframes: nextKfs });
-                                                        }, "aria-label": t('vectorEditor.timeline.removeKeyframe', 'Remove keyframe'), children: jsx(NiceIcon, { name: "trash", size: 14 }) })] }), jsx("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 2 }, children: ['rotate', 'scale', 'translateX', 'translateY', 'opacity'].map((field) => {
-                                                    var _a;
-                                                    return (jsx(NiceNumberInput, { value: (_a = k[field]) !== null && _a !== void 0 ? _a : 0, step: field === 'scale' || field === 'opacity' ? 0.1 : 1, placeholder: field[0].toUpperCase(), onChange: (v) => {
-                                                            const num = v == null ? undefined : Number(v);
-                                                            const nextKfs = selAnim.keyframes.map((kf, j) => j === i ? { ...kf, [field]: num } : kf);
-                                                            setShapeAnimation(selId, { ...selAnim, keyframes: nextKfs });
-                                                        } }, field));
-                                                }) })] }, i))), jsx("div", { className: styles.propRow, children: jsx(NiceButton, { variant: "ghost", size: "sm", onClick: () => {
-                                                const last = selAnim.keyframes[selAnim.keyframes.length - 1];
-                                                const prev = selAnim.keyframes[selAnim.keyframes.length - 2];
-                                                const newT = prev ? (prev.t + last.t) / 2 : Math.min(1, last.t + 0.1);
-                                                const nextKfs = [...selAnim.keyframes, { ...last, t: newT }].sort((a, b) => a.t - b.t);
-                                                setShapeAnimation(selId, { ...selAnim, keyframes: nextKfs });
-                                            }, children: t('vectorEditor.timeline.addKeyframe', '+ Add keyframe') }) })] }))] }))] }), jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsx("span", { children: t('vectorEditor.timeline.playbackTitle', 'Playback') }) }), jsxs("div", { className: styles.propRow, children: [jsxs(NiceButton, { variant: isPlaying ? 'primary' : 'ghost', size: "sm", onClick: () => {
-                                    if (isPlaying) {
-                                        setIsPlaying(false);
-                                    }
-                                    else {
-                                        setPreviewTime(0);
-                                        setIsPlaying(true);
-                                    }
-                                }, disabled: animationCount === 0, children: [jsx(NiceIcon, { name: isPlaying ? 'pause' : 'play', size: 14 }), ' ', isPlaying
-                                        ? t('vectorEditor.timeline.pauseLabel', 'Pause')
-                                        : t('vectorEditor.timeline.playLabel', 'Play')] }), jsxs(NiceButton, { variant: "ghost", size: "sm", onClick: () => {
-                                    setIsPlaying(false);
-                                    setPreviewTime(0);
-                                }, children: [jsx(NiceIcon, { name: "stop", size: 14 }), " ", t('vectorEditor.timeline.stopLabel', 'Stop')] })] }), animationCount > 0 && (jsx("div", { className: styles.propRow, children: jsxs(NiceButton, { variant: "ghost", size: "sm", onClick: () => {
-                                const lines = [];
-                                for (const [shapeId, a] of Object.entries(animations)) {
-                                    const name = `anim-${shapeId}`;
-                                    lines.push(animationToCSSKeyframes(name, a));
-                                    lines.push(animationToCSSRule(`[data-shape="${shapeId}"]`, name, a));
-                                }
-                                const css = lines.join('\n\n');
-                                if (typeof navigator !== 'undefined' && navigator.clipboard) {
-                                    navigator.clipboard.writeText(css).catch(() => { });
-                                }
-                            }, children: [jsx(NiceIcon, { name: "clipboard", size: 14 }), ' ', t('vectorEditor.timeline.copyCssKeyframes', 'Copy CSS keyframes')] }) }))] })] }));
-    const tabs = [
+          )
+        ] })
+      ] }),
+      fillMode === "solid" ? /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.propLabel }),
+        /* @__PURE__ */ jsx("div", { className: styles.propColorSwatch, style: { background: fillCol }, children: /* @__PURE__ */ jsx(
+          NiceColorPicker,
+          {
+            value: fillCol,
+            showInput: false,
+            showRandom: false,
+            onChange: (c) => {
+              setFillCol(c);
+              updateSel({ fill: c });
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          NiceTextInput,
+          {
+            className: styles.propInput,
+            value: selShape?.fill || fillCol,
+            onChange: (val) => {
+              setFillCol(val);
+              updateSel({ fill: val });
+            }
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: styles.propRow, style: { flexWrap: "wrap", gap: 4 }, children: PRESET_GRADIENTS.map((grad, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "button",
+            tabIndex: 0,
+            onKeyDown: clickOnActivationKey,
+            style: {
+              width: 24,
+              height: 24,
+              borderRadius: 4,
+              background: gradientToCSS(grad),
+              cursor: "pointer",
+              border: selectedGradient?.id === grad.id ? "2px solid var(--nice-bg, #FFF)" : "1px solid var(--nice-border-color, #444)"
+            },
+            onClick: () => applyGradient(grad),
+            title: t("vectorEditor.gradient", "{type} gradient").replace(
+              "{type}",
+              String(grad.type)
+            )
+          },
+          i
+        )) }),
+        /* @__PURE__ */ jsx("div", { className: styles.propRow, children: /* @__PURE__ */ jsxs(
+          NiceButton,
+          {
+            className: styles.menuBtn,
+            variant: "ghost",
+            size: "sm",
+            style: { width: "100%", fontSize: 10 },
+            onClick: () => setShowGradientEditor(!showGradientEditor),
+            children: [
+              /* @__PURE__ */ jsx(NiceIcon, { name: showGradientEditor ? "chevron-down" : "chevron-right", size: 14 }),
+              " ",
+              showGradientEditor ? t("vectorEditor.properties.hideEditor", "Hide Editor") : t("vectorEditor.properties.editGradient", "Edit Gradient")
+            ]
+          }
+        ) }),
+        showGradientEditor && selectedGradient && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: 4,
+              background: "var(--nice-bg-secondary, #252525)",
+              borderRadius: 4,
+              margin: "4px 0"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+                /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("vectorEditor.properties.type", "Type") }),
+                /* @__PURE__ */ jsx(
+                  NiceSelect,
+                  {
+                    className: styles.propInput,
+                    value: selectedGradient.type,
+                    onChange: (val) => {
+                      const type = val;
+                      let newGrad;
+                      if (type === "linear") {
+                        newGrad = {
+                          type: "linear",
+                          id: gradientId(),
+                          angle: 0,
+                          stops: selectedGradient.stops
+                        };
+                      } else {
+                        newGrad = {
+                          type: "radial",
+                          id: gradientId(),
+                          cx: 0.5,
+                          cy: 0.5,
+                          r: 0.7,
+                          stops: selectedGradient.stops
+                        };
+                      }
+                      setSelectedGradient(newGrad);
+                      updateSel({ fill: `url(#${newGrad.id})` });
+                    },
+                    options: [
+                      { value: "linear", label: t("vectorEditor.properties.linear", "Linear") },
+                      { value: "radial", label: t("vectorEditor.properties.radial", "Radial") }
+                    ]
+                  }
+                )
+              ] }),
+              selectedGradient.type === "linear" && /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+                /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("vectorEditor.properties.angle", "Angle") }),
+                /* @__PURE__ */ jsx(
+                  NiceSlider,
+                  {
+                    className: styles.propInput,
+                    min: 0,
+                    max: 360,
+                    value: selectedGradient.angle,
+                    onChange: (val) => {
+                      const newGrad = {
+                        ...selectedGradient,
+                        id: gradientId(),
+                        angle: val
+                      };
+                      setSelectedGradient(newGrad);
+                      updateSel({ fill: `url(#${newGrad.id})` });
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { style: { fontSize: 10, minWidth: 28 }, children: [
+                  selectedGradient.angle,
+                  "°"
+                ] })
+              ] }),
+              selectedGradient.type === "radial" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+                  /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("vectorEditor.properties.cx", "CX") }),
+                  /* @__PURE__ */ jsx(
+                    NiceSlider,
+                    {
+                      className: styles.propInput,
+                      min: 0,
+                      max: 100,
+                      value: selectedGradient.cx * 100,
+                      onChange: (val) => {
+                        const newGrad = {
+                          ...selectedGradient,
+                          id: gradientId(),
+                          cx: val / 100
+                        };
+                        setSelectedGradient(newGrad);
+                        updateSel({ fill: `url(#${newGrad.id})` });
+                      }
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+                  /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("vectorEditor.properties.cy", "CY") }),
+                  /* @__PURE__ */ jsx(
+                    NiceSlider,
+                    {
+                      className: styles.propInput,
+                      min: 0,
+                      max: 100,
+                      value: selectedGradient.cy * 100,
+                      onChange: (val) => {
+                        const newGrad = {
+                          ...selectedGradient,
+                          id: gradientId(),
+                          cy: val / 100
+                        };
+                        setSelectedGradient(newGrad);
+                        updateSel({ fill: `url(#${newGrad.id})` });
+                      }
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+                  /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("vectorEditor.properties.r", "R") }),
+                  /* @__PURE__ */ jsx(
+                    NiceSlider,
+                    {
+                      className: styles.propInput,
+                      min: 10,
+                      max: 100,
+                      value: selectedGradient.r * 100,
+                      onChange: (val) => {
+                        const newGrad = {
+                          ...selectedGradient,
+                          id: gradientId(),
+                          r: val / 100
+                        };
+                        setSelectedGradient(newGrad);
+                        updateSel({ fill: `url(#${newGrad.id})` });
+                      }
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: { fontSize: 10, color: "var(--nice-text-secondary, #888)", marginTop: 4 },
+                  children: t("vectorEditor.properties.colorStops", "Color Stops:")
+                }
+              ),
+              selectedGradient.stops.map((stop, i) => /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+                /* @__PURE__ */ jsx(
+                  NiceColorPicker,
+                  {
+                    value: stop.color,
+                    showInput: false,
+                    showRandom: false,
+                    style: { width: 24, height: 20 },
+                    onChange: (color) => {
+                      const newStops = [...selectedGradient.stops];
+                      newStops[i] = { ...newStops[i], color };
+                      const newGrad = { ...selectedGradient, id: gradientId(), stops: newStops };
+                      setSelectedGradient(newGrad);
+                      updateSel({ fill: `url(#${newGrad.id})` });
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  NiceSlider,
+                  {
+                    min: 0,
+                    max: 100,
+                    value: stop.offset * 100,
+                    style: { flex: 1 },
+                    onChange: (val) => {
+                      const newStops = [...selectedGradient.stops];
+                      newStops[i] = { ...newStops[i], offset: val / 100 };
+                      newStops.sort((a, b) => a.offset - b.offset);
+                      const newGrad = { ...selectedGradient, id: gradientId(), stops: newStops };
+                      setSelectedGradient(newGrad);
+                      updateSel({ fill: `url(#${newGrad.id})` });
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { style: { fontSize: 9, minWidth: 24 }, children: [
+                  Math.round(stop.offset * 100),
+                  "%"
+                ] })
+              ] }, i)),
+              /* @__PURE__ */ jsxs("div", { className: styles.propRow, style: { gap: 4 }, children: [
+                /* @__PURE__ */ jsx(
+                  NiceButton,
+                  {
+                    className: styles.menuBtn,
+                    variant: "ghost",
+                    size: "sm",
+                    style: { fontSize: 10, flex: 1 },
+                    onClick: () => {
+                      const newStops = [
+                        ...selectedGradient.stops,
+                        { offset: 0.5, color: "var(--nice-text-secondary, #888888)" }
+                      ];
+                      newStops.sort((a, b) => a.offset - b.offset);
+                      const newGrad = { ...selectedGradient, id: gradientId(), stops: newStops };
+                      setSelectedGradient(newGrad);
+                      updateSel({ fill: `url(#${newGrad.id})` });
+                    },
+                    children: t("vectorEditor.properties.addStop", "+ Add Stop")
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  NiceButton,
+                  {
+                    className: styles.menuBtn,
+                    variant: "ghost",
+                    size: "sm",
+                    style: { fontSize: 10, flex: 1 },
+                    disabled: selectedGradient.stops.length <= 2,
+                    onClick: () => {
+                      if (selectedGradient.stops.length <= 2) {
+                        return;
+                      }
+                      const newStops = selectedGradient.stops.slice(0, -1);
+                      const newGrad = { ...selectedGradient, id: gradientId(), stops: newStops };
+                      setSelectedGradient(newGrad);
+                      updateSel({ fill: `url(#${newGrad.id})` });
+                    },
+                    children: t("vectorEditor.properties.removeStop", "- Remove")
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("vectorEditor.properties.stroke", "Stroke") }),
+        /* @__PURE__ */ jsx("div", { className: styles.propColorSwatch, style: { background: strokeCol }, children: /* @__PURE__ */ jsx(
+          NiceColorPicker,
+          {
+            value: strokeCol,
+            showInput: false,
+            showRandom: false,
+            onChange: (c) => {
+              setStrokeCol(c);
+              updateSel({ stroke: c });
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          NiceTextInput,
+          {
+            className: styles.propInput,
+            value: selShape?.stroke || strokeCol,
+            onChange: (val) => {
+              setStrokeCol(val);
+              updateSel({ stroke: val });
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("vectorEditor.properties.width", "Width") }),
+        /* @__PURE__ */ jsx(
+          NiceNumberInput,
+          {
+            className: styles.propInput,
+            min: 0,
+            max: 100,
+            value: selShape?.strokeWidth ?? strokeW,
+            onChange: (val) => {
+              const v = val ?? 0;
+              setStrokeW(v);
+              updateSel({ strokeWidth: v });
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("vectorEditor.properties.opacity", "Opacity") }),
+        /* @__PURE__ */ jsx(
+          NiceSlider,
+          {
+            className: styles.propInput,
+            min: 0,
+            max: 1,
+            step: 0.01,
+            value: selShape?.opacity ?? shapeOpacity,
+            onChange: (val) => {
+              setShapeOpacity(val);
+              updateSel({ opacity: val });
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { style: { fontSize: 10, minWidth: 28 }, children: [
+          Math.round((selShape?.opacity ?? shapeOpacity) * 100),
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("vectorEditor.properties.rotation", "Rotation") }),
+        /* @__PURE__ */ jsx(
+          NiceNumberInput,
+          {
+            className: styles.propInput,
+            min: -360,
+            max: 360,
+            value: selShape?.rotation ?? 0,
+            onChange: (val) => updateSel({ rotation: val ?? 0 })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { style: { fontSize: 10 }, children: "°" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: styles.panelSection, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.panelTitle, children: /* @__PURE__ */ jsx("span", { children: t("vectorEditor.properties.toolOptions", "Tool Options") }) }),
+      (tool === "roundrect" || selShape?.type === "roundrect") && /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("vectorEditor.properties.radius", "Radius") }),
+        /* @__PURE__ */ jsx(
+          NiceNumberInput,
+          {
+            className: styles.propInput,
+            min: 0,
+            max: 200,
+            value: selShape?.rx ?? cornerRadius,
+            onChange: (val) => {
+              const v = val ?? 0;
+              setCornerRadius(v);
+              updateSel({ rx: v });
+            }
+          }
+        )
+      ] }),
+      (tool === "polygon" || selShape?.type === "polygon") && /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("vectorEditor.properties.sides", "Sides") }),
+        /* @__PURE__ */ jsx(
+          NiceNumberInput,
+          {
+            className: styles.propInput,
+            min: 3,
+            max: 32,
+            value: selShape?.sides ?? polygonSides,
+            onChange: (val) => {
+              const v = val ?? 3;
+              setPolygonSides(v);
+              updateSel({ sides: v });
+            }
+          }
+        )
+      ] }),
+      (tool === "star" || selShape?.type === "star") && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("vectorEditor.properties.points", "Points") }),
+          /* @__PURE__ */ jsx(
+            NiceNumberInput,
+            {
+              className: styles.propInput,
+              min: 3,
+              max: 32,
+              value: selShape?.sides ?? starPoints2,
+              onChange: (val) => {
+                const v = val ?? 3;
+                setStarPoints2(v);
+                updateSel({ sides: v });
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("vectorEditor.properties.innerR", "Inner R") }),
+          /* @__PURE__ */ jsx(
+            NiceSlider,
+            {
+              className: styles.propInput,
+              min: 0.1,
+              max: 0.9,
+              step: 0.05,
+              value: selShape?.innerRadius ?? starInnerRatio,
+              onChange: (val) => {
+                setStarInnerRatio(val);
+                updateSel({ innerRadius: val });
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { style: { fontSize: 10 }, children: [
+            Math.round((selShape?.innerRadius ?? starInnerRatio) * 100),
+            "%"
+          ] })
+        ] })
+      ] }),
+      (tool === "text" || selShape?.type === "text") && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("vectorEditor.properties.size", "Size") }),
+          /* @__PURE__ */ jsx(
+            NiceNumberInput,
+            {
+              className: styles.propInput,
+              min: 8,
+              max: 200,
+              value: selShape?.fontSize ?? fontSize,
+              onChange: (val) => {
+                const v = val ?? 12;
+                setFontSize(v);
+                updateSel({ fontSize: v });
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("vectorEditor.properties.font", "Font") }),
+          /* @__PURE__ */ jsx(
+            NiceSelect,
+            {
+              className: styles.propInput,
+              value: selShape?.fontFamily ?? fontFamily,
+              onChange: (val) => {
+                setFontFamily(val);
+                updateSel({ fontFamily: val });
+              },
+              options: FONTS.map((f) => ({ value: f, label: f }))
+            }
+          )
+        ] })
+      ] }),
+      snapGrid && /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("vectorEditor.properties.grid", "Grid") }),
+        /* @__PURE__ */ jsx(
+          NiceNumberInput,
+          {
+            className: styles.propInput,
+            min: 4,
+            max: 128,
+            value: gridSize,
+            onChange: (val) => setGridSize(val ?? 8)
+          }
+        )
+      ] })
+    ] }),
+    selShape && /* @__PURE__ */ jsxs("div", { className: styles.panelSection, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.panelTitle, children: /* @__PURE__ */ jsx("span", { children: t("vectorEditor.properties.transform", "Transform") }) }),
+      /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("vectorEditor.properties.x", "X") }),
+        /* @__PURE__ */ jsx(
+          NiceNumberInput,
+          {
+            className: styles.propInput,
+            value: Math.round(selShape.x),
+            onChange: (val) => updateSel({ x: val ?? 0 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("vectorEditor.properties.y", "Y") }),
+        /* @__PURE__ */ jsx(
+          NiceNumberInput,
+          {
+            className: styles.propInput,
+            value: Math.round(selShape.y),
+            onChange: (val) => updateSel({ y: val ?? 0 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("vectorEditor.properties.w", "W") }),
+        /* @__PURE__ */ jsx(
+          NiceNumberInput,
+          {
+            className: styles.propInput,
+            value: Math.round(selShape.w),
+            onChange: (val) => updateSel({ w: val ?? 0 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("vectorEditor.properties.h", "H") }),
+        /* @__PURE__ */ jsx(
+          NiceNumberInput,
+          {
+            className: styles.propInput,
+            value: Math.round(selShape.h),
+            onChange: (val) => updateSel({ h: val ?? 0 })
+          }
+        )
+      ] })
+    ] })
+  ] });
+  const insertIcon = (Icon, badge) => {
+    if (badge) {
+      const box = Math.round(Math.min(artW, artH) * 0.42);
+      const made = iconComponentToShapes(Icon, { artW: box, artH: box, margin: 4 });
+      if (made.length === 0) {
+        return;
+      }
+      const dx = artW - box;
+      const offset = made.map((s) => ({
+        ...s,
+        x: s.x + dx,
+        ...s.x2 != null ? { x2: s.x2 + dx } : {},
+        ...s.points ? { points: s.points.map((p) => ({ ...p, x: p.x + dx })) } : {}
+      }));
+      const next2 = [...shapes, ...offset];
+      setShapes(next2);
+      snap(next2);
+      if (offset[0]?.id) {
+        setSelId(offset[0].id);
+      }
+      setTool("pointer");
+      return;
+    }
+    const inserted = iconComponentToShapes(Icon, { artW, artH });
+    if (inserted.length === 0) {
+      return;
+    }
+    const next = [...shapes, ...inserted];
+    setShapes(next);
+    snap(next);
+    if (inserted[0]?.id) {
+      setSelId(inserted[0].id);
+    }
+    setTool("pointer");
+  };
+  const reorderShape = (id, dir) => {
+    const idx = shapes.findIndex((s) => s.id === id);
+    if (idx < 0) {
+      return;
+    }
+    const next = shapes.slice();
+    const target = idx + dir;
+    if (target < 0 || target >= next.length) {
+      return;
+    }
+    [next[idx], next[target]] = [next[target], next[idx]];
+    setShapes(next);
+    snap(next);
+  };
+  const layersContent = /* @__PURE__ */ jsx("div", { className: styles.rightPanelTabBody, children: /* @__PURE__ */ jsxs("div", { className: styles.panelSection, children: [
+    /* @__PURE__ */ jsx("div", { className: styles.panelTitle, children: /* @__PURE__ */ jsxs("span", { children: [
+      t("vectorEditor.layers.title", "Layers"),
+      " (",
+      shapes.length,
+      ")"
+    ] }) }),
+    [...shapes].reverse().map((s, revIdx) => {
+      const realIdx = shapes.length - 1 - revIdx;
+      const active = s.id === selId;
+      return /* @__PURE__ */ jsxs(
+        "div",
         {
-            id: 'properties',
-            label: t('vectorEditor.tabs.properties', 'Properties'),
-            content: propertiesContent,
+          role: "button",
+          tabIndex: 0,
+          onKeyDown: clickOnActivationKey,
+          className: `${styles.layerRow} ${active ? styles.layerRowActive : ""} ${s.locked ? styles.layerRowLocked : ""}`,
+          onClick: () => {
+            setSelId(s.id);
+            setTool("pointer");
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: styles.layerIconBtn,
+                title: s.hidden ? t("vectorEditor.layers.show", "Show") : t("vectorEditor.layers.hide", "Hide"),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  const next = shapes.map((x) => x.id === s.id ? { ...x, hidden: !x.hidden } : x);
+                  setShapes(next);
+                  snap(next);
+                },
+                children: /* @__PURE__ */ jsx(NiceIcon, { name: s.hidden ? "eye-off" : "eye", size: 14 })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: styles.layerIconBtn,
+                title: s.locked ? t("vectorEditor.layers.unlock", "Unlock") : t("vectorEditor.layers.lock", "Lock"),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  const next = shapes.map((x) => x.id === s.id ? { ...x, locked: !x.locked } : x);
+                  setShapes(next);
+                  snap(next);
+                },
+                children: /* @__PURE__ */ jsx(NiceIcon, { name: "lock", size: 14, style: { opacity: s.locked ? 1 : 0.4 } })
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: styles.shapeIcon, children: /* @__PURE__ */ jsx(
+              NiceIcon,
+              {
+                name: s.type === "rect" || s.type === "roundrect" ? "square" : s.type === "ellipse" ? "circle" : s.type === "line" ? "line" : s.type === "arrow" ? "arrow-right" : s.type === "polygon" ? "hexagon" : s.type === "star" ? "star" : s.type === "polyline" ? "pen" : s.type === "path" ? "wand" : "type",
+                size: 14
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                className: styles.layerNameInput,
+                value: s.name ?? s.type,
+                disabled: s.locked,
+                onClick: (e) => e.stopPropagation(),
+                onChange: (e) => {
+                  const v = e.target.value;
+                  const next = shapes.map((x) => x.id === s.id ? { ...x, name: v } : x);
+                  setShapes(next);
+                },
+                onBlur: () => snap(shapes)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: styles.layerIconBtn,
+                title: t("vectorEditor.layers.moveUp", "Move up"),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  reorderShape(s.id, 1);
+                },
+                disabled: realIdx === shapes.length - 1,
+                children: /* @__PURE__ */ jsx(NiceIcon, { name: "arrow-up", size: 14 })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: styles.layerIconBtn,
+                title: t("vectorEditor.layers.moveDown", "Move down"),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  reorderShape(s.id, -1);
+                },
+                disabled: realIdx === 0,
+                children: /* @__PURE__ */ jsx(NiceIcon, { name: "arrow-down", size: 14 })
+              }
+            )
+          ]
         },
+        s.id
+      );
+    }),
+    shapes.length === 0 && /* @__PURE__ */ jsx("div", { style: { color: "var(--nice-text-secondary)", fontSize: 11, padding: 4 }, children: t(
+      "vectorEditor.layers.empty",
+      "No layers yet. Use the tools to draw, or insert from the Library tab."
+    ) })
+  ] }) });
+  const libraryContent = /* @__PURE__ */ jsx("div", { className: styles.rightPanelTabBody, children: library && library.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: styles.propRow, style: { padding: "4px 0" }, children: /* @__PURE__ */ jsxs(
+      NiceButton,
+      {
+        className: `${styles.menuBtn} ${asBadge ? styles.menuBtnActive : ""}`,
+        variant: asBadge ? "primary" : "ghost",
+        size: "sm",
+        style: { width: "100%", fontSize: 11 },
+        onClick: () => setAsBadge((v) => !v),
+        "aria-pressed": asBadge,
+        children: [
+          asBadge && /* @__PURE__ */ jsx(NiceIcon, { name: "plus", size: 14 }),
+          " ",
+          asBadge ? t("vectorEditor.library.insertAsBadgeOn", "Inserting as corner badge") : t("vectorEditor.library.insertAsBadge", "Insert as corner badge")
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: styles.libraryGrid, children: library.map((entry) => {
+      const Icon = entry.Component;
+      return /* @__PURE__ */ jsxs(
+        "button",
         {
-            id: 'layers',
-            label: `${t('vectorEditor.tabs.layers', 'Layers')} (${shapes.length})`,
-            content: layersContent,
+          type: "button",
+          className: styles.libraryCell,
+          title: entry.name,
+          onClick: () => insertIcon(Icon, asBadge),
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  width: 28,
+                  height: 28,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
+                children: /* @__PURE__ */ jsx(Icon, { size: "md" })
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { children: entry.name })
+          ]
         },
-        { id: 'library', label: t('vectorEditor.tabs.library', 'Library'), content: libraryContent },
+        entry.name
+      );
+    }) })
+  ] }) : /* @__PURE__ */ jsx("div", { style: { color: "var(--nice-text-secondary)", fontSize: 11, padding: 12 }, children: t(
+    "vectorEditor.library.passProp",
+    "Pass a library prop to NiceVectorEditor to populate this tab with insertable icons."
+  ) }) });
+  const selAnim = selId ? animations[selId] : void 0;
+  const animationCount = Object.keys(animations).length;
+  const timelineContent = /* @__PURE__ */ jsxs("div", { className: styles.rightPanelTabBody, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.panelSection, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.panelTitle, children: /* @__PURE__ */ jsx("span", { children: t("vectorEditor.timeline.animationTitle", "Animation") }) }),
+      !selId ? /* @__PURE__ */ jsx("div", { style: { color: "var(--nice-text-secondary)", fontSize: 11, padding: 4 }, children: t("vectorEditor.timeline.attachHint", "Select a shape to attach an animation.") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("vectorEditor.timeline.preset", "Preset") }),
+          /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 4 }, children: Object.keys(ANIMATION_PRESETS).map((key) => /* @__PURE__ */ jsx(
+            NiceButton,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: () => setShapeAnimation(selId, ANIMATION_PRESETS[key]),
+              children: key
+            },
+            key
+          )) })
+        ] }),
+        selAnim && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+            /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("vectorEditor.timeline.duration", "Duration (ms)") }),
+            /* @__PURE__ */ jsx(
+              NiceNumberInput,
+              {
+                value: selAnim.duration,
+                min: 100,
+                max: 1e4,
+                step: 100,
+                onChange: (v) => setShapeAnimation(selId, {
+                  ...selAnim,
+                  duration: Number(v) || selAnim.duration
+                })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+            /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("vectorEditor.timeline.repeat", "Repeat") }),
+            /* @__PURE__ */ jsx(
+              NiceSelect,
+              {
+                value: selAnim.repeat === "infinite" ? "infinite" : String(selAnim.repeat),
+                onChange: (v) => setShapeAnimation(selId, {
+                  ...selAnim,
+                  repeat: v === "infinite" ? "infinite" : Number(v)
+                }),
+                options: [
+                  { value: "infinite", label: "infinite" },
+                  { value: "1", label: "1x" },
+                  { value: "2", label: "2x" },
+                  { value: "3", label: "3x" },
+                  { value: "5", label: "5x" }
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+            /* @__PURE__ */ jsx("span", { className: styles.propLabel, children: t("vectorEditor.timeline.direction", "Direction") }),
+            /* @__PURE__ */ jsx(
+              NiceSelect,
+              {
+                value: selAnim.direction,
+                onChange: (v) => setShapeAnimation(selId, {
+                  ...selAnim,
+                  direction: v
+                }),
+                options: [
+                  { value: "normal", label: "normal" },
+                  { value: "alternate", label: "alternate" }
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: styles.propRow, children: /* @__PURE__ */ jsx(
+            NiceButton,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: () => setShapeAnimation(selId, null),
+              children: t("vectorEditor.timeline.remove", "Remove animation")
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: styles.panelTitle, style: { marginTop: 8 }, children: /* @__PURE__ */ jsx("span", { children: t("vectorEditor.timeline.keyframes", "Keyframes") }) }),
+          selAnim.keyframes.map((k, i) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: styles.propRow,
+              style: { flexDirection: "column", alignItems: "stretch", gap: 2 },
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+                  /* @__PURE__ */ jsx("span", { className: styles.propLabel, style: { minWidth: 24 }, children: t("vectorEditor.timeline.tLabel", "t") }),
+                  /* @__PURE__ */ jsx(
+                    NiceSlider,
+                    {
+                      value: k.t,
+                      min: 0,
+                      max: 1,
+                      step: 0.01,
+                      onChange: (v) => {
+                        const nextKfs = selAnim.keyframes.map(
+                          (kf, j) => j === i ? { ...kf, t: Number(v) } : kf
+                        );
+                        nextKfs.sort((a, b) => a.t - b.t);
+                        setShapeAnimation(selId, { ...selAnim, keyframes: nextKfs });
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    NiceButton,
+                    {
+                      variant: "ghost",
+                      size: "sm",
+                      disabled: selAnim.keyframes.length <= 2,
+                      onClick: () => {
+                        const nextKfs = selAnim.keyframes.filter((_, j) => j !== i);
+                        setShapeAnimation(selId, { ...selAnim, keyframes: nextKfs });
+                      },
+                      "aria-label": t("vectorEditor.timeline.removeKeyframe", "Remove keyframe"),
+                      children: /* @__PURE__ */ jsx(NiceIcon, { name: "trash", size: 14 })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 2 }, children: ["rotate", "scale", "translateX", "translateY", "opacity"].map(
+                  (field) => /* @__PURE__ */ jsx(
+                    NiceNumberInput,
+                    {
+                      value: k[field] ?? 0,
+                      step: field === "scale" || field === "opacity" ? 0.1 : 1,
+                      placeholder: field[0].toUpperCase(),
+                      onChange: (v) => {
+                        const num = v == null ? void 0 : Number(v);
+                        const nextKfs = selAnim.keyframes.map(
+                          (kf, j) => j === i ? { ...kf, [field]: num } : kf
+                        );
+                        setShapeAnimation(selId, { ...selAnim, keyframes: nextKfs });
+                      }
+                    },
+                    field
+                  )
+                ) })
+              ]
+            },
+            i
+          )),
+          /* @__PURE__ */ jsx("div", { className: styles.propRow, children: /* @__PURE__ */ jsx(
+            NiceButton,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: () => {
+                const last = selAnim.keyframes[selAnim.keyframes.length - 1];
+                const prev = selAnim.keyframes[selAnim.keyframes.length - 2];
+                const newT = prev ? (prev.t + last.t) / 2 : Math.min(1, last.t + 0.1);
+                const nextKfs = [...selAnim.keyframes, { ...last, t: newT }].sort(
+                  (a, b) => a.t - b.t
+                );
+                setShapeAnimation(selId, { ...selAnim, keyframes: nextKfs });
+              },
+              children: t("vectorEditor.timeline.addKeyframe", "+ Add keyframe")
+            }
+          ) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: styles.panelSection, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.panelTitle, children: /* @__PURE__ */ jsx("span", { children: t("vectorEditor.timeline.playbackTitle", "Playback") }) }),
+      /* @__PURE__ */ jsxs("div", { className: styles.propRow, children: [
+        /* @__PURE__ */ jsxs(
+          NiceButton,
+          {
+            variant: isPlaying ? "primary" : "ghost",
+            size: "sm",
+            onClick: () => {
+              if (isPlaying) {
+                setIsPlaying(false);
+              } else {
+                setPreviewTime(0);
+                setIsPlaying(true);
+              }
+            },
+            disabled: animationCount === 0,
+            children: [
+              /* @__PURE__ */ jsx(NiceIcon, { name: isPlaying ? "pause" : "play", size: 14 }),
+              " ",
+              isPlaying ? t("vectorEditor.timeline.pauseLabel", "Pause") : t("vectorEditor.timeline.playLabel", "Play")
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          NiceButton,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: () => {
+              setIsPlaying(false);
+              setPreviewTime(0);
+            },
+            children: [
+              /* @__PURE__ */ jsx(NiceIcon, { name: "stop", size: 14 }),
+              " ",
+              t("vectorEditor.timeline.stopLabel", "Stop")
+            ]
+          }
+        )
+      ] }),
+      animationCount > 0 && /* @__PURE__ */ jsx("div", { className: styles.propRow, children: /* @__PURE__ */ jsxs(
+        NiceButton,
         {
-            id: 'timeline',
-            label: `${t('vectorEditor.tabs.timeline', 'Timeline')}${animationCount ? ` (${animationCount})` : ''}`,
-            content: timelineContent,
-        },
-    ];
-    return (jsx("div", { className: styles.rightPanel, children: jsx(NiceTabs, { tabs: tabs, size: "sm" }) }));
+          variant: "ghost",
+          size: "sm",
+          onClick: () => {
+            const lines = [];
+            for (const [shapeId, a] of Object.entries(animations)) {
+              const name = `anim-${shapeId}`;
+              lines.push(animationToCSSKeyframes(name, a));
+              lines.push(animationToCSSRule(`[data-shape="${shapeId}"]`, name, a));
+            }
+            const css = lines.join("\n\n");
+            if (typeof navigator !== "undefined" && navigator.clipboard) {
+              navigator.clipboard.writeText(css).catch(() => {
+              });
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "clipboard", size: 14 }),
+            " ",
+            t("vectorEditor.timeline.copyCssKeyframes", "Copy CSS keyframes")
+          ]
+        }
+      ) })
+    ] })
+  ] });
+  const tabs = [
+    {
+      id: "properties",
+      label: t("vectorEditor.tabs.properties", "Properties"),
+      content: propertiesContent
+    },
+    {
+      id: "layers",
+      label: `${t("vectorEditor.tabs.layers", "Layers")} (${shapes.length})`,
+      content: layersContent
+    },
+    { id: "library", label: t("vectorEditor.tabs.library", "Library"), content: libraryContent },
+    {
+      id: "timeline",
+      label: `${t("vectorEditor.tabs.timeline", "Timeline")}${animationCount ? ` (${animationCount})` : ""}`,
+      content: timelineContent
+    }
+  ];
+  return /* @__PURE__ */ jsx("div", { className: styles.rightPanel, children: /* @__PURE__ */ jsx(NiceTabs, { tabs, size: "sm" }) });
+};
+const VectorEditorRightPanel = React.memo(VectorEditorRightPanel$1);
+export {
+  VectorEditorRightPanel as default
 };
-var VectorEditorRightPanel = React.memo(VectorEditorRightPanel$1);
-
-export { VectorEditorRightPanel as default };