@floegence/floe-webapp-init 0.1.0

package/dist/index.mjs

@@ -0,0 +1,22 @@
+#!/usr/bin/env node
+import t from"node:fs";import a from"node:path";import{fileURLToPath as d}from"node:url";import y from"prompts";import{red as c,bold as g,cyan as f,green as x}from"kolorist";const h=[{name:"minimal",value:"minimal",description:"Basic setup with FloeApp"},{name:"full",value:"full",description:"Full setup with sample pages"}],v={"_package.json":"package.json",_gitignore:".gitignore","_env.example":".env.example"};async function S(){console.log(`
+${g(f("Floe Webapp"))}
+`);const n=process.argv.slice(2);let o=n[0],l;(n.includes("--help")||n.includes("-h"))&&(console.log(`Usage: npx @floegence/floe-webapp-init [project-name] [options]
+
+Options:
+  --template <name>  Use a specific template (minimal, full)
+  --help, -h         Show this help message
+
+Examples:
+  npx @floegence/floe-webapp-init
+  npx @floegence/floe-webapp-init my-app
+  npx @floegence/floe-webapp-init my-app --template full
+`),process.exit(0));const i=n.indexOf("--template");if(i!==-1&&n[i+1]){const e=n[i+1];e==="minimal"||e==="full"?l=e:(console.log(c(`Invalid template: ${e}`)),console.log("Available templates: minimal, full"),process.exit(1)),o==="--template"&&(o=n[i+2])}const p=await y([{type:o?null:"text",name:"projectName",message:"Project name:",initial:"floe-app",validate:e=>e?/^[a-z0-9-_]+$/i.test(e)?!0:"Project name can only contain letters, numbers, hyphens, and underscores":"Project name is required"},{type:l?null:"select",name:"template",message:"Select a template:",choices:h.map(e=>({title:e.name,value:e.value,description:e.description}))}],{onCancel:()=>{console.log(c(`
+Operation cancelled`)),process.exit(1)}});o=o||p.projectName,l=l||p.template,(!o||!l)&&(console.log(c("Missing required information")),process.exit(1));const s=a.resolve(o);t.existsSync(s)&&t.readdirSync(s).length>0&&(console.log(c(`
+Directory ${o} is not empty.`)),process.exit(1)),console.log(`
+Scaffolding project in ${f(s)}...
+`);const r=a.resolve(d(import.meta.url),"../../templates",l);t.existsSync(r)||(console.log(c(`Template directory not found: ${r}`)),process.exit(1)),u(r,s);const m=a.join(s,"package.json");if(t.existsSync(m)){const e=JSON.parse(t.readFileSync(m,"utf-8"));e.name=a.basename(o),t.writeFileSync(m,JSON.stringify(e,null,2)+`
+`)}console.log(x(`Done!
+`)),console.log(`Next steps:
+`),console.log(`  cd ${g(o)}`),console.log("  pnpm install"),console.log(`  pnpm dev
+`)}function u(n,o){t.mkdirSync(o,{recursive:!0});for(const l of t.readdirSync(n)){const i=a.join(n,l),p=v[l]||l,s=a.join(o,p);t.statSync(i).isDirectory()?u(i,s):t.copyFileSync(i,s)}}S().catch(n=>{console.error(c("Error:"),n),process.exit(1)});

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@floegence/floe-webapp-init",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Scaffolding tool for Floe Webapp applications",
+  "bin": {
+    "floe-webapp-init": "./dist/index.mjs"
+  },
+  "main": "./dist/index.mjs",
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "scripts": {
+    "build": "unbuild",
+    "dev": "unbuild --stub",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "prompts": "^2.4.2",
+    "kolorist": "^1.8.0"
+  },
+  "devDependencies": {
+    "@types/prompts": "^2.4.9",
+    "@types/node": "^22.10.0",
+    "typescript": "^5.7.2",
+    "unbuild": "^3.3.1"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/templates/full/_gitignore

@@ -0,0 +1,31 @@
+# Dependencies
+node_modules
+
+# Build output
+dist
+
+# Local env files
+.env
+.env.local
+.env.*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+npm-debug.log*
+pnpm-debug.log*
+yarn-debug.log*
+yarn-error.log*

package/templates/full/_package.json

@@ -0,0 +1,22 @@
+{
+  "name": "floe-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@floegence/floe-webapp-core": "^0.1.0",
+    "solid-js": "^1.9.3"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.0.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.7",
+    "vite-plugin-solid": "^2.11.0"
+  }
+}

package/templates/full/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Floe App</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+    <script>
+      (function() {
+        const stored = localStorage.getItem('floe-theme');
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        const theme = stored ? JSON.parse(stored) : (prefersDark ? 'dark' : 'light');
+        const resolved = theme === 'system' ? (prefersDark ? 'dark' : 'light') : theme;
+        document.documentElement.classList.add(resolved);
+        document.documentElement.style.colorScheme = resolved;
+      })();
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

package/templates/full/src/App.tsx

@@ -0,0 +1,64 @@
+import {
+  FloeApp,
+  Files,
+  Settings,
+  useLayout,
+  type FloeComponent,
+} from '@floegence/floe-webapp-core';
+import { HomePage } from './pages/HomePage';
+import { SettingsPage } from './pages/SettingsPage';
+
+// Component definitions for the sidebar and command palette
+// Components are rendered in the sidebar; use fullScreen: true for main content
+const components: FloeComponent[] = [
+  {
+    id: 'home',
+    name: 'Home',
+    icon: Files,
+    description: 'Home page',
+    component: HomePage,
+    sidebar: { order: 0, fullScreen: true },
+    commands: [
+      {
+        id: 'home.open',
+        title: 'Go to Home',
+        handler: ({ setActive }) => setActive('home'),
+      },
+    ],
+  },
+  {
+    id: 'settings',
+    name: 'Settings',
+    icon: Settings,
+    description: 'Application settings',
+    component: SettingsPage,
+    sidebar: { order: 100, fullScreen: true },
+    commands: [
+      {
+        id: 'settings.open',
+        title: 'Open Settings',
+        handler: ({ setActive }) => setActive('settings'),
+      },
+    ],
+  },
+];
+
+// Content switcher based on active component
+function AppContent() {
+  const layout = useLayout();
+
+  return (
+    <>
+      {layout.sidebarActiveTab() === 'home' && <HomePage />}
+      {layout.sidebarActiveTab() === 'settings' && <SettingsPage />}
+    </>
+  );
+}
+
+export default function App() {
+  return (
+    <FloeApp components={components}>
+      <AppContent />
+    </FloeApp>
+  );
+}

package/templates/full/src/index.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss';
+@source './**/*.{ts,tsx}';
+@import '@floegence/floe-webapp-core/styles';

package/templates/full/src/index.tsx

@@ -0,0 +1,5 @@
+import { render } from 'solid-js/web';
+import App from './App';
+import './index.css';
+
+render(() => <App />, document.getElementById('root')!);

package/templates/full/src/pages/HomePage.tsx

@@ -0,0 +1,32 @@
+export function HomePage() {
+  return (
+    <div class="flex h-full items-center justify-center">
+      <div class="text-center">
+        <h1 class="text-3xl font-bold text-foreground">Welcome to Floe</h1>
+        <p class="mt-2 text-muted-foreground">
+          A feature-rich starter template
+        </p>
+        <div class="mt-6 flex justify-center gap-4">
+          <div class="rounded-lg border border-border bg-card p-4">
+            <h3 class="font-medium text-foreground">Components</h3>
+            <p class="mt-1 text-sm text-muted-foreground">
+              Pre-built UI components
+            </p>
+          </div>
+          <div class="rounded-lg border border-border bg-card p-4">
+            <h3 class="font-medium text-foreground">Commands</h3>
+            <p class="mt-1 text-sm text-muted-foreground">
+              Press Cmd+K to open
+            </p>
+          </div>
+          <div class="rounded-lg border border-border bg-card p-4">
+            <h3 class="font-medium text-foreground">Themes</h3>
+            <p class="mt-1 text-sm text-muted-foreground">
+              Light and dark mode
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/full/src/pages/SettingsPage.tsx

@@ -0,0 +1,78 @@
+import { useTheme, Sun, Moon } from '@floegence/floe-webapp-core';
+
+export function SettingsPage() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <div class="h-full overflow-auto p-6">
+      <h1 class="text-2xl font-bold text-foreground">Settings</h1>
+      <p class="mt-1 text-muted-foreground">
+        Manage your application preferences
+      </p>
+
+      <div class="mt-6 space-y-6">
+        {/* Theme Section */}
+        <section class="rounded-lg border border-border bg-card p-4">
+          <h2 class="font-medium text-foreground">Appearance</h2>
+          <p class="mt-1 text-sm text-muted-foreground">
+            Customize how the app looks
+          </p>
+
+          <div class="mt-4 flex gap-3">
+            <button
+              class={`flex items-center gap-2 rounded-lg border px-4 py-2 transition-colors ${
+                theme() === 'light'
+                  ? 'border-primary bg-primary/10 text-primary'
+                  : 'border-border text-muted-foreground hover:border-foreground/50'
+              }`}
+              onClick={() => setTheme('light')}
+            >
+              <Sun size={16} />
+              Light
+            </button>
+            <button
+              class={`flex items-center gap-2 rounded-lg border px-4 py-2 transition-colors ${
+                theme() === 'dark'
+                  ? 'border-primary bg-primary/10 text-primary'
+                  : 'border-border text-muted-foreground hover:border-foreground/50'
+              }`}
+              onClick={() => setTheme('dark')}
+            >
+              <Moon size={16} />
+              Dark
+            </button>
+            <button
+              class={`flex items-center gap-2 rounded-lg border px-4 py-2 transition-colors ${
+                theme() === 'system'
+                  ? 'border-primary bg-primary/10 text-primary'
+                  : 'border-border text-muted-foreground hover:border-foreground/50'
+              }`}
+              onClick={() => setTheme('system')}
+            >
+              System
+            </button>
+          </div>
+        </section>
+
+        {/* About Section */}
+        <section class="rounded-lg border border-border bg-card p-4">
+          <h2 class="font-medium text-foreground">About</h2>
+          <p class="mt-1 text-sm text-muted-foreground">
+            Application information
+          </p>
+
+          <div class="mt-4 space-y-2 text-sm">
+            <div class="flex justify-between">
+              <span class="text-muted-foreground">Version</span>
+              <span class="text-foreground">0.0.0</span>
+            </div>
+            <div class="flex justify-between">
+              <span class="text-muted-foreground">Framework</span>
+              <span class="text-foreground">Floe Webapp</span>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}

package/templates/full/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "strict": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

package/templates/full/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import solid from 'vite-plugin-solid';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [solid(), tailwindcss()],
+});

package/templates/minimal/_gitignore

@@ -0,0 +1,31 @@
+# Dependencies
+node_modules
+
+# Build output
+dist
+
+# Local env files
+.env
+.env.local
+.env.*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+npm-debug.log*
+pnpm-debug.log*
+yarn-debug.log*
+yarn-error.log*

package/templates/minimal/_package.json

@@ -0,0 +1,22 @@
+{
+  "name": "floe-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@floegence/floe-webapp-core": "^0.1.0",
+    "solid-js": "^1.9.3"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.0.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.7",
+    "vite-plugin-solid": "^2.11.0"
+  }
+}

package/templates/minimal/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Floe App</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+    <script>
+      (function() {
+        const stored = localStorage.getItem('floe-theme');
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        const theme = stored ? JSON.parse(stored) : (prefersDark ? 'dark' : 'light');
+        const resolved = theme === 'system' ? (prefersDark ? 'dark' : 'light') : theme;
+        document.documentElement.classList.add(resolved);
+        document.documentElement.style.colorScheme = resolved;
+      })();
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

package/templates/minimal/src/App.tsx

@@ -0,0 +1,29 @@
+import { FloeApp, Files, type FloeComponent } from '@floegence/floe-webapp-core';
+
+const HomePage = () => (
+  <div class="flex h-full items-center justify-center">
+    <div class="text-center">
+      <h1 class="text-2xl font-bold text-foreground">Welcome to Floe</h1>
+      <p class="mt-2 text-muted-foreground">Start building your app</p>
+    </div>
+  </div>
+);
+
+const components: FloeComponent[] = [
+  {
+    id: 'home',
+    name: 'Home',
+    icon: Files,
+    description: 'Home page',
+    component: HomePage,
+    sidebar: { order: 0 },
+  },
+];
+
+export default function App() {
+  return (
+    <FloeApp components={components}>
+      <HomePage />
+    </FloeApp>
+  );
+}

package/templates/minimal/src/index.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss';
+@source './**/*.{ts,tsx}';
+@import '@floegence/floe-webapp-core/styles';

package/templates/minimal/src/index.tsx

@@ -0,0 +1,5 @@
+import { render } from 'solid-js/web';
+import App from './App';
+import './index.css';
+
+render(() => <App />, document.getElementById('root')!);

package/templates/minimal/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "strict": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

package/templates/minimal/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import solid from 'vite-plugin-solid';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [solid(), tailwindcss()],
+});