@olwiba/ui 0.2.25 → 0.2.26

package/site/demos/billing-panel.tsx

@@ -0,0 +1,26 @@
+'use client';
+import { BillingPanel } from '@olwiba/ui';
+
+export default function Demo() {
+  return (
+    <div className="mx-auto max-w-2xl p-8">
+      <BillingPanel
+        planName="Nexus Pro"
+        planPrice="$29/mo"
+        renewalDate="March 12, 2026"
+        usage={[
+          { label: 'Seats', used: 6, limit: 10 },
+          { label: 'Storage', used: 42, limit: 100, unit: 'GB' },
+        ]}
+        paymentMethod={{ brand: 'Visa', last4: '4242', expiry: '08/27' }}
+        invoices={[
+          { id: 'inv_1', date: 'Feb 12, 2026', amount: '$29.00', status: 'paid', downloadUrl: '#' },
+          { id: 'inv_2', date: 'Jan 12, 2026', amount: '$29.00', status: 'paid', downloadUrl: '#' },
+          { id: 'inv_3', date: 'Dec 12, 2025', amount: '$29.00', status: 'void' },
+        ]}
+        onManagePlan={() => {}}
+        onUpdatePaymentMethod={() => {}}
+      />
+    </div>
+  );
+}

package/site/demos/carousel.tsx

@@ -0,0 +1,34 @@
+'use client';
+import { Carousel, FeatureCard, ImageCard } from '@olwiba/ui';
+import { Blocks, Layers, Palette, Rocket, ShieldCheck, Zap } from 'lucide-react';
+
+const features = [
+  { icon: Blocks, title: 'Composable blocks', description: 'App-level sections that snap together into full pages.' },
+  { icon: Palette, title: 'Mode-aware', description: 'Default, playful, and smooth looks from one prop.' },
+  { icon: Zap, title: 'Fast by default', description: 'Scroll-snap and CSS transitions — no heavy dependencies.' },
+  { icon: ShieldCheck, title: 'Type-safe', description: 'Every block ships complete TypeScript types.' },
+  { icon: Layers, title: 'Layered system', description: 'Primitives, blocks, and pages that build on each other.' },
+  { icon: Rocket, title: 'Ship faster', description: 'Assemble a SaaS app from ready-made pieces.' },
+];
+
+export default function Demo() {
+  return (
+    <div className="mx-auto max-w-4xl space-y-10 p-8">
+      <Carousel ariaLabel="Platform features">
+        {features.map((f) => (
+          <FeatureCard key={f.title} icon={f.icon} title={f.title} description={f.description} />
+        ))}
+      </Carousel>
+
+      <Carousel ariaLabel="Screenshots" itemClassName="w-[220px]">
+        {[1, 2, 3, 4, 5].map((n) => (
+          <ImageCard
+            key={n}
+            src={`https://picsum.photos/seed/carousel-${n}/440/280`}
+            alt={`Screenshot ${n}`}
+          />
+        ))}
+      </Carousel>
+    </div>
+  );
+}

package/site/demos/chart.tsx

@@ -0,0 +1,55 @@
+'use client';
+import { Chart } from '@olwiba/ui';
+
+const revenue = [
+  { month: 'Jan', mrr: 4200, costs: 2800 },
+  { month: 'Feb', mrr: 4900, costs: 2900 },
+  { month: 'Mar', mrr: 5600, costs: 3100 },
+  { month: 'Apr', mrr: 5400, costs: 3300 },
+  { month: 'May', mrr: 6800, costs: 3400 },
+  { month: 'Jun', mrr: 7900, costs: 3600 },
+];
+
+const signups = [
+  { week: 'W1', count: 132 },
+  { week: 'W2', count: 187 },
+  { week: 'W3', count: 156 },
+  { week: 'W4', count: 231 },
+];
+
+const plans = [
+  { plan: 'Free', users: 1240 },
+  { plan: 'Pro', users: 480 },
+  { plan: 'Team', users: 190 },
+  { plan: 'Enterprise', users: 36 },
+];
+
+export default function Demo() {
+  return (
+    <div className="mx-auto grid max-w-4xl gap-10 p-8">
+      <div>
+        <p className="mb-3 text-sm font-medium">Revenue vs costs</p>
+        <Chart
+          type="line"
+          data={revenue}
+          xKey="month"
+          series={[
+            { key: 'mrr', label: 'MRR' },
+            { key: 'costs', label: 'Costs' },
+          ]}
+          valueFormatter={(v) => `$${v.toLocaleString()}`}
+        />
+      </div>
+      <div className="grid gap-10 sm:grid-cols-2">
+        <div>
+          <p className="mb-3 text-sm font-medium">Weekly signups</p>
+          <Chart type="bar" data={signups} xKey="week" series={[{ key: 'count', label: 'Signups' }]} height={220} />
+        </div>
+        <div>
+          <p className="mb-3 text-sm font-medium">Users by plan</p>
+          <Chart type="donut" data={plans} xKey="plan" series={[{ key: 'users' }]} height={220} />
+        </div>
+      </div>
+    </div>
+  );
+}

package/site/demos/command-menu.tsx

@@ -0,0 +1,39 @@
+'use client';
+import * as React from 'react';
+import { CommandMenu } from '@olwiba/ui';
+import { Button } from '@olwiba/cn';
+import { CreditCard, LayoutDashboard, Settings, UserPlus } from 'lucide-react';
+
+export default function Demo() {
+  const [open, setOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState<string | null>(null);
+
+  return (
+    <div className="flex flex-col items-center gap-4 p-8">
+      <Button variant="outline" onClick={() => setOpen(true)}>
+        Search… <span className="ml-2 text-xs text-muted-foreground">⌘K</span>
+      </Button>
+      {selected && <p className="text-sm text-muted-foreground">Selected: <strong>{selected}</strong></p>}
+      <CommandMenu
+        open={open}
+        onOpenChange={setOpen}
+        groups={[
+          {
+            heading: 'Navigate',
+            items: [
+              { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard, onSelect: () => setSelected('Dashboard') },
+              { id: 'billing', label: 'Billing', icon: CreditCard, onSelect: () => setSelected('Billing') },
+              { id: 'settings', label: 'Settings', icon: Settings, onSelect: () => setSelected('Settings') },
+            ],
+          },
+          {
+            heading: 'Actions',
+            items: [
+              { id: 'invite', label: 'Invite teammate', icon: UserPlus, shortcut: '⌘I', onSelect: () => setSelected('Invite teammate') },
+            ],
+          },
+        ]}
+      />
+    </div>
+  );
+}

package/site/demos/confirm-dialog.tsx

@@ -0,0 +1,27 @@
+'use client';
+import * as React from 'react';
+import { ConfirmDialog, useConfirm } from '@olwiba/ui';
+import { Button } from '@olwiba/cn';
+
+export default function Demo() {
+  const { confirm, isOpen, options, handleConfirm, handleCancel } = useConfirm();
+  const [result, setResult] = React.useState<string | null>(null);
+
+  async function handleDelete() {
+    const ok = await confirm({
+      title: 'Delete project?',
+      description: 'This action cannot be undone. All data will be permanently removed.',
+      confirmLabel: 'Delete',
+      cancelLabel: 'Keep it',
+    });
+    setResult(ok ? 'Deleted' : 'Cancelled');
+  }
+
+  return (
+    <div className="flex flex-col items-center gap-4 p-8">
+      <Button variant="destructive" onClick={handleDelete}>Delete project</Button>
+      {result && <p className="text-sm text-muted-foreground">Result: <strong>{result}</strong></p>}
+      <ConfirmDialog isOpen={isOpen} options={options} handleConfirm={handleConfirm} handleCancel={handleCancel} destructive />
+    </div>
+  );
+}

package/site/demos/contact-form-block.tsx

@@ -0,0 +1,3 @@
+export default function Demo() {
+  return <div className="p-8 text-muted-foreground text-sm">ContactFormBlock — coming soon</div>;
+}

package/site/demos/contact-section.tsx

@@ -0,0 +1,2 @@
+import { ContactSection } from '@olwiba/ui';
+export default function Demo() { return <ContactSection />; }

package/site/demos/context-menu.tsx

@@ -0,0 +1,30 @@
+'use client';
+import { ContextMenu } from '@olwiba/ui';
+import type { ContextMenuDef } from '@olwiba/ui';
+
+const items: ContextMenuDef[] = [
+  { type: 'item', label: 'Open', shortcut: '↵' },
+  { type: 'item', label: 'Open in new tab', shortcut: '⌘↵' },
+  { type: 'separator' },
+  { type: 'item', label: 'Rename', shortcut: 'F2' },
+  { type: 'item', label: 'Duplicate', shortcut: '⌘D' },
+  { type: 'separator' },
+  { type: 'sub', label: 'Share', items: [
+    { type: 'item', label: 'Copy link' },
+    { type: 'item', label: 'Email...' },
+  ]},
+  { type: 'separator' },
+  { type: 'item', label: 'Delete', shortcut: '⌫' },
+];
+
+export default function Demo() {
+  return (
+    <div className="flex items-center justify-center p-8">
+      <ContextMenu items={items}>
+        <div className="flex h-32 w-64 cursor-context-menu select-none items-center justify-center rounded-xl border border-dashed text-sm text-muted-foreground">
+          Right-click here
+        </div>
+      </ContextMenu>
+    </div>
+  );
+}

package/site/demos/count-up.tsx

@@ -0,0 +1,23 @@
+'use client';
+import { CountUp } from '@olwiba/ui';
+
+const stats = [
+  { to: 12400, prefix: '£', suffix: '', decimals: 0, label: 'Revenue' },
+  { to: 98.6, prefix: '', suffix: '%', decimals: 1, label: 'Uptime' },
+  { to: 3200, prefix: '', suffix: '+', decimals: 0, label: 'Users' },
+];
+
+export default function Demo() {
+  return (
+    <div className="grid grid-cols-3 gap-4 p-8 text-center">
+      {stats.map(({ to, prefix, suffix, decimals, label }) => (
+        <div key={label} className="rounded-2xl border bg-card p-6">
+          <div className="text-3xl font-bold tabular-nums">
+            <CountUp to={to} prefix={prefix} suffix={suffix} decimals={decimals} duration={1800} />
+          </div>
+          <div className="mt-1 text-sm text-muted-foreground">{label}</div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/site/demos/cta-section.tsx

@@ -0,0 +1,6 @@
+import { CtaSection } from '@olwiba/ui';
+import { demoCta } from './marketing-demo-data';
+
+export default function Demo() {
+  return <CtaSection {...demoCta} />;
+}

package/site/demos/dashboard-overview-block.tsx

@@ -0,0 +1,9 @@
+import { AppShell } from '@olwiba/ui';
+
+export default function DashboardOverviewBlockDemo() {
+  return (
+    <div className="w-full max-w-6xl">
+      <AppShell />
+    </div>
+  );
+}

package/site/demos/dashboard-shell-block.tsx

@@ -0,0 +1,10 @@
+import { AppShell } from '@olwiba/ui';
+
+export default function DashboardShellBlockDemo() {
+  return (
+    <div className="h-full min-h-0 w-full max-w-[1400px]">
+      {/* contained: rail is absolute within this shell; provider uses layout=embedded + sandbox height */}
+      <AppShell sidebarPosition="contained" />
+    </div>
+  );
+}

package/site/demos/data-table.tsx

@@ -0,0 +1,47 @@
+'use client';
+import * as React from 'react';
+import type { ColumnDef } from '@tanstack/react-table';
+import { DataTable } from '@olwiba/ui';
+import { Badge, Button } from '@olwiba/cn';
+
+interface Project {
+  id: string;
+  name: string;
+  status: 'live' | 'building' | 'paused';
+  updatedAt: string;
+}
+
+const projects: Project[] = [
+  { id: '1', name: 'nexus-genesis', status: 'live', updatedAt: '2h ago' },
+  { id: '2', name: 'kiwiana-storefront', status: 'building', updatedAt: '5h ago' },
+  { id: '3', name: 'olwiba-docs', status: 'live', updatedAt: '1d ago' },
+  { id: '4', name: 'genesis-render', status: 'paused', updatedAt: '3d ago' },
+  { id: '5', name: 'nexus-sync', status: 'live', updatedAt: '4d ago' },
+];
+
+const statusVariant = { live: 'secondary', building: 'outline', paused: 'destructive' } as const;
+
+const columns: ColumnDef<Project>[] = [
+  { accessorKey: 'name', header: 'Project' },
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    cell: ({ row }) => <Badge variant={statusVariant[row.original.status]} className="capitalize">{row.original.status}</Badge>,
+  },
+  { accessorKey: 'updatedAt', header: 'Updated' },
+];
+
+export default function Demo() {
+  return (
+    <div className="p-8">
+      <DataTable
+        columns={columns}
+        data={projects}
+        searchKey="name"
+        searchPlaceholder="Search projects…"
+        toolbar={<Button size="sm">New project</Button>}
+        pageSize={3}
+      />
+    </div>
+  );
+}

package/site/demos/demo-brand.tsx

@@ -0,0 +1,23 @@
+import { Orbit } from 'lucide-react';
+
+/**
+ * The brand lockup shared by the Navbar and AppShell demos.
+ *
+ * One definition rather than two copies, because the whole point of showing it
+ * in both places is that they agree — a badge whose radius or size drifted
+ * between the two previews would be demonstrating the opposite.
+ *
+ * `rounded-lg` matches AppShell's own fallback badge, so a product that passes
+ * no logo lands on the same silhouette as one that does. Orbit is radially
+ * balanced, so it has no optical top or bottom to fight the badge's centring.
+ */
+export const demoBrandLogo = (
+  <span
+    aria-hidden="true"
+    className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground"
+  >
+    <Orbit className="size-5" />
+  </span>
+);
+
+export const demoBrandName = 'nexus';

package/site/demos/dock.tsx

@@ -0,0 +1,20 @@
+'use client';
+import { Dock } from '@olwiba/ui';
+import { Bell, Home, Layers, Search, Settings, User } from 'lucide-react';
+
+const items = [
+  { icon: Home, label: 'Home', onClick: () => {} },
+  { icon: Search, label: 'Search', onClick: () => {} },
+  { icon: Layers, label: 'Projects', onClick: () => {} },
+  { icon: Bell, label: 'Notifications', onClick: () => {} },
+  { icon: User, label: 'Profile', onClick: () => {} },
+  { icon: Settings, label: 'Settings', onClick: () => {} },
+];
+
+export default function Demo() {
+  return (
+    <div className="flex min-h-64 items-end justify-center rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 pb-8">
+      <Dock items={items} />
+    </div>
+  );
+}

package/site/demos/document-sidebar-block.tsx

@@ -0,0 +1,9 @@
+import { AppShell } from '@olwiba/ui';
+
+export default function DocumentSidebarBlockDemo() {
+  return (
+    <div className="w-full max-w-7xl">
+      <AppShell />
+    </div>
+  );
+}

package/site/demos/email-examples.tsx

@@ -0,0 +1,58 @@
+import type { ReactElement } from 'react';
+import {
+  ActionEmail,
+  EmailLayout,
+  EmailLinkFallback,
+  NoticeEmail,
+} from '@olwiba/ui/email';
+
+/**
+ * The examples shown on the email documentation pages.
+ *
+ * Kept in one module because they are rendered twice from different runtimes:
+ * `scripts/generate-email-previews.ts` renders them to HTML in Node, and the
+ * pages display that HTML. Defining them beside the demo that shows them would
+ * mean the generator importing a component that renders an iframe of itself.
+ *
+ * Emails cannot be previewed the way other blocks are. `EmailLayout` renders
+ * `<html>`, `<head>` and `<body>`, so mounting one inside the sandbox's iframe
+ * root nests a document inside a `div` — React tolerates it on the server and
+ * hydration dies on the client. Rendering to HTML sidesteps that and is more
+ * honest anyway: the page shows the markup that actually gets sent.
+ */
+export const emailExamples: Record<string, ReactElement> = {
+  'action-email': (
+    <ActionEmail
+      appName="Nexus Inc"
+      preview="Sign in to Nexus Inc"
+      heading="Sign in with one click"
+      description="You asked to sign in to Nexus Inc. This link expires in 15 minutes and can only be used once."
+      actionLabel="Sign in"
+      actionUrl="https://nexus.example/auth/magic?token=kowhai"
+    />
+  ),
+
+  'notice-email': (
+    <NoticeEmail
+      appName="Nexus Inc"
+      preview="Your export is ready"
+      heading="Your export is ready"
+      body="The Pōhutukawa workspace export you requested has finished. It stays available for seven days, then it is deleted."
+    />
+  ),
+
+  'email-layout': (
+    <EmailLayout appName="Nexus Inc" preview="A message from Nexus Inc">
+      <EmailLinkFallback
+        actionUrl="https://nexus.example/workspaces/paua"
+        label="Everything inside the shell is yours. This is one block placed in it:"
+      />
+    </EmailLayout>
+  ),
+
+  'email-link-fallback': (
+    <EmailLayout appName="Nexus Inc" preview="Sign in to Nexus Inc">
+      <EmailLinkFallback actionUrl="https://nexus.example/auth/magic?token=kowhai" />
+    </EmailLayout>
+  ),
+};

package/site/demos/email-frame.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import * as React from 'react';
+import { emailPreviews } from './email-previews.generated';
+
+/**
+ * Shows a rendered email the way a mail client would.
+ *
+ * The iframe is not decoration. Email HTML carries its own `<html>`, `<body>`
+ * and inline styles, so dropping it into the page would both produce invalid
+ * markup and let the documentation site's stylesheet reach into a message that
+ * will never see it. A separate document is the only honest frame.
+ *
+ * `sandbox` is set without `allow-scripts`: this is untrusted-shaped content
+ * being displayed, and nothing in an email should be executing anyway.
+ */
+export function EmailFrame({ id }: { id: string }) {
+  const html = emailPreviews[id];
+  const ref = React.useRef<HTMLIFrameElement | null>(null);
+  const [height, setHeight] = React.useState(420);
+
+  // Emails size themselves, so the frame follows the content rather than
+  // imposing a height that would either clip the message or pad it.
+  const measure = React.useCallback(() => {
+    const doc = ref.current?.contentDocument;
+    if (!doc?.body) return;
+    const next = Math.ceil(doc.documentElement.scrollHeight || doc.body.scrollHeight);
+    if (next > 0) setHeight(next);
+  }, []);
+
+  if (!html) {
+    return (
+      <div className="text-muted-foreground p-6 text-sm">
+        No rendered preview for <code>{id}</code>. Run <code>bun run email:generate</code>.
+      </div>
+    );
+  }
+
+  return (
+    <iframe
+      ref={ref}
+      title={`${id} email preview`}
+      srcDoc={html}
+      onLoad={measure}
+      sandbox="allow-same-origin"
+      className="w-full border-0 bg-white"
+      style={{ height }}
+    />
+  );
+}

package/site/demos/email-layout.tsx

@@ -0,0 +1,6 @@
+'use client';
+import { EmailFrame } from './email-frame';
+
+export default function Demo() {
+  return <EmailFrame id="email-layout" />;
+}

package/site/demos/email-link-fallback.tsx

@@ -0,0 +1,6 @@
+'use client';
+import { EmailFrame } from './email-frame';
+
+export default function Demo() {
+  return <EmailFrame id="email-link-fallback" />;
+}

package/site/demos/email-previews.generated.ts

@@ -0,0 +1,11 @@
+// @generated by scripts/generate-email-previews.ts. DO NOT EDIT.
+//
+// Email examples rendered to the HTML a mail client receives. Regenerated by
+// `bun run email:generate`; edit site/demos/email-examples.tsx instead.
+
+export const emailPreviews: Record<string, string> = {
+  "action-email": "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n<html dir=\"ltr\" lang=\"en\">\n  <head>\n    <meta content=\"text/html; charset=UTF-8\" http-equiv=\"Content-Type\" />\n    <meta name=\"x-apple-disable-message-reformatting\" />\n  </head>\n  <body\n    style='background-color:#f4f4f5;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;margin:0;padding:24px 0'>\n    <!--$--><!--html--><!--head-->\n    <div\n      style=\"display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0\">\n      Sign in to Nexus Inc\n      <div>\n         ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏\n      </div>\n    </div>\n    <!--body-->\n    <table\n      align=\"center\"\n      width=\"100%\"\n      border=\"0\"\n      cellpadding=\"0\"\n      cellspacing=\"0\"\n      role=\"presentation\"\n      style=\"max-width:560px;margin:0 auto;background-color:#ffffff;border-radius:16px;overflow:hidden;border:1px solid #e4e4e7\">\n      <tbody>\n        <tr style=\"width:100%\">\n          <td>\n            <table\n              align=\"center\"\n              width=\"100%\"\n              border=\"0\"\n              cellpadding=\"0\"\n              cellspacing=\"0\"\n              role=\"presentation\"\n              style=\"padding:24px 32px;border-bottom:1px solid #e4e4e7\">\n              <tbody>\n                <tr>\n                  <td>\n                    <p\n                      style=\"font-size:18px;line-height:24px;margin:0;color:#10b981;font-weight:600\">\n                      Nexus Inc\n                    </p>\n                  </td>\n                </tr>\n              </tbody>\n            </table>\n            <table\n              align=\"center\"\n              width=\"100%\"\n              border=\"0\"\n              cellpadding=\"0\"\n              cellspacing=\"0\"\n              role=\"presentation\"\n              style=\"padding:32px\">\n              <tbody>\n                <tr>\n                  <td>\n                    <h1\n                      style=\"margin:0 0 12px;font-size:24px;font-weight:600;line-height:32px;color:#18181b\">\n                      Sign in with one click\n                    </h1>\n                    <p\n                      style=\"font-size:15px;line-height:24px;margin:0 0 24px;color:#71717a\">\n                      You asked to sign in to Nexus Inc. This link expires in 15\n                      minutes and can only be used once.\n                    </p>\n                    <a\n                      href=\"https://nexus.example/auth/magic?token=kowhai\"\n                      style=\"line-height:1;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;background-color:#10b981;border-radius:8px;color:#ffffff;font-size:14px;font-weight:600;padding:12px 20px 12px 20px;text-align:center\"\n                      target=\"_blank\"\n                      ><span\n                        ><!--[if mso]><i style=\"mso-font-width:500%;mso-text-raise:18\" hidden>&#8202;&#8202;</i><![endif]--></span\n                      ><span\n                        style=\"max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:9px\"\n                        >Sign in</span\n                      ><span\n                        ><!--[if mso]><i style=\"mso-font-width:500%\" hidden>&#8202;&#8202;&#8203;</i><![endif]--></span\n                      ></a\n                    >\n                    <p\n                      style=\"font-size:13px;line-height:20px;margin:24px 0 8px;color:#71717a\">\n                      Or copy and paste this link into your browser:\n                    </p>\n                    <p\n                      style=\"font-size:15px;line-height:24px;margin:0;color:#18181b\">\n                      <a\n                        href=\"https://nexus.example/auth/magic?token=kowhai\"\n                        style=\"color:#10b981;text-decoration-line:none;word-break:break-all\"\n                        target=\"_blank\"\n                        >https://nexus.example/auth/magic?token=kowhai</a\n                      >\n                    </p>\n                  </td>\n                </tr>\n              </tbody>\n            </table>\n            <table\n              align=\"center\"\n              width=\"100%\"\n              border=\"0\"\n              cellpadding=\"0\"\n              cellspacing=\"0\"\n              role=\"presentation\"\n              style=\"padding:20px 32px;border-top:1px solid #e4e4e7;background-color:#fafafa\">\n              <tbody>\n                <tr>\n                  <td>\n                    <p\n                      style=\"font-size:13px;line-height:20px;margin:0;color:#71717a;text-align:center\">\n                      ©\n                      <!-- -->2026<!-- -->\n                      <!-- -->Nexus Inc<!-- -->. All rights reserved.\n                    </p>\n                  </td>\n                </tr>\n              </tbody>\n            </table>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n    <!--/$-->\n  </body>\n</html>\n",
+  "notice-email": "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n<html dir=\"ltr\" lang=\"en\">\n  <head>\n    <meta content=\"text/html; charset=UTF-8\" http-equiv=\"Content-Type\" />\n    <meta name=\"x-apple-disable-message-reformatting\" />\n  </head>\n  <body\n    style='background-color:#f4f4f5;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;margin:0;padding:24px 0'>\n    <!--$--><!--html--><!--head-->\n    <div\n      style=\"display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0\">\n      Your export is ready\n      <div>\n         ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏\n      </div>\n    </div>\n    <!--body-->\n    <table\n      align=\"center\"\n      width=\"100%\"\n      border=\"0\"\n      cellpadding=\"0\"\n      cellspacing=\"0\"\n      role=\"presentation\"\n      style=\"max-width:560px;margin:0 auto;background-color:#ffffff;border-radius:16px;overflow:hidden;border:1px solid #e4e4e7\">\n      <tbody>\n        <tr style=\"width:100%\">\n          <td>\n            <table\n              align=\"center\"\n              width=\"100%\"\n              border=\"0\"\n              cellpadding=\"0\"\n              cellspacing=\"0\"\n              role=\"presentation\"\n              style=\"padding:24px 32px;border-bottom:1px solid #e4e4e7\">\n              <tbody>\n                <tr>\n                  <td>\n                    <p\n                      style=\"font-size:18px;line-height:24px;margin:0;color:#10b981;font-weight:600\">\n                      Nexus Inc\n                    </p>\n                  </td>\n                </tr>\n              </tbody>\n            </table>\n            <table\n              align=\"center\"\n              width=\"100%\"\n              border=\"0\"\n              cellpadding=\"0\"\n              cellspacing=\"0\"\n              role=\"presentation\"\n              style=\"padding:32px\">\n              <tbody>\n                <tr>\n                  <td>\n                    <h1\n                      style=\"margin:0 0 12px;font-size:24px;font-weight:600;line-height:32px;color:#18181b\">\n                      Your export is ready\n                    </h1>\n                    <p\n                      style=\"font-size:15px;line-height:24px;margin:0;color:#71717a;white-space:pre-wrap\">\n                      The Pōhutukawa workspace export you requested has\n                      finished. It stays available for seven days, then it is\n                      deleted.\n                    </p>\n                  </td>\n                </tr>\n              </tbody>\n            </table>\n            <table\n              align=\"center\"\n              width=\"100%\"\n              border=\"0\"\n              cellpadding=\"0\"\n              cellspacing=\"0\"\n              role=\"presentation\"\n              style=\"padding:20px 32px;border-top:1px solid #e4e4e7;background-color:#fafafa\">\n              <tbody>\n                <tr>\n                  <td>\n                    <p\n                      style=\"font-size:13px;line-height:20px;margin:0;color:#71717a;text-align:center\">\n                      ©\n                      <!-- -->2026<!-- -->\n                      <!-- -->Nexus Inc<!-- -->. All rights reserved.\n                    </p>\n                  </td>\n                </tr>\n              </tbody>\n            </table>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n    <!--/$-->\n  </body>\n</html>\n",
+  "email-layout": "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n<html dir=\"ltr\" lang=\"en\">\n  <head>\n    <meta content=\"text/html; charset=UTF-8\" http-equiv=\"Content-Type\" />\n    <meta name=\"x-apple-disable-message-reformatting\" />\n  </head>\n  <body\n    style='background-color:#f4f4f5;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;margin:0;padding:24px 0'>\n    <!--$--><!--html--><!--head-->\n    <div\n      style=\"display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0\">\n      A message from Nexus Inc\n      <div>\n         ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏\n      </div>\n    </div>\n    <!--body-->\n    <table\n      align=\"center\"\n      width=\"100%\"\n      border=\"0\"\n      cellpadding=\"0\"\n      cellspacing=\"0\"\n      role=\"presentation\"\n      style=\"max-width:560px;margin:0 auto;background-color:#ffffff;border-radius:16px;overflow:hidden;border:1px solid #e4e4e7\">\n      <tbody>\n        <tr style=\"width:100%\">\n          <td>\n            <table\n              align=\"center\"\n              width=\"100%\"\n              border=\"0\"\n              cellpadding=\"0\"\n              cellspacing=\"0\"\n              role=\"presentation\"\n              style=\"padding:24px 32px;border-bottom:1px solid #e4e4e7\">\n              <tbody>\n                <tr>\n                  <td>\n                    <p\n                      style=\"font-size:18px;line-height:24px;margin:0;color:#10b981;font-weight:600\">\n                      Nexus Inc\n                    </p>\n                  </td>\n                </tr>\n              </tbody>\n            </table>\n            <table\n              align=\"center\"\n              width=\"100%\"\n              border=\"0\"\n              cellpadding=\"0\"\n              cellspacing=\"0\"\n              role=\"presentation\"\n              style=\"padding:32px\">\n              <tbody>\n                <tr>\n                  <td>\n                    <p\n                      style=\"font-size:13px;line-height:20px;margin:24px 0 8px;color:#71717a\">\n                      Everything inside the shell is yours. This is one block\n                      placed in it:\n                    </p>\n                    <p\n                      style=\"font-size:15px;line-height:24px;margin:0;color:#18181b\">\n                      <a\n                        href=\"https://nexus.example/workspaces/paua\"\n                        style=\"color:#10b981;text-decoration-line:none;word-break:break-all\"\n                        target=\"_blank\"\n                        >https://nexus.example/workspaces/paua</a\n                      >\n                    </p>\n                  </td>\n                </tr>\n              </tbody>\n            </table>\n            <table\n              align=\"center\"\n              width=\"100%\"\n              border=\"0\"\n              cellpadding=\"0\"\n              cellspacing=\"0\"\n              role=\"presentation\"\n              style=\"padding:20px 32px;border-top:1px solid #e4e4e7;background-color:#fafafa\">\n              <tbody>\n                <tr>\n                  <td>\n                    <p\n                      style=\"font-size:13px;line-height:20px;margin:0;color:#71717a;text-align:center\">\n                      ©\n                      <!-- -->2026<!-- -->\n                      <!-- -->Nexus Inc<!-- -->. All rights reserved.\n                    </p>\n                  </td>\n                </tr>\n              </tbody>\n            </table>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n    <!--/$-->\n  </body>\n</html>\n",
+  "email-link-fallback": "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n<html dir=\"ltr\" lang=\"en\">\n  <head>\n    <meta content=\"text/html; charset=UTF-8\" http-equiv=\"Content-Type\" />\n    <meta name=\"x-apple-disable-message-reformatting\" />\n  </head>\n  <body\n    style='background-color:#f4f4f5;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;margin:0;padding:24px 0'>\n    <!--$--><!--html--><!--head-->\n    <div\n      style=\"display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0\">\n      Sign in to Nexus Inc\n      <div>\n         ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏\n      </div>\n    </div>\n    <!--body-->\n    <table\n      align=\"center\"\n      width=\"100%\"\n      border=\"0\"\n      cellpadding=\"0\"\n      cellspacing=\"0\"\n      role=\"presentation\"\n      style=\"max-width:560px;margin:0 auto;background-color:#ffffff;border-radius:16px;overflow:hidden;border:1px solid #e4e4e7\">\n      <tbody>\n        <tr style=\"width:100%\">\n          <td>\n            <table\n              align=\"center\"\n              width=\"100%\"\n              border=\"0\"\n              cellpadding=\"0\"\n              cellspacing=\"0\"\n              role=\"presentation\"\n              style=\"padding:24px 32px;border-bottom:1px solid #e4e4e7\">\n              <tbody>\n                <tr>\n                  <td>\n                    <p\n                      style=\"font-size:18px;line-height:24px;margin:0;color:#10b981;font-weight:600\">\n                      Nexus Inc\n                    </p>\n                  </td>\n                </tr>\n              </tbody>\n            </table>\n            <table\n              align=\"center\"\n              width=\"100%\"\n              border=\"0\"\n              cellpadding=\"0\"\n              cellspacing=\"0\"\n              role=\"presentation\"\n              style=\"padding:32px\">\n              <tbody>\n                <tr>\n                  <td>\n                    <p\n                      style=\"font-size:13px;line-height:20px;margin:24px 0 8px;color:#71717a\">\n                      Or copy and paste this link into your browser:\n                    </p>\n                    <p\n                      style=\"font-size:15px;line-height:24px;margin:0;color:#18181b\">\n                      <a\n                        href=\"https://nexus.example/auth/magic?token=kowhai\"\n                        style=\"color:#10b981;text-decoration-line:none;word-break:break-all\"\n                        target=\"_blank\"\n                        >https://nexus.example/auth/magic?token=kowhai</a\n                      >\n                    </p>\n                  </td>\n                </tr>\n              </tbody>\n            </table>\n            <table\n              align=\"center\"\n              width=\"100%\"\n              border=\"0\"\n              cellpadding=\"0\"\n              cellspacing=\"0\"\n              role=\"presentation\"\n              style=\"padding:20px 32px;border-top:1px solid #e4e4e7;background-color:#fafafa\">\n              <tbody>\n                <tr>\n                  <td>\n                    <p\n                      style=\"font-size:13px;line-height:20px;margin:0;color:#71717a;text-align:center\">\n                      ©\n                      <!-- -->2026<!-- -->\n                      <!-- -->Nexus Inc<!-- -->. All rights reserved.\n                    </p>\n                  </td>\n                </tr>\n              </tbody>\n            </table>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n    <!--/$-->\n  </body>\n</html>\n"
+};

package/site/demos/empty-state-block.tsx

@@ -0,0 +1,3 @@
+export default function Demo() {
+  return <div className="p-8 text-muted-foreground text-sm">EmptyStateBlock — coming soon</div>;
+}

package/site/demos/empty-state.tsx

@@ -0,0 +1,23 @@
+import { EmptyState, Button } from '@olwiba/ui';
+import { FolderOpen } from 'lucide-react';
+
+export default function EmptyStateDemo() {
+  return (
+    <div className="w-full max-w-lg">
+      <EmptyState
+        icon={FolderOpen}
+        title="No projects yet"
+        description="Create your first project to get started."
+        eyebrow="Your workspace"
+        variant="card"
+        compact
+        action={<Button size="sm">New project</Button>}
+        secondaryAction={
+          <Button size="sm" variant="ghost">
+            Learn more
+          </Button>
+        }
+      />
+    </div>
+  );
+}

package/site/demos/error-page.tsx

@@ -0,0 +1,5 @@
+import { ErrorPage } from '@olwiba/ui';
+
+export default function ErrorPageDemo() {
+  return <ErrorPage />;
+}

package/site/demos/fade-in.tsx

@@ -0,0 +1,18 @@
+'use client';
+import { FadeIn } from '@olwiba/ui';
+
+const directions = ['up', 'down', 'left', 'right'] as const;
+
+export default function Demo() {
+  return (
+    <div className="space-y-3 p-6">
+      {directions.map((dir, i) => (
+        <FadeIn key={dir} direction={dir} delay={i * 120}>
+          <div className="rounded-xl border bg-card p-4 text-sm">
+            Fade in from <strong>{dir}</strong>
+          </div>
+        </FadeIn>
+      ))}
+    </div>
+  );
+}