ssovee-os-web-ui 0.1.106 → 0.1.107
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.cjs +111 -96
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +40 -25
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var React24 = require('react');
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
5
|
var react = require('@phosphor-icons/react');
|
|
6
6
|
var Editor = require('@monaco-editor/react');
|
|
@@ -28,7 +28,7 @@ function _interopNamespace(e) {
|
|
|
28
28
|
return Object.freeze(n);
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
var
|
|
31
|
+
var React24__namespace = /*#__PURE__*/_interopNamespace(React24);
|
|
32
32
|
var Editor__default = /*#__PURE__*/_interopDefault(Editor);
|
|
33
33
|
var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
|
|
34
34
|
|
|
@@ -38,7 +38,7 @@ var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
|
|
|
38
38
|
function cn(...inputs) {
|
|
39
39
|
return inputs.filter(Boolean).join(" ");
|
|
40
40
|
}
|
|
41
|
-
var Button =
|
|
41
|
+
var Button = React24__namespace.default.forwardRef(
|
|
42
42
|
({
|
|
43
43
|
className,
|
|
44
44
|
variant = "primary",
|
|
@@ -174,7 +174,7 @@ var Typography = ({
|
|
|
174
174
|
return /* @__PURE__ */ jsxRuntime.jsx(Component, { className: classes, children });
|
|
175
175
|
};
|
|
176
176
|
var Typography_default = Typography;
|
|
177
|
-
var Input =
|
|
177
|
+
var Input = React24__namespace.default.forwardRef(
|
|
178
178
|
({
|
|
179
179
|
className,
|
|
180
180
|
variant = "default",
|
|
@@ -252,7 +252,7 @@ var Input = React23__namespace.default.forwardRef(
|
|
|
252
252
|
);
|
|
253
253
|
Input.displayName = "Input";
|
|
254
254
|
var Input_default = Input;
|
|
255
|
-
var TextArea =
|
|
255
|
+
var TextArea = React24__namespace.default.forwardRef(
|
|
256
256
|
({
|
|
257
257
|
className,
|
|
258
258
|
variant = "default",
|
|
@@ -318,7 +318,7 @@ var CodeEditor = ({
|
|
|
318
318
|
className,
|
|
319
319
|
isDarkTheme
|
|
320
320
|
}) => {
|
|
321
|
-
const editorTheme =
|
|
321
|
+
const editorTheme = React24.useMemo(() => {
|
|
322
322
|
if (typeof isDarkTheme === "undefined") return "light";
|
|
323
323
|
const isDark = Boolean(isDarkTheme);
|
|
324
324
|
return isDark ? "vs-dark" : "light";
|
|
@@ -337,7 +337,7 @@ var CodeEditor = ({
|
|
|
337
337
|
};
|
|
338
338
|
var CodeEditor_default = CodeEditor;
|
|
339
339
|
var RichEditor = ({ content, onChange, isDarkTheme }) => {
|
|
340
|
-
const onChangeRef =
|
|
340
|
+
const onChangeRef = React24.useRef(onChange);
|
|
341
341
|
onChangeRef.current = onChange;
|
|
342
342
|
const editorTheme = isDarkTheme ? "vs-dark" : "light";
|
|
343
343
|
const editor = react$1.useEditor({
|
|
@@ -348,7 +348,7 @@ var RichEditor = ({ content, onChange, isDarkTheme }) => {
|
|
|
348
348
|
onChangeRef.current(updatedEditor.getHTML());
|
|
349
349
|
}
|
|
350
350
|
}, []);
|
|
351
|
-
|
|
351
|
+
React24.useEffect(() => {
|
|
352
352
|
if (editor && content !== editor.getHTML()) {
|
|
353
353
|
editor.commands.setContent(content, { emitUpdate: false });
|
|
354
354
|
}
|
|
@@ -391,7 +391,7 @@ var RichEditor = ({ content, onChange, isDarkTheme }) => {
|
|
|
391
391
|
] });
|
|
392
392
|
};
|
|
393
393
|
var RichEditor_default = RichEditor;
|
|
394
|
-
var Select =
|
|
394
|
+
var Select = React24__namespace.default.forwardRef(
|
|
395
395
|
({
|
|
396
396
|
className,
|
|
397
397
|
options,
|
|
@@ -471,7 +471,7 @@ var Select = React23__namespace.default.forwardRef(
|
|
|
471
471
|
);
|
|
472
472
|
Select.displayName = "Select";
|
|
473
473
|
var Select_default = Select;
|
|
474
|
-
var Checkbox =
|
|
474
|
+
var Checkbox = React24__namespace.default.forwardRef(
|
|
475
475
|
({
|
|
476
476
|
className,
|
|
477
477
|
variant = "default",
|
|
@@ -546,7 +546,7 @@ var Checkbox = React23__namespace.default.forwardRef(
|
|
|
546
546
|
);
|
|
547
547
|
Checkbox.displayName = "Checkbox";
|
|
548
548
|
var Checkbox_default = Checkbox;
|
|
549
|
-
var Toggle =
|
|
549
|
+
var Toggle = React24__namespace.default.forwardRef(
|
|
550
550
|
({
|
|
551
551
|
checked,
|
|
552
552
|
onChange,
|
|
@@ -652,10 +652,10 @@ var Dropdown = ({
|
|
|
652
652
|
className,
|
|
653
653
|
trigger
|
|
654
654
|
}) => {
|
|
655
|
-
const [isOpen, setIsOpen] =
|
|
656
|
-
const dropdownRef =
|
|
655
|
+
const [isOpen, setIsOpen] = React24.useState(false);
|
|
656
|
+
const dropdownRef = React24.useRef(null);
|
|
657
657
|
const selectedOption = options.find((option) => option.value === value);
|
|
658
|
-
|
|
658
|
+
React24.useEffect(() => {
|
|
659
659
|
const handleClickOutside = (event) => {
|
|
660
660
|
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
|
661
661
|
setIsOpen(false);
|
|
@@ -782,9 +782,9 @@ var ImageWithPlaceholder = ({
|
|
|
782
782
|
};
|
|
783
783
|
const resolvedSrc = resolveSrc(src);
|
|
784
784
|
const initialSrc = isValidSrc(resolvedSrc) ? resolvedSrc : fallbackSrc;
|
|
785
|
-
const [imgSrc, setImgSrc] =
|
|
786
|
-
const [hasError, setHasError] =
|
|
787
|
-
|
|
785
|
+
const [imgSrc, setImgSrc] = React24.useState(initialSrc);
|
|
786
|
+
const [hasError, setHasError] = React24.useState(!isValidSrc(resolvedSrc));
|
|
787
|
+
React24.useEffect(() => {
|
|
788
788
|
const nextResolvedSrc = resolveSrc(src);
|
|
789
789
|
if (isValidSrc(nextResolvedSrc)) {
|
|
790
790
|
setImgSrc(nextResolvedSrc);
|
|
@@ -993,8 +993,8 @@ var Toast = ({
|
|
|
993
993
|
showCloseButton = true,
|
|
994
994
|
className
|
|
995
995
|
}) => {
|
|
996
|
-
const [isShowing, setIsShowing] =
|
|
997
|
-
|
|
996
|
+
const [isShowing, setIsShowing] = React24.useState(false);
|
|
997
|
+
React24.useEffect(() => {
|
|
998
998
|
if (isVisible) {
|
|
999
999
|
setIsShowing(true);
|
|
1000
1000
|
let timer = null;
|
|
@@ -1218,7 +1218,7 @@ var Modal = ({
|
|
|
1218
1218
|
closeOnEscape = true,
|
|
1219
1219
|
className
|
|
1220
1220
|
}) => {
|
|
1221
|
-
|
|
1221
|
+
React24.useEffect(() => {
|
|
1222
1222
|
if (!isOpen) return;
|
|
1223
1223
|
const handleEscape = (e) => {
|
|
1224
1224
|
if (e.key === "Escape" && closeOnEscape) {
|
|
@@ -1285,7 +1285,7 @@ var Modal = ({
|
|
|
1285
1285
|
);
|
|
1286
1286
|
};
|
|
1287
1287
|
var Modal_default = Modal;
|
|
1288
|
-
var Card =
|
|
1288
|
+
var Card = React24__namespace.default.forwardRef(
|
|
1289
1289
|
({
|
|
1290
1290
|
className,
|
|
1291
1291
|
variant = "default",
|
|
@@ -1323,7 +1323,7 @@ var Card = React23__namespace.default.forwardRef(
|
|
|
1323
1323
|
);
|
|
1324
1324
|
Card.displayName = "Card";
|
|
1325
1325
|
var Card_default = Card;
|
|
1326
|
-
var Badge =
|
|
1326
|
+
var Badge = React24__namespace.default.forwardRef(
|
|
1327
1327
|
({
|
|
1328
1328
|
className,
|
|
1329
1329
|
variant = "default",
|
|
@@ -1378,7 +1378,7 @@ var Avatar = ({
|
|
|
1378
1378
|
className,
|
|
1379
1379
|
onClick
|
|
1380
1380
|
}) => {
|
|
1381
|
-
const [imgError, setImgError] =
|
|
1381
|
+
const [imgError, setImgError] = React24.useState(false);
|
|
1382
1382
|
const sizeClasses = {
|
|
1383
1383
|
sm: "w-8 h-8 text-xs",
|
|
1384
1384
|
md: "w-10 h-10 text-sm",
|
|
@@ -1401,7 +1401,7 @@ var Avatar = ({
|
|
|
1401
1401
|
}
|
|
1402
1402
|
) }) });
|
|
1403
1403
|
};
|
|
1404
|
-
const handleImgError =
|
|
1404
|
+
const handleImgError = React24.useCallback(() => {
|
|
1405
1405
|
setImgError(true);
|
|
1406
1406
|
}, []);
|
|
1407
1407
|
const isSrcAvailable = typeof src === "string" && src.trim() !== "";
|
|
@@ -1473,8 +1473,8 @@ var Tooltip = ({
|
|
|
1473
1473
|
delay = 200,
|
|
1474
1474
|
className
|
|
1475
1475
|
}) => {
|
|
1476
|
-
const [isVisible, setIsVisible] =
|
|
1477
|
-
const [timeoutId, setTimeoutId] =
|
|
1476
|
+
const [isVisible, setIsVisible] = React24.useState(false);
|
|
1477
|
+
const [timeoutId, setTimeoutId] = React24.useState(null);
|
|
1478
1478
|
const showTooltip = () => {
|
|
1479
1479
|
const id = setTimeout(() => setIsVisible(true), delay);
|
|
1480
1480
|
setTimeoutId(id);
|
|
@@ -1604,14 +1604,14 @@ var matchShortcut = (event, shortcut, os) => {
|
|
|
1604
1604
|
var useShortcutFormatter = ({
|
|
1605
1605
|
globalKeyboardShortcuts: globalKeyboardShortcuts2 = []
|
|
1606
1606
|
} = {}) => {
|
|
1607
|
-
const [os, setOS] =
|
|
1608
|
-
const listenersRef =
|
|
1607
|
+
const [os, setOS] = React24.useState("windows");
|
|
1608
|
+
const listenersRef = React24.useRef(
|
|
1609
1609
|
/* @__PURE__ */ new Map()
|
|
1610
1610
|
);
|
|
1611
|
-
|
|
1611
|
+
React24.useEffect(() => {
|
|
1612
1612
|
setOS(detectOS());
|
|
1613
1613
|
}, []);
|
|
1614
|
-
|
|
1614
|
+
React24.useEffect(() => {
|
|
1615
1615
|
if (!globalKeyboardShortcuts2.length) return;
|
|
1616
1616
|
const handleKeyDown = (event) => {
|
|
1617
1617
|
for (const shortcut of globalKeyboardShortcuts2) {
|
|
@@ -1629,21 +1629,21 @@ var useShortcutFormatter = ({
|
|
|
1629
1629
|
window.removeEventListener("keydown", handleKeyDown);
|
|
1630
1630
|
};
|
|
1631
1631
|
}, [os, globalKeyboardShortcuts2]);
|
|
1632
|
-
const formatKeys =
|
|
1632
|
+
const formatKeys = React24.useCallback(
|
|
1633
1633
|
(keys = []) => {
|
|
1634
1634
|
const separator = os === "mac" ? "" : " + ";
|
|
1635
1635
|
return keys.map((key) => keyMap[os][key.toLowerCase()] || key.toUpperCase()).join(separator);
|
|
1636
1636
|
},
|
|
1637
1637
|
[os]
|
|
1638
1638
|
);
|
|
1639
|
-
const getShortcutByCommand =
|
|
1639
|
+
const getShortcutByCommand = React24.useCallback(
|
|
1640
1640
|
(command) => {
|
|
1641
1641
|
const found = globalKeyboardShortcuts2.find((s) => s.command === command);
|
|
1642
1642
|
return found ? found.shortcut : [];
|
|
1643
1643
|
},
|
|
1644
1644
|
[globalKeyboardShortcuts2]
|
|
1645
1645
|
);
|
|
1646
|
-
const addShortcutListener =
|
|
1646
|
+
const addShortcutListener = React24.useCallback(
|
|
1647
1647
|
(command, listener) => {
|
|
1648
1648
|
if (!listenersRef.current.has(command)) {
|
|
1649
1649
|
listenersRef.current.set(command, /* @__PURE__ */ new Set());
|
|
@@ -1652,7 +1652,7 @@ var useShortcutFormatter = ({
|
|
|
1652
1652
|
},
|
|
1653
1653
|
[]
|
|
1654
1654
|
);
|
|
1655
|
-
const removeShortcutListener =
|
|
1655
|
+
const removeShortcutListener = React24.useCallback(
|
|
1656
1656
|
(command, listener) => {
|
|
1657
1657
|
if (listenersRef.current.has(command)) {
|
|
1658
1658
|
listenersRef.current.get(command).delete(listener);
|
|
@@ -1692,7 +1692,7 @@ var globalKeyboardShortcuts = [
|
|
|
1692
1692
|
usage: "Focus on current app search"
|
|
1693
1693
|
}
|
|
1694
1694
|
];
|
|
1695
|
-
var SearchInput =
|
|
1695
|
+
var SearchInput = React24__namespace.default.forwardRef(
|
|
1696
1696
|
({
|
|
1697
1697
|
onSearch,
|
|
1698
1698
|
placeholder = "Search...",
|
|
@@ -1707,16 +1707,16 @@ var SearchInput = React23__namespace.default.forwardRef(
|
|
|
1707
1707
|
isActive = true,
|
|
1708
1708
|
...props
|
|
1709
1709
|
}, ref) => {
|
|
1710
|
-
const [searchValue, setSearchValue] =
|
|
1711
|
-
const inputRef =
|
|
1712
|
-
|
|
1710
|
+
const [searchValue, setSearchValue] = React24__namespace.default.useState(value || "");
|
|
1711
|
+
const inputRef = React24.useRef(null);
|
|
1712
|
+
React24.useImperativeHandle(ref, () => inputRef.current);
|
|
1713
1713
|
const {
|
|
1714
1714
|
addShortcutListener,
|
|
1715
1715
|
removeShortcutListener,
|
|
1716
1716
|
formatKeys,
|
|
1717
1717
|
getShortcutByCommand
|
|
1718
1718
|
} = useShortcutFormatter_default({ globalKeyboardShortcuts });
|
|
1719
|
-
|
|
1719
|
+
React24.useEffect(() => {
|
|
1720
1720
|
setSearchValue(value ?? "");
|
|
1721
1721
|
}, [value]);
|
|
1722
1722
|
const handleChange = (e) => {
|
|
@@ -1725,7 +1725,7 @@ var SearchInput = React23__namespace.default.forwardRef(
|
|
|
1725
1725
|
onChange?.(e);
|
|
1726
1726
|
onSearch?.(newValue);
|
|
1727
1727
|
};
|
|
1728
|
-
const handleClear =
|
|
1728
|
+
const handleClear = React24.useCallback(() => {
|
|
1729
1729
|
setSearchValue("");
|
|
1730
1730
|
onSearch?.("");
|
|
1731
1731
|
const syntheticEvent = {
|
|
@@ -1733,7 +1733,7 @@ var SearchInput = React23__namespace.default.forwardRef(
|
|
|
1733
1733
|
};
|
|
1734
1734
|
onChange?.(syntheticEvent);
|
|
1735
1735
|
}, [onChange, onSearch]);
|
|
1736
|
-
|
|
1736
|
+
React24.useEffect(() => {
|
|
1737
1737
|
if (!enableKeyboardShortcuts || !isActive) return;
|
|
1738
1738
|
const handleFocusSearch = (e) => {
|
|
1739
1739
|
e?.preventDefault();
|
|
@@ -1886,8 +1886,8 @@ var FileUpload = ({
|
|
|
1886
1886
|
children,
|
|
1887
1887
|
dragAndDrop = false
|
|
1888
1888
|
}) => {
|
|
1889
|
-
const fileInputRef =
|
|
1890
|
-
const [isDragOver, setIsDragOver] =
|
|
1889
|
+
const fileInputRef = React24.useRef(null);
|
|
1890
|
+
const [isDragOver, setIsDragOver] = React24__namespace.default.useState(false);
|
|
1891
1891
|
const handleFileSelect = (files) => {
|
|
1892
1892
|
if (!files) return;
|
|
1893
1893
|
const fileArray = Array.from(files);
|
|
@@ -2185,7 +2185,7 @@ var Pagination = ({
|
|
|
2185
2185
|
] });
|
|
2186
2186
|
};
|
|
2187
2187
|
var Pagination_default = Pagination;
|
|
2188
|
-
var Radio =
|
|
2188
|
+
var Radio = React24__namespace.default.forwardRef(
|
|
2189
2189
|
({
|
|
2190
2190
|
className,
|
|
2191
2191
|
label,
|
|
@@ -2250,7 +2250,7 @@ var Radio = React23__namespace.default.forwardRef(
|
|
|
2250
2250
|
Radio.displayName = "Radio";
|
|
2251
2251
|
var Radio_default = Radio;
|
|
2252
2252
|
var Accordion = ({ items, active = -1 }) => {
|
|
2253
|
-
const [activeIndex, setActiveIndex] =
|
|
2253
|
+
const [activeIndex, setActiveIndex] = React24.useState(active);
|
|
2254
2254
|
const toggleAccordion = (index) => {
|
|
2255
2255
|
setActiveIndex(activeIndex === index ? null : index);
|
|
2256
2256
|
};
|
|
@@ -2291,8 +2291,8 @@ var Tabs = ({
|
|
|
2291
2291
|
buttonClassName = "flex items-center gap-1 px-[8px] py-[2px] text-[13px] cursor-pointer transition-all duration-300 text-neutral-300 rounded-[6px] m-[8px]",
|
|
2292
2292
|
activeButtonClassName = "bg-surface-3 text-neutral-400"
|
|
2293
2293
|
}) => {
|
|
2294
|
-
const [activeTab, setActiveTab] =
|
|
2295
|
-
|
|
2294
|
+
const [activeTab, setActiveTab] = React24.useState(defaultActiveTab);
|
|
2295
|
+
React24.useEffect(() => {
|
|
2296
2296
|
setActiveTab(defaultActiveTab);
|
|
2297
2297
|
}, [defaultActiveTab]);
|
|
2298
2298
|
const handleTabClick = (index) => {
|
|
@@ -2383,14 +2383,29 @@ var decodeBase64 = (base64) => {
|
|
|
2383
2383
|
const bytes = Uint8Array.from(atob(value), (character) => character.charCodeAt(0));
|
|
2384
2384
|
return new TextDecoder().decode(bytes);
|
|
2385
2385
|
};
|
|
2386
|
+
var toBlobUrl = (base64, fileName) => {
|
|
2387
|
+
const value = base64.includes(",") ? base64.slice(base64.indexOf(",") + 1) : base64;
|
|
2388
|
+
const bytes = Uint8Array.from(atob(value), (character) => character.charCodeAt(0));
|
|
2389
|
+
return URL.createObjectURL(new Blob([bytes], { type: getMimeType(fileName) }));
|
|
2390
|
+
};
|
|
2386
2391
|
var PreviewComponent = ({ fileName, base64, className }) => {
|
|
2387
2392
|
const previewType = getPreviewType(fileName);
|
|
2388
2393
|
const dataUrl = toDataUrl(base64, fileName);
|
|
2394
|
+
const [pdfUrl, setPdfUrl] = React24.useState();
|
|
2395
|
+
React24.useEffect(() => {
|
|
2396
|
+
if (previewType !== "pdf") {
|
|
2397
|
+
setPdfUrl(void 0);
|
|
2398
|
+
return;
|
|
2399
|
+
}
|
|
2400
|
+
const objectUrl = toBlobUrl(base64, fileName);
|
|
2401
|
+
setPdfUrl(objectUrl);
|
|
2402
|
+
return () => URL.revokeObjectURL(objectUrl);
|
|
2403
|
+
}, [base64, fileName, previewType]);
|
|
2389
2404
|
if (previewType === "image") {
|
|
2390
2405
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-full min-h-48 w-full items-center justify-center overflow-auto", className), children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: dataUrl, alt: fileName, className: "max-h-full max-w-full object-contain" }) });
|
|
2391
2406
|
}
|
|
2392
2407
|
if (previewType === "pdf") {
|
|
2393
|
-
return /* @__PURE__ */ jsxRuntime.jsx("iframe", { title: fileName, src:
|
|
2408
|
+
return pdfUrl ? /* @__PURE__ */ jsxRuntime.jsx("iframe", { title: fileName, src: pdfUrl, className: cn("h-full min-h-96 w-full border-0", className) }) : null;
|
|
2394
2409
|
}
|
|
2395
2410
|
if (previewType === "audio") {
|
|
2396
2411
|
return /* @__PURE__ */ jsxRuntime.jsx("audio", { controls: true, src: dataUrl, className: cn("w-full", className) });
|
|
@@ -2430,11 +2445,11 @@ function renderPluginChild(child, app, api, reloadKey) {
|
|
|
2430
2445
|
const renderFn = child;
|
|
2431
2446
|
return renderFn({ app, api });
|
|
2432
2447
|
}
|
|
2433
|
-
return
|
|
2434
|
-
if (!
|
|
2448
|
+
return React24.Children.map(child, (node, index) => {
|
|
2449
|
+
if (!React24.isValidElement(node)) {
|
|
2435
2450
|
return node;
|
|
2436
2451
|
}
|
|
2437
|
-
return
|
|
2452
|
+
return React24.cloneElement(
|
|
2438
2453
|
node,
|
|
2439
2454
|
{
|
|
2440
2455
|
key: `${reloadKey}-${index}`,
|
|
@@ -2464,13 +2479,13 @@ function PluginPlayground({
|
|
|
2464
2479
|
metadata,
|
|
2465
2480
|
backgroundImage
|
|
2466
2481
|
}) {
|
|
2467
|
-
const [mockUser] =
|
|
2468
|
-
const [mockToken] =
|
|
2469
|
-
const [isMinimized, setIsMinimized] =
|
|
2470
|
-
const [isClosed, setIsClosed] =
|
|
2471
|
-
const [isActive, setIsActive] =
|
|
2472
|
-
const [isNightMode, setIsNightMode] =
|
|
2473
|
-
|
|
2482
|
+
const [mockUser] = React24.useState(DEFAULT_MOCK_USER);
|
|
2483
|
+
const [mockToken] = React24.useState(DEFAULT_TOKEN);
|
|
2484
|
+
const [isMinimized, setIsMinimized] = React24.useState(false);
|
|
2485
|
+
const [isClosed, setIsClosed] = React24.useState(false);
|
|
2486
|
+
const [isActive, setIsActive] = React24.useState(true);
|
|
2487
|
+
const [isNightMode, setIsNightMode] = React24.useState(true);
|
|
2488
|
+
React24.useEffect(() => {
|
|
2474
2489
|
if (typeof window === "undefined") return;
|
|
2475
2490
|
const storedTheme = window.localStorage.getItem("plugin-playground-theme");
|
|
2476
2491
|
const prefersDark = window.matchMedia(
|
|
@@ -2479,7 +2494,7 @@ function PluginPlayground({
|
|
|
2479
2494
|
const shouldUseDark = storedTheme ? storedTheme === "dark" : prefersDark;
|
|
2480
2495
|
setIsNightMode(shouldUseDark);
|
|
2481
2496
|
}, []);
|
|
2482
|
-
|
|
2497
|
+
React24.useEffect(() => {
|
|
2483
2498
|
if (typeof document === "undefined") return;
|
|
2484
2499
|
document.documentElement.classList.toggle("dark", isNightMode);
|
|
2485
2500
|
window.localStorage.setItem(
|
|
@@ -2489,25 +2504,25 @@ function PluginPlayground({
|
|
|
2489
2504
|
}, [isNightMode]);
|
|
2490
2505
|
const title = metadata.title ?? metadata.name ?? "Plugin Playground";
|
|
2491
2506
|
const slug = metadata.slug ?? "local-plugin";
|
|
2492
|
-
const defaultSize =
|
|
2507
|
+
const defaultSize = React24.useMemo(() => getDefaultSize(metadata), [metadata]);
|
|
2493
2508
|
const canvasBackground = backgroundImage ?? metadata.backgroundImage ?? DEFAULT_BACKGROUND;
|
|
2494
2509
|
const isWindowResizable = metadata.windowSize?.isAppWindowResizing ?? metadata.isResizing ?? true;
|
|
2495
|
-
const minimizeWindow =
|
|
2510
|
+
const minimizeWindow = React24.useCallback(() => {
|
|
2496
2511
|
setIsActive(false);
|
|
2497
2512
|
setIsMinimized(true);
|
|
2498
2513
|
setIsClosed(false);
|
|
2499
2514
|
}, []);
|
|
2500
|
-
const closeWindow =
|
|
2515
|
+
const closeWindow = React24.useCallback(() => {
|
|
2501
2516
|
setIsActive(false);
|
|
2502
2517
|
setIsClosed(true);
|
|
2503
2518
|
setIsMinimized(false);
|
|
2504
2519
|
}, []);
|
|
2505
|
-
const restoreWindow =
|
|
2520
|
+
const restoreWindow = React24.useCallback(() => {
|
|
2506
2521
|
setIsActive(true);
|
|
2507
2522
|
setIsClosed(false);
|
|
2508
2523
|
setIsMinimized(false);
|
|
2509
2524
|
}, []);
|
|
2510
|
-
const mockApi =
|
|
2525
|
+
const mockApi = React24.useMemo(() => {
|
|
2511
2526
|
return {
|
|
2512
2527
|
showToast: (message, type) => {
|
|
2513
2528
|
console.info(`[playground:${type}] ${message}`);
|
|
@@ -2524,7 +2539,7 @@ function PluginPlayground({
|
|
|
2524
2539
|
isDarkTheme: isNightMode
|
|
2525
2540
|
};
|
|
2526
2541
|
}, [mockToken, mockUser, isNightMode]);
|
|
2527
|
-
const appProps =
|
|
2542
|
+
const appProps = React24.useMemo(
|
|
2528
2543
|
() => ({
|
|
2529
2544
|
name: title,
|
|
2530
2545
|
slug,
|
|
@@ -2694,13 +2709,13 @@ var WindowWithSideMenu = ({
|
|
|
2694
2709
|
removeShortcutListener,
|
|
2695
2710
|
getShortcutByCommand
|
|
2696
2711
|
} = useShortcutFormatter_default({ globalKeyboardShortcuts });
|
|
2697
|
-
const [state, dispatch] =
|
|
2712
|
+
const [state, dispatch] = React24.useReducer(reducer, {
|
|
2698
2713
|
...initialState,
|
|
2699
2714
|
windowSize: app.windowSize.windowSize ?? defaultSize,
|
|
2700
2715
|
defaultSize: app.windowSize.windowSize ?? defaultSize
|
|
2701
2716
|
});
|
|
2702
|
-
const windowRef =
|
|
2703
|
-
|
|
2717
|
+
const windowRef = React24.useRef(null);
|
|
2718
|
+
React24.useEffect(() => {
|
|
2704
2719
|
if (app.isMinimize !== state.isMinimized) {
|
|
2705
2720
|
dispatch({ type: "SYNC_MINIMIZE_STATE", payload: app.isMinimize });
|
|
2706
2721
|
}
|
|
@@ -2761,7 +2776,7 @@ var WindowWithSideMenu = ({
|
|
|
2761
2776
|
document.body.style.userSelect = "none";
|
|
2762
2777
|
dispatch({ type: "START_RESIZE", payload: { x: e.clientX, y: e.clientY } });
|
|
2763
2778
|
};
|
|
2764
|
-
|
|
2779
|
+
React24.useEffect(() => {
|
|
2765
2780
|
if (state.isDragging || state.resizeStart) {
|
|
2766
2781
|
window.addEventListener("mousemove", handleMouseMove);
|
|
2767
2782
|
window.addEventListener("mouseup", handleMouseUp);
|
|
@@ -2772,7 +2787,7 @@ var WindowWithSideMenu = ({
|
|
|
2772
2787
|
document.body.style.userSelect = "";
|
|
2773
2788
|
};
|
|
2774
2789
|
}, [state.isDragging, state.resizeStart]);
|
|
2775
|
-
|
|
2790
|
+
React24.useEffect(() => {
|
|
2776
2791
|
if (windowRef.current) {
|
|
2777
2792
|
windowRef.current.addEventListener("click", () => {
|
|
2778
2793
|
if (app?.callback) {
|
|
@@ -2781,7 +2796,7 @@ var WindowWithSideMenu = ({
|
|
|
2781
2796
|
});
|
|
2782
2797
|
}
|
|
2783
2798
|
}, [app?.slug, windowRef]);
|
|
2784
|
-
|
|
2799
|
+
React24.useEffect(() => {
|
|
2785
2800
|
const handleExitApp = () => {
|
|
2786
2801
|
if (app?.callback) {
|
|
2787
2802
|
app?.callback("CLOSE_APP");
|
|
@@ -2792,7 +2807,7 @@ var WindowWithSideMenu = ({
|
|
|
2792
2807
|
removeShortcutListener("exit_app", handleExitApp);
|
|
2793
2808
|
};
|
|
2794
2809
|
}, [app?.slug, app.isActive]);
|
|
2795
|
-
|
|
2810
|
+
React24.useEffect(() => {
|
|
2796
2811
|
const handleMinimize = () => {
|
|
2797
2812
|
if (app?.slug && app.isActive) {
|
|
2798
2813
|
dispatch({
|
|
@@ -2809,7 +2824,7 @@ var WindowWithSideMenu = ({
|
|
|
2809
2824
|
removeShortcutListener("minimize_app", handleMinimize);
|
|
2810
2825
|
};
|
|
2811
2826
|
}, [app?.slug, app.isActive, state.isMinimized, state.windowSize]);
|
|
2812
|
-
|
|
2827
|
+
React24.useEffect(() => {
|
|
2813
2828
|
const handleMaximize = () => {
|
|
2814
2829
|
if (app?.slug && app.isActive) {
|
|
2815
2830
|
dispatch({
|
|
@@ -2980,7 +2995,7 @@ var WindowWithSideMenu = ({
|
|
|
2980
2995
|
style: {
|
|
2981
2996
|
maxHeight: `${state.windowSize.height - 37}px`
|
|
2982
2997
|
},
|
|
2983
|
-
children:
|
|
2998
|
+
children: React24.isValidElement(children) && typeof children.type !== "string" ? React24__namespace.default.cloneElement(children, {
|
|
2984
2999
|
windowSize: state.windowSize,
|
|
2985
3000
|
isAppWindowResizing: state.resizeStart !== null
|
|
2986
3001
|
}) : children
|
|
@@ -3086,13 +3101,13 @@ var WindowWithoutSideMenu = ({
|
|
|
3086
3101
|
removeShortcutListener,
|
|
3087
3102
|
getShortcutByCommand
|
|
3088
3103
|
} = useShortcutFormatter_default({ globalKeyboardShortcuts });
|
|
3089
|
-
const [state, dispatch] =
|
|
3104
|
+
const [state, dispatch] = React24.useReducer(reducer2, {
|
|
3090
3105
|
...initialState2,
|
|
3091
3106
|
windowSize: app.windowSize.windowSize ?? defaultSize,
|
|
3092
3107
|
defaultSize: app.windowSize.windowSize ?? defaultSize
|
|
3093
3108
|
});
|
|
3094
|
-
const windowRef =
|
|
3095
|
-
|
|
3109
|
+
const windowRef = React24.useRef(null);
|
|
3110
|
+
React24.useEffect(() => {
|
|
3096
3111
|
if (app.isMinimize !== state.isMinimized) {
|
|
3097
3112
|
dispatch({ type: "SYNC_MINIMIZE_STATE", payload: app.isMinimize });
|
|
3098
3113
|
}
|
|
@@ -3149,7 +3164,7 @@ var WindowWithoutSideMenu = ({
|
|
|
3149
3164
|
document.body.style.userSelect = "none";
|
|
3150
3165
|
dispatch({ type: "START_RESIZE", payload: { x: e.clientX, y: e.clientY } });
|
|
3151
3166
|
};
|
|
3152
|
-
|
|
3167
|
+
React24.useEffect(() => {
|
|
3153
3168
|
if (state.isDragging || state.resizeStart) {
|
|
3154
3169
|
window.addEventListener("mousemove", handleMouseMove);
|
|
3155
3170
|
window.addEventListener("mouseup", handleMouseUp);
|
|
@@ -3160,7 +3175,7 @@ var WindowWithoutSideMenu = ({
|
|
|
3160
3175
|
document.body.style.userSelect = "";
|
|
3161
3176
|
};
|
|
3162
3177
|
}, [state.isDragging, state.resizeStart]);
|
|
3163
|
-
|
|
3178
|
+
React24.useEffect(() => {
|
|
3164
3179
|
if (windowRef.current) {
|
|
3165
3180
|
windowRef.current.addEventListener("click", () => {
|
|
3166
3181
|
if (app?.callback) {
|
|
@@ -3169,7 +3184,7 @@ var WindowWithoutSideMenu = ({
|
|
|
3169
3184
|
});
|
|
3170
3185
|
}
|
|
3171
3186
|
}, [app?.slug, windowRef]);
|
|
3172
|
-
|
|
3187
|
+
React24.useEffect(() => {
|
|
3173
3188
|
const handleExitApp = () => {
|
|
3174
3189
|
if (app?.callback) {
|
|
3175
3190
|
app?.callback("CLOSE_APP");
|
|
@@ -3180,7 +3195,7 @@ var WindowWithoutSideMenu = ({
|
|
|
3180
3195
|
removeShortcutListener("exit_app", handleExitApp);
|
|
3181
3196
|
};
|
|
3182
3197
|
}, [app?.slug, app.isActive]);
|
|
3183
|
-
|
|
3198
|
+
React24.useEffect(() => {
|
|
3184
3199
|
const handleMinimize = () => {
|
|
3185
3200
|
if (app?.slug && app.isActive) {
|
|
3186
3201
|
dispatch({
|
|
@@ -3197,7 +3212,7 @@ var WindowWithoutSideMenu = ({
|
|
|
3197
3212
|
removeShortcutListener("minimize_app", handleMinimize);
|
|
3198
3213
|
};
|
|
3199
3214
|
}, [app?.slug, app.isActive, state.isMinimized, state.windowSize]);
|
|
3200
|
-
|
|
3215
|
+
React24.useEffect(() => {
|
|
3201
3216
|
const handleMaximize = () => {
|
|
3202
3217
|
if (app?.slug && app.isActive) {
|
|
3203
3218
|
dispatch({
|
|
@@ -3313,7 +3328,7 @@ var WindowWithoutSideMenu = ({
|
|
|
3313
3328
|
style: {
|
|
3314
3329
|
maxHeight: `${state.windowSize.height - 37}px`
|
|
3315
3330
|
},
|
|
3316
|
-
children:
|
|
3331
|
+
children: React24.isValidElement(children) && typeof children.type !== "string" ? React24__namespace.default.cloneElement(children, {
|
|
3317
3332
|
windowSize: state.windowSize,
|
|
3318
3333
|
isAppWindowResizing: state.resizeStart !== null
|
|
3319
3334
|
}) : children
|
|
@@ -3336,7 +3351,7 @@ var WindowWithoutSideMenu = ({
|
|
|
3336
3351
|
);
|
|
3337
3352
|
};
|
|
3338
3353
|
var WindowWithoutSideMenu_default = WindowWithoutSideMenu;
|
|
3339
|
-
var Table =
|
|
3354
|
+
var Table = React24__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3340
3355
|
"table",
|
|
3341
3356
|
{
|
|
3342
3357
|
ref,
|
|
@@ -3345,9 +3360,9 @@ var Table = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @
|
|
|
3345
3360
|
}
|
|
3346
3361
|
) }));
|
|
3347
3362
|
Table.displayName = "Table";
|
|
3348
|
-
var TableHeader =
|
|
3363
|
+
var TableHeader = React24__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("[&_tr]:border-b text-neutral-400 bg-surface-2", className), ...props }));
|
|
3349
3364
|
TableHeader.displayName = "TableHeader";
|
|
3350
|
-
var TableBody =
|
|
3365
|
+
var TableBody = React24__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
3351
3366
|
"tbody",
|
|
3352
3367
|
{
|
|
3353
3368
|
ref,
|
|
@@ -3356,7 +3371,7 @@ var TableBody = React23__namespace.forwardRef(({ className, ...props }, ref) =>
|
|
|
3356
3371
|
}
|
|
3357
3372
|
));
|
|
3358
3373
|
TableBody.displayName = "TableBody";
|
|
3359
|
-
var TableFooter =
|
|
3374
|
+
var TableFooter = React24__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
3360
3375
|
"tfoot",
|
|
3361
3376
|
{
|
|
3362
3377
|
ref,
|
|
@@ -3368,7 +3383,7 @@ var TableFooter = React23__namespace.forwardRef(({ className, ...props }, ref) =
|
|
|
3368
3383
|
}
|
|
3369
3384
|
));
|
|
3370
3385
|
TableFooter.displayName = "TableFooter";
|
|
3371
|
-
var TableRow =
|
|
3386
|
+
var TableRow = React24__namespace.forwardRef(({ className, onClick, ...props }, ref) => {
|
|
3372
3387
|
const isInteractive = typeof onClick === "function";
|
|
3373
3388
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3374
3389
|
"tr",
|
|
@@ -3385,7 +3400,7 @@ var TableRow = React23__namespace.forwardRef(({ className, onClick, ...props },
|
|
|
3385
3400
|
);
|
|
3386
3401
|
});
|
|
3387
3402
|
TableRow.displayName = "TableRow";
|
|
3388
|
-
var TableHead =
|
|
3403
|
+
var TableHead = React24__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
3389
3404
|
"th",
|
|
3390
3405
|
{
|
|
3391
3406
|
ref,
|
|
@@ -3397,7 +3412,7 @@ var TableHead = React23__namespace.forwardRef(({ className, ...props }, ref) =>
|
|
|
3397
3412
|
}
|
|
3398
3413
|
));
|
|
3399
3414
|
TableHead.displayName = "TableHead";
|
|
3400
|
-
var TableCell =
|
|
3415
|
+
var TableCell = React24__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
3401
3416
|
"td",
|
|
3402
3417
|
{
|
|
3403
3418
|
ref,
|
|
@@ -3406,7 +3421,7 @@ var TableCell = React23__namespace.forwardRef(({ className, ...props }, ref) =>
|
|
|
3406
3421
|
}
|
|
3407
3422
|
));
|
|
3408
3423
|
TableCell.displayName = "TableCell";
|
|
3409
|
-
var TableCaption =
|
|
3424
|
+
var TableCaption = React24__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
3410
3425
|
"caption",
|
|
3411
3426
|
{
|
|
3412
3427
|
ref,
|
|
@@ -3416,12 +3431,12 @@ var TableCaption = React23__namespace.forwardRef(({ className, ...props }, ref)
|
|
|
3416
3431
|
));
|
|
3417
3432
|
TableCaption.displayName = "TableCaption";
|
|
3418
3433
|
var useGridClasses = (windowSize, gridRules) => {
|
|
3419
|
-
const deviceType =
|
|
3434
|
+
const deviceType = React24.useMemo(() => {
|
|
3420
3435
|
if (windowSize.width <= 640) return "mobile";
|
|
3421
3436
|
if (windowSize.width <= 1024) return "tablet";
|
|
3422
3437
|
return "desktop";
|
|
3423
3438
|
}, [windowSize]);
|
|
3424
|
-
const gridClasses =
|
|
3439
|
+
const gridClasses = React24.useMemo(() => {
|
|
3425
3440
|
const classes = {};
|
|
3426
3441
|
for (const element in gridRules) {
|
|
3427
3442
|
const classRules = gridRules[element] ?? {};
|
|
@@ -3434,8 +3449,8 @@ var useGridClasses = (windowSize, gridRules) => {
|
|
|
3434
3449
|
};
|
|
3435
3450
|
var useGridClasses_default = useGridClasses;
|
|
3436
3451
|
var useDeviceSupport = () => {
|
|
3437
|
-
const [isSupported, setIsSupported] =
|
|
3438
|
-
|
|
3452
|
+
const [isSupported, setIsSupported] = React24.useState(true);
|
|
3453
|
+
React24.useEffect(() => {
|
|
3439
3454
|
function checkSupport() {
|
|
3440
3455
|
const ua = typeof window !== "undefined" ? window.navigator.userAgent : "";
|
|
3441
3456
|
const width = typeof window !== "undefined" ? window.innerWidth : 1920;
|
|
@@ -3561,7 +3576,7 @@ var useSound = () => {
|
|
|
3561
3576
|
audio.currentTime = 0;
|
|
3562
3577
|
await audio.play();
|
|
3563
3578
|
};
|
|
3564
|
-
const playSound =
|
|
3579
|
+
const playSound = React24.useCallback((type) => {
|
|
3565
3580
|
if (typeof window === "undefined") {
|
|
3566
3581
|
return;
|
|
3567
3582
|
}
|