@class-kit/react 0.1.0

package/dist/components/canvas-editor.js

@@ -0,0 +1,205 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { CanvasEditorController } from '@class-kit/core';
+
+function CanvasEditor({ className = "cc-canvas-editor", defaultMode = "document", defaultNodes, disabled = false, mode, nodes, readOnly = false, rootId, style, onModeChange, onNodesChange, onStateChange, ...props }) {
+    const controlledNodes = Array.isArray(nodes);
+    const [innerNodes, setInnerNodes] = React.useState(defaultNodes);
+    const [innerMode, setInnerMode] = React.useState(defaultMode);
+    const activeMode = mode ?? innerMode;
+    const activeNodes = controlledNodes ? nodes : innerNodes;
+    const controllerRef = React.useRef(new CanvasEditorController({
+        disabled,
+        mode: activeMode,
+        nodes: activeNodes,
+        readOnly,
+        rootId,
+    }));
+    const [state, setState] = React.useState(() => controllerRef.current.getState());
+    const [editingId, setEditingId] = React.useState();
+    const dragRef = React.useRef(null);
+    const mindRef = React.useRef(null);
+    const didCenterMindRef = React.useRef(false);
+    const commitState = React.useCallback((nextState, emitNodes = false) => {
+        setState(nextState);
+        onStateChange?.(nextState);
+        if (emitNodes) {
+            if (!controlledNodes)
+                setInnerNodes(nextState.nodes);
+            onNodesChange?.(nextState.nodes);
+        }
+    }, [controlledNodes, onNodesChange, onStateChange]);
+    const centerMindRoot = React.useCallback((nextState = controllerRef.current.getState()) => {
+        if (nextState.mode !== "mind" ||
+            didCenterMindRef.current ||
+            !mindRef.current)
+            return;
+        const rootNode = nextState.nodes.find((node) => node.id === nextState.rootId) ??
+            nextState.nodes[0];
+        if (!rootNode)
+            return;
+        const rect = mindRef.current.getBoundingClientRect();
+        if (rect.width <= 0 || rect.height <= 0)
+            return;
+        didCenterMindRef.current = true;
+        commitState(controllerRef.current.updateOptions({
+            viewport: {
+                x: rect.width / 2 - (rootNode.x ?? 0) - (rootNode.width ?? 0) / 2,
+                y: rect.height / 2 - (rootNode.y ?? 0) - (rootNode.height ?? 0) / 2,
+            },
+        }));
+    }, [commitState]);
+    React.useEffect(() => {
+        const nextState = controllerRef.current.updateOptions({
+            disabled,
+            mode: activeMode,
+            nodes: activeNodes,
+            readOnly,
+            rootId,
+        });
+        commitState(nextState);
+        if (nextState.mode !== "mind")
+            didCenterMindRef.current = false;
+    }, [activeMode, activeNodes, commitState, disabled, readOnly, rootId]);
+    React.useEffect(() => {
+        centerMindRoot(state);
+    }, [centerMindRoot, state]);
+    const setMode = (nextMode) => {
+        if (mode === undefined)
+            setInnerMode(nextMode);
+        onModeChange?.(nextMode);
+        if (nextMode !== "mind")
+            didCenterMindRef.current = false;
+        const nextState = controllerRef.current.setMode(nextMode);
+        commitState(nextState);
+        if (nextMode === "mind")
+            didCenterMindRef.current = false;
+    };
+    const updateNode = (id, patch) => {
+        commitState(controllerRef.current.updateNode(id, patch), true);
+    };
+    const addNode = (parentId) => {
+        commitState(controllerRef.current.addNode({ parentId }), true);
+    };
+    const removeSelectedNode = () => {
+        if (!state.selectedId || state.selectedId === state.rootId)
+            return;
+        commitState(controllerRef.current.removeNode(state.selectedId), true);
+    };
+    const resetViewport = () => {
+        if (state.mode === "mind")
+            didCenterMindRef.current = false;
+        const nextState = controllerRef.current.resetViewport();
+        commitState(nextState);
+        if (nextState.mode === "mind")
+            window.requestAnimationFrame(() => centerMindRoot(nextState));
+    };
+    const focusNode = (id) => {
+        setEditingId(id);
+        commitState(controllerRef.current.select(id));
+    };
+    const stopInputPointer = (event) => {
+        event.stopPropagation();
+        dragRef.current = null;
+    };
+    const getMindTitleRows = (node) => Math.max(1, Math.ceil(String(node.title || " ").length /
+        Math.max(1, Math.floor(((node.width ?? 160) - 24) / 7.2))));
+    const getMindContentRows = (node) => {
+        const charsPerLine = Math.max(1, Math.floor(((node.width ?? 160) - 24) / 7.2));
+        const content = String(node.content ?? "");
+        if (content.trim() === "")
+            return 1;
+        return content
+            .split(/\r?\n/)
+            .reduce((total, line) => total + Math.max(1, Math.ceil((line.length || 1) / charsPerLine)), 0);
+    };
+    const handleTitleKeyDown = (event) => {
+        event.stopPropagation();
+        if (event.key === "Enter" || event.key === "Escape") {
+            event.preventDefault();
+            event.currentTarget.blur();
+        }
+    };
+    const handleContentKeyDown = (event) => {
+        event.stopPropagation();
+        if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+            event.preventDefault();
+            event.currentTarget.blur();
+        }
+    };
+    const nodeMap = new Map(state.nodes.map((node) => [node.id, node]));
+    const renderDocumentNode = (node, depth = 0) => (jsxs("section", { className: "cc-canvas-editor__doc-node", "data-depth": depth, "data-editing": editingId === node.id, children: [jsxs("div", { className: "cc-canvas-editor__doc-head", children: [jsx("input", { className: "cc-canvas-editor__doc-title", disabled: disabled, readOnly: readOnly, value: node.title, onChange: (event) => updateNode(node.id, { title: event.currentTarget.value }), onBlur: () => setEditingId((current) => current === node.id ? undefined : current), onFocus: () => focusNode(node.id), onKeyDown: handleTitleKeyDown, onPointerDown: stopInputPointer }), jsxs("span", { className: "cc-canvas-editor__doc-actions", children: [jsx("button", { disabled: disabled || readOnly, type: "button", onClick: () => addNode(node.id), children: "\u5B50\u8282\u70B9" }), jsx("button", { disabled: disabled || readOnly || node.id === state.rootId, type: "button", onClick: () => commitState(controllerRef.current.removeNode(node.id), true), children: "\u5220\u9664" })] })] }), jsx("textarea", { className: "cc-canvas-editor__doc-content", disabled: disabled, readOnly: readOnly, rows: Math.max(2, Math.ceil((node.content?.length ?? 0) / 42)), value: node.content ?? "", onChange: (event) => updateNode(node.id, { content: event.currentTarget.value }), onBlur: () => setEditingId((current) => (current === node.id ? undefined : current)), onFocus: () => focusNode(node.id), onKeyDown: handleContentKeyDown, onPointerDown: stopInputPointer }), (node.children ?? []).map((childId) => {
+                const child = nodeMap.get(childId);
+                return child ? renderDocumentNode(child, depth + 1) : null;
+            })] }, node.id));
+    const root = nodeMap.get(state.rootId) ?? state.nodes[0];
+    return (jsxs("div", { className: className, "data-disabled": disabled, "data-mode": state.mode, "data-readonly": readOnly, style: style, ...props, children: [jsxs("div", { className: "cc-canvas-editor__toolbar", children: [jsxs("div", { className: "cc-canvas-editor__segmented", children: [jsx("button", { "aria-pressed": state.mode === "document", type: "button", onClick: () => setMode("document"), children: "\u6587\u6863" }), jsx("button", { "aria-pressed": state.mode === "mind", type: "button", onClick: () => setMode("mind"), children: "\u8111\u56FE" })] }), jsxs("div", { className: "cc-canvas-editor__tools", children: [jsx("button", { disabled: disabled || readOnly, type: "button", onClick: () => addNode(), children: "\u65B0\u589E\u5B50\u8282\u70B9" }), jsx("button", { disabled: disabled ||
+                                    readOnly ||
+                                    !state.selectedId ||
+                                    state.selectedId === state.rootId, type: "button", onClick: removeSelectedNode, children: "\u5220\u9664\u9009\u4E2D" }), jsx("button", { disabled: disabled, type: "button", onClick: () => commitState(controllerRef.current.zoom(-0.1)), children: "-" }), jsxs("span", { children: [Math.round(state.viewport.zoom * 100), "%"] }), jsx("button", { disabled: disabled, type: "button", onClick: () => commitState(controllerRef.current.zoom(0.1)), children: "+" }), jsx("button", { disabled: disabled, type: "button", onClick: resetViewport, children: "\u91CD\u7F6E" })] })] }), state.mode === "document" ? (jsx("div", { className: "cc-canvas-editor__document", children: root ? (renderDocumentNode(root)) : (jsx("div", { className: "cc-canvas-editor__empty", children: "\u6682\u65E0\u5185\u5BB9" })) })) : (jsx("div", { className: "cc-canvas-editor__mind", ref: mindRef, onPointerDown: (event) => {
+                    if (disabled ||
+                        event.target.closest(".cc-canvas-editor__card"))
+                        return;
+                    dragRef.current = {
+                        lastX: event.clientX,
+                        lastY: event.clientY,
+                        type: "pan",
+                    };
+                    event.currentTarget.setPointerCapture?.(event.pointerId);
+                }, onPointerMove: (event) => {
+                    const drag = dragRef.current;
+                    if (!drag || drag.type !== "pan")
+                        return;
+                    const deltaX = event.clientX - drag.lastX;
+                    const deltaY = event.clientY - drag.lastY;
+                    drag.lastX = event.clientX;
+                    drag.lastY = event.clientY;
+                    commitState(controllerRef.current.pan({ deltaX, deltaY }));
+                }, onPointerUp: () => {
+                    dragRef.current = null;
+                }, onPointerCancel: () => {
+                    dragRef.current = null;
+                }, children: jsxs("div", { className: "cc-canvas-editor__stage", style: {
+                        transform: `translate3d(${state.viewport.x}px, ${state.viewport.y}px, 0) scale(${state.viewport.zoom})`,
+                    }, children: [jsx("svg", { className: "cc-canvas-editor__links", children: state.links.map((link) => (jsx("path", { d: link.d }, `${link.from}-${link.to}`))) }), state.nodes.map((node) => (jsxs("article", { className: "cc-canvas-editor__card", "data-editing": editingId === node.id, "data-selected": state.selectedId === node.id, style: {
+                                minHeight: node.height,
+                                transform: `translate3d(${node.x}px, ${node.y}px, 0)`,
+                                width: node.width,
+                            }, onPointerDown: (event) => {
+                                if (disabled || readOnly)
+                                    return;
+                                event.stopPropagation();
+                                if (event.target.closest("input, textarea")) {
+                                    focusNode(node.id);
+                                    return;
+                                }
+                                dragRef.current = {
+                                    id: node.id,
+                                    lastX: event.clientX,
+                                    lastY: event.clientY,
+                                    type: "node",
+                                };
+                                commitState(controllerRef.current.select(node.id));
+                                event.currentTarget.setPointerCapture?.(event.pointerId);
+                            }, onPointerMove: (event) => {
+                                const drag = dragRef.current;
+                                if (!drag || drag.type !== "node" || drag.id !== node.id)
+                                    return;
+                                const deltaX = event.clientX - drag.lastX;
+                                const deltaY = event.clientY - drag.lastY;
+                                drag.lastX = event.clientX;
+                                drag.lastY = event.clientY;
+                                commitState(controllerRef.current.moveNode({
+                                    deltaX,
+                                    deltaY,
+                                    id: node.id,
+                                }), true);
+                            }, onPointerUp: () => {
+                                dragRef.current = null;
+                            }, onPointerCancel: () => {
+                                dragRef.current = null;
+                            }, children: [jsx("textarea", { className: "cc-canvas-editor__card-title", disabled: disabled, readOnly: readOnly, rows: getMindTitleRows(node), value: node.title, onBlur: () => setEditingId((current) => current === node.id ? undefined : current), onChange: (event) => updateNode(node.id, { title: event.currentTarget.value }), onFocus: () => focusNode(node.id), onKeyDown: handleTitleKeyDown, onPointerDown: stopInputPointer }), jsx("textarea", { disabled: disabled, readOnly: readOnly, rows: getMindContentRows(node), value: node.content ?? "", onBlur: () => setEditingId((current) => current === node.id ? undefined : current), onChange: (event) => updateNode(node.id, { content: event.currentTarget.value }), onFocus: () => focusNode(node.id), onKeyDown: handleContentKeyDown, onPointerDown: stopInputPointer })] }, node.id)))] }) }))] }));
+}
+
+export { CanvasEditor };
+//# sourceMappingURL=canvas-editor.js.map

package/dist/components/canvas-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-editor.js","sources":["../../src/index.tsx"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/canvas-image.cjs

@@ -0,0 +1,40 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@class-kit/core');
+
+const EMPTY_CANVAS_IMAGE_LAYERS = [];
+const CanvasImage = /*#__PURE__*/ React.forwardRef(function CanvasImage({ background = "transparent", canvasClassName = "cc-canvas-image__canvas", className = "cc-canvas-image", dpr, height, layers = EMPTY_CANVAS_IMAGE_LAYERS, width, style, onError, onRendered, ...props }, ref) {
+    const canvasRef = React.useRef(null);
+    const controller = React.useMemo(() => new core.CanvasImageController({ background, dpr, height, layers, width }), [background, dpr, height, layers, width]);
+    const render = React.useCallback(async () => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return null;
+        try {
+            const state = await controller.draw(canvas);
+            onRendered?.(state);
+            return state;
+        }
+        catch (error) {
+            onError?.(error instanceof Error ? error : new Error(String(error)));
+            return null;
+        }
+    }, [controller, onError, onRendered]);
+    React.useEffect(() => {
+        void render();
+    }, [render]);
+    React.useImperativeHandle(ref, () => ({
+        render,
+        toDataURL: (type = "image/png", quality) => canvasRef.current?.toDataURL(type, quality) ?? "",
+    }), [render]);
+    return (jsxRuntime.jsx("div", { className: className, style: {
+            "--cc-canvas-image-height": `${height}px`,
+            "--cc-canvas-image-width": `${width}px`,
+            ...style,
+        }, ...props, children: jsxRuntime.jsx("canvas", { "aria-label": "Canvas image preview", className: canvasClassName, ref: canvasRef }) }));
+});
+
+exports.CanvasImage = CanvasImage;
+//# sourceMappingURL=canvas-image.cjs.map

package/dist/components/canvas-image.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-image.cjs","sources":["../../src/index.tsx"],"names":["useMemo","CanvasImageController","useEffect","_jsx"],"mappings":";;;;;;AA8OA,MAAM,yBAAyB,GAAuB,EAAE;MAgkP3C,WAAW,iBAAiB,KAAK,CAAC,UAAU,CAGvD,SAAS,WAAW,CACpB,EACE,UAAU,GAAG,aAAa,EAC1B,eAAe,GAAG,yBAAyB,EAC3C,SAAS,GAAG,iBAAiB,EAC7B,GAAG,EACH,MAAM,EACN,MAAM,GAAG,yBAAyB,EAClC,KAAK,EACL,KAAK,EACL,OAAO,EACP,UAAU,EACV,GAAG,KAAK,EACT,EACD,GAAG,EAAA;IAEH,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAA2B,IAAI,CAAC;AAC9D,IAAA,MAAM,UAAU,GAAGA,aAAO,CACxB,MAAM,IAAIC,0BAAqB,CAAC,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAC3E,CAAC,UAAU,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CACzC;IACD,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC,YAAW;AAC1C,QAAA,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO;AAChC,QAAA,IAAI,CAAC,MAAM;AAAE,YAAA,OAAO,IAAI;AACxB,QAAA,IAAI;YACF,MAAM,KAAK,GAAG,MAAM,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC;AAC3C,YAAA,UAAU,GAAG,KAAK,CAAC;AACnB,YAAA,OAAO,KAAK;QACd;QAAE,OAAO,KAAK,EAAE;YACd,OAAO,GAAG,KAAK,YAAY,KAAK,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;AACpE,YAAA,OAAO,IAAI;QACb;IACF,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC;IACrCC,eAAS,CAAC,MAAK;QACb,KAAK,MAAM,EAAE;AACf,IAAA,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;IACZ,KAAK,CAAC,mBAAmB,CACvB,GAAG,EACH,OAAO;QACL,MAAM;QACN,SAAS,EAAE,CAAC,IAAI,GAAG,WAAW,EAAE,OAAO,KACrC,SAAS,CAAC,OAAO,EAAE,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE;AACpD,KAAA,CAAC,EACF,CAAC,MAAM,CAAC,CACT;AAED,IAAA,QACEC,cAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,SAAS,EACpB,KAAK,EACH;YACE,0BAA0B,EAAE,CAAA,EAAG,MAAM,CAAA,EAAA,CAAI;YACzC,yBAAyB,EAAE,CAAA,EAAG,KAAK,CAAA,EAAA,CAAI;AACvC,YAAA,GAAG,KAAK;AACc,SAAA,EAAA,GAEtB,KAAK,EAAA,QAAA,EAETA,cAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EACa,sBAAsB,EACjC,SAAS,EAAE,eAAe,EAC1B,GAAG,EAAE,SAAS,EAAA,CACd,EAAA,CACE;AAEV,CAAC;;;;"}

package/dist/components/canvas-image.d.ts

@@ -0,0 +1,3 @@
+export { CanvasImage } from "../index";
+export type { CanvasImageProps, CanvasImageHandle } from "../index";
+//# sourceMappingURL=canvas-image.d.ts.map

package/dist/components/canvas-image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-image.d.ts","sourceRoot":"","sources":["../../src/components/canvas-image.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/canvas-image.js

@@ -0,0 +1,38 @@
+import { jsx } from 'react/jsx-runtime';
+import React, { useMemo, useEffect } from 'react';
+import { CanvasImageController } from '@class-kit/core';
+
+const EMPTY_CANVAS_IMAGE_LAYERS = [];
+const CanvasImage = /*#__PURE__*/ React.forwardRef(function CanvasImage({ background = "transparent", canvasClassName = "cc-canvas-image__canvas", className = "cc-canvas-image", dpr, height, layers = EMPTY_CANVAS_IMAGE_LAYERS, width, style, onError, onRendered, ...props }, ref) {
+    const canvasRef = React.useRef(null);
+    const controller = useMemo(() => new CanvasImageController({ background, dpr, height, layers, width }), [background, dpr, height, layers, width]);
+    const render = React.useCallback(async () => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return null;
+        try {
+            const state = await controller.draw(canvas);
+            onRendered?.(state);
+            return state;
+        }
+        catch (error) {
+            onError?.(error instanceof Error ? error : new Error(String(error)));
+            return null;
+        }
+    }, [controller, onError, onRendered]);
+    useEffect(() => {
+        void render();
+    }, [render]);
+    React.useImperativeHandle(ref, () => ({
+        render,
+        toDataURL: (type = "image/png", quality) => canvasRef.current?.toDataURL(type, quality) ?? "",
+    }), [render]);
+    return (jsx("div", { className: className, style: {
+            "--cc-canvas-image-height": `${height}px`,
+            "--cc-canvas-image-width": `${width}px`,
+            ...style,
+        }, ...props, children: jsx("canvas", { "aria-label": "Canvas image preview", className: canvasClassName, ref: canvasRef }) }));
+});
+
+export { CanvasImage };
+//# sourceMappingURL=canvas-image.js.map

package/dist/components/canvas-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-image.js","sources":["../../src/index.tsx"],"names":["_jsx"],"mappings":";;;;AA8OA,MAAM,yBAAyB,GAAuB,EAAE;MAgkP3C,WAAW,iBAAiB,KAAK,CAAC,UAAU,CAGvD,SAAS,WAAW,CACpB,EACE,UAAU,GAAG,aAAa,EAC1B,eAAe,GAAG,yBAAyB,EAC3C,SAAS,GAAG,iBAAiB,EAC7B,GAAG,EACH,MAAM,EACN,MAAM,GAAG,yBAAyB,EAClC,KAAK,EACL,KAAK,EACL,OAAO,EACP,UAAU,EACV,GAAG,KAAK,EACT,EACD,GAAG,EAAA;IAEH,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAA2B,IAAI,CAAC;AAC9D,IAAA,MAAM,UAAU,GAAG,OAAO,CACxB,MAAM,IAAI,qBAAqB,CAAC,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAC3E,CAAC,UAAU,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CACzC;IACD,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC,YAAW;AAC1C,QAAA,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO;AAChC,QAAA,IAAI,CAAC,MAAM;AAAE,YAAA,OAAO,IAAI;AACxB,QAAA,IAAI;YACF,MAAM,KAAK,GAAG,MAAM,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC;AAC3C,YAAA,UAAU,GAAG,KAAK,CAAC;AACnB,YAAA,OAAO,KAAK;QACd;QAAE,OAAO,KAAK,EAAE;YACd,OAAO,GAAG,KAAK,YAAY,KAAK,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;AACpE,YAAA,OAAO,IAAI;QACb;IACF,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC;IACrC,SAAS,CAAC,MAAK;QACb,KAAK,MAAM,EAAE;AACf,IAAA,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;IACZ,KAAK,CAAC,mBAAmB,CACvB,GAAG,EACH,OAAO;QACL,MAAM;QACN,SAAS,EAAE,CAAC,IAAI,GAAG,WAAW,EAAE,OAAO,KACrC,SAAS,CAAC,OAAO,EAAE,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE;AACpD,KAAA,CAAC,EACF,CAAC,MAAM,CAAC,CACT;AAED,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,SAAS,EACpB,KAAK,EACH;YACE,0BAA0B,EAAE,CAAA,EAAG,MAAM,CAAA,EAAA,CAAI;YACzC,yBAAyB,EAAE,CAAA,EAAG,KAAK,CAAA,EAAA,CAAI;AACvC,YAAA,GAAG,KAAK;AACc,SAAA,EAAA,GAEtB,KAAK,EAAA,QAAA,EAETA,GAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EACa,sBAAsB,EACjC,SAAS,EAAE,eAAe,EAC1B,GAAG,EAAE,SAAS,EAAA,CACd,EAAA,CACE;AAEV,CAAC;;;;"}