Start switching to React.

web/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

web/.gitignore

@@ -1,13 +1,40 @@
-# Logs
-logs
-*.log
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
 
-node_modules
-dist
-dist-ssr
-*.local
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

web/.vscode/extensions.json

@@ -1,3 +0,0 @@
-{
-  "recommendations": ["svelte.svelte-vscode"]
-}

web/README.md

@@ -1,27 +1,36 @@
-# Vite Svelte Flow Template
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 
-This template creates a very basic [Svelte Flow](https://svelteflow.dev) app with [Vite](https://vite.dev).
+## Getting Started
 
-## Get it!
+First, run the development server:
 
-```sh
-npx degit xyflow/vite-svelte-flow-template app-name
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
 ```
 
-## Installation
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-```sh
-npm install
-```
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-## Development
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
 
-```sh
-npm run dev
-```
+## Learn More
 
-## Build
+To learn more about Next.js, take a look at the following resources:
 
-```sh
-npm run build
-```
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

web/app/globals.css

@@ -0,0 +1,51 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+/* @media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+} */
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.top-bar {
+  display: flex;
+  justify-content: space-between;
+  background: oklch(30% 0.13 230);
+  color: white;
+}
+.ws-name {
+  font-size: 1.5em;
+}
+.ws-name img {
+  height: 1.5em;
+  vertical-align: middle;
+  margin: 4px;
+}
+.page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.tools {
+  display: flex;
+  align-items: center;
+}
+.tools a {
+  color: oklch(75% 0.13 230);
+  font-size: 1.5em;
+  padding: 0 10px;
+}

web/app/layout.tsx

@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import localFont from "next/font/local";
+import "./globals.css";
+
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
+});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

web/app/page.tsx

@@ -0,0 +1,101 @@
+import Image from "next/image";
+
+export default function Home() {
+  return (
+    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
+        <Image
+          className="dark:invert"
+          src="/next.svg"
+          alt="Next.js logo"
+          width={180}
+          height={38}
+          priority
+        />
+        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
+          <li className="mb-2">
+            Get started by editing{" "}
+            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
+              app/page.tsx
+            </code>
+            .
+          </li>
+          <li>Save and see your changes instantly.</li>
+        </ol>
+
+        <div className="flex gap-4 items-center flex-col sm:flex-row">
+          <a
+            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
+            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              className="dark:invert"
+              src="/vercel.svg"
+              alt="Vercel logomark"
+              width={20}
+              height={20}
+            />
+            Deploy now
+          </a>
+          <a
+            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
+            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Read our docs
+          </a>
+        </div>
+      </main>
+      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
+        <a
+          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            aria-hidden
+            src="/file.svg"
+            alt="File icon"
+            width={16}
+            height={16}
+          />
+          Learn
+        </a>
+        <a
+          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            aria-hidden
+            src="/window.svg"
+            alt="Window icon"
+            width={16}
+            height={16}
+          />
+          Examples
+        </a>
+        <a
+          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            aria-hidden
+            src="/globe.svg"
+            alt="Globe icon"
+            width={16}
+            height={16}
+          />
+          Go to nextjs.org →
+        </a>
+      </footer>
+    </div>
+  );
+}

web/app/workspace/EnvironmentSelector.tsx

@@ -0,0 +1,12 @@
+export default function EnvironmentSelector(props: { options: string[], value: string, onChange: (val: string) => void }) {
+  return (
+    <select className="form-select form-select-sm"
+      value={props.value}
+      onChange={(evt) => props.onChange(evt.currentTarget.value)}
+    >
+      {props.options.map(option =>
+        <option key={option} value={option}>{option}</option>
+      )}
+    </select>
+  );
+}

web/app/workspace/page.tsx

@@ -0,0 +1,224 @@
+'use client';
+import useSWR from 'swr';
+import { useMemo } from "react";
+import {
+  ReactFlow,
+  useNodesState,
+  useEdgesState,
+  Controls,
+  MiniMap,
+  MarkerType,
+  useReactFlow,
+  type XYPosition,
+  type Node,
+  type Edge,
+  type Connection,
+  type NodeTypes,
+} from '@xyflow/React';
+// @ts-ignore
+import ArrowBack from '~icons/tabler/arrow-back.jsx';
+// @ts-ignore
+import Backspace from '~icons/tabler/backspace.jsx';
+// @ts-ignore
+import Atom from '~icons/tabler/atom.jsx';
+// import NodeWithParams from './NodeWithParams';
+// import NodeWithVisualization from './NodeWithVisualization';
+// import NodeWithImage from './NodeWithImage';
+// import NodeWithTableView from './NodeWithTableView';
+// import NodeWithSubFlow from './NodeWithSubFlow';
+// import NodeWithArea from './NodeWithArea';
+// import NodeSearch from './NodeSearch';
+import EnvironmentSelector from './EnvironmentSelector';
+import '@xyflow/react/dist/style.css';
+
+export default function Home() {
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+
+  let path = '';
+
+  // const { screenToFlowPosition } = useReactFlow();
+  // const queryClient = useQueryClient();
+  // const backendWorkspace = useQuery(['workspace', path], async () => {
+  //   const res = await fetch(`/api/load?path=${path}`);
+  //   return res.json();
+  // }, { staleTime: 10000, retry: false });
+  // const mutation = useMutation(async (update) => {
+  //   const res = await fetch('/api/save', {
+  //     method: 'POST',
+  //     headers: {
+  //       'Content-Type': 'application/json',
+  //     },
+  //     body: JSON.stringify(update),
+  //   });
+  //   return await res.json();
+  // }, {
+  //   onSuccess: data => queryClient.setQueryData(['workspace', path], data),
+  // });
+
+  // const nodeTypes: NodeTypes = {
+  //   basic: NodeWithParams,
+  //   visualization: NodeWithVisualization,
+  //   image: NodeWithImage,
+  //   table_view: NodeWithTableView,
+  //   sub_flow: NodeWithSubFlow,
+  //   area: NodeWithArea,
+  // };
+
+  // const nodes = writable<Node[]>([]);
+  // const edges = writable<Edge[]>([]);
+  // let doNotSave = true;
+  // $: if ($backendWorkspace.isSuccess) {
+  //   doNotSave = true; // Change is coming from the backend.
+  //   nodes.set(JSON.parse(JSON.stringify($backendWorkspace.data?.nodes || [])));
+  //   edges.set(JSON.parse(JSON.stringify($backendWorkspace.data?.edges || [])));
+  //   doNotSave = false;
+  // }
+
+  // function closeNodeSearch() {
+  //   nodeSearchSettings = undefined;
+  // }
+  // function toggleNodeSearch({ detail: { event } }) {
+  //   if (nodeSearchSettings) {
+  //     closeNodeSearch();
+  //     return;
+  //   }
+  //   event.preventDefault();
+  //   nodeSearchSettings = {
+  //     pos: { x: event.clientX, y: event.clientY },
+  //     boxes: $catalog.data[$backendWorkspace.data?.env],
+  //   };
+  // }
+  // function addNode(e) {
+  //   const meta = { ...e.detail };
+  //   nodes.update((n) => {
+  //     const node = {
+  //       type: meta.type,
+  //       data: {
+  //         meta: meta,
+  //         title: meta.name,
+  //         params: Object.fromEntries(
+  //           Object.values(meta.params).map((p) => [p.name, p.default])),
+  //       },
+  //     };
+  //     node.position = screenToFlowPosition({ x: nodeSearchSettings.pos.x, y: nodeSearchSettings.pos.y });
+  //     const title = node.data.title;
+  //     let i = 1;
+  //     node.id = `${title} ${i}`;
+  //     while (n.find((x) => x.id === node.id)) {
+  //       i += 1;
+  //       node.id = `${title} ${i}`;
+  //     }
+  //     node.parentId = nodeSearchSettings.parentId;
+  //     if (node.parentId) {
+  //       node.extent = 'parent';
+  //       const parent = n.find((x) => x.id === node.parentId);
+  //       node.position = { x: node.position.x - parent.position.x, y: node.position.y - parent.position.y };
+  //     }
+  //     return [...n, node]
+  //   });
+  //   closeNodeSearch();
+  // }
+  const fetcher = (resource: string, init?: RequestInit) => fetch(resource, init).then(res => res.json());
+  const catalog = useSWR('/api/catalog', fetcher);
+
+  // let nodeSearchSettings: {
+  //   pos: XYPosition,
+  //   boxes: any[],
+  //   parentId: string,
+  // };
+
+  // const graph = derived([nodes, edges], ([nodes, edges]) => ({ nodes, edges }));
+  // // Like JSON.stringify, but with keys sorted.
+  // function orderedJSON(obj: any) {
+  //   const allKeys = new Set();
+  //   JSON.stringify(obj, (key, value) => (allKeys.add(key), value));
+  //   return JSON.stringify(obj, Array.from(allKeys).sort());
+  // }
+  // graph.subscribe(async (g) => {
+  //   if (doNotSave) return;
+  //   const dragging = g.nodes.find((n) => n.dragging);
+  //   if (dragging) return;
+  //   const resizing = g.nodes.find((n) => n.data?.beingResized);
+  //   if (resizing) return;
+  //   scheduleSave(g);
+  // });
+  // let saveTimeout;
+  // function scheduleSave(g) {
+  //   // A slight delay, so we don't send a million requests when a node is resized, for example.
+  //   clearTimeout(saveTimeout);
+  //   saveTimeout = setTimeout(() => save(g), 500);
+  // }
+  // function save(g) {
+  //   g = JSON.parse(JSON.stringify(g));
+  //   for (const node of g.nodes) {
+  //     delete node.measured;
+  //     delete node.selected;
+  //     delete node.dragging;
+  //     delete node.beingResized;
+  //   }
+  //   for (const node of g.edges) {
+  //     delete node.markerEnd;
+  //     delete node.selected;
+  //   }
+  //   g.env = $backendWorkspace.data?.env;
+  //   const ws = orderedJSON(g);
+  //   const bd = orderedJSON($backendWorkspace.data);
+  //   if (ws === bd) return;
+  //   console.log('changed', JSON.stringify(diff(g, $backendWorkspace.data), null, 2));
+  //   $mutation.mutate({ path, ws: g });
+  // }
+  // function nodeClick(e) {
+  //   const node = e.detail.node;
+  //   const meta = node.data.meta;
+  //   if (!meta) return;
+  //   const sub_nodes = meta.sub_nodes;
+  //   if (!sub_nodes) return;
+  //   const event = e.detail.event;
+  //   if (event.target.classList.contains('title')) return;
+  //   nodeSearchSettings = {
+  //     pos: { x: event.clientX, y: event.clientY },
+  //     boxes: sub_nodes,
+  //     parentId: node.id,
+  //   };
+  // }
+  // $: parentDir = path.split('/').slice(0, -1).join('/');
+
+  const nodeTypes = useMemo(() => ({}), []);
+  return (
+
+    <div className="page">
+      <div className="top-bar">
+        <div className="ws-name">
+          <a href=""><img src="/favicon.ico" /></a>
+          {path}
+        </div>
+        <div className="tools">
+          <EnvironmentSelector
+            options={Object.keys(catalog.data || {})}
+            value={'asd'}
+            onChange={(env) => 1}
+          />
+          <a href=""><Atom /></a>
+          <a href=""><Backspace /></a>
+          <a href="#dir?path={parentDir}"><ArrowBack /></a>
+        </div>
+      </div>
+      <div style={{ height: "100%", width: '100vw' }}>
+        <ReactFlow nodes={nodes} edges={edges} nodeTypes={nodeTypes} fitView
+          proOptions={{ hideAttribution: true }}
+          maxZoom={3}
+          minZoom={0.3}
+          defaultEdgeOptions={{ markerEnd: { type: MarkerType.Arrow } }}
+        >
+          <Controls />
+          <MiniMap />
+          {/* {#if nodeSearchSettings}
+          <NodeSearch pos={nodeSearchSettings.pos} boxes={nodeSearchSettings.boxes} on:cancel={closeNodeSearch} on:add={addNode} />
+          {/if} */}
+        </ReactFlow>
+      </div>
+    </div>
+
+  );
+}

web/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>LynxKite 2024</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>

web/next.config.ts

@@ -0,0 +1,24 @@
+import type { NextConfig } from "next";
+import Icons from 'unplugin-icons/webpack'
+
+const nextConfig: NextConfig = {
+  webpack(config) {
+    config.plugins.push(
+      Icons({
+        compiler: 'jsx',
+        jsx: 'react',
+      })
+    );
+    return config;
+  },
+  async rewrites() {
+    return [
+      {
+        source: '/api/:path*',
+        destination: 'http://127.0.0.1:8000/api/:path*',
+      },
+    ]
+  },
+};
+
+export default nextConfig;

web/package.json

@@ -1,37 +1,40 @@
 {
-  "name": "vite-svelte-flow-template",
+  "name": "lynxkite",
+  "version": "0.1.0",
   "private": true,
-  "version": "0.0.0",
-  "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "check": "svelte-check --tsconfig ./tsconfig.json"
-  },
-  "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "3.1.2",
-    "@syncedstore/core": "0.6.0",
-    "@syncedstore/svelte": "0.6.0",
-    "@tsconfig/svelte": "5.0.4",
-    "sass": "1.79.5",
-    "svelte": "4.2.19",
-    "svelte-check": "4.0.5",
-    "svelte-markdown": "^0.4.1",
-    "tslib": "2.7.0",
-    "typescript": "5.6.3",
-    "unplugin-icons": "0.19.3",
-    "vite": "5.4.9",
-    "y-websocket": "2.0.4"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
   },
   "dependencies": {
-    "@iconify-json/tabler": "1.2.5",
-    "@popperjs/core": "2.11.8",
-    "@sveltestack/svelte-query": "1.6.0",
-    "@xyflow/svelte": "0.1.21",
-    "bootstrap": "5.3.3",
-    "echarts": "5.5.1",
-    "fuse.js": "7.0.0",
-    "svelte-echarts": "^1.0.0-rc3"
+    "@iconify-json/tabler": "^1.2.8",
+    "@syncedstore/core": "^0.6.0",
+    "@syncedstore/react": "^0.6.0",
+    "@xyflow/react": "^12.3.5",
+    "echarts": "^5.5.1",
+    "fuse.js": "^7.0.0",
+    "next": "15.0.3",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "swr": "^2.2.5",
+    "unplugin-icons": "^0.20.1",
+    "y-websocket": "2.0.4",
+    "yjs": "^13.6.20"
+  },
+  "devDependencies": {
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-jsx": "^8.1.0",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.4.20",
+    "daisyui": "^4.12.14",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.3",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.15",
+    "typescript": "^5"
   }
 }

web/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

web/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

web/src/App.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-  import Directory from './Directory.svelte';
-  import Workspace from './Workspace.svelte';
-  let page = '';
-  let parameters = {};
-  function onHashChange() {
-    const parts = location.hash.split('?');
-    page = parts[0].substring(1);
-    parameters = {};
-    if (parts.length > 1) {
-      parameters = Object.fromEntries(new URLSearchParams(parts[1]));
-    }
-  }
-  onHashChange();
-</script>
-
-<svelte:window on:hashchange={onHashChange} />
-{#if page === 'edit'}
-  <Workspace {...parameters} />
-{:else}
-  <Directory {...parameters} />
-{/if}

web/src/Directory.svelte

@@ -1,177 +0,0 @@
-<script lang="ts">
-  // The directory browser.
-  import logo from './assets/logo.png';
-  import Home from 'virtual:icons/tabler/home'
-  import Folder from 'virtual:icons/tabler/folder'
-  import FolderPlus from 'virtual:icons/tabler/folder-plus'
-  import File from 'virtual:icons/tabler/file'
-  import FilePlus from 'virtual:icons/tabler/file-plus'
-
-  export let path = '';
-  async function fetchList(path) {
-    const encodedPath = encodeURIComponent(path || '');
-    const res = await fetch(`/api/dir/list?path=${encodedPath}`);
-    const j = await res.json();
-    return j;
-  }
-  $: list = fetchList(path);
-  function link(item) {
-    if (item.type === 'directory') {
-      return `#dir?path=${item.name}`;
-    } else {
-      return `#edit?path=${item.name}`;
-    }
-  }
-  function shortName(item) {
-    return item.name.split('/').pop();
-  }
-  function newName(list) {
-    let i = 0;
-    while (true) {
-      const name = `Untitled${i ? ` ${i}` : ''}`;
-      if (!list.find(item => item.name === name)) {
-        return name;
-      }
-      i++;
-    }
-  }
-  function newWorkspaceIn(path, list) {
-    const pathSlash = path ? `${path}/` : '';
-    return `#edit?path=${pathSlash}${newName(list)}`;
-  }
-  async function newFolderIn(path, list) {
-    const pathSlash = path ? `${path}/` : '';
-    const name = newName(list);
-    const res = await fetch(`/api/dir/mkdir`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ path: pathSlash + name }),
-    });
-    list = await res.json();
-  }
-</script>
-
-<div class="directory-page">
-  <div class="logo">
-    <a href="https://lynxkite.com/"><img src="{logo}" class="logo-image"></a>
-    <div class="tagline">The Complete Graph Data Science Platform</div>
-  </div>
-  <div class="entry-list">
-    {#await list}
-      <div class="loading spinner-border" role="status">
-        <span class="visually-hidden">Loading...</span>
-      </div>
-    {:then list}
-      <div class="actions">
-        <a href="{newWorkspaceIn(path, list)}"><FilePlus /> New workspace</a>
-        <a href on:click="{newFolderIn(path, list)}"><FolderPlus /> New folder</a>
-      </div>
-      {#if path} <div class="breadcrumbs"><a href="#dir"><Home /></a> {path} </div> {/if}
-      {#each list as item}
-        <a class="entry" href={link(item)}>
-          {#if item.type === 'directory'}
-            <Folder />
-          {:else}
-            <File />
-          {/if}
-          {shortName(item)}
-        </a>
-      {/each}
-    {:catch error}
-      <p style="color: red">{error.message}</p>
-    {/await}
-  </div>
-</div>
-
-<style>
-  .entry-list {
-    width: 100%;
-    margin: 10px auto;
-    background-color: white;
-    border-radius: 10px;
-    box-shadow: 0px 2px 4px;
-    padding: 0 0 10px 0;
-  }
-  @media (min-width: 768px) {
-    .entry-list {
-      width: 768px;
-    }
-  }
-  @media (min-width: 960px) {
-    .entry-list {
-      width: 80%;
-    }
-  }
-
-  .logo {
-    margin: 0;
-    padding-top: 50px;
-    text-align: center;
-  }
-  .logo-image {
-    max-width: 50%;
-  }
-  .tagline {
-    color: #39bcf3;
-    font-size: 14px;
-    font-weight: 500;
-  }
-  @media (min-width: 1400px) {
-    .tagline {
-      font-size: 18px;
-    }
-  }
-
-  .actions {
-    display: flex;
-    justify-content: space-evenly;
-    padding: 5px;
-  }
-  .actions a {
-    padding: 2px 10px;
-    border-radius: 5px;
-  }
-  .actions a:hover {
-    background: #39bcf3;
-    color: white;
-  }
-
-  .breadcrumbs {
-    padding-left: 10px;
-    font-size: 20px;
-    background: #002a4c20;
-  }
-  .breadcrumbs a:hover {
-    color: #39bcf3;
-  }
-  .entry-list .entry {
-    display: block;
-    border-bottom: 1px solid whitesmoke;
-    padding-left: 10px;
-    color: #004165;
-    cursor: pointer;
-    user-select: none;
-    text-decoration: none;
-  }
-  .entry-list .open .entry,
-  .entry-list .entry:hover,
-  .entry-list .entry:focus {
-    background: #39bcf3;
-    color: white;
-  }
-  .entry-list .entry:last-child {
-    border-bottom: none;
-  }
-  .directory-page {
-    background: #002a4c;
-    height: 100vh;
-  }
-  a {
-    color: black;
-    text-decoration: none;
-  }
-  .loading {
-    color: #39bcf3;
-    margin: 10px;
-  }
-</style>

web/src/EnvironmentSelector.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-  export let options;
-  export let value;
-  export let onChange;
-</script>
-
-<select class="form-select form-select-sm"
-  value={value}
-  on:change={(evt) => onChange(evt.currentTarget.value)}
-  >
-  {#each options as option}
-    <option value={option}>{option}</option>
-  {/each}
-</select>

web/src/LynxKiteFlow.svelte

@@ -1,230 +0,0 @@
-<script lang="ts">
-  import { setContext } from 'svelte';
-  import { writable } from 'svelte/store';
-  import {
-    SvelteFlow,
-    Controls,
-    MiniMap,
-    MarkerType,
-    useSvelteFlow,
-    useUpdateNodeInternals,
-    type XYPosition,
-    type Node,
-    type Edge,
-    type Connection,
-    type NodeTypes,
-  } from '@xyflow/svelte';
-  import ArrowBack from 'virtual:icons/tabler/arrow-back'
-  import Backspace from 'virtual:icons/tabler/backspace'
-  import Atom from 'virtual:icons/tabler/Atom'
-  import { useQuery } from '@sveltestack/svelte-query';
-  import NodeWithParams from './NodeWithParams.svelte';
-  import NodeWithVisualization from './NodeWithVisualization.svelte';
-  import NodeWithImage from './NodeWithImage.svelte';
-  import NodeWithTableView from './NodeWithTableView.svelte';
-  import NodeWithSubFlow from './NodeWithSubFlow.svelte';
-  import NodeWithArea from './NodeWithArea.svelte';
-  import NodeSearch from './NodeSearch.svelte';
-  import EnvironmentSelector from './EnvironmentSelector.svelte';
-  import '@xyflow/svelte/dist/style.css';
-  import { syncedStore, getYjsDoc } from "@syncedstore/core";
-  import { svelteSyncedStore } from "@syncedstore/svelte";
-  import { WebsocketProvider } from "y-websocket";
-  const updateNodeInternals = useUpdateNodeInternals();
-
-  function getCRDTStore(path) {
-    const sstore = syncedStore({ workspace: {} });
-    const doc = getYjsDoc(sstore);
-    const wsProvider = new WebsocketProvider("ws://localhost:8000/ws/crdt", path, doc);
-    return {store: svelteSyncedStore(sstore), sstore, doc};
-  }
-  $: connection = getCRDTStore(path);
-  $: store = connection.store;
-  $: store.subscribe((value) => {
-    if (!value?.workspace?.edges) return;
-    $nodes = [...value.workspace.nodes];
-    $edges = [...value.workspace.edges];
-    updateNodeInternals();
-  });
-  $: setContext('LynxKite store', store);
-
-  export let path = '';
-
-  const { screenToFlowPosition } = useSvelteFlow();
-
-  const nodeTypes: NodeTypes = {
-    basic: NodeWithParams,
-    visualization: NodeWithVisualization,
-    image: NodeWithImage,
-    table_view: NodeWithTableView,
-    sub_flow: NodeWithSubFlow,
-    area: NodeWithArea,
-  };
-
-  const nodes = writable<Node[]>([]);
-  const edges = writable<Edge[]>([]);
-
-  function closeNodeSearch() {
-    nodeSearchSettings = undefined;
-  }
-  function toggleNodeSearch({ detail: { event } }) {
-    if (nodeSearchSettings) {
-      closeNodeSearch();
-      return;
-    }
-    event.preventDefault();
-    nodeSearchSettings = {
-      pos: { x: event.clientX, y: event.clientY },
-      boxes: $catalog.data[$store.workspace.env],
-    };
-  }
-  function addNode(e) {
-    const meta = {...e.detail};
-    const node = {
-      type: meta.type,
-      data: {
-        meta: meta,
-        title: meta.name,
-        params: Object.fromEntries(
-          Object.values(meta.params).map((p) => [p.name, p.default])),
-      },
-    };
-    node.position = screenToFlowPosition({x: nodeSearchSettings.pos.x, y: nodeSearchSettings.pos.y});
-    const title = node.data.title;
-    let i = 1;
-    node.id = `${title} ${i}`;
-    const nodes = $store.workspace.nodes;
-    while (nodes.find((x) => x.id === node.id)) {
-      i += 1;
-      node.id = `${title} ${i}`;
-    }
-    node.parentId = nodeSearchSettings.parentId;
-    if (node.parentId) {
-      node.extent = 'parent';
-      const parent = nodes.find((x) => x.id === node.parentId);
-      node.position = { x: node.position.x - parent.position.x, y: node.position.y - parent.position.y };
-    }
-    nodes.push(node);
-    closeNodeSearch();
-  }
-  const catalog = useQuery(['catalog'], async () => {
-    const res = await fetch('/api/catalog');
-    return res.json();
-  }, {staleTime: 60000, retry: false});
-
-  let nodeSearchSettings: {
-    pos: XYPosition,
-    boxes: any[],
-    parentId: string,
-  };
-
-  function nodeClick(e) {
-    const node = e.detail.node;
-    const meta = node.data.meta;
-    if (!meta) return;
-    const sub_nodes = meta.sub_nodes;
-    if (!sub_nodes) return;
-    const event = e.detail.event;
-    if (event.target.classList.contains('title')) return;
-    nodeSearchSettings = {
-      pos: { x: event.clientX, y: event.clientY },
-      boxes: sub_nodes,
-      parentId: node.id,
-    };
-  }
-  function onConnect(params: Connection) {
-    const edge = {
-      id: `${params.source} ${params.target}`,
-      source: params.source,
-      sourceHandle: params.sourceHandle,
-      target: params.target,
-      targetHandle: params.targetHandle,
-    };
-    $store.workspace.edges.push(edge);
-  }
-  function onDelete(params) {
-    const { nodes, edges } = params;
-    for (const node of nodes) {
-      const index = $store.workspace.nodes.findIndex((x) => x.id === node.id);
-      if (index !== -1) $store.workspace.nodes.splice(index, 1);
-    }
-    for (const edge of edges) {
-      const index = $store.workspace.edges.findIndex((x) => x.id === edge.id);
-      if (index !== -1) $store.workspace.edges.splice(index, 1);
-    }
-  }
-  $: parentDir = path.split('/').slice(0, -1).join('/');
-</script>
-
-<div class="page">
-  {#if $store.workspace !== undefined}
-  <div class="top-bar">
-    <div class="ws-name">
-      <a href><img src="/favicon.ico"></a>
-      {path}
-    </div>
-    <div class="tools">
-      <EnvironmentSelector
-        options={Object.keys($catalog.data || {})}
-        value={$store.workspace.env}
-        onChange={(env) => {
-          $store.workspace.env = env;
-        }}
-        />
-      <a href><Atom /></a>
-      <a href><Backspace /></a>
-      <a href="#dir?path={parentDir}"><ArrowBack /></a>
-    </div>
-  </div>
-  <div style:height="100%">
-    <SvelteFlow {nodes} {edges} {nodeTypes} fitView
-      on:paneclick={toggleNodeSearch}
-      on:nodeclick={nodeClick}
-      onconnect={onConnect}
-      ondelete={onDelete}
-      proOptions={{ hideAttribution: true }}
-      maxZoom={3}
-      minZoom={0.3}
-      defaultEdgeOptions={{ markerEnd: { type: MarkerType.Arrow } }}
-      >
-      <Controls />
-      <MiniMap />
-      {#if nodeSearchSettings}
-      <NodeSearch pos={nodeSearchSettings.pos} boxes={nodeSearchSettings.boxes} on:cancel={closeNodeSearch} on:add={addNode} />
-      {/if}
-    </SvelteFlow>
-  </div>
-  {/if}
-</div>
-
-<style>
-  .top-bar {
-    display: flex;
-    justify-content: space-between;
-    background: oklch(30% 0.13 230);
-    color: white;
-  }
-  .ws-name {
-    font-size: 1.5em;
-  }
-  .ws-name img {
-    height: 1.5em;
-    vertical-align: middle;
-    margin: 4px;
-  }
-  .page {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-  }
-
-  .tools {
-    display: flex;
-    align-items: center;
-  }
-  .tools a {
-    color: oklch(75% 0.13 230);
-    font-size: 1.5em;
-    padding: 0 10px;
-  }
-</style>

web/src/LynxKiteNode.svelte

@@ -1,174 +0,0 @@
-<script lang="ts">
-  import { getContext } from 'svelte';
-  import { Handle, useSvelteFlow, useUpdateNodeInternals, type NodeProps, NodeResizeControl } from '@xyflow/svelte';
-  import ChevronDownRight from 'virtual:icons/tabler/chevron-down-right';
-
-  const { updateNodeData } = useSvelteFlow();
-  const updateNodeInternals = useUpdateNodeInternals();
-  type $$Props = NodeProps;
-
-  export let nodeStyle = '';
-  export let containerStyle = '';
-  export let id: $$Props['id']; id;
-  export let data: $$Props['data'];
-  export let deletable: $$Props['deletable'] = undefined; deletable;
-  export let draggable: $$Props['draggable'] = undefined; draggable;
-  export let parentId: $$Props['parentId'] = undefined; parentId;
-  export let selectable: $$Props['selectable'] = undefined; selectable;
-  export let dragHandle: $$Props['dragHandle'] = undefined; dragHandle;
-  export let type: $$Props['type']  = undefined; type;
-  export let selected: $$Props['selected'] = undefined; selected;
-  export let isConnectable: $$Props['isConnectable'] = undefined; isConnectable;
-  export let zIndex: $$Props['zIndex'] = undefined; zIndex;
-  export let width: $$Props['width'] = undefined; width;
-  export let height: $$Props['height'] = undefined; height;
-  export let dragging: $$Props['dragging']; dragging;
-  export let targetPosition: $$Props['targetPosition'] = undefined; targetPosition;
-  export let sourcePosition: $$Props['sourcePosition'] = undefined; sourcePosition;
-  export let positionAbsoluteX: $$Props['positionAbsoluteX'] = undefined; positionAbsoluteX;
-  export let positionAbsoluteY: $$Props['positionAbsoluteY'] = undefined; positionAbsoluteY;
-  export let onToggle = () => {};
-
-  $: store = getContext('LynxKite store');
-  $: expanded = !data.collapsed;
-  function titleClicked() {
-    const i = $store.workspace.nodes.findIndex((n) => n.id === id);
-    $store.workspace.nodes[i].data.collapsed = expanded;
-    onToggle({ expanded });
-    // Trigger update.
-    data = data;
-    updateNodeInternals();
-  }
-  function asPx(n: number | undefined) {
-    return n ? n + 'px' : undefined;
-  }
-  function getHandles(inputs, outputs) {
-    const handles: {
-      position: 'top' | 'bottom' | 'left' | 'right',
-      name: string,
-      index: number,
-      offsetPercentage: number,
-      showLabel: boolean,
-    }[] = [];
-    for (const e of Object.values(inputs)) {
-      handles.push({ ...e, type: 'target' });
-    }
-    for (const e of Object.values(outputs)) {
-      handles.push({ ...e, type: 'source' });
-    }
-    const counts = { top: 0, bottom: 0, left: 0, right: 0 };
-    for (const e of handles) {
-      e.index = counts[e.position];
-      counts[e.position]++;
-    }
-    for (const e of handles) {
-      e.offsetPercentage = 100 * (e.index + 1) / (counts[e.position] + 1);
-      const simpleHorizontal = counts.top === 0 && counts.bottom === 0 && handles.length <= 2;
-      const simpleVertical = counts.left === 0 && counts.right === 0 && handles.length <= 2;
-      e.showLabel = !simpleHorizontal && !simpleVertical;
-    }
-    return handles;
-  }
-  $: handles = getHandles(data.meta?.inputs || {}, data.meta?.outputs || {});
-  const handleOffsetDirection = { top: 'left', bottom: 'left', left: 'top', right: 'top' };
-</script>
-
-<div class="node-container" class:expanded={expanded}
-  style:width={asPx(width)} style:height={asPx(expanded ? height : undefined)} style={containerStyle}>
-  <div class="lynxkite-node" style={nodeStyle}>
-    <div class="title" on:click={titleClicked}>
-      {data.title}
-      {#if data.error}<span class="title-icon">⚠️</span>{/if}
-      {#if !expanded}<span class="title-icon">⋯</span>{/if}
-    </div>
-    {#if expanded}
-      {#if data.error}
-        <div class="error">{data.error}</div>
-      {/if}
-      <slot />
-    {/if}
-    {#each handles as handle}
-      <Handle
-        id={handle.name} type={handle.type} position={handle.position}
-        style="{handleOffsetDirection[handle.position]}: {handle.offsetPercentage}%">
-        {#if handle.showLabel}<span class="handle-name">{handle.name.replace(/_/g, " ")}</span>{/if}
-      </Handle>
-    {/each}
-  </div>
-  {#if expanded}
-    <NodeResizeControl
-      minWidth={100}
-      minHeight={50}
-      style="background: transparent; border: none;"
-      onResizeStart={() => updateNodeData(id, { beingResized: true })}
-      onResizeEnd={() => updateNodeData(id, { beingResized: false })}
-      >
-      <ChevronDownRight class="node-resizer" />
-    </NodeResizeControl>
-  {/if}
-</div>
-
-<style>
-  .error {
-    background: #ffdddd;
-    padding: 8px;
-    font-size: 12px;
-  }
-  .title-icon {
-    margin-left: 5px;
-    float: right;
-  }
-  .node-container {
-    padding: 8px;
-    position: relative;
-  }
-  .lynxkite-node {
-    box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.3);
-    border-radius: 4px;
-    background: white;
-  }
-  .expanded .lynxkite-node {
-    overflow-y: auto;
-    height: 100%;
-  }
-  .title {
-    background: oklch(75% 0.2 55);
-    font-weight: bold;
-    padding: 8px;
-  }
-  .handle-name {
-    font-size: 10px;
-    color: black;
-    letter-spacing: 0.05em;
-    text-align: right;
-    white-space: nowrap;
-    position: absolute;
-    top: -5px;
-    backdrop-filter: blur(10px);
-    padding: 2px 8px;
-    border-radius: 4px;
-    visibility: hidden;
-  }
-  :global(.left) .handle-name {
-    right: 20px;
-  }
-  :global(.right) .handle-name {
-    left: 20px;
-  }
-  :global(.top) .handle-name,
-  :global(.bottom) .handle-name {
-    top: -5px;
-    left: 5px;
-    backdrop-filter: none;
-  }
-  .node-container:hover .handle-name {
-    visibility: visible;
-  }
-  :global(.node-resizer) {
-    position: absolute;
-    bottom: 8px;
-    right: 8px;
-    cursor: nwse-resize;
-    color: var(--bs-border-color);
-  }
-</style>

web/src/NodeParameter.svelte

@@ -1,69 +0,0 @@
-<script lang="ts">
-  export let name: string;
-  export let value;
-  export let meta;
-  export let onChange;
-const BOOLEAN = "<class 'bool'>";
-</script>
-
-<label class="param">
-  {#if meta?.type?.format === 'collapsed'}
-    <span class="param-name">{name.replace(/_/g, ' ')}</span>
-    <button class="collapsed-param form-control form-control-sm">
-      ⋯
-    </button>
-  {:else if meta?.type?.format === 'textarea'}
-    <span class="param-name">{name.replace(/_/g, ' ')}</span>
-    <textarea class="form-control form-control-sm"
-      rows="6"
-      value={value}
-      on:change={(evt) => onChange(evt.currentTarget.value)}
-      />
-  {:else if meta?.type?.enum}
-    <span class="param-name">{name.replace(/_/g, ' ')}</span>
-    <select class="form-select form-select-sm"
-      value={value || meta.type.enum[0]}
-      on:change={(evt) => onChange(evt.currentTarget.value)}
-    >
-      {#each meta.type.enum as option}
-        <option value={option}>{option}</option>
-      {/each}
-    </select>
-  {:else if meta?.type?.type === BOOLEAN}
-    <label class="form-check-label">
-      <input class="form-check-input"
-      type="checkbox"
-      checked={value}
-      on:change={(evt) => onChange(evt.currentTarget.checked)}
-      />
-      {name.replace(/_/g, ' ')}
-    </label>
-  {:else}
-    <span class="param-name">{name.replace(/_/g, ' ')}</span>
-    <input class="form-control form-control-sm"
-      value={value}
-      on:change={(evt) => onChange(evt.currentTarget.value)}
-      />
-  {/if}
-</label>
-
-<style>
-  .param {
-    padding: 4px 8px 4px 8px;
-    display: block;
-  }
-  .param-name {
-    display: block;
-    font-size: 10px;
-    letter-spacing: 0.05em;
-    margin-left: 10px;
-    background: var(--bs-border-color);
-    width: fit-content;
-    padding: 2px 8px;
-    border-radius: 4px 4px 0 0;
-  }
-  .collapsed-param {
-    min-height: 20px;
-    line-height: 10px;
-  }
-</style>

web/src/NodeSearch.svelte

@@ -1,100 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher, onMount } from 'svelte';
-  import Fuse from 'fuse.js'
-  const dispatch = createEventDispatcher();
-  export let pos;
-  export let boxes;
-  let searchBox: HTMLInputElement;
-  let hits = Object.values(boxes).map(box => ({item: box}));
-  let selectedIndex = 0;
-  onMount(() => searchBox.focus());
-  $: fuse = new Fuse(Object.values(boxes), {
-    keys: ['name']
-  })
-  function onInput() {
-    hits = fuse.search(searchBox.value);
-    selectedIndex = Math.max(0, Math.min(selectedIndex, hits.length - 1));
-  }
-  function onKeyDown(e) {
-    if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      selectedIndex = Math.min(selectedIndex + 1, hits.length - 1);
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      selectedIndex = Math.max(selectedIndex - 1, 0);
-    } else if (e.key === 'Enter') {
-      addSelected();
-    } else if (e.key === 'Escape') {
-      dispatch('cancel');
-    }
-  }
-  function addSelected() {
-    const node = {...hits[selectedIndex].item};
-    delete node.sub_nodes;
-    node.position = pos;
-    dispatch('add', node);
-  }
-  async function lostFocus(e) {
-    // If it's a click on a result, let the click handler handle it.
-    if (e.relatedTarget && e.relatedTarget.closest('.node-search')) return;
-    dispatch('cancel');
-  }
-
-</script>
-
-<div class="node-search" style="top: {pos.y}px; left: {pos.x}px;">
-  <input
-    bind:this={searchBox}
-    on:input={onInput}
-    on:keydown={onKeyDown}
-    on:focusout={lostFocus}
-    placeholder="Search for box">
-  <div class="matches">
-    {#each hits as box, index}
-      <div
-        tabindex="0"
-        on:focus={() => selectedIndex = index}
-        on:mouseenter={() => selectedIndex = index}
-        on:click={addSelected}
-        class="search-result"
-        class:selected={index == selectedIndex}>
-        {box.item.name}
-      </div>
-    {/each}
-  </div>
-</div>
-
-<style>
-  input {
-    width: calc(100% - 26px);
-    font-size: 20px;
-    padding: 8px;
-    border-radius: 4px;
-    border: 1px solid #eee;
-    margin: 4px;
-  }
-  .search-result {
-    padding: 4px;
-    cursor: pointer;
-  }
-  .search-result.selected {
-    background-color: oklch(75% 0.2 55);
-    border-radius: 4px;
-  }
-  .node-search {
-    position: fixed;
-    width: 300px;
-    z-index: 5;
-    padding: 4px;
-    border-radius: 4px;
-    border: 1px solid #888;
-    background-color: white;
-    max-height: -webkit-fill-available;
-    max-height: -moz-available;
-    display: flex;
-    flex-direction: column;
-  }
-  .matches {
-    overflow-y: auto;
-  }
-</style>

web/src/NodeWithArea.svelte

@@ -1,60 +0,0 @@
-<script lang="ts">
-  import { type NodeProps, useSvelteFlow } from '@xyflow/svelte';
-  import NodeParameter from './NodeParameter.svelte';
-
-  type $$Props = NodeProps;
-
-  export let containerStyle = '';
-  export let id: $$Props['id']; id;
-  export let data: $$Props['data'];
-  export let dragHandle: $$Props['dragHandle'] = undefined; dragHandle;
-  export let type: $$Props['type']  = undefined; type;
-  export let selected: $$Props['selected'] = undefined; selected;
-  export let isConnectable: $$Props['isConnectable'] = undefined; isConnectable;
-  export let zIndex: $$Props['zIndex'] = undefined; zIndex;
-  export let width: $$Props['width'] = undefined; width;
-  export let height: $$Props['height'] = undefined; height;
-  export let dragging: $$Props['dragging']; dragging;
-  export let targetPosition: $$Props['targetPosition'] = undefined; targetPosition;
-  export let sourcePosition: $$Props['sourcePosition'] = undefined; sourcePosition;
-  export let positionAbsoluteX: $$Props['positionAbsoluteX'] = undefined; positionAbsoluteX;
-  export let positionAbsoluteY: $$Props['positionAbsoluteY'] = undefined; positionAbsoluteY;
-
-  function asPx(n: number | undefined) {
-    return n ? n + 'px' : undefined;
-  }
-  const { updateNodeData } = useSvelteFlow();
-  $: metaParams = data.meta?.params;
-</script>
-
-<div class="area" style:width={asPx(width)} style:height={asPx(height)} style={containerStyle}>
-  <div class="title">
-    {data.title}
-  </div>
-  {#each Object.entries(data.params) as [name, value]}
-    <NodeParameter
-      {name}
-      {value}
-      meta={metaParams?.[name]}
-      onChange={(newValue) => updateNodeData(id, { params: { ...data.params, [name]: newValue } })}
-      />
-  {/each}
-</div>
-
-<style>
-  .area {
-    border-radius: 10px;
-    border: 3px dashed oklch(75% 0.2 55);
-    z-index: 0 !important;
-  }
-  .title {
-    color: oklch(75% 0.2 55);
-    width: 100%;
-    text-align: center;
-    top: -1.5em;
-    position: absolute;
-    -webkit-text-stroke: 5px white;
-    paint-order: stroke fill;
-    font-weight: bold;
-  }
-</style>

web/src/NodeWithImage.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-  import { type NodeProps } from '@xyflow/svelte';
-  import NodeWithParams from './NodeWithParams.svelte';
-  type $$Props = NodeProps;
-  export let data: $$Props['data'];
-</script>
-
-<NodeWithParams {...$$props}>
-  {#if data.display}
-    <img src={data.display}/>
-  {/if}
-</NodeWithParams>
-<style>
-</style>

web/src/NodeWithParams.svelte

@@ -1,30 +0,0 @@
-<script lang="ts">
-  import { getContext } from 'svelte';
-  import { type NodeProps, useNodes } from '@xyflow/svelte';
-  import LynxKiteNode from './LynxKiteNode.svelte';
-  import NodeParameter from './NodeParameter.svelte';
-  type $$Props = NodeProps;
-  export let id: $$Props['id'];
-  export let data: $$Props['data'];
-  $: metaParams = data.meta?.params;
-  $: store = getContext('LynxKite store');
-  function setParam(name, newValue) {
-    const i = $store.workspace.nodes.findIndex((n) => n.id === id);
-    $store.workspace.nodes[i].data.params[name] = newValue;
-  }
-  $: params = $nodes && data?.params ? Object.entries(data.params) : [];
-  const nodes = useNodes(); // We don't properly get updates to "data". This is a hack.
-  $: props = $nodes && $$props;
-</script>
-
-<LynxKiteNode {...props}>
-  {#each params as [name, value]}
-    <NodeParameter
-      {name}
-      {value}
-      meta={metaParams?.[name]}
-      onChange={(value) => setParam(name, value)}
-      />
-  {/each}
-  <slot />
-</LynxKiteNode>

web/src/NodeWithSubFlow.svelte

@@ -1,37 +0,0 @@
-<script lang="ts">
-  import { type NodeProps, useNodes } from '@xyflow/svelte';
-  import LynxKiteNode from './LynxKiteNode.svelte';
-  type $$Props = NodeProps;
-  const nodes = useNodes();
-  export let id: $$Props['id'];
-  export let data: $$Props['data'];
-  let isExpanded = true;
-  function onToggle({ expanded }) {
-    isExpanded = expanded;
-    nodes.update((n) =>
-      n.map((node) =>
-        node.parentId === id
-        ? { ...node, hidden: !expanded }
-        : node));
-  }
-  function computeSize(nodes) {
-    let width = 200;
-    let height = 200;
-    for (const node of nodes) {
-      if (node.parentId === id) {
-        width = Math.max(width, node.position.x + 300);
-        height = Math.max(height, node.position.y + 200);
-      }
-    }
-    return { width, height };
-  }
-  $: ({ width, height } = computeSize($nodes));
-</script>
-
-<LynxKiteNode
-  {...$$props}
-  width={isExpanded && width} height={isExpanded && height}
-  nodeStyle="background: transparent;" containerStyle="max-width: none; max-height: none;" {onToggle}>
-</LynxKiteNode>
-<style>
-</style>

web/src/NodeWithTableView.svelte

@@ -1,58 +0,0 @@
-<script lang="ts">
-  import { useNodes, type NodeProps } from '@xyflow/svelte';
-  import LynxKiteNode from './LynxKiteNode.svelte';
-  import Table from './Table.svelte';
-  import SvelteMarkdown from 'svelte-markdown'
-  type $$Props = NodeProps;
-  export let data: $$Props['data'];
-  const nodes = useNodes(); // We don't properly get updates to "data". This is a hack.
-  $: D = $nodes && data;
-  const open = {};
-  $: single = D.display?.value?.dataframes && Object.keys(D.display.value.dataframes).length === 1;
-  function toMD(v) {
-    if (typeof v === 'string') {
-      return v;
-    }
-    if (Array.isArray(v)) {
-      return v.map(toMD).join('\n\n');
-    }
-    return JSON.stringify(v);
-  }
-</script>
-
-<LynxKiteNode {...$$props}>
-  {#if D?.display?.value}
-    {#each Object.entries(D.display.value.dataframes || {}) as [name, df]}
-      {#if !single}<div class="df-head" on:click={() => open[name] = !open[name]}>{name}</div>{/if}
-      {#if single || open[name]}
-        {#if df.data.length > 1}
-          <Table columns={df.columns} data={df.data} />
-        {:else}
-          <dl>
-          {#each df.columns as c, i}
-            <dt>{c}</dt>
-            <dd><SvelteMarkdown source={toMD(df.data[0][i])} /></dd>
-          {/each}
-          </dl>
-        {/if}
-      {/if}
-    {/each}
-    {#each Object.entries(D.display.value.others || {}) as [name, o]}
-      <div class="df-head" on:click={() => open[name] = !open[name]}>{name}</div>
-      {#if open[name]}
-      <pre>{o}</pre>
-      {/if}
-    {/each}
-  {/if}
-</LynxKiteNode>
-<style>
-  .df-head {
-    font-weight: bold;
-    padding: 8px;
-    background: #f0f0f0;
-    cursor: pointer;
-  }
-  dl {
-    margin: 10px;
-  }
-</style>

web/src/NodeWithVisualization.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-  import { useNodes, type NodeProps } from '@xyflow/svelte';
-  import NodeWithParams from './NodeWithParams.svelte';
-  import { Chart } from 'svelte-echarts';
-  import { init } from 'echarts';
-  type $$Props = NodeProps;
-  export let data: $$Props['data'];
-
-  const nodes = useNodes(); // We don't properly get updates to "data". This is a hack.
-  $: D = $nodes && data;
-</script>
-
-<NodeWithParams {...$$props}>
-  <Chart {init} options={D?.display?.value || {}} initOptions={{renderer: 'canvas', width: 250, height: 250}}/>
-</NodeWithParams>
-<style>
-</style>

web/src/Table.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-  export let data, columns;
-</script>
-
-<table>
-  <thead>
-    <tr>
-      {#each columns as column}
-        <th>{column}</th>
-      {/each}
-    </tr>
-  </thead>
-  <tbody>
-    {#each data as row}
-      <tr>
-        {#each columns as column}
-          <td>{row[column]}</td>
-        {/each}
-      </tr>
-    {/each}
-  </tbody>
-</table>

web/src/Workspace.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-  // This is the whole LynxKite workspace editor page.
-  import { QueryClient, QueryClientProvider } from '@sveltestack/svelte-query'
-  import { SvelteFlowProvider } from '@xyflow/svelte';
-  import LynxKiteFlow from './LynxKiteFlow.svelte';
-  export let path = '';
-  const queryClient = new QueryClient()
-</script>
-
-<QueryClientProvider client={queryClient}>
-  <SvelteFlowProvider>
-    <LynxKiteFlow path={path} />
-  </SvelteFlowProvider>
-</QueryClientProvider>

web/src/app.scss

@@ -1,38 +0,0 @@
-// Import all of Bootstrap's CSS
-$form-select-indicator-color: oklch(90% 0.01 55);
-@import "bootstrap/scss/bootstrap";
-:root {
-  --bs-border-color: oklch(90% 0.01 55);
-}
-
-path.svelte-flow__edge-path {
-  stroke-width: 2;
-  stroke: black;
-}
-.svelte-flow__edge.selected path.svelte-flow__edge-path {
-  outline: var(--xy-selection-border, var(--xy-selection-border-default));
-  outline-offset: 10px;
-  border-radius: 1px;
-}
-.svelte-flow__handle {
-  border-color: black;
-  background: white;
-  width: 10px;
-  height: 10px;
-}
-.svelte-flow__arrowhead * {
-  stroke: none;
-  fill: black;
-}
-// We want the area node to be above the sub-flow node if its inside the sub-flow.
-// This will need some more thinking for a general solution.
-.svelte-flow__node-sub_flow {
-  z-index: -20 !important;
-}
-.svelte-flow__node-area {
-  z-index: -10 !important;
-}
-.selected .lynxkite-node {
-  outline: var(--xy-selection-border, var(--xy-selection-border-default));
-  outline-offset: 7.5px;
-}

web/src/directory.css

@@ -1,10 +0,0 @@
-@media (min-width: 640px) {
-  .directory {
-    width: 100%;
-  }
-}
-
-.directory {
-  width: 800px;
-  background: white;
-}

web/src/main.ts

@@ -1,10 +0,0 @@
-import App from './App.svelte';
-
-import './app.scss';
-import * as bootstrap from 'bootstrap';
-
-const app = new App({
-  target: document.getElementById('app')!,
-});
-
-export default app;

web/src/vite-env.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="svelte" />
-/// <reference types="vite/client" />

web/svelte.config.js

@@ -1,7 +0,0 @@
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
-
-export default {
-  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
-  // for more information about preprocessors
-  preprocess: vitePreprocess(),
-}

web/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [],
+  theme: {
+    extend: {},
+  },
+  plugins: [require('daisyui')],
+};

web/tailwind.config.ts

@@ -0,0 +1,18 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;

web/tsconfig.json

@@ -1,20 +1,27 @@
 {
-  "extends": "@tsconfig/svelte/tsconfig.json",
   "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "resolveJsonModule": true,
-    /**
-     * Typecheck JS in `.svelte` and `.js` files by default.
-     * Disable checkJs if you'd like to use dynamic types in JS.
-     * Note that setting allowJs false does not prevent the use
-     * of JS in `.svelte` files.
-     */
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
-    "checkJs": true,
-    "isolatedModules": true
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
   },
-  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
 }

web/tsconfig.node.json

@@ -1,9 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler"
-  },
-  "include": ["vite.config.ts"]
-}