@rudderhq/server 0.7.2 → 0.7.4

package/resources/bundled-skills/app-builder/assets/scaffold/app/globals.css

@@ -1,32 +1,125 @@
 @import "tailwindcss";
 
+@custom-variant dark (&:is(.dark *));
+
 :root {
-  --background: #f8fafc;
-  --foreground: #172033;
-  --card: #ffffff;
-  --card-foreground: #172033;
-  --muted: #eef2f7;
-  --muted-foreground: #64748b;
-  --primary: #2563eb;
-  --primary-foreground: #ffffff;
-  --destructive: #dc2626;
-  --border: #dbe3ee;
-  --ring: #3b82f6;
-  --radius: 0.75rem;
+  color-scheme: light;
+  --background: oklch(0.975 0.008 80);
+  --foreground: oklch(0.22 0.012 75);
+  --card: oklch(0.992 0.004 80);
+  --card-foreground: oklch(0.22 0.012 75);
+  --popover: oklch(0.992 0.004 80);
+  --popover-foreground: oklch(0.22 0.012 75);
+  --primary: oklch(0.53 0.135 162);
+  --primary-foreground: oklch(0.985 0.01 160);
+  --secondary: oklch(0.94 0.009 78);
+  --secondary-foreground: oklch(0.29 0.012 75);
+  --muted: oklch(0.945 0.008 78);
+  --muted-foreground: oklch(0.52 0.014 75);
+  --accent: oklch(0.925 0.025 162);
+  --accent-foreground: oklch(0.32 0.08 162);
+  --destructive: oklch(0.56 0.2 27);
+  --destructive-foreground: oklch(0.985 0.005 27);
+  --border: oklch(0.875 0.01 75);
+  --input: oklch(0.875 0.01 75);
+  --ring: oklch(0.58 0.12 162);
+  --radius: 0.375rem;
 }
 
-* {
-  border-color: var(--border);
+.dark {
+  color-scheme: dark;
+  --background: oklch(0.18 0.012 75);
+  --foreground: oklch(0.93 0.008 75);
+  --card: oklch(0.215 0.012 75);
+  --card-foreground: oklch(0.93 0.008 75);
+  --popover: oklch(0.215 0.012 75);
+  --popover-foreground: oklch(0.93 0.008 75);
+  --primary: oklch(0.68 0.135 162);
+  --primary-foreground: oklch(0.17 0.03 162);
+  --secondary: oklch(0.27 0.012 75);
+  --secondary-foreground: oklch(0.91 0.008 75);
+  --muted: oklch(0.255 0.011 75);
+  --muted-foreground: oklch(0.69 0.012 75);
+  --accent: oklch(0.29 0.05 162);
+  --accent-foreground: oklch(0.88 0.06 162);
+  --destructive: oklch(0.66 0.18 27);
+  --destructive-foreground: oklch(0.98 0.005 27);
+  --border: oklch(0.34 0.012 75);
+  --input: oklch(0.34 0.012 75);
+  --ring: oklch(0.68 0.11 162);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    color-scheme: dark;
+    --background: oklch(0.18 0.012 75);
+    --foreground: oklch(0.93 0.008 75);
+    --card: oklch(0.215 0.012 75);
+    --card-foreground: oklch(0.93 0.008 75);
+    --popover: oklch(0.215 0.012 75);
+    --popover-foreground: oklch(0.93 0.008 75);
+    --primary: oklch(0.68 0.135 162);
+    --primary-foreground: oklch(0.17 0.03 162);
+    --secondary: oklch(0.27 0.012 75);
+    --secondary-foreground: oklch(0.91 0.008 75);
+    --muted: oklch(0.255 0.011 75);
+    --muted-foreground: oklch(0.69 0.012 75);
+    --accent: oklch(0.29 0.05 162);
+    --accent-foreground: oklch(0.88 0.06 162);
+    --destructive: oklch(0.66 0.18 27);
+    --destructive-foreground: oklch(0.98 0.005 27);
+    --border: oklch(0.34 0.012 75);
+    --input: oklch(0.34 0.012 75);
+    --ring: oklch(0.68 0.11 162);
+  }
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-sm: calc(var(--radius) - 2px);
+  --radius-md: var(--radius);
+  --radius-lg: calc(var(--radius) + 2px);
 }
 
 body {
   margin: 0;
+  min-width: 320px;
   background: var(--background);
   color: var(--foreground);
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  text-rendering: optimizeLegibility;
 }
 
 button,
-input {
-  font: inherit;
+input,
+select,
+textarea {
+  color: inherit;
+}
+
+* {
+  border-color: var(--border);
+}
+
+::selection {
+  background: var(--accent);
+  color: var(--accent-foreground);
 }

package/resources/bundled-skills/app-builder/assets/scaffold/components/contacts-workspace.tsx

@@ -1,10 +1,15 @@
 "use client";
 
+import { Alert } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty";
+import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Download, Plus, Search, Trash2, Upload } from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Download, Plus, Search, Trash2, Upload, UsersRound } from "lucide-react";
 import { FormEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 type Contact = {
@@ -25,6 +30,13 @@ type Draft = {
 
 const emptyDraft: Draft = { name: "", email: "", company: "" };
 
+const statusVariant: Record<Contact["status"], "secondary" | "outline" | "success"> = {
+  new: "secondary",
+  contacted: "outline",
+  replied: "success",
+  paused: "outline",
+};
+
 export function ContactsWorkspace() {
   const [contacts, setContacts] = useState<Contact[]>([]);
   const [draft, setDraft] = useState<Draft>(emptyDraft);
@@ -118,175 +130,187 @@ export function ContactsWorkspace() {
   }
 
   return (
-    <div className="mx-auto grid max-w-7xl gap-6 px-4 py-6 lg:grid-cols-[minmax(0,1fr)_22rem] lg:px-8">
-      <section className="min-w-0">
-        <header className="mb-5 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
-          <div>
-            <p className="mb-1 text-sm font-medium text-[var(--primary)]">Contacts</p>
-            <h1 className="m-0 text-2xl font-semibold tracking-tight">Customer workspace</h1>
-            <p className="mb-0 mt-2 text-sm text-[var(--muted-foreground)]">
-              Keep the next conversation visible and every record on this device.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <input
-              ref={importRef}
-              aria-label="Import app data"
-              className="sr-only"
-              type="file"
-              accept="application/json,.json"
-              onChange={(event) => {
-                const file = event.currentTarget.files?.[0];
-                if (file) void importData(file);
-              }}
-            />
-            <Button type="button" variant="outline" onClick={() => importRef.current?.click()}>
-              <Upload aria-hidden size={16} />
-              Import
-            </Button>
-            <Button asChild variant="outline">
-              <a href="/api/data/export" download>
-                <Download aria-hidden size={16} />
-                Export
-              </a>
-            </Button>
+    <div className="min-h-screen bg-background text-foreground">
+      <header className="border-b bg-card/80">
+        <div className="mx-auto flex h-14 max-w-7xl items-center justify-between px-4 lg:px-6">
+          <div className="flex min-w-0 items-center gap-3">
+            <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground">
+              <UsersRound aria-hidden className="size-4" />
+            </span>
+            <div className="min-w-0">
+              <p className="m-0 truncate text-sm font-semibold">Pipeline Desk</p>
+              <p className="m-0 text-xs text-muted-foreground">Local customer workspace</p>
+            </div>
           </div>
-        </header>
+          <Badge variant="outline">Development data</Badge>
+        </div>
+      </header>
 
-        <Card>
-          <CardHeader className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+      <main className="mx-auto grid max-w-7xl gap-4 px-4 py-5 lg:grid-cols-[minmax(0,1fr)_20rem] lg:px-6">
+        <section className="min-w-0">
+          <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
             <div>
-              <h2 className="m-0 text-base font-semibold">All contacts</h2>
-              <p className="mb-0 mt-1 text-sm text-[var(--muted-foreground)]">
-                {contacts.length} {contacts.length === 1 ? "record" : "records"}
+              <h1 className="m-0 text-2xl font-semibold">Contacts</h1>
+              <p className="mb-0 mt-1 text-sm text-muted-foreground">
+                Keep the next conversation visible and every record on this device.
               </p>
             </div>
-            <div className="relative w-full sm:w-72">
-              <Search
-                aria-hidden
-                className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[var(--muted-foreground)]"
-                size={16}
-              />
-              <Input
-                aria-label="Search contacts"
-                className="pl-9"
-                placeholder="Search name, email, company…"
-                value={query}
-                onChange={(event) => setQuery(event.target.value)}
+            <div className="flex flex-wrap gap-2">
+              <input
+                ref={importRef}
+                aria-label="Import app data"
+                className="sr-only"
+                type="file"
+                accept="application/json,.json"
+                onChange={(event) => {
+                  const file = event.currentTarget.files?.[0];
+                  if (file) void importData(file);
+                }}
               />
+              <Button type="button" variant="outline" onClick={() => importRef.current?.click()}>
+                <Upload aria-hidden data-icon="inline-start" />
+                Import
+              </Button>
+              <Button asChild variant="outline">
+                <a href="/api/data/export" download>
+                  <Download aria-hidden data-icon="inline-start" />
+                  Export
+                </a>
+              </Button>
             </div>
-          </CardHeader>
-          <div aria-live="polite">
-            {loading ? (
-              <p className="p-8 text-center text-sm text-[var(--muted-foreground)]">
-                Loading contacts…
-              </p>
-            ) : visibleContacts.length === 0 ? (
-              <div className="p-10 text-center">
-                <h3 className="m-0 text-base font-semibold">
-                  {contacts.length === 0 ? "No contacts yet" : "No matching contacts"}
-                </h3>
-                <p className="mb-0 mt-2 text-sm text-[var(--muted-foreground)]">
-                  {contacts.length === 0
-                    ? "Add the first contact with the form beside this list."
-                    : "Try a different name, email, company, or status."}
-                </p>
+          </div>
+
+          <Card>
+            <CardHeader className="sm:flex-row sm:items-center sm:justify-between">
+              <div>
+                <CardTitle>All contacts</CardTitle>
+                <CardDescription>{contacts.length} {contacts.length === 1 ? "record" : "records"}</CardDescription>
+              </div>
+              <div className="relative w-full sm:w-64">
+                <Search aria-hidden className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  aria-label="Search contacts"
+                  className="pl-9"
+                  placeholder="Search contacts"
+                  value={query}
+                  onChange={(event) => setQuery(event.target.value)}
+                />
               </div>
-            ) : (
-              <div className="overflow-x-auto">
-                <table className="w-full min-w-[42rem] border-collapse text-left text-sm">
-                  <thead className="bg-[var(--muted)] text-xs uppercase tracking-wide text-[var(--muted-foreground)]">
-                    <tr>
-                      <th className="px-5 py-3 font-medium" scope="col">Contact</th>
-                      <th className="px-5 py-3 font-medium" scope="col">Company</th>
-                      <th className="px-5 py-3 font-medium" scope="col">Status</th>
-                      <th className="px-5 py-3 text-right font-medium" scope="col">Actions</th>
-                    </tr>
-                  </thead>
-                  <tbody>
+            </CardHeader>
+            <div aria-live="polite">
+              {loading ? (
+                <div className="flex flex-col gap-3 p-4" aria-label="Loading contacts">
+                  {[0, 1, 2].map((item) => <Skeleton className="h-11 w-full" key={item} />)}
+                </div>
+              ) : visibleContacts.length === 0 ? (
+                <Empty>
+                  <EmptyHeader>
+                    <EmptyTitle>{contacts.length === 0 ? "No contacts yet" : "No matching contacts"}</EmptyTitle>
+                    <EmptyDescription>
+                      {contacts.length === 0
+                        ? "Add the first contact with the form beside this list."
+                        : "Try a different name, email, company, or status."}
+                    </EmptyDescription>
+                  </EmptyHeader>
+                </Empty>
+              ) : (
+                <Table className="table-fixed sm:min-w-[40rem] sm:table-auto">
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead scope="col">Contact</TableHead>
+                      <TableHead className="hidden sm:table-cell" scope="col">Company</TableHead>
+                      <TableHead className="w-20 sm:w-auto" scope="col">Status</TableHead>
+                      <TableHead aria-label="Actions" className="w-12 text-right sm:w-auto" scope="col">
+                        <span className="hidden sm:inline">Actions</span>
+                      </TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
                     {visibleContacts.map((contact) => (
-                      <tr className="border-t" key={contact.id}>
-                        <td className="px-5 py-4">
+                      <TableRow key={contact.id}>
+                        <TableCell>
                           <strong className="block font-medium">{contact.name}</strong>
-                          <span className="text-[var(--muted-foreground)]">{contact.email}</span>
-                        </td>
-                        <td className="px-5 py-4">{contact.company || "—"}</td>
-                        <td className="px-5 py-4">
-                          <span className="rounded-full bg-[var(--muted)] px-2.5 py-1 text-xs font-medium capitalize">
-                            {contact.status}
+                          <span className="block break-all text-muted-foreground sm:inline">{contact.email}</span>
+                          <span className="mt-1 block text-xs text-muted-foreground sm:hidden">
+                            {contact.company || "Company not set"}
                           </span>
-                        </td>
-                        <td className="px-5 py-4 text-right">
+                        </TableCell>
+                        <TableCell className="hidden sm:table-cell">{contact.company || "Not set"}</TableCell>
+                        <TableCell>
+                          <Badge variant={statusVariant[contact.status]}>{contact.status}</Badge>
+                        </TableCell>
+                        <TableCell className="text-right">
                           <Button
                             aria-label={`Delete ${contact.name}`}
-                            size="sm"
+                            size="icon-sm"
                             type="button"
                             variant="ghost"
                             onClick={() => void deleteContact(contact)}
                           >
-                            <Trash2 aria-hidden size={16} />
+                            <Trash2 aria-hidden />
                           </Button>
-                        </td>
-                      </tr>
+                        </TableCell>
+                      </TableRow>
                     ))}
-                  </tbody>
-                </table>
-              </div>
-            )}
-          </div>
-        </Card>
-      </section>
+                  </TableBody>
+                </Table>
+              )}
+            </div>
+          </Card>
+        </section>
 
-      <aside>
-        <Card>
-          <CardHeader>
-            <h2 className="m-0 flex items-center gap-2 text-base font-semibold">
-              <Plus aria-hidden size={18} />
-              Add contact
-            </h2>
-          </CardHeader>
-          <CardContent>
-            <form className="grid gap-4" onSubmit={(event) => void createContact(event)}>
-              <div className="grid gap-1.5">
-                <Label htmlFor="contact-name">Name</Label>
-                <Input
-                  id="contact-name"
-                  required
-                  autoComplete="name"
-                  value={draft.name}
-                  onChange={(event) => setDraft({ ...draft, name: event.target.value })}
-                />
-              </div>
-              <div className="grid gap-1.5">
-                <Label htmlFor="contact-email">Email</Label>
-                <Input
-                  id="contact-email"
-                  required
-                  autoComplete="email"
-                  type="email"
-                  value={draft.email}
-                  onChange={(event) => setDraft({ ...draft, email: event.target.value })}
-                />
-              </div>
-              <div className="grid gap-1.5">
-                <Label htmlFor="contact-company">Company</Label>
-                <Input
-                  id="contact-company"
-                  autoComplete="organization"
-                  value={draft.company}
-                  onChange={(event) => setDraft({ ...draft, company: event.target.value })}
-                />
-              </div>
-              {error ? (
-                <p className="m-0 text-sm text-[var(--destructive)]" role="alert">{error}</p>
-              ) : null}
-              <Button disabled={saving} type="submit">
-                {saving ? "Adding…" : "Add contact"}
-              </Button>
-            </form>
-          </CardContent>
-        </Card>
-      </aside>
+        <aside>
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Plus aria-hidden className="size-4" />
+                Add contact
+              </CardTitle>
+              <CardDescription>Create a development record.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <form onSubmit={(event) => void createContact(event)}>
+                <FieldGroup>
+                  <Field>
+                    <FieldLabel htmlFor="contact-name">Name</FieldLabel>
+                    <Input
+                      id="contact-name"
+                      required
+                      autoComplete="name"
+                      value={draft.name}
+                      onChange={(event) => setDraft({ ...draft, name: event.target.value })}
+                    />
+                  </Field>
+                  <Field>
+                    <FieldLabel htmlFor="contact-email">Email</FieldLabel>
+                    <Input
+                      id="contact-email"
+                      required
+                      autoComplete="email"
+                      type="email"
+                      value={draft.email}
+                      onChange={(event) => setDraft({ ...draft, email: event.target.value })}
+                    />
+                  </Field>
+                  <Field>
+                    <FieldLabel htmlFor="contact-company">Company</FieldLabel>
+                    <Input
+                      id="contact-company"
+                      autoComplete="organization"
+                      value={draft.company}
+                      onChange={(event) => setDraft({ ...draft, company: event.target.value })}
+                    />
+                  </Field>
+                  {error ? <Alert>{error}</Alert> : null}
+                  <Button disabled={saving} type="submit">
+                    {saving ? "Adding..." : "Add contact"}
+                  </Button>
+                </FieldGroup>
+              </form>
+            </CardContent>
+          </Card>
+        </aside>
+      </main>
     </div>
   );
 }

package/resources/bundled-skills/app-builder/assets/scaffold/components/ui/alert.tsx

@@ -0,0 +1,12 @@
+import { cn } from "@/lib/utils";
+import * as React from "react";
+
+export function Alert({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      role="alert"
+      className={cn("rounded-md border border-destructive/25 bg-destructive/10 px-3 py-2 text-sm text-destructive", className)}
+      {...props}
+    />
+  );
+}

package/resources/bundled-skills/app-builder/assets/scaffold/components/ui/badge.tsx

@@ -0,0 +1,27 @@
+import { cn } from "@/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-sm border px-1.5 py-0.5 text-xs font-medium",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        outline: "text-foreground",
+        success: "border-primary/20 bg-accent text-accent-foreground",
+        destructive: "border-destructive/20 bg-destructive/10 text-destructive",
+      },
+    },
+    defaultVariants: { variant: "secondary" },
+  },
+);
+
+export function Badge({
+  className,
+  variant,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof badgeVariants>) {
+  return <span className={cn(badgeVariants({ variant }), className)} {...props} />;
+}

package/resources/bundled-skills/app-builder/assets/scaffold/components/ui/button.tsx

@@ -4,18 +4,20 @@ import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
 const buttonVariants = cva(
-  "inline-flex min-h-10 items-center justify-center gap-2 rounded-lg px-4 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-foreground text-sm font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/60 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4",
   {
     variants: {
       variant: {
-        default: "bg-[var(--primary)] text-[var(--primary-foreground)] hover:brightness-95",
-        outline: "border bg-[var(--card)] hover:bg-[var(--muted)]",
-        ghost: "hover:bg-[var(--muted)]",
-        destructive: "bg-[var(--destructive)] text-white hover:brightness-95",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
       },
       size: {
-        default: "h-10",
-        sm: "h-9 px-3",
+        default: "h-9 px-3.5",
+        sm: "h-8 px-3 text-xs",
+        "icon-sm": "size-8",
       },
     },
     defaultVariants: {

package/resources/bundled-skills/app-builder/assets/scaffold/components/ui/card.tsx

@@ -4,16 +4,28 @@ import * as React from "react";
 export function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <section
-      className={cn("rounded-xl border bg-[var(--card)] text-[var(--card-foreground)] shadow-sm", className)}
+      className={cn("rounded-lg border bg-card text-card-foreground", className)}
       {...props}
     />
   );
 }
 
 export function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("border-b px-5 py-4", className)} {...props} />;
+  return <div className={cn("flex flex-col gap-1 border-b px-4 py-3", className)} {...props} />;
 }
 
 export function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("p-5", className)} {...props} />;
+  return <div className={cn("p-4", className)} {...props} />;
+}
+
+export function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return <h2 className={cn("m-0 text-base font-semibold", className)} {...props} />;
+}
+
+export function CardDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("m-0 text-sm text-muted-foreground", className)} {...props} />;
+}
+
+export function CardFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex items-center border-t px-4 py-3", className)} {...props} />;
 }

package/resources/bundled-skills/app-builder/assets/scaffold/components/ui/empty.tsx

@@ -0,0 +1,18 @@
+import { cn } from "@/lib/utils";
+import * as React from "react";
+
+export function Empty({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex min-h-44 flex-col items-center justify-center gap-3 p-6 text-center", className)} {...props} />;
+}
+
+export function EmptyHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex max-w-sm flex-col gap-1", className)} {...props} />;
+}
+
+export function EmptyTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return <h3 className={cn("m-0 text-sm font-semibold", className)} {...props} />;
+}
+
+export function EmptyDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("m-0 text-sm text-muted-foreground", className)} {...props} />;
+}