@tanstack/cta-ui-base 0.15.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package/dist/app.d.ts

@@ -0,0 +1 @@
+export default function RootComponent(): import("react/jsx-runtime").JSX.Element;

package/dist/app.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppSidebar } from './components/cta-sidebar';
+import { AppHeader } from './components/header';
+import { BackgroundAnimation } from './components/background-animation';
+import FileNavigator from './components/file-navigator';
+import StartupDialog from './components/startup-dialog';
+import { CTAProvider } from './components/cta-provider';
+export default function RootComponent() {
+    return (_jsx(CTAProvider, { children: _jsxs("main", { className: "min-w-[1280px]", children: [_jsx(BackgroundAnimation, {}), _jsxs("div", { className: "min-h-dvh p-2 sm:p-4 space-y-2 sm:space-y-4 @container", children: [_jsx(AppHeader, {}), _jsxs("div", { className: "flex flex-row", children: [_jsx("div", { className: "w-1/3 @8xl:w-1/4 pr-2", children: _jsx(AppSidebar, {}) }), _jsx("div", { className: "w-2/3 @8xl:w-3/4 pl-2", children: _jsx(FileNavigator, {}) })] })] }), _jsx(StartupDialog, {})] }) }));
+}

package/dist/components/add-on-info-dialog.d.ts

@@ -0,0 +1,5 @@
+import type { AddOnInfo } from '../types';
+export default function CustomAddOnDialog({ addOn, onClose, }: {
+    addOn?: AddOnInfo;
+    onClose: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/add-on-info-dialog.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogContent } from './ui/dialog';
+export default function CustomAddOnDialog({ addOn, onClose, }) {
+    return (_jsx(Dialog, { modal: true, open: !!addOn, onOpenChange: onClose, children: _jsx(DialogContent, { className: "sm:min-w-[425px] sm:max-w-fit", children: _jsxs("div", { className: "flex flex-row", children: [addOn?.smallLogo && (_jsx("img", { src: `data:image/svg+xml,${encodeURIComponent(addOn.smallLogo)}`, alt: addOn.name, className: "w-15" })), _jsxs("div", { className: "flex flex-col ml-4 gap-4", children: [_jsx("p", { className: "text-lg font-bold", children: addOn?.name }), _jsx("p", { className: "text-sm text-gray-500", children: addOn?.description }), _jsxs("a", { href: addOn?.link, target: "_blank", rel: "noopener noreferrer", className: "text-sm text-blue-500 underline", children: ["More information on ", addOn?.name] })] })] }) }) }));
+}

package/dist/components/background-animation.d.ts

@@ -0,0 +1 @@
+export declare function BackgroundAnimation(): import("react/jsx-runtime").JSX.Element;

package/dist/components/background-animation.js

@@ -0,0 +1,144 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useMounted } from '../hooks/use-mounted';
+import { usePrefersReducedMotion } from '../hooks/use-preferred-reduced-motion';
+export function BackgroundAnimation() {
+    const canvasRef = React.useRef(null);
+    const prefersReducedMotion = usePrefersReducedMotion();
+    const mounted = useMounted();
+    const isHomePage = false;
+    React.useEffect(() => {
+        if (prefersReducedMotion !== false) {
+            return;
+        }
+        const canvas = canvasRef.current;
+        let morphDuration = 2000;
+        const waitDuration = 1000 * 60 * 2;
+        const easingFn = cubicBezier(0.645, 0.045, 0.355, 1.0);
+        if (canvas) {
+            const ctx = canvas.getContext('2d');
+            let rafId = null;
+            let timeout = null;
+            let startTime = performance.now();
+            function createBlobs() {
+                return shuffle([
+                    {
+                        color: { h: 10, s: 100, l: 50 },
+                    },
+                    {
+                        color: { h: 40, s: 100, l: 50 },
+                    },
+                    {
+                        color: { h: 150, s: 100, l: 50 },
+                    },
+                    {
+                        color: { h: 200, s: 100, l: 50 },
+                    },
+                ]).map((blob) => ({
+                    ...blob,
+                    x: Math.random() * canvas.width,
+                    y: Math.random() * canvas.height,
+                    r: Math.random() * 500 + 700,
+                    colorH: blob.color.h,
+                    colorS: blob.color.s,
+                    colorL: blob.color.l,
+                }));
+            }
+            function shuffle(array) {
+                for (let i = array.length - 1; i > 0; i--) {
+                    const j = Math.floor(Math.random() * (i + 1));
+                    [array[i], array[j]] = [array[j], array[i]];
+                }
+                return array;
+            }
+            let startBlobs = createBlobs();
+            let currentBlobs = startBlobs;
+            let targetBlobs = [];
+            function resizeHandler() {
+                // Create an offscreen canvas and copy the current content
+                const offscreen = document.createElement('canvas');
+                offscreen.width = canvas.width;
+                offscreen.height = canvas.height;
+                offscreen.getContext('2d').drawImage(canvas, 0, 0);
+                // Resize the main canvas
+                canvas.width = window.innerWidth;
+                canvas.height = window.innerHeight;
+                // Stretch and redraw the saved content to fill the new size
+                ctx.drawImage(offscreen, 0, 0, canvas.width, canvas.height);
+            }
+            function start() {
+                if (timeout) {
+                    clearTimeout(timeout);
+                }
+                if (rafId) {
+                    cancelAnimationFrame(rafId);
+                }
+                startBlobs = JSON.parse(JSON.stringify(currentBlobs));
+                targetBlobs = createBlobs();
+                startTime = performance.now();
+                animate();
+            }
+            function animate() {
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+                const time = performance.now() - startTime;
+                const progress = time / morphDuration;
+                const easedProgress = easingFn(progress);
+                // Draw the blobs
+                startBlobs.forEach((startBlob, i) => {
+                    const targetBlob = targetBlobs[i];
+                    currentBlobs[i].x = interpolate(startBlob.x, targetBlob.x, easedProgress);
+                    currentBlobs[i].y = interpolate(startBlob.y, targetBlob.y, easedProgress);
+                    const gradient = ctx.createRadialGradient(currentBlobs[i].x, currentBlobs[i].y, 0, currentBlobs[i].x, currentBlobs[i].y, currentBlobs[i].r);
+                    currentBlobs[i].colorH = interpolate(startBlob.colorH, targetBlob.colorH, easedProgress);
+                    currentBlobs[i].colorS = interpolate(startBlob.colorS, targetBlob.colorS, easedProgress);
+                    currentBlobs[i].colorL = interpolate(startBlob.colorL, targetBlob.colorL, easedProgress);
+                    gradient.addColorStop(0, `hsla(${currentBlobs[i].colorH}, ${currentBlobs[i].colorS}%, ${currentBlobs[i].colorL}%, 1)`);
+                    gradient.addColorStop(1, `hsla(${currentBlobs[i].colorH}, ${currentBlobs[i].colorS}%, ${currentBlobs[i].colorL}%, 0)`);
+                    ctx.fillStyle = gradient;
+                    ctx.beginPath();
+                    ctx.arc(currentBlobs[i].x, currentBlobs[i].y, currentBlobs[i].r, 0, Math.PI * 2);
+                    ctx.fill();
+                });
+                if (progress < 1) {
+                    rafId = requestAnimationFrame(animate);
+                }
+                else {
+                    timeout = setTimeout(() => {
+                        morphDuration = 4000;
+                        start();
+                    }, waitDuration);
+                }
+            }
+            resizeHandler();
+            start();
+            window.addEventListener('resize', resizeHandler);
+            return () => {
+                if (rafId) {
+                    cancelAnimationFrame(rafId);
+                }
+                if (timeout) {
+                    clearTimeout(timeout);
+                }
+                window.removeEventListener('resize', resizeHandler);
+            };
+        }
+    }, [prefersReducedMotion]);
+    return (_jsx("div", { className: twMerge('fixed inset-0 z-0 opacity-20 pointer-events-none', 'transition-opacity duration-[2s] ease-linear', '[&+*]:relative', mounted
+            ? isHomePage
+                ? 'opacity-10 dark:opacity-20'
+                : 'opacity-10 dark:opacity-20'
+            : 'opacity-0'), children: _jsx("canvas", { ref: canvasRef }) }));
+}
+function cubicBezier(_p1x, p1y, _p2x, p2y) {
+    return function (t) {
+        const cy = 3 * p1y;
+        const by = 3 * (p2y - p1y) - cy;
+        const ay = 1 - cy - by;
+        const y = ((ay * t + by) * t + cy) * t;
+        return y;
+    };
+}
+function interpolate(start, end, progress) {
+    return start + (end - start) * progress;
+}

package/dist/components/cta-provider.d.ts

@@ -0,0 +1,3 @@
+export declare function CTAProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/cta-provider.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useManager } from '../store/project';
+import { Toaster } from './toaster';
+import { QueryProvider } from './query-provider';
+function InternalHandler({ children }) {
+    useManager();
+    return (_jsxs(_Fragment, { children: [children, _jsx(Toaster, {})] }));
+}
+export function CTAProvider({ children }) {
+    return (_jsx(QueryProvider, { children: _jsx(InternalHandler, { children: children }) }));
+}

package/dist/components/cta-sidebar.d.ts

@@ -0,0 +1 @@
+export declare function AppSidebar(): import("react/jsx-runtime").JSX.Element;

package/dist/components/cta-sidebar.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useApplicationMode, useReady } from '../store/project';
+import SelectedAddOns from './sidebar-items/add-ons';
+import RunAddOns from './sidebar-items/run-add-ons';
+import RunCreateApp from './sidebar-items/run-create-app';
+import ProjectName from './sidebar-items/project-name';
+import ModeSelector from './sidebar-items/mode-selector';
+import TypescriptSwitch from './sidebar-items/typescript-switch';
+import StarterDialog from './sidebar-items/starter';
+import SidebarGroup from './sidebar-items/sidebar-group';
+export function AppSidebar() {
+    const ready = useReady();
+    const mode = useApplicationMode();
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [ready && (_jsxs(_Fragment, { children: [mode === 'setup' && (_jsxs(SidebarGroup, { children: [_jsx(ProjectName, {}), _jsx(ModeSelector, {}), _jsx(TypescriptSwitch, {})] })), _jsx(SidebarGroup, { children: _jsx(SelectedAddOns, {}) }), mode === 'setup' && (_jsx(SidebarGroup, { children: _jsx(StarterDialog, {}) }))] })), _jsxs("div", { className: "mt-5", children: [_jsx(RunAddOns, {}), _jsx(RunCreateApp, {})] })] }));
+}

package/dist/components/custom-add-on-dialog.d.ts

@@ -0,0 +1 @@
+export default function CustomAddOnDialog(): import("react/jsx-runtime").JSX.Element;

package/dist/components/custom-add-on-dialog.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { TicketPlusIcon } from 'lucide-react';
+import { addCustomAddOn, useAddOns, useRouterMode } from '../store/project';
+import { loadRemoteAddOn } from '../lib/api';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, } from './ui/dialog';
+export default function CustomAddOnDialog() {
+    const [url, setUrl] = useState('');
+    const [open, setOpen] = useState(false);
+    const mode = useRouterMode();
+    const { toggleAddOn } = useAddOns();
+    async function onImport() {
+        const data = await loadRemoteAddOn(url);
+        if ('error' in data) {
+            toast.error('Failed to load add-on', {
+                description: data.error,
+            });
+        }
+        else {
+            addCustomAddOn(data);
+            if (data.modes.includes(mode)) {
+                toggleAddOn(data.id);
+            }
+            setOpen(false);
+        }
+    }
+    return (_jsxs("div", { children: [_jsxs(Button, { variant: "secondary", className: "w-full", onClick: () => {
+                    setUrl('');
+                    setOpen(true);
+                }, children: [_jsx(TicketPlusIcon, { className: "w-4 h-4" }), "Import Custom Add-On"] }), _jsx(Dialog, { modal: true, open: open, onOpenChange: setOpen, children: _jsxs(DialogContent, { className: "sm:min-w-[425px] sm:max-w-fit", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Import Custom Add-On" }) }), _jsx("div", { children: _jsx(Input, { value: url, onChange: (e) => setUrl(e.target.value), placeholder: "https://github.com/myorg/myproject/add-on.json", className: "min-w-lg w-full", onKeyDown: (e) => {
+                                    if (e.key === 'Enter') {
+                                        onImport();
+                                    }
+                                } }) }), _jsx(DialogFooter, { children: _jsx(Button, { onClick: onImport, children: "Import" }) })] }) })] }));
+}

package/dist/components/file-navigator.d.ts

@@ -0,0 +1,2 @@
+export declare function Filters(): import("react/jsx-runtime").JSX.Element;
+export default function FileNavigator(): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/file-navigator.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { FileText, Folder } from 'lucide-react';
+import { useApplicationMode, useDryRun, useFilters, useOriginalOutput, useProjectLocalFiles, useReady, } from '../store/project';
+import { getFileClass, twClasses } from '../file-classes';
+import FileViewer from './file-viewer';
+import FileTree from './file-tree';
+import { Label } from './ui/label';
+import { Switch } from './ui/switch';
+export function Filters() {
+    const { includedFiles, toggleFilter } = useFilters();
+    return (_jsxs("div", { className: "bg-white dark:bg-black/40 shadow-xl p-4 rounded-lg flex flex-row items-center gap-4 mb-2", children: [_jsx("h3", { className: "font-medium whitespace-nowrap", children: "File Filters" }), _jsxs("div", { className: "flex flex-row items-center", children: [_jsx(Switch, { id: "unchanged", checked: includedFiles.includes('unchanged'), onCheckedChange: () => toggleFilter('unchanged'), className: "mr-2" }), _jsx(Label, { htmlFor: "unchanged", className: twClasses.unchanged, children: "Unchanged" })] }), _jsxs("div", { className: "flex flex-row items-center", children: [_jsx(Switch, { id: "added", checked: includedFiles.includes('added'), onCheckedChange: () => toggleFilter('added'), className: "mr-2" }), _jsx(Label, { htmlFor: "added", className: twClasses.added, children: "Added" })] }), _jsxs("div", { className: "flex flex-row items-center", children: [_jsx(Switch, { id: "modified", checked: includedFiles.includes('modified'), onCheckedChange: () => toggleFilter('modified'), className: "mr-2" }), _jsx(Label, { htmlFor: "modified", className: twClasses.modified, children: "Modified" })] }), _jsxs("div", { className: "flex flex-row items-center", children: [_jsx(Switch, { id: "deleted", checked: includedFiles.includes('deleted'), onCheckedChange: () => toggleFilter('deleted'), className: "mr-2" }), _jsx(Label, { htmlFor: "deleted", className: twClasses.deleted, children: "Deleted" })] }), _jsxs("div", { className: "flex flex-row items-center", children: [_jsx(Switch, { id: "overwritten", checked: includedFiles.includes('overwritten'), onCheckedChange: () => toggleFilter('overwritten'), className: "mr-2" }), _jsx(Label, { htmlFor: "overwritten", className: twClasses.overwritten, children: "Overwritten" })] })] }));
+}
+export default function FileNavigator() {
+    const [selectedFile, setSelectedFile] = useState('./package.json');
+    const projectFiles = useOriginalOutput();
+    const localTree = useProjectLocalFiles();
+    const dryRunOutput = useDryRun();
+    const mode = useApplicationMode();
+    const tree = dryRunOutput.files;
+    const originalTree = mode === 'setup' ? dryRunOutput.files : projectFiles?.files;
+    const deletedFiles = dryRunOutput.deletedFiles;
+    const [originalFileContents, setOriginalFileContents] = useState();
+    const [modifiedFileContents, setModifiedFileContents] = useState();
+    const { includedFiles } = useFilters();
+    const fileTree = useMemo(() => {
+        const treeData = [];
+        if (!originalTree || !localTree) {
+            return treeData;
+        }
+        const allFileSet = Array.from(new Set([
+            ...Object.keys(tree),
+            ...Object.keys(localTree),
+            ...Object.keys(originalTree),
+        ]));
+        allFileSet.sort().forEach((file) => {
+            const strippedFile = file.replace('./', '');
+            const parts = strippedFile.split('/');
+            let currentLevel = treeData;
+            parts.forEach((part, index) => {
+                const existingNode = currentLevel.find((node) => node.name === part);
+                if (existingNode) {
+                    currentLevel = existingNode.children || [];
+                }
+                else {
+                    const fileInfo = getFileClass(file, tree, originalTree, localTree, deletedFiles);
+                    if (index === parts.length - 1 &&
+                        !includedFiles.includes(fileInfo.fileClass)) {
+                        return;
+                    }
+                    if (index === parts.length - 1 && file === selectedFile) {
+                        setModifiedFileContents(fileInfo.modifiedFile);
+                        setOriginalFileContents(fileInfo.originalFile);
+                    }
+                    const newNode = {
+                        id: parts.slice(0, index + 1).join('/'),
+                        name: part,
+                        fullPath: strippedFile,
+                        children: index < parts.length - 1 ? [] : undefined,
+                        icon: index < parts.length - 1
+                            ? () => _jsx(Folder, { className: "w-4 h-4 mr-2" })
+                            : () => _jsx(FileText, { className: "w-4 h-4 mr-2" }),
+                        onClick: index === parts.length - 1
+                            ? () => {
+                                setSelectedFile(file);
+                                setModifiedFileContents(fileInfo.modifiedFile);
+                                setOriginalFileContents(fileInfo.originalFile);
+                            }
+                            : undefined,
+                        className: twClasses[fileInfo.fileClass],
+                        ...fileInfo,
+                        contents: tree[file] || localTree[file] || originalTree[file],
+                    };
+                    currentLevel.push(newNode);
+                    currentLevel = newNode.children;
+                }
+            });
+        });
+        return treeData;
+    }, [tree, originalTree, localTree, includedFiles]);
+    const ready = useReady();
+    if (!ready) {
+        return null;
+    }
+    return (_jsxs("div", { className: "bg-white dark:bg-black/50 rounded-lg p-2 sm:p-4", children: [mode === 'add' && _jsx(Filters, {}), _jsxs("div", { className: "flex flex-row @container", children: [_jsx("div", { className: "w-1/3 @6xl:w-1/4 bg-gray-500/10 rounded-l-lg", children: _jsx(FileTree, { selectedFile: selectedFile, tree: fileTree }) }), _jsx("div", { className: "w-2/3 @6xl:w-3/4", children: selectedFile && modifiedFileContents ? (_jsx(FileViewer, { filePath: selectedFile, originalFile: originalFileContents, modifiedFile: modifiedFileContents })) : null })] })] }));
+}

package/dist/components/file-tree.d.ts

@@ -0,0 +1,5 @@
+import type { FileTreeItem } from '../types';
+export default function FileTree({ selectedFile, tree, }: {
+    selectedFile: string | null;
+    tree: Array<FileTreeItem>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/file-tree.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { FileText, Folder } from 'lucide-react';
+import { TreeView } from './ui/tree-view';
+export default function FileTree({ selectedFile, tree, }) {
+    const initialExpandedItemIds = useMemo(() => [
+        'src',
+        'src/routes',
+        'src/components',
+        'src/components/ui',
+        'src/lib',
+    ], []);
+    return (_jsx(TreeView, { initialSelectedItemId: selectedFile?.replace('./', '') ?? undefined, initialExpandedItemIds: initialExpandedItemIds, data: tree, defaultNodeIcon: () => _jsx(Folder, { className: "w-4 h-4 mr-2" }), defaultLeafIcon: () => _jsx(FileText, { className: "w-4 h-4 mr-2" }) }));
+}

package/dist/components/file-viewer.d.ts

@@ -0,0 +1,5 @@
+export default function FileViewer({ originalFile, modifiedFile, filePath, }: {
+    originalFile?: string;
+    modifiedFile: string;
+    filePath: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/file-viewer.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CodeMirror from '@uiw/react-codemirror';
+import CodeMirrorMerge from 'react-codemirror-merge';
+import { javascript } from '@codemirror/lang-javascript';
+import { json } from '@codemirror/lang-json';
+import { css } from '@codemirror/lang-css';
+import { html } from '@codemirror/lang-html';
+import { githubDarkInit } from '@uiw/codemirror-theme-github';
+const theme = githubDarkInit({
+    settings: {
+        background: 'oklch(0.07 0.005 285.823)',
+        foreground: '#c9d1d9',
+        gutterBackground: 'oklch(0.22 0.005 285.823)',
+    },
+});
+export default function FileViewer({ originalFile, modifiedFile, filePath, }) {
+    function getLanguage(file) {
+        if (file.endsWith('.js') || file.endsWith('.jsx')) {
+            return javascript({ jsx: true });
+        }
+        if (file.endsWith('.ts') || file.endsWith('.tsx')) {
+            return javascript({ typescript: true, jsx: true });
+        }
+        if (file.endsWith('.json')) {
+            return json();
+        }
+        if (file.endsWith('.css')) {
+            return css();
+        }
+        if (file.endsWith('.html')) {
+            return html();
+        }
+        return javascript();
+    }
+    const language = getLanguage(filePath);
+    if (!originalFile || originalFile === modifiedFile) {
+        return (_jsx(CodeMirror, { value: modifiedFile, theme: theme, height: "100vh", width: "100%", readOnly: true, extensions: [language], className: "text-lg" }));
+    }
+    return (_jsxs(CodeMirrorMerge, { orientation: "a-b", theme: theme, className: "text-lg", children: [_jsx(CodeMirrorMerge.Original, { value: originalFile, extensions: [language] }), _jsx(CodeMirrorMerge.Modified, { value: modifiedFile, extensions: [language] })] }));
+}

package/dist/components/header.d.ts

@@ -0,0 +1 @@
+export declare function AppHeader(): import("react/jsx-runtime").JSX.Element;

package/dist/components/header.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Logo from './icons/tanstack';
+export function AppHeader() {
+    return (_jsxs("div", { className: "bg-white dark:bg-black/50 rounded-lg p-2 sm:p-4 flex items-center gap-2 text-lg sm:text-xl shadow-xl", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Logo, {}), _jsx("div", { className: "font-black text-xl uppercase", children: "TanStack" })] }), _jsx("svg", { stroke: "currentColor", fill: "currentColor", "stroke-width": "0", viewBox: "0 0 256 512", height: "1em", width: "1em", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" }) }), _jsxs("div", { className: "hover:text-blue-500 flex items-center gap-2", children: ["Create TanStack App", ' ', _jsx("span", { className: "bg-gradient-to-r from-blue-500 to-cyan-500 text-white text-xs font-bold px-2 py-0.5 rounded", children: "ALPHA" })] })] }));
+}

package/dist/components/icons/tailwind.d.ts

@@ -0,0 +1,3 @@
+export default function Tailwind({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/tailwind.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+export default function Tailwind({ className }) {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 54 33", className: cn('w-10 h-10', className), children: [_jsx("g", { "clip-path": "url(#a)", children: _jsx("path", { fill: "#38bdf8", "fill-rule": "evenodd", d: "M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z", "clip-rule": "evenodd" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h54v32.4H0z" }) }) })] }));
+}

package/dist/components/icons/tanstack.d.ts

@@ -0,0 +1,3 @@
+export default function Logo({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/tanstack.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+export default function Logo({ className }) {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: "0 0 633 633", className: cn('w-10 h-10', className), children: [_jsxs("defs", { children: [_jsxs("linearGradient", { id: "b", x1: "50%", x2: "50%", y1: "0%", y2: "71.65%", children: [_jsx("stop", { offset: "0%", stopColor: "#6BDAFF" }), _jsx("stop", { offset: "31.922%", stopColor: "#F9FFB5" }), _jsx("stop", { offset: "70.627%", stopColor: "#FFA770" }), _jsx("stop", { offset: "100%", stopColor: "#FF7373" })] }), _jsxs("linearGradient", { id: "d", x1: "43.996%", x2: "53.441%", y1: "8.54%", y2: "93.872%", children: [_jsx("stop", { offset: "0%", stopColor: "#673800" }), _jsx("stop", { offset: "100%", stopColor: "#B65E00" })] }), _jsxs("linearGradient", { id: "e", x1: "50%", x2: "50%", y1: "0%", y2: "100%", children: [_jsx("stop", { offset: "0%", stopColor: "#2F8A00" }), _jsx("stop", { offset: "100%", stopColor: "#90FF57" })] }), _jsxs("linearGradient", { id: "f", x1: "50%", x2: "50%", y1: "0%", y2: "100%", children: [_jsx("stop", { offset: "0%", stopColor: "#2F8A00" }), _jsx("stop", { offset: "100%", stopColor: "#90FF57" })] }), _jsxs("linearGradient", { id: "g", x1: "50%", x2: "50%", y1: "0%", y2: "100%", children: [_jsx("stop", { offset: "0%", stopColor: "#2F8A00" }), _jsx("stop", { offset: "100%", stopColor: "#90FF57" })] }), _jsxs("linearGradient", { id: "h", x1: "50%", x2: "50%", y1: "0%", y2: "100%", children: [_jsx("stop", { offset: "0%", stopColor: "#2F8A00" }), _jsx("stop", { offset: "100%", stopColor: "#90FF57" })] }), _jsxs("linearGradient", { id: "i", x1: "50%", x2: "50%", y1: "0%", y2: "100%", children: [_jsx("stop", { offset: "0%", stopColor: "#2F8A00" }), _jsx("stop", { offset: "100%", stopColor: "#90FF57" })] }), _jsxs("linearGradient", { id: "j", x1: "50%", x2: "50%", y1: "0%", y2: "100%", children: [_jsx("stop", { offset: "0%", stopColor: "#2F8A00" }), _jsx("stop", { offset: "100%", stopColor: "#90FF57" })] }), _jsxs("linearGradient", { id: "k", x1: "92.9%", x2: "8.641%", y1: "45.768%", y2: "54.892%", children: [_jsx("stop", { offset: "0%", stopColor: "#EE2700" }), _jsx("stop", { offset: "100%", stopColor: "#FF008E" })] }), _jsxs("linearGradient", { id: "l", x1: "61.109%", x2: "43.717%", y1: "3.633%", y2: "43.072%", children: [_jsx("stop", { offset: "0%", stopColor: "#FFF400" }), _jsx("stop", { offset: "100%", stopColor: "#3C8700" })] }), _jsxs("linearGradient", { id: "m", x1: "50%", x2: "50%", y1: "0%", y2: "100%", children: [_jsx("stop", { offset: "0%", stopColor: "#FFDF00" }), _jsx("stop", { offset: "100%", stopColor: "#FF9D00" })] }), _jsxs("linearGradient", { id: "n", x1: "127.279%", x2: "0%", y1: "49.778%", y2: "50.222%", children: [_jsx("stop", { offset: "0%", stopColor: "#FFA400" }), _jsx("stop", { offset: "100%", stopColor: "#FF5E00" })] }), _jsxs("linearGradient", { id: "o", x1: "127.279%", x2: "0%", y1: "47.531%", y2: "52.469%", children: [_jsx("stop", { offset: "0%", stopColor: "#FFA400" }), _jsx("stop", { offset: "100%", stopColor: "#FF5E00" })] }), _jsxs("linearGradient", { id: "p", x1: "127.279%", x2: "0%", y1: "46.195%", y2: "53.805%", children: [_jsx("stop", { offset: "0%", stopColor: "#FFA400" }), _jsx("stop", { offset: "100%", stopColor: "#FF5E00" })] }), _jsxs("linearGradient", { id: "q", x1: "127.279%", x2: "0%", y1: "35.33%", y2: "64.67%", children: [_jsx("stop", { offset: "0%", stopColor: "#FFA400" }), _jsx("stop", { offset: "100%", stopColor: "#FF5E00" })] }), _jsxs("linearGradient", { id: "r", x1: "127.279%", x2: "0%", y1: "4.875%", y2: "95.125%", children: [_jsx("stop", { offset: "0%", stopColor: "#FFA400" }), _jsx("stop", { offset: "100%", stopColor: "#FF5E00" })] }), _jsxs("linearGradient", { id: "s", x1: "78.334%", x2: "31.668%", y1: "0%", y2: "100%", children: [_jsx("stop", { offset: "0%", stopColor: "#FFA400" }), _jsx("stop", { offset: "100%", stopColor: "#FF5E00" })] }), _jsxs("linearGradient", { id: "t", x1: "57.913%", x2: "44.88%", y1: "0%", y2: "100%", children: [_jsx("stop", { offset: "0%", stopColor: "#FFA400" }), _jsx("stop", { offset: "100%", stopColor: "#FF5E00" })] }), _jsxs("linearGradient", { id: "u", x1: "50.495%", x2: "49.68%", y1: "0%", y2: "100%", children: [_jsx("stop", { offset: "0%", stopColor: "#FFA400" }), _jsx("stop", { offset: "100%", stopColor: "#FF5E00" })] }), _jsx("circle", { id: "a", cx: "308.5", cy: "308.5", r: "308.5" }), _jsx("circle", { id: "v", cx: "307.5", cy: "308.5", r: "316.5" })] }), _jsxs("g", { fill: "none", fillRule: "evenodd", transform: "translate(9 8)", children: [_jsx("mask", { id: "c", fill: "#fff", children: _jsx("use", { xlinkHref: "#a" }) }), _jsx("use", { xlinkHref: "#a", fill: "url(#b)" }), _jsx("ellipse", { cx: "81.5", cy: "602.5", fill: "#015064", stroke: "#00CFE2", strokeWidth: "25", mask: "url(#c)", rx: "214.5", ry: "185.968" }), _jsx("ellipse", { cx: "535.5", cy: "602.5", fill: "#015064", stroke: "#00CFE2", strokeWidth: "25", mask: "url(#c)", rx: "214.5", ry: "185.968" }), _jsx("ellipse", { cx: "81.5", cy: "640.5", fill: "#015064", stroke: "#00A8B8", strokeWidth: "25", mask: "url(#c)", rx: "214.5", ry: "185.968" }), _jsx("ellipse", { cx: "535.5", cy: "640.5", fill: "#015064", stroke: "#00A8B8", strokeWidth: "25", mask: "url(#c)", rx: "214.5", ry: "185.968" }), _jsx("ellipse", { cx: "81.5", cy: "676.5", fill: "#015064", stroke: "#007782", strokeWidth: "25", mask: "url(#c)", rx: "214.5", ry: "185.968" }), _jsx("ellipse", { cx: "535.5", cy: "676.5", fill: "#015064", stroke: "#007782", strokeWidth: "25", mask: "url(#c)", rx: "214.5", ry: "185.968" }), _jsxs("g", { mask: "url(#c)", children: [_jsx("path", { fill: "url(#d)", stroke: "#6E3A00", strokeWidth: "6.088", d: "M98.318 88.007c7.691 37.104 16.643 72.442 26.856 106.013 10.212 33.571 25.57 68.934 46.07 106.088l-51.903 11.67c-10.057-60.01-17.232-99.172-21.525-117.487-4.293-18.315-10.989-51.434-20.089-99.357l20.591-6.927", transform: "scale(-1 1) rotate(25 -300.37 -553.013)" }), _jsxs("g", { stroke: "#2F8A00", children: [_jsx("path", { fill: "url(#e)", strokeWidth: "9.343", d: "M108.544 66.538s-13.54-21.305-37.417-27.785c-15.917-4.321-33.933.31-54.048 13.892C33.464 65.975 47.24 73.52 58.405 75.28c16.749 2.64 50.14-8.74 50.14-8.74Z", transform: "rotate(1 -6061.691 5926.397)" }), _jsx("path", { fill: "url(#f)", strokeWidth: "9.343", d: "M108.544 67.138s-47.187-5.997-81.077 19.936C4.873 104.362-3.782 137.794 1.502 187.369c28.42-29.22 48.758-50.836 61.016-64.846 18.387-21.016 46.026-55.385 46.026-55.385Z", transform: "rotate(1 -6061.691 5926.397)" }), _jsx("path", { fill: "url(#g)", strokeWidth: "9.343", d: "M108.544 66.538c-1.96-21.705 3.98-38.018 17.82-48.94C140.203 6.674 154.85.808 170.303 0c-4.865 21.527-12.373 36.314-22.524 44.361-10.151 8.048-23.23 15.44-39.236 22.177Z", transform: "rotate(1 -6061.691 5926.397)" }), _jsx("path", { fill: "url(#h)", strokeWidth: "9.343", d: "M108.544 67.138c29.838-31.486 61.061-42.776 93.669-33.869C234.82 42.176 253.749 60.785 259 89.096c-34.898-3.657-59.974-6.343-75.228-8.058-15.254-1.716-40.33-6.349-75.228-13.9Z", transform: "rotate(1 -6061.691 5926.397)" }), _jsx("path", { fill: "url(#i)", strokeWidth: "9.343", d: "M108.544 67.138c34.868-9.381 64.503-3.658 88.905 17.17 24.402 20.829 39.656 46.686 45.762 77.571-39.626-7.574-68.4-20.115-86.322-37.624a395.051 395.051 0 0 1-48.345-57.117Z", transform: "rotate(1 -6061.691 5926.397)" }), _jsx("path", { fill: "url(#j)", strokeWidth: "9.343", d: "M108.544 67.138C76.206 82.6 57.608 105.366 52.75 135.436c-4.858 30.07-.292 62.89 13.698 98.462 24.873-41.418 38.905-71.368 42.096-89.849 3.191-18.48 3.191-44.118 0-76.91Z", transform: "rotate(1 -6061.691 5926.397)" }), _jsx("path", { strokeLinecap: "round", strokeWidth: "5.91", d: "M211.284 173.477c-13.851 21.992-23.291 42.022-28.32 60.093-5.03 18.071-8.175 33.143-9.436 45.216" }), _jsx("path", { strokeLinecap: "round", strokeWidth: "5.91", d: "M209.814 176.884c-23.982 2.565-42.792 10.469-56.428 23.714-13.639 13.245-23.483 26.136-29.536 38.674M219.045 167.299c29.028-7.723 50.972-10.173 65.831-7.352 14.859 2.822 26.807 7.659 35.842 14.51M211.31 172.618c20.29 9.106 38.353 19.052 54.186 29.837 15.833 10.786 27.714 20.99 35.643 30.617" })] }), _jsx("path", { stroke: "#830305", strokeLinecap: "round", strokeLinejoin: "bevel", strokeWidth: "6.937", d: "m409.379 398.157-23.176 18.556M328.04 375.516l-22.313 28.398M312.904 353.698l53.18 59.816" }), _jsx("path", { fill: "url(#k)", d: "M67.585 27.463H5.68C1.893 28.148 0 30.38 0 34.16c0 3.78 1.893 6.211 5.68 7.293h67.17l41.751-30.356c2.488-2.646 2.794-5.315.92-8.006s-4.6-3.626-8.177-2.803l-39.76 27.174Z", transform: "scale(-1 1) rotate(-9 2092.128 2856.854)" }), _jsx("path", { fill: "#D8D8D8", stroke: "#FFF", strokeLinecap: "round", strokeLinejoin: "bevel", strokeWidth: "4.414", d: "m402.861 391.51.471-4.088M382.21 388.752l.472-4.087M361.546 385.404l.485-3.845M337.59 371.883l2.56-2.498M324.276 359.567l2.56-2.497" })] }), _jsx("ellipse", { cx: "308.5", cy: "720.5", fill: "url(#l)", mask: "url(#c)", rx: "266", ry: "316.5" }), _jsx("ellipse", { cx: "308.5", cy: "720.5", stroke: "#6DA300", strokeOpacity: ".502", strokeWidth: "26", mask: "url(#c)", rx: "253", ry: "303.5" }), _jsx("g", { mask: "url(#c)", children: _jsxs("g", { transform: "translate(389 -32)", children: [_jsx("circle", { cx: "168.5", cy: "113.5", r: "113.5", fill: "url(#m)" }), _jsx("circle", { cx: "168.5", cy: "113.5", r: "106", stroke: "#FFC900", strokeOpacity: ".529", strokeWidth: "15" }), _jsx("path", { stroke: "url(#n)", strokeLinecap: "round", strokeLinejoin: "bevel", strokeWidth: "12", d: "M30 113H0" }), _jsx("path", { stroke: "url(#o)", strokeLinecap: "round", strokeLinejoin: "bevel", strokeWidth: "12", d: "M33.5 79.5 7 74" }), _jsx("path", { stroke: "url(#p)", strokeLinecap: "round", strokeLinejoin: "bevel", strokeWidth: "12", d: "m34 146-29 8" }), _jsx("path", { stroke: "url(#q)", strokeLinecap: "round", strokeLinejoin: "bevel", strokeWidth: "12", d: "m45 177-24 13" }), _jsx("path", { stroke: "url(#r)", strokeLinecap: "round", strokeLinejoin: "bevel", strokeWidth: "12", d: "m67 204-20 19" }), _jsx("path", { stroke: "url(#s)", strokeLinecap: "round", strokeLinejoin: "bevel", strokeWidth: "12", d: "m94.373 227-13.834 22.847" }), _jsx("path", { stroke: "url(#t)", strokeLinecap: "round", strokeLinejoin: "bevel", strokeWidth: "12", d: "M127.5 243.5 120 268" }), _jsx("path", { stroke: "url(#u)", strokeLinecap: "round", strokeLinejoin: "bevel", strokeWidth: "12", d: "m167.5 252.5.5 24.5" })] }) }), _jsx("circle", { cx: "307.5", cy: "308.5", r: "304", stroke: "#000", strokeWidth: "25" })] })] }));
+}

package/dist/components/icons/typescript.d.ts

@@ -0,0 +1,3 @@
+export default function Typescript({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/typescript.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+export default function Typescript({ className }) {
+    return (_jsxs("svg", { viewBox: "0 0 256 256", width: "256", height: "256", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid", className: cn('w-10 h-10', className), children: [_jsx("path", { d: "M20 0h216c11.046 0 20 8.954 20 20v216c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20V20C0 8.954 8.954 0 20 0Z", fill: "#3178C6" }), _jsx("path", { d: "M150.518 200.475v27.62c4.492 2.302 9.805 4.028 15.938 5.179 6.133 1.151 12.597 1.726 19.393 1.726 6.622 0 12.914-.633 18.874-1.899 5.96-1.266 11.187-3.352 15.678-6.257 4.492-2.906 8.048-6.704 10.669-11.394 2.62-4.689 3.93-10.486 3.93-17.391 0-5.006-.749-9.394-2.246-13.163a30.748 30.748 0 0 0-6.479-10.055c-2.821-2.935-6.205-5.567-10.149-7.898-3.945-2.33-8.394-4.531-13.347-6.602-3.628-1.497-6.881-2.949-9.761-4.359-2.879-1.41-5.327-2.848-7.342-4.316-2.016-1.467-3.571-3.021-4.665-4.661-1.094-1.64-1.641-3.495-1.641-5.567 0-1.899.489-3.61 1.468-5.135s2.362-2.834 4.147-3.927c1.785-1.094 3.973-1.942 6.565-2.547 2.591-.604 5.471-.906 8.638-.906 2.304 0 4.737.173 7.299.518 2.563.345 5.14.877 7.732 1.597a53.669 53.669 0 0 1 7.558 2.719 41.7 41.7 0 0 1 6.781 3.797v-25.807c-4.204-1.611-8.797-2.805-13.778-3.582-4.981-.777-10.697-1.165-17.147-1.165-6.565 0-12.784.705-18.658 2.115-5.874 1.409-11.043 3.61-15.506 6.602-4.463 2.993-7.99 6.805-10.582 11.437-2.591 4.632-3.887 10.17-3.887 16.615 0 8.228 2.375 15.248 7.127 21.06 4.751 5.811 11.963 10.731 21.638 14.759a291.458 291.458 0 0 1 10.625 4.575c3.283 1.496 6.119 3.049 8.509 4.66 2.39 1.611 4.276 3.366 5.658 5.265 1.382 1.899 2.073 4.057 2.073 6.474a9.901 9.901 0 0 1-1.296 4.963c-.863 1.524-2.174 2.848-3.93 3.97-1.756 1.122-3.945 1.999-6.565 2.632-2.62.633-5.687.95-9.2.95-5.989 0-11.92-1.05-17.794-3.151-5.875-2.1-11.317-5.25-16.327-9.451Zm-46.036-68.733H140V109H41v22.742h35.345V233h28.137V131.742Z", fill: "#FFF" })] }));
+}

package/dist/components/query-provider.d.ts

@@ -0,0 +1,3 @@
+export declare function QueryProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/query-provider.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useState } from 'react';
+export function QueryProvider({ children }) {
+    const [queryClient] = useState(() => new QueryClient());
+    return (_jsx(QueryClientProvider, { client: queryClient, children: children }));
+}

package/dist/components/sidebar-items/add-ons.d.ts

@@ -0,0 +1 @@
+export default function SelectedAddOns(): import("react/jsx-runtime").JSX.Element;

package/dist/components/sidebar-items/add-ons.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, useMemo, useState } from 'react';
+import { InfoIcon } from 'lucide-react';
+import { Switch } from '../ui/switch';
+import { Label } from '../ui/label';
+import { useAddOns } from '../../store/project';
+import ImportCustomAddOn from '../custom-add-on-dialog';
+import AddOnInfoDialog from '../add-on-info-dialog';
+const addOnTypeLabels = {
+    toolchain: 'Toolchain',
+    'add-on': 'Add-on',
+    example: 'Example',
+};
+export default function SelectedAddOns() {
+    const { availableAddOns, addOnState, toggleAddOn } = useAddOns();
+    const sortedAddOns = useMemo(() => {
+        return availableAddOns.sort((a, b) => {
+            return a.name.localeCompare(b.name);
+        });
+    }, [availableAddOns]);
+    const [infoAddOn, setInfoAddOn] = useState();
+    return (_jsxs(_Fragment, { children: [_jsx(AddOnInfoDialog, { addOn: infoAddOn, onClose: () => setInfoAddOn(undefined) }), Object.keys(addOnTypeLabels).map((type) => (_jsx(Fragment, { children: sortedAddOns.filter((addOn) => addOn.type === type).length > 0 && (_jsxs("div", { className: "block p-4 bg-gray-500/10 hover:bg-gray-500/20 rounded-lg transition-colors space-y-4 active", children: [_jsx("h3", { className: "font-medium", children: addOnTypeLabels[type] }), _jsx("div", { className: "flex flex-row flex-wrap", children: sortedAddOns
+                                .filter((addOn) => addOn.type === type)
+                                .map((addOn) => (_jsx("div", { className: "w-1/2 flex flex-row justify-between pr-4", children: _jsxs("div", { className: "p-1 flex flex-row items-center", children: [_jsx(Switch, { id: addOn.id, checked: addOnState[addOn.id].selected, disabled: !addOnState[addOn.id].enabled, onCheckedChange: () => {
+                                                toggleAddOn(addOn.id);
+                                            } }), _jsxs(Label, { htmlFor: addOn.id, className: "pl-2 font-semibold text-gray-300", children: [addOn.smallLogo && (_jsx("img", { src: `data:image/svg+xml,${encodeURIComponent(addOn.smallLogo)}`, alt: addOn.name, className: "w-5" })), addOn.name] }), _jsx(InfoIcon, { className: "ml-2 w-4 text-gray-600", onClick: () => setInfoAddOn(addOn) })] }) }, addOn.id))) })] }, `${type}-add-ons`)) }, type))), _jsx("div", { className: "mt-4", children: _jsx(ImportCustomAddOn, {}) })] }));
+}

package/dist/components/sidebar-items/mode-selector.d.ts

@@ -0,0 +1 @@
+export default function ModeSelector(): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/sidebar-items/mode-selector.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CodeIcon } from 'lucide-react';
+import { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group';
+import { setRouterMode, useApplicationMode, useModeEditable, useRouterMode, useSupportedModes, } from '../../store/project';
+import SidebarContainer from './sidebar-container';
+export default function ModeSelector() {
+    const mode = useApplicationMode();
+    const enableMode = useModeEditable();
+    const routerMode = useRouterMode();
+    const supportedModes = useSupportedModes();
+    if (mode !== 'setup' || Object.keys(supportedModes ?? {}).length < 2) {
+        return null;
+    }
+    return (_jsx(SidebarContainer, { children: _jsxs("div", { className: "flex flex-col @md:flex-row @md:items-center gap-2 items-start", children: [_jsx("h3", { className: "font-medium whitespace-nowrap", children: "Router Mode" }), _jsx("div", { className: "flex flex-row justify-center items-center", children: _jsx(ToggleGroup, { type: "single", value: routerMode, onValueChange: (v) => {
+                            if (v) {
+                                setRouterMode(v);
+                            }
+                        }, className: "rounded-md border-2 border-gray-500/10", children: Object.keys(supportedModes ?? {}).map((mode) => (_jsxs(ToggleGroupItem, { value: mode, className: "px-4", disabled: !enableMode, children: [_jsx(CodeIcon, { className: "w-4 h-4" }), supportedModes?.[mode].displayName] }, mode))) }) })] }) }));
+}