npm - @helloleo/plugins - Versions diffs - 0.1.19 → 0.1.20-beta.0 - Mend

@helloleo/plugins 0.1.19 → 0.1.20-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (131) hide show

package/src/templates/tanstack-start-2026-06-18/src/routes/__root.tsx ADDED Viewed

@@ -0,0 +1,59 @@
+import {
+  HeadContent,
+  Outlet,
+  Scripts,
+  createRootRouteWithContext,
+} from '@tanstack/react-router'
+import type { QueryClient } from '@tanstack/react-query'
+import type { ReactNode } from 'react'
+// Side-effect order matters: Tailwind needs to be linked into the SSR'd
+// document. Importing the stylesheet as a URL and listing it in `head.links`
+// is the Start-native way (a bare `import './styles.css'` only works client-side).
+import appCss from '../styles.css?url'
+export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()({
+  head: () => ({
+    meta: [
+      { charSet: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1.0' },
+      { title: '{{LEO_NAME}}' },
+    ],
+    links: [
+      { rel: 'stylesheet', href: appCss },
+      { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+      {
+        rel: 'preconnect',
+        href: 'https://fonts.gstatic.com',
+        crossOrigin: 'anonymous',
+      },
+      {
+        rel: 'stylesheet',
+        href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap',
+      },
+    ],
+  }),
+  component: RootComponent,
+})
+function RootComponent() {
+  return (
+    <RootDocument>
+      <Outlet />
+    </RootDocument>
+  )
+}
+function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        {children}
+        <Scripts />
+      </body>
+    </html>
+  )
+}

package/src/templates/tanstack-start-2026-06-18/src/routes/index.tsx ADDED Viewed

@@ -0,0 +1,33 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+// Server functions run only on the server (dev: node + cf-shim; prod: the
+// worker). This is the seam where you read your bindings — import { db } from
+// '#/db' and query Drizzle, or import { kv, storage } from '@helloleo/runtime'.
+// Keep binding access INSIDE the handler, never at module scope.
+const getMessage = createServerFn({ method: 'GET' }).handler(() => {
+  return { message: 'Hello from the server' }
+})
+export const Route = createFileRoute('/')({
+  component: Home,
+  loader: () => getMessage(),
+})
+/**
+ * Do not `export default function Home()`. This breaks the default
+ * codesplitting by Tanstack Router.
+ */
+function Home() {
+  const { message } = Route.useLoaderData()
+  return (
+    <div className="p-8">
+      <h1 className="text-4xl font-bold">Welcome to HelloLeo</h1>
+      <p className="mt-4 text-lg">{message}</p>
+      <p className="mt-2 text-sm text-muted-foreground">
+        Edit <code>src/routes/index.tsx</code> to get started.
+      </p>
+    </div>
+  )
+}

package/src/templates/tanstack-start-2026-06-18/src/server.ts ADDED Viewed

@@ -0,0 +1,31 @@
+// Cloudflare Worker entry (wrangler.jsonc `main`). Wraps the TanStack Start
+// server entry so an SSR failure renders a clean 500 instead of a raw stack.
+type ServerEntry = {
+  fetch: (request: Request, env: unknown, ctx: unknown) => Promise<Response> | Response
+}
+let serverEntryPromise: Promise<ServerEntry> | undefined
+async function getServerEntry(): Promise<ServerEntry> {
+  if (!serverEntryPromise) {
+    serverEntryPromise = import('@tanstack/react-start/server-entry').then(
+      (m) => ((m as { default?: ServerEntry }).default ?? m) as ServerEntry,
+    )
+  }
+  return serverEntryPromise
+}
+export default {
+  async fetch(request: Request, env: unknown, ctx: unknown) {
+    try {
+      const handler = await getServerEntry()
+      return await handler.fetch(request, env, ctx)
+    } catch (error) {
+      console.error(error)
+      return new Response('<h1>Something went wrong</h1>', {
+        status: 500,
+        headers: { 'content-type': 'text/html; charset=utf-8' },
+      })
+    }
+  },
+}

package/src/templates/tanstack-start-2026-06-18/src/styles.css ADDED Viewed

@@ -0,0 +1,214 @@
+/*
+ * HelloLeo Design System -- READ BEFORE STYLING.
+ *
+ * Design tokens are the single source of truth and power the no-code Design
+ * panel (the user edits colors / fonts / radius visually). Conventions:
+ *   - Raw tokens live in :root (light) and .dark (dark). The @media
+ *     (prefers-color-scheme: dark) block mirrors .dark so apps follow the OS
+ *     by default; adding the `dark` class still forces dark explicitly.
+ *   - @theme inline maps each raw token to a Tailwind utility
+ *     (bg-background, text-foreground, rounded-lg, ...). Edit the raw token,
+ *     not the component class. Never hardcode #hex in components.
+ *   - When you add a color token, add it to :root, .dark, AND the media block,
+ *     or one theme breaks.
+ *
+ * UI primitives live in src/components/ui (shadcn/ui) and consume these
+ * tokens. One responsibility per file.
+ */
+@import "tailwindcss" source(none);
+@source "../src";
+@import "tw-animate-css";
+@custom-variant dark (&:is(.dark *));
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --font-sans: "Inter", system-ui, sans-serif;
+  --font-display: "Space Grotesk", "Inter", sans-serif;
+}
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+/* Dark palette -- kept identical in .dark (explicit) and the media block
+ * (system default). Edit BOTH when changing a token. */
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --destructive-foreground: oklch(0.985 0 0);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+    --chart-1: oklch(0.488 0.243 264.376);
+    --chart-2: oklch(0.696 0.17 162.48);
+    --chart-3: oklch(0.769 0.188 70.08);
+    --chart-4: oklch(0.627 0.265 303.9);
+    --chart-5: oklch(0.645 0.246 16.439);
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.556 0 0);
+  }
+}
+@layer base {
+  * {
+    border-color: var(--color-border);
+  }
+  html,
+  body {
+    font-family: var(--font-sans);
+  }
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    min-height: 100vh;
+  }
+  h1, h2, h3, h4 {
+    font-family: var(--font-display);
+    letter-spacing: -0.02em;
+  }
+}
+@layer utilities {
+  .prose-note {
+    color: var(--color-foreground);
+  }
+  .prose-note h1 { font-size: 1.875rem; font-weight: 700; margin: 1.25rem 0 0.75rem; font-family: var(--font-display); }
+  .prose-note h2 { font-size: 1.5rem; font-weight: 600; margin: 1rem 0 0.5rem; font-family: var(--font-display); }
+  .prose-note h3 { font-size: 1.25rem; font-weight: 600; margin: 0.875rem 0 0.5rem; }
+  .prose-note p { margin: 0.5rem 0; line-height: 1.7; }
+  .prose-note ul { list-style: disc; padding-left: 1.5rem; margin: 0.5rem 0; }
+  .prose-note ol { list-style: decimal; padding-left: 1.5rem; margin: 0.5rem 0; }
+  .prose-note li { margin: 0.25rem 0; }
+  .prose-note a { color: var(--color-primary); text-decoration: underline; }
+  .prose-note code { background: var(--color-muted); padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875em; }
+  .prose-note pre { background: var(--color-muted); padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin: 0.75rem 0; }
+  .prose-note pre code { background: transparent; padding: 0; }
+  .prose-note blockquote { border-left: 3px solid var(--color-primary); padding-left: 1rem; margin: 0.75rem 0; color: var(--color-muted-foreground); }
+  .prose-note hr { border-color: var(--color-border); margin: 1.5rem 0; }
+  .prose-note table { border-collapse: collapse; margin: 0.75rem 0; }
+  .prose-note th, .prose-note td { border: 1px solid var(--color-border); padding: 0.375rem 0.75rem; }
+}

package/src/templates/tanstack-start-2026-06-18/tsconfig.json ADDED Viewed

@@ -0,0 +1,27 @@
+{
+  "include": ["**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "target": "ES2022",
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "paths": {
+      "#/*": ["./src/*"],
+      "@/*": ["./src/*"]
+    },
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["@cloudflare/workers-types", "vite/client"],
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    /* Linting */
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  }
+}

package/src/templates/tanstack-start-2026-06-18/vite.config.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import { defineConfig } from '@helloleo/vite-config'
+// @helloleo/vite-config owns the whole build/dev/sandbox pipeline: in dev it
+// aliases `cloudflare:workers` -> @helloleo/runtime/cf-shim (libsql .dev.db for
+// D1+KV, local disk for R2) and runs plain Vite SSR; at build it adds
+// @cloudflare/vite-plugin to emit a workerd Worker bound to wrangler.jsonc. It
+// also binds host:true/port:5173 itself (>=0.1.2).
+//
+// The one thing the wrapper doesn't set: HMR over the HelloLeo preview proxy,
+// which terminates HTTPS on :443 — so point the HMR client at wss://…:443.
+export default defineConfig({
+  vite: {
+    server: {
+      hmr: { clientPort: 443, protocol: 'wss' },
+    },
+  },
+})

package/src/templates/tanstack-start-2026-06-18/wrangler.jsonc ADDED Viewed

@@ -0,0 +1,27 @@
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "name": "{{LEO_NAME}}",
+  "compatibility_date": "2025-09-02",
+  "compatibility_flags": ["nodejs_compat"],
+  // @cloudflare/vite-plugin builds the Worker from the TanStack Start server
+  // entry; src/server.ts wraps it. These three bindings are the PROD path that
+  // the dev cf-shim emulates locally — keep the names DB / KV / BUCKET, that is
+  // the contract @helloleo/runtime expects.
+  "main": "src/server.ts",
+  "observability": { "enabled": true },
+  // Provision real resources before deploy (`wrangler d1/kv/r2 create`) and swap
+  // the placeholder ids below. In dev none of this matters — the cf-shim backs
+  // DB with libsql (.dev.db), KV in libsql, and R2 on the local filesystem.
+  "d1_databases": [
+    {
+      "binding": "DB",
+      "database_name": "{{LEO_NAME}}",
+      "database_id": "REPLACE_WITH_D1_ID",
+      // drizzle-kit generate writes migrations here; `wrangler d1 migrations
+      // apply DB --remote` reads this dir to apply them to prod D1.
+      "migrations_dir": "drizzle"
+    }
+  ],
+  "kv_namespaces": [{ "binding": "KV", "id": "REPLACE_WITH_KV_ID" }],
+  "r2_buckets": [{ "binding": "BUCKET", "bucket_name": "{{LEO_NAME}}" }]
+}

package/src/tools/scaffold.ts CHANGED Viewed

@@ -8,11 +8,11 @@ import { renderTemplate } from "../template-render.ts";
  * Identifier for the scaffold template a project was generated from. It is
  * also the directory name under src/templates/. Written to .leo/project.json
  * so the webapp / leo-core can tell which template (and therefore which
- * conventions: TanStack Router file routing, Tailwind v4, shadcn/ui) a
+ * conventions: TanStack Start file routing + SSR, Tailwind v4, shadcn/ui) a
  * workspace was bootstrapped with. Bump this (and add a new templates/<id>/
  * dir) when the scaffold's shape changes.
  */
-export const SCAFFOLD_VERSION = "tanstack-router-2026-06-15";
+export const SCAFFOLD_VERSION = "tanstack-start-2026-06-18";
 /**
  * The project workspace directory is named after the project UUID -- the
@@ -30,7 +30,7 @@ export interface BaseScaffoldOptions {
 }
 /**
- * Write the base scaffold by rendering the TanStack Router template into dir,
+ * Write the base scaffold by rendering the TanStack Start template into dir,
  * then adding .leo/project.json (template metadata the tool owns, not part of
  * the template tree). Shared between `scaffold` (frontend-only) and
  * `setup_netsuite` (base + OAuth files). Returns the relative paths written.
@@ -59,17 +59,21 @@ export async function writeBaseScaffold(
 export const scaffold = tool({
 	description:
-		"Scaffold a new React 19 + Vite + Tailwind CSS v4 + TanStack Router project " +
-		"with shadcn/ui baked in. Renders the full template: TanStack file-based " +
-		"routing (src/routes/), the complete shadcn/ui component set under " +
-		"src/components/ui, src/lib/utils.ts (cn helper), src/lib/proxy.ts " +
+		"Scaffold a new React 19 + Vite + Tailwind CSS v4 + TanStack Start project " +
+		"with shadcn/ui baked in, wired to @helloleo/runtime for Cloudflare " +
+		"bindings (D1 + KV + R2). Renders the full template: TanStack file-based " +
+		"routing + SSR (src/routes/, src/router.tsx), the Cloudflare Worker entry " +
+		"(src/server.ts) + wrangler.jsonc (DB/KV/BUCKET bindings), a Drizzle DB " +
+		"layer (src/db/schema.ts as the single source of truth, src/db/index.ts " +
+		"typed client, drizzle.config.ts), the complete shadcn/ui component set " +
+		"under src/components/ui, src/lib/utils.ts (cn helper), src/lib/proxy.ts " +
 		"(HelloLeo integration proxy), src/styles.css (shadcn design tokens, " +
 		"light+dark), plus package.json, vite.config.ts, tsconfig.json, " +
-		"tsr.config.json, components.json, .gitignore and the generated " +
-		"src/routeTree.gen.ts. Call this FIRST for any new project before adding " +
-		"routes and pages. For NetSuite projects (NetSuite MCP in the live list), " +
-		"call `setup_netsuite` INSTEAD -- it bundles base scaffold + OAuth wiring " +
-		"in one call. Do not call both.",
+		"components.json, .gitignore and the generated src/routeTree.gen.ts. Call " +
+		"this FIRST for any new project before adding routes and pages. For " +
+		"NetSuite projects (NetSuite MCP in the live list), call `setup_netsuite` " +
+		"INSTEAD -- it bundles base scaffold + OAuth wiring in one call. Do not " +
+		"call both.",
 	args: {
 		name: tool.schema
 			.string()
@@ -87,6 +91,10 @@ export const scaffold = tool({
 			"UI: shadcn/ui components are already in src/components/ui -- import and",
 			"  use them; do not attempt to re-add via the shadcn CLI.",
 			"Design system: edit tokens in src/styles.css (light + dark blocks).",
+			"Database: edit src/db/schema.ts (the single source of truth) -- `bun run",
+			"  db:push` syncs it to the dev DB; the `dev` script does this for you.",
+			"  Query via `import { db } from '#/db'` inside loaders/server functions.",
+			"  KV + R2: `import { kv, storage } from '@helloleo/runtime'`.",
 			"Data fetching: React Query is wired (QueryClient on the router context +",
 			"  QueryClientProvider). ALWAYS fetch with @tanstack/react-query --",
 			"  useQuery / useMutation in components, or a route loader calling",