@askrjs/cli 0.0.2

package/dist/templates/ssr/src/pages/example.tsx

@@ -0,0 +1,113 @@
+import { state } from '@askrjs/askr';
+import {
+  Accordion,
+  AccordionItem,
+  AccordionHeader,
+  AccordionTrigger,
+  AccordionContent,
+} from '@askrjs/ui/accordion';
+import { Toggle } from '@askrjs/ui/toggle';
+import { Input } from '@askrjs/ui/input';
+import Counter from '../components/counter';
+
+export default function Example() {
+  const [name, setName] = state('');
+  const [bold, setBold] = state(false);
+
+  return (
+    <>
+      <h1>Component Showcase</h1>
+      <p class="text-muted">
+        askr-ui headless components styled by askr-themes — working together
+        out of the box.
+      </p>
+
+      <Counter />
+
+      <div class="showcase-section">
+        <h3>Reactivity</h3>
+        <p>
+          Askr uses <code>state()</code> for reactive values that automatically
+          track dependencies and update only the DOM nodes that need to change.
+        </p>
+        <p>
+          Create reactive state with{' '}
+          <code>const [count, setCount] = state(0)</code>, read with{' '}
+          <code>count()</code>, and update with{' '}
+          <code>setCount(n =&gt; n + 1)</code>.
+        </p>
+        <p>
+          Core primitives: <code>state()</code>, <code>derive()</code>,{' '}
+          <code>selector()</code>, <code>resource()</code>, and <code>For</code>
+          .
+        </p>
+      </div>
+
+      <div class="showcase-section">
+        <h3>Accordion</h3>
+        <Accordion type="single" collapsible>
+          <AccordionItem value="reactivity">
+            <AccordionHeader>
+              <AccordionTrigger>
+                What is fine-grained reactivity?
+              </AccordionTrigger>
+            </AccordionHeader>
+            <AccordionContent>
+              <p>
+                Fine-grained reactivity means updates are surgical. When a state
+                value changes, only the specific DOM nodes that read that value
+                are updated — no virtual DOM diffing, no component re-renders.
+              </p>
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="ssr">
+            <AccordionHeader>
+              <AccordionTrigger>Does Askr support SSR?</AccordionTrigger>
+            </AccordionHeader>
+            <AccordionContent>
+              <p>
+                Yes. Askr provides <code>renderToString()</code> and{' '}
+                <code>renderToStream()</code> for server-side rendering, plus{' '}
+                <code>hydrateSPA()</code> for client hydration.
+              </p>
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="themes">
+            <AccordionHeader>
+              <AccordionTrigger>How does theming work?</AccordionTrigger>
+            </AccordionHeader>
+            <AccordionContent>
+              <p>
+                askr-ui components emit <code>data-slot</code> attributes.
+                askr-themes provides CSS that targets these slots with design
+                tokens. Switch themes by changing a single CSS import.
+              </p>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+
+      <div class="showcase-section">
+        <h3>Toggle &amp; Input</h3>
+        <p class="text-muted">
+          Reactive state driving UI updates in real time.
+        </p>
+        <div style="display: flex; align-items: center; gap: var(--ak-space-md); margin-bottom: var(--ak-space-md);">
+          <Toggle pressed={bold()} onPress={() => setBold((b) => !b)}>
+            Bold
+          </Toggle>
+          <Input
+            placeholder="Type your name..."
+            value={name()}
+            onInput={(e: Event) =>
+              setName((e.target as HTMLInputElement).value)
+            }
+          />
+        </div>
+        <p style={`font-weight: ${bold() ? '700' : '400'}`}>
+          {name() ? `Hello, ${name()}!` : 'Type something above...'}
+        </p>
+      </div>
+    </>
+  );
+}

package/dist/templates/ssr/src/pages/home.tsx

@@ -0,0 +1,56 @@
+import { Link } from '@askrjs/askr/router';
+import { Button } from '@askrjs/ui/button';
+
+export default function Home() {
+  return (
+    <>
+      <section class="text-center section">
+        <h1>Welcome to Askr</h1>
+        <p class="text-muted">
+          A minimalist reactive framework for modern web applications.
+          Fine-grained reactivity, zero runtime dependencies, TypeScript-first.
+        </p>
+        <div class="hero-actions">
+          <Button asChild>
+            <Link href="/example">View Examples</Link>
+          </Button>
+          <Button asChild>
+            <Link href="/about">Learn More</Link>
+          </Button>
+        </div>
+      </section>
+
+      <div class="features">
+        <div class="feature-card">
+          <h3>
+            <span class="badge">Reactive</span>
+          </h3>
+          <p>
+            <code>state()</code> and <code>derive()</code> give you fine-grained
+            reactivity. Only the DOM nodes that depend on changed values update
+            — nothing more.
+          </p>
+        </div>
+        <div class="feature-card">
+          <h3>
+            <span class="badge">Async</span>
+          </h3>
+          <p>
+            <code>resource()</code> handles data fetching with built-in loading
+            states, error handling, and automatic refetching when dependencies
+            change.
+          </p>
+        </div>
+        <div class="feature-card">
+          <h3>
+            <span class="badge">Composable</span>
+          </h3>
+          <p>
+            askr-ui provides headless components. askr-themes provides CSS
+            themes. Mix and match — or build your own.
+          </p>
+        </div>
+      </div>
+    </>
+  );
+}

package/dist/templates/ssr/src/resources/user.ts

@@ -0,0 +1,15 @@
+import { resource } from '@askrjs/askr/resources';
+
+export function fetchUser(id: number) {
+  return resource(
+    async ({ signal }: { signal: AbortSignal }) => {
+      // Simulate API call
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      if (signal.aborted) {
+        throw new DOMException('Request aborted', 'AbortError');
+      }
+      return { id, name: `User ${id}`, email: `user${id}@example.com` };
+    },
+    [id]
+  );
+}

package/dist/templates/ssr/src/routes.tsx

@@ -0,0 +1,13 @@
+import { createRouteRegistry, group, route } from '@askrjs/askr/router';
+import AppLayout from './app';
+import Home from './pages/home';
+import About from './pages/about';
+import Example from './pages/example';
+
+export const pageRegistry = createRouteRegistry(() => {
+  group({ layout: AppLayout }, () => {
+    route('/', Home);
+    route('/about', About);
+    route('/example', Example);
+  });
+});

package/dist/templates/ssr/src/styles.css

@@ -0,0 +1,148 @@
+@import '@askrjs/themes/default';
+
+/* Layout */
+body {
+  margin: 0;
+  background: var(--ak-color-bg);
+  color: var(--ak-color-fg);
+  font-family: var(--ak-font-family);
+}
+
+header {
+  border-bottom: 1px solid var(--ak-color-border);
+  padding: var(--ak-space-md) var(--ak-space-xl);
+}
+
+header nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: var(--ak-layout-content-max-width);
+  margin: 0 auto;
+}
+
+header nav a {
+  color: var(--ak-color-fg);
+  text-decoration: none;
+  font-size: var(--ak-font-size-md);
+}
+
+header nav a:hover {
+  color: var(--ak-color-primary);
+}
+
+main {
+  max-width: var(--ak-layout-content-max-width);
+  margin: 0 auto;
+  padding: var(--ak-space-xl);
+}
+
+/* Utility */
+.nav-links {
+  display: flex;
+  align-items: center;
+  gap: var(--ak-space-lg);
+}
+
+.section {
+  margin-bottom: var(--ak-space-xl);
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-muted {
+  color: var(--ak-color-muted);
+}
+
+h1,
+h2,
+h3 {
+  color: var(--ak-color-fg);
+  margin: 0 0 var(--ak-space-md);
+}
+
+p {
+  line-height: 1.6;
+  margin: 0 0 var(--ak-space-md);
+}
+
+code {
+  background: var(--ak-color-surface-muted);
+  padding: 0.15em 0.4em;
+  border-radius: var(--ak-radius-sm);
+  font-size: 0.9em;
+}
+
+/* Feature grid */
+.features {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: var(--ak-space-lg);
+  margin: var(--ak-space-xl) 0;
+}
+
+.feature-card {
+  background: var(--ak-color-surface);
+  border: 1px solid var(--ak-color-border);
+  border-radius: var(--ak-radius-md);
+  padding: var(--ak-space-lg);
+}
+
+/* Counter */
+.counter {
+  background: var(--ak-color-surface);
+  border: 1px solid var(--ak-color-border);
+  border-radius: var(--ak-radius-md);
+  padding: var(--ak-space-xl);
+  text-align: center;
+}
+
+.counter-value {
+  font-size: 4rem;
+  font-weight: 800;
+  color: var(--ak-color-primary);
+  margin: var(--ak-space-lg) 0;
+  line-height: 1;
+}
+
+.counter-controls {
+  display: flex;
+  justify-content: center;
+  gap: var(--ak-space-md);
+  margin-top: var(--ak-space-lg);
+}
+
+/* Component showcase */
+.showcase-section {
+  background: var(--ak-color-surface);
+  border: 1px solid var(--ak-color-border);
+  border-radius: var(--ak-radius-md);
+  padding: var(--ak-space-lg);
+  margin-bottom: var(--ak-space-lg);
+}
+
+.showcase-section h3 {
+  margin-bottom: var(--ak-space-md);
+}
+
+/* Hero buttons */
+.hero-actions {
+  display: flex;
+  gap: var(--ak-space-md);
+  justify-content: center;
+  margin: var(--ak-space-xl) 0;
+}
+
+/* Responsive */
+@media (max-width: 48rem) {
+  .features {
+    grid-template-columns: 1fr;
+  }
+
+  .hero-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}

package/dist/templates/ssr/src/vite-server.d.ts

@@ -0,0 +1,7 @@
+declare module 'virtual:askr-server' {
+  import type { ServerApp } from '@askrjs/server';
+
+  const app: ServerApp;
+  export { app };
+  export default app;
+}

package/dist/templates/ssr/tests/app.test.tsx

@@ -0,0 +1,24 @@
+import { describe, it, expect } from 'vite-plus/test';
+
+describe('App Component', () => {
+  it('renders layout with navigation', () => {
+    const app = (
+      <div>
+        <header>
+          <nav>
+            <strong>Askr</strong>
+            <div>
+              <a href="/example">Example</a>
+              <a href="/about">About</a>
+            </div>
+          </nav>
+        </header>
+        <main>
+          <p>Content goes here</p>
+        </main>
+      </div>
+    );
+
+    expect(app).toBeDefined();
+  });
+});

package/dist/templates/ssr/tests/components/counter.test.tsx

@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vite-plus/test';
+import { renderToString } from '@askrjs/askr/ssr';
+import Counter from '../../src/components/counter';
+
+describe('Counter', () => {
+  it('renders its initial state during SSR', () => {
+    const html = renderToString(() => <Counter />);
+
+    expect(html).toContain('counter-value');
+    expect(html).toContain('>0<');
+    expect(html).toContain('>even<');
+  });
+});

package/dist/templates/ssr/tests/resources.test.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vite-plus/test';
+import { fetchUser } from '../src/resources/user';
+
+describe('SSR Resources', () => {
+  it('creates a resource for fetching user data', () => {
+    // Resources are called during component render
+    // Here we just verify the function is defined
+    expect(fetchUser).toBeDefined();
+    expect(typeof fetchUser).toBe('function');
+  });
+});

package/dist/templates/ssr/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "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",
+    "types": ["vite/client"]
+  },
+  "include": ["src"],
+  "exclude": ["dist"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/dist/templates/ssr/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/dist/templates/ssr/tsconfig.server.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022"],
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "outDir": "dist/server",
+    "noEmit": false,
+    "types": ["node"]
+  },
+  "include": ["server.ts", "src/vite-server.d.ts"]
+}

package/dist/templates/ssr/vite.config.ts

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

package/dist/templates/ssr/vitest.config.ts

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

package/dist/templates/startkit/AGENTS.md

@@ -0,0 +1,77 @@
+# {{appName}}
+
+Client-side SPA built with Askr, askr-ui, and askr-themes.
+
+## Agent Workflow
+
+- Read `package.json`, `src/main.tsx`, `src/router.tsx`, the nearest route file, and the nearest feature folder before editing.
+- Use Askr skills in this order when scope is unclear: `askr-app-builder`, `askr-mental-model`, `askr-project-structure`, then the specialized skill for the touched surface.
+- Prefer the smallest change that matches the existing route, feature, shell, and style conventions.
+- Validate with the narrowest relevant executable check first, then widen only if needed.
+
+## Commands
+
+```bash
+npm run dev        # Vite dev server with HMR (port 5173)
+npm run build      # Production build to dist/
+npm run preview    # Serve production build locally
+npm test           # Vitest (jsdom)
+npm run typecheck  # tsc --noEmit
+npm run lint       # ESLint
+npm run fmt        # Prettier
+```
+
+## Architecture
+
+- **Framework:** Askr - actor-backed, fine-grained reactive UI. No virtual DOM.
+- **Components:** askr-ui headless components (Button, Accordion, Toggle, Input, etc.). Props use `onPress` (not `onClick`), `asChild` for polymorphism, `data-slot` attributes for styling hooks.
+- **Styling:** askr-themes CSS via `[data-slot]` selectors. Keep `src/styles.css` as a thin entrypoint and organize styles in `src/styles/*` using layers (reset/tokens/theme/layout/components).
+- **Routing:** `createRouteRegistry()` composes `group()` and `route()` declarations in `src/router.tsx`. Use `currentRoute()` inside components and navigate with `<Link href="...">`.
+- **State:** Prefer `const [value, setValue] = state(initial)`. Read with `value()`, update with `setValue(...)`. `derive()` for computed values. `resource()` for async data.
+- **Data flow:** Keep sample data in `src/lib/mock-data.ts`, not inline in pages. Read async data with `resource()` and keep mock mutations in the same lib boundary.
+- **Preferences:** Keep persistent appearance/session helpers in the lib boundary and initialize at app bootstrap.
+- **Vite plugin:** `askr()` from `@askrjs/vite` handles JSX transform - no manual esbuild config needed.
+
+## Do Not Invent By Default
+
+- React hooks, React Router patterns, or `useEffect`-style data loading.
+- Generic query-client or global-store abstractions when `resource()`, `createQuery()`, or `createMutation()` already fit.
+- App-local `Button`, `Card`, `Panel`, `Sidebar`, `Navbar`, `EmptyState`, `HStack`, or `VStack` clones before checking `@askrjs/ui` and `@askrjs/themes`.
+- Route-local API clients or DTO mapping inside page components.
+
+## File Structure
+
+```
+src/
+  main.tsx           # Entry: createSPA + navigate
+  app.tsx            # Root layout with nav
+  router.tsx         # Route registration
+  styles.css         # Style entrypoint
+  styles/            # reset/tokens/theme/layout/components layers
+  components/        # App-level reusable components
+  layouts/           # app and auth route layouts
+  features/          # feature-scoped UI modules
+  pages/             # Route page components
+  lib/               # Mock data + formatting helpers
+tests/               # Vitest tests
+```
+
+## Conventions
+
+- TypeScript strict mode, ESM-only
+- JSX import source: `@askrjs/askr`
+- Use askr-ui components instead of raw HTML for interactive elements
+- Prefer composed components from `src/components/*` for app surfaces like panels, headers, tables, and empty states
+- Style with tokens; avoid hardcoded non-theme colors in component classes
+- Keep spacing on a strict rhythm: 4/8/16/24/32/48
+- Keep typography to a small semantic scale (title/section/body/muted)
+- Prefer subtle borders over heavy shadows or decorative effects
+- Ensure consistent hover/focus-visible/disabled/empty/error treatment across components
+- Prettier + ESLint enforced
+
+## Validation
+
+- Run the narrowest relevant test first.
+- Run `npm run typecheck` for type-sensitive changes.
+- Run `npm run build` when app boot, routing, or packaging changes.
+- Confirm loading, empty, error, stale, and pending states remain truthful for user-visible flows.