@akanjs/cli 2.4.2-rc.3 → 3.0.0-alpha.1

package/templates/appSample/lib/task/Task.View.tsx

@@ -4,7 +4,8 @@ export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { a
   return {
     filename: "Task.View.tsx",
     content: `import { type cnst, usePage } from "@apps/${dict.appName}/client";
-import { clsx } from "akanjs/client";
+import { cn } from "akanjs/client";
+import { badgeRecipe } from "akanjs/ui";
 
 // ===== Task.View.tsx =====
 // Convention: lib/<module>/ — PascalCase .tsx, View suffix = detail display component.
@@ -20,25 +21,25 @@ interface GeneralProps {
 export const General = ({ className, task }: GeneralProps) => {
   const { l } = usePage();
   const statusColor = {
-    todo: "text-base-content/50",
+    todo: "text-foreground/50",
     inProgress: "text-primary",
     completed: "text-success",
   }[task.status];
 
   return (
-    <div className={clsx("flex w-full flex-col gap-4", className)}>
+    <div className={cn("flex w-full flex-col gap-4", className)}>
       <div>
-        <h1 className="font-bold text-2xl text-base-content">{task.title}</h1>
-        <div className={clsx("mt-1 font-medium text-sm", statusColor)}>{l(\`taskStatus.\${task.status}\`)}</div>
+        <h1 className="font-bold text-2xl text-foreground">{task.title}</h1>
+        <div className={cn("mt-1 font-medium text-sm", statusColor)}>{l(\`taskStatus.\${task.status}\`)}</div>
       </div>
 
       {task.content && (
-        <div className="rounded-lg border border-base-content/10 bg-base-100 p-4">
-          <p className="whitespace-pre-wrap text-base-content/80 text-sm">{task.content}</p>
+        <div className="rounded-lg border border-foreground/10 bg-background p-4">
+          <p className="whitespace-pre-wrap text-foreground/80 text-sm">{task.content}</p>
         </div>
       )}
 
-      <div className="flex items-center gap-4 text-base-content/60 text-sm">
+      <div className="flex items-center gap-4 text-foreground/60 text-sm">
         <div>
           <span className="font-medium">{l("task.taskDueLabel")} </span>
           {task.due ? task.due.toDate().toLocaleDateString() : l("task.taskNoDue")}
@@ -46,23 +47,25 @@ export const General = ({ className, task }: GeneralProps) => {
       </div>
 
       {task.workHistory && task.workHistory.length > 0 && (
-        <div className="mt-2 border-base-content/10 border-t pt-4">
-          <h3 className="mb-3 font-semibold text-base-content text-sm">{l("task.taskWorkHistoryTitle")}</h3>
+        <div className="mt-2 border-foreground/10 border-t pt-4">
+          <h3 className="mb-3 font-semibold text-foreground text-sm">{l("task.taskWorkHistoryTitle")}</h3>
           <ul className="space-y-2">
             {task.workHistory.map((entry, i) => (
               <li key={i} className="flex items-start gap-3 text-sm">
                 <span
-                  className={clsx("badge badge-xs mt-0.5 shrink-0", {
-                    "badge-ghost": entry.action === "created",
-                    "badge-primary": entry.action === "started",
-                    "badge-success": entry.action === "completed",
-                  })}
+                  className={cn(
+                    badgeRecipe({
+                      variant:
+                        entry.action === "started" ? "primary" : entry.action === "completed" ? "success" : "default",
+                    }),
+                    "mt-0.5 shrink-0",
+                  )}
                 >
                   {l(\`workHistoryAction.\${entry.action}\`)}
                 </span>
                 <div>
-                  <span className="text-base-content/60">{entry.at.toDate().toLocaleString()}</span>
-                  {entry.note && <span className="ml-2 text-base-content/50">{entry.note}</span>}
+                  <span className="text-foreground/60">{entry.at.toDate().toLocaleString()}</span>
+                  {entry.note && <span className="ml-2 text-foreground/50">{entry.note}</span>}
                 </div>
               </li>
             ))}
@@ -76,9 +79,9 @@ export const General = ({ className, task }: GeneralProps) => {
 // ---- Expandable additional fields: ----
 // Compact: for narrow spaces like sidebars or modals
 // export const Compact = ({ className, task }: CompactProps) => (
-//   <div className={clsx("text-sm", className)}>
+//   <div className={cn("text-sm", className)}>
 //     <span className="font-medium">{task.title}</span>
-//     {task.due && <span className="text-base-content/50 ml-2">Due: {new Date(task.due).toLocaleDateString()}</span>}
+//     {task.due && <span className="text-foreground/50 ml-2">Due: {new Date(task.due).toLocaleDateString()}</span>}
 //   </div>
 // );
 `,

package/templates/appSample/lib/task/Task.Zone.tsx

@@ -6,7 +6,7 @@ export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { a
     content: `"use client";
 import { type cnst, Task, usePage } from "@apps/${dict.appName}/client";
 import type { ClientInit, ClientView } from "akanjs/fetch";
-import { Link, Load } from "akanjs/ui";
+import { Link, Load, buttonRecipe } from "akanjs/ui";
 
 // ===== Task.Zone.tsx =====
 // Convention: lib/<module>/ — PascalCase .tsx, Zone suffix = composition layer between pages and UI.
@@ -28,9 +28,9 @@ export const Card = ({ className, init }: CardProps) => {
       init={init}
       renderEmpty={() => (
         <div className="flex flex-col items-center gap-4 py-16 text-center">
-          <div className="text-base-content/40 text-lg">{l("task.taskNoTasks")}</div>
+          <div className="text-foreground/40 text-lg">{l("task.taskNoTasks")}</div>
           <Link href="/task/new">
-            <button className="btn btn-primary btn-sm">{l("task.taskCreateFirst")}</button>
+            <button className={buttonRecipe({ variant: "primary", size: "sm" })}>{l("task.taskCreateFirst")}</button>
           </Link>
         </div>
       )}

package/templates/appSample/page/task/[taskId]/_index.tsx

@@ -6,7 +6,7 @@ export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { a
     content: `
 import { fetch, usePage } from "@apps/${dict.appName}/client";
 import { Task } from "@apps/${dict.appName}/lib/task";
-import { Link } from "akanjs/ui";
+import { Link, buttonRecipe } from "akanjs/ui";
 
 // ===== page/task/[taskId]/_index.tsx =====
 // Convention: Akan.js file-based routing with dynamic segments.
@@ -22,10 +22,10 @@ export default async function Page({ params: { taskId } }: PageProps) {
   return (
     <main className="mx-auto max-w-4xl px-6 py-8">
       <div className="mb-6 flex items-center justify-between">
-        <a href="/task" className="btn btn-ghost btn-sm">
+        <a href="/task" className={buttonRecipe({ variant: "ghost", size: "sm" })}>
           {l("task.taskBackToTasks")}
         </a>
-        <Link href={\`/task/\${taskId}/edit\`} className="btn btn-primary btn-sm">
+        <Link href={\`/task/\${taskId}/edit\`} className={buttonRecipe({ variant: "primary", size: "sm" })}>
           {l("task.taskEdit")}
         </Link>
       </div>

package/templates/appSample/page/task/[taskId]/edit.tsx

@@ -4,7 +4,7 @@ export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { a
   return {
     filename: "edit.tsx",
     content: `import { fetch, Task } from "@apps/${dict.appName}/client";
-import { Load, Link } from "akanjs/ui";
+import { Load, Link, buttonRecipe } from "akanjs/ui";
 
 // ===== page/task/[taskId]/edit.tsx =====
 // Convention: Server-side edit form page using Load.Edit from akanjs/ui.
@@ -21,15 +21,15 @@ export default async function Page({ params: { taskId } }: PageProps) {
   return (
     <main className="mx-auto max-w-2xl px-6 py-8">
       <div className="mb-6">
-        <Link href={\`/task/\${taskId}\`} className="btn btn-ghost btn-sm">
+        <Link href={\`/task/\${taskId}\`} className={buttonRecipe({ variant: "ghost", size: "sm" })}>
           ← Back to Task
         </Link>
       </div>
       <div className="mb-6">
-        <h1 className="font-extrabold text-3xl text-base-content">Edit Task</h1>
-        <p className="mt-1 text-base-content/60 text-sm">Update the task details</p>
+        <h1 className="font-extrabold text-3xl text-foreground">Edit Task</h1>
+        <p className="mt-1 text-foreground/60 text-sm">Update the task details</p>
       </div>
-      <div className="rounded-xl border border-base-content/10 bg-base-100 p-6 shadow-sm">
+      <div className="rounded-xl border border-foreground/10 bg-background p-6 shadow-sm">
         <Load.Edit slice={fetch.slice.taskInPublic} edit={taskEdit} type="form" onSubmit={\`/task/\${taskId}\`}>
           <Task.Template.General />
         </Load.Edit>

package/templates/appSample/page/task/_index.tsx

@@ -4,7 +4,7 @@ export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { a
   return {
     filename: "_index.tsx",
     content: `import { fetch, Task, usePage } from "@apps/${dict.appName}/client";
-import { Link } from "akanjs/ui";
+import { Link, buttonRecipe } from "akanjs/ui";
 
 // ===== page/task/_index.tsx =====
 // Convention: Akan.js file-based routing — _index.tsx is the index page for /task.
@@ -18,10 +18,10 @@ export default async function Page() {
     <main className="mx-auto max-w-4xl px-6 py-8">
       <div className="mb-6 flex items-center justify-between">
         <div>
-          <h1 className="font-extrabold text-3xl text-base-content">{l("task.modelName")}</h1>
-          <p className="mt-1 text-base-content/60 text-sm">{l("task.modelDesc")}</p>
+          <h1 className="font-extrabold text-3xl text-foreground">{l("task.modelName")}</h1>
+          <p className="mt-1 text-foreground/60 text-sm">{l("task.modelDesc")}</p>
         </div>
-        <Link href="/task/new" className="btn btn-primary btn-sm">
+        <Link href="/task/new" className={buttonRecipe({ variant: "primary", size: "sm" })}>
           {l("task.taskNew")}
         </Link>
       </div>

package/templates/appSample/page/task/_layout.tsx

@@ -14,7 +14,7 @@ interface LayoutProps {
 }
 export default function Layout({ children }: LayoutProps) {
   return (
-    <div className="min-h-screen bg-base-200">
+    <div className="min-h-screen bg-muted">
       {children}
     </div>
   );

package/templates/appSample/page/task/new.tsx

@@ -4,7 +4,7 @@ export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { a
   return {
     filename: "new.tsx",
     content: `import { type cnst, fetch, Task, usePage } from "@apps/${dict.appName}/client";
-import { Load, Link } from "akanjs/ui";
+import { Load, Link, buttonRecipe } from "akanjs/ui";
 
 // ===== page/task/new.tsx =====
 // Convention: Server-side form page using Load.Edit from akanjs/ui.
@@ -19,15 +19,15 @@ export default async function Page() {
   return (
     <main className="mx-auto max-w-2xl px-6 py-8">
       <div className="mb-6">
-        <Link href="/task" className="btn btn-ghost btn-sm">
+        <Link href="/task" className={buttonRecipe({ variant: "ghost", size: "sm" })}>
           ← Tasks
         </Link>
       </div>
       <div className="mb-6">
-        <h1 className="font-extrabold text-3xl text-base-content">New Task</h1>
-        <p className="mt-1 text-base-content/60 text-sm">Create a new task with title and description</p>
+        <h1 className="font-extrabold text-3xl text-foreground">New Task</h1>
+        <p className="mt-1 text-foreground/60 text-sm">Create a new task with title and description</p>
       </div>
-      <div className="rounded-xl border border-base-content/10 bg-base-100 p-6 shadow-sm">
+      <div className="rounded-xl border border-foreground/10 bg-background p-6 shadow-sm">
         <Load.Edit slice={fetch.slice.taskInPublic} edit={taskForm} type="form" onCancel="back" onSubmit="/task">
           <Task.Template.General />
         </Load.Edit>

package/templates/appSample/ui/GlobalLoading.tsx

@@ -5,7 +5,7 @@ export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { a
     filename: "GlobalLoading.tsx",
     content: `"use client";
 
-import { clsx } from "akanjs/client";
+import { cn } from "akanjs/client";
 
 // ===== GlobalLoading.tsx =====
 // Convention: ui/ folder — reusable visual components. PascalCase .tsx, "use client" directive.
@@ -19,9 +19,9 @@ interface GlobalLoadingProps {
 
 export const GlobalLoading = ({ className, message = "Loading..." }: GlobalLoadingProps) => {
   return (
-    <div className={clsx("flex flex-col items-center justify-center gap-4 py-32", className)}>
-      <span className="loading loading-spinner loading-lg text-primary" />
-      <span className="text-base-content/60 text-sm">{message}</span>
+    <div className={cn("flex flex-col items-center justify-center gap-4 py-32", className)}>
+      <span className="inline-block size-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+      <span className="text-foreground/60 text-sm">{message}</span>
     </div>
   );
 };

package/templates/appSample/ui/QuantityControl.tsx

@@ -5,7 +5,8 @@ export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { a
     filename: "QuantityControl.tsx",
     content: `"use client";
 
-import { clsx } from "akanjs/client";
+import { cn } from "akanjs/client";
+import { buttonRecipe } from "akanjs/ui";
 
 // ===== QuantityControl.tsx =====
 // Convention: ui/ folder — reusable visual components. PascalCase .tsx, "use client" directive.
@@ -28,9 +29,9 @@ export const QuantityControl = ({
   max = 99,
 }: QuantityControlProps) => {
   return (
-    <div className={clsx("inline-flex items-center gap-1", className)}>
+    <div className={cn("inline-flex items-center gap-1", className)}>
       <button
-        className="btn btn-circle btn-outline btn-xs"
+        className={buttonRecipe({ variant: "outline", size: "icon" }, "size-6 rounded-full")}
         disabled={value <= min}
         onClick={() => onChange(Math.max(min, value - 1))}
       >
@@ -38,7 +39,7 @@ export const QuantityControl = ({
       </button>
       <span className="w-8 text-center font-medium tabular-nums">{value}</span>
       <button
-        className="btn btn-circle btn-outline btn-xs"
+        className={buttonRecipe({ variant: "outline", size: "icon" }, "size-6 rounded-full")}
         disabled={value >= max}
         onClick={() => onChange(Math.min(max, value + 1))}
       >

package/templates/crudPages/[__model__Id]/page.tsx

@@ -38,7 +38,7 @@ export default async function Page({ params }: PageProps) {
       <div className="flex gap-4 font-bold text-lg items-center">
         <${dict.Model}.Zone.View view={${dict.model}View} />
         <Link href={\`/${dict.model}/\${${dict.model}.id}/edit\`}>
-          <button className="btn">
+          <button className="inline-flex items-center justify-center gap-2 rounded-field bg-primary px-4 py-2 font-medium text-primary-foreground text-sm transition-colors hover:bg-primary/90">
             {l("base.updateModel", { model: l("${dict.model}.modelName") })}
           </button>
         </Link>

package/templates/crudPages/page.tsx

@@ -23,7 +23,7 @@ export default async function Page() {
         <div className="animate-fadeIn px-4 pt-4 flex gap-4 items-center">
           <div className="font-bold text-lg md:text-4xl">${dict.Model}s</div>
           <Link href={\`/${dict.model}/new\`}>
-            <button className="btn">+ {l("base.createModel", { model: l("${dict.model}.modelName") })}</button>
+            <button className="inline-flex items-center justify-center gap-2 rounded-field bg-primary px-4 py-2 font-medium text-primary-foreground text-sm transition-colors hover:bg-primary/90">+ {l("base.createModel", { model: l("${dict.model}.modelName") })}</button>
           </Link>
         </div>
         <div>{l("${dict.model}.modelDesc")}</div>

package/templates/crudSinglePage/page.tsx

@@ -20,7 +20,7 @@ export default async function Page() {
     <>
       <div className="animate-fadeIn flex items-center gap-4 px-4 pt-4">
         <div className="text-lg font-bold md:text-4xl">{l("${dict.model}.modelName")}</div>
-        <Model.New className="btn btn-ghost" slice={fetch.slice["${dict.model}InPublic"]} renderTitle="id">
+        <Model.New className="inline-flex items-center gap-2 rounded-field px-3 py-1.5 text-sm transition-colors hover:bg-muted" slice={fetch.slice["${dict.model}InPublic"]} renderTitle="id">
           <${dict.Model}.Template.General />
         </Model.New>
       </div>

package/templates/module/__Model__.Template.tsx

@@ -4,6 +4,7 @@ interface Dict {
   Model: string;
   model: string;
   sysName: string;
+  sysType: string;
 }
 export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: Dict) {
   return {
@@ -11,7 +12,7 @@ export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: Dic
     content: `
 "use client";
 import { Field, Layout } from "akanjs/ui";
-import { st, usePage } from "@${scanInfo?.type ?? "apps"}/${dict.sysName}/client";
+import { st, usePage } from "@${dict.sysType}s/${dict.sysName}/client";
 
 interface GeneralProps {
   className?: string;

package/templates/module/__Model__.Unit.tsx

@@ -4,13 +4,14 @@ interface Dict {
   Model: string;
   model: string;
   sysName: string;
+  sysType: string;
 }
 export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: Dict) {
   return {
     filename: `${dict.Model}.Unit.tsx`,
     content: `
 import type { ModelProps } from "akanjs/client";
-import { cnst, usePage } from "@${scanInfo?.type ?? "apps"}/${dict.sysName}/client";
+import { cnst, usePage } from "@${dict.sysType}s/${dict.sysName}/client";
 import { Link } from "akanjs/ui";
 
 export const Card = ({ ${dict.model}, href }: ModelProps<"${dict.model}", cnst.Light${dict.Model}>) => {

package/templates/module/__Model__.Util.tsx

@@ -4,6 +4,7 @@ interface Dict {
   Model: string;
   model: string;
   sysName: string;
+  sysType: string;
 }
 export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: Dict) {
   return {
@@ -11,7 +12,7 @@ export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: Dic
     content: `
 "use client";
 import { Model } from "akanjs/ui";
-import { fetch, usePage } from "@${scanInfo?.type ?? "apps"}/${dict.sysName}/client";
+import { fetch, usePage } from "@${dict.sysType}s/${dict.sysName}/client";
 import { BiTrash } from "react-icons/bi";
 
 interface RemoveProps {

package/templates/module/__Model__.View.tsx

@@ -4,13 +4,14 @@ interface Dict {
   Model: string;
   model: string;
   sysName: string;
+  sysType: string;
 }
 export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: Dict) {
   return {
     filename: `${dict.Model}.View.tsx`,
     content: `
-import { clsx } from "akanjs/client";
-import { cnst, usePage } from "@${scanInfo?.type ?? "apps"}/${dict.sysName}/client";
+import { cn } from "akanjs/client";
+import { cnst, usePage } from "@${dict.sysType}s/${dict.sysName}/client";
 
 interface GeneralProps {
   className?: string;
@@ -19,7 +20,7 @@ interface GeneralProps {
 export const General = ({ className, ${dict.model} }: GeneralProps) => {
   const { l } = usePage();
   return (
-    <div className={clsx("w-full", className)}>
+    <div className={cn("w-full", className)}>
       <div>{l("${dict.model}.name")}: {${dict.model}.name}</div>
     </div>
   );

package/templates/module/__Model__.Zone.tsx

@@ -4,6 +4,7 @@ interface Dict {
   Model: string;
   model: string;
   sysName: string;
+  sysType: string;
 }
 export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: Dict) {
   return {
@@ -13,7 +14,7 @@ export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: Dic
 import { Load } from "akanjs/ui";
 // Alias the domain namespace so the Card/View exports below never collide with the model name
 // (a model literally named "card" or "view" would otherwise shadow this import).
-import { type cnst, ${dict.Model} as ${dict.Model}Domain } from "@${scanInfo?.type ?? "apps"}/${dict.sysName}/client";
+import { type cnst, ${dict.Model} as ${dict.Model}Domain } from "@${dict.sysType}s/${dict.sysName}/client";
 import type { ClientInit, ClientView, SliceMeta } from "akanjs/fetch";
 
 interface CardProps {

package/templates/workspaceRoot/.cursor/rules/client-server-boundaries.mdc.template

@@ -15,3 +15,4 @@ alwaysApply: false
 - In domain UI the boundary is mechanical, not a judgment call: `Template`, `Zone`, and `Util` are always client components with `"use client"` on line 1; `Unit` and `View` are always server components and never carry the directive. `usePage()` is still legal in server files.
 - Preserve established domain file roles such as `.document.ts`, `.service.ts`, `.store.ts`, `.constant.ts`, and `.client.ts`.
 - When unsure, inspect nearby files in the same app or package before introducing a new boundary pattern.
+- The boundary is only half the rule: how *little* ends up on the client is the other half. See `ssr-first.mdc`.

package/templates/workspaceRoot/.cursor/rules/ssr-first.mdc.template

@@ -0,0 +1,59 @@
+---
+description: SSR-first rendering rules — keep JSX on the server and justify every "use client"
+globs: apps/**/*.tsx,libs/**/*.tsx
+alwaysApply: false
+---
+
+# SSR First — Server Rendering Is The Default
+
+Akan is SSR-first. A JSX element rendered on the server ships as HTML and costs nothing to hydrate; an element
+behind `"use client"` ships twice — as markup and as bundled JS that re-runs in the browser. The boundary question
+is not which file *may* be client, it is **how little** ends up on the client side.
+
+- **The default is server. `"use client"` is a cost you justify per component, not a habit.** A component earns the
+  directive only by using a client-only capability: a React hook, a JSX event handler, the store (`st.use.*` /
+  `st.do.*`), a browser global, or a client-only third-party package. Rendering markup, mapping over data, reading a
+  route param, and calling `l()` are server work — `usePage()` and `l()` never force a boundary.
+- The file role decides *where* the boundary sits (`Template`/`Zone`/`Util` are client, `Unit`/`View` are server);
+  it does not decide how much markup sits behind it. A `Zone` that hoards markup is still an SSR regression.
+- Measure with `akan quality ssr` (`--format json` for tooling). It reports the server render share per app and lib.
+  Treat **50% server share as the floor** and a falling share as a regression to justify or revert.
+
+## What `akan quality ssr` Flags
+
+- `akan.ssr.unnecessary-use-client` — the directive is there but nothing in the file needs it. Delete it.
+- `akan.ssr.client-static-component` — a component in a client file renders real markup with zero client-only
+  capability: pure server work sitting in the bundle.
+- `akan.ssr.client-static-markup` — a large subtree wraps one or two interactive touches. Split it.
+- `akan.ssr.client-mount-load` — a `useEffect(…, [])` loads server data the page could fetch first.
+- `akan.ssr.module-missing-server-view` — a module renders only from `Template`/`Zone`/`Util`, with no `Unit`/`View`.
+- `akan.ssr.template-client-state` — a `Template` holds form state in `useState` instead of the store.
+
+A third-party client package and the `ui/<Folder>/index_.tsx` + `lazy()` boundary both justify the directive and are
+not flagged. Interaction-driven `fetch.*` inside an `onClick` is not flagged either — only mount-time loads are.
+
+## Server-Side Implementation Playbook
+
+1. **Wrap the interaction, not the UI.** The smallest useful client component adds one behaviour and renders
+   `children` untouched, so the markup inside never reaches the bundle:
+   `export const ClickWrapper = ({ children, onPick }: ClickWrapperProps) => <div onClick={onPick}>{children}</div>;`
+2. **Split compound components so panels stay on the server.** A tab or accordion needs client state only for
+   *which* part is visible. `Tab` / `Tab.Menus` / `Tab.Menu` / `Tab.Panel` from `akanjs/ui` is the shape: only the
+   provider and menu hold state, and `<Tab.Panel>` renders children as-is, so a server `Unit`/`View` passed in stays
+   server-rendered. Never one client file with a mode `useState` and every panel body inlined.
+3. **Sync state instead of fetching it.** The page calls `fetch.initTaskInTodo()` / `fetch.viewTask(id)` and passes
+   the serializable result into a `Zone`; `Load.Units` / `Load.View` hydrate the store from it. Never a
+   `useEffect(…, [])` that fetches on mount.
+4. **Push the boundary down to the leaf that needs it.** A store-reading `Zone` holds zero markup and delegates to a
+   server `View`: `export const Self = () => <Task.View.General task={st.use.task()} />;`
+5. **Hand the promise across, not the awaited value.** `ClientInit` / `ClientView` are `PromiseOrObject<T>`, so a
+   page may pass an unawaited `fetch.initTaskInTodo()` and `Load.*` resolves it behind a skeleton.
+6. **Use named `ReactNode` slots, not just `children`.** `Layout.Navbar` takes `title`, `back`, `left`, `right`, and
+   `children`, so a client shell composes server content in five places.
+7. **Let the server do the derived work.** Display and predicate logic lives on `LightTask` (`isNew()`,
+   `canWrite(user?)`); enum→class lookups live in a module-scope `as const` map.
+8. **Gate auth on the server.** Check the session in `_layout.tsx` and redirect there, before any HTML is sent.
+9. **Prefer CSS over client state for pure visibility.** A `data-*` attribute plus `group-data-[…]` variants, or
+   `<details>`/`<summary>`, keeps both branches server-rendered.
+10. **Keep the heavy island out of the first load.** Put a large client-only widget behind the
+    `ui/<Folder>/index_.tsx` + `lazy()` pair.