banhaten 0.3.0 → 0.5.0

package/registry/examples/agent-input-demo.tsx

@@ -0,0 +1,90 @@
+import * as React from "react"
+import {
+  BotIcon,
+  BrainIcon,
+  FileSearchIcon,
+  GlobeIcon,
+  ListCollapseIcon,
+  SparklesIcon,
+} from "lucide-react"
+
+import {
+  AgentInput,
+  type AgentInputModel,
+  type AgentInputPayload,
+  type AgentInputSkill,
+} from "@/components/ui/agent-input"
+
+const models: AgentInputModel[] = [
+  {
+    description: "Most capable for complex, multi-step reasoning.",
+    icon: <SparklesIcon />,
+    id: "reasoning-xl",
+    meta: "200k context",
+    name: "Reasoning XL",
+  },
+  {
+    description: "Fast all-rounder with strong tool use.",
+    icon: <BotIcon />,
+    id: "general-pro",
+    meta: "400k context",
+    name: "General Pro",
+  },
+  {
+    description: "Long-context model for large documents and codebases.",
+    icon: <BrainIcon />,
+    id: "long-context",
+    meta: "1M context",
+    name: "Long Context",
+  },
+]
+
+const skills: AgentInputSkill[] = [
+  { icon: <FileSearchIcon />, id: "deep-research", name: "Deep research" },
+  { icon: <ListCollapseIcon />, id: "code-review", name: "Code review" },
+  { icon: <GlobeIcon />, id: "web-search", name: "Web search" },
+  { icon: <SparklesIcon />, id: "summarize", name: "Summarize" },
+]
+
+const enhanced =
+  "Rewrite this prompt to be clear and specific: state the goal, add the relevant context and constraints, define the expected output format and tone, and note any assumptions. Ask a clarifying question first if key details are missing."
+
+/**
+ * Integration seam: replace the timeout with a request to your model API and
+ * honour the abort signal so an in-flight enhance can be cancelled.
+ */
+async function mockEnhance(_prompt: string, signal: AbortSignal) {
+  await new Promise((resolve) => setTimeout(resolve, 2500))
+  if (signal.aborted) throw new DOMException("Aborted", "AbortError")
+  return enhanced
+}
+
+export function AgentInputDemo() {
+  const [sent, setSent] = React.useState<AgentInputPayload | null>(null)
+  // Integration seam: picked attachments carry their File. Upload them here,
+  // or as soon as they arrive through onAttachmentsChange.
+  const files = sent?.attachments.flatMap((attachment) => attachment.file ?? []) ?? []
+
+  return (
+    <div className="grid w-full max-w-[var(--bh-space-19xl-384)] gap-[var(--bh-space-xl-12)]">
+      <AgentInput
+        models={models}
+        onEnhance={mockEnhance}
+        onSend={setSent}
+        skills={skills}
+      />
+
+      {sent ? (
+        <p
+          aria-live="polite"
+          className="text-[length:var(--bh-text-body-xs-regular-font-size)] leading-[var(--bh-text-body-xs-regular-line-height)] text-[var(--bh-content-subtle)]"
+        >
+          Sent to {sent.model}: {sent.text}
+          {files.length > 0
+            ? ` (${files.length} ${files.length === 1 ? "file" : "files"} ready to upload)`
+            : null}
+        </p>
+      ) : null}
+    </div>
+  )
+}

package/registry/examples/alert-demo.tsx

@@ -1,34 +1,34 @@
-import { Alert } from "@/components/ui/alert"
-
-export function AlertDemo() {
-  return (
-    <div className="grid gap-[var(--bh-space-3xl-16)]">
-      <Alert status="danger" title="Payment failed" />
-      <Alert status="success" title="Changes saved" />
-      <Alert
-        actions={[
-          { label: "Review details", onClick: noop },
-          { label: "Dismiss", onClick: noop },
-        ]}
-        description="Update the payment method before the next billing attempt."
-        isExpandable
-        status="warning"
-        title="Payment method expires soon"
-      />
-      <div dir="rtl">
-        <Alert
-          actions={[
-            { label: "عرض التفاصيل", onClick: noop },
-            { label: "متابعة", onClick: noop },
-          ]}
-          description="يمكنك مراجعة التفاصيل أو المتابعة من لوحة التحكم."
-          isExpandable
-          status="info"
-          title="تم تحديث حسابك"
-        />
-      </div>
-    </div>
-  )
-}
-
-function noop() {}
+import { Alert } from "@/components/ui/alert"
+
+export function AlertDemo() {
+  return (
+    <div className="grid gap-[var(--bh-space-3xl-16)]">
+      <Alert status="danger" title="Payment failed" />
+      <Alert status="success" title="Changes saved" />
+      <Alert
+        actions={[
+          { label: "Review details", onClick: noop },
+          { label: "Dismiss", onClick: noop },
+        ]}
+        description="Update the payment method before the next billing attempt."
+        isExpandable
+        status="warning"
+        title="Payment method expires soon"
+      />
+      <div dir="rtl">
+        <Alert
+          actions={[
+            { label: "عرض التفاصيل", onClick: noop },
+            { label: "متابعة", onClick: noop },
+          ]}
+          description="يمكنك مراجعة التفاصيل أو المتابعة من لوحة التحكم."
+          isExpandable
+          status="info"
+          title="تم تحديث حسابك"
+        />
+      </div>
+    </div>
+  )
+}
+
+function noop() {}

package/registry/examples/alert-dialog-demo.tsx

@@ -1,42 +1,42 @@
-import { Button } from "@/components/ui/button"
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogBody,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogIcon,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@/components/ui/alert-dialog"
-
-export function AlertDialogDemo() {
-  return (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button size="sm" variant="danger">
-          Delete project
-        </Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogIcon intent="danger" />
-          <AlertDialogTitle>Delete project?</AlertDialogTitle>
-        </AlertDialogHeader>
-        <AlertDialogBody>
-          <AlertDialogDescription>
-            This action cannot be undone. All environments, deployments, and
-            saved settings will be permanently removed.
-          </AlertDialogDescription>
-        </AlertDialogBody>
-        <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction>Delete project</AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  )
-}
+import { Button } from "@/components/ui/button"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogBody,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogIcon,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+
+export function AlertDialogDemo() {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button size="sm" variant="danger">
+          Delete project
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogIcon intent="danger" />
+          <AlertDialogTitle>Delete project?</AlertDialogTitle>
+        </AlertDialogHeader>
+        <AlertDialogBody>
+          <AlertDialogDescription>
+            This action cannot be undone. All environments, deployments, and
+            saved settings will be permanently removed.
+          </AlertDialogDescription>
+        </AlertDialogBody>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction>Delete project</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}

package/registry/examples/approval-card-demo.tsx

@@ -0,0 +1,83 @@
+import * as React from "react"
+
+import {
+  ApprovalCommand,
+  ApprovalPlan,
+  type ApprovalPlanStep,
+  type ApprovalQuestion,
+  ApprovalQuestions,
+} from "@/components/ui/approval-card"
+
+const questions: ApprovalQuestion[] = [
+  {
+    id: "auth",
+    options: ["Session cookies", "JWT bearer", "OAuth only"],
+    prompt: "Which auth approach should we use?",
+  },
+  {
+    id: "secrets",
+    options: [".env.local", "Vault / secrets manager", "CI only"],
+    prompt: "Where should secrets live?",
+  },
+  {
+    id: "flag",
+    options: ["Yes, gradual rollout", "No, full release"],
+    prompt: "Ship behind a feature flag?",
+  },
+]
+
+const plan: ApprovalPlanStep[] = [
+  { id: "p1", title: "Add migration for sessions table" },
+  { id: "p2", title: "Wire auth middleware" },
+  { id: "p3", title: "Update login flow and tests" },
+  { id: "p4", title: "Add account settings page" },
+  { id: "p5", title: "Tighten CSRF and rate limits" },
+  { id: "p6", title: "Write rollout notes" },
+]
+
+export function ApprovalCardDemo() {
+  const [status, setStatus] = React.useState<string | null>(null)
+
+  return (
+    <div className="grid w-full max-w-[var(--bh-space-19xl-384)] gap-[var(--bh-space-3xl-16)]">
+      <ApprovalQuestions
+        onApprove={({ answers }) =>
+          setStatus(`Answers: ${JSON.stringify(answers)}`)
+        }
+        onReject={() => setStatus("Questions skipped")}
+        questions={questions}
+      />
+
+      <ApprovalCommand
+        command="pnpm db:migrate && pnpm build"
+        cwd="~/acme"
+        onApprove={() => setStatus("Command approved")}
+        onReject={() => setStatus("Command skipped")}
+      />
+
+      <ApprovalPlan
+        autoApproveSeconds={30}
+        onApprove={({ source }) =>
+          setStatus(source === "timeout" ? "Plan auto-approved" : "Plan approved")
+        }
+        onDownload={() => setStatus("Plan downloaded")}
+        onExpand={() => setStatus("Plan expanded")}
+        onViewPlan={() => setStatus("Plan opened")}
+        plan={plan}
+        planSummary={
+          "Ship cookie-based sessions with middleware and tests.\nIncludes a safe rollout path for production."
+        }
+        planTitle="Session auth migration"
+      />
+
+      {status ? (
+        <p
+          aria-live="polite"
+          className="text-[length:var(--bh-text-body-xs-regular-font-size)] leading-[var(--bh-text-body-xs-regular-line-height)] text-[var(--bh-content-subtle)]"
+        >
+          {status}
+        </p>
+      ) : null}
+    </div>
+  )
+}

package/registry/examples/aspect-ratio-demo.tsx

@@ -1,11 +1,11 @@
-import { AspectRatio } from "@/components/ui/aspect-ratio"
-
-export function AspectRatioDemo() {
-  return (
-    <AspectRatio ratio={16 / 9} className="max-w-xl">
-      <div className="flex size-full items-center justify-center bg-[var(--bh-bg-neutral-subtle)] text-[var(--bh-content-subtle)]">
-        16:9
-      </div>
-    </AspectRatio>
-  )
-}
+import { AspectRatio } from "@/components/ui/aspect-ratio"
+
+export function AspectRatioDemo() {
+  return (
+    <AspectRatio ratio={16 / 9} className="max-w-xl">
+      <div className="flex size-full items-center justify-center bg-[var(--bh-bg-neutral-subtle)] text-[var(--bh-content-subtle)]">
+        16:9
+      </div>
+    </AspectRatio>
+  )
+}

package/registry/examples/attribute-demo.tsx

@@ -1,65 +1,65 @@
-import { CopyIcon, ExternalLinkIcon, PaperclipIcon } from "lucide-react"
-
-import {
-  AttributeCard,
-  AttributeHeader,
-  AttributeItem,
-  AttributeList,
-} from "@/components/ui/attribute"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-
-export function AttributeDemo() {
-  return (
-    <div className="grid max-w-5xl gap-[var(--bh-space-3xl-16)] lg:grid-cols-2">
-      <AttributeCard>
-        <AttributeHeader
-          title="Company profile"
-          description="Key-value information in a scannable card."
-        />
-        <AttributeList>
-          <AttributeItem label="Name">Banhaten</AttributeItem>
-          <AttributeItem label="Location">Remote</AttributeItem>
-          <AttributeItem label="Website">
-            <a
-              className="inline-flex items-center gap-[var(--bh-space-xxs-2)] text-[var(--bh-content-link)] hover:text-[var(--bh-content-link-hover)]"
-              href="https://banhaten.com"
-            >
-              banhaten.com
-              <ExternalLinkIcon className="size-[var(--bh-space-3xl-16)]" />
-            </a>
-          </AttributeItem>
-          <AttributeItem label="Industry">
-            <Badge>Design</Badge>
-          </AttributeItem>
-        </AttributeList>
-      </AttributeCard>
-
-      <AttributeCard>
-        <AttributeHeader
-          title="Order details"
-          description="Rich values with copy actions, files, and status chips."
-        />
-        <AttributeList dividers>
-          <AttributeItem label="Subscription">
-            <Badge color="green" type="dot">
-              Active
-            </Badge>
-          </AttributeItem>
-          <AttributeItem label="API key" truncate>
-            sk_live_************1234
-            <Button aria-label="Copy API key" size="icon-xs" variant="outline">
-              <CopyIcon />
-            </Button>
-          </AttributeItem>
-          <AttributeItem label="Invoice">
-            <span className="inline-flex min-w-0 items-center gap-[var(--bh-space-md-8)]">
-              <PaperclipIcon className="size-[var(--bh-space-4xl-20)] shrink-0 text-[var(--bh-content-muted)]" />
-              INV-2024-00123.pdf
-            </span>
-          </AttributeItem>
-        </AttributeList>
-      </AttributeCard>
-    </div>
-  )
-}
+import { CopyIcon, ExternalLinkIcon, PaperclipIcon } from "lucide-react"
+
+import {
+  AttributeCard,
+  AttributeHeader,
+  AttributeItem,
+  AttributeList,
+} from "@/components/ui/attribute"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+
+export function AttributeDemo() {
+  return (
+    <div className="grid max-w-5xl gap-[var(--bh-space-3xl-16)] lg:grid-cols-2">
+      <AttributeCard>
+        <AttributeHeader
+          title="Company profile"
+          description="Key-value information in a scannable card."
+        />
+        <AttributeList>
+          <AttributeItem label="Name">Banhaten</AttributeItem>
+          <AttributeItem label="Location">Remote</AttributeItem>
+          <AttributeItem label="Website">
+            <a
+              className="inline-flex items-center gap-[var(--bh-space-xxs-2)] text-[var(--bh-content-link)] hover:text-[var(--bh-content-link-hover)]"
+              href="https://banhaten.com"
+            >
+              banhaten.com
+              <ExternalLinkIcon className="size-[var(--bh-space-3xl-16)]" />
+            </a>
+          </AttributeItem>
+          <AttributeItem label="Industry">
+            <Badge>Design</Badge>
+          </AttributeItem>
+        </AttributeList>
+      </AttributeCard>
+
+      <AttributeCard>
+        <AttributeHeader
+          title="Order details"
+          description="Rich values with copy actions, files, and status chips."
+        />
+        <AttributeList dividers>
+          <AttributeItem label="Subscription">
+            <Badge color="green" type="dot">
+              Active
+            </Badge>
+          </AttributeItem>
+          <AttributeItem label="API key" truncate>
+            sk_live_************1234
+            <Button aria-label="Copy API key" size="icon-xs" variant="outline">
+              <CopyIcon />
+            </Button>
+          </AttributeItem>
+          <AttributeItem label="Invoice">
+            <span className="inline-flex min-w-0 items-center gap-[var(--bh-space-md-8)]">
+              <PaperclipIcon className="m-[var(--bh-icon-slot-inset-default)] size-[var(--bh-icon-size-default)] shrink-0 text-[var(--bh-content-muted)]" />
+              INV-2024-00123.pdf
+            </span>
+          </AttributeItem>
+        </AttributeList>
+      </AttributeCard>
+    </div>
+  )
+}