@akanjs/cli 3.0.0-beta.30 → 3.0.0-beta.32

package/templates/app/page/styles.css.template

@@ -1,17 +1,319 @@
 @import "tailwindcss";
 @import "akanjs/ui/styles.css";
 
-/* The theme system (brand-neutral default palette, @theme inline mapping, dark variant, and runtime
-   data-theme switching) is fully provided by akanjs/ui/styles.css. This app works from the import alone.
-
-   To use this app's own brand colors, override the tokens like this:
-
-   :root,
-   [data-theme="dark"] {
-     --primary: #xxxxxx;
-     --primary-foreground: #ffffff;
-   }
-   [data-theme="light"] {
-     --primary: #xxxxxx;
-   }
-*/
+/* The jelly star palette. akanjs/ui/styles.css owns the theme system (token mapping, dark variant, runtime
+   data-theme switching), so a rebrand only overrides the token values below. The star red (--jelly) is a fill
+   color; --primary carries white text, so it is one step darker to keep 4.5:1 contrast. */
+:root,
+[data-theme="light"] {
+  --background: #f1f1ee;
+  --foreground: #0d0d0e;
+  --primary: #e02d27;
+  --primary-foreground: #ffffff;
+  --secondary: #0d0d0e;
+  --secondary-foreground: #f6f6f3;
+  --accent: #7650d8;
+  --accent-foreground: #ffffff;
+  --neutral: #26262a;
+  --neutral-foreground: #f6f6f3;
+  --info: #1f6fe0;
+  --info-foreground: #ffffff;
+  --success: #3f8f1f;
+  --success-foreground: #ffffff;
+  --warning: #f2b51c;
+  --warning-foreground: #0d0d0e;
+  --destructive: #c4161c;
+  --destructive-foreground: #ffffff;
+  --open: #5aa82a;
+  --open-foreground: #0d0d0e;
+  --muted: #e6e6e1;
+  --muted-foreground: #66666b;
+  --card: #fbfbf9;
+  --card-foreground: #0d0d0e;
+  --popover: #ffffff;
+  --popover-foreground: #0d0d0e;
+  --border: #dcdcd6;
+  --input: #d4d4ce;
+  --ring: #e02d27;
+  --jelly: #ef3a2d;
+  --studio-shadow: color-mix(in oklab, #3a2a20 16%, transparent);
+  --sky-top: #dfe5f7;
+  --sky-bottom: #f6eadf;
+}
+
+[data-theme="dark"] {
+  --background: #0f1129;
+  --foreground: #f3f1fb;
+  --primary: #e02d27;
+  --primary-foreground: #ffffff;
+  --secondary: #f3f1fb;
+  --secondary-foreground: #0f1129;
+  --accent: #a585e0;
+  --accent-foreground: #0f1129;
+  --neutral: #262a4d;
+  --neutral-foreground: #f3f1fb;
+  --info: #4b8ef0;
+  --info-foreground: #0f1129;
+  --success: #7cc23a;
+  --success-foreground: #0f1129;
+  --warning: #f6c437;
+  --warning-foreground: #0f1129;
+  --destructive: #e5383b;
+  --destructive-foreground: #ffffff;
+  --open: #7cc23a;
+  --open-foreground: #0f1129;
+  --muted: #1a1d3b;
+  --muted-foreground: #a6a8c9;
+  --card: #161935;
+  --card-foreground: #f3f1fb;
+  --popover: #1b1e40;
+  --popover-foreground: #f3f1fb;
+  --border: #2b2f57;
+  --input: #33376a;
+  --ring: #f0392e;
+  --jelly: #f2402f;
+  --studio-shadow: color-mix(in oklab, #02030f 65%, transparent);
+  --sky-top: #25215f;
+  --sky-bottom: #2d1749;
+}
+
+:root {
+  --planet: #1f6fe0;
+  --rocket: #82c43c;
+  --moon: #f6e27a;
+  --cloud: #a585e0;
+  --comet: #e3228e;
+}
+
+@theme inline {
+  --color-jelly: var(--jelly);
+  --color-planet: var(--planet);
+  --color-rocket: var(--rocket);
+  --color-moon: var(--moon);
+  --color-cloud: var(--cloud);
+  --color-comet: var(--comet);
+  --radius-box: 1.5rem;
+  --radius-field: 0.875rem;
+}
+
+/* A sampled damped spring: overshoots the target by 18%, wobbles twice and settles. */
+@theme {
+  --ease-jelly: linear(0, 0.42 6%, 0.86 13%, 1.12 21%, 1.18 26%, 1.13 32%, 1 41%, 0.95 48%, 0.97 56%, 1.01 66%, 1.005 78%, 1);
+}
+
+/* html and body both paint a background color, so body's background is not propagated to the canvas: the sky
+   sits on body, and isolation keeps the grain layer above body's own background. */
+@layer base {
+  body {
+    isolation: isolate;
+    background-image:
+      radial-gradient(120% 60% at 50% -14%, var(--sky-top), transparent 64%),
+      radial-gradient(110% 55% at 50% 114%, var(--sky-bottom), transparent 68%);
+    background-attachment: fixed;
+  }
+
+  body::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    pointer-events: none;
+    opacity: 0.06;
+    mix-blend-mode: multiply;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
+  }
+
+  [data-theme="dark"] body::before {
+    opacity: 0.1;
+    mix-blend-mode: overlay;
+  }
+
+  h1,
+  h2 {
+    letter-spacing: -0.035em;
+  }
+
+  ::selection {
+    background-color: color-mix(in oklab, var(--jelly) 24%, transparent);
+  }
+}
+
+@keyframes jelly-intro {
+  from {
+    opacity: 0;
+    translate: 0 1.25rem;
+    filter: blur(6px);
+  }
+}
+
+@keyframes jelly-breathe {
+  0%,
+  100% {
+    scale: 1 1;
+  }
+  50% {
+    scale: 1.035 0.965;
+  }
+}
+
+@keyframes jelly-wobble {
+  0% {
+    scale: 1 1;
+  }
+  16% {
+    scale: 1.16 0.86;
+  }
+  32% {
+    scale: 0.9 1.1;
+  }
+  48% {
+    scale: 1.06 0.95;
+  }
+  64% {
+    scale: 0.97 1.03;
+  }
+  82% {
+    scale: 1.01 0.99;
+  }
+  100% {
+    scale: 1 1;
+  }
+}
+
+@keyframes jelly-float {
+  0%,
+  100% {
+    translate: 0 0;
+    rotate: calc(var(--float-tilt, 4deg) * -1);
+  }
+  50% {
+    translate: 0 calc(var(--float-rise, 0.9rem) * -1);
+    rotate: var(--float-tilt, 4deg);
+  }
+}
+
+@utility intro-rise {
+  @media (prefers-reduced-motion: no-preference) {
+    animation: jelly-intro 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
+    animation-delay: var(--intro-delay, 0ms);
+  }
+}
+
+@utility jelly-breathe {
+  transform-origin: 50% 100%;
+  @media (prefers-reduced-motion: no-preference) {
+    animation: jelly-breathe 3.2s ease-in-out infinite;
+  }
+}
+
+@utility jelly-wobble {
+  transform-origin: 50% 100%;
+  @media (prefers-reduced-motion: no-preference) {
+    animation: jelly-wobble 0.9s ease-out both;
+  }
+}
+
+@utility jelly-float {
+  @media (prefers-reduced-motion: no-preference) {
+    animation: jelly-float var(--float-duration, 6s) ease-in-out var(--float-delay, 0s) infinite;
+  }
+}
+
+@utility squish {
+  transition:
+    scale 700ms var(--ease-jelly),
+    translate 700ms var(--ease-jelly);
+  &:hover {
+    scale: 1.04 0.97;
+  }
+  &:active {
+    scale: 1.08 0.9;
+    transition-duration: 90ms;
+  }
+}
+
+@utility tint-* {
+  --tint: --value(--color-*);
+}
+
+/* A gummy surface. public/jelly/sugar.webp is a high-pass of the logo star's sugar coating (128 gray = no change),
+   laid on in hard-light so every tint gets the same sugar grain. */
+@utility jelly {
+  --jelly-tint: var(--tint, var(--primary));
+  --jelly-deep: color-mix(in oklab, var(--jelly-tint) 70%, black);
+  --jelly-haze: color-mix(in oklab, var(--jelly-tint) 55%, white);
+  background-color: var(--jelly-tint);
+  background-image:
+    url("/jelly/sugar.webp"),
+    radial-gradient(120% 95% at 26% -8%, color-mix(in oklab, white 26%, transparent), transparent 58%),
+    radial-gradient(110% 90% at 60% 125%, color-mix(in oklab, var(--jelly-deep) 30%, transparent), transparent 60%);
+  background-size:
+    100px 100px,
+    100% 100%,
+    100% 100%;
+  background-repeat: repeat, no-repeat, no-repeat;
+  background-blend-mode: hard-light, normal, normal;
+  box-shadow:
+    inset 0 0 0 1px color-mix(in oklab, var(--jelly-haze) 40%, transparent),
+    inset 0 0 8px 1px color-mix(in oklab, white 20%, transparent),
+    inset 0 -3px 6px color-mix(in oklab, var(--jelly-deep) 28%, transparent),
+    0 6px 10px -6px color-mix(in oklab, var(--jelly-deep) 65%, transparent),
+    0 1px 2px color-mix(in oklab, black 12%, transparent);
+}
+
+@utility jelly-glass {
+  --jelly-tint: var(--tint, var(--card));
+  background-color: color-mix(in oklab, var(--card) 95%, var(--jelly-tint));
+  background-image:
+    radial-gradient(120% 70% at 20% -20%, color-mix(in oklab, white 55%, transparent), transparent 60%),
+    radial-gradient(90% 60% at 100% 120%, color-mix(in oklab, var(--jelly-tint) 9%, transparent), transparent 70%);
+  box-shadow:
+    inset 0 1px 0 color-mix(in oklab, white 70%, transparent),
+    inset 0 -1px 0 color-mix(in oklab, var(--jelly-tint) 14%, transparent),
+    0 22px 44px -28px var(--studio-shadow),
+    0 2px 6px -3px var(--studio-shadow);
+  @variant dark {
+    background-color: color-mix(in oklab, var(--card) 92%, var(--jelly-tint));
+    background-image:
+      radial-gradient(120% 70% at 20% -20%, color-mix(in oklab, white 7%, transparent), transparent 60%),
+      radial-gradient(90% 60% at 100% 120%, color-mix(in oklab, var(--jelly-tint) 14%, transparent), transparent 70%);
+    box-shadow:
+      inset 0 1px 0 color-mix(in oklab, white 11%, transparent),
+      inset 0 -1px 0 color-mix(in oklab, var(--jelly-tint) 18%, transparent),
+      0 22px 44px -28px var(--studio-shadow),
+      0 2px 6px -3px var(--studio-shadow);
+  }
+}
+
+/* The same sugar, clipped to the glyphs of plain text-primary text. Clipping replaces the element's background, so
+   elements with a surface of their own (bg-*, jelly, glass) and currentColor drawings are skipped, and icons inside
+   get their color back. */
+.text-primary:not(svg, [class*="bg-"], [class*="jelly"], [class*="glass"], [class*="-current"]) {
+  background-color: var(--primary);
+  background-image:
+    url("/jelly/sugar.webp"),
+    linear-gradient(
+      to bottom,
+      color-mix(in oklab, black 8%, var(--primary)),
+      color-mix(in oklab, white 14%, var(--primary)) 22%,
+      var(--primary) 60%,
+      color-mix(in oklab, black 8%, var(--primary))
+    );
+  background-size:
+    100px 100px,
+    100% 1lh;
+  background-origin: content-box;
+  background-blend-mode: hard-light, normal;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  text-decoration-color: var(--primary);
+  & :is(svg, [class*="-current"]) {
+    color: var(--primary);
+  }
+  /* A heading's tight leading pushes descenders out of the box, where a text-clipped background is never painted. */
+  :is(h1, h2, h3, h4, h5, h6) & {
+    padding-block: 0.15em;
+    margin-block: -0.15em;
+  }
+}

package/templates/app/ui/Recipe/index.ts

@@ -0,0 +1,9 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "index.ts",
+    content: `export { type JellyButtonVariants, jellyButtonRecipe } from "./jellyButton";
+`,
+  };
+}

package/templates/app/ui/Recipe/jellyButton.ts

@@ -0,0 +1,63 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "jellyButton.ts",
+    content: `import { recipe, tv } from "akanjs/ui";
+
+/** Sugared gummy button with the same variants as akanjs's \`buttonRecipe\`; \`page/_overrides.tsx\` binds it to every akanjs/ui Button. ghost/outline/link stay surfaceless. */
+export const jellyButtonRecipe = recipe(
+  tv({
+    base: "squish inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-full font-bold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+    variants: {
+      variant: {
+        default: "text-foreground",
+        primary: "tint-primary text-primary-foreground",
+        secondary: "tint-secondary text-secondary-foreground",
+        accent: "tint-accent text-accent-foreground",
+        neutral: "tint-neutral text-neutral-foreground",
+        outline: "border border-foreground/12 bg-background/70 text-foreground hover:bg-foreground/5",
+        ghost: "text-foreground/75 hover:bg-foreground/6 hover:text-foreground",
+        destructive: "tint-destructive text-destructive-foreground",
+        success: "tint-success text-success-foreground",
+        warning: "tint-warning text-warning-foreground",
+        info: "tint-info text-info-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        xs: "h-6 px-2.5 text-xs",
+        sm: "h-8 px-3.5 text-sm",
+        md: "h-10 px-5 text-sm",
+        lg: "h-12 px-7 text-base",
+        icon: "h-10 w-10 px-0",
+      },
+      shape: {
+        default: "",
+        square: "aspect-square px-0",
+        circle: "aspect-square px-0",
+      },
+      outline: { true: "border bg-transparent", false: "" },
+    },
+    compoundVariants: [
+      { variant: "default", outline: false, class: "jelly-glass" },
+      {
+        variant: ["primary", "secondary", "accent", "neutral", "destructive", "success", "warning", "info"],
+        outline: false,
+        class: "jelly",
+      },
+      { variant: "primary", outline: true, class: "border-primary text-primary hover:bg-primary/8" },
+      { variant: "secondary", outline: true, class: "border-secondary text-secondary hover:bg-secondary/8" },
+      { variant: "accent", outline: true, class: "border-accent text-accent hover:bg-accent/8" },
+      { variant: "neutral", outline: true, class: "border-neutral text-neutral hover:bg-neutral/8" },
+      { variant: "destructive", outline: true, class: "border-destructive text-destructive hover:bg-destructive/8" },
+      { variant: "success", outline: true, class: "border-success text-success hover:bg-success/8" },
+      { variant: "warning", outline: true, class: "border-warning text-warning hover:bg-warning/8" },
+      { variant: "info", outline: true, class: "border-info text-info hover:bg-info/8" },
+    ],
+    defaultVariants: { variant: "primary", size: "md", shape: "default" },
+  }),
+);
+export type JellyButtonVariants = NonNullable<Parameters<typeof jellyButtonRecipe>[0]>;
+`,
+  };
+}

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

@@ -30,7 +30,7 @@ export const Card = ({ task, className, href }: CardProps) => {
   return (
     <Layout.Unit
       className={cn(
-        "rounded-lg border border-foreground/10 bg-background p-4 transition-shadow hover:shadow-md",
+        "jelly-glass block rounded-box p-5 transition-transform duration-300 ease-jelly hover:-translate-y-0.5",
         className,
       )}
       href={href}

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

@@ -5,7 +5,8 @@ export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { a
     filename: "Task.Util.tsx",
     content: `"use client";
 import { fetch, st, usePage } from "@apps/${dict.appName}/client";
-import { buttonRecipe, Dropdown, Model } from "akanjs/ui";
+import { jellyButtonRecipe } from "@apps/${dict.appName}/ui";
+import { Dropdown, Model } from "akanjs/ui";
 
 // ===== Task.Util.tsx =====
 // Convention: lib/<module>/ — PascalCase .tsx, Util suffix = action buttons/utility components.
@@ -19,10 +20,7 @@ interface StartProps {
 }
 
 export const Start = ({ taskId }: StartProps) => (
-  <button
-    className={buttonRecipe({ size: "xs" }, "border-primary/20 bg-primary/10 text-primary hover:bg-primary hover:text-primary-foreground")}
-    onClick={() => st.do.startTask(taskId)}
-  >
+  <button className={jellyButtonRecipe({ variant: "primary", size: "xs" })} onClick={() => st.do.startTask(taskId)}>
     {usePage().l("task.taskStart")}
   </button>
 );
@@ -32,10 +30,7 @@ interface CompleteProps {
 }
 
 export const Complete = ({ taskId }: CompleteProps) => (
-  <button
-    className={buttonRecipe({ size: "xs" }, "border-success/20 bg-success/10 text-success hover:bg-success hover:text-success-foreground")}
-    onClick={() => st.do.completeTask(taskId)}
-  >
+  <button className={jellyButtonRecipe({ variant: "success", size: "xs" })} onClick={() => st.do.completeTask(taskId)}>
     {usePage().l("task.taskComplete")}
   </button>
 );
@@ -46,7 +41,9 @@ interface RemoveProps {
 
 export const Remove = ({ taskId }: RemoveProps) => (
   <Model.Remove modelId={taskId} slice={fetch.slice.task}>
-    <button className={buttonRecipe({ variant: "ghost", size: "xs" }, "text-destructive")}>{usePage().l("task.taskRemove")}</button>
+    <button className={jellyButtonRecipe({ variant: "ghost", size: "xs" }, "text-destructive")}>
+      {usePage().l("task.taskRemove")}
+    </button>
   </Model.Remove>
 );
 
@@ -59,9 +56,9 @@ export const Toolbox = ({ taskId, status }: ToolboxProps) => {
   const { l } = usePage();
   return (
     <Dropdown
-      buttonClassName={buttonRecipe({ variant: "ghost", size: "xs" })}
+      buttonClassName={jellyButtonRecipe({ variant: "ghost", size: "xs" })}
       value={<span>···</span>}
-      dropdownClassName="w-40 rounded-box border border-foreground/10 bg-background p-2"
+      dropdownClassName="jelly-glass w-40 rounded-box p-2"
       content={
         <>
           {status === "todo" && (
@@ -96,7 +93,7 @@ export const Toolbox = ({ taskId, status }: ToolboxProps) => {
 // New Task Button: Model.NewWrapper — triggers new Task creation form
 // export const NewTask = () => (
 //   <Model.NewWrapper partial={{}}>
-//     <button className={buttonRecipe({ variant: "primary", size: "sm" })}>+ New Task</button>
+//     <button className={jellyButtonRecipe({ variant: "primary", size: "sm" })}>+ New Task</button>
 //   </Model.NewWrapper>
 // );
 `,

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

@@ -29,12 +29,12 @@ export const General = ({ className, task }: GeneralProps) => {
   return (
     <div className={cn("flex w-full flex-col gap-4", className)}>
       <div>
-        <h1 className="font-bold text-2xl text-foreground">{task.title}</h1>
+        <h1 className="font-black text-4xl 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-foreground/10 bg-background p-4">
+        <div className="jelly-glass rounded-box p-5">
           <p className="whitespace-pre-wrap text-foreground/80 text-sm">{task.content}</p>
         </div>
       )}

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

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

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

@@ -3,11 +3,11 @@ import type { AppInfo, LibInfo } from "akanjs";
 export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
   return {
     filename: "_index.tsx",
-    content: `import { fetch, usePage } from "@apps/${dict.appName}/client";
-import { Task } from "@apps/${dict.appName}/lib/task";
+    content: `import { fetch, Task, usePage } from "@apps/${dict.appName}/client";
+import { jellyButtonRecipe } from "@apps/${dict.appName}/ui";
 import { ID } from "akanjs/base";
 import { page } from "akanjs/client";
-import { Link, buttonRecipe } from "akanjs/ui";
+import { Link } from "akanjs/ui";
 
 export default page()
   .param("taskId", ID)
@@ -17,10 +17,10 @@ export default page()
     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={buttonRecipe({ variant: "ghost", size: "sm" })}>
+          <Link href="/task" className={jellyButtonRecipe({ variant: "ghost", size: "sm" })}>
             {l("task.taskBackToTasks")}
-          </a>
-          <Link href={\`/task/\${taskId}/edit\`} className={buttonRecipe({ variant: "primary", size: "sm" })}>
+          </Link>
+          <Link href={\`/task/\${taskId}/edit\`} className={jellyButtonRecipe({ variant: "primary", size: "sm" })}>
             {l("task.taskEdit")}
           </Link>
         </div>

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

@@ -4,9 +4,10 @@ export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { a
   return {
     filename: "edit.tsx",
     content: `import { fetch, Task } from "@apps/${dict.appName}/client";
+import { jellyButtonRecipe } from "@apps/${dict.appName}/ui";
 import { ID } from "akanjs/base";
 import { page } from "akanjs/client";
-import { Load, Link, buttonRecipe } from "akanjs/ui";
+import { Link, Load } from "akanjs/ui";
 
 export default page()
   .param("taskId", ID)
@@ -16,15 +17,15 @@ export default page()
     return (
       <main className="mx-auto max-w-2xl px-6 py-8">
         <div className="mb-6">
-          <Link href={\`/task/\${taskId}\`} className={buttonRecipe({ variant: "ghost", size: "sm" })}>
+          <Link href={\`/task/\${taskId}\`} className={jellyButtonRecipe({ variant: "ghost", size: "sm" })}>
             ← Back to Task
           </Link>
         </div>
         <div className="mb-6">
-          <h1 className="font-extrabold text-3xl text-foreground">Edit Task</h1>
+          <h1 className="font-black text-4xl 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-foreground/10 bg-background p-6 shadow-sm">
+        <div className="jelly-glass rounded-box p-6">
           <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,8 +4,9 @@ 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 { jellyButtonRecipe } from "@apps/${dict.appName}/ui";
 import { page } from "akanjs/client";
-import { Link, buttonRecipe } from "akanjs/ui";
+import { Link } from "akanjs/ui";
 
 export default page().render(async () => {
   const { l } = usePage();
@@ -14,10 +15,10 @@ export default page().render(async () => {
     <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-foreground">{l("task.modelName")}</h1>
+          <h1 className="font-black text-4xl 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={buttonRecipe({ variant: "primary", size: "sm" })}>
+        <Link href="/task/new" className={jellyButtonRecipe({ variant: "primary", size: "sm" })}>
           {l("task.taskNew")}
         </Link>
       </div>

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

@@ -6,7 +6,7 @@ export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { a
     content: `import { layout } from "akanjs/client";
 
 export default layout().render(({ children }) => {
-  return <div className="min-h-screen bg-muted">{children}</div>;
+  return <div className="min-h-screen">{children}</div>;
 });
 `,
   };