@vuu-ui/vuu-data-react 3.0.0-beta.3 → 3.1.0-beta.1

package/src/datasource-provider/VuuDataSourceProvider.mjs

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { ConnectionManager, VuuDataSource } from "@vuu-ui/vuu-data-remote";
+import { DataProvider } from "@vuu-ui/vuu-utils";
+import { useAutoLoginToVuuServer } from "./useAutoLoginToVuuServer.mjs";
+const getServerAPI = ()=>ConnectionManager.serverAPI;
+const VuuDataSourceProvider = ({ authenticate, autoConnect = false, autoLogin = false, children, websocketUrl })=>{
+    useAutoLoginToVuuServer({
+        authenticate,
+        autoConnect,
+        autoLogin,
+        websocketUrl
+    });
+    return /*#__PURE__*/ jsx(DataProvider, {
+        VuuDataSource: VuuDataSource,
+        getServerAPI: getServerAPI,
+        isLocalData: false,
+        children: children
+    });
+};
+export { VuuDataSourceProvider };

package/src/datasource-provider/index.mjs

@@ -0,0 +1 @@
+export * from "./VuuDataSourceProvider.mjs";

package/src/datasource-provider/useAutoLoginToVuuServer.mjs

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import { ConnectionManager, authenticate as vuu_data_remote_authenticate } from "@vuu-ui/vuu-data-remote";
+import { useEffect, useState } from "react";
+const useAutoLoginToVuuServer = ({ authenticate = true, autoConnect = true, secure = true, token: tokenProp = "no-token", user = "steve", websocketUrl } = {})=>{
+    const [errorMessage, setErrorMessage] = useState("");
+    useEffect(()=>{
+        const connect = async ()=>{
+            try {
+                let token = tokenProp;
+                if (authenticate) {
+                    const response = await vuu_data_remote_authenticate(user, "xyz", "/api/authn");
+                    token = response.token;
+                }
+                const url = websocketUrl ?? `${secure ? "wss" : "ws"}://localhost/8090/websocket`;
+                ConnectionManager.connect({
+                    url,
+                    token
+                });
+            } catch (e) {
+                if (e instanceof Error) {
+                    console.error(e.message);
+                    setErrorMessage(e.message);
+                }
+            }
+        };
+        if (autoConnect) connect();
+        return ()=>{
+            if (autoConnect) ConnectionManager.disconnect();
+        };
+    }, [
+        authenticate,
+        autoConnect,
+        secure,
+        tokenProp,
+        user,
+        websocketUrl
+    ]);
+    if (errorMessage) return /*#__PURE__*/ jsx("p", {
+        children: "Unable to authenticate against Vuu Server A Vuu Server instance must be running to show this example."
+    });
+};
+export { useAutoLoginToVuuServer };

package/src/hooks/useLookupValues.mjs

@@ -0,0 +1,93 @@
+import { VuuDataSource } from "@vuu-ui/vuu-data-remote";
+import { Range, buildColumnMap, getSelectedOption, isLookupRenderer, isTypeDescriptor, isValueListRenderer, useShellContext } from "@vuu-ui/vuu-utils";
+import { useMemo, useState } from "react";
+const NO_VALUES = [];
+const toListOption = (value)=>({
+        label: value,
+        value
+    });
+const lookupValueMap = new Map();
+const loadLookupValues = ({ labelColumn, table, valueColumn })=>{
+    const tableKey = `${table.module}:${table.table}`;
+    const lookupValues = lookupValueMap.get(tableKey);
+    if (lookupValues) return lookupValues;
+    {
+        const promise = new Promise((resolve)=>{
+            const columns = [
+                valueColumn,
+                labelColumn
+            ];
+            const columnMap = buildColumnMap(columns);
+            const dataSource = new VuuDataSource({
+                bufferSize: 0,
+                table
+            });
+            dataSource.subscribe({
+                columns,
+                range: Range(0, 100)
+            }, (message)=>{
+                if ("viewport-update" === message.type) {
+                    if (message.rows) {
+                        const listOptions = message.rows.map((row)=>({
+                                value: row[columnMap[valueColumn]],
+                                label: row[columnMap[labelColumn]]
+                            }));
+                        resolve(listOptions);
+                        dataSource.unsubscribe();
+                    }
+                }
+            });
+        });
+        lookupValueMap.set(tableKey, promise);
+        return promise;
+    }
+};
+const getLookupDetails = ({ name, type })=>{
+    if (isTypeDescriptor(type) && isLookupRenderer(type.renderer)) return type.renderer.lookup;
+    throw Error(`useLookupValues column ${name} is not configured to use lookup values`);
+};
+const useLookupValues = (column, initialValueProp)=>{
+    const { type: columnType } = column;
+    const { getLookupValues } = useShellContext();
+    const initialState = useMemo(()=>{
+        if (isTypeDescriptor(columnType) && isValueListRenderer(columnType?.renderer)) {
+            const values = columnType.renderer.values.map(toListOption);
+            return {
+                initialValue: getSelectedOption(values, initialValueProp) ?? null,
+                values
+            };
+        }
+        {
+            const lookupDetails = getLookupDetails(column);
+            const values = getLookupValues?.(lookupDetails.table) ?? NO_VALUES;
+            return {
+                initialValue: getSelectedOption(values, initialValueProp) ?? null,
+                values
+            };
+        }
+    }, [
+        column,
+        columnType,
+        getLookupValues,
+        initialValueProp
+    ]);
+    const [{ initialValue, values }, setLookupState] = useState(initialState);
+    useMemo(()=>{
+        if (values === NO_VALUES) {
+            const lookupDetails = getLookupDetails(column);
+            loadLookupValues(lookupDetails).then((values)=>setLookupState({
+                    initialValue: getSelectedOption(values, initialValueProp) ?? null,
+                    values
+                }));
+        }
+    }, [
+        values,
+        column,
+        initialValueProp
+    ]);
+    return {
+        initialValue,
+        values
+    };
+};
+export { useLookupValues };

package/src/hooks/useSessionDataSource.mjs

@@ -0,0 +1,37 @@
+import { useData } from "@vuu-ui/vuu-utils";
+import { useCallback, useRef } from "react";
+const sessionState = new Map();
+const useSessionDataSource = (props)=>{
+    const { VuuDataSource } = useData();
+    const dataSourceConfigRef = useRef(void 0);
+    const getDataSource = useCallback((sessionKey, dataSourceConstructorProps)=>{
+        let ds = sessionState.get(sessionKey);
+        if (ds) return ds;
+        if (dataSourceConstructorProps?.columns) {
+            ds = new VuuDataSource({
+                ...dataSourceConstructorProps,
+                viewport: sessionKey,
+                ...dataSourceConfigRef.current
+            });
+            if (props?.onConfigChange) ds.on("config", props.onConfigChange);
+            sessionState.set(sessionKey, ds);
+            return ds;
+        }
+        throw Error("[useSessionDataSource] unable to create new DataSource, columns have not been defined ");
+    }, [
+        VuuDataSource,
+        props?.onConfigChange
+    ]);
+    const clearDataSource = useCallback((sessionKey, unsubscribe)=>{
+        const ds = sessionState.get(sessionKey);
+        if (ds) {
+            sessionState.delete(sessionKey);
+            if (true === unsubscribe) ds.unsubscribe();
+        } else console.warn(`[useSessionbDatasource] clearDataSource ${sessionKey} not found `);
+    }, []);
+    return {
+        clearDataSource,
+        getDataSource
+    };
+};
+export { useSessionDataSource };

package/src/hooks/useTypeaheadSuggestions.mjs

@@ -0,0 +1,50 @@
+import { useDataSource } from "@vuu-ui/vuu-utils";
+import { useCallback } from "react";
+const getTypeaheadParams = (table, column, text = "", selectedValues = [])=>{
+    if ("" !== text && !selectedValues.includes(text.toLowerCase())) return [
+        table,
+        column,
+        text
+    ];
+    return [
+        table,
+        column
+    ];
+};
+const useTypeaheadSuggestions = ()=>{
+    const dataSource = useDataSource(false);
+    return useCallback(async ([{ module, table }, column, starts])=>{
+        if (void 0 === dataSource) {
+            console.warn("[useTypeaheadSuggestions] no dataSource provided (use DataSourceProvider)");
+            return false;
+        }
+        const rpcMessage = void 0 === starts ? {
+            params: {
+                column,
+                module,
+                table
+            },
+            rpcName: "getUniqueFieldValues",
+            type: "RPC_REQUEST"
+        } : {
+            params: {
+                column,
+                module,
+                starts,
+                table
+            },
+            rpcName: "getUniqueFieldValuesStartingWith",
+            type: "RPC_REQUEST"
+        };
+        try {
+            const response = await dataSource.rpcRequest?.(rpcMessage);
+            if (response?.type === "SUCCESS_RESULT") return response.data;
+            return false;
+        } catch (err) {
+            return false;
+        }
+    }, [
+        dataSource
+    ]);
+};
+export { getTypeaheadParams, useTypeaheadSuggestions };

package/src/hooks/useVisualLinks.mjs

@@ -0,0 +1,87 @@
+import { jsx } from "react/jsx-runtime";
+import { useViewContext } from "@vuu-ui/vuu-layout";
+import { IconButton } from "@vuu-ui/vuu-ui-controls";
+import { useCallback, useEffect } from "react";
+const useVisualLinks = (dataSource)=>{
+    const { dispatch } = useViewContext();
+    const clearVisualLinkTarget = useCallback(()=>{
+        if (dataSource.visualLink) dispatch?.({
+            type: "broadcast-message",
+            message: {
+                targetId: dataSource.visualLink.parentClientVpId,
+                type: "highlight-off"
+            }
+        });
+    }, [
+        dataSource,
+        dispatch
+    ]);
+    const removeVisualLink = useCallback(()=>{
+        if (dataSource.visualLink) {
+            dispatch?.({
+                type: "broadcast-message",
+                message: {
+                    targetId: dataSource.visualLink.parentClientVpId,
+                    type: "highlight-off"
+                }
+            });
+            dataSource.visualLink = void 0;
+        }
+    }, [
+        dataSource,
+        dispatch
+    ]);
+    const handleLinkRemoved = useCallback(()=>{
+        dispatch?.({
+            type: "remove-toolbar-contribution",
+            location: "post-title"
+        });
+    }, [
+        dispatch
+    ]);
+    const highlightVisualLinkTarget = useCallback(()=>{
+        if (dataSource.visualLink) dispatch?.({
+            type: "broadcast-message",
+            message: {
+                targetId: dataSource.visualLink.parentClientVpId,
+                type: "highlight-on"
+            }
+        });
+    }, [
+        dataSource,
+        dispatch
+    ]);
+    const handleLinkCreated = useCallback(()=>{
+        dispatch?.({
+            type: "add-toolbar-contribution",
+            location: "post-title",
+            content: /*#__PURE__*/ jsx(IconButton, {
+                appearance: "transparent",
+                "aria-label": "remove-link",
+                icon: "link",
+                onClick: removeVisualLink,
+                onMouseEnter: highlightVisualLinkTarget,
+                onMouseLeave: clearVisualLinkTarget,
+                sentiment: "neutral"
+            })
+        });
+    }, [
+        dispatch,
+        removeVisualLink,
+        highlightVisualLinkTarget,
+        clearVisualLinkTarget
+    ]);
+    useEffect(()=>{
+        dataSource.on("visual-link-created", handleLinkCreated);
+        dataSource.on("visual-link-removed", handleLinkRemoved);
+        return ()=>{
+            dataSource.removeListener("visual-link-created", handleLinkCreated);
+            dataSource.removeListener("visual-link-removed", handleLinkRemoved);
+        };
+    }, [
+        dataSource,
+        handleLinkCreated,
+        handleLinkRemoved
+    ]);
+};
+export { useVisualLinks };

package/src/hooks/useVuuMenuActions.mjs

@@ -0,0 +1,269 @@
+import { jsx } from "react/jsx-runtime";
+import { Button } from "@salt-ds/core";
+import { hasShowNotificationAction, isGroupMenuItemDescriptor } from "@vuu-ui/vuu-context-menu";
+import { getFilterPredicate } from "@vuu-ui/vuu-filter-parser";
+import { NotificationType, useNotifications } from "@vuu-ui/vuu-notifications";
+import { BulkEditPanel, isTableLocation } from "@vuu-ui/vuu-table";
+import { getLayoutComponent, isActionMessage, isCustomComponentActionMessage, isSessionTableActionMessage, useData } from "@vuu-ui/vuu-utils";
+import { useCallback } from "react";
+import { SessionEditingForm } from "../session-editing-form/index.mjs";
+import { useModal } from "@vuu-ui/vuu-ui-controls";
+const isRoot = (menu)=>"ROOT" === menu.name;
+const isCellMenu = (options)=>"cell" === options.context;
+const isRowMenu = (options)=>"row" === options.context;
+const isSelectionMenu = (options)=>"selected-rows" === options.context;
+const isVuuMenuItem = (menu)=>"rpcName" in menu;
+const isGroupMenuItem = (menu)=>"menus" in menu;
+const hasFilter = ({ filter })=>"string" == typeof filter && filter.length > 0;
+const getMenuItemOptions = (menu, options)=>{
+    switch(menu.context){
+        case "cell":
+            return {
+                ...menu,
+                field: options.column.name,
+                rowKey: options.dataRow.key,
+                value: options.dataRow[options.column.name]
+            };
+        case "row":
+            return {
+                ...menu,
+                columns: options.columns,
+                row: options.dataRow,
+                rowKey: options.dataRow.key
+            };
+        case "selected-rows":
+            return {
+                ...menu,
+                columns: options.columns
+            };
+        default:
+            return menu;
+    }
+};
+const vuuContextCompatibleWithTableLocation = (uiLocation, vuuContext, selectedRowCount = 0)=>{
+    switch(uiLocation){
+        case "grid":
+            if ("selected-rows" === vuuContext) return selectedRowCount > 0;
+            return true;
+        case "header":
+            return "grid" === vuuContext;
+        default:
+            return false;
+    }
+};
+const gridRowMeetsFilterCriteria = (context, dataRow, selectedRows, filter)=>{
+    if ("cell" === context || "row" === context) {
+        const filterPredicate = getFilterPredicate(filter);
+        return filterPredicate(dataRow);
+    }
+    if ("selected-rows" === context) if (0 === selectedRows.length) return false;
+    else {
+        const filterPredicate = getFilterPredicate(filter);
+        return selectedRows.every(filterPredicate);
+    }
+    return true;
+};
+const menuShouldBeRenderedInThisContext = (menuItem, tableLocation, options)=>{
+    if (isGroupMenuItem(menuItem)) return menuItem.menus.some((childMenu)=>menuShouldBeRenderedInThisContext(childMenu, tableLocation, options));
+    if (!vuuContextCompatibleWithTableLocation(tableLocation, menuItem.context, options.selectedRows?.length)) return false;
+    if ("grid" === tableLocation && hasFilter(menuItem)) return gridRowMeetsFilterCriteria(menuItem.context, options.dataRow, options.selectedRows, menuItem.filter);
+    if (isCellMenu(menuItem) && "*" !== menuItem.field) return menuItem.field === options.column.name;
+    return true;
+};
+const buildMenuDescriptorFromVuuMenu = (menu, tableLocation, options)=>{
+    if (menuShouldBeRenderedInThisContext(menu, tableLocation, options)) if (isVuuMenuItem(menu)) return {
+        label: menu.name,
+        id: "MENU_RPC_CALL",
+        options: getMenuItemOptions(menu, options)
+    };
+    else {
+        const children = menu.menus.map((childMenu)=>buildMenuDescriptorFromVuuMenu(childMenu, tableLocation, options)).filter((childMenu)=>void 0 !== childMenu);
+        if (children.length > 0) return {
+            label: menu.name,
+            children
+        };
+    }
+};
+const keyFirst = (c1, c2)=>c1.isKeyField ? -1 : c2.isKeyField ? 1 : 0;
+const defaultFormConfig = {
+    fields: [],
+    key: "",
+    title: ""
+};
+const configFromSchema = (schema)=>{
+    if (schema) {
+        const { columns, key } = schema;
+        return {
+            key,
+            title: "Parameters for command",
+            fields: columns.map((col)=>({
+                    description: col.name,
+                    label: col.name,
+                    name: col.name,
+                    type: col.serverDataType,
+                    isKeyField: col.name === key
+                })).sort(keyFirst)
+        };
+    }
+};
+const getFormConfig = (action)=>{
+    const { tableSchema: schema } = action;
+    const config = configFromSchema(schema) ?? defaultFormConfig;
+    return {
+        config,
+        schema
+    };
+};
+const useVuuMenuActions = ({ clientSideMenuActionHandler, dataSource, onRpcResponse })=>{
+    const { VuuDataSource } = useData();
+    const menuBuilder = useCallback((location, options)=>{
+        const descriptors = [];
+        if (dataSource) {
+            const { links, menu } = dataSource;
+            const { visualLink } = dataSource;
+            if ("grid" === location && links && !visualLink) links.forEach((linkDescriptor)=>{
+                const { link, label: linkLabel } = linkDescriptor;
+                const label = linkLabel ? linkLabel : link.toTable;
+                descriptors.push({
+                    label: `Link to ${label}`,
+                    id: "link-table",
+                    options: linkDescriptor
+                });
+            });
+            if (menu && isTableLocation(location)) {
+                const menuDescriptor = buildMenuDescriptorFromVuuMenu(menu, location, options);
+                if (isRoot(menu) && isGroupMenuItemDescriptor(menuDescriptor)) descriptors.push(...menuDescriptor.children);
+                else if (menuDescriptor) descriptors.push(menuDescriptor);
+            }
+        } else throw Error("useVuuMenuActions no dataSource provided");
+        return descriptors;
+    }, [
+        dataSource
+    ]);
+    const { showDialog, closeDialog, showPrompt } = useModal();
+    const { showNotification } = useNotifications();
+    const showCustomComponentInDialog = useCallback((componentId, ds, table)=>{
+        const sessionDs = new VuuDataSource({
+            columns: ds.columns,
+            table,
+            viewport: table.table
+        });
+        const handleOpenChangePrompt = (open)=>{
+            if (!open) ds.unsubscribe();
+        };
+        const Component = getLayoutComponent(componentId);
+        showPrompt(/*#__PURE__*/ jsx(Component, {
+            dataSource: sessionDs
+        }), {
+            title: "Confirm operation on selected rows",
+            onOpenChange: handleOpenChangePrompt
+        });
+    }, [
+        VuuDataSource,
+        showPrompt
+    ]);
+    const showSessionEditingForm = useCallback(async (ds, action)=>{
+        const { tableSchema } = action;
+        if (tableSchema) {
+            const formConfig = getFormConfig(action);
+            showDialog(/*#__PURE__*/ jsx(SessionEditingForm, {
+                ...formConfig,
+                onClose: closeDialog
+            }), "Set Parameters");
+        }
+        const sessionDs = await ds.createSessionDataSource?.('All');
+        const handleSubmit = ()=>{
+            sessionDs?.rpcRequest?.({
+                params: {
+                    save: true
+                },
+                rpcName: "endEditSession",
+                type: "RPC_REQUEST"
+            });
+            closeDialog();
+        };
+        if (sessionDs) showDialog(/*#__PURE__*/ jsx(BulkEditPanel, {
+            sessionDs: sessionDs,
+            onSubmit: handleSubmit,
+            parentDs: ds
+        }), "Multi Row Edit", [
+            /*#__PURE__*/ jsx(Button, {
+                onClick: closeDialog,
+                children: "Cancel"
+            }, "cancel"),
+            /*#__PURE__*/ jsx(Button, {
+                onClick: handleSubmit,
+                children: "Save"
+            }, "submit")
+        ]);
+    }, [
+        closeDialog,
+        showDialog
+    ]);
+    const getMenuRpcRequest = (options)=>{
+        const { rpcName } = options;
+        if (isCellMenu(options)) return {
+            field: options.field,
+            rowKey: options.rowKey,
+            rpcName,
+            value: options.value,
+            type: "VIEW_PORT_MENU_CELL_RPC"
+        };
+        if (isRowMenu(options)) return {
+            rowKey: options.rowKey,
+            row: options.row,
+            rpcName,
+            type: "VIEW_PORT_MENU_ROW_RPC"
+        };
+        if (isSelectionMenu(options)) return {
+            rpcName,
+            type: "VIEW_PORT_MENUS_SELECT_RPC"
+        };
+        return {
+            rpcName,
+            type: "VIEW_PORT_MENU_TABLE_RPC"
+        };
+    };
+    const menuActionHandler = useCallback((menuItemId, options)=>{
+        if (clientSideMenuActionHandler?.(menuItemId, options)) return true;
+        if ("MENU_RPC_CALL" === menuItemId) {
+            const rpcRequest = getMenuRpcRequest(options);
+            dataSource?.menuRpcCall(rpcRequest).then((rpcResponse)=>{
+                if (rpcResponse) {
+                    if (onRpcResponse?.(rpcResponse) === true) return true;
+                    if (isActionMessage(rpcResponse)) {
+                        if (hasShowNotificationAction(rpcResponse)) {
+                            const { action: { message, title = "Success" } } = rpcResponse;
+                            showNotification({
+                                status: "success",
+                                content: message,
+                                header: title,
+                                type: NotificationType.Toast
+                            });
+                        } else if (isSessionTableActionMessage(rpcResponse)) showSessionEditingForm(dataSource, rpcResponse.action);
+                        else if (isCustomComponentActionMessage(rpcResponse)) showCustomComponentInDialog(rpcResponse.action.renderComponent, dataSource, rpcResponse.action.table);
+                    }
+                }
+            });
+            return true;
+        }
+        if ("link-table" === menuItemId) {
+            if (dataSource) dataSource.visualLink = options;
+            return true;
+        }
+        console.log(`useViewServer handleMenuAction,  can't handle action type ${menuItemId}`);
+        return false;
+    }, [
+        clientSideMenuActionHandler,
+        dataSource,
+        onRpcResponse,
+        showCustomComponentInDialog,
+        showNotification,
+        showSessionEditingForm
+    ]);
+    return {
+        menuBuilder,
+        menuActionHandler
+    };
+};
+export { isRowMenu, isSelectionMenu, useVuuMenuActions };

package/src/hooks/useVuuTables.mjs

@@ -0,0 +1,32 @@
+import { useData } from "@vuu-ui/vuu-utils";
+import { useCallback, useEffect, useState } from "react";
+const useVuuTables = ()=>{
+    const [tableSchemas, setTableSchemas] = useState();
+    const { getServerAPI } = useData();
+    const buildTables = useCallback((schemas)=>{
+        const vuuTables = new Map();
+        schemas.forEach((schema)=>{
+            const { module, table } = schema.table;
+            vuuTables.set(`${module}:${table}`, schema);
+        });
+        return vuuTables;
+    }, []);
+    useEffect(()=>{
+        async function fetchTableMetadata() {
+            try {
+                const server = await getServerAPI();
+                const { tables } = await server.getTableList();
+                const tableSchemas = await Promise.all(tables.map((vuuTable)=>server.getTableSchema(vuuTable)));
+                setTableSchemas(tableSchemas);
+            } catch (err) {
+                console.warn(`useVuuTables: error fetching table metadata ${String(err)}`);
+            }
+        }
+        fetchTableMetadata();
+    }, [
+        buildTables,
+        getServerAPI
+    ]);
+    return tableSchemas;
+};
+export { useVuuTables };

package/src/index.mjs

@@ -0,0 +1,10 @@
+export * from "./data-editing/index.mjs";
+export * from "./datasource-provider/index.mjs";
+export * from "./session-editing-form/index.mjs";
+export { useLookupValues } from "./hooks/useLookupValues.mjs";
+export { useSessionDataSource } from "./hooks/useSessionDataSource.mjs";
+export { getTypeaheadParams, useTypeaheadSuggestions } from "./hooks/useTypeaheadSuggestions.mjs";
+export { useVisualLinks } from "./hooks/useVisualLinks.mjs";
+export { isRowMenu, isSelectionMenu, useVuuMenuActions } from "./hooks/useVuuMenuActions.mjs";
+export { useVuuTables } from "./hooks/useVuuTables.mjs";
+export { useLostConnection } from "./lost-connection-indicator/useLostConnection.mjs";

package/src/lost-connection-indicator/LostConnectionIndicator.css.js

@@ -0,0 +1,29 @@
+const css = `
+.vuuLostConnectionIndicator {
+  --spinner-color: var(--vuuSpinner-color, #e23434);
+  align-items: center;
+  gap: var(--salt-spacing-300);
+  flex-direction: column;
+  justify-content: center;
+  display: flex;
+
+  & .vuuLostConnectionIndicator-spinner {
+    background: radial-gradient(farthest-side,var(--spinner-color) 94%,#0000) top/9px 9px no-repeat,
+                conic-gradient(#0000 30%,var(--spinner-color));
+    border-radius: 50%;
+    width: 75px;
+    height: 75px;
+    animation: 1s linear infinite spinner-rounded-comet-anim;
+    mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
+  }
+}
+
+@keyframes spinner-rounded-comet-anim {
+  100% {
+    transform: rotate(1turn);
+  }
+}
+
+
+`;
+export default css;