@hitch42/applet 0.1.0-beta.2

package/scaffold/.agents/skills/hitch-applets/references/server.md

@@ -0,0 +1,98 @@
+# Applet server
+
+Use the server half for work that must not run in the browser.
+
+## Choose the correct half
+
+- Stay client-only for normal Hitch data queries and mutations.
+- The client SDK uses the current user's identity and access.
+- Use the server half for secrets.
+- Use the server half for external services.
+- Use the server half for imperative Hitch data access.
+- Do not add a server proxy only for filtering or access control.
+
+## Define the router
+
+- Import `os` from `@orpc/server`.
+- Build an object that contains oRPC procedures.
+- Define each procedure with `os.handler`.
+- Default-export `{ router }`.
+
+```ts
+import { os } from "@orpc/server";
+
+const router = {
+  hello: os.handler(() => ({ hello: "World!" })),
+};
+
+export default { router };
+```
+
+- Nest procedure objects when the applet needs nested paths.
+- Do not name a top-level procedure `hitch`.
+- The client reserves `hitch` for the Hitch data client.
+- The generated API client type rejects a router with that reserved key.
+
+## Call the router from the client
+
+- Import `api` from `@hitch42/applet/client`.
+- Use its generated procedure types.
+- Use TanStack query options for a query.
+
+```ts
+import { useQuery } from "@tanstack/react-query";
+import { api } from "@hitch42/applet/client";
+
+const greeting = useQuery(api.hello.queryOptions());
+```
+
+- Use the generated mutation options for a mutation.
+- Keep procedure inputs and outputs inferred from the router.
+
+## Access Hitch from the server
+
+Import the server exports:
+
+```ts
+import { env, hitch } from "@hitch42/applet/server";
+```
+
+- Use `hitch` for imperative calls inside a procedure.
+- A browser request makes `hitch` use that user's identity.
+- A scheduled request makes `hitch` use the applet identity.
+- A request without a complete user or applet identity receives HTTP 401.
+
+## Define variables
+
+- Add each server variable to the applet manifest.
+- Set `secret: true` for a secret value.
+- Set `optional: true` when the value can be absent.
+- Use a valid environment key.
+- Do not use a key with the reserved `HITCH_` prefix.
+
+```ts
+variables: {
+  API_URL: {},
+  API_TOKEN: { secret: true },
+  OPTIONAL_VALUE: { optional: true },
+},
+```
+
+- Read a required value as a `string` from `env`.
+- Read an optional value as `string | undefined`.
+- Use only variables declared in the manifest.
+
+```ts
+const response = await fetch(env.API_URL, {
+  headers: { authorization: `Bearer ${env.API_TOKEN}` },
+});
+```
+
+## Understand identity
+
+- A user request carries a user ID and session token.
+- Server `hitch` calls then use the user's access.
+- A scheduled run carries an applet ID and applet token.
+- Server `hitch` calls then use the applet's manifest grants.
+- A scheduled run has no user identity.
+- User-only endpoints reject the applet identity with HTTP 403.

package/scaffold/.agents/skills/hitch-applets/references/workflows.md

@@ -0,0 +1,73 @@
+# Workflows
+
+Use a workflow for server work that runs in steps, retries a step, or waits between steps.
+
+## Define a workflow
+
+- Import `createWorkflow` from `@hitch42/applet/server`.
+- Give the workflow function a `step` and a typed `payload`.
+- Put each unit of work in `step.do`.
+- Add the workflow to a `workflows` object.
+- Default-export `{ router, workflows }`.
+
+```ts
+import { os } from "@orpc/server";
+import { createWorkflow, hitch } from "@hitch42/applet/server";
+
+export const workflows = {
+  importOrders: createWorkflow(async (step, payload: { since: string }) => {
+    const orders = await step.do("fetch", () => fetchOrders(payload.since));
+    await step.do(
+      "upsert",
+      { retries: { limit: 5, delay: { seconds: 10 }, backoff: "exponential" } },
+      () => upsertOrders(orders),
+    );
+    await step.sleep("cool down", { hours: 1 });
+    return { count: orders.length };
+  }),
+};
+
+const router = {
+  importNow: os.handler(() => hitch.workflows.importOrders.start({ since: "2026-09-01" })),
+};
+
+export default { router, workflows };
+```
+
+- The key in `workflows` is the workflow code.
+- Export `workflows` by name so generated types can use it without a type cycle.
+- `step.do(name, fn)` runs `fn` and stores its result. A step can run more than once: if the platform loses the response after `fn` finished, it runs the step again. Make each step safe to repeat.
+- `step.do(name, { retries: { limit: 5, delay: { seconds: 10 }, backoff: "exponential" } }, fn)` retries `fn` after an error. `backoff` is `constant` (default), `linear`, or `exponential`.
+- `step.sleep(name, duration)` pauses the run. Give an object such as `{ minutes: 10 }` or `{ days: 1, hours: 12 }`. The fields are `milliseconds`, `seconds`, `minutes`, `hours`, `days`, and `weeks`, and they add together. A negative field or a total above 365 days fails the run.
+- The return value of the workflow function is the run result.
+
+## Start a workflow
+
+- Call `hitch.workflows.<code>.start(payload)` from a server procedure.
+- The call returns `{ id }` at once. It does not wait for the run.
+- Call `hitch.workflows.<code>.get(id)` to read `status`, `result`, `error`, and `sleepUntil`.
+- The status is `in_progress`, `sleeping`, `success`, `error`, or `terminated`.
+- Call `hitch.workflows.<code>.list({ status: "open" })` to read the open runs of that workflow. The list has no `result` field.
+- The `status` option accepts one status or `open`. `open` means `in_progress` or `sleeping`.
+- The `limit` option accepts 1 to 100. The default is 50. The list shows the newest runs first.
+- A schedule procedure can start a workflow. The client reaches it through a procedure.
+
+## Follow the rules
+
+- A run acts as whoever started it. Started from a user's request, `hitch` uses that user's access. Started from a schedule, it acts as the applet with the manifest grants.
+- The platform runs the workflow function again for each step. Code outside `step.do` must be deterministic. Do not read the time or random values outside a step.
+- Use a fixed step name. A name that repeats gets a sequence number.
+- Do not run steps in parallel. Await each step before the next.
+- A step result must be JSON. A result above 1 MiB fails the run.
+- A step result comes back as its JSON form on replay. A `Date` becomes a string. Return plain data.
+- Each step has the same limits as a scheduled run: 30,000 milliseconds of CPU and 1,000 subrequests.
+- A step that still fails after its retries throws inside the workflow function. Catch it to run a compensating step. An error you do not catch fails the run.
+- A run keeps the release it started on. A new release does not stop or change a run that is in progress or asleep.
+- An owner or admin can terminate an open run from the applet settings page. A terminated run has the status `terminated` and does not resume.
+
+## Diagnose a failed run
+
+- Call `get(id)` and read `error`.
+- Workflow step output is in the applet logs with the type `workflow`, the run id, and the workflow code.
+- Run `applet logs <code> --run <id>` to see one run.
+- Include `--level log` during diagnosis.

package/scaffold/AGENTS.md

@@ -0,0 +1,38 @@
+# Hitch Applet Workspace
+
+Before any command or file edit, read and follow `.agents/skills/hitch-applets/SKILL.md`.
+
+Use `pnpm` for package commands.
+
+Edit only `hitch.config.ts`, each `applet.manifest.ts`, and files in an applet `src` directory.
+The applet CLI replaces all other workspace files.
+
+## What makes a good applet
+
+- A good applet does one job for one group of people. Ship the whole workflow for that job, and nothing else.
+- Small applets win. Prefer two focused applets over one applet with modes.
+- The organization's Hitch data is the single source of truth. Read and write Hitch objects. Do not build a parallel store, cache, or copy.
+- Do not add sample business records, hard-coded business records, or in-memory business data.
+- Access control belongs to the platform. Each call carries the caller's identity and grants. Do not gate data in applet code — a filter in the UI is a convenience, not a boundary.
+- Stay client-first. A server half exists for secrets, external services, and schedules. When in doubt, leave it out.
+- Use the platform's parts — records, files, schedules, the theme — before you build custom machinery.
+- Design for the user in front of you. Their words name the routes, fields, and buttons. When the data model and their language disagree, raise it — do not paper over it.
+
+## Before you build
+
+- Do not create an applet until the first complete user workflow is clear.
+- Treat thresholds, status rules, notification timing, notification channels, and recipients as product decisions.
+- Ask one product question when a required decision is missing. Do not write files until the user answers it.
+- Read generated Hitch types before you select objects or attributes.
+- If generated types are unavailable, ask for access or ask for the exact object and attribute names.
+- Start with the smallest complete workflow. Do not add dashboards, metrics, search, filters, or settings without a request.
+
+## Work with the user
+
+- You will be developing applets for non-technical users. You are a Forward Deployed Engineer for Hitch itself.
+- Your job is to understand user requirements and implement the solution to their problems.
+- Use plain language. Avoid overly technical jargon and focus on understanding.
+- Do not ask the user how to do something or which technical option is better. Lead with value and trade-offs instead.
+- Ask only for decisions that affect the app's behavior. Handle implementation details without asking when a safe default exists.
+- Ask one clear question at a time. Give a recommended choice when the user must make a technical decision.
+- Explain an error in plain language before you show technical details.

package/scaffold/applet/components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "aria-rhea",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/client/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/client/components",
+    "utils": "@/client/lib/utils",
+    "ui": "@/client/components/ui",
+    "lib": "@/client/lib",
+    "hooks": "@/client/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

package/scaffold/applet/src/client/components/ui/alert.tsx

@@ -0,0 +1,73 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/client/lib/utils";
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-2xl border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2.5 right-3", className)}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction };

package/scaffold/applet/src/client/components/ui/avatar.tsx

@@ -0,0 +1,100 @@
+import * as React from "react";
+
+import { cn } from "@/client/lib/utils";
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & {
+  size?: "default" | "sm" | "lg";
+}) {
+  return (
+    <div
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type ImageState = "loading" | "loaded" | "error";
+
+function AvatarImage({ className, ...props }: React.ComponentProps<"img">) {
+  const [state, setState] = React.useState<ImageState>(props.src ? "loading" : "error");
+  return (
+    <img
+      data-slot="avatar-image"
+      alt={props.alt || ""}
+      data-state={state}
+      onLoad={() => setState("loaded")}
+      onError={() => setState("error")}
+      className={cn(
+        "peer aspect-square size-full rounded-full object-cover data-[state=error]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-fallback"
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs peer-data-[state=error]:flex peer-[*]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge };

package/scaffold/applet/src/client/components/ui/badge.tsx

@@ -0,0 +1,55 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/client/lib/utils";
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-2xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & {
+    render?: (props: React.HTMLAttributes<HTMLElement>) => React.ReactNode;
+  }) {
+  if (render) {
+    const renderProps = {
+      "data-slot": "badge",
+      "data-variant": variant,
+      className: cn(badgeVariants({ variant }), className),
+      ...props,
+    };
+
+    return render(renderProps);
+  }
+
+  return (
+    <span
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };

package/scaffold/applet/src/client/components/ui/button.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import type * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+  Button as ButtonPrimitive,
+  Link as LinkPrimitive,
+  type ButtonProps as ButtonPrimitiveProps,
+  type LinkProps as LinkPrimitiveProps,
+} from "react-aria-components";
+
+import { cn } from "@/client/lib/utils";
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-2xl border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-transparent dark:hover:bg-input/30",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+        xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        lg: "h-9 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-8",
+        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-7",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: Omit<ButtonPrimitiveProps, "className"> &
+  React.RefAttributes<HTMLButtonElement> &
+  VariantProps<typeof buttonVariants> & {
+    className?: string;
+  }) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+function LinkButton({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: Omit<LinkPrimitiveProps, "className"> &
+  VariantProps<typeof buttonVariants> & {
+    className?: string;
+  }) {
+  return (
+    <LinkPrimitive
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, LinkButton, buttonVariants };

package/scaffold/applet/src/client/components/ui/card.tsx

@@ -0,0 +1,85 @@
+import * as React from "react";
+
+import { cn } from "@/client/lib/utils";
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-[min(var(--radius-4xl),24px)] bg-card py-(--card-spacing) text-sm text-card-foreground shadow-sm ring-1 ring-foreground/5 [--card-spacing:--spacing(5)] has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] dark:ring-foreground/10 *:[img:first-child]:rounded-t-[min(var(--radius-4xl),24px)] *:[img:last-child]:rounded-b-[min(var(--radius-4xl),24px)]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1.5 rounded-t-[min(var(--radius-4xl),24px)] px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("font-heading text-base font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="card-content" className={cn("px-(--card-spacing)", className)} {...props} />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-[min(var(--radius-4xl),24px)] px-(--card-spacing) [.border-t]:pt-(--card-spacing)",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

package/scaffold/applet/src/client/components/ui/checkbox.tsx

@@ -0,0 +1,35 @@
+import {
+  Checkbox as CheckboxPrimitive,
+  composeRenderProps,
+  type CheckboxProps,
+} from "react-aria-components";
+
+import { cn } from "@/client/lib/utils";
+import { CheckIcon } from "lucide-react";
+
+function Checkbox({ className, children, ...props }: CheckboxProps) {
+  return (
+    <CheckboxPrimitive
+      data-slot="checkbox"
+      className={cn(
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[5px] border border-transparent bg-input/90 transition-shadow outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-transparent after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary data-focus-visible:border-ring data-focus-visible:ring-3 data-focus-visible:ring-ring/30 data-invalid:border-destructive data-invalid:ring-3 data-invalid:ring-destructive/20 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:data-invalid:border-destructive/50 dark:data-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary data-selected:border-primary data-selected:bg-primary data-selected:text-primary-foreground data-invalid:data-selected:border-primary dark:data-selected:bg-primary",
+        className,
+      )}
+      {...props}
+    >
+      {composeRenderProps(children, (children, { isSelected, isIndeterminate }) => (
+        <>
+          <span
+            data-slot="checkbox-indicator"
+            className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
+          >
+            {(isSelected || isIndeterminate) && <CheckIcon />}
+          </span>
+          {children}
+        </>
+      ))}
+    </CheckboxPrimitive>
+  );
+}
+
+export { Checkbox };