@kronor/dtv 0.2.9

package/src/App.tsx

@@ -0,0 +1,540 @@
+import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { GraphQLClient } from 'graphql-request';
+import Table from './components/Table';
+import { nativeRuntime } from './framework/native-runtime';
+import FilterForm from './components/FilterForm';
+import { Menubar } from 'primereact/menubar';
+import { InputText } from 'primereact/inputtext';
+import { Button } from 'primereact/button';
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+import { Toast } from 'primereact/toast';
+import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog';
+import TablePagination from './components/TablePagination';
+import AIAssistantForm from './components/AIAssistantForm';
+import SavedFilterList from './components/SavedFilterList';
+import { fetchData, FetchDataResult } from './framework/data';
+import { FilterState, useAppState } from './framework/state';
+import { FilterSchema, getFieldNodes, FilterField, FilterId } from './framework/filters';
+import { parseViewJson } from './framework/view-parser';
+import { View } from './framework/view';
+import { generateGraphQLQuery } from './framework/graphql';
+import { savedFilterManager, SavedFilter } from './framework/saved-filters';
+import { parseFilterFormState } from './framework/filter-form-state';
+import { ColumnDefinition } from './framework/column-definition';
+import { Runtime } from './framework/runtime';
+import { getFilterFromUrl, clearFilterFromUrl, createShareableUrl, copyToClipboard, setFilterInUrl } from './framework/filter-sharing';
+import { DataTable } from 'primereact/datatable';
+
+export interface AppProps {
+    graphqlHost: string;
+    graphqlToken: string;
+    geminiApiKey: string;
+    viewsJson: string; // JSON string containing array of view definitions
+    showViewsMenu: boolean;
+    rowsPerPage?: number;
+    showViewTitle: boolean; // Option to show/hide view title
+    externalRuntime?: Runtime; // Optional external runtime that takes precedence over built-in runtimes
+    isOverlay?: boolean; // Internal flag to avoid nesting popout buttons
+    onCloseOverlay?: () => void; // Provided only to overlay instance to close parent overlay
+    syncFilterStateToUrl: boolean; // When true, keep current filter state encoded in URL (dtv-filter-state)
+}
+
+const builtInRuntime: Runtime = nativeRuntime
+
+function App({ graphqlHost, graphqlToken, geminiApiKey, showViewsMenu, rowsPerPage = 20, showViewTitle, viewsJson, externalRuntime, isOverlay = false, onCloseOverlay, syncFilterStateToUrl = false }: AppProps) {
+    const views = useMemo(() => {
+        const viewDefinitions = JSON.parse(viewsJson);
+        return viewDefinitions.map((view: unknown) => parseViewJson(view, builtInRuntime, externalRuntime));
+    }, [viewsJson, externalRuntime]) as View[];
+
+    const client = useMemo(() => new GraphQLClient(graphqlHost, {
+        headers: {
+            contentType: 'application/json',
+            Authorization: `Bearer ${graphqlToken}`
+        },
+    }), [graphqlHost, graphqlToken]);
+
+    // Determine initial filter state (shared param precedence) BEFORE initializing app state
+    const initialFilterStateFromUrl = useMemo(() => {
+        const raw = getFilterFromUrl();
+        if (!raw) return undefined;
+        try {
+            const firstView = views[0];
+            if (!firstView) return undefined;
+            return parseFilterFormState(raw, firstView.filterSchema);
+        } catch (e) {
+            console.warn('Invalid initial filter state from URL, falling back to defaults', e);
+            return undefined;
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [viewsJson]);
+
+    const { state, selectedView, setSelectedViewId, setFilterSchema, setFilterState, setDataRows } = useAppState(views, initialFilterStateFromUrl as any);
+
+    // Memoized GraphQL query generation for the selected view
+    const memoizedQuery = useMemo(() => {
+        return generateGraphQLQuery(
+            selectedView.collectionName,
+            selectedView.columnDefinitions as ColumnDefinition[],
+            selectedView.boolExpType,
+            selectedView.orderByType,
+            selectedView.paginationKey
+        );
+    }, [selectedView.id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const [savedFilters, setSavedFilters] = useState<SavedFilter[]>([]);
+    const [search, setSearch] = useState('');
+    const toast = useRef<Toast>(null);
+    const tableRef = useRef<DataTable<any>>(null);
+    const [showAIAssistantForm, setShowAIAssistantForm] = useState(false);
+    const [showFilterForm, setShowFilterForm] = useState(false);
+    const [showSavedFilterList, setShowSavedFilterList] = useState(false);
+    const [refetchTrigger, setRefetchTrigger] = useState(0);
+    const [showPopout, setShowPopout] = useState(false);
+
+    // Auto-expand filter panel when user starts typing a search (help discover filters)
+    useEffect(() => {
+        if (search && !showFilterForm) {
+            setShowFilterForm(true);
+        }
+    }, [search, showFilterForm]);
+
+    // Lock body scroll when popout is open (only in root instance)
+    useEffect(() => {
+        if (!isOverlay && showPopout) {
+            const previousOverflow = document.body.style.overflow;
+            document.body.style.overflow = 'hidden';
+            return () => {
+                document.body.style.overflow = previousOverflow;
+            };
+        }
+    }, [showPopout, isOverlay]);
+
+    // Close overlay on ESC key (only applies to overlay instance)
+    useEffect(() => {
+        if (!isOverlay) return;
+        const handleKey = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                onCloseOverlay?.();
+            }
+        };
+        window.addEventListener('keydown', handleKey);
+        return () => window.removeEventListener('keydown', handleKey);
+    }, [isOverlay, onCloseOverlay]);
+
+    // Pagination state
+    const hasNextPage = state.data.rows.length === rowsPerPage;
+    const hasPrevPage = state.pagination.page > 0;
+
+    // Load saved filters from localStorage on mount
+    useEffect(() => {
+        const filters = savedFilterManager.loadFilters(selectedView.id, selectedView.filterSchema);
+        setSavedFilters(filters);
+    }, [selectedView.id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    // After initial mount, if we consumed a URL param and persistence is off, clear it
+    useEffect(() => {
+        if (initialFilterStateFromUrl && !syncFilterStateToUrl) {
+            clearFilterFromUrl();
+            toast.current?.show({ severity: 'info', summary: 'Filter Loaded', detail: 'Loaded from URL', life: 3000 });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    // Persist current filter state only when filters are applied (refetchTrigger increments)
+    useEffect(() => {
+        if (!syncFilterStateToUrl) return;
+        // Only write after an application event (refetchTrigger change), not on every keystroke
+        setFilterInUrl(state.filterState);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [syncFilterStateToUrl, refetchTrigger]);
+
+    // Save a new filter
+    const handleSaveFilter = (state: FilterState) => {
+        const name = prompt('Enter a name for this filter:');
+        if (!name) return;
+
+        const savedFilter = savedFilterManager.saveFilter({
+            view: selectedView.id,
+            name,
+            state: state
+        });
+
+        // Update local state
+        setSavedFilters(prev => [...prev, savedFilter]);
+
+        // Show success toast
+        toast.current?.show({
+            severity: 'success',
+            summary: 'Filter Saved',
+            detail: `Filter "${name}" has been saved successfully`,
+            life: 3000
+        });
+    };
+
+    // Update an existing filter
+    const handleUpdateFilter = (filter: SavedFilter, state: FilterState) => {
+        confirmDialog({
+            message: `Are you sure you want to overwrite the existing filter "${filter.name}"?`,
+            header: 'Confirm Filter Update',
+            icon: 'pi pi-exclamation-triangle',
+            defaultFocus: 'reject',
+            acceptClassName: 'p-button-danger',
+            accept: () => {
+                const updatedFilter = savedFilterManager.updateFilter(filter, {
+                    state: state
+                });
+
+                if (updatedFilter) {
+                    // Update local state
+                    setSavedFilters(prev => prev.map(f =>
+                        f.id === filter.id ? updatedFilter : f
+                    ));
+
+                    // Show success toast
+                    toast.current?.show({
+                        severity: 'success',
+                        summary: 'Filter Updated',
+                        detail: `Filter "${filter.name}" has been updated successfully`,
+                        life: 3000
+                    });
+                }
+            },
+            reject: () => {
+                // User cancelled - no action needed
+            }
+        });
+    };
+
+    // Delete a saved filter
+    const handleDeleteFilter = (filterId: string) => {
+        const success = savedFilterManager.deleteFilter(filterId);
+        if (success) {
+            // Update local state
+            setSavedFilters(prev => prev.filter(f => f.id !== filterId));
+
+            // Show success toast
+            toast.current?.show({
+                severity: 'success',
+                summary: 'Filter Deleted',
+                detail: 'Filter has been deleted successfully',
+                life: 3000
+            });
+        }
+    };
+
+    // Share current filter state
+    const handleShareFilter = async () => {
+        try {
+            const shareableUrl = createShareableUrl(state.filterState);
+            await copyToClipboard(shareableUrl);
+
+            toast.current?.show({
+                severity: 'success',
+                summary: 'Filter Shared',
+                detail: 'Shareable link copied to clipboard!',
+                life: 3000
+            });
+        } catch (error) {
+            console.error('Failed to share filter:', error);
+            toast.current?.show({
+                severity: 'error',
+                summary: 'Share Failed',
+                detail: 'Failed to create shareable link',
+                life: 3000
+            });
+        }
+    };
+
+    // Share a specific saved filter state
+    const handleShareSavedFilter = async (filterState: FilterState) => {
+        try {
+            const shareableUrl = createShareableUrl(filterState);
+            await copyToClipboard(shareableUrl);
+
+            toast.current?.show({
+                severity: 'success',
+                summary: 'Filter Shared',
+                detail: 'Shareable link copied to clipboard!',
+                life: 3000
+            });
+        } catch (error) {
+            console.error('Failed to share saved filter:', error);
+            toast.current?.show({
+                severity: 'error',
+                summary: 'Share Failed',
+                detail: 'Failed to create shareable link',
+                life: 3000
+            });
+        }
+    };
+
+    // Export current view as CSV
+    const handleExportCSV = () => {
+        if (tableRef.current) {
+            tableRef.current.exportCSV({ selectionOnly: false });
+        }
+    };
+
+    const fetchDataWrapper = useCallback((cursor: string | number | null): Promise<FetchDataResult> => {
+        return fetchData({
+            client,
+            view: selectedView,
+            query: memoizedQuery,
+            filterState: state.filterState,
+            rows: rowsPerPage,
+            cursor
+        });
+    }, [client, selectedView, memoizedQuery, state.filterState, rowsPerPage]);
+
+    // Fetch data when view changes or refetch is triggered
+    useEffect(() => {
+        fetchDataWrapper(null)
+            .then(dataRows => setDataRows(dataRows))
+            .catch(error => {
+                if (error instanceof DOMException && error.name === 'AbortError') {
+                    // Request was aborted, no action needed
+                    return;
+                }
+            });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [state.selectedViewId, refetchTrigger]);
+
+    // When filter is loaded, set filter state
+    const handleFilterLoad = (filterState: FilterState) => {
+        setFilterState(filterState);
+    };
+
+    // Filter filterSchema by search, get filter IDs
+    const visibleFilterIds: FilterId[] = state.filterSchemasAndGroups.filters
+        .flatMap((filter: FilterSchema) => {
+            function stringMatchesSearchQuery(string: string) {
+                return string.toLowerCase().includes(search.toLowerCase());
+            }
+
+            function fieldMatchesSearchQuery(field: FilterField): boolean {
+                if (typeof field === 'string') {
+                    return stringMatchesSearchQuery(field);
+                } else if ('and' in field) {
+                    return field.and.some((f: string) => stringMatchesSearchQuery(f));
+                } else if ('or' in field) {
+                    return field.or.some((f: string) => stringMatchesSearchQuery(f));
+                }
+                return false;
+            }
+
+            if (stringMatchesSearchQuery(filter.label)) return [filter.id];
+            const fieldFilterExprs = getFieldNodes(filter.expression);
+            return fieldFilterExprs.some(expr => fieldMatchesSearchQuery(expr.field)) ? [filter.id] : []
+        });
+
+    // Next page handler
+    const handleNextPage = async () => {
+        const cursor = state.data.rows.length > 0 ? state.data.rows[state.data.rows.length - 1][selectedView.paginationKey] : null
+        if (typeof cursor !== 'string' && typeof cursor !== 'number') {
+            console.error('Invalid cursor type:', cursor);
+            return;
+        }
+        const newData = await fetchDataWrapper(cursor);
+        setDataRows(
+            newData,
+            { page: state.pagination.page + 1, cursors: [...state.pagination.cursors, cursor] }
+        );
+    };
+
+    // Previous page handler
+    const handlePrevPage = async () => {
+        if (state.pagination.page === 0) return;
+        const prevCursors = state.pagination.cursors.slice(0, -1)
+        const prevCursor = prevCursors[prevCursors.length - 1] ?? null;
+        const newData = await fetchDataWrapper(prevCursor)
+        setDataRows(
+            newData,
+            { page: state.pagination.page - 1, cursors: prevCursors }
+        );
+    };
+
+    return (
+        <div className='tw:p-2'>
+            <Toast ref={toast} />
+            <ConfirmDialog />
+            <Menubar
+                model={[
+                    ...(showViewsMenu ? [{
+                        label: 'Views',
+                        icon: 'pi pi-eye',
+                        items: views.map((view: View) => ({
+                            label: view.title,
+                            icon: 'pi pi-table',
+                            command: () => setSelectedViewId(view.id)
+                        }))
+                    }] : [])
+                ]}
+                className="tw:mb-4 tw:border-b"
+                start={
+                    <div className="tw:flex tw:gap-2 tw:items-center">
+                        <Button
+                            type="button"
+                            icon={showFilterForm ? 'pi pi-filter-slash' : 'pi pi-filter'}
+                            outlined
+                            size='small'
+                            label={showFilterForm ? 'Hide Filters' : 'Filters'}
+                            onClick={() => {
+                                setShowFilterForm(prev => {
+                                    const next = !prev;
+                                    if (!next) {
+                                        // Clear search when hiding filters to avoid auto-expanding again
+                                        setSearch('');
+                                    }
+                                    return next;
+                                });
+                            }}
+                        />
+                        <Button
+                            type="button"
+                            icon='pi pi-bookmark'
+                            outlined
+                            size='small'
+                            label={showSavedFilterList ? 'Hide Saved Filters' : 'Saved Filters'}
+                            onClick={() => setShowSavedFilterList(v => !v)}
+                        />
+                        <Button
+                            type="button"
+                            icon='pi pi-table'
+                            outlined
+                            size='small'
+                            label='Export page to CSV'
+                            onClick={handleExportCSV}
+                        />
+                        {(!isOverlay || onCloseOverlay) && (
+                            <Button
+                                type="button"
+                                icon={isOverlay ? 'pi pi-times' : 'pi pi-window-maximize'}
+                                outlined
+                                size='small'
+                                label={isOverlay ? 'Close Popout' : 'Popout'}
+                                onClick={() => {
+                                    if (isOverlay) {
+                                        onCloseOverlay?.();
+                                    } else {
+                                        setShowPopout(true);
+                                    }
+                                }}
+                            />
+                        )}
+                    </div>
+                }
+                end={
+                    <div className="tw:flex tw:gap-2">
+                        <IconField iconPosition="left">
+                            <InputIcon className="pi pi-search" />
+                            <InputText value={search} onChange={e => setSearch(e.target.value)} placeholder="Search filters..." />
+                        </IconField>
+                        <Button
+                            type="button"
+                            size='small'
+                            icon='pi pi-sparkles'
+                            label='AI Filter Assistant'
+                            onClick={() => setShowAIAssistantForm(v => !v)}
+                        />
+                    </div>
+                }
+            />
+            {
+                (showViewTitle || isOverlay) && (
+                    <h1 className="tw:text-2xl tw:mb-4 tw:font-bold">{selectedView.title}</h1>
+                )
+            }
+
+            {
+                showAIAssistantForm && (
+                    <div className="tw:mb-6">
+                        <AIAssistantForm
+                            filterSchema={state.filterSchemasAndGroups}
+                            filterState={state.filterState}
+                            setFilterSchema={setFilterSchema}
+                            setFilterState={setFilterState}
+                            selectedView={selectedView}
+                            geminiApiKey={geminiApiKey}
+                            toast={toast}
+                            setShowFilterForm={setShowFilterForm}
+                        />
+                    </div>
+                )
+            }
+
+            <SavedFilterList
+                savedFilters={savedFilters}
+                onFilterDelete={handleDeleteFilter}
+                onFilterLoad={handleFilterLoad}
+                onFilterApply={() => setRefetchTrigger(prev => prev + 1)}
+                onFilterShare={handleShareSavedFilter}
+                visible={showSavedFilterList}
+                filterSchema={state.filterSchemasAndGroups}
+            />
+
+            {
+                showFilterForm && (
+                    <FilterForm
+                        filterSchemasAndGroups={state.filterSchemasAndGroups}
+                        filterState={state.filterState}
+                        setFilterState={setFilterState}
+                        onSaveFilter={handleSaveFilter}
+                        onUpdateFilter={handleUpdateFilter}
+                        onShareFilter={handleShareFilter}
+                        savedFilters={savedFilters}
+                        visibleFilterIds={visibleFilterIds}
+                        onSubmit={() => {
+                            setRefetchTrigger(prev => prev + 1);
+                        }}
+                    />
+                )
+            }
+            <Table
+                viewId={selectedView.id}
+                ref={tableRef}
+                columns={selectedView.columnDefinitions}
+                data={state.data.flattenedRows}
+                noRowsComponent={selectedView.noRowsComponent}
+                setFilterState={setFilterState}
+                filterState={state.filterState}
+                triggerRefetch={() => setRefetchTrigger(prev => prev + 1)}
+            />
+            {
+                state.data.rows.length > 0 && (
+                    <TablePagination
+                        onPageChange={handleNextPage}
+                        onPrevPage={handlePrevPage}
+                        hasNextPage={hasNextPage}
+                        hasPrevPage={hasPrevPage}
+                        currentPage={state.pagination.page}
+                        rowsPerPage={rowsPerPage}
+                        actualRows={state.data.rows.length}
+                    />
+                )
+            }
+            {showPopout && !isOverlay && createPortal(
+                <div className="tw:fixed tw:inset-0 tw:bg-white tw:overflow-auto">
+                    <App
+                        graphqlHost={graphqlHost}
+                        graphqlToken={graphqlToken}
+                        geminiApiKey={geminiApiKey}
+                        showViewsMenu={showViewsMenu}
+                        rowsPerPage={rowsPerPage}
+                        showViewTitle={showViewTitle}
+                        viewsJson={viewsJson}
+                        externalRuntime={externalRuntime}
+                        isOverlay={true}
+                        onCloseOverlay={() => setShowPopout(false)}
+                        syncFilterStateToUrl={syncFilterStateToUrl}
+                    />
+                </div>,
+                document.body
+            )}
+        </div>
+    );
+}
+
+export default App;

package/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>