@askrjs/cli 0.0.11 → 0.0.12

package/README.md

@@ -73,8 +73,10 @@ askr analyze --json --check
 
 All diagnostics include a stable rule ID and workspace-relative source
 location. The analyzer distinguishes canonical Askr imports from unrelated
-same-named functions and only recommends `<For>` for state-backed reactive JSX
-collections, so static transforms with `.map()` remain valid.
+same-named functions and recommends `<For>` only when a `.map()` result is
+rendered directly as JSX children, so ordinary data transforms remain valid.
+It reports eager `<For>`/`<Show>`/`<Case>` controls behind changing ternaries
+while accepting conditionally mounted components with their own render scope.
 
 By default it transactionally applies only mechanical route-parameter and
 plain-JSON JSX configuration fixes. `--check` is read-only for CI. Semantic

package/dist/analyze.js

@@ -71,7 +71,7 @@ async function runAnalyzeCli(args = process.argv.slice(2), io = console, runtime
 			io.log(helpText.trimEnd());
 			return 0;
 		}
-		const report = await (runtime.analyze ?? (await import("./runner-42nqhW9u.js")).runAnalysis)({
+		const report = await (runtime.analyze ?? (await import("./runner-BRjjPhZY.js")).runAnalysis)({
 			cwd: parsed.cwd,
 			workspacePatterns: parsed.workspacePatterns,
 			check: parsed.check

package/dist/cli.js

@@ -90,7 +90,7 @@ async function runCli(args = process.argv.slice(2), io = console) {
 		return runAnalyzeCli(args.slice(1), io);
 	}
 	if (command === "check" || command === "doctor" || command === "repair") {
-		const { runGuardrailCli } = await import("./guardrails-vH9lYg05.js");
+		const { runGuardrailCli } = await import("./guardrails-GPM9PJqO.js");
 		return runGuardrailCli(command, args.slice(1), io);
 	}
 	if (command === "generate") {

package/dist/{guardrails-vH9lYg05.js → guardrails-GPM9PJqO.js}

@@ -98,7 +98,7 @@ async function runGuardrailCli(command, args = process.argv.slice(2), io = conso
 			cwd: parsed.cwd,
 			workspacePatterns: parsed.workspacePatterns
 		};
-		const { runCheck, runDoctor, runRepair } = await import("./runner-tPGn2CQC.js");
+		const { runCheck, runDoctor, runRepair } = await import("./runner-Ca43qqzG.js");
 		const report = command === "doctor" ? await runDoctor(options, runtime) : command === "repair" ? await runRepair(options) : await runCheck(options, runtime);
 		if (parsed.json) io.log(JSON.stringify(report));
 		else if (report.command === "doctor") printDoctor(report, io);

package/dist/{runner-42nqhW9u.js → runner-BRjjPhZY.js}

@@ -354,6 +354,30 @@ function functionName(node) {
 	}
 	return null;
 }
+const EAGER_CONTROL_CONCEPTS = /* @__PURE__ */ new Set([
+	"Case",
+	"For",
+	"Show"
+]);
+function isConstantCondition(expression) {
+	if (ts.isParenthesizedExpression(expression)) return isConstantCondition(expression.expression);
+	return expression.kind === ts.SyntaxKind.TrueKeyword || expression.kind === ts.SyntaxKind.FalseKeyword || expression.kind === ts.SyntaxKind.NullKeyword || ts.isNumericLiteral(expression) || ts.isStringLiteral(expression) || ts.isNoSubstitutionTemplateLiteral(expression);
+}
+function unstableControlConditional(node, bindings) {
+	const ownElement = ts.isJsxOpeningElement(node) && ts.isJsxElement(node.parent) ? node.parent : null;
+	let child = node;
+	for (let current = node.parent; current; current = current.parent) {
+		if (ts.isFunctionLike(current)) return null;
+		if (current !== ownElement && ts.isJsxElement(current)) {
+			const name = canonicalJsxName(current.openingElement.tagName, bindings);
+			if (name && EAGER_CONTROL_CONCEPTS.has(name)) return null;
+		}
+		if (ts.isConditionalExpression(current) && (current.whenTrue === child || current.whenFalse === child) && !isConstantCondition(current.condition)) return current;
+		if (ts.isBinaryExpression(current) && [ts.SyntaxKind.AmpersandAmpersandToken, ts.SyntaxKind.BarBarToken].includes(current.operatorToken.kind) && current.right === child && !isConstantCondition(current.left)) return current;
+		child = current;
+	}
+	return null;
+}
 const stableRenderRule = {
 	id: "askr/stable-render-call",
 	category: "correctness",
@@ -375,6 +399,14 @@ const stableRenderRule = {
 				}
 				if (isControlFlowAncestor(node, owner) && (!POSITIONAL_DATA_CONCEPTS.has(name) || /^[A-Z]/.test(functionName(owner) ?? "") || containsJsx(owner))) diagnostics.push(diagnostic(context, node.expression, this, `${name}() is called conditionally, so its render position is unstable.`, `Call ${name}() unconditionally at the top level and branch on its result.`));
 			});
+			visit(sourceFile, (node) => {
+				if (!ts.isJsxOpeningElement(node) && !ts.isJsxSelfClosingElement(node)) return;
+				const name = canonicalJsxName(node.tagName, bindings);
+				if (!name || !EAGER_CONTROL_CONCEPTS.has(name)) return;
+				if (!unstableControlConditional(node, bindings)) return;
+				const remediation = name === "Show" ? "Mount <Show> unconditionally and move the condition into its when prop." : "Replace the ternary or logical expression with a <Show> boundary.";
+				diagnostics.push(diagnostic(context, node.tagName, this, `<${name}> is mounted behind a changing conditional, so its render position is unstable.`, remediation));
+			});
 		}
 		return diagnostics;
 	}
@@ -594,26 +626,37 @@ const stableKeyRule = {
 		return diagnostics;
 	}
 };
-function reactiveMapReceiver(expression, stateGetters) {
-	if (ts.isCallExpression(expression) && ts.isIdentifier(expression.expression)) return stateGetters.has(expression.expression.text);
-	if (ts.isCallExpression(expression) && ts.isPropertyAccessExpression(expression.expression)) return reactiveMapReceiver(expression.expression.expression, stateGetters);
-	if (ts.isPropertyAccessExpression(expression)) return reactiveMapReceiver(expression.expression, stateGetters);
-	return false;
+function mapResultIsJsxChild(node) {
+	let current = node;
+	for (;;) {
+		const parent = current.parent;
+		if (ts.isJsxExpression(parent)) return !ts.isJsxAttribute(parent.parent);
+		if ((ts.isParenthesizedExpression(parent) || ts.isAsExpression(parent) || ts.isTypeAssertionExpression(parent) || ts.isNonNullExpression(parent) || ts.isSatisfiesExpression(parent)) && parent.expression === current) {
+			current = parent;
+			continue;
+		}
+		if (ts.isConditionalExpression(parent) && (parent.whenTrue === current || parent.whenFalse === current)) {
+			current = parent;
+			continue;
+		}
+		if (ts.isBinaryExpression(parent) && (parent.operatorToken.kind === ts.SyntaxKind.AmpersandAmpersandToken && parent.right === current || parent.operatorToken.kind === ts.SyntaxKind.BarBarToken && (parent.left === current || parent.right === current) || parent.operatorToken.kind === ts.SyntaxKind.QuestionQuestionToken && (parent.left === current || parent.right === current))) {
+			current = parent;
+			continue;
+		}
+		return false;
+	}
 }
 const preferForRule = {
 	id: "askr/prefer-for",
 	category: "performance",
 	severity: "warning",
-	description: "Reactive JSX collections should use For for keyed reconciliation.",
+	description: "Collection arrays rendered as JSX children should use For.",
 	analyze(context) {
 		const diagnostics = [];
-		for (const sourceFile of context.sourceFiles) {
-			const state = collectStateBindings(sourceFile, sourceBindings(sourceFile));
-			visit(sourceFile, (node) => {
-				if (!ts.isCallExpression(node) || !ts.isPropertyAccessExpression(node.expression) || node.expression.name.text !== "map" || !reactiveMapReceiver(node.expression.expression, state.getters) || !node.parent || !ts.isJsxExpression(node.parent)) return;
-				diagnostics.push(diagnostic(context, node.expression.name, this, "A reactive collection is rendered with .map(), bypassing keyed <For> reconciliation.", "Render it with <For each={...} by={...}>. This semantic rewrite is report-only."));
-			});
-		}
+		for (const sourceFile of context.sourceFiles) visit(sourceFile, (node) => {
+			if (!ts.isCallExpression(node) || !ts.isPropertyAccessExpression(node.expression) || node.expression.name.text !== "map" || !mapResultIsJsxChild(node)) return;
+			diagnostics.push(diagnostic(context, node.expression.name, this, "A collection array is rendered with .map(), bypassing keyed <For> reconciliation.", "Render it with <For each={...} by={...}>. This semantic rewrite is report-only."));
+		});
 		return diagnostics;
 	}
 };

package/dist/{runner-tPGn2CQC.js → runner-Ca43qqzG.js}

@@ -1,6 +1,6 @@
 import { t as inspectBundledSkills } from "./skills-CSGdAZHN.js";
 import { discoverWorkspaceProject } from "./discovery-DUDrZCIC.js";
-import { analysisHasBlockingFindings, runAnalysis } from "./runner-42nqhW9u.js";
+import { analysisHasBlockingFindings, runAnalysis } from "./runner-BRjjPhZY.js";
 import fs from "node:fs/promises";
 import path from "node:path";
 import { spawn } from "node:child_process";

package/dist/templates/spa/src/pages/app/_layout.tsx

@@ -6,6 +6,7 @@ import {
   SettingsIcon,
   SunIcon,
 } from '@askrjs/lucide';
+import { For } from '@askrjs/askr/control';
 import { Link, navigate } from '@askrjs/askr/router';
 import { Button } from '@askrjs/themes/components';
 import { Container, Inline, Stack } from '@askrjs/themes/components';
@@ -42,14 +43,16 @@ export default function AppLayout({ children }: { children?: unknown }) {
             </Link>
           </NavBrand>
           <NavGroup label="Workspace">
-            {appNavItems.map((item) => (
-              <NavLink href={item.href} match={item.match}>
-                <Inline as="span" gap="2" align="center">
-                  {icons[item.icon]}
-                  <span>{item.label}</span>
-                </Inline>
-              </NavLink>
-            ))}
+            <For each={[...appNavItems]} by={(item) => item.href}>
+              {(item) => (
+                <NavLink href={item.href} match={item.match}>
+                  <Inline as="span" gap="2" align="center">
+                    {icons[item.icon]}
+                    <span>{item.label}</span>
+                  </Inline>
+                </NavLink>
+              )}
+            </For>
           </NavGroup>
           <NavGroup label="Session" align="end">
             <NavLink href="/" match="exact">

package/dist/templates/spa/src/pages/app/admin-home.tsx

@@ -1,4 +1,5 @@
 import { resource } from '@askrjs/askr/resources';
+import { For, Show } from '@askrjs/askr/control';
 import { createPlot } from '@askrjs/charts';
 import { AlertCircleIcon, RefreshCwIcon } from '@askrjs/lucide';
 import { Button } from '@askrjs/themes/components';
@@ -66,105 +67,111 @@ export default function AdminHomePage() {
         </Block>
       ) : null}
 
-      {snapshot ? (
-        <>
-          <Block gap="md" class="metric-grid">
-            {snapshot.metrics.map((metric) => (
-              <MetricCard
-                label={metric.label}
-                value={metric.value}
-                trend={metric.trend}
-              />
-            ))}
-          </Block>
+      <Show when={snapshot}>
+        {(currentSnapshot) => (
+          <>
+            <Block gap="md" class="metric-grid">
+              <For each={currentSnapshot.metrics} by={(metric) => metric.label}>
+                {(metric) => (
+                  <MetricCard
+                    label={metric.label}
+                    value={metric.value}
+                    trend={metric.trend}
+                  />
+                )}
+              </For>
+            </Block>
+
+            <Block gap="md" align="stretch" class="chart-grid">
+              <Card>
+                <CardHeader>
+                  <CardTitle>Run throughput</CardTitle>
+                  <CardDescription>
+                    Accepted commands by work type.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <OperationsPlot.Root
+                    data={currentSnapshot.throughput}
+                    rowKey="label"
+                    label="Run throughput"
+                    description="Accepted commands by work type."
+                  >
+                    <OperationsPlot.Bar x="label" y="value" />
+                  </OperationsPlot.Root>
+                </CardContent>
+              </Card>
+              <Card>
+                <CardHeader>
+                  <CardTitle>Projection lag</CardTitle>
+                  <CardDescription>
+                    Lower is better; stale states stay visible.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <OperationsPlot.Root
+                    data={currentSnapshot.lag}
+                    rowKey="label"
+                    label="Projection lag"
+                    description="Projection lag over the last hour."
+                  >
+                    <OperationsPlot.Line x="label" y="value" />
+                    <OperationsPlot.Point x="label" y="value" />
+                  </OperationsPlot.Root>
+                </CardContent>
+              </Card>
+            </Block>
+
+            {currentSnapshot.consistency !== 'fresh' ? (
+              <Alert variant="warning">
+                Read models are {currentSnapshot.consistency}. Last processed
+                event is {currentSnapshot.lastEventId}.
+              </Alert>
+            ) : null}
 
-          <Block gap="md" align="stretch" class="chart-grid">
-            <Card>
-              <CardHeader>
-                <CardTitle>Run throughput</CardTitle>
-                <CardDescription>
-                  Accepted commands by work type.
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <OperationsPlot.Root
-                  data={snapshot.throughput}
-                  rowKey="label"
-                  label="Run throughput"
-                  description="Accepted commands by work type."
-                >
-                  <OperationsPlot.Bar x="label" y="value" />
-                </OperationsPlot.Root>
-              </CardContent>
-            </Card>
             <Card>
               <CardHeader>
-                <CardTitle>Projection lag</CardTitle>
+                <CardTitle>Recent agent runs</CardTitle>
                 <CardDescription>
-                  Lower is better; stale states stay visible.
+                  Run state is modeled as product state, not a single loading
+                  boolean.
                 </CardDescription>
               </CardHeader>
               <CardContent>
-                <OperationsPlot.Root
-                  data={snapshot.lag}
-                  rowKey="label"
-                  label="Projection lag"
-                  description="Projection lag over the last hour."
-                >
-                  <OperationsPlot.Line x="label" y="value" />
-                  <OperationsPlot.Point x="label" y="value" />
-                </OperationsPlot.Root>
-              </CardContent>
-            </Card>
-          </Block>
-
-          {snapshot.consistency !== 'fresh' ? (
-            <Alert variant="warning">
-              Read models are {snapshot.consistency}. Last processed event is{' '}
-              {snapshot.lastEventId}.
-            </Alert>
-          ) : null}
-
-          <Card>
-            <CardHeader>
-              <CardTitle>Recent agent runs</CardTitle>
-              <CardDescription>
-                Run state is modeled as product state, not a single loading
-                boolean.
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div class="run-table-wrap">
-                <table class="run-table">
-                  <thead>
-                    <tr>
-                      <th>Run</th>
-                      <th>Status</th>
-                      <th>Owner</th>
-                      <th>Updated</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {snapshot.runs.map((run) => (
+                <div class="run-table-wrap">
+                  <table class="run-table">
+                    <thead>
                       <tr>
-                        <td>
-                          <strong>{run.title}</strong>
-                          <span>{run.id}</span>
-                        </td>
-                        <td>
-                          <StatusBadge status={run.status} />
-                        </td>
-                        <td>{run.owner}</td>
-                        <td>{formatRelativeTime(run.updatedAt)}</td>
+                        <th>Run</th>
+                        <th>Status</th>
+                        <th>Owner</th>
+                        <th>Updated</th>
                       </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            </CardContent>
-          </Card>
-        </>
-      ) : null}
+                    </thead>
+                    <tbody>
+                      <For each={currentSnapshot.runs} by={(run) => run.id}>
+                        {(run) => (
+                          <tr>
+                            <td>
+                              <strong>{run.title}</strong>
+                              <span>{run.id}</span>
+                            </td>
+                            <td>
+                              <StatusBadge status={run.status} />
+                            </td>
+                            <td>{run.owner}</td>
+                            <td>{formatRelativeTime(run.updatedAt)}</td>
+                          </tr>
+                        )}
+                      </For>
+                    </tbody>
+                  </table>
+                </div>
+              </CardContent>
+            </Card>
+          </>
+        )}
+      </Show>
     </Stack>
   );
 }

package/dist/templates/spa/src/pages/app/agent-runs.tsx

@@ -4,6 +4,7 @@ import {
   Clock3Icon,
   ShieldAlertIcon,
 } from '@askrjs/lucide';
+import { For } from '@askrjs/askr/control';
 import {
   Badge,
   Card,
@@ -18,12 +19,14 @@ import StatusBadge, {
 } from '../../components/shared/status-badge';
 
 const runs: Array<{
+  id: string;
   title: string;
   status: RunStatus;
   event: string;
   description: string;
 }> = [
   {
+    id: 'reconcile-billing-projection',
     title: 'Reconcile billing projection',
     status: 'running',
     event: 'tool call: compare-ledger',
@@ -31,6 +34,7 @@ const runs: Array<{
       'Streaming events are appended to the timeline and reconciled by event id.',
   },
   {
+    id: 'approve-enterprise-workspace',
     title: 'Approve enterprise workspace',
     status: 'requires-action',
     event: 'approval requested',
@@ -38,6 +42,7 @@ const runs: Array<{
       'Human gates are explicit product states, not hidden inside generated text.',
   },
   {
+    id: 'refresh-onboarding-cohort',
     title: 'Refresh onboarding cohort',
     status: 'succeeded',
     event: 'projection caught up',
@@ -61,32 +66,34 @@ export default function AgentRunsPage() {
       </section>
 
       <Block gap="md" class="agent-grid">
-        {runs.map((run) => (
-          <Card>
-            <CardHeader>
-              <Inline justify="between" align="start" gap="3">
-                <span class="card-icon">
-                  {run.status === 'succeeded' ? (
-                    <CheckCircle2Icon size={18} aria-hidden="true" />
-                  ) : run.status === 'requires-action' ? (
-                    <ShieldAlertIcon size={18} aria-hidden="true" />
-                  ) : (
-                    <BotIcon size={18} aria-hidden="true" />
-                  )}
-                </span>
-                <StatusBadge status={run.status} />
-              </Inline>
-              <CardTitle>{run.title}</CardTitle>
-              <CardDescription>{run.description}</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Inline gap="2" align="center">
-                <Clock3Icon size={14} aria-hidden="true" />
-                <span>{run.event}</span>
-              </Inline>
-            </CardContent>
-          </Card>
-        ))}
+        <For each={runs} by={(run) => run.id}>
+          {(run) => (
+            <Card>
+              <CardHeader>
+                <Inline justify="between" align="start" gap="3">
+                  <span class="card-icon">
+                    {run.status === 'succeeded' ? (
+                      <CheckCircle2Icon size={18} aria-hidden="true" />
+                    ) : run.status === 'requires-action' ? (
+                      <ShieldAlertIcon size={18} aria-hidden="true" />
+                    ) : (
+                      <BotIcon size={18} aria-hidden="true" />
+                    )}
+                  </span>
+                  <StatusBadge status={run.status} />
+                </Inline>
+                <CardTitle>{run.title}</CardTitle>
+                <CardDescription>{run.description}</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Inline gap="2" align="center">
+                  <Clock3Icon size={14} aria-hidden="true" />
+                  <span>{run.event}</span>
+                </Inline>
+              </CardContent>
+            </Card>
+          )}
+        </For>
       </Block>
     </Stack>
   );

package/dist/templates/spa/src/pages/public/home.tsx

@@ -5,6 +5,7 @@ import {
   CheckCircle2Icon,
   ShieldCheckIcon,
 } from '@askrjs/lucide';
+import { For } from '@askrjs/askr/control';
 import { Link } from '@askrjs/askr/router';
 import { Button } from '@askrjs/themes/components';
 import {
@@ -111,15 +112,17 @@ export default function HomePage() {
       <Section paddingY="xl">
         <Container size="xl">
           <Block gap="md" class="feature-grid">
-            {capabilities.map((item) => (
-              <Card>
-                <CardHeader>
-                  <span class="card-icon">{item.icon}</span>
-                  <CardTitle>{item.title}</CardTitle>
-                  <CardDescription>{item.description}</CardDescription>
-                </CardHeader>
-              </Card>
-            ))}
+            <For each={capabilities} by={(item) => item.title}>
+              {(item) => (
+                <Card>
+                  <CardHeader>
+                    <span class="card-icon">{item.icon}</span>
+                    <CardTitle>{item.title}</CardTitle>
+                    <CardDescription>{item.description}</CardDescription>
+                  </CardHeader>
+                </Card>
+              )}
+            </For>
           </Block>
         </Container>
       </Section>

package/dist/templates/ssg/src/components/site-shell.tsx

@@ -1,3 +1,4 @@
+import { For } from '@askrjs/askr/control';
 import { Link } from '@askrjs/askr/router';
 import { Header } from '@askrjs/themes/components';
 import {
@@ -35,9 +36,9 @@ export function SiteHeader() {
             class="navbar-group"
             data-align="end"
           >
-            {navItems.map((item) => (
-              <NavLink href={item.href}>{item.label}</NavLink>
-            ))}
+            <For each={[...navItems]} by={(item) => item.href}>
+              {(item) => <NavLink href={item.href}>{item.label}</NavLink>}
+            </For>
           </Nav>
         </Box>
       </Container>

package/dist/templates/ssg/src/pages/about.tsx

@@ -1,3 +1,4 @@
+import { For } from '@askrjs/askr/control';
 import { Link } from '@askrjs/askr/router';
 import { Button } from '@askrjs/ui';
 import {
@@ -54,17 +55,19 @@ export default function Workflow() {
       />
 
       <CardGrid>
-        {steps.map((step) => (
-          <Card
-            eyebrow={step.number}
-            title={step.title}
-            description={step.body}
-          >
-            <p>
-              <code>{step.command}</code>
-            </p>
-          </Card>
-        ))}
+        <For each={steps} by={(step) => step.number}>
+          {(step) => (
+            <Card
+              eyebrow={step.number}
+              title={step.title}
+              description={step.body}
+            >
+              <p>
+                <code>{step.command}</code>
+              </p>
+            </Card>
+          )}
+        </For>
       </CardGrid>
 
       <Card

package/dist/templates/ssg/src/pages/content.tsx

@@ -1,3 +1,4 @@
+import { For } from '@askrjs/askr/control';
 import { Link } from '@askrjs/askr/router';
 import { Button } from '@askrjs/ui';
 import {
@@ -50,13 +51,15 @@ export default function Content() {
       />
 
       <CardGrid>
-        {routeMap.map((route) => (
-          <Card
-            eyebrow={route.path}
-            title={route.title}
-            description={route.note}
-          />
-        ))}
+        <For each={[...routeMap]} by={(route) => route.path}>
+          {(route) => (
+            <Card
+              eyebrow={route.path}
+              title={route.title}
+              description={route.note}
+            />
+          )}
+        </For>
       </CardGrid>
     </>
   );

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

@@ -1,3 +1,4 @@
+import { For } from '@askrjs/askr/control';
 import { Link } from '@askrjs/askr/router';
 import { Button } from '@askrjs/ui';
 import {
@@ -42,9 +43,11 @@ export default function Home() {
       />
 
       <CardGrid>
-        {highlights.map((highlight) => (
-          <Card title={highlight.title} description={highlight.body} />
-        ))}
+        <For each={highlights} by={(highlight) => highlight.title}>
+          {(highlight) => (
+            <Card title={highlight.title} description={highlight.body} />
+          )}
+        </For>
       </CardGrid>
     </>
   );

package/dist/templates/startkit/src/components/app-sidebar.tsx

@@ -1,3 +1,4 @@
+import { For } from '@askrjs/askr/control';
 import { Link } from '@askrjs/askr/router';
 import {
   LayoutDashboardIcon,
@@ -67,27 +68,31 @@ export default function AppSidebar() {
         </NavBrand>
 
         <NavGroup id="workspace-nav-group" label="Workspace">
-          {primaryNav.map((item) => {
-            const Icon = item.icon;
-            return (
-              <NavLink href={item.href}>
-                <Icon size={16} aria-hidden={true} />
-                <span>{item.label}</span>
-              </NavLink>
-            );
-          })}
+          <For each={primaryNav} by={(item) => item.href}>
+            {(item) => {
+              const Icon = item.icon;
+              return (
+                <NavLink href={item.href}>
+                  <Icon size={16} aria-hidden={true} />
+                  <span>{item.label}</span>
+                </NavLink>
+              );
+            }}
+          </For>
         </NavGroup>
 
         <NavGroup id="other-nav-group" label="Other" placement="bottom">
-          {secondaryNav.map((item) => {
-            const Icon = item.icon;
-            return (
-              <NavLink href={item.href}>
-                <Icon size={16} aria-hidden={true} />
-                <span>{item.label}</span>
-              </NavLink>
-            );
-          })}
+          <For each={secondaryNav} by={(item) => item.href}>
+            {(item) => {
+              const Icon = item.icon;
+              return (
+                <NavLink href={item.href}>
+                  <Icon size={16} aria-hidden={true} />
+                  <span>{item.label}</span>
+                </NavLink>
+              );
+            }}
+          </For>
         </NavGroup>
       </Navbar>
     </aside>

package/dist/templates/startkit/src/components/data-table.tsx

@@ -58,18 +58,20 @@ export default function DataTable<Row>(props: {
       <table class={props.tableClass}>
         <thead>
           <tr>
-            {props.columns.map((column) => (
-              <th class={column.class}>{column.header}</th>
-            ))}
+            <For each={props.columns} by={(column) => column.key}>
+              {(column) => <th class={column.class}>{column.header}</th>}
+            </For>
           </tr>
         </thead>
         <tbody>
           <For each={props.rows} by={props.rowKey}>
             {(row: Row) => (
               <tr class={props.rowClass?.(row)}>
-                {props.columns.map((column) => (
-                  <td class={column.class}>{column.render(row)}</td>
-                ))}
+                <For each={props.columns} by={(column) => column.key}>
+                  {(column) => (
+                    <td class={column.class}>{column.render(row)}</td>
+                  )}
+                </For>
               </tr>
             )}
           </For>

package/dist/templates/startkit/src/pages/workspace/dashboard.tsx

@@ -1,4 +1,5 @@
 import { state } from '@askrjs/askr';
+import { For } from '@askrjs/askr/control';
 import { resource } from '@askrjs/askr/resources';
 import { Button } from '@askrjs/ui/button';
 import {
@@ -61,19 +62,21 @@ export default function DashboardPage() {
       />
 
       <div class="stat-grid">
-        {stats().map((stat) => {
-          const Icon =
-            iconByStatKey[stat.key as keyof typeof iconByStatKey] ??
-            BarChart3Icon;
-          return (
-            <StatCard
-              label={stat.label}
-              value={stat.value}
-              trend={stat.trend}
-              icon={Icon}
-            />
-          );
-        })}
+        <For each={stats} by={(stat) => stat.key}>
+          {(stat) => {
+            const Icon =
+              iconByStatKey[stat.key as keyof typeof iconByStatKey] ??
+              BarChart3Icon;
+            return (
+              <StatCard
+                label={stat.label}
+                value={stat.value}
+                trend={stat.trend}
+                icon={Icon}
+              />
+            );
+          }}
+        </For>
       </div>
 
       <section class="panel stack-md">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@askrjs/cli",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "Unified CLI for the Askr platform",
   "homepage": "https://github.com/askrjs/askr-cli#readme",
   "bugs": {