@askrjs/cli 0.0.2

package/templates/spa/src/styles/layout.css

@@ -0,0 +1,192 @@
+@layer layout {
+  .app-root {
+    min-block-size: 100dvh;
+    background: var(--spa-surface-glow), var(--ak-color-bg);
+  }
+
+  .public-shell,
+  .auth-shell,
+  .app-shell {
+    min-block-size: 100dvh;
+  }
+
+  .public-shell,
+  .auth-shell {
+    display: grid;
+    grid-template-rows: auto 1fr;
+  }
+
+  .public-header,
+  .auth-header,
+  .app-header {
+    position: sticky;
+    z-index: 20;
+    top: 0;
+    border-bottom: 1px solid var(--ak-color-border-subtle);
+    background: var(--spa-header-backdrop);
+    backdrop-filter: blur(14px);
+  }
+
+  .public-main,
+  .auth-main,
+  .app-main {
+    min-width: 0;
+  }
+
+  .public-main {
+    inline-size: min(100%, var(--spa-shell-max-width));
+    margin-inline: auto;
+    padding: var(--ak-space-xl) var(--spa-shell-gutter) var(--ak-space-2xl);
+  }
+
+  .auth-main {
+    display: grid;
+    place-items: center;
+    padding: var(--ak-space-xl) var(--spa-shell-gutter);
+  }
+
+  .auth-page {
+    inline-size: min(100%, var(--spa-auth-card-width));
+  }
+
+  .page-heading {
+    display: flex;
+    gap: var(--ak-space-md);
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
+  .hero-grid,
+  .operations-grid,
+  .settings-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1.16fr) minmax(20rem, 0.84fr);
+    gap: clamp(1rem, 0.7rem + 1.5vw, 2rem);
+    align-items: start;
+  }
+
+  .feature-grid,
+  .metric-grid,
+  .agent-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: var(--ak-space-md);
+  }
+
+  .chart-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr);
+    gap: var(--ak-space-md);
+  }
+
+  .hero-copy {
+    max-inline-size: 48rem;
+  }
+
+  .hero-card {
+    width: 100%;
+  }
+
+  .hero-row {
+    display: flex;
+    gap: var(--ak-space-md);
+    align-items: center;
+    justify-content: space-between;
+    border: 1px solid var(--ak-color-border-subtle);
+    border-radius: var(--ak-radius-md);
+    background: var(--ak-color-surface-muted);
+  }
+
+  .hero-row span {
+    color: var(--ak-color-text-muted);
+  }
+
+  .run-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--ak-font-size-sm);
+  }
+
+  .run-table th,
+  .run-table td {
+    padding: 0.75rem 0.5rem;
+    border-bottom: 1px solid var(--ak-color-border-subtle);
+    text-align: left;
+    vertical-align: top;
+  }
+
+  .run-table th {
+    color: var(--ak-color-text-muted);
+    font-size: var(--ak-font-size-xs);
+    font-weight: var(--ak-font-weight-bold);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+
+  .run-table td:last-child,
+  .run-table th:last-child {
+    text-align: right;
+  }
+
+  .run-table-wrap {
+    min-width: 0;
+  }
+
+  .timeline {
+    display: grid;
+    gap: var(--ak-space-md);
+  }
+
+  .timeline-item {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: var(--ak-space-md);
+  }
+
+  .timeline-dot {
+    display: grid;
+    place-items: center;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 999px;
+    background: var(--ak-color-surface-muted);
+    color: var(--ak-color-primary);
+  }
+
+  @media (max-width: 64rem) {
+    .hero-grid,
+    .operations-grid,
+    .settings-grid,
+    .chart-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .feature-grid,
+    .metric-grid,
+    .agent-grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (max-width: 42rem) {
+    .feature-grid,
+    .metric-grid,
+    .agent-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .run-table {
+      min-width: 42rem;
+    }
+
+    .run-table-wrap {
+      overflow-x: auto;
+    }
+
+    .page-heading,
+    .hero-row {
+      align-items: stretch;
+      flex-direction: column;
+    }
+  }
+}

package/templates/spa/src/styles/reset.css

@@ -0,0 +1,44 @@
+@layer reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  html,
+  body,
+  #app {
+    margin: 0;
+    min-height: 100%;
+  }
+
+  body {
+    min-block-size: 100dvh;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  button,
+  input,
+  select,
+  textarea {
+    font: inherit;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  h1,
+  h2,
+  h3,
+  p {
+    margin: 0;
+  }
+
+  svg {
+    display: block;
+    flex: 0 0 auto;
+  }
+}

package/templates/spa/src/styles/theme.css

@@ -0,0 +1,57 @@
+@layer theme {
+  body {
+    background:
+      radial-gradient(
+        1100px 620px at 100% -12%,
+        color-mix(in srgb, var(--ak-color-primary) 13%, transparent),
+        transparent 60%
+      ),
+      radial-gradient(
+        820px 420px at -8% 14%,
+        color-mix(in srgb, var(--ak-color-primary) 8%, transparent),
+        transparent 64%
+      ),
+      var(--ak-color-bg);
+    color: var(--ak-color-fg);
+    font-family: var(--ak-font-family);
+    font-size: var(--ak-font-size-md);
+    line-height: 1.55;
+  }
+
+  h1 {
+    font-size: var(--ak-font-size-display);
+    line-height: 1.06;
+    letter-spacing: -0.03em;
+    text-wrap: balance;
+  }
+
+  h2 {
+    font-size: var(--ak-font-size-heading);
+    line-height: 1.3;
+    letter-spacing: -0.015em;
+    text-wrap: balance;
+  }
+
+  .lead,
+  .muted,
+  p {
+    color: var(--ak-color-muted);
+    line-height: 1.65;
+  }
+
+  ::selection {
+    background: color-mix(in srgb, var(--ak-color-primary) 30%, transparent);
+    color: var(--ak-color-fg);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}

package/templates/spa/src/styles/tokens.css

@@ -0,0 +1,20 @@
+@layer tokens {
+  :root {
+    --spa-shell-gutter: clamp(var(--ak-space-lg), 2vw, var(--ak-space-xl));
+    --spa-shell-max-width: min(
+      var(--ak-layout-content-max-width),
+      calc(100% - 2 * var(--spa-shell-gutter))
+    );
+    --spa-auth-card-width: min(100%, 28rem);
+    --spa-header-backdrop: color-mix(
+      in srgb,
+      var(--ak-color-bg) 92%,
+      transparent
+    );
+    --spa-surface-glow: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--ak-color-surface-muted) 58%, transparent),
+      transparent 22rem
+    );
+  }
+}

package/templates/spa/src/styles.css

@@ -0,0 +1,7 @@
+@import '@askrjs/themes/default';
+@import '@askrjs/charts/default';
+@import './styles/reset.css';
+@import './styles/tokens.css';
+@import './styles/theme.css';
+@import './styles/layout.css';
+@import './styles/components.css';

package/templates/spa/src/styles.d.ts

@@ -0,0 +1 @@
+declare module '*.css';

package/templates/spa/tests/app.test.tsx

@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vite-plus/test';
+
+describe('SPA template structure', () => {
+  it('documents the route-first shell and theme layers the app should keep', () => {
+    const structure = [
+      'src/main.tsx',
+      'src/pages/_routes.tsx',
+      'src/pages/_layout.tsx',
+      'src/pages/public/_routes.tsx',
+      'src/pages/public/_layout.tsx',
+      'src/pages/public/home.tsx',
+      'src/pages/auth/_routes.tsx',
+      'src/pages/auth/_layout.tsx',
+      'src/pages/auth/login.tsx',
+      'src/pages/app/_routes.tsx',
+      'src/pages/app/_layout.tsx',
+      'src/pages/app/admin-home.tsx',
+      'src/styles.css',
+      'src/styles/reset.css',
+      'src/styles/tokens.css',
+      'src/styles/theme.css',
+      'src/styles/layout.css',
+      'src/styles/components.css',
+      'src/features/operations/operations.query.ts',
+      'src/adapters/operations-client.ts',
+      'src/components/shared/metric-card.tsx',
+    ];
+
+    expect(structure).toContain('src/pages/_routes.tsx');
+    expect(structure).toContain('src/pages/app/_layout.tsx');
+    expect(structure).toContain('src/pages/auth/_layout.tsx');
+    expect(structure).toContain('src/styles/tokens.css');
+    expect(structure).toContain('src/styles/layout.css');
+    expect(structure).toContain('src/features/operations/operations.query.ts');
+    expect(structure).toContain('src/adapters/operations-client.ts');
+  });
+});

package/templates/spa/tests/components/shared.test.tsx

@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vite-plus/test';
+import MetricCard from '../../src/components/shared/metric-card';
+import StatusBadge from '../../src/components/shared/status-badge';
+
+describe('shared app components', () => {
+  it('exports small app-local wrappers around theme primitives', () => {
+    expect(MetricCard).toBeDefined();
+    expect(StatusBadge).toBeDefined();
+    expect(typeof MetricCard).toBe('function');
+    expect(typeof StatusBadge).toBe('function');
+  });
+});

package/templates/spa/tests/resources.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vite-plus/test';
+import { getOperationsSnapshot } from '../src/adapters/operations-client';
+import { loadOperations } from '../src/features/operations/operations.query';
+
+describe('operations data flow', () => {
+  it('loads the dashboard snapshot through the feature query boundary', async () => {
+    const snapshot = await loadOperations({});
+
+    expect(snapshot.metrics.length).toBeGreaterThan(0);
+    expect(snapshot.runs.length).toBeGreaterThan(0);
+    expect(snapshot.lastEventId).toMatch(/^evt_/);
+  });
+
+  it('keeps cancellation owned by the adapter', async () => {
+    const controller = new AbortController();
+    const request = getOperationsSnapshot({ signal: controller.signal });
+
+    controller.abort();
+
+    await expect(request).rejects.toThrow(/aborted/i);
+  });
+});

package/templates/spa/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "@askrjs/askr"
+  },
+  "include": ["src", "tests"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/templates/spa/tsconfig.node.json

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

package/templates/spa/vite.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from 'vite-plus';
+import { askr } from '@askrjs/vite';
+
+export default defineConfig({
+  plugins: [askr()],
+  lint: {
+    ignorePatterns: ['dist/**', 'node_modules/**', 'coverage/**'],
+  },
+  fmt: {
+    semi: true,
+    singleQuote: true,
+    trailingComma: 'es5',
+    printWidth: 80,
+    tabWidth: 2,
+  },
+  server: {
+    port: 5173,
+    open: true,
+  },
+  build: {
+    outDir: 'dist',
+    sourcemap: true,
+  },
+});

package/templates/spa/vitest.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite-plus';
+import { askr } from '@askrjs/vite';
+
+export default defineConfig({
+  plugins: [askr()],
+  esbuild: {
+    jsx: 'automatic',
+    jsxImportSource: '@askrjs/askr',
+  },
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    coverage: {
+      reporter: ['text', 'json', 'html'],
+    },
+  },
+});

package/templates/ssg/AGENTS.md

@@ -0,0 +1,55 @@
+# {{appName}}
+
+Static site built with Askr, askr-ui, askr-themes, and the Askr CLI.
+
+## Commands
+
+```bash
+npm run dev        # Vite dev server (runs as SPA for development)
+npm run build      # Build client assets and atomically publish dist/
+npm run generate   # Run full SSG through `askr ssg`
+npm run preview    # Serve production build locally
+npm test           # Vitest (jsdom)
+npm run typecheck  # tsc --noEmit
+npm run lint       # vite-plus lint
+npm run fmt        # vite-plus format
+```
+
+## Architecture
+
+- **Framework:** Askr - actor-backed, fine-grained reactive UI. No virtual DOM.
+- **Boot flow:** `src/main.tsx` starts the browser app with the shared `pageRegistry`.
+- **SSG flow:** `ssg.config.ts` passes that same registry to the complete executable SSG config. `askr ssg` owns full and incremental generation.
+- **Pages:** `src/pages/home.tsx`, `src/pages/about.tsx`, `src/pages/content.tsx`, and `src/pages/example.tsx` form the sample site.
+- **Shell:** `src/app.tsx` owns the nav and page frame.
+- **Theme primitives:** the starter composes `Header`, `Nav`, `NavLink`, `Container`, `Section`, `Stack`, `Box`, and `Block` from `@askrjs/themes` instead of hand-rolling shell/layout wrappers.
+- **Components:** askr-ui headless components. Props use `onPress` (not `onClick`) and `asChild` for polymorphism.
+- **Styling:** askr-themes CSS via public classes and `data-slot` selectors. Theme import lives in `src/styles.css`.
+- **Routing:** keep `pageRegistry` in `src/routes.tsx` as the single route source of truth for both dev and SSG.
+- **State:** `const [value, setValue] = state(initial)` and `derive()`. Keep starter routes synchronously prerenderable; if you add async data back, provide an SSR-safe strategy before expecting SSG to render it.
+- **Vite plugin:** `askr()` from `@askrjs/vite` handles JSX transform.
+
+## File Structure
+
+```
+ssg.config.ts          # Routes, document renderer, and static asset sources
+src/
+  main.tsx             # Client entry: registers routes and boots createSPA
+  app.tsx              # Root layout with nav
+  routes.tsx           # Shared route registration source of truth
+  styles.css           # Theme import + layout CSS
+  components/          # Reusable components
+  pages/               # Route page components
+tests/                 # Vitest tests
+```
+
+## Conventions
+
+- TypeScript strict mode, ESM-only
+- JSX import source: `@askrjs/askr`
+- Add new pages in `src/pages/`, then update `pageRegistry` in `src/routes.tsx`
+- Pass the shared registry through `ssg.config.ts` instead of maintaining a second hand-written route list
+- Keep SSG execution behind `askr ssg`; do not add a parallel project-local generator
+- Use askr-ui components for interactive elements and askr-themes layout/shell primitives for structure
+- Style with `--ak-*` tokens
+- Keep SSG routes synchronous at render time unless you intentionally wire SSR data into generation

package/templates/ssg/README.md

@@ -0,0 +1,39 @@
+# {{appName}}
+
+Static site built with [Askr](https://github.com/askrjs/askr).
+
+## Development workflow
+
+The starter keeps the authoring loop small and explicit:
+
+1. Run `npm run dev` for the SPA-style editing experience.
+2. Edit the page components in `src/pages/`.
+3. Register routes in `src/routes.tsx`.
+4. Run `npm run build` to build client assets and atomically generate `dist/`.
+5. Run `npm run preview` to check the production build locally.
+
+## Sample pages
+
+- `/` introduces the starter and the basic developer loop.
+- `/workflow` explains the edit, generate, and preview loop.
+- `/content` shows the small explicit route map.
+- `/preview` keeps one interactive page so you can verify hydration.
+
+## Commands
+
+```bash
+npm run dev        # Start dev server (runs as SPA)
+npm run build      # Build assets and generate the complete static site
+npm run generate   # Regenerate static HTML with the Askr CLI
+npm run preview    # Preview production build
+npm test           # Run tests
+npm run lint       # Lint code
+npm run fmt        # Format code
+npm run typecheck  # Type check
+```
+
+## Static generation
+
+Run `npm run build` to compile browser assets and pre-render every route into `dist/`. The `askr ssg` command owns both full and incremental generation, and publishes routes, metadata, the incremental manifest, and browser assets together.
+
+`ssg.config.ts` passes the same immutable route registry used in dev mode, so the shell and leaf pages stay in sync.

package/templates/ssg/gitignore.template

@@ -0,0 +1,17 @@
+node_modules/
+dist/
+.askr/client/
+build/
+.env.local
+.env.*.local
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+.DS_Store
+Thumbs.db
+.vscode/
+.idea/
+*.swp
+*.swo
+*~

package/templates/ssg/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <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>{{appName}}</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/ssg/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "{{appName}}",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vp dev",
+    "build": "npm run build:client && npm run generate",
+    "build:client": "vp build --outDir .askr/client",
+    "generate": "askr ssg --config ./ssg.config.ts --output ./dist",
+    "generate:incremental": "npm run generate -- --incremental",
+    "preview": "vp preview",
+    "test": "vp test run -c ./vitest.config.ts",
+    "typecheck": "tsc --noEmit",
+    "lint": "vp lint .",
+    "lint:fix": "npm run lint -- --fix",
+    "fmt": "vp fmt .",
+    "check": "npm run lint && npm run typecheck && npm test && npm run build"
+  },
+  "dependencies": {
+    "@askrjs/askr": ">=0.0.53 <0.1.0",
+    "@askrjs/themes": ">=0.0.12 <0.1.0",
+    "@askrjs/ui": ">=0.0.13 <0.1.0"
+  },
+  "devDependencies": {
+    "@askrjs/cli": ">=0.0.2 <0.1.0",
+    "@askrjs/vite": ">=0.0.6 <0.1.0",
+    "@types/node": "^26.0.0",
+    "jsdom": "^29.1.1",
+    "typescript": "^6.0.3",
+    "vite-plus": "^0.2.4"
+  },
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  }
+}

package/templates/ssg/src/app.tsx

@@ -0,0 +1,14 @@
+import { PageFrame, SiteHeader } from './components/site-shell';
+
+export { navItems } from './components/site-shell';
+
+export default function App({ children }: { children?: unknown }) {
+  return (
+    <div class="site-shell">
+      <SiteHeader />
+      <main class="site-main">
+        <PageFrame>{children}</PageFrame>
+      </main>
+    </div>
+  );
+}

package/templates/ssg/src/components/badge.tsx

@@ -0,0 +1,3 @@
+export default function Badge({ children }: { children?: unknown }) {
+  return <span class="badge">{children}</span>;
+}