@webjsdev/ui 0.3.17 → 0.4.0

package/packages/registry/blocks/login-03/components/login-form.ts

@@ -0,0 +1,89 @@
+/**
+ * The login-03 form: a centred "Welcome back" card with Apple and Google
+ * buttons above an email and password form, and the terms line under the
+ * card. A fragment helper (a function returning an `html` template), so it
+ * renders on the server and ships no JavaScript. Ported from shadcn/ui's
+ * login-03.
+ *
+ * The `<form>` has no `action` yet. Bind a server action from a
+ * `'use server'` file (`<form action=${signIn}>`) before you ship it: the
+ * framework then supplies `method="post"`, and the no-JS post, the 422
+ * re-render with `fieldErrors` / `values`, and the 303 redirect all work.
+ * Until it is bound, the form submits as a GET back to the page with the
+ * typed values in the URL. The provider buttons are placeholders for your
+ * providers' sign-in links.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { buttonClass } from '../../../components/button.ts';
+import {
+  cardClass,
+  cardContentClass,
+  cardDescriptionClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import {
+  fieldClass,
+  fieldDescriptionClass,
+  fieldGroupClass,
+  fieldLabelClass,
+  fieldSeparatorClass,
+  fieldSeparatorContentClass,
+} from '../../../components/field.ts';
+import { inputClass } from '../../../components/input.ts';
+
+const APPLE = 'M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701';
+const GOOGLE = 'M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z';
+
+export function loginForm(opts: { class?: string } = {}) {
+  return html`
+    <div class=${cn('flex flex-col gap-6', opts.class)}>
+      <div class=${cardClass()} data-slot="card" data-size="default">
+        <div class=${cn(cardHeaderClass(), 'text-center')} data-slot="card-header">
+          <h1 class=${cn(cardTitleClass(), 'text-xl')} data-slot="card-title">Welcome back</h1>
+          <p class=${cardDescriptionClass()} data-slot="card-description">Login with your Apple or Google account</p>
+        </div>
+        <div class=${cardContentClass()} data-slot="card-content">
+          <form>
+            <div class=${fieldGroupClass()} data-slot="field-group">
+              <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+                <button class=${buttonClass({ variant: 'outline' })} data-slot="button" type="button">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d=${APPLE} fill="currentColor"></path></svg>
+                  Login with Apple
+                </button>
+                <button class=${buttonClass({ variant: 'outline' })} data-slot="button" type="button">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d=${GOOGLE} fill="currentColor"></path></svg>
+                  Login with Google
+                </button>
+              </div>
+              <div class=${cn(fieldSeparatorClass(), '*:data-[slot=field-separator-content]:bg-card')} data-slot="field-separator" role="none">
+                <span class=${fieldSeparatorContentClass()} data-slot="field-separator-content">Or continue with</span>
+              </div>
+              <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+                <label class=${fieldLabelClass()} data-slot="field-label" for="email">Email</label>
+                <input class=${inputClass()} data-slot="input" id="email" name="email" type="email" autocomplete="email" placeholder="m@example.com" required>
+              </div>
+              <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+                <div class="flex items-center">
+                  <label class=${fieldLabelClass()} data-slot="field-label" for="password">Password</label>
+                  <a href="#" class="ml-auto text-sm underline-offset-4 hover:underline">Forgot your password?</a>
+                </div>
+                <input class=${inputClass()} data-slot="input" id="password" name="password" type="password" autocomplete="current-password" required>
+              </div>
+              <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+                <button class=${buttonClass()} data-slot="button" type="submit">Login</button>
+                <p class=${cn(fieldDescriptionClass(), 'text-center')} data-slot="field-description">
+                  Don't have an account? <a href="/signup">Sign up</a>
+                </p>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+      <p class=${cn(fieldDescriptionClass(), 'px-6 text-center')} data-slot="field-description">
+        By clicking continue, you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.
+      </p>
+    </div>
+  `;
+}

package/packages/registry/blocks/login-03/page.ts

@@ -0,0 +1,28 @@
+/**
+ * The login-03 block's page: the brand above a login card, on a muted
+ * background.
+ *
+ * Installed by `npx @webjsdev/ui add login-03` at `app/login/page.ts`.
+ * Ported from shadcn/ui's login-03.
+ */
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import { loginForm } from './components/login-form.ts';
+
+export const metadata: Metadata = { title: 'Login' };
+
+export default function LoginPage() {
+  return html`
+    <div class="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
+      <div class="flex w-full max-w-sm flex-col gap-6">
+        <a href="/" class="flex items-center gap-2 self-center font-medium">
+          <div class="flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4" aria-hidden="true"><path d="M7 2h10"></path><path d="M5 6h14"></path><rect width="18" height="12" x="3" y="10" rx="2"></rect></svg>
+          </div>
+          Acme Inc.
+        </a>
+        ${loginForm()}
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/login-04/components/login-form.ts

@@ -0,0 +1,91 @@
+/**
+ * The login-04 form: a two column card, the email and password form with
+ * icon-only Apple, Google and Meta buttons on one side and an image on the
+ * other (hidden below `md`), and the terms line under the card. A fragment
+ * helper (a function returning an `html` template), so it renders on the
+ * server and ships no JavaScript. Ported from shadcn/ui's login-04.
+ *
+ * The `<form>` has no `action` yet. Bind a server action from a
+ * `'use server'` file (`<form action=${signIn}>`) before you ship it: the
+ * framework then supplies `method="post"`, and the no-JS post, the 422
+ * re-render with `fieldErrors` / `values`, and the 303 redirect all work.
+ * Until it is bound, the form submits as a GET back to the page with the
+ * typed values in the URL. The provider buttons are placeholders for your
+ * providers' sign-in links.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { buttonClass } from '../../../components/button.ts';
+import { cardClass, cardContentClass } from '../../../components/card.ts';
+import {
+  fieldClass,
+  fieldDescriptionClass,
+  fieldGroupClass,
+  fieldLabelClass,
+  fieldSeparatorClass,
+  fieldSeparatorContentClass,
+} from '../../../components/field.ts';
+import { inputClass } from '../../../components/input.ts';
+
+const APPLE = 'M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701';
+const GOOGLE = 'M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z';
+const META = 'M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z';
+
+export function loginForm(opts: { class?: string } = {}) {
+  return html`
+    <div class=${cn('flex flex-col gap-6', opts.class)}>
+      <div class=${cn(cardClass(), 'overflow-hidden p-0')} data-slot="card" data-size="default">
+        <div class=${cn(cardContentClass(), 'grid p-0 md:grid-cols-2')} data-slot="card-content">
+          <form class="p-6 md:p-8">
+            <div class=${fieldGroupClass()} data-slot="field-group">
+              <div class="flex flex-col items-center gap-2 text-center">
+                <h1 class="text-2xl font-bold">Welcome back</h1>
+                <p class="text-balance text-muted-foreground">Login to your Acme Inc account</p>
+              </div>
+              <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+                <label class=${fieldLabelClass()} data-slot="field-label" for="email">Email</label>
+                <input class=${inputClass()} data-slot="input" id="email" name="email" type="email" autocomplete="email" placeholder="m@example.com" required>
+              </div>
+              <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+                <div class="flex items-center">
+                  <label class=${fieldLabelClass()} data-slot="field-label" for="password">Password</label>
+                  <a href="#" class="ml-auto text-sm underline-offset-2 hover:underline">Forgot your password?</a>
+                </div>
+                <input class=${inputClass()} data-slot="input" id="password" name="password" type="password" autocomplete="current-password" required>
+              </div>
+              <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+                <button class=${buttonClass()} data-slot="button" type="submit">Login</button>
+              </div>
+              <div class=${cn(fieldSeparatorClass(), '*:data-[slot=field-separator-content]:bg-card')} data-slot="field-separator" role="none">
+                <span class=${fieldSeparatorContentClass()} data-slot="field-separator-content">Or continue with</span>
+              </div>
+              <div class=${cn(fieldClass(), 'grid grid-cols-3 gap-4')} data-slot="field" data-orientation="vertical">
+                <button class=${buttonClass({ variant: 'outline' })} data-slot="button" type="button">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d=${APPLE} fill="currentColor"></path></svg>
+                  <span class="sr-only">Login with Apple</span>
+                </button>
+                <button class=${buttonClass({ variant: 'outline' })} data-slot="button" type="button">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d=${GOOGLE} fill="currentColor"></path></svg>
+                  <span class="sr-only">Login with Google</span>
+                </button>
+                <button class=${buttonClass({ variant: 'outline' })} data-slot="button" type="button">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d=${META} fill="currentColor"></path></svg>
+                  <span class="sr-only">Login with Meta</span>
+                </button>
+              </div>
+              <p class=${cn(fieldDescriptionClass(), 'text-center')} data-slot="field-description">
+                Don't have an account? <a href="/signup">Sign up</a>
+              </p>
+            </div>
+          </form>
+          <div class="relative hidden bg-muted md:block">
+            <img src="/public/placeholder.svg" alt="" class="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale">
+          </div>
+        </div>
+      </div>
+      <p class=${cn(fieldDescriptionClass(), 'px-6 text-center')} data-slot="field-description">
+        By clicking continue, you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.
+      </p>
+    </div>
+  `;
+}

package/packages/registry/blocks/login-04/page.ts

@@ -0,0 +1,20 @@
+/**
+ * The login-04 block's page: a wide login card with the form beside an
+ * image, on a muted background.
+ *
+ * Installed by `npx @webjsdev/ui add login-04` at `app/login/page.ts`, with
+ * the image at `public/placeholder.svg`. Ported from shadcn/ui's login-04.
+ */
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import { loginForm } from './components/login-form.ts';
+
+export const metadata: Metadata = { title: 'Login' };
+
+export default function LoginPage() {
+  return html`
+    <div class="flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10">
+      <div class="w-full max-w-sm md:max-w-4xl">${loginForm()}</div>
+    </div>
+  `;
+}

package/packages/registry/blocks/login-05/components/login-form.ts

@@ -0,0 +1,75 @@
+/**
+ * The login-05 form: the brand and a sign-up link above an email-only form,
+ * Apple and Google buttons under an "Or" separator, and the terms line. A
+ * fragment helper (a function returning an `html` template), so it renders
+ * on the server and ships no JavaScript. Ported from shadcn/ui's login-05.
+ *
+ * The `<form>` has no `action` yet. Bind a server action from a
+ * `'use server'` file (`<form action=${sendLoginLink}>`) before you ship it:
+ * the framework then supplies `method="post"`, and the no-JS post, the 422
+ * re-render with `fieldErrors` / `values`, and the 303 redirect all work.
+ * Until it is bound, the form submits as a GET back to the page with the
+ * typed email in the URL. The provider buttons are placeholders for your
+ * providers' sign-in links.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { buttonClass } from '../../../components/button.ts';
+import {
+  fieldClass,
+  fieldDescriptionClass,
+  fieldGroupClass,
+  fieldLabelClass,
+  fieldSeparatorClass,
+  fieldSeparatorContentClass,
+} from '../../../components/field.ts';
+import { inputClass } from '../../../components/input.ts';
+
+const APPLE = 'M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701';
+const GOOGLE = 'M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z';
+
+export function loginForm(opts: { class?: string } = {}) {
+  return html`
+    <div class=${cn('flex flex-col gap-6', opts.class)}>
+      <form>
+        <div class=${fieldGroupClass()} data-slot="field-group">
+          <div class="flex flex-col items-center gap-2 text-center">
+            <a href="/" class="flex flex-col items-center gap-2 font-medium">
+              <div class="flex size-8 items-center justify-center rounded-md">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-6" aria-hidden="true"><path d="M7 2h10"></path><path d="M5 6h14"></path><rect width="18" height="12" x="3" y="10" rx="2"></rect></svg>
+              </div>
+              <span class="sr-only">Acme Inc.</span>
+            </a>
+            <h1 class="text-xl font-bold">Welcome to Acme Inc.</h1>
+            <p class=${fieldDescriptionClass()} data-slot="field-description">
+              Don't have an account? <a href="/signup">Sign up</a>
+            </p>
+          </div>
+          <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+            <label class=${fieldLabelClass()} data-slot="field-label" for="email">Email</label>
+            <input class=${inputClass()} data-slot="input" id="email" name="email" type="email" autocomplete="email" placeholder="m@example.com" required>
+          </div>
+          <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+            <button class=${buttonClass()} data-slot="button" type="submit">Login</button>
+          </div>
+          <div class=${fieldSeparatorClass()} data-slot="field-separator" role="none">
+            <span class=${fieldSeparatorContentClass()} data-slot="field-separator-content">Or</span>
+          </div>
+          <div class=${cn(fieldClass(), 'grid gap-4 sm:grid-cols-2')} data-slot="field" data-orientation="vertical">
+            <button class=${buttonClass({ variant: 'outline' })} data-slot="button" type="button">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d=${APPLE} fill="currentColor"></path></svg>
+              Continue with Apple
+            </button>
+            <button class=${buttonClass({ variant: 'outline' })} data-slot="button" type="button">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d=${GOOGLE} fill="currentColor"></path></svg>
+              Continue with Google
+            </button>
+          </div>
+        </div>
+      </form>
+      <p class=${cn(fieldDescriptionClass(), 'px-6 text-center')} data-slot="field-description">
+        By clicking continue, you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.
+      </p>
+    </div>
+  `;
+}

package/packages/registry/blocks/login-05/page.ts

@@ -0,0 +1,19 @@
+/**
+ * The login-05 block's page: a simple email-only login, centred on the page.
+ *
+ * Installed by `npx @webjsdev/ui add login-05` at `app/login/page.ts`.
+ * Ported from shadcn/ui's login-05.
+ */
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import { loginForm } from './components/login-form.ts';
+
+export const metadata: Metadata = { title: 'Login' };
+
+export default function LoginPage() {
+  return html`
+    <div class="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
+      <div class="w-full max-w-sm">${loginForm()}</div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview/cards/activate-agent-dialog.ts

@@ -0,0 +1,77 @@
+/**
+ * The preview block's agent activation card: what the agent does, as a
+ * checked list, a trial-credit notice, and cancel and enable buttons. A
+ * fragment helper, rendered by the server. Installed by
+ * `npx @webjsdev/ui add preview` at `components/preview/activate-agent-dialog.ts`.
+ * Ported from shadcn/ui's preview block.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { alertClass, alertDescriptionClass } from '../../../components/alert.ts';
+import { badgeClass } from '../../../components/badge.ts';
+import { buttonClass } from '../../../components/button.ts';
+import {
+  cardClass,
+  cardContentClass,
+  cardDescriptionClass,
+  cardFooterClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import {
+  itemClass,
+  itemContentClass,
+  itemGroupClass,
+  itemMediaClass,
+  itemTitleClass,
+} from '../../../components/item.ts';
+import { CheckCircle2Icon } from '../../../lib/icons.ts';
+
+// What the agent does, one line each.
+const agentFeatures = () => [
+  html`<strong>Code reviews</strong> with full codebase context to catch <strong>hard-to-find</strong> bugs.`,
+  html`<strong>Code suggestions</strong> validated in sandboxes before you merge.`,
+  html`<strong>Root-cause analysis</strong> for production issues with deployment context.
+    <span data-slot="badge" data-variant="secondary" class=${cn(badgeClass({ variant: 'secondary' }), 'bg-chart-1 text-chart-5')}>Requires Observability Plus</span>`,
+];
+
+export function activateAgentDialog() {
+  return html`
+    <div data-slot="card" data-size="default" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Ship faster &amp; safer with Vercel Agent</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>
+          Your use is subject to Vercel's
+          <a href="#">Public Beta Agreement</a> and
+          <a href="#">AI Product Terms</a>.
+        </div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'flex flex-col gap-4')}>
+        <div role="list" data-slot="item-group" class=${cn(itemGroupClass(), 'gap-0')}>
+          ${agentFeatures().map((feature) => html`
+            <div role="listitem" data-slot="item" data-variant="default" data-size="xs" class=${cn(itemClass({ size: 'xs' }), 'px-0')}>
+              <div data-slot="item-media" data-variant="icon" class=${cn(itemMediaClass({ variant: 'icon' }), 'self-start')}>
+                ${CheckCircle2Icon('size-5 fill-primary text-primary-foreground')}
+              </div>
+              <div data-slot="item-content" class=${itemContentClass()}>
+                <div data-slot="item-title" class=${cn(itemTitleClass(), 'inline leading-relaxed font-normal text-muted-foreground *:[strong]:font-medium *:[strong]:text-foreground')}>
+                  ${feature}
+                </div>
+              </div>
+            </div>
+          `)}
+        </div>
+        <div role="status" data-slot="alert" data-variant="default" class=${alertClass()}>
+          <div data-slot="alert-description" class=${alertDescriptionClass()}>
+            Pro teams get $100 in Vercel Agent trial credit for 2 weeks after
+            activation.
+          </div>
+        </div>
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'justify-end gap-2')}>
+        <button type="button" data-slot="button" data-variant="outline" data-size="default" class=${cn(buttonClass({ variant: 'outline' }), 'style-sera:hidden')}>Cancel</button>
+        <button type="button" data-slot="button" data-variant="default" data-size="default" class=${cn(buttonClass(), 'style-sera:w-full')}>Enable with $100 credits</button>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview/cards/analytics-card.ts

@@ -0,0 +1,64 @@
+/**
+ * The preview block's analytics card: monthly visitors as an area chart under
+ * a headline figure. A fragment helper; the chart is the kit's `areaChart`,
+ * drawn by the server, with March's tooltip showing from the first paint.
+ * Installed by `npx @webjsdev/ui add preview` at
+ * `components/preview/analytics-card.ts`. Ported from shadcn/ui's preview
+ * block.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { badgeClass } from '../../../components/badge.ts';
+import { buttonClass } from '../../../components/button.ts';
+import {
+  cardActionClass,
+  cardClass,
+  cardDescriptionClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import { areaChart, type ChartConfig } from '../../../components/chart.ts';
+
+// Monthly visitor data for the area chart.
+const chartData = [
+  { month: 'January', visitors: 186 },
+  { month: 'February', visitors: 305 },
+  { month: 'March', visitors: 237 },
+  { month: 'April', visitors: 73 },
+  { month: 'May', visitors: 209 },
+  { month: 'June', visitors: 214 },
+];
+
+// Chart configuration for the visitors dataset.
+const chartConfig: ChartConfig = {
+  visitors: { label: 'Visitors', color: 'var(--chart-1)' },
+};
+
+export function analyticsCard() {
+  return html`
+    <div data-slot="card" data-size="sm" class=${cn(cardClass({ size: 'sm' }), 'mx-auto w-full max-w-sm data-[size=sm]:pb-0')}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Analytics</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>
+          418.2K Visitors <span data-slot="badge" data-variant="default" class=${badgeClass()}>+10%</span>
+        </div>
+        <div data-slot="card-action" class=${cardActionClass()}>
+          <button type="button" data-slot="button" data-variant="outline" data-size="sm" class=${buttonClass({ variant: 'outline', size: 'sm' })}>View Analytics</button>
+        </div>
+      </div>
+      ${areaChart({
+        config: chartConfig,
+        data: chartData,
+        class: 'aspect-[1/0.35]',
+        title: 'Visitors by month, January to June',
+        width: 384,
+        height: 134,
+        margin: { left: 0, right: 0 },
+        tooltip: { cursor: false, indicator: 'line', hideLabel: true, defaultIndex: 2 },
+        areas: [
+          { dataKey: 'visitors', type: 'linear', fill: 'var(--color-visitors)', fillOpacity: 0.4, stroke: 'var(--color-visitors)' },
+        ],
+      })}
+    </div>
+  `;
+}

package/packages/registry/blocks/preview/cards/anomaly-alert.ts

@@ -0,0 +1,35 @@
+/**
+ * The preview block's anomaly alert card: an empty state with an upgrade
+ * button. A fragment helper, rendered by the server. Installed by
+ * `npx @webjsdev/ui add preview` at `components/preview/anomaly-alert.ts`.
+ * Ported from shadcn/ui's preview block.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { buttonClass } from '../../../components/button.ts';
+import { cardClass, cardContentClass } from '../../../components/card.ts';
+import {
+  emptyClass,
+  emptyContentClass,
+  emptyDescriptionClass,
+  emptyHeaderClass,
+  emptyTitleClass,
+} from '../../../components/empty.ts';
+
+export function anomalyAlert() {
+  return html`
+    <div data-slot="card" data-size="default" class=${cardClass()}>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        <div data-slot="empty" class=${cn(emptyClass(), 'h-48')}>
+          <div data-slot="empty-header" class=${emptyHeaderClass()}>
+            <div data-slot="empty-title" class=${emptyTitleClass()}>Get alerted for anomalies</div>
+            <div data-slot="empty-description" class=${emptyDescriptionClass()}>Automatically monitor your projects for anomalies and get notified.</div>
+          </div>
+          <div data-slot="empty-content" class=${emptyContentClass()}>
+            <button type="button" data-slot="button" data-variant="default" data-size="default" class=${buttonClass()}>Upgrade to Observability Plus</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview/cards/bar-chart-card.ts

@@ -0,0 +1,91 @@
+/**
+ * The preview block's traffic card: desktop and mobile visitors by month as a
+ * bar chart with a legend, the two totals and their mix delta, and a report
+ * button. A fragment helper, rendered by the server, with the kit's chart
+ * (plain SVG; `<ui-chart>` adds the tooltip). Installed by
+ * `npx @webjsdev/ui add preview` at `components/preview/bar-chart-card.ts`.
+ * Ported from shadcn/ui's preview block.
+ *
+ * shadcn squares the bars off under the lyra and sera styles. A bar's corners
+ * are drawn into its SVG path, so CSS cannot square them: the card renders the
+ * chart both ways and the `style-lyra:` / `style-sera:` variants show the
+ * square one, so a style switch repaints with no new render. Where those
+ * variants are not defined, the rounded chart shows.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { buttonClass } from '../../../components/button.ts';
+import {
+  cardClass,
+  cardContentClass,
+  cardDescriptionClass,
+  cardFooterClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import { barChart, type ChartConfig } from '../../../components/chart.ts';
+
+const barChartData = [
+  { month: 'January', desktop: 186, mobile: 80 },
+  { month: 'February', desktop: 305, mobile: 200 },
+  { month: 'March', desktop: 237, mobile: 120 },
+  { month: 'April', desktop: 73, mobile: 190 },
+  { month: 'May', desktop: 209, mobile: 130 },
+  { month: 'June', desktop: 214, mobile: 140 },
+];
+
+const barChartConfig: ChartConfig = {
+  desktop: { label: 'Desktop', color: 'var(--chart-1)' },
+  mobile: { label: 'Mobile', color: 'var(--chart-2)' },
+};
+
+export function barChartCard() {
+  const chart = (radius: number | number[]) => barChart({
+    config: barChartConfig,
+    data: barChartData,
+    // The legend overflows the plot a little, as Recharts' HTML legend does.
+    class: 'max-h-[180px] w-full [&_.ui-chart-legend-wrapper]:overflow-visible [&_.ui-chart-surface]:overflow-visible',
+    title: 'Desktop and mobile visitors by month',
+    margin: { left: 0, right: 0, top: 8, bottom: 0 },
+    grid: { vertical: false, strokeDasharray: '3 3' },
+    xAxis: { dataKey: 'month', tickLine: false, tickMargin: 8, axisLine: false, tickFormatter: (value) => String(value).slice(0, 3) },
+    tooltip: { cursor: false, indicator: 'dashed' },
+    legend: {},
+    bars: [
+      { dataKey: 'desktop', fill: 'var(--color-desktop)', radius },
+      { dataKey: 'mobile', fill: 'var(--color-mobile)', radius },
+    ],
+  });
+  const desktopTotal = barChartData.reduce((sum, item) => sum + item.desktop, 0);
+  const mobileTotal = barChartData.reduce((sum, item) => sum + item.mobile, 0);
+  const desktopDelta = Math.round(((desktopTotal - mobileTotal) / mobileTotal) * 100);
+  const stat = (label: string, value: string) => html`
+    <div class="px-2 text-center">
+      <div class="text-[0.65rem] text-muted-foreground uppercase">${label}</div>
+      <div class="text-sm font-medium tabular-nums">${value}</div>
+    </div>
+  `;
+  return html`
+    <div data-slot="card" data-size="default" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cn(cardTitleClass(), 'text-lg')}>Traffic channels</div>
+        <div data-slot="card-description" class=${cn(cardDescriptionClass(), 'line-clamp-2 text-sm leading-snug')}>
+          Monthly desktop and mobile traffic for the last six months. Compare
+          volume and mix across platforms and devices at a glance.
+        </div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'flex flex-col gap-4 pt-0')}>
+        <div class="contents style-lyra:hidden style-sera:hidden">${chart([6, 6, 0, 0])}</div>
+        <div class="hidden style-lyra:contents style-sera:contents">${chart(0)}</div>
+        <div class="grid w-full grid-cols-3 divide-x divide-border/60">
+          ${stat('Desktop', desktopTotal.toLocaleString('en-US'))}
+          ${stat('Mobile', mobileTotal.toLocaleString('en-US'))}
+          ${stat('Mix Delta', `${desktopDelta > 0 ? '+' : ''}${desktopDelta}%`)}
+        </div>
+      </div>
+      <div data-slot="card-footer" class=${cardFooterClass()}>
+        <button type="button" data-slot="button" data-variant="default" data-size="default" class=${cn(buttonClass(), 'w-full')}>View report</button>
+      </div>
+    </div>
+  `;
+}