h-sphere · kulak-at · Jun 29, 2025 · Jun 28, 2025 · Jun 29, 2025 · Jun 29, 2025
diff --git a/package.json b/package.json
@@ -6,10 +6,12 @@
   "private": true,
   "scripts": {
     "limn-explorer-build": "cd packages/limn-explorer && pnpm build",
+    "explorer:dev": "cd packages/limn-explorer && pnpm dev",
     "build": "cd packages/limn && pnpm build",
     "ci:build-docs": "./build-docs.sh",
     "docs:build": "cd docs && pnpm run docs:build",
-    "docs:dev": "cd docs && pnpm run docs:dev"
+    "docs:dev": "cd docs && pnpm run docs:dev",
+    "test": "echo 'No tests for now'"
   },
   "keywords": [],
   "author": "",
@@ -18,5 +20,8 @@
   "devDependencies": {
     "@changesets/cli": "^2.29.4",
     "@types/jest": "^29.5.14"
+  },
+  "overrides": {
+    "css-select": "5.1.0"
   }
-}
+}
diff --git a/packages/limn-explorer/.gitignore b/packages/limn-explorer/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/limn-explorer/.vscode/extensions.json b/packages/limn-explorer/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
diff --git a/packages/limn-explorer/README.md b/packages/limn-explorer/README.md
@@ -0,0 +1,5 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
diff --git a/packages/limn-explorer/components.json b/packages/limn-explorer/components.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "new-york",
+  "typescript": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/style.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "composables": "@/composables",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib"
+  },
+  "iconLibrary": "lucide"
+}
diff --git a/packages/limn-explorer/esbuild.mjs b/packages/limn-explorer/esbuild.mjs
diff --git a/packages/limn-explorer/index.html b/packages/limn-explorer/index.html
@@ -1,56 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link rel="shortcut icon" href="./favicon.png">
-  <title>Limn Explorer</title>
-  <style>
-
-    body, html {
-      margin: 0; padding: 0;
-      min-height: 100%;
-    }
-
-    #editor {
-      height: 100vh;
-      box-sizing: border-box;
-      padding: 1em;
-    }
-
-    .monaco-editor.monaco-editor {
-      --vscode-editor-background: transparent;
-      --vscode-focusBorder: transparent;
-      --vscode-editorGutter-background: transparent;
-    }
-
-    /* .monaco-editor .margin {
-      display: none;
-    } */
-
-    #app {
-      width: 100%;
-      height: 100vh;
-      position: absolute;
-      top: 0; left: 0;
-      background: #1e1e1e;
-    }
-
-    .monaco-editor .view-line span:not(:has(span)) {
-      background: rgb(30 30 30 / 70%);
-    }
-
-    .hide-editor #editor {
-      display: none;
-    }
-  </style>
-</head>
-
-<body>
-  <canvas id="app"></canvas>
-  <div id="editor"></div>
-  <script type="module" src="/src/index.ts"></script>
-</body>
-
-</html>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/packages/limn-explorer/package.json b/packages/limn-explorer/package.json
@@ -1,25 +1,37 @@
 {
   "name": "limn-explorer",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
   "private": true,
+  "version": "0.0.0",
+  "type": "module",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "vite",
-    "build": "vite build"
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
   },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "packageManager": "pnpm@10.12.3",
   "dependencies": {
-    "esbuild": "^0.25.5",
+    "@tailwindcss/vite": "^4.1.11",
+    "@vee-validate/zod": "^4.15.1",
+    "@vueuse/core": "^13.4.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "limn": "workspace:*",
-    "monaco-editor": "^0.52.2"
+    "lucide-vue-next": "^0.525.0",
+    "monaco-editor": "^0.52.2",
+    "reka-ui": "^2.3.1",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.1.11",
+    "tw-animate-css": "^1.3.4",
+    "vee-validate": "^4.15.1",
+    "vue": "^3.5.17",
+    "zod": "^3.25.67"
   },
   "devDependencies": {
-    "vite": "^6.3.5",
-    "vite-plugin-monaco-editor": "^1.1.0"
+    "@types/node": "^24.0.7",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "@vue/tsconfig": "^0.7.0",
+    "typescript": "~5.8.3",
+    "vite": "^7.0.0",
+    "vite-svg-loader": "^5.1.0",
+    "vue-tsc": "^2.2.10"
   }
 }
diff --git a/packages/limn-explorer/public/vite.svg b/packages/limn-explorer/public/vite.svg
diff --git a/packages/limn-explorer/src/App.vue b/packages/limn-explorer/src/App.vue
@@ -0,0 +1,33 @@
+<script lang="ts">
+export const description = 'Collapsible nested sidebars.'
+export const iframeHeight = '800px'
+</script>
+
+<script setup lang="ts">
+import AppSidebar from '@/components/AppSidebar.vue'
+import {
+  SidebarInset,
+  SidebarProvider,
+} from '@/components/ui/sidebar'
+import MainContainer from '@/components/mainContainer.vue'
+</script>
+
+<template>
+  <SidebarProvider
+    :style="{
+      '--sidebar-width': '350px',
+    }"
+  >
+    <AppSidebar />
+    <SidebarInset>
+    <MainContainer />
+      <!-- <div class="flex flex-1 flex-col gap-4 p-4">
+        <div
+          v-for="index in 24"
+          :key="index"
+          class="aspect-video h-12 w-full rounded-lg bg-muted/50"
+        />
+      </div> -->
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/packages/limn-explorer/src/assets/vue.svg b/packages/limn-explorer/src/assets/vue.svg
diff --git a/packages/limn-explorer/src/components/AppSidebar.vue b/packages/limn-explorer/src/components/AppSidebar.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { BookOpenText, Cog, Play, Waves } from 'lucide-vue-next'
+import Logo from './sidebar/limn-icon-explorer.svg?url'
+import { h, ref } from 'vue'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarTrigger,
+  SidebarMenuItem,
+  type SidebarProps,
+  useSidebar,
+} from '@/components/ui/sidebar'
+import { config } from '../state/config'
+import Demos from './sidebarContent/demos.vue'
+import Config from './sidebarContent/config.vue'
+import Filesystem from './sidebarContent/filesystem.vue'
+import { cn } from '../lib/utils'
+
+const props = withDefaults(defineProps<SidebarProps>(), {
+  collapsible: 'icon',
+})
+
+// This is sample data
+const data = {
+  navMain: [
+    {
+      title: 'Run',
+      icon: Play
+    },
+    // {
+    //   title: 'Playground',
+    //   icon: Folder
+    // },
+    {
+      title: 'Examples',
+      icon: BookOpenText
+    },
+    {
+      title: 'Config',
+      url: '#',
+      icon: Cog,
+      isActive: false,
+    },
+  ]
+}
+
+const activeItem = ref(data.navMain[0])
+const { setOpen, open } = useSidebar()
+setOpen(false)
+
+</script>
+
+<template>
+  <Sidebar
+    class="overflow-hidden *:data-[sidebar=sidebar]:flex-row"
+    v-bind="props"
+  >
+    <!-- This is the first sidebar -->
+    <!-- We disable collapsible and adjust width to icon. -->
+    <!-- This will make the sidebar appear as icons. -->
+    <Sidebar
+      collapsible="none"
+      class="w-[calc(var(--sidebar-width-icon)+1px)]! border-r"
+    >
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" as-child class="md:h-8 md:p-0">
+              <a href="#">
+                <div class="text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                  <Waves class="size-4" />
+                  <img :src="Logo" />
+                </div>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent class="px-1.5 md:px-0">
+            <SidebarMenu>
+              <SidebarMenuItem v-for="item in data.navMain" :key="item.title">
+                <SidebarMenuButton
+                  :tooltip="h('div', { hidden: false }, item.title)"
+                  :is-active="activeItem.title === item.title"
+                  :class="cn('px-2.5 md:px-2', { 'bg-green-300 hover:bg-green-500': item.title === 'Run' && config.autoRun })"
+                  @click="() => {
+                    if (item.title === 'Run') {
+                      config.runCurrentCode()
+                      return
+                    }
+                    if (activeItem.title === item.title && open) {
+                      setOpen(false)
+                      return
+                    }
+                    activeItem = item
+                    setOpen(true)
+                  }"
+                >
+                  <component :is="item.icon" />
+                  <span>{{ item.title }}</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarFooter>
+        <SidebarTrigger />
+      </SidebarFooter>
+    </Sidebar>
+
+    <!--  This is the second sidebar -->
+    <!--  We disable collapsible and let it fill remaining space -->
+    <Sidebar collapsible="none" class="hidden flex-1 md:flex">
+      <SidebarHeader class="gap-3.5 border-b p-4">
+        <div class="flex w-full items-center justify-between">
+          <div class="text-base font-medium text-foreground">
+            {{ activeItem.title }}
+          </div>
+        </div>
+        <!-- <SidebarInput placeholder="Type to search..." /> -->
+      </SidebarHeader>
+      <SidebarContent>
+        <Demos v-if="activeItem.title === 'Examples'" />
+        <Config v-if="activeItem.title === 'Config'" />
+        <Filesystem v-if="activeItem.title === 'Playground'" />
+      </SidebarContent>
+    </Sidebar>
+  </Sidebar>
+</template>